.pt.src, .board-bar.src, .board-off.src,
.pt.dst, .board-bar.dst, .board-off.dst,
.pt.sel, .board-bar.sel, .board-off.sel {
  border-radius: 6px;
  cursor: pointer;
  outline-offset: -2px;
}
.pt.src, .board-bar.src, .board-off.src {
  outline: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}

.pt.dst, .board-bar.dst, .board-off.dst {
  outline: 2px solid color-mix(in oklab, var(--ok) 70%, transparent);
  background: color-mix(in oklab, var(--ok) 22%, transparent);
}
.board-off.dst { outline: 2px dashed var(--ok); }
.pt.sel, .board-bar.sel, .board-off.sel {
  outline: 3px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

.pt.dst .ck-stack::after, .board-bar.dst .ck-stack::after {
  content: ""; display: block; flex: none;
  inline-size: var(--ck-size); aspect-ratio: 1; border-radius: 50%;
  border: max(1px, calc(var(--ck-size) * .08)) dashed var(--ok);
  background: color-mix(in oklab, var(--ok) 18%, transparent);
  box-sizing: border-box;
  margin-block: calc(var(--ck-size) * .04);
}
@media (hover: hover) and (pointer: fine) {
  .pt.src:hover, .board-bar.src:hover, .board-off.src:hover { background: color-mix(in oklab, var(--accent) 28%, transparent); }
  .pt.dst:hover, .board-bar.dst:hover, .board-off.dst:hover { background: color-mix(in oklab, var(--ok) 34%, transparent); }
}
.pt:focus-visible, .board-bar:focus-visible, .board-off:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}

.ck.held {
  position: relative;
  opacity: .62;
  pointer-events: none;
}

.ck.held::after {
  content: ""; position: absolute; inset: -18%;
  border: max(1.5px, calc(var(--ck-size) * .07)) dashed var(--accent);
  border-radius: 50%;
}
.board-off .ck.held::after { inset: 0; border-radius: 2px; }

.ck.held.guest::after { border-style: dotted; }

.die { position: relative; }
.die.used::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--die-face); opacity: .62;
}
.die.used::after {
  content: ''; position: absolute;
  inset-inline-end: -.3em; inset-block-start: -.3em;
  inline-size: 1em; block-size: 1em; border-radius: 50%;
  background-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 80%;
  box-shadow: 0 0 0 1.5px var(--die-face), 0 1px 2px rgba(0, 0, 0, .35);
  forced-color-adjust: none;
}

.dice-roll {
  display: inline-flex; align-items: center; gap: .3rem;
  vertical-align: -.4em;
}
.die {
  --pip: radial-gradient(circle closest-side, currentColor 96%, #0000);
  --c1: 18.75%; --c2: 50%; --c3: 81.25%;
  inline-size: var(--die-size, 1.75rem);
  block-size: var(--die-size, 1.75rem);
  flex: none;
  border: 1px solid var(--die-edge);
  border-radius: 22%;
  background-color: var(--die-face);
  color: var(--die-pip);
  background-repeat: no-repeat;
  background-size: 20% 20%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.die[data-d="1"] {
  background-image: var(--pip);
  background-position: var(--c2) var(--c2);
}
.die[data-d="2"] {
  background-image: var(--pip), var(--pip);
  background-position: var(--c1) var(--c1), var(--c3) var(--c3);
}
.die[data-d="3"] {
  background-image: var(--pip), var(--pip), var(--pip);
  background-position: var(--c1) var(--c1), var(--c2) var(--c2), var(--c3) var(--c3);
}
.die[data-d="4"] {
  background-image: var(--pip), var(--pip), var(--pip), var(--pip);
  background-position: var(--c1) var(--c1), var(--c3) var(--c1),
                       var(--c1) var(--c3), var(--c3) var(--c3);
}
.die[data-d="5"] {
  background-image: var(--pip), var(--pip), var(--pip), var(--pip), var(--pip);
  background-position: var(--c1) var(--c1), var(--c3) var(--c1), var(--c2) var(--c2),
                       var(--c1) var(--c3), var(--c3) var(--c3);
}
.die[data-d="6"] {
  background-image: var(--pip), var(--pip), var(--pip), var(--pip), var(--pip), var(--pip);
  background-position: var(--c1) var(--c1), var(--c3) var(--c1),
                       var(--c1) var(--c2), var(--c3) var(--c2),
                       var(--c1) var(--c3), var(--c3) var(--c3);
}

.dice-roll.double {
  padding: .25rem .4rem;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  border-radius: 7px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.dice-roll .tag {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}

.turns {
  list-style: none; margin: 0; padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(7.5rem, 22vw, 9.5rem), 1fr));
  gap: .4rem;
}
.turns li {
  display: flex;

  content-visibility: auto;
  contain-intrinsic-size: auto 2.75rem;
}
.turns form { display: flex; inline-size: 100%; }
.turns button {
  inline-size: 100%;
  min-height: 2.75rem;
  padding: .5rem .7rem;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;

  direction: ltr;
}

@keyframes conn-fade { from { opacity: 0; } to { opacity: 1; } }

.result-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-4);
}
.result-actions form { display: contents; }
.result-actions .cta { flex: 1 1 100%; }
.result-actions .tool { flex: 1 1 auto; inline-size: auto; justify-content: center; }

