/* Shared look for the phone, the TV and the host page: "Puzzle studio".
   Warm paper, white cards that stand on a solid coloured edge and sink
   when pressed, one slant (the BDO cut), Archivo for anything shouted and
   Inter for anything read. Tokens and rules are written up in DESIGN.md. */

@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url('/fonts/Archivo-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 900; font-display: swap; src: url('/fonts/Archivo-Black.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('/fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  /* surfaces and ink */
  --white: #ffffff;
  --card: #ffffff;
  --paper: #f8f5ef;      /* the page */
  --well: #efeae1;       /* a sunken area on paper: bar tracks, pressed faces */
  --ink: #1b1d22;
  --ink-2: #4a4f5a;      /* 7.5:1 on paper */
  --ink-3: #626877;      /* 5.1:1 on paper */
  --line: #e4ded3;
  --line-2: #cfc7b9;     /* the edge under a neutral card */
  --line-strong: var(--line-2);
  /* brand */
  --blue: #1c4f9c;       /* structure; white on it 7.9:1 */
  --blue-deep: #153c78;  /* the edge under a blue card */
  --blue-soft: #e3ebf7;
  --red: #ee293d;        /* the cut, the "now" tile, the slash: never text */
  --red-text: #c41e2a;   /* wrong, in words; 5.9:1 on white */
  --red-soft: #fce7e9;
  --ok: #1f7a4d;         /* only ever means right; white on it 5.3:1 */
  --ok-deep: #15563a;
  --ok-soft: #e0f2e6;
  --warn: #946a00;       /* a caution, same ochre as the Decide family */
  --warn-soft: #fbf1d8;
  /* answer options: a colour and a mark each; red is never one of them */
  --o1: #1c4f9c; --o2: #0e7c86; --o3: #f2b134; --o4: #6b4fbb;
  /* round families: Know, Number, Deduce, Place, Word, Find, Decide, Talk */
  --a1: #1c4f9c; --a2: #0e7c86; --a3: #6b4fbb; --a4: #b5470f; --a5: #5b7a1e; --a6: #a8326e; --a7: #946a00; --a8: #334155;
  --g1: #dbe7f8; --g2: #dcefe3; --g3: #f8ebcb; --g4: #f6dde0;  /* Four Groups found colours, ink on each > 12:1 */
  /* type */
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* shape */
  --r-control: 12px;     /* inputs, small buttons */
  --r-tile: 14px;        /* options, buttons, cards */
  --r-sheet: 18px;       /* the score card, big sheets */
  --r-chip: 9px;
  --edge: 5px;           /* the solid edge every pressable card stands on */
  --edge-sm: 3px;
  --cut: 22px;           /* rise of the diagonal over the full width */
  /* motion: the one table shared with the TV (transform and opacity only) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-count: cubic-bezier(.33, 1, .68, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-press: 120ms; --t-small: 240ms; --t-sheet: 450ms; --t-move: 650ms; --t-count: 900ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue-soft); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--ink-3); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* data-accent="n" on any element sets --accent for it and its children */
[data-accent='1'] { --accent: var(--a1); } [data-accent='2'] { --accent: var(--a2); } [data-accent='3'] { --accent: var(--a3); } [data-accent='4'] { --accent: var(--a4); }
[data-accent='5'] { --accent: var(--a5); } [data-accent='6'] { --accent: var(--a6); } [data-accent='7'] { --accent: var(--a7); } [data-accent='8'] { --accent: var(--a8); }
/* data-mark="i" on an option or chip sets --c, the option's colour; the amber one takes dark ink */
[data-mark='0'] { --c: var(--o1); --c-ink: #fff; } [data-mark='1'] { --c: var(--o2); --c-ink: #fff; }
[data-mark='2'] { --c: var(--o3); --c-ink: var(--ink); } [data-mark='3'] { --c: var(--o4); --c-ink: #fff; }

/* ---- The band: a solid header whose bottom edge rises left to right, with the red line riding the slant ---- */
.band { position: relative; background: var(--blue); color: var(--white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.band.fam { background: var(--accent, var(--blue)); }
.band-edge { position: relative; height: 0; }
.band-edge::after { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--cut)); height: calc(var(--cut) + 4px); background: var(--red); clip-path: polygon(0 var(--cut), 100% 0, 100% 4px, 0 calc(var(--cut) + 4px)); }

.logo { display: block; height: 22px; width: auto; }
.logo .word { fill: var(--blue); }
.logo .flag { fill: var(--red); }
.band .logo .word { fill: var(--white); }

/* ---- Pressable things: a white face on a 5 px solid edge; the edge carries the colour ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: var(--r-tile); border: 0; background: var(--blue); color: var(--white); font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 var(--edge) 0 var(--blue-deep); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s; }
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--blue-deep); }
.btn:disabled { background: var(--well); color: var(--ink-3); box-shadow: 0 var(--edge) 0 var(--line-2); cursor: not-allowed; transform: none; }
/* Asleep: sunk on its edge, grey, until there is something to do. Still tappable: a tap says what is missing. */
.btn.asleep { background: var(--well); color: var(--ink-3); transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--line-2); }
.btn.asleep:hover { background: var(--well); }
.btn.ghost { background: var(--card); color: var(--blue); border: 2px solid var(--line); box-shadow: 0 var(--edge) 0 var(--line-2); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.ghost:active { box-shadow: 0 0 0 var(--line-2); }
.btn.quiet { background: transparent; color: var(--blue); min-height: 44px; padding: 0 12px; box-shadow: none; margin-bottom: 0; }
.btn.quiet:hover { background: var(--blue-soft); }
.btn.quiet:active { transform: none; }
.btn.wide { width: 100%; }
.btn.sm { min-height: 44px; font-size: 15px; padding: 0 16px; border-radius: var(--r-control); --edge: var(--edge-sm); }

/* A card you can press: an option, a round to pick, a saved game. --c is its colour. */
.opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); color: var(--ink); text-align: left; font-weight: 600; font-size: 17px; line-height: 1.25; box-shadow: 0 var(--edge) 0 var(--c, var(--line-2)); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s, background-color var(--t-small), border-color var(--t-small), color var(--t-small), opacity var(--t-small); }
.opt:active, .opt.pressed, .opt.is-down { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--c, var(--line-2)); background: var(--well); }
/* The options you did not pick step back while the verdict lands */
.opt.back { opacity: .5; transform: scale(.985); }
.opt.back:disabled { opacity: .5; }
.opt[aria-pressed='true'] { background: var(--well); border-color: var(--ink-2); }
.opt.right { background: var(--ok); border-color: var(--ok); color: var(--white); box-shadow: 0 var(--edge) 0 var(--ok-deep); transform: none; opacity: 1; }
.opt.right .chip.mark { background: var(--white); color: var(--ok); }
.opt.wrong { border-color: var(--red-text); box-shadow: 0 var(--edge) 0 var(--red-text); transform: none; opacity: 1; background: var(--card); }
.opt.second { border-color: var(--o3); box-shadow: 0 var(--edge) 0 var(--o3); }
.opt .verdict-mark { margin-left: auto; width: 24px; height: 24px; flex: none; }
.opt.right .verdict-mark { color: var(--white); }
.opt.wrong .verdict-mark { color: var(--red-text); }
.opt:disabled { cursor: default; }
.opt:disabled:not(.right):not(.wrong):not(.second):not([aria-pressed='true']) { color: var(--ink-3); border-color: var(--line); box-shadow: 0 var(--edge) 0 var(--line); }
.opt:disabled:not(.right):not(.wrong):not(.second):not([aria-pressed='true']) .chip.mark { opacity: .45; }
.opt:disabled:active { transform: none; }
.opt.pass-btn { justify-content: center; min-height: 52px; color: var(--ink-2); font-size: 16px; --c: var(--line-2); }
.opt.slim { min-height: 52px; font-size: 15px; padding: 10px 14px; }

/* Chips: a mark on its option colour, or a pictogram on its family colour */
.chip { width: 38px; height: 38px; border-radius: var(--r-chip); display: grid; place-items: center; flex: none; color: var(--white); }
.chip svg { width: 18px; height: 18px; }
.chip.mark { background: var(--c, var(--line-2)); color: var(--c-ink, #fff); }
.chip.fam { background: var(--accent, var(--blue)); }
.chip.sm { width: 30px; height: 30px; border-radius: 8px; } .chip.sm svg { width: 14px; height: 14px; }
.chip.lg { width: 56px; height: 56px; border-radius: 14px; } .chip.lg svg { width: 30px; height: 30px; }
.chip.on-white { background: rgba(255, 255, 255, .18); }

/* Progress tiles: done solid, the current one red and wider, the rest faint */
.steps { display: flex; gap: 6px; }
.steps i { display: block; flex: 1; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: background-color var(--t-small); }
.steps i.done { background: var(--white); }
.steps i.now { background: var(--red); flex: 1.6; }
.steps.on-paper i { background: var(--line-2); }
.steps.on-paper i.done { background: var(--blue); }
.steps.on-paper i.now { background: var(--red); }

/* The timer ring. countdown() sets --t (1 down to 0) on .timer i and toggles .low on .timer;
   it also writes the seconds left into [data-sec] when one is inside. */
.timer { position: relative; width: 68px; height: 68px; border-radius: 50%; background: var(--card); box-shadow: 0 4px 0 var(--line-2), 0 0 0 2px var(--line); flex: none; }
.timer i { position: absolute; inset: 0; display: block; font-style: normal; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .track { fill: none; stroke: var(--line); stroke-width: 6; }
.timer .arc { fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100px; stroke-dashoffset: calc((1 - var(--t, 1)) * 100px); transition: stroke .3s; }
.timer { transition: opacity var(--t-small); }
.timer.stopped { opacity: .45; }
.timer.low .arc { stroke: var(--red-text); }
.timer .t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 900 24px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; transition: color .3s; }
.timer .t.three { font-size: 19px; } /* 100 s and over */
.timer .t small { display: block; font: 600 13px/1 var(--body); color: var(--ink-3); margin-top: 3px; }
.timer.low .t { color: var(--red-text); }

/* Bars: a track on the well, a fill in the row's colour (--c) that grows left to right */
.bar { position: relative; height: 30px; background: var(--well); border-radius: 7px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--c, var(--blue)); border-radius: 7px; transform-origin: left; }
.bar b { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--white); font-weight: 600; font-size: 13px; }
.bar.thin { height: 10px; border-radius: 4px; } .bar.thin i { border-radius: 4px; }

/* A slanted tag: red means live or evil, the only angle besides the cut */
.tag { display: inline-block; background: var(--red-text); color: var(--white); font: 700 13px/1 var(--body); padding: 6px 10px 6px 14px; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); white-space: nowrap; }

/* Forms */
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0 14px; border: 2px solid var(--line); border-radius: var(--r-control); background: var(--card); font-size: 16px; }
.field textarea { padding: 12px 14px; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field .err { color: var(--red-text); font-size: 14px; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; align-content: center; min-height: 44px; padding-block: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }

/* A rolling value: the old text leaves upward, the new one comes from below, in the same grid cell */
.rl { display: inline-grid; overflow: hidden; vertical-align: bottom; line-height: inherit; }
.rl > span { grid-area: 1 / 1; }
/* Ticks and crosses written with pathLength 1 draw themselves */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Motion: each under 1.2 s, all off under reduced motion */
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .bar i { animation: grow 700ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(200ms + var(--i, 0) * 90ms); }
  .rise { animation: rise 520ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(300ms + var(--i, 0) * 80ms); }
  .drop { animation: drop 480ms cubic-bezier(.2, .8, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}