/* ============================================================
   connectglyph — the case board. GENERATED by tools/gen-worlds.py; edit the spec
   there, not this file.

   Tokens for both themes, then the game's own --co-<role> 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: 'Special Elite', 'Outfit', system-ui, sans-serif;
  --w-radius: 20px;
  --w-bg-0: #1a1108;
  --w-bg-1: #2a1c0d;
  --w-bg-2: #3a2813;
  --w-bg-3: #4a341a;
  --w-edge-hi: rgba(255,255,255,.08);
  --w-edge-lo: rgba(0,0,0,.55);
  --w-ink: #f6ecd8;
  --w-dim: #c2ad8a;
  --w-accent: #e0483a;
  --w-accent-hi: #ff9a90;
  --w-accent-lo: #8e2a20;
  --w-accent-ink: #ffffff;
  --w-accent-text: #ff7a6e;
  --w-fill-tint: #ffffff;
  --w-good: #7ddc7a;
  --w-good-text: #8fe58c;
  --w-bad: #e0483a;
  --w-bad-text: #ff8a80;
  --w-warn: #f2c14e;
  --w-warn-text: #f2c14e;
  --w-blue: #6fb3ff;
  --w-violet: #c08bff;
  --w-line: rgba(224,72,58,.30);
  --w-line-soft: rgba(224,72,58,.14);
  --w-glow: rgba(224,72,58,.42);
  --w-glow-soft: rgba(224,72,58,.14);
  --w-drop: rgba(0,0,0,.55);
  --w-glow-scale: 1;
  --w-cell: #fbf3e1;
  --w-cell-hi: #ffffff;
  --w-cell-lo: #e8dcc0;
  --w-cell-br: #d0bf98;
  --w-cell-ink: #241a0c;
  --w-hole: rgba(0,0,0,.4);
  --w-texture: radial-gradient(rgba(0,0,0,.28) 1px, transparent 1.6px) 0 0 / 14px 14px;
  --w-fill-a: #8e2a20;
  --w-fill-b: #8e2a20;
}

:root[data-theme="light"] body.gv-world{
  --w-bg-0: #e4d2b2;
  --w-bg-1: #eedfc4;
  --w-bg-2: #f4e9d3;
  --w-bg-3: #faf2e2;
  --w-edge-hi: rgba(255,255,255,.9);
  --w-edge-lo: rgba(20,16,8,.14);
  --w-ink: #2a1c0d;
  --w-dim: #5a4628;
  --w-accent: #c8402e;
  --w-accent-hi: #f4a79b;
  --w-accent-lo: #8e2a20;
  --w-accent-ink: #ffffff;
  --w-accent-text: #8e2a20;
  --w-fill-tint: #0b0f14;
  --w-good: #1a9d54;
  --w-good-text: #0f5f34;
  --w-bad: #c8402e;
  --w-bad-text: #8e2a20;
  --w-warn: #c98a10;
  --w-warn-text: #6b4606;
  --w-blue: #2a63d8;
  --w-violet: #7233c9;
  --w-line: rgba(200,64,46,.34);
  --w-line-soft: rgba(200,64,46,.15);
  --w-glow: rgba(200,64,46,.3);
  --w-glow-soft: rgba(200,64,46,.12);
  --w-drop: rgba(20,16,8,.16);
  --w-glow-scale: 0.5;
  --w-cell: #fffdf7;
  --w-cell-hi: #ffffff;
  --w-cell-lo: #efe6d2;
  --w-cell-br: #c9b48f;
  --w-cell-ink: #2a1c0d;
  --w-hole: rgba(80,50,10,.08);
  --w-texture: radial-gradient(rgba(80,50,10,.16) 1px, transparent 1.6px) 0 0 / 14px 14px;
  --w-fill-a: #c8402e;
  --w-fill-b: #8e2a20;
}

/* ---- the game's own roles, in this world ---- */
:root body.gv-world{
  --cg-g-bg: color-mix(in srgb, var(--w-good) 20%, transparent);
  --cg-g-br: color-mix(in srgb, var(--w-good) 62%, transparent);
  --cg-b-bg: color-mix(in srgb, var(--w-blue) 20%, transparent);
  --cg-b-br: color-mix(in srgb, var(--w-blue) 62%, transparent);
  --cg-p-bg: color-mix(in srgb, var(--w-violet) 20%, transparent);
  --cg-p-br: color-mix(in srgb, var(--w-violet) 62%, transparent);
  --cgHelpBg: color-mix(in srgb, var(--w-ink) 4%, transparent);
}
:root[data-theme="light"] body.gv-world{
  --cg-g-bg: color-mix(in srgb, var(--w-good) 18%, transparent);
  --cg-g-br: color-mix(in srgb, var(--w-good) 62%, transparent);
  --cg-b-bg: color-mix(in srgb, var(--w-blue) 18%, transparent);
  --cg-b-br: color-mix(in srgb, var(--w-blue) 62%, transparent);
  --cg-p-bg: color-mix(in srgb, var(--w-violet) 18%, transparent);
  --cg-p-br: color-mix(in srgb, var(--w-violet) 62%, transparent);
  --cgHelpBg: color-mix(in srgb, var(--w-ink) 4%, transparent);
}

/* ---- the case board ---- */
/* Index cards: slightly askew, pinned. */
:root body.gv-world .gvArcCell{ border-radius: 4px; box-shadow: 0 3px 8px var(--w-drop); }
:root body.gv-world .gvArcCell:nth-child(3n){ transform: rotate(-.6deg); }
:root body.gv-world .gvArcCell:nth-child(3n+1){ transform: rotate(.5deg); }
:root body.gv-world .gvArcCell:active:not([disabled]){ transform: scale(.94); }

/* ---- carried over from the game's earlier skin, re-pointed ---- */
/* Four groups, four colours. A locked group should read as banked so the
   board visibly shrinks as you solve it. */
:root body.gv-world .cgTile{
  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 .cgTile.sel{
  box-shadow:
    0 0 0 2px var(--w-accent) inset,
    0 0 16px color-mix(in srgb, var(--w-accent) calc(45% * var(--w-glow-scale)), transparent);
}
:root body.gv-world .cgTile.locked{ opacity: .55; }
:root body.gv-world .cgSolvedBar{
  animation: cgLock .5s cubic-bezier(.34,1.56,.64,1);
  font-weight: 900;
}
:root body.gv-world .cgSolvedBar.g{ box-shadow: 0 0 18px color-mix(in srgb, var(--w-good) calc(38% * var(--w-glow-scale)), transparent); }
:root body.gv-world .cgSolvedBar.y{ box-shadow: 0 0 18px color-mix(in srgb, var(--w-warn) calc(38% * var(--w-glow-scale)), transparent); }
:root body.gv-world .cgSolvedBar.b{ box-shadow: 0 0 18px color-mix(in srgb, var(--w-blue) calc(38% * var(--w-glow-scale)), transparent); }
:root body.gv-world .cgSolvedBar.p{ box-shadow: 0 0 18px color-mix(in srgb, var(--w-violet) calc(38% * var(--w-glow-scale)), transparent); }
@keyframes cgLock{ 0%{transform:scale(.92);opacity:.35} 60%{transform:scale(1.03)} 100%{transform:scale(1);opacity:1} }
:root body.gv-world .cgGrid.shake{ animation: cgShake .4s ease; }
@keyframes cgShake{ 0%,100%{transform:none} 25%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }
:root body.gv-world .cgBtn{
  border: 1px solid var(--w-line);
  color: var(--w-ink);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
:root body.gv-world .cgBtn:active{ transform: scale(.94); }