/* Eyedle — Duochrome theme.
   The refraction lane as a game surface: clinical white, the red/green duochrome
   test as the feedback language, clues typeset as acuity-chart lines that sharpen
   as they are earned. A guess is a lens flip: red side lit = still blurry (wrong
   region), green side lit = getting clearer (right region), full green = in focus.
   Each flip's assessment carries the guessed eye-region so the player always sees
   which part of the eye they landed in. */

/* Optician Sans — optotype face built from historical Snellen eye-chart letters.
   Self-hosted, SIL OFL. Display face: used for the EYEDLE acuity-row wordmark. */
@font-face{
  font-family:'Optician Sans';
  src:url('/fonts/Optician-Sans.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

:root{
  --white:#fdfdfa;
  --black:#17181a;
  --grey:#8b8e94;
  --hair:#dcdcd4;
  --red:#e4342b;      /* duochrome red field   */
  --red-soft:#f3c7c4;
  --green:#0f9d58;    /* duochrome green field */
  --green-soft:#c2e6d2;
  --maxw:620px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--white);color:var(--black);
  font-family:'Archivo',system-ui,sans-serif;
  min-height:100vh;line-height:1.5;
  padding:0 0 80px;
}
.duobar{display:flex;height:10px;}
.duobar span{flex:1;}
.duobar .r{background:var(--red);}
.duobar .g{background:var(--green);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:30px 20px 0;}

/* ---------- Masthead: an acuity chart row ---------- */
.charthead{text-align:center;border-bottom:1px solid var(--black);padding-bottom:20px;}
.acuity-word{
  font-family:'Optician Sans',Arial,sans-serif;
  font-size:clamp(44px,12vw,64px);font-weight:400;line-height:1;
  letter-spacing:.22em;text-indent:.22em;
}
.rowmeta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--grey);margin-top:8px;
}
.charthead .sub{
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);
  margin-top:14px;text-indent:.4em;
}

/* ---------- Case line ---------- */
.caseline{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  padding:14px 2px;border-bottom:1px solid var(--hair);
}
.caseline b{font-weight:500;background:var(--black);color:var(--white);padding:2px 8px;}
#statusVal{color:var(--red);letter-spacing:.06em;}
#statusVal.win{color:var(--green);}

/* ---------- Section labels ---------- */
.glabel{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--grey);margin:22px 0 4px;text-transform:uppercase;
}
.glabel .count{color:var(--black);}

/* ---------- The chart block ----------
   Unframed: no box, no rail — a framed card and then a left duochrome rail were
   both tried and stripped back. The header rule, the red|green swatch beside the
   label, and the hairline acuity gutter are what mark the chart off. */
#chart{margin-top:22px;}
.charthdr{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:1px solid var(--black);
}
.charthdr .glabel{margin:9px 0;}
.duoswatch{display:flex;width:26px;height:9px;border:1px solid var(--black);flex:none;}
.duoswatch i{flex:1;}
.duoswatch .r{background:var(--red);}
.duoswatch .g{background:var(--green);}

/* ---------- Clues as acuity lines ---------- */
.lines{padding:0;}
.line{
  display:grid;grid-template-columns:56px 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--hair);align-items:start;
  animation:sharpen .6s cubic-bezier(.2,.7,.3,1);
}
.line:last-child{border-bottom:none;}
.line .ac{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--grey);padding-top:4px;
  white-space:nowrap;border-right:1px solid var(--hair);align-self:stretch;
}
.line .tx{font-weight:500;}
.line:nth-child(1) .tx{font-size:20px;font-weight:700;}
.line:nth-child(2) .tx{font-size:17.5px;}
.line:nth-child(3) .tx{font-size:16px;}
.line:nth-child(4) .tx{font-size:15px;}
.line:nth-child(5) .tx{font-size:14px;}
.line:nth-child(6) .tx{font-size:13.5px;}
@keyframes sharpen{
  0%{opacity:.3;filter:blur(7px);}
  100%{opacity:1;filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){.line{animation:none;}}
.line.blur .tx{
  filter:blur(6px);color:var(--grey);
  user-select:none;pointer-events:none;animation:none;
  /* occluded lines are filler — one blurred row is enough, and keeps
     the playable surface (lines → answer box) on screen without scroll */
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;
  -webkit-box-orient:vertical;overflow:hidden;
}
.line.blur .ac::after{content:" · OCCLUDED";}
/* sits under the chart card, not inside it — it counts lenses, it is not a clue */
.reveal-hint{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--grey);
  padding:9px 2px 0;
}

