/* RASTER - Seite im Browser: schwarz/weiss, Versalien, scharfe Kanten (wie die Anzeige auf dem Rechner).
   Spiel oben, Controller darunter (Hochformat) bzw. daneben (Querformat auf dem Handy). */
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; display: flex; flex-direction: column; --pad-voll: 40; --pad-anteil: 1;
        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; }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
/* Controller: Groesse = voller Anteil mal Ausschub (pad.js), beim Ziehen ohne Uebergang, sonst rastet er weich ein */
#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 zum Ein- und Ausschieben: schmale Leiste mit einem Strich */
#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; }
/* Querformat auf dem Handy: Controller rechts neben dem Spiel, Griff senkrecht */
@media (orientation: landscape) and (max-height: 600px) {
	#feld { flex-direction: row; --pad-voll: 42; }
	#pad { width: calc(var(--pad-voll) * 1% * var(--pad-anteil)); height: 100%; }
	#griff { height: auto; width: 22px; }
	#griff i { width: 4px; height: 56px; }
}
/* grosser Bildschirm: Controller etwas flacher */
@media (min-height: 900px) and (min-width: 900px) {
	#feld { --pad-voll: 32; }
}

/* feste Flaechen ueber dem Spielfeld (zonen.js): durchscheinend, das aktive Feld heller */
#zonen { display: none; position: absolute; inset: 0; touch-action: none; }
body.mit-zonen #zonen { display: block; }
#zonen svg { position: absolute; inset: 0; display: block; }
#zonen .feld { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; transition: fill 0.12s; }
#zonen .feld.mitte { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.55); }
#zonen .feld.an { fill: rgba(255, 255, 255, 0.18); transition: none; }
#zonen .pfeil { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 2.5; stroke-linecap: square; }
#zonen .ladung { fill: rgba(255, 255, 255, 0.22); }
#zonen .ladung.voll { fill: rgba(255, 255, 255, 0.55); }
#zonen.leise { opacity: 0.55; }

#anzeige { position: absolute; inset: 0; pointer-events: none; --u: max(10px, min(1.5vw, 2.4vh)); }
.text { font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
#links { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 1.2); display: flex; align-items: center;
         gap: calc(var(--u) * 0.8); }
/* Welle: fuellt sich von unten, voll = bereit (A) */
#welle { position: relative; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); box-sizing: border-box;
         border: max(1px, calc(var(--u) * 0.12)) solid #fff; }
#welle b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #fff; opacity: 0.6; }
#welle.voll b { opacity: 1; }
#best { opacity: 0.6; }
#kette { opacity: 0.85; }
/* Ton an/aus: unten rechts in der Ecke, das einzige anklickbare Feld der Anzeige */
#ton { position: absolute; right: calc(var(--u) * 0.4); bottom: calc(var(--u) * 2.2); pointer-events: auto;
       background: none; border: 0; color: #fff; opacity: 0.45; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2);
       font-family: inherit; cursor: pointer; touch-action: manipulation; min-height: 44px; min-width: 88px; }
#ton.aus { opacity: 0.8; text-decoration: line-through; }
/* Menue-Knopf: unten links (Gegenstueck zu Ton) - Escape oeffnet dasselbe Menue */
#menueKnopf { position: absolute; left: calc(var(--u) * 0.4); bottom: calc(var(--u) * 2.2); pointer-events: auto;
              background: none; border: 0; color: #fff; opacity: 0.45; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2);
              font-family: inherit; cursor: pointer; touch-action: manipulation; min-height: 44px; min-width: 88px; }
#ton:hover, #menueKnopf:hover { opacity: 0.9; }

/* Formuebersicht: Namen im selben Raster wie die Modelle (oben 12 %, unten 6 % frei), die gewaehlte hell */
#formen { position: absolute; left: 0; right: 0; top: 16%; bottom: 4%; display: grid;
          grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
#formen.hoch { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
#formen span { align-self: end; justify-self: center; padding-bottom: calc(var(--u) * 0.6); opacity: 0.45;
               transition: opacity 0.2s; }
#formen span.an { opacity: 1; border-bottom: max(1px, calc(var(--u) * 0.12)) solid #fff; }
#anzeige.auswahl #mitte { top: calc(var(--u) * 1.0); bottom: auto; height: auto; justify-content: flex-start; gap: calc(var(--u) * 0.35); }
#anzeige.auswahl #titel { font-size: calc(var(--u) * 2.0); letter-spacing: -0.02em; line-height: 1.15; }

