.table {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: size;
  
  --dock-face: calc(clamp(110px, 17.4cqh, 150px) * var(--card-k, 1));
  --type-tag: clamp(8px, min(0.8cqw, 1.5625cqh), 10px);
  --type-note: clamp(9px, min(0.88cqw, 1.71875cqh), 11px);
  --type-label: clamp(9px, min(0.96cqw, 1.875cqh), 12px);
  --type-body: clamp(10px, min(1.04cqw, 2.03125cqh), 13px);
  --type-read: clamp(11px, min(1.12cqw, 2.1875cqh), 14px);
  --type-head: clamp(13px, min(1.36cqw, 2.65625cqh), 17px);
  --type-title: clamp(15px, min(1.68cqw, 3.28125cqh), 21px);
  background: var(--felt-0);
  
  
  --felt-0: var(--mat-felt-0);
  --felt-1: var(--mat-felt-1);
  --felt-2: var(--mat-felt-2);
  --felt-top: var(--mat-felt-top);
  --felt-bottom: var(--mat-felt-bottom);
  --playmat: var(--mat-playmat);
  --ink-mark: var(--mat-ink);
  --ink-soft: oklch(84% 0.032 274 / 0.36);
  --table-text: oklch(96.5% 0.012 274);
  --table-soft: oklch(86% 0.022 274);
  --table-dim: oklch(72% 0.030 274);
  --table-edge: oklch(70% 0.030 274 / 0.42);
  
  --felt-weave: var(--mat-weave);
  --felt-sheen: var(--mat-sheen);
  --rift-light: oklch(86% 0.07 292);
  --rift-glow: oklch(66% 0.13 292 / 0.85);
  --rift-shade: oklch(9% 0.02 274 / 0.55);
  --table-accent: #74efff;
  
  --back-top: #1a2c58;
  --back-bottom: #0c1733;
  
  --card-back-deck:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 3px, rgba(0, 0, 0, 0) 3px 6px),
    linear-gradient(160deg, var(--back-top), var(--back-bottom));
  
  --table-lift: 0 12px 28px rgba(1, 4, 12, 0.55);
  --table-lift-sm: 0 6px 18px rgba(1, 4, 12, 0.5);
}


.stage {
  
  --stage-word: clamp(12px, calc(12px / var(--fit, 1)), 20px);
  --stage-count: clamp(14px, calc(13px / var(--fit, 1)), 18px);
}


.banner {
  background: var(--bad);
  color: #fff;
  padding: var(--step-2) var(--step-4);
  flex: 0 0 auto;
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  
  animation: panel-reveal var(--motion-2) var(--ease-standard) both;
}
.banner-head { display: flex; flex-wrap: wrap; gap: var(--step-1) var(--step-3); align-items: baseline; }
.banner-head strong { font-size: var(--type-read); }
.banner-note { font-size: var(--type-note); opacity: 0.88; }
.banner-more > summary {
  cursor: pointer;
  font-size: var(--type-note);
  margin-top: var(--step-1);
  opacity: 0.88;
}
.banner-more[open] > summary { margin-bottom: var(--step-2); }
.banner-card {
  font-weight: 400;
  font-size: var(--type-note);
  line-height: 1.55;
}
.banner-card { margin-bottom: var(--step-1); }




.felt {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(184px, 19%, 260px);
  
  grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(180deg, var(--felt-top) 0%, var(--felt-0) 42%, var(--felt-bottom) 100%);
}

.felt > .banner {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 30;
  max-height: none;
  overflow: visible;
  margin: var(--step-1) var(--step-2) 0;
  border-radius: var(--round-2);
}
.felt > .fit { grid-column: 1; grid-row: 2; }
.felt > .side-right { grid-column: 2; grid-row: 1 / span 2; }

@container (max-width: 860px) {
  .table:not([data-shape="short"]) .felt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(240px, 1fr) auto;
    
    overflow-y: auto;
  }
  .table:not([data-shape="short"]) .side-right { max-height: 46vh; }
  .table:not([data-shape="short"]) .felt > .side-right { grid-column: 1; grid-row: 3; }
  
  .decide-over > .decide-result { order: -2; }
  .decide-over > .decide-answer { order: -1; margin-top: 0; }
}


.table { --info-sheet-w: min(460px, 100vw); }
@container (min-width: 861px) {
  .table[data-shape="wide"][data-beside="info"] > .felt {
    grid-template-columns: minmax(0, 1fr) clamp(184px, 19%, 260px) var(--info-sheet-w);
  }
}
@container (max-width: 860px) {
  .table[data-shape="wide"][data-beside="info"] > .felt {
    grid-template-columns: minmax(0, 1fr) var(--info-sheet-w);
  }
}


.table[data-shape="tall"] {
  
  --tall-decide: 124px;
  --tall-top: var(--touch);
  --tall-dock: 104px;
  --tall-band: calc(var(--tall-decide) + var(--tall-dock) + 2 * var(--step-2) + var(--tall-top));
}
.table[data-shape="tall"] .felt {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.table[data-shape="tall"] .felt > .banner { order: -1; flex: none; }
.table[data-shape="tall"] .fit {
  order: 0;
  flex: none;
  height: calc(100cqh - var(--tall-band));
}

.table[data-shape="tall"] .side-right { display: contents; }
.table[data-shape="tall"] .side-right > * {
  order: 3;
  flex: none;
  margin: 0 var(--step-2) var(--step-2);
}
.table[data-shape="tall"] .side-right > .chain { order: 2; }
.table[data-shape="tall"] .side-right > .panel.log { order: 4; height: 40cqh; }

.table[data-shape="tall"] .side-right > .panel.log .log-lines { overscroll-behavior: auto; }

.fit {
  
  min-width: 0;
  
  position: relative;
  overflow: hidden;
  
  border: 5px solid transparent;
  padding: 0;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%, -50%) scale(var(--fit, 1));
  transform-origin: center center;
  color: var(--table-text);
  border: 1px solid var(--table-edge);
  border-radius: var(--round-2);
  background: radial-gradient(120% 90% at 50% 50%, var(--felt-1) 0%, var(--felt-2) 100%);
  
  overflow: visible;
}
.stage > * { position: absolute; }

.half { position: absolute; inset: 0; pointer-events: none; }
.zone,
.totem,
.score-ladder,
.battlefield { pointer-events: auto; }


.playmat {
  background: var(--playmat);
  opacity: 0.62;
  pointer-events: none;
}



.zone {
  position: absolute;
  --bracket: 11px;
  background-image:
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft));
  background-repeat: no-repeat;
  background-size:
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket),
    var(--bracket) 1px, 1px var(--bracket);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}


.zone-label {
  position: absolute;
  left: 3px;
  top: 2px;
  z-index: 3;
  font-size: var(--stage-word);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--table-dim);
  white-space: nowrap;
  pointer-events: none;
  background: rgba(7, 16, 39, 0.72);
  border-radius: 2px;
  padding: 0 3px;
}

.rune-tally {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 3;
  font-weight: 700;
  font-size: max(13px, var(--stage-word));
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.zone-trash > .zone-label,
.zone-mainDeck > .zone-label,
.zone-runeDeck > .zone-label { display: none; }
.empty-slot { position: absolute; inset: 0; }

.zone-legend .legend-pool { position: absolute; top: 4px; left: 4px; z-index: 20; }

.zone-legend .legend-lent { top: auto; bottom: 4px; }
.legend-pool > summary { cursor: pointer; white-space: nowrap; list-style: none; }
.legend-pool > summary::-webkit-details-marker { display: none; }
.legend-pool-cards {
  position: absolute;
  right: -8px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--round-1);
  background: var(--surface-ground);
}
.half.near .legend-pool-cards { bottom: calc(100% + 6px); }
.half.far .legend-pool-cards { top: calc(100% + 6px); }
.legend-pool-cards > .card { position: relative; flex: none; width: 96px; height: 134px; }

.cf.whole > .cf-might.down { color: var(--bad); }
.cf.whole > .cf-might.up { color: var(--good); }

.zone-champion > .empty-slot,
.zone-legend > .empty-slot {
  border-radius: var(--round-1);
  border: 1px dashed var(--ink-soft);
  background: rgba(7, 19, 47, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.row-of-cards { position: absolute; inset: 0; }

.row-of-cards > .card { position: absolute; }


.stack { position: absolute; inset: 0; }

.stack-plate {
  position: absolute;
  inset: 0;
  border-radius: var(--round-1);
  border: 1px dashed var(--ink-soft);
  background: rgba(7, 19, 47, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.stack-backs { position: absolute; inset: 0; }
.stack-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--round-1);
  border: 1px solid var(--table-edge);
  background: var(--card-back-deck);
  box-shadow: 0 -3px 7px rgba(1, 7, 18, 0.42);
}

.stack.rune-back > .stack-backs > .stack-back {
  background: url("../brand/rune-card-back.png") center / 100% 100% no-repeat;
}
.stack-count {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 850;
  font-size: max(15px, var(--stage-word));
  letter-spacing: -0.02em;
  color: var(--table-text);
  background: rgba(7, 16, 39, 0.92);
  border: 1px solid var(--table-edge);
  border-radius: var(--round-1);
  padding: 0 4px;
  
  animation: pool-pulse var(--motion-2) var(--ease-standard);
}
.stack-face { position: absolute; inset: 0; }


.pool {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  padding: 3px 5px;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--round-2);
  box-shadow: 0 2px 8px rgba(1, 4, 12, 0.45);
}

.pool[hidden] { display: none; }
.pool-energy {
  grid-area: 1 / 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--surface-2), var(--surface-ground));
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}

.pool-energy .pool-n { font-size: 15px; line-height: 1; text-box: trim-both cap alphabetic; }
.pool-energy .pool-n[data-zero] { color: var(--ink-3); }
.pool-power {
  grid-area: 2 / 1 / 3 / -1;
  display: flex;
  gap: 1px;
  align-items: center;
  min-height: 16px;
}
.pool-power.none::before { content: "0"; color: var(--ink-3); font-weight: 700; font-size: 13px; }
.pool-more { font-size: 11px; font-weight: 700; color: var(--ink-2); margin-left: 2px; }
.pool > .pool-undo { grid-area: 1 / 2; justify-self: end; }

.pool-undo {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: radial-gradient(circle at 35% 30%, var(--surface-2), var(--surface-ground));
  color: var(--ink-2);
}
@media (hover: hover) { .pool-undo:hover { color: var(--ink-1); border-color: var(--ink-3); } }
.pool-undo > svg { display: block; }

.pool-undo { position: relative; }
@media (pointer: coarse) { .pool-undo::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } }
.pool > .pool-restricted, .pool > .pool-domain-choices { grid-column: 1 / -1; }
.pool-chip { font-size: 11px; color: var(--ink-2); }
.pool-chip .pool-name { color: var(--ink-2); }
.pool-domain-choice .cand { display: inline-flex; align-items: center; gap: 3px; }

.pool-undo[hidden] { display: block; visibility: hidden; }
.pool-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--step-2); }
.pool-name { font-size: var(--stage-word); color: var(--table-soft); }

.pool-n {
  font-weight: 850;
  font-size: 17px;
  line-height: 1.1;
  color: var(--table-text);
  font-variant-numeric: tabular-nums;
  
  animation: pool-pulse var(--motion-2) var(--ease-standard);
}
@keyframes pool-pulse {
  from { color: var(--table-accent); transform: scale(1.16); }
  to { color: var(--table-text); transform: scale(1); }
}


.node {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 850;
  font-size: 15px;
  color: var(--table-dim);
  background: rgba(10, 21, 48, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(222, 237, 255, 0.035),
    0 -3px 7px rgba(1, 7, 18, 0.42);
  
  transition:
    background-color var(--motion-2) var(--ease-standard),
    color var(--motion-2) var(--ease-standard),
    box-shadow var(--motion-2) var(--ease-standard),
    scale var(--motion-2) var(--ease-standard);
}

.node.reached {
  color: var(--table-text);
  background: rgba(31, 57, 106, 0.72);
}

.node.here {
  color: var(--ink-1);
  box-shadow:
    inset 0 0 0 2px var(--ink-1),
    0 -3px 7px rgba(1, 7, 18, 0.42);
}
.node.here[data-side="you"] {
  color: var(--you-ink);
  box-shadow:
    inset 0 0 0 2px var(--you-ink),
    0 -3px 7px rgba(1, 7, 18, 0.42);
}
.node.here[data-side="them"] {
  color: var(--opponent-ink);
  box-shadow:
    inset 0 0 0 2px var(--opponent-ink),
    0 -3px 7px rgba(1, 7, 18, 0.42);
}

.node.winning { scale: 1.12; }



.score-ladder { position: absolute; overflow: visible; }

.turn-tracker { position: absolute; display: flex; align-items: center; pointer-events: none; }
.turn-tracker > .turn-rail { flex: 1 1 auto; margin: 0; }
.score-ladder .node { font-size: var(--stage-word); }

.score-ladder-name {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--stage-word);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--table-text);
  white-space: nowrap;
}
.score-ladder-name.near { right: calc(100% + 10px); }
.score-ladder-name.far { left: calc(100% + 10px); }

.score-ladder .node { transition: background-color var(--motion-1) var(--ease-standard) var(--motion-1), color var(--motion-1) var(--ease-standard) var(--motion-1), box-shadow var(--motion-2) var(--ease-standard), scale var(--motion-2) var(--ease-standard); }
.table[data-free] .score-ladder .node { transition-delay: 0s, 0s, 0s, 0s; }
.score-ladder .node.reached[data-side="you"] { background: color-mix(in oklab, var(--you) 30%, rgba(10, 21, 48, 0.55)); }
.score-ladder .node.reached[data-side="them"] { background: color-mix(in oklab, var(--opponent) 30%, rgba(10, 21, 48, 0.55)); }
.score-ladder .node.here,
.score-ladder .node.here[data-side] {
  color: var(--table-text);
  box-shadow:
    inset 0 0 0 1px rgba(222, 237, 255, 0.035),
    0 -3px 7px rgba(1, 7, 18, 0.42);
}
.ladder-marker {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--you-ink);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity var(--motion-1) var(--ease-standard);
}
.ladder-marker.them { border-color: var(--opponent-ink); }
.ladder-marker[data-none] { opacity: 0; }
.table[data-free] .ladder-marker { transition: opacity var(--motion-1) var(--ease-standard), transform var(--motion-1) var(--ease-standard); }


.totem {
  position: absolute;
  padding: var(--step-2);
  border-radius: var(--round-1);
  background: rgba(8, 18, 43, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.totem-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--table-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.totem.mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 3px 0 0 var(--you); }
.totem:not(.mine) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 3px 0 0 var(--opponent); }

.totem.mine.active-turn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 3px 0 0 var(--you),
    0 0 0 2px var(--you),
    0 0 8px 2px var(--you);
}
.totem:not(.mine).active-turn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 3px 0 0 var(--opponent),
    0 0 0 2px var(--opponent),
    0 0 8px 2px var(--opponent);
}

.totem-active-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  white-space: nowrap;
  font-size: var(--stage-word);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.totem.mine .totem-active-label { color: var(--you); }
.totem:not(.mine) .totem-active-label { color: var(--opponent); }
.totem-line { display: flex; flex-wrap: wrap; gap: 3px; }
.totem-line .chip { font-size: 9px; padding: 0 5px; }

.totem-line .chip.away { color: var(--opponent-ink); border-color: currentColor; }


.battlefield {
  position: absolute;
  border-radius: var(--round-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.12));
  
  transition: box-shadow var(--motion-2) var(--ease-standard);
}
.battlefield-half { position: absolute; }
.battlefield-half > .card { position: absolute; }

.half-tally {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, calc(-100% - 2px));
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.1em 0.5em;
  border-radius: var(--round-pill);
  background: color-mix(in srgb, var(--felt-2) 92%, transparent);
  border: 1px solid var(--line-2);
  font-weight: 800;
  font-size: var(--stage-count);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.half-might::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.72em;
  margin-right: 0.18em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.battlefield-half.mine :is(.half-count, .half-might) { color: var(--you); }
.battlefield-half:not(.mine) :is(.half-count, .half-might) { color: var(--opponent); }

.battlefield-seam {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(226, 238, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.battlefield-stage {
  position: absolute;
  left: 8px;
  top: 15px;
  display: flex;
  gap: 3px;
}

.stage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(230, 232, 240, 0.18);
  
  transition:
    background var(--motion-2) var(--ease-standard),
    transform var(--motion-2) var(--ease-standard);
}

.stage-dot.done { background: var(--ink-3); }

.stage-dot.active { background: var(--ink-1); transform: scale(1.6); }

.battlefield-card {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 4px;
  text-align: center;
  border-radius: var(--round-1);
  border: 1px solid var(--table-edge);
  background: linear-gradient(160deg, #1c3358, #0d1b3a);
  box-shadow: 0 6px 16px rgba(1, 7, 18, 0.5);
}

.battlefield > .card.at-field {
  position: absolute;
  padding: 3px;
  box-shadow: 0 6px 16px rgba(1, 7, 18, 0.5);
}

@keyframes contested-glow-in {
  from { box-shadow: 0 6px 16px rgba(1, 7, 18, 0.5); }
  to {
    box-shadow:
      0 6px 16px rgba(1, 7, 18, 0.5),
      0 0 0 2px var(--ink-1),
      0 0 14px 3px rgba(230, 232, 240, 0.35);
  }
}
.battlefield > .card.at-field.contested {
  animation: contested-glow-in var(--motion-2) var(--ease-standard) both;
}

@keyframes result-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}
.battlefield-result { position: absolute; pointer-events: none; border-radius: var(--round-1); }
.battlefield-result.win-0,
.battlefield-result.win-1,
.battlefield-result.win-none {
  animation: result-flash var(--motion-3) var(--ease-standard) both;
}

.table[data-me="0"] .battlefield-result.win-0,
.table[data-me="1"] .battlefield-result.win-1 { box-shadow: 0 0 0 3px var(--you), 0 0 26px 8px var(--you); }
.table[data-me="0"] .battlefield-result.win-1,
.table[data-me="1"] .battlefield-result.win-0 { box-shadow: 0 0 0 3px var(--opponent), 0 0 26px 8px var(--opponent); }
.battlefield-result.win-none { box-shadow: 0 0 0 3px var(--ink-3), 0 0 26px 8px var(--ink-3); }


.table[data-me="0"] .battlefield.control-0,
.table[data-me="1"] .battlefield.control-1 {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 2px var(--you), 0 0 10px 2px var(--you);
}
.table[data-me="0"] .battlefield.control-1,
.table[data-me="1"] .battlefield.control-0 {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 2px var(--opponent), 0 0 10px 2px var(--opponent);
}
.battlefield.control-none {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 2px var(--ink-3), 0 0 10px 2px var(--ink-3);
}


.battlefield::before,
.battlefield::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--round-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-4) var(--ease-standard);
}
.battlefield::before { box-shadow: 0 0 0 3px var(--showdown); }
.battlefield::after { box-shadow: 0 0 0 3px var(--bad); }
.battlefield.posture-showdown::before { opacity: 1; }
.battlefield.posture-combat::after { opacity: 1; }

.field-glow {
  position: absolute;
  inset: -2px;
  border-radius: var(--round-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-4) var(--ease-standard);
}
.field-glow.showdown { box-shadow: 0 0 24px 6px var(--showdown-glow); }
.field-glow.combat { box-shadow: 0 0 26px 8px rgba(226, 89, 106, 0.5); }
.battlefield.posture-showdown > .field-glow.showdown,
.battlefield.posture-combat > .field-glow.combat { opacity: 1; animation: field-pulse var(--loop-call) var(--ease-inout) infinite; animation-timing-function: var(--tick-inout-8); }
@keyframes field-pulse {
  50% { opacity: 0.65; }
}

.battlefield.dimmed { opacity: 0.7; }
.battlefield { transition: box-shadow var(--motion-2) var(--ease-standard), opacity var(--motion-4) var(--ease-standard); }

.field-banner {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-4) var(--ease-standard);
}
.field-banner.on { opacity: 1; }
.field-banner-word {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: var(--round-pill);
  font-size: var(--stage-word);
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--surface-ground);
  background: var(--showdown);
  box-shadow: 0 0 12px var(--showdown-glow);
}
.field-banner.combat .field-banner-word { color: #fff; background: var(--bad); box-shadow: 0 0 12px rgba(226, 89, 106, 0.5); }

.combat-tag { position: absolute; pointer-events: none; }

.attached-count {
  position: absolute;
  z-index: 3;
  
  scale: calc(1 / var(--fit, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-1);
}
.attached-count::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--surface-overlay);
  border: 1px solid var(--line-2);
  z-index: -1;
}

.attached-target {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  display: block;
  padding: 0 var(--step-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 2px solid var(--candidate);
  border-radius: var(--round-1);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px 1px var(--candidate-glow);
}
.attached-target.picked { background: color-mix(in srgb, var(--decide) 30%, var(--surface-overlay)); border-color: var(--ink-2); }
.attached-target:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.attached-count:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-in) / var(--fit, 1)); border-radius: 50%; }

.combat-tag-word {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(3px / var(--fit, 1));
  padding: 0 calc(5px / var(--fit, 1));
  border: calc(1px / var(--fit, 1)) solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-overlay);
  font-size: max(var(--stage-word), calc(11px / var(--fit, 1)));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-1);
}
.combat-tag-glyph { width: calc(14px / var(--fit, 1)); height: calc(13px / var(--fit, 1)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .battlefield > .field-glow { animation: none; }
}
:root[data-motion="reduce"] .battlefield > .field-glow { animation: none; }

.side > .panel.decide {
  --decide-stage: 128px;
  flex: 0 0 auto;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px var(--step-2) var(--step-2);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
  transition: box-shadow var(--motion-2) var(--ease-standard);
}

@media (pointer: fine) {
  .side > .panel.decide:has(.decide-copy[data-ask-step$="-pay"]) { --decide-stage: 160px; }
  
  .side > .panel.decide:has(.ask-about) { --decide-stage: 164px; }
  .side > .panel.decide:has(.ask-about):has(.decide-copy[data-ask-step$="-pay"]) { --decide-stage: 196px; }
}

.side > .panel.decide.over { height: auto; min-height: 196px; overflow: visible; }
.panel.decide.over .decide-stage { height: auto; }

.panel.decide.mine { box-shadow: 0 0 0 2px var(--decide), 0 0 18px var(--decide-wash); }

.panel.decide { transition: box-shadow var(--motion-3) var(--ease-standard); }
.decide-top {
  flex: 0 0 auto;
  min-height: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-1);
  min-width: 0;
}
.decide-said {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink-2);
}
.decide-said.live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-1); font-weight: 700; }
.decide-said.live::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-1);
  box-shadow: 0 0 8px var(--ink-1);
}
.decide-said.live.combat::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.decide-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 14px;
}

.decide-main {
  position: relative;
  flex: 0 0 var(--control-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 17px;
  font-weight: 800;
  transition: background var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard);
}

.decide-main:has(> .decide-key) { padding: 0 52px 0 var(--step-2); }
.decide-main:not(.wait) { background: var(--decide); color: var(--surface-ground); }
.decide-main:not(.wait):active { scale: var(--tap); transition-duration: 0s; }
.decide-main.wait { font-size: 13px; font-weight: 600; }
.decide-key {
  position: absolute;
  right: var(--step-2);
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: var(--round-1);
  font-size: var(--type-tag);
  font-weight: 600;
  opacity: 0.7;
}
.decide-ask { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.decide-ask > .panel.prompt { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

.decide-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.decide-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.decide-copy > .decide-answer { flex: 0 0 auto; margin-top: var(--step-1); }

.decide-head { flex: none; display: flex; flex-direction: column; gap: 2px; }
.decide-head > .ask-about { margin-bottom: 2px; }

.decide-stage:has(> .decide-body > .decide-copy) { height: auto; min-height: var(--decide-stage); max-height: max(var(--decide-stage), 45vh); }
.decide-copy > .decide-answer { flex-wrap: wrap; }
.decide-copy > .decide-answer > :is(.decide-confirm, .decide-secondary) { flex: 1 1 auto; min-width: 0; padding: 0 var(--step-3); white-space: nowrap; }
.decide-scroll > .ask-pay { margin-top: 0; font-size: 11px; line-height: 1.4; }
.decide-scroll > .ask-controls { margin-top: var(--step-1); }

.decide-scroll > .ask-controls:has(.amount) { margin-top: 0; }

.decide-copy .ask-row:has(> .amount) { row-gap: 2px; }
.decide-copy .amount .amount-field { height: 36px; box-sizing: border-box; }
.decide-title { font-size: 12px; font-weight: 700; color: var(--ink-1); }
.decide-help { font-size: 11px; color: var(--ink-2); }
.decide-answer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--step-2);
  margin-top: auto;
  padding-top: var(--step-1);
  background: var(--surface-1);
}
.decide-confirm, .decide-secondary {
  flex: 1 1 0;
  height: var(--touch);
  border: 0;
  border-radius: 8px;
  font-weight: 800;
}
.decide-confirm { background: var(--decide); color: var(--surface-ground); }

:is(.decide-confirm, .decide-secondary)[data-key-badge] { display: inline-flex; align-items: center; justify-content: center; gap: var(--step-2); }
:is(.decide-confirm, .decide-secondary)[data-key-badge]::after {
  content: attr(data-key-badge) / "";
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: var(--round-1);
  font-size: var(--type-tag);
  font-weight: 600;
  opacity: 0.7;
}
.decide-secondary { flex: 0 0 auto; padding: 0 var(--step-3); background: var(--surface-2); color: var(--ink-1); }

.decide-hold.on { background: var(--ink-1); color: var(--surface-ground); }

.decide-trig { display: flex; flex-wrap: wrap; gap: var(--step-2); margin-top: var(--step-1); }
.decide-trig-btn { flex: 1 1 auto; min-height: 32px; padding: 0 var(--step-2); border: 1px solid var(--line-1); border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 700; }
.decide-trig-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-2); }
:root[data-input="touch"] .decide-trig-btn { min-height: var(--touch); }
.decide-stage:has(> .decide-trig) { height: auto; min-height: var(--decide-stage); }

.decide-stage > .decide-pass { order: -2; }
.decide-stage > .decide-trig { order: -1; }


.focus-beam {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  
  box-shadow: 0 0 24px 6px currentColor;
}
.table[data-me="0"] .focus-beam[data-seat="0"],
.table[data-me="1"] .focus-beam[data-seat="1"] { color: var(--you); background: var(--you); }
.table[data-me="0"] .focus-beam[data-seat="1"],
.table[data-me="1"] .focus-beam[data-seat="0"] { color: var(--opponent); background: var(--opponent); }
.focus-beam.lit {
  animation: focus-beam-in var(--motion-2) var(--ease-standard) both;
}
@keyframes focus-beam-in {
  from { opacity: 0; }
  to { opacity: 1; }
}




.hand-count {
  position: absolute;
  right: 4px;
  top: 2px;
  font-weight: 850;
  font-size: var(--stage-word);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--table-soft);
  background: rgba(7, 16, 39, 0.92);
  border: 1px solid var(--table-edge);
  border-radius: var(--round-1);
  padding: 0 5px;
}


.cf {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
  color: var(--ink-1);
  text-align: left;
  font-size: 9px;
  line-height: 1.25;
  transition:
    rotate var(--motion-3) var(--ease-spring),
    filter var(--motion-2) var(--ease-standard),
    box-shadow var(--motion-1) var(--ease-standard);
}
.cf-hand { width: 97px; aspect-ratio: 5 / 7; }
.cf-board { width: 84px; aspect-ratio: 5 / 7; }

.cf-hand, .cf-board { container-type: inline-size; }
.cf-hand > * { font-size: clamp(9.3cqw, var(--cf-floor, 0px), 13cqw); }
.cf-hand > .cf-rules { font-size: clamp(7.7cqw, var(--cf-floor, 0px), 11cqw); }
.cf-board > * { font-size: clamp(10.7cqw, var(--cf-floor, 0px), calc(15cqw * var(--lean-grow, 1))); }

.cf:is(.cf-hand, .cf-board) :is(.cf-type, .cf-power) { font-size: max(0.8em, var(--cf-floor, 0px)); }

.cf-large {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 228px auto 112px auto auto auto;
  width: 280px;
  font-size: 15px;
}
.cf-large:not(.arted) { grid-template-rows: 132px auto 208px auto auto auto; }
.cf-large > .cf-window { grid-area: 1 / 1; }
.cf-large > .cf-bar { grid-area: 2 / 1; }
.cf-large > .cf-rules { grid-area: 3 / 1; }
.cf-large > .cf-cost,
.cf-large > .cf-power,
.cf-large > .cf-might,
.cf-large > .cf-damage { position: relative; inset: auto; }
.cf-large > .cf-cost { grid-area: 1 / 1; justify-self: start; align-self: start; margin: 8px 0 0 8px; }
.cf-large > .cf-power { grid-area: 1 / 1; justify-self: start; align-self: start; margin: 54px 0 0 10px; }
.cf-large > .cf-might { grid-area: 3 / 1; justify-self: end; align-self: end; margin: 0 10px 10px 0; }

.cf-window {
  position: relative;
  flex: 0 0 58%;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cf-hue) 58%, var(--surface-ground)),
    color-mix(in srgb, var(--cf-hue-2) 26%, var(--surface-ground))
  );
}
.cf:not(.arted) > .cf-window { flex-basis: 32%; }
.cf-field {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10% 8% 4%;
  text-align: center;
}
.cf-glyph { font-size: 1.6em; line-height: 1; color: var(--ink-1); opacity: 0.6; }

.cf-hand .cf-field { padding: 3px 4px 2px 20px; gap: 0; }
.cf-hand .cf-glyph { font-size: 1.1em; }
.cf-hand .cf-field-name { -webkit-line-clamp: 2; }

:is(.card.at-hand, .card.at-mulligan) .reminder { display: none; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-window { flex: 1 0 27cqw; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) .cf-field {
  padding: 1cqw calc(3cqw + var(--hand-cover, 0px)) 0 21cqw;
  align-items: flex-start;
  text-align: left;
}
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) .cf-glyph { display: none; }

:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-cost { top: 3px; left: 3px; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-power { top: calc(3px + 2.4em); left: 4px; line-height: 1; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) .cf-field-name { font-size: 1.1em; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-bar { padding: 0.5cqw calc(4cqw + var(--hand-cover, 0px)) 1cqw 4cqw; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-rules {
  flex: 0 0 auto;
  box-sizing: content-box;
  height: calc(7 * 1.12em);
  
  padding: 1.5cqw calc(4cqw + var(--hand-cover, 0px)) 0 4cqw;
  font-size: 11.4cqw;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}
:is(.card.at-hand, .card.at-mulligan) > .cf-hand:not(.arted) > .cf-rules::before {
  content: "";
  float: right;
  width: 2em;
  height: 100%;
  shape-outside: linear-gradient(to bottom, transparent calc(100% - 2em), #000 calc(100% - 2em));
}

.card.at-hand > .cf-hand .cf-field { padding-right: calc(4px + var(--hand-cover, 0px)); }
.card.at-hand > .cf-hand > .cf-bar { padding-right: calc(5px + var(--hand-cover, 0px)); }
.card.at-hand > .cf-hand > .cf-rules { padding-right: calc(5px + var(--hand-cover, 0px)); }

:is(.card.at-hand, .card.at-mulligan) > .cf-hand.arted > .cf-window { flex: 1 1 0; min-height: 0; }
:is(.card.at-hand, .card.at-mulligan) > .cf-hand.arted > .cf-rules {
  flex: 0 0 auto;
  box-sizing: content-box;
  height: calc(2 * 1.22em);
  padding-top: 3px;
  padding-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:is(.card.at-hand, .card.at-mulligan) > .cf-hand.arted > .cf-rules::before {
  content: "";
  float: right;
  width: 2em;
  height: 100%;
  shape-outside: linear-gradient(to bottom, transparent calc(100% - 2em), #000 calc(100% - 2em));
}

.cf-field-name {
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1.1;
  color: var(--ink-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cf-large .cf-glyph { font-size: 40px; }
.cf-large .cf-field-name { font-size: var(--type-title); }

.cf-window { container-type: size; }
.cf-art {
  --ra: 0.716073;
  --cl: 0.21;
  --ct: 0.07;
  --cr: 0.76;
  --cb: 0.49;
  --fu: calc((var(--cl) + var(--cr)) / 2);
  --fv: calc(var(--ct) + 0.4 * (var(--cb) - var(--ct)));
  --iw: max(calc(100cqw / (var(--cr) - var(--cl))), calc(100cqh * var(--ra) / (var(--cb) - var(--ct))));
  --ih: calc(var(--iw) / var(--ra));
  position: absolute;
  max-width: none;
  object-fit: cover;
  width: var(--iw);
  height: var(--ih);
  left: clamp(calc(100cqw - var(--cr) * var(--iw)), calc(50cqw - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  top: clamp(calc(100cqh - var(--cb) * var(--ih)), calc(50cqh - var(--fv) * var(--ih)), calc(-1 * var(--ct) * var(--ih)));
}

.cf.t-unit .cf-art { --cl: 0.205; --ct: 0.06; --cr: 0.72; --cb: 0.495; }
.cf.t-spell .cf-art { --cl: 0.205; --ct: 0.06; --cr: 0.765; --cb: 0.495; }
.cf.t-spell.s-signature .cf-art { --cl: 0.21; --ct: 0.07; --cr: 0.77; --cb: 0.49; }
.cf.t-gear .cf-art { --cl: 0.205; --ct: 0.056; --cr: 0.78; --cb: 0.495; }

.cf.t-gear.s-signature .cf-art { --cr: 0.715; }
.cf.t-legend .cf-art { --cl: 0.25; --ct: 0.11; --cr: 0.915; --cb: 0.63; }
.cf.t-rune .cf-art { --cl: 0.11; --ct: 0.065; --cr: 0.89; --cb: 0.62; --fv: calc((var(--ct) + var(--cb)) / 2); }

.cf.t-battlefield .cf-art {
  --cl: 0.21;
  --ct: 0.05;
  --cr: 0.64;
  --cb: 0.78;
  --fv: calc((var(--ct) + var(--cb)) / 2);
  --iw: max(calc(100cqh / (var(--cr) - var(--cl))), calc(100cqw * var(--ra) / (var(--cb) - var(--ct))));
  --bx: clamp(calc(100cqw - (1 - var(--ct)) * var(--ih)), calc(50cqw - (1 - var(--fv)) * var(--ih)), calc((var(--cb) - 1) * var(--ih)));
  --by: clamp(calc(100cqh - var(--cr) * var(--iw)), calc(50cqh - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  left: calc(var(--bx) + var(--ih) / 2 - var(--iw) / 2);
  top: calc(var(--by) + var(--iw) / 2 - var(--ih) / 2);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.cf.landscape { aspect-ratio: 1039 / 744; border: 0; outline: 1px solid var(--line-2); outline-offset: -1px; }
.dock-fan-item[data-landscape] { width: 168px; }
.dock-fan-item[data-landscape] > .cf { width: 100%; }
.dock-fan-item[data-landscape] > .dock-fan-cap { width: 100%; }
.chain-row[data-landscape] .chain-row-face, .chain-row[data-landscape] .chain-row-face > .cf { width: 72px; }

.ask-tray-card[data-landscape] { flex-basis: clamp(140px, calc((100% - (var(--n) - 1) * var(--step-3)) / var(--n)), calc(var(--dock-face) * 2.3)); }
.ask-fan-card[data-landscape] .cf-hand { width: 260px; }
.ask-subset-face[data-landscape] { width: clamp(110px, calc(var(--dock-face) * 1.4), 180px); }
.table:is([data-shape="tall"], [data-shape="short"]) .ask-subset-face[data-landscape] { width: 104px; }

.cf.upright > .cf-window { flex: 0 0 56%; }
.dock-thumb > .cf.upright > :not(.cf-window),
.chain-row-face > .cf.upright > :not(.cf-window) { display: none; }
.dock-thumb > .cf.upright > .cf-window,
.chain-row-face > .cf.upright > .cf-window { flex: 1 1 auto; }

.cf-large.arted:not([data-art-missing]) { grid-template-rows: auto auto auto; }
.cf-large.arted:not([data-art-missing]) > .cf-window { aspect-ratio: 744 / 1039; }
.cf-large.arted.t-battlefield:not([data-art-missing]) > .cf-window { aspect-ratio: 1039 / 744; }
.cf-large.arted:not([data-art-missing]) > :is(.cf-bar, .cf-rules, .cf-power, .cf-cost:not(.up):not(.down), .cf-might:not(.up):not(.down):not([data-damage])) {
  display: none;
}
.cf-large.arted:not([data-art-missing]) > .cf-keys { grid-area: 2 / 1; }
.cf-large.arted:not([data-art-missing]) > .cf-might { grid-area: 1 / 1; justify-self: end; align-self: start; margin: 10px 10px 0 0; }
.cf-large.arted:not([data-art-missing]) > .cf-damage { grid-area: 1 / 1; justify-self: end; align-self: start; margin: 10px 10px 0 0; }
.cf-large.arted:not([data-art-missing]) .cf-art { inset: 0; width: 100%; height: 100%; left: 0; top: 0; transform: none; }
.cf-large.arted.t-battlefield:not([data-art-missing]) .cf-art {
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
}


.cf :is(.cf-cost, .cf-might, .cf-damage),
.cf-might::after,
.cf-power::after {
  font-family: var(--font-numeral);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
.cf-cost {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  aspect-ratio: 1;
  padding: 0 0.2em;
  box-sizing: border-box;
  border: var(--num-rim-w) solid var(--gem-ring);
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--ink-1);
  line-height: 1;
}
.cf-power {
  position: absolute;
  z-index: 2;
  top: calc(4px + 2.1em);
  left: 5px;
  display: flex;
  gap: 0.15em;
  align-items: center;
  color: var(--cf-hue);
  font-size: 0.8em;
}

.cf-power > :is(.ur-dom-icon, .pow-hybrid, .pow-any) {
  width: 1.25em;
  height: 1.25em;
  box-sizing: border-box;
  padding: 0.12em;
  border: var(--num-rim-w) solid var(--pip-ring, var(--ink-2));
  border-radius: 50%;
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
}
.cf-power > [data-domain="body"] { --pip-ring: var(--d-body); }
.cf-power > [data-domain="calm"] { --pip-ring: var(--d-calm); }
.cf-power > [data-domain="chaos"] { --pip-ring: var(--d-chaos); }
.cf-power > [data-domain="fury"] { --pip-ring: var(--d-fury); }
.cf-power > [data-domain="mind"] { --pip-ring: var(--d-mind); }
.cf-power > [data-domain="order"] { --pip-ring: var(--d-order); }

.cf-power > .pow-any { padding: 0; background: conic-gradient(var(--d-fury), var(--d-body), var(--d-order), var(--d-calm), var(--d-mind), var(--d-chaos), var(--d-fury)); }

.cf-power::after { content: none; }


.cf-foot {
  position: absolute;
  z-index: 2;
  left: 4px;
  bottom: 3px;
  display: flex;
  gap: 0.35em;
  align-items: center;
  font-size: 0.72em;
  line-height: 1.2;
  pointer-events: none;
}
.cf-set {
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface-ground) 70%, transparent);
  padding: 0 0.25em;
  border-radius: var(--round-1);
}

.cf-cost[data-was]::after { content: attr(data-was); position: absolute; left: calc(100% + 2px); bottom: 0; font-size: 0.7em; font-weight: 700; color: var(--ink-2); text-decoration: line-through; }
.cf-banned {
  font-weight: 700;
  color: var(--surface-ground);
  background: var(--bad);
  padding: 0 0.3em;
  border-radius: var(--round-1);
}
.cf-ribbon {
  position: absolute;
  z-index: 3;
  top: 1.5em;
  right: -2.9em;
  width: 10em;
  rotate: 35deg;
  text-align: center;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--warn);
  background: var(--surface-overlay);
  border-block: 1px solid var(--line-2);
  pointer-events: none;
}
.cf-count {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.25em;
  box-sizing: border-box;
  border-radius: var(--round-pill);
  background: var(--ink-1);
  color: var(--surface-ground);
  font-weight: 700;
}
.cf.unrun > .cf-count { top: 3.2em; }

.cf.unrun > :not(.cf-ribbon):not(.cf-count) { filter: grayscale(0.85); }
.cf.dim { filter: saturate(0.35) brightness(0.72); }

.cf-effect {
  margin: 0 5px 3px;
  padding: 2px 4px;
  border-top: 1px solid var(--cf-hue);
  background: var(--surface-well);
  border-radius: 0 0 var(--round-1) var(--round-1);
}
.cf-hand > .cf-effect { font-size: 7.7cqw; }
.cf-large > .cf-effect { grid-area: 4 / 1; }
.cf-large > .cf-keys { grid-area: 5 / 1; }
.cf-large > .cf-foot { position: relative; inset: auto; grid-area: 6 / 1; margin: 0 0 6px 8px; }
.cf-large.arted:not([data-art-missing]) > .cf-effect { display: none; }

.cf-cost.up, .cf-might.down { color: var(--bad); }
.cf-cost.down, .cf-might.up { color: var(--good); }
.cf > .cf-might.up { --might-rim: var(--good); }
.cf > .cf-might.down { --might-rim: var(--bad); }

.cf-bar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 5px 2px;
  border-top: 2px solid var(--cf-hue);
  background: var(--surface-2);
  min-width: 0;
}
.cf-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-type {
  font-size: 0.8em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf:not(.arted) > .cf-bar > .cf-name { display: none; }

.cf-rules {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 3px 5px 1.6em;
  font-size: 0.86em;
  line-height: 1.22;
  color: var(--ink-1);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cf-large .cf-rules { height: auto; overflow: auto; font-size: 15px; line-height: 1.35; padding: 8px 10px 2.6em; }
.cf-large .cf-bar { padding: 6px 10px 5px; gap: 2px; }
.cf-large .cf-name { font-size: var(--type-head); }
.cf-large .cf-type { font-size: var(--type-note); }
.cf-large .cf-cost { font-size: 22px; }
.cf-large .cf-power { font-size: 17px; }

.cf-might {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  min-width: 1.42em;
  height: 1.55em;
  padding: 0 0.12em 0.14em;
  box-sizing: border-box;
  border: var(--num-rim-w) solid var(--might-rim);
  border-radius: var(--might-shape);
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  box-shadow: var(--num-lift);
  color: var(--ink-1);
  line-height: 1;
}
.cf-large .cf-might { font-size: 24px; }


.cf-exhaust {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cf-damage {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: calc(4px + 2.3em);
  display: grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.28em;
  box-sizing: border-box;
  border: var(--num-rim-w) solid var(--bad);
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--bad-ink);
  line-height: 1;
}

.cf-might > .cf-dmg {
  position: absolute;
  right: calc(100% - 0.5em);
  bottom: -0.3em;
  display: grid;
  place-items: center;
  min-width: 1.36em;
  height: 1.36em;
  padding: 0 0.26em;
  box-sizing: border-box;
  border: var(--num-rim-w) solid var(--bad);
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--bad-ink);
  font-size: 0.78em;
  line-height: 1;
}

.cf.whole > .cf-might > .cf-dmg {
  right: auto;
  left: 50%;
  bottom: auto;
  top: calc(100% - 0.4em);
  translate: -50% 0;
}

:not(.card.spine) > .cf[data-dmg-chip] > .cf-damage {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cf-keys {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  padding: var(--step-3);
  border-top: 1px solid var(--line-2);
  background: var(--surface-well);
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--ink-2);
}
.cf-key-name { color: var(--ink-1); margin-right: var(--step-1); }


.cf-board > .cf-window { flex: 1 1 100%; }
.cf-board > .cf-bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding-right: 2.4em;
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 14, 0.92) 35%);
}
.cf-board > .cf-bar > .cf-type { display: none; }
.cf-board:not(.arted) > .cf-bar { display: none; }
.cf-board .cf-field { padding-bottom: 18%; }


.cf.whole {
  background: var(--surface-well);
}
.cf:is(.whole, .token) > .cf-window {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
}
.cf:is(.whole, .token) .cf-field {
  padding: 30cqw 7cqw 24cqw;
  gap: 2cqw;
}
.cf:is(.whole, .token) .cf-glyph { font-size: calc(16cqw * var(--lean-grow, 1)); }
.cf.whole .cf-field-name { font-size: calc(11cqw * var(--lean-grow, 1)); -webkit-line-clamp: 3; }


.cf { --cf-px: calc(1px / var(--fit, 1)); --cf-floor: 0px; --cf-base: 84; }

.stage .cf { --cf-floor: calc(10.4 * var(--cf-px)); }
.cf-hand { --cf-base: 97; }
.cf { --cf-words: clamp(0, (var(--fit, 1) * var(--cf-base) - 56) * 100, 1); }


.cf.token > .cf-cost {
  top: 4cqw;
  left: 4cqw;
  width: 1.75em;
  min-width: 0;
  height: 1.75em;
  padding: 0;
  font-size: clamp(13cqw, var(--cf-floor), 26cqw);
}
.cf.token > .cf-power {
  top: calc(5cqw + 1.75 * clamp(13cqw, var(--cf-floor), 26cqw));
  left: 4cqw;
  width: calc(1.75 * clamp(13cqw, var(--cf-floor), 26cqw));
  justify-content: center;
  font-size: clamp(8cqw, var(--cf-floor), 14cqw);
  line-height: 1;
}


.cf.token > .cf-might {
  right: 3cqw;
  bottom: 3cqw;
  width: 1.42em;
  min-width: 0;
  height: 1.55em;
  font-size: clamp(13cqw, var(--cf-floor), 26cqw);
}
.cf.token > .cf-might { --cf-hue: #8c95b5; }
.cf:is(.whole, .token) > .cf-damage { font-size: clamp(10.7cqw, var(--cf-floor), 20cqw); }
.cf:is(.whole, .token) > .cf-damage { right: 3cqw; bottom: calc(5cqw + 2 * clamp(13cqw, var(--cf-floor), 26cqw)); }


.cf-name-rest {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.cf.whole .cf-art {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}
.cf.whole.t-battlefield .cf-art {
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
}

.cf.whole > .cf-bar,
.cf.token > .cf-bar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cf.whole {
  --gem-min: 0px;
  --pow-min: 0px;
  --plate: max(var(--gem-min), min(32cqw, max(12.8cqw, calc(1.5 * var(--cf-floor)))));
  --gem-half: calc(var(--plate) / 2);
  --pow: max(var(--pow-min), min(12cqw, max(5cqw, calc(0.8 * var(--cf-floor)))));
  --badge-x: max(11.7%, calc(var(--gem-half) - var(--might-over, 0px)));
  --badge-y: max(9%, calc(var(--gem-half) - var(--might-over, 0px)));
}
:root[data-input="touch"] .cf.whole { --gem-min: calc(18 * var(--cf-px)); --pow-min: calc(12 * var(--cf-px)); }

.cf.whole.t-gear {
  --plate: max(var(--gem-min), min(28cqw, max(9.05cqw, calc(1.25 * var(--cf-floor)))));
  --gem-half: calc(var(--plate) * 0.7071);
}
.cf.whole.s-signature { --plate: max(var(--gem-min), min(30cqw, max(11.6cqw, calc(1.5 * var(--cf-floor))))); }
.cf.whole > .cf-cost {
  position: absolute;
  z-index: 2;
  left: calc(var(--badge-x) - var(--plate) / 2);
  top: calc(var(--badge-y) - var(--plate) / 2);
  width: var(--plate);
  height: var(--plate);
  
  min-width: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  
  padding: 0.14em 0 0;
  background: var(--gem-fill);
  box-shadow: inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring), var(--num-lift);
  color: var(--table-text, var(--ink-1));
  
  font-size: max(8.5cqw, min(max(var(--cf-floor), calc(var(--gem-min) / 1.5)), calc(var(--plate) / 1.5)));
  line-height: 1;
  text-shadow: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.cf.whole.cf-hand > .cf-cost { padding: 0.02em 0 0; }
.cf.whole.t-gear > .cf-cost {
  border-radius: 0;
  
  padding: 0;
  
  font-size: min(max(8.5cqw, min(max(var(--cf-floor), calc(var(--gem-min) / 1.5)), calc(var(--plate) / 1.2))), calc(var(--plate) / 1.3));
  
  background: transparent;
  box-shadow: none;
}
.cf.whole.t-gear > .cf-cost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gem-fill);
  box-shadow: 0 0 0 calc(1px / var(--fit, 1)) var(--rift-light), inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring);
  transform: rotate(45deg);
}
.cf.whole.t-gear > .cf-cost::first-line { line-height: 1; }

@supports (text-box: trim-both cap alphabetic) {
  .cf.whole > .cf-cost,
  .cf.whole.cf-hand > .cf-cost,
  .cf.whole.t-gear > .cf-cost {
    display: block;
    text-align: center;
    text-box: trim-both cap alphabetic;
    padding: calc((var(--plate) - 1cap) / 2) 0 0;
  }
}


.cf.whole > .cf-power {
  --pip: max(var(--pow-min), min(12cqw, max(7.2cqw, calc(0.8 * var(--cf-floor)))));
  --pitch: max(4.68cqw, calc(0.66 * var(--pip)));
  position: absolute;
  z-index: 1;
  left: max(1cqw, calc(8.4cqw - var(--pip) / 2));
  top: max(calc(23.77cqw - var(--pip) / 2), calc(var(--badge-y) + var(--gem-half) + 0.06 * var(--pip)));
  width: var(--pip);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  font-size: var(--pip);
  line-height: 1;
}
.cf.whole > .cf-power > :is(.ur-dom-icon, .pow-hybrid, .pow-any) {
  width: var(--pip);
  height: var(--pip);
  flex: none;
  border-width: max(1px, 0.11em);
}
.cf.whole > .cf-power > * + * { margin-top: calc(var(--pitch) - var(--pip)); }
.cf.whole > .cf-cost.up { color: var(--bad); }
.cf.whole > .cf-cost.down { color: var(--good); }
.cf.whole > .cf-might {
  position: absolute;
  z-index: 2;
  
  --might-px: max(8cqw, min(var(--cf-floor), 18cqw));
  
  --w: calc(1.5 * var(--might-px));
  --h: calc(1.4 * var(--might-px));
  width: var(--w);
  height: var(--h);
  
  min-width: 0;
  left: calc(88.25% - var(--w) / 2);
  top: calc(8.6% - var(--h) / 2);
  right: auto;
  bottom: auto;
  display: grid;
  place-items: center;
  padding: 0.06em 0 0;
  font-size: var(--might-px);
  line-height: 1;
  text-shadow: none;
}

.cf:is(.whole, .token) .cf-field-name {
  
  font-size: clamp(11cqw, max(var(--cf-floor), var(--lean-floor, 0px)), var(--lean-cap, 15cqw));
  overflow-wrap: break-word;
  opacity: var(--cf-words);
}

.card > .cf:is(.cf-hand, .cf-board) :is(.cf-field-name, .cf-bar, .cf-rules) { opacity: var(--cf-words); }

.cf.whole > :is(.cf-effect, .cf-foot, .cf-ribbon, .cf-count) { display: none; }

.card.spine > .cf > :is(.cf-cost, .cf-power) { visibility: hidden; }


.cf:not(.cf-large) .cf-rules .reminder { display: none; }
.tile > .cf .cf-rules .reminder { display: inline; }
.ed-face > .cf .cf-rules .reminder { display: inline; }


.pp { --pp-w: 88px; display: flex; flex-wrap: nowrap; gap: var(--step-2); padding: 4px 4px var(--step-1); overflow-x: auto; }
@media (max-width: 599.98px) { .pp { --pp-w: 72px; gap: 8px; } }
.pp-cell { flex: none; display: grid; justify-items: center; align-content: start; gap: 4px; width: var(--pp-w); }
.pp-option {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.2;
}
.pp-art { width: 100%; aspect-ratio: 744 / 1039; object-fit: contain; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-well); }
.pp-option.on { color: var(--ink-1); }
.pp-option.on .pp-art { outline: 2px solid var(--ink-1); outline-offset: 2px; }
.pp-option:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.pp-label { max-width: 100%; text-align: center; overflow-wrap: anywhere; font-size: 11px; color: var(--ink-2); }
.pp-count { font-size: 11px; font-weight: 600; color: var(--ink-1); }
.pp-stepper { display: flex; gap: 8px; }
.pp-step {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-1);
  color: var(--ink-1);
  line-height: 1;
}

.pp-step::after { content: ""; position: absolute; inset: -6px; }
.pp-step:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }


.cf.token > .cf-window {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.10) 0, transparent 46%),
    repeating-linear-gradient(135deg, #2a2f40 0, #2a2f40 2px, #232737 2px, #232737 6px);
}

.cf-large.arted.token:not([data-art-missing]) > .cf-window { position: relative; inset: auto; }
.cf.token { border-color: #6b7391; }
.cf.token .cf-glyph {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border: max(1.5px, 1.6cqw) solid #9aa3c2;
  border-radius: 50%;
  opacity: 0.9;
}
.cf.token .cf-field::after {
  
  content: attr(data-token-word);
  margin-top: 2cqw;
  padding: 0.6cqw 3cqw;
  border-radius: var(--round-pill);
  background: rgba(8, 10, 18, 0.7);
  color: #c9cfe3;
  font-size: clamp(7.5cqw, var(--cf-floor), 15cqw);
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: var(--cf-words);
}


.cf-line {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 1.7em;
  padding: 0 6px 0 5px;
  vertical-align: middle;
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-hue) 55%, transparent);
  border-radius: var(--round-1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cf-hue) 22%, transparent), transparent 75%);
  font-size: inherit;
}
.cf-line > .cf-cost { position: static; min-width: 1.45em; height: 1.45em; font-size: 0.8em; border-width: 1px; }
.cf-line > .cf-name { font-weight: 650; }


.cf.exhausted { rotate: var(--exhaust-turn); }

.card[data-ring] > .cf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--motion-1) var(--ease-standard);
}
.card[data-ring="selected"] > .cf::after { box-shadow: inset 0 0 0 var(--ring-inset) var(--decide), inset 0 0 10px 3px var(--decide-wash); }
.card[data-ring="candidate"] > .cf::after {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--candidate) 85%, transparent),
    inset 0 0 12px 2px color-mix(in srgb, var(--candidate) 45%, transparent);
}
.card[data-ring="chosen"] > .cf::after { box-shadow: inset 0 0 0 2px var(--rift-light), inset 0 0 12px 2px var(--rift-glow); }
.card[data-ring="pickable"] > .cf::after { box-shadow: inset 0 0 0 1px var(--candidate); }

.card:not(.at-hand):is([data-ring="tappable"], [data-ring="liftable"]) > .cf::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus) 55%, transparent); }

.card[data-ring="lifted"] > .cf::after { outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.cs-glow {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 14px 3px color-mix(in srgb, var(--candidate) 70%, transparent);
}
.card[data-ring="candidate"] > .cs-glow { animation: candidate-breathe var(--loop-call) var(--ease-inout) infinite; animation-timing-function: var(--tick-inout-8); }
@keyframes candidate-breathe {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
:root[data-motion="reduce"] .card[data-ring="candidate"] > .cs-glow { animation: none; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .card[data-ring="candidate"] > .cs-glow { animation: none; opacity: 0.7; }
}

.card > .cf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: var(--wash-ink);
  opacity: 0;
  transition: opacity var(--motion-1) var(--ease-exit);
}
.card[data-veil] > .cf::before { transition-duration: var(--motion-2); transition-timing-function: var(--ease-standard); }
.card[data-veil="after"] > .cf::before { opacity: var(--wash-after); }
.card[data-veil="stunned"] > .cf::before { opacity: var(--wash-stunned); }
.card[data-veil="doomed"] > .cf::before { opacity: var(--wash-doomed); }
.card[data-veil="spent"] > .cf::before { opacity: var(--wash-spent); }
.card[data-veil="dead"] > .cf::before { opacity: var(--wash-dead); }
.table[data-asking] .stage .card:not(.candidate):not([data-pay-rune]):not([data-veil="after"]) > .cf::before { opacity: var(--wash-asked); transition-duration: var(--motion-2); }
.cs-hatch {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--hatch-line) 0 1px, transparent 1px 5px);
  opacity: 0;
}
.card[data-hatch="1"] > .cf > .cs-hatch { opacity: var(--hatch-n); animation: cs-hatch-in var(--motion-2) var(--ease-standard) both; }
.table[data-asking] .stage .card:not(.candidate):not([data-pay-rune]) > .cf > .cs-hatch { opacity: 0; animation: none; }
@keyframes cs-hatch-in { from { opacity: 0; } }
:root[data-motion="reduce"] .card > .cf::before { transition: none; }
:root[data-motion="reduce"] .card[data-hatch="1"] > .cf > .cs-hatch { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .card > .cf::before { transition: none; }
  :root:not([data-motion="full"]) .card[data-hatch="1"] > .cf > .cs-hatch { animation: none; }
}

.totem.candidate {
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--candidate) 85%, transparent),
    0 0 12px 2px color-mix(in srgb, var(--candidate) 60%, transparent);
  animation: totem-breathe var(--loop-call) var(--ease-inout) infinite;
  animation-timing-function: var(--tick-inout-8);
}
@keyframes totem-breathe {
  0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--candidate) 85%, transparent), 0 0 7px 1px color-mix(in srgb, var(--candidate) 35%, transparent); }
  50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--candidate) 85%, transparent), 0 0 16px 4px color-mix(in srgb, var(--candidate) 80%, transparent); }
}
.totem.candidate:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .totem.candidate { animation: none; }
}
:root[data-motion="reduce"] .totem.candidate { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .cf { transition: none; }
}
:root[data-motion="reduce"] .cf { transition: none; }



.cards { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.card {
  
  position: relative;
  border: 1px solid var(--table-edge);
  
  border-left: 3px solid var(--ink-3);
  border-radius: var(--round-1);
  padding: 4px;
  overflow: hidden;
  background: linear-gradient(165deg, #1b2c52, #101c3c);
  box-shadow: 0 2px 6px rgba(1, 7, 18, 0.5);
  
  transition:
    transform var(--motion-2) var(--ease-standard),
    opacity var(--motion-2) var(--ease-standard),
    rotate var(--motion-3) var(--ease-spring);
}


.card { isolation: isolate; }
.card > .cf {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.card > .cf.exhausted { rotate: none; }
.card.at-hand { width: 97px; height: 127px; }
.card.at-board { width: 84px; height: 118px; }
.card.at-slot { width: 100%; height: 100%; }
.card.at-pile { width: 96px; height: 129px; }


.card.at-loose {
  position: relative;
  width: 112px;
  height: 157px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card.at-loose > .card-acts { margin: 0; padding: var(--step-1); }



:root { --exhaust-turn: 12deg; --exhaust-pay-turn: 14deg; }
:root[data-exhaust="full"] { --exhaust-turn: 90deg; --exhaust-pay-turn: 90deg; }

.card.exhausted:not(.at-loose) { rotate: var(--exhaust-turn); }

.card :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks) { transition: rotate var(--motion-3) var(--ease-spring); }
.card.exhausted:not(.at-loose) :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks) { rotate: calc(-1 * var(--exhaust-turn)); }
.card.pay-exhaust:not(.exhausted) :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks) { rotate: calc(-1 * var(--exhaust-pay-turn)); }
:root[data-exhaust="full"] .card.exhausted:not(.at-loose) > .mark-rail { gap: calc(var(--seal) * 1.1); }

:root[data-exhaust="full"] .card.exhausted:not(.at-loose):is(.at-board, .at-slot, .at-field) > .mark-rail { bottom: 6px; }
:root[data-exhaust="full"] .card.exhausted:not(.at-loose) > .card-line.marks { display: none; }

.card.leaving { opacity: 0; transform: scale(0.7); }


.card:is(.attacker, .defender, .revealing)::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: card-echo var(--motion-4) var(--ease-standard) both;
}
.card:is(.attacker, .defender)::after { border: 2px solid var(--good); }
.card.revealing::after { border: 2px solid var(--focus); }
@keyframes card-echo {
  from { opacity: calc(var(--echo-light) * var(--echo-peak)); transform: scale(1); }
  to { opacity: 0; transform: scale(var(--echo-grow)); }
}

.table[data-me="0"] .card.seat-1, .table[data-me="1"] .card.seat-0 { --echo-peak: 0.7; }




.card.hidden {
  background: var(--card-back);
  box-shadow: 0 2px 6px rgba(1, 7, 18, 0.5), inset 0 0 0 1px oklch(65.5% 0.038 276.4 / 0.3);
}

.card.hiding-in { animation: chain-push-in var(--motion-2) var(--ease-standard); }


.card-name { font-weight: 600; font-size: var(--type-body); margin-bottom: var(--step-1); }
.card-line { display: flex; flex-wrap: wrap; gap: var(--step-1); margin-bottom: var(--step-1); }
.card-acts { display: flex; flex-wrap: wrap; gap: var(--step-1); margin-top: var(--step-2); }

.card:not(.at-loose) > .card-name {
  font-size: 9px;
  line-height: 1.15;
  margin-bottom: 2px;
  max-height: 3.45em;
  overflow: hidden;
}
.card:not(.at-loose) > .card-line { gap: 2px; margin-bottom: 2px; }
.card:not(.at-loose) .chip { font-size: var(--stage-word); padding: 0 calc(var(--step-1) - 1px); border-radius: var(--round-1); }

.card:not(.at-loose) > .card-line.marks > .chip { background: var(--surface-ground); border-color: var(--line-2); }
.card:not(.at-loose) > .card-acts { display: none; }


.card:not(.at-loose) > .card-line.marks,
.card.at-loose > .card-line.marks {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  margin: 0;
  gap: 2px;
  padding: 8px 3px 3px;
  background: linear-gradient(180deg, rgba(4, 10, 26, 0), rgba(4, 10, 26, 0.92) 45%);
}

.card:is(.at-board, .at-slot) > .card-line.marks { bottom: 26px; padding-top: 0; background: none; }


.card { --seal: 16px; }
.card:is(.at-hand, .at-pile, .at-mulligan, .at-loose) { --seal: 18px; }
.mark-rail {
  position: absolute;
  z-index: 3;
  left: 3px;
  bottom: 6px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}
.mark-rail:empty { display: none; }
.card:is(.at-board, .at-slot, .at-field) > .mark-rail { bottom: 26px; }

.card[data-railed] > .card-line.marks:not([hidden]) { left: calc(var(--seal) * 1.1 + 6px); }
.mark-seal {
  display: block;
  flex: none;
  height: var(--seal);
  width: calc(var(--seal) * 24 / 22);
  overflow: visible;
  pointer-events: auto;
  cursor: default;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.mark-slot {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(2px / var(--fit, 1));
  height: var(--seal);
  pointer-events: none;
  transform-origin: calc(var(--seal) * 12 / 22) 50%;
}
.mark-slot > .mark-seal { pointer-events: auto; }
.mark-seal:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); border-radius: 3px; }
.seal-hex {
  fill: color-mix(in srgb, var(--surface-ground) 92%, transparent);
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-linejoin: round;
}
.seal-ring {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.seal-glyph {
  fill: none;
  stroke: var(--ink-1);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seal-glyph .solid { fill: var(--ink-1); stroke: none; }
.seal-count {
  position: relative;
  display: inline-flex;
  font: 800 calc(11px / var(--fit, 1)) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  paint-order: stroke fill;
  -webkit-text-stroke: calc(2px / var(--fit, 1)) var(--surface-ground);
}
.seal-slot { position: relative; display: inline-block; overflow: hidden; line-height: 1.1; }
.seal-roll { display: block; }
.seal-count::after { content: attr(data-n); position: absolute; inset: 0; line-height: 1.1; opacity: 0; pointer-events: none; }
.seal-tick { fill: var(--ink-1); stroke: var(--surface-ground); stroke-width: 1; }

@keyframes seal-out {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.85); display: none; }
}

.mark-slot.arrived { animation: seal-arrive var(--motion-4) var(--ease-spring) both; }
.seal-rift-ring {
  fill: none;
  stroke: var(--rift-light);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mark-seal.arrived .seal-rift-ring { animation: seal-arrive-ring var(--motion-4) var(--ease-standard) both; }

.mark-seal.kind-doomed .seal-hex { stroke: var(--bad); }

.cs-light {
  position: absolute;
  inset: 0 -100%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--focus) 42%, transparent) 50%, transparent 62%);
}
.card[data-stun-arrived] > .cf > .cs-light { animation: stun-light var(--motion-5) var(--ease-standard) 1 both; }
@keyframes stun-light {
  from { opacity: var(--echo-peak); transform: translateX(-33%); }
  to { opacity: 0; transform: translateX(33%); }
}

.cf-slot { position: relative; display: inline-grid; place-items: center; overflow: hidden; line-height: 1.15; }
.cf-roll { display: block; }
.cf-slot::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-1); opacity: 0; pointer-events: none; }
.card:is(.might-rose, .might-fell) .cf-roll { animation: count-roll var(--motion-4) var(--ease-spring) both; }
.card:is(.might-rose, .might-fell) .cf-slot::after { animation: count-lit var(--motion-3) var(--ease-standard) both; }

.card:is(.damage-rose, .damage-fell) .cf-dmg .cf-roll { animation: count-roll var(--motion-4) var(--ease-spring) both; }
.card:is(.damage-rose, .damage-fell) .cf-dmg .cf-slot::after { color: var(--bad-ink); animation: count-lit var(--motion-3) var(--ease-standard) both; }

.card.damage-fell .cf-dmg .cf-slot::after { color: var(--good); }

.cf-dmg.clearing { animation: chip-exit var(--motion-1) var(--ease-exit) var(--motion-4) both; }
.cf-dmg.clearing .cf-slot::after { color: var(--good); }
@keyframes chip-exit { from { opacity: 1; } to { opacity: 0; } }
:root[data-motion="reduce"] .cf-dmg.clearing { animation: none; display: none; }

.card:is(.might-rose, .might-fell):not(.damage-rose):not(.damage-fell) .cf-dmg .cf-roll,
.card:is(.might-rose, .might-fell):not(.damage-rose):not(.damage-fell) .cf-dmg .cf-slot::after { animation: none; }

.card:is(.might-rose, .might-fell) .edge-might { animation: count-dip var(--motion-1) var(--ease-standard) both; }
@keyframes count-roll {
  from { opacity: 0.4; transform: translateY(60%); }
  to { opacity: 1; transform: none; }
}
@keyframes count-lit { from { opacity: 1; } to { opacity: 0; } }
@keyframes count-dip { from { opacity: 0.4; } to { opacity: 1; } }
.mark-slot.arrived .seal-roll, .seal-count.tick .seal-roll { animation: count-roll var(--motion-4) var(--ease-spring) both; }
.mark-slot.arrived .seal-count::after, .seal-count.tick::after { animation: count-lit var(--motion-3) var(--ease-standard) both; }
.mark-slot.leaving { pointer-events: none; animation: seal-out var(--motion-1) var(--ease-exit) both; }
:root[data-motion="reduce"] .mark-slot.arrived,
:root[data-motion="reduce"] .seal-count.tick .seal-roll,
:root[data-motion="reduce"] .seal-count.tick::after,
:root[data-motion="reduce"] .mark-slot.arrived .seal-roll,
:root[data-motion="reduce"] .mark-slot.arrived .seal-count::after { animation: none; }
:root[data-motion="reduce"] .mark-slot.leaving { animation: none; display: none; }
:root[data-motion="reduce"] .mark-seal.arrived .seal-rift-ring,
:root[data-motion="reduce"] .card[data-stun-arrived] > .cf > .cs-light,
:root[data-motion="reduce"] .card:is(.might-rose, .might-fell, .damage-rose, .damage-fell) :is(.cf-roll, .edge-might),
:root[data-motion="reduce"] .card:is(.might-rose, .might-fell, .damage-rose, .damage-fell) .cf-slot::after,
:root[data-motion="reduce"] .card:is(.attacker, .defender, .revealing)::after { animation: none; }

:root[data-motion="reduce"] .card:is(.damage-rose, .damage-fell) .cf-dmg { animation: count-dip var(--motion-1) var(--ease-standard) both; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .mark-slot.arrived,
  :root:not([data-motion="full"]) .mark-seal.arrived .seal-rift-ring,
  :root:not([data-motion="full"]) .card[data-stun-arrived] > .cf > .cs-light,
  :root:not([data-motion="full"]) .card:is(.might-rose, .might-fell, .damage-rose, .damage-fell) :is(.cf-roll, .edge-might),
  :root:not([data-motion="full"]) .card:is(.might-rose, .might-fell, .damage-rose, .damage-fell) .cf-slot::after,
  :root:not([data-motion="full"]) .card:is(.attacker, .defender, .revealing)::after,
  :root:not([data-motion="full"]) .seal-count.tick .seal-roll,
  :root:not([data-motion="full"]) .seal-count.tick::after,
  :root:not([data-motion="full"]) .mark-slot.arrived .seal-roll,
  :root:not([data-motion="full"]) .mark-slot.arrived .seal-count::after { animation: none; }
  :root:not([data-motion="full"]) .card:is(.damage-rose, .damage-fell) .cf-dmg { animation: count-dip var(--motion-1) var(--ease-standard) both; }
  :root:not([data-motion="full"]) .cf-dmg.clearing { animation: none; display: none; }
  :root:not([data-motion="full"]) .mark-slot.leaving { animation: none; display: none; }
}

.card.spine:not(:hover):not(:focus-within) > .mark-rail { --seal: 12px; left: 1px; }
.card.spine .seal-count { display: none; }
.card > .card-acts { position: relative; z-index: 3; }



.card-edge { display: none; }
.card.spine > .card-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  
  width: var(--slice, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  
  padding: 16px 1px 3px;
  overflow: hidden;
}

.edge-cost {
  display: grid;
  place-items: center;
  
  width: 1.85em;
  height: 1.85em;
  box-sizing: border-box;
  border: 1.5px solid #9aa3c2;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #2a3042 0, #0b0d14 72%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  font-size: var(--stage-word);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  flex: 0 0 auto;
}

.pow-s16 { width: 16px; height: 16px; }
.pow-s20 { width: 20px; height: 20px; }
.pow-s24 { width: 24px; height: 24px; }
.pow-s28 { width: 28px; height: 28px; }
.pow-hybrid { position: relative; display: inline-block; }
.pow-hybrid > .ur-dom-icon { position: absolute; inset: 0; width: 100%; height: 100%; }
.pow-hybrid > .ur-dom-icon:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); }
.pow-hybrid > .ur-dom-icon:last-child { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pow-any {
  display: inline-block;
  border-radius: 50%;
  background: conic-gradient(var(--d-fury), var(--d-body), var(--d-order), var(--d-calm), var(--d-mind), var(--d-chaos), var(--d-fury));
}



.card.spine > .card-edge { z-index: 2; background: none; }
.card.spine > .cf > :is(.cf-bar, .cf-might, .cf-rules) { visibility: hidden; }


.card.spine:hover > .card-edge,
.card.spine:focus-within > .card-edge { display: none; }


.card.spine:not(:hover):not(:focus-within) > .card-line.marks {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  width: var(--slice, 100%);
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 10px 2px 3px;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(4, 10, 26, 0.94), rgba(4, 10, 26, 0) 100%);
  
  z-index: 2;
}
.card.spine:not(:hover):not(:focus-within) > .card-line.marks > .chip {
  flex: 0 0 auto;
  width: 9px;
  height: 4px;
  padding: 0;
  border-radius: 2px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  background: currentColor;
  border-color: transparent;
}

.card.spine:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }



.card-acts {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 3px;
  pointer-events: none;
}
.card:not(.at-loose) > .card-acts { display: flex; }
.act.round {
  
  pointer-events: auto;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  background: rgba(8, 18, 43, 0.92);
  border: 1px solid var(--table-edge);
  color: var(--table-accent);
  scale: 1;
  
  transition: opacity var(--motion-1) var(--ease-inout),
    scale var(--motion-1) var(--ease-standard);
}

.card:hover > .card-acts > .act.round,
.card:focus-within > .card-acts > .act.round,
.act.round:focus-visible { opacity: 1; }
@media (hover: hover) { .act.round:hover { background: rgba(23, 47, 96, 0.96); } }

.act.round:active { background: rgba(30, 60, 120, 0.98); scale: var(--tap); transition-duration: 0s; }
.act-glyph { pointer-events: none; }


.card > .ab-badges {
  position: absolute;
  z-index: 3;
  top: 34%;
  right: calc(3px / var(--fit, 1));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(3px / var(--fit, 1));
  pointer-events: none;
}
.card > .ab-badges[hidden] { display: none; }

.card:is(.spine, .covered):not(:hover):not(:focus-within) > .ab-badges { display: none; }
.ab-badges > .ab-badge {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(2px / var(--fit, 1));
  min-height: calc(21px / var(--fit, 1));
  padding: calc(2px / var(--fit, 1)) calc(3px / var(--fit, 1));
  box-sizing: border-box;
  border: calc(1.5px / var(--fit, 1)) solid var(--line-2);
  border-radius: var(--round-pill);
  background: color-mix(in srgb, var(--surface-ground) 88%, transparent);
  box-shadow: 0 0 0 calc(1px / var(--fit, 1)) rgba(9, 11, 20, 0.92), 0 calc(2px / var(--fit, 1)) calc(6px / var(--fit, 1)) rgba(1, 7, 18, 0.65);
  font-size: calc(12px / var(--fit, 1));
  line-height: 1;
  color: var(--ink-1);
  transition: scale var(--motion-1) var(--ease-standard), box-shadow var(--motion-1) var(--ease-inout);
}
.ab-badges > .ab-badge.lit {
  border-color: var(--decide);
  box-shadow: 0 0 0 calc(1px / var(--fit, 1)) rgba(9, 11, 20, 0.92), 0 0 calc(10px / var(--fit, 1)) color-mix(in srgb, var(--decide) 55%, transparent);
  cursor: pointer;
}
@media (hover: hover) { .ab-badges > button.ab-badge.lit:hover { box-shadow: 0 0 0 calc(1px / var(--fit, 1)) rgba(9, 11, 20, 0.92), 0 0 calc(14px / var(--fit, 1)) color-mix(in srgb, var(--decide) 75%, transparent); } }
.ab-badges > button.ab-badge.lit:active { scale: var(--tap); transition-duration: 0s; }
.ab-badges > button.ab-badge:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.ab-badges > .ab-badge.dim > .cm { opacity: 0.55; filter: saturate(0.35); }
.ab-badges > .ab-badge.dim { background: color-mix(in srgb, var(--surface-ground) 72%, transparent); }

.cm-badge > .cm-n { font: 700 0.85em / 1 var(--font-ui); color: var(--ink-1); }

.ab-badge > .ab-mark {
  display: block;
  width: 0.9em;
  height: 1em;
  background: var(--decide);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ab-badge.dim > .ab-mark { background: var(--ink-2); }

.ab-badges > span.ab-badge[aria-hidden="true"] { pointer-events: none; }
:root:not([data-input="touch"]) .ab-badges > span.ab-badge.dim { pointer-events: auto; }
:root[data-motion="reduce"] .ab-badges > .ab-badge { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ab-badges > .ab-badge { transition: none; }
}


.card.liftable { cursor: grab; }
.card[data-ring="lifted"] { opacity: 0.45; box-shadow: none; }


.card.tappable { cursor: pointer; }


.drop.lit { background: rgba(116, 239, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(116, 239, 255, 0.45); }
.drop.lit.aimed { box-shadow: inset 0 0 0 1px rgba(116, 239, 255, 0.22); background: rgba(116, 239, 255, 0.03); }
.drop.cold { opacity: 0.5; }


.card.at-hand:not(.hidden) {
  overflow: visible;
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.card.at-hand:not(.hidden)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px -1px -1px -3px;
  border: 1px solid var(--table-edge);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--round-1);
  background: linear-gradient(165deg, #1b2c52, #101c3c);
  box-shadow: 0 2px 6px rgba(1, 7, 18, 0.5);
}
.card.at-hand:not(.hidden) > .cf { border-radius: 1px 3px 3px 1px; }

.card.at-hand.liftable:not(.hidden),
.card.at-hand.tappable:not(.hidden) { box-shadow: none; }
.card.at-hand.liftable:not(.hidden)::before,
.card.at-hand.tappable:not(.hidden)::before {
  box-shadow: 0 0 0 1px rgba(154, 176, 255, 0.55), 0 0 7px 1px rgba(154, 176, 255, 0.28), 0 2px 6px rgba(1, 7, 18, 0.5);
}

.card.at-hand.lifted:not(.hidden)::before { box-shadow: none; }
.card.at-hand::before,
.card.at-hand > * { transition: translate var(--motion-2) var(--ease-inout); }
.card.at-hand > .cf {
  transition:
    rotate var(--motion-3) var(--ease-spring),
    filter var(--motion-2) var(--ease-standard),
    box-shadow var(--motion-1) var(--ease-inout),
    translate var(--motion-2) var(--ease-inout);
}
.half.near .card.at-hand:not(.hidden):hover::before,
.half.near .card.at-hand:not(.hidden):hover > * { translate: 0 -6px; }
.half.far .card.at-hand:not(.hidden):hover::before,
.half.far .card.at-hand:not(.hidden):hover > * { translate: 0 6px; }



.top {
  padding: var(--step-3) var(--step-4);
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
}

.top h1 {
  font-size: var(--type-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}
.top-row { display: flex; gap: var(--step-3); align-items: center; flex-wrap: wrap; }

.watch-bar { display: flex; align-items: center; gap: var(--step-2); padding: var(--step-1) var(--step-3); font-size: 0.875rem; }
.watch-bar .act { margin-left: auto; }
.watching-count, .room-watching { font-size: 0.8125rem; opacity: 0.8; }
.panel.decide.watching { display: flex; flex-direction: column; gap: var(--step-2); }
.top .lede { margin: var(--step-2) 0 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2);
}



.side {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  min-height: 0;
  min-width: 0;
  padding: var(--step-2);
  background: var(--surface-ground);
  overflow-y: auto;
  overscroll-behavior: contain;
}



.side-right { border-left: 1px solid var(--line-1); }

.side > .top {
  flex: 0 0 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--step-2);
  border: 1px solid var(--line-1);
  border-radius: var(--round-2);
}

.side > .top { padding: 2px var(--step-2); }

.side > .top .top-row { gap: var(--step-1); flex-wrap: wrap; min-height: var(--touch); }
.side > .top .turn-number { flex: none; font-size: var(--type-read); }
.side > .top .game-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side > .top .act { flex: none; }

.side,
.side > .top,
.side > .chain,
.side > .panel {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.side > .panel { min-height: 0; }



:is(.side, .side-region) > .panel.log { flex: 1 1 0; min-height: calc(var(--touch) + 4 * 22px); }

@container (max-width: 860px) {
  :is(.side, .side-region) > .panel.log { flex: 0 0 auto; height: calc(var(--touch) + 6 * 22px); }
  
  .table[data-shape="wide"] .side-right > .panel.decide { order: 1; }
  .table[data-shape="wide"] .side-right > :not(.top, .chain.dock, .panel.decide) { order: 2; }
}

.side > .panel.prompt {
  flex: 0 1 auto;
  min-height: 176px;
  max-height: 55%;
  overflow: auto;
  overscroll-behavior: contain;
}
.side > .panel.prompt.idle { min-height: 0; }



.side > .notice, .side > .compose { flex: 0 0 auto; }
.side > .panel.elsewhere { flex: 0 0 auto; max-height: 30%; overflow: auto; }
.turn-number { font-size: var(--type-head); font-weight: 700; letter-spacing: -0.01em; }
.top-row.quiet { opacity: 0.72; margin-top: var(--step-1); }
.top-row.quiet .mono { font-size: var(--type-tag); }
.table .top .card-line { margin-top: var(--step-2); margin-bottom: 0; }
.game-id { font-family: var(--mono); font-weight: 600; font-size: var(--type-note); }

.reconnecting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn, var(--ink-3));
  font-size: var(--type-note);
  white-space: nowrap;
}
.reconnecting::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.chip {
  font-size: var(--type-note);
  padding: 1px var(--step-2);
  border-radius: var(--round-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-1);
}
.chip.good { background: rgba(87, 192, 138, 0.14); color: var(--good); border-color: rgba(87, 192, 138, 0.3); }
.chip.warn { background: var(--surface-2); color: var(--warn); border-color: var(--line-2); }
.chip.cost { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-2); }

