/* =================================================================
   СИМУЛЯТОР СКИНОВ — КЛИКЕР НОЖЕЙ АВП — v3
   Full UI rebuild: design tokens, clamp() adaptive scales,
   flex/grid layout, no ellipsis on buttons/tabs, no magic z-indexes.
   ================================================================= */

@font-face {
  font-family: "Gilroy";
  src: url("../assets/fonts/gilroy-heavy-italic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ============= DESIGN TOKENS ============= */
:root {
  /* COLORS */
  --color-bg-primary:   #121a26;
  --color-bg-secondary: #1a2434;
  --color-bg-tertiary:  #243046;
  --color-surface:      rgba(38, 50, 70, 0.82);
  --color-surface-hi:   rgba(50, 66, 92, 0.9);
  --color-overlay:      rgba(0, 0, 0, 0.55);
  --color-line:         rgba(255, 255, 255, 0.12);

  --color-accent:        #f5a623;
  --color-accent-active: #ff6b2d;
  --color-accent-glow:   rgba(245, 166, 35, 0.45);
  --color-gold:          #ffd24d;
  --color-info:          #5ab0ff;

  --color-text-primary:   #eef3fb;
  --color-text-secondary: #9aa6b5;
  --color-text-on-accent: #0a0f14;

  --color-success: #6ee07a;
  --color-warning: #ffd24d;
  --color-error:   #ff4d4d;

  /* RARITY */
  --r-consumer:   #b0c3d9;
  --r-industrial: #5e98d9;
  --r-milspec:    #4b69ff;
  --r-restricted: #8847ff;
  --r-classified: #d32ce6;
  --r-covert:     #eb4b4b;
  --r-special:    #e4ae39;

  /* SPACING (adaptive) */
  --space-xs: clamp(2px, 0.5vmin, 6px);
  --space-sm: clamp(4px, 1vmin,   10px);
  --space-md: clamp(8px, 2vmin,   16px);
  --space-lg: clamp(12px, 3vmin,  24px);
  --space-xl: clamp(20px, 4vmin,  32px);

  /* RADII */
  --radius-sm: clamp(4px, 1vmin,  10px);
  --radius-md: clamp(8px, 2vmin,  16px);
  --radius-lg: clamp(12px, 3vmin, 24px);
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-sm: 0 2px 6px  rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.5);
  --glow-accent: 0 0 18px var(--color-accent-glow);

  /* TEXT SCALE */
  --fs-xs:   clamp(10px, 1.8vmin, 14px);
  --fs-sm:   clamp(12px, 2.2vmin, 18px);
  --fs-base: clamp(14px, 2.8vmin, 22px);
  --fs-md:   clamp(16px, 3.5vmin, 28px);
  --fs-lg:   clamp(20px, 4.5vmin, 36px);
  --fs-xl:   clamp(26px, 6vmin,   48px);

  /* Z-INDEX */
  --z-game: 1;
  --z-hud: 10;
  --z-floating: 20;
  --z-nav: 30;
  --z-dropdown: 40;
  --z-toast: 50;
  --z-modal-backdrop: 60;
  --z-modal: 70;
  --z-toast-over-modal: 80;
  --z-critical: 100;

  /* FONT STACKS */
  --font-body:    'Rubik', 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Nunito', 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --font-logo:    'Gilroy', 'Nunito', 'Rubik', sans-serif;

  /* LAYOUT METRICS */
  --hud-h:      clamp(52px, 9vmin, 80px);
  --stats-h:    clamp(36px, 7vmin, 56px);
  --combo-h:    clamp(16px, 3vmin, 24px);
  --qa-h:       clamp(60px, 11vmin, 88px);
  --boosts-h:   clamp(28px, 5.5vmin, 44px);

  /* BACKWARD-COMPAT ALIASES (referenced by legacy selectors + JS) */
  --bg-0: var(--color-bg-primary);
  --bg-1: var(--color-bg-secondary);
  --bg-2: var(--color-bg-tertiary);
  --bg-3: #1c2633;
  --panel: var(--color-surface);
  --line:  var(--color-line);
  --acc:   var(--color-accent);
  --acc2:  var(--color-accent-active);
  --gold:  var(--color-gold);
  --ok:    var(--color-success);
  --bad:   var(--color-error);
  --info:  var(--color-info);
  --text:     var(--color-text-primary);
  --text-dim: var(--color-text-secondary);
}

/* ============= GLOBAL RESET ============= */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Block native image-drag affordance on Safari/iOS WebKit and any browser
   that honours the spec property — complements `<img draggable="false">`
   set by main.js for Android Yandex.Browser image-search panel. */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  position: fixed; inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(245,166,35,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 70%, rgba(220,80,140,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(90,176,255,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #1c2940 0%, #182236 45%, #1f2d48 100%);
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("../assets/bg_grid.png");
  background-size: cover; background-position: center;
  opacity: 0.12;
  filter: blur(2px) saturate(0.9);
  pointer-events: none;
  z-index: 0;
}

.hidden { display: none !important; }
.side-fx { display: none !important; }

button {
  font-family: inherit; font-weight: 700;
  border: 0; background: none;
  color: inherit; cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
img { pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Tabular figures for all numeric displays */
#coins, #stars, #per-click, #per-sec, #crit-chance, #kill-counter,
#xp-text, #combo-mult, #wave-number, #wave-time, #bomb-timer,
.c-val, .stat-chip b, .team-count, .dd-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =================================================================
   LOADER
   ================================================================= */
.loader {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-lg);
  background: radial-gradient(ellipse at center, #10171f 0%, #05080c 90%);
  z-index: var(--z-critical);
}
.loader-logo {
  font-family: var(--font-logo);
  font-size: var(--fs-xl);
  font-weight: 900; font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 24px var(--color-accent-glow);
}
.loader-logo span { color: var(--color-accent); }
.loader-bar {
  width: min(260px, 60vw);
  height: clamp(4px, 1vmin, 8px);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--color-line);
}
#loader-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--color-accent-active), var(--color-accent), var(--color-gold));
  box-shadow: 0 0 12px var(--color-accent);
  transition: width 0.2s;
}
.loader-hint {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
}

/* =================================================================
   PAUSE OVERLAY
   ================================================================= */
.pause-overlay {
  position: fixed; inset: 0;
  /* Must sit above the tutorial overlay (z-critical + 1) so a tab-switch /
     phone-call interruption while the tutorial card is still on screen
     leaves the player able to reach the resume button instead of trapping
     them behind a non-interactive overlay. */
  z-index: calc(var(--z-critical) + 5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background:
    radial-gradient(ellipse at center, rgba(8,12,20,0.85) 0%, rgba(0,0,0,0.94) 100%);
  backdrop-filter: blur(16px) saturate(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  animation: fadeIn 0.28s ease-out;
}
.pause-card {
  position: relative;
  width: clamp(260px, 86vw, 440px);
  padding: clamp(28px, 5vmin, 40px) clamp(20px, 4vmin, 32px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.98), rgba(11,16,23,0.98));
  border: 1px solid rgba(245,166,35,0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-lg),
    0 0 60px rgba(245,166,35,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
  isolation: isolate;
  animation: pauseCardIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pause-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,210,77,0.55), rgba(245,166,35,0.05) 40%, rgba(255,255,255,0) 80%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes pauseCardIn {
  from { opacity: 0; transform: scale(0.84) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pause-title {
  font-family: var(--font-logo);
  font-size: clamp(28px, 6vmin, 44px);
  font-weight: 900; font-style: italic;
  background: linear-gradient(180deg, #fff8d8 0%, #ffd24d 45%, #f5a623 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 0 18px rgba(255,210,77,0.55)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: pauseTitlePulse 2.4s ease-in-out infinite;
}
@keyframes pauseTitlePulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255,210,77,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,210,77,0.75)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
}
.pause-desc {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* =================================================================
   APP — ROOT LAYOUT (flex column, fills viewport)
   ================================================================= */
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1f2c44 0%, #16203288 100%);
  box-shadow:
    0 0 80px rgba(245,166,35,0.20),
    0 0 160px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(0,0,0,0.4);
  border-left: 1px solid rgba(245,166,35,0.12);
  border-right: 1px solid rgba(245,166,35,0.12);
  overflow: hidden;
  z-index: 1;
}

/* Desktop: fullscreen layout (no narrow phone frame) */
@media (min-width: 900px) {
  html, body { background: #05080c; }
  body::before { opacity: 0.05; }
  .app {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Landscape phones (e.g. iPhone 14 landscape 852×393) — release the
   560px portrait phone-frame so the game uses the full viewport width
   instead of leaving black gutters. */
@media (orientation: landscape) and (max-height: 500px) {
  .app {
    max-width: none;
    border: 0;
    box-shadow: none;
  }
}

/* =================================================================
   HUD — TOP BAR (absolute overlay — lets the play-area / screens go
   edge-to-edge behind it; children re-enable pointer events)
   ================================================================= */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding:
    calc(env(safe-area-inset-top) + var(--space-xs))
    calc(env(safe-area-inset-right) + var(--space-sm))
    var(--space-xs)
    calc(env(safe-area-inset-left) + var(--space-sm));
  z-index: var(--z-hud);
  min-width: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,12,0.72) 0%, rgba(5,8,12,0.35) 55%, transparent 100%);
}
.hud::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,0.35) 50%, transparent 100%);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-left, .hud-right {
  display: flex; align-items: center; gap: var(--space-xs);
  min-width: 0;
}
.hud-right { justify-content: flex-end; flex-wrap: nowrap; }

.rank-badge {
  position: relative;
  display: flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) calc(var(--space-xs) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.85), rgba(11,16,23,0.92));
  border: 1px solid rgba(245,166,35,0.28);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 18px rgba(245,166,35,0.12);
  min-width: 0;
  flex-shrink: 1;
  isolation: isolate;
}
.rank-badge::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,210,77,0.45), rgba(245,166,35,0.05) 40%, rgba(255,255,255,0) 80%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.rank-badge img {
  width: clamp(28px, 5.5vmin, 56px);
  height: clamp(28px, 5.5vmin, 56px);
  filter:
    drop-shadow(0 0 8px rgba(245,166,35,0.7))
    drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
  animation: rankIconPulse 3.6s ease-in-out infinite;
}
@keyframes rankIconPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(245,166,35,0.7)) drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,210,77,0.85)) drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
}
.rank-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,210,77,0.18);
}
.xp-wrap { display: flex; align-items: center; gap: var(--space-xs); }
.xp-bar {
  flex: 1 1 0;
  min-width: clamp(48px, 12vmin, 140px);
  height: clamp(7px, 1.4vmin, 11px);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.45));
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
#xp-fill {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.18) 100%),
    linear-gradient(90deg, var(--color-accent-active) 0%, var(--color-accent) 50%, var(--color-gold) 100%);
  width: 0%;
  transition: width 0.4s ease-out;
  position: relative;
  box-shadow: 0 0 10px rgba(245,166,35,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
#xp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: xpShine 2.8s ease-in-out infinite;
}
@keyframes xpShine {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(120%); }
}
#xp-text {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.currency {
  position: relative;
  display: flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 0;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, border-color 0.18s;
}
.currency.coins {
  border-color: rgba(255,210,77,0.4);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 16px rgba(255,210,77,0.18);
}
.currency.coins .c-val { color: var(--color-gold); text-shadow: 0 0 8px rgba(255,210,77,0.45); }
.currency.stars {
  border-color: rgba(123,220,255,0.4);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 16px rgba(123,220,255,0.18);
}
.currency.stars .c-val { color: #b5ecff; text-shadow: 0 0 8px rgba(123,220,255,0.45); }
.currency.coins .c-icon { color: var(--color-gold); }
.currency.stars .c-icon { color: #7bdcff; }
.currency.is-bumping { animation: currencyBump 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes currencyBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.c-icon {
  font-family: var(--font-logo);
  font-size: var(--fs-base);
  font-weight: 900;
  text-shadow: 0 0 8px currentColor;
  line-height: 1;
}
.c-val {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.icon-btn {
  position: relative;
  flex-shrink: 0;
  /* Yandex 1.10.1: minimum tappable area 44×44 CSS-px on every viewport.
     Lower clamp bound matches min-* so getBoundingClientRect reads ≥44. */
  width: clamp(44px, 9vmin, 56px);
  height: clamp(44px, 9vmin, 56px);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.94));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.1s ease, filter 0.1s ease, color 0.15s, border-color 0.15s, box-shadow 0.18s;
}
.icon-btn:hover {
  color: var(--color-gold);
  border-color: rgba(245,166,35,0.45);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 14px rgba(245,166,35,0.25);
}
/* Optional notification dot — JS can add a class .has-notif to surface it */
.icon-btn.has-notif::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7373, #ff3434);
  border: 2px solid rgba(11,16,23,0.95);
  box-shadow: 0 0 8px rgba(255,77,77,0.7);
  animation: notifPulse 1.4s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,77,77,0.55); }
  50%      { transform: scale(1.18); box-shadow: 0 0 12px rgba(255,77,77,0.9); }
}

