/* ---------- binder ---------- */
/* ---- trainer card header ---- */
.tcard{position:relative;overflow:hidden;border-radius:22px;padding:18px 18px 17px 19px;margin:2px 2px 14px;
  background:linear-gradient(135deg,#e3350d 0%,#c2210a 18%,#1c2450 46%,#201a4e 74%,#122038 100%);
  border:1px solid #4a5498;box-shadow:0 20px 46px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.tcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ffcb05,#fff6cf 50%,#ffcb05);z-index:4}
.tcard-dots{position:absolute;inset:0;pointer-events:none;opacity:.12;z-index:1;
  background-image:radial-gradient(#fff 1.3px,transparent 1.5px);background-size:11px 11px;
  -webkit-mask:linear-gradient(120deg,#000,transparent 62%);mask:linear-gradient(120deg,#000,transparent 62%)}
.tcard-holo{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.16) 46%,rgba(180,220,255,.1) 52%,transparent 66%);
  transform:translateX(-45%);animation:tcardHolo 6.5s ease-in-out infinite}
@keyframes tcardHolo{0%,55%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
/* Poké Ball crest bleeding off the right edge */
.tcard-crest{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(-8deg);width:118px;height:118px;border-radius:50%;z-index:1;
  background:linear-gradient(180deg,#ff4d4d 0 46%,#141420 46% 54%,#f4f6ff 54% 100%);border:6px solid #141420;opacity:.9;
  box-shadow:0 0 34px rgba(255,90,80,.3),inset 0 -7px 18px rgba(0,0,0,.35),inset 0 7px 14px rgba(255,255,255,.35)}
.tcard-crest::after{content:'';position:absolute;inset:0;margin:auto;width:36px;height:36px;border-radius:50%;
  background:#fff;border:6px solid #141420;box-shadow:0 0 16px rgba(255,255,255,.55)}
.tcard-body{position:relative;z-index:3}
.tcard-kicker{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:rgba(10,12,26,.4);border:1px solid rgba(255,255,255,.22);padding:4px 11px 4px 7px;border-radius:99px}
.tcard-value{font-family:'Bebas Neue';font-size:48px;line-height:.9;letter-spacing:.02em;margin-top:9px;
  background:linear-gradient(180deg,#fff3c0,#ffcb05 56%,#f0a800);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.tcard-chips{display:flex;gap:8px;margin-top:11px}
.tchip{background:rgba(8,10,22,.5);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:6px 13px;
  display:flex;flex-direction:column;line-height:1;backdrop-filter:blur(3px)}
.tchip span{font-size:8px;letter-spacing:.16em;color:#c7ccf0;font-weight:800;margin-bottom:3px}
.tchip b{font-family:'Bebas Neue';font-size:21px;color:#fff;letter-spacing:.03em}
/* segmented tabs */
.colltabs{display:flex;gap:5px;background:#11142a;border:1px solid var(--line);border-radius:15px;padding:5px;margin:0 2px 12px}
.colltab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;
  background:transparent;color:var(--dim);font-family:'Outfit';font-weight:700;font-size:13px;padding:11px 8px;border-radius:11px;transition:.16s}
.colltab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.colltab:hover{color:#c3c8ee}
.colltab.active{background:linear-gradient(180deg,#2f3568,#20244c);color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 0 0 1px #414781}
.colltab .tabcount{background:var(--blue);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:1px 7px}
.colltab .tabcount:empty{display:none}
/* custom dropdowns */
.binderbar{display:flex;gap:8px;margin:0 2px 14px;align-items:stretch}
.selwrap{position:relative;flex:1}
.selwrap>select{width:100%;appearance:none;-webkit-appearance:none;background:linear-gradient(180deg,#1a1e3a,#12152a);
  border:1px solid var(--line);color:var(--txt);font-family:'Outfit';font-weight:600;font-size:12.5px;
  padding:11px 30px 11px 13px;border-radius:12px;outline:none;cursor:pointer;transition:.15s}
.selwrap>select:hover{border-color:#4a5088}
.selwrap>select option{background:#171b33;color:#eef0ff;font-weight:600}
.selwrap>select option:checked{background:#2a3160;color:#fff}
.selwrap::after{content:'';position:absolute;right:14px;top:calc(50% - 5px);width:6px;height:6px;
  border-right:2px solid #8a90b8;border-bottom:2px solid #8a90b8;transform:rotate(45deg);pointer-events:none}
/* custom rounded dropdown (replaces native popup) */
.selwrap.cwrap::after{display:none}
.csel-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0}
.csel-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(180deg,#1c2142,#141834);border:1px solid #333a66;color:var(--txt);
  font-family:'Outfit';font-weight:600;font-size:12.5px;padding:12px 14px;border-radius:14px;cursor:pointer;transition:.15s}
.csel-trigger:hover{border-color:#4a5088}
.csel-trigger.open{border-color:#5b6bd6;box-shadow:0 0 0 3px rgba(91,107,214,.2)}
.csel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-chev{width:7px;height:7px;border-right:2px solid #9298c4;border-bottom:2px solid #9298c4;transform:rotate(45deg);transition:transform .2s;flex:none;margin:-3px 2px 0 0}
.csel-trigger.open .csel-chev{transform:rotate(-135deg);margin-top:2px}
.csel-panel{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:40;
  background:linear-gradient(180deg,#1c2245,#141834);border:1px solid #3c447e;border-radius:16px;
  padding:6px;box-shadow:0 20px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top;pointer-events:none;transition:.16s cubic-bezier(.2,.9,.3,1.1);
  max-height:264px;overflow:auto}
.csel-panel.show{opacity:1;transform:none;pointer-events:auto}
.csel-panel::-webkit-scrollbar{width:7px}
.csel-panel::-webkit-scrollbar-thumb{background:#3a4070;border-radius:99px}
.csel-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:11px;
  font-size:12.5px;font-weight:600;color:#c3c8ee;cursor:pointer;transition:.12s}
.csel-opt:hover{background:#262c54;color:#fff}
.csel-opt.sel{background:linear-gradient(90deg,#2b3264,#20244c);color:#fff}
.csel-opt.sel::after{content:'✓';color:var(--green);font-weight:900;font-size:12px}
.valuepill{margin-left:auto;background:linear-gradient(180deg,#2c2410,#1d1808);border:1px solid #574a1a;color:var(--gold);
  font-weight:800;font-size:13px;padding:8px 13px;border-radius:99px}
/* ---- real ring-binder ---- */
.binder3d{position:relative;perspective:1700px;border-radius:16px;padding:14px 14px 16px 30px;
  background:linear-gradient(160deg,#2b3160,#1a1e3c 55%,#141733);
  border:1px solid #3c4278;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -6px 20px rgba(0,0,0,.35)}
.binder3d::after{content:'';position:absolute;inset:8px 8px 10px 24px;border-radius:10px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
/* spine + metal rings on the left */
.binder-spine{position:absolute;left:0;top:0;bottom:0;width:26px;border-radius:16px 0 0 16px;z-index:6;
  background:linear-gradient(90deg,#0e1024,#191d3d 60%,rgba(20,23,51,0));box-shadow:inset -3px 0 8px rgba(0,0,0,.5)}
.binder-spine .ring{position:absolute;left:9px;width:15px;height:15px;border-radius:50%;
  border:3px solid #aeb6dd;background:radial-gradient(circle at 38% 30%,#f3f5ff,#8189b0 70%,#575d82);
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.7)}
.binder-scene{position:relative;transform-style:preserve-3d;min-height:344px}
.binder-page{position:relative;border-radius:10px;backface-visibility:hidden}
.bindgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:344px}
/* card pockets = glossy plastic sleeves */
.pocket{border-radius:8px;aspect-ratio:63/88;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#171b30,#0d0f1e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 2px 9px rgba(0,0,0,.55)}
.pocket.empty::after{content:'';position:absolute;inset:0;margin:auto;width:34%;height:34%;border-radius:50%;opacity:.16;
  background:radial-gradient(circle at 50% 42%,#fff 0 30%,transparent 33%),conic-gradient(#8b93d8,#5a6088);
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 62%);mask:radial-gradient(circle,#000 60%,transparent 62%)}
.pocket.filled{cursor:pointer}
.pocket img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;position:relative;z-index:1}
.pocket.filled:hover img{transform:scale(1.05)}
/* plastic sleeve sheen over each card */
.pocket .sleeve{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:8px;
  background:linear-gradient(125deg,rgba(255,255,255,.16) 0 16%,transparent 30%,transparent 72%,rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pocket.hit{box-shadow:inset 0 0 0 1px var(--rc),0 0 13px -3px var(--rc),inset 0 2px 9px rgba(0,0,0,.5)}
.pocket .dup{position:absolute;top:4px;right:4px;z-index:4;background:rgba(6,8,18,.8);color:var(--gold);font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
/* page-turn leaf (GPU-composited, nodes reused so nothing reloads) */
.binder-leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;z-index:8;
  will-change:transform;pointer-events:none}
.binder-leaf .leaf-face{position:absolute;inset:0;border-radius:10px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 20px 42px rgba(0,0,0,.5)}
.binder-leaf .leaf-face.front{background:linear-gradient(160deg,#20254a,#151935)}
.binder-leaf .leaf-face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#242a54,#151935);
  display:flex;align-items:center;justify-content:center}
.binder-leaf .leaf-face.back::after{content:'';width:46%;aspect-ratio:1;border-radius:50%;opacity:.14;
  border:7px solid #ffcb05;box-shadow:0 0 0 12px rgba(255,203,5,.08),inset 0 0 30px rgba(0,0,0,.5)}
.binder-leaf .shade{position:absolute;inset:0;z-index:6;pointer-events:none;background:#05070f;opacity:0;border-radius:10px}
.binder-leaf.flip-next{animation:leafTurn .5s cubic-bezier(.33,0,.22,1) both}
.binder-leaf.flip-prev{animation:leafTurn .5s cubic-bezier(.33,0,.22,1) reverse both}
.binder-leaf.flip-next .shade,.binder-leaf.flip-prev .shade{animation:leafShade .5s ease both}
@keyframes leafTurn{from{transform:rotateY(0)}to{transform:rotateY(-172deg)}}
@keyframes leafShade{0%,100%{opacity:0}52%{opacity:.4}}
/* page controls */
.pagectl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.pagectl .pgnum{color:var(--dim);font-weight:800;font-size:12px;min-width:120px;text-align:center;letter-spacing:.02em}
.pageflip-btn{width:40px;height:40px;border-radius:50%;border:1px solid #3a4070;background:linear-gradient(180deg,#232850,#181c34);
  color:#cdd2f5;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s}
.pageflip-btn:hover:not(:disabled){background:linear-gradient(180deg,#2c3158,#1d2140);border-color:#4d5590;transform:scale(1.06)}
.pageflip-btn:active:not(:disabled){transform:scale(.94)}
.pageflip-btn:disabled{opacity:.3;cursor:not-allowed}
.bulkbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.bulkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bulkcard{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:63/88;cursor:pointer;background:#181c33}
.bulkcard img{width:100%;height:100%;object-fit:cover;display:block}
.bulkcard .pr{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#000d,transparent);
  font-size:9px;font-weight:800;color:var(--gold);text-align:center;padding:6px 2px 2px}