/* The one piece of arcade chrome that lives INSIDE a cabinet: the link back out.
 *
 * Why this is its own file rather than part of arcade.css — arcade.css defines
 * `body`, `.site`, `.panel`, `.eyebrow` and `.primary-button`, every one of which a
 * cabinet's own stylesheet also defines. Linking it into a game would not add a
 * return link, it would restyle the game. So this file declares exactly one class,
 * hardcodes its own values instead of reading tokens, and is safe to link into any
 * cabinet regardless of what that cabinet's CSS is called or does.
 *
 * THE CABINET CONTRACT — adding a game to the arcade is exactly two lines in its
 * HTML, and nothing else:
 *
 *     <link rel="stylesheet" href="/arcade-return.css" />
 *     <a class="arcade-return" href="/">&#8592; Arcade</a>
 *
 * Both are path-absolute, not URL-absolute: no hostname is hardcoded anywhere in
 * this repo, so moving the arcade to a different domain costs a DNS change and
 * nothing else. That is deliberate — see docs/arcade.md.
 *
 * It is fixed to the viewport corner on purpose, so that on a screen with room to
 * spare a game only has to include the markup and never has to find room for it.
 * ⚠️ THAT STOPS BEING TRUE ON A PHONE — see the narrow-viewport block at the bottom
 * of this file, where the chip goes `absolute` and the cabinet reserves the strip.
 *
 * ⚠️ THE SURFACE STAYS NEUTRAL AND LIGHT; ONLY THE ACCENT IS THE ARCADE'S. This
 *    chip renders on top of a cabinet whose background this file cannot know — the
 *    elevator is near-black, Thumbspell is pale cream, the next one is anyone's
 *    guess. A light pill with a dark label is the one combination legible on both,
 *    which is why it is not simply restyled to the shell's navy. What DID change on
 *    2026-08-24 is that the border, ink and focus ring were the elevator's brown and
 *    brass — arcade chrome wearing one cabinet's colours, the same defect the
 *    landing had. They are now neutral, with the arcade's cyan for hover and focus. */

.arcade-return {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 999;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(15, 18, 30, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: #0f121e;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0.4rem 1rem rgba(24, 14, 9, 0.28);
}

.arcade-return:hover,
.arcade-return:focus-visible {
  background: #ffffff;
  border-color: #0e7490;
}

.arcade-return:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* ⚠️ NARROW VIEWPORTS: THE CORNER IS NOT FREE, AND A FIXED CHIP NEVER STOPS
 *    COVERING SOMETHING. Measured at 390x844 on 2026-08-29: the chip rendered on top of
 *    the NFL cabinet's eyebrow and the elevator's, and mid-shift — the elevator's play
 *    view is 3,768px tall on a phone — it went on hovering over the live status cluster
 *    at every scroll position. The fix has two halves and neither works alone:
 *
 *    HERE: below 760px the chip is `absolute` rather than `fixed`, so it belongs to the
 *    top of the page and scrolls away instead of riding down over the game. Above that
 *    the centred cabinet layouts leave the corner genuinely free and it stays fixed.
 *    760px is not a round number: NFL's column is 560px wide and centred, so its content
 *    is still under the chip's 103px right edge until the viewport reaches ~738px.
 *
 *    IN THE CABINET: whoever starts their content at the top-left reserves the strip in
 *    their OWN stylesheet, because only the cabinet knows its layout. This is the one
 *    exception to "a game never has to find room for it", and it is forced — on a phone
 *    there is no free corner to be fixed into. `AGENT.md` § cabinet contract carries it.
 *    ⚠️ Thumbspell must NOT do this: its canvas is `min(96vh, 850px)` inside a body with
 *    `overflow: hidden`, so top padding would clip the board's bottom edge — and it needs
 *    none, because the chip already sits clear above the canvas's rounded corner.
 *    Checked at 390px rather than assumed. */
@media (max-width: 760px) {
  .arcade-return {
    position: absolute;
  }
}

@media print {
  .arcade-return {
    display: none;
  }
}