/* ============================================================
   ARCADE SHELL — standardized game frame for cerebras.com
   Owns ALL geometry (desktop / tablet / mobile). Game CSS owns
   theme only (colors, fonts, HUD skin, overlay skin).

   Modes:
   - pointer:fine ........ desktop cabinet page (rails hidden)
   - hover:none + landscape "Switch mode": fixed 100dvh,
     [ left rail | 16:9 stage | right rail ]
   - hover:none + portrait  rotate gate, play hidden

   Theme hooks (set in game CSS on :root):
   --as-rail-bg, --as-line, --as-dim, --as-stick, --as-btn-a,
   --as-btn-b, --as-text
   ============================================================ */

:root {
  --as-rail-w: clamp(120px, 19vw, 200px);
  --as-topbar-h: 34px;
  --as-line: rgba(255, 255, 255, .2);
  --as-dim: #8a97a8;
  --as-text: #eef4fb;
  --as-rail-bg: linear-gradient(180deg, #0d1421, #05070c);
  --as-stick: rgba(120, 200, 255, .35);
  --as-btn-a: rgba(255, 61, 95, .45);
  --as-btn-b: rgba(88, 237, 255, .3);
}

html.as-game-page, body.as-game-page {
  width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden;
  overscroll-behavior: none; touch-action: none; -webkit-text-size-adjust: 100%;
}
body.as-game-page * { -webkit-tap-highlight-color: transparent; }
.as-root, .as-root * { box-sizing: border-box; }
.as-root { display: flex; flex-direction: column; }

/* ---------- play area skeleton ---------- */
.as-play { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; flex: 1; }
.as-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; }
.as-screen { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; }
.as-screen > canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* rails: hidden by default (desktop) */
.as-rail { display: none; }

/* hide-on-touch utility for side panels / rules / tickers */
@media (hover: none) { .as-hide-touch { display: none !important; } }

