/* WIGGLE 0.5 — compact phone layout and clearer final score.
 * Keeps the answering controls together in normal document flow on phones,
 * so a disabled Lock button can never be visible while the window choices
 * it depends on are hidden underneath a fixed tray.
 */

/* Results: one unmistakable visual score, while the original accessible text
 * remains "out of 1,500 points" in the DOM for screen readers. */
.big-score {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.12em;
  white-space:nowrap;
  font-size:clamp(56px,10vw,70px);
  letter-spacing:-2.2px;
}
.big-score span {
  display:inline;
  margin:0;
  font-size:0;
  line-height:1;
  letter-spacing:0;
  color:var(--muted);
}
.big-score span::before {
  content:'/ 1,500';
  font-size:clamp(30px,5vw,39px);
  font-weight:650;
  letter-spacing:-1px;
}

@media (max-width:600px) {
  html { scroll-padding-bottom:24px; }
  body { --dock-height:0px; }

  /* Smaller masthead, but keep all tap targets comfortably usable. */
  .header-inner {
    height:48px;
    padding:0 8px;
    grid-template-columns:1fr auto 1fr;
  }
  .brand {
    font-size:23px;
    gap:5px;
    padding:4px 5px;
    letter-spacing:-.8px;
  }
  .brand::before,.brand::after { height:22px; width:4px; }
  .nav-button,.sound-button { width:38px; height:40px; padding:7px; }
  .sound-state { display:none; }
  .header-left,.header-nav { gap:0; }

  #main { padding-inline:16px; }
  .game { padding-top:9px; }
  .game-top { margin-bottom:7px; align-items:baseline; }
  .game-heading { display:flex; align-items:baseline; gap:8px; }
  .game-heading h1 { font-size:15px; }
  .game-date { display:none; }
  .score-total { font-size:20px; letter-spacing:-.25px; }
  .score-total span { font-size:13px; }
  .score-caption { display:none; }

  /* The five questions are strategically useful, so retain them. Remove
   * repeated metadata around them instead. */
  .question-nav { gap:4px; }
  .q-link { gap:2px; padding:2px 0 4px; }
  .q-number { width:30px; height:30px; font-size:14px; }
  .q-category { font-size:9px; }
  .nav-meta {
    min-height:28px;
    padding:1px 0 4px;
    justify-content:flex-end;
  }
  .nav-meta > span { display:none; }
  .nav-meta .text-button { padding:3px 0; font-size:10px; }

  .question-head { min-height:0; padding:11px 0 6px; }
  .question-meta { display:none; }
  .question-head h2 {
    font-size:clamp(20px,5.6vw,23px);
    line-height:1.19;
    letter-spacing:-.45px;
  }
  .question-note {
    margin-top:6px;
    font-size:11.5px;
    line-height:1.34;
  }

  .ruler-instruction { font-size:10px; padding-inline:0; }
  .ruler-pad { padding-inline:3px; }
  .ruler { height:112px; }
  .ruler.revealed { height:145px; }

  /* Compact, but keep name + points + visual width identity. Exact percentages
   * remain in help and in the selected interval on the ruler. */
  .window-section { margin-top:0; }
  .section-label { margin-bottom:5px; font-size:11.5px; }
  .window-options { gap:5px; padding:2px; }
  .window-option { height:64px; min-height:64px; padding:5px 1px; gap:1px; }
  .window-name { font-size:10.5px; }
  .window-points { font-size:17px; }
  .window-points small { display:none; }
  .window-percent { display:none; }
  .window-mini { height:5px; margin-top:2px; }
  .window-option.used .window-points { font-size:13px; }
  .window-caption { min-height:20px; padding:5px 0 2px; font-size:10.5px; }

  /* Most important change: controls stay immediately after the window choices.
   * No fixed bottom layer, no duplicated reserved whitespace, no hidden wiggles. */
  .has-action-dock #main { padding-bottom:0; }
  .has-action-dock .footer { padding-bottom:18px; }
  .action-dock,
  .flow-actions .action-dock {
    position:static;
    inset:auto;
    z-index:auto;
    margin-top:5px;
    padding:7px 0 0;
    border-top:1px solid var(--line);
  }
  .action-dock .commit-zone {
    grid-template-columns:minmax(0,1.55fr) minmax(100px,.9fr);
    gap:7px;
  }
  .precision-controls { height:44px; }
  .nudge-button { width:38px; min-width:38px; height:42px; }
  .btn { min-height:44px; }
  .action-dock .commit-warning {
    margin-top:5px;
    font-size:10.5px;
    line-height:1.3;
  }
  .game-bottom { min-height:10px; margin-top:1px; }
  .footer { margin-top:10px; }

  /* Result screen uses the same hierarchy as the live score: current / max. */
  .results { padding-top:19px; }
  .results-heading h1 { margin:10px 0 2px; font-size:23px; }
  .result-ticket { margin-top:11px; }
  .big-score {
    font-size:clamp(52px,15vw,66px);
    letter-spacing:-2px;
  }
  .big-score span::before {
    font-size:clamp(27px,7.4vw,34px);
    letter-spacing:-.7px;
  }
  .result-caught { margin-top:8px; }
  .window-receipt { margin-top:16px; }
}

/* Extra density only for genuinely short browser viewports. Keep the question
 * readable; remove more chrome before reducing essential content. */
@media (max-width:600px) and (max-height:700px) {
  .header-inner { height:44px; }
  .brand { font-size:21px; }
  .brand::before,.brand::after { height:20px; }
  .nav-button,.sound-button { height:38px; }
  .game { padding-top:6px; }
  .game-top { margin-bottom:4px; }
  .q-number { width:28px; height:28px; font-size:13px; }
  .q-link { padding-bottom:2px; }
  .q-category { font-size:8.5px; }
  .nav-meta { min-height:24px; }
  .question-head { padding-top:8px; }
  .question-head h2 { font-size:20px; }
  .question-note { font-size:11px; }
  .ruler { height:108px; }
  .window-option { height:60px; min-height:60px; }
  .window-caption { padding-top:3px; }
}

@media (max-width:359px) {
  #main { padding-inline:12px; }
  .header-inner { padding-inline:6px; }
  .brand { font-size:21px; }
  .nav-button,.sound-button { width:36px; }
  .question-head h2 { font-size:19px; }
  .window-options { gap:4px; }
  .window-option { height:60px; min-height:60px; }
  .window-name { font-size:9.5px; }
  .window-points { font-size:16px; }
  .action-dock .commit-zone {
    grid-template-columns:minmax(0,1.65fr) minmax(96px,.9fr);
    gap:6px;
  }
}