/**
 * zTyping — God-Level UI/UX Upgrade Layer v1.0
 * Cyber-Arcade glassmorphism · neon gradients · 60fps micro-animations
 * Layers cleanly on top of all existing CSS — no game engine changes.
 */

/* ================================================================
   1. LUXURY DESIGN TOKENS — override base values
   ================================================================ */
:root {
  /* ── Richer palette ── */
  --gl-bg:          #05060c;
  --gl-bg-2:        #080a14;
  --gl-surface:     rgba(14, 12, 28, 0.72);
  --gl-surface-hi:  rgba(22, 18, 44, 0.88);
  --gl-border:      rgba(168, 85, 247, 0.28);
  --gl-border-lo:   rgba(168, 85, 247, 0.10);
  --gl-border-hi:   rgba(236, 72, 153, 0.55);

  /* ── Neon accent system ── */
  --neon-pink:      #ff2d9a;
  --neon-violet:    #9b30ff;
  --neon-cyan:      #00e5ff;
  --neon-green:     #00ff87;

  /* ── Typography ── */
  --font-ultra:     "Sora", "Outfit", system-ui, sans-serif;
  --font-ui:        "Outfit", system-ui, sans-serif;
  --font-code:      "JetBrains Mono", ui-monospace, monospace;

  /* ── Glow shadows ── */
  --glow-pink:      0 0 32px rgba(255, 45, 154, 0.45), 0 0 64px rgba(255, 45, 154, 0.18);
  --glow-violet:    0 0 32px rgba(155, 48, 255, 0.45), 0 0 64px rgba(155, 48, 255, 0.18);
  --glow-cyan:      0 0 24px rgba(0, 229, 255, 0.4),  0 0 48px rgba(0, 229, 255, 0.16);

  /* ── Premium gradients ── */
  --grad-cta:       linear-gradient(135deg, #ff2d9a 0%, #9b30ff 55%, #2d9aff 100%);
  --grad-neon-text: linear-gradient(120deg, #ff2d9a 0%, #c084fc 40%, #60a5fa 100%);
  --grad-card:      linear-gradient(160deg, rgba(30, 16, 56, 0.9) 0%, rgba(10, 8, 24, 0.95) 100%);
  --grad-header:    linear-gradient(180deg, rgba(5, 6, 12, 0.96) 0%, rgba(8, 6, 18, 0.88) 100%);
  --grad-aurora:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255, 45, 154, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85%  5%, rgba(155, 48, 255, 0.14), transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(0, 229, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #05060c 0%, #070810 40%, #05060c 100%);

  /* ── Glass morphism ── */
  --glass-bg:       rgba(14, 12, 30, 0.62);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-blur:     18px;
  --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Motion ── */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:      cubic-bezier(0.19, 1, 0.22, 1);
  --ease-snappy:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-mid:        280ms;
  --dur-slow:       500ms;
}


/* ================================================================
   2. BODY — Aurora background + animated grain
   ================================================================ */
body.page-arcade {
  font-family: var(--font-ui);
  background: var(--gl-bg);
  background-attachment: fixed;
}

body.page-arcade::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grad-aurora);
  animation: aurora-shift 18s ease-in-out infinite alternate;
}

@keyframes aurora-shift {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  50%  { filter: hue-rotate(12deg)  brightness(1.03); }
  100% { filter: hue-rotate(-6deg)  brightness(0.98); }
}

/* Particle canvas injected by JS */
#glParticles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* ================================================================
   3. HEADER — Luxury glassmorphic nav bar
   ================================================================ */
body.page-arcade #header.hub-header,
body.page-arcade #header {
  background: rgba(5, 6, 12, 0.82) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 32px rgba(0, 0, 0, 0.5) !important;
  transition: background var(--dur-mid) ease, box-shadow var(--dur-mid) ease !important;
}

/* Logo hover shimmer */
body.page-arcade .site-logo {
  filter: drop-shadow(0 0 0px transparent);
  transition: filter 0.4s var(--ease-expo) !important;
}
body.page-arcade #siteNameLink:hover .site-logo {
  filter: drop-shadow(0 0 12px rgba(255, 45, 154, 0.5)) brightness(1.1) !important;
}

/* Hub tab pills */
body.page-arcade .hub-tabs,
body.page-arcade #siteNav.hub-tabs {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 2px !important;
}

body.page-arcade .hub-tab {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: rgba(180, 160, 220, 0.75) !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease !important;
  position: relative;
}

