/* ============================================================
   heroes.css — Lanna Heroes (NFT-style character game)
   Mint · Level Up · Marketplace
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Cormorant+Garamond:wght@600;700&family=Montserrat:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0d1b3e; --navyd:#080f22;
  --gold:#C9A84C; --goldf:#f4d03f;
  --cream:#f5f0e8; --red:#e05555; --green:#4caf7d;
  --hud-h:48px; --nav-h:54px;
  --font-px:'Press Start 2P',monospace;
  --font-title:'Cormorant Garamond',serif;
  --font-body:'Montserrat',sans-serif;
  /* Legacy rarity colors */
  --common:#9e9e9e; --rare:#42a5f5; --epic:#ab47bc; --legendary:#f4d03f;
  /* New 8-tier colors */
  --tier-F:#757575; --tier-D:#a1887f; --tier-C:#66bb6a; --tier-B:#42a5f5;
  --tier-A:#ab47bc; --tier-S:#f4d03f; --tier-SS:#ff7043; --tier-SSS:#fff;
}
html,body{height:100%;background:var(--navy);color:var(--cream);font-family:var(--font-body);overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
.px{font-family:var(--font-px)!important}

/* ══ HUD ═══════════════════════════════════════════════════ */
.rh{position:fixed;top:0;left:0;right:0;height:var(--hud-h);background:rgba(8,15,34,.97);border-bottom:2px solid rgba(201,168,76,.35);display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:100;gap:8px;}
.rh-back{color:var(--gold);font-size:1rem;text-decoration:none;padding:6px;}
.rh-title{font-size:7px;color:var(--gold);letter-spacing:2px;}
.rh-coins{font-size:8px;color:var(--goldf);display:flex;align-items:center;gap:4px;}

/* ══ LAYOUT ═════════════════════════════════════════════════ */
.heroes-wrap{padding-top:calc(var(--hud-h)+8px);padding-bottom:calc(var(--nav-h)+8px);min-height:100vh;}

/* ══ TABS ═══════════════════════════════════════════════════ */
.heroes-tabs{display:flex;background:rgba(5,10,25,.9);border-bottom:1px solid rgba(201,168,76,.15);position:sticky;top:var(--hud-h);z-index:90;}
.htab{flex:1;padding:12px 4px;background:none;border:none;color:rgba(245,240,232,.45);font-size:.65rem;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;}
.htab.active{color:var(--gold);border-bottom-color:var(--gold);}
.htab-content{display:none;padding:14px 12px;}
.htab-content.active{display:block;}

/* ══ MINT SECTION ═══════════════════════════════════════════ */
.mint-hero{max-width:420px;margin:0 auto;}
.mint-card{background:linear-gradient(160deg,rgba(20,35,70,.9),rgba(8,15,34,.95));border:1px solid rgba(201,168,76,.25);border-radius:20px;padding:24px 18px;text-align:center;margin-bottom:16px;}
.mint-preview{width:100px;height:100px;margin:0 auto 16px;border-radius:16px;background:rgba(255,255,255,.04);border:2px solid rgba(201,168,76,.2);display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden;}
.mint-preview-anim{animation:mintFloat 2s ease-in-out infinite;}
@keyframes mintFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mint-title{font-size:9px;font-family:var(--font-px);color:var(--gold);margin-bottom:8px;letter-spacing:2px;}
.mint-sub{font-size:.72rem;color:rgba(245,240,232,.55);line-height:1.6;margin-bottom:18px;}
.mint-class-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:18px;}
.mc-btn{padding:8px 4px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);text-align:center;cursor:pointer;transition:all .15s;}
.mc-btn:hover,.mc-btn.selected{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.1);}
.mc-emoji{font-size:1.3rem;}
.mc-name{font-size:.45rem;color:rgba(245,240,232,.55);margin-top:2px;}
.rarity-table{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.rt-row{display:flex;align-items:center;gap:4px;font-size:.6rem;}
.rt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mint-cost-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.mint-cost-btn{padding:8px 14px;border-radius:8px;border:1px solid rgba(201,168,76,.25);background:rgba(255,255,255,.04);color:rgba(245,240,232,.7);font-size:.7rem;cursor:pointer;transition:all .15s;text-align:center;}
.mint-cost-btn:hover,.mint-cost-btn.selected{background:rgba(201,168,76,.15);border-color:var(--gold);color:var(--goldf);}
.mint-cost-btn .mc-rarity{font-size:.5rem;display:block;margin-top:2px;}
.btn-mint{width:100%;padding:14px;border-radius:12px;background:linear-gradient(135deg,#c9a84c,#f4d03f);border:none;color:#080f22;font-family:var(--font-px);font-size:9px;letter-spacing:2px;cursor:pointer;transition:all .15s;box-shadow:0 4px 20px rgba(201,168,76,.3);}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,168,76,.4);}
.btn-mint:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* ══ CHARACTER CARDS ════════════════════════════════════════ */
.char-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:480px){.char-grid{grid-template-columns:repeat(3,1fr);}}
.char-card{border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s;border:1px solid;position:relative;overflow:hidden;}
.char-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;}
.char-card:hover::before{opacity:1;}
.char-card:hover{transform:translateY(-3px);}
/* rarity themes */
.char-card.common {background:rgba(30,30,40,.8);border-color:rgba(158,158,158,.3);}
.char-card.common::before{background:rgba(158,158,158,.04);}
.char-card.rare   {background:rgba(10,25,55,.8);border-color:rgba(66,165,245,.4);box-shadow:0 0 12px rgba(66,165,245,.1);}
.char-card.rare::before{background:rgba(66,165,245,.04);}
.char-card.epic   {background:rgba(25,10,40,.8);border-color:rgba(171,71,188,.5);box-shadow:0 0 16px rgba(171,71,188,.15);}
.char-card.epic::before{background:rgba(171,71,188,.06);}
.char-card.legendary{background:rgba(30,22,5,.8);border-color:rgba(244,208,63,.55);box-shadow:0 0 20px rgba(244,208,63,.2),0 0 40px rgba(244,208,63,.08);}
.char-card.legendary::before{background:rgba(244,208,63,.06);}
.char-card.legendary .char-emoji{animation:legendSpin 6s linear infinite;}
@keyframes legendSpin{0%,100%{filter:drop-shadow(0 0 6px gold)}50%{filter:drop-shadow(0 0 14px gold)}}

.rarity-badge{position:absolute;top:6px;left:6px;font-size:.45rem;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}
/* Legacy */
.rarity-badge.common   {background:rgba(158,158,158,.2);color:var(--common);}
.rarity-badge.rare     {background:rgba(66,165,245,.2);color:var(--rare);}
.rarity-badge.epic     {background:rgba(171,71,188,.2);color:var(--epic);}
.rarity-badge.legendary{background:rgba(244,208,63,.2);color:var(--legendary);}
/* New 8-tier */
.rarity-badge.F  {background:rgba(117,117,117,.2);color:var(--tier-F);}
.rarity-badge.D  {background:rgba(161,136,127,.2);color:var(--tier-D);}
.rarity-badge.C  {background:rgba(102,187,106,.2);color:var(--tier-C);}
.rarity-badge.B  {background:rgba(66,165,245,.2); color:var(--tier-B);}
.rarity-badge.A  {background:rgba(171,71,188,.2); color:var(--tier-A);}
.rarity-badge.S  {background:rgba(244,208,63,.2); color:var(--tier-S);}
.rarity-badge.SS {background:rgba(255,112,67,.25);color:var(--tier-SS);}
.rarity-badge.SSS{background:rgba(255,255,255,.12);color:#fff;animation:sssText 3s linear infinite;}
.for-sale-badge{position:absolute;top:6px;right:6px;font-size:.42rem;font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(76,175,76,.2);color:var(--green);}

/* New 8-tier card themes */
.char-card.F{background:rgba(20,20,25,.8);border-color:rgba(117,117,117,.3);}
.char-card.F::before{background:rgba(117,117,117,.03);}
.char-card.D{background:rgba(25,18,16,.8);border-color:rgba(161,136,127,.35);}
.char-card.D::before{background:rgba(161,136,127,.03);}
.char-card.C{background:rgba(10,25,12,.8);border-color:rgba(102,187,106,.4);}
.char-card.C::before{background:rgba(102,187,106,.04);}
.char-card.B{background:rgba(10,25,55,.8);border-color:rgba(66,165,245,.45);box-shadow:0 0 12px rgba(66,165,245,.12);}
.char-card.B::before{background:rgba(66,165,245,.04);}
.char-card.A{background:rgba(25,10,40,.8);border-color:rgba(171,71,188,.55);box-shadow:0 0 18px rgba(171,71,188,.18);}
.char-card.A::before{background:rgba(171,71,188,.06);}
.char-card.A .char-emoji{animation:aGlow 4s ease-in-out infinite;}
.char-card.S{background:rgba(30,22,5,.8);border-color:rgba(244,208,63,.6);box-shadow:0 0 22px rgba(244,208,63,.25);}
.char-card.S::before{background:rgba(244,208,63,.07);}
.char-card.S .char-emoji{animation:legendSpin 6s linear infinite;}
.char-card.SS{background:rgba(30,10,5,.8);border-color:rgba(255,112,67,.7);box-shadow:0 0 24px rgba(255,112,67,.3),0 0 48px rgba(255,112,67,.1);}
.char-card.SS::before{background:rgba(255,112,67,.06);}
.char-card.SS .char-emoji{animation:ssPulse 2s ease-in-out infinite;}
.char-card.SSS{background:rgba(10,5,20,.95);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 30px rgba(200,150,255,.35),0 0 60px rgba(100,200,255,.15);}
.char-card.SSS::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,#ff7043,#f4d03f,#66bb6a,#42a5f5,#ab47bc,#ff7043);z-index:-1;animation:rainbowSpin 3s linear infinite;}
.char-card.SSS .char-emoji{animation:sssFloat 3s ease-in-out infinite;}

@keyframes aGlow{0%,100%{filter:drop-shadow(0 0 6px #ab47bc)}50%{filter:drop-shadow(0 0 16px #ab47bc)}}
@keyframes ssPulse{0%,100%{filter:drop-shadow(0 0 8px #ff7043)}50%{filter:drop-shadow(0 0 20px #ff7043);transform:scale(1.06)}}
@keyframes rainbowSpin{to{transform:rotate(360deg)}}
@keyframes sssFloat{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 12px #fff)}50%{transform:translateY(-4px);filter:drop-shadow(0 0 24px gold)}}
@keyframes sssText{0%,100%{color:#fff}33%{color:#f4d03f}66%{color:#42a5f5}}

/* ── Mint package selector ─────────────────────────────────── */
.slots-remaining-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.2);border-radius:10px;margin-bottom:12px;font-size:.62rem;color:rgba(245,240,232,.6);}
.slots-num{color:var(--goldf);font-family:var(--font-px);font-size:9px;}
.slots-bar-wrap{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin:4px 0 10px;}
.slots-bar{height:100%;background:linear-gradient(90deg,#4caf7d,#f4d03f);border-radius:3px;transition:width .5s;}

.pity-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.pity-label{font-size:.55rem;color:rgba(245,240,232,.5);min-width:120px;}
.pity-bar{flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.pity-fill{height:100%;background:linear-gradient(90deg,#42a5f5,#ab47bc);border-radius:3px;transition:width .4s;}

.mint-pkg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.mpkg-btn{background:rgba(13,27,62,.7);border:2px solid rgba(201,168,76,.18);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;}
.mpkg-btn:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.08);}
.mpkg-btn.selected{border-color:var(--gold);background:rgba(201,168,76,.12);}
.mpkg-icon{font-size:1.3rem;display:block;margin-bottom:4px;}
.mpkg-name{font-size:.58rem;font-weight:700;color:var(--cream);margin-bottom:2px;}
.mpkg-cost{font-size:.6rem;color:var(--goldf);font-family:var(--font-px);display:block;margin-bottom:2px;}
.mpkg-desc{font-size:.48rem;color:rgba(245,240,232,.4);}

/* ── Tier odds table ───────────────────────────────────────── */
.tier-table-card{background:rgba(13,27,62,.7);border:1px solid rgba(201,168,76,.15);border-radius:14px;padding:14px;margin-top:14px;}
.tier-table{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.tt-row{display:flex;align-items:center;gap:8px;}
.tt-badge{font-size:.5rem;font-weight:700;padding:2px 7px;border-radius:4px;min-width:36px;text-align:center;}
.tt-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.tt-bar{height:100%;border-radius:3px;}
.tt-pct{font-size:.52rem;color:rgba(245,240,232,.45);min-width:38px;text-align:right;}.tt-cap{font-size:.48rem;color:rgba(245,240,232,.3);}

.char-emoji{font-size:2.4rem;margin-bottom:6px;display:block;}
.char-name{font-size:.58rem;font-weight:700;color:var(--cream);margin-bottom:3px;line-height:1.3;}
.char-class{font-size:.5rem;color:rgba(245,240,232,.5);margin-bottom:6px;}
.char-level{font-size:.55rem;color:var(--goldf);font-family:var(--font-px);}
.char-stats-row{display:flex;justify-content:center;gap:8px;margin-top:4px;}
.cs{font-size:.48rem;color:rgba(245,240,232,.55);}
.cs span{color:var(--cream);font-weight:600;}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:rgba(245,240,232,.35);}
.empty-state .es-icon{font-size:3rem;margin-bottom:12px;}
.empty-state p{font-size:.75rem;line-height:1.6;}

/* ══ MARKETPLACE ════════════════════════════════════════════ */
.market-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:480px){.market-grid{grid-template-columns:repeat(3,1fr);}}
.market-card{border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s;border:1px solid;position:relative;}
/* inherits rarity classes from char-card */
.market-price{font-size:8px;font-family:var(--font-px);color:var(--goldf);margin-top:6px;}
.market-owner{font-size:.45rem;color:rgba(245,240,232,.4);margin-top:2px;}

/* ══ CHARACTER DETAIL MODAL ════════════════════════════════ */
.char-modal-overlay{position:fixed;inset:0;background:rgba(4,8,22,.88);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;}
.char-modal{background:rgba(8,15,34,.99);border:1px solid rgba(201,168,76,.3);border-radius:20px;padding:24px 18px;width:100%;max-width:360px;max-height:calc(100vh - 120px);overflow-y:auto;}
.cm-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.cm-emoji-wrap{width:70px;height:70px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;flex-shrink:0;border:2px solid;}
.cm-info{flex:1;}
.cm-name{font-size:.85rem;font-weight:700;color:var(--cream);margin-bottom:2px;}
.cm-class-rarity{font-size:.6rem;color:rgba(245,240,232,.55);}
.cm-num{font-size:.55rem;color:rgba(245,240,232,.35);}

/* Stats bars */
.stat-section{margin-bottom:16px;}
.ss-title{font-size:6px;font-family:var(--font-px);color:var(--gold);letter-spacing:1px;margin-bottom:8px;}
.stat-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.stat-icon{font-size:.8rem;width:20px;text-align:center;}
.stat-name{font-size:.6rem;color:rgba(245,240,232,.6);width:40px;}
.stat-bar{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.stat-val{font-size:.6rem;color:var(--cream);font-weight:600;width:24px;text-align:right;}

/* EXP bar */
.exp-section{margin-bottom:16px;}
.exp-label{display:flex;justify-content:space-between;font-size:.6rem;color:rgba(245,240,232,.55);margin-bottom:4px;}
.exp-bar{height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.exp-fill{height:100%;background:linear-gradient(90deg,#1565c0,#42a5f5);border-radius:4px;transition:width .4s ease;}

/* Action buttons */
.cm-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.cm-btn{width:100%;padding:11px;border-radius:10px;border:none;font-size:.7rem;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:all .15s;}
.cm-btn.primary{background:linear-gradient(135deg,#c9a84c,#f4d03f);color:#080f22;}
.cm-btn.primary:hover{transform:translateY(-1px);}
.cm-btn.secondary{background:rgba(255,255,255,.06);color:rgba(245,240,232,.7);border:1px solid rgba(255,255,255,.1);}
.cm-btn.secondary:hover{background:rgba(255,255,255,.1);}
.cm-btn.danger{background:rgba(224,85,85,.15);color:var(--red);border:1px solid rgba(224,85,85,.3);}
.cm-btn.danger:hover{background:rgba(224,85,85,.25);}
.cm-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;}
.cm-close{width:100%;padding:9px;background:none;border:none;color:rgba(245,240,232,.35);cursor:pointer;font-size:.7rem;font-family:var(--font-body);}

/* Sale price input */
.sale-input-row{display:flex;gap:8px;margin-bottom:8px;}
.sale-input{flex:1;padding:10px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.25);color:var(--cream);font-size:.8rem;font-family:var(--font-body);}
.sale-input:focus{outline:none;border-color:var(--gold);}

/* Mint reveal modal */
.mint-reveal-overlay{position:fixed;inset:0;background:rgba(4,8,22,.92);display:flex;align-items:center;justify-content:center;z-index:600;padding:20px;}
.mint-reveal-card{background:rgba(8,15,34,.99);border-radius:24px;padding:32px 24px;text-align:center;max-width:300px;width:100%;animation:revealPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes revealPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.mr-emoji{font-size:5rem;margin-bottom:12px;animation:mintFloat 2s ease-in-out infinite;}
.mr-rarity{font-size:7px;font-family:var(--font-px);letter-spacing:2px;margin-bottom:8px;}
.mr-name{font-size:1rem;font-weight:700;margin-bottom:4px;}
.mr-class{font-size:.7rem;color:rgba(245,240,232,.6);margin-bottom:16px;}
.mr-stats{display:flex;justify-content:center;gap:16px;margin-bottom:18px;}
.mr-stat{text-align:center;}
.mr-stat-val{font-size:9px;font-family:var(--font-px);color:var(--goldf);}
.mr-stat-lbl{font-size:.5rem;color:rgba(245,240,232,.5);}
.mr-btn{width:100%;padding:12px;border-radius:12px;background:linear-gradient(135deg,#c9a84c,#f4d03f);border:none;color:#080f22;font-family:var(--font-px);font-size:8px;cursor:pointer;}

/* ══ BOTTOM NAV (shared) ════════════════════════════════════ */
.game-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(5,10,25,.98);border-top:1px solid rgba(201,168,76,.12);display:flex;align-items:center;justify-content:space-around;z-index:50;}
.gbn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(245,240,232,.42);font-size:1.1rem;text-decoration:none;transition:color .15s;}
.gbn span{font-size:.52rem;font-family:var(--font-body);}
.gbn:hover,.gbn-active{color:var(--gold);}
button.gbn{background:none;border:none;cursor:pointer;}
/* Games hub */
.ghp-backdrop{position:fixed;inset:0;z-index:200;background:rgba(4,8,22,.6);backdrop-filter:blur(4px);}
.games-hub-popup{position:fixed;bottom:calc(var(--nav-h)+8px);left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));background:rgba(8,15,34,.98);border:1px solid rgba(201,168,76,.3);border-radius:16px;padding:16px;z-index:201;}
.ghp-title{font-size:8px;color:var(--gold);text-align:center;margin-bottom:14px;letter-spacing:2px;font-family:var(--font-px);}
.ghp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ghp-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(245,240,232,.7);text-decoration:none;font-size:1.4rem;transition:all .15s;}
.ghp-item span{font-size:.52rem;font-family:var(--font-body);color:rgba(245,240,232,.6);}
.ghp-item:hover,.ghp-item.ghp-active{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.35);color:var(--gold);}
.ghp-close{display:block;width:100%;margin-top:12px;padding:8px;background:rgba(255,255,255,.06);border:none;border-radius:8px;color:rgba(245,240,232,.5);cursor:pointer;font-size:.75rem;font-family:var(--font-body);}
/* Login wall */
.game-login-wall{position:fixed;inset:0;background:rgba(8,15,34,.96);display:flex;align-items:center;justify-content:center;z-index:999;}
.glw-card{text-align:center;padding:32px 24px;background:rgba(13,27,62,.9);border:1px solid rgba(201,168,76,.3);border-radius:20px;max-width:280px;}
.glw-icon{font-size:3rem;margin-bottom:12px;}
.glw-title{font-size:10px;color:var(--gold);line-height:1.8;margin-bottom:10px;font-family:var(--font-px);}
.glw-sub{font-size:.8rem;color:rgba(245,240,232,.55);margin-bottom:20px;}
.glw-btn{display:inline-block;padding:12px 28px;background:var(--gold);color:#080f22;border-radius:10px;font-weight:700;text-decoration:none;font-size:.85rem;}

/* Toast */
.hero-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:20px;font-size:.75rem;font-weight:700;z-index:700;pointer-events:none;transition:opacity .4s;white-space:nowrap;}
.hero-toast.success{background:rgba(76,175,76,.9);color:#fff;}
.hero-toast.error{background:rgba(224,85,85,.9);color:#fff;}
.hero-toast.hide{opacity:0;}

/* SSS reveal card */
.SSS-reveal{position:relative;background:rgba(10,5,20,.97)!important;border:2px solid transparent!important;background-clip:padding-box;}
.SSS-reveal::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,#ff7043,#f4d03f,#66bb6a,#42a5f5,#ab47bc,#ff7043);z-index:-1;animation:rainbowSpin 2s linear infinite;}

/* Loading spinner */
.loading-state{text-align:center;padding:32px;color:rgba(245,240,232,.35);}
.loading-state .spin{font-size:2rem;animation:spin 1s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Section label ─────────────────────────────────────────── */
.section-lbl{font-size:6px;font-family:var(--font-px);color:var(--gold);letter-spacing:1px;margin-bottom:10px;text-transform:uppercase;display:block;}

/* ── Buff info card ─────────────────────────────────────────── */
.buff-info-card{background:rgba(13,27,62,.7);border:1px solid rgba(201,168,76,.2);border-radius:14px;padding:14px;margin-top:14px;}
.buff-list{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.buff-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.65rem;}
.bf-cls{color:var(--gold);font-weight:600;min-width:90px;}
.bf-desc{color:rgba(245,240,232,.65);text-align:right;font-size:.6rem;}

/* ── Equip banner ───────────────────────────────────────────── */
.equip-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:10px;margin-bottom:12px;font-size:.7rem;color:var(--cream);}
.equip-banner span:first-child{color:var(--gold);font-weight:700;white-space:nowrap;}
.equip-banner span:nth-child(2){flex:1;font-size:.65rem;}
.eq-clear-btn{background:rgba(224,85,85,.2);border:1px solid rgba(224,85,85,.3);color:var(--red);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:.6rem;}

/* ── Quest tab ──────────────────────────────────────────────── */
.quest-intro{margin-bottom:14px;}
.quest-types{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;}
.qt-card{background:rgba(20,35,70,.7);border:2px solid rgba(201,168,76,.18);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;}
.qt-card:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.08);}
.qt-card.selected{border-color:var(--gold);background:rgba(201,168,76,.12);}
.qt-card.selected .qt-name{color:var(--goldf);}
.qt-icon{font-size:1.6rem;margin-bottom:4px;}
.qt-name{font-size:.65rem;font-weight:700;color:var(--cream);margin-bottom:2px;}
.qt-dur{font-size:.55rem;color:rgba(245,240,232,.5);}
.qt-reward{font-size:.55rem;color:var(--green);margin-top:2px;}
/* Quest hero rows */
.quest-hero-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(13,27,62,.6);border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:8px;}
.qhr-emoji{font-size:1.6rem;flex-shrink:0;}
.qhr-info{flex:1;min-width:0;}
.qhr-name{font-size:.62rem;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qhr-meta{font-size:.52rem;color:rgba(245,240,232,.45);}
.qhr-status{font-size:.52rem;color:var(--green);margin-top:2px;}
.qhr-btn{padding:7px 12px;border-radius:8px;border:none;font-size:.6rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;}
.qhr-btn.send{background:rgba(201,168,76,.2);color:var(--goldf);border:1px solid rgba(201,168,76,.35);}
.qhr-btn.send:hover{background:rgba(201,168,76,.35);}
.qhr-btn.claim{background:rgba(76,175,76,.2);color:var(--green);border:1px solid rgba(76,175,76,.3);}
.qhr-btn.claim:hover{background:rgba(76,175,76,.3);}
.qhr-btn:disabled{opacity:.35;cursor:not-allowed;}
.quest-timer{font-size:.5rem;color:rgba(245,240,232,.4);}
/* Quest pick list */
.qp-quest-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(13,27,62,.6);border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .15s;}
.qp-quest-item:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.08);}
.qp-icon{font-size:1.5rem;flex-shrink:0;}
.qp-info{flex:1;}
.qp-name{font-size:.65rem;font-weight:700;color:var(--cream);}
.qp-detail{font-size:.55rem;color:rgba(245,240,232,.5);margin-top:2px;}
.qp-reward{font-size:.55rem;color:var(--green);}

/* ── Fusion tab ─────────────────────────────────────────────── */
.fusion-intro{text-align:center;padding:14px 8px;}
.fusion-icon-row{font-size:2.5rem;margin-bottom:8px;}
.fusion-chances{display:flex;flex-direction:column;gap:4px;margin-top:8px;text-align:left;max-width:260px;margin-left:auto;margin-right:auto;}
.fc-row{display:flex;align-items:center;gap:8px;font-size:.6rem;color:rgba(245,240,232,.6);}
.fc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fusion-slots{display:flex;align-items:center;gap:8px;margin:14px 0;}
.fusion-slot{flex:1;background:rgba(13,27,62,.7);border:2px dashed rgba(201,168,76,.25);border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .15s;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.fusion-slot.filled{border-style:solid;border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.08);}
.fusion-slot:hover{border-color:rgba(201,168,76,.4);}
.fs-label{font-size:.5rem;color:rgba(245,240,232,.4);}
.fs-pick{font-size:.6rem;color:rgba(245,240,232,.55);}
.fs-emoji{font-size:2rem;display:block;}
.fs-name{font-size:.5rem;color:var(--cream);text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fs-rarity{font-size:.45rem;}
.fusion-plus{font-size:1.5rem;flex-shrink:0;}
.fusion-cost-row{text-align:center;font-size:.7rem;color:rgba(245,240,232,.65);margin-bottom:12px;padding:8px;background:rgba(201,168,76,.07);border-radius:8px;}
.fusion-cost-row strong{color:var(--goldf);}
/* Fusion pick modal */
.fusion-pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:50vh;overflow-y:auto;margin-bottom:10px;-webkit-overflow-scrolling:touch;}
.fp-card{border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,.1);background:rgba(13,27,62,.6);}
.fp-card:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.08);}
.fp-card.disabled{opacity:.3;cursor:not-allowed;pointer-events:none;}
.fp-emoji{font-size:1.5rem;display:block;margin-bottom:4px;}
.fp-name{font-size:.5rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-meta{font-size:.45rem;color:rgba(245,240,232,.45);}

/* ── Market header ──────────────────────────────────────────── */
.market-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.arena-shortcut{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(171,71,188,.15);border:1px solid rgba(171,71,188,.35);border-radius:10px;color:var(--epic);font-size:.65rem;font-weight:700;text-decoration:none;transition:all .15s;}
.arena-shortcut:hover{background:rgba(171,71,188,.25);}