:root {
  --bg: #06090b;
  --panel: rgba(9, 14, 16, 0.84);
  --panel-strong: rgba(10, 15, 18, 0.94);
  --line: rgba(111, 255, 160, 0.24);
  --ink: #effdff;
  --muted: #9fb4c5;
  --cyan: #5ce7ff;
  --green: #7dff85;
  --gold: #ffd166;
  --orange: #ff8a3d;
  --red: #ff4268;
  --pink: #ff4fd8;
  --blue: #4e8bff;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  --radius: 8px;
  /* ===== XB design-system tokens (menu redesign) ===== */
  /* Semantic accents — every component reads colour from a per-context --ctx. */
  --accent-action: var(--cyan);    /* primary/equip/claim CTAs + "you are here" */
  --accent-premium: var(--gold);   /* currency, premium, legendary, prestige */
  --accent-success: var(--green);  /* done / claimed / maxed / progress */
  --accent-danger: var(--red);     /* insufficient / locked-out */
  --ctx: var(--cyan);              /* per-screen/per-card context accent (overridden inline) */
  /* Type scale (size/weight carries hierarchy) */
  --fz-hero: 1.9rem; --fz-title: 1.5rem; --fz-h2: 1.05rem; --fz-body: 0.9rem;
  --fz-label: 0.78rem; --fz-meta: 0.66rem; --fz-micro: 0.6rem;
  /* 4px spacing + radius ladder */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-pill: 999px; --r-card: 14px; --r-hero: 18px; --r-key: 5px;
  /* One consistent safe-area inset for every positioned HUD element.
     In a normal browser/PWA this is the real env() safe area; inside
     Telegram it is overridden (see .tg-webapp) with the SDK-reported insets. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button {
  font: inherit;
}

.game-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(125, 255, 133, 0.1), transparent 34%),
    radial-gradient(circle at 80% 82%, rgba(255, 66, 104, 0.11), transparent 28%),
    #06090b;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

/* Static full-screen overlays as GPU-composited layers instead of redrawing the
   gradients on the canvas every frame (big fill-rate saving, identical look).
   Shown only while the world is visible. */
.vignette-layer,
.fog-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.vignette-layer {
  background: radial-gradient(circle at 50% 50%, transparent 24%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0.56) 94%);
}
.fog-layer {
  background: radial-gradient(circle at 50% 50%, rgba(4, 8, 12, 0) 28%, rgba(4, 8, 12, var(--fog-alpha, 0)) 90%);
}
body[data-game-state="playing"] .vignette-layer,
body[data-game-state="paused"] .vignette-layer,
body[data-game-state="levelup"] .vignette-layer,
body[data-game-state="playing"] .fog-layer,
body[data-game-state="paused"] .fog-layer,
body[data-game-state="levelup"] .fog-layer {
  opacity: 1;
}

/* Animated colourful menu/idle background — a layered space scene (drifting
   nebula + parallax starfield + energy-core planet + cell-by-cell hex floor),
   drawn by animateMenuBackground() onto a dedicated canvas that sits ABOVE
   #gameCanvas (the loop fills it opaque #04060a in menu states) yet BELOW the
   overlays (z-index 20), so the frosted menu panels blur it into a vivid
   "stadium" backdrop. Hidden (opacity 0) during gameplay so it never competes
   with the arena. A CSS gradient base shows instantly before the canvas paints. */
.menu-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  background:
    radial-gradient(120% 90% at 50% 16%, rgba(92, 231, 255, 0.18), transparent 56%),
    radial-gradient(90% 80% at 84% 88%, rgba(255, 79, 216, 0.13), transparent 52%),
    radial-gradient(80% 80% at 12% 80%, rgba(78, 139, 255, 0.13), transparent 50%),
    linear-gradient(180deg, #13263f 0%, #142844 50%, #112138 100%);
}
body[data-game-state="menu"] .menu-bg,
body[data-game-state="gameover"] .menu-bg,
body[data-game-state="cleared"] .menu-bg {
  opacity: 1;
}


.hud {
  position: absolute;
  top: 14px;
  left: max(14px, var(--safe-left));
  right: max(14px, var(--safe-right));
  z-index: 5;
  display: grid;
  grid-template-columns: 104px 92px minmax(210px, 1fr) 170px 104px 104px;
  gap: 10px;
  pointer-events: none;
}

.corner-help span,
.skill-pill small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.meter,
.xp-strip {
  overflow: hidden;
  border: 1px solid rgba(239, 253, 255, 0.18);
  background: rgba(239, 253, 255, 0.08);
}

.meter {
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
}

.meter i,
.xp-strip i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Per-frame-updated bars: no width transition (avoids the lagging "chase"). */
}

.hp-meter i {
  background: linear-gradient(90deg, var(--red), var(--orange), var(--gold));
  box-shadow: 0 0 14px rgba(255, 66, 104, 0.5);
}

.armor-meter {
  height: 6px;
  margin-top: 5px;
}

.armor-meter i {
  width: 0%;
  background: linear-gradient(90deg, #6d7cff, var(--cyan));
  box-shadow: 0 0 12px rgba(92, 231, 255, 0.42);
}

.weapon-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-strip {
  position: absolute;
  top: 90px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* leave room for safe-areas / notch, AND don't let it kiss the viewport edges */
  max-width: min(560px, calc(100vw - 36px));
  padding: 9px 13px;
  border: 1px solid rgba(125, 255, 133, 0.28);
  border-radius: 999px;
  background: rgba(3, 7, 9, 0.66);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  pointer-events: none;
}

.mission-strip strong {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 950;
}

.mission-strip span,
.mission-strip em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.mission-strip span {
  flex: 0 0 auto;
  color: var(--cyan);
}

.mission-strip em {
  min-width: 0;
  /* Compact one-line copy is now short ("Гнёзда 3/6"), so ellipsis is gone —
     but keep a 1-line clamp as safety against very long translations. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32ch;
}

.xp-strip {
  position: absolute;
  left: max(14px, var(--safe-left));
  right: max(14px, var(--safe-right));
  bottom: calc(14px + var(--safe-bottom));
  z-index: 5;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
}

.xp-strip i {
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--pink));
  box-shadow: 0 0 18px rgba(54, 247, 255, 0.62);
}

.skill-tray {
  position: absolute;
  left: 14px;
  bottom: 40px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(720px, calc(100vw - 28px));
  pointer-events: none;
}

.skill-pill {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  min-width: 132px;
  padding: 6px 9px 6px 7px;
  border: 1px solid rgba(239, 253, 255, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--skill-color, var(--cyan)) 13%, transparent), transparent 62%),
    rgba(5, 10, 26, 0.62);
  backdrop-filter: blur(12px);
}

.skill-pill-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--skill-color, var(--cyan));
  background: color-mix(in srgb, var(--skill-color, var(--cyan)) 16%, rgba(3, 7, 9, 0.9));
  box-shadow: 0 0 14px color-mix(in srgb, var(--skill-color, var(--cyan)) 18%, transparent);
}

.skill-pill-copy {
  min-width: 0;
}

.skill-pill b {
  display: block;
  font-size: 0.76rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Touch devices (the only target) drive via the on-screen buttons — the keyboard
   corner-hint (WASD/R/1-0/Esc) is desktop-only, so hide it on coarse pointers. */
@media (pointer: coarse) { .corner-help { display: none !important; } }
.corner-help {
  position: absolute;
  right: 14px;
  bottom: 40px;
  z-index: 5;
  width: 210px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 253, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(5, 10, 26, 0.58);
  color: var(--ink);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.corner-help b {
  display: block;
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 0.84rem;
}

.mobile-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 8;
  display: none;
  height: 150px;
  padding: 0 clamp(18px, 5vw, 42px);
  pointer-events: none;
}

.move-stick {
  position: absolute;
  left: max(clamp(18px, 5vw, 42px), var(--safe-left));
  bottom: 0;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(125, 255, 133, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(125, 255, 133, 0.07), rgba(3, 7, 9, 0.22) 62%),
    rgba(3, 7, 9, 0.18);
  box-shadow: inset 0 0 18px rgba(125, 255, 133, 0.05), 0 12px 26px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
  opacity: 0.28;
  pointer-events: auto;
  touch-action: none;
  transition: opacity 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.move-stick::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgba(239, 253, 255, 0.16);
  border-radius: 50%;
}

.move-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(125, 255, 133, 0.95), rgba(92, 231, 255, 0.86));
  box-shadow: 0 0 18px rgba(125, 255, 133, 0.22);
  opacity: 0.58;
  transform: translate(-50%, -50%);
  transition: transform 70ms linear;
}

.move-stick.active,
.move-stick.floating {
  opacity: 0.76;
  border-color: rgba(125, 255, 133, 0.44);
  background:
    radial-gradient(circle, rgba(125, 255, 133, 0.16), rgba(3, 7, 9, 0.42) 62%),
    rgba(3, 7, 9, 0.34);
  box-shadow: inset 0 0 26px rgba(125, 255, 133, 0.1), 0 18px 42px rgba(0, 0, 0, 0.3), 0 0 24px rgba(92, 231, 255, 0.12);
}

.move-stick.active i,
.move-stick.floating i {
  opacity: 0.95;
  box-shadow: 0 0 26px rgba(125, 255, 133, 0.42);
}

.mobile-actions {
  position: absolute;
  right: max(clamp(18px, 5vw, 42px), var(--safe-right));
  bottom: 0;
  width: 158px;
  display: grid;
  grid-template-columns: 74px 74px;
  grid-template-areas:
    "weapon reload"
    "dash dash";
  gap: 10px;
  pointer-events: auto;
}

/* In-run weapon TAP-PICKER — pops up above the weapon button. */
.weapon-picker {
  position: absolute;
  bottom: calc(100% + 12px);
  /* Shifted OFF the screen edge: at right:0 the chips slid under the Dynamic
     Island / rounded corner (landscape safe-area), clipping the ammo counters. */
  right: 52px;
  display: none;
  flex-direction: column-reverse;   /* current weapon nearest the button */
  gap: 8px;
  /* Wide enough for the longest RU weapon name + a full mag/reserve counter. */
  width: min(292px, calc(100vw - 140px));
  pointer-events: auto;
}
.weapon-picker.open { display: flex; }
.left-handed .weapon-picker { right: auto; left: 52px; }
.wp-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(160deg, rgba(22, 32, 40, 0.95), rgba(8, 12, 18, 0.97));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wc, var(--cyan)) 38%, transparent), 0 8px 22px rgba(0, 0, 0, 0.5);
  transform-origin: bottom right;
  animation: wpPop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  animation-delay: calc(var(--wp-i, 0) * 34ms);
}
.left-handed .wp-chip { transform-origin: bottom left; text-align: left; }
.wp-chip.current {
  box-shadow: inset 0 0 0 2px var(--wc, var(--cyan)), 0 0 20px color-mix(in srgb, var(--wc, var(--cyan)) 38%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--wc, var(--cyan)) 16%, rgba(22, 32, 40, 0.95)), rgba(8, 12, 18, 0.97));
}
.wp-chip:active { filter: brightness(1.12); transform: scale(0.97); }
.wp-dot {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--wc, var(--cyan));
  box-shadow: 0 0 12px color-mix(in srgb, var(--wc, var(--cyan)) 70%, transparent);
}
.wp-name { flex: 1; min-width: 0; font-size: 0.79rem; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-ammo { flex: 0 0 auto; font-size: 0.78rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.wp-ammo i { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.wp-chip.current .wp-ammo { color: var(--wc, var(--cyan)); }
@keyframes wpPop { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

.mobile-button {
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(239, 253, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 7, 9, 0.62);
  color: var(--ink);
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  /* none (not manipulation): blocks the double-tap-zoom gesture on iOS. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-button.small:nth-child(1) {
  grid-area: weapon;
}

.mobile-button.small:nth-child(2) {
  grid-area: reload;
}

.mobile-button.dash {
  grid-area: dash;
  min-width: 158px;
  border-color: rgba(92, 231, 255, 0.48);
  background: linear-gradient(135deg, rgba(92, 231, 255, 0.25), rgba(125, 255, 133, 0.12)), rgba(3, 7, 9, 0.64);
  color: var(--cyan);
  box-shadow: 0 0 32px rgba(92, 231, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.34);
}

.mobile-button:active,
.pause-button:active,
.back-button:active,
.loc-diff:active {
  filter: brightness(1.22);
}

.mobile-button:active {
  box-shadow: 0 0 30px rgba(92, 231, 255, 0.32), 0 10px 26px rgba(0, 0, 0, 0.3);
}

.toast {
  position: absolute;
  top: 94px;
  left: 50%;
  /* Above every modal (.coop-modal z=70) — an "insufficient funds" toast fired
     from the purchase modal must never render UNDER that modal. */
  z-index: 130;
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid rgba(125, 255, 133, 0.36);
  border-radius: var(--radius);
  background: rgba(7, 17, 36, 0.86);
  color: var(--ink);
  text-align: center;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.achievement-popups {
  position: absolute;
  top: calc(142px + var(--safe-top));
  /* Anchored left so the toasts clear the top-right minimap (which renders on
     screens >=600px wide and previously overlapped these). */
  left: max(14px, var(--safe-left));
  /* Above the result overlays (.overlay z=20): end-of-run achievement + rank-up
     celebrations fire while the game-over / victory screen is up, and at z=13
     they were hidden underneath it (rank-up popup never seen on a win). */
  z-index: 45;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 28px - var(--safe-left) - var(--safe-right)));
  pointer-events: none;
}

.achievement-toast {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--achievement-color, var(--cyan)) 52%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--achievement-color, var(--cyan)) 22%, transparent), transparent 54%),
    rgba(3, 7, 9, 0.86);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 24px color-mix(in srgb, var(--achievement-color, var(--cyan)) 18%, transparent);
  color: var(--ink);
  animation: achievement-pop 420ms cubic-bezier(0.18, 0.9, 0.22, 1.2);
}

.achievement-toast.hiding {
  transform: translateX(18px);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}

.achievement-toast small {
  display: block;
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-toast b,
.achievement-toast em {
  display: block;
}

.achievement-toast b {
  margin-top: 2px;
  font-size: 0.9rem;
}

.achievement-toast em {
  margin-top: 3px;
  color: var(--gold);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

@keyframes achievement-pop {
  from {
    transform: translateX(26px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 14, 0.55);
  backdrop-filter: blur(9px);
}

.overlay.active {
  display: grid;
}

.panel {
  width: min(760px, 100%);
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(138, 244, 255, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(125, 255, 133, 0.1), transparent 36%),
    linear-gradient(315deg, rgba(255, 66, 104, 0.14), transparent 34%),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.intro-panel {
  text-align: center;
}

.small-panel {
  width: min(440px, 100%);
  text-align: center;
}

.level-panel {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom));
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  overflow: visible;
}

#levelScreen {
  background: radial-gradient(circle at 50% 48%, rgba(92, 231, 255, 0.12), rgba(2, 5, 14, 0.42) 52%, rgba(2, 5, 14, 0.22));
  backdrop-filter: blur(2px);
  padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
}

.level-panel .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0 0 10px;
  padding: 0 14px;
  border: 1px solid rgba(92, 231, 255, 0.3);
  border-radius: 999px;
  background: rgba(3, 7, 9, 0.55);
  box-shadow: 0 0 24px rgba(92, 231, 255, 0.12);
  backdrop-filter: blur(8px);
}

.level-panel h2,
.level-title {
  margin: 0 0 2px;
  font-size: clamp(1.18rem, 3vw, 1.6rem);
  background: linear-gradient(135deg, #effdff, var(--cyan) 60%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.level-panel > p:not(.kicker) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.kicker {
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kicker.danger {
  color: var(--red);
}

h1,
h2 {
  margin: 0;
  line-height: 0.98;
}

h1 {
  font-size: clamp(2.55rem, 8vw, 6.4rem);
  background: linear-gradient(135deg, #effdff, var(--green) 42%, var(--cyan) 72%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(125, 255, 133, 0.16);
}

h2 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.panel p:not(.kicker) {
  max-width: 650px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1rem;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px;
  border-radius: var(--radius);
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.primary-button {
  border: 1px solid rgba(125, 255, 133, 0.86);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #031014;
  box-shadow: 0 0 30px rgba(54, 247, 255, 0.28);
}

.ghost-button {
  margin-left: 8px;
  border: 1px solid rgba(239, 253, 255, 0.22);
  background: rgba(239, 253, 255, 0.06);
  color: var(--ink);
}

.primary-button:hover,
.primary-button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
  transform: translateY(-2px);
}

.primary-button:focus-visible,
.ghost-button:focus-visible,
.upgrade-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.control-grid,
.results {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.control-grid {
  grid-template-columns: repeat(3, 1fr);
}

.control-grid span,
.results span {
  padding: 12px;
  border: 1px solid rgba(239, 253, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.055);
  color: var(--muted);
  font-weight: 700;
}

.results {
  grid-template-columns: repeat(2, 1fr);
}

.results b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.22rem;
}

/* Level-up cards: a premium vertical stack (emblem · content · level) that
   reads cleanly in portrait and never overflows. */
.upgrade-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  max-height: min(62vh, 430px);
  overflow: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.upgrade-grid::-webkit-scrollbar { display: none; }

.upgrade-card {
  position: relative;
  display: grid;
  /* upgrade-grid is a flex column with max-height -> default flex-shrink:1 was
     squeezing tall cards and clipping the 2nd combo hint. Keep each card at its
     natural height; the grid scrolls when total content exceeds max-height. */
  flex-shrink: 0;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 13px;
  padding: 14px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--upgrade-color, var(--cyan)) 42%, rgba(239, 253, 255, 0.1));
  /* Premium accent moved from left side to TOP — see ::before below. */
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--upgrade-color, var(--cyan)) 28%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--upgrade-color, var(--cyan)) 8%, transparent), transparent 70%),
    rgba(8, 12, 18, 0.95);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: visible;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.36),
    0 0 24px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 12%, transparent);
  opacity: 0;
  animation: uc-in 380ms cubic-bezier(0.16, 0.84, 0.24, 1.12) var(--uc-delay, 0ms) both;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 28px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--upgrade-color, var(--cyan)) 32%, transparent);
}

/* Rarity-coloured bar across the TOP of every card (premium "trophy" look),
   with a soft glow halo bleeding into the card. Same idea everywhere — the
   landscape media query just scales it up. */
.upgrade-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 12%) 22%,
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 20%) 50%,
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 12%) 78%,
    transparent 100%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 75%, transparent),
    0 2px 12px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 55%, transparent);
}
.upgrade-card::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 22%;
  right: 22%;
  height: 18px;
  background: radial-gradient(50% 100% at 50% 0%,
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 50%, transparent),
    transparent 75%);
  filter: blur(1px);
  pointer-events: none;
}

@keyframes uc-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.upgrade-card:hover,
.upgrade-card:focus-visible {
  border-color: var(--upgrade-color, var(--cyan));
  transform: translateY(-2px);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.46),
    0 0 44px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 36%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--upgrade-color, var(--cyan)) 50%, transparent);
}

.upgrade-card.legendary {
  background:
    linear-gradient(100deg, rgba(255, 209, 102, 0.22), transparent 62%),
    rgba(20, 14, 6, 0.95);
}

.uc-emblem {
  display: grid;
  place-items: center;
  align-self: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 32%,
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 62%, #0a0f16),
    color-mix(in srgb, var(--upgrade-color, var(--cyan)) 16%, #070b11));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 72%, transparent),
    0 0 20px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 30%, transparent);
}

.uc-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #f6feff;
}

.skill-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 58%, transparent));
}

.skill-icon-halo {
  fill: color-mix(in srgb, currentColor 18%, transparent);
  stroke: color-mix(in srgb, currentColor 66%, transparent);
  stroke-width: 2.2;
}

.skill-icon-glyph {
  stroke: currentColor;
}

.combo-icon {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 44px;
  height: 34px;
  isolation: isolate;
}

.combo-icon i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(3, 7, 9, 0.72);
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 20%, transparent);
}

.combo-icon i:first-child { transform: translateX(4px) rotate(-8deg); }
.combo-icon i:last-child { transform: translateX(-4px) rotate(8deg); }

.combo-icon .skill-icon-svg {
  width: 24px;
  height: 24px;
}

.uc-body { min-width: 0; }

.uc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }

.uc-kind {
  font-size: 0.52rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #051016;
  background: var(--upgrade-color, var(--cyan));
}

.uc-rarity {
  font-size: 0.54rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 70%, var(--muted));
}

.uc-name { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.12; }

.uc-desc { margin: 3px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.3; }

.uc-combo {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.64rem;
  font-weight: 850;
  color: var(--gold);
  line-height: 1.2;
}

.combo-hint-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.combo-hint-copy {
  min-width: 0;
  line-height: 1.25;
  /* name + "+ other" flow inline and wrap together instead of being clipped */
  overflow-wrap: anywhere;
}

.combo-hint-copy b {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
}

.combo-hint-copy em {
  color: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 70%, var(--muted));
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
}

.uc-combo .combo-icon {
  width: 38px;
  height: 30px;
}

.uc-combo .combo-icon i {
  width: 25px;
  height: 25px;
}

.uc-combo .combo-icon .skill-icon-svg {
  width: 21px;
  height: 21px;
}

.uc-level {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 2px;
  padding-left: 4px;
  min-width: 42px;
  text-align: right;
}

.uc-level span {
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.uc-level b { font-size: 0.92rem; font-weight: 950; color: var(--upgrade-color, var(--cyan)); }

@media (max-width: 850px) {
  .hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .corner-help {
    display: none;
  }

  .mobile-controls {
    display: flex;
  }

  .upgrade-grid,
  .control-grid {
    grid-template-columns: 1fr;
  }

  #levelScreen .upgrade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .upgrade-card {
    min-height: 0;
  }
}

@media (pointer: coarse) {
  .mobile-controls {
    display: flex;
  }

  .corner-help {
    display: none;
  }
}

@media (max-width: 560px) {
  .hud {
    top: 8px;
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .weapon-card {
    grid-column: span 2;
  }

  .meter {
    height: 6px;
    margin-top: 4px;
  }

  .armor-meter {
    height: 4px;
    margin-top: 3px;
  }

  .mission-strip {
    top: 150px;
    gap: 8px;
    max-width: calc(100vw - 16px);
    padding: 7px 10px;
    border-radius: 8px;
  }

  .mission-strip strong {
    font-size: 0.8rem;
  }

  .mission-strip span,
  .mission-strip em {
    font-size: 0.64rem;
  }

  .mission-strip em {
    max-width: 148px;
  }

  .toast {
    top: 194px;
    min-width: 190px;
    max-width: calc(100vw - 32px);
    padding: 8px 11px;
    font-size: 0.86rem;
  }

  .skill-tray {
    display: none;
  }

  .mobile-controls {
    bottom: 34px;
    height: 128px;
    padding: 0 14px;
  }

  .move-stick {
    left: max(14px, var(--safe-left));
    bottom: 0;
    width: 116px;
    height: 116px;
  }

  .move-stick i {
    width: 48px;
    height: 48px;
  }

  .mobile-actions {
    right: max(14px, var(--safe-right));
    bottom: 4px;
    width: 136px;
    grid-template-columns: 64px 64px;
    gap: 8px;
  }

  .mobile-button {
    min-height: 58px;
    font-size: 0.78rem;
  }

  .mobile-button.dash {
    min-width: 136px;
  }

  .results {
    grid-template-columns: 1fr;
  }

  .ghost-button {
    margin-left: 0;
  }
}

/* ===================== MENU SYSTEM ===================== */
.menu-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  align-content: center;
  /* Horizontal padding MUST include the landscape notch/Dynamic-Island insets
     (--safe-left/--safe-right) or the left column of every subscreen clips under
     the inset. Portrait insets are 0 → max() keeps the old 18px there. */
  padding: max(18px, var(--safe-top)) max(18px, var(--safe-right)) max(18px, var(--safe-bottom)) max(18px, var(--safe-left));
}

/* Sub-screens that use the simple centred .panel: TOP-align it so a short panel in
   landscape (wide grid → few rows) doesn't leave a big empty band ABOVE the header.
   Hangar/Base use their own bounded-flex layout; #mainMenu centres its hero;
   #locationScreen stretches the map — those are intentionally excluded. */
#shopScreen.menu-overlay, #achievementsScreen.menu-overlay, #rewardsScreen.menu-overlay,
#passScreen.menu-overlay, #profileScreen.menu-overlay, #settingsScreen.menu-overlay,
#howtoScreen.menu-overlay, #newsScreen.menu-overlay { align-content: start; }

.menu-overlay .panel {
  /* Fit inside the overlay's safe-area padding so ONLY the panel scrolls. If the
     panel is taller than the padded area the overlay scrolls too, and the sticky
     .panel-head desyncs from the cards (header floats over content) — the "pushed
     down under the Telegram bar" bug. */
  max-height: calc(100dvh - max(18px, var(--safe-top)) - max(18px, var(--safe-bottom)) - 24px);
  overflow-y: auto;
  /* Kill any sideways drift: only vertical scrolling is ever wanted in a subscreen. */
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.menu-panel { width: min(520px, 100%); text-align: center; }

/* ============ MAIN MENU — "stage" layout ============
   Inspired by modern mobile games (Brawl Stars et al.): the equipped ship is the
   showpiece in the middle; economy/progression rail on the left, meta rail on the
   right; currencies + settings across the top; a big PLAY at the bottom. Full-bleed,
   no card. Reflows by orientation — landscape: vertical side rails flanking the hero;
   portrait: rails collapse into horizontal rows stacked above PLAY. */
#mainMenu.menu-overlay {
  place-items: stretch;
  align-content: stretch;
  overflow: hidden;
  padding:
    max(8px, var(--safe-top)) max(10px, var(--safe-right))
    max(8px, var(--safe-bottom)) max(10px, var(--safe-left));
  /* The main menu is full-bleed and the animated #menuBgCanvas IS the focus, so
     drop the heavy darkening + blur the generic overlay applies (rgba(2,5,14,0.55)
     + blur 9px) — only a light top-to-bottom wash that keeps the bottom CTA/tiles
     legible while letting the colourful nebula/planet/stars read up top. */
  background: linear-gradient(180deg, rgba(3, 10, 20, 0.22) 0%, rgba(3, 8, 14, 0.34) 52%, rgba(2, 6, 11, 0.5) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.menu-stage {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top  top    top"
    "left hero   right"
    "left bottom right";
  gap: clamp(8px, 1.6vh, 16px);
  text-align: center;
}

/* — top bar: best score · currencies · settings — */
.menu-topbar {
  grid-area: top;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}
.topbar-curr { display: flex; align-items: stretch; gap: 8px; }
.topstat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 14, 20, 0.6);
}
.topstat.profile { align-items: flex-start; }
.topstat > span {
  font-size: 0.6rem;
  color: rgba(214, 244, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.topstat > b {
  font-size: 0.96rem;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 3px;
}
/* Inline currency icon (SVG): render as a 1em glyph box on the text baseline. */
.cur-ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; font-style: normal; flex: 0 0 auto; }
svg.cur-ico { width: 1.05em; height: 1.05em; }
.currency-value { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; line-height: 1; }
.currency-value > b { font: inherit; font-weight: 950; }
.currency-value > small { font-size: 0.66em; font-weight: 850; color: var(--muted); text-transform: none; letter-spacing: 0; }
.currency-value.cores > small { color: #8deeff; }
.currency-value.prisms > small { color: #ffd166; }
.feat-buy .currency-value > small, .sb-buy .currency-value > small,
.shoppv-buy .currency-value > small, .pass-prem-buy .currency-value > small,
.skin-action-btn .currency-value > small, .detail-cta .currency-value > small,
.tech-buy .currency-value > small { color: inherit; opacity: 0.76; }
.topstat .cur-ico { color: var(--cyan); font-style: normal; }
.topstat.buy { cursor: pointer; transition: border-color 160ms ease, transform 120ms ease; }
.topstat.buy:active { transform: scale(0.97); }
.topstat.buy:hover { border-color: rgba(125, 255, 133, 0.5); }
.topstat.buy > b em {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #04140a;
  font-size: 0.82rem;
  line-height: 1;
  margin-left: 3px;
}
.topstat.buy.prism { border-color: rgba(255, 209, 102, 0.4); }
.topstat.buy.prism:hover { border-color: rgba(255, 209, 102, 0.7); }
.topstat.buy.prism > b em { background: linear-gradient(135deg, var(--gold, #ffd166), #ff9f45); }
.icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 14, 20, 0.6);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, transform 120ms ease;
}
.icon-btn:active { transform: scale(0.95); }
.icon-btn:hover { border-color: rgba(92, 231, 255, 0.5); }
.icon-btn svg { width: 22px; height: 22px; }

/* — icon rails flanking the hero — */
.menu-rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.menu-rail.left { grid-area: left; align-items: flex-start; }
.menu-rail.right { grid-area: right; align-items: flex-end; }
.rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 78px;
  padding: 11px 6px 9px;
  border: 1px solid rgba(239, 253, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(28, 42, 54, 0.85), rgba(9, 14, 20, 0.9));
  color: var(--ink);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.rail-btn[hidden] { display: none; }
.rail-btn:active { transform: scale(0.95); }
.rail-btn:hover { border-color: rgba(92, 231, 255, 0.5); background: linear-gradient(165deg, rgba(34, 52, 66, 0.95), rgba(11, 18, 26, 0.95)); }
.rail-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(92, 231, 255, 0.1);
  color: var(--cyan);
}
.rail-ico svg { width: 25px; height: 25px; }
.rail-l { font-size: 0.58rem; font-weight: 800; letter-spacing: -0.1px; padding: 0 2px; max-width: 100%; text-align: center; line-height: 1.05; white-space: nowrap; }
.rail-btn.accent-prism .rail-ico, .rail-btn.accent-gold .rail-ico { background: rgba(255, 209, 102, 0.12); color: var(--gold, #ffd166); }
.rail-btn.accent-prism:hover, .rail-btn.accent-gold:hover { border-color: rgba(255, 209, 102, 0.55); }
.rail-btn { position: relative; }
.rail-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff4268;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 950;
  box-shadow: 0 0 10px rgba(255, 66, 104, 0.6);
  animation: rewardPulse 1.6s ease-in-out infinite;
}
.rail-badge[hidden] { display: none; }
/* "New daily content" dot (e.g. Магазин when the day's shop reshuffled). */
.rail-dot {
  position: absolute; top: 8px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4268; box-shadow: 0 0 9px rgba(255, 66, 104, 0.7);
  border: 1.5px solid rgba(8, 12, 18, 0.85);
  animation: rewardPulse 1.6s ease-in-out infinite;
}
.rail-dot[hidden] { display: none; }
@keyframes rewardPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* — hero: equipped ship + wordmark — */
.menu-hero {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.menu-ship { display: block; width: 100%; max-width: 480px; height: clamp(260px, 50vh, 460px); margin: 0 auto -2px; }

/* ===== Co-op "invite a friend" slots flanking the hero + multiplayer "soon" teaser ===== */
.coop-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; --csz: clamp(40px, 10.5vw, 54px); --coff: clamp(126px, 18vw, 205px); }
.coop-row .menu-ship { flex: 1 1 auto; min-width: 0; }
.coop-slot {
  position: absolute; top: 50%; z-index: 3;             /* float just OUTSIDE the hull, not out by the rails */
  width: var(--csz); height: var(--csz); margin-top: calc(var(--csz) / -2);
  display: grid; place-items: center; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--cyan) 64%, transparent);
  background: radial-gradient(circle at 50% 34%, rgba(92, 231, 255, 0.2), rgba(8, 14, 22, 0.52));
  color: color-mix(in srgb, var(--cyan) 88%, #fff);
  cursor: pointer; opacity: 1;
  /* Crisp glowing ring so it reads as a deliberate "empty party slot", not a faint artifact. */
  box-shadow: inset 0 0 12px rgba(92, 231, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.32), 0 0 16px rgba(92, 231, 255, 0.16);
  transition: transform 140ms ease, border-color 160ms ease, box-shadow 160ms ease;
  animation: coopFloat 4s ease-in-out infinite;
}
.coop-slot:first-child { left: calc(50% - var(--coff)); margin-left: calc(var(--csz) / -2); }
.coop-slot:last-child  { left: calc(50% + var(--coff)); margin-left: calc(var(--csz) / -2); }
.coop-row .coop-slot:last-child { animation-delay: -2s; }
.coop-slot:hover { border-color: var(--cyan); box-shadow: inset 0 0 14px rgba(92, 231, 255, 0.18), 0 4px 16px rgba(0, 0, 0, 0.34), 0 0 22px rgba(92, 231, 255, 0.26); }
.coop-slot:active { transform: scale(0.93); }
.coop-ghost { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.9; opacity: 0.85; }
.coop-plus {
  position: absolute; right: -2px; bottom: -2px;
  width: clamp(18px, 5.4vw, 22px); height: clamp(18px, 5.4vw, 22px);
  border-radius: 50%; background: var(--cyan); color: #06212a;
  font-weight: 950; font-size: clamp(0.85rem, 3vw, 1rem); line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 2px 9px rgba(92, 231, 255, 0.55); border: 2px solid rgba(6, 12, 18, 0.85);
}
@keyframes coopFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.coop-soon {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(10, 16, 24, 0.55); border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  color: var(--muted); font-size: clamp(0.66rem, 2.4vw, 0.74rem); font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.coop-soon b { color: var(--cyan); }
.coop-soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: coopPulse 1.7s ease-in-out infinite; }
@keyframes coopPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.coop-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 22px; }
.coop-modal.open { display: flex; }
.coop-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 12, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.coop-card {
  position: relative; width: min(420px, 100%); text-align: center;
  padding: 24px 22px 20px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line));
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 62%), linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(8, 12, 18, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: coopPop 240ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes coopPop { from { transform: scale(0.92) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.coop-art { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; display: flex; gap: 6px; justify-content: center; }
.coop-art-friends { filter: drop-shadow(0 0 10px rgba(92, 231, 255, 0.6)); }
.coop-tag { display: inline-block; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); padding: 3px 10px; border-radius: 999px; }
.coop-card h3 { margin: 10px 0 6px; font-size: 1.35rem; font-weight: 950; color: var(--ink); }
.coop-card p { margin: 0 0 16px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.coop-card p b { color: var(--ink); }
.coop-ok { width: 100%; min-height: 46px; border: none; border-radius: 13px; font-weight: 900; font-size: 1rem; color: #06212a; background: linear-gradient(180deg, var(--cyan), #3fb6cf); cursor: pointer; box-shadow: 0 6px 18px rgba(92, 231, 255, 0.3); }
.coop-ok:active { transform: scale(0.97); }

/* ===== Currency chips (label-less, BS-style) + explainer popover ===== */
.cur-chip { padding: 6px 10px 6px 12px; border-color: color-mix(in srgb, var(--cyan) 20%, var(--line)); background: linear-gradient(180deg, rgba(12, 20, 28, 0.72), rgba(8, 12, 18, 0.72)); }
.cur-chip.prism { border-color: color-mix(in srgb, var(--gold) 20%, var(--line)); }
.cur-chip > b { font-size: 1.06rem; gap: 5px; }
/* "+" becomes a real little circular acquire button (BS style). */
.cur-chip em { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%;
  font-style: normal; font-weight: 950; font-size: 0.86rem; line-height: 1; color: #06241c;
  background: linear-gradient(180deg, #86ffa6, #36c98a);
  box-shadow: 0 1px 4px rgba(54, 247, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.cur-chip.prism em { color: #2a1c02; background: linear-gradient(180deg, #ffe392, #f0b73c);
  box-shadow: 0 1px 4px rgba(255, 209, 102, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.cur-art { display: grid; place-items: center; width: 74px; height: 74px; margin: 2px auto 10px; border-radius: 20px;
  background: radial-gradient(circle at 50% 32%, rgba(92, 231, 255, 0.16), rgba(8, 14, 22, 0.5));
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--line)); box-shadow: inset 0 0 16px rgba(92, 231, 255, 0.1); }
.cur-art svg { width: 46px; height: 46px; }
.cur-close { width: 100%; margin-top: 9px; min-height: 36px; border: none; background: transparent; color: var(--muted); font-weight: 800; font-size: 0.86rem; cursor: pointer; }
.cur-close:active { transform: scale(0.97); }

/* ===== Profile chip → BS-style rank badge + name + XP-to-next bar ===== */
.topstat.profile { flex-direction: row; align-items: center; gap: 9px; padding: 5px 13px 5px 7px; }
.prof-badge { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  font-size: 1.02rem; font-weight: 950; color: #fff; letter-spacing: -0.02em;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.5), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--rk, #5ce7ff) 96%, #fff), color-mix(in srgb, var(--rk, #5ce7ff) 62%, #04121a));
  border: 1px solid color-mix(in srgb, var(--rk, #5ce7ff) 55%, #fff);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rk, #5ce7ff) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5); }
.prof-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.prof-name { font-size: 0.8rem; font-weight: 900; color: var(--ink); line-height: 1; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-xp { width: 100px; max-width: 28vw; height: 5px; border-radius: 999px; background: rgba(239, 253, 255, 0.15); overflow: hidden; }
.prof-xp i { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--rk, #5ce7ff) 55%, #fff), var(--rk, #5ce7ff)); box-shadow: 0 0 8px color-mix(in srgb, var(--rk, #5ce7ff) 50%, transparent); transition: width 320ms ease; }

/* ===== News button badge + community news feed ===== */
.news-btn { position: relative; }
.news-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ff4268; color: #fff; font-size: 0.62rem; font-weight: 900;
  display: grid; place-items: center; box-shadow: 0 1px 5px rgba(255, 66, 104, 0.6); border: 1.5px solid rgba(8, 12, 18, 0.9);
}
/* The `hidden` attribute (set when unread === 0) is otherwise overridden by the
   display:grid above, leaving a stray red "0" badge on the menu. */
.news-badge[hidden] { display: none; }
.news-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; }
.news-item { --na: var(--cyan); text-align: left; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(14, 22, 30, 0.72), rgba(8, 12, 18, 0.72)); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.news-item.is-new { border-color: color-mix(in srgb, var(--na) 50%, var(--line)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 18px color-mix(in srgb, var(--na) 14%, transparent); }
.news-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px; }
.news-ico { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--na) 50%, transparent)); }
.news-titles { flex: 1 1 auto; min-width: 0; }
.news-title { display: block; font-size: 1.04rem; font-weight: 900; color: var(--ink); line-height: 1.18; }
.news-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.news-tag { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--na); background: color-mix(in srgb, var(--na) 16%, transparent); border: 1px solid color-mix(in srgb, var(--na) 42%, transparent); padding: 2px 8px; border-radius: 999px; }
.news-date { font-size: 0.68rem; color: var(--muted); }
.news-body { font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.news-body b { color: var(--ink); }
.news-empty { text-align: center; color: var(--muted); padding: 32px 10px; font-size: 0.9rem; }
.menu-endless { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--muted); }

/* Ship-power chip on the menu hero — progression made visible (tap → Base). */
.menu-power {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: min(300px, 84%);
  justify-content: space-between;
  margin-top: clamp(8px, 2vh, 16px);
  padding: 7px 12px 7px 13px;
  border: none;
  border-radius: 999px;
  background: rgba(8, 14, 20, 0.66);
  box-shadow: inset 0 0 0 1px rgba(92, 231, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: transform 120ms ease, box-shadow 160ms ease;
}
.menu-power:hover { box-shadow: inset 0 0 0 1px rgba(92, 231, 255, 0.42), 0 8px 22px rgba(92, 231, 255, 0.16); }
.menu-power:active { transform: scale(0.97); }
.mp-mk { font-size: 0.72rem; font-weight: 900; color: var(--cyan); white-space: nowrap; }
.mp-mk b { color: var(--ink); }
.mp-bar { position: relative; width: 80px; height: 7px; border-radius: 4px; background: rgba(239, 253, 255, 0.1); overflow: hidden; }
.mp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 8px rgba(92, 231, 255, 0.5); transition: width 320ms ease; }
.mp-val { font-size: 0.62rem; color: var(--muted); font-weight: 800; white-space: nowrap; }
.mp-val b { color: var(--ink); }
.mp-go { color: var(--cyan); font-weight: 900; font-size: 1rem; opacity: 0.7; padding-right: 3px; }

/* — bottom: big primary CTA — */
.menu-bottombar { grid-area: bottom; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 9px; }

/* BS "mode deck" — the current sector sits as a card right above PLAY. */
.feat-deck {
  width: min(440px, 100%); display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line));
  background: linear-gradient(180deg, rgba(14, 22, 30, 0.85), rgba(8, 12, 18, 0.85));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  transition: transform 140ms ease, border-color 160ms ease;
}
.feat-deck:active { transform: scale(0.985); }
.feat-deck.is-final { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.feat-deck-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; color: var(--cyan);
  background: radial-gradient(circle at 50% 28%, rgba(92, 231, 255, 0.22), rgba(8, 14, 22, 0.5));
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.feat-deck-ico svg { width: 20px; height: 20px; }
.feat-deck.is-final .feat-deck-ico { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: radial-gradient(circle at 50% 28%, rgba(255, 209, 102, 0.2), rgba(8, 14, 22, 0.5)); }
.feat-deck-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.feat-deck-kicker { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cyan); }
.feat-deck-name { font-size: 0.98rem; font-weight: 950; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-deck-new { flex: 0 0 auto; font-size: 0.56rem; font-weight: 950; letter-spacing: 0.08em; color: #06212a; background: var(--gold, #ffd166); padding: 2px 7px; border-radius: 999px; box-shadow: 0 0 12px rgba(255, 209, 102, 0.5); }
.feat-deck-new[hidden] { display: none; }
.feat-deck-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.feat-deck-count { font-size: 0.62rem; font-weight: 900; color: var(--muted); }
.feat-deck-prog { width: 78px; height: 5px; border-radius: 999px; background: rgba(239, 253, 255, 0.14); overflow: hidden; }
.feat-deck-prog i { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width 320ms ease; }
.play-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(440px, 100%);
  margin: 0;
  padding: 14px 18px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #03130a;
  cursor: pointer;
  /* Brightest object on screen (BS PLAY): stronger glow + a green rim so it's the
     unmistakable focal CTA. */
  box-shadow: 0 12px 34px rgba(54, 247, 255, 0.34), 0 0 0 1px rgba(125, 255, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.play-cta:active { transform: scale(0.985); }
.play-cta:hover { filter: brightness(1.06); box-shadow: 0 14px 40px rgba(54, 247, 255, 0.42), 0 0 0 1px rgba(125, 255, 160, 0.6); }
/* Periodic shine sweep — the subtle "this is THE button" cue BS uses. */
.play-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  animation: playShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes playShine { 0% { left: -60%; } 22% { left: 130%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .play-cta::after { animation: none; display: none; } }
.play-cta .play-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(3, 19, 10, 0.22);
}
.play-cta .play-ico svg { width: 24px; height: 24px; }
.play-cta .play-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; flex: 1; }
.play-cta .play-text b { font-size: 1.4rem; font-weight: 950; letter-spacing: 0.2px; }
.play-cta .play-text em { font-style: normal; font-size: 0.72rem; font-weight: 800; opacity: 0.62; margin-top: 2px; }
/* PLAY carries the sector: tiny kicker above "Играть", sector name below, NEW pill. */
.play-cta .play-kicker { font-size: 0.54rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin: 0 0 1px; }
.play-cta .play-text em#playSub { font-size: 0.84rem; opacity: 0.92; margin-top: 1px; }
.play-new { position: absolute; top: 7px; right: 12px; font-size: 0.54rem; font-weight: 950; letter-spacing: 0.06em; color: #06241c; background: rgba(255, 255, 255, 0.92); padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22); }
.play-new[hidden] { display: none; }
.play-cta .play-go svg { width: 22px; height: 22px; opacity: 0.7; }

/* Featured-sector "next mode" bar — slim tactile pill above PLAY (BS deck). */
.feat-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(440px, 100%);
  padding: 8px 12px 9px 9px;
  border: none;
  border-radius: 14px;
  color: #d6f4ff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(31, 52, 74, 0.92), rgba(18, 32, 50, 0.92));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(120, 200, 255, 0.16), inset 0 0 0 1px rgba(90, 170, 230, 0.18);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}
.feat-bar:active { transform: translateY(1px) scale(0.992); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(120, 200, 255, 0.12); }
.feat-bar:hover { filter: brightness(1.08); }
.feat-bar .feat-bar-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--cyan);
  background: radial-gradient(circle at 50% 38%, rgba(54, 247, 255, 0.26), rgba(54, 247, 255, 0.05) 70%);
  box-shadow: inset 0 0 0 1px rgba(54, 247, 255, 0.32);
}
.feat-bar .feat-bar-ico svg { width: 22px; height: 22px; }
.feat-bar .feat-bar-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; flex: 1; min-width: 0; }
.feat-bar .feat-bar-txt em { font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--cyan); opacity: 0.85; }
.feat-bar .feat-bar-txt b { font-size: 0.95rem; font-weight: 850; color: #eaf7ff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-bar .feat-bar-count { flex: 0 0 auto; margin-right: 4px; font-size: 0.72rem; font-weight: 850; color: rgba(214, 244, 255, 0.62); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.feat-bar .feat-bar-go { flex: 0 0 auto; color: rgba(200, 230, 250, 0.6); display: grid; place-items: center; }
.feat-bar .feat-bar-go svg { width: 18px; height: 18px; }
/* Slim campaign-progress strip along the bottom edge (cleared / total). */
.feat-bar .feat-bar-prog { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 3px; background: rgba(140, 190, 225, 0.18); overflow: hidden; }
.feat-bar .feat-bar-prog b { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), #8af0ff); box-shadow: 0 0 6px rgba(54, 247, 255, 0.6); transition: width 320ms ease; }
/* Finale sector → warm danger tint so the last campaign mission stands out. */
.feat-bar.is-final { background: linear-gradient(135deg, rgba(74, 38, 52, 0.92), rgba(48, 22, 34, 0.92)); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 150, 170, 0.16), inset 0 0 0 1px rgba(230, 90, 120, 0.22); }
.feat-bar.is-final .feat-bar-ico { color: #ff5f8a; background: radial-gradient(circle at 50% 38%, rgba(255, 95, 138, 0.26), rgba(255, 95, 138, 0.05) 70%); box-shadow: inset 0 0 0 1px rgba(255, 95, 138, 0.34); }
.feat-bar.is-final .feat-bar-txt em { color: #ff7ba0; }
.feat-bar.is-final .feat-bar-prog b { background: linear-gradient(90deg, #ff5f8a, #ffa0bb); box-shadow: 0 0 6px rgba(255, 95, 138, 0.6); }

.game-title { margin: 4px 0 0; }
.title-sub {
  margin: 6px 0 0 !important;
  color: var(--cyan) !important;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-size: 0.92rem !important;
}

/* Portrait — rails collapse to horizontal rows stacked above PLAY. */
@media (orientation: portrait) {
  .menu-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "top"
      "hero"
      "left"
      "right"
      "bottom";
  }
  /* True 4-column grid so every button is the SAME width and rows align: the left rail
     fills row 1; the right rail's 3 buttons snap to columns 1-3 (clean, aligned) when
     the native-only leaderboard is hidden — not a staggered/floating centered row. */
  .menu-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  .menu-rail.left, .menu-rail.right { align-items: stretch; }
  .rail-btn { width: auto; max-width: none; min-width: 0; flex-direction: column; gap: 5px; padding: 9px 4px; }
  .rail-ico { width: 40px; height: 40px; flex: 0 0 auto; }
  .rail-ico svg { width: 23px; height: 23px; }
  .rail-l { font-size: 0.66rem; line-height: 1.04; text-align: center; white-space: normal; max-width: 100%; }
  .menu-ship { height: clamp(240px, 46vh, 410px); }
  .play-cta { width: 100%; }
}

/* Landscape — short height: scale title/ship by HEIGHT (not width) so the menu
   doesn't read as oversized/stretched on wide screens; tighten vertical rhythm. */
@media (orientation: landscape) and (max-height: 600px) {
  .menu-stage { gap: clamp(3px, 1vh, 10px); }
  .menu-hero { gap: 0; justify-content: center; }
  .menu-ship { height: clamp(140px, 49vh, 240px); max-width: 470px; margin: 0 auto -4px; }
  #mainMenu .game-title { font-size: clamp(1.7rem, 6vh, 2.9rem); }
  #mainMenu .title-sub { font-size: 0.62rem !important; letter-spacing: 4px; margin-top: 2px !important; }
  .menu-endless { font-size: 0.68rem; margin-top: 2px; }
  /* Lift PLAY off the bottom edge (it was flush/"sunk") + pull it nearer the hero. */
  .menu-bottombar { justify-content: center; margin-bottom: clamp(12px, 3.2vh, 26px); }
  .play-cta { padding: 9px 16px; }
  .play-cta .play-ico { width: 36px; height: 36px; }
  .play-cta .play-text b { font-size: 1.15rem; }
  .menu-rail { gap: 8px; }
  .rail-btn { width: 67px; padding: 8px 3px; }
  .rail-ico { width: 34px; height: 34px; }
  .rail-ico svg { width: 20px; height: 20px; }
  .rail-l { font-size: 0.5rem; letter-spacing: -0.2px; white-space: nowrap; }
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.menu-buttons .primary-button,
.menu-buttons .ghost-button,
.menu-buttons .ad-button {
  width: 100%;
  margin: 0;
}

/* .ad-button sets an explicit `display`, which (being an author rule) overrides
   the UA `[hidden] { display: none }` — so `el.hidden = true` in JS (toggleAdButton)
   did NOT actually hide the "Удвоить ядра" reward button. Restore intent: when the
   reward isn't offered the button must disappear, not just sit there inert. */
.ad-button[hidden] {
  display: none !important;
}

/* Rewarded-ad buttons — gold "watch & earn" accent, distinct from green CTA */
.ad-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 209, 102, 0.85);
  background: linear-gradient(135deg, var(--gold), #ff9f45);
  color: #1a1003;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(255, 184, 77, 0.32);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ad-button:hover,
.ad-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.ad-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.ad-button[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: saturate(0.7);
}

.level-reroll {
  width: 100%;
  margin-top: 16px;
  /* Stick the reroll CTA at the bottom of the scrollable panel so it stays
     visible even when the upgrade list is taller than the viewport. */
  position: sticky;
  bottom: -2px;
  z-index: 2;
  /* Solid background so cards scrolling underneath don't bleed through. */
  background: linear-gradient(180deg, rgba(8, 12, 18, 0) 0%, rgba(8, 12, 18, 0.94) 22%);
  padding-top: 10px;
  padding-bottom: 2px;
}

/* Rewarded-ad CTA group: button + small "free for an ad" sub-label below it.
   Makes it obvious the gold button is FREE (not a paid purchase). */
.ad-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Same trap as .ad-button[hidden] above: the author `display:flex` beats the
   UA hidden-attribute rule, so a JS `wrap.hidden = true` (ads unavailable)
   left the reroll CTA visible. Never show a dead ad button. */
.ad-cta[hidden] { display: none !important; }
.ad-cta .ad-button { width: 100%; }
.ad-cta-sub {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Hide gameplay toasts ("Боезапас пополнен" etc.) while the level-up panel is up,
   so they don't overlap the "УРОВЕНЬ ПОВЫШЕН" header. */
body[data-game-state="levelup"] .toast { display: none; }

/* IN-COMBAT notifications go COMPACT and move out of the firefight.
   The default toast is a wide pill right above the ship (top-center) — fine in
   menus, but in a run it covers the exact lane enemies dive from. During play it
   becomes a slim pill hugging the bottom XP bar, and achievement popups shrink
   to a one-line chip (label row hidden, smaller icon). */
body[data-game-state="playing"] .toast {
  top: auto;
  bottom: calc(30px + var(--safe-bottom, 0px));
  min-width: 0;
  max-width: min(62vw, 460px);
  padding: 6px 13px;
  font-size: 0.76rem;
  border-radius: 999px;
  border-color: rgba(125, 255, 133, 0.28);
  background: rgba(7, 17, 36, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, 10px);
}
body[data-game-state="playing"] .toast.active { transform: translate(-50%, 0); }
body[data-game-state="playing"] .achievement-popups { gap: 6px; width: min(272px, calc(100vw - 28px - var(--safe-left) - var(--safe-right))); }
body[data-game-state="playing"] .achievement-toast {
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
body[data-game-state="playing"] .achievement-toast .achievement-icon { width: 28px; height: 28px; }
body[data-game-state="playing"] .achievement-toast small { display: none; }
body[data-game-state="playing"] .achievement-toast b { font-size: 0.74rem; line-height: 1.15; }
body[data-game-state="playing"] .achievement-toast em { font-size: 0.66rem; line-height: 1.1; }

/* Revive offer overlay */
.revive-panel { text-align: center; }
.revive-sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.revive-timer {
  margin: 18px auto 4px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 99, 99, 0.6);
  background: radial-gradient(circle at 50% 40%, rgba(255, 99, 99, 0.18), transparent 70%);
  box-shadow: 0 0 26px rgba(255, 80, 80, 0.3), inset 0 0 18px rgba(255, 80, 80, 0.18);
  font-size: 1.9rem;
  font-weight: 900;
  color: #ffe2e2;
}

/* ===================== SHOP / IAP ===================== */
.shop-panel { width: min(560px, calc(100vw - 26px)); }
.shop-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.shop-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 209, 102, 0.08), transparent 60%), rgba(8, 12, 18, 0.92);
}
.shop-card.noads {
  border-color: rgba(92, 231, 255, 0.34);
  background: linear-gradient(100deg, rgba(92, 231, 255, 0.1), transparent 60%), rgba(8, 12, 18, 0.92);
}
.shop-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 1.2rem;
  background: rgba(255, 209, 102, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.3);
}
.shop-card.noads .shop-ico { background: rgba(92, 231, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(92, 231, 255, 0.32); font-size: 0.95rem; }
.shop-info { min-width: 0; }
.shop-info b { display: block; font-size: 0.96rem; font-weight: 900; }
.shop-info em { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; font-style: normal; font-weight: 700; }
.shop-buy { min-width: 84px; min-height: 40px; padding: 0 16px; white-space: nowrap; }
.shop-owned { color: var(--green); font-weight: 900; font-size: 0.82rem; padding-right: 6px; }
.shop-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #1a1003;
  background: var(--gold);
}
#shopRestore { width: 100%; margin-top: 14px; }
.shop-note { margin-top: 12px; color: var(--muted); font-size: 0.74rem; text-align: center; }

/* ===== Shop redesign — balance bar + sections + offer cards with bonus pills ===== */
.shop-grid { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.shop-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-cell { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgba(8, 14, 20, 0.7); }
.sb-cell i { font-style: normal; font-size: 1.1rem; color: var(--cyan); }
.sb-cell.prism i { color: var(--gold); }
.sb-cell b { font-size: 1.1rem; font-weight: 950; color: var(--ink); }
.sb-cell span { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-left: auto; }

.shop-section { display: flex; flex-direction: column; gap: 10px; border-radius: 14px; }
/* Brief highlight when a "+" chip deep-links to this section. */
.shop-section.sec-flash { animation: secFlash 1.2s ease; }
@keyframes secFlash { 0%, 100% { box-shadow: none; } 28% { box-shadow: 0 0 0 2px var(--cyan), 0 0 22px rgba(92, 231, 255, 0.4); } }
.shop-sec-title { margin: 0; font-size: 0.95rem; font-weight: 900; display: flex; align-items: baseline; gap: 8px; color: var(--ink); }
.shop-sec-title .cur-ico { font-style: normal; color: var(--cyan); }
.shop-sec-title em { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.shop-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.shop-offer { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 13px 13px; border-radius: 16px; border: 1px solid rgba(239, 253, 255, 0.12); background: linear-gradient(165deg, rgba(28, 42, 54, 0.7), rgba(9, 14, 20, 0.92)); overflow: hidden; }
.shop-offer.prisms { border-color: rgba(255, 209, 102, 0.32); background: linear-gradient(165deg, rgba(66, 49, 18, 0.52), rgba(9, 14, 20, 0.92)); }
.shop-offer.featured { border-color: rgba(255, 209, 102, 0.7); box-shadow: 0 0 22px rgba(255, 209, 102, 0.16), inset 0 0 0 1px rgba(255, 209, 102, 0.18); }
.shop-offer.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 13px; }
.shop-offer-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; font-size: 1.5rem; background: rgba(92, 231, 255, 0.1); color: var(--cyan); flex: 0 0 auto; }
.shop-offer.prisms .shop-offer-ico { background: rgba(255, 209, 102, 0.14); color: var(--gold); }
.shop-offer-ico .cur-ico { font-style: normal; }
.shop-offer-ico svg { width: 26px; height: 26px; }
.shop-offer-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shop-offer-amt { font-size: 1.2rem; font-weight: 950; color: var(--ink); line-height: 1.05; }
.shop-offer-amt span { font-size: 0.62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.shop-bonus { align-self: flex-start; font-size: 0.58rem; font-weight: 950; color: #04140a; background: linear-gradient(135deg, var(--green), var(--cyan)); padding: 2px 8px; border-radius: 999px; }
.shop-offer-main em { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.shop-offer .shop-buy { width: 100%; min-height: 40px; margin-top: 2px; }
.shop-offer.wide .shop-buy { width: auto; min-width: 110px; }
.shop-tag { position: absolute; top: 9px; right: 9px; font-size: 0.5rem; font-weight: 950; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #06120a; background: var(--cyan); z-index: 2; }
.shop-tag.hot { background: var(--gold); color: #1a1003; box-shadow: 0 0 12px rgba(255, 209, 102, 0.4); }
.shop-offer .shop-owned { display: block; color: var(--green); font-weight: 900; font-size: 0.82rem; text-align: center; padding: 9px 0; }

@media (max-width: 380px) { .shop-offers { grid-template-columns: 1fr; } }

/* ===== Shop: daily featured cosmetics + exchange ===== */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 12px 14px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rar, var(--cyan)) 22%, transparent), transparent 64%),
    rgba(8, 14, 20, 0.6);
  /* Rarity-coloured frame ring (BS reads rarity at a glance via thick coloured
     card borders) — stronger for epic/legendary below. */
  box-shadow:
    var(--fl-shadow, 0 8px 24px rgba(0,0,0,0.28)),
    inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--cyan)) 42%, transparent),
    0 0 22px color-mix(in srgb, var(--rar, var(--cyan)) 16%, transparent);
}
.feat-card.rarity-epic, .feat-card.rarity-legendary {
  box-shadow:
    var(--fl-shadow, 0 8px 24px rgba(0,0,0,0.28)),
    inset 0 0 0 2px color-mix(in srgb, var(--rar) 65%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--rar) 18%, transparent),
    0 0 26px color-mix(in srgb, var(--rar) 26%, transparent);
}
.feat-art {
  width: 100%;
  height: 96px;
  border-radius: 12px;
  background: radial-gradient(80% 100% at 50% 38%, color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 24%, transparent), transparent 72%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feat-art canvas { width: 100%; height: 100%; }
.feat-rar { font-size: 0.62rem; font-weight: 950; letter-spacing: 0.6px; text-transform: uppercase; color: var(--rar, var(--cyan)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.feat-name { font-size: 0.92rem; font-weight: 900; color: var(--ink); text-align: center; line-height: 1.05; }
.feat-cat { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-style: normal; margin-bottom: 4px; }
.feat-disc {
  position: absolute;
  top: 9px; left: 9px;
  font-size: 0.6rem;
  font-weight: 950;
  color: #06120a;
  background: var(--green);
  padding: 2px 7px;
  border-radius: 999px;
  /* Dark backing plate so the badge reads cleanly over the card artwork. */
  box-shadow: 0 0 0 2px rgba(2, 8, 5, 0.7), 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.feat-buy {
  margin-top: 2px;
  width: 100%;
  min-height: 40px;
  display: inline-flex;
  flex-direction: column;        /* struck-through original ON TOP, price below — so long
                                    repriced numbers never overflow the card sideways */
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 6px;
  line-height: 1.04;
  overflow: hidden;
  border: none;
  border-radius: 11px;
  font-weight: 950;
  color: #06120a;
  background: linear-gradient(180deg, var(--cyan), #3fb6cf);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(92, 231, 255, 0.28);
  transition: transform 120ms ease, filter 140ms ease;
}
.feat-card.premium .feat-buy { background: linear-gradient(180deg, var(--gold), #c9962f); box-shadow: 0 4px 14px rgba(255, 209, 102, 0.3); }
.feat-buy:hover { filter: brightness(1.08); }
.feat-buy:active { transform: scale(0.96); }
.feat-buy s { opacity: 0.75; font-size: 0.6rem; font-weight: 800; text-decoration: line-through; line-height: 1; display: inline-flex; align-items: center; white-space: nowrap; }
.feat-buy b { font-size: 0.96rem; line-height: 1.05; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.feat-owned { margin-top: 2px; min-height: 38px; display: grid; place-items: center; color: var(--green); font-weight: 900; font-size: 0.82rem; }
.feat-lock {
  margin-top: 2px; min-height: 38px; display: grid; place-items: center;
  color: var(--muted); font-weight: 800; font-size: 0.72rem; text-align: center; padding: 0 8px;
  /* Match the buy-button footprint so locked cards don't read half-finished. */
  border-radius: 11px; border: 1px solid rgba(140, 180, 210, 0.18); background: rgba(10, 18, 28, 0.5);
}

.ex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(8, 14, 20, 0.6);
  box-shadow: var(--fl-shadow, 0 8px 24px rgba(0,0,0,0.28));
}
.ex-info { display: flex; flex-direction: column; gap: 3px; }
.ex-info b { font-size: 0.95rem; font-weight: 900; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.ex-info span { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ex-buy {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: none;
  border-radius: 11px;
  font-weight: 950;
  color: #06120a;
  background: linear-gradient(180deg, #ffe08b, #f4b83f);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.3);
  transition: transform 120ms ease, filter 140ms ease;
}
.ex-buy:hover { filter: brightness(1.08); }
.ex-buy:active { transform: scale(0.96); }
.ex-buy:disabled { opacity: 0.45; cursor: default; }
.shop-iap-note { margin: 14px 2px 0; color: var(--muted); font-size: 0.74rem; font-weight: 600; text-align: center; }
@media (max-width: 380px) { .feat-grid { grid-template-columns: 1fr; } }

/* ===== Shop UNIVERSE: section nav + skins browse + boosts + pass + rank rewards ===== */
.shop-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shop-nav::-webkit-scrollbar { display: none; }
.currency-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.currency-guide-item { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: rgba(8, 14, 20, 0.66); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.currency-guide-item > .cur-ico { width: 25px; height: 25px; }
.currency-guide-item > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.currency-guide-item b { font-size: 0.78rem; font-weight: 950; color: var(--ink); }
.currency-guide-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.58rem; font-weight: 700; color: var(--muted); }
.currency-guide-item.cores { box-shadow: inset 0 0 0 1px rgba(92, 231, 255, 0.25); }
.currency-guide-item.prisms { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.28); }
.shop-nav-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  font-size: 0.74rem; font-weight: 900; color: var(--ink);
  border: 1px solid rgba(239, 253, 255, 0.14);
  background: linear-gradient(165deg, rgba(28, 42, 54, 0.7), rgba(9, 14, 20, 0.9));
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}
.shop-nav-chip .snc-ico { font-size: 0.86rem; line-height: 1; }
.shop-nav-chip:active { transform: scale(0.95); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: rgba(92, 231, 255, 0.12); }

.ss-group { display: flex; flex-direction: column; gap: 7px; }
.ss-group-t { margin: 4px 0 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.shop-skin-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.shop-skin-row::-webkit-scrollbar { display: none; }
.shop-skin {
  flex: 0 0 auto; width: 112px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 9px 10px; border-radius: 15px; cursor: pointer;
  border: none; color: var(--ink); text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rar, var(--cyan)) 20%, transparent), transparent 64%), rgba(8, 14, 20, 0.6);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--cyan)) 40%, transparent), 0 0 18px color-mix(in srgb, var(--rar, var(--cyan)) 13%, transparent);
  transition: transform 130ms ease, filter 140ms ease;
}
.shop-skin.rarity-epic, .shop-skin.rarity-legendary { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rar) 62%, transparent), inset 0 0 16px color-mix(in srgb, var(--rar) 16%, transparent), 0 0 22px color-mix(in srgb, var(--rar) 22%, transparent); }
.shop-skin:active { transform: scale(0.95); filter: brightness(1.06); }
.ss-art { width: 100%; height: 64px; border-radius: 11px; overflow: hidden; background: radial-gradient(80% 100% at 50% 40%, color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 22%, transparent), transparent 72%); display: grid; place-items: center; }
.ss-canvas { width: 100%; height: 100%; }
.ss-name { font-size: 0.72rem; font-weight: 800; line-height: 1.04; max-width: 100%; }
.ss-price { font-size: 0.72rem; font-weight: 950; color: var(--ink); display: inline-flex; align-items: center; gap: 3px; }
.ss-price .cur-ico { font-style: normal; }
.ss-lock { font-size: 0.74rem; color: var(--muted); }

.shop-boosts { display: flex; flex-direction: column; gap: 9px; }
.shop-boost {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 15px;
  background: linear-gradient(165deg, rgba(28, 42, 54, 0.6), rgba(9, 14, 20, 0.92));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--cyan)) 38%, transparent), 0 0 18px color-mix(in srgb, var(--rar, var(--cyan)) 12%, transparent);
}
.sb-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--cosmetic-color, var(--cyan)); background: color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 13%, rgba(8,14,20,0.7)); }
.sb-ico svg { width: 26px; height: 26px; }
.sb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-main b { font-size: 0.9rem; font-weight: 900; color: var(--ink); }
.sb-main em { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--muted); line-height: 1.22; }
.sb-buy { flex: 0 0 auto; align-self: center; padding: 9px 15px; border: none; border-radius: 11px; font-weight: 950; color: #06120a; cursor: pointer; white-space: nowrap; background: linear-gradient(180deg, var(--cosmetic-color, var(--cyan)), color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 70%, #1a2730)); box-shadow: 0 4px 13px color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 30%, transparent); transition: transform 120ms ease, filter 140ms ease; }
.sb-buy:active { transform: scale(0.95); filter: brightness(1.08); }
.sb-have { position: absolute; top: 8px; right: 10px; font-size: 0.62rem; font-weight: 950; color: var(--gold); }

.shop-pass-banner {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, rgba(92, 231, 255, 0.16), rgba(181, 92, 255, 0.18) 60%, rgba(255, 209, 102, 0.14));
  box-shadow: inset 0 0 0 1.5px rgba(92, 231, 255, 0.3), 0 6px 22px rgba(0,0,0,0.32);
  transition: transform 130ms ease, filter 150ms ease;
}
.shop-pass-banner.is-prem { box-shadow: inset 0 0 0 1.5px rgba(255, 209, 102, 0.5), 0 0 26px rgba(255, 209, 102, 0.18); }
.shop-pass-banner:active { transform: scale(0.985); filter: brightness(1.05); }
.spb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spb-tag { font-size: 0.58rem; font-weight: 950; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cyan); }
.shop-pass-banner.is-prem .spb-tag { color: var(--gold); }
.spb-main b { font-size: 1rem; font-weight: 950; color: var(--ink); }
.spb-main em { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.spb-cta { flex: 0 0 auto; font-size: 0.82rem; font-weight: 950; color: var(--ink); white-space: nowrap; }

.shop-rank-card {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 15px; cursor: pointer;
  background: rgba(8, 14, 20, 0.6); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc, var(--cyan)) 34%, rgba(239,253,255,0.1)), var(--fl-shadow, 0 8px 24px rgba(0,0,0,0.28));
  transition: transform 130ms ease;
}
.shop-rank-card:active { transform: scale(0.985); }
.src-badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--rc, var(--cyan)); background: color-mix(in srgb, var(--rc, var(--cyan)) 14%, rgba(8,14,20,0.7)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, var(--cyan)) 45%, transparent); }
.src-badge svg { width: 26px; height: 26px; }
.src-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.src-main b { font-size: 0.86rem; font-weight: 900; color: var(--ink); }
.src-main em { font-style: normal; font-size: 0.7rem; font-weight: 800; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.src-bar { height: 5px; border-radius: 999px; background: rgba(239, 253, 255, 0.1); overflow: hidden; }
.src-bar span { display: block; height: 100%; border-radius: 999px; background: var(--rc, var(--cyan)); box-shadow: 0 0 10px color-mix(in srgb, var(--rc, var(--cyan)) 60%, transparent); }
.src-cta { flex: 0 0 auto; font-size: 1.1rem; font-weight: 950; color: var(--muted); }

/* Shop skin PREVIEW modal — LANDSCAPE two-column card (stage left, info right):
   the game is landscape-only and the old stacked card was taller than the
   viewport (stage clipped at the top, «Закрыть» kissing the bottom edge). */
.shoppv-card { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; grid-template-rows: auto auto 1fr auto auto; column-gap: 18px;
  width: min(640px, calc(100vw - 110px)); max-height: calc(100dvh - 34px); overflow: hidden; }
.shoppv-stage { position: relative; grid-column: 1; grid-row: 1 / 6; width: 100%; height: 100%; min-height: 218px; border-radius: 16px; overflow: hidden; margin: 0;
  background: radial-gradient(78% 96% at 50% 42%, color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 26%, transparent), transparent 72%), rgba(6, 11, 17, 0.85);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--cyan)) 50%, transparent), inset 0 0 30px color-mix(in srgb, var(--rar, var(--cyan)) 14%, transparent); }
