/* play.css — the table.
   Loaded after styles.css and using only its tokens: the game is the same
   instrument, not a second one.

   The board is a chronological track, not a ring. A ring puts 32 targets on a
   circle where none of them can hold a date, a name or a thumbnail, and on a
   phone it collapses into a wheel of dots. Eight columns by four rows reads
   oldest-to-newest the way the chronology does, and every return is a button
   big enough to hit and wide enough to read. */

.playbody { min-height: 100vh; min-height: 100dvh; }
.play {
  max-width: 1440px; margin: 0 auto;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(1rem, 3vw, 2rem) var(--pad) calc(32px + env(safe-area-inset-bottom) + var(--decision-height, 0px));
}

/* ---------- boot / opening ---------- */
.play__boot { text-align: center; padding: 4rem 0; }

/* Every control on this page is a real touch target. */
.play .btn-rules, .play__result .btn-rules { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.play__bootline { font-family: var(--sans); color: var(--muted-2); font-size: 1rem; margin: 0 0 1rem; }
.play__intro { text-align: center; max-width: 46rem; margin: clamp(1.4rem, 6vw, 3.4rem) auto 0; }
.play__blurb { font-family: var(--sans); color: var(--muted-2); font-size: 1.05rem; line-height: 1.65; margin: 1rem auto 0; max-width: 42rem; }
.play__blurb b { color: var(--bone); font-weight: 400; }
.play__start { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.play__seedline { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; }
.play__resume { font-family: var(--sans); margin-top: 1rem; font-size: 0.95rem; color: var(--muted-2); line-height: 1.6; }
.play__warn { font-family: var(--sans); margin-top: 0.8rem; font-size: 0.9rem; color: var(--ember-hot); }
.play__note { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); margin-top: 2.2rem; line-height: 1.6; }
.play__metadata { font: 12px/1.5 var(--sans); color: var(--muted); margin: 0 0 8px; }
.play__banner {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); border-block: 1px solid var(--hair);
  padding: 12px 16px; margin: 0 0 20px; text-align: center;
}

/* ---------- status ---------- */
.status {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 8px 16px;
  border-bottom: 1px solid var(--hair); padding-bottom: 16px; margin-bottom: 24px; align-items: start;
}
.status__cell { padding: 8px 0; min-width: 0; }
.status__cell b {
  display: block; font: 500 26px/1.3 var(--serif); color: var(--bone);
  font-variant-numeric: tabular-nums;
}
 .status__cell span { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 0.2rem; }
.status__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status details { font: 14px/1.5 var(--sans); }
.status__scores dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 8px 0; }
.status__scores dd { margin: 0; font-variant-numeric: tabular-nums; }
.status details[open] { grid-column: 1 / -1; }

.play__objective { font-family: var(--sans); font-size: 1rem; color: var(--muted-2); margin: 0 0 0.9rem; line-height: 1.55; }

/* ---------- the track ---------- */
.track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.track__note { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); margin: 0.6rem 0 1.2rem; line-height: 1.5; }

.cell {
  position: relative; display: flex; flex-direction: column; gap: 0.1rem;
  min-height: 88px; padding: 8px; text-align: left;
  background: #0b2029; color: var(--muted-2);
  border: 1px solid var(--hair); border-radius: 4px;
  font-family: var(--mono); cursor: default; overflow-wrap: anywhere;
  transition: border-color .15s, background .15s, transform .15s;
}
/* the row break, said out loud rather than implied by the grid */
.track .cell:nth-child(8n)::after {
  content: "↵"; position: absolute; right: 3px; bottom: 2px;
  font-size: 12px; color: var(--muted); opacity: 0.7;
}
.cell > .card { flex: none; margin: 4px 0; transform: none; transition: none; will-change: auto; pointer-events: none; }
.cell__yr { font-size: 0.78rem; color: var(--muted-2); letter-spacing: 0.02em; }
.cell__empty { font-size: 0.75rem; color: var(--muted); }
.cell__name {
  font-family: var(--serif); font-size: 0.82rem; color: var(--bone); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cell__stats { font-size: 0.75rem; color: var(--muted-2); margin-top: auto; }
.cell__stats b { color: var(--bone); font-weight: 600; }
.cell__stats em { font-style: normal; margin-left: 0.25rem; }
.cell__side { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.cell--held.cell--record { border-color: color-mix(in oklab, var(--bone) 42%, var(--hair)); background: color-mix(in oklab, var(--bone) 7%, var(--bg-2)); }
.cell--held.cell--record .cell__side { color: var(--bone); }
.cell--held.cell--erasure { border-color: color-mix(in oklab, var(--ember) 48%, var(--hair)); background: color-mix(in oklab, var(--ember) 9%, var(--bg-2)); }
.cell--held.cell--erasure .cell__side { color: var(--ember-hot); }
.cell.is-sealed { border-style: double; background: var(--panel); }
.cell.is-sealed .cell__empty::after { content: ""; }

.cell.is-dest { cursor: pointer; border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, var(--bg-2)); }
.cell.is-dest .cell__empty { color: var(--muted-2); }
.cell.is-dest:hover { transform: translateY(-2px); }
.cell.is-contest { border-style: dashed; border-color: var(--ember-hot); }
.cell.is-mark { cursor: pointer; border-color: var(--ember-hot); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ember-hot) 40%, transparent); }
.cell.is-chosen { border-color: var(--bone); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--bone) 45%, transparent); }
.cell[disabled] { cursor: default; }
/* where the clock stands: the return about to be swept */
.cell.is-now { box-shadow: inset 0 2px 0 0 var(--ember-hot); }
.cell.is-now .cell__yr { color: var(--ember-hot); }

