/*!
 * GENX ARCADE — Spiel-Styling
 * Teil der Website https://www.genxpodcast.de
 *
 * Copyright (c) 2026 Markus Lach. Alle Rechte vorbehalten.
 *
 * Dieser Quelltext ist urheberrechtlich geschuetzt. Vervielfaeltigung,
 * Verbreitung, Bearbeitung oder oeffentliche Zugaenglichmachung — ganz
 * oder in Teilen — nur mit ausdruecklicher schriftlicher Zustimmung des
 * Urhebers. Das Auslesen im Browser ist technisch bedingt und stellt
 * keine Freigabe zur Weiterverwendung dar.
 */
/* ============================================================
   GENX ARCADE — Spiel-Styling (CRT/Neon, responsiv, Touch)
   ============================================================ */

.genx-arcade {
  max-width: 880px;
  margin: 28px auto 8px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* iOS: bei ungenauen Taps kein Text markieren / kein „Kopieren"-Menue,
   keine grauen Tap-Highlights. (Namensfeld bleibt bewusst auswaehlbar.) */
.genx-arcade, .genx-arcade * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.genx-arcade .ga-initials {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* CRT-Rahmen */
.genx-arcade-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0812;
  border: 3px solid #0c0330;
  box-shadow:
    0 0 0 2px rgba(41, 197, 246, .25),
    0 18px 50px rgba(0, 0, 0, .6),
    inset 0 0 60px rgba(0, 0, 0, .6);
  touch-action: none;
  outline: none;
}
.genx-arcade:focus-within .genx-arcade-frame {
  box-shadow:
    0 0 0 2px rgba(41, 197, 246, .55),
    0 18px 50px rgba(0, 0, 0, .6),
    inset 0 0 60px rgba(0, 0, 0, .6);
}

.genx-arcade-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Scanlines + Vignette ueber dem Canvas */
.genx-arcade-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
  z-index: 3;
}

