/* ---------------------------------------------------------------------------
   mobile.css — everything that exists only because the game is played on phones.

   Loaded after app.css so it can override without touching desktop rules. Kept
   out of app.css deliberately: that file is budgeted and near its ceiling, and
   the mobile rules are a coherent subject of their own.
   See docs/design/mobile-rework.md.
   --------------------------------------------------------------------------- */

/* ---- Right stick (aim) ----------------------------------------------------
   Floats to wherever the aiming thumb lands, so there is nothing to find. Purely
   an indicator — it must never eat the touches it is reporting on. */
#aimStick {
  position: fixed; z-index: 8; width: 116px; height: 116px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,120,120,0.35);
  opacity: 0; transition: opacity 0.12s ease; pointer-events: none;
}
#aimStick.on { opacity: 1; }
/* Anchored to a weapon button: the ring would just cover the button, so show the
   knob alone and let the button's own styling read through. */
#aimStick:not(.floating) { background: none; border-color: transparent; }
#aimKnob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,110,110,0.8); box-shadow: 0 0 12px rgba(255,110,110,0.6);
  pointer-events: none;
}

/* ---- The Shop ---------------------------------------------------------------
   The shop dashboard is built to fit exactly one desktop screen: a hard three
   column grid, rows of `minmax(0, 1fr)`, and `overflow: hidden` on the panel so
   nothing can scroll. On a phone those columns collapse to ~120px, the rows crush
   every card below its own content height, and because the panel refuses to
   scroll the overflow simply paints on top of itself — which is exactly the
   unreadable pile-up players sent in.

   So on narrow screens the dashboard stops being a dashboard. It becomes one
   column of full-width blocks, in reading order, and the page scrolls like a
   page. Desktop is untouched. */
@media (max-width: 760px) {
  /* Let it scroll. This is the single most important line in the file: without it
     everything below is still clipped. */
  #shopPanel.view.full { overflow-y: auto; overflow-x: hidden; max-width: 100%; }

  /* One column, natural heights, reading order. Dropping to flex discards the
     grid-template-areas entirely, so nothing can land on top of anything else. */
  .shop-dash { flex: 0 0 auto; }
  .shop-grid { display: flex; flex-direction: column; gap: 14px; }

  /* Every block sized by its content rather than by a crushed grid row. */
  .shop-grid > *, .shop-block.panelled, .spotlight,
  #bundlesSection, .right-col { min-height: 0; height: auto; flex: 0 0 auto; }
  .spot-pages, .spot-page, .spot-page .shop-block { height: auto; min-height: 0; }
  .spotlight .alpha-grid, .spotlight .skins-grid, .spot-bundles { flex: 0 0 auto; }

  /* Cards get a floor wide enough for their own text, and wrap instead of
     shrinking into each other. */
  .shop-dash .skins-grid,
  #weekSection .skins-grid,
  #availableTodaySection .skins-grid,
  .spotlight .skins-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
  #shopLootSection .loot-hero-grid, .loot-hero-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .spot-bundles { grid-template-columns: 1fr; }
  .alpha-mini-row { grid-template-columns: repeat(2, 1fr); }

  /* The Alpha hero card is a wide two-up row; stack it so the name, art and price
     each get the full width instead of overlapping the pinned stock badge. */
  .spotlight .alpha-item.big { flex-direction: column; text-align: center; padding-top: 34px; }
  .spotlight .alpha-item.big .alpha-badge,
  .alpha-item.big .alpha-badge { top: 9px; left: 50%; right: auto; transform: translateX(-50%); }
  .bundle-name { padding-right: 0; }
  .bundle-ribbon { position: static; display: inline-block; margin-bottom: 5px; }

  /* The carousel keeps its dots, but arrows are a mouse affordance and the pages
     are now stacked-readable anyway — give the touch target some room. */
  .spot-arrow { font-size: 26px; padding: 6px 12px; }
}

/* ---- In-game HUD: a reserved band, not three boxes fighting for one row -----
   Score (left), timer (centre) and standings (right) are all pinned to the same
   `top: 66px`. Their widths add up to ~450px, so on a 390px phone they simply sit
   on top of each other — which is why the screenshots show the arena code, the
   score and the standings interleaved into noise.

   On narrow screens they become two stacked rows instead: score and timer share
   the top row, standings and the room code get the row beneath. Everything stays
   in a band at the top, clear of the arena centre and of both thumbs. */
@media (max-width: 760px) {
  /* Row 1 — the timer alone in the centre, with the room code beside it on the
     left. Both are small and fixed-width, so they can share a line safely. */
  #timer {
    top: calc(58px + env(safe-area-inset-top, 0px));
    font-size: 17px; padding: 5px 12px; min-width: 74px;
  }
  #timer.intermission { font-size: 13px; }
  #roomChip {
    top: calc(60px + env(safe-area-inset-top, 0px)); left: 8px;
    transform: none; font-size: 12px; max-width: 33vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Row 2 — the two tall panels, one per side. Together they're the full width,
     which is exactly why they cannot also share a row with the timer. */
  #hud {
    top: calc(104px + env(safe-area-inset-top, 0px)); left: 8px;
    min-width: 0; max-width: 46vw; padding: 7px 10px; font-size: 12px;
  }
  #scoreboard {
    top: calc(104px + env(safe-area-inset-top, 0px)); right: 8px;
    min-width: 0; max-width: 48vw; padding: 7px 10px; font-size: 12px;
  }
  #scoreboard .sb-empty { font-size: 11px; max-width: none; }
  .stamina-label { font-size: 10.5px; margin: 6px 0 3px; }
}

/* ---- Popups vs. the play area ---------------------------------------------
   Anything shown WHILE PLAYING has two hard constraints on a phone: it must not
   cover the middle of the arena (that's where you are), and it must not land in
   either thumb's control zone. The reward toast broke both — pinned to
   `bottom: 40px`, i.e. straight across the joystick and the weapon buttons, so
   claiming a reward and staying alive were mutually exclusive. */
body.touch-device.playing #rewardToast {
  top: calc(206px + env(safe-area-inset-top, 0px));
  bottom: auto; max-width: 88vw; font-size: 14px; padding: 9px 14px;
}
body.touch-device.playing #rewardToast button { padding: 8px 14px; font-size: 13px; }

/* The kill feed sat bottom-right, underneath the weapon buttons. Move it to the
   left, above the joystick, where nothing is competing for the space. */
body.touch-device.playing #killFeed {
  right: auto; left: 8px; bottom: 178px;
  align-items: flex-start; max-width: 52vw;
}