/* Browser DayZ — Oberfläche über der Tidewater-Welt. Nutzt die Tidewater-Variablen (--tw-*) aus
   /src/ui/ui.css, damit Menüs und HUD wie das Tidewater-Panel aussehen. Das Tidewater-Panel (ß)
   liegt mit z-index 100 über allem hier. */

#dz-root {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	font-family: var(--tw-font);
	font-size: var(--tw-fs-md);
	color: var(--tw-ink);
	-webkit-font-smoothing: antialiased;
	user-select: none;
	-webkit-user-select: none;
}

#dz-root *, #dz-root *::before, #dz-root *::after { box-sizing: border-box; }

.dz-hidden { display: none !important; }

#dz-root kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(20 * var(--tw-u));
	height: calc(20 * var(--tw-u));
	padding: 0 calc(5 * var(--tw-u));
	border-radius: calc(5 * var(--tw-u));
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom-width: 2px;
	font: 600 var(--tw-fs-xs) / 1 var(--tw-mono);
	color: var(--tw-ink);
}

/* ── Vollbild-Menüs ─────────────────────────────────────────────────────── */

.dz-screen {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--tw-5);
	pointer-events: auto;
	background: radial-gradient(ellipse 80% 70% at 50% 55%, rgba(3, 10, 16, 0.15), rgba(3, 10, 16, 0.72));
	animation: dz-fade 420ms var(--tw-ease);
}

@keyframes dz-fade { from { opacity: 0; } to { opacity: 1; } }

.dz-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(12 * var(--tw-u));
	min-width: calc(340 * var(--tw-u));
	padding: calc(28 * var(--tw-u)) calc(32 * var(--tw-u));
	border-radius: var(--tw-r-lg);
	text-align: center;
}

.dz-card-wide { min-width: calc(560 * var(--tw-u)); }

.dz-kicker {
	font-size: var(--tw-fs-sm);
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tw-aqua);
}

.dz-title {
	margin: calc(2 * var(--tw-u)) calc(-0.3em) calc(10 * var(--tw-u)) 0;
	font-size: clamp(28px, 4vw, 54px);
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1.05;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.dz-title-sm { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 0; }
.dz-title-red { color: var(--tw-coral); }

.dz-sub { font-size: var(--tw-fs-sm); color: var(--tw-ink-2); display: flex; gap: 6px; align-items: center; }

.dz-input {
	width: calc(280 * var(--tw-u));
	height: calc(42 * var(--tw-u));
	padding: 0 calc(14 * var(--tw-u));
	border-radius: var(--tw-r-md);
	border: 1px solid var(--tw-line-2);
	background: rgba(0, 0, 0, 0.3);
	color: var(--tw-ink);
	font: 500 var(--tw-fs-lg) var(--tw-font);
	text-align: center;
	outline: none;
	user-select: text;
}

.dz-input:focus { border-color: rgba(var(--tw-aqua-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--tw-aqua-rgb), 0.18); }

.dz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(8 * var(--tw-u));
	width: calc(280 * var(--tw-u));
	height: calc(42 * var(--tw-u));
	border-radius: 999px;
	border: 1px solid var(--tw-line-2);
	background: var(--tw-fill);
	color: var(--tw-ink);
	font: 600 var(--tw-fs-lg) var(--tw-font);
	cursor: pointer;
	transition: background var(--tw-fast), transform var(--tw-fast) var(--tw-ease), box-shadow var(--tw-med);
}

.dz-btn:hover { background: var(--tw-fill-2); transform: translateY(-1px); }

.dz-btn-primary {
	border: 0;
	background: linear-gradient(180deg, #9af5ea, #55dccd);
	color: #03201c;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px -8px rgba(var(--tw-aqua-rgb), 0.8);
}

.dz-btn-primary:hover { background: linear-gradient(180deg, #a8f8ee, #62e3d5); }
.dz-btn-ghost { background: transparent; }
.dz-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.dz-btn.is-active { border-color: var(--tw-aqua); background: rgba(var(--tw-aqua-rgb), 0.2); }

.dz-msg { min-height: 1.2em; font-size: var(--tw-fs-sm); color: var(--tw-sun); }

.dz-keys {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tw-3) calc(18 * var(--tw-u));
	margin-top: calc(10 * var(--tw-u));
	font-size: var(--tw-fs-sm);
	color: var(--tw-ink-2);
}

.dz-keys > span { display: inline-flex; align-items: center; gap: var(--tw-2); }
.dz-keys .tw-wasd { display: inline-flex; gap: 2px; }

.dz-dead { background: radial-gradient(ellipse 80% 70% at 50% 55%, rgba(60, 0, 0, 0.25), rgba(20, 0, 0, 0.8)); }

/* ── HUD ────────────────────────────────────────────────────────────────── */

#dz-hud { position: absolute; inset: 0; pointer-events: none; }

#dz-health {
	position: absolute;
	left: var(--tw-edge);
	bottom: var(--tw-edge);
	display: flex;
	flex-direction: column;
	gap: calc(6 * var(--tw-u));
	padding: calc(10 * var(--tw-u)) calc(14 * var(--tw-u));
	border-radius: var(--tw-r-md);
	transition: bottom var(--tw-slow) var(--tw-ease);
}

#dz-hud.is-boat #dz-health { bottom: calc(150 * var(--tw-u)); }

.dz-health-label {
	font-size: var(--tw-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tw-ink-2);
}

.dz-health-bar {
	width: calc(200 * var(--tw-u));
	height: calc(8 * var(--tw-u));
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

#dz-health-fill {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ff5a6a, var(--tw-coral));
	box-shadow: 0 0 12px rgba(255, 122, 133, 0.6);
	transition: width 200ms var(--tw-ease);
}

#dz-health.is-god #dz-health-fill { background: linear-gradient(90deg, #ffcc55, var(--tw-sun)); }

#dz-crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
	transform: translate(-50%, -50%);
}

