:root{
  --bg-0:#0b2b23;
  --bg-1:#123528;
  --ink:#f8fffb;
  --ink-dim:#b3d6c9;
  --accent:#3ee0b0;
  --accent-2:#22b88f;
  --accent-soft:rgba(62,224,176,0.16);
  --brass:#ffc363;
  --brass-2:#f0a83e;
  --brass-ink:#2b1c02;
  --coral:#ff8f6b;
  --danger:#ff7566;
  --panel:#173e33;
  --panel-2:#1c4a3c;
  --panel-3:#215545;
  --line:#2f6350;
  --radius:18px;
  --font-d:'Futura','Century Gothic','Trebuchet MS',var(--font-b);
  --font-b:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r-common:#b7c5bf;
  --r-uncommon:#5eeba0;
  --r-rare:#74d0f5;
  --r-epic:#d3b3ff;
  --r-legendary:#ffc363;
  --r-mythic:#ffa3d6;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
button, .btn, .navbtn, .pcard, .pack-tile, .quick-tile, .chip, .topbar, .bottomnav, .icon-btn, .achv-row, .cat-mini-row{
  -webkit-user-select:none; user-select:none;
}
input, textarea, select{ -webkit-user-select:text; user-select:text; touch-action:manipulation; }
html,body{min-height:100%;}
body{
  margin:0; background:
    radial-gradient(900px 600px at 20% -10%, rgba(62,224,176,0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 10%, rgba(255,195,99,0.08), transparent 55%),
    radial-gradient(1200px 900px at 50% 110%, rgba(62,224,176,0.07), transparent 60%),
    var(--bg-0);
  color:var(--ink); font-family:var(--font-b);
  overflow-x:hidden; overscroll-behavior-y:contain; min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:520px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:96px;}
@keyframes screenIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.screen{ animation:screenIn .22s ease-out; padding:0 16px 16px; }
.hidden{display:none !important;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--font-d); margin:0; letter-spacing:0.5px; text-transform:uppercase;}
.eyebrow{font-family:var(--font-d); text-transform:uppercase; letter-spacing:3px; font-size:11px; color:var(--accent); font-weight:700;}
.tiny{font-size:12px; color:var(--ink-dim); margin:0;}
.num{font-variant-numeric:tabular-nums;}
.center{text-align:center;}

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(7,33,28,0.97), rgba(7,33,28,0.9) 80%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(62,224,176,0.10);
  max-width:520px; margin:0 auto;
}
.brand{font-family:var(--font-d); font-weight:900; font-size:18px; letter-spacing:1.5px; display:flex; align-items:center; gap:6px; white-space:nowrap;}
.brand-mark{font-size:20px;}
.pill-row{display:flex; gap:8px;}
.coin-pill,.lvl-pill{
  display:flex; align-items:center; gap:5px; background:var(--panel-2);
  border:1px solid rgba(255,195,99,0.3); padding:6px 11px; border-radius:999px; font-weight:800; font-size:13px;
}
.lvl-pill{border-color:rgba(62,224,176,0.35); color:var(--accent);}
.coin-dot{width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff2c9, var(--brass) 60%, var(--brass-2)); box-shadow:0 0 8px rgba(255,195,99,0.6); flex-shrink:0;}
.icon-pill-btn{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); font-size:15px; cursor:pointer; padding:0; color:var(--ink); flex-shrink:0;}
.icon-pill-btn:active{transform:scale(0.92);}

