@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(./fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(./fonts/rubik-latin-ext.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
:root {
  --ui-bg: #121316;
  --ui-bg-2: #16181c;
  --ui-panel: #1d1f24;
  --ui-panel-2: #262930;
  --ui-edge: #08090b;
  --ui-line: #ffffff16;
  --ui-line-2: #ffffff26;
  --field-line: #6b7280;
  --text: #f3f4f6;
  --muted: #b6bcc7;
  --subtle: #8f96a3;
  --amber: #ff8a3d;
  --amber-hi: #ffc690;
  --amber-lo: #cc5a1c;
  --amber-edge: #a3440f;
  --on-amber: #241104;
  --teal: #2de2c8;
  --teal-hi: #b4fff4;
  --teal-lo: #0fa08b;
  --teal-edge: #0a7465;
  --on-teal: #03201b;
  --danger: #ff6b6b;
  --focus: #ffd27a;
  --ff: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(12px, 3.6vw, 28px);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --rail: 0px;
  color-scheme: dark;
  --tray-1: #a06a36;
  --tray-2: #5a361b;
  --tray-inner: #23170d;
  --cell: #3d2b1c;
  --cell-edge: #ffe6c414;
  --board-glow: #a06a3638;
}
:root[data-board="felt"] {
  --tray-1: #7e5029;
  --tray-2: #452912;
  --tray-inner: #0b241b;
  --cell: #17493a;
  --cell-edge: #d2ffec14;
  --board-glow: #2e8b6c38;
}
:root[data-board="royal"] {
  --tray-1: #3449c8;
  --tray-2: #1a266f;
  --tray-inner: #0a1137;
  --cell: #203086;
  --cell-edge: #dce4ff1a;
  --board-glow: #3449c840;
}
:root[data-board="onyx"] {
  --tray-1: #454953;
  --tray-2: #1a1c21;
  --tray-inner: #060708;
  --cell: #21242b;
  --cell-edge: #ffffff17;
  --board-glow: #bec8e11a;
}
*,
:before,
:after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100svh;
  font-family: var(--ff);
  color: var(--text);
  background: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}
.skip {
  z-index: 200;
  background: var(--amber);
  color: var(--on-amber);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  position: absolute;
  top: -60px;
  left: 12px;
}
.skip:focus {
  top: 12px;
}
.btn {
  --b-bg: var(--amber);
  --b-hi: var(--amber-hi);
  --b-edge: var(--amber-edge);
  --b-fg: var(--on-amber);
  background: linear-gradient(180deg, var(--b-hi) -70%, var(--b-bg) 48%);
  min-height: 48px;
  color: var(--b-fg);
  white-space: nowrap;
  box-shadow:
    0 5px 0 var(--b-edge),
    inset 0 1px 0 #ffffff73;
  transition:
    transform 80ms var(--ease),
    box-shadow 80ms var(--ease),
    filter 0.15s;
  border: 0;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}
.btn:hover {
  filter: brightness(1.06);
}
.btn:active {
  box-shadow:
    0 1px 0 var(--b-edge),
    inset 0 1px 0 #ffffff73;
  transform: translateY(4px);
}
.btn--teal {
  --b-bg: var(--teal);
  --b-hi: var(--teal-hi);
  --b-edge: var(--teal-edge);
  --b-fg: var(--on-teal);
}
.btn--ghost {
  --b-bg: var(--ui-panel-2);
  --b-hi: #3a3e47;
  --b-edge: var(--ui-edge);
  --b-fg: var(--text);
  box-shadow:
    0 4px 0 var(--ui-edge),
    inset 0 1px 0 #ffffff0f;
}
.btn--sm {
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.92rem;
}
.btn--block {
  width: 100%;
}
.icon-btn {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: inline-grid;
}
.icon-btn svg {
  fill: none;
  width: 22px;
  height: 22px;
  stroke: var(--text);
  stroke-width: 2.2px;
  stroke-linecap: round;
}
.linkbtn {
  color: var(--teal);
  text-underline-offset: 2px;
  background: 0 0;
  border: 0;
  padding: 0;
  font-weight: 700;
  text-decoration: underline;
}
.logo {
  --lg-a: #ff8a3d;
  --lg-b: #2de2c8;
  --lg-ink: #f3f4f6;
  --lg-sub: #8f96a3;
  --lg-bg: var(--ui-bg);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: inline-flex;
}
.rail .logo {
  --lg-bg: var(--ui-bg-2);
}
.auth__logo {
  --lg-bg: var(--ui-panel);
}
.logo__mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: block;
  overflow: visible;
}
.logo__fa {
  fill: var(--lg-a);
}
.logo__fb {
  fill: var(--lg-b);
}
.logo__sa {
  stroke: var(--lg-a);
}
.logo__sb {
  stroke: var(--lg-b);
}
.logo__so {
  stroke: var(--lg-bg);
  stroke-width: 1.2px;
  paint-order: stroke;
}
.logo__cell {
  fill: var(--lg-ink);
  fill-opacity: 0.2;
}
.logo__cellA {
  fill: var(--lg-a);
  fill-opacity: 0.42;
}
.logo__cellB {
  fill: var(--lg-b);
  fill-opacity: 0.42;
}
.logo__word {
  letter-spacing: -0.02em;
  color: var(--lg-ink);
  white-space: nowrap;
  align-items: baseline;
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}
.logo__walls {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 71' preserveAspectRatio='none'%3E%3Crect x='4.5' width='20' height='71' rx='10' fill='%23FF8A3D'/%3E%3Crect x='33.5' width='20' height='71' rx='10' fill='%232DE2C8'/%3E%3C/svg%3E")
    0 0/100% 100% no-repeat;
  flex-shrink: 0;
  width: 0.58em;
  height: 0.71em;
  display: inline-block;
}
.logo__tld {
  color: var(--lg-sub);
  letter-spacing: 0;
  margin-left: 0.06em;
  font-size: 0.78em;
  font-weight: 600;
}
.logo__tld i {
  background: var(--lg-a);
  border-radius: 50%;
  width: 0.17em;
  height: 0.17em;
  margin-right: 0.03em;
  display: inline-block;
}
.app {
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100svh - 28px);
  display: grid;
}
.rail {
  display: none;
}
.topbar {
  z-index: 30;
  min-height: 58px;
  padding: 0 var(--gut);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-line);
  background: #121316e6;
  align-items: center;
  gap: 12px;
  display: flex;
  position: sticky;
  top: 0;
}
.topbar__nav {
  gap: 2px;
  margin-left: auto;
  display: none;
}
.topbar__nav a {
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.topbar__nav a:hover {
  background: var(--ui-panel);
  color: var(--text);
}
.topbar .icon-btn {
  margin-left: auto;
}
@media (width>=768px) {
  .topbar__nav {
    display: flex;
  }
  .topbar .icon-btn {
    margin-left: 4px;
  }
}
@media (width<=359px) {
  .topbar .logo__tld {
    display: none;
  }
}
:root {
  --rail-w: 76px;
  --rail-pad: 18px 12px;
  --rail-align: center;
  --rail-show: none;
  --rail-logo-pad: 0;
  --rail-link-pad: 11px;
  --rail-signin-fs: 0.82rem;
  --rail-signin-pad: 0;
  --rail-flip: 180deg;
}
@media (width>=1280px) {
  :root:not([data-rail="closed"]) {
    --rail-w: 224px;
    --rail-pad: 18px 14px;
    --rail-align: flex-start;
    --rail-show: inline;
    --rail-logo-pad: 0 6px;
    --rail-link-pad: 11px 12px;
    --rail-signin-fs: 0.92rem;
    --rail-signin-pad: 0 8px;
    --rail-flip: 0deg;
  }
}
@media (width>=1024px) {
  :root[data-rail="open"] {
    --rail-w: 224px;
    --rail-pad: 18px 14px;
    --rail-align: flex-start;
    --rail-show: inline;
    --rail-logo-pad: 0 6px;
    --rail-link-pad: 11px 12px;
    --rail-signin-fs: 0.92rem;
    --rail-signin-pad: 0 8px;
    --rail-flip: 0deg;
  }
  .app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }
  .topbar {
    display: none;
  }
  .rail {
    height: 100svh;
    padding: var(--rail-pad);
    border-right: 1px solid var(--ui-line);
    background: var(--ui-bg-2);
    flex-direction: column;
    gap: 18px;
    display: flex;
    position: sticky;
    top: 0;
  }
  .rail .logo {
    justify-content: var(--rail-align);
    padding: var(--rail-logo-pad);
  }
  .rail .logo__word,
  .rail__foot p,
  .rail__nav span,
  .rail__toggle span {
    display: var(--rail-show);
  }
  .rail__nav {
    gap: 4px;
    display: grid;
  }
  .rail__nav a,
  .rail__toggle {
    align-items: center;
    justify-content: var(--rail-align);
    padding: var(--rail-link-pad);
    color: var(--muted);
    border-radius: 12px;
    gap: 12px;
    font-weight: 650;
    text-decoration: none;
    display: flex;
  }
  .rail__nav a:hover,
  .rail__toggle:hover {
    background: var(--ui-panel);
    color: var(--text);
  }
  .rail__nav a[aria-current="page"] {
    background: var(--ui-panel-2);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--amber);
  }
  .rail__nav svg,
  .rail__toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }
  .rail__nav a[aria-current="page"] svg {
    fill: var(--amber);
    stroke: var(--amber);
  }
  .rail__toggle {
    text-align: left;
    background: 0 0;
    border: 0;
    width: 100%;
  }
  .rail__toggle svg {
    transform: rotate(var(--rail-flip));
  }
  .rail__foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: auto;
    display: grid;
  }
  .rail__signin {
    padding: var(--rail-signin-pad);
    font-size: var(--rail-signin-fs);
  }
  .rail__foot p {
    color: var(--subtle);
    padding: 0 4px;
    font-size: 0.78rem;
  }
}
.main {
  min-width: 0;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  overflow-x: clip;
}
@media (width>=768px) {
  .main {
    padding-bottom: 0;
  }
}
.play {
  padding: 12px var(--gut) 0;
}
.play__head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 18px;
  max-width: 1200px;
  margin: 0 auto 10px;
  display: flex;
}
.play__title {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 1rem;
  line-height: 1.15;
  display: flex;
}
.play__name {
  letter-spacing: -0.03em;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 900;
}
.play__kind {
  color: var(--muted);
  font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.1rem);
  font-weight: 500;
}
.play__promise {
  color: var(--muted);
  gap: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  display: none;
}
.play__promise li {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}
.play__promise li:before {
  content: "";
  background: var(--teal);
  border-radius: 3px;
  width: 12px;
  height: 5px;
}
.play__promise li:nth-child(2):before {
  background: var(--amber);
}
@media (width>=640px) {
  .play__promise {
    display: flex;
  }
}
.play__grid {
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
}
@media (width>=1024px) {
  .play__grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
  }
  .play__grid > .table,
  .play__grid > .four {
    grid-area: 1/1;
  }
  .play__grid > .panel {
    grid-area: 1/2;
  }
}
.table {
  gap: 8px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  position: relative;
}
@media (width>=1024px) {
  .table {
    width: min(100%, max(440px, 100svh - 300px));
  }
}
.pbar {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  transition: box-shadow 0.2s;
  display: grid;
}
.pbar.is-turn.pbar--you {
  box-shadow: inset 0 0 0 2px var(--amber);
}
.pbar.is-turn.pbar--rival {
  box-shadow: inset 0 0 0 2px var(--teal);
}
.face {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}
.pbar__who {
  min-width: 0;
  line-height: 1.2;
  display: grid;
}
.pbar__who b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.98rem;
  font-weight: 800;
  overflow: hidden;
}
.pbar__who small {
  color: var(--subtle);
  white-space: nowrap;
  font-size: 0.8rem;
}
.pbar__think {
  gap: 3px;
  display: none;
}
.pbar__think i {
  background: var(--teal);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1s ease-in-out infinite think;
}
.pbar__think i:nth-child(2) {
  animation-delay: 0.15s;
}
.pbar__think i:nth-child(3) {
  animation-delay: 0.3s;
}
.is-thinking .pbar--rival .pbar__think {
  display: inline-flex;
}
@keyframes think {
  0%,
  80%,
  to {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.pbar__stats {
  align-items: center;
  gap: 12px;
  display: flex;
}
.walls small {
  color: var(--subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
  font-size: 0.7rem;
}
.walls {
  justify-items: end;
  display: grid;
}
.walls__bars {
  gap: 2px;
  display: flex;
}
.walls__bars i {
  border-radius: 2px;
  width: 4px;
  height: 14px;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.walls--0 .walls__bars i {
  background: var(--amber);
}
.walls--1 .walls__bars i {
  background: var(--teal);
}
.walls__bars i.is-used {
  opacity: 0.16;
  transform: scaleY(0.7);
}
.walls small b {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}
@media (width<=380px) {
  .walls__bars {
    display: none;
  }
  .pbar {
    gap: 8px;
  }
}
.board-wrap {
  border-radius: 26px;
  position: relative;
}
.board-wrap:before {
  content: "";
  z-index: -1;
  background: radial-gradient(closest-side, var(--board-glow), transparent);
  pointer-events: none;
  position: absolute;
  inset: -6%;
}
.coach {
  z-index: 3;
  background: var(--amber);
  color: var(--on-amber);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  animation: 1.8s ease-in-out infinite bob;
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 20px -6px #0009;
}
.coach:after {
  content: "";
  border: 7px solid #0000;
  border-top-color: var(--amber);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}
@keyframes bob {
  50% {
    transform: translate(-50%, -4px);
  }
}
@media (width<=420px) {
  .coach {
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 86vw;
  }
}
.end {
  z-index: 4;
  border: 1px solid var(--ui-line-2);
  backdrop-filter: blur(8px);
  text-align: center;
  width: min(94%, 400px);
  animation: pop 0.35s var(--ease) both;
  background: #121316eb;
  border-radius: 22px;
  justify-items: center;
  gap: 12px;
  padding: 26px 18px 20px;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 50px -12px #000c;
}
.end__title {
  letter-spacing: -0.03em;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}
.end__text {
  color: var(--muted);
  max-width: 30ch;
  line-height: 1.45;
}
.end__note {
  color: var(--subtle);
  font-size: 0.88rem;
}
.end__rating {
  color: var(--text);
  margin: 0;
  font-weight: 700;
}
.end__rating.is-up {
  color: var(--teal);
}
.end__rating.is-down {
  color: #ff8f7a;
}
.end__rating.is-none {
  color: var(--subtle);
  font-size: 0.9rem;
  font-weight: 600;
}
.end__note a {
  color: var(--teal);
  text-underline-offset: 3px;
  font-weight: 700;
}
.end__actions {
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  display: grid;
}
.end__main,
.end__more {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  display: grid;
}
.end__more:not(:has(> :not([hidden]))) {
  display: none;
}
.end__actions .btn {
  width: 100%;
  padding: 0 10px;
  font-size: 0.95rem;
}
.end__share {
  border-top: 1px solid var(--ui-line);
  justify-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding-top: 16px;
  display: grid;
}
.end__share-label {
  color: var(--subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
}
.end__icons {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: flex;
}
@media (width<=480px) {
  .end__icons {
    grid-template-columns: repeat(4, 38px);
    justify-content: center;
    gap: 10px 16px;
    display: grid;
  }
}
.end__reel-status {
  min-height: 1.2em;
  color: var(--subtle);
  margin: 0;
  font-size: 0.85rem;
}
.end__reel-status:empty {
  display: none;
}
.end__reel-status a {
  color: var(--teal);
  text-underline-offset: 3px;
  font-weight: 700;
}
.share-ico {
  border: 1px solid var(--ui-line-2);
  background: var(--ui-panel-2);
  width: 38px;
  height: 38px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  display: inline-grid;
}
.share-ico svg {
  fill: currentColor;
  width: 19px;
  height: 19px;
  display: block;
}
.share-ico:hover {
  color: var(--text);
  border-color: var(--teal);
}
.share-ico[data-video-share="tiktok"]:hover {
  color: #25f4ee;
}
.share-ico[data-video-share="instagram"]:hover {
  color: #ff5ba3;
}
.share-ico[data-video-share="youtube"]:hover {
  color: #ff4b4b;
}
.share-ico[data-video-share="snapchat"]:hover {
  color: #fffc00;
}
.share-ico[data-share="whatsapp"]:hover {
  color: #3ddc84;
}
.share-pill {
  border: 1px solid var(--ui-line-2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border-radius: 999px;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}
.share-pill:hover {
  color: var(--text);
  border-color: var(--teal);
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.95);
  }
}
.actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
.act {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  min-height: 42px;
  color: var(--text);
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex;
}
.act svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}
.act:hover:not(:disabled) {
  background: var(--ui-panel-2);
}
.act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.actions__gap {
  flex: 1;
}
@media (width<=420px) {
  .act {
    gap: 4px;
    padding: 0 10px;
    font-size: 0.86rem;
  }
}
.status {
  min-height: 1.5em;
  color: var(--muted);
  font-size: 0.92rem;
}
.panel {
  --pn-card: var(--ui-panel-2);
  --pn-card-hi: #2d3038;
  --pn-line: var(--ui-line-2);
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  flex-direction: column;
  min-height: 520px;
  padding: 16px;
  display: flex;
  position: relative;
}
.panel.is-home {
  min-height: 0;
}
.panel__top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.panel__title {
  font-size: 1.1rem;
  font-weight: 800;
}
.panel__sub {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtle);
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}
.pn .panel__sub {
  margin: 0 0 8px;
}
.modes {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  display: grid;
}
.modes button {
  min-height: 38px;
  color: var(--muted);
  background: 0 0;
  border: 0;
  border-radius: 10px;
  padding: 0 4px;
  font-size: 0.84rem;
  font-weight: 700;
}
.modes button[aria-selected="true"],
.modes button[aria-pressed="true"] {
  background: var(--ui-panel-2);
  color: var(--text);
  box-shadow:
    0 2px 0 var(--ui-edge),
    inset 0 0 0 1px var(--ui-line-2);
}
.levels {
  gap: 6px;
  display: grid;
}
.levels button {
  border: 1px solid var(--ui-line);
  background: var(--ui-bg-2);
  text-align: left;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  display: flex;
}
.levels button:hover {
  border-color: var(--ui-line-2);
}
.levels button[aria-pressed="true"] {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--ui-bg-2));
}
.levels .face {
  width: 40px;
  height: 40px;
}
.levels span {
  line-height: 1.25;
  display: grid;
}
.levels b {
  font-weight: 800;
}
.levels small {
  color: var(--subtle);
  font-size: 0.82rem;
}
.join {
  gap: 6px;
  margin-top: 12px;
  display: grid;
}
.join label {
  color: var(--muted);
  font-size: 0.85rem;
}
.join__row {
  gap: 8px;
  display: flex;
}
.join input {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  border-radius: 12px;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
}
.swatches {
  gap: 6px;
  display: flex;
}
.swatches button {
  border: 1px solid var(--ui-line-2);
  background: var(--ui-bg-2);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
}
.swatches button[aria-pressed="true"] {
  border-color: var(--amber);
}
.log {
  font-variant-numeric: tabular-nums;
  max-height: 132px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  list-style: none;
  overflow: auto;
}
.log li {
  grid-template-columns: 2.4em 1fr 1fr;
  gap: 6px;
  padding: 2px 0;
  display: grid;
}
.log__n {
  color: var(--subtle);
}
.log__p0 {
  color: var(--amber);
  font-weight: 700;
}
.log__p1 {
  color: var(--teal);
  font-weight: 700;
}
.log__empty {
  color: var(--subtle);
  display: block !important;
}
.pn-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin-bottom: 12px;
  display: flex;
  position: relative;
}
.pn-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.pn-title:focus {
  outline: none;
}
.pn-title.is-sr,
.pn-sr {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.pn-back {
  min-height: 30px;
  color: var(--subtle);
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  display: inline-flex;
}
.pn-back:hover {
  color: var(--text);
}
.pn-tools {
  align-items: center;
  gap: 6px;
  margin-left: auto;
  display: flex;
}
.icon-btn--sm {
  background: var(--pn-card);
  width: 30px;
  height: 30px;
  color: var(--subtle);
  border-radius: 9px;
  font-size: 15px;
  line-height: 1;
}
.icon-btn--sm:hover {
  color: var(--text);
}
@media (pointer: coarse) {
  .icon-btn--sm {
    width: 40px;
    height: 40px;
  }
  .pn-back {
    min-height: 40px;
  }
}
.pn-view {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.btn--tall {
  flex-direction: column;
  gap: 0;
  min-height: 60px;
  padding: 6px 20px;
  font-size: 1.15rem;
}
.btn--tall small {
  opacity: 0.78;
  font-size: 0.76rem;
  font-weight: 600;
}
.pn .btn--block {
  margin-bottom: 16px;
}
.pn-or {
  text-align: center;
  color: var(--muted);
  margin: -4px 0 14px;
  font-size: 13.5px;
}
.pn-or .linkbtn {
  font-size: 13.5px;
}
.pn-hr {
  border-top: 1px solid var(--ui-line);
  margin: 2px 0 12px;
}
.pn-modes {
  gap: 8px;
  margin: 0;
  display: grid;
}
.pn-mode {
  background: var(--pn-card);
  width: 100%;
  color: var(--text);
  text-align: left;
  border: 1px solid #0000;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  display: flex;
}
.pn-mode:hover {
  border-color: var(--pn-line);
  background: var(--pn-card-hi);
}
.pn-mode b {
  font-size: 14.5px;
  display: block;
}
.pn-mode small {
  color: var(--subtle);
  font-size: 12px;
  display: block;
}
.pn-chev {
  color: var(--subtle);
  margin-left: auto;
}
.pn-ic {
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  display: grid;
}
.pn-ic--ai {
  background: #16302c;
}
.pn-ic--online {
  background: #2d2412;
}
.pn-ic--friend {
  background: #1e2633;
}
.pn-ic--local {
  background: #2a1f2e;
}
.pn-modehead {
  align-items: center;
  gap: 10px;
  display: flex;
}
.pn-modehead .pn-ic {
  width: 38px;
  height: 38px;
}
.pn-modehead b {
  font-size: 16px;
  display: block;
}
.pn-modehead small {
  color: var(--subtle);
  font-size: 12px;
  display: block;
}
.pn .pn-lbl {
  color: var(--subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
}
.pn .pn-lbl--first {
  margin-top: 0;
}
.pn .modes {
  grid-template-columns: repeat(2, 1fr);
}
.pn .modes button {
  min-height: 40px;
  font-size: 0.9rem;
}
.pn .modes button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pn-hint {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 12.5px;
}
.pn-hint--top {
  margin-top: 12px;
}
.pn-hint--room {
  margin: 8px 0 10px;
}
.pn .pn-field {
  gap: 0;
  margin: 0;
}
.pn-names {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.pn-name {
  gap: 4px;
  min-width: 0;
  display: grid;
}
.pn-name span {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}
.pn-name i {
  background: var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
}
.pn-name--1 i {
  background: var(--teal);
}
.pn-name--2 i {
  background: var(--pink);
}
.pn-name--3 i {
  background: var(--violet);
}
.pn-name input {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  width: 100%;
  min-width: 0;
  min-height: 38px;
  color: var(--text);
  font: inherit;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 0.9rem;
}
.pn .pn-join {
  gap: 0;
  margin: 0;
}
.pn-bottom {
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  display: grid;
}
.pn-spacer {
  height: 14px;
}
.pn-primary {
  background: var(--teal);
  width: 100%;
  color: var(--on-teal);
  text-align: center;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  font-size: 16px;
  font-weight: 800;
  display: block;
}
.pn-primary--amber {
  background: var(--amber);
  color: var(--on-amber);
}
.pn-primary--sm {
  padding: 10px;
  font-size: 14px;
}
.pn-primary small {
  opacity: 0.75;
  font-size: 11.5px;
  font-weight: 600;
  display: block;
}
.pn-primary:hover {
  filter: brightness(1.05);
}
.pn-primary.is-wait {
  opacity: 0.45;
  cursor: default;
  margin: 0;
}
.pn-primary.is-wait:hover {
  filter: none;
}
.pn-secondary {
  border: 1px solid var(--pn-line);
  background: var(--pn-card);
  width: 100%;
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
  font-weight: 700;
}
.pn-secondary:hover:not(:disabled) {
  background: var(--pn-card-hi);
}
.pn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pn-secondary--auto {
  width: auto;
  padding: 0 16px;
}
.pn-small {
  border: 1px solid var(--pn-line);
  background: var(--pn-card-hi);
  color: var(--text);
  white-space: nowrap;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}
.pn-small.is-done {
  color: var(--teal);
  border-color: var(--teal-edge);
}
@media (pointer: coarse) {
  .pn-small {
    padding: 9px 12px;
  }
}
.pn-row {
  gap: 8px;
  display: flex;
}
.pn-row > button {
  flex: 1;
  width: auto;
}
.pn-search {
  justify-items: center;
  gap: 8px;
  padding: 14px 0;
  display: grid;
}
.pn-ring {
  border: 5px solid var(--pn-card);
  border-top-color: var(--teal);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  animation: 1s linear infinite spin;
}
.pn-timer {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 800;
}
.pn-offer {
  border: 1px solid var(--pn-line);
  background: var(--pn-card);
  border-radius: 12px;
  gap: 8px;
  padding: 12px;
  display: grid;
}
.pn-offer .pn-hint {
  margin: 0;
}
.pn-code {
  border: 1px dashed var(--pn-line);
  background: var(--pn-card);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}
.pn-code b {
  letter-spacing: 0.16em;
  font-size: 20px;
}
.pn-code__btns {
  gap: 6px;
  display: flex;
}
.pn-room {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.pn-linktext {
  color: var(--subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  margin: 8px 0 0;
  font-size: 12px;
  overflow: hidden;
}
.pn-seat {
  background: var(--pn-card);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px 10px;
  display: flex;
}
.pn-seat b {
  flex: 1;
  font-size: 13.5px;
}
.pn-seat small {
  color: var(--subtle);
  font-size: 12px;
}
.pn-seat .pn-seat__wait {
  color: var(--subtle);
  font-weight: 500;
}
.pn-empty {
  border: 2px dashed var(--pn-line);
  border-radius: 50%;
  flex: none;
  width: 22px;
  height: 22px;
}
.pn-qr {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}
.pn-qr .qr {
  border-radius: 10px;
  flex: none;
  width: 88px;
  height: 88px;
}
.pn-qr .pn-hint {
  margin: 0;
}
.pn-vs {
  background: var(--pn-card);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px;
  display: flex;
}
.pn-vs.is-turn-a {
  box-shadow: inset 0 0 0 1px var(--amber);
}
.pn-vs.is-turn-t {
  box-shadow: inset 0 0 0 1px var(--teal);
}
.pn-vs .face {
  flex: none;
  width: 24px;
  height: 24px;
}
.pn-who {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.pn-who b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  display: block;
  overflow: hidden;
}
.pn-who small {
  color: var(--subtle);
  font-size: 12px;
  display: block;
}
.pn-dot {
  border-radius: 50%;
  flex: none;
  width: 22px;
  height: 22px;
}
.pn-dot--a {
  background: var(--amber);
}
.pn-dot--t {
  background: var(--teal);
}
.pn-dot--p {
  background: #ff5a8a;
}
.pn-dot--v {
  background: #8e7cff;
}
.pn-moves {
  background: var(--pn-card);
  color: #cfd0d6;
  border-radius: 12px;
  height: 110px;
  max-height: none;
  padding: 8px 10px;
  font:
    12.5px/1.7 ui-monospace,
    Consolas,
    monospace;
  overflow: auto;
}
.pn-moves li {
  grid-template-columns: 26px 5.5em 1fr;
  gap: 0;
  padding: 0;
}
.pn-moves .log__p0,
.pn-moves .log__p1 {
  color: inherit;
  font-weight: 400;
}
.pn-sheet {
  z-index: 5;
  background: #0a0a0cb8;
  border-radius: 18px;
  align-items: flex-end;
  padding: 12px;
  display: flex;
  position: absolute;
  inset: 0;
}
.pn-sheet__box {
  border: 1px solid var(--pn-line);
  background: var(--pn-card-hi);
  border-radius: 14px;
  width: 100%;
  padding: 14px;
}
.pn-sheet__box > p {
  margin: 0 0 10px;
}
.pn-sheet .swatches button {
  background: var(--pn-card);
  border-color: var(--pn-line);
  flex: 1;
  justify-content: center;
  padding: 6px;
  font-size: 12px;
}
.pn-sheet .swatches button[aria-pressed="true"] {
  border-color: var(--amber);
}
.table.is-waiting .bd {
  opacity: 0.5;
  transition: opacity 0.2s;
}
@media (width<=1023px) {
  .play__grid {
    gap: 12px;
  }
  .panel {
    min-height: 0;
    scroll-margin-top: 74px;
  }
  .panel.is-home .pn-head {
    min-height: 0;
    margin: 0;
  }
  .panel.is-home .pn-tools {
    display: none;
  }
  .panel.is-home .pn-title {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
  .pbar [data-change] {
    display: none;
  }
  .pn-sheet {
    z-index: 95;
    padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
    position: fixed;
  }
}
.bd {
  filter: drop-shadow(0 18px 26px #0000008c);
  touch-action: manipulation;
  width: 100%;
  height: auto;
  overflow: visible;
}
.bd-stop-tray1 {
  stop-color: var(--tray-1);
}
.bd-stop-tray2 {
  stop-color: var(--tray-2);
}
.bd-tray__inner {
  fill: var(--tray-inner);
  stroke: #00000059;
  stroke-width: 2px;
}
.bd-cell {
  fill: var(--cell);
  stroke: var(--cell-edge);
  stroke-width: 1.5px;
}
.bd-cell--goal0 {
  fill: color-mix(in srgb, var(--amber) 30%, var(--cell));
  stroke: color-mix(in srgb, var(--amber) 45%, transparent);
}
.bd-cell--goal1 {
  fill: color-mix(in srgb, var(--teal) 24%, var(--cell));
  stroke: color-mix(in srgb, var(--teal) 40%, transparent);
}
.bd-cell--hl {
  animation: 2.4s ease-in-out infinite goalFlash;
}
@keyframes goalFlash {
  50% {
    fill: color-mix(in srgb, var(--amber) 62%, var(--cell));
  }
}
.bd-path {
  fill: none;
  stroke-width: 5.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 13;
  opacity: 0.9;
  animation: 1.2s linear infinite march;
}
.bd-path--p0 {
  stroke: var(--amber);
}
.bd-path--p1 {
  stroke: var(--teal);
}
@keyframes march {
  to {
    stroke-dashoffset: -13.1px;
  }
}
.bd-wall--p0 .bd-wall__top {
  fill: var(--amber);
}
.bd-wall--p0 .bd-wall__edge {
  fill: var(--amber-edge);
}
.bd-wall--p1 .bd-wall__top {
  fill: var(--teal);
}
.bd-wall--p1 .bd-wall__edge {
  fill: var(--teal-edge);
}
.bd-wall.is-new {
  transform-box: fill-box;
  transform-origin: 50%;
  animation: 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both wallDrop;
}
.bd-wall.is-loop {
  transform-box: fill-box;
  transform-origin: 50%;
  animation: 3.2s cubic-bezier(0.2, 1.5, 0.4, 1) infinite wallLoop;
}
@keyframes wallDrop {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(1.1);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wallLoop {
  0%,
  12% {
    opacity: 0;
    transform: translateY(-18px) scale(1.1);
  }
  30%,
  88% {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
  }
}
.bd-pawn {
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.45, 1);
}
.bd-pawn__shadow {
  fill: #0006;
}
.bd-pawn__rim {
  fill: #00000059;
}
.bd-pawn__shine {
  fill: #fff;
  opacity: 0.6;
}
.bd-stop-hi--p0 {
  stop-color: var(--amber-hi);
}
.bd-stop-mid--p0 {
  stop-color: var(--amber);
}
.bd-stop-lo--p0 {
  stop-color: var(--amber-lo);
}
.bd-stop-hi--p1 {
  stop-color: var(--teal-hi);
}
.bd-stop-mid--p1 {
  stop-color: var(--teal);
}
.bd-stop-lo--p1 {
  stop-color: var(--teal-lo);
}
.bd-target {
  cursor: pointer;
  outline: none;
}
.bd-target__hit {
  fill: #0000;
}
.bd-target__dot {
  stroke-width: 2.5px;
  transform-box: fill-box;
  transform-origin: 50%;
  transition: r 0.15s;
  animation: 1.6s ease-in-out infinite dotPulse;
}
.bd-target--p0 .bd-target__dot {
  fill: color-mix(in srgb, var(--amber) 50%, transparent);
  stroke: var(--amber);
}
.bd-target--p1 .bd-target__dot {
  fill: color-mix(in srgb, var(--teal) 45%, transparent);
  stroke: var(--teal);
}
.bd-target:hover .bd-target__dot {
  r: 11;
}
.bd-target:focus-visible .bd-target__hit {
  stroke: var(--focus);
  stroke-width: 3px;
}
@keyframes dotPulse {
  50% {
    transform: scale(1.15);
  }
}
.table[data-play-mode] .bd {
  cursor: default;
}
.bd-ghost {
  pointer-events: none;
  stroke-width: 2.5px;
  stroke-dasharray: 6 4;
}
.bd-ghost.is-ok.bd-ghost--p0 {
  fill: color-mix(in srgb, var(--amber) 60%, transparent);
  stroke: var(--amber);
}
.bd-ghost.is-ok.bd-ghost--p1 {
  fill: color-mix(in srgb, var(--teal) 60%, transparent);
  stroke: var(--teal);
}
.bd-ghost.is-bad {
  fill: #ff464659;
  stroke: var(--danger);
}
.bd-ghost.is-shake {
  transform-box: fill-box;
  animation: 0.45s shake;
}
@keyframes shake {
  20%,
  60% {
    transform: translate(-5px);
  }
  40%,
  80% {
    transform: translate(5px);
  }
}
#game,
.g-sec {
  scroll-margin-top: 74px;
}
@media (width>=1024px) {
  #game,
  .g-sec {
    scroll-margin-top: 16px;
  }
}
.guide {
  max-width: 1080px;
  padding: clamp(40px, 6vw, 80px) var(--gut) 0;
  gap: clamp(48px, 7vw, 88px);
  margin: 0 auto;
  display: grid;
}
.g-sec h2 {
  letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
}
.g-sec h2:before {
  content: "";
  background: linear-gradient(90deg, var(--amber) 0 45%, transparent 45% 55%, var(--teal) 55% 100%);
  border-radius: 999px;
  width: 46px;
  height: 7px;
  margin-bottom: 14px;
  display: block;
}
.g-lede {
  color: var(--text);
  max-width: 62ch;
  margin-top: 14px;
  font-size: 1.08rem;
}
.g-sec p {
  color: var(--muted);
  max-width: 62ch;
}
.g-sec p + p {
  margin-top: 12px;
}
.g-more {
  margin-top: 18px;
}
.g-more a {
  color: var(--teal);
  text-underline-offset: 3px;
  font-weight: 700;
}
.g-what {
  align-items: center;
  gap: 28px;
  display: grid;
}
@media (width>=860px) {
  .g-what {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }
}
.facts {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}
.facts li {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 12px;
  padding: 7px 12px;
  font-size: 0.9rem;
}
.facts b {
  color: var(--text);
  margin-right: 4px;
  font-weight: 900;
}
.g-what__img {
  margin: 0;
}
.g-what__img img {
  border-radius: 22px;
  width: 100%;
  height: auto;
}
.g-what__img figcaption {
  color: var(--subtle);
  margin-top: 10px;
  font-size: 0.86rem;
}
.rules {
  gap: 16px;
  margin-top: 26px;
  display: grid;
}
@media (width>=760px) {
  .rules {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rules li {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  padding: 16px;
}
.rules__board {
  max-width: 260px;
  margin: 0 auto 14px;
}
.rules__board .bd {
  filter: none;
}
.rules h3 {
  align-items: center;
  gap: 10px;
  font-size: 1.12rem;
  font-weight: 800;
  display: flex;
}
.rules__n {
  background: var(--amber);
  width: 28px;
  height: 28px;
  color: var(--on-amber);
  border-radius: 9px;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 900;
  display: inline-grid;
}
.rules li:nth-child(2) .rules__n {
  background: var(--teal);
  color: var(--on-teal);
}
.rules p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 0.95rem;
}
.ways {
  gap: 10px;
  margin-top: 24px;
  display: grid;
}
@media (width>=640px) {
  .ways {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width>=980px) {
  .ways {
    grid-template-columns: repeat(3, 1fr);
  }
}
.way {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  text-align: left;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 0 var(--ui-edge);
  transition:
    transform 80ms var(--ease),
    box-shadow 80ms var(--ease),
    background 0.15s;
  border-radius: 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  display: flex;
}
.way:hover {
  background: var(--ui-panel-2);
}
.way:active {
  box-shadow: 0 1px 0 var(--ui-edge);
  transform: translateY(3px);
}
.way .face {
  width: 44px;
  height: 44px;
}
.way span {
  line-height: 1.3;
  display: grid;
}
.way b {
  font-weight: 800;
}
.way small {
  color: var(--subtle);
  font-size: 0.88rem;
}
.way__icon {
  background: var(--ui-panel-2);
  border-radius: 14px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  position: relative;
  overflow: hidden;
}
.way__icon:before,
.way__icon:after {
  content: "";
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 15px;
}
.way__icon--online:before {
  background: var(--amber);
  left: 7px;
}
.way__icon--online:after {
  background: var(--teal);
  right: 7px;
}
.way__icon--friend:before {
  background: var(--amber);
  left: 6px;
}
.way__icon--friend:after {
  background: var(--teal);
  box-shadow: -10px 0 0 -5px var(--text);
  right: 6px;
}
.way__icon--local:before {
  background: var(--ui-line-2);
  border-radius: 5px;
  width: 16px;
  height: 32px;
  top: 6px;
  left: 14px;
}
.way__icon--local:after {
  background: var(--amber);
  width: 10px;
  height: 10px;
  top: 18px;
  left: 17px;
}
.way__icon--four:before {
  background: var(--amber);
  width: 11px;
  height: 11px;
  box-shadow:
    17px 0 0 var(--teal),
    0 17px 0 #ff5a8a,
    17px 17px 0 #8e7cff;
  top: 8px;
  left: 8px;
}
.way__icon--four:after {
  display: none;
}
.steps-list {
  gap: 10px;
  max-width: 760px;
  margin-top: 20px;
  display: grid;
}
.steps-list li {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 16px;
  gap: 2px;
  padding: 14px 16px;
  font-size: 0.95rem;
  display: grid;
}
.steps-list b {
  color: var(--text);
  font-weight: 800;
}
.faq {
  gap: 10px;
  max-width: 820px;
  margin-top: 22px;
  display: grid;
}
.faq details {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
}
.faq summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  list-style: none;
  display: flex;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:after {
  content: "+";
  background: var(--ui-panel-2);
  width: 26px;
  height: 26px;
  transition: transform 0.2s var(--ease);
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  font-weight: 800;
  display: grid;
}
.faq details[open] summary:after {
  transform: rotate(45deg);
}
.faq h3 {
  font-size: 1.02rem;
  font-weight: 800;
}
.faq details p {
  color: var(--muted);
  padding: 0 18px 18px;
}
.foot {
  max-width: 1080px;
  padding: 36px var(--gut) 40px;
  border-top: 1px solid var(--ui-line);
  margin: clamp(48px, 7vw, 88px) auto 0;
  font-size: 0.92rem;
}
.foot__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  display: grid;
}
@media (width>=760px) {
  .foot__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.foot nav {
  align-content: start;
  gap: 7px;
  display: grid;
}
.foot h2 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--subtle);
  margin-bottom: 2px;
  font-size: 0.76rem;
}
.foot nav a {
  color: var(--text);
  text-decoration: none;
}
.foot nav a:hover {
  color: var(--amber);
}
.foot__legal {
  color: var(--subtle);
  gap: 4px;
  margin-top: 30px;
  font-size: 0.8rem;
  display: grid;
}
.tabbar {
  z-index: 60;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ui-line);
  background: #121316f0;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.tabbar a,
.tabbar button {
  color: var(--subtle);
  background: 0 0;
  border: 0;
  justify-items: center;
  gap: 3px;
  padding: 6px 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  display: grid;
}
.tabbar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 23px;
  height: 23px;
}
.tabbar [aria-current="page"],
.tabbar [aria-current="true"] {
  color: var(--amber);
}
.tabbar [aria-current="page"] svg,
.tabbar [aria-current="true"] svg {
  fill: var(--amber);
}
@media (width>=768px) {
  .tabbar {
    display: none;
  }
}
.sheet {
  z-index: 90;
  max-height: 84svh;
  padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom));
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-line-2);
  visibility: hidden;
  transition:
    transform 0.28s var(--ease),
    visibility 0.28s;
  border-radius: 22px 22px 0 0;
  gap: 14px;
  display: grid;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  transform: translateY(105%);
}
.sheet.is-open {
  visibility: visible;
  transform: none;
}
@media (width>=768px) {
  .sheet {
    border-radius: 0;
    width: 380px;
    max-height: none;
    top: 0;
    bottom: 0;
    left: auto;
    transform: translate(105%);
  }
}
.sheet__nav {
  display: grid;
}
.sheet__nav a {
  border-bottom: 1px solid var(--ui-line);
  padding: 13px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
.backdrop {
  z-index: 80;
  background: #0000008c;
  position: fixed;
  inset: 0;
}
.toast {
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 120;
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  background: #000;
  border-radius: 14px;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  font-size: 0.92rem;
  transition:
    opacity 0.2s,
    transform 0.2s;
  position: fixed;
  transform: translate(-50%, 16px);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%);
}
@media (width>=768px) {
  .toast {
    bottom: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
.kbwall {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.kbwall:focus-visible {
  clip-path: none;
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-2);
  border-radius: 12px;
  width: auto;
  height: auto;
  min-height: 42px;
  margin: 0;
  padding: 0 14px;
  font-weight: 700;
  position: static;
  overflow: visible;
}
.tray {
  align-items: stretch;
  gap: 8px;
  display: none;
}
html[data-input="touch"] .tray {
  display: flex;
}
html[data-input="mouse"] .tray {
  display: none;
}
@media (pointer: coarse) {
  html:not([data-input="mouse"]) .tray {
    display: flex;
  }
}
.tray__piece {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  min-width: 84px;
  min-height: 56px;
  color: var(--subtle);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s,
    background 0.15s;
  border-radius: 14px;
  grid-template-rows: 28px auto;
  place-items: center;
  gap: 4px;
  padding: 6px 12px;
  display: grid;
}
.tray__piece i {
  background: var(--amber);
  box-shadow: 0 3px 0 var(--amber-edge);
  border-radius: 5px;
  display: block;
}
.tray__piece--h i {
  width: 54px;
  height: 8px;
}
.tray__piece--v i {
  width: 8px;
  height: 26px;
}
.tray__piece span {
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}
.tray__piece:active:not(:disabled) {
  transform: scale(0.95);
}
.tray__piece[aria-pressed="true"] {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, var(--ui-panel));
  color: var(--text);
}
.tray__piece:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.table[data-turn="1"][data-play-mode="local"] .tray__piece i {
  background: var(--teal);
  box-shadow: 0 3px 0 var(--teal-edge);
}
.table[data-turn="1"][data-play-mode="local"] .tray__piece[aria-pressed="true"] {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 13%, var(--ui-panel));
}
@media (width<=380px) {
  .tray__piece {
    min-width: 72px;
    padding-inline: 8px;
  }
  .tray__piece--h i {
    width: 46px;
  }
}
.drag-piece {
  z-index: 300;
  pointer-events: none;
  background: var(--amber);
  box-shadow:
    0 4px 0 var(--amber-edge),
    0 0 20px color-mix(in srgb, var(--amber) 65%, transparent);
  opacity: 0.92;
  border-radius: 999px;
  position: fixed;
  transform: translate(-50%, -50%) scale(1.12);
}
.drag-piece[data-p="1"] {
  background: var(--teal);
  box-shadow:
    0 4px 0 var(--teal-edge),
    0 0 20px color-mix(in srgb, var(--teal) 65%, transparent);
}
.drag-piece.is-snap {
  opacity: 1;
}
.bd-slot {
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 0.1s;
}
.bd-slot--p0 {
  fill: var(--amber);
}
.bd-slot--p1 {
  fill: var(--teal);
}
.bd-slot:hover,
.bd-slot:active {
  opacity: 0.95;
}
.bd.is-groove {
  cursor: pointer;
}
.net {
  z-index: 5;
  border: 1px solid var(--ui-line-2);
  backdrop-filter: blur(8px);
  text-align: center;
  width: min(94%, 400px);
  animation: pop 0.35s var(--ease) both;
  background: #121316f5;
  border-radius: 22px;
  justify-items: center;
  gap: 12px;
  padding: 20px 18px;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 50px -12px #000c;
}
.net__eyebrow {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.72rem;
  font-weight: 800;
}
.net__eyebrow:empty {
  display: none;
}
.net__title {
  letter-spacing: -0.03em;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
}
.net__body {
  justify-items: center;
  gap: 12px;
  width: 100%;
  display: grid;
}
.net__text {
  color: var(--muted);
  font-size: 0.95rem;
}
.net__small {
  color: var(--subtle);
  margin-top: 4px;
  font-size: 0.84rem;
}
.net__actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}
.net .room-code span {
  min-height: 44px;
  font-size: 1.3rem;
}
.net .room-card__row {
  text-align: left;
  width: 100%;
}
.net .room-card__row .qr {
  width: 96px;
  height: 96px;
}
.net .room-link {
  width: 100%;
}
.spinner {
  border: 4px solid var(--ui-panel-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  animation: 0.9s linear infinite spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.field {
  gap: 6px;
  margin-bottom: 12px;
  display: grid;
}
.field label {
  color: var(--muted);
  font-size: 0.85rem;
}
.field input {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  border-radius: 12px;
  min-height: 40px;
  padding: 0 12px;
}
.mslim {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 14px;
  display: flex;
}
.mslim__mode {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 800;
  overflow: hidden;
}
.mslim__btn {
  border: 1px solid var(--ui-line-2);
  background: var(--ui-panel-2);
  min-height: 40px;
  color: var(--text);
  border-radius: 12px;
  flex-shrink: 0;
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 800;
}
.mslim__btn:hover {
  border-color: var(--amber);
}
@media (width>=1024px) {
  .mslim {
    display: none !important;
  }
}
@media (width<=767px) {
  .play .board-wrap {
    width: min(100%, max(260px, 100svh - 400px));
    margin-inline: auto;
  }
}
@media (width>=768px) and (width<=1023px) {
  .play .board-wrap {
    width: min(100%, max(420px, 100svh - 340px));
    margin-inline: auto;
  }
}
@media (width<=767px) and (height<=760px) {
  .play .mslim {
    padding-block: 4px;
  }
  .play .mslim__btn {
    min-height: 36px;
  }
  .play .pbar {
    padding: 4px 8px;
  }
  .play .pbar .face {
    width: 30px;
    height: 30px;
  }
  .play .fp-chip {
    padding-block: 4px;
  }
  .play .tray__piece {
    grid-template-rows: 20px auto;
    min-height: 46px;
    padding: 4px 10px;
  }
  .play .board-wrap {
    width: min(100%, max(260px, 100svh - 356px));
  }
}
.page {
  max-width: 1080px;
  padding: 18px var(--gut) 0;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 7vw, 88px);
  margin: 0 auto;
  display: grid;
}
.page--wide {
  max-width: 1200px;
}
.crumbs {
  color: var(--subtle);
  font-size: 0.84rem;
}
.crumbs ol {
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.crumbs li {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}
.crumbs li + li:before {
  content: "";
  border-right: 2px solid var(--subtle);
  border-top: 2px solid var(--subtle);
  opacity: 0.6;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration: underline;
}
.crumbs [aria-current] {
  color: var(--text);
  font-weight: 600;
}
.hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  display: grid;
}
@media (width>=860px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
  }
}
.eyebrow {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
}
.eyebrow:before {
  content: "";
  background: linear-gradient(90deg, var(--amber) 0 45%, transparent 45% 55%, var(--teal) 55% 100%);
  border-radius: 999px;
  width: 34px;
  height: 6px;
}
.hero h1 {
  letter-spacing: -0.04em;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  font-weight: 900;
  line-height: 1.02;
}
.hero .g-lede {
  margin-top: 16px;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}
.hero__actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}
.hero__board {
  justify-self: center;
  width: min(100%, 440px);
  position: relative;
}
.hero__board:before {
  content: "";
  z-index: -1;
  background: radial-gradient(closest-side, var(--board-glow), transparent);
  pointer-events: none;
  position: absolute;
  inset: -8%;
}
.hero__board .bd {
  filter: drop-shadow(0 18px 26px #00000080);
}
.doc {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  display: grid;
}
@media (width>=1120px) {
  .doc {
    grid-template-columns: 196px minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }
}
.doc__body {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  min-width: 0;
  display: grid;
}
.toc {
  min-width: 0;
  font-size: 0.92rem;
}
.toc__title {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 10px;
  font-size: 0.74rem;
}
.toc ol {
  scrollbar-width: none;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  display: flex;
  overflow-x: auto;
}
.toc ol::-webkit-scrollbar {
  display: none;
}
.toc a {
  white-space: nowrap;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 999px;
  align-items: center;
  padding: 8px 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}
.toc a:hover {
  color: var(--text);
  border-color: var(--ui-line-2);
}
@media (width>=1120px) {
  .toc {
    position: sticky;
    top: 24px;
  }
  .toc ol {
    border-left: 2px solid var(--ui-line);
    flex-direction: column;
    gap: 2px;
    padding: 0;
    overflow: visible;
  }
  .toc a {
    white-space: normal;
    background: 0 0;
    border: 0;
    border-left: 2px solid #0000;
    border-radius: 0 10px 10px 0;
    margin-left: -2px;
    padding: 7px 14px;
    line-height: 1.3;
  }
  .toc a:hover {
    background: var(--ui-panel);
  }
  .toc a[aria-current="true"] {
    color: var(--text);
    border-left-color: var(--amber);
    background: var(--ui-panel);
  }
}
.lesson {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: clamp(18px, 3vw, 30px);
  scroll-margin-top: 74px;
  display: grid;
}
@media (width>=1024px) {
  .lesson {
    scroll-margin-top: 16px;
  }
}
@media (width>=760px) {
  .lesson {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 36px;
  }
  .lesson:nth-of-type(2n) {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  }
  .lesson:nth-of-type(2n) .lesson__text {
    order: 2;
  }
}
.lesson__n {
  background: var(--amber);
  width: 34px;
  height: 34px;
  color: var(--on-amber);
  border-radius: 11px;
  place-items: center;
  margin-bottom: 12px;
  font-weight: 900;
  display: inline-grid;
}
.lesson:nth-of-type(2n) .lesson__n {
  background: var(--teal);
  color: var(--on-teal);
}
.lesson h2 {
  letter-spacing: -0.03em;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 900;
  line-height: 1.08;
}
.lesson p {
  color: var(--muted);
  max-width: 56ch;
  margin-top: 12px;
}
.lesson p b,
.lesson li b {
  color: var(--text);
}
.lesson ul {
  color: var(--muted);
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.lesson li {
  max-width: 56ch;
  padding-left: 20px;
  position: relative;
}
.lesson li:before {
  content: "";
  background: var(--teal);
  border-radius: 2px;
  width: 9px;
  height: 4px;
  position: absolute;
  top: 0.6em;
  left: 0;
}
.lesson li:nth-child(odd):before {
  background: var(--amber);
}
.fig {
  justify-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  display: grid;
}
.fig .bd {
  filter: drop-shadow(0 12px 18px #00000080);
  width: 100%;
  max-width: 340px;
}
.fig--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fig--pair figcaption {
  grid-column: 1/-1;
}
.fig--pair .bd {
  max-width: 100%;
}
.fig figcaption {
  text-align: center;
  max-width: 34ch;
  color: var(--subtle);
  font-size: 0.86rem;
}
.bd-mark {
  fill: none;
  stroke: var(--focus);
  stroke-width: 3px;
  stroke-dasharray: 7 5;
  pointer-events: none;
}
.try {
  justify-items: center;
  gap: 10px;
  width: 100%;
  display: grid;
}
.try__msg {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  width: 100%;
  max-width: 340px;
  min-height: 3.4em;
  color: var(--muted);
  border-radius: 12px;
  margin: 0;
  padding: 10px 14px;
  font-size: 0.92rem;
}
.try__msg.is-good {
  border-color: color-mix(in srgb, var(--teal) 70%, transparent);
  color: var(--text);
}
.try__msg.is-bad {
  border-color: color-mix(in srgb, var(--danger) 70%, transparent);
  color: var(--text);
}
.try__row {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}
.try .bd-target {
  cursor: pointer;
}
.try .bd-slot {
  opacity: 0.5;
}
.try .bd-slot--bad {
  fill: var(--danger);
  opacity: 0.55;
}
.try .bd-slot:focus-visible {
  opacity: 1;
  stroke: var(--focus);
  stroke-width: 3px;
  outline: none;
}
.callout {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-left: 5px solid var(--teal);
  border-radius: 16px;
  padding: 16px 18px;
}
.callout--rule {
  border-left-color: var(--amber);
}
.callout p {
  color: var(--muted);
  max-width: none;
  margin: 0;
}
.callout p + p {
  margin-top: 8px;
}
.callout b {
  color: var(--text);
}
.tbl-wrap {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  overflow-x: auto;
}
.tbl {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.95rem;
}
.tbl th {
  text-align: left;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--subtle);
  border-bottom: 1px solid var(--ui-line-2);
  padding: 12px 16px;
  font-size: 0.74rem;
}
.tbl td {
  border-bottom: 1px solid var(--ui-line);
  color: var(--muted);
  vertical-align: top;
  padding: 12px 16px;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl td:first-child {
  white-space: nowrap;
}
code,
.code {
  color: var(--amber-hi);
  background: var(--ui-panel-2);
  white-space: nowrap;
  border-radius: 8px;
  padding: 2px 8px;
  font-family:
    ui-monospace,
    SF Mono,
    Cascadia Code,
    Consolas,
    monospace;
  font-size: 0.92em;
  font-weight: 700;
}
.record {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  color: var(--text);
  white-space: pre;
  border-radius: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  font-family:
    ui-monospace,
    SF Mono,
    Consolas,
    monospace;
  font-size: 0.92rem;
  overflow-x: auto;
}
.mistakes {
  counter-reset: mistake;
  gap: 12px;
  max-width: 820px;
  margin-top: 22px;
  display: grid;
}
.mistakes li {
  counter-increment: mistake;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  padding: 16px 18px;
  display: grid;
}
.mistakes li:before {
  content: counter(mistake);
  background: var(--ui-panel-2);
  width: 32px;
  height: 32px;
  color: var(--amber);
  border-radius: 10px;
  grid-row: 1 / span 2;
  align-self: start;
  place-items: center;
  font-weight: 900;
  display: grid;
}
.mistakes b {
  color: var(--text);
  font-size: 1.04rem;
}
.mistakes span {
  color: var(--muted);
}
.boxed {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  margin-top: 22px;
  padding: clamp(14px, 3vw, 24px);
}
.bd-slot.is-shake {
  transform-box: fill-box;
  animation: 0.45s shake;
}
@media (width<=600px) {
  .tbl {
    min-width: 0;
  }
  .tbl thead {
    display: none;
  }
  .tbl tr {
    border-bottom: 1px solid var(--ui-line);
    gap: 6px;
    padding: 12px 14px;
    display: grid;
  }
  .tbl tr:last-child {
    border-bottom: 0;
  }
  .tbl td {
    border: 0;
    padding: 0;
  }
  .tbl td:first-child {
    white-space: normal;
  }
}
.lineup-card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  justify-self: center;
  gap: 14px;
  width: min(100%, 460px);
  padding: clamp(16px, 3vw, 24px);
  display: grid;
}
.lineup-card__title {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  text-align: center;
  font-size: 0.76rem;
  font-weight: 800;
}
.lineup {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.lineup a {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s;
  border-radius: 18px;
  justify-items: center;
  gap: 8px;
  padding: 12px 4px 10px;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  display: grid;
}
.lineup a:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
}
.lineup .face {
  width: clamp(52px, 11vw, 80px);
  height: clamp(52px, 11vw, 80px);
}
.fp-hero .bd {
  max-width: 380px;
  margin-inline: auto;
}
.fp-ways {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.fp-ways a {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  text-align: center;
  min-height: 44px;
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s;
  border-radius: 14px;
  place-items: center;
  padding: 6px 8px;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  display: grid;
}
.fp-ways a:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.opp-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 26px;
  display: grid;
}
@media (width>=760px) {
  .opp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.opp {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 3vw, 24px);
  scroll-margin-top: 74px;
  display: grid;
}
.opp__head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  display: grid;
}
.opp__head .face {
  width: 64px;
  height: 64px;
}
.opp h3 {
  letter-spacing: -0.03em;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
}
.opp__tag {
  color: var(--teal);
  margin-top: 2px;
  font-size: 0.92rem;
  font-weight: 600;
}
.opp__rank {
  align-items: flex-end;
  gap: 3px;
  display: inline-flex;
}
.opp__rank i {
  background: var(--ui-panel-2);
  border-radius: 3px;
  width: 8px;
}
.opp__rank i:first-child {
  height: 10px;
}
.opp__rank i:nth-child(2) {
  height: 16px;
}
.opp__rank i:nth-child(3) {
  height: 22px;
}
.opp__rank i:nth-child(4) {
  height: 28px;
}
.opp__rank i.on {
  background: var(--teal);
}
.opp__text {
  color: var(--muted);
}
.opp__stats {
  gap: 0;
  margin: 0;
  display: grid;
}
.opp__stats div {
  border-top: 1px solid var(--ui-line);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  font-size: 0.93rem;
  display: flex;
}
.opp__stats dt {
  color: var(--subtle);
}
.opp__stats dd {
  text-align: right;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  display: inline-flex;
}
.meter {
  background: var(--ui-panel-2);
  border-radius: 999px;
  width: 84px;
  height: 7px;
  display: inline-block;
  overflow: hidden;
}
.meter i {
  height: 100%;
  width: calc(var(--v) * 100%);
  background: var(--teal);
  border-radius: 999px;
  display: block;
}
.opp__tip {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.94rem;
}
.opp__tip b {
  color: var(--text);
}
.opp .btn {
  justify-self: start;
}
.room-card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  justify-self: center;
  gap: 14px;
  width: min(100%, 400px);
  padding: clamp(18px, 3vw, 24px);
  display: grid;
  box-shadow: 0 24px 50px -24px #000c;
}
.room-card__label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.76rem;
  font-weight: 800;
}
.room-code {
  gap: 6px;
  display: flex;
}
.room-code span {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line-2);
  min-height: 54px;
  color: var(--amber-hi);
  border-radius: 12px;
  flex: 1;
  place-items: center;
  font-family:
    ui-monospace,
    SF Mono,
    Consolas,
    monospace;
  font-size: 1.6rem;
  font-weight: 800;
  display: grid;
}
.room-link {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.86rem;
  display: flex;
  overflow: hidden;
}
.room-link span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.room-card__row {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  display: grid;
}
.room-card__row .qr {
  border-radius: 10px;
  width: 112px;
  height: 112px;
}
.room-status {
  color: var(--teal);
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
}
.room-status:before {
  content: "";
  background: var(--teal);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  animation: 1.4s ease-in-out infinite dotPulse;
}
.flow {
  counter-reset: flow;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 26px;
  display: grid;
}
@media (width>=820px) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.flow li {
  counter-increment: flow;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  align-content: start;
  gap: 8px;
  padding: 20px;
  display: grid;
}
.flow li:before {
  content: counter(flow);
  background: var(--amber);
  width: 38px;
  height: 38px;
  color: var(--on-amber);
  border-radius: 12px;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
  display: grid;
}
.flow li:nth-child(2):before {
  background: var(--teal);
  color: var(--on-teal);
}
.flow b {
  font-size: 1.15rem;
  font-weight: 800;
}
.flow span {
  color: var(--muted);
}
.join-card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  gap: 12px;
  max-width: 560px;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 26px);
  display: grid;
}
.join-card label {
  font-weight: 800;
}
.join-card__row {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}
.join-card input {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 14px;
  flex: 180px;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  font-family:
    ui-monospace,
    SF Mono,
    Consolas,
    monospace;
  font-size: 1.25rem;
  font-weight: 700;
}
.join-card input::placeholder {
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 500;
}
.join-card small {
  color: var(--subtle);
}
.article-head {
  gap: 6px;
  max-width: 760px;
  display: grid;
}
.article-head h1 {
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  font-weight: 900;
  line-height: 1.04;
}
.article-head .g-lede {
  margin-top: 12px;
}
.takeaways {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-left: 5px solid var(--amber);
  border-radius: 20px;
  max-width: 760px;
  margin-top: 8px;
  padding: 18px 20px;
}
.takeaways__title {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.76rem;
  font-weight: 800;
}
.takeaways ul {
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.takeaways li {
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.takeaways li:before {
  content: "";
  background: var(--teal);
  border-radius: 2px;
  width: 10px;
  height: 4px;
  position: absolute;
  top: 0.62em;
  left: 0;
}
.article {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  max-width: 760px;
  display: grid;
}
.article .g-sec p + .fig,
.article .g-sec .fig + p {
  margin-top: 16px;
}
.article .fig {
  margin-top: 18px;
}
.article .fig--pair .bd {
  max-width: 100%;
}
.article .fig figcaption {
  max-width: 60ch;
}
.article ol.checklist {
  counter-reset: ck;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.article ol.checklist li {
  counter-increment: ck;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  border-radius: 16px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 14px 16px;
  display: grid;
}
.article ol.checklist li:before {
  content: counter(ck);
  background: var(--amber);
  width: 30px;
  height: 30px;
  color: var(--on-amber);
  border-radius: 10px;
  place-items: center;
  font-weight: 900;
  display: grid;
}
.article ol.checklist li:nth-child(2):before {
  background: var(--teal);
  color: var(--on-teal);
}
.article ol.checklist b {
  color: var(--text);
}
.guides {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
  display: grid;
}
@media (width>=820px) {
  .guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.guide-card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s;
  border-radius: 24px;
  align-content: start;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  display: grid;
}
.guide-card:hover {
  border-color: var(--ui-line-2);
  transform: translateY(-3px);
}
.guide-card .bd {
  filter: none;
}
.guide-card b {
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
}
.guide-card span {
  color: var(--muted);
  font-size: 0.94rem;
}
.guide-card em {
  color: var(--teal);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 800;
}
.guides .guide-card {
  grid-template-rows: auto auto 1fr auto auto;
  align-content: stretch;
}
.guide-card .guide-card__cta {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-2);
  min-height: 42px;
  color: var(--text);
  border-radius: 12px;
  justify-self: start;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 0.92rem;
  font-weight: 800;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  display: inline-flex;
}
.guide-card .guide-card__cta i {
  transition: transform 0.15s var(--ease);
  font-style: normal;
}
.guide-card:hover .guide-card__cta,
.guide-card:focus-visible .guide-card__cta {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
}
.guide-card:hover .guide-card__cta i {
  transform: translate(3px);
}
.nextcard {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  gap: 4px;
  max-width: 760px;
  padding: 18px 20px;
  text-decoration: none;
  display: grid;
}
.nextcard:hover {
  border-color: var(--teal);
}
.nextcard small {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.76rem;
  font-weight: 800;
}
.nextcard b {
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  font-weight: 900;
}
.nextcard span {
  color: var(--muted);
}
.foot__social {
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.foot__social a,
.sheet__social a {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}
.foot__social a:hover,
.sheet__social a:hover {
  border-color: var(--teal);
}
.foot__social svg,
.sheet__social svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}
.sheet__social {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.rail {
  scrollbar-width: none;
  overflow-y: auto;
}
.rail::-webkit-scrollbar {
  display: none;
}
.platforms {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
  display: grid;
}
@media (width>=820px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.plat {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 3vw, 24px);
  scroll-margin-top: 74px;
  display: grid;
}
.plat__head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  display: grid;
}
.plat__icon {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-2);
  border-radius: 16px;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
}
.plat__icon svg {
  fill: none;
  width: 28px;
  height: 28px;
  stroke: var(--text);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plat h3 {
  letter-spacing: -0.03em;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
}
.plat__sub {
  color: var(--subtle);
  font-size: 0.9rem;
}
.plat p {
  color: var(--muted);
}
.plat ul {
  color: var(--muted);
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.94rem;
  list-style: none;
  display: grid;
}
.plat li {
  padding-left: 18px;
  position: relative;
}
.plat li:before {
  content: "";
  background: var(--teal);
  border-radius: 2px;
  width: 8px;
  height: 4px;
  position: absolute;
  top: 0.62em;
  left: 0;
}
.plat__badge {
  border-radius: 12px;
  justify-self: start;
  line-height: 0;
  display: inline-block;
}
.plat__badge img {
  width: auto;
  height: 66px;
}
.plat__badge--apple img {
  height: 44px;
  margin: 6px;
}
.plat__badge--chrome img {
  border-radius: 6px;
  height: 46px;
  margin: 5px;
}
.plat__badge:focus-visible {
  outline-offset: 3px;
}
.install {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
  display: grid;
}
@media (width>=700px) {
  .install {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.install > div {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  padding: 14px 16px;
}
.install b {
  margin-bottom: 4px;
  display: block;
}
.install ol {
  color: var(--muted);
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.92rem;
  display: grid;
}
.prose {
  max-width: 72ch;
  color: var(--muted);
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.7;
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2 {
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 2.4em 0 0.6em;
  scroll-margin-top: 80px;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 900;
  line-height: 1.15;
}
.prose h3 {
  color: var(--text);
  margin: 1.8em 0 0.5em;
  font-size: 1.12rem;
  font-weight: 800;
}
.prose p,
.prose ul,
.prose ol,
.prose table {
  margin: 0.9em 0;
}
.prose ul,
.prose ol {
  gap: 0.45em;
  padding-left: 1.3em;
  display: grid;
}
.prose li::marker {
  color: var(--teal);
}
.prose a {
  color: var(--teal);
  text-underline-offset: 3px;
}
.prose strong {
  color: var(--text);
  font-weight: 700;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--ui-line);
  margin: 2em 0;
}
.prose blockquote {
  border-left: 4px solid var(--amber);
  background: var(--ui-bg-2);
  border-radius: 0 12px 12px 0;
  margin: 1.2em 0;
  padding: 12px 16px;
}
.prose table {
  border-collapse: collapse;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  font-size: 0.92rem;
  display: block;
  overflow-x: auto;
}
.prose th {
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  border-bottom: 1px solid var(--ui-line-2);
  padding: 10px 14px;
  font-size: 0.76rem;
}
.prose td {
  border-bottom: 1px solid var(--ui-line);
  vertical-align: top;
  padding: 10px 14px;
}
.prose tr:last-child td {
  border-bottom: 0;
}
.legal-meta {
  color: var(--subtle);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 6px;
  font-size: 0.92rem;
  display: flex;
}
.legal-meta b {
  color: var(--text);
}
.legal-more {
  gap: 8px;
  max-width: 72ch;
  display: grid;
}
.legal-more ul {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.legal-more a {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.legal-more a:hover {
  border-color: var(--teal);
}
@media print {
  .rail,
  .topbar,
  .tabbar,
  .toc,
  .foot,
  .legal-more {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .prose,
  .prose h2,
  .prose h3,
  .prose strong {
    color: #000;
  }
  .app {
    display: block;
  }
}
.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.help-search {
  max-width: 560px;
  margin-top: 18px;
}
.help-search input,
.field input,
.field select,
.field textarea {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  width: 100%;
  min-height: 50px;
  color: var(--text);
  font: inherit;
  border-radius: 14px;
  padding: 0 16px;
}
.field textarea {
  resize: vertical;
  min-height: 140px;
  padding: 12px 16px;
  line-height: 1.5;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 22px,
    calc(100% - 16px) 22px;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  padding-right: 40px;
}
.help-search input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.help-search__count {
  min-height: 1.4em;
  color: var(--subtle);
  margin-top: 6px;
  font-size: 0.88rem;
}
.topics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}
@media (width>=820px) {
  .topics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.topics a {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s;
  border-radius: 18px;
  gap: 4px;
  padding: 14px 16px;
  text-decoration: none;
  display: grid;
}
.topics a:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.topics b {
  font-weight: 800;
}
.topics span {
  color: var(--subtle);
  font-size: 0.84rem;
  line-height: 1.35;
}
.help-groups {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  display: grid;
}
.help-empty {
  background: var(--ui-panel);
  border: 1px dashed var(--ui-line-2);
  color: var(--muted);
  border-radius: 16px;
  padding: 18px;
}
.contact-form {
  gap: 14px;
  max-width: 640px;
  margin-top: 22px;
  display: grid;
}
.contact-form__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  display: grid;
}
@media (width>=640px) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field {
  margin-bottom: 0;
}
.field label {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}
.contact-form__msg {
  min-height: 1.5em;
  font-weight: 600;
}
.contact-form__msg.is-good {
  color: var(--teal);
}
.contact-form__msg.is-bad {
  color: var(--danger);
}
.contact-form__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}
.contact-form__alt {
  color: var(--subtle);
  font-size: 0.92rem;
}
.contact-form__alt a {
  color: var(--teal);
}
.boilerplate {
  gap: 14px;
  max-width: 760px;
  margin-top: 20px;
  display: grid;
}
.boilerplate > div {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  padding: 16px 18px;
}
.boilerplate__label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.74rem;
  font-weight: 800;
}
.g-sec .boilerplate__text {
  color: var(--text);
  max-width: none;
  margin-top: 6px;
}
.dl-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
  display: grid;
}
@media (width>=700px) {
  .dl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.dl {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  transition:
    transform 0.1s var(--ease),
    border-color 0.15s;
  border-radius: 18px;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-decoration: none;
  display: grid;
}
.dl:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.dl img {
  object-fit: cover;
  background: var(--ui-bg-2);
  border-radius: 14px;
  width: 72px;
  height: 72px;
}
.dl span {
  gap: 2px;
  display: grid;
}
.dl small {
  color: var(--subtle);
}
.swatch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
  display: grid;
}
@media (width>=760px) {
  .swatch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.swatch-grid li {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  justify-items: start;
  gap: 4px;
  padding: 12px;
  display: grid;
}
.swatch {
  border: 1px solid var(--ui-line-2);
  border-radius: 12px;
  width: 100%;
  height: 54px;
}
.swatch-grid small {
  color: var(--subtle);
  font-size: 0.84rem;
}
.timeline {
  gap: 0;
  max-width: 760px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}
.timeline:before {
  content: "";
  background: var(--ui-line-2);
  width: 2px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
}
.timeline li {
  padding: 0 0 28px 38px;
  position: relative;
}
.timeline li:before {
  content: "";
  background: var(--ui-bg);
  border: 4px solid var(--amber);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 6px;
  left: 0;
}
.timeline li:nth-child(2n):before {
  border-color: var(--teal);
}
.timeline time {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.8rem;
  font-weight: 800;
  display: block;
}
.timeline h3 {
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 800;
}
.g-sec .timeline p {
  margin-top: 6px;
}
.podium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 2vw, 16px);
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.podium__card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  text-align: center;
  border-radius: 22px;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 18px 8px 16px;
  display: grid;
}
.podium__card--1 {
  border-color: #ffd45e;
  padding-block: 28px 22px;
  box-shadow: 0 18px 44px -22px #ffd45e80;
}
.podium__medal {
  color: #0e1116;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 900;
  display: grid;
}
.podium__card--1 .podium__medal {
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
}
.podium__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 6px;
  font-weight: 800;
  overflow: hidden;
}
.podium__rating {
  letter-spacing: -0.03em;
  font-size: 1.6rem;
  font-weight: 900;
}
.podium__card--1 .podium__rating {
  color: #ffd45e;
  font-size: 2rem;
}
.podium small {
  color: var(--subtle);
  font-size: 0.8rem;
}
.lb__who {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}
.lb__who i {
  background: var(--ui-panel-2);
  width: 30px;
  height: 30px;
  color: var(--amber-hi);
  border-radius: 10px;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  display: grid;
}
.lb td:first-child {
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}
@media (width<=600px) {
  .tbl.lb thead {
    display: table-header-group;
  }
  .tbl.lb {
    min-width: 0;
    font-size: 0.86rem;
  }
  .tbl.lb tr {
    padding: 0;
    display: table-row;
  }
  .tbl.lb td,
  .tbl.lb th {
    padding: 10px 6px;
    display: table-cell;
  }
  .tbl.lb th:nth-child(5),
  .tbl.lb td:nth-child(5),
  .tbl.lb th:nth-child(6),
  .tbl.lb td:nth-child(6) {
    display: none;
  }
  .lb__who {
    flex-wrap: wrap;
    gap: 2px 7px;
  }
  .lb__who i,
  .lb__img {
    width: 26px;
    height: 26px;
  }
}
.lb__img {
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  width: 30px;
  height: 30px;
}
.lb__who b {
  overflow-wrap: anywhere;
}
.lb__who em {
  color: var(--amber-hi);
  font-style: normal;
  font-weight: 600;
}
.lb__up {
  color: var(--teal);
  font-weight: 700;
}
.lb__down {
  color: var(--danger);
  font-weight: 700;
}
.lb__none {
  color: var(--subtle);
}
.tbl.lb tr.is-you td {
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}
.tbl.lb tr.is-you td:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}
.lb__me {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  max-width: 760px;
  color: var(--muted);
  border-radius: 14px;
  margin: 16px 0 0;
  padding: 12px 16px;
}
.lb__me b {
  color: var(--text, #fff);
}
.tier {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e1116;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
  display: inline-block;
}
.tier--bronze {
  background: #c98a5a;
}
.tier--silver {
  background: #c9d1dc;
}
.tier--gold {
  background: #ffd45e;
}
.tier--platinum {
  background: #7fe0d6;
}
.tier--diamond {
  background: #8eb6ff;
}
.tier--master {
  background: #d58bff;
}
.podium .tier {
  margin-top: 2px;
}
.g-note {
  color: var(--subtle);
  margin-top: 12px;
  font-size: 0.9rem;
}
.g-list {
  color: var(--muted);
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 1.2em;
  display: grid;
}
.g-list b {
  color: var(--text);
}
.reviews-top {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  display: grid;
}
@media (width>=860px) {
  .reviews-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}
.rv-summary,
.rv-form-wrap {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  align-content: start;
  gap: 10px;
  padding: clamp(18px, 3vw, 26px);
  display: grid;
}
.rv-form-wrap h2 {
  letter-spacing: -0.02em;
  font-size: 1.4rem;
  font-weight: 900;
}
.rv-summary__score {
  letter-spacing: -0.04em;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}
.rv-summary__score small {
  color: var(--subtle);
  font-size: 1.1rem;
  font-weight: 600;
}
.rv-summary__score--empty {
  letter-spacing: -0.03em;
  font-size: 1.7rem;
}
.rv-summary__count {
  color: var(--muted);
}
.rv-stars {
  gap: 3px;
  margin: 0;
  display: inline-flex;
}
.rv-stars svg {
  width: 20px;
  height: 20px;
  fill: var(--ui-panel-2);
  stroke: var(--ui-line-2);
  stroke-width: 1px;
  stroke-linejoin: round;
}
.rv-stars svg.on {
  fill: var(--amber);
  stroke: var(--amber-edge);
}
.rv-bars {
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.rv-bars li {
  color: var(--muted);
  grid-template-columns: 1.2em minmax(0, 1fr) 2.4em;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  display: grid;
}
.rv-bars i {
  background: var(--ui-panel-2);
  border-radius: 999px;
  height: 8px;
  display: block;
  overflow: hidden;
}
.rv-bars b {
  background: var(--amber);
  border-radius: 999px;
  height: 100%;
  display: block;
}
.rv-bars em {
  text-align: right;
  font-style: normal;
}
.rv-form {
  gap: 14px;
  display: grid;
}
.rv-rate {
  border: 0;
  gap: 6px;
  margin: 0;
  padding: 0;
  display: grid;
}
.rv-rate legend {
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.rv-rate__stars {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  display: inline-flex;
}
.rv-rate__stars label {
  cursor: pointer;
  border-radius: 10px;
  line-height: 0;
}
.rv-rate__stars svg {
  width: 38px;
  height: 38px;
  fill: var(--ui-panel-2);
  stroke: var(--ui-line-2);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition:
    fill 0.1s,
    transform 0.1s;
}
.rv-rate__stars input:checked ~ label svg,
.rv-rate__stars label:hover svg,
.rv-rate__stars label:hover ~ label svg {
  fill: var(--amber);
  stroke: var(--amber-edge);
}
.rv-rate__stars label:hover svg {
  transform: scale(1.08);
}
.rv-rate__stars input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.rv-list,
.rv-mine {
  gap: 12px;
  max-width: 760px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.rv-mine:empty {
  display: none;
}
.rv-item {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  gap: 8px;
  padding: 16px 18px;
  display: grid;
}
.rv-item--mine {
  border-style: dashed;
}
.g-sec .rv-item__text {
  color: var(--text);
  max-width: none;
  margin: 0;
}
.g-sec .rv-item__by,
.rv-item__by {
  color: var(--subtle);
  margin: 0;
  font-size: 0.86rem;
}
.rv-item__by b {
  color: var(--muted);
}
:root {
  --pink: #ff5a8a;
  --pink-hi: #ffc1d4;
  --pink-lo: #c21e55;
  --pink-edge: #8f1240;
  --on-pink: #2a0613;
  --violet: #8e7cff;
  --violet-hi: #d8d0ff;
  --violet-lo: #5442c9;
  --violet-edge: #3b2e96;
  --on-violet: #0e0a2e;
}
.bd-stop-hi--p2 {
  stop-color: var(--pink-hi);
}
.bd-stop-mid--p2 {
  stop-color: var(--pink);
}
.bd-stop-lo--p2 {
  stop-color: var(--pink-lo);
}
.bd-stop-hi--p3 {
  stop-color: var(--violet-hi);
}
.bd-stop-mid--p3 {
  stop-color: var(--violet);
}
.bd-stop-lo--p3 {
  stop-color: var(--violet-lo);
}
.bd-wall--p2 .bd-wall__top {
  fill: var(--pink);
}
.bd-wall--p2 .bd-wall__edge {
  fill: var(--pink-edge);
}
.bd-wall--p3 .bd-wall__top {
  fill: var(--violet);
}
.bd-wall--p3 .bd-wall__edge {
  fill: var(--violet-edge);
}
.bd-cell--goal2 {
  fill: color-mix(in srgb, var(--pink) 26%, var(--cell));
  stroke: color-mix(in srgb, var(--pink) 45%, transparent);
}
.bd-cell--goal3 {
  fill: color-mix(in srgb, var(--violet) 26%, var(--cell));
  stroke: color-mix(in srgb, var(--violet) 45%, transparent);
}
.bd-target--p2 .bd-target__dot {
  fill: color-mix(in srgb, var(--pink) 50%, transparent);
  stroke: var(--pink);
}
.bd-target--p3 .bd-target__dot {
  fill: color-mix(in srgb, var(--violet) 50%, transparent);
  stroke: var(--violet);
}
.bd-ghost.is-ok.bd-ghost--p2 {
  fill: color-mix(in srgb, var(--pink) 60%, transparent);
  stroke: var(--pink);
}
.bd-ghost.is-ok.bd-ghost--p3 {
  fill: color-mix(in srgb, var(--violet) 60%, transparent);
  stroke: var(--violet);
}
.bd-slot--p2 {
  fill: var(--pink);
}
.bd-slot--p3 {
  fill: var(--violet);
}
.drag-piece[data-p="2"] {
  background: var(--pink);
  box-shadow:
    0 4px 0 var(--pink-edge),
    0 0 20px color-mix(in srgb, var(--pink) 65%, transparent);
}
.drag-piece[data-p="3"] {
  background: var(--violet);
  box-shadow:
    0 4px 0 var(--violet-edge),
    0 0 20px color-mix(in srgb, var(--violet) 65%, transparent);
}
.fp[data-turn="1"] .tray__piece i {
  background: var(--teal);
  box-shadow: 0 3px 0 var(--teal-edge);
}
.fp[data-turn="2"] .tray__piece i {
  background: var(--pink);
  box-shadow: 0 3px 0 var(--pink-edge);
}
.fp[data-turn="3"] .tray__piece i {
  background: var(--violet);
  box-shadow: 0 3px 0 var(--violet-edge);
}
.fp {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  display: grid;
}
.fp__modes {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}
.fp__modes .btn[aria-pressed="false"] {
  --b-bg: var(--ui-panel-2);
  --b-hi: #3a3e47;
  --b-edge: var(--ui-edge);
  --b-fg: var(--text);
  box-shadow:
    0 4px 0 var(--ui-edge),
    inset 0 1px 0 #ffffff0f;
}
.fp__chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
@media (width>=900px) {
  .fp__chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fp-chip {
  --pc: var(--amber);
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  transition: box-shadow 0.2s;
  display: grid;
}
.fp-chip--1 {
  --pc: var(--teal);
}
.fp-chip--2 {
  --pc: var(--pink);
}
.fp-chip--3 {
  --pc: var(--violet);
}
.fp-chip.is-turn {
  box-shadow: inset 0 0 0 2px var(--pc);
}
.fp-chip.is-winner {
  background: color-mix(in srgb, var(--pc) 18%, var(--ui-panel));
  box-shadow: inset 0 0 0 2px var(--pc);
}
.fp-chip__pawn {
  background: radial-gradient(
    circle at 36% 30%,
    color-mix(in srgb, var(--pc) 40%, #fff),
    var(--pc) 55%,
    color-mix(in srgb, var(--pc) 55%, #000)
  );
  border-radius: 50%;
  width: 30px;
  height: 30px;
  box-shadow: 0 2px #0006;
}
.fp-chip__who {
  min-width: 0;
  line-height: 1.2;
  display: grid;
}
.fp-chip__who b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  font-weight: 800;
  overflow: hidden;
}
.fp-chip__who small,
.fp-chip__walls small {
  color: var(--subtle);
  font-size: 0.74rem;
}
.fp-chip__walls {
  grid-column: 1/-1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}
.fp-chip .walls__bars i {
  background: var(--pc);
  border-radius: 2px;
  width: 4px;
  height: 12px;
}
.fp-chip .walls__bars i.is-used {
  opacity: 0.16;
  transform: scaleY(0.7);
}
.fp-chip small b {
  color: var(--text);
}
.fp__main {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  display: grid;
}
@media (width>=1000px) {
  .fp__main {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
}
.fp__table {
  gap: 8px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  position: relative;
}
@media (width>=1000px) {
  .fp__table {
    width: min(100%, max(440px, 100svh - 330px));
    margin-inline: 0;
  }
}
.fp__side {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  align-content: start;
  gap: 6px;
  padding: 16px;
  display: grid;
}
.fp-goals {
  color: var(--muted);
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.92rem;
  list-style: none;
  display: grid;
}
.fp-goals li {
  align-items: center;
  gap: 10px;
  display: flex;
}
.fp-goals i {
  background: var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.fp-goals__1 i {
  background: var(--teal);
}
.fp-goals__2 i {
  background: var(--pink);
}
.fp-goals__3 i {
  background: var(--violet);
}
.fp-goals b {
  color: var(--text);
}
.fp-dot {
  background: var(--amber);
  border-radius: 50%;
  align-self: center;
  width: 10px;
  height: 10px;
}
.fp-dot--1 {
  background: var(--teal);
}
.fp-dot--2 {
  background: var(--pink);
}
.fp-dot--3 {
  background: var(--violet);
}
.fp .log li {
  grid-template-columns: 2.4em 14px 1fr;
}
.fp__setup {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  display: flex;
}
.fp__opts > summary {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  cursor: pointer;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.92rem;
  font-weight: 700;
  list-style: none;
  display: flex;
}
.fp__opts > summary::-webkit-details-marker {
  display: none;
}
.fp__opts > summary:after {
  content: "";
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  transition: transform 0.2s;
  transform: translateY(-2px) rotate(45deg);
}
.fp__opts[open] > summary:after {
  transform: translateY(2px) rotate(-135deg);
}
.fp__opts[open] > summary {
  margin-bottom: 10px;
}
@media (width>=700px) {
  .fp__opts > summary {
    display: none;
  }
  .fp__opts[open] > summary {
    margin-bottom: 0;
  }
}
@media (width<=699px) {
  .fp__chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .fp-chip {
    text-align: center;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 4px;
    padding: 8px 4px;
  }
  .fp-chip__pawn {
    width: 24px;
    height: 24px;
  }
  .fp-chip__who b {
    font-size: 0.82rem;
  }
  .fp-chip__who small,
  .fp-chip__walls small {
    display: none;
  }
  .fp-chip__walls {
    justify-content: center;
  }
  .fp-chip .walls__bars {
    gap: 2px;
    display: flex;
  }
}
.fp__confirm {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  border-radius: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  display: flex;
}
.fp__confirm span {
  color: var(--muted);
  flex: 220px;
  font-size: 0.92rem;
}
.play__grid.is-four > .table,
.play__grid:not(.is-four) > .four {
  display: none;
}
.fp.four {
  gap: 8px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}
@media (width>=1024px) {
  .fp.four {
    width: min(100%, max(440px, 100svh - 320px));
  }
}
.four.is-waiting .bd {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.four .fp__chips {
  gap: 6px;
}
.fp-chip {
  position: relative;
}
.fp-chip__think {
  gap: 3px;
  display: none;
  position: absolute;
  top: 7px;
  right: 9px;
}
.fp-chip__think i {
  background: var(--pc);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: 1s ease-in-out infinite think;
}
.fp-chip__think i:nth-child(2) {
  animation-delay: 0.15s;
}
.fp-chip__think i:nth-child(3) {
  animation-delay: 0.3s;
}
.fp-chip.is-thinking .fp-chip__think {
  display: inline-flex;
}
.fp-chip.is-out {
  opacity: 0.55;
}
.pn-vs.is-turn-p {
  box-shadow: inset 0 0 0 1px var(--pink);
}
.pn-vs.is-turn-v {
  box-shadow: inset 0 0 0 1px var(--violet);
}
.fp-chip__who .fp-chip__clock {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 800;
}
.fp-chip__clock.is-low {
  color: var(--danger);
}
@media (width<=699px) {
  .fp-chip__who .fp-chip__clock:not([hidden]) {
    display: block;
  }
}
.fp-names {
  border: 0;
  flex: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.fp-names legend {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 700;
}
.fp-names__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  display: grid;
}
@media (width>=900px) {
  .fp-names__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fp-name {
  gap: 4px;
  min-width: 0;
  display: grid;
}
.fp-name span {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  display: flex;
}
.fp-name i {
  background: var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}
.fp-name--1 i {
  background: var(--teal);
}
.fp-name--2 i {
  background: var(--pink);
}
.fp-name--3 i {
  background: var(--violet);
}
.fp-name input,
.fp-online__name input {
  border: 1px solid var(--field-line);
  background: var(--ui-bg-2);
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--text);
  font: inherit;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 0.95rem;
}
.fp-online {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  border-radius: 16px;
  padding: 14px 16px;
}
.fp-online__idle {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  display: flex;
}
.fp-online__name {
  flex: 200px;
  gap: 6px;
  min-width: 0;
  display: grid;
}
.fp-online__name label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.fp-online__hint {
  color: var(--muted);
  flex: 100%;
  margin: 0;
  font-size: 0.86rem;
}
.fp-online__search {
  align-items: center;
  gap: 14px;
  display: flex;
}
.fp-online__ring {
  border: 3px solid var(--ui-panel-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  animation: 0.9s linear infinite spin;
}
.fp-online__text {
  color: var(--muted);
  flex: 1;
  gap: 2px;
  margin: 0;
  font-size: 0.9rem;
  display: grid;
}
.fp-online__text b {
  color: var(--text);
}
.g-sub {
  letter-spacing: -0.01em;
  margin-top: 28px;
  font-size: 1.15rem;
  font-weight: 800;
}
.bd-cell--centre {
  fill: color-mix(in srgb, var(--focus) 34%, var(--cell));
  stroke: color-mix(in srgb, var(--focus) 60%, transparent);
}
.bd-centre-mark {
  pointer-events: none;
  display: none;
}
.bd--centre .bd-centre-mark {
  display: block;
}
.bd-stop-crown1 {
  stop-color: #fff3c4;
}
.bd-stop-crown2 {
  stop-color: var(--focus);
}
.bd-stop-crown3 {
  stop-color: #d99a2b;
}
.bd-crown__shadow {
  fill: #000;
  opacity: 0.28;
}
.bd-crown__body,
.bd-crown__band {
  stroke: #8a5a0e;
  stroke-width: 1.3px;
  stroke-linejoin: round;
}
.bd-crown__shine {
  fill: none;
  stroke: #fffbea;
  stroke-width: 1.6px;
  stroke-linecap: round;
  opacity: 0.7;
}
.bd-crown__jewel {
  fill: #fff3c4;
  stroke: #8a5a0e;
  stroke-width: 1.2px;
}
.bd-crown__gem {
  fill: var(--pink);
  stroke: #6e1030;
  stroke-width: 0.8px;
}
.bd-crown__gem--mid {
  fill: var(--teal);
  stroke: #0a5c50;
}
.auth {
  justify-items: center;
  gap: 16px;
  padding-top: 12px;
  display: grid;
}
.auth__card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 26px;
  gap: 14px;
  width: min(100%, 440px);
  padding: clamp(20px, 4vw, 30px);
  display: grid;
  box-shadow: 0 24px 50px -24px #000c;
}
.auth__logo {
  justify-self: center;
}
.auth__logo .logo__mark {
  width: 56px;
  height: 56px;
}
.auth__card h1 {
  text-align: center;
  letter-spacing: -0.03em;
  font-size: 1.8rem;
  font-weight: 900;
}
.auth__form {
  gap: 14px;
  display: grid;
}
.auth__fine {
  color: var(--subtle);
  font-size: 0.84rem;
  line-height: 1.5;
}
.auth__lede {
  color: var(--muted);
  text-align: center;
  font-size: 0.94rem;
}
.pw {
  display: flex;
  position: relative;
}
.pw input {
  padding-right: 76px;
}
.pw__toggle {
  min-height: 40px;
  color: var(--teal);
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.pw__toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
}
.auth__fine a {
  color: var(--teal);
}
.auth__aside {
  color: var(--muted);
  text-align: center;
  max-width: 44ch;
  font-size: 0.94rem;
}
.auth__aside a {
  color: var(--teal);
}
.auth__done {
  text-align: center;
  gap: 12px;
  display: grid;
}
.auth__done p {
  color: var(--muted);
}
.field small {
  color: var(--subtle);
  font-size: 0.82rem;
}
.auth__card .modes {
  grid-template-columns: repeat(2, 1fr);
}
.acct {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  display: grid;
}
@media (width>=900px) {
  .acct {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
  }
}
.acct__nav {
  scrollbar-width: none;
  gap: 6px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}
.acct__nav::-webkit-scrollbar {
  display: none;
}
@media (width>=900px) {
  .acct__nav {
    flex-direction: column;
    position: sticky;
    top: 24px;
    overflow: visible;
  }
}
.acct__nav a {
  color: var(--muted);
  white-space: nowrap;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}
.acct__nav a:hover {
  color: var(--text);
  border-color: var(--ui-line-2);
}
.acct__nav a[aria-current="page"] {
  color: var(--text);
  background: var(--ui-panel-2);
  box-shadow: inset 3px 0 0 var(--amber);
}
.acct__nav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.acct__body {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
  display: grid;
}
.acct__head h1 {
  letter-spacing: -0.035em;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.05;
}
.acct__head .g-lede {
  margin-top: 8px;
}
.acct__banner {
  background: color-mix(in srgb, var(--danger) 12%, var(--ui-bg-2));
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--muted);
  border-radius: 16px;
  padding: 14px 16px;
}
.acct__banner b {
  color: var(--text);
}
.avatar {
  object-fit: cover;
  background: var(--ui-panel-2);
  border-radius: 18px;
  flex-shrink: 0;
  place-items: center;
  display: inline-grid;
}
.avatar--letter {
  color: var(--amber-hi);
  border: 1px solid var(--ui-line-2);
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  font-weight: 900;
}
.dash-profile {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px;
  display: flex;
}
.dash-profile .avatar--letter {
  font-size: 2rem;
}
.dash-profile__who {
  flex: 200px;
  min-width: 0;
}
.dash-profile__who h2 {
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 900;
  overflow: hidden;
}
.dash-profile__who p {
  color: var(--subtle);
}
.stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
@media (width>=760px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stat-grid li {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  gap: 2px;
  padding: 16px;
  display: grid;
}
.stat-grid small {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 0.76rem;
  font-weight: 800;
}
.stat-grid b {
  letter-spacing: -0.03em;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}
.stat-grid em {
  color: var(--subtle);
  font-size: 0.84rem;
  font-style: normal;
}
.pill {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-block;
}
.pill--win {
  background: color-mix(in srgb, var(--teal) 20%, transparent);
  color: var(--teal);
}
.pill--loss {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}
.dash-history .up {
  color: var(--teal);
  font-weight: 800;
}
.dash-history .down {
  color: var(--danger);
  font-weight: 800;
}
.set-card {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  gap: 12px;
  padding: clamp(18px, 3vw, 24px);
  display: grid;
}
.set-card h2 {
  letter-spacing: -0.02em;
  font-size: 1.3rem;
  font-weight: 900;
}
.set-card p {
  color: var(--muted);
  max-width: 62ch;
}
.set-card a {
  color: var(--teal);
}
.set-profile {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  display: flex;
}
.set-profile__btns {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.set-static {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  color: var(--muted);
  overflow-wrap: anywhere;
  border-radius: 14px;
  margin: 0;
  padding: 12px 16px;
}
.set-actions {
  gap: 10px;
  display: flex;
}
.set-danger {
  border-top: 1px solid var(--ui-line);
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  display: grid;
}
.set-danger h3 {
  font-size: 1.05rem;
  font-weight: 800;
}
.theme-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
@media (width>=700px) {
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width>=1100px) {
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.theme-card {
  background: var(--ui-panel);
  border: 2px solid var(--ui-line);
  text-align: left;
  width: 100%;
  color: inherit;
  transition:
    border-color 0.15s,
    transform 0.1s var(--ease);
  border-radius: 22px;
  gap: 12px;
  padding: 14px;
  display: grid;
}
.theme-card:hover {
  border-color: var(--ui-line-2);
  transform: translateY(-2px);
}
.theme-card[aria-pressed="true"] {
  border-color: var(--amber);
}
.theme-card__board .bd {
  filter: none;
}
.theme-card__name {
  gap: 2px;
  display: grid;
}
.theme-card__name small {
  color: var(--subtle);
}
.theme-card__name em {
  color: var(--amber);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 800;
}
.theme-card__board[data-theme="walnut"] {
  --tray-1: #a06a36;
  --tray-2: #5a361b;
  --tray-inner: #23170d;
  --cell: #3d2b1c;
  --cell-edge: #ffe6c414;
}
.theme-card__board[data-theme="felt"] {
  --tray-1: #7e5029;
  --tray-2: #452912;
  --tray-inner: #0b241b;
  --cell: #17493a;
  --cell-edge: #d2ffec14;
}
.theme-card__board[data-theme="royal"] {
  --tray-1: #3449c8;
  --tray-2: #1a266f;
  --tray-inner: #0a1137;
  --cell: #203086;
  --cell-edge: #dce4ff1a;
}
.theme-card__board[data-theme="onyx"] {
  --tray-1: #454953;
  --tray-2: #1a1c21;
  --tray-inner: #060708;
  --cell: #21242b;
  --cell-edge: #ffffff17;
}
.friend-add {
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  display: flex;
}
.friend-add .field {
  flex: 220px;
}
.friend-list {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.friend {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}
.friend__who {
  flex: 140px;
  min-width: 0;
  display: grid;
}
.friend__who b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.friend__who small {
  color: var(--subtle);
}
.rail__signin.is-signed,
.sheet .is-signed {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.switch {
  cursor: pointer;
  align-items: center;
  display: inline-flex;
}
.switch input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}
.switch__track {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-2);
  border-radius: 999px;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  transition: background 0.15s;
  position: relative;
}
.switch__track:after {
  content: "";
  background: var(--muted);
  width: 18px;
  height: 18px;
  transition:
    transform 0.15s var(--ease),
    background 0.15s;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}
.switch input:checked + .switch__track {
  background: color-mix(in srgb, var(--teal) 35%, var(--ui-panel-2));
}
.switch input:checked + .switch__track:after {
  background: var(--teal);
  transform: translate(18px);
}
.switch input:focus-visible + .switch__track {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.switch input:disabled + .switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}
.foot__choices {
  border: 1px solid var(--ui-line-2);
  color: var(--muted);
  background: 0 0;
  border-radius: 999px;
  align-items: center;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
}
.foot__choices:hover {
  color: var(--text);
  border-color: var(--teal);
}
.choices {
  border: 1px solid var(--ui-line-2);
  background: var(--ui-panel);
  width: min(94vw, 520px);
  max-height: 90svh;
  color: var(--text);
  border-radius: 24px;
  padding: 22px;
  overflow: auto;
}
.choices::backdrop {
  background: #0009;
}
.choices form {
  position: relative;
}
.choices h2:focus {
  outline: none;
}
.choices h2 {
  letter-spacing: -0.03em;
  padding-right: 52px;
  font-size: 1.5rem;
  font-weight: 900;
}
.choices__close {
  position: absolute;
  top: -6px;
  right: -6px;
}
.choices__lead,
.choices__note {
  color: var(--muted);
  margin-top: 8px;
  font-size: 0.94rem;
}
.choices__lead a {
  color: var(--teal);
}
.choices__note {
  color: var(--subtle);
  font-size: 0.84rem;
}
.choices__list {
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.choices__row {
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}
.choices__row small {
  color: var(--subtle);
  margin-top: 2px;
  font-size: 0.84rem;
  line-height: 1.35;
  display: block;
}
.choices__fixed {
  color: var(--teal);
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 800;
}
.choices__actions {
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-line);
  border-radius: 0 0 24px 24px;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px -22px -22px;
  padding: 14px 22px 22px;
  display: flex;
  position: sticky;
  bottom: -22px;
}
.nf-links {
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.nf-links a {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.nf-links a:hover {
  border-color: var(--teal);
}
.try .bd-slot.is-answer {
  opacity: 0.5;
}
.hp {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  top: auto;
  left: -9999px;
  overflow: hidden;
}
.cbar {
  z-index: 40;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  border-radius: 20px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  max-width: 860px;
  margin-inline: auto;
  padding: 14px 18px;
  display: flex;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  box-shadow: 0 18px 50px -20px #000000b3;
}
.cbar[hidden] {
  display: none;
}
.cbar__text {
  color: var(--muted);
  flex: 360px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.cbar__text b {
  color: var(--text);
}
.cbar__text a {
  color: var(--teal);
}
.cbar__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
@media (width<=880px) {
  .cbar {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}