/* ==========================================================================
   FixTheAngels — cards.css
   Self-contained styling for the trading-card roster (js/cards.js).
   All colors via theme.css tokens; works in both dark (default) and light.
   ========================================================================== */

/* ---------- tabs ---------- */
.cards-tabs{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:0 20px;margin-bottom:34px;
}
.cards-tab{
  position:relative;background:transparent;border:none;cursor:pointer;
  color:var(--mut);font-family:var(--font-body);font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px 12px;display:inline-flex;align-items:center;gap:8px;
  transition:color .25s ease;
}
.cards-tab::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform .3s ease;
}
.cards-tab:hover{color:var(--tx)}
.cards-tab.active{color:var(--tx)}
.cards-tab.active::after{transform:scaleX(1)}
.cards-tab-n{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--mut);background:var(--card);border:1px solid var(--card-bd);
  border-radius:20px;padding:2px 7px;line-height:1;letter-spacing:.02em;
}
.cards-tab.active .cards-tab-n{color:var(--red);border-color:var(--red)}
.cards-tab:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

/* ---------- carousel shell ---------- */
.cards-carousel{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:0 46px;max-width:1180px;margin:0 auto;
}
.cards-viewport{
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* edge fade masks */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
  cursor:grab;
}
.cards-viewport::-webkit-scrollbar{display:none;height:0}
.cards-viewport.dragging{cursor:grabbing;scroll-snap-type:none}
.cards-track{
  display:flex;gap:34px;padding:14px 42px;width:max-content;
  perspective:1200px;align-items:stretch;
}

/* ---------- nav buttons (glass) ---------- */
.cards-nav{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--card-bd);color:var(--tx);
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s ease,box-shadow .25s ease,opacity .25s ease,background .25s ease;
}
.cards-nav:hover:not(:disabled){border-color:var(--red);box-shadow:0 0 18px var(--red-glow)}
.cards-nav:disabled{opacity:.28;cursor:default}
.cards-nav:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- card (flip-capable) ---------- */
.pcard{
  --tiltX:0;--tiltY:0;--foilX:50%;
  flex:0 0 auto;width:250px;height:352px;
  scroll-snap-align:center;
  perspective:900px;                 /* flip perspective lives on the outer */
  transform:rotateY(calc(var(--tiltY) * 1deg)) rotateX(calc(var(--tiltX) * 1deg));
  transform-style:preserve-3d;
  cursor:pointer;border-radius:18px;
  transition:transform .12s ease-out;
  outline:none;
}
.pcard.tilt-reset{transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.pcard:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:20px}

.pcard-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .6s ease;
}
.pcard.flipped .pcard-inner{transform:rotateY(180deg)}

