.movetrail {
  position: absolute; inset: 0; z-index: 3;
  inline-size: 100%; block-size: 100%;
  pointer-events: none;
  overflow: visible;
  transition: opacity 160ms linear;
}
.trail-ghost {
  fill: color-mix(in oklab, var(--mark) 22%, transparent);
  stroke: var(--mark); stroke-width: 2; stroke-dasharray: 4 3;
  opacity: .85;
}
.trail-line { stroke: var(--mark); stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.trail-tip { fill: var(--mark); opacity: .9; }

.movetrail { filter: drop-shadow(0 0 .75px var(--frame-lo)) drop-shadow(0 0 .75px var(--frame-lo)); }

.arena:has(.board.picking) .movetrail { opacity: .16; }
@media (forced-colors: active) {
  .movetrail { filter: none; }
  .trail-ghost { stroke: CanvasText; fill: none; }
  .trail-line  { stroke: CanvasText; }
  .trail-tip   { fill: CanvasText; }
}
@media (prefers-reduced-motion: no-preference) {

  .trail-step { animation: trail-in 260ms ease-out both; }
}
@keyframes trail-in { from { opacity: 0; } to { opacity: 1; } }

html.still .trail-step { animation: none; }

.ck.hurt {
  box-shadow: 0 0 0 max(2px, calc(var(--ck-size, 1.15rem) * .1)) var(--terra),
              0 4px 10px -2px rgb(0 0 0 / .5);
  filter: brightness(1.2);
}
@media (prefers-reduced-motion: no-preference) {
  .board-bar.struck { animation: bar-struck 1.5s ease-out 1; }
}
html.still .board-bar.struck { animation: none; }
@keyframes bar-struck {
  0%   { background-color: color-mix(in oklab, var(--terra) 32%, var(--bar));
         box-shadow: inset 0 0 0 2px var(--terra), inset 0 0 14px color-mix(in oklab, var(--terra) 60%, transparent); }
  25%  { background-color: var(--bar);
         box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 2px 6px rgb(0 0 0 / .3); }
  50%  { background-color: color-mix(in oklab, var(--terra) 32%, var(--bar));
         box-shadow: inset 0 0 0 2px var(--terra), inset 0 0 14px color-mix(in oklab, var(--terra) 60%, transparent); }
  100% { background-color: var(--bar);
         box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 2px 6px rgb(0 0 0 / .3); }
}
@media (forced-colors: active) {
  .ck.hurt { outline: 2px solid Highlight; }
}

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

.hud-undo {
  position: absolute; inset-block-start: 50%;
  left: min(94.6%, 100% - 1.375rem);
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: .35rem;
  font-size: clamp(.75rem, 2.4cqi, .95rem); font-weight: 600;
  border-radius: var(--r-2);
  box-shadow: 0 2px 6px rgb(0 0 0 / .3);
}
.hud-undo .icon { margin: 0; }
.hud-undo .word { display: none; }

.seat {
  display: flex; align-items: center; gap: var(--s-3);
  block-size: 2.9rem; padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2);
  border-inline-start: 3px solid transparent;
  background: var(--paper-2);
  box-shadow: var(--lift);
  font-size: 1rem; font-weight: 600;
  min-inline-size: 0;
}
.seat.mine { background: var(--paper-3); }

.seat-you {
  flex: none;
  border: 1px solid var(--terra); color: var(--terra);
  border-radius: var(--r-1); padding: 0 .3em;
  font-size: max(.75rem, .68em); font-weight: 700; letter-spacing: .06em;
  white-space: nowrap;
}
.seat-dot { --ck-size: 1.3rem; flex: none; }
.seat-name {
  flex: 1 1 auto; min-inline-size: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat-name a { color: inherit; }
.seat-nums { display: flex; gap: var(--s-3); flex: none; align-items: baseline; }
.pstat {
  color: var(--quiet); font-size: .82rem; font-weight: 400;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seat-clock { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-inline-start: auto; }
.seat-clock .clock {
  font-size: 1.2rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid transparent; border-radius: var(--r-1);
  padding: .05rem .35rem; direction: ltr;
}
.lowtag { display: none; }
@media (max-width: 36rem) {
  .seat { gap: var(--s-2); padding-inline: var(--s-2); font-size: .92rem; }
  .seat-nums .pstat:first-child:not(:last-child) { display: none; }
}

.matchdesc {
  margin: 0;
  font-size: .85rem; font-weight: 400; letter-spacing: 0;
  color: var(--quiet); text-align: center;
}
.matchnotes { margin: 0; text-align: center; }

.waitroom { display: flex; flex-direction: column; gap: var(--s-3); inline-size: 100%; }
.waitroom .seats { display: grid; gap: var(--s-2); }

.status {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem;
  align-items: center; justify-content: center;
  color: var(--quiet); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.status > span {
  border: 1px solid var(--line); border-radius: var(--r-4);
  padding: .1rem .6rem; background: var(--panel);
}

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

.act-double {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
  background: color-mix(in oklab, var(--accent) 8%, var(--panel));
}
.act-take, .act-accept {
  border-color: var(--ok); color: var(--ok); font-weight: 600;
  background: color-mix(in oklab, var(--ok) 8%, var(--panel));
}
.act-drop, .act-decline, .act-resign { color: var(--quiet); }

.banner.quiet { border-style: dashed; }

.conn.conn-back { border-style: solid; border-color: var(--ok); color: var(--ok); }

.guestmail { display: grid; gap: var(--s-2); padding: var(--s-3); }
.guestmail p { margin: 0; }
.guestmail-ask { margin: 0; font-size: 1rem; }

details.guestmail { padding: 0; gap: 0; }
details.guestmail > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  min-block-size: 2.75rem; padding: var(--s-2) var(--s-3);
  font-weight: 600;
}
details.guestmail > summary::-webkit-details-marker { display: none; }
details.guestmail[open] > summary { border-block-end: 1px solid var(--line); }
details.guestmail > form, details.guestmail > p { margin: var(--s-2) var(--s-3); }
details.guestmail > p { margin-block-start: 0; }
.guestmail-form { display: grid; gap: var(--s-1); }
.guestmail-form input { inline-size: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  .conn { animation: conn-fade var(--dur-normal) var(--ease-standard-enter) both; }
}
@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; }

body:has(.game) main {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  gap: 0;

  max-width: none;
}
body:has(.game) main > .alert,
body:has(.game) main > .notice { margin: var(--s-2) var(--s-3) 0; }

body:has(.game) > footer { display: none; }

.duel {

  --duel-card: 300px;
  --duel-gap: 24px;
  --duel-pad: 16px;
  --duel-head: 2.2rem;
  --duel-tools: 3.9rem;
  --duel-under: .5rem;
  --avatar: 64px;
  --duel-name: 1.375rem;
  --duel-time: 2.4rem;
  --duel-ring: 10.5rem;
  --duel-score: 4.75rem;
  --duel-say: 1.05rem;

  --stage-w: min(100%, calc((100svh - 11rem) * 1.36));
  --stage-w: min(100%, calc((100cqh - var(--duel-head) - var(--duel-tools) - 2 * var(--duel-under)) * 1.36));
  position: relative;
  flex: 1 1 0;
  min-block-size: 0; min-inline-size: 0;
  display: grid;
  grid-template-columns: var(--duel-card) minmax(0, 1fr) var(--duel-card);

  grid-template-rows: auto auto;
  column-gap: var(--duel-gap); row-gap: var(--duel-under);
  padding: var(--duel-pad);
  align-content: center; align-items: center; justify-items: center;

  container-type: size; container-name: duel;

  overflow: clip;
}

.duel-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--duel-under);
  min-inline-size: 0;
  inline-size: var(--stage-w);
}

.duel-stage { grid-column: 2; grid-row: 1; }
.duel-tools { grid-column: 2; grid-row: 2; inline-size: var(--stage-w); }
.pcard { grid-row: 1 / span 2; }
.pcard.opp { grid-column: 1; }
.pcard.me { grid-column: 3; }

.pcard { max-block-size: 100cqh; overflow-y: auto; overscroll-behavior: contain; }
.arena {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1.36;

  container-type: inline-size;
  container-name: arena;
}
.arena .board { inline-size: 100%; block-size: 100%; }

.duel-head {
  margin: 0 auto; min-block-size: var(--duel-head);
  inline-size: fit-content; max-inline-size: 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .2rem var(--dot-gap);
  overflow-x: clip;
  font-size: .85rem; font-weight: 400; letter-spacing: 0;
  color: var(--quiet); text-align: center;
}
.duel-head > :not(:first-child):not([hidden]) { position: relative; }
.duel-head > :not(:first-child):not([hidden])::before {
  content: "·"; color: var(--line-2);
  position: absolute; inset-block-start: 50%; inset-inline-end: 100%;
  inline-size: var(--dot-gap); text-align: center; translate: 0 -50%;
}
.duel-head-score {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 600; letter-spacing: .02em;
  color: var(--brass);
}
.duel-head-score .ck { --ck-size: 1rem; }
.duel-head-score .score-sep { color: var(--quiet); font-weight: 400; }
.duel-head .cube-val { margin-inline-end: .3rem; }
.duel-head-watch { display: inline-flex; align-items: center; gap: .3rem; }
.duel-head-watch .icon { margin: 0; }

.cube-val {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.6em; padding: .05em .3em;
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: var(--panel);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
}

.duel-band {
  position: absolute; z-index: 7;
  inset-inline: 8%; inset-block-start: calc(var(--duel-head) + var(--duel-under) + .5rem);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  pointer-events: none;
}

.duel-band :is(button, a[href], input, select, summary, label) { pointer-events: auto; }
.duel-band:not(:has(> :not([hidden]))) { display: none; }
.duel-band .banner, .duel-band .quiet { margin: 0; }
.duel-band .resume { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }

.duel-stage:has(.hud-act .act) .duel-band .resume { margin-right: auto; }

.pcard {
  position: relative;
  inline-size: var(--duel-card); max-inline-size: 100%; min-inline-size: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--lift);
}
.pcard.opp { justify-self: end; }
.pcard.me { justify-self: start; }
.pcard > *, .pcard-talk > * { margin: 0; max-inline-size: 100%; }

.pcard-talk { display: contents; }
.pcard.on { border-color: var(--terra); box-shadow: var(--lift), 0 0 0 1px var(--terra); }

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

.pcard-avatar {
  --ck-size: var(--avatar); position: relative; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
}
.pcard-avatar.w { color: var(--w-edge); }
.pcard-avatar.b { color: var(--b-edge); }

.pcard-avatar::after {
  content: ""; position: absolute; inset: -7px;
  border: 2px solid var(--terra); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.pcard.on .pcard-avatar::after { opacity: 1; }

.pcard-avatar[data-level] {
  --ring: max(1px, calc(var(--ck-size) * .02));
  --gap: max(1px, calc(var(--ck-size) * .015));
  --ring-c: var(--w-edge);
  --ring-bg: var(--w);
}
.pcard-avatar.b[data-level] { --ring-c: var(--b-edge); --ring-bg: var(--b); }
.pcard-avatar[data-level="medium"] {
  box-shadow:
    inset 0 0 0 var(--gap) var(--ring-bg),
    inset 0 0 0 calc(var(--gap) + var(--ring)) var(--ring-c),
    var(--ck-shadow);
}
.pcard-avatar[data-level="hard"] {
  box-shadow:
    inset 0 0 0 var(--gap) var(--ring-bg),
    inset 0 0 0 calc(var(--gap) + var(--ring)) var(--ring-c),
    inset 0 0 0 calc(2 * var(--gap) + var(--ring)) var(--ring-bg),
    inset 0 0 0 calc(2 * var(--gap) + 2 * var(--ring)) var(--ring-c),
    var(--ck-shadow);
}
.pcard-avatar[data-level="full"] {
  box-shadow:
    inset 0 0 0 var(--gap) var(--ring-bg),
    inset 0 0 0 calc(var(--gap) + var(--ring)) var(--ring-c),
    inset 0 0 0 calc(2 * var(--gap) + var(--ring)) var(--ring-bg),
    inset 0 0 0 calc(2 * var(--gap) + 2 * var(--ring)) var(--ring-c),
    inset 0 0 0 calc(3 * var(--gap) + 2 * var(--ring)) var(--ring-bg),
    inset 0 0 0 calc(3 * var(--gap) + 3 * var(--ring)) var(--ring-c),
    var(--ck-shadow);
}

.pcard-avatar[data-tier] {
  --tier-w: calc(var(--ck-size) * .035);
  --tier-c: var(--tier-1);
  box-shadow: 0 0 0 var(--tier-w) var(--tier-c), var(--ck-shadow);
}
.pcard-avatar[data-tier="2"] { --tier-w: calc(var(--ck-size) * .05); --tier-c: var(--tier-2); }
.pcard-avatar[data-tier="3"] { --tier-w: calc(var(--ck-size) * .065); --tier-c: var(--tier-3); }

.pcard-avatar[data-tier]::after { inset: calc(-7px - var(--tier-w)); }

@media (forced-colors: active) {

  .pcard-avatar[data-level] { border-color: CanvasText; }
  .pcard-avatar::after { border-color: CanvasText; }
}

.pcard-name {
  font-family: var(--font-display); font-size: var(--duel-name); font-weight: 700;
  line-height: 1.15; letter-spacing: -.005em; color: var(--ink);
  white-space: nowrap; overflow: hidden; overflow: clip visible; text-overflow: ellipsis;
  inline-size: 100%;
}

.pcard-name a {
  color: inherit; text-decoration: none; position: relative;
  display: inline-block; vertical-align: top;
  max-inline-size: 100%; min-inline-size: 2.75rem;
  padding-block: calc((2.75rem - 1.15em) / 2); margin-block: calc((1.15em - 2.75rem) / 2);
  padding-block: calc((2.75rem - 1lh) / 2); margin-block: calc((1lh - 2.75rem) / 2);
}
.pcard-name a > bdi {
  display: block;
  overflow: hidden; overflow: clip visible; text-overflow: ellipsis;
}
.pcard-name a:hover { text-decoration: underline; }

.pcard-name a:focus-visible { outline-style: none; }
.pcard-name a:focus-visible > bdi { outline: 2px solid; outline-color: inherit; outline-offset: 2px; }

.pcard-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s-1) var(--s-2); font-size: .95rem; font-weight: 600;
}
.pcard-meta:empty { display: none; }
.pcard-meta .botname { display: inline-flex; align-items: center; gap: .3em; }

