/* BETWEEN — one stylesheet, no framework, no build step.
 *
 * The first block is the browser-suppression pack from dg-polish §4.3: it is what
 * stops an interactive page reading as a document. Roughly thirty lines, and the
 * report rates it the highest effect-per-line in the whole feel budget.
 */

:root{
  --bg:#0e1118; --panel:#161b26; --panel2:#1d2330; --line:#2a3242;
  --ink:#eef2f9; --mute:#8d97ad; --dim:#5d6678;
  --accent:#ffc247; --accent-d:#d99a1e;
  --hit:#3ddc97; --miss:#ff6b6b;
  --stagger:40ms; --overshoot:cubic-bezier(.22,1.4,.36,1);
  --track-h:100px;
}
@media (prefers-reduced-motion: reduce){
  :root{ --stagger:18ms; --overshoot:cubic-bezier(.3,0,.2,1); }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%; overflow-x:clip; background:var(--bg); color:var(--ink);
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none; -webkit-text-size-adjust:100%;
}
body{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:flex; justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
/* Result and source text is for reading and copying, not for playing on. */
.fact,.rrow,.grade,.hint,.archnote,.nextday{-webkit-user-select:text;user-select:text}

#fx{position:fixed;inset:0;pointer-events:none;z-index:50}

#app{
  width:100%; max-width:440px; min-height:100dvh;
  display:flex; flex-direction:column; padding:0 15px 12px;
}
@supports not (min-height:100dvh){ #app{min-height:100vh} }

/* On a wide screen it stops stretching and becomes the phone-shaped card it is. */
@media (min-width:520px) and (min-height:660px){
  body{align-items:flex-start;padding-top:24px}
  #app{
    min-height:0; width:410px; padding-bottom:18px;
    border:1px solid var(--line); border-radius:22px; background:#0c0f15;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
}

.screen{display:none;flex-direction:column;flex:1}
/* The running total and the round counter belong to a round in progress. The end
   screen states the score itself, twice over; a third copy in the chrome is noise. */
#app:not([data-screen="play"]) .total,
#app:not([data-screen="play"]) #roundlbl{display:none}
#app[data-screen="play"] #play,
#app[data-screen="end"] #end,
#app[data-screen="archive"] #archive{display:flex}

/* ---------- header ---------- */
/* Everything that is not the decision: one line, one size, low contrast. The
   only number that gets any weight here is the running total, because it is the
   one place a score lives during play. */
header{display:flex;align-items:center;gap:7px;padding:9px 0 6px}
.meta{
  flex:1; min-width:0; display:flex; align-items:baseline; gap:7px;
  font-size:10.5px; letter-spacing:.09em; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
}
.meta b{font-weight:800;letter-spacing:.14em;color:var(--mute)}
.meta b i{font-style:normal;color:var(--accent)}
.streak{color:var(--accent);font-weight:800}
.total{
  font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;flex:none;
  line-height:1;padding:0 6px 0 2px;
}
.total.bump{animation:bump 260ms cubic-bezier(.2,.95,.3,1)}
@keyframes bump{0%{transform:scale(var(--bump,1.22));color:var(--accent)}100%{transform:scale(1)}}
.iconbtn{
  background:var(--panel); color:var(--dim); border:1px solid var(--line);
  border-radius:8px; width:30px; height:30px; font-size:13px; cursor:pointer;
  display:grid; place-items:center; flex:none;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-d)}
#mute{font-size:16px}
/* Sound off. A note with a line CUT through it — not a glyph the font may or may
   not have (the old ♪̸ rendered as a plain ♪ here, which is how a toggle ends up
   unreadable). The line is outlined in the button's own colour so the note stays
   legible under it, and it is the MISS red: at thirty pixels colour carries the
   state further than shape does, and no other control in the header is red. */
.iconbtn.off{position:relative;color:var(--ink);border-color:var(--line)}
.iconbtn.off::after{
  content:""; position:absolute; left:6px; right:6px; top:calc(50% + 2px);
  height:1.5px; background:var(--miss); box-shadow:0 0 0 1.5px var(--panel);
  transform:rotate(-34deg);
}

.practice[hidden]{display:none}
.practice{
  display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;
  background:rgba(255,194,71,.09);border:1px solid var(--accent-d);color:var(--accent);
  border-radius:9px;padding:6px 10px;margin-bottom:8px;
}
.practice span{color:var(--mute);letter-spacing:0;flex:1}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;font:inherit;cursor:pointer}

/* ---------- the question ----------
   Three sizes, largest first by a clear margin: what is being asked, the thing
   itself, and the caveat. The caveat is never inside the sentence. */
