/* ============================================================
   FAMILY FUN — shared styles for the learning games
   The same neutral system as the other games in the collection,
   in one file so every learning game looks and behaves alike.
   Each page adds only its own pieces in a <style> of its own.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ff: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Noto Serif", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r1:8px; --r2:12px; --r3:18px; --rf:999px;

  --bg:#f4f3f1;
  --surface:#ffffff;
  --sunken:#eceae6;
  --line:#e2dfda;
  --line-strong:#cfcbc4;
  --ink:#17161a;
  --ink-2:#5e5b57;
  --ink-3:#6f6b65;
  --focus:#2563c9;
  --scrim:rgba(23,22,26,.45);
  --shadow:0 12px 32px rgba(23,22,26,.16);
  --press:#eceae6;
  --lift:0 8px 22px -10px rgba(23,22,26,.28);

  --navy:#1f3a5f;
  --gold:#a8741a;
  --card:#fbf5e8;
  --card-line:#d9c496;

  /* Up to six teams. The first two match the other games: blue, then gold. */
  --t1:#2d6ca8; --t1-soft:#e3eef9; --t1-strong:#2d6ca8;
  --t2:#a8741a; --t2-soft:#fcf1d2; --t2-strong:#8a5f12;
  --t3:#2f8a4f; --t3-soft:#e2f3e7; --t3-strong:#2a7a46;
  --t4:#b8417f; --t4-soft:#f8e4ef; --t4-strong:#a8336f;
  --t5:#7651b5; --t5-soft:#eee8f8; --t5-strong:#7651b5;
  --t6:#1d8584; --t6-soft:#dff2f1; --t6-strong:#17706f;
  --on-team:#ffffff;

  --good:#2f8a4f; --good-soft:#e2f3e7;
  --hot:#c2412d;  --hot-soft:#fbe6e3;
  /* An outline that keeps white things visible in light mode and black ones in dark */
  --edge:rgba(23,22,26,.25);
  --seg-on:#ffffff;

  --dur:160ms;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --surface:#1b1b1e; --sunken:#111113; --line:#2e2e33; --line-strong:#3d3d44;
    --ink:#f2f1ee; --ink-2:#a5a29c; --ink-3:#8c8983; --focus:#7fa8f0;
    --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5);
    --press:#26262b; --lift:0 8px 22px -10px rgba(0,0,0,.7);
    --navy:#a9c3e6; --gold:#dcab4f; --card:#1e1a15; --card-line:#4d412b;
    --t1:#6ea5de; --t1-soft:#15253a; --t1-strong:#6ea5de;
    --t2:#dcab4f; --t2-soft:#2b2312; --t2-strong:#dcab4f;
    --t3:#6cc28a; --t3-soft:#13291b; --t3-strong:#6cc28a;
    --t4:#e483b6; --t4-soft:#36172a; --t4-strong:#e483b6;
    --t5:#ad8fe6; --t5-soft:#241b36; --t5-strong:#ad8fe6;
    --t6:#5cc4c1; --t6-soft:#102b2b; --t6-strong:#5cc4c1;
    --on-team:#121214;
    --good:#6cc28a; --good-soft:#13291b;
    --hot:#ec7a66;  --hot-soft:#33171a;
    --edge:rgba(255,255,255,.45); --seg-on:#2e2e35;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121214; --surface:#1b1b1e; --sunken:#111113; --line:#2e2e33; --line-strong:#3d3d44;
  --ink:#f2f1ee; --ink-2:#a5a29c; --ink-3:#8c8983; --focus:#7fa8f0;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5);
  --press:#26262b; --lift:0 8px 22px -10px rgba(0,0,0,.7);
  --navy:#a9c3e6; --gold:#dcab4f; --card:#1e1a15; --card-line:#4d412b;
  --t1:#6ea5de; --t1-soft:#15253a; --t1-strong:#6ea5de;
  --t2:#dcab4f; --t2-soft:#2b2312; --t2-strong:#dcab4f;
  --t3:#6cc28a; --t3-soft:#13291b; --t3-strong:#6cc28a;
  --t4:#e483b6; --t4-soft:#36172a; --t4-strong:#e483b6;
  --t5:#ad8fe6; --t5-soft:#241b36; --t5-strong:#ad8fe6;
  --t6:#5cc4c1; --t6-soft:#102b2b; --t6-strong:#5cc4c1;
  --on-team:#121214;
  --good:#6cc28a; --good-soft:#13291b;
  --hot:#ec7a66;  --hot-soft:#33171a;
  --edge:rgba(255,255,255,.45); --seg-on:#2e2e35;
  color-scheme:dark;
}
/* Anything tagged with a team picks up that team's colours. */
[data-team="0"]{--tc:var(--t1);--tc-soft:var(--t1-soft);--tc-strong:var(--t1-strong)}
[data-team="1"]{--tc:var(--t2);--tc-soft:var(--t2-soft);--tc-strong:var(--t2-strong)}
[data-team="2"]{--tc:var(--t3);--tc-soft:var(--t3-soft);--tc-strong:var(--t3-strong)}
[data-team="3"]{--tc:var(--t4);--tc-soft:var(--t4-soft);--tc-strong:var(--t4-strong)}
[data-team="4"]{--tc:var(--t5);--tc-soft:var(--t5-soft);--tc-strong:var(--t5-strong)}
[data-team="5"]{--tc:var(--t6);--tc-soft:var(--t6-soft);--tc-strong:var(--t6-strong)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

html,body{height:100%}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit;color:inherit}

:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r1)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.nw{white-space:nowrap}
.num-t{font-variant-numeric:tabular-nums}

/* ============================================================
   VIEWS
   ============================================================ */
.view{
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s5) var(--s4) var(--s6);gap:var(--s5);
}
.wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--s5)}

/* Buttons ---------------------------------------------------- */
.btn{
  font-family:inherit;font-size:1rem;font-weight:700;
  padding:var(--s3) var(--s5);min-height:48px;
  border-radius:var(--r2);border:1px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--ink);color:var(--bg);width:100%}
.btn-team{background:var(--tc-strong);color:var(--on-team);width:100%}
.btn-good{background:var(--good);color:var(--on-team)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-quiet{
  background:none;color:var(--ink-2);border:0;font-size:.875rem;font-weight:700;
  padding:var(--s2) var(--s3);min-height:40px;border-radius:var(--r1);
}
.btn.big{min-height:68px;font-size:1.375rem;font-weight:800}
/* Hover only for a real mouse, so a tapped button doesn't stay lit on a tablet */
@media (hover:hover){
  .btn-primary:hover:not(:disabled){background:var(--ink-2)}
  .btn-team:hover:not(:disabled),.btn-good:hover:not(:disabled){filter:brightness(1.12)}
  .btn-secondary:hover:not(:disabled){background:var(--sunken);border-color:var(--line-strong)}
  .btn-quiet:hover:not(:disabled){color:var(--ink);background:var(--sunken)}
}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.row{display:flex;gap:var(--s2)}
.row .btn{flex:1;padding-left:var(--s3);padding-right:var(--s3)}

/* Key hints: only where there is a mouse, so a keyboard is likely */
.kb,h3.kb-only,ul.kb-only,p.kb-only{display:none}
@media (hover:hover) and (pointer:fine){
  .kb{
    display:inline-block;margin-left:.6em;min-width:1.8em;padding:0 .4em;border-radius:5px;
    border:1px solid currentColor;font-family:var(--ff);font-size:max(.75rem,.6em);font-weight:800;
    line-height:1.45;text-align:center;vertical-align:.1em;opacity:.8;
  }
  h3.kb-only,p.kb-only{display:block}
  ul.kb-only{display:flex}
}

/* ============================================================
   MENU
   ============================================================ */
.home{align-self:flex-start;margin:calc(-1 * var(--s2)) 0 0 calc(-1 * var(--s3))}

.masthead{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.crest{display:block;width:150px;height:auto}
.masthead h1{
  font-size:clamp(1.75rem,7.5vw,2.375rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;text-wrap:balance;
}
.lede{color:var(--ink-2);font-size:.9375rem;max-width:34ch}
.teaches{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s2);
  margin-top:var(--s1);list-style:none;
}
.teaches li{
  padding:2px 10px;border-radius:var(--rf);background:var(--surface);border:1px solid var(--line);
  font-size:.75rem;font-weight:700;color:var(--ink-2);
}
.opening{
  margin-top:var(--s2);max-width:36ch;text-align:left;
  padding:var(--s1) 0 var(--s1) var(--s3);border-left:2px solid var(--gold);
  font-size:.875rem;font-style:italic;font-weight:600;color:var(--ink-2);line-height:1.55;
}
.opening cite{display:block;margin-top:var(--s1);font-size:.8125rem;font-style:normal;font-weight:700;color:var(--ink-2)}

/* A game left unfinished */
.resume{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s3) var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);
}
.resume > div{flex:1;min-width:0}
.resume .label{margin:0 0 2px}
.resume-score{font-size:.9375rem;font-weight:700}
.resume .btn{flex:none}

form{display:flex;flex-direction:column;gap:var(--s5)}
fieldset{border:0;min-width:0}
legend,.label{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:var(--s2);padding:0;
}
.hint{font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-top:var(--s2)}

