/* Premium game presentation layer for the Guardian of Curiosity. */
.player-card {
  color: #f7f4ff;
  border: 1px solid rgba(127, 112, 210, .48);
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 25% 18%, rgba(86,211,236,.16), transparent 34%),
    linear-gradient(155deg, #171c36, #24204a 58%, #11162d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 22px 55px rgba(24,18,66,.2);
}
.player-card::before { content:""; position:absolute; inset:7px; border:1px solid rgba(205,188,255,.12); border-radius:24px; pointer-events:none; }
.player-card .player-rank span,.player-card .player-xp-copy span,.player-card .avatar-next-hint { color:#aba7c6; }
.player-card .player-rank b { color:#f2ca6b; text-shadow:0 0 20px rgba(242,202,107,.24); }
.player-card .player-xp-track { background:#0b1024; box-shadow:inset 0 1px 4px #050716; }
.player-card .player-xp-track i { background:linear-gradient(90deg,#4dd6ed,#7a5bf4 56%,#e0ab45); box-shadow:0 0 12px rgba(77,214,237,.45); }
.wardrobe-open { border:1px solid rgba(240,203,113,.45); background:linear-gradient(180deg,#7857e9,#5030bb); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px rgba(44,25,125,.34); }
.wardrobe-open:hover { transform:translateY(-1px); filter:brightness(1.08); }

.rpg-character-stage { position:relative; width:100%; height:100%; min-height:220px; display:grid; place-items:center; isolation:isolate; overflow:hidden; border-radius:22px; background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--backdrop-accent) 38%,transparent),transparent 42%); }
.rpg-character-stage::before { content:""; position:absolute; inset:9% 12%; border-radius:50%; background:radial-gradient(circle,var(--aura-color),transparent 68%); opacity:.18; filter:blur(15px); z-index:-2; }
.rpg-character-stage::after { content:""; position:absolute; left:17%; right:17%; bottom:4%; height:12%; border-radius:50%; background:#050817; filter:blur(12px); opacity:.75; z-index:-1; }
.rpg-rarity-beam { position:absolute; width:72%; height:82%; bottom:3%; clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); background:linear-gradient(180deg,color-mix(in srgb,var(--rarity-color) 7%,transparent),color-mix(in srgb,var(--rarity-color) 25%,transparent)); filter:blur(4px); z-index:-2; }
.rpg-rune-ring { position:absolute; width:68%; aspect-ratio:1; bottom:1%; border:2px solid color-mix(in srgb,var(--aura-color) 55%,transparent); border-radius:50%; box-shadow:0 0 18px color-mix(in srgb,var(--aura-color) 35%,transparent),inset 0 0 16px color-mix(in srgb,var(--aura-color) 25%,transparent); transform:perspective(300px) rotateX(68deg); z-index:-1; }
.rpg-rune-ring::before,.rpg-rune-ring::after { content:"◆  ✦  ◇  ✦  ◆  ✦"; position:absolute; inset:-13px; color:var(--aura-accent); font-size:8px; letter-spacing:6px; text-align:center; opacity:.75; }
.rpg-rune-ring::after { transform:rotate(180deg); }
.rpg-hero-art { position:relative; z-index:2; width:auto; height:99%; max-width:99%; object-fit:contain; object-position:center bottom; filter:hue-rotate(var(--hero-hue)) saturate(1.02) drop-shadow(0 12px 12px rgba(0,0,0,.38)); user-select:none; }
.rpg-particles i { position:absolute; z-index:3; width:4px; height:4px; border-radius:50%; background:var(--aura-accent); box-shadow:0 0 10px 3px var(--aura-color); animation:rpgFloat 3.6s ease-in-out infinite; }
.rpg-particles i:nth-child(1){left:18%;top:22%}.rpg-particles i:nth-child(2){right:18%;top:34%;animation-delay:-1s}.rpg-particles i:nth-child(3){left:27%;bottom:22%;animation-delay:-2.2s}.rpg-particles i:nth-child(4){right:24%;bottom:18%;animation-delay:-.4s}
@keyframes rpgFloat { 50%{transform:translateY(-10px) scale(1.7);opacity:.55} }
.rpg-rarity-plate { position:absolute; z-index:5; bottom:4px; left:50%; transform:translateX(-50%); min-width:72px; padding:3px 12px; border:1px solid color-mix(in srgb,var(--rarity-color) 65%,#fff); border-radius:999px; background:linear-gradient(180deg,color-mix(in srgb,var(--rarity-color) 82%,#11162d),#11162d); color:#fff; box-shadow:0 0 16px color-mix(in srgb,var(--rarity-color) 28%,transparent); font-size:9px; font-weight:900; text-align:center; text-transform:uppercase; letter-spacing:.1em; }
.gear-orbit { position:absolute; inset:0; z-index:6; pointer-events:none; }
.gear-slot { position:absolute; width:38px; height:38px; border:1px solid color-mix(in srgb,var(--slot-color) 80%,#fff); border-radius:11px; background:linear-gradient(145deg,#252c4b,#0e142a); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 12px color-mix(in srgb,var(--slot-color) 22%,transparent); display:grid; place-items:center; }
.gear-slot i { font-style:normal; font-size:16px; }.gear-slot b { position:absolute; left:-4px; bottom:-5px; width:15px; height:15px; border-radius:50%; background:var(--slot-color); color:#fff; font-size:8px; display:grid; place-items:center; }
.gear-headgear{right:5%;top:13%}.gear-cloak{left:4%;top:23%}.gear-shield{left:2%;top:49%}.gear-staff{right:2%;top:44%}.gear-spellbook{left:9%;bottom:14%}.gear-familiar{right:8%;bottom:15%}
.dashboard-character .gear-orbit { display:none; }.dashboard-character .rpg-rarity-plate { bottom:0; }

/* Equipment is layered onto a deliberately plain level-one character. */
.starter-character { background:radial-gradient(circle at 50% 46%,rgba(128,146,190,.16),transparent 47%); }
.starter-character .rpg-rarity-beam,.starter-character .rpg-rune-ring,.starter-character .rpg-particles { opacity:0; }
.rpg-equipped-layers { position:absolute; inset:0; z-index:4; pointer-events:none; }
.rpg-cosmetic { position:absolute; display:block; color:#fff; filter:drop-shadow(0 5px 7px rgba(0,0,0,.42)); }
.rpg-cosmetic i { font-style:normal; display:grid; place-items:center; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.72),0 0 9px var(--gear-accent); }
.cosmetic-backdrop { z-index:-3; inset:10% 17% 6%; border:1px solid color-mix(in srgb,var(--gear-color) 45%,transparent); border-radius:46% 46% 18% 18%; background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--gear-accent) 22%,transparent),transparent 56%),linear-gradient(180deg,color-mix(in srgb,var(--gear-color) 12%,transparent),transparent); box-shadow:inset 0 0 28px color-mix(in srgb,var(--gear-color) 14%,transparent); opacity:.62; }
.cosmetic-backdrop i { position:absolute; top:8%; left:50%; transform:translateX(-50%); font-size:18px; opacity:.64; }
.cosmetic-aura { z-index:1; inset:11% 20% 7%; border:1px solid color-mix(in srgb,var(--gear-color) 48%,transparent); border-radius:50%; box-shadow:0 0 18px var(--gear-glow),inset 0 0 24px var(--gear-glow); animation:rpgAura 3s ease-in-out infinite; opacity:.58; }
.cosmetic-aura i { position:absolute; top:10%; right:2%; font-size:18px; }
@keyframes rpgAura { 50%{transform:scale(1.025);opacity:.74} }
.cosmetic-cloak { z-index:1; width:36%; height:49%; left:34%; top:32%; clip-path:polygon(20% 0,80% 0,100% 95%,68% 85%,50% 100%,28% 84%,0 95%); background:linear-gradient(120deg,color-mix(in srgb,var(--gear-color) 38%,#111a32),color-mix(in srgb,var(--gear-accent) 28%,#11152a)); border-radius:24% 24% 42% 42%; opacity:.74; filter:drop-shadow(0 10px 8px rgba(0,0,0,.38)); }
.cosmetic-cloak i { position:absolute; bottom:10%; width:100%; font-size:18px; opacity:.72; }
.cosmetic-headgear { top:13%; left:52%; width:11%; height:2.2%; border:1px solid color-mix(in srgb,var(--gear-accent) 58%,#dce3ed); border-radius:50%; background:linear-gradient(90deg,color-mix(in srgb,var(--gear-color) 50%,#2a3045),color-mix(in srgb,var(--gear-accent) 55%,#8f98aa),color-mix(in srgb,var(--gear-color) 50%,#2a3045)); transform:rotate(-8deg); opacity:.9; }
.cosmetic-headgear::after { content:""; position:absolute; left:44%; top:-4px; width:7px; height:7px; transform:rotate(45deg); border:1px solid color-mix(in srgb,var(--gear-accent) 65%,#fff); background:color-mix(in srgb,var(--gear-color) 58%,#273047); }
.cosmetic-headgear i { display:none; }
.cosmetic-armor { top:27%; left:42%; width:24%; height:15%; clip-path:polygon(0 36%,23% 0,50% 24%,77% 0,100% 36%,82% 70%,57% 52%,50% 100%,43% 52%,18% 70%); background:linear-gradient(145deg,color-mix(in srgb,var(--gear-accent) 42%,#70798b),color-mix(in srgb,var(--gear-color) 38%,#182036)); opacity:.82; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.cosmetic-armor::after { content:""; position:absolute; inset:12%; border-top:1px solid color-mix(in srgb,var(--gear-accent) 65%,#fff); }
.cosmetic-armor i { display:none; }
.cosmetic-shield { left:9%; top:48%; width:20%; aspect-ratio:.82; border:2px solid color-mix(in srgb,var(--gear-accent) 62%,#c5cbd8); border-radius:48% 48% 55% 55%; clip-path:polygon(50% 0,96% 19%,88% 72%,50% 100%,12% 72%,4% 19%); background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--gear-accent) 38%,#374159),color-mix(in srgb,var(--gear-color) 42%,#11182e)); box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--gear-color) 38%,transparent),0 0 16px var(--gear-glow); }
.cosmetic-shield i { height:100%; font-size:17px; }
.cosmetic-staff { right:8%; top:20%; width:8px; height:67%; border-radius:8px; background:linear-gradient(90deg,color-mix(in srgb,var(--gear-color) 68%,#2b1d18),var(--gear-accent),color-mix(in srgb,var(--gear-color) 68%,#2b1d18)); transform:rotate(3deg); transform-origin:center bottom; }
.cosmetic-staff::before { content:""; position:absolute; left:50%; top:-11%; width:42px; aspect-ratio:1; transform:translateX(-50%) rotate(45deg); border:3px solid var(--gear-accent); background:radial-gradient(circle,var(--gear-accent),var(--gear-color) 45%,transparent 48%); box-shadow:0 0 20px var(--gear-color); }
.cosmetic-staff i { position:absolute; top:-9%; left:50%; transform:translateX(-50%); font-size:17px; }
.cosmetic-spellbook { left:8%; top:25%; width:18%; height:12%; border:1px solid color-mix(in srgb,var(--gear-accent) 62%,#c7cbd6); border-radius:6px 6px 12px 12px; background:linear-gradient(90deg,color-mix(in srgb,var(--gear-color) 45%,#10162c) 49%,#bda970 50%,color-mix(in srgb,var(--gear-color) 45%,#10162c) 52%); transform:rotate(-7deg); box-shadow:0 0 15px var(--gear-glow); }
.cosmetic-spellbook i { height:100%; font-size:18px; }
.cosmetic-familiar { right:15%; top:15%; width:9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff,var(--gear-accent) 18%,var(--gear-color) 58%,transparent 62%); box-shadow:0 0 17px var(--gear-color); animation:rpgFloat 3s ease-in-out infinite; }
.cosmetic-familiar i { height:100%; font-size:10px; }

.wardrobe-modal {
  color:#edf2ff;
  border:1px solid rgba(126,112,218,.5);
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 38%),
    radial-gradient(circle at 82% 5%,rgba(91,67,206,.24),transparent 32rem),
    #0c1124;
  box-shadow:0 40px 130px rgba(3,5,18,.75),inset 0 1px 0 rgba(255,255,255,.08);
}
.wardrobe-modal::before { content:""; position:absolute; inset:8px; border:1px solid rgba(179,168,236,.1); border-radius:23px; pointer-events:none; }
.wardrobe-modal .modal-x { color:#edf2ff; }.wardrobe-header h2 { color:#fff; text-shadow:0 3px 18px rgba(120,89,247,.3); }.wardrobe-header p { color:#979db8; }
.wardrobe-header .eyebrow { color:#9c8aff; }.wardrobe-total { border:1px solid rgba(231,190,85,.55); background:linear-gradient(145deg,#2e2548,#171a32); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px rgba(216,157,38,.12); }
.wardrobe-tester-badge { display:inline-flex; margin-top:10px; padding:5px 10px; border:1px solid rgba(104,220,238,.36); border-radius:999px; background:rgba(60,178,201,.1); color:#79dcec; font-size:11px; font-weight:800; }
.wardrobe-total b { color:#f5d37e; direction:ltr; white-space:nowrap; }.wardrobe-progress { background:#070b19; box-shadow:inset 0 2px 4px #03050d; }.wardrobe-progress i { box-shadow:0 0 15px rgba(114,83,237,.55); }
.wardrobe-preview { border:1px solid rgba(116,101,205,.4); background:linear-gradient(160deg,#1a2242,#10162e 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(2,4,14,.35); }
.wardrobe-preview::before { content:"CHARACTER LOADOUT"; display:block; padding-bottom:8px; color:#6f7898; font-size:9px; font-weight:900; letter-spacing:.16em; }
.wardrobe-preview p { color:#8f96b2; }
.wardrobe-categories,.wardrobe-rarities { scrollbar-color:#4f427e #11172d; }
.wardrobe-categories button,.wardrobe-rarities button { border:1px solid #303958; background:linear-gradient(180deg,#202844,#141a31); color:#aeb4ca; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.wardrobe-categories button:hover,.wardrobe-rarities button:hover { border-color:#6756bf;color:#fff; }
.wardrobe-categories button.selected,.wardrobe-rarities button.selected { border-color:#9580ff; background:linear-gradient(180deg,#644bd0,#3c2b91); color:#fff; box-shadow:0 0 14px rgba(118,90,240,.25),inset 0 1px 0 rgba(255,255,255,.18); }
.wardrobe-rarities button[data-wardrobe-rarity] { color:#bac1d7; }.wardrobe-rarities button.selected { color:#fff; }
.wardrobe-item { min-height:164px; border-color:color-mix(in srgb,var(--rarity-color) 58%,#2b3557); background:
  linear-gradient(145deg,rgba(255,255,255,.09),transparent 30%),
  radial-gradient(circle at 75% 28%,color-mix(in srgb,var(--item-color) 28%,transparent),transparent 42%),
  linear-gradient(160deg,color-mix(in srgb,var(--rarity-color) 20%,#202944),#10162b 68%); color:#f5f7ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 22px rgba(2,5,18,.24); transition:.2s ease; }
.wardrobe-item::before { content:""; position:absolute; inset:5px; border:1px solid color-mix(in srgb,var(--rarity-color) 20%,transparent); border-radius:13px; pointer-events:none; }
.wardrobe-item::after { opacity:.2; filter:blur(5px); }.wardrobe-item:hover:not(:disabled) { transform:translateY(-4px) scale(1.015); box-shadow:0 14px 28px rgba(2,5,18,.42),0 0 22px color-mix(in srgb,var(--rarity-color) 23%,transparent); }
.wardrobe-item.equipped { border-color:var(--rarity-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--rarity-color) 28%,transparent),0 0 28px color-mix(in srgb,var(--rarity-color) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.13); }
.wardrobe-item.locked { filter:none; opacity:.4; background:linear-gradient(155deg,#1a2035,#0e1326); }
.wardrobe-rarity { box-shadow:0 2px 8px rgba(0,0,0,.28); letter-spacing:.05em; }.wardrobe-item-icon { border:1px solid color-mix(in srgb,var(--item-color) 45%,#fff); background:linear-gradient(145deg,color-mix(in srgb,var(--item-color) 48%,#fff),color-mix(in srgb,var(--item-color) 55%,#131a32)); box-shadow:0 0 20px color-mix(in srgb,var(--item-color) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.35); }
.wardrobe-item b { color:#f7f8ff; }.wardrobe-item small { color:#8e96b3; }
.reward-burst { background:linear-gradient(155deg,#202847,#0f142a); color:#fff; box-shadow:0 35px 110px rgba(2,5,18,.65),0 0 30px color-mix(in srgb,var(--reward-color) 34%,transparent); }.reward-burst .burst-kicker { color:var(--reward-color); }.reward-burst p,.reward-burst button { color:#aeb5ce; }

/* Cumulative reward rendering: artwork upgrades plus additive light layers. */
.rpg-character-stage { background:radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--aura-color) 14%,#26304f),transparent 47%); }
.rpg-hero-art { height:99%; max-width:99%; filter:drop-shadow(0 13px 12px rgba(0,0,0,.42)); transition:filter .35s ease,transform .35s ease; }
.stage-adventurer .rpg-hero-art { filter:drop-shadow(0 14px 13px rgba(0,0,0,.46)) drop-shadow(0 0 5px color-mix(in srgb,var(--aura-color) 26%,transparent)); }
.stage-legend .rpg-hero-art { filter:drop-shadow(0 16px 14px rgba(0,0,0,.5)) drop-shadow(0 0 9px color-mix(in srgb,var(--aura-color) 42%,transparent)); }
.stage-starter .rpg-rarity-beam { opacity:0; }
.stage-adventurer .rpg-rarity-beam { opacity:.55; }
.stage-legend .rpg-rarity-beam { opacity:.92; }
.rpg-cumulative-effects { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; border-radius:inherit; }
.rpg-cumulative-effects > i { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%) scale(var(--scale)); animation-delay:var(--delay); }
.fx-star { width:10px; height:10px; background:linear-gradient(135deg,#fff,var(--aura-accent)); clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%); filter:drop-shadow(0 0 5px var(--aura-color)); animation:fxTwinkle 2.8s ease-in-out infinite; }
.fx-spark { width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px var(--aura-color),0 0 13px 4px color-mix(in srgb,var(--aura-accent) 45%,transparent); animation:fxFloat 4.2s ease-in-out infinite; }
.fx-rune { width:13px; height:13px; border:1px solid color-mix(in srgb,var(--backdrop-accent) 78%,#fff); transform:translate(-50%,-50%) rotate(45deg) scale(var(--scale))!important; box-shadow:0 0 8px color-mix(in srgb,var(--backdrop-color) 62%,transparent),inset 0 0 5px color-mix(in srgb,var(--backdrop-color) 40%,transparent); opacity:.72; animation:fxRune 5.8s ease-in-out infinite; }
.fx-wisp { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 36% 32%,#fff 0 8%,var(--aura-accent) 18%,var(--aura-color) 45%,transparent 68%); box-shadow:0 0 12px color-mix(in srgb,var(--aura-color) 72%,transparent); animation:fxOrbit 5s ease-in-out infinite; }
.fx-crystal { width:9px; height:18px; clip-path:polygon(50% 0,100% 32%,76% 100%,24% 100%,0 32%); background:linear-gradient(135deg,#fff 0 12%,var(--aura-accent) 34%,var(--rarity-color) 100%); box-shadow:0 0 8px var(--aura-color); animation:fxFloat 3.6s ease-in-out infinite; }
.fx-ring { position:absolute; left:50%; top:48%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid color-mix(in srgb,var(--aura-color) 48%,transparent); border-radius:50%; box-shadow:0 0 20px color-mix(in srgb,var(--aura-color) 18%,transparent),inset 0 0 18px color-mix(in srgb,var(--aura-color) 12%,transparent); animation:fxRing 9s linear infinite; }
.fx-ring.ring-2 { width:68%; border-style:dashed; animation-direction:reverse; animation-duration:13s; opacity:.72; }
.fx-ring.ring-3 { width:79%; border-color:color-mix(in srgb,var(--backdrop-accent) 34%,transparent); animation-duration:18s; opacity:.48; }
.fx-rays { position:absolute; inset:3% 10%; background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--aura-color) 12%,transparent) 0 3deg,transparent 3deg 25deg); border-radius:50%; filter:blur(2px); opacity:.48; animation:fxRing 32s linear infinite; }
@keyframes fxTwinkle { 50%{opacity:.32;transform:translate(-50%,-50%) scale(calc(var(--scale) * .55)) rotate(45deg)} }
@keyframes fxFloat { 50%{margin-top:-11px;opacity:.52} }
@keyframes fxRune { 50%{opacity:.3;filter:brightness(1.5)} }
@keyframes fxOrbit { 50%{margin-top:-13px;margin-left:5px;filter:brightness(1.3)} }
@keyframes fxRing { to{transform:translate(-50%,-50%) rotate(360deg)} }
.wardrobe-item.cumulative { cursor:default; }
.wardrobe-item.cumulative small { color:#75d8c0; font-weight:800; }
.wardrobe-item.cumulative:hover { transform:none; }

@media(max-width:620px){
  .rpg-hero-art { height:94%;max-width:92%; }.rpg-rarity-plate { font-size:8px;min-width:62px; }
  .gear-slot { width:31px;height:31px;border-radius:9px }.gear-slot i{font-size:13px}
  .wardrobe-preview::before { display:none; }.wardrobe-preview { background:linear-gradient(160deg,#1a2242,#10162e); }
  .wardrobe-total { width:88px;flex-basis:88px }.wardrobe-total b { font-size:14px }
  .wardrobe-item { min-height:150px; }.wardrobe-header p { color:#949bb7; }
}