/* fill-fit screens (DOM dashboard games): no letterbox, internal scroll */
.as-screen[data-fit="fill"] { aspect-ratio: auto; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- rotate gate ---------- */
.as-rotate-gate { display: none; position: fixed; inset: 0; z-index: 999; place-items: center; background: #05050a; color: var(--as-text); text-align: center; font-family: inherit; }
.as-rotate-gate .as-rotate-icon { display: inline-block; width: 64px; height: 40px; border: 3px solid var(--as-text); border-radius: 8px; margin-bottom: 18px; animation: as-rotate 1.6s ease-in-out infinite; }
.as-rotate-gate p { margin: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--as-dim); }
.as-rotate-gate strong { display: block; margin-top: 6px; font-size: 14px; letter-spacing: .16em; color: var(--as-text); }

@keyframes as-rotate { 0%, 20% { transform: rotate(0deg); } 55%, 100% { transform: rotate(90deg); } }

/* ============================================================
   SWITCH MODE — any touch device, landscape
   ============================================================ */
@media (hover: none) and (orientation: landscape) {
  body:has(.as-root), body[data-as-immersive] { height: 100dvh; overflow: hidden; overscroll-behavior: none; }

  .as-root {
    position: fixed; inset: 0;
    height: 100dvh; width: 100dvw;
    padding: 0;
  }

  /* deep-field standard: the game IS the screen; everything else floats */
  .as-root { display: block; }
  .as-topbar { display: none !important; }
  .as-play { position: absolute; inset: 0; display: block; }
  .as-stage { position: absolute; inset: 0; display: grid; place-items: center; }

  /* rails: transparent overlay columns riding on top of the game */
  .as-rail {
    position: absolute; top: 0; bottom: 0; z-index: 6;
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-evenly;
    gap: 10px; width: var(--as-rail-w);
    padding: 44px 6px max(10px, env(safe-area-inset-bottom));
    background: none; border: 0;
    pointer-events: none; touch-action: none;
  }
  .as-rail > * { pointer-events: auto; }
  .as-rail-left { left: 0; padding-left: max(6px, env(safe-area-inset-left)); }
  .as-rail-right { right: 0; padding-right: max(6px, env(safe-area-inset-right)); }
  .as-root[data-rails="right"] .as-rail-left { display: none; }
  .as-root[data-rails="none"] .as-rail { display: none; }

  .as-footer { display: none !important; }
}

/* ---------- sticks & buttons (touch only) ---------- */
.as-stick { position: relative; width: clamp(84px, 9.5vh, 118px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(0, 0, 0, .14); touch-action: none; backdrop-filter: blur(2px); }
.as-stick i { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; margin: -21% 0 0 -21%; border-radius: 50%; background: var(--as-stick); border: 1px solid var(--as-line); pointer-events: none; }
.as-stick-label { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; color: var(--as-dim); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }

.as-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* clusters for pad-style games */
.as-cluster { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.as-cluster--row { flex-direction: row; }
.as-dpad { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; justify-items: center; align-items: center; }
.as-dpad .as-dpad-c { grid-column: 2; }
.as-btn { width: clamp(50px, 6.5vh, 64px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: rgba(255, 255, 255, .92); font: 700 9px/1 inherit; text-transform: uppercase; letter-spacing: .06em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(2px); }
.as-btn--sm { width: clamp(40px, 5.2vh, 52px); font-size: 8px; }
.as-btn--wide { width: clamp(64px, 9vh, 84px); border-radius: 14px; aspect-ratio: 4 / 3; }
.as-btn--dim { background: rgba(255, 255, 255, .07); }
.as-btn:active { filter: brightness(1.35); transform: scale(.94); }
.as-btn-a { background: var(--as-btn-a); }
.as-btn-b { background: var(--as-btn-b); }

/* ============================================================
   PORTRAIT GATE — touch device held vertically
   ============================================================ */
@media (hover: none) and (orientation: portrait),
       (any-pointer: coarse) and (orientation: portrait) {
  body:has(.as-root), body[data-as-immersive] { height: 100dvh; overflow: hidden; }
  .as-rotate-gate { display: grid !important; visibility: visible !important; }
  .as-root { visibility: hidden; }
  /* immersive games (fullscreen-canvas): hide everything behind the gate */
  body[data-as-immersive] > :not(.as-rotate-gate) { visibility: hidden; }
  body[data-as-immersive] > .as-rotate-gate,
  body[data-as-immersive] > .as-rotate-gate * { visibility: visible !important; }
}

/* immersive desktop chip floats over the viewport */
body[data-as-immersive] .as-fs-stage-btn { position: fixed; right: 14px; bottom: 14px; opacity: .35; }
body[data-as-immersive] .as-fs-stage-btn:hover { opacity: 1; }

/* ============================================================
   DESKTOP — pointer:fine keeps the cabinet page flow.
   Game theme CSS styles .as-topbar/.as-screen frame itself.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .as-rail, .as-rotate-gate { display: none !important; }
  .as-fs-btn { display: none; } /* topbar chip is touch-only; desktop uses the stage chip */

  /* video-player style chip: bottom-right of stage, reveals on hover */
  .as-fs-stage-btn {
    position: absolute; right: 12px; bottom: 12px; z-index: 12;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--as-line); border-radius: 4px;
    background: rgba(0, 0, 0, .55); color: var(--as-text);
    font-size: 16px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .18s ease;
  }
  .as-screen:hover .as-fs-stage-btn, .as-fs-stage-btn:focus-visible { opacity: 1; }

  /* theater mode: fullscreen on .as-root — hide chrome, letterbox stage */
  .as-root:fullscreen { background: #000; }
  .as-root:fullscreen .as-topbar, .as-root:fullscreen .as-footer { display: none; }
  .as-root:fullscreen .as-play { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 0; box-shadow: none; }
  .as-root:fullscreen .as-screen { border: 0; }
}
.as-fs-stage-btn { display: none; }
@media (hover: hover) and (pointer: fine) { .as-fs-stage-btn { display: grid; } }

/* one-click install button (Chromium only — appears when installable) */
.as-install-btn { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 997; padding: 10px 16px; border: 1px solid var(--as-line); border-radius: 999px; background: rgba(5, 8, 15, .85); color: var(--as-text); font: 700 10px/1 inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.as-install-btn:hover { border-color: rgba(255,255,255,.5); }

/* standardized back chip — pinned upper-left on all touch game pages,
   above game start/gameover overlays so every pre-screen has an exit */
.as-back-chip { display: none; position: fixed; top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); z-index: 900; padding: 7px 14px; border: 1px solid var(--as-line); border-radius: 999px; background: rgba(5, 8, 15, .7); color: var(--as-text); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .as-back-chip { display: block; } }


/* fullscreen toggle chip (touch topbar) */
.as-fs-btn { border: 1px solid var(--as-line); background: rgba(0,0,0,.3); color: var(--as-dim); font: 500 9px/1 inherit; text-transform: uppercase; letter-spacing: .12em; padding: 6px 10px; border-radius: 3px; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .as-rotate-gate .as-rotate-icon { animation: none; transform: rotate(90deg); }
}