.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;
}

.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);
}
:root { --dot-gap: 1.3rem; }

:where(.stage) .strength i { background: var(--stage-line-2); }
@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); }
}

.settings, .report { display: flex; flex-direction: column; gap: var(--s-5); }

.settings-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.settings-toc a[hidden] { display: none; }
.settings-toc a {
  display: inline-flex; align-items: center;
  min-block-size: 2.75rem; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-4);
  background: var(--paper-2); color: var(--ink-2);
  font-size: .9rem; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .settings-toc a:hover { border-color: var(--terra); color: var(--terra); }
}

.soundset[hidden] { display: none; }
.soundset-switch { margin: 0; }

.soundset .sound-toggle {
  border-radius: var(--r-2);
  border-color: var(--field-line);
  background: var(--paper-2);
  padding-inline: var(--s-4);
  font-size: 1rem;
}
.soundset.muted .sound-toggle { color: var(--quiet); }

.soundset .sound-row { margin-block-end: 0; max-inline-size: 22rem; }
.soundset .sound-profiles { max-inline-size: 34rem; }
.soundset .sound-profiles legend { font-size: .9rem; }

@media (hover: hover) and (pointer: fine) {
  .soundset .sound-toggle:hover { border-color: var(--terra); color: var(--terra); }
}

.setgroup {
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.setgroup > h2 { margin: 0; }

.setgroup-note { max-inline-size: 60ch; }

.setform { display: flex; flex-direction: column; gap: var(--s-4); }
.setform > fieldset { gap: var(--s-4); }
.setform-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.setgroup > form + form,
.setgroup > form + fieldset,
.setgroup > fieldset + form {
  padding-block-start: var(--s-4); border-block-start: var(--hair);
}

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

.field { display: flex; flex-direction: column; gap: var(--s-1); max-inline-size: 34rem; }

.field > label {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s-1);
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
}
.field-narrow { max-inline-size: 20rem; }

.field-wide { max-inline-size: none; }

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

.setform label.check { gap: var(--s-3); min-block-size: 2.75rem; font-size: 1rem; }

.langfield { gap: var(--s-3); }

.pickrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pickrow button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: 2.75rem; min-inline-size: 7rem;
  padding-inline: var(--s-4);
}
.pickrow button[aria-current] {
  border-color: var(--terra); font-weight: 600;
  background: color-mix(in oklab, var(--terra) 8%, var(--paper-2));
}
.pickrow button[aria-current]::after { content: "\2713"; color: var(--ok); }

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

.langgrid button[aria-current]::after {
  content: "\2713"; margin-inline-start: auto; color: var(--ok);
}

.setgroup.danger {
  margin-block-start: var(--s-4);
  border-color: var(--terra);
  border-inline-start-width: 4px;
}
.setgroup.danger > h2 { color: var(--terra); }

.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);
  }
}

.report-panel, .report-after { padding: var(--s-5); }
.report-after { background: var(--paper-3); }
.report-after > h2 { margin-block-end: var(--s-3); }
.report-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  max-inline-size: 62ch;
}
.report-steps li { display: flex; gap: var(--s-3); align-items: baseline; }
.report-steps li > span:last-child { min-inline-size: 0; }

.report-subject {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  padding-block-end: var(--s-3);
  border-block-end: var(--hair);
}
.report-subject-label { color: var(--quiet); font-size: .85rem; }
.report-subject code { overflow-wrap: anywhere; font-size: .95rem; }

@media (max-width: 30rem) {

  .setgroup, .report-panel, .report-after { padding: var(--s-4); }
  .pickrow button { flex: 1 1 auto; min-inline-size: 0; }
}

.fb-sent {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--paper-3); border-radius: var(--r-2);
}
.fb-sent-h { margin: 0; font-size: 1rem; }
.fb-facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-1) var(--s-3); margin: 0;
}
.fb-facts > div { display: contents; }
.fb-facts dt { color: var(--quiet); font-size: .85rem; }
.fb-facts dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.fb-match code { font-size: .9rem; }

.setform > fieldset.fb-kinds { gap: 0; }

.trap {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.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; }
}