@media (max-width: 30rem) {
  .game-result:has(.result-actions) { padding-block: var(--s-3); }
  .game-result:has(.result-actions) .result-icon .icon { inline-size: 1.8em; block-size: 1.8em; }
  .game-result:has(.result-actions) .result-word { font-size: 1.2rem; }
}
.result-win { border-color: var(--ok); }
.result-win .result-icon, .result-win .result-word { color: var(--ok); }
.result-loss .result-icon, .result-loss .result-word { color: var(--quiet); }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute; top: -8%;
  inline-size: .4rem; block-size: .65rem;
  border-radius: 1px;
  background: var(--c, var(--ok));
  opacity: 0;
}
.confetti i:nth-child(1)  { left: 7%;  --c: #d4a548; --delay: .30s; --spin: 290deg; }
.confetti i:nth-child(2)  { left: 15%; --c: var(--accent); --delay: .55s; --spin: -230deg; }
.confetti i:nth-child(3)  { left: 24%; --c: var(--ok); --delay: .40s; --spin: 340deg; }
.confetti i:nth-child(4)  { left: 32%; --c: #4a7ba6; --delay: .70s; --spin: -300deg; }
.confetti i:nth-child(5)  { left: 41%; --c: #d4a548; --delay: .35s; --spin: 250deg; }
.confetti i:nth-child(6)  { left: 49%; --c: var(--accent); --delay: .62s; --spin: -260deg; }
.confetti i:nth-child(7)  { left: 57%; --c: #4a7ba6; --delay: .45s; --spin: 320deg; }
.confetti i:nth-child(8)  { left: 65%; --c: var(--ok); --delay: .75s; --spin: -240deg; }
.confetti i:nth-child(9)  { left: 73%; --c: #d4a548; --delay: .50s; --spin: 270deg; }
.confetti i:nth-child(10) { left: 81%; --c: var(--accent); --delay: .38s; --spin: -310deg; }
.confetti i:nth-child(11) { left: 89%; --c: #4a7ba6; --delay: .68s; --spin: 230deg; }
.confetti i:nth-child(12) { left: 95%; --c: var(--ok); --delay: .58s; --spin: -280deg; }
.confetti i:nth-child(13) { left: 11%; --c: var(--ok); --delay: .84s; --spin: 210deg; }
.confetti i:nth-child(14) { left: 28%; --c: #d4a548; --delay: .92s; --spin: -350deg; }
.confetti i:nth-child(15) { left: 45%; --c: #4a7ba6; --delay: .80s; --spin: 300deg; }
.confetti i:nth-child(16) { left: 61%; --c: var(--accent); --delay: .88s; --spin: -220deg; }
.confetti i:nth-child(17) { left: 77%; --c: var(--ok); --delay: .96s; --spin: 330deg; }
.confetti i:nth-child(18) { left: 93%; --c: #d4a548; --delay: .82s; --spin: -290deg; }

@media (prefers-reduced-motion: no-preference) {

  .result, .welcome { animation: result-pop var(--dur-slow) var(--ease-emphasized-enter) both; }
  .result-icon, .welcome-icon {
    animation: result-wave 900ms var(--ease-standard) 300ms both;
    transform-origin: 50% 90%;
  }

  .confetti i { animation: confetti-fall 1.4s var(--ease-standard) var(--delay, .4s) both; }

  .result-loss { animation: result-sink 550ms var(--ease-standard-enter) both; }
  .result-loss .result-icon {
    animation: result-droop 1.1s var(--ease-standard) 400ms both;
    transform-origin: 50% 95%;
  }
}
html.still :is(.result, .welcome, .result-icon, .welcome-icon, .result-loss, .confetti i) { animation: none; }
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--fall, 9rem)) rotate(var(--spin, 300deg)); }
}
@keyframes result-pop {
  from { opacity: 0; transform: scale(.92); }
  60%  { transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes result-wave {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(-9deg); }
  70%      { transform: rotate(6deg); }
}
@keyframes result-sink {
  from { opacity: 0; transform: translateY(-.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes result-droop {
  from { transform: rotate(0); }
  to   { transform: rotate(-14deg); }
}

.welcome {
  position: relative; overflow: hidden;
  text-align: center;
  padding: var(--s-5) var(--s-4);
  border-color: var(--ok);
}
.welcome p { margin: 0; }
.welcome-icon { color: var(--ok); font-size: 1.9rem; line-height: 1; }
.welcome-icon .icon { margin-inline-end: 0; }
.welcome-word {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem); font-weight: 700;
  color: var(--ok); margin-block-start: var(--s-2);
}
.welcome-lede { color: var(--ink-2); margin-block-start: var(--s-1); }

.welcome-next { margin-block-start: var(--s-4); font-size: .9rem; }

.toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s-2);
}

.toolgrid form { display: flex; }
.tool {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: .45rem;
  inline-size: 100%; min-block-size: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--field-line); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 500;
  text-align: start; text-decoration: none;
  cursor: pointer;
}
.tool .icon { flex: none; color: var(--quiet); }
@media (hover: hover) and (pointer: fine) {
  .tool:hover { border-color: var(--quiet); }
  .tool:hover .icon { color: var(--accent); }
}

.embed-offer > summary.tool { list-style: none; }
.embed-offer > summary.tool::-webkit-details-marker { display: none; }
.embed-offer[open] > summary.tool { border-color: var(--quiet); }
.embed-body { padding: .5rem .1rem 0; }

.posid {
  color: var(--quiet); font-size: .78rem;
  margin: 0; overflow-wrap: anywhere;
}
code { font-family: var(--font-mono); font-size: .85em; }

.share { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; }
.share-btn { gap: .45rem; padding: var(--s-2) var(--s-4);
  background: var(--paper-2); font-size: 1rem; color: var(--ink); cursor: pointer; }
.share-btn .icon { inline-size: 1.25em; block-size: 1.25em; margin-inline-end: 0; }
.share-btn.brand-whatsapp .icon { color: #1fa855; }
.share-btn.brand-telegram .icon { color: #2a9fd8; }
@media (hover: hover) and (pointer: fine) {
  .share-btn:hover { border-color: var(--terra); color: var(--terra); }
}

@keyframes die-toss {
  0%   { transform: translateY(-42%) rotate(-24deg) scale(.85); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes die-settle {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .die {

    animation: die-toss 520ms linear(
      0, .06 8%, .28 20%, .72 42%, 1.06 60%, .97 72%, 1.02 84%, 1
    ) both;
  }

  .die:nth-child(2) { animation-delay: 70ms; }
  .die:nth-child(3) { animation-delay: 140ms; }
  .die:nth-child(4) { animation-delay: 210ms; }

  .dice-roll.settled .die { animation: none; }

  @supports not (animation-timing-function: linear(0, 1)) {
    .die { animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  }
}

@media (prefers-reduced-motion: reduce) {

  .die { animation: die-settle 120ms var(--ease-standard-enter) both; }
  .dice-roll.settled .die { animation: none; }
}

html.still .die { animation: die-settle 120ms var(--ease-standard-enter) both; animation-delay: 0s; }
html.still .dice-roll.settled .die { animation: none; }

.history { display: flex; flex-direction: column; gap: var(--s-2); flex: 0 0 auto; min-block-size: 0; }

.pending {
  margin-block: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-1);
  border: 1px dashed var(--line); background: var(--panel);
  font-size: .9rem;
}

.linklike {
  background: none; border: none; cursor: pointer;
  padding-block: var(--s-3); padding-inline: 0; min-inline-size: 2.75rem;
  color: var(--quiet); font-size: .85rem; text-decoration: underline;
}
.linklike:hover { color: var(--ink); }

.gate-foot p:not(.gate-legal) > a:only-child, .side-link > a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

.btnlike, .share-btn {
  display: inline-flex; align-items: center;
  min-block-size: 2.75rem;
  border: 1px solid var(--field-line); border-radius: var(--r-2);
  font-weight: 600; text-decoration: none;
  touch-action: manipulation;
}
.btnlike {
  justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  background: var(--paper-2); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btnlike:hover { border-color: var(--terra); color: var(--terra); }
}

.field-error { color: var(--terra); font-size: .85rem; font-weight: 600; }

.cta[disabled] {
  background: var(--paper-3); color: var(--quiet);
  border-color: var(--line-2); box-shadow: none;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .cta[disabled]:hover { background: var(--paper-3); }
}
.cta[disabled]:active { translate: none; }

.lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-inline-size: 62ch;
}

.page-head { display: flex; flex-direction: column; gap: var(--s-4); }

.rival { display: flex; flex-direction: column; gap: var(--s-6); }
.rival-panel { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.rival-line { margin: 0; }

.rival-score {
  font-size: clamp(1.6rem, 8.5vw, 2.4rem); font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: clamp(var(--s-2), 3vw, var(--s-4)); flex-wrap: nowrap;
}
.rival-keep { max-inline-size: 62ch; }

.step-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.5rem; block-size: 1.5rem;
  border-radius: var(--r-4);
  background: var(--brass-soft); color: var(--brass);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .8rem; font-weight: 600; line-height: 1;
}

.seed-field { font-family: var(--font-mono); }
.seed-note { max-inline-size: 62ch; }

.formula code {
  font-family: var(--font-mono);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 1px var(--s-1);
  overflow-wrap: anywhere;
}

.seed-form { max-inline-size: 42rem; gap: var(--s-3); }
.seed-form .seed-field { max-inline-size: 24rem; }
.seed-form button { align-self: start; }
.seed-note > p + p { margin-block-start: var(--s-2); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt { color: var(--quiet); }
.kv dd { margin: 0; min-width: 0; }

.hash { word-break: break-all; font-size: .85em; }

.rolls { display: flex; flex-wrap: wrap; gap: .3rem; }
.roll {
  font-variant-numeric: tabular-nums;
  padding: .05rem .35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.back {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;

  gap: .3em;
  color: var(--quiet);
}

[dir="rtl"] .dir-glyph { display: inline-block; transform: scaleX(-1); }

.seealso a { display: inline-flex; align-items: center; min-block-size: 1.5rem; }

@media (pointer: coarse) { .seealso a { min-block-size: 2.75rem; } }

.wrap {
  inline-size: min(100% - 2 * var(--s-5), var(--page));
  margin-inline: auto;
}

.play { max-inline-size: 44rem; }
.play-form { display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }

.opt { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.opt legend {
  padding: 0; margin-block-end: var(--s-2);
  font-size: .98rem; font-weight: 600; color: var(--ink-2);
}
.picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picks-col { flex-direction: column; align-items: stretch; }

.play-heading {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2;
}

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s-2); }

.tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--field-line); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--ink);
  cursor: pointer; touch-action: manipulation;
  min-inline-size: 0;
}
.tile input {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.tile-board { display: block; border-radius: var(--r-1); overflow: hidden; }
.tile-board .mini { display: block; inline-size: 100%; block-size: auto; }
.tile-name { font-weight: 600; font-size: .98rem; line-height: 1.2; }
.tile-sub {
  font-family: "Alegreya Names", var(--font-display);
  font-size: .86rem; line-height: 1.2; color: var(--quiet);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-sub .x { color: var(--line-2); }

.tile input:checked ~ .tile-name { color: var(--terra-2); font-weight: 700; }

.tiles-fixed { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.tile-set { cursor: default; border-color: var(--terra); background: var(--terra-soft); }
.tile-set .tile-name { color: var(--terra-2); font-weight: 700; }
@media (max-width: 30rem) { .tiles-fixed { grid-template-columns: minmax(0, 1fr); } }
.tile:has(input:checked) {
  border-color: var(--terra); background: var(--terra-soft);
  box-shadow: inset 0 0 0 1px var(--terra);
}
@supports selector(:has(*)) {
  .tile:has(input:focus-visible), .pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
}
@supports not selector(:has(*)) {
  .tile:focus-within, .pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover, .pick:hover { border-color: var(--terra); }
}

.pick {
  position: relative;
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 2px; min-block-size: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--field-line); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--ink);
  cursor: pointer; touch-action: manipulation;
  min-inline-size: 0;
}
.pick input {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.pick-name { font-weight: 500; font-size: 1rem; line-height: 1.25; display: inline-flex; align-items: center; gap: var(--s-2); }
.pick-name .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.pick-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.3rem; font-weight: 600;
}
.pick-sub { font-size: .9rem; line-height: 1.2; color: var(--quiet); }
.pick-n { min-inline-size: 3.5rem; align-items: center; text-align: center; }
.pick input:checked + .pick-name { color: var(--terra-2); font-weight: 700; }
.pick:has(input:checked) {
  border-color: var(--terra); background: var(--terra-soft);
  box-shadow: inset 0 0 0 1px var(--terra);
}

.go { display: grid; gap: var(--s-2); }
.go-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.go-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 3.25rem; padding: var(--s-2) var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15;
  text-align: center; min-inline-size: 0;
}
.go-btn .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .go-btn:not(.cta):hover { border-color: var(--terra); }
}
.go-note { margin: 0; }

.go-bot { flex-direction: column; gap: 2px; }
.go-bot .go-bot-t { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.go-bot .go-sub {
  font-family: var(--font-body); font-weight: 400; font-size: .82rem;
  line-height: 1.2;
}

.bot-echo { display: none; }
.bot-echo[data-sel] { display: inline; }

@supports selector(:has(*)) {
  :is(.play-form, [data-play-scope]):has(input[name="bot"]:checked) .bot-echo[data-sel] { display: none; }
  :is(.play-form, [data-play-scope]):has(input[name="bot"][value="hep-yek"]:checked) .bot-echo[data-bot="hep-yek"],
  :is(.play-form, [data-play-scope]):has(input[name="bot"][value="dubara"]:checked) .bot-echo[data-bot="dubara"],
  :is(.play-form, [data-play-scope]):has(input[name="bot"][value="mars"]:checked) .bot-echo[data-bot="mars"],
  :is(.play-form, [data-play-scope]):has(input[name="bot"][value="du-ses"]:checked) .bot-echo[data-bot="du-ses"] { display: inline; }
}

.go-quick { flex: 1 1 100%; flex-direction: column; gap: 3px; padding-block: var(--s-3); }
.go-quick .go-quick-t {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: 1.3rem; line-height: 1.15;
}
.go-quick .go-quick-t .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.go-quick .go-sub {
  font-family: var(--font-body); font-weight: 400; font-size: .88rem;
  line-height: 1.3; text-wrap: balance;
}
.go-quick .go-quick-what { font-weight: 600; }

.go > .go-row > .go-btn:not(.go-quick) {
  flex: 1 1 calc(50% - var(--s-2)); min-inline-size: fit-content;
  font-size: .95rem; min-block-size: 2.75rem; text-wrap: balance;
}

.v-echo { display: none; }
.v-echo-on { display: inline; }
@supports selector(:has(*)) {
  :is(.play-form, [data-play-scope]):has(input[name="variant"]:checked) .v-echo-on { display: none; }
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="backgammon"]:checked) .v-echo[data-v="backgammon"],
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="long-narde"]:checked) .v-echo[data-v="long-narde"],
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="plakoto"]:checked) .v-echo[data-v="plakoto"],
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="fevga"]:checked) .v-echo[data-v="fevga"],
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="gul-bara"]:checked) .v-echo[data-v="gul-bara"],
  :is(.play-form, [data-play-scope]):has(input[name="variant"][value="tavli"]:checked) .v-echo[data-v="tavli"] { display: inline; }
}