body.page-arcade .hub-tab:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body.page-arcade .hub-tab.is-active {
  color: #fff !important;
  background: rgba(168, 85, 247, 0.22) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* CTA button — neon pill */
body.page-arcade .hub-cta-btn {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  background: var(--grad-cta) !important;
  background-size: 200% 200% !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  box-shadow: 0 4px 20px rgba(155, 48, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  animation: cta-shimmer 4s ease infinite !important;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease !important;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}

body.page-arcade .hub-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

body.page-arcade .hub-cta-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 32px rgba(155, 48, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.page-arcade .hub-cta-btn:hover::before {
  transform: translateX(100%);
}

body.page-arcade .hub-cta-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

@keyframes cta-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}


/* ================================================================
   4. HERO SECTION — god-level cinematic entrance
   ================================================================ */
body.page-arcade .arcade-hero {
  position: relative;
  padding: clamp(52px, 9vh, 100px) 0 clamp(40px, 6vh, 64px) !important;
}

body.page-arcade .arcade-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  translate: -50% 0;
  width: 680px;
  height: 680px;
  max-width: 100vw;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(155, 48, 255, 0.14) 0%, rgba(255, 45, 154, 0.10) 45%, transparent 72%);
  filter: blur(40px);
  pointer-events: none;
  animation: hero-orb 12s ease-in-out infinite alternate;
}

@keyframes hero-orb {
  from { transform: scale(0.9) translate(0, 0); opacity: 0.7; }
  to   { transform: scale(1.1) translate(2%, -2%); opacity: 1; }
}

/* Hero h1 */
body.page-arcade .arcade-hero h1 {
  font-family: var(--font-ultra) !important;
  font-size: clamp(2.8rem, 8vw, 5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.04 !important;
}

/* Neon gradient accent text */
body.page-arcade .arcade-hero .hero-line.accent,
body.page-arcade .hero-line.accent {
  background: var(--grad-neon-text) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 28px rgba(255, 45, 154, 0.4)) !important;
  animation: text-shimmer 6s ease infinite !important;
}

@keyframes text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Live pills upgrade */
body.page-arcade .pill-live {
  background: rgba(0, 255, 135, 0.10) !important;
  border: 1px solid rgba(0, 255, 135, 0.35) !important;
  color: #00ff87 !important;
  box-shadow: 0 0 16px rgba(0, 255, 135, 0.25) !important;
  font-family: var(--font-code) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
}

body.page-arcade .pill-live .dot {
  background: var(--neon-green) !important;
  box-shadow: 0 0 8px var(--neon-green) !important;
}

/* Hero metrics bar upgrade */
body.page-arcade .hero-metrics-bar {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 20px !important;
}

body.page-arcade .metric-val {
  font-family: var(--font-ultra) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff 30%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Hero CTAs upgrade */
body.page-arcade .hero-cta-btn.primary {
  background: var(--grad-cta) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 8px 32px rgba(255, 45, 154, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  animation: cta-shimmer 5s ease infinite !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
}

body.page-arcade .hero-cta-btn.primary:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 16px 48px rgba(255, 45, 154, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body.page-arcade .hero-cta-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
}

body.page-arcade .hero-cta-btn.secondary:hover {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.7) !important;
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.35) !important;
  transform: translateY(-4px) !important;
}


/* ================================================================
   5. GAME CARDS — 3D glassmorphic arcade cartridges
   ================================================================ */
body.page-arcade .arcade-grid .card {
  background: var(--grad-card) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition:
    transform 0.4s var(--ease-expo),
    box-shadow 0.4s var(--ease-expo),
    border-color 0.3s ease !important;
  will-change: transform;
}

body.page-arcade .arcade-grid .card:hover {
  transform: translateY(-10px) scale(1.018) !important;
  border-color: rgba(255, 45, 154, 0.45) !important;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 45, 154, 0.2),
    0 0 40px rgba(255, 45, 154, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.page-arcade .arcade-grid .card::before {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 45, 154, 0.55),
    rgba(155, 48, 255, 0.25) 50%,
    transparent 70%
  ) !important;
  border-radius: 20px !important;
}

body.page-arcade .arcade-grid .card:hover .thumb canvas,
body.page-arcade .arcade-grid .card:hover .thumb .thumb-img {
  transform: scale(1.08) !important;
  filter: saturate(1.2) brightness(1.08) !important;
}