/* =================================================================
   SCREENS CONTAINER (fills the space between HUD and bottom-nav)
   ================================================================= */
#screens {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding:
    calc(var(--hud-h) + env(safe-area-inset-top) + var(--space-sm))
    var(--space-sm)
    var(--space-sm);
  overflow: hidden;
}
.screen.active { display: flex; }
/* Play screen draws a fullscreen map + absolute overlay UI — it should
   NOT reserve HUD space via padding, the HUD floats above the map. */
#screen-play { padding: 0; }
/* Bronze hammer: belt-and-braces hiding of play-screen overlay elements
   (positioned absolutely relative to .app/#screens, some browsers keep
   them visible when the parent flips to display:none). */
#screen-play:not(.active) .weapon-showcase,
#screen-play:not(.active) .stats-row,
#screen-play:not(.active) .combo-wrap,
#screen-play:not(.active) .active-boost-bar,
#screen-play:not(.active) .quick-actions,
#screen-play:not(.active) .play-area,
#screen-play:not(.active) .wave-event,
#screen-play:not(.active) .bomb-event,
#screen-play:not(.active) .gold-drop {
  display: none !important;
}

.screen-title {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  white-space: nowrap;
}

/* =================================================================
   PLAY SCREEN — absolute overlay UI on top of the edge-to-edge map
   ================================================================= */
#screen-play { gap: 0; }

/* Play-area takes the whole screen, everything else floats over it. */
#screen-play .play-area {
  position: absolute; inset: 0;
}

.stats-row {
  position: absolute;
  top: calc(var(--hud-h) + env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  gap: clamp(4px, 1vmin, 8px);
  padding: 0 var(--space-sm);
  min-width: 0;
  z-index: 6;
  pointer-events: none;
}
.stats-row > .stat-chip { pointer-events: auto; }
.stat-chip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Yandex 1.10.1: chip is hover/active-styled and reads as interactive.
     Force min-height ≥44 CSS-px so it can never shrink below tap-target. */
  min-height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  padding: clamp(5px, 0.9vmin, 8px) clamp(4px, 1vmin, 10px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(50,68,98,0.88), rgba(28,40,62,0.92));
  border: 1px solid rgba(245,166,35,0.32);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: clamp(8.5px, 1.6vmin, 12px);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.15;
  text-transform: uppercase;
  font-weight: 700;
  overflow: hidden;
  isolation: isolate;
}
.stat-chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.45;
}
.stat-chip > span {
  white-space: nowrap; overflow: visible; min-width: 0;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: clamp(8.5px, 1.6vmin, 11px);
}
.stat-chip > span::before {
  font-size: 1em;
  margin-right: 1px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.stat-chip.click > span::before { content: "\26A1"; color: #ffcd6e; } /* ⚡ */
.stat-chip.dps   > span::before { content: "\1F552"; color: #7bdcff; } /* 🕒 */
.stat-chip.crit  > span::before { content: "\1F4A5"; color: var(--color-accent-active); } /* 💥 */
/* kill row chip already uses raw 💀 in span */
.stat-chip b {
  font-family: var(--font-display);
  font-size: clamp(13px, 2.6vmin, 18px);
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.stat-chip.click b { color: #ffcd6e; text-shadow: 0 0 8px rgba(255,205,110,0.45), 0 1px 2px rgba(0,0,0,0.6); }
.stat-chip.dps   b { color: #7bdcff; text-shadow: 0 0 8px rgba(123,220,255,0.45), 0 1px 2px rgba(0,0,0,0.6); }
.stat-chip.crit  b { color: var(--color-accent-active); text-shadow: 0 0 8px rgba(255,107,45,0.55), 0 1px 2px rgba(0,0,0,0.6); }
.stat-chip.kill  b { color: #ff7373; text-shadow: 0 0 8px rgba(255,77,77,0.55), 0 1px 2px rgba(0,0,0,0.6); }
.stat-chip.click { border-color: rgba(255,205,110,0.28); }
.stat-chip.dps   { border-color: rgba(123,220,255,0.28); }
.stat-chip.crit  { border-color: rgba(255,107,45,0.32); }
.stat-chip.kill  { border-color: rgba(255,77,77,0.32); }
.stat-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 12px color-mix(in srgb, currentColor 22%, transparent);
}

/* Tighter mobile spacing on smallest screens — preserve ≥44px tap height */
@media (max-width: 380px) {
  .stats-row { gap: 4px; padding: 0 6px; }
  .stat-chip { padding: 5px 5px; gap: 0; border-radius: 10px; min-height: 44px; }
  .stat-chip > span { font-size: 8.5px; letter-spacing: 0; }
  .stat-chip b { font-size: 13px; }
}

.combo-wrap {
  position: absolute;
  top: calc(var(--hud-h) + env(safe-area-inset-top) + var(--stats-h) + var(--space-xs));
  left: 0; right: 0;
  display: flex; align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  z-index: 6;
  pointer-events: none;
}
.combo-wrap > * { pointer-events: auto; }
.combo-wrap .combo-bar { pointer-events: none; }
.combo-label {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: clamp(9px, 1.8vmin, 12px);
  font-weight: 800;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
  text-transform: uppercase;
}
.combo-label > span:last-child, #combo-mult {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(13px, 2.6vmin, 18px);
  font-weight: 900;
  min-width: 2.5em;
  text-shadow: 0 0 10px var(--color-accent-active), 0 1px 2px rgba(0,0,0,0.7);
  letter-spacing: 0.02em;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s;
}
.combo-wrap.is-active #combo-mult,
.combo-wrap.is-active .combo-label > span:last-child {
  color: var(--color-gold);
  text-shadow: 0 0 14px var(--color-gold), 0 0 6px #fff5b8, 0 1px 2px rgba(0,0,0,0.7);
}
.combo-wrap.is-bumping #combo-mult,
.combo-wrap.is-bumping .combo-label > span:last-child {
  animation: comboBump 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes comboBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.combo-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(6px, 1.3vmin, 11px);
  background:
    linear-gradient(180deg, rgba(20,28,42,0.65), rgba(20,28,42,0.4));
  border: 1px solid rgba(255,107,45,0.42);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
#combo-fill {
  height: 100%; width: 0%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, #ffd24d 0%, #ff9a3d 35%, #ff6b2d 70%, #ff3434 100%);
  transition: width 0.18s ease-out;
  box-shadow:
    0 0 12px rgba(255,107,45,0.85),
    inset 0 1px 0 rgba(255,255,255,0.45);
  border-radius: inherit;
  position: relative;
}
#combo-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: comboShine 1.6s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes comboShine {
  0%, 50% { transform: translateX(-100%); }
  100%    { transform: translateX(120%); }
}
.combo-wrap.is-active .combo-bar {
  border-color: rgba(255,210,77,0.55);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 14px rgba(255,210,77,0.4);
  animation: comboBarPulse 1s ease-in-out infinite;
}
@keyframes comboBarPulse {
  0%, 100% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 12px rgba(255,210,77,0.32); }
  50%      { box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), 0 0 22px rgba(255,210,77,0.6); }
}

/* Play area: full-bleed canvas inside #screen-play */
.play-area {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 32px rgba(0,0,0,0.18);
  width: 100%; height: 100%;
}
.map-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 1;
  background: var(--color-bg-secondary);
  filter: saturate(1.28) contrast(1.04) brightness(1.18);
}
.play-area::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,200,120,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0) 0%, rgba(8,12,20,0.18) 75%, rgba(8,12,20,0.38) 100%),
    linear-gradient(180deg, rgba(255,210,150,0.04) 0%, rgba(8,12,20,0) 30%, rgba(8,12,20,0.22) 100%);
  z-index: 1;
  pointer-events: none;
}

.weapon-showcase {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 680px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  z-index: 2;
}
.weapon-showcase img {
  width: auto;
  max-width: 100%;
  max-height: clamp(150px, 32vmin, 420px);
  object-fit: contain;
  filter:
    drop-shadow(0 22px 48px rgba(0,0,0,0.95))
    drop-shadow(0 0 60px rgba(245,166,35,0.55))
    drop-shadow(0 0 14px rgba(255,255,255,0.2))
    saturate(1.28) contrast(1.14) brightness(1.08);
  animation: floaty 4s ease-in-out infinite;
}
.showcase-glow {
  position: absolute; bottom: -30px;
  width: 130%;
  height: clamp(140px, 32vmin, 320px);
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--showcase-rarity-color, var(--color-accent)) 55%, transparent) 0%,
      color-mix(in srgb, var(--showcase-rarity-color, var(--color-accent)) 18%, transparent) 35%,
      transparent 70%);
  z-index: -1;
  animation: showcaseGlowPulse 3.4s ease-in-out infinite;
  filter: blur(6px);
}
@keyframes showcaseGlowPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.showcase-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(11px, 2.2vmin, 14px);
  font-weight: 800;
  color: var(--color-text-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.92), rgba(20,27,36,0.85), rgba(0,0,0,0.92));
  padding: 6px 14px 6px 16px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 95%;
  border: 1px solid color-mix(in srgb, var(--showcase-rarity-color, var(--color-accent)) 50%, rgba(0,0,0,0.4));
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 22px color-mix(in srgb, var(--showcase-rarity-color, var(--color-accent)) 28%, transparent);
  overflow: hidden;
}
.showcase-label::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--showcase-rarity-color, var(--color-accent));
  box-shadow: 0 0 12px var(--showcase-rarity-color, var(--color-accent));
}
.showcase-label b { font-weight: 900; }
.sticker-slots {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  pointer-events: all;
}
.st-slot {
  width: clamp(28px, 6vmin, 44px);
  height: clamp(28px, 6vmin, 44px);
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease, border-color 0.15s;
}
.st-slot.filled {
  border-style: solid;
  border-color: var(--color-accent);
  background: rgba(245,166,35,0.12);
}
.st-slot img { width: 100%; height: 100%; object-fit: contain; }
.st-slot:active { transform: scale(0.92); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

.click-btn {
  position: absolute; inset: 0;
  background: transparent; cursor: pointer;
  z-index: 2;
}
/* Click ripple — JS spawns .click-ripple inside .fx-layer */
.click-ripple {
  position: absolute;
  width: clamp(50px, 10vmin, 90px);
  height: clamp(50px, 10vmin, 90px);
  margin-left: calc(clamp(50px, 10vmin, 90px) / -2);
  margin-top:  calc(clamp(50px, 10vmin, 90px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,77,0.55) 0%, rgba(245,166,35,0.2) 40%, transparent 70%);
  border: 2px solid rgba(255,210,77,0.5);
  pointer-events: none;
  animation: clickRipple 0.55s ease-out forwards;
  z-index: var(--z-floating);
}
.click-ripple.crit {
  background: radial-gradient(circle, rgba(255,107,45,0.55) 0%, rgba(255,52,52,0.25) 40%, transparent 70%);
  border-color: rgba(255,107,45,0.6);
}
@keyframes clickRipple {
  0%   { opacity: 1; transform: scale(0.2); }
  60%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(2.5); }
}

.fx-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

/* =================================================================
   ENEMIES
   ================================================================= */
.enemies-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.enemy {
  position: absolute;
  width: clamp(90px, 18vmin, 180px);
  height: clamp(120px, 24vmin, 240px);
  pointer-events: all;
  cursor: crosshair;
  transition: transform 0.1s;
  z-index: 2;
}
.enemy img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,0.85))
    drop-shadow(0 0 6px rgba(255,0,0,0.35));
}
.enemy-hpbar {
  position: absolute;
  top: 0; left: 5%; width: 90%;
  height: clamp(4px, 0.8vmin, 7px);
  background: rgba(0,0,0,0.8);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid rgba(255,70,70,0.7);
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.enemy-hpfill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff4d4d, #ff8844);
  transition: width 0.2s;
  box-shadow: 0 0 6px #ff4d4d;
}
.enemy.boss {
  width: clamp(130px, 24vmin, 260px);
  height: clamp(170px, 30vmin, 320px);
}
.enemy.boss .enemy-hpbar { border-color: var(--color-gold); }
.enemy.boss .enemy-hpfill { background: linear-gradient(90deg, var(--color-gold), var(--color-accent)); }
.enemy.hurt {
  animation: enemyHurt 0.15s ease-out;
  filter: brightness(2) saturate(0);
}
@keyframes enemyHurt {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05) translateX(-2px); }
}
.enemy.dead {
  animation: enemyDie 0.6s cubic-bezier(.5,0,.75,0) forwards;
  pointer-events: none;
}
@keyframes enemyDie {
  0%   { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(0.6) rotate(25deg) translateY(30px); }
}

/* =================================================================
   POP FX — floating damage / rewards / combo text
   ================================================================= */