/* ---------- the hand ---------- */
.hand { display: flex; gap: 0.5rem; overflow-x: auto; padding: 24px 8px 16px; scrollbar-width: thin; }
.hand__empty { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); padding: 0.6rem 0; }
.handcard {
  flex: 0 0 220px; padding: 0; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left;
  transition: transform .15s, box-shadow .15s;
}
.handcard.is-sel { box-shadow: 0 0 0 2px var(--gold); }
.handcard:disabled { cursor: default; }
.handcard > .card { width: 100%; }

/* ---------- the dock ---------- */
.dock {
  --bg: #efeadd; --panel: #e8e2d2; --bone: #172b30; --ink: #172b30;
  --muted: #586365; --muted-2: #364b50; --gold: #735626; --ember-hot: #82472f;
  --hair: #c5bea9;
  background: var(--paper) var(--paper-image) center / 768px; color: var(--ink);
  border: 1px solid #ad9662; border-radius: 4px;
  padding: 16px;
}
.dock__prompt { font-family: var(--sans); font-size: 1rem; color: var(--bone); margin: 0 0 0.5rem; line-height: 1.5; }
.dock__detail { min-height: 0; margin-bottom: 12px; }
.dock__name { font: 600 20px/1.25 var(--serif); margin: 0 0 8px; }
.dock__ability, .dock__effect { font: 16px/1.5 var(--sans); margin: 0 0 8px; color: var(--muted-2); }
.dock__maths, .dock__target { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.dock__maths { font-family: var(--mono); color: var(--bone); }
.dock__maths b { color: var(--gold); }
.dock__target { font-family: var(--mono); color: var(--ember-hot); }
.dock__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dock__bar { flex-shrink: 0; }
.dock__printed summary { font: 14px/1.5 var(--sans); }
.track .cell { scroll-margin-bottom: calc(16px + var(--decision-height, 0px)); }

/* ---------- activity ---------- */
.activity { border-top: 1px solid var(--hair); margin-top: 1rem; padding-top: 0.6rem; }
.activity summary { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); cursor: pointer; line-height: 1.5; }
.activity__list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.activity__line { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 0 0 0.3rem; line-height: 1.45; }
.activity__line--record { color: var(--muted-2); }
.activity__line--erasure { color: color-mix(in oklab, var(--ember-hot) 70%, var(--muted)); }

/* ---------- the result ---------- */
.play__result { max-width: 46rem; margin: clamp(1.4rem, 5vw, 3rem) auto 0; text-align: center; }
.play__why { font-family: var(--sans); color: var(--muted-2); font-size: 1rem; margin: 0 0 1.4rem; }
.play__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px;
  background: var(--hair-2); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; margin-bottom: 1.4rem;
}
.fact { background: var(--panel); padding: 0.7rem 0.5rem; }
.fact b { display: block; font-family: var(--mono); font-size: 1.1rem; color: var(--bone); }
.fact span { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem; }
.play__copy { display: block; margin-top: 1.2rem; text-align: left; font-size: 0.74rem; color: var(--muted); }
.play__copy textarea {
  width: 100%; margin-top: 0.4rem; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 8px; padding: 0.6rem; font-family: var(--mono); font-size: 0.72rem;
}