.pcard-meta .seat-you, .pcard-meta .badge-bot { font-size: .75rem; }

.pcard-clock {
  position: relative;
  inline-size: var(--duel-ring); aspect-ratio: 1;
  display: grid; place-items: center;
  margin-block-start: var(--s-2);

  container-type: inline-size;
  --ring-sw: 1.8;
}
@container (max-width: 8.5rem)  { .pcard-ring { --ring-sw: 2.4; } }
@container (max-width: 6.75rem) { .pcard-ring { --ring-sw: 3; } }
@container (max-width: 4.5rem)  { .pcard-ring { --ring-sw: 7.2; } }
.pcard-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.pcard-ring circle { fill: none; stroke-width: var(--ring-sw); }
.pcard-ring .track { stroke: var(--line); }

.pcard-ring .run { stroke: var(--quiet); stroke-linecap: round; stroke-dasharray: 289; }

.pcard-ring .dl { stroke: var(--quiet); stroke-width: calc(var(--ring-sw) * .6); stroke-dasharray: 251; opacity: .8; }
.pcard-ring .dl.off { opacity: 0; }
.pcard.on .pcard-ring .run, .pcard.low .pcard-ring .run { stroke: var(--terra); }
.pcard.on .pcard-ring .dl { stroke: var(--terra); }

.pcard.low .pcard-ring .run { stroke-width: calc(var(--ring-sw) * 1.5); }

.pcard-time { position: relative; display: grid; justify-items: center; inline-size: 70%; }
.pcard-time .clock {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--duel-time); font-weight: 500; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.05; direction: ltr;
  white-space: normal; text-align: center;
}
.pcard.low .pcard-time .clock { color: var(--terra); }

@media (forced-colors: active) {
  .pcard-ring .run, .pcard-ring .dl { stroke: CanvasText; }
  .pcard-ring .track { stroke: GrayText; }
}
.pcard .lowtag { display: none; }

.pcard.low .pcard-clock { margin-block-end: 1rem; }
.pcard.low .lowtag {
  display: block; position: absolute; inset-block-start: calc(100% + 2px); inset-inline: 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--terra);
}

.pcard-say {
  display: inline-flex; align-items: center; gap: .4em;
  min-block-size: calc(var(--duel-say) * 1.1);
  font-family: var(--font-display); font-size: var(--duel-say); font-weight: 700;
  color: var(--terra); line-height: 1.1;
}
.pcard-say .icon { margin: 0; flex: none; }
.pcard-say.wait { font-family: inherit; font-size: .85rem; font-weight: 500; color: var(--quiet); }

.pcard-say.away { display: none; }
body.opp-away .pcard.opp .pcard-say.away {
  display: inline-flex;
  font-family: inherit; font-size: .85rem; font-weight: 500; color: var(--quiet);
}

body.opp-away .pcard.opp .pcard-say:not(.away) { display: none; }
body.opp-away .pcard.opp { border-color: var(--line-2); }
body.opp-away .pcard.opp .pcard-avatar::after {
  opacity: 1; border-style: dashed; border-color: var(--quiet);
}

@media (orientation: landscape) and (max-height: 34rem) {
  .duel [data-presence] { display: none; }
}

.pcard-score { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
.pcard-score b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--duel-score); font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: var(--brass);
}
.pcard-score span { font-size: .85rem; color: var(--quiet); }

.pcard-score b { transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .pcard-score b.scored { animation: score-pulse .9s ease-in-out 1; }
}
@keyframes score-pulse {
  0%   { transform: scale(1);    color: var(--brass); }
  40%  { transform: scale(1.12); color: var(--terra); }
  100% { transform: scale(1);    color: var(--brass); }
}

.pcard-pip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .2rem .6rem; font-size: .85rem; color: var(--quiet);
}
.pcard-pip .pstat { font-size: inherit; }
.pcard-gap { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pcard-gap::before { content: "·"; margin-inline-end: .6rem; color: var(--line-2); }
.pcard-since { font-size: .8rem; }

.pcard-react:empty { display: none; }
.pcard .claim { display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }

.pcard .guestmail { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; text-align: start; }

.pcard .guestmail, .pcard .guestmail-form { grid-template-columns: minmax(0, 1fr); }
.pcard .guestmail input { min-inline-size: 0; }
.pcard .guestmail button { inline-size: 100%; white-space: normal; }

.pcard details.guestmail > summary { font-size: .85rem; line-height: 1.3; gap: .4rem; padding-inline: var(--s-2); }
.pcard details.guestmail > form, .pcard details.guestmail > p { margin-inline: var(--s-2); font-size: .8rem; line-height: 1.35; }
.pcard details.guestmail button { font-size: .85rem; padding-inline: var(--s-2); overflow-wrap: anywhere; }

.pcard.on .pcard-avatar::after { opacity: 1; }

.pcard-react { inline-size: 100%; }
.react-row { position: relative; padding-block-end: .5rem; }
.react-open { display: none; }
.react-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
.react-grid button {
  min-block-size: 2.75rem; min-inline-size: 0; padding: .3rem .15rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  font: inherit; font-size: .75rem; font-weight: 500; line-height: 1.15; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-2);
  cursor: pointer; text-align: center; overflow-wrap: break-word; box-shadow: none;
  transition: opacity .15s, border-color .15s;
}
.react-grid button .icon { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; color: inherit; flex: none; }

.react-rude { grid-column: 1 / -1; }
.react-rude summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: .35rem;
  min-block-size: 2.75rem; padding: .25rem .5rem; font-size: .75rem; color: var(--quiet);
  border: 1px dashed var(--line); border-radius: var(--r-2); cursor: pointer;
}
.react-rude summary::-webkit-details-marker { display: none; }
.react-rude summary .icon { inline-size: 1rem; block-size: 1rem; margin: 0; color: inherit; }
.react-rude summary:hover, .react-rude[open] summary { color: var(--ink); border-color: var(--accent); border-style: solid; }
.react-rude summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.react-rude-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; margin-block-start: .375rem; }
.react-grid button:hover, .react-grid button:focus-visible { color: var(--ink); border-color: var(--accent); background: var(--paper); }

.react-grid button[data-react] { transition: opacity .15s, border-color .15s, color .15s, background-color .15s, transform .15s; }
.react-grid button[data-react]:hover, .react-grid button[data-react]:focus-visible {
  color: var(--rx-ink); border-color: var(--rx); background: var(--rx-bg); transform: scale(1.06);
}
.react-grid button[data-react]:active { transform: scale(.97); }
.react-row.cooling .react-grid button[data-react]:hover,
.react-row.offline .react-grid button[data-react]:hover,
.react-row.paused .react-grid button[data-react]:hover,
.react-grid button[aria-disabled="true"]:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .react-grid button[data-react]:hover, .react-grid button[data-react]:focus-visible, .react-grid button[data-react]:active { transform: none; }
}

