/*
  Phone layout.

  Desktop and tablet already work, so nothing here applies above 620px. The one
  exception is the touch block at the bottom, which is keyed on pointer type
  rather than width — an iPad needs it as much as a phone.

  The reason the game was unplayable on a phone was a single declaration in
  styles.css: `@media (max-width: 1050px) { body { min-width: 900px } }`. That
  pins the page at 900px on every screen below 1050px, so a 390px iPhone got a
  900px canvas and horizontal scrolling. iPad landscape is 1024px, close enough
  to 900 that nobody noticed.

  Three more grids carried hard minimums that overflow a phone on their own:
    .adventure-bar   820px
    .controls-row    840px
    .board           560px (7 slots x 80px)

  One thing to know before editing this file: it is not the only phone layer.
  audio-ui.css carries a `@media (max-width: 760px)` block that already reflows
  the shell, and it loads first, so every rule here lands on top of that layout
  rather than on the desktop one. Rules written against the desktop layout can
  silently do nothing — the topbar is the cautionary tale. audio-ui.css turns it
  into a 3-column grid, so the `flex-wrap` + `order` this file used to set never
  applied, and the New Run button spilled past the right edge of a 393px iPhone.
  Anything that changes `display` or a grid template needs to restate it here.
*/

/*
  iOS shell behaviour, applied at every width.

  Safari sizes text up on its own unless text-size-adjust says otherwise, which
  breaks a layout this tightly packed. `touch-action: manipulation` drops the
  350ms double-tap-to-zoom delay, so buttons answer the first tap.
*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (hover: none) and (pointer: coarse) {
  html, body { overscroll-behavior-y: none; }

  /* Draggables are deliberately left out — they need `touch-action: none`, which
     the drag block at the bottom of this file gives them. */
  button, .shop-critter {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 620px) {
  /* ---- page shell ------------------------------------------------------ */
  body {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .game-shell {
    width: calc(100vw - 10px) !important;
    /* viewport-fit=cover puts the page under the home indicator, so the last
       control on the page needs the inset added back as padding. */
    padding: 6px 0 calc(22px + env(safe-area-inset-bottom)) !important;
  }

  /* ---- top bar: two rows, stated as an explicit grid -------------------- */
  /* audio-ui.css has already made this a grid by the time we get here, so the
     areas are spelled out rather than left to auto-placement — the round
     readout gets its own row and the three buttons get a column that fits. */
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo actions" "round round" !important;
    align-items: center;
    height: auto !important;
    gap: 3px 8px !important;
    padding: 6px 8px !important;
  }

  .topbar .logo { grid-area: logo; min-width: 0; }
  .topbar .logo small { display: none; }
  .topbar-actions { grid-area: actions; gap: 6px; }
  .round-readout {
    grid-area: round;
    width: auto !important;
    text-align: center;
  }
  .round-readout strong { font-size: 16px; }
  .settings-button .sound-label,
  .locker-button span { display: none; }

  /* ---- matchup bar: two cards side by side, VS between them ----------- */
  .adventure-bar {
    grid-template-columns: 1fr 34px 1fr !important;
    margin: 0 5px !important;
    gap: 4px;
  }

  .hero-card { height: auto !important; min-height: 62px; padding: 5px 6px !important; }
  .hero-details .eyebrow { font-size: 7px; }
  .hero-details strong { font-size: 11px; }
  /* The rival's quip and camp readout are flavour — the health orb is not. */
  .hero-details small,
  .npc-readout,
  .rival-power,
  .player-sticker-bar { display: none !important; }
  .versus b { font-size: 11px; }
  .versus span { display: none; }
  .health-orb { width: 40px; height: 40px; }
  .health-orb b { font-size: 15px; }

  /* ---- arena ----------------------------------------------------------- */
  .arena-wrap {
    height: clamp(280px, 62vw, 360px) !important;
    margin-top: 8px;
    border-width: 3px !important;
    border-radius: 16px;
  }

  .arena-wrap.boss-encounter { height: clamp(300px, 70vw, 400px) !important; }

  .arena {
    padding: 34px 6px 16px !important;
    grid-template-rows: 1fr 18px 1fr;
  }

  /* No room for the upcoming-rivals rail on a phone. */
  .rival-rail { display: none !important; }
  .side-label { display: none !important; }
  .battle-banner { top: 4px; padding: 3px 10px; font-size: 8px; }
  .combat-feed { right: 6px; left: 6px; bottom: 4px; font-size: 8px; }

  /* ---- the battle line ------------------------------------------------- */
  /* 7 slots have to fit the screen, so the floor comes off the columns and the
     cards shrink. Names are already hidden on board; the stat pills stay. */
  .board {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .board-slot { height: 74px !important; }
  .board .critter-card { height: 74px !important; max-width: none !important; border-width: 2px !important; }
  .board .critter-portrait { width: 100% !important; height: 52px !important; top: 3px !important; font-size: 30px !important; }
  .board .stat { height: 19px !important; min-width: 19px !important; font-size: 11px !important; bottom: -6px !important; }
  .board .attack { left: -3px !important; }
  .board .heart { right: -3px !important; }
  .board .card-level { width: 17px !important; height: 17px !important; top: -6px !important; left: -3px !important; font-size: 8px !important; }
  .board .trait-dot, .board .ability-gem { display: none !important; }
  .board .activate-ability { bottom: 4px !important; right: 2px !important; min-width: 20px !important; height: 15px !important; }
  .board .activate-ability b { font-size: 7px !important; }
  .board-slot.empty span { font-size: 15px; }

  /* ---- controls -------------------------------------------------------- */
  /* The panel is a single stack at every width now — camp row, hero banner,
     acorn bar, Start Clash — matching the painted layout. This used to force
     two columns, which fought that and put the banner beside the camp card. */
  .controls-row {
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 10px 6px 12px !important;
    gap: 6px !important;
  }

  /* One track down here, so the grab plaque and the acorn count stack instead
     of being asked to share 380px. Both are placed explicitly because their
     desktop rules name column 2, which does not exist at this width. */
  .controls-row .grab-button,
  .controls-row .gold-bank { grid-column: 1 !important; }
  .controls-row .grab-button { max-height: 132px; }

  .camp-card, .hero-power-card { padding: 6px !important; }
  .power-copy small { display: none !important; }
  .gold-bank { padding: 7px 11px !important; }
  /* Start Clash is the one control that must never be hard to hit. */
  .battle-button { min-height: 52px; }

  /* ---- progress chips: the two-by-two board, tightened ----------------- */
  .progress-row {
    margin: 0 6px 12px !important;
    gap: 6px !important;
  }

  .progress-row > * { font-size: 9px; }
  .save-status, .difficulty-chip { display: none !important; }

  /* ---- market ---------------------------------------------------------- */

  /* The market panel casts a 7px hard drop shadow. A flat `margin: 0` here used
     to pull the pack heading up underneath it, clipping "YOUR PACK". */
  .market-section { margin: 0 6px !important; width: auto !important; }
  .bench-section { margin: 14px 6px 0 !important; width: auto !important; }
  .market-heading { flex-wrap: wrap; gap: 6px; }
  .market-heading h1 { font-size: 17px; }
  /* Hover lore cannot be reached by a finger, so it only wastes space. */
  .hover-lore { display: none !important; }

  /* ---- pack and trader cart ------------------------------------------- */
  .pack-row { grid-template-columns: minmax(0, 1fr) 84px !important; gap: 7px !important; }
  .bench {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    padding: 6px !important;
    min-height: 0 !important;
  }

  .bench .critter-card { height: 82px !important; }
  .bench .critter-portrait { width: 100% !important; height: 50px !important; font-size: 30px !important; }
  .bench .critter-name { font-size: 8px !important; }
  .sell-zone { min-height: 82px !important; }
  .sell-zone small { display: none; }

  /* ---- boss panel ------------------------------------------------------ */
  .enemy-board .boss-card { height: 210px !important; }
  .boss-art-frame { top: -14px !important; width: clamp(88px, 34%, 130px) !important; }
  .boss-copy { left: clamp(104px, 40%, 150px) !important; top: 12px !important; bottom: 40px !important; }
  .boss-card .boss-health { left: clamp(104px, 40%, 150px) !important; right: 14px !important; }
  .boss-inventory { width: auto !important; margin: 12px 6px 0 !important; }

  /* ---- modals ---------------------------------------------------------- */
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; padding: 16px 12px !important; max-height: 88dvh; overflow-y: auto; }
  .hero-draft, .difficulty-draft { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .locker-layout { grid-template-columns: 1fr !important; }

  /* The reward line on a draft card is pinned to the bottom corner. On a wide
     screen it is short enough to sit beside the description; at phone width the
     difficulty text wraps to two lines and lands on top of it. Put it back in
     flow so the card grows instead of overlapping itself. */
  .difficulty-choice { min-height: 0 !important; padding-bottom: 7px !important; }
  .difficulty-choice i {
    position: static !important;
    display: block;
    margin-top: 4px;
    line-height: 1.15;
  }
}

/*
  Landscape.

  Turning an iPhone sideways lands between the two phone breakpoints: 852px wide
  is above both this file's 620px and audio-ui.css's 760px, so the page fell all
  the way back to the desktop rules — including `body { min-width: 980px }` from
  ui-polish.css. That is the same horizontal-scroll bug the top of this file
  describes, just reached from the other direction, and it affects every current
  iPhone (844, 852, 926 and 932 CSS px on the long edge).

  Height, not width, is the constraint here: ~390px of it, minus Safari's bars.
  So the arena is sized against vh and the lower panels are left to scroll.
*/
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .game-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    /* In landscape the notch eats a side, not the top. The `max()` keeps a
       margin on hardware with no inset to report, so the hero card art is not
       flush against the bezel. */
    padding:
      4px
      max(8px, env(safe-area-inset-right))
      calc(16px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
  }

  .topbar { min-height: 44px; padding: 4px 8px !important; }
  .rival-rail { display: none !important; }

  /* The board has to stay on screen without a scroll, so the arena takes its
     height from the viewport rather than from the width. */
  .arena-wrap { height: clamp(200px, 58vh, 300px) !important; }
  .arena-wrap.boss-encounter { height: clamp(220px, 66vh, 330px) !important; }
  /* Two things here.

     The padding is `18% 13.5% 14%` by default, and percentage padding resolves
     against the *width* — so a 852x393 landscape arena reserved 153px of top
     padding inside 228px of height. Fixed pixels instead.

     The rows are spelled out for four children, not three: `.duel-ribbon` is
     display:none, so the in-flow children are enemy label, enemy board, player
     board, player label. The desktop `1fr 0 1fr` template lands the boards on
     the wrong rows once the labels are visible, which is why your own row came
     out 16px tall against the rival's 99px. */
  .arena {
    padding: 24px 8px 10px !important;
    grid-template-rows: auto 1fr 1fr auto !important;
  }

  .board-slot, .board .critter-card { height: clamp(64px, 21vh, 96px) !important; }
  .board .critter-portrait { height: clamp(44px, 15vh, 70px) !important; }

  /* There is width to spare in landscape, so the hero cards keep their quips
     and readouts — only the VS column between them gets narrowed. */
  .adventure-bar { grid-template-columns: 1fr 90px 1fr !important; }
  .hero-card { height: auto !important; min-height: 0 !important; }
  .modal { max-height: 92dvh !important; overflow-y: auto; }
  .locker-layout { grid-template-columns: 1fr 1fr !important; }
}