.chip.might { background: rgba(226, 89, 106, 0.13); color: #e390bb; border-color: rgba(226, 89, 106, 0.28); }
.chip.type, .chip.tag { background: var(--surface-2); }

.chip.xp {
  color: var(--you-ink);
  background: var(--you-wash);
  border-color: color-mix(in oklch, var(--you-ink) 32%, transparent);
  font-weight: 700;
  animation: xp-pulse var(--motion-2) var(--ease-standard);
}
.chip.xp[data-side="them"] {
  color: var(--opponent-ink);
  background: var(--opponent-wash);
  border-color: color-mix(in oklch, var(--opponent-ink) 32%, transparent);
}

@keyframes xp-pulse {
  from { color: var(--ink-1); }
}


button { font: inherit; cursor: pointer; }


.busy { color: var(--ink-3); cursor: progress; pointer-events: none; }
.act, .cand, .select {
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  padding: var(--step-1) var(--step-2);
  font-size: var(--type-body);
  scale: 1;
  transition: background var(--motion-1) var(--ease-inout),
    scale var(--motion-1) var(--ease-standard);
}
@media (hover: hover) { .act:hover, .cand:hover, .select:hover { background: var(--line-2); } }
.act:active, .cand:active, .select:active {
  background: var(--line-2);
  scale: var(--tap);
  transition-duration: 0s;
}


.cand.on, .act.on, .select.on {
  background: var(--line-2);
  color: var(--ink-1);
  border-color: var(--ink-1);
  box-shadow: inset 0 -2px 0 var(--ink-1);
}

.act.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
@media (hover: hover) { .act.danger:hover { background: color-mix(in oklab, var(--bad) 88%, white); } }
.act.danger:active { background: color-mix(in oklab, var(--bad) 82%, black); scale: var(--tap); }
.submit {
  background: var(--ink-1);
  color: var(--surface-ground);
  border: none;
  border-radius: var(--round-1);
  padding: var(--step-2) var(--step-4);
  font-weight: 600;
  font-size: var(--type-read);
  scale: 1;
  transition: background var(--motion-1) var(--ease-inout),
    scale var(--motion-1) var(--ease-standard);
}
.submit:active { background: var(--ink-2); scale: var(--tap); transition-duration: 0s; }

.panel.prompt .submit { background: var(--decide); }
.panel.prompt .submit:active { background: var(--decide-ink); }

.submit.danger { background: var(--bad); color: #fff; }
.submit.danger:active { background: color-mix(in oklab, var(--bad) 82%, black); }


.side > .chain.dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: visible;
}
.side > .chain.dock.empty { display: none; }

.side > .chain.dock > * { flex-shrink: 0; }

.dock-head { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); height: 28px; min-width: 0; }
.dock-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
button.dock-title {
  position: relative;
  z-index: 1;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (hover: hover) { button.dock-title:hover { color: var(--ink-1); } }

button.dock-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, var(--touch));
  height: var(--touch);
  transform: translateX(-50%);
}

.dock-next { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-1); }

.dock-marker {
  flex: none;
  padding: 0 var(--step-2);
  border-radius: var(--round-pill);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  animation: chain-fade-in var(--motion-1) var(--ease-standard);
}
.dock-marker[hidden] { display: none; }
.dock-row-top > .dock-marker, .dock-lead-name > .dock-marker { margin-left: auto; line-height: 16px; }

.dock-act { flex: none; padding: 0 var(--step-2); border-radius: var(--round-pill); box-shadow: inset 0 0 0 2px var(--opponent); color: var(--ink-1); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.dock-act[hidden] { display: none; }

.dock-upnext { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--step-2) var(--step-1); }
.dock-upnext[hidden] { display: none; }
.dock-upnext-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); font-size: 12px; font-weight: 700; line-height: 16px; }
.dock-upnext-then { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12px; line-height: 14px; }
.dock-upnext-then[hidden] { display: none; }
.dock-pill[data-prio="you"] { box-shadow: inset 0 0 0 1px var(--you); }
.dock-pill[data-prio="them"] { box-shadow: inset 0 0 0 1px var(--opponent); }

.dock .away { visibility: hidden; }

.dock-lead {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--step-2);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--step-2) 0 0;
  border: 0;
  border-radius: 9px;
  background: var(--surface-1);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--motion-2) var(--ease-standard), transform var(--motion-2) var(--ease-standard);
}
@media (hover: hover) { .dock-lead:hover { background: var(--surface-2); } }

.dock-thumb { flex: none; display: grid; place-items: center; width: 40px; height: 56px; overflow: hidden; border-radius: 6px 0 0 6px; }
.dock-thumb > .cf { width: 100%; }
.dock-lead-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 0; }

.dock-lead-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.dock-lead-words[hidden] { display: none; }

.dock-n, .dock-fan-order { flex: none; min-width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); color: var(--ink-1); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.dock-n[hidden] { display: none; }

.dock-root { flex: none; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--round-pill); font-size: 11px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.dock-root[hidden] { display: none; }
.dock-lead-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.dock-lead-name > .cf-line { min-width: 0; flex: 1 1 auto; }

.dock-lead-meta { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; overflow: hidden; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.dock-lead-who { flex: none; color: var(--ink-1); }
.dock-lead-targets { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dock-lead-targets[hidden] { display: none; }

.dock-lead.is-me { box-shadow: inset 0 0 0 2px var(--you); }
.dock-lead.is-them { box-shadow: inset 0 0 0 2px var(--opponent); }
.dock-lead.pending { box-shadow: none; outline: 2px dashed var(--you); outline-offset: -2px; }
.dock-lead.pending.is-them { outline-color: var(--opponent); }

.dock-strips { display: flex; flex-direction: column; gap: 3px; }
.dock-strip {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 44px;
  padding: 0 var(--step-2);
  border: 0;
  border-radius: 6px;
  background: var(--surface-1);
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--motion-2) var(--ease-standard), transform var(--motion-2) var(--ease-standard);
}
@media (hover: hover) { .dock-strip:hover { background: var(--surface-2); } }

.dock-row-top, .dock-row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dock-row-top > .cf-line { min-width: 0; flex: 1 1 auto; }
.dock-row-who { flex: none; color: var(--ink-1); }
.dock-row-sub { height: 16px; overflow: hidden; color: var(--ink-2); }
.dock-row-words { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-row-words[hidden] { display: none; }
.dock-strip.is-them .dock-row-who { color: var(--ink-1); }

.dock-lead.leaving, .dock-strip.leaving { opacity: 0; transform: scale(0.9); transition-timing-function: var(--ease-exit); }

.dock-lead { animation: chain-place var(--motion-3) var(--ease-spring); }
.dock-strip { animation: chain-fade-in var(--motion-2) var(--ease-standard); }
@keyframes chain-place {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes chain-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes chain-push-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.dock-lead, .dock-strip, .dock-pill-line) { animation: chain-fade-in var(--motion-still) linear; }
}
:root[data-motion="reduce"] :is(.dock-lead, .dock-strip, .dock-pill-line) { animation: chain-fade-in var(--motion-still) linear; }

.dock-count-slot { display: inline-block; overflow: hidden; vertical-align: top; max-width: 100%; }
.dock-count { display: inline-block; }

.dock-above { display: flex; flex-direction: column; gap: 3px; }
.dock-above[hidden] { display: none; }
.dock-lead.asked::after, .dock-strip.asked::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--decide);
  border-radius: inherit;
  pointer-events: none;
}
.dock-fan-item.asked::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--decide);
  border-radius: 13px;
  pointer-events: none;
}
.dock-strip { position: relative; }
.dock-lead.asked, .dock-above > .dock-strip { animation: dock-refocus var(--motion-2) var(--ease-standard); }
@keyframes dock-refocus {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dock-order { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.dock-order-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--step-2);
  border-radius: 6px;
  background: var(--surface-1);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  animation: dock-refocus var(--motion-2) var(--ease-standard);
}
.dock-order-item > .cf-line { min-width: 0; flex: 1 1 auto; }
.dock-order-item.is-me { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--you) 60%, transparent); }
.dock-order-item.is-them { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--opponent) 60%, transparent); }
.dock-order-item.pending { box-shadow: none; outline: 1px dashed var(--you); outline-offset: -1px; }
.dock-order-item.pending.is-them { outline-color: var(--opponent); }
.dock-order-n {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--decide);
  color: var(--surface-ground);
  font-size: 11px;
  font-weight: 800;
}
.dock-order-n[hidden] { display: none; }

.decide-scroll > .ask-about-host { display: contents; }
.decide-scroll > .ask-about-host > .ask-about { order: -1; }
.decide-scroll > .ask-about-host > .ask-controls { margin-top: var(--step-1); }
.decide-scroll > .ask-about-host > .ask-controls:has(.amount) { margin-top: 0; }
.ask-about {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--decide);
  background: color-mix(in oklch, var(--decide) 10%, transparent);
}
.ask-about-face { flex: none; width: 22px; height: 30px; overflow: hidden; border-radius: 3px; }
.ask-about-face > .cf { width: 100%; height: 100%; font-size: 4px; }
.ask-about-name { min-width: 0; font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--ink-1); overflow-wrap: anywhere; }

.dock-earlier {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 20px;
  padding: 0 6px;
  border: 1px dashed var(--line-2);
  border-radius: 5px;
  background: none;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-earlier[hidden] { display: none; }
@media (hover: hover) { .dock-earlier:hover { color: var(--ink-1); background: var(--surface-1); } }
:root[data-input="touch"] .dock-earlier { height: var(--touch); }

.dock-fan {
  position: fixed;
  inset: 0;
  z-index: 61; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.dock-fan-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--step-3);
  max-width: 80vw;
  padding: var(--step-4);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  box-shadow: var(--win-shadow);
}
.dock-fan-item { position: relative; border-radius: 9px; }
.dock-fan-item > .cf { width: 120px; }

.dock-fan-item > .cf-hand > :is(.cf-window, .cf-field) { flex: 1 1 0; min-height: 0; }
.dock-fan-item > .cf-hand > .cf-rules {
  flex: 0 0 auto;
  box-sizing: content-box;
  
  line-height: 1.3;
  height: calc(3 * 1.3em);
  padding: 3px 5px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.dock-fan-item > .cf-hand:not(.arted) > .cf-rules {
  height: calc(6 * 1.3em);
  -webkit-line-clamp: 6;
}
.dock-fan-item > .cf-hand > .cf-rules::before {
  content: "";
  float: right;
  width: 2.2em;
  height: 100%;
  shape-outside: linear-gradient(to bottom, transparent calc(100% - 2.2em), #000 calc(100% - 2.2em));
}

.cf.upright > .cf-foot { position: static; padding: 1px 5px 3px; }
.dock-fan-item > .cf-hand.upright > .cf-rules { height: calc(4 * 1.3em); -webkit-line-clamp: 4; }
.dock-fan-item.is-me { box-shadow: 0 0 0 3px var(--you); }
.dock-fan-item.is-them { box-shadow: 0 0 0 3px var(--opponent); }
.dock-fan-item.pending { box-shadow: none; outline: 3px dashed var(--you); }
.dock-fan-item.pending.is-them { outline-color: var(--opponent); }
.dock-fan-order {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: -10px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

.dock-fan-cap { display: grid; gap: 2px; width: 120px; margin-top: var(--step-1); font-size: 12px; color: var(--ink-2); }
.dock-fan-who { color: var(--ink-1); font-weight: 700; }
.dock-fan-words, .dock-fan-targets { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dock-fan-words[hidden], .dock-fan-targets[hidden] { display: none; }



.panel.prompt {
  border-color: var(--decide);
  background: linear-gradient(var(--decide-wash), var(--decide-wash)), var(--surface-1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}
.panel.prompt > h3 { color: var(--decide-ink); }
.panel.prompt.idle {
  border-color: var(--line-1);
  background: var(--surface-1);
  box-shadow: none;
}
.panel.prompt.idle > h3 { color: var(--ink-3); }




.setup-banner {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  margin: var(--step-2) 0;
  font-size: var(--type-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-align: center;
}
.setup-banner::before, .setup-banner::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-2);
}


.dice-row.ro-stage {
  --ro-size: clamp(110px, min(24cqw, 34cqh), 340px);
  display: grid;
  grid-template-columns: var(--ro-size) minmax(150px, 1fr) var(--ro-size);
  grid-template-areas: "you mid opp";
  align-items: center;
  justify-content: center;
  gap: var(--step-4);
  width: 100%;
  padding: 0 var(--step-3);
}
.ro-stage > .die-slot.you { grid-area: you; }
.ro-stage > .die-slot.opp { grid-area: opp; }
.ro-stage > .ro-tear { grid-area: mid; justify-self: center; align-self: stretch; height: 100%; min-height: 160px; }
.ro-stage > .ro-head { grid-area: mid; justify-self: center; align-self: center; }

.die-slot { display: flex; flex-direction: column; align-items: center; gap: var(--step-2); width: var(--ro-size); }
.die-seat-label {
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9cqw + 6px, 18px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.die-slot.you .die-seat-label { color: var(--you-ink); }
.die-slot.opp .die-seat-label { color: var(--opponent-ink); }
.die-shape { position: relative; width: 100%; }


.ro-emblem { display: block; width: 100%; height: auto; overflow: visible; }
.ro-bevel.b1 { fill: #44464e; }
.ro-bevel.b2 { fill: #202228; }
.ro-bevel.b3 { fill: #15161b; }
.ro-bevel.b4 { fill: #1d1f25; }
.ro-bevel.b5 { fill: #282b33; }
.ro-bevel.b6 { fill: #77797e; }
.ro-well { fill: var(--surface-well); }
.ro-ring { fill: none; stroke: var(--you); stroke-width: 4; stroke-linejoin: round; opacity: 0.55; transition: opacity var(--motion-2) var(--ease-standard); }
.ro-emblem.opp .ro-ring { stroke: var(--opponent); }
.ro-ring-2 { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.09); }


.ro-emblem.win .ro-ring { opacity: 1; stroke-width: 7; }
.ro-emblem.win .ro-ring-2 { opacity: 0.55; stroke-width: 3; animation: ro-ring-in var(--motion-3) var(--ease-emphasis) var(--motion-3) both; }

.ro-emblem.lose, .ro-emblem.tie { opacity: 0.6; }
.ro-emblem.lose .ro-ring, .ro-emblem.tie .ro-ring { opacity: 0.4; }
@keyframes ro-ring-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 0.55; transform: scale(1.09); } }


.die-body { fill: none; }
.die-facet { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.22; }
.die-edge { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linejoin: round; opacity: 0.45; }
.die-light { fill: none; stroke: var(--ink-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.die.settled .die-body { fill: #15161b; }
.die.settled .die-facet { stroke: var(--surface-ground); stroke-width: 1.6; opacity: 0.75; }
.die.settled .die-facet.f0 { fill: #3b3e4a; }
.die.settled .die-facet.f1 { fill: #4a4d58; }
.die.settled .die-facet.f2 { fill: #34373f; }
.die.settled .die-facet.f3 { fill: #2c2f38; }
.die.settled .die-facet.f4 { fill: #202329; }
.die.settled .die-facet.f5 { fill: #262932; }
.die.settled .die-facet.f6 { fill: #181a20; }
.die.settled .die-facet.f7 { fill: #1c1e25; }
.die.settled .die-facet.f8 { fill: #121317; }
.die.settled .die-facet.f9 { fill: #23252d; }

.die.settled .die-edge { stroke: var(--ink-2); opacity: 0.4; }
.die.settled .die-light { opacity: 0.9; }
.die.winner .die-edge { opacity: 0.8; }
.die.winner .die-light { stroke-width: 4; opacity: 1; }
.die.loser .die-light, .die.tied .die-light { opacity: 0.35; }
.die.loser .die-edge, .die.tied .die-edge { opacity: 0.2; }
.die-value {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  fill: var(--ink-1);
  paint-order: stroke;
  stroke: rgba(9, 11, 20, 0.7);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.die-value.two { font-size: 38px; }
.die.loser .die-value, .die.tied .die-value { fill: var(--ink-3); }


.die.settled { transform-box: fill-box; transform-origin: center; animation: die-place var(--motion-3) var(--ease-spring) both; }
.die.settled .die-value { animation: die-count var(--motion-4) var(--ease-spring) var(--motion-3) both; }
@keyframes die-place { from { transform: scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes die-count { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


.ro-word {
  position: relative;
  min-height: 1.5em;
  min-width: 100%;
  text-align: center;
  font-size: var(--type-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.die-slot.you .ro-word { color: var(--you-ink); }
.die-slot.opp .ro-word { color: var(--opponent-ink); }
.die-slot.lose .ro-word, .die-slot.tie .ro-word { color: var(--ink-3); }
.die-slot.rest .ro-word { color: var(--ink-3); }
.ro-word-rolling { position: absolute; inset: 0; animation: ro-word-out 1ms linear var(--motion-3) forwards; }
.ro-word-rolling + .ro-word-state { animation: ro-word-in 1ms linear var(--motion-3) both; }
@keyframes ro-word-out { to { opacity: 0; visibility: hidden; } }
@keyframes ro-word-in { from { opacity: 0; } to { opacity: 1; } }


.ro-tear { display: block; width: 56px; overflow: visible; }
.ro-tear-line { fill: none; stroke: var(--ink-1); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.ro-tear-glow { fill: none; stroke: var(--ink-1); stroke-width: 9px; vector-effect: non-scaling-stroke; opacity: 0.16; }
.ro-stage:not([data-roll-state="empty"]) .ro-tear-glow { animation: rift-flare var(--motion-3) var(--ease-emphasis) both; }
@keyframes rift-flare { 0% { opacity: 0.22; } 45% { opacity: 1; } 100% { opacity: 0.4; } }
.ro-stage:not([data-roll-state="empty"]) .ro-tear-glow { opacity: 0.4; }
.ro-head {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: var(--step-3) var(--step-2);
  text-align: center;
  background: rgba(9, 11, 20, 0.88);
  border-radius: var(--round-2);
}
.ro-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.2cqw + 6px, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-wrap: balance;
  color: var(--ink-1);
}
.ro-sub { margin: var(--step-1) 0 0; font-size: var(--type-label); color: var(--ink-3); text-wrap: balance; }
.ro-sub:empty { display: none; }


.ro-actions { display: flex; flex-direction: column; align-items: center; width: min(100%, 560px); padding: var(--step-2); }
.roll-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 420px);
  min-height: var(--control-lg);
  padding: 0 var(--step-7);
  border: 0;
  border-radius: 8px;
  background: var(--decide);
  color: var(--surface-ground);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(9, 11, 20, 0.6);
  transition: background var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard);
}
@media (hover: hover) { .roll-btn:hover { background: var(--decide-ink); } }
.roll-btn:active { scale: var(--tap-row); transition-duration: 0s; }
.roll-btn:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.roll-btn .decide-key { right: var(--step-3); letter-spacing: 0.04em; }
.ro-wait {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  width: 100%;
  min-height: var(--control-lg);
  font-size: var(--type-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--ink-2);
}
.ro-wait::before, .ro-wait::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2); }


.first-player-zones { display: flex; flex-direction: column; gap: var(--step-2); width: 100%; }
.first-player-zones > .zones-row { display: flex; gap: var(--step-3); }
.first-player-zone {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-lg);
  padding: var(--step-3) var(--step-4);
  font-size: var(--type-read);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-1);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard);
}
@media (hover: hover) { .first-player-zone:hover { background: var(--line-2); } }
.first-player-zone:active { scale: var(--tap-row); transition-duration: 0s; }
.first-player-zone:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }

.first-player-zone.opponent { background: linear-gradient(var(--opponent-wash), var(--opponent-wash)), var(--surface-2); }
.first-player-zone.mine { background: linear-gradient(var(--you-wash), var(--you-wash)), var(--surface-2); }
@media (hover: hover) { .first-player-zone.opponent:hover { background: linear-gradient(var(--opponent-wash), var(--opponent-wash)), var(--line-2); } }
@media (hover: hover) { .first-player-zone.mine:hover { background: linear-gradient(var(--you-wash), var(--you-wash)), var(--line-2); } }




.mulligan-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-2); padding: var(--step-2) 0; }
.card.at-mulligan { width: 90px; height: 118px; }
.mulligan-card {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  
}



.pregame-overlay {
  position: fixed;
  inset: 0 clamp(184px, 19%, 260px) 0 0;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--step-6) var(--step-4);
  
  background: var(--veil);
}

[data-plate="standing"] .pregame-overlay { opacity: 0; }
[data-plate="leaving"] .pregame-overlay { animation: intro-ground var(--motion-2) var(--ease-standard) both; }
[data-plate="leaving"] .pregame-panel { animation: intro-panel var(--motion-3) var(--ease-spring) var(--motion-1) both; }
@keyframes intro-ground { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"])[data-plate="leaving"] .pregame-overlay, :root:not([data-motion="full"])[data-plate="leaving"] .pregame-panel { animation: none; }
}
:root[data-motion="reduce"][data-plate="leaving"] .pregame-overlay, :root[data-motion="reduce"][data-plate="leaving"] .pregame-panel { animation: none; }

@container (max-width: 860px) {
  .pregame-overlay { right: 0; }
}
.pregame-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--step-4);
  width: min(1180px, 100%);
  max-height: calc(100vh - var(--step-6) * 2);
  overflow-y: auto;
}

.intro-chip { align-self: center; padding: var(--step-1) var(--step-4); border-radius: var(--round-pill); border: 1px solid var(--line-2); background: var(--surface-1); color: var(--ink-1); font-size: var(--type-label); letter-spacing: 0.04em; animation: intro-chip-in var(--motion-3) var(--ease-spring) both; }
.intro-chip.you { border-color: var(--you); }
.intro-chip.them { border-color: var(--opponent); }
@keyframes intro-chip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .intro-chip { animation: none; }
}
:root[data-motion="reduce"] .intro-chip { animation: none; }

.ro-plate-card { display: grid; place-items: center; width: 100%; aspect-ratio: 1.07; box-sizing: border-box; border-radius: var(--round-2); border: 2px solid var(--line-2); background: var(--surface-1); }
.ro-plate-card.you { border-color: var(--you); }
.ro-plate-card.opp { border-color: var(--opponent); }
.ro-plate-score { font-family: var(--font-display); font-size: 64px; font-weight: 800; color: var(--ink-1); }
.pregame-overlay .setup-banner { font-size: var(--type-body); width: 100%; }
.pregame-overlay .q-label { font-size: var(--type-head); text-align: center; }




.pregame-overlay .mulligan-hand { gap: var(--step-4); padding: var(--step-3) 0; }
.pregame-overlay .card.at-mulligan {
  width: clamp(120px, 15vw, 230px);
  height: clamp(157px, 19.7vw, 301px);
}


.panel.decide.over { transition: border-color var(--motion-1) var(--ease-standard); }
.panel.decide.over.won { border-color: var(--good); }
.panel.decide.over.lost { border-color: var(--bad); }
.panel.decide.over.drawn { border-color: var(--ink-3); }
.decide-over {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--step-1);
  min-height: 0;
  animation: chain-place var(--motion-3) var(--ease-spring) both;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .decide-over { animation: chain-fade-in var(--motion-still) linear both; }
}
:root[data-motion="reduce"] .decide-over { animation: chain-fade-in var(--motion-still) linear both; }

.decide-result { flex: 0 1 auto; min-height: 0; overflow-y: auto; font-size: 16px; font-weight: 800; color: var(--ink-1); }
.decide-over > .decide-finals { flex: none; }
.decide-over.won .decide-result { color: var(--good); }
.decide-over.lost .decide-result { color: var(--bad); }
.decide-finals { display: flex; flex-direction: column; gap: 2px; }
.decide-final {
  display: flex;
  justify-content: space-between;
  gap: var(--step-2);
  padding: 1px var(--step-2);
  border-radius: var(--round-1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 18px;
}
.decide-final.won { box-shadow: inset 0 0 0 1px var(--good); color: var(--ink-1); }
.decide-final-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decide-final-points { flex: none; font-variant-numeric: tabular-nums; }
.decide-leave {
  flex: 1 1 0;
  height: var(--touch);
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-1);
  font-weight: 800;
}
.decide-over > .decide-answer { position: static; flex: none; margin-top: auto; }
.decide-over > .decide-answer > button { flex: 1 1 0; min-width: 0; padding: 0 var(--step-2); white-space: nowrap; }
.q-label { font-size: var(--type-read); color: var(--ink-1); margin-bottom: var(--step-2); }
.panel.prompt.idle .empty { font-size: var(--type-read); }
.candidates { display: flex; flex-wrap: wrap; gap: var(--step-1); }

.target-lines { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.arrow.locked .arrow-core,
.arrow.locked .arrow-glow,
.arrow.locked .arrow-head-mark { transition: opacity var(--motion-1) var(--ease-standard); }
.arrow.locked.quiet .arrow-core,
.arrow.locked.quiet .arrow-head-mark { opacity: 0.45; }
.arrow.locked.quiet .arrow-glow { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .arrow.locked .arrow-core,
  :root:not([data-motion="full"]) .arrow.locked .arrow-glow,
  :root:not([data-motion="full"]) .arrow.locked .arrow-head-mark { transition: none; }
}
:root[data-motion="reduce"] .arrow.locked .arrow-core,
:root[data-motion="reduce"] .arrow.locked .arrow-glow,
:root[data-motion="reduce"] .arrow.locked .arrow-head-mark { transition: none; }
.arrow { --c: var(--you); }
.arrow.opponent { --c: var(--opponent); }
.arrow.off { --c: var(--ink-3); }
.arrow-glow,
.arrow-core,
.arrow-flow { fill: none; stroke-linecap: round; }

.arrow-glow { stroke: var(--c); stroke-width: 12; opacity: 0.22; }
.arrow-core { stroke: var(--c); stroke-width: 4; }

.arrow.aim.off .arrow-core { stroke-dasharray: 10 8; }
.arrow-flow {
  stroke: var(--ink-1);
  stroke-opacity: 0.8;
  stroke-width: 2.5;
  stroke-dasharray: 2 22;
  animation: arrow-flow var(--loop-wait) linear infinite;
}

.arrow.locked .arrow-flow { display: none; }
.arrow.off .arrow-flow { display: none; }
@keyframes arrow-flow { to { stroke-dashoffset: -24; } }
.arrow-head-mark { fill: var(--c); }

.arrow-reticle { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .arrow-flow { display: none; }
}
:root[data-motion="reduce"] .arrow-flow { display: none; }
.cost { display: flex; gap: var(--step-2); align-items: center; margin-bottom: var(--step-2); flex-wrap: wrap; }
.q-note { flex-basis: 100%; font-size: var(--type-note); line-height: 1.5; color: var(--ink-2); }

.amount { display: flex; gap: var(--step-1); align-items: center; }
.amount .act { min-width: 28px; text-align: center; }
.amount-field { width: 72px; text-align: center; font-family: var(--mono); }
.amount-of { font-size: var(--type-note); color: var(--ink-3); }

.ask-help { font-size: var(--type-note); line-height: 1.5; color: var(--ink-2); min-height: 1.5em; }
.ask-controls { display: flex; flex-direction: column; gap: var(--step-1); margin-top: var(--step-2); }
.ask-controls.candidates { flex-direction: row; flex-wrap: wrap; }
.ask-name-options { display: flex; flex-wrap: wrap; gap: var(--step-1); }
.ask-name-options .act { flex: 1 1 5rem; min-height: 44px; }
.ask-row { display: flex; align-items: center; gap: var(--step-2); flex-wrap: wrap; }
.ask-row-label { font-size: var(--type-note); color: var(--ink-2); }
.submit.off { background: var(--surface-2); color: var(--ink-3); cursor: default; }
.panel.prompt .submit.off { background: var(--surface-2); }

.ask-switch {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  min-height: var(--touch);
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: transparent;
  color: var(--ink-1);
  font-size: var(--type-body);
  text-align: left;
  cursor: pointer;
}
.ask-switch-track {
  position: relative;
  flex: 0 0 30px;
  height: 16px;
  border-radius: var(--round-pill);
  background: var(--surface-2);
  transition: background var(--motion-1) var(--ease-inout);
}
.ask-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform var(--motion-1) var(--ease-standard), background var(--motion-1) var(--ease-inout);
}
.ask-switch.on .ask-switch-track { background: var(--decide); }
.ask-switch.on .ask-switch-track::after { transform: translateX(14px); background: var(--ink-1); }

.ask-stepper, .decide-copy .amount { min-height: 36px; }
.ask-stepper .act, .decide-copy .amount .act {
  position: relative;
  min-width: var(--touch);
  height: var(--touch);
  margin-bottom: -8px;
  border-width: 0 0 8px;
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ask-stepper .ask-stepper-value { line-height: 1; }
.ask-stepper-value { min-width: 2.5em; text-align: center; font-family: var(--mono); font-size: var(--type-head); color: var(--ink-1); }

.ask-mark {
  position: absolute;
  inset: 0;
  
  scale: calc(1 / var(--fit, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-1);
  pointer-events: none;
  z-index: 4;
}
.ask-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--step-1);
  border-radius: var(--round-pill);
  background: var(--decide);
  color: var(--surface-ground);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: ask-badge-in var(--motion-2) var(--ease-emphasis) both;
}
@keyframes ask-badge-in {
  from { transform: scale(1.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ask-badge.ask-seal {
  --seal: 32px;
  position: relative;
  animation: seal-arrive var(--motion-4) var(--ease-spring) both;
}
.ask-badge.ask-seal::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--rift-light);
  opacity: 0;
  pointer-events: none;
  animation: seal-arrive-ring var(--motion-4) var(--ease-standard) both;
}
.ask-badge.ask-seal.leaving { animation: seal-out var(--motion-1) var(--ease-exit) both; }
.ask-badge.ask-seal.leaving::after { animation: none; }
@keyframes seal-arrive {
  from { opacity: 0; transform: scale(var(--place-from)); }
  to { opacity: 1; transform: none; }
}
@keyframes seal-arrive-ring {
  from { opacity: calc(var(--echo-light) * var(--echo-peak)); transform: scale(1); }
  to { opacity: 0; transform: scale(var(--echo-grow)); }
}
:root[data-motion="reduce"] .ask-badge.ask-seal,
:root[data-motion="reduce"] .ask-badge.ask-seal::after { animation: none; }
:root[data-motion="reduce"] .ask-badge.ask-seal.leaving { display: none; }


.combat-tag-word { z-index: 5; }
.dmg-tag {
  position: absolute;
  left: calc(50% + var(--dmg-shift, 0px));
  bottom: 6px;
  translate: -50% calc(var(--dmg-lane, 0) * -26px / var(--fit, 1));
  scale: calc(1 / var(--fit, 1));
  padding: 2px 8px;
  border-radius: var(--round-pill);
  background: var(--surface-overlay);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
}
.dmg-tag.dmg-tag-now { background: var(--decide); border-color: var(--decide); color: var(--surface-ground); }
.dmg-tag.dmg-tag-after { color: var(--ink-2); }

.dmg-tag.dmg-tag-over { bottom: 100%; transform-origin: 50% 100%; translate: -50% calc(((var(--dmg-lane, 2) - 2) * -26px - 3px) / var(--fit, 1)); }

.half-tally.past-tags { transform: translate(-50%, 10px); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ask-badge.ask-seal,
  :root:not([data-motion="full"]) .ask-badge.ask-seal::after { animation: none; }
  :root:not([data-motion="full"]) .ask-badge.ask-seal.leaving { display: none; }
}

.card[data-division] { overflow: visible; z-index: 5; }
.ask-step {
  flex: 0 0 auto;
  pointer-events: auto;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--round-pill);
  border: 2px solid var(--decide);
  background: var(--surface-well);
  color: var(--decide-ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.compose { margin-top: var(--step-3); }

.notice {
  color: var(--bad);
  font-size: var(--type-body);
  line-height: 1.5;
  margin-top: var(--step-2);
  padding: var(--step-2);
  border-left: 3px solid var(--bad);
  background: rgba(226, 89, 106, 0.1);
  border-radius: 0 var(--round-1) var(--round-1) 0;
  white-space: pre-wrap;
}

.notice.calm {
  color: var(--ink-2);
  border-left-color: var(--line-2);
  background: var(--surface-2);
}

.notice.warn {
  color: var(--warn);
  border-left-color: var(--line-2);
  background: var(--surface-2);
}

 .lobby .notice.quiet { display: none; }

.table .notice { animation: panel-reveal var(--motion-1) var(--ease-standard) both; }


:is(.side, .side-region) > .panel.log {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.log-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--step-2);
  min-height: var(--touch);
  padding: 0 var(--step-2);
  border-bottom: 1px solid var(--line-1);
}
.log-top > h3 { margin: 0 auto 0 0; }

.log-top > h3.log-title { position: relative; flex: none; display: inline-flex; align-items: center; }
.log-title-icon { display: none; color: var(--ink-2); }
.log-title.tighter > .log-title-icon { display: inline-flex; }

.log-title.tighter > .log-title-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1367px) {
  .log-title.tight > .log-title-icon { display: inline-flex; }
  .log-title.tight > .log-title-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.log-levels { display: flex; flex: 0 1 auto; min-width: 0; border: 1px solid var(--line-2); border-radius: var(--round-pill); }
.log-level {
  position: relative;
  isolation: isolate;
  flex: 0 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--round-pill);
  background: none;
  color: var(--ink-2);
  font-size: var(--type-tag);
  line-height: 22px;
}
.log-level.on { background: var(--line-2); color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--ink-1); }

.log-level-word { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-level::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: max(100%, var(--touch));
  height: var(--touch);
  transform: translate(-50%, -50%);
}

.log-lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}
.log-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--step-2) 0 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-1);
}
@media (hover: hover) { .log-line:hover { background: var(--surface-2); } }
.log-bar { flex: none; align-self: stretch; width: 3px; }
.log-row.is-me > .log-bar { background: var(--you); }
.log-row.is-them > .log-bar { background: var(--opponent); }
.log-glyph { flex: none; width: 16px; text-align: center; font-size: 11px; color: var(--ink-3); }

.log-text { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.log-frag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.log-text > .log-card { flex: 0 6 auto; display: flex; min-width: 4.5em; overflow: hidden; }
.log-card > .cf-line { min-width: 0; }
.log-cite { flex: none; margin-left: auto; padding-left: 6px; font-size: 10px; color: var(--ink-3); }
.log-line.child { padding-left: 14px; color: var(--ink-2); }
.log-line.child > .log-bar { display: none; }

.log-card { font-weight: 700; color: var(--log-card); cursor: help; }
.log-card > .cf-line { font-size: 0.95em; max-width: 100%; color: inherit; }
.log-card > .cf-line > .cf-name { color: var(--log-card); }
.log-head-row {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-left: var(--step-2);
  background-color: var(--surface-ground);
  
  box-shadow: 0 5px 5px -2px var(--surface-ground);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.log-roll {
  width: 100%;
  height: var(--touch);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  text-align: left;
}
@media (hover: hover) { .log-roll:hover { background: var(--surface-2); color: var(--ink-2); } }
.log-chev { flex: none; margin-left: auto; font-size: 10px; }

.log-roll > .log-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  line-height: 1.35;
}

.log-row.fresh { animation: log-arrive var(--motion-3) var(--ease-emphasis) both; }
@keyframes log-arrive {
  from { opacity: 0; transform: translateX(14px); background: var(--you-wash); }
  to { opacity: 1; transform: none; background: transparent; }
}

.stage [data-obj][data-log-lit] {
  box-shadow: 0 0 0 3px var(--ink-1), 0 0 22px rgba(255, 255, 255, 0.7);
  translate: 0 -4px;
  z-index: 5;
}

.log-jump {
  position: absolute;
  isolation: isolate;
  z-index: 3;
  left: 50%;
  bottom: var(--step-2);
  transform: translateX(-50%);
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--round-pill);
  background: var(--you);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.log-jump::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: max(100%, var(--touch));
  height: var(--touch);
  transform: translate(-50%, -50%);
}
.log-jump[hidden] { display: none; }

.panel.elsewhere { border-color: var(--line-2); }
.panel.elsewhere > h3 { color: var(--warn); }



.table > .exchange { flex: 0 0 auto; margin: 0 var(--step-4) var(--step-4); }
.table .exchange .field { max-width: none; }
.table textarea.export { width: 100%; resize: vertical; }
.table .act.strong {
  background: var(--ink-1);
  color: var(--surface-ground);
  border-color: var(--ink-1);
  font-weight: 600;
}

.exchange-count { font-size: var(--type-note); color: var(--ink-3); }


.table > .look {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: var(--z-modal);
  width: min(440px, calc(100vw - var(--step-4) * 2));
  max-height: min(85vh, calc(100vh - var(--step-4) * 2));
  overflow-y: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
  box-shadow: var(--win-shadow);
  padding: var(--step-3);
}

.look-scrim { position: fixed; inset: 0; z-index: var(--z-modal-scrim); }

.table .ui-sheet.info-menu { z-index: var(--z-sheet); }
.table .ui-sheet-side.info-menu { width: var(--info-sheet-w); }


.table > .look.card-look { z-index: var(--z-modal); width: fit-content; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: var(--step-3); }

@media (min-width: 601px) {
  .card-look > [data-card-look-close] { display: none; }
}
.card-look > .cf-large, .card-look > .cf-duo > .cf-large { width: min(360px, calc(62vh * 744 / 1039)); font-size: 19px; }


.field { display: flex; flex-direction: column; gap: var(--step-1); margin-bottom: var(--step-3); max-width: 520px; }
.field span { font-size: var(--type-note); color: var(--ink-3); }

.field.reveal { animation: panel-reveal var(--motion-2) var(--ease-standard) both; }

.field-hint { line-height: 1.5; color: var(--ink-3); max-width: 60ch; }
input, textarea {
  background: var(--surface-well);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  padding: var(--step-2);
  font: inherit;
}
textarea { font-family: var(--mono); font-size: var(--type-note); }
.lobby {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  --type-title: 26px;
  
  background:
    radial-gradient(120% 70% at 50% -12%, color-mix(in srgb, var(--focus) 14%, transparent) 0%, transparent 55%),
    var(--surface-ground);
}

.lobby-body {
  display: flex;
  flex-direction: column;
  gap: var(--step-3);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--step-5) var(--step-4) var(--step-6);
}


.room-panel .field { max-width: none; }

.lobby h3 {
  font-size: var(--type-tag);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  margin: 0 0 var(--step-2);
}
.lobby .top h1 { font-weight: 700; letter-spacing: -0.02em; }

.lobby section.panel {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--round-2);
  padding: var(--step-4);
}
.lobby .field textarea { max-width: none; }
.lobby .panel > .lede { margin: 0 0 var(--step-3); font-size: var(--type-body); }
.lobby .submit { margin-top: var(--step-1); }


section.panel.refusal { border-color: var(--bad); }
section.panel.refusal > h3 { color: var(--bad); }

.trouble-remedy {
  font-size: var(--type-read);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0 0 var(--step-3);
}
.trouble > .act { margin-top: var(--step-3); }

.refusal-block { display: contents; }

.report {
  color: var(--warn);
  font-size: var(--type-note);
  line-height: 1.65;
  max-width: 92ch;
  background: var(--surface-well);
  border-radius: var(--round-1);
  padding: var(--step-3);
  margin: 0;
}


.search {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: var(--step-2);
  position: relative;
  padding-left: var(--step-3);
  background: var(--surface-well);
  border: 1px solid var(--line-1);
  border-radius: var(--round-2);
}
.search:focus-within { border-color: var(--focus); }

.search input {
  flex: 1;
  min-width: 0;
  padding: var(--step-2) var(--step-5) var(--step-2) 0;
  background: transparent;
  border: none;
  font-size: var(--type-read);
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-3); }

.pick {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--round-pill);
  padding: 2px var(--step-3);
  font-size: var(--type-note);
  scale: 1;
  transition: color var(--motion-1) var(--ease-inout),
    border-color var(--motion-1) var(--ease-inout),
    scale var(--motion-1) var(--ease-standard);
}
@media (hover: hover) { .pick:hover { color: var(--ink-1); border-color: var(--line-2); } }
.pick:active { color: var(--ink-1); border-color: var(--line-2); scale: var(--tap); transition-duration: 0s; }
.pick.on {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--surface-ground);
  font-weight: 650;
}


.glyph { display: inline-block; line-height: 1.1; white-space: nowrap; font-style: normal; }
.glyph.energy {
  box-sizing: border-box;
  min-width: 1.3em;
  height: 1.3em;
  padding: 0 0.25em;
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--surface-ground);
  font-family: var(--mono);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
  vertical-align: 0.05em;
}
.glyph.word { font-weight: 650; color: var(--ink-1); }
.glyph-icon { width: 1.1em; height: 1.1em; margin: 0 0.05em; vertical-align: -0.2em; object-fit: contain; }