/* ---------- Buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-d); font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  font-size:14px; padding:15px 18px; border-radius:14px; border:none; cursor:pointer;
  color:var(--ink); background:var(--panel-2); border:1px solid rgba(255,255,255,0.08);
  transition:transform .08s ease, filter .15s ease; width:100%;
}
.btn:active{transform:scale(0.96); filter:brightness(0.9);}
.btn-primary{background:linear-gradient(165deg, #6ff0cb, var(--accent) 45%, var(--accent-2)); color:#04241b; box-shadow:0 8px 22px rgba(62,224,176,0.3), inset 0 1px 0 rgba(255,255,255,0.3); letter-spacing:1.8px;}
.btn-gold{background:linear-gradient(165deg, #ffe6b0, var(--brass) 45%, var(--brass-2)); color:#2b1c02; box-shadow:0 8px 22px rgba(255,195,99,0.3), inset 0 1px 0 rgba(255,255,255,0.35); letter-spacing:1.8px;}
.btn-danger{background:linear-gradient(180deg,#f06b60,var(--danger)); color:#2a0806;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink-dim);}
.btn:disabled{opacity:0.35; filter:grayscale(0.5); cursor:not-allowed;}
.btn-lg{padding:19px; font-size:16px;}
.btn-sm{padding:9px 13px; font-size:11px; border-radius:10px; width:auto;}
.btn-row{display:flex; gap:10px;}

/* ---------- Cards ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.pcard{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  aspect-ratio:3/4.3; display:flex; flex-direction:column; background:var(--panel-2);
  border:1.5px solid var(--rc-soft, rgba(255,255,255,0.08));
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
  transition:transform .1s ease;
}
.pcard:active{transform:scale(0.95);}
.pcard-topbar{height:3px; background:var(--rc, rgba(255,255,255,0.15)); flex-shrink:0; position:relative; z-index:2;}
.pcard-art{position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--rc,#7c8a84) 60%, #0a201a), color-mix(in srgb, var(--rc,#7c8a84) 16%, #04110d));}
.pcard-art::after{content:'';position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px); pointer-events:none;}
.pcard-art::before{content:'';position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,0.35) 100%); pointer-events:none;}
.pcard-icon-badge{position:relative; z-index:1; width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);}
.pcard-icon{font-size:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));}
.pcard-rarity-tag{position:absolute; top:6px; left:5px; font-size:8px; font-weight:900; letter-spacing:0.5px; padding:2px 6px; border-radius:5px; background:rgba(0,0,0,0.45); color:var(--rc,#fff); border:1px solid var(--rc,rgba(255,255,255,0.3)); z-index:2; text-transform:uppercase;}
.pcard-body{padding:6px 7px 7px; background:var(--panel-3); position:relative;}
.pcard-name{font-size:10.5px; font-weight:800; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.4em;}
.pcard-cat-tag{font-size:7.5px; font-weight:700; letter-spacing:0.2px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
.pcard-rating-row{display:flex; align-items:baseline; gap:4px; margin-top:2px;}
.pcard-rating{font-family:var(--font-d); font-size:15px; font-weight:900; color:var(--rc,var(--accent)); line-height:1;}
.pcard-stars{font-size:6.5px; letter-spacing:1px; color:var(--rc,var(--accent)); opacity:0.85;}
.pcard-ratingbar{height:3px; background:rgba(255,255,255,0.08); border-radius:999px; margin-top:4px; overflow:hidden;}
.pcard-ratingbar-fill{height:100%; background:var(--rc,var(--accent)); border-radius:999px;}
/* Foil sheen - a static diagonal highlight band, brighter with rarity, giving a holo-card feel without animating dozens of grid cards at once */
.pcard-foil{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:overlay; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0.05) 52%, transparent 65%);}
.pcard.rar-rare .pcard-foil{opacity:0.35;}
.pcard.rar-epic .pcard-foil{opacity:0.45;}
.pcard.rar-legendary .pcard-foil{opacity:0.55;}
.pcard.rar-mythic .pcard-foil{opacity:0.7;}
.rar-common{--rc:var(--r-common); --rc-soft:rgba(159,176,169,0.4);}
.rar-uncommon{--rc:var(--r-uncommon); --rc-soft:rgba(55,201,119,0.45);}
.rar-rare{--rc:var(--r-rare); --rc-soft:rgba(63,182,230,0.5);}
.rar-epic{--rc:var(--r-epic); --rc-soft:rgba(178,107,242,0.55);}
.rar-legendary{--rc:var(--r-legendary); --rc-soft:rgba(255,195,99,0.6);}
.rar-mythic{--rc:var(--r-mythic); --rc-soft:rgba(255,95,174,0.7);}
.pcard.rar-common{--rc:var(--r-common); --rc-soft:rgba(159,176,169,0.4);}
.pcard.rar-uncommon{--rc:var(--r-uncommon); --rc-soft:rgba(55,201,119,0.45);}
.pcard.rar-rare{--rc:var(--r-rare); --rc-soft:rgba(63,182,230,0.5); box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 10px rgba(63,182,230,0.15);}
.pcard.rar-epic{--rc:var(--r-epic); --rc-soft:rgba(178,107,242,0.55); box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 14px rgba(178,107,242,0.25);}
.pcard.rar-legendary{--rc:var(--r-legendary); --rc-soft:rgba(255,195,99,0.6); box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 18px rgba(255,195,99,0.35);}
.pcard.rar-mythic{--rc:var(--r-mythic); --rc-soft:rgba(255,95,174,0.7); box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 22px rgba(255,95,174,0.45); animation:mythicPulse 2.4s ease-in-out infinite;}
@keyframes mythicPulse{ 0%,100%{box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 18px rgba(255,95,174,0.4);} 50%{box-shadow:0 6px 14px rgba(0,0,0,0.35), 0 0 30px rgba(255,95,174,0.7);} }
.pcard-locked{background:var(--panel-2);}
.pcard-locked .locked-art{flex:1; position:relative; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, #12332a 0 8px, #0d2620 8px 16px); overflow:hidden;}
.pcard-locked .locked-art .locked-icon-hint{font-size:32px; opacity:0.12; filter:grayscale(1);}
.pcard-locked .locked-art::before{content:'?'; position:absolute; font-family:var(--font-d); font-size:30px; color:rgba(255,255,255,0.32); font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,0.4);}
.pcard-locked .pcard-name{color:var(--ink-dim);}
.grid-new-badge{position:absolute; top:-4px; right:-4px; z-index:3; background:var(--accent); color:#04241b; font-family:var(--font-d); font-weight:900; font-size:8px; letter-spacing:0.4px; padding:2px 6px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.4);}


/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; max-width:520px; margin:0 auto;
  background:rgba(10,36,30,0.95); backdrop-filter:blur(10px);
  border-top:1px solid rgba(62,224,176,0.12);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.navbtn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--ink-dim); font-family:var(--font-b);
  font-size:10px; font-weight:700; letter-spacing:0.3px; padding:6px 2px; cursor:pointer; border-radius:10px;
}
.navbtn .navico{font-size:19px;}
.navbtn.active{color:var(--accent);}
.navbtn.active .navico{filter:drop-shadow(0 0 6px rgba(62,224,176,0.6));}

