/* ==========================================================================
   CARCHECK Berlin – Mini-Spiele: Spielfeld, Anzeige, Steuerung
   ========================================================================== */
.spiel{--ar:.75;max-width:48rem;margin-inline:auto}
.spiel__hud{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;width:min(100%,calc((100svh - 13.5rem) * var(--ar)));min-width:min(100%,20rem);margin-inline:auto;padding:.6rem .9rem;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--blau-950);color:#BCD3EA;font:600 .95rem/1.2 var(--font-body)}
.spiel__hud b{display:inline-block;min-width:2ch;margin-left:.3rem;color:#fff;font:700 1.35rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.spiel__hud-knoepfe{display:flex;gap:.4rem;margin-left:auto}
.spiel__knopf{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1.5px solid rgba(255,255,255,.35);border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.spiel__knopf:hover{border-color:#fff}
.spiel__knopf svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spiel__knopf .aus{display:none}
.spiel__knopf.ist-aus .an{display:none}
.spiel__knopf.ist-aus .aus{display:block}
.spiel__hud :focus-visible,.spiel__buehne :focus-visible{outline-color:#fff}

.spiel__buehne{position:relative;width:min(100%,calc((100svh - 13.5rem) * var(--ar)));min-width:min(100%,20rem);aspect-ratio:var(--ar);margin-inline:auto;overflow:hidden;border-radius:0 0 var(--r-l) var(--r-l);background-color:#0D2F52;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;box-shadow:var(--shadow-l);user-select:none;-webkit-user-select:none}
.spiel__buehne:focus{outline:none}
.spiel__buehne canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.spiel__poster{position:absolute;inset:0;width:100%;height:100%}
.spiel.laeuft .spiel__poster{display:none}

.spiel__start,.spiel__ende,.spiel__pause{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.8rem;padding:1.5rem;text-align:center;color:#fff;background:rgba(10,36,64,.8);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.spiel__start[hidden],.spiel__ende[hidden],.spiel__pause[hidden]{display:none}
.spiel__titel{margin:0;font:700 clamp(2rem,1.4rem + 3vw,3.2rem)/1 var(--font-display);color:#fff}
.spiel__start p,.spiel__ende p,.spiel__pause p{max-width:30ch;margin:0;color:#D5E4F3}
.spiel__tastenhinweis{font-size:.92rem}
.spiel__fehler:empty{display:none}
.spiel__fehler{color:#FFB37F!important;font-weight:600}
.spiel__ende-aktionen{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.4rem}
.spiel__ende a{color:#fff}

/* Bildschirmtasten (nur Touch-Geräte) */
.spiel__steuer{display:none}
@media (hover:none) and (pointer:coarse){
  .spiel__steuer{display:flex;justify-content:center;gap:.75rem;margin-top:.9rem;touch-action:manipulation}
  .spiel__buehne{width:min(100%,calc((100svh - 17rem) * var(--ar)))}
  .spiel__hud{width:min(100%,calc((100svh - 17rem) * var(--ar)))}
}
.spiel__steuer button{display:grid;place-items:center;width:4.2rem;height:4.2rem;border:0;border-radius:16px;background:var(--blau-800);color:#fff;touch-action:none;-webkit-tap-highlight-color:transparent}
.spiel__steuer button svg{width:1.9rem;height:1.9rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.spiel__steuer button.ist-gedrueckt{background:var(--signal);color:var(--ink-on-signal)}
.spiel__steuer--kreuz{display:none}
@media (hover:none) and (pointer:coarse){
  .spiel__steuer--kreuz{display:grid;grid-template-columns:repeat(3,4.2rem);grid-template-areas:". h ." "l . r" ". u .";gap:.35rem;justify-content:center}
  .spiel__steuer--kreuz [data-taste=hoch]{grid-area:h}
  .spiel__steuer--kreuz [data-taste=links]{grid-area:l}
  .spiel__steuer--kreuz [data-taste=rechts]{grid-area:r}
  .spiel__steuer--kreuz [data-taste=runter]{grid-area:u}
  .spiel__steuer--breit button{width:auto;flex:1;max-width:11rem;height:4.6rem}
}

/* Fünf Tasten in einer Reihe (Fuhrpark) */
@media (hover:none) and (pointer:coarse){
  .spiel__steuer--fuenf{gap:.4rem}
  .spiel__steuer--fuenf button{width:auto;flex:1 1 0;max-width:4.6rem;height:4rem;border-radius:14px}
  .spiel__steuer--fuenf button svg{width:1.7rem;height:1.7rem}
}

/* Handy: Solange ein Spiel läuft, blendet sich die Schnellkontakt-Leiste aus. Sonst verdeckt sie die Spieltasten. */
body:has(.spiel.laeuft) .cta-bar{display:none}
body:has(.spiel.laeuft){padding-bottom:0}
@media (hover:none) and (pointer:coarse){
  /* Spielfeld darf auf kleinen Handys schmaler werden, damit die Tasten darunter ins Bild passen */
  .spiel__buehne,.spiel__hud{min-width:min(100%,17rem)}
  /* Steuerkreuz ist höher als eine Tastenreihe */
  .spiel:has(.spiel__steuer--kreuz) .spiel__buehne,.spiel:has(.spiel__steuer--kreuz) .spiel__hud{width:min(100%,calc((100svh - 25rem) * var(--ar)))}
}
@media (max-width:480px){
  .spiel__hud{gap:.25rem .85rem;padding:.45rem .55rem .45rem .8rem;font-size:.82rem}
  .spiel__hud b{margin-left:.2rem;font-size:1.15rem}
  .spiel__knopf{width:2.3rem;height:2.3rem}
}

/* Text unter dem Spiel */
.spiel-info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,6vw,4rem)}
.spiel-info h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem)}
.tastenliste{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.tastenliste dt{font-weight:700}
.tastenliste dd{margin:0;color:var(--muted)}
kbd{display:inline-block;min-width:1.7em;padding:.05em .4em;border:1px solid var(--line-strong);border-bottom-width:3px;border-radius:5px;background:var(--surface);font:600 .9em/1.4 var(--font-body);text-align:center}
@media (max-width:860px){.spiel-info{grid-template-columns:1fr}}