/* COSMETICS MODAL */
.cosm-modal{background:#1a0820;border:1.5px solid #5030a0;border-radius:16px;width:1020px;max-width:96vw;max-height:calc(94vh / 1.2);overflow:hidden;display:flex;flex-direction:column;animation:fadeInScale 0.25s ease;zoom:1.2;}
/* Cosmetics modal is zoomed 1.2× for readability. Counter-zoom the close X
   and the top tab strip so they keep their original size per design. */
.cosm-modal .cosm-tabs,
.cosm-modal .cosm-x-btn{zoom:calc(1/1.2);}
.cosm-header{background:#240c38;padding:14px 20px;border-bottom:1px solid #3a1860;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;}
.cosm-header h2{font-size:16px;font-weight:500;color:#d0b0ff;}
/* Drug Market modal: bump the title 30% bigger and bold to match the rest
   of the bumped-up modal text. Fill background drops to 30% transparent
   (header gets the same alpha so the layered look stays consistent). */
.drug-market-modal{background:rgba(26,8,32,0.7);}
.drug-market-modal .cosm-header{background:rgba(36,12,56,0.7);}
.drug-market-modal .cosm-header h2{font-size:21px;font-weight:700;}
.drug-market-modal .cosm-header .modal-close{font-weight:700;}

/* Drug Market refresh confirm — reuses .prestige-confirm so text sizes /
   weights match the other "Are you sure?" dialogs. Adds a transparent
   blue-purple themed fill to fit the drug-market palette. */
.drug-refresh-confirm{
  background:linear-gradient(180deg,rgba(20,16,40,0.8),rgba(10,6,22,0.8));
  border-color:#506090;
  box-shadow:0 0 60px rgba(80,120,200,0.4);
}
.drug-refresh-confirm h2{color:#c0d0ff;}
.drug-refresh-confirm p{color:#9098c8;}
.drug-refresh-confirm .prestige-confirm-sub{color:#7080a8;}
.drug-refresh-confirm .prestige-confirm-cancel{
  background:#10182a;color:#90a0c8;border-color:#3a4870;
}
.drug-refresh-confirm .prestige-confirm-cancel:hover{
  background:#1a2440;color:#c0d0ff;
}
.drug-refresh-confirm .prestige-confirm-go{
  background:linear-gradient(135deg,#1c5070,#3070b0);
  border-color:#80b0e0;
  box-shadow:0 0 12px rgba(80,140,220,0.5);
}
.cosm-header-right{display:flex;align-items:center;gap:10px;}
.cosm-header-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;pointer-events:none;}
.cosm-header-center .cosm-gold{pointer-events:auto;}
.cosm-gold{font-size:13px;color:#c0a060;background:#2a1a08;border:0.5px solid #6a5020;border-radius:8px;padding:3px 12px;}
.cosm-gold.cosm-cash{color:#51b85f;background:#0a1a10;border-color:#1f4a2a;}
.cosm-scroll{overflow-y:auto;flex:1;padding:16px;min-height:480px;}
.cosm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
/* PERF: dropped box-shadow + transform from transition (hover glow now rides
   the ::before opacity transition defined in animations.css). */
.cosm-card{background:var(--rarity-bg,#200c30);border:2px solid #3a1860;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;position:relative;}
.cosm-card:hover:not(.cosm-locked){border-color:#8060d0;background:#2e1245;}
.cosm-card.cosm-owned{border-color:#7050c0;}
.cosm-card.cosm-active{border:4px solid #c0a0ff;background:#2e1245;}
.cosm-card.cosm-active::after{content:'✓ active';position:absolute;top:5px;right:6px;font-size:9px;color:#c0a0ff;font-weight:500;}
.cosm-preview{width:60px;height:60px;border-radius:30px;margin:0 auto 8px;border:2px solid rgba(255,255,255,0.15);}
.cosm-name{font-size:11px;font-weight:500;color:#d0b8f8;margin-bottom:3px;}
.cosm-price{font-size:10px;color:#a08060;}
.cosm-price.owned{color:#7060a0;}
.cosm-price.free-price{color:#60a060;}
.cosm-buy-btn{margin-top:6px;background:#3a1060;border:0.5px solid #7050c0;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:500;color:#c0a0f0;cursor:pointer;transition:background 0.15s;width:100%;}
.cosm-buy-btn:hover:not(:disabled){background:#5020a0;}
.cosm-buy-btn.affordable{background:#5020b0;border-color:#a080e0;color:#f0e0ff;}
.cosm-buy-btn.affordable:hover{background:#7030d0;}
.cosm-buy-btn.active-btn{background:#2a1040;border-color:#6040a0;color:#a080c0;cursor:default;}
.cosm-buy-btn:disabled{opacity:0.4;cursor:not-allowed;}
.cosm-equip-btn{margin-top:6px;background:#4a2080;border:0.5px solid #9060d0;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:500;color:#d0b0ff;cursor:pointer;width:100%;}
.cosm-equip-btn:hover{background:#6030a0;}

/* Rarity-themed skin card borders & badges.
 * Mirrors the lootbox pool's rarity tiers (see js/lootbox.js _buildPool) so
 * the Skins menu conveys which tier a skin would drop from. Visual language
 * is borrowed from the Cylinder Army cards (cylarmy-rarity-*). Borders use
 * the cosm-card base rule unless the card is owned/active, which take over
 * with their own purple borders — rarity styling loses on specificity in
 * those cases intentionally so equipped state still reads clearly. */
/* PERF: rarity hover glows used to set `box-shadow` directly on the card,
   which is paint-bound and was firing 6 separate rules across a grid of 30+
   cards. Now each rarity sets a `--card-glow-color` CSS variable that the
   shared ::before pseudo (in animations.css) reads; the hover state still
   only animates that pseudo's opacity, which is composite-only. */
.cosm-card.cosm-rarity-common,.size-card.cosm-rarity-common,.style-card.cosm-rarity-common{border-color:#90909044;--card-glow-color:rgba(144,144,144,0.45);--rarity-bg:linear-gradient(135deg,#1c0c1e 0%,#1e1218 100%);}
.cosm-card.cosm-rarity-common:hover:not(.cosm-locked),.size-card.cosm-rarity-common:hover:not(.size-locked),.style-card.cosm-rarity-common:hover{border-color:#b0b0b0;}
.cosm-card.cosm-rarity-uncommon,.size-card.cosm-rarity-uncommon,.style-card.cosm-rarity-uncommon{border-color:#4db36a55;--card-glow-color:rgba(77,179,106,0.5);--rarity-bg:linear-gradient(135deg,#0e2418 0%,#12301e 100%);}
.cosm-card.cosm-rarity-uncommon:hover:not(.cosm-locked),.size-card.cosm-rarity-uncommon:hover:not(.size-locked),.style-card.cosm-rarity-uncommon:hover{border-color:#6dd08a;}
.cosm-card.cosm-rarity-rare,.size-card.cosm-rarity-rare,.style-card.cosm-rarity-rare{border-color:#4a9eff55;--card-glow-color:rgba(74,158,255,0.55);--rarity-bg:linear-gradient(135deg,#0e1c3c 0%,#142650 100%);}
.cosm-card.cosm-rarity-rare:hover:not(.cosm-locked),.size-card.cosm-rarity-rare:hover:not(.size-locked),.style-card.cosm-rarity-rare:hover{border-color:#6ab0ff;}
.cosm-card.cosm-rarity-epic,.size-card.cosm-rarity-epic,.style-card.cosm-rarity-epic{border-color:#cc55ff55;--card-glow-color:rgba(204,85,255,0.6);--rarity-bg:linear-gradient(135deg,#2a0c48 0%,#3a1260 100%);}
.cosm-card.cosm-rarity-epic:hover:not(.cosm-locked),.size-card.cosm-rarity-epic:hover:not(.size-locked),.style-card.cosm-rarity-epic:hover{border-color:#d878ff;}
.cosm-card.cosm-rarity-legendary,.size-card.cosm-rarity-legendary,.style-card.cosm-rarity-legendary{border-color:#d87a3c66;box-shadow:0 0 8px rgba(216,122,60,0.25);--card-glow-color:rgba(216,122,60,0.7);--rarity-bg:linear-gradient(135deg,#2c1804 0%,#3e2608 100%);}
.cosm-card.cosm-rarity-legendary:hover:not(.cosm-locked),.size-card.cosm-rarity-legendary:hover:not(.size-locked),.style-card.cosm-rarity-legendary:hover{border-color:#ffa060;}
.cosm-card.cosm-rarity-transcendent,.size-card.cosm-rarity-transcendent,.style-card.cosm-rarity-transcendent{border-color:#c080ff66;animation:cylarmyTranscendentBorder 1.8s linear infinite;--card-glow-color:rgba(192,128,255,0.7);--rarity-bg:linear-gradient(135deg,#150820 0%,#1f0e30 100%);}

/* Rarity badge — styled after .cylarmy-rarity-badge in css/cylinder_army.css */
.cosm-rarity-badge{
  display:inline-block;
  font-size:9px;
  font-weight:700;
  padding:1px 6px;
  border-radius:8px;
  border:1px solid;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:rgba(0,0,0,0.35);
  margin:2px 0 4px;
  line-height:1.35;
}

.cosm-section-title{font-size:12px;font-weight:500;color:#8060c0;letter-spacing:0.08em;margin:18px 0 10px;text-transform:uppercase;border-bottom:0.5px solid #2a1050;padding-bottom:6px;}
.size-grid{display:flex;gap:10px;flex-wrap:wrap;}
.size-card{background:var(--rarity-bg,#200c30);border:2px solid #3a1860;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;position:relative;width:120px;}
.size-card:hover:not(.size-locked){border-color:#8060d0;background:#2e1245;}
.size-card.size-owned{border-color:#7050c0;}
.size-card.size-active{border:4px solid #c0a0ff;background:#2e1245;}
.size-card.size-active::after{content:'✓ active';position:absolute;top:5px;right:6px;font-size:9px;color:#c0a0ff;font-weight:500;}
.size-preview{display:flex;align-items:flex-end;justify-content:center;height:60px;margin-bottom:8px;}
.size-cylinder{background:linear-gradient(to right,#d4a0c0,#f5cce0,#e8b5d0);border:1.5px solid #c080a8;}
.theme-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.theme-card{background:#200c30;border:2px solid #3a1860;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;position:relative;}
.theme-card:hover{border-color:#8060d0;background:#2e1245;}
.theme-card.theme-active{border:4px solid #c0a0ff;background:#2e1245;}
.theme-card.theme-active::after{content:'✓ active';position:absolute;top:5px;right:6px;font-size:9px;color:#c0a0ff;font-weight:500;}
.theme-preview{width:60px;height:60px;border-radius:30px;margin:0 auto 8px;border:2px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.theme-preview-glow{width:26px;height:26px;border-radius:50%;flex-shrink:0;z-index:1;}
.theme-preview-stripe{position:absolute;bottom:0;left:0;right:0;height:10px;}
.theme-name{font-size:11px;font-weight:500;color:#d0b8f8;margin-bottom:3px;}
.theme-equip-btn{margin-top:6px;background:#4a2080;border:0.5px solid #9060d0;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:500;color:#d0b0ff;cursor:pointer;width:100%;}
.theme-equip-btn:hover{background:#6030a0;}
.theme-equip-btn.active-btn{background:#2a1040;border-color:#6040a0;color:#a080c0;cursor:default;}
.theme-buy-btn{margin-top:6px;background:#3a1020;border:0.5px solid #803040;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:500;color:#e09090;cursor:pointer;transition:background 0.15s;width:100%;}
.theme-buy-btn:hover:not(:disabled){background:#5a1830;}
.theme-buy-btn.affordable{background:#5a1030;border-color:#c04060;color:#ffe0e0;}
.theme-buy-btn.affordable:hover{background:#7a1840;}
.theme-buy-btn:disabled{opacity:0.4;cursor:not-allowed;}
.theme-price{font-size:10px;color:#c06060;margin-bottom:2px;}
.theme-price.owned{color:#7060a0;}
.theme-card.theme-owned{border-color:#7050c0;}

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.cosm-tabs{display:flex;gap:6px;padding:10px 16px 0;background:#240c38;border-bottom:2px solid #5030a0;flex-shrink:0;}
.cosm-tab{background:#160828;border:1.5px solid #3a1860;border-bottom:none;border-radius:8px 8px 0 0;padding:9px 20px 10px;font-size:14px;font-weight:700;color:#7050a0;cursor:pointer;transition:background .15s,color .15s,border-color .15s;letter-spacing:0.02em;margin-bottom:-2px;position:relative;}
.cosm-tab:hover:not(.cosm-tab-active){background:#1e0a30;color:#b090e0;border-color:#6040b0;}
.cosm-tab.cosm-tab-active{background:#1a0820;color:#f0e0ff;border-color:#5030a0;border-bottom-color:#1a0820;z-index:1;}

/* ── STYLE TAB ───────────────────────────────────────────────────────────── */
.style-grid{display:flex;gap:14px;flex-wrap:wrap;padding:4px 0;}
.style-card{background:var(--rarity-bg,#200c30);border:2px solid #3a1860;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;position:relative;width:140px;}
.style-card:hover{border-color:#8060d0;background:#2e1245;}
.style-card.style-active{border:4px solid #c0a0ff;background:#2e1245;}
.style-card.style-active::after{content:'✓ active';position:absolute;top:5px;right:6px;font-size:9px;color:#c0a0ff;font-weight:500;}
.style-preview{height:70px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px;}
.style-cyl-mini{width:28px;height:58px;border-radius:14px;background:linear-gradient(to right,#d4a0c0,#f5cce0,#e8b5d0);border:1.5px solid #c080a8;position:relative;flex-shrink:0;}
.style-cyl-hood-cap{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:36px;height:20px;border-radius:18px;background:linear-gradient(to right,#d4a0c0,#f5cce0,#e8b5d0);border:1.5px solid #c080a8;}

/* ── CYLINDER HOOD ───────────────────────────────────────────────────────── */
/* ── Skins/Themes modal: red X close button ── */
.cosm-x-btn{background:#3a0808;border:1px solid #7a1010;border-radius:6px;color:#ff6060;font-size:17px;font-weight:700;cursor:pointer;padding:3px 9px;line-height:1;transition:background 0.12s,border-color 0.12s;}
.cosm-x-btn:hover{background:#5a0c0c;border-color:#cc2020;}
/* ── Bold all text inside the cosmetics/themes modal ── */
.cosm-modal *{font-weight:700;}

#cylinder-hood{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:100%;height:40px;border-radius:45px;border:2px solid;pointer-events:none;z-index:6;box-shadow:inset 0 0 18px rgba(0,0,0,0.25),0 -4px 16px rgba(192,128,168,0.25);}

/* ── ETHEREAL DROPLET ANIMATION ─────────────────────────────────────────── */
@keyframes drpRainbow{0%{filter:sepia(1) hue-rotate(0deg) saturate(6) brightness(1.5);}100%{filter:sepia(1) hue-rotate(360deg) saturate(6) brightness(1.5);}}
#droplets-canvas-wrap.drp-ethereal-anim,#passive-canvas.drp-ethereal-anim{animation:drpRainbow 2s linear infinite;}

.prestige-modal{background:#0d0818;border:1.5px solid #6030b0;border-radius:16px;width:940px;max-width:95vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:fadeInScale 0.25s ease;}
.prestige-header{background:#180830;padding:16px 22px;border-bottom:1px solid #3a1870;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.prestige-header h2{font-size:22px;font-weight:500;color:#d0b0ff;}
.prestige-header h2 .prestige-tree-title{background:linear-gradient(135deg,#a8d8ff,#e0f0ff,#c0e8ff,#80c8ff,#a8d8ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(168,216,255,0.4);}
.prestige-header-right{display:flex;align-items:center;gap:12px;}
.prestige-header-center{position:absolute;left:50%;transform:translateX(-50%);}
.prestige-header{position:relative;}
.prestige-pts-display{font-size:13px;color:#a080e0;background:#2a1050;border:0.5px solid #6040b0;border-radius:8px;padding:4px 12px;}
.prestige-reset-btn{font-size:12px;font-weight:600;color:#e0c0ff;background:#2a1050;border:1px solid #6040b0;border-radius:8px;padding:6px 14px;cursor:pointer;transition:background 0.12s,border-color 0.12s,transform 0.06s;}
.prestige-reset-btn:hover:not(:disabled){background:#3a1870;border-color:#8050c0;}
.prestige-reset-btn:active:not(:disabled){transform:scale(0.96);}
.prestige-reset-btn:disabled{opacity:0.4;cursor:not-allowed;}
.prestige-reset-free{color:#90ffa8;border-color:#3a8050;background:#0c2a18;box-shadow:0 0 8px rgba(100,220,140,0.25);}
.prestige-reset-free:hover:not(:disabled){background:#154028;border-color:#60c080;}
.prestige-reset-confirm{background:#0d0818;border:1.5px solid #6030b0;border-radius:16px;padding:24px 28px;max-width:420px;animation:fadeInScale 0.2s ease;text-align:center;color:#d0b0ff;}
.prestige-reset-confirm h3{font-size:18px;font-weight:600;margin-bottom:14px;color:#e0c0ff;}
.prestige-reset-confirm p{font-size:13px;line-height:1.5;margin-bottom:10px;color:#b090e0;}
.prestige-reset-confirm p b{color:#ffd070;}
.prestige-reset-btns{display:flex;gap:12px;justify-content:center;margin-top:18px;}
.prestige-reset-confirm-btn{background:#3a0828;border:1px solid #a04070;border-radius:6px;padding:7px 22px;font-size:12px;font-weight:700;color:#ff90c0;cursor:pointer;transition:background 0.12s,border-color 0.12s;}
.prestige-reset-confirm-btn:hover{background:#5a1048;border-color:#cc60a0;}
.prestige-scroll{overflow-y:auto;overflow-x:auto;flex:1;padding:20px;}
.skill-section{margin-bottom:24px;}
.skill-section-title{font-size:12px;font-weight:500;color:#8060c0;letter-spacing:0.08em;margin-bottom:12px;text-transform:uppercase;border-bottom:0.5px solid #2a1050;padding-bottom:6px;}
.skill-row{display:flex;gap:10px;flex-wrap:wrap;}
/* PERF: dropped box-shadow + filter + transform from the transition. The
   default hover glow rides a ::before opacity transition (animations.css);
   rarity-tier hover shadows now snap (no fade) — one paint per real hover
   transition instead of 12+ paints over 150ms across ~30 nodes. */
.skill-node{width:130px;border-radius:12px;padding:12px 10px;border:1px solid #3a1870;background:#160828;cursor:pointer;transition:border-color .15s,background .15s;text-align:center;position:relative;}
.skill-node:hover:not(.locked-node){border-color:#9060e0;background:#200d38;}
.skill-node.unlocked{border-color:#a070e0;background:#1e0d3a;}
.skill-node.unlocked::after{content:'✓';position:absolute;top:6px;right:8px;font-size:11px;color:#a070e0;}
.skill-node.locked-node{opacity:0.35;cursor:not-allowed;}
/* Prereq-locked nodes (parent skill not yet unlocked) — distinguish from
   the affordability-only locked state with a 🔒 corner badge and slight
   desaturation so the player can tell at a glance which gate is failing. */
.skill-node.prereq-locked{opacity:0.28;filter:grayscale(0.55);}
.skill-node.prereq-locked::before{content:'🔒';position:absolute;top:5px;left:7px;font-size:11px;opacity:0.85;}
.skill-node.maxed{border-color:#c0a0ff;background:#280f48;}
.skill-node.golden{border:2px solid #f5c84a;box-shadow:0 0 14px 2px rgba(245,200,74,0.45),inset 0 0 10px rgba(245,200,74,0.12);background:linear-gradient(180deg,#241a0a 0%,#1a1206 100%);}
.skill-node.golden:hover:not(.locked-node){border-color:#ffdd70;box-shadow:0 0 22px 6px rgba(255,221,112,0.6),inset 0 0 14px rgba(255,221,112,0.18);}
.skill-node.golden .sn-name{color:#ffe59e;}
.skill-node.golden .sn-cost{color:#ffd560;}
.skill-node.golden.unlocked{border-color:#ffd560;}
.skill-node.golden.unlocked::after{color:#ffd560;}
.skill-node.golden.maxed{border-color:#fff0b0;background:linear-gradient(180deg,#3a2a10 0%,#241806 100%);}
.skill-node.silver{border:2px solid #c8d0dc;box-shadow:0 0 14px 2px rgba(200,208,220,0.45),inset 0 0 10px rgba(200,208,220,0.12);background:linear-gradient(180deg,#181c22 0%,#10141a 100%);}
.skill-node.silver:hover:not(.locked-node){border-color:#eef2f8;box-shadow:0 0 22px 6px rgba(238,242,248,0.55),inset 0 0 14px rgba(238,242,248,0.18);}
.skill-node.silver .sn-name{color:#e4e8f0;}
.skill-node.silver .sn-cost{color:#c8d0dc;}
.skill-node.silver.unlocked{border-color:#dfe4ee;}
.skill-node.silver.unlocked::after{color:#dfe4ee;}
.skill-node.silver.maxed{border-color:#f2f5fa;background:linear-gradient(180deg,#2a303a 0%,#181c22 100%);}
.skill-node.bronze{border:2px solid #9e744c;box-shadow:0 0 14px 2px rgba(158,116,76,0.40),inset 0 0 10px rgba(158,116,76,0.10);background:linear-gradient(180deg,#1f1408 0%,#140c04 100%);}
.skill-node.bronze:hover:not(.locked-node){border-color:#cc9a6e;box-shadow:0 0 22px 6px rgba(204,154,110,0.48),inset 0 0 14px rgba(204,154,110,0.16);}
.skill-node.bronze .sn-name{color:#e2c09e;}
.skill-node.bronze .sn-cost{color:#c5966b;}
.skill-node.bronze.unlocked{border-color:#c5966b;}
.skill-node.bronze.unlocked::after{color:#c5966b;}
.skill-node.bronze.maxed{border-color:#e2c09e;background:linear-gradient(180deg,#331e0a 0%,#1f1406 100%);}
.skill-node.copper{border:2px solid #c87a3a;box-shadow:0 0 14px 2px rgba(200,122,58,0.40),inset 0 0 10px rgba(200,122,58,0.10);background:linear-gradient(180deg,#241405 0%,#160c03 100%);}
.skill-node.copper:hover:not(.locked-node){border-color:#e89a5c;box-shadow:0 0 22px 6px rgba(232,154,92,0.48),inset 0 0 14px rgba(232,154,92,0.16);}
.skill-node.copper .sn-name{color:#f0c79c;}
.skill-node.copper .sn-cost{color:#d89a66;}
.skill-node.copper.unlocked{border-color:#d89a66;}
.skill-node.copper.unlocked::after{color:#d89a66;}
.skill-node.copper.maxed{border-color:#f0c79c;background:linear-gradient(180deg,#3a200a 0%,#241406 100%);}
.skill-node.darkgray{border:2px solid #4a4e58;box-shadow:0 0 12px 2px rgba(74,78,88,0.45),inset 0 0 10px rgba(74,78,88,0.14);background:linear-gradient(180deg,#1a1c22 0%,#0e1014 100%);}
.skill-node.darkgray:hover:not(.locked-node){border-color:#6e7380;box-shadow:0 0 20px 6px rgba(110,115,128,0.55),inset 0 0 14px rgba(110,115,128,0.2);}
.skill-node.darkgray .sn-name{color:#a8adb8;}
.skill-node.darkgray .sn-cost{color:#8088a0;}
.skill-node.darkgray.unlocked{border-color:#808898;}
.skill-node.darkgray.unlocked::after{color:#808898;}
.skill-node.darkgray.maxed{border-color:#a8adb8;background:linear-gradient(180deg,#23262e 0%,#14161c 100%);}
.skill-node .sn-icon{font-size:28px;margin-bottom:5px;}
.skill-node .sn-name{font-size:11px;font-weight:500;color:#d0b0ff;margin-bottom:3px;}
.skill-node .sn-desc{font-size:10px;color:#8060a0;line-height:1.4;}
.skill-node .sn-cost{font-size:10px;color:#e080ff;margin-top:5px;font-weight:500;}
.skill-node .sn-level{font-size:10px;color:#9070c0;margin-top:2px;}
.sk-tooltip{display:none;position:fixed;z-index:9999;background:#0f0620;border:1px solid #7040c0;border-radius:10px;padding:10px 14px;min-width:180px;max-width:210px;pointer-events:none;box-shadow:0 6px 24px rgba(80,20,160,0.55);}
.skt-name{font-size:13px;font-weight:700;color:#e0c8ff;margin-bottom:5px;}
.skt-lvl{font-size:10px;color:#7050a0;margin-bottom:5px;}
.skt-desc{font-size:11px;color:#b090d8;line-height:1.45;margin-bottom:6px;}
.skt-cost{font-size:11px;color:#e080ff;font-weight:600;}
/* ─── Prestige Class Tabs ─── */
.class-tabs{display:flex;gap:6px;padding:10px 16px;background:#140725;border-bottom:1px solid #2a1050;flex-shrink:0;flex-wrap:wrap;}
.class-tab{background:#1a0a30;border:1px solid #3a1870;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:500;color:#a080d0;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;}
.class-tab:hover{background:#240d3c;color:#e0c0ff;}
.class-tab.active{background:color-mix(in srgb,var(--cls-color) 20%,#1a0a30);border-color:var(--cls-color);color:#fff;box-shadow:0 0 10px color-mix(in srgb,var(--cls-color) 40%,transparent);}
.class-tab-add{background:#0d2018;border-color:#3a6a50;color:#80e0a0;}
.class-tab-add:hover{background:#143028;border-color:#60a070;color:#b0f0c0;}
.class-tab-locked{background:#0a0a14;border-color:#2a2a40;color:#5a5a7a;cursor:not-allowed;opacity:0.7;}
.class-tab-locked:hover{background:#0a0a14;color:#5a5a7a;}
/* ─── Prestige Class Picker ─── */
.class-picker{padding:8px 4px;}
.class-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px;max-width:820px;margin-left:auto;margin-right:auto;}
/* PERF: lift + shadow combo used to repaint the shadow at the new offset for
   every frame of the 200ms transition. Moved the shadow to a ::after pseudo
   that stays in place; only the card's transform animates. ::before slot
   was already taken by the colored top bar, so the hover glow uses ::after.
   overflow:hidden clips child painting but does NOT clip the card's own
   shadow — to keep the outer glow visible we set it on the parent instead
   and just snap it (no transition on box-shadow). */
.class-card{background:#120624;border:1.5px solid #3a1870;border-radius:18px;padding:28px 26px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;position:relative;overflow:hidden;}
.class-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--cls-color);}
.class-card:hover:not(.taken){border-color:var(--cls-color);background:#180a32;transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb,var(--cls-color) 35%,transparent);}
.class-card.taken{opacity:0.55;cursor:default;}
.class-card .cc-icon{font-size:54px;margin-bottom:10px;}
.class-card .cc-name{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px;}
.class-card .cc-focus{font-size:13px;color:var(--cls-color);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px;}
.class-card .cc-tag{font-size:15px;font-style:italic;color:#d0b0e8;margin-bottom:12px;}
.class-card .cc-desc{font-size:13px;color:#9878b8;line-height:1.55;margin-bottom:18px;}
.class-card .cc-pick{display:inline-block;padding:9px 22px;background:color-mix(in srgb,var(--cls-color) 25%,#1a0a30);border:1px solid var(--cls-color);border-radius:8px;color:#fff;font-size:14px;font-weight:600;}
.class-card .cc-taken{display:inline-block;padding:9px 22px;background:#0a1810;border:1px solid #3a6a50;border-radius:8px;color:#80e0a0;font-size:14px;font-weight:600;}
/* ─── Prestige Class Preview ─── */
.class-preview{position:relative;padding:4px 0 8px;}
.class-preview-back{position:absolute;top:0;left:0;background:#1a0a30;border:1px solid #3a1870;border-radius:8px;padding:5px 12px;font-size:12px;color:#b090d8;cursor:pointer;z-index:2;}
.class-preview-back:hover{background:#240d3c;color:#e0c0ff;border-color:var(--cls-color);}
.class-preview-tree-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:36px 56px 12px;min-height:200px;}
/* pointer-events are enabled so the per-skill hover tooltip (showSkTip / #sk-tt)
 * still fires in the class-preview tree. buySkill() early-returns for classes
 * the player hasn't chosen, so clicks on preview nodes are already no-ops. */
.class-preview-tree{flex:1;opacity:0.95;}
/* PERF: narrowed `transition:all` to specific props; `all` re-transitions every
   property the browser thinks changed, including layout-affecting ones. */
.class-preview-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:72px;background:color-mix(in srgb,var(--cls-color) 18%,#120624);border:1.5px solid var(--cls-color);border-radius:12px;color:#fff;font-size:36px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s,transform 0.15s;box-shadow:0 4px 16px color-mix(in srgb,var(--cls-color) 35%,transparent);z-index:3;}
.class-preview-arrow:hover{background:color-mix(in srgb,var(--cls-color) 35%,#120624);transform:translateY(-50%) scale(1.08);}
.class-preview-arrow.left{left:4px;}
.class-preview-arrow.right{right:4px;}
.class-preview-footer{text-align:center;padding:14px 8px 4px;border-top:1px solid #2a1050;margin-top:10px;}
.class-preview-name{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px;}
.class-preview-focus{font-size:11px;color:var(--cls-color);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;}
.class-preview-tag{font-size:13px;font-style:italic;color:#d0b0e8;margin-bottom:14px;}
/* PERF: narrowed `transition:all` to background + transform. */
.class-preview-lockin{background:linear-gradient(135deg,color-mix(in srgb,var(--cls-color) 45%,#1a0a30),color-mix(in srgb,var(--cls-color) 25%,#0d0518));border:1.5px solid var(--cls-color);border-radius:10px;padding:10px 28px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;letter-spacing:0.03em;transition:background 0.15s,transform 0.15s;box-shadow:0 4px 18px color-mix(in srgb,var(--cls-color) 40%,transparent);}
.class-preview-lockin:hover:not(:disabled){background:linear-gradient(135deg,color-mix(in srgb,var(--cls-color) 60%,#1a0a30),color-mix(in srgb,var(--cls-color) 35%,#0d0518));transform:translateY(-1px);box-shadow:0 6px 22px color-mix(in srgb,var(--cls-color) 55%,transparent);}
/* Disabled state — locking in is intentionally gated off for now. Flat gray
 * fill, desaturated border, no hover lift. */
.class-preview-lockin:disabled{background:#2a2030;border-color:#4a4052;color:#8a7a98;cursor:not-allowed;box-shadow:none;opacity:0.7;}
#stats-btn,#achievements-btn,#graph-btn{background:linear-gradient(135deg,#2a1040,#1a0828);border:1.5px solid #5a2080;border-radius:8px;padding:5px 14px 6px;font-size:12px;font-weight:700;color:#c090e0;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s,box-shadow 0.2s;letter-spacing:0.02em;}
#stats-btn:hover,#achievements-btn:hover,#graph-btn:hover{background:linear-gradient(135deg,#3a1860,#240a3c);border-color:#8040c0;color:#e0b0ff;}
#achievements-btn{background:linear-gradient(135deg,#2048c0,#102478);border-color:#60a0ff;color:#c8e0ff;box-shadow:0 0 8px 1px rgba(90,160,255,0.6),0 0 16px 3px rgba(70,130,245,0.4);}
#achievements-btn:hover{background:linear-gradient(135deg,#285ad8,#143090);border-color:#80b8ff;color:#dceaff;box-shadow:0 0 12px 2px rgba(120,180,255,0.8),0 0 22px 4px rgba(90,150,255,0.5);}

/* ── COSMETIC PURCHASE CONFIRM POPUP ─────────────────────────────────────── */
#cosm-confirm-popup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);}
#cosm-confirm-box{background:#1a0828;border:1.5px solid #7040c0;border-radius:14px;padding:22px 28px;text-align:center;box-shadow:0 0 32px 8px rgba(112,64,192,0.45);min-width:260px;}
#cosm-confirm-msg{font-size:15px;color:#d0b0ff;margin-bottom:18px;line-height:1.5;}
#cosm-confirm-msg strong{color:#fff;}
#cosm-confirm-btns{display:flex;gap:12px;justify-content:center;}
#cosm-confirm-yes{background:#3a1060;border:1px solid #7040c0;border-radius:10px;padding:8px 26px;font-size:14px;font-weight:700;color:#c0a0f0;cursor:pointer;transition:background 0.15s;}
#cosm-confirm-yes:hover{background:#5020a0;}
#cosm-confirm-no{background:#221030;border:1px solid #4a2080;border-radius:10px;padding:8px 26px;font-size:14px;font-weight:700;color:#806090;cursor:pointer;transition:background 0.15s;}
#cosm-confirm-no:hover{background:#2a1040;}