/* MINIMAL DUNGEON - Seite: schwarz/weiss, Versalien, scharfe Kanten, Rahmen 4 px, Geisterknoepfe 2 px (wie die Werkseiten).
   Alles Bedienbare wird einmal angelegt und nur in Zustand und Inhalt geaendert (keine Neubauten im Takt). */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #07070a; color: #fff;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#buehne { position: fixed; inset: 0; overflow: hidden; --u: max(10px, min(1.25vw, 2.2vh)); }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: crosshair; }
#blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.weg { display: none !important; }
.text { font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
body.cjk .text { letter-spacing: 0.04em; }
.klein { font-size: calc(var(--u) * 0.8); }
.zahl { font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Anzeige */
#anzeige { position: absolute; inset: 0; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#obenLinks { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 1.4); display: grid; gap: calc(var(--u) * 0.6); }
#herzen, #dashes { display: flex; gap: calc(var(--u) * 0.35); }
#herzen i { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); box-sizing: border-box; border: max(2px, calc(var(--u) * 0.18)) solid #fff; }
#herzen i.voll { background: #fff; }
#herzen.treffer i.voll { background: #ff007f; border-color: #ff007f; }
#dashes i { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); box-sizing: border-box; border: 2px solid #9bf6ff; position: relative; overflow: hidden; }
#dashes i b { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #9bf6ff; }
#spezial { width: calc(var(--u) * 9); height: calc(var(--u) * 0.55); box-sizing: border-box; border: 2px solid #fff; position: relative; }
#spezial b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; opacity: 0.55; }
#spezial.voll { animation: puls 0.8s ease-in-out infinite; }
#spezial.voll b { opacity: 1; }
@keyframes puls { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); } }
#obenRechts { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.0); text-align: right; display: grid; gap: calc(var(--u) * 0.2); }
#kette { color: #ffe600; min-height: 1.2em; }
#ort { opacity: 0.6; }
#boss { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 1.3); width: min(46vw, calc(var(--u) * 36)); text-align: center; display: grid; gap: calc(var(--u) * 0.4); }
#bossBalken { height: calc(var(--u) * 0.7); border: max(2px, calc(var(--u) * 0.2)) solid #fff; position: relative; }
#bossBalken b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; transition: width 0.15s linear; }
#zeitAnzeige { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.6); }
#waffen { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * 0.5); }
#waffen span { padding: calc(var(--u) * 0.35) calc(var(--u) * 0.7); border: 2px solid rgba(255, 255, 255, 0.35); opacity: 0.5; }
#waffen span.an { border-color: #fff; opacity: 1; background: rgba(255, 255, 255, 0.1); }
#waffen span:empty { display: none; }
#hinweis { position: absolute; left: 50%; bottom: calc(var(--u) * 5.2); transform: translateX(-50%); text-align: center; opacity: 0;
	transition: opacity 0.4s; white-space: nowrap; background: rgba(7, 7, 10, 0.55); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.0); }
#hinweis.an { opacity: 0.95; }
#meldung { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); font-size: calc(var(--u) * 1.7); letter-spacing: 0.2em;
	text-align: center; opacity: 0; transition: opacity 0.35s; white-space: nowrap; text-shadow: 0 0 18px rgba(0, 0, 0, 0.9); }
#meldung.an { opacity: 1; transition: opacity 0.08s; }
#testMarke { position: absolute; left: 50%; bottom: calc(var(--u) * 1.0); transform: translateX(-50%); opacity: 0.55; }
#leistung { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 4.6); opacity: 0.6; text-align: right; }
body.ohneHud #anzeige, body.ohneHud #menueKnopf, body.ohneHud #ton { display: none !important; }

/* Knoepfe */
button { font-family: inherit; color: #fff; background: none; border: 2px solid #fff; border-radius: 0; cursor: pointer;
	padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5); min-height: 44px; touch-action: manipulation; }
button:hover, button:focus-visible { background: #fff; color: #07070a; outline: none; }
button.gross { border-width: 4px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.2); }
#menueKnopf { position: absolute; right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); opacity: 0.7; border-color: rgba(255, 255, 255, 0.6); }
#ton { position: absolute; right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); opacity: 0.6; border-color: rgba(255, 255, 255, 0.4); }
body.spielt #ton { right: calc(var(--u) * 9.5); }
#ton.aus { text-decoration: line-through; }

