/* ============================================================================
   game-shell.css — shared chrome wrapped around every game page
   ----------------------------------------------------------------------------
   Loaded AFTER site.css on game pages (so it inherits the :root tokens).
   It styles the parts that are identical on every game, regardless of the
   game inside:
     - the always-on top banner ad slot (320x50)
     - the full-screen overlay system (.overlay / .overlay.active)
     - the rewarded gate            (#overlay-rewarded)
     - the interstitial             (#overlay-interstitial)
     - the game-over + affiliate CPA card (#overlay-gameover)
     - the push opt-in bar          (#push-bar)
     - generic ad-slot placeholders (dev dashed boxes)
   The IDs/classes here match exactly what ad-manager.js looks for.
   Individual games keep their OWN gameplay styling inline; this is only the
   monetization/shell frame so it stays consistent across all 5 games.
   ============================================================================ */

/* Game pages don't scroll the body — the canvas owns the viewport. */
body.sg-game {
  overflow: hidden;
  background: var(--bg);
}

/* ── GAME CANVAS WRAPPER ───────────────────────────────────────────────────
   CRITICAL (from briefing's Phaser rules): we NEVER set position from JS and
   we let CSS do the centering. The wrapper fills the area under the header +
   top banner; the canvas centers inside it. */
#game-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;                 /* games that show the shared header offset this via JS-free CSS below */
  bottom: 0;
  background: var(--bg);
  overflow: hidden;
  /* CSS owns canvas centering (Phaser runs NO_CENTER) — flex-center the canvas
     inside the available area below the header + banner. */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Game pages show the shared header (50px) + top banner (52px); the game area
   starts below both. On its own the header is sticky in normal flow, but the
   canvas is fixed, so we offset game-wrap explicitly. */
body.has-top-banner #game-wrap { top: 140px; }
/* On game pages the header sits above the fixed banner. */
body.sg-game .sg-header { position: fixed; top: 0; left: 0; right: 0; }

#game-wrap canvas {
  display: block !important;
  touch-action: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ── AD SLOTS (dev placeholders) ───────────────────────────────────────────
   In dev, ad-manager.js stamps "AdSense <format> (dev)" into empty .ad-slot
   boxes. These styles make them read as obvious dashed placeholders so nothing
   looks broken before real ad units are dropped in. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s1);
  border: 1px dashed var(--bd);
  color: var(--su);
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
}

/* Top banner: pinned below the 50px shared header, above the canvas. Sized for
   a horizontal leaderboard/banner ad (728x90 desktop, ~320x50/100 mobile). */
.ad-slot-top {
  position: fixed;
  top: 50px; left: 0; right: 0;
  height: 90px;
  z-index: 90;
  border-left: none;
  border-right: none;
  border-top: none;
  overflow: hidden;
}
/* A small "advertisement" cue above the strip keeps it honest/compliant. */
.ad-slot-top::before {
  content: 'ADVERTISEMENT';
  position: absolute;
  top: 2px;
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--su);
}

.ad-slot-300 { width: 300px; height: 250px; max-width: 100%; margin: 0 auto; }

/* ── DESKTOP SIDE RAILS (skyscrapers) ──────────────────────────────────────
   Games render a portrait canvas, so on wide screens there are big empty
   gutters left and right — ideal, non-intrusive ad space. These sit in those
   gutters, vertically centered, and are HIDDEN on mobile/tablet where the
   canvas fills the width (no room, and we never cover gameplay). */
.ad-rail {
  position: fixed;
  top: calc(50% + 26px);          /* nudge below the 50px header so it's centered in the play area */
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  max-height: calc(100vh - 140px);
  z-index: 85;                    /* above canvas backdrop, below header/banner/overlays */
}
.ad-rail-left  { left: 20px; }
.ad-rail-right { right: 20px; }