.board{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.round{font-size:11px;letter-spacing:.11em;color:var(--mute);font-variant-numeric:tabular-nums}

.q{margin:2px 0 11px}
.q .ask{
  display:block;font-size:10.5px;letter-spacing:.17em;font-weight:800;
  color:var(--accent);margin-bottom:3px;
}
.q b{display:block;font-size:clamp(28px,10.5vw,42px);line-height:1.06;font-weight:800;letter-spacing:-.01em}
/* While the six are up there is no thing yet — they are the biggest object on
   the screen, which is correct, because they are the decision. */
.q b:empty{display:none}
.q i{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-top:4px}
.q i:empty{display:none}
/* The name IS the button back to the six. One more control on this screen is
   exactly what we are trying not to spend. */
.q b button.pick{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;border-bottom:2px dashed var(--accent-d);
}
.q b button.pick:disabled{border-bottom-color:transparent;cursor:default}
/* What it pays, at the size the decision deserves — smaller than the thing, but
   not a footnote. */
.q b .mult{font-size:.5em;color:var(--accent);margin-left:.35em;vertical-align:.25em}

/* ---------- the scale ---------- */
.scalewrap{margin:2px 0 0}
#track{
  position:relative; height:var(--track-h); border-radius:13px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  touch-action:none; cursor:pointer; overflow:visible;
}
#track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#track.locked{cursor:default}
.gridline{position:absolute;top:7px;bottom:7px;width:1px;background:var(--line);opacity:.7}

/* Choosing is not aiming. He still stands on the scale holding a span — the
   anchors are half the question — but the surface takes no taps. */
#track.inert{cursor:default;opacity:.72}

/* The other correct answers at the reveal: where they sat, unlabelled. The words
   are in the list below; here they are only positions. */
#ghosts{position:absolute;inset:0;pointer-events:none;z-index:3}
#ghosts b{
  position:absolute;top:10px;bottom:10px;width:2px;margin-left:-1px;
  background:var(--hit);opacity:0;border-radius:2px;transition:opacity 220ms linear;
}
#ghosts.in b{opacity:.42}
#ghosts u{
  position:absolute;top:50%;width:0;height:0;opacity:0;
  border:7px solid transparent;transition:opacity 220ms linear;
}
#ghosts.in u{opacity:.5}
#ghosts u.l{left:-13px;border-right-color:var(--miss);border-left-width:0}
#ghosts u.r{right:-13px;border-left-color:var(--miss);border-right-width:0}

/* Vern stands ON the scale. The canvas fills the track and is the chunky half of
   him; the hairline jaw tips below are the precise half. */
#track canvas.onscale{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  image-rendering:pixelated; image-rendering:crisp-edges;
}


/* The precision half of Vern: the tinted span and his two contact edges. It runs
   from the underside of his beam down to the scale surface, which is exactly the
   length of his jaws — the chunky stems are drawn flush behind these hairlines.
   Transform only, and the origin is the bottom-left so the clamp squashes the
   jaws INTO the scale, the same way his stems do on the canvas. */
#band{
  position:absolute; top:var(--jaw-top,36px); bottom:var(--rule-h,8px); left:0; width:100px; z-index:3;
  transform-origin:0 100%; will-change:transform; opacity:1;
}
/* RESTING: he is on the scale and holding a width from the first frame, but you
   have not chosen this position — so he is visibly not yet the answer. Dimmed,
   never hidden: an invisible instrument cannot teach what it is. */
#band.resting{opacity:.5}
/* The span he has closed on, marked ON the scale rather than filled in like a
   box: a caliper reports a length, and the length is the bar on the surface. */
#band .fill{position:absolute; inset:0; background:rgba(255,194,71,.06)}
#band .fill::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent);
}
/* A hairline, square-ended, sitting exactly on the band boundary. Everything the
   score depends on is this edge, so it is never rounded and never approximated. */
#band .jaw{
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--accent);
  will-change:transform; box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
#band .jaw.l{left:0; transform-origin:0 50%}
#band .jaw.r{right:0; transform-origin:100% 50%}
#band.hit .fill{background:rgba(61,220,151,.12)}
#band.hit .fill::after{background:var(--hit)}
#band.hit .jaw{background:var(--hit)}
#band.miss .fill{background:rgba(255,107,107,.08)}
#band.miss .fill::after{background:var(--miss)}
#band.miss .jaw{background:var(--miss)}

/* The truth arrives. Its motion is the same spring as everything else, driven
   from JavaScript — there is no CSS transition here on purpose. */
