/* Prompt Guess, "See it before Jev" (/lab/prompt-guess). Desk: the picture and its focus scale as one unit on the left,
   the bench on the right. Phone (under 900px): head, scoreboard, picture, scale, then the four lines, so a round fits
   one screen. The shell's tokens only, and the shell's law: one accent, and here it means you (and, at the reveal, the
   true line's number, filled). The rivals are told
   apart by name and mark, never by colour: Jev a filled ink disc with a J, Haiku a hollow disc with an H, the same two
   marks on the strip, the lines, the tables, the scale, the card and the share image. Hierarchy is ink: numbers --ink,
   labels --ink2, meta --ink3. The other colours are the sage pill (.guess-cta), the site's Create button, and the
   app's amber for credits (.guess-coin, the same as the coin pill in the bar and the app header). The head,
   crumb, about block and status reuse the word race's classes (race-*), restated here. */
.guess-page{--display:"Outfit",var(--ui);--serif:"Lab Serif",Georgia,serif;--rail:179px}
/* The document never scrolls on a desk: the picture fills the left, the bench scrolls inside itself. */
html:has(body.guess-page){height:100%;overflow:hidden}
body.guess-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.guess-page>.pb{flex:none}
.guess{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,32vw,460px);align-items:stretch}

/* ---------- the marks: who is who, by glyph ---------- */
.guess-glyph{display:inline-grid;place-items:center;flex:none;width:14px;height:14px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);font:600 9px/1 var(--mono);font-style:normal;letter-spacing:0;text-transform:none;color:var(--bg)}
.guess-glyph-haiku{border-color:var(--ink2);background:none;color:var(--ink2)}
.guess-you-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:999px;background:var(--accent)}

/* ---------- the unit: picture over its focus scale ---------- */
.guess-field{position:relative;height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--line)}
.guess-frame{flex:1 1 auto;min-height:0;margin:0;padding:24px 32px;display:flex;align-items:center;justify-content:center;container-type:size}
/* As wide as the picture fitted above the scale, never narrower than the scale reads (440px) unless the room is. */
.guess-unit{--ar:1;position:relative;display:flex;flex-direction:column;width:max(min(100cqw,440px),min(100cqw,calc((100cqh - var(--rail)) * var(--ar))));border:1px solid var(--line2);border-radius:8px;background:var(--bg);transition:border-color .3s var(--ease)}
/* The picture: its own shape set before a byte loads, so nothing jumps; the mosaic scaled up without smoothing, so
   zooming in shows no more than the step does. Viewfinder corners sit over it. */
.guess-stage{position:relative;aspect-ratio:var(--ar);width:min(100%,calc((100cqh - var(--rail)) * var(--ar)));margin:0 auto;border-radius:7px 7px 0 0;overflow:hidden;background:var(--surf2);opacity:0;transition:opacity .25s var(--ease)}
.guess-stage.is-ready{opacity:1}
.guess-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.guess-stage.is-mosaic img{image-rendering:crisp-edges;image-rendering:pixelated}
/* The sharp picture fades in over the last mosaic at the reveal. */
.guess-stage img.guess-sharp{image-rendering:auto;opacity:0;transition:opacity .2s linear}
.guess-stage img.guess-sharp.is-on{opacity:1}
.guess-stage::after{content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;opacity:.8;transition:opacity .3s;
  --c:var(--ink2);
  background:
    linear-gradient(var(--c),var(--c)) top left/16px 1.5px,linear-gradient(var(--c),var(--c)) top left/1.5px 16px,
    linear-gradient(var(--c),var(--c)) top right/16px 1.5px,linear-gradient(var(--c),var(--c)) top right/1.5px 16px,
    linear-gradient(var(--c),var(--c)) bottom left/16px 1.5px,linear-gradient(var(--c),var(--c)) bottom left/1.5px 16px,
    linear-gradient(var(--c),var(--c)) bottom right/16px 1.5px,linear-gradient(var(--c),var(--c)) bottom right/1.5px 16px;
  background-repeat:no-repeat}
.guess-stage.is-sharp::after{opacity:0}
/* The buzz moment: your pick flashes the frame's edge and corners in ink, briefly. */
.guess-unit.is-flash{animation:guess-flash .45s var(--ease) 1}
.guess-unit.is-flash .guess-stage::after{--c:var(--ink);opacity:1}
@keyframes guess-flash{0%{border-color:var(--ink)}100%{border-color:var(--line2)}}

/* The focus scale: six steps, coarse to sharp. Each step's numeral and points over a hairline rail; the lit step's rail
   sweeps over its 1.5 s. Under the rail, three fixed rows, one per player (you, Jev, Haiku): each player's one mark
   lands in its own row at its step (yours where you picked, a rival's at its buzz), so neighbours never overprint. */
