/* ==========================================================================
   OAKWD ARCADE - 80er-Spielhalle. Baut auf casino.css auf (Bühne, HUD,
   Hotspots, Ansichten) und tauscht die Farbwelt: Pink, Cyan, Lila auf Schwarz,
   Neon-Glühen an Titeln und Etiketten, CRT-Rahmen für die Automaten.
   ========================================================================== */

.arcade-body {
  --arc-pink: #ff2d95;
  --arc-cyan: #21e6ff;
  --arc-purple: #6a1fd6;
  --arc-lime: #4cff4c;
  --game-red: var(--arc-pink);        /* harte Schatten in Pink */
  --game-gold: var(--arc-cyan);       /* Zahlen, Gewinne, Rahmen in Cyan */
  --casino-gold: var(--arc-pink);     /* Etiketten und Pfeile */
  --casino-cream: #e8e0ff;
  background: #050510;
}

/* Titel und Etiketten glühen leicht */
.arcade-body .room-title .hl { box-shadow: var(--drop) var(--drop) 0 var(--arc-pink), 0 0 18px #ff2d9566; }
.arcade-body .eyebrow { background: var(--arc-cyan); color: var(--ink); box-shadow: 3px 3px 0 #0a0a0a, 0 0 14px #21e6ff66; }
.arcade-body .scroll-hint { color: var(--arc-cyan); }
.arcade-body .hotspot-tag { box-shadow: 4px 4px 0 #0a0a0a, 0 0 16px #ff2d9580; }
.arcade-body .hotspot:hover, .arcade-body .hotspot:focus-visible { border-color: var(--arc-cyan); }
.arcade-body .panel-title .hl { box-shadow: var(--drop) var(--drop) 0 var(--arc-pink); }
.arcade-body .panel-kicker { color: var(--arc-cyan); }
.arcade-body .howto-btn { border-color: var(--arc-cyan); color: var(--arc-cyan); }
.arcade-body .howto-btn:hover, .arcade-body .howto-btn[aria-expanded="true"] { background: var(--arc-cyan); color: var(--ink); }
.arcade-body .howto { border-color: var(--arc-cyan); box-shadow: 5px 5px 0 var(--arc-pink); }
.arcade-body .howto li::marker { color: var(--arc-pink); }
.arcade-body .toast { border-color: var(--arc-cyan); }

/* HUD: zwei Boxen (Münzen, Tickets) */
.chud-chips--tokens .chud-value { color: var(--paper); }
.chud-chips--tickets .chud-value { color: var(--arc-cyan); }
.chud-value.is-flash { animation: hud-flash .5s steps(2); }
@keyframes hud-flash { 0% { color: var(--arc-pink); } 100% { color: inherit; } }

/* Münzwechsler */
.balances { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.cash-balance--tickets strong { color: var(--arc-cyan); }
.arcade-body .cash-balance strong { color: var(--arc-pink); }
.arcade-body .chip-chart { border-color: var(--arc-cyan); }

/* Bestenliste */
.records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; width: 100%; }
.rec-game { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rec-game .sub-title { color: var(--arc-pink); margin: 0; }
.rec-list { margin: 0; padding: 0; list-style: none; width: 100%; max-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.rec-list li { display: grid; grid-template-columns: 18px 1fr max-content; gap: 6px; font-size: 13px; letter-spacing: .12em; color: #c4c4c4; padding: 3px 6px 1px; border: 2px solid #2b2b34; background: #0b0b1a; }
.rec-list li:first-child { border-color: var(--arc-cyan); color: var(--paper); }
.rec-pos { color: var(--arc-pink); }
.rec-name { text-align: left; }
.rec-score { color: var(--arc-cyan); font-variant-numeric: tabular-nums; }
.rec-empty { justify-content: center; color: #6e6e6e; grid-template-columns: 1fr; text-align: center; }

/* CRT-Rahmen: Automaten-Bildschirm (vorerst „BALD“) */
.crt {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 6 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px solid #2b2b34;
  border-radius: 14px;
  background: #0b0b1a;
  box-shadow: inset 0 0 40px #000, 0 0 0 3px #0a0a0a, 6px 6px 0 var(--arc-pink);
  overflow: hidden;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #ffffff10 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.crt-text { font-size: clamp(40px, 10vw, 72px); letter-spacing: .2em; color: var(--arc-cyan); text-shadow: 0 0 12px #21e6ff99; animation: blink 1.2s steps(1) infinite; }

/* Jukebox: das dunkle Stück */
.btn--dark-neon { background: #1a0a2a; color: var(--arc-pink); border-color: var(--arc-pink); }
.arcade-body .dj-now { color: var(--arc-cyan); }
.arcade-body [data-track].is-active { box-shadow: inset 0 0 0 3px var(--arc-cyan); }

@media (max-width: 520px) {
  .records { grid-template-columns: repeat(2, 1fr); }
  .chud-chips { padding: 0 8px; gap: 5px; }
  .chud-label { font-size: 10px; }
  .chud-value { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-text, .chud-value.is-flash { animation: none; }
}
.rec-list li.rec-empty { border-color: #2b2b34; color: #6e6e6e; font-size: 11px; white-space: nowrap; }

/* Automaten-Kabine: CRT mit Canvas, Overlay für Start/Game Over, Steuerkreuz bei Touch */
.game-panel--cab { width: min(100%, 560px); }
.cab { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.crt--live { width: min(100%, 480px); aspect-ratio: 6 / 5; padding: 0; }
.crt--live canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: #0a0a0aa8;
  text-align: center;
}
.play-msg { margin: 0; font-size: clamp(18px, 4vw, 26px); letter-spacing: .18em; color: var(--paper); }
.play-tickets { margin: 0; font-size: 20px; letter-spacing: .16em; color: var(--arc-cyan); }
.initials-form { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.initials-form label { font-size: 12px; letter-spacing: .24em; color: var(--arc-cyan); }
.initials-form input {
  width: 5ch;
  padding: 6px 8px 4px;
  font: inherit;
  font-size: 32px;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--arc-pink);
  background: #0b0b1a;
  border: 3px solid var(--arc-cyan);
  outline: none;
}
.pad { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; }

.pad-dir { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 2px; }
.pad-dir button:nth-child(1) { grid-column: 2; grid-row: 1; }
.pad-dir button:nth-child(2) { grid-column: 1; grid-row: 2; }
.pad-dir button:nth-child(3) { grid-column: 3; grid-row: 2; }
.pad-dir button:nth-child(4) { grid-column: 2; grid-row: 3; }
.pad button {
  width: 48px; height: 48px;
  padding: 0;
  font-size: 18px;
  color: var(--paper);
  background: #2b2b34;
  border: 3px solid #0a0a0a;
  box-shadow: 3px 3px 0 #0a0a0a;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.pad button.is-down { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0a0a; background: var(--arc-purple); }
.pad-btns { display: flex; gap: 14px; }
.pad-btns button { width: 60px; height: 60px; border-radius: 50%; font-size: 22px; }
.pad-btns button[data-key="a"] { background: var(--arc-pink); color: var(--ink); }
.pad-btns button[data-key="b"] { background: var(--arc-cyan); color: var(--ink); }
@media (max-width: 520px) { .crt--live { width: 100%; } .game-panel--cab { padding: 12px 8px 12px; } }
.play-overlay .btn--big { white-space: nowrap; font-size: clamp(16px, 4.2vw, 24px); }