/* Flipstar 3 – Oberfläche. Keine fremden Schriften: Systemschriften genügen.
   Die eine laute Stelle ist die orange Punktmatrix-Anzeige oben, wie in
   echten Automaten ab 1991. Alles andere bleibt ruhig. */

:root{
  --tief:#070a1d;
  --nacht:#0d1333;
  --chrom:#d9e1ef;
  --plasma:#ff9d2e;
  --signal:#ff4f6d;
  --lumen:#4fe3c1;
  --nebel:#8b6dff;
  --text:#e8ecf8;
  --leise:#9aa5c4;

  --display:"Avenir Next Condensed","AvenirNextCondensed-Bold","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --text-schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  --w:360px;      /* Breite des Automaten – setzt spiel.js */
  --fh:600px;     /* Höhe des Spielfelds */
  --dh:72px;      /* Höhe der Anzeige */
  --sh:64px;      /* Höhe der Schürze mit den Knöpfen */
  --abstand:8px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;width:100%;
  background:var(--tief);
  color:var(--text);
  font-family:var(--text-schrift);
  overflow:hidden;overscroll-behavior:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  touch-action:none;               /* kein Wischen, kein Zoom – auch nicht auf den Leuchtflächen */
}
body{
  background:
    radial-gradient(120% 70% at 50% 0%, #161d4d 0%, rgba(22,29,77,0) 60%),
    radial-gradient(90% 60% at 50% 100%, #10153a 0%, rgba(16,21,58,0) 70%),
    var(--tief);
}

#huelle{
  position:fixed;inset:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;align-items:center;justify-content:center;
}

#buehne{
  width:var(--w);min-width:0;
  display:flex;flex-direction:column;gap:var(--abstand);
}

/* ---------- Anzeige ------------------------------------------------- */
#anzeige{
  height:var(--dh);
  border-radius:10px;
  padding:5px;
  background:linear-gradient(180deg,#1c1209,#0d0804);
  box-shadow:
    inset 0 0 0 1px rgba(255,157,46,.14),
    inset 0 2px 10px rgba(0,0,0,.8),
    0 0 0 1px rgba(217,225,239,.08),
    0 10px 30px -12px rgba(255,140,30,.35);
}
#dmd{display:block;width:100%;height:100%;border-radius:6px}
#anzeige{position:relative}
/* Ton und Pause: durchsichtige Knöpfe über den Leuchtpunkt-Symbolen am
   rechten Rand der Anzeige (Spalten 108–127 von 128). Oben Ton, unten Pause. */
button.dmdknopf{
  position:absolute;right:0;
  width:calc(5px + 20/128*(100% - 10px));
  min-height:0;padding:0;border:0;border-radius:0 10px 10px 0;
  background:transparent;box-shadow:none;
}
button.dmdknopf:active{background:rgba(255,157,46,.12);transform:none}
#ton{top:0;height:50%}
#pause{bottom:0;height:50%}
#pause:disabled{opacity:1;cursor:default}

/* ---------- Spielfeld ----------------------------------------------- */
#feldrahmen{
  position:relative;
  width:var(--w);height:var(--fh);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(217,225,239,.12),
    0 24px 60px -20px rgba(0,0,0,.9);
}
#feld{display:block;width:100%;height:100%;touch-action:none}

#zurueck{
  position:absolute;left:10px;top:10px;z-index:5;
  font:600 12px/1 var(--text-schrift);letter-spacing:.08em;
  text-decoration:none;color:var(--chrom);
  background:rgba(7,10,29,.72);
  border:1px solid rgba(217,225,239,.28);
  border-radius:999px;padding:8px 13px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#zurueck:active{color:#fff;border-color:#fff}
#zurueck[hidden]{display:none}

/* ---------- Karten über dem Feld ------------------------------------- */
.karte{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
  max-height:calc(100% - 56px);overflow:auto;
  padding:20px 18px 14px;
  text-align:center;
  background:rgba(8,11,32,.84);
  border:1px solid rgba(217,225,239,.14);
  border-radius:18px;
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  -webkit-user-select:none;user-select:none;
  touch-action:pan-y;              /* die Bestenliste darf rollen */
}
.karte[hidden]{display:none}
#pausekarte,#liste{top:50%;bottom:auto;transform:translateY(-50%)}

