/* Flight Club Saar e. V. · Mini-Spiel „Whoop-Rennen“ (gehört zu assets/js/game.js)
   Nutzt die Variablen aus fcs.css (OSD-Designsystem), funktioniert aber auch mit den Ersatzwerten. */
.fcsg{position:relative;display:block;width:100%;min-width:0;color:var(--osd,#eaf4ff);font-family:var(--hud,"Chakra Petch",ui-monospace,monospace)}
.fcsg [hidden],.fcsb [hidden]{display:none!important}

/* ---------- Abschnitt: Spiel und Bestenliste nebeneinander (PC) bzw. untereinander ---------- */
.spiel-grid{display:grid;gap:clamp(16px,2vw,24px);min-width:0}
.spiel-grid>*{min-width:0}
@media (min-width:1080px){.spiel-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:stretch}}

/* ---------- Bühne (Brillen-Bild) ---------- */
.fcsg-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:min(84svh,760px);overflow:hidden;border-radius:var(--r,18px);background:#050b17;border:1px solid var(--line-hi,rgba(158,196,255,.38));box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(63,224,255,.35);isolation:isolate;container-type:inline-size;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none;cursor:pointer}
.fcsg-stage:focus-visible{box-shadow:0 0 0 2px var(--sig,#3fe0ff),0 40px 90px -40px rgba(0,0,0,.9)}
@media (max-width:640px){.fcsg-stage{aspect-ratio:4/5;max-height:80svh}}
.fcsg-cv{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.fcsg.is-live .fcsg-stage{cursor:default}
.fcsg.is-live .fcsg-cv{touch-action:none;cursor:none}
body.fcsg-noreticle .reticle{opacity:0!important}

/* Vollbild am Handy, solange geflogen wird: Seite steht still */
html.fcsg-lock,html.fcsg-lock body{overflow:hidden!important;overscroll-behavior:none}
.fcsg.fcsg-full{position:fixed!important;inset:0;z-index:2147483000;width:auto;margin:0;background:#000;touch-action:none}
.fcsg-full .fcsg-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;max-height:none!important;border:0;border-radius:0;box-shadow:none}
.fcsg-full .fcsg-cv{touch-action:none}
.fcsg-full .fcsg-ctl{right:max(12px,env(safe-area-inset-right))}
.fcsg-ph{display:block;width:100%;border-radius:var(--r,18px);background:#050b17}

/* Zeilen der analogen Brille und dunkle Ränder (statisch, kostet keine Rechenzeit) */
.fcsg-fx{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(135% 105% at 50% 50%,transparent 55%,rgba(1,4,10,.7) 100%)}

/* ---------- OSD ---------- */
.fcsg-hud{position:absolute;inset:0;z-index:2;pointer-events:none;color:#fff;font:600 13px/1.25 var(--hud,"Chakra Petch",monospace);font-size:clamp(10px,1.4cqw,15px);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000}
.fcsg-frame{position:absolute;inset:3.2%}
.fcsg-frame::before,.fcsg-frame::after,.fcsg-frame i::before,.fcsg-frame i::after{content:"";position:absolute;width:clamp(14px,2.4cqw,26px);height:clamp(14px,2.4cqw,26px);border:2px solid rgba(234,244,255,.7)}
.fcsg-frame::before{top:0;left:0;border-right:0;border-bottom:0}
.fcsg-frame::after{top:0;right:0;border-left:0;border-bottom:0}
.fcsg-frame i::before{bottom:0;left:0;border-right:0;border-top:0}
.fcsg-frame i::after{bottom:0;right:0;border-left:0;border-top:0}
.fcsg-o{position:absolute;display:grid;gap:.4em;white-space:nowrap}
.fcsg-tl{top:6.5%;left:5.5%}
.fcsg-tr{top:6.5%;right:5.5%;justify-items:end;text-align:right}
.fcsg-tc{top:6.5%;left:50%;transform:translateX(-50%);justify-items:center;gap:.35em}
.fcsg-bl{bottom:6.5%;left:5.5%}
.fcsg-br{bottom:6.5%;right:5.5%;justify-items:end;text-align:right}
.fcsg-o small{font-size:.8em;color:#d4e6ff;letter-spacing:.14em}
.fcsg-bl b,.fcsg-br b{font:400 2.5em/.9 var(--big,"Bebas Neue",sans-serif);letter-spacing:.03em}
.fcsg-br em{font:700 1.15em/1 var(--hud,monospace);font-style:normal;color:var(--amber,#ffb020);margin-left:.35em;vertical-align:.55em}
.fcsg-bat{display:flex;align-items:center;gap:.55em}
.fcsg-cell{position:relative;display:block;width:2em;height:1em;border:2px solid #fff;border-radius:2px;padding:1px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000}
.fcsg-cell::after{content:"";position:absolute;right:-.32em;top:50%;width:.22em;height:.45em;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 1px #000}
.fcsg-cell i{display:block;height:100%;width:100%;background:var(--green,#3ee08a);transition:width .4s}
.fcsg-cell i.low{background:var(--amber,#ffb020)}
.fcsg-lives{display:flex;align-items:center;gap:.6em}
.fcsg-pips{display:flex;gap:.45em;padding-left:.1em}
.fcsg-pips i{display:block;width:.72em;height:.72em;transform:rotate(45deg);background:var(--sig,#3fe0ff);box-shadow:0 0 0 1.5px #000,0 0 10px rgba(63,224,255,.75);transition:background .3s,box-shadow .3s,transform .3s}
.fcsg-pips i.off{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 1px #000;transform:rotate(45deg) scale(.8)}
.fcsg-mode{display:inline-block;padding:.2em .6em;border:1px solid transparent}
.fcsg-mode.auto{color:var(--amber,#ffb020)}
.fcsg-mode.armed{color:#fff;border-color:rgba(255,255,255,.75);box-shadow:0 0 0 1px #000}
.fcsg-lvl{color:var(--lc,var(--amber,#ffb020));letter-spacing:.2em}
.fcsg-lvn{display:none}
@container (min-width:700px){.fcsg-lvn{display:inline}.fcsg-lvn::before{content:" · "}}
/* Fortschritt bis zum nächsten Level */
.fcsg-prog{display:block;width:8.5em;height:4px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.2);box-shadow:0 0 0 1px #000}
.fcsg-prog i{display:block;width:100%;height:100%;background:var(--lc,var(--sig,#3fe0ff));transform:scaleX(0);transform-origin:0 50%;transition:transform .3s linear}
.fcsg-wind{color:var(--amber,#ffb020);font-size:.86em;letter-spacing:.16em}
.fcsg-wind:empty{display:none}
/* Schild und Punkte ×2 */
.fcsg-shd{display:none;align-items:center;color:#7db8ff;filter:drop-shadow(0 0 6px rgba(90,162,255,.9))}
.fcsg-shd.on{display:inline-flex}
.fcsg-shd svg{width:1.25em;height:1.25em}
.fcsg-x2{display:inline-block;margin-left:.45em;padding:.05em .4em;border-radius:4px;background:rgba(255,92,170,.2);color:#ff7cc0;font-style:normal;letter-spacing:.08em}
.fcsg-x2:empty{display:none}
.fcsg .is-glow{animation:fcsgGlowUp .8s cubic-bezier(.2,.7,.1,1)}
@keyframes fcsgGlowUp{0%{transform:scale(1)}25%{transform:scale(1.35);opacity:.6}50%{opacity:1}100%{transform:none}}
.fcsg-bat{transform-origin:0 50%}

/* Feste OSD-Teile nur im eigenen Flug */
.fcsg-play{visibility:hidden}
.fcsg.is-hud .fcsg-play{visibility:visible}

/* Große Einblendung (3-2-1, ARMED, LEVEL) und Warnungen */
.fcsg-msg{position:absolute;left:0;right:0;top:40%;margin-top:-.5em;text-align:center;font:400 clamp(52px,14cqw,150px)/1 var(--big,"Bebas Neue",sans-serif);letter-spacing:.04em;color:#fff;opacity:0;text-shadow:0 0 34px rgba(63,224,255,.65),0 3px 0 #000}
.fcsg-msg.on{opacity:1}
.fcsg-msg.pop{animation:fcsgPop .45s cubic-bezier(.2,.7,.1,1) both}
.fcsg-msg.armed{color:var(--sig,#3fe0ff);letter-spacing:.12em}
.fcsg-msg.lvl{top:52%;font-size:clamp(40px,9cqw,96px);color:var(--lc,var(--amber,#ffb020));letter-spacing:.1em;text-shadow:0 0 40px rgba(0,0,0,.55),0 3px 0 #000}
.fcsg-msg small{display:block;margin-top:.2em;font:700 clamp(14px,.3em,30px)/1.1 var(--hud,"Chakra Petch",monospace);letter-spacing:.32em;text-transform:uppercase;color:#fff;text-shadow:0 0 2px #000,0 2px 0 #000}
.fcsg-msg.rec{top:30%;font-size:clamp(38px,8cqw,90px);color:#ffd65c;letter-spacing:.08em;text-shadow:0 0 40px rgba(255,214,92,.6),0 3px 0 #000}
@keyframes fcsgPop{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
.fcsg-toast{position:absolute;left:50%;bottom:21%;transform:translateX(-50%);width:max-content;max-width:84%;padding:.6em .95em;border-radius:10px;background:rgba(4,9,18,.74);border:1px solid rgba(63,224,255,.45);font:600 clamp(12px,1.5cqw,16px)/1.35 var(--hud,monospace);letter-spacing:.08em;text-align:center;white-space:normal;opacity:0;transform:translate(-50%,-6px);transition:opacity .25s,transform .25s}
.fcsg-toast.on{opacity:1;transform:translate(-50%,0)}
.fcsg-warn{position:absolute;left:50%;top:62%;transform:translateX(-50%);width:max-content;max-width:92%;padding:.45em .6em .45em .82em;background:rgba(0,0,0,.62);text-align:center;font:700 clamp(15px,2.6cqw,30px)/1 var(--hud,monospace);letter-spacing:.22em;opacity:0}
.fcsg-warn.on{opacity:1;animation:fcsgBlink 1s steps(2,end) infinite}
.fcsg-warn.red{color:#ff5d6c;background:rgba(0,0,0,.8)}
.fcsg-warn.red.on{animation:none}
.fcsg-warn.amber{color:var(--amber,#ffb020)}
@keyframes fcsgBlink{50%{opacity:.4}}

/* Knöpfe im Bild während des Flugs: Pause, Mitte (nur Kippen), Ton */
.fcsg-ctl{position:absolute;right:max(10px,2.4%);top:50%;z-index:3;display:none;flex-direction:column;align-items:flex-end;gap:10px;transform:translateY(-50%)}
.fcsg.is-ctl .fcsg-ctl{display:flex}
.fcsg-cb{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;height:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(234,244,255,.5);background:rgba(4,9,18,.58);color:#fff;font:600 12px/1 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .2s,background .2s,color .2s}
.fcsg-cb:hover,.fcsg-cb:focus-visible{border-color:var(--sig,#3fe0ff);background:rgba(63,224,255,.16)}
.fcsg-cb:active{transform:scale(.95)}
.fcsg:not(.m-tilt) .fcsg-cb-t{display:none}
.fcsg-cb.fcsg-snd .w{opacity:.25}
.fcsg-cb.on{border-color:var(--sig,#3fe0ff);color:var(--sig,#3fe0ff)}
.fcsg-cb.on .w{opacity:1}

/* Trick-Knopf: unten rechts, mit dem Daumen gut erreichbar (PC zusätzlich Klick, Leertaste, T) */
.fcsg-trick{position:absolute;z-index:3;right:5.5%;bottom:calc(6.5% + 4.4em);display:none;align-items:center;justify-content:center;width:clamp(58px,7.2cqw,76px);height:clamp(58px,7.2cqw,76px);padding:0;border-radius:50%;border:2px solid var(--lc,var(--sig,#3fe0ff));background:rgba(4,9,18,.62);color:#fff;font-size:clamp(10px,1.4cqw,15px);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:manipulation;transition:opacity .2s,transform .15s}
.fcsg.is-ctl .fcsg-trick{display:flex}
.fcsg-trick-in{display:grid;justify-items:center;gap:1px;color:var(--lc,var(--sig,#3fe0ff))}
.fcsg-trick svg{width:44%;height:auto;min-width:22px}
.fcsg-trick b{font:700 clamp(9px,1.1cqw,11px)/1 var(--hud,"Chakra Petch",monospace);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.fcsg-trick::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lc,var(--sig,#3fe0ff));opacity:0;pointer-events:none}
.fcsg-trick:hover,.fcsg-trick:focus-visible{background:rgba(63,224,255,.16)}
.fcsg-trick:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fcsg-trick:active{transform:scale(.93)}
.fcsg-trick.is-cd{opacity:.42}
.fcsg-trick.is-ready{animation:fcsgReady .42s cubic-bezier(.2,.7,.1,1)}
.fcsg-trick.is-pulse::after{animation:fcsgRing 1.1s ease-out 2}
.fcsg-trick.is-pulse{animation:fcsgReady .55s cubic-bezier(.2,.7,.1,1) 2}
@keyframes fcsgReady{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:none}}
@keyframes fcsgRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.fcsg-full .fcsg-trick{right:max(5.5%,calc(env(safe-area-inset-right) + 12px));bottom:calc(max(6.5%,env(safe-area-inset-bottom)) + 4.4em)}

/* Selbst-Impuls: Hinweis über dem Autopilot-Flug */
.fcsg-hint{position:absolute;left:50%;top:25%;z-index:3;margin:0;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;gap:.7em;width:max-content;max-width:86%;padding:.75em 1.15em;border-radius:999px;background:rgba(4,9,18,.66);border:1px solid rgba(63,224,255,.5);box-shadow:0 0 30px -6px rgba(63,224,255,.5);font:600 clamp(11px,1.35cqw,14px)/1.25 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-align:center;animation:fcsgFloat 2.6s ease-in-out infinite}
.fcsg-hint::before{content:"";flex:none;width:.65em;height:.65em;border-radius:50%;background:var(--sig,#3fe0ff);animation:fcsgPing 1.6s ease-out infinite}
.fcsg:not(.is-demo) .fcsg-hint{display:none}
@keyframes fcsgFloat{50%{transform:translate(-50%,calc(-50% - 6px))}}
@keyframes fcsgPing{0%{box-shadow:0 0 0 0 rgba(63,224,255,.75)}100%{box-shadow:0 0 0 12px rgba(63,224,255,0)}}

/* ---------- Tafeln: Start, Pause, Ergebnis ---------- */
.fcsg-ui{position:absolute;inset:0;z-index:4;display:flex;padding:clamp(16px,4.4cqw,46px)}
.fcsg-ui-start{align-items:flex-end;justify-content:flex-start;background:linear-gradient(0deg,rgba(4,9,18,.94) 0%,rgba(4,9,18,.6) 32%,rgba(4,9,18,0) 60%)}
.fcsg-ui-mid{align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(90% 90% at 50% 50%,rgba(4,9,18,.76),rgba(4,9,18,.92));cursor:default;-webkit-user-select:text;user-select:text}
.fcsg-ui-mid>.fcsg-card{margin:auto}
.fcsg-card{display:grid;gap:clamp(8px,1.3cqw,14px);width:100%;max-width:560px;animation:fcsgIn .7s cubic-bezier(.2,.7,.1,1) both}
.fcsg-card-c{justify-items:center;text-align:center;max-width:520px}
@keyframes fcsgIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fcsg-kick{margin:0;display:inline-flex;align-items:center;gap:10px;font:600 clamp(10px,1.15cqw,12px)/1.2 var(--hud,monospace);letter-spacing:.3em;text-transform:uppercase;color:var(--sig,#3fe0ff)}
.fcsg-kick::before{content:"";flex:none;width:22px;height:2px;background:currentColor;box-shadow:0 0 12px currentColor}
.fcsg-title{margin:0;font:400 clamp(46px,9.5cqw,108px)/.86 var(--big,"Bebas Neue",sans-serif);text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:0 0 34px rgba(63,224,255,.4)}
.fcsg-txt{margin:0;max-width:46ch;font:400 clamp(15px,1.55cqw,17px)/1.5 var(--body,"Inter",system-ui,sans-serif);color:#c9d8ec}
.fcsg-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.fcsg-row-c{justify-content:center}
.fcsg .btn{max-width:100%;white-space:normal;text-align:left;line-height:1.2;font-size:clamp(12px,1.25cqw,14px);letter-spacing:.12em;padding:clamp(13px,1.4cqw,16px) clamp(18px,2.2cqw,24px);min-height:44px;box-shadow:0 0 0 0 rgba(63,224,255,.5)}
.fcsg .btn svg{flex:none}
.fcsg .fcsg-go{animation:fcsgGlow 2.2s ease-in-out infinite}
@keyframes fcsgGlow{50%{box-shadow:0 0 34px -2px rgba(63,224,255,.65)}}
.fcsg:not(.is-mob) .fcsg-tilt,.fcsg:not(.is-mob) .fcsg-mob,.fcsg.is-mob .fcsg-pc,.fcsg:not(.can-tilt) .fcsg-tilt{display:none}
.fcsg.is-mob .fcsg-ui-start .fcsg-row{gap:10px 14px}
.fcsg.is-mob .fcsg-ui-start .btn{flex:1 1 210px;justify-content:center;text-align:center}
.fcsg-best{font:600 12px/1.3 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#9db1cc)}
.fcsg-best b{color:#fff;font-weight:700}
.fcsg-opts{margin-top:0;gap:8px 10px}
.fcsg:not(.is-mob) .fcsg-opts,.fcsg:not(.m-tilt) .fcsg-only-t{display:none}
.fcsg-score{margin:0;display:grid;justify-items:center;gap:2px}
.fcsg-score b{font:400 clamp(64px,13cqw,150px)/.85 var(--big,"Bebas Neue",sans-serif);color:#fff;text-shadow:0 0 40px rgba(63,224,255,.45)}
.fcsg-score span{font:600 12px/1 var(--hud,monospace);letter-spacing:.3em;text-transform:uppercase;color:var(--mute,#9db1cc)}
.fcsg-new{margin:0;display:inline-flex;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,176,32,.6);background:rgba(255,176,32,.1);color:var(--amber,#ffb020);font:700 12px/1 var(--hud,monospace);letter-spacing:.16em;text-transform:uppercase}
.fcsg-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(500px,100%);margin:2px 0 0}
.fcsg-goal{margin:0;max-width:46ch;font:400 15px/1.45 var(--body,"Inter",system-ui,sans-serif);color:#c9d8ec}
.fcsg-goal:empty{display:none}
.fcsg-stats div{min-width:0;padding:10px 4px;border:1px solid var(--line-hi,rgba(158,196,255,.38));border-radius:12px;background:rgba(255,255,255,.03)}
.fcsg-stats dt{font:600 10px/1.2 var(--hud,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--mute,#9db1cc)}
.fcsg-stats dd{margin:5px 0 0;font:400 clamp(24px,3.4cqw,36px)/1 var(--big,"Bebas Neue",sans-serif);color:#fff}
.fcsg-link{font:600 clamp(12px,1.25cqw,14px)/1.35 var(--hud,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--sig,#3fe0ff);text-decoration:underline;text-decoration-color:rgba(63,224,255,.45);text-underline-offset:5px;transition:color .25s}
.fcsg-link:hover{color:#fff;text-decoration-color:currentColor}

/* Ergebnis: links Werte, rechts Name (auf breiter Bühne), sonst untereinander */
.fcsg-card-over{max-width:520px}
.fcsg-ov-l,.fcsg-ov-r{display:grid;gap:clamp(8px,1.3cqw,14px);justify-items:center;width:100%;min-width:0}
.fcsg-form{display:grid;gap:7px;width:min(440px,100%);text-align:left}
.fcsg-lab{font:600 12px/1.2 var(--hud,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--sig,#3fe0ff)}
.fcsg-frow{display:flex;gap:8px;min-width:0}
.fcsg-in{flex:1 1 auto;min-width:0;height:48px;margin:0;padding:0 14px;border-radius:12px;border:1px solid var(--line-hi,rgba(158,196,255,.38));background:rgba(255,255,255,.07);color:#fff;font:600 16px/1 var(--body,"Inter",system-ui,sans-serif);letter-spacing:.01em;-webkit-user-select:text;user-select:text}
.fcsg-in::placeholder{color:#8ea3bf;font-weight:400}
.fcsg-in:focus{outline:2px solid var(--sig,#3fe0ff);outline-offset:1px;border-color:transparent;background:rgba(63,224,255,.08)}
.fcsg .fcsg-send{flex:none;justify-content:center}
.fcsg-note{margin:0;font:400 15px/1.45 var(--body,"Inter",system-ui,sans-serif);color:#b9c9df}
.fcsg-note a{color:var(--sig,#3fe0ff);text-underline-offset:3px}
.fcsg-fmsg{margin:0;font:600 15px/1.4 var(--body,"Inter",system-ui,sans-serif);color:var(--amber,#ffb020)}
.fcsg-fmsg:empty{display:none}
.fcsg-placed{margin:0;max-width:44ch;font:600 15px/1.5 var(--body,"Inter",system-ui,sans-serif);color:#fff}
.fcsg-tolist{display:inline;padding:0;margin:0;border:0;background:none;color:var(--sig,#3fe0ff);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:24px}
@container (min-width:700px){
  .fcsg-card-over{max-width:880px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(24px,4cqw,52px);align-items:center}
  .fcsg-ov-r{justify-items:start;text-align:left}
  .fcsg-ov-r .fcsg-row-c{justify-content:flex-start}
  .fcsg-card-over .fcsg-score b{font-size:clamp(64px,10cqw,130px)}
}

/* Kleine Bühne (Handy): kompakter */
@container (max-width:520px){
  .fcsg-ui{padding:16px}
  .fcsg-card{gap:9px}
  .fcsg-stats{gap:6px}
  .fcsg-stats div{padding:7px 2px}
  .fcsg-stats dt{font-size:9px;letter-spacing:.04em}
  .fcsg-stats dd{font-size:22px}
  .fcsg-ui-mid .fcsg-txt,.fcsg-ui-start .fcsg-txt{display:none}
  .fcsg-ui-start{background:linear-gradient(0deg,rgba(4,9,18,.94) 0%,rgba(4,9,18,.55) 30%,rgba(4,9,18,0) 50%)}
  .fcsg-ui-start .fcsg-title{font-size:clamp(40px,12cqw,52px)}
  .fcsg-score b{font-size:64px}
  .fcsg-card-over .fcsg-link,.fcsg-card-over .fcsg-new{display:none}
  .fcsg-frow{flex-wrap:wrap}
  .fcsg-card-over:has(.fcsg-form:not([hidden])) .fcsg-goal{display:none}
  .fcsg-frow .fcsg-in,.fcsg .fcsg-frow .fcsg-send{flex:1 1 100%}
  .fcsg-hint{top:24%}
  .fcsg-tl,.fcsg-bl{left:6.5%}
  .fcsg-tr,.fcsg-br{right:6.5%}
}
/* Im Vollbild am Handy ist Platz für Text */
.fcsg-full .fcsg-ui-mid .fcsg-txt{display:block}

/* Flache Bühne (Handy quer): Starttafel ohne Text, Titel kleiner */
@media (max-height:520px) and (orientation:landscape){
  .fcsg-ui{padding:14px 22px}
  .fcsg-ui-start .fcsg-txt,.fcsg-ui-mid .fcsg-txt{display:none}
  .fcsg-ui-start .fcsg-title{font-size:clamp(38px,6.5cqw,60px)}
  .fcsg-ui-start{background:linear-gradient(0deg,rgba(4,9,18,.94) 0%,rgba(4,9,18,.55) 34%,rgba(4,9,18,0) 58%)}
  .fcsg-score b{font-size:clamp(48px,8cqw,80px)}
  .fcsg-new,.fcsg-card-over .fcsg-link{display:none}
  .fcsg-card-over .fcsg-stats{display:none}
  .fcsg-hint{top:22%}
  .fcsg-ctl{gap:6px}
  .fcsg-trick,.fcsg-full .fcsg-trick{bottom:max(6.5%,env(safe-area-inset-bottom));right:calc(max(5.5%,env(safe-area-inset-right)) + 7.2em)}
  .fcsg-goal{display:none}
}

/* ---------- Leiste unter dem Spiel ---------- */
.fcsg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.fcsg-keys{margin:0;max-width:70ch;font:500 12px/1.5 var(--hud,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mute,#9db1cc)}
.fcsg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.fcsg-mini{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 15px;border-radius:999px;border:1px solid var(--line-hi,rgba(158,196,255,.38));background:rgba(255,255,255,.03);color:var(--osd,#eaf4ff);font:600 12px/1 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.fcsg-mini:hover{border-color:var(--sig,#3fe0ff);background:rgba(63,224,255,.1)}
.fcsg-mini:disabled{opacity:.5;cursor:not-allowed}
.fcsg-mini[aria-pressed="true"]{border-color:var(--sig,#3fe0ff);color:var(--sig,#3fe0ff);background:rgba(63,224,255,.1)}
.fcsg-mini.fcsg-snd .w{opacity:.25;transition:opacity .25s}
.fcsg-mini.fcsg-snd.on{border-color:var(--sig,#3fe0ff);color:var(--sig,#3fe0ff)}
.fcsg-mini.fcsg-snd.on .w{opacity:1}
.fcsg-mini.fcsg-mus.on{border-color:var(--sig,#3fe0ff);color:var(--sig,#3fe0ff)}
.fcsg-snd-start{background:rgba(4,9,18,.55)}
.fcsg-ui-start .fcsg-card{max-width:680px}
.fcsg-sr{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Bestenliste ---------- */
.fcsb{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(18px,2vw,22px) clamp(14px,1.6vw,18px) 16px;border-radius:24px;border:1px solid var(--line-hi,rgba(158,196,255,.38));background:linear-gradient(180deg,rgba(16,36,74,.62),rgba(4,9,18,.82));box-shadow:0 40px 90px -50px rgba(63,224,255,.4)}
.fcsb-head{display:grid;gap:6px}
.fcsb-title{margin:0;font:400 clamp(30px,3vw,38px)/.95 var(--big,"Bebas Neue",sans-serif);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.fcsb-src{margin:0;display:inline-flex;align-items:center;gap:8px;font:600 12px/1.3 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#9db1cc)}
.fcsb-src::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.fcsb-src.is-online{color:var(--green,#3ee08a)}
.fcsb-src.is-offline{color:var(--amber,#ffb020)}
.fcsb-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:none}
.fcsb-row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;padding:5px 12px 5px 10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid transparent}
.fcsb-rk{font:700 13px/1 var(--hud,monospace);letter-spacing:.06em;color:var(--mute,#9db1cc)}
.fcsb-who{display:grid;gap:2px;min-width:0}
.fcsb-n{display:flex;align-items:center;min-width:0;font:600 15px/1.2 var(--body,"Inter",system-ui,sans-serif);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcsb-meta{display:flex;align-items:center;gap:6px;font:500 11px/1.3 var(--hud,monospace);letter-spacing:.06em;color:var(--mute,#9db1cc);white-space:nowrap;overflow:hidden}
.fcsb-dev{display:inline-flex;color:#c9d8ec}
.fcsb-s{font:400 26px/1 var(--big,"Bebas Neue",sans-serif);letter-spacing:.03em;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.fcsb-row.is-p1{background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(255,176,32,.02)) border-box}
.fcsb-row.is-p1 .fcsb-rk,.fcsb-row.is-p1 .fcsb-s{color:var(--amber,#ffb020)}
.fcsb-row.is-p2 .fcsb-rk,.fcsb-row.is-p3 .fcsb-rk{color:#fff}
.fcsb-row.is-me{border-color:var(--sig,#3fe0ff);background:rgba(63,224,255,.1);box-shadow:0 0 26px -10px rgba(63,224,255,.8)}
.fcsb-du{flex:none;margin-left:8px;padding:3px 7px;border-radius:999px;background:var(--sig,#3fe0ff);color:var(--night,#040912);font:700 10px/1 var(--hud,monospace);letter-spacing:.12em;text-transform:uppercase;font-style:normal}
.fcsb-empty{padding:16px 14px;border-radius:12px;border:1px dashed var(--line-hi,rgba(158,196,255,.38));font:400 15px/1.5 var(--body,"Inter",system-ui,sans-serif);color:#c9d8ec}
.fcsb-me{display:grid;gap:6px;font:600 12px/1.3 var(--hud,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--sig,#3fe0ff)}
.fcsb-foot{display:grid;gap:8px;margin-top:auto;padding-top:4px}
.fcsb-load{justify-self:start}
.fcsb-fine{margin:0;font:400 13px/1.45 var(--body,"Inter",system-ui,sans-serif);color:var(--mute,#9db1cc)}
/* Selbst-Impuls: Liste fliegt beim Erscheinen ein und zählt hoch */
.fcsb.is-in .fcsb-row{animation:fcsbIn .6s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes fcsbIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.fcsb-row.is-new::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--sig,#3fe0ff);pointer-events:none;animation:fcsbPing 1.3s ease-out 2}
@keyframes fcsbPing{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.03,1.3)}}

@media (prefers-reduced-motion:reduce){
  .fcsg-hint,.fcsg-hint::before,.fcsg .fcsg-go,.fcsg-card{animation:none!important}
  .fcsg-warn.on{animation:none!important}
  .fcsg-toast{transition:none}
  .fcsb.is-in .fcsb-row,.fcsb-row.is-new::after{animation:none!important}
  .fcsg-trick,.fcsg-trick::after,.fcsg .is-glow{animation:none!important}
  .fcsg-prog i{transition:none}
}