[data-react="hi"], [data-key="hi"] { --rx: #0c7792; }
[data-react="fun"], [data-key="fun"] { --rx: #5c7c2f; }
[data-react="well"], [data-key="well"] { --rx: #2a7e3b; }
[data-react="respect"], [data-key="respect"] { --rx: #6e56cf; }
[data-react="clap"], [data-key="clap"] { --rx: #953ea3; }
[data-react="luck"], [data-key="luck"] { --rx: #ab6400; }

[data-react="lucky"], [data-key="lucky"] { --rx: #208368; }
[data-react="strong"], [data-key="strong"] { --rx: #0d74ce; }
[data-react="oops"], [data-key="oops"] { --rx: #cc4e00; }
[data-react="cry"], [data-key="cry"] { --rx: #3e63dd; }
[data-react="hard"], [data-key="hard"] { --rx: #0d7d7b; }
[data-react="brb"], [data-key="brb"] { --rx: #60646c; }
[data-react="thanks"], [data-key="thanks"] { --rx: #c2298a; }
[data-react="congrats"], [data-key="congrats"] { --rx: #9e6c00; }
[data-react="gg"], [data-key="gg"] { --rx: var(--accent); }
[data-react="hurry"], [data-key="hurry"] { --rx: #d13415; }
[data-react="yawn"], [data-key="yawn"] { --rx: #958071; }
[data-react="lol"], [data-key="lol"] { --rx: #e54666; }
[data-react="finger"], [data-key="finger"] { --rx: #813e19; }
[data-react="horns"], [data-key="horns"] { --rx: #5b5bd6; }
[data-react], [data-key] { --rx-bg: color-mix(in oklab, var(--rx) 14%, var(--paper)); }

[data-react], [data-key] { --rx-ink: color-mix(in oklab, var(--rx) 65%, var(--ink)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-react="hi"], :root:not([data-theme="light"]) [data-key="hi"] { --rx: #7ce2fe; }
  :root:not([data-theme="light"]) [data-react="fun"], :root:not([data-theme="light"]) [data-key="fun"] { --rx: #bdee63; }
  :root:not([data-theme="light"]) [data-react="well"], :root:not([data-theme="light"]) [data-key="well"] { --rx: #6fcf7f; }
  :root:not([data-theme="light"]) [data-react="respect"], :root:not([data-theme="light"]) [data-key="respect"] { --rx: #baa7ff; }
  :root:not([data-theme="light"]) [data-react="clap"], :root:not([data-theme="light"]) [data-key="clap"] { --rx: #e796f3; }
  :root:not([data-theme="light"]) [data-react="luck"], :root:not([data-theme="light"]) [data-key="luck"] { --rx: #ffc53d; }
  :root:not([data-theme="light"]) [data-react="lucky"], :root:not([data-theme="light"]) [data-key="lucky"] { --rx: #1fd8a4; }
  :root:not([data-theme="light"]) [data-react="strong"], :root:not([data-theme="light"]) [data-key="strong"] { --rx: #70b8ff; }
  :root:not([data-theme="light"]) [data-react="oops"], :root:not([data-theme="light"]) [data-key="oops"] { --rx: #f7a06a; }
  :root:not([data-theme="light"]) [data-react="cry"], :root:not([data-theme="light"]) [data-key="cry"] { --rx: #9eb1ff; }
  :root:not([data-theme="light"]) [data-react="hard"], :root:not([data-theme="light"]) [data-key="hard"] { --rx: #4fd1bf; }
  :root:not([data-theme="light"]) [data-react="brb"], :root:not([data-theme="light"]) [data-key="brb"] { --rx: #b0b4ba; }
  :root:not([data-theme="light"]) [data-react="thanks"], :root:not([data-theme="light"]) [data-key="thanks"] { --rx: #ff8dcc; }
  :root:not([data-theme="light"]) [data-react="congrats"], :root:not([data-theme="light"]) [data-key="congrats"] { --rx: #f5d90a; }
  :root:not([data-theme="light"]) [data-react="hurry"], :root:not([data-theme="light"]) [data-key="hurry"] { --rx: #ff977d; }
  :root:not([data-theme="light"]) [data-react="yawn"], :root:not([data-theme="light"]) [data-key="yawn"] { --rx: #d4b3a5; }
  :root:not([data-theme="light"]) [data-react="lol"], :root:not([data-theme="light"]) [data-key="lol"] { --rx: #ff92ad; }
  :root:not([data-theme="light"]) [data-react="finger"], :root:not([data-theme="light"]) [data-key="finger"] { --rx: #d8a277; }
  :root:not([data-theme="light"]) [data-react="horns"], :root:not([data-theme="light"]) [data-key="horns"] { --rx: #b1a9ff; }
}
:root[data-theme="dark"] [data-react="hi"], :root[data-theme="dark"] [data-key="hi"] { --rx: #7ce2fe; }
:root[data-theme="dark"] [data-react="fun"], :root[data-theme="dark"] [data-key="fun"] { --rx: #bdee63; }
:root[data-theme="dark"] [data-react="well"], :root[data-theme="dark"] [data-key="well"] { --rx: #6fcf7f; }
:root[data-theme="dark"] [data-react="respect"], :root[data-theme="dark"] [data-key="respect"] { --rx: #baa7ff; }
:root[data-theme="dark"] [data-react="clap"], :root[data-theme="dark"] [data-key="clap"] { --rx: #e796f3; }
:root[data-theme="dark"] [data-react="luck"], :root[data-theme="dark"] [data-key="luck"] { --rx: #ffc53d; }
:root[data-theme="dark"] [data-react="lucky"], :root[data-theme="dark"] [data-key="lucky"] { --rx: #1fd8a4; }
:root[data-theme="dark"] [data-react="strong"], :root[data-theme="dark"] [data-key="strong"] { --rx: #70b8ff; }
:root[data-theme="dark"] [data-react="oops"], :root[data-theme="dark"] [data-key="oops"] { --rx: #f7a06a; }
:root[data-theme="dark"] [data-react="cry"], :root[data-theme="dark"] [data-key="cry"] { --rx: #9eb1ff; }
:root[data-theme="dark"] [data-react="hard"], :root[data-theme="dark"] [data-key="hard"] { --rx: #4fd1bf; }
:root[data-theme="dark"] [data-react="brb"], :root[data-theme="dark"] [data-key="brb"] { --rx: #b0b4ba; }
:root[data-theme="dark"] [data-react="thanks"], :root[data-theme="dark"] [data-key="thanks"] { --rx: #ff8dcc; }
:root[data-theme="dark"] [data-react="congrats"], :root[data-theme="dark"] [data-key="congrats"] { --rx: #f5d90a; }
:root[data-theme="dark"] [data-react="hurry"], :root[data-theme="dark"] [data-key="hurry"] { --rx: #ff977d; }
:root[data-theme="dark"] [data-react="yawn"], :root[data-theme="dark"] [data-key="yawn"] { --rx: #d4b3a5; }
:root[data-theme="dark"] [data-react="lol"], :root[data-theme="dark"] [data-key="lol"] { --rx: #ff92ad; }
:root[data-theme="dark"] [data-react="finger"], :root[data-theme="dark"] [data-key="finger"] { --rx: #d8a277; }
:root[data-theme="dark"] [data-react="horns"], :root[data-theme="dark"] [data-key="horns"] { --rx: #b1a9ff; }
.react-grid button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.react-row.cooling .react-grid button,
.react-row.offline .react-grid button,
.react-grid button[aria-disabled="true"] { opacity: .45; cursor: default; }
.react-row.offline .react-grid button:hover { border-color: var(--line); color: var(--ink-2); background: transparent; }

.react-row.paused .react-grid button,
.react-row.paused .react-open { opacity: .45; cursor: default; }
.react-row.paused .react-grid button:hover { border-color: var(--line); color: var(--ink-2); background: transparent; }
html.nojs .pcard-react { display: none; }

.react-cool {
  position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px;
  background: var(--accent); border-radius: 2px;
  opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
[dir="rtl"] .react-cool { transform-origin: 100% 50%; }
.react-row.counting .react-cool { opacity: 1; animation: react-cool 5s linear forwards; }
@keyframes react-cool { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.arena-wrap { position: relative; inline-size: 100%; container-type: inline-size; container-name: wrap; }
.react-layer {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: clip;

  --rx-frame: 1.8%;
  --rx-inner: calc(100% - 2 * var(--rx-frame));
  --rx-gap: calc(var(--rx-inner) * .005);
  --rx-fr: calc((var(--rx-inner) - 3 * var(--rx-gap)) / 14.05);
  --rx-mid: calc(var(--rx-frame) + 6 * var(--rx-fr) + var(--rx-gap) + var(--rx-fr) / 2);
}

.flip .react-layer { --rx-mid: calc(var(--rx-frame) + 7.55 * var(--rx-fr) + 2 * var(--rx-gap)); }
.react-pop {

  position: absolute; left: var(--rx-mid); inline-size: fit-content;
  max-inline-size: 64%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  padding: .7rem 1.2rem; border-radius: var(--r-3);
  background: var(--rx-bg, var(--paper)); color: var(--rx-ink, var(--ink)); border: 2px solid var(--rx, var(--field-line));
  box-shadow: 0 .35rem 1.4rem rgb(0 0 0 / .22);
  opacity: 0;

  --rx-x: -50%;

  --rx-in: 0px;
  transform: translate(var(--rx-x), 0);
}

.react-pop.top    { inset-block-start: 8%; }
.react-pop.bottom { inset-block-end: 8%; }

.arena-wrap:has(> .arena .game-result, > .arena .game-interval:not([hidden])) .react-pop:not(.beside) { display: none; }
.react-pop.mine   { box-shadow: 0 .35rem 1.4rem rgb(0 0 0 / .22), 0 0 0 3px color-mix(in oklab, var(--rx, var(--accent)) 25%, transparent); }

.react-pop.from-far, .flip .react-pop.from-near { --rx-in: -30cqi; }
.react-pop.from-near, .flip .react-pop.from-far { --rx-in: 30cqi; }

.react-ico  { inline-size: clamp(2.25rem, 14cqi, 5rem); block-size: clamp(2.25rem, 14cqi, 5rem); stroke-width: 1.75; }
.react-word { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 4.4cqi, 1.9rem); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }

@container (max-width: 34rem) {
  .react-pop {
    max-inline-size: 46%; padding: .45rem .7rem; gap: .15rem;
    background: color-mix(in oklab, var(--rx-bg, var(--paper)) 74%, transparent);
    border-width: 1px;
    box-shadow: 0 .2rem .7rem rgb(0 0 0 / .18);
  }
  .react-pop.top    { inset-block-start: 5%; }
  .react-pop.bottom { inset-block-end: 5%; }
  .react-ico  { inline-size: clamp(1.5rem, 9cqi, 2.75rem); block-size: clamp(1.5rem, 9cqi, 2.75rem); }
  .react-word { font-size: clamp(.8125rem, 3.2cqi, 1.1rem); }
}

.react-pop.show { animation: var(--rx-motif, react-pop) 1.8s linear forwards, rx-fly 1.8s linear forwards; }

@keyframes rx-fly {
  0%        { translate: var(--rx-in) 0; animation-timing-function: cubic-bezier(.16, .84, .44, 1); }
  22%, 100% { translate: 0 0; }
}
@keyframes react-pop {
  0%   { opacity: 0; transform: translate(var(--rx-x), 6px) scale(.96); animation-timing-function: ease-out; }
  9%   { opacity: .92; transform: translate(var(--rx-x), 0); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 0); }
}

.react-pop.show[data-key="hi"] { --rx-motif: rx-hi; transform-origin: 20% 100%; }
@keyframes rx-hi {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) rotate(0); animation-timing-function: ease-out; }
  8%   { opacity: .92; transform: translate(var(--rx-x), 0) rotate(0); animation-timing-function: ease-in-out; }
  16%  { transform: translate(var(--rx-x), 0) rotate(10deg); }
  24%  { transform: translate(var(--rx-x), 0) rotate(-7deg); }
  32%  { transform: translate(var(--rx-x), 0) rotate(8deg); }
  40%  { transform: translate(var(--rx-x), 0) rotate(-3deg); }
  48%  { transform: translate(var(--rx-x), 0) rotate(0); }
  80%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(calc(var(--rx-x) + 14px), 0); }
}

.react-pop.show[data-key="well"] { --rx-motif: rx-well; }
@keyframes rx-well {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  18%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in-out; }
  24%  { transform: translate(var(--rx-x), 0) scale(1.04) rotate(-3deg); }
  30%  { transform: translate(var(--rx-x), 0) scale(1.04) rotate(3deg); }
  36%  { transform: translate(var(--rx-x), 0) scale(1) rotate(0); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -12px); }
}

.react-pop.show[data-key="luck"] { --rx-motif: rx-luck; }
@keyframes rx-luck {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.7); filter: brightness(1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  18%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  40%  { filter: brightness(1.15); }
  60%  { filter: brightness(1); }
  74%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 0) scale(1.12); filter: brightness(1.3); }
}
.react-pop[data-key="luck"]::before, .react-pop[data-key="luck"]::after {
  content: ""; position: absolute; inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: currentColor; pointer-events: none; opacity: 0;
  box-shadow: 0 -7px 0 -1px currentColor, 0 7px 0 -1px currentColor, -7px 0 0 -1px currentColor, 7px 0 0 -1px currentColor;
  inset-block-start: -6px; inset-inline-end: -4px;
}
.react-pop[data-key="luck"]::after { inset-block-start: auto; inset-inline-end: auto; inset-block-end: -5px; inset-inline-start: -6px; }
.react-pop.show[data-key="luck"]::before { animation: rx-sparkle 1.8s both; }
.react-pop.show[data-key="luck"]::after  { animation: rx-sparkle 1.8s .12s both; }
@keyframes rx-sparkle {
  0%, 15%   { opacity: 0; transform: scale(0) rotate(0); }
  30%       { opacity: 1; transform: scale(1) rotate(45deg); }
  45%       { opacity: .4; transform: scale(.5) rotate(90deg); }
  60%       { opacity: 1; transform: scale(.9) rotate(135deg); }
  80%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}

.react-pop.show[data-key="oops"] { --rx-motif: rx-oops; }
@keyframes rx-oops {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) rotate(0); animation-timing-function: ease-out; }
  6%   { opacity: .92; transform: translate(calc(var(--rx-x) - 5px), 0) rotate(-1deg); }
  12%  { transform: translate(calc(var(--rx-x) + 4px), 0) rotate(1deg); }
  18%  { transform: translate(calc(var(--rx-x) - 3px), 0); }
  24%  { transform: translate(calc(var(--rx-x) + 2px), 0); }
  30%  { transform: translate(var(--rx-x), 0) rotate(-2deg); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0) rotate(-2deg); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 8px) rotate(-2deg); }
}

.react-pop.show[data-key="hard"] { --rx-motif: rx-hard; transform-origin: 50% 0; }
@keyframes rx-hard {
  0%   { opacity: 0; transform: translate(var(--rx-x), -6px) rotate(0); filter: blur(2px); animation-timing-function: ease-out; }
  16%  { opacity: .92; transform: translate(var(--rx-x), 0) rotate(0); filter: blur(0); animation-timing-function: ease-in-out; }
  30%  { transform: translate(var(--rx-x), 0) rotate(3deg); }
  46%  { transform: translate(var(--rx-x), 0) rotate(-3deg); }
  60%  { transform: translate(var(--rx-x), 0) rotate(0); }
  78%  { opacity: .92; filter: blur(0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 2px); filter: blur(4px); }
}

.react-pop.show[data-key="thanks"] { --rx-motif: rx-thanks; }
@keyframes rx-thanks {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.85); animation-timing-function: ease-out; }
  8%   { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  14%  { transform: translate(var(--rx-x), 0) scale(1.12); }
  20%  { transform: translate(var(--rx-x), 0) scale(1); }
  26%  { transform: translate(var(--rx-x), 0) scale(1.08); }
  34%  { transform: translate(var(--rx-x), 0) scale(1); }
  70%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in; }
  85%  { transform: translate(calc(var(--rx-x) + 3px), -10px) scale(.98); }
  100% { opacity: 0; transform: translate(calc(var(--rx-x) - 2px), -22px) scale(.96); }
}

.react-pop.show[data-key="gg"] { --rx-motif: rx-gg; }
@keyframes rx-gg {
  0%   { opacity: 0; transform: translate(var(--rx-x), 14px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  18%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 0) scale(.9); }
}
.react-pop[data-key="gg"]::before, .react-pop[data-key="gg"]::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 40%; inline-size: 3px; block-size: 3px;
  border-radius: 1px; background: transparent; pointer-events: none; opacity: 0;
  box-shadow: -18px -14px 0 var(--rx), 14px -18px 0 #f76b15, 22px -4px 0 #46a758, -24px 2px 0 #ffc53d, 4px -24px 0 #e93d82;
}
.react-pop[data-key="gg"]::after { transform: rotate(180deg); }
.react-pop.show[data-key="gg"]::before { animation: rx-confetti 1.8s both; }
.react-pop.show[data-key="gg"]::after  { animation: rx-confetti 1.8s .08s both; }
@keyframes rx-confetti {
  0%, 14%   { opacity: 0; transform: scale(.2) rotate(0); }
  24%       { opacity: 1; transform: scale(1) rotate(20deg); }
  48%       { opacity: .8; transform: scale(1.4) translateY(6px) rotate(60deg); }
  70%, 100% { opacity: 0; transform: scale(1.6) translateY(16px) rotate(90deg); }
}

.react-pop.show[data-key="strong"] { --rx-motif: rx-strong; transform-origin: 50% 100%; }
@keyframes rx-strong {
  0%   { opacity: 0; transform: translate(var(--rx-x), 8px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  14%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1.12); animation-timing-function: ease-in-out; }
  22%  { transform: translate(var(--rx-x), 0) scale(.98); }
  30%  { transform: translate(var(--rx-x), 0) scale(1); }
  76%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); filter: brightness(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -10px) scale(1.06); filter: brightness(1.25); }
}

.react-pop.show[data-key="fun"] { --rx-motif: rx-fun; transform-origin: 50% 100%; }
@keyframes rx-fun {
  0%   { opacity: 0; transform: translate(var(--rx-x), 6px) scale(.9); animation-timing-function: ease-out; }
  10%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in-out; }
  20%  { transform: translate(var(--rx-x), -5px) scale(1.03); }
  30%  { transform: translate(var(--rx-x), 0) scale(1); }
  40%  { transform: translate(var(--rx-x), -3px) scale(1.02); }
  50%  { transform: translate(var(--rx-x), 0) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -10px); }
}

.react-pop.show[data-key="respect"] { --rx-motif: rx-respect; transform-origin: 50% 0; }
@keyframes rx-respect {
  0%   { opacity: 0; transform: translate(var(--rx-x), -4px) scale(1); animation-timing-function: ease-out; }
  12%  { opacity: .92; transform: translate(var(--rx-x), 0) rotate(6deg); animation-timing-function: ease-in-out; }
  28%  { transform: translate(var(--rx-x), 0) rotate(0); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 4px) scale(.97); }
}

.react-pop.show[data-key="clap"] { --rx-motif: rx-clap; }
@keyframes rx-clap {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.9); animation-timing-function: ease-out; }
  8%   { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  14%  { transform: translate(var(--rx-x), 0) scale(1.06, .96); }
  20%  { transform: translate(var(--rx-x), 0) scale(.96, 1.04); }
  26%  { transform: translate(var(--rx-x), 0) scale(1.06, .96); }
  32%  { transform: translate(var(--rx-x), 0) scale(.98, 1.02); }
  38%  { transform: translate(var(--rx-x), 0) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -6px); }
}
.react-pop[data-key="clap"]::before, .react-pop[data-key="clap"]::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 40%; inline-size: 3px; block-size: 3px;
  border-radius: 1px; background: transparent; pointer-events: none; opacity: 0;
  box-shadow: -18px -14px 0 var(--rx), 14px -18px 0 #f76b15, 22px -4px 0 #46a758, -24px 2px 0 #ffc53d, 4px -24px 0 #e93d82;
}
.react-pop[data-key="clap"]::after { transform: rotate(180deg); }
.react-pop.show[data-key="clap"]::before { animation: rx-confetti 1.8s both; }
.react-pop.show[data-key="clap"]::after  { animation: rx-confetti 1.8s .08s both; }

.react-pop.show[data-key="cry"] { --rx-motif: rx-cry; }
@keyframes rx-cry {
  0%   { opacity: 0; transform: translate(var(--rx-x), -6px); animation-timing-function: ease-out; }
  10%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in-out; }
  24%  { transform: translate(var(--rx-x), 3px) rotate(-2deg); }
  30%  { transform: translate(var(--rx-x), 3px) rotate(2deg); }
  36%  { transform: translate(var(--rx-x), 3px) rotate(0); }
  76%  { opacity: .92; transform: translate(var(--rx-x), 3px); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 8px) scale(.96); }
}

.react-pop.show[data-key="brb"] { --rx-motif: rx-brb; }
@keyframes rx-brb {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.96); animation-timing-function: ease-out; }
  10%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  76%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(calc(var(--rx-x) + 8px), 0) scale(.94); }
}

.react-pop.show[data-key="congrats"] { --rx-motif: rx-congrats; transform-origin: 50% 100%; }
@keyframes rx-congrats {
  0%   { opacity: 0; transform: translate(var(--rx-x), 12px) scale(.8); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  18%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1.08); animation-timing-function: ease-in-out; }
  28%  { transform: translate(var(--rx-x), 0) scale(1); }
  74%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); filter: brightness(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -6px) scale(1.04); filter: brightness(1.25); }
}

.react-pop.show[data-key="hurry"] { --rx-motif: rx-hurry; transform-origin: 50% 100%; }
@keyframes rx-hurry {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.9); animation-timing-function: ease-out; }
  8%   { opacity: .92; transform: translate(var(--rx-x), 0) scale(1) rotate(0); animation-timing-function: linear; }
  14%  { transform: translate(var(--rx-x), 0) rotate(5deg); }
  20%  { transform: translate(var(--rx-x), 0) rotate(-5deg); }
  26%  { transform: translate(var(--rx-x), 0) rotate(4deg); }
  32%  { transform: translate(var(--rx-x), 0) rotate(-3deg); }
  38%  { transform: translate(var(--rx-x), 0) rotate(0); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 0) scale(.96); }
}

.react-pop.show[data-key="lol"] { --rx-motif: rx-lol; }
@keyframes rx-lol {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.85); animation-timing-function: ease-out; }
  8%   { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in-out; }
  14%  { transform: translate(var(--rx-x), -2px) scale(1.04, .96); }
  20%  { transform: translate(var(--rx-x), 1px) scale(.97, 1.03); }
  26%  { transform: translate(var(--rx-x), -2px) scale(1.03, .97); }
  32%  { transform: translate(var(--rx-x), 0) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 4px); }
}

.react-pop.show[data-key="finger"] { --rx-motif: rx-finger; transform-origin: 50% 100%; }
@keyframes rx-finger {
  0%   { opacity: 0; transform: translate(var(--rx-x), 8px) scale(.9); animation-timing-function: ease-out; }
  14%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 6px) scale(.94); }
}

.react-pop.show[data-key="horns"] { --rx-motif: rx-horns; transform-origin: 50% 100%; }
@keyframes rx-horns {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.85) rotate(0); animation-timing-function: ease-out; }
  10%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1) rotate(-8deg); animation-timing-function: ease-in-out; }
  20%  { transform: translate(var(--rx-x), 0) scale(1.04) rotate(8deg); }
  30%  { transform: translate(var(--rx-x), 0) scale(1) rotate(0); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -4px) scale(.96); }
}

.react-pop.show[data-key="lucky"] { --rx-motif: rx-lucky; transform-origin: 50% 100%; }
@keyframes rx-lucky {
  0%   { opacity: 0; transform: translate(var(--rx-x), 4px) scale(.9); filter: brightness(1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  10%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1.1); filter: brightness(1.35); animation-timing-function: ease-out; }
  18%  { transform: translate(var(--rx-x), 0) scale(1); filter: brightness(1); }
  26%  { filter: brightness(1.15); }
  34%  { filter: brightness(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), -6px) scale(.98); }
}

.react-pop.show[data-key="yawn"] { --rx-motif: rx-yawn; transform-origin: 50% 100%; }
@keyframes rx-yawn {
  0%   { opacity: 0; transform: translate(var(--rx-x), 0) scale(.94); animation-timing-function: ease-out; }
  12%  { opacity: .92; transform: translate(var(--rx-x), 0) scale(1); animation-timing-function: ease-in-out; }
  34%  { transform: translate(var(--rx-x), -2px) scale(1.12, 1.06); }
  52%  { transform: translate(var(--rx-x), 3px) scale(1.02, .94); }
  64%  { transform: translate(var(--rx-x), 2px) scale(1); }
  78%  { opacity: .92; transform: translate(var(--rx-x), 2px); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(var(--rx-x), 8px) scale(.96); }
}
@keyframes react-fade {
  0%   { opacity: 0; }
  9%   { opacity: .92; }
  78%  { opacity: .92; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .react-pop.show, .react-pop.show[data-key] { animation-name: react-fade; transform: translate(var(--rx-x), 0); }
  .react-pop.show[data-key]::before, .react-pop.show[data-key]::after { animation: none; opacity: 0; }
}
html.still .react-pop.show, html.still .react-pop.show[data-key] { animation-name: react-fade; transform: translate(var(--rx-x), 0); }
html.still .react-pop.show[data-key]::before, html.still .react-pop.show[data-key]::after { animation: none; opacity: 0; }

.pcard-bubble {
  position: absolute; z-index: 2;
  inset-block-start: 3px; inset-inline: 0; margin-inline: auto;
  inline-size: max-content; max-inline-size: calc(100% - 1rem);
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 0 .45rem; border-radius: 1rem;
  background: var(--rx-bg, var(--paper)); color: var(--rx-ink, var(--ink)); border: 1px solid var(--rx, var(--line));
  font-size: .75rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none;
}
.pcard-bubble .icon { inline-size: .9rem; block-size: .9rem; margin: 0; flex: none; }
.pcard-bubble.show { animation: react-bubble 3s ease-out forwards; }
@keyframes react-bubble { 0% { opacity: 0; } 6% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

html.noreact .react-layer, html.noreact .pcard:not(.mine) .pcard-bubble { display: none; }

@media (forced-colors: active) {
  .react-pop { border: 2px solid CanvasText; background: Canvas; box-shadow: none; }
  .pcard-bubble { border: 1px solid CanvasText; background: Canvas; }
  .react-cool { background: Highlight; }

  .react-row.cooling .react-grid button,
  .react-row.offline .react-grid button,
  .react-row.paused .react-grid button,
  .react-grid button[aria-disabled="true"] { border-style: dashed; }
}

@media (max-width: 1500px) {
  .react-row { padding-block-end: 0; }
  .react-open {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    inline-size: 100%; min-block-size: 2.75rem; padding: .25rem .3rem;
    font: inherit; font-size: .75rem; font-weight: 500; line-height: 1; color: var(--ink-2);
    background: transparent; border: 1px solid var(--line); border-radius: var(--r-2);
    cursor: pointer; box-shadow: none;
  }
  .react-open .icon { inline-size: 1.4rem; block-size: 1.4rem; margin: 0; color: inherit; }
  .react-row.open .react-open, .react-open:hover { color: var(--ink); border-color: var(--accent); background: var(--paper); }
  .react-row.cooling .react-open, .react-row.offline .react-open { opacity: .45; }
  .react-grid { display: none; }
  .react-row.open .react-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem;
    position: absolute; inset-inline: 0; inset-block-end: 100%; margin-block-end: .25rem;
    padding: .25rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2);
    box-shadow: 0 .25rem 1rem rgb(0 0 0 / .28); z-index: 21;

    max-block-size: min(21rem, 62svh); overflow-y: auto; overscroll-behavior: contain;
  }
  .react-cool { inset-block-end: -.25rem; }
}

@media (max-width: 1500px) and (min-height: 34.01rem) {
  .pcard:has(.react-row.open) { overflow: visible; z-index: 4; }
  .react-row.open .react-grid {
    inset-inline: auto 0;
    inline-size: max-content; min-inline-size: 100%; max-inline-size: calc(100% + 4.5rem);
  }
}

@media (orientation: landscape) and (max-height: 34rem) {
  .react-open { border-color: transparent; }

  .react-row.open .react-grid {
    grid-template-columns: repeat(3, 2.75rem); inset-inline: auto;
    inset-inline-start: calc(50% - 74px); inline-size: max-content;
    max-block-size: min(21rem, 50cqh);
  }
  .react-row .react-grid button span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .react-row .react-grid button { padding: .25rem; }
  .react-row .react-grid button .icon { inline-size: 1.5rem; block-size: 1.5rem; }
  .react-row.counting .react-cool { opacity: .8; }
}

.pcard-chat-wrap { inline-size: 100%; min-inline-size: 0; }
.pcard-chat { inline-size: 100%; border-block-start: 1px solid var(--line); padding-block-start: .25rem; }

.pcard-chat-head {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-block-size: 2.75rem; padding: .25rem .3rem;
  list-style: none; cursor: pointer; border-radius: var(--r-2);
  font-size: .85rem; font-weight: 500; color: var(--ink-2);
}
.pcard-chat-head::-webkit-details-marker { display: none; }
.pcard-chat-head:hover, .pcard-chat[open] > .pcard-chat-head { color: var(--ink); }
.pcard-chat-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pcard-chat-head .icon { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; color: inherit; flex: none; }

.pcard-chat-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--terra); flex: none; }
.pcard-chat-body { display: flex; flex-direction: column; gap: .35rem; padding-block: .25rem .35rem; text-align: start; }
.pcard-chat-meta { display: flex; justify-content: space-between; gap: .5rem; margin: 0; font-size: .75rem; }
.pcard-chat-meta a { color: var(--quiet); text-decoration: underline; text-underline-offset: .15em; }
.pcard-chat-meta a:hover { color: var(--ink); }

.pcard-chat-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
  max-block-size: 220px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pcard-chat-list:empty { display: none; }
.pcard-chat-list li {
  align-self: flex-start; max-inline-size: 88%; min-inline-size: 0;
  display: flex; flex-direction: column; gap: .05rem;
  padding: .3rem .55rem; border-radius: var(--r-2);
  background: var(--paper-3); color: var(--ink);
  font-size: .85rem; line-height: 1.3; overflow-wrap: anywhere;
}
.pcard-chat-list li.mine { align-self: flex-end; background: var(--terra-soft); }
.pcard-chat-list li time { font-family: var(--font-mono); font-size: .75rem; color: var(--quiet); align-self: flex-end; }
.pcard-chat-list li.mine time { color: var(--ink-2); }

.pcard-chat-form { display: flex; gap: .3rem; align-items: stretch; margin: 0; }
.pcard-chat-form input {
  flex: 1 1 0; min-inline-size: 0; min-block-size: 2.75rem;
  padding: .3rem .6rem; font: inherit; font-size: max(16px, .9rem);
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--field-line); border-radius: var(--r-2);
}
.pcard-chat-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pcard-chat-form input:disabled { opacity: .6; }
.pcard-chat-send {
  flex: none; inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: transparent; border: 1px solid var(--field-line); border-radius: var(--r-2);
  cursor: pointer; box-shadow: none;
}
.pcard-chat-send .icon { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; }
[dir="rtl"] .pcard-chat-send .icon { transform: scaleX(-1); }
.pcard-chat-send:hover:not(:disabled), .pcard-chat-send:focus-visible { color: var(--ink); border-color: var(--accent); background: var(--paper); }
.pcard-chat-send:disabled { opacity: .45; cursor: default; }

.pcard-chat.busy .pcard-chat-form { opacity: .6; }
.pcard-chat-foot { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0; font-size: .75rem; line-height: 1.3; }
.pcard-chat-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pcard-chat-count:empty { display: none; }
.pcard-chat-err { color: var(--terra); font-weight: 500; }
.pcard-chat-away { margin: 0; font-size: .75rem; }

.pcard-chat-nojs { display: none; }
html.nojs .pcard-chat-nojs { display: inline; }
html.nojs .pcard-chat-note, html.nojs .pcard-chat-count { display: none; }

.pcard-chat-muted { display: none; margin: 0; font-size: .75rem; }
html.nochat .pcard-chat-muted { display: block; }
html.nochat .pcard-chat-list, html.nochat .pcard-chat-form, html.nochat .pcard-chat-foot, html.nochat .pcard-chat-away { display: none; }
html.nochat .pcard-chat-dot, html.nochat [data-chat-new] { display: none; }

@media (forced-colors: active) {
  .pcard-chat-dot { background: Highlight; border: 1px solid CanvasText; }
  .pcard-chat-list li { border: 1px solid CanvasText; }
  .pcard-chat-list li.mine { border-style: double; }
  .pcard-chat-send:disabled, .pcard-chat-form input:disabled { border-style: dashed; }
}

@media (max-width: 1500px) {
  .pcard-chat-list { max-block-size: 120px; }
  .pcard-chat-list li { font-size: .8rem; padding: .25rem .45rem; max-inline-size: 94%; }
  .pcard-chat-form input { padding-inline: .45rem; }
  .pcard-chat-meta { flex-direction: column; gap: .1rem; }
}

@media (orientation: landscape) and (max-height: 34rem) {
  .pcard-chat { border-block-start: 0; padding-block-start: 0; }
  .pcard-chat-head {
    flex-direction: column; gap: .15rem; padding: .25rem;
    font-size: .75rem; line-height: 1;
    border: 1px solid transparent;
  }
  .pcard-chat-head .icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .pcard-chat[open] > .pcard-chat-head { border-color: var(--terra); }

  .pcard-chat-head { position: relative; }
  .pcard-chat-dot { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; }
  .pcard-chat-body {
    position: fixed; z-index: 24;
    inset-inline: calc(var(--duel-card) + var(--duel-gap) + 6px);
    inset-block-end: 6px;
    max-block-size: 40svh; overflow: hidden;
    padding: var(--s-2) var(--s-3);
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3) var(--r-3) 0 0;
    box-shadow: 0 -6px 20px rgb(0 0 0 / .28);
  }
  .pcard-chat-meta { flex-direction: row; }
  .pcard-chat-list { max-block-size: none; flex: 1 1 auto; min-block-size: 0; }
  .pcard-chat-list li { max-inline-size: 70%; }
  .pcard-chat-foot .pcard-chat-note { display: none; }
}

@media print { .pcard-chat-wrap { display: none; } }

.arena.browsing .board { outline: 3px dashed var(--accent); outline-offset: -3px; }

.arena.browsing .hud { display: none; }
.duel:has(.arena.browsing) .duel-toolrow,
.duel:has(.arena.browsing) .duel-hint { display: none; }
.browse {
  grid-column: 2;
  margin: 0; padding: .15rem .5rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem .6rem;
  font-size: .9rem;
  border: 1px solid var(--accent); border-radius: var(--r-2);
  background: var(--panel); color: var(--ink);
}
.browse[hidden] { display: none; }

.browse a { font-weight: 600; min-block-size: 2rem; display: inline-flex; align-items: center; }

.browse-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 2.75rem; min-block-size: 2.75rem;
  margin: 0; padding: 0; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem;
  cursor: pointer; box-shadow: none;
}
.browse-step[aria-disabled="true"] { opacity: .35; cursor: default; }
[dir="rtl"] .browse-glyph { display: inline-block; transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .browse-step:not([aria-disabled="true"]):hover { background: color-mix(in oklab, var(--accent) 14%, transparent); }
}

.duel:has(.arena.browsing) .pcard { opacity: .85; }

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

.history-head { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); margin: 0; flex: none; }
.history-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;

  flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--panel);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .85rem;
}
.history-list li { margin: 0; }

.history-list a, .history-list .ev-row {
  display: grid; grid-template-columns: 2.2em 1.4em 2.6em minmax(0, 1fr);
  align-items: center; column-gap: .4em;
  padding: .3rem .6rem; min-block-size: 2rem;
  color: var(--ink); text-decoration: none;
  border-inline-start: 3px solid transparent;
}
.history-list a:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.history-list a[aria-current] { border-inline-start-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.history-list li:last-child a { font-weight: 600; }
.history-list .n { color: var(--quiet); text-align: end; }
.history-list .ck { --ck-size: 1em; }
.history-list .d { color: var(--quiet); }
.history-list .m { overflow-wrap: anywhere; }
.history-list .ev-row { color: var(--quiet); font-style: italic; }
.history-hint { margin: 0; font-size: .75rem; text-align: center; flex: none; }
.history-list .now a { font-weight: 600; }

.history-page { display: flex; flex-direction: column; gap: var(--s-4); max-inline-size: 46rem; margin-inline: auto; }
.history-page .history-board { inline-size: 100%; }
.history-games { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.history-games a, .history-games b { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.history-caption { margin: 0; font-size: 1.05rem; }
.history-nav { margin: 0; display: flex; justify-content: space-between; gap: var(--s-3); }
.history-nav a:only-child { margin-inline-start: auto; }
.history-nav a[rel="prev"]:only-child { margin-inline-start: 0; margin-inline-end: auto; }
.history-page .history-list { max-block-size: none; }

@media (max-width: 1500px) {
  .duel {
    --duel-card: 190px; --duel-gap: 16px; --duel-pad: 12px;
    --duel-tools: 3.6rem; --duel-under: .4rem;
    --avatar: 48px; --duel-name: 1.125rem; --duel-time: 1.75rem;
    --duel-ring: 7.75rem; --duel-score: 3.25rem; --duel-say: .95rem;
  }

  .pcard { padding: 1.4rem var(--s-3) var(--s-3); gap: var(--s-2); }
  .pcard-clock { margin-block-start: var(--s-1); }
  .pcard-meta { font-size: .85rem; }

  .pcard-pip { flex-direction: column; gap: .1rem; }
  .pcard-gap::before { content: none; }
  .duel-tool { min-inline-size: 3.5rem; }
}

.duel-head-short, .duel-menu, .duel-sheet-extra, .duel-rotate { display: none; }

@media (orientation: landscape) and (max-width: 80rem) and (min-height: 34.01rem) {
  .duel {

    --duel-card: 176px; --duel-gap: 14px; --duel-pad: 10px;
    --avatar: 44px; --duel-name: 1rem; --duel-time: 1.5rem;
    --duel-ring: 6.5rem; --duel-score: 2.75rem; --duel-say: .9rem;
  }
  .pcard { padding: 1.4rem var(--s-2) var(--s-3); }
  .pcard .seat-you, .pcard .badge-bot { font-size: .75rem; }
  .duel-tool { min-inline-size: 3.25rem; }
}

@media (orientation: portrait) {
  .duel {
    --avatar: 44px; --duel-ring: 4.25rem; --duel-time: 1rem;
    --duel-score: 2.25rem; --duel-name: 1.125rem; --duel-say: .95rem;
    --duel-tools: 3.6rem; --duel-under: .4rem;
    grid-template-columns: minmax(0, 1fr);

    grid-template-rows: auto auto auto auto;

    align-content: safe center;
    overflow-y: auto; overscroll-behavior: contain;
    row-gap: var(--s-2); column-gap: 0;
    padding: var(--s-2);
  }
  .pcard, .pcard.opp, .pcard.me, .duel-stage, .duel-tools { grid-column: 1; grid-row: auto; }
  .pcard { max-block-size: none; overflow: visible; }

  .duel-tools { inline-size: 100%; min-block-size: auto; }

  .duel-stage {
    inline-size: min(100%, max(15rem, calc((100svh - 22rem) * 1.36)));
    inline-size: min(100%, max(15rem, calc((100cqh - 2 * 6.75rem - var(--duel-head) - var(--duel-tools) - 4 * var(--duel-under)) * 1.36)));
  }
  .pcard, .pcard.opp, .pcard.me {
    justify-self: stretch; inline-size: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "av name  score clock"
      "av meta  score clock"
      "av say   pip   clock";
    align-items: center; justify-items: start;
    column-gap: var(--s-3); row-gap: .15rem;
    padding: var(--s-2) var(--s-3);
    text-align: start;
  }
  .pcard-avatar { grid-area: av; margin: 0; }
  .pcard-name { grid-area: name; inline-size: auto; max-inline-size: 100%; }
  .pcard-meta { grid-area: meta; justify-content: flex-start; }
  .pcard-say { grid-area: say; }
  .pcard-score { grid-area: score; justify-self: end; align-self: end; }
  .pcard-pip { grid-area: pip; justify-self: end; justify-content: flex-end; flex-direction: row; column-gap: .6rem; }

  .pcard-gap::before { content: "·"; }
  .pcard-clock { grid-area: clock; margin: 0; }
  .pcard-since { grid-column: 2 / -1; }

  .pcard-react, .pcard .claim, .pcard .guestmail, .pcard-chat-wrap { grid-column: 1 / -1; justify-self: stretch; }

  .pcard-bubble { inset-block-start: 0; translate: 0 -50%; }
}

@media (orientation: portrait) and (max-width: 40rem) {
  .duel {
    --avatar: 40px; --duel-ring: 3.75rem; --duel-time: .9rem;
    --duel-score: 2rem; --duel-name: 1rem; --duel-say: .9rem;
  }

  .pcard { padding: .75rem var(--s-2) var(--s-2); column-gap: var(--s-2); }
  .pcard-meta { font-size: .8rem; }
  .pcard .seat-you, .pcard .badge-bot { font-size: .75rem; }
  .pcard-score span, .pcard-pip { font-size: .75rem; }
  .duel-tools { grid-template-columns: minmax(0, 1fr); }

  .duel-toolrow { grid-column: 1; gap: var(--s-1); flex-wrap: wrap; }
  .duel-toolrow > * { flex: 1 1 22%; }
  .duel-toolrow:has(> :nth-child(5 of :not([hidden]))):not(:has(> :nth-child(7 of :not([hidden])))) > * { flex-basis: 30%; }
  .duel-tool { min-inline-size: 0; padding-inline: .25rem; }
  .duel-toolrow form > .duel-tool, .duel-toolrow details > summary { inline-size: 100%; }
  .duel-tool.danger { margin-inline-start: 0; }
  .duel-tool .word-long { display: none; }
  .duel-tool .word-short { display: inline; }

  .pcard, .pcard.opp, .pcard.me {
    grid-template-columns: auto minmax(5rem, 1fr) auto auto;
    grid-template-areas:
      "av name  score clock"
      "av meta  score clock"
      "av say   say   clock"
      "av pip   pip   clock";
  }
  .pcard-name {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-height: 1.15; overflow-wrap: anywhere;
    overflow: hidden; padding-block-start: .35em; margin-block-start: -.35em;
  }

  .pcard-name:has(> a) { overflow: visible; }
  .pcard-name a > bdi {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; padding-block-start: .35em; margin-block-start: -.35em;
  }
  .pcard-pip { justify-self: start; justify-content: flex-start; }

  .arena:has(> .game-result, > .game-interval:not([hidden])) { aspect-ratio: auto; }
  .arena:has(> .game-result, > .game-interval:not([hidden])) > .board { block-size: auto; }
  .arena:has(> .game-result, > .game-interval:not([hidden])) > .hud { inset-block-end: auto; aspect-ratio: 1.36; }
  .arena > .game-result, .arena > .game-interval {
    position: relative; inset: auto; margin: var(--s-2) 0 0;
    block-size: auto; max-block-size: none; max-inline-size: none; overflow: visible;
    display: flex; flex-direction: column;
  }
  .arena > .game-result > .result-meta { order: 1; }
  .arena > .game-result > .result-links,
  .arena > .game-result > .pwa-hint,
  .arena > .game-result > .keep-note { order: 2; }

  .duel [data-presence] { display: none; }

  .saychip { translate: 0 calc(-60% - var(--duel-under)); }
  .duel-stage:has(.saychip:not([hidden])) > .duel-head { opacity: 0; }

  .duel-rotate:not([hidden]) {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 40;
    padding: var(--s-5); text-align: center;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: blur(3px);
  }
  .duel-rotate-box { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); max-inline-size: 18rem; }
  .duel-rotate h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
  .duel-rotate p { margin: 0; font-size: .95rem; }
  .duel-rotate-phone {
    display: block; position: relative;
    inline-size: 2.25rem; block-size: 4rem;
    border: 3px solid var(--terra); border-radius: .6rem;
    animation: rotate-phone 2.8s ease-in-out infinite;
  }
  .duel-rotate-phone::after {
    content: ""; position: absolute; inset-inline: 30%; inset-block-end: .3rem;
    block-size: 3px; border-radius: 2px; background: var(--terra);
  }
  .duel-rotate-stay { min-block-size: 2.75rem; padding: .5rem 1.1rem; }
}
@keyframes rotate-phone {
  0%, 15%  { transform: rotate(0); }
  55%, 80% { transform: rotate(-90deg); }
  100%     { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .duel-rotate-phone { animation: none; transform: rotate(-90deg); }
}
html.still .duel-rotate-phone { animation: none; transform: rotate(-90deg); }

@media (orientation: landscape) and (max-height: 34rem) {
  .duel {

    --duel-card: clamp(6rem, calc((100vw - (100svh - 12px) * 1.36 - 2 * 8px - 2 * 6px) / 2), 10rem);
    --duel-gap: 8px; --duel-pad: 6px;
    --duel-head: 0px; --duel-tools: 0px; --duel-under: 0px;
    --avatar: 32px; --duel-name: .8rem; --duel-time: 1.125rem;
    --duel-ring: 3.5rem; --duel-score: 1.75rem; --duel-say: .75rem;

    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    align-items: stretch;
  }
  body:has(.game) .topbar { display: none; }
  .duel-stage {
    inline-size: min(100%, calc((100svh - 12px) * 1.36));
    inline-size: min(100%, calc(100cqh * 1.36));
    align-self: center;
  }
  .duel-head { display: none; }

  .pcard {

    justify-content: safe center; gap: 4px;
    padding: 1.75rem 4px 3.5rem;
    border-radius: var(--r-2);
  }
  .pcard > * { flex: none; }

  .pcard .guestmail { display: none; }
  .pcard.opp { padding-block-end: var(--s-2); }
  .pcard.me { padding-block-start: var(--s-2); }

  .pcard.opp .pcard-bubble { inset-block-start: 1.5rem; }
  .pcard-name {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-height: 1.15; overflow-wrap: anywhere;
    overflow: hidden; padding-block-start: .35em; margin-block-start: -.35em;
  }
  .pcard-name:has(> a) { overflow: visible; }
  .pcard-name a > bdi {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; padding-block-start: .35em; margin-block-start: -.35em;
  }
  .pcard-meta { font-size: .75rem; gap: 2px 4px; }

  .duel .pcard-side.you { font-size: var(--duel-name); --ck-size: 1.2em; }

  .pcard .seat-you, .pcard .badge-bot { font-size: .75rem; }
  .pcard-meta .pstat { display: none; }

  .pcard-clock { --duel-ring: 4rem; margin-block-start: 2px; }
  .pcard-time .clock { font-size: 1rem; }
  .pcard.low .pcard-clock { margin-block-end: 1.1rem; }

  .pcard-say { text-wrap: balance; justify-content: center; }
  .pcard-say .icon { display: none; }
  .pcard-say.wait { font-size: .75rem; }
  .pcard-score { gap: .3rem; }
  .pcard-score span { font-size: .75rem; }

  .pcard-since { display: none; }
  .pcard-pip {
    flex-direction: column; flex-wrap: nowrap; gap: .05rem;
    font-size: .75rem; line-height: 1.25;
  }
  .pcard-pip .statwhat { display: none; }
  .pcard-gap::before { content: none; }

  .duel-head-short {
    display: flex; justify-content: center; align-items: baseline; gap: .2rem;
    position: absolute; inset-block-start: 6px; inset-inline: 3px;
    margin: 0; line-height: 1;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 1rem; font-weight: 600; color: var(--brass);
  }

  .duel-head-short .dhs-score { display: inline-flex; align-items: baseline; gap: .2rem; }
  .duel-head-short .score-sep, .duel-head-short span { color: var(--quiet); font-weight: 400; }
  .duel-head-short span { font-size: .75rem; font-family: var(--font-body, inherit); }

  .pcard-talk { display: flex; flex-wrap: wrap; gap: 4px; align-self: stretch; }
  .pcard-talk > * { flex: 1 1 0; min-inline-size: 0; }
  .pcard-talk > .claim, .pcard-talk > .guestmail { flex-basis: 100%; order: 1; }
  .pcard-talk > .pcard-react:not(:has(.react-row)) { display: none; }

  .pcard-talk:has(> .pcard-chat-wrap) .react-row.open .react-grid { inset-inline-start: calc(100% + 2px - 74px); }
  .pcard.me:has(> .duel-menu) { padding-block-end: 6px; }
  .pcard.me:has(> .duel-menu)::before { content: ""; margin-block-end: auto; }
  .duel-menu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;

    position: sticky; inset-block-end: max(0px, calc(env(safe-area-inset-bottom) - 6px)); z-index: 1;
    align-self: stretch; margin-block-start: auto;
    min-block-size: 2.75rem; padding: .25rem;
    background: var(--paper); color: var(--ink-2);
    border: 1px solid var(--line-2); border-radius: var(--r-2);
    font: inherit; font-size: .75rem; font-weight: 600; line-height: 1;
    cursor: pointer;

    box-shadow: 0 6px 0 var(--paper-2), 0 -.9rem .7rem -.2rem var(--paper-2);
  }
  .duel-menu .icon { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; }
  .duel-menu[aria-expanded="true"] { border-color: var(--terra); color: var(--ink); }
  html.nojs .duel-menu { display: none; }

  .duel-tools { display: none; }

  html.nojs .duel-tools { display: flex; flex-direction: column; gap: var(--s-2); }

  .duel:not(.sheet-open):has(.arena.browsing) .duel-tools {
    display: grid; position: absolute; z-index: 8;

    grid-area: 1 / 2 / -1 / 3; inset-inline: 0; margin-inline: auto;
    inset-block-start: 50%; transform: translateY(-50%);
    min-block-size: 0; column-gap: 0;
    pointer-events: none;
  }
  .duel:not(.sheet-open):has(.arena.browsing) .duel-tools > * { display: none; }
  .duel:not(.sheet-open):has(.arena.browsing) .duel-tools > .browse:not([hidden]) {
    display: flex; pointer-events: auto;
    padding: 0 .3rem; gap: .1rem .4rem; font-size: .75rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / .3);
  }
  .duel.sheet-open .duel-tools {
    display: flex; flex-direction: column; gap: var(--s-2);
    position: fixed; z-index: 30; inset-block-end: 0;

    inline-size: auto;
    inset-inline: calc(var(--duel-card) + var(--duel-gap) + 6px);
    min-block-size: 0; max-block-size: 60svh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-2) max(var(--s-3), env(safe-area-inset-right)) max(var(--s-2), env(safe-area-inset-bottom)) max(var(--s-3), env(safe-area-inset-left));
    background: var(--paper-2);
    border-block-start: 1px solid var(--line); border-radius: var(--r-3) var(--r-3) 0 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / .28);
  }

  .duel.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / .35); }
  .duel-toolrow { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-1); }
  .duel-tool { min-inline-size: 4.5rem; flex: 1 1 4.5rem; font-size: .75rem; padding: .35rem .25rem; }
  .duel-tool .word-long { display: none; }
  .duel-tool .word-short { display: inline; }

  .duel-tool > span {
    white-space: normal; overflow: visible; text-align: center;
    overflow-wrap: break-word; hyphens: auto; line-height: 1.15;
  }
  .duel-tool.danger { margin-inline-start: var(--s-3); }
  .duel-toolrow form, .duel-toolrow details { flex: 1 1 4.5rem; }
  .duel-toolrow form > .duel-tool, .duel-toolrow details > summary { inline-size: 100%; }

  .duel-toolrow details { flex-wrap: wrap; }
  .duel-toolrow details[open] { flex-basis: 100%; }
  .duel-toolrow details[open] > summary { flex-basis: 100%; }
  .duel-more-body, .duel-toolrow .resign-box {
    position: static; transform: none; flex: 1 1 100%;
    inline-size: 100%; max-block-size: none; overflow: visible;
    margin-block-start: var(--s-1); box-shadow: none;
  }
  .duel-toolrow .resign-box { inline-size: 100%; }
  .duel-hint { display: none; }

  .duel-sheet-extra {
    display: flex; flex-wrap: wrap; gap: var(--s-1);
    padding-block-start: var(--s-2); border-block-start: 1px solid var(--line);
  }

  .duel-sheet-extra .duel-tool { white-space: normal; }
  .duel-sheet-extra .duel-tool > span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    text-align: center; line-height: 1.15;
  }
  .duel-theme { display: contents; }
  .duel-theme [aria-current="true"] { display: none; }
  body:has(.soundbox[hidden]) [data-sound-proxy],
  body:has(.topbar [data-fullscreen][hidden]) [data-fullscreen-proxy] { display: none; }
  body:has(.soundbox.muted) .snd-on, body:not(:has(.soundbox.muted)) .snd-off { display: none; }
}

