/* ===================== CARD STAGE (3D ring) =====================
   Ported from tytysportscards.com's custom-card rotator. Real cards orbit a
   CSS-3D cylinder: each card is rotated onto the ring and pushed out by
   translateZ, so as it sweeps to the edges it turns edge-on and bends away.
   JS (card-stage.js) drives the spin and per-card depth. CBP palette: black
   puck, silver + blue rings, the CBP logo printed flat on the floor. */
.rot3d { user-select: none; -webkit-user-select: none; overflow-x: clip; }   /* 3D card backs must never widen the page */
.rot3d-viewport {
  position: relative; overflow: hidden; cursor: grab;
  perspective: 1150px; perspective-origin: 50% 24%;
  touch-action: pan-y;
}
.rot3d-viewport:active { cursor: grabbing; }
.rot3d-stage { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
/* front and back are sibling leaves on the stage (no nested 3D — Chrome's
   compositor drops paints on nested preserve-3d). */
.rot3d-card, .rot3d-cardback {
  position: absolute; left: 0; top: 0; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}
/* NOTE: never put drop-shadow filters OR box-shadow on the front cards —
   any shadow on these backface-hidden 3D leaves makes Chrome skip painting
   the card photo texture. */
.rot3d-card img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rot3d-card:hover { outline: 3px solid rgba(62,99,221,.95); outline-offset: 3px; }
/* the card back, shown while a card circles behind the stage — a printed
   CBP back: double silver frame, dark blue stock, logo, the card's name */
.rot3d-cardback {
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(200,206,220,.06) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 30%, #141c4a 0%, #0c1130 55%, #06081a 100%);
  box-shadow:
    inset 0 0 0 3px rgba(200,206,220,.85), inset 0 0 0 6px #0c1130, inset 0 0 0 7px rgba(200,206,220,.4),
    0 16px 22px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-1); padding: var(--s-4) var(--s-3); text-align: center;
}
.rot3d-cardback img { width: 58%; height: auto; margin: var(--s-1) 0 var(--s-2); }
.rot3d-cardback--photo { padding: 0; box-shadow: none; background: #0c1130; }
.rot3d-cardback--photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.cbk-brand { font-weight: var(--fw-display); font-size: 15px; line-height: 1; color: #eef1f7; letter-spacing: -.02em; }
.cbk-sub { color: rgba(200,206,220,.7); font: var(--fw-medium) 8px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.cbk-title { color: #f4f6fb; font-weight: var(--fw-bold); font-size: 9.5px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.cbk-series { color: rgba(200,206,220,.8); font: var(--fw-medium) 7.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.cbk-num { color: #eef1f7; font-weight: var(--fw-bold); font-size: 9px; border: 1px solid rgba(200,206,220,.55); padding: 2px var(--s-2); margin-top: var(--s-1); }
/* the stage itself: a matte-black disc lying flat under the ring of cards,
   with silver/blue rings orbiting it */
.rot3d-floor {
  position: absolute; left: 50%; top: 50%; border-radius: var(--r-round); pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #2b2b2e 0%, #1a1a1d 34%, #0d0d0f 68%, #060607 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.85);
}
.rot3d-floorside {
  position: absolute; left: 50%; top: 50%; border-radius: var(--r-round); pointer-events: none;
  background: #0a0a0c; border: 1px solid rgba(200,206,220,.28);
}
.rot3d-floorside:last-of-type { background: #050506; }
/* the CBP logo printed flat in the middle of the stage — a CSS background
   (not an <img>) so the 3D paint bug can't drop it */
.rot3d-floorlogo {
  position: absolute; left: 50%; top: 50%; pointer-events: none;
  background: url("/logo.png") center / contain no-repeat; border-radius: var(--r-round); opacity: .92;
}
/* lettering curved around the puck's rim — one span per character */
.rot3d-rimch {
  position: absolute; left: 50%; top: 50%; pointer-events: none;
  display: block; text-align: center; white-space: pre;
  color: #dfe3ee; font-weight: var(--fw-bold); text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* the tunnel at the back seam: glowing rings receding behind the stage;
   cards dive in to leave and climb out to enter */
.rot3d-tring { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.rot3d-tring i {
  position: absolute; inset: 0; display: block; border-radius: var(--r-round);
  border: 2px dashed rgba(200,206,220,.75);
  box-shadow: 0 0 18px rgba(62,99,221,.35), inset 0 0 18px rgba(62,99,221,.25);
  animation: rot3d-spin 9s linear infinite;
}
.rot3d-tring:nth-child(even) i { animation: rot3d-spin-rev 12s linear infinite; border-color: rgba(120,150,240,.55); }
.rot3d-tring--core i {
  border: 3px solid rgba(200,206,220,.9); animation: none;
  background: radial-gradient(circle, #05070d 0%, #0a1122 55%, rgba(13,27,51,.9) 100%);
  box-shadow: 0 0 30px rgba(62,99,221,.4);
}
.rot3d-floorshadow {
  position: absolute; left: 50%; top: 50%; border-radius: var(--r-round); pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 78%);
}
.rot3d-ring { position: absolute; border-radius: var(--r-round); }
.rot3d-ring--outer { inset: 1.2%; border: 3px solid rgba(200,206,220,.9); box-shadow: 0 0 14px rgba(200,206,220,.45), inset 0 0 14px rgba(200,206,220,.3); }
.rot3d-ring--dash { inset: 6.5%; border: 2px dashed rgba(120,150,240,.8); animation: rot3d-spin 26s linear infinite; }
.rot3d-ring--sweep {
  inset: 12%;
  background: conic-gradient(from 0deg, rgba(120,150,240,0) 0deg, rgba(120,150,240,0) 288deg, rgba(120,150,240,.95) 336deg, rgba(235,240,255,1) 352deg, rgba(120,150,240,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  animation: rot3d-spin 7s linear infinite;
}
.rot3d-ring--inner { inset: 34%; border: 1px solid rgba(200,206,220,.45); animation: rot3d-spin-rev 40s linear infinite; border-top-color: rgba(235,240,255,.85); border-bottom-color: rgba(235,240,255,.85); }
@keyframes rot3d-spin { to { transform: rotate(360deg); } }
@keyframes rot3d-spin-rev { to { transform: rotate(-360deg); } }
/* live caption for whichever card is facing you */
.rot3d-caption { text-align: center; margin-top: var(--s-3); min-height: 44px; }
.rot3d-caption b { display: block; color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.rot3d-caption span { color: var(--blue-hi); font-weight: var(--fw-bold); font-size: var(--fs-base); }
/* reduced-motion fallback: plain static row */
.rot3d-flat { display: flex; gap: var(--s-4); overflow-x: auto; padding: var(--s-2) 0 var(--s-4); }
.rot3d-flatcard { flex: 0 0 auto; width: 150px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.rot3d-flatcard img { display: block; width: 100%; height: 200px; object-fit: contain; background: var(--panel-2); }
.rot3d-flatcard b { display: block; padding: var(--s-2) var(--s-3) 2px; color: var(--ink); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot3d-flatcard span { display: block; padding: 0 var(--s-3) var(--s-3); color: var(--blue-hi); font-weight: var(--fw-bold); font-size: var(--fs-sm); }