PlayerHud {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: Poppins, sans-serif;
	font-size: 22px;
	color: white;

	.crosshair {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 14px;
		height: 14px;
		border: 2px solid rgba(255, 255, 255, 0.95);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
		z-index: 120;
	}

	> .hud-top-left,
	> .ammo-display,
	> .health-display,
	> .player-role,
	> .sigil-preview,
	> .tooltips,
	> .repair-status {
		text-shadow:
			0 2px 0 rgba(0, 0, 0, 0.98),
			0 0 10px rgba(0, 0, 0, 0.48);
	}

	> .hud-top-left {
		position: absolute;
		top: 26px;
		left: 28px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 420px;
		z-index: 140;

		> .phase {
			font-size: 34px;
			font-weight: 800;
			line-height: 1;
		}

		> .detail {
			font-size: 24px;
			font-weight: 700;
			color: rgba(255, 245, 219, 0.92);
		}

		> .money {
			margin-top: 4px;
			font-size: 34px;
			font-weight: 800;
			color: #7fe58b;
		}
	}

	> .sigil-preview {
		position: absolute;
		top: 19%;
		left: 50%;
		width: 760px;
		max-width: 84%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
		pointer-events: none;
		z-index: 145;

		> .count {
			font-size: 30px;
			font-weight: 800;
			text-transform: uppercase;
		}

		> .rule {
			font-size: 22px;
			font-weight: 700;
			color: rgba(255, 247, 220, 0.92);
		}

		> .heading {
			margin-top: 12px;
			font-size: 24px;
			font-weight: 800;
			text-transform: uppercase;
		}

		> .name {
			font-size: 24px;
			font-weight: 800;
			letter-spacing: 0;
		}
	}

	> .health-display {
		position: absolute;
		left: 28px;
		bottom: 24px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 270px;
		z-index: 140;

		> .health-number {
			font-size: 56px;
			font-weight: 900;
			line-height: 0.95;
		}

		> .health-bar {
			width: 100%;
			height: 14px;
			background-color: rgba(18, 18, 18, 0.86);
			border-radius: 999px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			overflow: hidden;

			> .fill {
				height: 100%;
				border-radius: 999px;
				box-shadow: 0 0 12px rgba(0, 0, 0, 0.28) inset;
			}
		}
	}

	> .ammo-display {
		position: absolute;
		right: 30px;
		bottom: 34px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		min-width: 180px;
		z-index: 140;

		> .weapon-name {
			font-size: 18px;
			font-weight: 700;
			text-transform: uppercase;
			color: rgba(255, 238, 198, 0.78);
		}

		> .ammo-row {
			display: flex;
			align-items: baseline;
			gap: 14px;

			> .mag {
				font-size: 62px;
				font-weight: 900;
				line-height: 0.95;
			}

			> .reserve {
				font-size: 34px;
				font-weight: 800;
				color: rgba(255, 255, 255, 0.78);
			}
		}
	}

	> .player-role {
		position: absolute;
		left: 50%;
		bottom: 24px;
		transform: translateX(-50%);
		font-size: 28px;
		font-weight: 800;
		text-align: center;
		z-index: 140;
	}

	.player-role.zombie {
		color: #ff6161;
	}

	.player-role.human {
		color: #7fe58b;
	}

	> .repair-status {
		position: absolute;
		left: 50%;
		top: calc(50% + 28px);
		transform: translateX(-50%);
		max-width: 430px;
		padding: 8px 12px;
		border-radius: 6px;
		background-color: rgba(10, 12, 14, 0.72);
		border: 1px solid rgba(255, 255, 255, 0.16);
		color: white;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
		z-index: 135;

		p {
			margin: 0;
		}
	}

	> .repair-status.damaged {
		color: #8fe8a5;
		border-color: rgba(80, 198, 112, 0.75);
	}

	> .repair-status.full {
		color: rgba(255, 255, 255, 0.8);
	}

	> .repair-status.no-target {
		color: rgba(255, 255, 255, 0.58);
	}

	> .tooltips {
		position: absolute;
		top: 26px;
		right: 28px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
		color: rgba(255, 255, 255, 0.82);
		font-size: 17px;
		font-weight: 700;
		text-align: right;
		z-index: 140;

		p {
			margin: 0;
		}
	}

	> .chat-messages {
		position: absolute;
		left: 28px;
		bottom: 110px;
		width: 470px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		pointer-events: none;
		z-index: 140;

		> .chat-message {
			font-size: 21px;
			font-weight: 700;
			line-height: 1.2;
			text-shadow:
				0 2px 0 rgba(0, 0, 0, 0.95),
				0 0 10px rgba(0, 0, 0, 0.55);

			.author {
				margin-right: 6px;
				color: #79dc90;
			}

			&.system {
				color: rgba(255, 247, 214, 0.92);
			}
		}
	}

	> .chat-input-row {
		position: absolute;
		left: 28px;
		bottom: 74px;
		width: 470px;
		display: none;
		pointer-events: all;
		z-index: 150;

		> TextEntry {
			width: 100%;
			padding: 10px 14px;
			border-radius: 6px;
			background-color: rgba(8, 10, 12, 0.78);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: white;
			font-size: 22px;
			font-weight: 600;
		}
	}

	> .chat-input-row.open {
		display: flex;
	}
}