/* ============================================================
   TURBO KART 84 — Oberflaeche im Stil eines Geraets:
   schwarze Platten in geschraubten Metallrahmen, Pixelschrift,
   Bernstein und Tuerkis als einzige helle Toene.

   Regeln:
   · kein Verlauf, keine weiche Ecke, kein weicher Schatten
   · Rahmen haben oben eine helle und unten eine dunkle Kante
   · Farbe bedeutet etwas (Seltenheit, Zustand) — nie Dekoration
   ============================================================ */

:root{
  --bg:        #0B0B10;
  --panel:     #16161E;
  --panel2:    #1F1F2A;
  --panel3:    #2A2A38;
  --frame:     #3A3A4A;
  --frame-hi:  #55556A;
  --frame-lo:  #14141C;
  --led:       #3FD0E0;
  --amber:     #F5A623;
  --gold:      #FFCE4A;
  --green:     #5FD07F;
  --red:       #C0392B;
  --blue:      #4A90D9;
  --purple:    #9B59D0;
  --white:     #E8E8F0;
  --grey:      #7A7A8C;
  --grey-dk:   #4A4A5A;

  --ff-pixel: "Press Start 2P", "Courier New", monospace;
  --ff-ui: "Pixelify Sans", "Press Start 2P", "Courier New", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    var(--bg);
  color: var(--white);
  font-family: var(--ff-ui);
  font-size: 19px;
  line-height: 1.45;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

img, canvas{ image-rendering: pixelated; }

/* ---------- Bildschirme ---------- */
.screen{ display:none; }
.screen.is-active{
  display:block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 20px 56px;
}
.screen-plain.is-active{ max-width:none; padding:0; }

/* ============================================================
   PLATTE MIT METALLRAHMEN
   Die Schrauben sind vier kleine Punkte als Hintergrundbild —
   so bleibt es eine einzige Box ohne Zusatzelemente.
   ============================================================ */
.panel{
  position: relative;
  background: var(--panel);
  border: 4px solid var(--frame);
  border-top-color: var(--frame-hi);
  border-left-color: var(--frame-hi);
  border-bottom-color: var(--frame-lo);
  border-right-color: var(--frame-lo);
  box-shadow:
    inset 0 0 0 2px #0E0E14,
    inset 0 0 0 3px var(--panel),
    0 0 0 2px #05050A;
  padding: 18px;
  background-image:
    radial-gradient(circle, var(--frame-hi) 1.5px, transparent 2px),
    radial-gradient(circle, var(--frame-hi) 1.5px, transparent 2px),
    radial-gradient(circle, var(--frame-hi) 1.5px, transparent 2px),
    radial-gradient(circle, var(--frame-hi) 1.5px, transparent 2px);
  background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
}

/* Leuchtpunkte oben links, wie am Vorbild */
.panel::before{
  content:"";
  position:absolute; top:7px; left:22px;
  width:22px; height:3px;
  background:
    linear-gradient(90deg, var(--led) 0 3px, transparent 3px 7px,
                           var(--led) 7px 10px, transparent 10px 14px,
                           var(--led) 14px 17px, transparent 17px);
  opacity:.85;
}

.panel-title{
  font-family: var(--ff-pixel);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--amber);
  text-shadow: 2px 2px 0 #000;
  margin: 2px 0 14px;
}
.panel-sub{
  font-size: 17px;
  color: var(--led);
  letter-spacing: .06em;
  margin: -10px 0 14px;
}