/* ---------- Hero / Home ---------- */
.hero-card{background:linear-gradient(165deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:20px; padding:22px 18px; text-align:center; margin:14px 0;}
.progress-ring{position:relative; width:128px; height:128px; border-radius:50%; margin:10px auto 6px; background:conic-gradient(var(--accent) calc(var(--p,0)*3.6deg), rgba(255,255,255,0.07) 0deg);}
.progress-ring::after{content:''; position:absolute; inset:9px; border-radius:50%; background:var(--panel);}
.progress-ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1;}
.progress-ring-label .n{font-family:var(--font-d); font-size:26px; font-weight:900; line-height:1;}
.progress-ring-label .of{font-size:10px; color:var(--ink-dim); letter-spacing:1px;}
.progress-bar{height:8px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; margin:8px 0;}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius:999px; transition:width .4s ease;}
.section-title{font-family:var(--font-d); font-size:13px; font-weight:800; letter-spacing:1.5px; color:var(--ink-dim); margin:20px 0 10px; text-transform:uppercase;}
.quick-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px;}
.quick-tile{background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:14px 6px; text-align:center; font-size:22px; cursor:pointer;}
.quick-tile div{font-size:10px; margin-top:5px; font-weight:700; color:var(--ink-dim); letter-spacing:0.3px;}
.quick-tile:active{transform:scale(0.95);}
.cat-mini-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.cat-mini-row:last-child{border-bottom:none;}
.cat-mini-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.cat-mini-info{flex:1; min-width:0;}
.cat-mini-name{font-size:12.5px; font-weight:800;}
.cat-mini-bar{height:5px; background:rgba(255,255,255,0.08); border-radius:999px; margin-top:5px; overflow:hidden;}
.cat-mini-fill{height:100%; background:var(--accent); border-radius:999px;}
.cat-mini-count{font-size:11px; color:var(--ink-dim); font-weight:700; white-space:nowrap;}

