/**
 * Game-shell layout ONLY. The look of cards, buttons, chips, modals and the swap
 * UI all come from design/ (tokens, components, card, swap). This file positions
 * the mobile-first 390×844 device and lays out the per-screen structure.
 */

.tc-stage {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, #171b26 0%, transparent 70%),
    var(--tc-surface-table, #0d0f14);
}
body { margin: 0; }

/* The design card is a <span> with no `display`, so it only gets its width when
   it is a flex item (inside a .tc-row). Make every card a block box so its width
   also applies inside grid slots and buttons — otherwise it collapses to ~0. */
.tc-card { display: block; }

.tc-device {
  position: relative;
  width: 390px;
  max-width: 100vw;
  height: 844px;
  max-height: calc(100vh - 64px);
  border-radius: 28px;
  border: 1px solid var(--tc-card-edge, #2a2f3d);
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, #171b26 0%, transparent 65%),
    var(--tc-surface-table, #0d0f14);
  overflow: hidden;
  box-shadow: var(--tc-shadow-panel, 0 8px 32px rgba(0, 0, 0, 0.55));
}

.tc-app,
.tc-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--tc-text-primary, #f5ebd6);
  font-family: var(--tc-font-ui, system-ui, sans-serif);
}

.tc-screen__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}

.tc-screen__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  overflow: auto;
}

.tc-screen__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 16px;
}

