/* ============================================================ loopglyph — the circuit board. GENERATED by tools/gen-worlds.py; edit the spec there, not this file. Tokens for both themes, then the game's own --lo- 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: 'Chakra Petch', 'Outfit', system-ui, sans-serif; --w-radius: 20px; --w-bg-0: #04120c; --w-bg-1: #071c12; --w-bg-2: #0a2617; --w-bg-3: #0e321e; --w-edge-hi: rgba(255,255,255,.08); --w-edge-lo: rgba(0,0,0,.55); --w-ink: #e6fff0; --w-dim: #8fbfa3; --w-accent: #ffb347; --w-accent-hi: #ffd79a; --w-accent-lo: #b86f0a; --w-accent-ink: #1a0f00; --w-accent-text: #ffc36b; --w-fill-tint: #ffffff; --w-good: #5cff9d; --w-good-text: #5cff9d; --w-bad: #ff5c5c; --w-bad-text: #ff8a8a; --w-warn: #ffb347; --w-warn-text: #ffb347; --w-blue: #4fd8ff; --w-violet: #b48cff; --w-line: rgba(201,132,58,.34); --w-line-soft: rgba(201,132,58,.15); --w-glow: rgba(255,179,71,.45); --w-glow-soft: rgba(255,179,71,.14); --w-drop: rgba(0,0,0,.55); --w-glow-scale: 1; --w-cell: #0b2a1a; --w-cell-hi: #124026; --w-cell-lo: #061a10; --w-cell-br: #c9843a; --w-cell-ink: #e6fff0; --w-hole: rgba(0,0,0,.45); --w-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='rgba(201,132,58,.10)' stroke-width='1.5'%3E%3Cpath d='M8 8 h32 v24 h24 v40'/%3E%3Cpath d='M88 16 v24 h-32 v48'/%3E%3Cpath d='M8 56 h20 v32'/%3E%3C/g%3E%3Cg fill='rgba(201,132,58,.10)'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3Ccircle cx='64' cy='72' r='2.5'/%3E%3Ccircle cx='88' cy='16' r='2.5'/%3E%3Ccircle cx='28' cy='88' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 96px; --w-fill-a: #ffd79a; --w-fill-b: #ffb347; } :root[data-theme="light"] body.gv-world{ --w-bg-0: #d6e9dc; --w-bg-1: #e6f3ea; --w-bg-2: #f1f8f3; --w-bg-3: #ffffff; --w-edge-hi: rgba(255,255,255,.9); --w-edge-lo: rgba(20,16,8,.14); --w-ink: #07261a; --w-dim: #3f6b52; --w-accent: #c96f0a; --w-accent-hi: #ffb96b; --w-accent-lo: #8a4a05; --w-accent-ink: #1a0f00; --w-accent-text: #8a4a05; --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(201,111,10,.36); --w-line-soft: rgba(201,111,10,.16); --w-glow: rgba(201,111,10,.3); --w-glow-soft: rgba(201,111,10,.12); --w-drop: rgba(20,16,8,.16); --w-glow-scale: 0.5; --w-cell: #ffffff; --w-cell-hi: #ffffff; --w-cell-lo: #e3efe7; --w-cell-br: #b5875a; --w-cell-ink: #07261a; --w-hole: rgba(7,38,26,.07); --w-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='rgba(120,80,30,.07)' stroke-width='1.5'%3E%3Cpath d='M8 8 h32 v24 h24 v40'/%3E%3Cpath d='M88 16 v24 h-32 v48'/%3E%3Cpath d='M8 56 h20 v32'/%3E%3C/g%3E%3Cg fill='rgba(120,80,30,.07)'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3Ccircle cx='64' cy='72' r='2.5'/%3E%3Ccircle cx='88' cy='16' r='2.5'/%3E%3Ccircle cx='28' cy='88' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 96px; --w-fill-a: #ffb96b; --w-fill-b: #c96f0a; } /* ---- the game's own roles, in this world ---- */ :root body.gv-world{ --lg-cell-bg: var(--w-cell); --lg-cell-br: var(--w-cell-br); --lg-sat-bg: color-mix(in srgb, var(--w-good) 18%, transparent); --lg-sat-br: color-mix(in srgb, var(--w-good) 62%, transparent); --lg-bad-bg: color-mix(in srgb, var(--w-bad) 18%, transparent); --lg-bad-br: color-mix(in srgb, var(--w-bad) 58%, transparent); --lg-line: var(--w-accent); } :root[data-theme="light"] body.gv-world{ --lg-cell-bg: var(--w-cell); --lg-cell-br: var(--w-cell-br); --lg-sat-bg: color-mix(in srgb, var(--w-good) 16%, transparent); --lg-sat-br: color-mix(in srgb, var(--w-good) 62%, transparent); --lg-bad-bg: color-mix(in srgb, var(--w-bad) 16%, transparent); --lg-bad-br: color-mix(in srgb, var(--w-bad) 58%, transparent); --lg-line: var(--w-accent); } /* ---- the circuit board ---- */ :root body.gv-world .gvArcCell{ border-radius: 4px; } /* ---- carried over from the game's earlier skin, re-pointed ---- */ /* The loop IS the game, so the drawn edge is the one thing that should glow. Everything else — vertices, blanks, crosses — stays quiet around it. */ :root body.gv-world .lgEdge.on{ background: var(--w-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--w-accent) calc(85% * var(--w-glow-scale)), transparent), 0 0 22px color-mix(in srgb, var(--w-accent) calc(45% * var(--w-glow-scale)), transparent); border-radius: 2px; } :root body.gv-world .lgEdge.x{ background: color-mix(in srgb, var(--w-bad) 55%, transparent); } /* Satisfied and conflicting cells are RINGED, not washed. A blurred inset glow peaks at the centre of the box — which on a small numbered cell is exactly where the digit sits, so the number it is meant to celebrate became the hardest one on the board to read. The state now reads as a rim plus an outer halo, and the digit is given its own solid colour and full opacity so no fill can dim it. */ :root body.gv-world .lgCell.sat{ color: var(--w-ink); opacity: 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--w-good) 60%, transparent), 0 0 16px color-mix(in srgb, var(--w-good) calc(45% * var(--w-glow-scale)), transparent); } :root body.gv-world .lgCell.bad{ color: var(--w-ink); opacity: 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--w-bad) 60%, transparent), 0 0 14px color-mix(in srgb, var(--w-bad) calc(38% * var(--w-glow-scale)), transparent); } :root body.gv-world .lgCell.bad.flash{ animation: lgBad .4s ease; } @keyframes lgBad{ 0%,100%{filter:none} 45%{filter:brightness(1.6) saturate(1.4)} }