/* ---------- Onboarding ---------- */
.onboard{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 28px;}
.onboard-logo{font-size:56px; margin-bottom:6px;}
.onboard h1{font-size:34px; letter-spacing:4px; background:linear-gradient(120deg, var(--accent), var(--brass)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.tagline{font-family:var(--font-d); letter-spacing:3px; font-size:12px; color:var(--brass); font-weight:800; margin:6px 0 22px;}
.onboard-copy{color:var(--ink-dim); font-size:14.5px; line-height:1.55; margin:0 0 14px; max-width:340px;}
.onboard .btn{margin-top:20px; max-width:280px;}

/* ---------- Pack tiles ---------- */
.pack-tile{background:linear-gradient(165deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:14px; padding:11px 12px; margin-bottom:9px; position:relative; overflow:hidden;}
.pack-tile::before{content:''; position:absolute; top:-40%; right:-20%; width:60%; height:180%; background:radial-gradient(circle, var(--pack-glow, rgba(62,224,176,0.16)), transparent 70%); pointer-events:none;}
.pack-tile-top{display:flex; align-items:center; gap:9px; position:relative; z-index:1;}
.pack-tile-icon{font-size:24px; line-height:1; flex-shrink:0; width:32px; text-align:center;}
.pack-tile-info{flex:1; min-width:0;}
.pack-tile-name{font-family:var(--font-d); font-size:13.5px; font-weight:900; letter-spacing:0.3px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pack-tile-meta{font-size:10px; color:var(--ink-dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pack-tile-odds-btn{flex-shrink:0; width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,0.07); border:1px solid var(--line); color:var(--ink-dim); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.odds-row{display:flex; gap:4px; flex-wrap:wrap; margin:8px 0; position:relative; z-index:1;}
.odds-chip{font-size:8px; font-weight:800; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,0.06); letter-spacing:0.2px;}
.pack-tile-buy{display:flex; align-items:center; justify-content:center; gap:8px; position:relative; z-index:1; padding-top:11px; padding-bottom:11px;}
.pack-tile-price{display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.18); padding:3px 10px 3px 6px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:0.3px;}
.pack-tile-free{border-color:rgba(255,195,99,0.35); border-style:dashed;}
.pack-infinite-badge{position:absolute; top:10px; right:10px; z-index:1; font-family:var(--font-d); font-size:8px; font-weight:900; letter-spacing:0.5px; color:var(--brass); background:rgba(255,195,99,0.12); border:1px solid rgba(255,195,99,0.4); padding:2px 7px; border-radius:999px;}

/* ---------- Chips / filters ---------- */
.chip-row{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0; padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:800; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim); cursor:pointer; letter-spacing:0.3px; white-space:nowrap;}
.chip.active{background:var(--accent); color:#04241b; border-color:var(--accent);}
.search-input,.select-input{width:100%; padding:12px 14px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); font-size:14px; margin-bottom:10px;}
.search-input::placeholder{color:var(--ink-dim);}

/* ---------- Stat rows / lists ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-box{background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:13px;}
.stat-box .v{font-family:var(--font-d); font-size:20px; font-weight:900;}
.stat-box .l{font-size:10.5px; color:var(--ink-dim); letter-spacing:0.3px; margin-top:2px;}
.list-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line);}
.list-row:last-child{border-bottom:none;}

/* ---------- Achievements ---------- */
.achv-row{display:flex; gap:12px; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px;}
.achv-row.locked{opacity:0.62;}
.achv-icon{font-size:26px; width:42px; text-align:center; flex-shrink:0;}
.achv-body{flex:1; min-width:0;}
.achv-title{font-weight:800; font-size:13px;}
.achv-desc{font-size:11.5px; color:var(--ink-dim); margin-top:1px;}
.achv-reward{font-size:10px; color:var(--brass); font-weight:800; margin-top:3px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(3,14,11,0.78); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .18s ease-out;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal-box{background:var(--panel); border-radius:22px 22px 0 0; border:1px solid var(--line); border-bottom:none; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; animation:modalUp .22s cubic-bezier(.2,.9,.3,1);}
@media (min-width:560px){ .modal-overlay{align-items:center;} .modal-box{border-radius:22px; max-height:80vh;} }
@keyframes modalUp{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-close{position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.08); border:none; color:var(--ink); font-size:16px; cursor:pointer;}

/* ---------- Toast ---------- */
#toastHost{position:fixed; top:14px; left:0; right:0; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
.toast{background:var(--panel-2); border:1px solid var(--accent); color:var(--ink); padding:10px 18px; border-radius:999px; font-size:12.5px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.4); animation:toastIn .25s ease-out, toastOut .25s ease-in 2.2s forwards; max-width:88%; text-align:center;}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px);}}

/* ---------- Shared with pack reveal (defined below): summary grid + particles ---------- */
.po-summary{width:100%; max-width:440px;}
.po-summary-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0;}
.po-summary-grid .pcard{aspect-ratio:3/4.3;}
.particle{position:absolute; border-radius:50%; pointer-events:none; z-index:5;}
@keyframes particleFly{ to{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot,0deg)) scale(0); opacity:0;} }

/* ---------- Daily reward ---------- */
.day-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:16px 0;}
.day-box{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 3px; text-align:center;}
.day-box.done{background:rgba(62,224,176,0.15); border-color:var(--accent);}
.day-box.today{border-color:var(--brass); box-shadow:0 0 0 2px rgba(255,195,99,0.25);}
.day-box .dn{font-size:9px; color:var(--ink-dim); font-weight:800;}
.day-box .di{font-size:16px; margin:3px 0;}
.day-box .dr{font-size:8px; font-weight:700;}

/* ---------- Category detail ---------- */
.catdet-header{display:flex; align-items:center; gap:12px; padding:6px 0 14px;}
.catdet-icon{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;}

/* ---------- Misc ---------- */
.flexbetween{display:flex; align-items:center; justify-content:space-between;}
.mb-10{margin-bottom:10px;}
.err-screen{padding:60px 24px; text-align:center;}
.load-more{width:100%; padding:13px; border-radius:12px; background:var(--panel-2); border:1px dashed var(--line); color:var(--ink-dim); font-weight:700; font-size:12.5px; text-align:center; cursor:pointer; margin-top:6px;}

