:root {
  --ink: #3f3548;
  --ink-deep: #2a2332;
  --ink-soft: #766a7e;
  --paper: #fffaf1;
  --paper-strong: #fffdf8;
  --line: rgba(63, 53, 72, 0.14);
  --line-strong: rgba(63, 53, 72, 0.24);
  --accent: #f07da2;
  --accent-deep: #c94f7d;
  --accent-soft: #ffd4e0;
  --mint: #66bea0;
  --gold: #f1b951;
  --danger: #d95067;
  --shadow: 0 30px 80px rgba(49, 39, 54, 0.18), 0 8px 24px rgba(49, 39, 54, 0.1);
  --shadow-soft: 0 15px 42px rgba(49, 39, 54, 0.12);
  --radius-lg: 32px;
  --radius-md: 21px;
  --radius-sm: 14px;
  --font: "Avenir Next Rounded", "Nunito Sans", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  --focus-board-size: min(calc(100vw - 32px), calc(100dvh - 128px), 720px);
  --focus-background: #dce9df;
  --board-2d-light: #f8f1e2;
  --board-2d-dark: #82a08a;
  --board-2d-frame: #31483c;
  --board-2d-piece-light: #fffdf5;
  --board-2d-piece-dark: #29362f;
}

html[data-board="moon"] {
  --ink: #e8eaff;
  --ink-deep: #ffffff;
  --ink-soft: #b8b9dd;
  --paper: #24254b;
  --paper-strong: #2d2d59;
  --line: rgba(225, 226, 255, 0.16);
  --line-strong: rgba(225, 226, 255, 0.28);
  --accent: #9a9cf5;
  --accent-deep: #7477dc;
  --accent-soft: #403f7f;
  --mint: #69d5db;
  --gold: #f2c673;
  --focus-background: #15182c;
  --board-2d-light: #d8d9e8;
  --board-2d-dark: #62668f;
  --board-2d-frame: #0e1123;
  --board-2d-piece-light: #fffdf4;
  --board-2d-piece-dark: #17192e;
}

html[data-board="candy"] {
  --ink: #5b3850;
  --ink-deep: #44233a;
  --ink-soft: #8b687e;
  --paper: #fff6f4;
  --paper-strong: #fffafa;
  --line: rgba(101, 53, 82, 0.14);
  --line-strong: rgba(101, 53, 82, 0.24);
  --accent: #f16f99;
  --accent-deep: #d64d80;
  --accent-soft: #ffd1dc;
  --mint: #64bdbe;
  --gold: #eeb04e;
  --focus-background: #f1e1e5;
  --board-2d-light: #fff2e9;
  --board-2d-dark: #d88da8;
  --board-2d-frame: #5f354b;
  --board-2d-piece-light: #fffdf5;
  --board-2d-piece-dark: #49283b;
}

html[data-board="sakura"] {
  --ink: #4c323b;
  --ink-deep: #342229;
  --ink-soft: #7f6169;
  --paper: #fff7ee;
  --paper-strong: #fffaf4;
  --line: rgba(76, 50, 59, 0.14);
  --line-strong: rgba(76, 50, 59, 0.25);
  --accent: #bd5b70;
  --accent-deep: #934357;
  --accent-soft: #f7ccd2;
  --mint: #6da78f;
  --gold: #dba75b;
  --focus-background: #eee4df;
  --board-2d-light: #f9f0df;
  --board-2d-dark: #b4777d;
  --board-2d-frame: #56383e;
  --board-2d-piece-light: #fffdf3;
  --board-2d-piece-dark: #3d292d;
}

