/* Shockmate — "Clay & Daylight".
   A folding travel chess set photographed at 11am on a kitchen table. Painted wood and vinyl toys.
   The kid's world is warm and lit; Glitch is the only dark thing in it.

   Three rules this file keeps:
   1. No glow, ever. Every raised thing has a HARD offset shadow, no blur. Light comes from a window.
   2. No uniform radius. Every surface is hand-cut, so nothing looks extruded by a machine.
   3. Purple belongs to the villain alone. It never appears on a button, a chip, or anything friendly. */

:root {
  /* ground and surfaces */
  --paper: #fbf3e4;        /* app ground, warm bone */
  --paper-2: #f3e8d2;      /* recessed panels, board apron */
  --card: #fffdf7;         /* raised sheets */
  --hair: #d9cdb4;         /* 1px rules */

  /* ink: everything is outlined, nothing is pure black */
  --ink: #2a2118;
  --ink-2: #6b5e4e;        /* labels only, never sentences */

  /* the board: real tournament vinyl-roll colours */
  --sq-light: #f2dfb6;
  --sq-dark: #6e9457;
  --last-move: #f2c21bb0;   /* the move that just happened, both squares */

  /* meaning. no colour ever carries meaning alone; each also has a shape. */
  --leaf: #1f8a5b;         /* the kid's correct line */
  --sun: #f5a524;          /* power, rank, reward */
  --tomato: #e24e3a;       /* the bait, danger, only */
  --mark: #2e5fa8;         /* the kid's own actions; Sarah's profile accent */

  /* the villain, and nothing else */
  --grape: #7b3fa0;
  --grape-deep: #4a1f66;

  /* his rating plate */
  --brass: #c89b3c;
  --brass-dk: #8a6a22;

  /* the kitchen table the set is sitting on */
  --wood: #d9a066;
  --wood-dk: #9c6532;
  --sun-dk: #b87b12;

  /* aliases kept so older rules keep resolving */
  --line: var(--hair);
  --muted: var(--ink-2);
  --gold: var(--sun);
  --cyan: var(--leaf);
  --mag: var(--tomato);
  --magenta: var(--tomato);   /* was undefined for weeks; six rules silently fell back to pink */
  --light: var(--sq-light);
  --dark: var(--sq-dark);
  --panel: var(--card);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--paper);
  /* paper tooth. the only texture on the ground, and it must stay this faint. */
  background-image: radial-gradient(#00000010 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 400; font-size: 17px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
#app { max-width: 460px; margin: 0 auto; padding: 10px 16px calc(120px + env(safe-area-inset-bottom)); }

h1, h2, h3, .brand, .banner, .future-title, .turn-chip, .step-label, .day-chip, button {
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
}
h1 { font-size: 38px; font-weight: 800; line-height: 1.02; margin: 16px 0 8px; letter-spacing: .2px; }
h2 { font-size: 26px; font-weight: 800; color: var(--ink); margin: 14px 0 8px; }
h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.lead { font-size: 19px; max-width: 30ch; }
.sub, .hint { color: var(--ink-2); font-size: 15px; }
.actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.actions.stack { flex-direction: column; align-items: stretch; }

/* ---------- screens ---------- */
.screen { display: none; }
.screen.active { display: block; animation: fade .24s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Glitch: the only dark thing on the page ---------- */
.glitch-row { display: flex; align-items: flex-start; gap: 10px; min-height: 92px; margin: 2px 0 8px; }
#glitch { flex-shrink: 0; width: 84px; transform-origin: 50% 100%; transition: transform .24s ease, filter .24s ease; }
.glitch-svg { width: 84px; height: 84px; display: block; }
#glitch.pop { animation: gpop .3s ease; }
@keyframes gpop { 0% { transform: scale(.84) rotate(-6deg); } 60% { transform: scale(1.05); } 100% { transform: none; } }
#glitch[data-mood="rage"] { animation: gshake .28s ease 3; }
@keyframes gshake { 0%,100% { transform: none; } 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
/* he deflates as his crony's rating falls: squat, tilt, drain */
#glitch[data-wilt="1"] { transform: scale(1, .97) rotate(-2deg); }
#glitch[data-wilt="2"] { transform: scale(1, .93) rotate(-4deg) translateY(3px); filter: saturate(.8); }
#glitch[data-wilt="3"] { transform: scale(1, .88) rotate(-7deg) translateY(6px); filter: saturate(.55) brightness(.95); }

/* his speech is the only handwritten thing on screen */
.bubble {
  position: relative; flex-grow: 1; background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px 22px 16px 20px; padding: 9px 12px;
  font-family: "Patrick Hand", "Comic Sans MS", cursive; font-weight: 400;
  font-size: 21px; line-height: 1.25; box-shadow: 0 4px 0 var(--hair);
}
.bubble::after { content: ""; position: absolute; left: -13px; top: 24px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 13px solid var(--ink); }
.bubble[hidden] { display: none; }

/* ---------- banner ---------- */
.banner {
  text-align: center; font-family: "Baloo 2", sans-serif; font-weight: 800; letter-spacing: .4px;
  font-size: 22px; margin: 0 0 8px; padding: 5px 12px;
  border: 3px solid var(--ink); border-radius: 14px 18px 13px 17px; background: var(--card);
  box-shadow: 0 4px 0 var(--hair);
}
.banner[hidden] { display: none; }
.banner.win { background: var(--leaf); color: var(--card); }
.banner.miss { background: var(--tomato); color: var(--card); }
.banner.tease { background: var(--paper-2); color: var(--ink-2); }
.banner.crit { background: var(--sun); font-size: 29px; animation: critpop .4s ease 3; }
@keyframes critpop { 50% { transform: scale(1.06); } }

/* ---------- the board: an object that folds and lives in a backpack ---------- */
.board-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto; transition: transform .18s ease; }
.board-wrap.zoom { transform: scale(1.05); }
.board {
  position: relative;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: 100%; aspect-ratio: 1; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 6px;
  outline: 9px solid var(--paper-2); outline-offset: 0;
  box-shadow: 0 8px 0 var(--hair); user-select: none; transition: opacity .3s;
}
.board.dim { opacity: .45; }
/* the hinge seam, down the file between d and e */
.board::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px;
  background: linear-gradient(90deg, #00000026 0 1px, #ffffff2e 1px 2px, #00000026 2px 3px, #ffffff1f 3px 4px);
  pointer-events: none; z-index: 3;
}
.sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
/* painted wood, not flat fill: a lit top-left edge and a shaded bottom-right */
.sq.light { background: var(--sq-light); box-shadow: inset 1px 1px 0 #ffffff80, inset -1px -1px 0 #00000012; }
.sq.dark { background: var(--sq-dark); box-shadow: inset 1px 1px 0 #ffffff33, inset -1px -1px 0 #0000001f; }
.sq .coord { position: absolute; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; z-index: 1; }
.sq .coord.rank { left: 3px; top: 2px; }
.sq .coord.file { right: 3px; bottom: 2px; }
/* each label takes the colour of the other square, as on every board */
.sq.light .coord { color: var(--sq-dark); }
.sq.dark .coord { color: var(--sq-light); }

/* highlights are physical. a dimple, a bracket, a painted ring. never a glow. */
/* the last move: both squares washed in a flat tint, under every other mark, like every chess site */
.sq.last::before { content: ""; position: absolute; inset: 0; background: var(--last-move); pointer-events: none; z-index: 0; }
.sq.last .piece { position: relative; }
.sq.sel { outline: 3px solid var(--ink); outline-offset: -3px; }
.sq.legal::after { content: ""; width: 22%; height: 22%; border-radius: 50%; position: absolute;
  background: #0000002e; box-shadow: inset 0 2px 3px #00000040; }
.sq.legal.cap::after { width: 78%; height: 78%; background: transparent; box-shadow: none;
  border: 4px solid var(--ink); border-radius: 50%; opacity: .55; }
.sq.cand { box-shadow: inset 0 0 0 4px #2a211859; }
.sq.guide, .sq.best-glow { box-shadow: inset 0 0 0 4px var(--leaf); }
.sq.guide { animation: breathe .8s ease infinite; }
.sq.tempt-glow { box-shadow: inset 0 0 0 4px var(--tomato); }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 7px var(--leaf); } }
.piece { cursor: pointer; z-index: 2; transition: transform .12s ease; }
.piece.pop { animation: pop .25s ease; }
@keyframes pop { 50% { transform: scale(1.24) rotate(-7deg); } }
.sq.sel .piece { transform: translateY(-4px) scale(1.05); }

/* motif finishers */
.sq.fork-glow { box-shadow: inset 0 0 0 4px var(--sun); animation: breathe .45s ease infinite; }
.sq.pin-freeze { box-shadow: inset 0 0 0 4px var(--mark); filter: saturate(.4) brightness(1.15); }
.sq.skewer-stab { box-shadow: inset 0 0 0 4px var(--sun); animation: stab .5s ease; }
.sq.door-slam { box-shadow: inset 0 0 0 5px var(--ink); animation: slam .45s ease; }
.sq.laser { box-shadow: inset 0 0 0 4px var(--sun); animation: laser .6s linear; }
.sq.poison { box-shadow: inset 0 0 0 4px var(--leaf); animation: breathe .45s ease; }
@keyframes stab { 40% { transform: scale(.92); } }
@keyframes slam { from { transform: scaleY(.2); } }
@keyframes laser { 50% { box-shadow: inset 0 0 0 7px var(--card); } }

/* ---------- two futures ---------- */
.timelines { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; }
.timelines[hidden] { display: none; }
.tl { display: flex; align-items: center; gap: 9px; }
.tl b { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 15px; width: 74px; }
.tl.you b { color: var(--leaf); } .tl.him b { color: var(--grape); }
.tl i { flex-grow: 1; height: 15px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 9px; overflow: hidden; }
.tl i span { display: block; height: 100%; width: 8%; }
.tl.you i span { background: var(--leaf); animation: charge 1.1s ease-out forwards; }
.tl.him i span { background: var(--grape); animation: charge 1.5s ease-out forwards; }
@keyframes charge { to { width: 88%; } }

/* ---------- fx: paper, not particles ---------- */
.fx { pointer-events: none; position: absolute; inset: 0; overflow: visible; }
.splat, .boom-ring, .spark { position: absolute; pointer-events: none; }
.splat { border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); animation: splat .6s ease forwards; }
.boom-ring { border: 4px solid var(--ink); border-radius: 50%; animation: ring .5s ease forwards; }
.spark { width: 7px; height: 9px; background: var(--grape); border: 2px solid var(--ink); animation: spark .55s ease forwards; }
@keyframes splat { to { transform: scale(2.1); opacity: 0; } }
@keyframes ring { to { transform: scale(2.6); opacity: 0; } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(140deg); opacity: 0; } }
.board.shake { animation: shake .35s ease; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(6px) rotate(1deg); } }

/* ---------- why gate: colouring in, not passing a test ---------- */
.prompt { text-align: center; margin: 10px 0 6px; min-height: 22px; font-size: 18px; }
.gate-prompt { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 23px; color: var(--ink); }
.gate-dots { display: flex; justify-content: center; gap: 8px; min-height: 10px; }
.gate-dots span { width: 38px; height: 9px; border-radius: 5px; background: transparent; border: 2px solid var(--hair); }
.gate-dots span.on { background: var(--sun); border-color: var(--ink); }
.sq.gate-ok { box-shadow: inset 0 0 0 5px var(--sun); }
.sq.gate-hint { box-shadow: inset 0 0 0 5px var(--ink); animation: breathe .6s ease infinite; }
.sq.nope { animation: shake .3s ease; }
.chip.nope { animation: shake .3s ease; }
.ritual { text-align: center; font-weight: 700; color: var(--ink); background: var(--paper-2);
  border: 2.5px dashed var(--ink); border-radius: 12px 15px 11px 14px; padding: 7px 10px;
  margin: 2px 6px 8px; font-size: 16px; line-height: 1.35; }
.ritual[hidden] { display: none; }

/* ---------- flash: a ring that empties, and four chips ----------
   The ring is a meter, not a control, so it lives with the blitz bar and the think meter rather than
   with the three kinds of button. It empties; it never counts. */
.flash-ring { display: flex; justify-content: center; margin: 2px 0 4px; }
.flash-ring[hidden] { display: none; }
.flash-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.flash-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.flash-ring .track { stroke: var(--hair); }
.flash-ring .run { stroke: var(--grape); stroke-dasharray: 106.8; stroke-dashoffset: 0; }
.flash-ring.ghost .run { stroke: var(--sun); }
.flash-chips { justify-content: center; margin: 6px 0 0; }
.flash-chips[hidden] { display: none; }
.flash-chips .chip { min-width: 58px; min-height: 52px; font-size: 22px; font-weight: 800; justify-content: center; }
/* The ghost move: an arrow that says the move once and then stops helping. */
.ghost-arrow { position: absolute; inset: 0; pointer-events: none; }
.ghost-arrow line { stroke: var(--grape); stroke-width: 7; stroke-linecap: round; opacity: .85; }
.ghost-arrow circle { fill: var(--grape); opacity: .85; }
.sq.flash-from { box-shadow: inset 0 0 0 5px var(--grape); }

/* ---------- cards and the collection ---------- */
.why-card, .room, .prog-kid, .agent, .modal-card, .next-peek, .set-card, .gate-card {
  background: var(--card); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--hair);
  /* cardstock */
  background-image: repeating-linear-gradient(112deg, #00000008 0 2px, transparent 2px 7px);
}
.why-card { border-radius: 20px 24px 18px 26px; padding: 14px 16px; margin: 12px 0; }
.mascot { display: inline-block; background: var(--grape); color: var(--card); font-size: 12px;
  font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border: 2.5px solid var(--ink); border-radius: 999px; }
#why-text { font-size: 21px; margin: 10px 0 6px; }
.why-long { color: var(--ink-2); font-size: 16px; }
.future-title { text-align: center; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 29px; }
.spoils { text-align: center; color: var(--ink-2); font-weight: 700; margin: -2px 0 8px; }
.rank-line { font-weight: 700; color: var(--leaf); margin: 2px 0 6px; }
.rooms { display: grid; gap: 10px; margin: 14px 0; }
.room { border-radius: 16px 20px 15px 19px; padding: 12px; }
.figs { display: flex; flex-wrap: wrap; gap: 8px; }
.fig { display: flex; align-items: center; gap: 10px; color: var(--ink-2); background: var(--paper-2);
  border: 2.5px solid var(--ink); border-radius: 12px 14px 11px 15px; padding: 7px 9px; font-size: 13px; margin-bottom: 6px; }
.fig.locked { opacity: .42; }
.fig.crit { border-color: var(--sun); box-shadow: 0 3px 0 var(--sun); }
.fig .art { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--card); border: 2.5px solid var(--ink); color: var(--ink); }
.fig .txt b { display: block; color: var(--ink); font-size: 14px; }
.fig .txt small { font-size: 12px; }
.fig.crit .art { color: var(--sun); }
.fig.locked .art { color: var(--hair); }