.pop {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 4vmin, 32px);
  background: linear-gradient(180deg, #fff5b8 0%, #ffd24d 45%, #f5a623 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,0.95))
    drop-shadow(0 0 14px rgba(255,210,77,0.55));
  pointer-events: none;
  animation: popUp 0.85s cubic-bezier(0.34, 1.32, 0.64, 1) forwards;
  white-space: nowrap;
  transform: translate(-50%, 0);
  letter-spacing: 0.02em;
  z-index: var(--z-floating);
}
.pop.crit {
  font-size: clamp(26px, 5.5vmin, 44px);
  background: linear-gradient(180deg, #fff 0%, #ffeb70 35%, #ff7a3a 70%, #ff3434 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.95))
    drop-shadow(0 0 22px rgba(255,107,45,0.85))
    drop-shadow(0 0 32px rgba(255,52,52,0.5));
  animation: popUpCrit 1.05s cubic-bezier(0.34, 1.32, 0.64, 1) forwards;
}
.pop.dmg {
  color: var(--color-error);
  text-shadow: 0 3px 8px rgba(0,0,0,0.9), 0 0 12px rgba(255,77,77,0.55);
}
.pop.dmg.crit {
  color: #ffdf47;
  font-size: var(--fs-lg);
}
.pop.reward {
  color: var(--color-success);
  font-size: var(--fs-md);
  text-shadow: 0 0 14px var(--color-success), 0 3px 8px rgba(0,0,0,0.9);
  animation: rewardUp 1.2s ease-out forwards;
}
.pop.reward.kill {
  color: var(--color-gold);
  text-shadow: 0 0 18px var(--color-gold), 0 3px 8px rgba(0,0,0,0.9);
}
.pop.reward.kill.streak {
  color: var(--color-accent-active);
  font-size: var(--fs-lg);
  text-shadow: 0 0 20px var(--color-accent-active), 0 3px 8px rgba(0,0,0,0.9);
  animation: streakPop 1.4s ease-out forwards;
}
.pop.reward.kill.fire {
  color: var(--color-error);
  font-size: var(--fs-xl);
  text-shadow: 0 0 24px var(--color-error), 0 0 40px #ffa000, 0 3px 8px rgba(0,0,0,0.9);
  animation: firePop 1.5s ease-out forwards;
}
.pop.coin-chip {
  color: #b5e0ff;
  font-size: var(--fs-sm);
  text-shadow: 0 0 8px rgba(122,201,255,0.6), 0 2px 6px rgba(0,0,0,0.8);
}
@keyframes popUp {
  0%   { transform: translate(-50%, 0)      scale(0.4); opacity: 0; }
  18%  { transform: translate(-50%, -30px)  scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -160px) scale(0.85); opacity: 0; }
}
@keyframes popUpCrit {
  0%   { transform: translate(-50%, 0)      scale(0.3) rotate(-6deg); opacity: 0; }
  12%  { transform: translate(-50%, -22px)  scale(1.55) rotate(4deg);  opacity: 1; }
  30%  { transform: translate(-50%, -38px)  scale(1.18) rotate(-1deg); opacity: 1; }
  100% { transform: translate(-50%, -190px) scale(0.95) rotate(0);     opacity: 0; }
}
@keyframes rewardUp {
  0%   { transform: translate(-50%, 0)   scale(0.5); opacity: 0; }
  15%  { transform: translate(-50%, -10px) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(1);  opacity: 0; }
}
@keyframes streakPop {
  0%   { transform: translate(-50%, 0)    scale(0.5) rotate(-8deg); opacity: 0; }
  15%  { transform: translate(-50%, -20px) scale(1.5) rotate(5deg); opacity: 1; }
  100% { transform: translate(-50%, -160px) scale(1)  rotate(0);     opacity: 0; }
}
@keyframes firePop {
  0%   { transform: translate(-50%, 0)    scale(0.5); opacity: 0; }
  10%  { transform: translate(-50%, -10px) scale(1.8); opacity: 1; }
  30%  { transform: translate(-50%, -30px) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -180px) scale(1);  opacity: 0; }
}

.spark {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px var(--color-gold);
  z-index: var(--z-floating);
}

/* =================================================================
   WAVE / BOMB / GOLD — in-game floating elements
   ================================================================= */
.wave-event {
  position: absolute;
  left: 50%;
  /* Sit BELOW the HUD/stats/combo stack so the wave banner never hides
     the player's coin/star counters or stat chips. The play-area is
     `inset: 0` of #screen-play (full bleed under the HUD overlay), so
     without this offset the banner would render inside the HUD area. */
  top: calc(var(--hud-h) + env(safe-area-inset-top) + var(--stats-h) + var(--combo-h) + var(--space-md));
  transform: translateX(-50%);
  width: min(94%, 480px);
  padding: 8px 12px 9px;
  /* Above the HUD overlay (z=10) so the banner is fully readable while
     it's active — the HUD's pointer-events: none on the .hud bar itself
     means we can safely sit on top without trapping taps. */
  z-index: calc(var(--z-hud) + 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, #f5a623 0%, #ff6b2d 65%, #d83a08 100%);
  border: 1px solid rgba(255,225,160,0.6);
  border-radius: 14px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.5),
    0 0 28px rgba(245,166,35,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(120,40,0,0.32);
  z-index: 5;
  isolation: isolate;
}
.we-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.we-head > div:first-child {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.we-head b {
  font-size: var(--fs-base);
  font-weight: 900;
  color: #fff8d8;
  text-shadow: 0 0 10px rgba(255,240,160,0.7), 0 1px 2px rgba(0,0,0,0.55);
  letter-spacing: 0.02em;
}
.we-timer {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  gap: 4px;
}
.we-timer b {
  display: inline-block;
  min-width: 38px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.42);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.we-progress {
  position: relative;
  height: 7px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55);
}
.we-progress::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}
#wave-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #fff8d8 0%, #ffd24d 50%, #fff5b8 100%);
  box-shadow: 0 0 10px rgba(255,240,140,0.85), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: width 0.4s ease-out;
  border-radius: inherit;
}
.we-kills {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  white-space: nowrap;
}
.we-kills span {
  display: inline-block;
  padding: 2px 9px;
  background: rgba(0,0,0,0.42);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  letter-spacing: 0.02em;
  font-size: var(--fs-xs);
  color: #ffe478;
}

/* Compact mode for very narrow screens */
@media (max-width: 380px) {
  .wave-event { padding: 7px 10px 8px; gap: 5px; border-radius: 12px; }
  .we-head { font-size: 10px; }
  .we-head b { font-size: 14px; }
  .we-timer b { font-size: 11px; min-width: 34px; padding: 2px 7px; }
  .we-progress { height: 6px; }
  .we-kills { font-size: 9.5px; }
  .we-kills span { padding: 1px 7px; font-size: 10.5px; }
}

.bomb-event {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 40vmin, 320px);
  padding: var(--space-md);
  text-align: center;
  background: rgba(184, 26, 26, 0.94);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
  box-shadow: 0 0 24px var(--color-error);
  animation: alarm 0.5s ease-in-out infinite alternate;
  z-index: 5;
}
@keyframes alarm {
  0%   { box-shadow: 0 0 16px var(--color-error); }
  100% { box-shadow: 0 0 32px var(--color-error), 0 0 60px rgba(255,77,77,0.5); }
}
.bomb-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
  white-space: nowrap;
}
.bomb-timer { color: #fff; font-size: var(--fs-base); font-weight: 900; }
.bomb-progress {
  height: clamp(4px, 0.8vmin, 8px);
  background: rgba(0,0,0,0.4);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
#bomb-fill {
  height: 100%; width: 0%;
  background: var(--color-gold);
  transition: width 0.1s;
  box-shadow: 0 0 6px var(--color-gold);
}
.defuse-btn {
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-gold);
  color: #000;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  box-shadow: 0 0 16px rgba(255,210,77,0.6);
  white-space: nowrap;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.gold-drop {
  position: absolute;
  /* Sit below the HUD + stats stack so the gold-key icon never
     overlaps the currency / settings / daily buttons in the top-right. */
  top: calc(var(--hud-h) + env(safe-area-inset-top) + var(--stats-h) + var(--space-sm));
  right: calc(var(--space-md) + env(safe-area-inset-right));
  width: clamp(44px, 9vmin, 72px);
  height: clamp(44px, 9vmin, 72px);
  background: radial-gradient(circle, rgba(255,210,77,0.5), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: goldPulse 0.8s ease-in-out infinite;
  z-index: 6;
  pointer-events: all;
}
.gold-drop img {
  width: 70%; height: 70%;
  filter: drop-shadow(0 0 10px var(--color-gold));
}
@keyframes goldPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Mascot/Kill streak — disabled, kept hidden */
.mascot-btn,
.kill-streak-badge { display: none !important; }

/* =================================================================
   BOOST BAR & QUICK ACTIONS (play screen footer)
   ================================================================= */
.active-boost-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--qa-h) + var(--space-md));
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  min-height: 0;
  z-index: 6;
  pointer-events: none;
}
.active-boost-bar > * { pointer-events: auto; }
.active-boost-bar:empty { display: none; }
.boost-tag {
  display: inline-flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(245,166,35,0.15);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.boost-tag.premium {
  background: rgba(212,44,230,0.15);
  border-color: var(--r-classified);
  color: var(--r-classified);
}

.quick-actions {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding:
    var(--space-sm)
    calc(env(safe-area-inset-right) + var(--space-sm))
    calc(env(safe-area-inset-bottom) + var(--space-sm))
    calc(env(safe-area-inset-left)  + var(--space-sm));
  min-width: 0;
  z-index: 6;
  pointer-events: none;
}
.quick-actions > .qa { pointer-events: auto; }
.qa {
  position: relative;
  min-height: 46px;
  padding: var(--space-sm) clamp(6px, 1.4vmin, 10px);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.9), rgba(11,16,23,0.95));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.08);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.18s, border-color 0.18s;
}
.qa::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.qa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--qa-accent, var(--color-accent));
  box-shadow: 0 0 10px var(--qa-accent, var(--color-accent));
  opacity: 0.85;
}
.qa:hover { transform: translateY(-2px); }
.qa:hover::before { left: 130%; }

/* Map = teal */
#qa-map {
  --qa-accent: #4dd0c5;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(15,40,52,0.92), rgba(11,28,38,0.96));
  border-color: rgba(77,208,197,0.35);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(77,208,197,0.15);
}
#qa-map > span::before { content: "\1F5FA "; margin-right: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
#qa-map:hover {
  border-color: rgba(77,208,197,0.65);
  box-shadow: 0 6px 18px rgba(77,208,197,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Boost = orange */
#qa-boost {
  --qa-accent: #ff9a3d;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(58,28,8,0.92), rgba(36,16,4,0.96));
  border-color: rgba(255,154,61,0.4);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 18px rgba(255,154,61,0.2);
}
#qa-boost > span::before { content: "\26A1"; margin-right: 4px; filter: drop-shadow(0 0 6px rgba(255,154,61,0.7)); }
#qa-boost:hover {
  border-color: rgba(255,154,61,0.7);
  box-shadow: 0 6px 18px rgba(255,154,61,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Prestige / Restart = purple */
#qa-prestige {
  --qa-accent: #b070ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(38,18,58,0.92), rgba(22,10,36,0.96));
  border-color: rgba(176,112,255,0.4);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(176,112,255,0.2);
}
#qa-prestige > span::before { content: "\21BB"; margin-right: 4px; font-weight: 900; color: #d4a8ff; filter: drop-shadow(0 0 6px rgba(176,112,255,0.6)); }
#qa-prestige:hover {
  border-color: rgba(176,112,255,0.7);
  box-shadow: 0 6px 18px rgba(176,112,255,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* =================================================================
   BUTTON FEEDBACK — universal states
   ================================================================= */
.icon-btn, .qa, .defuse-btn, .wc-cta, .ac-cta, .m-claim,
.shop-cta, .modal-btn, .filter-pill, .tab, .nav-btn,
.map-cta, .bp-claim, .tut-next, .tut-skip, .lang-btn,
.tu-tier.available, .coll-cell.owned, .team-chip {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
}
.icon-btn:active, .qa:active, .defuse-btn:active, .wc-cta:not(.disabled):active,
.ac-cta:not(.disabled):active, .m-claim:active, .shop-cta:active, .modal-btn:not(.disabled):active,
.filter-pill:active, .tab:active, .nav-btn:active, .map-cta:not(.is-equipped):not(.is-locked):active,
.bp-claim:active, .tut-next:active, .tut-skip:active, .lang-btn:active,
.tu-tier.available:active, .coll-cell.owned:active, .team-chip:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}
.wc-cta.disabled, .ac-cta.disabled, .modal-btn.disabled,
.map-cta.is-locked, .map-cta.is-equipped {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* =================================================================
   ARSENAL SCREEN
   ================================================================= */
#screen-arsenal > .screen-title { flex-shrink: 0; }

/* === Universal coin icon (SVG) === */
.coin-ic {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  background: url("../assets/icons/coin.svg") center/contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(255,180,40,0.45));
  flex-shrink: 0;
}
.wc-cta .coin-ic {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
  margin-left: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.c-icon.coin-ic {
  width: clamp(20px, 3vmin, 26px);
  height: clamp(20px, 3vmin, 26px);
  font-size: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 6px rgba(255,200,60,0.55));
}

.arsenal-filter {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 4px 2px 10px;
  margin-bottom: 4px;
  align-items: stretch;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  /* Soft fade on scroll edges to hint scrollability */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.arsenal-filter::-webkit-scrollbar { display: none; height: 0; }
.filter-pill {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 16px;
  min-height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, rgba(28,38,51,0.85), rgba(15,21,30,0.92));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.filter-pill:hover {
  color: var(--color-text-primary);
  border-color: rgba(245,166,35,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 10px rgba(245,166,35,0.18);
}
.filter-pill.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, var(--color-accent-active), var(--color-accent) 60%, #ffcd6e);
  color: var(--color-text-on-accent);
  border-color: rgba(255,217,138,0.7);
  text-shadow: 0 1px 1px rgba(120,55,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(120,55,0,0.25),
    0 6px 16px rgba(245,166,35,0.55),
    0 0 22px rgba(255,200,80,0.3);
  transform: translateY(-1px);
}

.weapons-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(clamp(250px, 44vmin, 380px), auto);
  gap: 14px;
  padding: 2px 2px clamp(16px, 4vmin, 40px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@media (min-width: 600px)  { .weapons-grid { gap: 16px; } }
@media (min-width: 600px)  { .weapons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .weapons-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .weapons-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1700px) { .weapons-grid { grid-template-columns: repeat(6, 1fr); } }

.weapon-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(240px, 42vmin, 380px);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rarity-color, #888) 18%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(34,46,62,0.92) 0%, rgba(10,15,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.18s, box-shadow 0.2s;
  isolation: isolate;
}
.weapon-card::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--rarity-color, #888) 20%, var(--rarity-color, #888) 80%, transparent 100%);
  box-shadow: 0 0 14px var(--rarity-color), 0 0 4px var(--rarity-color);
  z-index: 3;
}
.weapon-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.03) 100%);
  z-index: 4;
}
.weapon-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--rarity-color);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.55),
    0 0 24px color-mix(in srgb, var(--rarity-color) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.weapon-card:active { transform: scale(0.985); }
.weapon-card.locked { opacity: 0.6; filter: saturate(0.7); }
.weapon-card.owned  {
  border-color: var(--rarity-color);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    0 0 16px color-mix(in srgb, var(--rarity-color) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.weapon-card.owned::before { height: 4px; }
.weapon-card.gloves-card { border-color: var(--r-special); }

.wc-image {
  position: relative;
  width: 100%;
  height: clamp(120px, 22vmin, 220px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%, color-mix(in srgb, var(--rarity-color) 38%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
}
.wc-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.wc-image img {
  max-width: 92%; max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.85)) drop-shadow(0 0 14px color-mix(in srgb, var(--rarity-color) 45%, transparent));
  transform: scale(1.18);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
  position: relative; z-index: 1;
}
.weapon-card:hover .wc-image img {
  transform: scale(1.28) translateY(-3px) rotate(-1deg);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.9)) drop-shadow(0 0 22px color-mix(in srgb, var(--rarity-color) 70%, transparent));
}

.wc-level, .wc-wear, .wc-stattrak, .wc-rarity-tag {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  z-index: 2;
  white-space: nowrap;
}
.wc-level {
  top: 8px; right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, var(--color-gold), var(--color-accent) 80%, #ff8a3d);
  color: #2a1a00;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow:
    0 3px 10px rgba(245,166,35,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,55,0,0.3);
}
.wc-wear {
  bottom: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.78);
  border: 1px solid;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px currentColor;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wc-stattrak {
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #ff5230, #b82d10);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(211,64,32,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.wc-rarity-tag {
  top: 8px; left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--rarity-color);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.45) 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.85),
    0 0 4px rgba(0,0,0,0.5);
  box-shadow:
    0 3px 10px color-mix(in srgb, var(--rarity-color) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.35);
}

.wc-body {
  padding: 12px 14px 0;
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wc-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.015em;
  word-break: break-word;
  hyphens: auto;
  min-height: 2.5em;
  max-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 0 2px;
}
.wc-stats {
  display: flex; gap: 6px;
  justify-content: center;
  padding: 0;
}
.wc-stat-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.5) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.wc-stat-pill b {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255,210,77,0.45);
}
.wc-stat-pill.dps b { color: #7bdcff; text-shadow: 0 0 8px rgba(123,220,255,0.45); }
.wc-stat-pill.click b { color: #ffcd6e; }

.wc-cta {
  margin: 8px 12px 12px;
  padding: 9px 12px;
  min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, var(--color-accent-active), var(--color-accent));
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(120,55,0,0.4);
  box-shadow:
    0 4px 14px rgba(245,166,35,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(120,55,0,0.28);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.wc-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.wc-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(245,166,35,0.6),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(120,55,0,0.28);
}
.wc-cta:hover::before { left: 120%; }

.wc-cta.upgrade {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ff6b2d, #ffb347 70%, #ffd24d);
  box-shadow:
    0 4px 14px rgba(255,107,45,0.5),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(140,40,0,0.3);
}
.wc-cta.upgrade:hover {
  box-shadow:
    0 6px 22px rgba(255,107,45,0.65),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(140,40,0,0.3);
}
.wc-cta.star {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #4dc8ff, #5ab0ff 60%, #8ce0ff);
  color: #00132a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 4px 14px rgba(90,176,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,40,90,0.3);
}
.wc-cta.star:hover {
  box-shadow:
    0 6px 22px rgba(90,176,255,0.65),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 0 rgba(0,40,90,0.3);
}
.wc-cta.buy {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #4cd470, #76e890 60%, #a8f5b6);
  color: #002808;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 4px 14px rgba(76,212,112,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,80,20,0.3);
}
.wc-cta.buy:hover {
  box-shadow:
    0 6px 22px rgba(76,212,112,0.65),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 0 rgba(0,80,20,0.3);
}

/* "В деле" / equipped state — gold glow instead of gray-out */
.wc-cta.equipped-tag {
  opacity: 1 !important;
  pointer-events: none;
  filter: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ffd24d, #ffaa2d 70%, #ffcd6e);
  color: #2a1a00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    0 4px 14px rgba(255,200,77,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.32),
    0 0 22px rgba(255,200,80,0.35);
  letter-spacing: 0.08em;
  animation: equippedShine 2.4s ease-in-out infinite;
}
@keyframes equippedShine {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,200,77,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,55,0,0.32), 0 0 22px rgba(255,200,80,0.35); }
  50%      { box-shadow: 0 4px 18px rgba(255,200,77,0.7),  inset 0 1px 0 rgba(255,255,255,0.6),  inset 0 -2px 0 rgba(120,55,0,0.32), 0 0 30px rgba(255,200,80,0.55); }
}

/* Locked CTA — clearer disabled lock chip */
.wc-cta.locked-tag {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%),
    linear-gradient(135deg, #2a3340, #1a2230);
  color: #8a98ad;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.35);
  text-shadow: none;
  letter-spacing: 0.05em;
}

/* =================================================================
   AGENTS SCREEN
   ================================================================= */
#screen-agents > .screen-title { flex-shrink: 0; }

/* Scroll container that wraps both CT and T sections.
   #screen-agents (.screen) has overflow:hidden, so scrolling has to happen
   on a single inner flex child with min-height:0. The two .agents-section
   blocks below are normal block children of THIS scroller — their
   .agents-grid no longer needs its own overflow. */
.agents-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: clamp(16px, 4vmin, 40px);
}

.agent-desc {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding: 10px 14px;
  margin-bottom: var(--space-sm);
  background:
    linear-gradient(135deg, rgba(245,166,35,0.06), rgba(20,27,36,0.55));
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}
.agents-grid {
  /* Scrolling is owned by the .agents-scroll wrapper above — this grid is
     a content-sized block child. Adding overflow:auto here would trap the
     touchmove handler (atTop && atBottom both true) and block any panning. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(clamp(280px, 44vmin, 420px), auto);
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
}
@media (min-width: 600px)  { .agents-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .agents-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .agents-grid { grid-template-columns: repeat(5, 1fr); } }

.agents-header {
  display: flex; flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.9), rgba(11,16,23,0.94));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.agents-intro {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.team-summary {
  display: flex;
  gap: var(--space-sm);
}
.team-chip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    rgba(0,0,0,0.4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  letter-spacing: 0.04em;
  transition: transform 0.18s ease, box-shadow 0.18s, border-color 0.18s;
  overflow: hidden;
}
.team-chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  opacity: 0.85;
}
.team-chip:hover { transform: translateY(-2px); }
.team-chip.ct    { color: #5ab0ff; border-color: rgba(90,176,255,0.45); background: linear-gradient(180deg, rgba(90,176,255,0.16) 0%, rgba(90,176,255,0.04) 100%); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(90,176,255,0.18); }
.team-chip.t     { color: #ff9a3d; border-color: rgba(255,154,61,0.45); background: linear-gradient(180deg, rgba(255,154,61,0.16) 0%, rgba(255,154,61,0.04) 100%); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(255,154,61,0.18); }
.team-chip.total { color: var(--color-gold); border-color: rgba(255,210,77,0.45); background: linear-gradient(180deg, rgba(255,210,77,0.16) 0%, rgba(255,210,77,0.04) 100%); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(255,210,77,0.2); }
.team-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.team-count {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 900;
  color: var(--color-text-primary);
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.team-chip.ct .team-count    { color: #5ab0ff; text-shadow: 0 0 10px rgba(90,176,255,0.45), 0 1px 2px rgba(0,0,0,0.6); }
.team-chip.t  .team-count    { color: #ff9a3d; text-shadow: 0 0 10px rgba(255,154,61,0.45), 0 1px 2px rgba(0,0,0,0.6); }
.team-chip.total .team-count { color: var(--color-gold); text-shadow: 0 0 10px rgba(255,210,77,0.5),  0 1px 2px rgba(0,0,0,0.6); }

.agents-section { margin-bottom: var(--space-lg); }
.agents-section-title {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 900;
  margin-bottom: var(--space-md);
  padding: 8px 16px 8px 14px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(20,27,36,0.85), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.agents-section-title::before {
  content: "";
  display: block;
  width: 4px; height: 22px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.agents-section-title.ct { color: #5ab0ff; border-color: rgba(90,176,255,0.4); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 18px rgba(90,176,255,0.18); }
.agents-section-title.t  { color: #ff9a3d; border-color: rgba(255,154,61,0.4); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 18px rgba(255,154,61,0.18); }

.agent-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(280px, 44vmin, 420px);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ac-tone, #5ab0ff) 14%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(34,46,62,0.92) 0%, rgba(10,15,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.18s, box-shadow 0.2s;
  isolation: isolate;
}
.agent-card.ct { --ac-tone: #5ab0ff; }
.agent-card.t  { --ac-tone: #ff9a3d; }
.agent-card::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--ac-tone) 20%, var(--ac-tone) 80%, transparent 100%);
  box-shadow: 0 0 14px var(--ac-tone), 0 0 4px var(--ac-tone);
  z-index: 3;
}
.agent-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.03) 100%);
  z-index: 4;
}
.agent-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--ac-tone);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.55),
    0 0 26px color-mix(in srgb, var(--ac-tone) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.agent-card:active { transform: scale(0.985); }
.agent-card.owned {
  border-color: var(--color-success);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-success) 16%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(34,46,62,0.92) 0%, rgba(10,15,22,0.96) 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    0 0 18px rgba(110,224,122,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.agent-card.owned::before {
  background: linear-gradient(90deg, transparent 0%, var(--color-success) 20%, var(--color-success) 80%, transparent 100%);
  box-shadow: 0 0 14px var(--color-success), 0 0 4px var(--color-success);
}
.agent-card.locked {
  opacity: 0.6;
  filter: saturate(0.65);
}
.agent-card.locked .ac-image::after {
  content: "\1F512";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(36px, 8vmin, 64px);
  color: rgba(255,255,255,0.3);
  text-shadow: 0 0 16px rgba(0,0,0,0.85);
  pointer-events: none;
}

.ac-side-flag {
  position: absolute;
  top: var(--space-xs); right: var(--space-xs);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  border-radius: 999px;
  z-index: 2;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%);
}
.ac-side-flag.ct { background-color: #5ab0ff; color: #001020; box-shadow: 0 3px 10px rgba(90,176,255,0.45), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,40,90,0.3); }
.ac-side-flag.t  { background-color: #ff9a3d; color: #1a0e00; box-shadow: 0 3px 10px rgba(255,154,61,0.45), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(120,55,0,0.3); }

.ac-image {
  width: 100%;
  height: clamp(160px, 26vmin, 260px);
  flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(ellipse 75% 60% at 50% 60%, color-mix(in srgb, var(--ac-tone) 32%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);
  overflow: hidden;
  position: relative;
}
.ac-image::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.ac-image img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.85))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ac-tone) 38%, transparent));
  transform: scale(1.15);
  transform-origin: center bottom;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
  position: relative; z-index: 1;
}
.agent-card:hover .ac-image img {
  transform: scale(1.22) translateY(-3px);
  filter:
    drop-shadow(0 14px 22px rgba(0,0,0,0.9))
    drop-shadow(0 0 22px color-mix(in srgb, var(--ac-tone) 70%, transparent));
}

.ac-info {
  padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.ac-role {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ac-tone);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ac-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.25;
  word-wrap: break-word;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.ac-bonus-row {
  display: flex; align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ac-bonus-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(90deg, rgba(110,224,122,0.32), rgba(110,224,122,0.18));
  border: 1px solid var(--color-success);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--color-success);
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow:
    0 2px 8px rgba(110,224,122,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
  text-shadow: 0 1px 1px rgba(0,40,8,0.4);
}
.ac-bonus-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.ac-bonus-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: 1.45;
  word-wrap: break-word;
}
.ac-cta {
  margin: 8px 12px 12px;
  padding: 9px 12px;
  min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #5ab0ff, #87c5ff);
  color: #001020;
  box-shadow:
    0 4px 14px rgba(90,176,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,40,90,0.28);
}
.ac-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.ac-cta:hover::before { left: 130%; }
.ac-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(90,176,255,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,40,90,0.28); }
.agent-card.t .ac-cta {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ff9a3d, #ffb371);
  color: #1a0e00;
  box-shadow:
    0 4px 14px rgba(255,154,61,0.45),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(120,55,0,0.28);
}
.agent-card.t .ac-cta:hover { box-shadow: 0 6px 20px rgba(255,154,61,0.6), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,55,0,0.28); }
.ac-cta.owned {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ffd24d, #ffaa2d 70%, #ffcd6e);
  color: #2a1a00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  box-shadow:
    0 4px 14px rgba(255,200,77,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.32),
    0 0 22px rgba(255,200,80,0.35);
  animation: equippedShine 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ac-cta.disabled {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%),
    linear-gradient(135deg, #2a3340, #1a2230);
  color: #8a98ad;
  text-shadow: none;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.35);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* =================================================================
   EXTRAS SCREEN (Collection / BP / Shop / TradeUp)
   ================================================================= */
.extras-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: clamp(16px, 4vmin, 40px);
}
.extras-pane.hidden { display: none; }

/* =================================================================
   MISSIONS SCREEN
   ================================================================= */
#screen-missions > .screen-title { flex-shrink: 0; }

.missions-summary {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.ms-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "icon body" "bar bar";
  gap: 4px var(--space-sm);
  padding: 10px 12px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 0;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.18s;
}
.ms-card:hover { transform: translateY(-2px); }
.ms-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.65;
}
.ms-card.weekly {
  border-color: rgba(245,166,35,0.45);
  background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(20,27,36,0.82));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px rgba(245,166,35,0.12);
}
.ms-card.weekly::before { background: linear-gradient(90deg, transparent, #ffaa3d, transparent); }
.ms-card.ach {
  border-color: rgba(255,210,77,0.45);
  background: linear-gradient(135deg, rgba(255,210,77,0.14), rgba(20,27,36,0.82));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px rgba(255,210,77,0.14);
}
.ms-card.ach::before { background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }
.ms-icon   { grid-area: icon; font-size: var(--fs-md); line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
.ms-body   { grid-area: body; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ms-label  {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.ms-progress {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.ms-progress b   { color: var(--color-gold); font-size: var(--fs-base); font-weight: 900; text-shadow: 0 0 8px rgba(255,210,77,0.4); }
.ms-progress span { color: var(--color-text-secondary); font-size: var(--fs-xs); font-weight: 700; }
.ms-bar-wrap {
  grid-area: bar;
  height: clamp(4px, 0.8vmin, 7px);
  background: rgba(0,0,0,0.5);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.ms-bar {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, var(--color-accent-active), var(--color-gold));
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(245,166,35,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}

.mission-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: clamp(16px, 4vmin, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.mission-list-head {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  padding: 4px 14px 8px;
  font-style: italic;
  line-height: 1.5;
  border-left: 2px solid rgba(245,166,35,0.3);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.mission-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  background:
    linear-gradient(135deg, rgba(20,27,36,0.72), rgba(11,16,23,0.85));
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  letter-spacing: 0.02em;
}

.mission {
  position: relative;
  display: grid;
  grid-template-columns: clamp(44px, 10vmin, 64px) 1fr auto;
  grid-template-areas: "icon main action";
  gap: var(--space-md);
  align-items: center;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.mission:hover { transform: translateX(3px); border-color: var(--color-accent); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px rgba(245,166,35,0.18); }
.mission.weekly {
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(245,166,35,0.12), rgba(20,27,36,0.85));
}
.mission.done {
  border-color: var(--color-success);
  background: linear-gradient(90deg, rgba(110,224,122,0.14), rgba(20,27,36,0.85));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 18px rgba(110,224,122,0.22);
}
.mission.done::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,210,77,0.08) 50%, transparent 100%);
  pointer-events: none;
  animation: missionShine 3.2s ease-in-out infinite;
}
@keyframes missionShine {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}
.mission.claimed { opacity: 0.55; filter: saturate(0.7); }

.m-icon {
  grid-area: icon;
  width: clamp(44px, 10vmin, 64px);
  height: clamp(44px, 10vmin, 64px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 4vmin, 32px);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.07) 0%, transparent 70%),
    rgba(0,0,0,0.55);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 20px rgba(0,0,0,0.4);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.mission.weekly .m-icon { background: radial-gradient(ellipse at 50% 30%, rgba(255,170,60,0.16) 0%, transparent 70%), rgba(245,166,35,0.16); border: 1px solid rgba(245,166,35,0.3); }
.mission.done   .m-icon { background: radial-gradient(ellipse at 50% 30%, rgba(110,224,122,0.22) 0%, transparent 70%), rgba(110,224,122,0.18); border: 1px solid rgba(110,224,122,0.4); }

.m-main {
  grid-area: main;
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.m-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.m-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  word-wrap: break-word;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.m-bar {
  height: clamp(5px, 1vmin, 9px);
  background: rgba(0,0,0,0.55);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  position: relative;
}
.m-bar > div {
  height: 100%; width: 0%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, var(--color-accent-active), var(--color-gold));
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(245,166,35,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  border-radius: inherit;
}
.mission.done .m-bar > div {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.15) 100%),
    linear-gradient(90deg, var(--color-success), var(--color-gold));
  box-shadow: 0 0 14px rgba(255,210,77,0.7), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mission.done .m-bar > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: comboShine 1.8s ease-in-out infinite;
  border-radius: inherit;
}
.m-bottom {
  display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
}
.m-count {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.m-rewards { display: flex; gap: 6px; flex-wrap: wrap; }
.m-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.m-chip.gold {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%), rgba(255,210,77,0.18);
  color: var(--color-gold);
  border: 1px solid rgba(255,210,77,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(255,210,77,0.18);
}
.m-chip.star {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%), rgba(122,201,255,0.18);
  color: #b5ecff;
  border: 1px solid rgba(122,201,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(122,201,255,0.18);
}

.m-action { grid-area: action; display: flex; align-items: center; }
.m-claim {
  position: relative;
  min-height: 42px;
  padding: 8px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, #ffd24d, #ffaa2d 70%, #ffcd6e);
  color: #2a1a00;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    0 4px 14px rgba(255,200,77,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.3);
  overflow: hidden;
  isolation: isolate;
  animation: claimPulse 1.6s ease-in-out infinite;
  cursor: pointer;
}
.m-claim::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: claimSweep 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,200,77,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,55,0,0.3), 0 0 0 0 rgba(255,210,77,0); }
  50%      { box-shadow: 0 4px 18px rgba(255,200,77,0.7),  inset 0 1px 0 rgba(255,255,255,0.6),  inset 0 -2px 0 rgba(120,55,0,0.3), 0 0 22px rgba(255,210,77,0.5); }
}
@keyframes claimSweep {
  0%, 70% { left: -120%; }
  100%    { left: 130%;  }
}
.m-claim:hover { transform: translateY(-1px); }
.m-check {
  width: clamp(36px, 8vmin, 44px);
  height: clamp(36px, 8vmin, 44px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%), rgba(110,224,122,0.22);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 900;
  text-shadow: 0 0 8px rgba(110,224,122,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 12px rgba(110,224,122,0.25);
}

/* =================================================================
   TABS — FLEX: 1 1 0 FOR EQUAL WIDTH + NO TRUNCATION
   ================================================================= */
.tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-sm);
  width: 100%;
}
.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, rgba(28,38,51,0.85), rgba(15,21,30,0.92));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  transition: transform 0.12s ease, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.tab:hover {
  color: var(--color-text-primary);
  border-color: rgba(245,166,35,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 10px rgba(245,166,35,0.18);
}
/* Auto-shrink text when there are many tabs (4+) */
.tabs.extras .tab { font-size: var(--fs-xs); }
.tabs.missions .tab { font-size: var(--fs-sm); }
.tab.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, var(--color-accent-active), var(--color-accent) 60%, #ffcd6e);
  color: var(--color-text-on-accent);
  border-color: rgba(255,217,138,0.7);
  text-shadow: 0 1px 1px rgba(120,55,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(120,55,0,0.25),
    0 6px 16px rgba(245,166,35,0.55),
    0 0 22px rgba(255,200,80,0.3);
  transform: translateY(-1px);
}

/* =================================================================
   COLLECTION
   ================================================================= */
.op-card {
  display: flex; gap: var(--space-sm); align-items: center;
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(255,107,45,0.03));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.op-card img {
  width: clamp(56px, 12vmin, 96px);
  height: clamp(80px, 17vmin, 130px);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  flex-shrink: 0;
}
.coll-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--color-line);
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  gap: var(--space-sm);
}
.coll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
  margin: var(--space-sm) 0 var(--space-md);
}
@media (min-width: 600px)  { .coll-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px)  { .coll-grid { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1400px) { .coll-grid { grid-template-columns: repeat(10, 1fr); } }
.coll-cell {
  height: clamp(64px, 12vmin, 110px);
  padding: var(--space-xs);
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%, color-mix(in srgb, var(--rarity-color, #888) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(28,38,51,0.85) 0%, rgba(11,16,23,0.94) 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.18s, box-shadow 0.18s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.coll-cell.owned {
  border-color: var(--rarity-color);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 14px color-mix(in srgb, var(--rarity-color, #888) 50%, transparent);
}
.coll-cell.owned::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rarity-color);
  box-shadow: 0 0 8px var(--rarity-color);
}
.coll-cell:hover { transform: translateY(-2px); }
.coll-cell.owned:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 6px 18px color-mix(in srgb, var(--rarity-color, #888) 60%, transparent);
}
.coll-cell.silhouette img { filter: brightness(0) opacity(0.32); }
.coll-cell img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform: scale(1.15);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.65));
}
.coll-cell.owned:hover img { transform: scale(1.25) translateY(-2px); }

/* =================================================================
   BATTLE PASS
   ================================================================= */
.bp-header {
  display: flex; align-items: center;
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.bp-grid { display: flex; flex-direction: column; gap: 6px; }
.bp-cell {
  display: grid;
  grid-template-columns: clamp(44px, 9vmin, 60px) 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.bp-lvl {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--color-gold);
  text-align: center;
  align-self: center;
  background:
    radial-gradient(circle, rgba(255,210,77,0.18), transparent 70%),
    rgba(0,0,0,0.55);
  border: 1px solid rgba(255,210,77,0.35);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-shadow: 0 0 10px rgba(255,210,77,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.bp-row {
  display: flex; align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.18) 100%),
    var(--bg-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 0;
  letter-spacing: 0.02em;
}
.bp-row.reached {
  background:
    linear-gradient(180deg, rgba(110,224,122,0.18) 0%, rgba(110,224,122,0.06) 100%);
  border: 1px solid var(--color-success);
  box-shadow: 0 0 12px rgba(110,224,122,0.18) inset;
}
.bp-row.claimed { background: rgba(110,224,122,0.06); opacity: 0.6; }
.bp-row.locked  { opacity: 0.5; }
.bp-tag {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-text-secondary);
  min-width: 3.8em;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bp-tag.prem {
  color: var(--r-classified);
  text-shadow: 0 0 8px rgba(212,44,230,0.45);
}
.bp-rew {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  word-wrap: break-word;
}
.bp-claim {
  position: relative;
  padding: 6px 12px;
  min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, var(--color-success), #8fe89b);
  color: #002208;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 3px 10px rgba(110,224,122,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,80,20,0.3);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.bp-claim::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.bp-claim:hover { transform: translateY(-1px); }
.bp-claim:hover::before { left: 130%; }

/* =================================================================
   SHOP
   ================================================================= */
.shop-premium-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
@media (min-width: 620px)  { .shop-premium-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .shop-premium-row { grid-template-columns: repeat(3, 1fr); } }

.shop-card { position: relative; transition: transform 0.18s ease, box-shadow 0.18s; }
.shop-card.hero {
  display: flex; flex-direction: column;
  min-height: clamp(260px, 45vmin, 420px);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(180deg, rgba(245,166,35,0.14) 0%, rgba(20,27,36,0.9) 55%, rgba(11,16,23,0.95) 100%);
  border: 1px solid rgba(245,166,35,0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.shop-card.hero:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(245,166,35,0.2);
}
.shop-card.hero.video {
  background: linear-gradient(180deg, rgba(90,176,255,0.16) 0%, rgba(20,27,36,0.9) 55%, rgba(11,16,23,0.95) 100%);
  border-color: rgba(90,176,255,0.45);
}
.shop-card.hero.daily {
  background: linear-gradient(180deg, rgba(110,224,122,0.14) 0%, rgba(20,27,36,0.9) 55%, rgba(11,16,23,0.95) 100%);
  border-color: rgba(110,224,122,0.45);
}
.shop-hero-ribbon {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-gold);
  color: #000;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 10px rgba(255,210,77,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  white-space: nowrap;
}
.shop-card.video .shop-hero-ribbon { background: var(--color-info); color: #001020; box-shadow: 0 3px 10px rgba(90,176,255,0.5); }
.shop-card.daily .shop-hero-ribbon { background: var(--color-success); color: #000; box-shadow: 0 3px 10px rgba(110,224,122,0.5); }

.shop-hero-banner {
  width: 100%;
  margin: calc(var(--space-lg) * -1) 0 var(--space-md);
  margin-left: calc(var(--space-md) * -1);
  margin-right: calc(var(--space-md) * -1);
  width: calc(100% + (var(--space-md) * 2));
  height: clamp(110px, 22vmin, 220px);
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.shop-hero-icon {
  font-size: var(--fs-xl);
  text-align: center;
  margin: var(--space-sm) 0 var(--space-sm);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  animation: heroIconFloat 3.5s ease-in-out infinite;
}
@keyframes heroIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.shop-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  word-wrap: break-word;
}
.shop-card.video .shop-hero-title { color: var(--color-info); }
.shop-card.daily .shop-hero-title { color: var(--color-success); }
.shop-hero-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}
.shop-hero-list {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  flex: 1 1 auto;
}
.shop-hero-list div {
  padding: var(--space-sm) var(--space-md);
  background: rgba(0,0,0,0.4);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  border-left: 3px solid var(--color-accent);
  word-wrap: break-word;
}
.shop-card.video .shop-hero-list div { border-left-color: var(--color-info); }
.shop-card.daily .shop-hero-list div { border-left-color: var(--color-success); }

.shop-cta {
  width: 100%;
  min-height: 44px;
  padding: var(--space-md);
  background: linear-gradient(90deg, var(--color-accent-active), var(--color-accent));
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(245,166,35,0.4);
}
.shop-cta.big { font-size: var(--fs-md); }
.shop-cta.accent { background: linear-gradient(90deg, var(--color-info), #7ac9ff); color: #001020; box-shadow: 0 6px 16px rgba(90,176,255,0.45); }
.shop-card.daily .shop-cta { background: linear-gradient(90deg, var(--color-success), #8fe89b); color: #002208; box-shadow: 0 6px 16px rgba(110,224,122,0.45); }
.shop-cta:hover { transform: translateY(-2px); }

.shop-section-head {
  display: flex; align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(245,166,35,0.2);
}
.shop-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.shop-section-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* =================================================================
   STICKERS / MUSIC KITS / GRAFFITI GRIDS
   ================================================================= */
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(clamp(220px, 36vmin, 320px), auto);
  gap: var(--space-sm);
}
@media (min-width: 500px)  { .stickers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .stickers-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .stickers-grid { grid-template-columns: repeat(5, 1fr); } }

.sticker-card, .mk-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: clamp(220px, 36vmin, 320px);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(180deg, rgba(20,27,36,0.85) 0%, rgba(11,16,23,0.95) 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}
.sticker-card:hover { transform: translateY(-3px); border-color: var(--color-accent); box-shadow: 0 8px 22px rgba(245,166,35,0.22); }
.sticker-img-wrap {
  width: clamp(80px, 18vmin, 160px);
  height: clamp(80px, 18vmin, 160px);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(245,166,35,0.22), transparent 70%);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.sticker-card img, .mk-card img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.sticker-card img { width: 100%; height: 100%; }
.mk-card img {
  width: clamp(80px, 16vmin, 140px);
  height: clamp(80px, 16vmin, 140px);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
}
.sticker-name, .mk-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-xs);
  word-wrap: break-word;
}
.sticker-bonus {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-success);
  margin-bottom: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(110,224,122,0.1);
  border-radius: var(--radius-sm);
  word-wrap: break-word;
}
.sticker-own {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-info);
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(90,176,255,0.12);
  border-radius: var(--radius-sm);
}
.sticker-card .wc-cta, .mk-card .wc-cta {
  width: 100%;
  margin: 0;
}
.mk-card:hover { transform: translateY(-3px); border-color: var(--color-info); box-shadow: 0 8px 22px rgba(90,176,255,0.22); }
.mk-card.equipped {
  border-color: var(--color-success);
  background: linear-gradient(180deg, rgba(110,224,122,0.14) 0%, rgba(11,16,23,0.9) 100%);
  box-shadow: 0 0 16px rgba(110,224,122,0.2);
}
.mk-bonus {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  width: 100%;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-success);
}
.mk-bonus div {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(110,224,122,0.08);
  border-radius: var(--radius-sm);
  word-wrap: break-word;
}

.mk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(clamp(220px, 36vmin, 320px), auto);
  gap: var(--space-sm);
}
@media (min-width: 500px) { .mk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mk-grid { grid-template-columns: repeat(4, 1fr); } }

.graffiti-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(clamp(120px, 20vmin, 180px), auto);
  gap: var(--space-sm);
}
@media (min-width: 500px) { .graffiti-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .graffiti-grid { grid-template-columns: repeat(6, 1fr); } }
.gr-cell {
  min-height: clamp(120px, 20vmin, 180px);
  padding: var(--space-md) var(--space-sm);
  background: linear-gradient(180deg, rgba(20,27,36,0.85) 0%, rgba(11,16,23,0.95) 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s;
}
.gr-cell.owned { border-color: var(--color-success); box-shadow: 0 0 12px rgba(110,224,122,0.18); }
.gr-cell:hover { transform: translateY(-3px); }
.gr-cell img {
  width: clamp(64px, 14vmin, 120px);
  height: clamp(64px, 14vmin, 120px);
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
}
.gr-cell.silhouette img { filter: brightness(0) opacity(0.3); }
.gr-cell div {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
  line-height: 1.25;
  word-wrap: break-word;
}
.gr-cell.owned div { color: var(--color-success); }

/* =================================================================
   TRADE-UP
   ================================================================= */
.tu-tier {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  margin-bottom: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.88), rgba(11,16,23,0.92));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  min-height: 48px;
  gap: var(--space-sm);
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.18s, background 0.15s;
}
.tu-tier.available {
  border-color: var(--color-success);
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(110,224,122,0.12), rgba(11,16,23,0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px rgba(110,224,122,0.18);
}
.tu-tier.available::after {
  content: "\27A4";
  margin-left: 6px;
  color: var(--color-success);
  font-size: 14px;
  filter: drop-shadow(0 0 6px var(--color-success));
}
.tu-tier.available:hover {
  transform: translateX(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(110,224,122,0.32);
  background: linear-gradient(135deg, rgba(110,224,122,0.18), rgba(11,16,23,0.92));
}
.tu-tier.locked { opacity: 0.5; filter: saturate(0.6); }

/* =================================================================
   BOTTOM NAV — equal-width flex, icon + label, no truncation
   ================================================================= */
.bottom-nav {
  flex: 0 0 auto;
  display: flex;
  width: 100%;
  gap: 0;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(40,54,80,0.55) 0%, rgba(26,36,54,0.88) 70%, rgba(20,28,42,0.96) 100%);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow:
    0 -6px 24px rgba(0,0,0,0.45),
    0 -1px 0 rgba(245,166,35,0.28) inset;
  z-index: var(--z-nav);
  position: relative;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,0.7) 50%, transparent 100%);
  pointer-events: none;
  filter: blur(0.5px);
}
.nav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px 2px 4px;
  min-height: 52px;
  color: var(--color-text-secondary);
  position: relative;
  isolation: isolate;
  transition: color 0.18s, transform 0.12s ease;
}
.nav-btn img {
  width: clamp(48px, 11vmin, 84px);
  height: clamp(32px, 7vmin, 54px);
  object-fit: contain;
  opacity: 0.6;
  filter:
    saturate(0.45) brightness(0.9)
    drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  transition: opacity 0.2s, filter 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-btn span {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.8vmin, 12px);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: color 0.18s, transform 0.18s;
}
.nav-btn:hover img {
  opacity: 0.85;
  filter: saturate(0.85) brightness(1) drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  transform: translateY(-1px);
}
.nav-btn:hover span { color: var(--color-text-primary); }
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active {
  color: var(--color-gold);
}
.nav-btn.active::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 10px var(--color-gold), 0 0 4px var(--color-gold);
}
.nav-btn.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(245,166,35,0.25) 0%, rgba(245,166,35,0.06) 45%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}
.nav-btn.active img {
  opacity: 1;
  filter:
    saturate(1.3) brightness(1.05)
    drop-shadow(0 1px 4px rgba(0,0,0,0.7))
    drop-shadow(0 0 10px rgba(245,166,35,0.65));
  transform: translateY(-3px) scale(1.08);
}
.nav-btn.active span {
  color: var(--color-gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 6px rgba(255,210,77,0.45);
  transform: translateY(-1px);
}

/* =================================================================
   MODAL
   ================================================================= */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Honor notch / Dynamic Island / home indicator on iOS landscape. */
  padding: max(var(--space-md), env(safe-area-inset-top))
           max(var(--space-md), env(safe-area-inset-right))
           max(var(--space-md), env(safe-area-inset-bottom))
           max(var(--space-md), env(safe-area-inset-left));
  z-index: var(--z-modal);
}
.modal.is-closing { animation: modalFadeOut 0.22s ease-in forwards; }
.modal.is-closing .modal-card { animation: modalCardOut 0.22s ease-in forwards; }
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  z-index: var(--z-modal-backdrop);
  animation: fadeIn 0.22s ease-out;
}
.modal-card {
  position: relative;
  width: clamp(260px, 86vw, 560px);
  /* dvh follows the visible viewport on iOS Safari (URL-bar collapse).
     vh fallback first for browsers without dvh support. */
  max-height: 88vh;
  max-height: 88dvh;
  /* Flex column so the inner body can scroll while the title (top) and
     action buttons (bottom) stay fixed within the card frame. Without
     this the whole card scrolled and on short viewports the action
     buttons fell off the bottom of the viewport (vertical clipping). */
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vmin, 32px) clamp(16px, 3vmin, 28px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.97), rgba(11,16,23,0.98));
  border: 1px solid rgba(245,166,35,0.32);
  border-radius: var(--radius-lg);
  /* Scroll has moved to the inner .modal-body — keep contain semantics so
     touchmove inside the card never bleeds out to the page. */
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow:
    var(--shadow-lg),
    0 0 50px rgba(245,166,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: modalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: calc(var(--z-modal) + 1);
  isolation: isolate;
}