/* ---------- phones ---------- */
@media (max-width: 831px) {
  .track { grid-template-columns: repeat(4, 1fr); }
  .track .cell:nth-child(8n)::after { content: none; }
  .track .cell:nth-child(4n)::after {
    content: "↵"; position: absolute; right: 3px; bottom: 2px; font-size: 12px; color: var(--muted); opacity: 0.7;
  }
  .status { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding-bottom: 8px; margin-bottom: 12px; }
  .status__cell b { font-size: 20px; }
  .status__cell span { letter-spacing: 0; text-transform: none; line-height: 1.3; }
  .status__scores, .status__game { grid-column: span 2; }
  .play__banner { padding: 8px; margin-bottom: 8px; }
  .cell { min-height: 72px; }
  /* Nothing on the phone board drops below 12px: the desktop sizes are the
     floor, not a ceiling to shrink from. */
  .cell__yr { font-size: 0.8rem; }
  .cell__name { font-size: 0.84rem; -webkit-line-clamp: 2; }
  .cell__stats { font-size: 0.76rem; }
  .cell__side { font-size: 0.75rem; }
}
@media (max-width: 639px) {
  .handcard { flex-basis: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .cell, .handcard { transition: none !important; }
  .cell.is-dest:hover { transform: none !important; }
}

/* The tabletop is one arena; the confirmation is beside it, not below it. */
.duel { display: grid; gap: 20px; align-items: start; }
.duel__arena { min-width: 0; padding: 16px; border: 1px solid #806e4c; border-radius: 8px; background: var(--bg-2); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--hair); }
.opponent { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.opponent p { font: 12px/1.5 var(--mono); color: var(--muted-2); max-width: 140px; }
.opponent__hand { display: flex; min-width: 0; flex: 1; justify-content: center; }
.opponent__hand .card { width: 32px; margin-left: -8px; flex: 0 0 32px; }
.opponent__hand .card, .pile .card { transform: none; will-change: auto; cursor: inherit; }
.piles { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding: 12px 0; border-block: 1px solid var(--hair); }
.pile { display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--muted-2); font: 12px/1.5 var(--mono); }
button.pile { cursor: pointer; }
.pile > .card { flex: 0 0 32px; width: 32px; }
.dock__copy { min-width: 0; }
.dock__acts :is(.btn-rules, .ui-link) { font-size: 14px; letter-spacing: 0; padding-inline: 8px; min-height: 44px; }
#zoneCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.zone-card { background: none; border: 0; padding: 0; cursor: pointer; max-width: 300px; }
.zone-card > .card { width: 100%; }
.modal--zones .modal__panel { max-width: 1000px; }
#duelFx { position: fixed; inset: 0; z-index: 35; pointer-events: none; perspective: 1100px; }
.duel-fx { position: absolute; pointer-events: none; }
.duel-fx--card { transform-origin: top left; overflow: hidden; }
.duel-fx--card > .card { width: 100%; height: 100%; transform: none; }
.duel-fx--mark { display: grid; place-items: center; padding: 4px; border: 2px solid var(--gold); border-radius: 8px; background: #091a22e8; color: var(--bone); text-align: center; font: 12px/1.3 var(--mono); overflow: hidden; }
.duel-fx--mudflood { border-bottom: 6px solid #81b9c5; }
.duel-fx--volcanic { border-color: var(--ember-hot); box-shadow: inset 0 -4px 0 #b84221; }
.duel-fx--red-fallout { border-style: dotted; border-color: #c96150; }
.duel-fx--vanishing { border-style: dashed; }
.duel-fx--plague { border-inline: 5px solid #a7b754; }
.duel-fx--contagion-link svg { display: block; width: 100%; height: 100%; overflow: visible; }
.duel-fx--contagion-link line { stroke: #a7b754; stroke-width: 2; }
.duel-fx--displacement { border-block: 4px double var(--bone); }
.duel-fx--astronomical { border-radius: 50%; box-shadow: 0 0 0 3px #bc9d6470; }
.duel-fx--seal { border-style: double; background: #091a22e8; }
.duel-fx--mythics { inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; background: #040d13d9; }
.mythic-reveal { width: min(42vw, 300px, calc((100dvh - 112px) * .7142857)); color: var(--gold); text-align: center; font: 12px/1.5 var(--mono); }
.mythic-reveal__turn { position: relative; transform-style: preserve-3d; }
.mythic-reveal__turn > .card { backface-visibility: hidden; }
.mythic-reveal__back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; }
.is-mythic-reveal .duel__arena { opacity: 0.22; transition: opacity 180ms; }
#skipAnimation { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 36; }
@media (min-width: 1100px) {
  .duel { grid-template-columns: minmax(0, 1fr) 18rem; }
  .dock { position: sticky; top: 16px; padding: 20px; }
}
@media (min-width: 1100px) and (pointer: fine) {
  .hand { justify-content: safe center; overflow-x: auto; padding-top: 40px; }
  .handcard { position: relative; transform: translateY(var(--fan-lift)) rotate(var(--fan-angle)); }
  .handcard + .handcard { margin-left: -32px; }
  .handcard:is(:focus-visible, .is-sel) { transform: translateY(-16px); z-index: 2; }
}
@media (max-width: 1099px) {
  .duel__arena { padding: 8px; }
  .dock__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dock__prompt { font-size: 14px; margin-bottom: 8px; }
  /* The hand fans on phones too: same angles, tighter overlap and raise. */
  .handcard { transform: translateY(var(--fan-lift)) rotate(var(--fan-angle)); }
  .handcard + .handcard { margin-left: -24px; }
  .handcard:is(:focus-visible, .is-sel) { transform: translateY(-10px); z-index: 2; }
}
@media (max-width: 1099px) and (min-height: 600px) {
  .dock.is-selecting {
    position: fixed; z-index: 25; inset: auto 0 0;
    display: flex; flex-direction: column;
    max-height: calc(45svh + env(safe-area-inset-bottom));
    padding: 12px var(--pad) calc(8px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--gold);
  }
  .dock.is-selecting .dock__detail { overflow-y: auto; overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .handcard, .handcard:is(:focus-visible, .is-sel) { transform: none; }
  .is-mythic-reveal .duel__arena { opacity: 1; transition: none; }
  .mythic-reveal__back { display: none; }
}