/* ---------- forms, toast, modal ---------- */
label { display: block; margin: 12px 0; color: var(--ink); }
select, input[type=number], input[type=text], input[type=password] {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 2.5px solid var(--ink); border-radius: 10px 12px 9px 13px;
  background: var(--card); color: var(--ink); font: inherit;
}
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border: 3px solid var(--ink);
  padding: 9px 15px; border-radius: 999px; z-index: 9; font-weight: 700; }
.modal { position: fixed; inset: 0; background: #2a211899; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal[hidden], .toast[hidden] { display: none !important; }
.modal-card { padding: 20px; border-radius: 22px 26px 20px 24px; max-width: 420px; }
.modal-card h2 { font-size: 28px; margin-top: 0; }
.next-peek { display: flex; align-items: center; gap: 12px; border-radius: 14px 17px 13px 16px; padding: 10px; margin: 12px 0; }
.next-peek .mini { width: 92px; height: 92px; flex-shrink: 0; display: grid; grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr); border-radius: 4px; overflow: hidden; border: 2.5px solid var(--ink); }
.next-peek .mini[hidden] { display: none; }   /* camp has no next board to peek at */
.next-peek .mini div { min-width: 0; min-height: 0; }
.next-peek .mini .light { background: var(--sq-light); } .next-peek .mini .dark { background: var(--sq-dark); }
.next-peek .mini svg { width: 100%; height: 100%; display: block; }