/* ---------- Guesses: lens flips with duochrome chips ---------- */
.guesses{margin-top:4px;}
/* The chip is one solid block of colour filling the height of its row, and that
   block should read as a square rather than a tall sliver. min-height holds every
   row to the same height whatever the assessment wraps to, and the chip's width is
   set to match it — aspect-ratio can't do this, a flex item's width resolves before
   the stretch that gives it its height, so it collapses to zero. */
.flip{
  display:flex;align-items:stretch;min-height:48px;
  border:1px solid var(--black);margin-bottom:-1px;background:var(--white);
}
.flip .chip{width:46px;flex:none;display:flex;}
.flip .chip i{flex:1;}
/* miss = both rectangles red: everything wrong */
.flip.miss .chip i.left,.flip.miss .chip i.right{background:var(--red);}
/* region = red|green: diagnosis wrong, region right */
.flip.region .chip i.left{background:var(--red);}
.flip.region .chip i.right{background:var(--green);}
.flip.correct .chip i.left,.flip.correct .chip i.right{background:var(--green);}
.flip .name{
  flex:1;padding:11px 14px;font-weight:700;font-size:14.5px;min-width:0;overflow-wrap:break-word;
  display:flex;align-items:center;
}
.flip.miss .name{color:var(--grey);text-decoration:line-through;text-decoration-color:rgba(228,52,43,.55);text-decoration-thickness:2px;}
.flip .call{
  font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;
  padding:8px 12px;border-left:1px dashed var(--hair);
  display:flex;flex-direction:column;justify-content:center;
  white-space:nowrap;min-width:168px;
}
.flip .call .verdict-line{letter-spacing:.06em;}
.flip .call .region-line{color:var(--grey);}
.flip.miss .call .verdict-line{color:var(--red);}
.flip.miss .call .region-line{color:var(--red);opacity:.75;}
.flip.region .call .verdict-line{color:var(--green);}
.flip.region .call .region-line{color:var(--green);opacity:.8;}
.flip.correct .call .verdict-line{color:var(--green);font-weight:700;}
.flip.correct .call .region-line{color:var(--green);opacity:.8;}
@media(max-width:520px){
  .flip .call{min-width:128px;white-space:normal;}
}

/* ---------- Input: the flip ---------- */
.inputzone{position:relative;margin-top:24px;}
.inputrow{display:flex;border:2px solid var(--black);}
.inputrow input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:16.5px;padding:14px 16px;
}
.inputrow input::placeholder{color:var(--grey);}
.inputrow button{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:14px;letter-spacing:.14em;
  background:var(--black);color:var(--white);border:none;padding:0 24px;cursor:pointer;
  text-transform:uppercase;
}
.inputrow button:hover{background:#000;}
.inputrow button:active{transform:translateY(1px);}

/* autocomplete */
.suggest{
  position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;
  background:var(--white);border:2px solid var(--black);
  box-shadow:4px 4px 0 rgba(23,24,26,.15);
  max-height:250px;overflow-y:auto;display:none;
}
.suggest.open{display:block;}
.sitem{
  padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer;
  border-bottom:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.sitem:last-child{border-bottom:none;}
.sitem:hover,.sitem.active{background:#f1f1ea;}
.sitem .reg{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  color:var(--grey);text-transform:uppercase;flex:none;text-align:right;
}

/* ---------- Sub actions + lens dots ---------- */
.subactions{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;gap:10px;flex-wrap:wrap;
}
.link{
  background:none;border:none;cursor:pointer;padding:2px 0;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--black);border-bottom:1px solid var(--hair);text-transform:uppercase;
}
.link:hover{border-bottom-color:var(--black);}
.attempts-dots{
  display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--grey);text-transform:uppercase;
}
.attempts-dots i{display:flex;gap:7px;font-style:normal;}
.attempts-dots .dot{
  width:14px;height:14px;border:1.5px solid var(--black);border-radius:50%;
  display:inline-block;
}
.attempts-dots .dot.miss{background:var(--red);border-color:var(--red);}
.attempts-dots .dot.region{background:linear-gradient(90deg,var(--red) 50%,var(--green) 50%);border-color:var(--black);}
.attempts-dots .dot.correct{background:var(--green);border-color:var(--green);}

/* ---------- Result ---------- */
.result{margin-top:26px;border:2px solid var(--black);padding:18px;animation:settle .35s ease;}
@keyframes settle{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.result .verdict{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
}
.result.win .verdict{color:var(--green);}
.result.lose .verdict{color:var(--red);}
.dx{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:27px;line-height:1.1;
  margin:8px 0 2px;letter-spacing:-.01em;
}
.region-pill{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);display:inline-block;margin-bottom:8px;
}
.summary{font-size:15px;margin:10px 0;}
.pearl{
  font-size:14px;color:#4c4e52;border-left:3px solid var(--green);
  padding:2px 0 2px 14px;margin:14px 0 4px;
}
.pearl b{color:var(--red);font-weight:700;}
.resbtns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.btn{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.1em;
  background:var(--black);color:var(--white);border:2px solid var(--black);
  padding:10px 18px;cursor:pointer;text-transform:uppercase;
}
.btn:hover{background:#000;}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:transparent;color:var(--black);}
.btn.ghost:hover{background:var(--black);color:var(--white);}
.result-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:14px;flex-wrap:wrap;
}
.sharegrid{font-size:14px;letter-spacing:3px;color:var(--grey);}
.mini-disc{display:none;font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--grey);}

