/* TFT Arcade – Gestaltung: Fantasy-Kirmes bei Nacht mit Retro-Akzenten.
   Schriften liegen auf dem eigenen Server (keine Verbindung zu Google Fonts – DSGVO). */

/* ───────── Schriften ───────── */
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/LilitaOne-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Barlow-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Barlow-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Barlow-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/BarlowCondensed-700-latin.woff2) format('woff2'); }
/* Pixel-Schrift nur für Retro-Akzente (Ticket-Etikett) */
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/PressStart2P-latin.woff2) format('woff2'); }

/* ───────── Farben & Grundwerte ───────── */
:root {
  --bg: #160a28;
  --panel: rgba(29, 13, 52, .86);
  --line: rgba(255, 210, 140, .16);
  --line-2: rgba(255, 210, 140, .32);
  --text: #f7f0ff;
  --muted: #cdbde6;
  --dim: #a896c4;
  --gold: #ffc94a;
  --gold-2: #f59e1b;
  --coral: #ff7a6b;
  --teal: #46e3d2;
  --violet: #c39bff;
  --cream: #fff3d6;
  --ink: #2a1347;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
  --hdr: 66px;
  --f-display: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --f-pixel: 'Press Start 2P', 'Courier New', monospace;
}
/* Farbe einer Bude/Karte: --c Akzent, --c2 dunklere Stufe, --c-ink Schrift auf Akzent */
.c-gold { --c: #ffc94a; --c2: #f08c12; --c-ink: #2b1500; }
.c-coral { --c: #ff6f61; --c2: #e0465a; --c-ink: #2d0606; }
.c-teal { --c: #46e3d2; --c2: #10a596; --c-ink: #032622; }
.c-violet { --c: #b98aff; --c2: #8b5cf6; --c-ink: #1c0840; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative; min-height: 100vh; overflow-x: hidden;
  font: 500 1.0625rem/1.55 var(--f-body); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gold); }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; line-height: 1.08; color: #fff; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
p { margin: 0 0 1em; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.wrap-wide { width: min(1680px, 90vw); }

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--gold); color: #2b1500; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ───────── Kulisse (Hintergrundbild) ─────────
   Steht als erstes in <main>. Unterseiten: beginnt unter der Kopfleiste, gedämpft – die Spielfläche hat Vorrang.
   Startseite: main rutscht unter die durchsichtige Kopfleiste, das Bild füllt den ersten Bildschirm. */
main { position: relative; }
main > :not(.scene) { position: relative; z-index: 1; }
.scene { position: absolute; inset: 0 0 auto; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% top; }
.scene::after { content: ''; position: absolute; inset: 0; }
/* Startseite: Bild füllt die ganze Breite (groß), unten wird es abgeschnitten.
   Pinguin und Geschenke aus den unteren Ecken liegen als eigene Ausschnitte unten links/rechts (über dem Abdunkel-Verlauf). */
.scene-home { height: max(100svh, 52vw); }
.scene-home .scene-img { object-position: center top; }
.scene-home::after {
  background:
    linear-gradient(90deg, rgba(16, 7, 30, .78) 0%, rgba(16, 7, 30, .45) 28%, rgba(16, 7, 30, 0) 52%),
    linear-gradient(180deg, rgba(16, 7, 30, .55) 0, rgba(16, 7, 30, 0) 12%, rgba(16, 7, 30, 0) 40%, rgba(22, 10, 40, .72) 66%, var(--bg) 100%);
}
.scene-corner { position: absolute; z-index: 1; top: calc(max(100svh, 640px) - clamp(140px, 22vh, 300px)); height: clamp(140px, 22vh, 300px); width: auto; }
.scene-corner-l { left: 0; }
.scene-corner-r { right: 0; }
/* Ticket mittig zwischen den Ecken, wie im Mockup */
@media (min-width: 1181px) {
  .home-stage .daily { max-width: min(1240px, 66vw); margin-inline: auto; }
  .home-stage .ticket { gap: 18px; padding-inline: 30px; }
  .home-stage .ticket-label span { max-width: 9.5em; }
  .home-stage .ticket-title { font-size: clamp(1.05rem, 2.3vh, 1.7rem); }
}
.scene-sub { height: clamp(360px, 46vw, 620px); }
.scene-sub img { opacity: .5; filter: saturate(.85) blur(1px); transform: scale(1.02); }
.scene-sub::after { background: linear-gradient(180deg, rgba(22, 10, 40, .35) 0%, rgba(22, 10, 40, .7) 55%, var(--bg) 100%); }
.footer { position: relative; z-index: 1; }

/* ───────── Kopfleiste ───────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(18, 8, 34, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .25s;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 74, .55) 20%, rgba(255, 201, 74, .55) 80%, transparent);
}
/* Startseite: Kopfleiste durchsichtig – das Bild scheint wie im Mockup bis ganz nach oben durch */
.is-home .topbar:not(.is-scrolled) { background: linear-gradient(180deg, rgba(14, 6, 26, .5), rgba(14, 6, 26, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Logo links · Menü mittig · Knopf rechts */
.topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: var(--hdr); }
.is-home .topbar-in { width: min(1680px, 90vw); }
.topbar-side { justify-self: end; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: .6em 1.2em; border-radius: 999px; white-space: nowrap;
  font: 600 .98rem/1 var(--f-body); color: var(--cream); text-decoration: none; background: rgba(14, 6, 26, .35);
  border: 1.5px solid rgba(255, 241, 214, .7); transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.btn-outline:hover { color: var(--gold); border-color: var(--gold); background: rgba(14, 6, 26, .6); transform: translateY(-1px); }
.btn-outline .ui { width: 18px; height: 18px; }

/* Logo: Stern + Schriftzug */
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; transition: transform .2s; }
.logo:hover { transform: translateY(-1px) rotate(-1deg); }
.logo-star { width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 2px 0 #a5520a) drop-shadow(0 0 10px rgba(255, 190, 60, .55)); }
.logo-star path:first-child { fill: #ffc94a; }
.logo-star circle { fill: #3a1a00; }
.logo-star path:last-child { stroke: #3a1a00; }
.logo-tft, .logo-arcade { font: 400 1.75rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.logo-tft { color: var(--cream); }
.logo-arcade { color: var(--gold); text-shadow: 0 2px 0 #8f4300, 0 0 14px rgba(255, 200, 80, .45); }
.logo-sm .logo-star { width: 32px; height: 32px; }
.logo-sm .logo-tft, .logo-sm .logo-arcade { font-size: 1.4rem; }

.mainnav > ul { display: flex; gap: clamp(10px, 2.4vw, 44px); list-style: none; margin: 0; padding: 0; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  font: 600 1.06rem/1 var(--f-body); color: #efe6ff; text-decoration: none; transition: color .2s;
  background: none; border: 0; cursor: pointer;
}
.nav-chevron { width: 16px; height: 16px; transition: transform .2s; }
.nav-mega.is-open .nav-chevron { transform: rotate(180deg); }
.nav-trigger[data-current], .nav-mega.is-open .nav-trigger { color: var(--gold); }
.nav-trigger[data-current]::after { transform: scaleX(1) !important; }

/* ───────── Mega-Menü „Spielhalle“: die vier Bereiche als Buden ───────── */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; padding: 16px 0 26px;
  background: linear-gradient(180deg, rgba(22, 10, 40, .97), rgba(15, 6, 28, .98)); border-bottom: 1px solid var(--line-2);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s, transform .25s, visibility 0s .25s;
}
.nav-mega.is-open .mega, .nav-mega:not([data-js]):focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s; }
.mega-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mega-booth {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #241140), #1b0c32 75%);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mega-booth:hover { border-color: var(--c); box-shadow: 0 0 30px -8px var(--c); transform: translateY(-2px); }
.mega-booth .awning { height: 16px; }
.mega-booth .awning::after { height: 7px; background:
    radial-gradient(ellipse 13px 7px at 13px 0, var(--c) 97%, transparent 100%) 0 0 / 52px 7px repeat-x,
    radial-gradient(ellipse 13px 7px at 39px 0, #e9d6bb 97%, transparent 100%) 0 0 / 52px 7px repeat-x; }
.mega-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 10px; color: #fff; text-decoration: none; }
.mega-art { flex: none; width: 52px; height: 52px; color: var(--c); filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--c) 45%, transparent)); transition: transform .2s; }
.mega-head:hover .mega-art { transform: scale(1.08) rotate(-4deg); }
.mega-head b { display: block; font: 400 1.35rem/1.1 var(--f-display); transition: color .2s; }
.mega-head:hover b { color: var(--c); }
.mega-head small { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.3; color: var(--muted); }
.mega-games { display: grid; flex: 1; align-content: start; gap: 2px; margin: 0; padding: 4px 10px; list-style: none; }
.mega-games a, .mega-games .is-soon { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: .95rem; font-weight: 600; color: #efe6ff; text-decoration: none; }
.mega-games a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mega-games .is-soon { color: var(--dim); }
.mega-game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-games em { margin-left: auto; font: 700 .7rem/1 var(--f-cond); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
.mega-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.mega-dot.is-live { background: #3ddc84; box-shadow: 0 0 8px rgba(61, 220, 132, .8); }
.mega-dot.is-bau { background: var(--gold); }
.mega-dot.is-bald { background: rgba(255, 255, 255, .25); }
.mega-all { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 14px; font: 700 .82rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.mega-all:hover { text-decoration: underline; }
.mega-all .ui { width: 16px; height: 16px; }
.nav-link .art { display: none; width: 26px; height: 26px; color: var(--c); }
.nav-link::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--gold); box-shadow: 0 0 8px rgba(255, 201, 74, .8); transform: scaleX(0); transition: transform .2s;
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { transform: scaleX(.5); }
.nav-link[aria-current] { color: var(--gold); }
.nav-link[aria-current]::after { transform: scaleX(1); }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.25em; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 1rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .05em;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn .ui { width: 1.15em; height: 1.15em; flex: none; }
.btn-lg { font-size: 1.15rem; padding: .9em 1.6em; }
.btn-sm { font-size: .88rem; padding: .55em 1em; }
.btn-gold {
  background: linear-gradient(180deg, #ffe17c, #ffb733 55%, #f08c12); color: #2b1500;
  box-shadow: 0 4px 0 #a5520a, 0 10px 24px -8px rgba(255, 170, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #a5520a, 0 16px 30px -8px rgba(255, 170, 40, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #a5520a, 0 6px 14px -6px rgba(255, 170, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* großer Start-Button der Startseite: normale Schreibweise wie im Mockup */
.btn-xl {
  padding: .8em 1.9em; font: 700 clamp(1.1rem, 2.3vh, 1.45rem)/1 var(--f-body); text-transform: none; letter-spacing: 0;
  border: 2px solid rgba(255, 244, 200, .7);
}
.btn-red {
  font: 700 1.05rem/1 var(--f-body); text-transform: none; letter-spacing: 0; color: #fff;
  background: linear-gradient(180deg, #ff7676, #e8394f); box-shadow: 0 4px 0 #8f1d2c, 0 10px 22px -8px rgba(255, 80, 90, .7);
}
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #8f1d2c, 0 16px 28px -8px rgba(255, 80, 90, .85); }
.btn-coral, .btn-teal, .btn-violet {
  background: linear-gradient(180deg, var(--c), var(--c2)); color: var(--c-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c2) 55%, #000), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-ghost { background: rgba(255, 255, 255, .07); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 220, 160, .38); }
.btn-ghost:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.ui { width: 18px; height: 18px; flex: none; }

/* ───────── Symbole (Inline-SVG) ───────── */
.art { width: 100%; height: 100%; overflow: visible; }
.art .i-a { fill: currentColor; }
.art .i-d { fill: var(--ink); }
.art .i-l { fill: var(--cream); }
.art .i-s { stroke: var(--cream); fill: none; }
.art [fill=none] { fill: none; }
.art .i-a[fill=none] { stroke: currentColor; }
.art .i-l[fill=none] { stroke: var(--cream); }
.art .i-d[fill=none] { stroke: var(--ink); }
.deco-star { width: 1em; height: 1em; flex: none; fill: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 80, .6)); }

/* ───────── Startseite: erster Bildschirm ───────── */
.home-stage { display: flex; flex-direction: column; min-height: 100svh; padding-top: var(--hdr); }
.is-home main { margin-top: calc(-1 * var(--hdr)); }

/* Hero oben links */
.hero { flex: 1 0 auto; display: flex; align-items: center; padding: clamp(12px, 2.4vh, 48px) 0 clamp(8px, 1.6vh, 30px); }
.hero-in { position: relative; }
.hero-title { display: block; max-width: 760px; font-weight: 400; }
.ribbon {
  display: inline-flex; align-items: center; gap: .7em; margin: 0 0 clamp(8px, 1.6vh, 26px) .2em;
  padding: .55em 1.5em; transform: rotate(-4deg); transform-origin: left center;
  font: 700 clamp(.82rem, 1.75vh, 1.08rem)/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: #fff1e0;
  background: linear-gradient(180deg, #ff6e5f, #e23d4c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  filter: drop-shadow(0 4px 0 rgba(90, 10, 20, .55));
}
.ribbon .deco-star { width: .95em; height: .95em; fill: #4a0d14; filter: none; }
.hero-main {
  display: block; transform: rotate(-3deg); transform-origin: left bottom;
  font: 400 clamp(3rem, min(5.6vw, 8.6vh), 8rem)/.96 var(--f-display); letter-spacing: .005em; color: #fff1d6;
  text-shadow: 0 2px 0 #f0c98c, 0 4px 0 #8a3d1c, 0 7px 0 #4d1a35, 0 14px 26px rgba(0, 0, 0, .6);
}
.hero-line { display: block; white-space: nowrap; }
.hero-line + .hero-line { padding-left: .12em; }
.hero-line .deco-star { display: inline-block; width: .42em; height: .42em; margin-right: .12em; vertical-align: .18em; fill: #ff8a3d; filter: drop-shadow(0 3px 0 #7a2f00); }
.swoosh { position: relative; display: inline-block; }
.swoosh::after {
  content: ''; position: absolute; left: .15em; right: -.25em; bottom: -.2em; height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C55 6 120 4 196 9' fill='none' stroke='%23ffc94a' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M30 21c40-6 90-8 130-6' fill='none' stroke='%23f08c12' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 190, 60, .6));
}
.hero-sub {
  max-width: 44ch; margin: clamp(14px, 2.4vh, 36px) 0 clamp(12px, 2vh, 32px);
  font-size: clamp(1.08rem, 2.2vh, 1.45rem); font-weight: 600; color: #f8eedd; text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

/* Spielauswahl mit Filter-Pillen */
.games-section { text-align: center; }
.deco-title {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 400 clamp(1.45rem, 3.3vh, 2.2rem)/1.1 var(--f-display); color: #fff1d6; text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.deco-title::before, .deco-title::after { content: ''; flex: 0 1 clamp(40px, 7vw, 120px); height: 2px; }
.deco-title::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.deco-title::after { background: linear-gradient(90deg, var(--gold), transparent); }
.deco-title .deco-star { width: .7em; height: .7em; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(8px, 1.4vh, 20px) 0 clamp(12px, 2vh, 28px); }
.pill {
  padding: .5em 1.35em; border-radius: 999px; cursor: pointer;
  font-size: .95rem; font-weight: 600; color: var(--cream); background: rgba(20, 8, 36, .65);
  border: 1.5px solid rgba(255, 220, 160, .55); transition: background .2s, border-color .2s, color .2s;
}
.pill:hover { border-color: var(--gold); }
.pill[aria-pressed="true"] { color: #2b1500; background: linear-gradient(180deg, #fff3d0, #ffd27a); border-color: transparent; box-shadow: 0 0 16px rgba(255, 200, 100, .4); }
.filter-more { margin: 14px 0 0; }

/* ───────── Abschnitte ───────── */
.section { padding: clamp(32px, 5vw, 60px) 0; }
.section-tight { margin: 0 0 clamp(32px, 4vw, 48px); }
.section-head { margin-bottom: 28px; text-align: center; }
.section-title { margin: 0 0 18px; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 700 .85rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.eyebrow .ui { width: 16px; height: 16px; }

/* Markise (gestreiftes Dach mit Bogenkante) */
.awning {
  position: relative; height: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12)), repeating-linear-gradient(90deg, var(--c) 0 26px, #fbead2 26px 52px);
}
.awning::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background:
    radial-gradient(ellipse 13px 9px at 13px 0, var(--c) 97%, transparent 100%) 0 0 / 52px 9px repeat-x,
    radial-gradient(ellipse 13px 9px at 39px 0, #e9d6bb 97%, transparent 100%) 0 0 / 52px 9px repeat-x;
}

/* Klickfläche über die ganze Karte */
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: var(--radius); }

/* ───────── Buden (Kategorien) ───────── */
.booths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.booths-3 { grid-template-columns: repeat(3, 1fr); }
.booth {
  position: relative; overflow: hidden; padding-bottom: 22px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #241140), #1b0c32 72%);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.booth:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: var(--shadow), 0 0 34px -6px color-mix(in srgb, var(--c) 65%, transparent); }
.booth-art { width: 92px; height: 92px; margin: 26px auto 10px; color: var(--c); filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--c) 45%, transparent)); transition: transform .25s; }
.booth:hover .booth-art { transform: scale(1.07) rotate(-4deg); }
.booth-name { font: 400 1.75rem/1.1 var(--f-display); color: #fff; }
.booth-tag { margin: .4em 18px .9em; font-size: .98rem; color: var(--muted); }
.booth-count {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font: 700 .84rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--c);
}
.booth-count .ui { width: 16px; height: 16px; transition: transform .2s; }
.booth:hover .booth-count .ui { transform: translateX(4px); }

/* ───────── Spielkarten (wie kleine Buden mit Bild) ───────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; text-align: left; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.gcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: #1a0b30; border: 2px solid var(--c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 26px -6px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.gcard .awning { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 12px; }
.gcard .awning::after { height: 7px; background:
    radial-gradient(ellipse 13px 7px at 13px 0, var(--c) 97%, transparent 100%) 0 0 / 52px 7px repeat-x,
    radial-gradient(ellipse 13px 7px at 39px 0, #e9d6bb 97%, transparent 100%) 0 0 / 52px 7px repeat-x; }
.gcard-art { position: relative; height: clamp(120px, 16vh, 260px); overflow: hidden; background: #170a2b; }
.cards:not(.cards-4) .gcard-art { height: 170px; }
.gcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gcard-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 5, 24, .7)); }
/* Ausschnitt aus dem Kirmes-Bild + Symbol, solange es keine eigene Illustration gibt */
.gcard-emblem {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 30%, transparent), rgba(14, 6, 28, .6) 70%);
}
.gcard-emblem .art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(56px, 8.5vh, 100px); height: clamp(56px, 8.5vh, 100px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); transition: transform .25s; }
.gcard-tag {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; padding: 5px 12px; border-radius: 999px;
  font: 700 .8rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink);
  background: var(--c); box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.gcard-status { position: absolute; right: 10px; top: 18px; z-index: 2; }
.gcard-status .badge { background: rgba(18, 8, 34, .88); }
.gcard-body { flex: 1; padding: clamp(10px, 1.6vh, 18px) 16px clamp(12px, 1.8vh, 20px); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #1d0c33), #170a29); border-top: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.gcard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.gcard-title { margin: 0 0 4px; font: 400 clamp(1.2rem, 2.5vh, 1.6rem)/1.1 var(--f-display); color: #fff1d6; }
.gcard-hook { margin: 0; font-size: .95rem; color: #e6dcf5; }
.gcard-go {
  display: grid; place-items: center; width: clamp(40px, 4.6vh, 50px); height: clamp(40px, 4.6vh, 50px); border-radius: 50%;
  color: #2b1500; background: linear-gradient(180deg, #ffe07a, #f5a623); box-shadow: 0 3px 0 #a5520a, 0 0 16px rgba(255, 190, 60, .45);
  transition: transform .2s;
}
.gcard-go .ui { width: 50%; height: 50%; stroke-width: 2.6; }
.gcard-text { margin: 12px 0 12px; font-size: .95rem; color: var(--muted); }
.gcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.meta { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--dim); }
.meta .ui { width: 16px; height: 16px; }
.meta-cat { margin-left: auto; }
.gcard-record { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; font-weight: 700; color: var(--gold); }
.gcard-record .ui { width: 16px; height: 16px; }
.gcard:not(.is-bald):hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 40px -4px color-mix(in srgb, var(--c) 75%, transparent), var(--shadow); }
.gcard:not(.is-bald):hover .gcard-img { transform: scale(1.06); }
.gcard:not(.is-bald):hover .gcard-go { transform: translateX(3px) scale(1.06); }
.gcard.is-bald { border-style: dashed; }
.gcard.is-bald .gcard-img { filter: saturate(.5) brightness(.75); }
.gcard.is-bald .gcard-go { color: var(--dim); background: rgba(255, 255, 255, .1); box-shadow: none; }

/* Etiketten */
.badge, .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.badge { font: 700 .76rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.badge-live { color: #8af5e8; background: rgba(70, 227, 210, .14); box-shadow: inset 0 0 0 1px rgba(70, 227, 210, .5); }
.badge-bau { color: #ffd877; background: rgba(255, 201, 74, .13); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .5); }
.badge-bald { color: #dccff0; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.badge-demo { color: #ffb0a6; background: rgba(255, 122, 107, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 107, .55); }
.chip { font-size: .84rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .07); }
.chip .ui { width: 14px; height: 14px; }
.chip-demo { color: #ffb0a6; background: rgba(255, 122, 107, .12); }

/* ───────── Tageschallenge (Ticket-Banner) ───────── */
.daily { margin: clamp(14px, 2.4vh, 36px) 0 clamp(14px, 2.4vh, 36px); padding: 0 22px; }
.ticket {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 36px);
  padding: clamp(12px, 1.8vh, 20px) clamp(28px, 3.4vw, 56px);
  background: linear-gradient(90deg, #4c1232, #3a0f3c 50%, #4c1232);
  border: 2px solid #f5b13a; border-radius: 14px;
  box-shadow: inset 0 0 0 4px rgba(20, 4, 20, .55), inset 0 0 0 5.5px rgba(245, 177, 58, .45), 0 0 34px -6px rgba(255, 170, 40, .45), var(--shadow);
}
/* goldene Abrisse links und rechts */
.ticket::before, .ticket::after {
  content: '★'; position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 60%;
  font-size: 15px; color: #3a1500; background: linear-gradient(180deg, #ffd36a, #e8961c);
  transform: translateY(-50%);
}
.ticket::before { left: -24px; padding-left: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); border-radius: 6px 0 0 6px; }
.ticket::after { right: -24px; padding-right: 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); border-radius: 0 6px 6px 0; }
.ticket-label {
  display: flex; align-items: center; gap: 12px; margin: 0; padding-right: clamp(14px, 2vw, 32px); border-right: 2px dashed rgba(245, 177, 58, .45);
  font: 400 clamp(.68rem, 1.4vh, .88rem)/1.5 var(--f-pixel); text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 #6b2c00;
}
.ticket-label .ui { width: 30px; height: 30px; }
.ticket-title { font: 400 clamp(1.2rem, 2.8vh, 1.8rem)/1.15 var(--f-display); color: #fff1d6; }
.ticket-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; font-size: .92rem; color: var(--muted); }
.ticket-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.ticket-meta .ui { width: 15px; height: 15px; }
.ticket-meta b { font-variant-numeric: tabular-nums; color: #fff; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes twinkle { 50% { opacity: .45; } }

/* ───────── So läuft’s ───────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 26px 22px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.step-n {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%;
  font: 400 1.5rem/1 var(--f-display); color: #2b1500; background: linear-gradient(180deg, #ffe17c, #f5a623); box-shadow: 0 3px 0 #a5520a;
}
.steps h3 { margin-bottom: 6px; font: 400 1.35rem/1.15 var(--f-display); color: #fff; }
.steps p { margin: 0; color: var(--muted); }

/* ───────── Unterseiten: Kopf ───────── */
.page-top { padding-top: clamp(18px, 3vw, 30px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .94rem; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.page-head, .game-head {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(18px, 3vw, 30px);
  margin-bottom: 26px; padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 34px); border-radius: 24px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 18%, rgba(30, 14, 54, .92)), rgba(24, 11, 44, .9) 62%);
  border: 1.5px solid color-mix(in srgb, var(--c) 42%, transparent); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.page-head-art { width: clamp(76px, 10vw, 120px); height: clamp(76px, 10vw, 120px); color: var(--c); filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.page-head h1, .game-head h1 { margin: 0 0 10px; font-size: clamp(2rem, 4.4vw, 3.3rem); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.lead { max-width: 64ch; margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #eadff9; }
.head-count { margin: 12px 0 0; font: 700 .86rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.page-head .btn { margin-top: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ───────── Spielseite ───────── */
.howto { margin-bottom: 24px; }
.howto-title { margin-bottom: 12px; font-size: 1.5rem; }
.howto-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 14px; }
.howto-item { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.howto-item h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 .95rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.howto-item p, .howto-item ul { margin: 0; color: #e9dff8; }
.howto-item ul { padding-left: 1.1em; }
.howto-item li + li { margin-top: 4px; }
.more { margin-top: 12px; padding: 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.more summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 700; color: #fff; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 201, 74, .16); color: var(--gold); font: 400 1.1rem/1 var(--f-display); }
.more[open] summary::before { content: '–'; }
.more p { margin: 0 0 14px; color: var(--muted); }

.play { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 22px; margin-bottom: clamp(36px, 5vw, 56px); }
.play-side { position: sticky; top: 90px; display: grid; gap: 16px; }

.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.modes legend { float: left; margin-right: 6px; font: 700 .86rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mode { position: relative; }
.mode input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mode span { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 700; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .2s, color .2s; }
.mode input:hover + span { background: rgba(255, 255, 255, .13); }
.mode input:checked + span { background: var(--gold); color: #2b1500; box-shadow: none; }
.mode input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }

.stage {
  position: relative; min-height: 470px; overflow: hidden; border-radius: 22px;
  background: radial-gradient(ellipse at 50% 0%, rgba(130, 70, 210, .28), transparent 60%), #120722;
  border: 2px solid rgba(255, 210, 140, .3);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 70px rgba(0, 0, 0, .6), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.stage::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 9px; height: 6px; opacity: .75;
  background: radial-gradient(circle, #ffe9a8 0 2px, rgba(255, 200, 90, .4) 2.6px, transparent 3.2px) 0 0 / 16px 6px repeat-x;
  animation: twinkle 2.4s ease-in-out infinite;
}
.stage-msg { padding: 40px; text-align: center; color: var(--muted); }
.stage-build { display: flex; flex-direction: column; align-items: center; padding: 46px 22px 36px; text-align: center; }
.build-sign {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px;
  font: 700 .95rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: #ffd877; background: #2b1500;
  border: 4px solid transparent; border-image: repeating-linear-gradient(-45deg, #ffc94a 0 9px, #2b1500 9px 18px) 6;
}
.build-art { width: 132px; height: 132px; margin: 26px 0 10px; color: var(--c); filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--c) 45%, transparent)); animation: bob 3.2s ease-in-out infinite; }
.build-title { margin-bottom: 14px; font-size: 1.7rem; }
.plan { display: grid; gap: 8px; width: 100%; max-width: 470px; margin: 0 0 18px; padding: 0; list-style: none; text-align: left; }
.plan li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; color: #ece2fb; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); border-radius: 10px; }
.plan .ui { margin-top: 3px; color: var(--teal); }
.build-note { margin: 0; color: var(--muted); }

.result {
  margin-top: 16px; padding: 28px 22px; text-align: center; border-radius: 22px;
  background: linear-gradient(160deg, #2e1556, #1a0b30); border: 2px solid var(--gold-2); box-shadow: 0 0 44px -10px rgba(255, 180, 60, .55);
}
.result:focus { outline: none; }
.result-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 .86rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.result-title { font-size: 2.1rem; }
.result-value { margin: .2em 0; font: 400 3.2rem/1 var(--f-display); color: var(--gold); text-shadow: 0 3px 0 #7a2f00; }
.result-record { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 700; color: #2b1500; background: var(--gold); }
.result-lines { display: grid; gap: 4px; margin: 12px 0 18px; padding: 0; list-style: none; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Seitenbereich */
.panel { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-head h2 { font-size: 1.5rem; }
.panel-kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 .84rem/1.2 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.panel-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .88rem; color: var(--dim); }
.panel-note .ui { width: 16px; height: 16px; margin-top: 2px; }
.record-value { margin: 6px 0 4px; font: 400 2.4rem/1 var(--f-display); color: #fff; }
.record-sub { margin: 0; font-size: .95rem; color: var(--muted); }
.board-mode { margin: 0 0 10px; font-size: .92rem; color: var(--muted); }
.board-mode b { color: #fff; }
.board-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.board-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.board-list li.empty { display: block; color: var(--muted); }
.rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 400 .95rem/1 var(--f-display); color: var(--dim); }
.board-list li:nth-child(1) .rank { color: #3a2300; background: linear-gradient(180deg, #ffe17c, #f5a623); }
.board-list li:nth-child(2) .rank { color: #1e2430; background: linear-gradient(180deg, #f1f4f9, #b9c2d0); }
.board-list li:nth-child(3) .rank { color: #2f1606; background: linear-gradient(180deg, #f3b98a, #c87a43); }
.board-list li.is-you { background: rgba(70, 227, 210, .14); box-shadow: inset 0 0 0 1px rgba(70, 227, 210, .55); }
.board-list li.is-you .rank { color: #032622; background: var(--teal); }
.who { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.val { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.info-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.info-list h3 { margin-bottom: 4px; font: 700 1.02rem/1.3 var(--f-body); color: #fff; }
.info-list p { margin: 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700; color: var(--gold); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .ui { width: 16px; height: 16px; }
.history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.history-list li { padding: 10px 12px; color: #ece2fb; background: rgba(255, 255, 255, .045); border-left: 3px solid var(--violet); border-radius: 10px; }
.history-list small { display: block; color: var(--dim); }

/* ───────── Gemeinsamer Rahmen der Spielseiten ───────── */
/* Kopf schlank halten, damit die Spielfläche auf einem 1080p-Bildschirm ohne Scrollen sichtbar ist */
.game-head { gap: clamp(14px, 2vw, 24px); padding-block: clamp(14px, 1.6vw, 20px); margin-bottom: 14px; }
.game-head .page-head-art { width: clamp(56px, 5.5vw, 76px); height: clamp(56px, 5.5vw, 76px); }
.game-head h1 { margin-bottom: 6px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.game-head .lead { max-width: none; font-size: clamp(1rem, 1.3vw, 1.12rem); }
.game-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.cat-link { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font: 700 .9rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.cat-link .art { width: 20px; height: 20px; }
.cat-link:hover { text-decoration: underline; }
/* Kurzanleitung als eine Leiste; Klick klappt Regeln & Details auf */
.howto { margin: 0 0 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); }
.howto-short { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; list-style: none; }
.howto-short::-webkit-details-marker { display: none; }
.howto-short .ui { color: var(--c); }
.howto-short b { color: #fff; }
.howto-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; font-size: .92rem; font-weight: 700; color: var(--gold); }
.howto-more::after { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 201, 74, .16); font: 400 1rem/1 var(--f-display); }
.howto[open] .howto-more::after { content: '–'; }
.howto-short:hover .howto-more { text-decoration: underline; }
.howto-body { padding: 4px 16px 16px; }
.howto-body .howto-grid { margin-bottom: 12px; }
.howto-body .howto-item { background: rgba(255, 255, 255, .03); }
.howto-note { margin: 0; font-size: .94rem; color: var(--muted); }
/* Spielrahmen: dunkle Fläche, Glühbirnen oben, Akzentfarbe der Kategorie */
.play .stage { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 70px rgba(0, 0, 0, .6), 0 0 44px -16px color-mix(in srgb, var(--c) 55%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.stage-live { min-height: 0; padding: clamp(22px, 2.4vw, 30px) clamp(14px, 2.2vw, 26px) clamp(16px, 2vw, 24px); }
.play .result { border-color: var(--c); box-shadow: 0 0 44px -10px color-mix(in srgb, var(--c) 55%, transparent); }
.game-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 clamp(28px, 4vw, 44px); padding: 16px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.game-feedback { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.game-feedback .ui { color: var(--gold); }
.ui-back { transform: rotate(180deg); }

/* ───────── Bausteine für alle Spiele (Startbildschirm, Anzeigezeile, Zeitbalken, Meldung) ───────── */
.game-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(20px, 4vh, 48px) 8px; text-align: center; }
.game-kicker { margin: 0; font: 700 .86rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.game-title { font-size: clamp(2.2rem, 4vw, 3.3rem); color: #fff1d6; text-shadow: 0 3px 0 #6b2c1a, 0 6px 16px rgba(0, 0, 0, .5); }
.game-text { max-width: 48ch; margin: 0 0 6px; color: var(--muted); }
kbd { padding: 1px 7px; border-radius: 5px; font: 700 .9em/1.4 var(--f-cond); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-bottom-width: 2px; }
.game-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-weight: 600; color: var(--muted); }
.game-hud b { color: #fff; font-variant-numeric: tabular-nums; }
.game-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.game-dots li { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background .2s, box-shadow .2s; }
.game-dots li.is-now { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.game-dots li.is-ok { background: #3ddc84; box-shadow: none; }
.game-dots li.is-near { background: #ffc94a; box-shadow: none; }
.game-dots li.is-bad { background: #ff5a6a; box-shadow: none; }
.game-timer { height: 6px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.game-timer span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--gold), #fff0b5); box-shadow: 0 0 10px rgba(255, 201, 74, .6); }
.game-msg { min-height: 1.55em; margin: 0; text-align: center; font-size: 1.08rem; font-weight: 600; color: var(--muted); }
.game-msg b { color: #fff; }
.game-msg.is-ok, .game-msg.is-near, .game-msg.is-bad { font-weight: 700; }
.game-msg.is-ok { color: #7af0a8; }
.game-msg.is-near { color: #ffd877; }
.game-msg.is-bad { color: #ff9aa4; }
.cost-1 { --k: #aab2c0; } .cost-2 { --k: #3fcf6e; } .cost-3 { --k: #3ba3ff; } .cost-4 { --k: #c264f2; } .cost-5 { --k: #ffbf3a; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ───────── Spiel: Was kostet der? ───────── */
.kq { display: flex; flex-direction: column; gap: 10px; }
.kq-preview { display: flex; gap: 10px; margin: 6px 0; }
/* Bildhöhe richtet sich nach der Bildschirmhöhe, damit die Kostenknöpfe ohne Scrollen sichtbar bleiben */
.kq-figure { position: relative; width: 100%; aspect-ratio: 2 / 1; max-height: max(200px, calc(100svh - 630px)); margin: 0; overflow: hidden; border-radius: 16px; background: #0b0416; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); transition: box-shadow .25s; }
.kq-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.kq-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 14px;
  font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1 var(--f-display); color: #fff1d6; text-shadow: 0 3px 0 rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, transparent, rgba(8, 3, 16, .88));
}
.kq-figure.is-ok { box-shadow: 0 0 0 3px #3ddc84, 0 0 34px rgba(61, 220, 132, .45); }
.kq-figure.is-bad { box-shadow: 0 0 0 3px #ff5a6a, 0 0 34px rgba(255, 90, 106, .4); }
.kq-costs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kq-cost {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 14px; cursor: pointer;
  font: inherit; color: #fff; border: 2px solid var(--k); background: linear-gradient(180deg, color-mix(in srgb, var(--k) 20%, #1d0c33), #150926);
  transition: transform .12s, box-shadow .2s, background .2s, opacity .2s;
}
.kq-cost:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 0 22px -4px var(--k); }
.kq-cost:active:not(:disabled) { transform: translateY(1px); }
.kq-cost:disabled { cursor: default; opacity: .4; }
.kq-coin, .kq-chip .kq-coin {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 400 1.5rem/1 var(--f-display); color: #1a0b00; background: radial-gradient(circle at 35% 30%, #fff, var(--k) 62%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.kq-gold { font: 700 .8rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kq-cost.is-right { opacity: 1; border-color: #3ddc84; background: rgba(61, 220, 132, .22); box-shadow: 0 0 24px -4px #3ddc84; }
.kq-cost.is-wrong { opacity: 1; border-color: #ff5a6a; background: rgba(255, 90, 106, .2); animation: shake .35s; }
.kq-cost.is-answer { opacity: 1; border-color: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .4); }

/* ───────── Spiel: Shop-Memory ───────── */
.sm { display: flex; flex-direction: column; gap: 12px; }
/* Shop-Leiste wie im Spiel: fünf Karten mit Rahmen in der Kostenfarbe */
.sm-shop {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px; list-style: none; border-radius: 16px;
  background: linear-gradient(180deg, #2a1240, #1a0b2e); box-shadow: inset 0 0 0 2px rgba(255, 201, 74, .25), inset 0 -6px 0 rgba(0, 0, 0, .35);
}
.sm-card {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border-radius: 10px;
  font: inherit; color: #fff; background: #0b0416; border: 3px solid var(--k, rgba(255, 255, 255, .2)); cursor: default;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.sm-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis;
  font: 700 clamp(.8rem, 1vw, 1rem)/1.1 var(--f-body); background: linear-gradient(180deg, transparent, rgba(8, 3, 16, .92));
}
.sm-cost { position: absolute; right: 6px; top: 6px; }
.sm-cost .kq-coin { width: 26px; height: 26px; font-size: .95rem; }
/* verdeckte Karte (Rückseite) und Auswahl-Zustände */
.sm-card.is-back { --k: rgba(255, 201, 74, .35); cursor: pointer; background: repeating-linear-gradient(45deg, #2c1252 0 10px, #241044 10px 20px); }
.sm-card.is-back:hover, .sm-card.is-pick:hover { border-color: var(--c); }
.sm-num { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--f-display); color: rgba(255, 241, 214, .4); }
.sm-card.is-pick { --k: color-mix(in srgb, var(--c) 70%, transparent); cursor: pointer; }
.sm-card.is-active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 24px -4px var(--c); animation: smpulse 1.2s ease-in-out infinite; }
@keyframes smpulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 20%, transparent), 0 0 30px -4px var(--c); } }
.sm-card.is-ok { --k: #3ddc84; box-shadow: 0 0 22px -4px #3ddc84; }
.sm-card.is-near { --k: #ffc94a; box-shadow: 0 0 22px -6px #ffc94a; }
.sm-card.is-bad { --k: #ff5a6a; box-shadow: 0 0 22px -6px #ff5a6a; }
.sm-mark {
  position: absolute; left: 6px; top: 6px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 400 1rem/1 var(--f-display); color: #12081f; background: var(--k);
}
.sm-tip {
  position: absolute; left: 6px; right: 6px; top: 36px; z-index: 1; padding: 3px 7px; border-radius: 6px; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis;
  font: 700 .74rem/1.3 var(--f-body); color: #fff; background: rgba(8, 3, 16, .85);
}
.sm-tip s { color: var(--dim); }
/* Auswahl zum Rekonstruieren */
.sm-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sm-options.is-waiting { visibility: hidden; }
.sm-opt {
  position: relative; aspect-ratio: 2.3 / 1; padding: 0; overflow: hidden; border-radius: 10px; cursor: pointer; font: inherit; color: #fff;
  background: #0b0416; border: 2px solid rgba(255, 255, 255, .18); transition: border-color .15s, transform .15s, opacity .2s;
}
.sm-opt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.sm-opt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; font: 700 .86rem/1.1 var(--f-body); background: linear-gradient(180deg, transparent, rgba(8, 3, 16, .9)); }
.sm-opt:hover:not(:disabled) { border-color: var(--c); transform: translateY(-2px); }
.sm-opt:disabled { cursor: default; opacity: .28; }
.sm-actions { display: flex; justify-content: center; gap: 12px; min-height: 48px; }

/* ───────── Highscore-Eintrag nach einer Runde (wie am Automaten) ───────── */
.hs-entry {
  max-width: 460px; margin: 4px auto 18px; padding: 18px; border-radius: 16px; background: #0b0416;
  box-shadow: inset 0 0 0 2px rgba(255, 201, 74, .4), 0 0 32px -10px rgba(255, 201, 74, .55);
}
.hs-title { margin: 0 0 8px; font: 400 clamp(.9rem, 2vw, 1.15rem)/1.4 var(--f-pixel); text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px rgba(255, 201, 74, .7); animation: hsblink 1.1s steps(2) infinite; }
.hs-rank { margin: 0 0 14px; color: var(--muted); }
.hs-rank b { color: #fff; }
.hs-label { display: block; margin-bottom: 8px; font-weight: 700; }
.hs-row { display: flex; gap: 10px; }
.hs-input {
  flex: 1; min-width: 0; padding: .75em .9em; border-radius: 10px; border: 2px solid rgba(255, 201, 74, .6);
  font: 400 .9rem/1.2 var(--f-pixel); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #160a28; caret-color: var(--gold);
}
.hs-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(70, 227, 210, .25); }
.hs-hint { margin: 8px 0 0; font-size: .84rem; color: var(--dim); }
.hs-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 0 0 18px; font-weight: 700; color: #8af5e8; }
.hs-done .ui { color: var(--teal); }
.hs-done .text-link { margin-top: 0; }
@keyframes hsblink { 50% { opacity: .35; } }

/* ───────── Hall of Fame: ein Automat pro Spiel ───────── */
.hof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 22px 0 clamp(36px, 5vw, 56px); }
.cabinet {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px 22px 14px 14px;
  background: linear-gradient(180deg, #24103f, #170a29); border: 2px solid var(--c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 38px -8px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow);
}
.cab-marquee {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 32%, #2a1145), color-mix(in srgb, var(--c) 12%, #1c0b33));
  border-bottom: 2px solid var(--c);
}
/* Glühbirnen-Reihe unter dem Titel */
.cab-marquee::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 5px; opacity: .85;
  background: radial-gradient(circle, #fff1bf 0 1.6px, rgba(255, 200, 90, .4) 2.2px, transparent 2.8px) 0 0 / 14px 5px repeat-x;
  animation: twinkle 2.4s ease-in-out infinite;
}
.cab-art { width: 54px; height: 54px; color: var(--c); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.cab-cat { margin: 0 0 2px; font: 700 .8rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.cabinet h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.cab-screen {
  margin: 16px; padding: 16px 18px 18px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(90, 45, 150, .35), transparent 70%), #0b0416;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), inset 0 0 40px rgba(0, 0, 0, .8);
}
.cab-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.cab-tab, .cab-mode { font: 400 .62rem/1.4 var(--f-pixel); text-transform: uppercase; }
.cab-tab { padding: .55em 1.1em; border-radius: 999px; cursor: pointer; color: var(--muted); background: transparent; border: 1.5px solid rgba(255, 255, 255, .22); }
.cab-tab:hover { border-color: var(--c); color: #fff; }
.cab-tab[aria-pressed="true"] { color: var(--c-ink); background: var(--c); border-color: transparent; }
.cab-mode { margin: 0 0 14px; text-align: center; color: var(--muted); }
.hs-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 clamp(.64rem, .95vw, .8rem)/1.25 var(--f-pixel); text-transform: uppercase; }
.hs-table th { padding: 0 8px 10px; font-weight: 400; font-size: .85em; text-align: left; color: var(--dim); border-bottom: 2px dashed rgba(255, 255, 255, .12); }
.hs-table th:first-child { width: 6em; }
.hs-table th:last-child { width: 11em; }
.hs-table th:last-child, .hs-table td.val { text-align: right; }
.hs-table td { padding: 9px 8px; white-space: nowrap; }
.hs-table td.who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .rank ist im Seitenbereich ein runder Kreis – in der Tabelle eine normale Zelle */
.hs-table td.rank { display: table-cell; width: auto; height: auto; border-radius: 0; background: none; font: inherit; color: inherit; }
.hs-table td.rank::after { content: '.'; }
/* Farben wie auf alten Highscore-Tafeln */
.hs-table tbody tr { color: #b9a3ff; }
.hs-table tbody tr:nth-child(4n+4) { color: #7ff3e6; }
.hs-table tbody tr:nth-child(4n+5) { color: #ff9bd2; }
.hs-table tbody tr:nth-child(4n+7) { color: #a8ec7a; }
.hs-table tbody tr:nth-child(1) { color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, .6); }
.hs-table tbody tr:nth-child(2) { color: #e8ecf4; }
.hs-table tbody tr:nth-child(3) { color: #f0a46b; }
.hs-table tbody tr.is-you { color: #fff; background: rgba(70, 227, 210, .16); box-shadow: inset 3px 0 0 var(--teal); }
.hs-table tr.empty td { text-align: center; text-transform: none; font-family: var(--f-body); color: var(--muted); }
.is-new { animation: hsblink .5s steps(2) 8; }
.cab-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 0 18px 18px; }
.cab-record { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); }
.cab-record .ui { color: var(--gold); }
.cab-record b { font: 400 1.15rem/1 var(--f-display); color: #fff; }

/* ───────── Textseiten ───────── */
.prose { max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px); padding: clamp(22px, 4vw, 40px); }
.prose h1 { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 2.8rem); }
.prose h2 { margin: 1.6em 0 .5em; font-size: 1.45rem; }
.prose p, .prose li { color: #ebe1f8; }
.prose ul { padding-left: 1.2em; }
.prose .lead { margin-bottom: 1em; }
.todo { padding: 1px 6px; font-weight: 600; color: #ffb7ae; background: rgba(255, 122, 107, .16); border: 1px dashed rgba(255, 122, 107, .65); border-radius: 6px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: #ffe3a1; background: rgba(255, 201, 74, .1); border: 1px solid rgba(255, 201, 74, .4); border-radius: 12px; }
.notice .ui { margin-top: 3px; }
.muted { color: var(--muted); }

/* ───────── Footer ───────── */
.footer { margin-top: 24px; padding: 44px 0 28px; background: linear-gradient(180deg, rgba(10, 4, 20, 0), rgba(10, 4, 20, .92) 28%); border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.footer-brand p { max-width: 42ch; margin: 16px 0 0; color: var(--muted); }
.footer-h { margin: 0 0 12px; font: 700 .86rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.footer-nav ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { color: #e9def8; text-decoration: none; }
.footer-nav a:hover { color: var(--gold); text-decoration: underline; }
.legal { max-width: 110ch; margin: 0 0 6px; font-size: .85rem; color: var(--dim); }

/* ───────── Meldung (z. B. „Kopiert!“) ───────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; font-weight: 600; color: #fff; background: #21103c;
  border: 1.5px solid var(--teal); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8);
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ui { color: var(--teal); }

/* ───────── Responsive ───────── */
@media (max-width: 1180px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stage { min-height: 0; }
  .gcard-art { height: 190px; }
}
@media (max-width: 1080px) {
  .booths { grid-template-columns: repeat(2, 1fr); }
  .howto-grid { grid-template-columns: 1fr 1fr; }
  .howto-item:first-child { grid-column: 1 / -1; }
  .mainnav > ul { gap: 4px 16px; }
}
@media (max-width: 1240px) {
  .mainnav > ul { gap: 4px 18px; }
  .nav-link { font-size: .98rem; }
}
/* Kopfleiste zweizeilig: Logo oben, Menü als Raster mit Symbolen */
@media (max-width: 1000px) {
  .topbar, .is-home .topbar { position: relative; }
  .topbar-in { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 8px; }
  .topbar-side { display: none; }
  .mainnav { width: 100%; }
  .mainnav > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .nav-link { flex-direction: column; gap: 4px; width: 100%; padding: 6px 0 8px; font-size: .86rem; text-align: center; justify-content: center; }
  .nav-link .art { display: block; }
  .nav-link::after { bottom: 0; }
  .nav-chevron { position: absolute; right: 8px; top: 50%; margin-top: -8px; }
  .mega { max-height: calc(100vh - 120px); overflow-y: auto; }
  .mega-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .is-home main { margin-top: 0; }
  .home-stage { padding-top: 0; }
  .hof-grid { grid-template-columns: 1fr; }
  .scene-corner { display: none; }
}
@media (max-width: 960px) {
  .play { grid-template-columns: 1fr; }
  .play-side { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .ticket { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket-label { grid-column: 1 / -1; padding: 0 0 10px; border-right: 0; border-bottom: 2px dashed rgba(245, 177, 58, .45); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 16px; }
  .wrap-wide, .is-home .topbar-in { width: min(1200px, 100% - 32px); }
  .topbar { background: rgba(18, 8, 34, .9); }
  .is-home .topbar:not(.is-scrolled) { background: rgba(14, 6, 26, .55); }
  /* drei Menüpunkte nebeneinander, Symbol über dem Text */
  .nav-link .art { width: 24px; height: 24px; }
  .nav-chevron { display: none; }
  .mega-in { grid-template-columns: 1fr; }
  .scene-home { height: 620px; }
  .scene-home .scene-img { object-position: 68% top; }
  .scene-home::after { background: linear-gradient(180deg, rgba(16, 7, 30, .35) 0, rgba(16, 7, 30, .55) 40%, rgba(22, 10, 40, .85) 75%, var(--bg) 100%); }
  .hero { padding: 26px 0 24px; }
  .hero-main { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .ribbon { padding: .55em 1.1em; font-size: clamp(.62rem, 2.9vw, .8rem); letter-spacing: .06em; white-space: nowrap; }
  .deco-title::before, .deco-title::after { display: none; }
  .booths-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .howto-grid { grid-template-columns: 1fr; }
  .stage { min-height: 380px; }
  .daily { padding: 0; }
  .ticket { grid-template-columns: 1fr; padding: 16px 18px; }
  .ticket::before, .ticket::after { display: none; }
  .ticket .btn { justify-self: start; }
}
@media (max-width: 560px) {
  .cards-4 { grid-template-columns: 1fr; }
  .kq-costs { gap: 6px; }
  .kq-coin { width: 36px; height: 36px; font-size: 1.25rem; }
  .kq-cost { padding: 9px 2px 8px; }
  .kq-figure { max-height: none; }
  .sm-shop { gap: 5px; padding: 6px; }
  .sm-card { aspect-ratio: 3 / 4; border-width: 2px; }
  .sm-name { padding: 12px 4px 4px; font-size: .68rem; }
  .sm-cost .kq-coin { width: 18px; height: 18px; font-size: .7rem; }
  .sm-tip { display: none; }
  .sm-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .howto-short { flex-wrap: wrap; }
  .howto-short > span:not(.howto-more) { flex: 1 1 calc(100% - 30px); }
  .howto-more { margin-left: 28px; }
  .booths, .booths-3 { gap: 12px; }
  .booth-art { width: 64px; height: 64px; margin-top: 20px; }
  .booth-name { font-size: 1.35rem; }
  .booth-tag { margin-inline: 10px; font-size: .9rem; }
  .booth-count { font-size: .76rem; letter-spacing: .05em; }
  .booth-count .ui { display: none; }
  .page-head, .game-head { grid-template-columns: 1fr; }
  .logo-tft, .logo-arcade { font-size: 1.5rem; }
}
@media (max-width: 360px) {
  .booths, .booths-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}