/* Card title */
body.page-arcade .arcade-grid .title {
  font-family: var(--font-ultra) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* PLAY button */
body.page-arcade .arcade-grid .play {
  font-family: var(--font-code) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 999px !important;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.page-arcade .arcade-grid .play::before {
  background: var(--grad-cta) !important;
}

body.page-arcade .arcade-grid .play:hover:not(.disabled) {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px rgba(255, 45, 154, 0.45) !important;
}

body.page-arcade .arcade-grid .status.live {
  box-shadow: 0 0 14px rgba(0, 255, 135, 0.3) !important;
  font-family: var(--font-code) !important;
}

body.page-arcade .section-label {
  font-family: var(--font-ultra) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(120deg, #fff 30%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ================================================================
   6. PILLAR CARDS
   ================================================================ */
body.page-arcade .pillar-card {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.35s var(--ease-expo) !important;
}

body.page-arcade .pillar-card:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(168, 85, 247, 0.2),
    0 0 32px rgba(168, 85, 247, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.page-arcade .pillar-card h3 {
  font-family: var(--font-ultra) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

body.page-arcade .pillar-icon {
  border-radius: 14px !important;
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2) !important;
}

body.page-arcade .pillar-tag {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #c084fc !important;
  font-family: var(--font-code) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}


/* ================================================================
   7. BENCHMARK CARDS
   ================================================================ */
body.page-arcade .benchmark-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.35s var(--ease-expo) !important;
}

body.page-arcade .benchmark-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-arcade .tier-wpm {
  font-family: var(--font-ultra) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff 30%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.page-arcade .benchmark-card::before {
  height: 4px !important;
  border-radius: 4px 4px 0 0 !important;
}

body.page-arcade .benchmark-card.tier-master::before {
  background: linear-gradient(90deg, #ff2d9a, #9b30ff, #00e5ff) !important;
}


/* ================================================================
   8. GUIDE PREVIEW CARDS
   ================================================================ */
body.page-arcade .guide-preview-card {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.35s var(--ease-expo) !important;
}

body.page-arcade .guide-preview-card:hover {
  border-color: rgba(236, 72, 153, 0.5) !important;
  transform: translateY(-7px) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(236, 72, 153, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.page-arcade .guide-preview-card h3 {
  font-family: var(--font-ultra) !important;
  font-weight: 700 !important;
}

body.page-arcade .guide-badge {
  font-family: var(--font-code) !important;
  box-shadow: 0 0 10px rgba(255, 45, 154, 0.2) !important;
}


/* ================================================================
   9. SECTION HEADERS
   ================================================================ */
body.page-arcade .section-kicker {
  font-family: var(--font-code) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.page-arcade .section-title-hub {
  font-family: var(--font-ultra) !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  background: linear-gradient(135deg, #fff 40%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ================================================================
   10. BOTTOM CTA BANNER
   ================================================================ */
body.page-arcade .cta-inner {
  background: linear-gradient(160deg, rgba(45, 20, 80, 0.92) 0%, rgba(18, 10, 36, 0.96) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 28px !important;
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.page-arcade .cta-inner h2 {
  font-family: var(--font-ultra) !important;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(120deg, #fff 30%, #c084fc 80%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ================================================================
   11. FOOTER
   ================================================================ */
body.page-arcade #footer {
  border-top: 1px solid rgba(168, 85, 247, 0.15) !important;
  background: rgba(5, 6, 12, 0.95) !important;
  backdrop-filter: blur(24px) !important;
}

body.page-arcade .arcade-footer-note {
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
}

body.page-arcade .arcade-footer-ver {
  font-family: var(--font-code) !important;
  color: rgba(168, 85, 247, 0.6) !important;
}


/* ================================================================
   12. SCROLL REVEALS
   ================================================================ */
body.page-arcade .zm-reveal,
body.page-arcade .reveal-on-scroll {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition:
    opacity 0.7s var(--ease-expo),
    transform 0.7s var(--ease-expo) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
}

body.page-arcade .zm-reveal.is-visible,
body.page-arcade .reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

body.page-arcade .zm-stagger > * {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo) !important;
}

body.page-arcade .zm-stagger.is-visible > * {
  opacity: 1 !important;
  transform: none !important;
}


/* ================================================================
   13. MOBILE NAV
   ================================================================ */
@media (max-width: 1023px) {
  body.page-arcade .hub-tabs,
  body.page-arcade #siteNav.hub-tabs,
  #siteNav {
    z-index: 1200 !important;
    background: rgba(8, 6, 20, 0.98) !important;
    backdrop-filter: blur(28px) !important;
    border-left: 1px solid rgba(168, 85, 247, 0.2) !important;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.7) !important;
  }

  body.page-arcade .hub-tab {
    padding: 13px 18px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
  }

  body.page-arcade .hub-tab.is-active {
    background: rgba(168, 85, 247, 0.18) !important;
  }

  body.page-arcade #header,
  #header {
    z-index: 1000 !important;
  }

  body.page-arcade .hub-end {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  body.page-arcade #menuToggle,
  body.page-arcade .menu-toggle,
  body.page-arcade .hub-menu-toggle,
  #menuToggle,
  .menu-toggle {
    position: relative !important;
    z-index: 1300 !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  @media (max-width: 520px) {
    body.page-arcade .hub-end .hub-cta-btn {
      display: none !important;
    }
  }

  body.nav-open .hub-cta-btn,
  body.nav-open .hero-cta-btn {
    pointer-events: none !important;
  }
}

body.page-arcade .nav-backdrop,
#navBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1150 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(6px) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body.page-arcade.nav-open .nav-backdrop,
body.nav-open #navBackdrop,
body.page-arcade.nav-open #navBackdrop {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* ================================================================
   14. TYPING TRAINER PAGE
   ================================================================ */
body.page-typing-trainer .game-stage,
body.page-typing-trainer .game-panel {
  background: linear-gradient(160deg, rgba(18, 10, 42, 0.88) 0%, rgba(10, 6, 24, 0.92) 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}

body.page-typing-trainer .gp-head h1 {
  font-family: var(--font-ultra) !important;
  font-size: clamp(2.2rem, 5vw, 3rem) !important;
  font-weight: 900 !important;
  background: var(--grad-neon-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ================================================================
   15. ACCESSIBILITY
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  body.page-arcade .hub-cta-btn,
  body.page-arcade .hero-cta-btn.primary,
  body.page-arcade .arcade-hero .hero-line.accent,
  body.page-arcade .section-label {
    animation: none !important;
    background-position: 0% 50% !important;
  }

  body.page-arcade .arcade-hero::before,
  body.page-arcade::before {
    animation: none !important;
  }

  body.page-arcade .arcade-grid .card,
  body.page-arcade .pillar-card,
  body.page-arcade .benchmark-card,
  body.page-arcade .guide-preview-card {
    transition: none !important;
  }

  body.page-arcade .zm-reveal,
  body.page-arcade .reveal-on-scroll,
  body.page-arcade .zm-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ================================================================
   16. MISCELLANEOUS POLISH
   ================================================================ */

/* Smooth scrollbar */
:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.35);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.6);
}

/* Focus ring upgrade */
*:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.8) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Text selection */
::selection {
  background: rgba(155, 48, 255, 0.35);
  color: #fff;
}

/* Section spacing upgrade */
body.page-arcade .hub-pillars-section,
body.page-arcade .hub-benchmarks-section,
body.page-arcade .hub-guides-preview-section {
  margin-top: 88px !important;
  margin-bottom: 56px !important;
}

/* ================================================================
   GOD-LEVEL LAYOUT FIX — Maximum Width Utilization v2.0
   Problem: Content compressed to ~860-1080px narrow center column
   while wide monitors have 300-500px empty space on both sides.
   Fix: Use full space between the ad rails dynamically.
   ================================================================ */

/* ── CORE CONTAINER: Fill available space between rails ── */
body.page-arcade .site-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(16px, 2.5vw, 32px) !important;
  padding-right: clamp(16px, 2.5vw, 32px) !important;
  box-sizing: border-box !important;
}

body.page-arcade .site-layout,
body.page-arcade .content-centre,
body.page-arcade .content-centre.layout-wide,
body.page-arcade .layout-wide {
  max-width: 100% !important;
  width: 100% !important;
}

/* At wide screens: push the ENTIRE portal root inward so content fills
   the space BETWEEN the fixed ad rails (not behind them).
   Rail width = 300px each side. Add 20px breathing room per side. */
@media (min-width: 1280px) {
  body.page-arcade #portalRoot {
    padding-left: calc(var(--rail-width, 300px) + 20px) !important;
    padding-right: calc(var(--rail-width, 300px) + 20px) !important;
  }
}

/* ── HERO SECTION: Use full container width ── */
body.page-arcade .arcade-hero {
  max-width: 100% !important;
  width: 100% !important;
  padding-top: clamp(48px, 8vh, 88px) !important;
  padding-bottom: clamp(36px, 5vh, 60px) !important;
}

/* Hero h1 can go bigger on wide screens */
body.page-arcade .arcade-hero h1 {
  font-size: clamp(3rem, 6.5vw, 5.5rem) !important;
  letter-spacing: -0.045em !important;
}

/* Lead paragraph — wider comfortable reading */
body.page-arcade .arcade-lead {
  max-width: 52rem !important;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
}

/* ── METRICS BAR: Full width, responsive layout ── */
body.page-arcade .hero-metrics-bar {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: space-around !important;
  padding: 20px 32px !important;
  margin-top: 40px !important;
}

@media (max-width: 680px) {
  body.page-arcade .hero-metrics-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    margin-top: 24px !important;
  }
  body.page-arcade .hero-metrics-bar .metric-sep {
    display: none !important;
  }
}

body.page-arcade .metric-val {
  font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
}

body.page-arcade .metric-lbl {
  font-size: 0.68rem !important;
}

/* ── GAME COLLECTION: Full width grid ── */
body.page-arcade .arcade-games {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 56px !important;
}

/* Auto-fill grid — use ALL available space */
body.page-arcade #gameGrid.arcade-grid,
body.page-arcade #gameLibrary.arcade-grid,
body.page-arcade .game-grid-hub {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
  gap: 24px !important;
}

/* Cards bigger on wide screens */
@media (min-width: 900px) {
  body.page-arcade #gameGrid.arcade-grid,
  body.page-arcade #gameLibrary.arcade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

/* ── SECTION HEAD: Full width, bigger ── */
body.page-arcade .section-head-hub {
  max-width: 100% !important;
  margin-bottom: 40px !important;
}

body.page-arcade .section-title-hub {
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
}

/* ── PILLARS GRID: Full width, adaptive columns ── */
body.page-arcade .hub-pillars-section {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 80px !important;
}

body.page-arcade .hub-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
  gap: 24px !important;
}

@media (min-width: 900px) {
  body.page-arcade .hub-pillars-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── BENCHMARKS GRID: Full width, adaptive ── */
body.page-arcade .hub-benchmarks-section {
  max-width: 100% !important;
  width: 100% !important;
}

body.page-arcade .benchmarks-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
  gap: 20px !important;
}

@media (min-width: 900px) {
  body.page-arcade .benchmarks-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── GUIDES PREVIEW: Full width, bigger cards ── */
body.page-arcade .hub-guides-preview-section {
  max-width: 100% !important;
  width: 100% !important;
}

body.page-arcade .guides-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
  gap: 24px !important;
}

@media (min-width: 900px) {
  body.page-arcade .guides-preview-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── CTA BANNER: Full width ── */
body.page-arcade .hub-bottom-cta {
  max-width: 100% !important;
  width: 100% !important;
}

body.page-arcade .cta-inner {
  padding: 60px 48px !important;
}


/* ================================================================
   GOD-LEVEL ANIMATIONS v2.0 — Richer, More Alive
   ================================================================ */

/* ── Glowing animated divider between sections ── */
body.page-arcade .arcade-games::after,
body.page-arcade .hub-pillars-section::after,
body.page-arcade .hub-benchmarks-section::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 80px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 45, 154, 0.5) 20%,
    rgba(155, 48, 255, 0.6) 50%,
    rgba(0, 229, 255, 0.5) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: divider-sweep 4s ease infinite;
}

@keyframes divider-sweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── Card SHINE sweep on hover ── */
body.page-arcade .arcade-card,
body.page-arcade .pillar-card,
body.page-arcade .benchmark-card,
body.page-arcade .guide-preview-card {
  position: relative;
  overflow: hidden;
}

body.page-arcade .arcade-card::after,
body.page-arcade .pillar-card::after,
body.page-arcade .benchmark-card::after,
body.page-arcade .guide-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 80%
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0s;
  pointer-events: none;
  z-index: 3;
}

body.page-arcade .arcade-card:hover::after,
body.page-arcade .pillar-card:hover::after,
body.page-arcade .benchmark-card:hover::after,
body.page-arcade .guide-preview-card:hover::after {
  transform: translateX(150%) skewX(-15deg);
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── Bigger, more dramatic card hover lifts ── */
body.page-arcade .arcade-card:hover {
  transform: translateY(-14px) scale(1.022) !important;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 45, 154, 0.3),
    0 0 50px rgba(255, 45, 154, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ── Pulse ring on PLAY button hover ── */
body.page-arcade .hero-cta-btn.primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(255, 45, 154, 0.5);
  opacity: 0;
  transform: scale(0.9);
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

body.page-arcade .hero-cta-btn.primary:hover::after {
  opacity: 1;
  transform: scale(1.08);
}

/* ── Glowing border animation on section kicker ── */
body.page-arcade .section-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.page-arcade .section-kicker::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff2d9a, #9b30ff);
  box-shadow: 0 0 10px rgba(255, 45, 154, 0.5);
  animation: kicker-pulse 2s ease-in-out infinite alternate;
}

@keyframes kicker-pulse {
  from { opacity: 0.6; transform: scaleX(0.8); }
  to   { opacity: 1;   transform: scaleX(1); }
}

/* ── Float animation for hero badge pills ── */
body.page-arcade .hero-badge-wrap .pill {
  animation: pill-float 4s ease-in-out infinite;
}

body.page-arcade .hero-badge-wrap .pill:nth-child(2) {
  animation-delay: 0.6s;
}

body.page-arcade .hero-badge-wrap .pill:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes pill-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ── Tier card top accent bar animation ── */
body.page-arcade .benchmark-card::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
  background-size: 200% 100%;
  animation: bench-bar-idle 4s ease infinite;
}

@keyframes bench-bar-idle {
  0%, 100% { background-position: 0% 0; }
  50%       { background-position: 200% 0; }
}

body.page-arcade .benchmark-card.tier-master::before {
  background: linear-gradient(90deg, #ff2d9a, #9b30ff, #00e5ff, #ff2d9a) !important;
  background-size: 300% 100% !important;
  animation: bench-master-bar 3s linear infinite !important;
}

@keyframes bench-master-bar {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* ── Guide card arrow icon slides on hover ── */
body.page-arcade .guide-preview-card .guide-read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

body.page-arcade .guide-preview-card:hover .guide-read-time {
  gap: 12px;
  color: #c084fc;
}

/* ── View all link — animated underline ── */
body.page-arcade .view-all-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, gap 0.3s ease;
}

body.page-arcade .view-all-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #ff2d9a, #9b30ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

body.page-arcade .view-all-link:hover::after {
  transform: scaleX(1);
}

body.page-arcade .view-all-link:hover {
  color: #c084fc !important;
  gap: 8px;
}

/* ── Pillar icon bounce on hover ── */
body.page-arcade .pillar-card:hover .pillar-icon {
  animation: icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.4) !important;
}

@keyframes icon-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25) rotate(-5deg); }
  70%  { transform: scale(0.92) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Scroll-into-view stagger for pillar cards ── */
body.page-arcade .hub-pillars-grid .pillar-card:nth-child(1) { --reveal-delay: 0ms; }
body.page-arcade .hub-pillars-grid .pillar-card:nth-child(2) { --reveal-delay: 80ms; }
body.page-arcade .hub-pillars-grid .pillar-card:nth-child(3) { --reveal-delay: 160ms; }
body.page-arcade .hub-pillars-grid .pillar-card:nth-child(4) { --reveal-delay: 240ms; }

body.page-arcade .benchmarks-grid .benchmark-card:nth-child(1) { --reveal-delay: 0ms; }
body.page-arcade .benchmarks-grid .benchmark-card:nth-child(2) { --reveal-delay: 80ms; }
body.page-arcade .benchmarks-grid .benchmark-card:nth-child(3) { --reveal-delay: 160ms; }
body.page-arcade .benchmarks-grid .benchmark-card:nth-child(4) { --reveal-delay: 240ms; }

/* ── Hub tab hover — animated bottom bar ── */
body.page-arcade .hub-tab {
  position: relative;
}

body.page-arcade .hub-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff2d9a, #9b30ff);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

body.page-arcade .hub-tab:hover::after,
body.page-arcade .hub-tab.is-active::after {
  width: 60%;
}

/* ── CTA Banner inner content — scale in ── */
body.page-arcade .cta-inner {
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

body.page-arcade .cta-inner:hover {
  transform: scale(1.005);
}

/* ── Active press on interactive cards ── */
body.page-arcade .arcade-card:active {
  transform: translateY(-5px) scale(1.008) !important;
  transition-duration: 100ms !important;
}

body.page-arcade .hero-cta-btn.primary:active,
body.page-arcade .hero-cta-btn.secondary:active,
body.page-arcade .hub-cta-btn:active {
  transform: scale(0.96) translateY(1px) !important;
  transition-duration: 80ms !important;
}

/* ── Section heading — word underline accent ── */
body.page-arcade .section-title-hub {
  position: relative;
  display: inline-block;
}

/* ── Accessibility: Keep reduced-motion users safe ── */
@media (prefers-reduced-motion: reduce) {
  body.page-arcade .arcade-card::after,
  body.page-arcade .pillar-card::after,
  body.page-arcade .benchmark-card::after,
  body.page-arcade .guide-preview-card::after,
  body.page-arcade .hero-cta-btn.primary::after,
  body.page-arcade .section-kicker::before,
  body.page-arcade .arcade-games::after,
  body.page-arcade .hub-pillars-section::after,
  body.page-arcade .hub-benchmarks-section::after {
    animation: none !important;
    transition: none !important;
  }
  body.page-arcade .hero-badge-wrap .pill {
    animation: none !important;
  }
}

/* ================================================================
   GOD-LEVEL ANIMATION SYSTEM v3.0 — Premium Site-Wide Animations
   ================================================================ */

/* ── KEYFRAMES LIBRARY ── */
@keyframes aurora-shift {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  50%  { filter: hue-rotate(18deg)  brightness(1.05); }
  100% { filter: hue-rotate(-10deg) brightness(0.96); }
}

@keyframes gradTextAnim {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,45,154,0.4), 0 0 30px rgba(155,48,255,0.2); }
  50%       { box-shadow: 0 0 24px rgba(255,45,154,0.7), 0 0 60px rgba(155,48,255,0.4); }
}

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

@keyframes floatYSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes spinBorder {
  from { --bg-angle: 0deg; }
  to   { --bg-angle: 360deg; }
}

@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(800%); opacity: 0; }
}

@keyframes glitchX {
  0%, 100%  { transform: none; clip-path: none; }
  20%       { transform: translateX(-3px); clip-path: inset(20% 0 60% 0); }
  40%       { transform: translateX(3px);  clip-path: inset(60% 0 20% 0); }
  60%       { transform: translateX(-2px); clip-path: inset(40% 0 40% 0); }
  80%       { transform: none; clip-path: none; }
}

@keyframes shimmerSlide {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.82) translateY(24px); }
  65%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.08); opacity: 1; }
}

