/* ===========================================================================
   Infin8 Arcade - site design profile for Infin8 game landing pages

   Loaded AFTER the site stylesheet (/assets/style.css), which is the one
   source of the infin8apps.com tokens, type, .button, card and header rules.
   This file only maps the Arcade shell's furniture onto those site tokens; it
   defines no colours of its own except where it restores the play surface.

   Not loaded by Lone Wolf and Cub (creator branding).
   =========================================================================== */
:root {
  --line: var(--border);
  --purple: var(--accent);
  --good: var(--green);
}

/* The play surface keeps its calibrated Arcade palette: HUD, overlays and
   touch controls inside the stage must not shift with the page chrome. */
.game-stage {
  --bg: #050711; --panel: rgba(11, 16, 32, 0.88); --panel-solid: #080d1c;
  --line: rgba(119, 226, 255, 0.22); --cyan: #63e6ff; --purple: #b66cff;
  --accent: #b66cff; --text: #f5f7ff; --muted: #aeb7d2;
  line-height: 1.5;
}
.game-stage h1 { max-width: none; }
/* The site stylesheet's pill `.eyebrow` must not reach the start/result cards. */
.game-stage .eyebrow { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.15em; }

/* Page body: the site's type scale and background. */
body { font-size: 16px; }

/* Header: the site header treatment - full-bleed sticky glass bar. */
.game-topbar {
  position: sticky; top: 0; z-index: 20;
  min-height: 76px;
  margin-bottom: 14px;
  background: rgba(7, 9, 16, 0.78);
  box-shadow: 0 0 0 100vmax rgba(7, 9, 16, 0.78), 0 1px 0 100vmax var(--border);
  clip-path: inset(0 -100vmax);
  backdrop-filter: blur(18px);
}
.game-brand { color: var(--cyan); font-weight: 800; letter-spacing: -0.02em; }
.game-brand:hover { color: var(--accent-light); }
.game-brand img {
  width: 42px; height: 42px; padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 12px;
  background: rgba(10, 13, 22, 0.72); box-shadow: 0 8px 28px rgba(122, 92, 255, 0.32);
}
.game-brand small { color: rgba(57, 215, 238, 0.72); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; }

/* Topbar controls: the site .button shape. */
.game-topbar .icon-button, .game-topbar .text-button {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); color: var(--text);
  font-weight: 750;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.game-topbar .icon-button:hover, .game-topbar .text-button:hover {
  border-color: var(--border-strong); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px);
}
.game-topbar .text-button { color: var(--cyan); }
.session-chip { border-color: rgba(139, 92, 246, 0.46); background: rgba(139, 92, 246, 0.11); color: #d2c7ff; border-radius: 999px; }

/* Stage frame + note use the site card radius and border. */
.game-stage { border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.game-note { color: var(--muted); }

/* Information section: site card styling, eyebrow badges and links. */
.side-column { border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.side-column .side-card h2 { color: var(--text); font-size: 1.25rem; letter-spacing: -0.03em; }
.side-column .side-card p, .side-column .side-card li { color: var(--muted-strong); }
.side-column .eyebrow {
  display: inline-flex; padding: 5px 10px;
  color: #d2c7ff; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em;
  border: 1px solid rgba(139, 92, 246, 0.46); border-radius: 999px; background: rgba(139, 92, 246, 0.11);
}
.side-link { color: var(--accent-light); }
.side-link:hover { color: #d7ccff; }
.stat-row span, .stat-row a { color: var(--cyan); }
.side-card th { color: var(--muted); }

@media (max-width: 760px) {
  .game-topbar { min-height: 60px; margin-bottom: 8px; }
  .game-brand img { width: 34px; height: 34px; }
  .game-topbar .icon-button { min-height: 38px; padding: 6px 10px; white-space: nowrap; }
}