/**
 * THREE CHANCES — Card component.
 *
 * The load-bearing component: every screen is cards on a table. Front and back,
 * with states as modifier classes that map 1:1 to Figma variants.
 *
 * Depends on design/tokens.css. Nothing here hard-codes a colour or radius that
 * exists as a token.
 *
 * States (mutually exclusive unless noted):
 *   (none)        default, face up, playable
 *   .is-hover     pointer over a playable card  (also applied live via :hover)
 *   .is-selected  chosen for this round, awaiting lock-in
 *   .is-played    already used — dimmed, non-interactive (aka disabled)
 *   .is-winner    took the round — green ring + ✓ glyph
 *   .is-loser     lost the round — red ring + ✗ glyph + vignette
 *
 * A card face carries its VALUE and the wordmark. It never carries a round
 * number: a card is not tied to a round, the player chooses when to play it.
 */

.tc-card {
  /* Geometry — override --tc-card-w for other sizes. */
  --tc-card-w: 112px;
  --tc-card-ratio: 1.5;

  position: relative;
  width: var(--tc-card-w);
  height: calc(var(--tc-card-w) * var(--tc-card-ratio));
  flex: 0 0 auto;
  border-radius: var(--tc-radius-card);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--tc-duration-base) var(--tc-ease-standard),
    box-shadow var(--tc-duration-base) var(--tc-ease-standard),
    filter var(--tc-duration-base) var(--tc-ease-standard);
}

.tc-card--sm {
  --tc-card-w: 72px;
}

.tc-card--lg {
  --tc-card-w: 136px;
}

/* ------------------------------------------------------------------ *
 * FRONT
 * ------------------------------------------------------------------ */

.tc-card--front {
  background: var(--tc-card-face);
  box-shadow: var(--tc-shadow-card);
  color: var(--tc-ink);
}

/* Gold accent strip along the top edge. */
.tc-card--front::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tc-gold) 0%, var(--tc-gold-light) 50%, var(--tc-gold) 100%);
  z-index: 2;
}

.tc-card__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--tc-font-display);
  font-size: var(--tc-size-card-xl);
  line-height: var(--tc-leading-tight);
  font-variant-numeric: lining-nums tabular-nums;
  padding-bottom: var(--tc-space-3);
}

.tc-card--sm .tc-card__value {
  font-size: var(--tc-size-card-sm);
}

.tc-card--lg .tc-card__value {
  font-size: 68px;
}

.tc-card__wordmark {
  position: absolute;
  inset: auto 0 var(--tc-space-2) 0;
  text-align: center;
  font-family: var(--tc-font-ui);
  font-size: 7px;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc-ink) 55%, transparent);
}

.tc-card--sm .tc-card__wordmark {
  font-size: 5px;
}

/* ------------------------------------------------------------------ *
 * BACK
 * ------------------------------------------------------------------ */

.tc-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      color-mix(in srgb, var(--tc-gold) 9%, transparent) 6px 7px
    ),
    linear-gradient(160deg, var(--tc-surface-2) 0%, var(--tc-surface-table) 100%);
  box-shadow: var(--tc-shadow-card);
  border: 1px solid color-mix(in srgb, var(--tc-gold) 38%, transparent);
}

/* Inner gold hairline, inset from the outer border.
   A real element, not ::after — .is-played also needs ::after for its scrim,
   and at higher specificity it would silently erase this frame. */
.tc-card__frame {
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--tc-gold) 22%, transparent);
  border-radius: calc(var(--tc-radius-card) - 5px);
  pointer-events: none;
}

.tc-card__back-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--tc-space-3);
  text-align: center;
  font-family: var(--tc-font-ui);
  font-size: 9px;
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc-gold) 85%, transparent);
}

.tc-card--sm .tc-card__back-mark {
  font-size: 6px;
}

/* ------------------------------------------------------------------ *
 * STATES
 * ------------------------------------------------------------------ */

/* Hover — playable cards only. */
.tc-card--interactive:hover,
.tc-card.is-hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow-card), 0 0 20px var(--tc-gold-glow);
  cursor: pointer;
}

/* Selected — committed for this round. Gold ring + lift. */
.tc-card.is-selected {
  transform: translateY(-10px);
  box-shadow:
    0 0 0 2px var(--tc-gold),
    var(--tc-shadow-card),
    0 0 28px var(--tc-gold-glow-strong);
}

/* Played / disabled. Non-interactive, drained of accent. */
.tc-card.is-played {
  transform: none;
  filter: grayscale(0.55) brightness(0.62);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.tc-card.is-played::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--tc-surface-table) 35%, transparent);
  z-index: 3;
}

/* Winner — green ring AND ✓ glyph. Colour is never the only signal. */
.tc-card.is-winner {
  box-shadow:
    0 0 0 3px var(--tc-win),
    var(--tc-shadow-card),
    0 0 30px var(--tc-win-glow-strong);
}

/* Loser — red ring AND ✗ glyph AND the loss vignette. */
.tc-card.is-loser {
  box-shadow:
    0 0 0 3px var(--tc-loss),
    var(--tc-shadow-card),
    0 0 30px var(--tc-loss-glow);
}

.tc-card.is-loser .tc-card__vignette {
  position: absolute;
  inset: 0;
  background: var(--tc-loss-vignette);
  z-index: 2;
  pointer-events: none;
}

/* Outcome badge — the non-colour cue. Shape differs as well as glyph:
   the winner badge is a circle, the loser badge a cut corner. */
.tc-card__badge {
  position: absolute;
  top: var(--tc-space-2);
  right: var(--tc-space-2);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: var(--tc-font-ui);
  font-size: 13px;
  font-weight: var(--tc-weight-semibold);
  line-height: 1;
  color: var(--tc-surface-table);
}

.is-winner .tc-card__badge {
  background: var(--tc-win);
  border-radius: var(--tc-radius-pill);
}

.is-loser .tc-card__badge {
  background: var(--tc-loss);
  border-radius: var(--tc-radius-button-sm) 0 var(--tc-radius-button-sm) 0;
}

/* Keyboard focus — visible, and distinct from selection. */
.tc-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--tc-focus-ring), var(--tc-shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  .tc-card,
  .tc-card--interactive:hover,
  .tc-card.is-hover,
  .tc-card.is-selected {
    transition: none;
    transform: none;
  }
}