.play-more summary {
  font: inherit; cursor: pointer; min-block-size: 2.75rem;
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2);
  display: flex; align-items: center;
  color: var(--ink); font-size: .95rem;
  list-style: none;
}

.play-more-line {
  flex: 1 1 auto; min-inline-size: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-1) var(--dot-gap);
  overflow-x: clip;
}
.play-more-line > .icon, .play-more-static { margin-inline-end: calc(var(--s-2) - var(--dot-gap)); }
.play-more summary::-webkit-details-marker { display: none; }

.play-more summary { flex-wrap: wrap; row-gap: 2px; }

.play > .play-more { margin-block-start: var(--s-4); }
.play-more-hint { flex: 1 1 100%; font-size: .86rem; color: var(--quiet); }
.play-more[open] summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.play-more summary .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--ink-2); }
.play-more-static { font-weight: 600; }
.play-more-static::after { content: ":"; }
.play-more-change {
  margin-inline-start: auto; padding: .15rem .6rem;
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  color: var(--indigo); font-weight: 600; font-size: .88rem;
}
@media (hover: hover) and (pointer: fine) {
  .play-more summary:hover { border-color: var(--line-2); }
  .play-more summary:hover .play-more-change { border-color: var(--indigo); }
}

:root { --dot-gap: 1.3rem; }
.echo { display: none; position: relative; }
.echo::before {
  content: "·"; color: var(--line-2);
  position: absolute; inset-block-start: 0; inset-inline-end: 100%;
  inline-size: var(--dot-gap); text-align: center;
}
.echo[data-l]::before { content: none; }
@supports selector(:has(*)) {
  :is(.play-form, [data-play-scope]):has(input[name="length"][value="1"]:checked) .echo[data-l="1"],
  :is(.play-form, [data-play-scope]):has(input[name="length"][value="3"]:checked) .echo[data-l="3"],
  :is(.play-form, [data-play-scope]):has(input[name="length"][value="5"]:checked) .echo[data-l="5"],
  :is(.play-form, [data-play-scope]):has(input[name="length"][value="7"]:checked) .echo[data-l="7"],
  :is(.play-form, [data-play-scope]):has(input[name="length"][value="11"]:checked) .echo[data-l="11"],
  :is(.play-form, [data-play-scope]):has(input[name="clock"][value="none"]:checked) .echo[data-c="none"],
  :is(.play-form, [data-play-scope]):has(input[name="clock"][value="standard"]:checked) .echo[data-c="standard"],
  :is(.play-form, [data-play-scope]):has(input[name="regeln"][value="turnier"]:checked) .echo[data-r="turnier"],
  :is(.play-form, [data-play-scope]):has(input[name="regeln"][value="tuerkisch"]:checked) .echo[data-r="tuerkisch"],
  :is(.play-form, [data-play-scope]):has(input[name="regeln"][value="tapa"]:checked) .echo[data-r="tapa"] { display: inline; }
}
.play-more-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-4) var(--s-3) var(--s-3);
  border: 1px solid var(--line); border-block-start: 0;
  border-end-start-radius: var(--r-2); border-end-end-radius: var(--r-2);
}
@media (min-width: 40rem) { .play-more-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.play-more-in .quiet { margin-block-start: var(--s-2); font-size: .88rem; }

.play-more-in > .opt-game, .play-more-in > .tiles-fixed, .play-more-in > .go-open { grid-column: 1 / -1; }
.go-open { inline-size: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .tile, .pick, .go-btn { transition: border-color 80ms var(--ease-standard), background-color 80ms var(--ease-standard); }
  .tile-name, .pick-name { transition: transform 120ms var(--ease-standard); }
  .tile:active .tile-name, .pick:active .pick-name { transform: scale(.97); }
}

.stage .panel {
  background: var(--stage-2);
  border: 1px solid var(--stage-line-2);
  border-radius: var(--r-3);
  box-shadow: 0 2px 6px rgb(0 0 0 / .4), 0 26px 60px -26px rgb(0 0 0 / .8);
  padding: clamp(var(--s-4), .7rem + 1.3vw, var(--s-5));
  position: relative;
}
.stage .tile, .stage .pick, .stage .go-btn:not(.cta) { color: var(--stage-ink); background: var(--stage); border-color: var(--stage-field); }
.stage .play-heading { color: var(--stage-ink); }
.stage .opt legend, .stage .play-more summary { color: var(--stage-ink-2); }
.stage .tile-sub, .stage .pick-sub, .stage .play-more summary .icon, .stage .play-more-hint { color: var(--stage-quiet); }
.stage .tile-sub .x, .stage .echo::before { color: var(--stage-line-2); }
.stage .play-more-change { color: var(--stage-terra); }

.stage .tile input:checked ~ .tile-name, .stage .pick input:checked + .pick-name { color: var(--stage-terra-2); }

.stage .tile:has(input:checked) .tile-sub, .stage .pick:has(input:checked) .pick-sub { color: var(--stage-ink-2); }

.stage .tile:has(input:checked) .badge-bot, .stage .pick:has(input:checked) .badge-bot { border-color: var(--stage-ink-2); color: var(--stage-ink-2); }
.stage .tile:has(input:checked) .seek-hard, .stage .pick:has(input:checked) .seek-hard { --level: var(--stage-terra-2); }
.stage .tile:has(input:checked), .stage .pick:has(input:checked) {
  border-color: var(--stage-terra); box-shadow: inset 0 0 0 1px var(--stage-terra);
  background: rgb(240 154 126 / .12);
}
@media (hover: hover) and (pointer: fine) {
  .stage .tile:hover, .stage .pick:hover, .stage .go-btn:not(.cta):hover { border-color: var(--stage-terra); }
}
.stage .play-more summary { background: var(--stage); border-color: var(--stage-field); color: var(--stage-ink); }
.stage .play-more summary .icon { color: var(--stage-ink-2); }
.stage .play-more-in { border-color: var(--stage-field); }
.stage .play-more-change { border-color: var(--stage-line-2); }
@media (hover: hover) and (pointer: fine) {
  .stage .play-more summary:hover { border-color: var(--stage-terra); }
  .stage .play-more summary:hover .play-more-change { border-color: var(--stage-terra); }
}
.stage .badge-bot { border-color: var(--stage-quiet); color: var(--stage-quiet); }

.stage .seek-easy   { --level: var(--stage-olive); }
.stage .seek-medium { --level: var(--stage-ink-2); }
.stage .seek-hard   { --level: var(--stage-terra); }
.stage .seek-full   { --level: var(--stage-brass); }
:where(.stage) .strength i { background: var(--stage-line-2); }

.stage .cta {
  background: var(--stage-terra);
  border-color: var(--stage-terra);
  color: var(--stage-on-terra);
}
@media (hover: hover) and (pointer: fine) {
  .stage .cta:hover { background: var(--stage-terra-2); border-color: var(--stage-terra-2); }
}

@media (max-width: 40rem) {
  .stage h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.4rem); }
  .hero-lede { font-size: 1rem; margin-block-end: var(--s-4); }
  .tile-sub { display: none; }

  .tile { padding: var(--s-1); container-type: inline-size; }
  .tile-name { font-size: clamp(.7rem, 3vw, .9rem); font-size: clamp(.6rem, 14cqi, .9rem); text-align: center; }
  .opt-len { container: picklen / inline-size; }
  .opt-len .picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .opt-clock .picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .pick-n { min-inline-size: 0; }
  .stage .panel { padding: var(--s-4) var(--s-3); }
}