/* Bestenliste am Start: fuenf Plaetze unter dem Titel */
#liste { list-style: none; margin: calc(var(--u) * 0.6) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 0.45);
         opacity: 0.8; }
#liste li { display: grid; grid-template-columns: 2em 9em 6em; text-align: left; }
#liste li b { font-weight: 600; text-align: right; }
#liste li.neu { opacity: 1; text-decoration: underline; }

/* Namenseingabe nach dem Ende und Menue: schlichte Tafel ueber dem Spielfeld */
#eintrag, #menue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
                   background: rgba(8, 8, 11, 0.86); border: 1px solid rgba(255, 255, 255, 0.35);
                   padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2); display: flex; flex-direction: column;
                   align-items: center; gap: calc(var(--u) * 0.9); --u: max(12px, min(1.5vw, 2.4vh)); touch-action: manipulation; }
#eintrag .kopf { opacity: 0.6; }
#eintragPunkte { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: -0.02em; }
#name { background: none; border: 0; border-bottom: 1px solid #fff; color: #fff; text-align: center; width: 10em;
        font-family: inherit; padding: calc(var(--u) * 0.3); outline: none; -webkit-user-select: text; user-select: text;
        font-size: max(16px, var(--u)); }
#eintrag .knoepfe { display: flex; gap: calc(var(--u) * 1.2); }
#eintrag button, #menue button { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff;
        font-family: inherit; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); min-height: 44px; min-width: 9em;
        cursor: pointer; }
#eintrag button:focus-visible, #menue button:focus-visible, #eintrag button:hover, #menue button:hover {
        background: #fff; color: #08080b; outline: none; }
/* Meldung im unteren Drittel: erscheint und blendet aus */
#meldung { position: absolute; left: 0; right: 0; top: 68%; text-align: center; font-size: calc(var(--u) * 1.9);
           font-weight: 700; letter-spacing: -0.01em; opacity: 0; }
#meldung.zeigen { animation: meldung 1.4s ease-in forwards; }
@keyframes meldung { 0% { opacity: 1; } 100% { opacity: 0; } }
#rechts { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.2); display: flex; align-items: center;
          gap: calc(var(--u) * 0.9); }
#leben { display: flex; gap: calc(var(--u) * 0.35); }
#leben i { width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); box-sizing: border-box;
           border: max(1px, calc(var(--u) * 0.12)) solid #fff; }
#leben i.voll { background: #fff; }
#balken { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.45); width: 0;
          height: max(2px, calc(var(--u) * 0.16)); background: #fff; }
#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; }
#titel { font-weight: 700; line-height: 1; }
#hinweis.blinkt { animation: blinkt 2s ease-in-out infinite; }
@keyframes blinkt { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: #08080b; text-transform: uppercase; text-align: center; }
#lade h1 { font-weight: 700; font-size: clamp(34px, 8vw, 96px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 0.6em; }
#lade p { font-size: 13px; letter-spacing: 0.3em; opacity: 0.6; margin: 0 16px; }

.weg { display: none !important; }

/* waehrend der Formuebersicht: keine Flaechenlinien, keine Ecken-Knoepfe, kein Name oben links */
body.auswahl #zonen svg, body.auswahl #ton, body.auswahl #menueKnopf, body.auswahl #links { visibility: hidden; }

/* langer Titel (Minimal Run) passt auch aufs Handy */
#titel { font-size: min(calc(var(--u) * 4.2), 12vw); letter-spacing: -0.035em; }

/* Legende der Pills am Start: kleine Zeichen in ihren Farben */
#legende { display: flex; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 0.8); opacity: 0.8; flex-wrap: wrap;
           justify-content: center; }
#legende span { display: flex; align-items: center; gap: calc(var(--u) * 0.4); }
#legende i { display: inline-block; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); }
#legende i.gold { background: #ffc740; transform: rotate(45deg) scale(0.8); }
#legende i.jagd { background: #f2f4ff; box-shadow: 0 0 calc(var(--u) * 0.5) #fff; }
#legende i.leben { background: var(--spieler, #b04cff); outline: 1px solid #fff; outline-offset: 2px; }
#legende i.portal { width: calc(var(--u) * 0.45); height: calc(var(--u) * 1.1); background: linear-gradient(#fff, #9ab); }