@keyframes rotateHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(255,45,154,0.3); box-shadow: 0 0 0 0 rgba(255,45,154,0); }
  50%       { border-color: rgba(155,48,255,0.6); box-shadow: 0 0 20px rgba(155,48,255,0.3); }
}

@keyframes slideRevealX {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── HERO SECTION — Premium animated headline ── */
body.page-arcade .arcade-hero h1 {
  background: linear-gradient(120deg, #ffffff 0%, #e9d5ff 25%, #ff8fd6 50%, #c084fc 75%, #ffffff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradTextAnim 6s ease infinite;
}

/* Glitch effect on hero accent word — 2s pause then brief glitch */
body.page-arcade .hero-line.accent {
  animation: glitchX 8s ease-in-out infinite;
  animation-delay: 3s;
}

/* ── HERO CTA BUTTONS — Neon pulse ── */
body.page-arcade .hero-cta-btn.primary {
  animation: neonPulse 3s ease-in-out infinite;
}

/* ── BADGE PILLS — Float gently ── */
body.page-arcade .hero-badge-wrap .pill {
  animation: floatY 3.5s ease-in-out infinite;
}
body.page-arcade .hero-badge-wrap .pill:nth-child(2) { animation-delay: 0.7s; }
body.page-arcade .hero-badge-wrap .pill:nth-child(3) { animation-delay: 1.4s; }

/* ── METRICS BAR — Animated gradient border ── */
body.page-arcade .hero-metrics-bar {
  animation: borderGlow 4s ease-in-out infinite;
}

/* ── SECTION KICKER — Animated gradient text ── */
body.page-arcade .section-kicker {
  background: linear-gradient(120deg, #ff2d9a, #c084fc, #00e5ff, #ff2d9a);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradTextAnim 4s linear infinite;
}

/* ── SECTION TITLES — Gradient shimmer ── */
body.page-arcade .section-title-hub {
  background: linear-gradient(120deg, #ffffff 20%, #e9d5ff 50%, #ffffff 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 3.5s ease-in-out infinite;
}

/* ── ARCADE CARDS — Animated top glow line on hover ── */
body.page-arcade .arcade-card::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,154,0.8), rgba(155,48,255,0.8), transparent);
  z-index: 4;
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.19,1,0.22,1);
}
body.page-arcade .arcade-card:hover::before {
  left: 100%;
}

