/* Phones: the column is the whole screen. Meters on top (under the notch), the card takes the height that's
   left, and the bottom bar is a window onto the night polder where the water wolf's tide rises; the HUD sits on it.
   Fits Safari with its toolbars (390×664, SE 375×548) and the installed app (390×844 with notch and home bar). */
@media (max-width: 760px) {
  html, body { overflow: clip; }
  body { background: var(--night); }
  .column { box-shadow: none; height: 100dvh; background: none; overflow: clip; } /* a flung card must not widen the page */
  .stage {
    background:
      radial-gradient(120% 60% at 50% 45%, transparent 55%, rgb(120 90 40 / .18)),
      var(--parchment);
  }

  /* the polder at 0.64 scale, the mills at x≈400 centred and its horizon running through the bottom bar,
     so the water wolf's tide visibly climbs the land and the mills' feet */
  .backdrop { top: auto; left: 50%; width: 1229px; height: 691px; translate: -256px 0; bottom: calc(var(--safe-bottom) - 186px); }

  .meters { padding: calc(var(--safe-top) + clamp(16px, 3svh, 24px)) 18px clamp(8px, 1.6svh, 14px); }
  .meter { --size: clamp(34px, 6.4svh, 48px); }
  .meter-dot { top: -10px; width: 12px; height: 12px; }
  .meter[data-preview] .meter-dot { top: -9px; }
  .stage { padding: clamp(6px, 1.4svh, 12px) 18px; gap: clamp(6px, 1.4svh, 12px); }
  .prompt { font-size: clamp(1.02rem, 2.9svh, 1.22rem); min-height: calc(4 * 1.3em); line-height: 1.3; }
  .who { font-size: clamp(.95rem, 2.4svh, 1.08rem); }
  .ledger {
    min-height: 0; height: calc(clamp(84px, 13svh, 104px) + var(--safe-bottom)); padding: 0 0 var(--safe-bottom);
    background: linear-gradient(rgb(9 13 34 / .25), rgb(9 13 34 / .5));
    border-top: 3px solid #0a0d1f;
  }
  .ledger .keys { display: none; }

  .hud { z-index: 3; font-size: .95rem; text-shadow: 0 1px 3px #000, 0 0 12px rgb(0 0 0 / .8); }
  .hud-years, .hud-anno { top: auto; bottom: calc(6px + var(--safe-bottom)); }
  .hud-years { left: 16px; b { font-size: 1.6rem; } }
  .hud-anno { right: 16px; b { font-size: 1.6rem; } }
  .hud-reeve {
    left: 50%; translate: -50% 0; margin: 0;
    bottom: calc(clamp(84px, 13svh, 104px) + var(--safe-bottom) - 46px);
    max-width: calc(100% - 24px); min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 14px;
    font-size: 1rem; color: var(--bar-ink);
    white-space: nowrap;
    #reeve-name { overflow: hidden; text-overflow: ellipsis; }
    small { display: none; }
  }
}