/* ============================================================
   AEVENDORN — Game Styles (rebuilt)
   Design language: cinematic dark-fantasy. Layered depth,
   atmospheric backgrounds, material richness on cards/controls,
   generous typography. Mobile-first, scales up to desktop app.
   Class contract preserved 1:1 from the audit.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   LOGIN GATE — blocks the game until authenticated
   ============================================================ */
#loginGate{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    url('/assets/scenes/app_bg.jpg') center / cover fixed,
    var(--bg-darkest);
  background-blend-mode:overlay;
  padding:20px;
}
#loginGate::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(7,5,11,.7) 70%, rgba(7,5,11,.95) 100%);
}
.login-gate-content{
  position:relative; z-index:1; text-align:center; max-width:400px; width:100%;
}
.login-gate-brand{
  font-family:var(--font-display); font-size:clamp(32px,8vw,48px); font-weight:800;
  letter-spacing:clamp(4px,1.5vw,10px);
  background:linear-gradient(180deg,#fff,var(--gold-bright) 60%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:6px; filter:drop-shadow(0 4px 20px rgba(244,217,138,.2));
}
.login-gate-sub{
  font-family:var(--font-display); font-size:12px; letter-spacing:4px;
  color:var(--gold-dim); text-transform:uppercase; margin-bottom:24px;
}
.login-gate-desc{
  font-size:14px; color:var(--text-dim); line-height:1.7; max-width:340px;
  margin:0 auto 28px; font-weight:300;
}
.login-gate-forms{margin-bottom:20px}
.gate-input{
  padding:13px 16px; background:rgba(0,0,0,.5); border:1px solid var(--hairline);
  color:var(--text); border-radius:9px; font-size:15px; font-family:var(--font-body);
}
.gate-input:focus{outline:none; border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(244,217,138,.12)}
.gate-input::placeholder{color:var(--text-faint)}
.gate-terms{
  font-size:11px; color:var(--text-dim); display:flex; gap:8px;
  align-items:flex-start; cursor:pointer; text-align:left; line-height:1.5;
}
.login-gate-back{
  display:inline-block; font-size:13px; color:var(--text-faint);
  text-decoration:none; transition:color .2s;
}
.login-gate-back:hover{color:var(--gold-bright)}

:root{
  /* gold spectrum */
  --gold:#d9b25e; --gold-bright:#f4d98a; --gold-dim:#8a7440; --gold-deep:#5a4a26;
  /* stat / accent colors */
  --red:#ff6a6a; --green:#6aff96; --blue:#6ad0ff; --purple:#b482ff;
  --pwr:#ff8a6a; --hp:#7ee08a; --spd:#6ad0ff; --rng:#f4d98a; --fcs:#b482ff;
  /* surfaces — deep obsidian stack */
  --bg-darkest:#07050b; --bg-dark:#0c0912; --bg-panel:#13101c; --bg-elevated:#1a1626; --bg-card:#100d18;
  --glass:rgba(20,16,28,.6);
  /* borders */
  --border:rgba(217,178,94,.1); --border-bright:rgba(217,178,94,.32);
  --hairline:rgba(255,255,255,.06);
  /* text */
  --text:#e6e9f2; --text-dim:#9a9eb4; --text-faint:#5a5e74;
  /* type */
  --font-display:'Cinzel', Georgia, serif; --font-body:'Inter', -apple-system, sans-serif;
  /* layout */
  --tile:54px; --card-w:288px; --card-h:408px;
  --r-sm:8px; --r:14px; --r-lg:20px;
  --shadow-card:0 18px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-float:0 24px 60px rgba(0,0,0,.65);
}

body{
  background:var(--bg-darkest); color:var(--text);
  font-family:var(--font-body); font-weight:400;
  min-height:100vh; min-height:100dvh;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
  overscroll-behavior:none; touch-action:manipulation;
  /* layered atmospheric background */
  background-image:
    url('/assets/scenes/app_bg.jpg'),
    radial-gradient(circle at 18% 12%, rgba(180,130,255,.05), transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(106,208,255,.035), transparent 45%);
  background-size:cover; background-position:center; background-attachment:fixed;
  background-blend-mode:overlay, normal, normal;
}
/* darken the bg image so cards/UI read clearly */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 100% 80% at 50% 0%, rgba(7,5,11,.55), rgba(7,5,11,.82) 80%);
}
/* faint grain for material texture across the app */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* hide all screens by default; JS toggles .active */
.screen{display:none; animation:screenFade .42s cubic-bezier(.2,.8,.2,1); padding:18px; padding-bottom:110px; position:relative; z-index:1}
.screen.active{display:block}
@keyframes screenFade{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

button,.nav-btn,.card,.coll-slot,.b-unit,.tile,.pack-box,.ability-btn,.mode-card,.diff-btn,.picker-item,.fslot{touch-action:manipulation}

/* ============================================================
   TOPBAR — glass, deep, brand left + nav center + actions right
   ============================================================ */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  height:64px; padding:0 clamp(16px,3vw,48px); gap:12px;
  background:linear-gradient(180deg, rgba(7,5,11,.94), rgba(7,5,11,.78));
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 30px rgba(0,0,0,.5);
  position:sticky; top:0; z-index:100;
  overflow:visible;
}
.topbar-nav{overflow-x:auto; scrollbar-width:none}
.topbar-nav::-webkit-scrollbar{display:none}
.topbar-right{display:flex; align-items:center; gap:12px; flex-shrink:0}
.topbar .brand{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(16px,2vw,22px); letter-spacing:clamp(3px,.5vw,7px);
  color:var(--gold-bright); text-shadow:0 0 24px rgba(244,217,138,.3);
  white-space:nowrap; flex-shrink:0; overflow:visible;
  text-decoration:none;
  padding-right:4px;
}
.topbar-nav{display:flex; gap:2px; background:rgba(0,0,0,.25); padding:4px; border-radius:12px; border:1px solid var(--hairline)}
.nav-btn{
  padding:9px 22px; border-radius:9px; cursor:pointer;
  font-size:13px; font-family:var(--font-body); font-weight:600; letter-spacing:.6px;
  background:transparent; border:none; color:var(--text-dim);
  transition:all .22s ease;
}
.nav-btn:hover{color:var(--text)}
.nav-btn.active{
  color:var(--bg-darkest);
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow:0 4px 14px rgba(244,217,138,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.topbar .resources{
  font-size:11px; color:var(--text-faint); white-space:nowrap;
  font-weight:500; letter-spacing:.3px;
}
#authArea .btn{
  background:linear-gradient(135deg, rgba(244,217,138,.18), rgba(244,217,138,.08))!important;
  color:var(--gold-bright)!important;
  border:1px solid rgba(244,217,138,.4)!important;
  font-size:12px; padding:9px 18px; border-radius:9px; cursor:pointer;
  font-family:inherit; min-height:36px; font-weight:700; letter-spacing:.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .2s;
}
#authArea .btn:hover{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold))!important;
  color:var(--bg-darkest)!important;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head{text-align:center; padding:30px 0 22px}
.sec-head h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3vw,30px); letter-spacing:clamp(3px,1vw,7px);
  color:#fff; margin-bottom:10px;
  background:linear-gradient(180deg,#fff, var(--gold-bright) 65%, var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sec-head .desc{
  font-size:14px; color:var(--text-dim); margin:6px auto 0;
  max-width:520px; line-height:1.65; font-weight:300;
}

/* ============================================================
   CARDS — Layout C, but with material depth & foil sheen
   ============================================================ */
