/* The phone and tablet catch screen.
 *
 * JUNTA PARANG needs a mouse to aim and a keyboard to move, so a visitor who
 * arrives on a touch-only device cannot play it. Rather than let them reach a
 * lobby whose READY button leads to a match they cannot control, they get the
 * wordmark and one plain line.
 *
 * Max, 2026-08-04: "the page should have a clear catch for that- showing the cool
 * wordmark, but being clear that this game 'requires mouse and keyboard to play' etc".
 *
 * WHY THIS IS CSS AND NOT JAVASCRIPT. Two reasons, both of them the point:
 *
 *  1. NO FLASH. A stylesheet decides before the first paint, so nobody ever sees
 *     a frame of a menu they cannot use. A script cannot promise that here: the
 *     server concatenates every <script src> in index.html into one bundle placed
 *     at the first script tag (server.mjs buildClientAssetSet, front-door.mjs
 *     replaceClientScripts), so a detection script in the head would drag the
 *     whole game bundle into the head for every visitor on every device.
 *  2. IT STAYS TRUE BY ITSELF. A media query is live. Pair a mouse to a tablet
 *     mid-visit and the catch comes down on its own, with nothing listening.
 *
 * FAILS OPEN, ON PURPOSE. The question asked is never "is this a phone" (a user
 * agent string is a guess, and a tablet with a keyboard case and a mouse is a
 * machine that plays fine). It is "does the browser report a fine pointer
 * anywhere on this device". The catch is revealed ONLY inside a query that
 * requires `not (any-pointer: fine)`, so any device reporting a mouse or trackpad
 * is let straight through whatever else it looks like. A browser too old to
 * understand the query throws the whole block away and also lets them through.
 *
 * THE LOOK IS MAX'S OWN PICK: number 08, "Corner brackets", from the catch-screen
 * board (landing/reviews/catchmock/, mockups/v08-brackets.html). His answer,
 * 2026-08-05, verbatim: "Use this one". So the screen is a flat near-black field,
 * four corner brackets, his drawn JUNTA PARANG lockup, and the line set in mono.
 *
 * THE LOCKUP IS A DRAWING, NOT TYPE, and it is a BACKGROUND rather than an <img>
 * on purpose: a background inside this media query is never fetched by a visitor
 * whose device reports a mouse, so nobody who can play the game downloads it. It
 * is drawn over a flat black layer in screen blend, exactly as the mockup wears
 * it, because the picture's own field is black and its glow fades into that
 * black; screen blend lets the glow survive untouched instead of being keyed out
 * and leaving a ragged edge. The words stay in the markup for a screen reader and
 * are taken out of sight here.
 *
 * PARANG IS DRAWN SMALLER AND DIMMER THAN JUNTA in this lockup, which wordmark
 * rule 4 disallows (planning/WORDMARK-DECISIONS.md). Max picked this card anyway
 * on 2026-08-05, and his pick is newer than the rule, so it stands for this
 * screen. Do not "correct" it back.
 */

/* The markup also carries `hidden`, so a visitor whose browser never got this
 * file (a newly added client file 404s on the live service until it restarts)
 * sees nothing rather than an unstyled block above the menu. The reveal below is
 * an ID rule and so outranks the browser's own [hidden] rule. */
#mobile-catch { display: none; }

@media (any-pointer: coarse) and (not (any-pointer: fine)) {
  #mobile-catch {
    position: fixed;
    inset: 0;
    /* Above the lobby, the canvas and the version chip. The game behind it keeps
     * its normal layout and is simply never seen or reached. */
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 5vmin, 34px);
    box-sizing: border-box;
    padding: clamp(20px, 7vmin, 56px);
    color: #e7eee8;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    text-align: center;
    background: #05080a;
  }

  /* The four corner brackets the card is named after. Decoration, and
   * pointer-events:none so the catch itself stays the thing under a finger
   * anywhere on the screen. */
  .mobile-catch-frame {
    position: absolute;
    inset: clamp(12px, 4vmin, 26px);
    pointer-events: none;
  }

  .mobile-catch-frame i {
    position: absolute;
    width: clamp(22px, 7vmin, 40px);
    height: clamp(22px, 7vmin, 40px);
    border: 2px solid #6f7f68;
  }

  .mobile-catch-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .mobile-catch-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .mobile-catch-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
  .mobile-catch-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

  /* The drawn lockup. The picture is square with the words centred inside it, so
   * the box takes that ratio and the drawing sizes itself within it. The flat
   * layer underneath is the screen blend's second half: it is the same colour as
   * the field, so the picture's black contributes nothing and its glow arrives
   * exactly as drawn. */
  .mobile-catch-brand {
    display: flex;
    width: min(96vw, 560px);
    aspect-ratio: 1 / 1;
    background-image: url("mobile-catch-wordmark.png"), linear-gradient(#05080a, #05080a);
    background-blend-mode: screen;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* JUNTA, PARANG and BATTLE ROYALE stay in the document for a screen reader and
   * leave the picture. Card 08 shows no BATTLE ROYALE chip, and whether this
   * screen wears one is still an open question on the board, so it is out of
   * sight rather than out of the page. */
  .mobile-catch-brand > span,
  .mobile-catch-brand small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mobile-catch-line {
    margin: 0;
    max-width: 20ch;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(13px, 3.8vmin, 20px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Landscape on a phone leaves very little height, so the lockup and the line
   * sit side by side rather than stacked, and the lockup takes a share of the
   * width instead of nearly all of it. (The board's sideways picture of this card
   * shows the lockup cropped: its mockup carries this same narrower rule, but a
   * later rule in that one file outranks it by accident. The rule its author
   * wrote is the one shipped here.) The height cap is what keeps it inside a
   * 390px-tall screen; the drawing is fitted inside its box, so a shorter box
   * shrinks it and never cuts it. */
  @media (orientation: landscape) and (max-height: 520px) {
    #mobile-catch { flex-direction: row; gap: clamp(20px, 5vw, 48px); }
    .mobile-catch-brand { width: min(46vw, 360px); max-height: 82vh; }
    .mobile-catch-line { max-width: 17ch; text-align: left; }
  }
}