/* Coach web app. Dark, square, quiet; modelled on choombattler.com. */

:root {
  --bg: #0b0d10;
  --panel: #12161a;
  --panel-2: #171c21;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #e8edf0;
  --muted: #9aa6ad;
  --body: #c9d1d6;
  --accent: #38e1f2;
  --accent-dim: rgba(56, 225, 242, 0.12);
  --rival: #f2e600;
  --good: #3dbe6e;
  --bad: #ff8a7a;
  --power: #c8102e;

  --f-display: "Rajdhani", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --chamfer: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --chamfer-s: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-mid: 180ms;

  --pad: clamp(16px, 3vw, 40px);
  --gap: 16px;
  --card-ratio: 734 / 1024;
  /* Card width: as large as fits beside the chrome above and the decision zone below. */
  --card-max: clamp(120px, calc((100vh - 500px) * 0.7168), 236px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

html.ready body {
  opacity: 1;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

kbd {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  letter-spacing: 0.04em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--f-mono);
}

.muted {
  color: var(--muted);
}

.label,
.eyebrow,
.filter-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow {
  color: var(--accent);
}

.noscript {
  padding: 40px;
  color: var(--body);
}

/* Chamfered shapes drawn on pseudo-elements, so focus rings on the element itself aren't clipped. */
.chamfer,
.btn,
.choice,
.deck,
.notice,
.result {
  position: relative;
  isolation: isolate;
}

.btn::before,
.choice::before,
.deck::before,
.notice::before,
.result::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--edge, var(--line-2));
  clip-path: var(--chamfer);
  transition: background var(--t-fast) var(--ease);
}

.btn::after,
.choice::after,
.deck::after,
.notice::after,
.result::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--fill, var(--panel));
  clip-path: var(--chamfer);
  transition: background var(--t-fast) var(--ease);
}

/* ------------------------------------------------------------------------------------------- */
/* Top bar */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.topbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  height: 52px;
  padding: 0 var(--pad);
  display: flex;
  align-items: stretch;
  gap: 36px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 14px;
  height: 14px;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.brand-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.brand-sub {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 10px;
  border-left: 1px solid var(--line-2);
  line-height: 14px;
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-width: 0;
}

.nav-short {
  display: none;
}

/* Narrower windows: the short labels ("Mulligan", "Guide") and no subtitle, so the six sections
   sit calmly on one line. */
@media (max-width: 1100px) {
  .nav-full {
    display: none;
  }
  .nav-short {
    display: inline;
  }
  .topbar .brand-sub {
    display: none;
  }
}

@media (max-width: 760px) {
  .nav {
    gap: 16px;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease);
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* The narrowest phones: the mark without the name, smaller labels, and a bar that scrolls sideways
   (fading at its right edge) when the six don't fit: the page itself never grows sideways. */
@media (max-width: 480px) {
  .brand-name {
    display: none;
  }
  .brand {
    flex: none;
  }
  .nav {
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-right: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .nav.is-scrolled {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav-link {
    flex: none;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Pages */

.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px var(--pad) 40px;
}

.page-head {
  max-width: 760px;
  margin-bottom: 28px;
}

.page-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 6px 0 10px;
}

.page-lede {
  color: var(--body);
  font-size: 16px;
  max-width: 640px;
}

/* Buttons */

.btn {
  --fill: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

.btn--primary {
  --edge: var(--accent);
  --fill: var(--accent);
  color: var(--bg);
}

.btn--primary:hover {
  --edge: #7aecf7;
  --fill: #7aecf7;
}

.btn--primary kbd {
  color: rgba(11, 13, 16, 0.7);
  border-color: rgba(11, 13, 16, 0.35);
}

.btn--ghost {
  --fill: var(--bg);
  color: var(--text);
}

.btn--ghost:hover {
  --edge: var(--accent);
}

.link {
  border: 0;
  background: none;
  padding: 6px 2px;
  min-height: 32px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--t-fast) var(--ease),
    text-decoration-color var(--t-fast) var(--ease);
}

.link:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.link--danger {
  color: var(--bad);
}

.link--danger:hover {
  color: var(--bad);
}

/* Notices: empty and error states */

.notice {
  --fill: var(--panel);
  max-width: 560px;
  margin: 48px auto;
  padding: 36px 36px 32px;
}

.notice-mark {
  width: 12px;
  height: 12px;
  background: var(--muted);
  margin-bottom: 18px;
}

.notice--error .notice-mark {
  background: var(--bad);
}

.notice-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 8px;
}

.notice-body {
  color: var(--body);
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Skeleton */

.sk-line {
  display: block;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 0;
}

.sk-line.w60 {
  width: 60%;
}

.sk-line.w40 {
  width: 40%;
}

.drill-title .sk-line {
  height: 22px;
  width: 280px;
  max-width: 60vw;
}

/* ------------------------------------------------------------------------------------------- */
/* Card faces */

.face {
  position: absolute;
  inset: 0;
  border-radius: 3.2% / 2.3%;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.face.loaded {
  background: transparent;
  box-shadow: none;
}

.face .art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.is-loading .face,
.deck--skeleton .face {
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    background: var(--panel);
  }
  50% {
    background: var(--panel-2);
  }
}

/* Drawn stand-in for a card with no art. Sized in container units so it scales like the art. */
.face.noart {
  container-type: inline-size;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.tc {
  --tc: #8aa0ad;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6cqw 6.5cqw;
  gap: 2.5cqw;
  border-top: 3cqw solid var(--tc);
  color: var(--text);
}

.tc--blue {
  --tc: #2f8fd8;
}
.tc--red {
  --tc: #d8433b;
}
.tc--green {
  --tc: #3fae5a;
}
.tc--yellow {
  --tc: #d9c400;
}

.tc-head {
  display: flex;
  align-items: flex-start;
  gap: 4cqw;
}

.tc-cost {
  flex: none;
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 15cqw;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10cqw;
  line-height: 1;
  color: var(--bg);
  background: var(--tc);
  clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%);
}

.tc-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 9.5cqw;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tc-name small {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 5.6cqw;
  text-transform: none;
  letter-spacing: 0;
  color: var(--body);
  margin-top: 1cqw;
}

.tc-type {
  font-family: var(--f-mono);
  font-size: 4.6cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2.5cqw;
  border-bottom: 1px solid var(--line-2);
}

.tc-text {
  flex: 1;
  font-size: 6.2cqw;
  line-height: 1.32;
  color: var(--body);
  overflow: hidden;
}

.tc-text p + p {
  margin-top: 2.5cqw;
}

.tc-text .tc-missing {
  font-family: var(--f-mono);
  font-size: 4.6cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tc-text .kw {
  font-weight: 600;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 0.86em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tc-power {
  display: grid;
  place-items: center;
  min-width: 13cqw;
  height: 13cqw;
  padding: 0 2cqw;
  background: var(--power);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 9cqw;
  color: #fff;
}

.tc-ram {
  font-family: var(--f-mono);
  font-size: 4.6cqw;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Slots and the peek */

.slot {
  position: relative;
  aspect-ratio: var(--card-ratio);
  outline: none;
  -webkit-touch-callout: none;
  user-select: none;
  cursor: zoom-in;
}

.slot .card {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  border-radius: 3.2% / 2.3%;
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
  pointer-events: none;
}

.slot.peeked,
.slot.settling {
  z-index: 40;
}

.slot.peeked .card {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(56, 225, 242, 0.28),
    0 0 36px rgba(56, 225, 242, 0.14);
}

.slot:focus-visible .card {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------------------------- */
/* Deck select */

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.deck {
  --fill: var(--panel);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.deck:hover {
  --edge: var(--accent);
}

.deck:focus-visible {
  --edge: var(--accent);
  outline-offset: 4px;
}

.deck-legends {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 22px 22px 0;
}

.deck-legend {
  position: relative;
  aspect-ratio: var(--card-ratio);
}

.deck-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 20px;
  flex: 1;
}

.deck-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.deck-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.deck-rivals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 13.5px;
  color: var(--body);
}

.rival-label {
  color: var(--rival);
}

.deck-rival .share {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

.deck-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deck-progress {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}

.deck-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.deck-go .arrow {
  display: inline-block;
  transition: transform var(--t-mid) var(--ease);
}

.deck:hover .deck-go .arrow {
  transform: translateX(3px);
}

.deck--skeleton {
  cursor: default;
}

.deck--skeleton .deck-body {
  min-height: 120px;
}

/* ------------------------------------------------------------------------------------------- */
/* Drill */

.drill {
  padding-top: 18px;
  padding-bottom: 28px;
}

.drill-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 14px;
}

.back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.back:hover {
  color: var(--text);
  border-color: var(--accent);
}

.back .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

.drill-heading {
  min-width: 0;
  flex: 1;
}

.drill-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stats b {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.stats .dot {
  color: var(--line-2);
}

/* Filters */

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.filters-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  min-width: 0;
}

.filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line-2);
}

.seg-btn {
  border: 0;
  background: none;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.seg-btn + .seg-btn {
  border-left: 1px solid var(--line-2);
}

.seg-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.seg-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
}

.seg-btn:focus-visible {
  outline-offset: -2px;
}

.filters-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* A bank that failed to load: only the way back and the notice. */
.drill.is-error .filters,
.drill.is-error .stats,
.drill.is-error .drill-title {
  display: none;
}

.pass {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 600ms var(--ease);
}

.pass.flash {
  color: var(--accent);
}

.reset {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reset-q {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}

/* Stage */

.drill-body {
  padding-top: 18px;
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  outline: none;
}

.stage.enter .context,
.stage.enter .hand {
  animation: deal 200ms var(--ease);
}

@keyframes deal {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 1;
  }
}

/* Context: seat, rival, rival's choice */

.context {
  display: flex;
  align-items: center;
  gap: 16px 32px;
  min-height: 72px;
  flex-wrap: wrap;
}

.seat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.seat-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seat-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rival {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 32px;
  border-left: 1px solid var(--line-2);
  min-width: 0;
}

.rival-legends {
  display: flex;
  gap: 18px;
}

.rl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slot.thumb {
  width: 46px;
  flex: none;
}

.rl-name {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}

.rl-name small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

.rival-side {
  display: flex;
  align-items: center;
  gap: 6px 16px;
  margin-left: 10px;
}

.rival-trio {
  display: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.choice-chip {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rival);
  border: 1px solid rgba(242, 230, 0, 0.45);
  padding: 7px 12px;
  white-space: nowrap;
}

/* Going first: the rival decides after you; quiet, but it keeps the layout identical. */
.choice-chip.is-later {
  color: var(--muted);
  border-color: var(--line-2);
}

.again-chip {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(56, 225, 242, 0.4);
  padding: 3px 7px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Hand */

.hand {
  --n: 6;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, var(--card-max)));
  justify-content: center;
  gap: var(--gap);
}

/* Decision zone: both states share one grid cell, so its size never changes on reveal. */

.zone {
  display: grid;
  margin-top: 6px;
}

.decide,
.result {
  grid-area: 1 / 1;
  transition:
    opacity var(--t-mid) var(--ease),
    visibility 0s linear 0s;
}

.zone[data-state="deciding"] .result,
.zone[data-state="revealed"] .decide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-fast) var(--ease),
    visibility 0s linear var(--t-fast);
}

/* The invisible worst-case verdict that fixes the zone's height. */
.zone .zone-sizer {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

.decide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.choices {
  display: flex;
  gap: 16px;
}

.choice {
  --fill: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 280px;
  min-height: 68px;
  padding: 0 22px 0 26px;
  border: 0;
  background: none;
  cursor: pointer;
}

.choice-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.choice:hover:not(:disabled) {
  --edge: var(--accent);
  --fill: #151c21;
}

.choice:active:not(:disabled) {
  --fill: #1a252b;
}

.choice:disabled {
  cursor: default;
}

.choice:disabled .choice-label,
.choice:disabled kbd {
  opacity: 0.45;
}

.drill:not(.is-loading) .choice:disabled .choice-label,
.drill:not(.is-loading) .choice:disabled kbd {
  opacity: 1;
}

.hint {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Result */

.result {
  --fill: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  align-items: center;
  gap: 20px 36px;
  padding: 20px 26px 20px 28px;
}

/* Top-aligned, so the verdict line sits at the same height for every hand of either kind. */
.verdict {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  align-self: start;
}

/* Inline flow, so a wrapped verdict keeps its tag right after the last word. */
.verdict-line {
  position: relative;
  padding-left: 22px;
  margin-bottom: 2px;
  font-size: 27px;
  line-height: 1.05;
}

.verdict-mark {
  position: absolute;
  left: 0;
  top: calc(0.525em - 5px);
  width: 10px;
  height: 10px;
  background: var(--muted);
}

.verdict-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result[data-tone="good"] .verdict-mark {
  background: var(--good);
}
.result[data-tone="good"] .verdict-text {
  color: var(--good);
}
.result[data-tone="bad"] .verdict-mark {
  background: var(--bad);
}
.result[data-tone="bad"] .verdict-text {
  color: var(--bad);
}
.result[data-tone="either"] .verdict-mark {
  background: var(--body);
}

.tag {
  display: inline-block;
  margin-left: 12px;
  vertical-align: 0.32em;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  border: 1px solid var(--line-2);
  padding: 4px 8px;
  line-height: 1;
}

.tag[data-clarity="close"] {
  color: var(--muted);
}

/* The net's call on a hand not played out yet: provisional, so a dashed edge. */
.tag[data-clarity="net"] {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.28);
}

.tag[hidden] {
  display: none;
}

.verdict-sub {
  font-size: 14.5px;
  min-height: 1.45em;
}

.verdict-sub.cost {
  color: var(--bad);
  font-weight: 600;
}

.verdict-sub.muted {
  color: var(--muted);
}

.instinct {
  font-size: 14px;
  color: var(--body);
  margin-top: 6px;
}

.instinct .label {
  font-size: 10.5px;
  margin-right: 4px;
}

/* Instant hands: the bars already show the net's call; the line keeps its space. */
.instinct.reserved {
  visibility: hidden;
}

.disagree {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.45em;
  visibility: hidden;
}

.disagree.on {
  visibility: visible;
}

/* Bars */

/* One grid for both rows, so the label column fits "Mulligan" plus the YOU chip at any width. */
.bars {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
}

.bar-row {
  display: contents;
}

.bar-label {
  min-width: 132px;
}

.bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
}

.you {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  padding: 3px 5px 2px;
  line-height: 1;
}

/* The chip keeps its space on the row you didn't pick, so the label column (and the tracks) never
   change width with your pick. */
.you[hidden] {
  display: inline-block;
  visibility: hidden;
}

.bar-track {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.bar-mid {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #56626a;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.bar-band {
  position: absolute;
  top: -3px;
  bottom: -3px;
  background: rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0;
}

.bar-value {
  min-width: 3.2em;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--body);
}

.bar-row.better .bar-name,
.bar-row.better .bar-value {
  color: var(--accent);
}

.bar-row.better .bar-fill {
  background: var(--accent);
}

.bar-row.better .bar-band {
  background: rgba(56, 225, 242, 0.22);
  border-color: rgba(56, 225, 242, 0.55);
}

/* "Either": neutral bars, except that on the net's call the larger share keeps the accent. */
.result[data-tone="either"] .bar-row:not(.better) .bar-fill {
  background: #7d8a92;
}

.bar-band[hidden] {
  display: none;
}

.bars-in .bar-fill {
  transform: scaleX(1);
  transition: transform 220ms var(--ease) 40ms;
}

.bars-in .bar-band {
  opacity: 1;
  transition: opacity 160ms var(--ease) 200ms;
}

/* Two lines reserved at every width: a games caption with big counts ("from 400 and 4,000
   played-out games") wraps where the net's caption doesn't, and the bars above must not shift
   between the two kinds of hand. */
.bars-caption {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  grid-column: 2 / -1;
  margin-top: 2px;
  line-height: 1.35;
  min-height: 2.7em;
}

.next-wrap {
  display: flex;
  justify-content: flex-end;
}

.next {
  min-height: 60px;
  padding: 0 24px 0 28px;
  font-size: 20px;
  gap: 16px;
}

/* ------------------------------------------------------------------------------------------- */
/* Responsive */

@media (max-width: 1180px) {
  .result {
    gap: 18px 24px;
    padding: 18px 20px;
  }
  .bar-label {
    min-width: 0;
  }
  .rl-name small {
    display: none;
  }
}

/* Narrower: rival names give way to the trio, with the rival's choice stacked under it. */
@media (max-width: 1000px) {
  .rival-legends {
    gap: 8px;
  }
  .rl-name {
    display: none;
  }
  .rival-side {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
  }
  .rival-trio {
    display: block;
  }
  .choice-chip {
    font-size: 11px;
    padding: 5px 9px;
  }
  .next {
    padding: 0 18px 0 20px;
  }
  .next kbd {
    display: none;
  }
  .bars {
    column-gap: 12px;
  }
  /* Two lines reserved: a long games caption may wrap where the net's caption doesn't, and the
     bars must not shift between the two kinds of hand. */
  .bars-caption {
    grid-column: 1 / -1;
    line-height: 1.35;
    min-height: 2.7em;
  }
}

@media (max-width: 760px) {
  :root {
    --gap: 8px;
  }
  html {
    font-size: 14px;
  }
  .topbar-inner {
    height: 46px;
    gap: 20px;
  }
  .brand-sub {
    display: none;
  }
  .page {
    padding-top: 20px;
  }
  .page-title {
    font-size: 32px;
  }
  .page-lede {
    font-size: 15px;
  }
  .deck-grid {
    grid-template-columns: 1fr;
  }
  .drill {
    padding-top: 12px;
  }
  .drill-head {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-bottom: 12px;
  }
  .drill-title {
    font-size: 20px;
  }
  .stats {
    order: 3;
    width: 100%;
    gap: 8px;
    font-size: 11px;
  }
  .stats b {
    font-size: 13px;
  }
  .filters {
    gap: 6px 16px;
    padding: 8px 0;
  }
  .filters-main {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px;
    margin: 0 calc(var(--pad) * -1);
    padding: 0 var(--pad);
    width: calc(100% + var(--pad) * 2);
  }
  .filters-main::-webkit-scrollbar {
    display: none;
  }
  .filter {
    flex: none;
  }
  .filter-label {
    display: none;
  }
  .seg-btn {
    min-height: 36px;
    padding: 0 11px;
  }
  .filters-end {
    width: 100%;
    justify-content: space-between;
  }
  .drill-body {
    padding-top: 14px;
  }
  .stage {
    gap: 14px;
  }
  .context {
    gap: 12px 16px;
    min-height: 0;
  }
  .seat {
    gap: 10px;
  }
  .seat-badge {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }
  .seat-text {
    font-size: 26px;
  }
  .rival {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    gap: 12px;
  }
  .rival-legends {
    gap: 6px;
  }
  .slot.thumb {
    width: 36px;
  }
  .rival-side {
    gap: 5px;
  }
  .rival-trio {
    font-size: 13px;
  }
  .choice-chip {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 4px 7px;
  }
  .hand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .zone {
    margin-top: 2px;
  }
  .choices {
    width: 100%;
    gap: 10px;
  }
  .choice {
    flex: 1;
    width: auto;
    min-height: 60px;
    padding: 0 14px 0 16px;
  }
  .choice-label {
    font-size: 22px;
  }
  .hint {
    font-size: 12.5px;
  }
  /* Stacked: the verdict takes any slack, so the bars and Next stay put whatever its length. */
  .result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    gap: 16px;
    padding: 18px;
  }
  .verdict-line {
    font-size: 23px;
  }
  .bar-name {
    font-size: 15px;
  }
  .bar-value {
    font-size: 15px;
  }
  .next-wrap {
    justify-content: stretch;
  }
  .next {
    width: 100%;
    justify-content: center;
  }
  .notice {
    margin: 24px auto;
    padding: 28px 24px 24px;
  }
}

/* Touch screens: no hover zoom cursor, and no keyboard hints. */
@media (hover: none) {
  .slot {
    cursor: default;
  }
}