.shoppv-canvas { width: 100%; height: 100%; }
.shoppv-rar { position: absolute; top: 10px; left: 12px; font-size: 0.6rem; font-weight: 950; letter-spacing: 0.6px; text-transform: uppercase; color: var(--rar, var(--cyan)); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.shoppv-cat { grid-column: 2; display: block; margin-top: 2px; font-style: normal; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.shoppv-card h3 { grid-column: 2; margin: 1px 0 4px; text-align: left; }
.shoppv-desc { grid-column: 2; margin: 0 0 10px; color: var(--muted); font-size: 0.8rem; line-height: 1.34; text-align: left; }
.shoppv-action { grid-column: 2; margin-bottom: 8px; align-self: end; }
.shoppv-card .cur-close { grid-column: 2; }
/* The buy CTA keys off the RARITY colour, not the hull colour — dark skins
   (Обсидиан & co) turned the old hull-coloured gradient into a dead grey pill. */
.shoppv-buy { width: 100%; min-height: 48px; border: none; border-radius: 13px; font-weight: 950; font-size: 0.94rem; color: #071018; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar, var(--cyan)) 88%, #ffffff), color-mix(in srgb, var(--rar, var(--cyan)) 72%, #101820));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--rar, var(--cyan)) 42%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25); transition: transform 120ms ease, filter 140ms ease; }
.shoppv-buy:active { transform: scale(0.97); filter: brightness(1.08); }
.shoppv-owned { display: block; text-align: center; color: var(--green); font-weight: 900; padding: 12px 0; }
.shoppv-lock { display: block; text-align: center; color: var(--muted); font-weight: 800; font-size: 0.78rem; padding: 11px 8px; border-radius: 12px; border: 1px solid rgba(140,180,210,0.18); background: rgba(10,18,28,0.5); }
/* Inline "not enough funds" state INSIDE the purchase modal + a bridge to top-up:
   the moment of purchase intent must explain itself and offer the next step. */
.shoppv-err { margin-top: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255, 122, 122, 0.4); background: rgba(64, 14, 20, 0.55);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; animation: shoppvErrIn 220ms ease; }
.shoppv-err > span { color: #ffb3b3; font-size: 0.74rem; font-weight: 800; line-height: 1.25; text-align: left; }
.shoppv-topup { flex: 0 0 auto; border: none; cursor: pointer; min-height: 34px; padding: 0 12px; border-radius: 10px; font-weight: 950; font-size: 0.74rem; color: #131103;
  background: linear-gradient(180deg, #ffe066, #f5b63d); box-shadow: 0 4px 14px rgba(245, 182, 61, 0.45); }
.shoppv-topup:active { transform: scale(0.96); }
@keyframes shoppvErrIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pfx-boost-ico { display: grid; place-items: center; color: var(--fx, var(--cyan)); }
.pfx-boost-ico svg { width: 84px; height: 84px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--fx, var(--cyan)) 60%, transparent)); }

/* ===== Profile screen ===== */
.profile-panel { width: min(560px, calc(100vw - 26px)); }
/* make the menu best-score chip read as a tappable profile button */
button.topstat.profile {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  padding-right: 26px;
  transition: border-color 160ms ease, transform 120ms ease, background 160ms ease;
}
button.topstat.profile::after {
  content: "›";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-weight: 900;
  font-size: 1.1rem;
  opacity: 0.7;
}
button.topstat.profile:hover { border-color: rgba(92, 231, 255, 0.5); background: rgba(12, 22, 30, 0.7); }
button.topstat.profile:active { transform: scale(0.97); }

.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: none;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(92, 231, 255, 0.2), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(181, 92, 255, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(16, 26, 38, 0.55), rgba(8, 14, 20, 0.5));
  box-shadow: inset 0 0 0 1px rgba(120, 200, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
}
.profile-ship {
  width: 140px;
  height: 150px;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 18px rgba(92, 231, 255, 0.25));
}
.profile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-rank {
  --rank: var(--cyan);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.3px;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rank) 26%, transparent), color-mix(in srgb, var(--rank) 8%, transparent));
  padding: 4px 12px 4px 7px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank) 55%, transparent), 0 0 16px color-mix(in srgb, var(--rank) 28%, transparent);
}
.profile-rank svg { width: 18px; height: 18px; color: var(--rank); flex: 0 0 auto; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rank) 60%, transparent)); }
.profile-rank b { color: var(--rank); font-size: 0.86rem; font-weight: 950; }
.profile-rank span { color: var(--ink); text-transform: uppercase; letter-spacing: 0.4px; }
/* XP-to-next-rank bar under the score. */
.profile-rankbar { position: relative; margin: 8px 0 16px; width: 100%; max-width: 230px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: visible; }
.profile-rankbar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 9px currentColor; transition: width 420ms cubic-bezier(.2,.8,.2,1); }
.profile-rankbar small { position: absolute; top: 10px; left: 0; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.profile-best {
  font-size: clamp(1.5rem, 7.4vw, 2.3rem);
  font-weight: 950;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  text-shadow: 0 0 18px rgba(92, 231, 255, 0.25);
  /* Headline score must show IN FULL — never ellipsis-clip the most prominent stat. */
  white-space: nowrap;
}
.profile-id { flex: 1 1 auto; }
.profile-best-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.pstat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px 11px 14px;
  border: none;
  border-radius: 13px;
  /* Softer than a flat black box — a faint glassy fill + accent-tinted glow. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
/* Hide the currency pills on info / action screens — nothing is spendable there
   (sector-select, profile, settings, how-to, achievements). */
#profileScreen .head-balance, #settingsScreen .head-balance, #howtoScreen .head-balance,
#locationScreen .head-balance, #achievementsScreen .head-balance,
#rewardsScreen .head-balance, #passScreen .head-balance { display: none; }
.profile-share {
  /* Lives in the STICKY panel header now (right side) so it's always visible without
     scrolling past the stat grid. Compact pill, not a full-width bottom button. */
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px;
  border: none; border-radius: 999px;
  font-weight: 900; font-size: 0.82rem; color: #04130b;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 5px 16px rgba(54, 247, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer; transition: transform 120ms ease, filter 140ms ease;
}
.profile-share svg { width: 17px; height: 17px; }
@media (max-width: 380px) { .profile-share { padding: 9px 11px; font-size: 0; gap: 0; } .profile-share svg { width: 19px; height: 19px; } }
.profile-share svg { width: 20px; height: 20px; }
.profile-share:active { transform: scale(0.98); }
.profile-share:hover { filter: brightness(1.06); }
.pstat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pstat-accent, var(--cyan));
  box-shadow: 0 0 10px var(--pstat-accent, var(--cyan));
}
.pstat b {
  font-size: 1.15rem;
  font-weight: 950;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pstat span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
@media (max-width: 420px) { .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Rewards road ===== */
.rewards-panel { width: min(540px, calc(100vw - 26px)); }
.rewards-intro { color: var(--muted); font-size: 0.82rem; font-weight: 700; margin: 0 0 14px; }
.rewards-road { display: flex; flex-direction: column; gap: 0; }
.rw-node { display: flex; align-items: stretch; gap: 14px; min-height: 64px; }
.rw-spine {
  position: relative;
  flex: 0 0 22px;
  display: flex;
  justify-content: center;
}
/* the vertical line behind the dots */
.rw-spine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: rgba(239, 253, 255, 0.1);
}
.rw-node:first-child .rw-spine::before { top: 32px; }
.rw-node:last-child .rw-spine::before { bottom: calc(100% - 32px); }
/* the filled portion (progress) of the spine */
.rw-fill {
  position: absolute;
  top: 0;
  width: 4px;
  border-radius: 2px;
  /* Claimed milestones (top of the road) read green, fading to cyan toward the
     live frontier — so a fully-claimed road no longer glows 'in progress'. */
  background: linear-gradient(180deg, var(--green), #5cc9ff);
  box-shadow: 0 0 8px rgba(125, 255, 160, 0.4);
}
.rw-dot {
  position: absolute;
  top: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a1119;
  border: 3px solid rgba(239, 253, 255, 0.22);
  z-index: 1;
}
.rw-node.claimable .rw-dot { border-color: var(--cyan); box-shadow: 0 0 12px rgba(92, 231, 255, 0.6); }
.rw-node.claimed .rw-dot { border-color: var(--green); background: var(--green); }

.rw-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 7px 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 14, 20, 0.6);
  transition: border-color 160ms ease, background 160ms ease;
}
.rw-node.claimable .rw-card {
  border-color: rgba(92, 231, 255, 0.5);
  background: linear-gradient(150deg, rgba(92, 231, 255, 0.12), rgba(8, 14, 20, 0.7));
  box-shadow: 0 0 18px rgba(92, 231, 255, 0.14);
}
.rw-node.locked .rw-card { opacity: 0.62; }
.rw-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rw-req { font-size: 0.74rem; font-weight: 800; color: var(--ink); }
.rw-req em { color: var(--muted); font-style: normal; font-weight: 700; font-size: 0.66rem; }
.rw-prizes { display: flex; gap: 8px; flex-wrap: wrap; }
.rw-prize {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
  background: rgba(92, 231, 255, 0.12);
  color: var(--cyan);
}
.rw-prize i { font-style: normal; }
.rw-prize.prisms { background: rgba(255, 209, 102, 0.14); color: var(--gold); }
.rw-claim {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: none;
  border-radius: 11px;
  font-weight: 950;
  font-size: 0.82rem;
  color: #06120a;
  background: linear-gradient(180deg, var(--cyan), #3fb6cf);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(92, 231, 255, 0.3);
  transition: transform 120ms ease, filter 140ms ease;
}
.rw-claim:hover { filter: brightness(1.08); }
.rw-claim:active { transform: scale(0.95); }
.rw-status { flex: 0 0 auto; font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.rw-status.done { color: var(--green); }

/* ===== Season pass ===== */
.pass-panel { width: min(560px, calc(100vw - 26px)); }
.pass-head {
  padding: 18px 16px 14px;
  border-radius: 16px;
  scroll-margin-top: 8px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(181, 92, 255, 0.18), transparent 60%),
    radial-gradient(120% 130% at 100% 100%, rgba(92, 231, 255, 0.14), transparent 55%),
    rgba(8, 14, 20, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 14px;
}
.pass-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pass-season span { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.pass-season b { font-size: 1.35rem; font-weight: 950; color: var(--ink); }
.pass-season b em { font-style: normal; color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.pass-prem-buy {
  flex: 0 0 auto;
  padding: 8px 14px; border: none; border-radius: 11px;
  font-weight: 950; font-size: 0.8rem; color: #1a1003;
  background: linear-gradient(180deg, var(--gold), #c9962f);
  cursor: pointer; box-shadow: 0 4px 14px rgba(255, 209, 102, 0.3);
  transition: transform 120ms ease, filter 140ms ease;
}
.pass-prem-buy:hover { filter: brightness(1.08); }
.pass-prem-buy:active { transform: scale(0.96); }
.pass-prem-on { flex: 0 0 auto; color: var(--gold); font-weight: 950; font-size: 0.78rem; }
.pass-xp { height: 9px; border-radius: 5px; background: rgba(239, 253, 255, 0.1); overflow: hidden; }
.pass-xp i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #b55cff, var(--cyan)); box-shadow: 0 0 10px rgba(181, 92, 255, 0.5); transition: width 320ms ease; }
.pass-xp-label { display: block; margin-top: 6px; font-size: 0.66rem; color: var(--muted); font-weight: 700; }

.pass-track { display: flex; flex-direction: column; gap: 8px; }
.pass-tier { display: flex; align-items: stretch; gap: 12px; }
.pass-tier.locked { opacity: 0.62; }
.pt-level { flex: 0 0 38px; display: grid; place-items: center; }
.pt-level b {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 950; font-size: 0.85rem; color: var(--ink);
  background: rgba(8, 14, 20, 0.8); box-shadow: inset 0 0 0 2px rgba(239, 253, 255, 0.14);
}
.pass-tier.reached .pt-level b { color: #06120a; background: linear-gradient(180deg, var(--cyan), #3fb6cf); box-shadow: 0 0 12px rgba(92, 231, 255, 0.4); }
.pt-tracks { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
.pt-track-label { font-size: 0.56rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); white-space: nowrap; }
.pt-track-label.prem { color: var(--gold); }
.pt-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 11px;
  /* Free cell was near-invisible (0.05) next to the tinted premium cell — give it
     a real container so both tracks read as cards. */
  background: rgba(239, 253, 255, 0.09); border: 1px solid rgba(140, 180, 210, 0.12);
}
.pt-cell.prem { background: rgba(255, 209, 102, 0.08); }
.pt-cell.ready { background: rgba(92, 231, 255, 0.14); box-shadow: 0 0 16px rgba(92, 231, 255, 0.18); }
.pt-cell.claimed { opacity: 0.7; }
.pr-prize { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 0.82rem; color: var(--ink); }
.pr-prize i { font-style: normal; }
.pr-prize.cores { color: var(--cyan); }
.pr-prize.prisms { color: var(--gold); }
.pr-prize.skin { color: var(--gold); }
.pt-claim {
  flex: 0 0 auto; padding: 6px 14px; border: none; border-radius: 9px;
  font-weight: 950; font-size: 0.74rem; color: #06120a;
  background: linear-gradient(180deg, var(--cyan), #3fb6cf); cursor: pointer;
  box-shadow: 0 3px 10px rgba(92, 231, 255, 0.3); transition: transform 120ms ease, filter 140ms ease;
}
.pt-cell.prem .pt-claim { background: linear-gradient(180deg, var(--gold), #c9962f); box-shadow: 0 3px 10px rgba(255, 209, 102, 0.3); }
.pt-claim:hover { filter: brightness(1.08); }
.pt-claim:active { transform: scale(0.95); }
.pt-done { flex: 0 0 auto; color: var(--green); font-weight: 950; font-size: 0.9rem; }
.pt-locked { flex: 0 0 auto; opacity: 0.6; font-size: 0.8rem; }
@media (orientation: landscape) and (max-height: 600px) {
  .menu-overlay .pass-tier { align-items: center; }
  .menu-overlay .pt-tracks { grid-template-columns: auto 1fr auto 1fr; }
}

/* ===== Detail modal (weapon deep-dive) ===== */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.detail-modal.open { display: flex; }
.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.detail-card {
  position: relative;
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--detail-color, #5ce7ff) 45%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--detail-color, #5ce7ff) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(8, 12, 18, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: detailPop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes detailPop { from { transform: scale(0.92) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-close {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 14, 20, 0.8);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 2;
}
.detail-close:hover { border-color: var(--detail-color, #5ce7ff); }
.detail-preview {
  height: 150px;
  margin: 4px 0 12px;
  border-radius: 16px;
  background:
    radial-gradient(90% 120% at 50% 30%, color-mix(in srgb, var(--detail-color, #5ce7ff) 20%, transparent), transparent 70%),
    rgba(6, 10, 14, 0.6);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.detail-preview canvas { width: 100%; height: 100%; }
.detail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.detail-head b { font-size: clamp(1.1rem, 4.6vw, 1.4rem); font-weight: 950; color: var(--ink); line-height: 1.1; }
#detailRole {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #06120a;
  background: var(--detail-color, #5ce7ff);
  padding: 3px 10px;
  border-radius: 999px;
}
.detail-desc { color: var(--muted); font-size: 0.86rem; font-weight: 600; line-height: 1.4; margin: 8px 0 14px; }
.detail-stats { display: flex; flex-direction: column; gap: 8px; }
.dstat { display: grid; grid-template-columns: 86px 1fr 52px; align-items: center; gap: 10px; }
.dstat-l { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.dstat-bar { height: 8px; border-radius: 4px; background: rgba(239, 253, 255, 0.08); overflow: hidden; }
.dstat-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--detail-color, #5ce7ff) 70%, #fff), var(--detail-color, #5ce7ff));
  box-shadow: 0 0 8px color-mix(in srgb, var(--detail-color, #5ce7ff) 60%, transparent);
}
.dstat-v { font-size: 0.78rem; font-weight: 900; color: var(--ink); text-align: right; }
.detail-mastery { margin: 16px 0 4px; }
.dmastery-top { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 800; color: var(--muted); margin-bottom: 5px; }
.dmastery-bar { height: 7px; border-radius: 4px; background: rgba(239, 253, 255, 0.08); overflow: hidden; }
.dmastery-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe9a8); box-shadow: 0 0 8px rgba(255, 209, 102, 0.5); }
.detail-mastery small { display: block; margin-top: 6px; font-size: 0.7rem; color: var(--muted); }
.detail-req { margin: 12px 0 0; font-size: 0.76rem; font-weight: 700; color: var(--gold); }
.detail-cta {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: none;
  border-radius: 13px;
  font-size: 0.94rem;
  font-weight: 950;
  color: #06120a;
  background: linear-gradient(180deg, var(--detail-color, #5ce7ff), color-mix(in srgb, var(--detail-color, #5ce7ff) 70%, #1a2a30));
  cursor: pointer;
  transition: transform 120ms ease, filter 140ms ease;
}
.detail-cta.is-buy { background: linear-gradient(180deg, var(--gold), #c9962f); }
.detail-cta:hover:not(:disabled) { filter: brightness(1.08); }
.detail-cta:active:not(:disabled) { transform: scale(0.97); }
.detail-cta:disabled { opacity: 0.5; cursor: default; }

.menu-foot {
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.menu-foot b {
  color: var(--gold);
}

/* panel header with back button */
.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Keep the Back button reachable when a long panel scrolls. Span the panel's
     own padding (negative margins) with a near-solid fill so scrolled cards pass
     cleanly UNDER the header instead of showing through it. */
  position: sticky;
  top: 0;
  z-index: 4;
  /* Horizontal negative margins span the panel's side padding; the panel's own
     top padding is removed (rule below) so the sticky header sits flush at the
     scrollport top with no gap for cards to peek through. */
  margin: 0 calc(-1 * clamp(20px, 4vw, 34px)) 12px;
  /* The overlay already adds the full safe-area-top inset (clears the Dynamic Island),
     so the header only needs a SMALL extra top pad — not another ~34px (that was the
     big empty gap above every title). */
  padding: clamp(4px, 1.2vw, 10px) clamp(20px, 4vw, 34px) 12px;
  background: rgba(10, 15, 18, 0.985);
}

/* Panels with a sticky header: drop the scroll-container top padding (the header
   supplies its own) so the header pins flush and fully masks scrolled content. */
.menu-overlay .panel:has(.panel-head) {
  padding-top: 0;
}

.panel-head h2 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
}

.back-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(239, 253, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.06);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.back-button:hover,
.back-button:focus-visible {
  transform: translateX(-2px);
  border-color: var(--cyan);
}

/* location select */
.select-panel {
  width: min(880px, 100%);
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.loc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(239, 253, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.04);
  text-align: left;
  color: var(--ink);
  cursor: default;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.loc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--loc-accent, var(--cyan));
  box-shadow: 0 0 22px var(--loc-accent, var(--cyan));
}

.loc-card:not(.locked):hover,
.loc-card:not(.locked):focus-visible {
  transform: translateY(-3px);
  border-color: var(--loc-accent, var(--cyan));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.loc-card .loc-kicker {
  color: var(--loc-accent, var(--cyan));
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.loc-card h3 {
  margin: 0;
  font-size: 1.18rem;
}

.loc-card .loc-desc {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.loc-card .loc-stats {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.loc-card .loc-stats b {
  color: var(--ink);
}

.loc-difficulties {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 3px;
}

.loc-diff {
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid color-mix(in srgb, var(--diff-color, var(--cyan)) 46%, rgba(239, 253, 255, 0.14));
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--diff-color, var(--cyan)) 22%, transparent), transparent 58%),
    rgba(3, 8, 12, 0.64);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.04), 0 0 16px color-mix(in srgb, var(--diff-color, var(--cyan)) 10%, transparent);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.loc-diff b,
.loc-diff span,
.loc-diff em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-diff b {
  color: var(--diff-color, var(--cyan));
  font-size: 0.68rem;
  letter-spacing: 1px;
}

.loc-diff span {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 900;
}

.loc-diff em {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.loc-diff:hover,
.loc-diff:focus-visible {
  transform: translateY(-2px);
  border-color: var(--diff-color, var(--cyan));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--diff-color, var(--cyan)) 34%, transparent), transparent 62%),
    rgba(6, 14, 20, 0.9);
  box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 22px color-mix(in srgb, var(--diff-color, var(--cyan)) 22%, transparent);
}

.loc-diff.done {
  border-color: color-mix(in srgb, var(--green) 64%, var(--diff-color, var(--cyan)));
  background:
    radial-gradient(circle at 22% 0%, rgba(125, 255, 133, 0.24), transparent 62%),
    rgba(4, 20, 14, 0.72);
}

.loc-diff.done em {
  color: var(--green);
}

.loc-diff.locked,
.loc-diff:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.45);
  box-shadow: none;
}

.loc-diff.locked:hover,
.loc-diff.locked:focus-visible,
.loc-diff:disabled:hover,
.loc-diff:disabled:focus-visible {
  transform: none;
  border-color: color-mix(in srgb, var(--diff-color, var(--cyan)) 28%, rgba(239, 253, 255, 0.14));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--diff-color, var(--cyan)) 12%, transparent), transparent 58%),
    rgba(3, 8, 12, 0.5);
}

.loc-diff-insanity {
  border-color: color-mix(in srgb, var(--diff-color) 58%, rgba(239, 253, 255, 0.16));
}

.loc-card .loc-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.loc-card .loc-badge.cleared {
  color: #031014;
  background: var(--green);
}

.loc-card.locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.5);
}

.loc-card.locked .loc-badge {
  color: var(--ink);
  background: rgba(239, 253, 255, 0.12);
}

.loc-card .loc-lock-note {
  margin-top: 2px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ===== Sector select — full-bleed over the live space background: glossy
   "planet" nodes threaded on a glowing serpentine trail, frosted-glass labels. ===== */
#locationScreen.menu-overlay {
  place-items: stretch;
  align-content: stretch;
  justify-items: center;
  padding: 0;
  overflow: hidden;            /* only the inner panel scrolls */
  /* Uniform, very light scrim — let the live cosmic background (nebula + sparkling stars)
     show through EVENLY. No darker top/bottom bands (those read as dark rectangles in the
     screen corners, esp. in landscape). Header legibility comes from .panel-head's own
     scrim; node labels carry text-shadows. */
  background: rgba(5, 9, 15, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#locationScreen .select-panel {
  width: min(600px, 100%);
  height: 100%;
  max-height: none;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0 max(14px, var(--safe-right)) 0 max(14px, var(--safe-left));
  /* Vertical scroll ONLY — kill the left-right drag the absolutely-positioned
     nodes/labels could otherwise cause. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: block;
}
#locationScreen .panel-head {
  margin: 0 calc(-1 * max(14px, var(--safe-right))) 2px calc(-1 * max(14px, var(--safe-left)));
  padding: max(12px, var(--safe-top)) max(18px, var(--safe-right)) 14px max(18px, var(--safe-left));
  /* Light scrim that fades to transparent (no backdrop-blur → no hard-edged black
     rectangle): the title floats over the live background with just a shadow. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Bright bg now, so the title needs a crisp dark halo (not a full-width scrim band)
   to stay legible; the Назад button gets a dark local pill instead of a faint white one. */
#locationScreen .panel-head h2 { font-size: clamp(1.2rem, 3.4vw, 1.7rem); text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 1), 0 2px 9px rgba(0, 0, 0, 0.7); }
#locationScreen .back-button { background: linear-gradient(180deg, rgba(9, 15, 24, 0.62), rgba(7, 11, 18, 0.5)); border: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (orientation: landscape) and (max-height: 560px) {
  #locationScreen .panel-head { padding-top: max(8px, var(--safe-top)); padding-bottom: 10px; }
  #locationScreen .panel-head h2 { font-size: 1.25rem; }
}

.location-path { position: relative; }
.path-map { position: relative; width: 100%; max-width: 620px; height: var(--map-h); margin: 0 auto 18px; }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.path-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.path-trail-bg { stroke: rgba(180, 230, 255, 0.28); stroke-width: 4px; stroke-dasharray: 1.4 5; }
.path-trail-done { stroke: var(--cyan); stroke-width: 4px; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 80%, transparent)); }
.path-trail-flow { stroke: #eafdff; stroke-width: 4px; stroke-dasharray: 4 96; filter: drop-shadow(0 0 6px var(--cyan)); opacity: 0.9; animation: trailFlow 3.4s linear infinite; }
@keyframes trailFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* The button IS the orb (anchored at the node centre so the trail hits it); the
   frosted label floats to whichever side faces screen-centre. */
.path-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.path-node.is-boss { width: 82px; height: 82px; }
.node-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 26%,
      color-mix(in srgb, var(--loc-accent) 52%, #0c1822),
      color-mix(in srgb, var(--loc-accent) 24%, #060c12) 56%,
      #04080d 100%);
  border: 1.5px solid color-mix(in srgb, var(--loc-accent) 58%, transparent);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--loc-accent) 42%, transparent),
    inset 0 5px 9px rgba(255, 255, 255, 0.16),
    inset 0 -8px 13px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.node-icon {
  font-size: 1.4rem;
  font-weight: 950;
  color: color-mix(in srgb, var(--loc-accent) 88%, #fff);
  text-shadow: 0 0 10px color-mix(in srgb, var(--loc-accent) 55%, transparent);
}
.node-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 13px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: 46vw;
  padding: 7px 12px;
  text-align: left;
  /* Frameless (premium map look) — the sector text floats over the space scene
     with just a shadow; no dark rounded-rectangle box. */
  background: none;
  border: none;
  box-shadow: none;
}
.node-name, .node-kicker, .node-meta { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7); }
.path-node.is-locked .node-label { opacity: 0.72; }
.path-node.is-right .node-label {
  left: auto;
  right: calc(100% + 13px);
  text-align: right;
  align-items: flex-end;
}
.node-kicker { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: color-mix(in srgb, var(--loc-accent) 85%, #fff); }
.node-name { font-size: 0.97rem; font-weight: 850; line-height: 1.08; color: var(--ink); }
.node-meta { font-size: 0.72rem; font-weight: 700; color: color-mix(in srgb, var(--ink) 72%, var(--muted)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.path-node.is-cleared .node-disc {
  background:
    radial-gradient(circle at 34% 26%,
      color-mix(in srgb, var(--loc-accent) 25%, #fff),
      var(--loc-accent) 52%,
      color-mix(in srgb, var(--loc-accent) 62%, #02060a) 100%);
  border-color: color-mix(in srgb, var(--loc-accent) 80%, #fff);
  box-shadow:
    0 0 28px color-mix(in srgb, var(--loc-accent) 65%, transparent),
    inset 0 5px 10px rgba(255, 255, 255, 0.38),
    inset 0 -8px 12px rgba(0, 0, 0, 0.28);
}
.path-node.is-cleared .node-icon { color: #04111a; text-shadow: none; }
.path-node.is-current .node-disc {
  border-color: color-mix(in srgb, var(--loc-accent) 85%, #fff);
  animation: nodePulse 1.9s ease-in-out infinite;
}
.path-node.is-locked { cursor: not-allowed; }
.path-node.is-locked .node-disc {
  background: radial-gradient(circle at 34% 26%, #1b2734, #0c141c 58%, #060b11 100%);
  border-color: rgba(239, 253, 255, 0.14);
  box-shadow: inset 0 5px 8px rgba(255, 255, 255, 0.06), inset 0 -7px 11px rgba(0, 0, 0, 0.5);
  opacity: 0.82;
}
.path-node.is-locked .node-icon { color: #5d6b78; text-shadow: none; }
.path-node.is-locked .node-name { color: var(--muted); }
.path-node.is-locked .node-meta { color: var(--gold); }
/* Locked nodes must read uniformly muted regardless of their sector palette —
   the kicker was inheriting the bright --loc-accent (magenta on sector 04). */
.path-node.is-locked .node-kicker { color: var(--muted); }
.path-node.is-boss .node-disc {
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-width: 2px;
}
.path-node.is-boss .node-icon { font-size: 1.7rem; }
.node-flag { display: none; }
.path-node.is-current .node-flag {
  display: inline-block;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #02060a;
  background: var(--loc-accent);
  padding: 2px 9px;
  border-radius: 999px;
  z-index: 3;
  /* Dark halo separates the pill from the trail + orb glow it used to fuse with. */
  box-shadow: 0 0 0 2px rgba(2, 6, 10, 0.85), 0 0 14px color-mix(in srgb, var(--loc-accent) 60%, transparent);
}
.path-node:not(.is-locked):active .node-disc { transform: scale(0.93); }
.path-node:not(.is-locked):hover .node-disc,
.path-node:not(.is-locked):focus-visible .node-disc { transform: scale(1.06); }
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 26px color-mix(in srgb, var(--loc-accent) 42%, transparent), 0 0 0 0 color-mix(in srgb, var(--loc-accent) 55%, transparent), inset 0 5px 9px rgba(255, 255, 255, 0.16), inset 0 -8px 13px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 32px color-mix(in srgb, var(--loc-accent) 62%, transparent), 0 0 0 13px color-mix(in srgb, var(--loc-accent) 0%, transparent), inset 0 5px 9px rgba(255, 255, 255, 0.16), inset 0 -8px 13px rgba(0, 0, 0, 0.45); }
}

/* difficulty bottom-sheet */
.diff-sheet { position: fixed; inset: 0; z-index: 40; display: none; }
.diff-sheet:not([hidden]) { display: block; }
.diff-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 8, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.diff-sheet.open::before { opacity: 1; }
.diff-sheet-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px calc(16px + max(0px, var(--safe-bottom)));
  background: var(--panel-strong);
  border-top: 1px solid color-mix(in srgb, var(--loc-accent, var(--cyan)) 40%, rgba(239, 253, 255, 0.16));
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.diff-sheet.open .diff-sheet-card { transform: translateY(0); }
.diff-sheet-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.diff-sheet-head h3 { margin: 0; font-size: 1.1rem; }
.diff-sheet-close { margin-left: auto; align-self: flex-start; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }

@media (orientation: landscape) and (max-height: 560px) {
  .diff-sheet-card {
    left: 50%;
    right: auto;
    width: min(560px, 94vw);
    bottom: 12px;
    border-radius: 18px;
    transform: translate(-50%, 130%);
  }
  .diff-sheet.open .diff-sheet-card { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .path-node.is-current .node-disc { animation: none; }
  .diff-sheet-card { transition: none; }
}

/* achievements + base */
.achievements-panel,
.base-panel,
.hangar-panel {
  width: min(1040px, 100%);
}

.panel-subtitle {
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievements-summary,
.base-summary,
.hangar-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.achievements-summary div,
.base-summary div,
.hangar-summary div,
.achievement-card,
.meta-card,
.operation-card,
.campaign-card,
.weapon-card,
.cosmetic-card {
  border: 1px solid rgba(239, 253, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.055);
}
.weapon-card { cursor: pointer; transition: border-color 140ms ease, transform 120ms ease; }
.weapon-card:hover { border-color: rgba(92, 231, 255, 0.4); }
.weapon-card:active { transform: scale(0.99); }

.achievements-summary div,
.base-summary div,
.hangar-summary div {
  padding: 12px;
}

.achievements-summary b,
.base-summary b,
.hangar-summary b {
  display: block;
  color: var(--gold);
  font-size: 1.05rem;
}

.achievements-summary span,
.base-summary span,
.hangar-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.base-prestige {
  grid-column: span 2;
}
/* Trailing odd stat tile spans the row so it never leaves a void beside it. */
.base-summary .bs-wide { grid-column: 1 / -1; }

.ship-preview {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  gap: 14px;
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid rgba(92, 231, 255, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 40%, rgba(92, 231, 255, 0.13), transparent 45%),
    linear-gradient(135deg, rgba(125, 255, 133, 0.06), rgba(255, 79, 216, 0.055)),
    rgba(3, 7, 9, 0.58);
  overflow: hidden;
}

.ship-preview-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ship-preview-copy span,
.ship-preview-copy em {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 950;
  font-style: normal;
  text-transform: uppercase;
}

.ship-preview-copy b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1;
}

.ship-preview-copy p {
  margin: 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
}

.ship-stage {
  position: relative;
  min-height: 186px;
  border: 1px solid rgba(239, 253, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(rgba(92, 231, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 231, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--ship-core, var(--cyan)) 18%, transparent), transparent 55%),
    rgba(2, 6, 10, 0.64);
  background-size: 30px 30px, 30px 30px, auto, auto;
  overflow: hidden;
}

.ship-grid-glow {
  position: absolute;
  inset: 22px;
  border: 1px dashed color-mix(in srgb, var(--ship-core, var(--cyan)) 34%, transparent);
  border-radius: 999px;
  opacity: 0.55;
  animation: ship-orbit 9s linear infinite;
}

/* Base screen tabs — split Ship/Ops/Campaign so it isn't one long scroll. */
.base-tabs {
  display: flex;
  gap: 8px;
  margin: 2px 0 14px;
  position: sticky;
  top: 0;
  z-index: 3;
}
.base-tab {
  flex: 1;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(239, 253, 255, 0.14);
  border-radius: 10px;
  background: rgba(239, 253, 255, 0.04);
  color: var(--muted);
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.base-tab.active {
  color: #04121a;
  border-color: transparent;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 0 22px rgba(54, 247, 255, 0.22);
}
.base-tab-panel { display: none; }
.base-tab-panel.active { display: block; animation: tab-in 220ms ease both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The real in-game ship, rendered to a canvas (matches what you fly). */
.ship-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 186px;
  object-fit: contain;
}

/* Pinned "command dock": the ship stays visible at the top of the Base while the
   upgrade lists scroll under it, so you watch the hull change as you buy modules. */
.base-dock-head { align-items: center; }
.base-ship-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ship-stage.dock {
  flex: 0 0 clamp(104px, 32%, 150px);
  min-height: 0;
  height: 104px;
}
.ship-stage.dock .ship-canvas { height: 104px; }
.ship-stage.dock .ship-grid-glow { inset: 12px; }
.ship-dock-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ship-dock-info .ship-kicker {
  font-size: 0.52rem; font-weight: 950; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cyan);
}
.ship-dock-info b { font-size: clamp(1rem, 4.4vw, 1.25rem); line-height: 1.05; white-space: nowrap; }
.ship-cores { color: var(--gold); font-weight: 900; font-size: 0.92rem; white-space: nowrap; }
.ship-dock-info small { color: var(--muted); font-size: 0.66rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.preview-ship {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178px;
  height: 118px;
  transform: translate(-50%, -50%);
  animation: ship-float 3.8s ease-in-out infinite;
}

.preview-ship i {
  position: absolute;
  display: block;
}

.preview-hull {
  left: 54px;
  top: 35px;
  width: 78px;
  height: 48px;
  clip-path: polygon(100% 50%, 60% 0, 14% 10%, 0 50%, 14% 90%, 60% 100%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ship-body, #667782) 78%, #effdff), var(--ship-body, #667782) 68%, #18242b);
  border: 1px solid color-mix(in srgb, var(--ship-accent, #effdff) 48%, transparent);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ship-core, var(--cyan)) 34%, transparent));
}

.preview-core {
  left: 86px;
  top: 50px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ship-core, var(--cyan));
  box-shadow: 0 0 18px var(--ship-core, var(--cyan)), 0 0 34px color-mix(in srgb, var(--ship-core, var(--cyan)) 42%, transparent);
  animation: core-pulse 1.4s ease-in-out infinite;
}

.preview-thruster {
  left: 28px;
  top: 45px;
  width: 54px;
  height: 30px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ship-trail, var(--green)) 60%, transparent));
  filter: blur(5px);
  opacity: 0.7;
  animation: trail-pulse 0.72s ease-in-out infinite;
}

.preview-wing {
  left: 54px;
  width: 72px;
  height: 24px;
  background: color-mix(in srgb, var(--ship-accent, #effdff) 32%, transparent);
  opacity: 0;
}

.preview-wing.left {
  top: 13px;
  clip-path: polygon(12% 100%, 100% 74%, 48% 0);
}

.preview-wing.right {
  bottom: 13px;
  clip-path: polygon(12% 0, 100% 26%, 48% 100%);
}

.preview-armor {
  left: 74px;
  width: 58px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ship-accent, #effdff) 52%, #10191d);
  opacity: 0;
}

.preview-armor.top {
  top: 24px;
}

.preview-armor.bottom {
  bottom: 24px;
}

.preview-cannon {
  left: 123px;
  top: 54px;
  height: 10px;
  width: 46px;
  border-radius: 999px;
  background: linear-gradient(90deg, #11191e, var(--weapon-color, var(--gold)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--weapon-color, var(--gold)) 34%, transparent);
}

.preview-cannon.side {
  width: 35px;
  height: 7px;
  opacity: 0;
}

.preview-cannon.side.top {
  top: 33px;
  transform: rotate(-12deg);
}

.preview-cannon.side.bottom {
  top: 78px;
  transform: rotate(12deg);
}

.preview-pack.ammo {
  left: 42px;
  width: 20px;
  height: 13px;
  border: 1px solid rgba(255, 209, 102, 0.62);
  border-radius: 4px;
  background: rgba(255, 209, 102, 0.14);
  opacity: 0;
}

.preview-pack.top {
  top: 34px;
}

.preview-pack.bottom {
  top: 70px;
}

.preview-ring {
  left: 44px;
  top: 14px;
  width: 92px;
  height: 92px;
  border: 1px solid color-mix(in srgb, var(--ship-core, var(--cyan)) 48%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: ship-orbit 5.4s linear infinite;
}

.preview-drone {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ship-core, var(--cyan));
  box-shadow: 0 0 14px var(--ship-core, var(--cyan));
  opacity: 0;
}

.preview-drone.one {
  left: 42px;
  top: 18px;
  animation: drone-hover 2.6s ease-in-out infinite;
}

.preview-drone.two {
  right: 30px;
  bottom: 22px;
  animation: drone-hover 2.6s ease-in-out infinite reverse;
}

.preview-ship.has-wings .preview-wing,
.preview-ship.has-armor .preview-armor,
.preview-ship.has-guns .preview-cannon.side,
.preview-ship.has-ammo .preview-pack,
.preview-ship.has-ai .preview-drone.one,
.preview-ship.has-archive .preview-drone.two,
.preview-ship.has-prestige .preview-ring {
  opacity: 1;
}

.preview-ship.has-core .preview-core {
  width: 24px;
  height: 24px;
  left: 83px;
  top: 47px;
}

.preview-ship.has-magnet .preview-ring {
  opacity: 0.78;
  border-style: dashed;
}

.preview-ship.mk-4 .preview-hull,
.preview-ship.mk-5 .preview-hull,
.preview-ship.mk-6 .preview-hull,
.preview-ship.mk-7 .preview-hull,
.preview-ship.mk-8 .preview-hull,
.preview-ship.mk-9 .preview-hull {
  width: 88px;
  height: 54px;
  top: 32px;
}

.ship-module-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.ship-module-strip span {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(239, 253, 255, 0.09);
  border-radius: 8px;
  background: rgba(239, 253, 255, 0.045);
  color: var(--muted);
}

.ship-module-strip span.active {
  border-color: color-mix(in srgb, var(--module-color, var(--cyan)) 34%, rgba(239, 253, 255, 0.1));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--module-color, var(--cyan)) calc(var(--module-power) * 38%), transparent), transparent),
    rgba(239, 253, 255, 0.055);
  color: var(--ink);
}

.ship-module-strip .module-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--module-color, var(--cyan));
  background: color-mix(in srgb, var(--module-color, var(--cyan)) 14%, rgba(3, 7, 9, 0.78));
}

.ship-module-strip .module-icon .skill-icon-svg {
  width: 23px;
  height: 23px;
}

.ship-module-strip em {
  color: var(--gold);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

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

@keyframes core-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.78; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes trail-pulse {
  0%, 100% { transform: scaleX(0.82); opacity: 0.42; }
  50% { transform: scaleX(1.14); opacity: 0.78; }
}

@keyframes ship-orbit {
  to { transform: rotate(360deg); }
}

@keyframes drone-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.achievements-grid,
.base-upgrade-grid,
.operations-grid,
.campaign-grid,
.armory-grid,
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Achievements get their own denser grid (3-up on wide/tablet) + a compact card
   below — the old fixed 2-up made the list far too tall and scroll-heavy. */
.achievements-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.base-upgrade-grid,
.armory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operations-grid,
.campaign-grid,
.cosmetic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ===== Skin select (Hangar) — live hero + rarity-framed cell grid + action bar ===== */
.rarity-common { --rar: #7d8a96; }
.rarity-uncommon { --rar: var(--cyan); }
.rarity-rare { --rar: var(--blue); }
.rarity-epic { --rar: var(--pink); }
.rarity-legendary { --rar: var(--gold); }

.skin-select { display: flex; flex-direction: column; gap: 14px; --rar: var(--cyan); }
.skin-hero {
  position: relative;
  min-height: 230px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% -16%, color-mix(in srgb, var(--rar) 34%, transparent), transparent 66%),
    radial-gradient(90% 80% at 50% 120%, color-mix(in srgb, var(--rar) 16%, transparent), transparent 60%),
    var(--panel-strong);
  box-shadow:
    inset 0 0 60px color-mix(in srgb, var(--rar) 14%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, var(--rar) 40%, transparent),
    0 0 30px color-mix(in srgb, var(--rar) 14%, transparent),
    var(--shadow);
  transition: box-shadow 240ms ease, background 240ms ease;
}
/* sweeping rarity sheen behind the ship */
.skin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 200deg at 50% 40%, transparent, color-mix(in srgb, var(--rar) 18%, transparent), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.skin-hero-canvas { position: relative; display: block; width: 100%; height: 196px; }
/* bottom scrim so the rarity/name/desc stay readable over the ship */
.skin-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--panel-strong) 92%, #000) 6%, transparent);
  pointer-events: none;
}
.skin-hero-meta { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; }
.skin-hero-meta b { display: block; font-size: 1.45rem; color: var(--ink); font-weight: 950; line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.skin-hero-meta p { margin: 3px 0 0; color: var(--ink); opacity: 0.78; font-size: 0.76rem; line-height: 1.28; max-width: 90%; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.skin-hero-rarity {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #06120a;
  background: linear-gradient(90deg, var(--rar), color-mix(in srgb, var(--rar) 55%, #ffffff));
  box-shadow: 0 0 16px color-mix(in srgb, var(--rar) 50%, transparent);
}

.skin-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 12px; background: rgba(239, 253, 255, 0.05); }
.skin-tab {
  position: relative;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.skin-tab.active { color: var(--ink); background: linear-gradient(135deg, rgba(92, 231, 255, 0.2), rgba(125, 255, 133, 0.12)); box-shadow: inset 0 0 0 1px rgba(92, 231, 255, 0.35); }
.skin-tab-dot { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); opacity: 0; }
.skin-tab.has-new .skin-tab-dot { opacity: 1; }

.skin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skin-cell { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; transition: transform 140ms ease; }
.skin-cell:active { transform: scale(0.96); }
.skin-cell:hover { transform: translateY(-2px); }
.skin-cell-canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--rar) 16%, transparent), rgba(4, 8, 12, 0.62) 74%); }
.skin-cell-frame { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--rar) 55%, transparent); box-shadow: inset 0 0 16px color-mix(in srgb, var(--rar) 16%, transparent); }
.skin-cell.rarity-legendary .skin-cell-frame,
.skin-cell.rarity-epic .skin-cell-frame { border-width: 2px; box-shadow: inset 0 0 18px color-mix(in srgb, var(--rar) 26%, transparent), 0 0 14px color-mix(in srgb, var(--rar) 22%, transparent); }
.skin-cell.selected { transform: translateY(-2px); }
.skin-cell.selected .skin-cell-frame { border-color: var(--rar); box-shadow: inset 0 0 0 2px var(--rar), 0 0 20px color-mix(in srgb, var(--rar) 40%, transparent); }
.skin-cell-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 5px 4px; font-size: 0.6rem; font-weight: 900; color: var(--ink); text-align: center; line-height: 1.1; background: linear-gradient(0deg, rgba(4, 8, 12, 0.88), transparent); }
.skin-cell-check { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 950; color: #06090b; background: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 102, 0.5); }
.skin-cell-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; background: rgba(4, 8, 12, 0.55); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.skin-cell-cost { position: absolute; top: 6px; left: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 950; color: var(--ink); background: rgba(4, 8, 12, 0.86); box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 10px color-mix(in srgb, var(--rar) 28%, transparent); }
.skin-cell.rarity-legendary .skin-cell-cost { color: var(--gold); }

.skin-actionbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-strong); border: 1px solid var(--line); }
.skin-actionbar small { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.skin-action-btn { width: auto; min-width: 130px; margin-top: 0; }
.skin-action-btn.is-buy { border-color: rgba(255, 209, 102, 0.6); background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), rgba(181, 92, 255, 0.14)); }

@media (max-width: 560px) {
  .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skin-hero-canvas { height: 126px; }
}

.achievement-card,
.meta-card,
.operation-card,
.campaign-card,
.weapon-card,
.cosmetic-card {
  position: relative;
  padding: 14px;
  overflow: hidden;
}

/* Premium (prism) skins + the prisms balance — gold/prism accent to read as
   distinct from the cores economy. */
.cosmetic-card.premium {
  border-color: rgba(255, 209, 102, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 209, 102, 0.12), transparent 42%),
    linear-gradient(315deg, rgba(181, 92, 255, 0.12), transparent 40%),
    var(--panel-strong, rgba(8, 13, 20, 0.7));
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.1);
}
.cosmetic-card.premium .cosmetic-top em { color: var(--gold, #ffd166); }
.cosmetic-preview {
  display: block;
  width: 100%;
  height: 80px;
  margin: 8px 0 6px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 62%, rgba(92, 231, 255, 0.09), rgba(4, 8, 12, 0.5) 72%);
  border: 1px solid rgba(239, 253, 255, 0.08);
}
.cosmetic-card.premium .cosmetic-preview {
  background: radial-gradient(ellipse at 50% 62%, rgba(255, 209, 102, 0.11), rgba(14, 9, 4, 0.55) 72%);
  border-color: rgba(255, 209, 102, 0.2);
}
.hangar-summary .prisms-stat b { color: var(--gold, #ffd166); }
.hangar-summary .exchange-cell { grid-column: 1 / -1; }
.hangar-summary .exchange-cell .mini-button { width: 100%; }
.shop-card.prisms .shop-ico {
  background: rgba(255, 209, 102, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.34);
}

.achievement-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
}

.achievement-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--achievement-color, var(--cyan)) 62%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 24%, rgba(239, 253, 255, 0.22), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--achievement-color, var(--cyan)) 38%, #07111b), rgba(3, 7, 9, 0.92));
  box-shadow: inset 0 0 18px rgba(239, 253, 255, 0.07), 0 0 18px color-mix(in srgb, var(--achievement-color, var(--cyan)) 24%, transparent);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.achievement-card.tier-2 .achievement-icon,
.achievement-toast.tier-2 .achievement-icon {
  border-radius: 12px;
}

.achievement-card.tier-3 .achievement-icon,
.achievement-toast.tier-3 .achievement-icon {
  box-shadow: inset 0 0 18px rgba(255, 209, 102, 0.1), 0 0 24px color-mix(in srgb, var(--achievement-color, var(--gold)) 34%, transparent);
}

.achievement-card.tier-4 .achievement-icon,
.achievement-card.tier-5 .achievement-icon,
.achievement-toast.tier-4 .achievement-icon,
.achievement-toast.tier-5 .achievement-icon {
  border-color: rgba(239, 253, 255, 0.62);
  box-shadow: inset 0 0 22px rgba(239, 253, 255, 0.14), 0 0 30px color-mix(in srgb, var(--achievement-color, var(--gold)) 44%, transparent);
}

.achievement-svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  color: var(--achievement-color, var(--cyan));
  display: block;
}

.achievement-svg .ach-frame {
  fill: color-mix(in srgb, var(--achievement-color, var(--cyan)) 18%, rgba(3, 7, 9, 0.92));
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.achievement-svg .ach-orbit {
  fill: none;
  stroke: rgba(239, 253, 255, 0.3);
  stroke-width: 1;
}

.achievement-svg .ach-symbol {
  fill: color-mix(in srgb, currentColor 18%, transparent);
  stroke: #effdff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.achievement-svg .ach-rays,
.achievement-svg .ach-sparks,
.achievement-svg .ach-crown {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.achievement-svg .ach-crown,
.achievement-svg .ach-sparks,
.achievement-svg .ach-dot {
  fill: currentColor;
}

.achievement-svg .ach-rays {
  opacity: 0.45;
}

.achievement-svg .ach-dot {
  opacity: 0.72;
}

.achievement-card.tier-4,
.achievement-card.tier-5 {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--achievement-color, var(--cyan)) 18%, transparent), transparent 50%),
    rgba(239, 253, 255, 0.06);
}

.achievement-card.tier-5 {
  border-color: rgba(239, 253, 255, 0.34);
}

.achievement-icon::before,
.achievement-icon::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.achievement-icon::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--achievement-color, var(--cyan)) 58%, transparent);
  border-radius: 50%;
}

.achievement-icon::after {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--achievement-color, var(--cyan)) 72%, transparent);
  transform: rotate(-36deg);
  opacity: 0.42;
}

.achievement-card.unlocked,
.meta-card.maxed,
.operation-card.complete,
.campaign-card.complete,
.weapon-card.unlocked,
.cosmetic-card.unlocked {
  border-color: rgba(125, 255, 133, 0.4);
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 255, 133, 0.12), transparent 48%),
    rgba(239, 253, 255, 0.06);
}