.pcard-face{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:linear-gradient(160deg,var(--bg2) 0%,var(--bg) 100%);
  border:1px solid var(--card-bd);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.pcard-front{padding:22px;display:flex;flex-direction:column;z-index:2}
.pcard-back{transform:rotateY(180deg);padding:24px 22px;display:flex;flex-direction:column}

.pcard:hover .pcard-face{border-color:var(--red);box-shadow:0 30px 80px -20px var(--red-glow)}

/* ---------- front content ---------- */
.pcard .posrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pcard .pos{
  font-size:10px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard .status{
  flex:0 0 auto;font-size:9px;letter-spacing:.12em;padding:4px 9px;border-radius:20px;
  font-weight:700;white-space:nowrap;
  background:var(--red);color:#fff;box-shadow:0 0 14px var(--red-glow);
}
.pcard .status[data-tag]{
  background:rgba(255,183,77,.15);color:var(--gold);
  border:1px solid rgba(255,183,77,.35);box-shadow:none;
}
.pcard .status.il{
  background:rgba(255,183,77,.16);color:var(--gold);
  border:1px solid rgba(255,183,77,.45);box-shadow:none;
}

.pcard .bignum2{
  font-family:var(--font-disp);font-size:120px;line-height:1;text-align:right;
  color:transparent;-webkit-text-stroke:1.5px var(--card-bd);
  margin-top:auto;user-select:none;transition:-webkit-text-stroke .4s,text-shadow .4s;
}
.pcard .pname{
  font-family:var(--font-disp);font-size:29px;text-transform:uppercase;
  line-height:1.05;margin-top:8px;
}
.pcard .statline{
  display:flex;gap:14px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--card-bd);
}
.pcard .statline > div{flex:1;min-width:0}
.pcard .statline .wide{flex:1 1 100%}
.pcard .statline .v{
  font-family:var(--font-mono);font-size:15px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard .statline .wide .v{font-size:11px;white-space:normal;color:var(--mut);font-weight:500}
.pcard .statline .k{
  font-size:9px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard .cta{
  margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);font-weight:600;
}

/* ---------- foil sweep ---------- */
.pcard .foil{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 46%,var(--red-dim) 52%,transparent 68%);
  background-size:220% 100%;background-position:var(--foilX) 0;
  transition:opacity .3s ease;
}
.pcard:hover .foil{opacity:1}

/* ---------- accent tints by color family (number stroke + top edge line) ---------- */
.pcard-front::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:var(--accent,var(--red));opacity:.85;
}
.pcard:hover .bignum2{-webkit-text-stroke:1.5px var(--accent,var(--red));text-shadow:0 0 40px var(--red-dim)}
.pc-red{--accent:var(--red)}
.pc-blue{--accent:#3b82f6}
.pc-green{--accent:var(--green)}
.pc-amber{--accent:var(--gold)}
.pc-neutral{--accent:#8b8f98}
[data-theme="light"] .pc-neutral{--accent:#6b7280}

/* ---------- back face ---------- */
.pcard-back .back-tag{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);
  font-weight:700;margin-bottom:12px;
}
.pcard-back .back-verdict{
  font-size:13px;line-height:1.6;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;-webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard-back .back-link{
  margin-top:auto;padding-top:14px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);font-weight:600;text-decoration:none;
}
.pcard-back .back-link:hover{text-decoration:underline}
.pcard-back .back-link--none{color:var(--mut)}

/* ---------- IL treatment ---------- */
.pcard--il .pcard-front{filter:saturate(.55)}
.pcard--il .bignum2{-webkit-text-stroke-color:rgba(255,183,77,.4)}

/* ---------- departed treatment ---------- */
.pcard--departed{cursor:pointer}
.pcard--departed .pcard-face{filter:grayscale(1);opacity:.72}
.pcard--departed:hover .pcard-face{border-color:var(--card-bd);box-shadow:none}
.pcard--departed .cta{color:var(--mut)}
.pcard--departed .foil{display:none}
.departed-ribbon{
  position:absolute;top:26px;left:-30px;z-index:5;
  transform:rotate(-45deg);transform-origin:center;
  background:var(--mut);color:var(--bg);
  font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 34px;box-shadow:0 2px 8px rgba(0,0,0,.3);
  white-space:nowrap;pointer-events:none;
}

/* ---------- light theme: shadows instead of glows ---------- */
[data-theme="light"] .pcard:hover .pcard-face{box-shadow:0 24px 60px -20px rgba(0,0,0,.28)}
[data-theme="light"] .pcard .status{box-shadow:none}
[data-theme="light"] .cards-nav:hover:not(:disabled){box-shadow:0 6px 20px -6px rgba(0,0,0,.3)}
[data-theme="light"] .pcard .foil{
  background:linear-gradient(115deg,transparent 30%,rgba(0,0,0,.05) 46%,var(--red-dim) 52%,transparent 68%);
  background-size:220% 100%;
}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .cards-viewport{scroll-snap-type:x mandatory}
  .cards-carousel{padding:0 8px}
  .cards-nav{display:none}
  .cards-track{gap:20px;padding:14px 20px}
  .pcard{width:220px;height:310px}
  .pcard .bignum2{font-size:100px}
  .pcard .pname{font-size:26px}
}

/* ---------- reduced motion: no flip/tilt transitions (state still changes) ---------- */
@media (prefers-reduced-motion: reduce){
  .pcard,.pcard.tilt-reset,.pcard-inner,.pcard-face,.pcard .foil,
  .cards-tab,.cards-tab::after,.cards-nav{transition:none !important}
  .pcard{transform:none !important}
}

/* ---------- no tilt on touch (hover:none) ---------- */
@media (hover:none){
  .pcard{transform:none !important}
  .cards-viewport{-webkit-mask-image:none;mask-image:none}
}