@media (hover: none) and (pointer: coarse) {
  .choice kbd,
  .next kbd {
    display: none;
  }
  .choice {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* A long rival list (eight trios) wraps inside its box instead of pushing the page sideways. */
@media (min-width: 761px) {
  .filter {
    min-width: 0;
  }
  .seg {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .seg-btn {
    box-shadow: 0 1px 0 var(--line-2);
  }
}

/* Links to a deck guide show only on a server that serves guides (main.ts sets has-guides). */
html:not(.has-guides) .deck-guide,
html:not(.has-guides) .drill-guide,
html:not(.has-guides) .drow-guide,
html:not(.has-guides) .pick-guide {
  display: none !important;
}

/* ------------------------------------------------------------------------------------------- */
/* Match setup (#/play): two deck columns, the options, Start. Every box has a reserved size, so
   nothing moves as the catalog, the art, a paste check or an error arrives. */

/* The page fills the viewport under the top bar: head, the columns, the options. The middle row takes
   what's left, and inside each column the list box takes what's left of that, down to a minimum
   (the page scrolls only when the viewport can't hold even that). The list's own content never
   sizes it (contain: size), so a long catalog can't push the options down. */
.setup {
  --pick-w: 54px;
  --row-w: 26px;
  --list-min: 220px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100vh - 53px);
  min-height: calc(100dvh - 53px);
  padding-top: 24px;
  padding-bottom: 24px;
}

.setup [hidden] {
  display: none !important;
}

.setup-head {
  max-width: none;
  margin-bottom: 20px;
}

.setup-head .page-title {
  margin: 4px 0 6px;
}

.setup-head .page-lede {
  max-width: none;
}

/* Columns */

.sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 0;
}

.vs {
  align-self: start;
  width: 44px;
  /* level with the pick titles */
  margin-top: 80px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sides-notice {
  grid-column: 1 / -1;
  min-height: calc(var(--list-min) + 160px);
  display: grid;
  align-items: center;
}

.sides-notice .notice {
  margin: 0 auto;
}

.side {
  --side: var(--accent);
  --side-dim: rgba(56, 225, 242, 0.09);
  --side-edge: rgba(56, 225, 242, 0.5);
  --fill: var(--panel);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 10px;
}

.side--rival {
  --side: var(--rival);
  /* A yellow tint goes olive on this panel: the rival's highlight is neutral, its bar yellow. */
  --side-dim: rgba(255, 255, 255, 0.05);
  --side-edge: rgba(242, 230, 0, 0.45);
}

.side::before,
.side::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--chamfer);
}

.side::before {
  inset: 0;
  background: var(--line-2);
}

.side::after {
  inset: 1px;
  background: var(--fill);
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 12px;
}

.side-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--side);
  white-space: nowrap;
}

.seg--s .seg-btn {
  min-height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}

.side .seg--s .seg-btn[aria-pressed="true"] {
  color: var(--side);
  background: var(--side-dim);
}

/* The pick summary: the chosen deck's Legends (peekable), title, net and where it's from. */

.pick {
  display: flex;
  align-items: center;
  gap: 16px;
  height: calc(var(--pick-w) * 1024 / 734);
  margin-bottom: 12px;
  min-width: 0;
}

.pick-legends {
  flex: none;
  display: flex;
  gap: 6px;
}

.slot.pick-slot {
  width: var(--pick-w);
  flex: none;
}

.setup.is-loading:not(.is-waiting) .pick-slot .face,
.setup.is-loading:not(.is-waiting) .sk-line,
.setup.is-loading:not(.is-waiting) .drow--skeleton,
.setup.is-loading:not(.is-waiting) .pick-text {
  visibility: hidden;
}

.setup.is-waiting .face {
  animation: pulse 1.6s ease-in-out infinite;
}

.pick-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.pick-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-title .sk-line {
  height: 20px;
  margin: 2px 0;
}

.pick-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.pick-note {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.45em;
}

/* "?" tiles where a random deck's Legends would be. */
.qtile {
  flex: none;
  display: grid;
  place-items: center;
  aspect-ratio: var(--card-ratio);
  border: 1px dashed var(--side-edge);
  border-radius: 3px;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--side);
  line-height: 1;
}

.qtile--pick {
  width: var(--pick-w);
  font-size: 26px;
}

.qtile--row {
  width: var(--row-w);
  font-size: 15px;
}

/* Net tags: the deck's own net stands out; the general net stays quiet. */
.ntag {
  flex: none;
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muted);
  padding: 3px 0 2px;
  border: 1px solid transparent;
}

.ntag--own {
  color: var(--accent);
  border-color: rgba(56, 225, 242, 0.45);
  padding: 3px 5px 2px;
}

/* The list box and the paste box share one cell of a fixed height. */

.side-body {
  display: grid;
  flex: 1 1 0;
  min-height: var(--list-min);
  contain: size;
  margin: 0 -8px;
  border-top: 1px solid var(--line);
}

.side-body > * {
  grid-area: 1 / 1;
  min-height: 0;
}

.dlist {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 30px;
  scroll-padding-bottom: 14px;
  padding: 0 0 16px;
  /* A soft bottom edge: a row cut by the box reads as "more below", not as a clipped card. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.dgroup {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 12px 0 10px;
  background: var(--panel);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dgroup-right {
  font-size: 10px;
  color: rgba(154, 166, 173, 0.75);
}

.drow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px 7px 10px;
  cursor: pointer;
  outline: none;
  transition: background var(--t-fast) var(--ease);
}

.drow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--side);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.drow:hover {
  background: rgba(255, 255, 255, 0.035);
}

.drow.is-on {
  background: var(--side-dim);
}

.drow.is-on::before {
  opacity: 1;
}

.drow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.drow-legends {
  display: flex;
  gap: 3px;
}

.drow-legend {
  position: relative;
  width: var(--row-w);
  aspect-ratio: var(--card-ratio);
  flex: none;
}

.drow-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drow-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease);
}

.drow:hover .drow-title,
.drow.is-on .drow-title {
  color: var(--text);
}

.drow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 17px;
  white-space: nowrap;
}

.drow-note {
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.drow-share {
  font-size: 12.5px;
  color: var(--body);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 3.4em;
}

/* The deck's pilot guide: shows on the row's hover, over the share. */
.drow-guide {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  background: var(--panel-2);
  border: 1px solid rgba(56, 225, 242, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

.drow:hover .drow-guide {
  opacity: 1;
  pointer-events: auto;
}

.drow-guide:hover {
  background: var(--accent-dim);
}

.pick-guide {
  color: var(--accent);
  text-decoration: none;
}

.pick-guide:hover,
.pick-guide:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Narrow: the deck's group (the list's heading says it) gives way to the guide link. */
@media (max-width: 600px) {
  .pick-meta:has(.pick-guide) > span:not(:first-child) {
    display: none;
  }
}

.drow--skeleton {
  cursor: default;
}

.drow--skeleton:hover {
  background: none;
}

.drow--skeleton .sk-line {
  margin: 2px 0;
  height: 11px;
}

.drow--skeleton .sk-line.w60 {
  width: 55%;
}

.drow--skeleton .sk-line.w40 {
  width: 28%;
}

/* Paste */

.paste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 8px 4px;
}

.paste-input {
  flex: none;
  height: 33%;
  min-height: 76px;
  resize: none;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.paste-input::placeholder {
  color: rgba(154, 166, 173, 0.6);
}

.paste-input:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.paste-input:focus {
  outline: none;
  border-color: var(--accent);
}

.paste-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Phones: the status on a line of its own, the buttons wrapping under it. */
@media (max-width: 600px) {
  .paste-bar {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .paste-bar .paste-status {
    order: -1;
    flex-basis: 100%;
  }
}

.paste-status {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paste-status[data-tone="good"] {
  color: var(--good);
}

.paste-status[data-tone="bad"] {
  color: var(--bad);
}

.btn--s {
  min-height: 36px;
  padding: 0 16px;
  font-size: 15px;
  gap: 8px;
}

.btn--s::before,
.btn--s::after {
  clip-path: var(--chamfer-s);
}

.setup .btn:disabled {
  cursor: default;
}

.setup .btn--primary:disabled,
.setup .btn--primary:disabled:hover {
  --edge: rgba(56, 225, 242, 0.22);
  --fill: rgba(56, 225, 242, 0.08);
  color: rgba(56, 225, 242, 0.45);
}

.setup .btn--primary:disabled kbd {
  color: rgba(56, 225, 242, 0.4);
  border-color: rgba(56, 225, 242, 0.22);
}

.paste-result {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 16px;
  outline: none;
  transition: opacity var(--t-mid) var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.paste-result.is-stale {
  opacity: 0.45;
}

.paste-help {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.paste-help ul {
  margin: 4px 0 8px;
  padding-left: 18px;
}

.paste-help code {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--body);
}

.plabel {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.plabel--bad {
  color: var(--bad);
}

.perrors {
  margin-bottom: 14px;
}

.perrors ul,
.plegend-list,
.psection ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.perror {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.perror + .perror {
  margin-top: 4px;
}

.perror::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  background: var(--bad);
}

.plegends {
  margin-bottom: 12px;
}

.plegend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--text);
}

.plegend-list li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lpip {
  width: 8px;
  height: 8px;
  flex: none;
}

.psections {
  columns: 2 190px;
  column-gap: 24px;
}

.psection {
  break-inside: avoid;
  margin-bottom: 12px;
}

.pline {
  display: grid;
  grid-template-columns: 2.2em 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.25;
  padding: 2px 0;
}

.pline-n {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pline-name {
  color: var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pip {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--bg);
  background: #8aa0ad;
  clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 28% 100%, 0 72%);
}

.pip--blue,
.lpip.pip--blue {
  background: #2f8fd8;
}
.pip--red,
.lpip.pip--red {
  background: #d8433b;
}
.pip--green,
.lpip.pip--green {
  background: #3fae5a;
}
.pip--yellow,
.lpip.pip--yellow {
  background: #d9c400;
}
.lpip.pip--none {
  background: #8aa0ad;
}

/* Options and Start */

.setup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.opts {
  display: flex;
  align-items: flex-start;
  gap: 16px 36px;
  min-width: 0;
}

.opt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min-content;
}

.opt-label {
  white-space: nowrap;
}

.opt .seg {
  flex-wrap: nowrap;
}

.opt .seg-btn {
  box-shadow: none;
}

.opt-hint {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  min-height: 2.7em;
}

/* The rival's pilot. A pilot this server doesn't offer stays in place, disabled, its reason as
   the title. Humana AI's notes and mulligan switch keep their space when another pilot is
   chosen, so choosing it moves nothing. */
.opt .seg-btn:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.opt .seg-btn:disabled:hover {
  background: none;
}

/* The column is as wide as Humana AI's mulligan row; the pilot buttons keep their own width. */
.opt--pilot > .seg {
  align-self: flex-start;
}

/* Each pilot's blurb gets three lines, so a shorter one doesn't pull up what's below. */
.opt--pilot > .opt-hint {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.35em);
}

/* Short screens: the deck lists give up the height Humana AI's block keeps. */
@media (max-height: 800px) and (min-width: 761px) {
  .setup {
    --list-min: 130px;
  }
}

.pilot-extras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -2px;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--t-mid) var(--ease),
    visibility 0s linear var(--t-mid);
}

.pilot-extras.on {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--t-mid) var(--ease),
    visibility 0s linear 0s;
}

/* Humana AI's notes: a quiet button, and the notes in a popover over the page. */
.pilot-notes-row {
  display: flex;
  min-height: 22px;
}

.pilot-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.pilot-notes-btn:hover,
.pilot-notes-btn[aria-expanded="true"] {
  color: var(--text);
}

.pilot-notes-btn > span:nth-child(2) {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

.pilot-notes-btn:hover > span:nth-child(2) {
  text-decoration-color: currentColor;
}

.pilot-notes-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pilot-notes-i {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.8;
}

.pilot-notes-n {
  font-size: 11px;
  color: var(--muted);
}

.pilot-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(420px, calc(100vw - 16px));
  padding: 12px 14px 12px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--body);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.pilot-pop-title {
  margin-bottom: 8px;
}

.pilot-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.4;
}

.pilot-notes li {
  position: relative;
  padding-left: 12px;
}

.pilot-notes li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--muted);
}

