/* MINIMAL TOWER DEFENSE - Seite: schwarz/weiss, Versalien, scharfe Kanten (Typografie wie Minimal Run und Raid). Das Bild fuellt den ganzen
   Schirm, die Anzeige liegt darueber; alles Bedienbare ist so gross, dass es mit dem Daumen trifft. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #08080b; 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; }
#feld { position: fixed; inset: 0; box-sizing: border-box; touch-action: none; }
#buehne { position: absolute; inset: 0; touch-action: none; }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: grab; }
#spiel.bauen { cursor: crosshair; }
#schicht { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#sturm { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, rgb(214 165 100 / 0.15), rgb(186 128 62 / 0.62)); }

#anzeige { position: absolute; inset: 0; pointer-events: none; --u: max(10.5px, min(1.15vw, 1.9vh));
           padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.text { font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
.weg { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }

/* oben links: Kraft, Kern, Welle */
#stand { position: absolute; left: calc(var(--u) * 1.2 + env(safe-area-inset-left)); top: calc(var(--u) * 0.9 + env(safe-area-inset-top)); display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 1.3); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9); background: rgb(8 8 11 / 0.62); }
#stand .wert { display: flex; align-items: center; gap: calc(var(--u) * 0.45); }
#stand b { font-size: calc(var(--u) * 1.65); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
#stand .kern.treffer b { animation: rot 0.5s; }
#stand .kraft.fehlt b { animation: rot 0.4s; }
@keyframes rot { 0%, 60% { color: #ff3b30; } 100% { color: #fff; } }
#stand .welle span { opacity: 0.65; }
#gegnerZahl { opacity: 0.6; }
#kopf { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.1 + env(safe-area-inset-top)); text-align: center; opacity: 0.7; }
#kopf:empty { display: none; }

/* Karte oben rechts */
#karte { position: absolute; right: calc(var(--u) * 1.2 + env(safe-area-inset-right)); top: calc(var(--u) * 4.2 + env(safe-area-inset-top)); width: calc(var(--u) * 9.5); height: auto; aspect-ratio: 112 / 180; pointer-events: auto; touch-action: none; outline: 1px solid rgb(255 255 255 / 0.4); background: #000; cursor: pointer; }

/* Boss */
#boss { position: absolute; left: 50%; top: calc(var(--u) * 3.4 + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.35); width: min(46vw, calc(var(--u) * 24)); }
#boss b { display: block; width: 100%; height: max(4px, calc(var(--u) * 0.3)); background: rgb(255 255 255 / 0.22); }
#boss b i { display: block; height: 100%; width: 100%; background: #ff3b30; transition: width 0.15s linear; }

/* Mitte */
#mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); text-align: center; padding: 0 calc(var(--u) * 1.2); }
#titel { font-weight: 700; line-height: 1; font-size: min(calc(var(--u) * 5), 11vw); letter-spacing: -0.035em; text-shadow: 0 0 40px rgb(0 0 0 / 0.55); }
#unter { opacity: 0.85; max-width: 60em; text-shadow: 0 0 14px #000; }
#hinweis { text-shadow: 0 0 14px #000; }
#hinweis.blinkt { animation: blinkt 2s ease-in-out infinite; }
@keyframes blinkt { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#herkunft { opacity: 0.55; font-size: calc(var(--u) * 0.75); }
#titelKnoepfe { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.45); margin-top: calc(var(--u) * 0.8); pointer-events: auto; }
#titelKnoepfe button { width: min(80vw, calc(var(--u) * 21)); padding: calc(var(--u) * 0.75) calc(var(--u) * 1.2); background: rgb(8 8 11 / 0.72); outline: 1px solid rgb(255 255 255 / 0.35); }
#titelKnoepfe button.gross { background: #fff; color: #08080b; outline: none; font-size: calc(var(--u) * 1.3); font-weight: 700; padding: calc(var(--u) * 0.95) calc(var(--u) * 1.2); }
#titelKnoepfe button:hover, #titelKnoepfe button:focus-visible { background: #ffd93d; color: #08080b; outline: none; }
#knoepfeEnde { display: flex; gap: calc(var(--u) * 0.8); flex-wrap: wrap; justify-content: center; pointer-events: auto; }
#knoepfeEnde button { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.5); background: #fff; color: #08080b; }
#knoepfeEnde button.neben { background: rgb(8 8 11 / 0.72); color: #fff; outline: 1px solid rgb(255 255 255 / 0.5); }
.sterne { color: #ffd93d; font-size: calc(var(--u) * 3); letter-spacing: 0.1em; }

/* Meldung */
#meldung { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-size: calc(var(--u) * 1.7); font-weight: 700; letter-spacing: 0.02em; opacity: 0; text-shadow: 0 0 12px #000; }
#meldung.zeigen { animation: meldung 2.2s ease-in forwards; }
#meldung.warnung { color: #ffe600; }
@keyframes meldung { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-0.6em); } }

/* neue Gegnerart: kurze Vorstellung */
#neu { position: absolute; left: calc(var(--u) * 1.2 + env(safe-area-inset-left)); top: calc(var(--u) * 4.6 + env(safe-area-inset-top)); max-width: min(62vw, calc(var(--u) * 30)); display: flex; gap: calc(var(--u) * 0.7); align-items: flex-start; padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9); background: rgb(8 8 11 / 0.78); border-left: 3px solid #ff3b30; animation: neuKommt 0.35s ease-out; }
#neu i { display: block; flex: none; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); margin-top: 0.25em; background: #ff3b30; }
#neu div { display: flex; flex-direction: column; gap: calc(var(--u) * 0.25); }
#neu span { font-size: calc(var(--u) * 1.0); line-height: 1.35; opacity: 0.9; }
@keyframes neuKommt { 0% { transform: translateX(-20px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Regeln zu Beginn */
#regeln { position: absolute; left: 50%; bottom: calc(var(--u) * 10.4 + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, calc(var(--u) * 46)); box-sizing: border-box; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2); background: rgb(8 8 11 / 0.8); font-size: calc(var(--u) * 1.05); line-height: 1.45; text-align: left; }
#regeln b { display: block; font-size: var(--u); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4em; color: #ffd93d; }
#regeln ol { margin: 0; padding-left: 1.3em; }

/* Turmleiste unten */
#leiste { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; gap: 2px; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.5); pointer-events: none; overflow-x: auto; scrollbar-width: none; }
#leiste::-webkit-scrollbar { display: none; }
#leiste button { position: relative; flex: 0 0 auto; pointer-events: auto; touch-action: pan-x; width: calc(var(--u) * 5.6); min-width: 50px; padding: calc(var(--u) * 0.35) 0 calc(var(--u) * 0.3); background: rgb(8 8 11 / 0.74); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.1); transition: background 0.12s, transform 0.12s; }
#leiste button svg { width: calc(var(--u) * 2.7); min-width: 24px; height: auto; aspect-ratio: 1; display: block; }
#leiste button .n { font-size: calc(var(--u) * 0.72); letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; max-width: 100%; }
#leiste button .k { font-size: calc(var(--u) * 0.95); font-weight: 700; color: #ffb14a; font-variant-numeric: tabular-nums; }
#leiste button .t { position: absolute; left: 4px; top: 2px; font-size: calc(var(--u) * 0.68); opacity: 0.4; }
body.touch #leiste button .t { display: none; }
#leiste button.arm svg, #leiste button.arm .n { opacity: 0.35; }
#leiste button.arm .k { color: #ff5a4a; }
#leiste button.gesperrt { opacity: 0.35; }
#leiste button.an { background: #fff; color: #08080b; transform: translateY(-5px); }
#leiste button.an .k { color: #b35f00; }
#leiste.bauen button:not(.gesperrt):not(.arm) { background: rgb(38 56 72 / 0.95); }
#leiste button:hover { background: rgb(40 40 48 / 0.9); }
#leiste button.an:hover { background: #fff; }
#leiste button.schiff { background: rgb(20 54 92 / 0.92); }
#leiste button.schiff .k { color: #8fd8ff; }

/* links oben: naechste Welle, neue Gegner, Regeln */
#links { position: absolute; left: calc(var(--u) * 1.2 + env(safe-area-inset-left)); top: calc(var(--u) * 4.6 + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.6); width: min(calc(100vw - var(--u) * 11), calc(var(--u) * 27)); }
#wellenInfo { box-sizing: border-box; max-width: 100%; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.7); background: rgb(8 8 11 / 0.66); display: flex; flex-direction: column; gap: calc(var(--u) * 0.15); font-size: calc(var(--u) * 0.9); line-height: 1.3; }
#wellenInfo > b { font-size: calc(var(--u) * 0.72); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
#wellenInfo i { display: inline-block; width: calc(var(--u) * 0.55); height: calc(var(--u) * 0.55); margin-right: calc(var(--u) * 0.45); background: var(--f, #fff); }
#links #neu { position: static; max-width: 100%; box-sizing: border-box; }
#links #regeln { position: static; transform: none; width: 100%; }
/* Bauen: Hinweiszeile und Karte des Turms ueber der Leiste */
#bauHinweis { position: absolute; left: 50%; bottom: calc(var(--u) * 6.5 + env(safe-area-inset-bottom)); transform: translateX(-50%); box-sizing: border-box; max-width: 94vw; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.9); background: rgb(8 8 11 / 0.78); font-size: calc(var(--u) * 1.0); line-height: 1.3; text-align: center; color: #9dffc8; }
#turmKarte { position: absolute; left: 50%; bottom: calc(var(--u) * 8.9 + env(safe-area-inset-bottom)); transform: translateX(-50%); box-sizing: border-box; width: min(94vw, calc(var(--u) * 30)); padding: calc(var(--u) * 0.65) calc(var(--u) * 0.95); background: rgb(8 8 11 / 0.88); outline: 1px solid rgb(255 255 255 / 0.2); display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 0.2) calc(var(--u) * 0.8); }
#turmKarte b { font-size: calc(var(--u) * 1.2); font-weight: 700; }
#turmKarte .preis { font-size: calc(var(--u) * 1.2); font-weight: 700; color: #ffb14a; }
#turmKarte .txt, #turmKarte .werte { grid-column: 1 / -1; font-size: calc(var(--u) * 0.95); line-height: 1.35; }
#turmKarte .werte { opacity: 0.72; font-size: calc(var(--u) * 0.85); }
#aktionen button > span { display: block; font-size: calc(var(--u) * 0.68); opacity: 0.72; letter-spacing: 0.04em; }

/* Platte: gewaehlter Turm */
#platte { position: absolute; left: 50%; bottom: calc(var(--u) * 0.5 + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(96vw, calc(var(--u) * 54)); box-sizing: border-box; pointer-events: auto; background: rgb(8 8 11 / 0.88); display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; padding: calc(var(--u) * 0.4); }
#platte .info { flex: 1 1 calc(var(--u) * 18); min-width: 0; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.6); display: flex; flex-direction: column; gap: calc(var(--u) * 0.2); }
#platte .info b { font-size: calc(var(--u) * 1.25); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
#platte .info span { font-size: calc(var(--u) * 0.9); opacity: 0.75; line-height: 1.3; }
#platte .info .pkt { color: #ffd93d; letter-spacing: 0.2em; opacity: 1; font-size: calc(var(--u) * 0.85); }
#platte button { flex: 1 1 calc(var(--u) * 9); min-height: calc(var(--u) * 3.6); padding: calc(var(--u) * 0.4) calc(var(--u) * 0.6); background: rgb(38 56 72 / 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.15); text-align: center; }
#platte button b { font-size: calc(var(--u) * 0.95); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#platte button span { font-size: calc(var(--u) * 0.78); opacity: 0.75; line-height: 1.2; }
#platte button em { font-style: normal; font-size: calc(var(--u) * 1.05); font-weight: 700; color: #ffb14a; }
#platte button.arm em { color: #ff5a4a; }
#platte button.arm { background: rgb(40 40 46 / 0.95); }
#platte button.weg2 { flex: 0 0 calc(var(--u) * 6.4); background: rgb(52 24 24 / 0.95); }
#platte button.zu { flex: 0 0 calc(var(--u) * 3.2); background: rgb(30 30 34 / 0.95); }

/* Aktionen rechts unten */
#aktionen { position: absolute; right: calc(var(--u) * 1.0 + env(safe-area-inset-right)); bottom: calc(var(--u) * 7.2 + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 0.45); }
#aktionen button { pointer-events: auto; position: relative; overflow: hidden; width: calc(var(--u) * 7.6); min-width: 76px; min-height: calc(var(--u) * 3.3); background: rgb(8 8 11 / 0.74); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#aktionen button b { position: relative; z-index: 1; }
#aktionen button span { position: relative; z-index: 1; font-size: calc(var(--u) * 0.72); opacity: 0.8; letter-spacing: 0.04em; }
#aktionen button i { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: rgb(102 217 255 / 0.32); }
#aktionen button.bereit { background: rgb(26 92 124 / 0.95); animation: bereit 1.4s ease-in-out infinite; }
@keyframes bereit { 0%, 100% { box-shadow: 0 0 0 0 rgb(102 217 255 / 0.6); } 50% { box-shadow: 0 0 calc(var(--u) * 0.9) 0 rgb(102 217 255 / 0.7); } }
#aktionen button.zielt { background: #ff9300; color: #08080b; }
#aktionen button.gross { min-height: calc(var(--u) * 4.1); background: #fff; color: #08080b; }
#aktionen button.gross.ruhig { background: rgb(8 8 11 / 0.74); color: #fff; }

#menueKnopf { position: absolute; right: calc(var(--u) * 1.2 + env(safe-area-inset-right)); top: calc(var(--u) * 0.9 + env(safe-area-inset-top)); pointer-events: auto; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.9); background: rgb(8 8 11 / 0.62); }
#ton { position: absolute; right: calc(var(--u) * 6.8 + env(safe-area-inset-right)); top: calc(var(--u) * 0.9 + env(safe-area-inset-top)); pointer-events: auto; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.7); opacity: 0.7; background: rgb(8 8 11 / 0.45); white-space: nowrap; }
#ton.aus { text-decoration: line-through; }
#ton.versteckt, #menueKnopf.versteckt { display: none; }

/* Levelwahl: Namen unter den Dioramen */
#welten { position: absolute; inset: 0; }
#welten .kachel { position: absolute; box-sizing: border-box; pointer-events: auto; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.55); border: 1px solid rgb(255 255 255 / 0.13); background: transparent; color: #fff; transition: background 0.12s, border-color 0.12s; }
#welten .kachel:hover, #welten .kachel.an, #welten .kachel:focus-visible { border-color: #ffd93d; background: rgb(255 217 61 / 0.07); outline: none; }
#welten .kachel.laedt { opacity: 0.45; }
#welten .kachel .oben { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--u) * 0.85); }
#welten .kachel .grad { font-style: normal; color: #ff9300; letter-spacing: 0.08em; }
#welten .kachel .st { font-style: normal; color: #ffd93d; letter-spacing: 0.08em; }
#welten .kachel .name { text-align: center; font-size: calc(var(--u) * 0.86); line-height: 1.25; text-shadow: 0 0 10px #000; }
#welten .kachel .name em { display: block; font-style: normal; color: #ffd93d; letter-spacing: 0.14em; }
#welten .kachel .name b { font-weight: 600; }
#wahlKopf { position: absolute; left: 0; right: 0; top: calc(var(--u) * 0.8 + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.35); text-align: center; }
#wahlKopf h2 { margin: 0; font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: 0.08em; }
#wahlInfo { margin: 0; max-width: 92vw; min-height: 1.4em; font-size: calc(var(--u) * 1.0); opacity: 0.9; }
#wahlInfo b { color: #ffd93d; font-weight: 700; }
#wahlZurueck { position: absolute; left: calc(var(--u) * 1.2 + env(safe-area-inset-left)); top: 0; pointer-events: auto; padding: calc(var(--u) * 0.6) calc(var(--u) * 1); background: rgb(255 255 255 / 0.12); }
#wahlZurueck:hover, #wahlZurueck:focus-visible { background: #fff; color: #08080b; outline: none; }

/* Menue */
#menue { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgb(8 8 11 / 0.74); --u: max(10.5px, min(1.15vw, 1.9vh)); padding: 12px; box-sizing: border-box; overflow-y: auto; touch-action: pan-y; }
body.titelMenue #mitte { visibility: hidden; }
body.titelMenue #menue { background: rgb(8 8 11 / 0.93); }
#menue .seite { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 94vw; max-height: 94vh; overflow-y: auto; }
#menue h2 { margin: 0 0 0.5em; font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: 0.08em; }
#menue .seite > button { width: min(80vw, 22em); padding: 0.9em 1em; background: rgb(255 255 255 / 0.1); }
#menue .seite > button:hover, #menue .seite > button:focus-visible { background: #fff; color: #08080b; outline: none; }
#menue .zeile { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
#menue .zeile > span { opacity: 0.6; font-size: calc(var(--u) * 0.8); }
.reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.reihe button { padding: 0.5em 0.8em; opacity: 0.6; }
.reihe button:hover { opacity: 1; }
.reihe button.an { opacity: 1; outline: 1px solid #fff; }
#menueRegeln { max-width: 60em; font-size: var(--u); line-height: 1.5; text-align: left; opacity: 0.9; }
#menueRegeln ol { margin: 0 0 0.6em; padding-left: 1.3em; }
#menueTasten { opacity: 0.7; font-size: calc(var(--u) * 0.82); line-height: 1.65; text-align: center; max-width: 66em; text-transform: none; letter-spacing: 0.04em; font-weight: 500; white-space: pre-line; }
#ueber { color: #fff; opacity: 0.75; font-size: calc(var(--u) * 0.85); }
#quellen { opacity: 0.45; font-size: calc(var(--u) * 0.68); text-transform: none; letter-spacing: 0.02em; font-weight: 400; max-width: 60em; text-align: center; line-height: 1.5; }

#lade { position: fixed; inset: 0; z-index: 30; background: #08080b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
#lade.weg { display: none; }
#lade h1 { margin: 0; font-size: clamp(28px, 5vw, 56px); font-weight: 700; letter-spacing: -0.035em; text-align: center; }
#lade p { margin: 0; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }

@media (max-width: 720px) {
	#stand { gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.35) calc(var(--u) * 0.6); }
	#stand b { font-size: calc(var(--u) * 1.4); }
	#leiste { justify-content: flex-start; }
	#karte { width: calc(var(--u) * 7); }
	#ton { display: none; }
	#aktionen { bottom: calc(var(--u) * 7 + env(safe-area-inset-bottom)); }
	#kopf { display: none; }
	#links #regeln { font-size: max(12px, calc(var(--u) * 1.05)); }
	#aktionen button:not(.gross) > span { display: none; }
	#bauHinweis { left: calc(var(--u) * 0.6 + env(safe-area-inset-left)); transform: none; max-width: calc(100vw - var(--u) * 10); bottom: calc(var(--u) * 6.8 + env(safe-area-inset-bottom)); text-align: left; }
	#turmKarte { left: calc(var(--u) * 0.6 + env(safe-area-inset-left)); transform: none; width: calc(100vw - var(--u) * 10); bottom: calc(var(--u) * 12 + env(safe-area-inset-bottom)); }
	#welten .kachel .oben { font-size: calc(var(--u) * 0.72); }
}
@media (max-height: 500px) {
	#karte { width: calc(var(--u) * 6); }
	#links { top: calc(var(--u) * 4.2 + env(safe-area-inset-top)); }
	#aktionen button:not(.gross) > span { display: none; }
	#titelKnoepfe { flex-direction: row; flex-wrap: wrap; justify-content: center; }
	#titelKnoepfe button { width: auto; }
	#titel { font-size: calc(var(--u) * 3.2); }
}

/* 0.4.0 Oberflaeche: ruhige Flaechen mit Haarlinie, ein Akzent (Gold), jede Turmart hat ihre Kennfarbe (--a) */
:root { --gold: #ffc24a; --flaeche: rgb(14 16 21 / 0.86); --flaeche2: rgb(30 33 41 / 0.92); --linie: rgb(255 255 255 / 0.14); --schatten: 0 8px 26px rgb(0 0 0 / 0.38); }
#stand { background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); gap: calc(var(--u) * 1.15); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.95); }
#stand .wert svg { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); flex: none; }
#stand .kraft svg { color: #ff9f2e; }
#stand .kern svg { color: var(--gold); }
#kernBalken { display: block; width: calc(var(--u) * 3.6); height: max(3px, calc(var(--u) * 0.24)); margin-left: calc(var(--u) * 0.1); background: rgb(255 255 255 / 0.16); }
#kernBalken i { display: block; height: 100%; width: 100%; background: var(--gold); transition: width 0.25s; }
#kernBalken i.wenig { background: #ff4b3a; }
#kopf { opacity: 0.85; text-shadow: 0 1px 8px #000; }
#karte { outline: 1px solid var(--linie); box-shadow: var(--schatten); }
#ton, #menueKnopf { background: var(--flaeche); border: 1px solid var(--linie); }
#ton:hover, #menueKnopf:hover { background: #fff; color: #08080b; }
#leiste { gap: 3px; padding-bottom: calc(var(--u) * 0.55); }
#leiste button { width: calc(var(--u) * 5.9); background: var(--flaeche); color: #cfd5dd; border-top: 2px solid var(--a, #fff); box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); }
#leiste button .n { color: #fff; }
#leiste button:hover { background: var(--flaeche2); transform: translateY(-4px); }
#leiste button.an, #leiste button.an:hover { background: #fff; color: #39404a; transform: translateY(-7px); box-shadow: 0 0 0 2px var(--a, #fff), 0 10px 22px rgb(0 0 0 / 0.42); }
#leiste button.an .n { color: #08080b; }
#leiste button.arm svg, #leiste button.arm .n { opacity: 0.42; }
#leiste button.schiff { background: var(--flaeche); margin-left: calc(var(--u) * 0.5); }
#leiste button.schiff .k { color: var(--gold); }
#leiste.bauen button:not(.gesperrt):not(.arm) { background: var(--flaeche); }
#aktionen button { background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); transition: background 0.12s, border-color 0.12s; }
#aktionen button:hover { background: var(--flaeche2); border-color: rgb(255 255 255 / 0.32); }
#aktionen button.gross, #aktionen button.gross:hover { background: #fff; color: #08080b; border-color: #fff; }
#aktionen button.gross.ruhig, #aktionen button.gross.ruhig:hover { background: var(--flaeche); color: #fff; border-color: var(--linie); }
#aktionen button i { background: rgb(255 194 74 / 0.28); }
#aktionen button.bereit, #aktionen button.bereit:hover { background: rgb(56 42 16 / 0.96); border-color: var(--gold); color: #ffe6b4; animation: bereitGold 1.6s ease-in-out infinite; }
@keyframes bereitGold { 0%, 100% { box-shadow: 0 0 0 rgb(255 194 74 / 0); } 50% { box-shadow: 0 0 calc(var(--u) * 1) rgb(255 194 74 / 0.45); } }
#platte { background: var(--flaeche); border: 1px solid var(--linie); border-top: 2px solid var(--a, #fff); box-shadow: var(--schatten); }
#platte button { background: var(--flaeche2); border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; }
#platte button:hover { border-color: var(--a, #fff); background: rgb(44 48 58 / 0.95); }
#platte button.arm, #platte button.arm:hover { background: rgb(30 30 34 / 0.95); border-color: transparent; }
#platte button.weg2 { background: rgb(58 26 24 / 0.95); }
#platte button.weg2:hover { background: rgb(92 34 28 / 0.95); border-color: transparent; }
#platte button.zu { background: transparent; }
#bauHinweis { background: var(--flaeche); border-left: 2px solid var(--gold); color: #fff; box-shadow: var(--schatten); }
#turmKarte { background: var(--flaeche); border: 1px solid var(--linie); border-top: 2px solid var(--a, var(--gold)); outline: none; box-shadow: var(--schatten); }
#turmKarte.arm .preis { color: #ff6a5a; }
#turmKarte .werte { opacity: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 0.22); margin-top: calc(var(--u) * 0.2); }
#turmKarte .werte:empty { display: none; }
#turmKarte .z { display: grid; grid-template-columns: calc(var(--u) * 6.4) 1fr calc(var(--u) * 3.2); align-items: center; gap: calc(var(--u) * 0.5); }
#turmKarte .z.t { display: block; opacity: 0.8; }
#turmKarte .z em { font-style: normal; opacity: 0.7; }
#turmKarte .z u { display: block; text-decoration: none; height: max(3px, calc(var(--u) * 0.24)); background: rgb(255 255 255 / 0.14); }
#turmKarte .z u i { display: block; height: 100%; background: var(--a, var(--gold)); }
#turmKarte .z b { font-size: calc(var(--u) * 0.85); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
#turmKarte .ziele { display: flex; gap: calc(var(--u) * 0.3); margin-top: calc(var(--u) * 0.1); }
#turmKarte .ziele span { padding: calc(var(--u) * 0.08) calc(var(--u) * 0.45); font-size: calc(var(--u) * 0.76); border: 1px solid rgb(255 255 255 / 0.12); opacity: 0.38; }
#turmKarte .ziele span.an { opacity: 1; border-color: var(--a, var(--gold)); }
#wellenInfo, #links #neu, #links #regeln { background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
/* Bau-Ring */
#bauRing { position: absolute; inset: 0; pointer-events: none; }
#bauRing button { position: absolute; transform: translate(-50%, -50%); width: max(52px, calc(var(--u) * 3.9)); height: max(52px, calc(var(--u) * 3.9)); box-sizing: border-box; pointer-events: auto; touch-action: manipulation; background: var(--flaeche); color: #cfd5dd; border: 1px solid var(--linie); border-top: 2px solid var(--a); box-shadow: var(--schatten); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; animation: ringAuf 0.14s ease-out; transition: background 0.1s, border-color 0.1s; }
#bauRing button svg { width: 58%; height: auto; aspect-ratio: 1; display: block; }
#bauRing button .k { font-size: max(11px, calc(var(--u) * 0.82)); font-weight: 700; color: #ffb14a; font-variant-numeric: tabular-nums; }
#bauRing button.an, #bauRing button:hover { background: #fff; color: #39404a; border-color: var(--a); box-shadow: 0 0 0 2px var(--a), var(--schatten); }
#bauRing button.an .k, #bauRing button:hover .k { color: #a75800; }
#bauRing button.arm svg { opacity: 0.4; }
#bauRing button.arm .k { color: #ff6a5a; }
@keyframes ringAuf { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* Titel, Levelwahl, Menue */
#unter { color: #ffe0a6; }
#titelKnoepfe button { background: var(--flaeche); outline: none; border: 1px solid var(--linie); box-shadow: var(--schatten); }
#titelKnoepfe button.gross { border-color: #fff; }
#titelKnoepfe button:hover, #titelKnoepfe button:focus-visible { background: var(--gold); border-color: var(--gold); color: #08080b; }
#knoepfeEnde button.neben { background: var(--flaeche); outline: 1px solid var(--linie); }
#knoepfeEnde button:hover { background: var(--gold); color: #08080b; }
#welten .kachel { background: rgb(255 255 255 / 0.018); border-color: rgb(255 255 255 / 0.1); }
#welten .kachel:hover, #welten .kachel.an, #welten .kachel:focus-visible { border-color: var(--gold); background: rgb(255 194 74 / 0.07); box-shadow: inset 0 0 calc(var(--u) * 3) rgb(255 194 74 / 0.08); }
#welten .kachel .grad { color: var(--gold); letter-spacing: 0.02em; }
#welten .kachel .st { color: var(--gold); }
#wahlInfo b { color: var(--gold); }
#wahlZurueck { background: var(--flaeche); border: 1px solid var(--linie); }
#menue { background: rgb(7 8 11 / 0.8); }
#menue .seite { box-sizing: border-box; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); }
#menue .seite > button { background: rgb(255 255 255 / 0.06); border: 1px solid transparent; transition: background 0.1s; }
#menue .seite > button:first-of-type { border-color: var(--linie); }
#menue .seite > button:hover, #menue .seite > button:focus-visible { background: var(--gold); color: #08080b; }
.reihe button.an { outline-color: var(--gold); }
body.touch #stand, body.touch #leiste button { box-shadow: none; }
@media (max-width: 720px) {
	#kernBalken { display: none; }
	#leiste button { width: 62px; }
	#turmKarte .z { grid-template-columns: 74px 1fr 34px; }
	#menue .seite { padding: 14px; width: 94vw; }
}
#turmKarte.amRing { transform: none; bottom: auto; width: calc(var(--u) * 26); }

/* 0.5.0 Spiel-Optik: Stahlplatten mit abgeschraegten Ecken, die echten Modelle statt Symbolen */
:root { --platte: linear-gradient(180deg, rgb(46 51 60 / 0.96), rgb(20 23 28 / 0.97) 58%, rgb(12 14 18 / 0.98)); --kante: linear-gradient(180deg, rgb(158 166 178 / 0.8), rgb(50 55 64 / 0.8)); --gold1: linear-gradient(180deg, #ffdc92, #e7a53a); --gold2: linear-gradient(180deg, #fff3cf, #a96d18); }
#stand, #wellenInfo, #links #neu, #links #regeln, #turmKarte, #platte, #bauHinweis, #ton, #menueKnopf, #wahlZurueck, #titelKnoepfe button, #knoepfeEnde button, #aktionen button, #leiste button, #menue .seite, #menue .seite > button, .reihe button {
	--fase: calc(var(--u) * 0.72);
	clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase));
	border: 1px solid transparent; outline: none; box-shadow: none;
	background: var(--platte) padding-box, var(--kante) border-box;
}
#ton:hover, #menueKnopf:hover, #wahlZurueck:hover, #aktionen button:hover, #platte button:hover, #menue .seite > button:hover, #menue .seite > button:focus-visible, #titelKnoepfe button:hover, #titelKnoepfe button:focus-visible, #knoepfeEnde button:hover { --kante: linear-gradient(var(--gold), var(--gold)); background: var(--platte) padding-box, var(--kante) border-box; color: var(--gold); }
#titelKnoepfe button.gross, #knoepfeEnde button:not(.neben), #aktionen button.gross { --platte: var(--gold1); --kante: var(--gold2); color: #1c1204; }
#titelKnoepfe button.gross:hover, #knoepfeEnde button:not(.neben):hover, #aktionen button.gross:hover { --platte: linear-gradient(180deg, #ffe9b8, #f3ba58); --kante: var(--gold2); color: #1c1204; }
#aktionen button.gross.ruhig, #aktionen button.gross.ruhig:hover { --platte: linear-gradient(180deg, rgb(46 51 60 / 0.96), rgb(12 14 18 / 0.98)); --kante: linear-gradient(180deg, rgb(158 166 178 / 0.8), rgb(50 55 64 / 0.8)); color: #fff; }
#aktionen button.bereit, #aktionen button.bereit:hover { --kante: linear-gradient(var(--gold), var(--gold)); color: var(--gold); animation: none; background: var(--platte) padding-box, var(--kante) border-box; }
.reihe button { opacity: 0.7; }
.reihe button.an { opacity: 1; --kante: linear-gradient(var(--gold), var(--gold)); color: var(--gold); }
#stand .wert img { width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); margin: calc(var(--u) * -0.3) calc(var(--u) * -0.1); display: block; }
/* Leiste */
#leiste { gap: 2px; align-items: flex-end; padding-bottom: calc(var(--u) * 0.4); }
#leiste button { width: calc(var(--u) * 6.7); min-width: 66px; padding: calc(var(--u) * 0.15) 0 calc(var(--u) * 0.3); gap: 0; color: #fff; transform: none; transition: transform 0.1s; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--a, #fff) 20%, transparent), transparent 60%) padding-box, var(--platte) padding-box, var(--kante) border-box; box-shadow: inset 0 -2px 0 var(--a, #fff); }
#leiste button img { width: calc(var(--u) * 4.5); min-width: 44px; height: auto; aspect-ratio: 1; display: block; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.65)); transition: transform 0.1s; }
#leiste button .n { font-size: calc(var(--u) * 0.68); color: #dfe3e8; }
#leiste button .k { color: #ffc24a; }
#leiste button:hover { transform: translateY(-3px); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--a, #fff) 38%, transparent), transparent 66%) padding-box, var(--platte) padding-box, var(--kante) border-box; }
#leiste button:hover img { transform: scale(1.06); }
#leiste button.an, #leiste button.an:hover { --kante: linear-gradient(var(--gold), var(--gold)); transform: translateY(-6px); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--a, #fff) 46%, transparent), transparent 70%) padding-box, var(--platte) padding-box, var(--kante) border-box; color: #fff; }
#leiste button.an .n { color: #fff; }
#leiste button.an .k { color: #ffc24a; }
#leiste button.arm img { filter: grayscale(0.9) brightness(0.55); opacity: 1; }
#leiste button.arm .n { opacity: 0.6; }
#leiste button.arm .k { color: #ff6a5a; }
#leiste button.gesperrt { opacity: 0.45; }
#leiste button.schiff { margin-left: calc(var(--u) * 0.4); background: var(--platte) padding-box, var(--kante) border-box; }
#leiste button.schiff.an { --kante: linear-gradient(var(--gold), var(--gold)); }
#leiste.bauen button:not(.gesperrt):not(.arm) { background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--a, #fff) 20%, transparent), transparent 60%) padding-box, var(--platte) padding-box, var(--kante) border-box; }
#bauHinweis { bottom: calc(var(--u) * 8.4 + env(safe-area-inset-bottom)); color: #ffe6b4; }
/* Karte des Turms mit Modell */
#turmKarte { grid-template-columns: calc(var(--u) * 6) 1fr auto; bottom: calc(var(--u) * 11 + env(safe-area-inset-bottom)); }
#turmKarte .bild { grid-row: 1 / span 3; width: calc(var(--u) * 5.6); height: auto; aspect-ratio: 1; align-self: center; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.7)); }
#turmKarte.ohneBild { grid-template-columns: 1fr auto; }
#turmKarte.ohneBild .bild { display: none; }
#turmKarte .txt, #turmKarte .werte { grid-column: auto / span 2; }
#turmKarte.ohneBild .txt, #turmKarte.ohneBild .werte { grid-column: 1 / -1; }
#turmKarte.amRing { width: calc(var(--u) * 31); }
/* Platte */
#platte .bild { flex: 0 0 auto; width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); align-self: center; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.7)); }
#platte button { --fase: calc(var(--u) * 0.5); clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase)); background: linear-gradient(180deg, rgb(58 64 74 / 0.95), rgb(30 34 40 / 0.96)); }
#platte button.weg2 { background: linear-gradient(180deg, rgb(86 38 32 / 0.96), rgb(48 22 20 / 0.96)); }
#platte button.zu { background: transparent; clip-path: none; }
/* Bau-Ring: Sechsecke */
#bauRing button { width: max(72px, calc(var(--u) * 5.6)); height: calc(max(72px, calc(var(--u) * 5.6)) * 0.92); padding: 0; border: 0; background: var(--a); box-shadow: none; isolation: isolate; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); justify-content: center; gap: 0; }
#bauRing button::before { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--a) 22%, transparent), transparent 62%), var(--platte); }
#bauRing button img { width: 64%; height: auto; aspect-ratio: 1; display: block; pointer-events: none; margin-top: -4%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.7)); }
#bauRing button .k { margin-top: -5%; font-size: max(11px, calc(var(--u) * 0.86)); color: #ffc24a; text-shadow: 0 1px 2px #000; }
#bauRing button:hover, #bauRing button.an { background: var(--gold); color: inherit; box-shadow: none; }
#bauRing button:hover::before, #bauRing button.an::before { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--a) 44%, transparent), transparent 70%), var(--platte); }
#bauRing button:hover .k, #bauRing button.an .k { color: #ffe6b4; }
#bauRing button.arm { background: #5a4040; }
#bauRing button.arm img { filter: grayscale(0.9) brightness(0.55); opacity: 1; }
#bauRing button.arm .k { color: #ff6a5a; }
@media (max-width: 720px) {
	#leiste button { width: 68px; }
	#turmKarte { left: calc(var(--u) * 0.6 + env(safe-area-inset-left)); transform: none; width: calc(100vw - var(--u) * 10); bottom: calc(var(--u) * 14 + env(safe-area-inset-bottom)); grid-template-columns: 58px 1fr auto; }
	#turmKarte .bild { width: 54px; }
	#bauHinweis { bottom: calc(var(--u) * 8.6 + env(safe-area-inset-bottom)); }
	#platte .bild { display: none; }
}
#titelKnoepfe button.gross, #knoepfeEnde button:not(.neben), #aktionen button.gross { background: var(--platte) padding-box, var(--kante) border-box; }
#titelKnoepfe button.gross:hover, #knoepfeEnde button:not(.neben):hover, #aktionen button.gross:hover { background: var(--platte) padding-box, var(--kante) border-box; }
#aktionen button.gross.ruhig, #aktionen button.gross.ruhig:hover { background: var(--platte) padding-box, var(--kante) border-box; }
@media (max-width: 720px) {
	#aktionen { bottom: calc(var(--u) * 9.2 + env(safe-area-inset-bottom)); }
}