/* arcade-mobile.css — make the games usable on a phone.
 *
 * THE PROBLEM, MEASURED RATHER THAN GUESSED.
 *
 * On a 375x812 phone held upright, Grave Stakes gives the board 361 of 812 pixels —
 * 44% of the screen. The header and wallet strip take 150, the controls take 226.
 * Baffles: "the canvas is too small and the controls take up so much of the page".
 *
 * Turned sideways it gets WORSE. Every media query in this arcade is width-based, so
 * a landscape phone (812 wide, 375 tall) is treated as a desktop: the board grows to
 * 560x560, the page becomes 1003 pixels tall, and you have to SCROLL to see the board
 * you are playing on. Not one rule anywhere consulted the height.
 *
 * THE FIX. On a short viewport the play surface is capped by the HEIGHT available
 * rather than the width, and the page is not allowed to grow taller than the screen.
 *
 * WHY dvh AND NOT vh. On phones the address bar slides away as you scroll, so `vh`
 * is the height of the TALLEST the viewport ever gets — which means a `100vh` element
 * is taller than what you can actually see, and the bottom of it sits under the
 * browser chrome. `dvh` tracks the real, current height. The `vh` line before it is
 * the fallback for older browsers, and must come first so newer ones override it.
 */

/* The play surfaces across all twelve cabinets. Listed explicitly rather than
   matched by something clever: the cabinets were built at different times and share
   no single wrapper class, and a rule that guesses would silently miss one. */
.board-stage,
.cabinet,
.stage,
.stage-wrap,
.machine,
.machine-wrap,
.crate-stage,
.pack-stage,
.card-shell,
.wheel-wrap,
.tower {
  --arcade-play-surface: 1;
}

@media (orientation: landscape) and (max-height: 560px) {
  /* Chrome above the board: the header, the wallet strip and the game's own title
     row. MEASURED on a 812x375 phone at 154px, not estimated — the first attempt
     guessed 96 and the board hung 58 pixels off the bottom of the screen, which is
     the sort of thing that looks fine in a screenshot of the top half.
     168 leaves a little air beneath. */
  :root { --arcade-chrome: 168px; }

  /* NO HEIGHT CAPS ON PLAY SURFACES.
   *
   * The obvious fix was to cap the board by the height available. It collapsed
   * Bonefall from 298px to 78px: that canvas is sized in JavaScript from its
   * container's measured size, so the cap made the container smaller, JS resized the
   * canvas to match, and the next measurement was smaller again.
   *
   * Eleven of the twelve cabinets contain a canvas somewhere and the markup does not
   * say which are the game and which are confetti — so ANY height cap on an ancestor
   * risks the same loop, invisibly, in one orientation only.
   *
   * What is left below changes LAYOUT and nothing about size, which cannot start that
   * loop. Making the boards themselves bigger in landscape is real per-game work.
   */

  /* SIDE BY SIDE, which is the whole point of turning the phone.
   *
   * These cabinets lay out as a grid that collapses to ONE column on a narrow screen,
   * stacking the side panel on top of the game. That is right for a phone held
   * upright and exactly wrong turned sideways: it produces a 616px-tall column on a
   * 375px-tall screen, which is what forced the page to scroll.
   *
   * Landscape gives width and takes away height, so the two go beside each other. The
   * game takes the larger share and is ordered FIRST — it is what somebody turned the
   * phone for, and on a left-to-right reading it belongs where the eye starts. */
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    align-items: start;
    gap: 8px;
  }
  .layout > .game { order: 1; min-width: 0; }
  .layout > .side {
    order: 2;
    min-width: 0;
    /* The paytable can be long. It scrolls WITHIN its column rather than making the
       page scroll, so the board never leaves the screen. */
    max-height: calc(100dvh - var(--arcade-chrome));
    overflow-y: auto;
  }

  /* The header is the first thing to give up space when there is none. The game is
     why somebody opened the page; the branding is not. */
  header {
    padding-block: 2px !important;
  }
  /* The brand block is 67px of a 375px screen — nearly a fifth of everything the
     player can see, spent on a logo they clicked past to get here. Shrunk rather
     than removed: it is still the way back to the lobby. */
  header .brand img,
  .arcade-brand-unified img { max-height: 26px !important; }
  header .brand,
  .arcade-brand-unified { gap: 6px !important; }
  header h1,
  .arcade-brand-unified .brand-sub,
  .intro,
  .fair,
  .side > .intro,
  .side > .fair {
    display: none !important;
  }
}

/* PORTRAIT is deliberately left alone.
 *
 * Measured on a 375x812 phone: Grave Stakes gives its board 361 of 375 available
 * pixels of width. It is already at 96% of everything it can have — the board is not
 * small because the layout wastes space, it is small because the phone is.
 *
 * So "make the canvas bigger in portrait" has almost nothing left to give, and the
 * only real wins are removing chrome (a header and wallet strip costing 150px) or
 * going fullscreen (reclaiming the browser bars). Both are deliberate design changes
 * rather than a stylesheet nudging numbers.
 *
 * The one portrait rule that was here capped .card-shell — which holds Buried
 * Fortune's scratch-foil canvas, sized in JavaScript from its container. It happened
 * not to bind on a tall phone and would have bitten on a short one, in exactly the
 * way that collapsed Bonefall. Removed rather than left as a trap for a smaller
 * screen than the one it was tested on.
 */

/* ── FULL SCREEN ──────────────────────────────────────────────────────────────
   The button that reclaims the browser's own 100-150px of chrome. Bottom-right,
   clear of the action controls at the bottom-centre, above the safe-area inset so
   it is not under an iPhone's home indicator. */
.fs-toggle {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 55;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(6,14,11,.74);
  backdrop-filter: blur(5px);
  color: #cfe9d8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
@media (min-width: 900px) { .fs-toggle { opacity: .45; } .fs-toggle:hover { opacity: 1; } }

/* The one-time iOS explanation. iPhone browsers cannot go fullscreen, so the route
   there is Add to Home Screen — worth explaining once, plainly, and not again. */
.fs-tip {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(2,6,5,.66);
  display: grid; align-items: end;
}
.fs-tip-panel {
  margin: 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #0b1512;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #dff3e6;
}
.fs-tip-panel strong { display: block; font-size: 15px; margin-bottom: 6px; }
.fs-tip-panel p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #a9c4b4; }
.fs-tip-panel b { color: #cfe9d8; }
.fs-tip-panel button {
  width: 100%; padding: 11px;
  border-radius: 11px; border: 0;
  background: #9cff00; color: #06120c;
  font-weight: 800; font-size: 14px;
}

/* Android's one-tap install. Sits beside the fullscreen button, hidden until Chrome
   confirms the site is installable — a button that cannot work is worse than none. */
.fs-install {
  position: fixed;
  right: calc(58px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 55;
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(156,255,0,.35);
  background: rgba(156,255,0,.14);
  backdrop-filter: blur(5px);
  color: #cfe9d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}
.fs-install[hidden] { display: none; }