/* =====================================================================
   Broadside — Oberfläche
   =====================================================================

   Wie eine alte Seekarte: Pergament, braunschwarze Tinte, ein
   Siegelrot als Signalfarbe und Messing für Auszeichnungen. Ränder mit
   Gradeinteilung, feine Doppellinien statt Schatten. Schrift: IM Fell
   English für Titel (Buchdruck des 17. Jahrhunderts), Spectral für Text
   und Zahlen, Spectral SC für Beschriftungen.

   Im Spiel stehen die Instrumente hell auf dem Bild, ohne Kästen.
   ===================================================================== */

:root{
  --pergament:#ece2c8;
  --pergament-2:#e2d5b3;
  --pergament-3:#d8c9a3;
  --tinte:#24201a;
  --sepia:#6a5c47;
  --sepia-hell:#a09074;
  --linie:rgba(36,32,26,.16);
  --linie-stark:rgba(36,32,26,.38);
  --siegel:#9b3322;
  --siegel-tief:#7c2516;
  --messing:#b88f3c;
  --see:#2b5d8e;
  --hud:#f3ecd9;
  --hud-schatten:0 1px 2px rgba(0,0,0,.65),0 0 14px rgba(0,0,0,.3);
  --titel:"IM Fell English SC","Spectral SC",Georgia,serif;
  --schrift:"Spectral",Georgia,"Times New Roman",serif;
  --kapital:"Spectral SC","Spectral",Georgia,serif;
  --rose-hell:var(--pergament);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:#9fb3bd;color:var(--tinte);font-family:var(--schrift);font-size:15.5px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.rose{fill:initial;stroke:none}

#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#9fb3bd}
body.im-spiel{user-select:none;-webkit-user-select:none}
body.gesperrt #cv{cursor:none}

/* Pergament: zwei weiche Flecken und ein Hauch Körnung, ohne Bilddatei */
.pergament,.karte-seite,.lobby-karte,.karte-klein,.karte-tafel{
  background-color:var(--pergament);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 10%,rgba(255,250,235,.55),transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 95%,rgba(150,115,60,.16),transparent 70%),
    repeating-radial-gradient(circle at 37% 61%,rgba(120,95,55,.025) 0 1px,transparent 1px 3px);
}

/* --- Ladeschirm ---------------------------------------------------------- */

.laden-schirm{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:16px;
  background:var(--pergament);color:var(--sepia);font-size:15px;font-style:italic;transition:opacity .6s}
.laden-schirm .rose{width:58px;height:58px;color:var(--tinte);animation:drehen 6s linear infinite}
.laden-schirm p{margin:0}
body:not(.laedt) .laden-schirm{opacity:0;pointer-events:none}
@keyframes drehen{to{transform:rotate(360deg)}}

/* --- Bausteine ------------------------------------------------------------ */

.kicker{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--kapital);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:lowercase;color:var(--sepia)}
.kicker i{width:5px;height:5px;background:var(--siegel);display:inline-block;transform:rotate(45deg)}
.notiz{margin:0;color:var(--sepia);font-size:14px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;
  border:1.5px solid var(--tinte);border-radius:0;background:transparent;
  font-family:var(--kapital);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:lowercase;white-space:nowrap;
  transition:background-color .12s,color .12s,border-color .12s}
.knopf:hover{background:var(--tinte);color:var(--pergament)}
.knopf:focus-visible,.symbol:focus-visible,.wahl button:focus-visible,.code-felder input:focus-visible,.feld input:focus-visible{outline:2px solid var(--siegel);outline-offset:2px}
.knopf:disabled{opacity:.35;cursor:default}
.knopf:disabled:hover{background:transparent;color:inherit}
.knopf svg{width:18px;height:18px}
.knopf.primaer{background:var(--siegel);border-color:var(--siegel);color:#f6eedb;box-shadow:inset 0 0 0 3px var(--siegel),inset 0 0 0 4px rgba(246,238,219,.45)}
.knopf.primaer:hover{background:var(--siegel-tief);border-color:var(--siegel-tief);box-shadow:inset 0 0 0 3px var(--siegel-tief),inset 0 0 0 4px rgba(246,238,219,.45)}
.knopf.gross{height:58px;font-size:18px;justify-content:space-between;padding:0 20px}
.knopf.klein{height:34px;padding:0 12px;font-size:13.5px}
.knopf.leise{border-color:transparent;color:var(--sepia);text-transform:none;letter-spacing:0;font-family:var(--schrift);font-weight:500;font-size:15px;font-style:italic}
.knopf.leise:hover{color:var(--tinte);background:transparent;text-decoration:underline;text-underline-offset:4px}

.symbol{display:inline-grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--linie-stark);border-radius:0;background:transparent}
.symbol:hover{border-color:var(--tinte)}
.symbol svg{width:20px;height:20px}
.symbol .aus{display:none}
body.stumm .symbol .an{display:none}
body.stumm .symbol .aus{display:inline}
[data-ton] .aus{display:none}
body.stumm [data-ton] .an{display:none}
body.stumm [data-ton] .aus{display:inline}

