/* ===================================================================
   Oryx Games — shared "arcade shell" chrome.
   Mirrors the polished Snake look so every game is consistent:
   topbar score, dark glowing stage, game-over overlay, restart,
   mute toggle, fade-in. Game-specific styles live in each page.
   =================================================================== */

.ar-wrap{
  /* Stage sizing knobs (shared by every game):
       --ar-w     desktop width cap for the play area
       --ar-h     vertical space the board may use (viewport minus the
                  fixed header + topbar + hint + bottom-nav clearance)
       --ar-ratio width/height of the board; games override per-board.
     The stage width is min(parent, --ar-w, --ar-h * ratio) so the board
     grows to fill the screen yet always fits on it — portrait boards stop
     overflowing, square/landscape boards get bigger than the old 560px. */
  --ar-w:760px;
  --ar-h:calc(100svh - 180px);
  --ar-ratio:1;
  max-width:840px;margin:0 auto;padding:16px 14px 110px;
  display:flex;flex-direction:column;align-items:center;gap:14px}

.ar-topbar{width:min(100%,var(--ar-w));display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.ar-back{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:#cdd1d8;font-size:.85rem;font-weight:600;text-decoration:none;transition:.16s}
.ar-back:hover{background:rgba(255,255,255,.09);color:#fff}
.ar-back svg{width:15px;height:15px}
.ar-scorewrap{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.01em}
.ar-scorewrap .lbl{color:#9aa0aa;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.ar-scorewrap .val{color:#fff;font-size:1.5rem;line-height:1;min-width:1.4ch;text-align:right;
  transition:transform .12s ease}
.ar-scorewrap .val.pop{transform:scale(1.28)}
.ar-best{color:#c79bff;font-size:.78rem;font-weight:700}

/* stage — square by default; pages override --ar-ratio (not aspect-ratio) */
.ar-stage{position:relative;
  width:min(100%,var(--ar-w));                               /* fallback if svh unsupported */
  width:min(100%,var(--ar-w),calc(var(--ar-h) * var(--ar-ratio)));
  aspect-ratio:var(--ar-ratio);
  border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(168,107,255,.10), transparent 55%),
    linear-gradient(160deg,#0c0d12,#08090d 60%,#050608);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  opacity:0;transform:scale(.985);transition:opacity .6s ease, transform .6s ease;
  touch-action:none;user-select:none;-webkit-user-select:none}
.ar-stage.ready{opacity:1;transform:none}
.ar-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* game-over overlay */
.ar-over{position:absolute;inset:0;z-index:30;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px;
  background:radial-gradient(80% 80% at 50% 45%, rgba(8,9,13,.74), rgba(5,6,8,.93));
  backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.ar-over.show{display:flex;opacity:1}
.ar-over .ar-go-title{font-size:2.5rem;font-weight:900;letter-spacing:.01em;color:#fff;line-height:1.05;
  text-shadow:0 0 28px rgba(168,107,255,.45);transform:translateY(8px) scale(.96);
  opacity:0;transition:transform .42s cubic-bezier(.2,.9,.25,1.1) .06s, opacity .42s ease .06s}
.ar-over.show .ar-go-title{transform:none;opacity:1}
.ar-over .ar-go-sub{color:#c4c8d0;font-size:1rem;margin-top:2px;
  opacity:0;transition:opacity .4s ease .18s}
.ar-over .ar-go-sub b{color:#c79bff;font-weight:800}
.ar-over.show .ar-go-sub{opacity:1}
.ar-over .ar-go-xp{color:#8fe6a4;font-size:.85rem;font-weight:700;min-height:1em;
  opacity:0;transition:opacity .4s ease .26s}
.ar-over.show .ar-go-xp{opacity:1}
.ar-btn{margin-top:16px;padding:12px 30px;border-radius:999px;border:1px solid rgba(199,155,255,.4);
  background:linear-gradient(180deg,#a86bff,#8f4ff0);color:#fff;font-size:1rem;font-weight:800;
  cursor:pointer;letter-spacing:.01em;box-shadow:0 10px 26px rgba(143,79,240,.4);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;opacity:0;translate:0 8px}
.ar-over.show .ar-btn{opacity:1;translate:0 0;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease, opacity .4s ease .32s, translate .4s ease .32s}
.ar-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 32px rgba(143,79,240,.55);filter:brightness(1.06)}
.ar-btn:active{transform:translateY(0) scale(.98)}

/* hint row */
.ar-hint{color:#7e848e;font-size:.8rem;text-align:center;line-height:1.5;max-width:480px}
.ar-hint b{color:#aab0ba;font-weight:700}
.ar-mute{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  color:#9aa0aa;background:none;border:none;font-size:.8rem;font-weight:600}
.ar-mute svg{width:15px;height:15px}
.ar-mute.off{color:#6b7079}

@media (max-width:560px){
  .ar-wrap{padding-left:6px;padding-right:6px}   /* reclaim width for the board on phones */
  .ar-over .ar-go-title{font-size:2rem}
  .ar-scorewrap .val{font-size:1.3rem}
}