.input{
  flex:1;min-width:0;width:100%;padding:var(--s3) var(--s4);
  font-size:1rem;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color var(--dur) var(--ease);
}
.input::placeholder{color:var(--ink-3);font-weight:400}
.input:focus-visible{border-color:var(--focus);outline-offset:1px}
@media (hover:hover){ .input:hover{border-color:var(--line-strong)} }
textarea.input{resize:vertical;min-height:96px;line-height:1.5}
/* Numbers: big, tabular, and the number keypad on phones */
.input.num{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:center}

/* Names of teams or players: one row each, with a colour dot for teams */
.nlist{display:flex;flex-direction:column;gap:var(--s2)}
.nrow{display:flex;align-items:center;gap:var(--s1)}
.nrow .dot{width:12px;height:12px;border-radius:var(--rf);background:var(--tc);flex:none;margin:0 var(--s1)}
.x-btn{
  flex:none;width:40px;height:40px;border:0;border-radius:var(--r1);
  background:none;color:var(--ink-3);font-size:1.25rem;font-weight:700;line-height:1;cursor:pointer;
}
.x-btn:active{background:var(--sunken);color:var(--ink)}
@media (hover:hover){ .x-btn:hover{background:var(--sunken);color:var(--ink)} }
.add{margin-top:var(--s2);margin-left:calc(-1 * var(--s3))}

/* Segmented control on real radios, so keyboard and AT work natively. */
.seg{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:var(--s1);
  background:var(--sunken);border-radius:var(--r2);padding:var(--s1)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:40px;padding:var(--s2) var(--s1);line-height:1.2;
  font-size:.875rem;font-weight:700;color:var(--ink-2);
  border-radius:var(--r1);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media (hover:hover){ .seg label:hover{color:var(--ink)} }
.seg input:checked + label{background:var(--seg-on);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 2px rgba(23,22,26,.08)}
.seg input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}

.switch{
  position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color var(--dur) var(--ease);
}
.switch + .switch{margin-top:var(--s2)}
@media (hover:hover){ .switch:hover{border-color:var(--line-strong)} }
.sw-text{flex:1;min-width:0}
.sw-t{display:block;font-weight:700}
.sw-d{display:block;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sw-track{
  flex:none;position:relative;width:42px;height:26px;border-radius:var(--rf);
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background var(--dur) var(--ease);
}
.sw-track::after{
  content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:var(--rf);
  background:var(--ink-3);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.switch input:checked + .sw-track{background:var(--ink);box-shadow:none}
.switch input:checked + .sw-track::after{background:var(--bg);transform:translateX(16px)}
.switch input:focus-visible + .sw-track{outline:2px solid var(--focus);outline-offset:2px}

/* The title side and the Start button. On phones they stack with the
   settings in between; on wide screens they share the left column. */
.menu-side,.menu-go{display:flex;flex-direction:column;gap:var(--s5)}
.howto-btn{align-self:center;margin-top:calc(-1 * var(--s3))}
.menu-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s2);margin-top:calc(-1 * var(--s3))}
.menu-links .howto-btn{margin-top:0}

.deck{border-top:1px solid var(--line);padding-top:var(--s4)}
.deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s1)}
.deck-head .label{margin:0}
.deck p{font-size:.875rem;font-weight:600;color:var(--ink-2)}

/* What to gather before you start */
.needs{
  padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
}
.needs .label{display:block;margin-bottom:var(--s1)}
.needs ul{padding-left:1.1em;display:flex;flex-direction:column;gap:2px;font-size:.875rem;color:var(--ink-2)}

/* ============================================================
   GAME
   ============================================================ */