/* HUD */
.genx-arcade-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 10px 210px 10px 14px;
  font-size: clamp(11px, 2.4vw, 15px);
  letter-spacing: .12em;
  color: #f4ead8;
  text-shadow: 0 0 8px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.genx-arcade-hud .ga-score { color: #ffd23f; }
.genx-arcade-hud .ga-hi    { color: #29c5f6; }
.genx-arcade-hud .ga-level { color: #ff8c1a; }
/* Laufendes Power-up samt Restsekunden. Farbe wie das Symbol im Spielfeld:
   Doppelschuss cyan, Streuschuss magenta. */
.genx-arcade-hud .ga-power {
  color: #29c5f6;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 0 7px;
  animation: ga-power-puls 1.1s ease-in-out infinite;
}
.genx-arcade-hud .ga-power.ga-power-streu { color: #e246a2; }
.genx-arcade-hud .ga-power[hidden] { display: none; }
@keyframes ga-power-puls { 50% { opacity: .55; } }
/* Schild + Leben zusammen, mittig oben (nicht mehr vom Schließen-Knopf verdeckt) */
.genx-arcade-hud .ga-status {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* Ein einziges Schild-Symbol (Emoji) — Staerke ueber Transparenz. */
.genx-arcade-hud .ga-shield { font-size: 1.05em; line-height: 1; }
.genx-arcade-hud .ga-shield.ga-shield-full  { opacity: 1; }
.genx-arcade-hud .ga-shield.ga-shield-low   { opacity: .5; }
.genx-arcade-hud .ga-shield.ga-shield-empty { opacity: .18; }
.genx-arcade-hud .ga-lives { color: #ff2975; letter-spacing: .12em; }

/* Mute-Button */
.genx-arcade-mute {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  background: rgba(23, 16, 31, .8);
  border: 1px solid #3a3048;
  border-radius: 8px;
  color: #f4ead8;
}
.genx-arcade-mute:hover { border-color: #29c5f6; }

/* Musik-Schalter (Hintergrundmusik im Spiel, leiser als SFX) */
.genx-arcade-music {
  position: absolute;
  top: 8px; right: 48px;
  z-index: 6;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  background: rgba(23, 16, 31, .8);
  border: 1px solid #3a3048;
  border-radius: 8px;
  color: #6a5a86;
}
.genx-arcade-music:hover { border-color: #e246a2; color: #ff6ba3; }
.genx-arcade-music.on { color: #ffd23f; border-color: #ffd23f; }

/* „Nächster Song" (per JS nur sichtbar, wenn Musik laeuft) */
.genx-arcade-next {
  position: absolute;
  top: 8px; right: 88px;
  z-index: 6;
  width: 34px; height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  background: rgba(23, 16, 31, .8);
  border: 1px solid #3a3048;
  border-radius: 8px;
  color: #ffd23f;
}
.genx-arcade-next:hover { border-color: #ffd23f; color: #fff0b8; }

/* Loop-Button (aktuellen Song wiederholen; nur sichtbar wenn Musik laeuft) */
.genx-arcade-loop {
  position: absolute;
  top: 8px; right: 128px;
  z-index: 6;
  width: 34px; height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  background: rgba(23, 16, 31, .8);
  border: 1px solid #3a3048;
  border-radius: 8px;
  color: #cbb8d8;
}
.genx-arcade-loop:hover { border-color: #29c5f6; }
.genx-arcade-loop.on { border-color: #29c5f6; background: rgba(41, 197, 246, .3); }

/* Songnamen-Einblendung (oben mittig, kurz) */
.genx-arcade-track {
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 80%;
  padding: 4px 12px;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffd23f;
  background: rgba(11, 9, 18, .85);
  border: 1px solid #3a3048;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.genx-arcade-track.show { opacity: 1; }

/* Beenden-Button (per JS ein-/ausgeblendet, nur waehrend des Spiels) */
.genx-arcade-exit {
  position: absolute;
  top: 8px; right: 168px;
  z-index: 6;
  width: 34px; height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  background: rgba(23, 16, 31, .8);
  border: 1px solid #3a3048;
  border-radius: 8px;
  color: #ff2975;
}
.genx-arcade-exit:hover { border-color: #ff2975; color: #ff6ba3; }

/* Overlay (Start / Pause / Game Over) */
.genx-arcade-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 22px;
  overflow: auto;
  background: radial-gradient(120% 120% at 50% 40%, rgba(12, 3, 48, .72), rgba(11, 8, 18, .92));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.genx-arcade-overlay.show { display: flex; }

.genx-arcade-overlay .ga-title {
  margin: 0;
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  font-size: clamp(26px, 6vw, 46px);
  letter-spacing: .02em;
  color: #ffd23f;
  -webkit-text-stroke: 1.5px #17101f;
  text-shadow: 0 0 18px rgba(255, 210, 63, .5);
}
.genx-arcade-overlay .ga-msg {
  margin: 0;
  font-size: clamp(13px, 3vw, 18px);
  letter-spacing: .18em;
  color: #29c5f6;
  animation: gaBlink 1.1s steps(1) infinite;
}
@keyframes gaBlink { 50% { opacity: .25; } }
.genx-arcade-overlay .ga-start {
  margin-top: 6px;
  cursor: pointer;
}
.genx-arcade-overlay .ga-help {
  margin: 6px 0 0;
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: .08em;
  color: #9a90b6;
  max-width: 34ch;
}

/* Touch-Steuerung (nur auf Touch-Geraeten) */
.genx-arcade-touch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: none;
  justify-content: space-between;
  padding: 0 14px 14px;
  pointer-events: none;
}
.genx-arcade-touch .ga-cluster {
  display: flex;
  gap: 12px;
}
/* Groessen mitwachsend statt fest: Seit dem Bremsknopf stehen RECHTS DREI
   Knoepfe. Bei festen 60/60/72 px braeuchte die Reihe auf einem 375er-Handy
   376 px — ein Pixel zu viel, und die Reihe braeche um.
   Nachgerechnet mit clamp: 375px -> 52,5 + 52,5 + 63,75 + 2x12 Abstand
   + 12 (linker Block-Abstand) + 2x52,5 + 28 Innenabstand = 338 px. Passt.
   Bei 320px greifen die Untergrenzen (46/56) -> 304 px. Passt ebenfalls. */
.genx-arcade-touch .ga-t {
  pointer-events: auto;
  width: clamp(46px, 14vw, 60px); height: clamp(46px, 14vw, 60px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #f4ead8;
  background: rgba(36, 28, 48, .72);
  border: 2px solid rgba(41, 197, 246, .5);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.genx-arcade-touch .ga-t:active {
  background: rgba(41, 197, 246, .3);
  transform: scale(.94);
}
.genx-arcade-touch .ga-fire {
  border-color: rgba(255, 210, 63, .7);
  color: #ffd23f;
  width: clamp(56px, 17vw, 72px); height: clamp(56px, 17vw, 72px);
  font-size: 30px;
}
/* Bremse optisch von Schub abgesetzt (kuehl statt warm), damit man die
   beiden im Eifer des Gefechts nicht verwechselt. */
.genx-arcade-touch .ga-brake {
  border-color: rgba(41, 197, 246, .55);
  color: #29c5f6;
}
/* Steuer-Icons als SVG statt Unicode-Glyphen — font-unabhaengig und damit in
   JEDEM Browser sichtbar (Chrome zeigte die alten ◄►▲● teils gar nicht).
   Groesse folgt der Button-font-size, Farbe erbt via currentColor. */
.genx-arcade-touch .ga-t .ga-ico {
  width: 1.35em;
  height: 1.35em;
  display: block;
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
  .genx-arcade-touch { display: flex; }
  .genx-arcade-hud { padding-bottom: 4px; }
}

/* Zuverlaessige Einblendung auf Touch-Geraeten (JS-Erkennung) */
.genx-arcade.genx-has-touch .genx-arcade-touch { display: flex; }

/* Handy: Spiel fuellt den sichtbaren Screen (iOS-sicher).
   `svh` zieht die Safari-Leisten ab, damit unten NICHTS abgeschnitten wird;
   72px = sticky Kopfzeile (68) + kleiner Puffer. Titel/Abstaende weg. */
@media (max-width: 680px) {
  .genx-arcade {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  .genx-arcade-frame {
    aspect-ratio: auto;
    /* 68px Kopfzeile + ~24px Puffer, damit unten die Safari-Leiste NICHT
       an den Touch-Buttons klebt. */
    height: calc(100vh - 92px);   /* Fallback fuer alte Browser */
    height: calc(100svh - 92px);  /* iOS: Browser-Leisten abgezogen */
    border-radius: 0 0 14px 14px;
    border-left: none;
    border-right: none;
  }
  /* 5 Buttons oben rechts kompakter, damit sie Leben/Schild nicht verdecken */
  .genx-arcade-mute, .genx-arcade-music, .genx-arcade-next,
  .genx-arcade-loop, .genx-arcade-exit { width: 28px; height: 28px; font-size: 13px; }
  .genx-arcade-mute  { right: 6px; }
  .genx-arcade-music { right: 38px; }
  .genx-arcade-next  { right: 70px; }
  .genx-arcade-loop  { right: 102px; }
  .genx-arcade-exit  { right: 134px; }
  .genx-arcade-hud   { padding-right: 168px; }
  .genx-arcade-touch {
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }
  .genx-arcade-touch .ga-t { width: 64px; height: 64px; }
  .genx-arcade-touch .ga-fire { width: 76px; height: 76px; }

  /* Titel & Abstaende auf dem Handy raus → Spiel dominiert den Screen */
  .genx-section:has(.genx-arcade) { padding-top: 0; margin-top: 0; }
  .genx-section:has(.genx-arcade) .genx-section-head { display: none; }
  .genx-section:has(.genx-arcade) .genx-prose { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .genx-arcade-overlay .ga-msg { animation: none; }
}

/* ============================================================
   LEADERBOARD — Bestenliste unter dem Spiel + im Game-Over
   ============================================================ */

/* Initialen-Eingabe im Game-Over-Overlay */
.genx-arcade-overlay .ga-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.genx-arcade-overlay .ga-entry[hidden] { display: none; }
.genx-arcade-overlay .ga-entry-label {
  font-size: clamp(11px, 2.5vw, 13px);
  letter-spacing: .1em;
  color: #ffd23f;
  text-transform: uppercase;
}
.genx-arcade-overlay .ga-initials {
  width: min(280px, 78vw);
  max-width: 100%;
  padding: 9px 12px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  text-align: center;
  letter-spacing: .06em;
  color: #29c5f6;
  background: #0b0912;
  border: 2px solid #29c5f6;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(41, 197, 246, .35), inset 0 0 12px rgba(0, 0, 0, .6);
  outline: none;
  caret-color: #ffd23f;
}
.genx-arcade-overlay .ga-submit { margin-top: 2px; }

/* Mini-Bestenliste im Overlay */
.genx-arcade-overlay .ga-miniboard {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  width: min(360px, 82%);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.genx-arcade-overlay .ga-miniboard[hidden] { display: none; }

/* Bestenliste-Panel unter dem CRT-Rahmen */
.genx-arcade-board {
  max-width: 880px;
  margin: 16px auto 6px;
  padding: 4px 6px 0;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.genx-arcade-board-title {
  margin: 0 0 10px;
  text-align: center;
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  font-size: clamp(18px, 4.5vw, 26px);
  letter-spacing: .04em;
  color: #ffd23f;
  -webkit-text-stroke: 1px #17101f;
  text-shadow: 0 0 14px rgba(255, 210, 63, .4);
}

/* Die Stile fuer den Kasten "Neu im Spiel" (.genx-neu) stehen bewusst in
   css/genx-ui.css, NICHT hier: Diese Datei wird nur auf Seiten mit dem Spiel
   geladen, der Kasten erscheint aber auch auf der Startseite unter der
   Bestenliste. Hier waere er dort unformatiert. */

.genx-arcade-board-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
  max-height: 340px;              /* Top 50 scrollbar, ~10 Zeilen sichtbar */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #29c5f6 rgba(255, 255, 255, .06);
}
.genx-arcade-board-list::-webkit-scrollbar { width: 8px; }
.genx-arcade-board-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 8px; }
.genx-arcade-board-list::-webkit-scrollbar-thumb { background: #29c5f6; border-radius: 8px; }
.genx-arcade-board-list::-webkit-scrollbar-thumb:hover { background: #5ad2ff; }

/* Eine Zeile: Rang · Kürzel · Punkte */
.gab-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(138, 120, 168, .18);
  font-size: clamp(13px, 3.2vw, 16px);
  letter-spacing: .06em;
  color: #f4ead8;
}
.gab-row:nth-child(1) .gab-ini { color: #ffd23f; }
.gab-row:nth-child(2) .gab-ini { color: #cfd6e2; }
.gab-row:nth-child(3) .gab-ini { color: #cd7f32; }
/* Medaillen-Sterne Platz 1–3 (Gold/Silber/Bronze) */
.gab-star { font-size: 1.1em; line-height: 1; }
.gab-medal-1 .gab-star { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.gab-medal-2 .gab-star { color: #cfd6e2; text-shadow: 0 0 6px rgba(207, 214, 226, .5); }
.gab-medal-3 .gab-star { color: #cd7f32; text-shadow: 0 0 6px rgba(205, 127, 50, .5); }
.gab-rank {
  width: 2.6ch;
  text-align: center;
  color: #9a90b6;
  font-weight: 700;
}
.gab-ini {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: .18em;
  color: #f4ead8;
}
.gab-score {
  color: #ffd23f;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* Erreichter Level (L012) zwischen Rang und Punkten — dezent, in HUD-Orange. */
.gab-lvl {
  color: #ff8c1a;
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: .9;
}
.gab-you-tag {
  margin-left: 8px;
  padding: 1px 7px;
  font-size: .7em;
  letter-spacing: .12em;
  color: #0b0912;
  background: #00ff41;
  border-radius: 4px;
}
.gab-row.gab-you {
  background: rgba(0, 255, 65, .1);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 65, .4);
  animation: gabPop .5s ease;
}
@keyframes gabPop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.gab-empty, .gab-loading {
  padding: 12px;
  text-align: center;
  color: #9a90b6;
  font-size: clamp(12px, 3vw, 15px);
  list-style: none;
}

/* Auf dem Handy nutzt der Spielrahmen die volle Breite → Board einrücken */
@media (max-width: 680px) {
  .genx-arcade-board { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gab-row.gab-you { animation: none; }
}