/* ==========================================================================
   /arena1 — the embed shell for games/arena1/
   Deliberately self-owned: this page has no sidebar, no header and no layout,
   so it does NOT link styles.css. Pulling the site sheet in would bleed rail
   and section rules into a page with neither. Everything this page needs is
   here, and it is short on purpose.
   ========================================================================== */

*{box-sizing:border-box}

html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;                 /* the game owns the viewport; never scroll the shell */
  background:#0b0d12;              /* matches --page-bg, so any letterboxing reads as the site */
  overscroll-behavior:none;        /* no rubber-banding round the frame on touch */
}

/* Fixed rather than 100%/100%: a mobile URL bar collapsing must not resize the
   game mid-session, and dvh keeps it honest when it does. */
.arena1-frame{
  position:fixed;inset:0;
  width:100vw;height:100vh;height:100dvh;
  border:0;display:block;
}

/* --------------------------------------------------------------------------
   Exit button
   Sits over the game, so it cannot rely on contrast with whatever is painted
   underneath — a sunset sky at the top-right would swallow a bare glyph.
   It carries its own chip: opaque dark fill, light stroke, and a shadow to
   lift it off bright backgrounds.
   z-index is deliberately absurd. The game stacks its own HUD and pause menu
   inside the iframe, but those are in another document and cannot paint over
   this; the number just has to beat anything in THIS document.
   -------------------------------------------------------------------------- */
.arena1-exit{
  /* MID-LEFT EDGE, not the top-right corner, and for the reason /surveyor's
     moved: the corner it used to sit in is where Arena 1 keeps #perf — the FPS,
     active-mesh, quality and LOD readout, pinned 18px from the top right. The
     chip covered it at EVERY width, not merely narrow ones. Games put their
     HUD in the corners, so any corner this shell picks collides with some game
     eventually, and the wrapper is the side that should move: the game does not
     know it is in a frame and cannot be asked to work around one.
     Measured at 1280x800 and 390x844: the vertical middle of an edge is clear
     in both, and the left one matches /surveyor so the two shells agree. */
  position:fixed;top:50%;left:14px;transform:translateY(-50%);z-index:2147483647;
  width:48px;height:48px;                 /* >=44px touch target, as the site uses elsewhere */
  display:grid;place-items:center;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.28);
  background:rgba(9,13,24,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#f1f3f4;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.arena1-exit svg{width:22px;height:22px;display:block}

/* Neutral rather than accent-tinted on purpose: the accent lives in
   localStorage and is applied by script.js, which this page deliberately does
   not load. Reproducing the palette here would be a second copy to keep in
   step for a hover colour — not worth the drift. */
/* Hover/active nudge is horizontal now, since the base transform already owns
   translateY for the centring. */
.arena1-exit:hover{
  border-color:rgba(255,255,255,.62);
  background:rgba(9,13,24,.96);
  transform:translateY(-50%) translateX(2px);
}
.arena1-exit:active{transform:translateY(-50%)}
.arena1-exit:focus-visible{outline:3px solid #9EE02B;outline-offset:3px}

@media(max-width:760px){
  /* An edge tab, the same device /surveyor uses and for the same reason: below
     this width the game's UI is as wide as the screen, so an inset square lands
     inside whatever is centred there. 32px rather than Surveyor's 38 because
     Arena 1's controls modal is wider for its viewport — 92vw, sitting 15px off
     the edge with 20px of padding, so the gutter to clear is 35px not 42. */
  .arena1-exit{
    left:0;width:32px;height:56px;
    border-radius:0 12px 12px 0;
    border-left:0;
  }
  .arena1-exit svg{width:17px;height:17px}
}

@media(prefers-reduced-motion:reduce){
  .arena1-exit{transition:none}
}