/* Everything below the largest phone in portrait. Tablets and desktops keep
   the roomier layout entirely. */
@media (max-width: 560px) {

  body {
    /* Fixed backgrounds cost a repaint on every scroll on mobile Safari and
       buy nothing on a screen this size. */
    background-attachment: scroll;
  }

  /* Room for the home indicator, and never a clipped last row. */
  .h-inner,
  .g-inner,
  .pf-inner {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /*
   * The opening screen is centred in the viewport on a desktop, which is
   * right there and wrong on a phone: with a short page it leaves two
   * hundred pixels of nothing above the title, and with a long one it
   * clips. Portrait starts at the top and flows down.
   *
   * 100dvh rather than 100vh because mobile browser chrome slides in and
   * out — 100vh is the *largest* viewport, so a page sized to it hides its
   * last rows behind the address bar.
   */
  .screen-home {
    min-height: 100dvh;
    align-content: start;
    padding: 0;
  }

  .h-inner {
    padding-top: 14px;
    padding-left: 14px;
    padding-right: 14px;
    gap: 16px;
  }

  .h-hero {
    gap: 5px;
    padding: 0;
  }
  .h-welcome {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  /* The two things to press. Shorter, still a comfortable target. */
  .h-play { gap: 9px; }

  .h-resume { margin-top: -6px; gap: 7px; }
  .h-resume .resume-link { width: 100%; padding: 9px 12px; }

  .h-block-title {
    margin-bottom: 7px;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
  }
  .h-note { font-size: 0.76rem; }
  .h-kicker { font-size: 0.65rem; margin-bottom: 7px; }
.pf-history-row { padding: 7px 0 7px 8px; gap: 8px; }

  .g-inner {
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  .g-title { font-size: 0.95rem; }
  .g-subtitle { font-size: 0.62rem; }

  /*
   * The clock stays legible but gives the board its room back.
   *
   * The money drops to its own row rather than trying to sit beside the
   * clock: three figures and "ROUND 4 / 20" do not fit across 390px, and
   * squeezing them was putting the labels on top of each other. A full-width
   * row underneath keeps every figure readable and still costs one line.
   */
  .round-bar-main {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 7px 10px;
  }
  /* The ring shrinks; the numeral inside it follows on its own. */
  .round-timer { --ring: 46px; }

  .round-aside {
    /* Three figures normally, four when the campaign owes money — auto-fit
       so the fourth wraps to a second line instead of crushing the other
       three. */
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    justify-items: start;
    gap: 2px 10px;
    padding-top: 3px;
    border-top: 1px solid var(--line-soft);
  }
  .round-aside .g-fig { align-items: flex-start; text-align: left; }
  .round-aside .g-fig-value { font-size: 0.84rem; }
  .round-aside .g-fig.is-lead .g-fig-value { font-size: 1rem; }

  .g-money-row { gap: 7px; }
  .g-money-fig-label {
    font-size: 0.53rem;
    letter-spacing: 0.1em;
  }
  .g-money-fig-value { font-size: 0.84rem; }
  .g-money-fig.is-lead .g-money-fig-value { font-size: 1.15rem; }
  .g-money-progress-note { font-size: 0.6rem; }

  .g-menu { gap: 7px; }
  .g-menu-item {
    padding: 10px 10px 9px;
    grid-template-columns: 15px minmax(0, 1fr);
    column-gap: 8px;
  }
  .g-menu-label {
    font-size: 0.71rem;
    letter-spacing: 0.06em;
  }
  .g-menu-hint { font-size: 0.6rem; }

  .g-block-title { font-size: 0.63rem; }
  .g-block-note { font-size: 0.72rem; }

  .btn-end { padding: 11px 14px; }
  .btn-end-title { font-size: 0.76rem; letter-spacing: 0.13em; }
  .btn-end-note { font-size: 0.62rem; }
  .g-ready { padding: 11px 14px; }

  .g-district { gap: 8px; padding-left: 8px; }
  .g-district-name { font-size: 0.8rem; }
  .g-district-seats { font-size: 0.7rem; }
  .g-district-grant { font-size: 0.65rem; }

  .g-txn { gap: 8px; padding: 7px 0; }
  .g-txn-label { font-size: 0.78rem; }
  .g-txn-note { font-size: 0.64rem; }
  .g-txn-amount { font-size: 0.78rem; }

  .ar-summary { gap: 15px; }
  .ar-block { gap: 7px; }
  .ar-block-title { font-size: 0.62rem; letter-spacing: 0.14em; }
  .ar-block-note { font-size: 0.67rem; }

  .ar-ring-block {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px;
  }
  .ar-ring-wrap { width: 92px; height: 92px; }
  .ar-ring-value { font-size: 1.5rem; }
  .ar-ring-key { gap: 5px; }
  .ar-key-label { font-size: 0.68rem; }

  .ar-support { gap: 6px; }
  .ar-support-row { grid-template-columns: 44px minmax(0, 1fr) 42px; gap: 8px; }
  .ar-support-name { font-size: 0.66rem; }
  .ar-support-share { font-size: 0.7rem; }

  .ar-bulks { gap: 7px; }
  .ar-bulk { padding: 10px 12px; }

  /* A sheet on a phone is the screen, not a dialog floating on it. */
  .sheet { align-items: flex-end; padding: 0; }
  .sheet-panel {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .sheet-title { font-size: 1.05rem; }
  .sheet-text { font-size: 0.8rem; }

  .pf-inner { padding-top: 10px; gap: 16px; }
  .pf-card { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 11px; }
  .pf-name { font-size: 1.15rem; }
  .pf-figures { gap: 6px; }
  .pf-figure { padding: 8px 2px; }
  .pf-figure-value { font-size: 1.3rem; }
  .pf-achievement { gap: 10px; padding: 8px 0; }
  .pf-achievement-name { font-size: 0.8rem; }
  .pf-achievement-blurb { font-size: 0.67rem; }

  .lbd-row { gap: 10px; padding: 8px 0; }
  .lbd-name { font-size: 0.88rem; }

  .screen-setup .inner,
  .screen-multiplayer .inner,
  .screen-lobby .inner {
    padding-top: 12px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .title-sm { font-size: clamp(1.15rem, 5.5vw, 1.6rem); }
  .party-grid { gap: 7px; }
  .clock-options { gap: 6px; }
  .clock-option { padding: 9px 4px; }
}

/* The smallest phones still in use. Everything above holds; these are the
   few places where one more step down is needed to stop a wrap. */
@media (max-width: 349px) {
  .h-inner { padding-left: 11px; padding-right: 11px; }

  .g-inner { padding-left: 10px; padding-right: 10px; }
  .g-menu-item { padding: 9px 8px; column-gap: 6px; }
  .g-menu-label { font-size: 0.66rem; letter-spacing: 0.03em; }
  .g-menu-hint { font-size: 0.56rem; }
  .g-money-fig-value { font-size: 0.78rem; }
  .g-money-fig.is-lead .g-money-fig-value { font-size: 1.05rem; }

  .ar-ring-block { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .ar-ring-wrap { width: 80px; height: 80px; }
  .ar-ring-value { font-size: 1.32rem; }
}

/* Landscape on a phone: the height is the scarce thing, so the hero gives
   way rather than pushing the buttons off the bottom. */
@media (max-height: 460px) and (orientation: landscape) {
  .h-inner { padding-top: 10px; gap: 12px; }
  .h-play { flex-direction: row; }
}