/* Only show side rails when there's genuinely room beside a portrait canvas. */
@media (max-width: 1099px) {
  .ad-rail { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERLAY SYSTEM — full-screen modal layers used by every game-shell screen
   ════════════════════════════════════════════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;                 /* tall content (e.g. game-over) scrolls... */
  -webkit-overflow-scrolling: touch;
  background: rgba(11, 12, 15, .94);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.overlay.active { display: flex; }
/* ...and the inner card uses margin:auto so it centers when it fits but is
   reachable (not clipped at the top) when it's taller than the viewport. */
.overlay > * { margin: auto; }

.overlay-inner {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 28px 24px;
}

.overlay-logo {
  font-family: var(--fc);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--tx);
  margin-bottom: 16px;
}
.overlay-logo em { font-style: normal; color: var(--ac); }

.overlay h2 { font-family: var(--fc); font-weight: 600; font-size: 22px; color: var(--tx); margin-bottom: 6px; }
.overlay p  { font-size: 13px; color: var(--mu); margin-bottom: 16px; }

/* Shared overlay button */
.ov-btn {
  width: 100%;
  font-family: var(--fc);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .5px;
  padding: 13px;
  border-radius: var(--r);
  background: var(--acd);
  border: 1px solid var(--ac);
  color: var(--tx);
}
.ov-btn:hover:not(:disabled) { box-shadow: 0 0 4px var(--ac), 0 0 14px var(--glow0), 0 0 32px var(--glow1); }
.ov-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── REWARDED GATE / LANDING SCREEN (#overlay-rewarded) ────────────────────── */
#ad-rewarded-container { min-height: 0; }   /* IMA mounts here in production */
.dev-only { font-family: var(--fm); font-size: 12px; color: var(--mu); margin: 12px 0; }
#dev-timer { color: var(--am); }
#btn-rewarded-skip { margin-top: 8px; }

/* The landing banner ad shown alongside the rewarded unit. */
.ad-slot-landing { width: 100%; max-width: 336px; min-height: 60px; margin: 14px auto; }

/* Play + Guide action row on the landing screen. */
.gate-actions { display: flex; gap: 10px; margin-top: 6px; }
.gate-actions > * { flex: 1; }
.ov-btn-ghost {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff); font-weight: 600; font-size: 15px; letter-spacing: .5px;
  padding: 13px; border-radius: var(--r);
  background: var(--s2); color: var(--tx); border: 1px solid var(--bd);
  text-decoration: none;
}
.ov-btn-ghost:hover { border-color: var(--bdb); color: var(--tx); box-shadow: 0 0 10px var(--glow2); }

/* ── INTERSTITIAL (#overlay-interstitial) ─────────────────────────────────── */
#overlay-interstitial .ad-slot-300 { margin-bottom: 16px; }
.int-timer-line { font-family: var(--fm); font-size: 12px; color: var(--mu); margin-bottom: 10px; }
#int-timer { color: var(--am); }

/* ════════════════════════════════════════════════════════════════════════════
   GAME OVER + AFFILIATE CPA CARD (#overlay-gameover)
   This is the money screen — standardized format across ALL games.
   ════════════════════════════════════════════════════════════════════════════ */
#overlay-gameover .overlay-inner { max-width: 400px; }

.go-score {
  font-family: var(--fc);
  font-weight: 700;
  font-size: 30px;
  color: var(--tx);
  margin-bottom: 4px;
}
.go-score span { color: var(--am); font-family: var(--fm); }
.go-msg { font-size: 13px; color: var(--mu); font-style: italic; margin-bottom: 14px; }

/* Humorous "stats" on the death screen — the fun part. */
.go-fun { list-style: none; text-align: left; margin: 0 0 12px; font-size: 13px; color: var(--mu); }
.go-fun li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--bd); }
.go-fun li:last-child { border-bottom: none; }
.go-fun b { color: var(--am); font-family: var(--fm); font-size: 12px; white-space: nowrap; }

/* One short topical line (kept light) — still gives the 300x250 ad some context. */
.go-context { font-size: 12px; color: var(--su); line-height: 1.5; text-align: left; margin: 0 0 14px; font-style: italic; }
.go-context b { color: var(--mu); font-style: normal; }

/* Optional per-game "flavor stats" rows shown above the CPA card (e.g. pump's
   bragging rights, drive-home's rap sheet summary). Each game fills these in. */
.go-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
.go-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}
.go-stat span { font-size: 11px; color: var(--mu); text-transform: uppercase; letter-spacing: .5px; }
.go-stat b { font-family: var(--fm); font-size: 15px; color: var(--tx); }
.go-stat b.gold { color: var(--am); }