.weapon-card.equipped,
.cosmetic-card.equipped {
  border-color: rgba(255, 209, 102, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.1), 0 0 22px rgba(255, 209, 102, 0.08);
}

.meta-top {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.meta-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--meta-color, var(--cyan)) 56%, transparent);
  border-radius: 10px;
  color: var(--meta-color, var(--cyan));
  background: color-mix(in srgb, var(--meta-color, var(--cyan)) 14%, transparent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--meta-color, var(--cyan)) 10%, transparent);
}

.meta-icon .skill-icon-svg {
  width: 31px;
  height: 31px;
}

/* ===== Base "tech cells" — icon + level pips + effect delta + cost chip ===== */
.tech-cat { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0 -2px; }
.tech-cat::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tech-cat span { font-size: 0.66rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.tech-cat[data-cat="defense"] span { color: var(--green); }
.tech-cat[data-cat="utility"] span { color: var(--gold); }

.tech-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 16px;
  border: 1px solid color-mix(in srgb, var(--meta-color, var(--cyan)) 30%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--meta-color, var(--cyan)) 13%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(239, 253, 255, 0.045), rgba(3, 7, 9, 0) 40%),
    var(--panel-strong);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--meta-color, var(--cyan)) 7%, transparent), 0 6px 18px rgba(0, 0, 0, 0.32);
}
.tech-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--meta-color, var(--cyan)), transparent); opacity: 0.85; }
.tech-head { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }
.tech-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tech-id b { font-size: 0.9rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-tag { font-size: 0.58rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--meta-color, var(--cyan)) 72%, var(--muted)); }
.tech-lvl { font-style: normal; font-weight: 950; font-size: 0.74rem; color: var(--gold); white-space: nowrap; }
.tech-lvl i { color: var(--muted); font-style: normal; font-weight: 800; }

