/* Lobby and account gate on a landscape phone.
 *
 * The lobby's four stylesheets contain no orientation or height query at all — every
 * breakpoint is max-width — so a 932x430 phone is treated as a small desktop and gets
 * the wide-screen type scale. Measured on device before this file existed:
 *
 *   account gate   1537px tall   3.6 screens, h1 at 47.6px, base font 23.8px
 *   lobby          2303px tall   5.4 screens
 *   first viewport header 84.5px + hero 261.2px  =  zero functional controls
 *   nav links      22.5px tall   half the 44px touch minimum
 *
 * This file is presentation only. It adds no DOM, changes no behaviour, and renames
 * nothing — the account gate still gates (tests assert `account-pending` on first
 * load), every id survives, and `.lobby-footer`, `data-play-mode` and `aria-pressed`
 * are untouched.
 *
 * Scoping rules this file obeys, learned the hard way from the existing cascade:
 *   - Nav rules are written against `#site-nav` (id). `.app-shell>header` loses to
 *     site-nav.css on specificity and silently does nothing.
 *   - Lobby rules are scoped under `.app-shell #play`, the convention ui-shell.css
 *     already uses, so nothing leaks into /ranked, /leaderboard or the match shell.
 *   - `#site-nav` is never hidden: the account gate reparents it, and the sign-in
 *     button it carries is the only route back to an account.
 *   - `#room`, `#waiting` and `#game` live INSIDE `#play`, so the two-column grid is
 *     re-flattened whenever a room opens, mirroring ui-shell.css.
 *
 * Loaded last so it wins at equal specificity.
 */