.card{
  width:var(--card-w); height:var(--card-h); border-radius:var(--r);
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--bg-elevated) 0%, var(--bg-dark) 55%, var(--bg-darkest) 100%);
  padding:10px; display:flex; flex-direction:column;
  font-family:var(--font-display);
  box-shadow:var(--shadow-card);
  border:1px solid var(--hairline);
}
/* rarity surface treatments */
.card.rare{background:linear-gradient(165deg, #18283a 0%, #0a1622 100%); box-shadow:var(--shadow-card), 0 0 0 1px rgba(106,208,255,.18), 0 0 26px rgba(106,208,255,.14)}
.card.mythic{background:linear-gradient(165deg, #291a32 0%, #140819 100%); box-shadow:var(--shadow-card), 0 0 0 1px rgba(180,130,255,.22), 0 0 32px rgba(180,130,255,.18)}
.card.unique{
  background:linear-gradient(165deg, #2a2417 0%, #181208 100%);
  box-shadow:var(--shadow-card), 0 0 0 1.5px rgba(244,217,138,.45), 0 0 38px rgba(244,217,138,.28);
}
/* foil sheen sweep on rare+ */
.card.rare::after,.card.mythic::after,.card.unique::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:7;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.04) 53%, transparent 70%);
  mix-blend-mode:overlay;
}
.card.unique::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:7;
  background:linear-gradient(115deg, transparent 30%, rgba(244,217,138,.18) 48%, rgba(180,130,255,.1) 56%, transparent 70%);
}
/* ornamental inner frame line */
.card .frame{position:absolute; inset:0; border-radius:var(--r); pointer-events:none; z-index:5;
  border:2px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card.rare .frame{border-color:#5aa8d0}
.card.mythic .frame{border-color:var(--purple)}
.card.unique .frame{border-color:var(--gold-bright); border-width:2.5px}
/* corner flourishes */
.card .corners{position:absolute; inset:0; pointer-events:none; z-index:6}
.card .corners::before,.card .corners::after{content:""; position:absolute; width:14px; height:14px; border:2px solid var(--gold)}
.card .corners::before{top:6px; left:6px; border-right:none; border-bottom:none}
.card .corners::after{bottom:6px; right:6px; border-left:none; border-top:none}
.card.rare .corners::before,.card.rare .corners::after{border-color:#5aa8d0}
.card.mythic .corners::before,.card.mythic .corners::after{border-color:var(--purple)}
.card.unique .corners::before,.card.unique .corners::after{border-color:var(--gold-bright)}

.c-status{display:flex; justify-content:space-between; padding:0 4px; z-index:8; position:relative; min-height:16px}
.c-badge{font-size:7.5px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:.5px; font-family:var(--font-body)}
.c-badge.lineage{background:linear-gradient(90deg, var(--purple), var(--blue)); color:#fff; box-shadow:0 0 8px rgba(180,130,255,.4)}
.c-badge.mutated{background:rgba(255,106,106,.15); border:1px solid var(--red); color:var(--red)}
.c-badge.physical{background:rgba(0,0,0,.6); border:1px solid var(--gold-bright); color:var(--gold-bright); box-shadow:0 0 8px rgba(244,217,138,.3)}

.c-header{display:flex; justify-content:space-between; align-items:center; padding:3px 4px 5px; z-index:4; position:relative}
.c-name{
  font-size:15px; font-weight:600; color:#fff; letter-spacing:.3px;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 12px rgba(244,217,138,.15);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:210px;
}
.c-cost{
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7ec7ff, #1a5a9a 75%);
  border:2px solid rgba(200,224,255,.7);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; font-family:var(--font-body);
  flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}

.c-art{
  flex:0 0 152px; margin:0 2px; border-radius:8px; overflow:hidden;
  position:relative; z-index:2;
  background:var(--bg-darkest);
  border:1px solid rgba(217,178,94,.3);
  box-shadow:inset 0 0 24px rgba(0,0,0,.6);
}
.c-art img{width:100%; height:100%; object-fit:cover; display:block}

.c-info{flex:1; margin-top:7px; z-index:4; position:relative; display:flex; flex-direction:column}
.c-statblock{display:flex; gap:0;
  border-top:1px solid rgba(217,178,94,.22); border-bottom:1px solid rgba(217,178,94,.22);
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.1));
}
.c-stat{flex:1; text-align:center; padding:5px 0; border-right:1px solid rgba(255,255,255,.05); font-family:var(--font-body)}
.c-stat:last-child{border-right:none}
.c-stat .v{font-size:16px; font-weight:900; line-height:1; text-shadow:0 0 8px currentColor}
.c-stat .l{font-size:7px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; font-weight:600}
.c-stat.pwr .v{color:var(--pwr)} .c-stat.hp .v{color:var(--hp)} .c-stat.spd .v{color:var(--spd)} .c-stat.rng .v{color:var(--rng)} .c-stat.fcs .v{color:var(--fcs)}

.c-abilities{padding:5px 4px; flex:1; overflow:hidden}
.c-ability{padding:3px 0; border-bottom:1px solid rgba(255,255,255,.04)}
.c-ability:last-child{border-bottom:none}
.c-ab-row{display:flex; align-items:center; gap:5px}
.c-ab-name{font-size:10px; color:var(--gold-bright); font-style:italic; font-weight:600}
.c-ab-tier{font-size:6.5px; padding:1.5px 5px; border-radius:5px; font-family:var(--font-body); font-weight:800; letter-spacing:.4px}
.c-ab-tier.normal{background:rgba(255,255,255,.07); color:var(--text-dim)}
.c-ab-tier.strong{background:rgba(106,208,255,.18); color:var(--blue)}
.c-ab-tier.rare{background:rgba(244,217,138,.2); color:var(--gold-bright)}
.c-ab-type{font-size:6.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-left:auto; font-family:var(--font-body); font-weight:600}
.c-ab-text{font-size:7.5px; color:var(--text-dim); font-family:var(--font-body); line-height:1.3; margin-top:2px; font-weight:400}

.c-footer{display:flex; justify-content:space-between; padding:4px 7px 2px; z-index:4; position:relative; font-family:var(--font-body); font-size:7.5px; letter-spacing:.5px; font-weight:600}
.c-realm{text-transform:uppercase; font-weight:800; opacity:.9}
.c-realm.fantasy{color:#e8a04a} .c-realm.biomech{color:#4ad0e8} .c-realm.cryptid{color:#88c4a0} .c-realm.cosmic{color:var(--purple)}
.c-serial{color:var(--text-faint); text-transform:uppercase; letter-spacing:.6px}
.card.unique .c-serial{color:var(--gold-bright)}

/* ============================================================
   COLLECTION GRID
   ============================================================ */
.coll-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(288px,1fr));
  gap:24px; padding:24px; max-width:1480px; margin:0 auto; justify-items:center;
}
.coll-slot{position:relative; cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.coll-slot:hover{transform:translateY(-8px)}
.coll-slot:hover .card{box-shadow:var(--shadow-float), 0 0 30px rgba(244,217,138,.15)}
.fav-star{
  position:absolute; top:6px; right:6px; z-index:20;
  font-size:18px; color:rgba(255,255,255,.4); cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.9); transition:all .15s; user-select:none;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  border-radius:50%; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; line-height:1;
  border:1px solid rgba(255,255,255,.08);
}
.fav-star:hover{color:var(--gold-bright); transform:scale(1.2)}
.fav-star.active{color:var(--gold-bright); text-shadow:0 0 10px rgba(244,217,138,.7); background:rgba(0,0,0,.7); border-color:rgba(244,217,138,.5)}

/* ============================================================
   CONTROLS — premium pill select / input / filter chips
   ============================================================ */
#favFilterBtn.active-fav{
  background:linear-gradient(135deg, rgba(244,217,138,.3), rgba(244,217,138,.15))!important;
  border-color:var(--gold-bright)!important;
  box-shadow:0 0 16px rgba(244,217,138,.4), inset 0 1px 0 rgba(255,255,255,.1)!important;
  color:#fff!important;
}
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:rgba(10,8,16,.7)!important; color:var(--text)!important;
  border:1px solid var(--hairline)!important; border-radius:9px!important;
  padding:8px 30px 8px 12px!important; font-size:12px!important; font-family:var(--font-body)!important;
  font-weight:500!important; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d9b25e' d='M5 6L0 0h10z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 10px center!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
select:hover{border-color:var(--border-bright)!important}
select:focus{outline:none; border-color:var(--gold-bright)!important; box-shadow:0 0 0 3px rgba(244,217,138,.12)!important}
select option{background:var(--bg-panel); color:var(--text); padding:6px}

.empty-msg{text-align:center; padding:80px 20px; color:var(--text-faint); font-size:15px; font-weight:300}

/* collection controls row */
.coll-controls{
  max-width:960px; margin:10px auto 6px; display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center; align-items:center; padding:6px;
}
#searchInput{
  padding:8px 14px!important; background:rgba(10,8,16,.7)!important;
  border:1px solid var(--hairline)!important; color:var(--text)!important;
  border-radius:9px!important; font-size:12px!important; font-family:var(--font-body)!important;
  width:150px; transition:border-color .2s, box-shadow .2s;
}
#searchInput::placeholder{color:var(--text-faint)}
#searchInput:focus{outline:none; border-color:var(--gold-bright)!important; box-shadow:0 0 0 3px rgba(244,217,138,.12)}
#favFilterBtn{
  font-size:12px; padding:8px 16px;
  border:1px solid rgba(244,217,138,.35);
  background:linear-gradient(180deg, rgba(244,217,138,.1), rgba(244,217,138,.03));
  color:var(--gold-bright); font-weight:700; border-radius:9px; cursor:pointer;
  font-family:inherit; letter-spacing:.3px; transition:all .2s;
}
#favFilterBtn:hover{border-color:var(--gold-bright); background:linear-gradient(180deg, rgba(244,217,138,.18), rgba(244,217,138,.06))}