:root[data-theme="light"] .glyph-mono { filter: invert(1); }

:is(.cf-rules, .cf-effect, .cf-key-text) .reminder, .cf-key-text { font-style: italic; color: var(--ink-2); }


.kw {
  --kw-s: 0.42em;
  display: inline-block;
  padding: 0 0.6em;
  background: var(--kw-bg);
  color: var(--kw-ink);
  clip-path: polygon(var(--kw-s) 0, 100% 0, calc(100% - var(--kw-s)) 100%, 0 100%);
  font-size: 0.9em;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.05em;
}
.kw-text { display: inline-block; transform: skewX(-15deg); }
.kw.kw-tip { clip-path: polygon(var(--kw-s) 0, calc(100% - var(--kw-s)) 0, 100% 50%, calc(100% - var(--kw-s)) 100%, 0 100%); }
.kw.kw-notch { clip-path: polygon(0 0, 100% 0, calc(100% - var(--kw-s)) 100%, 0 100%, var(--kw-s) 50%); }
.kw.kw-tip.kw-notch { clip-path: polygon(0 0, calc(100% - var(--kw-s)) 0, 100% 50%, calc(100% - var(--kw-s)) 100%, 0 100%, var(--kw-s) 50%); }
.kw + .kw { margin-left: -0.3em; }
.kw-teal { --kw-bg: #007460; --kw-ink: #efefef; }
.kw-pink { --kw-bg: #cb2f68; --kw-ink: #efefef; }
.kw-lime { --kw-bg: #94b42b; --kw-ink: #080000; }
.kw-grey { --kw-bg: #6c6d6c; --kw-ink: #efefef; }

.kw.kw-tag { font-size: var(--type-note); }




.stack { border-top: 1px solid var(--line-1); }


.entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--step-2);
  padding: 3px var(--step-2);
  border-radius: var(--round-1);
  transition: background var(--motion-1) var(--ease-inout);
}
@media (hover: hover) { .entry:hover { background: var(--surface-2); } }
.entry:focus-within { background: var(--surface-2); }



.verdict {
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  overflow: hidden;
}
.verdict.open { border-color: var(--ink-2); }

.issue-note { font-size: var(--type-note); color: var(--ink-2); padding-top: var(--step-2); }
.faults { list-style: none; margin: 0; padding: 0; }
.fault {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--step-3);
  padding: var(--step-2) 0;
  border-top: 1px solid var(--line-1);
}
.fault-rule {
  font-family: var(--mono);
  font-size: var(--type-note);
  color: var(--ink-3);
}

.fault-seat { display: block; }

.unruns { display: flex; flex-direction: column; }
.unrun-row { border-top: 1px solid var(--line-1); padding: var(--step-2) 0; }
.unrun-head {
  display: flex;
  align-items: baseline;
  gap: var(--step-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.unrun-name { font-size: var(--type-body); font-weight: 650; color: var(--ink-1); transition: color var(--motion-1) var(--ease-inout); }
.unrun-id { font-family: var(--mono); font-size: var(--type-tag); color: var(--ink-3); }
.unrun-more {
  margin-left: auto;
  font-size: var(--type-tag);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (hover: hover) { .unrun-head:hover .unrun-name { text-decoration: underline; } }
.unrun-head:active .unrun-name { text-decoration: underline; transition-duration: 0s; }
.unrun-why {
  margin: var(--step-1) 0 0;
  font-size: var(--type-note);
  line-height: 1.5;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.unrun-why.open {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  color: var(--ink-2);
}
.fault-body { display: flex; flex-direction: column; gap: var(--step-1); min-width: 0; }
.fault-text { font-size: var(--type-body); color: var(--ink-1); }

.fault-cards { display: flex; flex-wrap: wrap; gap: var(--step-1); }
.chip.named {
  display: inline-flex;
  align-items: baseline;
  gap: var(--step-2);
  background: var(--surface-well);
  border: 1px solid var(--line-1);
}
.named-name { font-size: var(--type-note); color: var(--ink-1); }

.refusal-what {
  margin: var(--step-3) 0 0;
  font-size: var(--type-tag);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.refusal-r65 { font-size: var(--type-body); color: var(--ink-2); }

.refusal-raw { margin-top: var(--step-3); border-top: 1px solid var(--line-1); padding-top: var(--step-2); }
.refusal-raw > summary {
  cursor: pointer;
  font-size: var(--type-note);
  color: var(--ink-3);
}
.refusal-raw[open] > summary { color: var(--ink-2); margin-bottom: var(--step-2); }

.play { display: flex; flex-direction: column; gap: var(--step-2); }
.play .field.inline { margin-bottom: 0; }

.bar { height: 8px; background: var(--ink-2); border-radius: 2px; min-width: 2px; }

.exchange-row { align-items: center; gap: var(--step-3); row-gap: var(--step-2); }
.exchange-count { font-family: var(--mono); font-size: var(--type-note); color: var(--ink-3); }

.field.inline { flex-direction: row; align-items: center; gap: var(--step-2); margin-bottom: var(--step-2); }
.field.inline input { width: 72px; }

.lobby .field.inline input { width: 20ch; max-width: 100%; }




.cardmenu {
  position: fixed;
  z-index: var(--z-anchored);
  background: var(--surface-overlay);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  box-shadow: var(--win-shadow);
  padding: var(--step-1);
  display: flex;
  flex-direction: column;
}
.cardmenu-head {
  
  width: 100%;
  font-size: var(--type-note);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding: var(--step-1) var(--step-2);
  border-bottom: 1px solid var(--line-1);
  margin-bottom: var(--step-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardmenu-item {
  
  width: 100%;
  height: 30px;
  text-align: left;
  padding: 0 var(--step-2);
  border: 0;
  border-radius: var(--round-1);
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  font-size: var(--type-body);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--motion-1) var(--ease-inout);
}

.cardmenu-item.cardmenu-look { height: 44px; }
.cardmenu-item.on {
  background: var(--surface-2);
  color: var(--ink-1);
}
@media (hover: hover) { .cardmenu-item:hover {
  background: var(--surface-2);
  color: var(--ink-1);
} }

.table .ui-sheet.info-menu > .ui-sheet-body { display: grid; gap: var(--step-5); padding: var(--step-4) var(--step-5) var(--step-5); overflow-y: auto; }
.info-section { display: grid; gap: var(--step-2); }
.info-head { margin: 0; font-size: var(--type-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.info-line { margin: 0; font-size: var(--type-body); line-height: 1.5; color: var(--ink-2); }

.top-row .turn-help { flex: none; width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 50%; font-weight: 700; line-height: 1; }
.top-row .turn-menu + .turn-help { margin-left: var(--step-1); }

.info-key-group { display: grid; gap: var(--step-2); }
.info-key-group + .info-key-group { margin-top: var(--step-2); }
.info-key-head { margin: 0; font-size: var(--type-body); font-weight: 600; color: var(--ink-1); }
.info-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step-2); }
.info-key-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--step-3); align-items: start; }
.info-key-does { font-size: var(--type-body); line-height: 1.45; color: var(--ink-2); padding-top: 3px; }
@media (max-width: 480px) {
  .info-key-row { grid-template-columns: minmax(0, 1fr); gap: var(--step-1); }
}

.top-row .turn-menu { margin-left: auto; }

.card-window { position: fixed; z-index: var(--z-anchored); display: grid; grid-template-rows: auto 1fr; background: var(--surface-1); border: 1px solid var(--line-2); border-radius: var(--round-2); box-shadow: var(--win-shadow); overflow: hidden; }
.cw-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; cursor: grab; background: var(--surface-2); user-select: none; touch-action: none; }
.cw-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--type-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }

.cw-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0 0 2px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-1) var(--ease-inout), border-color var(--motion-1) var(--ease-inout), color var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard);
}
@media (hover: hover) { .cw-close:hover {
  background: var(--surface-overlay);
  border-color: var(--ink-3);
  color: var(--ink-1);
} }
.cw-close:active { scale: var(--tap); transition-duration: 0s; }
.cw-close:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.cw-body { overflow: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.cw-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--ink-3) 50% 58%, transparent 58% 70%, var(--ink-3) 70% 78%, transparent 78%); }

.card-window.is-sheet { z-index: var(--z-sheet); left: 0 !important; width: 100% !important; top: auto !important; bottom: 0; border-radius: var(--round-2) var(--round-2) 0 0; }
.card-window.is-sheet .cw-grip { display: none; }
.card-window.is-sheet .cw-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-window.is-sheet .cw-bar { min-height: var(--touch); }
:root[data-input="touch"] .cw-close { width: var(--touch); height: var(--touch); }
:root[data-input="touch"] .cw-grip { width: var(--touch); height: var(--touch); background-size: 16px 16px; background-position: right bottom; background-repeat: no-repeat; }

.card-menu-items { display: flex; flex-direction: column; gap: var(--step-1); }
.cardmenu-item:active {
  background: var(--ink-1);
  color: var(--surface-ground);
  transition-duration: 0s;
}


.said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.preview-pane > .cf-large, .preview-pane > .cf-duo > :is(.cf-large, .cf-tr) { box-shadow: 0 14px 34px rgba(1, 4, 12, 0.6); }
.preview-pane.empty {
  padding: var(--step-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--round-2);
  color: var(--ink-3);
  font-size: var(--type-note);
  line-height: 1.5;
}
.preview-hint { margin: 0; }

.preview-unrun {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step-1);
  box-sizing: border-box;
  width: 280px;
  margin-top: var(--step-2);
  padding: var(--step-2) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
}
.preview-unrun > .chip.unrun { background: transparent; padding: 0; color: var(--warn); font-weight: 650; }
.preview-unrun-why { font-size: var(--type-note); line-height: 1.4; color: var(--warn); }

.felt { position: relative; }

.preview-host-table {
  position: fixed;
  z-index: 78;
  left: 0;
  top: 0;
  width: max-content;
  transform-origin: 0 0;
  pointer-events: none;
}
.preview-host-table > .preview-pane.empty { display: none; }

[data-preview-host][data-leaving] { opacity: 0; transition: opacity var(--motion-1) var(--ease-exit); }

[data-preview-host][data-side="above"] > .preview-pane { transform-origin: 50% 100%; }
[data-preview-host][data-side="below"] > .preview-pane { transform-origin: 50% 0; }
[data-preview-host][data-side="left"] > .preview-pane { transform-origin: 100% 50%; }
[data-preview-host][data-side="right"] > .preview-pane { transform-origin: 0 50%; }


.preview-host-lobby {
  position: sticky;
  top: var(--step-4);
  align-self: start;
  width: 280px;
  max-width: 100%;
}


@media (max-width: 1179.98px) {
  .preview-host-editor {
    position: fixed;
    z-index: 62;
    left: 0;
    top: 0;
    width: max-content;
    transform-origin: 0 0;
    pointer-events: none;
  }
  .preview-host-editor > .preview-pane.empty { display: none; }
}
@media (min-width: 1180px) {
  
  .preview-host-editor {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100%;
    overflow: auto;
  }
}


:where(.act, .cand, .select, .pick, .submit, .unrun-head) {
  position: relative;
  isolation: isolate;
}
:is(.act, .cand, .select, .pick, .submit, .unrun-head)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: max(100%, var(--touch));
  height: max(100%, var(--touch));
  transform: translate(-50%, -50%);
}

input:where([type="text"], [type="search"], [type="number"], :not([type])), select { min-height: var(--touch); }

.entry { min-height: var(--touch); padding-block: 0; }


.refusal-raw > summary { min-height: var(--touch); padding-block: var(--step-3); }


.moments-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.moments-layer > * { position: fixed; pointer-events: none; }

.rift-words {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: var(--seam-font, 22px);
  line-height: 1.2;
  text-shadow: 0 0 18px var(--rift-glow), 0 4px 24px rgba(0, 0, 0, 0.6);
  background: linear-gradient(90deg, transparent 0%, oklch(13.2% 0.018 274 / 0.55) 50%, transparent 100%);
  opacity: 0;
}
.rift-line { display: flex; align-items: baseline; gap: 0.45em; max-width: 100%; min-width: 0; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; }
.rift-words small { flex: none; font-size: 1em; font-weight: 700; color: var(--ink-2); }
.rift-words .rift-dot { flex: none; font-style: normal; color: var(--ink-2); }
.rift-words b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1em; font-weight: 900; }
.rift-words.you b { color: var(--you-ink); }
.rift-words.them b { color: var(--opponent-ink); opacity: 0.85; }

.control-flood { border-radius: var(--round-2); opacity: 0; }

.field-moment { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; }
.field-moment > .control-flood { position: absolute; inset: 0; transform-origin: 50% var(--seam-y, 50%); will-change: transform, opacity; }
.field-moment > .moment-echo,
.field-moment > .moment-breath { position: absolute; inset: 0; border-radius: var(--round-2); opacity: 0; will-change: transform, opacity; }
.moment-echo.you, .moment-breath.you { box-shadow: 0 0 0 3px var(--you), 0 0 18px 4px color-mix(in oklch, var(--you) 50%, transparent); }
.moment-echo.them, .moment-breath.them { box-shadow: 0 0 0 3px var(--opponent), 0 0 18px 4px color-mix(in oklch, var(--opponent) 50%, transparent); }
.moment-echo.both { box-shadow: 0 0 0 3px var(--showdown), 0 0 24px 6px var(--showdown-glow); }

.moment-breath.both { box-shadow: 0 0 24px 6px var(--showdown-glow); }

.moment-breath.heal { border-radius: var(--round-1); opacity: 0; box-shadow: 0 0 0 2px var(--good), 0 0 18px 4px color-mix(in oklch, var(--good) 55%, transparent); }

.room-seat { position: relative; }
.flash-layer { position: absolute; inset: 0; background: var(--ink-1); opacity: 0; pointer-events: none; }
.glow-layer { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in oklch, var(--good) 28%, transparent); opacity: 0; pointer-events: none; }
.control-flood.you { background: radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--you) 38%, transparent), transparent 70%); }
.control-flood.them { background: radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--opponent) 27%, transparent), transparent 70%); }
.moments-ghost { border-radius: var(--round-1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }

.moments-ghost :is(.dock-lead, .dock-strip, .dock-marker) { animation: none; }

.moments-ignite { border-radius: var(--round-1); background: color-mix(in oklch, var(--cf-hue, var(--ink-1)) 70%, transparent); opacity: 0; }
.moments-layer > .moment-echo { border-radius: var(--round-1); opacity: 0; will-change: transform, opacity; }
.moments-ghost.countered { background: var(--surface-2); border: 1px solid var(--line-2); }

.moments-ash { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in oklch, var(--surface-ground) 60%, transparent); opacity: 0; pointer-events: none; }

.moments-sighted { border-radius: var(--round-1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.moments-sighted > .cf,
.moments-sighted > .ask-back { width: 100%; height: 100%; }

.finale {
  display: grid;
  place-items: center;
  background: var(--finale-dim);
}
.finale-result { display: flex; flex-direction: column; align-items: center; gap: var(--step-2); color: var(--ink-1); }
.finale-result b { font-size: 54px; letter-spacing: 0.12em; white-space: nowrap; }
.finale.won .finale-result b { color: var(--you-ink); }
.finale.lost .finale-result b { color: var(--opponent-ink); }
.finale-result span { font-size: 14px; letter-spacing: 0.3em; opacity: 0.85; }
.finale-result i { font-style: normal; }
.finale-said { margin: 0; font-size: var(--type-read); text-align: center; max-width: 32ch; }

.finale { --seam: 50%; }
.finale-far,
.tear-open { position: absolute; left: 0; right: 0; pointer-events: none; }
.finale-far { top: 0; height: var(--seam); background: var(--veil); }
.finale.lost .finale-far,
.finale.drawn .finale-far { top: var(--seam); bottom: 0; height: auto; }
.tear-open {
  top: var(--seam);
  height: clamp(70px, 14%, 120px);
  margin-top: calc(clamp(70px, 14%, 120px) / -2);
  opacity: 0;
  --tear-hue: var(--you);
  background:
    linear-gradient(180deg, transparent 0, transparent 47%, rgba(255, 255, 255, 0.95) 49.5%, rgba(255, 255, 255, 0.95) 50.5%, transparent 53%, transparent),
    linear-gradient(180deg, transparent, color-mix(in oklch, var(--tear-hue) 55%, transparent) 40%, color-mix(in oklch, var(--tear-hue) 85%, transparent) 50%, color-mix(in oklch, var(--tear-hue) 55%, transparent) 60%, transparent);
}
.finale.lost .tear-open { --tear-hue: var(--opponent); }
.finale.drawn .tear-open { --tear-hue: var(--rift-light); }

.finale.watched.won .tear-open { --tear-hue: color-mix(in oklch, var(--you) 70%, transparent); }
.finale.watched.lost .tear-open { --tear-hue: color-mix(in oklch, var(--opponent) 70%, transparent); }


body:has([data-finale]) [data-fx="host"] { z-index: 61 !important; }
.finale-legend { position: absolute; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.finale-crack { position: absolute; height: 5px; margin-top: -2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(150, 140, 160, 0.4) 60%, transparent); will-change: transform; }
.finale-veil { position: absolute; left: 0; right: 0; top: var(--seam); bottom: 0; pointer-events: none; background: var(--veil); opacity: 0; will-change: opacity; }
.result-flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(60% 50% at 50% 30%, color-mix(in oklch, var(--ink-1) 55%, transparent), transparent 70%); }
.conquer-banner { position: absolute; left: calc(var(--card-x) + 6px); width: 28px; height: 40px; pointer-events: none; opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform-origin: 50% 0; will-change: transform, opacity; }
.conquer-banner.you { top: calc(var(--card-y) + var(--card-h) - 46px); background: var(--you); }
.conquer-banner.them { top: calc(var(--card-y) + 6px); background: color-mix(in oklch, var(--opponent) 70%, transparent); }
.conquer-banner.phone { width: 18px; height: 26px; }
.conquer-banner.phone.you { top: calc(var(--card-y) + var(--card-h) - 32px); }
.rift-glint { position: absolute; overflow: hidden; pointer-events: none; }
.rift-band { position: absolute; top: 0; bottom: 0; left: 30%; width: 40%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); will-change: transform, opacity; }
.rune-charge { position: absolute; inset: -8%; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in oklch, var(--cf-hue, var(--rift-light)) 85%, transparent), transparent); will-change: transform, opacity; }
.finale .finale-result { position: absolute; left: 0; right: 0; top: var(--seam); translate: 0 -50%; padding: 0 var(--step-4); }
.finale.won .finale-result b { font-size: clamp(54px, 7.5vw, 108px); text-shadow: 0 0 40px color-mix(in oklch, var(--you) 80%, transparent), 0 0 3px rgba(255, 255, 255, 0.9); }
.finale.watched .finale-result b { color: var(--ink-1); text-shadow: none; }

.battle-number {
  display: grid;
  place-items: center;
  opacity: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--hit-size, 32px);
  line-height: 1;
  letter-spacing: var(--track-display);
  font-kerning: normal;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--hit-ink, var(--bad));
  text-shadow:
    0 0 2px oklch(14% 0.02 265),
    0 2px 12px oklch(12% 0.02 265 / 0.85),
    0 0 18px color-mix(in oklch, var(--hit-ink, var(--bad)) 45%, transparent);
  will-change: transform, opacity;
}

.battle-number.pool-gain { --hit-ink: var(--good); }

.battle-number.lethal {
  color: var(--ink-1);
  text-shadow:
    0 0 2px oklch(14% 0.02 265),
    0 0 12px var(--bad),
    0 2px 14px oklch(12% 0.02 265 / 0.85);
}

.moment-word {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
  font-kerning: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-1);
  text-shadow: 0 0 2px var(--surface-ground);
}
.field-moment > .moment-word { position: absolute; left: var(--card-x); top: var(--card-y); width: var(--card-w); height: var(--card-h); }
.moment-word b { display: flex; flex: none; align-items: baseline; gap: 0.45em; font-weight: inherit; }
.moment-word.battle-title b { flex: 0 1 auto; max-width: 100%; }

.moment-word.measuring b { flex: none; max-width: none; }
.moment-word b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.moment-word b i { font-style: normal; font-weight: 500; font-size: 0.6em; letter-spacing: var(--track-caps); color: var(--ink-2); }
.moment-word.you b, .moment-word b .you { color: var(--you-ink); }
.moment-word.them b, .moment-word b .them { color: var(--opponent-ink); }
.moment-chip {
  padding: 0 var(--step-2);
  height: 24px;
  border-radius: var(--round-pill);
  background: var(--surface-overlay);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 12px;
}


.card.at-hand[data-hand-card] {
  transform-origin: 50% 130%;
  rotate: var(--fan-rot, 0deg);
  translate: 0 var(--fan-drop, 0px);
  scale: 1.1;
  transition:
    rotate var(--motion-2) var(--ease-emphasis),
    translate var(--motion-2) var(--ease-emphasis),
    scale var(--motion-2) var(--ease-emphasis);
}

.half.near .card.at-hand[data-hand-card]:not(.hidden):hover {
  z-index: 20;
  rotate: 0deg;
  translate: 0 -58px;
  scale: calc(1.1 * 1.12);
  transition-duration: 0s;
}


.card.at-hand[data-hand-card] { overflow: visible; }
.card.at-hand > .hand-rest {
  position: absolute;
  
  inset: -4px;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 130%;
  transform: scale(calc(1 / (1.1 * 1.12))) translate(0, calc(58px + var(--fan-drop, 0px))) rotate(var(--fan-rot, 0deg)) scale(1.1);
}
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover > .hand-rest { pointer-events: auto; translate: none; }
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover::before,
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover > :not(.hand-rest) {
  translate: none;
  transform-origin: 50% 130%;
  animation: hand-lift var(--motion-2) var(--ease-emphasis) backwards;
}
@keyframes hand-lift {
  from {
    transform: scale(calc(1 / (1.1 * 1.12))) translate(0, calc(58px + var(--fan-drop, 0px))) rotate(var(--fan-rot, 0deg)) scale(1.1);
  }
}

.half.near .zone-hand > .row-of-cards:has(> .card.at-hand[data-hand-card]:not(.hidden):hover) { z-index: 25; }
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover ~ .card.at-hand[data-hand-card] {
  translate: 26px var(--fan-drop, 0px);
}
.half.near .card.at-hand[data-hand-card]:has(~ .card.at-hand[data-hand-card]:not(.hidden):hover) {
  translate: -26px var(--fan-drop, 0px);
}

.card.at-hand.payable:not(.hidden):not(.lifted)::before {
  border-color: var(--decide);
  box-shadow: 0 0 0 1px var(--decide), 0 0 14px 2px var(--decide-wash), 0 2px 6px rgba(1, 7, 18, 0.5);
}


.play-ripple { border-radius: 50%; border: 3px solid var(--you-ink); }

.moments-waiting { visibility: hidden; }

.table[data-me] .battlefield.candidate {
  box-shadow: 0 0 0 3px var(--candidate), 0 0 22px var(--candidate-glow);
  animation: field-breathe var(--loop-call) var(--ease-inout) infinite;
  animation-timing-function: var(--tick-inout-8);
  cursor: pointer;
}
@keyframes field-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--candidate), 0 0 22px var(--candidate-glow); }
  50% { box-shadow: 0 0 0 3px var(--candidate), 0 0 34px var(--candidate-glow); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .battlefield.candidate { animation: none; }
}
:root[data-motion="reduce"] .battlefield.candidate { animation: none; }


.ask-stage {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-5);
  pointer-events: none;
  background: var(--veil);
  animation: ask-veil-in var(--motion-2) var(--ease-standard) both;
}
@keyframes ask-veil-in { from { background: transparent; } }
.ask-stage > * { pointer-events: auto; }

.ask-fan-card { flex: 0 0 auto; animation: ask-rise var(--motion-3) var(--ease-emphasis) both; }
.ask-fan-card .cf-hand { width: 190px; box-shadow: var(--shadow-sheet); }
@keyframes ask-rise {
  from { transform: translateY(240px) scale(0.6); opacity: 0; }
}
.ask-fan-options { display: flex; flex-direction: column; gap: var(--step-2); max-width: 280px; }
.ask-option {
  --ask-i: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--step-2);
  min-height: var(--touch);
  padding: var(--step-2) var(--step-3);
  border: 2px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font-size: var(--type-body);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-1) var(--ease-inout), transform var(--motion-2) var(--ease-emphasis);
  
  animation: ask-option-in var(--motion-3) var(--ease-spring) both;
  animation-delay: calc(var(--motion-1) + var(--ask-i) * var(--stagger));
}
@keyframes ask-option-in { from { transform: translateX(-30px); opacity: 0; } }
@media (hover: hover) { .ask-option:hover:not([aria-disabled="true"]) { border-color: var(--ink-2); transform: translateX(4px); } }
.ask-option.on { border-color: var(--ink-2); }
.ask-option-key { flex: 0 0 auto; color: var(--ink-1); font-weight: 900; }
.ask-option-text { flex: 1 1 auto; }

.ask-option-kw { font-size: 0.8em; }
.ask-option-text > .reminder { font-style: italic; color: var(--ink-2); }

:root[data-input="touch"] .peek-bar .ui-kbd { display: none; }

.ask-tray-stage {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--step-4);
  padding: var(--step-4) 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.ask-tray-stage > .ask-tray-title { margin-top: auto; }
.ask-tray-stage > .ask-tray { margin-bottom: auto; }

:root[data-tray-bar] .ask-tray-stage { pointer-events: auto; }

.ask-tray-stage:focus { outline: none; }
.ask-tray-title {
  font-size: var(--type-read);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.table:is([data-shape="tall"], [data-shape="short"]) .ask-tray-title { position: relative; z-index: 1; border-radius: var(--round-pill); background: var(--surface-overlay); box-shadow: 0 0 0 4px var(--surface-overlay); color: var(--ink-1); }

.ask-tray {
  --n: 1;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--step-3);
  width: 92%;
}
.ask-tray-card {
  --ask-i: 0;
  flex: 0 0 clamp(97px, calc((100% - (var(--n) - 1) * var(--step-3)) / var(--n)), calc(var(--dock-face) * 1.6));
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--round-2);
  background: transparent;
  cursor: pointer;
  transition: transform var(--motion-2) var(--ease-emphasis), box-shadow var(--motion-2) var(--ease-standard);
  animation: ask-deal-near var(--motion-3) var(--ease-emphasis) both;
  animation-delay: calc(var(--ask-i) * var(--motion-1) * 0.75);
}
.from-far .ask-tray-card { animation-name: ask-deal-far; }
.from-chain .ask-tray-card { animation-name: ask-deal-chain; }
@keyframes ask-deal-near { from { transform: translate(-120px, 300px) rotateY(90deg) scale(0.5); opacity: 0.3; } }
@keyframes ask-deal-far { from { transform: translate(-120px, -300px) rotateY(90deg) scale(0.5); opacity: 0.3; } }
@keyframes ask-deal-chain { from { transform: translate(360px, -120px) scale(0.5); opacity: 0.3; } }
.ask-tray-card .cf-hand,
.ask-tray-card .ask-back { width: 100%; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); }
.ask-tray-card:hover { transform: translateY(-6px); }
.ask-tray-card.on { transform: translateY(-14px); }
.ask-tray-card.on .cf-hand,
.ask-tray-card.on .ask-back { box-shadow: 0 0 0 3px var(--decide), 0 10px 26px rgba(0, 0, 0, 0.6); }
.ask-back {
  aspect-ratio: 5 / 7;
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--surface-2), var(--surface-well));
}

.ask-remake { background: transparent; animation: none; pointer-events: none; }

.ask-remake-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: ask-present-track calc(var(--motion-3) + var(--motion-4) + var(--motion-3)) var(--ease-standard) both;
}
.ask-remake-card {
  position: absolute;
  left: var(--step-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  animation: ask-present calc(var(--motion-3) + var(--motion-4) + var(--motion-3)) var(--ease-standard) both;
}
.ask-remake-card .cf-hand { width: 190px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }
.ask-remake .ask-fan-options { position: absolute; left: calc(var(--step-4) + 206px); top: 50%; transform: translateY(-50%); }
@keyframes ask-present {
  0% { transform: translateY(-50%) scale(0.6); opacity: 0; }
  28% { transform: translateY(-50%) scale(1); opacity: 1; }
  100% { transform: translateY(-50%); opacity: 1; }
}

@keyframes ask-present-track {
  0%, 70% { translate: calc(50% - var(--step-4) - 95px) 0; }
  100% { translate: 0 0; }
}

.ask-places { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

.ask-place {
  position: absolute;
  pointer-events: auto;
  padding: 0;
  border: 2px solid var(--candidate);
  border-radius: var(--round-2);
  background: color-mix(in srgb, var(--candidate) 12%, transparent);
  cursor: pointer;
  animation: ask-breathe var(--loop-call) var(--ease-inout) infinite;
  animation-timing-function: var(--tick-inout-8);
}
.ask-place.on {
  animation: none;
  border-color: var(--decide);
  background: var(--decide-wash);
  box-shadow: 0 0 0 3px var(--decide), 0 0 24px rgba(245, 166, 35, 0.55);
}
@keyframes ask-breathe {
  50% { box-shadow: 0 0 22px var(--candidate-glow); }
}

:root[data-motion="reduce"] :is(.ask-place, .ask-stage, .ask-fan-card, .ask-option, .ask-tray-card, .predict-card, .lookpick-card, .ask-remake-card, .ask-remake-track, .ask-badge, .mulligan-card) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.ask-place, .ask-stage, .ask-fan-card, .ask-option, .ask-tray-card, .predict-card, .lookpick-card, .ask-remake-card, .ask-remake-track, .ask-badge, .mulligan-card) {
    animation: none;
  }
}


.mulligan-card {
  --ask-i: 0;
  --mull-rot: 0deg;
  --mull-drop: 0px;
  position: relative;
}


.mulligan-card .card { transition: transform var(--motion-3) var(--ease-emphasis), opacity var(--motion-3) var(--ease-emphasis); }
.mulligan-card.on .card { transform: translateY(-14px); opacity: 0.7; }

.pregame-panel[data-mulligan="locked"] { animation: mulligan-locked var(--motion-2) var(--ease-spring) both; }
@keyframes mulligan-locked {
  from { transform: translateY(-4px); opacity: 0.85; }
  to { transform: none; opacity: 1; }
}
.send-back-tag {
  position: absolute;
  top: var(--step-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px var(--step-2);
  border-radius: var(--round-pill);
  background: var(--power-ink);
  color: var(--surface-ground);
  
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}


.card[data-pay-rune] {
  cursor: pointer;
  transition:
    rotate var(--motion-3) var(--ease-spring),
    translate var(--motion-2) var(--ease-emphasis),
    box-shadow var(--motion-1) var(--ease-inout);
}
.card.pay-exhaust {
  z-index: 3;
  translate: 0 -14px;
  rotate: var(--exhaust-pay-turn);
  box-shadow: 0 0 0 2px var(--decide), 0 0 14px rgba(245, 166, 35, 0.7);
}
.card.pay-recycle {
  z-index: 3;
  translate: 0 -14px;
  box-shadow: 0 0 0 2px var(--power-ink), 0 0 18px rgba(195, 156, 232, 0.8);
}


.card.pay-float .pay-float-mark,
.card.pay-adds .pay-float-mark {
  position: absolute;
  top: -10px;
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--surface-ground);
  font-size: var(--type-note);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.card.pay-float .pay-float-mark { background: var(--decide); }
.card.pay-adds .pay-float-mark { background: var(--power-ink); }
.rune-mini.pay-float { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--power-ink), 0 0 0 calc(4px / var(--fit, 1)) var(--decide); }
.card.pay-picked-up {
  z-index: 3;
  translate: 0 -22px;
  box-shadow: 0 0 0 3px var(--ink-1), 0 0 18px rgba(230, 232, 240, 0.6);
}
.ask-pay { margin-top: var(--step-1); font-size: var(--type-note); line-height: 1.5; color: var(--ink-2); }


.half.near .card.at-hand[data-hand-card].held:not(.hidden) {
  z-index: 19;
  rotate: 0deg;
  translate: 0 -40px;
}

