/* Poker Club — the ONE shared theme (chess, poker, the /pc index). docs/pc/theme.md. * * Every PC surface reads its colours, glass and motion from these custom properties. No component hard-codes a * colour: a reskin (e.g. a new reference image) is an edit here, or a new [data-pc-theme="…"] block, never a rebuild. * * Swappable: * palette + board/table textures (default) * chess piece set (read by chess.js from --pc-piece-base) * motion toggle (PC settings); prefers-reduced-motion does the same * * Served from the deployed build's public snapshot (rule 91), path /pc/theme/pc-theme.css. */ :root, [data-pc-theme="cosmic"] { /* palette (brief tokens: bg #05060A, gold #C9A24A, blue #3EA6FF, chrome #C8CED8) */ --pc-bg: #05060a; --pc-panel: #0b0d14; --pc-line: rgba(200, 206, 216, .12); --pc-line-2: rgba(200, 206, 216, .22); --pc-gold: #c9a24a; --pc-gold-hi: #e3c27a; --pc-gold-glow: rgba(227, 194, 122, .55); --pc-blue: #3ea6ff; --pc-blue-hi: #8fcbff; --pc-blue-glow: rgba(62, 166, 255, .55); --pc-chrome: #c8ced8; --pc-text: #eef1f6; --pc-dim: #9aa3b2; --pc-mute: #6c7484; --pc-ok: #5fd39a; --pc-warn: #ffb347; --pc-danger: #ff5d6c; --pc-on-accent: #05060a; /* RGB triplets: translucent colours are rgba(var(--pc-*-rgb), α) — the α is local, the colour never is */ --pc-gold-rgb: 201, 162, 74; --pc-blue-rgb: 62, 166, 255; --pc-chrome-rgb: 200, 206, 216; --pc-bg-rgb: 5, 6, 10; --pc-panel-rgb: 11, 13, 20; --pc-ink-rgb: 0, 0, 0; --pc-white-rgb: 255, 255, 255; --pc-white: #fff; /* poker table (PC poker skin — public/pc/poker/pc-poker-skin.css; art: scripts/operator/pc-poker-generate-art.ts — felt; since the 2026-10-22 redesign card-back + chips come from scripts/assets/poker-table-art.mjs, the 2D table from poker-table-2d.mjs) */ --pc-felt-image: url('/pc/poker/felt.webp'); --pc-rail-image: url('/pc/poker/rail.webp'); --pc-card-back-image: url('/pc/poker/card-back.webp'); --pc-felt-edge-seat: var(--pc-gold); /* neon line where the felt meets the rail — toward the seats */ --pc-felt-edge-seat-glow: var(--pc-gold-glow); --pc-felt-edge-pot: rgba(62, 166, 255, .26); /* inner glow toward the pot / board centre */ --pc-card-face: #f3f5f9; --pc-card-ink: #0b0d14; --pc-card-red: #d42a3c; --pc-suit4-d: #1f6fe0; /* 4-colour deck: diamonds blue */ --pc-suit4-c: #12894a; /* 4-colour deck: clubs green */ --pc-chip-1-image: url('/pc/poker/chip-1.webp'); --pc-chip-1-rim: var(--pc-chrome); --pc-chip-2-image: url('/pc/poker/chip-2.webp'); --pc-chip-2-rim: var(--pc-blue); --pc-chip-3-image: url('/pc/poker/chip-3.webp'); --pc-chip-3-rim: var(--pc-gold-hi); --pc-chip-4-image: url('/pc/poker/chip-4.webp'); --pc-chip-4-rim: var(--pc-gold); --pc-chip-5-image: url('/pc/poker/chip-5.webp'); --pc-chip-5-rim: var(--pc-blue-hi); --pc-chip-6-image: url('/pc/poker/chip-6.webp'); --pc-chip-6-rim: var(--pc-white); /* table redesign (2026-10-22, scripts/assets/poker-table-art.mjs): denomination = the chip's glowing rim colour */ --pc-gold-pale: #fff3c4; --pc-gold-deep: #9c7426; /* polished gold: the hot spot / the shadow side */ --pc-engrave: rgba(70, 45, 10, .85); /* engraving cut into gold (dealer coin) */ --pc-chrome-hi: #f2f5fa; --pc-chrome-mid: #6a7383; --pc-chrome-lo: #4a5261; /* the chrome edge of the seat pods */ --pc-table-under: #0a1230; /* behind the 2D table image until it loads */ --pc-chip-1-glow: #dfe6f0; --pc-chip-2-glow: #3ea6ff; --pc-chip-3-glow: #3fe0c5; --pc-chip-4-glow: #e3c27a; --pc-chip-5-glow: #b07cff; --pc-chip-6-glow: #ff5d6c; --pc-etch-gold-image: url('/pc/poker/etch-gold.webp'); /* the surface's etched line work, gold layer (2048×976) */ --pc-etch-blue-image: url('/pc/poker/etch-blue.webp'); /* … electric-blue layer (glows, pulses) */ /* the 2D table: rendered top-down from the 3D scene (docs/pc/poker-skin.md § 2D table image) */ --pc-table-2d-image: url('/pc/poker/table-2d-2x.webp'); /* 1800 px wide */ --pc-table-2d-image-hi: url('/pc/poker/table-2d-3x.webp'); /* 2700 px wide: large or dense screens (skin media query) */ --pc-table-2d-portrait-image: url('/pc/poker/table-2d-portrait.webp'); /* phones upright: the render turned 90° */ --pc-display: 'Tektur', 'Helvetica Neue', sans-serif; --pc-body: 'Bai Jamjuree', 'Exo 2', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; --pc-mono: 'Tektur', ui-monospace, 'SF Mono', Menlo, monospace; /* poker table sky (round 3, 2026-10-22): deep navy base, a soft nebula glow behind the table, two star layers (scripts/assets/poker-starfield.mjs) — dense small stars + a few bright ones. Quieter than the felt. */ --pc-sky-base: #081029; --pc-sky-glow-1: rgba(70, 96, 210, .30); --pc-sky-glow-2: rgba(150, 70, 190, .16); --pc-sky-edge: rgba(2, 4, 12, .72); --pc-stars-dense-image: url('/pc/poker/stars-dense.webp'); --pc-stars-bright-image: url('/pc/poker/stars-bright.webp'); --pc-stars-size: 1024px 1024px; /* space backdrop (starfield + nebula). The image is optional; the gradients alone are a complete fallback. */ --pc-space-image: url('/pc/theme/nebula-tile.webp'); --pc-space-size: 768px 768px; --pc-space-fallback: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 68% 42%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.5px 1.5px at 36% 77%, rgba(200,220,255,.7), transparent 60%), radial-gradient(1px 1px at 88% 83%, rgba(255,240,210,.6), transparent 60%), radial-gradient(60% 50% at 25% 30%, rgba(62,166,255,.16), transparent 70%), radial-gradient(55% 45% at 75% 70%, rgba(201,162,74,.14), transparent 70%), #05060a; /* glass (amendment 2026-10-19) */ /* values = the /pc glass pass (feature/poker-club 97103f2af), adopted here so index, poker and chess share ONE look */ --pc-glass-blur: 18px; --pc-glass-saturate: 160%; --pc-glass-fill: rgba(12, 14, 21, .5); --pc-glass-fill-solid: rgba(12, 14, 21, .94); /* no backdrop-filter → solid, higher alpha (text contrast) */ --pc-glass-border-w: 1px; --pc-glass-border-gold: rgba(201, 162, 74, .24); --pc-glass-border-blue: rgba(62, 166, 255, .24); --pc-glass-border-neutral: rgba(200, 206, 216, .18); --pc-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .015); --pc-glass-shadow: 0 10px 30px rgba(0, 0, 0, .45); --pc-glass-radius: 14px; /* phones (≤ 640 px): a lighter frost — the /pc glass pass's mobile value, now a token */ --pc-glass-blur-mobile: 10px; --pc-glass-saturate-mobile: 140%; /* chess board: deep-space squares, neon grid drawn in SVG (never baked into an image). The split belongs to each SIDE's half: White's ranks 1–4 glow blue, Black's ranks 5–8 glow gold, whichever way the board is flipped. */ --pc-board-image: var(--pc-space-image); --pc-board-image-size: 100% 100%; --pc-board-fallback: var(--pc-space-fallback); --pc-board-bezel-image: url('/pc/theme/bezel-strip.webp'); /* 3D board (pc-chess-3d.js): Gemini textures, prompts in docs/pc/chess-board-art-PROMPTS.md */ --pc-board3d-dark-image: url('/pc/chess/board3d/dark.webp'); /* deep-nebula glass: the dark squares */ --pc-board3d-light-image: url('/pc/chess/board3d/light.webp'); /* smoky starfield glass: the light squares */ --pc-board3d-slab-image: url('/pc/chess/board3d/slab.webp'); /* polished obsidian slab top */ --pc-board-bezel-fallback: linear-gradient(145deg, #1a1d26 0%, #07080c 45%, #12141b 100%); --pc-board-bezel-w: clamp(8px, 2.2vmin, 18px); --pc-board-bezel-gloss: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%); --pc-grid-white: var(--pc-blue); --pc-grid-white-glow: var(--pc-blue-glow); --pc-grid-black: var(--pc-gold); --pc-grid-black-glow: var(--pc-gold-glow); --pc-grid-width: 1.25px; --pc-grid-glow-r: 3px; --pc-sq-tint-light: rgba(255, 255, 255, .025); /* near-invisible: no checkered fill */ --pc-sq-tint-dark: rgba(0, 0, 0, 0); --pc-coord: rgba(200, 206, 216, .55); --pc-hl-last: rgba(143, 203, 255, .22); --pc-hl-trail: var(--pc-blue-hi); --pc-hl-select: rgba(227, 194, 122, .35); --pc-hl-dest: rgba(227, 194, 122, .75); --pc-hl-premove: rgba(255, 93, 108, .35); --pc-hl-check: rgba(255, 93, 108, .85); --pc-piece-base: '/pc/chess/pieces/generated/'; /* generated set (operator 2026-10-19); Monge spatial/celtic = fallback */ --pc-piece-ext: '.webp'; --pc-piece-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); /* Per-piece filter, per set. The generated set has its shadow, Black's gold rim + glow and Black's brightness (×2 — contrast ≥ 3:1 on the dark squares) BAKED into the sprites (scripts/operator/pc-chess-generate-art.ts bake()), so the board applies NO filter to its 32 animated layers (measured: filters took a 40-ply game from median 16.7 ms to 66.7 ms per frame at 4× CPU). The SVG fallback sets keep a CSS drop shadow. */ --pc-piece-filter-w: none; --pc-piece-filter-b: none; /* clocks */ --pc-clock-low: var(--pc-danger); --pc-clock-active: var(--pc-text); --pc-clock-idle: var(--pc-mute); /* motion (150–400 ms, transform + opacity only) */ --pc-dur-fast: 150ms; --pc-dur: 240ms; --pc-dur-slow: 400ms; --pc-ease: cubic-bezier(.2, .7, .2, 1); --pc-drift-dur: 180s; /* the drift moves ~14 px over 180 s, i.e. sub-pixel per frame: stepping it once a second looks the same and lets every glass panel re-blur its backdrop 1×/s instead of 60×/s (measured: the remaining long frames at 4× CPU). */ --pc-drift-steps: 180; } /* chess piece sets — a token swap, nothing else */ [data-pc-pieces="generated"] { --pc-piece-base: '/pc/chess/pieces/generated/'; --pc-piece-ext: '.webp'; } [data-pc-pieces="spatial"] { --pc-piece-base: '/pc/chess/pieces/spatial/'; --pc-piece-ext: '.svg'; --pc-piece-filter-w: var(--pc-piece-shadow); --pc-piece-filter-b: var(--pc-piece-shadow); } [data-pc-pieces="celtic"] { --pc-piece-base: '/pc/chess/pieces/celtic/'; --pc-piece-ext: '.svg'; --pc-piece-filter-w: var(--pc-piece-shadow); --pc-piece-filter-b: var(--pc-piece-shadow); } /* motion off: manual toggle OR the OS setting. Transitions become instant fades; ambient drift stops. */ [data-pc-motion="off"] { --pc-dur-fast: 0ms; --pc-dur: 0ms; --pc-dur-slow: 120ms; --pc-drift-dur: 0s; } @media (prefers-reduced-motion: reduce) { :root:not([data-pc-motion="on"]) { --pc-dur-fast: 0ms; --pc-dur: 0ms; --pc-dur-slow: 120ms; --pc-drift-dur: 0s; } } /* ── shared primitives ─────────────────────────────────────────────────────────────────────── */ .pc-glass { background: var(--pc-glass-fill-solid); border: var(--pc-glass-border-w) solid var(--pc-glass-border-neutral); border-radius: var(--pc-glass-radius); box-shadow: var(--pc-glass-highlight), var(--pc-glass-shadow); } .pc-glass.is-gold { border-color: var(--pc-glass-border-gold); } .pc-glass.is-blue { border-color: var(--pc-glass-border-blue); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pc-glass { background: var(--pc-glass-fill); -webkit-backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturate)); backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturate)); } } /* Solid glass during play — operator fallback, OFF by default (PC_SWITCHES.glassDuringPlay in src/views/pc/pcSettings.ts renders data-pc-glass-play on ). Inside a live board / table (.pc-in-play) every frosted panel becomes the solid fill: no backdrop-filter while a game runs. Outside play the glass is unchanged. */ [data-pc-glass-play="solid"] .pc-in-play .pc-glass, [data-pc-glass-play="solid"] .pc-in-play.pc-glass { background: var(--pc-glass-fill-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }