/* =============================================================================
 * heisman-card.css  — Stained trading-card face for Heisman Watch
 *
 * Scoped entirely to .heis-card* — zero leakage to other pages.
 * Mirrors the visual language from:
 *   - screens/heisman/ref/Heisman_Watch_Player_Tile.png
 *   - apps/web/heisman/heisman.css  (FRONT-RUNNER TRADING CARD block)
 *
 * Palette drawn from heisman.css tokens (copied inline so this file
 * works standalone outside the heisman route):
 *   --hm-bronze:    #C7884A
 *   --hm-gold-leaf: #E8C77A
 *   --hm-wood:      #241910
 *   --hm-ivory:     #F4ECD8
 *
 * 3D flip: front/back via preserve-3d + backface-hidden (mirrors SNSPlayerCard).
 * Respects prefers-reduced-motion.
 * ============================================================================= */

/* ── Card shell + perspective ─────────────────────────────────────────────── */
.heis-card {
  /* sizing — scale responsively */
  --heis-w: 200px;
  --heis-ratio: 5 / 7;

  position: relative;
  display: inline-block;
  width: var(--heis-w);
  aspect-ratio: var(--heis-ratio);
  border-radius: 14px;
  perspective: 900px;
  cursor: default;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 3D flip chassis ──────────────────────────────────────────────────────── */
.heis-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: inherit;
}

/* Face-down state: flip 180deg */
.heis-card[data-face="down"] .heis-card__inner {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

/* Both faces share layout */
.heis-card__front,
.heis-card__back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ── CARD BACK (face-down) ────────────────────────────────────────────────── */
.heis-card__back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  /* Black outer frame, bronze edge */
  background: #0a0704;
  border: 1.5px solid rgba(199,136,74,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.heis-card__back-inner {
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(232,199,122,.3);
  background:
    linear-gradient(180deg, #2c2014 0%, #201609 52%, #120c06 100%);
}

/* Diagonal corner facets on back */
.heis-card__back-inner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom right,
      rgba(8,5,2,.34) 0, rgba(8,5,2,.34) 23%,
      rgba(232,199,122,.34) 23%, rgba(232,199,122,.34) 23.5%,
      transparent 23.5%, transparent 29%,
      rgba(232,199,122,.13) 29%, rgba(232,199,122,.13) 29.3%,
      transparent 29.3%),
    linear-gradient(to top left,
      rgba(140,102,55,.26) 0, rgba(140,102,55,.26) 28%,
      rgba(232,199,122,.36) 28%, rgba(232,199,122,.36) 28.6%,
      transparent 28.6%);
}

.heis-card__back-trophy {
  position: relative;
  z-index: 2;
  font-size: 2.4rem;
  filter: drop-shadow(0 2px 8px rgba(199,136,74,.5));
}

.heis-card__back-label {
  position: relative;
  z-index: 2;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(232,199,122,.55);
}

/* ── CARD FRONT (face-up) ─────────────────────────────────────────────────── */
.heis-card__front {
  /* Black outer frame */
  background: #080604;
  padding: 7px;
  border-radius: 14px;
  box-shadow:
    0 20px 48px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(199,136,74,.18);
}

/* Bronze wood card face inside the frame */
.heis-card__face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 14px;
  border: 1px solid rgba(232,199,122,.5);
  background:
    radial-gradient(ellipse 92% 55% at 50% 28%, rgba(140,104,56,.24) 0%, transparent 62%),
    radial-gradient(ellipse 135% 120% at 50% 46%, transparent 42%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, #2c2014 0%, #201609 52%, #120c06 100%);
}

/* All content above texture layers */
.heis-card__face > * {
  position: relative;
  z-index: 2;
}

/* Dot-matrix texture */
.heis-card__face::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(232,199,122,.14) 1px, transparent 1.6px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 38%, transparent 28%, #000 92%);
          mask-image: radial-gradient(ellipse 78% 66% at 50% 38%, transparent 28%, #000 92%);
  opacity: .6;
}

/* Diagonal corner facets (top-left + bottom-right) */
.heis-card__face::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom right,
      rgba(8,5,2,.34) 0, rgba(8,5,2,.34) 23%,
      rgba(232,199,122,.34) 23%, rgba(232,199,122,.34) 23.5%,
      transparent 23.5%, transparent 29%,
      rgba(232,199,122,.13) 29%, rgba(232,199,122,.13) 29.3%,
      transparent 29.3%),
    linear-gradient(to top left,
      rgba(140,102,55,.26) 0, rgba(140,102,55,.26) 28%,
      rgba(232,199,122,.36) 28%, rgba(232,199,122,.36) 28.6%,
      transparent 28.6%);
}

/* ── Portrait ─────────────────────────────────────────────────────────────── */
.heis-card__portrait-wrap {
  width: 62%;
  aspect-ratio: 1;
  margin-top: 10%;
  flex-shrink: 0;
}

.heis-card__portrait-ring {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #E8C77A;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.4),
    0 8px 22px rgba(0,0,0,.55);
  background: radial-gradient(circle at 50% 35%, #2e2114, #120b04);
  display: grid;
  place-items: center;
}

/* The actual photo */
.heis-card__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
}

/* Position art fallback */
.heis-card__pos-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
  opacity: 0.7;
}

/* Initials watermark fallback */
.heis-card__initials {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 8vw, 1.8rem);
  color: #C7884A;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ── EMPTY state portrait area ───────────────────────────────────────────── */