.table[data-held][data-held] .drop.lit {
  cursor: pointer;
  background: var(--candidate-wash);
  box-shadow: inset 0 0 0 2px var(--candidate), inset 0 0 18px var(--candidate-glow);
  animation: candidate-drop-breathe var(--loop-call) var(--ease-inout) infinite;
  animation-timing-function: var(--tick-inout-8);
}
@keyframes candidate-drop-breathe {
  50% { box-shadow: inset 0 0 0 2px var(--candidate), inset 0 0 30px var(--candidate-glow); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .table[data-held][data-held] .drop.lit { animation: none; }
}
:root[data-motion="reduce"] .table[data-held][data-held] .drop.lit { animation: none; }

.card-menu { max-height: calc(100dvh - 2 * var(--step-2)); overflow-y: auto; }

.cardmenu-note {
  margin: 0 var(--step-2) var(--step-1);
  font-size: var(--type-body);
  line-height: 1.3;
  color: var(--ink-1);
}
.card-menu .cardmenu-item {
  height: auto;
  min-height: 44px;
  padding: var(--step-1) var(--step-2);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.card-menu .card-menu-items > .cardmenu-item:first-child {
  background: var(--surface-2);
  font-weight: 700;
}
@media (hover: hover) { .card-menu .card-menu-items > .cardmenu-item:first-child:hover { background: var(--line-2); } }


.zone.zone-resources { z-index: 4; }

.half.far .card.at-hand[data-hand-card] {
  transform-origin: 50% -30%;
  rotate: calc(var(--fan-rot, 0deg) * -1);
  translate: 0 calc(var(--fan-drop, 0px) * -1);
  scale: 1;
}

.score-fan { position: relative; flex: none; display: inline-flex; align-items: flex-start; height: 16px; margin-left: var(--step-1); padding-left: 4px; pointer-events: none; }
.score-fan > .score-back {
  flex: none;
  width: 11px;
  height: 16px;
  margin-left: -6px;
  border-radius: 2px;
  background: var(--card-back);
  box-shadow: 0 1px 3px rgba(1, 7, 18, 0.6), inset 0 0 0 1px color-mix(in oklch, var(--opponent-ink) 62%, transparent);
  transform-origin: 50% -60%;
  rotate: calc(var(--fan-rot, 0deg) * -1);
}



.log-row.wrap {
  
  --log-row: 22px;
  --log-wrap-line: calc(var(--log-row) - 2.5px);
  align-items: flex-start;
  white-space: normal;
  padding-top: calc(var(--step-1) / 2);
}
.log-row.wrap { height: calc(var(--log-span, 2) * var(--log-row)); }
.log-row.wrap > .log-glyph { line-height: var(--log-wrap-line); }
.log-row.wrap > .log-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: var(--log-wrap-line);
  overflow-wrap: anywhere;
}
.log-row.wrap > .log-text { -webkit-line-clamp: var(--log-span, 2); line-clamp: var(--log-span, 2); }
.log-row.wrap > .log-text > .log-frag { display: inline; white-space: normal; overflow: visible; }
.log-row.wrap > .log-text > .log-card { display: inline; min-width: 0; }
.log-row.wrap > .log-text > .log-card > .cf-line { display: inline-flex; vertical-align: -3px; max-width: 100%; }
.log-row.wrap > .log-cite { align-self: flex-start; line-height: var(--log-wrap-line); }


.score-ladder-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.die-slot { min-width: 0; }

.die-seat-label { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }



.side > .top .seat-row { min-height: 0; padding-bottom: var(--step-1); }
.side > .top .game-id.seat-playing {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
  min-height: 28px;
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  color: var(--ink-1);
  cursor: pointer;
}
@media (hover: hover) { .side > .top .game-id.seat-playing:hover { background: var(--surface-2); } }
@media (pointer: coarse) {
  .side > .top .game-id.seat-playing { min-height: 44px; }
}



.table:is([data-shape="tall"], [data-shape="short"]) .stage {
  --tall-word: calc(var(--tall-word-on-screen) / var(--fit, 1));
  --tall-count: calc(var(--tall-count-on-screen) / var(--fit, 1));
  --tall-number: calc(var(--tall-number-on-screen) / var(--fit, 1));
  
  --tall-word-on-screen: 12px;
  --stage-word: calc(var(--tall-word-on-screen) / var(--fit, 1));
  --tall-count-on-screen: 14px;
  --tall-number-on-screen: 16px;
}
.table:is([data-shape="tall"], [data-shape="short"]) .stage .zone-label { font-size: var(--tall-word); letter-spacing: 0.06em; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage :is(.zone-base, .zone-runeArea, .zone-champion, .zone-legend).holds-cf > .zone-label { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .chip { font-size: var(--tall-word); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .stack-count { font-size: var(--tall-count); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .hand-count { font-size: var(--tall-count); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-name { font-size: var(--tall-word); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-active-label { font-size: var(--tall-word); letter-spacing: 0.04em; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .field-banner-word { font-size: var(--tall-word); top: -34px; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .score-ladder .node { font-size: var(--tall-word); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .score-ladder-name { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool-name { font-size: var(--tall-word); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool-n { font-size: var(--tall-number); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .zone-trash.holds-cf > .zone-label { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .at-pile > .card-line { display: none; }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .zone-hand > .hand-count { right: auto; left: 4px; }

.table:is([data-shape="tall"], [data-shape="short"]) .pregame-overlay .act { min-height: var(--touch); padding: 0 var(--step-5); font-size: var(--type-read); }
.banner-unsupported { font-size: var(--type-note); opacity: 0.88; }
.felt > .banner .banner-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: calc(var(--step-1) / 2);
  padding: var(--step-2) var(--step-4);
  border-radius: var(--round-2);
  background: var(--bad);
  box-shadow: var(--table-lift);
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.rune-stacks > .rune-stack > .rune-stack-back {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--table-edge);
  border-radius: var(--round-1);
  background: url("../brand/rune-card-back.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.rune-stacks > .rune-stack > .rune-count {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--step-1) / 2);
  pointer-events: none;
}
.rune-count > span {
  padding: 0 var(--step-1);
  border-radius: var(--round-pill);
  background: color-mix(in srgb, var(--felt-2) 94%, transparent);
  border: 1px solid var(--table-edge);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rune-count-n { color: var(--table-text); font-size: var(--stage-count, var(--type-read)); font-weight: 850; }
.rune-count-ready { color: var(--good); font-size: var(--stage-word, var(--type-note)); font-weight: 700; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .rune-count-n { font-size: var(--tall-count); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .rune-count-ready { font-size: var(--tall-word); }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool { align-content: start; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-active-label { bottom: auto; top: 4px; margin-bottom: 0; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem:has(.totem-active-label) { justify-content: flex-end; }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool-restricted-line .pool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.table[data-shape="tall"] .side-right > .chain.dock { display: none; }
.dock-pill {
  position: absolute;
  z-index: 24;
  top: 30px;
  left: var(--step-2);
  right: 112px;
  display: flex;
  align-items: center;
  gap: var(--step-2);
  min-height: var(--touch);
  padding: 0 var(--step-2);
  box-sizing: border-box;
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  background: var(--surface-1);
  box-shadow: var(--table-lift-sm);
}
.dock-pill > button {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dock-pill > .dock-pill-title { flex: none; gap: 0.3em; font-size: var(--type-note); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.dock-pill > .dock-pill-top { flex: 1 1 auto; min-width: 0; overflow: hidden; }

.dock-pill[data-idle] { visibility: hidden; pointer-events: none; }

@media (max-width: 480px) { .dock-pill-word { display: none; } }

.dock-pill-line { display: flex; align-items: center; gap: var(--step-2); min-width: 0; animation: chain-fade-in var(--motion-2) var(--ease-standard); }
.dock-pill-line > :not(.dock-n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dock-pill-title .dock-count-slot { display: inline-block; }
.dock-pill > .dock-next { flex: none; font-size: var(--type-note); color: var(--ink-2); }

.dock-pill > .dock-pill-top.asked { padding: 0 6px; border-radius: var(--round-pill); box-shadow: inset 0 0 0 2px var(--decide); }
.dock-pill-ordering { font-size: var(--type-note); font-weight: 700; color: var(--ink-1); white-space: nowrap; }


.table:is([data-shape="tall"], [data-shape="short"]) .panel.decide:is([data-decide="copy"], [data-decide="ask"]) > .decide-top { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .panel.decide:is([data-decide="copy"], [data-decide="ask"]) > .decide-body { margin-top: 0; }


.stage > .crowd-spread { inset: 0; z-index: 30; pointer-events: none; }
.crowd-spread > .crowd-scrim {
  position: absolute;
  background: color-mix(in srgb, var(--surface-ground) 72%, transparent);
  pointer-events: auto;
}
.crowd-spread > .card { position: absolute; pointer-events: auto; }


.crowd-spread.zone-view > .zone-scrim { background: color-mix(in srgb, var(--surface-ground) 94%, transparent); }
.crowd-spread.zone-view.is-zoom > .zone-scrim { background: color-mix(in srgb, var(--surface-ground) 97%, transparent); }
.zone-view > :is(.zone-head, .zone-band-label, .zone-link, .zone-chain) { position: absolute; pointer-events: auto; }
.zone-view > .zone-band-label, .zone-view > .zone-link { pointer-events: none; }
.zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px / var(--fit, 1));
  font-size: var(--stage-word);
}
.zone-title { display: flex; align-items: center; gap: calc(8px / var(--fit, 1)); min-width: 0; }
.zone-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, calc(17px / var(--fit, 1)), 28px);
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-call {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(10px, calc(11px / var(--fit, 1)), 16px);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: calc(1px / var(--fit, 1)) solid var(--showdown);
  color: var(--showdown);
}
.zone-call.is-combat { border-color: var(--bad); color: var(--bad-ink); }
.zone-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(6px / var(--fit, 1));
  min-height: calc(44px / var(--fit, 1));
  padding: 0 calc(14px / var(--fit, 1));
  border: calc(1px / var(--fit, 1)) solid var(--line-2);
  border-radius: calc(8px / var(--fit, 1));
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: inherit;
  font-size: var(--stage-word);
  cursor: pointer;
  transition: background var(--motion-1) var(--ease-inout);
}
@media (hover: hover) { .zone-close:hover { background: var(--surface-2); } }
.zone-close > .ui-icon { width: calc(18px / var(--fit, 1)); height: calc(18px / var(--fit, 1)); }
.zone-band-label {
  display: flex;
  align-items: flex-end;
  gap: calc(6px / var(--fit, 1));
  font-size: var(--stage-word);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.zone-band-label::before {
  content: "";
  flex: none;
  width: calc(8px / var(--fit, 1));
  height: calc(8px / var(--fit, 1));
  margin-bottom: 0.35em;
  border-radius: 50%;
  background: var(--you);
}
.zone-band-label.is-them::before { background: var(--opponent); }
.zone-link { display: grid; place-items: center; color: var(--ink-2); }
.zone-link > .ui-icon { width: 100%; height: 100%; }

.zone-chain-items { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px / var(--fit, 1)); margin: 0; padding: 0; list-style: none; font-size: var(--stage-word); }
.zone-chain-head { color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(10px, calc(10px / var(--fit, 1)), 14px); }
.zone-chain-item {
  padding: 0.2em 0.7em;
  border-radius: 999px;
  border: calc(1px / var(--fit, 1)) solid var(--you);
  background: var(--you-wash);
  color: var(--ink-1);
}
.zone-chain-item.is-them { border-color: var(--opponent); background: var(--opponent-wash); }

.stage > .zoom-chip {
  position: absolute;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  translate: -50% calc(-100% - 6px);
  scale: calc(1 / var(--fit, 1));
  transform-origin: bottom center;
  border: 1px solid var(--bad);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.stage > .zoom-chip.is-showdown { border-color: var(--showdown); }
.zoom-chip-count { color: var(--ink-2); }

.zone-open {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(3px / var(--fit, 1));
  padding: 0;
  border: calc(1px / var(--fit, 1)) solid var(--line-2);
  border-radius: calc(8px / var(--fit, 1));
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: 700 calc(11px / var(--fit, 1)) / 1 var(--font-ui);
  pointer-events: auto;
  cursor: pointer;
}
.zone-open > .ui-icon { width: calc(12px / var(--fit, 1)); height: calc(12px / var(--fit, 1)); }
@media (hover: hover) { .zone-open:hover, .half-tally.opens:hover { background: var(--surface-2); } }
.half-tally.opens { cursor: pointer; pointer-events: auto; font: inherit; }
.half-tally.opens > .ui-icon { width: 1em; height: 1em; margin-left: 0.2em; color: var(--ink-2); }


.card-menu-head.is-pop { grid-template-columns: 44px minmax(0, 1fr); gap: var(--step-2); padding: var(--step-2) var(--step-2) var(--step-2); text-transform: none; letter-spacing: normal; }
.card-menu-head.is-pop .card-menu-face > .cf { width: 44px; }
.card-menu-head.is-pop .card-menu-name { font-family: var(--font-display); font-weight: 700; font-size: var(--type-body); color: var(--ink-1); white-space: normal; overflow-wrap: anywhere; }
.card-menu .card-menu-items { gap: 0; }
.cardmenu-group { display: flex; flex-direction: column; gap: 2px; padding: var(--step-1) 0; }
.cardmenu-group + .cardmenu-group { border-top: 1px solid var(--line-1); }
.cardmenu-group-head {
  padding: 2px var(--step-2) 2px;
  font-size: var(--type-tag);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card-menu .cardmenu-group .cardmenu-item:not(.cardmenu-ability):not(.is-blocked) { display: flex; align-items: center; gap: var(--step-2); }
.cardmenu-icon { flex: none; display: grid; place-items: center; width: 20px; color: var(--ink-2); }
@media (hover: hover) { .cardmenu-item:hover .cardmenu-icon { color: var(--ink-1); } }
.cardmenu-label { min-width: 0; }

.card-menu .cardmenu-group:first-child > .cardmenu-group-head + .cardmenu-item:not(.is-blocked) { background: var(--surface-2); font-weight: 700; }
@media (hover: hover) { .card-menu .cardmenu-group:first-child > .cardmenu-group-head + .cardmenu-item:not(.is-blocked):hover { background: var(--line-2); } }
.cardmenu-item[data-menu-tile] { min-height: 52px; }
.cardmenu-tile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--round-1);
  border: 1px solid var(--line-2);
  background: var(--surface-well);
  color: var(--ink-2);
}

.cardmenu-tile-art { position: absolute; left: 50%; top: 50%; width: 40px; height: 56px; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
.cardmenu-tile-glyph { width: 22px; height: 22px; opacity: 0.8; }
.cardmenu-tile-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--ink-1);
  font: 700 10px / 1 var(--font-ui);
}
.cardmenu-place { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cardmenu-place-name { font-weight: 600; overflow-wrap: anywhere; }
.cardmenu-place-tax { font-size: var(--type-note); color: var(--ink-2); }
.cardmenu-with { display: flex; flex-direction: column; gap: var(--step-1); padding: var(--step-1) var(--step-2) 0; }
.cardmenu-with-head { display: flex; align-items: center; gap: 6px; font-size: var(--type-note); color: var(--ink-2); }
.cardmenu-with-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.cardmenu-with-face {
  position: relative;
  width: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--round-1);
  background: none;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard);
}
.cardmenu-with-face > .cf { width: 44px; pointer-events: none; }
@media (hover: hover) { .cardmenu-with-face:hover { opacity: 0.9; } }
.cardmenu-with-face.is-picked { opacity: 1; box-shadow: 0 0 0 2px var(--ink-1); }
.cardmenu-with-face:active { scale: var(--tap); transition-duration: 0s; }
.cardmenu-with-tick {
  position: absolute;
  right: -5px;
  top: -5px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-1);
  color: var(--surface-ground);
}
.cardmenu-with-face.is-picked > .cardmenu-with-tick { display: grid; }
.cardmenu-with-table {
  align-self: flex-start;
  min-height: 32px;
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--type-note);
  cursor: pointer;
}
@media (hover: hover) { .cardmenu-with-table:hover { color: var(--ink-1); background: var(--surface-2); } }
.card-menu.is-sheet .cardmenu-with-face, .card-menu.is-sheet .cardmenu-with-face > .cf { width: 52px; }
.card-menu.is-sheet .cardmenu-with-table { min-height: 44px; }
.card-menu.is-sheet .cardmenu-group-head { padding-inline: var(--step-4); }


.table:is([data-shape="tall"], [data-shape="short"]) .stage .chip.designation { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .card { --seal: 14px; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .card-line.marks > .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.table:is([data-shape="tall"], [data-shape="short"]) .stage .half.near .zone-hand > .hand-count { display: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .half.far .zone-hand > .hand-count { left: auto; right: 4px; }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .zone-trash { z-index: 21; }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool { row-gap: 0; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool-line { line-height: 1.05; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .pool-n { font-size: var(--tall-count); }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-active-label { display: none; }


.zone-hand > .hand-scrub {
  position: absolute;
  z-index: 22;
  top: 50%;
  width: calc(var(--touch) + var(--step-1));
  min-height: var(--touch);
  padding: 0;
  border: 1px solid var(--table-edge);
  border-radius: var(--round-pill);
  background: color-mix(in srgb, var(--felt-2) 94%, transparent);
  color: var(--table-text);
  font: inherit;
  font-size: var(--stage-count);
  font-weight: 800;
  translate: 0 -50%;
  cursor: pointer;
}
.zone-hand > .hand-scrub { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }

.hand-scrub-play { color: var(--warn); font-size: 0.85em; }

.half.near .zone-hand > .row-of-cards { translate: 0 9px; }

.zone-hand > .hand-scrub.before { left: 0; }
.zone-hand > .hand-scrub.after { right: 0; }


.room-page {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  padding: var(--step-5) var(--step-6) var(--step-7);
  background: var(--surface-ground);
  color: var(--ink-1);
}
.room-page > .notice.calm:empty { display: none; }
.room { display: grid; gap: var(--step-4); max-width: 1040px; margin: 0 auto; }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); flex-wrap: wrap; min-height: var(--touch); }

.room-title { margin: 0; font-size: var(--type-title); }
.room-title:focus { outline: none; }
.room-seats { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--step-4); align-items: stretch; }
.room-vs { align-self: center; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.room-seat {
  display: grid;
  gap: var(--step-3);
  align-content: start;
  padding: var(--step-4);
  border: 1px solid var(--line-1);
  border-radius: var(--round-2);
  background: var(--surface-1);
  min-width: 0;
}
.room-seat-you { border-color: var(--you); }
.room-seat-them { border-color: var(--opponent, var(--line-2)); }
.room-seat-them.empty { border-style: dashed; border-color: var(--line-2); }
.room-seat.is-ready { box-shadow: inset 0 0 0 2px var(--good); }
.room-seat-head { display: flex; gap: var(--step-2); align-items: baseline; }
.room-you { font-size: var(--type-tag); letter-spacing: 0.08em; text-transform: uppercase; color: var(--you); font-weight: 700; }
.room-name { font-weight: 650; font-size: var(--type-head); overflow-wrap: anywhere; }
.room-legend { display: flex; gap: var(--step-2); align-items: center; }
.room-legend.none { display: none; }
:where(.room-legend) { --dom: var(--line-2); --dom2: transparent; }
.room-legend .ur-ring { width: 32px; height: 32px; }

:where(.room-deck) { --row-bg: var(--surface-1); --row-bg-hi: var(--surface-2); --dom: var(--line-2); --dom2: transparent; display: flex; min-width: 0; }
.room-deck .ur-marks { grid-area: marks; }
.room-legend-name { color: var(--ink-2); }
.room-status { margin: 0; color: var(--ink-2); }
.room-status.bad { color: var(--bad); }
.room-pill.none { display: none; }
.room-ready { display: grid; gap: var(--step-2); justify-items: start; }
.room-ready > .ui-btn-lg { width: 100%; }
.room-ready-why { min-height: 1.3em; margin: 0; font-size: var(--type-body); color: var(--ink-2); }
.room-refused:empty { display: none; }
.room-banned { display: grid; gap: var(--step-1); }
.room-banned-line { margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.room-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-3); padding: var(--step-3) var(--step-4); border: 1px solid var(--line-1); border-radius: var(--round-2); }
.room-invite-head { font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.room-code { font: 600 var(--type-head) / 1.2 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.room-invite-line { flex-basis: 100%; margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.room-closed { display: grid; gap: var(--step-3); padding: var(--step-4); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); }
.room-closed.none { display: none; }
.room-closed p { margin: 0; }
.room-actions { display: flex; gap: var(--step-3); flex-wrap: wrap; }
.room.closed .room-seats { opacity: 0.6; }
.room-open { display: inline-flex; align-items: center; gap: var(--step-2); min-height: var(--touch); padding: 0 var(--step-3); border: 1px solid var(--line-1); border-radius: 999px; background: none; color: var(--ink-1); font: inherit; cursor: pointer; }
.room-switch { width: 34px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; }
.room-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-1); transition: transform var(--motion-2) var(--ease-standard); }
.room-open.on .room-switch { background: var(--ink-1); }
.room-open.on .room-switch::after { background: var(--surface-ground); transform: translateX(16px); }
.room.invited { max-width: 520px; }
@media (max-width: 760px) {
  
  .room-page { min-height: 0; padding: var(--step-4) var(--step-4) var(--step-6); }
  .room-seats { grid-template-columns: minmax(0, 1fr); }
  .room-vs { justify-self: center; }
  
  .room > .room-top { order: -3; }
  .room > .room-closed { order: -2; }
  .room > .room-invite { order: -1; }
  
  .room-code { flex-basis: 100%; font-size: 14px; white-space: nowrap; overflow-wrap: normal; overflow-x: auto; }
}

@media (min-width: 601px) {
  :root[data-compact] .room-page { padding: var(--step-3) var(--step-4); min-height: 0; }
  :root[data-compact] .room { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--step-3) var(--step-4); }
  :root[data-compact] .room > :not(.room-seats) { grid-column: 1; }
  :root[data-compact] .room > .room-seats { grid-column: 2; grid-row: 1 / span 5; grid-template-columns: minmax(0, 1fr); gap: var(--step-2); }
  :root[data-compact] .room-seat { padding: var(--step-3); gap: var(--step-2); }
  :root[data-compact] .room-vs { justify-self: center; }
}


.versus {
  position: fixed;
  inset: 0;
  z-index: var(--z-plate);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-6);
  background: var(--surface-ground);
  color: var(--ink-1);
  
  pointer-events: auto;
}
.versus-side { position: relative; display: grid; gap: var(--step-2); justify-items: center; min-width: 220px; padding: var(--step-5); border-radius: var(--round-2); background: var(--surface-1); }

.versus-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--line-2); pointer-events: none; }
.versus-side.you .versus-ring { border-color: var(--you); }
.versus-side.them .versus-ring { border-color: var(--opponent, var(--line-2)); }
.versus-name { font-size: var(--type-title); }
.versus-legend { color: var(--ink-2); }
.versus-vs { font-size: 40px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.versus-game { position: absolute; left: 0; right: 0; bottom: calc(var(--step-6) * 2); margin: 0; text-align: center; font-size: var(--type-read); color: var(--ink-2); }
@media (max-width: 760px) {
  .versus { flex-direction: column; gap: var(--step-4); }
  .versus-side { min-width: 0; width: calc(100% - 2 * var(--step-5)); }
}


.results {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: var(--step-4);
  padding: var(--step-5);
  background: var(--surface-ground);
  color: var(--ink-1);
  text-align: center;
}
.results-head { display: grid; gap: var(--step-2); }
.results-title { margin: 0; font-size: 48px; letter-spacing: 0.08em; text-transform: uppercase; }
.results-title:focus { outline: none; }
.results-won .results-title { color: var(--good); }
.results-lost .results-title { color: var(--bad); }
.results-line { margin: 0; color: var(--ink-2); font-size: var(--type-head); }
.results-plates { display: flex; gap: var(--step-6); align-items: center; }
.results-who { display: flex; align-items: baseline; gap: var(--step-3); }
.results-name { font-weight: 650; }
.results-legend-name { color: var(--ink-3); font-size: var(--type-note); }

.results-legends { display: flex; flex-wrap: wrap; max-width: 100%; gap: var(--step-6); justify-content: center; align-items: flex-start; }
.results-legend { display: grid; gap: var(--step-2); justify-items: center; }
.results-legend-art { width: clamp(88px, 12vh, 180px); height: auto; border-radius: var(--round-2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); }
.results-legend-who { font-weight: 650; }
.results-legend.lost { opacity: 0.7; }
.results-legend.won .results-legend-art { box-shadow: 0 0 0 2px var(--good), 0 10px 28px rgba(0, 0, 0, 0.4); }
.results-timeline-block { display: grid; gap: var(--step-2); justify-items: center; width: 100%; min-width: 0; }
.results-timeline { display: flex; align-items: flex-end; gap: 2px; height: clamp(40px, 6vh, 80px); padding-top: 1px; border-top: 1px solid var(--line-2); width: 100%; justify-content: center; }
.tl-turn { display: flex; align-items: flex-end; gap: 1px; flex: 0 1 22px; min-width: 0; height: 100%; }
.tl-bar { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.tl-bar.you { background: var(--you); }
.tl-bar.them { background: var(--opponent); }
.results-decider { margin: 0; color: var(--ink-2); font-size: var(--type-head); }
.results-points { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.results-who.you .results-points { color: var(--you); }
.results-who.them .results-points { color: var(--opponent); }
.results-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-6); margin: 0; }
.results-stat dt { font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.results-stat dd { margin: var(--step-1) 0 0; font-size: var(--type-title); font-weight: 650; }
.results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-3); }
.results-actions .ui-btn-lg { min-width: 180px; }
.results-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--step-3); }
.results-bug { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--ink-2); }
.results-bug-note { margin: 0; color: var(--ink-3); font-size: var(--type-note); }
@media (max-height: 960px) {
  .results { gap: var(--step-3); }
  .results-title { font-size: 40px; }
  
  .results:has(.results-actions-run) .results-legend-art { width: clamp(72px, 9vh, 140px); }
}
@media (max-width: 600px) {
  
  .results:has(.results-legend-art) .results-legend-name { display: none; }
  .results-title { font-size: 34px; }
  .results-mark { width: 64px; margin-bottom: 0; }
  .results-legend-art { width: 56px; }
  .results-timeline { height: 40px; }
  .results { padding: var(--step-4); }
  .results-plates { gap: var(--step-4); }
}







.table { height: calc(100vh - var(--shell-h) - var(--footer-h)); height: calc(100dvh - var(--shell-h) - var(--footer-h)); }
.lobby { min-height: calc(100vh - var(--shell-h) - var(--footer-h)); }








.stage {
  --stage-veil-in: var(--mat-veil-in);
  --stage-veil-out: var(--mat-veil-out);
  background:
    repeating-linear-gradient(45deg, var(--mat-weave) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--mat-weave) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 50%, var(--stage-veil-in) 0%, var(--stage-veil-out) 100%);
  border-color: var(--table-edge);
  box-shadow: inset 0 1px 0 var(--mat-stage-lit), inset 0 0 0 1px var(--mat-stage-rim);
}

.playmat {
  background: linear-gradient(180deg, transparent 0%, var(--playmat) 22%);
}
.felt {
  background:
    radial-gradient(70% 55% at 42% 50%, var(--mat-felt-glow) 0%, transparent 100%),
    linear-gradient(180deg, var(--felt-top) 0%, var(--felt-0) 42%, var(--felt-bottom) 100%);
}


.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.scene > * { position: absolute; pointer-events: none; }

.scene-sheen {
  inset: -10% -60%;
  background: linear-gradient(105deg, transparent 38%, var(--mat-sheen) 50%, transparent 62%);
  will-change: transform;
  animation: scene-sheen 26s var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-130);
}

.scene-drift {
  inset: -30%;
  background:
    radial-gradient(28% 22% at 32% 38%, var(--mat-shade), transparent 72%),
    radial-gradient(24% 20% at 68% 64%, var(--mat-shade), transparent 72%);
  will-change: transform;
  animation: scene-drift 64s var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-128);
}

.scene-depth {
  left: -3%;
  right: -3%;
  top: 50%;
  height: 34%;
  transform: translateY(-50%);
  will-change: transform;
  animation: scene-depth 38s var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-76);
}
.scene-depth > * { position: absolute; inset: 0; }

.scene-rift {
  background: var(--rift-light);
  opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='1.6' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='1' stroke-opacity='0.55' d='M285 46L315 7L314 -24M534 73L524 110L548 146M713 79L735 40L783 7M317 82L299 124L307 160M602 87L612 58L598 37M168 37L147 12M804 73L861 72'/></g></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='1.6' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='1' stroke-opacity='0.55' d='M285 46L315 7L314 -24M534 73L524 110L548 146M713 79L735 40L783 7M317 82L299 124L307 160M602 87L612 58L598 37M168 37L147 12M804 73L861 72'/></g></svg>") center / 100% 100% no-repeat;
  animation: scene-flicker 9s var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-90);
}

.scene-glow {
  background-color: var(--rift-glow);
  
  transition: background-color var(--motion-5) var(--ease-standard);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='64' stroke-opacity='0.07' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='34' stroke-opacity='0.12' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='16' stroke-opacity='0.22' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='7' stroke-opacity='0.4' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/></g></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='64' stroke-opacity='0.07' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='34' stroke-opacity='0.12' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='16' stroke-opacity='0.22' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='7' stroke-opacity='0.4' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/></g></svg>") center / 100% 100% no-repeat;
  will-change: opacity;
  animation: scene-breathe 7s var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-70);
}
.scene[data-turn="you"] .scene-glow { background-color: color-mix(in oklch, var(--rift-glow) 62%, var(--you)); }
.scene[data-turn="them"] .scene-glow { background-color: color-mix(in oklch, var(--rift-glow) 72%, var(--opponent)); }

.scene-motes { left: 0; right: 0; top: 50%; height: 0; }
.scene-motes > i {
  position: absolute;
  left: var(--mote-x);
  top: 0;
  width: var(--mote-s);
  height: var(--mote-s);
  border-radius: 50%;
  background: var(--mat-accent);
  box-shadow: 0 0 6px 1px var(--rift-glow);
  opacity: 0;
  will-change: transform, opacity;
  
  animation: var(--mote-move) var(--mote-t) steps(var(--mote-n)) var(--mote-d) infinite, var(--mote-fade) var(--mote-t) linear var(--mote-d) infinite;
}
@keyframes scene-sheen { from { transform: translateX(-26%); } to { transform: translateX(26%); } }
@keyframes scene-drift { from { transform: translate(-5%, 2%) scale(1); } to { transform: translate(5%, -2%) scale(1.06); } }
@keyframes scene-depth { from { transform: translate(-1.2%, -51.5%); } to { transform: translate(1.2%, -48.5%); } }
@keyframes scene-breathe { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes scene-flicker { from { opacity: 0.62; } to { opacity: 0.92; } }
@keyframes mote-up { to { transform: translate(18px, -150px); } }
@keyframes mote-down { to { transform: translate(-14px, 130px); } }

@keyframes mote-fade-a-12 { 0% { opacity: 0; animation-timing-function: steps(12); } 10% { opacity: .75; animation-timing-function: steps(72); } 70% { opacity: .35; animation-timing-function: steps(36); } 100% { opacity: 0; } }
@keyframes mote-fade-a-13 { 0% { opacity: 0; animation-timing-function: steps(13); } 10% { opacity: .75; animation-timing-function: steps(78); } 70% { opacity: .35; animation-timing-function: steps(39); } 100% { opacity: 0; } }
@keyframes mote-fade-a-14 { 0% { opacity: 0; animation-timing-function: steps(14); } 10% { opacity: .75; animation-timing-function: steps(84); } 70% { opacity: .35; animation-timing-function: steps(42); } 100% { opacity: 0; } }
@keyframes mote-fade-a-15 { 0% { opacity: 0; animation-timing-function: steps(15); } 10% { opacity: .75; animation-timing-function: steps(90); } 70% { opacity: .35; animation-timing-function: steps(45); } 100% { opacity: 0; } }
@keyframes mote-fade-a-16 { 0% { opacity: 0; animation-timing-function: steps(16); } 10% { opacity: .75; animation-timing-function: steps(96); } 70% { opacity: .35; animation-timing-function: steps(48); } 100% { opacity: 0; } }
@keyframes mote-fade-a-17 { 0% { opacity: 0; animation-timing-function: steps(17); } 10% { opacity: .75; animation-timing-function: steps(102); } 70% { opacity: .35; animation-timing-function: steps(51); } 100% { opacity: 0; } }
@keyframes mote-fade-a-18 { 0% { opacity: 0; animation-timing-function: steps(18); } 10% { opacity: .75; animation-timing-function: steps(108); } 70% { opacity: .35; animation-timing-function: steps(54); } 100% { opacity: 0; } }
@keyframes mote-fade-a-19 { 0% { opacity: 0; animation-timing-function: steps(19); } 10% { opacity: .75; animation-timing-function: steps(114); } 70% { opacity: .35; animation-timing-function: steps(57); } 100% { opacity: 0; } }
@keyframes mote-fade-a-20 { 0% { opacity: 0; animation-timing-function: steps(20); } 10% { opacity: .75; animation-timing-function: steps(120); } 70% { opacity: .35; animation-timing-function: steps(60); } 100% { opacity: 0; } }
@keyframes mote-fade-b-12 { 0% { opacity: 0; animation-timing-function: steps(12); } 10% { opacity: .7; animation-timing-function: steps(72); } 70% { opacity: .3; animation-timing-function: steps(36); } 100% { opacity: 0; } }
@keyframes mote-fade-b-13 { 0% { opacity: 0; animation-timing-function: steps(13); } 10% { opacity: .7; animation-timing-function: steps(78); } 70% { opacity: .3; animation-timing-function: steps(39); } 100% { opacity: 0; } }
@keyframes mote-fade-b-14 { 0% { opacity: 0; animation-timing-function: steps(14); } 10% { opacity: .7; animation-timing-function: steps(84); } 70% { opacity: .3; animation-timing-function: steps(42); } 100% { opacity: 0; } }
@keyframes mote-fade-b-15 { 0% { opacity: 0; animation-timing-function: steps(15); } 10% { opacity: .7; animation-timing-function: steps(90); } 70% { opacity: .3; animation-timing-function: steps(45); } 100% { opacity: 0; } }
@keyframes mote-fade-b-16 { 0% { opacity: 0; animation-timing-function: steps(16); } 10% { opacity: .7; animation-timing-function: steps(96); } 70% { opacity: .3; animation-timing-function: steps(48); } 100% { opacity: 0; } }
@keyframes mote-fade-b-17 { 0% { opacity: 0; animation-timing-function: steps(17); } 10% { opacity: .7; animation-timing-function: steps(102); } 70% { opacity: .3; animation-timing-function: steps(51); } 100% { opacity: 0; } }
@keyframes mote-fade-b-18 { 0% { opacity: 0; animation-timing-function: steps(18); } 10% { opacity: .7; animation-timing-function: steps(108); } 70% { opacity: .3; animation-timing-function: steps(54); } 100% { opacity: 0; } }
@keyframes mote-fade-b-19 { 0% { opacity: 0; animation-timing-function: steps(19); } 10% { opacity: .7; animation-timing-function: steps(114); } 70% { opacity: .3; animation-timing-function: steps(57); } 100% { opacity: 0; } }
@keyframes mote-fade-b-20 { 0% { opacity: 0; animation-timing-function: steps(20); } 10% { opacity: .7; animation-timing-function: steps(120); } 70% { opacity: .3; animation-timing-function: steps(60); } 100% { opacity: 0; } }

:root[data-scene="off"] .scene { display: none; }

:root[data-scene="lights"] :is(.scene-sheen, .scene-drift, .scene-motes) { display: none; }
:root[data-scene="lights"] .scene-depth,
:root[data-scene="lights"] .scene-depth > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .scene *,
  :root:not([data-motion="full"]) .scene-depth { animation: none; }
}
:root[data-motion="reduce"] .scene *,
:root[data-motion="reduce"] .scene-depth { animation: none; }

.scene-depth { transition: opacity var(--motion-5) var(--ease-standard); }
.scene[data-link="down"] .scene-depth { opacity: 0.4; animation: none; }
.scene[data-link="down"] .scene-depth > * { animation: none; }
.scene[data-link="down"] .scene-motes { display: none; }



.zone { --bracket: 13px; }
.zone {
  background-image:
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink)),
    linear-gradient(var(--mat-ink), var(--mat-ink));
}
.zone-base { background-color: var(--mat-base); }


.battlefield {
  --bracket: 18px;
  border-radius: 3px;
  background:
    linear-gradient(var(--mat-ink), var(--mat-ink)) left top / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) left top / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) right top / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) right top / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) left bottom / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) left bottom / 1px var(--bracket) no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) right bottom / var(--bracket) 1px no-repeat,
    linear-gradient(var(--mat-ink), var(--mat-ink)) right bottom / 1px var(--bracket) no-repeat,
    radial-gradient(90% 80% at 50% 50%, var(--mat-territory-in) 0%, var(--mat-territory-out) 100%);
  box-shadow: inset 0 0 0 1px var(--mat-territory-rim);
}

.battlefield.control-none { box-shadow: inset 0 0 0 1px var(--mat-territory-rim); }

.field-hum {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.table[data-me="0"] .battlefield.control-0 > .field-hum,
.table[data-me="1"] .battlefield.control-1 > .field-hum {
  opacity: 1;
  background: radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--you) 12%, transparent), transparent 72%);
  animation: field-hum var(--light-hum) var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-55);
}
.table[data-me="0"] .battlefield.control-1 > .field-hum,
.table[data-me="1"] .battlefield.control-0 > .field-hum {
  opacity: 1;
  background: radial-gradient(80% 60% at 50% 50%, color-mix(in oklch, var(--opponent) 8%, transparent), transparent 72%);
  animation: field-hum var(--light-hum) var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-55);
}
@keyframes field-hum {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

:root[data-motion="reduce"] .table[data-me] .battlefield[data-battlefield] > .field-hum,
:root[data-scene="off"] .table[data-me] .battlefield[data-battlefield] > .field-hum { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .table[data-me] .battlefield[data-battlefield] > .field-hum { animation: none; }
}
.table[data-me="0"] .battlefield.control-0,
.table[data-me="1"] .battlefield.control-1 {
  box-shadow:
    inset 0 0 0 1px var(--mat-territory-rim),
    inset 0 0 36px color-mix(in oklch, var(--you) 22%, transparent),
    0 0 0 2px var(--you),
    0 0 16px 1px color-mix(in oklch, var(--you) 55%, transparent);
}
.table[data-me="0"] .battlefield.control-1,
.table[data-me="1"] .battlefield.control-0 {
  box-shadow:
    inset 0 0 0 1px var(--mat-territory-rim),
    inset 0 0 36px color-mix(in oklch, var(--opponent) 22%, transparent),
    0 0 0 2px var(--opponent),
    0 0 16px 1px color-mix(in oklch, var(--opponent) 55%, transparent);
}
.battlefield-seam { background: oklch(90% 0.03 292 / 0.16); box-shadow: none; }


.totem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--step-2);
  row-gap: 2px;
  background: var(--mat-plate);
  border-radius: var(--round-2);
}
.totem > .totem-name { grid-column: 1; grid-row: 1; }
.totem > .totem-line,
.totem > .totem-thinking { grid-column: 1; }
.totem > .totem-score { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.totem.mine { box-shadow: inset 0 1px 0 var(--mat-plate-hi), 0 0 0 1px color-mix(in oklch, var(--you) 55%, transparent); }
.totem:not(.mine) { box-shadow: inset 0 1px 0 var(--mat-plate-hi-soft), 0 0 0 1px color-mix(in oklch, var(--opponent) 55%, transparent); }
.totem.mine.active-turn { box-shadow: inset 0 1px 0 var(--mat-plate-hi), 0 0 0 2px var(--you), 0 0 18px 2px color-mix(in oklch, var(--you) 50%, transparent); }
.totem:not(.mine).active-turn { box-shadow: inset 0 1px 0 var(--mat-plate-hi-soft), 0 0 0 2px var(--opponent), 0 0 18px 2px color-mix(in oklch, var(--opponent) 50%, transparent); }
.totem-name {
  font-family: var(--font-display);
  font-weight: 700;
  
  font-size: max(14px, var(--stage-word));
  letter-spacing: var(--track-display);
}
.totem-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--table-text);
}
.totem.mine .totem-score-n { color: var(--you-ink); }

.totem-score { position: relative; overflow: hidden; }
.totem-score > .score-old,
.totem-score > .score-twin { position: absolute; inset: 0; display: block; }
.totem-score > .score-twin { color: var(--ink-1); text-shadow: 0 0 6px var(--score-light, var(--you)); opacity: 0; }

@property --think-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.totem-thinking.has-ring {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  --think-total: 3000ms;
  --think-elapsed: 0ms;
}
.totem-think-word { font-size: 11px; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; }
.totem-think-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--ink-2) calc(var(--think-p) * 1turn), color-mix(in oklch, var(--ink-2) 18%, transparent) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: think-fill var(--think-total) linear forwards;
  animation-delay: calc(var(--think-elapsed) * -1);
}
@keyframes think-fill {
  from { --think-p: 0; }
  to { --think-p: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .totem-think-ring { animation: none; --think-p: 1; }
}
:root[data-motion="reduce"] .totem-think-ring { animation: none; --think-p: 1; }
.score-ladder-name { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); }
.turn-number { font-family: var(--font-display); }



.half.near .card.at-hand[data-hand-card]:not(.hidden)::before {
  box-shadow: 0 6px 14px oklch(6% 0.02 274 / 0.55);
}
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover::before {
  box-shadow: 0 18px 30px oklch(6% 0.02 274 / 0.7);
}

.half.near .card.at-hand.lifted[data-hand-card]:not(.hidden)::before,
.half.near .card.at-hand.lifted[data-hand-card]:not(.hidden):hover::before {
  box-shadow: none;
}
.half.near .card.at-hand.payable[data-hand-card]:not(.hidden):not(.lifted)::before {
  box-shadow: 0 0 0 1px var(--decide), 0 0 14px 2px var(--decide-wash), 0 6px 14px oklch(6% 0.02 274 / 0.55);
}
.half.near .card.at-hand.payable[data-hand-card]:not(.hidden):not(.lifted):hover::before {
  box-shadow: 0 0 0 2px var(--decide), 0 0 26px 6px var(--decide-wash), 0 18px 30px oklch(6% 0.02 274 / 0.7);
}


.side { background: linear-gradient(180deg, oklch(17.5% 0.02 274) 0%, var(--surface-ground) 60%); }
.side-right { border-left-color: oklch(30% 0.02 274); }

.side > .chain.dock {
  position: relative;
  isolation: isolate;
}
.side > .chain.dock::before {
  content: "";
  position: absolute;
  inset: 14px 8% 0;
  z-index: -1;
  border-radius: 50% 50% 12px 12px / 22% 22% 12px 12px;
  background: linear-gradient(180deg, oklch(80% 0.04 274 / 0.13) 0%, oklch(80% 0.04 274 / 0.04) 55%, transparent 100%);
  pointer-events: none;
}
.dock-lead.is-me { box-shadow: inset 0 0 0 2px var(--you), 0 6px 16px oklch(5% 0.02 274 / 0.5); }
.dock-lead.is-them { box-shadow: inset 0 0 0 2px var(--opponent), 0 6px 16px oklch(5% 0.02 274 / 0.5); }
.dock-lead.pending { box-shadow: none; }
.dock-strip {
  padding-left: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--you) 60%, transparent);
}
.dock-strip.is-them { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--opponent) 60%, transparent); }
.dock-strip.pending { box-shadow: none; outline: 1px dashed var(--you); outline-offset: -1px; }
.dock-strip.pending.is-them { outline-color: var(--opponent); }
.dock-strip:nth-child(n + 2) { background: var(--surface-chain-2); }
.dock-strip:nth-child(n + 4) { background: var(--surface-chain-3); }