/* ---------- Ueberschriften ---------- */
h1,h2,h3{ font-family: var(--ff-pixel); font-weight:400; margin:0; }
h1.logo{
  font-size: clamp(20px, 4.6vw, 40px);
  color: var(--gold);
  text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--red);
  letter-spacing: .08em;
  line-height:1.3;
  margin-bottom: 14px;
}
h2{ font-size: 17px; letter-spacing:.12em; color: var(--amber); text-shadow: 2px 2px 0 #000; }
h3{ font-size: 13px; letter-spacing:.1em; color: var(--white); }

.eyebrow{
  font-family: var(--ff-pixel);
  font-size: 10px; letter-spacing:.2em;
  color: var(--grey); margin:0 0 8px;
}

/* ---------- Knoepfe ---------- */
.btn{
  font-family: var(--ff-pixel);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--white);
  background: var(--panel3);
  border: 3px solid var(--frame);
  border-top-color: var(--frame-hi);
  border-left-color: var(--frame-hi);
  border-bottom-color: var(--frame-lo);
  border-right-color: var(--frame-lo);
  padding: 12px 18px;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
}
.btn:hover{ background: #333344; }
.btn:active{
  border-top-color: var(--frame-lo);
  border-left-color: var(--frame-lo);
  border-bottom-color: var(--frame-hi);
  border-right-color: var(--frame-hi);
  transform: translate(1px, 1px);
}
.btn:focus-visible{ outline: 2px solid var(--led); outline-offset: 2px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn[disabled]:active{ transform:none; }

.btn-primary{ background: var(--red); border-color:#8E2A1E; border-top-color:#E05A48; border-left-color:#E05A48; }
.btn-primary:hover{ background:#D4432F; }
.btn-go{ background: var(--green); color:#0B1A10; border-color:#3A8A50; border-top-color:#9AECB4; border-left-color:#9AECB4; text-shadow:none; }
.btn-go:hover{ background:#71E092; }
.btn-ghost{ background:transparent; border-color: var(--frame-lo); color: var(--grey); }
.btn-ghost:hover{ background: var(--panel2); color: var(--white); }
.btn-big{ font-size: 15px; padding: 16px 22px; width:100%; }
.btn-tiny{ font-size: 9px; padding: 7px 10px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Reiter ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tab{
  font-family: var(--ff-pixel);
  font-size: 11px; letter-spacing:.1em;
  color: var(--grey);
  background: var(--panel2);
  border: 2px solid var(--frame-lo);
  padding: 9px 13px;
  cursor: pointer;
}
.tab:hover{ color: var(--white); }
.tab[aria-selected="true"]{
  background: var(--red);
  color: #fff;
  border-color: #8E2A1E;
  border-top-color: #E05A48;
  text-shadow: 1px 1px 0 #000;
}

/* ---------- Seltenheit ---------- */
.rar{
  font-family: var(--ff-pixel);
  font-size: 9px; letter-spacing:.14em;
  padding: 4px 7px;
  border: 2px solid currentColor;
  display:inline-block;
}
.rar-common{ color:#8A8A9A; }
.rar-uncommon{ color: var(--green); }
.rar-rare{ color: var(--blue); }
.rar-epic{ color: var(--purple); }
.rar-legendary{ color: var(--amber); }

/* ---------- Werteanzeige ---------- */
.stat-strip{ display:flex; gap:22px; margin:18px 0; padding:0; flex-wrap:wrap; }
.stat-strip div{ margin:0; }
.stat-strip dt{
  font-family: var(--ff-pixel); font-size:9px; letter-spacing:.16em;
  color: var(--grey); margin-bottom:6px;
}
.stat-strip dd{
  font-family: var(--ff-pixel); font-size:18px; margin:0; color: var(--led);
  text-shadow: 2px 2px 0 #000;
}

.bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.bar h2{ flex:1; text-align:center; }
.purse{
  font-family: var(--ff-pixel); font-size:11px; color: var(--grey);
  white-space:nowrap;
}
.purse strong{ color: var(--gold); }

@media (max-width: 760px){
  body{ font-size:17px; }
  .screen.is-active{ padding:16px 12px 40px; }
}

/* ============================================================
   AUFBAU DER BILDSCHIRME
   ============================================================ */
.title-wrap{ display:grid; grid-template-columns: 250px 1fr; gap:22px; align-items:start; }
.title-card{ text-align:center; }
.driver-name{
  font-family: var(--ff-pixel); font-size:12px; color: var(--led);
  letter-spacing:.12em; margin:12px 0 0;
}
.lede{ color: var(--grey); letter-spacing:.04em; max-width:46ch; margin:0 0 18px; }
.hint{ color: var(--grey); font-size:15px; letter-spacing:.04em; margin:20px 0 14px; }
.key{
  font-family: var(--ff-pixel); font-size:9px; color: var(--white);
  background: var(--panel3); border:2px solid var(--frame-lo);
  padding:3px 6px; margin:0 2px;
}

.mount{ display:flex; justify-content:center; }
.mount canvas{ display:block; image-rendering: pixelated; }
.mount.big{ min-height: 180px; align-items:center; }

.split{ display:grid; grid-template-columns: 330px 1fr; gap:18px; align-items:start; }

.field{ display:block; margin:14px 0 10px; }
.field span{
  font-family: var(--ff-pixel); font-size:9px; letter-spacing:.14em;
  color: var(--grey); display:block; margin-bottom:6px;
}
.field input{
  width:100%; font-family: var(--ff-pixel); font-size:12px;
  color: var(--led); background: var(--bg);
  border:2px solid var(--frame-lo); padding:10px;
}
.field input:focus-visible{ outline:2px solid var(--led); outline-offset:1px; }

/* ---------- Auswahlkacheln ---------- */
.opts{ display:grid; grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); gap:7px; margin-bottom:16px; }
.opts-color{ grid-template-columns: repeat(auto-fill, minmax(44px,1fr)); }
.opt{
  background: var(--panel2); border:2px solid var(--frame-lo);
  padding:6px 4px; cursor:pointer; display:grid; place-items:center; gap:4px;
}
.opt:hover{ border-color: var(--frame); }
.opt img{ display:block; image-rendering: pixelated; }
.opt small{ font-family: var(--ff-pixel); font-size:7px; color: var(--grey); letter-spacing:.06em; }
.opt.is-on{ border-color: var(--amber); background:#2A2216; }
.opt.is-on small{ color: var(--amber); }
.opt-color{ aspect-ratio:1; min-height:42px; }
.opt-color.is-on{ box-shadow: inset 0 0 0 3px #000, 0 0 0 2px var(--amber); }

/* ---------- Lackierung ---------- */
.swatches{ display:flex; flex-wrap:wrap; gap:6px; }
.swatch{
  width:34px; height:26px; border:2px solid var(--frame-lo); cursor:pointer;
}
.swatch.is-on{ border-color: var(--amber); box-shadow: inset 0 0 0 2px #000; }

/* ---------- Teileliste ---------- */
.part{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  background: var(--panel2); border:2px solid var(--frame-lo);
  padding:12px; margin-bottom:8px;
}
.part canvas{ display:block; image-rendering: pixelated; }
.part-desc{ font-size:15px; color: var(--grey); letter-spacing:.04em; }
.part-buy{ display:grid; gap:6px; justify-items:end; }
.price{ font-family: var(--ff-pixel); font-size:10px; color: var(--gold); }
.maxed{ font-family: var(--ff-pixel); font-size:9px; color: var(--green); }
.pips{ display:flex; gap:3px; margin-top:7px; }
.pip{ width:22px; height:9px; background: var(--frame-lo); border:1px solid var(--frame); }
.pip.on{ background: var(--green); border-color:#9AECB4; }

/* ---------- Startfeld und Ergebnis ---------- */
.track-map{ display:block; width:100%; height:auto; image-rendering:pixelated; }
.startlist, .resultlist{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:5px; }
.startlist li, .resultlist li{
  display:grid; grid-template-columns:26px 32px 1fr auto; gap:10px; align-items:center;
  background: var(--panel2); border:2px solid var(--frame-lo); padding:5px 9px;
}
.startlist li.me, .resultlist li.me{ border-color: var(--amber); background:#2A2216; }
.startlist .num, .resultlist .num{
  font-family: var(--ff-pixel); font-size:11px; color: var(--grey);
}
.startlist li.me .num, .resultlist li.me .num{ color: var(--amber); }
.startlist img, .resultlist img{ display:block; image-rendering:pixelated; }
.who{ font-family: var(--ff-pixel); font-size:10px; letter-spacing:.08em; }
.pow{ font-family: var(--ff-pixel); font-size:9px; color: var(--led); }
.note{
  font-size:15px; color: var(--grey); letter-spacing:.04em;
  border-left:3px solid var(--amber); padding-left:10px; margin:0 0 14px;
}
.results{ max-width:620px; margin:4vh auto 0; }
.payout{ display:grid; gap:4px; margin:14px 0 18px; }
.payout div{
  display:flex; justify-content:space-between; gap:12px;
  font-family: var(--ff-pixel); font-size:10px; color: var(--grey);
  border-bottom:1px solid var(--frame-lo); padding:8px 0;
}
.payout .sum{ color: var(--gold); font-size:12px; border-bottom:none; }

/* ============================================================
   RENNEN
   ============================================================ */
.race-stage{
  position:fixed; inset:0; width:100vw; height:100vh;
  background:#07070C; overflow:hidden;
}
.race-mount{ position:absolute; inset:0; display:grid; place-items:center; }
.race-mount canvas{
  width:100%; height:100%; object-fit:contain; image-rendering:pixelated;
}
.hud{ position:absolute; inset:0; pointer-events:none; }
.hud-tl{ position:absolute; top:14px; left:14px; display:grid; gap:6px; }
.hud-tr{ position:absolute; top:14px; right:14px; display:grid; gap:6px; justify-items:end; }
.hud-bl{ position:absolute; bottom:14px; left:14px; }
.hud-br{ position:absolute; bottom:14px; right:14px; }

.gauge{
  background: rgba(11,11,16,.82);
  border:2px solid var(--frame);
  border-top-color: var(--frame-hi);
  border-bottom-color: var(--frame-lo);
  padding:5px 9px;
  display:flex; align-items:baseline; gap:7px;
}
.gauge span{ font-family: var(--ff-pixel); font-size:8px; letter-spacing:.14em; color: var(--grey); }
.gauge b{ font-family: var(--ff-pixel); font-size:15px; color: var(--led); }
.gauge.wide{ min-width:150px; justify-content:space-between; }
.speedo b{ font-size:26px; color: var(--gold); }
.speedo span{ font-size:9px; }

.minimap{
  background: rgba(11,11,16,.82);
  border:2px solid var(--frame);
  image-rendering:pixelated;
  width:104px; height:104px;
}
.portrait-chip{
  background: rgba(11,11,16,.82);
  border:2px solid var(--frame);
  padding:3px;
}
.hud-center{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family: var(--ff-pixel);
  font-size: clamp(28px, 7vw, 68px);
  color: var(--gold);
  text-shadow: 4px 4px 0 #000, 8px 8px 0 var(--red);
  letter-spacing:.1em;
}
.hud-quit{ position:absolute; bottom:16px; left:130px; pointer-events:auto; }

@media (max-width: 860px){
  .title-wrap, .split{ grid-template-columns:1fr; }
  .part{ grid-template-columns:auto 1fr; }
  .part-buy{ grid-column:1 / -1; justify-items:stretch; }
  .hud-quit{ left:14px; bottom:96px; }
}

/* ============================================================
   TITELBILDSCHIRM MIT DEMORENNEN
   Hinter dem Titel laeuft ein Rennen ohne Spieler — so machten
   es Spielautomaten, wenn niemand davorstand.
   ============================================================ */
.title-stage{ position:fixed; inset:0; overflow:hidden; background: var(--bg); }

.attract{ position:absolute; inset:0; display:grid; place-items:center; }
.attract canvas{ display:block; image-rendering:pixelated; }

/* Der Schleier nimmt dem Rennen Kontrast, damit die Schrift traegt */
.attract-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(11,11,16,.18) 0%, rgba(11,11,16,.86) 80%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    rgba(11,11,16,.42);
}

.title-inner{
  position:absolute; inset:0; overflow:auto;
  display:grid; place-items:center; padding:28px 20px;
}
.title-col{ width:100%; max-width:760px; text-align:center; }

.title-eyebrow{
  font-family: var(--ff-pixel); font-size:10px; letter-spacing:.26em;
  color: var(--led); margin:0 0 14px;
  text-shadow: 2px 2px 0 #000;
}
.title-col .logo{
  font-size: clamp(26px, 6.4vw, 58px);
  line-height:1.24;
  margin: 0 0 22px;
  text-shadow: 4px 4px 0 #000, 8px 8px 0 var(--red);
}

.title-cols{
  display:grid; grid-template-columns: 220px 1fr; gap:18px;
  align-items:start; text-align:left; margin-bottom:20px;
}
.title-card{ text-align:center; background: rgba(22,22,30,.92); }
/* Eigene Platte, damit die Texte nicht auf der fahrenden Strecke liegen */
.title-menu{
  display:grid; gap:12px; align-content:start;
  background: rgba(20,20,28,.94);
  border:3px solid var(--frame);
  border-top-color: var(--frame-hi);
  border-left-color: var(--frame-hi);
  border-bottom-color: var(--frame-lo);
  border-right-color: var(--frame-lo);
  padding:16px;
}
.title-menu .lede{ color:#B9B9CE; }
.title-menu .btn-row{ gap:10px; }
.btn-wide{ width:100%; font-size:15px; padding:16px 20px; }
.title-menu .stat-strip{ margin:4px 0 0; gap:18px; }
.title-menu .lede{ margin:0; font-size:16px; }

/* Blinkender Hinweis, hart an und aus statt weich ueberblendet */
.blink{
  font-family: var(--ff-pixel); font-size:12px; letter-spacing:.14em;
  color: var(--gold); text-shadow: 2px 2px 0 #000;
  margin: 4px 0 18px;
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .blink{ animation:none; }
}

.title-col .hint{
  margin: 0 0 14px;
  display:inline-block;
  background: rgba(11,11,16,.75);
  padding:6px 12px;
}
.blink{ display:inline-block; background: rgba(11,11,16,.6); padding:6px 14px; }

@media (max-width: 720px){
  .title-cols{ grid-template-columns:1fr; }
  .title-card{ max-width:240px; margin:0 auto; }
}


/* ============================================================
   BEDIENFELD FUER FINGER
   Nur auf Geraeten mit Beruehrungseingabe sichtbar. Die Flaechen
   sind bewusst gross — auf dem Handy trifft niemand kleine Ziele.
   ============================================================ */
.pad{ position:absolute; inset:0; pointer-events:none; }
.pad-left{ position:absolute; left:12px; bottom:12px; display:flex; gap:10px; }
.pad-right{
  position:absolute; right:12px; bottom:12px;
  display:grid; grid-template-columns:auto auto; gap:10px; align-items:end;
}
.padbtn{
  pointer-events:auto;
  font-family: var(--ff-pixel); font-size:11px; letter-spacing:.08em;
  color: var(--white);
  background: rgba(30,30,42,.82);
  border:3px solid var(--frame);
  border-top-color: var(--frame-hi);
  border-left-color: var(--frame-hi);
  border-bottom-color: var(--frame-lo);
  border-right-color: var(--frame-lo);
  width:76px; height:76px;
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.padbtn.small{ width:76px; height:52px; font-size:9px; }
.padbtn.gas{
  width:104px; height:104px; font-size:14px;
  background: rgba(58,150,84,.85); color:#0B1A10;
  border-color:#3A8A50; border-top-color:#9AECB4; border-left-color:#9AECB4;
  grid-row: span 2;
}
.padbtn:active, .padbtn.on{
  border-top-color: var(--frame-lo); border-left-color: var(--frame-lo);
  border-bottom-color: var(--frame-hi); border-right-color: var(--frame-hi);
  filter: brightness(1.3);
}

@media (max-width: 560px){
  .padbtn{ width:62px; height:62px; opacity:.88; }
  .padbtn.small{ width:62px; height:44px; }
  .padbtn.gas{ width:84px; height:84px; }

  /* Auf dem Handy sind die unteren Ecken von den Knoepfen belegt:
     Tacho nach links oben, Karte und Fahrerkachel weg. */
  .hud-br{ right:auto; bottom:auto; left:12px; top:112px; }
  .hud-tr .minimap{ display:none; }
  .hud-bl{ display:none; }
  .hud-quit{ left:12px; right:auto; top:174px; bottom:auto; }
  .gauge.wide{ min-width:0; }
}

/* ============================================================
   ANMELDUNG
   Eine einzelne Platte in der Bildmitte. Kein Demorennen im
   Hintergrund: Die Strecke zu bauen kostet eine Sekunde, und die
   soll niemand bezahlen, bevor er ueberhaupt drin ist.
   ============================================================ */
.auth-stage{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 30px 16px 40px;
}
.auth-box{ width:100%; max-width: 440px; text-align:center; }
h1.logo-klein{
  font-size: clamp(22px, 5.2vw, 38px);
  line-height:1.24;
  margin: 0 0 20px;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--red);
}
.auth-panel{ text-align:left; }
.auth-panel .tabs{ justify-content:center; }
.auth-panel .panel-title{ text-align:center; }
.auth-panel .btn-wide{ width:100%; margin-top:6px; }
.auth-panel .note{ margin-top:14px; margin-bottom:0; }
.auth-panel .note a, .auth-fuss a, .sync-warn a{
  color: var(--led); text-decoration:none; border-bottom:1px solid var(--grey-dk);
}
.auth-panel .note a:hover, .auth-fuss a:hover, .sync-warn a:hover{ color: var(--gold); }

/* Meldungen. Bernstein statt Rot: Die meisten sind Hinweise
   ("Mail ist unterwegs"), keine Fehler. */
.auth-meldung{
  font-family: var(--ff-pixel); font-size:10px; line-height:1.7;
  letter-spacing:.06em; color: var(--gold);
  background: rgba(192,57,43,.14);
  border-left:3px solid var(--amber);
  padding:10px; margin:0 0 14px;
}
.auth-status{
  font-family: var(--ff-pixel); font-size:9px; letter-spacing:.12em;
  color: var(--grey); min-height:12px; margin:0 0 10px; text-align:center;
}
#screen-auth button[disabled]{ opacity:.45; cursor:progress; }

.check{ display:flex; gap:9px; align-items:flex-start; margin:14px 0 4px; cursor:pointer; }
.check input{ margin-top:3px; accent-color: var(--led); width:16px; height:16px; flex:none; }
.check span{ font-size:14px; color: var(--grey); letter-spacing:.03em; line-height:1.5; }
.check a{ color: var(--led); }

.auth-fuss{
  font-family: var(--ff-pixel); font-size:8px; letter-spacing:.14em;
  color: var(--grey-dk); margin:18px 0 0;
}

/* ---------- Kontozeile auf dem Titelbild ---------- */
.konto-leiste{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  justify-content:center; margin-top:16px;
}
.konto-leiste #kontoMail{
  font-family: var(--ff-pixel); font-size:9px; letter-spacing:.08em;
  color: var(--grey); margin-right:4px;
}
.sync-warn{
  font-family: var(--ff-pixel); font-size:9px; line-height:1.8;
  letter-spacing:.06em; color: var(--gold);
  background: rgba(192,57,43,.22);
  border:2px solid var(--red); padding:10px; margin:14px auto 0; max-width:560px;
}

@media (max-width: 560px){
  .auth-stage{ padding: 18px 12px 30px; }
  .auth-panel .tabs .tab{ flex:1; text-align:center; padding:9px 6px; }
}

/* ---------- Rechtstexte ---------- */
.recht{ max-width: 780px; margin: 0 auto; font-size:16px; line-height:1.7; color: var(--white); }
.recht h3{ margin: 26px 0 8px; color: var(--amber); }
.recht p, .recht ul{ margin: 0 0 12px; color: #C8C8D6; }
.recht ul{ padding-left: 20px; }
.recht li{ margin-bottom: 7px; }
.recht a{ color: var(--led); }
.recht code{ font-family: var(--ff-pixel); font-size:11px; color: var(--led); }
.recht .offen{
  font-family: var(--ff-pixel); font-size:10px; line-height:1.8; letter-spacing:.05em;
  color: var(--gold); background: rgba(192,57,43,.22);
  border:2px solid var(--red); padding:12px; margin-bottom:22px;
}
.bar a.btn{ text-decoration:none; display:inline-block; }

/* Demorennen hinter der Anmeldemaske. Es laeuft mit der groebsten
   Streckenaufloesung: Der Aufbau dauert dort rund ein Zehntel und
   braucht ein Zwoelftel des Speichers — und hinter dem Schleier
   sieht man den Unterschied nicht. */
.auth-stage{ position:relative; overflow:hidden; }
.auth-stage .attract,
.auth-stage .attract-veil{ position:absolute; inset:0; }
.auth-box{ position:relative; z-index:1; }
.auth-panel{ background: rgba(22,22,30,.94); }

/* ============================================================
   BESTENLISTE
   ============================================================ */
.board-kopf{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; margin-bottom:16px; }
.board-kopf .tabs{ margin-bottom:0; }
.board-art{ margin-left:auto; }

.rangliste{ list-style:none; margin:0; padding:0; }
.rangliste li{
  display:grid; grid-template-columns: 48px 1fr auto; gap:10px; align-items:center;
  border-bottom:1px solid var(--frame-lo); padding:9px 0;
}
.rangliste li .pow{ grid-column: 2 / -1; margin-top:-4px; }
.rangliste li.me{ background: rgba(245,166,35,.10); }
.rangliste .num{
  font-family: var(--ff-pixel); font-size:11px; color: var(--grey);
  text-align:right; letter-spacing:.06em;
}
.rangliste li.me .num{ color: var(--amber); }
.rangliste li:nth-child(1) .num{ color: var(--gold); }
.rangliste li:nth-child(2) .num{ color: #C8C8D6; }
.rangliste li:nth-child(3) .num{ color: #C07A3A; }
.rangliste .wert{
  font-family: var(--ff-pixel); font-size:12px; color: var(--led); letter-spacing:.04em;
}
.board-fuss{
  font-family: var(--ff-pixel); font-size:9px; letter-spacing:.08em;
  color: var(--grey-dk); margin:14px 0 0;
}

/* ---------- Gruppen ---------- */
.gruppe-form{ display:flex; gap:10px; align-items:flex-end; margin-bottom:6px; }
.gruppe-form .field{ flex:1; margin:8px 0; }
.gruppe-form .btn{ margin-bottom:10px; white-space:nowrap; }

.gruppenliste{ list-style:none; margin:14px 0 0; padding:0; }
.gruppenliste li{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border-top:1px solid var(--frame-lo); padding:10px 0;
}
.gruppenliste .who{ flex:1; min-width:120px; }
.gruppenliste .btn.code{
  font-family: var(--ff-pixel); letter-spacing:.2em;
  color: var(--gold); border-color: var(--amber);
}
#gruppeMeldung.gut{ color: var(--green); background: rgba(95,208,127,.12); border-left-color: var(--green); }

@media (max-width: 640px){
  .board-art{ margin-left:0; }
  .gruppe-form{ flex-wrap:wrap; }
  .gruppe-form .btn{ margin-bottom:0; }
}

/* Gesperrte Strecke: sichtbar, aber erkennbar nicht waehlbar */
.tab.zu{ opacity:.55; border-style:dashed; }
.tab.zu[aria-selected="true"]{ opacity:1; background: var(--panel3); color: var(--gold); border-color: var(--amber); }
#trackKauf{ margin-top:14px; }
#trackKauf .btn{ width:100%; }

/* Die Streckenwahl steht in der Bestenliste zwischen Gruppe und
   Wertungsart — sie gehoert zur Rundenzeit, nicht zur Gruppe. */
#boardStrecken .tab{ font-size:10px; }