/* Codebreaker in the toy box (games/static/games/brainteasers/, loaded
   before this; docs/adr/0042): its accent, the peg board's slate plastic,
   the pegs' colors and how the board is drawn. Units: one hole is 1. */
:root {
  --accent: #0d6a70;         /* the one filled button: 6.4:1 with white */
  --accent-ink: #ffffff;
  /* the peg board: slate plastic, its holes a shade darker, the shield over the code */
  --board: #2a3342;
  --board-edge: #1b222d;
  --board-hole: #131820;
  --board-ink: #96a2b4;      /* row numbers on the board: 4.9:1 on it */
  --shield-ink: #aab5c4;     /* CODE on the shield: 4.6:1 on it */
  --shield: #3b4658;
  /* the key pegs: red for the right hole, white for a right color elsewhere */
  --key-exact: #e5383b;
  --key-near: #f4f6f8;
  /* the code pegs, as the keys 1–8 name them */
  --peg-0: #e23a3a;
  --peg-1: #f28a1e;
  --peg-2: #f5cb1c;
  --peg-3: #2fa35a;
  --peg-4: #2f7fe0;
  --peg-5: #9150d6;
  --peg-6: #f26bb0;
  --peg-7: #27b5b0;
  --peg-mark: rgba(10, 14, 20, .55);   /* a peg's shape, pressed into it */
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.cb-mark .key.exact { fill: var(--key-exact); stroke: color-mix(in srgb, var(--key-exact) 60%, #000); stroke-width: .06; }
.wordmark-h .cb-mark { width: 1.6em; height: .9em; transform: none; }
.cover-mark .cb-mark { width: 120px; }

/* ── a peg ──────────────────────────────────────────────────────────────── */
.peg .peg-lip { fill: rgba(5, 8, 14, .55); }
.peg .peg-body { stroke: rgba(5, 8, 14, .35); stroke-width: .03; }
.peg .peg-shine { fill: #fff; opacity: .42; }
.peg .peg-shape { fill: var(--peg-mark); }
.peg.c0 .peg-body { fill: var(--peg-0); } .peg.c1 .peg-body { fill: var(--peg-1); }
.peg.c2 .peg-body { fill: var(--peg-2); } .peg.c3 .peg-body { fill: var(--peg-3); }
.peg.c4 .peg-body { fill: var(--peg-4); } .peg.c5 .peg-body { fill: var(--peg-5); }
.peg.c6 .peg-body { fill: var(--peg-6); } .peg.c7 .peg-body { fill: var(--peg-7); }

/* ── the board ──────────────────────────────────────────────────────────── */
.cb-board .board, .cb-mini .board, .cb-example .board { fill: var(--board); stroke: var(--board-edge); stroke-width: .06; }
.cb-board .board-shine { fill: #fff; opacity: .05; }
/* (a row's number as large as its margin holds "12" with room either side) */
.cb-board .row-no, .cb-example .row-no { fill: var(--board-ink); font: 700 .42px var(--ui); text-anchor: middle; }
.cb-example .row-no { font-size: .26px; }
.hole { fill: var(--board-hole); stroke: rgba(255, 255, 255, .08); stroke-width: .025; }
.key-well { fill: color-mix(in srgb, var(--board-hole) 45%, var(--board)); }
.key-hole { fill: var(--board-hole); }
.key { stroke: rgba(5, 8, 14, .5); stroke-width: .025; }
.key.exact { fill: var(--key-exact); }
.key.near { fill: var(--key-near); }
/* your row: a lighter strip, and the hole a peg goes in next ringed */
.cb-board .now-strip { fill: rgba(255, 255, 255, .09); }
.cb-board .hit { fill: transparent; cursor: pointer; }
.cb-board .pick { fill: none; stroke: #fff; stroke-width: .06; opacity: .9; pointer-events: none; }
.cb-board:focus-visible { outline: 3px solid var(--pick); outline-offset: 6px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .cb-board .hit:hover { fill: rgba(255, 255, 255, .08); } }

/* the shield over the code, and the code beneath it once it's over */
.cb-board .shield-well, .win-star .shield-well, .cb-win .shield-well { fill: var(--board-hole); }
.shield { fill: var(--shield); stroke: var(--board-edge); stroke-width: .05; }
.shield-shine { fill: #fff; opacity: .08; }
.shield-word { fill: var(--shield-ink); font: 800 .56px var(--ui); letter-spacing: .3em; text-anchor: middle; }
.cb-board .shield-lid { transform-box: fill-box; transform-origin: 50% 0; transition: transform var(--m-glide, 250ms) ease, opacity var(--m-glide, 250ms) ease; }
.cb-board.open .shield-lid { transform: translateY(-115%) scaleY(.2); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cb-board.opening .shield-lid { transition-duration: 600ms; transition-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
  .cb-board .keys.pop .key { animation: key-pop var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.4) both; transform-box: fill-box; transform-origin: center; }
  .cb-board .keys.pop .key:nth-child(2) { animation-delay: 60ms; } .cb-board .keys.pop .key:nth-child(3) { animation-delay: 120ms; }
  .cb-board .keys.pop .key:nth-child(4) { animation-delay: 180ms; } .cb-board .keys.pop .key:nth-child(5) { animation-delay: 240ms; }
  .cb-board .drafted { animation: peg-in var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.3); transform-box: fill-box; transform-origin: center; }
  .cb-board.win .shield-code .peg { animation: key-pop calc(var(--m-celebrate, 1000ms) / 2) cubic-bezier(.2, .9, .3, 1.4) 500ms both; transform-box: fill-box; transform-origin: center; }
}
@keyframes key-pop { from { scale: .2; opacity: 0; } }
@keyframes peg-in { from { scale: .6; } }

/* ── the tray: the pegs, Take out and Check ─────────────────────────────── */
.cb-tray { display: flex; align-items: center; justify-content: center; gap: var(--s2) var(--s3); flex-wrap: wrap; max-width: 640px; }
.cb-pegs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cb-peg {
  width: 48px; height: 48px; padding: 5px; border: 0; border-radius: 50%; background: var(--board); cursor: pointer;
  box-shadow: 0 2px 0 var(--board-edge); transition: transform var(--m-press, 120ms) ease;
}
.cb-peg svg { display: block; width: 100%; height: 100%; }
.cb-peg:active { transform: translateY(2px); box-shadow: none; }
.cb-peg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-peg.used { opacity: .45; }
.cb-peg:disabled { opacity: .35; cursor: default; }
.cb-acts { display: flex; gap: var(--s2); }
.cb-check { min-width: 6.5em; }
.cb-out .glyph { width: 20px; height: 14px; }
/* On a phone the tray stacks: the pegs (eight as two rows of four), then Take out and Check. */
@media (max-width: 640px) {
  .cb-tray { flex-direction: column; gap: var(--s2); }
  .cb-pegs.eight { display: grid; grid-template-columns: repeat(4, auto); }
}
@media (max-width: 400px) { .cb-peg { width: 44px; height: 44px; } .cb-pegs { gap: 4px; } }

/* ── small boards: a daily's card, the result ───────────────────────────── */
.cb-mini .hole { stroke: none; }
.cb-win { width: 150px; height: 60px; }
.cb-example { width: min(100%, 240px); height: auto; }