@media (orientation: landscape) and (max-height: 23rem) {
  .pcard { gap: 2px; }
  .pcard.me { padding-block-start: 4px; }
}

@media (max-width: 34rem) {

  .duel { padding-inline: 0; }

  .duel-head { padding-inline: var(--s-2); }
}

.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.hud button, .hud a[href], .hud summary, .hud input, .hud select, .hud label { pointer-events: auto; }

.hud-dice {
  position: absolute; inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  --die-size: clamp(1.5rem, 7vw, 3.6rem);
  --die-size: clamp(1.5rem, 6.6cqi, 3.6rem);
}

.hud-dice.side-l { left: 22.4%; }
.hud-dice.side-r { left: 70.4%; }

.tray { display: flex; align-items: center; justify-content: center; }
.tray.spent { opacity: .42; filter: saturate(.5); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .tray.blocked { animation: dice-blocked 2.6s var(--ease-standard) both; }
}
@keyframes dice-blocked {
  0%, 30%   { opacity: 1;   filter: none; }
  38%       { opacity: .42; filter: saturate(.5); }
  48%       { opacity: 1;   filter: none; }
  58%       { opacity: .42; filter: saturate(.5); }
  68%       { opacity: 1;   filter: none; }
  78%, 100% { opacity: .42; filter: saturate(.5); }
}