/* team select count + mode row + misc text */
.team-count{text-align:center; margin:10px 0; font-size:15px; color:var(--gold-bright); font-weight:600; letter-spacing:.5px}
.mode-row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:18px 0}
.mc-desc{font-size:13px; color:var(--text-dim); line-height:1.6; font-weight:300}
.pvp-status{text-align:center; font-size:13px; color:var(--purple); min-height:20px; margin-top:10px; font-weight:500}
.fusion-prediction{text-align:center; max-width:520px; margin:0 auto; line-height:1.6}

/* ============================================================
   BUTTONS — gradient fills with depth, not flat translucents
   ============================================================ */
.btn{
  padding:13px 28px; border-radius:10px; cursor:pointer;
  font-size:14px; font-family:var(--font-body); border:none;
  font-weight:700; margin:4px; transition:all .22s ease;
  touch-action:manipulation; letter-spacing:.6px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text-dim); border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.3);
}
.btn:hover:not(:disabled){transform:translateY(-2px); color:var(--text); border-color:var(--border-bright); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.45)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn::before{
  content:""; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.18), transparent);
  transition:left .55s ease; pointer-events:none;
}
.btn:hover:not(:disabled)::before{left:130%}

.btn.gold{background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim)); color:var(--bg-darkest); border:1px solid rgba(244,217,138,.6); box-shadow:0 6px 20px rgba(244,217,138,.32), inset 0 1px 0 rgba(255,255,255,.55); text-shadow:0 1px 0 rgba(255,255,255,.3)}
.btn.gold:hover:not(:disabled){box-shadow:0 12px 32px rgba(244,217,138,.45), inset 0 1px 0 rgba(255,255,255,.65); color:var(--bg-darkest); border-color:var(--gold-bright)}
.btn.purple{background:linear-gradient(180deg, #c89aff, var(--purple) 60%, #7a4acc); color:#fff; border:1px solid rgba(180,130,255,.6); box-shadow:0 6px 20px rgba(180,130,255,.32), inset 0 1px 0 rgba(255,255,255,.4); text-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn.purple:hover:not(:disabled){box-shadow:0 12px 32px rgba(180,130,255,.45), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.blue{background:linear-gradient(180deg, #8adfff, var(--blue) 60%, #3a9ad0); color:#06121a; border:1px solid rgba(106,208,255,.6); box-shadow:0 6px 20px rgba(106,208,255,.32), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.green{background:linear-gradient(180deg, #8affb0, var(--green) 60%, #3acc6a); color:#061a0e; border:1px solid rgba(106,255,150,.6); box-shadow:0 6px 20px rgba(106,255,150,.32), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.red{background:linear-gradient(180deg, #ff8a8a, var(--red) 60%, #cc3a3a); color:#1a0606; border:1px solid rgba(255,106,106,.6); box-shadow:0 6px 20px rgba(255,106,106,.32), inset 0 1px 0 rgba(255,255,255,.4)}
.btn:disabled{opacity:.32; cursor:not-allowed; transform:none!important}
.btn-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   FUSION
   ============================================================ */
.fusion-slots{display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin:28px 0}
.fslot{
  width:190px; min-height:272px; border-radius:var(--r);
  border:1.5px dashed rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s;
  background:linear-gradient(165deg, rgba(255,255,255,.025), rgba(180,130,255,.02));
  position:relative; box-shadow:inset 0 0 30px rgba(0,0,0,.4);
}
.fslot:hover{border-color:var(--purple); background:linear-gradient(165deg, rgba(180,130,255,.08), rgba(180,130,255,.02)); box-shadow:inset 0 0 30px rgba(180,130,255,.1)}
.fslot.filled{border-style:solid; border-color:rgba(180,130,255,.55); background:radial-gradient(circle at 50% 30%, rgba(180,130,255,.12), rgba(180,130,255,.02)); box-shadow:0 0 28px rgba(180,130,255,.2), inset 0 0 24px rgba(180,130,255,.08)}
.fslot .fslot-empty{color:var(--text-faint); font-size:13px; text-align:center; padding:18px; font-weight:500; letter-spacing:.5px}
.fslot .remove-x{position:absolute; top:6px; right:8px; color:var(--red); font-size:20px; font-weight:bold; cursor:pointer; z-index:20; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); border-radius:50%; border:1px solid rgba(255,106,106,.3)}
.fplus{font-size:32px; color:var(--purple); font-weight:300; text-shadow:0 0 16px rgba(180,130,255,.5)}

/* ============================================================
   BATTLE
   ============================================================ */
.turn-badge{display:inline-block; padding:7px 20px; border-radius:16px; font-size:12px; font-weight:700; letter-spacing:1.5px; margin:8px 0; font-family:var(--font-body); text-transform:uppercase}
.turn-badge.you{background:linear-gradient(135deg, rgba(106,255,150,.18), rgba(106,255,150,.06)); border:1px solid rgba(106,255,150,.45); color:var(--green); box-shadow:0 0 16px rgba(106,255,150,.15)}
.turn-badge.foe{background:linear-gradient(135deg, rgba(255,106,106,.18), rgba(255,106,106,.06)); border:1px solid rgba(255,106,106,.45); color:var(--red)}
.battle-msg{font-size:16px; color:var(--gold-bright); min-height:24px; margin:10px 0; font-weight:500; letter-spacing:.3px}
.ability-bar{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0; min-height:40px}
.ability-btn{
  padding:10px 16px; border-radius:9px; cursor:pointer; font-size:13px; font-family:var(--font-body);
  background:linear-gradient(180deg, rgba(180,130,255,.2), rgba(180,130,255,.08));
  border:1px solid rgba(180,130,255,.45); color:#dcc8ff;
  transition:all .2s; font-weight:700; touch-action:manipulation; letter-spacing:.3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ability-btn:hover:not(:disabled){background:linear-gradient(180deg, rgba(180,130,255,.35), rgba(180,130,255,.15)); transform:translateY(-1px); box-shadow:0 6px 16px rgba(180,130,255,.25)}
.ability-btn.active{background:linear-gradient(180deg, var(--purple), #7a4acc); color:#fff; box-shadow:0 0 18px rgba(180,130,255,.55), inset 0 1px 0 rgba(255,255,255,.3)}
.ability-btn .ab-tier-tag{font-size:8px; opacity:.85; margin-left:4px; font-weight:800}
.ability-btn:disabled{opacity:.32; cursor:not-allowed}
.ability-hint{font-size:14px; color:var(--purple); margin:8px 0; min-height:18px; font-weight:500; text-shadow:0 0 12px rgba(180,130,255,.25)}

.board-wrap{display:flex; justify-content:center; overflow-x:auto; padding:12px}
.board{
  display:grid; grid-template-columns:repeat(7, var(--tile)); grid-template-rows:repeat(6, var(--tile));
  gap:3px; padding:12px; border-radius:var(--r);
  background:linear-gradient(165deg, rgba(20,16,28,.85), rgba(7,5,11,.85));
  border:1px solid var(--border);
  box-shadow:var(--shadow-float), inset 0 0 40px rgba(0,0,0,.5);
}
.tile{
  width:var(--tile); height:var(--tile);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-radius:5px; position:relative; display:flex; align-items:center; justify-content:center;
  transition:background .14s; border:1px solid rgba(255,255,255,.025);
}
.tile.move-here{background:linear-gradient(165deg, rgba(106,208,255,.3), rgba(106,208,255,.12))!important; cursor:pointer; box-shadow:inset 0 0 12px rgba(106,208,255,.4); border-color:rgba(106,208,255,.5)}
.tile.move-here:hover{background:linear-gradient(165deg, rgba(106,208,255,.5), rgba(106,208,255,.2))!important}
.cover{position:absolute; inset:4px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:16px; font-family:var(--font-display); box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.cover.full{background:linear-gradient(135deg, #5a6480, #2a3040); border:1px solid rgba(120,130,150,.4)}
.cover.half{background:linear-gradient(135deg, #6a5a40, #3a2818); opacity:.85; border:1px solid rgba(140,110,60,.4)}
.b-unit{
  width:calc(var(--tile) - 10px); height:calc(var(--tile) - 10px); border-radius:7px; overflow:hidden;
  position:relative; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.7);
  cursor:pointer; transition:transform .15s; border:2px solid rgba(255,255,255,.15);
}
.b-unit.clickable:hover{transform:scale(1.1)}
.b-unit.selected{outline:3px solid var(--gold-bright); box-shadow:0 0 20px rgba(244,217,138,.75); border-color:var(--gold-bright)}
.b-unit img{width:100%; height:100%; object-fit:cover}
.b-unit .hp-pip{
  position:absolute; bottom:-4px; right:-4px;
  background:rgba(0,0,0,.92); border:1.5px solid var(--hp); border-radius:9px;
  padding:0 4px; font-size:10px; font-weight:900; color:var(--hp); min-width:16px; text-align:center;
  font-family:var(--font-body);
}
.b-unit.enemy .hp-pip{border-color:var(--red); color:var(--red)}
.b-unit.acted{filter:grayscale(.85) brightness(.45)}
.b-unit.enemy.in-range{outline:2px dashed var(--red); cursor:crosshair; box-shadow:0 0 14px rgba(255,106,106,.5)}
.dmg-preview{position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.92); border:1.5px solid var(--red); border-radius:11px; padding:3px 8px; font-size:11px; font-weight:900; color:var(--red); white-space:nowrap; z-index:10; pointer-events:none; font-family:var(--font-body)}
.dmg-preview.blocked{border-color:#888; color:#aaa}
.dmg-preview.half{border-color:var(--gold); color:var(--gold-bright)}
.board-dmg{position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:22px; font-weight:900; color:var(--red); text-shadow:0 0 8px #000, 0 0 4px #000; pointer-events:none; z-index:20; animation:bdmg .9s forwards; font-family:var(--font-body)}
@keyframes bdmg{0%{opacity:0; transform:translateX(-50%) scale(.4)}20%{opacity:1; transform:translateX(-50%) translateY(-8px) scale(1.3)}100%{opacity:0; transform:translateX(-50%) translateY(-42px) scale(1)}}
@keyframes abPop{0%{opacity:0; transform:translateX(-50%) translateY(0) scale(.5)}20%{opacity:1; transform:translateX(-50%) translateY(-12px) scale(1.1)}80%{opacity:1; transform:translateX(-50%) translateY(-20px) scale(1)}100%{opacity:0; transform:translateX(-50%) translateY(-35px) scale(1)}}

/* ============================================================
   MODE/DIFFICULTY
   ============================================================ */
.mode-card{
  width:100%; max-width:290px; padding:26px; border-radius:var(--r-lg);
  cursor:pointer; transition:all .3s cubic-bezier(.2,.8,.2,1); text-align:left;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--hairline); position:relative; overflow:hidden;
}
.mode-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, currentColor, transparent 70%); opacity:.06; pointer-events:none}
.mode-card:hover{transform:translateY(-6px); border-color:var(--border-bright); box-shadow:var(--shadow-float)}
.mode-card .mc-title{font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:10px; letter-spacing:1.5px}
.diff-btn{
  padding:11px 24px; border-radius:9px; cursor:pointer; font-size:14px; font-family:inherit;
  font-weight:700; letter-spacing:.5px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  color:var(--text-dim); transition:all .2s;
}
.diff-btn:hover{border-color:var(--border-bright); color:var(--text); transform:translateY(-1px)}
.diff-btn.active{
  background:linear-gradient(180deg, rgba(244,217,138,.25), rgba(244,217,138,.1));
  border-color:var(--gold-bright); color:var(--gold-bright);
  box-shadow:0 0 16px rgba(244,217,138,.25), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ============================================================
   PACK OPENING — cinematic, layered
   ============================================================ */
.pack-stage{
  position:fixed; inset:0; z-index:300; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:20px; overflow:hidden;
  padding-top:max(20px, env(safe-area-inset-top, 20px));
  padding-bottom:max(20px, env(safe-area-inset-bottom, 20px));
  background:url('/assets/scenes/pack_stage.jpg') center / cover no-repeat, var(--bg-darkest);
  overscroll-behavior:contain;
  touch-action:none;
}
.pack-stage.active{display:flex}
/* NO pack-glow — removed per user request (pulsing effect was unwanted) */
/* Pack — floating image, no box shape */
.pack-box{
  width:min(85vw, 380px);
  position:relative; cursor:pointer;
  animation:packfloat 3s ease-in-out infinite; z-index:2;
  transform-origin:left center;
}
.pack-box:active{transform:scale(.96)}
.pack-box.peeling{
  animation:packPeelLeft 1.4s cubic-bezier(.4,0,.2,1) forwards !important;
  z-index:5;
}
@keyframes packfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* Pack open: scales up and dissolves — clean, satisfying, not fake physics */
@keyframes packOpen{
  0%{transform:scale(1); opacity:1; filter:brightness(1)}
  40%{transform:scale(1.15); opacity:1; filter:brightness(1.5)}
  70%{transform:scale(1.4); opacity:.3; filter:brightness(2)}
  100%{transform:scale(1.8); opacity:0; filter:brightness(3)}
}
/* Realistic peel to the LEFT: the right side lifts and curls over.
   Uses a combination of perspective, rotateY for the curl, and a gradient
   overlay (.pack-peel-shadow) that simulates the back of the peeling foil.
   The transform-origin on the left edge makes the left side stay put while
   the right peels away — like opening a book or peeling a sticker. */
@keyframes packPeelLeft{
  0%{
    transform:perspective(1200px) rotateY(0deg) translateX(0);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity:1;
  }
  15%{
    transform:perspective(1200px) rotateY(-15deg) translateX(-5px);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow:inset -30px 0 60px -10px rgba(0,0,0,.5);
    opacity:1;
  }
  35%{
    transform:perspective(1200px) rotateY(-35deg) translateX(-20px);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow:inset -50px 0 80px -10px rgba(0,0,0,.7), 20px 0 30px rgba(0,0,0,.3);
    opacity:.95;
  }
  60%{
    transform:perspective(1200px) rotateY(-65deg) translateX(-50px);
    clip-path:polygon(0 0, 95% 5%, 95% 95%, 0 100%);
    box-shadow:inset -60px 0 80px -10px rgba(0,0,0,.8), 30px 5 40px rgba(0,0,0,.4);
    opacity:.7;
  }
  80%{
    transform:perspective(1200px) rotateY(-95deg) translateX(-90px);
    clip-path:polygon(0 0, 85% 10%, 85% 90%, 0 100%);
    opacity:.3;
  }
  100%{
    transform:perspective(1200px) rotateY(-120deg) translateX(-130px);
    clip-path:polygon(0 0, 70% 15%, 70% 85%, 0 100%);
    opacity:0;
  }
}
.pack-box .pack-art{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.6));
}
.pack-box .pack-tap{
  position:absolute; bottom:16px; left:0; right:0; z-index:2;
  font-size:13px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.9);
  animation:blink 1.5s infinite; letter-spacing:1px; text-transform:uppercase;
}
/* The Shattering — lore-based pack open: a fragment bursts with light */
.shatter-overlay{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.shatter-overlay img{
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode:screen;
}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.tear-seam{position:absolute; top:50%; left:0; right:0; height:4px; transform:translateY(-50%); opacity:0; pointer-events:none; z-index:3}
.tear-seam.tearing{opacity:1; animation:tearFlash .6s ease}
@keyframes tearFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.tear-seam.unique{background:rgba(244,217,138,1); box-shadow:0 0 84px rgba(244,217,138,.95)}
.screen-flash{position:fixed; inset:0; z-index:310; pointer-events:none; opacity:0}
.screen-flash.flash{animation:screenFlash .8s ease}
@keyframes screenFlash{0%{opacity:0}10%{opacity:.92}100%{opacity:0}}
.reveal-area{display:flex; align-items:center; justify-content:center; flex:1; width:100%; position:relative; z-index:2; min-height:60vh}
.reveal-controls{position:relative; z-index:20; padding:16px; text-align:center}
/* Fan layout: 3 cards in center. Cards STAY in place when flipped.
   No set-aside, no moving. Just flip in place and bring forward slightly. */
.reveal-card-wrap{width:min(55vw, 260px); aspect-ratio:288/408; position:absolute;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;}
.reveal-card-wrap[data-pos="0"]{transform:translateX(-35px) translateY(15px) rotate(-6deg); z-index:1;}
.reveal-card-wrap[data-pos="1"]{transform:translateX(0) translateY(0) rotate(0deg); z-index:3;}
.reveal-card-wrap[data-pos="2"]{transform:translateX(35px) translateY(15px) rotate(6deg); z-index:2;}
/* When flipped: come forward slightly, stay in same position. No !important
   overrides. pointer-events stays on so nothing weird happens. */
.reveal-card-wrap.is-flipped[data-pos="0"]{transform:translateX(-25px) translateY(5px) rotate(-3deg) scale(1.03); z-index:5;}
.reveal-card-wrap.is-flipped[data-pos="1"]{transform:translateX(0) translateY(-5px) rotate(0deg) scale(1.03); z-index:5;}
.reveal-card-wrap.is-flipped[data-pos="2"]{transform:translateX(25px) translateY(5px) rotate(3deg) scale(1.03); z-index:5;}
@media(min-width:769px){
  .reveal-card-wrap{width:min(22vw, 260px)}
}
@keyframes revealPulse{0%,100%{box-shadow:0 0 20px rgba(244,217,138,.3)}50%{box-shadow:0 0 40px rgba(244,217,138,.6)}}
.reveal-card-inner{width:100%; height:100%; position:relative; transition:transform .8s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d}
.reveal-face{position:absolute; inset:0; border-radius:var(--r); overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.reveal-back{
  background:url('/assets/scenes/card_back.jpg') center/cover, linear-gradient(165deg, #1a1810, #0a0702);
  border:3px solid var(--gold-bright); display:flex; align-items:center; justify-content:center;
  transform:rotateY(0deg);
  box-shadow:0 0 50px rgba(217,178,94,.3), inset 0 0 40px rgba(0,0,0,.5);
}
.reveal-back .b-sigil{font-size:64px; color:var(--gold); text-shadow:0 0 32px rgba(217,178,94,.55); font-family:var(--font-display)}
.reveal-front{transform:rotateY(180deg)}
.reveal-front .card{width:100%!important; height:100%!important; aspect-ratio:288/408; overflow:hidden}
.reveal-card-inner.flipped{transform:rotateY(180deg)}
.light-shaft{position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:90px; height:620px; pointer-events:none; opacity:0; background:linear-gradient(to bottom, transparent, currentColor 20%, currentColor 80%, transparent); filter:blur(22px); z-index:1}
.light-shaft.active{animation:shaftRise 1.2s ease}
@keyframes shaftRise{0%{opacity:0; height:0}30%{opacity:.85}100%{opacity:.3; height:620px}}
.light-shaft.rare{color:rgba(74,208,232,.45)} .light-shaft.mythic{color:rgba(180,130,255,.55)} .light-shaft.unique{color:rgba(244,217,138,.65)}
.reveal-banner{position:absolute; bottom:-46px; left:50%; transform:translateX(-50%); font-size:24px; font-weight:700; letter-spacing:5px; font-family:var(--font-display); opacity:0; transition:opacity .4s .5s; white-space:nowrap; z-index:10}
.reveal-banner.show{opacity:1}
.reveal-banner.common{color:#aaa} .reveal-banner.rare{color:var(--blue); text-shadow:0 0 22px rgba(74,208,232,.55)} .reveal-banner.mythic{color:var(--purple); text-shadow:0 0 26px rgba(180,130,255,.65)} .reveal-banner.unique{color:var(--gold-bright); text-shadow:0 0 32px rgba(244,217,138,.75)}
.reveal-card-wrap.cinematic{animation:cinematicZoom 1.5s ease}
@keyframes cinematicZoom{0%{transform:scale(.7)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
.reveal-dots{display:flex; gap:10px; margin-top:22px; justify-content:center}
.reveal-dot{width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.15); transition:all .3s}
.reveal-dot.done{background:rgba(106,255,150,.45)}
.reveal-dot.current{background:var(--gold-bright); box-shadow:0 0 12px rgba(244,217,138,.7); transform:scale(1.35)}
.reveal-controls{margin-top:52px; text-align:center}
.tap-to-continue{font-size:14px; color:var(--text-dim); margin-top:22px; animation:blink 1.5s infinite; cursor:pointer; letter-spacing:.5px}

/* ============================================================
   MODALS
   ============================================================ */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity .3s; padding:20px}
.modal-bg.show{opacity:1; pointer-events:auto}
.modal{
  background:linear-gradient(160deg, var(--bg-elevated), var(--bg-darkest));
  border:1px solid var(--border-bright); border-radius:var(--r-lg); padding:30px 34px; text-align:center;
  max-width:460px; box-shadow:0 0 80px rgba(244,217,138,.18), 0 30px 70px rgba(0,0,0,.7);
}
.modal h2{font-size:24px; letter-spacing:3px; color:var(--gold-bright); font-family:var(--font-display); margin-bottom:10px; font-weight:700}
.modal p{font-size:14px; color:var(--text-dim); margin-bottom:18px; line-height:1.65; font-weight:300}
.modal-bg#detailModal{cursor:pointer}
#detailContent{
  display:flex; flex-direction:column; gap:16px; align-items:center;
  max-width:320px; max-height:90vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.detail-grabber{
  width:100%; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  touch-action:none; cursor:grab; position:relative; margin:0;
}
.detail-grabber::before{
  content:""; width:48px; height:5px; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(244,217,138,.55), transparent);
  transition:width .2s;
}
.detail-grabber:active::before{width:64px; background:linear-gradient(90deg, transparent, rgba(244,217,138,.8), transparent)}
.detail-grabber:active{cursor:grabbing}
.detail-info{text-align:center; width:100%}
.detail-info h3{font-size:20px; color:#fff; font-family:var(--font-display); margin:0; font-weight:700}

/* picker */
.picker-grid{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; max-height:55vh; overflow-y:auto; padding:8px}
.picker-item{
  width:94px; padding:7px; border-radius:9px; cursor:pointer;
  border:1px solid var(--hairline);
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  transition:all .15s;
}
.picker-item:hover{border-color:var(--gold-bright); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.4)}
.picker-item.selected{border-color:var(--purple); box-shadow:0 0 14px rgba(180,130,255,.45)}
.picker-item.disabled{opacity:.32; cursor:not-allowed}
.picker-item img{width:100%; height:72px; object-fit:cover; border-radius:6px}
.picker-item .pn{font-size:10px; color:var(--text); margin-top:4px; text-align:center; font-weight:600}

/* empty states */
.empty-state{text-align:center; padding:90px 20px; color:var(--text-faint)}
.empty-state .es-title{font-family:var(--font-display); font-size:22px; margin-bottom:12px; color:var(--text-dim); letter-spacing:1.5px}
.empty-state .es-desc{font-size:15px; margin-bottom:28px; line-height:1.7; font-weight:300; max-width:420px; margin-left:auto; margin-right:auto}
.empty-state .es-action{
  display:inline-block; padding:18px 38px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:var(--bg-darkest); border-radius:10px; font-size:16px; font-weight:800; cursor:pointer;
  transition:all .25s; touch-action:manipulation; border:none; font-family:var(--font-body);
  letter-spacing:.6px; box-shadow:0 8px 28px rgba(244,217,138,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.empty-state .es-action:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(244,217,138,.45), inset 0 1px 0 rgba(255,255,255,.6)}

/* ============================================================
   QUESTS / LOGIN STREAK
   ============================================================ */
.quest-card{
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--hairline); border-radius:var(--r); padding:18px 20px; margin-bottom:14px;
  display:flex; justify-content:space-between; align-items:center;
  transition:border-color .25s;
}
.quest-card:hover{border-color:var(--border-bright)}
.quest-card.done{opacity:.55; border-color:rgba(106,255,150,.2)}
.quest-card .q-info{flex:1}
.quest-card .q-name{font-size:15px; color:var(--text); font-weight:700; margin-bottom:4px; letter-spacing:.2px}
.quest-card .q-desc{font-size:13px; color:var(--text-dim); font-weight:300}
.quest-card .q-progress{font-size:12px; color:var(--blue); margin-top:5px; font-weight:600}
.quest-card .q-reward{font-size:14px; color:var(--gold-bright); font-weight:700; white-space:nowrap; margin-left:14px; letter-spacing:.3px}
.quest-card .q-claim{
  padding:9px 18px;
  background:linear-gradient(180deg, rgba(244,217,138,.25), rgba(244,217,138,.1));
  border:1px solid var(--gold-bright); color:var(--gold-bright);
  border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit;
  letter-spacing:.4px; transition:all .2s;
}
.quest-card .q-claim:hover{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:var(--bg-darkest)}
.login-streak{
  background:linear-gradient(165deg, rgba(244,217,138,.06), rgba(244,217,138,.02));
  border:1px solid rgba(244,217,138,.18); border-radius:var(--r); padding:22px; margin-bottom:22px;
  box-shadow:0 0 30px rgba(244,217,138,.06);
}
.login-streak .ls-title{font-family:var(--font-display); font-size:17px; color:var(--gold-bright); font-weight:700; margin-bottom:16px; letter-spacing:1.5px}
.login-streak .ls-days{display:flex; gap:7px; justify-content:center; flex-wrap:wrap}
.login-streak .ls-day{
  width:48px; height:58px; border-radius:9px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:10px; color:var(--text-dim); gap:3px;
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--hairline);
}
.login-streak .ls-day.claimed{background:linear-gradient(165deg, rgba(106,255,150,.12), rgba(106,255,150,.04)); border-color:rgba(106,255,150,.35); color:var(--green)}
.login-streak .ls-day.current{background:linear-gradient(165deg, rgba(244,217,138,.16), rgba(244,217,138,.05)); border-color:var(--gold-bright); color:var(--gold-bright); box-shadow:0 0 16px rgba(244,217,138,.3)}
.login-streak .ls-day .ls-d-num{font-size:15px; font-weight:800}
.login-streak .ls-day .ls-d-reward{font-size:8px}

/* onboarding */
.tutorial-hint{
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
  background:rgba(20,16,28,.96); backdrop-filter:blur(8px);
  border:1px solid var(--blue); padding:15px 24px; border-radius:11px; max-width:400px;
  text-align:center; z-index:150; font-size:14px; color:var(--blue); line-height:1.55;
  box-shadow:0 6px 24px rgba(0,0,0,.55), 0 0 24px rgba(106,208,255,.22);
  animation:hintSlide .3s ease;
}
@keyframes hintSlide{from{transform:translateX(-50%) translateY(20px); opacity:0}to{transform:translateX(-50%) translateY(0); opacity:1}}
.tutorial-hint b{color:var(--gold-bright)}
.tutorial-hint .dismiss{display:block; margin-top:8px; font-size:12px; color:var(--text-faint); cursor:pointer}

/* ============================================================
   BOTTOM TAB BAR (mobile)
   ============================================================ */
.bottom-nav{
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(7,5,11,.7), rgba(7,5,11,.97));
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--border); z-index:100;
  padding:7px 0; padding-bottom:max(7px, env(safe-area-inset-bottom, 7px));
  justify-content:space-around; align-items:center;
  box-shadow:0 -6px 30px rgba(0,0,0,.5);
}
.bottom-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 10px; cursor:pointer; color:var(--text-faint); transition:all .18s;
  min-height:50px; min-width:0; flex:1; border-radius:12px;
}
.bottom-tab:active{transform:scale(.92)}
.bottom-tab.active{color:var(--gold-bright)}
.bottom-tab.active .bt-icon{filter:drop-shadow(0 0 8px rgba(244,217,138,.5))}
.bottom-tab .bt-icon{font-size:22px; line-height:1; font-family:var(--font-display)}
.bottom-tab .bt-label{font-size:10px; letter-spacing:.6px; font-weight:600}
.bt-svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5}
.mi-svg{width:22px; height:22px; flex-shrink:0}

/* ============================================================
   MOBILE LAYOUT
   ============================================================ */
@media(max-width:768px){
  :root{--tile:44px}
  .topbar{height:52px; padding:0 14px; gap:10px}
  .topbar .brand{font-size:16px; letter-spacing:4px}
  .topbar-nav{display:none}
  .topbar .resources{display:none}
  .topbar-right{gap:8px}
  #authArea .btn{font-size:11px!important; padding:7px 12px!important; min-height:32px!important}
  .bottom-nav{display:flex}
  .screen{padding:14px; padding-top:12px; padding-bottom:96px}
  .coll-grid, #teamSelectGrid{display:flex!important; flex-wrap:wrap; gap:8px; padding:8px; justify-content:center; max-width:100vw; overflow-x:hidden; align-items:stretch}
  .coll-grid .coll-slot, #teamSelectGrid .coll-slot{width:calc(50% - 4px); flex-shrink:0; height:270px}
  .coll-grid .card, #teamSelectGrid .card{width:100%!important; height:270px!important; max-width:none!important; overflow:hidden; padding:6px!important}
  .card .c-name{font-size:11px!important}
  .card .c-art{flex:0 0 80px!important}
  .card .c-stat .v{font-size:11px!important}
  .card .c-stat .l{font-size:6px!important}
  .card .c-ab-name{font-size:9px!important}
  .card .c-ab-text{font-size:7px!important; line-height:1.25!important}
  .card .c-abilities{overflow:hidden!important}
  .card .c-ab-tier{font-size:6px!important; padding:1px 3px!important}
  .card .c-ab-type{font-size:6px!important}
  .card .c-cost{width:18px!important; height:18px!important; font-size:10px!important}
  .card .c-footer{font-size:6px!important}
  .nav-btn{padding:8px 14px; font-size:12px}
  .btn{padding:13px 20px; font-size:13px}
  .sec-head{padding:18px 0 14px}
  .sec-head h2{font-size:22px}
  .sec-head .desc{font-size:12.5px}
  .battle-msg{font-size:14px}
  .ability-btn{padding:9px 13px; font-size:12px}
  .ability-hint{font-size:12px}
  .mode-card{max-width:240px; padding:18px}
  .fslot{width:140px; min-height:200px}
  .pack-box .pack-sigil{font-size:54px}
  .modal{padding:26px 22px; max-width:92vw}
}

@media(max-width:380px){
  .coll-grid, #teamSelectGrid{gap:7px; padding:7px}
  .coll-grid .coll-slot, #teamSelectGrid .coll-slot{width:calc(50% - 4px)}
}
/* Very narrow phones (iPhone SE / 360px Android): keep topbar from clipping */
@media(max-width:360px){
  .topbar{gap:6px; padding:0 10px}
  .topbar .brand{font-size:14px; letter-spacing:3px}
  #authArea .btn{font-size:10px!important; padding:6px 9px!important; min-height:30px!important}
  .topbar-right{gap:6px}
}

/* ============================================================
   DESKTOP LAYOUT
   ============================================================ */
@media(min-width:769px){
  .screen{max-width:1480px; margin:0 auto}
  .topbar .brand{font-size:22px; letter-spacing:7px}
  .topbar .resources{font-size:11px}
  .nav-btn{padding:7px 16px; font-size:12px}
  .sec-head h2{font-size:30px}
  .sec-head .desc{font-size:15px}
  .coll-grid{gap:28px; padding:28px; grid-template-columns:repeat(auto-fill, minmax(288px,1fr))}
  .card{width:var(--card-w); height:var(--card-h)}
  .btn{padding:14px 30px; font-size:15px}
  .battle-msg{font-size:16px}
  .ability-btn{padding:10px 18px; font-size:14px}
  .ability-hint{font-size:14px}
  :root{--tile:56px}
}

/* ============================================================
   BATTLE — impact flash + slide polish
   ============================================================ */
.tile-impact{
  position:absolute; inset:0; border-radius:5px; pointer-events:none; z-index:8;
  background:radial-gradient(circle, rgba(255,80,80,.5), transparent 70%);
  animation:impactPulse .45s ease-out forwards;
}
@keyframes impactPulse{0%{opacity:.9; transform:scale(.8)}100%{opacity:0; transform:scale(1.3)}}

/* ============================================================
   LADDER
   ============================================================ */
.ladder-me{
  background:linear-gradient(165deg, rgba(244,217,138,.08), rgba(244,217,138,.02));
  border:1px solid var(--border-bright); border-radius:var(--r);
  padding:22px; margin-bottom:18px;
}
.ladder-me-row{display:flex; justify-content:space-between; align-items:center; gap:16px}
.ladder-rank-tier{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--gold-bright); letter-spacing:1px}
.ladder-me-name{font-size:14px; color:var(--text-dim); margin-top:4px}
.ladder-rating{font-size:38px; font-weight:900; color:#fff; line-height:1}
.ladder-record{font-size:13px; color:var(--text-dim); margin-top:12px; text-align:center}
.ladder-how{
  font-size:12px; color:var(--text-dim); line-height:1.6; padding:14px 16px;
  background:rgba(255,255,255,.02); border:1px solid var(--hairline); border-radius:9px;
  margin-bottom:20px; font-weight:300;
}
.ladder-how b{color:var(--gold-bright); font-weight:600}
.season-rewards{
  max-width:560px; margin:0 auto 24px; padding:16px;
  background:linear-gradient(165deg, rgba(180,130,255,.06), rgba(244,217,138,.03));
  border:1px solid rgba(180,130,255,.2); border-radius:var(--r);
}
.season-title{font-family:var(--font-display); font-size:15px; color:var(--gold-bright); font-weight:700; margin-bottom:4px; letter-spacing:1px}
.season-sub{font-size:11px; color:var(--text-faint); font-weight:400; letter-spacing:0}
.season-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px}
.season-row:last-child{border-bottom:none}
.sr-tier{font-weight:700; font-family:var(--font-display); min-width:80px}
.sr-reward{color:var(--text-dim); text-align:right}
.ladder-list{display:flex; flex-direction:column; gap:6px; max-width:560px; margin:0 auto}
.ladder-row{
  display:grid; grid-template-columns:60px 1fr 60px 80px; gap:8px; align-items:center;
  padding:12px 14px; border-radius:9px;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--hairline);
}
.ladder-row.podium{border-color:rgba(244,217,138,.35); background:rgba(244,217,138,.04)}
.lr-rank{font-family:var(--font-display); font-weight:700; color:var(--gold-dim); font-size:13px; text-align:center}
.ladder-row.podium .lr-rank{color:var(--gold-bright)}
.lr-name{font-size:13px; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lr-rating{font-size:15px; font-weight:800; color:#fff; text-align:right}
.lr-record{font-size:10px; color:var(--text-dim); text-align:right}

/* ============================================================
   TRADES
   ============================================================ */
.trade-list{display:flex; flex-direction:column; gap:10px; max-width:560px; margin:0 auto}
.trade-row{
  display:flex; align-items:center; gap:14px; padding:12px;
  border-radius:var(--r); border:1px solid var(--hairline);
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.trade-card-mini{width:50px; height:50px; border-radius:8px; overflow:hidden; flex-shrink:0; border:2px solid var(--gold-dim)}
.trade-card-mini.rare{border-color:var(--blue)} .trade-card-mini.mythic{border-color:var(--purple)} .trade-card-mini.unique{border-color:var(--gold-bright)}
.trade-card-mini img{width:100%; height:100%; object-fit:cover}
.trade-info{flex:1; text-align:left}
.trade-name{font-size:14px; font-weight:700; color:var(--text)}
.trade-meta{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px}
.trade-want{font-size:12px; color:var(--blue); margin-top:3px}
.trade-want.free{color:var(--green)}
.trade-from{font-size:10px; color:var(--text-faint); margin-top:2px}
.trade-action{flex-shrink:0}

/* ============================================================
   FRIENDS
   ============================================================ */
.friends-empty{text-align:center; padding:60px 20px; color:var(--text-faint)}
.friends-empty .es-title{font-family:var(--font-display); font-size:22px; color:var(--text-dim); margin-bottom:12px; letter-spacing:1px}
.friends-empty .es-desc{font-size:14px; line-height:1.7; max-width:340px; margin:0 auto; font-weight:300}
.friend-add{display:flex; gap:8px; max-width:480px; margin:0 auto 24px}
.friend-input{
  flex:1; padding:10px 14px; background:rgba(0,0,0,.4); border:1px solid var(--hairline);
  color:var(--text); border-radius:9px; font-size:14px; font-family:var(--font-body);
}
.friend-input:focus{outline:none; border-color:var(--gold-bright)}
.friend-section{max-width:560px; margin:0 auto 22px}
.friend-section-title{font-family:var(--font-display); font-size:13px; letter-spacing:2px; color:var(--gold-dim); text-transform:uppercase; margin-bottom:10px}
.friend-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:9px; margin-bottom:6px;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--hairline);
}
.friend-presence{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.friend-presence.on{background:var(--green); box-shadow:0 0 8px rgba(106,255,150,.6)}
.friend-presence.off{background:var(--text-faint)}
.friend-name{flex:1; font-size:14px; color:var(--text); font-weight:600}
.friend-status{font-size:11px; padding:2px 8px; border-radius:6px}
.friend-status.online{color:var(--green)} .friend-status.offline{color:var(--text-faint)} .friend-status.pending{color:var(--text-dim)}

/* ============================================================
   BESTIARY
   ============================================================ */
.bestiary-realm{max-width:880px; margin:0 auto 30px}
.bestiary-realm-header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.bestiary-realm-name{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--realm-accent); letter-spacing:2px}
.bestiary-realm-seen{font-size:12px; color:var(--text-faint)}
.bestiary-realm-lore{font-size:13px; color:var(--text-dim); line-height:1.6; padding:14px 16px; border-radius:9px;
  background:rgba(255,255,255,.02); border-left:3px solid var(--realm-accent); margin-bottom:16px; font-weight:300}
.bestiary-realm-lore span{display:block; margin-top:6px; font-size:12px; color:var(--text-faint)}
.bestiary-species-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:10px}
.bestiary-creature{cursor:pointer; text-align:center; transition:transform .2s}
.bestiary-creature:hover{transform:translateY(-3px)}
.bestiary-thumb{width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden; border:2px solid var(--realm-accent); background:var(--bg-darkest); margin-bottom:5px}
.bestiary-thumb img{width:100%; height:100%; object-fit:cover}
.bestiary-silhouette{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--text-faint); background:linear-gradient(165deg, var(--bg-elevated), var(--bg-dark))}
.bestiary-creature.locked .bestiary-thumb{border-color:var(--hairline); opacity:.6}
.bestiary-creature.locked .bestiary-thumb img{filter:none}
.bestiary-name{font-size:11px; color:var(--text-dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bestiary-creature.locked .bestiary-name{color:var(--text-faint)}

/* ============================================================
   QUESTS — weekly section
   ============================================================ */
.quest-section-label{font-size:14px; color:var(--gold-bright); font-weight:700; margin:24px 0 12px; letter-spacing:.5px}
.quest-section-label.weekly{color:var(--purple)}
.quest-card.weekly{border-color:rgba(180,130,255,.15)}
.quest-card.weekly .q-reward{color:var(--purple)}

/* ============================================================
   SHOP / CRAFTING
   ============================================================ */
.shop-balance-row{display:flex; gap:12px; max-width:480px; margin:0 auto 24px}
.shop-balance-item{
  flex:1; text-align:center; padding:16px;
  background:linear-gradient(165deg, rgba(244,217,138,.08), rgba(244,217,138,.02));
  border:1px solid var(--border-bright); border-radius:var(--r);
}
.sb-label{display:block; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px}
.sb-value{font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--gold-bright)}
.shop-explainer{font-size:12px; color:var(--text-dim); line-height:1.6; padding:14px 16px; background:rgba(255,255,255,.02); border:1px solid var(--hairline); border-radius:9px; margin-bottom:20px; max-width:560px; margin-left:auto; margin-right:auto; font-weight:300}
.shop-explainer b{color:var(--gold-bright); font-weight:600}
.shop-section{margin-bottom:28px}
.shop-section-title{font-family:var(--font-display); font-size:13px; letter-spacing:2px; color:var(--gold-dim); text-transform:uppercase; margin-bottom:12px}
.craft-list{display:flex; flex-direction:column; gap:6px}
.craft-row{
  display:flex; align-items:center; gap:12px; padding:10px;
  border-radius:9px; border:1px solid var(--hairline);
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.craft-row:hover:not(.maxed):not(.locked){border-color:var(--border-bright)}
.craft-row.locked{opacity:.5}
.craft-row.maxed{opacity:.6}
.craft-thumb{width:44px; height:44px; border-radius:8px; overflow:hidden; border:2px solid; flex-shrink:0}
.craft-thumb img{width:100%; height:100%; object-fit:cover}
.craft-info{flex:1; text-align:left}
.craft-name{font-size:13px; color:var(--text); font-weight:600}
.craft-meta{font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-top:2px}
.craft-stats-preview{font-size:10px; color:var(--text-dim); margin-top:4px; font-weight:600; letter-spacing:.3px}
.craft-genes{margin-top:3px; display:flex; flex-wrap:wrap; gap:3px}
.craft-gene{font-size:8px; color:var(--gold-dim); background:rgba(244,217,138,.06); padding:1px 5px; border-radius:4px}
.craft-action{flex-shrink:0}
/* wildcards */
.wildcard-row{display:flex; gap:14px; justify-content:center}
.wc-item{text-align:center; cursor:pointer; transition:transform .2s}
.wc-item:hover{transform:translateY(-3px)}
.wc-badge{
  width:60px; height:60px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; color:#fff; margin:0 auto 6px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.wc-badge.rare{background:linear-gradient(135deg, var(--blue), #3a7ad0)}
.wc-badge.mythic{background:linear-gradient(135deg, var(--purple), #7a3acc)}
.wc-badge.unique{background:linear-gradient(135deg, var(--gold-bright), var(--gold-dim))}
.wc-label{font-size:12px; color:var(--text-dim); font-weight:600}

/* ============================================================
   MORE SHEET (mobile: social + meta nav)
   ============================================================ */
.more-sheet{
  position:fixed; bottom:0; left:0; right:0; z-index:120;
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-darkest));
  border-top:1px solid var(--border-bright); border-radius:20px 20px 0 0;
  padding:0 20px max(20px, env(safe-area-inset-bottom, 20px));
  transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
  touch-action:none;
}
.more-sheet.show{transform:translateY(0)}
.more-sheet-handle{
  width:100%; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:grab; position:relative; margin-bottom:4px;
}
.more-sheet-handle::before{
  content:""; width:48px; height:5px; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(244,217,138,.4), transparent);
}
.more-sheet-handle:active{cursor:grabbing}
.more-sheet-handle::after{
  content:"swipe down to close"; position:absolute; bottom:2px;
  font-size:9px; color:var(--text-faint); letter-spacing:1px; text-transform:uppercase;
}
.more-item{
  display:flex; align-items:center; gap:16px; padding:16px 8px; cursor:pointer;
  font-size:16px; color:var(--text); font-weight:600;
  border-bottom:1px solid var(--hairline); transition:background .15s;
}
.more-item:last-child{border-bottom:none}
.more-item:hover{background:rgba(255,255,255,.03)}
.mi-icon{font-size:20px; width:24px; text-align:center}
@media(min-width:769px){ .more-sheet{display:none!important} }

/* ============================================================
   ONBOARDING — multi-step welcome modal
   ============================================================ */
.onboard-card{
  background:linear-gradient(165deg, var(--bg-elevated), var(--bg-darkest));
  border:1px solid var(--border-bright); border-radius:var(--r-lg);
  padding:40px 32px 28px; max-width:420px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(244,217,138,.12);
  animation:screenFade .4s ease;
}
.onboard-icon{width:64px; height:64px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(244,217,138,.12), transparent 70%); border-radius:50%}
.onboard-icon svg{width:34px; height:34px}
.onboard-title{font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:1.5px; margin-bottom:14px}
.onboard-body{font-size:15px; color:var(--text-dim); line-height:1.7; font-weight:300; margin-bottom:24px}
.onboard-dots{display:flex; gap:8px; justify-content:center; margin-bottom:24px}
.onboard-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); transition:all .25s}
.onboard-dot.active{background:var(--gold-bright); transform:scale(1.4); box-shadow:0 0 8px rgba(244,217,138,.5)}
.onboard-dot.done{background:rgba(106,255,150,.4)}
.onboard-actions{display:flex; justify-content:space-between; align-items:center; gap:12px}
.onboard-skip{font-size:12px!important; padding:10px 16px!important; opacity:.6}

