/* ============================================================ sumglyph — the casino felt. GENERATED by tools/gen-worlds.py; edit the spec there, not this file. Tokens for both themes, then the game's own --su- tokens re-pointed at them. Shared scaffolding (card, board, cells, buttons, readouts) is in lib/gv-world.css and reads these same tokens. ============================================================ */ :root body.gv-world{ --w-font: 'Righteous', 'Outfit', system-ui, sans-serif; --w-radius: 20px; --w-bg-0: #061a10; --w-bg-1: #0a2617; --w-bg-2: #0e3320; --w-bg-3: #144129; --w-edge-hi: rgba(255,255,255,.08); --w-edge-lo: rgba(0,0,0,.55); --w-ink: #f6f1dc; --w-dim: #a3c2ac; --w-accent: #e9b949; --w-accent-hi: #ffe6a0; --w-accent-lo: #9c7a1c; --w-accent-ink: #1a1200; --w-accent-text: #f2c65e; --w-fill-tint: #ffffff; --w-good: #52e29a; --w-good-text: #52e29a; --w-bad: #ff5c5c; --w-bad-text: #ff8a8a; --w-warn: #e9b949; --w-warn-text: #e9b949; --w-blue: #5fb8ff; --w-violet: #b48cff; --w-line: rgba(233,185,73,.30); --w-line-soft: rgba(233,185,73,.13); --w-glow: rgba(233,185,73,.45); --w-glow-soft: rgba(233,185,73,.13); --w-drop: rgba(0,0,0,.55); --w-glow-scale: 1; --w-cell: #f6f1dc; --w-cell-hi: #ffffff; --w-cell-lo: #d9d2b4; --w-cell-br: #b8ae86; --w-cell-ink: #1a1200; --w-hole: rgba(0,0,0,.45); --w-texture: radial-gradient(rgba(255,255,255,.04) 0.6px, transparent 1px) 0 0 / 5px 5px, radial-gradient(rgba(255,255,255,.04) 0.6px, transparent 1px) 2px 3px / 5px 5px; --w-fill-a: #ffe6a0; --w-fill-b: #e9b949; } :root[data-theme="light"] body.gv-world{ --w-bg-0: #d3e8d8; --w-bg-1: #e3f1e6; --w-bg-2: #eff7f1; --w-bg-3: #ffffff; --w-edge-hi: rgba(255,255,255,.9); --w-edge-lo: rgba(20,16,8,.14); --w-ink: #0a2617; --w-dim: #3f6b4d; --w-accent: #b8861a; --w-accent-hi: #f2d38a; --w-accent-lo: #7a5008; --w-accent-ink: #1a1200; --w-accent-text: #7a5008; --w-fill-tint: #0b0f14; --w-good: #1a9d54; --w-good-text: #0f6b3a; --w-bad: #c8402e; --w-bad-text: #a3301f; --w-warn: #c98a10; --w-warn-text: #7a5008; --w-blue: #1b74c8; --w-violet: #7233c9; --w-line: rgba(184,134,26,.36); --w-line-soft: rgba(184,134,26,.16); --w-glow: rgba(184,134,26,.3); --w-glow-soft: rgba(184,134,26,.12); --w-drop: rgba(20,16,8,.16); --w-glow-scale: 0.5; --w-cell: #ffffff; --w-cell-hi: #ffffff; --w-cell-lo: #e6efe8; --w-cell-br: #a6c4ae; --w-cell-ink: #0a2617; --w-hole: rgba(10,38,23,.07); --w-texture: radial-gradient(rgba(10,38,23,.05) 0.6px, transparent 1px) 0 0 / 5px 5px, radial-gradient(rgba(10,38,23,.05) 0.6px, transparent 1px) 2px 3px / 5px 5px; --w-fill-a: #f2d38a; --w-fill-b: #b8861a; } /* ---- the game's own roles, in this world ---- */ :root body.gv-world{ --sg-board-bgA: var(--w-bg-2); --sg-board-bgB: var(--w-bg-1); --sg-tile-bg: var(--w-cell); --sg-tile-br: var(--w-cell-br); --sg-tile-br2: color-mix(in srgb, var(--w-accent) 45%, transparent); --sg-glowA: color-mix(in srgb, var(--w-accent) 34%, transparent); --sg-glowB: color-mix(in srgb, var(--w-violet) 30%, transparent); --sg-thread-light: color-mix(in srgb, var(--w-accent) 55%, var(--w-fill-tint)); --sg-selA: color-mix(in srgb, var(--w-accent) 30%, transparent); --sg-selB: color-mix(in srgb, var(--w-violet) 24%, transparent); } :root[data-theme="light"] body.gv-world{ --sg-board-bgA: var(--w-bg-2); --sg-board-bgB: var(--w-bg-1); --sg-tile-bg: var(--w-cell); --sg-tile-br: var(--w-cell-br); --sg-tile-br2: color-mix(in srgb, var(--w-accent) 45%, transparent); --sg-glowA: color-mix(in srgb, var(--w-accent) 28%, transparent); --sg-glowB: color-mix(in srgb, var(--w-violet) 24%, transparent); --sg-thread-light: color-mix(in srgb, var(--w-accent) 55%, var(--w-fill-tint)); --sg-selA: color-mix(in srgb, var(--w-accent) 26%, transparent); --sg-selB: color-mix(in srgb, var(--w-violet) 20%, transparent); } /* ---- the casino felt ---- */ :root body.gv-world .gvArcCell{ border-radius: 50%; } /* ---- carried over from the game's earlier skin, re-pointed ---- */ /* You drag a chain of tiles toward a target; the running total and the thread between tiles are what the eye actually tracks. */ :root body.gv-world .sgTile{ font-weight: 900; color: var(--w-ink); transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .2s ease; } :root body.gv-world .sgTile.sel{ box-shadow: 0 0 0 2px var(--w-accent) inset, 0 0 18px color-mix(in srgb, var(--w-accent) calc(50% * var(--w-glow-scale)), transparent); } :root body.gv-world .sgTile.sel.ok{ box-shadow: 0 0 0 2px var(--w-good) inset, 0 0 20px color-mix(in srgb, var(--w-good) calc(55% * var(--w-glow-scale)), transparent); } :root body.gv-world .sgTile.pop{ animation: sgPop .34s cubic-bezier(.34,1.56,.64,1); } @keyframes sgPop{ 0%{transform:scale(1)} 35%{transform:scale(1.18);filter:brightness(1.6)} 100%{transform:scale(1)} } :root body.gv-world .sgPill{ background: color-mix(in srgb, var(--w-ink) 5%, transparent); border: 1px solid var(--w-line); color: var(--w-ink); font-weight: 800; } :root body.gv-world .sgTarget{ border-color: color-mix(in srgb, var(--w-accent) 55%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--w-accent) calc(26% * var(--w-glow-scale)), transparent); } :root body.gv-world .sgSum.ok{ border-color: color-mix(in srgb, var(--w-good) 62%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--w-good) calc(40% * var(--w-glow-scale)), transparent); } :root body.gv-world .sgSum.over{ border-color: color-mix(in srgb, var(--w-bad) 62%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--w-bad) calc(40% * var(--w-glow-scale)), transparent); } /* --sg-warn is rgba(255,90,120,.95): a pink-red that reads fine on the dark board and measures 3.01:1 on the light one, which is where the message it carries is "Puzzle unavailable" — the text you most need to be able to read. The generator was right to leave it alone (its role name says "warn" but its value is red-family, so the hue guard skipped it); it just needs to follow the theme. --nx-red is #ff5a72 on dark, near-identical to the original, and #c62033 on light at 5.79:1. */ :root body.gv-world{ --sg-warn: var(--w-bad-text); } /* the chips are the world's cell colour, so the digit must be the cell ink */ :root body.gv-world .sgTile{ color: var(--w-cell-ink); }