/* ============================================================================
   Shared trading-card FRONT — the bordered photo, name plate, number badge
   and signature that make up the front face of a player's card. Used by
   profiles.html (inside the full flip card, front face only — the back,
   with its stats table, stays defined in profiles.html itself since
   nothing else needs it) and by index.html (the birthday banner's mini
   card). Kept in one shared file specifically so a given player's card
   looks and signs identically in both places — this has already been
   revised more than once (name-plate rebuild, Bowman-style border bands,
   per-player signature placement), and a second hand-copied version would
   risk quietly drifting out of sync with this one.

   .trading-card-face here holds only the VISUAL foil-border recipe
   (padding, border, gradient, radius, shadow) — no position/inset. The
   flip-card modal on profiles.html needs position:absolute (to fill its
   3D-rotated parent) and adds that itself, locally, since it's specific
   to that one presentation; a plain inline card just needs an explicit
   width/aspect-ratio instead, which is likewise up to whichever page is
   placing it (see index.html's .birthday-mini-card).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Mrs+Saint+Delafield&display=swap');

.trading-card-face {
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lift);
  padding: 4px; border: 1.5px solid var(--ink);
  background: linear-gradient(135deg, var(--white) 2%, var(--cap-gold-bright) 18%, var(--cap-gold) 55%, var(--soviet-red));
}
.trading-card-panel {
  width: 100%; height: 100%; border-radius: calc(var(--r-md) - 4px);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Front gets its own white card-stock margin OUTSIDE an inset border, with
   the photo inside that — a real Topps front has a white mat, then a
   colored frame, then the photo. Flex column so the name plate below can
   sit outside the photo instead of overlapping it — .trading-card-border-
   frame takes the remaining space (flex:1) above the fixed-height plate. */
.trading-card-front {
  background: var(--chalk); padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Three concentric bands — gold (outer), felt-dark (middle, standing in
   for a real 90s card's blue band), then a plain ink hairline right at
   the photo. Modeled on a real Bowman card's nested gold/blue/black
   frame, recolored to this app's own palette. border-image isn't used
   here since it ignores border-radius in every browser that implements
   it, which would leave square corners poking out past these rounded
   ones — same nested-element technique as .trading-card-face/-panel
   above, just two rings deep instead of one. */
.trading-card-border-frame {
  width: 100%; flex: 1; min-height: 0; border-radius: var(--r-sm); overflow: hidden; padding: 5px;
  background: var(--cap-gold);
}
.trading-card-border-frame-mid {
  width: 100%; height: 100%; border-radius: calc(var(--r-sm) - 5px); overflow: hidden; padding: 2.5px;
  background: var(--felt-dark);
}
.trading-card-front .trading-card-panel {
  background: var(--felt); border-radius: calc(var(--r-sm) - 7.5px);
  border: 1.5px solid var(--ink);
}
/* Full-bleed, NOT a circular frame — wants avatar_original_url (the real,
   rectangular photo an admin uploads specifically for this), never
   avatar_url (the small circular crop), which would reintroduce baked-in
   black corners. No original on file: falls back to colored initials,
   not a stretched circular crop. */
.trading-card-photo-area { position: relative; flex: 1; overflow: hidden; background: var(--felt); }
/* Warm, slightly faded filter plus a soft vignette — stands in for the
   printed-photo quality a real 90s card has (warm, a bit soft, darker at
   the corners) without actually aging the source file. */
.trading-card-photo-area img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.25) saturate(1.2) contrast(1.05) brightness(0.97);
}
.trading-card-photo-area::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(20,15,5,0.25) 100%);
}
.trading-card-photo-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.trading-card-photo-fallback span { font-family: var(--font-display); font-size: 15px; color: rgba(255,255,255,.85); padding: 0 20px; line-height: 1.4; }
/* Plain, upright badge — only rendered at all when the player actually
   has a card_number set, no placeholder badge when it's blank. */
