/* Pack picker (setpicker.js), Nov 3 2026 */
.picker.sp-on { display:block; margin:16px auto 6px; max-width:400px; padding:0 16px; }
.picker.sp-on > label, .picker.sp-on > select, .picker.sp-on > .info-btn { display:none; }
#spBox { text-align:left; }
.sp-lab { text-align:center; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffcb05; margin-bottom:6px; }
.sp-btn { display:flex; align-items:center; gap:12px; width:100%; padding:8px 14px 8px 8px; border-radius:14px; cursor:pointer; font:inherit; color:var(--ink); text-align:left;
  background:rgba(20,21,44,.9); border:1.5px solid rgba(255,203,5,.55); box-shadow:0 0 0 4px rgba(255,203,5,.08), 0 8px 20px rgba(0,0,0,.35); transition:border-color .15s, box-shadow .15s; }
.sp-btn:hover { border-color:#ffcb05; box-shadow:0 0 0 4px rgba(255,203,5,.14), 0 8px 20px rgba(0,0,0,.35); }
.sp-btn:focus-visible, .sp-opt:focus-visible, .sp-x:focus-visible, .sp-change:focus-visible, .sp-info:focus-visible { outline:2px solid #ffcb05; outline-offset:2px; }
.sp-th { flex:none; position:relative; width:30px; aspect-ratio:5/8; border-radius:3px; overflow:hidden; background:#22244a; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.sp-th.big { width:42px; }
.sp-th img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-th.logo { background:linear-gradient(160deg,#3b3f7a,#1c1e3d 70%); } .sp-th.logo img { object-fit:contain; padding:14% 6%; box-sizing:border-box; }
.sp-cur { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sp-cur b { font-size:16.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-cur span { font-size:12.5px; color:var(--muted); }
.sp-ch { flex:none; font-size:12.5px; font-weight:800; color:#ffcb05; }
.sp-hint { text-align:center; font-size:13px; color:var(--muted); margin-top:9px; line-height:1.45; } .sp-hint b { color:var(--ink); }
.sp-info { font:inherit; font-size:12.5px; font-weight:800; color:var(--ink); background:none; border:0; padding:0; text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
.sp-change { display:inline-block; margin-left:10px; vertical-align:middle; font:inherit; font-size:13.5px; font-weight:800; color:var(--ink); cursor:pointer;
  background:rgba(14,15,34,.85); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:9px 16px; }
.sp-change:hover { border-color:#ffcb05; }

.sp-pop { position:absolute; z-index:400; display:flex; flex-direction:column; overflow:hidden; text-align:left; color:var(--ink);
  background:#17183a; border:1.5px solid rgba(255,203,5,.45); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.6); animation:spIn .14s ease-out; }
@keyframes spIn { from { opacity:0; transform:translateY(-4px); } }
.sp-head { display:none; }
.sp-search { padding:8px; border-bottom:1px solid rgba(255,255,255,.08); }
.sp-q { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:15px; }
.sp-q:focus { outline:none; border-color:rgba(255,203,5,.6); }
.sp-scroll { max-height:440px; overflow-y:auto; padding:2px 0 8px; overscroll-behavior:contain; }
.sp-gh { position:sticky; top:0; z-index:1; display:flex; align-items:baseline; gap:8px; padding:9px 14px 5px; background:#17183a; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.sp-gh b { color:var(--ink); } .sp-gh em { font-style:normal; margin-left:auto; color:#ffcb05; font-weight:800; text-transform:none; letter-spacing:0; }
.sp-opt { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:3px 14px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.sp-opt:hover, .sp-opt.kb { background:rgba(255,255,255,.07); } .sp-opt.kb { box-shadow:inset 3px 0 0 #ffcb05; }
.sp-opt.on { background:rgba(255,203,5,.12); } .sp-opt.on .sp-nm { color:#ffcb05; font-weight:800; }
.sp-nm { flex:1; min-width:0; font-size:15px; line-height:1.25; }
.sp-wish { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.sp-yr { flex:none; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; } .sp-cost { color:#ffe58a; }
.sp-opt.lock { cursor:default; } .sp-opt.lock .sp-th img { filter:grayscale(1) brightness(.5); } .sp-opt.lock .sp-nm { color:var(--muted); }
.sp-none { padding:16px 14px; color:var(--muted); font-size:14px; }
.sp-keys { padding:7px 14px; font-size:11.5px; color:var(--muted); border-top:1px solid rgba(255,255,255,.08); }
/* phones: a full-height sheet */
.sp-pop.sheet { position:fixed; left:0; right:0; bottom:0; top:max(48px, env(safe-area-inset-top, 0px)); border-radius:18px 18px 0 0; border-bottom:0;
  box-shadow:0 0 0 100vmax rgba(6,7,18,.72), 0 -10px 40px rgba(0,0,0,.5); animation:spUp .2s ease-out; }
@keyframes spUp { from { transform:translateY(24px); opacity:.4; } }
.sp-pop.sheet .sp-head { display:flex; align-items:center; justify-content:space-between; padding:14px max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px)); }
.sp-pop.sheet .sp-head b { font-size:18px; }
.sp-x { font:inherit; font-size:13px; font-weight:800; color:var(--ink); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:6px 14px; cursor:pointer; }
.sp-pop.sheet .sp-scroll { max-height:none; flex:1; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
.sp-pop.sheet .sp-keys { display:none; }
body.sp-locked { overflow:hidden; }
@media (prefers-reduced-motion:reduce) { .sp-pop, .sp-pop.sheet { animation:none; } }
/* Desktop: compact, so the big pack sits where it did before the picker (Nov 3 2026) */
@media (min-width:900px) {
  .picker.sp-on { margin:10px auto 2px; max-width:440px; }
  .picker.sp-on .sp-lab { display:none; }
  .picker.sp-on .sp-btn { padding:5px 14px 5px 6px; gap:10px; }
  .picker.sp-on .sp-th.big { width:26px; }
  .picker.sp-on .sp-cur { flex-direction:row; align-items:baseline; gap:8px; }
  .picker.sp-on .sp-cur b { font-size:15.5px; -webkit-line-clamp:1; }
  .picker.sp-on .sp-cur span { white-space:nowrap; }
  .picker.sp-on .sp-hint { margin-top:6px; font-size:12.5px; white-space:nowrap; }
  body.sp-picker #eraNote { display:none; }
}

/* "New" tag on sets released in the last 21 days (isNewSet in app.js) */
.sp-new { display:inline-block; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:7px; vertical-align:2px; margin-left:4px; background:rgba(127,224,166,.18); color:#7fe0a6; }