/**
 * THREE CHANCES — Swap UI (BLIND SWAP redesign).
 *
 * The headline mechanic: drop one of your 3, then commit to one of the 4 undrawn
 * cards that are FACE DOWN — a blind gamble. The taken card is revealed to the
 * SWAPPER ONLY, after they commit. No preview, no take-back. Pay 2% of your bet.
 * One swap per match, in exactly one of two windows (pre-game, mid-game at 1-1).
 *
 * VISIBILITY. The opponent learns only THAT a swap happened and in which window —
 * never the cards or the fee. So the opponent indicator carries no card data and
 * is styled neutral, not gold: it is an event, not information to act on. This is
 * the key departure from the old full-visibility design.
 *
 * COLOUR NOTE. The brief asks for a "blue/neutral" pre-game treatment and a red
 * mid-game one. A saturated blue would be a second accent and would break the
 * single-gold rule the rest of the system is built on. Instead the calm variant
 * leans on the palette's existing COOL NEUTRALS (Surface2 #1d2230 is already a
 * blue-grey) with gold for action; the urgent variant shifts the frame, header
 * and glow to loss red. Calm vs urgent therefore reads through temperature and
 * intensity, not through a new hue.
 *
 * Depends on tokens.css, card.css and components.css.
 */

/* ================================================================
 * MODAL SHELL
 * ================================================================ */

.tc-modal-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 6, 9, 0.72);
  backdrop-filter: blur(2px);
  padding: var(--tc-space-4);
}

.tc-modal {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
  padding: var(--tc-space-5);
  border-radius: var(--tc-radius-panel-lg);
  background: linear-gradient(180deg, var(--tc-surface-2) 0%, var(--tc-surface) 100%);
  border: 1px solid var(--tc-card-edge);
  box-shadow: var(--tc-shadow-panel);
}

/* Calm — pre-game. Cool neutral frame, gold action. */
.tc-modal--calm {
  border-color: rgba(139, 152, 184, 0.34);
  box-shadow: var(--tc-shadow-panel), 0 0 40px rgba(96, 116, 160, 0.14);
}

/* Urgent — the 1-1 window. Red frame and glow; the decider is one tap away. */
.tc-modal--urgent {
  border-color: var(--tc-loss);
  box-shadow: var(--tc-shadow-panel), 0 0 44px var(--tc-loss-glow-strong);
}

.tc-modal__head { display: flex; flex-direction: column; gap: var(--tc-space-1); }

.tc-modal__eyebrow {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-text-muted);
  margin: 0;
}

.tc-modal--urgent .tc-modal__eyebrow { color: var(--tc-loss); }

.tc-modal__title {
  font-family: var(--tc-font-display);
  font-size: var(--tc-size-title);
  line-height: var(--tc-leading-tight);
  font-weight: var(--tc-weight-regular);
  color: var(--tc-text-primary);
  margin: 0;
}

.tc-modal__sub {
  font-family: var(--tc-font-ui);
  font-size: var(--tc-size-label);
  color: var(--tc-text-muted);
  margin: 0;
}

.tc-modal__actions { display: flex; flex-direction: column; gap: var(--tc-space-2); }
.tc-modal__actions-row { display: flex; gap: var(--tc-space-2); }
.tc-modal__actions-row > * { flex: 1 1 0; }

/* ================================================================
 * STEP RAIL — drop, take, confirm
 * ================================================================ */

.tc-steps {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.tc-steps__item { display: inline-flex; align-items: center; gap: var(--tc-space-1); }

.tc-steps__num {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--tc-radius-pill);
  border: 1px solid var(--tc-card-edge);
  font-size: 9px;
}

.tc-steps__item.is-active { color: var(--tc-gold); }
.tc-steps__item.is-active .tc-steps__num { border-color: var(--tc-gold); color: var(--tc-gold); }
.tc-steps__item.is-done { color: var(--tc-text-muted); }
.tc-steps__item.is-done .tc-steps__num { border-color: var(--tc-win); color: var(--tc-win); }
.tc-steps__sep { flex: 1 1 auto; height: 1px; background: var(--tc-card-edge); }

