/* Zeitmaschine: Retro-Haut (Neon, Röhren-TV, VHS-/Kassetten-Etiketten) über der generischen Vorlage.
   Alle Farben hängen an den Variablen der Vorlage (--copper = Akzent). Keine externen Schriften. */

:root {
  --rt-cyan: #4de1ff;
  --rt-gelb: #ffcf4a;
  --rt-mono: ui-monospace, "SF Mono", "Courier New", Menlo, Consolas, monospace;
  --ink-3: #8f8bb0;               /* besser lesbar auf dem dunklen Violett */
  --rt-glow: 0 0 14px color-mix(in srgb, var(--copper) 55%, transparent);
}
[data-theme="light"] {
  --rt-cyan: #0a7e99;
  --rt-gelb: #8a6d10;
  --ink-3: #6b6890;
  --rt-glow: none;
}

/* ---------- Grundton, dezente Scanlines ---------- */
body {
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--copper) 14%, transparent), transparent 70%),
    radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--rt-cyan) 9%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="light"] body { background: var(--bg); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px);
  opacity: .35;
}
[data-theme="light"] body::after { display: none; }

h1 { font-weight: 800; letter-spacing: -.01em; }
:root:not([data-theme="light"]) h1 { text-shadow: 0 0 22px color-mix(in srgb, var(--copper) 45%, transparent); }
#main > h1::after {
  content: ""; display: block; width: 132px; height: 4px; margin-top: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--copper) 0 34%, var(--rt-cyan) 34% 67%, var(--rt-gelb) 67%);
}
h2 { font-family: var(--rt-mono); text-transform: uppercase; letter-spacing: .09em; font-size: 14px; color: var(--rt-cyan); }
h2::before { content: "▶ "; color: var(--copper); font-size: .8em; }

/* ---------- Seitenleiste, Marke, Navigation ---------- */
.side {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #000), var(--surface) 60%, color-mix(in srgb, var(--copper) 10%, var(--surface)));
  border-right: 1px solid var(--line-2);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--copper) 35%, transparent), 6px 0 24px -10px color-mix(in srgb, var(--copper) 45%, transparent);
}
.brand-mark {
  width: 16px; height: 16px; clip-path: none; border-radius: 3px;
  background: linear-gradient(135deg, var(--copper), var(--rt-cyan));
  box-shadow: var(--rt-glow);
}
.brand-name { font-family: var(--rt-mono); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 16px; }
:root:not([data-theme="light"]) .brand-name em { text-shadow: 0 0 10px var(--copper); }
.nav a { font-family: var(--rt-mono); font-size: 13px; letter-spacing: .03em; }
.nav a.on { box-shadow: inset 3px 0 0 var(--copper); text-shadow: 0 0 8px color-mix(in srgb, var(--copper) 60%, transparent); }
[data-theme="light"] .nav a.on { text-shadow: none; }
.nav a[data-nav="spielhalle"]::before { content: "◆ "; color: var(--rt-gelb); }

.top { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 0 color-mix(in srgb, var(--copper) 28%, transparent); }
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--copper); color: var(--copper); }
.search input:focus { border-color: var(--copper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--copper) 25%, transparent); }
a:focus-visible, button:focus-visible, .rt-k:focus-visible { outline: 2px solid var(--rt-cyan); outline-offset: 2px; }

.rt-ton { color: var(--ink-2); }
.rt-ton .rt-w1, .rt-ton .rt-w2 { display: none; }
.rt-ton .rt-aus { display: block; }
.rt-ton.on { color: var(--rt-gelb); border-color: var(--rt-gelb); }
.rt-ton.on .rt-w1, .rt-ton.on .rt-w2 { display: block; }
.rt-ton.on .rt-aus { display: none; }

/* ---------- Karten ---------- */
.card { border-radius: 6px; border: 1px solid var(--line-2); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { border-color: var(--copper); transform: translateY(-2px); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--copper) 55%, transparent); }
[data-theme="light"] .card:hover { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); }
.chip { border-color: color-mix(in srgb, var(--rt-cyan) 55%, var(--line-2)); font-family: var(--rt-mono); font-size: 12.5px; }
.chip:hover { border-color: var(--copper); box-shadow: var(--rt-glow); }
.btn:hover { border-color: var(--copper); }

