/* MINIMAL VOLUME - Seite im Aufbau von MINIMAL RUN: schwarz/weiss, Versalien, scharfe Kanten, Geisterknoepfe.
   Spielfeld oben, Controller darunter (Hochformat) bzw. daneben (Querformat am Handy), Menue unten links, Ton unten rechts,
   Logo oben rechts. Typografie wie die Webseiten (Labels 600 Versalien 0,14em, Titel 700 eng). */
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; }
.weg { display: none !important; }
.text { letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }

#feld { position: fixed; inset: 0; display: flex; flex-direction: column; --pad-voll: 36; --pad-anteil: 1;
        --u: max(10px, min(1.5vw, 2.4vh));
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#buehne { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; --u: max(10px, min(1.5vw, 2.4vh)); }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
/* Controller (MINIMAL RUN): Groesse = voller Anteil mal Ausschub */
#pad { display: none; flex: 0 0 auto; width: 100%; height: calc(var(--pad-voll) * 1% * var(--pad-anteil)); touch-action: none;
       transition: height 0.25s ease, width 0.25s ease; }
#feld.zieht #pad { transition: none; }
body.mit-pad #pad { display: block; }
#griff { flex: 0 0 auto; height: 22px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
#griff i { width: 56px; height: 4px; border-radius: 2px; background: #fff; opacity: 0.35; }
#griff:hover i, #feld.zieht #griff i { opacity: 0.7; }
@media (orientation: landscape) and (max-height: 600px) {
	#feld { flex-direction: row; --pad-voll: 40; }
	#pad { width: calc(var(--pad-voll) * 1% * var(--pad-anteil)); height: 100%; }
	#griff { height: auto; width: 22px; }
	#griff i { width: 4px; height: 56px; }
}
@media (min-height: 900px) and (min-width: 900px) { #feld { --pad-voll: 30; } }

/* Tastenfeld (Wahl): statt des Controllers zwei Flaechen unter bzw. neben dem Spielfeld */
.touch { display: none; }
body.mit-touch #griff, body.mit-touch #pad { display: none !important; }
body.mit-touch #feld { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: "b b" "l r"; }
body.mit-touch #buehne { grid-area: b; }
body.mit-touch .touch { display: flex; touch-action: none; }
#touchL { grid-area: l; } #touchR { grid-area: r; }
@media (orientation: landscape) {
	body.mit-touch #feld { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; grid-template-areas: "l b r"; }
}

/* --- immer da: Logo, Herkunft (werbung.js) ------------------------------------------------------------------------ */
#anzeige { position: absolute; inset: 0; pointer-events: none; }
#herkunft { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 4.2); }

/* --- Anzeige im Spiel ---------------------------------------------------------------------------------------------- */
#hud { position: absolute; inset: 0; pointer-events: none; font-size: var(--u); }
#links { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 1.2); display: flex; flex-wrap: wrap;
         gap: calc(var(--u) * 0.4) calc(var(--u) * 1.6); align-items: baseline; max-width: 60%; }
#links .w { display: inline-flex; gap: calc(var(--u) * 0.5); align-items: baseline; }
#links em { font-style: normal; opacity: 0.6; }
#links b { font-weight: 700; letter-spacing: 0.04em; font-size: calc(var(--u) * 1.25); font-variant-numeric: tabular-nums; }
#links .klein b { font-size: var(--u); opacity: 0.7; }
#typ { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 3.3); opacity: 0.55; font-size: calc(var(--u) * 0.85); }
#hud.warnung #links b { color: #ffd0cc; }
#seite { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.2); display: flex; flex-direction: column;
         gap: calc(var(--u) * 0.8); align-items: flex-end; }
.kasten { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.3); position: relative;
          border: 2px solid rgba(255, 255, 255, 0.22); background: rgba(8, 8, 11, 0.55); padding: calc(var(--u) * 0.5); }