@container picklen (max-width: 15.74rem) {
  .opt-len .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .go-btn { min-block-size: 3rem; }
}

@media (min-width: 64rem) and (max-height: 55rem) {
  .stage { padding-block-start: var(--s-5); }
  .stage h1 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); margin-block-end: var(--s-2); }
  .hero-lede { margin-block-end: var(--s-4); font-size: 1rem; }
  .tile-sub { display: none; }
  .play-form { gap: var(--s-3); }
  .stage .panel { padding: var(--s-4); }
  .go-btn { min-block-size: 3rem; }
}
@media (min-width: 64rem) and (min-height: 55.01rem) and (max-height: 60rem) {
  .stage h1 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); }
}

@media (max-width: 22rem) {
  .tiles { gap: var(--s-1); }
}

@media (max-height: 36rem) {
  .stage { padding-block-start: var(--s-3); }
  .stage h1 { font-size: clamp(1.5rem, .9rem + 1.8vw, 1.9rem); margin-block-end: var(--s-3); }

  .hero-lede, .stage .play-heading {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tile-sub { display: none; }
  .play-form { gap: var(--s-3); }
  .stage .panel { padding: var(--s-3); }
  .go-btn { min-block-size: 3rem; }
}

@media (max-height: 36rem) and (min-width: 40.01rem) {
  .tile { flex-direction: row; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); }
  .tile-board { flex: none; inline-size: 3.5rem; }
  .tile-name { min-inline-size: 0; font-size: .95rem; }
}

