/* ==========================================================================
   $FORGE · Solana-inspired accent layer.
   A thin layer over the existing monochrome design: purple → violet → turquoise
   used as an accent only (labels, highlights, active states, progress, premium
   borders, soft lighting). Remove the <link href="sol.css"> on index.html and
   game.html to return to the previous red-accent look.
   Threat colours (HP, boss health, hazards) intentionally stay red.
   ========================================================================== */
@property --sol-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root:root:root:root, :root:root:root:root[data-theme="dark"], :root:root:root:root[data-theme="light"] {
  --sol-1: #9945FF; --sol-2: #7B61FF; --sol-3: #14F195; --sol-deep: #6D28D9; --sol-bg: #08090D;
  --sol-grad: linear-gradient(120deg, #9945FF 0%, #7B61FF 35%, #14F195 100%);
  --sol-text-grad: linear-gradient(100deg, #b98cff 0%, #9945FF 20%, #7B61FF 44%, #38d9c4 74%, #14F195 100%);
  --sol-ring: conic-gradient(from var(--sol-a), rgba(255,255,255,.09) 0deg, rgba(153,69,255,.95) 60deg, #7B61FF 105deg, rgba(20,241,149,.95) 150deg, rgba(255,255,255,.09) 215deg, rgba(255,255,255,.09) 360deg);
  --sol-ring-soft: conic-gradient(from var(--sol-a), rgba(255,255,255,.08) 0deg, rgba(153,69,255,.5) 60deg, rgba(123,97,255,.42) 105deg, rgba(20,241,149,.42) 150deg, rgba(255,255,255,.08) 215deg, rgba(255,255,255,.08) 360deg);
  --signal: #a77bff;
  --mint: #14F195;
}
@keyframes solSpin { to { --sol-a: 360deg; } }
@keyframes solShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes solDrift { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 100% { transform: translate3d(3%, -2%, 0) scale(1.08); } }
@keyframes solBreath { 50% { opacity: .55; } }

/* gradient text — slow, restrained shift */
.sol-text, .manifesto > p em, .wordmark span:first-child, .tk-bal-big, .tk-toast-amt, .hud .points b {
  background: var(--sol-text-grad) !important; background-size: 130% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: solShift 9s ease-in-out infinite alternate;
}
.wordmark span:first-child { padding-right: .02em; }

/* ---------------------------------------------------------------- landing */
.hero::before { content: ""; position: absolute; z-index: 0; inset: -12% -8%; pointer-events: none;
  background: radial-gradient(38% 34% at 30% 42%, rgba(153,69,255,.20), transparent 70%), radial-gradient(30% 28% at 74% 60%, rgba(20,241,149,.10), transparent 72%), radial-gradient(26% 24% at 55% 30%, rgba(123,97,255,.10), transparent 70%);
  filter: blur(24px); animation: solDrift 22s ease-in-out infinite alternate; }
.label.red::before { background: var(--sol-grad); box-shadow: 0 0 12px rgba(153,69,255,.65); }
.brand:hover img { filter: drop-shadow(0 0 12px rgba(153,69,255,.6)); }
.top nav a { position: relative; }
.top nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--sol-grad); transform: scaleX(0); transition: transform .5s var(--ease); }
.top nav a:hover::after, .top nav a.on::after { transform: scaleX(1); }
.btn::after { background: var(--sol-grad); background-size: 160% 100%; }
.btn:hover { box-shadow: 0 14px 40px -14px rgba(153,69,255,.7), 0 8px 30px -18px rgba(20,241,149,.6); }
.btn.ghost::after { background: rgba(153,69,255,.10); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(153,69,255,.75), 0 0 34px -10px rgba(20,241,149,.35); }
.glow-cursor { background: radial-gradient(circle, rgba(153,69,255,.07), rgba(20,241,149,.025) 40%, transparent 62%); }
.util.hot::before { background: radial-gradient(circle, rgba(153,69,255,.20), transparent 65%); }
.util.hot .ic svg { stroke: #b98cff; }
.buyback i:last-child { background: linear-gradient(0deg, #9945FF, #14F195); }
.eco-card, .eco-hub { border: 1px solid transparent; animation: solSpin 14s linear infinite; }
.eco-card { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--sol-ring-soft) border-box; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.eco-card:nth-child(2) { animation-delay: -3.5s; } .eco-card:nth-child(3) { animation-delay: -7s; } .eco-card:nth-child(4) { animation-delay: -10.5s; }
.eco-card:hover, .eco-card.lit { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--sol-ring) border-box; box-shadow: 0 30px 70px -40px rgba(153,69,255,.6); }
.eco-hub { background: radial-gradient(60% 80% at 28% 50%, rgba(153,69,255,.10), transparent 70%) padding-box, radial-gradient(40% 60% at 100% 100%, rgba(20,241,149,.05), transparent 70%) padding-box, linear-gradient(#0b0b0d, #0b0b0d) padding-box, var(--sol-ring-soft) border-box; }
.eco-art, .eco-card.hot .eco-art { background: radial-gradient(60% 75% at 50% 78%, rgba(153,69,255,.16), transparent 70%), radial-gradient(40% 50% at 70% 30%, rgba(20,241,149,.06), transparent 70%), #0a0a0c; }
.eco-badge.demo { color: #14F195; border-color: rgba(20,241,149,.38); }
.eco-badge.planned { color: #b98cff; border-color: rgba(153,69,255,.5); }
.eco-core img { filter: drop-shadow(0 0 30px rgba(153,69,255,.55)) drop-shadow(0 0 60px rgba(20,241,149,.12)); }
.eco-node.on { border-color: rgba(153,69,255,.45); }
.eco-node.on i { background: #14F195; box-shadow: 0 0 12px #14F195; }
.eco-node.n3.on i { background: #9945FF; box-shadow: 0 0 12px #9945FF; }
.finale { overflow: hidden; }
.finale::before { content: ""; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -30%; height: 90%; pointer-events: none; background: radial-gradient(40% 50% at 30% 70%, rgba(153,69,255,.16), transparent 70%), radial-gradient(30% 40% at 72% 80%, rgba(20,241,149,.08), transparent 72%); filter: blur(30px); animation: solDrift 26s ease-in-out infinite alternate; }
.finale > * { position: relative; z-index: 1; }
.pilot { box-shadow: 0 40px 100px -60px rgba(153,69,255,.45); }

/* ---------------------------------------------------------------- game shell */
.brand:hover .logo-img { filter: drop-shadow(0 0 12px rgba(153,69,255,.6)); }
.nav button.active { box-shadow: 0 8px 26px -10px rgba(153,69,255,.75); }
.nav button.active::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--sol-grad); }
.nav .nav-token .tk-navdot { background: var(--sol-grad); box-shadow: 0 0 10px rgba(153,69,255,.8); }
#hp { color: #ff4a2e; -webkit-text-fill-color: #ff4a2e; }
.boss-meter i { background: #ff4a2e; box-shadow: 0 0 12px rgba(255,74,46,.6); }
.progress i, .hangar-meter span, .campaign-rank > b i, .pilot-super > b i, #pilotXpBar, #pilotSuperBar { background: var(--sol-grad); background-size: 200% 100%; animation: solShift 6s ease-in-out infinite alternate; }
.map-card.selected, .skin-card.equipped { border-color: rgba(153,69,255,.7); box-shadow: 0 0 0 1px rgba(153,69,255,.35), 0 24px 60px -30px rgba(20,241,149,.45); }
.skin-card.equipped .skin-preview, .map-card.selected img { box-shadow: inset 0 -40px 60px -40px rgba(153,69,255,.35); }
.achievement-card.unlocked .achievement-medal { background: var(--sol-grad); color: #0b0b0c; box-shadow: 0 0 0 6px rgba(153,69,255,.10); }
.level-node.current { box-shadow: 0 6px 20px rgba(153,69,255,.35); }
.world-chip.current { box-shadow: 0 6px 20px -6px rgba(153,69,255,.55); }
.board-row.me { box-shadow: inset 2px 0 0 #14F195, inset 0 0 0 1px rgba(153,69,255,.18); }
.action:hover, #pilotMainAction:hover, .primary-btn:hover { box-shadow: 0 12px 34px -14px rgba(153,69,255,.75); }

/* ---------------------------------------------------------------- token / marketplace */
.tk-pill { border: 1px solid transparent; background: linear-gradient(#121216, #121216) padding-box, var(--sol-ring-soft) border-box; animation: solSpin 10s linear infinite; }
.tk-pill:hover { background: linear-gradient(#18181d, #18181d) padding-box, var(--sol-ring) border-box; }
.tk-pill.up, .tk-pill.down { animation: solSpin 10s linear infinite, tkUp .9s var(--ease); }
.tk-pend { background: #14F195; box-shadow: 0 0 10px #14F195; }
.tk-live { background: var(--sol-grad); box-shadow: 0 0 10px rgba(153,69,255,.8); }
.tk-unit em { color: #b98cff; }
.tk-bal-card { border: 1px solid transparent; background: radial-gradient(110% 110% at 100% 0%, rgba(153,69,255,.20), transparent 55%) padding-box, radial-gradient(80% 80% at 0% 100%, rgba(20,241,149,.08), transparent 60%) padding-box, linear-gradient(180deg, #17171a, #0e0e10) padding-box, var(--sol-ring) border-box; animation: solSpin 12s linear infinite; }
.tk-tabs button.on, .tk-chips button.on { box-shadow: 0 8px 24px -10px rgba(153,69,255,.75); }
.tk-tabs button { position: relative; }
.tk-tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--sol-grad); }
.tk-btn:not(.ghost):not(.mint):not(:disabled):hover { background: var(--sol-grad); color: #0b0b0c; box-shadow: 0 12px 34px -14px rgba(153,69,255,.8); }
.tk-btn.mint { background: linear-gradient(120deg, #14F195, #5cf5c0); color: #04170f; }
.tk-btn.mint:hover { box-shadow: 0 12px 34px -14px rgba(20,241,149,.7); }

/* rarity: rare/epic keep their hue; legendary + season are the premium gradient tier */
.tk-rar.r-legendary, .tk-rar.r-season { background: var(--sol-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tk-rar.r-legendary::before, .tk-rar.r-season::before { background: var(--sol-grad); box-shadow: 0 0 10px rgba(153,69,255,.75); }
.tk-item.r-legendary, .tk-item.r-season { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--sol-ring-soft) border-box; animation: tkCard .7s var(--ease) both, solSpin 12s linear infinite; animation-delay: calc(var(--i) * 60ms), calc(var(--i) * -1.3s); }
.tk-item.r-legendary:hover, .tk-item.r-season:hover { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--sol-ring) border-box; }
.tk-item:hover .tk-art, .tk-item.r-legendary .tk-art, .tk-item.r-season .tk-art { background: radial-gradient(55% 60% at 50% 72%, rgba(153,69,255,.20), transparent 70%), radial-gradient(35% 40% at 72% 28%, rgba(20,241,149,.08), transparent 70%), radial-gradient(70% 70% at 50% 62%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), #0b0b0d; }
.tk-item:hover { box-shadow: 0 30px 60px -30px rgba(153,69,255,.45); }

/* purchase confirmation */
.tk-dialog { border: 1px solid transparent; background: linear-gradient(#0f0f12, #0f0f12) padding-box, var(--sol-ring-soft) border-box; animation: solSpin 12s linear infinite; }
.tk-dialog-art { background-image: radial-gradient(60% 60% at 50% 60%, rgba(153,69,255,.16), transparent 70%), radial-gradient(40% 40% at 70% 30%, rgba(20,241,149,.06), transparent 70%); }
.tk-steps i { border-top-color: #9945FF !important; border-right-color: #14F195 !important; }
.tk-ring { border-color: #14F195; box-shadow: 0 0 0 2px rgba(153,69,255,.55), 0 0 30px rgba(153,69,255,.45); }
.tk-ledger dd.neg { color: #b98cff; }
.tk-toast { box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 2px 0 0 #9945FF; }

/* raids, tournaments, season, missions */
.tk-cup-hero { border: 1px solid transparent; background: radial-gradient(80% 120% at 100% 0%, rgba(153,69,255,.20), transparent 60%) padding-box, radial-gradient(60% 90% at 0% 100%, rgba(20,241,149,.07), transparent 60%) padding-box, linear-gradient(180deg, #151518, #0d0d0f) padding-box, var(--sol-ring) border-box; animation: solSpin 14s linear infinite; }
.tk-row.you { box-shadow: inset 2px 0 0 #9945FF; }
.tk-row.you .tk-bar i, .tk-mission.ready .tk-bar i, .tk-mission.done .tk-bar i { background: var(--sol-grad); }
.tk-pips i.on { background: var(--sol-grad); }
.tk-xp i { background: var(--sol-grad); background-size: 200% 100%; animation: solShift 6s ease-in-out infinite alternate; }
.tk-col.reached .tk-tier { border-bottom-color: #9945FF; } .tk-col.next .tk-tier { color: #14F195; }
.tk-cell.prem { background: linear-gradient(180deg, rgba(153,69,255,.07), transparent), var(--surface); border-color: rgba(153,69,255,.25); }
.tk-cell.ready { border-color: #14F195; box-shadow: 0 0 0 1px rgba(20,241,149,.25), 0 10px 30px -14px rgba(153,69,255,.6); animation: solBreath 3.2s ease-in-out infinite; }
.tk-mission.ready { border-color: rgba(20,241,149,.7); box-shadow: 0 24px 50px -30px rgba(153,69,255,.6); }
.tk-event.live { border-color: rgba(153,69,255,.4); background: radial-gradient(80% 120% at 100% 0%, rgba(153,69,255,.16), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(20,241,149,.05), transparent 60%), var(--surface); }
.tk-mode.open { border-color: rgba(20,241,149,.4); }
.tk-raid:hover { box-shadow: 0 30px 60px -36px rgba(153,69,255,.55); }
.tk-slider input { accent-color: #9945FF; }
.tk-slider b { color: #b98cff; }
.tk-area .a2 { fill: rgba(153,69,255,.18); } .tk-area .l2 { stroke: #9945FF; } .tk-area .lg.r { fill: #b98cff; }

@media (prefers-reduced-motion: reduce) {
  .sol-text, .manifesto > p em, .wordmark span:first-child, .tk-bal-big, .tk-toast-amt, .hud .points b, .hero::before, .finale::before,
  .eco-card, .eco-hub, .tk-pill, .tk-bal-card, .tk-item, .tk-dialog, .tk-cup-hero, .tk-cell.ready, .tk-xp i, .progress i { animation: none !important; }
}
.tk-lockline { color: #b98cff; }

/* pilot route: medallion meter under each mission node */
.level-node { position: relative; }
.level-node[data-medals="1"]::after, .level-node[data-medals="2"]::after, .level-node[data-medals="3"]::after { content: ""; position: absolute; left: 3px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #9945FF, #14F195); }
.level-node[data-medals="1"]::after { width: calc((100% - 6px) / 3); } .level-node[data-medals="2"]::after { width: calc((100% - 6px) * 2 / 3); } .level-node[data-medals="3"]::after { right: 3px; box-shadow: 0 0 8px rgba(20,241,149,.6); }
.tk-coin-3d .tk-coin { filter: drop-shadow(0 10px 24px rgba(153,69,255,.45)); }