#truth{
  position:absolute; top:-12px; bottom:-12px; left:0; width:3px; margin-left:-1.5px;
  opacity:0; z-index:4;
  transform-origin:50% 50%; will-change:transform,opacity; pointer-events:none;
}
/* The mark itself runs the length of his jaws, so it lands inside them or outside
   them and you can see which. It does not cross his face. */
#truth::after{
  content:""; position:absolute; left:0; right:0;
  top:calc(12px + var(--jaw-top,36px)); bottom:calc(12px + var(--rule-h,8px));
  background:var(--ink); border-radius:3px;
}
/* The value reads BELOW the scale. Above it is the question, and the one thing
   that must never be obscured at the reveal is what was being asked. */
#truth::before{
  content:attr(data-v); position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#0e1118; font-size:11px; font-weight:800; white-space:nowrap;
  padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
}
/* HIS OWN READOUT — what a vernier caliper is for, and THE NUMBER BEING BET.
   Everything else on this screen is context for it, so after the question it is
   the largest thing here. It sits under the span and travels with it, because
   the eye is already at the jaws. No label: the numbers are the label.
   It is nowrap and absolutely positioned, so a long pair can never squeeze the
   span or wrap onto a second line; `--fit` (written by `measureReadout` in
   `src/band.js`) is how
   the widest pair the pool can make still fits the track instead of running off
   the edge of the phone. */
.bandval{
  position:absolute; top:100%; left:0; margin-top:6px; z-index:4;
  font-size:24px; font-weight:800; color:var(--accent); line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none;
  will-change:transform; transition:opacity 160ms linear;
}
/* The value itself, so the emphasis below can own `transform` while the box
   keeps the one that positions it. */
.bandval i{
  display:inline-block; font-style:normal;
  transform:scale(var(--fit,1)); transform-origin:50% 50%; will-change:transform;
}
/* It moved because you moved him. A number that changes without appearing to
   change is the feedback loop failing silently. `--peak` is the overshoot, and
   `measureReadout` leaves room for it inside `--fit` — a pop that grows past the
   track is the overflow this element exists to avoid. */
.bandval i.bump{animation:bump 150ms var(--overshoot)}
@keyframes bump{
  from{transform:scale(calc(var(--fit,1) * var(--peak,1)))}
  to{transform:scale(var(--fit,1))}
}
/* Resting: he is holding this span, you have not chosen it. Dimmed, not faint —
   at the old .55 this was the least legible text on the screen. */
#band.resting ~ .bandval{opacity:.75}
/* At the commit the jaws move for the reveal, so what they read stops being what
   you bet — and the truth's own value lands in this spot. */
#track.locked .bandval{opacity:0}
/* And while the six are up there is nothing being claimed at all: a bright pair
   of numbers for a thing you have not chosen is the loudest lie on the screen. */
#track.inert .bandval{opacity:0}

/* The two things you already know. Quiet: they are the ruler, not the question. */
/* The gap clears the readout, which hangs under the track and is now 29 px tall.
   Both this and the tall-phone override below have to move together or the
   anchors ride up into the number on exactly the phones it matters on. */
.anchors{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:44px}
.anchor{font-size:11px;max-width:42%}
.anchor .n{font-weight:600;display:block;line-height:1.25;color:var(--dim)}
.anchor .v{color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.anchor.r{text-align:right}
.logflag{font-size:8.5px;letter-spacing:.12em;color:var(--dim);padding-top:2px}
.logflag[hidden]{display:none}

/* Between rounds the next scale fades under a band that is still travelling,
   so the ten rounds read as one continuous thing rather than ten pages. */
.q,.anchors,.menu{transition:opacity 170ms linear}
#play.swap .q,#play.swap .anchors,#play.swap .menu{opacity:0; transition:opacity 110ms linear}

/* ---------- the menu: six named things, four of them right ----------
   It sits in the slack the reveal will later grow into, so the screen holds one
   decision at a time and the scale never moves between them. */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:11px}