/* ============================================================
   ATLAS POLISH PASS - visual refinement & micro-interactions
   ============================================================ */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.btn,.quick-tile,.pack-tile,.chip,.stat-box,.achv-row,.cat-mini-row,.search-input,.select-input,.navbtn{
  transition:transform .14s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover:not(:disabled){filter:brightness(1.06); transform:translateY(-1px);}
.btn:focus-visible,.chip:focus-visible,.navbtn:focus-visible,.pcard:focus-visible,.pack-tile:focus-visible,.quick-tile:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}
.btn:active:not(:disabled){transform:translateY(1px) scale(.975);}
.quick-tile:hover{transform:translateY(-2px); border-color:rgba(62,224,176,.35); box-shadow:0 8px 20px rgba(0,0,0,.22);}
.pack-tile:hover{border-color:rgba(62,224,176,.28); box-shadow:0 10px 24px rgba(0,0,0,.22); transform:translateY(-1px);}
.pcard:hover{transform:translateY(-2px); box-shadow:0 9px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.035);}
.pcard.rar-rare:hover{box-shadow:0 9px 20px rgba(0,0,0,.4),0 0 15px rgba(63,182,230,.24);}
.pcard.rar-epic:hover{box-shadow:0 9px 20px rgba(0,0,0,.4),0 0 20px rgba(178,107,242,.32);}
.pcard.rar-legendary:hover{box-shadow:0 9px 20px rgba(0,0,0,.4),0 0 24px rgba(255,195,99,.42);}
.pcard.rar-mythic:hover{box-shadow:0 9px 20px rgba(0,0,0,.4),0 0 30px rgba(255,95,174,.62);}
.pcard-locked:hover{border-color:rgba(255,255,255,.16);}
.stat-box:hover{border-color:rgba(62,224,176,.24); background:linear-gradient(165deg,var(--panel-2),rgba(22,66,55,.96));}
.cat-mini-row:hover{background:rgba(62,224,176,.045); padding-left:4px; padding-right:4px;}
.navbtn:hover{color:var(--ink); background:rgba(255,255,255,.035);}
.search-input:focus,.select-input:focus{outline:none; border-color:rgba(62,224,176,.65); box-shadow:0 0 0 3px rgba(62,224,176,.09);}
.pack-tile-free{box-shadow:inset 0 0 0 1px rgba(255,195,99,.025),0 5px 16px rgba(0,0,0,.16);}
.hero-card{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025);}
.progress-fill{box-shadow:0 0 9px rgba(62,224,176,.22);}
.po-back{box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
.po-front{box-shadow:0 18px 50px rgba(0,0,0,.45);}
.modal-close:hover{background:rgba(255,255,255,.15); transform:scale(1.05);}
.toast{backdrop-filter:blur(10px);}
@media (max-width:380px){
  #app{padding-bottom:92px;}
  .screen{padding-left:12px;padding-right:12px;}
  .grid{gap:7px;}
  .pcard-name{font-size:9.8px;}
  .pcard-rating{font-size:14px;}
  .pack-tile{padding:10px 11px;}
  .btn-lg{padding:17px;}
}
@media (hover:none){
  .btn:hover:not(:disabled),.quick-tile:hover,.pack-tile:hover,.pcard:hover,.stat-box:hover,.cat-mini-row:hover{transform:none;}
}


/* ATLAS VERSION LOG */
#atlasVersionLogOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 7, 18, .78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#atlasVersionLogOverlay.show { display: flex; }
.atlas-version-log {
    width: min(100%, 430px);
    max-height: min(82vh, 620px);
    overflow: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    padding: 24px;
    background:
        radial-gradient(circle at 85% 10%, rgba(120,100,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(25,29,55,.98), rgba(12,15,31,.98));
    box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 45px rgba(100,90,255,.12);
    color: #fff;
    animation: atlasVersionIn .28s ease-out;
}
@keyframes atlasVersionIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.atlas-version-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #c9c4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.atlas-version-log h2 {
    margin: 13px 0 4px;
    font-size: 27px;
    line-height: 1.1;
}
.atlas-version-number {
    margin: 0 0 18px;
    color: #9f98ff;
    font-size: 13px;
    font-weight: 700;
}
.atlas-version-log ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.atlas-version-log li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 20px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.45;
}
.atlas-version-log li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #a79fff;
    font-weight: 900;
}
.atlas-version-dismiss {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #776cff, #9b72ff);
    color: white;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(119,108,255,.25);
    transition: transform .15s ease, filter .15s ease;
}
.atlas-version-dismiss:active { transform: scale(.98); }
.atlas-version-dismiss:hover { filter: brightness(1.08); }