.guess-race-track{flex:none;height:var(--rail);box-sizing:border-box;padding:10px 14px 6px;border-top:1px solid var(--line2);border-radius:0 0 7px 7px;background:var(--surf)}
.guess-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.guess-cell{position:relative;display:grid;align-content:start;min-width:0;padding-right:6px;color:var(--ink3);transition:color .2s,opacity .2s}
.guess-cell-name{font:400 16px/18px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink2);transition:color .2s}
.guess-cell-pts{font:400 10px/14px var(--mono);letter-spacing:.02em;color:var(--ink3);white-space:nowrap}
.guess-cell-rail{position:relative;height:9px;margin:5px -6px 4px 0;background:linear-gradient(var(--line2),var(--line2)) left bottom/1px 9px no-repeat}
/* The hairline, with a tick at the start of every step (the background above), like a lens's focus scale. */
.guess-cell-rail::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--line2)}
.guess-cell-rail::before{content:"";position:absolute;left:0;bottom:2px;height:3px;width:0;border-radius:2px;background:var(--ink)}
.guess-cell.is-now .guess-cell-name{color:var(--ink)}
.guess-cell.is-now .guess-cell-rail::before{animation:guess-fill var(--step,1.5s) linear var(--into,0ms) 1 forwards}
.guess-cell.is-past .guess-cell-name{opacity:.45}
.guess-cell.is-past .guess-cell-rail::before{width:100%;opacity:.35}
@keyframes guess-fill{from{width:0}to{width:100%}}
.guess-cell-marks{display:grid;grid-template-rows:repeat(3,18px);overflow:visible}
.guess-cell-row{display:flex;align-items:center;min-width:0;overflow:visible}
.guess-mark{display:inline-flex;align-items:center;gap:4px;font:400 11px/16px var(--mono);white-space:nowrap;color:var(--ink2)}
.guess-mark .guess-glyph{width:16px;height:16px;font-size:9px}
.guess-mark-you{color:var(--accent)}
.guess-mark-you::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}
.guess-mark-miss{color:var(--ink3)}
.guess-mark-miss::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}
.guess-mark-who{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guess-mark.is-pulse .guess-glyph{animation:guess-pulse .7s var(--ease) 2}
@keyframes guess-pulse{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
/* Jev's sparkline at the reveal: its belief in the true line at every step it was asked, the sure step in ink. Its
   room is kept from the start (hidden), so the scale never grows when the reveal fills it. */
.guess-cell-spark{position:relative;height:20px;margin-top:4px;visibility:hidden}
.guess-cell-spark i{position:absolute;left:0;bottom:0;width:5px;height:0;border-radius:2px 2px 0 0;background:var(--ink3);transition:height .5s var(--ease)}
.guess-cell.has-jev .guess-cell-spark i{background:var(--ink)}
.guess-cell-spark[data-p]::after{content:attr(data-p);position:absolute;left:9px;bottom:0;font:400 10px/1 var(--mono);color:var(--ink3)}
.guess-track.is-revealed .guess-cell-spark{visibility:visible}
.guess-track.is-revealed .guess-cell-name{opacity:1}
.guess-track.is-revealed .guess-cell-rail::before{display:none}
.guess-track.is-revealed .guess-cell.is-now .guess-cell-name{color:var(--ink2)}
.guess-track.is-revealed .guess-cell.has-you .guess-cell-name{color:var(--ink)}
/* Two lines kept for the foot: a buzz and the replay note can show together, and the scale never grows mid-round. */
.guess-race-foot{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;min-height:32px;margin:2px 0 0}
.guess-buzz{margin:0;font-size:12px;line-height:16px;color:var(--ink2)}
/* The caption names the percentages on the scale; it takes the buzz line's room at the reveal (the buzz line empties
   then), so the foot stays one line and the reveal moves nothing. */
.guess-spark-cap{display:none;margin:0 0 0 auto;font-size:11px;line-height:16px;color:var(--ink3);white-space:nowrap}
.guess-spark-cap.is-on{display:block}

/* ---------- the bench ---------- */
.guess-side{min-width:0;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;padding:16px 24px 48px;background:var(--bg)}
.race-head{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.race-crumb{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 13px/16px var(--display);letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--ink3)}
.race-crumb a{color:var(--ink3);text-decoration:none}
.race-crumb a:hover{color:var(--ink)}
.race-crumb .race-all{margin-left:auto}
.race-head h1{margin:0;font:500 28px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.race-says{margin:6px 0 0;font:400 16px/1.45 var(--serif);color:var(--ink2)}
.race-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.race-status{min-height:0;margin:8px 0;font-size:14px;color:var(--ink3)}
.race-status:empty{display:none}

/* The scoreboard: ten dots for the day, a restart, and one strip of three cells with running totals and this round's points. */
.guess-board{margin:0 0 16px}
.guess-board-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.guess-dots{display:flex;gap:5px;margin:0;padding:0;list-style:none}
.guess-dots li{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background-color .3s}
.guess-dots li.is-now{background:var(--accent)}
.guess-dots li.is-right{background:var(--ink)}
.guess-dots li.is-wrong{background:var(--ink3)}
.guess-count{flex:none;margin:0;font:400 12px/1 var(--mono);color:var(--ink3);white-space:nowrap}
/* Restart: the shell's plain button (lab-btn), a size smaller. */
.guess-restart{margin-left:auto;min-height:28px;padding:3px 11px;border:1px solid var(--line2);border-radius:6px;background:none;font:400 13px/1 var(--ui);color:var(--ink2);cursor:pointer}
.guess-restart:hover{border-color:var(--ink3);color:var(--ink)}
.guess-restart:focus-visible,.guess-about summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.guess-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surf);overflow:hidden}
.guess-lane{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:10px 12px 12px}
.guess-lane+.guess-lane{border-left:1px solid var(--line)}
/* A rival's chip has its own row under its name, so it is never clipped and both rivals read alike; the numbers sit on
   one line across the three lanes, at the foot of each. */
.guess-lane-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:16px;font:400 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.guess-lane-num{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:auto;white-space:nowrap}
.guess-lane b{font:400 24px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.guess-you b{color:var(--accent)}
.guess-lane.is-asleep b{font:400 13px/28px var(--mono);color:var(--ink3)}
.guess-delta{font:400 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink3);transition:opacity .6s var(--ease)}
.guess-delta:empty{display:none}
.guess-delta.is-fading{opacity:0}
.guess-state{font:400 11px/16px var(--mono);color:var(--ink3)}
.guess-state:empty{display:none}
/* How a rival plays the round, at the end of its label row: live (a dot that breathes), replay (a hollow dot: the
   deck's answers), looking… and asleep. The same small mono words for all four. */
.guess-chip{display:inline-flex;flex-basis:100%;align-items:center;gap:5px;font:400 11px/16px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink3)}
.guess-chip:empty{display:none}
.guess-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--ink3)}
.guess-chip.is-live{--live:#E5484D}
.guess-chip.is-live::before{background:var(--live);animation:guess-breathe 2.4s ease-in-out infinite}
.guess-chip.is-replay::before,.guess-chip.is-mixed::before{background:none;border:1px solid var(--ink3)}
@keyframes guess-breathe{0%,100%{opacity:1}50%{opacity:.3}}
.guess-livenote{flex-basis:100%;margin:0;font-size:12px;line-height:16px;font-style:italic;color:var(--ink3)}
.guess-livenote[hidden]{display:none}
.guess-livenote a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.guess-livenote a:hover{text-decoration-color:var(--ink2)}

/* The sign-in gate: signed out, Restart or Play again after the day's free game asks to sign in instead of starting.
   It sits under the scoreboard; the game on screen keeps playing beside it. */
.guess-gate{margin:0 0 16px;padding:14px 16px 16px;border:1px solid var(--line2);border-radius:8px;background:var(--surf)}
.guess-gate[hidden]{display:none}
.guess-gate [hidden]{display:none}
body.is-locked .guess-board-head,body.is-locked .guess-score,body.is-locked .guess-race-track{display:none}
.guess-gate:focus{outline:none}
.guess-gate:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.guess-gate-title{margin:0 0 6px;font:500 17px/1.3 var(--display);color:var(--ink)}
.guess-gate-text{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--ink2)}
.guess-gate .lab-btn{min-height:38px;padding:7px 16px;font-size:14px;text-decoration:none}
.guess-coins{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.guess-coins[hidden]{display:none}
.guess-coin{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;color:#fbbf24;background:rgba(245,158,11,.1)}
.guess-coins-to{color:var(--ink3)}
.guess-coins-cost{font-size:13px;color:#fbbf24}
.guess-coins.is-spent .guess-coins-to,.guess-coins.is-spent #gate-after-box{display:none}
.guess-coins.is-short .guess-coins-to,.guess-coins.is-short #gate-after-box,.guess-coins.is-short .guess-coins-cost{display:none}
.guess-pay{display:inline-flex;align-items:center;gap:8px}
.guess-pay[hidden]{display:none}
.guess-pay[aria-busy="true"]{opacity:.6;pointer-events:none}
.guess-spent{margin:6px 0 0;font:500 12px/1.4 var(--mono);color:#fbbf24}
.guess-spent[hidden]{display:none}
.guess-peek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:12px 0 0}
.guess-peek[hidden]{display:none}
.guess-again-x{display:none}
.guess-peek img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--surf2);image-rendering:pixelated}
.guess-gate-error{margin:10px 0 0;font-size:13px;color:var(--ink2)}
.guess-gate-error[hidden]{display:none}
.guess-gate.is-in{animation:guess-gate .3s var(--ease) 1}
@keyframes guess-gate{from{opacity:0;transform:translateY(-4px)}}
.guess-lane.is-glow{animation:guess-glow .9s var(--ease) 1}
@keyframes guess-glow{0%{background-color:color-mix(in srgb,var(--ink) 9%,transparent)}100%{background-color:transparent}}

.guess-ask{margin:0 0 12px;font-size:14px;color:var(--ink3)}
.guess-options{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.guess-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;width:100%;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surf);font-size:15px;line-height:1.4;color:var(--ink2);text-align:left;cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.guess-option:hover:not(:disabled){border-color:var(--line2);color:var(--ink)}
.guess-option:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.guess-option:disabled{cursor:default}
.guess-option kbd{grid-row:1/3;align-self:start;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line2);border-radius:5px;font:400 11px/1 var(--mono);color:var(--ink3)}
.guess-option.is-tick{animation:guess-tick .2s var(--ease) 1}
@keyframes guess-tick{0%{transform:scale(1)}35%{transform:scale(.97)}100%{transform:scale(1)}}
.guess-words{grid-column:2}
.guess-tags{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.guess-tags:empty{display:none}
.guess-tag{display:inline-flex;align-items:center;gap:5px;font:400 12px/16px var(--mono);color:var(--ink)}
.guess-tag-you{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.guess-tag.is-wrong,.guess-tag.is-unsure{color:var(--ink3)}
.guess-options.is-waiting .guess-option{opacity:.5}
.guess-options.is-waiting .guess-option.is-you{opacity:1;border-color:var(--accent);color:var(--ink)}
.guess-options.is-done .guess-option{opacity:.55}
.guess-options.is-done .guess-option.is-real,.guess-options.is-done .guess-option.is-you{opacity:1}
.guess-option.is-real{border-color:var(--ink);color:var(--ink)}
/* The true line at the reveal: its number fills with the accent, the digit in --bg. */
.guess-option.is-real kbd{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.guess-option.is-you:not(.is-real){border-color:var(--accent);color:var(--ink)}

/* The reveal: the verdict is the loudest line on the bench for 1.5 s, then settles and the rivals' lines come in. The
   box keeps its height, so the buttons under it never move. */
.guess-reveal{margin:0 0 8px}
.guess-verdict-box{position:relative;min-height:142px;margin:0 0 16px}
.guess-verdict{margin:0 0 12px;font:500 17px/1.3 var(--display);color:var(--ink);transition:font-size .3s var(--ease)}
.guess-verdict-pts{font-variant-numeric:tabular-nums;color:var(--ink3)}
.guess-verdict-pts.is-mine{color:var(--accent)}
.guess-verdict-box.is-loud .guess-verdict{font-size:25px;line-height:1.2}
/* The timing table: a row per player, named by its mark, one self-labelled time each, then the live stamp in small type. */
.guess-timing{width:100%;margin:0 0 8px;border-collapse:collapse;font:400 12px/1.25 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);transition:opacity .3s var(--ease)}
.guess-timing th,.guess-timing td{padding:6px 0 6px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.guess-timing th:first-child{padding-left:0;text-align:left}
.guess-timing thead th{padding-top:0;font:400 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.guess-timing tbody th{font:500 12px/1.25 var(--ui);color:var(--ink)}
.guess-timing-who{display:inline-flex;align-items:center;gap:6px}
.guess-timing-who .guess-you-dot{margin:0 4px}
.guess-timing tbody tr:last-child th,.guess-timing tbody tr:last-child td{border-bottom:0}
.guess-timing tbody td.is-none,.guess-timing tbody td.is-zero{color:var(--ink3)}
.guess-timing tr.is-you td:last-child:not(.is-zero){color:var(--accent)}
.guess-timing-note{margin:0;font:400 11px/1.4 var(--mono);color:var(--ink3);transition:opacity .3s var(--ease)}
.guess-timing-note:empty{display:none}
.guess-verdict-box.is-loud .guess-timing,.guess-verdict-box.is-loud .guess-timing-note{position:absolute;visibility:hidden;opacity:0}
.guess-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guess-reveal .lab-btn,.guess-actions .lab-btn{min-height:38px;padding:7px 16px;font-size:14px}
/* See the full decode: aikizi's primary action, the sage CREATE pill (GuideLayout .gbtn), the one loud thing under the
   table; Next picture stays the plain main button. The label's colour sits on its own span and on every link state, so
   no link rule (visited purple included) repaints it. */
.guess-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:46px;max-width:100%;padding:0 8px 0 18px;border:0;border-radius:999px;font:900 .74rem/1 "JetBrains Mono",var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#1A2620;background:linear-gradient(180deg,#B5C3BD 0%,#8FA29A 50%,color-mix(in oklab,#8FA29A 60%,#2A322E) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(4,19,13,.15),0 1px 0 rgba(4,19,13,.25),0 12px 28px -10px color-mix(in oklab,#8FA29A 75%,transparent);text-decoration:none;cursor:pointer;transition:transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,filter .2s ease}
.guess-cta:link,.guess-cta:visited,.guess-cta:hover,.guess-cta:active{color:#1A2620;text-decoration:none}
.guess-cta::before{content:"";position:absolute;inset:1px;z-index:0;border-radius:inherit;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);opacity:0;transform:translateX(-30%);transition:opacity .25s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.guess-cta>*{position:relative;z-index:1}
.guess-cta .guess-cta-label{color:#1A2620}
.guess-cta .guess-cta-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;flex:0 0 auto;font:400 14px/1 var(--ui);letter-spacing:0;color:color-mix(in oklab,#B5C3BD 75%,#fff);background:radial-gradient(circle at 50% 35%,color-mix(in oklab,#8FA29A 22%,#0F1714) 0%,color-mix(in oklab,#8FA29A 8%,#07100D) 100%);box-shadow:inset 0 1px 1px rgba(4,19,13,.65),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.25)}
.guess-cta:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(4,19,13,.15),0 1px 0 rgba(4,19,13,.25),0 16px 34px -12px color-mix(in oklab,#8FA29A 80%,transparent),0 0 0 6px color-mix(in oklab,#8FA29A 14%,transparent)}
.guess-cta:hover::before{opacity:1;transform:translateX(30%)}
.guess-cta:active{transform:translateY(0);filter:saturate(.95)}
.guess-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:999px}

/* ---------- the day's result ---------- */
/* Finished: the scoreboard's job passes to the card's bar trio. */
.is-finished .guess-board{display:none}
.guess-result{margin:0}
.guess-result-side{display:flex;flex-direction:column}
.guess-result-side .guess-grid{order:-1}
.guess-nums{white-space:nowrap}
.guess-day{margin:0 0 6px;font:400 12px/1.3 var(--mono);color:var(--ink3)}
.guess-headline{margin:0 0 6px;font:500 30px/1.12 var(--display);letter-spacing:-.01em;color:var(--ink)}
.guess-sub{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink2)}
.guess-bars{display:grid;gap:12px;margin:0 0 24px;padding:0;list-style:none}
.guess-bar{--tone:var(--ink3);display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px}
.guess-bar-you{--tone:var(--accent)}
.guess-bar-name{display:inline-flex;align-items:center;gap:6px;font:400 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.guess-bar-name .guess-you-dot{margin:0 4px}
.guess-bar-track{height:8px;border-radius:2px;background:var(--line);overflow:hidden}
.guess-bar-track i{display:block;height:100%;width:100%;border-radius:2px;background:var(--tone);transform:scaleX(var(--w,0));transform-origin:left;animation:guess-bar .8s var(--ease) 1 both}
@keyframes guess-bar{from{transform:scaleX(0)}}
.guess-bar b{min-width:4ch;font:400 17px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.guess-bar-you b{color:var(--accent)}
.guess-bar.is-asleep b{font:400 13px/1 var(--mono);color:var(--ink3)}
.guess-rounds{width:100%;margin:0 0 16px;border-collapse:collapse;font:400 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.guess-rounds th,.guess-rounds td{padding:6px 0;border-bottom:1px solid var(--line);text-align:right}
.guess-rounds th:first-child{text-align:left}
.guess-rounds thead th{font:400 10px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
/* The table's head names the rivals by their marks, as everywhere else. */
.guess-rounds thead th:nth-child(3)::before,.guess-rounds thead th:nth-child(4)::before{display:inline-grid;place-items:center;width:14px;height:14px;margin-right:6px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);vertical-align:middle;font:600 9px/1 var(--mono);letter-spacing:0;color:var(--bg)}
.guess-rounds thead th:nth-child(3)::before{content:"J"}
.guess-rounds thead th:nth-child(4)::before{content:"H";border-color:var(--ink2);background:none;color:var(--ink2)}
.guess-rounds tbody th{font-weight:400;color:var(--ink3)}
.guess-rounds td:nth-child(2):not(.is-zero){color:var(--accent)}
.guess-rounds td.is-zero{color:var(--ink3)}
.guess-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 16px;padding:0;list-style:none}
.guess-grid li{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--surf2)}
.guess-grid a{display:block;width:100%;height:100%;text-decoration:none}
.guess-grid img{display:block;width:100%;height:100%;object-fit:cover}
.guess-grid li.is-mosaic img{image-rendering:crisp-edges;image-rendering:pixelated}
.guess-grid li.is-wrong img{opacity:.35}
.guess-grid-pts{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 4px;padding:12px 4px 4px;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 82%,transparent));font:400 10px/1.25 var(--mono);color:var(--ink2)}
.guess-grid-pts b{flex-basis:100%;font-weight:400;font-size:11px;color:var(--accent)}
.guess-grid li.is-wrong .guess-grid-pts b{color:var(--ink3)}
.guess-grid-rival{display:inline-flex;align-items:center;gap:3px}
.guess-grid-rival .guess-glyph{width:11px;height:11px;font-size:7px}
.guess-grid-rival.is-zero{color:var(--ink3)}
.guess-actions{margin:0 0 8px}
.guess-shared{font-size:13px;color:var(--ink3)}
.guess-again-note{margin:0 0 16px;font-size:12px;line-height:1.5;color:var(--ink3)}
.guess-streak{margin:0 0 4px;font-size:14px;color:var(--ink2)}
.guess-streak a,.guess-more a:not(.lab-btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.guess-streak a:hover,.guess-more a:not(.lab-btn):hover{text-decoration-color:var(--ink)}
.guess-next{margin:0 0 16px;font-size:14px;color:var(--ink3)}
.guess-clock{font-family:var(--mono);color:var(--ink)}
.guess-more{padding-top:12px;border-top:1px solid var(--line)}
.guess-more .lab-btn{text-decoration:none}
.guess-more p{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink2)}

/* How it works: closed by default, so the page ends after the hooks; the words stay in the page for readers and crawlers. */
.race-about{margin:24px 0 0;border-top:1px solid var(--line)}
.guess-about summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font:500 15px/1.2 var(--display);color:var(--ink2);cursor:pointer;list-style:none}
.guess-about summary::-webkit-details-marker{display:none}
.guess-about summary::after{content:"+";font:400 16px/1 var(--mono);color:var(--ink3)}
.guess-about[open] summary::after{content:"−"}
.guess-about summary:hover{color:var(--ink)}
.race-about h2{margin:18px 0 6px;font:500 15px/1.3 var(--display);color:var(--ink)}
.race-about summary+h2{margin-top:2px}
.race-about p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink2)}
.race-about .guess-tally{padding-left:10px;border-left:2px solid var(--line2);font-family:var(--mono);font-size:12px}

/* The undo toast after a restart. */

/* The stage once the day is done (played through or reloaded): the share card, the day and headline over the ten
   pictures as a 5×2 grid, each at the step you saw it. It takes the picture's place, so the left is never an empty
   frame; the bench keeps the bars, actions and table, and its own grid, day and headline give way to it (the bench's
   day and headline stay for screen readers; the card's are hidden from them). */
.guess-card{display:none}
.is-finished .guess-unit{display:none}
.is-finished .guess-card{display:flex;flex-direction:column;gap:16px;width:min(100cqw,960px,calc((100cqh - 200px) * 2.5))}
.guess-card .guess-day{margin:0 0 8px}
.guess-card-line{margin:0;font:500 clamp(28px,3.4cqw,44px)/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.guess-card .guess-grid{gap:8px;margin:0}
.is-finished .guess-result-side .guess-grid{display:none}
.is-finished .guess-result .guess-day,.is-finished .guess-result .guess-headline{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:899px){
  html:has(body.guess-page){height:auto;overflow:auto}
  body.guess-page{display:block;height:auto;overflow:visible}
  .guess-page{--rail:150px}
  /* One column in reading order: head, scoreboard, picture and scale, the four lines, then the rest. */
  .guess{display:flex;flex-direction:column}
  .guess-side{display:contents}
  .guess-side>*{padding-left:16px;padding-right:16px}
  .race-head{order:1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;margin:0;padding-top:12px;padding-bottom:12px;border-bottom:0}
  .race-crumb{flex-basis:100%;margin-bottom:4px}
  .race-head h1{font-size:21px}
  .race-says{margin-top:0;font-size:15px}
  .guess-board{order:2;margin:0 0 12px}
  .guess-gate{order:2;margin:0 16px 12px}
  .guess-board-head{margin-bottom:12px}
  .guess-field{order:3;height:auto;border-right:0;background:none}
  /* The frame is as tall as the picture: at most 32% of the screen high, at most the column wide, so a landscape
     picture leaves no empty band above or below it. */
  .guess-frame{height:auto;padding:0 16px;container-type:inline-size}
  .guess-unit{width:100%}
  .guess-stage{width:min(100%,calc(32svh * var(--ar)))}
  .guess-race-track{padding:8px 10px 4px}
  .guess-cell-name{font-size:14px;line-height:16px}
  .guess-cell-rail{margin:3px -6px 3px 0}
  .guess-cell-marks{grid-template-rows:repeat(3,16px)}
  .guess-cell-spark{height:12px;margin-top:2px}
  .guess-race-foot{min-height:28px;margin-top:0}
  .guess-buzz{font-size:11px;line-height:14px}
  .guess-spark-cap{font-size:10px;line-height:14px}
  .guess-play{order:4;padding-top:8px}
  /* The card in reading order: headline, bars, pictures, table, then the actions and the hooks. */
  .guess-result:not([hidden]){order:5;display:flex;flex-direction:column;padding-top:8px}
  .guess-result-main,.guess-result-side{display:contents}
  .guess-day{order:1}.guess-headline{order:2}.guess-sub{order:3}.guess-bars{order:4}.guess-result-side .guess-grid{order:5}.guess-rounds{order:6}
  .guess-actions{order:7}.guess-again-note{order:8}.guess-streak{order:9}.guess-next{order:10}.guess-more{order:11}
  .race-status{order:6}
  .guess-about{order:7;margin:16px 16px 40px;padding:0}
  .guess-ask{display:none}
  .guess-options{gap:6px}
  .guess-option{font-size:14px;padding:8px 12px}
  .guess-lane{gap:4px;padding:8px 10px 10px}
  .guess-lane b{font-size:20px}
  .guess-verdict-box{min-height:150px}
  .guess-verdict-box.is-loud .guess-verdict{font-size:22px}
  /* After ten rounds the card takes the picture's place, the one grid on the page, then the rest of the result. */
  .is-finished .guess-frame{height:auto;padding:4px 16px 12px;container-type:normal}
  .is-finished .guess-card{width:100%;gap:12px}
  .guess-card-line{font-size:25px}
  .guess-card .guess-grid{gap:6px}
}
/* A phone keeps the strip and the scale on one line each: the round count shortens, the marks lose their words. */
@media (max-width:420px){
  .guess-timing{font-size:11px}
  .guess-timing th,.guess-timing td{padding-left:6px}
  .guess-timing thead th{font-size:9px;letter-spacing:.02em}
  .guess-lane-name{flex-wrap:wrap;row-gap:2px}
  .guess-chip{margin-left:0;font-size:10px}
  .guess-count{font-size:0}
  .guess-count::after{content:attr(data-short);font-size:12px}
  .guess-dots{gap:4px}
  .guess-lane-name{font-size:10px;gap:5px}
  .guess-delta{font-size:11px}
  .guess-spark-cap{display:none}
  .guess-spark-cap.is-on{display:none}
  .guess-cell{padding-right:3px}
  .guess-cell-name{font-size:13px}
  .guess-cell-pts{font-size:9px}
  .guess-mark .guess-glyph{width:15px;height:15px}
  .guess-mark-you,.guess-mark-miss{font-size:10px}
  .guess-grid-pts{font-size:9px;padding:8px 3px 2px}
  .guess-cell-spark[data-p]::after{left:7px;font-size:9px}
  .guess-cell-spark i{width:4px}
  .guess-bar{grid-template-columns:64px minmax(0,1fr) auto}
  .guess-headline{font-size:25px}
}
/* Inside a post on X (<html class="embed-x">, set by the Worker for /lab/prompt-guess?embed=x; X shows it 565 × 424):
   the desk's two panels at card size, whatever the phone rules say. The picture and its scale on the left, the
   bench on the right with the four lines in view; the reveal and the result scroll inside the bench. No bar, no
   crumb, no about; one small link out, since nothing in the card can leave it but a new tab. */
.guess-full{display:none}
/* Only in a frame wide enough for two panels (X on a desk shows 565). A narrower frame, X on a phone's browser,
   keeps the phone's one column, scrolling inside the frame. */
@media (min-width:480px){
  html.embed-x:has(body.guess-page){height:100%;overflow:hidden}
  html.embed-x body.guess-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;--rail:152px}
  html.embed-x .guess{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
  html.embed-x .race-crumb,html.embed-x .guess-about,html.embed-x .guess-ask,html.embed-x .guess-spark-cap,html.embed-x .guess-spark-cap.is-on{display:none}
  html.embed-x .guess-field{order:0;height:100%;border-right:1px solid var(--line);background:var(--bg)}
  html.embed-x .guess-frame{flex:1 1 auto;height:auto;padding:10px;container-type:size}
  html.embed-x .guess-unit{width:min(100cqw,calc((100cqh - var(--rail)) * var(--ar)));min-width:min(100cqw,236px)}
  html.embed-x .guess-stage{width:min(100%,calc((100cqh - var(--rail)) * var(--ar)))}
  html.embed-x .guess-side{display:block;height:100%;overflow:auto;padding:8px 10px 12px}
  html.embed-x .guess-side>*{padding-left:0;padding-right:0}
  html.embed-x .race-head{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;margin:0 0 6px;padding:0 0 6px;border-bottom:1px solid var(--line)}
  html.embed-x .race-head h1{font-size:16px}
  html.embed-x .race-says{margin:0;font-size:12px}
  html.embed-x .guess-full{display:inline-grid;place-items:center;align-self:center;flex:none;width:22px;height:22px;margin-left:auto;border:1px solid var(--line2);border-radius:6px;font:400 12px/1 var(--ui);color:var(--ink2);text-decoration:none}
  html.embed-x .guess-full:hover{border-color:var(--ink3);color:var(--ink)}
  html.embed-x .guess-board{margin:0 0 6px}
  html.embed-x .guess-gate{margin:0 0 8px}
  /* The bench's children lose their side padding here; the card keeps its own. Focus is the card's border. */
  html.embed-x .guess-side>.guess-gate{padding:12px 12px 14px}
  html.embed-x .guess-gate:focus-visible{outline:none;border-color:var(--ink3)}
  html.embed-x .guess-gate-title{font-size:18px;margin:0 0 10px}
  html.embed-x .guess-gate-text{font-size:13px;margin:0 0 10px}
  html.embed-x .guess-gate .guess-cta{height:40px;padding:0 6px 0 16px;font-size:.68rem}
  html.embed-x .guess-gate .lab-btn{min-height:40px;padding:6px 14px}
  /* The result card on the left: the column's width (the frame here is no size container), the headline at card
     size, and each tile only its picture and your points; Jev's and Haiku's sit in the table on the right. */
  html.embed-x .is-finished .guess-frame{justify-content:flex-start;align-items:stretch}
  html.embed-x .is-finished .guess-card{width:100%;min-width:0;gap:12px;margin:auto 0}
  html.embed-x .guess-card .guess-day{margin:0 0 6px;font-size:11px}
  html.embed-x .guess-card-line{font-size:22px;line-height:1.15}
  html.embed-x .guess-card-line .guess-nums{display:block;margin-top:4px;font-size:18px;color:var(--ink2)}
  html.embed-x .guess-card .guess-grid{gap:5px}
  html.embed-x .guess-card .guess-grid-rival{display:none}
  html.embed-x .guess-card .guess-grid-pts{left:auto;right:auto;padding:2px 4px;margin:0 0 3px 3px;border-radius:3px;background:color-mix(in srgb,var(--bg) 78%,transparent)}
  html.embed-x .guess-card .guess-grid-pts b{flex-basis:auto;font-size:10px}
  html.embed-x .guess-card .guess-grid li.is-right{outline:1.5px solid var(--accent);outline-offset:-1.5px}
  html.embed-x .guess-board-head{margin:0 0 6px;gap:8px}
  html.embed-x .guess-restart{min-height:24px;padding:2px 9px;font-size:12px}
  html.embed-x .guess-lane{gap:1px;padding:5px 8px 6px}
  html.embed-x .guess-lane-name{font-size:10px;gap:5px;flex-wrap:wrap;row-gap:2px}
  html.embed-x .guess-chip{margin-left:0;font-size:10px}
  html.embed-x .guess-lane b{font-size:15px}
  html.embed-x .guess-play{padding-top:0}
  html.embed-x .guess-options{gap:5px}
  html.embed-x .guess-option{font-size:12.5px;line-height:1.3;padding:7px 9px;column-gap:8px}
  html.embed-x .guess-option kbd{width:20px;height:20px}
  html.embed-x .is-finished .guess-frame{padding:10px;container-type:normal;overflow:auto}
}
/* X lends the frame web-share but not the clipboard: Share stays, Copy link would only fail. The next game is on
   aikizi.com (the frame never sees the sign-in), so the result has Rematch Jev and Share, nothing under them. */
html.embed-x .guess-actions #copy,html.embed-x .guess-actions #again{display:none}
html.embed-x .guess-again-x{display:inline-flex;height:40px;padding:0 6px 0 16px;font-size:.68rem}
html.embed-x .guess-again-note,html.embed-x .guess-streak,html.embed-x .guess-next,html.embed-x .guess-more{display:none}
/* Reduced motion: no sweep, no flash, no pulse, no glow, no breathing, no tick; the reveal swaps at once. */
@media (prefers-reduced-motion:reduce){
  .guess-stage,.guess-cell,.guess-cell-spark i,.guess-option,.guess-delta,.guess-unit,.guess-verdict,.guess-timing,.guess-timing-note,.guess-dots li,.guess-stage img.guess-sharp{transition:none}
  .guess-cell.is-now .guess-cell-rail::before{animation:none;width:100%;opacity:.5}
  .guess-cta,.guess-cta:hover,.guess-cta:active{transition:none;transform:none}
  .guess-cta::before{display:none}
  .guess-unit.is-flash,.guess-option.is-tick,.guess-lane.is-glow,.guess-mark.is-pulse .guess-glyph,.guess-gate.is-in,.guess-bar-track i,.guess-chip.is-live::before{animation:none}
  .guess-unit.is-flash{border-color:var(--ink)}
}