/* The wrapper that openModal() fills — must inherit the flex column so
   .modal-title (top), .modal-body (scrollable middle) and .modal-actions
   (sticky bottom) lay out correctly. */
.modal-card > #modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.modal-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,210,77,0.5), rgba(245,166,35,0.05) 40%, rgba(255,255,255,0) 80%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalCardOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.94) translateY(8px); }
}
@keyframes modalFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: clamp(40px, 8vmin, 48px);
  height: clamp(40px, 8vmin, 48px);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 50%;
  color: var(--color-text-secondary);
  font-size: clamp(20px, 4vmin, 28px);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: color 0.15s, background 0.15s, transform 0.1s ease, filter 0.1s ease, border-color 0.15s, box-shadow 0.18s;
  z-index: 2;
}
.modal-close:hover  {
  color: var(--color-error);
  border-color: rgba(255,77,77,0.55);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.2) 0%, rgba(255,77,77,0.04) 100%),
    rgba(0,0,0,0.55);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px rgba(255,77,77,0.35);
}
.modal-close:active { transform: scale(0.92); filter: brightness(0.85); }

.modal-title {
  /* Sticky top inside the card — never gets clipped on short viewports. */
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
  padding-right: clamp(36px, 8vmin, 48px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  word-wrap: break-word;
  line-height: 1.2;
}
.modal-body {
  /* Scroll-host — fills the space between title and actions, scrolls when
     content overflows. min-height:0 is required for flex overflow children. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  line-height: 1.55;
  word-wrap: break-word;
}
.modal-body p, .modal-body div { word-wrap: break-word; }
.modal-row {
  display: flex; justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--fs-sm);
}
.modal-row span:first-child { color: var(--color-text-secondary); }

.modal-actions {
  /* Sticky bottom inside the card — visible without scrolling regardless
     of body length. flex:0 0 auto prevents the action row from shrinking
     when many buttons are present. */
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.modal-btn {
  position: relative;
  flex: 1 1 auto;
  min-width: clamp(100px, 30vmin, 160px);
  min-height: 46px;
  padding: var(--space-sm) var(--space-md);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, var(--color-accent-active), var(--color-accent));
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 12px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(120,55,0,0.4);
  box-shadow:
    0 4px 14px rgba(245,166,35,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(120,55,0,0.28);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.18s, background 0.18s;
}
.modal-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 22px rgba(245,166,35,0.6),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,55,0,0.28);
}
.modal-btn:hover::before { left: 130%; }
.modal-btn.secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 100%),
    linear-gradient(135deg, rgba(40,52,68,0.95), rgba(20,28,40,0.98));
  color: var(--color-text-primary);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.modal-btn.secondary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 100%),
    linear-gradient(135deg, rgba(54,68,88,0.95), rgba(28,38,52,0.98));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
}
.modal-btn.danger {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ff4d4d, #ff7a7a);
  color: #fff;
  text-shadow: 0 1px 1px rgba(120,0,0,0.5);
  box-shadow:
    0 4px 14px rgba(255,77,77,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(120,0,0,0.32);
}
.modal-btn.danger:hover {
  box-shadow:
    0 6px 22px rgba(255,77,77,0.6),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(120,0,0,0.32);
}

/* =================================================================
   MAP PICKER MODAL
   ================================================================= */
.modal-card.map-picker-card {
  width: clamp(280px, 90vw, 760px);
  max-height: 92vh;
  max-height: 92dvh;
  padding: var(--space-md);
}
.map-picker-card .modal-title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-sm);
}
.map-picker {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.map-row {
  display: grid;
  grid-template-columns: clamp(72px, 14vmin, 140px) 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(20,27,36,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  min-width: 0;
}
.map-row:hover    { background: rgba(30,40,55,0.7); border-color: rgba(245,166,35,0.25); }
.map-row.equipped { border-color: var(--color-accent); background: rgba(245,166,35,0.08); box-shadow: 0 0 12px rgba(245,166,35,0.15) inset; }
.map-row.locked   { opacity: 0.75; }
.map-thumb {
  width: 100%;
  height: clamp(48px, 8vmin, 90px);
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  display: block;
}
.map-row.equipped .map-thumb { border-color: var(--color-accent); box-shadow: 0 0 10px rgba(245,166,35,0.4); }
.map-info { min-width: 0; }
.map-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.2;
  word-wrap: break-word;
}
.map-bonus {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
  letter-spacing: 0.02em;
  word-wrap: break-word;
}
.map-cta {
  flex-shrink: 0;
  min-width: clamp(80px, 18vmin, 140px);
  min-height: 40px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
  color: #000;
  background: linear-gradient(90deg, var(--color-accent-active), var(--color-accent));
  box-shadow: 0 3px 10px rgba(245,166,35,0.35);
  cursor: pointer;
  white-space: nowrap;
}
.map-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(245,166,35,0.5); }
.map-cta.is-equipped { background: rgba(110,224,122,0.15); color: var(--color-success); border: 1px solid var(--color-success); box-shadow: none; }
.map-cta.is-owned    { background: linear-gradient(90deg, #5ab0ff, #87c5ff); box-shadow: 0 3px 10px rgba(90,176,255,0.35); color: #001020; }
.map-cta.is-locked   { background: rgba(60,70,85,0.7); color: var(--color-text-secondary); box-shadow: none; }

/* =================================================================
   DAILY MODAL
   ================================================================= */
.modal-card.daily-big {
  width: clamp(280px, 92vw, 1080px);
  max-height: 94vh;
  max-height: 94dvh;
}
.daily-modal { padding-top: var(--space-xs); }
.daily-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.daily-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
  flex: 1 1 200px;
  min-width: 0;
  word-wrap: break-word;
}
.daily-streak-pill {
  padding: var(--space-xs) var(--space-md);
  background: linear-gradient(90deg, rgba(255,77,77,0.3), rgba(255,160,0,0.25));
  border: 1px solid var(--color-accent-active);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255,107,45,0.25);
}
.daily-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}
.daily-day {
  position: relative;
  min-height: clamp(100px, 18vmin, 180px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: var(--space-sm) var(--space-xs);
  background: rgba(28,38,51,0.6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s;
}
.daily-day:hover { transform: translateY(-2px); }
.daily-day.current {
  background: linear-gradient(180deg, rgba(245,166,35,0.25), rgba(255,107,45,0.12));
  border-color: var(--color-gold);
  box-shadow: 0 0 20px rgba(255,210,77,0.4), inset 0 0 20px rgba(255,210,77,0.1);
  animation: dailyPulse 1.2s ease-in-out infinite;
}
.daily-day.past { opacity: 0.55; }
.daily-day.grand {
  border: 2px solid var(--color-gold);
  background: linear-gradient(180deg, rgba(212,44,230,0.15), rgba(255,210,77,0.08));
  box-shadow: 0 0 16px rgba(212,44,230,0.3);
}
.dd-num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}
.daily-day.current .dd-num { color: var(--color-gold); }
.dd-preview {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 0;
}
.dd-icon {
  font-size: var(--fs-md);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.dd-skin {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, var(--rarity-color), transparent 70%);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}
.dd-skin img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7)) drop-shadow(0 0 4px rgba(255,255,255,0.1));
}
.dd-skin.big { animation: grandGlow 2s ease-in-out infinite; }
@keyframes grandGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}
.dd-rew {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-xs);
  letter-spacing: 0.02em;
  text-align: center;
  word-wrap: break-word;
}
.daily-day.current .dd-rew { color: var(--color-gold); }
.dd-check {
  position: absolute;
  top: var(--space-xs); right: var(--space-xs);
  width: clamp(16px, 3vmin, 22px);
  height: clamp(16px, 3vmin, 22px);
  background: var(--color-success);
  color: #000;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dd-grand {
  position: absolute;
  top: var(--space-xs); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  background: rgba(0,0,0,0.7);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold);
  white-space: nowrap;
}
.daily-today {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(90deg, rgba(245,166,35,0.12), rgba(255,107,45,0.06));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-align: center;
}
.daily-today-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.daily-today-val {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  word-wrap: break-word;
}
@keyframes dailyPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,210,77,0.35), inset 0 0 16px rgba(255,210,77,0.08); }
  50%      { box-shadow: 0 0 28px rgba(255,210,77,0.65), inset 0 0 22px rgba(255,210,77,0.15); }
}

