/*
  iPhone layer: loaded after styles.css and game.css, so it only has to say what
  changes on a phone. iPad layouts are left as they are. Two shapes:
    - phone portrait (narrow): compact top bar that scrolls away, the pad floats at
      the bottom, sized from the screen height so the answer box stays above it;
    - phone landscape (short): problem on the left, pad on the right, everything on
      one screen without scrolling.
  Checked by scripts/smoke-phone.mjs.
*/

/* ---------- shared by phone portrait and phone landscape ---------- */
@media (max-width: 600px), (max-height: 520px) and (orientation: landscape) {
  :root { --blur: blur(22px) saturate(180%); }
  #app { padding-top: calc(var(--safe-t) + 10px); }

  /* Top bar: one row, scrolls away with the page so the problem gets the room. */
  .topbar {
    position: relative; top: auto;
    padding: 6px 12px 14px 6px; margin-bottom: 10px;
    border-radius: var(--r-md); gap: 0 10px;
  }
  .topbar .progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 5px; margin: 0; }
  .back { min-height: 44px; padding: 0 14px 0 10px; font-size: 16px; }
  .back .chev { font-size: 26px; }
  .topbar .title b { font-size: 17px; line-height: 1.2; }
  .topbar .title span { font-size: 13px; line-height: 1.3; }
  .gm-combo, .gm-mini, .gm-today { height: 36px; padding: 0 10px; font-size: 15px; }

  /* Problem card. */
  .play { gap: 12px; }
  .card { padding: 14px 14px 16px; border-radius: var(--r-lg); }
  .card .label { font-size: 14px; letter-spacing: 0; text-transform: none; gap: 6px; }
  .card .label-tools { gap: 6px; flex-wrap: nowrap; }
  .version-toggle.compact { padding: 3px; gap: 2px; }
  .version-toggle.compact button { padding: 0 7px; font-size: 13px; }
  /* Read to me becomes a round speaker button; the words stay for VoiceOver. */
  .speak { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; flex: none; }
  .speak > span { font-size: 20px; }
  .problem { font-size: clamp(20px, 5.4vw, 23px); line-height: 1.4; margin: 8px 0 4px; }
  .answers { margin-top: 14px; gap: 10px; }
  .answer-row { font-size: 19px; gap: 8px 10px; }
  .box { min-height: 56px; font-size: 26px; border-radius: var(--r-sm); max-width: 46vw; }
  .think { font-size: 17px; padding: 12px 14px; }
  .actions { margin-top: 16px; gap: 10px; }
  .btn { min-height: 52px; padding: 12px 18px; font-size: 17px; }
  .btn.primary, .btn.go { font-size: 19px; }
  .feedback { margin-top: 14px; padding: 12px 14px; font-size: 18px; }
  .feedback .stars { font-size: 30px; }
  .hint, .reveal { font-size: 17px; padding: 12px 14px; }

  /* Number pad: lighter frame, keys at least 44 pt. */
  .pad { padding: 7px; border-radius: var(--r-lg); }
  .pad-grid { gap: 5px; }
  .key { font-size: 26px; border-radius: 14px; }
  .key.fn { font-size: 21px; }
  .key.half { font-size: 25px; }
  .key.enter { font-size: 17px; }
  .key.enter .sym { font-size: 24px; }

  /* Popups must fit a phone held either way. */
  .gm-overlay { padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px); }
  .gm-pop { max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: 22px 18px 18px; }
  .gm-pop h2 { font-size: 28px; }
  .gm-pop p { font-size: 17px; }
  .gm-pop-big { font-size: 60px; }
  .gm-burst b { font-size: 64px; }

  /* Trophy toasts drop from the top, clear of the pad and the Next button. */
  .gm-toast {
    bottom: auto; top: calc(var(--safe-t) + 10px);
    max-width: calc(100vw - 24px - var(--safe-l) - var(--safe-r));
    animation-name: fit-toast-in;
  }
  .gm-toast.out { animation-name: fit-toast-out; }

  .done-card { padding: 28px 18px; }
  .done-card .big { font-size: 64px; }
  .done-card h2 { font-size: 28px; }
  .sheet { padding: 20px 18px calc(var(--safe-b) + 20px); }
  .sheet h2 { font-size: 24px; }
  .sheet td { padding: 10px 12px; font-size: 16px; }
}
@keyframes fit-toast-in { from { transform: translate(-50%, calc(-100% - 40px)) scale(.8); } to { transform: translate(-50%, 0); } }
@keyframes fit-toast-out { to { transform: translate(-50%, calc(-100% - 40px)) scale(.9); } }