/* ---------- Archive ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(23,24,26,.45);
  z-index:50;display:none;align-items:flex-end;justify-content:center;
}
.overlay.open{display:flex;}
.sheet-modal{
  background:var(--white);border:2px solid var(--black);
  width:100%;max-width:var(--maxw);max-height:78vh;overflow-y:auto;
  padding:20px 20px 30px;
}
@media(min-width:640px){
  .overlay{align-items:center;}
  .sheet-modal{box-shadow:6px 6px 0 rgba(23,24,26,.25);}
}
.sheet-modal h3{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px;
}
.sheet-modal .sub{color:var(--grey);font-size:12.5px;font-family:'IBM Plex Mono',monospace;margin-bottom:16px;}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:0;border:1px solid var(--black);}
.arch-cell{
  aspect-ratio:1;border:.5px solid var(--hair);background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;transition:background .12s;
}
.arch-cell:hover{background:#f1f1ea;}
.arch-cell:active{transform:scale(.97);}
.arch-cell .n{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;}
/* dated cases show the day they aired; the undated rotation pool keeps its number */
.arch-cell .mo{
  font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:500;
  letter-spacing:.08em;color:var(--grey);margin-top:1px;
}
.arch-cell .st{position:absolute;top:3px;right:5px;font-size:11px;line-height:1;}
.arch-cell .st.win{color:var(--green);}
.arch-cell .st.lose{color:var(--red);}
.arch-cell.today{outline:2px solid var(--red);outline-offset:-2px;z-index:1;}
.arch-cell.done-win{background:var(--green-soft);}
.close-x{
  position:sticky;top:0;float:right;background:none;border:none;
  color:var(--grey);font-size:24px;cursor:pointer;line-height:1;
}
.close-x:hover{color:var(--black);}

/* ---------- Share sheet ----------
   The card is drawn on a canvas at 1080x1350 (4:5 — Instagram's portrait frame,
   and it holds its shape in a message thread) and scaled down for the preview, so
   what the player sees here is pixel-for-pixel what gets sent. */
.card-frame{
  display:flex;justify-content:center;
  border:1px solid var(--hair);padding:10px;background:#f4f4ee;
}
.card-frame canvas{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:42vh;
  box-shadow:3px 3px 0 rgba(23,24,26,.18);
}
.share-opts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px;
}
.share-opt{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--white);border:1px solid var(--black);cursor:pointer;
  padding:11px 4px;transition:background .12s;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.04em;
  color:var(--black);text-transform:uppercase;line-height:1.2;text-align:center;
}
/* one drawing style for all four: hairline strokes in the current ink, so the
   Instagram mark sits with the others instead of standing out as a logo */
