/* TALLY — "Gallery" ----------------------------------------------------------
   Warm ivory paper, Instrument Serif display + Outfit UI, ceramic letterpress
   tiles, and a signature target dial. Single light theme (design is light-only).
   Amber is the identity accent (target/dial/selection); green/red are semantic. */

:root {
  /* paper / surfaces */
  --page: #e7e2d6;
  --card: #faf7f0;
  --inset: #fffdf8;
  --soft: #f3ebda;         /* clue + week panel */
  --tile: #fffdf7;
  --tile-press: #fbf5e8;
  --tile-used: #efe8d8;
  /* ink / text */
  --ink: #2b2723;
  --ink-soft: #4a4237;
  /* secondary-text ramp — darkened to clear WCAG AA (4.5:1) on the ivory card
     (the handoff's original warm faints measured 2.3–3.8:1). Kept as light as the
     bar allows, so the airy Gallery feel survives. */
  --muted: #706656;   /* 5.27:1 */
  --faint: #78705e;   /* 4.59:1 */
  --faint-2: #7a7060; /* 4.55:1 */
  --faint-3: #7a7060; /* 4.55:1 */
  /* accent — amber */
  --accent: #b5822e;
  --accent-deep: #96691f;
  --accent-deeper: #7d561a;
  --accent-ink: #8a611f;
  --accent-label: #a07f3a;
  --soft-border: #e2d6bc;
  /* semantic */
  --good: #2f8f5b;
  --bad: #c1493f;
  /* lines */
  --line-tile: #e8e0cf;
  --line: #e2d9c8;
  --line-2: #ece3d1;
  --line-3: #ddd3c2;
  --dash: #d4c9b4;
  /* shadows */
  --sh-tile: 0 3px 0 #e5dcc7;
  --sh-mini: 0 2px 0 #e5dcc7;
  /* radii */
  --r-mini: 8px; --r-chip: 9px; --r-tile: 10px; --r-btn: 12px; --r-eq: 14px; --r-card: 26px;
  /* type */
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ui: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --flip: cubic-bezier(.4, 0, .2, 1);
  --z-scrim: 20; --z-toast: 30; --z-coach: 40;
}

* { box-sizing: border-box; }
/* author display rules (flex/grid) otherwise beat the [hidden] attribute */
[hidden] { display: none !important; }
:where(button, a, [tabindex], input, select):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-mini);
}
:where(button):focus:not(:focus-visible) { outline: none; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font-family: var(--ui); -webkit-font-smoothing: antialiased; min-height: 100dvh;
}

