/* ============================================================
   SHIFTPANIC - CAMPAIGN MODE CSS
   Dark neon aesthetic matching the main game.
   ============================================================ */

/* ============================================================
   SHARED CAMPAIGN SCREEN BASE
   All campaign screens are fixed full-screen overlays.
   ============================================================ */
.cmp-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #07070f;
  color: #f8fafc;
  overflow-y: auto;
  font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   HOME SCREEN ADDITIONS
   Campaign button in the home-actions area.
   ============================================================ */
.btn-campaign-home {
  background: linear-gradient(135deg, #7c3aed 0%, #0ea5e9 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.btn-campaign-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #a855f7 0%, #38bdf8 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-campaign-home:hover::before,
.btn-campaign-home:focus-visible::before { opacity: 1; }

/* ============================================================
   CAMPAIGN LEVEL SELECT — CHALLENGE ROAD DESIGN (v2)
   Vibrant dark neon aesthetic. Sticky HUD. Chapter dividers.
   Polished difficulty badges. Premium progression feel.
   ============================================================ */
#campaign-levelselect {
  background: #06060e;
  overflow-y: auto;
  /* scroll-padding-top makes anchor targets clear the sticky bar */
  scroll-padding-top: 56px;
}

/* Loading placeholder shown while campaign UI initializes */
.cmp-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 48px 16px;
  color: rgba(255,255,255,0.9);
}
.cmp-spinner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.06);
  border-top-color: #7c3aed;
  box-shadow: 0 10px 34px rgba(124,58,237,0.14), inset 0 2px 8px rgba(255,255,255,0.02);
  animation: cmp-spin 1s linear infinite;
}
.cmp-loading-text { font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: 0.6px; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   STICKY HUD — always visible at top while scrolling
   Must be a direct child of #campaign-levelselect (the scroll
   container) — NOT inside .cmp-road-outer (overflow:hidden)
   ============================================================ */
.cmp-sticky-hud {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem 0;
  background: rgba(6, 6, 14, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow: 0 2px 20px rgba(0,0,0,0.45);
  transition: padding 0.2s ease;
  flex-wrap: wrap;
  min-height: 52px;
}

.cmp-sticky-hud--compact {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Progress bar underline of sticky bar */
.cmp-sticky-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(124,58,237,0.12);
}
.cmp-sticky-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9, #22c55e);
  transition: width 0.6s ease;
  min-width: 4px;
  border-radius: 0 2px 2px 0;
  position: relative;
  overflow: hidden;
}

/* Back button in sticky hud */
.cmp-sticky-back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.35rem 0.85rem;
  min-height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.cmp-sticky-back:hover {
  background: rgba(255,255,255,0.12);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.cmp-sticky-back:active {
  transform: translateY(1px);
  background: rgba(255,255,255,0.08);
  box-shadow: none;
  transition-duration: 0.06s;
}
.cmp-sticky-back:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

/* Mode name + chapter pill */
.cmp-sticky-center {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
}
.cmp-sticky-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-sticky-chapter {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Stats cluster in sticky hud */
.cmp-sticky-stats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.cmp-sticky-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.cmp-sticky-stat--complete {
  color: #4ade80;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
}
.cmp-sticky-stat--stars {
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.2);
}
.cmp-sticky-stat--coins {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.2);
}

/* ============================================================
   OUTER WRAPPER — full-screen dark bg with ambient glows
   ============================================================ */
.cmp-road-outer {
  position: relative;
  min-height: 100vh;
  color: rgba(255,255,255,0.82);
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 380px at 15% 12%, rgba(124,58,237,0.10), transparent 50%),
    radial-gradient(ellipse 560px 320px at 88% 78%, rgba(14,165,233,0.08), transparent 50%),
    radial-gradient(ellipse 400px 280px at 50% 50%, rgba(236,72,153,0.04), transparent 60%),
    linear-gradient(180deg, #08071a 0%, #06060e 100%);
}
.cmp-road-outer::before {
  content: '';
  position: absolute; inset: -30% -20% -40% -20%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(168,85,247,0.06), rgba(59,130,246,0.06), rgba(244,63,94,0.04), rgba(168,85,247,0.06));
  filter: blur(48px) saturate(140%);
  pointer-events: none;
  animation: cmp-neon-drift 14s linear infinite;
  z-index: 0;
}
@keyframes cmp-neon-drift { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================
   ANIMATED PARTICLES (BG)
   ========================== */
.cmp-road-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  mix-blend-mode: screen;
}

.cmp-road-particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  opacity: 0.85;
  filter: blur(6px);
  box-shadow: 0 0 22px currentColor, 0 0 64px currentColor;
  transform-origin: center;
  animation: cmp-particle-rise linear infinite;
}

@keyframes cmp-particle-rise {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  8%   { opacity: 0.55; }
  88%  { opacity: 0.25; }
  100% { transform: translateY(-105vh) scale(0.6); opacity: 0; }
}

/* ==========================
   INNER CONTENT LAYOUT
   ========================== */
.cmp-road-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Back button (legacy style — kept for fallback; primary back btn now in sticky hud) */
.cmp-road-back {
  display: none; /* hidden — replaced by cmp-sticky-back */
}

/* ==========================
   HERO HEADER AREA
   ========================== */
.cmp-road-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 0;
}

/* Top row: mode badge (left) + chapter indicator (right) */
.cmp-road-header-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.3rem;
}

/* "PANIC QUEST" eyebrow badge */
.cmp-road-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a78bfa;
  background: rgba(124,58,237,0.14);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 20px;
  padding: 4px 12px;
}

/* Right-side chapter indicator */
.cmp-road-chapter-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 12px;
}

.cmp-road-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2rem, 6.5vw, 2.8rem);
  font-weight: 900;
  background: linear-gradient(135deg, #c084fc 0%, #818cf8 38%, #38bdf8 70%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.0;
  filter: drop-shadow(0 2px 18px rgba(124,58,237,0.35)) drop-shadow(0 0 40px rgba(56,189,248,0.15));
}

.cmp-road-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  margin: 0.18rem 0 0;
  letter-spacing: 0.01em;
}

/* ==========================
   HERO / NEXT-UP STRIP
   ========================== */