.tech-pips { display: flex; flex-wrap: wrap; gap: 3px; }
.tech-pips span { width: 9px; height: 9px; border-radius: 3px; background: rgba(239, 253, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.06); transition: background 160ms ease; }
.tech-pips span.on { background: var(--meta-color, var(--cyan)); box-shadow: 0 0 8px color-mix(in srgb, var(--meta-color, var(--cyan)) 55%, transparent); }

.tech-effect { display: flex; align-items: baseline; gap: 5px; font-weight: 900; font-size: 0.8rem; flex-wrap: wrap; }
.tech-now { color: var(--ink); }
.tech-arrow { color: var(--muted); }
.tech-next { color: var(--green); }
.tech-effect small { margin: 0; color: var(--muted); font-size: 0.66rem; font-weight: 800; flex-basis: 100%; }

.tech-buy { margin-top: auto; min-height: 40px; }
.tech-cost { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); color: var(--gold); font-weight: 950; }
.tech-cell.affordable .tech-cost { box-shadow: 0 0 10px rgba(255, 209, 102, 0.28); }
.tech-cell:not(.affordable):not(.maxed) .tech-buy { opacity: 0.5; }

.tech-cell.maxed { border-color: rgba(125, 255, 133, 0.5); }
.tech-cell.maxed .tech-rail { background: linear-gradient(var(--green), transparent); }
.tech-cell.maxed .tech-lvl { color: var(--green); }
.tech-cell.maxed .meta-icon { border-color: rgba(125, 255, 133, 0.6); color: var(--green); }
.tech-max { letter-spacing: 0.12em; }

.weapon-top,
.cosmetic-top {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.weapon-top span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--weapon-color, var(--cyan)) 56%, transparent);
  border-radius: 10px;
  color: var(--weapon-color, var(--cyan));
  background: color-mix(in srgb, var(--weapon-color, var(--cyan)) 14%, transparent);
  font-size: 0.8rem;
  font-weight: 950;
}

.weapon-top em,
.cosmetic-top em {
  color: var(--cyan);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.weapon-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0;
}

.weapon-stats span {
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(239, 253, 255, 0.055);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.weapon-stats b {
  color: var(--ink);
}

.cosmetic-swatch {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 60%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, var(--cosmetic-color, var(--cyan)), var(--cosmetic-secondary, var(--green)));
  box-shadow: 0 0 18px color-mix(in srgb, var(--cosmetic-color, var(--cyan)) 24%, transparent);
}

.meta-top span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(92, 231, 255, 0.3);
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(92, 231, 255, 0.08);
  box-shadow: inset 0 0 18px rgba(92, 231, 255, 0.08);
  font-size: 0.7rem;
  font-weight: 950;
}

.meta-top b,
.achievement-top b {
  min-width: 0;
}

.meta-top em {
  color: var(--gold);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 950;
}

.achievement-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.achievement-top b {
  font-size: 0.86rem;
  line-height: 1.15;
  min-width: 0;
  /* Wrap up to 2 lines instead of hard-ellipsing to one — on the narrow 2-up/3-up
     cards a single-line title would clip to "Перв…". */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.achievement-top span {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.achievement-card p,
.meta-card p,
.operation-card p,
.campaign-card p,
.weapon-card p,
.cosmetic-card p {
  margin: 8px 0 10px !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.3;
}

.achievement-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(239, 253, 255, 0.1);
}

.achievement-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
  box-shadow: 0 0 14px rgba(92, 231, 255, 0.35);
}

.achievement-card small,
.achievement-card em,
.meta-card small,
.operation-card small,
.operation-card em,
.campaign-card small,
.weapon-card small,
.weapon-card em,
.cosmetic-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.achievement-card em,
.operation-card em,
.weapon-card em {
  color: var(--gold);
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin-top: 12px;
  border: 1px solid rgba(125, 255, 133, 0.55);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(125, 255, 133, 0.18), rgba(92, 231, 255, 0.13));
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.mini-button:hover,
.mini-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(92, 231, 255, 0.82);
}

.mini-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  filter: grayscale(0.35);
  transform: none;
}

/* settings */
.settings-panel {
  width: min(620px, 100%);
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Scroll room so the last row (Вибрация) clears the bottom inset instead of ending
     half-clipped at the fold. */
  padding-bottom: max(28px, calc(var(--safe-bottom) + 16px));
}

/* ===== PURCHASE / UNLOCK CELEBRATION ===== */
.pfx {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; --fx: #5ce7ff;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--fx) 24%, rgba(4,7,12,0.84)), rgba(3,6,10,0.95) 72%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0;
}
.pfx.show, .pfx.out { display: flex; }
.pfx.show { animation: pfxIn 240ms ease forwards; }
.pfx.out { animation: pfxOut 300ms ease forwards; }
@keyframes pfxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pfxOut { from { opacity: 1; } to { opacity: 0; } }
.pfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.pfx-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; max-width: 92vw; }
.pfx-rays {
  position: absolute; top: 38%; left: 50%; width: 170vmax; height: 170vmax; transform: translate(-50%,-50%); z-index: -1; pointer-events: none; opacity: 0;
  /* repeating → evenly-spaced symmetric god-rays all the way around (the old non-
     repeating conic only drew ONE wedge then went transparent — the "странный 1 луч"). */
  background: repeating-conic-gradient(from 0deg, transparent 0 13deg, color-mix(in srgb, var(--fx) 26%, transparent) 14.5deg 15.5deg, transparent 17deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 16%, #000 30%, transparent 64%); mask-image: radial-gradient(circle, transparent 16%, #000 30%, transparent 64%);
  animation: pfxRays 26s linear infinite, pfxRaysIn 700ms ease 100ms forwards;
}
@keyframes pfxRays { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes pfxRaysIn { to { opacity: 0.6; } }
.pfx-burst {
  position: absolute; top: 36%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, #fff, color-mix(in srgb, var(--fx) 60%, transparent) 38%, transparent 70%);
  animation: pfxBurst 640ms cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes pfxBurst { 0% { opacity: 0.95; transform: translate(-50%,-50%) scale(0.18); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(12); } }
.pfx-art { position: relative; width: min(86vw, 300px); height: 224px; display: grid; place-items: center; animation: pfxPop 720ms cubic-bezier(.2,1.32,.34,1) backwards; }
@keyframes pfxPop { 0% { opacity: 0; transform: scale(0.35); } 62% { opacity: 1; transform: scale(1.09); } 100% { transform: scale(1); } }
.pfx-item-canvas { width: 100%; height: 224px; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--fx) 60%, transparent)); }
.pfx-bigicon { display: none; }
.pfx-bigicon svg { width: 124px; height: 124px; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--fx) 80%, transparent)); }
.pfx.kind-currency .pfx-item-canvas { display: none; }
.pfx.kind-currency .pfx-bigicon { display: block; }
.pfx-rarity { margin-top: 4px; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx); padding: 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--fx) 18%, transparent); box-shadow: inset 0 0 0 1px var(--fx); animation: pfxRise 480ms ease 220ms backwards; }
.pfx-rarity:empty { display: none; }
.pfx-title { margin-top: 12px; font-size: clamp(1.7rem, 7.4vw, 2.5rem); font-weight: 950; color: #fff; line-height: 1.04; text-shadow: 0 2px 20px color-mix(in srgb, var(--fx) 60%, #000); animation: pfxRise 480ms ease 300ms backwards; }
.pfx-sub { margin-top: 6px; font-size: 0.92rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--fx) 72%, #fff); animation: pfxRise 480ms ease 380ms backwards; }
.pfx-tap { margin-top: 28px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.48); animation: pfxBlink 1.6s ease 1000ms infinite backwards; }
@keyframes pfxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pfxBlink { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) {
  .pfx-rays { animation: pfxRaysIn 1ms forwards; }
  .pfx-art, .pfx-rarity, .pfx-title, .pfx-sub { animation-duration: 1ms; }
}

/* Premium gloss sweep across epic/legendary shop cards — makes the витрина feel rich. */
.feat-card.rarity-epic, .feat-card.rarity-legendary { overflow: hidden; }
.feat-card.rarity-epic::after, .feat-card.rarity-legendary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.13) 48%, transparent 56%);
  background-size: 280% 100%; background-position: 180% 0;
  animation: featShine 5s ease-in-out infinite;
}
.feat-card.rarity-legendary::after {
  animation-duration: 4s;
  background-image: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--rar) 30%, rgba(255, 255, 255, 0.22)) 48%, transparent 56%);
}
@keyframes featShine { 0%, 64% { background-position: 180% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .feat-card.rarity-epic::after, .feat-card.rarity-legendary::after { animation: none; } }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* wide control? -> wrap to a new line instead of pushing the row past the panel edge */
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(239, 253, 255, 0.08);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;        /* allow the label to shrink so the wrap can kick in */
  flex: 1 1 180px;
}

.setting-label b {
  font-size: 0.96rem;
}

.setting-label small {
  color: var(--muted);
  font-size: 0.74rem;
}

.setting-control {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;     /* never overflow the parent — drop to the next row instead */
}

/* On narrow phones drop straight to a stacked layout — label on top, control
   below — so no row can ever push the panel sideways. */
@media (max-width: 480px) {
  .setting-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .setting-label { flex: 1 1 auto; }
  .setting-control { width: 100%; justify-content: flex-start; }
  .segment { width: 100%; }
  .segment button { flex: 1 1 0; padding: 0 8px; }
}

.setting-section-title {
  margin: 12px 0 2px;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* toggle switch — tactile/physical: recessed channel + raised glossy knob */
.toggle {
  position: relative;
  width: 56px;
  height: 32px;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(9, 16, 26, 0.95), rgba(18, 28, 42, 0.9));
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(120, 170, 210, 0.14);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdfefe, #ccd8e0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.5, 1), background 180ms ease;
}

.toggle.on {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(125, 255, 160, 0.5), 0 0 14px rgba(54, 247, 255, 0.32);
}

.toggle.on::after {
  transform: translateX(24px);
  background: linear-gradient(180deg, #052028, #02151b);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(120, 240, 255, 0.3);
}
.toggle:active::after { width: 30px; }

/* segmented control */
.segment {
  display: inline-flex;
  border: 1px solid rgba(239, 253, 255, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
}

.segment button {
  min-height: 36px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.segment button.active {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #031014;
}

/* slider — recessed channel + value fill (JS sets background) + glossy knob */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 18, 28, 0.9);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(120, 170, 210, 0.12);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdfefe, #cfe9f2);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(54, 247, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdfefe, #cfe9f2);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(54, 247, 255, 0.5);
}

.setting-value {
  min-width: 40px;
  text-align: right;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.84rem;
}

/* Touch targets: enlarge settings controls to ~44px on coarse pointers. */
@media (pointer: coarse) {
  .toggle { width: 60px; height: 36px; }
  .toggle::after { width: 28px; height: 28px; top: 4px; left: 4px; }
  .toggle.on::after { transform: translateX(24px); }
  .segment button { min-height: 44px; }
  .slider { height: 10px; }
  .slider::-webkit-slider-thumb { width: 26px; height: 26px; }
  .slider::-moz-range-thumb { width: 26px; height: 26px; }
}

/* how to play */
.howto-panel {
  width: min(860px, 100%);
}

.howto-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.howto-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(239, 253, 255, 0.08);
  align-items: baseline;
}

.howto-row:last-child {
  border-bottom: none;
}

.howto-row b {
  color: var(--cyan);
  font-size: 0.9rem;
}

.howto-row span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.skill-guide {
  display: grid;
  gap: 16px;
  margin-top: 12px;
  max-height: min(48vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.guide-section h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.guide-grid {
  display: grid;
  /* Lower the min so two compact skill cards always fit a phone row instead of
     collapsing to one full-width card with an empty right half. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.guide-skill,
.guide-combo {
  border: 1px solid rgba(239, 253, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--guide-color, var(--cyan)) 14%, transparent), transparent 54%),
    rgba(239, 253, 255, 0.055);
}

.guide-skill {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 8px; row-gap: 2px;
  align-items: center;
  padding: 9px;
}
/* Icon spans both text rows + centers, so title + meta read as one tight group
   instead of being flung to the top and bottom edges. */
.guide-skill .guide-icon { grid-row: 1 / span 2; align-self: center; }

.guide-skill span.guide-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--guide-color, var(--cyan)) 16%, rgba(3, 7, 9, 0.9));
  box-shadow: 0 0 18px color-mix(in srgb, var(--guide-color, var(--cyan)) 16%, transparent);
}

.guide-icon .skill-icon-svg {
  width: 28px;
  height: 28px;
}

.guide-skill b,
.guide-combo b {
  display: block;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.2;
}

.guide-skill em {
  grid-column: 2;
  color: var(--gold);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.guide-skill p,
.guide-combo p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.26;
}

.guide-combo {
  --guide-color: var(--gold);
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
}

.guide-combo > .combo-icon {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 36px;
  margin: 0;
}

.guide-combo em {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.guide-combo p {
  grid-column: 1 / -1;
}

.kicker.success {
  color: var(--green);
}

.unlock-note {
  margin-top: 16px !important;
  color: var(--gold) !important;
  font-weight: 800 !important;
}

/* in-game pause button */
.pause-button {
  display: none;
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  right: calc(var(--safe-right) + 12px);
  z-index: 16;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239, 253, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(6, 10, 13, 0.7);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
}

@media (pointer: coarse) {
  body[data-game-state="playing"] .pause-button {
    display: flex;
  }
  /* Reserve a gutter on the right of the HUD so the HP/armor bars (and top
     chips) stop BEFORE the floating pause button (always top-right) instead of
     running under it. 42px button + 12px offset + a little gap. */
  body[data-game-state="playing"] .hud {
    padding-right: 58px;
  }
}

/* Combat HUD/controls belong to an active run only — hide them on menus, the
   level-up overlay and result screens so they don't bleed through (dimmed). */
body:not([data-game-state="playing"]) .hud,
body:not([data-game-state="playing"]) .mission-strip,
body:not([data-game-state="playing"]) .xp-strip,
body:not([data-game-state="playing"]) .skill-tray,
body:not([data-game-state="playing"]) .mobile-controls,
body:not([data-game-state="playing"]) .boss-bar {
  opacity: 0;
  pointer-events: none;
}

body[data-game-state="victoryCutscene"] .corner-help,
body[data-game-state="victoryCutscene"] .pause-button,
body[data-game-state="victoryCutscene"] .achievement-popups {
  opacity: 0;
  pointer-events: none;
}

/* rotate device hint */
.rotate-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(2, 5, 9, 0.94);
  text-align: center;
  padding: 24px;
}

.rotate-hint.active {
  display: flex;
}

.rotate-icon {
  font-size: 3.4rem;
  color: var(--cyan);
  animation: rotateHintSpin 2.4s ease-in-out infinite;
}

.rotate-hint p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
}

