/* Warm enamel, ink and brass. Preserve the original responsive HUD geometry. */
:root{--jz-ivory:#fff5df;--jz-ink:#243d45;--jz-teal:#347d7d;--jz-gold:#efb751;--jz-coral:#d96851;--jz-edge:rgba(255,250,231,.84);--jz-shadow:0 3px 0 rgba(42,47,43,.16),0 6px 16px rgba(13,36,44,.18)}
.hud .pill,.hud .zoomwrap,.hud .fxpill{color:var(--jz-ink);background:linear-gradient(165deg,#fff9ec,#f6e9d0);border:1px solid var(--jz-edge);box-shadow:var(--jz-shadow);backdrop-filter:none;font-variant-numeric:tabular-nums}
.hud .pill{border-radius:16px}.hud .zoomwrap{border-radius:16px}
.zoomfill{background:linear-gradient(90deg,#4eafac,#9ad5be,#edbf59);background-size:100% 100%}
.mult-badge{background:var(--jz-teal);animation:none}
.btn{border:1px solid rgba(255,249,228,.45);box-shadow:0 4px 0 rgba(42,31,20,.22),0 8px 20px rgba(22,27,30,.15);transition:filter .15s ease,transform .12s ease}
.btn:active{transform:translateY(2px)}
.btn.play{background:linear-gradient(165deg,#ffe0a1,#efb751);color:#352e22}
.btn.ghost{border-color:rgba(255,249,228,.28)}
button:focus-visible{outline:3px solid #55c9d0;outline-offset:3px}
#mapView .kartehint{font-size:11px;padding:5px 9px;max-width:calc(100% - 16px)}
#mapView .mapdetail{background:rgba(21,53,60,.65);border:1px solid rgba(255,249,228,.2);border-radius:16px}
#mapView .mapmeta{font-size:11px}.mapregionlive{color:#fff5df}
#mapView .mapregions button.active{background:var(--jz-ivory);color:var(--jz-ink);box-shadow:inset 0 -3px 0 var(--jz-gold)}
#mapLevelPins button:focus-visible{background:rgba(255,240,177,.25);outline:3px solid #44bbc2}
@media(prefers-reduced-motion:reduce){.btn,.zoomfill{transition:none}.mult-badge,.zoomwrap.full .zoomfill,.zoomwrap.full .zoomico,.zoomwrap.zooming{animation:none!important}}

/* v241: enamel instruments, brass details and calm, legible interaction. */
:root{--jz-night:#19323b;--jz-pearl:#fff4df;--jz-brass:#e9c783}
.hud{gap:10px!important}
.hud>div:first-child{min-width:0;flex:1}
.hud>div:last-child{flex-shrink:0}
.hud>div:first-child>div:first-child{row-gap:5px!important}
.hud .pill{border-radius:11px;border-color:rgba(255,250,235,.78);box-shadow:0 2px 5px #142e3924;font-weight:600}
#pts{color:#fff0cf;background:linear-gradient(150deg,#34535a,#213e47);border-color:#edd6a657}
#lives{letter-spacing:2px}
#goalPill{font-size:11px;background:rgba(255,248,230,.92)}
.hud .zoomwrap{height:18px;box-shadow:none;border-radius:7px;padding:3px 7px}
.finesse-strip{color:var(--jz-pearl);background:linear-gradient(120deg,#17353eef,#294b50ed);border:1px solid #e9c78366;border-radius:10px;padding:7px 10px;min-width:154px;box-shadow:0 3px 10px #122b3526;pointer-events:none}
.finesse-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
#finesseLabel{font-size:10px;font-weight:600;letter-spacing:1.1px;font-variant-numeric:tabular-nums}
#finessePips{display:flex;gap:4px}
#finessePips i{display:block;width:5px;height:5px;border-radius:1px;background:#ffffff24;transform:rotate(45deg);border:1px solid #e9c78350}
#finessePips i.lit{background:var(--jz-brass);border-color:#fff1cb}
#finesseCue{display:block;font-size:10px;line-height:1.35;color:#e1ddca;margin-top:3px}
#stageProgress{position:absolute;z-index:8;top:0;left:0;right:0;height:3px;background:#152f393d;pointer-events:none;overflow:hidden}
#stageProgressFill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#71b5aa,#f2d28e);transition:transform .15s linear}
body:has(#hud.hidden) #stageProgress{display:none}
.finesse-result{padding:8px 13px;margin:5px 0 0;border:1px solid #e9c78345;border-radius:10px;background:#19343a8c;color:#f3dcaa;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
#levelCompleteView .mapstack{border:1px solid #e9c78340;border-radius:24px;padding:24px 18px;background:linear-gradient(155deg,#28434bd9,#162b35ed);box-shadow:0 20px 65px #071e3440;max-width:min(520px,95vw);box-sizing:border-box}
#levelCompleteView .levelpaw{border-radius:12px;box-shadow:none}
#levelCompleteView .levelpaw.earned{background:linear-gradient(140deg,#fff1d5,#e9d2a0);color:#2c4247;border-color:#f6e3af}
#levelCompleteView .levelpaw.new{animation:none;outline:1px solid #fff1ce;outline-offset:2px}
#touchControls .tc-btn{border:1px solid #fff1cf90;background:linear-gradient(160deg,#365b61f2,#173b45f5);box-shadow:inset 0 1px 0 #ffffff38,0 4px 0 #112d38b3,0 7px 17px #122c3938;color:#fff2d8;transition:transform .1s ease,filter .1s ease}
#touchControls #jumpBtn{background:linear-gradient(155deg,#ffe3aa,#d7ad67);color:#263f46;border-color:#fff1ce;box-shadow:inset 0 1px 0 #fff8e0b3,0 4px 0 #88673d8c,0 7px 17px #122c3938}
#touchControls .tc-btn:active{transform:translateY(3px);filter:brightness(1.08)}
#touchControls .tc-btn .lb{font-size:11px;letter-spacing:.6px;text-shadow:none}
#touchControls .tc-btn.ready{animation:none}
#touchControls .tc-btn .cd{background:conic-gradient(from 0deg,rgba(9,32,43,.5) calc(var(--cd,0)*1%),transparent 0)}
.banner{background:linear-gradient(140deg,#223f48ed,#152e38f2);color:#fff0cc;border:1px solid #ebd19a66;border-radius:12px;box-shadow:0 8px 24px #102c3933;text-shadow:none}
@media(max-width:380px){.finesse-strip{min-width:137px;padding:6px 8px}.hud{gap:6px!important}#goalPill{font-size:10px}#finesseCue{font-size:9px}}
@media(max-height:500px){.finesse-strip{padding:4px 8px;min-width:135px}#finesseCue{display:none}.hud>div{gap:4px!important}#levelCompleteView .mapstack{padding:12px}#levelCompleteView .title{font-size:25px!important}}
@media(prefers-reduced-motion:reduce){#stageProgressFill,#touchControls .tc-btn{transition:none}#touchControls .tc-btn:active{transform:none}}

/* V241: compact instruments and a clear, quiet return from pause. */
.resume-cue{position:absolute;z-index:35;top:35%;left:50%;transform:translateX(-50%);padding:12px 24px;border:1px solid #eed59b99;border-radius:15px;background:#19343af2;color:#fff0ce;font-size:24px;font-weight:600;letter-spacing:.03em;pointer-events:none;box-shadow:0 8px 30px #071c3540}
.resume-cue.hidden{display:none}
.finesse-strip{min-width:140px;padding:6px 9px}
#finesseCue{font-variant-numeric:tabular-nums}
#touchControls .tc-btn:focus-visible{outline:3px solid #fff1c4;outline-offset:4px}
@media(max-width:380px){.hud{padding-left:10px;padding-right:10px}.hud .pill{padding:6px 9px}.finesse-strip{min-width:126px}.finesse-top{gap:9px}#score{font-size:16px}#pts{font-size:14px}}
@media(max-height:500px){.hud{padding-top:8px}.hud .pill{padding:5px 9px}#goalPill{font-size:10px}.resume-cue{top:28%;font-size:20px;padding:8px 20px}}

/* V241: 3D world underneath the existing crisp feedback and DOM controls. */
#game3d{position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent}
#game3d[hidden]{display:none}
#game.over-3d{position:relative;z-index:1;background:transparent}

.finesse-result { white-space: pre-line; overflow-wrap: anywhere; }

/* V241: atlas materials and one clear journey at a time. */
#mapView .kartebox{background:#BCD3CB;border:1px solid #E8D6AC;box-shadow:0 9px 25px rgba(10,29,33,.25);border-radius:18px}
/* ── Die Reisewahl ist viel kleiner (v265) ──────────────────────────────
   Sie war 40 Punkte hoch, im Kartenschirm sogar 44, und sass mit ihrem
   Rahmen bei gut fuenfzig. Damit war sie so gross wie die Regionsleiste
   darueber, obwohl sie nur zwei Zustaende hat und einer davon meistens
   gesperrt ist. Auf dem Telefon hat sie der Karte Hoehe genommen, die
   unten gefehlt hat.

   DIE TIPPFLAECHE BLEIBT TROTZDEM 44 PUNKTE. In diesem Projekt gilt das
   fuer jede Tippflaeche, und "kleiner" heisst hier kleiner ANZUSEHEN,
   nicht schwerer zu treffen. Der sichtbare Knopf ist 26 Punkte hoch; ein
   durchsichtiges Feld darueber und darunter macht die Flaeche wieder 44.
   Es liegt in den Abstaenden des Stapels und deckt deshalb nichts zu,
   was man sonst antippen wuerde. */
.mapjourney{display:flex;gap:3px;padding:2px;border:1px solid rgba(235,217,177,.35);border-radius:16px;background:#183D44}
.mapjourney button{position:relative;min-height:26px;padding:4px 13px;border:0;border-radius:14px;color:#E0DECB;background:transparent;font:inherit;font-size:11px;cursor:pointer}
.mapjourney button::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.mapjourney button[aria-pressed="true"]{background:#F1DEAF;color:#233E42;box-shadow:0 2px 5px #102F3830}
.mapjourney button:disabled{opacity:.45;cursor:default}
.mapjourney button:focus-visible{outline:3px solid #79E1DF;outline-offset:2px}
#mapView .kartelegend{background:rgba(18,49,54,.88);padding:5px 9px;border-radius:12px;color:#F5E8C9}
#mapView .kartehint{font-size:10px;color:#173E46;background:rgba(245,237,215,.9);border-radius:8px;padding:3px 8px}
#mapView .mapregions button.active{border-color:#E9CE91;background:#345C5C;box-shadow:inset 0 -2px #E9CE91}
@media(prefers-reduced-motion:reduce){#mapView *{scroll-behavior:auto;animation:none!important;transition:none!important}}

/* ── Die Serientafel wird einzeilig (v258) ─────────────────────────────
   Gezaehlt im Bildschirmfoto auf 320 x 568: die Anzeige belegte das
   obere Drittel des Schirms. Neun Elemente in vier verschiedenen Formen,
   und die Serientafel allein war zweizeilig, mit einer eigenen Zeile nur
   fuer den Hinweis. Beschriftung, Punkte und Hinweis stehen jetzt in
   einer Zeile; was dort steht, aendert sich nicht.

   Gebaut und wieder herausgenommen wurde dabei ein zweiter Schritt: die
   drei cremefarbenen Marken in EINEM Kasten. Der wird 221 Punkte breit,
   und auf 320 beginnt die Knopfreihe bei 182 — der Stummschalter lag
   danach unter der Streckenanzeige. Die Begruendung steht bei den Marken
   in index.html. */
.finesse-strip{display:flex;align-items:center;gap:9px;padding:5px 10px;min-width:0}
.finesse-top{gap:8px}
#finesseLabel{white-space:nowrap}
#finesseCue{display:inline;margin-top:0;white-space:nowrap}
#finesseCue::before{content:'·';margin-right:7px;opacity:.55}
@media(max-width:380px){.finesse-strip{min-width:0;padding:4px 8px;gap:7px}}
/* Auf sehr flachen Fenstern blendet Zeile 53 den Hinweis aus. Diese
   Regel steht weiter oben in der Datei und wuerde von der einzeiligen
   Tafel ueberschrieben, also hier noch einmal. */
@media(max-height:500px){#finesseCue{display:none}}

/* ── DIE ANZEIGE IN HELLEN WELTEN (v260) ───────────────────────────────
   Nachgemessen an Bildschirmfotos aus vier Welten: die Schrift steht in
   JEDER Welt mit 10,8 zu 1 auf ihrer Marke. Die Marke ist deckend genug,
   dass der Hintergrund die Lesbarkeit der Zahlen gar nicht erreicht; ein
   Textschatten wuerde sie nur truebe machen.

   Schwach ist etwas anderes, und nur in hellen Welten: der RAND der Marke
   gegen den Himmel. Gemessen 1,14 zu 1 im Schnee und 1,20 in der Stadt,
   gegen 8,05 im Gruselwald und 14,8 auf der Mondbasis. Man liest die Zahl
   sofort, man findet den Kasten nur nicht.

   Deshalb kein Textschatten, sondern eine Haarlinie am Kasten und ein
   etwas tragfaehigerer Schlagschatten. Beides liegt AUSSERHALB der
   Schrift und aendert an ihrem Kontrast nichts. */
.hud .pill,.hud .zoomwrap,.finesse-strip{
  box-shadow:0 0 0 1px rgba(20,46,57,.13),0 2px 6px rgba(20,46,57,.22)}

/* V262: lesbare Regionsnavigation und umbrechender Hinweis auf schmalen Displays. */
#mapView .mapregions button{min-height:52px;font-size:10px;line-height:1.15;padding:5px 3px}
#mapView .mapregions button span{display:block;overflow-wrap:normal;hyphens:auto}
#mapView .mapregions button b{margin-bottom:3px}
#mapView .mapregions button:focus-visible{outline:3px solid #FFE29A;outline-offset:2px}
#mapView .kartehint{white-space:normal;width:max-content;max-width:calc(100% - 24px);text-align:center;font-size:11px;line-height:1.25}
@media(prefers-reduced-motion:reduce){#mapView .mapregions button{transition:none}}

/* V267: Die Leinwand darf im Flexstapel nicht kleiner gerechnet werden
   als ihr gezeichnetes Bild. Sonst rutscht die Detailtafel ueber Level.
   Im Querformat stehen die vorhandenen Bedienteile neben der Karte. */
#mapView{padding:12px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left))}
#mapView .mapstack{max-width:560px;min-height:min-content;margin:0 auto;gap:7px}
#mapView .mapstack>*{flex-shrink:0;box-sizing:border-box;max-width:100%}
#mapView .kartebox{flex:0 0 auto;width:100%;overflow:hidden}
#mapView .mapregions,#mapView .mapdetail,#mapView .mapactions{width:100%;max-width:100%}
#mapView .mapjourney button{min-height:26px}
#mapView .mapdetail{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(orientation:landscape) and (max-height:500px){
 #mapView{padding:10px max(12px,env(safe-area-inset-right))}
 #mapView .mapstack{display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:7px 12px;max-width:none;height:calc(100svh - 20px);align-items:start}
 #mapView .mapregions{grid-column:1;grid-row:1}
 #mapView .mapregions button{min-height:54px;font-size:9px}
 #mapView .mapjourney{grid-column:1;grid-row:2;justify-self:center}
 #mapView .mapjourney button{padding:4px 9px;font-size:11px}
 #mapView .mapdetail{grid-column:1;grid-row:3;align-self:center}
 #mapView .mapactions{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
 #mapView .mapactions .btn{padding:10px 9px;font-size:12px;min-height:44px}
 #mapView .kartebox{grid-column:2;grid-row:1/5;height:calc(100svh - 22px);align-self:start}
 #mapView .title,#mapView .mapregionlive,#mapView .mapprogress,#mapView .weltzahl,#mapView .mapsavehint,#mapView .kartehint{display:none}
}
@media(prefers-reduced-motion:no-preference){#mapView .mapstage:active{transform:scale(.98)}}

/* ── Die Welttafel wird schmaler (v265) ─────────────────────────────────
   Auf Ansage. Gemessen war sie 174 Punkte hoch, bei einem Inhalt, der in
   die Haelfte passt: Weltname, eine Zeile Zustand, zwei Kennzeichen und
   ein Knopf. Bei einem verschlossenen Level stand "Noch verschlossen"
   darin dreimal untereinander, einmal in der Zeile unter dem Namen,
   einmal als Kennzeichen und einmal im Knopf.

   Gekuerzt wird nicht der Inhalt, sondern der Platz darum: Innenabstand,
   Zeilenhoehen, Schriftgroessen und die beiden Pfeile.

   DIE TIPPFLAECHEN BLEIBEN. Die Pfeile sind jetzt 32 Punkte gross und
   werden ueber ein durchsichtiges Feld wieder auf 44 gebracht, so wie
   die Reisewahl darueber. Der Levelknopf behaelt seine 44 ganz, er ist
   hier die eigentliche Handlung und wird am haeufigsten getroffen; bei
   ihm faellt nur der Innenabstand weg. */
#mapView .mapdetail{padding:7px 10px;border-radius:13px}
#mapView .mapdetailhead{grid-template-columns:32px 1fr 32px;gap:6px}
#mapView .mapdetailhead b{font-size:14px}
#mapView .mapdetailhead span{font-size:10px;margin-top:0}
#mapView .mapdetailnav{position:relative;width:32px;height:32px;border-radius:10px;font-size:19px}
#mapView .mapdetailnav::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
#mapView .mapmeta{gap:4px;margin-top:5px}
#mapView .mapmeta span{padding:2px 7px;border-radius:7px;font-size:9.5px}
#mapView .mapstages{gap:5px;margin-top:5px}
#mapView .mapstage{min-height:44px;padding:4px 8px;border-radius:10px}
#mapView .mapstage b{font-size:12.5px}
#mapView .mapstage small{font-size:9px;margin-top:0}
#mapView .mapsavehint{font-size:10.5px;margin:0 0 4px}

/* V267: crisp scene, warm enamel and restrained type. No extra menu elements. */
#startView{backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);background:radial-gradient(ellipse at 50% 30%,#18303c3b 0%,#13283282 57%,#11273324 100%)}
#startView .title{color:#fff3d5;text-shadow:0 2px 0 #c7a66f,0 5px 0 #253d43,0 9px 20px #17333c40;letter-spacing:.018em}
#startView .title small{color:#f4e4c7;text-shadow:0 1px 3px #152e39;font-weight:500;letter-spacing:.08em}
#startView .btn.play{border:1px solid #fff0bf;background:linear-gradient(165deg,#ffedb8,#edc576);box-shadow:inset 0 1px 0 #fff8de,0 4px 0 #9f7941,0 9px 20px #193b4340;color:#253d43}
#startView .btn.ghost{background:#23444bd9;border-color:#dfd7b780;color:#fff2d4;box-shadow:inset 0 1px 0 #ffffff15,0 3px 0 #18363c80}
#mapView .kartebox{border-color:#e3d7af;box-shadow:0 1px 0 #fff3d9,inset 0 0 0 1px #fff1d5,0 10px 24px #0d2c3933}
#startView .legallink,#startView .spendeknopf{color:#fff0d2;text-shadow:0 1px 3px #12313b}