/* Jagd: Anzeige oben in der Mitte mit ablaufendem Balken */
#jagd { position: absolute; left: 50%; top: calc(var(--u) * 1.1); transform: translateX(-50%); display: flex;
        flex-direction: column; align-items: center; gap: calc(var(--u) * 0.35); }
#jagd b { display: block; width: calc(var(--u) * 7); height: max(2px, calc(var(--u) * 0.18)); background: rgba(255, 255, 255, 0.25); }
#jagd b i { display: block; height: 100%; background: #fff; width: 100%; }

/* 0.8: stehende Gassen neben den Punkten (im Endspurt hervorgehoben), Kamera oben rechts, Kamera-Knopf unten Mitte,
   Tastenhilfe ueber dem Fortschritt, Lichtzeiger am Rand zur naechsten stehenden Gasse, Tasten im Menue */
#rest { opacity: 0.7; }
#rest.spurt { opacity: 1; animation: blinkt 1.2s ease-in-out infinite; }
#kamera { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 2.75); font-size: calc(var(--u) * 0.72);
          opacity: 0.55; white-space: nowrap; }
#kamera.neu { animation: kameraNeu 1.8s ease-out; }
@keyframes kameraNeu { 0%, 30% { opacity: 1; } 100% { opacity: 0.55; } }
#kameraKnopf { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 2.2); pointer-events: auto;
               background: none; border: 0; color: #fff; opacity: 0.45; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2);
               font-family: inherit; cursor: pointer; touch-action: manipulation; min-height: 44px; min-width: 88px;
               white-space: nowrap; }
#kameraKnopf:hover { opacity: 0.9; }
#tasten { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 2.2 + 52px); width: max-content;
          max-width: calc(100% - var(--u) * 3.2); box-sizing: border-box; text-align: center; font-size: calc(var(--u) * 0.72);
          line-height: 1.6; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.0); background: rgb(10 10 14 / 0.62);
          border: 1px solid rgb(255 255 255 / 0.18); }
#zeiger { position: absolute; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); pointer-events: none; }
#zeiger i { position: absolute; inset: 0; background: #fff; clip-path: polygon(100% 50%, 15% 8%, 36% 50%, 15% 92%);
            animation: blinkt 0.9s ease-in-out infinite; }
#menueTasten { margin-top: calc(var(--u) * 0.6); display: grid; gap: calc(var(--u) * 0.4); font-size: calc(var(--u) * 0.68);
               color: rgb(255 255 255 / 0.66); text-align: center; max-width: min(36em, 90vw); line-height: 1.5; }
body.auswahl #kameraKnopf, body.auswahl #kamera { visibility: hidden; }
#kameraKnopf.gedrueckt { opacity: 1; transform: translateX(-50%) scale(1.08); }
/* Aufnahmen fuer die Webseite: ?aufnahme=1 ohne Werbekarte und Herkunft, ?aufnahme=2 nur das Spielbild */
body.aufnahme1 #werbung, body.aufnahme1 #herkunft, body.aufnahme1 #griff { display: none !important; }
body.aufnahme2 #anzeige, body.aufnahme2 #zonen, body.aufnahme2 #griff, body.aufnahme2 #pad { display: none !important; }
#legende em, #jagd em { font-style: normal; }
/* Sprachwahl im Menue: eine Reihe kleiner Felder, die gewaehlte hell; darunter der Link zur Seite ueber das Spiel */
#sprachen { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.4); max-width: min(30em, 86vw); }
#menue #sprachen button { min-width: 0; min-height: 40px; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.7);
                          border-color: rgba(255, 255, 255, 0.22); opacity: 0.7; letter-spacing: 0.08em; }
#menue #sprachen button.an { opacity: 1; border-color: #fff; }
#ueber { color: rgb(255 255 255 / 0.66); font-size: calc(var(--u) * 0.72); text-decoration: none; padding: 0.5em 0.2em;
         border-bottom: 1px solid rgb(255 255 255 / 0.3); }
#ueber:hover, #ueber:focus-visible { color: #fff; border-color: #fff; outline: none; }
/* Chinesisch und Japanisch: Schriftzeichen ohne weite Sperrung */
body.cjk .text { letter-spacing: 0.04em; }