/* keyframes ---------------------------------------------------------------- */
@keyframes tl-pop { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 55% { transform: translateY(-3px) scale(1.12); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tl-fly { 0% { transform: translate(-50%,-50%) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(-50%, calc(-50% - 46px)) scale(.7); opacity: 0; } }
@keyframes tl-hit { 0%,100% { transform: scale(1); } 45% { transform: scale(1.16); } }
@keyframes tl-chip { from { transform: translateY(6px) scale(.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tl-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes tl-spin { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes tl-win { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* page + card -------------------------------------------------------------- */
.page { min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: 36px 16px; }
.card {
  position: relative; width: 390px; max-width: 100%;
  background: var(--card); border-radius: var(--r-card);
  box-shadow: 0 30px 70px -30px rgba(60,45,20,.5), 0 2px 0 #fff inset;
  padding: 28px 24px 30px;
}

/* header ------------------------------------------------------------------- */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; }
.brand { display: flex; flex-direction: column; }
.wordmark { font-family: var(--display); font-size: 36px; line-height: 1; letter-spacing: .5px; color: var(--ink); }
.tagline { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--faint); margin-top: 5px; }
.meta { display: flex; align-items: center; gap: 9px; padding-top: 4px; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-3); background: var(--card); color: var(--muted);
  font: 400 13px var(--ui); cursor: pointer; padding: 0; transition: transform .12s var(--ease), color .2s;
  /* stay above the pop-up scrim so ? remains clickable (to toggle the sheet closed) while open */
  position: relative; z-index: calc(var(--z-scrim) + 1);
}
@media (hover: hover) { .icon-btn:hover { color: var(--ink); } }
.icon-btn:active { transform: scale(.92); }
/* passive theme-day indicator — a quiet "Daily" label, an amber "✦ Theme day" badge on
   theme days. Not a player control; only clickable (to preview) in testing mode. */
.mode-pill {
  font: 600 11.5px var(--ui); padding: 5px 11px; border: 1px solid var(--line-3);
  border-radius: 999px; background: transparent; color: var(--muted); cursor: default;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.mode-pill[data-variant="theme"] { background: var(--accent); border-color: var(--accent); color: #fff; }
body.testing .mode-pill { cursor: pointer; }
.test-flag { font: 700 9.5px/1 var(--ui); letter-spacing: .1em; color: var(--bad); border: 1px solid var(--bad); border-radius: 5px; padding: 3px 5px; align-self: center; }
.streak { text-align: center; }
.streak-num { display: block; font-family: var(--display); font-size: 18px; line-height: 1; }
.streak-num.pop { color: var(--accent); animation: tl-pop .45s cubic-bezier(.22,1.4,.36,1) both; }
.streak-label { font-size: 8.5px; letter-spacing: 1.5px; color: var(--faint); }

/* board layout ------------------------------------------------------------- */
.board { display: block; }

/* target dial -------------------------------------------------------------- */
.dial-section { text-align: center; margin-top: 30px; }
.dial-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.dial-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track { stroke: rgba(181,130,46,.13); }
.ring-progress { stroke: var(--accent); transition: stroke-dashoffset .55s var(--ease), stroke .3s; }
.dial-label { font-size: 10.5px; letter-spacing: 2.2px; white-space: nowrap; color: var(--faint); transition: color .3s; }
.dial-num { font-family: var(--display); font-size: 74px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; transition: color .3s; }
.dial-num.win { animation: tl-win .6s cubic-bezier(.22,1.4,.36,1); text-shadow: 0 0 28px rgba(47,143,91,.4); }
.dial-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }

/* clue card ---------------------------------------------------------------- */
.clue-card { margin-top: 22px; padding: 14px 18px; background: var(--soft); border: 1px solid var(--soft-border); border-radius: var(--r-btn); animation: tl-chip .28s var(--ease) both; }
.clue-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent-label); }
.clue-text { display: block; font-family: var(--display); font-style: italic; font-size: 18px; margin-top: 4px; color: var(--ink-soft); text-wrap: pretty; }

/* equation ----------------------------------------------------------------- */
.equation { margin-top: 14px; }
.equation.has-terms { margin-top: 16px; min-height: 66px; border: 1px solid var(--line-2); background: var(--inset); border-radius: var(--r-eq); padding: 12px; display: flex; align-items: center; justify-content: center; }
.eq-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.eq-empty { font-size: 13px; color: var(--muted); text-align: center; max-width: 34ch; line-height: 1.5; }
.eq-empty b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; background: var(--card); border: 1px solid var(--soft-border); border-radius: var(--r-chip); padding: 4px 10px; animation: tl-chip .28s cubic-bezier(.22,1.4,.4,1) both; }
.chip-word { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--faint-2); }
.chip-val { font-family: var(--display); font-size: 19px; line-height: 1; color: var(--ink); }
.eq-op { font-family: var(--display); font-size: 22px; color: var(--accent); }
.eq-slot { width: 34px; height: 38px; border: 1px dashed var(--dash); border-radius: var(--r-chip); display: inline-block; }

/* staging (current word) --------------------------------------------------- */
.staging { text-align: center; margin-top: 16px; min-height: 40px; }
.current-word { display: flex; justify-content: center; gap: 6px; min-height: 34px; align-items: center; flex-wrap: wrap; }
.current-placeholder { font-size: 12px; letter-spacing: 1px; color: var(--faint-3); }
.current-sum { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 17px; margin-top: 2px; }
.cs-proj { display: block; margin-top: 3px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-proj.good { color: var(--good); }
.cs-proj.over { color: var(--bad); }

/* mini-tile (letter -> value flip) */
.mini-tile { position: relative; width: 30px; height: 34px; transform-style: preserve-3d; }
.mini-tile.pop { animation: tl-pop .34s cubic-bezier(.22,1.4,.36,1) both; }
.mini-tile.flip { animation: tl-spin .5s var(--flip) both; }
.mini-tile.reject { animation: tl-shake .4s; }
.mt-front, .mt-back {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--tile); border: 1px solid var(--line-tile); border-radius: var(--r-mini);
  box-shadow: var(--sh-mini); backface-visibility: hidden;
}
.mt-front { font-family: var(--display); font-size: 19px; color: var(--ink); }
.mt-back { transform: rotateX(180deg); font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--accent); }
.mt-back.warm, .mt-front.warm { background: var(--accent); border-color: var(--accent-deep); box-shadow: 0 2px 0 var(--accent-deeper), 0 0 18px rgba(181,130,46,.65); color: #fff; }

/* rack --------------------------------------------------------------------- */
.rack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 10px; }
.tile {
  position: relative; aspect-ratio: .92; border-radius: var(--r-tile);
  display: grid; place-items: center; font-family: var(--display); font-size: 26px; color: var(--ink);
  background: var(--tile); border: 1px solid var(--line-tile); box-shadow: var(--sh-tile);
  cursor: pointer; padding: 0; user-select: none;
  transition: transform .12s var(--ease), box-shadow .12s, background .2s, color .2s, opacity .2s;
}
.tile .val { position: absolute; bottom: 5px; right: 7px; font: 400 9.5px var(--ui); color: var(--faint-2); }
.tile:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 #e5dcc7; background: var(--tile-press); }
.tile.used { background: var(--tile-used); border-color: var(--tile-used); box-shadow: none; color: #c3b7a0; transform: translateY(1px); cursor: default; }
.tile.used .val { color: #cabfa8; }
.tile.warm { background: var(--accent); border-color: var(--accent-deep); box-shadow: var(--sh-tile), 0 0 18px rgba(181,130,46,.6); color: #fff; }
.tile.warm .val { color: #f3e3c3; }

/* operators + actions ------------------------------------------------------ */
.controls { display: block; }
.ops { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.op {
  width: 44px; height: 38px; border-radius: var(--r-tile); display: grid; place-items: center;
  font: 400 17px var(--ui); background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; padding: 0; transition: transform .1s, background .18s, border-color .18s, color .18s;
}
.op[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.op:not(:disabled):active { transform: scale(.9); }
.op:disabled { opacity: .4; cursor: default; }

.actions { display: flex; gap: 10px; margin-top: 20px; }
.btn {
  flex: 1; text-align: center; padding: 14px 0; border-radius: var(--r-btn);
  font: 600 15px var(--ui); cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: transform .1s var(--ease), opacity .2s, background .2s, border-color .2s;
}
.btn:not(:disabled):active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.btn.word { flex: 1.2; border-color: #c9bda6; background: var(--inset); color: #5d5343; }
.btn.primary { flex: 1.2; border-color: var(--ink); background: var(--ink); color: var(--card); }

.status-line { text-align: center; margin: 14px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); min-height: 16px; }
.status-line.good { color: var(--good); }
.status-line.warm { color: var(--accent); }
.status-line.bad { color: var(--bad); }

/* tips + give up ----------------------------------------------------------- */
.tip-log { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tip-item { font-size: 13px; color: var(--accent-ink); background: var(--soft); border: 1px solid var(--soft-border); border-radius: var(--r-tile); padding: 9px 12px; text-align: left; animation: tl-chip .3s ease both; }
.btn.tip { flex: none; width: 100%; margin-top: 10px; padding: 12px; border: 1px dashed var(--dash); border-radius: var(--r-btn); font: 600 14px var(--ui); color: #5d5343; background: transparent; }
.give-up-btn {
  display: block; margin: 16px auto 0; font: 400 13px var(--ui); color: #7a7060; /* AA 4.55:1 */
  text-decoration: underline; text-underline-offset: 3px; background: none; border: none; cursor: pointer;
  transition: color .2s, opacity .2s;
}
.give-up-btn:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .give-up-btn:not(:disabled):hover { color: var(--bad); } }

/* value flyers ------------------------------------------------------------- */
.flyers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--r-card); }
.flyer { position: absolute; font: 600 15px var(--ui); color: var(--accent); transform: translate(-50%,-50%); animation: tl-fly .64s cubic-bezier(.4,0,.5,1) both; pointer-events: none; }

/* loading ------------------------------------------------------------------ */
.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

/* sheets ------------------------------------------------------------------- */
/* No dim — the pop-up floats over the live game; a transparent scrim still covers the
   viewport so the game behind isn't interactive. Separation comes from a strong shadow. */
.sheet-scrim { position: fixed; inset: 0; background: transparent; display: grid; place-items: end center; z-index: var(--z-scrim); }
.sheet {
  width: 100%; max-width: 390px; background: var(--card); color: var(--ink);
  border-radius: 22px 22px 0 0; padding: 26px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 48px -12px rgba(43,39,35,.5), 0 -1px 0 rgba(43,39,35,.08); text-align: center;
  animation: rise .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise { from { transform: translateY(30px); opacity: .4; } }
.sheet-mark { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--accent); }
.sheet-title { margin: 6px 0 0; font-family: var(--display); font-size: 32px; line-height: 1.1; font-weight: 400; }
.sheet-sub { margin: 8px 0 0; font-family: var(--display); font-style: italic; font-size: 16px; color: var(--muted); }
.sheet-sub b { color: var(--ink); font-style: normal; font-variant-numeric: tabular-nums; }
.sheet-stats { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num { font-family: var(--display); font-size: 24px; line-height: 1; }
.stat-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }

.week-panel { margin-top: 20px; padding: 14px 16px; background: var(--soft); border: 1px solid var(--soft-border); border-radius: var(--r-btn); }
.week-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent-label); text-align: left; }
.week-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.wk-cell { width: 32px; height: 36px; border-radius: var(--r-chip); display: grid; place-items: center; font-size: 14px; transition: transform .2s; }
.wk-clean { background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-deep); }
.wk-tips { background: var(--ink); color: var(--card); box-shadow: 0 2px 0 #16130f; }
.wk-miss { border: 1px dashed var(--dash); color: #c3b7a0; }
.wk-none { border: 1px solid var(--line-2); color: #d8cfbc; background: var(--inset); }
.wk-today { outline: 2px solid var(--good); outline-offset: 2px; transform: scale(1.08); }
.week-init { font-size: 9px; letter-spacing: .5px; color: var(--faint-2); }
.week-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--soft-border); }
.week-streak { font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.week-legend { display: flex; gap: 10px; font-size: 9.5px; letter-spacing: .5px; color: var(--faint-2); }

.sheet-note { font-size: 12.5px; color: var(--faint-2); margin: 14px 0 0; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions.col { flex-direction: column; }
.sheet-actions .btn.primary { flex: 1.4; }
.sheet-actions .btn.ghost { flex: 1; }
.sheet-actions.col .btn { flex: none; width: 100%; }

/* Desktop (≥640px): pop-ups become a centered modal over the card, instead of a
   sheet stuck to the bottom of the browser window (which detaches from the centered
   card). Mobile keeps the native bottom sheet above. */
@media (min-width: 640px) {
  .sheet-scrim { place-items: center; }
  .sheet {
    width: min(390px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border-radius: 22px;
    border: 1px solid rgba(43,39,35,.08);
    padding: 28px 26px;
    box-shadow: 0 30px 80px -22px rgba(43,39,35,.55), 0 12px 34px -16px rgba(43,39,35,.4);
    animation: pop-in .26s cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes pop-in { from { transform: translateY(14px) scale(.97); opacity: 0; } }

/* how to play -------------------------------------------------------------- */
.help-sheet { text-align: left; }
.help-sheet .sheet-title { font-size: 30px; }
.help-steps { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.help-steps li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.help-n { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--accent); }
.help-eg { display: inline-block; margin-top: 4px; font-family: var(--display); color: var(--accent-ink); background: var(--soft); border-radius: var(--r-mini); padding: 3px 9px; }

/* toast -------------------------------------------------------------------- */
.toast { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: var(--r-mini); font-size: 13.5px; font-weight: 600; z-index: var(--z-toast); box-shadow: 0 8px 24px -10px rgba(43,39,35,.5); }

/* simulation dev panel (only present in ?sim=1) — a fixed viewport-bottom control bar */
.sim-panel { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); background: var(--ink); color: var(--card); padding: 8px 12px; border-radius: 12px; box-shadow: 0 12px 34px -12px rgba(0,0,0,.6); font: 500 12px var(--ui); }
.sim-tag { font-weight: 700; letter-spacing: .12em; color: #e8a33d; }
.sim-date { font-variant-numeric: tabular-nums; }
.sim-streak { opacity: .8; }
.sim-btn { background: #4a4237; color: var(--card); border: none; border-radius: 8px; padding: 6px 10px; font: 600 12px var(--ui); cursor: pointer; }
.sim-btn:active { transform: scale(.96); }

/* tutorial coach ----------------------------------------------------------- */
.coach { position: absolute; inset: 0; z-index: var(--z-coach); pointer-events: none; }
.coach-bubble {
  /* centered via margin-auto, NOT translateX — the tl-chip entrance animation animates
     transform (fill-mode both), which would clobber a centering transform. */
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(20px + env(safe-area-inset-bottom));
  width: min(390px, calc(100% - 28px));
  background: var(--ink); color: var(--card); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 12px 36px -10px rgba(43,39,35,.55); pointer-events: auto;
  animation: tl-chip .25s ease both;
}
.coach-text { margin: 0; font-size: 14.5px; line-height: 1.5; }
.coach-text b { color: var(--accent); }
.coach-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.coach-skip { background: none; border: none; color: inherit; opacity: .6; font: 400 13px var(--ui); cursor: pointer; padding: 6px 0; }
.coach-next { flex: none; padding: 9px 22px; border-color: var(--accent); background: var(--accent); color: #fff; }
.coach-dim { position: fixed; inset: 0; background: rgba(43,39,35,.5); z-index: calc(var(--z-coach) - 2); }
.coach-spot { position: relative; z-index: calc(var(--z-coach) - 1); box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(43,39,35,.5); border-radius: 12px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(43,39,35,.5); } 50% { box-shadow: 0 0 0 7px var(--accent), 0 0 0 9999px rgba(43,39,35,.5); } }

/* compact layout — web / desktop (≥640px wide): fit a 13" laptop on one screen,
   no vertical scroll. Phones (<640px) keep the roomy "mobile app" rhythm. Tighter
   vertical spacing + a smaller dial; type/tiles stay crisp (no scale hacks). */
/* Comfortable compact — web/desktop (≥640px wide). A moderate compaction of the
   roomy mobile layout: the dial stays the hero (150px / 58px number), and vertical
   rhythm is VARIED (bigger breaks around the dial + into the input zone, tighter
   within groups) rather than uniformly squeezed. Fits a normal 13" (~750px). */
@media (min-width: 640px) {
  .page { padding: 12px 16px; }
  .card { padding: 16px 24px 18px; }
  .wordmark { font-size: 32px; }
  .dial-section { margin-top: 14px; }
  .dial-wrap { width: 144px; height: 144px; }
  .dial-num { font-size: 56px; }
  .dial-label { font-size: 9px; letter-spacing: 1.5px; }
  .dial-sub { font-size: 11.5px; }
  .clue-card { margin-top: 14px; padding: 10px 16px; }
  .clue-text { font-size: 15px; }
  .equation { margin-top: 9px; }
  .equation.has-terms { min-height: 52px; padding: 10px; }
  .staging { margin-top: 8px; min-height: 30px; }
  .rack { margin-top: 12px; gap: 8px; }
  .tile { aspect-ratio: 1.05; }
  .ops { margin-top: 10px; }
  .actions { margin-top: 14px; }
  .status-line { margin-top: 8px; }
  .tip-log { margin-top: 8px; }
  .btn.tip { margin-top: 8px; }
  .give-up-btn { margin-top: 10px; }
}

/* Extra-tight — only on genuinely short viewports (a small laptop window, or the
   oldest 13" scaling where the usable height is ~715px). Re-tightens spacing and
   shrinks the dial so it still fits without scroll; normal screens never see this. */
@media (min-width: 640px) and (max-height: 800px) {
  .page { padding: 8px 16px; }
  .card { padding: 12px 24px 14px; }
  .wordmark { font-size: 31px; }
  .dial-section { margin-top: 8px; }
  .dial-wrap { width: 114px; height: 114px; }
  .dial-num { font-size: 44px; }
  .dial-label { font-size: 8.5px; letter-spacing: 1.2px; }
  .clue-card { margin-top: 10px; padding: 8px 16px; }
  .equation { margin-top: 7px; }
  .equation.has-terms { min-height: 50px; padding: 9px; }
  .staging { margin-top: 7px; min-height: 30px; }
  .rack { margin-top: 8px; gap: 7px; }
  .tile { aspect-ratio: 1.08; }
  .ops { margin-top: 8px; }
  .op { height: 34px; }
  .actions { margin-top: 10px; }
  .status-line { margin-top: 7px; }
  .tip-log { margin-top: 6px; gap: 5px; }
  .tip-item { padding: 7px 11px; font-size: 12.5px; }
  .btn.tip { margin-top: 7px; padding: 10px; }
  .give-up-btn { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}