/* Styles fuer das Fahrspiel. Geteilt zwischen /fahrt und der
   Werke-Seite, damit es die Regeln nur einmal gibt. */


.spielfeld { margin: 40px 0; }
.spiel-szene {
  --fahrt-nacht: #111c29;
  --fahrt-rand: #2d4052;
  --fahrt-hell: #eaf3f1;
  --fahrt-tuerkis: #77e2cf;
  padding: 12px;
  border: 1px solid var(--fahrt-rand);
  border-radius: 14px;
  background: var(--fahrt-nacht);
  box-shadow: 0 18px 45px rgba(10, 24, 35, .16);
}

.rahmen {
  position: relative;
  border: 1px solid #334957;
  border-radius: 9px;
  background: #7c9a54;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.rahmen canvas.spielbild {
  display: block; width: 100%; height: 100%;
  /* Das Herzstück des Pixellooks: der kleine Puffer wird hart
     hochskaliert, ohne dass der Browser dazwischen glättet. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  touch-action: none;
}
.rahmen canvas.spielbild:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-bright);
}

/* Anzeige oben links */
.tafel {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 42px 12px 10px;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  pointer-events: none;
  background: linear-gradient(rgba(4,16,26,.74), rgba(4,16,26,.38) 75%, transparent);
}
.tafel .gruppe {
  min-width: 85px; line-height: 1.25;
  padding: 5px 9px 6px;
  border: 1px solid rgba(216,241,238,.22);
  border-radius: 7px;
  background: rgba(9,27,39,.58);
  backdrop-filter: blur(5px);
}
.tafel .zahl { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.tafel .gruppe:nth-of-type(2) .zahl { color: var(--fahrt-tuerkis); }
.tafel .zahl small { font-size: 11px; font-weight: 400; opacity: 0.82; margin-left: 3px; }
.tafel .titel {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.78;
}
.tafel .schild {
  margin-left: auto; text-align: right; max-width: 38%;
  padding: 6px 9px; border-radius: 7px;
  background: rgba(9,27,39,.58);
}
.tafel .schild .name { font-size: 12.5px; }
.tafel .schild .name.ab { color: #ffd27a; }
.fahrt-modus {
  position: absolute; left: 12px; top: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: #101e2b; text-shadow: none;
  background: var(--fahrt-tuerkis); border-radius: 99px;
  padding: 5px 10px;
}

/* Fortschritt */
.schiene {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(0,0,0,0.38);
}
.schiene i { display: block; height: 100%; width: 0; background: var(--fahrt-tuerkis); box-shadow: 0 0 12px var(--fahrt-tuerkis); }

/* Übersichtskarte */
.karte {
  position: absolute; right: 12px; bottom: 16px;
  width: 112px; height: 152px;
  background: rgba(235, 246, 238, 0.91);
  border: 2px solid rgba(119, 226, 207, .8);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Einblendung */
.meldung {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(10,10,10,0.55);
  color: #fff; text-align: center; padding: 20px;
  pointer-events: none;
}

/* Muss sein: das display:flex oben schlägt die Browserregel
   [hidden] { display: none }, weil eine Klasse im Autorenstylesheet
   immer vorgeht. Ohne diese Zeile ließe sich die Einblendung mit
   element.hidden = true nicht wegbekommen. */
.meldung[hidden] { display: none; }
.meldung strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 3.6vw, 30px); font-weight: 700;
  letter-spacing: -0.01em;
}
.meldung span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; opacity: 0.86;
}

/* Leises Schild: alles, was der Spieler nicht selbst ausgelöst hat, legt
   sich nicht über das ganze Bild. Unten links, weil rechts die Karte sitzt
   und ganz unten der Fortschrittsbalken. */
.meldung.leise {
  inset: auto auto 14px 14px;
  background: none;
  padding: 0;
  align-items: flex-start;
}
.meldung.leise strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em;
  background: rgba(10, 10, 10, 0.70);
  padding: 5px 9px; border-radius: 3px;
}
.meldung.leise span { display: none; }

/* Knöpfe fürs Handy */
.tipp {
  display: none;
  margin-top: 12px;
  gap: 10px;
  user-select: none; -webkit-user-select: none;
}
.tipp .paar { display: flex; gap: 10px; }
.tipp .paar:last-child { margin-left: auto; }
.tipp button {
  width: 68px; height: 58px;
  border: 1px solid #456271; border-radius: 9px;
  background: #213447; color: var(--fahrt-hell);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 600;
  touch-action: none; cursor: pointer;
}
.tipp button:active { background: #285d62; border-color: var(--fahrt-tuerkis); }
@media (pointer: coarse) { .tipp { display: flex; } }

/* Tastenlegende und Knöpfe */
.leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 14px 3px 3px;
}
.legende {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #aebfc8;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.legende kbd {
  font-family: inherit; font-size: 11px;
  border: 1px solid #5a7180; border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; color: var(--fahrt-hell);
  background: #233647;
}
.knopf {
  font-family: 'Inter', sans-serif; font-size: 14px;
  border: 1px solid #4e6675; border-radius: 7px;
  background: #233647; color: var(--fahrt-hell);
  padding: 9px 13px; cursor: pointer;
}
.knopf:hover { border-color: var(--fahrt-tuerkis); color: var(--fahrt-tuerkis); }
.knopf:focus-visible, .tipp button:focus-visible { outline: 2px solid var(--fahrt-tuerkis); outline-offset: 2px; }
.knopf-primaer { background: var(--fahrt-tuerkis); color: #10212d; border-color: var(--fahrt-tuerkis); font-weight: 700; }
.knopf-primaer:hover { background: #a6f4e6; color: #10212d; }
.knopf-primaer[aria-pressed="true"] { background: #f4c77d; border-color: #f4c77d; }
.leiste .rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.knopf[hidden] { display: none; }

.spiel-szene:fullscreen {
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  width: 100vw; height: 100dvh; overflow: auto;
  padding: 12px; border: 0; border-radius: 0;
  background: #09131e;
}
.spiel-szene:fullscreen .rahmen {
  width: min(100%, calc((100dvh - 155px) * 16 / 9));
  margin: auto auto 0;
  flex: none;
}
.spiel-szene:fullscreen .leiste { width: min(100%, 1400px); margin: 0 auto auto; }


@media (max-width: 620px) {
  .spiel-szene { padding: 7px; border-radius: 10px; }
  .tafel { gap: 4px; padding: 34px 5px 4px; }
  .tafel .gruppe { min-width: 0; padding: 3px 5px; }
  .tafel .zahl { font-size: 15px; }
  .tafel .zahl small { font-size: 8px; }
  .tafel .titel { font-size: 7px; }
  .tafel .schild { max-width: 35%; padding: 3px 5px; }
  .tafel .schild .name { font-size: 9px; }
  .fahrt-modus { top: 6px; left: 6px; font-size: 8px; padding: 3px 7px; }
  .karte { width: 76px; height: 104px; right: 8px; bottom: 12px; }
  .legende { display: none; }
  .leiste .rechts { margin-left: 0; width: 100%; }
  .knopf { flex: 1 1 auto; font-size: 12px; padding: 8px; }
  .spiel-szene:fullscreen .rahmen { width: 100%; margin: auto auto 0; }
}