/* ==========================================================================
   Rayzon.eu - Stylesheet
   ========================================================================== */

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #05060a;
    --bg-2: #0a0c13;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #eef0f7;
    --muted: #8d92a6;
    --dim: #5b6075;
    --violet: #8b5cf6;
    --cyan: #22d3ee;
    --pink: #f472b6;
    --lime: #a3e635;
    --amber: #fbbf24;
    --grad: linear-gradient(120deg, #8b5cf6 0%, #6366f1 35%, #22d3ee 100%);
    --grad-text: linear-gradient(100deg, #c4b5fd 0%, #8b5cf6 30%, #22d3ee 70%, #a5f3fc 100%);
    --radius: 22px;
    --radius-sm: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    /* bewusst transparent: sonst verdeckt der Body die Hintergrund-Ebenen (z-index < 0) */
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.icon { flex: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Hintergrund-Ebenen ---------- */
.bg-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }

.bg-grid {
    position: absolute; inset: -1px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}

.bg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: 0.28;
    animation: orb 22s var(--ease) infinite alternate;
}
.bg-orb-1 { width: 520px; height: 520px; background: #6d28d9; top: -160px; left: -120px; }
.bg-orb-2 { width: 460px; height: 460px; background: #0891b2; top: 30%; right: -180px; animation-delay: -8s; opacity: 0.25; }
.bg-orb-3 { width: 380px; height: 380px; background: #be185d; bottom: -160px; left: 30%; animation-delay: -14s; opacity: 0.16; }

@keyframes orb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
    100% { transform: translate(-40px, 80px) scale(0.95); }
}

.bg-network { position: absolute; inset: 0; width: 100%; height: 100%; }

.grain {
    position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.scroll-progress span {
    display: block; height: 100%; background: var(--grad);
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

/* ---------- Navigation ---------- */
.nav {
    position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
    display: flex; justify-content: center; padding: 0 var(--gutter);
    pointer-events: none;
}
.nav-inner {
    pointer-events: auto;
    display: flex; align-items: center; gap: 8px;
    width: 100%; max-width: 980px;
    padding: 8px 8px 8px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(10, 12, 19, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition: max-width 0.6s var(--ease), background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.nav.is-scrolled .nav-inner {
    max-width: 820px;
    background: rgba(10, 12, 19, 0.8);
    border-color: var(--border-strong);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
}
.nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.02em; font-size: 17px; margin-right: auto; }
.logo-mark { display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.nav-logo:hover .logo-mark { transform: rotate(-12deg) scale(1.1); }
.logo-dot { color: var(--muted); font-weight: 500; }

.nav-links { display: flex; gap: 2px; }
.nav-links a {
    position: relative; padding: 8px 14px; border-radius: 999px;
    font-size: 14px; color: var(--muted); transition: color 0.25s, background 0.25s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}

.nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    background: var(--text); color: #0a0a12;
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -6px rgba(255, 255, 255, 0.5); }

.nav-burger {
    display: none; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    position: relative;
}
.nav-burger span {
    position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); border-radius: 2px;
    transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.nav-burger span:first-child { top: 16px; }
.nav-burger span:last-child { top: 24px; }
.menu-open .nav-burger span:first-child { top: 20px; transform: rotate(45deg); }
.menu-open .nav-burger span:last-child { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(5, 6, 10, 0.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; padding: 100px var(--gutter) 40px;
    opacity: 0; transition: opacity 0.4s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mobile-menu a {
    display: flex; align-items: baseline; gap: 14px;
    font-size: clamp(36px, 11vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15;
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.2s;
    transition-delay: calc(var(--i) * 60ms + 80ms);
}
.mobile-menu.is-open a { opacity: 1; transform: none; }
.mobile-menu a:hover, .mobile-menu a:active { color: var(--cyan); }
.mm-idx { font-family: var(--mono); font-size: 13px; color: var(--dim); font-weight: 400; letter-spacing: 0; display: inline-flex; align-items: center; }
.mm-feature { margin-top: 18px; font-size: clamp(24px, 7vw, 32px) !important; color: var(--amber); }
body.menu-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
    --mx: 0px; --my: 0px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
    border: 1px solid transparent; cursor: pointer; isolation: isolate;
    transform: translate(var(--mx), var(--my));
    transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.3s, border-color 0.3s;
    white-space: nowrap;
}
.btn .icon { transition: transform 0.35s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn-primary { color: #fff; background: var(--grad); background-size: 200% 100%; box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 50px -8px rgba(34, 211, 238, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.btn-ghost { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); }

.btn-accent { color: #0a0a12; background: linear-gradient(120deg, var(--accent, var(--cyan)), var(--accent-2, var(--accent, var(--cyan)))); box-shadow: 0 10px 40px -12px var(--accent, var(--cyan)); }
.btn-accent:hover { box-shadow: 0 14px 50px -8px var(--accent, var(--cyan)); }
.btn-accent:hover .icon { transform: translate(2px, -2px); }

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 0 90px; overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; }
.hero-content { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.hero-content a, .hero-content button { pointer-events: auto; }

.feature-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px; margin-bottom: 28px; border-radius: 999px;
    font-size: 14px; color: var(--text);
    background: rgba(10, 12, 19, 0.6); backdrop-filter: blur(10px);
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: transform 0.3s var(--ease);
}
.feature-pill::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), rgba(251, 191, 36, 0.1), #fbbf24, rgba(139, 92, 246, 0.2), #22d3ee, rgba(251, 191, 36, 0.1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spin-angle 4s linear infinite;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-angle { to { --angle: 360deg; } }
.feature-pill:hover { transform: translateY(-2px); }
.feature-pill:hover .icon { transform: translateX(3px); }
.feature-pill .icon { transition: transform 0.3s var(--ease); color: var(--amber); }
.fp-badge {
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(251, 191, 36, 0.14); color: var(--amber);
}
.fp-text { font-weight: 500; }

.hero-title {
    margin: 0; font-size: clamp(64px, 17vw, 230px); line-height: 0.9;
    font-weight: 800; letter-spacing: -0.06em;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 0.04em 0.06em;
    transition: opacity 0.6s;
}
/* Wenn die Partikel laufen, ersetzt der Canvas den Schriftzug */
.particles-on .hero-title { opacity: 0; }

.hero-kicker {
    display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0;
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.6); animation: pulse 2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(163, 230, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); }
}

.hero-roles {
    margin: 22px 0 0; font-size: clamp(22px, 3.4vw, 36px); font-weight: 600; letter-spacing: -0.03em;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; min-height: 1.3em;
}
.hr-prefix { color: var(--muted); font-weight: 500; }
.hr-word { color: var(--text); font-family: var(--font); }
.hr-word .scr { color: var(--cyan); font-family: var(--mono); font-weight: 400; }
.hr-caret { display: inline-block; width: 3px; height: 1em; margin-left: -8px; background: var(--cyan); border-radius: 2px; animation: blink 1s steps(2) infinite; box-shadow: 0 0 10px var(--cyan); }
@keyframes blink { 50% { opacity: 0; } }

.hero-text { max-width: 580px; margin: 20px auto 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

.scroll-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; opacity: 0.7; transition: opacity 0.3s; }
.scroll-hint:hover { opacity: 1; }
.sh-mouse { display: block; width: 24px; height: 38px; border: 1.5px solid var(--border-strong); border-radius: 14px; position: relative; }
.sh-mouse span { position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--text); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee-wrap {
    position: relative; padding: 26px 0; overflow: hidden;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.015);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee-track { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; animation: marquee 40s linear infinite; }
.marquee-reverse { margin-top: 14px; }
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 55s; gap: 18px; padding-right: 18px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mq-item { font-size: clamp(30px, 5vw, 56px); font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; line-height: 1.1; }
.mq-outline { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); }
.mq-sep { color: var(--violet); display: inline-flex; }
.mq-sep:nth-of-type(4n) { color: var(--cyan); }
.mq-small { font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: 0.04em; color: var(--dim); text-transform: uppercase; }
.mq-sep-small { color: var(--dim); font-family: var(--mono); font-size: 14px; }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(90px, 14vw, 160px) 0 0; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-idx {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.section-idx::before { content: ""; width: 28px; height: 1px; background: var(--grad); }
.section-title {
    margin: 16px 0 0; font-size: clamp(38px, 6.4vw, 80px); line-height: 1; font-weight: 700; letter-spacing: -0.05em;
}
.section-lead { margin-top: 22px; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 640px; }
.section-lead p { margin: 0 0 12px; }
.section-lead a, .pf-desc a, .pc-desc a, .legal-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34, 211, 238, 0.4); }

/* Woerter-Reveal fuer Ueberschriften */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--wi) * 55ms); }
[data-split].is-in .w > span { transform: none; }
[data-split] .w:last-child > span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Reveal beim Scrollen */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Karten / Spotlight ---------- */
.card, .project-card, .project-featured, .partner-card, .contact-card {
    --sx: 50%; --sy: 50%;
    position: relative; border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--border);
    overflow: hidden; isolation: isolate;
}
.card { transition: border-color 0.35s, opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.card:hover, .contact-card:hover { border-color: var(--border-strong); }

/* ---------- Bento ---------- */
.bento {
    display: grid; gap: 16px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "web web web web bot bot"
        "script script script api api api"
        "stats stats stats stats stats stats";
}
.bento .card { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; min-height: 280px; }
.bento-web { grid-area: web; }
.bento-bot { grid-area: bot; }
.bento-script { grid-area: script; }
.bento-api { grid-area: api; }
.bento-stats { grid-area: stats; min-height: 0 !important; flex-direction: row !important; flex-wrap: wrap; justify-content: space-around; gap: 24px; }
.bento h3 { margin: 18px 0 8px; font-size: 22px; letter-spacing: -0.03em; font-weight: 650; }
.bento p { margin: 0; color: var(--muted); font-size: 15px; max-width: 460px; }
.card-icon {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.12));
    border: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd;
}