/* ============================================================
   PACK REVEAL - autoplaying, single-tap-to-open sequence.
   One persistent overlay with five stacked "stages" (pack icon,
   best-pull teaser, rarity word, hero card, results grid). Stages
   are shown/hidden via a class toggle on nodes that stay in the
   DOM for the life of the overlay, so real CSS transitions can
   play (a full innerHTML rebuild can't animate a property change,
   since the browser never sees an old value to transition from).
   ============================================================ */
.pack-overlay{position:fixed; inset:0; z-index:150; background:radial-gradient(circle at 50% 30%, #1c4f3f, #0e2c22 75%); overflow:hidden;}
.pack-overlay.shake-fx{animation:screenShake 0.5s ease-in-out;}
@keyframes screenShake{
  10%,90%{transform:translate3d(-1px,0,0);} 20%,80%{transform:translate3d(2px,0,0);}
  30%,50%,70%{transform:translate3d(-4px,0,0);} 40%,60%{transform:translate3d(4px,0,0);}
}
.po-skip{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; z-index:20;
  font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:1px;
  color:var(--ink-dim); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  padding:8px 14px; border-radius:999px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .2s ease, background .15s ease;
}
.po-skip.visible{opacity:1; pointer-events:auto;}
.po-skip:active{background:rgba(255,255,255,0.18);}

.po-stage{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(0.97); transition:opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1);
  box-sizing:border-box; max-width:100%; overflow-x:hidden;
}
.po-stage.active{opacity:1; visibility:visible; pointer-events:auto; transform:scale(1);}
.po-stage-results{overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:calc(56px + env(safe-area-inset-top));}

/* Stage 1 - pack icon shake + burst */
.po-glow{position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(62,224,176,0.35), transparent 70%); filter:blur(10px); animation:glowPulse 1.6s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{opacity:0.5; transform:scale(0.9);} 50%{opacity:1; transform:scale(1.1);}}
.po-pack-obj{font-size:100px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5)); position:relative; z-index:1;}
.po-pack-obj.shaking{animation:packShake 0.9s ease-in-out;}
.po-pack-obj.bursting{animation:packBurst 0.3s ease-in forwards;}
@keyframes packShake{
  0%,100%{transform:rotate(0deg) scale(1);}
  10%{transform:rotate(-6deg) scale(1.02);} 20%{transform:rotate(5deg) scale(1.03);}
  30%{transform:rotate(-7deg) scale(1.04);} 40%{transform:rotate(6deg) scale(1.05);}
  50%{transform:rotate(-5deg) scale(1.06);} 60%{transform:rotate(4deg) scale(1.07);}
  70%{transform:rotate(-3deg) scale(1.08);} 80%{transform:rotate(2deg) scale(1.1);}
  90%{transform:rotate(-1deg) scale(1.15);}
}
@keyframes packBurst{ to{ transform:scale(1.8); opacity:0; filter:blur(6px);} }
.po-hint{margin-top:22px; font-size:12px; color:var(--ink-dim); letter-spacing:1px; font-family:var(--font-d); text-transform:uppercase; position:relative; z-index:1; animation:hintPulse 1.4s ease-in-out infinite;}
@keyframes hintPulse{0%,100%{opacity:0.5;} 50%{opacity:1;}}

/* Stage 2 - quick "best pull" teaser */
.po-teaser-label{font-family:var(--font-d); font-size:12px; font-weight:800; letter-spacing:3px; color:var(--ink-dim); text-transform:uppercase;}
.po-teaser-rarity{font-family:var(--font-d); font-size:30px; font-weight:900; letter-spacing:1.5px; margin-top:10px; text-transform:uppercase; max-width:88vw; overflow-wrap:break-word;}
.po-stage-teaser.active .po-teaser-label,
.po-stage-teaser.active .po-teaser-rarity{ animation:teaserPop .45s cubic-bezier(.2,.9,.3,1) both; }
.po-stage-teaser.active .po-teaser-rarity{ animation-delay:.08s; }
@keyframes teaserPop{ from{opacity:0; transform:scale(0.8) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);} }

/* Stage 3 - big rarity word screen, which now stays on screen as the card
   name joins it below (via .show-name) rather than being swapped out for a
   separate stage - so there's time to read both together. */
.po-stage-rarityword{ --rc:var(--accent); }
.po-rarity-burst{position:absolute; width:70vmax; height:70vmax; max-width:560px; max-height:560px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%); filter:blur(6px);
  opacity:0;}