@keyframes rotateHintSpin {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

@media (max-width: 560px) {
  .location-grid {
    grid-template-columns: 1fr;
  }

  .path-node { width: 58px; height: 58px; }
  .path-node.is-boss { width: 74px; height: 74px; }
  .node-name { font-size: 0.9rem; }
  .node-label { max-width: 42vw; padding: 6px 10px; }

  .loc-difficulties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-diff {
    padding: 7px 5px;
  }

  .loc-diff span {
    font-size: 0.62rem;
  }

  .base-upgrade-grid,
  .operations-grid,
  .campaign-grid,
  .armory-grid,
  .cosmetic-grid {
    grid-template-columns: 1fr;
  }
  /* Achievements stay 2-up even on phones (cards are compact) so the list isn't a
     single column you scroll forever. */
  .achievements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* Stat summaries stay 2-up on phones so the screen isn't a long single column. */
  .achievements-summary,
  .base-summary,
  .hangar-summary {
    grid-template-columns: 1fr 1fr;
  }
  .base-summary .base-prestige {
    grid-column: 1 / -1;
  }

  .base-prestige {
    grid-column: auto;
  }

  .ship-preview {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .ship-stage {
    min-height: 156px;
  }

  .ship-module-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .howto-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ============ INTERFACE CUSTOMISATION + SAFE AREA ============ */
.hud {
  top: calc(14px + var(--safe-top));
  transform: scale(var(--hud-scale, 1));
  transform-origin: top center;
}

.mobile-controls {
  opacity: var(--control-opacity, 1);
  bottom: calc(48px + var(--safe-bottom));
}

.move-stick {
  transform: scale(var(--control-scale, 1));
  transform-origin: left bottom;
}

.mobile-actions {
  transform: scale(var(--control-scale, 1));
  transform-origin: right bottom;
}

/* left-handed: mirror stick and action cluster */
.left-handed .move-stick {
  left: auto;
  right: max(clamp(18px, 5vw, 42px), var(--safe-right));
  transform-origin: right bottom;
}

.left-handed .mobile-actions {
  right: auto;
  left: max(clamp(18px, 5vw, 42px), var(--safe-left));
  transform-origin: left bottom;
}

.pause-button {
  opacity: var(--control-opacity, 1);
}

@media (max-width: 560px) {
  .hud {
    top: calc(8px + var(--safe-top));
  }

  .mobile-controls {
    bottom: calc(34px + var(--safe-bottom));
  }

  .mobile-actions {
    transform: scale(var(--control-scale, 1));
    transform-origin: right bottom;
  }

  .left-handed .move-stick {
    left: auto;
    right: 14px;
  }

  .left-handed .mobile-actions {
    left: 14px;
    right: auto;
    transform: scale(var(--control-scale, 1));
    transform-origin: left bottom;
  }
}

/* ============ COMPACT LANDSCAPE (short phone) ============ */
@media (orientation: landscape) and (max-height: 520px) {
  .hud {
    top: calc(6px + var(--safe-top));
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .meter {
    height: 4px;
    margin-top: 3px;
  }

  .armor-meter {
    height: 3px;
    margin-top: 2px;
  }

  .mission-strip {
    top: calc(50px + var(--safe-top));
    padding: 5px 11px;
    gap: 8px;
  }

  .mission-strip strong {
    font-size: 0.78rem;
  }

  .mission-strip span,
  .mission-strip em {
    font-size: 0.62rem;
  }

  .skill-tray {
    display: none;
  }

  .xp-strip {
    bottom: 2px;
    height: 6px;
  }

  .mobile-controls {
    display: flex;
    bottom: calc(6px + var(--safe-bottom));
    height: 108px;
    padding: 0 10px;
  }

  .move-stick {
    left: 10px;
    width: 92px;
    height: 92px;
  }

  .move-stick i {
    width: 38px;
    height: 38px;
  }

  .mobile-actions {
    right: 10px;
    bottom: 0;
    width: 118px;
    grid-template-columns: 55px 55px;
    gap: 6px;
    transform: scale(var(--control-scale, 1));
    transform-origin: right bottom;
  }

  .mobile-button {
    min-height: 42px;
    font-size: 0.7rem;
  }

  .mobile-button.dash {
    min-width: 118px;
    min-height: 40px;
  }

  .left-handed .move-stick {
    left: auto;
    right: 10px;
  }

  .left-handed .mobile-actions {
    left: 10px;
    right: auto;
    transform: scale(var(--control-scale, 1));
    transform-origin: left bottom;
  }
}

/* ============ BOSS HEALTH BAR ============ */
.boss-bar {
  position: absolute;
  top: calc(126px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(620px, calc(100vw - 32px));
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 66, 104, 0.5);
  border-radius: 10px;
  background: rgba(10, 4, 8, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 66, 104, 0.18);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.boss-bar.active {
  display: flex;
}

.boss-bar-name {
  text-align: center;
  font-weight: 950;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff5d7e;
  font-size: 0.8rem;
  text-shadow: 0 0 12px rgba(255, 66, 104, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.boss-bar-track {
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(239, 253, 255, 0.1);
  border: 1px solid rgba(255, 66, 104, 0.4);
}

.boss-bar-track i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4268, #ff8a3d, #ffd166);
  box-shadow: 0 0 16px rgba(255, 66, 104, 0.6);
  /* No width transition: this bar is set every frame, so a transition makes it
     perpetually chase the real value instead of tracking it. */
}

@media (max-width: 560px) {
  .boss-bar {
    top: calc(186px + var(--safe-top));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .boss-bar {
    top: calc(78px + var(--safe-top));
    padding: 5px 12px;
  }

  .boss-bar-track {
    height: 10px;
  }
}

/* language select */
.lang-select {
  min-height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(239, 253, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.06);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.lang-select option {
  background: #0a0f12;
  color: var(--ink);
}

/* ===================== COMPACT HUD (redesign) ===================== */
.hud {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  transform: scale(var(--hud-scale, 1));
  transform-origin: top center;
}

.hud-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.hud-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 3px 9px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(3, 7, 9, 0.62);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.hud-chip span {
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.hud-chip strong {
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 900;
}

.hud-weapon {
  flex: 1;
  min-width: 0;
  /* NOT overflow:hidden — on iOS the Cyrillic font renders taller than the chip,
     and a clipped flex-column would shave the (centred) weapon-name line down to a
     sliver. The name's own ellipsis (.hud-weapon strong) handles horizontal
     truncation; vertical must stay visible. */
  overflow: visible;
}

.hud-weapon strong {
  display: block;
  font-size: 0.74rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-weapon span {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cyan);
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-vitals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vital {
  position: relative;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(239, 253, 255, 0.14);
  background: rgba(239, 253, 255, 0.07);
}

.vital.armor {
  height: 9px;
}

.vital > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  /* Updated every frame — no transition (was making the bar lag the real value). */
}

.vital.hp > i {
  background: linear-gradient(90deg, var(--red), var(--orange), var(--gold));
  box-shadow: 0 0 12px rgba(255, 66, 104, 0.4);
}

.vital.armor > i {
  width: 0%;
  background: linear-gradient(90deg, #6d7cff, var(--cyan));
}

.vital b {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.vital.armor b {
  font-size: 0.5rem;
  line-height: 1;
  left: 6px;
  opacity: 0.92;
}

/* secondary stats only when there is room */
.hud-opt {
  display: none;
}

@media (min-width: 620px) {
  .hud-opt {
    display: flex;
  }
}

/* keep the touch pause button clear of the top row */
@media (pointer: coarse) {
  .hud-row {
    padding-right: 46px;
  }
}

/* Landscape: the .hud-weapon chip had flex:1 and stretched into a giant empty
   box across half the wide screen. Cap it to a tidy width; let the chip row
   fill the remaining space (invisibly) so the vitals stay pinned right. */
@media (orientation: landscape) {
  .hud-row { flex: 1 1 auto; min-width: 0; }
  .hud-weapon {
    flex: 0 1 auto;
    max-width: clamp(150px, 22vw, 230px);
  }
}

/* slim mission strip tucked just under the compact HUD */
.mission-strip {
  top: calc(82px + var(--safe-top));
  padding: 6px 11px;
  gap: 9px;
}

.mission-strip strong {
  font-size: 0.84rem;
}

.mission-strip span,
.mission-strip em {
  font-size: 0.66rem;
}

@media (max-width: 560px) {
  .mission-strip {
    top: calc(82px + var(--safe-top));
  }

  .toast {
    top: calc(120px + var(--safe-top));
  }

  .achievement-popups {
    top: calc(154px + var(--safe-top));
    left: max(8px, var(--safe-left));
    width: min(286px, calc(100vw - 16px));
  }

  .achievement-toast {
    grid-template-columns: 42px 1fr;
    padding: 8px 10px;
  }

  .achievement-toast .achievement-icon {
    width: 38px;
    height: 38px;
  }

  #levelScreen {
    align-items: center;
  }

  .level-panel {
    width: min(380px, calc(100vw - 20px));
    max-height: calc(100dvh - 160px);
    overflow: auto;
    padding: 12px;
  }

  #levelScreen .upgrade-grid {
    /* Let the panel scroll instead of double-clipping inside the grid; on phones
       the 3 cards are now compact enough to fit without a scroll on most sizes. */
    max-height: none;
    gap: 8px;
    margin-top: 10px;
  }

  #levelScreen .upgrade-card {
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    /* Slightly more top-padding to clear the top rarity bar. */
    padding: 12px 11px 9px;
  }

  #levelScreen .uc-emblem {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 78%, transparent),
      0 0 0 3px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 14%, transparent),
      0 0 18px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 32%, transparent);
  }
  #levelScreen .uc-icon { width: 34px; height: 34px; }

  #levelScreen .uc-name { font-size: 0.92rem; font-weight: 950; }
  #levelScreen .uc-desc { font-size: 0.72rem; line-height: 1.28; margin-top: 2px; }

  /* On phones, show only the FIRST combo hint — the second row was pushing the
     3rd card off-screen and players read it as "card cut off". The full list
     stays available in the Skill Guide ("Как играть" -> справочник). */
  #levelScreen .uc-combo .combo-hint-row:nth-child(n+2) { display: none; }
  #levelScreen .uc-combo { margin-top: 4px; }

  .skill-guide {
    max-height: 54vh;
  }

  .guide-grid,
  .combo-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================== LANDSCAPE PREMIUM ==============================
   Cards are taller than wide -> stack their inner content vertically AND give
   each card a premium "trophy card" look: rarity glow on TOP (not the side),
   emblem with a hexagonal halo, refined typography. Designed to look great at
   ~250–300px column widths. */
@media (orientation: landscape) {
  .level-panel {
    width: min(960px, calc(100vw - 32px));
    padding: 20px 22px 16px;
  }
  .level-panel .kicker,
  .level-panel .level-title { text-align: center; }

  #levelScreen .upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    gap: 10px;
    margin-top: 16px;
  }
  /* Hide the floating "WASD/стрелки" tips overlay during the level-up panel —
     it floated over the bottom-right card and looked messy. */
  body[data-game-state="levelup"] .corner-help { display: none; }

  #levelScreen .upgrade-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* Tighter padding + min-height so the cards feel premium, not "scattered". */
    padding: 22px 16px 16px;
    min-height: 210px;
    text-align: center;
    border-left: 1px solid color-mix(in srgb, var(--upgrade-color, var(--cyan)) 42%, rgba(239, 253, 255, 0.08));
    overflow: visible;
    /* Cleaner background: a darker base with one strong top-accent wash, not two layered glows. */
    background:
      radial-gradient(140% 80% at 50% -6%, color-mix(in srgb, var(--upgrade-color, var(--cyan)) 30%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(14, 19, 28, 0.96), rgba(7, 10, 16, 0.98));
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.5),
      0 0 28px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 14%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--upgrade-color, var(--cyan)) 32%, transparent);
  }
  #levelScreen .upgrade-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.56),
      0 0 40px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 28%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--upgrade-color, var(--cyan)) 44%, transparent);
  }

  /* Premium rarity bar across the TOP — full width with a soft fade at the edges. */
  #levelScreen .upgrade-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 6px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 15%) 22%,
      color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 25%) 50%,
      color-mix(in srgb, var(--upgrade-color, var(--cyan)) 100%, white 15%) 78%,
      transparent 100%);
    box-shadow:
      0 0 20px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 80%, transparent),
      0 2px 14px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 60%, transparent);
  }
  /* Glow that emanates downward from the rarity bar onto the card top. */
  #levelScreen .upgrade-card::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 18%;
    right: 18%;
    height: 28px;
    background: radial-gradient(55% 100% at 50% 0%,
      color-mix(in srgb, var(--upgrade-color, var(--cyan)) 70%, transparent),
      transparent 75%);
    pointer-events: none;
    filter: blur(2px);
  }

  /* Header chips on a single centered row, smaller for the narrow column. */
  #levelScreen .uc-head {
    justify-content: center;
    margin-bottom: 0;
    padding-right: 0;
    gap: 6px;
  }
  #levelScreen .uc-kind {
    font-size: 0.5rem;
    padding: 2px 8px;
  }
  #levelScreen .uc-rarity {
    font-size: 0.52rem;
    letter-spacing: 1.2px;
  }

  /* Emblem: refined "minted coin" look — solid rim + subtle outer glow, no
     puffy diffuse halo (which was reading as cheap on landscape). */
  #levelScreen .uc-emblem {
    width: 66px;
    height: 66px;
    align-self: center;
    border-radius: 18px;
    margin-top: 4px;
    background:
      radial-gradient(circle at 50% 35%,
        color-mix(in srgb, var(--upgrade-color, var(--cyan)) 78%, #0a0f16),
        color-mix(in srgb, var(--upgrade-color, var(--cyan)) 22%, #050810));
    box-shadow:
      inset 0 0 0 1.5px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 92%, transparent),
      0 0 0 4px rgba(8, 12, 18, 0.6),
      0 0 22px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 40%, transparent);
  }
  #levelScreen .uc-icon { width: 50px; height: 50px; }

  #levelScreen .uc-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  #levelScreen .uc-name {
    margin-top: 4px;
    font-size: 1.14rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #fbffff;
    text-shadow: 0 0 18px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 36%, transparent);
  }
  #levelScreen .uc-desc {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.32;
    min-height: 2.6em;        /* keeps cards visually aligned even with short text */
  }

  /* Combo row: centered, single row, more breathing room. */
  #levelScreen .uc-combo {
    justify-content: center;
    margin-top: 4px;
  }
  #levelScreen .combo-hint-row {
    justify-content: center;
    grid-template-columns: 42px auto;
  }
  #levelScreen .combo-hint-copy { text-align: left; }
  #levelScreen .uc-combo .combo-hint-row:nth-child(n+2) { display: none; }

  /* LV badge as a real "chip" pinned to the top-right of the card. */
  #levelScreen .uc-level {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 4px 9px;
    min-width: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 18%, rgba(3, 7, 9, 0.78));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 50%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  #levelScreen .uc-level span {
    color: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 60%, var(--muted));
    font-size: 0.46rem;
  }
  #levelScreen .uc-level b { font-size: 0.78rem; line-height: 1; }
}

/* compact landscape: tighter still */
@media (orientation: landscape) and (max-height: 520px) {
  .hud {
    top: calc(6px + var(--safe-top));
  }

  .hud-chip {
    min-height: 28px;
    padding: 2px 8px;
  }

  .hud-chip strong {
    font-size: 0.74rem;
  }

  .vital {
    height: 12px;
  }

  .vital.armor {
    height: 7px;
  }

  .mission-strip {
    top: calc(72px + var(--safe-top));
  }

  .achievement-popups {
    top: calc(78px + var(--safe-top));
    left: max(10px, var(--safe-left));
    width: 270px;
  }

  .level-panel {
    width: min(760px, calc(100vw - 26px));
    padding: 10px 12px;
  }
  #levelScreen .level-title { font-size: 1.1rem; }
  .level-panel .kicker { margin-bottom: 0; }

  #levelScreen .upgrade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
    max-height: none;
    gap: 10px;
    margin-top: 10px;
  }

  /* Short landscape height (phones) — the premium tall cards (≈230px) were being
     overlapped by the sticky reroll button. Compact every part so the 3 cards +
     title + button fit the ~400px height with room to spare. */
  #levelScreen .upgrade-card {
    min-height: 0;
    padding: 14px 12px 11px;
    gap: 7px;
  }
  #levelScreen .uc-emblem { width: 46px; height: 46px; margin-top: 2px; }
  #levelScreen .uc-icon { width: 34px; height: 34px; }
  #levelScreen .uc-name { font-size: 0.9rem; margin-top: 2px; }
  #levelScreen .uc-desc,
  #levelScreen .upgrade-card p {
    font-size: 0.68rem;
    line-height: 1.22;
    min-height: 0;       /* drop the 2.6em reserve that made cards tall */
  }
  #levelScreen .uc-combo { margin-top: 2px; }
  #levelScreen .uc-head { margin-bottom: 0; }
}

/* ===================== CLEARER MOBILE ACTION BUTTONS ===================== */
.mobile-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.mb-ico {
  width: 25px;
  height: 25px;
  color: var(--ink);
}

.mb-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
}

.mobile-button.dash {
  flex-direction: row;
  gap: 8px;
}

.mobile-button.dash .mb-ico {
  width: 26px;
  height: 26px;
  color: var(--cyan);
}

.mobile-button.dash .mb-label {
  font-size: 0.92rem;
  color: var(--cyan);
}

/* ===================== ORIENTATION CHOICE SCREEN ===================== */
.orient-panel {
  width: min(460px, 100%);
  text-align: center;
}

.orient-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.orient-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  border: 1px solid rgba(239, 253, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(239, 253, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.orient-btn:hover,
.orient-btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cyan);
  background: rgba(92, 231, 255, 0.08);
}

.orient-btn strong {
  font-size: 1rem;
  font-weight: 900;
}

.orient-ico {
  border: 2px solid var(--cyan);
  border-radius: 7px;
  box-shadow: 0 0 16px rgba(92, 231, 255, 0.25);
  position: relative;
}

.orient-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: rgba(92, 231, 255, 0.7);
  transform: translateX(-50%);
}

.orient-ico.portrait {
  width: 42px;
  height: 64px;
}

.orient-ico.landscape {
  width: 64px;
  height: 42px;
}

.orient-ico.landscape::after {
  bottom: 50%;
  left: auto;
  right: 5px;
  width: 3px;
  height: 14px;
  transform: translateY(50%);
}

/* ===================== TELEGRAM MINI APP INSETS ===================== */
/* Inside Telegram, env(safe-area-*) is unreliable and the device notch is
   already reported via the SDK (tg.js folds safeAreaInset + contentSafeAreaInset
   into --tg-*). Remap the shared --safe-* vars to those values so the WHOLE HUD
   stack shifts together by the same amount — no double-counting, no collisions. */
.tg-webapp {
  --safe-top: var(--tg-top, 0px);
  --safe-bottom: var(--tg-bottom, 0px);
  --safe-right: var(--tg-right, 0px);
  --safe-left: var(--tg-left, 0px);
}

/* ===================== HUD / CONTROLS REFINEMENT (v2) =====================
   - Top HUD on a single horizontal line (stats left, vitals right)
   - Objective + toasts sit a touch lower, clear of the top line
   - Touch joystick floats off the corner and is semi-transparent
   - Tighter bottom band so it doesn't eat the screen
   Appended last so it wins over the duplicated earlier rules. */

/* Top HUD: one line. */
.hud {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hud-row {
  flex: 1 1 auto;
  min-width: 0;
}
.hud-vitals {
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: clamp(118px, 20vw, 190px);
}

/* Objective strip + toasts a little lower, below the single-line HUD. */
.mission-strip { top: calc(56px + var(--safe-top)); }
.toast { top: calc(94px + var(--safe-top)); }

/* Floating, semi-transparent touch joystick. */
.move-stick {
  opacity: 0.28;
}
.move-stick:active,
.move-stick.active,
.move-stick.floating {
  opacity: 0.76;
}

/* Portrait phones */
@media (max-width: 560px) {
  /* The single-row HUD is cramped in portrait — the wide Cyrillic font on iOS was
     crushing the weapon/ammo chip down to "Р / 3". Slim the vitals + chip padding
     and guarantee the weapon chip a readable minimum width. */
  .hud-vitals { width: clamp(80px, 22vw, 114px); }
  .hud-chip { padding: 3px 7px; }
  .hud-weapon { min-width: 70px; }
  .hud-weapon strong { font-size: 0.68rem; }
  .hud-weapon span { font-size: 0.55rem; }
  .mission-strip { top: calc(54px + var(--safe-top)); }
  .toast { top: calc(90px + var(--safe-top)); }
  .mobile-controls {
    height: 86px;
    bottom: calc(12px + var(--safe-bottom));
  }
  .move-stick {
    left: clamp(18px, 6vw, 40px);
    bottom: clamp(18px, 6vh, 40px);
  }
  .mobile-actions { bottom: clamp(8px, 3vh, 22px); }
}

/* Landscape phones — the primary play orientation */
@media (orientation: landscape) and (max-height: 520px) {
  /* Desktop keyboard-hints card has no place on a phone. The existing
     (pointer: coarse) / (max-width: 850px) hides miss landscape phones because the
     iOS Simulator (and some devices) report a fine pointer and landscape width is
     >850px — so hide it on the reliable phone-landscape signal too. */
  .corner-help { display: none; }

  /* BUG A: the rounded screen corner / Dynamic-Island notch sits on the LEFT in
     landscape, and the base .hud hardcodes left:10px (no safe-area) — so the
     first ВРЕМЯ chip gets shaved by the curve. Push the whole HUD past the inset
     (collapses back to 10px when there's no inset, e.g. portrait/tablet/Telegram).
     BUG B: the floating 42px pause button is anchored at right:calc(safe-right+12px),
     but the right gutter was a flat 58px that ignored safe-right, so the right-pinned
     HP/armor vitals could slide under it. Track safe-right on both the edge and the
     gutter so the bars always stop before the button. */
  .hud {
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
  }
  body[data-game-state="playing"] .hud {
    padding-right: calc(58px + var(--safe-right));
  }
  .mission-strip { top: calc(48px + var(--safe-top)); }
  .toast { top: calc(78px + var(--safe-top)); }
  .mobile-controls {
    height: 88px;
    bottom: calc(8px + var(--safe-bottom));
  }
  .move-stick {
    left: clamp(26px, 5vw, 60px);
    bottom: clamp(24px, 12vh, 54px);
    width: 100px;
    height: 100px;
  }
  .mobile-actions { bottom: clamp(10px, 6vh, 30px); }

  /* Result screens (game over / victory) in short landscape. The portrait layout
     — big title, 2-col stat grid, VERTICAL button stack — runs ~490px tall and
     pushed the action buttons below the fold (you had to scroll to reach them).
     Compact the header, lay the stats in ONE horizontal row and the buttons in a
     wrapping row, and let the panel scroll as a safety net so every button is
     reachable. Scoped to these two screens so the main menu / level-up are
     untouched. */
  #gameOverScreen,
  #victoryScreen {
    overflow-y: auto;
    align-content: center;
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  }
  #gameOverScreen .result-panel,
  #victoryScreen .result-panel {
    width: min(720px, 100%);
    padding: 14px 22px 16px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  #gameOverScreen .kicker,
  #victoryScreen .kicker {
    margin-bottom: 3px;
    font-size: 0.68rem;
  }
  #gameOverScreen .result-title,
  #victoryScreen .result-title {
    font-size: 1.4rem;
    line-height: 1.05;
  }
  #gameOverScreen .result-hero,
  #victoryScreen .result-hero { margin-top: 8px; }
  #gameOverScreen .rh-score,
  #victoryScreen .rh-score { font-size: clamp(2.1rem, 6vw, 2.8rem); }
  #gameOverScreen .result-stats,
  #victoryScreen .result-stats { margin-top: 10px; }
  #gameOverScreen .result-stats span,
  #victoryScreen .result-stats span { padding: 7px 6px; }
  #gameOverScreen .result-stats b,
  #victoryScreen .result-stats b { font-size: 1rem; }
  #gameOverScreen .result-reward,
  #victoryScreen .result-reward {
    margin: 9px 0 0;
  }
  #gameOverScreen .menu-buttons,
  #victoryScreen .menu-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  #gameOverScreen .menu-buttons > *,
  #victoryScreen .menu-buttons > * {
    flex: 1 1 auto;
    width: auto;
    min-width: 140px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    font-size: 0.86rem;
  }
}

/* ===================== FIRST-RUN ONBOARDING ===================== */
.tutorial-hint {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom));
  background: radial-gradient(circle at 50% 45%, rgba(4, 8, 12, 0.5), rgba(2, 4, 6, 0.82));
  animation: tut-fade 240ms ease both;
}
.tutorial-hint.active { display: flex; }
@keyframes tut-fade { from { opacity: 0; } to { opacity: 1; } }
.tut-card {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: 1px solid rgba(92, 231, 255, 0.4);
  border-radius: 16px;
  background: var(--panel-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(92, 231, 255, 0.12);
  text-align: left;
}
.tut-card h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  background: linear-gradient(135deg, #effdff, var(--cyan) 60%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tut-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tut-card li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
.tut-card li::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--cyan);
  font-weight: 900;
}
.tut-card li b { color: var(--ink); }
.tut-card .primary-button { width: 100%; margin-top: 18px; }

/* Accessibility: honour the OS "reduce motion" preference for UI animations
   (camera shake / particles are damped in JS). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ship-grid-glow { animation: none !important; }
}


/* ===== Frameless menu pass ===== */
/* Append at END of styles.css. Scoped under .menu-overlay (and standalone
   overlays) so it wins on specificity + source order. Every removed border is
   compensated by a stronger fill and/or soft shadow to preserve contrast. */
:root {
  --fl-fill: rgba(239, 253, 255, 0.06);
  --fl-fill-strong: rgba(8, 14, 20, 0.72);
  --fl-control: rgba(239, 253, 255, 0.10);
  --fl-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  --fl-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --fl-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --fl-radius: 14px;
  --fl-divider: linear-gradient(90deg, transparent, rgba(239,253,255,0.10) 50%, transparent);
  --fl-glow-cyan: 0 0 22px rgba(92, 231, 255, 0.14);
}

/* (1) AMBIENT SHELL — outer subscreen panels lose box border + directional
   gradient and blend into the menu nebula. #mainMenu already overrides its own
   look, so this only reshapes the subscreens. */
.menu-overlay .panel {
  border: none;
  /* Fully transparent — no floating "box". The screen IS the section: content
     floats on the overlay's dark veil + nebula, structured by the sticky header
     and the cards' own soft fills. */
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
/* Info screens (left-aligned controls, empty right column) let the animated
   nebula punch through as a stray bright ring. Darken the FULL-SCREEN veil
   (not a panel box — keeps the frameless look) so the ambiance stays subtle. */
/* Every menu SUB-screen gets an even, near-solid dark background. This covers the
   animated menu canvas almost entirely (so no bright nebula spot can punch through
   ANYWHERE) and gives the sticky header a matching tone to blend into (so no black
   band). The MAIN menu (#mainMenu) is excluded — it stays the animated showcase. */
/* #locationScreen is intentionally EXCLUDED — the sector map shows the live cosmic
   background (its own light scrim is defined above), so it must NOT get the near-solid
   veil that the other sub-screens use to mask the menu canvas. */
#hangarScreen.menu-overlay, #baseScreen.menu-overlay, #rewardsScreen.menu-overlay,
#passScreen.menu-overlay, #achievementsScreen.menu-overlay, #shopScreen.menu-overlay,
#profileScreen.menu-overlay, #settingsScreen.menu-overlay,
#howtoScreen.menu-overlay, #orientationScreen.menu-overlay {
  background: rgba(6, 10, 15, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Sticky header: tinted to the SAME tone as the (now even, near-solid) screen
   background, so it blends in instead of reading as a separate black plate — yet it
   still obscures cards that scroll under it. Soft fade at the bottom = no hard edge.
   The "чёрная плашка сверху" came from an opaque-dark header sitting on a translucent
   veil; matching the tones removes the band. */
.menu-overlay .panel-head {
  background: linear-gradient(180deg, rgba(6, 10, 15, 0.97) 0%, rgba(6, 10, 15, 0.86) 60%, rgba(6, 10, 15, 0) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.menu-overlay .panel-head h2 { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
/* Persistent currency balance, injected into every section header (right side). */
/* The balance is a <button> — MUST reset the native control chrome or iOS WKWebView
   paints a light/grey button box around the pills (the "белый блок"). */
.head-balance {
  margin-left: auto; display: flex; gap: 7px; flex: 0 0 auto;
  -webkit-appearance: none; appearance: none;
  background: none; border: none; padding: 0; margin-top: 0; cursor: pointer;
}
.head-balance .hb-cell {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-weight: 900; font-size: 0.82rem; color: var(--ink); white-space: nowrap;
}
.head-balance .hb-cell.cores { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 34%, transparent), 0 0 10px color-mix(in srgb, var(--cyan) 12%, transparent); }
.head-balance .hb-cell.prisms { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent), 0 0 10px color-mix(in srgb, var(--gold) 14%, transparent); }
.head-balance .hb-cell i { font-style: normal; }
.head-balance .hb-cell.cores i { color: var(--cyan); }
.head-balance .hb-cell.prisms i { color: var(--gold); }
.menu-overlay .panel-head h2 { min-width: 0; }
@media (max-width: 440px) {
  .head-balance { gap: 4px; }
  .head-balance .hb-cell { padding: 3px 6px; font-size: 0.58rem; gap: 3px; }
  .head-balance .hb-cell i { font-size: 0.66rem; }
  .menu-overlay .panel-head { gap: 6px; }
  .menu-overlay .back-button { padding: 7px 10px; font-size: 0.8rem; }
  /* Keep the title from shoving the balance off-screen on narrow phones —
     but compact the chrome first so titles never need to ellipsis. */
  .menu-overlay .panel-head h2 { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Base header packs back + ship dock + balance — shrink the dock preview so
     "Корпус Mk-N" never wraps or collides with the balance. */
  /* Narrow base header is space-starved (back + thumbnail + dock text + balance).
     Drop the decorative thumbnail (the body shows the ship big) and the
     next-upgrade hint so "Корпус Mk-N" / "Сила X/Y" get the full row and never
     truncate (audit P0: they were overlapping the balance / clipping to "Кор"). */
  .base-dock-head .ship-stage.dock { display: none; }
  .base-dock-head .ship-dock-info b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
  .base-dock-head .ship-dock-info small { display: none; }
  .base-dock-head .base-ship-dock { min-width: 0; }
  .base-dock-head.panel-head { gap: 10px; }
}

/* (3) SOFT CONTROL — back button: fill + soft shadow, no outline. */
.menu-overlay .back-button {
  border: none;
  background: var(--fl-control);
  box-shadow: var(--fl-shadow-sm);
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.menu-overlay .back-button:hover,
.menu-overlay .back-button:focus-visible {
  background: rgba(92, 231, 255, 0.16);
  box-shadow: 0 6px 16px rgba(92, 231, 255, 0.20);
}

/* (2) SOFT GROUP — profile hero / stat tiles / rewards road. */
.menu-overlay .profile-hero {
  border: none;
  box-shadow: var(--fl-inset), 0 12px 32px rgba(92, 231, 255, 0.12);
}
.menu-overlay .pstat {
  border: none;
  background: var(--fl-fill-strong);
  box-shadow: var(--fl-shadow-sm);
}
.menu-overlay .rw-card {
  border: none;
  background: var(--fl-fill-strong);
  box-shadow: var(--fl-shadow-sm);
}
.menu-overlay .rw-node.claimable .rw-card {
  border: none;
  background:
    linear-gradient(150deg, rgba(92, 231, 255, 0.18), rgba(8, 14, 20, 0.82));
  box-shadow: 0 8px 22px rgba(92, 231, 255, 0.20);
}
/* Softer progress track (less boxed). */
.menu-overlay .dstat-bar {
  background: linear-gradient(90deg, rgba(92, 231, 255, 0.06), rgba(92, 231, 255, 0.02));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* Location select cards + difficulty chips. */
.menu-overlay .select-panel .loc-card,
.menu-overlay .loc-card {
  border: none;
  background: var(--fl-fill);
  box-shadow: var(--fl-shadow);
}
.menu-overlay .loc-card:hover {
  box-shadow: 0 12px 32px rgba(92, 231, 255, 0.22);
}
.menu-overlay .loc-diff {
  border: none;
  background: color-mix(in srgb, var(--diff-color, var(--cyan)) 20%, rgba(239, 253, 255, 0.08));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* (2) Generic content cards + summary tiles across achievements/base/hangar/shop. */
.menu-overlay .achievement-card,
.menu-overlay .meta-card,
.menu-overlay .operation-card,
.menu-overlay .campaign-card,
.menu-overlay .weapon-card,
.menu-overlay .cosmetic-card,
.menu-overlay .achievements-summary div,
.menu-overlay .base-summary div,
.menu-overlay .hangar-summary div {
  border: none;
  /* Canonical debox: glassy gradient + inset hairline, no dark fill / black drop. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.menu-overlay .weapon-card:hover,
.menu-overlay .cosmetic-card:hover,
.menu-overlay .achievement-card:hover {
  box-shadow: 0 12px 32px rgba(92, 231, 255, 0.20);
}
/* Premium cosmetic: keep gradient identity via glow, drop the gold stroke. */
.menu-overlay .cosmetic-card.premium {
  border: none;
  box-shadow: var(--fl-shadow), 0 0 26px rgba(255, 209, 102, 0.16);
}

/* Inner icon badges — soft inset/outer glow instead of outline. */
.menu-overlay .achievement-icon {
  border: none;
  box-shadow:
    inset 0 2px 8px rgba(239, 253, 255, 0.08),
    0 6px 16px color-mix(in srgb, var(--achievement-color, var(--cyan)) 30%, transparent);
}
.menu-overlay .achievement-icon::before {
  border: none;
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--achievement-color, var(--cyan)) 24%, transparent);
}
.menu-overlay .meta-icon {
  border: none;
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, var(--meta-color, var(--cyan)) 8%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.25);
}
.menu-overlay .weapon-top span,
.menu-overlay .meta-top span,
.menu-overlay .cosmetic-swatch {
  border: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20), 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Tech tree cells — keep gradient + left rail accent, drop the stroke. */
.menu-overlay .tech-cell {
  border: none;
  box-shadow:
    inset 0 2px 8px color-mix(in srgb, var(--meta-color, var(--cyan)) 12%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.30);
}

/* Cosmetic preview panes — radial gradient stays, edge becomes soft inset. */
.menu-overlay .cosmetic-preview,
.menu-overlay .cosmetic-card.premium .cosmetic-preview {
  border: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20);
}

/* Base screen: ship preview, ship stage, tabs. */
.menu-overlay .ship-preview {
  border: none;
  box-shadow: inset 0 2px 8px rgba(92, 231, 255, 0.08), 0 8px 20px rgba(92, 231, 255, 0.14);
}
.menu-overlay .ship-stage {
  border: none;
  box-shadow: inset 0 0 24px rgba(92, 231, 255, 0.05), 0 6px 24px rgba(0, 0, 0, 0.24);
}
.menu-overlay .base-tab:not(.active) {
  border: none;
  background: rgba(239, 253, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.06);
}
.menu-overlay .base-tab.active { border: none; }

/* Hangar skins. */
.menu-overlay .skin-hero {
  border: none;
}
.menu-overlay .skin-cell-frame {
  border: none;
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--rar, var(--cyan)) 14%, transparent);
}
.menu-overlay .skin-cell.selected .skin-cell-frame {
  box-shadow:
    inset 0 0 0 2px var(--rar, var(--cyan)),
    inset 0 0 12px color-mix(in srgb, var(--rar, var(--cyan)) 22%, transparent);
}
.menu-overlay .skin-cell-cost {
  border: none;
  background: rgba(4, 8, 12, 0.82);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rar, var(--cyan)) 25%, transparent);
}
.menu-overlay .skin-actionbar {
  border: none;
  background: rgba(10, 15, 18, 0.80);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}