.marke{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:calc(var(--w) * .165);line-height:.95;letter-spacing:-.01em;
  display:inline-flex;align-items:flex-start;gap:.08em;
  background:linear-gradient(180deg,#ffffff 0%,#e3e9f6 42%,#7a86a4 50%,#c9d2e6 62%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(139,109,255,.35));
  padding-right:.06em;
}
.nummer{
  font-size:.42em;font-style:normal;line-height:1;
  margin-top:.12em;padding:.08em .22em .06em;
  border-radius:.18em;
  background:var(--plasma);color:#241200;
  -webkit-background-clip:border-box;background-clip:border-box;
  transform:skewX(-10deg);
}
h2{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:30px;line-height:1.05;color:#fff;margin-bottom:6px;
}
.unterzeile{color:var(--leise);font-size:15px;line-height:1.4;margin:8px auto 0;max-width:30ch}
.grosszahl{
  font-family:var(--display);font-weight:700;
  font-size:calc(var(--w) * .13);line-height:1;color:var(--plasma);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(255,157,46,.35);
}

.knoepfe{display:flex;flex-direction:column;gap:8px;margin-top:16px}
button,.knopf{
  font:700 18px/1 var(--display);letter-spacing:.02em;
  min-height:46px;padding:0 18px;border-radius:12px;
  color:var(--text);background:rgba(217,225,239,.06);
  border:1px solid rgba(217,225,239,.22);
  cursor:pointer;touch-action:manipulation;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
button:active,.knopf:active{transform:translateY(1px);background:rgba(217,225,239,.12)}
button.haupt{
  background:linear-gradient(180deg,#ffb257,var(--plasma));
  color:#231100;border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px -10px rgba(255,157,46,.8);
  font-size:21px;min-height:50px;
}
button.haupt:active{background:var(--plasma)}
button:disabled{opacity:.5;cursor:default}
:focus{outline:none}
:focus-visible{outline:2px solid var(--lumen);outline-offset:2px}

.hilfe{color:var(--leise);font-size:13px;line-height:1.5;margin-top:14px}
.hilfe span{white-space:nowrap;margin:0 .45em;display:inline-block}
kbd{
  font:600 11px/1 var(--text-schrift);color:var(--text);
  border:1px solid rgba(217,225,239,.3);border-bottom-width:2px;border-radius:5px;
  padding:2px 5px;
}
.fuss{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:10px;border-top:1px solid rgba(217,225,239,.1);
  font-size:12px;color:var(--leise);
}
#bestwert{color:var(--plasma)}
.klein{font-size:12px;color:var(--leise);margin-top:6px}
.warnung{color:#ffc08a}

/* Nur eines von beiden zeigen: Telefon oder Tastatur */
.nur-maus{display:none}
@media (hover:hover) and (pointer:fine){
  .nur-touch{display:none}
  .nur-maus{display:block}
}

/* ---------- Namenseingabe ------------------------------------------- */
#eintrag{margin-top:14px}
#eintrag label{display:block;font-size:14px;color:var(--text);margin-bottom:8px}
.eintragzeile{display:flex;gap:8px;justify-content:center}
#name{
  width:5.2em;min-width:0;
  font:700 26px/1 var(--display);letter-spacing:.25em;text-align:center;text-transform:uppercase;
  padding:8px 0 8px .25em;border-radius:12px;
  color:var(--plasma);background:rgba(0,0,0,.35);
  border:1px solid rgba(255,157,46,.45);
  -webkit-user-select:text;user-select:text;
}
#name:focus-visible{outline:2px solid var(--plasma)}

/* ---------- Bestenliste --------------------------------------------- */
#eintraege{
  list-style:none;margin:10px 0 0;text-align:left;
  font-variant-numeric:tabular-nums;
  max-height:calc(var(--fh) - 220px);overflow:auto;
}
#eintraege li{
  display:grid;grid-template-columns:2.2em 1fr auto;gap:10px;align-items:baseline;
  padding:7px 6px;border-bottom:1px solid rgba(217,225,239,.07);font-size:15px;
}
#eintraege li .platz{color:var(--leise);text-align:right}
#eintraege li .wer{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.12em}
#eintraege li .welle{display:block;font-size:11px;color:var(--leise);letter-spacing:0;font-family:var(--text-schrift);font-weight:400}
#eintraege li .punkte{font-weight:600}
#eintraege li:nth-child(-n+3) .punkte{color:var(--plasma)}
#eintraege li.neu{background:rgba(79,227,193,.1);border-radius:8px}
#eintraege li.leer{display:block;text-align:center;color:var(--leise);border:0}

/* ---------- Schürze: Knöpfe unter dem Feld ---------------------------- */
#schuerze{
  height:var(--sh);
  display:flex;gap:var(--abstand);align-items:stretch;
}
.pad{
  flex:1;min-width:0;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(217,225,239,.07),rgba(217,225,239,.02));
  border:1px solid rgba(217,225,239,.12);
  transition:border-color .08s,box-shadow .08s,background .08s;
}
.pad svg{width:46%;max-width:64px;fill:rgba(217,225,239,.28);transition:fill .08s}
.pad.an{
  border-color:var(--lumen);
  background:linear-gradient(180deg,rgba(79,227,193,.22),rgba(79,227,193,.06));
  box-shadow:0 0 22px -4px rgba(79,227,193,.6),inset 0 0 14px rgba(79,227,193,.25);
}
.pad.an svg{fill:var(--lumen)}
#buehne.ruhe .pad{opacity:.35}

.mitte{display:flex;gap:6px;align-items:center}
button.rund{
  width:44px;min-height:44px;height:44px;padding:0;border-radius:50%;
}
button.rund svg{width:22px;height:22px;fill:none;stroke:var(--chrom);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ton .lautsprecher{fill:var(--chrom);stroke:none}
#ton[aria-pressed="false"] .wellen{display:none}
#ton[aria-pressed="true"] .stumm{display:none}
#ton[aria-pressed="true"]{border-color:var(--lumen)}
#ton[aria-pressed="true"] svg{stroke:var(--lumen)}
#ton[aria-pressed="true"] .lautsprecher{fill:var(--lumen)}
#pause .spielen{display:none;fill:var(--chrom);stroke:none}
#pause.angehalten .spielen{display:block}
#pause.angehalten .balken{display:none}
#pause:disabled{opacity:.3}

.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kleine Telefone und Safari mit Adressleiste: Karten straffen */
@media (max-height:700px){
  .karte{padding:14px 14px 10px;max-height:calc(100% - 50px)}
  .marke{font-size:calc(var(--w) * .145)}
  .unterzeile{font-size:14px;margin-top:4px}
  .knoepfe{margin-top:10px;gap:6px}
  button,.knopf{min-height:42px;font-size:17px}
  button.haupt{min-height:44px;font-size:19px}
  .hilfe{margin-top:8px;font-size:12px}
  .fuss{margin-top:8px;padding-top:6px}
  h2{font-size:26px}
}
@media (max-height:600px){
  .unterzeile{display:none}
  #titel .unterzeile{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}