.tray.blocked .dice-roll {
  outline: 2px dashed var(--ink-2);
  outline-offset: .3em;
  border-radius: 7px;
}

.hud-act {
  position: absolute; inset-block-start: 50%; left: 70.4%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: stretch; gap: .35rem;
  inline-size: max-content;
  min-inline-size: clamp(6.5rem, 26vw, 12rem);
  min-inline-size: clamp(6.5rem, 26cqi, 12rem);
  max-inline-size: 40cqi;
}
.hud-act form { display: flex; }
.hud-act .act {
  inline-size: 100%;
  min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: clamp(.8rem, 2.6cqi, 1rem);
  font-weight: 600;
  padding: .4rem .6rem;
  border-radius: var(--r-2);
  box-shadow: 0 2px 6px rgb(0 0 0 / .3);
}
.hud-act .act .icon { margin: 0; }

@media (orientation: landscape) {
  @container arena (max-width: 26rem) {
    .hud-act { min-inline-size: clamp(5.5rem, 30cqi, 8rem); gap: .25rem; }
    .hud-act .act { padding: .25rem .4rem; font-size: .78rem; }
  }
}

.arena.must-roll .hud-act .act-roll { box-shadow: 0 0 0 3px color-mix(in oklab, var(--terra) 40%, transparent), 0 2px 6px rgb(0 0 0 / .3); }