/* ================================================================
 * CARD ROWS INSIDE THE MODAL
 * ================================================================ */

.tc-swap-group { display: flex; flex-direction: column; gap: var(--tc-space-2); }

.tc-swap-group__label {
  font-family: var(--tc-font-ui);
  font-size: 10px;
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.tc-swap-row { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; }

/* The undrawn pool is FACE DOWN. Each back carries a large muted "?" so it reads
   as an unknown you are choosing blind, and a small slot index for reference. A
   chosen slot takes the gold selection ring exactly as a face-up card would —
   the ring marks the position, not a known value. */
.tc-cardback__q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--tc-font-display);
  font-size: 26px;
  line-height: 1;
  color: rgba(212, 165, 116, 0.55);
  padding-bottom: 6px;
}

.tc-cardback__slot {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 2;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-text-muted);
}

/* ================================================================
 * COMMIT SUMMARY — what leaves, what it costs. What ARRIVES is unknown
 * until after the commit, so the incoming side shows a face-down "?".
 * ================================================================ */

.tc-swap-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-4);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-surface-table);
  border: 1px solid var(--tc-card-edge);
}

.tc-swap-summary__col { display: flex; flex-direction: column; align-items: center; gap: var(--tc-space-2); }

.tc-swap-summary__cap {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.tc-swap-summary__arrow {
  font-size: 18px;
  color: var(--tc-gold);
  line-height: 1;
}

.tc-swap-fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-4);
  border-radius: var(--tc-radius-button);
  background: rgba(212, 165, 116, 0.1);
  border: 1px solid rgba(212, 165, 116, 0.28);
}

.tc-swap-fee__label {
  font-family: var(--tc-font-ui);
  font-size: var(--tc-size-label);
  color: var(--tc-text-primary);
}

.tc-swap-fee__note {
  display: block;
  font-size: var(--tc-size-micro);
  color: var(--tc-text-muted);
}

.tc-swap-fee__value {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-size-heading);
  font-variant-numeric: tabular-nums;
  color: var(--tc-gold);
}

/* ================================================================
 * SWAP AFFORDANCE — persistent on the Card Selection screen
 * ================================================================ */

.tc-swapchip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  min-height: 36px;
  padding: 0 var(--tc-space-4);
  border-radius: var(--tc-radius-pill);
  border: 1px solid rgba(212, 165, 116, 0.45);
  background: rgba(212, 165, 116, 0.1);
  font-family: var(--tc-font-ui);
  font-size: var(--tc-size-label);
  font-weight: var(--tc-weight-medium);
  color: var(--tc-gold);
  cursor: pointer;
}

.tc-swapchip__icon {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-size-body);
  line-height: 1;
}

.tc-swapchip__meta {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

.tc-swapchip:hover { background: rgba(212, 165, 116, 0.18); border-color: var(--tc-gold); }
.tc-swapchip:focus-visible { outline: none; box-shadow: var(--tc-focus-ring); }

/* Reserved for the 1-1 window — still owned, not yet spendable. */
.tc-swapchip--reserved {
  background: transparent;
  border-style: dashed;
  border-color: rgba(212, 165, 116, 0.55);
  color: var(--tc-gold);
  cursor: default;
}

/* Spent. */
.tc-swapchip--used {
  background: transparent;
  border-color: var(--tc-card-edge);
  color: var(--tc-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Declined — forfeited for the match, per CONFIG.swap.declineForfeitsMidgame. */
.tc-swapchip--declined {
  background: transparent;
  border-color: var(--tc-card-edge);
  color: var(--tc-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}

/* Live now — the 1-1 window is open and this player can still act. */
.tc-swapchip--urgent {
  border-color: var(--tc-loss);
  background: rgba(224, 113, 120, 0.14);
  color: var(--tc-loss);
  animation: tc-swap-pulse 1100ms var(--tc-ease-standard) infinite;
}

@keyframes tc-swap-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(224, 113, 120, 0); }
  50% { box-shadow: 0 0 20px var(--tc-loss-glow-strong); }
}

/* ================================================================
 * COMMIT → REVEAL — the swapper's private moment
 * After committing to a face-down slot, the taken card flips up for the
 * SWAPPER ONLY. This panel replaces the choose stage in place; there is no
 * cancel from here — the gamble is already taken.
 * ================================================================ */

.tc-swap-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-surface-table);
  border: 1px solid var(--tc-card-edge);
}