.share-opt svg{
  width:21px;height:21px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.share-opt svg .solid{fill:currentColor;stroke:none;}
.share-opt:hover{background:#f1f1ea;}
.share-opt:active{transform:translateY(1px);}
.share-opt[hidden]{display:none;}
.share-note{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--grey);
  margin-top:11px;line-height:1.6;min-height:1.6em;
}
@media(max-width:480px){
  .share-opts{grid-template-columns:repeat(2,1fr);}
  .card-frame canvas{max-height:38vh;}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(16px);
  background:var(--black);color:var(--white);
  padding:10px 20px;font-size:13px;font-family:'IBM Plex Mono',monospace;
  opacity:0;transition:all .25s;z-index:80;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Footer / how-to ---------- */
.howto{margin-top:30px;font-size:13px;color:var(--grey);text-align:center;}
.howto details{display:inline-block;text-align:left;max-width:100%;}
.howto summary{
  cursor:pointer;color:var(--black);list-style:none;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--hair);display:inline-block;
}
.howto summary::-webkit-details-marker{display:none;}
.howto p{margin:12px 2px;line-height:1.7;}
.legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}
.legend .lg-correct{color:var(--green);font-weight:700;}
.legend .lg-region{color:var(--green);}
.legend .lg-miss{color:var(--red);}
/* the legend's key is a flip chip in miniature: two halves butted into one square */
.legend .sq{display:inline-block;width:7px;height:14px;vertical-align:-3px;}
.legend .sq + .sq{margin-right:4px;}
.legend .sq.r{background:var(--red);}
.legend .sq.g{background:var(--green);}
footer{
  text-align:center;margin-top:26px;color:var(--grey);
  font-size:11px;line-height:1.7;font-family:'IBM Plex Mono',monospace;
  border-top:1px solid var(--hair);padding-top:12px;
}

/* ---------- Loading / error ---------- */
.boot-msg{
  text-align:center;color:var(--grey);font-family:'IBM Plex Mono',monospace;
  font-size:13px;padding:44px 0;
}
.boot-msg.error{color:var(--red);}

/* ---------- Short desktop screens ----------
   Same rule as the phone landing: the how-to line must be reachable without a
   scroll when the page first loads. The desktop rhythm fits a viewport of ~790px
   or taller; on shorter screens (a 1366x768 laptop full screen is ~650-700px of
   viewport) the vertical spacing compresses — paddings and margins only, the type
   scale stays. Worst case (longest opening clue in the deck) lands the how-to
   line inside ~640px. */
@media (min-width:481px) and (max-height:799px){
  .wrap{padding-top:14px;}
  .charthead{padding-bottom:12px;}
  .acuity-word{font-size:clamp(38px,6.5vh,56px);}
  .rowmeta{margin-top:6px;}
  .charthead .sub{margin-top:8px;}
  .caseline{padding:9px 2px;}
  #chart{margin-top:12px;}
  .charthdr .glabel{margin:6px 0;}
  .line{padding:10px 0;}
  .reveal-hint{padding-top:6px;}
  .inputzone{margin-top:14px;}
  .inputrow input{padding:10px 16px;}
  .subactions{margin-top:10px;}
  .howto{margin-top:16px;}
}

/* ---------- Phone layout ----------
   The landing view — masthead through the answer bar and lens dots — is sized to
   fill the phone screen exactly: big enough that the answer bar is pushed nearly
   to the bottom edge, small enough that reaching it never needs a scroll. Once
   flips start stacking up the page grows past the fold and scrolls, which is fine;
   it is only the first screen that has to fit.

   Everything in that view is a multiple of --u, a unit tied to viewport height, so
   the layout expands on a tall phone and contracts on a short one instead of being
   right on exactly one device. svh (not vh) is the viewport with the browser's URL
   bar showing — the state the player actually lands in. */