.po-stage-rarityword.active .po-rarity-burst{ animation:rarityBurstIn .6s ease-out forwards; }
@keyframes rarityBurstIn{ from{opacity:0; transform:scale(0.4);} to{opacity:1; transform:scale(1);} }
.po-rarity-ring{position:absolute; width:220px; height:220px; border-radius:50%; border:2px solid color-mix(in srgb, var(--rc) 70%, transparent); opacity:0;}
.po-stage-rarityword.active .po-rarity-ring{ animation:rarityRingOut 1.1s ease-out forwards; }
@keyframes rarityRingOut{ from{opacity:0.9; transform:scale(0.3);} to{opacity:0; transform:scale(2.4);} }
.po-rarity-word{position:relative; z-index:1; font-family:var(--font-d); font-weight:900; letter-spacing:2px; text-transform:uppercase; opacity:0; text-shadow:0 0 40px color-mix(in srgb, var(--rc) 60%, transparent); max-width:90vw; overflow-wrap:break-word; word-break:break-word;}
.po-stage-rarityword.active .po-rarity-word{ animation:rarityWordIn .55s cubic-bezier(.2,.9,.3,1) .1s forwards; }
@keyframes rarityWordIn{ from{opacity:0; transform:scale(0.6);} to{opacity:1; transform:scale(1);} }

/* Card name - joins the same still-visible rarity screen a beat later, so
   the rarity is never hidden while you're reading which card this is. */
.po-namecard-flash{position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 65%); opacity:0; pointer-events:none;}
.po-stage-rarityword.show-name .po-namecard-flash{ animation:nameFlashPulse .5s ease-out forwards; }
@keyframes nameFlashPulse{ from{opacity:0.85;} to{opacity:0;} }
.po-namecard-eyebrow{position:relative; z-index:1; font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:2.5px; color:var(--ink-dim); text-transform:uppercase; opacity:0; margin-top:20px;}
.po-stage-rarityword.show-name .po-namecard-eyebrow{ animation:teaserPop .4s cubic-bezier(.2,.9,.3,1) .05s both; }
.po-namecard-icon{position:relative; z-index:1; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:12px 0 14px;
  box-shadow:0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18); opacity:0; transform:scale(0.7);}
.po-stage-rarityword.show-name .po-namecard-icon{ animation:nameIconPop .45s cubic-bezier(.2,.9,.3,1) .12s forwards; }
@keyframes nameIconPop{ from{opacity:0; transform:scale(0.7);} to{opacity:1; transform:scale(1);} }
.po-namecard-icon span{font-size:30px; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4));}
.po-namecard-text{position:relative; z-index:1; font-family:var(--font-d); font-weight:900; line-height:1.15; text-transform:uppercase;
  max-width:88vw; overflow-wrap:break-word; word-break:break-word; opacity:0; text-shadow:0 0 30px color-mix(in srgb, var(--rc) 50%, transparent);}
.po-stage-rarityword.show-name .po-namecard-text{ animation:nameTextIn .5s cubic-bezier(.2,.9,.3,1) .2s forwards; }
@keyframes nameTextIn{ from{opacity:0; transform:translateY(8px) scale(0.92);} to{opacity:1; transform:translateY(0) scale(1);} }
.po-namecard-underline{position:relative; z-index:1; width:46px; height:3px; border-radius:999px; background:var(--rc); margin-top:14px; opacity:0; transform:scaleX(0);}
.po-stage-rarityword.show-name .po-namecard-underline{ animation:underlineIn .4s ease-out .4s forwards; }
@keyframes underlineIn{ from{opacity:0; transform:scaleX(0);} to{opacity:1; transform:scaleX(1);} }

/* Stage 4 - hero card */
.po-hero-card{ position:relative; width:min(72vw,260px); aspect-ratio:3/4.3; --rc:var(--accent);
  opacity:0; transform:scale(0.75) translateY(10px);
  transition:opacity .5s cubic-bezier(.2,.9,.3,1), transform .5s cubic-bezier(.2,.9,.3,1); }
.po-hero-card.arrive{ opacity:1; transform:scale(1) translateY(0); }
.po-hero-frame{ position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, var(--panel-3), var(--panel)); border:2px solid var(--rc);
  box-shadow:0 20px 55px rgba(0,0,0,0.5), 0 0 30px color-mix(in srgb, var(--rc) 35%, transparent);
  display:flex; flex-direction:column; padding:16px 16px 18px; }