/* Affiliate offer card — the primary CPA call to action. Styled to feel like a
   real sponsored unit (amber money accent) but visually distinct from gameplay
   so it never tricks the player; it just invites. */
.aff-card {
  text-align: left;
  background: var(--s2);
  border: 1px solid var(--bdb);
  border-radius: var(--rl);
  padding: 16px;
  margin-bottom: 14px;
}
.aff-logo { font-family: var(--fc); font-weight: 700; font-size: 16px; color: var(--am); margin-bottom: 6px; }
.aff-headline { font-family: var(--fc); font-weight: 600; font-size: 18px; color: var(--tx); line-height: 1.2; margin-bottom: 4px; }
.aff-sub { font-size: 12px; color: var(--mu); margin-bottom: 12px; }
.aff-btn {
  display: block;
  text-align: center;
  font-family: var(--fc);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  padding: 11px;
  border-radius: var(--r);
  background: var(--am);
  color: #1A1400;
}
.aff-btn:hover { box-shadow: 0 0 4px var(--am), 0 0 16px rgba(255,184,0,.45), 0 0 32px rgba(255,184,0,.2); }

.go-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.go-actions button {
  width: 100%;
  font-family: var(--fc);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  padding: 11px;
  border-radius: var(--r);
  background: var(--acd);
  border: 1px solid var(--ac);
  color: var(--tx);
}
.go-actions button:hover { box-shadow: 0 0 4px var(--ac), 0 0 14px var(--glow0), 0 0 32px var(--glow1); }
.go-actions a { font-size: 12px; color: var(--mu); padding: 6px; }
.go-actions a:hover { color: var(--tx); }

/* ════════════════════════════════════════════════════════════════════════════
   PUSH OPT-IN BAR (#push-bar) — slides up from the bottom, once per session
   ════════════════════════════════════════════════════════════════════════════ */
#push-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1100;          /* above overlays (1000) so it shows on the game-over screen */
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--s1);
  border-top: 1px solid var(--ac);
  box-shadow: 0 -4px 18px var(--glow2);
}
#push-bar.active { display: flex; }
.push-txt { font-size: 12px; color: var(--tx); letter-spacing: .3px; }
.push-y {
  font-family: var(--fc); font-weight: 600; font-size: 12px; letter-spacing: .5px;
  padding: 7px 16px; border-radius: var(--r);
  background: var(--acd); border: 1px solid var(--ac); color: var(--tx);
}
.push-n {
  font-family: var(--fc); font-size: 12px;
  padding: 7px 16px; border-radius: var(--r);
  background: transparent; border: 1px solid var(--bd); color: var(--mu);
}
.push-y:hover { box-shadow: 0 0 4px var(--ac), 0 0 14px var(--glow0); }
.push-n:hover { color: var(--tx); border-color: var(--bdb); }

/* ════════════════════════════════════════════════════════════════════════════
   COMING SOON teaser (placeholder games: number-go-up + any without source)
   A full-screen branded screen shown instead of a real game.
   ════════════════════════════════════════════════════════════════════════════ */
.soon-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(192,0,26,.10), transparent 60%),
    var(--bg);
}
.soon-ico { font-size: 64px; margin-bottom: 16px; filter: grayscale(.2); }
.soon-logo {
  font-family: var(--fc);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .5px;
  color: var(--tx);
  margin-bottom: 6px;
}
.soon-logo em { font-style: normal; color: var(--ac); }
.soon-game { font-family: var(--fc); font-weight: 700; font-size: 40px; color: var(--tx); line-height: 1; margin-bottom: 10px; }
.soon-headline {
  font-family: var(--fc);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ac);
  text-shadow: 0 0 12px var(--glow1);
  margin-bottom: 8px;
}
.soon-sub { font-size: 14px; color: var(--mu); max-width: 44ch; margin-bottom: 24px; }
.soon-back {
  font-family: var(--fc);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  padding: 11px 22px;
  border-radius: var(--r);
  background: var(--acd);
  border: 1px solid var(--ac);
  color: var(--tx);
}
.soon-back:hover { box-shadow: 0 0 4px var(--ac), 0 0 14px var(--glow0), 0 0 32px var(--glow1); }