.trading-card-number {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: var(--soviet-red); color: var(--white); border: 1.5px solid var(--cap-gold-bright);
  padding: 3px 9px; border-radius: 4px;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* "CAPS" team wordmark — Dancing Script with -webkit-text-stroke faking
   the two-tone outlined-wordmark look real team logos use. Text-shadow
   duplicates the stroke color as a fallback for browsers that ignore
   -webkit-text-stroke. */
.trading-card-team-mark {
  position: absolute; right: 6%; bottom: 12%; z-index: 1;
  font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: 34px; color: var(--cap-gold-bright);
  -webkit-text-stroke: 2px var(--felt-dark);
  text-shadow: 1px 1px 0 var(--felt-dark), -1px -1px 0 var(--felt-dark), 2px 3px 4px rgba(0,0,0,0.5);
  transform: rotate(-4deg);
}
/* Name plate BELOW the bordered photo, in its own strip of card stock,
   modeled on a real Bowman card's name bar sitting under the frame in
   the margin, with its own small logo badge notched into the left end.
   Two stacked notched shapes (gold outer sliver, felt-dark inner fill)
   stand in for that badge — same nested-layer trick as the border above,
   clipped to a ribbon-tail shape instead of a rounded rect. */
.trading-card-name-plate {
  flex-shrink: 0; padding: 2px;
  background: var(--cap-gold);
  clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 6% 100%, 0% 50%);
}
.trading-card-name-plate-inner {
  background: var(--felt-dark);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 6px);
  clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 6% 100%, 0% 50%);
  padding: 7px 14px 6px 20px;
  text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 17px; color: var(--white); letter-spacing: 0.06em;
  text-shadow: 1.5px 1.5px 0 var(--cap-gold-bright);
}
/* Fake autograph, scrawled somewhere across the photo. Position, angle,
   size and side are per-player (see SIGNATURE_STYLES + signatureStyleAttr
   in trading-card.js, applied as an inline style on this element) rather
   than fixed here — a real signed card doesn't land the autograph in the
   same spot at the same angle every time. This rule only carries what
   stays constant across every placement. Mrs Saint Delafield specifically
   because it's built to look like an actual scrawled signature rather
   than tidy decorative cursive; pointer-events:none so it can't
   accidentally intercept a tap meant for the card underneath it (the
   flip on profiles.html, the profile link on index.html's mini card). */
.trading-card-signature {
  position: absolute; z-index: 1; max-width: 64%;
  font-family: 'Mrs Saint Delafield', cursive; font-weight: 400;
  line-height: 1.05; color: rgba(255,255,255,0.92);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); pointer-events: none;
}

/* ============================================================================
   Full flip-card modal — the backdrop, the two-face 3D flip itself, and
   the back face's content (ribbon, vitals, season-by-season stats
   table). Opens from profiles.html (tapping your own avatar) and from
   index.html (tapping a birthday mini-card) via openPlayerTradingCard()
   in trading-card.js — one shared modal, not two independently-built
   ones. The mini card on index.html never has any of this itself: it's
   a plain inline .trading-card-face.trading-card-front sitting in
   normal page flow, front only, no modal, no back, no flip — a *tap*
   on it is what opens this modal to reveal the back.
   ============================================================================ */

.trading-card-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
}
.trading-card-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: var(--white); font-size: 22px;
  line-height: 1; cursor: pointer;
}
/* Front and back are genuinely different shapes — portrait for the
   photo, landscape for the stats table — so .trading-card-scene itself
   resizes on flip, not just .trading-card-inner rotating in place. The
   resize is a hard snap (0s duration) delayed exactly to the 0.3s
   midpoint of the 0.6s rotation below — the instant the card is
   edge-on to the viewer and essentially invisible — so the shape
   change lands at the one moment there's nothing visible to look wrong
   mid-transition, rather than visibly stretching either face as it
   rotates past. */
.trading-card-scene {
  width: min(300px, 80vw); aspect-ratio: 5 / 7; perspective: 1600px;
  transition: width 0s 0.3s, aspect-ratio 0s 0.3s;
}
.trading-card-scene.flipped { width: min(420px, 92vw); aspect-ratio: 3 / 2.6; }
.trading-card-inner {
  position: relative; width: 100%; height: 100%; cursor: pointer;
  transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.trading-card-scene.flipped .trading-card-inner { transform: rotateY(180deg); }
/* Explicit backstop, not just decoration: backface-visibility:hidden
   alone stopped reliably hiding the rotated-away face once the front
   gained its own nested overflow:hidden layer (.trading-card-border-frame)
   — confirmed directly from a screenshot showing the front's content
   mirrored and overlaid on the back. visibility:hidden doesn't depend
   on the browser's 3D compositing the way backface-visibility does, so
   it hides the inactive face unconditionally regardless of why the 3D
   approach alone stopped being enough. */
.trading-card-scene:not(.flipped) .trading-card-back { visibility: hidden; }
.trading-card-scene.flipped .trading-card-front { visibility: hidden; }
/* Stacks front/back on top of each other for the 3D flip — scoped to
   .trading-card-inner specifically, rather than a blanket rule on
   .trading-card-face itself, so this ONLY applies inside the modal.
   index.html's plain inline mini-card also carries .trading-card-face,
   in normal page flow, and must NOT get position:absolute here — that
   would collapse it out of the birthday banner's layout entirely. */
.trading-card-inner .trading-card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
}
.trading-card-banner {
  flex-shrink: 0; background: var(--cap-gold); color: var(--felt-dark);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 2px, transparent 2px 6px);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  text-align: center; padding: 4px; border-bottom: 2px dashed var(--soviet-red);
  text-shadow: 1px 1px 0 rgba(255,255,255,.35), -1px -1px 0 rgba(0,0,0,.25);
}
/* Back deliberately switches to a light, cream cardstock look rather
   than staying a dark twin of the front — an actual trading card's
   back is almost always the light printed side, stat table and all,
   regardless of how colorful its front is. */
