/* ==========================================================================
   Metals Rush — game.css
   Namespaced .mrs-* throughout (short for the working title "Metal Rain
   Shooter" this was developed under — internal only, not user-facing).

   The game chrome (challenge panel, HUD, stage, overlays) is a deliberately
   FIXED dark "cockpit" theme — its own --mrush-* tokens below, not the
   site's var(--color-*) tokens — independent of the site's light/dark
   toggle. A real commercial game doesn't reskin its own UI when the host
   page's theme changes; it has one consistent look. Everything outside the
   game itself (How It Works, disclaimer, Explore More) still uses the
   site's normal classes/tokens, so it reads as a genuine page, not just a
   dark box dropped on a light site.
   ========================================================================== */

.mrs-challenge-panel,
.mrs-stage-wrap {
  --mrush-bg-1: #060b16;
  --mrush-bg-2: #101c38;
  --mrush-border: rgba(255,255,255,0.10);
  --mrush-border-strong: rgba(255,255,255,0.20);
  --mrush-text: #eef2fb;
  --mrush-text-muted: #93a1c2;
  --mrush-gold: #fbbf24;
  --mrush-gold-glow: rgba(251,191,36,0.45);
  --mrush-cyan: #22d3ee;
  --mrush-cyan-glow: rgba(34,211,238,0.4);
  --mrush-green: #34d399;
  --mrush-red: #f87171;
}

/* ---- Hero subtitle/tagline (calc-page-hero, light-theme site content —
   NOT the dark cockpit chrome; uses the site's own var(--color-*) tokens
   like the rest of the hero) ------------------------------------------- */
.mrs-hero-subtitle {
  margin-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--color-text-muted); text-transform: uppercase;
}
.mrs-hero-tagline {
  margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--color-primary);
  font-style: italic;
}