html[data-board="lagoon"] {
  --ink: #25474d;
  --ink-deep: #17383e;
  --ink-soft: #55777b;
  --paper: #f5fbf3;
  --paper-strong: #fbfdf5;
  --line: rgba(30, 73, 78, 0.14);
  --line-strong: rgba(30, 73, 78, 0.25);
  --accent: #31898b;
  --accent-deep: #22686f;
  --accent-soft: #bee7df;
  --mint: #4ba78e;
  --gold: #e4a454;
  --focus-background: #d9e9e6;
  --board-2d-light: #eff3df;
  --board-2d-dark: #5b9b96;
  --board-2d-frame: #234b4b;
  --board-2d-piece-light: #fffdf3;
  --board-2d-piece-dark: #193b3b;
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

html {
  color-scheme: light;
  background: #bce6d1;
}

html[data-board="moon"] { color-scheme: dark; background: #11152f; }
html[data-board="candy"] { background: #ffd8df; }
html[data-board="sakura"] { background: #e9b9bd; }
html[data-board="lagoon"] { background: #8bcbd1; }

body {
  color: var(--ink);
  overflow-x: hidden;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

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

::selection {
  color: var(--ink-deep);
  background: var(--gold);
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 14px;
  left: 14px;
  padding: 10px 16px;
  color: white;
  background: #2a2332;
  border-radius: 999px;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.app {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
}

.stage {
  position: fixed;
  z-index: -3;
  inset: 0;
  overflow: hidden;
  background: #bce6d1;
  transition: background 700ms ease;
}

html[data-board="moon"] .stage { background: #11152f; }
html[data-board="candy"] .stage { background: #ffd8df; }
html[data-board="sakura"] .stage { background: #e9b9bd; }
html[data-board="lagoon"] .stage { background: #8bcbd1; }
html.is-focus-board .stage { background: var(--focus-background); }
html.is-focus-board #game-canvas { opacity: 0; pointer-events: none; }
html.is-focus-board .stage__glow,
html.is-focus-board .stage__grain,
html.is-focus-board .webgl-warning,
html.is-focus-board .topbar { display: none; }

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#game-canvas:active { cursor: grabbing; }
#game-canvas.is-interactive { cursor: pointer; }
.no-webgl #game-canvas { opacity: 0; }

.webgl-warning { position: absolute; z-index: 4; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; color: var(--ink); border-radius: 13px; transform: translateX(-50%); }
.webgl-warning > span { width: 29px; height: 29px; display: grid; place-items: center; color: white; background: var(--accent-deep); border-radius: 9px; }
.webgl-warning > div { display: grid; }
.webgl-warning strong { font-size: 9px; }
.webgl-warning small { color: var(--ink-soft); font-size: 7px; }

.stage__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 36%, rgba(255,255,255,.08), transparent 31%),
    linear-gradient(90deg, rgba(223, 244, 229, 0.15), transparent 35%, transparent 70%, rgba(255,255,255,.03));
  mix-blend-mode: soft-light;
}

html[data-board="moon"] .stage__glow {
  background:
    radial-gradient(circle at 75% 22%, rgba(154, 161, 255, .08), transparent 32%),
    radial-gradient(circle at 20% 80%, rgba(219, 105, 255, .05), transparent 36%);
  mix-blend-mode: screen;
}

html[data-board="candy"] .stage__glow {
  background: radial-gradient(circle at 74% 32%, rgba(255,255,255,.14), transparent 33%);
}

html[data-board="sakura"] .stage__glow { background: radial-gradient(circle at 72% 25%, rgba(255,244,228,.12), transparent 34%); }
html[data-board="lagoon"] .stage__glow { background: radial-gradient(circle at 68% 22%, rgba(238,255,236,.12), transparent 36%); }

.stage__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

.glass-card {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.topbar {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(16px, env(safe-area-inset-top)) clamp(18px, 3vw, 48px) 12px;
  pointer-events: none;
}

.topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 76%, transparent), transparent);
  opacity: .78;
  pointer-events: none;
}

.topbar button,
.topbar .connection { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 0;
  color: var(--ink-deep);
  background: transparent;
  text-align: left;
}

.brand__crest {
  position: relative;
  width: 53px;
  height: 53px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  border: 2px solid color-mix(in srgb, var(--ink-deep) 75%, transparent);
  border-radius: 18px 18px 18px 7px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink-deep) 78%, transparent), 0 9px 24px rgba(63,53,72,.18);
  transform: rotate(-3deg);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.brand:hover .brand__crest { transform: rotate(3deg) translateY(-2px); }

.brand__crown {
  font-family: Georgia, serif;
  font-size: 33px;
  line-height: 1;
  transform: translateY(-1px);
}

.brand__crest i {
  position: absolute;
  top: 30px;
  width: 4px;
  height: 5px;
  background: var(--ink-deep);
  border-radius: 50%;
}

.brand__crest i:first-of-type { left: 18px; }
.brand__crest i:last-of-type { right: 18px; }

.brand__copy { display: grid; gap: 2px; }
.brand__copy strong { font-size: 17px; font-weight: 900; letter-spacing: .12em; }

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

.connection {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 75%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.connection i {
  width: 8px;
  height: 8px;
  background: #e3ad4f;
  border: 2px solid var(--paper-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(227,173,79,.22);
}

.connection.is-online i {
  background: var(--mint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 26%, transparent);
}

.connection.is-offline i {
  background: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent);
}

.icon-button,
.room-chip {
  min-height: 40px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 5px 14px rgba(50,40,56,.08);
  backdrop-filter: blur(12px);
}

.icon-button {
  width: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.icon-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button svg path:first-child { fill: currentColor; stroke: none; }
.icon-button .sound-off { display: none; }
.icon-button.is-muted .sound-on { display: none; }
.icon-button.is-muted .sound-off { display: block; }

.room-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 999px;
}

.room-chip span { color: var(--ink-soft); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.room-chip strong { font-size: 13px; letter-spacing: .11em; }

.view {
  position: relative;
  z-index: 5;
}

.view:not(.is-active) { display: none; }

/* Home: one compact panel, the live 3D board behind it is the theme preview.
   Pointer events fall through everywhere except the panel so the player can
   orbit the board while choosing. */
.home {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 104px clamp(16px, 2.5vw, 44px) 30px;
  pointer-events: none;
}

.home-panel {
  width: min(338px, 100%);
  max-height: calc(100dvh - 122px);
  display: grid;
  gap: 11px;
  overflow: auto;
  padding: 16px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  pointer-events: auto;
  animation: card-rise 720ms cubic-bezier(.16,.82,.24,1) both;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.invite-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  padding: 12px 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 75%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: var(--radius-sm);
}

.invite-banner__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--accent);
  border-radius: 12px;
  font-size: 18px;
}

.invite-banner > span:last-child { display: grid; }
.invite-banner small { color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invite-banner strong { font-size: 14px; }
.invite-banner b { letter-spacing: .1em; }

.name-field {
  position: relative;
  display: grid;
  gap: 7px;
}

.name-field > span,
.picker__label,
.rule-group__label {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.picker { display: grid; gap: 7px; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 8px 11px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper-strong) 65%, transparent);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.chip.is-selected {
  color: white;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.name-field input,
.join-form input,
.setup-modal select {
  width: 100%;
  color: var(--ink-deep);
  background: color-mix(in srgb, var(--paper-strong) 92%, transparent);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.name-field input {
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 750;
}

.name-field input:focus,
.join-form input:focus,
.setup-modal select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.home__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 3px;
}

.home__actions .button { min-height: 50px; padding: 0 10px; font-size: 13px; }
#invite-join-button { grid-column: 1 / -1; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-weight: 850;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: .46; filter: saturate(.45); }

.button--primary {
  color: white;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  border-color: color-mix(in srgb, var(--accent-deep) 76%, var(--ink-deep));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent-deep) 80%, var(--ink-deep)), 0 13px 28px color-mix(in srgb, var(--accent) 26%, transparent);
}

.button--primary:hover:not(:disabled) {
  box-shadow: 0 8px 0 color-mix(in srgb, var(--accent-deep) 80%, var(--ink-deep)), 0 17px 34px color-mix(in srgb, var(--accent) 30%, transparent);
}

.button--bot {
  color: white;
  background: linear-gradient(145deg, #79cdb1, #3b9c80);
  border-color: #2f7d68;
  box-shadow: 0 5px 0 #2f7d68, 0 13px 28px rgba(53, 150, 123, .22);
}

.button--bot:hover:not(:disabled) { box-shadow: 0 7px 0 #2f7d68, 0 17px 34px rgba(53, 150, 123, .28); }

.button--ghost {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-strong) 50%, transparent);
  border-color: var(--line-strong);
}

.button--danger {
  color: white;
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 78%, black);
}

.join-form {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.join-form input { height: 42px; padding: 0 12px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.button--small { min-height: 41px; padding: 0 14px; color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 36%, transparent); font-size: 11px; }

.lobby-card h2,
.modal h2 {
  margin: 5px 0 0;
  color: var(--ink-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.1vw, 34px);
  letter-spacing: -.025em;
}

.match-rules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.rule-group { display: grid; gap: 6px; }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--ink-deep) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.segmented button {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
}

.segmented button strong { font-size: 11px; }
.segmented button small { font-size: 9px; font-weight: 800; }
.segmented button.is-selected { color: var(--ink-deep); background: var(--paper-strong); border-color: var(--line); box-shadow: 0 4px 12px rgba(48,39,53,.1); }
.segmented--side button strong { font-size: 16px; line-height: 1; }
.segmented--pair { grid-template-columns: repeat(2, 1fr); }

/* Lobby */
.lobby {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 116px 20px 40px;
}

.lobby::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: color-mix(in srgb, var(--ink-deep) 12%, transparent);
  backdrop-filter: blur(5px);
}

.lobby-card {
  width: min(760px, 100%);
  padding: clamp(25px, 3vw, 42px);
  border-radius: var(--radius-lg);
  animation: card-rise 480ms cubic-bezier(.16,.82,.24,1) both;
}

.lobby-card__top,
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.text-button {
  padding: 7px 0;
  color: var(--ink-soft);
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 800;
}

.invite-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 27px 0;
  padding: 15px;
  background: color-mix(in srgb, var(--accent-soft) 54%, var(--paper-strong));
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 18px;
}

.invite-box__copy { display: flex; align-items: center; gap: 12px; }
.invite-box__spark { width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 13px; font-size: 20px; }
.invite-box__copy > span:last-child { display: grid; }
.invite-box__copy small { color: var(--ink-soft); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.invite-box__copy strong { font-size: 22px; letter-spacing: .18em; line-height: 1.1; }

.seat-list { display: grid; }
.seat {
  position: relative;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--paper-strong) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.seat.is-self { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.seat.is-offline { opacity: .68; }

.seat__avatar,
.player-hud__avatar {
  position: relative;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  border: 2px solid color-mix(in srgb, var(--ink-deep) 68%, transparent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink-deep) 68%, transparent);
}

.seat__avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 17px;
  font-size: 30px;
}

.seat__avatar--white { color: #504052; background: #fff0dc; }
.seat__avatar--black { color: #fff0dc; background: #55455e; }
.seat__avatar i,
.player-hud__avatar i { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; background: #b6b4b5; border: 3px solid var(--paper-strong); border-radius: 50%; }
.seat.is-online .seat__avatar i,
.player-hud.is-online .player-hud__avatar i { background: var(--mint); }

.seat__copy { display: grid; gap: 2px; min-width: 0; }
.seat__copy small { color: var(--ink-soft); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.seat__copy strong { overflow: hidden; color: var(--ink-deep); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.seat__copy em { color: var(--ink-soft); font-size: 9px; font-style: normal; }
.seat__badge { display: none; margin-left: auto; padding: 5px 8px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.seat.is-host .seat__badge { display: block; }

.seat-list__versus { display: flex; align-items: center; gap: 10px; padding: 7px 25px; }
.seat-list__versus span { height: 1px; flex: 1; background: var(--line); }
.seat-list__versus b { color: var(--ink-soft); font-size: 8px; letter-spacing: .12em; }

.lobby-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 14px;
  background: color-mix(in srgb, var(--ink-deep) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.lobby-settings > div { display: grid; gap: 2px; min-width: 0; }
.lobby-settings small { color: var(--ink-soft); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.lobby-settings strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-settings .button { min-height: 38px; padding: 0 13px; font-size: 9px; }

.lobby-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; }
.waiting-note { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 10px; }
.waiting-note__dots { display: flex; gap: 3px; }
.waiting-note__dots i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; animation: waiting-dot 1s ease-in-out infinite; }
.waiting-note__dots i:nth-child(2) { animation-delay: 120ms; }
.waiting-note__dots i:nth-child(3) { animation-delay: 240ms; }
.button--start { min-width: 220px; }
.button--start b { font-family: Georgia, serif; font-size: 20px; }

.lobby-chat {
  display: grid;
  gap: 10px;
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.lobby-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lobby-chat__head > span { display: flex; align-items: center; gap: 8px; color: var(--ink-deep); font-size: 11px; }
.lobby-chat__head i { width: 23px; height: 23px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 8px; font-size: 10px; font-style: normal; }
.lobby-chat__head small { color: var(--ink-soft); font-size: 8px; }

.chat-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 3px 4px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.chat-list--lobby {
  max-height: 190px;
  min-height: 68px;
  padding: 10px;
  background: color-mix(in srgb, var(--ink-deep) 3%, transparent);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.chat-empty { min-height: 52px; display: grid; place-content: center; justify-items: center; gap: 4px; margin: 0; padding: 12px; color: var(--ink-soft); border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 8px; line-height: 1.5; text-align: center; }
.chat-empty span { font-family: Georgia, serif; font-size: 20px; }

.chat-message { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: start; gap: 7px; }
.chat-message__avatar { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--paper-strong) 85%, transparent); border: 1px solid var(--line-strong); border-radius: 9px; font-family: Georgia, serif; font-size: 15px; }
.chat-message > div { min-width: 0; display: grid; gap: 3px; }
.chat-message header { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.chat-message header strong { overflow: hidden; color: var(--ink-deep); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message header small { flex: 0 0 auto; color: var(--ink-soft); font-size: 6px; }
.chat-message p { width: fit-content; max-width: 100%; margin: 0; padding: 7px 9px; color: var(--ink); background: color-mix(in srgb, var(--paper-strong) 72%, transparent); border: 1px solid var(--line); border-radius: 4px 11px 11px; font-size: 9px; line-height: 1.42; overflow-wrap: anywhere; }
.chat-message.is-self { grid-template-columns: minmax(0, 1fr) 29px; }
.chat-message.is-self .chat-message__avatar { grid-column: 2; color: white; background: var(--accent-deep); border-color: transparent; }
.chat-message.is-self > div { grid-column: 1; grid-row: 1; justify-items: end; }
.chat-message.is-self header { flex-direction: row-reverse; }
.chat-message.is-self p { color: white; background: var(--accent-deep); border-color: transparent; border-radius: 11px 4px 11px 11px; }

.chat-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.chat-form label { min-width: 0; }
.chat-form input { width: 100%; height: 40px; padding: 0 12px; color: var(--ink-deep); background: color-mix(in srgb, var(--paper-strong) 85%, transparent); border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; font-size: 10px; }
.chat-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.chat-form button { min-width: 68px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; color: white; background: var(--accent-deep); border-radius: 11px; font-size: 9px; font-weight: 850; }
.chat-form button b { font-size: 14px; }
.chat-form.is-disabled { opacity: .55; }
.chat-form.is-disabled button { pointer-events: none; }

/* Match HUD */
.game-ui {
  min-height: 100dvh;
  pointer-events: none;
}

.game-ui button,
.game-ui .player-hud,
.game-ui .match-panel,
.game-ui .draw-offer { pointer-events: auto; }

.focus-layout { display: contents; }

.board-2d-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: auto;
}

.board-2d {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  background: var(--board-2d-frame);
  border: clamp(4px, .8vmin, 8px) solid var(--board-2d-frame);
  border-radius: clamp(7px, 1.3vmin, 13px);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--board-2d-frame) 25%, transparent);
  touch-action: manipulation;
}

.board-2d__square {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  isolation: isolate;
}

.board-2d__square.is-light { background: var(--board-2d-light); }
.board-2d__square.is-dark { background: var(--board-2d-dark); }
.board-2d__square:hover { filter: brightness(1.045); }
.board-2d__square:focus-visible { z-index: 5; outline: 3px solid var(--gold); outline-offset: -3px; }

.board-2d__piece {
  position: relative;
  z-index: 2;
  font-family: "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
  font-size: clamp(22px, 7.5vmin, 64px);
  line-height: 1;
  transform: translateY(-1%);
  user-select: none;
}

.board-2d__square.has-white-piece .board-2d__piece {
  color: var(--board-2d-piece-light);
  filter: drop-shadow(0 1px 0 var(--board-2d-piece-dark)) drop-shadow(1px 0 0 var(--board-2d-piece-dark)) drop-shadow(-1px 0 0 var(--board-2d-piece-dark));
}

.board-2d__square.has-black-piece .board-2d__piece {
  color: var(--board-2d-piece-dark);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--board-2d-piece-light) 55%, transparent));
}

.board-2d__square.is-last-move {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--gold) 31%, transparent);
}

.board-2d__square.is-selected {
  z-index: 2;
  box-shadow: inset 0 0 0 clamp(3px, .55vmin, 5px) var(--gold);
}

.board-2d__square.is-legal::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 23%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--board-2d-frame) 66%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.board-2d__square.is-capture::after {
  width: 72%;
  background: transparent;
  border: clamp(3px, .55vmin, 5px) solid color-mix(in srgb, var(--danger) 82%, transparent);
}

.board-2d__square.is-check {
  box-shadow: inset 0 0 0 clamp(4px, .7vmin, 7px) var(--danger);
}

.board-2d__square.is-threatened { outline: clamp(3px, .55vmin, 5px) solid var(--danger); outline-offset: clamp(-5px, -.55vmin, -3px); }
.board-2d__square.is-target { outline: clamp(3px, .55vmin, 5px) solid var(--mint); outline-offset: clamp(-5px, -.55vmin, -3px); }

.board-2d__file,
.board-2d__rank {
  position: absolute;
  z-index: 4;
  color: color-mix(in srgb, var(--board-2d-frame) 70%, transparent);
  font-size: clamp(6px, 1.2vmin, 10px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.board-2d__file { right: 5px; bottom: 4px; }
.board-2d__rank { top: 5px; left: 5px; }
.board-2d__square.is-dark .board-2d__file,
.board-2d__square.is-dark .board-2d__rank { color: color-mix(in srgb, var(--board-2d-light) 75%, transparent); }

.board-2d__status {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 50%;
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--board-2d-piece-light);
  background: var(--board-2d-frame);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.impact-flash {
  position: fixed;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.impact-flash::before { content: ""; position: absolute; inset: 0; opacity: 0; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.impact-flash i { position: absolute; top: 54%; left: 50%; width: 90px; height: 90px; opacity: 0; border: 2px solid color-mix(in srgb, var(--accent) 66%, white); border-radius: 50%; transform: translate(-50%, -50%) scale(.35); }
.impact-flash i:nth-child(2) { border-width: 1px; animation-delay: 70ms; }
.impact-flash.is-active::before { animation: impact-wash 420ms ease-out both; }
.impact-flash.is-active i { animation: impact-ring 680ms cubic-bezier(.12,.72,.16,1) both; }
.impact-flash.is-capture::before { background: color-mix(in srgb, var(--gold) 17%, transparent); }
.impact-flash.is-capture i { border-color: color-mix(in srgb, var(--gold) 78%, white); }
.impact-flash.is-check::before { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.impact-flash.is-check i { border-color: color-mix(in srgb, var(--danger) 80%, white); }

.player-hud {
  position: fixed;
  z-index: 25;
  left: clamp(18px, 3vw, 48px);
  width: min(340px, calc(100vw - 36px));
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 19px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
}

.player-hud--top { top: 104px; }
.player-hud--bottom { bottom: max(25px, env(safe-area-inset-bottom)); }

.player-hud__avatar {
  width: 47px;
  height: 47px;
  color: #4a3d50;
  background: #fff0dc;
  border-radius: 15px;
  font-size: 26px;
}

.player-hud.is-black .player-hud__avatar { color: #fff0dc; background: #55455e; }
.player-hud.is-bot .player-hud__avatar { color: #fff8e8; background: linear-gradient(145deg, #efa762, #d86d79); border-color: #704457; box-shadow: 0 4px 0 #704457, 0 0 0 3px rgba(241,185,81,.18); }
.player-hud.is-bot .player-hud__identity small { color: var(--accent-deep); }
.player-hud__identity { display: grid; min-width: 0; line-height: 1.25; }
.player-hud__identity small { color: var(--ink-soft); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.player-hud__identity strong { overflow: hidden; color: var(--ink-deep); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.player-hud__identity em { color: var(--ink-soft); font-size: 8px; font-style: normal; }
.player-hud__clock { min-width: 75px; padding: 9px 8px; color: var(--ink-deep); background: color-mix(in srgb, var(--ink-deep) 6%, transparent); border: 1px solid var(--line); border-radius: 12px; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 850; letter-spacing: .03em; text-align: center; }
.player-hud.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-soft); }
.player-hud.is-active .player-hud__clock { color: white; background: var(--accent-deep); border-color: transparent; }
.player-hud__clock.is-low { color: white; background: var(--danger); animation: clock-pulse 1s ease-in-out infinite; }

.game-ui.is-2d .focus-layout {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: 50%;
  width: var(--focus-board-size);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.game-ui.is-2d .player-hud {
  position: static;
  width: 100%;
  min-height: 44px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--paper) 94%, var(--focus-background));
  border-radius: 11px;
  box-shadow: none;
  backdrop-filter: none;
}

.game-ui.is-2d .player-hud__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 19px;
}

.game-ui.is-2d .player-hud__identity small,
.game-ui.is-2d .player-hud__identity em { display: none; }
.game-ui.is-2d .player-hud__identity strong { font-size: 11px; }
.game-ui.is-2d .player-hud__clock { min-width: 68px; padding: 5px 8px; border-radius: 8px; font-size: 15px; }
.game-ui.is-2d .player-hud.is-active { box-shadow: inset 3px 0 var(--accent); }

.game-ui.is-2d .impact-flash,
.game-ui.is-2d .turn-banner,
.game-ui.is-2d .match-panel { display: none; }
.game-ui.is-2d .dc-banner { top: 12px; }

.dc-banner {
  position: fixed;
  z-index: 25;
  top: 152px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 14px;
  transform: translateX(-50%);
  animation: card-rise 320ms cubic-bezier(.16,.82,.24,1) both;
}

.dc-banner > i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--danger);
  border-radius: 50%;
  animation: dc-pulse 1s ease-in-out infinite;
}

.dc-banner > div { display: grid; gap: 1px; }
.dc-banner strong { color: var(--ink-deep); font-size: 11px; }
.dc-banner small { color: var(--ink-soft); font-size: 9px; font-variant-numeric: tabular-nums; }

.turn-banner {
  position: fixed;
  z-index: 20;
  top: 107px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  padding: 0 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(42,34,47,.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateX(-50%);
  backdrop-filter: blur(15px);
}

.turn-banner i { width: 8px; height: 8px; background: #fff0dc; border: 1px solid #4c3e51; border-radius: 50%; }
.turn-banner.is-black i { background: #55455e; }
.turn-banner.is-check { color: white; background: var(--danger); border-color: transparent; animation: check-pop 500ms ease both; }
.turn-banner.is-thinking i { background: var(--gold); border-color: color-mix(in srgb, var(--gold) 72%, var(--ink-deep)); animation: thinking-pulse 900ms ease-in-out infinite; }

.match-panel {
  position: fixed;
  z-index: 25;
  top: 104px;
  right: clamp(18px, 3vw, 48px);
  width: min(260px, calc(100vw - 36px));
  max-height: 58px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  transition: max-height 280ms ease, width 280ms ease;
}

.match-panel.is-open {
  width: min(300px, calc(100vw - 36px));
  max-height: min(520px, calc(100dvh - 130px));
}

.match-panel__head {
  min-height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px 10px 15px;
}

.match-panel.is-open .match-panel__head { border-bottom: 1px solid var(--line); }
.match-panel__head > div { min-width: 0; display: grid; }
.match-panel__head small { color: var(--ink-soft); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.match-panel__head small b { color: var(--accent-deep); letter-spacing: .12em; }
.match-panel__head strong { overflow: hidden; color: var(--ink-deep); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.panel-toggle { position: relative; width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--ink-deep) 6%, transparent); border-radius: 11px; font-size: 10px; letter-spacing: .08em; }
.panel-toggle > b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; color: white; background: var(--danger); border: 2px solid var(--paper); border-radius: 99px; font-size: 6px; letter-spacing: 0; }

.match-panel__body { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 13px 14px 14px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.match-panel.is-open .match-panel__body { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 80ms; }
.match-panel__chat { min-height: 220px; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.match-panel__section-title { display: flex; align-items: center; gap: 7px; color: var(--ink-deep); font-size: 9px; }
.match-panel__section-title > span { width: 23px; height: 23px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 7px; font-size: 8px; }
.chat-panel .chat-list { flex: 1; }
.chat-form--panel button { min-width: 40px; padding: 0; }

.match-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.match-actions.is-solo { grid-template-columns: 1fr; }
.match-actions button { min-height: 39px; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-deep) 5%, transparent); border: 1px solid var(--line); border-radius: 11px; font-size: 8px; font-weight: 850; }
.match-actions button:hover { color: var(--ink-deep); background: var(--accent-soft); }
.match-actions button span { margin-right: 4px; font-size: 13px; }
.button--share { width: 100%; min-height: 39px; margin-top: 8px; font-size: 9px; }
.button--share span { margin-left: auto; }

.board-controls {
  position: fixed;
  z-index: 20;
  bottom: max(27px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.board-controls button {
  min-width: 64px;
  min-height: 48px;
  display: grid;
  place-content: center;
  gap: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(42,34,47,.12);
  backdrop-filter: blur(15px);
}

.board-controls button span { font-size: 17px; line-height: 1; }
.board-controls button small { color: var(--ink-soft); font-size: 7px; font-weight: 850; text-transform: uppercase; }

.game-ui.is-2d .player-hud--top { padding-right: 49px; }
.no-webgl .game-ui.is-2d .player-hud--top { padding-right: 7px; }
.game-ui.is-2d .board-controls {
  position: absolute;
  z-index: 30;
  top: 4px;
  right: 4px;
  bottom: auto;
  left: auto;
  display: block;
  transform: none;
}
.game-ui.is-2d .board-controls button { display: none; }
.game-ui.is-2d .board-controls #view-mode-toggle {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  background: color-mix(in srgb, var(--ink-deep) 6%, transparent);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
}
.game-ui.is-2d #view-mode-toggle span { font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.game-ui.is-2d #view-mode-toggle small { display: none; }

.hint-button {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

.hint-button small b {
  display: inline-grid;
  place-items: center;
  min-width: 12px;
  height: 12px;
  margin-left: 2px;
  padding: 0 2px;
  color: white;
  background: var(--accent);
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
}

.hint-button:not(:disabled) span { animation: hint-twinkle 2.6s ease-in-out infinite; }
.hint-button:disabled { opacity: .55; box-shadow: none !important; border-color: var(--line) !important; }
.hint-button.is-exhausted small b { background: var(--ink-soft); }

@keyframes hint-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.18) rotate(12deg); filter: brightness(1.25); }
}

.draw-offer {
  position: fixed;
  z-index: 40;
  top: 112px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(510px, calc(100vw - 36px));
  padding: 11px 13px;
  border-radius: 17px;
  transform: translateX(-50%);
  animation: toast-in 350ms cubic-bezier(.16,.82,.24,1) both;
}

.draw-offer > span { width: 35px; height: 35px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 10px; font-size: 18px; }
.draw-offer > div { min-width: 0; flex: 1; display: grid; }
.draw-offer small { color: var(--ink-soft); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.draw-offer strong { font-size: 10px; }
.draw-offer button { min-height: 34px; padding: 0 11px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 9px; font-size: 8px; font-weight: 850; }
.draw-offer button.accept { color: white; background: var(--accent-deep); border-color: transparent; }

/* Modals */
.modal {
  width: min(570px, calc(100% - 28px));
  max-width: none;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.modal::backdrop { background: rgba(28,22,32,.54); backdrop-filter: blur(9px); }
.modal[open] { animation: modal-in 300ms cubic-bezier(.16,.82,.24,1) both; }
.modal__surface { position: relative; padding: clamp(24px, 4vw, 38px); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow); }
.modal__close { width: 38px; height: 38px; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-deep) 6%, transparent); border-radius: 12px; font-size: 23px; line-height: 1; }
.modal__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 25px; }

.setup-modal__grid { display: grid; gap: 13px; margin-top: 25px; }
.setup-modal label { display: grid; gap: 6px; }
.setup-modal label > span { color: var(--ink-soft); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.setup-modal select { height: 50px; padding: 0 14px; font-size: 12px; font-weight: 800; }

.bot-modal { width: min(700px, calc(100% - 28px)); }
.bot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 22px; }
.bot-card { position: relative; min-width: 0; min-height: 168px; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 16px 13px; color: var(--ink); background: color-mix(in srgb, var(--paper-strong) 72%, transparent); border: 1.5px solid var(--line); border-radius: 20px; text-align: center; transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms ease, box-shadow 170ms ease, background 170ms ease; }
.bot-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); }
.bot-card.is-selected { background: color-mix(in srgb, var(--accent-soft) 40%, var(--paper-strong)); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 26px rgba(45,34,50,.09); }
.bot-card > b { position: absolute; top: 11px; right: 11px; width: 21px; height: 21px; display: grid; place-items: center; color: white; background: var(--accent-deep); border-radius: 50%; font-size: 10px; opacity: 0; transform: scale(.6); transition: opacity 150ms ease, transform 150ms ease; }
.bot-card.is-selected > b { opacity: 1; transform: scale(1); }
.bot-card__portrait { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border: 2px solid rgba(66,49,71,.6); border-radius: 25px 25px 25px 10px; box-shadow: 0 5px 0 rgba(66,49,71,.52); transform: rotate(-2deg); }
.bot-card__portrait--sprout { color: #3e705d; background: linear-gradient(145deg, #dff4c7, #8cd6a5); }
.bot-card__portrait--fox { color: #74444c; background: linear-gradient(145deg, #ffd59a, #ef8c78); }
.bot-card__portrait--sage { color: #fff4db; background: linear-gradient(145deg, #777bd7, #423b8d); }
.bot-face { font-family: Georgia, serif; font-size: 42px; font-style: normal; line-height: 1; }
.bot-spark { position: absolute; right: -8px; top: -8px; width: 28px; height: 28px; display: grid; place-items: center; color: white; background: var(--accent-deep); border: 2px solid var(--paper-strong); border-radius: 10px; font-size: 13px; font-style: normal; transform: rotate(8deg); }
.bot-card__copy { display: grid; justify-items: center; gap: 2px; }
.bot-card__copy small { color: var(--accent-deep); font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.bot-card__copy strong { color: var(--ink-deep); font-family: Georgia, serif; font-size: 16px; }
.bot-pips { display: flex; gap: 4px; margin-top: 7px; }
.bot-pips i { width: 17px; height: 5px; background: var(--line-strong); border-radius: 99px; }
.bot-card:nth-child(1) .bot-pips i:nth-child(1),
.bot-card:nth-child(2) .bot-pips i:nth-child(-n+2),
.bot-card:nth-child(3) .bot-pips i { background: var(--accent); }

.promotion-modal { width: min(480px, calc(100% - 28px)); }
.promotion-modal .modal__head { justify-content: center; text-align: center; }
.promotion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 25px; }
.promotion-grid button { min-height: 112px; display: grid; place-content: center; gap: 5px; color: var(--ink); background: color-mix(in srgb, var(--ink-deep) 5%, transparent); border: 1.5px solid var(--line); border-radius: 17px; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.promotion-grid button:hover { transform: translateY(-3px); background: var(--accent-soft); border-color: var(--accent); }
.promotion-grid span { font-family: Georgia, serif; font-size: 46px; line-height: 1; }
.promotion-grid strong { font-size: 9px; }

.confirm-modal { width: min(460px, calc(100% - 28px)); text-align: center; }
.confirm-modal__icon { width: 62px; height: 62px; display: grid; place-items: center; margin: -2px auto 13px; color: white; background: var(--danger); border-radius: 20px; box-shadow: 0 6px 0 color-mix(in srgb, var(--danger) 70%, black); font-size: 27px; }
.confirm-modal p { margin: 12px auto 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.confirm-modal .modal__actions { justify-content: center; }

.result-modal { width: min(500px, calc(100% - 28px)); text-align: center; }
.result-modal__crest { width: 82px; height: 82px; display: grid; place-items: center; margin: -78px auto 24px; color: white; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); border: 3px solid var(--paper-strong); border-radius: 27px 27px 27px 10px; box-shadow: 0 7px 0 color-mix(in srgb, var(--accent-deep) 75%, var(--ink-deep)), 0 20px 36px rgba(46,35,52,.23); font-family: Georgia, serif; font-size: 46px; transform: rotate(-4deg); }
.result-modal h2 { font-size: clamp(29px, 5vw, 39px); }
.result-modal p { color: var(--ink-soft); font-size: 12px; }
.result-modal__score { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 20px; padding: 12px; background: color-mix(in srgb, var(--ink-deep) 5%, transparent); border-radius: 14px; font-size: 10px; font-weight: 800; }
.result-modal__score b { color: var(--accent); }
.result-modal .modal__actions { justify-content: center; }
.rematch-note { display: block; margin-top: 13px; color: var(--ink-soft); font-size: 8px; }
.result-modal__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.result-modal__confetti i { position: absolute; top: -20px; width: 7px; height: 18px; background: var(--accent); border-radius: 4px; animation: confetti 2.8s ease-in infinite; }
.result-modal__confetti i:nth-child(1) { left: 10%; animation-delay: .1s; background: var(--gold); }
.result-modal__confetti i:nth-child(2) { left: 26%; animation-delay: .8s; background: var(--mint); }
.result-modal__confetti i:nth-child(3) { left: 43%; animation-delay: .3s; }
.result-modal__confetti i:nth-child(4) { left: 61%; animation-delay: 1.1s; background: #8ea4ff; }
.result-modal__confetti i:nth-child(5) { left: 78%; animation-delay: .5s; background: var(--gold); }
.result-modal__confetti i:nth-child(6) { left: 90%; animation-delay: 1.4s; background: var(--mint); }

.toast-stack {
  position: fixed;
  z-index: 200;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: min(360px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  font-size: 10px;
  font-weight: 750;
  animation: toast-in 280ms cubic-bezier(.16,.82,.24,1) both;
}

.toast::before { content: "✦"; color: var(--accent); font-size: 16px; }
.toast.is-error::before { content: "!"; width: 20px; height: 20px; display: grid; place-items: center; color: white; background: var(--danger); border-radius: 50%; font-size: 10px; }
.toast.is-leaving { animation: toast-out 250ms ease both; }

.loading {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #47394b;
  background: #e4f3df;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading__crest { width: 75px; height: 75px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #ff91b2, #cd5782); border: 3px solid #493b4d; border-radius: 25px 25px 25px 9px; box-shadow: 0 7px 0 #493b4d; font-family: Georgia, serif; font-size: 43px; animation: loading-hop 1.2s ease-in-out infinite; }
.loading p { margin: 3px 0 0; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.loading__track { width: 170px; height: 6px; overflow: hidden; background: rgba(73,59,77,.12); border-radius: 99px; }
.loading__track span { width: 45%; height: 100%; display: block; background: #e26894; border-radius: inherit; animation: loading-track 1s ease-in-out infinite alternate; }

@keyframes card-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }
@keyframes waiting-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }
@keyframes clock-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 20%, transparent); } }
@keyframes thinking-pulse { 50% { transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); } }
@keyframes dc-pulse { 50% { transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 18%, transparent); } }
@keyframes check-pop { 0% { transform: translateX(-50%) scale(.82); } 55% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes impact-wash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes impact-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 16% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(8.5); } }
@keyframes confetti { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(480px) rotate(540deg); opacity: 0; } }
@keyframes loading-hop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-11px) rotate(3deg); } }
@keyframes loading-track { from { transform: translateX(-15%); } to { transform: translateX(135%); } }

