/* ============================================================
   NEONBET · Game Details view (designer game.css, SPA-integrated)
   ------------------------------------------------------------
   The provided css/pages/game.css from the design package, scoped
   under #nb-game (the live css/pages/game.css already styles the
   game-launch OVERLAY, and .stat-row collides with the wallet
   panel — scoping isolates everything). Below the verbatim block:
   the SPA integration layer — view visibility (body.gd-open, the
   same model as body.cp-open), the in-frame player + controls, and
   the Theater / Fullscreen-fallback display modes. Mode switches
   are class toggles only; the iframe node and src never change.
   ============================================================ */

/* ---- View visibility (in-flow sibling of #nb-home / #nb-games) ---- */
#nb-game { display: none; }
body.gd-open #nb-game { display: block; }
body.gd-open #nb-home,
body.gd-open #nb-games { display: none !important; }

/* ============================================================
   Provided game.css (scoped)
   ============================================================ */

/* Shared site-grid primitive. There is NO global .container rule in the
   live cascade — every view defines its own scoped copy (topnav / #nb-home /
   #nb-games / .footer-inner). This one was missing, so the whole details
   page rendered full-bleed while header/footer sat on the 1320px grid. */
#nb-game .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) { #nb-game .container { padding: 0 var(--space-8); } }

/* Single centered column since the info sidebar was retired — the frame
   takes the full container width at every breakpoint. */
#nb-game .game-shell {
  margin-top: var(--space-6);
}

/* Frame */
#nb-game .game-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  aspect-ratio: 16/10;
  isolation: isolate;
}
@media (max-width: 700px) { #nb-game .game-frame { aspect-ratio: 4/5; } }
#nb-game .game-frame .bg {
  position: absolute; inset: 0; z-index: 0;
}
#nb-game .game-frame .bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
  filter: blur(16px) saturate(120%);
}
#nb-game .game-frame .bg .gd-bg-fallback { width: 100%; height: 100%; opacity: 0.55; filter: blur(16px) saturate(120%); }
#nb-game .game-frame .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(7,7,12,0) 0%, rgba(7,7,12,0.85) 70%, var(--bg-base) 100%);
}
#nb-game .game-frame .launcher {
  position: relative; z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
#nb-game .launcher-card {
  background: rgba(7,7,12,0.65);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  max-width: 380px;
  width: 100%;
}
#nb-game .launcher-thumb {
  width: 96px; height: 96px;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
#nb-game .launcher-thumb img { width: 100%; height: 100%; object-fit: cover; }
#nb-game .launcher-thumb .gd-thumb-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 44px; background: var(--bg-elevated); }
#nb-game .launcher-card h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
}
#nb-game .launcher-card .provider {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
#nb-game .launcher-actions {
  display: flex; flex-direction: column; gap: var(--space-2);
}
#nb-game .launcher-actions .btn { width: 100%; }
#nb-game .launcher-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Sections (Similar games) */
#nb-game .game-section { margin-top: var(--space-10); }
#nb-game .game-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
#nb-game .game-section p { color: var(--text-secondary); max-width: 70ch; }

/* Header strip above frame */
#nb-game .game-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
#nb-game .game-head a { color: var(--text-secondary); }
#nb-game .game-head a:hover { color: var(--neon-cyan); }
#nb-game .game-head .sep { color: var(--text-muted); }
#nb-game .game-head h1 { width: 100%; margin: var(--space-2) 0 0; font-size: var(--text-3xl); }
#nb-game .game-head .badges { display: inline-flex; gap: 4px; }

/* Not found */
#nb-game .notfound {
  padding: var(--space-12);
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  margin: var(--space-10) 0;
}
#nb-game .notfound h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
#nb-game .notfound .btn { margin-top: var(--space-4); }

/* ============================================================
   SPA integration layer — player, controls, display modes
   ============================================================ */

/* In-frame player: covers the frame above the blurred bg/launcher. */
#nb-game .gd-player { position: absolute; inset: 0; z-index: 2; background: #000; }
#nb-game .gd-player[hidden] { display: none; }
#nb-game .gd-player iframe { width: 100%; height: 100%; border: 0; display: block; }
#nb-game .gd-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--neon-cyan, #00E5FF); font-size: 1.05rem; letter-spacing: 2px;
  background: rgba(0,0,0,0.85);
}
#nb-game .gd-loading[hidden] { display: none; }
#nb-game .gd-msg {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center; padding: var(--space-6);
  background: rgba(7,7,12,0.92);
}
#nb-game .gd-msg[hidden] { display: none; }
#nb-game .gd-msg p { color: var(--text-primary); font-size: var(--text-lg); margin: 0; max-width: 40ch; }

/* Frame controls (Theater / Fullscreen / New tab) — inside .game-frame so
   they stay visible in native fullscreen. Appear only after launch. */
#nb-game .gd-controls {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; gap: 6px;
}
#nb-game .gd-controls[hidden] { display: none; }
#nb-game .gd-controls button,
#nb-game .gd-controls a {
  height: 32px; display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: var(--radius-md);
  background: rgba(7,7,12,0.82);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#nb-game .gd-controls button:hover,
#nb-game .gd-controls a:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* Theater mode: ONLY the player breaks out of the 1320px grid to a
   centered near-viewport width (24px safe gutter absorbs scrollbars);
   head/header/footer stay on the site grid and the Similar-games section
   steps aside. Negative-margin breakout, clamped by min() so viewports
   narrower than the grid never shrink the frame; no transforms (ancestor
   transforms displace stuck sticky elements). Exit restores standard
   geometry via the same control (label flips to "Exit theater"). */
#nb-game.gd-theater .game-frame {
  aspect-ratio: 16/9;
  margin-inline: min(0px, calc((100% - 100vw) / 2 + var(--space-6)));
}
#nb-game.gd-theater .game-section { display: none; }

/* Fullscreen fallback (browser Fullscreen API unavailable): fixed
   full-viewport frame. Escape or the control exits. */
#nb-game .game-frame.gd-fs-fallback {
  position: fixed; inset: 0; z-index: 4000;
  aspect-ratio: auto; border-radius: 0; border: none;
}

/* Native fullscreen element: let the frame fill the screen. */
#nb-game .game-frame:fullscreen { aspect-ratio: auto; border-radius: 0; border: none; }
#nb-game .game-frame:fullscreen .gd-player iframe { height: 100vh; }