.side > .panel.decide { background: oklch(19.5% 0.02 274); border-color: oklch(30% 0.02 274); }
.panel.decide.mine {
  box-shadow: 0 0 0 2px var(--decide), 0 0 28px 4px var(--decide-wash), inset 0 0 40px var(--decide-wash);
}


.arrow-glow { opacity: 0.34; }

.arrow.locked .arrow-glow { stroke-width: 14; opacity: 0.3; }
.arrow-head-mark { stroke: oklch(10% 0.02 274 / 0.85); stroke-width: 1.5; paint-order: stroke; }



:is(.side, .side-region) > .panel.log { background: transparent; border-color: transparent; border-top-color: oklch(30% 0.02 274); border-radius: 0; }
.log-bar { align-self: flex-start; height: 14px; margin-top: 3px; border-radius: 2px; }

.cardmenu {
  background: linear-gradient(180deg, oklch(23% 0.02 274), oklch(19% 0.02 274));
  border-color: oklch(34% 0.02 274);
  box-shadow: inset 0 1px 0 oklch(95% 0.01 274 / 0.07), var(--win-shadow);
}

.preview-pane > .cf-large, .preview-pane > .cf-duo > :is(.cf-large, .cf-tr) { box-shadow: 0 0 0 1px oklch(40% 0.02 274 / 0.6), 0 20px 44px oklch(5% 0.02 274 / 0.75); }

.field-banner-word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; }


.room-page,
.results {
  --rift-light: oklch(86% 0.07 292);
  --rift-glow: oklch(66% 0.13 292 / 0.85);
  position: relative;
  isolation: isolate;
  
  overflow-x: clip;
  background:
    repeating-linear-gradient(45deg, oklch(80% 0.02 274 / 0.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, oklch(80% 0.02 274 / 0.03) 0 1px, transparent 1px 4px),
    radial-gradient(80% 60% at 50% 40%, oklch(20% 0.026 278) 0%, var(--surface-ground) 100%);
}
.room-page::before,
.results::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 26%;
  z-index: -1;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.5;
  background: var(--rift-glow);
}
.room-page::before,
.results::before {
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='34' stroke-opacity='0.08' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='10' stroke-opacity='0.22' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='1.5' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/></g></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 1000 220' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-linejoin='round' stroke-linecap='round'><path vector-effect='non-scaling-stroke' stroke-width='34' stroke-opacity='0.08' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='10' stroke-opacity='0.22' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/><path vector-effect='non-scaling-stroke' stroke-width='1.5' d='M0 50L168 37L285 46L317 82L431 81L534 73L602 87L713 79L804 73L931 61L1000 50'/></g></svg>") center / 100% 100% no-repeat;
}
.results::before { top: 84%; }

.room-page::before { top: 206px; }

.room-title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); }
.room-seat {
  background: linear-gradient(180deg, oklch(22% 0.02 274 / 0.94), oklch(17% 0.02 274 / 0.94));
  box-shadow: inset 0 1px 0 oklch(95% 0.01 274 / 0.06), 0 12px 28px oklch(5% 0.02 274 / 0.5);
}
.room-seat-you { background: linear-gradient(180deg, var(--you-wash), transparent 45%), linear-gradient(180deg, oklch(22% 0.02 274 / 0.94), oklch(17% 0.02 274 / 0.94)); }
.room-seat-them:not(.empty) { background: linear-gradient(180deg, var(--opponent-wash), transparent 45%), linear-gradient(180deg, oklch(22% 0.02 274 / 0.94), oklch(17% 0.02 274 / 0.94)); }
.room-seat-them.empty { background: oklch(12% 0.02 274 / 0.55); box-shadow: none; }
.room-seat.is-ready { box-shadow: inset 0 0 0 2px var(--good), 0 12px 28px oklch(5% 0.02 274 / 0.5); }
.room-name { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); }
.room-vs { font-size: var(--type-head); color: var(--ink-2); }

.room-invite { background: oklch(12% 0.02 274 / 0.7); border-color: oklch(30% 0.02 274); }
@media (min-width: 600px) { .room-code { font-size: var(--type-title); letter-spacing: 0.04em; } }


.results-title { font-family: var(--font-display); font-weight: 700; font-size: 56px; }

.results-tear { position: relative; }
.results-rift {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rift-light) 30%, rgba(255, 255, 255, 0.9) 50%, var(--rift-light) 70%, transparent);
  box-shadow: 0 0 14px var(--rift-glow);
  opacity: 0.6;
}
.results-who { padding: var(--step-2) var(--step-4); border-radius: var(--round-pill); }
.results-won .results-who.you { --ring: var(--you); }
.results-lost .results-who.them { --ring: var(--opponent); }
.results-won .results-who.you,
.results-lost .results-who.them { box-shadow: 0 0 0 2px var(--ring), 0 0 24px 2px color-mix(in oklch, var(--ring) 45%, transparent); }

@media (max-width: 1100px) {
  .decide-main { padding-right: 52px; padding-left: var(--step-2); }
}


.table {
  --card-back-ink: oklch(65.5% 0.038 276.4 / 0.7);
  --card-back-emblem: url("../brand/card-back.svg");
  
  --card-back-deck: var(--card-back);
  --card-back:
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) left 6% top 5% / 12% 2px no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) left 6% top 5% / 2px 9% no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) right 6% top 5% / 12% 2px no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) right 6% top 5% / 2px 9% no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) left 6% bottom 5% / 12% 2px no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) left 6% bottom 5% / 2px 9% no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) right 6% bottom 5% / 12% 2px no-repeat,
    linear-gradient(var(--card-back-ink), var(--card-back-ink)) right 6% bottom 5% / 2px 9% no-repeat,
    var(--card-back-emblem) center / 84% auto no-repeat,
    repeating-linear-gradient(45deg, oklch(65.5% 0.038 276.4 / 0.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(135deg, oklch(65.5% 0.038 276.4 / 0.05) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 47%, oklch(29.8% 0.017 270.8) 0%, oklch(20% 0.02 274) 45%, oklch(15.2% 0.020 274.1) 100%);
}
.table[data-shape="tall"] .stage { --card-back-emblem: url("../brand/card-back-small.svg"); }

.cf > .hidden-veil { position: absolute; inset: 0; z-index: 3; background: var(--scrim); transition: opacity var(--motion-1) var(--ease-inout); pointer-events: none; }
.cf > .hidden-back { position: absolute; left: 14%; top: 14%; width: 86%; height: 86%; z-index: 4; border-radius: var(--round-1); background: var(--card-back); box-shadow: -2px -2px 8px oklch(5% 0.02 274 / 0.6), inset 0 0 0 1px oklch(65.5% 0.038 276.4 / 0.3); pointer-events: none; transition: translate var(--motion-1) var(--ease-standard); }
.hidden-word { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; padding: 1px 6px; border-radius: var(--round-pill); background: oklch(15.2% 0.02 274.1 / 0.8); color: var(--table-text); font: 400 calc(11px / var(--fit, 1)) / 1.3 var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.card.is-hidden-card:is(:hover, :focus-within) .hidden-back { translate: 10% 10%; }
.card.is-hidden-card:is(:hover, :focus-within) .hidden-veil { opacity: 0.55; }

.card.hidden.hidden-slot { background: none; box-shadow: none; }
.hidden-slot > .hidden-plate { position: absolute; inset: 0; border: 1px dashed var(--ink-soft); border-radius: var(--round-1); background: rgba(7, 19, 47, 0.42); }
.hidden-slot > .hidden-back { position: absolute; left: 14%; top: 14%; width: 86%; height: 86%; border-radius: var(--round-1); background: var(--card-back); box-shadow: -2px -2px 8px oklch(5% 0.02 274 / 0.6), inset 0 0 0 1px oklch(65.5% 0.038 276.4 / 0.3); }
@keyframes hidden-back-on { from { translate: 20% 20%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes hidden-back-lift { from { transform: rotateY(0deg); translate: 0 0; opacity: 1; } to { transform: rotateY(90deg); translate: 20% 20%; opacity: 0; } }
.card.hiding-in .hidden-back, .card.is-hiding .hidden-back { animation: hidden-back-on var(--motion-2) var(--ease-standard) both; }
.card.hidden.hiding-in, .card.is-hidden-card.hiding-in { animation: none; }
.hidden-back.lifting { animation: hidden-back-lift var(--motion-2) var(--ease-standard) both; transform-origin: 100% 50%; }
:root[data-motion="reduce"] .hidden-back.lifting { animation: none; opacity: 0; transition: opacity var(--motion-1); }


.pile-tab { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; appearance: none; font: 850 13px / 1 var(--font-ui); font-size: max(13px, var(--stage-word)); font-variant-numeric: tabular-nums; color: var(--table-text); background: linear-gradient(180deg, oklch(23% 0.02 274), oklch(19% 0.02 274)); border: 1px solid oklch(34% 0.02 274); border-radius: var(--round-1); box-shadow: inset 0 1px 0 oklch(95% 0.01 274 / 0.07); z-index: 6; cursor: pointer; transition: background var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-standard); }
.pile-tab-glyph { width: 16px; height: 16px; color: var(--table-dim); transition: color var(--motion-1) var(--ease-inout); }
@media (hover: hover) { .pile-tab:hover { background: linear-gradient(180deg, oklch(27% 0.02 274), oklch(23% 0.02 274)); } }
.pile-tab:focus-visible .pile-tab-glyph { color: var(--table-text); }
@media (hover: hover) { .pile-tab:hover .pile-tab-glyph { color: var(--table-text); } }
.pile-tab:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.pile-tab:active { scale: var(--tap); transition-duration: 0s; }
.pile-tab[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink-1); }
.pile-tab.is-empty { cursor: default; }
.table:is([data-shape="tall"], [data-shape="short"]) .pile-tab { font-size: var(--tall-count); }


.ask-tray-ends { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--step-4); width: 92%; font-size: var(--type-tag); text-transform: uppercase; letter-spacing: 0.08em; color: var(--table-dim); margin: 0 0 var(--step-1); }
.ask-tray-ends > :last-child { margin-left: auto; }
.ask-tray { position: relative; --gap-x: 0px; }
.ask-tray.has-gap::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gap-x); width: 3px; translate: -50% 0; border-radius: 2px; background: var(--decide-ink); pointer-events: none; }
.ask-tray-card.is-dragging { opacity: 0.4; }

.predict-card {
  --ask-i: 0;
  position: relative;
  flex: 0 0 clamp(97px, calc((100% - (var(--n) - 1) * var(--step-3)) / var(--n)), calc(var(--dock-face) * 1.6));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  cursor: grab;
  animation: ask-deal-near var(--motion-3) var(--ease-emphasis) both;
  animation-delay: calc(var(--ask-i) * var(--motion-1) * 0.75);
}
.predict-card > .ask-tray-card { flex: none; width: 100%; cursor: inherit; animation: none; }
.predict-card.recycled > .ask-tray-card { opacity: 0.55; filter: grayscale(0.6); }
.predict-card.is-dragging { opacity: 0.4; }
.predict-card > .ask-badge { position: absolute; top: calc(var(--step-2) * -1); left: calc(var(--step-2) * -1); z-index: 2; }
.predict-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-1); }
.predict-btn {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--step-2);
  border: 2px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font-size: var(--type-note);
  font-weight: 800;
  cursor: pointer;
}
@media (hover: hover) { .predict-btn:hover:not([aria-disabled="true"]) { border-color: var(--ink-2); } }
.predict-empty { align-self: center; color: var(--table-dim); font-size: var(--type-note); padding: var(--step-4) 0; }
.predict-recycle-title { margin-top: var(--step-2); }

.ask-trigger-label {
  display: block;
  margin-top: var(--step-2);
  font-size: var(--type-note);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-1);
  text-align: center;
  overflow-wrap: anywhere;
}

.ask-trigger-label > .ask-trigger-from { display: block; font-weight: 600; color: var(--ink-2); }

.ask-tray-card { position: relative; }
.ask-tray-card > .ask-order-num {
  position: absolute;
  z-index: 3;
  top: -0.3em;
  left: -0.3em;
  display: grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.22em;
  box-sizing: border-box;
  border: max(2px, var(--num-rim-w)) solid var(--decide);
  border-radius: 0.36em;
  background: var(--gem-fill);
  box-shadow: var(--num-lift), 0 0.12em 0.45em rgba(1, 7, 18, 0.6);
  color: var(--ink-1);
  font-family: var(--font-numeral);
  font-size: 24px;
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}
:root[data-input="touch"] .ask-tray-card > .ask-order-num { font-size: 22px; }
.dock-order-n {
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.2em;
  box-sizing: border-box;
  border: max(1.5px, var(--num-rim-w)) solid var(--decide);
  border-radius: 0.36em;
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--ink-1);
  font-family: var(--font-numeral);
  font-size: 12px;
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.stops-rows > .stops-triggers { position: relative; margin-top: var(--step-2); }
.stops-rows > .stops-triggers::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--step-2) / -2 - 1px);
  height: 1px;
  background: var(--line-1);
  pointer-events: none;
}

.lookpick-card {
  --ask-i: 0;
  position: relative;
  flex: 0 0 clamp(97px, calc((100% - (var(--n) - 1) * var(--step-3)) / var(--n)), calc(var(--dock-face) * 1.6));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  animation: ask-deal-near var(--motion-3) var(--ease-emphasis) both;
  animation-delay: calc(var(--ask-i) * var(--motion-1) * 0.75);
}
.lookpick-card > .ask-tray-card { flex: none; width: 100%; border-radius: var(--round-2); animation: none; }
.lookpick-card.offered > .ask-tray-card { outline: 2px solid var(--line-2); outline-offset: 2px; cursor: pointer; }
.lookpick-card.offered:hover > .ask-tray-card { outline-color: var(--decide); }
.lookpick-card.taken > .ask-tray-card { outline: 3px solid var(--decide); outline-offset: 2px; }
.lookpick-card.dimmed > .ask-tray-card { opacity: 0.45; filter: grayscale(0.6); }
.lookpick-card .predict-btn[aria-pressed="true"] { border-color: var(--ink-2); }
.lookpick-note { color: var(--table-dim); font-size: var(--type-note); min-height: var(--touch); display: inline-flex; align-items: center; }

.cardmenu-ability { display: grid; grid-template-columns: auto 1fr; column-gap: var(--step-2); row-gap: 2px; align-items: start; text-align: left; }
.cardmenu-cost { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 20px; }

.cardmenu-cost > .cm-menu { font-size: 13px; flex-wrap: wrap; white-space: normal; }

.cardmenu-cost > .cm-menu > :is(.cm-sep, .cm-colon) { margin-left: -3px; color: var(--ink-2); }
.cardmenu-what { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cardmenu-words { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardmenu-words.dim { color: var(--ink-2); }

.cardmenu-from { flex-basis: 100%; font-size: var(--type-note); color: var(--ink-2); }
.cardmenu-reason { grid-column: 2; font-size: var(--type-note); color: var(--ink-2); }
.cardmenu-ability[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
@media (hover: hover) { .cardmenu-ability[aria-disabled="true"]:hover { background: none; } }

.cardmenu-item.is-blocked { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; color: var(--ink-3); cursor: not-allowed; }
.card-menu .card-menu-items > .cardmenu-item.is-blocked:first-child { background: none; font-weight: inherit; }
@media (hover: hover) { .cardmenu-item.is-blocked:hover { background: none; font-weight: inherit; } }
.cardmenu-item.is-blocked > .cardmenu-reason { grid-column: auto; }

:root[data-input="touch"] .table :is(.stage, .hand-dock, .card-window) { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }


.card-menu.is-sheet { z-index: var(--z-sheet); position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 45dvh; overflow-y: auto; border-radius: var(--round-2) var(--round-2) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }

.cardmenu-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); }
.card-menu.is-sheet .cardmenu-item { min-height: 48px; font-size: var(--touch-floor-ui); }
.card-menu-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--step-3); align-items: center; padding: var(--step-3) var(--step-4); }

.card-menu-face { min-width: 0; }
.card-menu-face > .cf { width: 64px; }


.table > .look.card-look.is-sheet { inset: auto 0 0 0; margin: 0; width: auto; max-height: calc(100dvh - 24px); border-radius: var(--round-2) var(--round-2) 0 0; padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px)); }
.card-look.is-sheet .cf-large { width: min(calc(100vw - 32px), 360px); margin-inline: auto; }
.card-look.is-sheet .cf-key { min-height: var(--touch); }

.card-look > .look-marks { list-style: none; margin: 0; padding: 0; width: min(360px, 100%); display: grid; gap: var(--step-2); }
.look-marks > li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--step-2); }
.look-marks .mark-seal { --seal: 20px; pointer-events: none; }
.look-mark-name { font: 600 var(--type-note) var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-1); }
.look-mark-text { display: block; color: var(--ink-2); font-size: var(--type-note); }
.card-look.is-sheet .look-marks > li { min-height: var(--touch); }

.preview-tags { list-style: none; margin: var(--step-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--step-2); }
.preview-tag { display: inline-flex; align-items: center; gap: var(--step-1); }
.preview-tag .mark-seal { --seal: 20px; pointer-events: none; }
.preview-tag-name { font: 600 var(--type-note) var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-1); }
.card-look.is-sheet .act { min-height: var(--touch); width: 100%; }


.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-hand { font-size: var(--tall-word, var(--stage-word)); color: var(--ink-2); }


.hand-dock { display: flex; gap: 0; align-items: end; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: calc(var(--step-2) + var(--touch) + var(--step-1)); scrollbar-width: none; height: var(--tall-dock, 104px); flex: none; order: 0; padding: 0 var(--step-2); }
.hand-dock::-webkit-scrollbar { display: none; }
.hand-dock-slot { flex: none; width: 72px; height: 94px; margin-right: var(--step-1); scroll-snap-align: start; position: relative; }
.hand-dock-slot > .card.at-hand { position: relative; left: 0; top: 0; width: 72px; height: 94px; }
.hand-dock-count { position: sticky; left: 0; z-index: 2; flex: none; align-self: center; min-width: var(--touch); min-height: var(--touch); display: grid; place-items: center; font: 800 var(--touch-floor-ui) var(--font-ui); background: var(--surface-1); border-radius: var(--round-2); margin-right: var(--step-1); }


.panel.decide.is-dock .decide-top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); }
.panel.decide.is-dock .decide-top > .decide-said { flex: 1 1 auto; }

.panel.decide.is-dock > .decide-body { margin-top: var(--step-2); }
.panel.decide.is-dock :is(.decide-yield, .decide-stops-toggle) { flex: none; width: auto; height: var(--touch); min-width: var(--touch); padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1); font: 700 var(--touch-floor-ui)/1 var(--font-ui); }
.panel.decide.is-dock .decide-top { flex-wrap: nowrap; }

.panel.decide.is-dock .decide-yield { gap: 6px; }
.panel.decide.is-dock .decide-yield .decide-seg-icon { display: none; }
.stops-rows { display: grid; gap: var(--step-1); }
.stops-help { margin: 0 0 var(--step-2); font-size: var(--touch-floor-prose); color: var(--ink-2); }
.stops-row { display: flex; align-items: center; gap: var(--step-4); min-height: var(--touch); padding: 0 var(--step-3); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1); font: 600 var(--touch-floor-prose) var(--font-ui); text-align: left; cursor: pointer; }
.stops-row.now { border-color: var(--line-2); }
.stops-box { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--ink-2); border-radius: 6px; font-size: 16px; line-height: 1; }
.stops-row.stop .stops-box { background: var(--ink-1); color: var(--surface-1); border-color: var(--ink-1); }
.stops-now { margin-left: auto; font-size: var(--touch-floor-ui); color: var(--ink-2); }


.table .ui-sheet-bottom { box-sizing: border-box; }
.table .ui-sheet-h-half { max-height: 55dvh; padding-bottom: var(--safe-bottom); }
.table .ui-sheet-h-full { max-height: calc(100dvh - 24px - var(--safe-top)); height: calc(100dvh - 24px - var(--safe-top)); padding-bottom: var(--safe-bottom); }


.table:is([data-shape="tall"], [data-shape="short"]) { box-sizing: border-box; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }


.ui-sheet[data-sheet="log"] > .ui-sheet-body { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.ui-sheet[data-sheet="log"] > .ui-sheet-body > .panel.log { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; overflow: hidden; }
.ui-sheet[data-sheet="log"] .log-lines { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }



.chain-sheet-layer {
  --chain-sheet-top: 0px;
  position: fixed;
  inset: var(--chain-sheet-top, 0px) 0 0 0;
  z-index: 61; 
  overflow: clip;
  pointer-events: none;
}
.chain-sheet-layer > * { pointer-events: auto; }
.chain-sheet-scrim {
  position: absolute;
  inset: 0;
}
.chain-sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--chain-sheet-top, 0px) - var(--safe-bottom) - var(--step-6));
  border-bottom: 1px solid var(--line-2);
  border-radius: 0 0 var(--round-2) var(--round-2);
  background: var(--surface-overlay);
  box-shadow: var(--win-shadow);
}
.chain-sheet:focus { outline: none; }
.chain-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--step-2); padding: var(--step-3) var(--step-4) var(--step-2); }
.chain-sheet-title { margin: 0; font-size: var(--touch-floor-ui); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-1); }
.chain-sheet-sub { margin: 0; font-size: var(--touch-floor-ui); color: var(--ink-3); text-align: right; }
.chain-sheet-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 var(--step-3) var(--step-2); list-style: none; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--step-2); }
.chain-sheet-item { margin: 0; }
.chain-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--step-2);
  width: 100%;
  min-height: var(--touch);
  padding: var(--step-2);
  border: 1px solid var(--you);
  border-radius: var(--round-2);
  background: color-mix(in srgb, var(--you) 10%, var(--surface-1));
  color: var(--ink-1);
  font: inherit;
  text-align: left;
}

.chain-row.is-them { border-color: var(--opponent); background: color-mix(in srgb, var(--opponent) 10%, var(--surface-1)); }
.chain-row.pending { border-style: dashed; }
.chain-row.focus { border-color: var(--ink-2); box-shadow: 0 0 0 1px var(--ink-2); }
.chain-row.asked { border-color: var(--decide); box-shadow: 0 0 0 2px var(--decide); }
.chain-row:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.chain-row-n { align-self: start; min-width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; color: var(--ink-1); }
.chain-row-face { display: block; width: 52px; }
.chain-row-face > .cf { width: 52px; }
.chain-row-body { display: grid; gap: 2px; min-width: 0; }
.chain-row-name { display: flex; min-width: 0; overflow: hidden; }
.chain-row-name > .cf-line { min-width: 0; max-width: 100%; }
.chain-row-who { font-size: var(--touch-floor-ui); font-weight: 700; color: var(--you); }
.chain-row.is-them .chain-row-who { color: var(--opponent); }
.chain-row-words, .chain-row-targets { font-size: var(--touch-floor-ui); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-row-words { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.chain-row-words[hidden], .chain-row-targets[hidden] { display: none; }
.chain-row-marks { display: grid; justify-items: end; gap: 2px; }
.chain-row-mark, .chain-row-pending { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: var(--round-pill); font-size: 11px; white-space: nowrap; color: var(--ink-2); }
.chain-row-mark.is-next { border-color: transparent; background: var(--surface-2); color: var(--ink-1); }
.chain-sheet-foot { display: flex; padding: var(--step-2) var(--step-3) var(--step-3); border-top: 1px solid var(--line-1); }
.chain-sheet-close { flex: 1; min-height: var(--touch); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1); font: inherit; }
.chain-sheet-close:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .rune-tally { font-size: var(--tall-word); }
.panel.decide.is-dock .decide-said { font-size: var(--touch-floor-ui); }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem-hand { white-space: nowrap; line-height: 1.1; }

.table[data-shape="tall"] .hand-dock.is-strip { height: var(--tall-dock); clip-path: inset(0 0 calc(var(--tall-dock) - var(--strip-show, var(--touch))) 0); align-items: start; }

.table[data-shape="tall"] .felt { overflow: hidden; overflow: clip; }
.panel.decide.is-dock .decide-top > .decide-said.live { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.table[data-shape="tall"] .fit { flex: 1 1 0; min-height: 0; height: auto; }
.table[data-shape="tall"] .side-right > .panel.elsewhere { max-height: 25cqh; overflow-y: auto; overscroll-behavior: contain; }
.table[data-shape="tall"] .side-right > .notice { position: absolute; left: 0; right: 0; bottom: var(--notice-foot, calc(var(--tall-decide) + var(--tall-dock) + 3 * var(--step-2))); z-index: 25; max-height: 30cqh; overflow-y: auto; margin: 0 var(--step-2); }

.table[data-shape="tall"] .side-right > .notice:not(.calm, .warn) { background: color-mix(in oklch, var(--bad) 14%, var(--surface-ground)); }
.table[data-shape="tall"] .side-right > .notice:has(+ .oracle-why:not([hidden])) { padding-right: calc(var(--step-2) + 72px); }
.table[data-shape="tall"] .side-right > .oracle-why { position: absolute; right: var(--step-3); bottom: calc(var(--tall-decide) + var(--tall-dock) + 3 * var(--step-2)); z-index: 26; margin: 0; }
html:not(:has(.studio)):has(.table:is([data-shape="tall"], [data-shape="short"])),
html:not(:has(.studio)):has(.table:is([data-shape="tall"], [data-shape="short"])) > body { overflow: hidden; overscroll-behavior: none; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem > .totem-hand { grid-column: 1 / -1; grid-row: auto; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem > .totem-score { grid-row: 1 / span 2; }

.table .ui-sheet-h-full > .ui-sheet-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0; }
.table .ui-sheet-h-full .panel.log { flex: 1; min-height: 0; height: auto; margin: 0; border: 0; border-radius: 0; }
.table .turn-log { min-height: var(--touch); min-width: var(--touch); }
.top-row .turn-log { margin-left: auto; }
.top-row .turn-log + .turn-menu { margin-left: var(--step-2); }

.rune-stack { display: contents; }
.stack-hit { position: absolute; z-index: 0; pointer-events: auto; touch-action: manipulation; }
:root:not([data-input="touch"]) .stack-hit { pointer-events: none; }
.pool-runes { min-height: var(--touch); min-width: var(--touch); padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1); font: 700 var(--touch-floor-ui) var(--font-ui); cursor: pointer; }
.row-of-cards > .rune-stack > .card { position: absolute; }
.table .stage .pool-runes { min-height: calc(var(--touch) / var(--fit, 1)); padding: 0 calc(var(--step-1) / var(--fit, 1)); white-space: nowrap; width: max-content; max-width: 100%; font-size: calc(var(--touch-floor-ui) / var(--fit, 1)); border-radius: calc(var(--round-2) / var(--fit, 1)); }


.compose.is-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; gap: var(--step-2); margin: 0; padding: var(--step-3) var(--step-4) calc(var(--step-3) + env(safe-area-inset-bottom, 0px)); background: var(--surface-overlay); border: 1px solid var(--line-2); border-width: 1px 0 0; border-radius: var(--round-2) var(--round-2) 0 0; box-shadow: var(--table-lift); }
.compose-line { font-size: var(--touch-floor-prose); font-weight: 700; }
.compose.is-dock .cand { min-height: var(--touch); padding: 0 var(--step-4); font-size: var(--touch-floor-ui); }
.compose-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--step-2); }
.compose-answer > button { min-height: var(--touch); padding: 0 var(--step-5); border-radius: var(--round-2); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-1); font: 700 var(--touch-floor-ui) var(--font-ui); cursor: pointer; }
.compose.is-dock [data-move-send]:not([aria-disabled="true"]) { background: var(--decide); border-color: var(--decide); color: var(--surface-ground); }
.drop.lit.picked { box-shadow: inset 0 0 0 2px var(--decide); background: rgba(116, 239, 255, 0.1); }
.lit-label { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 6; padding: 0 calc(var(--step-2) / var(--fit, 1)); border-radius: var(--round-pill); background: color-mix(in srgb, var(--felt-2) 94%, transparent); border: 1px solid var(--line-2); font-size: calc(var(--touch-floor-board) / var(--fit, 1)); font-weight: 700; white-space: nowrap; pointer-events: none; }


.table[data-shape="short"] { --short-rail: 208px; --short-peek: 52px; --short-open: 132px; }
.table[data-shape="short"] .felt { position: relative; grid-template-columns: minmax(0, 1fr) calc(var(--short-rail) + env(safe-area-inset-right, 0px)); grid-template-rows: auto minmax(0, 1fr); padding-left: env(safe-area-inset-left, 0px); overflow: hidden; }
.table[data-shape="short"] .felt > .fit { grid-column: 1; grid-row: 2; align-self: start; height: calc(100% - var(--short-peek)); }
.table[data-shape="short"] .felt > .side-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-height: 0; max-height: none; overflow: hidden; padding-right: env(safe-area-inset-right, 0px); }
.table[data-shape="short"] .side-right > * { flex: none; margin: 0 var(--step-2) var(--step-1); }
.table[data-shape="short"] .side-right > .top { order: -2; margin-bottom: 0; padding: 0; border: 0; height: var(--touch); }
.table[data-shape="short"] .side-right > .rail-seats { order: -1; display: grid; gap: var(--step-1); }
.table[data-shape="short"] .side-right > .panel.decide { order: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.table[data-shape="short"] .panel.decide .decide-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.table[data-shape="short"] .decide-answer { margin-top: auto; }
.table[data-shape="short"] .side-right > .chain.dock { display: none; }
.table[data-shape="short"] .side > .top .game-id:not(.seat-playing) { display: none; }
.table[data-shape="short"] .rail-seats .totem { position: relative; min-height: var(--touch); padding: var(--step-1) var(--step-2); }
.table[data-shape="short"] .rail-seats .totem-name { font-size: var(--touch-floor-ui); }
.table[data-shape="short"] .rail-seats .totem-score { font-size: 22px; }
.table[data-shape="short"] .rail-seats .totem-hand { font-size: var(--touch-floor-board); }
.table[data-shape="short"] .rail-seats .zone-resources { position: relative; }
.table[data-shape="short"] .rail-seats .pool { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-1) var(--step-3); }
.table[data-shape="short"] .rail-seats .pool .pool-n { font-size: var(--touch-floor-ui); }
.table[data-shape="short"] .hand-dock { position: absolute; left: 0; right: calc(var(--short-rail) + env(safe-area-inset-right, 0px)); bottom: 0; height: var(--short-open); z-index: 20; padding-left: env(safe-area-inset-left, 0px); background: color-mix(in srgb, var(--surface-1) 92%, transparent); clip-path: inset(calc(var(--short-open) - var(--short-peek)) 0 0 0); transition: clip-path var(--motion-2) var(--ease-standard); align-items: start; }

.table[data-shape="short"] .hand-dock > * { transform: translateY(calc(var(--short-open) - var(--short-peek))); transition: transform var(--motion-2) var(--ease-standard); }
.table[data-shape="short"] .hand-dock > .hand-dock-count { transform: translateY(calc((var(--short-open) - var(--short-peek)) / 2)); }
.table[data-shape="short"] .hand-dock > .free-hand-tools { transform: none; }
.table[data-shape="short"] .hand-dock[data-drawer="open"] { clip-path: inset(0 0 0 0); }
.table[data-shape="short"] .hand-dock[data-drawer="open"] > * { transform: none; }
.table[data-shape="short"] .hand-dock-slot { width: 84px; height: 110px; }
.table[data-shape="short"] .hand-dock-slot > .card.at-hand { width: 84px; height: 110px; }
.table[data-shape="short"] .dock-pill { right: var(--step-2); top: var(--step-2); }
.table:is([data-shape="tall"], [data-shape="short"]) .side-right > .top :is(.turn-number, .act, .reconnecting) { font-size: var(--touch-floor-ui); }
.table[data-shape="short"] .rail-seats .totem-active-label { display: none; }



.table[data-shape="tall"] .pregame-overlay {
  inset: 0;
  padding: calc(var(--tall-top) + var(--step-2)) calc(var(--step-2) + env(safe-area-inset-right, 0px)) calc(var(--step-2) + env(safe-area-inset-bottom, 0px)) calc(var(--step-2) + env(safe-area-inset-left, 0px));
  align-items: center;
  
  animation-name: pregame-dim-in;
}
@keyframes pregame-dim-in { from { opacity: 0; } }
.table[data-shape="tall"] .pregame-overlay:has(> .pregame-panel:not(.rolloff)) { padding-bottom: calc(var(--tall-decide) + var(--tall-dock) - var(--touch) + var(--step-3) + var(--step-2)); }
.table[data-shape="tall"] .pregame-overlay > .peek-bar { top: calc(var(--tall-top) + var(--step-2)); }
.table[data-shape="short"] .pregame-overlay { inset: 0 calc(var(--short-rail) + env(safe-area-inset-right, 0px)) 0 0; padding: var(--step-2); }
.table:is([data-shape="tall"], [data-shape="short"]) .pregame-overlay .pregame-panel { max-height: 100%; gap: var(--step-2); }
.table:is([data-shape="tall"], [data-shape="short"]) .pregame-overlay .mulligan-hand { gap: var(--step-2); padding: var(--step-1) 0; }


:root[data-compact] .room-ready-bar,
:root[data-compact] .results-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
  padding: var(--step-2) var(--step-4);
  background: var(--surface-ground);
  border-top: 1px solid var(--line-1);
}
:root[data-compact] .room-ready-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; }
:root[data-compact] .room-ready-bar > .ui-btn-lg { grid-column: 1 / -1; }
:root[data-compact] .room-ready-bar > .room-ready-why { grid-column: 1 / -1; min-height: 0; }
:root[data-compact] .results-actions { flex-wrap: nowrap; }
:root[data-compact] .results-actions .ui-btn-lg { min-width: 0; flex: 1 1 0; }

:root[data-compact] .results-actions-run { flex-wrap: wrap; }
:root[data-compact] .results-actions-run > :first-child { flex: 1 1 100%; }
:root[data-compact] .results:has(.results-actions-run) { padding-bottom: 12rem; }
:root[data-compact] .room-page { padding-bottom: 11rem; }

:root[data-compact]:has(.room-page) { scroll-padding-bottom: 11rem; }
:root[data-compact] .results { padding-bottom: 7rem; }
:root[data-compact] .results-legends:not(:has(img)) { display: none; }

@media (max-width: 600px) {
  :root[data-compact]:has(.shell-bar) .room-ready-bar,
  :root[data-compact]:has(.shell-bar) .results-actions { bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); }
  :root[data-compact] .room-page { padding-bottom: calc(11rem + var(--rail-h)); }
  :root[data-compact]:has(.room-page) { scroll-padding-bottom: calc(11rem + var(--rail-h)); }
  :root[data-compact]:has(.shell-bar) .results { padding-bottom: calc(7rem + var(--rail-h)); }
  :root[data-compact]:has(.shell-bar) .results:has(.results-actions-run) { padding-bottom: calc(12rem + var(--rail-h)); }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root[data-compact] .results { display: block; column-count: 2; column-gap: var(--step-6); min-height: 0; text-align: center; }
  :root[data-compact] .results > * { break-inside: avoid; margin-bottom: var(--step-3); }
  :root[data-compact] .results-title { font-size: 28px; }
  :root[data-compact] .results-mark { display: none; }
}

:root[data-compact] body:has(.room-ready-bar, .results-actions) .site-footer { padding-bottom: 7rem; }
:root[data-compact] body:has(.results-actions-run) .site-footer { padding-bottom: 14rem; }


@container (max-width: 560px) {
  .dice-row.ro-stage {
    --ro-size: clamp(104px, 34cqw, 190px);
    grid-template-columns: var(--ro-size) minmax(16px, 1fr) var(--ro-size);
    grid-template-areas: "head head head" "you mid opp";
    row-gap: var(--step-3);
    column-gap: var(--step-2);
  }
  .ro-stage > .ro-head { grid-area: head; background: none; padding: 0; }
  .ro-stage > .ro-tear { width: 28px; min-height: 100px; }
}
.table[data-shape="short"] .rolloff { gap: var(--step-2); }
.table[data-shape="short"] .rolloff .dice-row.ro-stage { --ro-size: clamp(88px, 26cqh, 130px); column-gap: var(--step-3); }
.table[data-shape="short"] .rolloff .ro-sub { display: none; }
.table[data-shape="short"] .rolloff .die-slot { gap: var(--step-1); }
.table:is([data-shape="tall"], [data-shape="short"]) .rolloff .roll-btn { min-height: var(--touch); font-size: var(--type-read); }
.table:is([data-shape="tall"], [data-shape="short"]) .rolloff .first-player-zone { min-height: var(--touch); }
.table:is([data-shape="tall"], [data-shape="short"]) .rolloff .ro-word { font-size: max(var(--type-floor), var(--type-tag)); }


[data-lift] { touch-action: none; }
.hand-dock [data-lift] { touch-action: pan-x; }
.touch-ghost { opacity: 0.92; scale: 1.08; filter: drop-shadow(0 8px 14px oklch(10% 0.02 274 / 0.6)); }


.table[data-shape="tall"] .stage .zone-resources { display: flex; flex-direction: column; gap: var(--step-1); }
.table[data-shape="tall"] .stage .zone-resources > .pool { position: relative; inset: auto; flex: 1 1 0; min-height: 0; }
.table[data-shape="tall"] .stage .seat-tally { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--step-2); padding: 2px 5px; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--round-2); }
.table[data-shape="tall"] .stage .seat-tally .totem-hand { white-space: nowrap; line-height: 1.1; }


:root[data-input="touch"] .stage .card > .cf.whole > .cf-might {
  --might-px: calc(var(--touch-floor-ui) / var(--fit, 1));
  left: min(calc(88.25% - var(--w) / 2), calc(100% - var(--w)));
  top: max(calc(8.6% - var(--h) / 2), 0px);
}

:root[data-input="touch"] .stage .card:not(.spine):not(.covered) > .cf.whole > .cf-might { --w: calc(1.3 * var(--might-px)); }
:root[data-input="touch"] .stage .card > .cf.token > .cf-might { font-size: calc(var(--touch-floor-ui) / var(--fit, 1)); }
:root[data-input="touch"] .stage .card > .cf > .cf-might.up { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--good), var(--num-lift); }
:root[data-input="touch"] .stage .card > .cf > .cf-might.down { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--bad), var(--num-lift); }

:root[data-input="touch"] .stage .half-tally { font-size: calc(var(--touch-floor-ui) / var(--fit, 1)); }


.battlefield > .battlefield-half.across { z-index: 1; }

.battlefield > .battlefield-half.across:not(.lit) { pointer-events: none; }
.battlefield > .battlefield-half.across:not(.lit) > .row-of-cards > .card,
.battlefield > .battlefield-half.across:not(.lit) .half-tally.opens { pointer-events: auto; }