.heis-card[data-state="empty"] .heis-card__portrait-ring {
  border-color: rgba(199,136,74,.45);
  border-style: dashed;
}

.heis-card__empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 6px;
  padding: 8px;
}

.heis-card__empty-slot-icon {
  font-size: 1.6rem;
  opacity: 0.5;
  filter: drop-shadow(0 1px 4px rgba(199,136,74,.3));
}

.heis-card__empty-slot-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(199,136,74,.5);
}

/* ── School-color accent line ─────────────────────────────────────────────── */
.heis-card__accent {
  width: 80%;
  height: 2px;
  border-radius: 1px;
  margin-top: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
  /* default bronze; JS overrides via style="background:..." */
  background: rgba(199,136,74,.6);
  box-shadow: 0 0 6px rgba(199,136,74,.25);
}

/* ── Name ─────────────────────────────────────────────────────────────────── */
.heis-card__name {
  margin-top: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(0.85rem, 4.5vw, 1.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Gold foil gradient */
  background: linear-gradient(180deg,
    #E0BE73 0%, #F6E29A 38%, #EBCB7E 52%, #B98232 80%, #8A5A2B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

/* Empty state name placeholder */
.heis-card[data-state="empty"] .heis-card__name {
  background: linear-gradient(180deg,
    rgba(140,102,55,.5) 0%, rgba(100,72,35,.4) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── School subtitle with flanking hairline rules ─────────────────────────── */
.heis-card__school {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 88%;
  margin-top: 8px;
  color: rgba(244,236,216,.6);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.heis-card__school > span { flex: 0 0 auto; }

.heis-card__school::before,
.heis-card__school::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
}
.heis-card__school::before {
  background: linear-gradient(90deg, transparent, rgba(199,136,74,.65));
}
.heis-card__school::after {
  background: linear-gradient(90deg, rgba(199,136,74,.65), transparent);
}

/* ── "HEISMAN WATCH" footer ───────────────────────────────────────────────── */
.heis-card__footer {
  margin-top: auto;
  padding-top: 10px;
  color: rgba(232,214,180,.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.45rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── RANK SEAL (locked state) ─────────────────────────────────────────────── */
.heis-card__seal {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Gold seal ring */
  background: radial-gradient(circle at 40% 35%, #F6E29A, #B98232);
  border: 1.5px solid rgba(255,235,150,.7);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,245,180,.4);
}

.heis-card__seal-rank {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1;
  color: #1a0e04;
  letter-spacing: -0.02em;
}

.heis-card__seal-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,14,4,.7);
  margin-top: 1px;
}

/* Different glow colors per rank */
.heis-card[data-state="locked"][data-rank="1"] .heis-card__seal {
  background: radial-gradient(circle at 40% 35%, #F6E29A, #C7884A);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 4px 14px rgba(199,136,74,.55), inset 0 1px 0 rgba(255,245,180,.4);
}
.heis-card[data-state="locked"][data-rank="2"] .heis-card__seal {
  background: radial-gradient(circle at 40% 35%, #E8E0D8, #A0A0A0);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 4px 14px rgba(160,160,160,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.heis-card[data-state="locked"][data-rank="3"] .heis-card__seal {
  background: radial-gradient(circle at 40% 35%, #E8C89A, #8B6032);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 4px 14px rgba(139,96,50,.4), inset 0 1px 0 rgba(255,220,150,.35);
}

/* ── LOCKED STATE: foil ribbon across bottom ──────────────────────────────── */
.heis-card__ribbon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  padding: 4px 0;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #1a0e04;
  background: linear-gradient(90deg, rgba(199,136,74,.0) 0%, #C7884A 20%, #E8C77A 50%, #C7884A 80%, rgba(199,136,74,.0) 100%);
  border-top: 1px solid rgba(248,230,160,.6);
}

/* ── Hover lift (filled/locked face-up only) ──────────────────────────────── */
.heis-card[data-face="up"]:not([data-state="empty"]):hover .heis-card__inner {
  -webkit-transform: translateY(-3px) scale(1.02);
          transform: translateY(-3px) scale(1.02);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .heis-card__inner {
    transition: none;
  }
  .heis-card[data-face="up"]:hover .heis-card__inner {
    -webkit-transform: none !important;
            transform: none !important;
  }
  .heis-card[data-face="down"] .heis-card__inner {
    -webkit-transform: rotateY(180deg) !important;
            transform: rotateY(180deg) !important;
  }
}

/* ── Size variants ────────────────────────────────────────────────────────── */
.heis-card[data-size="sm"]  { --heis-w: 140px; }
.heis-card[data-size="md"]  { --heis-w: 200px; }
.heis-card[data-size="lg"]  { --heis-w: 260px; }
.heis-card[data-size="hero"]{ --heis-w: 320px; }

/* ── Demo harness layout helpers ──────────────────────────────────────────── */
.heis-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px;
}

.heis-demo-label {
  margin-top: 10px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,136,74,.7);
}

.heis-demo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* flip demo button */
.heis-flip-btn {
  margin-top: 10px;
  padding: 6px 14px;
  background: rgba(199,136,74,.18);
  border: 1px solid rgba(199,136,74,.45);
  border-radius: 6px;
  color: #E8C77A;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heis-flip-btn:hover {
  background: rgba(199,136,74,.3);
  border-color: rgba(232,199,122,.7);
}