.kasten em { font-style: normal; font-size: calc(var(--u) * 0.78); letter-spacing: 0.16em; font-weight: 600;
             text-transform: uppercase; opacity: 0.6; align-self: flex-start; }
#reserve, #n1 { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
#n2, #n3 { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); opacity: 0.75; }
.seitenpfeil { align-self: flex-end; display: inline-block; font-size: calc(var(--u) * 1.1); font-weight: 700; line-height: 1;
               margin-bottom: calc(var(--u) * -1.3); z-index: 1; transition: transform 0.35s; }
.seitenpfeil:empty { display: none; }
#hilfe { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 1.15); text-align: center;
         font-size: calc(var(--u) * 0.72); opacity: 0.45; width: max-content; max-width: 56%; line-height: 1.6; }
#ansicht { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 4.9); font-size: calc(var(--u) * 0.72); opacity: 0.45; }
#einfuehrung { position: absolute; left: 50%; top: calc(var(--u) * 5.6); transform: translateX(-50%); width: min(92%, 52em);
               display: flex; gap: calc(var(--u) * 1); align-items: center; justify-content: center; pointer-events: auto;
               background: rgba(8, 8, 11, 0.82); border: 2px solid #fff; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2); }
#schritt { font-size: calc(var(--u) * 0.95); line-height: 1.5; text-transform: none; letter-spacing: 0.03em; flex: 1; }
/* Tasten am Stein: kleine Schilder an den echten Richtungen und Achsen */
#marken { position: absolute; inset: 0; transition: opacity 0.35s; }
#marken.aus { opacity: 0; }
.marke-t { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; min-width: 14px; text-align: center;
           background: rgba(8, 8, 11, 0.78); border: 1px solid rgba(255, 255, 255, 0.7); color: #fff;
           font-size: max(10px, calc(var(--u) * 0.78)); font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.marke-t.achse { border-color: rgba(255, 255, 255, 0.45); font-weight: 600; opacity: 0.9; }
.marke-t.blitz { background: #fff; color: #08080b; border-color: #fff; opacity: 1; }
.marke-t:empty { display: none; }

/* unten: Menue links, Kamera daneben, Ton rechts (MINIMAL RUN) */
#menueKnopf, #ton { position: absolute; bottom: calc(var(--u) * 0.6); pointer-events: auto; background: none; border: 0; color: #fff;
                    opacity: 0.5; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.0); font-family: inherit; font-size: var(--u);
                    cursor: pointer; touch-action: manipulation; min-height: 44px; min-width: 88px; }
#menueKnopf { left: calc(var(--u) * 0.6); text-align: left; }
#ton { right: calc(var(--u) * 0.6); text-align: right; }
#ton.aus { opacity: 0.8; text-decoration: line-through; }
#menueKnopf:hover, #ton:hover { opacity: 0.95; }
#knoepfe { position: absolute; right: calc(var(--u) * 7.8 + 24px); bottom: calc(var(--u) * 0.9); display: flex; gap: 4px; pointer-events: auto; }
.knopf { width: 36px; height: 36px; padding: 0; background: rgba(8, 8, 11, 0.45); border: 1px solid rgba(255, 255, 255, 0.3);
         color: #fff; cursor: pointer; touch-action: manipulation; }
.knopf svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: square; }
.knopf:hover, .knopf.an { border-color: #fff; background: rgba(255, 255, 255, 0.14); }
body.menue #knoepfe { display: none; }

/* schmal (Hochformat): Werte in einer Reihe oben, Vorschau darunter rechts, Hilfe aus */
#hud.schmal #links { gap: calc(var(--u) * 0.3) calc(var(--u) * 1.0); max-width: 70%; }
#hud.schmal #bestFeld { display: none; }
#hud.schmal #seite { flex-direction: row; top: calc(var(--u) * 3.6); gap: calc(var(--u) * 0.4); }
#hud.schmal .kasten { flex-direction: row; padding: calc(var(--u) * 0.3); }
#hud.schmal .kasten em { display: none; }
#hud.schmal .seitenpfeil { align-self: center; margin: 0 calc(var(--u) * -0.2) 0 calc(var(--u) * 0.2); }
#hud.schmal #reserve, #hud.schmal #n1 { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
#hud.schmal #n2, #hud.schmal #n3 { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
#hud.schmal #hilfe { display: none; }
#hud.schmal #typ { top: calc(var(--u) * 3.0); }
#hud.schmal #ansicht { display: none; }
#hud.eng #n3 { display: none; }
body.schmal #knoepfe { right: auto; left: calc(var(--u) * 0.6 + 88px); }

/* --- Meldungen ---------------------------------------------------------------------------------------------------- */
#meldungen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.meldung { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: calc(var(--u) * 1.3);
           text-shadow: 0 0 12px rgba(0, 0, 0, 0.9); animation: auf 1.3s ease-out forwards; }