@media (max-width:480px){
  /* 1.93svh lands the longest opening clue in the deck just inside the fold, so the
     layout is already close before any script runs. --fit is then nudged by
     fitLanding() in game.js to fill the screen exactly for the case on show (how
     far the answer bar falls depends on how many rows the opening clue wraps to,
     which CSS can't know). Scaling a unitless multiplier keeps that arithmetic out
     of JS — it never has to read this clamp back. */
  :root{--u-base:clamp(11px,1.93vh,18px);--fit:1;--u:calc(var(--u-base) * var(--fit));}
  @supports (height:1svh){:root{--u-base:clamp(11px,1.93svh,18px);}}

  body{padding-bottom:calc(var(--u) * 1.6);}
  .duobar{height:6px;}
  .wrap{padding:calc(var(--u) * .9) 14px 0;}

  /* masthead stays centred like the desktop chart: wordmark in the middle, motto
     under it. The rowmeta is dropped — its facts (one case a day, six flips) are
     already carried by the case line and the lens dots, and the landing fit wants
     the height back. */
  .charthead{padding-bottom:calc(var(--u) * .7);}
  .acuity-word{font-size:calc(var(--u) * 2.85);letter-spacing:.18em;text-indent:.18em;}
  .rowmeta{display:none;}
  .charthead .sub{
    margin-top:calc(var(--u) * .45);
    font-size:calc(var(--u) * .72);letter-spacing:.18em;text-indent:.18em;
  }

  .caseline{padding:calc(var(--u) * .78) 0;font-size:calc(var(--u) * .95);gap:6px;}
  .caseline b{padding:2px 6px;}

  .glabel{margin:calc(var(--u) * .95) 0 calc(var(--u) * .15);font-size:calc(var(--u) * .85);}

  /* chart block */
  #chart{margin-top:calc(var(--u) * .8);}
  .charthdr .glabel{margin:calc(var(--u) * .5) 0;}
  .duoswatch{width:calc(var(--u) * 1.6);height:calc(var(--u) * .6);}
  .reveal-hint{padding:calc(var(--u) * .5) 2px 0;}

  .line{padding:calc(var(--u) * .72) 0;grid-template-columns:calc(var(--u) * 4) 1fr;gap:12px;}
  .line .ac{font-size:calc(var(--u) * .8);padding-top:3px;}
  .line:nth-child(1) .tx{font-size:calc(var(--u) * 1.5);}
  .line:nth-child(2) .tx{font-size:calc(var(--u) * 1.35);}
  .line:nth-child(3) .tx{font-size:calc(var(--u) * 1.26);}
  .line:nth-child(4) .tx{font-size:calc(var(--u) * 1.18);}
  .line:nth-child(5) .tx{font-size:calc(var(--u) * 1.12);}
  .line:nth-child(6) .tx{font-size:calc(var(--u) * 1.08);}
  .line .tx{line-height:1.4;}
  .reveal-hint{font-size:calc(var(--u) * .82);}

  /* One row per flip: duochrome chip, the diagnosis, then the assessment in its
     own column behind a dashed rule. The diagnosis is set near its desktop size
     rather than scaled up with the rest of the layout — the fill-the-screen unit
     made it big enough to wrap a name like "Preseptal cellulitis" in two, and a
     guess list reads better tight than large. Chip, gutters and the assessment
     column are all pared back so the name column keeps the width it needs. */
  .guesses{margin-top:2px;}
  /* rows are held to one height and the chip is squared against it (see .flip) */
  .flip{min-height:calc(var(--u) * 3.2);}
  .flip .chip{width:calc(var(--u) * 3.2 - 2px);}
  .flip .name{
    padding:calc(var(--u) * .5) calc(var(--u) * .5);
    font-size:calc(var(--u) * .92);line-height:1.25;
  }
  .flip .call{
    min-width:0;flex:none;width:calc(var(--u) * 7.6);
    padding:calc(var(--u) * .3) calc(var(--u) * .5);
    font-size:calc(var(--u) * .63);line-height:1.32;white-space:normal;
  }

  .inputzone{margin-top:calc(var(--u) * .95);}
  .inputrow{border-width:2px;}
  /* 16px floor keeps iOS from zooming the page when the field takes focus */
  .inputrow input{font-size:max(16px,calc(var(--u) * 1.05));padding:calc(var(--u) * .95) 13px;}
  .inputrow button{font-size:calc(var(--u) * 1.08);padding:0 18px;}
  .suggest{max-height:44vh;bottom:calc(100% + 6px);}
  .sitem{padding:11px 13px;font-size:14px;}

  .subactions{margin-top:calc(var(--u) * .7);}
  .link{font-size:calc(var(--u) * .9);}
  .attempts-dots{font-size:calc(var(--u) * .82);gap:7px;}
  .attempts-dots i{gap:6px;}
  .attempts-dots .dot{width:calc(var(--u) * 1.05);height:calc(var(--u) * 1.05);border-width:1.25px;}

  .result{margin-top:14px;padding:14px;border-width:2px;}
  .result .verdict{font-size:10px;}
  .dx{font-size:22px;margin:6px 0 2px;}
  .region-pill{font-size:9px;margin-bottom:5px;}
  .summary{font-size:13.5px;margin:8px 0;}
  .pearl{font-size:12.5px;padding-left:12px;margin:10px 0 3px;}
  .resbtns{gap:8px;margin-top:12px;}
  .btn{padding:9px 14px;font-size:11.5px;}
  .sharegrid{font-size:12px;margin-top:8px;}

  .howto{margin-top:14px;font-size:12px;}
  .howto summary{font-size:10px;}
  footer{margin-top:14px;padding-top:9px;font-size:9.5px;line-height:1.6;}

  /* the result may scroll (the game is over) — just show the compact
     disclaimer inside the panel on phones */
  .mini-disc{display:inline;}
}