#dz-hitmarker {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
	background:
		linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
		linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
	-webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px);
	mask: radial-gradient(circle, transparent 5px, #000 5.5px);
	transition: opacity 180ms;
}

#dz-hitmarker.is-on { opacity: 1; transition: none; }

#dz-loot-prompt { display: none; }

#dz-weapon {
	position: absolute;
	right: var(--tw-edge);
	bottom: var(--tw-edge);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	padding: calc(8 * var(--tw-u)) calc(14 * var(--tw-u));
	border-radius: var(--tw-r-md);
	font-size: var(--tw-fs-xs);
	color: var(--tw-ink-2);
}

#dz-weapon b { font-size: var(--tw-fs-lg); color: var(--tw-ink); letter-spacing: 0.04em; }
#dz-weapon span { display: inline-flex; align-items: center; gap: 4px; }

#dz-minimap {
	position: absolute;
	top: var(--tw-edge);
	right: calc(var(--tw-edge) + 2px);
	width: calc(200 * var(--tw-u));
	height: calc(200 * var(--tw-u));
	border-radius: 50%;
	border: 1px solid var(--tw-line-2);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#dz-pings { position: absolute; inset: 0; }

.dz-tag {
	position: absolute;
	transform: translate(-50%, -140%);
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(8, 14, 22, 0.6);
	border: 1px solid rgba(255, 204, 0, 0.8);
	color: #ffcc00;
	font: 600 var(--tw-fs-xs) var(--tw-mono);
	white-space: nowrap;
	pointer-events: none;
	backdrop-filter: blur(6px);
}

.dz-tag.is-player { border-color: rgba(var(--tw-aqua-rgb), 0.6); color: var(--tw-ink); font-family: var(--tw-font); }

/* ── Zielfernrohr ───────────────────────────────────────────────────────── */

#dz-scope {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(circle at center, transparent 0%, transparent 24%, #000 24.6%);
	display: flex;
	align-items: center;
	justify-content: center;
}

#dz-scope-hud { position: relative; width: 48vh; height: 48vh; }
#dz-scope-hud svg { width: 100%; height: 100%; }

#dz-scope-zoom, #dz-scope-zero, #dz-scope-hint {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font: 600 var(--tw-fs-md) var(--tw-mono);
	color: #ffb86b;
	text-shadow: 0 0 4px #000;
}

#dz-scope-zoom { top: 8%; }
#dz-scope-zero { bottom: 8%; }
#dz-scope-hint { bottom: 1%; font-size: var(--tw-fs-xs); font-weight: 400; opacity: 0.75; white-space: nowrap; }

/* ── Karte ──────────────────────────────────────────────────────────────── */

.dz-map-card { padding: var(--tw-3); border-radius: var(--tw-r-lg); display: flex; flex-direction: column; align-items: center; gap: var(--tw-2); }
#dz-map-canvas { width: min(80vh, 80vw); height: min(80vh, 80vw); border-radius: var(--tw-r-md); }
.dz-map-hint { font-size: var(--tw-fs-sm); color: var(--tw-ink-2); display: flex; gap: 6px; align-items: center; }

/* ── Rucksack ───────────────────────────────────────────────────────────── */

.dz-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, calc(48 * var(--tw-u)));
	grid-template-rows: repeat(4, calc(48 * var(--tw-u)));
	gap: 3px;
	padding: 3px;
	margin-top: var(--tw-2);
	border-radius: var(--tw-r-md);
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--tw-line);
}

.dz-cell { border-radius: 4px; background: var(--tw-fill); }

.dz-item {
	/* absolut im Rasterbereich: belegt keine Zellen, die Hintergrund-Zellen bleiben an ihrem Platz */
	position: absolute;
	inset: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border-radius: 6px;
	border: 1px solid rgba(var(--tw-aqua-rgb), 0.35);
	background: linear-gradient(180deg, rgba(var(--tw-aqua-rgb), 0.16), rgba(var(--tw-aqua-rgb), 0.06));
	font-size: var(--tw-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--tw-fast), background var(--tw-fast);
	z-index: 1;
}

.dz-item span { font-size: var(--tw-fs-xs); font-weight: 400; color: var(--tw-ink-3); }
.dz-item:hover { border-color: var(--tw-aqua); background: rgba(var(--tw-aqua-rgb), 0.24); }

/* ── Admin ──────────────────────────────────────────────────────────────── */

.dz-row { display: flex; justify-content: space-between; width: 100%; font-size: var(--tw-fs-md); color: var(--tw-ink-2); }
.dz-row span { font-family: var(--tw-mono); color: var(--tw-sun); }
.dz-range { width: 100%; accent-color: var(--tw-aqua); }
.dz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tw-4); width: 100%; }
.dz-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tw-2); margin: var(--tw-2) 0; }

.dz-chip {
	padding: calc(7 * var(--tw-u)) calc(14 * var(--tw-u));
	border-radius: 999px;
	border: 1px solid var(--tw-line-2);
	background: var(--tw-fill);
	color: var(--tw-ink);
	font: 600 var(--tw-fs-md) var(--tw-font);
	cursor: pointer;
}

.dz-chip:hover { background: var(--tw-fill-2); }
.dz-chip.is-active { border-color: var(--tw-aqua); background: rgba(var(--tw-aqua-rgb), 0.2); }

/* WebGPU fehlt */
.dz-nogpu { color: var(--tw-coral); font-weight: 600; }