/* Mini-Browser */
.mock-browser {
    margin-top: auto; transform: translateY(24px); margin-bottom: -40px;
    border: 1px solid var(--border-strong); border-radius: 14px 14px 0 0; background: #0b0d16; overflow: hidden;
    transition: transform 0.6s var(--ease);
}
.card:hover .mock-browser { transform: translateY(8px); }
.mb-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mb-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a2d3b; }
.mb-bar i:first-child { background: #f87171; } .mb-bar i:nth-child(2) { background: #fbbf24; } .mb-bar i:nth-child(3) { background: #4ade80; }
.mb-bar span { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); background: rgba(255, 255, 255, 0.04); padding: 2px 10px; border-radius: 6px; }
.mb-body { padding: 18px 16px 56px; }
.mb-line { height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(139, 92, 246, 0.5), rgba(34, 211, 238, 0.4)); margin-bottom: 10px; background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.mb-line.w70 { width: 70%; height: 16px; } .mb-line.w40 { width: 40%; opacity: 0.5; }
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mb-grid span { height: 54px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.mb-grid span:nth-child(2) { background: rgba(34, 211, 238, 0.08); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Mini-Discord */
.mock-chat { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mc-msg { display: flex; gap: 10px; align-items: flex-start; }
.mc-av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #f472b6, #8b5cf6); }
.mc-av-bot { background: #5865f2; display: grid; place-items: center; color: #fff; }
.mc-cmd { font-family: var(--mono); color: #c9cdfb; background: rgba(88, 101, 242, 0.18); padding: 3px 9px; border-radius: 6px; }
.mc-embed { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid #5865f2; background: rgba(255, 255, 255, 0.04); padding: 8px 12px; border-radius: 4px 8px 8px 4px; min-width: 170px; }
.mc-embed b { font-size: 13px; }
.mc-embed span { display: flex; gap: 8px; color: var(--muted); font-size: 12px; }
.mc-embed i { font-style: normal; font-family: var(--mono); color: var(--amber); width: 10px; }
.mc-embed em { font-style: normal; margin-left: auto; font-family: var(--mono); color: var(--text); }
.js .mc-bot { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease) 0.9s, transform 0.5s var(--ease) 0.9s; }
.js .is-in .mc-bot { opacity: 1; transform: none; }

/* Terminal */
.terminal {
    margin: auto 0 0; padding: 16px 18px; margin-top: 22px; min-height: 150px;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #cbd5e1;
    background: #07080e; border: 1px solid var(--border); border-radius: 12px;
    white-space: pre-wrap; word-break: break-word; overflow: hidden;
}
.terminal .t-prompt { color: var(--lime); }
.terminal .t-cmd { color: var(--text); }
.terminal .t-out { color: var(--dim); }
.terminal .t-ok { color: var(--cyan); }
.terminal .t-cursor { display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: var(--cyan); animation: blink 1s steps(2) infinite; }

/* API-Visual */
.api-viz { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 0; }
.av-node {
    flex: none; font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03);
}
.av-b { border-color: rgba(139, 92, 246, 0.6); color: #c4b5fd; box-shadow: 0 0 24px -6px rgba(139, 92, 246, 0.8); }
.av-c { border-color: rgba(34, 211, 238, 0.5); color: #a5f3fc; }
.av-line { position: relative; flex: 1; height: 1px; background: var(--border-strong); overflow: visible; }
.av-line i { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: packet 2.2s var(--ease) infinite; }
.av-line + .av-node + .av-line i { animation-delay: 0.9s; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
@keyframes packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }

/* Stats */
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 150px; }
.stat-num { font-size: clamp(44px, 6vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat-suffix { color: #a5f3fc; -webkit-text-fill-color: #a5f3fc; }
.stat-label { margin-top: 8px; color: var(--muted); font-size: 14px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Projekte ---------- */
.project-featured {
    --accent: var(--violet);
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px;
    padding: clamp(24px, 4vw, 48px); margin-bottom: 16px;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.pf-glow {
    position: absolute; inset: auto -20% -60% 30%; height: 120%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(closest-side at 35% 50%, color-mix(in srgb, var(--accent) 35%, transparent), transparent),
        radial-gradient(closest-side at 70% 50%, color-mix(in srgb, var(--accent-2, var(--accent)) 30%, transparent), transparent);
    filter: blur(20px); animation: glow-drift 10s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate(-10%, -8%) scale(1.1); } }
.pf-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-feature { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pf-title { margin: 20px 0 6px; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.05em; line-height: 1; font-weight: 750; }
.pf-tagline { margin: 10px 0 0; font-size: clamp(17px, 2vw, 21px); color: var(--text); opacity: 0.85; }
.pf-desc { color: var(--muted); margin-top: 14px; max-width: 560px; }
.pf-desc p { margin: 0 0 10px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pf-visual { display: grid; place-items: center; min-height: 280px; perspective: 1000px; }
.pf-visual img { border-radius: 16px; border: 1px solid var(--border-strong); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); max-height: 380px; object-fit: cover; }

/* Karten-Stapel (Platzhalter-Grafik ohne Bilder) */
.card-stack { position: relative; width: 200px; height: 280px; transform-style: preserve-3d; transition: transform 0.4s var(--ease); }
.cs-card {
    position: absolute; inset: 0; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.cs-1 { background: linear-gradient(160deg, #1e293b, #0f172a); transform: rotate(-14deg) translate(-40px, 10px); animation: float-a 6s ease-in-out infinite; }
.cs-2 { background: linear-gradient(160deg, #312e81, #1e1b4b); transform: rotate(8deg) translate(36px, 4px); animation: float-b 7s ease-in-out infinite; }
.cs-3 {
    overflow: hidden;
    border: 6px solid transparent;
    background-origin: padding-box, padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, padding-box, border-box;
    background-image:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.9) 0 3%, transparent 3.5%),
        conic-gradient(from 200deg at 50% 36%, transparent 0 20deg, rgba(255, 255, 255, 0.35) 22deg 26deg, transparent 28deg 80deg, rgba(255, 255, 255, 0.25) 82deg 86deg, transparent 88deg 150deg, rgba(255, 255, 255, 0.3) 152deg 156deg, transparent 158deg 360deg),
        linear-gradient(135deg, #7c3aed 0%, #2563eb 35%, #06b6d4 65%, #a3e635 100%),
        linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
    animation: float-c 5s ease-in-out infinite;
}
.cs-3::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 62%; height: 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.55); box-shadow: 0 14px 0 rgba(255, 255, 255, 0.3), 0 28px 0 -1px rgba(255, 255, 255, 0.2);
}
.cs-3::after {
    content: ""; position: absolute; inset: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35);
}
.cs-shine { position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
@keyframes float-a { 50% { transform: rotate(-16deg) translate(-46px, 0); } }
@keyframes float-b { 50% { transform: rotate(10deg) translate(42px, -8px); } }
@keyframes float-c { 50% { transform: translateY(-12px); } }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project-card {
    --accent: var(--violet);
    padding: 26px; display: flex; flex-direction: column; min-height: 300px;
}
.js .project-card.is-in { transition: transform 0.6s var(--ease), border-color 0.3s, opacity 0.9s var(--ease), filter 0.9s var(--ease); }
.js .project-card.is-tilting { transition: transform 0.12s linear, border-color 0.3s; }
.project-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pc-image { margin: -26px -26px 20px; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--border); }
.pc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.project-card:hover .pc-image img { transform: scale(1.05); }
.pc-top { display: flex; justify-content: space-between; align-items: center; }
.pc-num { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.pc-title { margin: 22px 0 6px; font-size: 24px; letter-spacing: -0.035em; font-weight: 650; line-height: 1.15; }
.pc-tagline { margin: 0; color: var(--text); opacity: 0.8; font-size: 15px; }
.pc-desc { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.pc-desc p { margin: 0 0 8px; }
.pc-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.pc-repo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pc-repo:hover { color: var(--text); }
.pc-arrow {
    margin-left: auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--border-strong); color: var(--text);
    transition: background 0.35s var(--ease), color 0.35s, transform 0.35s var(--ease), border-color 0.35s;
}
.project-card:hover .pc-arrow { background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); color: #0a0a12; border-color: transparent; transform: rotate(45deg); }

.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-repo { position: relative; z-index: 3; }

.tags { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); background: rgba(255, 255, 255, 0.02); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-live { color: var(--lime); }
.status-live::before { box-shadow: 0 0 8px var(--lime); animation: pulse 2s infinite; }
.status-wip { color: var(--amber); }
.status-archived { color: var(--dim); }

.empty-note { color: var(--muted); }

/* ---------- Partner ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.partner-card {
    --accent: var(--violet);
    padding: 28px; display: flex; flex-direction: column; align-items: flex-start; min-height: 200px;
    transition: border-color 0.35s, transform 0.4s var(--ease), box-shadow 0.4s, opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
/* Farbstreifen oben in den Akzentfarben */
.partner-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
    opacity: 0.55; transition: opacity 0.35s;
}
.partner-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.partner-card:hover::before { opacity: 1; }
.js .partner-card.is-in:hover, .partner-card:hover { transform: translateY(-4px); }
.pa-logo { height: 60px; display: flex; align-items: center; }
.pa-logo img { max-height: 60px; max-width: 180px; object-fit: contain; filter: grayscale(1) brightness(1.4); opacity: 0.8; transition: filter 0.4s, opacity 0.4s; }
.partner-card:hover .pa-logo img { filter: none; opacity: 1; }
.pa-initial {
    width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-weight: 700; font-size: 23px; color: #0a0a12;
    background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
}
.partner-card.no-logo { min-height: 0; }
.partner-card.no-logo .pa-name { margin-top: 0; padding-right: 24px; }
.pa-name { margin: 20px 0 6px; font-size: 20px; letter-spacing: -0.025em; }
.pa-desc { color: var(--muted); font-size: 14.5px; }
.pa-desc p { margin: 0 0 8px; }
.pa-desc p:last-child { margin: 0; }
.pa-arrow { position: absolute; top: 24px; right: 24px; color: var(--dim); transition: color 0.3s, transform 0.3s var(--ease); }
.partner-card:hover .pa-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* Main-Partner (nutzt das Layout vom Featured-Projekt) */
.partner-featured { margin-bottom: 16px; }
.partner-featured.no-visual { grid-template-columns: 1fr; }
.partner-featured .pf-title { margin-top: 18px; }
.mp-logo {
    position: relative; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 32px;
    display: grid; place-items: center; padding: 34px;
    background: rgba(10, 12, 19, 0.7); border: 1px solid var(--border-strong);
    box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 70%, transparent);
    animation: float-c 6s ease-in-out infinite;
}
.mp-ring {
    position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-2, var(--accent)), transparent 60%, var(--accent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spin-angle 6s linear infinite;
}
.mp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mp-initial {
    font-size: 110px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Kontakt ---------- */
.section-contact { padding-bottom: clamp(90px, 12vw, 140px); }
.contact-card { padding: clamp(36px, 7vw, 90px) clamp(22px, 6vw, 80px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-card .section-idx::before { display: none; }
.contact-rings { position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; }
.contact-rings span { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(139, 92, 246, 0.25); transform: translate(-50%, -50%); animation: ring 6s linear infinite; }
.contact-rings span:nth-child(1) { width: 300px; height: 300px; }
.contact-rings span:nth-child(2) { width: 300px; height: 300px; animation-delay: -2s; }
.contact-rings span:nth-child(3) { width: 300px; height: 300px; animation-delay: -4s; }
@keyframes ring { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; } }
.contact-title { margin: 18px 0 0; font-size: clamp(42px, 8.5vw, 110px); line-height: 0.95; letter-spacing: -0.06em; font-weight: 750; max-width: 900px; }
.contact-text { margin: 22px auto 0; color: var(--muted); max-width: 520px; font-size: clamp(16px, 1.6vw, 18px); }

.contact-mail { display: flex; align-items: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.cm-link {
    --mx: 0px; --my: 0px;
    display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px;
    font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; letter-spacing: -0.02em;
    background: var(--text); color: #0a0a12;
    transform: translate(var(--mx), var(--my)); transition: transform 0.35s var(--ease), box-shadow 0.35s;
    max-width: 100%;
}
.cm-link span { overflow: hidden; text-overflow: ellipsis; }
.cm-link:hover { box-shadow: 0 16px 60px -12px rgba(255, 255, 255, 0.45); }
.social strong { color: var(--text); font-weight: 600; }
.social .icon:last-child { opacity: 0.5; transition: transform 0.25s var(--ease), opacity 0.25s; }
a.social:hover .icon:last-child { opacity: 1; transform: translate(2px, -2px); }
.social-discord:hover { border-color: rgba(88, 101, 242, 0.6) !important; background: rgba(88, 101, 242, 0.14) !important; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.social {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}
a.social:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }


/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; padding: 0 0 28px; border-top: 1px solid var(--border); }
.footer-giant {
    font-size: clamp(80px, 22vw, 320px); font-weight: 800; letter-spacing: -0.07em; line-height: 0.8;
    text-align: center; padding-top: 0.12em; margin-bottom: 26px; user-select: none;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), transparent 80%); -webkit-background-clip: text; background-clip: text;
}
.footer-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }

/* ---------- Rechtsseiten ---------- */
.legal { padding: 150px 0 100px; }
.legal .container { max-width: 820px; }
.legal-body { margin-top: 40px; padding: clamp(24px, 4vw, 44px); color: #c9ccd8; }
.legal-body p { margin: 0 0 16px; }
.legal-body p:last-child { margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--muted); font-size: 14px; }
.back-link:hover { color: var(--text); }
.back-link .icon { transform: rotate(180deg); }

/* ---------- Fehlerseiten ---------- */
.page-error { overflow: hidden; }
.error-wrap { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px var(--gutter) 60px; }
.error-wrap .hero-canvas { position: fixed; }
.error-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.error-content a { pointer-events: auto; }
.error-code { margin: 0; font-size: clamp(120px, 34vw, 340px); font-weight: 800; letter-spacing: -0.07em; line-height: 0.85; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.particles-on .error-code { opacity: 0; }
.error-title { margin: 20px 0 0; font-size: clamp(26px, 4.5vw, 44px); letter-spacing: -0.04em; font-weight: 700; }
.error-text { color: var(--muted); max-width: 460px; margin: 12px auto 0; }
.error-content .hero-actions { margin-top: 30px; }
.glitch { position: relative; display: inline-block; }
.error-meta { margin-top: 36px; font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: 0.06em; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "web web"
            "bot script"
            "api api"
            "stats stats";
    }
    .project-grid, .partner-grid { grid-template-columns: 1fr 1fr; }
    .project-featured { grid-template-columns: 1fr; }
    .pf-visual { min-height: 300px; order: -1; }
}

@media (max-width: 760px) {
    .nav { top: 10px; }
    .nav-links, .nav-cta { display: none; }
    .nav-burger { display: block; }
    .nav-inner { padding: 6px 6px 6px 16px; }
    .nav.is-scrolled .nav-inner { max-width: 980px; }

    .hero { min-height: 0; padding: 120px 0 56px; }
    .scroll-hint { display: none; }
    .hero-title { font-size: clamp(64px, 22vw, 140px); }
    .feature-pill { font-size: 13px; margin-bottom: 22px; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1 1 auto; }

    .bento { grid-template-columns: 1fr; grid-template-areas: "web" "bot" "script" "api" "stats"; }
    .bento .card { min-height: 0; }
    .bento-stats { flex-direction: column !important; align-items: center; }
    .project-grid, .partner-grid { grid-template-columns: 1fr; }
    .mp-logo { width: 190px; padding: 26px; }
    .mp-initial { font-size: 80px; }
    .project-card { min-height: 0; }
    .pf-visual { min-height: 250px; }
    .card-stack { width: 150px; height: 210px; }
    .cm-link { padding: 14px 20px; }
    .footer-row { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
}

@media (max-width: 400px) {
    .fp-badge { display: none; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; filter: none; }
    [data-split] .w > span { transform: none; }
    .marquee-track { animation: none !important; }
}

/* ==========================================================================
   Arcade
   ========================================================================== */
.section-arcade { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(90px, 12vw, 140px); }
.arcade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.game-card {
    --accent: var(--violet);
    position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; color: var(--text); font: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    transition: border-color 0.35s, transform 0.4s var(--ease), box-shadow 0.4s, opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
.game-card:hover, .game-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--accent) 80%, transparent); }
.js .game-card.is-in:hover, .game-card:hover { transform: translateY(-4px); }

/* Vorschau-Animationen (reines CSS) */
.gc-preview {
    position: relative; display: block; height: 170px; overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
        linear-gradient(180deg, #0b0d18, #07080f);
    border-bottom: 1px solid var(--border);
}
.gc-preview::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}
.gp-pipe {
    position: absolute; width: 34px; left: 100%; top: 0; bottom: 0;
    background:
        linear-gradient(var(--accent-2), var(--accent)) top / 100% var(--gt, 40%) no-repeat,
        linear-gradient(var(--accent), var(--accent-2)) bottom / 100% var(--gb, 30%) no-repeat;
    opacity: 0.75; border-radius: 4px;
    animation: gp-scroll 4.5s linear infinite;
}
.gp-p1 { --gt: 30%; --gb: 38%; }
.gp-p2 { --gt: 45%; --gb: 22%; animation-delay: -1.5s; }
.gp-p3 { --gt: 22%; --gb: 45%; animation-delay: -3s; }
@keyframes gp-scroll { to { transform: translateX(calc(-100% - 460px)); } }
.gp-bolt { position: absolute; left: 26%; top: 44%; width: 30px; height: 30px; animation: gp-flap 1.1s ease-in-out infinite; filter: drop-shadow(0 0 8px var(--accent)); }
.gp-bolt svg { width: 100%; height: 100%; fill: #e0f7ff; }
@keyframes gp-flap { 0%, 100% { transform: translateY(10px) rotate(12deg); } 35% { transform: translateY(-16px) rotate(-14deg); } }

.gp-snake { position: absolute; inset: 0; }
.gp-snake i {
    position: absolute; width: 16px; height: 16px; border-radius: 5px; top: 50%; margin-top: -8px;
    background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
    animation: gp-slither 3.2s linear infinite;
}
.gp-snake i:first-child { background: #f7fee7; }
.gp-snake i:nth-child(2) { animation-delay: -0.12s; opacity: 0.95; }
.gp-snake i:nth-child(3) { animation-delay: -0.24s; opacity: 0.85; }
.gp-snake i:nth-child(4) { animation-delay: -0.36s; opacity: 0.75; }
.gp-snake i:nth-child(5) { animation-delay: -0.48s; opacity: 0.6; }
.gp-snake i:nth-child(6) { animation-delay: -0.6s; opacity: 0.45; background: var(--accent-2); }
@keyframes gp-slither {
    0% { left: 10%; transform: translateY(0); }
    25% { transform: translateY(-26px); }
    50% { left: 80%; transform: translateY(0); }
    75% { transform: translateY(26px); }
    100% { left: 10%; transform: translateY(0); }
}
.gp-food { position: absolute; left: 70%; top: 30%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); animation: pulse-food 1.2s ease-in-out infinite; }
@keyframes pulse-food { 50% { transform: scale(1.35); } }

.gp-stack { position: absolute; left: 50%; bottom: 14px; width: 150px; margin-left: -75px; display: flex; flex-direction: column-reverse; gap: 3px; }
.gp-stack i { display: block; height: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.9; }
.gp-stack i:nth-child(2) { width: 92%; margin-left: 6%; opacity: 0.85; }
.gp-stack i:nth-child(3) { width: 80%; margin-left: 10%; opacity: 0.8; }
.gp-stack i:nth-child(4) { width: 80%; margin-left: 12%; opacity: 0.75; }
.gp-mover { width: 80%; animation: gp-move 2s ease-in-out infinite alternate; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }
@keyframes gp-move { from { transform: translateX(-60%); } to { transform: translateX(80%); } }

.gc-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px; flex: 1; }
.gc-title { font-size: 22px; font-weight: 650; letter-spacing: -0.03em; }
.gc-desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.gc-controls { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.gc-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-record { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.gc-record .icon { color: var(--amber); }
.gc-record b { color: var(--text); font-family: var(--mono); }
.gc-record span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-play {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: #0a0a12; background: linear-gradient(120deg, var(--accent), var(--accent-2));
    transition: transform 0.3s var(--ease);
}
.game-card:hover .gc-play { transform: scale(1.05); }

/* ---------- Spiel-Fenster ---------- */
.arcade-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity 0.3s var(--ease); }
.arcade-modal[hidden] { display: none; }
.arcade-modal.is-open { opacity: 1; }
.am-backdrop {
    position: absolute; inset: 0;
    background:
        radial-gradient(40% 50% at 10% 20%, rgba(244, 114, 182, 0.22), transparent 70%),
        radial-gradient(40% 50% at 90% 25%, rgba(34, 211, 238, 0.2), transparent 70%),
        radial-gradient(50% 40% at 50% 110%, rgba(251, 191, 36, 0.16), transparent 70%),
        rgba(4, 4, 10, 0.94);
}
/* Seite hinter dem Spiel ausblenden (spart Rechenleistung = fluessigeres Spiel) */
body.arcade-covered main > :not(.arcade-modal),
body.arcade-covered .bg-layer, body.arcade-covered .grain, body.arcade-covered .nav,
body.arcade-covered .footer, body.arcade-covered .scroll-progress { visibility: hidden; }
.am-shell {
    --accent: var(--violet);
    position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: min(860px, calc(100vh - 40px)); height: min(860px, calc(100dvh - 40px));
    border-radius: 24px; border: 1px solid var(--border-strong); background: #07080f; overflow: hidden;
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 40px -6px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 90px -20px color-mix(in srgb, var(--accent-2) 40%, transparent);
    transform: translateY(16px) scale(0.98); transition: transform 0.4s var(--ease);
}
.arcade-modal.is-open .am-shell { transform: none; }
.am-snake .am-shell { width: min(680px, 100%); }
.am-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); }
.am-title { font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-hud { display: flex; gap: 18px; margin-left: auto; }
.am-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.am-stat small { font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.am-stat b { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.am-actions { display: flex; gap: 6px; }
.am-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: var(--text); cursor: pointer; transition: background 0.2s; }
.am-btn:hover { background: rgba(255, 255, 255, 0.09); }

.am-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.am-canvas { display: block; touch-action: none; }
.am-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.am-screen[hidden] { display: none; }
.am-start { pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 10, 0.1) 20%, rgba(5, 6, 10, 0.7)); justify-content: flex-end; padding-bottom: 8%; }
.am-start-card { max-width: min(460px, 94%); padding: 18px 20px 16px; border-radius: 18px; background: rgba(6, 7, 14, 0.86); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.am-start-card .am-start-hint { color: #e2e8f0; line-height: 1.5; }
.am-start-card .am-start-pu { color: #fcd34d; opacity: 1; line-height: 1.5; }
.am-start-title { margin: 0; font-size: clamp(30px, 7vw, 44px); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-start-hint { margin: 6px 0 0; color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.am-pulse { margin: 18px 0 0; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(5, 6, 10, 0.6); font-weight: 600; font-size: 14px; animation: am-pulse 1.6s ease-in-out infinite; }
@keyframes am-pulse { 50% { opacity: 0.55; transform: scale(0.97); } }

.am-over, .am-pausescreen, .am-boardscreen { background: rgba(4, 5, 9, 0.93); animation: am-fade 0.35s var(--ease); overflow-y: auto; }
@keyframes am-fade { from { opacity: 0; } }
.am-card { width: min(380px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: am-rise 0.45s var(--ease); }
.am-card-small { gap: 16px; }
@keyframes am-rise { from { transform: translateY(14px); opacity: 0; } }
.am-over-kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.am-over-kicker .icon { color: var(--amber); }
.am-over-score { font-size: 76px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-newbest { margin: 0; color: var(--amber); font-weight: 600; font-size: 14px; }
.am-newbest[hidden] { display: none; }
.am-submit { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.am-submit[hidden] { display: none; }
.am-submit input {
    flex: 1; min-width: 0; font: 15px var(--font); color: var(--text); padding: 11px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong); outline: none;
}
.am-submit input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.am-submit .btn { padding: 11px 16px; border-radius: 12px; font-size: 14px; }
.am-submit .btn:disabled { opacity: 0.5; cursor: default; }
.am-msg { margin: 0; min-height: 1.3em; font-size: 13.5px; color: var(--muted); }
.am-msg.is-error { color: #fca5a5; }
.am-msg.is-ok { color: var(--lime); }
.am-board { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; counter-reset: rank; }
.am-board li {
    counter-increment: rank; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; font-size: 14px;
    border: 1px solid transparent;
}
.am-board li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.am-board li::before { content: counter(rank); width: 22px; font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }
.am-board li:nth-child(1)::before { color: #fbbf24; }
.am-board li:nth-child(2)::before { color: #cbd5e1; }
.am-board li:nth-child(3)::before { color: #d97706; }
.am-board li.is-me { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.am-board .ab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.am-board .ab-score { font-family: var(--mono); font-weight: 600; }
.am-board .ab-empty { justify-content: center; color: var(--dim); }
.am-board .ab-empty::before { display: none; }
.am-over-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.am-keyhint { font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; }
body.arcade-open { overflow: hidden; }

@media (max-width: 980px) {
    .arcade-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .arcade-grid { grid-template-columns: 1fr; }
    .gc-preview { height: 140px; }
    .arcade-modal { padding: 0; }
    .am-shell, .am-snake .am-shell { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
    .am-hud { gap: 12px; }
    .am-btn { width: 36px; height: 36px; }
    .am-keyhint { display: none; }
    .am-head { padding-top: max(10px, env(safe-area-inset-top)); }
}
@media (hover: none) {
    .am-keyhint { display: none; }
}

/* ---------- Arcade-Halle: Lauflichter, Scheinwerfer, Neon ---------- */
.arcade-hall {
    position: relative; isolation: isolate;
    padding: clamp(40px, 6vw, 70px) clamp(18px, 4vw, 48px) clamp(34px, 5vw, 56px);
    border-radius: 32px;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(167, 139, 250, 0.16), transparent 70%),
        linear-gradient(180deg, #0a0816 0%, #06050d 70%, #0b0714 100%);
    border: 1px solid rgba(244, 114, 182, 0.25);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 0 80px -30px rgba(244, 114, 182, 0.5), 0 0 120px -50px rgba(34, 211, 238, 0.5);
}
.hall-lights {
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: -1;
    /* farbige Scheinwerfer von der Decke (statisch = schont Akku und Grafikkarte) */
    background:
        conic-gradient(from 150deg at 12% -5%, rgba(0, 0, 0, 0) 0deg, rgba(244, 114, 182, 0.28) 12deg, rgba(0, 0, 0, 0) 26deg),
        conic-gradient(from 170deg at 50% -5%, rgba(0, 0, 0, 0) 0deg, rgba(34, 211, 238, 0.25) 10deg, rgba(0, 0, 0, 0) 20deg),
        conic-gradient(from 190deg at 88% -5%, rgba(0, 0, 0, 0) 0deg, rgba(251, 191, 36, 0.25) 12deg, rgba(0, 0, 0, 0) 26deg),
        radial-gradient(70% 30% at 50% 100%, rgba(167, 139, 250, 0.18), transparent 70%);
}

.hall-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(26px, 4vw, 44px); }
.hall-head .section-idx::before { display: none; }
.hall-sub { margin: 18px auto 0; max-width: 520px; color: #c9c6dd; font-size: clamp(16px, 1.6vw, 18px); }
@keyframes coin-blink { 50% { opacity: 0; } }

/* Spielautomaten-Look fuer die Karten */
.section-arcade .game-card {
    background: linear-gradient(180deg, #120d22, #0a0814);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 30px -12px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.section-arcade .game-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 44px -8px color-mix(in srgb, var(--accent) 80%, transparent), 0 26px 60px -30px color-mix(in srgb, var(--accent-2) 80%, transparent);
}
.gc-marquee {
    display: block; padding: 12px 16px; text-align: center;
    font-weight: 800; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
    text-shadow: 0 0 6px var(--accent), 0 0 16px var(--accent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-2) 35%, transparent)),
        #0d0a1a;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.section-arcade .gc-preview {
    margin: 14px 14px 0; border-radius: 14px; border: 3px solid #05040a;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.section-arcade .gc-preview::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
.gc-press {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; text-align: center;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #fff;
    text-shadow: 0 0 8px var(--accent); opacity: 0; transition: opacity 0.3s;
}
.game-card:hover .gc-press, .game-card:focus-visible .gc-press { opacity: 1; animation: coin-blink 0.9s steps(1) infinite; }
.section-arcade .gc-title { display: none; }
.section-arcade .gc-foot { padding-top: 14px; }
.section-arcade .gc-controls { font-size: 10.5px; min-width: 0; }
.section-arcade .gc-body { padding-top: 16px; }
.section-arcade .gc-play {
    padding: 10px 18px; border-radius: 999px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 0 22px -4px var(--accent), inset 0 2px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}
.section-arcade .game-card:active .gc-play { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 0 22px -4px var(--accent), inset 0 2px 0 rgba(255, 255, 255, 0.45); }

@media (max-width: 640px) {
    .arcade-hall { border-radius: 24px; }
}

/* ---------- Lauflichter rund um die Halle (SVG, schliesst auch die runden Ecken) ---------- */
.hall-bulbs { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; z-index: 2; overflow: visible; }
.hb { fill: none; stroke-linecap: round; stroke-dasharray: 0 3; animation: hb-chase 1.35s steps(3) infinite; }
.hb-halo { stroke-width: 13; opacity: 0.28; }
.hb-core { stroke-width: 6.5; }
.hb-1 { stroke: #ff4fd8; }
.hb-2 { stroke: #ffd23f; animation-delay: -0.45s; }
.hb-3 { stroke: #22e1ff; animation-delay: -0.9s; }
@keyframes hb-chase { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -3; } }

/* ---------- Altes Neon-Schild ---------- */
.neon-board {
    position: relative; margin-top: 46px; padding: 14px; border-radius: 22px;
    background: linear-gradient(160deg, #1d1830, #0c0a15 60%, #141021);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.nb-chain { position: absolute; top: -46px; width: 3px; height: 46px; border-radius: 2px; background: repeating-linear-gradient(180deg, #8b93a7 0 5px, #3a3f4d 5px 7px, transparent 7px 9px); }
.nb-chain-l { left: 16%; }
.nb-chain-r { right: 16%; }
.nb-bolt { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e5e7eb, #4b5563 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.nb-tl { top: 8px; left: 8px; } .nb-tr { top: 8px; right: 8px; } .nb-bl { bottom: 8px; left: 8px; } .nb-br { bottom: 8px; right: 8px; }
.nb-frame {
    position: relative; padding: clamp(14px, 2.4vw, 22px) clamp(18px, 4vw, 44px) clamp(12px, 2vw, 18px); border-radius: 14px;
    border: 3px solid #ffb3f0;
    box-shadow: 0 0 4px #ff4fd8, 0 0 14px #ff4fd8, 0 0 34px rgba(255, 79, 216, 0.55), inset 0 0 10px rgba(255, 79, 216, 0.6);
}
.nb-frame::before {
    content: ""; position: absolute; inset: 7px; border-radius: 9px; pointer-events: none;
    border: 2px solid #a8f3ff;
    box-shadow: 0 0 4px #22e1ff, 0 0 12px rgba(34, 225, 255, 0.7), inset 0 0 8px rgba(34, 225, 255, 0.5);
}
.nb-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.2vw, 24px); }
.nb-icon { flex: none; width: clamp(30px, 5vw, 56px); height: clamp(30px, 5vw, 56px); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-star { stroke: #fff3b0; filter: drop-shadow(0 0 3px #ffd23f) drop-shadow(0 0 9px #ffd23f); animation: star-blink 1.8s steps(1) infinite; }
.nb-joy { stroke: #d6ffc9; filter: drop-shadow(0 0 3px #7dff5c) drop-shadow(0 0 9px #7dff5c); transform-origin: 50% 90%; animation: joy-wiggle 2.6s ease-in-out infinite; }
@keyframes star-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes joy-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-4deg); } }

.neon-sign {
    margin: 0; display: flex; justify-content: center;
    font-size: clamp(44px, 10vw, 124px); font-weight: 700; line-height: 1.05; letter-spacing: 0.06em;
    transform: skewX(-8deg);
}
/* Neonroehren: helle Kontur + farbiges Leuchten */
.neon-sign span {
    color: transparent;
    -webkit-text-stroke: 2.5px color-mix(in srgb, var(--c) 40%, #ffffff);
    text-shadow: 0 0 6px var(--c), 0 0 16px var(--c), 0 0 38px var(--c), 0 0 70px color-mix(in srgb, var(--c) 60%, transparent);
}
/* Einschalt-Effekt: Buchstaben gehen nacheinander flackernd an */
.js .neon-sign span { opacity: 0.12; }
.js .arcade-hall.is-in .neon-sign span { animation: neon-on 1s linear calc(var(--i) * 150ms + 300ms) both; }
.js .arcade-hall.is-in .neon-sign span:nth-child(3) { animation: neon-on 1s linear 600ms both, neon-flicker 7s linear 3s infinite; }
.js .arcade-hall.is-in .neon-sign span:nth-child(6) { animation: neon-on 1s linear 1050ms both, neon-flicker 9s linear 5s infinite; }
@keyframes neon-on {
    0% { opacity: 0.12; } 10% { opacity: 1; } 15% { opacity: 0.2; } 30% { opacity: 1; } 34% { opacity: 0.35; } 45%, 100% { opacity: 1; }
}
@keyframes neon-flicker {
    0%, 17%, 19%, 21%, 60%, 62%, 100% { opacity: 1; }
    18%, 20%, 61% { opacity: 0.2; }
}
.nb-sub { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.nb-line { flex: 0 1 110px; height: 2px; border-radius: 2px; background: #fff3b0; box-shadow: 0 0 4px #ffd23f, 0 0 10px #ffd23f; }
.nb-games {
    font-family: var(--mono); font-size: clamp(13px, 1.8vw, 18px); letter-spacing: 0.55em; margin-right: -0.55em; text-transform: uppercase;
    color: #fff3b0; text-shadow: 0 0 4px #ffd23f, 0 0 12px #ffd23f, 0 0 24px rgba(255, 210, 63, 0.6);
    animation: games-buzz 4s linear infinite;
}
@keyframes games-buzz { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.5; } 95% { opacity: 0.9; } 96% { opacity: 0.4; } }

/* ---------- Top 3 auf den Karten ---------- */
.gc-top {
    display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding: 10px 12px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06);
}
.gt-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gt-rank { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #0a0a12; }
.gt-1 .gt-rank { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.7); }
.gt-2 .gt-rank { background: #cbd5e1; }
.gt-3 .gt-rank { background: #d97706; }
.gt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.gt-score { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.gt-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.gt-empty .icon { color: var(--amber); }

@media (max-width: 520px) {
    .nb-icon { display: none; }
    .neon-board { margin-top: 38px; padding: 10px; }
    .nb-chain { top: -38px; height: 38px; }
    .neon-sign span { -webkit-text-stroke-width: 2px; }
    .hb-halo { stroke-width: 10; }
    .hb-core { stroke-width: 5; }
}

/* ---------- Pixel-Muenze in der Navigation (Link zur Arcade) ---------- */
.nav-links a.nav-coin { display: inline-flex; align-items: center; padding: 5px 12px; }
.pixel-coin { display: block; overflow: hidden; filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55)); }
.pc-frames { animation: pc-spin 0.9s steps(6) infinite; }
.nav-coin:hover .pc-frames, .nav-coin:focus-visible .pc-frames { animation-duration: 0.45s; }
@keyframes pc-spin { to { transform: translateX(-84px); } }
.nc-plus {
    position: absolute; left: 50%; top: 0; pointer-events: none;
    font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fcd34d; text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
    opacity: 0; transform: translate(-50%, 0);
}
.nav-coin:hover .nc-plus { animation: coin-plus 0.8s steps(6) forwards; }
@keyframes coin-plus {
    0% { opacity: 1; transform: translate(-50%, 2px); }
    100% { opacity: 0; transform: translate(-50%, -14px); }
}
.mm-coin .pixel-coin { width: 30px; height: 30px; }
.mobile-menu a.mm-coin { color: #fcd34d; }

/* ---------- Spieler-Code (Namensschutz) ---------- */
.am-submit { flex-wrap: wrap; }
.am-submit .am-code-input { flex: 1 0 100%; font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.am-submit .am-code-input[hidden] { display: none; }
.am-codeinfo {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 12px 14px; border-radius: 12px;
    background: rgba(251, 191, 36, 0.08); border: 1px dashed rgba(251, 191, 36, 0.5); font-size: 13.5px; color: var(--text);
}
.am-codeinfo[hidden] { display: none; }
.am-codeinfo b { font-family: var(--mono); font-size: 22px; letter-spacing: 0.14em; color: #fcd34d; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); user-select: all; }
.am-codeinfo small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.am-mycode { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
/* Rayzon Jump */
.gp-plat { position: absolute; width: 56px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); animation: gp-platdown 3s linear infinite; }
.gp-pl1 { left: 18%; top: 20%; }
.gp-pl2 { left: 52%; top: 52%; animation-delay: -1s; }
.gp-pl3 { left: 30%; top: 84%; animation-delay: -2s; }
@keyframes gp-platdown { from { transform: translateY(-60px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
.gp-jumper { position: absolute; left: 44%; bottom: 30%; width: 28px; height: 28px; filter: drop-shadow(0 0 8px var(--accent)); animation: gp-hop 0.75s cubic-bezier(0.3, 0, 0.7, 1) infinite alternate; }
.gp-jumper svg { width: 100%; height: 100%; fill: #ede9fe; }
@keyframes gp-hop { from { transform: translateY(24px) scale(1.1, 0.85); } 20% { transform: translateY(12px) scale(0.95, 1.08); } to { transform: translateY(-40px); } }

/* Neon Hoops */
.gp-board { position: absolute; right: 16%; top: 16%; width: 70px; height: 52px; border: 2px solid var(--accent-2); border-radius: 6px; box-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.gp-rim { position: absolute; left: 10px; bottom: -2px; width: 44px; height: 6px; border-radius: 50%; border: 3px solid var(--accent); }
.gp-net { position: absolute; left: 14px; top: 100%; width: 36px; height: 26px; margin-top: 2px; background: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 7px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 7px); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.gp-ball { position: absolute; left: 16%; bottom: 16%; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fdba74, #ea580c); box-shadow: 0 0 12px rgba(251, 146, 60, 0.6); animation: gp-shot 2.4s cubic-bezier(0.25, 0.1, 0.4, 1) infinite; }
@keyframes gp-shot {
    0%, 12% { transform: translate(0, 0); opacity: 1; }
    45% { transform: translate(120px, -110px); }
    70% { transform: translate(190px, -64px); opacity: 1; }
    85% { transform: translate(192px, -10px); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 0; }
}
.season-summer .gp-ball { background: conic-gradient(#ef4444 0 60deg, #fff 60deg 120deg, #3b82f6 120deg 180deg, #fff 180deg 240deg, #facc15 240deg 300deg, #fff 300deg); }
.season-winter .gp-ball { background: radial-gradient(circle at 35% 35%, #fff, #cbd5e1); box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); }

/* Bug Hunt */
.gp-bug { position: absolute; width: 16px; height: 20px; border-radius: 50% 50% 45% 45%; background: #f43f5e; box-shadow: 0 0 12px rgba(244, 63, 94, 0.7); animation: gp-crawl 3.6s ease-in-out infinite; }
.gp-bug::before, .gp-bug::after { content: ""; position: absolute; top: 6px; width: 24px; left: -4px; height: 2px; background: rgba(255, 255, 255, 0.6); }
.gp-bug::after { top: 12px; }
.gp-b1 { left: 20%; top: 30%; }
.gp-b2 { left: 62%; top: 22%; animation-delay: -1.2s; }
.gp-b3 { left: 45%; top: 62%; animation-delay: -2.4s; }
@keyframes gp-crawl { 0%, 100% { transform: translate(0, 0) rotate(0); opacity: 0; } 10%, 70% { opacity: 1; } 40% { transform: translate(24px, 10px) rotate(60deg); } 70% { transform: translate(8px, 28px) rotate(150deg); } 80% { transform: translate(8px, 28px) scale(1.6); opacity: 0; } }
.gp-cross { position: absolute; left: 50%; top: 66%; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; animation: gp-aim 3.6s ease-in-out infinite; }
.gp-cross::before, .gp-cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.7); left: 50%; top: -6px; width: 2px; height: 36px; margin-left: -1px; }
.gp-cross::after { transform: rotate(90deg); }
@keyframes gp-aim { 0% { transform: translate(-40px, -50px); } 60% { transform: translate(-2px, 10px); } 75% { transform: translate(-2px, 10px) scale(0.8); } 100% { transform: translate(-40px, -50px); } }
.season-halloween .gp-bug { background: #f1f5f9; border-radius: 50% 50% 30% 30%; box-shadow: 0 0 12px rgba(196, 181, 253, 0.8); }
.season-halloween .gp-bug::before, .season-halloween .gp-bug::after { display: none; }

/* Byte Catch */
.gp-byte { position: absolute; top: 0; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); padding: 2px 5px; border: 1.5px solid currentColor; border-radius: 5px; text-shadow: 0 0 8px currentColor; animation: gp-fall 2.4s linear infinite; }
.gp-y1 { left: 30%; }
.gp-y2 { left: 62%; color: var(--accent-2); animation-delay: -1.2s; }
.gp-virus { position: absolute; top: 0; left: 46%; width: 16px; height: 16px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.45), 0 0 12px #e11d48; animation: gp-fall 2.4s linear -0.6s infinite; }
@keyframes gp-fall { from { transform: translateY(-24px); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(150px); opacity: 0; } }
.gp-paddle { position: absolute; bottom: 16px; left: 30%; width: 70px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); animation: gp-pad 2.4s ease-in-out infinite alternate; }
@keyframes gp-pad { from { transform: translateX(-20px); } to { transform: translateX(90px); } }

/* Sky Burst */
.gp-rocket { position: absolute; left: 48%; bottom: 0; width: 4px; height: 14px; border-radius: 2px; background: #fde68a; box-shadow: 0 10px 12px -2px rgba(251, 191, 36, 0.7); animation: gp-rise 2.6s cubic-bezier(0.2, 0.7, 0.4, 1) infinite; }
@keyframes gp-rise { 0% { transform: translateY(10px); opacity: 1; } 45% { transform: translateY(-110px); opacity: 1; } 50%, 100% { transform: translateY(-112px); opacity: 0; } }
.gp-fw { position: absolute; width: 4px; height: 4px; border-radius: 50%; color: var(--accent); }
.gp-fw::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 -26px currentColor, 18px -18px currentColor, 26px 0 currentColor, 18px 18px currentColor, 0 26px currentColor, -18px 18px currentColor, -26px 0 currentColor, -18px -18px currentColor, 0 -13px currentColor, 13px 0 currentColor, 0 13px currentColor, -13px 0 currentColor;
    animation: gp-pop 2.6s ease-out infinite;
}
.gp-f1 { left: 48%; top: 30%; }
.gp-f2 { left: 22%; top: 26%; color: var(--accent-2); }
.gp-f2::before { animation-delay: -1.3s; }
@keyframes gp-pop { 0%, 48% { transform: scale(0.05); opacity: 0; } 52% { opacity: 1; } 85% { transform: scale(1.3); opacity: 0.8; } 100% { transform: scale(1.5) translateY(6px); opacity: 0; } }

/* Pixel Invaders */
.gp-inv { position: absolute; left: 50%; top: 22px; width: 150px; margin-left: -75px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; animation: gp-march 3s steps(6) infinite alternate; }
.gp-inv i { display: block; height: 16px; background: var(--accent); clip-path: polygon(20% 0, 80% 0, 100% 40%, 100% 70%, 80% 70%, 80% 100%, 60% 70%, 40% 70%, 20% 100%, 20% 70%, 0 70%, 0 40%); filter: drop-shadow(0 0 5px var(--accent)); }
.gp-inv i:nth-child(n+5) { background: var(--accent-2); }
@keyframes gp-march { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
.gp-ship { position: absolute; bottom: 12px; left: 50%; width: 34px; height: 16px; margin-left: -17px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); clip-path: polygon(0 100%, 12% 45%, 38% 35%, 44% 0, 56% 0, 62% 35%, 88% 45%, 100% 100%); animation: gp-dodge 3s ease-in-out infinite alternate; }
@keyframes gp-dodge { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.gp-shot { position: absolute; bottom: 30px; left: 50%; width: 3px; height: 12px; background: #fff; box-shadow: 0 0 8px var(--accent-2); animation: gp-shoot 0.9s linear infinite; }
@keyframes gp-shoot { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-110px); opacity: 0; } }

/* Greifautomat */
.gp-claw { position: absolute; top: 0; left: 50%; width: 2px; height: 40px; background: #94a3b8; animation: gp-grab 3.4s ease-in-out infinite; }
.gp-claw i { position: absolute; left: -12px; bottom: -14px; width: 26px; height: 16px; border: 3px solid #e2e8f0; border-top: 0; border-radius: 0 0 12px 12px; }
@keyframes gp-grab { 0%, 100% { transform: translateX(-50px); height: 34px; } 30% { transform: translateX(20px); height: 34px; } 50% { transform: translateX(20px); height: 88px; } 70% { transform: translateX(20px); height: 34px; } 90% { transform: translateX(-50px); height: 34px; } }
.gp-prize { position: absolute; bottom: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.gp-z1 { left: 30%; } .gp-z2 { left: 48%; background: var(--accent-2); } .gp-z3 { left: 62%; bottom: 30px; } .gp-z4 { left: 74%; background: #a78bfa; }

/* Neon Breakout */
.gp-bricks { position: absolute; top: 16px; left: 50%; width: 180px; margin-left: -90px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.gp-bricks i { display: block; height: 10px; border-radius: 2px; background: var(--accent); opacity: 0.85; }
.gp-bricks i:nth-child(3n+2) { background: var(--accent-2); }
.gp-bricks i:nth-child(4), .gp-bricks i:nth-child(9), .gp-bricks i:nth-child(15) { animation: gp-brickpop 2.6s steps(1) infinite; }
.gp-bricks i:nth-child(9) { animation-delay: -0.9s; } .gp-bricks i:nth-child(15) { animation-delay: -1.7s; }
@keyframes gp-brickpop { 60%, 100% { opacity: 0; } }
.gp-bball { position: absolute; left: 20%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); animation: gp-bounce-x 2.2s linear infinite alternate, gp-bounce-y 1.3s ease-in-out infinite alternate; }
@keyframes gp-bounce-x { to { left: 76%; } }
@keyframes gp-bounce-y { from { top: 36%; } to { top: 82%; } }
.gp-bpad { position: absolute; bottom: 12px; left: 50%; width: 56px; height: 8px; margin-left: -28px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: gp-dodge 2.2s ease-in-out infinite alternate; }

/* Neon Racer */
.gp-road { position: absolute; left: 50%; bottom: 0; width: 240px; height: 120px; margin-left: -120px; background: #16122e; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); border-bottom: 0; }
.gp-road::before, .gp-road::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.gp-road::before { left: 44%; transform-origin: top; transform: skewX(-38deg); }
.gp-road::after { right: 44%; transform-origin: top; transform: skewX(38deg); }
.gp-road i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(transparent 0 12px, rgba(255, 255, 255, 0.6) 12px 22px); animation: gp-stripes 0.5s linear infinite; }
@keyframes gp-stripes { to { background-position: 0 22px; } }
.gp-car { position: absolute; bottom: 10px; left: 50%; width: 44px; height: 22px; margin-left: -22px; border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--accent-2), var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); animation: gp-lanes 3s ease-in-out infinite; }
@keyframes gp-lanes { 0%, 20% { transform: translateX(0); } 35%, 60% { transform: translateX(-46px); } 75%, 100% { transform: translateX(0); } }
.gp-tcar { position: absolute; top: 52px; left: 50%; width: 12px; height: 7px; margin-left: -6px; border-radius: 3px; background: #22d3ee; animation: gp-oncoming 3s ease-in infinite; }
@keyframes gp-oncoming { from { transform: translate(0, 0) scale(0.6); opacity: 0; } 10% { opacity: 1; } to { transform: translate(8px, 90px) scale(3.4); opacity: 0.2; } }
.gp-bball, .gp-shot, .gp-tcar { will-change: transform; }

.am-mycode b { font-family: var(--mono); color: #fcd34d; letter-spacing: 0.1em; user-select: all; }
.am-mycode[hidden] { display: none; }

/* ==========================================================================
   Saison-Themes
   ========================================================================== */
.season-fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
body.arcade-covered .season-fx { visibility: hidden; }
.season-tag {
    margin: 14px 0 0; padding: 5px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--st-c, #fff); border: 1px solid var(--st-c, #fff); text-shadow: 0 0 8px var(--st-c, #fff); box-shadow: 0 0 14px -4px var(--st-c, #fff);
}

/* --- Winter: Pixel-Schnee --- */
.fx-winter i {
    position: absolute; top: -10px; left: var(--x); width: var(--s); height: var(--s); background: #fff; opacity: var(--o);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    animation: snow-fall var(--t) linear var(--d) infinite;
}
@keyframes snow-fall {
    0% { transform: translate3d(0, -2vh, 0); }
    25% { transform: translate3d(14px, 25vh, 0); }
    50% { transform: translate3d(-10px, 52vh, 0); }
    75% { transform: translate3d(12px, 78vh, 0); }
    100% { transform: translate3d(0, 104vh, 0); }
}
.season-winter { --grad-text: linear-gradient(100deg, #e0f2fe 0%, #7dd3fc 40%, #ffffff 70%, #bae6fd 100%); --pt-a: #bae6fd; --pt-b: #ffffff; --pt-c: #7dd3fc; --st-c: #7dd3fc; }
.season-winter .hb-1 { stroke: #ef4444; } .season-winter .hb-2 { stroke: #22c55e; } .season-winter .hb-3 { stroke: #f8fafc; }
.season-winter .neon-sign span:nth-child(odd) { --c: #ff4d4d !important; }
.season-winter .neon-sign span:nth-child(even) { --c: #4ade80 !important; }
.season-winter .neon-board::after {
    /* Schneehaube auf dem Schild */
    content: ""; position: absolute; left: 6px; right: 6px; top: -9px; height: 18px; border-radius: 12px 12px 8px 8px;
    background: radial-gradient(14px 10px at 12% 100%, #fff 60%, transparent 62%), radial-gradient(18px 12px at 40% 100%, #fff 60%, transparent 62%),
                radial-gradient(12px 9px at 70% 100%, #fff 60%, transparent 62%), linear-gradient(#f8fafc, #e2e8f0);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.35);
}

/* --- Halloween: Fledermaeuse mit Fluegelschlag --- */
.fx-halloween .bat {
    position: absolute; left: -90px; top: var(--y); width: calc(58px * var(--k)); height: calc(31px * var(--k));
    animation: bat-fly var(--t) linear var(--d) infinite;
}
.fx-halloween .bat-rev { left: auto; right: -90px; animation-name: bat-fly-rev; }
.fx-halloween .bat-rev svg { transform: scaleX(-1); }
.fx-halloween .bat-bob { display: block; width: 100%; height: 100%; animation: bat-bob var(--b) ease-in-out var(--d) infinite alternate; }
.fx-halloween .bat svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #1c0f2e; filter: drop-shadow(0 0 5px rgba(255, 122, 24, 0.55)); }
.fx-halloween .bat .bw { transform-box: view-box; animation: var(--f) ease-in-out infinite alternate; }
.fx-halloween .bat .bw-l { transform-origin: 29px 14px; animation-name: wing-l; }
.fx-halloween .bat .bw-r { transform-origin: 35px 14px; animation-name: wing-r; }
.fx-halloween .bat .bat-eye { fill: #ffb347; }
@keyframes wing-l { from { transform: rotate(24deg) scaleY(0.85); } to { transform: rotate(-18deg) scaleY(1.05); } }
@keyframes wing-r { from { transform: rotate(-24deg) scaleY(0.85); } to { transform: rotate(18deg) scaleY(1.05); } }
@keyframes bat-bob { from { transform: translateY(-3vh) rotate(-4deg); } to { transform: translateY(3vh) rotate(4deg); } }
@keyframes bat-fly { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100vw + 180px), 0, 0); } }
@keyframes bat-fly-rev { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100vw - 180px), 0, 0); } }
.season-halloween { --grad-text: linear-gradient(100deg, #fdba74 0%, #ff7a18 35%, #b15cff 75%, #d8b4fe 100%); --pt-a: #ff7a18; --pt-b: #b15cff; --pt-c: #a3e635; --st-c: #ff7a18; }
.season-halloween .hb-1 { stroke: #ff7a18; } .season-halloween .hb-2 { stroke: #b15cff; } .season-halloween .hb-3 { stroke: #84cc16; }
.season-halloween .neon-sign span:nth-child(odd) { --c: #ff7a18 !important; }
.season-halloween .neon-sign span:nth-child(even) { --c: #b15cff !important; }
.season-halloween .arcade-hall::before {
    /* Spinnennetz in der Ecke */
    content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; z-index: 1; pointer-events: none; border-top-right-radius: 32px; opacity: 0.35;
    background:
        repeating-radial-gradient(circle at 100% 0, transparent 0 16px, rgba(255, 255, 255, 0.55) 16px 17px),
        conic-gradient(from 180deg at 100% 0, transparent 0 8deg, rgba(255, 255, 255, 0.5) 8deg 9deg, transparent 9deg 30deg, rgba(255, 255, 255, 0.5) 30deg 31deg, transparent 31deg 52deg, rgba(255, 255, 255, 0.5) 52deg 53deg, transparent 53deg 74deg, rgba(255, 255, 255, 0.5) 74deg 75deg, transparent 75deg);
    -webkit-mask: radial-gradient(circle at 100% 0, #000 60%, transparent 72%);
    mask: radial-gradient(circle at 100% 0, #000 60%, transparent 72%);
}

/* --- Silvester: Feuerwerk --- */
.fx-newyear .fw { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; color: var(--c); }
.fx-newyear .fw::before {
    content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
    box-shadow:
        0 -40px currentColor, 20px -35px currentColor, 35px -20px currentColor, 40px 0 currentColor, 35px 20px currentColor, 20px 35px currentColor,
        0 40px currentColor, -20px 35px currentColor, -35px 20px currentColor, -40px 0 currentColor, -35px -20px currentColor, -20px -35px currentColor,
        0 -22px currentColor, 22px 0 currentColor, 0 22px currentColor, -22px 0 currentColor;
    animation: fw-burst var(--t) ease-out var(--d) infinite;
}
@keyframes fw-burst {
    0% { transform: scale(0.05); opacity: 0; }
    6% { opacity: 1; }
    45% { transform: scale(1.3); opacity: 0.9; }
    70%, 100% { transform: scale(1.6) translateY(10px); opacity: 0; }
}
.season-newyear { --grad-text: linear-gradient(100deg, #fef3c7 0%, #fbbf24 40%, #ffffff 65%, #f59e0b 100%); --pt-a: #fbbf24; --pt-b: #fef3c7; --pt-c: #f472b6; --st-c: #fbbf24; }
.season-newyear .hb-1 { stroke: #fbbf24; } .season-newyear .hb-2 { stroke: #ffffff; } .season-newyear .hb-3 { stroke: #f472b6; }
.season-newyear .neon-sign span { --c: #fbbf24 !important; }
.season-newyear .neon-sign span:nth-child(3n) { --c: #f472b6 !important; }

/* --- Ostern: Eier steigen auf --- */
.fx-easter .egg {
    position: absolute; bottom: -40px; left: var(--x); width: calc(22px * var(--k)); height: calc(28px * var(--k));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0.55;
    background: linear-gradient(180deg, var(--a) 0 38%, #fff 38% 46%, var(--b) 46% 100%);
    animation: egg-rise var(--t) linear var(--d) infinite;
}
@keyframes egg-rise {
    0% { transform: translate3d(0, 0, 0) rotate(-8deg); }
    50% { transform: translate3d(18px, -55vh, 0) rotate(8deg); }
    100% { transform: translate3d(0, -112vh, 0) rotate(-8deg); }
}
.season-easter { --grad-text: linear-gradient(100deg, #fbcfe8 0%, #c4b5fd 35%, #7dd3fc 65%, #bbf7d0 100%); --pt-a: #f9a8d4; --pt-b: #c4b5fd; --pt-c: #86efac; --st-c: #f9a8d4; }
.season-easter .hb-1 { stroke: #f9a8d4; } .season-easter .hb-2 { stroke: #fde047; } .season-easter .hb-3 { stroke: #7dd3fc; }
.season-easter .neon-sign span:nth-child(3n+1) { --c: #f9a8d4 !important; }
.season-easter .neon-sign span:nth-child(3n+2) { --c: #7dd3fc !important; }
.season-easter .neon-sign span:nth-child(3n) { --c: #fde047 !important; }

/* --- Sommer: Sonne + Wasserbaelle --- */
.fx-summer .sun-glare {
    position: absolute; top: -160px; right: -160px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 240, 138, 0.28) 0%, rgba(251, 146, 60, 0.12) 40%, transparent 70%);
    animation: sun-pulse 6s ease-in-out infinite alternate;
}
@keyframes sun-pulse { to { transform: scale(1.08); opacity: 0.8; } }
.fx-summer .bball { position: absolute; bottom: 0; left: -60px; width: calc(40px * var(--k)); height: calc(40px * var(--k)); animation: ball-roll var(--t) linear var(--d) infinite; }
.fx-summer .bball span {
    display: block; width: 100%; height: 100%; border-radius: 50%; opacity: 0.7;
    background:
        radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55) 0 14%, transparent 15%),
        radial-gradient(circle, #fff 0 16%, transparent 17%),
        conic-gradient(#ef4444 0 60deg, #fff 60deg 120deg, #3b82f6 120deg 180deg, #fff 180deg 240deg, #facc15 240deg 300deg, #fff 300deg);
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.35);
    animation: ball-bounce var(--bt) cubic-bezier(0.3, 0, 0.7, 1) var(--d) infinite alternate;
}
@keyframes ball-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100vw + 120px), 0, 0); } }
@keyframes ball-bounce { from { transform: translateY(-2px) rotate(0deg); } to { transform: translateY(calc(-1 * var(--h))) rotate(200deg); } }
.season-summer { --grad-text: linear-gradient(100deg, #fde047 0%, #fb923c 35%, #f472b6 65%, #22d3ee 100%); --pt-a: #fb923c; --pt-b: #fde047; --pt-c: #22d3ee; --st-c: #fb923c; }
.season-summer .hb-1 { stroke: #fde047; } .season-summer .hb-2 { stroke: #22d3ee; } .season-summer .hb-3 { stroke: #fb7185; }
.season-summer .neon-sign span:nth-child(odd) { --c: #fb923c !important; }
.season-summer .neon-sign span:nth-child(even) { --c: #22d3ee !important; }
.season-summer .arcade-hall::before {
    /* Wellen am unteren Rand der Halle */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 0; pointer-events: none; opacity: 0.35;
    border-radius: 0 0 32px 32px;
    background: radial-gradient(14px 10px at 50% 0, transparent 92%, #22d3ee 96%) 0 0 / 28px 12px repeat-x, linear-gradient(transparent 10px, rgba(34, 211, 238, 0.25) 10px);
}

@media (max-width: 640px) {
    .fx-winter i:nth-child(n+22) { display: none; }
    .fx-summer .bball:nth-child(n+3) { display: none; }
    .fx-easter .egg:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .season-fx { display: none; }
}

/* ---------- Ton-Schalter + Teilen ---------- */
.am-btn .snd-off { display: none; }
.am-muted .am-btn .snd-on { display: none; }
.am-muted .am-btn .snd-off { display: grid; }
.am-btn span { display: grid; }
.am-over-actions { flex-wrap: wrap; justify-content: center; }
.am-share-msg:empty { display: none; }

/* ==========================================================================
   Projekt-Anfrage (Konfigurator)
   ========================================================================== */
.inq {
    width: 100%; max-width: 760px; margin: 34px auto 0; text-align: left;
    padding: clamp(18px, 3vw, 28px); border-radius: 20px;
    background: rgba(5, 6, 12, 0.55); border: 1px solid var(--border-strong);
}
.inq[hidden] { display: none; }
.inq-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inq-count { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.inq-count b { color: var(--text); }
.inq-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 650; letter-spacing: -0.02em; }
.inq-progress { height: 3px; margin: 14px 0 20px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.inq-progress span { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0.25); transition: transform 0.5s var(--ease); }
.inq-step { border: 0; margin: 0; padding: 0; min-width: 0; animation: am-rise 0.4s var(--ease); }
.inq-step[hidden] { display: none; }
.inq-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.inq-kind input, .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ik-box {
    display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.ik-box .icon { color: var(--cyan); margin-bottom: 4px; }
.ik-box b { font-size: 16px; }
.ik-box small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.inq-kind:hover .ik-box { border-color: rgba(34, 211, 238, 0.5); transform: translateY(-2px); }
.inq-kind input:checked + .ik-box { border-color: var(--cyan); background: rgba(34, 211, 238, 0.1); box-shadow: 0 0 0 1px var(--cyan) inset; }
.inq-kind input:focus-visible + .ik-box, .chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.inq-label { margin: 4px 0 10px; font-weight: 600; font-size: 15px; }
.inq-label small { color: var(--muted); font-weight: 400; }
.inq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip span {
    display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px;
    border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); color: var(--muted);
    transition: all 0.2s;
}
.chip:hover span { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.chip input:checked + span { color: #0a0a12; background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.inq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.inq-field > span { font-size: 13.5px; font-weight: 500; color: #c9ccd8; }
.inq-field small { color: var(--dim); font-weight: 400; }
.inq-field input, .inq-field textarea {
    width: 100%; font: 15px var(--font); color: var(--text); padding: 12px 14px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-strong); outline: none; resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.inq-field input:focus, .inq-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); }
.inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.inq-grid .inq-field:last-child { grid-column: 1 / -1; }
.inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.inq-consent input { margin-top: 3px; accent-color: var(--cyan); width: 16px; height: 16px; flex: none; }
.inq-consent a { color: var(--cyan); text-decoration: underline; }
.inq-msg { margin: 6px 0 0; min-height: 1.2em; font-size: 14px; color: var(--muted); }
.inq-msg.is-error { color: #fca5a5; }
.inq-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.inq-nav .btn { padding: 12px 20px; }
.inq-nav [hidden] { display: none; }
.inq-nav .btn:disabled { opacity: 0.6; cursor: default; }
.inq-done { max-width: 520px; margin: 34px auto 0; padding: 30px 20px; border-radius: 20px; border: 1px solid rgba(163, 230, 53, 0.4); background: rgba(163, 230, 53, 0.06); animation: am-rise 0.5s var(--ease); }
.inq-done[hidden] { display: none; }
.inq-done-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--lime); color: #0a0a12; box-shadow: 0 0 30px rgba(163, 230, 53, 0.5); }
.inq-done-title { margin: 14px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.inq-done-text { margin: 0; color: var(--muted); }
.inq-or { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 760px; margin: 30px auto 0; color: var(--dim); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.inq-or::before, .inq-or::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.inq-or + .contact-mail { margin-top: 18px; }
@media (max-width: 640px) {
    .inq-grid { grid-template-columns: 1fr; }
    .inq-kinds { grid-template-columns: 1fr 1fr; }
    .inq-nav .btn { flex: 1; }
}

/* ==========================================================================
   Terminal (Easter Egg)
   ========================================================================== */
.term {
    position: fixed; left: 50%; top: 0; z-index: 300; width: min(860px, 100%); height: min(62vh, 560px);
    display: flex; flex-direction: column; transform: translate(-50%, -104%); transition: transform 0.28s var(--ease);
    background: rgba(4, 8, 6, 0.96); border: 1px solid rgba(74, 222, 128, 0.35); border-top: 0; border-radius: 0 0 16px 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(74, 222, 128, 0.35);
    font-family: var(--mono); font-size: 14px; color: #bbf7d0; overflow: hidden;
}
.term[hidden] { display: none; }
.term.is-open { transform: translate(-50%, 0); }
.term::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.term-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(74, 222, 128, 0.2); background: rgba(74, 222, 128, 0.05); }
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.term-dots i:nth-child(1) { background: #f87171; } .term-dots i:nth-child(2) { background: #fbbf24; } .term-dots i:nth-child(3) { background: #4ade80; }
.term-title { flex: 1; font-size: 12px; color: rgba(187, 247, 208, 0.6); letter-spacing: 0.08em; }
.term-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(74, 222, 128, 0.3); background: transparent; color: #bbf7d0; cursor: pointer; font-family: var(--mono); }
.term-close:hover { background: rgba(74, 222, 128, 0.12); }
.term-out { flex: 1; overflow-y: auto; padding: 14px 16px 6px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; text-shadow: 0 0 6px rgba(74, 222, 128, 0.35); }
.term-row { min-height: 1.4em; }
.t-cmd { color: #f0fdf4; }
.t-accent { color: #fcd34d; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.t-dim { color: rgba(187, 247, 208, 0.5); }
.t-err { color: #fca5a5; text-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
.t-ok { color: #4ade80; }
.t-coin { color: #fbbf24; }
.term-line { display: flex; gap: 10px; align-items: center; padding: 10px 16px 14px; border-top: 1px solid rgba(74, 222, 128, 0.12); }
.term-ps { color: #4ade80; white-space: nowrap; }
.term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #f0fdf4; font: inherit; font-size: 16px; caret-color: #4ade80; }
@media (max-width: 640px) {
    .term { height: 70vh; border-radius: 0 0 14px 14px; font-size: 13px; }
    .term-ps { font-size: 12px; }
}

/* Admin-Vorschau-Hinweis */
.preview-bar {
    position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 400; pointer-events: none;
    padding: 7px 14px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
    color: #0a0a12; background: #fbbf24; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Terminal-Secrets: Barrel Roll + Konami-Muenzregen ---------- */
.term.term-roll { animation: term-roll 1s cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes term-roll { from { transform: translate(-50%, 0) rotate(0); } to { transform: translate(-50%, 0) rotate(360deg); } }
.coin-rain { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.coin-rain i {
    position: absolute; top: -40px; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #fde68a 0 34%, #fbbf24 36% 62%, #b45309 64% 100%);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    animation: coin-fall 2s cubic-bezier(0.4, 0, 0.8, 0.6) forwards;
}
@keyframes coin-fall {
    0% { transform: translateY(0) scaleX(1); }
    25% { transform: translateY(28vh) scaleX(0.2); }
    50% { transform: translateY(55vh) scaleX(1); }
    75% { transform: translateY(80vh) scaleX(0.2); }
    100% { transform: translateY(110vh) scaleX(1); }
}

/* ---------- Terminal verschiebbar ---------- */
.term-bar { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.term-dragging .term-bar { cursor: grabbing; }
.term.term-free { transform: none; border-top: 1px solid rgba(74, 222, 128, 0.35); border-radius: 16px; opacity: 0; transition: opacity 0.2s var(--ease); }
.term.term-free.is-open { transform: none; opacity: 1; }
.term.term-dragging { transition: none; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85), 0 0 50px -8px rgba(74, 222, 128, 0.5); }
.term.term-free.term-roll { animation-name: term-roll-free; }
@keyframes term-roll-free { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---------- Power-Up-Info im Spielfenster ---------- */
.am-info-btn { color: #fcd34d; }
.am-start-pu { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #fcd34d; opacity: 0.85; }
.am-start-pu:empty { display: none; }
.am-pu-list { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.am-pu-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); text-align: left; }
.am-pu-list canvas { width: 48px; height: 48px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.am-pu-list b { display: block; font-size: 14px; color: #fff; }
.am-pu-list span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.am-pu-controls { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* Schmale Handys: Spieltitel eigene Zeile, damit er nicht abgeschnitten wird */
@media (max-width: 430px) {
    .am-head { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px 10px 14px; }
    .am-title { flex: 1 0 100%; font-size: 14px; }
    .am-hud { margin-left: 0; margin-right: auto; }
    .am-actions { gap: 5px; }
    .am-btn { width: 34px; height: 34px; }
}

/* ---------- Sprache: Umschalter + Vorschlag ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); margin-left: auto; margin-right: 10px; }
.lang-switch a { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 999px; color: var(--muted); text-decoration: none; transition: color 0.2s, background 0.2s; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a.is-active { color: #05060a; background: linear-gradient(120deg, #a78bfa, #22d3ee); }
.nav-links + .lang-switch { margin-left: 14px; }
.mm-lang { display: flex; gap: 10px; margin-top: 18px; opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
.mobile-menu.is-open .mm-lang, .menu-open .mm-lang { opacity: 1; transform: none; }
.mm-lang a { flex: 1; text-align: center; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--border); font-size: 15px; color: var(--muted); text-decoration: none; }
.mm-lang a.is-active { color: #fff; border-color: rgba(167, 139, 250, 0.6); background: rgba(167, 139, 250, 0.12); }
.lang-hint {
    position: fixed; left: 50%; bottom: 18px; z-index: 250; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px;
    background: rgba(12, 12, 22, 0.94); border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 30px -12px rgba(34, 211, 238, 0.45);
    font-size: 14px; color: var(--text); animation: lh-in 0.5s var(--ease) 0.8s both;
}
.lang-hint.is-leaving { animation: lh-out 0.3s var(--ease) forwards; }
@keyframes lh-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lh-out { to { opacity: 0; transform: translate(-50%, 20px); } }
.lh-flag { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 4px 7px; border-radius: 8px; color: #05060a; background: linear-gradient(120deg, #a78bfa, #22d3ee); }
.lh-text { color: var(--muted); }
.lh-go { padding: 7px 12px; border-radius: 10px; font-weight: 600; color: #05060a; background: #fff; text-decoration: none; white-space: nowrap; }
.lh-go:hover { background: #e0f2fe; }
.lh-stay { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--muted); text-decoration: none; }
.lh-stay:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 640px) {
    .lang-hint { flex-wrap: wrap; bottom: 12px; row-gap: 8px; }
    .lh-text { flex: 1 1 60%; }
}
@media (max-width: 900px) {
    .lang-switch { margin-right: 6px; }
}
.mobile-menu .mm-lang a { font-size: 15px !important; font-weight: 500; letter-spacing: 0; opacity: 1; transform: none; display: block; }
.lang-switch { margin-left: 0; }

/* Racer-Garage: Titel/Hinweis ausblenden, damit nichts ueber dem Auto liegt */
.am-garage .am-start { background: none; padding-bottom: 3%; }
.am-garage .am-start-card { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.am-garage .am-start-title, .am-garage .am-start-hint { display: none; }
.am-garage .am-start .am-pulse { font-size: 11px; }

/* Neon Pinball (Kartenvorschau) */
.gp-bump { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--accent-2) 45%, var(--accent)); box-shadow: 0 0 14px var(--accent-2); animation: gp-bumpflash 1.6s ease-in-out infinite; }
.gp-bu1 { left: 36%; top: 18%; } .gp-bu2 { left: 56%; top: 18%; animation-delay: -0.5s; } .gp-bu3 { left: 46%; top: 42%; animation-delay: -1s; }
@keyframes gp-bumpflash { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); box-shadow: 0 0 22px #fff; } }
.gp-pball { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #94a3b8); box-shadow: 0 0 10px #e0f2fe; left: 50%; top: 70%; animation: gp-pb 2.2s cubic-bezier(0.3, 0, 0.6, 1) infinite; }
@keyframes gp-pb { 0% { transform: translate(-14px, 30px); } 25% { transform: translate(-40px, -70px); } 45% { transform: translate(30px, -95px); } 70% { transform: translate(10px, -40px); } 100% { transform: translate(-14px, 30px); } }
.gp-flip { position: absolute; bottom: 20px; width: 46px; height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.gp-fl { left: calc(50% - 52px); transform-origin: 4px 50%; animation: gp-flipl 2.2s ease-in-out infinite; }
.gp-fr { left: calc(50% + 6px); transform-origin: calc(100% - 4px) 50%; animation: gp-flipr 2.2s ease-in-out infinite; }
@keyframes gp-flipl { 0%, 100% { transform: rotate(24deg); } 5%, 12% { transform: rotate(-20deg); } 20% { transform: rotate(24deg); } }
@keyframes gp-flipr { 0%, 60%, 100% { transform: rotate(-24deg); } 64%, 70% { transform: rotate(20deg); } 78% { transform: rotate(-24deg); } }
.am-start-card .am-pulse { display: inline-block; margin-top: 14px; }
/* Terminal-Secrets: Vollbild-Animationen */
.term-fx { position: fixed; inset: 0; z-index: 400; width: 100vw; height: 100vh; cursor: pointer; opacity: 0; transition: opacity 0.35s ease; }
.term-fx.is-on { opacity: 1; }

/* ==========================================================================
   Tag/Nacht (dezent): eine leichte Lichtstimmung ueber dem Hintergrund
   ========================================================================== */
.bg-layer::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease, background 2s ease; }
html[data-daytime] .bg-layer::after { opacity: 1; }
html[data-daytime="dawn"] .bg-layer::after { background: radial-gradient(90% 55% at 80% -10%, rgba(251, 146, 60, 0.17), transparent 70%), radial-gradient(70% 45% at 10% -5%, rgba(244, 114, 182, 0.11), transparent 70%); }
html[data-daytime="day"] .bg-layer::after { background: radial-gradient(100% 60% at 50% -15%, rgba(186, 230, 253, 0.13), transparent 70%), linear-gradient(rgba(148, 163, 184, 0.045), rgba(148, 163, 184, 0.045)); }
html[data-daytime="dusk"] .bg-layer::after { background: radial-gradient(90% 55% at 15% -10%, rgba(249, 115, 22, 0.16), transparent 70%), radial-gradient(80% 50% at 90% -5%, rgba(168, 85, 247, 0.14), transparent 70%); }
html[data-daytime="night"] .bg-layer::after {
    background:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.8), transparent 60%),
        radial-gradient(1px 1px at 34% 8%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 58% 22%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 76% 12%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(1px 1px at 88% 30%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 38%, rgba(255, 255, 255, 0.3), transparent 60%),
        radial-gradient(60% 40% at 85% -5%, rgba(199, 210, 254, 0.1), transparent 70%),
        linear-gradient(rgba(2, 3, 12, 0.3), rgba(2, 3, 12, 0.3));
}
html[data-daytime="night"] .bg-orb { filter: blur(90px) saturate(0.85); }
@media (prefers-reduced-motion: reduce) { .bg-layer::after { transition: none; } }

/* ==========================================================================
   Arcade-Profil: Leiste, Fenster, Toasts, Flair, Terminal-Farben
   ========================================================================== */
.player-bar {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 8px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: rgba(10, 12, 22, 0.75); color: var(--text); font: 600 14px var(--font); cursor: pointer;
    box-shadow: 0 0 22px -8px rgba(139, 92, 246, 0.6); transition: border-color 0.2s, transform 0.2s var(--ease);
}
.player-bar:hover { border-color: rgba(139, 92, 246, 0.7); transform: translateY(-1px); }
.pb-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; }
.pb-text { padding-right: 6px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-coins, .pf-coins { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); color: #fcd34d; font-family: var(--mono); font-size: 13px; }
.pb-coins[hidden], .pf-coins[hidden] { display: none; }

.pf-modal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 16px; }
.pf-modal[hidden] { display: none; }
.pf-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 9, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-shell {
    position: relative; display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(820px, calc(100dvh - 32px));
    border-radius: 22px; border: 1px solid rgba(139, 92, 246, 0.5); background: #07080f; overflow: hidden;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 50px -12px rgba(139, 92, 246, 0.6);
    animation: pf-in 0.35s var(--ease);
}
@keyframes pf-in { from { transform: translateY(14px) scale(0.98); opacity: 0; } }
.pf-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); }
.pf-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.pf-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tabs { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pf-tabs button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--muted); font: 600 14px var(--font); cursor: pointer;
}
.pf-tabs button[aria-selected="true"] { color: var(--text); background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.45); }
.pf-body { padding: 18px; overflow-y: auto; }
.pf-h { margin: 0 0 6px; font-size: 20px; }
.pf-h4 { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-family: var(--mono); }
.pf-muted { margin: 4px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pf-note { margin: 14px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.pf-wide { width: 100%; justify-content: center; margin: 8px 0 4px; }
.pf-form { display: grid; gap: 8px; margin-top: 14px; }
.pf-label { font-size: 13px; color: var(--muted); }
.pf-form input {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04);
    color: var(--text); font: 500 15px var(--font);
}
.pf-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.pf-discord { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #5865f2; color: #fff; border: 0; }
.pf-row .pf-discord { width: auto; margin: 0; }
.pf-discord:hover { background: #4752c4; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pf-stat { padding: 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); text-align: center; }
.pf-stat b { display: block; font-size: 22px; font-family: var(--mono); }
.pf-stat:first-child b { color: #fcd34d; }
.pf-stat small { color: var(--muted); font-size: 12px; }
.pf-daybar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-bottom: 6px; }
.pf-daybar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f472b6); }
.pf-codebox { margin: 16px 0 4px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(251, 191, 36, 0.6); background: rgba(251, 191, 36, 0.07); display: grid; gap: 4px; }
.pf-codebox b { font-family: var(--mono); font-size: 22px; letter-spacing: 0.1em; color: #fcd34d; }
.pf-codebox small { color: var(--muted); }
.pf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-linked { display: inline-flex; align-items: center; gap: 6px; color: #a5b4fc; font-size: 14px; }
.pf-logout { margin-top: 18px; }
.pf-ach, .pf-shop { display: grid; gap: 8px; margin-top: 10px; }
.pf-achcard, .pf-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.025);
}
.pf-achcard:not(.is-on) { opacity: 0.55; }
.pf-achcard:not(.is-on) .pf-icon { filter: grayscale(1); }
.pf-achcard.is-on { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.05); }
.pf-icon { width: 40px; height: 40px; flex: none; }
.pf-achtxt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-achtxt b { font-size: 15px; }
.pf-achtxt span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.pf-reward, .pf-price { display: inline-flex; align-items: center; gap: 4px; color: #fcd34d; font-family: var(--mono); font-size: 13px; flex: none; }
.pf-achcard.is-on .pf-reward { color: #4ade80; }
.pf-price { color: var(--dim); }
.pf-item.is-worn { border-color: color-mix(in srgb, var(--ic) 70%, transparent); box-shadow: 0 0 18px -8px var(--ic); }
.pf-swatch { width: 40px; height: 40px; flex: none; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #fff, var(--ic) 45%, #0b0c16 100%); display: grid; place-items: center; }
.pf-swatch.flair { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.pf-swatch.flair::after { font-size: 22px; }
.pf-small { padding: 7px 12px; font-size: 13px; flex: none; gap: 5px; }
.pf-small:disabled { opacity: 0.4; cursor: not-allowed; }

.pf-toasts { position: fixed; left: 50%; bottom: 22px; z-index: 450; display: grid; gap: 8px; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.pf-toast {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 600 14px var(--font);
    background: rgba(12, 13, 24, 0.94); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
    opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s var(--ease);
}
.pf-toast.is-in { opacity: 1; transform: none; }
.pf-toast.is-coin { color: #fcd34d; border-color: rgba(251, 191, 36, 0.5); }
.pf-toast.is-ach { color: #fde68a; border-color: rgba(251, 191, 36, 0.8); box-shadow: 0 0 30px -6px rgba(251, 191, 36, 0.6); }
.pf-toast.is-err { color: #fda4af; border-color: rgba(244, 63, 94, 0.6); }

/* Flair neben Namen in den Bestenlisten */
.flair { font-style: normal; margin-left: 6px; }
.flair::after { display: inline-block; }
.flair-bolt::after { content: "\26A1"; }
.flair-star::after { content: "\2605"; color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, 0.8); }
.flair-crown::after { content: "\265B"; color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.8); }

/* Terminal-Farben aus dem Shop */
.term.term-amber { color: #fde68a; border-color: rgba(245, 158, 11, 0.45); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(245, 158, 11, 0.45); background: rgba(12, 8, 2, 0.96); }
.term.term-amber .t-ok, .term.term-amber .term-bar { color: #fbbf24; }
.term.term-cyan { color: #a5f3fc; border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(34, 211, 238, 0.45); background: rgba(2, 8, 14, 0.96); }
.term.term-cyan .t-ok { color: #22d3ee; }
.term.term-pink { color: #fbcfe8; border-color: rgba(244, 114, 182, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(244, 114, 182, 0.5); background: rgba(14, 4, 12, 0.96); }
.term.term-pink .t-ok { color: #f472b6; }
.term.term-amber .term-bar { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.2); }
.term.term-cyan .term-bar { background: rgba(34, 211, 238, 0.06); border-color: rgba(34, 211, 238, 0.2); }
.term.term-pink .term-bar { background: rgba(244, 114, 182, 0.06); border-color: rgba(244, 114, 182, 0.2); }
@media (max-width: 520px) {
    .pf-tabs button span { font-size: 13px; }
    .pf-stat b { font-size: 18px; }
}
.nav-cta .nav-coins { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: #0a0a12; color: #fcd34d; font-family: var(--mono); font-size: 12px; }
.nav-cta .nav-coins[hidden] { display: none; }
.nav-cta [data-pb-text] { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flair-heart::after { content: "\2665"; color: #f472b6; text-shadow: 0 0 8px rgba(244, 114, 182, 0.8); }
.flair-fire::after { content: "\1F525"; }
.flair-skull::after { content: "\2620"; color: #e2e8f0; text-shadow: 0 0 8px rgba(226, 232, 240, 0.6); }
.flair-diamond::after { content: "\25C6"; color: #67e8f9; text-shadow: 0 0 10px rgba(103, 232, 249, 0.9); }
.term.term-red { color: #fecaca; border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(239, 68, 68, 0.55); background: rgba(16, 3, 4, 0.96); }
.term.term-red .t-ok { color: #f87171; }
.term.term-red .term-bar { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); }
.term.term-paper { color: #292524; border-color: rgba(120, 113, 108, 0.5); background: rgba(245, 241, 232, 0.97); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.term.term-paper .t-ok { color: #15803d; }
.term.term-paper .t-coin, .term.term-paper .t-accent { color: #b45309; text-shadow: none; }
.term.term-paper .t-err { color: #b91c1c; }
.term.term-paper .t-dim, .term.term-paper .t-cmd { color: #57534e; }
.term.term-paper .term-bar { background: rgba(120, 113, 108, 0.12); border-color: rgba(120, 113, 108, 0.3); color: #44403c; }
.term.term-paper input { color: #292524; }
.pf-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.pf-filter button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 600 12px var(--font); cursor: pointer; }
.pf-filter button.is-on { color: var(--text); border-color: rgba(139, 92, 246, 0.6); background: rgba(139, 92, 246, 0.15); }
.admin-maint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 500; padding: 9px 16px; border-radius: 999px; background: #fbbf24; color: #1c1404; font: 600 13px var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: calc(100vw - 32px); text-align: center; }
.admin-maint a { color: inherit; text-decoration: underline; margin-left: 6px; }
.arcade-announce { margin: 16px auto 0; max-width: 640px; padding: 10px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--an-c, #fbbf24) 60%, transparent); background: color-mix(in srgb, var(--an-c, #fbbf24) 10%, transparent); color: var(--text); font-size: 15px; line-height: 1.5; text-align: center; box-shadow: 0 0 28px -10px var(--an-c, #fbbf24); }
.arcade-announce b { color: var(--an-c, #fbbf24); }
.pf-limited { font-style: normal; font-size: 12px; color: #fb923c; font-family: var(--mono); }
.pf-orig { opacity: 0.6; margin-right: 2px; font-size: 12px; }
.pf-event { margin: 0 0 12px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.6); background: rgba(251, 191, 36, 0.1); color: #fde68a; font-weight: 700; text-align: center; }
.pf-event.is-sale { border-color: rgba(244, 114, 182, 0.6); background: rgba(244, 114, 182, 0.1); color: #fbcfe8; }
.arcade-announce { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }

/* ==========================================================================
   Fallstudie (projekt.php)
   ========================================================================== */
.pc-case { color: var(--accent, var(--cyan)); margin-right: auto; }
.pc-case:hover { color: var(--text); }
.case { position: relative; padding-bottom: 60px; }
.case-preview-note { position: relative; z-index: 5; margin: 90px auto -60px; width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px; font-size: 13px; color: #fde68a; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); }
.case-hero { position: relative; padding: 150px 0 40px; overflow: hidden; }
.case-glow { position: absolute; inset: -20% -10% auto; height: 520px; pointer-events: none; opacity: 0.55;
    background: radial-gradient(40% 60% at 25% 40%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
                radial-gradient(35% 55% at 80% 30%, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 70%); filter: blur(30px); }
.case-hero .container { position: relative; }
.case-hero .back-link { display: flex; width: fit-content; margin: 0 0 26px; }
.case-title { margin: 16px 0 0; font-size: clamp(40px, 7vw, 88px); line-height: 1; font-weight: 700; letter-spacing: -0.05em; }
.case-tagline { margin: 20px 0 0; max-width: 720px; color: #c9ccd8; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.case-meta .tags { margin: 0; }
.case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.case-cover { margin: 20px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--accent) 60%, transparent); }
.case-cover img { display: block; width: 100%; height: auto; }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 36px 0 10px; }
.case-fact { padding: 22px 22px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.case-fact strong { display: block; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1;
    background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-fact span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.case-chapter { display: grid; grid-template-columns: 240px 1fr; gap: 30px; padding: 54px 0; border-bottom: 1px solid var(--border); }
.case-ch-head { position: sticky; top: 100px; align-self: start; }
.case-ch-num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: 0.1em; }
.case-ch-head h2 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.04em; }
.case-ch-body { color: #c9ccd8; font-size: 17px; line-height: 1.75; max-width: 720px; }
.case-ch-body p { margin: 0 0 16px; }
.case-ch-body p:last-child { margin: 0; }
.case-ch-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.case-ch-body strong { color: var(--text); }
.case-compare { --pos: 50%; position: relative; margin: 50px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); user-select: none; background: var(--bg-2); }
.case-compare > img { display: block; width: 100%; height: auto; }
.cc-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cc-after img { width: 100%; height: 100%; object-fit: cover; }
.cc-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); pointer-events: none; }
.cc-line i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
.cc-line i::before, .cc-line i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.cc-line i::before { left: 7px; border-right-color: #0a0a12; }
.cc-line i::after { right: 7px; border-left-color: #0a0a12; }
.cc-tag { position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--mono); color: #fff; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.cc-tag-l { left: 14px; }
.cc-tag-r { right: 14px; }
.case-compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.case-compare:focus-within .cc-line i { outline: 3px solid var(--cyan); outline-offset: 3px; }
.case-sub { margin: 0 0 20px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.04em; }
.case-gallery-wrap { padding: 54px 0 10px; }
.case-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.case-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; }
.case-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.case-gallery a:hover img { transform: scale(1.05); }
.case-cta { margin: 60px 0 0; padding: clamp(30px, 5vw, 56px); border-radius: var(--radius); text-align: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--surface); }
.case-cta h2 { margin: 0; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.045em; }
.case-cta p { margin: 12px auto 26px; max-width: 520px; color: var(--muted); }
.case-more { margin-top: 70px; }
.case-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.case-more-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease); }
.case-more-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); }
.case-more-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.case-more-card strong { font-size: 18px; letter-spacing: -0.02em; }
.case-more-card span { color: var(--muted); font-size: 14px; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(3, 4, 8, 0.92); backdrop-filter: blur(8px); animation: lb-in 0.25s ease; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); cursor: pointer; }
.lightbox-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
@media (max-width: 760px) {
    .case-chapter { grid-template-columns: 1fr; gap: 12px; padding: 38px 0; }
    .case-ch-head { position: static; }
    .case-hero { padding-top: 120px; }
}