/* ============================================================ ARKADE 3.0 — Design Tokens ("Deep Arcade") SECHSTER Look — und der erste, der die Grund-Grammatik wirklich wechselt. Die Runden 14-18 haben fünfmal die FARBEN getauscht, aber Runde 18 hatte sich auf eine konsequent FLACHE Sprache festgelegt: harte Versatz-Schatten (4px 4px 0), 2-3px deckende Volltonränder, eckige Radien (6-10px), flache Volltonfarben statt Verläufen, Glas/Blur komplett abgeschafft. Arkade 3.0 dreht jede einzelne dieser Achsen um, weil der Rest des Updates auf ECHTES 3D geht (Charakter, Boxen, Hofszene über three.js) — eine flache 2D-Sprache drumherum würde dagegen wie ein Fremdkörper wirken. Neue Regeln: Fläche → Tiefe: weiche, mehrlagige Schatten (Ambient + Direkt) Kontur → Licht: 1px luminöse Ränder + Lichtkante oben auf jeder Fläche ("--lift"), Licht kommt IMMER von oben eckig → weich: großzügige Radien (10-24px), Pillen zurück Volltonfarbe→ Verlauf: --grad-* sind wieder echte Verläufe. Das ist erneut der stärkste Einzelhebel: ~15 Stellen (.btn.primary, .pill.active, .nav-item.active, .bar>i, .gc-badge, …) wechseln automatisch mit, ohne dass eine Komponenten-Datei angefasst wird. kein Glas → Glas: --glass-blur ist wieder echt (Overlays/Modals) Rot/Gelb → Indigo: neue Farbfamilie (Deep-Space-Indigo mit Violett, Cyan und Amber) statt Arcade-Marquee-Rot/Gelb Space Grotesk → Sora, Inter → Plus Jakarta Sans (siehe index.html) UNVERÄNDERTE GRUNDREGEL seit Runde 15: alle Variablen-NAMEN bleiben exakt gleich, damit CSS/JS an tausend Stellen weiterläuft — nur Werte ändern sich. Neu hinzu kommen rein additive Tokens (--lift, --sh-ambient, --ring, --grad-surface). ACHTUNG (Bug aus 3 früheren Runden): cosmetics.js' default-Theme muss beim Ändern von --accent/--accent-2 mitgezogen werden, sonst überschreibt A.applyTheme() beim Login die neuen Tokens per Inline-Style wieder. ============================================================ */ :root { /* ---------- Grundflächen (Dunkel-Modus, Default) ---------- Nicht mehr neutral-grau, sondern leicht ins Indigo gezogen — dadurch wirken die Flächen wie beleuchtetes Material statt wie Papier. */ --bg-0: #07080f; --bg-1: #0c0e1a; --bg-2: #121527; /* Flächen sind jetzt minimal transluzent, weil Glas/Blur zurück ist. --surface-solid bleibt bewusst deckend für alles, was hinter sich nichts durchscheinen lassen darf (Canvas-Hintergründe, Sprite-Kacheln). */ --surface: rgba(24, 27, 47, 0.82); --surface-solid: #181b2f; --surface-2: #1e2239; --surface-hi: #272c47; /* Ränder sind wieder dünn und LUMINÖS statt dick und deckend — sie simulieren eine vom Licht getroffene Kante, keinen gezeichneten Umriss. */ --border: rgba(255, 255, 255, 0.10); --border-hi: rgba(255, 255, 255, 0.22); --overlay: rgba(5, 6, 12, 0.72); /* Text */ --text: #eef1ff; --text-dim: #a2a8c8; --text-mut: #6b7196; /* ---------- Akzent-System — "Deep Arcade": Indigo-Violett als Primär, Cyan als Gegenpol, Amber als Wärme. Alle drei liegen weit genug auseinander, um Zustände (aktiv/Erfolg/Warnung) allein über den Farbton unterscheidbar zu machen. ---------- */ --accent: #7c5cff; --accent-2: #22d3ee; --accent-3: #f472b6; --accent-glow: rgba(124, 92, 255, 0.35); /* Verläufe sind wieder echt — der große Hebel dieses Redesigns. */ --grad-accent: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%); --grad-accent-soft: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(34, 211, 238, 0.12)); --grad-warm: linear-gradient(135deg, #ffb020 0%, #f472b6 100%); --grad-hot: linear-gradient(135deg, #f472b6 0%, #7c5cff 100%); --accent-4: #ffb020; --accent-5: #f472b6; --grad-aurora: linear-gradient(120deg, #7c5cff 0%, #22d3ee 45%, #f472b6 100%); --grad-anime-sky: linear-gradient(180deg, #1b2044 0%, #0c0e1a 60%, #07080f 100%); /* Glow-Tokens sind jetzt echte Leuchtschatten statt Versatz-Schatten. */ --glow-2: 0 0 24px rgba(124, 92, 255, 0.35); --glow-hot: 0 0 28px rgba(244, 114, 182, 0.4); --parallax-1: 0.35; --parallax-2: 0.6; --parallax-3: 1; /* Dunkle "Sichtfenster"-Flächen (Hero-Karten, Spiel-Artwork, Levelpfad- Canvas) — bleiben in BEIDEN Modi dunkel, damit farbige Artworks und der Canvas-Renderer nicht im Hellmodus ausbleichen. */ --ink-1: #07080f; --ink-2: #121527; --cyber-cyan: var(--accent-2); --edge-line: rgba(255, 255, 255, 0.08); --edge-line-hi: rgba(255, 255, 255, 0.20); /* Statt Retro-Scanlines jetzt eine Licht-Schliere von oben — dieselbe Lichtlogik wie --lift, nur großflächig (.modal::after, .gem-cta::before). */ --grain-layer: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 70%); --r-cut: none; /* Radien: großzügig und weich statt eckig. Pillen sind zurück. */ --r-blob: 20px; --r-blob-2: 24px; --r-blob-modal: 26px; /* Glas ist zurück — echte Unschärfe hinter Overlays/Modals/Sidebar. */ --glass-blur: 16px; /* 3-stufiges Elevation-System — weiche, MEHRLAGIGE Schatten: eine enge Kontaktschattierung plus ein weiter Ambient-Schatten. Genau diese Doppelung erzeugt den Eindruck von echter Höhe über der Fläche. */ --elev-0: none; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.28); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 36px rgba(0, 0, 0, 0.4); /* Semantic */ --gold: #ffb020; --green: #34d399; --red: #fb7185; --cyan: var(--accent-2); --blue: #60a5fa; /* Ränder wieder dünn (1px) — die Trennung macht jetzt Licht, nicht Dicke. */ --border-w: 1px; --border-w-lg: 2px; /* Schattenfarbe ist jetzt in BEIDEN Modi dunkel (vorher im Dunkelmodus absichtlich WEISS, weil harte Versatz-Schatten sonst unsichtbar waren). */ --shadow-ink: rgba(0, 0, 0, 0.55); /* Radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Shadows — weich und geschichtet, kein `0`-Blur mehr. */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.22); --sh-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --sh-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 48px rgba(0, 0, 0, 0.38); --sh-glow: 0 0 0 1px rgba(124, 92, 255, 0.5), 0 8px 32px rgba(124, 92, 255, 0.35); /* Typography — neue Familie: Sora (Display) + Plus Jakarta Sans (Text). Siehe Google-Fonts-Link in index.html. */ --font-display: 'Sora', 'Space Grotesk', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Motion — Bewegung ist orthogonal zu Form/Material, bleibt weitgehend. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1); --ease-soft: cubic-bezier(0.25, 0.8, 0.4, 1); --dur: 0.26s; --dur-fast: 0.15s; --dur-slow: 0.45s; --dur-snap: 0.11s; --stagger: 0.035s; --ease-bounce: cubic-bezier(0.3, 1.4, 0.5, 1); /* Glas-Tokens sind wieder echt statt neutralisiert. */ --glass-bg: linear-gradient(160deg, rgba(40, 45, 78, 0.72), rgba(18, 21, 39, 0.68)); --glass-border: rgba(255, 255, 255, 0.14); --sh-xl: 0 8px 16px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.45); --sh-press: inset 0 2px 6px rgba(0, 0, 0, 0.45); --glow-accent: 0 0 28px rgba(124, 92, 255, 0.45); /* ---------- NEU (additiv) ---------- --lift: die Lichtkante oben auf jeder erhabenen Fläche. Als inset-Schatten gebaut, damit sie zu jedem box-shadow dazukomponiert werden kann. Das ist zusammen mit den weichen Schatten das Kernmerkmal des Looks. */ --lift: inset 0 1px 0 rgba(255, 255, 255, 0.10); --lift-strong: inset 0 1px 0 rgba(255, 255, 255, 0.18); --sh-ambient: 0 24px 64px rgba(0, 0, 0, 0.45); --ring: 0 0 0 3px rgba(124, 92, 255, 0.35); /* Sanfter Flächenverlauf für Karten/Panels — macht große Flächen lebendig, ohne sie einzufärben. */ --grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%); /* Layout */ --nav-w: 248px; --maxw: 1220px; } /* ============================================================ Hell-Modus — [data-theme="light"] auf (siehe js/core/colormode.js). Gleiche Farbfamilie, nur Helligkeit/Sättigung verschoben, damit die käuflichen Cosmetic-Themes (cosmetics.js) NICHT verdoppelt werden müssen. Wichtig für die neue Sprache: im Hellmodus tragen NICHT die Schatten die Tiefe (die würden schmutzig wirken), sondern feine Ränder + ein sehr dezenter Ambient-Schatten. Deshalb sind die --sh-* hier flacher. ============================================================ */ [data-theme="light"] { --bg-0: #f7f8fc; --bg-1: #eef0f8; --bg-2: #e4e7f3; --surface: rgba(255, 255, 255, 0.86); --surface-solid: #ffffff; --surface-2: #f4f6fc; --surface-hi: #e8ebf6; --border: rgba(16, 20, 45, 0.12); --border-hi: rgba(16, 20, 45, 0.24); --overlay: rgba(18, 21, 39, 0.42); --text: #10142d; --text-dim: #4b5273; --text-mut: #7c83a3; /* Etwas dunkler/satter als im Dunkelmodus, damit die Kontraste auf Weiß tragen (die Rohwerte #7c5cff/#22d3ee fallen auf Weiß durch). */ --accent: #6338f0; --accent-2: #0891b2; --accent-3: #db2777; --accent-glow: rgba(99, 56, 240, 0.22); --grad-accent: linear-gradient(135deg, #6338f0 0%, #0891b2 100%); --grad-accent-soft: linear-gradient(135deg, rgba(99, 56, 240, 0.12), rgba(8, 145, 178, 0.10)); --grad-warm: linear-gradient(135deg, #d97706 0%, #db2777 100%); --grad-hot: linear-gradient(135deg, #db2777 0%, #6338f0 100%); --accent-4: #d97706; --accent-5: #db2777; --grad-aurora: linear-gradient(120deg, #6338f0 0%, #0891b2 45%, #db2777 100%); --grad-anime-sky: linear-gradient(180deg, #e4e7f3 0%, #f7f8fc 100%); --glow-2: 0 0 20px rgba(99, 56, 240, 0.22); --glow-hot: 0 0 22px rgba(219, 39, 119, 0.25); --cyber-cyan: var(--accent-2); --edge-line: rgba(16, 20, 45, 0.10); --edge-line-hi: rgba(16, 20, 45, 0.20); --grain-layer: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 75%); --gold: #d97706; --green: #059669; --red: #e11d48; --cyan: var(--accent-2); --blue: #2563eb; --shadow-ink: rgba(16, 20, 45, 0.18); --elev-1: 0 1px 2px rgba(16, 20, 45, 0.06), 0 4px 14px rgba(16, 20, 45, 0.07); --elev-2: 0 2px 4px rgba(16, 20, 45, 0.08), 0 12px 32px rgba(16, 20, 45, 0.10); --sh-sm: 0 1px 2px rgba(16, 20, 45, 0.06), 0 2px 6px rgba(16, 20, 45, 0.05); --sh-md: 0 2px 4px rgba(16, 20, 45, 0.07), 0 8px 20px rgba(16, 20, 45, 0.08); --sh-lg: 0 4px 8px rgba(16, 20, 45, 0.09), 0 18px 40px rgba(16, 20, 45, 0.12); --sh-xl: 0 8px 16px rgba(16, 20, 45, 0.12), 0 32px 70px rgba(16, 20, 45, 0.16); --sh-glow: 0 0 0 1px rgba(99, 56, 240, 0.35), 0 8px 28px rgba(99, 56, 240, 0.22); --sh-press: inset 0 2px 5px rgba(16, 20, 45, 0.12); --glow-accent: 0 0 24px rgba(99, 56, 240, 0.28); --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 246, 252, 0.78)); --glass-border: rgba(16, 20, 45, 0.10); /* Im Hellmodus kommt die Lichtkante von der Fläche selbst (fast weiß), der Effekt ist dezenter als auf Dunkel. */ --lift: inset 0 1px 0 rgba(255, 255, 255, 0.9); --lift-strong: inset 0 1px 0 rgba(255, 255, 255, 1); --sh-ambient: 0 24px 56px rgba(16, 20, 45, 0.12); --ring: 0 0 0 3px rgba(99, 56, 240, 0.22); --grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0.001s; --dur-fast: 0.001s; --dur-slow: 0.001s; --dur-snap: 0.001s; --stagger: 0s; } } /* Manueller Schalter im Einstellungen-Screen (unabhängig vom OS-Setting oben) */ html.force-reduce-motion { --dur: 0.001s; --dur-fast: 0.001s; --dur-slow: 0.001s; --dur-snap: 0.001s; --stagger: 0s; } /* Adaptiver Performance-Modus (js/core/perf.js setzt diese Klassen auf ). Betrifft NUR dekorative Dauerschleifen ohne Interaktion — Hover/Klick/Übergänge bleiben unverändert. Neu in 3.0: auf schwachen Geräten fällt zusätzlich die teure Glas-Unschärfe weg (backdrop-filter ist auf Mobilgeräten der mit Abstand teuerste Effekt dieses Looks); die Flächen bleiben dank --surface-solid deckend lesbar, es fehlt nur die Unschärfe dahinter. */ html.low-power { --glass-blur: 0px; } html.low-power .brand .logo, html.tab-hidden .brand .logo { animation: none; box-shadow: var(--sh-sm); } html.low-power .hero-glow, html.tab-hidden .hero-glow { animation: none; } html.low-power .brand .name span, html.tab-hidden .brand .name span, html.low-power .hero-name, html.tab-hidden .hero-name, html.low-power .hero-card::before, html.tab-hidden .hero-card::before, html.low-power .title-shimmer, html.low-power .title-flow, html.low-power .title-rainbow, html.tab-hidden .title-shimmer, html.tab-hidden .title-flow, html.tab-hidden .title-rainbow { animation: none; background-position: 0 0; } html.low-power #bg-mesh, html.low-power #bg-mesh::after { opacity: .7; }