/* dude.com batch 35: arcade shell on phones (dude-owned shell only; bro's synced game bundles are not touched).
   Linked (with arcade-fit35.js) from every /arcade/<slug>/index.html (after batch 31's arcade-fit31.css) and from the hub
   /arcade/index.php. A new arcade sync rewrites those pages: re-run batch 35 (idempotent) or add both files to the
   dude-arcade templates.
   1. Top bar on a phone: the 4 links ("Arcade", "Surf", "All games", "Open Holy Dude") went off the right edge
      ("All gar", "Open Holy Dude" unreachable). Under 560 px they get their own row and wrap; nothing is cut.
   2. Hub on a 360 px phone was 390 px wide (sideways scroll): the 2-column game grid used 1fr columns, so the Daily Dude
      word tiles (5 x 28 px) set the column's minimum width. Columns may now shrink; the tiles scale.
   3. Start card on a portrait phone: the bottom ("Play a friend online") was cut off inside the board (390x844: content
      496 px in 457). The cover strip is slimmer, and on short phones it and the spacing give way.
   4. Phone held sideways (e.g. 844x390): the start / pause / results card was squeezed into the ~210 px board ("HARI",
      PLAY below the screen), and in a round against an adviser the "vs" strip pushed the board to y=245-543. Now the
      start / pause / results card is a full-screen card in two columns (PLAY on the first screen); in play the board
      takes the full height under the header (224 -> 259 px wide at 390 px tall) with the score bar and the "vs" strip
      beside it; "How to play" folds into a button. */

/* 1. top bar */
@media (max-width: 559px) {
  .ar-topin { flex-wrap: wrap !important; row-gap: 2px !important; padding-bottom: 6px !important; }
  .ar-top .ar-nav { order: 3; flex: 1 1 100% !important; margin-left: 0 !important; flex-wrap: wrap !important; overflow: visible !important; gap: 2px 4px !important; justify-content: flex-start !important; }
  .ar-top .ar-nav a { padding: 6px 9px !important; font-size: 12.5px !important; }
  .ar-top .ar-close { margin-left: auto; }
}

/* 2. hub grid */
@media (max-width: 520px) {
  .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ar-gc { min-width: 0; }
  .ar-tiles { padding: 10px 6px !important; }
  .ar-tiles span { width: clamp(15px, 5.6vw, 28px) !important; height: clamp(15px, 5.6vw, 28px) !important; font-size: clamp(10px, 3.2vw, 15px) !important; }
}

/* 3. start card, portrait phones: the 16:4 cover strip (decoration; the game's art is on the board) gives way */
@media (max-width: 520px) and (orientation: portrait) {
  .ah-panel .ah-cover { display: none !important; }
  .ah-p2 { padding: 10px 12px 12px !important; }
  .ah-p2 .ah-seg, .ah-p2 .ah-opp { margin-top: 6px !important; }
  .ah-p2 .ah-dhint { margin: 2px 0 0 !important; }
}
/* narrow phones: the score bar's PAUSE chip ran 2 px past the bar */
@media (max-width: 380px) {
  .ah-bar { padding: 6px 8px !important; gap: 6px !important; }
  .ah-bar .ah-chip { padding: 4px 7px !important; }
}
/* PLAY + "Play vs <adviser>" side by side (arcade-fit35.js puts both in .dc35-row): no extra height */
.ah-p2 > .dc35-row { order: 1; display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.dc35-row > .ah-go { flex: 1 1 0; min-width: 0; margin: 0 !important; padding-left: 8px !important; padding-right: 8px !important; }
.dc35-vs { flex: 1 1 0; min-width: 0; margin: 0; min-height: 44px; padding: 6px 10px; border-radius: 999px; cursor: pointer; background: transparent;
  color: var(--text, #eef0f6); border: 1.5px solid var(--acc, #a78bfa); font: 800 14px/1.15 var(--font-body, system-ui); }
.dc35-vs:focus-visible { outline: 3px solid var(--acc-on-dark, #b9a4ff); outline-offset: 2px; }

/* 4. phone held sideways */
@media (orientation: landscape) and (max-height: 520px) {
  /* the board takes the whole height under the 26 px header; the score bar and the "vs <adviser>" strip move into the
     right-hand column beside it (they were above it: in a round vs an adviser the board started at y=245 of 390) */
  .ah { --ah-chrome: 44px !important; position: relative; }
  .ar-gp { grid-template-columns: min(calc((100dvh - 44px) * .75), 62vw) minmax(0, 1fr) !important; }
  .ah .ah-bar, .ah .ah-vs { position: absolute !important; left: calc(100% + 14px); width: min(440px, calc(100vw - 100% - 48px)); margin: 0 !important; box-sizing: border-box; z-index: 2; }
  .ah .ah-bar { top: 0; }
  .ah .ah-vs { top: 52px; }
  /* "How to play" folds into a button at the bottom of that column (arcade-fit35.js toggles .dc35-open) */
  .ar-side.dc35-fold { max-height: none !important; overflow: visible !important; align-self: end; }
  .ar-side.dc35-fold > :not(.ar-eye) { display: none !important; }
  .ar-side.dc35-fold.dc35-open > :not(.ar-eye) { display: block !important; }
  .ar-side.dc35-fold.dc35-open { max-height: calc(100dvh - 60px) !important; overflow-y: auto !important; }
  .ar-side.dc35-fold > .ar-eye { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; margin: 0;
    border: 1px solid var(--line2, rgba(255,255,255,.17)); border-radius: 999px; background: var(--chip, rgba(255,255,255,.07)); }
  .ar-side.dc35-fold > .ar-eye::after { content: "\25B8"; }
  .ar-side.dc35-fold.dc35-open > .ar-eye::after { content: "\25BE"; }
  /* the start / pause / results card: full screen, two columns */
  .ah-ov { position: fixed !important; inset: 0 !important; z-index: 60 !important; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    background: rgba(7, 9, 11, .94) !important; align-items: center !important; }
  .ah-ov .ah-panel { max-width: min(760px, 100%) !important; max-height: 100% !important; overflow-y: auto !important; }
  .ah-ov .ah-cover { display: none !important; }
  .ah-ov .ah-p2 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 18px; align-items: start; padding: 10px 16px 12px !important; }
  .ah-ov .ah-p2 > * { grid-column: 1; }
  .ah-ov .ah-p2 > .ah-seg, .ah-ov .ah-p2 > .ah-opp, .ah-ov .ah-p2 > .ah-btn2, .ah-ov .ah-p2 > .ah-keys, .ah-ov .ah-p2 > .ah-note { grid-column: 2; }
  .ah-ov .ah-p2 > .ah-title { grid-column: 1 / -1; margin-bottom: 4px !important; }
  .ah-ov .ah-p2 .ah-seg, .ah-ov .ah-p2 .ah-opp { margin-top: 6px !important; }
  .ah-ov .ah-p2 .ah-btn { margin-top: 8px !important; }
  .ah-ov .ah-dseg button { white-space: nowrap; }
}