/* =================================================================
   TOAST
   ================================================================= */
.toast-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-sm));
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 70vw, 380px);
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  pointer-events: none;
  z-index: var(--z-toast);
}
.toast {
  position: relative;
  pointer-events: auto;
  padding: 10px 14px 10px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.18) 100%),
    linear-gradient(135deg, rgba(28,38,51,0.95), rgba(11,16,23,0.97));
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 18px rgba(245,166,35,0.18);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-weight: 700;
  word-wrap: break-word;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  animation: toastIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), toastOut 0.4s ease-out 2.6s forwards;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  overflow: hidden;
}
.toast::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}
.toast.success {
  border-color: var(--color-success);
  border-left-color: var(--color-success);
  color: #d6ffe0;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 22px rgba(110,224,122,0.32);
}
.toast.success::before { background: linear-gradient(90deg, transparent, var(--color-success), transparent); }
.toast.rare {
  border-color: var(--color-gold);
  border-left-color: var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 28px rgba(255,210,77,0.42);
  animation: toastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), rareGlow 1.4s ease-in-out 0.4s infinite, toastOut 0.4s ease-out 2.8s forwards;
  text-shadow: 0 0 10px rgba(255,210,77,0.45), 0 1px 2px rgba(0,0,0,0.55);
}
.toast.rare::before { background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }
@keyframes rareGlow {
  0%, 100% { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 22px rgba(255,210,77,0.32); }
  50%      { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 36px rgba(255,210,77,0.65); }
}
.toast.error {
  border-color: var(--color-error);
  border-left-color: var(--color-error);
  color: #ffd6d6;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 22px rgba(255,77,77,0.32);
}
.toast.error::before { background: linear-gradient(90deg, transparent, var(--color-error), transparent); }
.toast.info {
  border-color: var(--color-info);
  border-left-color: var(--color-info);
  color: #d8efff;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 22px rgba(90,176,255,0.32);
}
.toast.info::before { background: linear-gradient(90deg, transparent, var(--color-info), transparent); }
@keyframes toastIn  {
  0%   { opacity: 0; transform: translateY(-120%) scale(0.94); }
  60%  { opacity: 1; transform: translateY(6px)   scale(1.02); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes toastOut { to   { opacity: 0; transform: translateY(-120%); } }

/* =================================================================
   SETTINGS / MISC
   ================================================================= */
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
  gap: var(--space-md);
  min-height: 44px;
}
.settings-row:last-child { border: 0; }
.toggle {
  position: relative;
  width: clamp(40px, 9vmin, 56px);
  height: clamp(22px, 5vmin, 32px);
  background: var(--bg-3);
  border-radius: var(--radius-pill);
  transition: background 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle.on { background: var(--color-accent); }
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: calc(100% / 2 - 2px);
  height: calc(100% - 4px);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle.on::after { transform: translateX(calc(100% + 4px)); }
.lang-switch { display: flex; gap: var(--space-xs); }
.lang-btn {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.lang-btn.active { background: var(--color-accent); color: #000; }

/* =================================================================
   PRESTIGE
   ================================================================= */
.prestige-info {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(255,107,45,0.05));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.prestige-mul {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--color-gold);
  text-align: center;
  text-shadow: 0 0 12px var(--color-gold);
  letter-spacing: 0.04em;
}

/* =================================================================
   TUTORIAL
   ================================================================= */
/* =================================================================
   TUTORIAL v3 — minimal coach-mark style.
   Tiny hint bar at top + pulsing ring on target. No backdrop, no big
   mascot bubble. Welcome / final use a small centered modal card.
   ================================================================= */
.tut-root {
  position: fixed; inset: 0;
  z-index: var(--z-critical);
  pointer-events: none;
  font-family: var(--font-body, inherit);
}
.tut-root.fade-out { animation: tutFadeOut 0.3s ease forwards; }

/* Pulsing yellow ring around the spotlighted element. Visual only. */
.tut-ring {
  position: fixed;
  border: 2px solid #ffd24d;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px rgba(255, 210, 77, 0.32),
    0 0 22px rgba(255, 210, 77, 0.55),
    inset 0 0 14px rgba(255, 210, 77, 0.22);
  opacity: 0;
  transition: opacity 0.25s ease;
  animation: tutRingPulse 1.6s ease-in-out infinite;
}
.tut-ring.show { opacity: 1; }
@keyframes tutRingPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,210,77,0.30), 0 0 18px rgba(255,210,77,0.45), inset 0 0 12px rgba(255,210,77,0.20); }
  50%      { box-shadow: 0 0 0 4px rgba(255,210,77,0.55), 0 0 34px rgba(255,210,77,0.70), inset 0 0 18px rgba(255,210,77,0.30); }
}

/* Top hint bar — slim, centered, single line. */
.tut-hint {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex; align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  width: min(calc(100vw - 24px), 380px);
  background: linear-gradient(180deg, rgba(34,46,62,0.96) 0%, rgba(15,21,30,0.98) 100%);
  border: 1px solid rgba(255,210,77,0.45);
  border-radius: 12px;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.5),
    0 0 16px rgba(255,210,77,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  color: #f0f4fa;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.25s ease;
  z-index: calc(var(--z-critical) + 2);
}
.tut-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tut-hint.is-done { border-color: rgba(110, 224, 122, 0.6); }

