:root{--bg:#0b0d17;--card-bg:#151a2e;--accent:#e3350d;--gold:#ffcb05;--text:#f0f0f0;--muted:#8b93a7}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#000;color:var(--text)}
/* Scrollbars visible on main content areas so collection / binder can scroll with the wheel */
.app-content, #binder-pick-list, #players-view-collection, .trade-modal-inner{
  scrollbar-width:thin;
  scrollbar-color:rgba(90,100,128,.75) transparent;
}
.app-content::-webkit-scrollbar,
#binder-pick-list::-webkit-scrollbar,
#players-view-collection::-webkit-scrollbar,
.trade-modal-inner::-webkit-scrollbar{
  width:9px;height:9px;
}
.app-content::-webkit-scrollbar-thumb,
#binder-pick-list::-webkit-scrollbar-thumb,
#players-view-collection::-webkit-scrollbar-thumb,
.trade-modal-inner::-webkit-scrollbar-thumb{
  background:rgba(90,100,128,.7);border-radius:6px;
}
.app-content::-webkit-scrollbar-track,
#binder-pick-list::-webkit-scrollbar-track,
#players-view-collection::-webkit-scrollbar-track,
.trade-modal-inner::-webkit-scrollbar-track{
  background:transparent;
}

header{background:linear-gradient(90deg,#1a1f35,#0b0d17);border-bottom:2px solid var(--accent);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.logo{font-size:1.5rem;font-weight:800;color:var(--accent)}.logo span{color:var(--gold)}
.stats{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.stat{background:var(--card-bg);padding:.4rem .9rem;border-radius:999px;border:1px solid #2a314d;font-size:.95rem}
.stat strong{color:var(--gold)}
.dev-btn{background:#2a314d;border:1px dashed #5a6480;color:#8b93a7;padding:.35rem .7rem;border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:700}
.dev-btn:hover{color:var(--gold);border-color:var(--gold)}
/* main layout handled by .app-main / .app-content */
.tabs{display:none!important}
.tab-btn{background:var(--card-bg);border:1px solid #2a314d;color:var(--text);padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.tab-btn:hover{border-color:#5a6480;background:#1a2035}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tab-btn.active:hover{background:var(--accent);border-color:var(--accent)}
.panel{display:none}.panel.active{display:block}
.nav-more{position:relative}
.tab-btn.more-btn{display:flex;align-items:center;gap:.35rem}
.tab-btn.more-btn .more-caret{font-size:.7rem;opacity:.8}
.tab-btn.more-btn.open,.tab-btn.more-btn.has-active{
  border-color:#5a6480;
}
.tab-btn.more-btn.has-active{
  box-shadow:inset 0 -2px 0 var(--accent);
}
.more-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:180px;background:#12182a;border:1px solid #2a314d;border-radius:10px;
  padding:.35rem;box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.more-menu.open{display:block}
.more-item{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  color:var(--text);padding:.55rem .75rem;border-radius:7px;cursor:pointer;
  font-weight:600;font-size:.9rem;
}
.more-item:hover{background:#1a2035}
.more-item.active{background:rgba(227,53,13,.25);color:#fff}


.pack-area{text-align:center;padding:1rem;min-height:0}
.pack-visual{width:270px;height:378px;margin:0 auto 1.2rem;background:#000;border:none;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:none;cursor:pointer;position:relative;overflow:hidden;user-select:none;transition:transform .2s}
.pack-visual:hover{transform:scale(1.04)}
.pack-visual.ripping{pointer-events:none;animation:pack-grab .25s ease-out,pack-tear-open 1.1s .2s forwards}
@keyframes pack-grab{0%{transform:scale(1)}40%{transform:scale(1.06) rotate(-2deg)}100%{transform:scale(1.02) rotate(1deg)}}
@keyframes pack-tear-open{0%{transform:scale(1.02);opacity:1;filter:brightness(1)}35%{transform:scale(1.08) rotate(4deg);filter:brightness(1.25)}75%{transform:scale(1.2) rotate(8deg);opacity:.6;filter:brightness(1.6)}100%{transform:scale(1.35) rotate(-12deg);opacity:0;filter:brightness(2)}}
.pack-tear{position:absolute;inset:0;z-index:6;pointer-events:none}
.pack-tear::before{content:'';position:absolute;top:-10%;left:40%;width:8px;height:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 15%,rgba(255,220,150,.9) 40%,rgba(227,53,13,.7) 70%,rgba(0,0,0,.3));transform:rotate(18deg);transform-origin:top center;box-shadow:0 0 12px rgba(255,255,255,.6)}
.pack-visual.ripping .pack-tear::before{animation:tear-slash .7s .15s ease-out forwards}
@keyframes tear-slash{0%{height:0;opacity:0}10%{opacity:1}100%{height:130%;opacity:1}}
.pack-tear::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.9),rgba(255,200,100,.4) 30%,transparent 70%);opacity:0}
.pack-visual.ripping .pack-tear::after{animation:burst-flash .5s .55s ease-out forwards}
@keyframes burst-flash{0%{opacity:0;transform:scale(.5)}40%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
.pack-logo{font-size:2.8rem;margin-bottom:.4rem;position:relative;z-index:2}
.pack-label{font-weight:800;color:var(--gold);letter-spacing:2px;font-size:1rem;position:relative;z-index:2}
.pack-sub{font-size:.75rem;color:var(--muted);margin-top:.25rem;position:relative;z-index:2}
.btn{background:var(--accent);color:#fff;border:none;padding:.8rem 1.8rem;font-size:1rem;font-weight:700;border-radius:10px;cursor:pointer;box-shadow:0 4px 14px rgba(227,53,13,.35)}
.btn:hover{background:#ff3b1a}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-secondary{background:transparent;border:2px solid var(--accent);color:var(--accent);box-shadow:none}
.btn-group{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}

.reveal-stage{display:none;flex-direction:column;align-items:center;gap:1rem}
.reveal-stage.active{display:flex}
.card-counter{color:var(--muted);font-weight:600;font-size:.9rem}
.reveal-card-wrapper{perspective:1100px;width:240px;height:340px;cursor:pointer;position:relative;overflow:visible}
.reveal-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,.15,.2,1)}
.reveal-card.no-transition{transition:none!important}
.reveal-card.flipped{transform:rotateY(180deg)}
.reveal-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden}
.reveal-back{padding:0;border:none;background:#111}
.card-back-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
.reveal-front{transform:rotateY(180deg);display:flex;flex-direction:column;border:4px solid #ccc;background:#f5f0e6;color:#1a1a1a;box-shadow:0 12px 36px rgba(0,0,0,.55)}
.reveal-front.full-art{
  padding:0;border:none!important;background:transparent;
  display:block;overflow:hidden;border-radius:12px;
}
.reveal-front.full-art .full-card-img{
  width:100%;height:100%;
  object-fit:fill;
  display:block;
}
.reveal-card-wrapper{perspective:1100px;width:270px;height:378px;cursor:pointer;position:relative;overflow:visible}
.tcg-card.full-art{padding:0;background:transparent;aspect-ratio:2.5/3.5;border:none!important;overflow:hidden}
.tcg-card.full-art .full-card-img{width:100%;height:100%;object-fit:fill;display:block}
.reveal-front .tcg-top{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 2px;font-weight:800;font-size:.95rem}
.reveal-front .tcg-stage{font-size:.65rem;background:#333;color:#fff;padding:2px 6px;border-radius:4px}
.reveal-front .tcg-hp{color:#c00;font-size:1.05rem}
.reveal-front .tcg-art{margin:4px 10px;height:130px;background:linear-gradient(160deg,#87CEEB,#98D8C8);border:2px solid #333;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:4.2rem;position:relative;overflow:hidden}
.reveal-front .tcg-type-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:700}
.reveal-front .tcg-info{padding:4px 10px;font-size:.65rem;color:#444;border-bottom:1px solid #ccc}
.reveal-front .tcg-attack{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem;border-bottom:1px solid #ddd}
.reveal-front .tcg-dmg{font-size:1.15rem;font-weight:800}
.reveal-front .tcg-bottom{margin-top:auto;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;font-size:.65rem;background:#eee;border-top:1px solid #ccc}
.new-tag{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;padding:3px 7px;border-radius:4px;z-index:5}
.click-hint{color:var(--muted);font-size:.88rem;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.reveal-actions{display:flex;gap:.7rem}
.opened-summary{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;min-height:64px}
.mini-card{width:46px;height:64px;border-radius:6px;border:2px solid #2a314d;background:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;opacity:.3;transition:.25s;overflow:hidden;padding:0;cursor:pointer}
.mini-card img{width:100%;height:100%;object-fit:cover;display:block}
.mini-card.shown{opacity:1;transform:scale(1.06)}
.mini-card.shown:hover{transform:scale(1.18);border-color:var(--gold);box-shadow:0 0 12px rgba(255,203,5,.45);z-index:5}

/* Hover preview — large card in center of screen while hovering mini-cards */
#hover-preview{
  position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;
  pointer-events:none;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  /* offset for fixed sidebar so preview is centered in the main content column */
  padding-left:260px;
}
@media (max-width:900px){
  #hover-preview{padding-left:0}
}
/* During pack open, center on the pulled-card stage (not sidebar-offset alone) */
#hover-preview.over-reveal{
  padding-left:0 !important;
  background:rgba(0,0,0,.45);
}
#hover-preview.over-reveal .hp-inner{
  position:fixed;
  /* left/top set by JS to match the center reveal card */
  transform:translate(-50%,-50%);
  max-width:min(280px,70vw);
}
#hover-preview.visible{display:flex}
#hover-preview .hp-inner{
  max-width:min(340px,78vw);max-height:82vh;
  animation:hp-in .18s ease-out;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.65));
  pointer-events:none;
}
@keyframes hp-in{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
#hover-preview img{width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:12px;display:block;pointer-events:none}
#hover-preview .hp-label{
  text-align:center;margin-top:.6rem;color:var(--gold);font-weight:700;font-size:.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,.8);pointer-events:none;
}

.collection-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
/* collection shell styles merged into shared page-shell block below */
.col-body{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden
}
.col-grid-scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;padding:.2rem .1rem .55rem
}
/* Collection grid sits INSIDE the scroller (not the same element) */
#collection .collection-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(152px, 1fr)) !important;
  gap:14px !important;
  align-items:start !important;
  grid-auto-rows:auto !important;
  height:auto !important;
  min-height:0 !important;
  flex:none !important;
  overflow:visible !important;
}
/* Portrait card frame — image fills the frame, no stacking */
#collection .tcg-card{
  position:relative !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  isolation:isolate;
  z-index:0;
  transform:none;
  box-sizing:border-box;
  background:#111;
  aspect-ratio:2.5 / 3.5 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
#collection .tcg-card:hover{
  transform:translateY(-5px);
  z-index:3;
}
#collection .tcg-card.full-art{
  border:none !important;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  background:#0a0a0e;
}
#collection .tcg-card.full-art .full-card-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:#0a0a0e;
}
#collection .rarity-chip{
  position:absolute;bottom:6px;left:6px;z-index:5;
  max-width:calc(100% - 52px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#collection .owned-count{
  position:absolute;bottom:6px;right:6px;z-index:5;
}
#collection .grade-badge{
  position:absolute;top:6px;left:6px;z-index:5;
}
.col-missing-toggle{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);
  cursor:pointer;user-select:none;padding:.35rem .5rem
}
.col-missing-toggle input{accent-color:var(--gold)}
.filters{display:flex;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:.2rem}
.filters.filters-wrap{flex-wrap:wrap;overflow:visible}
.filter-btn{flex-shrink:0;background:var(--card-bg);border:1px solid #2a314d;color:var(--muted);padding:.3rem .7rem;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:600}
.filter-btn.active,.filter-btn:hover{border-color:var(--accent);color:var(--text)}
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.85rem}
/* Compact player-view tiles (no clipping / overlap) */
.card-tile{
  position:relative;
  background:var(--card-bg);border:1px solid #2a314d;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
}
.card-tile img{
  width:100%;aspect-ratio:2.5/3.5;object-fit:cover;display:block;
  background:#111;
}
.card-tile .ct-name{
  font-size:.72rem;font-weight:700;padding:.35rem .45rem 0;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
}
.card-tile .ct-meta{
  font-size:.65rem;color:var(--muted);padding:.15rem .45rem .4rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcg-card{border-radius:10px;overflow:hidden;border:3px solid #888;background:#f5f0e6;color:#1a1a1a;position:relative;transition:transform .2s}
.tcg-card:hover{transform:translateY(-4px)}
.tcg-card.missing{opacity:.35;filter:grayscale(.8)}
.tcg-card.full-art{padding:0;background:#111}
.tcg-card.full-art .full-card-img{width:100%;height:100%;object-fit:contain;display:block;min-height:200px}
.tcg-card .tcg-top{display:flex;justify-content:space-between;align-items:center;padding:4px 7px 1px;font-weight:800;font-size:.78rem}
.tcg-card .tcg-stage{font-size:.55rem;background:#333;color:#fff;padding:1px 4px;border-radius:3px}
.tcg-card .tcg-hp{color:#c00;font-size:.85rem}
.tcg-card .tcg-art{margin:2px 6px;height:78px;background:linear-gradient(160deg,#87CEEB,#98D8C8);border:1.5px solid #333;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.tcg-card .tcg-attack{padding:4px 7px;font-size:.72rem;font-weight:700;display:flex;justify-content:space-between;border-top:1px solid #ddd}
.tcg-card .tcg-bottom{padding:3px 7px;font-size:.6rem;background:#eee;display:flex;justify-content:space-between}
.owned-count{position:absolute;bottom:4px;right:6px;background:rgba(0,0,0,.75);color:var(--gold);font-size:.65rem;padding:1px 5px;border-radius:3px;font-weight:700}
.progress-bar{height:7px;background:#1a2035;border-radius:4px;overflow:hidden;margin-top:.35rem}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .4s}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-bottom:1.5rem}
.shop-item{background:var(--card-bg);border:1px solid #2a314d;border-radius:12px;padding:1.1rem;text-align:center}
.shop-item h3{color:var(--gold);margin-bottom:.3rem}
.price{font-size:1.2rem;font-weight:800;color:var(--gold);margin:.6rem 0}
.sell-list{max-height:400px;overflow-y:auto}
.sell-row{display:flex;align-items:center;gap:.7rem;background:var(--card-bg);padding:.6rem .9rem;border-radius:8px;margin-bottom:.45rem;border:1px solid #2a314d}
.sell-row .mini-art{font-size:1.6rem;width:36px;text-align:center}
.sell-info{flex:1;text-align:left}
.sell-info .name{font-weight:600;font-size:.88rem}
.sell-info .rarity{font-size:.72rem;color:var(--muted)}
.sell-btn{background:#1e3a2f;border:1px solid #22c55e;color:#22c55e;padding:.25rem .6rem;border-radius:5px;cursor:pointer;font-size:.75rem;font-weight:600}
.sell-btn:hover{background:#22c55e;color:#0b0d17}
.dev-pull{margin-top:1rem;padding:1rem;background:var(--card-bg);border:1px dashed #5a6480;border-radius:10px;text-align:left}
.dev-pull h4{color:var(--gold);margin-bottom:.5rem;font-size:.9rem}
.dev-pull select{width:100%;max-width:360px;padding:.4rem;border-radius:6px;background:#1a2035;color:var(--text);border:1px solid #2a314d;margin-bottom:.5rem}
.empty-state{text-align:center;padding:2.5rem;color:var(--muted)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px);background:#1e253f;border:1px solid var(--accent);color:#fff;padding:.7rem 1.3rem;border-radius:10px;font-weight:600;z-index:600;transition:transform .3s;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.toast.show{transform:translateX(-50%) translateY(0)}
/* Live family pull alert (other players online) */
.pull-alert{
  /* Top of screen, centered on the main content column (logo area) — not the full viewport */
  position:fixed;top:20px;
  left:calc(260px + (100vw - 260px) / 2);
  transform:translate(-50%,-120%) scale(.96);
  z-index:650;max-width:min(420px,calc(100vw - 280px));width:100%;
  background:linear-gradient(135deg,#1a1428 0%,#12141c 60%,#1a2035 100%);
  border:1px solid rgba(255,203,5,.55);
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(255,203,5,.15);
  border-radius:14px;padding:.85rem 1rem .85rem .9rem;
  display:flex;align-items:center;gap:.75rem;
  transition:transform .35s cubic-bezier(.2,1.1,.3,1),opacity .25s;
  opacity:0;pointer-events:none;
}
.pull-alert.show{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
@media (max-width:900px){
  .pull-alert{
    left:50%;
    max-width:min(420px,92vw);
  }
}
.pull-alert .pa-art{
  width:52px;height:72px;border-radius:8px;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,203,5,.4);background:#0b0d17;
}
.pull-alert .pa-emoji{
  width:52px;height:72px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;background:#0b0d17;border:2px solid rgba(255,203,5,.4);
}
.pull-alert .pa-body{flex:1;min-width:0}
.pull-alert .pa-who{
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.4px;
  text-transform:uppercase;margin-bottom:.15rem;
}
.pull-alert .pa-msg{
  font-size:.95rem;font-weight:800;color:#fff;line-height:1.25;
}
.pull-alert .pa-msg strong{color:var(--gold)}
.pull-alert .pa-meta{
  font-size:.75rem;color:var(--muted);margin-top:.2rem;
}
.pull-alert .pa-close{
  background:transparent;border:none;color:var(--muted);cursor:pointer;
  font-size:1.1rem;padding:.2rem .35rem;line-height:1;flex-shrink:0;
  min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
}
.pull-alert .pa-close:hover{color:#fff}
.pull-alert.tier-great{border-color:rgba(96,165,250,.55);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 20px rgba(96,165,250,.2)}
.pull-alert.tier-amazing{border-color:rgba(255,203,5,.55)}
.pull-alert.tier-jackpot{border-color:rgba(236,72,153,.55);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(236,72,153,.25)}
.grade-result-modal{
  position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);padding:1rem;backdrop-filter:blur(3px);
}
.grade-result-modal.open{display:flex}
#bulk-sell-modal.open{display:flex}
.grade-result-card{
  background:#16161c;border:1px solid #2a314d;border-radius:16px;padding:1.25rem 1.4rem;
  text-align:center;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.grade-result-card .gr-title{font-size:.85rem;color:var(--muted);margin-bottom:.35rem}
.grade-result-card .gr-name{font-size:1.05rem;font-weight:800;margin-bottom:.75rem}
.grade-result-card .gr-score{
  font-size:2.6rem;font-weight:900;line-height:1;margin:.2rem 0 .15rem;
  background:linear-gradient(180deg,#ffcb05,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.grade-result-card .gr-label{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:.5rem}
.grade-result-card .gr-value{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.grade-badge{
  position:absolute;top:6px;left:6px;z-index:5;
  background:linear-gradient(135deg,#b45309,#ca8a04);color:#fef9c3;
  font-size:.62rem;font-weight:800;padding:2px 6px;border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;
}
.zoom-grade-slab{
  display:block;margin:.4rem auto .15rem;padding:.25rem .65rem;border-radius:6px;width:fit-content;
  background:linear-gradient(135deg,#1e293b,#0f172a);border:1px solid rgba(255,203,5,.45);
  font-size:.8rem;font-weight:800;color:#ffcb05;text-align:center;
}
footer{text-align:center;padding:1.8rem;color:var(--muted);font-size:.8rem}

/* Rare Holo reveal effects */
.holo-burst{
  position:fixed;inset:0;pointer-events:none;z-index:200;
  --burst-x:50%;--burst-y:45%;
  background:radial-gradient(circle at var(--burst-x) var(--burst-y),
    rgba(255,215,0,.7) 0%,
    rgba(255,100,50,.35) 25%,
    transparent 60%);
  opacity:0;animation:holo-flash 1.2s ease-out forwards;
}
@keyframes holo-flash{
  0%{opacity:0;transform:scale(.8)}
  20%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.15)}
}
.reveal-card.holo-glow .reveal-front{
  animation:holo-border 1.5s ease-in-out infinite;
  box-shadow:0 0 40px rgba(255,200,50,.8),0 0 80px rgba(255,150,0,.4),0 12px 36px rgba(0,0,0,.55);
}
@keyframes holo-border{
  0%,100%{box-shadow:0 0 30px rgba(255,200,50,.7),0 0 60px rgba(255,150,0,.3),0 12px 36px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 50px rgba(255,230,100,1),0 0 100px rgba(255,180,50,.6),0 12px 36px rgba(0,0,0,.55)}
}
.holo-sparkle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:#ffe566;box-shadow:0 0 8px #ff0,0 0 16px #fa0;
  pointer-events:none;z-index:10;
  margin-left:-3px;margin-top:-3px;
  animation:sparkle-fly 1s ease-out forwards;
}
@keyframes sparkle-fly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* Pull tier celebrations */
.pull-banner{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  font-weight:900;font-size:.78rem;letter-spacing:1.5px;
  padding:5px 16px;border-radius:999px;white-space:nowrap;z-index:20;
  animation:banner-pop .5s cubic-bezier(.2,1.4,.4,1) forwards;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  pointer-events:none;
}
.pull-banner.tier-nice{background:#4ade80;color:#052e16}
.pull-banner.tier-great{background:linear-gradient(90deg,#3b82f6,#60a5fa);color:#fff}
.pull-banner.tier-amazing{background:linear-gradient(90deg,#f5c518,#ff8c00,#f5c518);color:#1a1a1a;box-shadow:0 4px 16px rgba(255,180,0,.5)}
.pull-banner.tier-jackpot{background:linear-gradient(90deg,#a855f7,#ec4899,#f5c518);color:#fff;box-shadow:0 0 20px rgba(236,72,153,.5);font-size:.85rem;letter-spacing:2px}
.pull-burst{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0;--burst-x:50%;--burst-y:45%}
.pull-burst.tier-nice{background:radial-gradient(circle at var(--burst-x) var(--burst-y),rgba(74,222,128,.55) 0%,rgba(74,222,128,.2) 30%,transparent 55%);animation:holo-flash .9s ease-out forwards}
.pull-burst.tier-great{background:radial-gradient(circle at var(--burst-x) var(--burst-y),rgba(96,165,250,.65) 0%,rgba(96,165,250,.25) 32%,transparent 58%);animation:holo-flash 1s ease-out forwards}
.pull-burst.tier-amazing{background:radial-gradient(circle at var(--burst-x) var(--burst-y),rgba(255,215,0,.75) 0%,rgba(255,100,50,.4) 28%,transparent 60%);animation:holo-flash 1.2s ease-out forwards}
.pull-burst.tier-jackpot{background:radial-gradient(circle at var(--burst-x) var(--burst-y),rgba(236,72,153,.7) 0%,rgba(168,85,247,.5) 28%,rgba(255,203,5,.3) 48%,transparent 68%);animation:holo-flash 1.4s ease-out forwards}
.reveal-card.tier-glow-nice .reveal-front{box-shadow:0 0 24px rgba(74,222,128,.5),0 12px 36px rgba(0,0,0,.55)}
.reveal-card.tier-glow-great .reveal-front{box-shadow:0 0 32px rgba(96,165,250,.6),0 12px 36px rgba(0,0,0,.55)}
.reveal-card.tier-glow-amazing .reveal-front{animation:holo-border 1.5s ease-in-out infinite;box-shadow:0 0 40px rgba(255,200,50,.8),0 0 80px rgba(255,150,0,.4),0 12px 36px rgba(0,0,0,.55)}
.reveal-card.tier-glow-jackpot .reveal-front{animation:holo-border 1.2s ease-in-out infinite;box-shadow:0 0 50px rgba(236,72,153,.7),0 0 90px rgba(168,85,247,.4),0 12px 36px rgba(0,0,0,.55)}
.pull-confetti{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:210;animation:confetti-fall 1.4s ease-out forwards}
@keyframes confetti-fall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(360deg)}
}

.holo-banner{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#f5c518,#ff8c00,#f5c518);
  color:#1a1a1a;font-weight:900;font-size:.75rem;letter-spacing:2px;
  padding:4px 14px;border-radius:999px;white-space:nowrap;
  animation:banner-pop .5s cubic-bezier(.2,1.4,.4,1) forwards;
  z-index:20;box-shadow:0 4px 16px rgba(255,180,0,.5);
}
@keyframes banner-pop{
  0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(10px)}
  100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}
}


.zoom-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:none;align-items:center;justify-content:center;padding:.75rem;backdrop-filter:blur(4px);overflow:hidden}
.zoom-modal.open{display:flex}

/* Binder inspect — take the card out and look at it */
#reveal-card.flipped{cursor:zoom-in}
.reveal-card-wrapper:has(#reveal-card.flipped){cursor:zoom-in}
.binder-inspect-modal{
  position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);
  perspective:900px;
}
.binder-inspect-modal.open{display:flex}
.binder-inspect-stage{
  position:relative;width:min(340px,86vw);
  transform-style:preserve-3d;
  transition:transform .12s ease-out;
  will-change:transform;
  animation:binder-inspect-in .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes binder-inspect-in{
  from{opacity:0;transform:translateY(18px) scale(.88)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.binder-inspect-card{
  position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  background:#0a0c12;
  transform-style:preserve-3d;
}
.binder-inspect-card img{
  display:block;width:100%;height:auto;vertical-align:middle;
  border-radius:14px;pointer-events:none;user-select:none;
}
.binder-inspect-glare{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(
    circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.12) 28%,
    transparent 55%
  );
  mix-blend-mode:soft-light;opacity:.85;
}
.binder-inspect-sheen{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,203,5,.15) 40%,
    rgba(255,255,255,.35) 50%,
    rgba(96,165,250,.18) 60%,
    transparent 80%
  );
  background-size:220% 220%;
  background-position:var(--sx,40%) var(--sy,40%);
  mix-blend-mode:color-dodge;
}
.binder-inspect-card.is-holo .binder-inspect-sheen{opacity:.9}
.binder-inspect-card.is-rare .binder-inspect-sheen{opacity:.55}
.binder-inspect-name{
  text-align:center;margin-top:.85rem;color:var(--gold);font-weight:800;font-size:.95rem;
  text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;
}
.binder-inspect-hint{
  text-align:center;margin-top:.35rem;color:var(--muted);font-size:.75rem;pointer-events:none;
}
.binder-inspect-close{
  position:absolute;top:max(.75rem, env(safe-area-inset-top));right:max(.75rem, env(safe-area-inset-right));
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;
  width:40px;height:40px;border-radius:50%;font-size:1.35rem;cursor:pointer;line-height:1;
  display:grid;place-items:center;
}
.binder-inspect-close:hover{background:rgba(255,255,255,.16)}
/* Binder grid: no hover tilt — only a subtle lift is fine; keep existing translateY soft */
.binder-slot.owned{cursor:zoom-in}

/* ===== Achievements ===== */

.ach-series-dots{display:flex;gap:5px;justify-content:center;margin-top:.55rem;align-items:center;flex-wrap:wrap}
.ach-series-dots .ach-dot{
  width:10px;height:10px;border-radius:50%;background:#3a3140;border:0;padding:0;
  display:inline-block;cursor:default;transition:transform .12s, box-shadow .12s;
}
.ach-series-dots .ach-dot.on{background:#c9a227}
.ach-series-dots .ach-dot.done{background:#4ade80;cursor:pointer}
.ach-series-dots .ach-dot.done:hover{transform:scale(1.35);box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.ach-series-dots .ach-dot.current:not(.done){box-shadow:0 0 0 2px rgba(255,203,5,.45)}
.ach-claimed-at{text-align:center;color:#9ca3af;font-size:.78rem;margin:.35rem 0 0;font-weight:600}

.ach-title-panel{
  padding:1.25rem 1.35rem;margin-bottom:1rem;border-radius:12px;position:relative;overflow:hidden;
  border:1px solid rgba(255,203,5,.22);
  background:linear-gradient(100deg,#17171b 0%,#151112 55%,#1a1210 100%);
}
.ach-title-panel:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 50%,rgba(255,192,61,.07) 50% 51%,transparent 51%);
}
.ach-title-row{position:relative;z-index:1;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.ach-title-main{flex:1;min-width:200px}
.ach-eyebrow{color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.ach-title-main h1{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.6rem);margin:.2rem 0 .4rem;color:#f9d979;text-shadow:0 2px 0 #3e2309}
.ach-title-main p{color:var(--muted);margin:0;font-size:.88rem}
.ach-overall{min-width:180px}
.ach-overall strong{font-family:Georgia,serif;font-size:1.8rem;color:#fff}
.ach-overall strong span{color:#96918b;font-size:1.1rem}
.ach-meter{height:10px;background:#08090b;border:1px solid #594222;border-radius:20px;overflow:hidden;margin:8px 0 6px}
.ach-meter>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ac6911,#f6ca44 48%,#fff0a9);width:0}
.ach-summary{display:flex;gap:.75rem}
.ach-summary-card{text-align:center;min-width:72px}
.ach-medal{margin:auto;width:44px;height:44px;border:2px solid #b77b19;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#784327,#27180f 60%);font-size:1.2rem}
.ach-summary-card b{display:block;color:var(--gold);font-size:1.05rem;margin-top:4px}
.ach-summary-card span{font-size:.62rem;color:#c5bca8;text-transform:uppercase;letter-spacing:.06em}
.ach-layout{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(240px,.9fr);gap:.85rem}
.ach-categories{border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.25);padding:.35rem;align-self:start}
.ach-cat-btn{display:flex;align-items:center;gap:.45rem;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;padding:.7rem .55rem;color:#ddd3c2;text-align:left;cursor:pointer;font-weight:700;font-size:.85rem;border-radius:6px}
.ach-cat-btn:last-child{border-bottom:0}
.ach-cat-btn:hover{background:rgba(255,255,255,.04)}
.ach-cat-btn.active{color:#fff0ae;background:linear-gradient(90deg,rgba(202,34,25,.4),transparent);box-shadow:inset 3px 0 #e35313}
.ach-list-panel{border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.22);padding:.75rem}
.ach-list-head{display:flex;justify-content:space-between;align-items:center;padding:0 .2rem .7rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.7rem;color:#e6d6ad;font-size:.85rem}
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.55rem;max-height:min(58vh,520px);overflow:auto}
.mkt-panel{display:none;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.panel.active.mkt-panel{display:flex}
/* Shared page shell — one continuous card (hero + toolbar + body) */
.page-shell{
  display:none;flex-direction:column;min-height:0;gap:0;
}
.panel.active.page-shell{
  display:flex;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg,#16161c 0%,#0e1016 42%,#0b0d12 100%);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
/* Hero is the top band of the same card — not a floating box */
.page-shell > .page-hero.ach-title-panel,
.page-shell > .ach-title-panel.page-hero,
.mkt-panel > .ach-title-panel.mkt-title-panel,
.col-panel > .ach-title-panel.col-title-panel{
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  border-bottom:1px solid rgba(255,203,5,.14) !important;
  background:linear-gradient(105deg,#1c1914 0%,#141210 48%,#12141a 100%) !important;
  padding:1.05rem 1.25rem .95rem !important;
  flex-shrink:0;
  box-shadow:none !important;
}
.page-shell > .page-hero.ach-title-panel:after,
.mkt-panel > .ach-title-panel.mkt-title-panel:after,
.col-panel > .ach-title-panel.col-title-panel:after{
  background:linear-gradient(115deg,transparent 0 55%,rgba(255,192,61,.06) 55% 56%,transparent 56%);
}
.page-hero .ach-title-main h1,
.mkt-title-panel .ach-title-main h1,
.col-title-panel .ach-title-main h1{
  font-size:clamp(1.35rem,2.6vw,1.95rem);
  margin:.15rem 0 .3rem;
}
.page-hero .ach-title-main p,
.mkt-title-panel .ach-title-main p,
.col-title-panel .ach-title-main p{
  font-size:.82rem;line-height:1.4;max-width:36rem
}
.page-shell .ach-summary-card,
.mkt-panel .ach-summary-card,
.col-panel .ach-summary-card{
  min-width:64px
}
.page-shell .ach-medal,
.mkt-panel .ach-medal,
.col-panel .ach-medal{
  width:40px;height:40px;font-size:1.05rem
}
/* Toolbar strip under hero */
.page-shell > .mkt-topbar,
.mkt-panel > .mkt-topbar,
.col-panel > .mkt-topbar{
  display:flex;align-items:center;justify-content:flex-start;gap:.65rem;flex-wrap:wrap;
  margin:0 !important;
  padding:.55rem 1rem;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.28);
}
.mkt-tabs{display:flex;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:.2rem}
.mkt-tab{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;
  background:transparent;color:#b9b3a8;padding:.45rem .75rem;border-radius:8px;
  cursor:pointer;font-weight:800;font-size:.84rem;transition:background .15s,color .15s,border-color .15s
}
.mkt-tab:hover{background:rgba(255,255,255,.05);color:#e8e2d6}
.mkt-tab.active{
  color:#fff0ae;border-color:rgba(227,53,13,.45);
  background:linear-gradient(90deg,rgba(202,34,25,.32),rgba(0,0,0,.15));
  box-shadow:inset 3px 0 #e35313
}
.mkt-top-stats{display:flex;gap:.85rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem}
.mkt-top-stats b{color:var(--gold)}
/* Body = content area of same card */
.page-body,
.page-shell > .mkt-body,
.page-shell > .page-body,
.mkt-panel > .mkt-body,
.col-panel > .col-body{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:1rem 1.15rem 1.1rem !important;
}
.page-scroll{
  flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin
}
#shop .admin-section.active{display:flex!important;flex-direction:column;min-height:0;flex:1;overflow:hidden}
#shop .admin-section{display:none}
#shop #shop-sec-cosmetics .page-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
/* Market + Collection share the same continuous-card treatment */
.mkt-panel,.col-panel{
  display:none;flex-direction:column;height:100%;min-height:0;overflow:hidden;gap:0
}
.panel.active.mkt-panel,.panel.active.col-panel{
  display:flex;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg,#16161c 0%,#0e1016 42%,#0b0d12 100%);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
body.market-active .app-content,
body.collection-active .app-content,
body.catalog-active .app-content,
body.quests-active .app-content,
body.shop-active .app-content,
body.binder-active .app-content{
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
body.market-active #market.panel.active,
body.collection-active #collection.panel.active,
body.catalog-active #catalog.panel.active,
body.quests-active #quests.panel.active,
body.shop-active #shop.panel.active,
body.binder-active #binder.panel.active{
  flex:1;
  min-height:0;
  height:auto;
}
/* Catalog + Quests + Binder: full-width middle scroll like Market */
#catalog.page-shell,
#quests.page-shell,
#binder.page-shell{
  height:100%;
  min-height:0;
}
#catalog .page-body,
#quests .page-body,
#binder .page-body{
  flex:1;
  min-height:0;
}
#catalog .catalog-wrap.page-scroll,
#quests .page-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  width:100%;
}
#catalog .catalog-set{
  max-width:none;
  width:100%;
}
#quests .quest-list,
#quests #set-quest-accordions{
  max-width:none;
  width:100%;
}
.mkt-title-panel,.col-title-panel{flex-shrink:0}
.mkt-sec{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
/* Soft section labels inside the unified card */
.page-shell .ach-list-head,
.mkt-panel .ach-list-head,
.col-panel .ach-list-head{
  border-bottom-color:rgba(255,255,255,.06);
  margin-bottom:.65rem;
  padding-bottom:.55rem
}
.page-shell .quest-section-title{
  margin:1rem 0 .55rem;padding-top:.35rem;
  border-top:1px solid rgba(255,255,255,.05);
  color:#e6d6ad;font-size:.85rem;letter-spacing:.04em
}
.page-shell .quest-section-title:first-child{
  margin-top:0;padding-top:0;border-top:0
}
.mkt-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .55rem;align-items:center;flex-shrink:0}
.mkt-filter-input{
  flex:1 1 140px;min-width:120px;padding:.4rem .55rem;border-radius:8px;border:1px solid #2a314d;
  background:#0f1320;color:var(--text);font-size:.82rem
}
.mkt-filter-select{
  padding:.4rem .5rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);font-size:.8rem
}
.mkt-listing-list{
  display:flex;flex-direction:column;gap:.4rem;flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:thin
}
.mkt-trainer-scroll{
  flex:1;min-height:0;overflow-y:auto;align-content:start;
  scrollbar-width:thin
}
.mkt-listing-row{
  display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;
  background:linear-gradient(135deg,#1a1818,#111217);border:1px solid #3a3140;border-radius:10px;flex-shrink:0
}
.mkt-listing-row:hover{border-color:rgba(255,203,5,.35)}
.mkt-listing-row img{width:40px;height:56px;object-fit:cover;border-radius:6px;border:1px solid #2a314d;flex-shrink:0}
.mkt-listing-meta{flex:1;min-width:0}
.mkt-listing-meta .nm{font-weight:800;font-size:.88rem;color:#f1d078}
.mkt-listing-meta .sub{font-size:.72rem;color:var(--muted);margin-top:.12rem}
.mkt-listing-price{font-weight:800;color:var(--gold);font-size:.95rem;white-space:nowrap}
.ach-item{display:grid;grid-template-columns:56px minmax(0,1fr) 44px;gap:.55rem;align-items:center;background:linear-gradient(135deg,#1a1818,#111217);border:1px solid #3a3140;border-radius:8px;padding:.55rem;cursor:pointer;transition:.15s}
.ach-item:hover,.ach-item.selected{border-color:rgba(255,203,5,.45);box-shadow:0 0 0 1px rgba(244,193,64,.2)}
.ach-item.locked{filter:saturate(.35);opacity:.7}
.ach-item.done{border-color:rgba(74,222,128,.35)}
.ach-badge{width:52px;height:52px;border-radius:8px;border:1px solid #b47c25;background:radial-gradient(circle at 35% 30%,#703929,#2d1a13 60%);display:grid;place-items:center;font-size:1.55rem}
.ach-item h3{font-family:Georgia,serif;color:#f1d078;font-size:.95rem;margin:0 0 .2rem}
.ach-item p{font-size:.72rem;color:#b9b4ae;margin:0 0 .4rem;line-height:1.3}
.ach-item .ach-meter{height:6px;margin:0}
.ach-score{border:1px solid #886021;border-radius:8px;padding:.35rem .15rem;text-align:center;font-size:.65rem;color:#f8d778;font-weight:900;background:#21170e}
.ach-score small{display:block;font-size:.5rem;color:#c7ac73}
.ach-detail{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem;text-align:center;background:radial-gradient(circle at 52% 28%,#2a1510,#121217 55%);align-self:start;min-height:280px}
.ach-detail-empty{color:var(--muted);padding:3rem .5rem;font-size:.9rem}
.ach-detail h2{font:1.35rem Georgia,serif;color:#f2d27b;margin:.4rem 0 .75rem}
.ach-hero-badge{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;margin:0 auto .85rem;border:3px solid #a97220;background:radial-gradient(circle at 42% 30%,#8c4530,#39190f 55%);font-size:3rem;box-shadow:0 0 24px rgba(221,72,32,.2)}
.ach-detail p{color:#d6cfc4;line-height:1.45;font-size:.85rem;margin:0}
.ach-rule{height:1px;background:linear-gradient(90deg,transparent,#a36b23,transparent);margin:1rem 0}
.ach-reward-title{font-size:.68rem;letter-spacing:.12em;color:var(--gold);font-weight:900;text-transform:uppercase}
.ach-rewards{display:flex;justify-content:center;gap:.65rem;margin:.65rem 0 1rem;flex-wrap:wrap}
.ach-reward{font-size:.7rem;color:#d7c299}
.ach-reward b{display:block;color:#f7d05d;font-size:1rem;margin-top:2px}
.ach-claim-btn{border:1px solid #e46428;background:linear-gradient(#d44529,#961b15);padding:.7rem;width:100%;border-radius:8px;font-weight:900;cursor:pointer;color:#fff}
.ach-claim-btn:disabled{opacity:.45;cursor:not-allowed}
.ach-recent{margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.2)}
.ach-recent-head{color:#f4d379;font:1rem Georgia,serif;padding-bottom:.65rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.65rem}
.ach-recent-row{display:flex;gap:.85rem;overflow:auto}
.ach-recent-item{min-width:78px;text-align:center;color:#c9c0ad;font-size:.65rem;background:transparent;border:0;cursor:pointer;padding:0}
.ach-recent-item:hover .mini{border-color:#ffcb05}
.ach-recent-item .mini{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7d452f,#211714 60%);border:2px solid #b37a20;margin:0 auto 6px;font-size:1.25rem}
@media(max-width:980px){.ach-layout{grid-template-columns:1fr}.ach-categories{display:flex;overflow:auto}.ach-cat-btn{min-width:max-content;border-bottom:0}.ach-summary{display:none}}


.zoom-inner{position:relative;width:min(380px,94vw);animation:zoom-in .25s ease-out;display:flex;flex-direction:column;align-items:center}
@keyframes zoom-in{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.zoom-art-wrap{
  position:relative;width:100%;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  line-height:0;
}
/* PSA-style plastic slab — width hugs the card (no side gaps) */
.zoom-art-wrap.is-slab{
  overflow:visible;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  border-radius:8px;
  background:#1a1e28;
  border:3px solid #3d4454;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 40px rgba(0,0,0,.65),
    0 0 20px rgba(255,203,5,.1);
  padding:0;
  line-height:0;
}
.psa-header{
  display:none;
  background:linear-gradient(180deg,#eef0f4 0%,#c8ccd6 100%);
  color:#1a1a1a;
  padding:.4rem .5rem .35rem;
  border-radius:5px 5px 0 0;
  text-align:left;
  line-height:1.12;
}
.zoom-art-wrap.is-slab .psa-header{display:block}
.psa-header .psa-brand{
  font-weight:900;font-size:.68rem;letter-spacing:1.4px;color:#c4122e;margin-bottom:.12rem;
}
.psa-header .psa-set{font-size:.55rem;font-weight:700;color:#333;text-transform:uppercase}
.psa-header .psa-card{font-size:.6rem;font-weight:800;color:#111;margin:.08rem 0}
.psa-header .psa-grade-row{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:.12rem;
}
.psa-header .psa-grade-text{font-size:.68rem;font-weight:800;color:#1a1a1a}
.psa-header .psa-grade-num{font-size:1.25rem;font-weight:900;color:#c4122e;line-height:1}
.zoom-art-wrap.is-slab #zoom-img{
  display:block;
  width:auto;
  max-width:min(300px,82vw);
  max-height:min(48vh,380px);
  height:auto;
  border-radius:0;
  object-fit:contain;
  background:#0d0d10;
}
.psa-footer{
  display:none;
  background:linear-gradient(180deg,#c8ccd6 0%,#eef0f4 100%);
  color:#333;font-size:.55rem;font-weight:700;letter-spacing:.4px;
  text-align:center;padding:.25rem .4rem;border-radius:0 0 5px 5px;
  line-height:1.2;
}
.zoom-art-wrap.is-slab .psa-footer{display:block}
.copy-nav{
  display:none;align-items:center;justify-content:center;gap:.65rem;
  margin-top:.55rem;width:100%;
}
.copy-nav.show{display:flex}
.copy-nav button{
  width:36px;height:36px;border-radius:50%;border:1px solid #2a314d;
  background:#1a2035;color:var(--text);font-size:1.2rem;font-weight:700;
  cursor:pointer;line-height:1;
}
.copy-nav button:hover{border-color:var(--gold);color:var(--gold)}
.copy-nav button:disabled{opacity:.35;cursor:default}
.copy-nav-label{
  font-size:.82rem;font-weight:700;color:var(--muted);min-width:7.5rem;text-align:center;
}
.copy-nav-label strong{color:var(--gold)}
.zoom-inner img#zoom-img{width:100%;height:auto;max-height:min(40vh,300px);object-fit:contain;border-radius:0;box-shadow:none;display:block}
/* Holo sweep stays ON the card surface (clipped by .zoom-art-wrap) */
.zoom-art-wrap.holo-force::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,
    transparent 28%,
    rgba(255,255,255,.4) 45%,
    rgba(255,203,5,.28) 50%,
    rgba(255,255,255,.4) 55%,
    transparent 72%);
  background-size:250% 100%;
  animation:holo-sweep 2.8s ease-in-out infinite;
  mix-blend-mode:soft-light;opacity:.9;
}
.zoom-art-wrap.rare-force::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,transparent 40%,rgba(96,165,250,.2) 50%,transparent 60%);
  background-size:200% 200%;
  animation:rare-shimmer 4s ease-in-out infinite;
}
.zoom-art-wrap.uncommon-force{
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(74,222,128,.25);
}
.zoom-art-wrap.rare-force{
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(96,165,250,.35);
}
.zoom-art-wrap.holo-force{
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,203,5,.45);
}
#zoom-label{text-align:center;margin-top:.45rem;color:var(--gold);font-weight:700;font-size:.95rem;line-height:1.2}
.zoom-meta{width:100%;margin-top:.4rem;background:var(--card-bg);border:1px solid #2a314d;border-radius:10px;padding:.55rem .85rem;text-align:center}
.zoom-meta .zm-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.12rem 0;font-size:.85rem}
.zoom-meta .zm-row span:first-child{color:var(--muted)}
.zoom-meta .zm-price{color:var(--gold);font-weight:800;font-size:1.05rem}
.zoom-meta .zm-owned{color:#fff;font-weight:700}
.zoom-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.55rem;width:100%}
.zoom-actions .btn{padding:.45rem .85rem;font-size:.82rem}
.zoom-actions .btn:disabled{opacity:.4;cursor:not-allowed}
.btn-close-modal{background:#2a314d;border:1px solid #3a4560;color:var(--text);box-shadow:none}
.btn-close-modal:hover{background:#3a4560;border-color:#5a6480}

/* Daily + Quests */
.daily-row{margin-top:.85rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.btn-daily{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 4px 14px rgba(34,197,94,.35)}
.btn-daily:hover{background:linear-gradient(90deg,#15803d,#16a34a)}
.btn-daily:disabled{opacity:.45;cursor:not-allowed;background:#2a314d;box-shadow:none}
.daily-note{font-size:.78rem;color:var(--muted)}
.quest-list{display:flex;flex-direction:column;gap:.45rem;max-width:none;width:100%;margin:0}
.quest-card{background:var(--card-bg);border:1px solid #2a314d;border-radius:10px;padding:.55rem .85rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.quest-card.claimable{border-color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.25)}
.quest-card.claimed{opacity:.55}
.quest-info h4{font-size:.95rem;margin-bottom:.15rem}
.quest-info p{font-size:.8rem;color:var(--muted);margin-bottom:.35rem}
.quest-progress{height:6px;background:#1a2035;border-radius:4px;overflow:hidden;width:min(220px,100%);margin-top:.25rem}
.quest-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .3s}
.quest-meta{font-size:.75rem;color:var(--muted);margin-top:.25rem}
.quest-reward{text-align:right}
.quest-reward .rew{color:var(--gold);font-weight:800;font-size:.9rem;margin-bottom:.35rem}
.quest-section-title{color:var(--gold);font-size:1rem;margin:1.25rem 0 .65rem}

.tcg-card{cursor:pointer}
.tcg-card.missing{cursor:default}

/* Last pack review */
.last-pack{display:none;margin-top:1.25rem;padding:1rem;background:var(--card-bg);border:1px solid #2a314d;border-radius:12px;text-align:center}
.last-pack.visible{display:block}
.last-pack h3{color:var(--gold);font-size:1rem;margin-bottom:.35rem}
.last-pack .lp-hint{color:var(--muted);font-size:.8rem;margin-bottom:.75rem}
.last-pack-grid{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.lp-card{width:72px;height:100px;border-radius:8px;border:2px solid #2a314d;background:#111;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;padding:0}
.lp-card img{width:100%;height:100%;object-fit:cover;display:block}
.lp-card:hover{transform:scale(1.12);border-color:var(--gold);box-shadow:0 0 14px rgba(255,203,5,.4);z-index:2}
.lp-card.new-pull{box-shadow:0 0 0 2px var(--accent)}
.last-pack .lp-actions{margin-top:.85rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* Binder */
.binder-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.binder-page-label{color:var(--gold);font-weight:700;font-size:1rem}
.binder-nav{display:flex;gap:.45rem;align-items:center}
.binder-nav .btn{padding:.4rem .85rem;font-size:.82rem}
.binder-covers{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;padding:.5rem 0 1rem}
.set-cover{
  width:180px;cursor:pointer;text-align:center;transition:transform .2s;
}
.set-cover:hover{transform:translateY(-6px)}
.set-cover-book{
  width:180px;height:240px;border-radius:8px 14px 14px 8px;position:relative;overflow:hidden;
  border:2px solid #3a4560;box-shadow:8px 10px 28px rgba(0,0,0,.55);
  background:linear-gradient(145deg,#2a1a0a,#0d1020 55%,#1a2035);
}
.set-cover-book::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:14px;
  background:linear-gradient(90deg,#5a4030,#2a1a0a);border-right:1px solid #0006;
}
.set-cover-book img{
  position:absolute;left:22px;right:10px;top:14px;height:155px;width:auto;max-width:calc(100% - 32px);
  object-fit:contain;margin:0 auto;display:block;border-radius:4px;opacity:.95;
}
.set-cover-book .sc-title{
  position:absolute;left:18px;right:8px;bottom:14px;text-align:center;
  font-weight:800;font-size:.92rem;color:var(--gold);letter-spacing:1px;
  text-shadow:0 2px 6px #000;
}
.set-cover-book .sc-spine-label{
  position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-90deg);
  font-size:.55rem;font-weight:700;color:#c4a574;letter-spacing:2px;width:120px;text-align:center;pointer-events:none;
}
.set-cover .sc-meta{margin-top:.55rem;color:var(--muted);font-size:.8rem}
.set-cover .sc-meta strong{color:var(--text)}
.set-cover.locked{opacity:.45;cursor:default}
.set-cover.locked:hover{transform:none}
.binder-page{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:720px;margin:0 auto;background:linear-gradient(160deg,#1a2035,#12182a);border:2px solid #2a314d;border-radius:14px;padding:1rem;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.binder-slot{aspect-ratio:2.5/3.5;border-radius:10px;border:2px dashed #3a4560;background:#0d1020;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.binder-slot.owned{border-style:solid;border-color:#5a6480;cursor:pointer;background:#111}
.binder-slot.owned:hover{transform:translateY(-3px);border-color:var(--gold)}
.binder-slot img{width:100%;height:100%;object-fit:cover;display:block}
.binder-slot .bs-art{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
.binder-slot .bs-art img{width:100%;height:100%;object-fit:cover;display:block}
.binder-slot .bs-num{font-size:.7rem;color:var(--muted);font-weight:700}
.binder-slot .bs-name{font-size:.65rem;color:#8b93a7;text-align:center;padding:0 4px;margin-top:2px;line-height:1.15}
.binder-slot .bs-count{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:800;padding:1px 5px;border-radius:4px;z-index:3}
.binder-slot.missing .bs-placeholder{font-size:1.6rem;opacity:.35}
.binder-progress{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.75rem}
@media(max-width:520px){
  .binder-page{grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.55rem}
  .lp-card{width:56px;height:78px}
}


/* Quick trade modal */
.trade-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:320;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);overflow:hidden}
.trade-modal.open{display:flex}
.trade-modal-inner{position:relative;width:min(440px,95vw);background:var(--card-bg);border:1px solid #2a314d;border-radius:14px;padding:1.15rem 1.25rem;animation:zoom-in .22s ease-out;max-height:min(90vh,640px);overflow-y:auto;overflow-x:hidden}
.trade-modal-inner h3{color:var(--gold);margin-bottom:.25rem;font-size:1.05rem}
.trade-modal-inner .tm-hint{color:var(--muted);font-size:.8rem;margin-bottom:.85rem}
.tm-give{display:flex;align-items:center;gap:.75rem;background:#0d1020;border:1px solid #2a314d;border-radius:10px;padding:.55rem .75rem;margin-bottom:.75rem}
.tm-give img{width:44px;height:62px;object-fit:cover;border-radius:6px;border:2px solid #3a4560}
.tm-give .tm-give-info{flex:1}
.tm-give .tm-give-name{font-weight:700;font-size:.92rem}
.tm-give .tm-give-meta{color:var(--muted);font-size:.75rem;margin-top:.12rem}
.tm-label{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:.3rem}
.tm-want-row{display:flex;gap:.4rem;margin-bottom:.55rem}
.tm-want-row select{flex:1;padding:.4rem;border-radius:6px;background:#1a2035;color:var(--text);border:1px solid #2a314d;font-size:.82rem}
.tm-want-chips{display:flex;flex-wrap:wrap;gap:.3rem;min-height:26px;margin-bottom:.7rem}
.tm-result{display:none;margin-top:.4rem;padding:.65rem;background:#0d1020;border-radius:8px;border:1px dashed #3a4560}
.tm-result label,.tm-accept label{display:block;font-size:.72rem;color:var(--muted);margin-bottom:.25rem}
.tm-result textarea,.tm-accept textarea{width:100%;background:#1a2035;color:var(--text);border:1px solid #2a314d;border-radius:6px;padding:.4rem;font-family:monospace;font-size:.7rem;resize:none;height:58px}
.tm-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;margin-top:.45rem}
.tm-divider{border:none;border-top:1px solid #2a314d;margin:1rem 0 .85rem}
.tm-accept{margin-top:.1rem}
.tm-accept .tm-hint{margin-bottom:.45rem}



.trade-sections{display:flex;flex-direction:column;gap:1.25rem}
.trade-box{background:var(--card-bg);border:1px solid #2a314d;border-radius:12px;padding:1.1rem}
.trade-box h3{color:var(--gold);margin-bottom:.35rem;font-size:1rem}
.trade-hint{color:var(--muted);font-size:.82rem;margin-bottom:.75rem}
.trade-pick-row{display:flex;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.trade-col{flex:1;min-width:140px}
.trade-col-title{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.5px}
.trade-picks{display:flex;flex-wrap:wrap;gap:.45rem;min-height:40px;margin-bottom:.4rem}
.live-card-pick{
  position:relative;width:72px;border-radius:8px;overflow:hidden;
  border:2px solid #2a314d;background:#0f1320;cursor:default;
  display:flex;flex-direction:column;align-items:center;
}
.live-card-pick[onclick]{cursor:pointer}
.live-card-pick[onclick]:hover{border-color:var(--accent)}
.live-card-pick img{width:100%;height:96px;object-fit:cover;display:block}
.live-card-meta{padding:3px 4px;text-align:center;font-size:.65rem;line-height:1.2;width:100%}
.live-card-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-card-meta span{color:var(--gold);font-weight:700}
.live-remove{
  position:absolute;top:2px;right:2px;background:rgba(0,0,0,.75);color:#f87171;
  width:18px;height:18px;border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center;
  font-weight:800;
}
.trade-chip{background:#1a2035;border:1px solid #2a314d;border-radius:8px;padding:.3rem .5rem;font-size:.78rem;display:flex;align-items:center;gap:.35rem}
.trade-chip button{background:transparent;border:none;color:#f66;cursor:pointer;font-size:.9rem;line-height:1}
.trade-select{width:100%;padding:.4rem;border-radius:6px;background:#1a2035;color:var(--text);border:1px solid #2a314d;font-size:.82rem;margin-bottom:.35rem}
.trade-add-btn{padding:.35rem .7rem;font-size:.8rem}
.trade-arrow{font-size:1.5rem;color:var(--gold);padding-top:1.5rem;font-weight:800}
.code-box{margin-top:.8rem;padding:.8rem;background:#0d1020;border-radius:8px;border:1px dashed #3a4560}
.code-box label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.code-box textarea{width:100%;background:#1a2035;color:var(--text);border:1px solid #2a314d;border-radius:6px;padding:.5rem;font-family:monospace;font-size:.75rem;resize:vertical}


.pack-visual{width:270px;height:378px;margin:0 auto 1.2rem;background:#000;border:none;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:none;cursor:pointer;position:relative;overflow:hidden;user-select:none;transition:transform .2s;padding:0;perspective:800px}
.pack-art-img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;border-radius:11px;background:#000}
.pack-tear{z-index:6}

/* Pack open interaction */
.pack-visual.swipeable{
  cursor:grab;touch-action:none;overflow:hidden;
}
.pack-visual.swipeable:active,.pack-visual.swiping{cursor:grabbing}
.pack-visual.swiping{transform:none!important}
.pack-body{
  position:absolute;inset:0;border-radius:11px;overflow:hidden;z-index:1;background:#000;pointer-events:none;
}
.pack-body .pack-art-img{
  width:100%;height:100%;object-fit:contain;display:block;border-radius:11px;background:#000;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.pack-shine{ display:none !important; }
.pack-visual.ripping-now .pack-shine{opacity:0}
.pack-tear-line{
  position:absolute;left:0;top:18%;height:3px;width:0;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,#ffe08a 50%,#e3350d 100%);
  box-shadow:0 0 12px rgba(255,220,150,.9);border-radius:2px;
}
.pack-tear-flash{
  position:absolute;left:0;right:0;top:0;height:22%;z-index:5;pointer-events:none;
  opacity:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
}
.pack-visual.ripping-now .pack-tear-flash{opacity:1;transition:opacity .15s}
.pack-swipe-hint{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none;
  background:rgba(0,0,0,.72);color:#fff;font-size:.65rem;font-weight:700;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
  animation:swipe-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes swipe-hint-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.pack-visual.ripping-now .pack-swipe-hint{opacity:0!important}
.pack-visual.pack-opening .pack-body{
  animation:pack-burst .55s ease-out forwards;
}
@keyframes pack-burst{
  0%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}
  40%{transform:scale(1.05) rotate(2deg);opacity:1;filter:brightness(1.25)}
  100%{transform:scale(1.2) rotate(-8deg);opacity:0;filter:brightness(1.6)}
}


/* Market */
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem}
.market-card{background:var(--card-bg);border:1px solid #2a314d;border-radius:12px;padding:.9rem;display:flex;flex-direction:column;gap:.55rem}
.market-card .m-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.market-card .m-trainer{font-weight:700;font-size:.88rem;color:var(--gold)}
.market-card .m-type{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.market-deal{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.market-side{flex:1;min-width:90px;text-align:center}
.market-side img{width:56px;height:78px;object-fit:cover;border-radius:6px;border:2px solid #3a4560;background:#111}
.market-side .m-name{font-size:.72rem;margin-top:.25rem;line-height:1.2}
.market-side .m-cash{font-size:1.1rem;font-weight:800;color:#22c55e;padding:.8rem 0}
.market-arrow{color:var(--muted);font-size:1.1rem;font-weight:700}
.market-card .m-actions{margin-top:.25rem}
.market-card.done{opacity:.45;pointer-events:none}

.market-card.needed{border-color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.35),0 0 18px rgba(34,197,94,.15)}
.market-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,203,5,.4),0 0 20px rgba(255,203,5,.18);grid-column:1 / -1}
.market-card .m-badge{font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
.m-badge.need{background:#166534;color:#bbf7d0}
.m-badge.want{background:#1e3a5f;color:#93c5fd}
.m-badge.feat{background:#5a4a0a;color:var(--gold)}
.market-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.market-toolbar select{background:#1a2035;color:var(--text);border:1px solid #2a314d;border-radius:8px;padding:.4rem .6rem;font-size:.82rem}
.market-timer{font-size:.82rem;color:var(--muted)}
.market-timer strong{color:var(--gold)}
.market-history{margin-top:1.25rem;background:var(--card-bg);border:1px solid #2a314d;border-radius:12px;padding:.85rem 1rem}
.market-history h3{font-size:.95rem;color:var(--gold);margin-bottom:.5rem}
.market-history ul{list-style:none;padding:0;margin:0;max-height:160px;overflow-y:auto}
.market-history li{font-size:.78rem;color:var(--muted);padding:.3rem 0;border-bottom:1px solid #1a2035}
.market-history li span{color:var(--text)}
.market-side{cursor:pointer}
.market-side:hover img{border-color:var(--gold)}


/* ===== App shell: sidebar + home ===== */
body.app-body{display:flex;height:100vh;max-height:100vh;overflow:hidden}
.app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:260px;z-index:50;
  background:#07070a;
  border-right:1px solid rgba(227,53,13,.45);
  display:flex;flex-direction:column;
  transform:translateX(0);
  transition:transform .28s ease;
  overflow:hidden;
}
.app-sidebar-brand{
  min-height:72px;box-sizing:border-box;
  padding:.75rem 1.2rem .8rem;
  border-bottom:1px solid rgba(227,53,13,.5);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem;cursor:pointer;
}
.app-sidebar-brand .brand-logo{
  display:none;width:76px;height:76px;object-fit:contain;border-radius:50%;
  background:#000;box-shadow:0 0 0 4px #08090d,0 0 0 5px rgba(255,255,255,.18),0 8px 22px rgba(227,53,13,.28);
}
.app-sidebar-brand .brand-text{
  font-weight:800;font-size:1.1rem;line-height:1.1;color:var(--accent);
  letter-spacing:0.5px;
}
.app-sidebar-brand .brand-text span{color:var(--gold)}
.app-sidebar-brand .brand-disclaimer{
  font-size:.58rem;font-weight:600;color:var(--muted);line-height:1.25;
  max-width:230px;
}
.app-sidebar-stats{
  padding:.85rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;
  border-bottom:none;font-size:.82rem;color:var(--muted);
  background:rgba(255,255,255,.02);
}
.app-sidebar-stats strong{color:var(--gold)}
.app-nav{
  flex:1;overflow-y:auto;padding:.75rem .55rem;display:flex;flex-direction:column;gap:.2rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.app-nav::-webkit-scrollbar{width:0;height:0;display:none}
.app-nav-label{
  font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;padding:.55rem .65rem .25rem;
}
.app-nav-btn{
  display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
  background:transparent;border:none;color:var(--text);
  padding:.6rem .75rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.92rem;
  transition:background .15s,color .15s;
}
.app-nav-btn:hover{background:rgba(255,255,255,.05)}
.app-nav-btn.active{background:rgba(227,53,13,.18);color:#fff;box-shadow:none}
.app-nav-btn .nav-ico{width:1.25rem;text-align:center;opacity:.9}
.app-nav-sub{
  display:none;flex-direction:column;gap:.12rem;
  padding:.1rem 0 .25rem 1.55rem;
}
.app-nav-sub.open{display:flex}
.app-nav-subbtn{
  background:transparent;border:none;color:var(--muted);text-align:left;
  padding:.35rem .55rem;border-radius:8px;font-size:.82rem;cursor:pointer;
}
.app-nav-subbtn:hover{background:rgba(255,255,255,.05);color:var(--text)}
.app-nav-subbtn.active{color:var(--gold);background:rgba(255,203,5,.08)}
.open-set-rail{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;
}
.open-set-rail button{
  background:#1a2035;border:1px solid #2a314d;color:var(--muted);
  padding:.35rem .7rem;border-radius:8px;font-size:.8rem;cursor:pointer;font-weight:600;
}
.open-set-rail button.active{border-color:var(--gold);color:var(--gold);background:rgba(255,203,5,.1)}
.open-set-rail button:disabled{opacity:.4;cursor:not-allowed}
.app-sidebar-foot{padding:.75rem 1rem;border-top:none;font-size:.7rem;color:var(--muted);opacity:.85}
.app-main{flex:1;margin-left:260px;min-width:0;display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;background:#000}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 1.5rem;background:#07070a;
  border-bottom:1px solid rgba(227,53,13,.5);position:sticky;top:0;z-index:30;
  height:72px;box-sizing:border-box;
}
.app-topbar .top-title{font-weight:800;font-size:1.05rem;color:var(--gold)}
.menu-toggle{
  display:none;background:var(--card-bg);border:1px solid #2a314d;color:var(--text);
  width:40px;height:40px;border-radius:8px;cursor:pointer;font-size:1.2rem;font-weight:700;
}
.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45;
}
.sidebar-backdrop.show{display:block}
.app-content{
  flex:1;min-height:0;max-width:1600px;width:100%;margin:0 auto;
  padding:1rem 1.25rem;overflow-x:hidden;overflow-y:auto;
}
/* Home dashboard */
#home.panel.active{display:block}
#home{position:relative;min-height:100%;padding:0;background:transparent;margin:0;width:100%;max-width:none;box-sizing:border-box}
.home-dashboard{padding:.25rem 0 1.5rem;color:var(--text)}
.home-hero{position:relative;padding:1.4rem 0 1.1rem;margin-bottom:1rem;overflow:hidden}
/* home-hero:after removed — no card-back watermark */
.home-hero-copy{position:relative;z-index:1;max-width:720px}
.home-kicker{display:block;color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:1.35px;text-transform:uppercase;margin-bottom:.45rem}
.home-hero h1{margin:0 0 .4rem;font-size:clamp(1.75rem,3vw,2.55rem);letter-spacing:-.035em;line-height:1.05;color:#fff}
.home-hero p{margin:0;color:var(--muted);font-size:.98rem;max-width:540px;line-height:1.55}
.home-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.05rem}
.home-actions .btn{min-width:155px}
.home-actions .btn-secondary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;padding:.68rem 1rem}
.home-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:.85rem}
.home-stat-card{min-height:91px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.085);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.018));display:flex;align-items:center;gap:.75rem;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.home-stat-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.18rem;background:rgba(255,203,5,.12);border:1px solid rgba(255,203,5,.22)}
.home-stat-card.packs .home-stat-icon{background:rgba(227,53,13,.13);border-color:rgba(227,53,13,.28)}
.home-stat-card.collection .home-stat-icon{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.3)}
.home-stat-label{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.65px}
.home-stat-value{margin-top:.12rem;font-weight:850;font-size:1.45rem;color:#fff;line-height:1.05}
.home-stat-value.gold{color:var(--gold)} .home-stat-value.purple{color:#b584ff}
.home-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(270px,.85fr);gap:.85rem;align-items:start}
.home-card{background:linear-gradient(145deg,rgba(21,23,30,.94),rgba(8,9,13,.96));border:1px solid rgba(255,255,255,.08);border-radius:15px;box-shadow:0 12px 32px rgba(0,0,0,.2);overflow:hidden}
.home-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.home-card-head h2{font-size:.98rem;color:#fff;margin:0}.home-card-head h2 span{color:var(--gold);margin-right:.35rem}.home-link{appearance:none;border:none;background:transparent;color:var(--gold);font-weight:750;cursor:pointer;font-size:.77rem;padding:.6rem .4rem;min-height:40px;display:inline-flex;align-items:center}
.home-feature{position:relative;min-height:245px;padding:1.45rem;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 74% 40%,rgba(227,53,13,.21),transparent 38%),linear-gradient(118deg,#11131a 0%,#161116 50%,#0d0d11 100%)}
.home-feature-copy{position:relative;z-index:2;max-width:43%}.home-feature h2{margin:0 0 .42rem;font-size:2rem;line-height:1;color:#fff;letter-spacing:-.04em}.home-feature p{color:#b7bbca;line-height:1.5;margin:0 0 1rem;font-size:.9rem}.home-feature .btn{min-width:150px}
.home-pack-art{position:absolute;z-index:1;right:1.7rem;bottom:-.4rem;width:55%;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:-.4rem;pointer-events:none}.home-pack-art img{width:30%;max-height:213px;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.55))}.home-pack-art img:nth-child(1){transform:rotate(-10deg) translateX(17px)}.home-pack-art img:nth-child(2){z-index:2;transform:translateY(-11px)}.home-pack-art img:nth-child(3){transform:rotate(10deg) translateX(-17px)}
.home-pack-art.mystery-mode{pointer-events:auto;align-items:center;justify-content:center;right:1.2rem;bottom:.35rem;width:34%}
.home-mystery-box{
  width:min(150px,28vw);cursor:pointer;pointer-events:auto;
  background:transparent!important;border:none!important;padding:0;margin:0;
  box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;
  filter:drop-shadow(0 10px 22px rgba(255,203,5,.3));
  animation:mystery-box-shake 2.4s ease-in-out infinite;
  transition:transform .2s ease;
}
.home-mystery-box:hover{transform:scale(1.05);animation-play-state:paused}
.home-mystery-box:focus{outline:none}
.home-mystery-box img{width:100%;height:auto;display:block;object-fit:contain;max-height:160px;background:transparent}
@keyframes mystery-box-shake{
  0%,100%{transform:rotate(0deg) translateY(0)}
  8%{transform:rotate(-4deg) translateY(-2px)}
  16%{transform:rotate(4deg) translateY(0)}
  24%{transform:rotate(-3deg) translateY(-1px)}
  32%{transform:rotate(3deg)}
  40%{transform:rotate(0deg)}
  70%{transform:rotate(0deg) translateY(0)}
}
.home-feature.mystery-live{
  background:radial-gradient(circle at 78% 42%,rgba(255,203,5,.22),transparent 40%),linear-gradient(118deg,#14120a 0%,#1a1210 50%,#0d0d11 100%);
  border-color:rgba(255,203,5,.35);
}
.home-upcoming{display:none}
.home-upcoming.visible{display:block}
#home-feature-card.gpc-feature-host .home-feature-copy{max-width:48%}
#home-rare-showcase .gpc-card{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,203,5,.25);border-radius:12px;
  pointer-events:auto;box-shadow:0 12px 32px rgba(0,0,0,.35);
}
#home-rare-showcase .gpc-card .home-card-head{padding:.65rem .85rem 0}
#home-rare-showcase .gpc-card .gpc-body{padding:.5rem .85rem .85rem}

.home-upcoming-list{display:flex;flex-direction:column;gap:.35rem}
.home-upcoming-row{
  display:flex;align-items:center;gap:.65rem;padding:.45rem .55rem;border-radius:9px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);
}
.home-upcoming-row .eu-ico{font-size:1.25rem;flex-shrink:0;width:1.6rem;text-align:center}
.home-upcoming-row .eu-body{flex:1;min-width:0}
.home-upcoming-row .eu-title{font-weight:700;font-size:.88rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-upcoming-row .eu-when{font-size:.75rem;color:var(--muted)}
.home-upcoming-row .eu-tag{
  flex-shrink:0;font-size:.65rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;border:1px solid rgba(255,203,5,.35);color:var(--gold);background:rgba(255,203,5,.08);
}
.home-upcoming-row.live .eu-tag{border-color:rgba(74,222,128,.45);color:#4ade80;background:rgba(74,222,128,.1)}

#mystery-box-modal.trade-modal{display:none;z-index:120}
#mystery-box-modal.open{display:flex}
#tradeup-modal.trade-modal{display:none;z-index:120}
#tradeup-modal.open{display:flex}
.tu-tile{cursor:pointer}
.tu-tile.empty{opacity:.35;border-style:dashed}
.tu-tile-wrap{display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;width:100%}
.tu-tile-wrap.tu-locked{cursor:not-allowed}
.tu-tile-wrap .mini-card.tu-tile{width:100%;max-width:120px;height:150px;border-radius:8px;position:relative}
.tu-tile-badge{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.78);color:#fff;font-size:.68rem;font-weight:700;padding:1px 6px;border-radius:9px;line-height:1.4;pointer-events:none}
.tu-tile-name{font-size:.76rem;color:var(--text);text-align:center;line-height:1.2;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tu-tile-meta{font-size:.7rem;color:var(--gold);text-align:center}
.tu-browse-sticky{flex:0 0 auto;background:var(--card-bg);padding:1.1rem 1.1rem .85rem}
.tu-tile-wrap.tu-compact .mini-card.tu-tile{max-width:76px;height:100px}
.tu-tile-wrap.tu-compact .tu-tile-name{font-size:.64rem;max-width:76px}
.tu-tile-wrap.tu-compact .tu-tile-meta{display:none}
.tu-layout{display:flex;flex:1;min-height:0}
.tu-browse{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:1.25rem 1.35rem}
.tu-browse .trade-box{flex:1;min-height:0;display:flex;flex-direction:column}
#tu-collection-list{flex:1;min-height:0;overflow-y:auto}
.tu-panel{width:230px;flex:0 0 230px;border-left:1px solid #2a314d;padding:1.1rem 1.1rem 1.25rem;display:flex;flex-direction:column;overflow-y:auto;background:#0e0f14}
.tu-panel-head{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.7rem}
.tu-picks-col{display:flex;flex-direction:column;gap:.6rem;min-height:64px}
.tu-picks-col .tu-tile-wrap{flex-direction:row;align-items:center;gap:.55rem;width:100%}
.tu-picks-col .mini-card.tu-tile{width:44px;height:60px;flex:0 0 44px;max-width:44px}
.tu-picks-col .tu-tile-name{max-width:none;text-align:left;flex:1;white-space:normal}
.tu-picks-col .tu-tile-meta{display:none}
.tu-rarity-pill{padding:.3rem .7rem;border-radius:999px;border:1px solid #2a314d;background:#1a2035;color:var(--muted);font-size:.75rem;font-weight:600;cursor:pointer;transition:.15s}
.tu-rarity-pill:hover{border-color:var(--gold);color:var(--text)}
.tu-rarity-pill.active{background:var(--gold);border-color:var(--gold);color:#1a1200}
.tu-rarity-pill:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.tu-reward-name{margin-top:.7rem;font-weight:700;color:#fff;font-size:1.05rem}
.tu-reward-rarity{font-size:.85rem;color:var(--gold);margin-top:.15rem}
.tu-reward-hint{margin-top:1rem;font-size:.75rem;color:var(--muted)}
@media (max-width:700px){
  .tu-layout{flex-direction:column;min-height:0}
  .tu-browse{padding:1rem;min-height:0}
  .tu-panel{order:-1;position:sticky;top:0;z-index:6;width:auto;flex:0 0 auto;border-left:none;border-bottom:1px solid #2a314d;overflow-y:visible;max-height:none;box-shadow:0 6px 14px rgba(0,0,0,.35)}
  .tu-picks-col{flex-direction:row;flex-wrap:wrap}
  .tu-picks-col .tu-tile-wrap{width:auto;flex:0 0 auto}
  .tm-actions{margin-top:.75rem !important}
}
#gpc-modal.trade-modal{display:none;z-index:420}
#gpc-modal.open{display:flex}
.gpc-modal-inner{
  position:relative;max-width:380px;width:100%;text-align:center;
  padding:1.25rem 1.25rem 1.35rem!important;
}
.gpc-modal-x{
  position:absolute;top:.55rem;right:.65rem;background:transparent;border:none;
  color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .45rem;
}
.gpc-modal-x:hover{color:#fff}
.gpc-modal-hero{margin:0 auto .65rem;width:120px;height:120px}
.gpc-modal-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(168,85,247,.45))}
.gpc-modal-title{margin:0 0 .3rem;color:var(--gold);font-size:1.15rem}
.gpc-modal-sub{margin:0 0 1rem;color:var(--muted);font-size:.82rem;line-height:1.45}
.gpc-modal-stats{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.65rem;text-align:left;
}
.gpc-modal-count{font-size:2.4rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.03em}
.gpc-modal-label{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:.2rem}
.gpc-modal-prize{
  font-size:.78rem;font-weight:800;color:#4ade80;background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.28);padding:.35rem .6rem;border-radius:999px;white-space:nowrap;
}
.gpc-modal-last{
  text-align:left;font-size:.78rem;color:var(--muted);line-height:1.45;
  padding:.55rem .65rem;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);margin-bottom:.75rem;
}
.gpc-modal-last strong{color:#fff}
.gpc-modal-last .gpc-chase-name{color:var(--gold)}
.gpc-modal-guess{display:flex;gap:.45rem;align-items:center;margin-bottom:.4rem}
.gpc-modal-guess input{
  flex:1;min-width:0;padding:.55rem .65rem;border-radius:8px;border:1px solid #2a314d;
  background:#0f1320;color:var(--text);font-size:.95rem;font-weight:700;
}
.gpc-modal-guess input:focus{outline:none;border-color:var(--gold)}
.gpc-modal-guess .btn{padding:.55rem .85rem;font-size:.85rem;white-space:nowrap}
.gpc-modal-status{font-size:.76rem;color:var(--muted);text-align:left;min-height:1.2em;line-height:1.35}
.gpc-modal-status.mine{color:#a5b4fc}
.gpc-modal-signin{font-size:.78rem;color:var(--muted);margin-top:.35rem}
.mb-modal-art{width:140px;height:auto;display:block;margin:0 auto 1rem;filter:drop-shadow(0 8px 20px rgba(255,203,5,.3))}
.mb-modal-details{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0 0 1rem;text-align:left}
.mb-modal-details strong{color:#fff}
.mb-modal-price{font-size:1.6rem;font-weight:800;color:var(--gold);text-align:center;margin:0 0 .85rem}
.home-lower-grid{display:grid;grid-template-columns:minmax(215px,.72fr) minmax(0,1.28fr);gap:.85rem;margin-top:.85rem}.home-progress{padding:1rem}.home-progress-body{display:flex;align-items:center;gap:.9rem;padding:.7rem 0 .2rem}.home-ring{--progress:0;position:relative;width:93px;height:93px;flex:0 0 93px;border-radius:50%;background:conic-gradient(#a855f7 calc(var(--progress) * 1%),rgba(255,255,255,.1) 0)}.home-ring:after{content:'';position:absolute;inset:8px;border-radius:50%;background:#121319}.home-ring b{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-size:1.22rem;color:#fff}.home-progress-copy strong{display:block;font-size:1.25rem}.home-progress-copy span{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:.2rem}.home-progress-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:.6rem}.home-progress-bar i{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#c084fc);border-radius:inherit}
.home-pulls{padding:0 1rem 1rem}.home-pulls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;padding-top:.85rem}.home-pull{aspect-ratio: .71;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,#23263a,#11131c);position:relative;cursor:pointer}.home-pull img{width:100%;height:100%;object-fit:cover}.home-pull-fallback{height:100%;display:grid;place-items:center;font-size:1.8rem}.home-pull-new{position:absolute;top:4px;left:4px;font-size:.54rem;font-weight:900;color:#fff;background:#e3350d;border-radius:4px;padding:2px 4px;letter-spacing:.4px}
.home-side-card{padding-bottom:.85rem}.home-quest{padding:1rem}.home-quest-row{display:flex;gap:.75rem;align-items:center}.home-quest-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-size:1.35rem;color:var(--gold);border:2px solid rgba(255,203,5,.75);background:rgba(255,203,5,.08)}.home-quest-title{font-size:.91rem;font-weight:800;color:#fff}.home-quest-copy{font-size:.75rem;color:var(--muted);line-height:1.35;margin-top:.15rem}.home-quest-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);margin:1rem 0 .4rem;overflow:hidden}.home-quest-bar i{display:block;height:100%;width:60%;border-radius:inherit;background:linear-gradient(90deg,#d89413,var(--gold))}.home-quest-foot{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}.home-quest-foot strong{color:var(--gold)}.home-quest-reward{margin-top:.65rem;padding:.45rem .55rem;border-radius:7px;background:rgba(255,203,5,.08);border:1px solid rgba(255,203,5,.18);font-size:.74rem;font-weight:700;color:var(--gold)}
/* Guess the Pull Count */
.gpc-card{padding:0 0 .85rem}
.gpc-body{padding:.85rem 1rem 1rem}
.gpc-count-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.gpc-count{font-size:2.1rem;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1}
.gpc-count span{color:var(--gold)}
.gpc-prize{font-size:.78rem;font-weight:800;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.28);padding:.28rem .55rem;border-radius:999px;white-space:nowrap}
.gpc-label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.65rem}
.gpc-last{font-size:.78rem;color:var(--muted);line-height:1.4;margin-bottom:.75rem;padding:.5rem .6rem;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.gpc-last strong{color:#fff}
.gpc-last .gpc-chase-name{color:var(--gold)}
.gpc-guess-row{display:flex;gap:.4rem;align-items:center;margin-bottom:.45rem}
.gpc-guess-row input{flex:1;min-width:0;padding:.48rem .6rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);font-size:.9rem;font-weight:700}
.gpc-guess-row input:focus{outline:none;border-color:var(--gold)}
.gpc-guess-row .btn{padding:.48rem .75rem;font-size:.82rem;white-space:nowrap}
.gpc-status{font-size:.76rem;color:var(--muted);line-height:1.35;min-height:1.1em}
.gpc-status.mine{color:#a5b4fc}
.gpc-status.win{color:#4ade80;font-weight:700}
.gpc-signin{font-size:.78rem;color:var(--muted);text-align:center;padding:.35rem 0}
.home-mini-leaderboard{list-style:none;margin:0;padding:0 .85rem}.home-mini-leaderboard li{display:flex;align-items:center;gap:.55rem;padding:.65rem .1rem;border-bottom:1px solid rgba(255,255,255,.07);font-size:.8rem}.home-mini-leaderboard li:last-child{border-bottom:none}.home-rank{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#2d2212;color:var(--gold);font-size:.65rem;font-weight:850}.home-mini-leaderboard strong{margin-left:auto;color:var(--gold);font-size:.76rem}.home-leader-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e6e7eb}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}.home-feature-copy{max-width:48%}.home-side-card{display:grid;grid-template-columns:1fr 1fr;padding-bottom:0}.home-side-card .home-card-head{grid-column:1/-1}.home-side-card .home-mini-leaderboard{padding-bottom:.85rem}}
@media(max-width:620px){.home-dashboard{padding-top:0}.home-stat-grid{grid-template-columns:1fr;gap:.5rem}.home-stat-card{min-height:72px}.home-grid,.home-lower-grid{grid-template-columns:1fr}.home-feature{min-height:285px;align-items:flex-start}.home-feature-copy{max-width:72%}.home-pack-art{right:-.5rem;width:78%;opacity:.63}.home-pulls-grid{gap:.35rem}.home-side-card{display:block}/* home-hero watermark removed */}
@media(max-width:860px){
  .app-sidebar{transform:translateX(-105%)}
  .app-sidebar.open{transform:translateX(0)}
  .app-main{margin-left:0}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
}
@media(min-width:861px){
  .sidebar-backdrop{display:none!important}
}




/* ===== Professional polish — fewer hard lines ===== */
.stat{
  background:rgba(255,255,255,.04)!important;
  border:none!important;
  box-shadow:none!important;
  color:var(--text);
}
.btn{
  border-radius:12px;
  box-shadow:0 6px 20px rgba(227,53,13,.28);
  border:none;
}
.btn-secondary{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text);
  box-shadow:none;
}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.filter-btn{
  background:transparent;border:none;color:var(--muted);
  padding:.35rem .75rem;border-radius:8px;
}
.filter-btn.active,.filter-btn:hover{
  background:rgba(255,255,255,.06);color:var(--text);border:none;
}
.quest-card,.market-card,.shop-item,.sell-row,.code-box,.trade-box,.last-pack,.dev-pull{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
  border-radius:14px!important;
}
.quest-card.claimable{
  background:rgba(34,197,94,.08)!important;
  border-color:rgba(34,197,94,.25)!important;
}
.market-card.featured{
  background:rgba(255,203,5,.05)!important;
  border-color:rgba(255,203,5,.2)!important;
  box-shadow:none!important;
}
.market-card.needed{
  border-color:rgba(34,197,94,.3)!important;
  box-shadow:none!important;
}
.market-history{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.zoom-meta,.zoom-inner{
  border-color:rgba(255,255,255,.08)!important;
}
.zoom-inner{
  background:#0c0c10!important;
  box-shadow:0 24px 64px rgba(0,0,0,.65)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.progress-bar{background:rgba(255,255,255,.06);border:none}
.tcg-card.full-art{
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  border:none!important;
}
.tcg-card.full-art:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
}
.binder-page{
  background:rgba(255,255,255,.02)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
.binder-slot{
  border:1px solid rgba(255,255,255,.06)!important;
  background:rgba(0,0,0,.35)!important;
}
.binder-slot.owned{border-color:rgba(255,255,255,.12)!important}
.mini-card{border:1px solid rgba(255,255,255,.08)}
.pack-visual{
  border:none;
  box-shadow:none;
}
#open.panel { background:#0b0d17; }
#open .pack-area, #pack-idle, #rip-stage, #reveal-stage.active {
  background:#000 !important;
}
.pack-visual, .pack-body, .pack-art-img {
  background:#000 !important;
}


#open.panel, #open .pack-area, #pack-idle, #rip-stage, #reveal-stage {
  background:#000 !important;
}
#open .pack-area { padding:1rem 0; border-radius:12px; }
.pack-body, .pack-body .pack-art-img, .pack-art-img { background:#000 !important; }

.app-content{padding:1.5rem 1.75rem}
.quest-section-title{letter-spacing:.3px;font-weight:700}

/* Catalog / price guide */
.catalog-wrap{width:100%;max-width:none;margin:0}
.catalog-set{margin-bottom:1.25rem;border:1px solid #2a314d;border-radius:12px;overflow:hidden;background:#12141c}
.catalog-set-head{padding:.75rem 1rem;background:linear-gradient(90deg,#1a2030,#12141c);border-bottom:1px solid #2a314d;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.catalog-set-head h3{margin:0;color:var(--gold);font-size:1.05rem}
.catalog-set-head span{font-size:.78rem;color:var(--muted)}
.catalog-table{width:100%;border-collapse:collapse;font-size:.82rem}
.catalog-table th{text-align:left;padding:.45rem .7rem;color:var(--muted);font-weight:600;border-bottom:1px solid #2a314d;background:#0e1018}
.catalog-table td{padding:.4rem .7rem;border-bottom:1px solid #1a1f2e;vertical-align:middle}
.catalog-table tr:hover td{background:rgba(255,255,255,.02)}
.catalog-table .c-num{color:var(--muted);width:3.2rem;font-variant-numeric:tabular-nums}
.catalog-table .c-name{font-weight:700}
.catalog-table .c-rar{font-size:.72rem;color:var(--muted)}
.catalog-table .c-price{font-weight:800;color:var(--gold);white-space:nowrap}
.catalog-table .c-price.locked{color:var(--muted);font-weight:600}
.catalog-table .c-act{text-align:right;white-space:nowrap}
.catalog-table .btn{padding:.25rem .55rem;font-size:.72rem}
.catalog-hint{color:var(--muted);font-size:.85rem;margin-bottom:1rem}


.nav-quest-badge{
  display:none;margin-left:.35rem;min-width:1.1rem;height:1.1rem;padding:0 .28rem;
  border-radius:999px;background:var(--gold);color:#1a1200;font-size:.68rem;font-weight:900;
  align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 10px rgba(255,203,5,.45);
}
.nav-quest-badge.show{display:inline-flex}
.nav-quest-badge.pulse{animation:questBadgePulse 1.2s ease-in-out infinite}
@keyframes questBadgePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(255,203,5,.35)}
  50%{transform:scale(1.12);box-shadow:0 0 16px rgba(255,203,5,.7)}
}
#quest-complete-modal{
  display:none;position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.72);
  align-items:center;justify-content:center;padding:1rem;
}
#quest-complete-modal.open{display:flex}
#achievement-complete-modal{
  display:none;position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.72);
  align-items:center;justify-content:center;padding:1rem;
}
#achievement-complete-modal.open{display:flex}
.quest-complete-box{
  background:#16161c;border:2px solid var(--gold);border-radius:16px;
  padding:1.4rem 1.5rem;max-width:360px;width:100%;text-align:center;
  box-shadow:0 0 40px rgba(255,203,5,.25),0 20px 50px rgba(0,0,0,.6);
}
.quest-complete-box .qc-star{font-size:2.4rem;margin-bottom:.4rem}
.quest-complete-box h3{color:var(--gold);margin:0 0 .35rem;font-size:1.2rem}
.quest-complete-box p{color:var(--muted);font-size:.9rem;margin:0 0 .85rem}
.quest-complete-box .qc-reward{color:#4ade80;font-weight:800;margin-bottom:1rem}


.packs-breakdown{
  position:absolute;left:0;bottom:calc(100% + 6px);z-index:50;
  min-width:160px;padding:.55rem .7rem;border-radius:10px;
  background:#16161c;border:1px solid #2a314d;box-shadow:0 10px 28px rgba(0,0,0,.55);
  font-size:.78rem;color:var(--text);white-space:nowrap;
}
.packs-breakdown div{display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0}
.packs-breakdown .pb-set{color:var(--muted)}
.packs-breakdown .pb-n{font-weight:800;color:var(--gold)}
.packs-hover-wrap:hover .packs-breakdown{display:block !important}
.app-topbar .packs-breakdown{left:auto;right:0;bottom:auto;top:calc(100% + 6px)}


/* Quest accordions */
.quest-accordion{max-width:none;width:100%;margin:0 0 .75rem;border:1px solid #2a314d;border-radius:12px;overflow:hidden;background:var(--card-bg)}
.quest-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;background:transparent;border:none;color:var(--text);cursor:pointer;font:inherit;text-align:left}
.quest-acc-head:hover{background:rgba(255,255,255,.03)}
.quest-acc-head .acc-title{font-weight:800;color:var(--gold);font-size:1rem}
.quest-acc-head .acc-meta{font-size:.78rem;color:var(--muted)}
.quest-acc-head .acc-chev{transition:transform .2s;color:var(--muted);font-size:1.1rem}
.quest-accordion.open .acc-chev{transform:rotate(180deg)}
.quest-acc-body{display:none;padding:0 .85rem .85rem;border-top:1px solid #2a314d}
.quest-accordion.open .quest-acc-body{display:block;padding-top:.75rem}
.quest-card.locked{opacity:.4;pointer-events:none}
.quest-card .rew-money{color:#4ade80;font-weight:700;font-size:.82rem}

.market-side img{border:none!important;box-shadow:0 4px 14px rgba(0,0,0,.4);border-radius:8px}
.m-badge{border:none}
.toast{border:none;background:#16161c;box-shadow:0 12px 40px rgba(0,0,0,.55)}

/* ===== RARITY VISUAL EFFECTS ===== */
/* Common — subtle gray border */
.tcg-card[data-rarity="common"],
.binder-slot.owned[data-rarity="common"],
.live-card-pick[data-rarity="common"]{
  border-color:#5a6480 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Uncommon — soft green glow */
.tcg-card[data-rarity="uncommon"],
.binder-slot.owned[data-rarity="uncommon"],
.live-card-pick[data-rarity="uncommon"]{
  border-color:#4ade80 !important;
  box-shadow:0 0 10px rgba(74,222,128,.25),0 2px 8px rgba(0,0,0,.35);
}

/* Rare (epic) — blue shimmer border */
.tcg-card[data-rarity="epic"],
.binder-slot.owned[data-rarity="epic"],
.live-card-pick[data-rarity="epic"]{
  border-color:#60a5fa !important;
  box-shadow:0 0 14px rgba(96,165,250,.35),0 2px 10px rgba(0,0,0,.4);
  position:relative;
}
.tcg-card[data-rarity="epic"].full-art::before,
.binder-slot.owned[data-rarity="epic"] .bs-art::before,
.live-card-pick[data-rarity="epic"]::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
  background:linear-gradient(135deg,transparent 40%,rgba(96,165,250,.15) 50%,transparent 60%);
  background-size:200% 200%;
  animation:rare-shimmer 4s ease-in-out infinite;
}
@keyframes rare-shimmer{
  0%{background-position:100% 0}
  50%{background-position:0 100%}
  100%{background-position:100% 0}
}

/* Rare Holo (legendary) — gold border + animated holo sweep on the CARD art, not the slot padding */
.tcg-card[data-rarity="legendary"],
.binder-slot.owned[data-rarity="legendary"],
.live-card-pick[data-rarity="legendary"]{
  border-color:#ffcb05 !important;
  box-shadow:0 0 18px rgba(255,203,5,.45),0 0 36px rgba(255,150,0,.2),0 4px 14px rgba(0,0,0,.45);
  position:relative;
}
.tcg-card[data-rarity="legendary"].full-art::after,
.binder-slot.owned[data-rarity="legendary"] .bs-art::after,
.live-card-pick[data-rarity="legendary"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.35) 45%,
    rgba(255,203,5,.25) 50%,
    rgba(255,255,255,.35) 55%,
    transparent 70%);
  background-size:250% 100%;
  animation:holo-sweep 2.8s ease-in-out infinite;
  mix-blend-mode:soft-light;opacity:.85;
}
@keyframes holo-sweep{0%{background-position:130% 0}100%{background-position:-40% 0}}

/* Rarity badge chip on collection cards */
.rarity-chip{
  position:absolute;bottom:4px;left:4px;z-index:3;
  font-size:.58rem;font-weight:800;letter-spacing:.3px;
  padding:2px 5px;border-radius:4px;text-transform:uppercase;
  pointer-events:none;
}
.rarity-chip.common{background:rgba(90,100,128,.85);color:#d0d5e0}
.rarity-chip.uncommon{background:rgba(34,120,60,.9);color:#bbf7d0}
.rarity-chip.epic{background:rgba(30,80,160,.9);color:#bfdbfe}
.rarity-chip.legendary{background:linear-gradient(90deg,#b45309,#ca8a04);color:#fef9c3;box-shadow:0 0 8px rgba(255,203,5,.4)}

/* Zoom rarity effects moved to .zoom-art-wrap (shine on card surface, not outer glow) */
#zoom-img.holo-force{filter:saturate(1.12) brightness(1.03)}
#zoom-img.rare-force,#zoom-img.uncommon-force{filter:none}

/* ========== LOGIN SCREEN ========== */
#login-screen{
  position:fixed;inset:0;z-index:9999;background:#0b0d17;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;padding:1.5rem;
}
#login-screen.hidden{display:none}
.login-card{
  background:var(--card-bg);border:1px solid #2a314d;border-radius:16px;
  padding:2rem 2.2rem;width:100%;max-width:380px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.login-card h1{font-size:1.5rem;margin-bottom:.3rem;color:var(--gold);text-align:center}
.login-card .sub{color:var(--muted);font-size:.9rem;text-align:center;margin-bottom:1.5rem}
.login-card label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.3rem}
.login-card input{
  width:100%;padding:.7rem .9rem;border-radius:8px;border:1px solid #2a314d;
  background:#0f1320;color:var(--text);font-size:1rem;margin-bottom:1rem;
}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card .btn-login{
  width:100%;padding:.75rem;border:none;border-radius:8px;
  background:var(--accent);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
}
.login-card .btn-login:hover{filter:brightness(1.1)}
.login-card .btn-login:disabled{opacity:.5;cursor:not-allowed}
.login-error{color:#f87171;font-size:.85rem;margin-top:.6rem;text-align:center;min-height:1.2em}
.login-user-badge{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .55rem;font-size:.85rem;color:var(--muted);
}
.login-user-badge strong{color:var(--gold)}
.badge-identity{
  display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.22rem .6rem;border-radius:999px;border:1px solid transparent;
  max-width:100%;
}
.badge-identity .badge-label{opacity:.85;white-space:nowrap}
.badge-identity strong{font-weight:800}
.badge-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:#000;border:1px solid rgba(255,203,5,.35);
  box-shadow:0 0 10px rgba(255,203,5,.2);
}
.btn-logout{
  background:transparent;border:1px solid #2a314d;color:var(--muted);
  padding:.25rem .55rem;border-radius:6px;font-size:.75rem;cursor:pointer;
  flex-shrink:0;
}
.btn-logout:hover{border-color:var(--accent);color:var(--accent)}

/* ===== COSMETICS ===== */
/* Frames only on the identity pill — logout stays outside */
.badge-identity.cosmo-frame-gold{
  border-color:rgba(255,203,5,.65);
  background:rgba(255,203,5,.08);
  box-shadow:0 0 14px rgba(255,203,5,.28);
}
.badge-identity.cosmo-frame-holo{
  border-color:rgba(96,165,250,.55);
  background:linear-gradient(90deg,rgba(96,165,250,.14),rgba(255,203,5,.1),rgba(74,222,128,.12));
  box-shadow:0 0 14px rgba(96,165,250,.2);
}
.badge-identity.cosmo-frame-fire{
  border-color:rgba(227,53,13,.7);
  background:rgba(227,53,13,.1);
  box-shadow:0 0 16px rgba(227,53,13,.35);
}
.cosmo-title-chip{
  font-size:.65rem;font-weight:800;letter-spacing:.3px;padding:3px 7px;border-radius:999px;
  background:rgba(255,203,5,.18);color:var(--gold);border:1px solid rgba(255,203,5,.35);
  white-space:nowrap;
}
body.cosmo-binder-gold .binder-page{
  background:linear-gradient(160deg,#2a2410,#1a1608)!important;
  border-color:rgba(255,203,5,.35)!important;
}
body.cosmo-binder-midnight .binder-page{
  background:linear-gradient(160deg,#0c1228,#060a14)!important;
  border-color:rgba(96,165,250,.3)!important;
}
body.cosmo-binder-forest .binder-page{
  background:linear-gradient(160deg,#0f1f14,#08140c)!important;
  border-color:rgba(74,222,128,.3)!important;
}
 .binder-style-picker{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.35rem 0 .55rem}
.binder-style-picker select{background:#11131a;color:#eee;border:1px solid #3b3540;border-radius:7px;padding:.38rem .55rem;min-width:190px}
.binder-style-owned{font-size:.72rem;color:var(--muted)}
.binder-page.binder-local-gold{background:linear-gradient(160deg,#2a2410,#1a1608)!important;border-color:rgba(255,203,5,.35)!important}
.binder-page.binder-local-midnight{background:linear-gradient(160deg,#0c1228,#060a14)!important;border-color:rgba(96,165,250,.3)!important}
.binder-page.binder-local-forest{background:linear-gradient(160deg,#0f1f14,#08140c)!important;border-color:rgba(74,222,128,.3)!important}
.binder-page.binder-local-art{background-image:linear-gradient(rgba(8,9,13,.42),rgba(8,9,13,.42)),var(--binder-local-art)!important;background-size:cover!important;background-position:center!important}
body.cosmo-back-gold .card-back-img{filter:sepia(.35) saturate(1.4) hue-rotate(5deg)}
body.cosmo-back-ice .card-back-img{filter:hue-rotate(180deg) saturate(1.2)}
body.cosmo-back-ember .card-back-img{filter:sepia(.5) hue-rotate(-20deg) saturate(1.6)}

/* ========== MOBILE-ONLY FIXES (desktop unchanged) ========== */
@media (max-width: 860px) {
  /* ---- Global / layout ---- */
  html, body, body.app-body {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-main {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-content {
    padding: 0.85rem 0.75rem 1.25rem !important;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }
  .btn, button.btn, .filter-btn, .app-nav-btn, .app-nav-subbtn {
    min-height: 44px;
  }

  /* ---- Top bar + menu (notch safe) ---- */
  .app-topbar {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 40 !important;
    gap: 0.5rem !important;
  }
  .menu-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.4rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .app-topbar .top-title {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }
  .login-user-badge {
    font-size: 0.75rem !important;
    gap: 0.3rem !important;
  }
  .btn-logout {
    min-height: 36px;
    padding: 0.3rem 0.55rem !important;
  }

  /* ---- Login ---- */
  #login-screen {
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }
  .login-card {
    padding: 1.4rem 1.25rem !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .login-card h1 { font-size: 1.3rem !important; }
  .login-card input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 48px;
    padding: 0.75rem 0.9rem !important;
  }
  .login-card .btn-login {
    min-height: 48px;
    font-size: 1.05rem !important;
  }

  /* ---- Home / pack open ---- */
  .pack-visual {
    width: min(240px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 270 / 378 !important;
    max-height: 52vh !important;
  }
  .reveal-card-wrapper {
    width: min(240px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 240 / 340 !important;
    max-height: 58vh !important;
  }
  .home-fg h1 { font-size: 1.35rem !important; }
  .home-fg p { font-size: 0.9rem !important; }
  .home-fg .btn { min-width: 160px; min-height: 48px; }
  .opened-summary { gap: 0.35rem !important; }
  .mini-card { width: 42px !important; height: 58px !important; }
  .lp-card { width: 52px !important; height: 72px !important; }
  .open-set-rail {
    gap: 0.35rem !important;
    margin-bottom: 0.7rem !important;
  }
  .open-set-rail button {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.78rem !important;
    min-height: 40px;
  }

  /* ---- Collection grid ---- */
  .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 0.55rem !important;
  }
  .tcg-card .tcg-art { height: 64px !important; }
  .tcg-card .tcg-top { font-size: 0.7rem !important; padding: 3px 5px 1px !important; }
  .tcg-card.full-art .full-card-img { min-height: 150px !important; }
  .collection-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }
  .collection-header .stats,
  .collection-header .filters {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* ---- Binder ---- */
  .binder-page {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    padding: 0.5rem !important;
    border-radius: 10px !important;
  }
  .binder-slot .bs-name { font-size: 0.58rem !important; }
  .binder-slot .bs-num { font-size: 0.62rem !important; }
  .binder-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }
  .binder-nav .btn {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.8rem !important;
  }

  /* ---- Shop / Market ---- */
  .market-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }
  .shop-item, .market-card, .quest-card, .sell-row {
    padding: 0.85rem !important;
  }
  .shop-item h3, .market-card h3 {
    font-size: 1rem !important;
  }
  .sell-list { max-height: 50vh !important; }

  /* ---- Quests ---- */
  .quest-list { gap: 0.5rem !important; }
  .quest-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .quest-reward {
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .quest-progress { width: 100% !important; }

  /* ---- Trade modals ---- */
  .trade-modal {
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) 0.5rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .trade-modal-inner {
    width: min(440px, 96vw) !important;
    max-height: none !important;
    margin: 0.5rem auto 1rem !important;
    padding: 1rem !important;
  }

  /* ---- Zoom / graded card modal ---- */
  .zoom-modal {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) 0.5rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
  }
  .zoom-inner {
    width: min(380px, 96vw) !important;
    max-height: none !important;
    margin: 0.5rem auto 1.5rem !important;
    padding-bottom: 0.5rem;
  }
  .zoom-art-wrap.is-slab #zoom-img {
    max-width: min(280px, 78vw) !important;
    max-height: min(42vh, 320px) !important;
  }
  .zoom-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, #0c0c10 70%, transparent);
    padding: 0.75rem 0 0.35rem;
    margin-top: 0.75rem !important;
    z-index: 5;
    gap: 0.4rem !important;
  }
  .zoom-actions .btn,
  .zoom-actions .btn-close-modal {
    min-height: 44px;
    font-size: 0.88rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  .btn-close-modal {
    background: #3a4560 !important;
    border-color: #5a6480 !important;
    flex: 1 1 100%;
    order: 99;
  }
  .zoom-meta {
    font-size: 0.82rem !important;
  }

  /* ---- Grade result ---- */
  .grade-result-modal {
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .grade-result-card {
    margin: 1.5rem auto;
    max-width: 100% !important;
  }
  .grade-result-card .btn {
    min-height: 48px;
    width: 100%;
    font-size: 1rem;
  }

  /* ---- Pull alerts / toasts ---- */
  .pull-alert {
    left: 50% !important;
    max-width: min(420px, 94vw) !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }
  .toast {
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: 92vw !important;
    font-size: 0.9rem !important;
  }

  /* ---- Sidebar on mobile already handled; ensure touch-friendly nav ---- */
  .app-nav-btn {
    padding: 0.7rem 0.8rem !important;
    font-size: 0.95rem !important;
  }
  .app-nav-subbtn {
    padding: 0.45rem 0.55rem !important;
    min-height: 40px;
  }
  .app-sidebar-stats {
    padding: 0.75rem 1rem !important;
  }
}

/* Extra tight phones */
@media (max-width: 400px) {
  .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
    gap: 0.4rem !important;
  }
  .pack-visual {
    width: min(210px, 78vw) !important;
  }
  .reveal-card-wrapper {
    width: min(210px, 78vw) !important;
  }
  .app-topbar .top-title {
    font-size: 0.85rem !important;
  }
}


/* Leaderboard */
.lb-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.lb-tab{background:var(--card-bg);border:1px solid #2a314d;color:var(--text);padding:.45rem .85rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.88rem}
.lb-tab:hover{border-color:#5a6480}
.lb-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.lb-my-rank{background:linear-gradient(90deg,#1a2035,#151a2e);border:1px solid var(--gold);border-radius:12px;padding:.75rem 1rem;margin-bottom:.85rem;font-size:.95rem}
.lb-my-rank strong{color:var(--gold)}
.lb-list{display:flex;flex-direction:column;gap:.45rem}
.lb-row{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.6rem;align-items:center;background:var(--card-bg);border:1px solid #2a314d;border-radius:10px;padding:.65rem .9rem}
.lb-row.me{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,203,5,.25)}
.lb-rank{font-weight:800;color:var(--muted);font-size:1.05rem;text-align:center}
.lb-rank.top1{color:#ffd700}
.lb-rank.top2{color:#c0c0c0}
.lb-rank.top3{color:#cd7f32}
.lb-name{font-weight:700}
.lb-name .lb-you{color:var(--gold);font-size:.75rem;font-weight:600;margin-left:.35rem}
.lb-score{font-weight:700;color:var(--gold);white-space:nowrap}
.lb-sub{color:var(--muted);font-size:.78rem;font-weight:500}
.lb-empty{color:var(--muted);padding:1.5rem;text-align:center}


/* Teams */
.team-card{background:var(--card-bg);border:1px solid #2a314d;border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.team-card h3{margin:0 0 .35rem;font-size:1.15rem}
.team-tag{display:inline-block;background:#1a2035;border:1px solid var(--gold);color:var(--gold);font-weight:800;font-size:.75rem;padding:.15rem .5rem;border-radius:6px;letter-spacing:.04em;margin-right:.4rem}
.team-meta{color:var(--muted);font-size:.85rem;margin:.25rem 0 .75rem}
.team-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.team-stat{background:#0f1320;border:1px solid #2a314d;border-radius:999px;padding:.3rem .75rem;font-size:.82rem}
.team-stat strong{color:var(--gold)}
.team-members{list-style:none;padding:0;margin:.5rem 0 0}
.team-members li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .65rem;border-bottom:1px solid #1e2438;font-size:.92rem}
.team-members li:last-child{border-bottom:none}
.team-role{font-size:.72rem;font-weight:700;color:var(--gold);text-transform:uppercase}
.team-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.team-form label{display:block;font-size:.82rem;color:var(--muted);margin:0 0 .25rem}
.team-form input,.team-form textarea{width:100%;max-width:360px;padding:.55rem .75rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);margin-bottom:.7rem}
.team-form textarea{min-height:70px;resize:vertical}
.team-invite{font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:800;letter-spacing:.12em;color:var(--gold)}


/* Mail */
.mail-list{display:flex;flex-direction:column;gap:.4rem}
.mail-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;background:var(--card-bg);border:1px solid #2a314d;border-radius:10px;padding:.7rem .9rem;cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit}
.mail-row:hover{border-color:#5a6480}
.mail-row.unread{border-color:var(--gold);background:#1a2035}
.mail-row .mail-sub{color:var(--muted);font-size:.78rem;margin-top:.2rem}
.mail-row .mail-meta{color:var(--muted);font-size:.75rem;text-align:right;white-space:nowrap}
.mail-detail{background:var(--card-bg);border:1px solid #2a314d;border-radius:14px;padding:1.1rem 1.2rem}
.mail-detail h3{margin:0 0 .35rem}
.mail-gift-box{margin:1rem 0;padding:1.2rem;border:2px dashed var(--gold);border-radius:12px;text-align:center;background:#151a2e}
.mail-gift-box.opened{border-style:solid;border-color:#2a314d}
.mail-att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.6rem;margin-top:.75rem}
.mail-att-card{background:#0f1320;border:1px solid #2a314d;border-radius:8px;padding:.4rem;text-align:center;font-size:.75rem}
.mail-att-card img{width:100%;border-radius:6px;display:block;margin-bottom:.3rem}
.mail-compose label{display:block;font-size:.82rem;color:var(--muted);margin:0 0 .25rem}
.mail-compose input,.mail-compose select,.mail-compose textarea{width:100%;max-width:420px;padding:.55rem .75rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);margin-bottom:.7rem}
.mail-compose textarea{min-height:100px;resize:vertical}
.mail-att-picker{max-width:420px;max-height:180px;overflow:auto;border:1px solid #2a314d;border-radius:8px;padding:.5rem;margin-bottom:.7rem;background:#0f1320}
.mail-att-picker label{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.85rem;color:var(--text);cursor:pointer}


.mail-top-btn{cursor:pointer;border:1px solid #2a314d;background:var(--card-bg);font:inherit;color:var(--text);display:inline-flex;align-items:center;gap:.35rem}
.mail-top-btn:hover{border-color:var(--gold);color:var(--gold)}
.mail-top-btn .nav-quest-badge{position:relative;top:0;right:0;margin-left:.15rem}
.mail-card-search{width:100%;max-width:420px;padding:.5rem .7rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);margin-bottom:.5rem}
.mail-att-selected{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .7rem;max-width:420px}
.mail-att-chip{background:#1a2035;border:1px solid var(--gold);color:var(--text);border-radius:999px;padding:.25rem .6rem;font-size:.78rem;display:inline-flex;align-items:center;gap:.35rem}
.mail-att-chip button{background:none;border:none;color:#f87171;cursor:pointer;font-size:.9rem;padding:0;line-height:1}


/* Gift pack-style reveal */
.gift-reveal-stage{perspective:1200px;width:min(280px,70vw)}
.gift-reveal-card{position:relative;width:100%;aspect-ratio:5/7;transform-style:preserve-3d;transition:transform .7s ease;cursor:pointer}
.gift-reveal-card.flipped{transform:rotateY(180deg)}
.gift-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.gift-back{background:#111}
.gift-back img{width:100%;height:100%;object-fit:cover}
.gift-front{transform:rotateY(180deg);background:#0a0e18;display:flex;align-items:center;justify-content:center}
.gift-front img{width:100%;height:100%;object-fit:contain}
.gift-front .gift-no-art{color:#ffcb05;font-weight:800;padding:1rem;text-align:center}

/* Mail icon attention when unread */
@keyframes mail-glow-pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(255,203,5,.0);border-color:#2a314d}
  50%{box-shadow:0 0 14px 2px rgba(255,203,5,.55);border-color:var(--gold)}
}
@keyframes mail-shake {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-8deg)}
  30%{transform:rotate(8deg)}
  45%{transform:rotate(-6deg)}
  60%{transform:rotate(6deg)}
  75%{transform:rotate(-3deg)}
}
.mail-top-btn.has-mail{
  animation: mail-glow-pulse 1.8s ease-in-out infinite, mail-shake 2.4s ease-in-out infinite;
  color:var(--gold);
  border-color:var(--gold);
}

/* ===== LIVE WHEEL — Pokémon Center / High-Tech ===== */
.lw-wrap{max-width:980px;margin:0 auto;padding:0 .5rem 2rem}
.lw-hero{
  position:relative;overflow:hidden;border-radius:18px;padding:1.4rem 1.5rem 1.2rem;
  background:linear-gradient(135deg,#0a1228 0%,#121a3a 40%,#0d1b2a 100%);
  border:1px solid rgba(0,220,255,.25);
  box-shadow:0 0 0 1px rgba(255,203,5,.08),0 0 40px rgba(0,180,255,.12),inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:1.1rem;
}
.lw-hero::before{
  content:'';position:absolute;inset:0;background:
    radial-gradient(ellipse 80% 60% at 20% 0%,rgba(0,200,255,.18),transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(255,203,5,.1),transparent 50%);
  pointer-events:none;
}
.lw-hero h2{position:relative;margin:0 0 .25rem;font-size:1.45rem;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(90deg,#fff 0%,#7df 40%,#ffcb05 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lw-hero p{position:relative;margin:0;color:#8b9bb8;font-size:.9rem}
.lw-badge{
  display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(0,200,255,.12);border:1px solid rgba(0,220,255,.35);color:#7df;margin-bottom:.55rem;
}
.lw-badge.live{background:rgba(227,53,13,.15);border-color:rgba(227,53,13,.5);color:#ff6b4a;
  animation:lw-pulse 1.6s ease-in-out infinite}
@keyframes lw-pulse{0%,100%{opacity:1}50%{opacity:.7}}

.lw-lobby,.lw-room{display:none}
.lw-lobby.active,.lw-room.active{display:block}

.lw-card{
  background:linear-gradient(160deg,#12182c,#0e1424);
  border:1px solid #2a3555;border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1rem;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.lw-card h3{margin:0 0 .75rem;font-size:1rem;color:var(--gold);display:flex;align-items:center;gap:.45rem}

.lw-code-input{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center
}
.lw-code-input input{
  flex:1;min-width:140px;background:#0a0e1a;border:1px solid #2a3555;border-radius:10px;
  color:#fff;padding:.65rem .9rem;font-size:1.1rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  font-family:ui-monospace,monospace
}
.lw-code-input input:focus{outline:none;border-color:#0cf;box-shadow:0 0 0 3px rgba(0,200,255,.15)}

.lw-room-header{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem
}
.lw-room-code{
  font-family:ui-monospace,monospace;font-size:1.35rem;font-weight:800;letter-spacing:4px;
  color:#7df;text-shadow:0 0 12px rgba(0,220,255,.4)
}
.lw-status-pill{
  display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:999px;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#7df
}
.lw-status-pill.spinning{background:rgba(255,203,5,.12);border-color:rgba(255,203,5,.4);color:var(--gold)}
.lw-status-pill.ended{background:rgba(139,147,167,.12);border-color:#5a6480;color:var(--muted)}

/* Presence list */
.lw-presence{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;min-height:2rem
}
.lw-presence-chip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;
  background:#151c30;border:1px solid #2a3555;font-size:.8rem;font-weight:600;color:#c8d0e0
}
.lw-presence-chip.you{border-color:rgba(0,200,255,.5);color:#7df}
.lw-presence-chip.spinner{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(255,203,5,.25)}
.lw-presence-chip .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}

/* Case-opening reel (CSGO-style) */
.lw-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;padding:1.25rem 0 1.5rem;width:100%
}
.lw-case{
  position:relative;width:min(920px,96vw);height:168px;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0a0e18,#06080f);
  border:1px solid rgba(255,203,5,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 12px 40px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.35);
}
.lw-case:before,.lw-case:after{
  content:"";position:absolute;top:0;bottom:0;width:18%;z-index:3;pointer-events:none
}
.lw-case:before{left:0;background:linear-gradient(90deg,#06080f 10%,transparent)}
.lw-case:after{right:0;background:linear-gradient(270deg,#06080f 10%,transparent)}
.lw-case-marker{
  position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);z-index:5;
  background:linear-gradient(180deg,#ffcb05,#ff9f1a);box-shadow:0 0 12px rgba(255,203,5,.8),0 0 24px rgba(255,203,5,.35);
  pointer-events:none
}
.lw-case-marker:before{
  content:"";position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #ffcb05
}
.lw-case-marker:after{
  content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid #ffcb05
}
.lw-case-track{
  position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:0;
  will-change:transform;transform:translate3d(0,0,0)
}
.lw-case-item{
  flex:0 0 120px;width:120px;height:148px;margin:0 4px;border-radius:10px;
  border:2px solid #3a4560;background:linear-gradient(160deg,#151c2e,#0b101b);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  overflow:hidden;position:relative;box-shadow:inset 0 0 20px rgba(0,0,0,.35)
}
.lw-case-item img{position:absolute;inset:6px 6px 28px;width:auto;height:auto;max-width:calc(100% - 12px);max-height:calc(100% - 34px);margin:auto;object-fit:contain;left:0;right:0;top:6px;bottom:28px}
.lw-case-item .lw-ci-label{
  position:relative;z-index:1;width:100%;padding:4px 4px 6px;text-align:center;
  font-size:.62rem;font-weight:800;color:#e8eef8;background:rgba(0,0,0,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lw-case-item.rarity-common{border-color:#6b7280}
.lw-case-item.rarity-uncommon{border-color:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.2)}
.lw-case-item.rarity-rare,.lw-case-item.rarity-epic{border-color:#60a5fa;box-shadow:0 0 14px rgba(96,165,250,.25)}
.lw-case-item.rarity-legendary{border-color:#ffcb05;box-shadow:0 0 16px rgba(255,203,5,.35)}
.lw-case-item.mystery{border-color:#a78bfa;box-shadow:0 0 14px rgba(167,139,250,.3)}
.lw-case-item.mystery .lw-ci-label{color:#c4b5fd}
.lw-case-item.winner{
  border-color:#ffcb05!important;box-shadow:0 0 0 2px #ffcb05,0 0 28px rgba(255,203,5,.55)!important;
  transform:scale(1.04)
}
.lw-case-item.mystery-reveal{
  animation:lw-tile-reveal .55s ease-out;
}
@keyframes lw-tile-reveal{
  0%{transform:scale(.7) rotateY(90deg);opacity:.3;filter:brightness(2)}
  55%{transform:scale(1.08) rotateY(0deg);opacity:1;filter:brightness(1.25)}
  100%{transform:scale(1.04);opacity:1;filter:brightness(1)}
}
.lw-case-item .lw-ci-emoji{font-size:2.2rem;margin-bottom:28px}
/* legacy wheel hooks kept harmless */
.lw-wheel-frame,.lw-wheel,.lw-hub,.lw-pointer{display:none!important}
.lw-spin-btn{
  margin-top:1.3rem;padding:1rem 2.6rem;font-size:1.15rem;font-weight:800;letter-spacing:1px;
  border:none;border-radius:14px;cursor:pointer;color:#0a0e1a;
  background:linear-gradient(135deg,#ffcb05,#ff9f1a);
  box-shadow:0 4px 20px rgba(255,203,5,.4),0 0 0 1px rgba(255,255,255,.15);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.lw-spin-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 6px 28px rgba(255,203,5,.55)}
.lw-spin-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4);box-shadow:none}

.lw-result{
  margin-top:1.1rem;text-align:center;min-height:3.5rem;
  font-size:1.05rem;font-weight:700;color:#e8eef8
}
.lw-result .prize-name{color:var(--gold);font-size:1.25rem;text-shadow:0 0 12px rgba(255,203,5,.35)}
.lw-result.mystery-reveal{animation:lw-reveal-pop .6s ease-out}
@keyframes lw-reveal-pop{
  0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}
}

/* Admin builder */
.lw-builder-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.55rem;margin:.75rem 0
}
.lw-slot-card{
  background:#0d1220;border:1px solid #2a3555;border-radius:10px;padding:.55rem;
  display:flex;flex-direction:column;gap:.3rem;position:relative;min-height:90px
}
.lw-slot-card.mystery{border-color:rgba(0,200,255,.4);background:linear-gradient(160deg,#0d1528,#0a1830)}
.lw-slot-card.random{border-color:rgba(255,100,80,.35)}
.lw-slot-card .slot-type{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8b9bb8
}
.lw-slot-card .slot-label{font-size:.8rem;font-weight:700;color:#e8eef8;line-height:1.2;word-break:break-word}
.lw-slot-card .slot-actions{display:flex;gap:.25rem;margin-top:auto}
.lw-slot-card button{
  flex:1;padding:.25rem;font-size:.68rem;border-radius:6px;border:1px solid #2a3555;
  background:#151c30;color:#c8d0e0;cursor:pointer
}
.lw-slot-card button:hover{border-color:#0cf;color:#7df}

.lw-admin-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0}
.lw-admin-row select,.lw-admin-row input[type=number],.lw-admin-row input[type=text]{
  background:#0a0e1a;border:1px solid #2a3555;border-radius:8px;color:#fff;
  padding:.45rem .65rem;font-size:.88rem
}
.lw-admin-row select:focus,.lw-admin-row input:focus{outline:none;border-color:#0cf}

.lw-msg{font-size:.88rem;min-height:1.3em;margin-top:.5rem;color:#8b9bb8}
.lw-msg.err{color:#f87171}
.lw-msg.ok{color:#4ade80}

.lw-card-picker{
  max-height:220px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:.4rem;margin-top:.5rem;padding:.4rem;background:#0a0e1a;border-radius:10px;border:1px solid #2a3555
}
.lw-pick-item{
  padding:.4rem;border-radius:8px;border:1px solid #2a3555;background:#12182c;cursor:pointer;
  font-size:.72rem;font-weight:600;text-align:center;color:#c8d0e0
}
.lw-pick-item:hover{border-color:#0cf;color:#7df}
.lw-pick-item img{width:100%;height:70px;object-fit:contain;border-radius:4px;margin-bottom:.25rem;background:#0a0e1a}


/* ===== Admin mini-menu + accordion ===== */
.admin-menu{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.45rem;
  margin:0;width:100%;
}
.admin-menu-bar{
  align-items:stretch !important;
  padding:.55rem .85rem !important;
}
body.admin-active .app-content{
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0;
}
body.admin-active #admin.panel.active{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#admin.page-shell{
  min-height:0!important;
  overflow:hidden!important;
}
#admin > .page-hero,
#admin > .admin-menu-bar,
#admin > .mkt-topbar{
  flex:0 0 auto!important;
}
#admin #admin-body.page-body,
#admin #admin-body.mkt-body{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:.75rem 1rem 1rem!important;
  border:none!important;
  background:transparent!important;
}
#admin #admin-scroll{
  position:static!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  width:100%!important;
  padding:0 0 1.5rem!important;
  box-sizing:border-box;
}
#admin .admin-section{
  display:none !important;
}
#admin .admin-section.active{
  display:block !important;
  width:100%;
  overflow:visible!important;
}
#admin .admin-accordion,
#admin .trade-box,
#admin .admin-acc-body,
#admin .admin-acc-body.open{
  overflow:visible!important;
  max-height:none!important;
}
.admin-menu-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  text-align:left;padding:.75rem .85rem;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,#12182c,#0e1424);
  border:1px solid #2a3555;color:var(--text);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.admin-menu-btn:hover{border-color:#5a6480;background:#151c30}
.admin-menu-btn.active{
  border-color:rgba(0,220,255,.45);
  background:linear-gradient(160deg,#152038,#0e1a2e);
  box-shadow:0 0 0 1px rgba(0,220,255,.12),0 4px 18px rgba(0,180,255,.12);
}
.admin-menu-ico{font-size:1.15rem;line-height:1}
.admin-menu-label{font-weight:800;font-size:.95rem}
.admin-menu-sub{font-size:.72rem;color:var(--muted)}
.admin-menu-btn.active .admin-menu-label{color:#7df}
.admin-menu-btn.active .admin-menu-sub{color:#8b9bb8}

.admin-section{display:none}
.admin-section.active{display:block}

.admin-accordion{
  border:1px solid #2a3555;border-radius:12px;overflow:hidden;
  background:#0e1424;
}
.admin-acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1rem;background:#12182c;border:none;border-bottom:1px solid transparent;
  color:var(--text);font-weight:700;font-size:.95rem;cursor:pointer;text-align:left;
}
.admin-acc-btn:hover:not(:disabled){background:#151c30}
.admin-acc-btn.open{border-bottom-color:#2a3555;color:#7df}
.admin-acc-btn:disabled{opacity:.6;cursor:not-allowed}
.admin-acc-chevron{transition:transform .2s;color:var(--muted);font-size:.85rem}
.admin-acc-btn.open .admin-acc-chevron{transform:rotate(180deg);color:#7df}
.admin-acc-body{display:none;padding:.85rem 1rem 1rem}
.admin-acc-body.open{display:block}
.admin-acc-body .trade-box{margin-bottom:0;border:none;background:transparent;padding:0;box-shadow:none}



/* Compact pack shop */
.shop-packs-header{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.75rem 1.25rem;margin-bottom:.9rem;
}
.shop-set-picker{display:flex;flex-direction:column;gap:.25rem;min-width:160px}
.shop-set-picker label{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.shop-set-picker select{
  padding:.5rem .7rem;border-radius:8px;border:1px solid #2a314d;background:#0f1320;color:var(--text);font-size:.9rem
}
.shop-packs-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:0;
}
@media (max-width:720px){
  .shop-packs-grid{grid-template-columns:1fr}
}
.shop-pack-card{
  position:relative;padding:.85rem .9rem 1rem;display:flex;flex-direction:column;align-items:center;
  gap:.2rem;min-height:0;
}
.shop-pack-card h3{margin:0;font-size:1rem}
.shop-pack-card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.3}
.shop-pack-card .price{margin:.35rem 0 .1rem;font-size:1.35rem;font-weight:800;color:var(--gold)}
.shop-pack-card .btn{margin-top:.45rem;padding:.45rem 1.1rem;font-size:.88rem;width:100%;max-width:140px}
.shop-pack-per{font-size:.72rem;color:#8b9bb8}
.shop-pack-badge{
  position:absolute;top:.55rem;right:.55rem;
  font-size:.65rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:.15rem .4rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid #2a3555;color:#8b9bb8;
}
.shop-pack-badge.save{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);color:#4ade80}
.shop-pack-badge.best{background:rgba(255,203,5,.12);border-color:rgba(255,203,5,.4);color:var(--gold)}
.shop-pack-featured{
  border-color:rgba(227,53,13,.45);
  box-shadow:0 0 0 1px rgba(227,53,13,.12),0 4px 18px rgba(227,53,13,.1);
}



/* Type binder covers (cosmetic art) */
.set-cover-book.set-cover-art{
  /* Match art aspect ~680x960; no extra chrome — art has its own frame */
  width:168px;height:237px;
  background:transparent;
  border:none;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
}
.set-cover.set-cover-themed{width:168px}
.set-cover-book.set-cover-art::before{display:none}
.set-cover-book.set-cover-art > img.sc-binder-img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  left:0;right:0;top:0;object-fit:fill;border-radius:14px;margin:0;opacity:1;
}
/* Set name on the colored lower area of the binder art */
.set-cover-book.set-cover-art .sc-set-label{
  position:absolute;
  left:10%;right:10%;
  bottom:6%;
  height:11%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:800;
  font-size:.88rem;letter-spacing:.35px;
  color:#f4f4f4;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  line-height:1.12;pointer-events:none;padding:0 .25rem;
  box-sizing:border-box;
  overflow:hidden;
}
.set-cover-book.set-cover-art .sc-set-label.dark-text{
  color:#1a1a1a;
  text-shadow:none;
}
.set-cover-book.set-cover-art .sc-set-label.long{
  font-size:.72rem;letter-spacing:.15px;line-height:1.12;
}
.set-cover-book.set-cover-art .sc-set-label.xlong{
  font-size:.62rem;letter-spacing:0;line-height:1.1;
}
body.cosmo-binder-art .binder-page{
  background:
    linear-gradient(160deg, rgba(12,16,28,.88), rgba(10,12,22,.94)),
    var(--binder-cover-art, none);
  background-size:cover;
  background-position:center;
  border-color:rgba(255,203,5,.35);
  box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,203,5,.08);
}


/* ===== Home mockup parity ===== */
@media(min-width:861px){
  .app-sidebar{width:236px;background:linear-gradient(180deg,#090a0f,#08090d);border-right:1px solid rgba(227,53,13,.55)}
  .app-main{margin-left:236px;background:#08090d}
  .app-sidebar-brand{min-height:112px;padding:0;align-items:center;justify-content:center;border:none;position:relative}
  /* Default CSS Poké Ball — hidden when a badge image is active */
  .app-sidebar-brand:before{content:'';width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 9%,#1a1a1f 10% 14%,transparent 15%),linear-gradient(#d9251b 0 47%,#141419 47% 53%,#e8e8eb 53%);box-shadow:0 0 0 4px #08090d,0 0 0 5px rgba(255,255,255,.23),0 8px 22px rgba(227,53,13,.28)}
  .app-sidebar-brand.has-badge:before{display:none}
  .app-sidebar-brand .brand-logo{display:none}
  .app-sidebar-brand.has-badge .brand-logo{display:block}
  .app-sidebar-brand .brand-text,.app-sidebar-brand .brand-disclaimer{display:none}
  .app-sidebar-stats{display:none}
  .app-nav{padding:1rem .7rem;gap:.28rem}
  .app-nav-label{height:1px;padding:0;margin:.35rem .45rem .38rem;background:rgba(255,255,255,.09);font-size:0;overflow:hidden}
  .app-nav-btn{padding:.72rem .8rem;border-radius:9px;font-size:.91rem;color:#d7d8dd}
  .app-nav-btn.active{background:linear-gradient(90deg,rgba(211,42,24,.38),rgba(211,42,24,.08));border:1px solid rgba(255,82,50,.55);box-shadow:inset 3px 0 #ef4024;color:#fff}
  .app-nav-btn .nav-ico{font-size:1rem;color:var(--gold)}
  .app-sidebar-foot{padding:1rem;border-top:1px solid rgba(255,255,255,.07)}
  .app-content{max-width:none;padding:1.15rem 3rem 2rem}
  .home-dashboard{max-width:1500px;margin:0 auto;padding:0}
  .home-hero{padding:.45rem 0 1rem;margin:0;min-height:139px;display:flex;align-items:center}
  /* home-hero watermark removed */
  .home-hero h1{font-size:2.18rem}.home-hero p{font-size:.88rem}.home-actions{margin-top:.85rem}
  .home-stat-grid{margin-bottom:.95rem;gap:.8rem}.home-stat-card{min-height:76px;padding:.7rem .95rem}
  .home-grid{grid-template-columns:minmax(0,2.4fr) minmax(305px,.9fr);gap:.85rem}
  .home-side-card{margin-top:-257px;position:relative;z-index:3;background:linear-gradient(145deg,#15161c,#0b0c10)}
  .home-feature{min-height:245px}.home-feature h2{font-size:2.05rem}.home-lower-grid{grid-template-columns:.72fr 1.28fr}
}

/* stripped: Home layout: main + side, no overlap */
/* stripped: HOME FIX v2: side rail + no extra scroll */
/* stripped: HOME FINAL LAYOUT v5 */
/* stripped: HOME SIDE RAIL CLEAN */

/* ================================================================
   HOME LAYOUT — single source of truth (do not duplicate)
   ================================================================ */
#home .home-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 1rem !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#home .home-main-col {
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  grid-column: 1 !important;
}
#home .home-side-col,
#home #home-side-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  grid-column: 2 !important;
  position: relative !important;
  width: 300px !important;
  min-width: 260px !important;
  max-width: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  z-index: 1 !important;
}
#home .home-side-card {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  background: linear-gradient(145deg, rgba(21,23,30,.96), rgba(8,9,13,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.home-rail-toggle,
.home-rail-backdrop,
#home .home-rail-header {
  display: none !important;
}

/* Flat 3-card showcase */
#home .home-feature {
  position: relative !important;
  overflow: hidden !important;
  min-height: 210px !important;
}
#home .home-feature-copy {
  position: relative;
  z-index: 2;
  max-width: 38%;
}
#home .home-pack-art {
  position: absolute !important;
  right: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 160px !important;
  pointer-events: none !important;
}
#home .home-pack-art .home-rare {
  width: 110px !important;
  height: 154px !important;
  margin: 0 -28px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45) !important;
  flex-shrink: 0 !important;
}
#home .home-pack-art .home-rare:nth-child(1),
#home .home-pack-art .home-rare:nth-child(3) {
  transform: scale(0.92) !important;
  z-index: 1 !important;
}
#home .home-pack-art .home-rare:nth-child(2) {
  transform: scale(1.06) !important;
  z-index: 3 !important;
  border-color: rgba(255,203,5,.45) !important;
}
#home .home-pack-art .home-rare:nth-child(3) { z-index: 2 !important; }
#home .home-pack-art .home-rare img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#home .home-ring {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Mobile only — stack the rail under main */
@media (max-width: 1050px) {
  #home .home-layout {
    grid-template-columns: 1fr !important;
  }
  #home .home-side-col,
  #home #home-side-rail {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  #home .home-side-col,
  #home #home-side-rail {
    grid-template-columns: 1fr !important;
  }
}

/* Persistent right rail — desktop */
@media (min-width: 1051px){
  .app-content{padding-right:340px!important}
  #home .home-layout{grid-template-columns:minmax(0,1fr)!important}
  .site-right-rail{
    position:fixed;z-index:35;top:78px;right:20px;bottom:18px;
    width:300px;display:flex;flex-direction:column;gap:.75rem;
    overflow-y:auto;padding-right:2px;
  }
  .site-right-rail .home-side-card{margin:0!important;width:100%}
}
@media (max-width: 1050px){
  body.home-active .app-content{padding-bottom:290px!important}
  .site-right-rail{
    position:fixed;z-index:35;left:8px;right:8px;bottom:8px;
    max-height:270px;display:flex;flex-direction:column;gap:.55rem;
    overflow-y:auto;padding:0 2px 2px;
  }
  .site-right-rail .home-side-card{margin:0!important;width:100%}
  .site-right-rail .home-card-head{padding:.5rem .75rem}
  .site-right-rail .home-quest{padding:.7rem .8rem}
  .site-right-rail .home-mini-leaderboard li{padding:.45rem .1rem}
  body:not(.home-active) .site-right-rail{display:none!important}
}

/* Final visual corrections */
#home .home-pack-art .home-rare,
#home .home-pack-art .home-rare:nth-child(1),
#home .home-pack-art .home-rare:nth-child(2),
#home .home-pack-art .home-rare:nth-child(3){
  transform:none!important;
  margin:0 .3rem!important;
}
#home .home-ring{
  width:92px!important;height:92px!important;
  min-width:92px!important;min-height:92px!important;
  max-width:92px!important;max-height:92px!important;
  flex:0 0 92px!important;aspect-ratio:1 / 1!important;
  border-radius:50%!important;
}
body.home-active .app-content{scrollbar-width:none}
body.home-active .app-content::-webkit-scrollbar{display:none}
@media (min-width:1051px){
  body.home-active .app-content{overflow-y:hidden!important}
}

/* Keep the featured card scans upright instead of fanned. */
#home .home-pack-art .home-rare img{transform:rotate(0deg)!important;transform-origin:center!important}
#home .home-pack-art .home-rare:nth-child(1) img{transform:rotate(8deg) scale(1.08)!important}
#home .home-pack-art .home-rare:nth-child(2) img{transform:rotate(0deg) scale(1.03)!important}
#home .home-pack-art .home-rare:nth-child(3) img{transform:rotate(-6deg) scale(1.07)!important}

/* On phones, place the Home activity cards after the dashboard content rather
   than floating them over it.  Desktop keeps the fixed right-hand rail. */
@media (max-width:1050px){
  body.home-active .app-content{padding-bottom:max(1.25rem, env(safe-area-inset-bottom, 0px))!important}
  #home-mobile-rail-mount{display:block;margin-top:.85rem}
  .site-right-rail{
    position:static!important;inset:auto!important;width:100%!important;
    max-height:none!important;display:flex!important;gap:.75rem!important;
    overflow:visible!important;margin:0!important;padding:0!important;
  }
  .site-right-rail .home-side-card{width:100%!important;margin:0!important}
}

/* ===== Live Trading Room (felt table) ===== */
.tr-shell{max-width:1180px;margin:0 auto}
.tr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tr-top h2{margin:0;font-size:1.35rem;color:var(--gold)}
.tr-top .tr-sub{color:var(--muted);font-size:.85rem;margin:0}
.tr-code{color:var(--gold);font-weight:900;letter-spacing:3px;background:#0a0e19;border:1px solid #3b4661;border-radius:8px;padding:7px 12px;font-size:.95rem}
.tr-room{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(200px,240px);gap:14px;min-height:560px}
@media(max-width:1100px){.tr-room{grid-template-columns:1fr;min-height:0}}
.tr-side{background:linear-gradient(180deg,#141b2c,#0e1422);border:1px solid #2a3550;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.tr-side-head{padding:12px 14px;border-bottom:1px solid #2a3550;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tr-side-head strong{font-size:.95rem}
.tr-online{color:#4ade80;font-size:.7rem;font-weight:800}
.tr-avatar{height:160px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#202b46,#0c111d 70%)}
.tr-sil{width:90px;height:130px;position:relative;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.tr-sil .s-head{position:absolute;top:2px;left:30px;width:30px;height:30px;border-radius:50%;background:#03050a;border:2px solid #303a52}
.tr-sil .s-body{position:absolute;top:30px;left:20px;width:50px;height:68px;background:#03050a;border-radius:22px 22px 12px 12px;border:2px solid #303a52}
.tr-sil .s-arm{position:absolute;top:36px;width:18px;height:66px;background:#03050a;border:2px solid #303a52;border-radius:12px}
.tr-sil .s-arm.l{left:4px;transform:rotate(12deg)}.tr-sil .s-arm.r{right:4px;transform:rotate(-12deg)}
.tr-sil .s-leg{position:absolute;top:90px;width:20px;height:40px;background:#03050a;border:2px solid #303a52;border-radius:6px}
.tr-sil .s-leg.l{left:22px}.tr-sil .s-leg.r{right:22px}
.tr-stats{padding:10px 14px;color:var(--muted);font-size:.78rem;border-bottom:1px solid #2a3550}
.tr-stats strong{color:var(--text)}

.tr-pick-panel{padding:10px 12px;border-top:1px solid #2a3550;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.tr-pick-panel .tr-hand-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:900;margin:0}
.tr-single{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:0}
.tr-single-art{width:100%;max-width:150px;aspect-ratio:2.5/3.5;border-radius:10px;border:2px solid #3a4560;background:#0b0e17;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tr-single-art img{width:100%;height:100%;object-fit:cover;display:block}
.tr-single-art.empty{display:grid;place-items:center;color:var(--muted);font-size:.72rem;font-weight:700;text-align:center;padding:8px}
.tr-single-name{font-size:.78rem;font-weight:800;color:var(--text);text-align:center;line-height:1.2;min-height:1.2em}
.tr-single-nav{display:flex;gap:6px;align-items:center;justify-content:center;width:100%}
.tr-single-nav button{padding:5px 10px;font-size:.75rem;border-radius:7px;border:1px solid #35415d;background:#151c2e;color:#fff;cursor:pointer;font-weight:700}
.tr-single-nav button:hover{border-color:var(--gold)}
.tr-single-nav .tr-idx{font-size:.72rem;color:var(--muted);min-width:3.5em;text-align:center}
.tr-waiting{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;color:var(--muted);font-size:.82rem;gap:8px;border-top:1px solid #2a3550}
.tr-waiting strong{color:var(--gold);font-size:.9rem}

.tr-center{min-width:0;display:flex;flex-direction:column;gap:10px}
.tr-table-wrap{position:relative;flex:1;min-height:420px;border:8px solid #51351f;border-radius:24px;background:linear-gradient(145deg,#6b4426,#3d2819);box-shadow:0 16px 48px rgba(0,0,0,.5),inset 0 0 0 2px #9b6b3c;padding:12px}
.tr-table{height:100%;min-height:400px;border-radius:16px;position:relative;overflow:hidden;background:
  radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.05),transparent 55%),
  linear-gradient(145deg,#173b2d,#0d281f);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.tr-table:before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.08);border-radius:12px;pointer-events:none}
.tr-table-label{position:absolute;top:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.18);font-weight:900;letter-spacing:5px;text-transform:uppercase;font-size:.7rem}
.tr-center-line{position:absolute;left:50%;top:12%;bottom:12%;border-left:1px dashed rgba(255,255,255,.09)}
.tr-side-label{position:absolute;font-size:.65rem;color:rgba(255,255,255,.32);font-weight:800;letter-spacing:1px}
.tr-side-label.top{top:42px;left:50%;transform:translateX(-50%)}
.tr-side-label.bottom{bottom:24px;left:50%;transform:translateX(-50%)}
.tr-zone{position:absolute;left:50%;transform:translateX(-50%);width:min(82%,520px);height:38%;border:1px dashed rgba(255,255,255,.12);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;flex-wrap:wrap;overflow:auto}
.tr-zone.top{top:14%}.tr-zone.bottom{bottom:12%}
.tr-zone.empty:after{content:"DROP CARDS HERE";color:rgba(255,255,255,.16);font-size:.68rem;font-weight:900;letter-spacing:2px}
.tr-zone .live-card-pick,.tr-zone .tr-table-card{
  width:78px;aspect-ratio:2.5/3.5;border-radius:8px;overflow:hidden;border:2px solid #d7c26b;background:#111;
  box-shadow:0 8px 20px rgba(0,0,0,.4);position:relative;cursor:pointer;padding:0;display:block
}
.tr-zone .live-card-pick img,.tr-zone .tr-table-card img{width:100%;height:100%;object-fit:cover;display:block}
.tr-zone .live-card-meta{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.78);padding:3px 4px;font-size:.55rem;color:#fff;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-zone .live-card-meta span{display:none}
.tr-zone .live-remove{position:absolute;top:2px;right:2px;background:rgba(180,30,30,.92);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.8rem;color:#fff;border:1px solid rgba(255,255,255,.35);z-index:6;pointer-events:auto;cursor:pointer}
.tr-zone .live-remove:hover{background:#ef4444;transform:scale(1.08)}
.tr-controls{background:linear-gradient(180deg,#12192a,#0d1320);border:1px solid #2a3550;border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tr-search{width:100%;padding:8px 10px;background:#0a0f1b;border:1px solid #2a3550;border-radius:8px;color:#fff;outline:none}
.tr-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
.tr-filter-select{width:100%;min-width:0;padding:7px 8px;background:#0a0f1b;border:1px solid #2a3550;border-radius:8px;color:#fff;outline:none;font-size:.72rem;font-weight:700}
.tr-filter-select:focus,.tr-search:focus{border-color:var(--gold)}
@media (max-width:760px){.tr-filter-row{grid-template-columns:1fr}}

.tr-lobby{padding:1.5rem;text-align:center;background:linear-gradient(160deg,#141b2c,#0e1422);border:1px solid #2a3550;border-radius:16px;margin-bottom:12px}
.tr-lobby .lobby-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;margin:.8rem 0}

.tr-zone.accepted{border-color:rgba(74,222,128,.55);box-shadow:inset 0 0 24px rgba(74,222,128,.12)}
.tr-zone-accept-banner{
  position:absolute;left:50%;transform:translateX(-50%);z-index:5;
  background:linear-gradient(90deg,#166534,#22c55e);color:#fff;font-weight:900;font-size:.72rem;
  letter-spacing:1.5px;padding:5px 14px;border-radius:999px;pointer-events:none;
  box-shadow:0 4px 16px rgba(34,197,94,.35);white-space:nowrap;
}
.tr-zone.top .tr-zone-accept-banner{top:8px}
.tr-zone.bottom .tr-zone-accept-banner{bottom:8px}
.tr-zone .live-card-pick{cursor:zoom-in;pointer-events:auto;z-index:3;position:relative}
.tr-zone .live-card-pick img{pointer-events:none}
.tr-zone .live-card-pick .live-remove{cursor:pointer;z-index:4;pointer-events:auto}
.tr-collect-label{
  position:fixed;left:50%;top:18%;transform:translate(-50%,-50%) scale(.8);
  z-index:402;font-weight:900;font-size:1.4rem;color:#ffcb05;letter-spacing:2px;
  text-shadow:0 4px 24px rgba(0,0,0,.8),0 0 20px rgba(255,203,5,.4);
  opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none;
}
.tr-collect-label.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.tr-fly-layer{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden}
.tr-fly-card{
  position:fixed;width:100px;aspect-ratio:2.5/3.5;border-radius:10px;overflow:hidden;
  border:2px solid #ffcb05;box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(255,203,5,.35);
  z-index:401;transition:transform 1.05s cubic-bezier(.2,.8,.2,1),opacity 1.05s ease;
}
.tr-fly-card img{width:100%;height:100%;object-fit:cover;display:block}
.tr-fly-card.fly-out{transform:translate(var(--fx),var(--fy)) scale(.15) rotate(12deg);opacity:0}

#trade.panel .trade-box{border:none;background:transparent;padding:0;box-shadow:none}

/* Premium opening altar — Open Packs only */
#open.panel{background:#0b0d17!important}
#open .open-premium-shell{
  max-width:none;width:100%;margin:0;height:100%;min-height:0;
  display:flex;flex-direction:column;gap:10px
}
#open .open-set-rail{margin:0!important;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;flex-shrink:0;overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin;padding-bottom:.3rem}
#open .open-set-rail button{border:1px solid #30374d;border-radius:9px;background:linear-gradient(180deg,#20283d,#14192a);color:#aeb8d4;font-weight:800;font-size:13px;padding:8px 13px;cursor:pointer;transition:.2s;flex-shrink:0;white-space:nowrap}
#open .open-set-rail button.active{color:#ffe36d;border-color:#e3b918;background:linear-gradient(180deg,#3a3210,#1e1904);box-shadow:0 0 18px #f1bd1e25}
body.open-active .app-content{
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
body.open-active #open.panel.active{
  flex:1;min-height:0;height:auto;
  display:flex;flex-direction:column;overflow:hidden;
}
#open .premium-pack-stage{
  flex:1;min-height:0 !important;
}
#open .premium-preview,
#open section.premium-preview{
  flex-shrink:0;
}
#open .premium-pack-stage{position:relative;min-height:560px;margin:0;border:1px solid rgba(246,207,99,.23);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#050608,#10100f 55%,#08090c);isolation:isolate;padding:0!important}#open .premium-pack-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 7% 28%,#ffd55c 0 1px,transparent 2px),radial-gradient(circle at 91% 19%,#fff1a4 0 1px,transparent 2px),radial-gradient(circle at 80% 72%,#f7bb3b 0 1px,transparent 2px),radial-gradient(circle at 19% 78%,#fedb75 0 1px,transparent 2px);opacity:.85;background-size:170px 170px,230px 230px,190px 190px,280px 280px;pointer-events:none}#open .premium-pack-stage:after{display:none}
#open .premium-set-stock{position:absolute;left:38px;top:42px;z-index:4;width:200px;border:1px solid #9b722a7d;border-radius:14px;padding:17px 18px;background:linear-gradient(135deg,#1d170dba,#0b0c0ded);box-shadow:inset 0 1px #fff1,0 8px 25px #0006}#open .premium-set-stock strong{display:block;font-size:15px}#open .premium-set-stock strong:before{content:"✦";color:#fff4d0;background:#e44e32;border-radius:50%;padding:1px 5px;margin-right:8px}#open .premium-set-stock span{display:block;margin-top:12px;font-size:13px;color:#d2d3d9}#open .premium-set-stock b{font-size:20px;color:#ffda4e;margin-right:5px}#open .premium-instruction{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:5;text-align:center;font-weight:800;font-size:13px;color:#f1f2f7;text-shadow:0 2px 8px #000}#open .premium-chevrons{font-size:34px;line-height:26px;color:#fff0bf;animation:premium-nudge 1.5s infinite}@keyframes premium-nudge{50%{transform:translateY(7px);opacity:.55}}
#open .premium-orbit,#open .premium-orbit:before,#open .premium-orbit:after{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.06);border-radius:50%;pointer-events:none;box-shadow:none}#open .premium-orbit{width:430px;height:430px}#open .premium-orbit:before,#open .premium-orbit:after{content:""}#open .premium-orbit:before{width:330px;height:330px}#open .premium-orbit:after{width:535px;height:535px;border-color:rgba(255,255,255,.04)}
#open #pack-idle{position:absolute;z-index:3;left:50%;top:48px;width:300px;height:500px;transform:translateX(-50%);background:transparent!important;overflow:visible}
#open #pack-idle .pack-visual{
  position:absolute;left:50%;top:70px;transform:translateX(-50%);
  width:205px!important;height:380px!important;margin:0;
  background:transparent!important;
  overflow:visible!important;
  filter:none!important;
  transition:transform .35s ease;
}
#open #pack-idle .pack-visual.swiping{transform:translateX(-50%)!important}
#open #pack-idle .pack-visual:hover{transform:translateX(-50%) translateY(-3px) scale(1.03)}
#open #pack-idle .pack-body{
  background:transparent!important;border-radius:0!important;overflow:visible!important;
  filter:none;
}
#open #pack-idle .pack-art-img{
  background:transparent!important;border-radius:0!important;
  object-fit:contain!important;
  filter:none;
}
#open #pack-idle .pack-swipe-hint{top:-4px;background:transparent!important;color:#f5f3ee;font-size:12px;padding:0;box-shadow:none}
#open #pack-idle .pack-swipe-hint:before{content:"Drag down or click to open";font-size:13px}
#open #pack-idle .pack-swipe-hint{font-size:0}
#open #pack-idle .pack-swipe-hint:after{content:"⌄";display:block;font-size:34px;line-height:23px;color:#fff0bf}

/* Pack art: kill forced black boxes; blend away pure-black padding in set pack PNGs */
#open .pack-visual,
#open .pack-body,
#open .pack-art-img,
#open #pack-idle .pack-visual,
#open #pack-idle .pack-body,
#open #pack-idle .pack-art-img{
  background:transparent!important;
}
#open #pack-idle .pack-art-img{
  /* pure black padding in set-pack renders vanishes on black stage */
  mix-blend-mode:lighten;
  filter:none;
}
#open #pack-idle .pack-body{
  mix-blend-mode:normal;
  filter:none;
}
/* Premium / already-transparent arts still look correct with lighten on black stage */

#open .premium-pedestal{position:absolute;left:50%;bottom:14px;width:min(620px,84vw);height:105px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 25%,#f4cb5f44 0 6%,transparent 7%),radial-gradient(ellipse at 50% 45%,#7d582134 0 30%,#0d0904 47%,#050505 61%,transparent 62%);filter:drop-shadow(0 18px 9px #000)}#open .premium-pedestal:before{content:"";position:absolute;inset:24px 10% 8px;border:2px solid #c9932c;opacity:.7;border-radius:50%;box-shadow:0 7px 0 5px #1d1408,0 13px 0 7px #d6a334,0 19px 0 12px #0c0906}#open .premium-pedestal:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,transparent 0 33%,#f7cc5130 35%,transparent 39%)}
#open #open-btn{position:absolute;z-index:6;bottom:12px;left:50%;transform:translateX(-50%);min-width:270px;border:2px solid #e6b64b;border-radius:16px;background:linear-gradient(180deg,#f65736,#b82414);color:#fff;padding:14px 25px;font-size:15px;font-weight:900;box-shadow:inset 0 1px #fff6,0 7px 17px #0009,0 0 22px #ef452d42}#open #open-btn:hover{filter:brightness(1.12);transform:translateX(-50%) translateY(-2px)}#open #pack-idle .btn-group{position:static;margin:0}
#open .pack-tear-line,#open .pack-tear-flash{display:none!important}#open #rip-stage{display:none!important}#open #reveal-stage{position:absolute;inset:0;z-index:8;background:transparent!important;padding:18px;justify-content:center!important}#open #reveal-stage .reveal-card-wrapper{width:220px;height:308px;filter:drop-shadow(0 14px 22px #000b)}#open #reveal-stage .opened-summary{display:none}/* 3D flip relies on backface-visibility — do not toggle visibility mid-turn */
#open .premium-preview{display:block;margin-top:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(130deg,#111216,#090a0d);padding:13px 20px 18px}.premium-preview .opened-summary{display:grid;grid-template-columns:repeat(11,minmax(40px,1fr));gap:10px;min-height:0}.premium-preview .mini-card{position:relative;width:auto;height:auto;aspect-ratio:2.5/3.5;border:1px solid #aa7d27;border-radius:7px;background:#0b0c0f;box-shadow:inset 0 0 15px #f4c55b20,0 5px 10px #0007;opacity:1;font-size:0;overflow:hidden;cursor:pointer}.premium-preview .mini-card.sealed img{width:100%;height:100%;object-fit:cover;display:block;transform:rotate(0deg) scale(1.04);transition:transform .45s ease,opacity .25s}.premium-preview .mini-card:not(.shown):after{content:none;display:none}.premium-preview .mini-card.shown{transform:none;border-width:2px}.premium-preview .mini-card.shown img{width:100%;height:100%;object-fit:cover;transform:rotate(0deg);transition:transform .45s ease}.premium-preview .mini-card.shown:hover{transform:translateY(-4px) scale(1.08)}.premium-reveal-controls{display:flex;justify-content:flex-end;margin:0 0 9px}.premium-reveal-all{border:1px solid #c3932b;border-radius:8px;background:linear-gradient(180deg,#2a1d08,#151008);color:#ffda63;font-weight:800;font-size:12px;padding:7px 12px;cursor:pointer}.premium-reveal-all:hover{filter:brightness(1.2)}
@media(max-width:780px){#open .premium-pack-stage{min-height:490px}#open .premium-set-stock{left:16px;top:16px;width:165px;padding:11px 12px}#open .premium-set-stock strong{font-size:12px}#open .premium-set-stock span{margin-top:6px}#open .premium-instruction{right:16px;left:auto;transform:none;top:16px;font-size:11px}#open .premium-orbit{width:310px;height:310px}#open .premium-orbit:before{width:235px;height:235px}#open .premium-orbit:after{width:385px;height:385px}#open #pack-idle{transform:translateX(-50%) scale(.82);transform-origin:top center;top:44px}.premium-preview{overflow-x:auto}.premium-preview .opened-summary{min-width:620px}#open #reveal-stage .reveal-card-wrapper{width:205px;height:287px}}@media(max-width:430px){#open .premium-set-stock{display:none}#open .premium-preview{padding:13px}.premium-preview .opened-summary{min-width:540px;gap:7px}}

/* ===== Player Profile ===== */
.pp-hero{position:relative;overflow:hidden;padding:1.5rem 1.4rem;border:1px solid #3c3026;border-radius:12px;background:linear-gradient(135deg,#19191d,#101115);box-shadow:inset 0 0 0 1px rgba(255,225,138,.04),0 18px 35px rgba(0,0,0,.35);margin-bottom:1rem}
.pp-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 48%,rgba(220,73,36,.05) 48% 52%,transparent 52%),radial-gradient(circle at 83% 20%,rgba(244,183,58,.12),transparent 19%);pointer-events:none}
.pp-top{position:relative;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.pp-avatar{width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:2.5rem;background:radial-gradient(circle at 40% 30%,#7d3a2e,#241617 62%);border:4px solid #b7781d;box-shadow:0 0 0 4px #0b0c10,0 0 22px rgba(226,75,39,.3);overflow:hidden}
.pp-avatar img{width:100%;height:100%;object-fit:cover}
.pp-name{font:700 clamp(1.6rem,4vw,2.6rem) Georgia,serif;color:#ffe19a;text-shadow:0 2px #44260d;margin:0}
.pp-tag{margin:6px 0;color:#c7b99a}
.pp-tag b{color:var(--gold)}
.pp-rank{display:inline-flex;align-items:center;gap:8px;margin-top:8px;border:1px solid #825b25;border-radius:40px;padding:6px 12px;background:#151015;color:#f4d270;font-weight:800;font-size:.88rem}
.pp-rank i{font-style:normal}
.pp-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pp-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:1.35rem}
.pp-stat{border:1px solid rgba(255,255,255,.08);background:rgba(8,9,13,.55);border-radius:8px;padding:12px 14px}
.pp-stat span{display:block;color:#aaa5a0;text-transform:uppercase;letter-spacing:.1em;font-size:.65rem}
.pp-stat b{display:block;color:#f6d16e;font:1.5rem Georgia,serif;margin-top:4px}
.pp-tabs{display:flex;gap:6px;margin:0 0 12px;overflow:auto}
.pp-tab{background:#14151a;border:1px solid #393037;border-radius:7px;padding:9px 15px;color:#c8c3bd;font-weight:800;cursor:pointer;white-space:nowrap}
.pp-tab.active{background:linear-gradient(#382016,#1d1311);color:#ffe190;border-color:#c78322;box-shadow:inset 0 2px #f6c94d}
.pp-content{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.78fr);gap:14px}
.pp-column{display:grid;gap:14px}
.pp-panel{border:1px solid #3c3026;background:linear-gradient(135deg,#19191d,#101115);border-radius:12px;padding:16px;box-shadow:inset 0 0 0 1px rgba(255,225,138,.04)}
.pp-panel h2{margin:0 0 12px;color:#f4d27d;font:1.2rem Georgia,serif}
.pp-panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:12px}
.pp-panel-head h2{margin:0}
.pp-panel-head button{border:0;background:none;color:var(--gold);cursor:pointer;font-weight:800;font-size:.85rem}
.pp-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.pp-card{min-height:150px;border:1px solid #7d5928;border-radius:8px;padding:8px;background:linear-gradient(135deg,#3d1717,#16182a 55%,#26140f);position:relative;overflow:hidden;cursor:pointer}
.pp-card .pp-art{height:95px;border-radius:5px;display:grid;place-items:center;background:#0d0d14;overflow:hidden}
.pp-card .pp-art img{width:100%;height:100%;object-fit:cover}
.pp-card b{display:block;font-size:.8rem;margin-top:8px;color:#f1d078}
.pp-card small{color:#bfa96d;font-size:.7rem}
.pp-progress-row{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center}
.pp-ring{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#af68f4 0 var(--pp-pct,40%),#2b2c32 0);position:relative}
.pp-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#111217}
.pp-ring b{z-index:1;color:#fff;font-size:.95rem}
.pp-bar{height:9px;border-radius:10px;overflow:hidden;background:#26262c;margin-top:8px}
.pp-bar i{display:block;height:100%;background:linear-gradient(90deg,#994fd8,#d496ff);border-radius:inherit;width:0}
.pp-goal{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.pp-goal:last-child{border:0}
.pp-goal-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#22170f;border:1px solid #85601f;color:#f5cf55;flex-shrink:0}
.pp-goal b{display:block}
.pp-goal span{color:#aba4a0;font-size:.76rem}
.pp-event{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.pp-event:last-child{border:0}
.pp-event-icon{color:var(--gold)}
.pp-event p{margin:0}
.pp-event small{color:#8e8a88}
.pp-event time{color:#8e8a88;font-size:.72rem}
.pp-achievements{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.pp-badge{aspect-ratio:1;border:1px solid #856023;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;background:radial-gradient(circle at 35% 25%,#864534,#281917 65%)}
.pp-badge.locked{filter:grayscale(1);opacity:.45}
.pp-empty{padding:28px;text-align:center;color:#aaa6a2}
.badge-identity{cursor:pointer}
.badge-identity:hover{filter:brightness(1.08)}
.badge-avatar{cursor:pointer}

/* Profile-style trainer/team directories */
.pp-player-directory{display:flex;flex-direction:column;gap:14px}
.pp-directory-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.pp-directory-head h2{margin:0;color:#f4d27d;font:1.2rem Georgia,serif}
.pp-directory-head p{margin:5px 0 0;color:#aaa5a0;font-size:.8rem}
.pp-directory-note{color:#8e8a88;font-size:.75rem}
.pp-online-dot,.pp-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5a6480;vertical-align:middle;margin-right:6px}
.pp-online-dot,.pp-status-dot.online{background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.75)}
.pp-player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.pp-player-card{
  appearance:none;width:100%;text-align:left;display:flex;align-items:center;gap:12px;
  border:1px solid #3c3026;border-radius:12px;padding:13px;background:linear-gradient(135deg,#19191d,#101115);
  color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,225,138,.03);transition:.15s;
}
.pp-player-card:hover,.pp-player-card.is-online:hover{transform:translateY(-2px);border-color:#c78322;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.pp-player-card.is-online{border-color:rgba(34,197,94,.28)}
.pp-player-avatar,.pp-team-member-avatar{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,#7d3a2e,#241617 62%);border:2px solid #7d5928;color:#f6d16e;
}
.pp-player-card.is-online .pp-player-avatar{border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.18)}
.pp-player-main{min-width:0;flex:1}
.pp-player-name{display:block;font-weight:800;color:#f1d078;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-player-handle{display:block;color:#8e8a88;font-size:.72rem;margin-top:2px}
.pp-player-status{display:block;color:#aaa5a0;font-size:.72rem;margin-top:5px}
.pp-player-stats{display:block;color:#c7b99a;font-size:.72rem;margin-top:4px}
.pp-player-arrow{color:var(--gold);font-weight:800;font-size:.8rem;white-space:nowrap}
.pp-player-badge{display:inline-block;border:1px solid #6f5a30;border-radius:999px;padding:1px 5px;margin-left:4px;font-size:.55rem;color:#f6d16e;vertical-align:middle}
.pp-player-badge.admin{border-color:rgba(227,53,13,.5);color:#f87171}
.pp-team-profile{display:flex;flex-direction:column;gap:14px}
.pp-team-hero{margin-bottom:0}
.pp-team-avatar{border-radius:18px}
.pp-team-hero .pp-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-team-hero .team-tag{font:800 .72rem/1 inherit}
.pp-team-members-panel{margin:0}
.pp-team-members-panel .pp-panel-head>span{color:#8e8a88;font-size:.75rem}
.pp-team-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pp-team-member{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px;background:rgba(8,9,13,.38)}
.pp-team-member.is-online{border-color:rgba(34,197,94,.3)}
.pp-team-member-top{display:flex;gap:10px;align-items:center}
.pp-team-member-avatar{width:44px;height:44px}
.pp-team-member.is-online .pp-team-member-avatar{border-color:#22c55e}
.pp-team-member-identity{min-width:0}
.pp-team-member-identity h3{margin:0;color:#f1d078;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-team-member-identity p{margin:3px 0 0;color:#8e8a88;font-size:.7rem}
.pp-team-member-stats{margin-top:9px;color:#b9b3a8;font-size:.72rem}
.pp-team-member-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
@media(max-width:700px){
  .pp-player-grid,.pp-team-member-grid{grid-template-columns:1fr}
  .pp-player-arrow{display:none}
}
@media(max-width:850px){
  .pp-stats{grid-template-columns:repeat(2,1fr)}
  .pp-content{grid-template-columns:1fr}
  .pp-actions{margin-left:0;width:100%}
}


#lw-win-overlay{
  position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .25s
}
#lw-win-overlay.show{opacity:1;pointer-events:auto}
.lw-win-card{
  position:relative;text-align:center;padding:1.5rem 1.75rem 1.25rem;border-radius:18px;
  background:linear-gradient(160deg,#1a1520,#0c0e16);border:1px solid rgba(255,203,5,.45);
  box-shadow:0 0 40px rgba(255,203,5,.25),0 20px 50px rgba(0,0,0,.5);max-width:min(340px,92vw);
  animation:lw-win-pop .55s cubic-bezier(.2,1.2,.3,1)
}
@keyframes lw-win-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.lw-win-burst{
  position:absolute;inset:-20%;background:radial-gradient(circle,rgba(255,203,5,.2),transparent 55%);
  animation:lw-win-burst 1.2s ease-out;pointer-events:none
}
@keyframes lw-win-burst{0%{transform:scale(.4);opacity:0}40%{opacity:1}100%{transform:scale(1.2);opacity:0}}
.lw-win-art{width:200px;height:280px;margin:0 auto .75rem;border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,203,5,.5);box-shadow:0 0 28px rgba(255,203,5,.35);background:#0b0e17;
  display:grid;place-items:center}
.lw-win-art img{width:100%;height:100%;object-fit:cover}
.lw-win-name{font:700 1.35rem Georgia,serif;color:#ffcb05;text-shadow:0 0 12px rgba(255,203,5,.35)}
.lw-win-sub{color:#9ca3af;font-size:.85rem;margin:.35rem 0 1rem}


/* Live pack-pick */
.lw-pick-board{margin:1rem 0;padding:1rem;border:1px solid rgba(255,203,5,.25);border-radius:14px;background:linear-gradient(160deg,#12182c,#0a0e18)}
.lw-pick-board h3{margin:0 0 .35rem;color:#ffcb05;font:1.05rem Georgia,serif}
.lw-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.65rem;margin-top:.75rem}
.lw-pick-tile{border:1px solid #3a4560;border-radius:14px;padding:.55rem .45rem .65rem;background:#0c101c;text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center}
.lw-pick-tile:hover:not(.taken):not(.mine){border-color:rgba(255,203,5,.5);transform:translateY(-2px)}
.lw-pick-tile.taken{opacity:.7;cursor:not-allowed}
.lw-pick-tile.mine{border-color:#ffcb05;box-shadow:0 0 16px rgba(255,203,5,.35)}
.lw-pick-tile .lw-pick-art{width:88px;height:124px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));margin-bottom:.4rem;border-radius:6px}
.lw-pick-tile .lw-pick-set{font-weight:800;color:#e8eef8;font-size:.85rem}
.lw-pick-tile .lw-pick-claim{font-size:.72rem;color:#8b9bb8;margin-top:.3rem;min-height:1.1em}
.lw-pick-tile.mine .lw-pick-claim{color:#ffcb05}
.lw-pick-tile .lw-pick-cards-hint{font-size:.65rem;color:#7df;margin-top:.2rem}
#lw-event-overlay.lw-picking .lw-stage{display:none!important}
#lw-event-overlay.lw-picking .lw-spin-btn{display:none!important}
#lw-event-overlay.lw-picking #lw-result{display:none!important}
#lw-event-overlay.lw-live #lw-pick-board{display:none!important}
.lw-results-overlay{position:fixed;inset:0;z-index:620;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.82)}
.lw-results-overlay.show{display:flex}
.lw-results-panel{width:min(920px,96vw);max-height:90vh;overflow:auto;border-radius:16px;border:1px solid rgba(255,203,5,.4);background:linear-gradient(160deg,#16120e,#0b0d14);padding:1.25rem 1.35rem;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.lw-results-panel h2{margin:0 0 .25rem;color:#ffcb05;font:1.4rem Georgia,serif}
.lw-results-row{margin:.85rem 0;padding:.85rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.28)}
.lw-results-row h3{margin:0 0 .55rem;color:#f1d078;font-size:1rem}
.lw-results-cards{display:flex;flex-wrap:wrap;gap:.5rem}
.lw-results-card{width:90px;text-align:center}
.lw-results-card img{width:90px;height:126px;object-fit:cover;border-radius:8px;border:1px solid #7d5928;background:#0b0e17}
.lw-results-card span{display:block;font-size:.65rem;color:#c9c0ad;margin-top:.25rem;line-height:1.2}


/* App update prompt */
#app-update-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  padding:1rem;
}
#app-update-modal.show{display:flex}
#app-update-modal .au-card{
  width:min(420px,94vw);
  background:linear-gradient(160deg,#1a2035,#0f1320);
  border:1px solid rgba(255,203,5,.45);
  border-radius:16px;
  padding:1.35rem 1.4rem 1.2rem;
  box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 24px rgba(255,203,5,.12);
  text-align:center;
}
#app-update-modal .au-icon{font-size:2rem;margin-bottom:.35rem}
#app-update-modal h3{
  margin:0 0 .4rem;color:var(--gold);font-size:1.25rem;font-weight:800;
}
#app-update-modal p{
  margin:0 0 1.1rem;color:var(--muted);font-size:.92rem;line-height:1.45;
}
#app-update-modal .au-btn{
  width:100%;padding:.85rem 1rem;font-size:1rem;font-weight:800;
  border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#e3350d,#ff5a2a);
  color:#fff;box-shadow:0 6px 18px rgba(227,53,13,.35);
}
#app-update-modal .au-btn:hover{filter:brightness(1.08)}
#app-update-modal .au-ver{
  margin-top:.7rem;font-size:.72rem;color:#5a6480;
}

/* Force refresh — admin-triggered, not dismissible */
#force-refresh-modal{
  display:none;position:fixed;inset:0;z-index:10000;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);backdrop-filter:blur(5px);
  padding:1rem;
}
#force-refresh-modal.show{display:flex}
#force-refresh-modal .fr-card{
  width:min(400px,94vw);
  background:linear-gradient(160deg,#1a2035,#0f1320);
  border:1px solid rgba(227,53,13,.5);
  border-radius:16px;
  padding:1.5rem 1.4rem 1.3rem;
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 24px rgba(227,53,13,.18);
  text-align:center;
}
#force-refresh-modal .fr-icon{font-size:2.2rem;margin-bottom:.4rem;animation:pulse 1.5s ease-in-out infinite}
#force-refresh-modal h3{margin:0 0 .5rem;color:#fff;font-size:1.25rem;font-weight:800}
#force-refresh-modal p{margin:0 0 1.2rem;color:var(--muted);font-size:.9rem;line-height:1.45}
#force-refresh-modal .fr-btn{
  width:100%;padding:.85rem 1rem;font-size:1rem;font-weight:800;
  border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#e3350d,#ff5a2a);
  color:#fff;box-shadow:0 6px 18px rgba(227,53,13,.4);
}
#force-refresh-modal .fr-btn:hover{filter:brightness(1.08)}


/* First Charizard global milestone banner */
#first-zard-banner{
  display:none;position:fixed;inset:0;z-index:9000;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
  padding:1rem;
}
#first-zard-banner.show{display:flex;animation:fz-in .35s ease-out}
@keyframes fz-in{from{opacity:0}to{opacity:1}}
#first-zard-banner .fz-card{
  position:relative;width:min(480px,94vw);
  background:linear-gradient(155deg,#1a1408 0%,#0f1320 45%,#1a1008 100%);
  border:2px solid rgba(255,203,5,.65);
  border-radius:18px;padding:1.4rem 1.35rem 1.25rem;
  box-shadow:0 0 40px rgba(255,203,5,.25),0 24px 60px rgba(0,0,0,.6);
  text-align:center;overflow:hidden;
}
#first-zard-banner .fz-card:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,203,5,.18),transparent 55%);
}
#first-zard-banner .fz-flash{
  position:absolute;inset:-20%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,transparent,rgba(255,203,5,.35),transparent 40%);
  animation:fz-spin 2.5s linear infinite;
}
@keyframes fz-spin{to{transform:rotate(360deg)}}
#first-zard-banner .fz-kicker{
  position:relative;font-size:.72rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);margin-bottom:.35rem;
}
#first-zard-banner .fz-title{
  position:relative;margin:0 0 .75rem;font-size:1.55rem;font-weight:900;
  color:#fff;letter-spacing:.02em;
  text-shadow:0 0 20px rgba(255,203,5,.45);
}
#first-zard-banner .fz-art{
  position:relative;width:min(200px,46vw);aspect-ratio:2.5/3.5;margin:0 auto .85rem;
  border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,203,5,.5);
  box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 24px rgba(255,203,5,.2);
  background:#0a0e18;
}
#first-zard-banner .fz-art img{width:100%;height:100%;object-fit:cover;display:block}
#first-zard-banner .fz-who{
  position:relative;font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.25rem;
}
#first-zard-banner .fz-who strong{color:var(--gold)}
#first-zard-banner .fz-sub{
  position:relative;font-size:.85rem;color:var(--muted);margin-bottom:1rem;
}
#first-zard-banner .fz-dismiss{
  position:relative;width:100%;padding:.75rem 1rem;border:none;border-radius:10px;
  font-weight:800;font-size:.95rem;cursor:pointer;
  background:linear-gradient(135deg,#e3350d,#ff5a2a);color:#fff;
  box-shadow:0 6px 16px rgba(227,53,13,.35);
}
#first-zard-banner .fz-dismiss:hover{filter:brightness(1.08)}


/* ===== lw-profile-theme ===== */
/* ===== LIVE PRIZE WHEEL — Profile / Achievements visual theme ===== */
#lw-event-overlay{
  background:
    radial-gradient(circle at 16% 0%,rgba(244,183,58,.08),transparent 30%),
    radial-gradient(circle at 92% 18%,rgba(255,203,5,.055),transparent 28%),
    #0b0907 !important;
  color:#f5f1e8;
}
#lw-event-overlay .lw-wrap{
  max-width:1240px;
  padding:1rem 1.25rem 3rem;
}
#lw-event-overlay .lw-hero{
  background:
    linear-gradient(120deg,rgba(43,29,12,.98),rgba(20,16,11,.98) 55%,rgba(39,25,10,.98)),
    radial-gradient(circle at 82% 50%,rgba(255,203,5,.18),transparent 36%);
  border:1px solid rgba(246,207,99,.32);
  box-shadow:0 0 0 1px rgba(255,203,5,.05),0 18px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  min-height:105px;
  display:flex;flex-direction:column;justify-content:center;
}
#lw-event-overlay .lw-hero::before{
  background:
    radial-gradient(ellipse 55% 90% at 82% 50%,rgba(246,183,58,.14),transparent 58%),
    linear-gradient(90deg,transparent,rgba(255,203,5,.035));
}
#lw-event-overlay .lw-hero h2{
  background:linear-gradient(90deg,#fff 0%,#f7e6b0 45%,#f6c94f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.65rem;letter-spacing:.2px;
}
#lw-event-overlay .lw-hero p{color:#a9a19a}
#lw-event-overlay .lw-badge{
  background:rgba(227,53,13,.13);border-color:rgba(227,53,13,.55);color:#ff6b4a;
}
#lw-event-overlay .lw-room-header{
  padding:.7rem .15rem .65rem;
  border-bottom:1px solid rgba(246,207,99,.16);
  margin-bottom:.8rem;
}
#lw-event-overlay .lw-room-header > div:first-child > div:first-child{
  color:#f6cf63 !important;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
#lw-event-overlay .lw-status-pill{
  background:rgba(246,207,99,.07);border-color:rgba(246,207,99,.28);color:#f6cf63;
}
#lw-event-overlay .lw-status-pill.spinning{
  background:rgba(246,183,58,.13);border-color:rgba(246,183,58,.55);color:#ffd45d;
}
#lw-event-overlay .lw-card,
#lw-event-overlay .lw-pick-board{
  background:linear-gradient(160deg,#17130e,#0f0d0a);
  border-color:rgba(246,207,99,.24);
  box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.025);
}
#lw-event-overlay .lw-card h3,
#lw-event-overlay .lw-pick-board h3{color:#f6cf63}
#lw-event-overlay .lw-presence-chip{
  background:#15120e;border-color:#3a3021;color:#ded7ca;
}
#lw-event-overlay .lw-presence-chip.you{
  border-color:rgba(246,207,99,.52);color:#f6cf63;
}
#lw-event-overlay .lw-presence-chip.spinner{
  border-color:#f6cf63;color:#f6cf63;box-shadow:0 0 14px rgba(246,207,99,.18);
}
#lw-event-overlay .lw-stage{
  background:linear-gradient(160deg,rgba(25,20,13,.72),rgba(9,8,6,.84));
  border:1px solid rgba(246,207,99,.23);
  border-radius:16px;
  padding:1rem 1rem 1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 15px 35px rgba(0,0,0,.3);
}
#lw-event-overlay .lw-stage::before{
  content:'PRIZE WHEEL';
  align-self:flex-start;
  color:#f6cf63;font-size:.72rem;font-weight:900;letter-spacing:.12em;
  margin:0 0 .55rem .15rem;
}
#lw-event-overlay .lw-case{
  width:min(1060px,100%);
  height:205px;
  border-radius:15px;
  background:linear-gradient(180deg,#100e0a,#070706);
  border:1px solid rgba(246,207,99,.5);
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 18px 45px rgba(0,0,0,.55),inset 0 0 45px rgba(246,183,58,.045);
}
#lw-event-overlay .lw-case-item{
  flex-basis:150px;width:150px;height:177px;margin:0 6px;
  border-radius:11px;
  border-color:#5c4a27;
  background:linear-gradient(160deg,#17140f,#0b0a08);
  box-shadow:inset 0 0 22px rgba(0,0,0,.4);
}
#lw-event-overlay .lw-case-item.mystery{
  border-color:#8e70d1;box-shadow:0 0 12px rgba(142,112,209,.18);
}
#lw-event-overlay .lw-case-item.rarity-rare,
#lw-event-overlay .lw-case-item.rarity-epic{
  border-color:#c5a95a;box-shadow:0 0 14px rgba(246,207,99,.14);
}
#lw-event-overlay .lw-case-item.rarity-legendary,
#lw-event-overlay .lw-case-item.winner{
  border-color:#f6cf63 !important;
  box-shadow:0 0 0 2px #f6cf63,0 0 30px rgba(246,207,99,.4) !important;
}
#lw-event-overlay .lw-case-marker{
  background:linear-gradient(180deg,#fff1a6,#f6b73a);
  box-shadow:0 0 14px rgba(246,207,99,.8),0 0 30px rgba(246,183,58,.35);
}
#lw-event-overlay .lw-case-marker:before{border-top-color:#f6cf63}
#lw-event-overlay .lw-case-marker:after{border-bottom-color:#f6cf63}
#lw-event-overlay .lw-case-item .lw-ci-label{
  background:linear-gradient(180deg,rgba(10,8,6,.7),rgba(10,8,6,.94));
  color:#eee5d4;
}
#lw-event-overlay .lw-case-item.mystery .lw-ci-label{color:#cbbcf1}
#lw-event-overlay .lw-spin-btn{
  background:linear-gradient(135deg,#f6cf63,#d99527);
  color:#181108;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 5px 22px rgba(246,183,58,.28);
}
#lw-event-overlay .lw-result{
  width:min(390px,90%);margin:1rem auto 0;padding:.85rem 1rem;
  border:1px solid rgba(246,207,99,.18);border-radius:12px;
  background:rgba(0,0,0,.24);
}
#lw-event-overlay .lw-result .prize-name{color:#f6cf63}
#lw-event-overlay .lw-pick-tile{
  background:#0e0c09;border-color:#4c402b;
}
#lw-event-overlay .lw-pick-tile.mine{
  border-color:#f6cf63;box-shadow:0 0 16px rgba(246,207,99,.22)
}
#lw-event-overlay #lw-host-controls{
  margin-top:1rem;
}
#lw-event-overlay .lw-admin-row{
  gap:.55rem;
}
#lw-event-overlay .lw-admin-row .btn,
#lw-event-overlay .btn.btn-secondary{
  border-color:#3c3428;
  background:linear-gradient(160deg,#1a1712,#11100d);
  color:#eee7da;
}
#lw-event-overlay .lw-admin-row .btn:hover,
#lw-event-overlay .btn.btn-secondary:hover{
  border-color:rgba(246,207,99,.45);filter:brightness(1.08)
}
#lw-event-overlay .lw-msg{color:#c9c0ad}
#lw-win-overlay{background:rgba(7,6,4,.82)}
#lw-win-overlay .lw-win-card{
  background:linear-gradient(160deg,#21180d,#0d0b08);
  border-color:rgba(246,207,99,.55);
  box-shadow:0 0 45px rgba(246,183,58,.22),0 20px 60px rgba(0,0,0,.65);
}
#lw-win-overlay .lw-win-name{color:#f6cf63}
#lw-results-overlay{background:rgba(7,6,4,.86)}
#lw-results-overlay .lw-results-panel{
  background:linear-gradient(160deg,#18130d,#0b0a08);
  border-color:rgba(246,207,99,.4);
}
#lw-results-overlay .lw-results-panel h2{color:#f6cf63}
@media(max-width:700px){
  #lw-event-overlay .lw-wrap{padding-left:.7rem;padding-right:.7rem}
  #lw-event-overlay .lw-case{height:175px}
  #lw-event-overlay .lw-case-item{flex-basis:125px;width:125px;height:150px}
}





/* Auction house rows */
.mkt-listing-row.auc-row{align-items:flex-start}
.auc-meta-line{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.auc-meta-line strong{color:#e8eef8;font-weight:700}
.auc-actions{display:flex;flex-direction:column;gap:.35rem;align-items:stretch;min-width:120px}
.auc-actions input[type=number]{
  width:100%;padding:.3rem .4rem;border-radius:8px;border:1px solid #2a314d;
  background:#0f1320;color:var(--text);font-size:.8rem
}
.auc-badge{font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;display:inline-block}
.auc-badge.winning{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.35)}
.auc-badge.outbid{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.35)}
.auc-badge.mine{background:rgba(255,203,5,.12);color:var(--gold);border:1px solid rgba(255,203,5,.35)}
.auc-time{color:#fbbf24;font-weight:700;font-variant-numeric:tabular-nums}
/* ===== Market sold popup ===== */
#market-sold-modal.trade-modal{display:none;z-index:12500}
#market-sold-modal.open{display:flex}
#market-sold-modal .ms-card{
  background:linear-gradient(165deg,#1c1914 0%,#141210 50%,#0e1016 100%);
  border:2px solid rgba(34,197,94,.45);
  border-radius:16px;padding:1.35rem 1.4rem;max-width:380px;width:100%;
  text-align:center;box-shadow:0 0 40px rgba(34,197,94,.18),0 20px 50px rgba(0,0,0,.6);
}
#market-sold-modal .ms-eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#4ade80;margin-bottom:.35rem}
#market-sold-modal .ms-title{font-family:Georgia,serif;font-size:1.35rem;color:#f9d979;margin:0 0 .75rem;text-shadow:0 1px 0 #3e2309}
#market-sold-modal .ms-art{width:110px;height:154px;object-fit:contain;border-radius:10px;margin:0 auto .75rem;display:block;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#market-sold-modal .ms-art.hidden{display:none}
#market-sold-modal .ms-line{color:#e8eef8;font-size:.95rem;line-height:1.45;margin:0 0 .35rem}
#market-sold-modal .ms-price{font-size:1.35rem;font-weight:900;color:#4ade80;margin:.5rem 0 1rem}
#market-sold-modal .ms-btn{width:100%}
/* ===== Live flash announcement (online only) ===== */
#live-flash-announcement{
  display:none;position:fixed;inset:0;z-index:20000;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  padding:1.25rem;pointer-events:none;
}
#live-flash-announcement.show{display:flex}
.live-flash-text{
  max-width:min(720px,94vw);
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(1.5rem,5vw,2.6rem);
  font-weight:900;line-height:1.25;
  color:#fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.85),
    0 0 18px rgba(0,0,0,.55),
    0 0 40px rgba(255,203,5,.25);
  white-space:pre-wrap;word-break:break-word;
  pointer-events:none;
  animation:liveFlashShake 0.55s ease-in-out infinite;
}
.live-flash-text.color-gold{
  color:#ffcb05;
  text-shadow:0 2px 0 #3e2309,0 0 22px rgba(255,203,5,.45),0 0 40px rgba(255,203,5,.25);
}
.live-flash-text.color-green{
  color:#4ade80;
  text-shadow:0 2px 0 #052e16,0 0 22px rgba(74,222,128,.45);
}
.live-flash-text.color-red{
  color:#f87171;
  text-shadow:0 2px 0 #450a0a,0 0 22px rgba(248,113,113,.45);
}
.live-flash-text.color-blue{
  color:#60a5fa;
  text-shadow:0 2px 0 #172554,0 0 22px rgba(96,165,250,.45);
}
.live-flash-text.color-rainbow{
  background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80,#60a5fa,#c084fc,#f472b6);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,255,255,.2));
}
@keyframes liveFlashShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-4px,1px) rotate(-0.8deg)}
  20%{transform:translate(4px,-1px) rotate(0.8deg)}
  30%{transform:translate(-3px,2px) rotate(-0.5deg)}
  40%{transform:translate(3px,-2px) rotate(0.5deg)}
  50%{transform:translate(-2px,1px) rotate(-0.3deg)}
  60%{transform:translate(2px,1px) rotate(0.3deg)}
  70%{transform:translate(-1px,-1px) rotate(-0.2deg)}
  80%{transform:translate(1px,1px) rotate(0.2deg)}
  90%{transform:translate(0,0) rotate(0)}
}
.live-flash-timer{
  position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);
  font-size:.78rem;font-weight:700;color:rgba(255,255,255,.65);
  font-variant-numeric:tabular-nums;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* ===== Echo Pulls live banner ===== */
#echo-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:9500;
  justify-content:center;pointer-events:none;padding:.55rem .75rem;
}
#echo-banner.show{display:flex}
.echo-banner-inner{
  pointer-events:auto;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  max-width:min(720px,96vw);
  padding:.55rem .95rem;
  border-radius:12px;
  background:linear-gradient(105deg,#1a1020 0%,#12141c 50%,#0f1a14 100%);
  border:1px solid rgba(74,222,128,.45);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 24px rgba(74,222,128,.15);
}
.echo-banner-ico{font-size:1.35rem;line-height:1}
.echo-banner-copy{flex:1;min-width:140px;text-align:left}
.echo-banner-title{font-weight:800;color:#4ade80;font-size:.88rem;letter-spacing:.02em}
.echo-banner-sub{font-size:.72rem;color:#9ca3af;margin-top:.1rem}
.echo-banner-timer{
  font-variant-numeric:tabular-nums;font-weight:900;font-size:1.15rem;
  color:#fff;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);
  padding:.35rem .65rem;border-radius:8px;min-width:4.2rem;text-align:center;
}
.echo-banner-timer.urgent{color:#fbbf24;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.1)}
body.echo-active .app-topbar{box-shadow:0 1px 0 rgba(74,222,128,.25)}
/* ===== Daily Luck Wheel — centered-icon pie ===== */
#daily-wheel-modal{
  display:none;position:fixed;inset:0;z-index:13000;background:rgba(7,6,4,.88);
  align-items:center;justify-content:center;padding:1rem;
}
#daily-wheel-modal.open{display:flex}
.dw-panel{
  background:linear-gradient(165deg,#1c1914 0%,#141210 42%,#0e1016 100%);
  border:1px solid rgba(255,203,5,.35);border-radius:14px;
  padding:0;max-width:440px;width:100%;
  box-shadow:0 0 45px rgba(246,183,58,.16),0 20px 60px rgba(0,0,0,.65);
  text-align:center;position:relative;overflow:hidden;
}
.dw-panel-hero{
  padding:1.05rem 1.25rem .85rem;
  border-bottom:1px solid rgba(255,203,5,.14);
  background:linear-gradient(105deg,#1c1914 0%,#141210 48%,#12141a 100%);
  position:relative;
}
.dw-panel-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 55%,rgba(255,192,61,.06) 55% 56%,transparent 56%);
}
.dw-eyebrow{color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .15rem}
.dw-panel-hero h2{
  font-family:Georgia,serif;font-size:clamp(1.35rem,3.2vw,1.85rem);
  margin:0 0 .25rem;color:#f9d979;text-shadow:0 2px 0 #3e2309;position:relative;z-index:1;
}
.dw-sub{color:#96918b;font-size:.82rem;margin:0;line-height:1.4;position:relative;z-index:1}
.dw-panel-body{padding:1rem 1.15rem 1.25rem}
.dw-wheel-wrap{
  position:relative;width:min(320px,82vw);height:min(320px,82vw);
  margin:0 auto .9rem;
}
.dw-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:10;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:26px solid #f6ca44;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
#dw-canvas{
  display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:
    0 0 0 4px #c9a227,
    0 0 0 7px #5a4500,
    0 0 0 10px #e8c547,
    0 0 28px rgba(255,203,5,.3),
    0 10px 30px rgba(0,0,0,.45);
  background:#1a1520;
}
.dw-hub-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 38% 30%,#f6ca44,#ac6911 55%,#5a4500);
  border:3px solid #fff8;
  color:#1a1200;font-weight:900;font-size:.78rem;letter-spacing:.04em;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  user-select:none;outline:none;
}
.dw-hub-btn:hover:not(:disabled){filter:brightness(1.08)}
.dw-hub-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25)}
.dw-hub-btn:active:not(:disabled){transform:translate(-50%,-50%) scale(.95)}
.dw-legend{
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem .55rem;
  text-align:left;margin:0 0 .9rem;
  padding:.5rem .55rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28);
}
.dw-leg-item{
  display:flex;align-items:center;gap:.4rem;
  font-size:.74rem;color:#e6d6ad;font-weight:700;line-height:1.2;
}
.dw-leg-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,.25)}
.dw-leg-ico{font-size:.95rem;width:1.2rem;text-align:center;flex-shrink:0}
.dw-spin-btn{
  width:100%;padding:.75rem 1rem;font-size:1.05rem;font-weight:900;
  border-radius:12px;border:2px solid #b77b19;
  background:linear-gradient(180deg,#f6ca44,#ac6911);color:#1a1200;
  cursor:pointer;box-shadow:0 4px 18px rgba(255,203,5,.3);
  letter-spacing:.06em;
}
.dw-spin-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.dw-spin-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35);box-shadow:none}
.dw-result{
  display:none;margin-top:.85rem;padding:.8rem .9rem;border-radius:10px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,203,5,.35);
}
.dw-result.show{display:block}
.dw-result-title{font-family:Georgia,serif;font-weight:800;color:#f9d979;font-size:1.1rem;margin-bottom:.25rem;text-shadow:0 1px 0 #3e2309}
.dw-result-desc{color:#c5bca8;font-size:.86rem;line-height:1.4}
.dw-result-timer{margin-top:.45rem;font-size:.72rem;color:#96918b}
.dw-close{
  position:absolute;top:10px;right:12px;background:none;border:none;z-index:2;
  color:#96918b;font-size:1.35rem;cursor:pointer;line-height:1;
}
.dw-close:hover{color:#f9d979}
.dw-buffs{margin-top:.55rem;font-size:.75rem;color:#c9a227;min-height:1.1em}
@keyframes dw-ready-shake{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-3px) rotate(-1.5deg)}
  24%{transform:translateX(3px) rotate(1.5deg)}
  36%{transform:translateX(-3px) rotate(-1deg)}
  48%{transform:translateX(3px) rotate(1deg)}
  60%{transform:translateX(-2px) rotate(-.5deg)}
  72%{transform:translateX(2px) rotate(.5deg)}
  84%{transform:translateX(0) rotate(0)}
}
.home-stat-card.dw-stat{cursor:pointer}
.home-stat-card.dw-stat:hover{border-color:rgba(255,203,5,.35);background:linear-gradient(135deg,rgba(255,203,5,.1),rgba(255,255,255,.02))}
.home-stat-card.dw-stat .home-stat-icon{background:rgba(255,203,5,.14);border-color:rgba(183,123,25,.4)}
.home-stat-card.dw-stat.dw-ready{
  animation:dw-ready-shake 1.8s ease-in-out infinite;
  border-color:rgba(255,203,5,.45);
  box-shadow:0 0 0 1px rgba(255,203,5,.2),0 10px 24px rgba(0,0,0,.14);
}
@media(min-width:700px){
  .home-stat-grid.home-stat-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:520px){
  .dw-case{height:150px}
  .dw-case-item{flex-basis:96px;width:96px;height:130px}
  .dw-case-item .dw-ci-emoji{font-size:1.6rem}
  .dw-case-item .dw-ci-label{font-size:.6rem}
}


.dw-home-card .dw-home-btn{min-width:140px}


/* ===== Home Countdown Banner ===== */
.home-countdown-banner{
  position:relative;overflow:hidden;margin:0 0 1rem;border:1px solid rgba(255,203,5,.42);
  border-radius:18px;
  background:radial-gradient(circle at 15% 25%,rgba(255,203,5,.16),transparent 34%),
             radial-gradient(circle at 85% 75%,rgba(168,85,247,.18),transparent 36%),
             linear-gradient(135deg,#11162a,#0d1020 55%,#171126);
  box-shadow:0 12px 32px rgba(0,0,0,.28);isolation:isolate
}
.home-countdown-banner.hcb-purple{border-color:rgba(192,132,252,.55)}
.home-countdown-banner.hcb-red{border-color:rgba(248,113,113,.55)}
.home-countdown-banner.hcb-blue{border-color:rgba(96,165,250,.55)}
.home-countdown-banner.hcb-green{border-color:rgba(74,222,128,.55)}
.hcb-glow{position:absolute;inset:-70px;background:conic-gradient(from 90deg,transparent,rgba(255,203,5,.08),transparent 30%,rgba(168,85,247,.08),transparent 65%);animation:hcbSpin 14s linear infinite;z-index:-1}
@keyframes hcbSpin{to{transform:rotate(360deg)}}
.hcb-content{position:relative;padding:1.05rem 1.1rem 1.15rem;text-align:center}
.hcb-kicker{font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.22rem}
.hcb-purple .hcb-kicker{color:#c084fc}.hcb-red .hcb-kicker{color:#f87171}.hcb-blue .hcb-kicker{color:#60a5fa}.hcb-green .hcb-kicker{color:#4ade80}
.hcb-content h2{margin:0;color:#fff;font-size:clamp(1.2rem,2.8vw,1.75rem);line-height:1.1}
.hcb-content p{margin:.35rem auto .8rem;color:#b7bbca;font-size:.84rem;max-width:720px}
.hcb-countdown{display:flex;justify-content:center;gap:.5rem;flex-wrap:nowrap}
.hcb-countdown>div{min-width:70px;padding:.55rem .45rem .45rem;border-radius:12px;background:rgba(8,11,20,.72);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hcb-countdown strong{display:block;color:#fff;font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums}
.hcb-countdown span{display:block;margin-top:.25rem;color:#858ba3;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.hcb-button{margin-top:.75rem}
@media(max-width:600px){.hcb-countdown{gap:.25rem;flex-wrap:nowrap}.hcb-countdown>div{min-width:58px;padding:.45rem .25rem}.hcb-countdown strong{font-size:1.05rem}}

/* ===== Team Rocket duel ===== */
.rocket-battle-slot{
  background:#12121c;border:1px solid #2a2a3a;border-radius:14px;padding:.9rem;text-align:center;
}
.rocket-card-face{
  width:100%;aspect-ratio:3/4;max-height:180px;border-radius:10px;background:#0b0b12;
  display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #23233a;
}
.rocket-card-face img{ width:100%;height:100%;object-fit:contain; }
.rocket-hpbar{
  width:100%;height:8px;border-radius:6px;background:#23233a;overflow:hidden;margin-top:.3rem;
}
.rocket-hpbar i{
  display:block;height:100%;border-radius:6px;transition:width .5s ease;
}
.rocket-wager-pick{
  flex:0 0 auto;width:92px;background:#12121c;border:1px solid #2a2a3a;border-radius:10px;
  padding:.5rem;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:.3rem;
  cursor:pointer;font-size:.72rem;
}
.rocket-wager-pick img{ width:56px;height:56px;object-fit:contain; }
.rocket-wager-pick.active{ border-color:#ff6b5c;box-shadow:0 0 0 2px rgba(255,107,92,.3); }
.rocket-wager-pick:disabled{ opacity:.5;cursor:not-allowed; }

/* Trade remove button: keep it above the card's zoom click target */
.tr-zone .live-card-pick .live-remove{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;line-height:1;
  position:absolute!important;top:3px!important;right:3px!important;z-index:30!important;
  width:25px!important;height:25px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;pointer-events:auto!important;
  cursor:pointer!important;touch-action:manipulation;background:#dc2626!important;color:#fff!important;
  border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 2px 8px rgba(0,0,0,.55)!important;
}
.tr-zone .live-card-pick .live-remove:hover{background:#ef4444!important;transform:scale(1.08)}

/* Team Rocket battle timing minigame */
@keyframes rocketDodgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(239,68,68,.6)}50%{transform:scale(1.06);box-shadow:0 0 22px rgba(239,68,68,.6)}}
#rocket-dodge-btn{animation:rocketDodgePulse .5s ease-in-out infinite}
#rocket-timing-marker{transition:left .015s linear}