@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.mini { display: block; inline-size: 100%; block-size: auto; direction: ltr; }

.bd-felt  { fill: var(--felt); }
.bd-frame { fill: none; stroke: var(--frame); stroke-width: 3; }
.bd-pa    { fill: var(--pt-a); }
.bd-pb    { fill: var(--pt-b); }
.bd-tip   { fill: var(--edge-out); opacity: .16; }
.bd-bar   { fill: var(--frame); }
.bd-seam  { stroke: var(--frame-lo); stroke-width: 1; }

.bd-joint { stroke: var(--frame); stroke-width: 1.5; opacity: .5; }

.mini .ck-w  { fill: var(--w); stroke: var(--w-edge); stroke-width: 1; }
.mini .ck-b  { fill: var(--b); stroke: var(--b-edge); stroke-width: 1; }
.mini .gl-w  { fill: #fff; opacity: .5; }
.mini .gl-b  { fill: #fff; opacity: .1; }
.mini .ckn-w { fill: var(--w-edge); font: 600 10px var(--font-mono); }
.mini .ckn-b { fill: var(--b-edge); font: 600 10px var(--font-mono); }

.mini .run-w, .mini .run-b {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
}
.mini .run-w { stroke: var(--w-edge); }
.mini .run-b { stroke: var(--b); }

.kicker {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--quiet);
  display: flex; align-items: center; gap: var(--s-2);
  margin-block-end: var(--s-3);
}
.kicker:is(:lang(ar), :lang(he)) { letter-spacing: 0; }
.kicker::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.kicker .n {
  color: var(--terra); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.crumbs { margin-block-end: 0; }
.crumbs a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
}
.crumbs a:focus-visible { color: var(--terra); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--terra); text-decoration: underline; } }