.trading-card-back { transform: rotateY(180deg); }
.trading-card-back .trading-card-panel { background: var(--chalk); color: var(--ink); }
.trading-card-back-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0 10px 6px; }
.trading-card-ribbon-wrap { display: flex; justify-content: center; margin: 6px 0; }
.trading-card-ribbon {
  background: linear-gradient(135deg, #a8384a, var(--soviet-red) 60%);
  padding: 4px 22px; transform: skewX(-12deg); box-shadow: var(--shadow-card);
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}
.trading-card-ribbon span { display: block; transform: skewX(12deg); color: var(--white); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-shadow: 1px 1px 1px rgba(0,0,0,.3); }
.trading-card-top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Circular, matching avatar_url's own native shape (a circle baked onto
   a black square, same file used for the small avatar everywhere else
   in this app) — a rounded RECTANGLE here would show that same
   baked-in black in the corners again, exactly the bug the front's own
   photo frame had to work around. */
.trading-card-back-photo {
  flex-shrink: 0; width: 26%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--cap-gold); box-shadow: var(--shadow-card);
}
.trading-card-back-photo img, .trading-card-back-photo .trading-card-photo-fallback { width: 100%; height: 100%; object-fit: cover; }
.trading-card-back-photo .trading-card-photo-fallback span { font-size: 22px; padding: 0; color: var(--white); }
.trading-card-vitals {
  flex: 1; padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--chalk-dim);
  background-image: repeating-linear-gradient(100deg, rgba(14,58,58,.07) 0 1px, transparent 1px 7px);
  border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 10px; font-style: italic; color: var(--ink-soft);
  line-height: 1.55; display: flex; flex-direction: column; justify-content: center;
}
.trading-card-vitals b { font-style: normal; font-weight: 600; color: var(--felt); }
.trading-card-stats-caption {
  font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; margin-bottom: 2px;
}
.trading-card-stats-wrap { width: 100%; }
table.trading-card-stats { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--font-body); }
table.trading-card-stats th, table.trading-card-stats td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.trading-card-stats th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white);
  background: var(--felt);
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px);
  padding: 4px 2px; font-weight: 600;
}
table.trading-card-stats th:first-child { border-top-left-radius: 4px; }
table.trading-card-stats th:last-child { border-top-right-radius: 4px; }
table.trading-card-stats td { font-size: 13px; text-align: center; padding: 5px 2px; }
table.trading-card-stats td:first-child { text-align: left; padding-left: 4px; font-weight: 600; }
table.trading-card-stats tr.trading-card-totals-row td { border-top: 1.5px solid var(--ink); font-weight: 700; }
table.trading-card-stats td.trading-card-lead { color: var(--soviet-red); font-style: italic; font-weight: 700; }
.trading-card-blurb { margin-top: 5px; font-size: 9.5px; line-height: 1.4; color: var(--ink); }
.trading-card-footer {
  text-align: center; font-size: 6.5px; letter-spacing: 0.04em; color: var(--ink-soft);
  padding-top: 3px; text-transform: uppercase;
}
/* Shown on whichever element triggered a lazy card-stats fetch (the
   birthday mini-card, via openPlayerTradingCard's triggerEl param)
   while that fetch is in flight — profiles.html never sees this at
   all, since it always has stats precomputed already. pointer-events:
   none blocks a second tap from firing a second concurrent fetch. */
.trading-card-loading { opacity: 0.55; pointer-events: none; }