.cmp-road-hero {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
}
.cmp-hero-left { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.cmp-hero-next { font-size: 1rem; font-weight:900; color: #fff; }
.cmp-hero-desc { font-size:0.86rem; color: rgba(255,255,255,0.72); max-width: 62ch; }
.cmp-hero-right { display:flex; align-items:center; gap:10px; }
.cmp-hero-right .cmp-node-btn { padding: 0.6rem 1.2rem; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .cmp-road-hero { transition: none; }
}

/* ==========================
   STAT PILLS
   ========================== */
.cmp-road-statpills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
  width: 100%;
}

.cmp-road-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cmp-road-pill svg { flex-shrink: 0; }
.cmp-road-pill-lbl {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.cmp-road-pill--done  { background: rgba(45,212,170,0.1);  border-color: rgba(45,212,170,0.3);  color: #2dd4aa; }
.cmp-road-pill--stars { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.cmp-road-pill--coins { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); color: #f59e0b; }
.cmp-road-pill--pct   { background: rgba(168,85,247,0.1);  border-color: rgba(168,85,247,0.28); color: #c084fc; }

/* Legacy stats bar — kept for CSS compatibility */
.cmp-road-statsbar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 0.65rem 1.4rem;
  margin-top: 1.1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.cmp-road-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 1rem;
  position: relative;
}
.cmp-road-stat-val {
  font-weight: 900;
  font-size: 1.15rem;
  color: #f8fafc;
  line-height: 1;
}
.cmp-stat-coins { color: #f59e0b !important; }
.cmp-road-stat-lbl {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.cmp-road-stat-sep {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* Master progress bar */
.cmp-road-masterprogress {
  width: 100%;
  max-width: 400px;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem auto 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.cmp-road-masterprogress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed 0%, #0ea5e9 50%, #22c55e 100%);
  border-radius: 8px;
  min-width: 4px;
  transition: width 0.8s cubic-bezier(0.34, 1.26, 0.64, 1);
  box-shadow: 0 0 8px rgba(124,58,237,0.5);
  position: relative;
  overflow: hidden;
}

/* Next Up strip — shows the next playable level */
.cmp-road-nextup {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}
.cmp-road-nextup-label {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a78bfa;
}
.cmp-road-nextup-sep { color: rgba(255,255,255,0.3); }
.cmp-road-nextup-name { font-weight: 700; color: #e2e8f0; }
.cmp-road-nextup-chip {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
}
.cmp-road-nextup-chip--easy   { background: rgba(34,197,94,0.18);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.cmp-road-nextup-chip--medium { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.cmp-road-nextup-chip--hard   { background: rgba(239,68,68,0.18);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.cmp-road-nextup-chip--expert { background: rgba(168,85,247,0.18); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.cmp-road-nextup-chip--boss   { background: rgba(244,63,94,0.18);  color: #f472b6; border: 1px solid rgba(244,63,94,0.3); }
.cmp-road-nextup--complete {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.28);
  color: #4ade80;
}

/* ==========================
   CHAPTER DIVIDERS — zone gate style
   ========================== */
.cmp-chapter-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0 0.85rem;
}
.cmp-chapter-divider-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.55), rgba(124,58,237,0.25));
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.cmp-chapter-divider:not(.cmp-chapter-divider--boss) .cmp-chapter-divider-line:last-child {
  background: linear-gradient(90deg, rgba(124,58,237,0.25), rgba(124,58,237,0.55), transparent);
}
.cmp-chapter-divider-line--boss {
  background: linear-gradient(90deg, transparent, rgba(244,63,94,0.65), rgba(244,114,182,0.35)) !important;
  height: 3px;
}
/* The gate label */
.cmp-chapter-divider-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.85rem 1.6rem;
  background: linear-gradient(145deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06));
  border: 1px solid rgba(124,58,237,0.36);
  border-radius: 16px;
  min-width: 190px;
  text-align: center;
  flex-shrink: 0;
  box-shadow:
    0 6px 32px rgba(124,58,237,0.16),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  z-index: 3;
}
.cmp-chapter-divider--boss .cmp-chapter-divider-label {
  background: linear-gradient(145deg, rgba(244,63,94,0.2), rgba(168,85,247,0.1));
  border-color: rgba(244,63,94,0.44);
  box-shadow:
    0 8px 40px rgba(244,63,94,0.2),
    0 0 80px rgba(244,63,94,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07);
  animation: cmp-boss-gate-pulse 3s ease-in-out infinite;
}
@keyframes cmp-boss-gate-pulse {
  0%, 100% { box-shadow: 0 8px 40px rgba(244,63,94,0.2), 0 0 80px rgba(244,63,94,0.06); border-color: rgba(244,63,94,0.44); }
  50%       { box-shadow: 0 10px 60px rgba(244,63,94,0.32), 0 0 120px rgba(244,63,94,0.1); border-color: rgba(244,114,182,0.68); }
}
/* Chapter label text elements */
.cmp-chapter-tag {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c084fc;
  background: rgba(124,58,237,0.2);
  border-radius: 20px;
  padding: 2px 8px;
}
.cmp-chapter-tag--boss {
  color: #fca5a5;
  background: rgba(244,63,94,0.22);
}
.cmp-chapter-tagname {
  font-size: 0.92rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}
.cmp-chapter-tagname--boss {
  color: #fca5a5;
  font-weight: 900;
}
.cmp-chapter-progress {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px 9px;
  margin-top: 1px;
}

/* ==========================
   ROAD MAP STRUCTURE
   ========================== */
.cmp-road-map {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Central vertical spine — thick glowing track */
.cmp-road-map::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(45,212,170,0.4) 0%,
    rgba(124,58,237,0.5) 15%,
    rgba(14,165,233,0.4) 35%,
    rgba(251,146,60,0.38) 55%,
    rgba(244,63,94,0.42) 75%,
    rgba(244,114,182,0.55) 100%);
  border-radius: 3px;
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(124,58,237,0.25),
    0 0 32px rgba(124,58,237,0.12);
}
@keyframes cmp-neon-flow { 0%{background-position:0% 0%}100%{background-position:100% 100%} }
.cmp-road-map::before { background-size: 200% 200%; animation: cmp-neon-flow 10s linear infinite; }

/* Each row = one level: 3-column grid (card | connector | card) */
.cmp-road-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  align-items: center;
  min-height: 130px;
  padding: 10px 0;
  z-index: 1;
}

/* Ambient row highlight for 'you are here' */
.cmp-road-row.cmp-node--current::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: radial-gradient(ellipse 85% 65% at 50% 50%, rgba(var(--node-rgb, 124,58,237), 0.07), transparent 70%);
  border-radius: 22px;
  pointer-events: none;
  z-index: 0;
  animation: cmp-row-ambient 3s ease-in-out infinite;
}
@keyframes cmp-row-ambient {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.cmp-road-row--left  { grid-template-columns: 1fr 68px 1fr; }
.cmp-road-row--right { grid-template-columns: 1fr 68px 1fr; }
.cmp-road-row--boss  {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 180px;
}

/* Card cell wrappers */
.cmp-road-cell--card {
  display: flex;
  align-items: center;
  position: relative;
}
.cmp-road-row--left  .cmp-road-cell--card { justify-content: flex-end;   padding-right: 12px; }
.cmp-road-row--right .cmp-road-cell--card { justify-content: flex-start;  padding-left:  12px; }

/* Horizontal arm connecting card edge to the spine dot */
.cmp-road-row--left .cmp-road-cell--card::after,
.cmp-road-row--right .cmp-road-cell--card::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 2px;
  width: 12px;
  transform: translateY(-50%);
  background: var(--row-dot, #7c3aed);
  opacity: 0.5;
  pointer-events: none;
}
.cmp-road-row--left  .cmp-road-cell--card::after { right: 0; }
.cmp-road-row--right .cmp-road-cell--card::after { left: 0; }
.cmp-road-row.cmp-node--locked .cmp-road-cell--card::after { opacity: 0.18; }

/* Connector — spine dot in center column */
.cmp-road-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
/* Per-segment spine colorization overlay */
.cmp-road-connector::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  background: rgba(var(--node-rgb, 124,58,237), 0.18);
  pointer-events: none;
  z-index: 1;
  transition: background 0.3s;
}
.cmp-road-row.cmp-node--completed .cmp-road-connector::before {
  background: linear-gradient(180deg, rgba(45,212,170,0.55), rgba(45,212,170,0.28));
  box-shadow: 0 0 8px rgba(45,212,170,0.3);
}
.cmp-road-row.cmp-node--current .cmp-road-connector::before {
  background: rgba(var(--node-rgb, 124,58,237), 0.55);
  animation: cmp-spine-seg-pulse 2.4s ease-in-out infinite;
}
@keyframes cmp-spine-seg-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* Node dot — numbered map node */
.cmp-road-connector-dot {
  position: relative;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--node-rgb, 124,58,237), 0.2);
  border: 2px solid var(--row-dot, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 900;
  color: var(--row-dot, #7c3aed);
  box-shadow:
    0 0 0 4px rgba(var(--node-rgb, 124,58,237), 0.1),
    0 0 16px rgba(var(--node-rgb, 124,58,237), 0.35);
  flex-shrink: 0;
  transition: transform 0.18s, box-shadow 0.18s;
  letter-spacing: 0;
}
/* Completed dot — green check */
.cmp-road-connector-dot--done {
  background: rgba(45,212,170,0.22);
  border-color: #2dd4aa;
  color: #2dd4aa;
  box-shadow:
    0 0 0 4px rgba(45,212,170,0.12),
    0 0 18px rgba(45,212,170,0.55);
}
/* Next/current dot — larger pulsing ring */
.cmp-road-connector-dot--next {
  width: 36px;
  height: 36px;
  border-width: 2.5px;
  background: rgba(var(--node-rgb, 124,58,237), 0.28);
  box-shadow:
    0 0 0 6px rgba(var(--node-rgb, 124,58,237), 0.12),
    0 0 0 12px rgba(var(--node-rgb, 124,58,237), 0.05),
    0 0 28px rgba(var(--node-rgb, 124,58,237), 0.5);
  animation: cmp-dot-next-pulse 2.2s ease-in-out infinite;
}
@keyframes cmp-dot-next-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(var(--node-rgb, 124,58,237), 0.1), 0 0 20px rgba(var(--node-rgb, 124,58,237), 0.4); }
  50%       { box-shadow: 0 0 0 11px rgba(var(--node-rgb, 124,58,237), 0.15), 0 0 36px rgba(var(--node-rgb, 124,58,237), 0.6); }
}
/* Locked dot — dim */
.cmp-road-row.cmp-node--locked .cmp-road-connector-dot {
  /* make the locked dot more visible while still muted */
  opacity: 0.60;
  box-shadow: 0 0 8px rgba(124,58,237,0.08);
}
/* Number label inside connector dot */
.cmp-dot-num {
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  color: inherit;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
}

/* ==========================
   NODE CARDS — premium redesign v2
   ========================== */
.cmp-road-node {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-width: 240px;
  background:
    radial-gradient(ellipse 110% 70% at 0% 0%, rgba(var(--node-rgb, 124,58,237), 0.24) 0%, transparent 62%),
    linear-gradient(158deg,
      rgba(var(--node-rgb, 124,58,237), 0.15) 0%,
      rgba(10,9,22,0.96) 52%,
      rgba(6,6,14,0.92) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1.5px solid rgba(var(--node-rgb, 124,58,237), 0.38);
  border-radius: 18px;
  padding: 1.2rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 0 var(--node-glow, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
  box-sizing: border-box;
  overflow: visible;
}

/* Top accent strip — full-width color bar */
.cmp-road-node::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--node-color, #7c3aed) 25%,
    var(--node-color, #7c3aed) 75%,
    transparent 100%);
  opacity: 0.9;
}

/* Difficulty color vars — more vivid */
.cmp-node--easy   { --node-color: #2dd4aa; --node-glow: #2dd4aa32; --row-dot: #2dd4aa; --node-rgb: 45,212,170;  }
.cmp-node--medium { --node-color: #fb923c; --node-glow: #fb923c38; --row-dot: #fb923c; --node-rgb: 251,146,60;  }
.cmp-node--hard   { --node-color: #f43f5e; --node-glow: #f43f5e3a; --row-dot: #f43f5e; --node-rgb: 244,63,94;   }
.cmp-node--expert { --node-color: #a855f7; --node-glow: #a855f73a; --row-dot: #a855f7; --node-rgb: 168,85,247;  }
.cmp-node--boss   {
  --node-color: #f472b6;
  --node-glow: #f472b648;
  --row-dot: #f472b6;
  --node-rgb: 244,114,182;
  max-width: 580px;
  min-width: 300px;
  width: clamp(300px, 82vw, 580px);
  border-width: 2px;
  border-color: rgba(244,114,182,0.44);
  background:
    radial-gradient(ellipse 200px 140px at 50% 0%, rgba(244,63,94,0.22), transparent 72%),
    radial-gradient(ellipse 180px 120px at 100% 100%, rgba(168,85,247,0.16), transparent 70%),
    linear-gradient(160deg, rgba(28,0,38,0.96) 0%, rgba(10,8,24,0.96) 100%);
  box-shadow:
    0 16px 64px rgba(244,114,182,0.18),
    0 0 100px rgba(244,63,94,0.07),
    inset 0 1px 0 rgba(249,168,212,0.1);
}
.cmp-node--boss::before {
  background: linear-gradient(90deg, transparent, #f43f5e, #f472b6, #a855f7, transparent);
  opacity: 1;
  height: 3px;
}

/* Locked: dimmed but still shows colors */
.cmp-node--locked {
  /* Slightly dim but clearly visible; preserve color and add soft tint */
  opacity: 0.95;
  filter: brightness(0.92) saturate(0.9);
  pointer-events: none;
  border-color: rgba(255,255,255,0.06);
}
.cmp-node--locked::before { opacity: 0.12; }
.cmp-node--locked::after {
  /* soft tinted overlay instead of heavy noise — keeps underlying artwork readable */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(244,63,94,0.06), rgba(168,85,247,0.03));
  pointer-events: none;
  z-index: 0;
}
.cmp-node--locked * { position: relative; z-index: 1; }
.cmp-node--locked .cmp-node-title   { color: #f472b6; /* soft pink pop */ }
.cmp-node--locked .cmp-node-obj     { color: rgba(244,63,94,0.85); /* readable red accent */ }
.cmp-node--locked .cmp-node-reward-amt { color: rgba(251,191,36,0.9); }

/* Unlocked hover — noticeable lift + glow */
.cmp-node--unlocked:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow:
    0 18px 56px rgba(0,0,0,0.55),
    0 0 52px var(--node-glow),
    inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: rgba(var(--node-rgb, 124,58,237), 0.72);
  cursor: pointer;
}
.cmp-node--unlocked:focus-within {
  outline: 2px solid var(--node-color, #7c3aed);
  outline-offset: 3px;
}
.cmp-node--unlocked:active {
  transform: scale(1.01) translateY(-1px);
}

/* Completed — satisfying green tint */
.cmp-node--completed {
  border-color: rgba(45,212,170,0.42);
  background:
    radial-gradient(ellipse 110% 70% at 0% 0%, rgba(45,212,170,0.14) 0%, transparent 62%),
    linear-gradient(158deg, rgba(45,212,170,0.08) 0%, rgba(8,18,14,0.96) 52%, rgba(6,6,14,0.92) 100%);
  box-shadow:
    0 8px 36px rgba(45,212,170,0.12),
    0 0 60px rgba(45,212,170,0.04),
    inset 0 1px 0 rgba(45,212,170,0.1);
}
.cmp-node--completed::before {
  background: linear-gradient(90deg, transparent, #2dd4aa, #4ade80, #2dd4aa, transparent);
  opacity: 0.95;
}

/* Current / next-to-play — pulses */
.cmp-node--current {
  border-color: var(--node-color) !important;
  border-width: 2px !important;
  animation: cmp-node-pulse 2.4s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes cmp-node-pulse {
  0%, 100% { box-shadow: 0 8px 36px rgba(0,0,0,0.5), 0 0 22px var(--node-glow); }
  50%       { box-shadow: 0 10px 52px rgba(0,0,0,0.45), 0 0 58px var(--node-glow), 0 0 96px var(--node-glow); }
}

/* Boss unlocked: hot pink / purple breathing glow */
.cmp-node--boss.cmp-node--unlocked {
  animation: cmp-boss-node-pulse 3s ease-in-out infinite;
}
@keyframes cmp-boss-node-pulse {
  0%, 100% { box-shadow: 0 16px 64px rgba(244,114,182,0.18), 0 0 70px rgba(244,63,94,0.07); border-color: rgba(244,114,182,0.44); }
  50%       { box-shadow: 0 20px 90px rgba(244,114,182,0.28), 0 0 140px rgba(244,63,94,0.13); border-color: rgba(168,85,247,0.58); }
}

/* ==========================
   COMPLETED CHECK BADGE
   ========================== */
.cmp-node-done-badge {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #2dd4aa, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 14px rgba(45,212,170,0.6), 0 0 28px rgba(45,212,170,0.2);
  z-index: 3;
  border: 2px solid rgba(255,255,255,0.18);
}

/* NEXT badge for current level */
.cmp-node-current-badge {
  position: absolute;
  top: -12px;
  left: 14px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--node-color, #7c3aed);
  border-radius: 20px;
  padding: 3px 10px;
  box-shadow: 0 3px 14px var(--node-glow, #7c3aed44), 0 0 24px var(--node-glow, #7c3aed44);
  z-index: 3;
  border: 1.5px solid rgba(255,255,255,0.22);
  animation: cmp-next-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cmp-next-badge-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ==========================
   NODE INNER ELEMENTS
   ========================== */
.cmp-node-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cmp-node-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-color, #7c3aed);
  background: rgba(var(--node-rgb, 124,58,237), 0.18);
  border: 1.5px solid rgba(var(--node-rgb, 124,58,237), 0.34);
  box-shadow:
    0 4px 20px rgba(var(--node-rgb, 124,58,237), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cmp-node-icon .cmp-svg-icon { width: 24px; height: 24px; }

.cmp-node-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cmp-node-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* Level number — solid colored chip */
.cmp-node-num {
  font-size: 0.66rem;
  font-weight: 900;
  color: rgba(0,0,0,0.85);
  background: var(--node-color, #7c3aed);
  border-radius: 7px;
  padding: 3px 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.cmp-node-title {
  font-weight: 900;
  font-size: 1.08rem;
  color: #f8fafc;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Flavor subtitle under level name */
.cmp-node-flavor {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.52);
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
}
.cmp-node-obj {
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  white-space: normal;
}

/* Challenge type tag */
.cmp-obj-type {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 3px;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 6px;
  padding: 2px 7px;
  margin-bottom: 3px;
  line-height: 1;
  width: fit-content;
  max-width: 100%;
}
.cmp-obj-type--timer  { color: #7dd3fc; background: rgba(14,165,233,0.16); border: 1px solid rgba(14,165,233,0.28); }
.cmp-obj-type--coins  { color: #fde68a; background: rgba(245,158,11,0.16); border: 1px solid rgba(245,158,11,0.28); }
.cmp-obj-type--dodge  { color: #f9a8d4; background: rgba(236,72,153,0.16); border: 1px solid rgba(236,72,153,0.28); }
.cmp-obj-type--boss   { color: #fca5a5; background: rgba(244,63,94,0.18);  border: 1px solid rgba(244,63,94,0.32);  }
.cmp-obj-type--multi  { color: #c4b5fd; background: rgba(168,85,247,0.16); border: 1px solid rgba(168,85,247,0.28); }

/* ==========================
   DIFFICULTY BADGE PILLS — solid fills for visibility
   ========================== */
.cmp-diff-badge {
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.cmp-diff-easy   { color: #022c22; background: linear-gradient(90deg, #2dd4aa, #4ade80); box-shadow: 0 2px 8px rgba(45,212,170,0.35);  }
.cmp-diff-medium { color: #1c0a00; background: linear-gradient(90deg, #fb923c, #fbbf24); box-shadow: 0 2px 8px rgba(251,146,60,0.38); }
.cmp-diff-hard   { color: #fff;    background: linear-gradient(90deg, #f43f5e, #ec4899); box-shadow: 0 2px 8px rgba(244,63,94,0.42);   }
.cmp-diff-expert { color: #fff;    background: linear-gradient(90deg, #a855f7, #7c3aed); box-shadow: 0 2px 8px rgba(168,85,247,0.38); }
.cmp-diff-boss   { color: #fff;    background: linear-gradient(90deg, #ec4899, #f97316); box-shadow: 0 2px 8px rgba(236,72,153,0.48); font-size: 0.64rem; letter-spacing: 0.14em; }

/* ==========================
   NODE BOTTOM ROW
   ========================== */
.cmp-node-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.cmp-node-right-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Stars — golden, prominent */
.cmp-node-stars { display: flex; gap: 3px; align-items: center; }
.cmp-node-star {
  display: flex;
  align-items: center;
  color: rgba(251,191,36,0.22);
  transition: color 0.15s, filter 0.15s, transform 0.15s;
}
.cmp-node-star--on {
  color: #fbbf24;
  filter: drop-shadow(0 0 5px #f59e0baa);
  transform: scale(1.15);
}

/* Reward coins — gold gradient pill */
.cmp-node-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  background: linear-gradient(90deg, rgba(245,158,11,0.22), rgba(251,191,36,0.12));
  border: 1px solid rgba(245,158,11,0.36);
  border-radius: 20px;
  transition: background 0.15s;
}
.cmp-reward-coin-icon {
  color: #fbbf24;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px #f59e0b99);
}
.cmp-node-reward-amt {
  font-size: 0.88rem;
  font-weight: 900;
  color: #fde68a;
  letter-spacing: 0.02em;
}

/* ==========================
   NODE BUTTONS — bigger, bolder
   ========================== */
.cmp-node-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.52rem 1.05rem;
  min-height: 38px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 900;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.05em;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: transform 0.14s cubic-bezier(0.2,0.8,0.3,1),
              box-shadow 0.14s cubic-bezier(0.2,0.8,0.3,1),
              filter 0.12s ease;
  will-change: transform;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.cmp-node-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 3px;
}
.cmp-node-btn:hover:not(:disabled) {
  filter: brightness(1.2);
  transform: translateY(-2.5px) scale(1.04);
}
.cmp-node-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.96);
  filter: brightness(0.88);
  transition-duration: 0.06s;
}

/* Shine sweep — plays on current-level CTAs only */
.cmp-node-btn--play::after,
.cmp-node-btn--boss-fight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.2) 50%,
    transparent 75%
  );
  transform: translateX(-110%);
  pointer-events: none;
  border-radius: inherit;
}
.cmp-node--current .cmp-node-btn--play::after,
.cmp-node--current .cmp-node-btn--boss-fight::after {
  animation: cmp-btn-shine 3.2s ease-in-out infinite 1.5s;
}
@keyframes cmp-btn-shine {
  0%, 100% { transform: translateX(-110%); }
  28%       { transform: translateX(160%); }
}

/* PLAY — vivid gradient with node-color glow */
.cmp-node-btn--play {
  background: linear-gradient(
    148deg,
    var(--node-color, #7c3aed) 0%,
    rgba(var(--node-rgb, 124,58,237), 0.7) 100%
  );
  color: #fff;
  box-shadow:
    0 4px 20px rgba(var(--node-rgb, 124,58,237), 0.55),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.cmp-node-btn--play:hover:not(:disabled) {
  box-shadow:
    0 7px 32px rgba(var(--node-rgb, 124,58,237), 0.75),
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.28);
}
/* Idle glow pulse on the current unlocked level */
.cmp-node--current .cmp-node-btn--play {
  animation: cmp-play-glow 2.5s ease-in-out infinite;
}
.cmp-node--current .cmp-node-btn--play:hover:not(:disabled) {
  animation-play-state: paused;
}
@keyframes cmp-play-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(var(--node-rgb, 124,58,237), 0.55), 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.24); }
  50%       { box-shadow: 0 7px 34px rgba(var(--node-rgb, 124,58,237), 0.82), 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.28); }
}

/* BOSS FIGHT — multi-color dramatic pulse */
.cmp-node-btn--boss-fight {
  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 52%, #f97316 100%);
  color: #fff;
  box-shadow:
    0 5px 24px rgba(244,63,94,0.62),
    0 0 42px rgba(236,72,153,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22);
  font-size: 0.92rem;
  padding: 0.6rem 1.3rem;
  min-height: 40px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  animation: cmp-boss-btn-pulse 2.2s ease-in-out infinite;
  letter-spacing: 0.06em;
}
.cmp-node-btn--boss-fight:hover:not(:disabled) {
  animation-play-state: paused;
  box-shadow: 0 10px 44px rgba(244,63,94,0.88), 0 0 70px rgba(236,72,153,0.4), inset 0 1px 0 rgba(255,255,255,0.28);
}
@keyframes cmp-boss-btn-pulse {
  0%, 100% {
    box-shadow: 0 5px 24px rgba(244,63,94,0.62), 0 0 42px rgba(236,72,153,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  50% {
    box-shadow: 0 8px 40px rgba(244,63,94,0.82), 0 0 68px rgba(236,72,153,0.36), inset 0 1px 0 rgba(255,255,255,0.28);
  }
}

/* REPLAY — teal glass (signals completion clearly) */
.cmp-node-btn--replay {
  background: rgba(45,212,170,0.1);
  border: 1.5px solid rgba(45,212,170,0.3);
  color: #2dd4aa;
  font-size: 0.8rem;
  box-shadow: 0 2px 10px rgba(45,212,170,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.cmp-node-btn--replay:hover:not(:disabled) {
  background: rgba(45,212,170,0.2);
  border-color: rgba(45,212,170,0.5);
  color: #6ee7b7;
  box-shadow: 0 4px 20px rgba(45,212,170,0.32);
  filter: none;
}

/* LOCKED — clearly non-interactive */
.cmp-node-btn--locked {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.28);
  cursor: not-allowed;
  pointer-events: none;
  font-size: 0.8rem;
  gap: 4px;
  box-shadow: none;
  filter: saturate(0.2);
  opacity: 0.65;
}

/* ============================================================
   BACK BUTTON (old .cmp-back-btn kept for other screens)
   ============================================================ */
.cmp-back-btn {
  align-self: center;
  margin-top: 1rem;
  padding: 0.6rem 1.75rem;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.cmp-back-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.cmp-back-btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 0.06s; }
.cmp-back-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }



/* ============================================================
   CAMPAIGN INTRO SCREEN
   ============================================================ */
#campaign-intro {
  background: #07070fcc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
}

.cmp-intro-box {
  background: #12121f;
  border: 1px solid #1e1b4b;
  border-radius: 20px;
  padding: 2rem 2rem 1.5rem;
  max-width: 420px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 0 60px #7c3aed33;
  position: relative;
  animation: cmp-intro-in 0.3s ease;
}

@keyframes cmp-intro-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.cmp-intro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cmp-intro-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  background: #1a1a2e;
  border-radius: 8px;
  padding: 3px 10px;
}

.cmp-intro-diff {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cmp-intro-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  line-height: 1.1;
}

/* Hype / flavor line (replaces cmp-intro-sub) */
.cmp-intro-hype {
  font-size: 0.88rem;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.02em;
  font-style: italic;
  margin: 0;
  line-height: 1.3;
}

.cmp-intro-objective {
  background: #0f0f1a;
  border: 1px solid #1e1b4b;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.cmp-intro-obj-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.78);
  margin-bottom: 4px;
}

.cmp-intro-obj-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: #e2e8f0;
}

.cmp-intro-reward {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
}

.cmp-intro-reward-val {
  font-weight: 800;
  font-size: 1.1rem;
  color: #f59e0b;
}

.cmp-intro-start-btn {
  width: 100%;
  padding: 0.9rem 1.75rem;
  font-size: 1.02rem;
  font-weight: 900;
  border-radius: 14px;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* Shine sweep on intro start CTA */
.cmp-intro-start-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,0.18) 50%,
    transparent 75%
  );
  transform: translateX(-110%);
  pointer-events: none;
  border-radius: inherit;
  animation: cmp-btn-shine 3s ease-in-out infinite 1s;
}
/* Difficulty-matched gradient overrides for intro start button */
.cmp-intro--easy   .cmp-intro-start-btn.btn { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 6px 28px rgba(34,197,94,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
.cmp-intro--medium .cmp-intro-start-btn.btn { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 6px 28px rgba(245,158,11,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
.cmp-intro--hard   .cmp-intro-start-btn.btn { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 6px 28px rgba(239,68,68,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
.cmp-intro--expert .cmp-intro-start-btn.btn { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 6px 28px rgba(168,85,247,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
.cmp-intro--boss   .cmp-intro-start-btn.btn { background: linear-gradient(135deg, #f43f5e, #ec4899 52%, #f97316); box-shadow: 0 6px 36px rgba(244,63,94,0.68), inset 0 1px 0 rgba(255,255,255,0.22); animation: cmp-boss-btn-pulse 2.2s ease-in-out infinite; }
.cmp-intro--easy   .cmp-intro-start-btn.btn:hover { box-shadow: 0 10px 38px rgba(34,197,94,0.85), inset 0 1px 0 rgba(255,255,255,0.26); }
.cmp-intro--medium .cmp-intro-start-btn.btn:hover { box-shadow: 0 10px 38px rgba(245,158,11,0.85), inset 0 1px 0 rgba(255,255,255,0.26); }
.cmp-intro--hard   .cmp-intro-start-btn.btn:hover { box-shadow: 0 10px 38px rgba(239,68,68,0.85), inset 0 1px 0 rgba(255,255,255,0.26); }
.cmp-intro--expert .cmp-intro-start-btn.btn:hover { box-shadow: 0 10px 38px rgba(168,85,247,0.85), inset 0 1px 0 rgba(255,255,255,0.26); }
.cmp-intro--boss   .cmp-intro-start-btn.btn:hover { box-shadow: 0 12px 46px rgba(244,63,94,0.92), inset 0 1px 0 rgba(255,255,255,0.28); animation-play-state: paused; }

.cmp-intro-back-btn.btn {
  padding: 0.45rem 0.9rem;
  min-height: 36px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  box-shadow: none;
  align-self: center;
  width: auto;
}
.cmp-intro-back-btn.btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.82);
  transform: none;
  box-shadow: none;
}

.cmp-intro-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07070fdd;
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 5rem;
  font-weight: 900;
  color: #a855f7;
  text-shadow: 0 0 40px #7c3aed;
  pointer-events: none;
}

/* ---- Intro card additions: animated icon, tips, difficulty glow ---- */
.cmp-intro-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmp-intro-icon {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 40px rgba(124,58,237,0.06);
  color: #f8fafc;
  animation: cmp-intro-icon-bob 2.2s ease-in-out infinite;
}

@keyframes cmp-intro-icon-bob {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

.cmp-intro-head { flex: 1; }

.cmp-intro-tips { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cmp-intro-tips li {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.45rem 0.75rem 0.45rem 2rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.82);
  position: relative;
  line-height: 1.35;
}
.cmp-intro-tips li::before {
  content: '\25B6';
  position: absolute;
  left: 0.65rem;
  font-size: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--intro-accent, #a78bfa);
}

.cmp-intro-mechanic { margin-top: 0.4rem; padding: 0.55rem 0.85rem; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); }
.cmp-intro-mech-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: 5px; }
.cmp-intro-mech-text { font-weight: 600; color: rgba(255,255,255,0.88); font-size: 0.88rem; line-height: 1.45; }

/* Special rules list */
.cmp-intro-special-rules {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cmp-intro-special-rules li {
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.22);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fca5a5;
}

.cmp-intro-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

/* Difficulty glow variants */
.cmp-intro-box.cmp-intro--easy   { border-color: rgba(34,197,94,0.18);  box-shadow: 0 0 70px rgba(34,197,94,0.06);   --intro-accent: #4ade80; }
.cmp-intro-box.cmp-intro--medium { border-color: rgba(245,158,11,0.18); box-shadow: 0 0 70px rgba(245,158,11,0.06);  --intro-accent: #fbbf24; }
.cmp-intro-box.cmp-intro--hard   { border-color: rgba(239,68,68,0.18);  box-shadow: 0 0 80px rgba(239,68,68,0.08);   --intro-accent: #f87171; }
.cmp-intro-box.cmp-intro--expert { border-color: rgba(168,85,247,0.18); box-shadow: 0 0 90px rgba(168,85,247,0.10);  --intro-accent: #c084fc; }
.cmp-intro-box.cmp-intro--boss   { border-color: rgba(236,72,153,0.22); box-shadow: 0 0 110px rgba(236,72,153,0.12); --intro-accent: #f472b6; }

/* Full-screen countdown overlay shown after intro is dismissed */
.cmp-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999; /* ensure countdown always sits above other UI */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07070f;        /* fully opaque - never lets background bleed through */
  pointer-events: auto; /* lock UI during countdown */
}

/* The number/text lives in a child span so animation never touches the overlay opacity */
.cmp-cd-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8rem;
  font-weight: 900;
  color: #a855f7;
  text-shadow: 0 0 60px #7c3aed, 0 0 120px #7c3aed44;
  display: block;
}

.cmp-countdown-overlay.cmp-countdown-active {
  animation: cmp-countdown-backdrop 0.9s ease-in-out;
}

@keyframes cmp-countdown-backdrop {
  0%   { transform: scale(1.01); opacity: 0.98; }
  50%  { transform: scale(1.00); opacity: 1; }
  100% { transform: scale(1.01); opacity: 0.99; }
}

.cmp-cd-num.cmp-cd-pop {
  animation: cmp-cd-pop 0.46s cubic-bezier(.2,.9,.2,1);
}

.cmp-cd-num.cmp-cd-go {
  color: #22c55e;
  text-shadow: 0 0 80px #22c55e, 0 0 160px #22c55e44;
  animation: cmp-cd-go 0.34s cubic-bezier(.2,.9,.2,1);
}

@keyframes cmp-cd-go {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

.cmp-countdown-overlay.cmp-countdown-fadeout { opacity: 0; transition: opacity 0.26s ease-out; }

/* small pulse on the game canvas when GO occurs */
.campaign-go-pulse #game-canvas {
  animation: campaign-go-pulse 0.26s ease-out;
  transform-origin: center center;
}
@keyframes campaign-go-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes cmp-cd-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  30%  { opacity: 1; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1.0); opacity: 1; }
}

/* ============================================================
   CAMPAIGN HUD OVERLAY (shown during gameplay)
   ============================================================ */
#campaign-hud-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 980; /* keep below global overlays but above canvas/effects */
  pointer-events: none;
  padding: 6px 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cmp-hud-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.cmp-hud-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #07070fcc;
  border-radius: 6px;
  padding: 2px 8px;
}

.cmp-hud-progress {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(0,0,0,0.56);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 12px;
  white-space: nowrap;
  /* Progress bar fill via CSS custom property */
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.cmp-hud-progress::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--obj-pct, 0) * 100%);
  background: linear-gradient(90deg, rgba(124,58,237,0.68), rgba(168,85,247,0.68));
  transition: width 0.4s ease;
  z-index: 0;
  opacity: 0.96;
}
.cmp-hud-progress { position: relative; z-index: 1; }

.cmp-hud-timer {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  background: #0f0f1acc;
  border: 1px solid #1e1b4b;
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
}

.cmp-hud-dt {
  font-size: 0.88rem;
  font-weight: 900;
  color: #ef4444;
  background: #2d0505cc;
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 4px 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cmp-dt-pop {
  animation: cmp-dt-pop 0.4s ease;
}
@keyframes cmp-dt-pop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1.0); }
}

.cmp-hud-shrink {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ef4444;
  background: #2d0505cc;
  border: 1px solid #ef4444;
  border-radius: 8px;
  padding: 3px 10px;
  animation: cmp-dt-pop 0.3s ease;
}

.cmp-hud-arena {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(90deg, rgba(124,58,237,0.12), rgba(14,165,233,0.08));
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 8px;
  padding: 3px 10px;
}

/* ============================================================
   BOSS CANVAS OVERLAY
   ============================================================ */
#boss-canvas,
#campaign-wall-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 15;
  width: 100%;
  height: 100%;
}

/* ============================================================
   CAMPAIGN VICTORY SCREEN
   ============================================================ */
#campaign-victory {
  background: #07070fdd;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.cmp-v-box {
  background: #12121f;
  border: 1px solid #22c55e66;
  border-radius: 22px;
  padding: 2.2rem 2rem 1.8rem;
  max-width: 440px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 0 80px #22c55e22, 0 0 30px #7c3aed22;
  position: relative;
  overflow: hidden;
  animation: cmp-v-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cmp-victory-last {
  border-color: #f59e0b88;
  box-shadow: 0 0 80px #f59e0b22, 0 0 40px #ec489922;
}

@keyframes cmp-v-in {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.cmp-v-confetti {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;


.cmp-confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 3px;
  animation: cmp-confetti-fall linear forwards;
}
@keyframes cmp-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110%) rotate(540deg); opacity: 0; }
}

.cmp-v-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  background: linear-gradient(135deg, #22c55e, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cmp-victory-last .cmp-v-title {
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
}

.cmp-v-level-name {
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

/* Stars row */
.cmp-v-stars {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cmp-v-star {
  font-size: 2.4rem;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  display: inline-block;
}
.cmp-v-star-on {
  color: #f59e0b;
  text-shadow: 0 0 16px #f59e0b, 0 0 30px #f59e0b88;
  animation: cmp-star-pop 0.4s var(--delay, 0s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cmp-star-pop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* Reward */
.cmp-v-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
  background: #0f0f1a;
  border: 1px solid #1e1b4b;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;
}
.cmp-v-reward-icon { font-size: 1.1rem; }
.cmp-v-reward-amt {
  font-weight: 900;
  font-size: 1.25rem;
  color: #f59e0b;
}
.cmp-v-replay-reward { opacity: 0.7; }

/* Victory buttons */
.cmp-v-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
.cmp-v-btn {
  flex: 1;
  min-width: 110px;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  will-change: transform;
}
/* Next Level — dominant green CTA */
#cmp-v-next {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 6px 28px rgba(34,197,94,0.62), inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  flex: 2;
  font-size: 0.92rem;
  animation: cmp-v-next-pulse 2.4s ease-in-out infinite;
}
#cmp-v-next:hover {
  animation-play-state: paused;
  filter: brightness(1.12);
  box-shadow: 0 10px 40px rgba(34,197,94,0.85), inset 0 1px 0 rgba(255,255,255,0.28);
}
@keyframes cmp-v-next-pulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(34,197,94,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
  50%       { box-shadow: 0 8px 38px rgba(34,197,94,0.85), inset 0 1px 0 rgba(255,255,255,0.26); }
}

/* ============================================================
   CAMPAIGN DEFEAT SCREEN
   ============================================================ */
#campaign-defeat {
  background: #07070fdd;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.cmp-d-box {
  background: #12121f;
  border: 1px solid #ef444466;
  border-radius: 22px;
  padding: 2rem;
  max-width: 380px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 0 60px #ef444422;
  animation: cmp-v-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cmp-d-icon {
  font-size: 3rem;
  color: #ef4444;
  text-shadow: 0 0 20px #ef444488;
  line-height: 1;
  font-weight: 900;
}

.cmp-d-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: #ef4444;
  margin: 0;
}

.cmp-d-level {
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
  margin: 0;
}

.cmp-d-reason {
  color: rgba(255,255,255,0.82);
  font-size: 0.88rem;
  margin: 0;
  text-align: center;
}

.cmp-d-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  width: 100%;
}

.cmp-d-btn {
  flex: 1;
  min-width: 100px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 11px;
  cursor: pointer;
  will-change: transform;
}

.cmp-d-retry {
  font-size: 1rem;
  animation: cmp-retry-pulse 1.8s ease-in-out infinite;
}

@keyframes cmp-retry-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(124,58,237,0.55), 0 0 0 0 rgba(124,58,237,0.2); }
  50%       { box-shadow: 0 7px 32px rgba(124,58,237,0.75), 0 0 0 8px rgba(124,58,237,0); }
}

/* Small extras for enhanced victory / defeat UI */
.cmp-v-newbest {
  position: absolute;
  top: 10px;
  right: 14px;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #111827;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(236,72,153,0.14);
  transform-origin: center;
  animation: cmp-newbest-pop 0.42s cubic-bezier(0.2,1,0.3,1) both;
}
@keyframes cmp-newbest-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cmp-v-stats { color: rgba(255,255,255,0.86); font-weight:700; margin-top:6px; font-size:0.92rem; }
.cmp-d-progress { color: rgba(255,255,255,0.9); font-weight:800; margin-top:6px; }
.cmp-d-tip { margin-top:8px; font-size:0.9rem; color: rgba(255,255,255,0.8); background: #0f0f1a; padding: 0.5rem 0.75rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); text-align:center; }
.cmp-d-micro { margin-top:6px; color:#f59e0b; font-weight:800; }

/* ============================================================
   MODE SELECT SECTION (added to home screen)
   ============================================================ */
.home-mode-select {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.home-mode-card {
  background: #12121f;
  border: 1px solid #1e1b4b;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-align: left;
}

.home-mode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.home-mode-card-endless {
  border-color: #0ea5e966;
}
.home-mode-card-endless:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 24px #0ea5e922;
}

.home-mode-card-campaign {
  border-color: #7c3aed66;
}
.home-mode-card-campaign:hover {
  border-color: #a855f7;
  box-shadow: 0 8px 24px #7c3aed22;
}

.home-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.home-mode-icon-endless {
  background: linear-gradient(135deg, #0ea5e922, #38bdf822);
  color: #38bdf8;
  border: 1px solid #0ea5e944;
}

.home-mode-icon-campaign {
  background: linear-gradient(135deg, #7c3aed22, #a855f722);
  color: #a855f7;
  border: 1px solid #7c3aed44;
}

.home-mode-text { flex: 1; }

.home-mode-title {
  font-weight: 800;
  font-size: 1rem;
  color: #f8fafc;
  margin: 0 0 2px;
}

.home-mode-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.3;
}

.home-mode-arrow {
  color: #334155;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.home-mode-card:hover .home-mode-arrow {
  transform: translateX(3px);
  color: rgba(255,255,255,0.78);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Single-column road layout below 760px */
@media (max-width: 760px) {
  .cmp-road-inner { max-width: 100%; padding: 0.5rem 0.75rem 5rem; }
  .cmp-road-map::before { left: 24px; transform: none; width: 5px; }
  .cmp-road-row         { grid-template-columns: 52px 1fr; min-height: 120px; padding: 8px 0; }
  .cmp-road-row--left   { grid-template-columns: 52px 1fr; }
  .cmp-road-row--right  { grid-template-columns: 52px 1fr; }
  .cmp-road-connector   { order: -1; }
  .cmp-road-connector::before { left: 24px; transform: none; }
  .cmp-road-row--left  .cmp-road-cell--card,
  .cmp-road-row--right .cmp-road-cell--card {
    order: 0;
    justify-content: flex-start;
    padding-left: 8px;
    padding-right: 0;
  }
  /* Hide arms on mobile (left-spine layout) */
  .cmp-road-row--left  .cmp-road-cell--card::after,
  .cmp-road-row--right .cmp-road-cell--card::after { display: none; }
  .cmp-road-cell--spacer { display: none; }
  .cmp-road-node { max-width: 100%; min-width: 0; }
  .cmp-sticky-stats .cmp-sticky-stat--coins { display: none; }
  .cmp-chapter-tagname { display: none; }
  .cmp-road-header-toprow { margin-bottom: 0.15rem; }
  .cmp-road-nextup { font-size: 0.74rem; gap: 0.35rem; }
}

@media (max-width: 520px) {
  .cmp-sticky-hud { gap: 0.4rem; padding: 0.45rem 0.75rem 0; }
  .cmp-sticky-name { font-size: 0.85rem; }
  .cmp-sticky-stats { gap: 0.25rem; }
  .cmp-sticky-stat { font-size: 0.7rem; padding: 2px 6px; }
  .cmp-road-title { font-size: 1.9rem; }
  .cmp-road-statpills { gap: 0.3rem; margin-top: 0.5rem; }
  .cmp-road-pill { padding: 0.28rem 0.6rem; font-size: 0.76rem; }
  .cmp-road-nextup { font-size: 0.72rem; padding: 0.35rem 0.75rem; }
  .cmp-road-statsbar { padding: 0.5rem 0.7rem; flex-wrap: wrap; }
  .cmp-road-stat { padding: 0 0.5rem; }
  .cmp-road-stat-val { font-size: 0.95rem; }
  .cmp-road-node { padding: 0.75rem 0.85rem; }
  .cmp-node-title { font-size: 0.9rem; }
  .cmp-node-obj   { font-size: 0.78rem; }
  .cmp-node-btn   { font-size: 0.76rem; padding: 0.32rem 0.65rem; min-height: 34px; }
  .cmp-v-box, .cmp-d-box, .cmp-intro-box { padding: 1.5rem 1rem; }
  .cmp-intro-name { font-size: 1.3rem; }
  #campaign-hud-overlay { padding: 2px 8px 0; gap: 6px; }
  .cmp-hud-progress, .cmp-hud-timer { font-size: 0.72rem; padding: 3px 7px; }
}

@media (max-width: 360px) {
  .cmp-v-stars .cmp-v-star { font-size: 1.9rem; }
  .cmp-sticky-stats .cmp-sticky-stat--stars { display: none; }
}

/* ============================================================
   ANIMATIONS FOR UNLOCK
   ============================================================ */
.cmp-card-unlocked.cmp-newly-unlocked {
  animation: cmp-unlock-glow 1.2s ease;
}

@keyframes cmp-unlock-glow {
  0%   { box-shadow: 0 0 0 0 #a855f7; border-color: #a855f7; transform: scale(1); }
  30%  { box-shadow: 0 0 30px 8px #a855f766; transform: scale(1.04); }
  60%  { box-shadow: 0 0 20px 4px #a855f744; }
  100% { box-shadow: none; border-color: #7c3aed66; transform: scale(1); }
}

/* ============================================================
   REDUCED MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cmp-road-node,
  .cmp-road-connector-dot,
  .cmp-road-particle,
  .cmp-v-box,
  .cmp-d-box,
  .cmp-intro-box,
  .cmp-v-star-on,
  .cmp-confetti-piece,
  .cmp-d-retry,
  .cmp-node-btn--boss-fight,
  .cmp-node-btn--play,
  .cmp-intro-start-btn,
  #cmp-v-next,
  .cmp-node-current-badge,
  .cmp-road-outer::before,
  .cmp-road-outer::after,
  .cmp-chapter-divider-line::after,
  .cmp-road-masterprogress-fill::after,
  .cmp-sticky-progress-fill::after,
  .cmp-road-nextup,
  .cmp-node-star--on,
  .cmp-node--current::after,
  .cmp-road-title {
    animation: none !important;
    transition: none !important;
  }
}

.reduced-motion .cmp-road-node,
.reduced-motion .cmp-road-connector-dot,
.reduced-motion .cmp-road-particle,
.reduced-motion .cmp-v-box,
.reduced-motion .cmp-d-box,
.reduced-motion .cmp-intro-box,
.reduced-motion .cmp-v-star-on,
.reduced-motion .cmp-confetti-piece,
.reduced-motion .cmp-d-retry,
.reduced-motion .cmp-node-btn--boss-fight,
.reduced-motion .cmp-node-btn--play,
.reduced-motion .cmp-intro-start-btn,
.reduced-motion #cmp-v-next,
.reduced-motion .cmp-node-current-badge,
.reduced-motion .cmp-road-outer::before,
.reduced-motion .cmp-road-outer::after,
.reduced-motion .cmp-chapter-divider-line::after,
.reduced-motion .cmp-road-masterprogress-fill::after,
.reduced-motion .cmp-sticky-progress-fill::after,
.reduced-motion .cmp-road-nextup,
.reduced-motion .cmp-node-star--on,
.reduced-motion .cmp-node--current::after,
.reduced-motion .cmp-road-title {
  animation: none !important;
  transition: none !important;
}


/* ============================================================
   ANIMATIONS FOR UNLOCK
   ============================================================ */
.cmp-card-unlocked.cmp-newly-unlocked {
  animation: cmp-unlock-glow 1.2s ease;
}

@keyframes cmp-unlock-glow {
  0%   { box-shadow: 0 0 0 0 #a855f7; border-color: #a855f7; transform: scale(1); }
  30%  { box-shadow: 0 0 30px 8px #a855f766; transform: scale(1.04); }
  60%  { box-shadow: 0 0 20px 4px #a855f744; }
  100% { box-shadow: none; border-color: #7c3aed66; transform: scale(1); }
}

/* ============================================================
   AMBIENT POLISH — lightweight visual enhancement
   GPU-friendly: only transform, opacity, filter animations
   ============================================================ */

/* Drifting orb — slow radial blob that wanders behind content */
.cmp-road-outer::after {
  content: '';
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.07) 0%, rgba(14,165,233,0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  top: -5%;
  left: 0;
  filter: blur(64px);
  animation: cmp-orb-drift 32s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes cmp-orb-drift {
  0%   { transform: translate(0vw,  0vh)   scale(1);    opacity: 0.9;  }
  40%  { transform: translate(48vw, 28vh)  scale(1.25); opacity: 0.55; }
  100% { transform: translate(22vw, 72vh)  scale(0.85); opacity: 0.8;  }
}

/* Traveling light dot along chapter divider lines */
.cmp-chapter-divider-line::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -48px;
  width: 48px;
  height: calc(100% + 2px);
  background: radial-gradient(ellipse 50% 100% at center, rgba(255,255,255,0.75) 0%, transparent 100%);
  animation: cmp-line-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.cmp-chapter-divider--boss .cmp-chapter-divider-line::after {
  background: radial-gradient(ellipse 50% 100% at center, rgba(244,114,182,0.9) 0%, transparent 100%);
  animation-duration: 4.2s;
}
.cmp-chapter-divider-line:last-child::after { animation-delay: 2.4s; }
@keyframes cmp-line-sweep {
  0%   { left: -48px; opacity: 0;   }
  8%   {              opacity: 1;   }
  88%  {              opacity: 0.6; }
  100% { left: 100%;  opacity: 0;   }
}

/* Progress bars — moving scan highlight */
.cmp-road-masterprogress-fill::after,
.cmp-sticky-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60px;
  width: 60px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
}
.cmp-road-masterprogress-fill::after { animation: cmp-bar-scan 2.8s ease-in-out infinite 0.5s; }
.cmp-sticky-progress-fill::after     { animation: cmp-bar-scan 3s   ease-in-out infinite 1.2s; }
@keyframes cmp-bar-scan {
  0%   { left: -60px; opacity: 0;   }
  12%  {              opacity: 1;   }
  100% { left: 100%;  opacity: 0.7; }
}

/* NEXT UP strip — gentle breathing border/glow */
.cmp-road-nextup:not(.cmp-road-nextup--complete) {
  animation: cmp-nextup-pulse 3.5s ease-in-out infinite;
}
@keyframes cmp-nextup-pulse {
  0%, 100% { box-shadow: none;                                  border-color: rgba(124,58,237,0.28); }
  50%       { box-shadow: 0 0 14px 3px rgba(168,85,247,0.18);  border-color: rgba(168,85,247,0.46); }
}

/* Earned stars — staggered twinkle pulse */
.cmp-node-star--on {
  animation: cmp-star-twinkle 3.2s ease-in-out infinite;
}
.cmp-node-star--on:nth-child(2) { animation-delay: 0.75s; }
.cmp-node-star--on:nth-child(3) { animation-delay: 1.5s;  }
@keyframes cmp-star-twinkle {
  0%, 55%, 100% { filter: drop-shadow(0 0 5px #f59e0baa);  transform: scale(1.15); }
  28%           { filter: drop-shadow(0 0 10px #fbbf24cc) drop-shadow(0 0 22px rgba(251,191,36,0.36)); transform: scale(1.28); }
}

/* Current node — expanding ripple ring */
.cmp-node--current::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  border: 1.5px solid var(--node-color, #7c3aed);
  opacity: 0;
  animation: cmp-node-ripple 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cmp-node-ripple {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.09); opacity: 0;   }
}

/* Title glow — slow drift purple <-> cyan */
.cmp-road-title {
  animation: cmp-title-glow 8s ease-in-out infinite;
}
@keyframes cmp-title-glow {
  0%, 100% { filter: drop-shadow(0 2px 18px rgba(124,58,237,0.38)) drop-shadow(0 0 40px rgba(56,189,248,0.15)); }
  50%       { filter: drop-shadow(0 3px 24px rgba(56,189,248,0.48)) drop-shadow(0 0 52px rgba(124,58,237,0.22)); }
}

/* ============================================================
   REDUCED MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cmp-road-node,
  .cmp-road-connector-dot,
  .cmp-road-particle,
  .cmp-v-box,
  .cmp-d-box,
  .cmp-intro-box,
  .cmp-v-star-on,
  .cmp-confetti-piece,
  .cmp-d-retry {
    animation: none !important;
    transition: none !important;
  }
}

.reduced-motion .cmp-road-node,
.reduced-motion .cmp-road-connector-dot,
.reduced-motion .cmp-road-particle,
.reduced-motion .cmp-v-box,
.reduced-motion .cmp-d-box,
.reduced-motion .cmp-intro-box,
.reduced-motion .cmp-v-star-on,
.reduced-motion .cmp-confetti-piece,
.reduced-motion .cmp-d-retry {
  animation: none !important;
  transition: none !important;
}

/* Overrides to ensure chapter labels never get visually crossed by decorative sweeps */
.cmp-chapter-divider-line::after {
  display: none !important;
}

/* Reduce visual text density inside campaign nodes: hide minor flavor lines */
.cmp-node-flavor { display: none !important; }

/* Make locked nodes more readable: ensure label stacks above decorations */
.cmp-chapter-divider-label { position: relative; z-index: 1000; }

/* Accessibility: ensure traveling light doesn't capture pointer events */
.cmp-chapter-divider-line::after { pointer-events: none !important; }