/* ── PILLAR CARDS — Float on hover + glow ── */
body.page-arcade .pillar-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1), box-shadow 0.4s ease, border-color 0.3s ease !important;
}
body.page-arcade .pillar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
body.page-arcade .pillar-card:hover::after { opacity: 1; }
body.page-arcade .pillar-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(168,85,247,0.5) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 0 40px rgba(168,85,247,0.2) !important;
}

/* ── BENCHMARK CARDS — Color tier glow on hover ── */
body.page-arcade .benchmark-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 28px rgba(168,85,247,0.18) !important;
}
body.page-arcade .benchmark-card.tier-master:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 36px rgba(255,45,154,0.35) !important;
}
body.page-arcade .benchmark-card.tier-advanced:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 36px rgba(245,158,11,0.3) !important;
}
body.page-arcade .benchmark-card.tier-intermediate:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 36px rgba(52,211,153,0.3) !important;
}

/* Animated tier WPM number ── */
body.page-arcade .tier-wpm {
  background: linear-gradient(120deg, #fff 30%, #c084fc 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 4s ease-in-out infinite;
}

/* ── GUIDE CARDS — Slide-in arrow on hover ── */
body.page-arcade .guide-preview-card {
  position: relative;
  overflow: hidden;
}
body.page-arcade .guide-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,45,154,0.1) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
body.page-arcade .guide-preview-card:hover::after { opacity: 1; }
body.page-arcade .guide-preview-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(255,45,154,0.45) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,45,154,0.15) !important;
}