/* ---- Challenge panel / start screen ------------------------------------ */
.mrs-challenge-panel {
  max-width: 680px;
  margin: 28px auto 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 22% -10%, #1b2b52 0%, transparent 55%),
    linear-gradient(180deg, var(--mrush-bg-2), var(--mrush-bg-1));
  border: 1px solid var(--mrush-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 32px 26px;
  text-align: center;
  color: var(--mrush-text);
}
.mrs-challenge-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mrush-gold);
  text-shadow: 0 0 14px var(--mrush-gold-glow);
}
.mrs-challenge-title { font-size: 21px; font-weight: 800; margin-top: 10px; letter-spacing: -0.01em; }
.mrs-challenge-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 22px;
}
.mrs-challenge-stat {
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--mrush-border);
  border-radius: 14px;
  padding: 16px 8px;
}
.mrs-challenge-stat-num { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mrs-challenge-stat:nth-child(1) .mrs-challenge-stat-num { color: var(--mrush-gold); text-shadow: 0 0 16px var(--mrush-gold-glow); }
.mrs-challenge-stat:nth-child(2) .mrs-challenge-stat-num { color: var(--mrush-cyan); text-shadow: 0 0 16px var(--mrush-cyan-glow); }
.mrs-challenge-stat:nth-child(3) .mrs-challenge-stat-num { color: var(--mrush-green); text-shadow: 0 0 16px rgba(52,211,153,0.4); }
.mrs-challenge-stat-label { font-size: 10px; color: var(--mrush-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.mrs-challenge-note { font-size: 12.5px; color: var(--mrush-text-muted); margin-top: 16px; }

.mrs-theme-picker {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 24px;
}
.mrs-theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 82px; padding: 9px 5px;
  border: 1px solid var(--mrush-border); border-radius: 14px;
  background: rgba(255,255,255,0.03); cursor: pointer;
  font-family: var(--font); color: var(--mrush-text-muted); font-size: 10.5px; font-weight: 700;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mrs-theme-btn:hover { transform: translateY(-2px); border-color: var(--mrush-border-strong); }
.mrs-theme-btn[aria-pressed="true"] {
  border-color: var(--mrs-swatch, var(--mrush-cyan));
  color: var(--mrush-text);
  box-shadow: 0 0 0 1px var(--mrs-swatch, var(--mrush-cyan)), 0 8px 22px -6px var(--mrs-swatch, var(--mrush-cyan));
}
.mrs-theme-swatch {
  position: relative; width: 100%; height: 38px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, var(--mrs-sky-a), var(--mrs-sky-b) 55%, var(--mrs-ground));
}
.mrs-theme-swatch::after {
  content: attr(data-emoji); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.mrs-play-btn {
  margin-top: 26px; width: 100%; max-width: 320px;
  background: linear-gradient(135deg, var(--mrush-gold), #f59e0b);
  color: #241900; border: none; border-radius: 14px;
  font-family: var(--font); font-size: 17px; font-weight: 800;
  padding: 16px 22px; cursor: pointer;
  box-shadow: 0 12px 30px -8px var(--mrush-gold-glow), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mrs-play-btn:hover { transform: translateY(-2px); }
.mrs-play-btn:active { transform: translateY(0) scale(0.98); }
.mrs-play-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.mrs-fallback-note {
  margin-top: 14px; font-size: 12.5px; color: #fca5a5;
  background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px; padding: 9px 14px;
}
.mrs-fallback-note[hidden] { display: none; }

/* ---- Game stage --------------------------------------------------------- */
.mrs-stage-wrap {
  max-width: 760px; margin: 26px auto 0;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--mrush-border);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  background: var(--mrush-bg-1);
}
.mrs-stage-wrap[hidden] { display: none; }

.mrs-hud {
  display: grid; grid-template-columns: repeat(3, 1fr) auto auto;
  align-items: stretch; gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10,15,28,0.96), rgba(10,15,28,0.85));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mrush-border);
}
.mrs-hud-item {
  text-align: center; background: rgba(255,255,255,0.045);
  border: 1px solid var(--mrush-border); border-radius: 10px; padding: 7px 4px;
}
.mrs-hud-label { font-size: 9px; color: var(--mrush-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mrs-hud-value { font-size: 15.5px; font-weight: 800; color: var(--mrush-text); font-variant-numeric: tabular-nums; }
.mrs-hud-score .mrs-hud-value { color: var(--mrush-gold); text-shadow: 0 0 12px var(--mrush-gold-glow); }
.mrs-hud-gold .mrs-hud-value { color: var(--mrush-gold); }
.mrs-hud-bullets .mrs-hud-value { color: var(--mrush-cyan); text-shadow: 0 0 12px var(--mrush-cyan-glow); }
.mrs-hud-value.mrs-hud-bullets-low { color: var(--mrush-red) !important; text-shadow: 0 0 12px rgba(248,113,113,0.5); }
.mrs-pause-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mrush-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -2px 3px rgba(0,0,0,0.3);
  color: var(--mrush-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.mrs-pause-btn:hover {
  border-color: var(--mrush-cyan); color: var(--mrush-cyan);
  box-shadow: 0 0 14px var(--mrush-cyan-glow), inset 0 1px 1px rgba(255,255,255,0.16), inset 0 -2px 3px rgba(0,0,0,0.3);
}
.mrs-pause-btn:active { transform: scale(0.92); }
#mrsSoundBtn[aria-pressed="true"] { color: var(--mrush-red); border-color: rgba(248,113,113,0.4); }
#mrsSoundBtn .mrs-icon-sound-off { display: none; }
#mrsSoundBtn[aria-pressed="true"] .mrs-icon-sound-on { display: none; }
#mrsSoundBtn[aria-pressed="true"] .mrs-icon-sound-off { display: block; }

/* ---- Loading shimmer (challenge stats, before real prices arrive) ------- */
.mrs-challenge-panel.is-loading .mrs-challenge-stat-num {
  color: transparent !important; text-shadow: none !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  border-radius: 5px; display: inline-block; min-width: 56px; height: 24px;
  animation: mrsShimmer 1.5s ease-in-out infinite;
}
@keyframes mrsShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .mrs-challenge-panel.is-loading .mrs-challenge-stat-num { animation: none; }
}

.mrs-canvas-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--sticky-offset) - 260px);
  min-height: 440px;
  touch-action: none;
  background: #060b16;
}
canvas#mrsCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Touch controls (mobile) ---------------------------------------------
   A real control bar BELOW the canvas, not an absolutely-positioned overlay
   on top of it — the shooter sprite renders near the very bottom of the
   canvas (game.js's shooterReserve), so overlaying buttons there put the
   fire button directly on top of the gun as it moved. Living in normal
   document flow instead means the two can never occupy the same pixels.
   Move (left+right) shares one capsule anchored to the left corner; fire
   stands alone, larger, anchored to the right corner — a twin-stick layout
   sized for each thumb's natural resting corner. ---------------------------- */
.mrs-touch-controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10,15,28,0.97), rgba(6,11,22,1));
  border-top: 1px solid var(--mrush-border);
}
.mrs-touch-group {
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  border: 1px solid var(--mrush-border-strong);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), inset 0 -3px 8px rgba(0,0,0,0.35);
}
.mrs-touch-btn {
  pointer-events: auto;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,0.5);
  background: radial-gradient(circle at 33% 28%, rgba(34,211,238,0.34), rgba(9,14,26,0.95) 70%);
  box-shadow: 0 0 16px rgba(34,211,238,0.3), inset 0 1px 2px rgba(255,255,255,0.24), inset 0 -3px 5px rgba(0,0,0,0.35);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform .1s ease, box-shadow .15s ease;
}
.mrs-touch-btn:active {
  transform: scale(0.90);
  box-shadow: 0 0 10px rgba(34,211,238,0.45), inset 0 2px 6px rgba(0,0,0,0.5);
}
.mrs-touch-fire {
  width: 66px; height: 66px;
  border: 2px solid rgba(251,191,36,0.65);
  background: radial-gradient(circle at 33% 28%, rgba(251,191,36,0.45), rgba(9,14,26,0.95) 70%);
  box-shadow: 0 0 26px rgba(251,191,36,0.45), inset 0 1px 2px rgba(255,255,255,0.28), inset 0 -3px 5px rgba(0,0,0,0.35);
  font-size: 24px;
}
.mrs-touch-fire:active {
  box-shadow: 0 0 14px rgba(251,191,36,0.55), inset 0 2px 6px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
  .mrs-touch-controls {
    display: flex;
    /* The site's global floating share rail (.right-edge-stack, z-index
       2001) is fixed to the viewport's right edge and vertically centered
       on EVERY page — on a typical phone viewport that center can land
       right on this row (verified: it overlapped the fire button). Extra
       right padding keeps this control clear of it without touching that
       sitewide, page-independent widget. */
    padding-right: calc(64px + env(safe-area-inset-right));
  }
  /* Controls now claim their own row instead of floating over the canvas,
     so the stage's total height budget needs to shrink to match, or a short
     mobile viewport would have to scroll to reach them. */
  .mrs-canvas-wrap { max-height: calc(100vh - var(--sticky-offset) - 260px - 96px); }
}