.tut-hint-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: radial-gradient(circle at 30% 30%, #ffe478 0%, #ff8a3d 60%, #b76e0a 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,210,77,0.5), inset 0 0 4px rgba(255,255,255,0.25);
  animation: tutHintBob 2s ease-in-out infinite;
}
@keyframes tutHintBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.tut-hint-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tut-hint-counter {
  flex-shrink: 0;
  padding: 2px 8px;
  background: rgba(255,210,77,0.18);
  color: #ffd24d;
  border-radius: 999px;
  font-family: var(--font-display, inherit);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tut-hint-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #cdd5e1;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tut-hint-btn:hover  { background: rgba(255,210,77,0.12); color: #ffd24d; border-color: rgba(255,210,77,0.45); }
.tut-hint-btn:active { transform: scale(0.92); }
.tut-hint-skip {
  color: #8a98ad;
  font-size: 13px;
}

/* Welcome / final overlay — small centered card. */
.tut-card-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 12, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: calc(var(--z-critical) + 1);
}
.tut-card-overlay.show { opacity: 1; }

.tut-card {
  width: min(100%, 320px);
  /* Cap height so the card never overflows a short landscape viewport;
     content scrolls inside if the welcome text gets tall. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, rgba(34,46,62,0.98) 0%, rgba(15,21,30,1) 100%);
  border: 1px solid rgba(255,210,77,0.45);
  border-radius: 16px;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.65),
    0 0 28px rgba(255,210,77,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  text-align: center;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.tut-card-overlay.show .tut-card {
  transform: scale(1);
  opacity: 1;
}

.tut-card-emoji {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 4px;
  display: inline-block;
  animation: tutHintBob 2s ease-in-out infinite;
}

.tut-card-title {
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: 900;
  color: #ffd24d;
  letter-spacing: 0.02em;
  margin: 6px 0 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tut-card-body {
  font-size: 13px;
  font-weight: 500;
  color: #cdd5e1;
  line-height: 1.4;
  margin-bottom: 16px;
}

.tut-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.tut-card-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
}
.tut-card-btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%),
    linear-gradient(135deg, #ff6b2d, #ffd24d);
  color: #2a1500;
  border: 1px solid rgba(255,217,138,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow:
    0 4px 14px rgba(245,166,35,0.5),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(120,55,0,0.28);
}
.tut-card-btn.primary:hover  { filter: brightness(1.05); }
.tut-card-btn.primary:active { transform: scale(0.96); }
.tut-card-btn.ghost {
  background: transparent;
  color: #8a98ad;
  border: 1px solid rgba(255,255,255,0.1);
}
.tut-card-btn.ghost:hover  { color: #cdd5e1; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.tut-card-btn.ghost:active { transform: scale(0.96); }

/* Tiny coin pop on step done. */
.tut-coin-pop {
  position: fixed;
  font-family: var(--font-display, inherit);
  font-size: 16px;
  font-weight: 900;
  color: #ffd24d;
  text-shadow: 0 0 10px rgba(255,210,77,0.7), 0 2px 4px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: calc(var(--z-critical) + 3);
  animation: tutCoinPop 1s ease-out forwards;
}
@keyframes tutCoinPop {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  20%  { opacity: 1; transform: translateY(-8px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-44px) scale(0.95); }
}

@keyframes tutFadeOut { to { opacity: 0; } }

/* Small phones: shrink hint bar a bit. */
@media (max-width: 380px) {
  .tut-hint { font-size: 12px; padding: 7px 7px 7px 9px; gap: 6px; width: calc(100vw - 16px); }
  .tut-hint-counter { padding: 1px 6px; font-size: 10px; }
  .tut-hint-btn { width: 24px; height: 24px; font-size: 12px; }
  .tut-hint-icon { width: 20px; height: 20px; font-size: 12px; }
  .tut-card { padding: 18px 16px 14px; }
  .tut-card-emoji { font-size: 26px; }
  .tut-card-title { font-size: 15px; }
  .tut-card-body { font-size: 12px; margin-bottom: 12px; }
  .tut-card-btn { font-size: 12px; min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .tut-ring, .tut-hint-icon, .tut-card-emoji {
    animation: none !important;
  }
}

/* =================================================================
   RAIN FX (coin shower)
   ================================================================= */
.rain-fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-floating);
  overflow: hidden;
}
.coin-particle {
  position: absolute;
  width: clamp(8px, 1.6vmin, 16px);
  height: clamp(8px, 1.6vmin, 16px);
  background: radial-gradient(circle, var(--color-gold), #b87d1e);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-gold);
  pointer-events: none;
}

/* =================================================================
   CELEBRATIONS — confetti, screen flash, rank-up overlay
   Triggered by helpers in js/ui.js (UI.celebrate, UI.flash, UI.rankUpFx)
   ================================================================= */
.celebrate-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-floating);
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  top: -20px;
  pointer-events: none;
  animation: confettiFall var(--cf-dur, 1.6s) cubic-bezier(0.25, 0.5, 0.4, 1) forwards;
  transform-origin: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translate(0, -10px) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cf-x, 0), var(--cf-y, 100vh)) rotate(var(--cf-rot, 540deg)); }
}

.screen-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,210,77,0.55) 0%, rgba(255,210,77,0.18) 35%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-toast);
  animation: screenFlash 0.6s ease-out forwards;
  mix-blend-mode: screen;
}
.screen-flash.danger { background: radial-gradient(ellipse at center, rgba(255,77,77,0.55) 0%, rgba(255,77,77,0.18) 35%, transparent 70%); }
.screen-flash.victory {
  background:
    radial-gradient(ellipse at center, rgba(110,224,122,0.5) 0%, rgba(255,210,77,0.18) 35%, transparent 70%);
}
@keyframes screenFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

.rank-up-overlay {
  position: fixed;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: var(--z-toast-over-modal);
  animation: rankUpFade 2.4s ease-out forwards;
}
.rank-up-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,210,77,0.4) 0%, transparent 60%),
    rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.rank-up-text {
  position: relative;
  font-family: var(--font-logo);
  font-size: clamp(36px, 9vmin, 88px);
  font-weight: 900; font-style: italic;
  background: linear-gradient(180deg, #fff8d8 0%, #ffd24d 45%, #f5a623 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  filter:
    drop-shadow(0 0 24px rgba(255,210,77,0.85))
    drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  animation: rankUpPop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  padding: 0 16px;
}
.rank-up-sub {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(14px, 3vmin, 22px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.12em;
  margin-top: 8px;
  text-shadow: 0 0 14px rgba(255,210,77,0.7), 0 2px 4px rgba(0,0,0,0.55);
  animation: rankUpSubFade 1s ease-out 0.3s both;
}
@keyframes rankUpFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rankUpPop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  40%  { transform: scale(1.2)  rotate(3deg);  opacity: 1; }
  60%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
@keyframes rankUpSubFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   MOBILE RESPONSIVE — universal pass
   Targets 320–414px (smallest phones) and ensures HUD + stats + combo
   + showcase + bomb + wave + quick-actions + bottom-nav coexist.
   ================================================================= */
@media (max-width: 414px) {
  .hud-right {
    /* Allow currency chips to compress before icon-btns drop off */
    gap: 4px;
  }
  .currency { padding: 4px 8px; }
  .icon-btn {
    /* Yandex 1.10.1: minimum tappable area on phones — 44×44 always. */
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    font-size: 18px;
  }
  .rank-badge { padding: 3px 8px; }
  .rank-name { font-size: 11px; }
  .quick-actions {
    gap: 6px;
    padding: 6px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 8px);
  }
  .qa { font-size: 11px; min-height: 44px; padding: 6px 4px; letter-spacing: 0.02em; }
  /* Bottom-nav: compact label/icon for narrow screens */
  .nav-btn {
    padding: 4px 0 2px;
    min-height: 50px;
    gap: 2px;
  }
  .nav-btn span { font-size: 10px; letter-spacing: 0.02em; }
  /* Mission card actions stack vertically on tight screens */
  .mission { gap: 8px; padding: 8px 10px; }
  .m-icon { width: 40px; height: 40px; font-size: 20px; }
  /* Modal padding tighter */
  .modal-card { padding: 22px 14px 20px; }
  .modal-actions { gap: 8px; }
  .modal-btn { font-size: 13px; min-width: 90px; padding: 8px 10px; }
}

@media (max-width: 360px) {
  .currency .c-val { font-size: 11px; }
  .currency.coins .c-icon, .currency.stars .c-icon { font-size: 14px; }
  .rank-name { font-size: 10px; }
  /* 1.10.1: even on 360px keep 44×44 — HUD math leaves enough room. */
  .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .qa { font-size: 10.5px; }
  .qa::after { height: 1.5px; }
  .stats-row { padding: 0 4px; }
  .combo-wrap { padding: 0 8px; }
  /* Showcase smaller so it doesn't crowd into wave/bomb event */
  .weapon-showcase { width: 92%; }
  .weapon-showcase img { max-height: clamp(130px, 28vmin, 260px); }
}

/* Short viewports (landscape phones) — keep critical UI compact, but tap
   targets stay ≥44 CSS-px per Yandex 1.10.1 / Apple HIG / Material guidelines. */
@media (max-height: 580px) and (orientation: landscape) {
  .weapon-showcase img { max-height: clamp(110px, 22vmin, 180px); }
  .quick-actions { padding-top: 4px; padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
  .qa { min-height: 44px; }
}

/* =================================================================
   EXTREME-SHORT VIEWPORTS (any orientation, height < 480px)
   Covers: desktop iframe with the user dragging the bottom edge up,
   foldable inner-display split-screen, very compressed Yandex Games
   embedding. Compresses the play-screen vertical layout so the
   showcase + click area + bomb/wave panels never overlap quick-actions
   and so the bottom-nav never gets clipped.
   ================================================================= */
@media (max-height: 480px) {
  /* Tighter HUD / stats / combo padding so play-area gets more height */
  .hud { padding-top: calc(env(safe-area-inset-top) + 2px); padding-bottom: 2px; }
  .stats-row { padding: 0 6px; gap: 6px; }
  .stat-chip { min-height: 36px; padding: 4px 6px; }
  .stat-chip > span { font-size: 8px; }
  .stat-chip b { font-size: 12px; }
  .combo-wrap { padding: 0 8px; }
  .combo-bar { height: 5px; }
  .weapon-showcase img { max-height: clamp(80px, 18vmin, 140px); }
  .active-boost-bar { gap: 4px; }
  .quick-actions { padding-top: 3px; padding-bottom: calc(env(safe-area-inset-bottom) + 3px); }
  .qa { min-height: 44px; padding: 4px 6px; font-size: 11px; }
  .bottom-nav { padding: 3px 0 calc(3px + env(safe-area-inset-bottom)); }
  .nav-btn { min-height: 44px; padding: 2px 0 1px; gap: 1px; }
  .nav-btn img { width: clamp(38px, 9vmin, 56px); height: clamp(24px, 6vmin, 40px); }
  .nav-btn span { font-size: 9px; }
  /* Wave/bomb panels compress so they don't cover half the play-area.
     Note: do NOT override .wave-event `top` — the base rule already uses
     a calc() based on the HUD/stats/combo stack which adapts at any
     viewport height. */
  .wave-event { padding: 6px 10px 7px; gap: 4px; }
  .we-head b { font-size: 13px; }
  .bomb-event { width: clamp(160px, 34vmin, 280px); padding: var(--space-sm); }
}

/* =================================================================
   ULTRA-NARROW VIEWPORTS (width ≤ 320px — legacy iPhone SE, very
   strong browser zoom-out, embedded thumbnails). Ensures no critical
   element overflows or truncates beyond what is recoverable via scroll.
   ================================================================= */
@media (max-width: 320px) {
  .currency { padding: 3px 6px; gap: 4px; }
  .currency .c-val { font-size: 10px; }
  .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; }
  .rank-name { font-size: 9.5px; }
  .stats-row { padding: 0 3px; gap: 3px; }
  .stat-chip { padding: 3px 4px; }
  .nav-btn img { width: 38px; height: 26px; }
  .nav-btn span { font-size: 9px; letter-spacing: 0.01em; }
  .qa { font-size: 10px; padding: 4px 3px; letter-spacing: 0; }
  /* Tabs are flex:1 so they shrink — but at 320w with 4 tabs the text can
     visually clip a neighbour. Keep them, just smaller. */
  .tab { font-size: 11px; padding: 6px 8px; min-height: 36px; }
}

/* =================================================================
   ULTRA-WIDE DESKTOP (≥ 1600px) — keep all UI within the visible
   viewport. The .app already drops max-width above 900px (full-bleed),
   so additional rules are only needed to enlarge the cap on the
   weapon-showcase image (otherwise it looks tiny in the centre of a
   2560-wide screen). */
@media (min-width: 1600px) {
  .weapon-showcase img { max-height: clamp(360px, 38vmin, 560px); }
}

/* Universal :hover lift on any clickable that doesn't already define one */
@media (hover: hover) {
  .nav-btn:hover { color: var(--color-text-primary); }
  .toggle:hover { filter: brightness(1.08); }
}

/* =================================================================
   UTILITY
   ================================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(245,166,35,0.5), rgba(245,166,35,0.18));
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255,210,77,0.7), rgba(245,166,35,0.32)); }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}