.card.spine > .card-edge > .edge-might {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.5em;
  height: 1.3em;
  padding: 0 0.12em;
  box-sizing: border-box;
  background: #0d0f14;
  color: #f4f1ea;
  box-shadow: 0 0 0 1px rgba(244, 241, 234, 0.45);
  font-size: var(--stage-word);
  font-family: var(--font-numeral);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.card.spine > .card-edge > .edge-might.up { color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.card.spine > .card-edge > .edge-might.down { color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might { font-size: calc(var(--touch-floor-ui) / var(--fit, 1)); box-shadow: 0 0 0 calc(1px / var(--fit, 1)) rgba(244, 241, 234, 0.45); }
:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might.up { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--good); }
:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might.down { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--bad); }
:root[data-input="touch"] .stage .card.covered > .cf.whole > .cf-might { left: 3cqw; }
:root[data-input="touch"] .stage .card.covered > .cf.whole > :is(.cf-cost, .cf-power) { visibility: hidden; }
@media (pointer: coarse) {
  
  .pp-step { width: 44px; height: 44px; }
  .pp-stepper { gap: 4px; }
}

.pp-option { align-content: start; grid-auto-rows: max-content; height: auto; }
.pp-cell { grid-auto-rows: max-content; }
.pp-art { height: auto; }


:root[data-input="touch"] .stage .card > .cf.whole:not(:empty) > :is(.cf-cost, .cf-power) { filter: saturate(0.35) brightness(0.62); }


:root[data-input="touch"] .stage .card { --seal: calc(var(--touch-floor-ui) / var(--fit, 1)); }

:root[data-input="touch"] .stage .card.spine > .mark-rail { --seal: min(calc(var(--touch-floor-ui) / var(--fit, 1)), calc((var(--slice, 100%) - 1px) * 22 / 24)); }

:root[data-input="touch"] .stage .card:is(.at-board, .at-slot, .at-field) > .mark-rail { bottom: 6px; }
:root[data-input="touch"] .stage .card:is(.at-board, .at-slot, .at-field):not(.spine) > .mark-rail { bottom: 0; }



:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) { min-width: calc((var(--touch) + 0.25px) / var(--fit, 1)); min-height: calc((var(--touch) + 0.25px) / var(--fit, 1)); }
:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) .card.at-slot { min-width: 100%; }

:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) { pointer-events: none; }
:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) > :not(.row-of-cards) { pointer-events: auto; }
:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) .card.at-slot { pointer-events: none; }
:root[data-input="touch"] .stage :is(.zone-legend, .zone-champion) .card.at-slot::after { content: ""; position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; pointer-events: auto; }
:root[data-input="touch"] .stage .half.far .zone-legend .card.at-slot::after { left: 15%; }


:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might { min-width: 0; width: calc(var(--slice) - 6px); padding: 0; }

:root[data-input="touch"] .stage .card.exhausted:is(.spine, .covered) { rotate: none; }
:root[data-input="touch"] .stage .card.exhausted:is(.spine, .covered) :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks) { rotate: none; }


:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might[data-digits] {
  --natural: calc(0.675 * 12 * var(--digits, 2));
  font-size: calc(12px / var(--fit, 1));
  width: auto;
  min-width: 0;
  padding: 0;
  transform: scaleX(clamp(0.45, calc((var(--slice-n, 100) * var(--fit, 1) - 3) / var(--natural)), 1));
}
:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might[data-digits="2"] { --digits: 2; }
:root[data-input="touch"] .stage .card.spine > .card-edge > .edge-might[data-digits="3"] { --digits: 3; }
:root[data-input="touch"] .stage .card.covered > .cf.whole > .cf-might {
  left: 1px;
  width: min(var(--w), calc(100% - var(--row-cover, 0px) - 2px));
  padding: 0;
}


.card-state { display: none; }
.card:is(.spine, .covered):not(.at-hand) > .card-state:not(:empty) {
  --state-size: min(calc(14px / var(--fit, 1)), calc(var(--strip, 84px) + 2px / var(--fit, 1)));
  position: absolute;
  z-index: 4;
  left: 0;
  top: 50%;
  width: var(--strip, 100%);
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3px / var(--fit, 1));
  pointer-events: none;
}
:root[data-input="touch"] .stage .card:is(.spine, .covered) > .card-state { --state-size: min(calc(var(--touch-floor-ui) / var(--fit, 1)), calc(var(--strip, 84px) + 2px / var(--fit, 1))); }
.state-mark {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--state-size);
  height: var(--state-size);
  border-radius: var(--round-1);
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  box-shadow: 0 0 0 max(1px, calc(1px / var(--fit, 1))) var(--ink-2), var(--num-lift);
  color: var(--ink-1);
  font-weight: 700;
  font-synthesis: none;
  font-size: calc(var(--state-size) * 0.7);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.state-exhausted { rotate: var(--exhaust-turn); box-shadow: 0 0 0 max(1px, calc(1.5px / var(--fit, 1))) var(--ink-2), var(--num-lift); }
.state-exhausted > .state-icon { width: 78%; height: 78%; object-fit: contain; }

.state-damage, .state-chosen { font-size: calc(11px / var(--fit, 1)); }
.state-damage { font-family: var(--font-numeral); border-radius: var(--round-pill); box-shadow: 0 0 0 max(1px, calc(1.5px / var(--fit, 1))) var(--bad), var(--num-lift); color: var(--bad-ink); }
.state-chosen { font-family: var(--font-numeral); border-radius: 50%; background: var(--rift-light); box-shadow: 0 0 calc(6px / var(--fit, 1)) var(--rift-glow); color: var(--surface-ground); }


.stage .card:is(.at-board, .at-slot, .at-field) { overflow: visible; }

:root .stage .card:is(.at-board, .at-slot, .at-field) > .cf.whole { overflow-clip-margin: 8px; }

.stage .battlefield-half > .row-of-cards > .card { z-index: 1; }

.cf {
  --shield: polygon(0 0, 100% 0, 100% 62%, 96% 75%, 88% 85%, 72% 94%, 50% 100%, 28% 94%, 12% 85%, 4% 75%, 0 62%);
  --shield-hung: polygon(0 0, 100% 0, 100% 62%, 96% 75%, 88% 85%, calc(50% + 0.31em) 85%, calc(50% + 0.46em) calc(100% - 0.04em), calc(50% + 0.53em) calc(100% + 0.22em), calc(50% + 0.46em) calc(100% + 0.48em), calc(50% + 0.26em) calc(100% + 0.68em), 50% calc(100% + 0.75em), calc(50% - 0.26em) calc(100% + 0.68em), calc(50% - 0.46em) calc(100% + 0.48em), calc(50% - 0.53em) calc(100% + 0.22em), calc(50% - 0.46em) calc(100% - 0.04em), calc(50% - 0.31em) 85%, 12% 85%, 4% 75%, 0 62%);
}
.cf .cf-might {
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--might-rim), var(--might-rim));
  background-color: var(--surface-ground);
  clip-path: var(--shield);
}
.cf .cf-might::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--num-rim-w);
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  clip-path: var(--shield);
}

.cf.whole > .cf-might[data-damage],
.cf-large.arted:not([data-art-missing]) > .cf-might[data-damage] { clip-path: var(--shield-hung); }
.cf-large.arted:not([data-art-missing]) > .cf-might > .cf-dmg {
  right: auto;
  left: 50%;
  bottom: auto;
  top: calc(100% - 0.4em);
  translate: -50% 0;
}

.cf:not(.whole):not(.cf-large.arted:not([data-art-missing])) > .cf-might[data-damage] {
  border: var(--num-rim-w) solid var(--might-rim);
  border-radius: var(--might-shape);
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  clip-path: none;
}
.cf:not(.whole):not(.cf-large.arted:not([data-art-missing])) > .cf-might[data-damage]::before { content: none; }

.cf.whole:not(.t-gear) > .cf-cost { box-shadow: inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring), inset 0 0 0 calc(2.5px / var(--fit, 1)) rgba(9, 11, 20, 0.6), var(--num-lift); }
.table .cf.whole:not(.t-gear) > .cf-cost { box-shadow: 0 0 0 calc(1px / var(--fit, 1)) var(--rift-light), inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring), inset 0 0 0 calc(2.5px / var(--fit, 1)) rgba(9, 11, 20, 0.6), var(--num-lift); }


.cf-large > :is(.cf-was-cost, .cf-was-might) {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  align-self: start;
  padding: 1px 5px;
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  box-shadow: var(--num-lift);
  color: var(--ink-2);
  font-family: var(--font-numeral);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  text-decoration: line-through;
}
.cf-large > .cf-was-cost { justify-self: start; margin: 18px 0 0 56px; }
.cf-large > .cf-was-might { grid-area: 3 / 1; align-self: end; justify-self: end; margin: 0 50px 18px 0; }
.cf-large.arted:not([data-art-missing]) > .cf-was-might { grid-area: 1 / 1; align-self: start; margin: 20px 50px 0 0; }
.cf-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 6px 10px 2px;
  list-style: none;
}
.cf-large > .cf-mods { grid-area: 7 / 1; }
.cf-large.arted:not([data-art-missing]) > .cf-mods { grid-area: 2 / 1; }
.cf-large.arted:not([data-art-missing]) > .cf-mods ~ .cf-keys { grid-area: 3 / 1; }
.cf-mod {
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  color: var(--ink-1);
  font-size: 13px;
  line-height: 1.35;
}
.cf-mod.good { border-color: var(--good); }
.cf-mod.bad { border-color: var(--bad); }



.table[data-shape="tall"] .fit > .stage { top: calc(100% - var(--content-h, 0) * var(--fit, 1) * 0.5px); }




.dock-pill > .dock-pill-title,
.dock-pill > .dock-next { font-size: 12px; align-self: stretch; display: flex; align-items: center; }

.table :is(.side, [data-sheet]) { --type-tag: 12px; --type-note: 12px; --type-label: 12px; --type-body: 12px; --type-read: 13px; }
.table :is(.side, [data-sheet]) :is(.decide-said, .decide-help, .dock-title, .dock-next, .dock-strip, .dock-earlier, .dock-fan-order, .log-glyph, .log-cite, .log-head-row, .log-chev, .log-jump) { font-size: 12px; }


.rift-band {
  position: absolute;
  left: -3%;
  right: -3%;
  top: 50%;
  height: 34%;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.table[data-shape="tall"] .rift-band { height: 330px; }
.rift-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rift-flare {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  --rift-flare-hue: var(--rift-light);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), var(--rift-flare-hue) 30%, transparent 72%);
  mix-blend-mode: screen;
}
.rift-flare.you { --rift-flare-hue: var(--you); }
.rift-flare.them { --rift-flare-hue: var(--opponent); }
.rift-flare.bad { --rift-flare-hue: var(--bad); }
.rift-streak {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  pointer-events: none;
  opacity: 0;
  --rift-streak-hue: var(--rift-light);
  background: linear-gradient(90deg, transparent, var(--rift-streak-hue) 30%, rgba(255, 255, 255, 0.9) 50%, var(--rift-streak-hue) 70%, transparent);
  mix-blend-mode: screen;
}
.rift-streak.you { --rift-streak-hue: var(--you); }
.rift-streak.them { --rift-streak-hue: var(--opponent); }
.rift-streak.bad { --rift-streak-hue: var(--bad); }

.rift-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  --rift-ring-hue: var(--rift-light);
  box-shadow: 0 0 0 2px var(--rift-ring-hue), 0 0 18px var(--rift-ring-hue);
}
.rift-ring.you { --rift-ring-hue: var(--you); }
.rift-ring.them { --rift-ring-hue: var(--opponent); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .rift-flare,
  :root:not([data-motion="full"]) .rift-streak,
  :root:not([data-motion="full"]) .rift-ring { display: none; }
}
:root[data-motion="reduce"] .rift-flare,
:root[data-motion="reduce"] .rift-streak,
:root[data-motion="reduce"] .rift-ring { display: none; }

.rift-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.rift-glow-pulse,
.rift-glow-wait > b {
  background: radial-gradient(ellipse 52% 46% at 50% 50%, var(--rift-glow), transparent 72%);
  transform-origin: 50% 50%;
}
.rift-glow-wait { transition: opacity var(--motion-4) var(--ease-standard); }
.rift-glow-wait[data-on] { opacity: 1; }
.rift-glow-wait > b { position: absolute; inset: 0; display: block; opacity: 0.32; }
:root[data-motion="reduce"] .rift-glow-wait { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .rift-glow-wait { transition: none; }
}

.felt-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.felt-sheen > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  margin: -35% 0 0 -35%;
  background: radial-gradient(closest-side, var(--light-warm-hi), var(--light-warm-lo) 55%, transparent);
}
.table:not([data-shape="wide"]) .felt-sheen { display: none; }
@media (hover: none), (pointer: coarse) {
  .felt-sheen { display: none; }
}
:root[data-motion="reduce"] .felt-sheen { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .felt-sheen { opacity: 0.5; }
}

.moments-layer > .table-light { opacity: 0; }
.moments-layer > .table-light-card { border-radius: var(--round-2); box-shadow: 0 0 22px 6px var(--light-warm-edge); }
.moments-layer > .table-light-felt { border-radius: 14px; background: radial-gradient(closest-side, var(--light-warm-hi), var(--light-warm-lo) 60%, transparent); }

.chain-light {
  --chain-hue: var(--rift-light);
  --chain-level: 0;
  position: absolute;
  pointer-events: none;
  transition: transform var(--motion-4) var(--ease-emphasis);
}
.chain-light[data-side="you"] { --chain-hue: var(--you); }
.chain-light[data-side="them"] { --chain-hue: var(--opponent); }
.chain.dock > .chain-light {
  
  inset: 14px -4px -8px;
  z-index: -1;
  border-radius: 12px;
  transform-origin: 50% 100%;
  transform: scaleY(var(--chain-level));
  background: linear-gradient(0deg, color-mix(in oklch, var(--chain-hue) 30%, transparent), transparent);
}
.dock-pill > .chain-light {
  left: var(--step-3);
  right: var(--step-3);
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  transform-origin: 0 50%;
  transform: scaleX(var(--chain-level));
  background: var(--chain-hue);
}

[data-hand-card] { --catch-i: 0; }
.table[data-deciding][data-deciding][data-deciding] [data-hand-card].card.payable {
  animation: catch-light var(--motion-4) var(--ease-spring) calc(var(--catch-i) * var(--stagger)) 1;
}
@keyframes catch-light {
  0%, 100% { transform: none; filter: none; }
  40% { transform: translateY(-12px); filter: brightness(1.25); }
}
:root[data-motion="reduce"] .table [data-hand-card].card.payable { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .table [data-hand-card].card.payable { animation: none; }
}


.side > .panel.decide:not(.is-dock) .decide-top { flex-wrap: nowrap; height: 20px; }
.side > .panel.decide:not(.is-dock) .decide-top > .decide-said { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--ink-1); }
.side > .panel.decide:not(.is-dock) .decide-top > .decide-said.live { font-weight: 700; }
.panel.decide.over .decide-top > .decide-said { color: var(--ink-2); font-weight: 400; }

.decide-stage { flex: none; display: flex; flex-direction: column; gap: var(--step-2); height: var(--decide-stage); min-height: 0; margin-top: var(--step-2); }
.decide-stage > .decide-body { flex: 1 1 auto; margin-top: 0; }
.decide-stage > [hidden] { display: none; }

.decide-pass { flex: none; display: flex; gap: 2px; height: 28px; padding: 2px; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-ground); }
.decide-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--ink-2);
  font: 600 12px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-1) var(--ease-inout), color var(--motion-1) var(--ease-inout);
}
@media (hover: hover) { .decide-seg:hover { color: var(--ink-1); background: var(--surface-2); } }
.decide-seg[aria-pressed="true"] { background: var(--line-2); color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--ink-1); }
.decide-seg:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-in) / var(--fit, 1)); }
.decide-seg-icon { flex: none; display: inline-flex; }
.decide-seg-icon > .ui-icon { width: 14px; height: 14px; }
.decide-seg-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.decide-yield-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-1); animation: yield-beat var(--loop-wait) var(--ease-inout) infinite; animation-timing-function: var(--tick-inout-6); }
@keyframes yield-beat { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .decide-yield-dot { animation: none; }
}
:root[data-motion="reduce"] .decide-yield-dot { animation: none; }

.decide-stops-toggle {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  border-radius: var(--round-1);
  background: none;
  color: var(--ink-2);
  font: 600 12px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-1) var(--ease-inout), color var(--motion-1) var(--ease-inout);
}
@media (hover: hover) { .decide-stops-toggle:hover { background: var(--surface-2); color: var(--ink-1); } }
.decide-stops-chev { flex: none; display: inline-flex; transition: transform var(--motion-2) var(--ease-standard); }
.decide-stops-toggle.open .decide-stops-chev { transform: rotate(180deg); }
.decide-stops-word { flex: none; }
.decide-stops-count { flex: none; min-width: 18px; height: 18px; box-sizing: border-box; display: inline-grid; place-items: center; padding: 0 5px; border-radius: var(--round-pill); background: var(--surface-2); color: var(--ink-1); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.decide-stops-now { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink-3); }

.decide-stops { flex: none; margin-top: var(--step-2); padding-top: var(--step-2); border-top: 1px solid var(--line-1); }
.decide-stops[hidden] { display: none; }
.decide-stops .stops-rows { gap: 2px; }
.decide-stops .stops-help { margin: 0 0 var(--step-1); font-size: 12px; line-height: 1.35; }
.decide-stops .stops-row { gap: var(--step-2); height: 32px; min-height: 32px; padding: 0 var(--step-2); border-color: transparent; background: none; font: 600 12px/1 var(--font-ui); color: var(--ink-2); }
@media (hover: hover) { .decide-stops .stops-row:hover { background: var(--surface-2); color: var(--ink-1); } }
.decide-stops .stops-row.now { border-color: var(--line-2); color: var(--ink-1); }
.decide-stops .stops-row.stop { color: var(--ink-1); }
.decide-stops .stops-box { width: 16px; height: 16px; border-width: 1px; border-radius: 4px; font-size: 12px; }
.decide-stops .stops-now { font-size: 12px; font-weight: 400; }

:root[data-input="touch"] .side > .panel.decide:not(.is-dock) { --decide-stage: 160px; }

:root[data-input="touch"] .side > .panel.decide:not(.is-dock):has(.ask-discounts) { --decide-stage: 300px; }
@media (pointer: fine) { .side > .panel.decide:has(.ask-discounts) { --decide-stage: 230px; } }
:root[data-input="touch"] .panel.decide:not(.is-dock) :is(.decide-pass, .decide-stops-toggle) { height: var(--touch); }
:root[data-input="touch"] .decide-stops .stops-row { height: var(--touch); min-height: var(--touch); }



.peek-bar { position: absolute; top: var(--step-3); right: var(--step-3); z-index: 5; pointer-events: auto; }

.peek-bar .ui-btn { gap: var(--step-2); min-height: var(--touch); box-shadow: var(--shadow-notice); }
.peek-bar .ui-kbd { min-width: 0; height: 18px; padding: 0 5px; }
.ask-stage.is-peeking,
.pregame-overlay.is-peeking { background: transparent; pointer-events: none; overflow: visible; }
.ask-stage.is-peeking > :not(.peek-bar),
.pregame-overlay.is-peeking > :not(.peek-bar) { visibility: hidden; }
.is-peeking > .peek-bar { visibility: visible; pointer-events: auto; }
.pregame-overlay > .peek-bar { top: var(--step-4); right: var(--step-4); }

.ask-tray-stage > .peek-bar { position: sticky; top: auto; bottom: var(--step-3); right: auto; align-self: flex-end; margin: 0 var(--step-3) 0 0; flex: none; }


.zone-hand.is-held > :not(.zone-label),
.hand-dock.is-held > * { visibility: hidden; }


.table[data-me] .card.rune:not(.exhausted):not(.at-hand)::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 10px 1px color-mix(in oklch, var(--rift-light) 45%, transparent);
  opacity: 0.45;
  animation: rune-breathe var(--light-rune) var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-36);
}
.table[data-me] .totem.active-turn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 26px 4px color-mix(in oklch, var(--opponent) 40%, transparent);
  opacity: 0.5;
  animation: rim-light var(--light-rim) var(--ease-breathe) infinite alternate;
  animation-timing-function: var(--tick-breathe-32);
}
.table[data-me] .totem.mine.active-turn::after { box-shadow: 0 0 26px 4px color-mix(in oklch, var(--you) 45%, transparent); }
@keyframes rune-breathe {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}
@keyframes rim-light {
  from { opacity: 0.5; }
  to { opacity: 1; }
}
:root[data-motion="reduce"] .table[data-me] .card.rune::before,
:root[data-motion="reduce"] .table[data-me] .totem.active-turn::after,
:root[data-scene="off"] .table[data-me] .card.rune::before,
:root[data-scene="off"] .table[data-me] .totem.active-turn::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .table[data-me] .card.rune::before,
  :root:not([data-motion="full"]) .table[data-me] .totem.active-turn::after { animation: none; }
}

:root .table[data-replay="playing"] .scene *,
:root .table[data-replay="playing"] .scene-depth,
:root .table[data-replay="playing"] .battlefield[data-battlefield] > .field-hum,
:root .table[data-replay="playing"][data-me] .card.rune:not(.exhausted):not(.at-hand)::before,
:root .table[data-replay="playing"][data-me] .totem.active-turn::after { animation: none; }


.stage {
  --might-on-screen: 13px;
  --might-over: calc(3px / var(--fit, 1));
}
:root[data-input="touch"] .stage { --might-on-screen: 17px; }
.stage .card:is(.at-board, .at-slot, .at-field) > .cf.whole {
  overflow: clip;
  overflow-clip-margin: var(--might-over);
}
:root .stage .card:is(.at-board, .at-slot, .at-field) > .cf.whole > .cf-might {
  --might-px: calc(var(--might-on-screen) / var(--fit, 1));
  left: min(calc(88.25% - var(--w) / 2), calc(100% - var(--w) + var(--might-over)));
  top: max(calc(8.6% - var(--h) / 2), calc(0px - var(--might-over)));
}
:root .stage .card:is(.at-board, .at-slot, .at-field) > .cf.token > .cf-might { font-size: calc(var(--might-on-screen) / var(--fit, 1)); }

.card:is(.at-hand, .at-mulligan) > .cf.whole > .cf-might {
  --might-px: max(8cqw, calc(var(--touch-floor-ui) / var(--fit, 1)));
  left: min(calc(88.25% - var(--w) / 2), calc(100% - var(--w) - 1cqw));
  top: max(calc(8.6% - var(--h) / 2), 1cqw);
}

:root[data-input="touch"] .stage .card:is(.at-board, .at-slot, .at-field) > .cf.whole > .cf-power > :nth-child(n + 2) { display: none; }
:root[data-input="touch"] .stage .card:is(.at-board, .at-slot, .at-field) > .cf.whole > .cf-power:not([data-n="1"])::after {
  content: "\00D7" attr(data-n);
  position: absolute;
  left: calc(100% - 0.1em);
  bottom: -0.15em;
  padding: 0.04em 0.22em;
  border: max(1px, 0.08em) solid var(--ink-2);
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--ink-1);
  font-size: max(0.8em, calc(10px / var(--fit, 1)));
  line-height: 1;
}

.table .cf.whole:not(.t-gear) > .cf-cost { box-shadow: 0 0 0 calc(1px / var(--fit, 1)) var(--rift-light), inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring), var(--num-lift); }


:root { --card-k: 1; }
:root[data-card-size="large"] { --card-k: 1.12; }
:root[data-card-size="larger"] { --card-k: 1.25; }
.stage .half.near .card.at-hand[data-hand-card] {
  scale: calc(1.1 * var(--card-k));
  translate: 0 calc(var(--fan-drop, 0px) + (var(--card-k) - 1) * 143%);
}
.stage .half.near .card.at-hand[data-hand-card]:not(.hidden):hover { scale: calc(1.1 * 1.12 * var(--card-k)); translate: 0 -58px; }

@media (hover: hover) and (pointer: fine) {
  .table[data-aiming] .stage .half.near .card.at-hand[data-hand-card]:not(.candidate):not(.pick-blocked) { pointer-events: none; }
}

:root[data-card-size] .stage .half.near .zone-base { z-index: 3; }

:root[data-card-size] .battlefield > .battlefield-half { z-index: 1; }

:root[data-card-size] .battlefield > .battlefield-half:not(.lit) { pointer-events: none; }
:root[data-card-size] .battlefield > .battlefield-half:not(.lit) > .row-of-cards > .card,
:root[data-card-size] .battlefield > .battlefield-half:not(.lit) .half-tally.opens { pointer-events: auto; }



.stage .card[data-raise]:not(.at-hand) {
  z-index: 6;
  translate: 0 calc(-6px / var(--fit, 1));
  transition: translate var(--motion-2) var(--ease-inout);
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .stage .card[data-raise]:not(.at-hand) { translate: none; transition: none; }
}
:root[data-motion="reduce"] .stage .card[data-raise]:not(.at-hand) { translate: none; transition: none; }

.ask-tray-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--step-3);
  width: 92%;
}
.ask-tray-group::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--table-edge); }
.ask-tray-group.divided { padding-top: var(--step-3); border-top: 1px solid var(--table-edge); }
.ask-tray-group-title {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--table-soft);
}
.ask-tray-stage > .ask-tray:has(+ .ask-tray-group) { margin-bottom: 0; }


:lang(zh-Hans) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; line-break: strict; }
:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; word-break: keep-all; }
:is(.cf-rules, .cf-effect, .cf-key, .cf-tr-rules, .cf-tr-effect):is(:lang(zh-Hans), :lang(ko)) { line-height: 1.55; }

.cf-duo { display: flex; flex-direction: column; align-items: stretch; gap: var(--step-2); width: max-content; }
.cf-tr {
  contain: inline-size;
  box-sizing: border-box;
  max-height: min(40vh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--step-2) var(--step-3) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: var(--type-body);
  line-height: 1.45;
  text-align: left;
}
.cf-tr-name { margin: 0; font-family: var(--font-display); font-size: var(--type-head); font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.cf-tr-type { margin: 2px 0 var(--step-2); font-size: var(--type-note); color: var(--ink-3); }
.cf-tr-rules, .cf-tr-effect { white-space: pre-line; overflow-wrap: anywhere; }
.cf-tr-effect { margin-top: var(--step-2); padding-top: var(--step-2); border-top: 1px solid var(--line-1); }
.cf-tr .reminder { font-style: italic; color: var(--ink-2); }
.cf-tr-none { contain: inline-size; margin: 0; font-size: var(--type-note); color: var(--ink-3); text-align: center; }

:root[data-input="touch"] .preview-pane .cf-tr { pointer-events: auto; touch-action: pan-y; }

.cf-errata { contain: inline-size; box-sizing: border-box; font-size: var(--type-note); color: var(--ink-2); text-align: left; }
.cf-errata > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 32px;
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.cf-errata > summary::-webkit-details-marker { display: none; }
.cf-errata > summary::after { content: "\25BE"; color: var(--ink-3); }
.cf-errata[open] > summary::after { content: "\25B4"; }
:root[data-input="touch"] .cf-errata > summary { min-height: 44px; }
.cf-errata-sheet { margin-top: var(--step-1); padding: var(--step-2); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-well); }
.cf-errata-when { margin: 0 0 var(--step-1); color: var(--ink-3); }
.cf-errata-printed { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink-1); font-size: var(--type-body); line-height: 1.45; }
.cf-errata-printed .reminder { font-style: italic; color: var(--ink-2); }

.cf-errata-mark { font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--surface-ground) 70%, transparent); padding: 0 0.3em; border-radius: var(--round-1); }
@media (min-width: 640px) {
  .cf-duo.has-tr { flex-direction: row; }
  .cf-duo.has-tr.has-errata { flex-wrap: wrap; }
  .cf-duo.has-tr > .cf-errata { order: 3; flex-basis: 100%; }
  .cf-duo.has-tr > .cf-tr { contain: size; flex: 0 0 280px; max-height: none; }
  .card-look .cf-duo.has-tr > .cf-tr { flex-basis: min(360px, calc(62vh * 744 / 1039)); font-size: var(--type-body); }
}

.cf-hand > .cf-rules[data-len="1"] { font-size: max(7cqw, var(--cf-floor, 0px)); }
.cf-hand > .cf-rules[data-len="2"] { font-size: max(6.4cqw, var(--cf-floor, 0px)); }


.zone-runeArea.is-minis { overflow: visible; }
.rune-minis { position: absolute; inset: 0; pointer-events: none; }
.rune-mini {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: calc(3px / var(--fit, 1));
  background: var(--rune-tint, var(--surface-2));
  box-shadow: inset 0 0 0 calc(1px / var(--fit, 1)) var(--rune-ink, var(--line-2));
  pointer-events: none;
  transition:
    rotate var(--motion-3) var(--ease-spring),
    scale var(--motion-2) var(--ease-standard),
    opacity var(--motion-2) var(--ease-standard),
    filter var(--motion-2) var(--ease-standard),
    translate var(--motion-2) var(--ease-standard);
}
.rune-mini > .ur-dom-icon { width: 72%; height: auto; max-height: 72%; object-fit: contain; }
.rune-mini.is-ready { box-shadow: inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--rune-ink, var(--ink-2)), 0 0 calc(4px / var(--fit, 1)) color-mix(in oklch, var(--rune-ink, var(--ink-2)) 55%, transparent); }
.rune-mini.is-spent { rotate: 90deg; scale: 0.83; }

.rune-mini.is-spent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--wash-ink); opacity: var(--wash-spent); }

:where(.table[data-shape="tall"]) .rune-mini.is-ready { box-shadow: inset 0 0 0 calc(2px / var(--fit, 1)) var(--rune-ink, var(--ink-2)), 0 0 calc(5px / var(--fit, 1)) color-mix(in oklch, var(--rune-ink, var(--ink-2)) 60%, transparent); }
:where(.table[data-shape="tall"]) .rune-mini.is-spent { opacity: 0.42; background: var(--surface-1); box-shadow: inset 0 0 0 calc(1px / var(--fit, 1)) color-mix(in oklch, var(--rune-ink, var(--line-2)) 45%, var(--line-2)); }
:where(.table[data-shape="tall"]) .rune-mini.is-spent::after { content: none; }
.rune-mini.is-recycled { background: transparent; box-shadow: none; outline: calc(1px / var(--fit, 1)) dashed var(--rune-ink, var(--ink-3)); outline-offset: calc(-1px / var(--fit, 1)); opacity: 0.5; filter: grayscale(0.6); }
.rune-mini.is-leaving { z-index: 1; }
.rune-mini.leaving { opacity: 0; scale: 0.6; }

.rune-mini.pay-exhaust { z-index: 2; translate: 0 calc(-3px / var(--fit, 1)); box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--decide); }
.rune-mini.pay-recycle { z-index: 2; translate: 0 calc(-3px / var(--fit, 1)); box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--power-ink); }
.rune-mini.pay-picked-up { z-index: 2; translate: 0 calc(-5px / var(--fit, 1)); box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--ink-1); }
.rune-mini.pay-swap { outline: calc(1px / var(--fit, 1)) dotted var(--decide); outline-offset: calc(1px / var(--fit, 1)); }
.rune-mini.is-candidate { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--candidate); }
.rune-mini.is-picked { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--decide); }
:where(.table[data-shape="tall"]) .rune-mini.is-spent:is(.pay-recycle, .pay-picked-up, .pay-swap, .is-candidate, .is-picked) { opacity: 1; }
.rune-zone-foot {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  display: flex;
  align-items: center;
  font: 700 var(--tall-word, 12px) / 1 var(--font-ui);
  color: var(--ink-1);
  pointer-events: none;
  white-space: nowrap;
}

.rune-pool-line { display: flex; align-items: center; gap: calc(4px / var(--fit, 1)); min-width: 0; overflow: hidden; }

:root, .table {
  --gem-fill: radial-gradient(circle at 35% 30%, var(--surface-2), var(--surface-ground));
  --gem-ring: var(--decide);
}

:root, .table, .cf {
  --font-numeral: var(--font-display);
  --num-rim-w: max(1px, 0.1em);
  --num-lift: 0 0 0 max(0.5px, 0.045em) rgba(9, 11, 20, 0.92), 0 0.07em 0.2em rgba(1, 7, 18, 0.65), inset 0 0.07em 0 rgba(230, 232, 240, 0.12);
  --might-shape: 0.3em 0.3em 50% 50% / 0.3em 0.3em 62% 62%;
}
.cf { --might-rim: color-mix(in srgb, var(--cf-hue) 55%, var(--ink-1)); }
.rune-pool-energy {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: calc(18px / var(--fit, 1));
  height: calc(18px / var(--fit, 1));
  padding: 0 calc(3px / var(--fit, 1));
  border-radius: calc(9px / var(--fit, 1));
  background: var(--gem-fill);
  box-shadow: inset 0 0 0 calc(1.5px / var(--fit, 1)) var(--gem-ring);
}
.rune-pool-power { display: flex; align-items: center; gap: calc(1px / var(--fit, 1)); color: var(--power-ink); }
.rune-pool-power > :is(img, svg, span) { width: calc(14px / var(--fit, 1)); height: calc(14px / var(--fit, 1)); flex: none; }
.rune-pool-power > .pool-more { width: auto; height: auto; font-size: inherit; margin-left: 0; }
.rune-pool-restricted { color: var(--ink-2); font-weight: 600; }

.zone-runeArea.is-minis > .rune-total {
  right: calc(2px / var(--fit, 1));
  bottom: 0;
  translate: 0 50%;
  min-width: calc(24px / var(--fit, 1));
  height: calc(20px / var(--fit, 1));
  padding: 0 calc(5px / var(--fit, 1));
  cursor: inherit;
  pointer-events: none;
}
.rune-zone-open {
  position: absolute;
  inset: 0 0 auto;
  
  height: max(100%, calc(var(--touch) / var(--fit, 1)));
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(4px / var(--fit, 1));
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--motion-1) var(--ease-standard);
}
.rune-zone-open:active { background: color-mix(in oklch, var(--ink-1) 8%, transparent); scale: var(--tap-row); transition-duration: 0s; }
.rune-zone-open:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }


.table .ui-sheet.rune-sheet > .ui-sheet-body { display: grid; gap: var(--step-5); padding: var(--step-4) var(--step-5) var(--step-5); overflow-y: auto; }

.rune-sheet-pool { display: grid; gap: var(--step-2); padding: var(--step-3) var(--step-4); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-well); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--rift-light) 18%, transparent); }
.rune-sheet-pool-row { display: flex; align-items: center; gap: var(--step-3); min-height: var(--touch); }
.rune-sheet-pool-row > .info-head { flex: none; }
.rune-sheet-pool .rune-pool-line { flex: 1 1 auto; gap: var(--step-2); font: 700 var(--type-read) / 1 var(--font-ui); color: var(--ink-1); }
.rune-sheet-pool .rune-pool-energy { min-width: 28px; height: 28px; padding: 0 var(--step-1); border-radius: 14px; }
.rune-sheet-pool .rune-pool-energy .pool-n { font-size: 15px; line-height: 1; text-box: trim-both cap alphabetic; }
.rune-sheet-pool .rune-pool-power { gap: 2px; }
.rune-sheet-pool .rune-pool-power > :is(img, svg, span) { width: 20px; height: 20px; }
.rune-sheet-pool .rune-pool-power > .pool-more { width: auto; height: auto; font-size: var(--type-body); color: var(--ink-2); margin-left: var(--step-1); }
.rune-sheet-pool .pool-undo { margin-left: auto; flex: none; }
.rune-sheet-pool .pool-line { font-size: var(--touch-floor-ui); }
.rune-sheet-pool .pool-domain-choice .cand { min-height: var(--touch); }

.rune-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--step-4) var(--step-3); }
.rune-cell { display: grid; justify-items: center; align-content: start; gap: var(--step-2); padding: var(--step-3) var(--step-2) var(--step-2); border-radius: var(--round-2); background: var(--surface-1); border: 1px solid var(--line-1); }
.rune-cell.is-recycled { background: transparent; border-style: dashed; }
.rune-cell-card { position: relative; width: 97px; height: 117px; }
.rune-cell-card > .card { position: absolute; }

.rune-cell-acts { display: flex; gap: var(--step-1); width: 100%; min-height: var(--touch); align-items: stretch; justify-content: center; }
.rune-act { flex: 1 1 0; min-width: 0; gap: var(--step-1); padding: 0 var(--step-1); font-weight: 600; white-space: nowrap; }
.rune-cell-acts[data-acts="1"] > .rune-act { flex: 0 1 50%; }
.rune-act > .ur-dom-icon, .rune-act > .pow-any { width: 16px; height: 16px; flex: none; }
.rune-act-gem { min-width: 16px; height: 16px; padding: 0; border-radius: 50%; flex: none; }

.rune-act-power { box-shadow: inset 3px 0 0 var(--rune-ink, var(--power-ink)); background: color-mix(in oklch, var(--rune-tint, var(--surface-2)) 55%, var(--surface-2)); }
.rune-cell-state { align-self: center; font-size: var(--type-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--power-ink); }
.rune-ghost { display: grid; place-items: center; overflow: hidden; border-radius: var(--round-2); background: var(--rune-tint, transparent); outline: 2px dashed var(--rune-ink, var(--line-2)); outline-offset: -2px; opacity: 0.55; }
.rune-ghost > .rune-ghost-art { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.7); }
.rune-ghost > .ur-dom-icon { width: 40px; height: 40px; }


@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .rune-mini { transition: none; }
}
:root[data-motion="reduce"] .rune-mini { transition: none; }


.side > .top .top-what { flex: 1 1 0; min-width: 0; container: top-what / inline-size; display: flex; flex-flow: row wrap; align-content: center; align-items: baseline; line-height: 1.15; }

.side > .top .top-what .top-game { flex: 0 0 100%; min-width: 0; }
.side > .top .top-what .top-dot { display: none; flex: none; white-space: pre; word-spacing: -0.3em; color: var(--ink-2); }
.side > .top .top-what .turn-number { flex: none; font-size: var(--type-label); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }

.table:is([data-shape="tall"], [data-shape="short"]) .side > .top .top-what { flex: 0 1 auto; container-type: normal; container-name: none; flex-flow: column nowrap; align-items: stretch; }
.table:is([data-shape="tall"], [data-shape="short"]) .side > .top .top-what .top-game { flex: 0 1 auto; }
@container top-what (min-width: 25ch) {
  .side > .top .top-what .top-game { flex: 0 1 auto; }
  .side > .top .top-what .top-dot { display: inline; }
}

.side > .top .top-game {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side > .top .top-what .turn-number { white-space: nowrap; }

.top-row .oracle-open { margin-left: auto; }
.top-row .oracle-open + .turn-menu { margin-left: var(--step-1); }

.table:is([data-shape="tall"], [data-shape="short"]) .top-row .turn-help { width: var(--touch); min-width: var(--touch); height: var(--touch); }
.table:is([data-shape="tall"], [data-shape="short"]) .side-right > .top .top-game { font-size: 12px; }

.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem:has(> .totem-series) { padding-top: 3px; padding-bottom: 3px; row-gap: 0; }
.table:is([data-shape="tall"], [data-shape="short"]) .stage .totem:has(> .totem-series) > .totem-name { line-height: 1.25; }

.ask-tray-card.ask-subset {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--step-3) var(--step-4);
  max-width: 100%;
  padding: var(--step-4);
  border: 1px solid var(--line-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.ask-tray-card.ask-subset:hover { box-shadow: 0 0 0 3px var(--decide), 0 10px 26px rgba(0, 0, 0, 0.5); }
.ask-tray-card.ask-subset:focus-visible { box-shadow: 0 0 0 3px var(--focus), 0 10px 26px rgba(0, 0, 0, 0.5); }
.ask-subset-place { display: flex; flex-direction: column; align-items: center; gap: var(--step-2); min-width: 0; }
.ask-subset-where {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--type-note);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}
.ask-subset-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--step-2); }
.ask-subset-face { flex: none; width: clamp(80px, calc(var(--dock-face) * 0.95), 132px); }
.ask-subset-face .cf-hand,
.ask-subset-face .ask-back { width: 100%; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }
.ask-tray-card.ask-subset .cf-hand { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }
.table:is([data-shape="tall"], [data-shape="short"]) .ask-tray-card.ask-subset { flex: 1 1 100%; padding: var(--step-3); }
.table:is([data-shape="tall"], [data-shape="short"]) .ask-subset-face { width: 72px; }