.leiste-oben{display:flex;align-items:center;gap:10px}
.luecke{flex:1}
.zurueck{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 6px;border:0;background:none;
  color:var(--tinte);text-decoration:none;font-family:var(--kapital);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:lowercase}
.zurueck svg{width:18px;height:18px}
.zurueck:hover span{text-decoration:underline;text-underline-offset:4px}

.feld{display:grid;gap:6px}
.feld-titel{font-family:var(--kapital);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--sepia)}
.feld input{height:46px;padding:0 14px;border:1.5px solid var(--linie-stark);border-radius:0;background:rgba(255,252,242,.7);font-size:18px;font-weight:600;font-style:italic}
.feld input:focus{border-color:var(--tinte);outline:0}

.fehler{margin:0;min-height:1em;color:var(--siegel);font-size:14px;font-weight:600}
.fehler:empty{display:none}

/* --- Start ------------------------------------------------------------------ */

.ebene{position:fixed;inset:0;z-index:10}
.start{pointer-events:none}
.karte-seite{pointer-events:auto;position:absolute;left:0;top:0;bottom:0;width:min(460px,100%);
  display:flex;flex-direction:column;gap:22px;padding:18px 40px 22px 34px;overflow-y:auto;
  border-right:1.5px solid var(--tinte)}
/* Gradeinteilung am rechten Rand, wie auf einer Seekarte */
.karte-seite::after{content:"";position:fixed;top:0;bottom:0;left:min(460px,100%);margin-left:-9.5px;width:7px;
  background:repeating-linear-gradient(180deg,var(--tinte) 0 22px,var(--pergament) 22px 44px);
  border-left:1px solid var(--tinte);border-right:1px solid var(--tinte);pointer-events:none}
.marke{display:grid;gap:12px;margin-top:4vh;min-width:0}
.titel{margin:0;display:flex;align-items:center;gap:14px;font-family:var(--titel);font-weight:400;font-size:clamp(42px,12vw,58px);line-height:.9;letter-spacing:.005em}
.titel .rose{width:.86em;height:.86em;flex:none;color:var(--siegel)}
.unterzeile{margin:0;font-size:16.5px;color:#3d3528;max-width:36ch}

.formular{display:grid;gap:14px}
.trenner{display:flex;align-items:center;gap:12px;color:var(--sepia);font-family:var(--kapital);font-size:13px;letter-spacing:.1em;text-transform:lowercase;font-weight:600}
.trenner::before,.trenner::after{content:"";flex:1;height:3px;border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie-stark)}
.beitreten{display:flex;gap:10px}
.code-felder{display:flex;gap:6px;flex:1}
.code-felder input{width:100%;min-width:0;height:52px;text-align:center;border:1.5px solid var(--linie-stark);border-radius:0;background:rgba(255,252,242,.7);
  font-family:var(--schrift);font-size:26px;font-weight:700;text-transform:uppercase;caret-color:var(--siegel)}
.code-felder input:focus{border-color:var(--tinte);outline:0}
.code-felder.falsch input{border-color:var(--siegel);animation:wackeln .3s}
@keyframes wackeln{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.beitreten .knopf{height:52px}

.steuerung,.info-tasten{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie)}
.steuerung div,.info-tasten div{background:var(--pergament);padding:7px 10px;display:grid;gap:0}
.steuerung dt,.info-tasten dt{font-weight:700;font-size:14px;letter-spacing:.04em}
.steuerung dd,.info-tasten dd{margin:0;color:var(--sepia);font-size:13px;font-style:italic}
.tipp{margin:-10px 0 0;color:var(--sepia);font-size:13.5px;font-style:italic;border-left:2px solid var(--messing);padding-left:10px}