.hud-wait {
  position: absolute; inset-block-start: 62%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; text-align: center; text-wrap: balance;
  max-inline-size: clamp(9rem, 60cqi, 20rem);
  font-size: clamp(.78rem, 2.6cqi, 1rem);
  padding: .45em .85em; border-radius: var(--r-3);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  box-shadow: var(--lift);
}

.tap-hint {
  pointer-events: none;

  inset-block-start: 50%; left: 26%;
  max-inline-size: clamp(7rem, 30cqi, 15rem);
  z-index: 1;
}

.hud-cube {
  position: absolute; left: 46.4%;
  transform: translate(-50%, -50%);
  inline-size: clamp(1.5rem, 6vw, 2.8rem);
  inline-size: clamp(1.5rem, 5.6cqi, 2.8rem);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18%;
  background: var(--die-face); color: var(--die-pip);
  border: 1px solid var(--die-edge);
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.7rem, 2.6cqi, 1.2rem);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35);
  cursor: default;
}
.hud-cube.cube-mid { inset-block-start: 50%; }

.hud-cube.cube-top, .hud-cube.cube-bottom { left: 94.6%; }
.hud-cube.cube-top { inset-block-start: 12%; }
.hud-cube.cube-bottom { inset-block-start: 88%; }
.arena:has(.hud-cube.cube-top) .half.top .board-off {
  padding-block-start: calc(6.2cqi + clamp(1.5rem, 5.6cqi, 2.8rem) / 2 + .6cqi);
}
.arena:has(.hud-cube.cube-bottom) .half.bottom .board-off {
  padding-block-end: calc(6.2cqi + clamp(1.5rem, 5.6cqi, 2.8rem) / 2 + .6cqi);
}

.flip ~ .hud .hud-cube { left: 53.6%; }
.flip ~ .hud .hud-cube:is(.cube-top, .cube-bottom) { left: 5.4%; }
.flip ~ .hud .hud-undo { left: max(5.4%, 1.375rem); }
.flip ~ .hud :is(.hud-dice, .tap-hint, .cube-ask, .opening .die), .flip ~ .hud:not(:has(.act-start)) .hud-act { margin-left: 7.6%; }

.hud:has(.hud-act) .hud-dice.side-r:has(.tray.spent) { display: none; }

.game-result {
  position: absolute; z-index: 10;
  inset: 0; margin: auto;
  block-size: fit-content;
  max-inline-size: min(24rem, 90%);
}

.game-result, .game-interval { overflow: visible; }

@container arena (max-width: 56rem) {
  .game-result, .game-interval { max-block-size: 100%; overflow-y: auto; overscroll-behavior: contain; }
}

@container arena (max-width: 16rem) {
  .arena .result-actions .cta { font-size: 1rem; padding-inline: var(--s-3); gap: var(--s-1); }
}

.game-result .keep-note {
  display: block; padding: 0; margin-top: var(--s-3);
  border: 0; background: transparent;
  font-size: .85rem; color: var(--quiet);
}

.game-result .keep-note { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.game-result .pwa-hint:not([hidden]) + .keep-note { border-top: 0; padding-top: 0; margin-top: var(--s-2); }
.game-result .keep-note p { display: inline; }
.game-result .keep-note .signin {
  display: inline; padding: 0; border: 0; background: transparent;
  font-size: inherit; font-weight: 600; color: var(--terra);
  text-decoration: underline; text-underline-offset: .15em;
}
.game-result .confetti, .game-interval .confetti {
  inset-block: -3rem 0; inset-inline: -34%;
  --fall: 20rem;

  z-index: 2;
}

@container arena (max-width: 34rem) {
  .game-result .confetti, .game-interval .confetti {
    inset-block: -2rem 0; inset-inline: -4%;
    --fall: 13rem;
  }
  .game-result .confetti i, .game-interval .confetti i {
    inline-size: .5rem; block-size: .8rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .game-result .confetti i, .game-interval .confetti i { animation-duration: 2.1s; }
}

.game-interval {
  position: absolute; z-index: 9;
  inset: 0; margin: auto;
  block-size: fit-content;
  max-inline-size: min(22rem, 88%);
}

.arena:has(.game-interval:not([hidden])) .hud-act,
.arena:has(.game-interval:not([hidden])) .hud-wait,
.arena:has(.game-interval:not([hidden])) .hud-hint { display: none; }

.interval-close {
  position: absolute; inset-block-start: .3rem; inset-inline-end: .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2rem; block-size: 2rem;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--quiet);
  cursor: pointer;
}
.interval-close::after { content: ""; position: absolute; inset: -.375rem; }
.interval-close:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.interval-close .icon { margin: 0; }

.hud:has(.act-start) .hud-act {
  left: 50%;
  inline-size: clamp(9rem, 40cqi, 16rem);

  min-inline-size: 0; max-inline-size: none;
}
.hud-act .act-start {
  min-height: 3.2rem;
  font-size: clamp(.95rem, 3.6cqi, 1.35rem);
}

.hud:has(.act-start) .hud-cube { display: none; }

.hud:has(.hud-wait:not(.tap-hint, .cube-wait)) .hud-cube { display: none; }

.hud-cube.cube-offer { outline: 2px dashed var(--terra); outline-offset: 2px; }
.cube-ask { inset-block-start: 50%; left: 23%; max-inline-size: clamp(8rem, 40cqi, 17rem); }

.hud-hint {
  margin: .15rem 0 0; text-align: center; text-wrap: balance;
  font-size: clamp(.75rem, 2.2cqi, .8rem);
  padding: .2em .6em; border-radius: var(--r-1);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}

.act .key {
  font-family: var(--font-mono); font-size: .72em; font-weight: 500;
  padding: .05em .4em; border-radius: 4px;
  border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
}
@media (pointer: coarse) { .act .key { display: none; } }

@container arena (max-width: 30rem) { .hud-act .act .key { display: none; } }

.opening {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  --die-size: clamp(2.4rem, 11cqi, 5.4rem);
  --turn: 300deg;
}

.opening .die {
  position: absolute; inset-block-start: 38%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.opening .opening-w { left: 26%; }
.opening .opening-b { left: 74%; }
.opening.view-w .opening-w, .opening.view-b .opening-b { left: 74%; }
.opening.view-w .opening-b, .opening.view-b .opening-w { left: 26%; }
.opening .opening-b {
  background-color: var(--die-face-b); color: var(--die-pip-b);
  border-color: var(--die-edge-b);
  box-shadow: 0 1px 3px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .12);
}
.opening.sway-1 { --turn: -260deg; }
.opening.sway-2 { --turn: 420deg; }
.opening.sway-3 { --turn: -340deg; }

.opening { --win-glow: color-mix(in oklab, var(--ok) 75%, white); }
@media (prefers-reduced-motion: no-preference) {
  .opening .die { animation: opening-throw 3.6s var(--ease-standard) both; }
  .opening.win-w .opening-w, .opening.win-b .opening-b { animation-name: opening-throw-win; }
  .opening.win-w .opening-b, .opening.win-b .opening-w { animation-name: opening-throw-lose; }

  .opening.lead-w .opening-b, .opening.lead-b .opening-w { animation-delay: .26s; }
}
@media (prefers-reduced-motion: reduce) {

  .opening .die { animation: opening-hold 3.6s linear both; }
  .opening.win-w .opening-w, .opening.win-b .opening-b { animation-name: opening-hold-win; }
  .opening.win-w .opening-b, .opening.win-b .opening-w { animation-name: opening-hold-lose; }
}

html.still .opening .die { animation: opening-hold 3.6s linear both; }
html.still .opening.win-w .opening-w, html.still .opening.win-b .opening-b { animation-name: opening-hold-win; }
html.still .opening.win-w .opening-b, html.still .opening.win-b .opening-w { animation-name: opening-hold-lose; }

.opening.shown .die { animation: none; }

@keyframes opening-throw {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--from, -180%)), -140%) rotate(0) scale(.7); }
  5%   { opacity: 1; }
  25%  { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1.08); }
  31%  { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1); }
  86%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--turn)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--turn)) scale(.9); }
}
@keyframes opening-throw-win {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--from, -180%)), -140%) rotate(0) scale(.7); filter: none; }
  5%   { opacity: 1; }
  25%  { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1.08); }
  31%, 46% { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1); filter: none; }
  54%  { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1.18); filter: drop-shadow(0 0 .45em var(--win-glow)) brightness(1.12); }
  62%, 86% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--turn)) scale(1.08); filter: drop-shadow(0 0 .3em var(--win-glow)) brightness(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--turn)) scale(.95); filter: none; }
}
@keyframes opening-throw-lose {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--from, -180%)), -140%) rotate(0) scale(.7); filter: none; }
  5%   { opacity: 1; }
  25%  { transform: translate(-50%, -50%) rotate(var(--turn)) scale(1.08); }
  31%, 46% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--turn)) scale(1); filter: none; }
  60%, 86% { opacity: .35; transform: translate(-50%, -50%) rotate(var(--turn)) scale(.94); filter: grayscale(.85) brightness(.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--turn)) scale(.9); filter: grayscale(.85) brightness(.8); }
}