/* Seiten (Titel, Pause, Einstellungen, Wahl, Ende) */
.seite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: calc(var(--u) * 1.3); background: rgba(7, 7, 10, 0.62); padding: 4vh 4vw; box-sizing: border-box; text-align: center; overflow: auto; }
#titelSeite { background: linear-gradient(rgba(7, 7, 10, 0.15), rgba(7, 7, 10, 0.72)); }
.seite h1 { margin: 0; font-size: calc(var(--u) * 4.4); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
.seite h2 { margin: 0; font-size: calc(var(--u) * 2.0); letter-spacing: 0.18em; }
.unter { margin: 0; opacity: 0.75; }
.knoepfe { display: flex; gap: calc(var(--u) * 0.9); flex-wrap: wrap; justify-content: center; }
.knoepfe.senkrecht { flex-direction: column; min-width: calc(var(--u) * 18); }
#steuerung, #pauseSteuerung { max-width: 70ch; margin: 0; opacity: 0.7; line-height: 1.8; }
.liste { border: 4px solid #fff; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4); min-width: calc(var(--u) * 20); }
.liste .kopf { margin-bottom: calc(var(--u) * 0.5); opacity: 0.7; }
ol { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 0.35); }
ol li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 1em; text-align: left; font-variant-numeric: tabular-nums; }
ol li.neu { color: #ffe600; }
#regler { display: grid; gap: calc(var(--u) * 0.7); min-width: min(90vw, calc(var(--u) * 34)); }
.reihe { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; text-align: left; }
.reihe .wahl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; }
.reihe .wahl button { border-width: 2px; margin-left: -2px; padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9); opacity: 0.6; }
.reihe .wahl button.an { background: #fff; color: #07070a; opacity: 1; }
#karten { display: flex; gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: center; }
.karte { width: min(28vw, calc(var(--u) * 17)); min-height: calc(var(--u) * 14); border-width: 4px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); text-transform: none; padding: calc(var(--u) * 1.2); }
.karte b { font-size: calc(var(--u) * 1.3); }
.karte span { font-size: calc(var(--u) * 0.9); line-height: 1.5; opacity: 0.85; }
.karte i { font-style: normal; opacity: 0.6; }
.karte.fokus { background: #fff; color: #07070a; }
#endeTitel { font-size: calc(var(--u) * 3.0); letter-spacing: 0.05em; }
#endeZahlen { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--u) * 0.6) calc(var(--u) * 2.2); }
#endeZahlen div { display: grid; gap: calc(var(--u) * 0.3); }
#endeZahlen em { font-style: normal; opacity: 0.6; font-size: calc(var(--u) * 0.8); }
#endeZahlen b { font-size: calc(var(--u) * 1.6); }
#eintrag { display: flex; gap: calc(var(--u) * 0.6); flex-wrap: wrap; justify-content: center; }
#eintrag input { font-family: inherit; background: none; color: #fff; border: 4px solid #fff; border-radius: 0; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.0);
	width: calc(var(--u) * 14); outline: none; user-select: text; -webkit-user-select: text; }

/* Touch: zwei Hebel und Knoepfe (nur bei Touch sichtbar) */
#touch { position: absolute; inset: 0; pointer-events: none; }
.hebel { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%; opacity: 0; transition: opacity 0.15s; }
.hebel.an { opacity: 1; transition: none; }
.hebel i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(255, 255, 255, 0.35); border-radius: 50%; }
.tknopf { position: absolute; pointer-events: auto; width: 84px; height: 84px; border-radius: 50%; padding: 0; border: 3px solid rgba(255, 255, 255, 0.6);
	background: rgba(7, 7, 10, 0.25); font-size: 12px; }
.tknopf.an { background: rgba(255, 255, 255, 0.85); color: #07070a; }
.tknopf.leer { opacity: 0.4; }
.tknopf.klein { width: 60px; height: 60px; font-size: 10px; }
#tDash { right: calc(28px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); }
#tWelle { right: calc(124px + env(safe-area-inset-right)); bottom: calc(196px + env(safe-area-inset-bottom)); }
#tWaffe { right: calc(36px + env(safe-area-inset-right)); bottom: calc(250px + env(safe-area-inset-bottom)); }
#hochkant { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: rgba(7, 7, 10, 0.8); border: 2px solid #fff; padding: 12px 18px; pointer-events: none; }

#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #07070a; z-index: 10; }
#lade h1 { font-size: 38px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 14px; }
#lade p { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

@media (max-height: 520px) {
	#karten .karte { min-height: calc(var(--u) * 10); }
	.seite { gap: calc(var(--u) * 0.8); }
	.seite h1 { font-size: calc(var(--u) * 3.2); }
}
body.aufnahme #testMarke, body.aufnahme #leistung, body.aufnahme #ton, body.aufnahme #menueKnopf { display: none !important; }

/* Weltauswahl: Titel oben, Namen unter den Dioramen (Lage aus dem Spiel), Zurueck unten */
#weltSeite { background: none; justify-content: space-between; pointer-events: none; overflow: hidden; }
#weltSeite .kopf { margin-top: 2vh; display: grid; gap: calc(var(--u) * 0.5); }
#weltSeite .kopf h2 { font-size: calc(var(--u) * 2.2); }
#weltSeite .kopf p { margin: 0; opacity: 0.7; }
#weltSeite .fuss { pointer-events: auto; }
#weltNamen { position: absolute; inset: 0; pointer-events: none; }
.weltName { position: absolute; transform: translate(-50%, 0); pointer-events: auto; border: 0; background: none; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.8);
	opacity: 0.55; border-bottom: max(2px, calc(var(--u) * 0.14)) solid transparent; white-space: nowrap; }
/* kleine Fenster: lange Namen (fr, es) duerfen umbrechen und werden etwas kleiner, damit sie sich nicht ueberlappen */
@media (max-width: 900px) and (orientation: landscape) { .weltName { white-space: normal; max-width: 23vw; font-size: calc(var(--u) * 0.85); line-height: 1.25; text-align: center; } }
.weltName:hover { background: none; color: #fff; opacity: 0.9; }
.weltName.an { opacity: 1; border-bottom-color: #fff; }