.names {
  list-style: none; margin: 0; padding: 0;
  font-family: "Alegreya Names", var(--font-display); font-size: 1.08rem; line-height: 1.5;
  color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 0 var(--s-3);
}
.names li { display: flex; gap: var(--s-1); align-items: baseline; white-space: nowrap; }
.names .iso {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--quiet);
}
.minibox { border-radius: var(--r-1); overflow: hidden; align-self: start; inline-size: 100%; }

.two {
  display: grid; gap: clamp(var(--s-5), .8rem + 2.5vw, var(--s-7));
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
.two > * { min-inline-size: 0; }

.matches form.seek .meta { white-space: normal; }
.matches form.seek .seek-len { white-space: nowrap; }

.two .matches form.seek button { flex: none; }
@media (min-width: 62rem) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two > section > h2 { margin-block-end: var(--s-3); }
.two > section > .quiet { margin-block-start: var(--s-3); }

@media (forced-colors: active) {
  .stage-aura, .stage-fade, .stage-edge { display: none; }
  .stage { background: Canvas; color: CanvasText; }
  .boardbox::after { display: none; }

  .pick:has(input:checked), .tile:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .stage-aura, .stage-fade, .stage-edge { display: none; }
  .stage { background: #fff; color: #000; padding-block: var(--s-5); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(.75rem); }
}

@media (prefers-reduced-motion: no-preference) {

  .hero-text > * { animation: rise-in 450ms var(--ease-standard-enter) both; }
  .hero-text > :nth-child(2) { animation-delay: 90ms; }

  @supports (animation-timeline: view()) {
    main:has(.hero) > section:not(.hero) {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@media (update: slow) {

  .die, .actions h2::before, .alert, .notice, button,
  .result, .result-icon, .result-loss .result-icon, .confetti i,
  .welcome, .welcome-icon,
  .hero-text > *, main:has(.hero) > section,
  .hero-copy > *, .stage-board, .hero-stage, .live .pulse, .tile, .pick, .tile-name, .pick-name,
  body:has(.stage) :is(.kicker, h2.head, .section-deck, .card, .two > *) {
    animation: none; transition: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}

.block { display: flex; flex-direction: column; gap: var(--s-3); }

.empty-note {
  padding: var(--s-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-3);
  background: var(--paper-2);
  color: var(--ink-2);
  max-inline-size: 60ch;
}

.empty-lobby { display: flex; align-items: center; gap: var(--s-3); }
.empty-lobby .icon { flex: none; inline-size: 1.75rem; block-size: 1.75rem; color: var(--quiet); }

.keep-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--terra); border-radius: var(--r-2);
  background: color-mix(in oklab, var(--terra) 8%, var(--paper-2));
}
.keep-note p { margin: 0; max-inline-size: 60ch; }

.recent-games li.won { border-inline-start: 3px solid var(--accent); }
.recent-games li.lost { border-inline-start: 3px solid var(--line-2); }
.recent-games .row-act .tool { display: inline-flex; align-items: center; gap: .3rem; min-block-size: 2.75rem; }
.recent-games .row-act .icon { inline-size: 1.1rem; block-size: 1.1rem; }

.spark {
  display: block; direction: ltr;
  inline-size: 100%; max-inline-size: 20rem; block-size: auto;
}

.history li { flex-wrap: wrap; }
.history .meta { white-space: normal; }
.history .mono { font-size: .95em; }
.history .delta { color: var(--quiet); }

.siblings .chip { font-family: var(--font-display); font-size: 1.02rem; }

.matches form.seek button { flex: none; white-space: nowrap; min-block-size: 2.75rem; }
.matches form.seek .seek-name { font-weight: 600; }

.seek-easy   { --level: var(--ok); }
.seek-medium { --level: var(--olive); }
.seek-hard   { --level: var(--terra); }
.seek-full   { --level: var(--brass); }
.matches form.seek .seek-name { color: var(--level, inherit); }

.botname { white-space: nowrap; }
.botname .seek-name { color: var(--level, inherit); font-weight: 600; }
.strength {
  display: inline-flex; align-items: flex-end; gap: 2px;
  vertical-align: -.1em; margin-inline-end: .25em; block-size: .9rem;
}
.strength i { inline-size: .28rem; border-radius: 1px; background: var(--line); }
.strength i:nth-child(1) { block-size: .45rem; }
.strength i:nth-child(2) { block-size: .6rem; }
.strength i:nth-child(3) { block-size: .75rem; }
.strength i:nth-child(4) { block-size: .9rem; }
.seek-easy   .strength i:nth-child(-n+1),
.seek-medium .strength i:nth-child(-n+2),
.seek-hard   .strength i:nth-child(-n+3),
.seek-full   .strength i { background: var(--level); }
.botseeks > h2 { margin-block-end: var(--s-3); }
.botseeks > .quiet { margin-block-start: var(--s-3); }

@media (max-width: 26rem) {
  .matches form.seek { flex-wrap: wrap; }
  .matches form.seek > span { flex: 1 1 100%; }
  .matches form.seek button { inline-size: 100%; }
}

.embed-main {
  margin: 0; padding: var(--s-2);
  background: var(--bg);
}

.embed-main .board {
  inline-size: min(100%, calc((100svh - 6rem) * 1.36));
  margin-inline: auto;
}

.siblings {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-block: var(--s-3) 0;
}

.siblings-titled { display: block; margin-block-start: var(--s-6); }
.siblings-h {
  margin: 0 0 var(--s-3) 0;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink);
}
.siblings-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--field-line); border-radius: var(--r-4);
  background: var(--paper-2); color: var(--ink-2); text-decoration: none;
  font-size: .9rem;
}

.chip.current {
  border-color: var(--terra); color: var(--terra-2); font-weight: 600;
  background: var(--terra-soft);
}
@media (hover: hover) and (pointer: fine) {
  a.chip:hover { border-color: var(--terra); color: var(--terra); }
}

.game-hero-board, .rules-article .rules-board { margin: 0; }
.board-caption {
  margin-block-start: var(--s-2);
  color: var(--quiet); font-size: .85rem;
}

body:has(.rules-article) { --page: 62rem; }

.rules-article { display: flex; flex-direction: column; gap: var(--s-6); }
.rules-head { display: flex; flex-direction: column; gap: var(--s-3); }
.rules-head h1 {
  font-size: clamp(1.8rem, 1.5rem + 1.3vw, 2.4rem);
  line-height: 1.12;
}

.rules-article .rules-board { max-inline-size: 38rem; inline-size: 100%; }

.rules-article figure .board { content-visibility: auto; }

.rules-body { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 62rem) {
  .rules-body { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--s-7); }

  .rules-toc { position: sticky; inset-block-start: 5rem; }
}