#game{gap:var(--s4);padding-top:var(--s4)}
.topbar{width:100%;max-width:440px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topbar h1{font-size:.9375rem;font-weight:800;letter-spacing:-.01em;text-align:center}
.topbar > :first-child{justify-self:start}
.topbar > :last-child{justify-self:end}

/* Scores along the top: two teams face each other; more sit in a row */
.scoreboard{width:100%;max-width:440px;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--s2)}
.team{
  min-width:0;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.scoreboard[data-n="2"] .team + .team{flex-direction:row-reverse;text-align:right}
.team .dot{width:10px;height:10px;border-radius:var(--rf);background:var(--tc);flex:none}
.team .t-name{
  flex:1;min-width:0;font-size:.875rem;font-weight:700;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.team .t-score{font-size:1.5rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.team[data-active="true"]{border-color:var(--tc);background:var(--tc-soft);box-shadow:inset 0 0 0 1px var(--tc)}
.team[data-active="true"] .t-name{color:var(--ink)}
/* Three or more: name above score, so the chips stay narrow */
.scoreboard.many .team{flex-direction:column;align-items:stretch;gap:0;padding:var(--s1) var(--s2);text-align:center}
.scoreboard.many .team .dot{display:none}
.scoreboard.many .team .t-name{font-size:.75rem;border-bottom:3px solid var(--tc);padding-bottom:2px}
.scoreboard.many .team .t-score{font-size:1.25rem}
/* Four to six teams on a phone: two rows */
@media (max-width:599px){ .scoreboard.many{grid-template-columns:repeat(var(--n-small,3),minmax(0,1fr))} }

.panel{width:100%;max-width:440px;flex:1;display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
.step{display:flex;flex-direction:column;gap:var(--s4)}
/* A 16-letter team name in big type still wraps inside its column */
.step,.sheet{overflow-wrap:anywhere}
.step h2{font-size:1.375rem;font-weight:800;line-height:1.25;text-wrap:balance}
.lead{font-size:1rem;color:var(--ink-2)}
.center{text-align:center}

.cover{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s5);text-align:center;
  background:var(--tc-soft,var(--surface));border-radius:var(--r3);
}
.kicker{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-strong,var(--ink-2));
}
.kicker .dot{width:10px;height:10px;border-radius:var(--rf);background:var(--tc);flex:none}

.tip{
  padding:var(--s3) var(--s4);font-size:.875rem;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
}
.tip .label{display:block;margin-bottom:2px}
.left{font-size:.8125rem;font-weight:700;color:var(--ink-2);text-align:center}
/* The buttons beside the card or timer on wide screens; on phones they
   just carry on down the column. */
.side{display:contents}

/* A card in the style of the printed ones: cream stock and a dashed cut line */
.paper{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s5);
  background:var(--card);border:1.5px dashed var(--card-line);border-radius:var(--r3);
}
.paper-top{
  display:flex;align-items:center;gap:var(--s3);
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}
.paper-top .num{margin-left:auto;font-weight:700;letter-spacing:.02em}
.paper-title{font-family:var(--serif);font-size:1.625rem;font-weight:700;line-height:1.2;color:var(--navy);text-wrap:balance}

/* Timer ring */
.stage{position:relative;align-self:center;width:min(220px,62vw);aspect-ratio:1}
.timer{position:absolute;inset:0}
.timer svg{display:block;width:100%;height:100%}
.ring-track{fill:none;stroke:var(--sunken);stroke-width:10}
.ring-fill{
  fill:none;stroke:var(--tc,var(--t1));stroke-width:10;stroke-linecap:butt;
  stroke-dasharray:1;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;
  transition:stroke-dashoffset 120ms linear,stroke var(--dur) var(--ease);
}
.clock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.timer[data-low="true"] .ring-fill{stroke:var(--hot)}
.timer[data-low="true"] .clock{color:var(--hot)}
.timer[data-paused="true"] .clock{opacity:.45}

.plus{font-size:3rem;font-weight:800;line-height:1;color:var(--tc-strong,var(--good))}
.reveal-line{text-align:center;font-size:1.25rem;font-weight:800;line-height:1.3;color:var(--tc-strong,var(--ink))}
.reveal-line[data-none="true"]{color:var(--ink-2)}

/* A big speaker button: everything a non-reader needs is read aloud */
.say-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
}
.say-btn svg{width:1.25em;height:1.25em;flex:none}

