/* ════════════════════════════════════════════════════════════════════════ Spillorama fargetemaer — design-handoff «Spillorama Temaer» (2026-06-10). Bakgrunn: mørk nær-svart burgunder speiler rommet på fysiske bingo-terminaler (gjenskinn). Temaene er lysere/mer selvlysende mellomtoner som demper speilingen. Spilleren velger tema via tema-dropdownen i topplinjen (theme.js) — valget lagres per enhet (localStorage) og gjelder lobby + Spill 1/2/3. Andre spill (SpinnGo, Candy, eksterne integrasjoner) berøres ikke: theme.js fjerner data-theme-attributtet når et ikke-temabart spill er aktivt. Kontrakt: - `data-theme=""` settes på av theme.js (og av FOUC-guarden i ved sidelast). - Uten data-theme er ALLE --th-*-variabler udefinerte, og hvert bruksted i index.html faller tilbake til dagens hardkodede verdi («Standard» = dagens look, pixel-identisk). - Spillklienten (packages/game-client GameApp) leser --th-canvas-bg for Pixi-canvas-bakgrunnen. Endrer du variabelnavnet her, må packages/game-client/src/core/canvasTheme.ts endres tilsvarende. Variabler per tema (alle blokker definerer komplett sett): --th-bg grunnflate (farge eller gradient) --th-glow radial topp-glød i skjermbakgrunnen --th-noise opasitet for grain-tekstur (bryter opp speilflaten) --th-page-bg solid side-/body-bakgrunn (= mørkeste flate) --th-screen-bg komposert lobby-bakgrunn (glød + grunnflate) --th-text primærtekst (design: --ink) --th-text-dim sekundærtekst (design: --ink-2) --th-text-faint tertiærtekst (design: --ink-3) --th-topbar-bg topplinje-bakgrunn (lobby-topbar + game-bar) --th-topbar-line topplinje-bunnstrek --th-pill chip/knapp-bakgrunn i topplinjen --th-pill-line chip/knapp-kant --th-pill-hover chip/knapp-hover --th-surface kort-flate (lobby-spillkort) --th-line svak kantlinje --th-line-2 tydeligere kantlinje --th-modal popover/meny-flate --th-modal-line popover/meny-kant --th-canvas-bg solid hex for Pixi-canvas + #web-game-container ════════════════════════════════════════════════════════════════════════ */ /* ── Rolige (flate mellomtoner) ──────────────────────────────────────── */ [data-theme="royk"] { --th-bg: #45413b; --th-glow: rgba(255, 247, 232, 0.10); --th-noise: 0.06; --th-page-bg: #413c36; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(255, 247, 232, 0.10), transparent 58%), #45413b; --th-text: #f4f1ea; --th-text-dim: #cdc6b9; --th-text-faint: #9d968a; --th-topbar-bg: #4b463f; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.07); --th-pill-line: rgba(255, 255, 255, 0.16); --th-pill-hover: rgba(255, 255, 255, 0.13); --th-surface: #524d46; --th-line: rgba(255, 255, 255, 0.13); --th-line-2: rgba(255, 255, 255, 0.22); --th-modal: #4b463f; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #413c36; } [data-theme="sand"] { --th-bg: #4a342f; --th-glow: rgba(255, 228, 210, 0.10); --th-noise: 0.06; --th-page-bg: #45302b; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(255, 228, 210, 0.10), transparent 58%), #4a342f; --th-text: #f6efe9; --th-text-dim: #d9c3ba; --th-text-faint: #ab8f86; --th-topbar-bg: #4f3832; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.07); --th-pill-line: rgba(255, 255, 255, 0.16); --th-pill-hover: rgba(255, 255, 255, 0.13); --th-surface: #573d37; --th-line: rgba(255, 255, 255, 0.13); --th-line-2: rgba(255, 255, 255, 0.22); --th-modal: #4f3832; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #45302b; } [data-theme="skifer"] { --th-bg: #36414f; --th-glow: rgba(210, 232, 255, 0.10); --th-noise: 0.055; --th-page-bg: #313b48; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(210, 232, 255, 0.10), transparent 58%), #36414f; --th-text: #f0f3f7; --th-text-dim: #c2ccd9; --th-text-faint: #909cab; --th-topbar-bg: #3a4553; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.07); --th-pill-line: rgba(255, 255, 255, 0.16); --th-pill-hover: rgba(255, 255, 255, 0.13); --th-surface: #404c5b; --th-line: rgba(255, 255, 255, 0.13); --th-line-2: rgba(255, 255, 255, 0.22); --th-modal: #3a4553; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #313b48; } [data-theme="filt"] { --th-bg: #2f6147; --th-glow: rgba(150, 232, 182, 0.18); --th-noise: 0.07; --th-page-bg: #1d4029; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(150, 232, 182, 0.18), transparent 58%), #2f6147; --th-text: #f2f7f2; --th-text-dim: #bcd2c3; --th-text-faint: #8fa898; --th-topbar-bg: #27543c; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.07); --th-pill-line: rgba(255, 255, 255, 0.17); --th-pill-hover: rgba(255, 255, 255, 0.13); --th-surface: #27543c; --th-line: rgba(255, 255, 255, 0.15); --th-line-2: rgba(255, 255, 255, 0.26); --th-modal: #27543c; --th-modal-line: rgba(255, 255, 255, 0.15); --th-canvas-bg: #1d4029; } /* ── Med liv (to-tone gradient + mettede aksenter) ───────────────────── */ [data-theme="natt"] { --th-bg: linear-gradient(150deg, #235a64, #163f4c); --th-glow: rgba(90, 232, 220, 0.16); --th-noise: 0.06; --th-page-bg: #163e46; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(90, 232, 220, 0.16), transparent 58%), linear-gradient(150deg, #235a64, #163f4c); --th-text: #eef9f8; --th-text-dim: #aed3d2; --th-text-faint: #7fa6a6; --th-topbar-bg: #1b4951; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.08); --th-pill-line: rgba(255, 255, 255, 0.17); --th-pill-hover: rgba(255, 255, 255, 0.14); --th-surface: #1f5159; --th-line: rgba(255, 255, 255, 0.14); --th-line-2: rgba(255, 255, 255, 0.24); --th-modal: #1b4951; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #163e46; } [data-theme="plomme"] { --th-bg: linear-gradient(150deg, #4a2f56, #382144); --th-glow: rgba(232, 120, 210, 0.16); --th-noise: 0.06; --th-page-bg: #3c2549; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(232, 120, 210, 0.16), transparent 58%), linear-gradient(150deg, #4a2f56, #382144); --th-text: #f6eefa; --th-text-dim: #d6c4e2; --th-text-faint: #a48fb5; --th-topbar-bg: #472d56; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.08); --th-pill-line: rgba(255, 255, 255, 0.17); --th-pill-hover: rgba(255, 255, 255, 0.14); --th-surface: #503460; --th-line: rgba(255, 255, 255, 0.14); --th-line-2: rgba(255, 255, 255, 0.24); --th-modal: #472d56; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #3c2549; } [data-theme="skumring"] { --th-bg: linear-gradient(150deg, #5a2d3c, #43222f); --th-glow: rgba(255, 168, 120, 0.15); --th-noise: 0.06; --th-page-bg: #482533; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(255, 168, 120, 0.15), transparent 58%), linear-gradient(150deg, #5a2d3c, #43222f); --th-text: #f9eef0; --th-text-dim: #e0c2c8; --th-text-faint: #b58e97; --th-topbar-bg: #552c3a; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.08); --th-pill-line: rgba(255, 255, 255, 0.17); --th-pill-hover: rgba(255, 255, 255, 0.14); --th-surface: #5e3140; --th-line: rgba(255, 255, 255, 0.14); --th-line-2: rgba(255, 255, 255, 0.24); --th-modal: #552c3a; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #482533; } [data-theme="rubin"] { --th-bg: linear-gradient(150deg, #7a2832, #4e1a22); --th-glow: rgba(255, 118, 108, 0.17); --th-noise: 0.06; --th-page-bg: #561822; --th-screen-bg: radial-gradient(135% 95% at 50% -20%, rgba(255, 118, 108, 0.17), transparent 58%), linear-gradient(150deg, #7a2832, #4e1a22); --th-text: #fbeeee; --th-text-dim: #e6c3c4; --th-text-faint: #bd9094; --th-topbar-bg: #641f29; --th-topbar-line: rgba(255, 255, 255, 0.12); --th-pill: rgba(255, 255, 255, 0.08); --th-pill-line: rgba(255, 255, 255, 0.17); --th-pill-hover: rgba(255, 255, 255, 0.14); --th-surface: #6e2630; --th-line: rgba(255, 255, 255, 0.14); --th-line-2: rgba(255, 255, 255, 0.24); --th-modal: #641f29; --th-modal-line: rgba(255, 255, 255, 0.14); --th-canvas-bg: #561822; } /* ── Grain-tekstur (kun når et tema er aktivt) ─────────────────────────── Subtil fractal-noise som bryter opp speilflaten på terminal-glass. Ligger over lobby-bakgrunnen men under innholdet (.lobby-main og .lobby-footer løftes til z-index:1; .lobby-topbar er allerede position:relative og kommer senere i DOM-rekkefølgen). */ [data-theme] .lobby-screen::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--th-noise, 0.06); background-image: url('data:image/svg+xml;utf8,'); } [data-theme] .lobby-main, [data-theme] .lobby-footer { position: relative; z-index: 1; } /* ── Tema-dropdown (theme.js rendrer markup inn i .theme-dd) ─────────── */ .theme-dd { position: relative; flex-shrink: 0; } .theme-dd[hidden] { display: none; } .theme-dd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border: 1px solid var(--th-pill-line, rgba(247, 238, 221, 0.14)); border-radius: 999px; background: var(--th-pill, rgba(0, 0, 0, 0.28)); color: var(--th-text, #f7eedd); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .theme-dd-btn:hover { background: var(--th-pill-hover, rgba(0, 0, 0, 0.42)); } .theme-dd-btn:focus-visible { outline: 2px solid rgba(70, 213, 134, 0.6); outline-offset: 2px; } /* 2×2 mini-swatch i knappen (de fire rolige temaene, per design) */ .theme-dd-mini { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; border: 1px solid var(--th-line-2, rgba(247, 238, 221, 0.25)); flex-shrink: 0; } .theme-dd-mini span:nth-child(1) { background: #45413b; } .theme-dd-mini span:nth-child(2) { background: #4a342f; } .theme-dd-mini span:nth-child(3) { background: #36414f; } .theme-dd-mini span:nth-child(4) { background: #2f6147; } .theme-dd-chev { display: flex; align-items: center; flex-shrink: 0; } .theme-dd-chev svg { width: 13px; height: 13px; stroke: currentColor; transition: transform 0.18s; } .theme-dd--open .theme-dd-chev svg { transform: rotate(180deg); } /* Meny: body-mounted + position:fixed (theme.js) -- unngar bade .lobby-back-bar { overflow:hidden } og at headerens stacking context legger popoveren bak #web-game-container. */ .theme-dd-menu { position: fixed; top: 0; left: 0; width: min(316px, calc(100vw - 24px)); background: var(--th-modal, #3a0e11); border: 1px solid var(--th-modal-line, rgba(247, 238, 221, 0.18)); border-radius: 16px; padding: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.04); z-index: 6000; max-height: min(70vh, 520px); overflow-y: auto; } .theme-dd-menu[hidden] { display: none; } .theme-dd-menu-head { padding: 4px 8px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-text-faint, #a8908f); } .theme-dd-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px; border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer; font-family: inherit; color: var(--th-text, #f7eedd); } .theme-dd-opt:hover { background: rgba(255, 255, 255, 0.06); } .theme-dd-opt:focus-visible { outline: 2px solid rgba(70, 213, 134, 0.6); outline-offset: -2px; } .theme-dd-opt[aria-checked="true"] { border-color: var(--th-line-2, rgba(247, 238, 221, 0.22)); background: rgba(255, 255, 255, 0.05); } /* 42px tema-swatch med aksent-dott (per design) */ .theme-dd-opt-swatch { position: relative; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.2); } .theme-dd-opt-swatch::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--dot, #d4b071); } .theme-dd-opt-text { flex: 1; min-width: 0; } .theme-dd-opt-name { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--th-text, #f7eedd); } .theme-dd-opt-desc { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--th-text-dim, rgba(247, 238, 221, 0.65)); } .theme-dd-opt-check { display: none; flex-shrink: 0; } .theme-dd-opt[aria-checked="true"] .theme-dd-opt-check { display: flex; } .theme-dd-opt-check svg { stroke: #46d586; } /* Smale flater: slipp tekst-etiketten, behold swatch-ikonet */ @media (max-width: 1100px) { .theme-dd-btn .theme-dd-label { display: none; } .theme-dd-btn { padding: 0 10px; } }