@media (orientation: landscape) and (max-height: 540px) {

  /* ---------------------------------------------- the account gate (first screen) */

  #account-entry { font-size: 15px; }

  /* 932px of width is the one resource this viewport has to spare, so the gate goes
     back to two columns rather than stacking into 3.6 screens of scroll. */
  #account-entry .entry-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    max-width: none;
    width: calc(100% - 24px);
    margin: 10px auto 12px;
    border-radius: 14px;
  }

  #account-entry .entry-hero { min-height: 0; padding: 18px 20px; }
  #account-entry h1 { font-size: 26px; margin: 0 0 8px; }
  #account-entry .entry-eyebrow { font-size: 11px; margin: 0 0 8px; }
  #account-entry .entry-hero-description { font-size: 14px; line-height: 1.45; }
  #account-entry .entry-tags { margin-top: 12px; gap: 6px; }
  #account-entry .entry-tags span { font-size: 11px; padding: 4px 8px; }
  #account-entry .entry-art-caption { display: none; }
  #account-entry #entry-hero-title .riftbonk-logo { font-size: 26px; }

  #account-entry .entry-panel { padding: 18px 20px; }
  #account-entry #entry-panel-title { font-size: 23px; margin: 0 0 6px; }
  #account-entry .entry-intro { font-size: 14px; margin: 0 0 14px; }
  #account-entry h2 { font-size: 17px; margin: 14px 0 8px; }
  #account-entry h3 { font-size: 15px; }
  #account-entry .entry-create > p { font-size: 14px; margin: 0 0 10px; }
  #account-entry label { font-size: 14px; }
  #account-entry .entry-field-help,
  #account-entry .entry-guest p { font-size: 13px; }
  #account-entry #entry-status { font-size: 14px; margin: 10px 0 0; }

  /* 44px is the floor, not the target — these were 64-72px. */
  #account-entry button { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  #account-entry .entry-primary { min-height: 46px; }
  #account-entry input:not([type=checkbox]) {
    min-height: 44px; padding: 10px 12px; margin: 6px 0 10px; font-size: 15px;
  }
  #account-entry #entry-code { font-size: 14px; }
  #account-entry .entry-warning { margin-top: 14px; padding: 10px 12px; }
  #account-entry .entry-warning strong { font-size: 14px; }
  #account-entry .entry-warning p { font-size: 12px; }
  #account-entry .entry-name-form { padding: 12px; margin: 0 0 14px; }
  #account-entry .entry-check { margin: 12px 0; }

  /* Playing as a guest is a legitimate choice, not a consolation. It shipped as a
     transparent button under a separator, which reads as a footnote; Hearthstone gives
     "Not Now" the same weight as "Sign In!" and never blocks a new player on identity.
     Same element, same handler, same id — only the weight changes. */
  /* Order, not markup: the panel becomes a flex column purely so guest can sit
     directly beneath "generate a code" instead of below the sign-in form, off the
     bottom of a 430px screen. DOM order, ids and handlers are untouched. */
  #account-entry #entry-content { display: flex; flex-direction: column; }
  #account-entry #entry-content > .entry-guest { order: 1; }
  #account-entry #entry-content > #entry-login { order: 2; }

  #account-entry .entry-guest { border-top: 0; margin-top: 14px; padding-top: 0; }
  #account-entry .entry-guest button {
    background: linear-gradient(115deg, #e9c98a, #cfa356);
    border-color: #e4c288;
    color: #2a1f0b;
    min-height: 46px;
    font-weight: 700;
  }
  #account-entry .entry-guest button:hover:not(:disabled) { background: #f2d8a4; }

  /* --------------------------------------------------------------- the left rail */

  /* Runeterra puts navigation down the left edge as icon-over-label, and it is the
     right trade on a phone in landscape: the axis this screen is short of is vertical,
     and the axis it has to spare is horizontal. A 78px rail costs nothing across and
     hands the whole 430px back to the game.
     `body > #site-nav` is deliberate — the account gate reparents the same element
     into #entry-nav, where it must stay a horizontal bar. Two ids beat this selector,
     so the gate's own rules keep winning there. */
  body.app-shell:not(.immersive) { padding-left: 0; }
  .site-account { padding: 11px 13px; font-size: 13px; }

  /* --------------------------------------------------------------------- the play view */

  .app-shell:not(.immersive) > main:has(> #play:not([hidden])) {
    padding: 10px 14px 14px;
  }

  /* The hero was 261px tall and contained no control a player could press. It keeps
     its identity and gives up its height; the copy and the three tags are decoration
     that the deck picker and mode chooser need the room for. */
  .app-shell #play > .lobby-hero {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 10px 16px;
  }
  .app-shell #play > .lobby-hero h1 { font-size: 21px; margin: 0; }
  .app-shell #play > .lobby-hero p { display: none; }
  .app-shell #play .hero-tags { display: none; }
  .app-shell .lobby-logo { font-size: 15px; margin-bottom: 2px; }

  /* Two columns: deck on the left, mode on the right, both above the fold. */
  .app-shell:not(.immersive) #play:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 12px;
  }
  .app-shell #play > #deck-picker { grid-column: 1; }
  .app-shell #play > #lobby { grid-column: 2; }

  /* A private room takes the whole width back, exactly as the wide layout does. */
  .app-shell #play:has(> #room:not([hidden])) { grid-template-columns: 1fr; }
  .app-shell #play:has(> #room:not([hidden])) > :is(#deck-picker, #lobby) {
    grid-column: 1 / -1;
  }

  .app-shell #play > :is(#deck-picker, #lobby) { padding: 14px; }
  .app-shell #play .picker-heading h2 { font-size: 19px; }
  .app-shell #play .picker-heading p { font-size: 13px; margin: 4px 0 0; }
  .app-shell #play .picker-heading .secondary { font-size: 13px; min-height: 44px; padding: 8px 12px; }
  .app-shell #play .eyebrow { font-size: 11px; margin-bottom: 4px; }

  .app-shell #play #picked-deck { padding: 10px; gap: 10px; margin: 10px 0; }
  .app-shell #play #picked-deck h3 { font-size: 17px; }
  .app-shell #play #picked-deck p { font-size: 13px; }
  .app-shell #play #picked-deck small,
  .app-shell #play #picked-deck .eyebrow { font-size: 11px; }
  .app-shell #play #deck-picker summary { font-size: 14px; padding: 10px 0; }
  .app-shell #play #deck-library summary span { font-size: 12px; margin-top: 3px; }
  .app-shell #play #deck-picker .fine { font-size: 12px; }
  .app-shell #play #deck-search { font-size: 14px; min-height: 44px; }
  .app-shell #play .deck-search-label { font-size: 13px; }
  .app-shell #play .deck-tile > strong { font-size: 14px; }
  .app-shell #play .deck-tile > :is(small, span:not(.tile-art)) { font-size: 12px; }
  .app-shell #play #load-deck { min-height: 44px; font-size: 14px; padding: 9px 12px; }

  /* The mode chooser and the match panel sit side by side inside the right column.
     Stacked, they put "Start practice" 1254px down — three screens below the fold on
     the one control that starts a game. */
  .app-shell #play .lobby-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 12px;
    margin-top: 12px;
  }
  .app-shell #play .play-mode-sections { gap: 10px; }
  .app-shell #play .play-mode-section { padding: 12px; }
  .app-shell #play .play-mode-section h3 { font-size: 15px; }
  .app-shell #play .play-mode-section > p { font-size: 12px; margin: 4px 0 10px; }
  .app-shell #play .play-mode-section .play-modes { gap: 8px; }
  /* 54px was comfortable; 46px still clears the 44px floor and buys three rows. */
  .app-shell #play .play-modes button { min-height: 46px; font-size: 14px; padding: 8px 10px; }

  .app-shell #play .match-configuration { padding: 14px; }
  .app-shell #play .match-settings { margin: 0 0 12px; }
  .app-shell #play :is(.match-settings, .play-panel) label { font-size: 13px; }
  .app-shell #play :is(input:not([type=hidden]):not([type=range]), select) {
    font-size: 15px; min-height: 44px; margin-top: 4px;
  }
  .app-shell #play .play-panel { margin-top: 12px; padding-top: 12px; }
  .app-shell #play .play-panel h3 { font-size: 18px; margin: 0 0 8px; }
  .app-shell #play .play-panel p,
  .app-shell #play .play-panel li { font-size: 13px; line-height: 1.45; }
  .app-shell #play .play-panel .fine { font-size: 12px; }
  /* The one control that starts a game keeps its weight. */
  .app-shell #play .play-panel > .primary {
    min-height: 52px; font-size: 17px; padding: 12px 16px; margin-top: 12px;
  }
  .app-shell #play .ai-search-control summary { font-size: 13px; padding: 8px 0; }

  .app-shell #play .lobby-footer { font-size: 13px; margin-top: 12px; padding-top: 10px; gap: 10px; }
  .app-shell #play .lobby-footer button { font-size: 13px; min-height: 44px; }
  .app-shell #play .match-configuration > .fine { font-size: 12px; }

  /* ------------------------------------------------- the play tab fits one screen */

  /* The page itself never scrolls. #play is pinned to exactly one viewport and each
     of the three visual columns scrolls internally only if its own content is unusually
     tall — so a long deck list can never push the Start button off the bottom.
     Excluded when a room opens, because #room lives inside #play and needs the height. */
  /* Body owns the viewport and splits it between the play view and the Riot
     attribution footer, which is a policy requirement and does not get hidden — only
     made small. Scoped with :has so the deck builder still scrolls normally. */
  body.app-shell:not(.immersive):has(> main > #play:not([hidden])) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell:not(.immersive) > main:has(> #play:not([hidden])) {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.app-shell:not(.immersive):has(> main > #play:not([hidden])) > footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 14px;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .app-shell #play:not([hidden]):not(:has(> #room:not([hidden]))) {
    height: 100%;
    min-height: 0;
    align-content: stretch;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
    /* Without an explicit 1fr row the auto row grows to its tallest child, so the
       columns never hit their own overflow:auto and get clipped instead — which made
       "Play with friends" unreachable rather than scrollable. */
    grid-template-rows: minmax(0, 1fr);
  }

  /* align-self resolved to `auto`, so the columns rendered at content height (412px in
     a 331px row) and overflowed instead of scrolling. Stated explicitly. */
  .app-shell #play > :is(#deck-picker, #lobby) { align-self: stretch; max-height: 100%; }
  .app-shell #play > #deck-picker { min-height: 0; overflow: auto; }
  .app-shell #play > #lobby { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  /* minmax(0,1fr) rather than the default auto row: without it the grid track grows to
     its tallest child and the columns never reach their own overflow:auto. */
  .app-shell #play .lobby-content {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
    grid-template-rows: minmax(0, 1fr);
  }
  .app-shell #play .play-mode-sections,
  .app-shell #play .match-configuration { min-height: 0; overflow: auto; }

  /* The banner carries no control. On a 406px budget it was 18% of the screen. */
  .app-shell #play > .lobby-hero { display: none; }

  /* "01 / DECK  Choose your deck" plus an Edit deck button, above a card that already
     says SELECTED DECK. The rail is the navigation now, so Edit deck was a second way
     to reach the Deck builder tab and the heading was labelling a labelled thing. */
  .app-shell #play #deck-picker > .picker-heading,
  .app-shell #play #deck-picker .record-details { display: none; }

  /* The deck card keeps its art — it is the only thing on this tab worth looking at. */
  .app-shell #play #picked-deck { flex-direction: row; align-items: center; padding: 8px; gap: 10px; margin: 0 0 8px; }
  .app-shell #play #picked-deck .picked-art { width: 46%; flex-shrink: 0; gap: 8px; }
  .app-shell #play #picked-deck h3 { font-size: 14px; line-height: 1.25; }
  .app-shell #play #picked-deck p { font-size: 11px; line-height: 1.35; }
  .app-shell #play #picked-deck small,
  .app-shell #play #picked-deck .eyebrow { font-size: 10px; }
  .app-shell #play #deck-picker summary { font-size: 13px; padding: 8px 0; }

  /* Mode: keep the question, drop the paragraph explaining it. */
  .app-shell #play #lobby > .picker-heading { display: block; margin: 0; }
  .app-shell #play #lobby > .picker-heading h2 { font-size: 15px; }
  .app-shell #play #lobby > .picker-heading p,
  .app-shell #play #lobby > .picker-heading .eyebrow { display: none; }

  .app-shell #play .play-mode-sections { gap: 6px; }
  .app-shell #play .play-mode-section { padding: 8px 10px; }
  .app-shell #play .play-mode-section h3 { font-size: 12px; letter-spacing: .03em; }
  .app-shell #play .play-mode-section > p { display: none; }
  /* Solo and Play-with-friends have two options each; stacking them cost 92px of a
     406px budget for no reading benefit. Standard keeps one column — "Intermediate"
     does not survive a third of this width. */
  .app-shell #play .play-mode-section .play-modes {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell #play .play-mode-section .standard-queues { grid-template-columns: 1fr; }
  .app-shell #play .play-modes button { min-height: 40px; font-size: 13px; padding: 6px 8px; }

  /* The panel that actually starts a match. Its prose goes; its button does not. */
  .app-shell #play .match-configuration { padding: 10px; }
  .app-shell #play .match-settings { margin: 0 0 8px; }
  .app-shell #play :is(.match-settings, .play-panel) label { font-size: 11px; }
  .app-shell #play :is(input:not([type=hidden]):not([type=range]), select) { font-size: 13px; min-height: 38px; }
  .app-shell #play .play-panel { margin-top: 8px; padding-top: 8px; }
  .app-shell #play .play-panel h3 { font-size: 14px; margin: 0 0 6px; }
  .app-shell #play .play-panel > p,
  .app-shell #play .play-panel .fine,
  .app-shell #play .match-configuration > .fine { display: none; }
  .app-shell #play .play-panel > .primary { min-height: 46px; font-size: 15px; margin-top: 10px; padding: 10px 14px; }
  .app-shell #play .ai-search-control summary { font-size: 12px; padding: 6px 0; }

  /* "your deck" and "Open workshop" — the deck column and the rail both say this now.
     Hidden, not removed: app.js:2289 sets .lobby-footer.hidden on every mode press. */
  .app-shell #play .lobby-footer { display: none; }


  /* Shorter phones (iPhone 17 is 874x402; 844x390 per docs/FINDINGS.md). The 932x430
     tuning above leaves ~40px too much here, which clipped "Play with friends". */
  @media (max-height: 420px) {
    .app-shell:not(.immersive) > main:has(> #play:not([hidden])) { padding: 8px 10px; }
    body.app-shell:not(.immersive):has(> main > #play:not([hidden])) > footer {
      padding: 3px 10px;
      font-size: 8px;
      line-height: 1.3;
    }
    .app-shell #play #picked-deck { padding: 6px; gap: 8px; }
    .app-shell #play #picked-deck p { display: none; }
    .app-shell #play #picked-deck h3 { font-size: 13px; }
    .app-shell #play .play-mode-section { padding: 6px 8px; }
    .app-shell #play .play-modes button { min-height: 36px; font-size: 12px; }
    .app-shell #play :is(input:not([type=hidden]):not([type=range]), select) { min-height: 34px; }
    .app-shell #play .play-panel > .primary { min-height: 42px; font-size: 14px; }
  }
}

/* Portrait, which the deck builder now requests, puts the Dynamic Island over the
   header. The shell draws edge to edge on purpose (contentInsetAdjustmentBehavior is
   .never so the board can own the whole screen), so the page owes itself the inset.
   Outside the landscape block deliberately — this is the portrait case. */
@media (orientation: portrait) {
  body.app-shell > footer { padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px)); }
}