.menu[hidden]{display:none}
.opt{
  display:flex;align-items:center;gap:6px;min-height:46px;width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font:inherit; font-size:12.5px; text-align:left;
  padding:7px 8px; cursor:pointer;
  transition:transform 90ms var(--overshoot);
}
.opt span{flex:1;min-width:0;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.opt i{
  font-style:normal;font-weight:800;font-size:11.5px;color:var(--accent);
  font-variant-numeric:tabular-nums;flex:none;
}
.opt:active{transform:scale(.96)}
.opt:disabled{opacity:.5;cursor:default}

/* ---------- verdict ---------- */
/* No reserved block. The controls are pinned to the thumb zone and everything
   above is pinned to the top, so the reveal grows into the slack between them
   and nothing moves. Reserving height here only widened the hole. */
.verdict{margin-top:9px}
.vline{font-size:18px;font-weight:800;opacity:0;transform:translateY(6px)}
.vline.in{opacity:1;transform:none;transition:opacity 180ms linear,transform 260ms var(--overshoot)}
.vline.hit{color:var(--hit)} .vline.miss{color:var(--miss)}
.fact{font-size:12.5px;color:var(--mute);margin-top:6px;opacity:0;transition:opacity 260ms linear}
.fact.in{opacity:1}
.fact .rangeflag{color:var(--accent);display:block;margin-top:3px}
/* Where the number came from matters for trust and does not matter while you are
   reading your result. It is one tap away, not two lines of grey. */
.fact .src{display:block;margin-top:5px;font-size:10.5px;color:var(--dim)}
.fact .src summary{
  cursor:pointer;list-style:none;display:inline-block;
  letter-spacing:.1em;border-bottom:1px dotted var(--line);
}
.fact .src summary::-webkit-details-marker{display:none}
.fact .src[open] summary{margin-bottom:3px}

/* ---------- the five you did not take ----------
   This is the payoff. The reveal is no longer one fact, it is "here is what you
   could have had and what it was worth" — and the obscure right answer you
   walked past is the thing that makes a person want the next round. */
.others{margin-top:9px;font-size:12px;opacity:0;transition:opacity 260ms linear}
.others.in{opacity:1}
.others[hidden]{display:none}
.othead{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--dim);margin-bottom:2px}
.orow{display:flex;align-items:baseline;gap:7px;padding:3px 0;border-top:1px solid var(--line)}
.orow span{flex:1;min-width:0;color:var(--mute);overflow-wrap:anywhere}
.orow em{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px}
.orow i{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;color:var(--dim)}
.orow.in i{color:var(--hit)}
.orow.out i{color:var(--miss)}
.orow.best span{color:var(--ink)}
.orow.best i{color:var(--accent)}

/* The score arrives in the total rather than appearing next to it: you see where
   it went. One spring, stepped by the same loop as everything else. */
#flyscore{
  position:fixed; left:0; top:0; z-index:60; pointer-events:none; opacity:0;
  font-weight:800; font-size:26px; color:var(--hit); font-variant-numeric:tabular-nums;
  will-change:transform,opacity; text-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* ---------- the thumb zone ---------- */
.foot{margin-top:auto;padding-top:10px}
/* ---------- Vern ----------
   He is a canvas on a fixed grid. Nothing here styles his pixels; the only job
   of this block is to keep him crisp and stop the browser smoothing him. */
.vernrow{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-height:88px}
/* His line doubles as the prompt when you try to lock in a position you have not
   chosen, so it is the one thing that flashes. */
.vernsays.flash .says{animation:flash 480ms ease-out 2}
@keyframes flash{0%,100%{color:var(--mute)}50%{color:var(--accent)}}

/* His line, directly under the scale he is standing on. One line is reserved, not
   two: reserving for the longest quip put a gap under every short one. */
.vernsays{margin-top:9px;min-height:18px}
.vern{flex:none;width:152px;height:88px;display:flex;align-items:center}
.vern canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

.says{font-size:12.5px;color:var(--mute);line-height:1.35;flex:1;min-width:0}