/* Very narrow phones (iPhone SE and friends). */
@media (max-width: 380px) {
  .board-slot, .board .critter-card { height: 64px !important; }
  .board .critter-portrait { height: 44px !important; font-size: 25px !important; }
  .market-heading h1 { font-size: 15px; }
}

/*
  Touch input, keyed on pointer type rather than screen width so it also covers
  an iPad. Without `touch-action: none` the browser claims the gesture and pans
  the page instead of letting the pointer-drag handlers move a pal, which makes
  dragging to the field or the trader cart impossible on a real device.
*/
@media (hover: none) and (pointer: coarse) {
  .critter-card,
  .board-slot,
  .sell-zone,
  .boss-relic {
    touch-action: none;
    -webkit-touch-callout: none;
  }

  /* Tap skills are bound to right-click on desktop, which a finger cannot do.
     The on-card button is the touch route, so make sure it is always present
     and big enough to hit. */
  .board .activate-ability {
    display: flex !important;
    min-width: 30px !important;
    height: 22px !important;
  }

  /* Chrome controls were sized for a mouse cursor and came out around 34px,
     under Apple's 44px minimum. The buttons that sit inside a card are left
     alone — growing those would push the art around — but the ones with room
     get it, and the small ones get a transparent pad instead. */
  /* The topbar selector is spelled out to outrank audio-ui.css's
     `.topbar-actions .settings-button`, which pins them to 35x34. */
  .topbar-actions .settings-button,
  .settings-button,
  .reroll-button,
  .upgrade-button {
    width: auto;
    min-width: 44px;
    min-height: 44px;
  }

  .paragon-chip,
  .garden-chip { min-height: 44px; }

  /* The wordmark doubles as the help button. */
  .topbar .logo { min-height: 44px; }

  .bench .evolve-button,
  .board .evolve-button { position: relative; }
  .bench .evolve-button::after,
  .board .evolve-button::after,
  .board .activate-ability::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Hover-only affordances never resolve on touch and can stick "on". */
  .critter-card:hover { transform: none !important; }
}