/* pvpTD — Mobile-specific Responsive Styles */

/* Phone portrait */
@media (max-width: 640px) {
  .hud-top-bar {
    padding: 4px 8px;
  }
  .hud-gold {
    font-size: 13px;
    min-width: 70px;
  }
  .hud-center {
    gap: 12px;
    font-size: 13px;
  }
  .hud-timer {
    font-size: 15px;
  }

  .build-bar {
    bottom: 4px;
    padding: 6px 8px;
    gap: 5px;
    max-width: 100vw;
    overflow-x: auto;
    border-radius: 12px;
  }
  /* Everything on a phone is sized from --ui-scale (job 064). Dima: "The
     elements should be 20% bigger it's hard to see towers prices for example."
     Touch devices default to 1.2 and Settings offers Small/Normal/Large/Huge,
     because the right number depends on eyesight and I shouldn't be guessing
     his. The 8px price was the specific thing he named. */
  .tower-card {
    width: calc(64px * var(--ui-scale, 1));
    min-width: calc(64px * var(--ui-scale, 1));
    height: calc(90px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1));
  }
  .tower-card .tower-icon {
    width: calc(28px * var(--ui-scale, 1));
    height: calc(28px * var(--ui-scale, 1));
  }
  .tower-card .tower-name {
    font-size: calc(9px * var(--ui-scale, 1));
  }
  .tower-card .tower-cost {
    font-size: calc(11px * var(--ui-scale, 1));
  }

  /* One scrolling row, same as the build bar above (job 112). The `max-height`
     that used to cap the wrapped rows here is gone with the wrapping. */
  .send-bar {
    bottom: 4px;
    padding: 6px 6px;
    gap: 4px;
    max-width: 100vw;
    overflow-x: auto;
  }
  .mob-card {
    width: calc(58px * var(--ui-scale, 1));
    min-width: calc(58px * var(--ui-scale, 1));
    height: calc(82px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1));
  }
  .mob-card .mob-icon {
    width: calc(22px * var(--ui-scale, 1));
    height: calc(22px * var(--ui-scale, 1));
  }
  .mob-card .mob-name {
    font-size: calc(9px * var(--ui-scale, 1));
  }
  .mob-card .mob-cost {
    font-size: calc(11px * var(--ui-scale, 1));
  }

  .upgrade-panel {
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 60px !important;
    top: auto !important;
    min-width: 200px;
  }

  .kill-feed {
    display: none;
  }

  .screen-content {
    /* Phones need the width more than the margin: 90% + 16px padding left the
       lobby card 292px of a 360px screen, so it both overflowed and wrapped
       into a taller page than the screen (job 048). */
    width: 100%;
    padding: 14px 12px;
  }
  /* Reclaim the vertical the lobby needs to fit a phone WITHOUT scrolling —
     Dima: "I don't see all details at once". Budget is tighter than the device
     height suggests: on his 360×800 handset the browser chrome takes ~110px, so
     the real box is ~690px (job 048). */
  .lobby-logo { max-width: min(180px, 46%); }
  .lobby-logo-wrap { margin-bottom: 4px; }
  .lobby-menu .play-cta { margin: 8px 0 4px; padding: 11px 16px; }
  .lobby-menu-row { padding: 9px 10px; }
  .lobby-nav-btn { height: 52px; gap: 3px; }
  .lobby-nav-btn .nav-glyph { width: 21px; height: 21px; }
  .lobby-side-banner { margin-bottom: 6px; }
  .screen-title {
    font-size: 24px;
  }

  .role-select {
    flex-direction: column;
    gap: 10px;
  }
  .role-card {
    padding: 12px;
  }
  .role-card .role-name {
    font-size: 15px;
  }

  .results-stats {
    grid-template-columns: 1fr;
  }

  .results-winner {
    font-size: 32px;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quest-tracker {
    display: none;
  }

  /* Daily-quest chips: min-width:150px forced 3 chips wider than the narrow
     menu, clipping the last one. Stack them full-width instead. */
  .lobby-quests {
    grid-template-columns: 1fr;
  }
  .lobby-quest-chip {
    min-width: 0;
  }

  /* Map grid single column on mobile */
  .map-grid {
    grid-template-columns: 1fr;
  }

  /* Achievement grid smaller on mobile */
  .achievement-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Results stats 2 columns on mobile. Compacted (job 061): eight cards at the
     desktop scale ran to 760px of grid alone, which is what pushed the actions
     off a 690px screen. */
  .results-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .results-stat-card { padding: 6px 4px; }
  .results-stat-icon { font-size: 15px; margin-bottom: 0; }
  .results-stat-value { font-size: 15px; }
  .results-stat-label { font-size: 9px; margin-top: 0; }
  .results-winner { margin-bottom: 12px; }
  .results-stars { margin-bottom: 6px; }
  .results-highlights { margin-bottom: 10px; gap: 8px; }

  /* Hide hotkey badges on mobile */
  .tower-card .hotkey, .mob-card .hotkey { display: none; }

  /* Upgrade tree centered on mobile */
  /* Bottom sheet, not a floating block (jobs 057, 065). The old rule let the
     card row wrap, so three cards stacked into a 195x360 column parked in the
     MIDDLE of the board — it covered the lower third of the playfield, which is
     why tapping a tower down there "took 3-5 times": the taps were landing on
     the panel. Docked to the bottom with a row that scrolls sideways, it covers
     only the band the controls already own. */
  .upgrade-tree-panel {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    bottom: calc(var(--build-h, 132px) + var(--safe-b, 4px)) !important;
    top: auto !important;
    max-height: 40vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .utp-card-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .utp-card-row::-webkit-scrollbar { display: none; }
  .utp-current-card, .utp-upgrade-card { flex: 0 0 auto; }

  /* Compact enough to sit in the controls band instead of eating the board.
     The stock spacing put the sheet at 258px tall; this brings it to ~170. */
  .utp-header { padding: 8px 12px; }
  .utp-card-row { padding: 8px 12px; gap: 6px; }
  .utp-current-card { padding: 6px 8px; min-width: 68px; gap: 2px; }
  .utp-current-card .utp-card-icon,
  .utp-upgrade-card .utp-card-icon { width: 24px; height: 24px; }
  /* Sell shares the header's row instead of claiming a third band of its own.
     Three stacked bands made the sheet 236px tall; two make it ~180. */
  .upgrade-tree-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head actions" "cards cards";
    align-items: center;
  }
  .utp-header  { grid-area: head; border-bottom: none; }
  .utp-actions { grid-area: actions; padding: 0 12px 0 0; border-top: none; }
  .utp-card-row {
    grid-area: cards;
    border-top: 1px solid var(--color-border);
  }
  .utp-sell-btn { white-space: nowrap; }
  /* Opaque on a phone: at 0.96 alpha the board and the controls behind it were
     still legible through the sheet, which read as a rendering fault. */
  .upgrade-tree-panel { background: #150e2c; }
  .utp-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Chat smaller on mobile */
  .chat-panel {
    width: 200px;
    bottom: 4px;
    left: 4px;
  }
  .chat-messages {
    height: 100px;
  }

  /* Emote panel */
  .emote-panel {
    bottom: 52px;
    right: 4px;
  }
  .emote-wheel {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Side select stacks on phones */
  .side-pick {
    grid-template-columns: 1fr;
  }

  /* Lobby nav wraps */
  .lobby-nav {
    gap: 4px;
  }
  .lobby-nav-btn {
    height: 54px;
    font-size: 9px;
  }
  .lobby-nav-btn .nav-glyph {
    width: 22px;
    height: 22px;
  }

  /* Skin grid */
  .skin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .build-bar {
    max-width: 90vw;
  }
  .send-bar {
    max-width: 90vw;
  }

  .screen-content {
    max-width: 500px;
  }
}

/* Touch device specific */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .tower-card {
    min-height: 80px;
  }

  .mob-card {
    min-height: 72px;
  }

  .utp-upgrade-card,
  .utp-sell-btn {
    min-height: 44px;
  }

  /* Job 120 — the side-select's Back is a real thumb target, not a link. */
  .side-back {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Hide hotkey badges on touch */
  .tower-card .hotkey, .mob-card .hotkey { display: none; }

  .utp-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Prevent double-tap zoom */
  * {
    touch-action: manipulation;
  }
}

/* Job 082 — the near-square step of the lobby's height ladder.
   The lobby's default vertical budget is 845px, so it only fits a window taller
   than ~865px. The ladder below it was gated on `max-width: 640px` (phones) and
   `max-height: 768px`; an unfolded foldable — 800-920px wide, 767-880px tall —
   falls between the two and got full-size chrome it has no room for.
   Height-gated on purpose: this is about the window's height at ANY width, which
   is the shape the 048/051/060/064 matrix never covered. 880 and not 900, so
   desktop 1440x900 stays pixel-identical. Budget here is about -73px; the
   768 step below tightens further, and .screen-content scrolls past both. */
@media (max-height: 880px) {
  .screen-content { padding: 18px 24px; }
  .lobby-logo { max-width: min(210px, 50%); }
  .lobby-logo-wrap { margin-bottom: 6px; }
  .lobby-menu .play-cta { margin: 12px auto 4px; padding: 13px 48px; }
  .lobby-nav { margin-top: 10px; padding-top: 12px; }
  .lobby-nav-btn { height: 56px; }
}

/* Short viewports (e.g. 768px height) — compress lobby to fit */
@media (max-height: 768px) {
  .screen-content {
    padding: 16px 20px;
  }
  .screen-title {
    font-size: 24px;
    margin-bottom: 4px;
  }
  .screen-subtitle {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .role-select {
    margin: 8px 0;
  }
  .role-card {
    padding: 10px 12px;
  }
  .role-card .role-name {
    font-size: 16px;
    margin-bottom: 2px;
  }
  .role-card .role-desc {
    font-size: 10px;
  }
  .role-card .role-icon svg {
    width: 32px;
    height: 32px;
  }
  .role-card .role-icon {
    margin-bottom: 4px;
  }
  .role-ready-indicator {
    margin: 4px auto 0;
  }
  .ready-status {
    margin-top: 6px;
  }
  .ready-dot {
    font-size: 12px;
  }
  .lobby-ready-btn {
    margin-top: 10px;
    padding: 8px 32px;
    font-size: 15px;
  }
  .lobby-nav {
    margin-top: 12px;
    padding-top: 10px;
  }
  /* 52, not the old 58: the max-height:880 step above already takes this to 56,
     and a ladder that goes 64 -> 56 -> 58 as the window shrinks is not a ladder
     (job 082). */
  .lobby-nav-btn {
    height: 52px;
    font-size: 9px;
  }
  .lobby-nav-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Landscape on phones */
@media (max-height: 480px) and (orientation: landscape) {
  .hud-top-bar {
    padding: 2px 8px;
  }
  .hud-gold {
    font-size: 12px;
  }
  .hud-center {
    font-size: 12px;
    gap: 10px;
  }

  .build-bar, .send-bar {
    bottom: 2px;
    padding: 4px 6px;
    max-width: 100vw;
  }
  .tower-card {
    width: 52px;
    min-width: 52px;
    height: 72px;
    padding: 3px 2px;
  }
  .tower-card .tower-name,
  .tower-card .tower-cost {
    font-size: 8px;
  }
  .tower-card .tower-icon {
    width: 22px;
    height: 22px;
  }
  .mob-card {
    width: 48px;
    min-width: 48px;
    height: 68px;
  }

  /* Hide hotkey badges in landscape */
  .tower-card .hotkey, .mob-card .hotkey { display: none; }

  .upgrade-tree-panel {
    bottom: 76px !important;
    max-height: 45vh;
    overflow-y: auto;
  }
}

/* --- Safe-area compliance (M4.1 — Discord Activities / notched phones) --- */
.hud-top {
  padding-top: max(8px, env(safe-area-inset-top));
}
.build-bar, .send-bar {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.ability-bar {
  left: max(12px, env(safe-area-inset-left));
}
.chat-panel {
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Rotate-to-landscape prompt (job 030) ----------------------------------
   Hidden by default. Only a phone-width portrait viewport DURING A MATCH gets
   it (body.in-match, set by UIManager.hideAllScreens); menus stay usable in
   portrait, and it auto-clears the instant the device turns landscape. The
   game's fixed 4:3 field can't be reflowed to portrait without a full render
   refactor (backlog job 033) — so we ask for a rotate, matching the landscape
   manifest, rather than ship a stretched, HUD-collided board. */
/* RETIRED by job 046 — portrait now plays. The markup stays so the prompt can
   be brought back as a hint if playtesting says people still want landscape. */
#rotate-prompt { display: none !important; }

/* --- Portrait play (job 046) ----------------------------------------------
   Stacked layout: board on top, controls underneath, instead of a HUD floating
   over a board it covers. The renderer mirrors this exact breakpoint
   (isStackedPortrait in game-renderer.js) to drop its side gutters and fit the
   board to the height, so cells stay big enough to tap and the board pans
   sideways. */
/* --- Compact HUD (job 048) -------------------------------------------------
   Below ~1024px the centred build bar reaches the corners and the ability rail
   is a 258px-tall left column, so the three of them fought over the same pixels:
   chat under the build bar (its close control unreachable) and chat under the
   rail on landscape. They now STACK from the bottom edge, each positioned from
   the heights below rather than from hardcoded offsets, so a size change moves
   the whole stack instead of causing a collision. Heights are measured, not
   guessed: the bar is 132px with full-size cards and 108px with the phone cards
   from the ≤640 block. */
@media (max-width: 1024px) {
  body.in-match {
    --build-h: 132px;
    --rail-h: 56px;
    --chat-h: 42px;
    --hud-gap: 6px;
    --safe-b: max(4px, env(safe-area-inset-bottom));
  }
  body.in-match .build-bar {
    bottom: var(--safe-b);
    max-width: 100%;
  }
  /* Rail goes horizontal: a vertical column of four buttons is 258px, most of a
     landscape phone's height, and it sat across both the board and chat. */
  body.in-match .ability-bar {
    flex-direction: row;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    bottom: calc(var(--safe-b) + var(--build-h) + var(--hud-gap));
    padding: 6px 8px;
  }
  body.in-match .ability-btn {
    width: calc(44px * var(--ui-scale, 1));
    height: calc(44px * var(--ui-scale, 1));
  }
  /* Spectator rail (job 135): eight cells in one row is 400px, wider than the
     phone, so the two sides stack as a labelled row each. A spectator has no
     build/send bar either, so the stack drops to the screen edge instead of
     floating over the gap where that bar would be — the rail's own height is
     still measured and published by the HUD (job 102), so chat and the emote
     trigger ride up over the taller rail without a second hardcoded number. */
  body.in-match.spectating { --build-h: 0px; }
  body.in-match .ability-bar.spectating {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  body.in-match .ability-bar.spectating .ability-side {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  body.in-match .chat-panel {
    left: 4px;
    right: 92px;   /* leaves the emote trigger its corner on the same row */
    width: auto;
    bottom: calc(var(--safe-b) + var(--build-h) + var(--rail-h) + (var(--hud-gap) * 2));
  }
  /* The placement hint joins the stack too. Its default `bottom: 118px` landed
     exactly on the rail here, and once the rail became clickable (job 051) it
     swallowed the hint's taps — i.e. the cancel control could not be pressed. */
  body.in-match .placement-hint {
    bottom: calc(var(--safe-b) + var(--build-h) + var(--rail-h) + var(--chat-h)
                 + (var(--hud-gap) * 3));
  }
  /* Job 189 knob D: the capacity pill's desktop anchor (--build-h + 14px)
     lands INSIDE the horizontal rail's band here, so the ability buttons
     painted over the pill — worst while paused, exactly when the pill is
     trying to teach "send to recharge". It joins the stack above the chat
     row, the placement hint's slot (that hint is defender-side, the pill is
     attacker-side — the two never show together). The rejection toast, which
     shared the same collision, rides just above the pill. */
  body.in-match .send-budget {
    bottom: calc(var(--safe-b) + var(--build-h) + var(--rail-h) + var(--chat-h)
                 + (var(--hud-gap) * 3));
  }
  body.in-match .send-toast {
    bottom: calc(var(--safe-b) + var(--build-h) + var(--rail-h) + var(--chat-h)
                 + (var(--hud-gap) * 3) + 26px);
  }
  /* Emote shares the chat row rather than the rail row: at 360px the centred
     rail reaches x=292 and the right-anchored emote started at 284 (job 051). */
  body.in-match .emote-panel {
    bottom: calc(var(--safe-b) + var(--build-h) + var(--rail-h) + (var(--hud-gap) * 2));
    right: 6px;
  }

  /* The top bar's three pills (gold / lives+timer / enemy gold) are each
     min-width 110px, which overruns a 360px screen and made them overlap.
     Let them shrink. */
  body.in-match .hud-gold { min-width: 0; font-size: 15px; }
  body.in-match .hud-top-bar { padding: 4px 6px; gap: 4px; }
  body.in-match .hud-center { gap: 8px; }
}

/* Narrow phones: with the settings gear added (job 053) the five top-bar items
   no longer fit 360px and their text overflowed the pills. The YOU / ENEMY
   badges go — ownership still reads from the highlighted border on yours and
   the dimmed opacity on theirs — and everything else tightens. */
@media (max-width: 420px) {
  body.in-match .hud-gold-owner { display: none; }
  body.in-match .hud-gold {
    font-size: 13px;
    padding: 3px 7px;
    gap: 2px;
    overflow: hidden;
  }
  body.in-match .hud-gold .gold-coin-icon svg { width: 16px; height: 16px; }
  body.in-match .hud-center { gap: 6px; font-size: 12px; }
  body.in-match .hud-timer { font-size: 14px; }
  body.in-match .hud-settings-btn { margin-right: 2px; }
  /* One button, not two: the gear's panel already offers "Forfeit match", and
     five items do not fit 360px — especially at the 40px touch size. Dropping
     the bare ✕ also removes the sharper of the two ways to lose a match by
     accident. */
  body.in-match .hud-leave-btn { display: none; }
}

/* Phone cards are smaller (see the ≤640 block above), so the bar is shorter.
   Every band scales with --ui-scale (job 064): the board's height is
   100dvh minus these, so if the controls grow and the bands don't, the board
   keeps its old height and the two overlap. */
@media (max-width: 640px) {
  body.in-match {
    --build-h: calc(108px * var(--ui-scale, 1));
    --rail-h: calc(56px * var(--ui-scale, 1));
    --chat-h: calc(42px * var(--ui-scale, 1));
  }
}

@media (orientation: portrait) and (max-width: 640px) {
  /* Portrait's own job is the board: give it everything the stacked controls
     above do not take. dvh, not vh, so the mobile browser's collapsing chrome is
     accounted for rather than overflowed. This is what removed the 259px of dead
     space Dima measured between the board and the tower bar. */
  /* The bar FLOATS over the board (job 059 — Dima's call). `--hud-top-h` still
     positions everything that hangs below it (kill feed, connection pill); the
     height calc uses `--hud-top-reserve`, which is 0 here, so the board keeps
     the 44px the bar used to take out of it. The bar earns that by not being a
     solid band and not eating taps — see the floating-bar rules below. */
  body.in-match { --hud-top-h: calc(44px * var(--ui-scale, 1)); --hud-top-reserve: 0px; }
  body.in-match #game-viewport {
    flex: 0 0 auto;
    height: calc(100dvh - var(--hud-top-reserve) - var(--build-h) - var(--rail-h)
                 - var(--chat-h) - (var(--hud-gap) * 3) - var(--safe-b));
    min-height: 240px;
  }

  /* Slim and see-through, with no full-width plate. Each pill carries its own
     chip background, so the board reads underneath between them. */
  body.in-match .hud-top-bar {
    background: linear-gradient(180deg, rgba(14, 10, 26, 0.55), rgba(14, 10, 26, 0));
    padding: 3px 6px 10px;
    /* Taps belong to the cells beneath. Only the gear opts back in — the pills
       are read-only, and a bar that swallowed the top row of the board would
       just be the same complaint in a thinner shape. */
    pointer-events: none;
  }
  body.in-match .hud-settings-btn,
  body.in-match .hud-leave-btn { pointer-events: auto; }
  body.in-match .hud-gold,
  body.in-match .hud-center > * {
    background: rgba(14, 10, 26, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  /* Out of the way while you are choosing a tile. */
  body.placing .hud-top-bar { opacity: 0.45; transition: opacity 140ms ease; }

  /* Coach mark, phone size (job 060). Two tight lines at the top edge instead
     of a 230x150 card in the middle of the playfield. */
  body.in-match .build-phase {
    padding: 5px 12px 7px;
    min-width: 0;
    max-width: 88vw;
  }
  body.in-match .build-phase b { font-size: 12px; letter-spacing: 0.2px; }
  body.in-match .build-phase span { font-size: 10px; }
  /* Kill feed stays on the board, top-right and small: it is glanceable info,
     not a control, so it must not claim height the board needs. */
  body.in-match .kill-feed {
    top: calc(var(--hud-top-h) + 4px);
    bottom: auto;
    right: 6px;
    width: 44vw;
    max-height: 72px;
    overflow: hidden;
    opacity: 0.92;
  }
}
.rotate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.rotate-phone {
  width: 52px;
  height: 92px;
  border-radius: 12px;
  border: 3px solid var(--color-secondary, #f0c040);
  box-shadow: 0 0 22px rgba(240, 192, 64, 0.35), inset 0 0 0 3px rgba(240, 192, 64, 0.12);
  transform-origin: center;
  animation: rotate-hint 2.4s ease-in-out infinite;
}
.rotate-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--color-secondary, #f0c040);
}
.rotate-sub {
  font-size: 13px;
  color: var(--color-text-dim, #9a90b0);
}
@keyframes rotate-hint {
  0%, 22% { transform: rotate(0deg); }
  48%, 82% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* --- Replay bar on a narrow screen (job 086) --------------------------------
   Dima, folded phone: "I don't have the time selection over here, but I have
   full name of the record which doesn't make any sense. I would rather be able
   to scroll over here with the time." Measured at 390x844: the scrub track was
   0px wide and the close button overflowed the bar's right edge by 8px.
   One row cannot hold transport + scrubber + clock + a record title in 367px,
   so below 640px the bar wraps into two: the scrubber gets a full-width line of
   its own (~330px of drag, more than it gets on a desktop), the transport and
   the clock sit underneath, and the record's name is dropped — you know which
   replay you opened. */
@media (max-width: 640px) {
  .replay-bar {
    flex-wrap: wrap;
    width: min(680px, 96vw);
    border-radius: 20px;
    padding: 8px 12px 10px;
    row-gap: 8px;
  }
  .replay-bar .replay-track {
    order: -1;          /* the scrubber leads, on its own line */
    flex: 1 0 100%;
    min-width: 0;
  }
  .replay-bar .replay-title { display: none; }
  .replay-bar .replay-close { margin-left: auto; }
}

/* A 40px control is the desktop size; a finger wants 44 (job 086). */
@media (hover: none) and (pointer: coarse) {
  .replay-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none; }
}

/* --- Job 189/192/193: attacker pacing UI, phone size ------------------------
   The capacity pill and the rejection toast anchor off the measured --build-h
   band, so they ride above the send bar in both landscape and the stacked
   portrait layout without their own positioning rules. Only sizes shrink. */
@media (max-width: 640px) {
  .send-budget { gap: 5px; padding: 2px 9px; font-size: 9px; }
  .send-budget-track { width: 72px; }
  .send-toast { font-size: 11px; padding: 5px 10px; }
  .hud-income-rate { font-size: 9px; }
}