/* ========================================================================== KIRKA.IO UI FRAMEWORK — kirka-ui-themes.css (v2 add-on) Theme system: override the core CSS variables via [data-theme] attribute. BACKWARD COMPATIBILITY ────────────────────── This file is a standalone add-on. kirka-ui.css (v1) is NOT modified. Projects that only load kirka-ui.css continue to work exactly as before. Theming is opt-in: load this file AFTER kirka-ui.css, then set data-theme="" on or . USAGE ────────────────────── HTML: JS: document.documentElement.setAttribute('data-theme', 'forest'); document.documentElement.removeAttribute('data-theme'); // back to default BUILT-IN THEMES ────────────────────── default — blue (same as v1, no override needed — included for completeness) crimson — deep red / blood forest — dark green / military void — near-black / ultra dark royal — purple / premium amber — warm brown / golden dark — neutral charcoal / no color tint light — bright / inverted for light environments ========================================================================== */ /* ========================================================================== ELEMENT OVERRIDES These rules activate for ANY [data-theme] and redirect previously hardcoded hex values to new CSS custom properties defined per theme. Without a [data-theme] attribute (plain v1 usage) these rules never fire. ========================================================================== */ /* .card-cont 3D border — was #4d5c8b / #3e4d7c */ [data-theme] .card-cont { border-top-color: var(--card-border-top); border-right-color: var(--card-border-side); border-left-color: var(--card-border-side); } /* .icon-btn left-nav border — same hardcoded values */ [data-theme] .icon-btn { border-color: var(--card-border-side); border-top-color: var(--card-border-top); } /* Store item bg gradient — was #202639 / #13192d / #080c1b */ [data-theme] .subject.store-item { background: radial-gradient(39.78% 145.24% at 54.34% 55.56%, var(--store-bg-inner) 0, var(--store-bg-outer) 100%); border-color: var(--store-border); } /* .soc-group.client button borders — was #6a78a1 / #383f56 */ [data-theme] .soc-group.client { border-top-color: var(--client-border-t) !important; border-bottom-color: var(--client-border-b) !important; } /* .invite-btn hover — was #3458b1 */ [data-theme] .invite-btn:hover { background-color: var(--invite-hover); } /* .top-bar box-shadow — was #181c28 */ [data-theme] .top-bar { box-shadow: 0 0.063rem 0.25rem var(--topbar-shadow); } /* .panel glass card — was rgba(59,73,117,.7) = panel-5 */ [data-theme] .panel { background: var(--panel-glass-5); } /* .tab-info (player-list info card) — was rgba(47,57,87,.7) = panel-1 */ [data-theme] .tab-info { background: var(--panel-glass-1); } /* .hud-panel (score/cash HUD) — was rgba(59,73,117,.7) = panel-5 */ [data-theme] .hud-panel { background: var(--panel-glass-5); } /* .keybind-input — was rgba(32,38,57,.75) = panel-3 */ [data-theme] .keybind-input { background: var(--panel-glass-3); } /* .quests panel — was hardcoded Discord-blue */ [data-theme] .quests { background: var(--quests-bg); border-color: var(--quests-border-side); border-top-color: var(--quests-border-t); border-bottom-color:var(--quests-border-b); } /* .classic-btn round icon button — was rgba(32,38,57,.75) = panel-3 */ [data-theme] .classic-btn { background: var(--panel-glass-3); } [data-theme] .classic-btn:hover { background: var(--panel-glass-3-strong); } /* .main (options/settings content bg) — was rgba(47,57,87,.5) = panel-1 dim */ [data-theme] .main { background: var(--panel-glass-1-dim); } /* .quick-slash (chat slash button) — was rgba(55,71,124,.9) = panel-2 strong */ [data-theme] .quick-slash { background: var(--panel-glass-2-strong); } /* .chat-helper autocomplete — was rgba(37,47,82,.92) = panel-1 dark */ [data-theme] .chat-helper { background: var(--panel-glass-1-strong); } /* .chat-helper__item.active — was rgba(74,97,158,.75) = panel-2 lighter */ [data-theme] .chat-helper__item.active { background: var(--panel-glass-2-dim); } /* .kill-bar-item (HUD kill feed) — was rgba(55,71,124,.6) = panel-2 dim */ [data-theme] .kill-bar-item { background: var(--panel-glass-2-dim); } /* .kill-death .bg (K/D counter bg) — was rgba(59,73,117,.7) = panel-5 */ [data-theme] .kill-death .bg { background: var(--panel-glass-5); } /* .user-card (death/respawn screen) — was blue-tinted gradient */ [data-theme] .user-card { background: var(--user-card-bg); } /* .coming-soon overlay — was rgba(59,73,117,.6) = panel-5 dim */ [data-theme] .coming-soon { background-color: var(--panel-glass-5-dim); } /* .mobile-menu-btn — was rgba(32,38,57,.75) = panel-3 */ [data-theme] .mobile-menu-btn { background: var(--panel-glass-3); } /* .bg-glass utility class — was rgba(47,57,87,.7) = panel-1 */ [data-theme] .bg-glass { background: var(--panel-glass-1); } /* .enter (server JOIN button) — ensure action color beats .button base */ [data-theme] .enter { background-color: var(--blue-4); --hover-color: var(--blue-5); } /* ========================================================================== DEFAULT — explicit alias for the v1 blue palette ========================================================================== */ [data-theme="default"] { /* Panel scale */ --panel-1: #2f3957; --panel-2: #37477c; --panel-3: #202639; --panel-4: #3c4b68; --panel-5: #3b4975; --panel-6: #26335b; /* Backgrounds */ --bg-main: #26335b; --bg-gradient: linear-gradient(103.28deg, #26335b 7.06%, #26335b 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(23,73,197,.9) 0, rgba(28,46,113,0) 100%); --bg-dark: #12151f; --container-gradient: linear-gradient(103.28deg, #262f4b 7.06%, #202639 90.75%); /* Action color */ --blue-1: #453ad4; --blue-2: #545ffc; --blue-3: #222aa0; --blue-4: #2f80ed; --blue-5: #4f94f1; --blue-6: #256fd3; /* Hardcoded-color overrides */ --card-border-top: #4d5c8b; --card-border-side: #3e4d7c; --store-bg-inner: #202639; --store-bg-outer: #13192d; --store-border: #080c1b; --client-border-t: #6a78a1; --client-border-b: #383f56; --invite-hover: #3458b1; --topbar-shadow: #181c28; --panel-glass-1: rgba(47,57,87,.7); --panel-glass-1-dim: rgba(47,57,87,.5); --panel-glass-1-strong: rgba(37,47,82,.92); --panel-glass-3: rgba(32,38,57,.75); --panel-glass-3-strong: rgba(32,38,57,.9); --panel-glass-5: rgba(59,73,117,.7); --panel-glass-5-dim: rgba(59,73,117,.6); --panel-glass-2: rgba(55,71,124,.7); --panel-glass-2-strong: rgba(55,71,124,.9); --panel-glass-2-dim: rgba(74,97,158,.6); --user-card-bg: linear-gradient(93.94deg, rgba(26,31,46,.65) -6.86%, rgba(33,55,116,.65) 104.84%); --weapon-glow-color: rgba(100,150,255,.4); --player-you-bg: rgba(47,128,237,.2); --discord-bg: #7289da; --discord-hover: #91a3e5; --discord-border-t: #91a3e5; --discord-border-b: #526cc9; --client-bg: #545f81; --client-hover: #4a5471; --quests-bg: #7289da; --quests-border-t: #849df5; --quests-border-side:#7791ed; --quests-border-b: #5b6dad; } /* ========================================================================== CRIMSON — deep red ========================================================================== */ [data-theme="crimson"] { --panel-1: #572f2f; --panel-2: #6e3737; --panel-3: #381f1f; --panel-4: #5e3838; --panel-5: #6a3535; --panel-6: #4a2323; --bg-main: #3d1a1a; --bg-gradient: linear-gradient(103.28deg, #4a2323 7.06%, #4a2323 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(197,23,23,.9) 0, rgba(113,28,28,0) 100%); --bg-dark: #1f0e0e; --container-gradient: linear-gradient(103.28deg, #3d2020 7.06%, #381f1f 90.75%); --blue-1: #c43030; --blue-2: #e84444; --blue-3: #961c1c; --blue-4: #e03535; --blue-5: #f05c5c; --blue-6: #b82a2a; --card-border-top: #8b4d4d; --card-border-side: #7c3e3e; --store-bg-inner: #381f1f; --store-bg-outer: #2d1313; --store-border: #1b0808; --client-border-t: #a17070; --client-border-b: #563535; --invite-hover: #b12e2e; --topbar-shadow: #281818; --panel-glass-1: rgba(87,47,47,.7); --panel-glass-1-dim: rgba(87,47,47,.5); --panel-glass-1-strong: rgba(70,35,35,.92); --panel-glass-3: rgba(56,31,31,.75); --panel-glass-3-strong: rgba(56,31,31,.9); --panel-glass-5: rgba(106,53,53,.7); --panel-glass-5-dim: rgba(106,53,53,.6); --panel-glass-2: rgba(110,55,55,.7); --panel-glass-2-strong: rgba(110,55,55,.9); --panel-glass-2-dim: rgba(140,70,70,.6); --user-card-bg: linear-gradient(93.94deg, rgba(46,20,20,.65) -6.86%, rgba(116,33,33,.65) 104.84%); --weapon-glow-color: rgba(255,100,100,.4); --player-you-bg: rgba(224,53,53,.2); --discord-bg: #c04050; --discord-hover: #d85060; --discord-border-t: #d85060; --discord-border-b: #8a2a38; --client-bg: #7a4545; --client-hover: #6a3838; --quests-bg: #b83030; --quests-border-t: #d45050; --quests-border-side:#c44040; --quests-border-b: #8c2020; } /* ========================================================================== FOREST — dark green / military ========================================================================== */ [data-theme="forest"] { --panel-1: #2f5733; --panel-2: #376b3c; --panel-3: #1f3921; --panel-4: #3c6640; --panel-5: #3b6841; --panel-6: #26472a; --bg-main: #1f3a23; --bg-gradient: linear-gradient(103.28deg, #213d25 7.06%, #213d25 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(23,160,70,.9) 0, rgba(28,100,46,0) 100%); --bg-dark: #0e1f10; --container-gradient: linear-gradient(103.28deg, #263e28 7.06%, #1f3921 90.75%); --blue-1: #1fa84a; --blue-2: #26cc58; --blue-3: #13782f; --blue-4: #28d45f; --blue-5: #44e876; --blue-6: #18a040; --card-border-top: #4d8b55; --card-border-side: #3e7c46; --store-bg-inner: #1f3921; --store-bg-outer: #131f13; --store-border: #081b0a; --client-border-t: #78a17e; --client-border-b: #38562e; --invite-hover: #1a8838; --topbar-shadow: #181c18; --panel-glass-1: rgba(47,87,51,.7); --panel-glass-1-dim: rgba(47,87,51,.5); --panel-glass-1-strong: rgba(35,70,38,.92); --panel-glass-3: rgba(31,57,33,.75); --panel-glass-3-strong: rgba(31,57,33,.9); --panel-glass-5: rgba(59,104,65,.7); --panel-glass-5-dim: rgba(59,104,65,.6); --panel-glass-2: rgba(55,107,60,.7); --panel-glass-2-strong: rgba(55,107,60,.9); --panel-glass-2-dim: rgba(70,130,75,.6); --user-card-bg: linear-gradient(93.94deg, rgba(20,40,22,.65) -6.86%, rgba(33,100,40,.65) 104.84%); --weapon-glow-color: rgba(80,220,130,.4); --player-you-bg: rgba(40,212,95,.2); --discord-bg: #408050; --discord-hover: #509a60; --discord-border-t: #509a60; --discord-border-b: #2a6030; --client-bg: #4a7050; --client-hover: #3a6040; --quests-bg: #2a7830; --quests-border-t: #4a9850; --quests-border-side:#3a8840; --quests-border-b: #1a5820; } /* ========================================================================== VOID — near-black / ultra dark ========================================================================== */ [data-theme="void"] { --panel-1: #1b1d2c; --panel-2: #22253d; --panel-3: #10121c; --panel-4: #1e2133; --panel-5: #1d2035; --panel-6: #141720; --bg-main: #0d0e1a; --bg-gradient: linear-gradient(103.28deg, #0d0e1a 7.06%, #0d0e1a 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(50,55,120,.85) 0, rgba(15,18,45,0) 100%); --bg-dark: #07080f; --container-gradient: linear-gradient(103.28deg, #12141f 7.06%, #10121c 90.75%); --blue-1: #3530a8; --blue-2: #4248cc; --blue-3: #1c2080; --blue-4: #2560c0; --blue-5: #3f78d8; --blue-6: #1e58aa; --card-border-top: #2a2d42; --card-border-side: #1e2035; --store-bg-inner: #10121c; --store-bg-outer: #0a0c18; --store-border: #04050f; --client-border-t: #3a3d5a; --client-border-b: #181a28; --invite-hover: #223070; --topbar-shadow: #0c0e18; --panel-glass-1: rgba(27,29,44,.7); --panel-glass-1-dim: rgba(27,29,44,.5); --panel-glass-1-strong: rgba(20,22,36,.92); --panel-glass-3: rgba(16,18,28,.75); --panel-glass-3-strong: rgba(16,18,28,.9); --panel-glass-5: rgba(29,32,53,.7); --panel-glass-5-dim: rgba(29,32,53,.6); --panel-glass-2: rgba(34,37,61,.7); --panel-glass-2-strong: rgba(34,37,61,.9); --panel-glass-2-dim: rgba(50,55,90,.6); --user-card-bg: linear-gradient(93.94deg, rgba(10,11,20,.65) -6.86%, rgba(18,22,55,.65) 104.84%); --weapon-glow-color: rgba(60,80,180,.4); --player-you-bg: rgba(37,96,192,.2); --discord-bg: #303560; --discord-hover: #404878; --discord-border-t: #404878; --discord-border-b: #202448; --client-bg: #363845; --client-hover: #282a38; --quests-bg: #1e2240; --quests-border-t: #303860; --quests-border-side:#262c50; --quests-border-b: #141830; } /* ========================================================================== ROYAL — purple / premium ========================================================================== */ [data-theme="royal"] { --panel-1: #3d2f57; --panel-2: #4e3b7c; --panel-3: #261f39; --panel-4: #4a3868; --panel-5: #483875; --panel-6: #32265b; --bg-main: #261f3d; --bg-gradient: linear-gradient(103.28deg, #32265b 7.06%, #32265b 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(130,23,197,.9) 0, rgba(70,28,113,0) 100%); --bg-dark: #14101f; --container-gradient: linear-gradient(103.28deg, #2e2348 7.06%, #261f39 90.75%); --blue-1: #8a30d4; --blue-2: #a444f8; --blue-3: #661ca0; --blue-4: #9f35ed; --blue-5: #b558f2; --blue-6: #7e28c8; --card-border-top: #6b4d8b; --card-border-side: #5a3e7c; --store-bg-inner: #261f39; --store-bg-outer: #1a132d; --store-border: #0c081b; --client-border-t: #8a78a1; --client-border-b: #483856; --invite-hover: #6a28b8; --topbar-shadow: #1c1828; --panel-glass-1: rgba(61,47,87,.7); --panel-glass-1-dim: rgba(61,47,87,.5); --panel-glass-1-strong: rgba(48,34,72,.92); --panel-glass-3: rgba(38,31,57,.75); --panel-glass-3-strong: rgba(38,31,57,.9); --panel-glass-5: rgba(72,56,117,.7); --panel-glass-5-dim: rgba(72,56,117,.6); --panel-glass-2: rgba(78,59,124,.7); --panel-glass-2-strong: rgba(78,59,124,.9); --panel-glass-2-dim: rgba(100,80,155,.6); --user-card-bg: linear-gradient(93.94deg, rgba(24,18,46,.65) -6.86%, rgba(70,33,116,.65) 104.84%); --weapon-glow-color: rgba(180,80,255,.4); --player-you-bg: rgba(159,53,237,.2); --discord-bg: #7850c0; --discord-hover: #8868d8; --discord-border-t: #8868d8; --discord-border-b: #5030a0; --client-bg: #5a4878; --client-hover: #4a3868; --quests-bg: #7030a8; --quests-border-t: #9050c8; --quests-border-side:#8040b8; --quests-border-b: #501880; } /* ========================================================================== AMBER — warm brown / golden ========================================================================== */ [data-theme="amber"] { --panel-1: #57432f; --panel-2: #6b5237; --panel-3: #392c1f; --panel-4: #644e38; --panel-5: #6b5036; --panel-6: #4a361f; --bg-main: #3a2a14; --bg-gradient: linear-gradient(103.28deg, #4a3620 7.06%, #4a3620 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(197,120,23,.85) 0, rgba(113,70,20,0) 100%); --bg-dark: #1e160a; --container-gradient: linear-gradient(103.28deg, #463524 7.06%, #392c1f 90.75%); --blue-1: #b87020; --blue-2: #d4882a; --blue-3: #8c5010; --blue-4: #cc8020; --blue-5: #e09a3a; --blue-6: #a86818; --card-border-top: #8b7044; --card-border-side: #7c5e38; --store-bg-inner: #392c1f; --store-bg-outer: #2d1f13; --store-border: #1b1008; --client-border-t: #a19278; --client-border-b: #56472e; --invite-hover: #b07018; --topbar-shadow: #281e18; --panel-glass-1: rgba(87,67,47,.7); --panel-glass-1-dim: rgba(87,67,47,.5); --panel-glass-1-strong: rgba(70,50,32,.92); --panel-glass-3: rgba(57,44,31,.75); --panel-glass-3-strong: rgba(57,44,31,.9); --panel-glass-5: rgba(107,80,54,.7); --panel-glass-5-dim: rgba(107,80,54,.6); --panel-glass-2: rgba(107,82,55,.7); --panel-glass-2-strong: rgba(107,82,55,.9); --panel-glass-2-dim: rgba(135,105,72,.6); --user-card-bg: linear-gradient(93.94deg, rgba(40,28,16,.65) -6.86%, rgba(100,72,28,.65) 104.84%); --weapon-glow-color: rgba(255,180,60,.4); --player-you-bg: rgba(204,128,32,.2); --discord-bg: #a07038; --discord-hover: #b88048; --discord-border-t: #b88048; --discord-border-b: #785020; --client-bg: #7a5e38; --client-hover: #6a4e28; --quests-bg: #a07030; --quests-border-t: #c09050; --quests-border-side:#b08040; --quests-border-b: #785020; } /* ========================================================================== DARK — neutral charcoal, no color tint ========================================================================== */ [data-theme="dark"] { --panel-1: #2a2a2e; --panel-2: #343438; --panel-3: #1e1e22; --panel-4: #303034; --panel-5: #2e2e35; --panel-6: #1a1a1e; --bg-main: #18181c; --bg-gradient: linear-gradient(103.28deg, #18181c 7.06%, #18181c 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(60,65,90,.7) 0, rgba(20,20,30,0) 100%); --bg-dark: #0c0c10; --container-gradient: linear-gradient(103.28deg, #222228 7.06%, #1e1e22 90.75%); /* Action color: slate blue — visible but neutral */ --blue-1: #4058c8; --blue-2: #5068e0; --blue-3: #2a3ca0; --blue-4: #3870d8; --blue-5: #5088e8; --blue-6: #2e60c0; --card-border-top: #3e3e48; --card-border-side: #303038; --store-bg-inner: #1e1e22; --store-bg-outer: #131318; --store-border: #08080c; --client-border-t: #606070; --client-border-b: #303038; --invite-hover: #3a4ca8; --topbar-shadow: #0e0e14; --panel-glass-1: rgba(42,42,46,.7); --panel-glass-1-dim: rgba(42,42,46,.5); --panel-glass-1-strong: rgba(30,30,33,.92); --panel-glass-3: rgba(30,30,34,.75); --panel-glass-3-strong: rgba(30,30,34,.9); --panel-glass-5: rgba(46,46,53,.7); --panel-glass-5-dim: rgba(46,46,53,.6); --panel-glass-2: rgba(52,52,56,.7); --panel-glass-2-strong: rgba(52,52,56,.9); --panel-glass-2-dim: rgba(72,72,82,.6); --user-card-bg: linear-gradient(93.94deg, rgba(12,12,14,.65) -6.86%, rgba(36,38,55,.65) 104.84%); --weapon-glow-color: rgba(120,130,200,.4); --player-you-bg: rgba(56,112,216,.2); --discord-bg: #505060; --discord-hover: #606074; --discord-border-t: #606074; --discord-border-b: #383845; --client-bg: #454550; --client-hover: #363640; --quests-bg: #383840; --quests-border-t: #505060; --quests-border-side:#484854; --quests-border-b: #282830; } /* ========================================================================== LIGHT — bright / inverted for light environments ========================================================================== */ [data-theme="light"] { /* Panels flip to light */ --panel-1: #e0e6f5; --panel-2: #cdd8f0; --panel-3: #f0f3fc; --panel-4: #d8e0f0; --panel-5: #dce4f2; --panel-6: #bcc8e4; --bg-main: #ccd5ec; --bg-gradient: linear-gradient(103.28deg, #ccd5ec 7.06%, #ccd5ec 90.75%); --bg-radial: radial-gradient(74.74% 74.74% at 51.12% 51.68%, rgba(100,140,240,.35) 0, rgba(180,200,240,0) 100%); --bg-dark: #b0bcd8; --container-gradient: linear-gradient(103.28deg, #d4dcf0 7.06%, #f0f3fc 90.75%); /* Action color: standard blue, slightly deeper for contrast on light bg */ --blue-1: #3a46c0; --blue-2: #4858e8; --blue-3: #202e98; --blue-4: #2870d8; --blue-5: #4488e8; --blue-6: #1e60c0; /* Text: dark on light backgrounds */ --white: #1a1c2e; /* Borders: light panels need lighter highlights, darker sides */ --card-border-top: #f4f7ff; --card-border-side: #c4cfe8; --store-bg-inner: #d8e0f0; --store-bg-outer: #c8d4ec; --store-border: #a8b8d8; --client-border-t: #d8e0f4; --client-border-b: #98a8c8; --invite-hover: #2860c0; --topbar-shadow: rgba(140,160,200,.35); --panel-glass-1: rgba(224,230,245,.75); --panel-glass-1-dim: rgba(224,230,245,.6); --panel-glass-1-strong: rgba(200,215,240,.9); --panel-glass-3: rgba(240,243,252,.8); --panel-glass-3-strong: rgba(235,240,252,.92); --panel-glass-5: rgba(220,228,242,.75); --panel-glass-5-dim: rgba(220,228,242,.65); --panel-glass-2: rgba(205,216,240,.75); --panel-glass-2-strong: rgba(190,205,235,.9); --panel-glass-2-dim: rgba(195,210,240,.65); --user-card-bg: linear-gradient(93.94deg, rgba(200,210,235,.75) -6.86%, rgba(190,210,250,.75) 104.84%); --weapon-glow-color: rgba(60,120,220,.4); --player-you-bg: rgba(40,112,216,.2); --discord-bg: #5878d0; --discord-hover: #6888e0; --discord-border-t: #7898e8; --discord-border-b: #3858b0; --client-bg: #8090b8; --client-hover: #6878a8; --quests-bg: #c8d4f0; --quests-border-t: #dce8ff; --quests-border-side:#c0ceec; --quests-border-b: #a0b0d8; } /* Light theme — restore white text on colored buttons */ [data-theme="light"] .button { color: #ffffff; } /* Light theme — soften text shadow (dark outline on dark text looks bad on light bg) */ [data-theme="light"] .text-1 { text-shadow: -1px -1px 0 rgba(255,255,255,.6), 1px -1px 0 rgba(255,255,255,.6), -1px 1px 0 rgba(255,255,255,.6), 1px 1px 0 rgba(255,255,255,.6), 0 0.13rem 1px rgba(255,255,255,.2); } [data-theme="light"] .text-2 { text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5); } /* Game background pattern — keep the tiled bg lines visible on light bg */ [data-theme="light"] .game-bg__pattern { opacity: 0.08; }