@media (max-width: 1180px) {
  .home { padding-inline: 20px; }
  .match-panel { width: 260px; }
  .player-hud { width: 290px; }
}

@media (max-width: 980px) {
  body { overflow: auto; }
  .topbar { min-height: 74px; padding-inline: 18px; }
  .brand__crest { width: 46px; height: 46px; border-radius: 15px 15px 15px 6px; }
  .brand__crown { font-size: 28px; }
  .home { padding: 90px 16px 20px; }
  .player-hud { width: 250px; }
  .player-hud__clock { min-width: 64px; font-size: 16px; }
  .match-panel { top: auto; right: 16px; bottom: 16px; width: 240px; max-height: 58px; transition: max-height 300ms ease; }
  .match-panel.is-open { max-height: min(530px, calc(100dvh - 130px)); }
  .panel-toggle { display: grid; place-items: center; transition: transform 200ms ease; }
  .player-hud--bottom { bottom: 17px; }
  .board-controls { bottom: 87px; }
}

@media (max-width: 720px) {
  .topbar { min-height: 68px; }
  .brand__copy strong { font-size: 13px; }
  .connection span { display: none; }
  .connection { width: 37px; padding: 0; justify-content: center; }
  .icon-button { width: 38px; min-height: 38px; }
  .room-chip { min-height: 37px; padding: 0 11px; }
  .home { align-items: flex-end; justify-content: center; padding: 78px 10px 12px; }
  .home-panel { width: 100%; max-height: min(60dvh, 500px); border-radius: 20px; }
  .lobby { padding: 88px 12px 18px; }
  .lobby-card { padding: 24px 16px; border-radius: 24px; }
  .lobby-card h2 { font-size: 26px; }
  .invite-box { align-items: stretch; flex-direction: column; }
  .invite-box .button { width: 100%; }
  .lobby-settings { grid-template-columns: 1fr 1fr; }
  .lobby-settings > div:nth-child(3) { grid-column: span 1; }
  .lobby-settings .button { grid-column: span 1; }
  .lobby-card__footer { align-items: stretch; flex-direction: column; }
  .button--start { width: 100%; min-width: 0; }
  .waiting-note { justify-content: center; }
  .game-ui { min-height: 100svh; }
  .player-hud { left: 12px; width: calc(100% - 24px); min-height: 58px; padding: 7px 9px; }
  .player-hud--top { top: 75px; }
  .player-hud--bottom { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 142px); }
  .player-hud__avatar { width: 42px; height: 42px; font-size: 23px; }
  .player-hud__identity small, .player-hud__identity em { font-size: 6px; }
  .player-hud__identity strong { font-size: 11px; }
  .player-hud__clock { min-width: 61px; padding: 7px 5px; font-size: 15px; }
  .turn-banner { top: 142px; }
  .dc-banner { top: 188px; width: max-content; max-width: calc(100vw - 20px); }
  .match-panel { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: 120px; }
  .match-panel.is-open { bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)); width: min(370px, calc(100% - 20px)); max-height: min(490px, calc(100svh - 230px)); }
  .match-panel__head { min-height: 58px; padding: 10px; }
  .match-panel:not(.is-open) .match-panel__head > div { display: none; }
  .match-panel:not(.is-open) .match-panel__head { justify-content: center; }
  .board-controls { bottom: 78px; }
  .board-controls button { min-width: 56px; min-height: 43px; }
  .draw-offer { top: 146px; min-width: calc(100vw - 20px); }
  .draw-offer > div strong { font-size: 8px; }
  .draw-offer > div small { display: none; }
  .promotion-grid { grid-template-columns: 1fr 1fr; }
  .promotion-grid button { min-height: 92px; }
  .promotion-grid span { font-size: 38px; }
  .modal__actions { align-items: stretch; flex-direction: column-reverse; }
  .modal__actions .button { width: 100%; }
  .result-modal__crest { margin-top: -66px; }
  .bot-modal { max-height: calc(100dvh - 24px); }
  .bot-modal .modal__surface { max-height: calc(100dvh - 24px); overflow: auto; }
  .bot-grid { grid-template-columns: 1fr; }
  .bot-card { min-height: 88px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 13px; padding: 12px; text-align: left; }
  .bot-card__portrait { width: 66px; height: 66px; }
  .bot-face { font-size: 36px; }
  .bot-card__copy { justify-items: start; }
  .bot-card > b { position: static; }
}

@media (max-height: 760px) and (min-width: 981px) {
  .home-panel { max-height: calc(100dvh - 112px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}