.meldung.gross { font-size: calc(var(--u) * 2.1); }
.meldung.klein { font-size: calc(var(--u) * 0.95); }
.meldung.lang { animation-duration: 2.2s; }
@keyframes auf { 0% { opacity: 0; transform: translate(-50%, -30%); } 12% { opacity: 1; transform: translate(-50%, -50%); }
                 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -85%); } }
body.ruhig .meldung { animation-name: still; }
@keyframes still { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* --- Bildschirme -------------------------------------------------------------------------------------------------- */
#schirm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; overflow: auto;
          background: linear-gradient(90deg, rgba(8, 8, 11, 0.88) 0%, rgba(8, 8, 11, 0.6) 48%, rgba(8, 8, 11, 0.1) 100%);
          padding-left: max(0px, calc((100% - 1400px) / 2)); box-sizing: border-box; }
#schirm.dunkel { background: rgba(8, 8, 11, 0.74); justify-content: center; padding-left: 0; }
.tafel { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); width: min(92%, 36em); max-height: 94%;
         padding: calc(var(--u) * 1.6); box-sizing: border-box; font-size: var(--u); }
.tafel h1.titel { margin: 0; font-size: min(calc(var(--u) * 4.2), 12vw); letter-spacing: -0.035em; line-height: 1;
                  text-transform: uppercase; font-weight: 700; }
.tafel h2.kopf { margin: 0 0 calc(var(--u) * 0.3); font-size: calc(var(--u) * 2.0); letter-spacing: -0.02em; font-weight: 700;
                 text-transform: uppercase; line-height: 1.15; }
.tafel .unter { margin: 0 0 calc(var(--u) * 0.5); color: rgb(255 255 255 / 0.66); text-transform: none; letter-spacing: 0.01em;
                line-height: 1.45; font-weight: 400; font-size: calc(var(--u) * 1.05); }
.tafel .klein { font-size: calc(var(--u) * 0.8); }
.tafel .fuss { opacity: 0.4; font-size: calc(var(--u) * 0.75); margin: calc(var(--u) * 0.6) 0 0; }
.tafel .zahl { font-size: calc(var(--u) * 4); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.geist { background: none; border: 2px solid rgba(255, 255, 255, 0.4); color: #fff; padding: calc(var(--u) * 0.75) calc(var(--u) * 1.1);
         font: inherit; font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; text-align: left;
         cursor: pointer; min-height: 44px; touch-action: manipulation; }
.geist.gross { font-size: calc(var(--u) * 1.15); border-color: #fff; }
.geist:hover, .geist:focus-visible, .geist:focus { border-color: #fff; background: rgba(255, 255, 255, 0.12); outline: none; }
.geist.an { background: #fff; color: #08080b; border-color: #fff; }
.geist.zurueck { opacity: 0.75; margin-top: calc(var(--u) * 0.4); }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.5); }
/* Levelwahl: Kacheln mit Formbild */
.level { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 0.5); }
.level .geist { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 0.3); padding: calc(var(--u) * 0.5);
                text-align: center; }