/* ---------- co-op, duel, blitz ---------- */
.team { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.team[hidden], .blitz[hidden] { display: none; }
.turn-chip { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 16px; background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.rage { display: flex; align-items: center; gap: 8px; flex-grow: 1; }
.rage b { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 13px; color: var(--grape); }
.rage i { flex-grow: 1; height: 13px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 8px; overflow: hidden; }
.rage i span { display: block; height: 100%; width: 0; background: var(--grape); transition: width .5s ease; }
.rage.full i span { background: var(--tomato); }
.blitz i { display: block; height: 9px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.blitz i span { display: block; height: 100%; width: 100%; background: var(--sun); }
.blitz.run i span { transition: width 10s linear; width: 0; }
#turn-note { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.white-note { color: var(--ink-2); font-size: 14px; margin: -2px 0 14px; }
.step-label { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-2);
  margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.build { color: var(--ink-2); font-size: 12px; margin-top: 2px; }

/* ---------- Glitch's permanent brag, and today's crony ---------- */
.brag { margin: 10px 0 2px; }
.brag-row { display: flex; justify-content: space-between; align-items: baseline; }
.brag-row b { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.brag-row span { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 26px; color: var(--grape); font-variant-numeric: tabular-nums; }
.brag-bar { height: 10px; border: 2.5px solid var(--ink); border-radius: 7px; background: var(--paper-2); overflow: hidden; margin-top: 4px; }
.brag-bar i { display: block; height: 100%; width: 100%; background: var(--grape); transition: width 700ms ease; }
.brag.crony { margin-top: 10px; }
.brag.crony .brag-row b { color: var(--grape); }
#crony[hidden] { display: none; }
.brag-tick { color: var(--ink); font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---------- the signature: his rating is an enamelled brass name-plate ---------- */
.boss {
  margin: 4px auto 8px; max-width: 420px; padding: 7px 12px;
  border: 3px solid var(--ink); border-radius: 5px 7px 5px 7px;
  background: linear-gradient(176deg, #e8d08a 0%, var(--brass) 18%, #d9b45e 52%, var(--brass-dk) 100%);
  box-shadow: 0 4px 0 #6b5216, inset 0 1px 0 #ffffff6b;
}
.boss-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.boss-row b { font-family: "Baloo 2", sans-serif; color: #3a2c06; letter-spacing: .04em; }
.boss-row span { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 21px; color: #2b2005; font-variant-numeric: tabular-nums; }
.boss-bar { height: 8px; border: 2px solid #6b5216; border-radius: 4px; background: #00000026; overflow: hidden; margin-top: 5px; }
.boss-bar i { display: block; height: 100%; width: 100%; background: #3a2c06; transition: width 320ms ease; }
/* knocked out: the enamel is gone and the plate is bare scratched metal */
.boss.ko { background: linear-gradient(176deg, #cfcabd 0%, #b3ada0 60%, #948e82 100%); }
.boss.ko .boss-row b, .boss.ko .boss-row span { color: #4a463d; }
.boss.ko .boss-bar i { background: #4a463d; }

/* ---------- the kid's agent ---------- */
.agent { margin: 10px auto 0; max-width: 420px; padding: 9px 11px; border-radius: 16px 19px 15px 18px; }
.agent-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.agent-row b { font-family: "Baloo 2", sans-serif; color: var(--ink); letter-spacing: .04em; }
.agent-row span { font-family: "Baloo 2", sans-serif; color: var(--leaf); }
.gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.gear-slot { border: 2.5px dashed var(--ink); border-radius: 12px 14px 11px 15px; padding: 6px; min-height: 58px; font-size: 13px; text-align: center; background: var(--paper-2); }
.gear-slot.locked { opacity: .45; }
.gear-slot .slot-n { display: block; font-size: 11px; color: var(--ink-2); letter-spacing: .06em; }
.gear-slot .equipped { display: block; font-weight: 700; margin: 2px 0; }
.gear-slot .pick { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.gear-slot .pick button { font-size: 12px; padding: 3px 7px; min-height: 0; border-radius: 8px; border: 2px solid var(--ink); box-shadow: none; }
.gear-slot .pick button.on { background: var(--sun); }
.gear-slot.filled { border-style: solid; box-shadow: 0 3px 0 var(--hair); }
@media (max-width: 400px) { .gear { grid-template-columns: 1fr; } }

/* ---------- parent progress ---------- */
.prog-kid { margin: 10px auto; max-width: 480px; padding: 11px 13px; border-radius: 16px 20px 15px 19px; }
.prog-kid h3 { margin: 0 0 4px; }
.prog-line { margin: 3px 0; font-size: 16px; }
.prog-line.good b { color: var(--leaf); }
.prog-line.focus b { color: var(--tomato); }
.prog-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 8px 0; }
.prog-bars i { display: block; flex: 1; background: var(--leaf); border: 1.5px solid var(--ink); border-radius: 2px 2px 0 0; min-width: 6px; }
.prog-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.prog-table th, .prog-table td { text-align: left; padding: 4px 6px; border-bottom: 1.5px solid var(--hair); }
.prog-table th { color: var(--ink-2); font-weight: 700; letter-spacing: .04em; font-size: 12px; }
.prog-table tr.focus td:last-child { color: var(--tomato); font-weight: 700; }
.prog-table tr.good td:last-child { color: var(--leaf); font-weight: 700; }
.prog-table tr.new td { color: var(--ink-2); }


/* ============================================================
   GAME LAYER. The screen is a toy on a table, not a form.
   Three kinds of control, and only three:
   - the ARCADE button: one per screen, the thing to do next. Thick, lit, pressable.
   - CHIPS: choices. Flat clay, the chosen one is filled.
   - TOKENS: round tools (home, cards, settings, powers). Icons, never sentences.
   ============================================================ */

/* ---------- top bar: a brand and three tokens, nothing else ---------- */
.topbar { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.brand { font-size: 24px; font-weight: 800; letter-spacing: .3px; line-height: 1; }
.boom { color: var(--ink); } .mate { color: var(--grape); }
.hud[hidden] { display: none; }
.tools { display: flex; gap: 8px; margin-left: auto; }

/* ---------- base button ---------- */
button {
  font: inherit; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink);
  cursor: pointer; border: 3px solid var(--ink); background: var(--card);
  border-radius: 14px 17px 13px 16px; padding: 8px 14px; min-height: 44px;
  box-shadow: 0 4px 0 var(--ink); transition: transform .07s ease, box-shadow .07s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
button:disabled { opacity: .4; box-shadow: 0 2px 0 var(--hair); border-color: var(--ink-2); cursor: default; }
button:disabled:active { transform: none; }
.link { background: none; border: 0; box-shadow: none; color: var(--ink-2); text-decoration: underline;
  font: inherit; font-size: 14px; padding: 4px; min-height: 0; border-radius: 0; }
.link:active { transform: none; box-shadow: none; }
.ghost { background: var(--card); }
.ghost.danger { color: var(--tomato); }

/* the arcade button: a lit, domed, thick cap on a dark base */
.cta {
  position: relative; background: var(--sun); color: var(--ink);
  font-weight: 800; font-size: 21px; letter-spacing: .5px; text-transform: uppercase;
  border-radius: 20px 24px 19px 23px; padding: 12px 22px; min-height: 58px;
  box-shadow: 0 7px 0 var(--ink), inset 0 -6px 0 var(--sun-dk), inset 0 4px 0 #ffffff80;
}
.cta:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink), inset 0 -3px 0 var(--sun-dk), inset 0 3px 0 #ffffff80; }
.cta.big { width: 100%; font-size: 27px; min-height: 72px; padding: 10px 18px; }
.cta.big span { display: inline-block; background: var(--ink); color: var(--sun); padding: 0 10px 2px; margin-left: 8px;
  border-radius: 8px 11px 7px 10px; transform: rotate(-2deg); }

/* chips: choices */
.chip { background: var(--paper-2); box-shadow: 0 3px 0 var(--ink); font-size: 16px; padding: 6px 14px; min-height: 40px; }
.chip.active, .prof.active, .seat.active { background: var(--ink); color: var(--sun); }

/* tokens: round tools */
.token { position: relative; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card); }
.token svg, .pw svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.token .badge { position: absolute; top: -7px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--leaf); color: var(--card); border: 2.5px solid var(--ink);
  font-size: 12px; line-height: 17px; font-weight: 800; }
#btn-home[hidden] { display: none !important; }

/* ---------- home: who is playing ---------- */
.players { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.players .link { margin-left: auto; }
.players [hidden] { display: none; }

/* ---------- home: the arena. you on the left, today's crony on the right ---------- */
.arena {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4px;
  padding: 16px 12px 14px; border: 3px solid var(--ink); border-radius: 22px 26px 20px 28px;
  /* the kitchen table, lit from the window on the left */
  background:
    radial-gradient(120% 90% at 10% 0%, #fff4d680 0%, transparent 60%),
    repeating-linear-gradient(94deg, #0000000d 0 2px, transparent 2px 19px, #ffffff14 19px 21px, transparent 21px 37px),
    linear-gradient(180deg, var(--wood) 0%, #cf9459 100%);
  box-shadow: 0 7px 0 var(--wood-dk), 0 7px 0 3px var(--ink);
}
.side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.avatar { width: 84px; height: 84px; border-radius: 50%; border: 3.5px solid var(--ink);
  background: var(--mark); color: var(--card); text-shadow: 0 3px 0 var(--ink);
  background-image: radial-gradient(60% 45% at 32% 22%, #ffffff55, transparent 70%);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 44px; line-height: 78px;
  box-shadow: 0 5px 0 var(--ink); }
.who { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.05; color: var(--ink);
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 9px 12px 8px 11px; padding: 1px 9px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foe .who { background: var(--grape); color: var(--card); }
.ribbon { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--leaf); color: var(--card); border: 2.5px solid var(--ink); padding: 0 10px; border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); padding: 0 16px; }
.tally { font-size: 13px; font-weight: 700; color: #3b2a14; }
.vs { align-self: center; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 46px; line-height: 1;
  color: var(--sun); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; transform: rotate(-8deg);
  text-shadow: 0 4px 0 var(--ink); padding: 0 2px; }
.foe-art { width: 104px; height: 100px; margin-bottom: -4px; transform-origin: 50% 100%; animation: bob 2.4s ease-in-out infinite; }
.foe-art .glitch-svg { width: 104px; height: 100px; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.foe-art[data-wilt="1"] { transform: scale(1, .96); } .foe-art[data-wilt="2"] { transform: scale(1, .92); filter: saturate(.8); }
.foe-art[data-wilt="3"] { transform: scale(1, .86) rotate(-6deg); filter: saturate(.55); animation: none; }
/* his health, as a fighter bar: it only ever drains */
.hp { width: 100%; height: 14px; border: 2.5px solid var(--ink); border-radius: 4px; background: #3a1f4d; overflow: hidden; }
.hp i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--tomato) 0 10px, #f0624d 10px 12px); transition: width 700ms ease; }
.hp-n { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1; }
#crony[hidden] { display: flex !important; }

.taunt { position: relative; margin: 14px 4px 6px 38%; background: var(--card); border: 3px solid var(--ink);
  border-radius: 16px 20px 15px 18px; padding: 6px 11px; font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 19px; line-height: 1.2; box-shadow: 0 4px 0 var(--hair); }
.taunt::before { content: ""; position: absolute; right: 44px; top: -14px; border-left: 9px solid transparent;
  border-right: 9px solid transparent; border-bottom: 14px solid var(--ink); }
.taunt:empty { display: none; }

/* ---------- home: the map. numbered stops on a path ---------- */
.map-wrap { margin: 12px -16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.map-wrap::-webkit-scrollbar { display: none; }
.map { position: relative; display: flex; gap: 12px; padding: 8px 16px 10px; width: max-content; }
.map::before { content: ""; position: absolute; left: 40px; right: 40px; top: 40px; border-top: 4px dashed var(--ink-2); opacity: .5; }
.day-chip { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 78px; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.day-chip:active { transform: none; box-shadow: none; }
.day-chip .n { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--ink); background: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--ink);
  box-shadow: 0 5px 0 var(--ink); transition: transform .07s ease; }
.day-chip:active .n { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.day-chip .t { font-size: 13px; font-weight: 800; line-height: 1.1; color: var(--ink); text-align: center; }
.day-chip small { font-family: "Atkinson Hyperlegible", sans-serif; font-size: 11px; color: var(--ink-2); line-height: 1.1; text-align: center; }
.day-chip.done .n { background: var(--leaf); color: var(--card); }
.day-chip.current .n { background: var(--sun); box-shadow: 0 5px 0 var(--ink); outline: 3px solid var(--ink); outline-offset: 4px; }
.day-chip.current .t { margin-top: 7px; }
.day-chip.locked { opacity: .45; }
.day-chip.locked .n { background: var(--paper-2); border-style: dashed; box-shadow: none; }
.day-chip.prep .n { border-radius: 14px 17px 13px 16px; transform: rotate(-6deg); background: var(--paper-2); }
.day-chip.prep.current .n { background: var(--sun); }
/* camp is a session, not a stop: a tent flag pitched beside the path */
.day-chip.camp .n { border-radius: 50% 14px 50% 14px; transform: rotate(6deg); background: var(--paper-2); font-size: 28px; }
.day-chip.camp.done .n { background: var(--leaf); color: var(--card); }
.day-chip.camp .t { margin-top: 5px; }
.day-chip.flash .n { border-radius: 14px 50% 14px 50%; transform: rotate(-6deg); background: var(--paper-2); font-size: 26px; }
.day-chip.flash.done .n { background: var(--leaf); color: var(--card); }
.day-chip.flash .t { margin-top: 5px; }
.day-chip:disabled { opacity: .45; box-shadow: none; border: 0; }
.day-chip.prep .t { margin-top: 5px; }
.blurb { text-align: center; font-size: 15px; color: var(--ink); margin: 2px 8px 0; }

/* ---------- home: the dock. the one thing to press, where a thumb already is ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0, var(--paper) 22px); }
.dock > * { max-width: 428px; margin: 0 auto; }
body:not([data-screen="screen-title"]) .dock { display: none; }
.dock [hidden] { display: none !important; }
.duo { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.duo .chip { min-height: 58px; font-size: 19px; }
#two-hint { text-align: center; margin: 6px 0 0; font-size: 13px; }

/* ---------- home: the drawer. everything a kid does not need to see first ---------- */
.drawer { margin: 16px 0 0; border: 3px solid var(--ink); border-radius: 16px 19px 15px 18px; background: var(--paper-2); }
.drawer summary { cursor: pointer; list-style: none; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 16px; padding: 10px 14px; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; float: right; font-weight: 800; }
.drawer[open] summary::after { content: "\2013"; }
.drawer > :not(summary) { margin-left: 12px; margin-right: 12px; }
.drawer .agent { margin-top: 0; }

/* ---------- play: slim, the board is the hero ---------- */
body[data-screen="screen-play"] .brand { font-size: 19px; }
body[data-screen="screen-play"] .topbar { padding-bottom: 4px; }
.glitch-row { min-height: 70px; margin: 0 0 6px; }
#glitch, .glitch-svg { width: 66px; }
.glitch-svg { height: 66px; }
.bubble { font-size: 19px; padding: 7px 11px; }
.path { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0 0 8px; }
.pip { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink-2); background: transparent; }
.pip.done { background: var(--leaf); border-color: var(--ink); }
.pip.now { background: var(--sun); border-color: var(--ink); transform: scale(1.25); }
/* the boss stop shares a class with the brass plate; undo the plate here */
.pip.boss { border-radius: 3px; transform: rotate(45deg); margin: 0 0 0 3px; padding: 0; max-width: none; background: transparent; box-shadow: none; }
.pip.boss.now { transform: rotate(45deg) scale(1.25); }
.pip.boss.done { background: var(--sun); border-color: var(--ink); }
.boss { padding: 5px 11px; margin: 0 auto 8px; }
.boss-row b { font-size: 14px; } .boss-row span { font-size: 19px; }
.boss-bar { height: 12px; }
.boss-bar i { background: repeating-linear-gradient(90deg, #3a2c06 0 10px, #4d3a09 10px 12px); }

/* the prompt is a caption strip fixed to the board's bottom edge */
.prompt { margin: 14px 2px 6px; padding: 9px 12px; background: var(--ink); color: var(--card);
  border-radius: 12px 15px 11px 14px; font-weight: 700; font-size: 18px; line-height: 1.3; min-height: 44px; }
.prompt.gate-prompt { background: var(--sun); color: var(--ink); border: 3px solid var(--ink); font-size: 21px; }

/* ---------- powers: round tokens with a cost, and a charge meter ---------- */
.powers { display: flex; gap: 10px; justify-content: center; align-items: flex-end; width: 100%; flex-wrap: nowrap; }
.pips { display: flex; flex-direction: column-reverse; gap: 3px; margin-right: 2px; align-self: center; }
.pips i { width: 14px; height: 9px; border-radius: 3px; border: 2px solid var(--ink); background: var(--paper-2); display: block; }
.pips i.on { background: var(--sun); }
.pw { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 64px; padding: 0; min-height: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0; font-size: 12px; font-weight: 800; }
.pw:active { transform: none; box-shadow: none; }
.pw svg { box-sizing: content-box; width: 26px; height: 26px; padding: 11px; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--card); box-shadow: 0 4px 0 var(--ink); transition: transform .07s ease; }
.pw:active svg { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pw span { line-height: 1.1; }
.pw small { font-size: 11px; color: var(--ink-2); font-weight: 700; }
.pw small::before { content: "\26A1"; margin-right: 1px; }
.pw:disabled { opacity: .38; box-shadow: none; border: 0; }
.pw:disabled svg { box-shadow: none; background: var(--paper-2); }
.pw.armed svg { background: var(--sun); transform: translateY(-3px); }
.pw.armed span::after { content: " \2713"; }
.skip { display: block; margin: 12px auto 0; }
/* `display` on a class beats the browser's own [hidden], and a skip link that is still tappable
   during an animation — or in the middle of a whole game — walks the kid off the board. */
.skip[hidden] { display: none; }


/* ---------- the card screen: a card being dealt to you ---------- */
.future-title { font-size: 30px; line-height: 1.05; margin: 4px 0 10px; color: var(--sun);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); transform: rotate(-2deg); }
.why-card { position: relative; margin: 6px 14px 0; padding: 10px 14px 14px; border-width: 4px;
  border-radius: 18px; background-color: var(--card); box-shadow: 0 7px 0 var(--ink); }
.why-card.crit { border-color: var(--ink); background-color: #fff3d6; box-shadow: 0 7px 0 var(--ink), 0 0 0 5px var(--sun), 0 0 0 8px var(--ink); }
.why-card.deal { animation: deal .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes deal { from { transform: translateY(40px) rotate(-10deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; color: var(--ink-2); text-align: right; line-height: 1.1; }
.card-name[hidden] { display: none; }
.card-art { display: flex; align-items: center; justify-content: center; height: 118px; margin: 10px 0 6px;
  border: 3px solid var(--ink); border-radius: 10px; color: var(--ink);
  background: radial-gradient(circle at 50% 60%, #fff 0 30%, transparent 31%), repeating-conic-gradient(from 0deg at 50% 60%, var(--sun) 0 10deg, #f7c465 10deg 20deg); }
.why-card.crit .card-art { background: radial-gradient(circle at 50% 60%, #fff 0 30%, transparent 31%), repeating-conic-gradient(from 0deg at 50% 60%, var(--tomato) 0 10deg, var(--sun) 10deg 20deg); }
#why-text { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 23px; line-height: 1.15; margin: 8px 0 4px; }
.why-long { font-size: 15px; margin: 4px 0 0; }
.card-foot { display: flex; align-items: flex-start; gap: 10px; margin: 16px 14px 14px; }
.said { flex: 1; margin: 0; position: relative; background: var(--grape); color: var(--card); border: 3px solid var(--ink);
  border-radius: 14px 18px 13px 16px; padding: 6px 10px; font-family: "Patrick Hand", "Comic Sans MS", cursive; font-size: 18px; line-height: 1.2; }
.said:empty { display: none; }
.brag-tick { margin: 0; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; transform: rotate(6deg);
  border: 3px solid var(--tomato); border-radius: 8px; padding: 2px 8px; color: var(--tomato); background: var(--card); }
.brag-tick[hidden] { display: none; }
.brag-tick b { font-size: 28px; line-height: 1; }
.brag-tick span { font-size: 11px; font-weight: 700; white-space: nowrap; }
#screen-card > .cta.big { margin-top: 4px; }
.actions.quiet { margin-top: 12px; }
.rank-line { font-family: "Baloo 2", sans-serif; font-size: 18px; }
/* the principle: the rule behind the fight, for the kid the parent set to "reasons first" */
.principle { margin: 8px 0 0; padding: 7px 10px; border-left: 5px solid var(--grape); background: var(--paper-2);
  border-radius: 4px 10px 10px 4px; font-size: 15px; line-height: 1.3; color: var(--ink); }
.principle[hidden] { display: none; }
/* the one thing to say at the board tomorrow, on the camp debrief */
.say-line { margin: 8px 0 4px; padding: 8px 11px; border: 3px solid var(--ink); border-radius: 12px 15px 11px 14px;
  background: var(--sun); font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; }
.say-line[hidden] { display: none; }


/* ---------- the binder: cards in sleeves, face down until won ---------- */
.room { padding: 10px 10px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.room h3 { grid-column: 1 / -1; font-size: 18px; margin: 0; }
.fig { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 5px; border-radius: 9px; background: var(--card);
  box-shadow: 0 3px 0 var(--ink); text-align: center; min-width: 0; }
.fig .art { width: 100%; height: 64px; border-radius: 6px;
  background: radial-gradient(circle at 50% 55%, #fff 0 34%, transparent 35%), repeating-conic-gradient(from 0deg at 50% 55%, var(--sun) 0 12deg, #f7c465 12deg 24deg); }
.fig .txt b { font-size: 12px; line-height: 1.1; }
.fig .txt small { display: none; }
.fig.crit .art { background: radial-gradient(circle at 50% 55%, #fff 0 34%, transparent 35%), repeating-conic-gradient(from 0deg at 50% 55%, var(--tomato) 0 12deg, var(--sun) 12deg 24deg); color: var(--ink); }
.fig.locked { opacity: 1; background: var(--grape-deep); box-shadow: 0 3px 0 var(--ink); }
.fig.locked .art { background: repeating-linear-gradient(45deg, #ffffff14 0 6px, transparent 6px 12px), var(--grape); color: #ffffff40; border-color: var(--ink); }
.fig.locked .txt b { color: #ffffffa0; }

/* ============================================================
   THE COACH'S HALF: the gate, Settings, Progress.
   Same three controls as the kid's half — arcade button, chip, round token — so the parent is not
   handed a form when the kid was handed a toy. Purple appears here, and only here outside the
   villain: this half lives behind a PIN, so purple reads as "not for you" rather than as a button.
   ============================================================ */

/* ---------- the gate: a name, four dots and a keypad of round tokens ---------- */
.gate-card { max-width: 340px; margin: 26px auto; padding: 18px 16px 14px; border-radius: 20px 24px 18px 26px; text-align: center; }
.gate-card h2 { margin: 0 0 4px; }
.gate-card .hint { margin: 0 0 12px; text-align: left; }
.gate-card label { text-align: left; }
.gate-card.wrong { animation: shake .35s ease; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 14px 0 16px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper-2); }
.pin-dots span.on { background: var(--sun); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; margin: 0 auto 6px; max-width: 250px; }
.keypad .key { width: 64px; height: 64px; font-size: 26px; font-weight: 800; background: var(--card); }
.keypad .key.del { font-size: 21px; background: var(--paper-2); }
#gate-name-row[hidden], #gate-forgot[hidden], #btn-forgot[hidden] { display: none; }

/* ---------- settings: stacked cardstock, one subject per card ---------- */
.set-card { margin: 12px 0; padding: 12px 14px 14px; border-radius: 16px 20px 15px 19px; }
.set-card h3 { margin: 0 0 2px; }
.set-card > .hint { margin: 8px 0 0; }
.set-card .cta { width: 100%; margin-top: 10px; }
.player-set { border-top: 2px dashed var(--hair); padding-top: 8px; margin-top: 10px; }
.player-set:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.set-label { display: block; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 13px;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 5px; }
.chip-row, .chip-pair { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 0; }
.chip-pair .chip { flex: 1; min-width: 0; }
.chip.danger { color: var(--tomato); }
.chip.danger.active { color: var(--card); background: var(--tomato); }
/* a toggle is a chip that fills when it is on — never a checkbox */
.chip.toggle::before { content: "\25CB"; margin-right: 6px; font-size: 13px; }
.chip.toggle.active::before { content: "\25CF"; }
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.stepper .set-label { margin: 0; flex: 1 0 100%; }
.token.step { width: 44px; height: 44px; font-size: 24px; font-weight: 800; background: var(--paper-2); }
.step-val { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 26px; min-width: 40px;
  text-align: center; font-variant-numeric: tabular-nums; }
#screen-settings .drawer { background: var(--paper-2); margin: 12px 0; }
#screen-settings > .cta.big { margin-top: 6px; }

/* ---------- progress: a card per kid, four tiles, the coach's notes ---------- */
.prog-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prog-who { min-width: 0; flex: 1; }
.prog-who h3 { margin: 0; line-height: 1.1; }
.avatar.sm { width: 46px; height: 46px; font-size: 24px; line-height: 40px; flex-shrink: 0; box-shadow: 0 3px 0 var(--ink); }
.prog-cards { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; line-height: 1;
  text-align: center; font-variant-numeric: tabular-nums; }
.prog-cards small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 0 10px; }
.tile { background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 11px 13px 10px 14px; padding: 7px 9px; min-width: 0; }
.tile b { display: block; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile small { display: block; font-size: 11px; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.coach-says { margin: 10px 0; padding: 9px 11px 7px; background: var(--card);
  border: 3px solid var(--grape); border-radius: 12px 15px 11px 14px; }
.coach-says > b { display: inline-block; background: var(--grape); color: var(--card); font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px;
  border: 2.5px solid var(--ink); border-radius: 999px; margin-bottom: 6px; }
.coach-says p { margin: 5px 0 0; font-size: 15px; line-height: 1.35; }
.checklist .check-list { margin: 6px 0 10px; padding-left: 22px; }
.checklist .check-list li { font-size: 16px; font-weight: 700; margin: 4px 0; }

/* ---------- the quiet window is the contract ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- v0.19: cracked cards, pacing, ladder rungs ---------- */
/* A card won on the confession path: still earned, still counted, visibly cracked. A diagonal
   hairline across the art and the word itself, so the crack never relies on colour alone. */
.fig.cracked { position: relative; }
.fig.cracked .art { position: relative; overflow: hidden; }
.fig.cracked .art::after, .why-card.cracked .card-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) calc(50% - .5px),
    var(--card) calc(50% - .5px), var(--card) calc(50% + .5px), transparent calc(50% + .5px)); }
.crack-word { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1.1; }
.why-card.cracked .card-art { position: relative; overflow: hidden; }
.crack-line { margin: 8px 0 0; padding: 6px 10px; border: 2.5px dashed var(--ink); border-radius: 10px 13px 9px 12px;
  background: var(--paper-2); font-weight: 700; font-size: 16px; line-height: 1.25; }
.crack-line.fixed { border-style: solid; background: var(--leaf); color: var(--card); }
.crack-line[hidden] { display: none; }

/* Pacing: the arcade button offers Camp, and the day he picked stays one tap away underneath. */
.cta.big.nudge { font-size: 24px; }
.dock .anyway { display: block; margin: 6px auto 0; font-size: 15px; min-height: 32px; }

/* Ladder days: rungs on the path, not numbered stops. */
.day-chip.ladder .n { border-radius: 10px 12px 9px 13px; font-size: 30px; background:
  repeating-linear-gradient(0deg, transparent 0 13px, #2a211822 13px 16px), var(--card); }
.day-chip.ladder.current .n { background: repeating-linear-gradient(0deg, transparent 0 13px, #2a211833 13px 16px), var(--sun); }
.day-chip.ladder.done .n { background: var(--leaf); color: var(--card); }
.day-chip.ladder.locked .n { background: var(--paper-2); }

/* ============================================================
   v0.20: PLAY. A whole game against Glitch.
   No new kinds of control: the dock gets a second arcade button, the levels are a chip row, and
   Resign is a quiet link rather than a thing a thumb can hit by accident. Nothing here shows a
   number except the move count, and the move count only ever climbs.
   ============================================================ */
.play-row { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.play-row > .cta.play { flex: 1 1 auto; }
.play-row > .chip { flex: 0 0 auto; min-height: 52px; }
.play-row[hidden] { display: none !important; }
/* the second button is his colour, so "play Glitch" reads as going at him, not as another mode */
.cta.play { background: var(--grape); color: var(--card); font-size: 19px; min-height: 52px;
  box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 #5a2c77, inset 0 3px 0 #ffffff33; }
.cta.play:active { box-shadow: 0 2px 0 var(--ink), inset 0 -2px 0 #5a2c77, inset 0 2px 0 #ffffff33; }
/* same weight, not his colour: for second buttons that have nothing to do with Glitch */
.cta.play.ink { background: var(--ink); color: var(--sun); box-shadow: 0 6px 0 #000, inset 0 -5px 0 #120d09, inset 0 3px 0 #ffffff22; }
.cta.play.ink:active { box-shadow: 0 2px 0 #000, inset 0 -2px 0 #120d09, inset 0 2px 0 #ffffff22; }

/* pre-game: who are you playing. The suggested crony is marked, never enforced. */
#pre-glitch { flex-shrink: 0; width: 84px; }
#pre-glitch .glitch-svg { width: 84px; height: 84px; }
.pre-card { margin: 8px auto; max-width: 440px; padding: 12px 14px; border-radius: 16px 20px 15px 19px; }
.pre-card h3 { margin: 0 0 8px; }
.chip-row.levels { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.level { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; padding: 6px 12px; }
.chip.level small { font-family: "Atkinson Hyperlegible", sans-serif; font-size: 11px; color: var(--ink-2); font-weight: 400; }
.chip.level.active small { color: var(--sun); }
/* the suggestion: a pinned tag, so it reads as an offer rather than as the only live control */
.chip.level.suggest { position: relative; border-color: var(--grape); box-shadow: 0 3px 0 var(--grape); }
.chip.level.suggest::after { content: "his pick"; position: absolute; top: -10px; right: -6px; background: var(--grape);
  color: var(--card); border: 2px solid var(--ink); border-radius: 7px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; padding: 0 5px; transform: rotate(-4deg); }

/* in game: the board is the whole screen. The fight furniture stays out of it. */
body[data-play="1"] #powers, body[data-play="1"] .path, body[data-play="1"] #boss,
body[data-play="1"] .gate-dots:empty { display: none; }
.play-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 420px; margin: 8px auto 0; }
.play-foot[hidden] { display: none; }
.move-n { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-2);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.play-foot .link { font-size: 13px; }

/* the game-over card and the review card are trading cards, like every other card in the app */
#over-art, #review-art { min-height: 0; }
.card-name { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .06em; text-transform: uppercase; }
.card-head { display: flex; align-items: center; gap: 8px; }

/* Progress: the Games tile and the blunders-per-game trend. The parent's numbers, not the kid's. */
.prog-bars.blunders i { background: var(--tomato); }
.prog-suggest { margin: 6px 0 2px; font-size: 14px; color: var(--ink-2); }
.prog-suggest b { color: var(--ink); }

/* ============================================================
   VERSUS. The two of them on one phone, with Glitch refereeing.
   Three control kinds only, as everywhere else: the arcade button starts it, chips swap and choose,
   the round token is the top bar. There is no scoreboard here and there is no place to put one: the
   result is two separate cards, one per kid, and neither card knows the other exists.
   ============================================================ */
.versus-row { margin-top: 8px; }
.versus-row > .cta.play { background: var(--tomato); box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 #a3321f, inset 0 3px 0 #ffffff33; }
.versus-row > .cta.play:active { box-shadow: 0 2px 0 var(--ink), inset 0 -2px 0 #a3321f, inset 0 2px 0 #ffffff33; }

/* pre-game: the two seats, and the chip that swaps them. Colours alternate on their own. */
#vs-glitch { flex-shrink: 0; width: 84px; }
#vs-glitch .glitch-svg { width: 84px; height: 84px; }
.vs-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 2px; }
.vs-seat { background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 12px 14px 11px 15px; padding: 8px 10px; min-width: 0; }
.vs-seat .vs-role { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.vs-seat b { display: block; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; }
.vs-seat.white { background: var(--card); }
.vs-seat.black { background: var(--ink); color: var(--card); }
.vs-seat.black .vs-role { color: var(--paper-2); }

/* in game: whose go it is, said in words, because the board has just turned round under them.
   The think meter only fills. It is not a clock, it does not run out, and nothing it shows goes down. */
.versus-turn { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.versus-turn[hidden] { display: none; }
.versus-turn .turn-chip { flex: 0 0 auto; }
.think-meter { flex: 1 1 auto; }
.think-meter i { display: block; height: 11px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 7px; overflow: hidden; }
.think-meter i span { display: block; height: 100%; width: 0; background: var(--grape); }
.think-meter.fill i span { transition: width 30s linear; width: 100%; }

/* the result: one card per kid, stacked, never side by side — a row of two invites a comparison. */
#vs-cards { max-width: 460px; margin: 0 auto; }
.vs-card { margin-bottom: 14px; }
.vs-card .card-head .mascot { font-size: 15px; }
.vs-card .vs-mini { width: 108px; height: 108px; flex-shrink: 0; display: grid; grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr); border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.vs-card .vs-mini div { min-width: 0; min-height: 0; position: relative; }
.vs-card .vs-mini .light { background: var(--sq-light); } .vs-card .vs-mini .dark { background: var(--sq-dark); }
.vs-card .vs-mini .hot { box-shadow: inset 0 0 0 3px var(--sun); }
.vs-card .vs-mini svg { width: 100%; height: 100%; display: block; }
.vs-moment { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 2px; }
.vs-moment p { margin: 0; font-size: 14px; }
.vs-moment .vs-move { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; display: block; }
.vs-none { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.vs-card .actions { margin: 10px 0 0; }
.vs-card .said { margin: 8px 0 0; }

/* ---------- v0.22 family setup and two-phone versus ---------- */
.fam-card { max-width: 360px; margin: 14px auto; display: flex; flex-direction: column; gap: 10px; }
.fam-card[hidden], #fam-me-row[hidden], .live-invite[hidden] { display: none !important; }
.fam-card h3 { margin: 0; }
.fam-card .hint { margin: 0; }
.fam-card.gate-card { text-align: center; }
.fam-card.gate-card.wrong { animation: shake .35s ease; }
.fam-code { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 36px; letter-spacing: 3px;
  text-align: center; padding: 10px 6px; border: 3px dashed var(--ink); border-radius: 14px; background: var(--paper-2);
  user-select: all; white-space: nowrap; overflow-wrap: normal; }
.fam-code.small { font-size: 26px; letter-spacing: 2px; padding: 6px; }
#fam-code-input { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: 2px; text-transform: uppercase; }
.fam-card .link.fam-alt { align-self: center; font-weight: 700; }
.fam-roster .cta.me { outline: 4px solid var(--grape); outline-offset: 2px; }
.fam-other[hidden] { display: none !important; }
.fam-other { display: flex; flex-direction: column; gap: 10px; }
.fam-roster { display: flex; flex-direction: column; gap: 12px; }
.fam-state { text-align: center; min-height: 1.2em; }
.live-row { margin-top: 8px; }
.live-row > .chip.live { flex: 1 1 auto; min-height: 52px; font-weight: 800; background: var(--grape); color: #fff; }
.live-row > .chip.live:disabled { opacity: .6; }
.live-invite { display: grid; grid-template-columns: 56px 1fr; gap: 4px 10px; align-items: center; margin-top: 10px;
  padding: 10px 12px; border: 3px solid var(--ink); border-radius: 16px 20px 14px 22px; background: var(--card);
  box-shadow: 0 4px 0 var(--ink); animation: shake .5s ease 1; }
.live-invite .li-glitch svg { width: 56px; height: 56px; }
.live-invite .li-line { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.25; }
.live-invite .li-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.live-invite .li-actions .cta { flex: 1 1 auto; }
.live-invite.same { border-color: var(--tomato); }