/* /chip-dodge — page-specific styles.
   Same tokens and same shapes as /squeegee, because the two games sit beside
   each other in the footer and should look like one arcade rather than two
   projects. Loaded only by this page; hashed by bust.js. */

#cd{--c-line:var(--ink-700);--c-glow:0 0 0 1px rgba(127,212,255,.10),0 24px 60px rgba(0,0,0,.45)}

#cd .hud{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
#cd .stat{flex:1 1 0;min-width:96px;background:var(--ink-900);border:1px solid var(--c-line);
  border-radius:12px;padding:11px 14px}
#cd .stat .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-inv-2)}
#cd .stat .v{font-family:var(--font-display);font-size:25px;font-weight:700;color:#fff;
  line-height:1.15;font-variant-numeric:tabular-nums}
#cd .stat.cost .v{color:var(--accent)}
#cd .stat.gap .v{color:var(--blue-200)}

/* Canvas and overlay share one grid cell rather than the overlay being
   absolutely positioned inside the stage. Absolute positioning pinned the
   overlay to the canvas box, and on a 375px phone the canvas is only 262px
   tall — so the itemised repair bill became 513px of content scrolling inside
   a 241px window. In one cell the row takes the height of the taller of the
   two, so the results panel sets the stage height and is simply readable. */
#cd .stage{display:grid;max-width:820px;margin:0 auto;touch-action:none}
#cd canvas.play{grid-area:1/1;align-self:start;display:block;width:100%;height:auto;
  border-radius:16px;border:1px solid var(--c-line);box-shadow:var(--c-glow);background:#080a0d;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

#cd .overlay{grid-area:1/1;display:grid;place-items:center;padding:22px;
  background:rgba(8,11,14,.94);border-radius:16px;text-align:center;backdrop-filter:blur(2px)}
#cd .overlay[hidden]{display:none}
#cd .panel{max-width:520px;width:100%}
#cd .panel h2{font-family:var(--font-display);font-size:32px;font-weight:700;color:#fff;
  margin:0 0 10px;letter-spacing:-.6px}
#cd .panel p{font-size:13.5px;line-height:1.6;color:var(--text-inv-2);margin:0 0 12px}
#cd .panel p b{color:#fff}

/* the setup choices — road, then film */
#cd .cd-group{margin:0 0 14px;text-align:left}
#cd .cd-lab{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-inv-2);margin:0 0 7px}
#cd .cd-row{display:flex;gap:6px;flex-wrap:wrap}
#cd .cd-opt{background:transparent;border:1px solid var(--c-line);color:var(--text-inv-2);
  border-radius:999px;padding:8px 14px;font:600 12.5px var(--font-body);cursor:pointer}
#cd .cd-opt[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
#cd .cd-blurb{font-size:12px;color:var(--text-inv-2);margin:8px 0 0}

/* the bill — the actual point of the game */
#cd .cd-sum{font-size:13px;color:#fff;margin:0 0 12px}
#cd .cd-bill{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 14px}
#cd .cd-bill td{padding:6px 4px;border-bottom:1px solid var(--c-line);color:var(--text-inv-2);
  text-align:left}
#cd .cd-bill td:last-child{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
#cd .cd-bill i{color:var(--blue-200);font-style:normal}
#cd .cd-bill .tot td{border-bottom:0;padding-top:10px;color:#fff;font-weight:700;font-size:14px}
#cd .cd-verdict{font-size:13.5px;color:var(--text-inv-2);line-height:1.6}
#cd .cd-fine{font-size:11px;color:var(--text-inv-2);opacity:.75;line-height:1.5;margin-top:10px}

#cd .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
#cd .btn-play{background:var(--blue-700);border:0;color:#fff;border-radius:999px;
  padding:13px 30px;font:700 14.5px var(--font-body);cursor:pointer}
#cd .btn-play:hover{background:var(--blue-500)}
#cd .btn-ghost2{background:transparent;border:1px solid var(--c-line);color:#fff;border-radius:999px;
  padding:11px 22px;font:600 13.5px var(--font-body);cursor:pointer}
#cd .btn-ghost2[hidden]{display:none}

#cd .hint{margin:14px 0 0;font-size:12.5px;color:var(--text-inv-2);text-align:center}

@media(max-width:560px){
  #cd .stat{padding:9px 11px;min-width:0}
  #cd .stat .v{font-size:19px}
  #cd .stat .k{font-size:9.5px}
  #cd .panel h2{font-size:25px}
  #cd .panel p{font-size:12.5px}
  #cd .overlay{padding:16px}
}

/* Same control, same place, same wording as /squeegee — two games on one
   site should not each invent their own sound switch. */
#cd .soundrow{display:flex;justify-content:center;margin:12px 0 0}
#cd .btn-mute{background:transparent;border:1px solid var(--c-line);color:var(--text-inv-2);
  border-radius:999px;padding:7px 16px;font:600 12px var(--font-body);cursor:pointer}
#cd .btn-mute[aria-pressed="true"]{color:#fff;border-color:var(--blue-700)}
#cd .btn-mute:hover{border-color:var(--blue-500)}