.level canvas { width: 100%; height: calc(var(--u) * 4.2); display: block; }
.level .name { font-size: calc(var(--u) * 0.78); letter-spacing: 0.1em; white-space: nowrap; }
.level .best { font-size: calc(var(--u) * 0.7); opacity: 0.55; letter-spacing: 0.06em; }
.level .erweitert { border-style: dashed; }
.tafel.breit { width: min(96%, 72em); }
@media (min-width: 900px) { .level { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 640px) { .level { grid-template-columns: repeat(3, 1fr); } }
.wahl { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); flex-wrap: wrap; }
.wahl > span { opacity: 0.75; }
.wahl .gruppe { display: flex; gap: calc(var(--u) * 0.3); flex-wrap: wrap; }
.wahl .gruppe .geist { padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); text-align: center; }
.wahl input[type=range] { width: 12em; accent-color: #fff; }
.tabelle { border-collapse: collapse; font-size: calc(var(--u) * 0.82); }
.tabelle th { text-align: left; opacity: 0.5; font-weight: 600; padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.4) 0; }
.tabelle td { padding: calc(var(--u) * 0.32) calc(var(--u) * 0.6) calc(var(--u) * 0.32) 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
              text-transform: none; letter-spacing: 0.04em; }
.tabelle td.taste { font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.liste { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * 0.4); counter-reset: platz; }
.liste li { display: grid; grid-template-columns: 2em 1fr auto; gap: calc(var(--u) * 0.8); align-items: baseline; counter-increment: platz; }
.liste li::before { content: counter(platz); opacity: 0.5; }
.liste li .klein { grid-column: 2 / 4; opacity: 0.5; margin-top: -0.3em; }
.liste li.leer { grid-template-columns: 1fr; opacity: 0.5; }
.liste li.leer::before { content: none; }

#eintrag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column;
           gap: calc(var(--u) * 0.8); background: #08080b; border: 2px solid #fff; padding: calc(var(--u) * 1.6);
           font-size: var(--u); width: min(86%, 26em); box-sizing: border-box; z-index: 5; }
#eintrag input { font: inherit; font-size: calc(var(--u) * 1.4); background: none; border: 0; border-bottom: 2px solid #fff;
                 color: #fff; padding: calc(var(--u) * 0.4) 0; outline: none; -webkit-user-select: text; user-select: text; }
.reihe { display: flex; gap: calc(var(--u) * 0.5); }