.menu-overlay .mini-button {
  border: none;
}

/* Shop (IAP + offers + balance). */
.menu-overlay .sb-cell {
  border: none;
  background: rgba(8, 14, 20, 0.80);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), var(--fl-inset);
}
.menu-overlay .shop-card {
  border: none;
  box-shadow: 0 6px 20px rgba(255, 209, 102, 0.10), var(--fl-inset);
}
.menu-overlay .shop-card.noads {
  border: none;
  box-shadow: 0 6px 20px rgba(92, 231, 255, 0.10), var(--fl-inset);
}
.menu-overlay .shop-ico {
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 24%, transparent);
}
.menu-overlay .shop-card.noads .shop-ico {
  box-shadow: 0 0 14px rgba(92, 231, 255, 0.28);
}
.menu-overlay .shop-offer {
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24), var(--fl-inset);
}
.menu-overlay .shop-offer.prisms {
  border: none;
  box-shadow: 0 8px 24px rgba(255, 209, 102, 0.14), var(--fl-inset);
}
.menu-overlay .shop-offer.featured {
  border: none;
  box-shadow: 0 12px 28px rgba(255, 209, 102, 0.22), inset 0 1px 6px rgba(255, 209, 102, 0.10);
}

/* How-to: hard bottom-border rows -> faded center divider; guide cards softened. */
.menu-overlay .howto-row {
  border-bottom: none;
  background: var(--fl-divider);
}
.menu-overlay .guide-skill,
.menu-overlay .guide-combo {
  border: none;
  background:
    linear-gradient(135deg, rgba(92, 231, 255, 0.08), transparent 54%),
    rgba(239, 253, 255, 0.03);
  box-shadow: var(--fl-shadow-sm);
}

/* Main-menu top bar + rails (already mostly full-bleed; remove residual strokes). */
.menu-overlay .topstat,
.menu-overlay .icon-btn,
.menu-overlay .rail-btn {
  border: none;
}
.menu-overlay .topstat { box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.16); }
.menu-overlay .icon-btn { box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.05), 0 0 14px rgba(92, 231, 255, 0.08); }
.menu-overlay .rail-btn { box-shadow: inset 0 0 0 1px rgba(239, 253, 255, 0.05), 0 6px 24px rgba(0, 0, 0, 0.28); }

/* In-game skill pill is shared with menus; drop its stroke too. */
.menu-overlay .skill-pill { border: none; box-shadow: 0 0 18px color-mix(in srgb, var(--skill-color, var(--cyan)) 24%, transparent); }

/* Detail modal lives in a standalone .overlay (NOT .menu-overlay): target by class. */
.detail-card {
  border: none;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 8px color-mix(in srgb, var(--detail-color, var(--cyan)) 15%, transparent);
}
.detail-close {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}
/* ===== Landscape subscreens (placed last so it wins source-order) ===== */
/* Short landscape height makes portrait-tall panels overflow; compact heroes
   and widen grids so info fits on one screen. Selectors are scoped under
   .menu-overlay / .shop-grid to beat the base single-class rules. */
@media (orientation: landscape) and (max-height: 600px) {
  .menu-overlay .panel { padding: 12px 16px; }
  .menu-overlay .panel-head { margin-bottom: 8px; }
  .menu-overlay .panel-head h2 { font-size: 1.3rem; }
  .menu-overlay .back-button { padding: 8px 14px; }

  /* Profile: short horizontal hero banner + all 12 stats in a wide 6-col grid. */
  .menu-overlay .profile-hero { flex-direction: row; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 10px; }
  .menu-overlay .profile-ship { width: 120px; height: 100px; flex: 0 0 auto; }
  .menu-overlay .profile-best { font-size: 1.9rem; }
  .menu-overlay .profile-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .menu-overlay .pstat { padding: 7px 9px; }
  .menu-overlay .pstat b { font-size: 0.95rem; }
  .menu-overlay .pstat span { font-size: 0.5rem; }

  /* Shop: more featured columns + tighter offers. */
  /* 4 daily cards must fit ONE landscape row, else the 4th card + the exchange
     row + IAP note fall below the fold (audit P0). */
  .shop-grid .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-grid .shop-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Shorter daily cards so the whole card (incl. the buy/status pill) fits the short
     landscape viewport instead of clipping at the bottom. */
  .shop-grid .feat-art { height: 60px; }
  .shop-grid .feat-card { padding: 8px 8px 10px; gap: 2px; }
  .shop-grid .feat-name { font-size: 0.82rem; }
  .shop-grid .feat-rar { font-size: 0.56rem; }
  .shop-grid .feat-cat { margin-bottom: 2px; }
  .shop-grid .feat-buy { min-height: 32px; }

  /* Summary tiles pack into more columns; achievement cards 3-up on landscape. */
  .menu-overlay .achievements-summary,
  .menu-overlay .base-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-overlay .hangar-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-overlay .achievements-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Single PLAY button (it carries the sector kicker + name + NEW itself). */
  .play-cta { padding: 10px 20px; }

  /* Skin showcase: big hero on the left, tabs + grid + action on the right. */
  .menu-overlay .skin-select {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    /* Tabs as their own full-width row on top so they never tuck under the
       header's balance pill; hero (left) + grid/action (right) below. */
    grid-template-areas: "tabs tabs" "hero grid" "hero action";
    grid-template-rows: auto 1fr auto;
    column-gap: 14px;
    row-gap: 10px;
    align-items: stretch;
  }
  .menu-overlay .skin-hero { grid-area: hero; min-height: 210px; }
  .menu-overlay .skin-hero-canvas { height: 100%; min-height: 200px; }
  .menu-overlay .skin-tabs { grid-area: tabs; }
  .menu-overlay .skin-grid { grid-area: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }
  .menu-overlay .skin-actionbar { grid-area: action; }
}

/* ===== Premium tactile pass (Brawl-Stars-grade depth on interactive elements) =====
   Content cards stay soft/frameless; BUTTONS get physical depth: top gloss
   highlight + an extruded bottom "thickness" + drop shadow, and press DOWN into
   the surface on :active. Our dark sci-fi palette, their tactility. */

/* Left/right rail buttons — chunky pressable tiles. */
.menu-overlay .rail-btn {
  border: none;
  background: linear-gradient(180deg, rgba(48, 70, 88, 0.97) 0%, rgba(22, 34, 45, 0.98) 52%, rgba(11, 17, 25, 1) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 5px 0 rgba(5, 9, 14, 0.92),
    0 12px 16px rgba(0, 0, 0, 0.45);
  transition: transform 90ms ease, box-shadow 90ms ease, background 140ms ease;
}
.menu-overlay .rail-btn:hover {
  background: linear-gradient(180deg, rgba(58, 84, 104, 0.98) 0%, rgba(26, 40, 52, 0.98) 52%, rgba(13, 20, 28, 1) 100%);
}
.menu-overlay .rail-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(5, 9, 14, 0.92),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
/* Vivid icon tile with inner gloss + glow. */
.menu-overlay .rail-ico {
  background: radial-gradient(circle at 50% 32%, rgba(92, 231, 255, 0.42), rgba(92, 231, 255, 0.1) 78%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), inset 0 0 12px rgba(92, 231, 255, 0.18), 0 0 14px rgba(92, 231, 255, 0.22);
  color: #eafdff;
}
/* Bolder strokes + round joins so the line-art rail icons read chunkier (closer
   to BS's filled icons) without redrawing each glyph. */
.menu-overlay .rail-ico svg path,
.menu-overlay .rail-ico svg rect,
.menu-overlay .rail-ico svg circle { stroke-width: 2.45px; stroke-linecap: round; stroke-linejoin: round; }
.menu-overlay .rail-btn.accent-gold .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(255, 209, 102, 0.5), rgba(255, 209, 102, 0.12) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 209, 102, 0.3); color: #fff4d6; }
.menu-overlay .rail-btn.accent-prism .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(181, 92, 255, 0.5), rgba(181, 92, 255, 0.12) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(181, 92, 255, 0.3); color: #f0e2ff; }
/* Brawl-Stars-style: every rail destination gets its OWN vivid icon colour so the
   menu reads as a colourful set of distinct buttons, not a row of identical cyan. */
.menu-overlay .rail-btn.accent-green .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(125, 255, 133, 0.48), rgba(125, 255, 133, 0.1) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.32), 0 0 14px rgba(125, 255, 133, 0.28); color: #e6ffe8; }
.menu-overlay .rail-btn.accent-pink .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(255, 79, 216, 0.46), rgba(255, 79, 216, 0.1) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(255, 79, 216, 0.28); color: #ffe2f8; }
.menu-overlay .rail-btn.accent-amber .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(255, 138, 61, 0.48), rgba(255, 138, 61, 0.1) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.32), 0 0 14px rgba(255, 138, 61, 0.28); color: #ffe7d4; }
.menu-overlay .rail-btn.accent-info .rail-ico { background: radial-gradient(circle at 50% 32%, rgba(120, 165, 255, 0.44), rgba(120, 165, 255, 0.1) 78%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(120, 165, 255, 0.26); color: #dde7ff; }
/* Per-accent hover edge tints so the press also reads in-colour. */
.menu-overlay .rail-btn.accent-green:hover { border-color: rgba(125, 255, 133, 0.5); }
.menu-overlay .rail-btn.accent-pink:hover { border-color: rgba(255, 79, 216, 0.5); }
.menu-overlay .rail-btn.accent-amber:hover { border-color: rgba(255, 138, 61, 0.5); }
.rail-l { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* Currency / score chips — glossy, slightly raised. */
.menu-overlay .topstat {
  background: linear-gradient(180deg, rgba(18, 30, 40, 0.96), rgba(8, 14, 20, 0.97));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.5), 0 8px 14px rgba(0, 0, 0, 0.3);
}
.menu-overlay .topstat.buy:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.5); }
.menu-overlay .icon-btn {
  background: linear-gradient(180deg, rgba(18, 30, 40, 0.96), rgba(8, 14, 20, 0.97));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.5), 0 8px 14px rgba(0, 0, 0, 0.3);
}

/* PLAY — the hero action: thick green button that presses down. */
.menu-overlay .play-cta {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 6px 0 #1b7a4d,
    0 16px 26px rgba(54, 247, 255, 0.28);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 140ms ease;
}
.menu-overlay .play-cta:hover { filter: brightness(1.06); }
.menu-overlay .play-cta:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 #1b7a4d,
    0 5px 12px rgba(54, 247, 255, 0.24);
}
.play-cta .play-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* Hero ship pedestal — a glowing platform so the ship reads as "on stage". */
.menu-hero { position: relative; overflow: visible; }
/* Tall radial halo behind the hero so it pops off the nebula (compositor-only). */
.menu-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 78%;
  max-width: 380px;
  height: 70%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(92, 231, 255, 0.18), transparent 66%),
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(181, 92, 255, 0.10), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: heroBreathe 4s ease-in-out infinite;
}
/* (Removed the vertical spotlight cone — it read as a stray beam "from nowhere"
   above the hero. The soft ::before halo alone grounds the ship.) */
@keyframes heroBreathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-hero::before { animation: none; } }
.menu-ship { position: relative; z-index: 1; }

/* Tactile CTAs — chunky "press down" on every action button (cyan/gold/green
   alike): top gloss + a dark bottom "thickness" + drop shadow, neutral so it
   works over any button colour. */
.feat-buy, .ex-buy, .pt-claim, .rw-claim, .detail-cta, .pass-prem-buy,
.menu-buttons .primary-button, .shop-buy, .skin-action-btn {
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.42), 0 4px 0 rgba(4, 10, 16, 0.55), 0 9px 14px rgba(0, 0, 0, 0.32);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 140ms ease;
}
.feat-buy:active, .ex-buy:active, .pt-claim:active, .rw-claim:active, .detail-cta:active,
.pass-prem-buy:active, .menu-buttons .primary-button:active, .shop-buy:active, .skin-action-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.36), 0 1px 0 rgba(4, 10, 16, 0.55), 0 3px 7px rgba(0, 0, 0, 0.3);
}

/* ===== Loading / splash (game title lives here, not in the menu) ===== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  opacity: 1;
  background: #04080f;
  transition: opacity 650ms ease;
  overflow: hidden;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 58% at 50% 36%, rgba(92, 231, 255, 0.20), transparent 60%),
    radial-gradient(72% 55% at 80% 76%, rgba(181, 92, 255, 0.18), transparent 62%),
    radial-gradient(64% 52% at 18% 72%, rgba(125, 255, 160, 0.12), transparent 60%),
    linear-gradient(180deg, #06101c 0%, #04080f 60%, #03060b 100%);
  animation: splashPulse 5s ease-in-out infinite;
}
.splash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 24px;
}
.splash-mark {
  width: 62px;
  height: 62px;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(92, 231, 255, 0.6));
  animation: splashFloat 3s ease-in-out infinite;
}
.splash-mark svg { width: 100%; height: 100%; }
.splash-title {
  margin: 0;
  font-size: clamp(2.6rem, 13vw, 5rem);
  font-weight: 950;
  letter-spacing: 1px;
  line-height: 1;
  background: linear-gradient(120deg, var(--green), var(--cyan) 55%, var(--blue, #7aa8ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 36px rgba(92, 231, 255, 0.32));
}
.splash-sub {
  margin: 4px 0 0;
  font-size: clamp(0.78rem, 3.4vw, 1.05rem);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 800;
  opacity: 0.85;
}
/* Interactive loader: a little ship shoots the progress bar full (canvas-drawn). */
.splash-load-canvas { margin-top: 12px; width: min(360px, 88vw); aspect-ratio: 360 / 124; height: auto; }
@keyframes splashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes splashPulse { 0%, 100% { filter: brightness(0.92); } 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .splash-mark, .splash-bg { animation: none; } }

/* ===== Debox pass (10-agent audit): glassy cards, zero dark plates / hard
   borders / black drop-shadows. The tactile rail/PLAY buttons are intentionally
   left extruded — they are not the "dark boxes" being cleaned. ===== */
.menu-overlay .rw-card,
.menu-overlay .pt-cell,
.menu-overlay .sb-cell,
.menu-overlay .feat-lock,
.menu-overlay .pass-head {
  border: none;
  /* Season banner keeps its identity (purple → cyan) — it's a feature hero, not a
     generic tile, so it opts out of the flat debox. */
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, #b55cff 22%, transparent), transparent 58%),
    radial-gradient(120% 130% at 100% 100%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 55%),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #b55cff 24%, var(--line));
}
.menu-overlay .pt-cell.prem { background: linear-gradient(180deg, rgba(255, 209, 102, 0.1), rgba(255, 209, 102, 0.02)); }
/* Shop daily cards — keep rarity ring/glow, drop the dark plate. */
.menu-overlay .feat-card {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rar, var(--cyan)) 20%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--cyan)) 42%, transparent), 0 0 22px color-mix(in srgb, var(--rar, var(--cyan)) 16%, transparent);
}
.menu-overlay .feat-card.rarity-epic,
.menu-overlay .feat-card.rarity-legendary {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rar) 65%, transparent), inset 0 0 20px color-mix(in srgb, var(--rar) 18%, transparent), 0 0 26px color-mix(in srgb, var(--rar) 26%, transparent);
}
/* Cores→prisms exchange bar — soft glass + faint violet accent. */
.menu-overlay .ex-row {
  border: none;
  background: linear-gradient(135deg, rgba(181, 92, 255, 0.07), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Base tech-tree cells — accent-tinted glass, not a dark box. */
.menu-overlay .tech-cell {
  border: none;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--meta-color, var(--cyan)) 14%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 2px 10px color-mix(in srgb, var(--meta-color, var(--cyan)) 10%, transparent);
}
/* Ship command-dock canvas frame (base header) — glass grid, no dark inset box. */
.menu-overlay .ship-stage {
  border: none;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--ship-core, var(--cyan)) 18%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.025);
}
/* Pattern B — accent-state cards: soft inset ring + glow, no hard colored border. */
.menu-overlay .weapon-card.unlocked,
.menu-overlay .cosmetic-card.unlocked {
  border: none;
  background: radial-gradient(circle at 0% 0%, rgba(125, 255, 133, 0.1), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px rgba(125, 255, 133, 0.16);
}
.menu-overlay .weapon-card.equipped,
.menu-overlay .cosmetic-card.equipped {
  border: none;
  background: radial-gradient(circle at 0% 0%, rgba(255, 209, 102, 0.12), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.16), inset 0 0 0 1px rgba(255, 209, 102, 0.26);
}
/* Settings segmented control — soft glass track (active pill keeps its gradient). */
.segment {
  border: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

/* ===================================================================
   XB DESIGN SYSTEM — canonical components (menu redesign).
   Every component reads its colour from a per-element --ctx var, so the
   screens share one language while staying colourful.
   =================================================================== */

/* Global reduced-motion safety (was entirely missing). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* SECTION HEADER — name + count chip + gradient rule + colored left bar. */
.xb-sect { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.xb-sect::before { content: ""; width: 3px; height: 1.05em; border-radius: 2px; background: var(--ctx); box-shadow: 0 0 8px color-mix(in srgb, var(--ctx) 60%, transparent); flex: 0 0 auto; }
.xb-sect b { font-size: var(--fz-h2); font-weight: 900; color: var(--ink); letter-spacing: 0.2px; }
.xb-sect .xb-count { font-size: var(--fz-meta); font-weight: 900; letter-spacing: 0.06em; color: var(--muted); padding: 2px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); }
.xb-sect .xb-rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ctx) 55%, transparent), transparent); }

/* CARD — accent-driven glass tile (replaces flat dark tiles). */
.xb-card {
  position: relative; border: none; border-radius: var(--r-card);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ctx) 13%, transparent), transparent 55%), var(--panel-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctx) 26%, var(--line));
  transition: transform 130ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}
.xb-card:active { transform: scale(0.97); }
.xb-card.is-selected, .xb-card.is-recommended { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--ctx), 0 0 20px color-mix(in srgb, var(--ctx) 30%, transparent); }
.xb-card.is-locked { opacity: 0.6; filter: grayscale(0.15); }
.xb-card.is-done { opacity: 0.6; }

/* SEGMENTED CONTROL — category/filter tabs. */
.xb-seg { display: flex; gap: var(--s1); padding: var(--s1); border-radius: var(--r-card); background: rgba(239, 253, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); overflow-x: auto; scrollbar-width: none; }
.xb-seg::-webkit-scrollbar { display: none; }
.xb-seg button { position: relative; flex: 1 0 auto; min-height: 40px; padding: 7px 12px; border: none; border-radius: 11px; background: transparent; color: var(--muted); font-size: var(--fz-label); font-weight: 900; letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; transition: color 140ms ease, background 160ms ease, box-shadow 160ms ease; }
.xb-seg button .xb-seg-dot { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.xb-seg button.active { color: var(--ink); background: color-mix(in srgb, var(--ctx) 16%, transparent); box-shadow: inset 0 0 0 1px var(--ctx), 0 0 14px color-mix(in srgb, var(--ctx) 30%, transparent); }
.xb-seg button:active { transform: scale(0.96); }

/* CTA — tactile primary button (always the loudest, recolours to --ctx). */
.xb-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 48px; padding: 0 var(--s4); border: none; border-radius: 12px;
  font-size: var(--fz-label); font-weight: 950; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer;
  color: #04130b;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ctx) 92%, #fff 8%), var(--ctx));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ctx) 50%, #000), 0 10px 22px color-mix(in srgb, var(--ctx) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 140ms ease;
}
.xb-cta:hover { filter: brightness(1.05); }
.xb-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ctx) 50%, #000), 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.xb-cta.is-buy { --ctx: var(--gold); }
.xb-cta:disabled { background: rgba(255, 255, 255, 0.07); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); cursor: default; transform: none; }
/* EQUIPPED / SELECTED state — a confident accent badge, NOT a dead grey plate. Wins
   over :disabled so "Надето"/"Выбрано" reads as an owned state with a check. */
.xb-cta.is-on, .xb-cta.is-on:disabled {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ctx) 26%, transparent), color-mix(in srgb, var(--ctx) 12%, transparent));
  color: var(--ctx); box-shadow: inset 0 0 0 1.5px var(--ctx), 0 0 16px color-mix(in srgb, var(--ctx) 22%, transparent);
  cursor: default; transform: none; text-shadow: 0 1px 6px color-mix(in srgb, var(--ctx) 40%, #000);
}
.xb-cta.is-on::before { content: "✓"; font-size: 0.9em; margin-right: 2px; }
.xb-cta svg { width: 20px; height: 20px; }

/* HERO STAGE — the focal preview every screen needs. */
.xb-stage {
  position: relative; width: 100%; border-radius: var(--r-hero); overflow: hidden;
  background: radial-gradient(ellipse at 50% 64%, color-mix(in srgb, var(--ctx) 18%, transparent), var(--bg) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.xb-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(4, 8, 12, 0.9), transparent 55%); }
.xb-stage > canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 0; }
.xb-stage-info { position: absolute; left: var(--s4); bottom: var(--s3); right: var(--s4); z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.xb-stage-info .xb-ribbon { align-self: flex-start; font-size: var(--fz-micro); font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); color: var(--ctx); background: color-mix(in srgb, var(--ctx) 20%, transparent); box-shadow: inset 0 0 0 1px var(--ctx); }
.xb-stage-info .xb-stage-name { font-size: clamp(1.02rem, 4.3vw, 1.34rem); font-weight: 950; color: var(--ink); text-shadow: 0 2px 12px #000; line-height: 1.08; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-stage-info .xb-stage-sub { font-size: clamp(0.72rem, 2.9vw, 0.86rem); color: var(--muted); text-shadow: 0 1px 6px #000; line-height: 1.26; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Open-reveal stagger (apply .xb-reveal to a grid; cells fade-up). */
@keyframes xbRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.xb-reveal > * { animation: xbRise 360ms cubic-bezier(.2,.8,.2,1) backwards; }
.xb-reveal > *:nth-child(1){animation-delay:20ms}.xb-reveal > *:nth-child(2){animation-delay:55ms}.xb-reveal > *:nth-child(3){animation-delay:90ms}.xb-reveal > *:nth-child(4){animation-delay:125ms}.xb-reveal > *:nth-child(5){animation-delay:160ms}.xb-reveal > *:nth-child(n+6){animation-delay:195ms}
/* Balance pill count-up bump. */
@keyframes xbBump { 0%,100%{transform:scale(1)} 40%{transform:scale(1.15); filter:brightness(1.3)} }
.topbal-pill.bump { animation: xbBump 360ms ease; }
@keyframes xbShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-3px)} 40%,80%{transform:translateX(3px)} }
.xb-shake { animation: xbShake 320ms ease; }

/* ===== HANGAR (redesigned: live hero stage + unified category rail) =====
   Bounded flex shell: the hero, the category rail and the action bar are pinned;
   ONLY the choice grid scrolls between them. No sticky overlap, rail always visible. */