/* ============================================================
   SHARD SHOP
   ============================================================ */
.shop-balance{font-size:15px; color:var(--text); margin-bottom:16px; text-align:center}
.shop-balance b{color:var(--gold-bright); font-size:20px}
.shop-msg{margin-bottom:14px; text-align:center; font-size:13px}
.shop-list{display:flex; flex-direction:column; gap:10px; max-width:380px; margin:0 auto}
.shop-item{
  display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--r);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--hairline); transition:border-color .2s;
}
.shop-item:hover:not(.disabled){border-color:var(--border-bright)}
.shop-item.disabled{opacity:.45}
.shop-glyph{width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(244,217,138,.1), transparent 70%); border-radius:10px}
.shop-glyph svg{width:24px; height:24px}
.shop-info{flex:1; text-align:left}
.shop-name{font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px}
.shop-desc{font-size:11px; color:var(--text-dim); line-height:1.4; font-weight:300}
.shop-buy{text-align:center; flex-shrink:0}
.shop-cost{font-size:11px; color:var(--gold-bright); font-weight:600; margin-bottom:6px}
.shop-hint{font-size:11px; color:var(--text-faint); text-align:center; margin-top:16px}

/* ============================================================
   SETTINGS SCREEN
   ============================================================ */
.settings-wrap{max-width:560px; margin:0 auto; padding:12px}
.settings-section{
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--hairline); border-radius:var(--r); padding:8px 18px; margin-bottom:16px;
}
.settings-section-title{font-family:var(--font-display); font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold-dim); padding:14px 0 8px; border-bottom:1px solid var(--hairline); margin-bottom:4px}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--hairline)}
.setting-row:last-child{border-bottom:none}
.setting-info{flex:1; text-align:left}
.setting-name{font-size:14px; font-weight:600; color:var(--text); margin-bottom:3px}
.setting-desc{font-size:12px; color:var(--text-dim); line-height:1.4; font-weight:300}
.setting-row.danger{background:rgba(255,106,106,.03); border-radius:8px; padding-left:8px; padding-right:8px}
.settings-footer{text-align:center; font-size:11px; color:var(--text-faint); padding:20px 0; letter-spacing:.5px}

/* toggle switch */
.toggle-switch{
  width:50px; height:28px; border-radius:14px; background:rgba(255,255,255,.1);
  border:1px solid var(--hairline); position:relative; cursor:pointer; flex-shrink:0;
  transition:background .25s; padding:0;
}
.toggle-switch.on{background:linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color:rgba(244,217,138,.5)}
.toggle-knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:transform .25s;
}
.toggle-switch.on .toggle-knob{transform:translateX(22px)}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}