/* ---------- phone portrait ---------- */
@media (max-width: 600px) {
  #app { padding-left: calc(var(--safe-l) + 12px); padding-right: calc(var(--safe-r) + 12px); }
  .hero { gap: 14px; }
  .hero h1 { font-size: clamp(30px, 9vw, 38px); }
  .hero p { font-size: 16px; }
  .big-btn { min-height: 72px; padding: 12px 14px 12px 20px; }
  .big-btn .big-label { font-size: 23px; }
  .big-btn small { font-size: 15px; }
  .big-btn .chev { width: 44px; height: 44px; font-size: 26px; }
  .section-title { margin: 26px 4px 10px; font-size: 22px; }
  .version-bar { padding: 12px 14px; }
  .footer-links { margin-top: 24px; }

  /* The pad is a keyboard: keys shrink on short screens (iPhone SE in Safari) so the
     answer box stays above it, and never below 44 pt. */
  .play.has-pad .pad {
    width: 100%; max-width: 460px;
    bottom: calc(var(--safe-b) + 8px);
  }
  .pad-grid { grid-auto-rows: clamp(44px, 7.4vh, 60px); }
  @supports (height: 1dvh) { .pad-grid { grid-auto-rows: clamp(44px, 7.4dvh, 60px); } }
}

/* Very narrow (small Android phones, iPad Slide Over): the label tools wrap under the title. */
@media (max-width: 370px) {
  .card .label-tools { flex-wrap: wrap; }
  .version-toggle.compact button { padding: 0 8px; font-size: 12.5px; }
  .answer-row { font-size: 17px; }
  .box { width: 5.4em; }
  .gm-combo { padding: 0 8px; }
}

/* ---------- phone landscape ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .play.has-pad {
    grid-template-columns: minmax(0, 1fr) clamp(232px, 34vw, 300px);
    align-items: start;
  }
  .play.has-pad .pad {
    position: sticky; top: calc(var(--safe-t) + 8px); bottom: auto;
    width: auto; justify-self: stretch;
  }
  /* Four rows that fit the screen under the top bar. */
  .pad-grid { grid-auto-rows: clamp(44px, calc((100vh - var(--safe-t) - var(--safe-b) - 132px) / 4), 60px); }
  @supports (height: 1dvh) {
    .pad-grid { grid-auto-rows: clamp(44px, calc((100dvh - var(--safe-t) - var(--safe-b) - 132px) / 4), 60px); }
  }
  .problem { font-size: 20px; }
  .hero { padding: 18px 22px; }
  .hero .mark { width: 64px; height: 64px; }
  .hero h1 { font-size: 32px; }
  .big-btn { min-height: 68px; }
  .big-btn .big-label { font-size: 22px; }
  .sheet { max-height: calc(100vh - var(--safe-t) - 8px); }
  @supports (height: 1dvh) { .sheet { max-height: calc(100dvh - var(--safe-t) - 8px); } }
}

/* Level map on the narrowest screens (iPad Slide Over, small Android): the winding path's
   captions stay on screen instead of widening the page. */
@media (max-width: 370px) {
  .gm-map { --step: 18vw; overflow-x: clip; }
  .gm-cap { max-width: 48vw; }
  .gm-region { padding: 8px 14px 8px 10px; }
  .gm-region b { font-size: 18px; }
}

/* "American English | Direct translation" on the home screen: full width, two equal halves
   that may wrap, so it never widens the page (iOS would zoom the whole app out). */
@media (max-width: 420px) {
  .version-bar .version-toggle, .sheet .version-toggle { display: flex; width: 100%; }
  .version-bar .version-toggle button, .sheet .version-toggle button {
    flex: 1 1 0; min-width: 0; padding: 4px 8px; font-size: 14px; line-height: 1.15; white-space: normal;
  }
}