/* ── HUB TAB UNDERBAR — animated active indicator ── */
body.page-arcade .hub-tab {
  position: relative;
}
body.page-arcade .hub-tab::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #ff2d9a, #9b30ff);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.19,1,0.22,1);
}
body.page-arcade .hub-tab:hover::after,
body.page-arcade .hub-tab.is-active::after { width: 65%; }

/* ── CTA BANNER — Animated aurora orb behind ── */
body.page-arcade .cta-inner {
  position: relative;
  overflow: hidden;
}
body.page-arcade .cta-inner::before {
  content: "";
  position: absolute;
  top: -60%; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, rgba(236,72,153,0.25) 40%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: breathe 5s ease-in-out infinite;
}
body.page-arcade .cta-inner > * { position: relative; z-index: 1; }

/* ── CTA INNER HOVER — subtle scale ── */
body.page-arcade .cta-inner {
  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1);
}
body.page-arcade .cta-inner:hover {
  transform: scale(1.008);
}

/* ── LOGO — hue rotate on hover ── */
body.page-arcade #siteNameLink:hover .site-logo {
  animation: rotateHue 4s linear infinite;
}

/* ── HEADER — animate on page load ── */
body.page-arcade #header {
  animation: zm-page-in 0.4s cubic-bezier(0.19,1,0.22,1) both;
}