/* Bar chart: tallies and results */
.bars{display:flex;flex-direction:column;gap:var(--s2)}
.bar{display:grid;grid-template-columns:var(--bar-name,7.5em) 1fr auto;align-items:center;gap:var(--s3)}
.bar .b-name{font-weight:700;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .b-track{display:block;height:20px;border-radius:var(--rf);background:var(--sunken);overflow:hidden}
.bar .b-fill{display:block;height:100%;width:0;border-radius:var(--rf);background:var(--tc,var(--ink));transition:width 300ms var(--ease)}
.bar .b-val{min-width:2ch;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ============================================================
   DIALOGS
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
  background:var(--scrim);
}
.sheet{
  width:100%;max-width:400px;
  max-height:calc(100vh - 2 * var(--s4));max-height:calc(100dvh - 2 * var(--s4));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5);box-shadow:var(--shadow);
  animation:rise 200ms var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.sheet h2{font-size:1.375rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.sheet .sub{color:var(--ink-2);margin-top:var(--s1);font-size:.9375rem;font-weight:600}
.sheet .actions{display:flex;gap:var(--s2);margin-top:var(--s5);flex:none}
.sheet .actions .btn{flex:1}
/* The scrollbar sits in the sheet's padding instead of against the content. */
.scroll{
  overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:var(--s4);
  margin-right:calc(-1 * var(--s4));padding-right:var(--s4);
}
.verse{
  padding-left:var(--s3);border-left:2px solid var(--gold);
  font-size:.9375rem;font-weight:700;font-style:italic;line-height:1.55;color:var(--ink-2);
}
.verse cite{display:block;margin-top:var(--s1);font-size:.875rem;font-style:normal;font-weight:800;color:var(--t2-strong)}

/* Scores */
.srows{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.srow{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s2) var(--s2) var(--s3);background:var(--sunken);border-radius:var(--r2);
}
.srow .dot,.frows .dot{width:10px;height:10px;border-radius:var(--rf);background:var(--tc);flex:none}
.srow .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sc{min-width:2.2ch;text-align:center;font-size:1.375rem;font-weight:800;font-variant-numeric:tabular-nums}
.icon-btn{
  flex:none;width:40px;height:40px;border-radius:var(--r1);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  font-size:1.25rem;font-weight:800;line-height:1;
}
@media (hover:hover){ .icon-btn:hover:not(:disabled){border-color:var(--line-strong);background:var(--sunken)} }
.icon-btn:disabled{opacity:.4;cursor:not-allowed}

/* Final scores */
.final-head{text-align:center}
.final-head .crest{margin:0 auto var(--s3);width:120px}
.frows{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.frows li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--sunken);
}
.frows .nm{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frows .sc{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.frows li.win{background:var(--tc-soft);box-shadow:inset 0 0 0 2px var(--tc)}

/* How to play */
.howto-body{margin-top:var(--s4)}
.howto-col{display:flex;flex-direction:column;gap:var(--s4)}
.howto-body h3{margin-top:var(--s2)}
.tips b,.steps b{color:var(--ink)}
.steps{padding-left:1.25em;display:flex;flex-direction:column;gap:var(--s2)}
.tips{padding-left:1.1em;display:flex;flex-direction:column;gap:var(--s1);color:var(--ink-2)}

/* ============================================================
   RESPONSIVE + MOTION
   ============================================================ */
@media (max-width:380px){
  .view{padding-top:var(--s4);padding-bottom:var(--s5)}
  .paper{padding:var(--s4)}
  .paper-title{font-size:1.5rem}
  .cover{padding:var(--s4)}
  .sheet{padding:var(--s4)}
  .clock{font-size:3rem}
}

/* Touch: no double-tap zoom on the play area, and finger-sized targets */
#game,.scrim{touch-action:manipulation}
@media (pointer:coarse){
  .btn-quiet{position:relative}
  .btn-quiet::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
  .icon-btn,.x-btn{width:48px;height:48px}
  .seg label{min-height:44px}
}

/* ============================================================
   TABLETS AND COMPUTERS
   Guarded by width and height, so phones (landscape too) keep
   the layout above. The family reads these screens from the
   sofa: type grows with the screen, and the game fills the
   window without scrolling.
   ============================================================ */
@media (min-width:700px) and (min-height:600px){
  /* Menu: a wider single column on a portrait tablet */
  #menu{padding:var(--s6) var(--s5)}
  #menu .wrap{max-width:600px}
  .crest{width:180px}
  .masthead h1{font-size:2.75rem}
  .lede{font-size:1.0625rem;max-width:40ch}
  .opening{font-size:.9375rem}
  .teaches li{font-size:.8125rem}
  .menu-go .btn-primary{min-height:60px;font-size:1.25rem;font-weight:800}

  /* Game: exactly one window tall */
  #game{height:100vh;height:100dvh;min-height:0;padding:var(--s4) var(--s5) var(--s5);gap:var(--s4)}
  .topbar,.scoreboard,.panel{max-width:800px}
  .topbar .btn-quiet{font-size:1rem;min-height:44px;padding:var(--s2) var(--s4)}
  .topbar h1{font-size:1.125rem}
  .scoreboard{gap:var(--s3)}
  .team{gap:var(--s3);padding:var(--s2) var(--s4)}
  .team .dot{width:14px;height:14px}
  .team .t-name{font-size:clamp(1.0625rem,.25rem + 2vmin,1.625rem)}
  .team .t-score{font-size:clamp(2rem,.75rem + 3.4vmin,3.25rem)}
  .scoreboard.many .team{padding:var(--s2) var(--s3)}
  .scoreboard.many .team .t-name{font-size:clamp(.875rem,.25rem + 1.4vmin,1.25rem)}
  .scoreboard.many .team .t-score{font-size:clamp(1.5rem,.5rem + 2.6vmin,2.5rem)}
  .panel{min-height:0}
  .step h2{font-size:clamp(1.625rem,3.75vmin + 3px,2.75rem)}
  .lead{font-size:clamp(1.125rem,1.7vmin + 8px,1.625rem)}
  .kicker{font-size:clamp(.9375rem,1vmin + 9px,1.375rem)}
  .kicker .dot{width:14px;height:14px}
  .cover{padding:var(--s6);gap:var(--s3)}
  .tip{font-size:clamp(1rem,.7vmin + 11px,1.25rem);padding:var(--s3) var(--s5)}
  .left{font-size:clamp(.9375rem,.5vmin + 12px,1.125rem)}
  #game .hint{font-size:clamp(.9375rem,.8vmin + 10px,1.25rem)}
  .panel .btn{min-height:clamp(56px,6vmin,68px);font-size:clamp(1.125rem,.8vmin + 13px,1.375rem)}
  .panel .btn.big{min-height:clamp(68px,10vmin,96px);font-size:clamp(1.5rem,2.6vmin + 8px,2.25rem)}
  .paper{padding:clamp(24px,2.6vmin,36px) clamp(32px,3.4vmin,44px) clamp(32px,3.4vmin,44px);gap:var(--s4)}
  .paper-top{font-size:clamp(.875rem,.6vmin + 10px,1.0625rem)}
  .paper-title{font-size:clamp(1.875rem,6vmin - 5px,3.75rem)}
  .reveal-line{font-size:clamp(1.5rem,4.2vmin - 1px,2.75rem)}
  .plus{font-size:clamp(3.5rem,1.5rem + 6vmin,6rem)}
  .bar{gap:var(--s4)}
  .bar .b-name{font-size:clamp(1rem,.6vmin + 11px,1.25rem)}
  .bar .b-track{height:clamp(20px,3vmin,32px)}
  .bar .b-val{font-size:clamp(1.125rem,1vmin + 11px,1.5rem)}

  /* The timer. Browsers without container queries size it from the window. */
  .stage{width:clamp(220px,min(80vw - 48px,100vh - 540px),480px)}
  .clock{font-size:calc(clamp(220px,min(80vw - 48px,100vh - 540px),480px) * .26)}

  /* Dialogs */
  .sheet{max-width:520px;padding:var(--s6)}
  .sheet h2{font-size:1.75rem}
  .sheet .sub{font-size:1.0625rem}
  .srow .nm{font-size:1.125rem}
  .srow .sc{font-size:1.875rem}
  .srow .dot,.frows .dot{width:14px;height:14px}
  .icon-btn{width:48px;height:48px}
  #final .sheet{max-width:600px}
  #final h2{font-size:clamp(1.75rem,1rem + 2.2vmin,2.5rem)}
  .final-head .crest{width:150px}
  .frows li{padding:var(--s3) var(--s5)}
  .frows .nm{font-size:1.25rem}
  .frows .sc{font-size:clamp(2rem,1rem + 2.6vmin,2.75rem)}
  #howto .sheet{max-width:680px}
  .howto-body{font-size:1rem}
}
/* A step marked .fill gives its .stage all the height that is left */
@supports (container-type:size){
  @media (min-width:700px) and (min-height:600px){
    .step.fill{flex:1 1 auto;min-height:0}
    .step.fill .stage{
      flex:1 1 0;min-height:160px;width:100%;aspect-ratio:auto;align-self:stretch;
      container-type:size;--ring:min(100cqw,100cqh,760px);
    }
    .step.fill .timer{inset:0;margin:auto;width:var(--ring);height:var(--ring)}
    .step.fill .clock{font-size:calc(var(--ring) * .26)}
  }
}

/* Landscape tablets and laptops: the card, cover or timer on the left,
   the words and buttons beside it on the right. */
@media (min-width:760px) and (min-height:600px) and (orientation:landscape){
  .topbar,.scoreboard,.panel{max-width:1240px}
  .step{
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(32px,4vw,64px);row-gap:0;align-items:center;
  }
  .step > *{grid-column:2}
  .step > .hero{grid-column:1;grid-row:1 / -1}
  .step > .top{grid-row:2;margin-bottom:var(--s4)}
  .step > .side{grid-row:3;display:flex;flex-direction:column;gap:var(--s4)}
  .step > .hero:first-child + .side{grid-row:2 / 4}
  /* A step with no .hero stays one centred column */
  .step.single{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4);max-width:720px;width:100%;margin:0 auto}
  .step.single > .side{display:contents}
  .step.fill{grid-template-columns:minmax(0,1fr) minmax(300px,min(480px,42%))}
  .step.fill .stage{justify-self:center}
  .stage{width:clamp(220px,min(46vw - 40px,100vh - 250px),560px)}
  .clock{font-size:calc(clamp(220px,min(46vw - 40px,100vh - 250px),560px) * .26)}
  #howto .sheet{max-width:880px}
  #howto .howto-body{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);align-items:start}
  .howto-col > h3:first-child{margin-top:0}
}
@supports (container-type:size){
  @media (min-width:760px) and (min-height:600px) and (orientation:landscape){
    .step.fill .stage{justify-self:stretch;min-height:0}
  }
}

/* Menu on wide screens: title and Start on the left, settings on the right */
@media (min-width:960px) and (min-height:600px){
  #menu .wrap{
    max-width:1040px;display:grid;justify-content:center;align-items:start;
    grid-template-columns:minmax(0,420px) minmax(0,520px);grid-template-rows:auto 1fr auto;
    column-gap:clamp(40px,6vw,96px);row-gap:var(--s5);
  }
  .menu-side{grid-column:1;grid-row:1}
  .menu-go{grid-column:1;grid-row:2}
  #setup{grid-column:2;grid-row:1 / 3}
  .deck{grid-column:2;grid-row:3}
  .crest{width:200px}
  .masthead h1{font-size:clamp(2.375rem,1.2rem + 2.2vw,3.25rem)}
  .menu-go .btn-primary{min-height:64px;font-size:1.375rem}
  .nlist.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
}
/* Short laptop windows: keep Start in view when a game is waiting */
@media (min-width:960px) and (min-height:600px) and (max-height:760px){
  .menu-side.has-resume .opening{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   GAME LISTS
   The age-group pages list their games as tiles, like the
   home page does.
   ============================================================ */
.page{min-height:100%;display:flex;justify-content:center;padding:var(--s6) var(--s4) var(--s6)}
.page > .wrap{max-width:560px;gap:var(--s6)}
.page .masthead{align-items:flex-start;text-align:left}
.page .masthead .home{justify-self:start;margin-bottom:var(--s2)}
.page .masthead h1{font-size:clamp(2.125rem,10vw,2.875rem);letter-spacing:-.025em;line-height:1.05}
.page .lede{max-width:40ch;font-size:1rem}
.page .opening{border-left-color:var(--line-strong)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s4);margin-bottom:var(--s3)}
.sec-head .label{margin-bottom:0}
.kbd-hint{display:none;font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.kbd-hint kbd{
  display:inline-block;min-width:1.6em;padding:0 4px;border-radius:4px;text-align:center;
  font-family:var(--ff);font-size:.75rem;font-weight:800;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-bottom-width:2px;
}
@media (hover:hover) and (pointer:fine){ .keys-on .kbd-hint{display:block} }

.games{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.game{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s4) var(--s3) var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  color:inherit;text-decoration:none;
  touch-action:manipulation;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.game:active,.game.is-going{background:var(--press);border-color:var(--ink-3);transform:scale(.985);box-shadow:none}
.game:focus-visible{border-radius:var(--r3)}
.game .art{width:64px;height:64px;flex:none;border-radius:14px;background:var(--sunken);overflow:hidden}
.game .art svg{display:block;width:100%;height:100%}
/* Tile pictures */
.art .a-navy{fill:var(--navy)}
.art .a-gold{fill:var(--gold)}
.art .a-card{fill:var(--card);stroke:var(--card-line);stroke-width:1.2}
.art .a-surface{fill:var(--surface)}
.art .a-sunk{fill:var(--line-strong)}
.art .a-line{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.art .a-thin{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .a-dash{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:3 3;stroke-linecap:round}
.art .a-t1{fill:var(--t1)} .art .a-t2{fill:var(--t2)} .art .a-t3{fill:var(--t3)}
.art .a-t4{fill:var(--t4)} .art .a-t5{fill:var(--t5)} .art .a-t6{fill:var(--t6)}
.art .a-ink{fill:var(--ink)}
.art .a-text{fill:var(--navy);font-family:var(--ff);font-weight:800}
.game .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.game .name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:1.0625rem;font-weight:800;line-height:1.25}
.game .desc{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.game .meta{margin-top:2px;font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.game .go{width:20px;height:20px;flex:none;color:var(--ink-3);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.game.is-going .go{transform:translateX(3px);color:var(--ink)}
@media (hover:hover){
  .game:hover{border-color:var(--ink-3);box-shadow:var(--lift);transform:translateY(-2px)}
  .game:hover .go{transform:translateX(3px);color:var(--ink)}
  .game:hover:active{transform:scale(.985);box-shadow:none}
}
.foot{border-top:1px solid var(--line);padding-top:var(--s4);font-size:.8125rem;font-weight:600;color:var(--ink-3)}
@media (max-width:380px){
  .page{padding-top:var(--s5)}
  .game{gap:var(--s3)}
  .game .art{width:56px;height:56px}
}
@media (min-width:700px) and (min-height:500px){
  .page{padding:clamp(24px,5vh,56px) var(--s6) var(--s6)}
  .page > .wrap{max-width:720px}
  .page .masthead h1{font-size:clamp(3rem,1.5rem + 4vw,4rem)}
  .page .lede{font-size:1.125rem;max-width:46ch}
  .page .label{font-size:.875rem}
  .game{padding:14px 20px 14px 14px;gap:20px}
  .game .art{width:76px;height:76px;border-radius:16px}
  .game .name{font-size:1.25rem}
  .game .desc{font-size:1rem;text-wrap:pretty}
  .game .meta{font-size:.8125rem}
  .game .go{width:24px;height:24px}
  .foot{font-size:.875rem}
}
@media (min-width:960px) and (min-height:500px){
  .page{padding:clamp(16px,3vh,48px) clamp(20px,2.6vw,48px) var(--s6)}
  .page > .wrap{max-width:1400px;gap:clamp(16px,2.6vh,32px)}
  .page .masthead{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:var(--s7);align-items:end;gap:0 var(--s7)}
  .page .masthead > *{grid-column:1}
  .page .masthead .home{margin-bottom:0}
  .page .masthead .lede{max-width:none;margin-top:var(--s1)}
  .page .masthead .opening{grid-column:2;grid-row:1 / span 3;align-self:end;margin-top:0;max-width:44ch}
  .page .masthead h1{font-size:clamp(2.875rem,.5rem + 5.6vh,4.25rem)}
  .games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vh,16px)}
  .games>li{display:flex}
  .game{flex:1;padding:clamp(10px,1.6vh,16px) 16px;padding-left:12px;gap:16px}
  .game .name{font-size:clamp(1.25rem,.6rem + 1.4vh,1.5rem)}
  .game .desc{font-size:clamp(1rem,.55rem + .9vh,1.125rem)}
  .game .go{display:none}
}
@media (min-width:1280px) and (min-height:500px){
  .game{padding-right:20px;gap:20px}
  .game .go{display:block}
}
@media (min-width:960px) and (min-height:900px){
  .game .art{width:84px;height:84px;border-radius:18px}
  .game .meta{font-size:.875rem}
  .page .label,.kbd-hint{font-size:.9375rem}
}
@media (prefers-reduced-motion: reduce){
  .game:active,.game.is-going,.game:hover,.game:hover:active{transform:none}
}

/* ============================================================
   PRINTING
   FF.print() fills #print-area; on paper, only that shows.
   Sizes suit both US Letter and A4.
   ============================================================ */
#print-area{display:none}
@media print{
  @page{margin:12mm}
  /* Paper is always light: these selectors match the dark-mode ones above, so they win */
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    --bg:#ffffff; --surface:#ffffff; --sunken:#eceae6; --line:#e2dfda; --line-strong:#cfcbc4;
    --ink:#17161a; --ink-2:#5e5b57; --ink-3:#6f6b65;
    --navy:#1f3a5f; --gold:#a8741a; --card:#fbf5e8; --card-line:#d9c496;
    --t1:#2d6ca8; --t1-soft:#e3eef9; --t1-strong:#2d6ca8;
    --t2:#a8741a; --t2-soft:#fcf1d2; --t2-strong:#8a5f12;
    --t3:#2f8a4f; --t3-soft:#e2f3e7; --t3-strong:#2a7a46;
    --t4:#b8417f; --t4-soft:#f8e4ef; --t4-strong:#a8336f;
    --t5:#7651b5; --t5-soft:#eee8f8; --t5-strong:#7651b5;
    --t6:#1d8584; --t6-soft:#dff2f1; --t6-strong:#17706f;
    --on-team:#ffffff; --good:#2f8a4f; --good-soft:#e2f3e7; --hot:#c2412d; --hot-soft:#fbe6e3;
    --edge:rgba(23,22,26,.25);
    color-scheme:light;
  }
  html,body{height:auto;background:#fff !important;color:#000}
  body > *:not(#print-area){display:none !important}
  #print-area{display:block;font-family:var(--ff);color:#000;font-size:11pt;line-height:1.4}
  #print-area *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.p-page{break-after:page;page-break-after:always}
.p-page:last-child{break-after:auto;page-break-after:auto}
.p-head{display:flex;align-items:baseline;justify-content:space-between;gap:12pt;border-bottom:1.5pt solid #000;padding-bottom:4pt;margin-bottom:10pt}
.p-head h1{font-size:18pt;font-weight:800;line-height:1.15}
.p-head .p-sub{font-size:9pt;font-weight:700;color:#444;text-align:right}
.p-note{font-size:10pt;color:#333;margin-bottom:8pt}
.p-grid{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:0}
.p-card{
  break-inside:avoid;page-break-inside:avoid;
  border:1pt dashed #888;padding:10pt;min-height:var(--card-h,auto);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.p-big{font-size:var(--big,72pt);font-weight:800;line-height:1}
.p-small{font-size:9pt;color:#444}
.p-lines{display:flex;flex-direction:column;gap:14pt;margin-top:6pt}
.p-lines span{display:block;border-bottom:.75pt solid #999;height:14pt}
.p-table{width:100%;border-collapse:collapse;font-size:10.5pt}
.p-table th,.p-table td{border:.75pt solid #777;padding:5pt 6pt;text-align:left;vertical-align:top}
.p-table th{background:#eee;font-weight:800}
.p-foot{margin-top:10pt;font-size:8.5pt;color:#555}