/* ---- Overlays (pause / game-over) --------------------------------------- */
.mrs-overlay {
  position: absolute; inset: 0;
  background: rgba(6, 11, 22, 0.92);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; gap: 10px;
  color: var(--mrush-text);
}
.mrs-overlay[hidden] { display: none; }
.mrs-overlay h2 { font-size: 24px; font-weight: 800; text-shadow: 0 0 20px rgba(255,255,255,0.15); }
.mrs-overlay p { font-size: 13.5px; color: var(--mrush-text-muted); max-width: 320px; }
.mrs-overlay-btn {
  border: none; border-radius: 12px; padding: 12px 22px;
  font-family: var(--font); font-size: 14.5px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--mrush-cyan), #0ea5b8); color: #04202a;
  box-shadow: 0 10px 26px -8px var(--mrush-cyan-glow);
  margin-top: 4px;
}
.mrs-overlay-btn:hover { filter: brightness(1.08); }
.mrs-overlay-btn-secondary { background: rgba(255,255,255,0.08); color: var(--mrush-text); box-shadow: none; border: 1px solid var(--mrush-border-strong); }
.mrs-overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.mrs-gameover-score { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mrush-gold); text-shadow: 0 0 30px var(--mrush-gold-glow); }
.mrs-gameover-target { font-size: 14px; font-weight: 700; }
.mrs-gameover-target.is-beat { color: var(--mrush-green); }
.mrs-gameover-target.is-short { color: var(--mrush-red); }
.mrs-gameover-highscore { font-size: 12px; color: var(--mrush-text-muted); }