.tc-eyebrow {
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-muted, #8a8a9a);
  margin: 0;
}
.tc-title {
  font-family: var(--tc-font-display, Georgia, serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
}
.tc-note {
  color: var(--tc-text-muted, #8a8a9a);
  font-size: 13px;
  margin: 0;
  text-align: center;
  max-width: 30ch;
}
.tc-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.tc-muted-label {
  font-family: var(--tc-font-ui, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-muted, #8a8a9a);
}
.tc-turn {
  font-size: 13px;
  color: var(--tc-text-muted, #8a8a9a);
}
.tc-turn b { color: var(--tc-gold, #d4a574); }

/* Round pip timer — a thin draining bar. */
.tc-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--tc-gold, #d4a574);
}
.tc-clock__track {
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--tc-surface-2, #1d2230);
  overflow: hidden;
}
.tc-clock__fill {
  height: 100%;
  background: var(--tc-gold, #d4a574);
  transition: width 1s linear;
}
.tc-clock--warn { color: var(--tc-loss, #e07178); }
.tc-clock--warn .tc-clock__fill { background: var(--tc-loss, #e07178); }

/* Draft — 10 slots in a 5×2 grid. */
.tc-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  justify-items: center;
}
.tc-slot {
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* Size the CARD (not the slot) — card.css declares --tc-card-w on .tc-card, so a
   var set on the slot would be shadowed. This wins on specificity. */
.tc-slot .tc-card { --tc-card-w: 52px; }
.tc-slot .tc-cardback__q { font-size: 20px; }
.tc-slot--open { cursor: pointer; }
.tc-slot--open:hover .tc-card { box-shadow: var(--tc-shadow-card), 0 0 14px var(--tc-gold-glow, rgba(212, 165, 116, 0.15)); }
.tc-slot--open:focus-visible { outline: none; }
.tc-slot--open:focus-visible .tc-card { box-shadow: var(--tc-focus-ring); }
.tc-slot--mine .tc-card { box-shadow: 0 0 0 2px var(--tc-gold, #d4a574), var(--tc-shadow-card); }
.tc-slot--taken .tc-card { filter: grayscale(0.5) brightness(0.68); }
.tc-slot__tag {
  display: block;
  text-align: center;
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 9px;
  color: var(--tc-text-muted, #8a8a9a);
  margin-top: 2px;
  min-height: 12px;
}

/* Hand row / pool row. */
.tc-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.tc-hand .tc-card { --tc-card-w: 76px; cursor: pointer; }
.tc-pool .tc-card { --tc-card-w: 62px; }

/* Reveal (round result). */
.tc-reveal {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tc-reveal .tc-card { --tc-card-w: 96px; }
.tc-reveal__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tc-vs { font-family: var(--tc-font-display, Georgia, serif); color: var(--tc-text-muted, #8a8a9a); }

.tc-result-glyph { font-size: 40px; line-height: 1; }
.tc-win { color: var(--tc-win, #5fc28b); }
.tc-lose { color: var(--tc-loss, #e07178); }

/* Money breakdown table on the result screen. */
.tc-ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 13px;
}
.tc-ledger td { padding: 6px 4px; border-bottom: 1px solid var(--tc-card-edge, #2a2f3d); }
.tc-ledger td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tc-ledger tr:last-child td { border-bottom: 0; font-weight: 600; color: var(--tc-gold, #d4a574); }
.tc-ledger__muted td { color: var(--tc-text-muted, #8a8a9a); }

.tc-stage__hint {
  color: var(--tc-text-muted, #8a8a9a);
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 11px;
  text-align: center;
  margin: 0;
  max-width: 390px;
}

/* How-to-play rules list on the intro screen. */
.tc-rules {
  list-style: none;
  counter-reset: tc-rule;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.tc-rules li {
  counter-increment: tc-rule;
  position: relative;
  padding-left: 34px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tc-text-muted, #8a8a9a);
}
.tc-rules li b { color: var(--tc-text-primary, #f5ebd6); font-weight: 600; }
.tc-rules li::before {
  content: counter(tc-rule);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--tc-gold, #d4a574);
  color: var(--tc-gold, #d4a574);
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.tc-fade { animation: tc-fade 240ms var(--tc-ease-standard, cubic-bezier(0.2, 0, 0, 1)); }
@keyframes tc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 430px) {
  .tc-stage { padding: 0; }
  .tc-device { border-radius: 0; border: 0; height: 100vh; max-height: 100vh; }
  .tc-stage__hint { display: none; }
}

/* ================================================================== *
 * RESPONSIVE  —  reflow, don't upscale.
 *
 * Mobile (≤767) is the base above and is left EXACTLY as-is. Tablet and desktop
 * widen the centred play area into a real card table: the device grows, cards
 * and spacing step up (bigger --tc-card-w, not a CSS zoom), the header spreads
 * into score / round / timer zones, and stretchy blocks (draft grid, ledger,
 * rules) are capped and centred so nothing sprawls edge to edge.
 *
 * Breakpoint literals mirror design/tokens.css (--tc-bp-tablet 768,
 * --tc-bp-desktop 1280); @media can't read a var(), so they are duplicated here.
 * ================================================================== */

/* ---- TABLET: 768–1279 (min-width: --tc-bp-tablet) ---- */
@media (min-width: 768px) {
  .tc-stage { gap: 20px; padding: 24px; }
  .tc-device {
    width: min(680px, 92vw);
    height: min(880px, 94vh);
    max-height: 94vh;
    border-radius: 24px;
  }

  /* Header becomes three breathing zones. */
  .tc-screen__top { padding: 24px 28px 12px; gap: 20px; }
  .tc-screen__body { gap: 18px; padding: 12px 28px; }
  .tc-screen__foot { padding: 12px 28px 24px; }

  .tc-title { font-size: 34px; }
  .tc-note { font-size: 15px; max-width: 44ch; }
  .tc-muted-label { font-size: 11px; }
  .tc-turn { font-size: 15px; }
  .tc-clock { font-size: 15px; }
  .tc-clock__track { width: 84px; height: 5px; }

  /* Bigger cards for the 3 hand + 4 undrawn. */
  .tc-hand .tc-card { --tc-card-w: 104px; }
  .tc-pool .tc-card { --tc-card-w: 84px; }
  .tc-reveal .tc-card { --tc-card-w: 132px; }
  .tc-reveal { gap: 28px; }
  .tc-slot .tc-card { --tc-card-w: 74px; }
  .tc-slot .tc-cardback__q { font-size: 26px; }
  .tc-row { gap: 14px; }

  /* Cap + centre the stretchy blocks so they don't sprawl. */
  .tc-slots { gap: 14px; max-width: 520px; margin-inline: auto; }
  .tc-ledger { max-width: 460px; margin-inline: auto; font-size: 15px; }
  .tc-ledger td { padding: 9px 8px; }
  .tc-rules { max-width: 560px; margin-inline: auto; }
  .tc-rules li { font-size: 15px; }
  .tc-result-glyph { font-size: 56px; }
}

/* ---- DESKTOP: ≥1280 (min-width: --tc-bp-desktop) ---- */
@media (min-width: 1280px) {
  .tc-stage { gap: 24px; padding: 32px; }
  .tc-device {
    width: min(880px, 72vw);
    height: min(900px, 92vh);
    max-height: 92vh;
    border-radius: 28px;
  }

  .tc-screen__top { padding: 28px 40px 14px; gap: 28px; }
  .tc-screen__body { gap: 22px; padding: 16px 40px; }
  .tc-screen__foot { padding: 16px 40px 28px; }

  .tc-title { font-size: 40px; }
  .tc-note { font-size: 16px; max-width: 52ch; }
  .tc-turn { font-size: 16px; }
  .tc-clock { font-size: 16px; }
  .tc-clock__track { width: 110px; }

  .tc-hand .tc-card { --tc-card-w: 128px; }
  .tc-pool .tc-card { --tc-card-w: 100px; }
  .tc-reveal .tc-card { --tc-card-w: 164px; }
  .tc-reveal { gap: 40px; }
  .tc-slot .tc-card { --tc-card-w: 92px; }
  .tc-slot .tc-cardback__q { font-size: 30px; }
  .tc-row { gap: 18px; }

  .tc-slots { gap: 18px; max-width: 640px; }
  .tc-ledger { max-width: 500px; font-size: 16px; }
  .tc-rules { max-width: 640px; }
  .tc-result-glyph { font-size: 68px; }
  /* Footer actions read as a centred button bar, not a full-width phone stack. */
  .tc-screen__foot .tc-btn--block { max-width: 420px; margin-inline: auto; }
  .tc-modal__actions-row { max-width: 420px; margin-inline: auto; }
}

/* ================================================================== *
 * INPUT  —  hover (fine pointer) + keyboard focus on desktop; touch elsewhere.
 * Every hover cue has a non-hover equivalent: a persistent tap/pick label, a
 * pointer cursor, a :focus-visible ring, and the on-activation selection state.
 * ================================================================== */

/* Keyboard/focus ring on the swap cards (which aren't .tc-card--interactive). */
.tc-card[data-drop]:focus-visible,
.tc-card[data-play]:focus-visible,
.tc-card[data-pos]:focus-visible {
  outline: none;
  box-shadow: var(--tc-focus-ring), var(--tc-shadow-card);
}

/* Hover lifts only where a fine pointer can hover — never on touch, so a tap
   can't leave a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .tc-card[data-drop]:hover,
  .tc-card[data-pos]:hover {
    transform: translateY(-4px);
    box-shadow: var(--tc-shadow-card), 0 0 16px var(--tc-gold-glow, rgba(212, 165, 116, 0.15));
    cursor: pointer;
  }
}
/* On touch (no hover), neutralise any inherited hover transform so it can't stick. */
@media (hover: none) {
  .tc-card--interactive:hover,
  .tc-slot--open:hover .tc-card { transform: none; }
}