.opening .opening-w { --from: -180%; }
.opening .opening-b { --from: 180%; }
.opening.view-w .opening-w, .opening.view-b .opening-b { --from: 180%; }
.opening.view-w .opening-b, .opening.view-b .opening-w { --from: -180%; }
@keyframes opening-hold {
  0%, 3%  { opacity: 0; }
  7%, 86% { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes opening-hold-win {
  0%, 3%  { opacity: 0; filter: none; }
  7%      { opacity: 1; }
  46%     { opacity: 1; filter: none; }
  54%, 86% { opacity: 1; filter: drop-shadow(0 0 .3em var(--win-glow)) brightness(1.06); }
  100%    { opacity: 0; filter: none; }
}
@keyframes opening-hold-lose {
  0%, 3%  { opacity: 0; filter: none; }
  7%, 46% { opacity: 1; filter: none; }
  60%, 86% { opacity: .35; filter: grayscale(.85) brightness(.8); }
  100%    { opacity: 0; filter: grayscale(.85) brightness(.8); }
}

.hud:has(.opening:not(.shown)) .hud-dice {

  animation: opening-reveal 4.6s var(--ease-standard) both;

  pointer-events: none;
}

.hud:has(.opening:not(.shown)) .hud-undo { opacity: 0; pointer-events: none; }
@keyframes opening-reveal {
  0%, 91% { opacity: 0; }
  100%    { opacity: 1; }
}

.tray[data-dice="b"] .die {
  background-color: var(--die-face-b); color: var(--die-pip-b);
  border-color: var(--die-edge-b);
  box-shadow: 0 1px 2px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .12);
}
.hud-dice .dice-roll { gap: .35em; }
.hud-dice .dice-roll.double {
  padding: .25em .4em;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-radius: .5em;
}

.hud-dice .dice-roll .tag {
  color: #fff; background: rgb(0 0 0 / .62);
  border: 1px solid rgb(255 255 255 / .4);
  border-radius: var(--r-1); padding: .1em .35em;
  font-size: clamp(.75rem, 2cqi, .8rem);
}

@container arena (max-width: 42rem) {
  .hud-dice .dice-roll.double { padding: .15em .25em; }
  .hud-dice .dice-roll.double .tag { display: none; }
}

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

body:has(.stage) main {
  max-width: none;
  padding: 0;
  gap: 0;
}
body:has(.stage) { --page: 76rem; }
@media (min-width: 100rem) { body:has(.stage) { --page: 88rem; } }

.wrap {
  inline-size: min(100% - 2 * var(--s-5), var(--page));
  margin-inline: auto;
}
body:has(.stage) :is(.stage, .section[id], .panel[id]) {
  scroll-margin-block-start: clamp(3rem, 5vw, 4.5rem);
}

.stage {
  position: relative;
  isolation: isolate;
  background: var(--stage);
  color: var(--stage-ink);
  overflow: clip;
  padding-block: clamp(var(--s-5), .6rem + 2.2vw, var(--s-7))
                 calc(var(--fade-h) + clamp(var(--s-4), .6rem + 1.6vw, var(--s-6)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
}

@media (min-width: 64rem) {
  @supports (min-block-size: 1svh) {
    .stage { min-block-size: calc(100svh - 3.25rem); display: flex; flex-direction: column; justify-content: center; }
  }
}
.stage a { color: var(--stage-terra); }
.stage .quiet { color: var(--stage-quiet); }
.stage > .wrap { position: relative; z-index: 3; }

.stage-aura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 76% -6rem, rgb(144 154 166 / .18), transparent 68%),
    radial-gradient(38rem 26rem at 8% -2rem, rgb(227 189 111 / .07), transparent 66%);
}
.stage-fade {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  block-size: var(--fade-h); pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), var(--paper) 92%);
}
@supports (background: linear-gradient(to bottom in oklab, red, blue)) {
  .stage-fade { background: linear-gradient(to bottom in oklab, transparent, var(--paper) 92%); }
}
.stage-edge {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  block-size: 1px; background: var(--stage-edge); pointer-events: none;
}

.hero-in {
  display: grid; gap: clamp(var(--s-5), 1rem + 2.5vw, var(--s-7));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 64rem) {
  .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

@media (min-width: 100rem) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hero-copy { min-inline-size: 0; }

.stage h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.015em; font-weight: 600;
  color: var(--stage-ink);
  margin-block-end: var(--s-3);
}
.stage h1:is(:lang(ar), :lang(he)) { letter-spacing: 0; }

.hero-lede {
  font-size: clamp(1.06rem, 1rem + .3vw, 1.18rem);
  line-height: 1.5; color: var(--stage-ink-2);
  max-inline-size: 40rem;
  margin-block-end: var(--s-5);
}

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

.seeking { display: flex; flex-direction: column; gap: var(--s-1); }
.seek-form { margin: 0; }
.seek-strip {
  font: inherit; inline-size: 100%; text-align: start;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-1) var(--s-3);
  min-block-size: 2.75rem; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--terra); border-radius: var(--r-2);
  background: var(--terra-soft); color: var(--ink);
  cursor: pointer; touch-action: manipulation;
}
.seek-strip .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; color: var(--terra); }
.seek-what { flex: 1 1 12rem; min-inline-size: 0; }
.seek-rules { flex: none; color: var(--ink-2); font-size: .84rem; }
.seek-strip .seek-go {
  flex: none; margin-inline-start: auto;
  color: var(--terra-2); font-weight: 700; font-size: .9rem;
}
@media (hover: hover) and (pointer: fine) {
  .seek-strip:hover { background: color-mix(in oklab, var(--terra) 14%, var(--paper-2)); }
  .seek-strip:hover .seek-go { text-decoration: underline; }
}
@media (forced-colors: active) { .seek-strip { border-color: ButtonText; } }

.hero-stage { margin: 0; min-inline-size: 0; }
@media (min-width: 64rem) { .hero-stage { position: sticky; inset-block-start: 4rem; } }

.hero-stage .tv-stage {
  position: relative;

  background: var(--stage-2);
  border: 1px solid var(--stage-line-2);
  box-shadow: 0 2px 6px rgb(0 0 0 / .4), 0 26px 60px -26px rgb(0 0 0 / .8);
}

.hero-stage .tv-stage::after {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline: var(--r-3);
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-brass), transparent);
  opacity: .42;
}

.hero-stage .tv-stage .pcard {
  background: none;
  border-color: transparent;
  box-shadow: none;
  padding-block: var(--s-1);
}
.hero-stage .tv-stage .pcard.on { box-shadow: none; border-color: transparent; }

.hero-stage .tv-foot {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: var(--s-2) var(--s-3);
  margin-block-start: var(--s-3);
}
.hero-stage .tv-foot .cta {
  min-inline-size: 0;
  background: none;
  border-color: var(--stage-line-2);
  color: var(--stage-ink);
  padding-block: var(--s-2);
}
@media (hover: hover) and (pointer: fine) {
  .hero-stage .tv-foot .cta:hover {
    background: var(--stage-2);
    border-color: var(--stage-brass);
  }
}

@media (min-width: 64rem) {
  .hero-stage .tv-stage > .arena {
    inline-size: min(100%, max(16rem, calc((100vh - 30rem) * 1.36)));
    inline-size: min(100%, max(16rem, calc((100svh - 30rem) * 1.36)));
  }
}

.hero-stage .live { margin-block-start: var(--s-4); }

@media (min-width: 64rem) and (max-height: 55rem) {
  .hero-stage .live { margin-block-start: var(--s-2); }
  .hero-stage .tv-foot { margin-block-start: var(--s-2); }
}

.stage-board { margin: 0; position: relative; min-inline-size: 0; }
.boardbox {
  position: relative;
  border-radius: var(--r-3);
  padding: clamp(var(--s-2), .4rem + 1vw, var(--s-4));
  background: var(--stage-3);
  border: 1px solid var(--stage-line-2);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .85), 0 2px 6px rgb(0 0 0 / .35);
  overflow: hidden;
}
.boardbox::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-brass), transparent);
  opacity: .42;
}
.board-cap {
  margin-block-start: var(--s-3); padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--stage-line);
  font-size: .95rem; line-height: 1.45; color: var(--stage-quiet);
}
.board-cap strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--stage-ink);
}
.board-cap .cap { display: none; }
.board-cap .cap:first-child { display: block; }
.bset { display: none; }
.bset:first-of-type { display: block; }
@supports selector(:has(*)) {
  .board-cap .cap:first-child, .bset:first-of-type { display: none; }
  .hero-in:has(input[name="variant"][value="backgammon"]:checked) .bset[data-board="backgammon"],
  .hero-in:has(input[name="variant"][value="long-narde"]:checked) .bset[data-board="long-narde"],
  .hero-in:has(input[name="variant"][value="fevga"]:checked) .bset[data-board="fevga"],
  .hero-in:has(input[name="variant"][value="plakoto"]:checked) .bset[data-board="plakoto"],
  .hero-in:has(input[name="variant"][value="gul-bara"]:checked) .bset[data-board="gul-bara"],
  .hero-in:has(input[name="variant"][value="tavli"]:checked) .bset[data-board="backgammon"] { display: block; }
  .hero-in:has(input[name="variant"][value="backgammon"]:checked) .cap[data-cap="backgammon"],
  .hero-in:has(input[name="variant"][value="long-narde"]:checked) .cap[data-cap="long-narde"],
  .hero-in:has(input[name="variant"][value="fevga"]:checked) .cap[data-cap="fevga"],
  .hero-in:has(input[name="variant"][value="plakoto"]:checked) .cap[data-cap="plakoto"],
  .hero-in:has(input[name="variant"][value="gul-bara"]:checked) .cap[data-cap="gul-bara"],
  .hero-in:has(input[name="variant"][value="tavli"]:checked) .cap[data-cap="tavli"] { display: block; }

  .hero-in:not(:has(input[name="variant"]:checked)) .bset[data-board="backgammon"],
  .hero-in:not(:has(input[name="variant"]:checked)) .cap[data-cap="backgammon"] { display: block; }
}

.live {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-block-start: var(--s-4);
  color: var(--stage-ink-2); font-size: .98rem;
}

.live .pulse {
  flex: none; align-self: center;
  inline-size: .55em; block-size: .55em;
  border-radius: 50%; background: var(--stage-olive);
}
.live .pulse.still { background: var(--stage-quiet); }

@media (prefers-reduced-motion: no-preference) {
  .live .pulse:not(.still) { animation: lp-pulse 2.4s var(--ease-standard) 2; }
}
@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise-in 420ms var(--ease-standard-enter) both; }
  .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .stage-board, .hero-stage { animation: rise-in 480ms var(--ease-standard-enter) 200ms both; }
}

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

body:has(.stage) .section {
  padding-block: clamp(var(--s-7), 2rem + 6vw, calc(2 * var(--s-8)));
  position: relative; z-index: 1;
}
body:has(.stage) .section + .section { padding-block-start: 0; }

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

body:has(.stage) h2.head {
  font-size: clamp(1.9rem, 1.38rem + 2.1vw, 3rem);
  line-height: 1.1; letter-spacing: -.008em;
  margin-block-end: var(--s-3);
}
body:has(.stage) h2.head:is(:lang(ar), :lang(he)) { letter-spacing: 0; }

.section-deck {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  color: var(--ink-2); max-inline-size: 46rem;
  margin-block-end: var(--s-6);
}

.cards {
  display: grid; gap: clamp(var(--s-4), .5rem + 1.6vw, var(--s-5));
  grid-template-columns: 1fr;
  margin-block-start: var(--s-5);
}
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 82rem) {
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card { grid-column: span 2; }
  .card.feature { grid-column: span 3; }
}
.card {
  background: var(--paper-2); border: var(--hair); border-radius: var(--r-3);
  padding: clamp(var(--s-4), .7rem + 1vw, var(--s-5));
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--lift);
  position: relative; overflow: clip;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--lift-hi); border-color: var(--line-2); }
}
.card .roman {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em;
  color: var(--terra); font-weight: 600;
  display: flex; align-items: center; gap: var(--s-2);
}
.card .roman::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.card h3 {
  font-size: clamp(1.4rem, 1.24rem + .7vw, 1.9rem);
  line-height: 1.12; letter-spacing: -.008em;
}