.mrs-share-wrap { position: relative; }
.mrs-share-dropdown {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0f1729; border: 1px solid var(--mrush-border-strong); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); padding: 8px; display: flex; gap: 6px; z-index: 5;
}
.mrs-share-dropdown[hidden] { display: none; }
.mrs-share-option {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.06); color: var(--mrush-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mrs-share-option:hover { background: rgba(34,211,238,0.18); color: var(--mrush-cyan); }

/* ---- Screen-reader-only live region -------------------------------------- */
.mrs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- No-scroll while playing ---------------------------------------------- */
body.mrs-playing { overflow: hidden; }

/* ---- Reduced motion / print ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mrs-play-btn, .mrs-theme-btn, .mrs-touch-btn { transition: none; }
}
@media print {
  .mrs-stage-wrap { display: none; }
}

/* ---- How It Works — light-theme page content, NOT the dark cockpit chrome
   (uses the site's own var(--color-*) tokens, consistent with .calc-howto's
   default styling elsewhere on the site, so it reads as a normal page
   section rather than a second dark box). --------------------------------- */
.mrs-howto-intro { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 20px; }
.mrs-howto-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.mrs-howto-card {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px 18px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mrs-howto-card:hover { border-color: var(--color-primary-tint-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mrs-howto-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; font-size: 19px;
  background: var(--color-primary-tint); margin-bottom: 12px;
}
.mrs-howto-card h3 { font-size: 15.5px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.mrs-howto-card p { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 640px) {
  .mrs-howto-grid { grid-template-columns: 1fr; }
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 600px) {
  .mrs-hud { grid-template-columns: repeat(3, 1fr) auto auto; gap: 5px; padding: 10px 8px; }
  .mrs-hud-label { font-size: 8px; }
  .mrs-hud-value { font-size: 13px; }
  .mrs-challenge-stats { grid-template-columns: 1fr 1fr; }
  .mrs-theme-btn { width: 68px; }
}

/* ==========================================================================
   Continent theme palettes — applied via [data-mrs-theme] on .mrs-stage-wrap
   (and each .mrs-theme-btn for its preview swatch). Read by game.js via
   getComputedStyle (single source of truth for color values — no
   duplication) to paint the canvas sky/landmark/sun-glow/ground; --mrs-sun
   drives the atmospheric glow orb, the others drive the sky/ground gradient
   and UI accent. Keep in sync with game.js's THEME_EMOJI map if you add a
   new theme.
   ========================================================================== */
[data-mrs-theme="asia"]          { --mrs-sky-a: #2b3a67; --mrs-sky-b: #6b8cae; --mrs-ground: #4a5a3a; --mrs-swatch: #d4a017; --mrs-sun: #ffb347; }
[data-mrs-theme="africa"]        { --mrs-sky-a: #e8935e; --mrs-sky-b: #f4c869; --mrs-ground: #8a6d3f; --mrs-swatch: #cc6b1f; --mrs-sun: #ffcf6e; }
[data-mrs-theme="europe"]        { --mrs-sky-a: #7fa8c9; --mrs-sky-b: #cfe4f0; --mrs-ground: #6b8f5e; --mrs-swatch: #4a7c8c; --mrs-sun: #fff3d6; }
[data-mrs-theme="north-america"] { --mrs-sky-a: #d97e4e; --mrs-sky-b: #f2b366; --mrs-ground: #a0522d; --mrs-swatch: #b8541f; --mrs-sun: #ffb066; }
[data-mrs-theme="south-america"] { --mrs-sky-a: #1e5c4a; --mrs-sky-b: #3f8f6f; --mrs-ground: #2d4a2a; --mrs-swatch: #2f9e44; --mrs-sun: #c9e77a; }
[data-mrs-theme="antarctica"]    { --mrs-sky-a: #0d1b2a; --mrs-sky-b: #3a6ea5; --mrs-ground: #dbe9f0; --mrs-swatch: #22c55e; --mrs-sun: #bff4ff; }
[data-mrs-theme="australia"]     { --mrs-sky-a: #c86b3a; --mrs-sky-b: #e89b5c; --mrs-ground: #8b3a1f; --mrs-swatch: #b83c1f; --mrs-sun: #ff7a45; }