.rules-toc {
  padding: var(--s-2);
  background: var(--paper-2); border: var(--hair); border-radius: var(--r-3);
}
.rules-toc ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc;
  display: flex; flex-direction: column;
}
.rules-toc li { counter-increment: toc; }
.rules-toc a {
  display: flex; align-items: center; gap: var(--s-2);
  min-block-size: 2.75rem; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-2);
  color: var(--ink-2); text-decoration: none;
  font-size: .9rem; line-height: 1.3;
}
.rules-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .75rem; font-weight: 600; color: var(--indigo);
}
@media (hover: hover) and (pointer: fine) { .rules-toc a:hover { background: var(--paper-3); color: var(--ink); } }

.rules-flow {
  display: flex; flex-direction: column; gap: var(--s-7);
  counter-reset: sec;
}
.rules-flow > * { max-inline-size: 62ch; }
.rules-flow > .rules-cta { max-inline-size: 44rem; }
.rules-sec {
  display: flex; flex-direction: column; gap: var(--s-4);
  scroll-margin-block-start: 5rem;
  counter-increment: sec;
}

.rules-sec h2 {
  margin: 0;
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--line);
}
.rules-sec h2::before {
  content: counter(sec, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .8rem; font-weight: 600; color: var(--indigo);
}

.rules-sec p { line-height: 1.75; }

.rules-faq dl { margin: 0; }
.rules-faq dt {
  font-weight: 650;
  line-height: 1.5;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}

.rules-faq dt:first-of-type { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.rules-faq dd {
  margin: var(--s-2) 0 0;
  line-height: 1.75;
}

.rules-faq dt:target {
  color: var(--indigo);
}

.rules-cta {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-block-start: var(--s-7);
}
.rules-cta .quiet { margin: 0; }
.rules-cta .play { margin: 0; }

.demo {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  background: var(--paper-2);
  border: var(--hair); border-radius: var(--r-3);
}
.demo-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.demo-step { margin: 0; }
.demo-step figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.demo-step .board { max-inline-size: 32rem; }
.demo-step figcaption {
  display: flex; gap: var(--s-2); align-items: baseline;
  color: var(--ink-2); font-size: .95rem; line-height: 1.6;
}

.demo-n {
  flex: none;
  inline-size: 1.5rem; block-size: 1.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-4);
  background: var(--indigo-soft); color: var(--indigo);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
}
.demo-nav {
  display: flex; align-items: center; gap: var(--s-3);
  margin-block: var(--s-4) 0;
}
.demo-nav .chip { padding-inline: var(--s-4); }
.demo-nav button[disabled] { opacity: .45; cursor: default; }
.demo-at {
  font-family: var(--font-mono); color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

.rules-toc a[aria-current] {
  background: var(--indigo-soft); color: var(--indigo); font-weight: 600;
}

.setgroup button, .report-panel button, .pending button { min-block-size: 2.75rem; }

.hint {
  color: var(--quiet); font-size: .85rem; line-height: 1.55;
  max-inline-size: 60ch;
}

.pending { display: flex; flex-direction: column; gap: var(--s-3); align-items: start; }

.danger-action {
  min-block-size: 2.75rem;
  border-color: var(--terra); color: var(--terra); font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {

  .danger-action:hover {
    background: var(--terra); border-color: var(--terra-2); color: var(--on-terra);
  }
}

.mini .ck-mark { fill: none; stroke: var(--terra); stroke-width: 2.4; }

.doc h2 .icon { inline-size: 1.05em; block-size: 1.05em; color: var(--brass); }

.curve-box {
  position: relative;
  background: var(--paper-2); border: var(--hair); border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3); box-shadow: var(--lift);
}
.curve { display: block; inline-size: 100%; block-size: auto; direction: ltr; overflow: visible; }

@media (max-width: 45.99rem) {
  .curve-box { position: relative; overflow-x: auto; }
  .curve { min-inline-size: 36rem; }
}
.curve .cv-fill.up { fill: var(--ok); opacity: .16; }
.curve .cv-fill.down { fill: var(--terra); opacity: .14; }
.curve .cv-zero { stroke: var(--ink-2); stroke-width: 1; }
.curve .cv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.curve .cv-tick { stroke: var(--line-2); stroke-width: 1; }
.curve .cv-lab { fill: var(--quiet); font: 500 10px var(--font-mono); }

.curve .cv-dice { fill: none; stroke: var(--quiet); stroke-width: 1; stroke-dasharray: 2 2; opacity: .8; }
.curve .cv-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.curve .cv-line.me { stroke: var(--ink); }
.curve .cv-line.opp { stroke: var(--quiet); }

.curve .cv-mark { fill: var(--terra); stroke: var(--paper-2); stroke-width: 1.5; }
.curve .cv-mark.doubtful { fill: var(--brass); }
.curve .cv-mark.forgiven { fill: var(--paper-2); stroke: var(--terra); stroke-width: 2; }
.curve .cv-mark.doubtful.forgiven { stroke: var(--brass); }
.curve a:hover .cv-mark, .curve a:focus .cv-mark { stroke: var(--ink); }
.curve a:focus { outline: none; }
.curve a:focus-visible .cv-mark { stroke: var(--ink); stroke-width: 3; }
.curve .cv-joker { fill: var(--brass); stroke: var(--paper-2); stroke-width: 1; }
.curve-legend { line-height: 1.6; max-inline-size: 70ch; }

.cube-tag { font-family: var(--font-body); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brass); }
@media print {
  .puzzle-stage, .rate-card, .rule-plate { box-shadow: none; }
}

@media (max-width: 26rem) {
  .embed-head { flex-direction: column; align-items: stretch; }
  .embed-head .side, .embed-head .side.end { justify-content: space-between; }
  .embed-head .side.end { flex-direction: row-reverse; }
  .embed-head > .embed-cap { text-align: start; order: 3; }

  .embed-main .board { inline-size: min(100%, calc((100svh - 10.5rem) * 1.36)); }
}

@media (forced-colors: active) {
  .ck        { background-image: none; box-shadow: none; }
  .ck.w      { background: Canvas;     border: 2px solid CanvasText; }
  .ck.b      { background: CanvasText; border: 2px solid Canvas; }
  .ck.pinned { box-shadow: none; outline: 2px solid LinkText; outline-offset: 1px; }
  .pt        { border: 1px solid CanvasText; }
  .pt::before { display: none; }

  .pt.mark-from, .board-bar.mark-from { border: 2px dashed Highlight; }
  .pt.mark-to, .pt.mark-both { border: 2px solid Highlight; }
  .board-bar.mark-to { border: 2px solid Highlight; }
  .die       { background-color: Canvas; color: CanvasText; box-shadow: none; }
  .die.used::before { background: Canvas; }
  .die.used::after  { background-color: Highlight; box-shadow: 0 0 0 1.5px Canvas; }
  .board     { background: Canvas; }
  main:has(.actions) .board { outline: 3px solid Highlight; }

  main:is(:has(.hero), :has(.game-hero)) { background: none; }
}

@media print {
  .topbar, body > footer, .turns, .posid,
  .duel-tools, .duel-band, .duel-menu, .hud-act, .pcard-react, .pcard-bubble, .react-layer { display: none; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; gap: 1rem; }

  body:has(.game) main { flex: none; }
  main:is(:has(.hero), :has(.game-hero)) { background: none; }

  .game { display: block; height: auto; overflow: visible; }
  .duel-stage, .pcard { inline-size: auto; max-inline-size: none; max-block-size: none; overflow: visible; }

  .duel-nojs { display: block; }
  .duel-nojs .history-list[hidden] { display: block !important; }
  .history { display: block; }
  .history-list {
    display: block; overflow: visible;
    min-block-size: 0; max-block-size: none;
    break-inside: auto;
  }
  .history-list li { break-inside: avoid; }
  .game .board { max-inline-size: none; }

  .board {
    break-inside: avoid; border-color: #000; background: #fff;
    box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .panel, .matches li { border-color: #999; }
  .ck.w { background: #fff; border-color: #000; box-shadow: none; }
  .ck.b { background: #000; border-color: #000; box-shadow: none; }

  .pt::before { background: #eee; }
  .quad .pt:nth-child(even)::before { background: #c9c9c9; }
  .board-bar { background: #eee; }
  .die { box-shadow: none; border-color: #000; background-color: #fff; color: #000; }
}

@media (prefers-contrast: more) {

  :root {
    --line: #9ea3a5; --line-2: #7f858c; --field-line: #545a63;
    --quiet: #4b515a;
    --pt-b: #4c5f70; --die-edge: #6f6a5d;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --line: #5f646d; --line-2: #7a818b; --field-line: #aeb6c0;
      --quiet: #b9c0c9;
      --pt-a: #a08a67; --pt-b: #5d7085;
    }
  }
  :root[data-theme="dark"] {
    --line: #5f646d; --line-2: #7a818b; --field-line: #aeb6c0;
    --quiet: #b9c0c9;
    --pt-a: #a08a67; --pt-b: #5d7085;
  }
  button, input, select, .panel, .matches li { border-width: 2px; }
  .ck { border-width: 2px; }
  .pt-num { opacity: .8; }

  main:is(:has(.hero), :has(.game-hero)) { background: none; }
}