.tc-swap-reveal__cap {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

/* The revealed card animates in with a flip+overshoot — see motion.md §15. */
.tc-swap-reveal__card {
  animation: tc-reveal-pop var(--tc-duration-reveal, 400ms) var(--tc-ease-standard) both;
  transform-origin: 50% 100%;
}

.tc-swap-reveal__line {
  font-family: var(--tc-font-ui);
  font-size: var(--tc-size-label);
  color: var(--tc-text-primary);
  text-align: center;
}
.tc-swap-reveal__line b { color: var(--tc-gold); font-weight: var(--tc-weight-semibold); }

@keyframes tc-reveal-pop {
  0%   { transform: rotateY(90deg) scale(0.9); opacity: 0; }
  60%  { transform: rotateY(0deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* ================================================================
 * SWAP NOTIFICATION — blind
 * The SWAPPER'S own note may name their card (they just saw it). The
 * OPPONENT'S note is neutral and carries NO card data — only that a swap
 * happened and in which window. It is an event, not information to act on,
 * so it is not gold.
 * ================================================================ */

.tc-swapnote {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-4);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-card-edge);
  box-shadow: var(--tc-shadow-panel);
}

/* Self note — the swapper's own confirmation; may show their taken card. */
.tc-swapnote--self { border-color: var(--tc-card-edge); }

/* Opponent / occurred note — neutral, no cards, no fee, no gold pull. */
.tc-swapnote--occurred { border-color: var(--tc-card-edge); }

.tc-swapnote__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tc-swapnote__title {
  font-family: var(--tc-font-ui);
  font-size: var(--tc-size-label);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-primary);
  line-height: 1.2;
}

.tc-swapnote__detail {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-text-muted);
  line-height: 1.3;
}

.tc-swapnote__cards { display: flex; align-items: center; gap: var(--tc-space-2); flex: 0 0 auto; }

.tc-swapnote__arrow { font-size: 13px; color: var(--tc-gold); line-height: 1; }

/* Neutral event glyph for the opponent indicator — replaces the leaked cards. */
.tc-swapnote__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--tc-radius-pill);
  border: 1px solid var(--tc-card-edge);
  background: var(--tc-surface-table);
  color: var(--tc-text-muted);
  font-family: var(--tc-font-mono);
  font-size: 16px;
  line-height: 1;
}

/* Miniature card face for the SWAPPER'S own note — too small for the full component. */
.tc-minicard {
  display: grid;
  place-items: center;
  width: 30px;
  height: 42px;
  border-radius: var(--tc-radius-button-sm);
  background: linear-gradient(160deg, var(--tc-cream) 0%, var(--tc-cream-dark) 100%);
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: var(--tc-size-body);
  font-variant-numeric: lining-nums tabular-nums;
  border-top: 2px solid var(--tc-gold);
}

.tc-minicard--out { opacity: 0.5; }

/* Face-down miniature — the incoming card in the commit summary, still unknown. */
.tc-minicard--hidden {
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(212, 165, 116, 0.1) 4px 5px),
    linear-gradient(160deg, var(--tc-surface-2) 0%, var(--tc-surface-table) 100%);
  color: rgba(212, 165, 116, 0.7);
  border-top-color: rgba(212, 165, 116, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .tc-swap-reveal__card { animation: none; }
  .tc-swapchip--urgent { animation: none; }
}