.fuss{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--sepia)}
.fuss a{color:var(--tinte)}
.fuss-notiz{flex-basis:100%;font-style:italic}

.ort{position:absolute;right:22px;bottom:18px;margin:0;color:var(--hud);font-family:var(--titel);font-size:20px;letter-spacing:.04em;
  text-shadow:var(--hud-schatten)}

/* --- Anleitung als Text unter dem Menü ------------------------------------------
   Die Menüseite (.karte-seite) scrollt schon von sich aus. .seite-buehne füllt sie
   bis auf einen Streifen von 56px, in dem der Kopf der Anleitung hervorschaut —
   das Menü sieht also aus wie vorher, und man sieht, dass es darunter weitergeht.
   Ist das Menü höher als der Bildschirm, wächst die Bühne mit, und die Anleitung
   folgt darunter. Die Tastenliste hat eine eigene Klasse, weil .steuerung auf
   Touch-Geräten und in niedrigen Fenstern ausgeblendet wird. Text, den das
   SEO-Werkzeug an der Markierung einsetzt (section.seo-text), sieht genauso aus. */

.seite-buehne{flex:none;min-height:calc(100% - 56px);display:flex;flex-direction:column;gap:22px}
.info-text{flex:none;display:grid;gap:12px;padding-top:18px;border-top:3px double var(--tinte);
  user-select:text;-webkit-user-select:text}