.pilot-mull {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pilot-mull .label {
  white-space: nowrap;
}

.pilot-mull .seg {
  flex-wrap: nowrap;
}

.pilot-mull .seg-btn {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  box-shadow: none;
}

.pilot-mull-hint {
  min-height: 1.35em;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.go {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

.go-error {
  max-width: 360px;
  min-height: 2.7em;
  font-size: 13px;
  line-height: 1.35;
  color: var(--bad);
  text-align: right;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.go-btn {
  min-height: 56px;
  padding: 0 24px 0 30px;
  font-size: 20px;
  gap: 16px;
}

.go-label {
  display: grid;
}

.go-label > span {
  grid-area: 1 / 1;
  text-align: center;
}

.go-busy,
.go-btn.is-busy .go-idle {
  visibility: hidden;
}

.go-btn.is-busy .go-busy {
  visibility: visible;
}

.setup.is-starting .go-btn {
  cursor: progress;
}

/* The request went out with these choices: clicks on others would not count, so they don't land. */
.setup.is-starting .sides,
.setup.is-starting .opts {
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------- */
/* Narrower desktops: no "vs", and Start gets its own row (the error to its left). */

@media (max-width: 1100px) {
  .vs {
    display: none;
  }
  .sides {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
  }
  .setup-foot {
    flex-wrap: wrap;
  }
  .go {
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 20px;
  }
  .go-error {
    flex: 1;
    max-width: none;
    min-height: 0;
  }
}

@media (max-width: 1000px) {
  .setup {
    --pick-w: 44px;
  }
  .side {
    padding: 12px 14px 8px;
  }
  .pick {
    gap: 12px;
  }
  .pick-legends {
    gap: 5px;
  }
  .pick-title {
    font-size: 19px;
  }
  .pick-meta {
    gap: 8px;
  }
  .opts {
    gap: 16px 24px;
  }
}

/* Short screens: drop the lede so the lists keep their room. */
@media (max-height: 800px) and (min-width: 761px) {
  .setup-head .page-lede {
    display: none;
  }
  .setup-head .page-title {
    font-size: 34px;
    margin-bottom: 0;
  }
  .setup-head {
    margin-bottom: 16px;
  }
  .setup {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Phones: the columns stack, each list a fixed box. */
@media (max-width: 760px) {
  .setup {
    --pick-w: 44px;
    display: block;
    min-height: 0;
  }
  .sides {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  .side {
    padding: 12px 12px 8px;
  }
  .side-body {
    flex: none;
    height: 300px;
  }
  .pick-title {
    font-size: 18px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .pick-note {
    display: none;
  }
  .opts {
    flex-direction: column;
    width: 100%;
  }
  .opt {
    width: 100%;
  }
  .opt .seg {
    flex-wrap: wrap;
  }
  .opt-hint {
    min-height: 0;
  }
  .go {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .go-error {
    min-height: 2.7em;
    justify-content: flex-start;
    text-align: left;
  }
  .go-btn kbd {
    display: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .go-btn kbd {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Start and the way to the watch setup under it. The link's room is kept on a server without
   watched games (it shows once the probe answers), so the options never move. */

.go-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.go-watch {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  white-space: nowrap;
  visibility: hidden;
  transition: color var(--t-fast) var(--ease);
}

.go-watch:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.has-watch .go-watch {
  visibility: visible;
}

/* ------------------------------------------------------------------------------------------- */
/* The watch setup (#/watch): the match setup's pickers and four options (who goes first, each
   side's pilot, whose eyes); its recent games under it. The setup leaves a strip of the window for
   the recent games' heading, so they show there's more. */

.setup--watch {
  min-height: calc(100vh - 53px - 56px);
  min-height: calc(100dvh - 53px - 56px);
  padding-bottom: 20px;
}

/* Four options and Watch share one wrapping row: the options are the foot's own items, so where
   they wrap Watch takes the room left on the last row (beside Whose eyes at 1000). Narrower gaps
   and no Enter hint keep all five on one row down to 1280. */
.setup--watch .opts {
  display: contents;
}

.setup--watch .setup-foot {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 36px;
}

.setup--watch .go {
  align-self: center;
}

@media (max-width: 1400px) {
  .setup--watch .setup-foot {
    column-gap: 24px;
  }
  .setup--watch .go-btn {
    padding: 0 28px;
  }
  .setup--watch .go-btn kbd {
    display: none;
  }
}

/* Where Watch shares a row with an option, the error sits to its left. */
@media (max-width: 1260px) {
  .setup--watch .setup-foot {
    row-gap: 14px;
  }
  .setup--watch .go {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 20px;
  }
  .setup--watch .go-error {
    flex: 1;
    max-width: none;
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .setup--watch .go {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.watch-recent {
  padding-top: 8px;
}

.wr-head {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.wr-body {
  min-height: 120px;
}

.wr-empty {
  padding: 18px 0;
  font-size: 13.5px;
  color: var(--muted);
}

.wr-list {
  display: flex;
  flex-direction: column;
}

.wr-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 74px 110px 18px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  transition: background var(--t-fast) var(--ease);
}

.wr-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.wr-row:focus-visible {
  outline-offset: -2px;
}

.wr-row--skeleton {
  height: 58px;
}

.wr-result {
  width: fit-content;
  padding: 4px 8px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.wr-result--won {
  color: var(--text);
}

.wr-decks {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.wr-deck {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0;
}

.wr-side {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.wr-deck.is-won .wr-side {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.55);
}

.wr-legends {
  flex: none;
  display: flex;
  gap: 3px;
}

.wr-art {
  position: relative;
  width: 26px;
  aspect-ratio: var(--card-ratio);
}

.wr-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-pilot {
  flex: none;
  padding: 2px 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--line);
}

.wr-pilot.is-loud {
  color: rgba(242, 230, 0, 0.85);
  border-color: rgba(242, 230, 0, 0.35);
}

.wr-vs {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
}

.wr-num,
.wr-when {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.wr-num b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.wr-go {
  color: var(--muted);
  transition:
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.wr-row:hover .wr-go {
  color: var(--accent);
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .wr-legends,
  .wr-pilot {
    display: none;
  }
}

@media (max-width: 760px) {
  .go-main {
    align-items: stretch;
  }
  .go-watch {
    align-self: center;
  }
  .wr-row {
    grid-template-columns: minmax(0, 1fr) 18px;
    row-gap: 6px;
  }
  .wr-decks {
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .wr-vs,
  .wr-num,
  .wr-when {
    display: none;
  }
  .wr-go {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* An account's view (caps.ts): a refusal in the go area as the quiet note, today's budget under
   the button, and "coached by the general net" said once in the lede. */

.go-error .quiet-note {
  max-width: 360px;
  text-align: left;
  color: var(--body);
}

.go-left {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.setup-net {
  color: var(--muted);
}

/* Another user's watched games, read-only: the list alone. */
.watch-viewed .page-title {
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------------------------------- */
/* Match board (#/play/<id>): the table, the prompt strip, your hand, the coach rail.             */
/* Every zone has a fixed box; card sizes come from the viewport, so nothing reflows in play.     */

html.is-board body {
  overflow: hidden;
}

html.is-board .topbar-inner {
  max-width: none;
}

.match {
  --rail: 340px;
  /* Field card width: as large as both the height (two rows of zones, the strip, the hand) and the
     width (legends, eddies and piles beside about five Units) allow. */
  --fw: clamp(46px, min(calc((100vh - 372px) / 3.3 * 0.717), calc((100vw - var(--rail) - 96px) / 9.8)), 100px);
  --fh: calc(var(--fw) / 0.717);
  --lw: calc(var(--fw) * 0.8);
  --hw: calc(var(--fw) * 1.22);
  --pw: calc(var(--fw) * 0.62);
  --side: var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  height: calc(100vh - 53px);
  min-height: 560px;
  overflow: hidden;
}

.mcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Header ------------------------------------------------------------------------------------ */

.mhead {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.mh-decks {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mh-deck {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.mh-deck--opp {
  color: var(--rival);
}

/* Which net plays each side: quiet, beside its title. */
.mh-net {
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.mh-net:empty {
  display: none;
}

@media (max-width: 1240px) {
  .mh-net {
    display: none;
  }
}

.mh-vs {
  flex: none;
  font-size: 11px;
  color: var(--muted);
}

.mh-tag {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rival);
  border: 1px solid rgba(242, 230, 0, 0.45);
  padding: 3px 7px;
  white-space: nowrap;
}

.mh-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mh-turn {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
  margin-right: 6px;
}

.mh-turn.is-rival {
  color: var(--rival);
}

.mh-btn {
  height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.mh-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.mh-btn:disabled {
  color: var(--muted);
  opacity: 0.55;
  cursor: default;
}

.mh-btn kbd {
  padding: 2px 4px;
  font-size: 10px;
}

.mh-btn .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mh-btn--danger {
  border-color: var(--bad);
  color: var(--bad);
}

.mh-concede {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mh-concede.is-off {
  visibility: hidden;
}

.mh-q {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
}

/* The table ----------------------------------------------------------------------------------- */

.mstage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.mstage > .notice {
  margin-top: 64px;
}

.table {
  container: table / inline-size;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 14px 8px;
  gap: 6px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(242, 230, 0, 0.025), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(56, 225, 242, 0.035), transparent 70%);
}

.ofan-row {
  flex: none;
  height: 26px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding-left: 6px;
}

.ofan {
  display: flex;
  height: 26px;
  margin-top: -18px;
}

.fan-back {
  display: block;
  width: 28px;
  height: 40px;
  margin-right: -14px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
}

/* The rival's hand cards the human knows: small faces beside the count, readable on hover. */
.ofan-known {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

.ofan-known .cs {
  width: 17px;
}

.ofan-n {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 230, 0, 0.75);
  margin-left: 18px;
  margin-top: 4px;
  white-space: nowrap;
}

.half {
  flex: 1;
  min-height: 0;
  display: flex;
}

.half--opp {
  --side: var(--rival);
}

.zrow {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
}

.mzone {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 8px 6px;
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid var(--line);
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.zlabel {
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.half--opp .zlabel > span:first-child {
  color: rgba(242, 230, 0, 0.6);
}

/* Cards on the table: the trainer's slot + peek, sized by the table's variables. */

.cs {
  flex: none;
  cursor: pointer;
}

.cs .card {
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    opacity var(--t-mid) var(--ease),
    filter var(--t-mid) var(--ease);
}

.cs.is-empty {
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  cursor: default;
}

.cback {
  background-color: #10343a;
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.42) 0 7px, transparent 7px 15px);
  border-radius: 4px;
}

.cback--opp {
  background-color: #8a8200;
}

.face.cback {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ctag {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 3;
  transform: translate(-50%, -4px);
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bg);
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.ctag.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.slot.peeked .ctag,
.slot.peeked .pw {
  opacity: 0;
}

/* Power: the view's current power, marked when it differs from the printed value. */
.pw {
  position: absolute;
  right: 4%;
  bottom: 3%;
  min-width: 22%;
  padding: 1px 3px;
  font-size: clamp(10px, calc(var(--fw) * 0.15), 14px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: var(--power);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.pw--up {
  background: #1f9d55;
  box-shadow: 0 0 0 1px #7dffb0;
}

.pw--down {
  background: #7a1020;
  box-shadow: 0 0 0 1px var(--bad);
}

/* Spent: turned sideways (about its centre; the peek's transform origin stays top-left). */
.cs.is-spent:not(.peeked):not(.settling) .card {
  transform: translate(50%, 50%) rotate(90deg) scale(0.7) translate(-50%, -50%);
  filter: brightness(0.78);
}

.cs.is-used .card {
  filter: grayscale(1) brightness(0.42);
}

.cs.is-facedown .card {
  filter: brightness(0.6) saturate(0.6);
}

.cs.is-doomed::before {
  content: "Defeat at end of turn";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 38%;
  z-index: 2;
  padding: 2px;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: rgba(122, 16, 32, 0.9);
  pointer-events: none;
}

/* Marks ---------------------------------------------------------------------------------------- */

.is-live .cs.is-avail .card,
.hand-row .cs.is-avail .card {
  box-shadow: 0 0 0 1px rgba(56, 225, 242, 0.5);
}

.cs.is-avail:hover .card {
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 14px rgba(56, 225, 242, 0.22);
}

.cs.is-sel .card {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 22px rgba(56, 225, 242, 0.35);
}

.cs.is-target .card {
  outline: 1px dashed rgba(232, 237, 240, 0.65);
  outline-offset: 3px;
}

.cs.is-chosen .card {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.cs.is-chosen .ctag,
.cs.is-target .ctag {
  background: var(--text);
}

.cs.is-hl .card {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(56, 225, 242, 0.45);
}

.cs.is-dim .card {
  opacity: 0.42;
  filter: saturate(0.5);
}

.cs.is-attacking .card {
  box-shadow:
    0 0 0 2px var(--side),
    0 0 18px color-mix(in srgb, var(--side) 45%, transparent);
}

.cs.is-defending .card {
  outline: 2px solid var(--bad);
  outline-offset: 2px;
}

.cs.is-dragging .card {
  opacity: 0.3;
}

/* A card or die that just arrived (played, drawn, turned, rolled) settles in. */
.cs.is-new .card,
.die.is-new {
  animation: arrive 240ms var(--ease);
}

@keyframes arrive {
  from {
    opacity: 0.25;
    translate: 0 -6px;
  }
}

.is-nudge {
  animation: nudge 180ms var(--ease);
}

@keyframes nudge {
  25% {
    translate: -3px 0;
  }
  75% {
    translate: 3px 0;
  }
}

.mzone.is-drop,
.gigside.is-drop {
  border: 1px dashed var(--accent);
  background: rgba(56, 225, 242, 0.05);
}

.mzone.is-drop-over,
.gigside.is-drop-over {
  background: rgba(56, 225, 242, 0.14);
}

.cs.is-drop .card {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.cs.is-drop-over .card {
  box-shadow: 0 0 0 3px var(--accent);
}

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}

.drag-ghost .card {
  position: absolute;
  inset: 0;
  transform: none !important;
}

.drag-ghost.is-snapping {
  transition: transform 200ms var(--ease);
}

/* Zones ---------------------------------------------------------------------------------------- */

.z-legends {
  width: calc(var(--lw) * 3 + 12px + 16px);
}

.lg-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lg-row .cs {
  width: var(--lw);
}

.z-field {
  container-type: inline-size;
}

.field-cards {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(var(--fh) + 6px);
}

.fcol {
  --cw: min(var(--fw), calc((100cqw - 16px) / var(--n, 1) - 10px - var(--ng) * 12px));
  position: relative;
  flex: none;
  width: calc(var(--cw) + var(--ng) * 12px);
  height: calc(var(--cw) / 0.717);
}

.fcol .fu {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  z-index: 2;
}

.fcol .fg {
  position: absolute;
  top: 0;
  left: calc(var(--gi) * 12px);
  width: var(--cw);
  z-index: 1;
}

.z-eddies {
  width: calc(var(--fw) * 1.7 + 16px);
}

.ed-count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--body);
  white-space: nowrap;
}

.ed-count b {
  font-size: 13px;
  color: var(--accent);
}

.ed-count.is-rival b {
  color: var(--rival);
}

.ed-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ed-row .cs {
  width: var(--pw);
}

.ed-row .cs + .cs {
  margin-left: calc(min(4px, (var(--fw) * 1.7 - var(--n) * var(--pw)) / max(var(--n) - 1, 1)));
}

.ed-note {
  height: 12px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.z-piles {
  width: calc(var(--pw) * 2 + 8px + 16px);
}

.piles {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pile {
  position: relative;
  width: var(--pw);
}

.pile-card {
  aspect-ratio: var(--card-ratio);
  width: 100%;
  border-radius: 4px;
}

.pile-card.is-empty {
  border: 1px dashed var(--line-2);
}

.pile--deck .pile-card {
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.55),
    4px 4px 0 rgba(255, 255, 255, 0.05);
}

.pile .cs {
  width: 100%;
}

.pile-n {
  position: absolute;
  right: -4px;
  bottom: -6px;
  z-index: 3;
  min-width: 22px;
  padding: 1px 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-2);
}

.pile-open {
  cursor: pointer;
}

.pile-open:hover {
  border-color: var(--accent);
}

/* The Gig bar ---------------------------------------------------------------------------------- */

.gigbar {
  flex: none;
  height: 48px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  border-top: 1px solid rgba(56, 225, 242, 0.14);
  border-bottom: 1px solid rgba(56, 225, 242, 0.14);
  background: rgba(11, 13, 16, 0.6);
}

.gigside {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border: 1px solid transparent;
}

.gigside--opp {
  justify-self: start;
}

.gigside--me {
  justify-self: end;
  flex-direction: row-reverse;
}

.gig-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.gigside--opp .gig-label {
  color: rgba(242, 230, 0, 0.75);
}

.gig-dice {
  display: flex;
  gap: 5px;
}

.gigside--me .gig-dice {
  flex-direction: row-reverse;
}

.gig-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.gig-count b {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}

.gigside--opp .gig-count b {
  color: var(--rival);
}

.gig-flag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bg);
  background: var(--accent);
}

.gigside--opp .gig-flag {
  background: var(--rival);
}

.gig-flag[hidden] {
  display: none;
}

.gigside.is-seven {
  border-color: rgba(56, 225, 242, 0.4);
}

.gigside--opp.is-seven {
  border-color: rgba(242, 230, 0, 0.5);
}

/* The rival as an attack target. */
.is-live .gigside--opp.is-avail {
  border-color: rgba(56, 225, 242, 0.35);
  cursor: pointer;
}

.is-live .gigside--opp.is-target,
.is-live .gigside--opp.is-chosen {
  border: 1px dashed var(--text);
  cursor: pointer;
}

.is-live .gigside--opp.is-chosen {
  border: 2px dashed var(--accent);
}

.gigside--opp.is-hl {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.gig-mid {
  justify-self: stretch;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.overtime {
  padding: 3px 8px;
  color: var(--bg);
  background: #ff2bd6;
  font-weight: 600;
}

.fixer {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.fixer-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 4px;
}

.gigbar > .fixer:last-child {
  flex-direction: row-reverse;
}

/* Dice */

.die {
  --ds: 30px;
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--ds);
  height: var(--ds);
  cursor: default;
  transition:
    transform var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}

.die-rim,
.die-body {
  position: absolute;
  inset: 0;
  clip-path: var(--shape);
  background: var(--die);
}

.die-rim {
  background: rgba(0, 0, 0, 0.55);
}

.die--own-opp .die-rim {
  background: var(--rival);
}

.die-body {
  inset: 2px;
}

.die-face {
  position: relative;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--die-ink);
}

.die-type {
  display: none;
}

.die--d4 {
  --shape: polygon(50% 0, 100% 92%, 0 92%);
}
.die--d4 .die-face {
  padding-top: 34%;
}
.die--d6 {
  --shape: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}
.die--d8 {
  --shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.die--d10 {
  --shape: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}
.die--d10 .die-face {
  padding-bottom: 12%;
}
.die--d12 {
  --shape: polygon(50% 0, 100% 37%, 81% 98%, 19% 98%, 0 37%);
}
.die--d12 .die-face {
  padding-top: 10%;
}
.die--d20 {
  --shape: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.die--fixer {
  --ds: 22px;
  opacity: 0.55;
}

.die--fixer .die-type {
  display: block;
  position: relative;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 600;
  color: var(--die-ink);
}

.die--fixer.die--d4 .die-type {
  padding-top: 30%;
}

.die--fixer .die-face {
  display: none;
}

.is-live .die.is-avail,
.die.is-target {
  cursor: pointer;
}

.is-live .die.is-avail {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(56, 225, 242, 0.85));
}

.die.is-target {
  opacity: 1;
  outline: 1px dashed rgba(232, 237, 240, 0.7);
  outline-offset: 3px;
}

.die.is-sel,
.die.is-chosen {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-2px);
}

.die.is-chosen {
  outline-style: dashed;
}

.die.is-hl {
  filter: drop-shadow(0 0 6px #fff);
}

.die.is-drop {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

/* Toast: what just happened, in one line. */

.toast-slot {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(640px, 70%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
  background: #10252a;
  border: 1px solid rgba(56, 225, 242, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transition: opacity 600ms var(--ease);
}

.toast[hidden] {
  display: none;
}

.toast.is-quiet {
  background: var(--panel);
  border-color: var(--line-2);
  color: var(--body);
}

.toast.is-fading {
  opacity: 0.5;
}

.toast-who {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.toast-who--rival {
  color: var(--rival);
}

.toast-who--coach {
  color: #f2b544;
}

.toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-act {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.toast-act:hover {
  background: var(--accent-dim);
}

/* Tray: cards a choice names that aren't on the table, and the scry window. */

.tray {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: rgba(18, 22, 26, 0.97);
  border: 1px solid var(--line-2);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
}

.tray[hidden] {
  display: none;
}

/* Where a tray card is when the tray mixes piles. */
.tray-zone {
  min-height: 15px;
  padding: 1px 6px 0;
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 13px;
  color: var(--muted);
}

.tray-zone:empty {
  border-color: transparent;
}

.tray-title {
  flex: none;
  max-width: 160px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.tray-cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 12px 4px 4px;
}

.tray-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tray .tray-slot {
  width: var(--fw);
}

.scry-seg {
  display: flex;
  border: 1px solid var(--line-2);
}

.scry-btn {
  border: 0;
  background: none;
  height: 26px;
  padding: 0 8px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
}

.scry-btn + .scry-btn {
  border-left: 1px solid var(--line-2);
}

.scry-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
}

/* Trash viewer */

.trash-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 26;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.trash-pop[hidden] {
  display: none;
}

.trash-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trash-sub {
  color: var(--muted);
  font-size: 10px;
}

.trash-close {
  margin-left: auto;
}

.trash-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}

.trash-cards .cs {
  width: var(--fw);
}

/* Your hand ------------------------------------------------------------------------------------ */

.hand-row {
  --n: 6;
  position: relative;
  z-index: 9;
  flex: none;
  container-type: inline-size;
  height: calc(var(--hw) / 0.717 + 34px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 18px;
  overflow: visible;
}

.hand-row .hc {
  width: var(--hw);
  transform: translateY(var(--arc, 0px));
  transition: transform var(--t-mid) var(--ease);
}

.hand-row .hc + .hc {
  margin-left: min(8px, calc((100cqw - 32px - var(--n) * var(--hw)) / max(var(--n) - 1, 1)));
}

.hand-row .hc.is-sel {
  transform: translateY(calc(var(--arc, 0px) - 16px));
}

.hand-row .hc.is-sel,
.hand-row .hc:hover {
  z-index: 5;
}

.hand-empty {
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The prompt strip ----------------------------------------------------------------------------- */

.strip {
  position: relative;
  z-index: 8;
  flex: none;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.strip-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strip-say {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.strip-say-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-badge {
  flex: none;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--body);
}

.strip-badge[data-tone="rival"] {
  color: var(--rival);
  border-color: rgba(242, 230, 0, 0.5);
}

.strip-badge[data-tone="good"] {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.55);
}

.strip-badge[data-tone="warn"] {
  color: #f2b544;
  border-color: rgba(242, 181, 68, 0.55);
}

.strip-badge[hidden] {
  display: none;
}

.strip-second {
  height: 26px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.strip-hint {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chips {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.chip {
  flex: none;
  max-width: 240px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--body);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.strip-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.strip-all {
  white-space: nowrap;
}

.strip-all[hidden] {
  display: inline-block;
  visibility: hidden;
}

.strip-sec,
.strip-pri {
  min-height: 44px;
  font-size: 15px;
}

/* Fixed widths: a longer label truncates (its full words are the title) rather than moving
   anything. */
.strip-sec {
  width: 150px;
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-pri {
  width: 310px;
  padding: 0 14px 0 20px;
  justify-content: space-between;
}

.strip-pri-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A request in flight: the last frame holds, input waits. */
.strip.is-busy .strip-actions {
  pointer-events: none;
  cursor: progress;
}

.strip .btn.is-off {
  visibility: hidden;
}

.strip-pri.is-waiting,
.strip-pri:disabled {
  --edge: var(--line-2);
  --fill: var(--panel-2);
  color: var(--muted);
  cursor: default;
}

.strip-pri:disabled kbd {
  color: var(--muted);
  border-color: var(--line-2);
}

.strip-sec:disabled {
  color: var(--muted);
  cursor: default;
}

/* All moves */

.allmoves {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 6px);
  z-index: 40;
  width: min(460px, calc(100% - 32px));
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
}

.allmoves[hidden] {
  display: none;
}

.allmoves-head {
  padding: 8px 14px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.allmoves-body {
  overflow: auto;
  padding: 4px 0 8px;
}

.am-title {
  padding: 8px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.am-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
}

.am-item:hover,
.am-item:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  outline-offset: -2px;
}

.am-item.is-selected {
  color: var(--accent);
}

.am-text {
  flex: 1;
  min-width: 0;
}

.am-text small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.am-pct {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

/* The coach rail ------------------------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
}

.rail-head {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.rail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rail-mark {
  width: 10px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px));
}

/* (the trainer's filters let a segmented control wrap; the mode switch never does) */
.rail .rail-modes {
  flex: none;
  flex-wrap: nowrap;
}

.rail-modes .seg-btn {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  box-shadow: none;
}

.rank {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
}

.rank-head {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rank-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clarity {
  flex: none;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--body);
}

.clarity[data-clarity="clear"] {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.5);
}

.clarity[data-clarity="close"] {
  color: #f2b544;
  border-color: rgba(242, 181, 68, 0.5);
}

.clarity[data-clarity="coin"] {
  color: var(--muted);
  border-style: dashed;
}

.clarity[hidden] {
  display: none;
}

.rank-body {
  flex: 1;
  min-height: 0;
}

.rrows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rrows.is-expanded {
  max-height: 340px;
  overflow: auto;
}

.rrow {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Exactly 60 px: a two-line label, or a label and its why-line (think.css), fit the same box. */
  height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
  color: var(--body);
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.rrow:hover,
.rrow:focus-visible {
  border-color: var(--line-2);
  background: #0f1317;
  outline-offset: -2px;
}

.rrow.is-top {
  border-color: rgba(56, 225, 242, 0.5);
  color: var(--text);
}

.rrow.is-you {
  box-shadow: inset 3px 0 0 var(--text);
}

.rrow-n {
  font-size: 11px;
  color: var(--muted);
}

.rrow-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rrow-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}

/* A long move wraps to a second line rather than losing its end ("Choose Pyramid Song from the
   trash"); every row has room for two, so rows never change height between decisions. */
.rrow-words {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.18;
}

.rrow .you {
  flex: none;
}

.rrow-bar {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
}

.rrow-fill {
  display: block;
  height: 100%;
  background: #56626a;
  transition: width 220ms var(--ease);
}

.rrow.is-top .rrow-fill {
  background: var(--accent);
}

.rrow-pct {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rrow.is-top .rrow-pct {
  color: var(--text);
}

.rank-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--body);
}

.rank-foot {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank-caption {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: help;
}

.rank-more {
  min-height: 22px;
  padding: 0 2px;
}

.rank-msg {
  padding: 16px 14px;
  border: 1px dashed var(--line-2);
  background: var(--bg);
}

.rank-msg-title {
  font-size: 14px;
  font-weight: 600;
}

.rank-msg-body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}

.rank-msg--good {
  border-color: rgba(61, 190, 110, 0.5);
}

.rank-msg--good .rank-msg-title {
  color: var(--good);
}

/* Game over */

.end {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.end-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.end--won .end-title {
  color: var(--good);
}

.end--lost .end-title {
  color: var(--rival);
}

.end-reason {
  font-size: 13.5px;
  color: var(--body);
}

.end-score {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text);
}

.end-misses {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.end-misses-h {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.miss {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.miss-turn {
  font-size: 11px;
  color: var(--muted);
}

.miss-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
}

.miss-mine {
  color: var(--body);
}

.miss-coach {
  color: var(--text);
}

.miss-coach b {
  font-size: 11px;
  color: var(--accent);
}

.end-clean {
  margin-top: 8px;
  font-size: 13px;
  color: var(--good);
}

/* Clear picks left that this page's log can't list (the game was opened elsewhere): counted. */
.end-clean.end-unlisted {
  color: var(--body);
}

.end-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.end-btn {
  min-height: 40px;
  font-size: 15px;
  padding: 0 16px;
}

.end-more {
  margin-top: 4px;
}

/* Score and log */

.score {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.score b {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.score .dot {
  color: var(--line-2);
}

.score .muted {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body);
  font-size: 12.5px;
}

.log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.log-head {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.log-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.log-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease);
}

.log-toggle[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

.log-toggle:hover {
  color: var(--text);
}

.log-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0 12px;
}

.log-list[hidden] {
  display: none;
}

.log-turn {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
}

.log-turn.is-rival {
  color: rgba(242, 230, 0, 0.8);
}

.log-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 3px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--body);
}

.log-who {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}

.log-line.is-rival .log-who {
  color: rgba(242, 230, 0, 0.75);
}

.log-line.forced {
  opacity: 0.6;
}

.log-mark {
  font-size: 11px;
  font-weight: 600;
  padding-top: 1px;
}

.log-mark.agreed {
  color: var(--good);
}

.log-mark.differed {
  color: #f2b544;
}

.log-empty {
  padding: 12px 14px;
  font-size: 12.5px;
}

/* States --------------------------------------------------------------------------------------- */

.match.is-loading .mzone,
.match.is-loading .gigbar {
  animation: pulse-line 1.6s ease-in-out infinite;
}

@keyframes pulse-line {
  50% {
    border-color: var(--line-2);
  }
}

.match.is-lost .strip-actions,
.match.is-lost .hand-row {
  visibility: hidden;
}

/* Narrower desktops: a slimmer rail; at 1000 and below the strip drops its key hints. */

@media (max-width: 1240px) {
  .match {
    --rail: 310px;
  }
  .strip-pri {
    width: 270px;
  }
  .mh-deck {
    font-size: 16px;
  }
}

@media (max-width: 1060px) {
  .gig-label,
  .fixer-label {
    display: none;
  }
  .match {
    --rail: 280px;
  }
  .strip-pri kbd,
  .mh-btn kbd {
    display: none;
  }
  .strip-pri {
    width: 230px;
  }
  .strip-sec {
    width: 128px;
  }
  .rail-modes .seg-btn {
    padding: 0 7px;
    font-size: 11.5px;
  }
  .mh-tag {
    display: none;
  }
}

@media (max-width: 940px) {
  .match {
    --rail: 260px;
  }
  .strip {
    gap: 10px;
    padding: 0 10px;
  }
  .strip-pri {
    width: 196px;
  }
  .strip-sec {
    width: 110px;
    font-size: 14px;
  }
  .strip-say {
    font-size: 14px;
  }
  .table {
    padding: 4px 8px 8px;
  }
  /* The rail keeps the mode switch on one line: the title gives way to its mark. */
  .rail-title {
    font-size: 0;
    gap: 0;
  }
  .rail-modes .seg-btn {
    padding: 0 6px;
    font-size: 11px;
  }
  .score {
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  /* The Gig bar: smaller dice, no labels. */
  .gig-label,
  .fixer-label,
  .gig-goal {
    display: none;
  }
  .gigbar {
    gap: 6px;
  }
  .gigside {
    gap: 5px;
    padding: 0 4px;
  }
  .gig-dice {
    gap: 3px;
  }
  .gig-dice .die {
    --ds: 24px;
  }
  .gig-dice .die-face {
    font-size: 11px;
  }
  .die--fixer {
    --ds: 18px;
  }
  .die--fixer .die-type {
    font-size: 7px;
  }
}

.zlabel > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Gear equipped to a Legend: its top edge peeks out above the Legend, and it enlarges on hover like any card. */
.lgcol {
  position: relative;
  flex: none;
  width: var(--lw);
  padding-top: calc(var(--ng) * 14px);
}

.lgcol > .lg,
.lgcol > .slot {
  position: relative;
  z-index: 1;
}

.lgcol > .lgg {
  position: absolute;
  left: 0;
  top: calc((var(--ng) - var(--gi)) * 14px);
  width: var(--lw);
  z-index: 0;
}

.lgcol > .lgg:hover,
.lgcol > .lgg:focus-visible {
  z-index: 3;
}

.lgcol-tag {
  position: absolute;
  right: -2px;
  bottom: -8px;
  z-index: 2;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b0d10;
  background: #e8edf0;
}

/* The Gig bar follows the table's own width (the review's board column is narrower than the
   viewport suggests): labels go first, then the dice shrink. */
@container table (max-width: 780px) {
  .gig-label,
  .fixer-label,
  .gig-goal {
    display: none;
  }
  .gigbar {
    gap: 6px;
  }
}

@container table (max-width: 660px) {
  .gigside {
    gap: 5px;
    padding: 0 4px;
  }
  .gig-dice {
    gap: 3px;
  }
  .gig-dice .die {
    --ds: 24px;
  }
  .gig-dice .die-face {
    font-size: 11px;
  }
  .die--fixer {
    --ds: 18px;
  }
  .die--fixer .die-type {
    font-size: 7px;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Review: the list of games (#/review) and a game's review (#/review/<id>).                      */

/* The review reuses the match's board, sized by the same variables: its two side columns take
   the rail's place in the card-size formula. */
.review {
  --rv-tl: 300px;
  --rv-side: 340px;
  --rail: calc(var(--rv-tl) + var(--rv-side));
  grid-template-columns: var(--rv-tl) minmax(0, 1fr) var(--rv-side);
}

@media (max-width: 1340px) {
  .review {
    --rv-tl: 270px;
    --rv-side: 316px;
  }
}

@media (max-width: 1100px) {
  .review {
    --rv-tl: 240px;
    --rv-side: 280px;
  }
}

.review .mh-btn {
  height: 30px;
}

.rv-result {
  flex: none;
  padding: 3px 8px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--body);
}

.rv-result[data-tone="won"] {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.5);
}

.rv-result[data-tone="lost"] {
  color: #e9b7ae;
  border-color: rgba(233, 183, 174, 0.4);
}

/* The timeline ------------------------------------------------------------------------------- */

.rv-tl {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.rv-sum {
  flex: none;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}

.rv-sum-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rv-sum-title--won {
  color: var(--good);
}

.rv-sum-title--lost {
  color: #e9b7ae;
}

.rv-sum-title--open {
  color: var(--muted);
}

.rv-sum-why {
  margin-top: 4px;
  font-size: 13px;
  color: var(--body);
}

.rv-sum-score {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.rv-sum-score b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.rv-sum-h {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.rv-mattered {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mt-btn {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--body);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.mt-btn:hover,
.rv-mattered li.is-sel .mt-btn {
  border-color: rgba(242, 181, 68, 0.6);
}

.mt-turn {
  font-size: 10.5px;
  color: var(--muted);
}

/* One line each: what you did → the coach's pick (the whole of both in the title). */
.mt-body {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-coach {
  color: var(--text);
}

.mt-gap {
  font-size: 11.5px;
  font-weight: 600;
  color: #f2b544;
}

.rv-mattered-none {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--good);
}

.rv-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 14px;
  outline: none;
}

.tl-turn {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
}

.tl-turn.is-rival {
  color: rgba(242, 230, 0, 0.8);
}

.tl-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 8px;
  padding: 4px 14px 4px 11px;
  border-left: 3px solid transparent;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--body);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.tl-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tl-row.is-differed {
  border-left-color: rgba(242, 181, 68, 0.55);
}

.tl-row.is-forced {
  opacity: 0.55;
}

.tl-row.is-sel {
  background: rgba(56, 225, 242, 0.09);
  border-left-color: var(--accent);
  color: var(--text);
  opacity: 1;
}

.tl-who {
  padding-top: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.tl-row.is-rival .tl-who {
  color: rgba(242, 230, 0, 0.75);
}

.tl-text {
  min-width: 0;
}

.tl-mark {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
  font-size: 10.5px;
}

.tl-mark.is-agreed {
  color: var(--good);
}

.tl-mark.is-differed {
  color: #f2b544;
}

.tl-clarity {
  padding: 0 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
}

.tl-clarity--clear {
  color: var(--body);
}

.tl-end .tl-who {
  color: var(--muted);
}

/* The transport: buttons and the scrubber, in the strip's place (same height). */

.rv-transport {
  position: relative;
  z-index: 8;
  flex: none;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rv-tbtns {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rv-tbtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.rv-tbtn:hover:not(:disabled) {
  border-color: var(--accent);
}

.rv-tbtn:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: default;
}

.rv-tbtn.is-on {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* (the second ▶ is "next move": a thinner glyph next to the bar) */
.rv-next::after {
  content: "";
  width: 2px;
  height: 10px;
  margin-left: 2px;
  background: currentColor;
}

.rv-next {
  display: flex;
  justify-content: center;
}

.rv-tsep {
  width: 1px;
  height: 22px;
  margin: 0 6px;
  background: var(--line-2);
}

.rv-scrub {
  position: relative;
  flex: 1;
  min-width: 80px;
  height: 40px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.rv-scrub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rv-scrub-track,
.rv-scrub-fill {
  position: absolute;
  left: 0;
  top: 14px;
  height: 4px;
}

.rv-scrub-track {
  right: 0;
  background: rgba(255, 255, 255, 0.08);
}

.rv-scrub-fill {
  background: rgba(56, 225, 242, 0.55);
  pointer-events: none;
}

.rv-scrub-thumb {
  position: absolute;
  top: 7px;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  background: var(--text);
  pointer-events: none;
  transition: left 120ms var(--ease);
}

.rv-tick {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 14px;
  background: var(--line-2);
}

.rv-tick-l {
  position: absolute;
  top: 14px;
  left: 0;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.rv-mark {
  position: absolute;
  top: -3px;
  width: 5px;
  height: 10px;
  margin-left: -2px;
  background: #f2b544;
  opacity: 0.75;
}

.rv-mark.is-mattered {
  top: -6px;
  height: 16px;
  background: var(--bad);
  opacity: 1;
}

/* The decision panel ------------------------------------------------------------------------- */

/* Fixed heights: a rival's move, a decision and the final position all fill the same boxes. The
   ranking's box holds three moves of 60 px each with the foot under them (214 px), then how the
   choice was made (two lines) and the line on what was played out during the game: 342 px. (It was
   302, and three moves ran under "how they chose" by 40 px; a watched game and a pattern's drill
   set their own heights.) */
.rv-panel .rank {
  flex: none;
  height: 342px;
  min-height: 0;
  overflow: hidden;
}

.rv-panel .rrows.is-expanded {
  max-height: 192px;
}

/* A short screen (1280×720): the review's ranking keeps its three moves, and the played-out region
   gives up spacing (not content) so its count line and caption stay on screen. */
@media (max-height: 800px) {
  .review:not(.watch, .drill-pat) .rv-panel .rank {
    height: 332px;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-head {
    gap: 6px;
    height: 56px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-btn {
    min-height: 32px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-body {
    min-height: 122px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-bars {
    gap: 8px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-words {
    margin: 0 0 4px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-meta {
    height: 20px;
    margin-top: 0;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-more {
    min-height: 20px;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-foot {
    min-height: 0;
  }

  .review:not(.watch, .drill-pat) .rv-panel .po-foot .bars-caption {
    min-height: 0;
  }
}

/* No played-out region (an account without play it out, caps.ts): nothing is reserved for it. The
   ranking takes the rail's height, every move in it (panel.ts), and how the choice was made follows
   the moves; a long ranking scrolls in its place. The same in a watched game and a pattern's drill,
   so these win over their fixed heights (watch.css, patterns.css). */
.rail.rv-panel.no-po .rank {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-bottom: 0;
}

.rail.rv-panel.no-po .rank-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.rail.rv-panel.no-po .rrows,
.rail.rv-panel.no-po .rrows.is-expanded {
  max-height: none;
  overflow: visible;
}

.po-empty {
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.po-foot {
  min-height: 80px;
}

.rv-row {
  cursor: default;
}

.coach-chip {
  flex: none;
  padding: 3px 5px 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bg);
  background: var(--accent);
}

.rv-how {
  min-height: 2.9em;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.po {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.po[hidden] {
  display: none;
}

/* Two fixed rows: what's compared, then the button across the panel. */
.po-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 64px;
}

.po-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  height: 18px;
}

.po-title .label {
  flex: none;
}

.po-sub {
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-btn {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.po-btn:disabled {
  color: var(--muted);
  cursor: default;
}

.po-btn:disabled:hover {
  --edge: var(--line-2);
}

.po-body {
  min-height: 132px;
}

.po-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.po-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: default;
}

.po-move .bar-label {
  min-width: 0;
}

.po-move .bar-name {
  font-size: 14px;
}

.po-move .bar-value {
  min-width: 0;
  font-size: 15px;
}

.po-words {
  margin: 1px 0 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-move.better .bar-name,
.po-move.better .bar-value {
  color: var(--accent);
}

.po-move.better .bar-fill {
  background: var(--accent);
}

.po-move.better .bar-band {
  background: rgba(56, 225, 242, 0.22);
  border-color: rgba(56, 225, 242, 0.55);
}

.po-move.is-partial .bar-fill {
  opacity: 0.45;
}

.po-move.is-partial .bar-value {
  color: var(--muted);
}

/* The bars are moved in place: a running analysis' win chance slides and its ±1 SE band tightens
   as games come in. Another comparison is drawn at once (.no-tr for one frame). */
.po-bars .bar-fill {
  transform: none;
  transition:
    width 600ms var(--ease),
    opacity var(--t-mid) var(--ease);
}

.po-bars .bar-band {
  opacity: 0;
  transition:
    left 600ms var(--ease),
    width 600ms var(--ease),
    opacity var(--t-mid) var(--ease);
}

.po-bars .bar-band.is-on {
  opacity: 1;
}

.po-bars.no-tr .bar-fill,
.po-bars.no-tr .bar-band {
  transition: none;
}

.po-bars[hidden],
.po-empty[hidden] {
  display: none;
}

.po-move:hover .bar-name {
  color: var(--text);
}

/* Two lines kept for the verdict (the longest final wording takes both), so nothing under it
   moves between states. */
.po-verdict {
  min-height: calc(2 * 1.35 * 14px);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--body);
}

.po-verdict.is-so-far {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

.po-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 24px;
  margin-top: 2px;
}

.po-count {
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-count.is-wait {
  color: var(--body);
}

.po-more {
  flex: none;
  min-height: 24px;
  padding: 0 2px;
  color: var(--accent);
}

.po-more[hidden] {
  display: none;
}

.po-verdict.is-cost {
  color: var(--bad);
}

.po-verdict.is-better {
  color: var(--good);
}

.po-verdict.is-even {
  color: var(--text);
}

.po-verdict.is-running,
.po-verdict.is-idle,
.po-verdict.is-error {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

.po-verdict.is-error {
  color: var(--bad);
}

/* The home worker (docs/coach-worker-api.md): its wait said in full while no game is in, and, before
   a play-out is asked, that it would wait for an offline worker. */
.po-verdict.is-running.is-note,
.po-verdict.is-idle.is-hint {
  color: var(--body);
}

.po-spin {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--accent);
  animation: po-blink 900ms ease-in-out infinite;
}

@keyframes po-blink {
  50% {
    opacity: 0.25;
  }
}

.po-foot .bars-caption {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The list of games -------------------------------------------------------------------------- */

.rl-list {
  display: flex;
  flex-direction: column;
}

.rl-head,
.rl-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 128px 74px 96px 96px 18px;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}

.rl-head {
  padding-top: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.rl-row {
  border-bottom: 1px solid var(--line);
  color: var(--body);
  transition: background var(--t-fast) var(--ease);
}

.rl-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.rl-row:focus-visible {
  outline-offset: -2px;
}

.rl-row--skeleton {
  height: 62px;
}

.rl-result {
  width: fit-content;
  padding: 4px 8px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.rl-result--won {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.45);
}

.rl-result--lost {
  color: #e9b7ae;
  border-color: rgba(233, 183, 174, 0.35);
}

.rl-result--draw {
  color: var(--body);
}

.rl-decks {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.rl-deck {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0;
}

.rl-legends {
  flex: none;
  display: flex;
  gap: 3px;
}

.rl-art {
  position: relative;
  width: 26px;
  aspect-ratio: var(--card-ratio);
}

.rl-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-deck--opp .rl-title {
  color: rgba(242, 230, 0, 0.85);
}

/* The rival's pilot, when it wasn't the default net (Humana AI, a sharp net). */
.rl-pilot {
  flex: none;
  padding: 2px 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 230, 0, 0.85);
  border: 1px solid rgba(242, 230, 0, 0.35);
}

.review .mh-tag:empty {
  display: none;
}

.rl-vs {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
}

.rl-when {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.rl-num {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.rl-num b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.rl-go {
  color: var(--muted);
  transition:
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.rl-row:hover .rl-go {
  color: var(--accent);
  transform: translateX(3px);
}

/* The review's header gives its words to the deck titles (and the rival's tag): the back link
   keeps its arrow. */
@media (max-width: 1599px) {
  .review .mh-decks .mh-btn span {
    display: none;
  }
  .review .mh-decks .mh-btn {
    padding: 0 8px;
  }
}

@media (max-width: 1100px) {
  .review .mh-turn {
    display: none;
  }
  .rl-head,
  .rl-row {
    grid-template-columns: 96px minmax(0, 1fr) 110px 64px 84px 18px;
  }
  .rl-head > :nth-child(6),
  .rl-row > :nth-child(6) {
    display: none;
  }
  .rl-legends {
    display: none;
  }
}

/* Another user's game or watched game (caps.ts `viewAs`): the read-only banner at the top of the
   left column, small. */
.rv-tl > .viewing {
  flex: none;
  flex-wrap: wrap;
  margin: 10px 12px 0;
  padding: 6px 10px;
  gap: 4px 10px;
  font-size: 12px;
}

/* Deck guides (#/guide, #/guide/<key>): a page a good player would hand you before a tournament.
   One scrolling column, a slim sticky index on the left at desktop widths, quiet panels. Numbers are
   the coach's net's play; rates on few games are greyed. */

/* ------------------------------------------------------------------------------------------- */
/* The page */

.guide {
  max-width: 1340px;
}

.gd-layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.gd-side {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 4px;
}

.gd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.gd-back:hover {
  color: var(--text);
}

.gd-back .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.gd-index-label {
  display: block;
  margin-bottom: 10px;
}

.gd-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line-2);
}

.gd-index-btn {
  display: block;
  width: 100%;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.gd-index-btn:hover {
  color: var(--text);
}

.gd-index-btn.is-on {
  color: var(--text);
  border-left-color: var(--accent);
}

.gd-index-btn:focus-visible {
  outline-offset: -2px;
}

.gd-main {
  min-width: 0;
  max-width: 1080px;
}

/* No index under desktop widths: the page is one column with its way back on top. */
@media (max-width: 1100px) {
  .gd-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .gd-side {
    position: static;
    margin-bottom: 18px;
  }
  .gd-index {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* The header */

.gd-head {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding-bottom: 30px;
}

.gd-head-legends {
  flex: none;
  display: flex;
  gap: 10px;
  min-height: 128px;
}

.gd-head-slot {
  width: 92px;
}

.gd-head-text {
  min-width: 0;
  flex: 1;
}

.gd-title {
  font-size: 40px;
  margin: 8px 0 8px;
}

.gd-title-note {
  display: block;
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.gd-tags {
  display: flex;
  gap: 8px;
  min-height: 18px;
}

.gd-made {
  min-height: 1.45em;
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--body);
}

.gd-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.6em;
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.gd-status.is-live {
  color: var(--body);
}

.gd-pulse {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
  animation: gd-blink 1400ms ease-in-out infinite;
}

@keyframes gd-blink {
  50% {
    opacity: 0.25;
  }
}

.gd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 36px;
  margin-top: 18px;
}

/* ------------------------------------------------------------------------------------------- */
/* Sections */

.gd-sec {
  padding: 36px 0 10px;
  border-top: 1px solid var(--line);
}

.gd-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.gd-h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gd-h2:focus {
  outline: none;
}

.gd-note {
  max-width: 640px;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
}

.gd-h3 {
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.gd-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 20px;
}

.gd-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gd-sub {
  font-size: 12.5px;
  color: var(--muted);
}

.gd-empty {
  font-size: 13px;
  color: var(--muted);
}

.gd-name {
  font-size: 14px;
  color: var(--text);
}

.gd-thumb {
  flex: none;
}

.gd-thumb-ph {
  flex: none;
  width: 34px;
  aspect-ratio: var(--card-ratio);
}

/* Rates on few games: greyed, with a quiet tag. */
.gd-rate.is-few,
.is-few > .gd-big,
.is-few .gd-mseat-v,
.gd-copen.is-few {
  color: var(--muted);
}

.gd-few-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px dashed var(--line-2);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  vertical-align: 1px;
}

.gd-seg {
  flex: none;
}

/* ------------------------------------------------------------------------------------------- */
/* At a glance */

.gd-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.gd-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.gd-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  color: var(--text);
}

.gd-big-pre {
  font-size: 22px;
  color: var(--muted);
  margin-right: -6px;
}

.gd-pm {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.gd-stat-cap {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.gd-glance-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.sbar {
  display: flex;
  gap: 2px;
  height: 14px;
}

.sbar-seg {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 2px;
}

.seg-win-0 {
  background: var(--accent);
}

.seg-win-1 {
  background: rgba(56, 225, 242, 0.6);
}

.seg-win-2 {
  background: rgba(56, 225, 242, 0.35);
}

.seg-loss-0 {
  background: #c45d52;
}

.seg-loss-1 {
  background: rgba(255, 138, 122, 0.5);
}

.seg-loss-2 {
  background: rgba(255, 138, 122, 0.28);
}

.seg-draw {
  background: #56626a;
}

.gd-endbar {
  margin: 4px 0 16px;
}

.gd-ends-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
}

.gd-ends-label {
  flex: none;
  width: 58px;
}

.gd-ends-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-end {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--body);
}

.gd-sw {
  flex: none;
  width: 9px;
  height: 9px;
}

.gd-end-n {
  font-size: 12px;
  color: var(--text);
}

.gd-legend {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gd-legend i {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin: 0 6px 3px 14px;
}

.lg-me {
  background: var(--accent);
}

.lg-opp {
  background: var(--rival);
}

.gchart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.gc-grid {
  stroke: rgba(255, 255, 255, 0.07);
}

.gc-win {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-dasharray: 3 3;
}

.gc-axis {
  fill: var(--muted);
  font-family: var(--f-mono);
  font-size: 10px;
}

.gc-wintext {
  fill: rgba(154, 166, 173, 0.75);
}

.gc-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.gc-me {
  stroke: var(--accent);
}

.gc-opp {
  stroke: var(--rival);
  opacity: 0.85;
}

.gc-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
}

.gc-me-t {
  fill: var(--accent);
}

.gc-opp-t {
  fill: var(--rival);
}

/* ------------------------------------------------------------------------------------------- */
/* Mulligan */

.gd-after {
  margin: -10px 0 18px;
}

.gd-lede {
  margin-bottom: 18px;
  font-size: 17px;
  color: var(--body);
}

.gd-em {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text);
}

.gd-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.gd-signals .gd-h3 {
  margin-bottom: 2px;
}

.gd-sig-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.gd-sig {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 12px;
}

.gd-sig.is-few {
  opacity: 0.6;
}

.gd-sig-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.gd-sig-words {
  font-size: 12.5px;
  color: var(--muted);
}

.gd-sig-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gd-sig-v {
  flex: none;
  width: 40px;
  font-size: 11.5px;
  text-align: right;
  color: var(--body);
}

.dbar {
  position: relative;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.dbar-mid {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line-2);
}

.dbar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
}

.dbar-fill.is-pos {
  background: var(--accent);
}

.dbar-fill.is-neg {
  background: var(--bad);
}

.gd-counts {
  margin-bottom: 16px;
}

.gd-count-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.gd-count {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.gd-count-what {
  font-size: 13.5px;
  color: var(--body);
}

.gd-count-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gd-cbar {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
}

.gd-cbar.is-few {
  opacity: 0.5;
}

.gd-cbar-k {
  font-size: 11.5px;
  color: var(--muted);
}

.gd-cbar-v {
  font-size: 11.5px;
  text-align: right;
  color: var(--body);
}

.hbar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.hbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  opacity: 0.8;
}

.gd-hand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.gd-h3 + .gd-hand {
  border-top: 0;
  padding-top: 0;
}

.gd-hand-cards {
  display: flex;
  gap: 4px;
}

.gd-hand-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.gd-hand-p {
  font-size: 12.5px;
}

.gd-hand-p.is-keep {
  color: var(--good);
}

.gd-hand-p.is-mull {
  color: var(--bad);
}

.gd-hand-seat {
  font-size: 10.5px;
  color: var(--muted);
}

.gd-drill {
  margin-bottom: 2px;
}

/* ------------------------------------------------------------------------------------------- */
/* Turn by turn: turns 1-3 large, 4-8 compact. Every row is always there, so switching seats moves
   nothing. */

.gd-turns-big {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.gd-turns-small {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.gd-turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 14px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.gd-turn.is-big {
  padding: 18px 18px 14px;
}

.gd-turn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gd-turn-n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.is-big .gd-turn-n {
  font-size: 22px;
}

.gd-turn-games {
  font-size: 10.5px;
  color: var(--muted);
}

.gd-turn.is-few .gd-tplay-n,
.gd-turn.is-few dd {
  color: var(--muted);
}

.gd-turn-label {
  font-size: 10px;
}

.gd-tplays {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-tplay {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gd-turns-small .gd-thumb-ph {
  width: 28px;
}

.gd-tplay-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gd-tplay-text .gd-name {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-turns-small .gd-tplay-text .gd-name {
  font-size: 12.5px;
}

.gd-tplay-n {
  font-size: 11px;
  color: var(--muted);
}

.gd-facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.gd-fact {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}

.gd-fact dt {
  font-size: 9.5px;
}

.gd-fact dd {
  margin: 0;
  height: 1.45em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body);
}

.gd-fact.is-none dd {
  color: var(--muted);
}

.gd-turns-small .gd-fact {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px;
  font-size: 11.5px;
}

.gd-turns-small .gd-fact dt {
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------------------------------- */
/* Card roles */

.gd-chead,
.gd-crow {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) minmax(190px, 1.5fr) 62px minmax(120px, 1fr) 104px;
  align-items: center;
  gap: 18px;
  padding: 8px 6px;
}

.gd-chead {
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gd-chead small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.gd-chead-open {
  text-align: right;
}

.gd-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 4px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.gd-key i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
}

.gd-crow {
  border-bottom: 1px solid var(--line);
}

.gd-cgroup {
  padding: 22px 6px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
}

.gd-cgroup-n {
  margin-left: 10px;
  color: var(--muted);
}

.gd-ccard {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gd-ccard .gd-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-copies {
  flex: none;
  font-size: 11px;
  color: var(--muted);
}

.gd-cfate {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gd-fatebar {
  height: 10px;
}

.f-played {
  background: var(--accent);
}

.f-sold {
  background: #d9a441;
}

.f-disc {
  background: var(--bad);
}

.f-held {
  background: #56626a;
}

.f-other {
  background: #3a4248;
}

.gd-cfate-v {
  font-size: 11px;
  color: var(--muted);
}

.gd-cturn {
  font-size: 12px;
  color: var(--body);
}

.gd-con {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.gd-copen {
  font-size: 13px;
  text-align: right;
  color: var(--body);
}

.gd-copen .gd-few-tag {
  display: block;
  margin: 4px 0 0 auto;
  width: max-content;
}

/* ------------------------------------------------------------------------------------------- */
/* Legends */

.gd-legends {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gd-lcard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gd-legend-text {
  min-width: 0;
}

.gd-legend-name {
  margin-bottom: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.gd-legend-name small {
  display: block;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.gd-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--body);
}

/* ------------------------------------------------------------------------------------------- */
/* Plays together */

.gd-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-pair {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.gd-pair.is-few {
  opacity: 0.6;
}

.gd-pair-cards {
  flex: none;
  display: flex;
  gap: 4px;
}

.gd-pair-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gd-pair-words {
  font-size: 12.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------------------------------- */
/* Matchups */

.gd-mhead,
.gd-mrow {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) 58px minmax(150px, 1fr) minmax(150px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 10px 6px;
}

.gd-mhead {
  align-items: end;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gd-mhead-share {
  text-align: right;
}

.gd-mscale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9.5px;
  letter-spacing: 0;
  color: rgba(154, 166, 173, 0.75);
}

.gd-mrow {
  border-bottom: 1px solid var(--line);
}

.gd-mitem .gd-mrow {
  border-bottom: 0;
}

.gd-mname {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.gd-mname:hover .gd-mtitle {
  color: var(--accent);
}

.gd-mname:focus-visible {
  outline-offset: 4px;
}

.gd-chev {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 2px 0 2px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--t-fast) var(--ease);
}

.is-open .gd-chev {
  transform: rotate(45deg);
}

.gd-mlegends {
  flex: none;
  display: flex;
  gap: 3px;
}

.gd-mtitle {
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease);
}

.gd-mshare {
  font-size: 12px;
  text-align: right;
  color: var(--body);
}

.gd-mseat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gd-mseat-v {
  font-size: 11.5px;
  color: var(--body);
}

.gd-mseat .gd-few-tag {
  align-self: flex-start;
  margin-left: 0;
}

.ibar {
  position: relative;
  display: block;
  height: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.ibar-mid {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line-2);
}

.ibar-range {
  position: absolute;
  top: 5px;
  height: 4px;
  background: rgba(56, 225, 242, 0.35);
}

.ibar-dot {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--accent);
}

.ibar.is-few .ibar-range {
  background: rgba(255, 255, 255, 0.14);
}

.ibar.is-few .ibar-dot {
  background: var(--muted);
}

.gd-mitem {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.gd-mdetail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 6px 18px 37px;
}

.gd-mdetail-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
  font-size: 13.5px;
  color: var(--body);
}

/* ------------------------------------------------------------------------------------------- */
/* Being made, or not yet */

.gd-making,
.gd-none {
  max-width: 660px;
  margin: 8px 0 40px;
  padding: 28px 30px 26px;
}

.gd-making-body {
  margin: 10px 0 22px;
  color: var(--body);
}

.gd-prog {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.gd-prog-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width 2800ms linear;
}

.gd-prog-text {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--body);
}

.gd-prog-wait {
  color: var(--muted);
}

.gd-none-actions {
  display: flex;
  gap: 12px;
}

.gd-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

.gd-sk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 150px;
}

/* ------------------------------------------------------------------------------------------- */
/* The list of guides */

.gl-group {
  margin-bottom: 30px;
}

.gl-group-h {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.gl-group-note {
  opacity: 0.7;
}

.gl-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.gl-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 300px;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease);
}

a.gl-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

a.gl-row:hover .gl-go {
  color: var(--accent);
}

.gl-row.is-stale .gl-meta .mono {
  color: rgba(242, 230, 0, 0.7);
}

.gl-row--sk {
  grid-template-columns: minmax(0, 1fr);
}

.gl-legends {
  display: flex;
  gap: 4px;
}

.gl-art {
  position: relative;
  width: 30px;
  aspect-ratio: var(--card-ratio);
}

.gl-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gl-title {
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 16px;
  font-size: 11.5px;
  color: var(--muted);
}

.gl-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.gl-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  transition: color var(--t-fast) var(--ease);
}

.gl-go--link:hover {
  color: var(--accent);
}

.gl-making {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  width: 100%;
}

.gl-prog {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.gl-prog-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width 2800ms linear;
}

.gl-prog-text {
  font-size: 11px;
  color: var(--muted);
}

.gl-err {
  margin-left: 12px;
  font-size: 11px;
  color: var(--bad);
}

/* ------------------------------------------------------------------------------------------- */
/* Entry points elsewhere: the guide link on a deck (the match setup's rows and pick are in
   setup.css). The mulligan trainer's deck card starts the drill; its guide link is a tab on its top edge. */

.deck-wrap {
  position: relative;
  display: grid;
}

.deck-guide {
  position: absolute;
  top: -11px;
  right: 22px;
  z-index: 2;
  padding: 4px 9px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  background: rgba(11, 13, 16, 0.86);
  border: 1px solid rgba(56, 225, 242, 0.4);
  transition: background var(--t-fast) var(--ease);
}

.deck-guide:hover,
.deck-guide:focus-visible {
  background: rgba(23, 28, 33, 0.96);
  border-color: var(--accent);
}

.drill-guide {
  display: inline-block;
  white-space: nowrap;
  margin-left: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.drill-guide:hover,
.drill-guide:focus-visible {
  color: var(--accent);
}

/* The stage director's overlay (src/match/stage/director.ts): a card held up with its caption, an
   attack's arrow, a fight's powers, rings and floats, the turn banner. Fixed, above the board, never
   taking a pointer. Only transform and opacity animate. */

.stage-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.stage-el {
  position: fixed;
  will-change: transform, opacity;
  pointer-events: none;
}

/* What waits to land: kept in its place (no reflow), invisible until its cue. */
.stage-hide {
  opacity: 0 !important;
}

/* While a sequence plays, the board's own arrival fade stays out of the way. */
.stage-on .cs.is-new .card,
.stage-on .die.is-new {
  animation: none;
}

.stage-card {
  transform-origin: 0 0;
}

.stage-card .card {
  position: absolute;
  inset: 0;
  border-radius: 3.2% / 2.3%;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.stage-card .face {
  position: absolute;
  inset: 0;
}

/* A ghost: a copy of a card or die as it was, travelling away. */
.stage-ghost > .slot,
.stage-ghost > .die {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.stage-ghost > .slot .card {
  transform: none !important;
}

.stage-ghost.is-beaten {
  filter: grayscale(1) brightness(0.55);
}

.stage-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  padding: 7px 14px 7px 12px;
  background: rgba(11, 13, 16, 0.94);
  border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--text);
  transform: translateX(-50%);
}

.stage-caption > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-who {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.stage-caption--opp .stage-who {
  color: var(--rival);
}

/* Lines: an attack's arrow, an effect reaching its target. Drawn from their start (scaleX). */
.stage-line {
  height: 4px;
  transform-origin: 0 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(56, 225, 242, 0.45);
  color: var(--accent);
}

.stage-line--opp {
  background: var(--rival);
  box-shadow: 0 0 12px rgba(242, 230, 0, 0.45);
  color: var(--rival);
}

.stage-line:not(.has-head) {
  height: 2px;
  opacity: 0.8;
}

.stage-head {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 14px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* A fight: the two powers meeting. */
.stage-power {
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.stage-power.is-a {
  border-color: var(--accent);
}

.stage-power.is-d {
  border-color: var(--rival);
}

.stage-vs {
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A pulse around something that changed. */
.stage-ring {
  border: 2px solid var(--accent);
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(56, 225, 242, 0.35);
}

.stage-ring--target {
  border-color: var(--rival);
  box-shadow: 0 0 14px rgba(242, 230, 0, 0.35);
}

.stage-ring--spent,
.stage-ring--paid {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.stage-ring--ready {
  border-color: var(--good);
  box-shadow: 0 0 14px rgba(61, 190, 110, 0.35);
}

/* "+2", "−1", "+1" floating off what changed. */
.stage-float {
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--good);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.stage-float--down {
  color: var(--bad);
}

.stage-old {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: line-through;
  color: var(--bad);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* The turn passing. */
.stage-sweep {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, transparent, rgba(56, 225, 242, 0.14) 22%, rgba(56, 225, 242, 0.14) 78%, transparent);
  border-top: 1px solid rgba(56, 225, 242, 0.35);
  border-bottom: 1px solid rgba(56, 225, 242, 0.35);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.stage-sweep--opp {
  background: linear-gradient(90deg, transparent, rgba(242, 230, 0, 0.12) 22%, rgba(242, 230, 0, 0.12) 78%, transparent);
  border-color: rgba(242, 230, 0, 0.35);
  color: var(--rival);
}

/* Whose turn it is, at a glance: the active half's edge. */
.half {
  position: relative;
}

.half::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.half--opp::before {
  background: var(--rival);
}

.half.is-active::before {
  opacity: 0.75;
}

/* The playback controls on the board: speed, pause, step. */
.pace {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* In the review's transport: in line with its buttons. */
.rv-tbtns .pace {
  position: static;
}

.pace .seg-btn {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11.5px;
}

.pace-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.pace-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}

.pace-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pace-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* "What just happened?": a logged step shown again on the board. The play mark sits over the row's
   right edge on hover, so nothing moves. */
.log-line.is-replay {
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.log-line.is-replay:hover,
.log-line.is-replay:focus-visible {
  background: rgba(255, 255, 255, 0.035);
}

.log-line.is-replay:focus-visible {
  outline-offset: -2px;
}

.log-play {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8.5px;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.log-line.is-replay:hover .log-play,
.log-line.is-replay:focus-visible .log-play {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .half::before {
    transition: none;
  }
}

/* "Act here" (src/match/cue-view.ts): one signal for where the player is wanted, used for nothing
   else. Corner brackets that breathe around the place, a "Your move" tag saying what to do, live
   items ringed inside it, the rest stepping back while a specific choice is up. Only opacity and
   transform animate; nothing here changes a box. */

.cue-host {
  position: relative;
}

.tray.cue-host {
  position: absolute;
}

.cue-frame {
  position: absolute;
  inset: -6px;
  z-index: 15;
  pointer-events: none;
  border-radius: 6px;
}

/* A soft glow inside the brackets. The brackets and the glow breathe; the tag holds still. */
.cue-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(56, 225, 242, 0.22);
  box-shadow:
    0 0 20px rgba(56, 225, 242, 0.22),
    inset 0 0 16px rgba(56, 225, 242, 0.1);
}

.cue-frame::before,
.cue-corners {
  animation: cue-breathe 2.2s ease-in-out infinite;
}

/* The four corner brackets: a viewfinder, not an outline (outlines are selections and targets). */
.cue-corners {
  position: absolute;
  inset: 0;
  --c: var(--accent);
  --l: 18px;
  --w: 2.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}

/* "YOUR MOVE · Take a Gig: pick a die", above the place's top-left corner. */
.cue-tag {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 8px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* The strip's frame sits inside it (the strip spans the board edge to edge). */
.cue-frame.is-strip {
  inset: 3px;
}

/* Beside your hand, at its middle, on two lines (the strip is right above it). */
.tag-side > .cue-tag {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  margin: 0 12px 0 0;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 5px 9px;
}

.tag-side > .cue-tag b {
  padding: 0;
  border: 0;
}

/* Inside a zone's top-left corner, over its label. */
.tag-inside > .cue-tag {
  bottom: auto;
  top: 5px;
  left: 5px;
  margin: 0;
}

.tag-right > .cue-tag {
  left: auto;
  right: 0;
}

.tag-below > .cue-tag {
  bottom: auto;
  top: 100%;
  margin: 5px 0 0;
}

.cue-tag b {
  font-weight: 700;
  padding-right: 7px;
  border-right: 1px solid rgba(11, 13, 16, 0.35);
}

@keyframes cue-breathe {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Once more (the strip's pointer, an idle nudge): the frame closes in and settles. */
.cue-frame.is-flash {
  animation: cue-flash 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 1;
}

@keyframes cue-flash {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  65% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

/* Live items inside the place: a ring of the same colour, breathing with the frame. */
.cs.is-cue::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 3;
  pointer-events: none;
  border-radius: 6px;
  border: 1.5px solid rgba(56, 225, 242, 0.9);
  box-shadow: 0 0 12px rgba(56, 225, 242, 0.4);
  animation: cue-breathe 2.2s ease-in-out infinite;
}

/* A die's ring follows its shape: a halo of the die's own outline behind it (rings would run
   into the dice beside it). */
.die.is-cue {
  z-index: 2;
  cursor: pointer;
  opacity: 1;
}

.die.is-cue::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  pointer-events: none;
  clip-path: var(--shape);
  background: var(--accent);
  animation: cue-breathe 2.2s ease-in-out infinite;
}

.cs.is-cue-flash::after,
.die.is-cue-flash::after {
  animation:
    cue-flash 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 1,
    cue-breathe 2.2s ease-in-out 900ms infinite;
}

/* Gig dice while choosing one: bigger, easy to hit, spread a little from the middle. */
.die.is-cue-spread {
  transform: translateX(var(--cue-dx, 0));
  transition: transform var(--t-mid) var(--ease);
}

.die.is-cue-spread.is-cue-big {
  transform: translateX(var(--cue-dx, 0)) scale(1.25);
}

.die.is-cue-big.is-sel,
.die.is-cue-big.is-chosen {
  transform: translateX(var(--cue-dx, 0)) translateY(-2px) scale(1.25);
}

/* Your open turn: the cards with a move are live but steady (the strip is the place). */
.cue-kind-main .cs.is-cue::after,
.cue-kind-main .die.is-cue::after {
  animation: none;
  opacity: 0.55;
  box-shadow: none;
}

.cue-kind-main .die.is-cue::after {
  opacity: 0.35;
}

/* A specific choice: the rest steps back (never hidden; hover still peeks). */
.cue-dim {
  opacity: 0.74;
  transition: opacity 220ms var(--ease);
}

.mzone,
.gigside,
.fixer,
.ofan-row,
.hand-row {
  transition: opacity 220ms var(--ease);
}

/* The strip: quiet while the rival's turn plays; active (an accent top edge) while the player's
   input is wanted; and an arrival moment when the decision comes up. */
.strip.is-waiting .strip-say,
.strip.is-waiting .strip-second {
  opacity: 0.7;
}

.strip.is-active {
  box-shadow: inset 0 2px 0 var(--accent);
}

/* The arrival: a light runs along the top edge (inside the strip: its background moves, not a
   box), the strip warms with the accent for a moment, and the primary pulses once. */
.strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent) no-repeat;
  background-size: 35% 100%;
  background-position: -60% 0;
  opacity: 0;
}

.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(56, 225, 242, 0.16), rgba(56, 225, 242, 0.04));
  opacity: 0;
}

.strip.is-arrive::after {
  animation: strip-sweep 700ms cubic-bezier(0.4, 0, 0.6, 1) 1;
}

.strip.is-arrive::before {
  animation: strip-wash 1100ms ease-out 1;
}

.strip.is-arrive .strip-pri {
  animation: strip-pulse 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms 1;
}

@keyframes strip-sweep {
  0% {
    opacity: 1;
    background-position: -60% 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 160% 0;
  }
}

@keyframes strip-wash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes strip-pulse {
  0%,
  100% {
    transform: none;
  }
  40% {
    transform: scale(1.05);
  }
}

/* The pointer to the place when it's off the strip. */
.strip-pointer {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 12px;
  padding: 3px 9px;
  border: 1px solid rgba(56, 225, 242, 0.55);
  background: rgba(56, 225, 242, 0.1);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--t-fast) var(--ease);
}

.strip-pointer:hover,
.strip-pointer:focus-visible {
  background: rgba(56, 225, 242, 0.2);
}

/* Short of room, the choices give way before the pointer does. */
.strip-pointer + .chips,
.strip-pointer + .strip-hint {
  flex-shrink: 6;
  min-width: 0;
}

.strip-pointer[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cue-frame,
  .cue-frame.is-flash,
  .cue-frame::before,
  .cue-corners,
  .cs.is-cue::after,
  .die.is-cue::after {
    animation: none;
    opacity: 1;
  }
  .strip.is-arrive::after,
  .strip.is-arrive::before,
  .strip.is-arrive .strip-pri {
    animation: none;
  }
  .die.is-cue-spread,
  .die.is-cue-big {
    transition: none;
  }
}

/* The coach rail's two additions: a "why" line under each ranked option (src/match/why.ts), and
   "Play it out" under the ranking (src/match/think.ts, think-view.ts). Neither moves the ranking:
   a row is 60 px with or without its line, and the panel opens below the ranking. */

/* ------------------------------------------------------------------------------------------- */
/* Why */

.rank-tags {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.why-toggle {
  min-height: 20px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.why-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(56, 225, 242, 0.45);
  background: var(--accent-dim);
}

.why-toggle:hover {
  color: var(--text);
}

.why-toggle[hidden] {
  display: none;
}

/* A row with its line: the label keeps one line (the whole of it in the tooltip), the line spans
   the label's and the confidence's columns, and the row keeps its 60 px. */
.rrow.has-why {
  grid-template-rows: auto auto;
  row-gap: 3px;
  align-content: center;
}

.rrow.has-why .rrow-main {
  gap: 4px;
}

.rrow.has-why .rrow-words {
  -webkit-line-clamp: 1;
}

.rrow-why {
  grid-column: 2 / 4;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rrow.is-top .rrow-why {
  color: var(--body);
}

/* ------------------------------------------------------------------------------------------- */
/* Play it out */

.think {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line);
}

.think[hidden] {
  display: none;
}

.think-head {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Quiet: a text button with its key, not a call to action. */
.think-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 8px 0 0;
  background: transparent;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
}

.think-btn kbd {
  font-size: 10px;
  padding: 1px 5px;
}

.think-btn:hover:not(:disabled) .think-btn-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.think-btn:disabled {
  color: var(--muted);
  cursor: default;
}

.think-btn:disabled kbd {
  opacity: 0.5;
}

.think-btn.is-running {
  color: var(--body);
}

.think-what {
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The home worker offline (playout.ts): said under the button before a play-out is asked. */
.think-hint {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--body);
}

.think-hint[hidden] {
  display: none;
}

/* Open: its height is reserved from the first answer to the last, so nothing under it moves while
   the games come in. */
.think-body {
  height: 166px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.think-body[hidden] {
  display: none;
}

.think-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.think-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.think-label {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.think-name {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body);
}

.think-words {
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.think-value {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}

.think-move .bar-track {
  height: 8px;
}

.think-move .bar-fill {
  transform: none;
  transition:
    width 600ms var(--ease),
    opacity var(--t-mid) var(--ease);
}

.think-move .bar-band {
  top: -2px;
  bottom: -2px;
  opacity: 0;
  transition:
    left 600ms var(--ease),
    width 600ms var(--ease),
    opacity var(--t-mid) var(--ease);
}

.think-move .bar-band.is-on {
  opacity: 1;
}

.think-bars.no-tr .bar-fill,
.think-bars.no-tr .bar-band {
  transition: none;
}

.think-move.is-partial .bar-fill {
  opacity: 0.45;
}

.think-move.is-partial .think-value {
  color: var(--muted);
}

.think-move.better .think-name,
.think-move.better .think-value {
  color: var(--accent);
}

.think-move.better .bar-fill {
  background: var(--accent);
}

.think-move.better .bar-band {
  background: rgba(56, 225, 242, 0.22);
  border-color: rgba(56, 225, 242, 0.55);
}

/* Two lines kept for the verdict ("so far: the coach's pick ahead by about 20 points" may take
   both in a narrow rail), so nothing under it moves between answers. */
.think-verdict {
  height: 34px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 17px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.think-verdict.is-so-far {
  font-weight: 400;
  color: var(--muted);
}

.think-verdict.is-error {
  font-weight: 400;
  color: var(--bad);
}

/* The count, then whose games they were, a line each. */
.think-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.think-count,
.think-caption {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.think-count {
  flex: none;
}

.think-count.is-wait {
  color: var(--body);
}

.think-caption {
  min-width: 0;
  text-align: left;
}

/* Mistakes only: the slip's toast, with the coach's pick's line, may take two lines (it floats
   over the board: nothing moves). */
.toast.is-wrap {
  white-space: normal;
  align-items: flex-start;
}

.toast.is-wrap .toast-who {
  margin-top: 2px;
}

.toast.is-wrap .toast-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* The end panel: what was played out during the game. */
.end-played {
  margin-top: 6px;
}

/* The review: a decision played out during the game says so on one line, its place kept. */
.rv-during {
  min-height: 1.45em;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The deck builder: My decks (#/decks) and the editor (#/decks/<id>). The editor fills the window
   under the top bar in three fixed regions (the pool, the list, the shape and note), each scrolling
   on its own, so nothing reflows as cards come and go. */

/* ------------------------------------------------------------------------------------------- */
/* My decks */

.mydecks .page-head {
  margin-bottom: 18px;
}

.md-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.md-bar .btn[aria-expanded="true"] {
  --edge: var(--accent);
  color: var(--accent);
}

.md-local {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* This browser's decks from before accounts, not moved yet: one quiet line under the bar. */
.md-move {
  margin: -8px 0 16px;
  font-size: 13px;
}

.md-move[hidden] {
  display: none;
}

.md-readonly {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(242, 181, 68, 0.5);
  color: #f2b544;
  font-size: 13px;
}

.md-readonly[hidden] {
  display: none;
}

.md-panel {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  background: var(--panel);
}

.md-panel[hidden] {
  display: none;
}

.md-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-panel-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-panel-note {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.md-paste {
  width: 100%;
  height: 168px;
}

.md-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.md-status {
  font-size: 13px;
  color: var(--body);
  min-height: 1.4em;
}

.md-bad {
  color: var(--bad);
}

.md-start {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 6px 24px;
  max-height: 340px;
  overflow: auto;
}

.md-start-group {
  display: contents;
}

.md-start-group > .label {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.md-start-none {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.md-start-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.md-start-row:hover:not(:disabled) {
  border-color: var(--accent);
}

.md-start-row:disabled {
  cursor: default;
}

.md-start-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-start-go {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.md-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}

.md-row:hover,
.md-row:focus-visible {
  border-color: var(--line-2);
}

.md-row:focus-visible {
  border-color: var(--accent);
}

.md-legends {
  display: flex;
  gap: 4px;
}

.md-legend {
  position: relative;
  width: 40px;
  aspect-ratio: var(--card-ratio);
  flex: none;
}

.md-start-row .md-legend {
  width: 30px;
}

.md-legend--empty {
  border: 1px dashed var(--line-2);
}

.md-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.md-title {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-rename {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  height: 26px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  max-width: 520px;
}

.md-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.md-code {
  color: var(--body);
  font-weight: 600;
}

.md-tag {
  justify-self: start;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.md-tag--good {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.5);
}

.md-tag--bad {
  color: var(--bad);
  border-color: rgba(255, 138, 122, 0.5);
}

.md-acts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.md-export-wrap {
  position: relative;
}

.md-export {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.md-export[hidden] {
  display: none;
}

.md-export .md-act {
  justify-content: flex-start;
  text-align: left;
}

.md-empty {
  max-width: 640px;
}

.md-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #10252a;
  border: 1px solid rgba(56, 225, 242, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

.md-toast[hidden] {
  display: none;
}

.md-toast-act {
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ------------------------------------------------------------------------------------------- */
/* The editor */

.deckedit {
  --list-w: 300px;
  --side-w: 290px;
  height: calc(100vh - 53px);
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.de-head {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.de-back {
  height: 36px;
}

.de-titlebox {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.de-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 32px;
  padding: 0 6px;
  margin-left: -6px;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  text-overflow: ellipsis;
}

.de-title:hover {
  border-color: var(--line-2);
}

.de-title:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.de-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.de-saved {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.de-nudge {
  font-size: 12px;
  color: #f2b544;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.de-nudge.is-on {
  opacity: 1;
}

.de-tools {
  display: flex;
  gap: 4px;
}

.de-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--body);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.de-tool:disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

.de-tool:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

.de-tool .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.de-tool .icon--flip {
  transform: scaleX(-1);
}

.de-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.de-actions .btn:disabled,
.de-actions .btn.is-off {
  opacity: 0.45;
  cursor: default;
}

.de-actions .btn[hidden] {
  display: none;
}

.de-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--list-w) var(--side-w);
  min-height: 0;
}

.de-notice {
  grid-column: 1 / -1;
  padding: 40px;
  max-width: 680px;
}

/* -- The pool ------------------------------------------------------------------------------- */

.pool {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.pool-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--line);
}

.pool-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 30px;
  min-width: 0;
}

.pool-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.pool-search {
  width: 100%;
  height: 32px;
  padding: 0 34px 0 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.pool-search:focus {
  outline: none;
  border-color: var(--accent);
}

.pool-search-wrap kbd {
  position: absolute;
  right: 6px;
  pointer-events: none;
}

.seg--s .seg-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

.pool-count {
  flex: none;
  min-width: 72px;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}

.pool-chips {
  gap: 12px;
}

.pchips {
  display: flex;
  gap: 3px;
  flex: none;
}

.pchip {
  height: 28px;
  min-width: 28px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.pchip:hover {
  color: var(--text);
}

.pchip[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(56, 225, 242, 0.6);
  background: var(--accent-dim);
}

.pchip--cost {
  padding: 0;
  font-family: var(--f-mono);
  font-size: 12px;
}

.pchip--dot {
  padding: 0;
  display: grid;
  place-items: center;
}

.pchip-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pchip--dot[aria-pressed="true"] .pchip-dot {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.pool-class {
  height: 28px;
  padding: 0 6px;
  background: var(--bg);
  color: var(--body);
  border: 1px solid var(--line-2);
  font: inherit;
  font-size: 12.5px;
  max-width: 150px;
}

.pool-clear {
  margin-left: auto;
  min-height: 28px;
  flex: none;
}

.pool-scroll {
  overflow: auto;
  padding: 14px 18px 30px;
  min-height: 0;
}

.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}

.pool-empty {
  padding: 30px 0;
  color: var(--muted);
}

.pool-empty[hidden] {
  display: none;
}

.pt {
  cursor: pointer;
}

.pt[hidden] {
  display: none;
}

.pt.is-full .card {
  opacity: 0.4;
}

.pt.has-n .card {
  box-shadow: 0 0 0 2px rgba(56, 225, 242, 0.65);
}

.pt.is-full .card {
  box-shadow: 0 0 0 1px var(--line-2);
}

.pt-count {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  pointer-events: none;
}

.pt-count:empty {
  display: none;
}

.pt.is-full .pt-count {
  background: var(--muted);
}

/* A card the ranked deck check refuses (the server's `legal: false`): greyed, the reason on hover. */
.pt.is-illegal .card {
  opacity: 0.35;
  filter: grayscale(1);
}

.pt.is-illegal {
  cursor: not-allowed;
}

/* Enlarged on hover, it reads in full (its tag still says it can't go in). */
.pt.is-illegal.peeked .card {
  opacity: 1;
  filter: none;
}

.pt-illegal {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bad);
  background: rgba(11, 13, 16, 0.85);
  border: 1px solid rgba(255, 138, 122, 0.55);
  pointer-events: none;
}

.pt-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: rgba(232, 237, 240, 0.85);
  pointer-events: none;
}

.pt.peeked .pt-count,
.pt.peeked .pt-tag {
  opacity: 0;
}

/* -- The list ------------------------------------------------------------------------------- */

.dlist-rail {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.lhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 6px;
}

.lhead-note {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.lslots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 10px 10px;
}

.lslot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 8px 0 6px;
  border: 1px dashed var(--line-2);
  background: var(--bg);
  outline: none;
}

.lslot.is-filled {
  border-style: solid;
  border-color: var(--line);
  cursor: pointer;
}

.lslot.is-filled:hover,
.lslot.is-filled:focus-visible {
  border-color: var(--line-2);
}

.lslot.is-filled:hover .lslot-x {
  color: var(--bad);
}

.lslot.is-bad {
  border-color: rgba(255, 138, 122, 0.7);
  box-shadow: inset 3px 0 0 var(--bad);
}

.lslot-art {
  position: relative;
  width: 34px;
  aspect-ratio: var(--card-ratio);
  cursor: zoom-in;
}

.lslot-art--empty {
  border: 1px dashed var(--line-2);
}

.lslot-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lslot-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lslot-name--empty {
  color: var(--muted);
  font-weight: 500;
}

.lslot-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.lslot-warn {
  color: var(--bad);
}

.lslot-x {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.lpip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.lcount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lcount-n {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.lcount-n[data-state="short"] {
  color: #f2b544;
}

.lcount-n[data-state="over"] {
  color: var(--bad);
}

.lcount-hint {
  font-size: 12px;
  color: var(--muted);
}

.lscroll {
  overflow: auto;
  min-height: 0;
  padding: 4px 0 20px;
}

.lempty {
  padding: 18px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.lempty[hidden] {
  display: none;
}

.lgroup {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px 4px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lrow {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 8px 0 14px;
  overflow: hidden;
  transition: background var(--t-fast) var(--ease);
}

.lrow:hover {
  background: rgba(255, 255, 255, 0.03);
}

.lrow .pip {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

.lrow-name {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.lrow-name:hover {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 138, 122, 0.7);
}

.lrow-ctl {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lrow-n {
  min-width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.lrow-btn {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.lrow:hover .lrow-btn {
  border-color: var(--line-2);
}

.lrow-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent) !important;
}

.lrow-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.lrow.is-bad {
  background: rgba(255, 138, 122, 0.08);
  box-shadow: inset 3px 0 0 var(--bad);
}

.lrow.is-bad .lrow-name {
  color: var(--bad);
}

.lrow.is-in {
  animation: lrow-in 180ms var(--ease);
}

.lrow.is-out {
  animation: lrow-out 160ms var(--ease) forwards;
  pointer-events: none;
}

.lrow.is-flash {
  animation: lrow-flash 700ms var(--ease);
}

@keyframes lrow-in {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 28px;
    opacity: 1;
  }
}

@keyframes lrow-out {
  from {
    height: 28px;
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@keyframes lrow-flash {
  0% {
    background: rgba(56, 225, 242, 0.22);
  }
  100% {
    background: transparent;
  }
}

/* -- The shape, the check and the note ------------------------------------------------------ */

.dside {
  min-height: 0;
  overflow: auto;
  padding-bottom: 20px;
}

.dblock {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.dblock-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dblock-h--sub {
  margin: 14px 0 8px;
}

.chk {
  height: 176px;
  overflow: auto;
}

.chk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 26px;
}

.chk-tag {
  padding: 4px 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
}

.chk-tag--good {
  color: var(--bg);
  background: var(--good);
  border-color: var(--good);
}

.chk-tag--bad {
  color: var(--bad);
  border-color: rgba(255, 138, 122, 0.6);
}

.chk-tag--quiet {
  color: var(--muted);
}

.chk-sub {
  font-size: 12.5px;
  color: var(--muted);
}

.chk-busy {
  font-size: 10.5px;
  color: var(--muted);
}

.chk-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.chk-item {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--body);
}

.chk-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--bad);
}

.curve-key {
  display: flex;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.ck::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  background: currentColor;
}

.ck.t-unit::before {
  background: var(--accent);
}

.ck.t-gear::before {
  background: #f2b544;
}

.ck.t-program::before {
  background: #b58cff;
}

.curve {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 120px;
}

.cbar {
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr) 16px;
  align-items: end;
  justify-items: center;
}

.cbar-n {
  font-size: 11px;
  color: var(--body);
}

.cbar-stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

.cbar-seg {
  display: block;
  width: 100%;
  transition: height 200ms var(--ease);
}

.cbar-seg.t-unit {
  background: var(--accent);
}

.cbar-seg.t-gear {
  background: #f2b544;
}

.cbar-seg.t-program {
  background: #b58cff;
}

.cbar-x {
  font-size: 10.5px;
  color: var(--muted);
}

.shape-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  min-height: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

.shape-row[hidden] {
  display: none;
}

.shape-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shape-stat b {
  color: var(--text);
}

.shape-none {
  color: var(--muted);
  font-size: 12.5px;
}

.ram-key {
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.ram {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}

.ram-line {
  display: grid;
  grid-template-columns: 10px 56px 44px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.ram-color {
  color: var(--body);
}

.ram-vals {
  color: var(--text);
}

.ram-verdict {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ram-line.is-over .ram-verdict {
  color: var(--bad);
}

.note-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}

.note-k {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.note-diff {
  display: block;
  color: var(--muted);
}

.note-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.note-stats {
  display: flex;
  gap: 18px;
}

.note-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-stat b {
  font-size: 22px;
  color: var(--text);
}

.note-stat.is-few b {
  color: var(--muted);
}

.note-pm {
  font-size: 11px;
  color: var(--muted);
}

.note-cap {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.note-link {
  color: var(--accent);
  white-space: nowrap;
}

.note-make {
  align-self: flex-start;
}

.note-err {
  font-size: 12.5px;
  color: var(--bad);
}

.muted {
  color: var(--muted);
}

/* The setup's saved decks: an illegal one stays in the list, greyed, with a way to fix it. */
.drow.is-off {
  cursor: default;
  opacity: 0.6;
}

.drow-legend--empty {
  border: 1px dashed var(--line-2);
}

.drow-fix {
  color: var(--accent);
  text-decoration: none;
}

.drow-fix:hover {
  text-decoration: underline;
}

.paste-saved {
  font-size: 12.5px;
  color: var(--good);
}

/* Narrower windows: the shape column goes under the list. */
@media (max-width: 1180px) {
  .deckedit {
    --list-w: 300px;
  }
  .de-body {
    grid-template-columns: minmax(0, 1fr) var(--list-w);
    grid-template-rows: minmax(0, 1fr) minmax(0, 42%);
  }
  .pool {
    grid-row: 1 / 3;
  }
  .dlist-rail {
    grid-column: 2;
    grid-row: 1;
  }
  .dside {
    grid-column: 2;
    grid-row: 2;
    border-top: 1px solid var(--line);
  }
  .de-actions .btn {
    padding: 0 10px;
  }
}

/* A short window: the check and the curve give up some height, so the coach note shows sooner. */
@media (max-height: 800px) {
  .chk {
    height: 172px;
  }
  .curve {
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lrow.is-in,
  .lrow.is-out,
  .lrow.is-flash {
    animation: none;
  }
}

/* Another user's deck, read-only (caps.ts `viewAs`): the list and its note, no pool and no way to
   change a card. The read-only line above the head is a row of its own. */
.deckedit.is-viewing {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.deckedit.is-viewing .de-body {
  grid-template-columns: var(--list-w) var(--side-w);
  justify-content: center;
}

.deckedit.is-viewing .lrow-btn,
.deckedit.is-viewing .lslot-x {
  visibility: hidden;
  pointer-events: none;
}

.deckedit.is-viewing .viewing {
  margin: 0;
}

/* ------------------------------------------------------------------------------------------- */
/* Patterns (#/patterns): the strip, the coach's note, the ranked list (each opens in place), the  */
/* strengths; and practising a pattern (#/patterns/<id>/drill), on the review's layout.            */

.patterns {
  --pt-played: var(--bad);
  --pt-gain: var(--good);
}

.patterns .page-head {
  margin-bottom: 20px;
}

/* -- The strip: counts, the per-game line, filters, the backfill ---------------------------- */

.pt-strip {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 18px 12px;
  margin-bottom: 18px;
}

.pt-strip[hidden] {
  display: none;
}

.pt-strip-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
}

.pt-stats {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  min-height: 46px;
}

.pt-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 64px;
}

.pt-stat-l,
.pt-filter-l {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pt-stat-v {
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}

.pt-spark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pt-spark svg {
  display: block;
  overflow: visible;
}

.pt-spark-mid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-dasharray: 2 3;
}

.pt-spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.pt-spark-dot {
  fill: var(--accent);
}

.pt-filters {
  display: flex;
  align-items: flex-end;
  gap: 14px 18px;
  flex-wrap: wrap;
}

.pt-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pt-filter-one {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  color: var(--body);
}

.pt-seg .seg-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

.pt-select {
  min-height: 32px;
  max-width: 230px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--body);
  font: inherit;
  font-size: 12.5px;
}

.pt-backfill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 22px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--body);
}

.pt-bf-bar {
  position: relative;
  flex: none;
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
}

.pt-bf-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width 600ms var(--ease);
}

.pt-backfill.is-done .pt-bf-fill {
  background: var(--good);
}

.pt-bf-words {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.pt-bf-pause {
  color: #f2b544;
}

/* -- The coach's note ---------------------------------------------------------------------- */

.pt-note {
  position: relative;
  min-height: 132px;
  padding: 16px 22px 18px 24px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.pt-note::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  background: var(--accent);
}

.pt-note[data-tone="leaks"]::before {
  background: var(--bad);
}

.pt-note[data-tone="good"]::before {
  background: var(--good);
}

.pt-note-label {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.pt-note-title {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.pt-note-title.is-loading {
  color: var(--muted);
}

.pt-note-body {
  max-width: 880px;
  margin: 0;
  font-size: 15px;
  color: var(--body);
}

.pt-note-leaks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pt-leak {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 138, 122, 0.4);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}

.pt-note:not([data-tone="leaks"]) .pt-leak {
  border-color: var(--line-2);
}

.pt-leak:hover {
  border-color: var(--accent);
}

.pt-leak-n {
  font-size: 11px;
  color: var(--muted);
}

.pt-leak-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pt-leak-t {
  font-size: 14px;
  font-weight: 600;
}

.pt-leak-d {
  font-size: 11px;
  color: var(--muted);
}

.pt-note-play {
  margin-top: 14px;
}

/* -- The list ------------------------------------------------------------------------------ */

.pt-list-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  margin-bottom: 10px;
}

.pt-list-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.pt-list-title,
.pt-sec-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pt-list-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.pt-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
}

.pt-key-i {
  display: inline-block;
  width: 18px;
  height: 6px;
  margin-left: 8px;
}

.pt-key-i--played {
  background: var(--pt-played);
}

.pt-key-i--gap {
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 5px);
}

.pt-update {
  flex: none;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.pt-update-btn {
  color: var(--accent);
}

.pt-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pt-row {
  border: 1px solid var(--line);
  background: var(--panel);
}

.pt-row.is-open {
  border-color: var(--line-2);
}

.pt-head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 140px 280px 92px 128px 72px 14px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 10px 16px 10px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pt-head:hover {
  background: rgba(255, 255, 255, 0.025);
}

.pt-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pt-place {
  align-self: start;
  padding-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.pt-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pt-title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 0;
}

.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--body);
  white-space: nowrap;
}

.pt-chip--card {
  padding-left: 2px;
}

.pt-chip-n {
  font-size: 10px;
  color: var(--muted);
}

.pt-thumb {
  display: inline-block;
  width: 16px;
  flex: none;
}

.pt-thumb .card {
  width: 16px;
}

.pt-often {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pt-often-n {
  font-size: 12.5px;
  color: var(--text);
}

.pt-often-w {
  font-size: 12px;
  color: var(--muted);
}

/* The cost: one visual, two treatments. Played out: a solid bar on a ±20-point scale from the
   middle (right: the coach's pick did better; left: yours), with its ±2 SE band. Not yet: the
   coach's confidence gap, dashed and muted, on its own 0-100 scale, and said to be that. */
.pt-cost {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pt-cost-t {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-cost-s {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-cost.is-gap .pt-cost-t {
  color: var(--muted);
  font-style: italic;
}

.pt-costbar,
.pt-gapbar {
  position: relative;
  display: block;
  height: 8px;
  margin-top: 3px;
}

.pt-costbar {
  background: rgba(255, 255, 255, 0.045);
}

.pt-costbar-zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.pt-costbar-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.09);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.pt-costbar-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--pt-played);
}

.pt-cost.is-gain .pt-costbar-fill {
  background: var(--pt-gain);
}

.pt-cost.is-even .pt-costbar-fill {
  background: var(--muted);
}

.pt-costbar-clip {
  position: absolute;
  right: -1px;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--pt-played);
}

.pt-gapbar {
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

.pt-gapbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 5px);
}

.pt-pergame {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.pt-pergame-v {
  font-size: 15px;
  color: var(--text);
}

.pt-pergame-u {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pt-pergame.is-gain .pt-pergame-v {
  color: var(--good);
}

.pt-pergame.is-est .pt-pergame-v {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.pt-verdict {
  justify-self: start;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.pt-verdict--bad {
  color: var(--bad);
  border-color: rgba(255, 138, 122, 0.55);
}

.pt-verdict--warn {
  color: #f2b544;
  border-color: rgba(242, 181, 68, 0.45);
}

.pt-verdict--ok {
  color: var(--body);
  border-color: rgba(255, 255, 255, 0.28);
}

.pt-verdict--good {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.55);
}

.pt-verdict--muted {
  border-style: dashed;
}

.pt-trend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pt-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}

.pt-trend-b {
  flex: 1;
  max-width: 7px;
  background: rgba(255, 255, 255, 0.35);
}

.pt-trend-b.is-zero {
  background: rgba(255, 255, 255, 0.1);
}

.pt-trend-w {
  min-height: 13px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-trend-w.is-rarer {
  color: var(--good);
}

.pt-trend-w.is-more {
  color: #f2b544;
}

.pt-chev {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-fast) var(--ease);
}

.pt-row.is-open .pt-chev {
  transform: rotate(-135deg) translate(-2px, -1px);
}

.pt-empty {
  padding: 22px 22px 24px;
  border: 1px dashed var(--line-2);
}

.pt-empty-t {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.pt-empty-b {
  margin: 0;
  color: var(--body);
}

/* -- A pattern, open ----------------------------------------------------------------------- */

.pt-open {
  padding: 14px 16px 18px 54px;
  border-top: 1px solid var(--line);
}

.pt-open[hidden] {
  display: none;
}

.pt-open-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pt-scope-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pt-scope {
  display: contents;
}

.pt-scope .seg-btn {
  min-height: 30px;
  font-size: 12.5px;
}

.pt-open-acts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pt-tally {
  font-size: 11px;
  color: var(--muted);
}

.pt-sub {
  margin: 16px 0 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pt-ex-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
  gap: 10px;
}

.pt-ex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.pt-ex-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 10.5px;
  color: var(--muted);
}

.pt-ex-head > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-ex-link,
.pt-dec-link {
  flex: none;
  color: var(--accent);
  text-decoration: none;
}

.pt-ex-link:hover,
.pt-dec-link:hover {
  text-decoration: underline;
}

.pt-ex-moves {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pt-ex-move {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: start;
}

.pt-ex-who {
  padding-top: 2px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pt-ex-move.is-you .pt-ex-who {
  color: var(--accent);
}

.pt-ex-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pt-ex-words {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-ex-why {
  min-height: 16px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-ex-p {
  padding-top: 2px;
  font-size: 12px;
  text-align: right;
  color: var(--body);
}

.pt-ex-cost {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.pt-ex-bars {
  min-height: 104px;
}

.pt-ex-bars:not(.is-on) {
  display: none;
}

.pt-ex-bars .po-words {
  margin-bottom: 4px;
}

.pt-ex-bars .bar-track {
  height: 10px;
}

.pt-all-load {
  font-size: 11px;
  color: var(--muted);
}

.pt-dec {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.pt-dec-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 140px 230px 64px;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.pt-dec-turn,
.pt-dec-conf,
.pt-dec-cost,
.pt-dec-link {
  font-size: 11px;
}

.pt-dec-turn {
  color: var(--muted);
}

.pt-dec-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-dec-coach {
  color: var(--muted);
}

.pt-dec-conf {
  color: var(--body);
}

.pt-dec-cost {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-dec-cost.is-none {
  color: var(--muted);
  font-style: italic;
}

/* -- Strengths and the foot ------------------------------------------------------------------ */

.pt-strengths {
  margin-top: 34px;
}

.pt-strengths[hidden] {
  display: none;
}

.pt-str {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 6px 18px;
}

.pt-str-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--body);
}

.pt-str-mark {
  color: var(--good);
}

.pt-str-n,
.pt-str-g {
  font-size: 11px;
  color: var(--muted);
}

.pt-str-n {
  color: var(--good);
}

.pt-str-none {
  margin-top: 8px;
  font-size: 13.5px;
}

.pt-foot {
  max-width: 880px;
  margin: 30px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* -- Narrower windows ------------------------------------------------------------------------ */

@media (max-width: 1340px) {
  .pt-head {
    grid-template-columns: 24px minmax(0, 1fr) 116px 266px 76px 118px 60px 12px;
    gap: 12px;
  }
  .pt-cost-t {
    font-size: 12.5px;
  }
}

@media (max-width: 1060px) {
  .pt-head {
    grid-template-columns: 22px minmax(0, 1fr) 210px 112px 12px;
    grid-template-areas:
      "place main cost verdict chev"
      "place often pergame trend chev";
    row-gap: 6px;
  }
  .pt-place {
    grid-area: place;
  }
  .pt-main {
    grid-area: main;
  }
  .pt-often {
    grid-area: often;
    flex-direction: row;
    gap: 10px;
  }
  .pt-cost {
    grid-area: cost;
  }
  .pt-pergame {
    grid-area: pergame;
    text-align: left;
  }
  .pt-verdict {
    grid-area: verdict;
  }
  .pt-trend {
    grid-area: trend;
  }
  .pt-chev {
    grid-area: chev;
  }
  .pt-open {
    padding-left: 16px;
  }
  .pt-dec-row {
    grid-template-columns: 36px minmax(0, 1fr) 130px 64px;
  }
  .pt-dec-cost {
    display: none;
  }
}

@media (max-width: 640px) {
  .pt-stats {
    flex-wrap: wrap;
    gap: 14px 20px;
  }
  .pt-head {
    grid-template-columns: 20px minmax(0, 1fr) 12px;
    grid-template-areas:
      "place main chev"
      "place cost chev"
      "place verdict chev"
      "place often chev";
  }
  .pt-pergame,
  .pt-trend {
    display: none;
  }
  .pt-note-title {
    font-size: 23px;
  }
  .pt-ex-list {
    grid-template-columns: 1fr;
  }
}

/* -- Entry points: the match's end panel, the review's header -------------------------------- */

.end-more:has(.end-patterns) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.end-patterns {
  color: var(--accent);
  text-decoration: none;
}

.mh-patterns {
  display: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.has-patterns .mh-patterns {
  display: inline;
}

.mh-patterns:hover {
  color: var(--accent);
}

/* -- Practise a pattern (the review's layout) ------------------------------------------------ */

.dr-aside {
  overflow: hidden;
}

/* The reveal's ranking keeps the player's row in view and says what they played in the game, in
   up to two lines: a little more room than the review's, the same in every state. */
.drill-pat .rv-panel .rank {
  height: 320px;
}

.drill-pat .rv-panel .rank-body {
  flex: none;
}

/* The drill's strip says more (the coach's pick, what was played in the game) in a narrower column
   than the match's: an unused secondary button gives its room to the words, and the primary is
   narrower (its full label is its title). */
.drill-pat .strip-sec.is-off {
  display: none;
}

.drill-pat .strip-pri {
  width: 240px;
}

.drill-pat .rv-how {
  margin-top: 6px;
}

.dr-review {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.dr-review:hover {
  text-decoration: underline;
}

.dr-review.is-off {
  visibility: hidden;
}

.dr-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.dr-back {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
}

.dr-back:hover {
  color: var(--accent);
}

.dr-eyebrow {
  margin: 6px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.dr-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.dr-meta {
  display: flex;
  gap: 8px;
}

.dr-cost {
  margin: 0;
  font-size: 12.5px;
  color: var(--body);
}

.dr-cost.is-gap {
  color: var(--muted);
  font-style: italic;
}

.dr-tally {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.dr-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.dr-pos {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 4px 16px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--body);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.dr-pos:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dr-pos.is-cur {
  border-left-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}

.dr-pos-n {
  font-size: 11px;
  color: var(--muted);
}

.dr-pos-m {
  font-size: 13px;
}

.dr-pos.is-matched .dr-pos-m {
  color: var(--good);
}

.dr-pos.is-differed .dr-pos-m {
  color: var(--bad);
}

/* ------------------------------------------------------------------------------------------- */
/* Watch (#/watch/<id>): the AI playing itself, replayed on the review's layout.                  */

/* Both hands open: the rival's hand as real cards above the table. */
.ofan-row.is-open {
  height: 92px;
  align-items: center;
}

.ofan-row.is-open .ofan {
  display: none;
}

.ofan-row.is-open .ofan-known {
  gap: 6px;
  margin-top: 0;
}

.ofan-row.is-open .ofan-known .cs {
  width: 60px;
}

.ofan-row.is-open .ofan-n {
  margin-left: 4px;
  margin-top: 0;
  align-self: center;
}

.watch {
  --rv-tl: 300px;
  --rv-side: 360px;
}

@media (max-width: 1340px) {
  .watch {
    --rv-tl: 260px;
    --rv-side: 320px;
  }
}

/* The header: both decks (Legend arts, title over its net and pilot), and the turn. */
.wh-decks {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}

.wh-side {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.wh-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.wh-tags {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.watch .mh-turn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 0;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.wt-where-gigs {
  font-size: 10px;
  color: var(--muted);
}

/* A short screen: the ranking's reserved height gives the played-out verdict room. */
@media (max-height: 800px) {
  .watch .rv-panel .rank {
    height: 318px;
  }

  .watch .rv-panel .rrows,
  .watch .rv-panel .rrows.is-expanded {
    max-height: 206px;
  }
}

.wh-arts {
  display: flex;
  gap: 2px;
  flex: none;
}

.wh-art {
  width: 20px;
}

.wh-letter {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
}

.wh-side--b .wh-letter {
  background: var(--rival);
}

.wh-title {
  min-width: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  text-decoration: none;
}

.wh-tag {
  flex: none;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Whose eyes and where play stops, at the top of the left column. */
.wt-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
}

.wt-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.wt-label {
  flex: 1 0 100%;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.wt-group .seg-btn {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.wt-swap {
  font-size: 11px;
}

.wt-view-line {
  margin: 0;
  min-height: 2.7em;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.watch .wt-sum-title {
  font-size: 20px;
}

.watch .rv-tbtn {
  width: 31px;
}

/* Each side keeps its colour everywhere: A the accent, B the rival's. */
.wl-a {
  color: var(--accent);
}

.wl-b {
  color: var(--rival);
}

a.wh-title:hover {
  color: var(--accent);
}

/* The log (the left column): both sides' moves by turn, filling as the game plays. */
.watch .tl-group[hidden],
.watch .tl-row[hidden] {
  display: none;
}

/* Another side's move in a seat's eyes, until that seat's own view of it is here. */
.wl-row.is-pending .tl-text {
  color: var(--muted);
}

.wl-row.is-a .tl-who {
  color: var(--accent);
}

.wl-row.is-b .tl-who {
  color: var(--rival);
}

/* The scrubber's marks: a choice that wasn't the side's top one, in its colour. */
.watch .rv-mark.wt-mark--a {
  background: var(--accent);
}

.watch .rv-mark.wt-mark--b {
  background: var(--rival);
}

/* The rail: another side's choice in a seat's eyes. */
.wr-hidden .we-acts {
  margin-top: 10px;
  align-items: center;
}

.we-title--a {
  color: var(--accent);
}

.we-title--b {
  color: var(--rival);
}

/* The rail: the acting side's choice; its ranking scrolls inside its reserved height. */
.watch .rv-panel .rank {
  height: 360px;
}

.watch .rv-panel .rrows {
  max-height: 240px;
  overflow-y: auto;
}

.watch .rv-panel .rrows.is-expanded {
  max-height: 240px;
}

/* The end, in the rail's place: nothing to play out there, so it takes the rail's height. */
.watch .rv-panel.is-end .rank {
  height: auto;
  flex: 1 1 auto;
  overflow-y: auto;
}

.watch .rv-panel.is-end .po {
  display: none;
}

.wh-side .wh-letter {
  position: relative;
}

/* The side at the bottom of the board: a small mark under its letter. */
.wh-side.is-bottom .wh-letter::after {
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  font-size: 7px;
  line-height: 1;
  color: var(--body);
}

/* The end, in the rail's place. */
.we {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.we-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.we-why {
  margin: 0;
  font-size: 13px;
  color: var(--body);
}

.we-rates {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
}

.we-rates dt {
  color: var(--muted);
}

.we-rates dd {
  margin: 0;
}

.we-gigs svg {
  display: block;
  overflow: visible;
}

.we-gigs .g-a {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}

.we-gigs .g-b {
  fill: none;
  stroke: var(--rival);
  stroke-width: 1.6;
}

.we-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.we-more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* ------------------------------------------------------------------------------------------- */
/* Ways between sections that live inside pages: the Review section's two tabs (Your games,
   Patterns) in place of the page's eyebrow, and the quiet "Watch it play" links. */

/* The tabs take the eyebrow's place and keep their size whether or not Patterns shows (it shows
   on a server with patterns, once the probe answers), so nothing under them moves. */
.rtabs {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  min-height: 24px;
  margin-bottom: 2px;
}

.rtab {
  position: relative;
  padding: 2px 0 5px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.rtab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}

.rtab:hover {
  color: var(--text);
}

.rtab:hover::after {
  background: var(--line-2);
}

.rtab[aria-current="page"] {
  color: var(--accent);
}

.rtab[aria-current="page"]::after {
  background: var(--accent);
}

.rtab--patterns {
  visibility: hidden;
}

.has-patterns .rtab--patterns,
.rtab--patterns[aria-current="page"] {
  visibility: visible;
}

/* "Watch it play": there only on a server that serves watched games. */
.watch-link {
  display: none;
}

.has-watch .watch-link {
  display: inline-flex;
  align-items: center;
}

/* The deck editor's head has room for Watch it play from 1200 up; narrower, the deck's title
   needs it (My decks keeps the way in at every width). */
@media (max-width: 1199px) {
  .has-watch .de-actions .watch-link {
    display: none;
  }
}

/* A guide's open matchup row: watch it (quiet), then play it. */
.gd-mplay {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ------------------------------------------------------------------------------------------- */
/* Accounts and public mode: the quiet note (refusals, quotas), the signed-out page, the first     */
/* run, the offer to move this browser's data, who's signed in, and viewing another user's data.  */

/* The quiet note: a line in place, never an error screen. */
.quiet-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 9px 12px;
  border-left: 2px solid var(--line-2);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}

.quiet-note-mark {
  flex: none;
  width: 7px;
  height: 7px;
  align-self: center;
  background: var(--muted);
  clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 2px, 100% 100%, 2px 100%, 0 calc(100% - 2px));
}

.quiet-note--quota .quiet-note-mark,
.quiet-note--busy .quiet-note-mark,
.quiet-note--queued .quiet-note-mark {
  background: #f2b544;
}

.quiet-note-title {
  font-weight: 600;
  color: var(--text);
}

.quiet-note-text {
  flex: 1 1 260px;
  min-width: 0;
}

.quiet-note-acts {
  display: flex;
  gap: 10px;
}

/* Signed out: one calm page. */
.signed-out {
  max-width: 560px;
  padding-top: clamp(48px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.so-mark {
  width: 28px;
  height: 28px;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.so-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.so-lede {
  margin: 0 0 8px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}

.so-words {
  margin: 0;
  color: #f2b544;
}

.so-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.so-form[hidden],
.so-open[hidden],
.so-first[hidden] {
  display: none;
}

.so-first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Sign in with Discord: the brand's blurple, with its mark as a plain shape. */
.so-discord {
  --edge: #5865f2;
  --fill: #5865f2;
  color: #fff;
  gap: 10px;
  text-decoration: none;
}

.so-discord:hover {
  --fill: #4752c4;
  --edge: #4752c4;
}

.so-discord-mark {
  width: 18px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(14% 0, 36% 8%, 64% 8%, 86% 0, 100% 52%, 92% 100%, 70% 86%, 30% 86%, 8% 100%, 0 52%);
}

.so-discord-row {
  margin-bottom: 4px;
}

.so-explain,
.so-operator {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.so-operator {
  color: var(--muted);
  font-size: 12.5px;
}

.so-row {
  display: flex;
  gap: 8px;
}

.so-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.so-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.so-note {
  width: 100%;
}

/* The first run: two steps. */
.first-run .page-head {
  margin-bottom: 18px;
}

.fr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fr-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease);
}

.fr-step.is-on,
.fr-step.is-done {
  opacity: 1;
}

.fr-step.is-on {
  border-color: var(--line-2);
}

.fr-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 700;
}

.fr-step.is-on .fr-num {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.fr-step.is-done .fr-num {
  color: var(--good);
  border-color: var(--good);
}

.fr-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fr-h {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fr-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.fr-tabs {
  align-self: flex-start;
}

.fr-step.is-done .fr-tabs,
.fr-step.is-done .fr-pane {
  display: none;
}

.fr-text {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 12.5px;
  resize: vertical;
}

.fr-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.fr-field {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}

.fr-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fr-field-row:hover,
.fr-field-row:focus-visible {
  border-color: var(--accent);
}

.fr-field-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-field-share {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
}

.fr-arts {
  display: flex;
  gap: 3px;
  flex: none;
}

.fr-art {
  width: 34px;
}

.fr-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fr-chosen[hidden] {
  display: none;
}

.fr-chosen .fr-art {
  width: 46px;
}

.fr-chosen-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fr-chosen-sub {
  font-size: 12px;
  color: var(--good);
}

.fr-go {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fr-operator {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.fr-foot {
  max-width: 820px;
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* The offer to move this browser's data into the account. */
.mig {
  max-width: 1480px;
  margin: 12px auto 0;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13.5px;
  color: var(--body);
}

.mig-text {
  flex: 1 1 320px;
}

.mig-acts {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.is-board .mig {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(760px, calc(100vw - 32px));
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Who's signed in. */
.acct {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.acct-name {
  max-width: 16ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body);
}

.acct-out {
  font-size: 12px;
}

.acct-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.acct-sync {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.acct-sync.is-retrying {
  color: #f2b544;
}

/* Viewing another user's data, read-only. */
.viewing {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border: 1px solid rgba(242, 181, 68, 0.45);
  background: rgba(242, 181, 68, 0.08);
  font-size: 13px;
  color: var(--text);
}

.viewing-text {
  flex: 1;
  font-weight: 600;
}

/* Their name where "You" stands on your own pages (voice.ts): a column a little wider than "You"
   needs, and a long name cut with an ellipsis (the whole of it in the label's title). */
.is-viewing .review:not(.watch) .tl-row {
  grid-template-columns: 64px minmax(0, 1fr);
}

.is-viewing .pt-ex-move {
  grid-template-columns: 64px minmax(0, 1fr) 40px;
}

.is-viewing .review:not(.watch) .tl-who,
.is-viewing .pt-ex-who,
.is-viewing .toast-who,
.is-viewing .you {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.is-viewing .toast-who,
.is-viewing .you {
  max-width: 10em;
}

/* ------------------------------------------------------------------------------------------- */
/* The admin panel (#/admin, the owner's): users, invites, settings and usage, under tabs in the  */
/* page head. Tables of quiet rows like the review list's; numbers in the mono face.               */

.admin .page-head {
  margin-bottom: 22px;
}

.adm-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  padding: 8px 0;
}

.adm-skeleton .sk-line {
  height: 18px;
}

.adm-h2 {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.adm-h3 {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.adm-p {
  margin: 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}

.adm-empty {
  margin: 0;
  padding: 18px 0;
  font-size: 14px;
  color: var(--muted);
}

.adm-summary {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--muted);
}

.adm-summary b {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.adm-dot {
  margin: 0 10px;
  color: var(--line-2);
}

.adm-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

/* Feedback after an action: a line, with a mark for its tone. */
.adm-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.adm-status-mark {
  flex: none;
  width: 7px;
  height: 7px;
  align-self: center;
  clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 2px, 100% 100%, 2px 100%, 0 calc(100% - 2px));
}

.adm-status--good {
  color: var(--text);
}

.adm-status--good .adm-status-mark {
  background: var(--good);
}

.adm-status--bad {
  color: var(--bad);
}

.adm-status--bad .adm-status-mark {
  background: var(--bad);
}

/* Quiet actions in a row; a disabled one says why in its title. */
.adm-act:disabled,
.adm-act[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  text-decoration: none;
}

.adm-act:disabled:hover {
  color: var(--muted);
}

.link--danger.adm-act:disabled:hover {
  color: var(--bad);
}

/* A destructive confirm: the button's edge in the warning red. */
.adm-danger {
  --edge: rgba(255, 138, 122, 0.6);
  color: var(--bad);
}

/* The fill is drawn over the edge, so it stays opaque: a see-through one let the red edge flood
   the button and hide its red words on hover. */
.adm-danger:hover {
  --edge: var(--bad);
  --fill: #231a1b;
  --fill: color-mix(in srgb, var(--bad) 10%, var(--bg));
}

.admin .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.adm-tag {
  display: inline-block;
  padding: 3px 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--body);
  border: 1px solid var(--line-2);
}

.adm-tag--warn {
  color: #f2b544;
  border-color: rgba(242, 181, 68, 0.45);
}

.adm-tag--good {
  color: var(--good);
  border-color: rgba(61, 190, 110, 0.45);
}

/* Inputs */
.adm-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.adm-input--num {
  width: 92px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.adm-input:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}

.adm-input:focus-visible,
.adm-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.adm-input[hidden],
.adm-unit[hidden] {
  display: none;
}

.adm-select {
  height: 34px;
  max-width: 260px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--body);
  font: inherit;
  font-size: 13px;
}

.adm-unit {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* Tables */
.adm-scroll {
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--body);
}

.adm-table th,
.adm-table td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

.adm-table thead th {
  padding-top: 0;
  padding-bottom: 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.adm-table tbody th {
  font-weight: 500;
  color: var(--text);
}

.adm-table .adm-num {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.adm-table thead .adm-num {
  font-size: 10px;
  color: var(--muted);
}

.adm-table .adm-num.is-zero {
  color: rgba(154, 166, 173, 0.45);
}

.adm-table tfoot th,
.adm-table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--line-2);
  font-weight: 600;
  color: var(--text);
}

.adm-table--compact th,
.adm-table--compact td {
  padding: 7px 10px;
}

.adm-table--compact thead th {
  padding-top: 0;
  padding-bottom: 7px;
}

.adm-day {
  white-space: nowrap;
}

/* The group label over today's numbers. */
.adm-group th {
  padding: 0 12px 4px;
  border-bottom: 0;
}

.adm-group .adm-group-label {
  text-align: center;
  font-size: 9.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 5px;
}

/* ---- Users ---- */
.au-table tbody tr.au-row {
  transition: background var(--t-fast) var(--ease);
}

.au-table tbody tr.au-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.au-row.is-open {
  background: rgba(255, 255, 255, 0.025);
}

.au-row.is-open td {
  border-bottom-color: transparent;
}

.au-person {
  min-width: 220px;
  padding-left: 4px !important;
}

.au-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.au-toggle:focus-visible {
  outline-offset: 2px;
}

.au-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.au-avatar--none {
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--body);
  clip-path: var(--chamfer-s);
}

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

.au-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}

.au-toggle:hover .au-name {
  color: var(--accent);
}

.au-sub {
  display: flex;
  gap: 8px;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.au-discord {
  color: #a5adf8;
}

.au-chev {
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--t-fast) var(--ease);
}

.au-toggle[aria-expanded="true"] .au-chev {
  transform: rotate(45deg);
}

.au-account {
  white-space: nowrap;
}

.au-account .adm-tag {
  margin-left: 8px;
  vertical-align: 1px;
}

.au-role {
  font-size: 13px;
  color: var(--body);
}

.au-row.is-suspended .au-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(242, 181, 68, 0.55);
}

.au-when {
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--muted);
}

.au-acts {
  white-space: nowrap;
  text-align: right !important;
}

.au-acts .adm-act + .adm-act {
  margin-left: 16px;
}

.au-you {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The suspend confirm, under its row. */
.au-confirm td,
.au-note td {
  padding: 0 12px 12px;
}

.au-confirm-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 122, 0.35);
  background: rgba(255, 138, 122, 0.06);
}

.au-confirm-text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.au-confirm-text b {
  color: var(--text);
}

.au-confirm-acts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.au-note td {
  padding-top: 2px;
}

/* A user's details, under their row. */
.au-more > td {
  padding: 4px 12px 22px !important;
  background: rgba(255, 255, 255, 0.025);
}

.au-more-in {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 22px 40px;
  padding: 14px 4px 0 46px;
}

.au-more-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.au-more-in > .adm-skeleton,
.au-more-in > .quiet-note,
.au-more-in > .au-note-in {
  grid-column: 1 / -1;
}

.au-note-in {
  margin-bottom: -8px;
}

.au-have {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.au-have-item dt {
  font-size: 12px;
  color: var(--muted);
}

.au-have-item dd {
  margin: 2px 0 0;
  font-size: 13px;
}

.au-have-item b {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.au-flags {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.au-flag {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.au-flag dt {
  color: var(--body);
}

.au-flag dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.au-flag.is-own dd {
  color: var(--accent);
}

.au-flag-acts {
  margin-top: 14px;
}

.au-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.au-edit-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.au-edit-row label {
  color: var(--body);
}

.au-edit-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.au-edit-ctl .adm-select {
  width: 230px;
}

.au-edit-ctl .adm-input--num {
  width: 80px;
}

.au-edit-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}

.au-edit-status:empty {
  display: none;
}

.au-days {
  min-width: 0;
}

/* ---- Invites ---- */
.ai {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
}

.ai-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ai-new,
.ai-made {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.ai-made {
  border-color: rgba(56, 225, 242, 0.4);
}

.ai-new .adm-h2,
.ai-made .adm-h2 {
  margin-bottom: 0;
}

.ai-fields {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.ai-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-field label {
  font-size: 12px;
  color: var(--muted);
}

.ai-field--go {
  margin-left: auto;
}

.ai-status:empty {
  display: none;
}

.ai-made-row {
  display: flex;
  gap: 8px;
}

.ai-link {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--accent);
}

.ai-copied {
  min-height: 1.2em;
  font-size: 12.5px;
  color: var(--good);
}

.ai-copied:empty {
  display: none;
}

.ai-signups:not(:empty) {
  margin-bottom: 18px;
}

.ai-table tr.is-new td {
  background: rgba(56, 225, 242, 0.05);
}

.ai-id {
  font-size: 12px;
  white-space: nowrap;
}

.ai-id .adm-tag {
  margin-left: 10px;
}

.ai-foot {
  margin-top: 12px;
}

/* Short cells stay on one line (who joined may wrap). */
.ai-table th,
.ai-table td {
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

.ai-table td.ai-used {
  white-space: normal;
}

/* A used-up invite: kept for who joined with it, quieter than the open ones. */
.ai-table tr.is-used td {
  color: var(--muted);
}

.ai-id .adm-tag + .adm-tag {
  margin-left: 6px;
}

.ai-used {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.5;
}

/* Who joined: their names as written, each opening their details. */
.ai-who-name {
  white-space: nowrap;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

.ai-who-name:hover,
.ai-who-name:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.ai-list-slot > .adm-status {
  margin-bottom: 12px;
}

/* A user's signing in: their Discord, a fresh link, signing out everywhere. */
.au-access-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.au-access .au-discord {
  font-size: 12px;
}

.au-link-made,
.au-out-confirm {
  margin-top: 14px;
}

.au-link-made {
  padding: 14px 16px 16px;
}

/* ---- Settings ---- */
.as-wrap {
  display: grid;
  grid-template-columns: minmax(0, 880px) minmax(240px, 340px);
  gap: 32px 48px;
  align-items: start;
}

.as {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

.as-block {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.as-block > legend {
  float: left;
  width: 100%;
}

fieldset.as-block > legend + * {
  clear: both;
}

.as-seg {
  margin-bottom: 10px;
}

.as-seg .seg-btn {
  min-height: 34px;
  padding: 0 16px;
}

.seg-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.seg-btn:disabled:hover {
  background: none;
  color: var(--muted);
}

.seg-btn[aria-pressed="true"]:disabled:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.as-signup-words {
  min-height: 1.5em;
}

.as-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 12px;
}

.as-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.as-what {
  min-width: 0;
}

.as-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.as-help {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.as-ctl {
  display: flex;
  justify-content: flex-start;
}

.as-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

.as-none {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
}

.as-none-box {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.as-rate-block > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.as-rate-block > summary::-webkit-details-marker {
  display: none;
}

.as-rate-block > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--t-fast) var(--ease);
}

.as-rate-block[open] > summary::before {
  transform: rotate(45deg);
}

.as-rate-block > .adm-p {
  margin-bottom: 12px;
}

.as-rates .adm-input--num {
  width: 84px;
  height: 30px;
  text-align: right;
}

.as-rates tbody th {
  min-width: 220px;
}

.as-rate-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.as-rate-words {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

/* The save bar: always in view at the bottom of the window, so what's unsaved (and the answer to a
   save) is never scrolled away. */
.as-save {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: -6px;
  padding: 12px 0 14px;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -12px 18px -10px rgba(0, 0, 0, 0.6);
}

.as-save-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.as-status {
  flex: 1 1 260px;
  min-width: 0;
}

.as-own {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.as-own .adm-h2 {
  font-size: 16px;
}

.as-own-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.as-own-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.as-own-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.as-own-what {
  grid-column: 1;
  font-size: 12px;
  color: var(--muted);
}

.as-own-list .link {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* ---- Usage ---- */
.uu-block {
  margin-top: 26px;
}

.uu-name {
  color: var(--text);
}

a.uu-name:hover {
  color: var(--accent);
}

.uu-days tr.is-quiet th {
  color: var(--muted);
  font-weight: 400;
}

.uu-queue {
  margin-top: -4px;
}

/* ---- Queue (the home worker's play-outs) ---- */
.aq-when {
  font-size: 11px;
  color: var(--muted);
}

.aq-when.is-bad {
  color: var(--bad);
}

.aq-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aq-sum {
  margin: 0;
}

.aq-worker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--body);
}

.aq-worker-text.is-bad {
  color: var(--bad);
}

.aq-block {
  margin-top: 26px;
}

.aq-block .adm-h2 {
  margin-bottom: 10px;
}

.aq-jobs td,
.aq-workers td {
  vertical-align: top;
}

.aq-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.aq-users,
.aq-pos {
  white-space: nowrap;
}

.aq-pos {
  font-size: 12px;
}

.aq-build,
.aq-nets {
  font-size: 12px;
}

.aq-nets {
  max-width: 34ch;
}

.aq-err {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.aq-err.is-bad {
  color: var(--bad);
}

.aq-tag--done {
  color: var(--muted);
}

.aq-job.is-done td,
.aq-job.is-failed td {
  color: var(--muted);
}

.aq-foot {
  margin-top: 10px;
}

.aq-empty {
  padding: 10px 0;
}

/* Narrower windows: the two-column pages stack. */
@media (max-width: 1100px) {
  .ai,
  .as-wrap,
  .au-more-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .au-more-in {
    padding-left: 4px;
  }
}

@media (max-width: 640px) {
  .as-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Mulligan trainer: your own decks on instant hands (views/decks.ts).                           */

.own-wrap {
  margin-top: 8px;
}

.decks-body + .own-wrap {
  margin-top: 44px;
}

.own-head {
  margin-bottom: 18px;
}

.own-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.own-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--body);
}

.own-budget {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The card isn't a link (it holds a button): the whole card still starts it. */
.own-deck {
  cursor: pointer;
}

.own-deck.is-unavailable {
  cursor: default;
}

.own-deck.is-unavailable .deck-legends,
.own-deck.is-unavailable .deck-title {
  opacity: 0.55;
}

.own-deck.is-unavailable:hover {
  --edge: var(--line-2);
}

/* The status line keeps two lines' height whatever it says: nothing moves as hands are made. */
.own-status {
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}

.own-status .quiet-note {
  margin: 0;
}

.own-why {
  color: var(--muted);
}

.own-making {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--body);
}

.own-spin {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border: 1.5px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: own-spin 1.1s linear infinite;
}

@keyframes own-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .own-spin {
    animation: none;
  }
}

.own-ready {
  color: var(--good);
}

.own-deck.is-making {
  --edge: var(--line-2);
}

.own-deck.is-ready {
  --edge: var(--accent);
}

.own-deck.is-ready .own-go {
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(56, 225, 242, 0.25);
}

.own-go[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* The drill while a list's hands are made. */
.drill-making {
  padding: 40px 0;
}