/* ---------- Platzhalter-Vorschaubild als VHS-/Kassettenetikett ---------- */
.thumb .ph, .consent .ph {
  background:
    radial-gradient(circle at 78% 70%, transparent 0 9px, rgba(255, 255, 255, .22) 9px 11px, transparent 11.5px),
    radial-gradient(circle at 92% 70%, transparent 0 9px, rgba(255, 255, 255, .22) 9px 11px, transparent 11.5px),
    linear-gradient(180deg, hsl(var(--h) 25% 20%), hsl(calc(var(--h) + 30) 35% 9%));
  padding-top: 42px;
}
.thumb .ph::before, .consent .ph::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 10px, rgba(255, 255, 255, .12) 10px 11px),
    linear-gradient(90deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 55) 85% 62%));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.thumb .ph::after, .consent .ph::after {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 3px;
  background: repeating-linear-gradient(90deg, #111 0 6px, transparent 6px 9px);
  opacity: .35;
}
.ph-year { top: 6px; left: 12px; z-index: 1; font: 800 19px/1 var(--rt-mono); color: #12091f; opacity: 1; letter-spacing: 0; }
.ph-play { top: 4px; right: 10px; z-index: 1; width: 26px; height: 26px; background: rgba(18, 9, 31, .78); color: #fff; font-size: 11px; border-radius: 4px; }
.ph-cat { z-index: 1; font-family: var(--rt-mono); opacity: .9; color: var(--rt-gelb); }
.ph-title { z-index: 1; }
.thumb { border-bottom: 1px solid var(--line-2); }

/* ---------- Röhren-TV um den Player ---------- */
.player {
  border: 0; padding: 12px; border-radius: 28px / 24px;
  background:
    radial-gradient(circle at calc(100% - 22px) calc(100% - 6px), #ff3b2f 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 40px) calc(100% - 6px), #6b6490 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 52px) calc(100% - 6px), #6b6490 0 2.5px, transparent 3px),
    linear-gradient(160deg, #4a3b6b, #2c2146 55%, #1d1530);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .4),
    0 14px 30px -8px rgba(0, 0, 0, .65), 0 0 26px -6px color-mix(in srgb, var(--copper) 45%, transparent);
}
[data-theme="light"] .player { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 10px 22px -8px rgba(0, 0, 0, .45); }
.player iframe, .player .consent { border-radius: 20px / 16px; overflow: hidden; background: #000; }
.player iframe { width: 100%; height: 100%; }
.player .consent { inset: 12px; width: auto; height: auto; }
/* Glas mit Scanlines und Randabdunklung; blockiert keine Klicks */
.player::before {
  content: ""; position: absolute; inset: 12px; z-index: 5; pointer-events: none; border-radius: 20px / 16px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .08), transparent 32%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 36px rgba(0, 0, 0, .45);
}
/* Einschaltblitz */
.player::after {
  content: ""; position: absolute; inset: 12px; z-index: 6; pointer-events: none; border-radius: 20px / 16px;
  background: #fff; opacity: 0;
}
.player.tv-on::after { animation: rt-tvon .62s ease-out; }
@keyframes rt-tvon {
  0%   { opacity: 1; clip-path: inset(49.4% 0 49.4% 0); }
  35%  { opacity: 1; clip-path: inset(49.4% 0 49.4% 0); filter: brightness(1.2); }
  60%  { opacity: .85; clip-path: inset(0 0 0 0); }
  75%  { opacity: .35; }
  85%  { opacity: .6; }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
.consent-box { background: rgba(10, 4, 24, .55); }
.consent-btn { box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 20px color-mix(in srgb, var(--copper) 70%, transparent); font-family: var(--rt-mono); letter-spacing: .03em; }
.consent:hover .consent-btn, .consent:focus-visible .consent-btn { transform: scale(1.04); }
@media (max-width: 520px) {
  .player { padding: 7px; border-radius: 20px / 17px; }
  .player .consent, .player::before, .player::after { inset: 7px; }
  .player iframe, .player .consent, .player::before, .player::after { border-radius: 14px / 11px; }
  .consent-note { font-size: 11px; }
  .consent-box { gap: 6px; padding: 8px; }
  .consent-btn { padding: 9px 16px; font-size: 14px; }
}

/* ---------- Kassetten-Zeitleiste ---------- */
.rt-tape {
  margin: 0 0 26px; padding: 16px 16px 6px; border-radius: 10px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--copper) 12%, transparent);
}
.rt-tape-kopf h2 { margin: 0 0 4px; }
.rt-tape-kopf p { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; }
.rt-reihe { margin-bottom: 14px; }
.rt-dek { margin: 0 0 6px; font: 700 12px/1 var(--rt-mono); letter-spacing: .12em; color: var(--rt-gelb); }
.rt-kassetten { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.rt-k {
  display: flex; flex-direction: column; gap: 3px; padding: 5px 5px 4px; border-radius: 5px; min-width: 0;
  background: linear-gradient(160deg, #3a3057, #1e1633); border: 1px solid #4b3f73;
  box-shadow: 0 3px 0 #0d0818; color: #fff; transition: transform .15s ease, box-shadow .15s ease;
}
.rt-k-label {
  display: block; text-align: center; border-radius: 2px; padding: 2px 0 1px;
  background: linear-gradient(90deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 45) 85% 62%));
  color: #12091f;
}
.rt-k-label b { font: 800 12px/1.2 var(--rt-mono); }
.rt-k-win { display: flex; justify-content: space-around; align-items: center; height: 15px; border-radius: 8px; background: #0b0614; }
.rt-k-win u { width: 9px; height: 9px; border-radius: 50%; border: 2px dotted #c9c3ee; box-sizing: border-box; }
.rt-k-n { text-align: center; font: 10px/1.1 var(--rt-mono); color: #d9d4f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rt-k:hover, a.rt-k:focus-visible { transform: translateY(-3px); border-color: var(--copper); box-shadow: 0 6px 0 #0d0818, 0 0 16px color-mix(in srgb, var(--copper) 55%, transparent); }
a.rt-k:hover .rt-k-win u { animation: rt-dreh 1.2s linear infinite; }
.rt-k.off { opacity: .42; filter: saturate(.3); box-shadow: none; cursor: default; }
@keyframes rt-dreh { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .rt-kassetten { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 400px) { .rt-tape { padding: 12px 10px 4px; } .rt-kassetten { gap: 6px; } .rt-k-label b { font-size: 11px; } .rt-k-n { font-size: 9px; } }
[data-theme="light"] .rt-tape { background: var(--surface); }

/* ---------- Spielhalle ---------- */
.rt-cab {
  position: relative; max-width: 760px; padding: 14px; border-radius: 16px;
  background: linear-gradient(160deg, #2a1f47, #170f2b 70%);
  border: 1px solid var(--line-2);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7), 0 0 30px -8px color-mix(in srgb, var(--copper) 40%, transparent);
  color: #e8e2ff;
}
.rt-cab a { color: var(--rt-cyan); }
.rt-cab-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 10px; }
.rt-coin { font: 700 12px/1 var(--rt-mono); letter-spacing: .12em; color: #ff6fb8; animation: rt-blink 1.3s steps(1) infinite; }
@keyframes rt-blink { 50% { opacity: .25; } }
.rt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-tab { font: 600 12.5px/1 var(--rt-mono); padding: 8px 12px; border-radius: 4px; border: 1px solid #4b3f73; background: #20173a; color: #d9d4f5; }
.rt-tab.on { background: var(--rt-gelb); border-color: var(--rt-gelb); color: #12091f; }
.rt-tab:not(.on):hover { border-color: var(--copper); }
.rt-screen { border-radius: 24px / 18px; padding: 8px; background: #0d0818; box-shadow: inset 0 0 0 3px #3a3057; }
#rt-game {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; background: #0b0a10; touch-action: none;
  image-rendering: pixelated; border-radius: 18px / 14px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}
.rt-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; margin-top: 12px; align-items: end; }
.rt-hud b { font: 800 16px/1.2 var(--rt-mono); color: var(--rt-gelb); letter-spacing: .06em; text-transform: uppercase; }
.rt-hud p { margin: 4px 0 0; font-size: 13.5px; color: #cfc9ee; }
.rt-hud .rt-ctrl { font-size: 12.5px; color: #a9a0c9; }
.rt-stand { font: 600 13px/1.5 var(--rt-mono); text-align: right; color: #fff; }
.rt-start { margin-top: 8px; background: var(--copper); border-color: var(--copper); color: #12091f; font-weight: 700; }
.rt-start:hover { filter: brightness(1.1); }
@media (max-width: 560px) {
  .rt-hud { grid-template-columns: 1fr; }
  .rt-stand { text-align: left; }
  .rt-cab { padding: 10px; }
}

/* ---------- Bewegung zurücknehmen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::after { display: none; }
  .card:hover, a.rt-k:hover { transform: none; }
}