.info-text h2{margin:0;font-family:var(--titel);font-weight:400;font-size:30px;line-height:1.05;color:var(--tinte)}
.info-text h3{margin:6px 0 0;font-family:var(--titel);font-weight:400;font-size:21px;line-height:1.15;color:var(--tinte)}
.info-text p{margin:0;color:#3d3528;font-size:15.5px;line-height:1.55}
.info-text a{color:var(--siegel);font-weight:600;text-underline-offset:3px}
.info-text a:hover{color:var(--siegel-tief)}
.info-text :is(ul,ol){margin:0;padding-left:22px;display:grid;gap:6px;color:#3d3528;font-size:15.5px;line-height:1.5}
.info-text .seo-text{display:grid;gap:12px;margin-top:6px}

/* --- Lobby ---------------------------------------------------------------- */

.lobby{display:grid;place-items:center;padding:18px;background:rgba(20,24,28,.22);overflow-y:auto}
.lobby-karte{width:min(1000px,100%);border:1.5px solid var(--tinte);outline:1px solid var(--tinte);outline-offset:-6px;padding:16px 24px 24px;display:grid;gap:14px}
.lobby-marke{display:inline-flex;align-items:center;gap:8px;font-family:var(--titel);font-size:22px}
.lobby-marke .rose{width:22px;height:22px;color:var(--siegel)}
.lobby-raster{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"einladung einstellungen" "spieler einstellungen" "fuss fuss";gap:0;border:1px solid var(--linie-stark)}
.lobby-raster>section{padding:18px 20px}
.einladung{grid-area:einladung;border-bottom:1px solid var(--linie-stark);display:grid;gap:12px}
.spielerliste{grid-area:spieler;display:grid;gap:10px;align-content:start}
.einstellungen{grid-area:einstellungen;border-left:1px solid var(--linie-stark);display:grid;gap:16px;align-content:start;background:rgba(150,120,70,.07)}
.lobby-fuss{grid-area:fuss;border-top:1px solid var(--linie-stark);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px}
.lobby h2{margin:0;font-family:var(--kapital);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--sepia);display:flex;gap:8px}
.lobby h2 .zahl{color:var(--tinte)}

.code-gross{display:flex;gap:8px}
.code-gross span{flex:1;max-width:76px;height:84px;display:grid;place-items:center;background:var(--tinte);color:var(--pergament);
  font-family:var(--schrift);font-weight:700;font-size:48px;box-shadow:inset 0 0 0 3px var(--tinte),inset 0 0 0 4px rgba(236,226,200,.35)}
.code-gross.wartet span{background:var(--pergament-3);color:var(--sepia-hell);box-shadow:none;animation:pulsen 1s ease-in-out infinite alternate}
.code-gross.wartet span:nth-child(2){animation-delay:.12s}.code-gross.wartet span:nth-child(3){animation-delay:.24s}
.code-gross.wartet span:nth-child(4){animation-delay:.36s}.code-gross.wartet span:nth-child(5){animation-delay:.48s}
@keyframes pulsen{to{opacity:.4}}
.code-gross.lokal span{max-width:none;font-family:var(--titel);font-weight:400;font-size:32px;background:transparent;color:var(--tinte);justify-content:start;height:auto;box-shadow:none}
.einladung-knoepfe{display:flex;gap:8px;flex-wrap:wrap}

#liste{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie)}
#liste li{display:flex;align-items:center;gap:10px;min-height:42px;border-bottom:1px solid var(--linie);padding:0 2px}
/* Wimpel in Spielerfarbe */
.wimpel{width:18px;height:11px;flex:none;display:inline-block;background:var(--farbe);clip-path:polygon(0 0,100% 50%,0 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.spieler-name{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marken{display:flex;gap:4px;flex:1}
.marke-klein{font-family:var(--kapital);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:lowercase;padding:0 6px;border:1px solid var(--linie-stark);color:var(--sepia)}
.marke-klein.du{background:var(--tinte);border-color:var(--tinte);color:var(--pergament)}
.ping{color:var(--sepia);font-size:13px;font-variant-numeric:tabular-nums}
.zeile-knopf{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--sepia)}
.zeile-knopf:hover{color:var(--tinte)}
.zeile-knopf svg{width:16px;height:16px}

.einstellung{display:grid;gap:7px}
.einstellung>span{font-family:var(--kapital);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--sepia)}
.wahl{display:flex;border:1.5px solid var(--tinte)}
.wahl button{flex:1;min-height:40px;border:0;border-left:1.5px solid var(--tinte);background:transparent;font-weight:600;font-size:15px;padding:6px 8px}
.wahl button:first-child{border-left:0}
.wahl button[aria-pressed="true"]{background:var(--tinte);color:var(--pergament)}
.wahl.karten button{display:grid;gap:1px;text-align:left;padding:9px 12px}
.wahl.karten b{font-family:var(--titel);font-weight:400;font-size:21px;line-height:1.05}
.wahl.karten small{font-size:12.5px;color:inherit;opacity:.75;font-style:italic}
body.gast .wahl button{cursor:default}
body.gast .wahl button:not([aria-pressed="true"]){color:var(--sepia-hell)}
body.gast [data-nur-gastgeber]{display:none!important}
.warten{margin:0;color:var(--sepia);font-size:14.5px;font-style:italic}
body.gastgeber .lobby-fuss .warten{display:none}

/* --- HUD ---------------------------------------------------------------------- */

.hud{position:fixed;inset:0;z-index:5;pointer-events:none;color:var(--hud);text-shadow:var(--hud-schatten)}
.hud-titel{font-family:var(--kapital);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:lowercase;opacity:.92}
.splitter-rand{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 48%,rgba(110,35,15,.6) 100%)}
.fernrohr{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 34vmin,rgba(12,10,8,.92) 34.4vmin,#0b0a08 40vmin)}
.fernrohr i{position:absolute;left:50%;top:50%;width:68vmin;height:68vmin;transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(184,143,60,.55),inset 0 0 40px rgba(0,0,0,.5)}
.fernrohr i::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:rgba(10,10,10,.6)}

/* Fadenkreuz: ein Punkt; schaut man zur Seite, zeigt ein Pfeil, welche Batterie spricht */
.fadenkreuz{position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .15s}
.fadenkreuz b{position:absolute;width:6px;height:6px;left:-3px;top:-3px;border-radius:50%;border:1.5px solid var(--hud);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.fadenkreuz .pfeil{position:absolute;top:-7px;width:0;height:0;border:7px solid transparent;opacity:0;transition:opacity .15s,transform .15s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.fadenkreuz .links{right:12px;border-right:10px solid var(--hud);border-left:0;transform:translateX(4px)}
.fadenkreuz .rechts{left:12px;border-left:10px solid var(--hud);border-right:0;transform:translateX(-4px)}
.fadenkreuz.bb .links,.fadenkreuz.stb .rechts{opacity:1;transform:none}
.fadenkreuz small{position:absolute;left:-80px;width:160px;top:16px;text-align:center;font-family:var(--kapital);font-size:13px;letter-spacing:.14em;text-transform:lowercase;opacity:.85}
.fadenkreuz.aus{opacity:0}

.treffer{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid var(--hud);opacity:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.treffer.versenkt{border-color:var(--messing);border-width:3px;width:46px;height:46px;margin:-23px}

.hud-oben{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:2px}
.uhr{font-weight:700;font-size:24px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.ziel-anzeige{display:flex;align-items:center;gap:12px;font-family:var(--kapital);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:lowercase}
.ziel-anzeige b{font-family:var(--schrift);font-size:18px;font-weight:700}
.flotten{display:inline-flex;align-items:center;gap:6px}
.flotten i{width:12px;height:8px;display:inline-block;clip-path:polygon(0 0,100% 50%,0 100%)}

.abschuesse{position:absolute;top:14px;right:16px;margin:0;padding:0;list-style:none;display:grid;gap:4px;justify-items:end}
.abschuesse li{display:flex;align-items:center;gap:8px;padding:3px 10px;background:rgba(20,18,14,.5);font-size:15px;font-weight:600;
  text-shadow:none;transition:opacity .5s}
.abschuesse li.ich{background:rgba(236,226,200,.92);color:var(--tinte)}
.abschuesse li.weg{opacity:0}
.abschuesse .wsym{width:18px;height:18px;stroke-width:1.8}

.hud-unten-links{position:absolute;left:24px;bottom:22px;display:grid;gap:12px}
.rumpf{display:grid;gap:2px}
.rumpf-zeile{display:flex;align-items:center;gap:12px}
.rumpf b{font-weight:700;font-size:44px;line-height:.95;font-variant-numeric:tabular-nums;min-width:2.1ch}
.rumpf-balken{width:170px;height:6px;background:rgba(20,18,14,.5);display:block;box-shadow:0 0 0 1px rgba(243,236,217,.35)}
.rumpf-balken i{display:block;height:100%;width:100%;background:var(--hud);transition:width .2s}
.rumpf.wenig b{color:#ff9a7c}
.rumpf.wenig .rumpf-balken i{background:#d8452e}
.fahrt-segel{display:flex;gap:22px;align-items:end}
.fahrt{display:grid;line-height:1}
.fahrt b{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.fahrt small,.segel small{font-family:var(--kapital);font-size:12.5px;letter-spacing:.1em;text-transform:lowercase;opacity:.9}
.segel{display:grid;gap:5px}
.segel-stufen{display:flex;gap:4px;height:20px;align-items:end}
.segel-stufen i{width:16px;height:20px;border:1.5px solid var(--hud);border-radius:0 0 3px 3px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.segel-stufen i.an{background:var(--hud)}

.hud-unten-mitte{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:grid;justify-items:center;gap:0}
.wind{width:150px;height:150px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.wind-text{font-family:var(--kapital);font-size:13px;letter-spacing:.12em;text-transform:lowercase;margin-top:-4px}

.hud-unten-rechts{position:absolute;right:24px;bottom:22px;display:grid;gap:12px;justify-items:end}
.buffs{display:grid;gap:4px;justify-items:end}
.buff{display:flex;align-items:center;gap:8px;padding:3px 10px;font-family:var(--kapital);font-size:14px;letter-spacing:.08em;text-transform:lowercase;
  text-shadow:none;color:#fff;animation:buffRein .3s ease-out}
.buff b{font-family:var(--schrift);font-variant-numeric:tabular-nums}
.buff.pulver{background:rgba(196,52,30,.85)}
.buff.schnell{background:rgba(196,138,30,.85)}
.buff.brand{background:rgba(120,30,10,.9);animation:buffRein .3s ease-out,flackern .5s infinite alternate}
@keyframes buffRein{from{transform:translateX(16px);opacity:0}}
@keyframes flackern{to{background:rgba(200,70,20,.95)}}
.meldung.serie{color:#f6d68a;font-size:40px}
.batterie{display:grid;gap:4px;justify-items:end;opacity:.62;transition:opacity .15s}
.batterie.aktiv{opacity:1}
.rohre{display:flex;gap:5px}
.rohre i{width:22px;height:9px;border:1.5px solid var(--hud);border-radius:2px 5px 5px 2px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.rohre i.voll{background:var(--hud)}
#batterieBb .rohre{flex-direction:row-reverse}
#batterieBb .rohre i{border-radius:5px 2px 2px 5px}
.batterie .laden{width:100%;height:3px;background:rgba(20,18,14,.5);display:block}
.batterie .laden i{display:block;height:100%;background:var(--hud);transform-origin:left;transform:scaleX(1)}
.batterie.bereit .laden i{background:var(--messing)}
.batterie.aktiv.bereit .hud-titel{color:#f6d68a}

.meldung{position:absolute;left:50%;top:60%;transform:translate(-50%,0);text-align:center;font-family:var(--titel);font-size:30px;line-height:1.1;
  opacity:0;transition:opacity .25s;white-space:nowrap}
.meldung small{display:block;font-family:var(--kapital);font-size:14px;letter-spacing:.12em;text-transform:lowercase;opacity:.9;margin-top:4px}
.meldung.an{opacity:1}

.rand-hinweis{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:6px 14px;background:rgba(124,37,22,.7);text-shadow:none;
  font-style:italic;font-size:16px;white-space:nowrap}

.tot{position:absolute;inset:auto 0 26%;text-align:center}
.tot-titel{margin:0;font-family:var(--titel);font-size:34px}
.tot-zeit{margin:6px 0 0;font-family:var(--kapital);font-size:16px;letter-spacing:.12em;text-transform:lowercase;opacity:.9}

.hud-menue{position:absolute;top:12px;left:12px;pointer-events:auto;border-color:rgba(243,236,217,.6);color:var(--hud);background:rgba(20,18,14,.3)}
body:not(.touch-an) .hud-menue{display:none}

/* --- Schirme -------------------------------------------------------------- */

.schirm{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(18,20,22,.42)}
.karte-klein{width:min(420px,100%);border:1.5px solid var(--tinte);outline:1px solid var(--tinte);outline-offset:-6px;padding:26px;display:grid;gap:14px}
.karte-klein h2{margin:0;font-family:var(--titel);font-weight:400;font-size:32px;line-height:1}
.spalte{display:grid;gap:8px;margin-top:4px}
.klick{background:rgba(18,20,22,.2);cursor:pointer}
.klick .karte-klein{text-align:center;justify-items:center;pointer-events:none}

.regler{display:grid;gap:6px;font-size:14.5px;font-weight:600}
.regler>span{display:flex;justify-content:space-between}
.regler b{font-variant-numeric:tabular-nums}
.regler input{width:100%;accent-color:var(--siegel)}

.laden-punkte{display:flex;gap:7px}
.laden-punkte i{width:9px;height:9px;background:var(--siegel);transform:rotate(45deg);animation:pulsen .6s ease-in-out infinite alternate}
.laden-punkte i:nth-child(2){animation-delay:.2s}.laden-punkte i:nth-child(3){animation-delay:.4s}

.karte-tafel{width:min(660px,100%);border:1.5px solid var(--tinte);outline:1px solid var(--tinte);outline-offset:-6px;padding:24px;display:grid;gap:14px;max-height:calc(100vh - 32px);overflow-y:auto}
.tafel-kopf{display:grid;gap:2px}
.tafel-kopf h2{margin:0;font-family:var(--titel);font-weight:400;font-size:38px;line-height:1}
.team-stand{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.team-stand div{border-left:6px solid;padding:6px 12px;background:rgba(150,120,70,.1);display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--kapital);font-weight:600;text-transform:lowercase;letter-spacing:.06em;font-size:15px}
.team-stand b{font-family:var(--schrift);font-size:30px}
.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th{text-align:left;font-family:var(--kapital);font-size:13px;letter-spacing:.08em;text-transform:lowercase;color:var(--sepia);font-weight:600;padding:6px 8px;border-bottom:1.5px solid var(--tinte)}
.tabelle td{padding:8px;border-bottom:1px solid var(--linie);font-weight:600}
.tabelle td:first-child{color:var(--sepia);width:28px;font-style:italic}
.tabelle th:nth-child(n+3),.tabelle td:nth-child(n+3){text-align:right}
.tabelle tr.ich td{background:rgba(155,51,34,.09)}
.wer{display:inline-flex;align-items:center;gap:8px}
.tafel-fuss{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tafel-fuss .warten{flex-basis:100%}
.tafel-fuss.gastgeber .warten{display:none}
.tafel-fuss:not(.gastgeber) [data-nur-gastgeber]{display:none}
#tafel.nur-ansehen{pointer-events:none;background:rgba(18,20,22,.2)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:40;background:var(--tinte);color:var(--pergament);padding:10px 16px;
  font-weight:600;font-size:14.5px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.an{opacity:1;transform:translate(-50%,0)}

.ohne-js{position:fixed;inset:0;display:grid;place-items:center;margin:0;background:var(--pergament)}

/* --- Touch ------------------------------------------------------------------- */

.touch{position:fixed;inset:0;z-index:6;touch-action:none}
.stick{position:absolute;left:-60px;top:-24px;width:120px;height:48px;border:2px solid rgba(243,236,217,.55);border-radius:24px;pointer-events:none}
.stick i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:rgba(243,236,217,.75)}
.touch-knopf{position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid rgba(243,236,217,.6);background:rgba(20,18,14,.3);
  color:var(--hud);display:grid;place-items:center;touch-action:none}
.touch-knopf svg{width:24px;height:24px}
.touch-knopf.an,.touch-knopf.fest{background:rgba(155,51,34,.8);border-color:var(--hud)}
.touch-knopf.feuer{right:calc(28px + env(safe-area-inset-right));bottom:120px;width:84px;height:84px}
.touch-knopf.feuer svg{width:34px;height:34px}
.touch-knopf.fernrohr-knopf{right:calc(128px + env(safe-area-inset-right));bottom:150px}
.touch-knopf.setzen{right:calc(40px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:48px;height:48px}
.touch-knopf.reffen{right:calc(100px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:48px;height:48px}
.touch-knopf.punkte{right:calc(16px + env(safe-area-inset-right));top:16px;width:42px;height:42px}
.touch-knopf.punkte svg{width:18px;height:18px}
body.touch-an .hud-unten-rechts{bottom:auto;top:66px}
body.touch-an .abschuesse{top:auto;bottom:16px;right:auto;left:16px;justify-items:start}
body.touch-an .hud-unten-links{bottom:auto;top:62px;left:16px}
body.touch-an .rumpf b{font-size:30px}
body.touch-an .rumpf-balken{width:120px}
body.touch-an .wind{width:110px;height:110px}

/* --- Schmal -------------------------------------------------------------------- */

@media (max-width:760px){
  .karte-seite{width:100%;border-right:0;padding:14px 18px 18px;gap:18px;background-color:rgba(236,226,200,.96)}
  .karte-seite::after{display:none}
  .seite-buehne{gap:18px}
  .marke{margin-top:2vh}
  .lobby{padding:0;place-items:stretch}
  .lobby-karte{border:0;outline:0;padding:10px 14px 16px;min-height:100%}
  .lobby-raster{grid-template-columns:1fr;grid-template-areas:"einladung" "spieler" "einstellungen" "fuss"}
  .einstellungen{border-left:0;border-top:1px solid var(--linie-stark)}
  .code-gross span{height:64px;font-size:36px}
  .lobby-fuss{flex-direction:column;align-items:stretch}
  .ort{display:none}
  .meldung{font-size:24px}
}
@media (max-width:480px){
  .info-text{padding-top:16px}
  .info-text h2{font-size:26px}
}
@media (max-height:600px) and (min-width:761px){
  .marke{margin-top:0}
  .steuerung,.tipp{display:none}
}
@media (pointer:coarse){
  .steuerung{display:none}
}
/* Kleine Fenster: Instrumente kleiner, damit nichts überlappt */
@media (max-height:620px),(max-width:900px){
  .hud-unten-links{left:14px;bottom:12px;gap:6px}
  .hud-unten-rechts{right:14px;bottom:12px;gap:6px}
  .rumpf b{font-size:30px}
  .rumpf-balken{width:110px}
  .fahrt b{font-size:20px}
  .wind{width:108px;height:108px}
  .hud-unten-mitte{bottom:6px}
  .rohre i{width:17px;height:8px}
  .uhr{font-size:20px}
  .meldung{font-size:24px}
}