.menu-overlay .hangar-panel {
  display: flex; flex-direction: column; gap: var(--s3);
  height: calc(100dvh - max(18px, var(--safe-top)) - max(18px, var(--safe-bottom)) - 24px);
  overflow: hidden;
}
.hangar-panel .panel-head { margin-bottom: 0; flex: 0 0 auto; }
.hangar-stage { height: clamp(168px, 27vh, 236px); --ctx: var(--cyan); flex: 0 0 auto; }
.hangar-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hangar-controls { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 auto; min-height: 0; }
/* All five categories must fit one row on a phone (no clipped "Дрон"). */
.hangar-rail { margin: 0; flex: 0 0 auto; }
.hangar-rail button { flex: 1 1 0; min-width: 0; padding: 7px 5px; letter-spacing: 0.1px; }
.hangar-scroll { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.hangar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Weapon cells reuse the .skin-cell shell but show a tinted glyph (no ship canvas). */
.weapon-cell { display: block; }
.weapon-cell .weapon-cell-ico { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--rar) 24%, transparent), rgba(4, 8, 12, 0.66) 72%); }
.weapon-cell .weapon-cell-ico svg { width: 48%; height: 48%; color: var(--rar); filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--rar) 45%, transparent)); }
.weapon-cell.locked-soft .weapon-cell-ico svg { opacity: 0.5; }
.weapon-cell .skin-cell-check { background: var(--rar); color: #06090b; box-shadow: 0 0 10px color-mix(in srgb, var(--rar) 55%, transparent); }
.weapon-cell.selected .skin-cell-frame { border-color: var(--rar); box-shadow: inset 0 0 0 2px var(--rar), 0 0 20px color-mix(in srgb, var(--rar) 40%, transparent); }

/* Weapon stat strip (Урон/Ёмкость/Темп + mastery) — pinned above the action bar. */
.hangar-stats { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: var(--s3); border-radius: var(--r-card); background: rgba(239, 253, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.hangar-stats[hidden] { display: none; }
.hangar-stats .hstat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.hangar-stats .hstat { display: flex; flex-direction: column; gap: 3px; }
.hangar-stats .hstat > span { font-size: var(--fz-micro); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hangar-stats .hstat b { font-size: var(--fz-body); font-weight: 950; color: var(--ink); }
.hangar-stats .hstat i, .hangar-stats .hstat-mastery i { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hangar-stats .hstat u { display: block; height: 100%; border-radius: 999px; background: var(--ctx); box-shadow: 0 0 8px color-mix(in srgb, var(--ctx) 50%, transparent); }
.hangar-stats .hstat-mastery { display: flex; flex-direction: column; gap: 4px; }
.hangar-stats .hstat-mastery > span { font-size: var(--fz-micro); font-weight: 800; color: var(--gold); letter-spacing: 0.03em; }
.hangar-stats .hstat-mastery u { display: block; height: 100%; border-radius: 999px; background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent); }

/* Pinned action bar — primary CTA + downgraded shop link. Always visible (outside
   the scroll), with a soft top fade so the scrolling grid reads as tucking under it. */
.hangar-action { display: flex; flex-direction: column; gap: var(--s2); flex: 0 0 auto; padding-top: var(--s3); background: linear-gradient(0deg, var(--bg) 64%, transparent); }
/* Caption centered above a FULL-WIDTH CTA — no dead horizontal gap, confident button. */
.hangar-action-row { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; }
.hangar-action-row small { font-size: var(--fz-meta); font-weight: 800; color: var(--ink); opacity: 0.85; line-height: 1.2; text-align: center; }
.hangar-cta { width: 100%; }
.hangar-shoplink { align-self: center; border: none; background: none; color: var(--muted); font-size: var(--fz-meta); font-weight: 800; cursor: pointer; padding: 2px 6px; text-decoration: underline; text-underline-offset: 2px; opacity: 0.82; }
.hangar-shoplink:hover { color: var(--ink); opacity: 1; }

@media (max-width: 380px) { .hangar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Landscape: big hero fills the left; the controls column (rail + scrollable grid +
   action) sits on the right and owns the internal scroll. */
@media (orientation: landscape) and (max-height: 600px) {
  .menu-overlay .hangar-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr);
    grid-template-areas: "head head" "stage controls";
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--s4); row-gap: var(--s2); align-items: stretch;
  }
  .hangar-panel .panel-head { grid-area: head; }
  .hangar-stage { grid-area: stage; height: 100%; min-height: 188px; align-self: stretch; }
  /* Short landscape can't pin hero+rail+stats+action AND show the grid — so the
     whole right column scrolls: rail sticks to the top, action sticks to the bottom,
     grid + stats flow between. Grid is always visible. */
  .hangar-controls { grid-area: controls; min-height: 0; overflow-y: auto; overflow-x: hidden; gap: var(--s2); }
  .hangar-scroll { flex: 0 0 auto; overflow: visible; }
  .hangar-rail { position: sticky; top: 0; z-index: 3; background: #0b1014; }
  .hangar-stats { background: #0b1014; }
  .hangar-action { position: sticky; bottom: 0; z-index: 3; background: #0b1014; padding-top: var(--s2); box-shadow: 0 -8px 12px #0b1014; }
  /* 3 roomy columns (overrides the 4-col default) so each hull/trail/drone preview is
     big enough to actually read — uses the wide right column instead of tiny cells. */
  .menu-overlay .hangar-panel .skin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
}

/* Landscape: shrink the Base hero so the stat cluster + prestige + tabs aren't pushed
   off the short viewport, and the panel scrolls cleanly with bottom inset room. */
@media (orientation: landscape) and (max-height: 600px) {
  .base-stage { height: clamp(110px, 30vh, 150px); margin-bottom: var(--s2); }
  .base-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .base-summary { gap: var(--s2); margin-bottom: var(--s2); }
  #baseScreen .panel { padding-bottom: max(20px, calc(var(--safe-bottom) + 12px)); }
}

/* ===== BASE (redesigned: live ship hero + clean stat cluster + segmented tabs) ===== */
.base-stage { height: clamp(166px, 26vh, 232px); --ctx: var(--green); margin-bottom: var(--s3); }
.base-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.base-stage .ship-grid-glow { position: absolute; inset: 22% 30%; z-index: 0; border: 1px dashed color-mix(in srgb, var(--ctx) 30%, transparent); border-radius: 999px; opacity: 0.4; }
/* Summary: stat cluster + prestige card stacked (no dark plates). */
.base-summary { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
/* Neutralise the shared `.base-summary div` debox on the new wrapper divs (only the
   leaf stat tiles + the prestige xb-card should carry a fill). */
.menu-overlay .base-summary > .base-stats { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.menu-overlay .base-summary > .base-prestige.xb-card { background: linear-gradient(135deg, color-mix(in srgb, var(--ctx) 13%, transparent), transparent 55%), var(--panel-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctx) 26%, var(--line)); }
.base-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.menu-overlay .base-stats div { padding: 9px 11px; border: none; border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.base-stats b { display: block; color: var(--ink); font-size: var(--fz-h2); font-weight: 950; line-height: 1.04; }
.base-stats span { color: var(--muted); font-size: var(--fz-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.base-prestige { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.base-prestige-info { flex: 1 1 auto; min-width: 0; }
.base-prestige-info b { display: block; font-size: var(--fz-body); font-weight: 950; color: var(--ink); }
.base-prestige-info span { display: block; margin-top: 2px; font-size: var(--fz-meta); color: var(--muted); line-height: 1.25; }
.base-prestige .xb-cta { width: auto; min-width: 132px; flex: 0 0 auto; }
/* Tabs adopt the segmented-control look (shed their own frame). */
.base-tabs.xb-seg { margin: 0 0 var(--s3); }
.base-tabs.xb-seg .base-tab { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 7px 10px; border: none; border-radius: 11px; background: transparent; color: var(--muted); font-size: var(--fz-label); font-weight: 900; box-shadow: none; }
.base-tabs.xb-seg .base-tab.active { color: var(--ink); background: color-mix(in srgb, var(--ctx) 16%, transparent); box-shadow: inset 0 0 0 1px var(--ctx), 0 0 14px color-mix(in srgb, var(--ctx) 30%, transparent); }
@media (max-width: 380px) { .base-stats { grid-template-columns: repeat(2, 1fr); } .base-prestige { flex-direction: column; align-items: stretch; } .base-prestige .xb-cta { width: 100%; } }

/* ===== Compact achievement cards — shorter rows so many more fit per screen
   (paired with the denser multi-column grid). Scoped to .achievement-card so
   meta/operation/weapon/cosmetic cards are untouched. ===== */
.achievement-card { padding: 11px; }
.achievement-card p {
  margin: 5px 0 7px !important;
  font-size: 0.72rem !important;
  line-height: 1.28;
  /* Bound the description to 2 lines so a long one can't balloon the card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.achievement-card .achievement-progress { height: 6px; }
.achievement-card small { margin-top: 5px; font-size: 0.68rem; }
.achievement-card em { margin-top: 4px; font-size: 0.68rem; }

/* ===== Daily-login streak reward (modal + topbar gift badge) ===== */
.daily-btn { position: relative; }
.daily-card { width: min(450px, 100%); }
.daily-head { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 14px; }
.daily-flame { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 138, 61, 0.6)); }
.daily-head-t h3 { margin: 0 0 2px; }
.daily-streak-l { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.daily-streak-l b { color: var(--gold, #ffd166); font-size: 1.02rem; }
.daily-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.daily-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 7px; border-radius: 10px; border: 1px solid var(--line); background: rgba(239, 253, 255, 0.04); }
.daily-cell .dc-day { font-size: 0.48rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.daily-cell .dc-cores { font-size: 0.74rem; font-weight: 950; color: var(--cyan); }
.daily-cell .dc-pz { font-size: 0.54rem; font-weight: 900; font-style: normal; color: var(--gold, #ffd166); }
.daily-cell.done { opacity: 0.5; }
.daily-cell .dc-check { position: absolute; top: 2px; right: 4px; font-size: 0.58rem; color: var(--green); }
.daily-cell.today { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); background: radial-gradient(circle at 50% 28%, rgba(92, 231, 255, 0.2), rgba(8, 14, 22, 0.4)); box-shadow: 0 0 16px rgba(92, 231, 255, 0.28); }
.daily-cell.milestone { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.daily-cell.milestone .dc-cores { color: var(--gold, #ffd166); }
.coop-ok.claimed, .coop-ok:disabled { background: rgba(239, 253, 255, 0.1); color: var(--muted); box-shadow: none; cursor: default; }

/* ===== Worlds: selector strip on the sector map + "СКОРО" teaser modal ===== */
.world-strip { display: flex; gap: 8px; padding: 2px 2px 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.world-strip::-webkit-scrollbar { display: none; }
.world-pill { --wc: #5ce7ff; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 13px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--wc) 38%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 13%, rgba(8, 13, 20, 0.82)), rgba(8, 12, 18, 0.86));
  transition: transform 120ms ease, border-color 140ms ease; }
.world-pill:active { transform: scale(0.97); }
.world-pill .world-num { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; font-size: 0.8rem; font-weight: 950; color: #06151b; background: var(--wc); box-shadow: 0 0 10px color-mix(in srgb, var(--wc) 50%, transparent); }
.world-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.world-name { font-size: 0.8rem; font-weight: 900; color: var(--ink); white-space: nowrap; line-height: 1.1; }
.world-en { font-size: 0.54rem; font-style: normal; font-weight: 700; color: var(--muted); white-space: nowrap; }
.world-on { font-size: 0.78rem; color: var(--green); font-weight: 950; }
.world-soon { font-size: 0.5rem; font-weight: 950; letter-spacing: 0.07em; color: #06151b; background: color-mix(in srgb, var(--wc) 88%, #fff); padding: 2px 6px; border-radius: 999px; }
.world-pill.active { border-color: color-mix(in srgb, var(--wc) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--wc) 24%, transparent); }
.world-pill.soon { opacity: 0.85; }
.world-pill.soon .world-name { color: color-mix(in srgb, var(--ink) 78%, var(--wc)); }
.world-card { --wc: #5ce7ff; width: min(420px, 100%); border-color: color-mix(in srgb, var(--wc) 45%, var(--line)) !important;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wc) 18%, transparent), transparent 62%), linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(8, 12, 18, 0.98)) !important; }
.world-card h3 { color: color-mix(in srgb, var(--wc) 55%, var(--ink)); }
.world-card .coop-tag { color: var(--wc); border-color: color-mix(in srgb, var(--wc) 42%, transparent); background: color-mix(in srgb, var(--wc) 14%, transparent); }

/* ============================================================
   HORIZONTAL world map — sectors march LEFT→RIGHT, one world at
   a time; switching worlds smoothly re-tints the whole screen.
   ============================================================ */
@property --world-color { syntax: "<color>"; inherits: true; initial-value: #5ce7ff; }
/* No CSS transition on --world-color: the animated canvas now carries the smooth
   per-world cross-fade, so re-rasterizing this color-mix wash every frame is wasted GPU. */
#locationScreen { --world-color: #5ce7ff; }
/* Faint per-world edge wash that reinforces the animated canvas sky (which now does
   the heavy lifting per world); kept subtle so colours don't over-saturate. */
#locationScreen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(135% 75% at 50% -10%, color-mix(in srgb, var(--world-color) 13%, transparent), transparent 66%),
    radial-gradient(120% 62% at 50% 110%, color-mix(in srgb, var(--world-color) 9%, transparent), transparent 72%);
}

/* Panel = fixed-height flex column. Header + world strip stay put; the MAP itself
   scrolls horizontally (kills the old vertical scroll of the whole panel). */
#locationScreen .select-panel {
  position: relative; z-index: 1;
  width: min(940px, 100%);
  display: flex; flex-direction: column;
  overflow: hidden;
  touch-action: pan-x;
}
#locationScreen .world-strip { flex: 0 0 auto; }
#locationScreen .location-path {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; touch-action: pan-x;
  scrollbar-width: none;
  /* Graceful left/right edges: nodes that scroll past the viewport fade out instead
     of being hard-clipped mid-label (the "обрезает странно" complaint). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
#locationScreen .location-path::-webkit-scrollbar { display: none; }

.path-map.horizontal {
  position: relative;
  width: var(--map-w); max-width: none; height: 100%;
  min-height: 230px; margin: 0 auto; flex: 0 0 auto;
}

/* Node labels go ABOVE/BELOW the disc (centred) — never beside it (would overlap the
   next node). Upper-half nodes label below; lower-half nodes label above. */
.path-map.horizontal .node-label {
  position: absolute; left: 50%; right: auto; top: auto; bottom: auto;
  transform: translateX(-50%);
  flex-direction: column; align-items: center; text-align: center;
  width: max-content; max-width: 148px; padding: 5px 8px; gap: 1px;
}
.path-map.horizontal .path-node.is-up .node-label { top: calc(100% + 7px); }
.path-map.horizontal .path-node.is-down .node-label { bottom: calc(100% + 7px); }
.path-map.horizontal .node-kicker { font-size: 0.56rem; letter-spacing: 1px; }
.path-map.horizontal .node-name { font-size: 0.88rem; }
.path-map.horizontal .node-meta { font-size: 0.66rem; -webkit-line-clamp: 2; max-width: 148px; }
/* "ВЫ ЗДЕСЬ" flag opposite the label so they never collide. */
.path-map.horizontal .path-node.is-down.is-current .node-flag { top: auto; bottom: -24px; }

/* World strip switcher states (reached = tappable, locked = greyed). */
.world-pill.reached { opacity: 0.92; }
.world-pill.locked { opacity: 0.6; }
.world-pill.locked .world-name { color: color-mix(in srgb, var(--ink) 70%, var(--muted)); }
.world-lock { font-size: 0.7rem; filter: grayscale(0.3); }
.world-pill.active { background: color-mix(in srgb, var(--wc) 16%, rgba(10,16,24,0.7)); }
.world-on { font-size: 0.6rem; color: var(--wc); }

@media (orientation: landscape) and (max-height: 560px) {
  .path-map.horizontal { min-height: 180px; }
  .path-map.horizontal .node-name { font-size: 0.82rem; }
}

/* ===========================================================================
   PREMIUM RESULT SCREENS (game over / victory) + PAUSE — modern, glossy panels
   with a hero score, sleek stat chips, a gold reward pill and a spring entrance.
   =========================================================================== */
.result-overlay {
  background: radial-gradient(120% 90% at 50% 0%, rgba(10, 14, 26, 0.5), rgba(2, 4, 10, 0.74) 70%);
  -webkit-backdrop-filter: blur(13px) saturate(1.1);
          backdrop-filter: blur(13px) saturate(1.1);
}
.result-panel {
  --rc: var(--cyan);
  position: relative;
  width: min(540px, 100%);
  text-align: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rc) 26%, rgba(255, 255, 255, 0.1));
  border-radius: 24px;
  padding: clamp(20px, 3.6vw, 32px) clamp(20px, 3.8vw, 36px) clamp(18px, 3vw, 26px);
  background:
    radial-gradient(130% 78% at 50% -12%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(17, 23, 35, 0.98), rgba(8, 11, 18, 0.99));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in srgb, var(--rc) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.result-panel.is-defeat { --rc: var(--red); }
.result-panel.is-victory { --rc: var(--green); }
.result-panel.is-pause { --rc: var(--cyan); }
/* top accent hairline */
.result-panel::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rc), transparent);
  box-shadow: 0 0 16px var(--rc);
}
.overlay.active .result-panel { animation: resultPop 380ms cubic-bezier(0.22, 0.9, 0.26, 1.06) both; }
@keyframes resultPop { from { transform: translateY(16px) scale(0.955); opacity: 0; } to { transform: none; opacity: 1; } }
/* staggered children */
.overlay.active .result-panel > * { animation: resultRise 420ms ease both; }
.overlay.active .result-panel > :nth-child(2) { animation-delay: 40ms; }
.overlay.active .result-panel > :nth-child(3) { animation-delay: 80ms; }
.overlay.active .result-panel > :nth-child(4) { animation-delay: 120ms; }
.overlay.active .result-panel > :nth-child(5) { animation-delay: 160ms; }
.overlay.active .result-panel > :nth-child(6) { animation-delay: 200ms; }
@keyframes resultRise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .overlay.active .result-panel, .overlay.active .result-panel > * { animation: none; }
}

.result-panel .kicker { margin: 0 0 2px; letter-spacing: 0.16em; font-size: 0.72rem; }
.result-title {
  margin: 0;
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 950;
  line-height: 1.02;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--rc) 64%, #ffffff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* HERO score */
.result-hero { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: clamp(12px, 2.4vw, 18px); }
.rh-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.rh-score {
  font-size: clamp(2.8rem, 9vw, 4.2rem);
  font-weight: 950; line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #ffffff 8%, color-mix(in srgb, var(--rc) 58%, #ffffff) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px color-mix(in srgb, var(--rc) 32%, transparent);
}
.rh-best { margin-top: 3px; font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.rh-best b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* STAT chips */
.result-stats { display: flex; gap: 9px; margin-top: clamp(13px, 2.6vw, 18px); }
.result-stats span {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.result-stats i { font-style: normal; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.result-stats b { font-size: 1.16rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }

/* REWARD — gold cores pill + optional muted note */
.result-reward { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: clamp(12px, 2.4vw, 16px) 0 0; }
.result-reward:empty { display: none; }
.rw-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 15px 6px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, transparent), color-mix(in srgb, var(--gold) 7%, transparent));
  color: var(--gold); font-weight: 950; font-size: 1rem; letter-spacing: 0.01em;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 24%, transparent);
}
.rw-pill .cur-ico { width: 18px; height: 18px; }
.rw-note { font-size: 0.74rem; font-weight: 700; color: var(--muted); line-height: 1.25; }

.result-panel .menu-buttons { margin-top: clamp(15px, 2.8vw, 22px); }
/* portrait: stats can wrap-shrink, buttons stack via base rule; landscape handled above */

/* PAUSE — emblem + tighter copy */
.pause-panel { width: min(420px, 100%); }
.pause-emblem {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, transparent);
  background: radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--cyan) 24%, transparent), transparent 70%), rgba(8, 14, 20, 0.7);
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pause-emblem svg { width: 26px; height: 26px; }
.pause-sub { margin: 6px auto 0 !important; max-width: 320px; color: var(--muted); font-size: 0.84rem; }
@media (orientation: landscape) and (max-height: 560px) {
  .pause-panel { padding: 14px 22px 16px; }
  .pause-emblem { width: 44px; height: 44px; margin-bottom: 6px; }
  .pause-emblem svg { width: 20px; height: 20px; }
}

/* ===================== RANKS LADDER (browse all 50 ranks) ===================== */
.profile-rank { cursor: pointer; border: none; transition: transform 140ms ease; }
.profile-rank::after { content: "›"; margin-left: 7px; opacity: 0.55; font-weight: 900; }
.profile-rank:active { transform: scale(0.96); }

/* DEFINITE height (was max-height): with only max-height the card sized to
   content, and the ladder's flex-basis:auto (2834px of 50 rows) made flex-shrink
   collapse it to ~37px = 1 visible row. A definite height gives the flex:1 ladder
   real space to fill + scroll. */
.ranks-card { width: min(440px, 100%); height: 84vh; max-height: 560px; display: flex; flex-direction: column; text-align: left; }
.ranks-card h3 { text-align: center; }
.ranks-sub { margin: 4px 0 12px !important; color: var(--muted); font-size: 0.82rem; text-align: center; }
.ranks-ladder {
  flex: 1 1 0; min-height: 96px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 -2px 12px; padding: 2px; scrollbar-width: thin;
}
.ranks-ladder::-webkit-scrollbar { width: 5px; }
.ranks-ladder::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
.rank-row {
  --rank: #5ce7ff;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.5;
}
.rank-row.reached { opacity: 1; }
.rank-row.current {
  border-color: color-mix(in srgb, var(--rank) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rank) 20%, transparent), color-mix(in srgb, var(--rank) 6%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--rank) 22%, transparent);
  opacity: 1;
}
.rank-row-ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--rank); }
.rank-row-ic svg { width: 26px; height: 26px; }
.rank-row-n { width: 24px; flex: 0 0 auto; text-align: center; font-weight: 950; font-size: 0.9rem; color: var(--rank); font-variant-numeric: tabular-nums; }
.rank-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rank-row-info b { font-size: 0.92rem; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row-info em { font-size: 0.6rem; font-weight: 700; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rank-row-xp { flex: 0 0 auto; font-size: 0.74rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-row.current .rank-row-xp { color: var(--rank); }

/* ===== Rank Icons + Rank-Up Feedback ===================== */
.rank-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rank-icon-halo {
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent));
}
.rank-icon-core {
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 65%, transparent));
}
.rank-icon-pips {
  filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 70%, transparent));
}

.prof-badge {
  overflow: visible;
  color: var(--rk, var(--cyan));
  letter-spacing: 0;
}
.prof-badge .rank-icon {
  width: 31px;
  height: 31px;
}
.prof-badge em {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(4, 9, 15, 0.94);
  border: 1px solid color-mix(in srgb, var(--rk, var(--cyan)) 68%, #fff);
  color: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 9px color-mix(in srgb, var(--rk, var(--cyan)) 42%, transparent);
}
.prof-next {
  display: block;
  max-width: 150px;
  margin-top: 1px;
  color: color-mix(in srgb, var(--rk, var(--cyan)) 72%, #d9f7ff);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-rank .rank-icon {
  width: 22px;
  height: 22px;
}
.rank-row-ic {
  border-radius: 10px;
  background: radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--rank) 22%, transparent), transparent 72%);
}
.rank-row-ic .rank-icon {
  width: 30px;
  height: 30px;
}

.ranks-progress {
  --rank: var(--cyan);
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rank) 28%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(14, 22, 30, 0.86), rgba(5, 9, 14, 0.92));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rank) 36%, transparent),
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--rank) 12%, transparent);
}
.ranks-progress-ic {
  width: 58px;
  height: 58px;
  color: var(--rank);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rank) 48%, transparent));
}
.ranks-progress-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ranks-progress-info small,
.rank-toast-copy small {
  color: var(--rank);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ranks-progress-info b {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.08;
}
.ranks-progress-info em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}
.ranks-progress-bar {
  position: relative;
  display: block;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(239, 253, 255, 0.11);
}
.ranks-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rank) 55%, #fff), var(--rank));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rank) 60%, transparent);
}

.rank-row {
  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease;
}
.rank-row.current {
  transform: translateX(2px);
}
.rank-row-xp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 84px;
  text-align: right;
}
.rank-row-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255, 209, 102, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.18);
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}
.rank-row-reward .cur-ico {
  width: 1em;
  height: 1em;
}

.achievement-toast.rank-toast {
  --rank: var(--achievement-color, var(--cyan));
  position: relative;
  grid-template-columns: 58px 1fr;
  min-height: 78px;
  border-color: color-mix(in srgb, var(--rank) 76%, transparent);
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--rank) 34%, transparent), transparent 48%),
    linear-gradient(135deg, rgba(7, 12, 20, 0.94), rgba(3, 6, 12, 0.88));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.34),
    0 0 34px color-mix(in srgb, var(--rank) 32%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rank) 22%, transparent);
  animation: rank-toast-enter 620ms cubic-bezier(0.16, 1, 0.24, 1), rank-toast-glow 2.1s ease-in-out infinite 620ms;
  overflow: hidden;
}
.achievement-toast.rank-toast::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22), transparent 60%);
  transform: translateX(-70%) rotate(10deg);
  animation: rank-toast-sweep 1.15s ease-out 180ms both;
  pointer-events: none;
}
.rank-toast-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  color: var(--rank);
  display: grid;
  place-items: center;
  animation: rank-toast-medal 900ms cubic-bezier(0.2, 1.2, 0.22, 1) both;
}
.rank-toast-icon .rank-icon {
  width: 58px;
  height: 58px;
}
.rank-toast-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.rank-toast-copy b {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.12;
}
.rank-toast-copy em {
  color: var(--gold);
  font-size: 0.7rem;
}
.rank-toast-copy .cur-ico {
  width: 1em;
  height: 1em;
}

@keyframes rank-toast-enter {
  0% { transform: translateX(-24px) scale(0.9); opacity: 0; }
  58% { transform: translateX(5px) scale(1.04); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes rank-toast-medal {
  0% { transform: rotate(-18deg) scale(0.45); filter: brightness(2); }
  70% { transform: rotate(4deg) scale(1.12); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes rank-toast-sweep {
  to { transform: translateX(72%) rotate(10deg); }
}
@keyframes rank-toast-glow {
  0%, 100% { box-shadow: 0 20px 48px rgba(0,0,0,0.34), 0 0 28px color-mix(in srgb, var(--rank) 24%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rank) 22%, transparent); }
  50% { box-shadow: 0 20px 48px rgba(0,0,0,0.34), 0 0 42px color-mix(in srgb, var(--rank) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rank) 34%, transparent); }
}

@media (max-width: 520px) {
  .prof-next { display: none; }
  .ranks-progress { grid-template-columns: 48px 1fr; padding: 10px; }
  .ranks-progress-ic { width: 48px; height: 48px; }
  .rank-row { gap: 8px; padding: 8px 9px; }
  .rank-row-xp { min-width: 70px; font-size: 0.66rem; }
}

/* Score/combo pill OUT of the enemy lane: in landscape play it hugs the LEFT
   edge under the stat chips (user request) instead of hanging centered over
   the battlefield. Appended last so it beats every earlier top/left override. */
@media (orientation: landscape) {
  .mission-strip {
    left: max(14px, var(--safe-left));
    transform: none;
  }
  /* Achievement chips start BELOW the left-anchored pill so they never overlap. */
  .achievement-popups { top: calc(104px + var(--safe-top)); }
}

/* Boss HP relocates to the BOTTOM strip in landscape (user: the centered
   620px bar at top:126 sat right across the battlefield). Slimmer track,
   smaller name, anchored above the XP bar; the in-combat toast pill climbs
   above it so the two never stack. */
@media (orientation: landscape) {
  .boss-bar {
    top: auto;
    bottom: calc(16px + var(--safe-bottom));
    width: min(520px, 58vw);
    padding: 5px 12px;
    gap: 3px;
    background: rgba(3, 7, 9, 0.6);
  }
  .boss-bar-name { font-size: 0.62rem; letter-spacing: 2px; }
  .boss-bar-track { height: 9px; }
  body[data-game-state="playing"] .toast { bottom: calc(66px + var(--safe-bottom, 0px)); }
}