.card:is(.at-board, .at-slot):not(.spine):not(.covered) > .card-state[data-typed] {
  --state-size: calc(16px / var(--fit, 1));
  position: absolute;
  z-index: 4;
  left: calc(3px / var(--fit, 1));
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3px / var(--fit, 1));
  pointer-events: none;
}
:root[data-input="touch"] .stage .card:not(.spine):not(.covered) > .card-state[data-typed] { --state-size: calc(var(--touch-floor-ui) / var(--fit, 1)); }

:root[data-input="touch"] .stage .card:not(.spine):not(.covered) > .card-state[data-typed] > .state-type { padding: 0; width: var(--state-size); }
:root[data-input="touch"] .stage .card:not(.spine):not(.covered) > .card-state[data-typed] > .state-type > .state-type-word { display: none; }
.state-type { box-shadow: 0 0 0 max(1px, calc(1px / var(--fit, 1))) var(--line-2), var(--num-lift); color: var(--ink-1); }
.state-type > .state-type-glyph { width: 76%; height: 76%; }
.state-type > .state-type-glyph .now { fill: color-mix(in srgb, currentColor 22%, transparent); }
.state-type > .state-type-glyph .was { opacity: 0.7; }
.state-type-word { display: none; }
.card:not(.spine):not(.covered) > .card-state[data-typed] > .state-type {
  display: inline-flex;
  width: auto;
  gap: calc(3px / var(--fit, 1));
  padding: 0 calc(5px / var(--fit, 1)) 0 calc(2px / var(--fit, 1));
  border-radius: var(--round-pill);
}
.card:not(.spine):not(.covered) > .card-state[data-typed] > .state-type > .state-type-glyph { width: calc(var(--state-size) * 0.8); height: calc(var(--state-size) * 0.8); }
.card:not(.spine):not(.covered) > .card-state[data-typed] > .state-type > .state-type-word {
  display: inline;
  font-family: inherit;
  font-size: calc(var(--state-size) * 0.62);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.chain-answers { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; max-width: 100%; }

.chain-answers.at-lead { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
.chain-answers.at-lead > .ca { flex: none; }
.chain-answers.at-fan { justify-content: center; margin-top: var(--step-1); }
.ca {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 20px;
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 11px;
  line-height: 1.3;
}
.ca-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-arrow { color: var(--ink-2); font-weight: 700; }
.ca-thumb { flex: none; width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.ca-field { position: relative; overflow: hidden; }
.ca-field-art { position: absolute; left: 50%; top: 50%; width: 17px; height: 24px; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
.card:not(.spine):not(.covered) > .card-state[data-typed] > :not(.state-type) { display: none; }
.ca-mode { border-radius: var(--round-2); }
.ca-mode > .ca-word { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ca-mode-n {
  flex: none;
  min-width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--gem-fill);
  background-color: var(--surface-ground);
  box-shadow: 0 0 0 1px var(--ink-3);
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 15px;
  text-align: center;
}
.ca-tick { color: var(--ink-2); font-weight: 700; }
.ca-times { font-weight: 850; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chain-answers.at-row { margin-top: 2px; }
.chain-answers.at-row > .ca { min-height: 24px; font-size: var(--touch-floor-ui); }
.chain-answers.at-row .ca-thumb { width: 30px; height: 21px; }
.chain-answers.at-row .ca-field-art { width: 21px; height: 30px; }


.table[data-shape="wide"] .side-right { --panel-h: 212px; }
:root[data-input="touch"] .table[data-shape="wide"] .side-right { --panel-h: 252px; }
@container (min-width: 861px) {
  .table[data-shape="wide"] .side-right > .panel.decide:not(.over, .watching, .replay-bar, .is-dock):not(:has(> .decide-stops:not([hidden]))) {
    
    flex: 0 0 auto;
    height: auto;
  }
  .table[data-shape="wide"] .side-right > .panel.decide:not(.over, .watching, .replay-bar, .is-dock):not(:has(> .decide-stops:not([hidden]))) > .decide-stage {
    flex: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .table[data-shape="wide"] .side-right > .panel.decide:not(.over, .watching, .replay-bar, .is-dock):not(:has(> .decide-stops:not([hidden]))) > .decide-stage > .decide-body:not(:has(> .decide-copy)) { flex: none; }
  
  .table[data-shape="wide"] .side-right > .panel.decide:not(.over, .watching, .replay-bar, .is-dock):not(:has(> .decide-stops:not([hidden]))):has(> .decide-stage > .decide-body > .decide-copy) {
    flex: 0 0 auto;
    height: auto;
    min-height: var(--panel-h);
    max-height: max(var(--panel-h), 58dvh);
  }
  
  .table[data-shape="wide"] .side-right > .panel.decide:not(.over, .watching, .replay-bar, .is-dock):not(:has(> .decide-stops:not([hidden]))):has(> .decide-stage > .decide-trig) {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
  }
}


.side-region { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; min-height: 0; }
.side-region > .chat-table { flex: 1 1 auto; max-height: none; min-height: 0; }
.side-region > .chat-table .chat { max-height: none; }

.chat-table > .chat-table-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.side-region > :not(.panel.log, .chat-table) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@container (min-width: 861px) {
  .table[data-shape="wide"] .side-region { flex: 1 1 0; }
}
.side-region .log-lines { display: flex; flex-direction: column; }
.side-region .log-lines > * { flex: none; }
.side-region .log-lines > :first-child { margin-top: auto; }
.side-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-1);
  height: 44px;
  min-width: 0;
  border-top: 1px solid var(--line-1);
}
.side-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.side-tab, .side-level, .side-fold {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  border-radius: var(--round-pill);
  background: none;
  color: var(--ink-2);
  font: 600 12px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) { .side-tab:hover, .side-level:hover, .side-fold:hover { color: var(--ink-1); } }
.side-tab.on { background: var(--line-2); color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--ink-1); }
.side-tab:focus-visible, .side-level:focus-visible, .side-fold:focus-visible { outline: calc(var(--ring-w) / var(--fit, 1)) solid var(--focus); outline-offset: calc(var(--ring-off) / var(--fit, 1)); }

.side-tab::after, .side-level::after, .side-fold::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: max(100%, var(--touch));
  height: var(--touch);
  transform: translate(-50%, -50%);
}
.side-tab-word, .side-level-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-tab .shell-badge { position: static; flex: none; }
.side-level { flex: 0 1 auto; margin-left: auto; color: var(--ink-1); }


.side-fold { flex: none; justify-content: center; width: var(--touch); margin-left: calc(28px - var(--touch)); padding: 0; }
.side-fold-chev { display: inline-flex; color: var(--ink-3); transition: transform var(--motion-2) var(--ease-standard); }
.side-fold[aria-expanded="false"] .side-fold-chev { transform: rotate(180deg); }
.side-fold[data-idle] { visibility: hidden; }

.side-region > .panel.log.folded { flex: 0 0 auto; min-height: 0; margin-top: auto; }
.side-region > .panel.log.folded > .log-latest { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.log-latest > .log-row { height: auto; min-height: 0; }
.log-latest .log-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-level-chev { flex: none; display: inline-flex; color: var(--ink-3); transition: transform var(--motion-2) var(--ease-standard); }
.side-level[aria-expanded="true"] .side-level-chev { transform: rotate(180deg); }

.side-level[data-idle] { visibility: hidden; }


.side-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: var(--step-1); max-height: 70%; overflow-y: auto; pointer-events: none; }
.side-band > * { flex: none; margin: 0; pointer-events: auto; }

.side-band > .notice:not(.calm, .warn) { background: color-mix(in oklch, var(--bad) 14%, var(--surface-ground)); }
.side-band > .notice:not(.calm, .warn) + .oracle-why:not([hidden]) { align-self: flex-end; }
.side-band > .panel.elsewhere { max-height: 30cqh; background: var(--surface-1); }
.side-band > .compose { padding: var(--step-2); background: var(--surface-1); border-radius: var(--round-2); }
@container (max-width: 860px) {
  .side-band { position: static; max-height: none; pointer-events: auto; }
}


.side-tabs.is-sheet { flex: none; gap: var(--step-2); padding: var(--step-2) var(--step-3); border-bottom: 1px solid var(--line-1); }
.side-tabs.is-sheet > .side-tab { height: var(--touch); padding: 0 var(--step-3); font-size: var(--touch-floor-ui); }
.ui-sheet[data-sheet="log"] > .ui-sheet-body > .chat-table { flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column; padding: 0 var(--step-3) var(--step-3); overflow: hidden; }
.ui-sheet[data-sheet="log"] > .ui-sheet-body > .chat-table .chat { max-height: none; }
.turn-log { position: relative; }
.turn-log .shell-badge { position: absolute; top: -4px; right: -6px; }


@container (min-width: 861px) {
  :root[data-input="touch"] .table[data-shape="wide"] > .felt { grid-template-columns: minmax(0, 1fr) clamp(240px, 19%, 260px); }
  :root[data-input="touch"] .table[data-shape="wide"][data-beside="info"] > .felt { grid-template-columns: minmax(0, 1fr) clamp(240px, 19%, 260px) var(--info-sheet-w); }
}



.turn-rail { flex: none; display: flex; gap: 3px; height: 6px; margin: 2px 0 0; }
.turn-rail.words { height: auto; margin: var(--step-1) 0 0; font-size: 12px; line-height: 14px; color: var(--ink-2); }
.turn-rail[data-rail-side="you"] { --rail: var(--you); }
.turn-rail[data-rail-side="them"] { --rail: var(--opponent); }
.rail-cell { flex: 1 1 0; min-width: 0; display: flex; gap: 1px; }
.rail-half { position: relative; flex: 1 1 0; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--round-1); background: transparent; transition: background-color var(--motion-1) var(--ease-standard), border-color var(--motion-1) var(--ease-standard); }
.rail-half.past { border-color: transparent; background: color-mix(in srgb, var(--rail) 40%, transparent); }
.rail-half.now { border-color: transparent; background: var(--rail); }

.turn-rail[data-sweep] .rail-half { transition-delay: min(calc(var(--i, 0) * var(--stagger)), var(--motion-3)); }
.rail-half.stop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ink-2); }
.decide-main.has-intent { flex-direction: column; gap: 0; }
.decide-main.has-intent > .decide-label { line-height: 22px; }
.decide-intent { display: block; max-width: 100%; min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 14px; opacity: 0.85; }
.decide-main.wait .decide-intent { opacity: 1; color: var(--ink-3); }
.decide-main.hold { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.decide-main.hold:not(:has(> .decide-key)) { padding: 0 var(--step-2); }
.decide-fill { position: absolute; inset: 0; background: var(--surface-ground); opacity: 0.28; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.decide-main.hold > :not(.decide-fill) { position: relative; }
.decide-main.hold > .decide-key { position: absolute; }

.decide-main.end-turn { background: var(--end-turn); color: var(--end-turn-ink); }
.decide-main.end-turn .decide-fill { background: var(--end-turn-fill); opacity: 1; }
.decide-main.end-turn .decide-key { color: var(--end-turn-ink); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .rail-half { transition: none; }
}
:root[data-motion="reduce"] .rail-half { transition: none; }


:root[data-input="touch"] .side-right > .panel.decide { position: relative; z-index: 2; }
:root[data-input="touch"] .decide-seg::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--touch)); transform: translateY(-50%); }
:root[data-input="touch"] .dock-strip { height: max(44px, var(--touch)); }
:root[data-input="touch"] .vsai-option { min-height: var(--touch); }
:root[data-input="touch"] [data-shell-perspective] { min-width: var(--touch); min-height: var(--touch); }


@media (width <= 1100px) {
  .decide-main.has-intent:has(> .decide-key) { display: grid; grid-template-columns: auto auto; grid-template-rows: 22px 14px; justify-content: center; align-content: center; column-gap: 8px; padding: 0 4px; }
  .decide-main.has-intent:has(> .decide-key) > .decide-label { grid-area: 1 / 1; font-size: 13px; white-space: nowrap; }
  .decide-main.has-intent:has(> .decide-key) > .decide-key { grid-area: 1 / 2; position: static; align-self: center; padding: 0 2px; font-size: 11px; }
  .decide-main.has-intent:has(> .decide-key) > .decide-intent { grid-area: 2 / 1 / 3 / 3; justify-self: center; }
}


:root[data-input="touch"] .stage :is(.totem-hand, .seat-tally) { pointer-events: none; }
:root[data-input="touch"] .stage .half.far .zone-resources { pointer-events: none; }


:root[data-input="touch"] .stage .battlefield > .card.at-field::after { content: ""; position: absolute; inset: -8%; }


.operator-view-tag { flex: none; align-self: start; padding: 2px var(--step-1); border: 1px solid var(--warn, #d9a441); border-radius: 999px; background: color-mix(in srgb, var(--warn, #d9a441) 18%, transparent); color: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; z-index: 5; pointer-events: none; }
.table > .operator-view-tag { position: fixed; left: 50%; top: var(--step-1); transform: translateX(-50%); }

.operator-clock { flex: none; padding: 0 var(--step-2); font-size: 0.75rem; line-height: 1.3; color: inherit; z-index: 5; pointer-events: none; }
.table > .operator-clock { position: fixed; left: 50%; top: calc(var(--step-1) + 28px); transform: translateX(-50%); max-width: 90vw; text-align: center; padding: 2px var(--step-2); border-radius: 6px; background: color-mix(in srgb, var(--warn, #d9a441) 12%, transparent); }
.operator-hand { display: flex; gap: 0; align-items: end; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; order: 0; padding: var(--step-1) var(--step-2) 0; height: calc(var(--tall-dock, 104px) + 28px); }
.operator-hand::-webkit-scrollbar { display: none; }
.operator-hand > .operator-view-tag { position: sticky; left: 0; margin-right: var(--step-1); max-width: 9rem; white-space: normal; border-radius: 12px; line-height: 1.25; } 
.operator-hand > .hand-dock-slot > .card.at-hand { position: relative; left: 0; top: 0; width: 72px; height: 94px; }

.decide-rewind { flex: none; display: flex; gap: var(--step-2); height: 32px; }
.rewind-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 100%; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1); font: 600 13px/1 var(--font-ui); cursor: pointer; }
.rewind-btn.rewind-forward { flex: none; width: 36px; padding: 0; }
.rewind-icon { flex: none; display: inline-grid; place-items: center; }
.rewind-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rewind-key { flex: none; margin-left: auto; opacity: 0.8; }
.side > .panel.decide:has(> .decide-stage > .decide-rewind) { --decide-stage: 168px; }
:root[data-input="touch"] .side > .panel.decide:not(.is-dock):has(> .decide-stage > .decide-rewind) { --decide-stage: 208px; }
.table[data-shape="wide"] .side-right > .panel.decide:has(> .decide-stage > .decide-rewind) { --panel-h: 252px; }
:root[data-input="touch"] .table[data-shape="wide"] .side-right > .panel.decide:has(> .decide-stage > .decide-rewind) { --panel-h: 296px; }
:root[data-input="touch"] .panel.decide:not(.is-dock) .decide-rewind { height: var(--touch); }
:root[data-input="touch"] .panel.decide:not(.is-dock) .rewind-btn.rewind-forward { width: var(--touch); }

.panel.decide.is-dock > .decide-row { display: flex; align-items: stretch; gap: var(--step-2); margin-top: var(--step-2); }
.panel.decide.is-dock > .decide-row > .decide-body { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.panel.decide.is-dock > .decide-row > .decide-rewind { flex: none; height: auto; }
.panel.decide.is-dock .rewind-btn { flex: none; width: var(--touch); min-width: var(--touch); height: var(--touch); padding: 0; }
.panel.decide.is-dock .rewind-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.log-row.log-mark { gap: var(--step-2); padding-left: var(--step-2); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.log-mark-rule { flex: 1 1 8px; min-width: 8px; height: 1px; background: var(--line-2); }
.log-mark-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row.log-mark.is-me .log-mark-rule { background: var(--you); }
.log-row.log-mark.is-them .log-mark-rule { background: var(--opponent); }

.decide-rewinds { margin-top: var(--step-1); color: var(--ink-1); font-weight: 600; }
.results-rewinds { color: var(--ink-1); font-weight: 600; }


.hide-choice { gap: var(--step-2); }
.hidechoice-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--step-3); align-items: center; padding: var(--step-2) var(--step-3); text-transform: none; letter-spacing: 0; white-space: normal; border-bottom: 0; margin-bottom: 0; }
.hidechoice-who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.hidechoice-at { font-size: var(--type-note); color: var(--ink-2); }
.hidechoice-tiles { display: flex; gap: var(--step-2); padding: 0 var(--step-2); }
.hidechoice-tile { flex: 1 1 0; min-width: 0; min-height: 88px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: var(--step-2) var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; transition: background var(--motion-1) var(--ease-inout), scale var(--motion-1) var(--ease-inout); }
@media (hover: hover) { .hidechoice-tile:hover { background: var(--line-2); } }
.hidechoice-tile:active { scale: var(--tap); transition-duration: 0s; }
.hidechoice-tile.is-blocked { color: var(--ink-3); cursor: not-allowed; background: none; border-style: dashed; }
@media (hover: hover) { .hidechoice-tile.is-blocked:hover { background: none; } }
.hidechoice-icon { display: grid; place-items: center; color: var(--ink-2); }
.hidechoice-word { font-size: var(--type-head); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hidechoice-note { font-size: var(--type-note); color: var(--ink-2); line-height: 1.3; }
.hidechoice-cancel { align-self: center; min-height: 36px; padding: 0 var(--step-4); border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--type-body); cursor: pointer; }
@media (hover: hover) { .hidechoice-cancel:hover { color: var(--ink-1); } }
.card-menu.is-sheet.hide-choice .hidechoice-tiles { flex-direction: column; padding: 0 var(--step-4); }
.card-menu.is-sheet.hide-choice .hidechoice-tile { min-height: 64px; width: 100%; }
.card-menu.is-sheet.hide-choice .hidechoice-cancel { min-height: 48px; width: 100%; }


.stage .card.staged-move { opacity: 0.62; outline: 2px dashed var(--rift-light); outline-offset: -2px; }


.table[data-shape="tall"] { --tall-dock: clamp(104px, 15dvh, 132px); }

.table[data-shape="tall"] .hand-dock { scroll-padding-left: var(--step-2); }
.table[data-shape="tall"] .hand-dock > .hand-dock-slot { height: calc(var(--tall-dock) - 4px); width: max(72px, calc((var(--tall-dock) - 4px) * 0.716)); }

.table[data-shape="tall"] .hand-dock > .hand-dock-slot > .card.at-hand { width: 100% !important; height: 100% !important; }

.table[data-shape="tall"] .stage :is(.zone-mainDeck, .zone-runeDeck) { background-image: none; pointer-events: none; }
.table[data-shape="tall"] .stage .pile-tile {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  border-radius: var(--round-1);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--table-text);
}
.table[data-shape="tall"] .stage .pile-tile > .tile-n { position: static; display: block; padding: 0; border: 0; background: none; font: 800 calc(15px / var(--fit, 1)) / 1 var(--font-ui); letter-spacing: 0; }
.table[data-shape="tall"] .stage .pile-tile > .tile-word { font: 700 calc(12px / var(--fit, 1)) / 1 var(--font-ui); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }

.table[data-shape="tall"] .stage .pile-tab.is-pile { display: block; padding: 0; border: 0; background: none; box-shadow: none; border-radius: var(--round-1); }
.table[data-shape="tall"] .stage .pile-tab.is-pile[aria-expanded="true"] { box-shadow: inset 0 0 0 calc(2px / var(--fit, 1)) var(--ink-1); }
@media (hover: hover) { .table[data-shape="tall"] .stage .pile-tab.is-pile:hover { background: none; } }
.table[data-shape="tall"] .stage :is(.pile-chip, .pile-tab.is-empty) {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(3px / var(--fit, 1));
  box-sizing: border-box;
  height: calc(20px / var(--fit, 1));
  padding: 0 calc(5px / var(--fit, 1));
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  background: color-mix(in srgb, var(--felt-2) 92%, transparent);
  font: 850 calc(13px / var(--fit, 1)) / 1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--table-text);
  pointer-events: none;
  z-index: 6;
}
.table[data-shape="tall"] .stage .pile-chip > .pile-tab-glyph { width: calc(11px / var(--fit, 1)); height: calc(11px / var(--fit, 1)); }
.table[data-shape="tall"] .stage .zone-trash[data-side="far"] :is(.pile-chip, .pile-tab.is-empty) { left: calc(4px / var(--fit, 1)); bottom: calc(4px / var(--fit, 1)); }
.table[data-shape="tall"] .stage .zone-trash[data-side="near"] :is(.pile-chip, .pile-tab.is-empty) { right: calc(4px / var(--fit, 1)); top: calc(4px / var(--fit, 1)); }

.table[data-shape="tall"] .stage .pile-tab.is-band {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4px / var(--fit, 1));
  box-sizing: border-box;
  
  height: min(max(40px, calc(44px / var(--fit, 1))), calc(129px - 31px / var(--fit, 1)));
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: 850 calc(13px / var(--fit, 1)) / 1 var(--font-ui);
  color: var(--power-ink);
}
.table[data-shape="tall"] .stage .pile-tab.is-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--power-ink) 60%, transparent);
  border-radius: var(--round-1);
  background: color-mix(in srgb, var(--power-ink) 18%, var(--surface-1));
}
.table[data-shape="tall"] .stage .zone-trash[data-side="near"] .pile-tab.is-band { bottom: 0; align-items: flex-end; padding-bottom: calc((40px - 20px / var(--fit, 1)) / 2); }
.table[data-shape="tall"] .stage .zone-trash[data-side="near"] .pile-tab.is-band::before { bottom: 0; }
.table[data-shape="tall"] .stage .zone-trash[data-side="far"] .pile-tab.is-band { top: 0; align-items: flex-start; padding-top: calc((40px - 20px / var(--fit, 1)) / 2); }
.table[data-shape="tall"] .stage .zone-trash[data-side="far"] .pile-tab.is-band::before { top: 0; }
.table[data-shape="tall"] .stage .pile-tab.is-band > * { position: relative; }
.table[data-shape="tall"] .stage .pile-tab.is-band > .pile-tab-glyph { width: calc(12px / var(--fit, 1)); height: calc(12px / var(--fit, 1)); color: currentColor; }
.table[data-shape="tall"] .stage .pile-tab.is-band[aria-expanded="true"]::before { border-color: var(--ink-1); }

.table[data-shape="tall"] .stage .card > .ab-dot {
  position: absolute;
  z-index: 3;
  top: calc(2px / var(--fit, 1));
  left: calc(2px / var(--fit, 1));
  width: calc(8px / var(--fit, 1));
  height: calc(8px / var(--fit, 1));
  border-radius: 50%;
  background: var(--decide);
  box-shadow: 0 0 0 calc(1px / var(--fit, 1)) rgba(9, 11, 20, 0.92);
  pointer-events: none;
}
.table[data-shape="tall"] .stage .card > .ab-dot[hidden] { display: none; }
.table[data-shape="tall"] .stage .card > .ab-badges { top: 30%; max-height: 40%; overflow: hidden; }
.table[data-shape="tall"] .stage .card > .ab-badges > .ab-badge { min-height: calc(22px / var(--fit, 1)); font-size: calc(12px / var(--fit, 1)); font-weight: 800; }

.table[data-shape="tall"] .stage .card.held { z-index: 8; }
.table[data-shape="tall"] .stage .card.held > .ab-badges { display: flex; }
.table[data-shape="tall"] .stage .card.held > .ab-badges[hidden] { display: none; }

.table[data-shape="tall"] .stage .card.at-slot .cf.whole .cf-art { object-fit: contain; }

.table[data-shape="tall"] .stage .card.at-pile .cf-might { display: none; }

.table[data-shape="tall"] .zone-runeArea.is-minis > .rune-total {
  translate: none;
  min-width: calc(32px / var(--fit, 1));
  height: calc(20px / var(--fit, 1));
  padding: 0 calc(6px / var(--fit, 1));
  font-size: calc(13px / var(--fit, 1));
  z-index: 4;
}
.table[data-shape="tall"] .zone-runeArea.is-minis[data-side="far"] > .rune-total { right: 0; bottom: 0; }
.table[data-shape="tall"] .zone-runeArea.is-minis[data-side="near"] > .rune-total { left: 0; right: auto; top: 0; bottom: auto; }
.table[data-shape="tall"] .zone-runeArea.is-minis[data-side="far"] > .rune-zone-foot { right: calc(60px / var(--fit, 1)); }
.table[data-shape="tall"] .zone-runeArea.is-minis[data-side="near"] > .rune-zone-foot { top: 2px; bottom: auto; left: calc(60px / var(--fit, 1)); }

.table[data-shape="tall"] .stage .half-tally.corner { transform: translate(-100%, 0); font-size: calc(13px / var(--fit, 1)); }
.table[data-shape="tall"] .stage .half-tally.corner.near { transform: translate(-100%, -100%); }

.table[data-shape="tall"] .stage .half.far .zone-legend .card.at-slot::after { left: max(0px, calc((var(--touch) + 0.25px) / var(--fit, 1) - 106px)); right: calc(-10px / var(--fit, 1)); }

.table[data-shape="tall"] .stage .half.far .zone-champion .card.at-slot::after { left: calc(-10px / var(--fit, 1)); }

.table[data-shape="tall"] .stage .half.far :is(.zone-legend, .zone-champion) .card.at-slot::after { top: -45%; }

.table[data-shape="tall"] .stage .zone-runeArea.is-minis[data-side="far"] { pointer-events: none; }
.table[data-shape="tall"] .stage :is(.zone-champion, .zone-legend) > .empty-slot { pointer-events: none; }


.pile-tab.is-lit { box-shadow: 0 0 0 2px var(--candidate), 0 0 12px 2px var(--candidate-glow); }
.pile-tab.is-lit[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--candidate), 0 0 12px 2px var(--candidate-glow), inset 0 0 0 1px var(--ink-1); }
.pile-badge { position: absolute; top: -6px; left: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font: 850 12px / 1 var(--font-ui); background: var(--candidate); color: var(--surface-1); pointer-events: none; }
.table[data-shape="tall"] .stage .pile-tab.is-pile.is-lit { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--candidate), 0 0 calc(12px / var(--fit, 1)) calc(2px / var(--fit, 1)) var(--candidate-glow); }
.table[data-shape="tall"] .stage .pile-tab.is-pile.is-lit[aria-expanded="true"] { box-shadow: 0 0 0 calc(2px / var(--fit, 1)) var(--candidate), 0 0 calc(12px / var(--fit, 1)) calc(2px / var(--fit, 1)) var(--candidate-glow), inset 0 0 0 calc(2px / var(--fit, 1)) var(--ink-1); }

.table[data-shape="tall"] .stage .pile-tab:is(.is-pile, .is-band) > .pile-badge { min-width: calc(16px / var(--fit, 1)); height: calc(16px / var(--fit, 1)); border-radius: calc(8px / var(--fit, 1)); padding: 0 calc(4px / var(--fit, 1)); font-size: calc(12px / var(--fit, 1)); }
.table[data-shape="tall"] .stage .zone-trash[data-side="near"] .pile-tab.is-pile > .pile-badge { top: auto; right: auto; left: calc(3px / var(--fit, 1)); bottom: calc(3px / var(--fit, 1)); }
.table[data-shape="tall"] .stage .zone-trash[data-side="far"] .pile-tab.is-pile > .pile-badge { top: calc(3px / var(--fit, 1)); right: calc(3px / var(--fit, 1)); left: auto; }
.card-window .cw-playable-head { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--candidate); }


:root { --tilt-persp: 700px; }
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover::before,
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover > :not(.hand-rest),
.card.at-hand[data-tilt-hold]:not(.hidden)::before,
.card.at-hand[data-tilt-hold]:not(.hidden) > :not(.hand-rest) {
  transform-origin: 50% 130%;
  transform: translateY(-80%) perspective(var(--tilt-persp)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(80%);
  
  will-change: transform;
}

:is(.card, .st-moments-object) > .hand-sheen,
:is(.card, .st-moments-object) > .hand-holo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--round-1);
  pointer-events: none;
  opacity: 0;
}
:is(.card, .st-moments-object) > .hand-sheen > i,
:is(.card, .st-moments-object) > .hand-holo > i {
  position: absolute;
  inset: -100%;
  transform: translate(var(--sheen-x, 0%), var(--sheen-y, 0%));
  will-change: transform;
}
:is(.card, .st-moments-object) > .hand-sheen > i {
  background: linear-gradient(115deg, transparent 41%, oklch(98% 0.01 270 / 0.5) 49%, oklch(100% 0 0 / 0.72) 50%, oklch(98% 0.01 270 / 0.5) 51%, transparent 59%);
}
:is(.card, .st-moments-object) > .hand-holo > i {
  background: repeating-linear-gradient(
    115deg,
    color-mix(in oklch, var(--holo-hue, var(--ink-3)) 70%, transparent) 0%,
    oklch(86% 0.14 95 / 0.55) 5%,
    oklch(84% 0.14 160 / 0.5) 10%,
    oklch(82% 0.13 230 / 0.55) 15%,
    oklch(76% 0.16 305 / 0.55) 20%,
    color-mix(in oklch, var(--holo-hue-2, var(--ink-3)) 70%, transparent) 25%,
    oklch(80% 0.16 15 / 0.45) 30%
  );
}

:is(.card, .st-moments-object) > .hand-holo { opacity: 0.26; transition: opacity var(--motion-2) var(--ease-standard); }
:is(.card, .st-moments-object) > .hand-sheen { transition: opacity var(--motion-2) var(--ease-standard); }
.half.near .card.at-hand[data-hand-card]:not(.hidden):hover > .hand-sheen,
.card.at-hand[data-tilt-hold]:not(.hidden) > .hand-sheen { opacity: var(--sheen-a, 0.6); }
.card.at-hand[data-tilt-hold]:not(.hidden) > .hand-holo { opacity: var(--holo-a, 0.62); }
@media (hover: hover) {
  .card[data-holo]:not(.hidden):hover > .hand-holo { opacity: var(--holo-a, 0.62); }
}

.half.near .card.at-hand[data-hand-card]:not(.hidden):hover ~ .card.at-hand[data-hand-card] { rotate: calc(var(--fan-rot, 0deg) + 3deg); }
.half.near .card.at-hand[data-hand-card]:has(~ .card.at-hand[data-hand-card]:not(.hidden):hover) { rotate: calc(var(--fan-rot, 0deg) - 3deg); }

.moments-ghost > .moment-back { border-radius: var(--round-1); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.card, .st-moments-object) > .hand-sheen { display: none; }
  :root:not([data-motion="full"]) :is(.card, .st-moments-object) > .hand-holo > i { transform: none; }
  :root:not([data-motion="full"]) .half.near .card.at-hand[data-hand-card]:not(.hidden):hover::before,
  :root:not([data-motion="full"]) .half.near .card.at-hand[data-hand-card]:not(.hidden):hover > :not(.hand-rest) { transform: none; }
}
:root[data-motion="reduce"] :is(.card, .st-moments-object) > .hand-sheen { display: none; }
:root[data-motion="reduce"] :is(.card, .st-moments-object) > .hand-holo > i { transform: none; }
:root[data-motion="reduce"] .half.near .card.at-hand[data-hand-card]:not(.hidden):hover::before,
:root[data-motion="reduce"] .half.near .card.at-hand[data-hand-card]:not(.hidden):hover > :not(.hand-rest) { transform: none; }


.table[data-turn-of="them"] .half.near .zone-hand,
.table[data-turn-of="them"] [data-hand-dock] { translate: 0 10px; }
.table[data-turn-of="them"] [data-hand-dock],
.table[data-turn-of="you"] .score-fan { opacity: 0.72; }
.table[data-turn-of="them"] .half.far .zone-hand { translate: 0 -6px; }

.table[data-turn-of="them"] .half.near .card.at-hand[data-hand-card] > .cf::before { opacity: 0.28; transition-duration: var(--motion-3); }
.half.far .card.hidden.at-hand[data-hand-card] {
  transition:
    rotate var(--motion-2) var(--ease-emphasis),
    translate var(--motion-2) var(--ease-emphasis),
    scale var(--motion-2) var(--ease-emphasis),
    opacity var(--motion-3) var(--ease-standard);
}
.table[data-turn-of="you"] .half.far .card.hidden.at-hand[data-hand-card] { opacity: 0.72; }

.table[data-turn-of="them"] .score-fan { translate: 0 -2px; }

.moments-layer > .moments-intent { border-radius: var(--round-2); opacity: 0; box-shadow: inset 0 0 0 2px var(--opponent), 0 0 24px 4px color-mix(in oklch, var(--opponent) 60%, transparent); }


.versus-art { display: block; background: transparent; }
.versus-art .versus-ground { position: absolute; inset: 0; background: var(--surface-ground); }
.versus-art.is-pending :is(.versus-side, .versus-seam, .versus-vs) { visibility: hidden; }
.versus-art .versus-side { position: absolute; left: 50%; display: block; width: min(92vw, 88vh); min-width: 0; margin-left: calc(min(92vw, 88vh) / -2); padding: 0; background: none; }
.versus-art .versus-side.them { top: 6vh; height: 42vh; }
.versus-art .versus-side.you { top: 48vh; height: 46vh; }
.versus-art .versus-frame { position: absolute; inset: 0; overflow: hidden; container-type: size; background: var(--surface-1); }
.versus-art .versus-side.them .versus-frame { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 100%); }
.versus-art .versus-side.you .versus-frame { clip-path: polygon(0 5vh, 100% 0, 100% 100%, 0 100%); }

.versus-art .versus-img {
  --ra: 0.716073; --cl: 0.25; --ct: 0.11; --cr: 0.915; --cb: 0.63;
  --fu: calc((var(--cl) + var(--cr)) / 2); --fv: calc(var(--ct) + 0.4 * (var(--cb) - var(--ct)));
  --iw: max(calc(100cqw / (var(--cr) - var(--cl))), calc(100cqh * var(--ra) / (var(--cb) - var(--ct))));
  --ih: calc(var(--iw) / var(--ra));
  position: absolute; max-width: none; object-fit: cover; width: var(--iw); height: var(--ih);
  left: clamp(calc(100cqw - var(--cr) * var(--iw)), calc(50cqw - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  top: clamp(calc(100cqh - var(--cb) * var(--ih)), calc(50cqh - var(--fv) * var(--ih)), calc(-1 * var(--ct) * var(--ih)));
}
.versus-art .versus-ring { border-width: 3px; }
.versus-art .versus-words { position: absolute; left: 4%; right: 4%; display: grid; gap: 2px; justify-items: start; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); }
.versus-art .versus-side.them .versus-words { bottom: 7vh; }
.versus-art .versus-side.you .versus-words { top: 7vh; }
.versus-art .versus-name { font-family: var(--font-display); font-size: clamp(22px, 4.6vh, 44px); font-weight: 800; line-height: 1.05; color: var(--ink-1); }
.versus-art .versus-legend { font-size: clamp(13px, 2.2vh, 18px); color: var(--ink-1); opacity: 0.85; }
.versus-art .versus-seam { position: absolute; left: 50%; top: 50.5vh; width: min(92vw, 88vh); height: 2px; margin: -1px 0 0 calc(min(92vw, 88vh) / -2); background: linear-gradient(90deg, transparent, var(--ink-1) 24%, var(--ink-1) 76%, transparent); rotate: calc(-1 * atan2(5vh, min(92vw, 88vh))); box-shadow: 0 0 14px 1px color-mix(in oklch, var(--rift-glow) 70%, transparent); }
.versus-art .versus-vs { position: absolute; left: 50%; top: 50.5vh; translate: -50% -50%; padding: 0 var(--step-3); background: var(--surface-ground); font-size: clamp(18px, 3vh, 30px); }

.versus:not(.versus-art) .versus-words { display: contents; }


.pregame-overlay[data-pregame-kind="awaiting_mulligan"] { background: color-mix(in oklch, var(--surface-ground) 95%, transparent); }
.table[data-opening="choose"] .half.near .zone-hand,
.table[data-opening="choose"] [data-hand-dock] { visibility: hidden; }
.table[data-shape="wide"] .pregame-overlay .mulligan-card { rotate: var(--mull-rot, 0deg); translate: 0 var(--mull-drop, 0px); }
.pregame-overlay .bounds > .act.submit { min-height: var(--control-lg); padding: 0 var(--step-6); border: 0; border-radius: var(--round-1); background: var(--decide); color: var(--surface-ground); font-size: 17px; font-weight: 800; }


.rift-stack { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; list-style: none; z-index: 40; pointer-events: none; }
.rift-li { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.rift-card { position: relative; display: block; overflow: hidden; box-sizing: border-box; border: 2px solid var(--you); border-radius: 5px; background: var(--surface-1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); container-type: size; will-change: auto; }
.rift-card.is-them { border-color: var(--opponent); }

.rift-art {
  --ra: 0.716073; --cl: 0.205; --ct: 0.06; --cr: 0.765; --cb: 0.495;
  --fu: calc((var(--cl) + var(--cr)) / 2); --fv: calc(var(--ct) + 0.4 * (var(--cb) - var(--ct)));
  --iw: max(calc(100cqw / (var(--cr) - var(--cl))), calc(100cqh * var(--ra) / (var(--cb) - var(--ct))));
  --ih: calc(var(--iw) / var(--ra));
  position: absolute; max-width: none; object-fit: cover; width: var(--iw); height: var(--ih);
  left: clamp(calc(100cqw - var(--cr) * var(--iw)), calc(50cqw - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  top: clamp(calc(100cqh - var(--cb) * var(--ih)), calc(50cqh - var(--fv) * var(--ih)), calc(-1 * var(--ct) * var(--ih)));
}
.rift-field { position: absolute; inset: 0; --rift-hue: var(--ink-3); background: radial-gradient(circle at 50% 38%, var(--rift-hue), var(--surface-2) 78%); }
.rift-plate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 0.3em; padding: 0.12em 0.2em; font-size: 17cqw; line-height: 1.2; color: var(--ink-1); background: rgba(5, 10, 22, 0.86); white-space: nowrap; }
.rift-order { min-width: 1.3em; padding: 0 0.2em; border-radius: 0.65em; font-weight: 700; text-align: center; color: var(--ink-1); background: var(--you); }
.rift-card.is-them .rift-order { background: var(--opponent); }


.hidden-tie { border-radius: 2px; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; background: linear-gradient(90deg, transparent 0%, var(--tie-hue) 20%, var(--ink-1) 50%, var(--tie-hue) 80%, transparent 100%); }
.hidden-tie.you { --tie-hue: var(--you); }
.hidden-tie.them { --tie-hue: var(--opponent); }