.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.lvl{
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  color:var(--mute); cursor:pointer; padding:8px 2px 7px; min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform 90ms var(--overshoot);
}
.lvl b{font-size:9.5px;letter-spacing:.04em;font-weight:800;line-height:1.1;text-align:center}
.lvl i{font-style:normal;font-size:10px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.lvl.on{background:rgba(255,194,71,.13);border-color:var(--accent);color:var(--accent)}
.lvl.on i{color:var(--accent-d)}
.lvl:active{transform:scale(.95)}
.lvl:disabled{opacity:.45;cursor:default}

.btn{
  width:100%;border:0;border-radius:12px;padding:14px;font:800 15px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;background:var(--accent);color:#17130a;cursor:pointer;
  transition:transform 90ms var(--overshoot);
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.55}
.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
/* Nothing is chosen yet, so the commit does not ask to be pressed. */
.btn.waiting{background:var(--panel2);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}

.actionrow{display:flex;align-items:stretch;gap:7px}
.actionrow .btn{flex:1}
.nudge{
  flex:none; width:54px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:var(--accent); font-size:14px; cursor:pointer;
  display:grid; place-items:center; touch-action:none;
  transition:transform 90ms var(--overshoot);
}
.nudge:active{transform:scale(.93);background:var(--panel2)}
.nudge:disabled{opacity:.4;color:var(--dim);cursor:default}
.btn.wide{margin-top:auto}
.btnrow{display:flex;gap:8px;margin-top:10px}
.btnrow .btn{flex:1}
.btnrow .btn.ghost{flex:0 0 34%}

/* ---------- permanence strip ---------- */
.strip{display:flex;gap:3px;margin-top:7px;height:18px}
.cell{flex:1;position:relative;background:var(--panel);border-radius:4px;overflow:hidden}
.cell i{position:absolute;top:4px;bottom:4px;background:var(--accent);opacity:.55;border-radius:2px}
.cell i.hit{background:var(--hit)} .cell i.miss{background:var(--miss)}
.cell u{position:absolute;top:1px;bottom:1px;width:2px;margin-left:-1px;background:var(--ink);border-radius:2px}
.cell.now{outline:1.5px solid var(--accent-d)}

/* ---------- end screen ---------- */
.bigscore{font-size:54px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.bigscore small{font-size:18px;color:var(--mute)}
.grade{font-size:13.5px;color:var(--accent);font-weight:700;margin-bottom:12px}
#shareimg{width:100%;border-radius:12px;border:1px solid var(--line);display:block;-webkit-touch-callout:default}
.hint{font-size:11px;color:var(--mute);text-align:center;margin-top:8px;min-height:15px}
.nextday{font-size:12px;color:var(--dim);text-align:center;margin-top:10px}
.rounds{margin-top:12px;font-size:12px}
.rrow{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.rrow b{width:16px;color:var(--dim);font-weight:600}
.rrow span{flex:1}
.rrow .sub{color:var(--mute);font-size:11px}
.rrow i{font-style:normal;font-variant-numeric:tabular-nums;font-weight:700}
.rrow i.hit{color:var(--hit)} .rrow i.miss{color:var(--miss)}

/* ---------- archive ---------- */
.archnote{font-size:12px;color:var(--mute);margin:4px 0 12px;line-height:1.5}
.archlist{display:flex;flex-direction:column;gap:5px}
.archrow{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--ink);font:inherit;font-size:13px;min-height:44px;
}
.archrow:active{transform:scale(.99)}
.archrow b{color:var(--mute);font-size:11px;width:44px;font-variant-numeric:tabular-nums}
.archrow span{flex:1;color:var(--mute);font-size:12px}
.archrow i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;font-size:12px}
.archrow i.un{color:var(--dim);font-weight:500}
.archrow.played i{color:var(--hit)}
.daybar{
  display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:12px 0;
}
.daybar label{font-size:10px;color:var(--dim);letter-spacing:.12em}
.daybar input[type=date]{
  flex:1;background:transparent;border:0;color:var(--ink);min-width:0;
  font:600 13px/1 ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:6px 0;
}

/* On a tall phone there is room to breathe; on a short iframe there is not.
   Everything above is sized for the short case, and this is the slack. */
/* Shorter than a phone — an iframe, or a phone with its browser chrome up. The
   six names are the one block that must not be pushed out of reach. */
@media (max-height:700px){
  .menu{gap:4px;margin-top:7px}
  .opt{min-height:40px;font-size:12px;padding:5px 7px}
  /* Six-option mode adds a whole block to the reveal — THE OTHER FIVE, about
     137 px the classic reveal never needed — and a 620 px viewport (an iframe,
     or a browser showing both bars) pushed the commit off the bottom. These buy
     that height back out of margins and leading rather than out of the
     instrument. Classic mode already fits at 620 and only gains room. */
  .anchors{margin-top:4px}
  .q{margin-bottom:3px}
  .verdict{margin-top:5px}
  .vline{font-size:16px}
  .others{margin-top:3px;font-size:11px}
  .othead{margin-bottom:0}
  .orow{padding:1px 0;gap:6px}
  .orow em{font-size:10px}
  .fact{font-size:11.5px;margin-top:2px}
  .q b{font-size:29px}
  .levels{margin-bottom:2px}
  .strip{margin-top:1px;height:12px}
}

@media (min-height:780px){
  :root{ --track-h:144px }
  .opt{min-height:50px;font-size:13px}
  .q{margin-bottom:15px}
  .anchors{margin-top:48px}
  .vernsays{margin-top:12px;min-height:19px}
  .verdict{margin-top:12px}
  .vernrow{min-height:100px}
}