.po-hero-rarity{font-family:var(--font-d); font-size:11px; font-weight:900; letter-spacing:1.5px; color:var(--rc); text-transform:uppercase;}
.po-hero-art{flex:1; display:flex; align-items:center; justify-content:center; margin:8px 0; position:relative; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--rc,#7c8a84) 60%, #0a201a), color-mix(in srgb, var(--rc,#7c8a84) 16%, #04110d));}
.po-hero-art::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,0.3) 100%); pointer-events:none;}
.po-hero-icon-badge{position:relative; z-index:1; width:76px; height:76px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);}
.po-hero-art span{font-size:36px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); position:relative; z-index:1;}
.po-hero-rating,.po-hero-stat,.po-hero-name,.po-hero-category{ opacity:0; transform:translateY(7px); transition:opacity .35s ease, transform .35s ease; }
.po-hero-card.show-info .po-hero-rating{ opacity:1; transform:none; transition-delay:.04s; }
.po-hero-card.show-info .po-hero-name{ opacity:1; transform:none; transition-delay:.12s; }
.po-hero-card.show-info .po-hero-stat:nth-child(1){ opacity:1; transform:none; transition-delay:.22s; }
.po-hero-card.show-info .po-hero-stat:nth-child(2){ opacity:1; transform:none; transition-delay:.29s; }
.po-hero-card.show-info .po-hero-stat:nth-child(3){ opacity:1; transform:none; transition-delay:.36s; }
.po-hero-card.show-info .po-hero-category{ opacity:1; transform:none; transition-delay:.46s; }
.po-hero-rating{display:flex; align-items:baseline; gap:6px;}
.po-hero-rating strong{font-family:var(--font-d); font-size:32px; font-weight:900; line-height:1; color:var(--rc);}
.po-hero-rating span{font-size:9px; font-weight:800; letter-spacing:1px; color:var(--ink-dim);}
.po-hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px;}
.po-hero-stat{background:rgba(255,255,255,0.06); border-radius:8px; padding:6px 4px;}
.po-hero-stat b{display:block; font-family:var(--font-d); font-size:14px; font-weight:900;}
.po-hero-stat span{display:block; font-size:7.5px; font-weight:800; letter-spacing:0.5px; color:var(--ink-dim); margin-top:1px;}
.po-hero-name{font-size:15px; font-weight:800; margin-top:10px; line-height:1.25; max-width:100%; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.po-hero-category{font-size:10px; color:var(--ink-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.po-hero-hint{opacity:0; transition:opacity .3s ease; margin-top:18px; pointer-events:none;}
.po-hero-hint.visible{opacity:1;}
.po-hero-badge{position:absolute; top:12px; right:12px; z-index:2; font-family:var(--font-d); font-weight:900; font-size:9px; letter-spacing:1px; padding:4px 9px; border-radius:999px; opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease;}
.po-hero-badge.show{opacity:1; transform:none;}
.po-hero-badge.new{background:var(--accent); color:#04241b;}
.po-hero-badge.dup{background:rgba(255,255,255,0.14); color:var(--ink-dim);}
.po-hero-frame.rar-mythic-glow{animation:mythicPulse 2.2s ease-in-out infinite;}
@keyframes mythicPulse{ 0%,100%{box-shadow:0 20px 55px rgba(0,0,0,0.5), 0 0 22px rgba(255,95,174,0.35);} 50%{box-shadow:0 20px 55px rgba(0,0,0,0.5), 0 0 40px rgba(255,95,174,0.65);} }

/* Stage 5 - full results grid (reuses .po-summary-grid / .stat-grid / .btn already defined) */
.po-summary{width:100%; max-width:440px;}
.po-summary-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0;}
.po-summary-grid .pcard{aspect-ratio:3/4.3; animation:cardPopIn .3s cubic-bezier(.2,.9,.3,1) backwards;}
.po-summary-grid .pcard:nth-child(1){animation-delay:.02s;} .po-summary-grid .pcard:nth-child(2){animation-delay:.05s;}
.po-summary-grid .pcard:nth-child(3){animation-delay:.08s;} .po-summary-grid .pcard:nth-child(4){animation-delay:.11s;}
.po-summary-grid .pcard:nth-child(5){animation-delay:.14s;} .po-summary-grid .pcard:nth-child(6){animation-delay:.17s;}
.po-summary-grid .pcard:nth-child(7){animation-delay:.2s;} .po-summary-grid .pcard:nth-child(8){animation-delay:.23s;}
.po-summary-grid .pcard:nth-child(9){animation-delay:.26s;} .po-summary-grid .pcard:nth-child(10){animation-delay:.29s;}
.po-summary-grid .pcard:nth-child(11){animation-delay:.32s;} .po-summary-grid .pcard:nth-child(12){animation-delay:.35s;}
@keyframes cardPopIn{ from{opacity:0; transform:scale(0.75) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);} }

.particle{position:absolute; border-radius:50%; pointer-events:none; z-index:30;}
@keyframes particleFly{ to{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot,0deg)) scale(0); opacity:0;} }