.card h3 a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
}
.card h3 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%; }
.card p.story { font-size: .96rem; color: var(--ink-2); }
.card .tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-block-start: auto;
}
.card .tag {
  font-size: .8rem;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-1);
  border: 1px solid var(--line-2);
  color: var(--indigo); background: var(--indigo-soft);
}

.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 (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body:has(.stage) .kicker,
    body:has(.stage) h2.head,
    body:has(.stage) .section-deck,
    body:has(.stage) .card,
    body:has(.stage) .two > * {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    body:has(.stage) .card:nth-child(2) { animation-range: entry 4% entry 59%; }
    body:has(.stage) .card:nth-child(3) { animation-range: entry 8% entry 63%; }
    body:has(.stage) .card:nth-child(4) { animation-range: entry 12% entry 67%; }
    body:has(.stage) .card:nth-child(5) { animation-range: entry 16% entry 71%; }
  }
}

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

body:has(.tv:not(.tv-narrow)) { --page: 120rem; }
.tv {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--s-6) var(--s-5); align-items: start;
}
@media (max-width: 80rem) { .tv { grid-template-columns: minmax(0, 1fr); } }

.tv-narrow { grid-template-columns: minmax(0, 1fr); }

#zuschauen > .quiet { margin: 0 0 var(--s-4); }

.tv-slot { min-inline-size: 0; inline-size: 100%; container-type: inline-size; container-name: tvstage; }
.tv-stage {
  --tv-card: 240px; --tv-gap: 16px; --tv-pad: 16px;

  --tv-board: max(15rem, calc((100svh - 27rem) * 1.36));
  --duel-card: var(--tv-card);
  --avatar: 56px; --duel-name: 1.2rem; --duel-time: 2rem;
  --duel-ring: 8.5rem; --duel-score: 3.75rem; --duel-say: 1rem;
  inline-size: 100%; min-inline-size: 0;
  max-inline-size: calc(var(--tv-board) + 2 * (var(--tv-card) + var(--tv-gap)) + 2 * var(--tv-pad));
  margin-inline: auto;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--tv-card) minmax(0, 1fr) var(--tv-card);
  grid-template-rows: auto auto auto auto;
  column-gap: var(--tv-gap); row-gap: var(--s-2);
  align-items: center;
  padding: var(--tv-pad);
  background: var(--stage); color: var(--stage-ink);
  border-radius: var(--r-3);
  box-shadow: inset 0 0 0 1px var(--stage-edge);
  direction: ltr;
}

[dir="rtl"] .tv-stage > * { direction: rtl; }
.tv-stage > .tv-head { grid-column: 1 / -1; grid-row: 1; }
.tv-stage > .pcard.opp { grid-column: 1; grid-row: 2; justify-self: end; }
.tv-stage > .arena { grid-column: 2; grid-row: 2; }
.tv-stage > .pcard.me { grid-column: 3; grid-row: 2; justify-self: start; }
.tv-stage > .tv-pass { grid-column: 1 / -1; grid-row: 3; margin: 0; text-align: center; }
.tv-stage > .tv-foot { grid-column: 1 / -1; grid-row: 4; }

.tv-stage .pcard { max-block-size: none; overflow: visible; }

.tv-stage .duel-head { min-block-size: auto; color: var(--stage-quiet); }
.tv-stage .duel-head > :not(:first-child):not([hidden])::before { color: var(--stage-line-2); }
.tv-stage .duel-head-score { color: var(--stage-brass); }
.tv-stage .duel-head-score .score-sep { color: var(--stage-quiet); }
.tv-stage .cube-val { color: var(--stage-ink); background: var(--stage-3); border-color: var(--stage-line-2); }

.tv-stage .pcard {
  background: var(--stage-2); color: var(--stage-ink);
  border-color: var(--stage-line-2); box-shadow: none;
}
.tv-stage .pcard.on { border-color: var(--stage-terra); box-shadow: 0 0 0 1px var(--stage-terra); }
.tv-stage .pcard-name, .tv-stage .pcard-time .clock { color: var(--stage-ink); }
.tv-stage .pcard-meta, .tv-stage .pcard-score span, .tv-stage .pcard-pip,
.tv-stage .pcard-since, .tv-stage .pstat, .tv-stage .quiet, .tv-stage .tv-eyes { color: var(--stage-quiet); }
.tv-stage .pcard-gap { color: var(--stage-ink-2); }
.tv-stage .pcard-gap::before { color: var(--stage-line-2); }
.tv-stage .pcard-score b { color: var(--stage-brass); }
.tv-stage .pcard-say { color: var(--stage-terra); }
.tv-stage .pcard-say.wait { color: var(--stage-quiet); }
.tv-stage .pcard-avatar::after { border-color: var(--stage-terra); }
.tv-stage .badge-bot { border-color: var(--stage-quiet); color: var(--stage-quiet); }
.tv-stage .strength i { background: var(--stage-line-2); }
.tv-stage .seek-easy   { --level: var(--stage-olive); }
.tv-stage .seek-medium { --level: var(--stage-ink-2); }
.tv-stage .seek-hard   { --level: var(--stage-terra); }
.tv-stage .seek-full   { --level: var(--stage-brass); }

.tv-stage .pcard-ring .track { stroke: var(--stage-line-2); }
.tv-stage .pcard-ring .run, .tv-stage .pcard-ring .dl { stroke: var(--stage-quiet); }
.tv-stage .pcard.on .pcard-ring .run, .tv-stage .pcard.low .pcard-ring .run,
.tv-stage .pcard.on .pcard-ring .dl { stroke: var(--stage-terra); }
.tv-stage .pcard.low .pcard-time .clock, .tv-stage .pcard.low .lowtag { color: var(--stage-terra); }

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

.tv-stage .half { --num-size: clamp(.72rem, 2.1vw, 1rem); --num-size: clamp(.72rem, 2.2cqi, 1rem); }

@media (max-width: 1500px) {
  .tv-stage {
    --tv-card: 190px; --tv-gap: 14px; --tv-pad: 12px;
    --avatar: 48px; --duel-name: 1.05rem; --duel-time: 1.6rem;
    --duel-ring: 7rem; --duel-score: 3rem; --duel-say: .95rem;
  }
}
@media (max-width: 80rem) {
  .tv-stage {
    --tv-card: 176px;
    --avatar: 44px; --duel-name: 1rem; --duel-time: 1.5rem;
    --duel-ring: 6.5rem; --duel-score: 2.75rem; --duel-say: .9rem;
  }
}

@container tvstage (max-width: 56rem) {
  .tv-stage {
    --avatar: 44px; --duel-ring: 4.25rem; --duel-time: 1rem;
    --duel-score: 2.25rem; --duel-name: 1.125rem; --duel-say: .95rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    padding: var(--s-3);
  }
  .tv-stage > .tv-head { grid-column: 1; grid-row: 1; }
  .tv-stage > .pcard.opp { grid-column: 1; grid-row: 2; }

  .tv-stage > .arena { grid-column: 1; grid-row: 3; inline-size: min(100%, max(var(--tv-board), 30rem)); justify-self: center; }
  .tv-stage > .pcard.me { grid-column: 1; grid-row: 4; }
  .tv-stage > .tv-pass { grid-column: 1; grid-row: 5; }
  .tv-stage > .tv-foot { grid-column: 1; grid-row: 6; }
  .tv-stage .pcard, .tv-stage .pcard.opp, .tv-stage .pcard.me {
    justify-self: stretch; inline-size: 100%; max-inline-size: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "av name  score clock"
      "av meta  score clock"
      "av say   pip   clock";
    align-items: center; justify-items: start;
    column-gap: var(--s-3); row-gap: .15rem;
    padding: var(--s-2) var(--s-3);
    text-align: start;
  }
  .tv-stage .pcard-avatar { grid-area: av; margin: 0; }
  .tv-stage .pcard-name { grid-area: name; inline-size: auto; max-inline-size: 100%; }
  .tv-stage .pcard-meta { grid-area: meta; justify-content: flex-start; }
  .tv-stage .pcard-say { grid-area: say; }
  .tv-stage .pcard-score { grid-area: score; justify-self: end; align-self: end; }

  .tv-stage .pcard-pip {
    grid-area: pip; justify-self: end; justify-content: flex-end;
    flex-direction: row; gap: .2rem .6rem;
  }
  .tv-stage .pcard-gap::before { content: "·"; }
  .tv-stage .pcard-pip .pstat:not(:first-child)::before {
    content: "·"; margin-inline-end: .6rem; color: var(--stage-line-2);
  }
  .tv-stage .pcard-clock { grid-area: clock; margin: 0; }
  .tv-stage .pcard-since { grid-column: 2 / -1; }
}

@media (orientation: landscape) and (max-height: 34rem) {
  .tv-stage .tv-head { display: flex; }
  .tv-stage .pcard-pip { display: flex; gap: .2rem .6rem; }
  .tv-stage .pcard-since { display: block; }
  .tv-stage .pcard-meta .pstat { display: inline; }
}

@container tvstage (max-width: 24rem) {
  .tv-stage .pcard, .tv-stage .pcard.opp, .tv-stage .pcard.me {
    grid-template-areas:
      "av name  score clock"
      "av meta  score clock"
      "av pip   score clock"
      "av say   score clock";
  }
  .tv-stage .pcard-pip { justify-self: start; justify-content: flex-start; flex-direction: column; gap: .1rem; }
  .tv-stage .pcard-gap::before, .tv-stage .pcard-pip .pstat:not(:first-child)::before { content: none; }
}

@container tvstage (max-width: 26rem) {
  .tv-stage { --avatar: 40px; --duel-ring: 3.75rem; --duel-time: .9rem; --duel-score: 2rem; --duel-name: 1rem; --duel-say: .9rem; }
  .tv-stage .pcard { padding: var(--s-2); column-gap: var(--s-2); }
  .tv-stage .pcard-meta { font-size: .8rem; }
  .tv-stage .pcard-score span, .tv-stage .pcard-pip { font-size: .75rem; }
}

body:has(.tv) .page-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
body:has(.tv) .page-head .lead { margin: 0; }
body:has(.tv) .tv-channels { margin-block: var(--s-2) var(--s-3); }
.tv-h { font-size: 1rem; margin: 0 0 var(--s-2); }
.tv-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-1); }
.tv-list > li { display: flex; }
.tv-list a {
  display: flex; align-items: center; gap: var(--s-3);
  inline-size: 100%; min-block-size: 2.75rem;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--ink); text-decoration: none;
}

.tv-list a[aria-current] { border-color: var(--brass); box-shadow: inset .2rem 0 0 var(--brass); }
.tv-thumb { flex: none; inline-size: 5rem; border-radius: var(--r-1); overflow: hidden; line-height: 0; }
.tv-more { margin: var(--s-2) 0 0; font-size: .9rem; }
.tv-thumb .mini { display: block; inline-size: 100%; block-size: auto; }
.tv-meta { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-inline-size: 0; }
.tv-meta .pairing { font-size: .92rem; overflow-wrap: anywhere; }
.tv-meta .facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); font-size: .8rem; color: var(--ink-2); }
.tv-meta .gamename { margin-inline-end: auto; }
.tv-meta .tally, .tv-meta .upto {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums;
}
.tv-meta .tally { font-weight: 600; color: var(--brass); }
.tv-meta .upto { color: var(--quiet); }
@media (hover: hover) and (pointer: fine) {
  .tv-list a:hover { border-color: var(--terra); }
  .tv-list a:hover .pairing { text-decoration: underline; }
}
@media (forced-colors: active) { .tv-list a { border-color: #999; } .tv-list a[aria-current] { border-width: 3px; } }

.tv-channels { margin-block: 0 var(--s-5); }
.tv-channels .count { font-family: var(--font-mono); font-weight: 600; font-size: .85em; color: var(--brass); }

.tv-foot {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  margin: var(--s-5) 0 0; text-align: center;
}
.tv-foot .cta { min-inline-size: min(16rem, 100%); justify-content: center; }
.tv-eyes { font-size: .9rem; color: var(--quiet); }

.tv-recent { margin-block-start: var(--s-6); }
.tv-cards { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.tv-cards a {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--ink); text-decoration: none;
}
.tv-card-board { display: block; border-radius: var(--r-1); overflow: hidden; line-height: 0; }
.tv-card-board .mini { display: block; inline-size: 100%; block-size: auto; }
@media (hover: hover) and (pointer: fine) {
  .tv-cards a:hover { border-color: var(--terra); }
  .tv-cards a:hover .pairing { text-decoration: underline; }
}
@media (forced-colors: active) { .tv-cards a { border-color: #999; } }

#zuschauen { margin-block-start: var(--s-6); }
#zuschauen .h-help > a { margin-inline-start: auto; font-size: .9rem; }

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

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

@media (min-width: 62rem) { .two.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.two.trio .matches li { flex-wrap: wrap; row-gap: var(--s-1); }
.two.trio .matches li > a { flex: 1 1 100%; }
.two.trio .matches li .meta { white-space: normal; }
.puzzlecard {
  display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--paper-2); color: var(--ink); text-decoration: none;
  min-block-size: 2.75rem;
}
.puzzlecard .minibox { inline-size: 100%; }
.puzzlecard .mini { display: block; inline-size: 100%; block-size: auto; }
.puzzlecard-meta { display: flex; flex-direction: column; gap: var(--s-1); min-inline-size: 0; }
.puzzlecard-n { font-weight: 600; }
.puzzlecard-roll { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.puzzlecard-roll .die { --die-size: 1.4rem; }
.puzzlecard-side { font-size: .9rem; color: var(--ink-2); }

.puzzlecard-ask { color: var(--indigo); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .puzzlecard:hover { border-color: var(--terra); box-shadow: var(--lift); }
  .puzzlecard:hover .puzzlecard-ask { text-decoration: underline; }
}
.lp-puzzle > h2 { margin-block-end: var(--s-3); }

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