/* ── PORTAL ROOT — page fade-up on load (pure opacity to preserve fixed layout geometry) ── */
body.page-arcade #portalRoot {
  animation: zm-page-in 0.5s cubic-bezier(0.19,1,0.22,1) both;
}

/* ── PILLAR ICON — bounce on card hover ── */
body.page-arcade .pillar-card:hover .pillar-icon {
  animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── METRIC VALUES — gradient ── */
body.page-arcade .metric-val {
  background: linear-gradient(120deg, #ffffff, #c084fc 60%, #ff8fd6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 4s ease-in-out infinite;
}

/* ── VIEW ALL LINKS — animated arrow ── */
body.page-arcade .view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, gap 0.35s cubic-bezier(0.19,1,0.22,1);
}
body.page-arcade .view-all-link:hover {
  color: #c084fc !important;
  gap: 10px !important;
}

/* ── SPEED TYPE PAGE — neon scan line on panel ── */
body.page-speed .st-panel {
  position: relative;
  overflow: hidden;
}
body.page-speed .st-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,154,0.6), rgba(155,48,255,0.6), transparent);
  pointer-events: none;
  z-index: 2;
  animation: scanLine 4s ease-in-out infinite;
}

/* ── GAME RAIL CARD — float and glow ── */
body.page-typing-trainer .game-rail-card {
  transition: transform 0.35s cubic-bezier(0.19,1,0.22,1), box-shadow 0.35s ease, border-color 0.3s ease !important;
}
body.page-typing-trainer .game-rail-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(236,72,153,0.5) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.6), 0 0 30px rgba(236,72,153,0.2) !important;
}

/* ── FOOTER — slide in from bottom ── */
body.page-arcade #footer {
  animation: popIn 0.7s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── SCROLLBAR — neon thin ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07040f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff2d9a, #9b30ff);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff60bc, #b060ff);
}

/* ── TEXT SELECTION ── */
::selection {
  background: rgba(168,85,247,0.3);
  color: #fff;
}

/* ── REDUCED MOTION SAFETY ── */
@media (prefers-reduced-motion: reduce) {
  body.page-arcade .arcade-hero h1,
  body.page-arcade .section-kicker,
  body.page-arcade .section-title-hub,
  body.page-arcade .metric-val,
  body.page-arcade .tier-wpm,
  body.page-arcade .hero-cta-btn.primary,
  body.page-arcade .hero-badge-wrap .pill,
  body.page-arcade .hero-metrics-bar,
  body.page-arcade .cta-inner::before,
  body.page-speed .st-panel::after {
    animation: none !important;
    transition: none !important;
  }
}