/* --- Tastenfeld ---------------------------------------------------------------------------------------------------- */
.touch { flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px 14px;
         box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.kreuz { width: min(46vw, 31vh, 230px); aspect-ratio: 1; position: relative; touch-action: none; }
.kreuz svg { width: 100%; height: 100%; }
.kreuz .f { fill: rgba(255, 255, 255, 0.85); }
.kreuz .m { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.kreuz::before { content: ''; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 50%; }
.kreuz[data-r="0"] svg, .kreuz[data-r="1"] svg, .kreuz[data-r="2"] svg, .kreuz[data-r="3"] svg { filter: drop-shadow(0 0 6px #fff); }
.reihe2 { display: flex; gap: 10px; width: 100%; justify-content: center; }
.tk { background: rgba(255, 255, 255, 0.04); border: 2px solid rgba(255, 255, 255, 0.35); color: #fff; font: inherit;
      font-size: 12px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; touch-action: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center; padding: 0; }
.tk.an { background: rgba(255, 255, 255, 0.3); border-color: #fff; }
.tk.klein { min-width: 64px; height: 48px; padding: 0 12px; flex: 1; max-width: 120px; }
.dreh { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; }
.zeile { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; width: min(100%, 260px); }
.zeile .tname { font-size: 10px; letter-spacing: 0.16em; font-weight: 700; text-transform: uppercase; opacity: 0.6; text-align: center;
                width: 4.6em; }
.tk.dk { height: min(13vw, 8vh, 60px); }
.tk.dk svg { height: 82%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tk.dk svg .w { stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.tk.dk svg .a { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-dasharray: 3 3; }
.zeile.z0 .tk { border-color: rgba(0, 207, 255, 0.55); }
.zeile.z1 .tk { border-color: rgba(255, 147, 0, 0.55); }
.zeile.z2 .tk { border-color: rgba(178, 141, 255, 0.6); }
.tk.fallen { width: min(100%, 260px); height: min(15vw, 9vh, 64px); font-size: 15px; border-color: #fff; margin-top: 6px; }
@media (orientation: landscape) {
	.touch { border-top: 0; width: min(30vw, 260px); padding: 8px; }
	#touchL { border-right: 1px solid rgba(255, 255, 255, 0.12); }
	#touchR { border-left: 1px solid rgba(255, 255, 255, 0.12); }
	.kreuz { width: min(26vw, 52vh, 210px); }
	.tk.dk { height: min(11vh, 54px); }
	.tk.fallen { height: min(14vh, 58px); }
}

/* Aufnahmen: ohne Werbung und Herkunft bzw. ganz ohne Bedienelemente */
body.aufnahme1 #werbung, body.aufnahme1 #herkunft, body.aufnahme1 #griff { display: none !important; }
body.aufnahme2 #hud, body.aufnahme2 #menueKnopf, body.aufnahme2 #ton, body.aufnahme2 #knoepfe, body.aufnahme2 #marke,
body.aufnahme2 #meldungen, body.aufnahme2 #werbung, body.aufnahme2 #herkunft, body.aufnahme2 #griff { display: none !important; }

#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: #08080b; z-index: 10; }
#lade h1 { margin: 0; font-size: 34px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
#lade p { opacity: 0.55; letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
#lade.fehler p { opacity: 1; text-transform: none; letter-spacing: 0.04em; font-size: 15px; }

/* --- Startlauf (wie MINIMAL RUN): Vorfuehrung sichtbar, oben mittig Titel, Level, Hinweis, Bestwert -------------- */
#schirm.start { background: linear-gradient(180deg, rgba(8, 8, 11, 0.55) 0%, rgba(8, 8, 11, 0) 42%); align-items: flex-start;
                justify-content: center; padding-left: 0; pointer-events: none; }
#schirm.start .tafel { width: min(96%, 44em); align-items: center; text-align: center; pointer-events: none;
                       padding-top: calc(var(--u) * 1.2); }
#schirm.start button, #schirm.start a { pointer-events: auto; }
.startkopf { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4); }
.startkopf .titel { margin-bottom: calc(var(--u) * 0.2); }
.levelzeile { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); }
.levelname { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.2); min-width: 11em; }
.levelname em { font-style: normal; opacity: 0.55; font-size: calc(var(--u) * 0.78); }
.levelname b { font-size: calc(var(--u) * 1.35); letter-spacing: 0.08em; font-weight: 700; }
.levelzeile.klein .levelname b { font-size: calc(var(--u) * 1.15); }
.geist.pfeil { border: 0; font-size: calc(var(--u) * 2.2); line-height: 1; padding: 0 calc(var(--u) * 0.6); min-width: 44px; text-align: center;
               letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.geist.pfeil:hover, .geist.pfeil:focus-visible { opacity: 1; background: none; }
.startkopf .leveltext { margin: 0; font-size: calc(var(--u) * 0.9); }
.hinweis { margin: calc(var(--u) * 0.2) 0 0; }
.blinkt { animation: blinkt 2s ease-in-out infinite; }
@keyframes blinkt { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
body.ruhig .blinkt { animation: none; opacity: 0.8; }
.bestzeile { margin: 0; opacity: 0.6; font-size: calc(var(--u) * 0.85); }
.bestzeile:empty { display: none; }
.startknoepfe { display: flex; gap: 0 calc(var(--u) * 0.2); flex-wrap: wrap; justify-content: center; margin-top: calc(var(--u) * 0.1); }
/* wie die Textknoepfe von MINIMAL RUN: ohne Rahmen, leise, Spielen hell */
.startknoepfe .geist { border: 0; background: none; text-align: center; font-size: calc(var(--u) * 0.85); opacity: 0.6;
                       padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8); }
.startknoepfe .geist.vor { opacity: 1; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.startknoepfe .geist:hover, .startknoepfe .geist:focus-visible, .startknoepfe .geist:focus { opacity: 1; background: none; }
#schirm.start .fuss:empty { display: none; }
/* Menue (Knopf unten links): kurze Liste wie MINIMAL RUN */
.tafel.menueliste { width: min(92%, 24em); }
.tafel.menueliste .geist { text-align: center; }
.sprachen { display: flex; gap: calc(var(--u) * 0.4); justify-content: center; }
.sprachen .geist { min-width: 4em; text-align: center; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.6); }
.gruppenkopf { opacity: 0.6; font-size: calc(var(--u) * 0.8); margin-top: calc(var(--u) * 0.4); }
.level .geist.vor { border-color: #fff; }
/* Startlauf schmal (Hochformat, Controller darunter): Knoepfe kleiner, Text knapper */
body.schmal #schirm.start .leveltext { display: none; }
body.schmal .startknoepfe .geist:not(.gross) { font-size: calc(var(--u) * 0.75); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.6); }
/* Chinesisch, Japanisch (wie MINIMAL RUN): weniger Sperrung */
body.cjk .text, body.cjk .geist, body.cjk .marke-t, body.cjk .kasten em { letter-spacing: 0.04em; }
.sprachen { flex-wrap: wrap; }
/* Tafeln nie stauchen: passt eine nicht in die Buehne (Controller darunter), scrollt sie; mittig, solange sie passt */
#schirm:not(.start) { align-items: flex-start; }
.tafel { max-height: none; margin-block: auto; }
.tafel > * { flex-shrink: 0; }
#schirm.start .tafel { margin-block: 0; }
/* Menue und Pause zweispaltig (kurz wie bei MINIMAL RUN), Titel, Hauptknopf, Sprachen und Zurueck ueber die volle Breite */
.tafel.menueliste { display: grid; grid-template-columns: 1fr 1fr; width: min(92%, 34em); align-content: start; }
.tafel.menueliste > h2, .tafel.menueliste > .vor, .tafel.menueliste > .sprachen, .tafel.menueliste > .zurueck { grid-column: 1 / -1; }
.sprachen .geist { min-width: 0; flex: 1 1 0; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.3); letter-spacing: 0.06em; }

/* --- Tastenleiste im Spiel: jede Funktion mit ihrer Taste (start.js), Kappen leuchten beim Druecken, klickbar ---------- */
#leiste { position: absolute; left: 50%; bottom: calc(var(--u) * 0.55); transform: translateX(-50%); display: flex;
          gap: calc(var(--u) * 0.85); align-items: flex-end; pointer-events: auto; white-space: nowrap; }
#leiste.zweite { bottom: calc(var(--u) * 0.6 + 50px); }
#leiste .gruppe { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#leiste .kappen { display: flex; gap: 3px; }
#leiste .kappe { min-width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * 0.32); box-sizing: border-box;
                 display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: calc(var(--u) * 0.74);
                 font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(8, 8, 11, 0.6); border: 1px solid rgba(255, 255, 255, 0.5);
                 cursor: pointer; touch-action: none; transition: background 0.07s, color 0.07s, border-color 0.07s; }
#leiste span.kappe { cursor: default; border-color: rgba(255, 255, 255, 0.3); }
#leiste .kappe:hover { border-color: #fff; }
#leiste .kappe.an { background: #fff; color: #08080b; border-color: #fff; }
#leiste .name { font-size: calc(var(--u) * 0.56); opacity: 0.62; letter-spacing: 0.12em; }
#hud.schmal #leiste { display: none; }
body.cjk #leiste .name { letter-spacing: 0.02em; }
#leiste.zu { visibility: hidden; }