:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #eef3ef;
  --surface-3: #f8fbf8;
  --text: #15211e;
  --muted: #66746f;
  --line: #d8e2dc;
  --line-strong: #b7c8bf;
  --accent: #247568;
  --accent-strong: #15584d;
  --accent-soft: #dcefeb;
  --accent-2: #d89a2b;
  --danger: #b94040;
  --shadow: 0 16px 34px rgba(26, 44, 39, 0.12);
  --button-hover: #a9beb5;
  --board-water: #cfe7e2;
  --board-line: #f6fbf8;
  --board-line-highlight: #ffffff;
  --board-token-bg: #fffff7;
  --board-token-text: #18231f;
  --board-token-line: rgba(25, 35, 31, 0.18);
  --board-token-halo: rgba(255, 255, 255, 0.62);
  --board-token-pips: rgba(21, 33, 30, 0.64);
  --hex-stroke: rgba(216, 224, 221, 0.86);
  --terrain-text: rgba(17, 28, 25, 0.72);
  --terrain-icon: rgba(15, 25, 22, 0.56);
  --terrain-hills: #bf7253;
  --terrain-forest: #2f7458;
  --terrain-fields: #dcb85a;
  --terrain-pasture: #a9c96d;
  --terrain-mountains: #858d94;
  --terrain-desert: #cfaa70;
  --resource-brick: #b75d47;
  --resource-timber: #4f8762;
  --resource-grain: #c99f35;
  --resource-wool: #70a75e;
  --resource-ore: #707982;
  --chip-bg: #fbf7ed;
  --chip-icon: #ffffff;
  --port-bg: rgba(255, 255, 255, 0.96);
  --port-text: #2d3432;
  --port-line: rgba(82, 90, 87, 0.58);
  --port-border: rgba(82, 90, 87, 0.5);
  --active-row: #eef7f3;
  --active-row-line: #8bbdaf;
  --toast-bg: #fff6db;
  --toast-line: #e8c86e;
  --empty-node: rgba(238, 242, 240, 0.82);
  --empty-node-line: rgba(95, 101, 99, 0.44);
  --target-node: rgba(202, 208, 205, 0.72);
  --target-line: rgba(88, 96, 92, 0.66);
  --target-ghost: rgba(190, 197, 194, 0.22);
  --target-halo: rgba(203, 210, 207, 0.34);
  --placement-button-bg: rgba(255, 255, 255, 0.94);
  --placement-button-line: rgba(35, 48, 43, 0.34);
  --placement-shade: rgba(15, 26, 23, 0.24);
  --placement-shade-line: rgba(15, 26, 23, 0.3);
  --piece-outline: rgba(255, 255, 255, 0.24);
  --piece-detail: rgba(16, 24, 21, 0.72);
  --piece-halo: rgba(255, 255, 255, 0.44);
  --piece-road-outline: rgba(255, 255, 255, 0.24);
  --piece-road-glow: rgba(255, 255, 255, 0.52);
  --dice-bg: #15211e;
  --dice-text: #ffffff;
  --control-strong-bg: #15211e;
  --control-strong-text: #ffffff;
  /* Shared UI rhythm for repeatable menus, cards, callouts, and controls. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 28px;
  --space-11: 32px;
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-modal: 18px;
  --radius-pill: 999px;
  --control-sm: 36px;
  --control-md: 42px;
  --control-lg: 48px;
  --control-icon-sm: 34px;
  --control-icon-md: 40px;
  --control-icon-lg: 44px;
  --ui-card-padding: var(--space-6);
  --ui-card-gap: var(--space-5);
  --ui-page-gap: var(--space-5);
  --ui-section-gap: var(--space-5);
  --ui-column-gap: clamp(var(--space-5), 1.25vw, var(--space-7));
  --ui-shell-gap: clamp(var(--space-6), 1.5vw, var(--space-8));
  --ui-toolbar-padding: var(--space-4);
  --ui-toolbar-gap: var(--space-4);
  --ui-popover-padding: var(--space-7);
  --ui-card-border: color-mix(in srgb, var(--accent) 22%, var(--line));
  --ui-toolbar-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --ui-card-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 76%, transparent), transparent 110%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  --ui-callout-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 76%),
    color-mix(in srgb, var(--surface) 94%, var(--bg));
  --ui-menu-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 72%, transparent), transparent 110%),
    var(--surface);
  --ui-card-shadow:
    0 14px 30px rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ui-popover-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ui-modal-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ui-chip-bg: var(--accent-soft);
  --ui-chip-text: var(--accent-strong);
  --ui-chip-border: color-mix(in srgb, var(--accent) 28%, var(--line));
  --ui-icon-tile-bg: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  --focus-ring-strong: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 18%, transparent);
  --motion-fast: 150ms ease;
  --motion-standard: 180ms ease;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050706;
  --surface: #0b0f0e;
  --surface-2: #111816;
  --surface-3: #070b0a;
  --text: #f3fbf8;
  --muted: #96aaa3;
  --line: #22302c;
  --line-strong: #385049;
  --accent: #15967f;
  --accent-strong: #35e0c0;
  --accent-soft: #082d27;
  --accent-2: #efb852;
  --danger: #ff7b73;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.58);
  --button-hover: #4d6b62;
  --board-water: #08282d;
  --board-line: #626d68;
  --board-line-highlight: #7a8580;
  --board-token-bg: #f5f4e9;
  --board-token-text: #15211e;
  --board-token-line: rgba(255, 255, 255, 0.2);
  --board-token-halo: rgba(245, 244, 233, 0.28);
  --board-token-pips: rgba(21, 33, 30, 0.68);
  --hex-stroke: rgba(119, 132, 127, 0.48);
  --terrain-text: rgba(12, 22, 19, 0.76);
  --terrain-icon: rgba(10, 20, 17, 0.58);
  --terrain-hills: #c27156;
  --terrain-forest: #2f765c;
  --terrain-fields: #d6b350;
  --terrain-pasture: #a2c965;
  --terrain-mountains: #8d96a2;
  --terrain-desert: #bd9258;
  --resource-brick: #c76f59;
  --resource-timber: #62a67d;
  --resource-grain: #d8ad42;
  --resource-wool: #86bd6d;
  --resource-ore: #8d99a4;
  --chip-bg: #0f1513;
  --chip-icon: #0f1715;
  --port-bg: rgba(7, 11, 10, 0.9);
  --port-text: #f4f6f5;
  --port-line: rgba(218, 232, 227, 0.48);
  --port-border: rgba(218, 232, 227, 0.42);
  --active-row: #0d201c;
  --active-row-line: #1aa98f;
  --toast-bg: #1d1608;
  --toast-line: #6d5218;
  --empty-node: rgba(188, 198, 194, 0.62);
  --empty-node-line: rgba(238, 242, 240, 0.34);
  --target-node: rgba(186, 196, 192, 0.54);
  --target-line: rgba(212, 222, 218, 0.56);
  --target-ghost: rgba(204, 214, 210, 0.16);
  --target-halo: rgba(194, 206, 201, 0.2);
  --placement-button-bg: rgba(8, 13, 12, 0.94);
  --placement-button-line: rgba(230, 240, 236, 0.3);
  --placement-shade: rgba(0, 0, 0, 0.32);
  --placement-shade-line: rgba(255, 255, 255, 0.16);
  --piece-outline: rgba(255, 255, 255, 0.22);
  --piece-detail: rgba(4, 8, 7, 0.82);
  --piece-halo: rgba(255, 255, 255, 0.38);
  --piece-road-outline: rgba(255, 255, 255, 0.2);
  --piece-road-glow: rgba(255, 255, 255, 0.34);
  --dice-bg: #050706;
  --dice-text: #f3fbf8;
  --control-strong-bg: #050706;
  --control-strong-text: #f3fbf8;
  --ui-card-border: color-mix(in srgb, var(--accent) 28%, var(--line));
  --ui-toolbar-bg: color-mix(in srgb, var(--surface-2) 74%, transparent);
  --ui-card-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 110%),
    color-mix(in srgb, var(--surface) 94%, var(--bg));
  --ui-callout-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 54%, transparent), transparent 76%),
    color-mix(in srgb, var(--surface-2) 82%, var(--bg));
  --ui-menu-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 72%, transparent), transparent 110%),
    color-mix(in srgb, var(--surface) 96%, var(--bg));
  --ui-card-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ui-popover-shadow:
    0 20px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ui-modal-shadow:
    0 30px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ui-chip-bg: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
  --ui-chip-text: var(--accent-strong);
  --ui-chip-border: color-mix(in srgb, var(--accent) 36%, var(--line));
  --ui-icon-tile-bg: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
}

body[data-theme="light"][data-contrast="high"] {
  --muted: #43534e;
  --line: #a9bbb4;
  --line-strong: #748d84;
  --button-hover: #78958a;
}

body[data-theme="dark"][data-contrast="high"] {
  --muted: #c0d1cb;
  --line: #435b54;
  --line-strong: #6b887f;
  --button-hover: #76968c;
}

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}

button,
select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  min-height: var(--control-md);
  padding: 0 var(--space-6);
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

button:not(:disabled):hover:not([data-play-menu-hover-muted="true"]):not([data-home-hover-muted="true"]) {
  border-color: var(--button-hover);
}

select {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-height: var(--control-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 var(--space-3);
  font-weight: 650;
}

/* Lightweight primitives for new UI surfaces; existing app classes opt into the same tokens below. */
.ui-stack {
  display: grid;
  gap: var(--ui-stack-gap, var(--space-5));
}

.ui-cluster {
  display: flex;
  align-items: center;
  gap: var(--ui-cluster-gap, var(--space-3));
  flex-wrap: wrap;
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-grid-min, 220px)), 1fr));
  gap: var(--ui-grid-gap, var(--space-5));
}

.ui-toolbar {
  min-width: 0;
  display: grid;
  gap: var(--ui-toolbar-gap);
  align-items: center;
  padding: var(--ui-toolbar-padding);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background: var(--ui-toolbar-bg);
}

.ui-card,
.ui-callout,
.ui-menu,
.ui-popover,
.ui-modal {
  min-width: 0;
  border: 1px solid var(--ui-card-border);
  color: var(--text);
}

.ui-card {
  display: grid;
  gap: var(--ui-card-gap);
  padding: var(--ui-card-padding);
  border-radius: var(--radius-md);
  background: var(--ui-card-bg);
  box-shadow: var(--ui-card-shadow);
}

.ui-callout {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--ui-callout-bg);
}

.ui-menu,
.ui-popover {
  display: grid;
  border-radius: var(--radius-xl);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-popover-shadow);
}

.ui-menu {
  gap: var(--space-1);
  padding: var(--space-2);
}

.ui-popover {
  gap: var(--space-5);
  padding: var(--ui-popover-padding);
}

.ui-modal {
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--ui-modal-shadow);
}

.ui-menu-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  color: var(--text);
}

.ui-chip,
.ui-pill {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border: 1px solid var(--ui-chip-border);
  background: var(--ui-chip-bg);
  color: var(--ui-chip-text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.ui-chip {
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4);
}

.ui-pill {
  border-radius: var(--radius-pill);
  padding: 0 var(--space-5);
}

.ui-icon-tile {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--ui-icon-tile-bg);
  color: var(--accent-strong);
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.app-shell.is-home {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

.app-shell.is-admin {
  display: block;
  height: auto;
  max-height: none;
  min-height: 100vh;
  overflow: visible;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  width: 100%;
  margin: 0 0 var(--space-6);
  min-height: 58px;
  padding: max(var(--space-3), env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) var(--space-3) max(22px, env(safe-area-inset-left));
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(15, 26, 22, 0.08);
}

.brand-block {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 52%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface));
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0;
}

.brand-home-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  padding: 2px 4px 2px 0;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: block;
  object-fit: contain;
}

.brand-home-button:not(:disabled):hover,
.brand-home-button:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.brand-home-button:focus-visible {
  box-shadow: var(--focus-ring);
}

.topbar-center {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar-center.is-empty {
  min-width: 1px;
}

.topbar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-self: end;
  flex: 0 0 auto;
}

.friends-menu-anchor {
  position: relative;
  display: inline-flex;
}

.nav-button {
  min-height: var(--control-icon-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 13px;
  border-radius: var(--radius-md);
  background: var(--surface);
  white-space: nowrap;
}

.nav-button.icon-only {
  width: var(--control-icon-md);
  padding: 0;
}

.nav-button.has-shortcut {
  gap: var(--space-2);
  padding-inline: 9px 11px;
}

.friends-button.has-shortcut {
  gap: var(--space-4);
  padding-inline: 13px 9px;
}

.nav-button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button span {
  font-size: 13px;
  font-weight: 900;
}

.topbar-shortcut-keycap {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: currentColor;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.topbar-shortcut-keycap.is-escape {
  width: 34px;
  font-size: 9px;
}

.settings-button.has-shortcut {
  min-width: 72px;
  padding-inline: 9px;
}

.topbar-actions .settings-button.has-shortcut:not(:disabled):hover {
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 26%, var(--line));
  color: var(--text);
}

.friends-button b {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.friends-button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: var(--accent-strong);
}

.leaderboard-button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: var(--accent-strong);
}

.admin-nav-button {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  color: var(--danger);
}

.admin-nav-button span {
  color: var(--danger);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-nav-button.is-active,
.admin-nav-button:not(:disabled):hover,
.admin-nav-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 76%, var(--line-strong));
  background: color-mix(in srgb, var(--danger) 22%, var(--surface));
  color: var(--danger);
}

.topbar-actions .nav-button.icon-only,
.theme-button,
.settings-button {
  color: var(--text);
}

.topbar-actions .nav-button.icon-only:not(:disabled):hover,
.topbar-actions .nav-button.icon-only:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 26%, var(--line));
  color: var(--text);
  outline: none;
}

.topbar-actions .nav-button:focus {
  outline: none;
}

.topbar-actions .nav-button:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-strong) 74%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 42%, transparent);
}

.topbar-actions .nav-button:not(.admin-nav-button):focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface));
  color: var(--accent-strong);
}

.topbar-actions .admin-nav-button:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--danger) 82%, var(--line-strong));
  background: color-mix(in srgb, var(--danger) 22%, var(--surface));
  color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 46%, transparent);
}

.new-game-button {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 84%, #05221e),
      color-mix(in srgb, var(--accent) 72%, var(--accent-strong))
    );
  border-color: color-mix(in srgb, var(--accent-strong) 44%, var(--accent));
  color: #ffffff;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.new-game-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent-strong) 72%, white);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hub-shell {
  width: min(100%, 1400px);
  margin: 0 auto;
  height: calc(100vh - 88px);
  max-height: calc(100vh - 88px);
  min-height: 0;
  padding: 0 clamp(var(--space-5), 2vw, 22px) var(--space-5);
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "nav main"
    "rail footer";
  gap: var(--ui-shell-gap);
  align-items: stretch;
  flex: 1;
  overflow: hidden;
}

.hub-shell.has-no-left-rail {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "nav main"
    "nav footer";
}

.hub-left-rail {
  min-width: 0;
  grid-area: rail;
  align-self: end;
  display: grid;
  gap: 10px;
}

.home-tab-nav {
  grid-area: nav;
  align-self: start;
  z-index: 20;
  display: grid;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-card-shadow);
}

.home-tab-nav-main {
  display: grid;
  gap: var(--space-3);
}

.home-tab-button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 0 11px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.home-tab-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-tab-button span {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-tab-keycap {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: currentColor;
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.home-tab-keycap.is-space {
  width: 42px;
}

.home-tab-button .spacebar-glyph {
  width: 32px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-tab-button.is-active,
.home-tab-button:not(:disabled):hover,
.home-tab-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.home-tab-group {
  min-width: 0;
  display: grid;
}

.home-tab-group > .home-tab-button {
  width: 100%;
  min-height: 48px;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  gap: var(--space-4);
}

.home-tab-label-stack {
  min-width: 0;
  position: relative;
  align-self: center;
  display: block;
  overflow: visible;
}

.home-tab-expand-icon {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  width: 14px;
  height: 6px;
  display: block;
  overflow: visible;
  translate: -50% 0;
  transform-origin: 50% 50%;
  animation: custom-games-chevron-close 360ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.home-tab-expand-icon svg {
  width: 14px;
  height: 6px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.home-tab-group.is-expanded .home-tab-expand-icon {
  animation-name: custom-games-chevron-open;
}

.custom-games-section-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-tab-subnav-wrap {
  min-height: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    grid-template-rows var(--motion-standard),
    opacity var(--motion-standard),
    transform var(--motion-standard);
}

.home-tab-group.is-expanded .home-tab-subnav-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.home-tab-subnav {
  min-height: 0;
  display: grid;
  gap: 2px;
  overflow: hidden;
  padding: 0 3px 0 11px;
}

.home-tab-group.is-expanded .home-tab-subnav {
  padding: 5px 3px 2px 11px;
}

.home-tab-group.is-expanded.is-opening .home-tab-subnav {
  animation: custom-games-subnav-open 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-games-section-button {
  position: relative;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 5px 6px 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  transition: color var(--motion-standard), transform var(--motion-standard), text-shadow var(--motion-standard);
}

.custom-games-section-button::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-strong);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity var(--motion-standard), transform var(--motion-standard);
}

.custom-games-section-button.is-active,
.custom-games-section-button:hover,
.custom-games-section-button:focus-visible {
  background: transparent;
  color: var(--accent-strong);
  outline: none;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.custom-games-section-button.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.custom-games-section-button:not(.is-active):hover {
  color: var(--text);
  text-shadow: 0 0 12px color-mix(in srgb, var(--text) 18%, transparent);
  transform: translateX(2px);
}

.custom-games-section-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

@keyframes custom-games-subnav-open {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes custom-games-chevron-open {
  0% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.08);
  }
  54% {
    transform: scaleY(-0.08);
  }
  100% {
    transform: scaleY(-1);
  }
}

@keyframes custom-games-chevron-close {
  0% {
    transform: scaleY(-1);
  }
  46% {
    transform: scaleY(-0.08);
  }
  54% {
    transform: scaleY(0.08);
  }
  100% {
    transform: scaleY(1);
  }
}

.hub-download-button {
  grid-area: auto;
  align-self: end;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 0 11px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--ui-menu-bg);
  color: var(--muted);
  text-align: left;
  box-shadow: var(--ui-card-shadow);
}

.hub-download-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-download-button strong,
.hub-download-button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-download-button strong {
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
}

.hub-download-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.hub-download-button.is-active,
.hub-download-button:not(:disabled):hover,
.hub-download-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.hub-room-dock {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 68%),
    var(--ui-menu-bg);
  box-shadow: var(--ui-card-shadow);
}

.hub-room-dock-head,
.hub-room-dock-footer,
.hub-room-dock-head > span,
.hub-room-dock-footer > div,
.hub-room-invite-drawer-head {
  display: flex;
  align-items: center;
}

.hub-room-dock-head,
.hub-room-dock-footer,
.hub-room-invite-drawer-head {
  justify-content: space-between;
  gap: 8px;
}

.hub-room-dock-head > span {
  min-width: 0;
  gap: 6px;
}

.hub-room-dock-head > span > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 80%, transparent);
}

.hub-room-dock-head small,
.hub-room-member small,
.hub-room-invite-row small,
.hub-room-invite-drawer-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.hub-room-dock-head > button {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.hub-room-dock-head > button strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
}

.hub-room-dock-head > button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.hub-room-dock-roster {
  display: grid;
  gap: 5px;
}

.hub-room-member {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 3px 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.hub-room-member > span:first-child,
.hub-room-invite-row > span:first-child {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--player-color, var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

.hub-room-member > span:first-child svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.hub-room-member > span:last-child,
.hub-room-invite-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hub-room-member strong,
.hub-room-invite-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 930;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-room-member.is-empty {
  border: 1px dashed color-mix(in srgb, var(--line-strong) 58%, transparent);
  background: transparent;
}

.hub-room-member.is-empty > span:first-child {
  background: color-mix(in srgb, var(--surface-3) 76%, transparent);
  color: var(--muted);
}

.hub-room-member.is-empty > span:first-child svg {
  width: 12px;
  height: 12px;
}

.hub-room-dock-footer {
  padding-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.hub-room-dock-footer > span strong {
  color: var(--text);
}

.hub-room-dock-footer > div {
  gap: 5px;
}

.hub-room-dock-footer button,
.hub-room-invite-row button,
.hub-room-quick-actions button {
  min-height: 29px;
  padding: 0 8px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
}

.hub-room-dock-footer .hub-room-add {
  width: 29px;
  padding: 0;
  background: var(--accent);
  color: #fff;
}

.hub-room-add svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.hub-room-invite-drawer {
  max-height: 248px;
  display: grid;
  gap: 7px;
  overflow: auto;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.hub-room-invite-drawer > p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.hub-room-invite-drawer-head strong {
  font-size: 11px;
}

.hub-room-invite-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.hub-room-invite-row > span:first-child {
  background: color-mix(in srgb, var(--accent) 74%, var(--accent-strong));
}

.hub-room-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-top: 2px;
}

.hub-main {
  min-width: 0;
  min-height: 0;
  grid-area: main;
  display: grid;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.hub-main .home-screen {
  max-width: none;
  padding: 0 0 32px;
}

.hub-footer {
  grid-area: footer;
  min-width: 0;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 48px;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), transparent 120%);
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.hub-footer-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-weight: 950;
}

.hub-footer-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  object-fit: contain;
  opacity: 0.8;
}

.hub-footer-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hub-footer-link {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  transition:
    background var(--motion-standard),
    border-color var(--motion-standard),
    color var(--motion-standard);
}

.hub-footer-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-footer-link:not(:disabled):hover,
.hub-footer-link:focus-visible,
.hub-shell[data-home-tab="credits"] .hub-footer-link[data-tab="credits"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.hub-footer-link:disabled {
  cursor: default;
  opacity: 0.52;
}

.hub-page {
  min-width: 0;
  min-height: 100%;
  height: auto;
  display: grid;
  gap: var(--ui-page-gap);
  align-content: start;
  padding-bottom: 18px;
  overflow: visible;
}

.hub-page-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-7);
  padding: 4px 0 2px;
}

.hub-page-head h2 {
  margin: 0;
  font-size: clamp(31px, 3.6vw, 52px);
  line-height: 0.95;
  letter-spacing: 0;
}

.credits-page {
  max-width: 920px;
  min-height: auto;
  gap: var(--space-7);
}

.credits-page-head {
  align-items: start;
}

.hub-status-pill {
  display: inline-grid;
  min-height: 32px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hub-empty-panel {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-5);
  padding: var(--space-10);
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  text-align: center;
}

.hub-empty-panel > svg {
  width: 46px;
  height: 46px;
  color: var(--accent-strong);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-empty-panel strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.hub-empty-panel p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.rooms-page .online-lobby,
.room-builder-main,
.room-join-card,
.store-card {
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 82%, transparent), transparent 120%),
    var(--surface-2);
}

.rooms-signed-out {
  display: grid;
  gap: var(--ui-section-gap);
  align-content: start;
}

.rooms-landing {
  display: grid;
  gap: var(--ui-section-gap);
  align-content: start;
}

.custom-games-shell {
  min-width: 0;
  display: grid;
  align-content: start;
}

.custom-games-mobile-nav {
  display: none;
}

.rooms-launchpad {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: var(--ui-column-gap);
  align-items: stretch;
}

.rooms-launchpad.is-locked-preview {
  filter: grayscale(0.22);
  opacity: 0.78;
}

.room-host-card,
.community-game-feature,
.community-coming-soon {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 72%),
    var(--surface-2);
}

.room-host-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: 13px 15px;
}

.room-host-card-icon,
.community-game-icon {
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
  color: var(--accent-strong);
}

.room-host-card-icon {
  width: 42px;
  height: 42px;
}

.room-host-card-icon svg,
.community-game-icon svg,
.community-coming-soon > svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-host-card strong,
.community-game-feature h3,
.community-coming-soon strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.12;
}

.room-host-card small,
.community-coming-soon small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

.room-host-card .primary {
  min-height: 38px;
  padding-inline: 16px;
  white-space: nowrap;
}

.community-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-column-gap);
}

.community-game-feature {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--ui-card-padding);
}

.community-game-feature .primary,
.community-game-feature .secondary {
  grid-column: 2;
  justify-self: start;
}

.community-game-icon {
  width: 46px;
  height: 46px;
}

.community-game-feature h3 {
  font-size: 18px;
}

.community-game-feature p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.42;
}

.community-coming-soon {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 15px 17px;
  border-style: dashed;
}

.community-coming-soon > svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--accent-strong);
}

.room-setup-modal {
  width: min(900px, calc(100vw - 32px));
  max-height: min(92vh, 850px);
  overflow: auto;
}

.room-setup-modal .room-builder-main.is-modal-content {
  padding: 0;
  border: 0;
  background: transparent;
}

.room-setup-modal .room-builder-actions {
  gap: var(--space-3);
}

.public-rooms {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: var(--ui-card-padding);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 64%),
    var(--surface-2);
}

.public-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.public-rooms-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.05;
}

.public-rooms-head small,
.public-rooms-empty small,
.public-room-identity small,
.public-room-roster small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}

.public-rooms-head small {
  margin-top: 4px;
}

.public-room-list {
  display: grid;
  gap: 7px;
}

.public-room-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: var(--space-5);
  align-items: center;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  transition: border-color var(--motion-fast), transform var(--motion-fast), background var(--motion-fast);
}

.public-room-row:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
  transform: translateY(-1px);
}

.public-room-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.public-room-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 78%, var(--accent-strong));
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.public-room-identity strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-room-identity small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-room-roster {
  min-width: 116px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 7px;
  align-items: center;
}

.public-room-roster > strong {
  color: var(--text);
  font-size: 13px;
}

.public-room-roster > small {
  grid-column: 2;
  font-size: 9.5px;
}

.public-room-avatars {
  grid-row: 1 / span 2;
  display: flex;
  padding-left: 7px;
}

.public-room-avatars i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--player-color, var(--accent));
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.public-room-avatars svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.public-room-row > .primary {
  min-height: 38px;
  padding-inline: 15px;
  font-size: 12px;
}

.public-rooms-empty {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--line-strong) 68%, transparent);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: left;
}

.public-rooms-empty > svg {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.public-rooms-empty strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.rooms-signin-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--ui-callout-bg);
  padding: 7px 12px;
}

@media (min-width: 760px) {
  .rooms-signin-panel {
    height: 54px;
    padding-block: 6px;
  }
}

.rooms-signin-panel strong,
.room-preview-invite-row b {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.12;
}

.rooms-signin-panel p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.24;
}

.rooms-signin-panel .online-card-icon {
  width: 34px;
  height: 34px;
}

.rooms-signin-panel .primary {
  min-height: 36px;
  padding-inline: 16px;
  font-size: 14px;
  line-height: 1;
}

.room-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: var(--ui-column-gap);
  align-items: start;
}

.room-builder-grid.is-locked-preview {
  filter: grayscale(0.22);
}

.room-builder-grid.is-locked-preview .room-builder-main,
.room-builder-grid.is-locked-preview .room-join-card {
  border-style: dashed;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 58%, transparent), transparent 120%),
    color-mix(in srgb, var(--surface-2) 72%, var(--bg));
  opacity: 0.78;
}

.room-builder-grid.is-locked-preview input,
.room-builder-grid.is-locked-preview textarea,
.room-builder-grid.is-locked-preview button {
  cursor: not-allowed;
}

.room-builder-main,
.room-join-card {
  min-width: 0;
  display: grid;
  gap: var(--space-6);
  padding: var(--ui-card-padding);
}

.room-side-stack {
  min-width: 0;
  display: grid;
  gap: var(--ui-section-gap);
}

.room-seat-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.room-seat-card strong,
.store-card strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
}

.room-seat-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.room-player-count {
  min-width: 168px;
}

.room-fill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.room-fill-option {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: left;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

.room-fill-option .play-mode-icon {
  width: 34px;
  height: 34px;
}

.room-fill-option strong,
.room-fill-option small {
  display: block;
  min-width: 0;
}

.room-fill-option strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
}

.room-fill-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}

.room-fill-option.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
}

.room-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(244px, 0.92fr);
  gap: var(--space-5);
  align-items: start;
}

.room-settings-grid > .setup-board-card.wide {
  grid-column: auto;
  margin-top: 0;
}

.room-builder-actions {
  display: flex;
  justify-content: flex-end;
}

.room-builder-actions .primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.room-builder-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-preview-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  padding: 10px;
}

.room-preview-invite-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.play-hub-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(340px, 1.14fr);
  gap: 14px;
  align-items: start;
}

.play-hub-card {
  min-height: 0;
}

.play-hub-card:nth-child(3) {
  grid-column: 1 / -1;
}

.play-hub-card.is-disabled {
  opacity: 0.78;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.store-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.store-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .app-shell.is-home {
    padding-bottom: 0;
  }

  .app-shell.is-admin {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .hub-shell {
    display: block;
    height: auto;
    max-height: none;
    min-height: 0;
    padding:
      0
      max(12px, env(safe-area-inset-right))
      max(68px, calc(env(safe-area-inset-bottom) + 61px))
      max(12px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .hub-room-dock {
    display: none;
  }

  .hub-left-rail {
    display: contents;
  }

  .home-tab-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    grid-template-columns: repeat(var(--home-tab-count, 5), minmax(0, 1fr));
    gap: 4px;
    padding:
      7px
      max(8px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), var(--surface) 100%),
      var(--surface);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.22);
  }

  .home-tab-nav-main {
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--home-tab-count, 5), minmax(0, 1fr));
    gap: 4px;
  }

  body.is-android-app .hub-shell.is-android-tab-swipe {
    touch-action: pan-y;
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-nav-main {
    position: relative;
    isolation: isolate;
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-nav-main::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: calc(var(--home-tab-item-share, 20%) - var(--home-tab-gap-adjustment, 3.2px));
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 9px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 46%, transparent), transparent 120%),
      color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateX(calc(var(--active-tab-index, 0) * (100% + 4px)));
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
  }

  .home-tab-button {
    min-height: 54px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    padding: 4px 3px;
    text-align: center;
    z-index: 1;
    transition:
      color 160ms ease,
      transform 160ms ease,
      border-color 160ms ease,
      background 160ms ease;
  }

  .home-tab-button svg {
    width: 22px;
    height: 22px;
    transition: transform 180ms ease;
  }

  .home-tab-button span {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.05;
  }

  .home-tab-button b {
    position: absolute;
    top: 7px;
    right: calc(50% - 16px);
  }

  .home-tab-keycap {
    display: none;
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-button.is-active {
    border-color: transparent;
    background: transparent;
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-button.is-active svg {
    transform: translateY(-2px) scale(1.08);
  }

  body.is-android-app .hub-shell.is-tab-transition-next .hub-main {
    animation: android-tab-page-next 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.is-android-app .hub-shell.is-tab-transition-prev .hub-main {
    animation: android-tab-page-prev 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .hub-main .home-screen {
    padding-bottom: 10px;
  }

  .hub-main {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 0;
  }

  .hub-footer {
    margin-top: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .hub-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .credits-page {
    gap: var(--space-5);
  }

  .credit-links {
    grid-template-columns: 1fr;
  }

  .hub-download-button {
    position: fixed;
    z-index: 46;
    inset:
      auto
      auto
      max(78px, calc(env(safe-area-inset-bottom) + 70px))
      max(12px, env(safe-area-inset-left));
    width: 48px;
    min-height: 48px;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    border-radius: 14px;
  }

  body.is-native-shell .hub-download-button {
    display: none;
  }

  .hub-shell[data-home-tab="custom-games"][data-custom-games-section="custom-boards"] .hub-download-button {
    display: none;
  }

  .hub-download-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hub-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .hub-page-head h2 {
    font-size: clamp(29px, 9vw, 41px);
  }

  .room-builder-grid,
  .play-hub-grid,
  .store-grid {
    grid-template-columns: 1fr;
  }

  .play-hub-card:nth-child(3) {
    grid-column: auto;
  }

  .room-settings-grid {
    grid-template-columns: 1fr;
  }

  .room-settings-grid > .setup-board-card.wide {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .public-rooms-head {
    align-items: stretch;
    flex-direction: column;
  }

  .public-rooms-head .secondary {
    width: 100%;
    justify-content: center;
  }

  .public-room-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .public-room-roster {
    justify-self: end;
  }

  .public-room-row > .primary {
    grid-column: 1 / -1;
    width: 100%;
  }

  .room-access-actions,
  .room-access-actions .secondary {
    width: 100%;
  }

  .room-access-actions .secondary {
    flex: 1 1 100%;
  }
}

.quick-play-page {
  grid-template-rows: auto minmax(0, 1fr);
}

.quick-play-head {
  align-items: start;
  padding-bottom: 0;
}

.quick-play-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 468px);
  gap: var(--ui-column-gap);
  align-items: start;
  align-content: start;
  overflow: visible;
}

.quick-play-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-top: 2px;
  overflow: visible;
}

.quick-play-intro-card {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding: 15px var(--space-7);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-strong) 12%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.quick-intro-kicker {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.quick-play-intro-card p {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 760;
  line-height: 1.38;
}

.quick-play-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  overflow: visible;
}

.quick-play-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: var(--ui-card-gap);
  padding: var(--space-4);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 13%, transparent), transparent 75%),
    color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--text);
  text-align: left;
  outline: 0;
  overflow: hidden;
}

.quick-play-card.is-primary,
.quick-play-card[data-home-nav-selected="true"],
.quick-play-card-panel[data-home-section-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 84%),
    color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
}

.quick-card-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.quick-play-card .play-mode-icon {
  width: 42px;
  height: 42px;
}

.quick-play-card strong,
.quick-play-card small {
  display: block;
  min-width: 0;
}

.quick-play-card strong {
  color: var(--text);
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 950;
  line-height: 1;
}

.quick-play-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 800;
  line-height: 1.22;
}

.quick-play-card-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.quick-play-card-panel:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.quick-play-mode-card {
  transition:
    border-color var(--motion-standard),
    background var(--motion-standard),
    box-shadow var(--motion-standard),
    transform var(--motion-standard);
}

.quick-play-mode-group {
  min-width: 0;
  display: grid;
  align-content: start;
  overflow: visible;
  isolation: isolate;
}

.quick-play-mode-group .quick-play-expand-card {
  position: relative;
  z-index: 2;
}

.quick-play-mode-meta {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.quick-play-mode-disclosure {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 9px;
  color: color-mix(in srgb, var(--accent-strong) 76%, var(--muted));
  transition:
    border-color var(--motion-standard),
    background var(--motion-standard),
    color var(--motion-standard),
    transform var(--motion-standard);
}

.quick-play-mode-disclosure svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-play-mode-group.is-expanded .quick-play-mode-disclosure {
  border-color: color-mix(in srgb, var(--accent-strong) 48%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  color: var(--accent-strong);
  transform: rotate(180deg);
}

.quick-play-mode-button:not(:disabled):hover:not([data-home-hover-muted="true"]),
.quick-play-mode-button:not(:disabled):focus-visible:not([data-home-focus-muted="true"]),
.quick-play-mode-button:not(:disabled)[data-home-nav-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-strong) 68%, var(--line-strong));
}

.quick-play-mode-button:not(:disabled):hover:not([data-home-hover-muted="true"]),
.quick-play-mode-button:not(:disabled):focus-visible:not([data-home-focus-muted="true"]) {
  transform: translateY(-1px);
}

.quick-play-mode-button:not(:disabled):focus-visible:not([data-home-focus-muted="true"]),
.quick-play-mode-button:not(:disabled)[data-home-nav-selected="true"] {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent-strong) 84%, #ffffff 16%),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

.quick-play-mode-pill {
  display: inline-grid;
  min-width: 48px;
  min-height: 30px;
  place-items: center;
  justify-self: end;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.quick-play-expanded-options {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: -8px 10px 0;
  padding: 18px 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, var(--line));
  border-top-color: color-mix(in srgb, var(--accent-strong) 22%, var(--line));
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent-strong) 54%, transparent),
    0 14px 28px rgba(0, 0, 0, 0.14);
  overflow: visible;
  animation: quickMatchmakingTrayIn 190ms ease-out both;
}

.quick-play-choice-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 8px 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
}

.quick-play-choice-head strong {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.quick-play-choice-head small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.quick-play-expand-card.is-expanded {
  border-color: color-mix(in srgb, var(--accent-strong) 48%, var(--line));
  border-radius: var(--radius-lg) var(--radius-lg) 10px 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 82%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.quick-play-mode-group.is-expanded .quick-play-expand-card:not(:disabled):hover:not([data-home-hover-muted="true"]),
.quick-play-mode-group.is-expanded .quick-play-expand-card:not(:disabled):focus-visible:not([data-home-focus-muted="true"]) {
  transform: none;
}

.quick-matchmaking-tray {
  min-width: 0;
  grid-column: 1 / -1;
  overflow: hidden;
  animation: quickMatchmakingTrayIn 190ms ease-out both;
}

.quick-play-mode-group > .quick-matchmaking-tray {
  margin: 8px 10px 0;
}

.quick-matchmaking-tray.is-stable {
  animation: none;
}

.quick-matchmaking-tray .matchmaking-status {
  width: 100%;
  padding: 12px;
  border-radius: 9px;
  box-shadow: none;
}

.quick-matchmaking-tray .matchmaking-status.is-quick-tray {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 82%),
    color-mix(in srgb, var(--surface) 86%, transparent);
}

.quick-matchmaking-tray .matchmaking-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--accent) 24%);
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--danger) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 14%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.quick-matchmaking-tray .matchmaking-status-actions .secondary {
  min-width: 150px;
  min-height: 42px;
  justify-content: center;
}

@keyframes quickMatchmakingTrayIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0 round 9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 9px);
  }
}

@keyframes android-tab-page-next {
  from {
    opacity: 0.72;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes android-tab-page-prev {
  from {
    opacity: 0.72;
    transform: translateX(-22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.quick-matchmaking-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.quick-matchmaking-list .play-mode-option.is-compact {
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
}

.quick-matchmaking-list .play-mode-icon {
  display: none;
}

.quick-matchmaking-list .play-mode-option.is-compact strong {
  font-size: clamp(13px, 1vw, 16px);
}

.quick-matchmaking-list .play-mode-option.is-compact small {
  display: none;
}

.quick-matchmaking-list .play-mode-option.is-compact > b {
  min-width: 34px;
  min-height: 28px;
  border-radius: 9px;
  font-size: 11px;
}

.quick-play-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
}

.quick-play-board .home-board-card {
  align-self: start;
  display: grid;
  grid-template-rows: auto auto;
  width: min(100%, 468px);
  justify-self: start;
  background: var(--board-water);
}

.quick-play-board .home-board-card-featured {
  background: var(--board-water);
}

.quick-play-board .home-board-visual-featured .home-board-preview {
  filter: none;
}

.quick-play-board .home-board-visual {
  height: auto;
  max-height: 450px;
  aspect-ratio: 0.96;
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--board-water);
}

.quick-play-board .home-board-visual::before,
.quick-play-board .home-board-visual::after {
  display: none;
}

.quick-play-board .home-board-preview {
  height: 100%;
  aspect-ratio: auto;
}

.quick-play-board .home-board-preview-action {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: default;
  isolation: isolate;
}

.quick-play-board .home-board-preview-action .home-board-preview {
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

.interactive-board-preview .home-board-preview-board {
  cursor: pointer;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.interactive-board-preview .home-board-preview-board * {
  cursor: pointer;
  pointer-events: none;
}

.interactive-board-preview .home-board-preview-hit-area,
.interactive-board-preview .home-board-preview-hit-area polygon,
.interactive-board-preview .home-board-preview-hit-area rect {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

.quick-play-board .home-board-preview-action:not(:disabled):hover,
.quick-play-board .home-board-preview-action:focus-visible {
  outline: none;
}

.interactive-board-preview:not(:disabled) .home-board-preview-hit-area:hover ~ .home-board-preview-board,
.interactive-board-preview:focus-visible .home-board-preview-board {
  transform: translateY(-4px) scale(1.018);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
}

.quick-play-board .home-board-preview-action:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 72%, transparent);
}

.quick-play-board .home-board-card figcaption {
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 16px 16px 10px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.quick-play-board .home-featured-summary {
  gap: 7px;
}

.quick-play-board .home-featured-summary > strong {
  font-size: clamp(17px, 1.5vw, 21px);
}

.quick-play-board .home-save-scoreboard {
  max-height: 34px;
  overflow: hidden;
}

.quick-latest-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.quick-latest-actions .primary,
.quick-latest-actions .secondary {
  width: 100%;
  min-height: 44px;
  padding-inline: 13px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 780;
}

.quick-latest-actions .primary:focus-visible:not([data-home-focus-muted="true"]),
.quick-latest-actions .secondary:focus-visible:not([data-home-focus-muted="true"]),
.quick-latest-actions .primary[data-home-nav-selected="true"],
.quick-latest-actions .secondary[data-home-nav-selected="true"] {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 68%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--accent-strong) 72%, var(--line-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.hub-main [data-home-focus-muted="true"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.hub-main[data-home-input="keyboard"] button:not(:disabled) {
  cursor: default;
}

.quick-latest-actions .primary[data-home-shortcut="resume"] {
  --resume-keycap-size: 26px;
  --resume-keycap-inset: 9px;
  position: relative;
  padding-inline: calc((var(--resume-keycap-size) + var(--resume-keycap-inset) * 2));
}

.quick-latest-actions .action-shortcut-keycap {
  flex: 0 0 auto;
  color: inherit;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  border-color: color-mix(in srgb, #ffffff 42%, transparent);
}

.quick-latest-actions .primary[data-home-shortcut="resume"] .action-shortcut-keycap {
  position: absolute;
  top: 50%;
  right: calc(var(--resume-keycap-inset) - 1px);
  width: var(--resume-keycap-size);
  height: var(--resume-keycap-size);
  transform: translateY(-50%);
}

.quick-latest-actions .secondary {
  justify-self: stretch;
}

@media (min-width: 901px) and (max-height: 820px) {
  .quick-play-board .home-board-visual {
    height: auto;
  }

  .quick-play-board .home-board-preview-action {
    height: 100%;
  }

  .quick-play-board .home-board-card figcaption {
    padding: 12px 14px 10px;
  }

  .quick-play-board .home-featured-summary {
    gap: 5px;
  }

  .quick-play-board .home-featured-summary > strong {
    font-size: 17px;
  }

  .quick-play-board .home-save-scoreboard {
    max-height: 30px;
  }

  .quick-latest-actions {
    gap: 7px;
  }

  .quick-latest-actions .primary,
  .quick-latest-actions .secondary {
    min-height: 38px;
    font-size: 12.5px;
    font-weight: 780;
  }

  .quick-latest-actions .primary[data-home-shortcut="resume"] {
    --resume-keycap-inset: 6px;
  }
}

.saved-games-page,
.downloads-page,
.leaderboard-page,
.store-page {
  grid-template-rows: auto minmax(0, 1fr);
}

.rooms-page {
  grid-template-rows: auto auto;
}

.saved-games-workbench,
.downloads-grid,
.saved-games-tab-list {
  min-width: 0;
  min-height: 0;
}

.saved-games-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-4);
  overflow: hidden;
}

.saved-games-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--ui-toolbar-gap);
  align-items: center;
  padding: var(--ui-toolbar-padding);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.saved-sort-menu {
  position: relative;
  z-index: 20;
  width: min(220px, 100%);
  justify-self: end;
}

.saved-sort-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 0 11px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-align: left;
}

.saved-sort-trigger > span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.saved-sort-trigger > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-sort-trigger svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
  transition: transform var(--motion-standard);
}

.saved-sort-menu.is-open .saved-sort-trigger {
  border-color: color-mix(in srgb, var(--accent-strong) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
}

.saved-sort-menu.is-open .saved-sort-trigger svg {
  transform: rotate(180deg);
}

.saved-sort-options {
  position: absolute;
  inset: calc(100% + 7px) 0 auto auto;
  z-index: 60;
  display: grid;
  gap: var(--space-1);
  min-width: 216px;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--ui-menu-bg);
  box-shadow: var(--ui-popover-shadow);
}

.saved-sort-options button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.saved-sort-options button:hover,
.saved-sort-options button:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
  color: var(--text);
}

.saved-sort-options button.is-active {
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
  color: var(--accent-strong);
}

.saved-sort-options button b {
  color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.saved-games-pager {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.saved-games-pager .icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.saved-games-tab-list {
  display: grid;
  grid-auto-rows: auto;
  align-content: start;
  gap: var(--space-4);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.saved-games-tab-list .saved-library-card {
  min-height: 224px;
  grid-template-columns: clamp(180px, 22vw, 230px) minmax(0, 1fr);
  align-items: stretch;
}

.saved-games-tab-list .saved-library-board {
  min-height: 0;
  align-self: stretch;
}

.saved-games-tab-list .saved-library-board .home-board-preview {
  min-height: 0;
}

.saved-games-tab-list .saved-library-details {
  gap: var(--space-2);
  align-content: start;
  padding: 12px 14px;
}

.saved-games-tab-list .saved-library-details h3 {
  font-size: clamp(19px, 2vw, 28px);
}

.saved-games-tab-list .saved-library-paused {
  font-size: 12px;
  line-height: 1.2;
}

.saved-games-tab-list .home-save-scoreboard {
  max-height: 33px;
  overflow: hidden;
}

.saved-games-tab-list .saved-library-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 146px));
  gap: var(--space-3);
}

.saved-games-tab-list .saved-library-actions .home-save-open,
.saved-games-tab-list .saved-library-actions .home-save-replay {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  overflow: hidden;
}

.downloads-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 58%, rgba(0, 0, 0, 0.44));
  -webkit-backdrop-filter: blur(8px) saturate(116%);
  backdrop-filter: blur(8px) saturate(116%);
  overscroll-behavior: contain;
}

.downloads-popover {
  width: min(620px, 100%);
  max-height: min(650px, calc(100vh - 36px));
  max-height: min(650px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-6);
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 80%, transparent), transparent 120%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow: var(--ui-modal-shadow);
}

.downloads-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.downloads-popover-head .eyebrow {
  margin-bottom: 6px;
  font-size: 11px;
}

.downloads-popover-head h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1;
}

.downloads-release {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 68%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.downloads-release span {
  color: var(--accent-strong);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

.downloads-release time {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.downloads-menu-list {
  min-height: 0;
  display: grid;
  gap: var(--space-4);
  overflow: auto;
  overscroll-behavior: contain;
}

.download-menu-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 54%, transparent);
}

.download-menu-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
  color: var(--accent-strong);
}

.download-menu-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-menu-row > div {
  min-width: 0;
}

.download-menu-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-menu-row p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.download-row-action {
  min-width: 94px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-7);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
}

.download-row-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-row-action.is-primary {
  border-color: color-mix(in srgb, var(--accent-strong) 52%, var(--accent));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  color: var(--accent-strong);
}

.download-row-action:not(:disabled):hover,
.download-row-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent-strong) 66%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

@media (max-width: 900px) {
  .downloads-popover {
    width: min(520px, 100%);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
  }
}

@media (max-width: 560px) {
  .downloads-popover-backdrop {
    padding: 12px;
  }

  .downloads-popover {
    width: 100%;
    max-height: min(620px, calc(100dvh - 24px));
    border-radius: var(--radius-xl);
  }

  .downloads-popover-head h2 {
    font-size: 34px;
  }

  .download-menu-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .download-menu-icon {
    width: 44px;
    height: 44px;
  }

  .download-menu-row strong {
    font-size: 18px;
  }

  .download-menu-row p {
    font-size: 13px;
  }

  .download-row-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.download-platform-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-7);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background: var(--ui-card-bg);
  box-shadow: var(--ui-card-shadow);
  overflow: hidden;
}

.download-platform-card > .play-mode-icon {
  width: 54px;
  height: 54px;
}

.download-platform-card > div {
  min-width: 0;
}

.download-platform-card strong {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}

.download-platform-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.download-platform-card .download-button,
.download-platform-card .secondary {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 900px) {
  .quick-play-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow: visible;
  }

  .quick-play-head {
    gap: 4px;
  }

  .quick-play-panel {
    gap: 8px;
    padding-top: 0;
    overflow: visible;
  }

  .quick-play-intro-card {
    padding: 11px 12px;
  }

  .quick-play-intro-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .quick-play-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-content: start;
    gap: 7px;
  }

  .quick-play-card {
    gap: 8px;
    padding: 9px;
  }

  .quick-card-info {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }

  .quick-play-card .play-mode-icon {
    width: 34px;
    height: 34px;
  }

  .quick-play-card strong {
    font-size: 15px;
  }

  .quick-play-card small {
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.16;
  }

  .quick-play-card-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
  }

  .quick-play-mode-pill {
    min-width: 40px;
    min-height: 26px;
    padding: 0 8px;
    font-size: 10px;
  }

  .quick-play-mode-meta {
    gap: 5px;
  }

  .quick-play-mode-disclosure {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .quick-play-choice-panel {
    margin: -6px 6px 0;
    padding: 15px 7px 8px;
    gap: 7px;
  }

  .quick-play-choice-head {
    padding: 0 2px 7px 4px;
  }

  .quick-play-choice-head strong {
    font-size: 11px;
  }

  .quick-play-choice-head small {
    font-size: 9.5px;
  }

  .quick-play-mode-group > .quick-matchmaking-tray {
    margin: 6px 6px 0;
  }

  .quick-matchmaking-tray {
    grid-column: 1 / -1;
  }

  .quick-matchmaking-list {
    gap: 6px;
  }

  .quick-matchmaking-list .play-mode-option.is-compact {
    min-height: 36px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px 6px;
  }

  .quick-matchmaking-list .play-mode-icon {
    display: none;
  }

  .quick-matchmaking-list .play-mode-option.is-compact strong {
    font-size: 11.5px;
  }

  .quick-matchmaking-list .play-mode-option.is-compact > b {
    min-width: 25px;
    min-height: 22px;
    font-size: 9px;
  }

  .quick-play-board .home-board-card {
    width: min(100%, 468px);
    max-height: none;
    grid-template-rows: auto auto;
    justify-self: center;
  }

  .quick-play-board .home-board-visual {
    height: auto;
  }

  .quick-play-board .home-board-preview {
    min-height: 0;
  }

  .quick-play-board .home-board-card figcaption {
    max-height: none;
    padding: 8px 10px;
  }

  .quick-play-board .home-featured-summary {
    gap: 5px;
  }

  .quick-play-board .home-featured-summary > strong {
    font-size: 15px;
  }

  .quick-play-board .home-save-scoreboard {
    display: none;
  }

  .quick-latest-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .quick-latest-actions .primary,
  .quick-latest-actions .secondary {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 11.5px;
    font-weight: 780;
  }

  .quick-latest-actions .primary[data-home-shortcut="resume"] {
    --resume-keycap-inset: 6px;
    padding-inline: calc((var(--resume-keycap-size) + var(--resume-keycap-inset) * 2));
  }

  @media (max-width: 520px) {
    .quick-play-choice-head small {
      display: none;
    }

    .quick-matchmaking-list .play-mode-option.is-compact {
      min-height: 34px;
      grid-template-columns: minmax(0, 1fr) auto;
      justify-items: stretch;
      gap: 4px;
      padding: 5px;
      text-align: left;
    }

    .quick-matchmaking-list .play-mode-option.is-compact strong {
      font-size: 9.8px;
      line-height: 1.02;
    }

    .quick-matchmaking-list .play-mode-option.is-compact > b {
      min-width: 22px;
      min-height: 20px;
      font-size: 8.5px;
    }

    .quick-play-mode-pill {
      display: none;
    }
  }

  .saved-games-page,
  .downloads-page,
  .leaderboard-page,
  .rooms-page,
  .store-page {
    gap: 8px;
  }

  .saved-games-toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .saved-library-tool-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .saved-library-tool-group::-webkit-scrollbar {
    display: none;
  }

  .saved-sort-menu {
    width: 100%;
    justify-self: stretch;
  }

  .saved-sort-options {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .saved-games-pager {
    justify-content: space-between;
  }

  .saved-games-tab-list {
    grid-auto-rows: auto;
    overflow: auto;
  }

  .saved-games-tab-list .saved-library-card {
    grid-template-columns: clamp(112px, 34vw, 150px) minmax(0, 1fr);
  }

  .saved-games-tab-list .saved-library-details {
    padding: 10px;
  }

  .downloads-grid {
    grid-template-columns: 1fr;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .download-platform-card {
    min-height: 156px;
  }
}

.home-screen {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 22px) 32px;
  flex: 1;
  display: grid;
  align-items: stretch;
  gap: 18px;
}

.home-hero {
  min-height: clamp(520px, 72vh, 680px);
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(430px, 1.14fr);
  gap: clamp(26px, 4vw, 50px);
  align-items: center;
  padding: 10px 0 6px;
}

.home-copy {
  max-width: 610px;
  display: grid;
  align-content: center;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-logo-lockup {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}

.home-logo-mark {
  width: clamp(96px, 9vw, 132px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(21, 33, 30, 0.16));
}

.home-logo-copy {
  min-width: 0;
}

.home-copy h2 {
  margin: 0;
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: 0.88;
  letter-spacing: 0;
}

.home-logo-copy p {
  margin: 10px 0 0;
  max-width: 15ch;
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 850;
  line-height: 1.05;
}

.home-lede {
  margin: 20px 0 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.home-saved-games {
  width: min(100%, 860px);
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-saved-games-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.home-saved-games-head .eyebrow {
  margin-bottom: 4px;
  font-size: 10px;
}

.home-saved-games-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

.home-saved-games-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.home-save-list {
  display: grid;
  gap: 10px;
}

.home-save-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 14px 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 94%, #020f0d);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-save-card::before {
  position: absolute;
  inset: 13px auto 13px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--accent-strong), color-mix(in srgb, var(--accent) 46%, transparent));
  content: "";
}

.home-save-card.is-finished {
  border-color: color-mix(in srgb, var(--accent-strong) 22%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 94%, #020f0d);
}

.home-save-main {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.home-save-main:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
  border-radius: 5px;
}

.home-save-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-save-state {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-save-date {
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-save-title {
  overflow: hidden;
  color: var(--text);
  font-size: 21px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-save-scoreboard {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-save-player-chip {
  overflow: hidden;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: 8px minmax(0, auto) max-content;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 6px;
  border: 1px solid color-mix(in srgb, var(--player-color, var(--accent)) 30%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--player-color, var(--accent)) 16%, transparent), transparent 70%),
    color-mix(in srgb, #000000 18%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.home-save-player-chip::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--player-color, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--player-color, var(--accent)) 34%, transparent);
  content: "";
}

.home-save-player-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-save-player-chip strong {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.home-save-activity {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.home-save-activity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-save-latest-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-strong) 76%, var(--muted));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-strong) 28%, transparent);
}

.home-save-times {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px;
}

.home-save-times > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-save-times strong {
  color: color-mix(in srgb, var(--accent-strong) 76%, var(--muted));
  font-size: 8.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.home-save-times time {
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-save-actions {
  display: grid;
  grid-template-columns: auto auto 46px;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.home-save-open {
  min-width: 108px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 17px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #05221e), var(--accent));
  border-color: color-mix(in srgb, var(--accent-strong) 48%, var(--accent));
  color: #ffffff;
  font-size: 15px;
  white-space: nowrap;
}

.home-save-replay {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 80%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.home-save-replay svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-save-replay:not(:disabled):hover,
.home-save-replay:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 20%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  transform: translateY(-1px);
}

.home-save-delete {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #ff5757 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #1e0909 42%, var(--surface));
  color: #ff6969;
}

.home-save-delete svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-save-delete:not(:disabled):hover,
.home-save-delete:focus-visible {
  border-color: color-mix(in srgb, #ff7777 74%, var(--line));
  color: #ff9292;
  transform: translateY(-1px);
}

.home-save-more {
  min-height: 34px;
  justify-self: center;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.saved-library-screen {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px clamp(12px, 2vw, 22px) 36px;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
}

.saved-library-hero,
.saved-library-tools,
.saved-library-card,
.saved-library-empty {
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--ui-card-shadow);
}

.saved-library-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
}

.saved-library-back {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
}

.saved-library-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-library-hero h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 0.98;
}

.saved-library-hero p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.saved-library-hero > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.saved-library-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

.saved-library-tool-group {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.saved-tool-chip {
  min-height: 34px;
  padding: 0 11px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  font-size: 11px;
  font-weight: 900;
}

.saved-tool-chip.is-active {
  border-color: color-mix(in srgb, var(--accent-strong) 66%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--accent-strong);
}

.saved-library-list {
  display: grid;
  gap: var(--space-5);
}

.saved-library-card {
  overflow: hidden;
  min-height: clamp(242px, 28vh, 320px);
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
}

.saved-library-card.is-archived {
  opacity: 0.82;
}

.saved-library-board {
  position: relative;
  min-width: 0;
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 0;
  background: var(--board-water);
  color: #ffffff;
  cursor: default;
  isolation: isolate;
  overflow: hidden;
}

.saved-library-board .home-board-preview {
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: auto;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

.saved-library-board:not(:disabled):hover,
.saved-library-board:focus-visible {
  outline: none;
}

.saved-library-board:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-strong) 72%, transparent);
}

.saved-library-details {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: 14px 16px 12px;
}

.saved-library-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.saved-library-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.saved-library-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
}

.saved-library-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-library-icon.is-active {
  border-color: color-mix(in srgb, var(--accent-strong) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
  color: var(--accent-strong);
}

.saved-library-icon[data-action="toggle-save-favorite"].is-active {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: var(--surface);
}

.saved-library-icon[data-action="toggle-save-favorite"].is-active svg {
  fill: currentColor;
}

.saved-library-delete {
  border-color: color-mix(in srgb, #ff5757 48%, var(--line));
  background: color-mix(in srgb, #1e0909 42%, var(--surface));
  color: #ff6969;
}

.saved-library-delete:not(:disabled):hover,
.saved-library-delete:focus-visible {
  border-color: color-mix(in srgb, #ff7777 74%, var(--line));
  color: #ff9292;
}

.saved-library-details h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.02;
}

.saved-library-paused {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.saved-library-times {
  grid-template-columns: repeat(2, minmax(0, max-content));
}

.saved-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.saved-library-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-9);
  text-align: center;
}

.saved-library-empty strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.saved-library-empty span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.primary.hero-start {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  min-width: 0;
  width: auto;
  min-height: 62px;
  padding: 0 34px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, rgba(255, 255, 255, 0.32));
  border-radius: 16px;
  background:
    linear-gradient(
      142deg,
      color-mix(in srgb, var(--accent) 82%, rgba(255, 255, 255, 0.2)),
      color-mix(in srgb, var(--accent) 74%, #05221e)
    );
  color: #ffffff;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -18px 36px rgba(2, 17, 15, 0.18);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.hero-start::before,
.hero-start::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.hero-start::before {
  z-index: 0;
  background:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      color-mix(in srgb, var(--accent-strong) 76%, rgba(255, 255, 255, 0.8)) 0%,
      color-mix(in srgb, var(--accent-strong) 48%, transparent) 18%,
      transparent 52%
    ),
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--accent) 54%, transparent),
      color-mix(in srgb, var(--accent-strong) 28%, transparent) 42%,
      color-mix(in srgb, var(--accent) 52%, transparent)
    );
  opacity: 0.18;
  transform: scale(1.18);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.hero-start::after {
  z-index: 1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 36%, transparent 58%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 24% 76%, rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), transparent 48%);
  mix-blend-mode: screen;
  opacity: 0.52;
}

.hero-start span {
  position: relative;
  z-index: 2;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.22);
}

.hero-start:not(:disabled):hover,
.hero-start:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--accent-strong) 72%, rgba(255, 255, 255, 0.58));
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in srgb, var(--accent-strong) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -18px 38px rgba(2, 17, 15, 0.16);
  transform: translateY(-1px);
}

.hero-start:not(:disabled):hover::before,
.hero-start:not(:disabled):focus-visible::before {
  opacity: 0.8;
  transform: scale(1);
}

.home-board-card {
  position: relative;
  margin: 0;
  min-width: 0;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--board-water);
  box-shadow:
    0 18px 44px rgba(26, 44, 39, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.56) inset;
  overflow: hidden;
}

.home-board-visual {
  position: relative;
  background: var(--board-water);
}

.home-board-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.2) 82%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.home-board-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
    rgba(0, 0, 0, 0.03);
  pointer-events: none;
}

.home-board-preview {
  display: block;
  width: 100%;
  aspect-ratio: 1.2;
  background: var(--board-water);
}

.home-board-preview .edge-hit,
.home-board-preview .vertex-hit {
  display: none;
}

.home-board-preview .vertex-target {
  pointer-events: none;
}

.home-board-card figcaption {
  padding: 10px 14px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.home-board-card-featured {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 10%, transparent), transparent 64%),
    var(--board-water);
}

.home-board-visual-featured {
  isolation: isolate;
}

.home-board-visual-featured .home-board-preview {
  filter: saturate(0.94) brightness(0.82);
}

.home-featured-resume {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  min-height: 56px;
  min-width: 166px;
  padding: 0 28px;
  border-radius: 14px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    0 0 28px color-mix(in srgb, var(--accent-strong) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.home-featured-summary {
  display: grid;
  gap: 7px;
}

.home-featured-summary > strong {
  color: var(--text);
  font-size: 19px;
  line-height: 1.05;
}

.home-featured-paused {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.home-featured-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
}

.home-info,
.home-download,
.home-options,
.home-footer {
  margin-top: 0;
}

.home-section-head {
  max-width: 620px;
}

.home-section-head h2,
.home-options h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-info-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-info-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 74%, transparent), transparent 84%),
    var(--surface);
  box-shadow: 0 10px 24px rgba(15, 26, 22, 0.06);
}

.home-info,
.home-download,
.home-options,
.home-footer,
.home-info-card {
  contain: layout paint style;
}

@supports (content-visibility: auto) {
  .home-info,
  .home-download,
  .home-options,
  .home-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 220px;
  }

  .home-download {
    contain-intrinsic-size: auto 170px;
  }

  .home-footer {
    contain-intrinsic-size: auto 160px;
  }
}

.home-info-card strong {
  display: block;
  font-size: 15px;
}

.home-info-card p,
.home-download p,
.home-options p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.home-download {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow:
    0 12px 26px rgba(15, 26, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-download-copy {
  max-width: 650px;
}

.home-download-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-download-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.download-button,
.download-secondary {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.download-button {
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 58%, #ffffff 16%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #ffffff 8%), color-mix(in srgb, var(--accent) 70%, #061d1a));
  color: #ffffff;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.download-secondary {
  width: 54px;
  padding: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
  color: var(--accent-strong);
}

.download-button svg,
.download-secondary svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-button strong,
.download-button small {
  display: block;
  line-height: 1.05;
}

.download-button strong {
  color: currentColor;
  font-size: 14px;
  font-weight: 950;
}

.download-button small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
}

.download-secondary span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.download-button:hover,
.download-button:focus-visible,
.download-secondary:hover,
.download-secondary:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.download-button:hover,
.download-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-strong) 78%, #ffffff 18%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    0 0 18px color-mix(in srgb, var(--accent-strong) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.download-secondary:hover,
.download-secondary:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.home-download-actions > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.release-stamp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.release-stamp span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.release-stamp time {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  text-align: right;
}

.home-secondary-grid {
  width: min(100%, 980px);
  margin: 0 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  align-items: start;
}

.home-secondary-grid.is-single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.home-secondary-grid > .home-online,
.home-secondary-grid > .home-download {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.home-secondary-grid .online-card,
.home-secondary-grid .home-download {
  height: auto;
}

.home-secondary-grid .online-card {
  grid-template-columns: 1fr;
  align-content: start;
  border-radius: 8px;
}

.home-secondary-grid .home-download {
  align-content: start;
}

.home-secondary-grid .home-download-copy {
  max-width: none;
}

.home-secondary-grid .home-download-actions {
  min-width: 0;
}

.account-button {
  position: relative;
  overflow: visible;
}

.account-button-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.nav-button .account-button-avatar,
.nav-button .account-button-avatar .avatar-initial {
  font-size: 14px;
  font-weight: 950;
}

.account-button-avatar img,
.account-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.avatar-initial {
  position: relative;
  z-index: 0;
  line-height: 1;
}

.account-button.is-signed-in::after {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--accent-strong);
  content: "";
}

.home-online {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.online-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: var(--space-8);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow);
  padding: var(--space-8);
}

.online-card-copy,
.online-lobby-head,
.online-player-chip,
.account-identity,
.account-actions,
.online-actions-grid {
  display: flex;
  align-items: center;
}

.online-card-copy {
  gap: var(--space-6);
  min-width: 0;
}

.online-card-icon,
.account-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-2xl);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.online-card-icon {
  width: 54px;
  height: 54px;
}

.online-card-icon svg,
.google-button svg,
.icon-text svg,
.inline-icon-button svg {
  width: 22px;
  height: 22px;
}

.icon-text svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.online-card h3,
.online-card p {
  margin: 0;
}

.online-card h3 {
  font-size: 24px;
  line-height: 1.05;
}

.online-card p,
.account-note,
.online-config-notice p {
  color: var(--muted);
  line-height: 1.45;
}

.online-status,
.online-error {
  display: block;
  margin-top: 8px;
  font-weight: 800;
}

.online-status {
  color: var(--accent-strong);
}

.online-error {
  color: var(--danger);
}

.online-config-notice {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  padding: var(--space-6);
}

.online-config-notice code {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  padding: 1px 5px;
  font-size: 0.92em;
}

.online-actions-grid {
  justify-content: end;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.online-actions-stack {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.online-private-room {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: end;
}

.online-join-form {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.online-join-form label,
.auth-form label,
.account-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.online-join-form input,
.auth-form input,
.account-form input {
  min-height: var(--control-icon-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 750;
}

.auth-form input {
  border-color: var(--accent);
}

.auth-form input:focus {
  border-color: var(--accent-strong);
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  box-shadow: var(--focus-ring-strong);
}

.online-join-form input {
  text-transform: uppercase;
}

.online-lobby {
  display: grid;
  gap: var(--space-5);
}

.online-lobby-head {
  justify-content: space-between;
  gap: var(--space-5);
}

.online-lobby-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.online-lobby-head strong {
  font-size: 28px;
  letter-spacing: 0.12em;
}

.online-player-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.online-player-chip {
  gap: var(--space-3);
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 850;
}

.online-player-chip > span:first-child {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--player-color, var(--accent));
  color: #fff;
}

.online-player-chip-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-player-chip-text > strong,
.online-player-chip-text > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-player-chip-text > strong {
  display: block;
}

.online-player-chip-text > small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.online-player-report,
.chat-report-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--muted);
}

.online-player-report {
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
}

.online-player-report svg,
.chat-report-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.online-player-report:not(:disabled):hover,
.online-player-report:focus-visible,
.chat-report-button:not(:disabled):hover,
.chat-report-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.online-player-chip.is-empty {
  justify-content: center;
  border-style: dashed;
  color: var(--muted);
}

.online-lobby-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.online-lobby-actions.is-tight {
  margin-top: -2px;
}

.room-access-panel {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 15%, var(--surface-2));
}

.room-access-state {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.room-access-state.is-public {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--accent-strong);
}

.room-access-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.room-access-actions .secondary {
  min-height: 38px;
  font-size: 12px;
}

.online-invites,
.online-lobby-section,
.friend-manager {
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  padding: var(--space-5);
}

.online-invites {
  margin-top: var(--space-5);
}

.online-invites > strong,
.friend-list > strong,
.online-lobby-section-head > strong,
.online-lobby-section-head strong {
  font-size: 14px;
  line-height: 1.1;
}

.online-lobby-section-head,
.friend-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.online-lobby-section-head small,
.online-pending-label,
.friend-manager-head p,
.friend-empty,
.friend-row small,
.online-invite-row small,
.online-request-row small,
.online-friend-invite small,
.spectator-link-copy {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.online-pending-label {
  color: var(--accent-strong);
}

.online-invite-row,
.online-request-row,
.friend-row,
.online-friend-invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
}

.online-invite-row,
.online-request-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.friend-row,
.online-friend-invite {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.online-invite-row span,
.online-request-row span,
.friend-row span,
.online-friend-invite span {
  min-width: 0;
}

.online-invite-row b,
.online-request-row b,
.friend-row strong,
.online-friend-invite strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-friend-invites,
.friend-list {
  display: grid;
  gap: var(--space-3);
}

.friend-manager h3,
.friend-manager p {
  margin: 0;
}

.friend-presence-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.friend-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.friend-summary-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  padding: var(--space-3);
}

.friend-summary-grid b {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.friend-summary-grid small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.friend-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.friend-quick-actions .secondary {
  min-height: 36px;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
}

.friend-quick-actions .secondary svg {
  width: 16px;
  height: 16px;
}

.friend-menu-status {
  display: grid;
  gap: var(--space-1);
}

.friend-menu-status p {
  margin: 0;
}

.friend-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.friend-add-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.friend-add-form input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 750;
}

.friend-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 950;
}

.friend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.friend-icon-action {
  min-width: 42px;
  width: 42px;
  padding-inline: 0;
}

.friend-icon-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blocked-players {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.blocked-players-toggle {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  text-align: left;
}

.blocked-players-toggle span {
  display: grid;
  gap: 2px;
}

.blocked-players-toggle strong {
  color: var(--text);
}

.blocked-players-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.blocked-players-toggle .collapse-arrow {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform 0.16s ease;
}

.blocked-players-toggle .collapse-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blocked-players.is-open .collapse-arrow {
  transform: rotate(180deg);
}

.blocked-players-list {
  display: grid;
  gap: 8px;
}

.online-settings-card {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--surface) 74%, var(--surface-2));
}

.spectator-link-panel {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.spectator-link-panel.is-enabled {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
}

.spectator-link-copy {
  margin: 0;
  line-height: 1.4;
}

.spectator-screen,
.admin-screen {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 22px 0 34px;
}

.spectator-hero,
.admin-hero,
.admin-state-panel,
.admin-report-panel,
.spectator-board-card,
.spectator-info-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.spectator-hero,
.admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 18px;
  padding: 18px;
}

.spectator-hero > div:first-child,
.admin-hero > div:first-child {
  min-width: 0;
}

.spectator-hero h2,
.admin-hero h2,
.spectator-hero p,
.admin-hero p,
.spectator-info-card p {
  margin: 0;
}

.spectator-hero h2,
.admin-hero h2 {
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.spectator-hero p,
.admin-hero p,
.spectator-info-card p {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.admin-dashboard,
.admin-state-panel {
  margin-top: 14px;
}

.admin-dashboard {
  display: grid;
  gap: 14px;
}

.admin-hero-actions,
.admin-state-actions,
.admin-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-hero-actions,
.admin-section-head {
  justify-content: flex-end;
}

.admin-state-panel {
  display: grid;
  gap: 12px;
  max-width: 720px;
  border-radius: 14px;
  padding: 18px;
}

.admin-state-panel strong {
  font-size: 22px;
  line-height: 1.1;
}

.admin-state-panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.42;
}

.admin-state-panel code {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 1px 5px;
  color: var(--text);
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-stat-grid span {
  display: grid;
  gap: 4px;
  min-height: 84px;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 26, 22, 0.07);
}

.admin-stat-grid strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-stat-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.admin-report-panel {
  display: grid;
  gap: 12px;
  border-radius: 14px;
  padding: 14px;
}

.admin-account-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px;
}

.admin-account-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-account-search label,
.admin-profile-form label,
.admin-note-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-account-search input,
.admin-profile-form input,
.admin-note-form textarea {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 750;
}

.admin-note-form textarea {
  min-height: 86px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.35;
}

.admin-account-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
}

.admin-account-results,
.admin-account-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 10px;
}

.admin-account-results {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
}

.admin-account-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border-radius: 10px;
  background: var(--surface);
  padding: 8px 10px;
  text-align: left;
}

.admin-account-result.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.admin-account-result span {
  min-width: 0;
}

.admin-account-result strong,
.admin-account-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-result strong {
  color: var(--text);
  font-size: 14px;
}

.admin-account-result small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.admin-account-result b {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 3px 8px;
  font-size: 11px;
  text-transform: uppercase;
}

.admin-account-result b.is-banned {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

.admin-account-detail {
  display: grid;
  gap: 12px;
}

.admin-empty-detail {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.admin-empty-detail svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.admin-empty-detail strong {
  color: var(--text);
  font-size: 18px;
}

.admin-empty-detail p {
  max-width: 36ch;
  margin: 0;
  font-weight: 760;
  line-height: 1.4;
}

.admin-account-detail-head,
.admin-account-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-account-detail-head h4 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.admin-account-detail-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-detail-grid span {
  display: grid;
  gap: 3px;
  min-height: 66px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px;
}

.admin-detail-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-detail-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-account-actions {
  justify-content: flex-start;
}

.admin-profile-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.admin-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.admin-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-matchmaking-panel {
  grid-column: 1 / -1;
}

.admin-matchmaking-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.admin-matchmaking-stats span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}

.admin-matchmaking-stats b {
  color: var(--text);
  line-height: 1;
}

.admin-matchmaking-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-history-list {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.admin-history-list > strong {
  font-size: 13px;
}

.admin-history-list article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px;
}

.admin-history-list p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-history-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.admin-section-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.admin-section-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
}

.admin-section-head .eyebrow {
  margin-bottom: 4px;
}

.admin-report-panel .moderator-panel {
  padding-top: 0;
  border-top: 0;
}

.app-shell.is-admin .topbar {
  margin-bottom: 0;
}

.admin-screen {
  width: min(1240px, calc(100vw - 32px));
  padding: clamp(18px, 3vw, 34px) 0 56px;
}

.admin-hero {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 clamp(18px, 3vw, 28px);
}

.admin-hero h2 {
  max-width: 760px;
  font-size: clamp(31px, 4.5vw, 58px);
  letter-spacing: 0;
}

.admin-hero p:not(.eyebrow) {
  max-width: 58ch;
  margin-top: 12px;
  font-size: clamp(15px, 1.6vw, 18px);
}

.admin-dashboard {
  margin-top: 0;
  gap: clamp(28px, 4vw, 44px);
}

.admin-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.admin-status-strip span {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 16px clamp(12px, 2vw, 22px);
  border-right: 1px solid var(--line);
}

.admin-status-strip span:last-child {
  border-right: 0;
}

.admin-status-strip small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-status-strip strong {
  overflow: hidden;
  color: var(--text);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-section,
.admin-account-panel,
.admin-report-panel {
  display: grid;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.admin-section-head {
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.admin-section-head > div {
  max-width: 680px;
}

.admin-section-head h3 {
  font-size: clamp(25px, 3.2vw, 40px);
}

.admin-section-head p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.45;
}

.admin-account-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  max-width: 940px;
}

.admin-search-actions,
.admin-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-account-layout {
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.admin-account-results,
.admin-account-detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.admin-account-results {
  gap: 0;
  max-height: none;
  overflow: visible;
  border-top: 1px solid var(--line);
}

.admin-account-result {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 12px 8px 12px 12px;
}

.admin-account-result:not(:disabled):hover,
.admin-account-result:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}

.admin-account-result.is-selected {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.admin-account-result b {
  border-radius: 6px;
}

.admin-account-detail {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-empty-detail {
  min-height: 320px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
}

.admin-account-detail-head {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.admin-account-detail-head h4 {
  font-size: clamp(26px, 3vw, 36px);
}

.admin-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.admin-detail-grid span {
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 12px 10px;
}

.admin-detail-grid span:nth-child(2n) {
  border-right: 0;
}

.admin-detail-grid strong {
  font-size: 15px;
}

.admin-account-actions,
.admin-profile-form,
.admin-note-form,
.admin-history-grid {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-profile-form,
.admin-note-form {
  gap: 10px;
}

.admin-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
}

.admin-matchmaking-panel {
  grid-column: 1 / -1;
}

.admin-matchmaking-stats span {
  border-radius: 0;
  background: transparent;
}

.admin-history-list {
  gap: 0;
  border-top: 1px solid var(--line);
}

.admin-history-list > strong {
  padding: 0 0 10px;
  font-size: 14px;
}

.admin-history-list article,
.admin-history-item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
}

.admin-report-panel .moderator-panel {
  gap: 14px;
}

.admin-report-panel .moderator-panel-tools {
  align-items: flex-start;
}

.admin-report-panel .moderator-report-list {
  gap: 0;
  border-top: 1px solid var(--line);
}

.admin-report-panel .moderator-report-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
}

.admin-report-panel .moderator-report-actions {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.spectator-actions,
.spectator-board-head,
.spectator-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spectator-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.spectator-live-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.spectator-live-pill.is-live {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.spectator-message {
  margin: 12px 0 0;
}

.spectator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.spectator-board-card,
.spectator-info-card {
  border-radius: 16px;
}

.spectator-board-card {
  overflow: hidden;
}

.spectator-board-head {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.spectator-board-head strong,
.spectator-info-card > strong,
.spectator-section-head strong {
  display: block;
  font-size: 16px;
  line-height: 1.1;
}

.spectator-board-head small,
.spectator-board-head > span,
.spectator-section-head small,
.spectator-player-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.spectator-board-frame {
  min-height: 560px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%),
    var(--surface-2);
  padding: 12px;
}

.spectator-board-frame .home-board-preview {
  width: min(100%, 820px);
  height: min(64vh, 720px);
  min-height: 440px;
}

.spectator-empty-board {
  display: grid;
  gap: 8px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.spectator-empty-board svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.spectator-empty-board strong {
  color: var(--text);
  font-size: 20px;
}

.spectator-side,
.spectator-player-list {
  display: grid;
  gap: 12px;
}

.spectator-info-card {
  padding: 14px;
}

.spectator-player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 10px;
}

.spectator-player-row.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface-2));
}

.spectator-player-row .player-avatar {
  grid-row: span 2;
}

.spectator-player-main,
.spectator-player-row > div {
  min-width: 0;
}

.spectator-player-main strong,
.spectator-player-row > div > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spectator-stat-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.spectator-stat-strip span,
.spectator-mini-stat {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.spectator-stat-strip b {
  font-size: 17px;
  line-height: 1;
}

.spectator-stat-strip small,
.spectator-mini-stat {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spectator-mini-stat {
  min-height: 34px;
  padding: 0 10px;
}

.online-setup-modal {
  width: min(620px, calc(100vw - var(--setup-modal-left-gap) - var(--setup-modal-right-gap)));
}

.account-modal {
  width: min(520px, calc(100vw - var(--setup-modal-left-gap) - var(--setup-modal-right-gap)));
  max-height: calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  max-height: calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.account-loading-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, #020807 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: wait;
  overscroll-behavior: contain;
}

.account-loading-popup {
  position: relative;
  display: grid;
  width: min(430px, 100%);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 48%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
    var(--surface);
  color: var(--text);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
}

.account-loading-popup::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
  content: "";
  animation: account-loading-sweep 1.6s ease-in-out infinite;
}

.account-loading-mark {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface-2));
  color: var(--accent-strong);
}

.account-loading-mark svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.account-loading-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.account-loading-copy .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
}

.account-loading-copy strong {
  font-size: 18px;
  line-height: 1.15;
}

.account-loading-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.account-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  align-self: end;
  padding-bottom: 5px;
}

.account-loading-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-strong);
  animation: account-loading-dot 1.2s ease-in-out infinite;
}

.account-loading-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.account-loading-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes account-loading-sweep {
  0%, 100% { opacity: 0.25; transform: translateX(-45%); }
  50% { opacity: 1; transform: translateX(45%); }
}

@keyframes account-loading-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 520px) {
  .account-loading-popup {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .account-loading-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-loading-popup::after,
  .account-loading-dots i {
    animation: none;
  }
}

.report-modal,
.moderation-notice-modal {
  width: min(560px, calc(100vw - var(--setup-modal-left-gap) - var(--setup-modal-right-gap)));
  max-height: calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  max-height: calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.moderation-notice-modal > p,
.moderation-notice-modal > small {
  display: block;
  margin: 0;
  padding: 0 16px;
  color: var(--muted);
  font-weight: 780;
  line-height: 1.4;
}

.moderation-notice-modal > p {
  color: var(--text);
  font-size: 15px;
}

.moderation-notice-modal > small {
  margin-top: 8px;
  font-size: 12px;
}

.moderation-notice-modal.is-success {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.moderation-notice-modal.is-warning {
  border-color: color-mix(in srgb, var(--accent-2) 38%, var(--line));
}

.report-form {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7);
}

.report-form fieldset {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.report-form legend,
.report-details > span,
.report-context strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--space-3);
}

.report-reason-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-height: 74px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: pointer;
}

.report-reason-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.report-reason-option input {
  margin: 4px 0 0;
  accent-color: var(--accent);
}

.report-reason-option strong,
.report-reason-option small {
  display: block;
  line-height: 1.25;
}

.report-reason-option strong {
  color: var(--text);
  font-size: 13px;
}

.report-reason-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.report-context {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.report-context p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-details {
  display: grid;
  gap: var(--space-3);
}

.report-details span small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.report-details textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  padding: var(--space-4) var(--space-5);
  font: inherit;
  font-weight: 750;
  line-height: 1.35;
}

.friends-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(392px, calc(100vw - 24px));
  max-height: min(690px, calc(100vh - 82px));
  max-height: min(690px, calc(100dvh - 82px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: var(--ui-popover-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  transform-origin: top right;
  animation: friends-popover-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.friends-popover.is-closing {
  pointer-events: none;
  animation: friends-popover-out 130ms ease-in both;
}

@keyframes friends-popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes friends-popover-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
  }
}

.friends-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 28px;
  width: 13px;
  height: 13px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: inherit;
  transform: rotate(45deg);
}

.friends-popover-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.friends-popover-head h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.friends-popover-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}

.friends-popover .online-config-notice {
  margin: 0;
}

.friends-popover .friend-manager {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.friends-popover .friend-manager-head {
  align-items: center;
  flex-direction: row;
}

.friends-popover .friend-add-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.friends-popover .friend-list {
  gap: var(--space-2);
}

.friends-popover .friend-list > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.friends-popover .friend-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.friends-popover .friend-row .friend-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-width: 0;
  flex-wrap: wrap;
}

.friends-popover .friend-actions .secondary {
  min-height: 32px;
  padding: 0 9px;
  font-size: 12px;
}

.friends-popover .friend-icon-action {
  width: 34px;
  min-width: 34px;
}

.friends-popover .friend-icon-action svg {
  width: 16px;
  height: 16px;
}

.friends-popover button:focus-visible,
.friends-popover a:focus-visible,
.friends-popover input:focus-visible,
.friends-popover select:focus-visible,
.friends-popover textarea:focus-visible,
.friends-popover [data-friends-nav-selected="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--focus-ring-strong);
}

.friends-popover .primary[data-friends-nav-selected="true"],
.friends-popover .primary:focus-visible {
  outline-color: color-mix(in srgb, var(--accent) 72%, white);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent),
    0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .friends-popover,
  .friends-popover.is-closing {
    animation: none;
  }
}

.leaderboard-modal {
  width: min(980px, calc(100vw - var(--setup-modal-left-gap) - var(--setup-modal-right-gap)));
  max-height: calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  max-height: calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.leaderboard-page .hub-page-head {
  align-items: end;
}

.leaderboard-refresh-button {
  align-self: end;
  margin-bottom: 2px;
  min-height: 38px;
}

.leaderboard-body {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
  padding: 0;
  overflow: hidden;
}

.leaderboard-top-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.leaderboard-self-card,
.leaderboard-toolbar,
.leaderboard-row,
.leaderboard-empty {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.leaderboard-self-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 10px 12px;
}

.leaderboard-self-card.is-signed-out {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
}

.leaderboard-self-card:not(.is-signed-out) {
  min-height: 86px;
}

.leaderboard-self-card p,
.leaderboard-self-card small,
.leaderboard-player small,
.leaderboard-pager,
.vp-distribution small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.leaderboard-self-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.leaderboard-self-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.leaderboard-self-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.leaderboard-self-head strong,
.leaderboard-player strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-rank-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.leaderboard-self-stats,
.leaderboard-row-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.leaderboard-self-stats span,
.leaderboard-row-stats span {
  display: grid;
  gap: 2px;
  min-height: 42px;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 5px;
}

.leaderboard-self-stats b,
.leaderboard-row-stats b {
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}

.leaderboard-self-stats small,
.leaderboard-row-stats small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vp-distribution {
  display: grid;
  gap: 5px;
}

.vp-distribution > strong {
  font-size: 11px;
  line-height: 1.1;
}

.vp-distribution > div {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 4px;
  min-height: 44px;
  align-items: end;
}

.vp-distribution span {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.vp-distribution i {
  width: 100%;
  height: var(--vp-height);
  min-height: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 999px 999px 4px 4px;
  background: color-mix(in srgb, var(--accent) 55%, var(--surface));
}

.leaderboard-toolbar {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.leaderboard-sort-block {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.leaderboard-sort-block > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leaderboard-sort {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.leaderboard-sort button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 950;
}

.leaderboard-sort button.is-selected,
.leaderboard-sort button:not(:disabled):hover,
.leaderboard-sort button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}

.leaderboard-pager {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  white-space: nowrap;
}

.leaderboard-pager .icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.leaderboard-message-row {
  min-width: 0;
  min-height: 0;
}

.leaderboard-message-row .online-error {
  margin: 0;
}

.leaderboard-list-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.leaderboard-list {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 0.85fr) minmax(260px, 1.15fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.leaderboard-row.is-self {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface-2));
}

.leaderboard-rank {
  min-width: 42px;
  color: var(--accent-strong);
  font-size: 18px;
  font-weight: 950;
  text-align: right;
}

.leaderboard-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.leaderboard-player {
  min-width: 0;
}

.leaderboard-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.leaderboard-row-actions .secondary svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.leaderboard-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.leaderboard-empty svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
}

.leaderboard-empty strong {
  color: var(--text);
  font-size: 20px;
}

.leaderboard-empty p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-weight: 780;
  line-height: 1.35;
}

.friends-signed-out {
  display: grid;
  gap: 12px;
  padding: 4px;
}

.friends-signed-out p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.4;
}

.friends-popover .friends-signed-out {
  padding: 4px;
}

.friends-popover .friends-signed-out .primary {
  width: 100%;
  justify-content: center;
}

.auth-shell,
.account-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.auth-mode-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.google-button,
.icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-button {
  min-height: 48px;
  border-color: var(--line-strong);
}

.google-mark-blue {
  fill: #4285f4;
}

.google-mark-green {
  fill: #34a853;
}

.google-mark-yellow {
  fill: #fbbc05;
}

.google-mark-red {
  fill: #ea4335;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-form,
.account-form {
  display: grid;
  gap: 12px;
}

.account-identity {
  gap: 12px;
}

.account-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  font-size: 28px;
  font-weight: 950;
}

.account-identity strong {
  display: block;
  font-size: 22px;
}

.account-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 750;
}

.inline-icon-button {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 86%, var(--accent-soft));
  color: color-mix(in srgb, var(--text) 82%, var(--accent-strong));
}

.inline-icon-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-icon-button:not(:disabled):hover,
.inline-icon-button:focus-visible {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-strong) 62%, var(--line-strong));
  color: var(--accent-strong);
}

.inline-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-stats span {
  display: grid;
  gap: 2px;
  min-height: 78px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.account-stats strong {
  font-size: 30px;
  line-height: 1;
}

.account-stats small {
  color: var(--muted);
  font-weight: 850;
}

.account-save-sync {
  margin: -2px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-soft) 12%, var(--surface-2));
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.account-save-sync.is-warning {
  border-color: color-mix(in srgb, #ffb347 42%, var(--line));
  color: color-mix(in srgb, #ffcc8a 82%, var(--muted));
}

.account-moderation-status,
.moderator-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.account-moderation-status.is-banned {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
}

.account-moderation-status strong,
.moderator-tools-head strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.15;
}

.account-moderation-status p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.moderator-tools-head,
.moderator-panel-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.moderator-tools-head > div,
.moderator-panel-tools .segmented {
  min-width: 0;
}

.moderator-panel {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.moderator-report-list {
  display: grid;
  gap: 8px;
}

.moderator-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.moderator-report-main {
  min-width: 0;
}

.moderator-report-main strong,
.moderator-report-main small,
.moderator-report-main p {
  display: block;
}

.moderator-report-main strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.moderator-report-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
}

.moderator-report-main p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.moderator-report-actions {
  display: grid;
  gap: 6px;
  min-width: 138px;
}

.moderator-report-actions button {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
}

.account-username-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.account-username-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-username-head > div {
  min-width: 0;
}

.account-username-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.account-field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-username-head strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-username-head button {
  flex: 0 0 auto;
}

.account-public-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-public-id-row .account-field-hint {
  margin: 0;
}

.username-edit-form {
  gap: 8px;
}

.account-field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.account-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-form-actions button {
  flex: 1 1 150px;
}

.profile-prompt-note {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-2));
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.account-actions {
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.home-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-options > div {
  max-width: 680px;
}

.home-options .primary {
  flex: 0 0 auto;
}

.home-footer {
  margin-top: 26px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
  box-shadow: 0 14px 34px rgba(15, 26, 22, 0.08);
}

.footer-brand {
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-logo-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(21, 33, 30, 0.12));
}

.footer-brand strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.footer-brand p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.footer-links {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.credit-links p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.credit-links {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.credit-links section {
  min-width: 0;
}

.footer-links h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links a,
.footer-links button {
  min-height: 0;
  width: fit-content;
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--accent-strong);
  transform: none;
}

.footer-bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.setup-backdrop {
  --setup-modal-top-gap: max(18px, env(safe-area-inset-top));
  --setup-modal-right-gap: max(18px, env(safe-area-inset-right));
  --setup-modal-bottom-gap: max(18px, env(safe-area-inset-bottom));
  --setup-modal-left-gap: max(18px, env(safe-area-inset-left));
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--setup-modal-top-gap) var(--setup-modal-right-gap) var(--setup-modal-bottom-gap) var(--setup-modal-left-gap);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

[data-modal-backdrop="settings"] {
  z-index: 100;
}

.is-native-shell .setup-backdrop {
  --setup-modal-top-gap: max(42px, calc(env(safe-area-inset-top) + 14px));
  --setup-modal-bottom-gap: max(14px, calc(env(safe-area-inset-bottom) + 12px));
  place-items: start center;
}

.setup-modal {
  width: min(760px, 100%);
  max-height: min(780px, calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap)));
  max-height: min(780px, calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

.play-mode-modal {
  width: min(640px, 100%);
}

.setup-head,
.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

.setup-head {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}

.setup-head h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.play-mode-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.play-mode-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 82%, transparent), transparent 120%),
    var(--surface-2);
}

.play-mode-section-head {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.play-mode-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

.play-mode-section-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.matchmaking-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.play-mode-section > .matchmaking-panel {
  padding: 0;
}

.matchmaking-mode-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.play-mode-option {
  width: 100%;
  min-width: 0;
  min-height: 82px;
  padding: 11px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 15%, transparent), transparent 78%),
    var(--surface);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.matchmaking-option {
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.matchmaking-option > b {
  display: inline-grid;
  min-width: 34px;
  min-height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.matchmaking-option.is-searching {
  border-color: color-mix(in srgb, var(--accent-strong) 80%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 80%),
    var(--surface);
}

.matchmaking-option.is-compact {
  min-height: 66px;
  padding: 9px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
}

.matchmaking-option.is-compact .play-mode-icon {
  width: 38px;
  height: 38px;
}

.matchmaking-option.is-compact .play-mode-icon svg {
  width: 21px;
  height: 21px;
}

.matchmaking-option.is-compact strong {
  font-size: 15px;
}

.matchmaking-option.is-compact small {
  margin-top: 3px;
  font-size: 11px;
}

.matchmaking-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 20%, var(--surface));
  padding: 10px;
  min-width: 0;
}

.matchmaking-status-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.matchmaking-status-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.matchmaking-status-orb {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 12%, transparent);
}

.matchmaking-status.is-error .matchmaking-status-orb {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent);
}

.matchmaking-status-chip {
  display: inline-grid;
  min-height: 22px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.matchmaking-status-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.matchmaking-status.is-cooldown {
  border-color: color-mix(in srgb, var(--warning, #d59d2b) 45%, var(--line));
  background: color-mix(in srgb, #d59d2b 10%, var(--surface));
}

.matchmaking-status strong,
.matchmaking-status small {
  display: block;
  min-width: 0;
}

.matchmaking-status strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}

.matchmaking-status small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.play-mode-option.is-primary {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 86%),
    color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
}

.play-mode-option:not(:disabled):hover:not([data-play-menu-hover-muted="true"]),
.play-mode-option:not(:disabled):focus-visible:not([data-play-menu-focus-muted="true"]),
.play-mode-option:not(:disabled)[data-home-nav-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-strong) 70%, var(--line-strong));
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent-strong) 18%, transparent), transparent 45%),
    color-mix(in srgb, var(--accent-soft) 44%, var(--surface));
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent);
  transform: translateY(-1px);
}

.play-mode-option:not(:disabled)[data-home-nav-selected="true"] {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 62%, transparent);
  outline-offset: 2px;
}

.play-mode-option:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.play-mode-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  color: var(--accent-strong);
}

.play-mode-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-mode-option strong,
.play-mode-option small {
  display: block;
  min-width: 0;
}

.play-mode-option strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
}

.play-mode-option small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

/* New-game chooser: one clear path, compact online choices, and visible keyboard affordances. */
.play-mode-modal {
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap)));
  max-height: min(760px, calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap)));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-modal);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--surface-3) 72%, transparent), transparent 48%),
    var(--surface);
  box-shadow: var(--ui-modal-shadow);
}

.play-mode-head {
  padding: 22px 24px 18px;
  border-bottom-color: color-mix(in srgb, var(--line) 82%, transparent);
}

.play-mode-heading {
  display: grid;
  gap: 5px;
}

.play-mode-head .play-mode-heading h2 {
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.play-mode-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.play-mode-head .icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-xl);
}

.play-mode-head .icon-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  box-shadow: var(--focus-ring-strong);
}

.play-mode-modal [data-play-menu-focus-muted="true"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.play-mode-modal[data-play-menu-input="keyboard"] button:not(:disabled) {
  cursor: default;
}

.play-mode-body {
  min-height: 0;
  padding: 18px 20px 20px;
  display: grid;
  gap: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.play-mode-body .play-mode-option {
  box-shadow: none;
}

.play-mode-featured,
.play-mode-host-option {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.play-mode-featured {
  min-height: 106px;
  padding: 16px 18px;
  gap: 15px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--line));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent-strong) 17%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)), var(--surface));
}

.play-mode-featured .play-mode-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--accent-soft) 86%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.play-mode-featured .play-mode-icon svg {
  width: 29px;
  height: 29px;
}

.play-mode-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.play-mode-featured strong {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.play-mode-featured small {
  max-width: 52ch;
  font-size: 13px;
}

.play-mode-action-hint {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.play-mode-action-hint svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-mode-online {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.play-mode-online-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0;
  padding: 0 2px;
}

.play-mode-online-head > span {
  display: grid;
  gap: 4px;
}

.play-mode-online-head h3 {
  font-size: 17px;
  line-height: 1.1;
}

.play-mode-online-head .play-mode-platform-note {
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  font-size: 10px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.play-mode-matchmaking-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.play-mode-matchmaking-list .matchmaking-option {
  min-height: 132px;
  padding: 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 11px 10px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 48%, var(--surface));
}

.play-mode-matchmaking-list .matchmaking-option .play-mode-icon {
  width: 42px;
  height: 42px;
  grid-row: 1;
  border-radius: var(--radius-lg);
}

.play-mode-matchmaking-list .matchmaking-option > span:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.play-mode-matchmaking-list .matchmaking-option > b {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.play-mode-matchmaking-list .matchmaking-option strong {
  font-size: 16px;
}

.play-mode-matchmaking-list .matchmaking-option small {
  font-size: 11px;
  line-height: 1.4;
}

.play-mode-host-option {
  min-height: 78px;
  padding: 12px 14px;
  gap: 12px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-2) 34%, var(--surface));
}

.play-mode-host-option .play-mode-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
}

.play-mode-help {
  min-height: 48px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface-2) 46%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.play-mode-help > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.play-mode-help kbd {
  min-width: 24px;
  min-height: 22px;
  padding: 3px 6px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong) 82%, transparent);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
}

.play-mode-modal .play-mode-option:not(:disabled)[data-play-menu-selected="true"] {
  border-color: var(--accent-strong);
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 76%, transparent);
  outline-offset: 3px;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--accent-strong) 16%, transparent), transparent 46%),
    color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 10%, transparent);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .play-mode-modal .play-mode-option {
    transition: none;
  }
}

@media (max-width: 760px) {
  .play-mode-head {
    padding: 18px 18px 15px;
  }

  .play-mode-body {
    padding: 14px;
    gap: 12px;
  }

  .play-mode-matchmaking-list {
    grid-template-columns: 1fr;
  }

  .play-mode-matchmaking-list .matchmaking-option {
    min-height: 80px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
  }

  .play-mode-matchmaking-list .matchmaking-option .play-mode-icon,
  .play-mode-matchmaking-list .matchmaking-option > span:nth-child(2),
  .play-mode-matchmaking-list .matchmaking-option > b {
    grid-row: 1;
  }

  .play-mode-matchmaking-list .matchmaking-option > span:nth-child(2) {
    grid-column: 2;
  }

  .play-mode-matchmaking-list .matchmaking-option > b {
    grid-column: 3;
  }
}

@media (max-width: 520px) {
  .play-mode-head .play-mode-heading h2 {
    font-size: 24px;
  }

  .play-mode-heading p,
  .play-mode-platform-note,
  .play-mode-action-hint {
    display: none;
  }

  .play-mode-featured,
  .play-mode-host-option {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .play-mode-featured {
    min-height: 90px;
    padding: 13px;
  }

  .play-mode-featured .play-mode-icon {
    width: 46px;
    height: 46px;
  }

  .play-mode-featured strong {
    font-size: 19px;
  }

  .play-mode-online-head {
    grid-template-columns: 1fr;
  }

  .play-mode-help {
    padding: 9px 12px;
    gap: 7px 12px;
  }

  .play-mode-help > span:last-child {
    display: none;
  }
}

.setup-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-5);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-7);
}

.setup-grid-compact {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
}

.setup-card {
  min-width: 0;
  padding: var(--ui-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.setup-card.wide {
  grid-column: 1 / -1;
}

.setup-card-compact {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.setup-card-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.setup-card .setup-card-head h3 {
  margin: 0;
}

.setup-card .setup-card-head small {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-board-card {
  gap: 0;
}

.setup-card-head + .setup-option-row {
  border-top: 0;
  padding-top: 0;
}

.settings-modal {
  width: min(980px, 100%);
  max-height: min(860px, calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap)));
}

.settings-modal > .setup-actions {
  justify-content: flex-end;
}

.remove-ads-modal {
  width: min(620px, 100%);
}

.remove-ads-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.remove-ads-intro,
.remove-ads-notice {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.remove-ads-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.remove-ads-option {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 76%),
    var(--surface-3);
}

.remove-ads-option span {
  display: block;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.remove-ads-option strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.remove-ads-option p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.32;
}

.remove-ads-option button {
  width: 100%;
}

.remove-ads-notice {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  color: color-mix(in srgb, var(--text) 74%, var(--accent));
}

@media (max-width: 620px) {
  .remove-ads-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.settings-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.settings-tabbar button {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-tabbar button.is-active,
.settings-tabbar button:not(:disabled):hover,
.settings-tabbar button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.settings-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  align-items: start;
  gap: var(--space-5);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-7);
}

.settings-grid.is-site-settings {
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.settings-grid.is-site-settings .keybind-card {
  padding: var(--space-5) var(--space-6);
}

.site-settings-content {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.settings-section {
  min-width: 0;
  scroll-margin-top: 18px;
}

.appearance-settings-section,
.audio-settings-section,
.keybind-settings-section {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 21%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-3) 86%, var(--surface));
}

.settings-section-heading {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}

.settings-section-heading > div {
  min-width: 0;
}

.settings-section-heading h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.settings-section-heading > small {
  max-width: 280px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  text-align: right;
}

.settings-section-reset {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 11px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
  font-size: 11px;
  white-space: nowrap;
}

.settings-section-reset:not(:disabled):hover,
.settings-section-reset:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.settings-section-rail {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 4px 0;
}

.settings-section-rail button {
  position: relative;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 6px 7px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  transition: color var(--motion-standard), transform var(--motion-standard), text-shadow var(--motion-standard);
}

.settings-section-rail button::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-strong);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity var(--motion-standard), transform var(--motion-standard);
}

.settings-section-rail button.is-active,
.settings-section-rail button:hover,
.settings-section-rail button:focus-visible {
  background: transparent;
  color: var(--accent-strong);
  outline: none;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.settings-section-rail button.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.settings-section-rail button:not(.is-active):hover {
  transform: translateX(2px);
}

.settings-rail-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.settings-rail-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.appearance-preference-list {
  display: grid;
  padding: 0 18px;
}

.appearance-preference-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.appearance-preference-row:first-child {
  border-top: 0;
}

.appearance-preference-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.appearance-preference-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.appearance-preference-copy small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.35;
}

.appearance-segmented {
  justify-self: end;
  min-width: 250px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 54%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.appearance-segmented button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
}

.appearance-segmented button.is-active {
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, var(--line));
}

.appearance-segmented button:not(:disabled):not(.is-active):hover {
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  color: color-mix(in srgb, var(--accent-strong) 86%, var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.appearance-segmented button.is-active:hover {
  background: color-mix(in srgb, var(--accent-soft) 90%, var(--surface));
  color: var(--accent-strong);
}

.appearance-segmented button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), inset 0 0 0 1px color-mix(in srgb, var(--accent) 54%, var(--line));
}

@media (max-width: 760px) {
  .settings-grid.is-site-settings {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .settings-section-rail {
    z-index: 10;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px 0 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    background: var(--surface);
    box-shadow: 0 -12px 0 var(--surface);
  }

  .settings-section-rail button {
    grid-template-columns: 22px minmax(0, auto);
    justify-content: center;
  }

  .settings-section-rail button::before {
    inset: auto 12px 0;
    width: auto;
    height: 3px;
    transform: scaleX(0.35);
  }

  .settings-section-rail button.is-active::before {
    transform: scaleX(1);
  }

  .settings-section-rail button:not(.is-active):hover {
    transform: translateY(-1px);
  }

  .settings-rail-icon {
    width: 22px;
    height: 22px;
    background: transparent;
  }

  .settings-rail-icon svg {
    width: 15px;
    height: 15px;
  }

  .appearance-preference-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .appearance-segmented {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

.compact-action {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.keybind-sections {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.keybind-settings-section .keybind-card {
  padding: 16px 18px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.keybind-settings-section .keybind-sections {
  margin-top: 0;
}

.keybind-section {
  display: grid;
  gap: 8px;
}

.keybind-section-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.keybind-section-head strong {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.keybind-section-head small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
}

.keybind-list {
  display: grid;
  gap: 6px;
}

.keybind-row {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.keybind-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.keybind-label svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.keybind-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keybind-slots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.keybind-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.keybind-clear-action,
.keybind-restore-action,
.keybind-restore-spacer {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.keybind-clear-action,
.keybind-restore-action {
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.keybind-clear-action svg,
.keybind-restore-action svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.keybind-restore-action svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}

.keybind-clear-action:not(:disabled):hover,
.keybind-clear-action:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
  outline: none;
}

.keybind-clear-action:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.keybind-restore-action {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: color-mix(in srgb, var(--accent-strong) 82%, var(--text));
}

.keybind-restore-action:hover,
.keybind-restore-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  color: var(--accent-strong);
  opacity: 1;
  outline: none;
}

.keybind-slot-wrap {
  position: relative;
  display: inline-grid;
  width: 86px;
  height: 34px;
}

.keybind-capture {
  width: 86px;
  min-width: 86px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.keybind-capture.is-empty {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  opacity: 0.62;
}

.keybind-capture.is-empty:hover,
.keybind-capture.is-empty:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--accent-strong);
  opacity: 1;
}

.keybind-capture kbd {
  display: inline-grid;
  place-items: center;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.keybind-capture.is-capturing {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface));
  color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.keybind-capture-hint {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  text-transform: uppercase;
}

.keybind-clear-slot {
  position: absolute;
  z-index: 4;
  top: -5px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--danger) 44%, var(--line));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: color-mix(in srgb, var(--danger) 88%, var(--text));
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.keybind-clear-slot {
  right: -5px;
}

.keybind-clear-slot svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.keybind-clear-slot:hover,
.keybind-clear-slot:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
  color: var(--danger);
  outline: none;
}

.keybind-reset-confirm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
}

.keybind-reset-confirm strong,
.keybind-reset-confirm small {
  display: block;
  min-width: 0;
}

.keybind-reset-confirm strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.keybind-reset-confirm small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.keybind-reset-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setup-card.is-disabled {
  opacity: 0.72;
}

.setup-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.setup-card small,
.setup-note,
.setting-block small {
  display: block;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.setting-block {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.setting-block + .setting-block {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.audio-mixer {
  display: grid;
  padding: 0 18px;
}

.audio-channel-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(150px, 0.72fr) minmax(260px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.audio-channel-row.setting-block + .audio-channel-row.setting-block {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.audio-channel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  color: var(--accent-strong);
}

.audio-channel-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-channel-icon circle {
  fill: currentColor;
  stroke: none;
}

.audio-channel-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.audio-channel-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.audio-channel-copy small {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.3;
}

.audio-channel-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "slider readout";
  align-items: center;
  gap: 12px;
}

.volume-control {
  grid-area: slider;
  min-width: 0;
  display: block;
}

.volume-readout {
  grid-area: readout;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: 38px 30px;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.volume-readout strong {
  justify-self: end;
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.volume-mute-button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--accent-strong);
}

.volume-mute-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.volume-mute-button.is-muted {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--line));
  color: color-mix(in srgb, var(--muted) 78%, var(--text));
}

.volume-mute-button:not(:disabled):hover,
.volume-mute-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-strong) 62%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
  color: var(--accent-strong);
  outline: none;
  box-shadow: var(--focus-ring);
}

.volume-mute-button.is-muted:not(:disabled):hover,
.volume-mute-button.is-muted:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

.volume-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

@media (max-width: 760px) {
  .audio-channel-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px 12px;
  }

  .audio-channel-icon {
    width: 38px;
    height: 38px;
  }

  .audio-channel-controls {
    grid-column: 2;
  }
}

@media (max-width: 460px) {
  .settings-section-heading {
    align-items: start;
  }

  .settings-section-heading > small {
    display: none;
  }

  .settings-section-rail button {
    grid-template-columns: 1fr;
  }

  .settings-section-rail button > span:last-child {
    display: none;
  }

  .settings-rail-icon {
    margin: 0 auto;
  }

  .audio-channel-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
}

.setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setup-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.game-menu-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.game-menu-actions button {
  min-height: var(--control-icon-lg);
}

.setup-option-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.setup-option-row:first-of-type,
.setup-option-row.is-single {
  border-top: 0;
  padding-top: 0;
}

.setup-option-row.is-single {
  padding-bottom: 0;
}

.setup-option-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.setup-option-row.is-disabled {
  opacity: 0.64;
}

.setup-option-controls {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.setup-option-controls.is-harbor {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.harbor-count {
  margin-top: 12px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
}

.segmented-compact {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 5px;
}

.clock-mode-control {
  grid-template-columns: minmax(52px, 0.78fr) minmax(52px, 0.72fr) minmax(96px, 1.24fr);
  align-items: stretch;
}

.clock-mode-control button {
  min-width: 0;
  padding-inline: 6px;
  overflow: hidden;
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-mode-control + small {
  margin-top: 8px;
}

.segmented button,
.stepper button {
  min-height: 36px;
  padding: 0 10px;
  background: var(--surface);
}

.segmented-compact button,
.stepper-compact button {
  min-height: 32px;
  padding: 0 8px;
}

.segmented button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.stepper {
  display: inline-grid;
  grid-template-columns: 38px minmax(38px, auto) 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.stepper-compact {
  grid-template-columns: 34px minmax(32px, auto) 34px;
  border-radius: 7px;
}

.stepper button {
  border: 0;
  border-radius: 0;
}

.stepper button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stepper strong {
  min-width: 36px;
  text-align: center;
  font-size: 15px;
}

.stepper-compact strong {
  min-width: 30px;
  font-size: 14px;
}

.setup-actions {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.icon-button {
  width: var(--control-icon-lg);
  padding: 0;
  display: grid;
  place-items: center;
}

.icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.game-layout {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.game-layout.is-board-width-custom {
  grid-template-columns: minmax(360px, var(--board-column-width)) minmax(320px, 1fr);
}

.mobile-bank-strip,
.mobile-players-card {
  contain: layout paint style;
  display: none;
}

.board-panel {
  min-width: 0;
  contain: layout paint style;
  background: var(--board-water);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.board-stage {
  --board-floating-inset: 14px;
  --board-action-hud-height: 140px;
  --board-control-size: 38px;
  --board-control-gap: 7px;
  --board-control-stack-height: calc((var(--board-control-size) * 2) + var(--board-control-gap));
  --dice-size: 34px;
  --dice-space: 6px;
  --dice-collapsed-width: calc((var(--dice-size) * 2) + (var(--dice-space) * 3));
  --dice-prompt-width: 232px;
  position: relative;
  contain: layout paint style;
  height: var(--board-height, calc(100vh - 96px));
  min-height: 430px;
  background: var(--board-water);
}

.board-stage.is-replay .board-turn-controls {
  opacity: 0.58;
  pointer-events: none;
}

.board-stage.is-replay .turn-clock {
  display: none;
}

.turn-clock {
  position: absolute;
  left: 50%;
  bottom: calc(var(--board-action-hud-height, 140px) + 10px);
  z-index: 7;
  width: min(250px, calc(100% - 168px));
  min-width: 152px;
  padding: 8px 10px 9px;
  pointer-events: none;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.22)),
    color-mix(in srgb, var(--surface-2) 88%, var(--board-water) 12%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  contain: layout paint style;
}

.turn-clock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.turn-clock-head strong {
  color: var(--text);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
}

.turn-clock-track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.turn-clock-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--clock-progress, 1));
  transform-origin: left center;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--turn-color, var(--accent)) 72%, #ffffff 28%), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--turn-color, var(--accent)) 42%, transparent);
  transition: transform 220ms linear, background-color 180ms ease, box-shadow 180ms ease;
}

.turn-clock.is-bank {
  border-color: color-mix(in srgb, #f4c95d 48%, var(--line));
}

.turn-clock.is-bank .turn-clock-fill {
  background: linear-gradient(90deg, #ffe59a, #f4c95d);
  box-shadow: 0 0 12px rgba(244, 201, 93, 0.38);
}

.turn-clock.is-expired {
  border-color: color-mix(in srgb, #ff6b6b 58%, var(--line));
}

.turn-clock.is-expired .turn-clock-fill {
  background: linear-gradient(90deg, #ff9b9b, #ff5f5f);
  box-shadow: 0 0 14px rgba(255, 95, 95, 0.46);
}

.board-stage.is-replay .board-hud-button:not(.native-panel-action),
.board-stage.is-replay .board-piece-stock-row {
  pointer-events: none;
}

.board-svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: var(--board-water);
  cursor: grab;
  touch-action: pan-x pan-y;
  user-select: none;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.board-stage.is-view-moving .hex-robber-target,
.board-stage.is-view-moving .edge-road-choice,
.board-stage.is-view-moving .edge-road-choice-aura,
.board-stage.is-view-moving .vertex-target.is-valid .vertex-node,
.board-stage.is-view-moving .piece-city-upgrade-ring {
  animation-play-state: paused;
}

.board-svg:active {
  cursor: grabbing;
}

.board-world {
  transform-box: fill-box;
  transform-origin: 0 0;
}

.edge-hit,
.vertex-hit,
.piece-hit {
  vector-effect: non-scaling-stroke;
}

body.is-firefox-like .app-shell.is-native-game .board-svg {
  touch-action: none;
}

.board-stage.is-locked .board-svg,
.board-stage.is-locked .board-svg:active {
  cursor: default;
}

.board-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(3, var(--board-control-size));
  grid-template-rows: repeat(2, var(--board-control-size));
  gap: var(--board-control-gap);
  justify-items: center;
  align-items: center;
  z-index: 24;
  pointer-events: none;
}

.board-control {
  position: relative;
  width: var(--board-control-size);
  min-height: var(--board-control-size);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(10, 22, 18, 0.13);
  pointer-events: auto;
}

.board-control:disabled {
  opacity: 0.5;
}

.board-lock-toggle {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  width: var(--board-control-size);
  min-height: var(--board-control-size);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(10, 22, 18, 0.16);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.board-info-control {
  grid-column: 2;
  grid-row: 2;
}

.board-lock-toggle.is-locked {
  background: var(--control-strong-bg);
  border-color: var(--line-strong);
  color: var(--control-strong-text);
}

.board-lock-toggle.is-unlocked {
  color: var(--accent-strong);
}

.board-control[data-tooltip]::after,
.board-lock-toggle[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  z-index: 90;
  width: max-content;
  max-width: 150px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 44%, rgba(0, 0, 0, 0.2)),
    color-mix(in srgb, var(--surface) 90%, #07110f 10%);
  color: var(--text);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(5px, -50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms;
}

.board-control[data-tooltip]::before,
.board-lock-toggle[data-tooltip]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  z-index: 91;
  width: 8px;
  height: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-right: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, #07110f 10%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(5px, -50%) rotate(45deg);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms;
}

.board-control[data-tooltip]:hover::after,
.board-control[data-tooltip]:focus-visible::after,
.board-control[data-tooltip]:hover::before,
.board-control[data-tooltip]:focus-visible::before,
.board-lock-toggle[data-tooltip]:hover::after,
.board-lock-toggle[data-tooltip]:focus-visible::after,
.board-lock-toggle[data-tooltip]:hover::before,
.board-lock-toggle[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 420ms, 420ms, 420ms;
}

.board-control[data-tooltip]:hover::after,
.board-control[data-tooltip]:focus-visible::after,
.board-lock-toggle[data-tooltip]:hover::after,
.board-lock-toggle[data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

.board-control[data-tooltip]:hover::before,
.board-control[data-tooltip]:focus-visible::before,
.board-lock-toggle[data-tooltip]:hover::before,
.board-lock-toggle[data-tooltip]:focus-visible::before {
  transform: translate(0, -50%) rotate(45deg);
}

.board-hint-area {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9;
  width: min(600px, calc(100% - 164px));
  display: grid;
  justify-items: start;
  pointer-events: none;
}

.board-hint-area.is-trading {
  width: min(720px, calc(100% - 164px));
}

.board-hint-area.is-collapsed {
  width: auto;
}

.board-hint-toggle,
.board-hint-collapse,
.board-hint-dismiss {
  display: none !important;
}

.board-hint-toggle {
  width: 42px;
  min-height: 42px;
  position: relative;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  color: var(--accent-strong);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.board-hint-area.is-collapsing .board-hint-toggle {
  animation: board-hint-bell-in 230ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.board-hint-toggle-icon {
  display: grid;
  place-items: center;
}

.board-hint-card {
  position: relative;
  width: 100%;
  min-height: var(--board-control-stack-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 91%, transparent);
  color: var(--text);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  overflow: hidden;
  pointer-events: auto;
}

.board-hint-card.is-trading {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 94%, transparent);
}

.board-hint-area.is-expanding .board-hint-card {
  animation: board-hint-card-in 230ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.board-hint-collapse {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent),
    color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent-strong);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    width 160ms ease;
}

.board-hint-collapse:hover,
.board-hint-collapse:focus-visible {
  outline: none;
  width: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 14%, transparent), transparent),
    color-mix(in srgb, var(--accent) 26%, var(--surface-2));
  color: var(--text);
}

.board-hint-collapse svg {
  position: absolute;
  left: calc(50% + 0.5px);
  top: 50%;
  width: 8px;
  height: 12px;
  stroke-width: 3.4;
  transform: translate(-50%, -50%);
}

@keyframes board-hint-card-in {
  from {
    opacity: 0.2;
    transform: translateX(-6px) scale(0.82);
    transform-origin: left top;
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    transform-origin: left top;
  }
}

@keyframes board-hint-bell-in {
  from {
    opacity: 0.25;
    transform: translateX(-4px) scale(0.74);
    transform-origin: left top;
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    transform-origin: left top;
  }
}

.board-hint-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.board-hint-copy span {
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.board-hint-copy h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
}

.board-hint-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.24;
}

.board-hint-copy .toast {
  margin: 5px 0 0;
  padding: 7px 8px;
  font-size: 11px;
}

.board-hint-dismiss {
  width: 26px;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--muted);
}

.board-hint-dismiss svg {
  width: 15px;
  height: 15px;
}

.board-hint-controls {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 7px;
}

.board-hint-controls .wide {
  width: 100%;
  min-height: 34px;
}

.board-hint-controls .discard-grid,
.board-hint-controls .victim-list {
  gap: 6px;
}

.game-layout.is-replay-workspace .board-panel,
.native-game-layout.is-replay-workspace .native-board-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

.game-layout.is-replay-workspace .board-panel {
  height: var(--board-height, calc(100vh - 96px));
}

.game-layout.is-replay-workspace .board-stage,
.native-game-layout.is-replay-workspace .board-stage {
  height: 100%;
  min-height: 0;
}

.board-stage.is-replay .board-hint-area,
.board-stage.is-replay .board-turn-controls,
.board-stage.is-replay .board-action-bar,
.board-stage.is-replay .dice-default-slot,
.board-stage.is-replay .turn-clock {
  display: none;
}

.replay-mode-pill {
  position: absolute;
  top: var(--board-floating-inset);
  left: var(--board-floating-inset);
  z-index: 28;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 74%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--accent-strong);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.replay-mode-pill span,
.replay-mode-pill span svg {
  width: 15px;
  height: 15px;
  display: block;
}

.replay-mode-pill svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-mode-pill strong {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.replay-timeline-dock {
  --replay-dock-control: 38px;
  min-width: 0;
  min-height: 158px;
  display: grid;
  gap: 9px;
  padding: 10px 12px 11px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface) 96%, var(--board-water));
  color: var(--text);
  box-shadow:
    0 -10px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  isolation: isolate;
}

.replay-dock-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.replay-dock-head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.replay-dock-head span {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.replay-dock-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-dock-head small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
}

.replay-mobile-exit {
  display: none;
  width: 30px;
  min-height: 30px;
}

.replay-dock-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "transport speed"
    "timeline timeline";
  align-items: center;
  gap: 8px 10px;
}

.replay-transport-controls {
  grid-area: transport;
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(5, var(--replay-dock-control));
  gap: 5px;
}

.replay-transport-controls > button,
.replay-speed-controls button {
  min-width: 0;
  min-height: var(--replay-dock-control);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 7px 14px rgba(0, 0, 0, 0.12);
}

.replay-transport-controls > button svg,
.replay-speed-controls button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-transport-controls > button:not(:disabled):hover,
.replay-transport-controls > button:not(:disabled):focus-visible,
.replay-speed-controls button:not(:disabled):hover,
.replay-speed-controls button:focus-visible,
.replay-speed-controls button.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  color: var(--accent-strong);
  outline: none;
  transform: translateY(-1px);
}

.replay-play-button {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #ffffff 8%), var(--accent)) !important;
  border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--accent)) !important;
  color: #ffffff !important;
}

.replay-turn-timeline {
  grid-area: timeline;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.replay-turn-ticks {
  position: relative;
  height: 13px;
  margin-inline: 9px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 850;
  line-height: 1;
}

.replay-turn-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.replay-turn-ticks span:first-child {
  transform: none;
}

.replay-turn-ticks span:last-child {
  transform: translateX(-100%);
}

.replay-timeline-track {
  position: relative;
  height: 48px;
  min-width: 0;
}

.replay-track-rail {
  position: absolute;
  top: 10px;
  left: 9px;
  right: 9px;
  z-index: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 64%, var(--surface-3));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.replay-track-rail span {
  display: block;
  width: var(--replay-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 76%, #ffffff 10%), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}

.replay-timeline-track input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 25px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}

.replay-timeline-track input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.replay-timeline-track input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  appearance: none;
  border: 2px solid color-mix(in srgb, #ffffff 78%, var(--accent));
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 15px color-mix(in srgb, var(--accent) 42%, transparent);
}

.replay-timeline-track input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
}

.replay-timeline-track input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, #ffffff 78%, var(--accent));
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 15px color-mix(in srgb, var(--accent) 42%, transparent);
}

.replay-event-markers {
  position: absolute;
  top: 25px;
  left: 9px;
  right: 9px;
  z-index: 5;
  height: 21px;
  pointer-events: none;
}

.replay-event-marker {
  --replay-marker: var(--muted);
  position: absolute;
  top: 0;
  width: 19px;
  height: 19px;
  min-height: 19px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--replay-marker) 56%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, var(--replay-marker) 10%);
  color: var(--replay-marker);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  pointer-events: auto;
}

.replay-event-marker.is-road { --replay-marker: #ff6d6d; }
.replay-event-marker.is-settlement { --replay-marker: #51dfbf; }
.replay-event-marker.is-city { --replay-marker: #f4a45c; }
.replay-event-marker.is-trade { --replay-marker: #72c9f0; }
.replay-event-marker.is-robber { --replay-marker: #b4a7c8; }
.replay-event-marker.is-victory { --replay-marker: #f2c85e; }
.replay-event-marker.is-development { --replay-marker: #aa91e7; }

.replay-event-marker svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-event-marker.is-current,
.replay-event-marker:hover,
.replay-event-marker:focus-visible {
  z-index: 2;
  border-color: color-mix(in srgb, var(--replay-marker) 82%, #ffffff 18%);
  background: color-mix(in srgb, var(--surface) 70%, var(--replay-marker) 30%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--replay-marker) 24%, transparent),
    0 0 13px color-mix(in srgb, var(--replay-marker) 34%, transparent);
  outline: none;
  transform: translateX(-50%) translateY(-1px) scale(1.08);
}

.replay-speed-controls {
  grid-area: speed;
  justify-self: end;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 5px;
}

.replay-speed-controls button {
  min-width: 40px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.replay-side-rail {
  min-height: 0;
  overflow: hidden;
}

.side-panel.replay-side-rail,
.native-side-rail.replay-side-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
}

.replay-side-tools {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 66%),
    color-mix(in srgb, var(--surface) 95%, transparent);
}

.replay-side-status {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker turn count"
    "label label label";
  align-items: baseline;
  gap: 5px 8px;
}

.replay-side-status > span {
  grid-area: kicker;
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.replay-side-status > strong {
  grid-area: turn;
  font-size: 13px;
  line-height: 1;
}

.replay-side-status > p {
  grid-area: label;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-side-status > small {
  grid-area: count;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.replay-side-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.replay-side-actions button {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.replay-side-actions button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-side-actions .replay-side-exit {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: color-mix(in srgb, var(--danger) 80%, var(--text));
}

.replay-history-panels {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.replay-side-rail .replay-history-panels > .log-card.is-open {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  max-height: none;
}

.replay-side-rail .replay-history-panels > .chat-card.is-open {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  max-height: none;
}

.chat-compose.is-read-only {
  opacity: 0.82;
}

.chat-compose.is-read-only input,
.chat-compose.is-read-only button {
  cursor: not-allowed;
}

.chat-compose.is-read-only input {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.chat-compose.is-read-only button {
  color: var(--muted);
}

@media (max-width: 1020px) {
  .replay-timeline-dock {
    --replay-dock-control: 36px;
    min-height: 158px;
  }

  .replay-mobile-exit { display: grid; }
}

@media (max-width: 620px) {
  .replay-timeline-dock {
    --replay-dock-control: 33px;
    min-height: 150px;
    gap: 6px;
    padding: 7px 8px 8px;
  }

  .replay-dock-head > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 6px;
  }

  .replay-dock-head small {
    grid-column: 1 / -1;
  }

  .replay-dock-body {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }

  .replay-transport-controls {
    grid-template-columns: repeat(5, var(--replay-dock-control));
  }

  .replay-speed-controls {
    grid-template-columns: repeat(4, minmax(30px, 1fr));
  }

  .replay-speed-controls button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 9px;
  }

  .replay-turn-ticks span:nth-child(even):not(:last-child) {
    display: none;
  }
}

.turn-badge-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.18) 36%, rgba(0, 0, 0, 0.18) 100%),
    var(--turn-color);
  border: 2px solid color-mix(in srgb, var(--turn-text) 72%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}

.board-turn-controls {
  position: absolute;
  right: var(--board-floating-inset);
  bottom: calc((var(--board-floating-inset) * 2) + var(--board-action-hud-height, 58px));
  z-index: 8;
  width: max-content;
  height: max-content;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: auto;
  touch-action: none;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 160ms ease,
    transform 260ms cubic-bezier(0.2, 0.82, 0.22, 1);
}

.board-turn-controls.is-custom {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 22;
  justify-items: start;
  transform: translate3d(var(--dice-x), var(--dice-y), 0);
}

.board-turn-controls.is-dragging {
  z-index: 26;
  transition: none;
  will-change: transform;
}

.board-turn-controls.is-pressing .board-dice,
.board-turn-controls.is-dragging .board-dice {
  cursor: grabbing;
}

.board-dice {
  pointer-events: auto;
}

.dice-default-slot {
  position: absolute;
  right: var(--board-floating-inset);
  bottom: calc((var(--board-floating-inset) * 2) + var(--board-action-hud-height, 58px));
  z-index: 7;
  width: var(--dice-collapsed-width);
  min-height: calc(var(--dice-size) + (var(--dice-space) * 2));
  padding: 0;
  outline: 1.5px dashed transparent;
  outline-offset: 0;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16)),
    color-mix(in srgb, var(--surface) 42%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  opacity: 0.72;
  pointer-events: auto;
  touch-action: manipulation;
  transition:
    opacity 220ms ease,
    outline-color 210ms ease,
    outline-offset 240ms cubic-bezier(0.2, 0.82, 0.22, 1),
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dice-default-slot.is-available,
.dice-default-slot.is-drag-origin,
.dice-default-slot.is-snap-target {
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  outline-offset: 1.5px;
  border-color: transparent;
}

.dice-default-slot.is-current {
  opacity: 0;
  pointer-events: none;
}

.dice-default-slot:disabled {
  cursor: default;
  opacity: 0;
}

.dice-default-slot.is-available:hover,
.dice-default-slot.is-available:focus-visible {
  opacity: 1;
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 82%, white);
  outline-offset: 1.5px;
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  transform: translateY(-1px);
}

.dice-default-slot.is-drag-origin {
  opacity: 0.76;
  pointer-events: none;
  transform: none;
}

.dice-default-slot.is-snap-target {
  opacity: 1;
  outline-color: color-mix(in srgb, var(--accent) 86%, white);
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.12)),
    color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 12%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: none;
}

.board-action-bar {
  --hud-button-size: 58px;
  position: absolute;
  right: var(--board-floating-inset);
  bottom: var(--board-floating-inset);
  left: var(--board-floating-inset);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--hud-button-size) var(--hud-button-size);
  gap: 8px;
  align-items: end;
  overflow: visible;
  scrollbar-width: none;
  pointer-events: none;
}

.board-action-bar::-webkit-scrollbar {
  display: none;
}

.board-action-buttons {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(6, var(--hud-button-size));
  gap: 8px;
  align-items: end;
  justify-content: end;
  pointer-events: none;
}

.board-action-buttons > *,
.board-hand-tray {
  pointer-events: auto;
}

.dev-purchase-anchor {
  position: relative;
  width: var(--hud-button-size);
  height: var(--hud-button-size);
  min-width: var(--hud-button-size);
  min-height: var(--hud-button-size);
  display: grid;
  place-items: stretch;
}

.dev-purchase-anchor > .board-hud-button {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
}

.dev-purchase-cost-anchor {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
}

.dev-purchase-cost-anchor > .cost-card {
  width: 100%;
  height: 100%;
}

.dev-purchase-anchor:has(.dev-purchase-confirm) .board-hud-button[data-tooltip]::after {
  display: none;
}

.dev-purchase-confirm {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 45;
  width: min(190px, calc(100vw - 32px));
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 9px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface) 96%, #000 4%);
  color: var(--text);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  pointer-events: auto;
}

.dev-purchase-confirm::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, #000 4%);
  transform: rotate(45deg);
}

.dev-purchase-confirm strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.05;
}

.dev-purchase-confirm span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
}

.dev-purchase-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dev-purchase-confirm-actions button {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.dev-purchase-confirm-actions button.primary {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--line));
  background: var(--accent);
  color: color-mix(in srgb, #ffffff 94%, var(--accent-strong));
}

.dev-purchase-confirm-actions button:not(:disabled):hover,
.dev-purchase-confirm-actions button:not(:disabled):focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 78%, white 10%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.board-hand-tray {
  --hand-card-width: 42px;
  --hand-card-height: 58px;
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  min-height: calc(var(--hand-card-height) + var(--hand-card-height) + 27px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  row-gap: 5px;
  padding: 10px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)),
    color-mix(in srgb, var(--surface-3) 82%, #1d2322 18%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.board-hand-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 8px;
}

.board-hand-row-dev {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.board-hand-row-resources {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}

.board-hand-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
  scrollbar-width: none;
}

.board-hand-group::-webkit-scrollbar {
  display: none;
}

.board-hand-tray .board-hand-group {
  margin-block-start: -12px;
  margin-block-end: -4px;
  padding-block-start: 12px;
  padding-block-end: 4px;
  padding-inline-end: 10px;
}

.board-hand-tray .board-hand-group.is-placeholder-only {
  padding-inline-end: 0;
}

.board-hand-row-dev .board-hand-devs {
  max-width: none;
}

.board-award-medals {
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  padding-inline-start: 3px;
}

.board-award-medal {
  --award-medal-size: 27px;
  --award-color: var(--muted);
  min-width: var(--award-medal-size);
  display: grid;
  grid-template-rows: var(--award-medal-size) 5px;
  justify-items: center;
  align-items: center;
  gap: 2px;
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
}

.board-award-medal-icon {
  width: var(--award-medal-size);
  height: var(--award-medal-size);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 26%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 54%),
    color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 10px rgba(0, 0, 0, 0.12);
  opacity: 0.54;
}

.board-award-medal-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}

.board-award-medal-icon .tiny-road-icon line {
  stroke: currentColor;
}

.board-award-holder-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--award-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--award-color) 42%, transparent);
  opacity: 0;
}

.board-award-medal.is-held .board-award-medal-icon {
  color: color-mix(in srgb, var(--muted) 78%, var(--text));
  opacity: 0.78;
}

.board-award-medal.is-held .board-award-holder-dot {
  opacity: 1;
}

.board-award-medal.is-human {
  color: var(--award-color);
}

.board-award-medal.is-human .board-award-medal-icon {
  border-color: color-mix(in srgb, var(--award-color) 62%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, white 18%, transparent), transparent 56%),
    color-mix(in srgb, var(--award-color) 18%, var(--surface-2));
  color: var(--award-color);
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px color-mix(in srgb, var(--award-color) 20%, transparent),
    0 8px 14px color-mix(in srgb, var(--award-color) 20%, transparent);
}

.board-piece-stock {
  position: relative;
  z-index: 6;
  display: grid;
  align-content: center;
  gap: 3px;
  justify-self: end;
  min-width: 42px;
}

.board-piece-stock-row {
  position: relative;
  z-index: 1;
  min-height: 18px;
  display: grid;
  grid-template-columns: 18px minmax(12px, auto);
  align-items: center;
  justify-content: start;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, #ffffff 92%, var(--muted) 8%);
  font: inherit;
  line-height: 1;
  text-align: left;
  appearance: none;
  overflow: visible;
  transition: color 150ms ease;
}

.board-piece-stock-row:hover,
.board-piece-stock-row:focus-visible,
.board-piece-stock-row.is-previewed {
  z-index: 70;
}

button.board-piece-stock-row {
  cursor: help;
}

button.board-piece-stock-row.is-informational {
  cursor: help;
}

.board-piece-stock-row.is-actionable {
  color: var(--text);
}

.board-piece-stock-row.is-selected,
.board-piece-stock-row.is-actionable:hover,
.board-piece-stock-row.is-actionable:focus-visible,
.board-piece-stock-row.is-informational:hover,
.board-piece-stock-row.is-informational:focus-visible {
  outline: none;
  color: color-mix(in srgb, var(--accent) 82%, white 18%);
}

.board-piece-stock-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.board-piece-stock-icon svg,
.board-piece-stock-icon .build-symbol {
  width: 17px;
  height: 17px;
}

.board-piece-stock-icon .build-symbol-road line {
  stroke: currentColor;
}

.board-piece-stock-icon .build-symbol-settlement path:not(.build-symbol-detail),
.board-piece-stock-icon .build-symbol-city path:not(.build-symbol-detail) {
  fill: currentColor;
  stroke: currentColor;
}

.board-piece-stock-icon .build-symbol-detail {
  stroke: color-mix(in srgb, var(--surface) 78%, transparent);
}

.board-piece-stock-row strong {
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "tnum" 0, "kern" 1;
}

.board-piece-cost-popover {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  z-index: 90;
  min-width: max-content;
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 10%, transparent), rgba(0, 0, 0, 0.14)),
    color-mix(in srgb, var(--surface) 90%, #020707 10%);
  color: var(--text);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 16px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%) scale(0.96);
  transform-origin: right center;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  white-space: nowrap;
}

.board-piece-stock-row.stock-city .board-piece-cost-popover {
  top: auto;
  bottom: -6px;
  transform: translate(4px, 0) scale(0.96);
  transform-origin: right bottom;
}

.board-piece-stock-row.stock-road .board-piece-cost-popover {
  top: -2px;
  transform: translate(4px, 0) scale(0.96);
  transform-origin: right top;
}

.board-piece-cost-popover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-right: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, #020707 10%);
  transform: translateY(-50%) rotate(45deg);
}

.board-piece-stock-row.stock-city .board-piece-cost-popover::after {
  top: auto;
  bottom: 10px;
  transform: rotate(45deg);
}

.board-piece-stock-row.stock-road .board-piece-cost-popover::after {
  top: 12px;
  transform: translateY(-50%) rotate(45deg);
}

.board-piece-cost-title {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.board-piece-cost-popover .cost-pips {
  flex-wrap: nowrap;
  gap: 4px;
}

.board-piece-cost-popover .cost-pip {
  min-width: 22px;
  min-height: 20px;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, currentColor 14%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.board-piece-cost-popover .cost-pip .resource-symbol {
  width: 13px;
  height: 13px;
}

.board-piece-cost-popover .cost-pip strong {
  font-size: 10px;
}

.board-piece-stock-row:hover .board-piece-cost-popover,
.board-piece-stock-row:focus-visible .board-piece-cost-popover,
.board-piece-stock-row.is-selected .board-piece-cost-popover,
.board-piece-stock-row.is-previewed .board-piece-cost-popover {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.board-piece-stock-row.stock-city:hover .board-piece-cost-popover,
.board-piece-stock-row.stock-city:focus-visible .board-piece-cost-popover,
.board-piece-stock-row.stock-city.is-selected .board-piece-cost-popover,
.board-piece-stock-row.stock-city.is-previewed .board-piece-cost-popover,
.board-piece-stock-row.stock-road:hover .board-piece-cost-popover,
.board-piece-stock-row.stock-road:focus-visible .board-piece-cost-popover,
.board-piece-stock-row.stock-road.is-selected .board-piece-cost-popover,
.board-piece-stock-row.stock-road.is-previewed .board-piece-cost-popover {
  transform: translate(0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .board-piece-stock-row.is-previewed:not(:hover):not(:focus-visible) .board-piece-cost-popover {
    opacity: 0;
    transform: translate(4px, -50%) scale(0.96);
  }

  .board-piece-stock-row.stock-city.is-previewed:not(:hover):not(:focus-visible) .board-piece-cost-popover {
    transform: translate(4px, 0) scale(0.96);
  }

  .board-piece-stock-row.stock-road.is-previewed:not(:hover):not(:focus-visible) .board-piece-cost-popover {
    transform: translate(4px, 0) scale(0.96);
  }
}

.board-hand-info-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: var(--hand-tooltip-left, 0px);
  z-index: 96;
  width: max-content;
  max-width: var(--hand-tooltip-max-width, min(244px, calc(100vw - 32px)));
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 10%, transparent), rgba(0, 0, 0, 0.14)),
    color-mix(in srgb, var(--surface) 91%, #020707 9%);
  color: var(--text);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.36),
    0 0 16px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(6px) scale(0.96);
  transform-origin: left bottom;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  white-space: normal;
  overflow-wrap: anywhere;
}

.board-hand-info-popover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: var(--hand-tooltip-tail-left, 18px);
  width: 9px;
  height: 9px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 91%, #020707 9%);
  transform: rotate(45deg);
}

.board-hand-info-title {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.board-hand-info-body,
.board-hand-info-meta {
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 10px;
  font-weight: 750;
  line-height: 1.22;
}

.board-hand-info-meta {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 8.5px;
}

.board-hand-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.board-hand-info-chip {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.board-hand-info-chip-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.board-hand-info-chip-icon .resource-symbol,
.board-hand-info-chip-icon .dev-symbol,
.board-hand-info-chip-icon .build-symbol {
  width: 15px;
  height: 15px;
  display: block;
}

.board-hand-info-chip-icon .build-symbol-road line,
.board-hand-info-chip-icon .dev-symbol path,
.board-hand-info-chip-icon .dev-symbol circle {
  stroke: currentColor;
}

.board-hand-info-chip-icon .dev-symbol path,
.board-hand-info-chip-icon .dev-symbol circle {
  fill: none;
}

.board-hand-card:hover,
.board-hand-card:focus-visible,
.board-hand-card.is-previewed,
.board-hand-placeholder:hover,
.board-hand-placeholder:focus-visible,
.board-hand-placeholder.is-previewed,
.board-shelf-dev-card:hover,
.board-shelf-dev-card:focus-visible,
.board-shelf-dev-card.is-selected {
  z-index: 92;
}

.board-hand-card:hover .board-hand-info-popover,
.board-hand-card:focus-visible .board-hand-info-popover,
.board-hand-card.is-previewed .board-hand-info-popover,
.board-hand-placeholder:hover .board-hand-info-popover,
.board-hand-placeholder:focus-visible .board-hand-info-popover,
.board-hand-placeholder.is-previewed .board-hand-info-popover,
.board-shelf-dev-card:hover .board-hand-info-popover,
.board-shelf-dev-card:focus-visible .board-hand-info-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@supports selector(.board-hand-tray:has(.board-hand-card:hover)) {
  .board-hand-tray:has(.board-hand-card:hover) .board-hand-group,
  .board-hand-tray:has(.board-hand-placeholder:hover) .board-hand-group,
  .board-hand-tray:has(.board-shelf-dev-card:hover) .board-hand-group,
  .board-hand-tray:has(.board-hand-card:focus-visible) .board-hand-group,
  .board-hand-tray:has(.board-hand-placeholder:focus-visible) .board-hand-group,
  .board-hand-tray:has(.board-shelf-dev-card:focus-visible) .board-hand-group,
  .board-hand-tray:has(.is-previewed) .board-hand-group {
    overflow: visible;
  }
}

.board-shelf-dev-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: var(--hand-card-width, 42px);
  height: var(--hand-card-height, 58px);
  min-height: 0;
  flex: 0 0 var(--hand-card-width, 42px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card-ink, #f4f1ff);
  font: inherit;
}

.board-shelf-dev-card.is-stack::before,
.board-shelf-dev-card.is-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid color-mix(in srgb, currentColor 36%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--card-color, var(--surface-3)) 88%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.board-shelf-dev-card.is-stack::before {
  top: -6px;
  bottom: 6px;
  z-index: -2;
}

.board-shelf-dev-card.is-stack::after {
  top: -3px;
  bottom: 3px;
  z-index: -1;
}

.board-shelf-dev-card.is-not-playable,
.dev-hand-card.is-not-playable {
  opacity: 0.58;
  filter: saturate(0.7) brightness(0.86);
}

.board-shelf-dev-card.is-not-playable.is-selected,
.board-shelf-dev-card.is-not-playable:hover,
.board-shelf-dev-card.is-not-playable:focus-visible,
.dev-hand-card.is-not-playable.is-selected,
.dev-hand-card.is-not-playable:hover,
.dev-hand-card.is-not-playable:focus-visible {
  opacity: 0.78;
  filter: saturate(0.82) brightness(0.94);
}

.board-shelf-dev-card.is-selected,
.board-shelf-dev-card:not(:disabled):hover,
.board-shelf-dev-card:not(:disabled):focus-visible {
  outline: none;
  color: color-mix(in srgb, var(--card-ink, var(--text)) 86%, var(--accent-strong) 14%);
  filter: saturate(1.08) brightness(1.05);
  transform: translateY(-1px);
}

.board-shelf-dev-card.is-selected .stacked-card-face,
.board-shelf-dev-card:not(:disabled):hover .stacked-card-face,
.board-shelf-dev-card:not(:disabled):focus-visible .stacked-card-face {
  border-color: color-mix(in srgb, var(--accent) 62%, white 18%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.board-shelf-dev-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.board-shelf-dev-icon .dev-symbol {
  width: 25px;
  height: 25px;
  display: block;
}

.board-shelf-dev-label {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 6px;
  font-weight: 950;
  line-height: 1;
  opacity: 0.78;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-hand-tray .dev-card-detail {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(320px, 100%);
}

.board-hand-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.board-hand-placeholder {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: var(--hand-card-width);
  height: var(--hand-card-height);
  flex: 0 0 var(--hand-card-width);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px dashed color-mix(in srgb, var(--muted) 48%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 45%),
    color-mix(in srgb, var(--surface) 78%, transparent);
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent),
    0 5px 10px rgba(0, 0, 0, 0.12);
  font: inherit;
  appearance: none;
  cursor: help;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.board-hand-placeholder svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-hand-placeholder.development {
  color: color-mix(in srgb, #b9aaff 72%, var(--muted));
}

.board-hand-placeholder:hover,
.board-hand-placeholder:focus-visible,
.board-hand-placeholder.is-previewed {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--muted));
  color: color-mix(in srgb, var(--text) 84%, var(--accent) 16%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.board-hand-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: var(--hand-card-width);
  height: var(--hand-card-height);
  min-height: 0;
  flex: 0 0 var(--hand-card-width);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card-ink, var(--text));
  font: inherit;
  appearance: none;
  cursor: help;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.board-hand-card:hover,
.board-hand-card:focus-visible,
.board-hand-card.is-previewed {
  outline: none;
  color: color-mix(in srgb, var(--card-ink, var(--text)) 86%, var(--accent-strong) 14%);
  filter: saturate(1.08) brightness(1.05);
  transform: translateY(-1px);
}

.board-hand-card:hover .stacked-card-face,
.board-hand-card:focus-visible .stacked-card-face,
.board-hand-card.is-previewed .stacked-card-face {
  border-color: color-mix(in srgb, var(--accent) 62%, white 18%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.board-hand-card.is-stack::before,
.board-hand-card.is-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid color-mix(in srgb, currentColor 36%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--card-color, var(--surface-3)) 88%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.board-hand-card.is-stack::before {
  top: -6px;
  bottom: 6px;
  z-index: -2;
}

.board-hand-card.is-stack::after {
  top: -3px;
  bottom: 3px;
  z-index: -1;
}

.board-hand-card.brick {
  --card-color: var(--resource-brick);
}

.board-hand-card.timber {
  --card-color: var(--resource-timber);
}

.board-hand-card.grain {
  --card-color: var(--resource-grain);
}

.board-hand-card.wool {
  --card-color: var(--resource-wool);
}

.board-hand-card.ore {
  --card-color: var(--resource-ore);
}

.board-hand-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.board-hand-icon .resource-symbol {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22));
}

.board-hud-count {
  position: absolute;
  top: -1px;
  right: -2px;
  z-index: 2;
  min-width: 24px;
  min-height: 23px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
}

.board-hand-count {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 5;
  min-width: 17px;
  min-height: 17px;
  display: grid;
  place-items: center;
  padding: 0 3.5px;
  border-radius: 5px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 9.6px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.18);
}

.board-shelf-dev-count {
  top: -8px;
  right: -8px;
}

.resource-risk-meter {
  --risk-color: var(--accent);
  position: relative;
  justify-self: end;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--risk-color);
}

.resource-risk-meter strong {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5px;
  color: var(--text);
  font-size: 13.7px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.resource-risk-meter strong span:nth-child(2),
.resource-risk-meter strong span:nth-child(3) {
  color: color-mix(in srgb, var(--text) 78%, var(--risk-color));
}

.resource-risk-current {
  letter-spacing: -0.04em;
  transform: translate(0, -1px);
}

.resource-risk-slash {
  font-size: 0.7em;
  transform: translate(0, 0.75px) rotate(-4deg);
}

.resource-risk-limit {
  font-size: 0.68em;
  letter-spacing: -0.02em;
  transform: translate(-0.5px, 1.4px);
}

.resource-risk-meter.is-crowded strong {
  font-size: 11.6px;
}

.resource-risk-ring {
  grid-area: 1 / 1;
  width: 52px;
  height: 52px;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.resource-risk-segment {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 28%, transparent);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.resource-risk-segment.is-filled {
  stroke: color-mix(in srgb, var(--risk-color) 82%, #ffffff 10%);
}

.resource-risk-meter.is-full {
  --risk-color: #f0b84f;
}

.resource-risk-meter.is-risk {
  --risk-color: #ff5f5f;
  width: 120px;
  grid-template-columns: minmax(0, 58px) 52px;
  gap: 6px;
  animation: resource-risk-pulse 1.45s ease-in-out infinite;
}

.resource-risk-meter.is-risk .resource-risk-ring,
.resource-risk-meter.is-risk strong {
  grid-column: 2;
  grid-row: 1;
}

.resource-risk-note {
  grid-column: 1;
  grid-row: 1;
  max-width: 54px;
  color: color-mix(in srgb, var(--risk-color) 82%, #ffffff 10%);
  font-size: 8.5px;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
  text-transform: uppercase;
}

@keyframes resource-risk-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 color-mix(in srgb, var(--risk-color) 0%, transparent));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--risk-color) 48%, transparent));
    transform: scale(1.035);
  }
}

.board-hud-count {
  top: -11px;
  right: -10px;
  min-width: 25px;
  min-height: 24px;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--line) 42%, transparent);
}

.board-hud-button {
  position: relative;
  width: var(--hud-button-size);
  min-width: var(--hud-button-size);
  height: var(--hud-button-size);
  min-height: var(--hud-button-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid color-mix(in srgb, #ffffff 70%, var(--accent) 30%);
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.16)),
    color-mix(in srgb, var(--accent) 62%, #9bd8eb 38%);
  color: color-mix(in srgb, var(--accent-strong) 56%, #12343c 44%);
  box-shadow:
    0 10px 0 color-mix(in srgb, var(--accent-strong) 36%, transparent),
    0 14px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    filter 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.board-hud-button:not(:disabled):not(.is-disabled):hover,
.board-hud-button:not(:disabled):not(.is-disabled):focus-visible,
.board-hud-button.is-selected:not(.is-disabled) {
  outline: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #ffffff 82%, var(--accent) 18%);
  box-shadow:
    0 12px 0 color-mix(in srgb, var(--accent-strong) 38%, transparent),
    0 16px 28px rgba(0, 0, 0, 0.22),
    0 0 18px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.board-hud-button:disabled {
  cursor: default;
  opacity: 0.82;
  filter: grayscale(0.5) saturate(0.72) contrast(1.06);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.16),
    0 9px 16px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.board-hud-button:disabled .board-hud-icon {
  color: color-mix(in srgb, var(--text) 68%, var(--accent) 32%);
  opacity: 0.72;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.16));
}

.board-hud-button:disabled .board-hud-count {
  opacity: 1;
  filter: none;
}

.board-hud-button[data-tooltip] {
  overflow: visible;
}

.board-hud-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: auto;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 90;
  width: max-content;
  max-width: min(180px, 62vw);
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 44%, rgba(0, 0, 0, 0.2)),
    color-mix(in srgb, var(--surface) 88%, #091512 12%);
  color: var(--text);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 130ms ease,
    transform 130ms ease,
    visibility 0s linear 130ms;
}

.board-hud-button[data-tooltip]:hover::after,
.board-hud-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 520ms, 520ms, 520ms;
}

.board-hud-button.is-hold-confirming,
.app-shell.is-native-game .dice-end-turn.is-hold-confirming,
.trade-submit.is-hold-confirming {
  overflow: hidden;
}

.board-hud-button.is-hold-confirming::before,
.app-shell.is-native-game .dice-end-turn.is-hold-confirming::before,
.trade-submit.is-hold-confirming::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hold-confirm-fill var(--hold-duration, 1000ms) linear forwards;
  will-change: transform;
}

.board-hud-button.is-hold-confirming .board-hud-icon,
.board-hud-button.is-hold-confirming .board-hud-count {
  position: relative;
  z-index: 3;
}

.app-shell.is-native-game .dice-end-turn.is-hold-confirming .dice-end-turn-label {
  z-index: 3;
}

.trade-submit.is-hold-confirming .trade-submit-label,
.trade-submit.is-hold-confirming .trade-submit-shortcut {
  z-index: 3;
}

@keyframes hold-confirm-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.board-hud-button.development[data-tooltip]::after {
  right: 0;
  left: auto;
  transform: translate(0, 4px);
}

.board-hud-button.development[data-tooltip]:hover::after,
.board-hud-button.development[data-tooltip]:focus-visible::after {
  transform: translate(0, 0);
}

.board-hud-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.board-hud-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-hud-icon .build-symbol,
.board-hud-icon .dev-symbol {
  width: 31px;
  height: 31px;
}

.board-hud-button.road .build-symbol-road line {
  stroke-width: 9;
}

.board-end-turn {
  color: var(--turn-text);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1) 42%, rgba(0, 0, 0, 0.22)),
    var(--turn-color);
}

.board-end-turn .board-hud-icon svg {
  fill: color-mix(in srgb, var(--turn-text) 48%, transparent);
  stroke-width: 2.4;
}

.board-dice {
  min-height: 0;
  padding: var(--dice-space);
  display: flex;
  gap: var(--dice-space);
  align-items: center;
  border-radius: 7px;
  border: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.16)),
    var(--turn-color);
  color: var(--turn-text);
  box-shadow: 0 12px 28px rgba(10, 22, 18, 0.18);
  backdrop-filter: blur(12px);
  cursor: grab;
  touch-action: none;
  transition:
    max-width 220ms ease,
    min-width 220ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 140ms ease;
  overflow: hidden;
}

.board-dice[data-roll-enabled="true"] {
  cursor: pointer;
}

.board-dice.is-roll-prompt {
  width: var(--dice-prompt-width);
  min-width: var(--dice-prompt-width);
  max-width: min(var(--dice-prompt-width), calc(100vw - 28px));
}

.board-dice.is-human-roll:not(.is-rolling) {
  animation: dice-ready-pulse 1600ms ease-in-out infinite;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--turn-color) 18%, transparent),
    0 12px 28px rgba(10, 22, 18, 0.18),
    0 0 22px color-mix(in srgb, var(--turn-color) 34%, transparent);
}

.board-dice.is-collapsed {
  width: var(--dice-collapsed-width);
  min-width: var(--dice-collapsed-width);
  max-width: var(--dice-collapsed-width);
  gap: 0;
}

.board-dice.is-settling {
  width: var(--dice-prompt-width);
  min-width: var(--dice-prompt-width);
  max-width: var(--dice-prompt-width);
}

.board-dice.is-rolled.is-disabled {
  opacity: 0.62;
  filter: grayscale(0.52) saturate(0.68);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.board-dice.is-rolled .die {
  opacity: 0.86;
  filter: saturate(0.82);
}

.dice-prompt {
  min-width: max-content;
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 9px;
  overflow: visible;
  white-space: nowrap;
  transform-origin: left center;
  transition:
    max-width 220ms ease,
    opacity 150ms ease,
    margin 220ms ease,
    transform 220ms ease;
}

.dice-prompt strong {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}

.board-dice.is-roll-prompt .dice-prompt {
  max-width: none;
  opacity: 1;
}

.board-dice.is-collapsed .dice-prompt {
  min-width: 0;
  max-width: 0;
  opacity: 0;
}

.board-dice.is-settling .dice-prompt {
  max-width: none;
  opacity: 1;
}

.dice-pair {
  display: flex;
  flex: 0 0 auto;
  gap: var(--dice-space);
  align-items: center;
  transform-origin: right center;
}

.board-resize-handle {
  position: absolute;
  z-index: 7;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0.54;
  touch-action: none;
}

.board-resize-handle:hover,
.board-resize-handle:focus-visible {
  opacity: 1;
  outline: none;
}

.board-resize-handle:disabled {
  cursor: default;
  opacity: 0;
}

.board-resize-x {
  top: 62px;
  right: 0;
  bottom: 86px;
  width: 14px;
  cursor: ew-resize;
}

.board-resize-x::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 4px;
  height: 58px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--line-strong) 84%, transparent);
  transform: translateY(-50%);
}

.board-resize-y {
  left: 50%;
  right: auto;
  bottom: 0;
  width: 144px;
  height: var(--board-floating-inset);
  cursor: ns-resize;
  transform: translateX(-50%);
}

.board-resize-y::after {
  content: "";
  position: absolute;
  right: 24px;
  left: 24px;
  top: 50%;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 84%, transparent);
  transform: translateY(-50%);
}

.board-resize-corner {
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 0;
  cursor: nwse-resize;
}

.resize-corner-icon {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: color-mix(in srgb, var(--text) 62%, transparent);
  stroke-width: 2.15;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16));
  pointer-events: none;
}

body.is-board-resizing {
  cursor: nwse-resize;
  user-select: none;
}

body.is-board-column-resizing {
  cursor: ew-resize;
}

body.is-board-column-resizing * {
  cursor: ew-resize !important;
}

.board-dice.is-disabled {
  opacity: 0.88;
}

.board-dice.is-rolling {
  opacity: 1;
}

.board-dice:not(.is-disabled):hover,
.board-dice:not(.is-disabled):focus-visible {
  box-shadow: 0 14px 34px rgba(10, 22, 18, 0.24);
  outline: none;
}

.board-die {
  width: var(--dice-size);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 6px;
  border-radius: 7px;
  background: var(--board-token-bg);
  border: 1.5px solid var(--board-token-line);
  box-shadow:
    inset 0 -3px 0 rgba(21, 33, 30, 0.08),
    0 4px 9px rgba(0, 0, 0, 0.12);
}

.die-pip {
  width: 5px;
  height: 5px;
  place-self: center;
  border-radius: 999px;
  background: transparent;
}

.die-pip.is-on {
  background: var(--board-token-text);
}

.board-dice.is-rolling .board-die {
  animation: dice-tumble 420ms ease-in-out infinite;
}

.board-dice.is-rolling .board-die:nth-child(2) {
  animation-direction: reverse;
}

.board-dice.is-settling .board-die {
  animation: dice-land 560ms cubic-bezier(0.2, 0.78, 0.18, 1) both;
}

.board-dice.is-settling .board-die:nth-child(2) {
  animation-delay: 45ms;
}

@keyframes dice-tumble {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  28% {
    transform: translateY(-3px) rotate(-9deg);
  }
  56% {
    transform: translateY(2px) rotate(8deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes dice-land {
  0% {
    transform: translateY(-6px) rotate(-8deg) scale(1.08);
    filter: saturate(1.2);
  }
  54% {
    transform: translateY(2px) rotate(3deg) scale(1.02);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: saturate(0.82);
  }
}

@keyframes dice-ready-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(1);
  }
  50% {
    transform: scale(1.035);
    filter: saturate(1.08);
  }
}

@keyframes setup-node-glow {
  0%,
  100% {
    r: 6px;
    opacity: 0.58;
    stroke-width: 2;
  }
  50% {
    r: 9px;
    opacity: 0.78;
    stroke-width: 3;
  }
}

@keyframes setup-road-glow {
  0%,
  100% {
    stroke-width: 10;
    opacity: 0.82;
  }
  50% {
    stroke-width: 15;
    opacity: 0.96;
  }
}

@keyframes setup-road-aura {
  0%,
  100% {
    stroke-width: 22;
    opacity: 0.22;
  }
  50% {
    stroke-width: 32;
    opacity: 0.48;
  }
}

@keyframes robber-hex-pulse {
  0%,
  100% {
    opacity: 0.34;
    stroke-width: 5;
  }
  50% {
    opacity: 0.74;
    stroke-width: 9;
  }
}

@keyframes city-upgrade-pulse {
  0%,
  100% {
    opacity: 0.34;
    r: 22px;
    stroke-width: 2.6;
  }
  50% {
    opacity: 0.78;
    r: 28px;
    stroke-width: 4;
  }
}

@keyframes robber-hex-pulse-lite {
  0%,
  100% {
    opacity: 0.36;
    stroke-width: 5;
  }
  50% {
    opacity: 0.78;
    stroke-width: 9;
  }
}

@keyframes city-upgrade-pulse-lite {
  0%,
  100% {
    opacity: 0.38;
    r: 22px;
    stroke-width: 2.6;
  }
  50% {
    opacity: 0.82;
    r: 28px;
    stroke-width: 4;
  }
}

@keyframes piece-place-float {
  0% {
    transform: translateY(-26px) scale(0.96);
    opacity: 0.18;
  }
  68% {
    transform: translateY(2px) scale(1.035);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes road-place-float {
  0% {
    transform: translateY(-26px) scale(0.98);
    opacity: 0.18;
  }
  68% {
    transform: translateY(2px) scale(1.015);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.board-context-menu {
  position: absolute;
  z-index: 12;
  min-width: 136px;
  padding: 5px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.board-context-menu button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.board-context-menu button:hover,
.board-context-menu button:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.board-context-menu svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sea {
  fill: var(--board-water);
}

.hex polygon {
  stroke: none;
  stroke-width: 0;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  cursor: default;
}

.terrain-underlay {
  stroke-width: 2.6;
  stroke-linejoin: round;
  pointer-events: none;
}

.terrain-fill {
  stroke: none;
}

.terrain-underlay.terrain-hills {
  stroke: var(--terrain-hills);
}

.terrain-underlay.terrain-forest {
  stroke: var(--terrain-forest);
}

.terrain-underlay.terrain-fields {
  stroke: var(--terrain-fields);
}

.terrain-underlay.terrain-pasture {
  stroke: var(--terrain-pasture);
}

.terrain-underlay.terrain-mountains {
  stroke: var(--terrain-mountains);
}

.terrain-underlay.terrain-desert {
  stroke: var(--terrain-desert);
}

.terrain-hills {
  fill: var(--terrain-hills);
}

.terrain-forest {
  fill: var(--terrain-forest);
}

.terrain-fields {
  fill: var(--terrain-fields);
}

.terrain-pasture {
  fill: var(--terrain-pasture);
}

.terrain-mountains {
  fill: var(--terrain-mountains);
}

.terrain-desert {
  fill: var(--terrain-desert);
}

.hex.is-clickable polygon {
  cursor: pointer;
}

.hex.is-clickable .terrain-fill {
  stroke: color-mix(in srgb, var(--accent-strong) 32%, var(--hex-stroke));
  stroke-width: 5.5;
}

.hex-robber-target {
  fill: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  stroke: var(--accent-strong);
  stroke-linejoin: round;
  pointer-events: none;
  animation: robber-hex-pulse 2400ms ease-in-out infinite;
}

.hex.is-placement-focus .terrain-fill {
  stroke: color-mix(in srgb, var(--accent-strong) 52%, var(--hex-stroke));
  stroke-width: 6;
}

.terrain-placement-shade {
  fill: var(--placement-shade);
  stroke: var(--placement-shade-line);
  stroke-width: 4;
  pointer-events: none;
}

.terrain-robber-shade {
  fill: rgba(10, 16, 15, 0.24);
  stroke: rgba(6, 10, 9, 0.16);
  stroke-width: 4;
  pointer-events: none;
}

.terrain-icon,
.resource-glyph,
.resource-symbol {
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.terrain-icon {
  color: var(--terrain-icon);
  pointer-events: none;
}

.terrain-icon .soft-fill,
.resource-glyph .soft-fill,
.resource-symbol .soft-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.5;
}

.terrain-icon .grain-kernel,
.terrain-icon .grain-stem,
.resource-glyph .grain-kernel,
.resource-glyph .grain-stem,
.resource-symbol .grain-kernel,
.resource-symbol .grain-stem {
  stroke-width: 3;
}

.terrain-icon .lucide-wheat-icon,
.resource-glyph .lucide-wheat-icon,
.resource-symbol .lucide-wheat-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

.terrain-icon .sheep-fill,
.resource-glyph .sheep-fill,
.resource-symbol .sheep-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.2;
}

.terrain-icon .sheep-outline,
.resource-glyph .sheep-outline,
.resource-symbol .sheep-outline {
  stroke-width: 2.85;
}

.terrain-icon .sheep-mark,
.resource-glyph .sheep-mark,
.resource-symbol .sheep-mark {
  fill: currentColor;
  stroke: none;
}

.terrain-icon .sheep-game-icon,
.resource-glyph .sheep-game-icon,
.resource-symbol .sheep-game-icon {
  fill: currentColor;
  stroke: none;
  opacity: 0.62;
}

.terrain-label {
  text-anchor: middle;
  font-size: 12px;
  font-weight: 800;
  fill: var(--terrain-text);
  pointer-events: none;
}

.number-chip .chip-halo {
  fill: none;
  stroke: var(--board-token-halo);
  stroke-width: 4;
  opacity: 0;
}

.number-chip .chip-core {
  fill: var(--board-token-bg);
  stroke: transparent;
  stroke-width: 1.5;
}

.number-chip.rolled .chip-halo {
  opacity: 1;
}

.number-chip.rolled .chip-core {
  stroke: var(--board-token-line);
}

.number-chip.rolled.hot .chip-halo {
  stroke: rgba(183, 52, 52, 0.18);
}

.number-chip text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 19px;
  font-weight: 900;
  fill: var(--board-token-text);
}

.number-chip .pips {
  fill: var(--board-token-pips);
}

.number-chip .pips circle {
  shape-rendering: geometricPrecision;
}

.number-chip.hot text {
  fill: #b73434;
}

.number-chip.hot .pips {
  fill: #b73434;
}

.robber {
  opacity: 0.92;
  cursor: help;
  pointer-events: all;
  filter: none;
}

.robber-hit {
  fill: transparent;
  pointer-events: all;
}

.robber-mark {
  pointer-events: none;
}

.robber.is-on-resource,
.robber.is-on-token {
  opacity: 0.88;
  filter: none;
  mix-blend-mode: normal;
}

.robber:focus {
  outline: none;
}

.robber-screen-tooltip {
  position: absolute;
  top: var(--robber-tooltip-top, 12px);
  left: var(--robber-tooltip-left, 12px);
  z-index: 98;
  width: max-content;
  max-width: min(244px, calc(100% - 16px));
  display: grid;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 10%, transparent), rgba(0, 0, 0, 0.14)),
    color-mix(in srgb, var(--surface) 91%, #020707 9%);
  color: var(--text);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.36),
    0 0 16px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(6px) scale(0.96);
  transform-origin: left top;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.robber-screen-tooltip::after {
  content: "";
  position: absolute;
  top: var(--robber-tooltip-tail-top, 24px);
  left: -5px;
  width: 9px;
  height: 9px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 91%, #020707 9%);
  transform: translateY(-50%) rotate(45deg);
}

.robber-screen-tooltip-title {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.robber-screen-tooltip-body {
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 10px;
  font-weight: 750;
  line-height: 1.22;
}

.board-stage:has(.robber:hover) .robber-screen-tooltip,
.board-stage:has(.robber *:hover) .robber-screen-tooltip,
.board-stage:has(.robber-hit:hover) .robber-screen-tooltip,
.board-stage:has(.robber:focus) .robber-screen-tooltip,
.board-stage:has(.robber:focus-within) .robber-screen-tooltip,
.board-stage:has(.robber:focus-visible) .robber-screen-tooltip,
.board-stage.is-robber-tooltip-visible .robber-screen-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.robber-ground-shadow {
  fill: rgba(2, 5, 4, 0.34);
  stroke: none;
}

.robber-cast-shadow {
  fill: rgba(2, 5, 4, 0.2);
  stroke: none;
}

.robber-head-shadow {
  opacity: 0.78;
}

.robber.is-on-resource .robber-ground-shadow,
.robber.is-on-token .robber-ground-shadow {
  fill: rgba(2, 5, 4, 0.25);
}

.robber.is-on-resource .robber-cast-shadow,
.robber.is-on-token .robber-cast-shadow {
  fill: rgba(2, 5, 4, 0.16);
}

.robber.is-on-resource .robber-body,
.robber.is-on-resource .robber-head,
.robber.is-on-resource .robber-beanie,
.robber.is-on-resource .robber-beanie-band,
.robber.is-on-token .robber-body,
.robber.is-on-token .robber-head,
.robber.is-on-token .robber-beanie,
.robber.is-on-token .robber-beanie-band {
  stroke: rgba(3, 7, 6, 0.66);
  stroke-width: 0.95;
}

.robber.is-on-resource .robber-beanie-rib,
.robber.is-on-token .robber-beanie-rib {
  stroke: rgba(255, 255, 255, 0.16);
}

.robber-body,
.robber-head,
.robber-beanie,
.robber-beanie-band {
  fill: url("#robberBodyGradient");
  stroke: rgba(3, 7, 6, 0.62);
  stroke-width: 1;
  stroke-linejoin: round;
}

.robber-beanie {
  fill: rgba(0, 0, 0, 0.8);
}

.robber-beanie-band {
  fill: rgba(0, 0, 0, 0.88);
}

.robber-beanie-rib {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.edge-field {
  pointer-events: none;
}

.edge-base,
.edge-base-highlight,
.edge-junctions circle {
  fill: none;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

.edge-base {
  stroke: var(--board-line);
  stroke-width: 4.7;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.edge-junctions circle {
  fill: var(--board-line);
  stroke: none;
}

.edge-base-highlight {
  stroke: var(--board-line-highlight);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.edge.has-road {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.edge.valid-road {
  cursor: pointer;
}

.edge-road-outline,
.edge-road-glow,
.edge-road {
  stroke-linecap: round;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.edge-road-outline {
  stroke: var(--road-outline-color, var(--piece-road-outline));
  stroke-width: 12.8;
  opacity: 1;
}

.edge-road-glow {
  stroke: var(--road-color);
  stroke-width: 14.5;
  opacity: 0;
  filter: none;
  transition: opacity 220ms ease;
}

.edge-road {
  stroke-width: 9.35;
  transition: stroke-width 220ms ease;
}

.edge.has-road:hover {
  transform: scale(1.018);
}

.edge.has-road:hover .edge-road-glow {
  opacity: 0.28;
}

.edge.has-road:hover .edge-road {
  stroke-width: 10.5;
}

.edge.has-road:hover .edge-road-outline {
  stroke-width: 13.3;
}

.edge.has-road.is-selected {
  transform: translateY(1px) scale(1.02);
  filter: none;
}

.edge.has-road.is-selected .edge-road-outline {
  stroke-width: 13.6;
}

.edge.has-road.is-selected .edge-road-glow {
  opacity: 0.34;
}

.edge.has-road.is-selected .edge-road {
  stroke-width: 10.9;
}

.edge.has-road.is-just-placed .edge-road-outline,
.edge.has-road.is-just-placed .edge-road-glow,
.edge.has-road.is-just-placed .edge-road {
  animation: road-place-float 560ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.edge.has-road.is-just-placed .edge-road-glow {
  animation-delay: 24ms;
}

.edge.has-road.is-just-placed .edge-road {
  animation-delay: 42ms;
}

.edge-road-choice,
.edge-road-choice-aura {
  stroke: var(--target-line);
  stroke-linecap: round;
  pointer-events: none;
}

.edge-road-choice-aura {
  stroke-width: 18;
  opacity: 0.28;
  animation: setup-road-aura 3000ms ease-in-out infinite;
  filter: none;
}

.edge-road-choice {
  stroke-width: 9;
  opacity: 0.94;
  animation: setup-road-glow 3000ms ease-in-out infinite;
  filter: none;
}

.edge-hit {
  stroke: transparent;
  stroke-width: 34;
  stroke-linecap: round;
  pointer-events: none;
}

.edge.valid-road .edge-hit {
  cursor: pointer;
  pointer-events: stroke;
  stroke-width: 34;
}

@media (hover: hover) and (pointer: fine) {
  .edge.valid-road:hover .edge-road-choice-aura {
    opacity: 0.42;
    stroke: color-mix(in srgb, var(--target-line) 58%, var(--accent-strong));
    stroke-width: 23;
    filter: none;
  }

  .edge.valid-road:hover .edge-road-choice {
    opacity: 1;
    stroke: color-mix(in srgb, var(--target-line) 60%, var(--accent-strong));
    stroke-width: 11;
    filter: none;
  }
}

.edge.has-road .edge-road {
  stroke-width: 10.2;
}

.edge.has-road .edge-road-glow {
  stroke-width: 13.6;
}

.edge.is-selected .edge-road-choice-aura {
  opacity: 0.36;
  stroke-width: 22;
}

.edge.is-selected .edge-road-choice {
  opacity: 1;
  stroke: color-mix(in srgb, var(--target-line) 62%, var(--accent-strong));
  stroke-width: 11;
}

.board-item-info {
  pointer-events: none;
  filter: none;
}

.board-item-info rect {
  fill: color-mix(in srgb, var(--surface) 92%, transparent);
  stroke: var(--panel-line);
  stroke-width: 2;
}

.board-item-info text {
  fill: var(--text);
  font-weight: 900;
  letter-spacing: 0;
  dominant-baseline: middle;
}

.board-item-info-owner {
  font-size: 12px;
}

.board-item-info-type {
  font-size: 13px;
  opacity: 0.72;
}

.placement-picker {
  pointer-events: all;
  filter: none;
}

.placement-option {
  cursor: pointer;
}

.placement-option-hit {
  fill: var(--placement-button-bg);
  stroke: var(--placement-button-line);
  stroke-width: 2;
}

.placement-option-icon {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.placement-option:hover .placement-option-hit,
.placement-option:focus-visible .placement-option-hit {
  fill: color-mix(in srgb, var(--placement-button-bg) 86%, var(--accent-soft));
  stroke: color-mix(in srgb, var(--target-line) 62%, var(--accent-strong));
  stroke-width: 3;
}

.placement-piece-body {
  fill: var(--target-line);
  stroke: color-mix(in srgb, var(--surface) 38%, transparent);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.placement-piece-detail {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.placement-option:hover .placement-piece-body,
.placement-option:focus-visible .placement-piece-body {
  fill: color-mix(in srgb, var(--target-line) 82%, var(--accent-strong));
  stroke-width: 2;
}

.placement-option:hover .placement-piece-detail,
.placement-option:focus-visible .placement-piece-detail {
  stroke-width: 3.1;
}

.placement-road-outline,
.placement-road-body {
  stroke-linecap: round;
}

.placement-road-outline {
  stroke: color-mix(in srgb, var(--surface) 78%, transparent);
  stroke-width: 11;
}

.placement-road-body {
  stroke: var(--target-line);
  stroke-width: 7;
}

.placement-option:hover .placement-road-body,
.placement-option:focus-visible .placement-road-body {
  stroke: color-mix(in srgb, var(--target-line) 82%, var(--accent-strong));
  stroke-width: 8;
}

.vertex-target {
  cursor: default;
  pointer-events: all;
}

.vertex-target.is-valid {
  cursor: pointer;
}

.vertex-hit {
  fill: rgba(255, 255, 255, 0.001);
  r: 15px;
  stroke: transparent;
  pointer-events: all;
}

.vertex-node {
  fill: var(--empty-node);
  stroke: var(--empty-node-line);
  stroke-width: 2;
}

.vertex-focus-ring {
  fill: color-mix(in srgb, var(--target-node) 42%, var(--accent-soft));
  stroke: color-mix(in srgb, var(--target-line) 54%, var(--accent-strong));
  stroke-width: 3;
  opacity: 0;
  pointer-events: none;
  filter: none;
  transition: opacity 140ms ease;
}

.vertex-target.is-valid .vertex-node {
  fill: var(--target-node);
  stroke: var(--target-line);
  stroke-width: 2;
  opacity: 0.82;
  animation: setup-node-glow 3000ms ease-in-out infinite;
}

.vertex-target.is-valid:hover .vertex-node {
  fill: color-mix(in srgb, var(--target-node) 50%, var(--accent-soft));
  opacity: 1;
  stroke: color-mix(in srgb, var(--target-line) 52%, var(--accent-strong));
  stroke-width: 3.5;
  r: 8px;
}

.vertex-target.is-valid:hover .vertex-focus-ring,
.vertex-target.is-selected .vertex-focus-ring {
  opacity: 1;
}

.vertex-target.is-selected .vertex-node {
  fill: color-mix(in srgb, var(--target-node) 42%, var(--accent-strong));
  stroke: color-mix(in srgb, var(--target-line) 58%, var(--accent-strong));
  stroke-width: 4;
  opacity: 1;
  r: 8.5px;
}

.piece-halo {
  display: none;
  fill: none;
  stroke: transparent;
  stroke-width: 0;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.piece {
  transform-box: fill-box;
  transform-origin: center;
  cursor: default;
  transition: transform 220ms ease;
}

.piece.valid-city {
  cursor: pointer;
}

.piece.is-just-placed {
  animation: piece-place-float 580ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.piece-hit {
  fill: rgba(255, 255, 255, 0.001);
  stroke: transparent;
  pointer-events: none;
}

.piece.valid-city .piece-hit {
  pointer-events: all;
}

.piece.valid-city:hover {
  transform: scale(1.035);
  filter: none;
}

.piece.is-selected {
  transform: translateY(1px) scale(1.035);
  filter: none;
}

.piece-body {
  stroke: var(--piece-outline-color);
  stroke-width: 2.6;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke-width 220ms ease;
}

.piece-shine {
  fill: url("#pieceShine");
  stroke: none;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0.74;
}

.piece-detail {
  fill: none;
  stroke: var(--piece-detail-color);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke-width 220ms ease;
}

.piece.city .piece-body {
  stroke-width: 2.6;
}

.piece.city .piece-detail {
  stroke-width: 2.6;
}

.city-upgrade-halo {
  fill: color-mix(in srgb, var(--piece-color) 18%, transparent);
  stroke: color-mix(in srgb, var(--piece-color) 72%, transparent);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.piece.valid-city .piece-body {
  cursor: pointer;
}

.piece.valid-city .city-upgrade-halo {
  opacity: 0.5;
  animation: city-upgrade-pulse 2400ms ease-in-out infinite;
}

.piece.valid-city:hover .city-upgrade-halo,
.piece.valid-city.is-selected .city-upgrade-halo {
  opacity: 0.86;
}

.piece.valid-city:hover .piece-body,
.piece.is-selected .piece-body {
  stroke-width: 2.9;
}

.piece.valid-city:hover .piece-detail,
.piece.is-selected .piece-detail {
  stroke-width: 3;
}

.port line {
  stroke: var(--port-line);
  stroke-linecap: round;
  stroke-width: 2.6;
}

.port-badge rect {
  fill: var(--port-bg);
  stroke: var(--port-border);
  stroke-width: 1.7;
}

.port text {
  fill: var(--port-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
  text-anchor: start;
  text-rendering: geometricPrecision;
  dominant-baseline: middle;
}

.port .port-name {
  font-size: 12.7px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.port .port-rate {
  fill: color-mix(in srgb, var(--port-text) 82%, var(--accent-strong));
  font-size: 12.2px;
  font-weight: 780;
  letter-spacing: 0.35px;
}

.port .resource-glyph {
  color: var(--port-text);
  opacity: 0.92;
  stroke-width: 2.65;
}

.side-panel {
  display: grid;
  gap: var(--space-5);
}

.side-hint-slot {
  display: none;
  min-width: 0;
}

.panel-card {
  contain: layout paint style;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15, 26, 22, 0.09);
  padding: var(--ui-card-padding);
}

@supports (content-visibility: auto) {
  .side-panel > .panel-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }

  .side-panel > .chat-card,
  .side-panel > .log-card {
    contain-intrinsic-size: auto 300px;
  }
}

.panel-card h2,
.mini-section h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.panel-card-head,
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.panel-card-head small,
.section-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  text-align: right;
}

.section-head h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}

.build-card,
.hand-card,
.trade-summary-card {
  display: grid;
  gap: var(--space-4);
}

.chat-card,
.log-card {
  padding: 0;
  overflow: hidden;
}

.side-panel-resize {
  display: none;
}

body.is-side-panel-resizing {
  cursor: ns-resize;
  user-select: none;
}

body.is-side-panel-resizing * {
  cursor: ns-resize !important;
}

.collapsible-head {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.chat-card.is-collapsed .collapsible-head,
.log-card.is-collapsed .collapsible-head {
  min-height: 62px;
  grid-template-columns: minmax(56px, max-content) minmax(0, 1fr) 32px;
  gap: 8px;
  padding-block: 8px;
}

.chat-head-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-head-title small {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.log-card .chat-head-title small {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
  font-weight: 760;
  letter-spacing: 0;
}

.chat-preview,
.log-preview {
  display: none;
  min-width: 0;
  max-height: 4.2em;
  align-content: start;
  gap: 3px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 220ms ease;
}

.chat-card.is-collapsed .chat-preview,
.log-card.is-collapsed .log-preview {
  display: grid;
  align-content: center;
  opacity: 1;
  transform: translateY(0);
}

.log-card.is-collapsed .log-preview {
  align-content: start;
}

.chat-preview span,
.log-preview,
.panel-preview-row,
.panel-preview-copy {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.22;
}

.panel-preview-row {
  --preview-color: color-mix(in srgb, var(--muted) 62%, transparent);
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.panel-preview-row::before {
  content: "";
  width: 3px;
  min-height: 1.1em;
  border-radius: 999px;
  background: var(--preview-color);
  opacity: 0.82;
}

.panel-preview-copy {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.chat-preview strong,
.panel-preview-copy strong {
  display: inline-block;
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--text);
  font-weight: 950;
}

.chat-preview-empty {
  align-self: center;
  font-size: 12px;
  font-weight: 850;
}

.collapse-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent);
  transition: transform 180ms ease;
}

.chat-card.is-collapsed .collapse-arrow,
.log-card.is-collapsed .collapse-arrow {
  grid-column: 3;
}

.collapse-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-card.is-collapsed .collapse-arrow,
.log-card.is-collapsed .collapse-arrow {
  transform: rotate(-90deg);
}

.chat-body,
.log-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
  max-height: 268px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 240ms ease,
    opacity 180ms ease,
    padding 240ms ease,
    transform 240ms ease;
}

.chat-card.is-collapsed .chat-body,
.log-card.is-collapsed .log-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.chat-messages {
  min-height: 112px;
  max-height: 184px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: auto;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 76%, transparent), transparent 72%),
    var(--surface-3);
}

.chat-empty {
  align-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.chat-message {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  padding: 1px 0;
}

.chat-message::before {
  content: "";
  width: 3px;
  min-height: 1.25em;
  border-radius: 999px;
  background: var(--player-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--player-color) 18%, transparent);
}

.chat-message-line {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.chat-report-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
}

.chat-report-button svg {
  width: 13px;
  height: 13px;
}

.chat-message strong {
  display: inline-block;
  max-width: 10ch;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  line-height: inherit;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.chat-message-text {
  color: var(--muted);
}

.chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.chat-compose input {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  caret-color: var(--accent);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.chat-compose input:focus,
.chat-compose input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--surface-2);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 0 0 999px color-mix(in srgb, var(--accent) 3%, transparent);
}

.chat-compose button {
  min-width: 0;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 16%, transparent), rgba(0, 0, 0, 0.12)),
    var(--accent);
  color: #ffffff;
  box-shadow:
    0 10px 18px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.chat-compose button:not(:disabled):hover,
.chat-compose button:not(:disabled):focus-visible {
  outline: none;
  transform: translateY(-1px);
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 22%, transparent), rgba(0, 0, 0, 0.08)),
    var(--accent-strong);
  box-shadow:
    0 12px 20px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.chat-compose svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: color-mix(in srgb, currentColor 28%, transparent);
  stroke: currentColor;
  stroke-width: 2.25;
  transform: translateY(1px);
}

.bank-strip {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 34px 1px max-content;
  align-items: center;
  gap: 10px;
}

.bank-strip::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 42px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--line-strong) 70%, transparent) 18%,
    color-mix(in srgb, var(--line-strong) 86%, transparent) 50%,
    color-mix(in srgb, var(--line-strong) 70%, transparent) 82%,
    transparent
  );
}

.bank-card {
  padding: 0 2px 2px;
}

.bank-emblem {
  grid-column: 1;
  grid-row: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.bank-emblem svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-deck-grid {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, 36px);
  justify-content: start;
  gap: 7px;
  padding-top: 5px;
  padding-bottom: 3px;
  margin-bottom: -3px;
}

.stacked-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  aspect-ratio: 0.72;
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--card-ink, var(--text));
}

.stacked-card.is-stack::before,
.stacked-card.is-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid color-mix(in srgb, currentColor 36%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--card-color, var(--surface-3)) 88%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.stacked-card.is-stack::before {
  top: -6px;
  bottom: 6px;
  z-index: -2;
}

.stacked-card.is-stack::after {
  top: -3px;
  bottom: 3px;
  z-index: -1;
}

.stacked-card-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
    var(--card-color, var(--surface-3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent);
}

.stacked-card-count {
  position: absolute;
  z-index: 4;
  top: -2px;
  right: -3px;
  min-width: 20px;
  min-height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
}

.stacked-card-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.stacked-card-icon svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.stacked-card-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.resource-flight-card {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
    var(--card-color, var(--surface-3));
  color: var(--card-ink, var(--text));
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  contain: layout paint style;
  will-change: transform, opacity;
}

.resource-flight-card > span {
  display: grid;
  place-items: center;
}

.resource-flight-card .resource-symbol {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.resource-flight-card.is-mystery {
  --card-color: color-mix(in srgb, var(--surface-3) 82%, var(--accent) 18%);
  --card-ink: color-mix(in srgb, var(--text) 86%, var(--accent-strong));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%),
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-soft) 28%, transparent) 0 4px,
      transparent 4px 9px
    ),
    var(--card-color);
}

.resource-flight-card.is-steal {
  z-index: 126;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.34),
    0 0 18px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.resource-flight-card .question-symbol {
  width: 21px;
  height: 21px;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stacked-card.brick {
  --card-color: var(--resource-brick);
  --card-ink: #f9f1ed;
}

.stacked-card.timber {
  --card-color: var(--resource-timber);
  --card-ink: #eff8f1;
}

.stacked-card.grain {
  --card-color: var(--resource-grain);
  --card-ink: #fff8df;
}

.stacked-card.wool {
  --card-color: var(--resource-wool);
  --card-ink: #f2faed;
}

.stacked-card.ore {
  --card-color: var(--resource-ore);
  --card-ink: #f2f5f6;
}

.stacked-card.development {
  --card-color: #7664b9;
  --card-ink: #f4f1ff;
}

.resource-flight-card.brick {
  --card-color: var(--resource-brick);
  --card-ink: #f9f1ed;
}

.resource-flight-card.timber {
  --card-color: var(--resource-timber);
  --card-ink: #eff8f1;
}

.resource-flight-card.grain {
  --card-color: var(--resource-grain);
  --card-ink: #fff8df;
}

.resource-flight-card.wool {
  --card-color: var(--resource-wool);
  --card-ink: #f2faed;
}

.resource-flight-card.ore {
  --card-color: var(--resource-ore);
  --card-ink: #f2f5f6;
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cost-card {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  text-align: left;
  background: var(--surface-3);
}

.cost-card.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.cost-card.is-short:not(:disabled) {
  opacity: 0.76;
}

.cost-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
}

.build-symbol,
.dev-symbol {
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.build-symbol path {
  stroke: var(--piece-outline);
  stroke-width: 2.7;
  stroke-linejoin: round;
}

.build-symbol-road line {
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
}

.build-symbol-detail {
  fill: none;
  stroke: var(--piece-detail);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dev-symbol rect,
.dev-symbol circle,
.dev-symbol path {
  vector-effect: non-scaling-stroke;
}

.dev-symbol-victory path {
  fill: currentColor;
  stroke-width: 1.4;
}

.pickaxe-symbol .at-pickaxe-icon,
.pickaxe-symbol path.at-pickaxe-fill {
  fill: currentColor;
  stroke: none;
}

.pickaxe-symbol .at-pickaxe-icon {
  opacity: 0.86;
}

.cost-card-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.cost-card-main strong {
  font-size: 13px;
  line-height: 1.1;
}

.cost-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cost-pip {
  min-width: 24px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.cost-pip .resource-symbol {
  width: 14px;
  height: 14px;
}

.cost-pip strong {
  font-size: 11px;
  line-height: 1;
}

.dev-hand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(54px, 68px));
  justify-content: start;
  gap: 8px;
}

.dev-hand-card {
  min-width: 0;
  aspect-ratio: 0.72;
  min-height: 78px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip-bg);
  text-align: center;
}

.dev-hand-icon,
.dev-detail-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--chip-icon);
}

.dev-hand-card strong {
  font-size: 18px;
  line-height: 1;
}

.dev-hand-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.dev-hand {
  display: grid;
  gap: 8px;
}

.dev-hand-grid {
  grid-template-columns: repeat(auto-fill, minmax(60px, 68px));
}

.dev-hand-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  cursor: pointer;
}

.dev-hand-card.is-stack::before,
.dev-hand-card.is-stack::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 7px;
  left: 7px;
  height: 5px;
  border: 1px solid color-mix(in srgb, #7664b9 50%, var(--line));
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, #7664b9 72%, var(--surface));
}

.dev-hand-card.is-stack::before {
  top: -5px;
  opacity: 0.68;
}

.dev-hand-card.is-stack::after {
  top: -9px;
  opacity: 0.42;
}

.dev-hand-count {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
}

.dev-hand-card.is-selected,
.dev-hand-card:not(:disabled):hover,
.dev-hand-card:not(:disabled):focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.dev-hand-icon,
.dev-detail-icon {
  background: var(--surface);
  color: var(--accent);
}

.dev-hand-icon .dev-symbol {
  width: 22px;
  height: 22px;
}

.dev-card-detail {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 8px;
  background: var(--surface-2);
}

.dev-detail-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
}

.dev-detail-head strong,
.dev-detail-head small {
  display: block;
  min-width: 0;
}

.dev-detail-head strong {
  font-size: 13px;
}

.dev-detail-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.dev-detail-close {
  width: 28px;
  min-height: 28px;
  border-radius: 999px;
}

.dev-detail-close svg {
  width: 14px;
  height: 14px;
}

.dev-card-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.trade-rate-list {
  display: grid;
  gap: 6px;
}

.trade-rate-row {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.trade-rate-row.is-improved {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-3));
}

.trade-rate-resource {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trade-rate-resource .resource-symbol {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.trade-rate-resource strong {
  font-size: 12px;
}

.trade-rate-value {
  min-width: 40px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.trade-rate-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.status-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.dice {
  min-width: 92px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--dice-bg);
  color: var(--dice-text);
  border: 1px solid var(--line);
  font-weight: 900;
}

.toast {
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  border: 1px solid var(--toast-line);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 750;
}

.trade-card-icon svg,
.trade-toggle-icon svg {
  width: 19px;
  height: 19px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.action-button {
  min-height: 58px;
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: left;
}

.action-button span {
  font-size: 14px;
}

.action-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.action-button.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.primary,
.secondary,
.nav-button,
.icon-button,
.download-row-action,
.saved-library-back,
.saved-tool-chip,
.settings-tabbar button,
.game-menu-actions button,
.friend-icon-action,
.inline-icon-button {
  transition:
    background var(--motion-standard),
    border-color var(--motion-standard),
    color var(--motion-standard),
    box-shadow var(--motion-standard),
    transform var(--motion-standard);
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.primary:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent-strong) 72%, var(--accent));
  background: color-mix(in srgb, var(--accent) 88%, var(--accent-strong));
}

.secondary {
  background: var(--control-strong-bg);
  border-color: var(--line-strong);
  color: var(--control-strong-text);
}

.secondary:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--line-strong) 72%, var(--accent));
}

.primary:focus-visible,
.secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.wide {
  width: 100%;
  margin-top: var(--space-4);
}

.hint,
.empty,
.bot-thinking {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.bot-thinking {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  font-weight: 800;
}

.mini-section {
  border-top: 1px solid var(--line);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

.card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.dev-card {
  min-height: 52px;
  display: grid;
  align-content: center;
  text-align: left;
}

.dev-card span {
  font-size: 13px;
}

.dev-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.trade-section {
  display: grid;
  gap: 8px;
}

.trade-toggle {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  text-align: left;
  background: var(--surface-2);
}

.trade-toggle-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
}

.trade-toggle strong,
.trade-toggle small {
  display: block;
}

.trade-toggle strong {
  font-size: 14px;
}

.trade-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.trade-open-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.trade-toggle-chevron {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.trade-builder {
  display: grid;
  gap: 7px;
  padding-top: 0;
}

.trade-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trade-tabs button {
  min-height: 36px;
  background: var(--surface);
  font-size: 13px;
}

.trade-tabs button.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.trade-builder-grid {
  display: grid;
  gap: 9px;
}

.trade-hand {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, 0.36fr) minmax(0, max-content);
  align-items: center;
  gap: 8px;
}

.trade-hand-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, 36px);
  justify-content: start;
  gap: 7px;
  padding-top: 5px;
}

.trade-hand-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  aspect-ratio: 0.72;
  min-width: 0;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card-ink, var(--text));
  touch-action: manipulation;
}

.trade-hand-card.is-stack::before,
.trade-hand-card.is-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid color-mix(in srgb, currentColor 36%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--card-color, var(--surface-3)) 88%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.trade-hand-card.is-stack::before {
  top: -6px;
  bottom: 6px;
  z-index: -2;
}

.trade-hand-card.is-stack::after {
  top: -3px;
  bottom: 3px;
  z-index: -1;
}

.trade-hand-card:not(:disabled):hover,
.trade-hand-card:not(:disabled):focus-visible,
.trade-hand-card.is-selected {
  outline: none;
  color: color-mix(in srgb, var(--card-ink, var(--text)) 86%, var(--accent-strong) 14%);
  filter: saturate(1.08) brightness(1.05);
  transform: translateY(-1px);
}

.trade-hand-card:not(:disabled):hover .trade-hand-card-face,
.trade-hand-card:not(:disabled):focus-visible .trade-hand-card-face,
.trade-hand-card.is-selected .trade-hand-card-face {
  border-color: color-mix(in srgb, var(--accent) 62%, white 18%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.trade-hand-card.is-blocked,
.trade-hand-card:disabled:not(.is-selected) {
  opacity: 0.48;
}

.trade-hand-card-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
    var(--card-color, var(--surface-3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent);
}

.trade-hand-card-count {
  position: absolute;
  z-index: 4;
  top: -2px;
  right: -3px;
  min-width: 20px;
  min-height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
}

.trade-hand-card-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.trade-hand-card.brick {
  --card-color: var(--resource-brick);
  --card-ink: #f9f1ed;
}

.trade-hand-card.timber {
  --card-color: var(--resource-timber);
  --card-ink: #eff8f1;
}

.trade-hand-card.grain {
  --card-color: var(--resource-grain);
  --card-ink: #fff8df;
}

.trade-hand-card.wool {
  --card-color: var(--resource-wool);
  --card-ink: #f2faed;
}

.trade-hand-card.ore {
  --card-color: var(--resource-ore);
  --card-ink: #f2f5f6;
}

.trade-hand-card-icon .resource-symbol {
  width: 18px;
  height: 18px;
}

.trade-hand-card > strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.trade-hand-selected {
  position: absolute;
  z-index: 5;
  right: -3px;
  bottom: -5px;
  min-width: 19px;
  min-height: 17px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--control-strong-text);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.26);
}

.trade-exchange-strip {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.trade-exchange-strip p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
}

.trade-exchange-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.trade-selected-pile {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.trade-selected-pile > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.trade-selected-cards {
  min-height: 51px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 5px;
  border: 1px dashed color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.trade-selected-cards small {
  width: 100%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.trade-selected-chip {
  position: relative;
  z-index: 0;
  isolation: isolate;
  aspect-ratio: 0.72;
  width: 36px;
  min-height: 46px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card-ink, var(--chip-icon));
  touch-action: manipulation;
}

.trade-selected-chip.is-stack::before,
.trade-selected-chip.is-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid color-mix(in srgb, currentColor 36%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--card-color, var(--surface-3)) 88%, var(--surface));
}

.trade-selected-chip.is-stack::before {
  top: -6px;
  bottom: 6px;
  z-index: -2;
}

.trade-selected-chip.is-stack::after {
  top: -3px;
  bottom: 3px;
  z-index: -1;
}

.trade-selected-chip-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
    var(--card-color, var(--surface-3));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 0 color-mix(in srgb, currentColor 30%, transparent);
}

.trade-selected-chip-count {
  position: absolute;
  z-index: 4;
  top: -2px;
  right: -3px;
  min-width: 20px;
  min-height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.trade-selected-chip-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.trade-selected-chip.brick {
  --card-color: var(--resource-brick);
  --card-ink: #f9f1ed;
}

.trade-selected-chip.timber {
  --card-color: var(--resource-timber);
  --card-ink: #eff8f1;
}

.trade-selected-chip.grain {
  --card-color: var(--resource-grain);
  --card-ink: #fff8df;
}

.trade-selected-chip.wool {
  --card-color: var(--resource-wool);
  --card-ink: #f2faed;
}

.trade-selected-chip.ore {
  --card-color: var(--resource-ore);
  --card-ink: #f2f5f6;
}

.trade-selected-chip .resource-symbol {
  width: 18px;
  height: 18px;
}

.trade-selected-chip strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.trade-exchange-arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.trade-exchange-arrow svg {
  width: 24px;
  height: 24px;
}

.trade-card-group {
  display: grid;
  gap: 7px;
}

.trade-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.trade-card-head strong {
  font-size: 13px;
}

.trade-card-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.trade-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.trade-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip-bg);
}

.trade-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.trade-card.is-blocked:not(.is-selected) {
  opacity: 0.62;
}

.trade-card-main {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.trade-card-main strong,
.trade-card-main small {
  display: block;
  min-width: 0;
}

.trade-card-main strong {
  font-size: 10.5px;
  line-height: 1.1;
}

.trade-card-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.1;
}

.trade-card-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--chip-icon);
}

.trade-card-icon.brick {
  background: var(--resource-brick);
}

.trade-card-icon.timber {
  background: var(--resource-timber);
}

.trade-card-icon.grain {
  background: var(--resource-grain);
}

.trade-card-icon.wool {
  background: var(--resource-wool);
}

.trade-card-icon.ore {
  background: var(--resource-ore);
}

.trade-card-counter {
  display: grid;
  grid-template-columns: 24px minmax(18px, 1fr) 24px;
  align-items: center;
  gap: 3px;
}

.trade-card-counter button {
  min-height: 24px;
  width: 24px;
  padding: 0;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.trade-card-counter strong {
  text-align: center;
  font-size: 13px;
}

.trade-submit {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  isolation: isolate;
}

.trade-submit-label,
.trade-submit-shortcut {
  position: relative;
  z-index: 3;
}

.trade-submit-label {
  min-width: 0;
}

.trade-submit-shortcut {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: currentColor;
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.trade-submit-shortcut.is-space {
  width: 38px;
}

.trade-submit-shortcut .spacebar-glyph {
  width: 28px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trade-submit:disabled .trade-submit-shortcut {
  opacity: 0.58;
}

.trade-notice {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
}

.trade-dialog-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}

.trade-dialog-body::-webkit-scrollbar {
  width: 6px;
}

.trade-dialog-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

.board-hint-area.is-trading {
  z-index: 17;
}

.trade-overlay {
  position: absolute;
  inset: 0;
  z-index: 16;
  --trade-overlay-gap: 14px;
  display: grid;
  align-items: end;
  justify-items: center;
  padding:
    var(--trade-overlay-gap)
    var(--trade-overlay-gap)
    calc(var(--board-action-hud-height, 58px) + var(--board-floating-inset, 14px) + var(--trade-overlay-gap))
    var(--trade-overlay-gap);
  background: rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

.trade-overlay-card {
  position: relative;
  width: min(760px, calc(100% - 24px));
  height: min(620px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
}

.trade-overlay-card.is-incoming {
  width: min(520px, calc(100% - 18px));
  height: auto;
  max-height: calc(100% - 8px);
  grid-template-rows: auto auto;
}

.trade-overlay-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.trade-overlay-head span {
  display: block;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.trade-overlay-head h2 {
  margin: 4px 0 0;
  font-size: 21px;
  line-height: 1.08;
}

.trade-overlay-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.28;
}

.trade-overlay-close {
  width: 36px;
  min-height: 36px;
  border-radius: 9px;
}

.trade-overlay-close svg {
  width: 18px;
  height: 18px;
}

.trade-overlay-card > .trade-notice,
.trade-overlay-card > .incoming-trade-panel {
  min-height: 0;
  overflow: hidden;
  padding: 10px;
}

.trade-overlay-card.is-incoming .trade-overlay-head {
  padding: 12px 13px 10px;
}

.trade-overlay-card.is-incoming .trade-overlay-head h2 {
  margin-top: 3px;
  font-size: 19px;
}

.trade-overlay-card.is-incoming .trade-overlay-head p {
  margin-top: 4px;
  font-size: 12px;
}

.trade-overlay-card.is-incoming > .incoming-trade-panel {
  gap: 10px;
  padding: 10px;
}

.trade-overlay .trade-notice {
  gap: 6px;
}

.trade-overlay .trade-tabs {
  gap: 6px;
}

.trade-overlay .trade-tabs button {
  min-height: 34px;
  border-radius: 9px;
  font-size: 13px;
  touch-action: manipulation;
}

.trade-overlay .trade-builder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trade-overlay .trade-card-group {
  gap: 9px;
}

.trade-overlay .trade-card-head {
  align-items: start;
}

.trade-overlay .trade-card-head strong {
  font-size: 14px;
}

.trade-overlay .trade-card-head span {
  font-size: 11px;
  line-height: 1.18;
}

.trade-overlay .trade-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.trade-overlay .trade-card {
  min-height: 118px;
  align-content: space-between;
  gap: 9px;
  padding: 9px;
  border-radius: 10px;
}

.trade-overlay .trade-card-main {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
  text-align: left;
}

.trade-overlay .trade-card-icon {
  width: 34px;
  height: 34px;
}

.trade-overlay .trade-card-main strong {
  font-size: 13px;
}

.trade-overlay .trade-card-main small {
  font-size: 10.5px;
}

.trade-overlay .trade-card-counter {
  grid-template-columns: 42px minmax(28px, 1fr) 42px;
  gap: 7px;
}

.trade-overlay .trade-card-counter button {
  width: 42px;
  min-height: 42px;
  border-radius: 10px;
  font-size: 21px;
  touch-action: manipulation;
}

.trade-overlay .trade-card-counter strong {
  font-size: 16px;
}

.trade-overlay .trade-submit,
.trade-overlay .trade-dialog-actions button {
  min-height: 40px;
  border-radius: 10px;
  touch-action: manipulation;
}

.trade-overlay .incoming-trade-panel {
  gap: 12px;
}

.trade-overlay .trade-offer-summary {
  gap: 9px;
}

.trade-overlay .trade-bundle {
  padding: 10px;
  border-radius: 9px;
}

.trade-overlay .trade-bundle span {
  font-size: 10px;
}

.trade-overlay .trade-bundle strong {
  font-size: 14px;
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--winner-color) 24%, transparent), transparent 42%),
    rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  overflow: hidden;
}

.game-over-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.game-over-confetti span {
  position: absolute;
  left: var(--x);
  top: -24px;
  width: var(--size);
  height: calc(var(--size) * 0.52);
  border-radius: 2px;
  background: var(--confetti-color);
  opacity: 0.88;
  transform: rotate(var(--rotate));
  animation: confetti-fall var(--duration) linear var(--delay) infinite;
}

.game-over-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 13px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--winner-color) 56%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--winner-color) 18%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--winner-color) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  text-align: left;
}

.game-over-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-color: color-mix(in srgb, var(--winner-color) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
}

.game-over-close:hover,
.game-over-close:focus-visible {
  border-color: color-mix(in srgb, var(--winner-color) 54%, var(--line));
  color: var(--text);
}

.game-over-card .eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--winner-color) 76%, var(--accent-strong));
}

.game-over-card h2 {
  margin: -4px 0 0;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.game-over-card > p:not(.eyebrow) {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.game-over-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.game-over-stats span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--winner-color) 22%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.game-over-stats strong {
  font-size: 24px;
  line-height: 1;
}

.game-over-stats small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.game-over-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.game-over-actions button {
  min-height: 42px;
  border-radius: 9px;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -20px, 0) rotate(var(--rotate));
  }
  100% {
    transform: translate3d(18px, calc(100vh + 60px), 0) rotate(calc(var(--rotate) + 540deg));
  }
}

.board-hint-controls .trade-tabs button {
  min-height: 30px;
  font-size: 12px;
}

.board-hint-controls .trade-builder {
  gap: 8px;
  padding-top: 0;
}

.board-hint-controls .trade-builder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board-hint-controls .trade-card-grid {
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: 5px;
}

.board-hint-controls .trade-card {
  gap: 5px;
  padding: 6px 4px;
  border-radius: 7px;
}

.board-hint-controls .trade-card-icon {
  width: 24px;
  height: 24px;
}

.board-hint-controls .trade-card-main strong {
  font-size: 10px;
}

.board-hint-controls .trade-card-main small {
  font-size: 9px;
}

.board-hint-controls .trade-card-counter {
  grid-template-columns: 21px minmax(16px, 1fr) 21px;
  gap: 2px;
}

.board-hint-controls .trade-card-counter button {
  width: 21px;
  min-height: 21px;
  border-radius: 6px;
  font-size: 14px;
}

.board-hint-controls .trade-submit {
  min-height: 31px;
}

.incoming-trade-panel {
  display: grid;
  gap: 8px;
}

.incoming-trade-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.incoming-trade-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 76px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.13)),
    color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.incoming-trade-side > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.incoming-resource-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: flex-start;
  padding-top: 5px;
}

.incoming-resource-card {
  position: relative;
  width: 36px;
  flex: 0 0 36px;
}

.incoming-resource-card-icon {
  position: relative;
  z-index: 3;
}

.incoming-resource-card-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.incoming-resource-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.incoming-trade-arrow {
  display: grid;
  place-items: center;
  color: var(--accent-strong);
}

.incoming-trade-arrow svg {
  width: 22px;
  height: 22px;
}

.incoming-trade-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}

.incoming-trade-actions button {
  min-height: 38px;
  border-radius: 9px;
}

.incoming-trade-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 16%, transparent), transparent 62%),
    var(--surface);
}

.incoming-trade-card-head {
  align-items: start;
}

.incoming-trade-card-head span {
  display: block;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.incoming-trade-card-head h2 {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.08;
}

.incoming-trade-card .incoming-trade-panel {
  gap: 8px;
}

.incoming-trade-card .incoming-trade-actions {
  gap: 5px;
  padding-top: 7px;
}

.incoming-trade-card .incoming-trade-actions button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

.trade-offer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.trade-bundle {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.trade-bundle span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.trade-bundle strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.12;
}

.trade-bundle-arrow {
  display: grid;
  place-items: center;
  color: var(--accent-strong);
}

.trade-bundle-arrow svg {
  width: 22px;
  height: 22px;
}

.trade-dialog-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 84%, transparent),
    color-mix(in srgb, var(--surface) 96%, transparent)
  );
}

.trade-dialog-actions button {
  min-height: 40px;
}

.bot-trade-result {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.bot-trade-result.is-accepted {
  border-color: color-mix(in srgb, #49d69b 54%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, #49d69b 12%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.bot-trade-result.is-declined {
  border-color: color-mix(in srgb, #ff7474 48%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, #ff7474 10%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.bot-trade-result-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.bot-trade-result-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 13%, var(--surface));
  color: var(--accent-strong);
}

.bot-trade-result.is-accepted .bot-trade-result-icon {
  color: #63e6ae;
}

.bot-trade-result.is-declined .bot-trade-result-icon {
  color: #ff9a9a;
}

.bot-trade-result-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bot-trade-result-head small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bot-trade-result-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
}

.bot-trade-result-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.36;
}

.bot-trade-result-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.bot-trade-result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.danger-subtle {
  border-color: color-mix(in srgb, #ff6b6b 42%, var(--line));
  color: #ffb4b4;
}

.discard-grid {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.discard-row {
  display: grid;
  grid-template-columns: 1fr 38px 34px 38px;
  gap: 6px;
  align-items: center;
}

.discard-row span {
  font-weight: 800;
}

.discard-row button {
  min-height: 34px;
  padding: 0;
}

.discard-row strong {
  text-align: center;
}

.piece-legend {
  position: relative;
}

.legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.piece-info-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.legend-info-button {
  width: 30px;
  min-height: 30px;
  border-radius: 999px;
  color: var(--muted);
}

.legend-info-button svg {
  width: 17px;
  height: 17px;
}

.piece-info-popover {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 15;
  width: min(286px, calc(100vw - 44px));
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
}

.piece-info-wrap:hover .piece-info-popover,
.piece-info-wrap:focus-within .piece-info-popover,
.piece-info-wrap.is-open .piece-info-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.piece-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.piece-info-head strong {
  font-size: 13px;
}

.piece-info-close {
  width: 26px;
  min-height: 26px;
  border-radius: 999px;
}

.piece-info-close svg {
  width: 14px;
  height: 14px;
}

.piece-info-popover p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.legend-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.legend-item strong,
.legend-item span {
  display: block;
  min-width: 0;
}

.legend-item strong {
  font-size: 12px;
  line-height: 1.1;
}

.legend-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.15;
}

.legend-icon {
  width: 34px;
  height: 34px;
  overflow: visible;
}

.legend-road-outline {
  stroke: var(--piece-road-outline);
  stroke-width: 12;
  stroke-linecap: round;
}

.legend-road-body {
  stroke-width: 7;
  stroke-linecap: round;
}

.legend-piece-halo {
  fill: none;
  stroke: var(--piece-halo);
  stroke-width: 7;
  stroke-linejoin: round;
}

.legend-piece-body {
  stroke: var(--piece-outline);
  stroke-width: 3.2;
  stroke-linejoin: round;
}

.legend-piece-detail {
  fill: none;
  stroke: var(--piece-detail);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.victim-list,
.resource-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.players {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.mobile-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 8px;
}

.mobile-player-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 5px 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.mobile-player-card.active {
  background: var(--active-row);
  border-color: var(--active-row-line);
}

.mobile-player-avatar {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.18) 36%, rgba(0, 0, 0, 0.18) 100%),
    var(--player-color);
  border: 1px solid color-mix(in srgb, var(--player-color) 56%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.mobile-player-avatar span {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44);
}

.mobile-player-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mobile-player-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-player-main small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.mobile-player-vp {
  min-width: 34px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.mobile-player-vp small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.mobile-player-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
  padding: 2px 1px 0;
}

.mobile-player-stat {
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  border-radius: 4px;
  outline: none;
  line-height: 1;
}

.mobile-player-stat::after {
  content: attr(data-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 12;
  width: max-content;
  max-width: 132px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 96%, #000);
  color: var(--text);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.12;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 4px) scale(0.96);
  transition:
    opacity 130ms ease,
    transform 130ms ease;
}

.mobile-player-stat::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 13;
  width: 8px;
  height: 8px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, #000);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) rotate(45deg) scale(0.96);
  transition:
    opacity 130ms ease,
    transform 130ms ease;
}

.mobile-player-stat:hover,
.mobile-player-stat:focus-visible {
  color: var(--text);
}

.mobile-player-stat:hover::after,
.mobile-player-stat:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.mobile-player-stat:hover::before,
.mobile-player-stat:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg) scale(1);
}

.mobile-player-stat:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.mobile-player-stat-icon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
  flex: 0 0 auto;
}

.mobile-player-stat-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-player-stat-icon .resource-symbol,
.mobile-player-stat-icon .dev-symbol {
  width: 14px;
  height: 14px;
}

.mobile-player-stat-icon .tiny-road-icon {
  width: 18px;
  height: 13px;
}

.mobile-player-stat.resources .mobile-player-stat-icon svg,
.mobile-player-stat.devs .mobile-player-stat-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}

.mobile-player-stat-icon .pickaxe-symbol {
  fill: currentColor;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.mobile-player-stat strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.player-row {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-3);
}

.player-row.active {
  background: var(--active-row);
  border-color: var(--active-row-line);
}

.player-identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.player-avatar {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.18) 34%, rgba(0, 0, 0, 0.18) 100%),
    var(--player-color);
  border: 2px solid color-mix(in srgb, var(--player-color) 50%, var(--surface));
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.36);
}

.player-avatar span {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
}

.player-name-block {
  min-width: 0;
}

.player-vp {
  min-width: 42px;
  min-height: 24px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.player-vp small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.player-name-block strong {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-name-block small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.player-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.player-stat-card {
  min-width: 0;
  min-height: 58px;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 7px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
}

.player-stat-card.resources {
  background: linear-gradient(145deg, color-mix(in srgb, #2f8fb5 54%, var(--surface)), var(--surface));
}

.player-stat-card.devs {
  background: linear-gradient(145deg, color-mix(in srgb, #7664b9 48%, var(--surface)), var(--surface));
}

.player-stat-card.knights,
.player-stat-card.roads {
  background: color-mix(in srgb, var(--surface-2) 64%, var(--surface));
}

.player-stat-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.player-stat-card.resources .player-stat-icon,
.player-stat-card.devs .player-stat-icon {
  color: var(--control-strong-text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

.player-stat-icon svg {
  width: 23px;
  height: 23px;
  color: var(--accent);
  stroke-width: 2.3;
}

.player-stat-card.resources .player-stat-icon svg,
.player-stat-card.devs .player-stat-icon svg {
  color: currentColor;
}

.player-stat-card strong {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--control-strong-bg);
  color: var(--control-strong-text);
  font-size: 12px;
  line-height: 1;
}

.player-stat-card small {
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.tiny-road-icon {
  width: 28px;
  height: 22px;
  overflow: visible;
}

.tiny-road-icon line {
  fill: color-mix(in srgb, var(--muted) 42%, transparent);
  stroke: var(--muted);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.log-card ol {
  margin: 10px 0 0;
  padding: 0 2px 0 4px;
  list-style: none;
  display: grid;
  gap: 3px;
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.log-list-item {
  --log-entry-color: color-mix(in srgb, var(--muted) 62%, transparent);
  display: grid;
  grid-template-columns: 3px 3.2ch minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 0 4px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.12;
}

.log-entry-rail {
  width: 3px;
  min-height: 1.08em;
  margin-top: 0.05em;
  border-radius: 999px;
  background: var(--log-entry-color);
  opacity: 0.86;
}

.log-entry-number {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: right;
}

.log-entry-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-entry-message strong {
  color: var(--text);
  font-weight: 950;
}

body.is-native-game {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-native-game #app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-shell.is-native-game {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 42%),
    var(--bg);
}

.app-shell.is-native-game .topbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1021px) {
  body:not(.is-native-shell) .app-shell.is-native-game {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body:not(.is-native-shell) .app-shell.is-native-game .topbar {
    position: relative;
    top: auto;
    grid-row: 1;
    display: grid;
    margin: 0;
  }

  body:not(.is-native-shell) .app-shell.is-native-game .native-game-layout {
    grid-row: 2;
    height: 100%;
    flex: none;
  }

  body:not(.is-native-shell) .app-shell.is-native-game .native-side-settings {
    display: none;
  }
}

.native-game-layout {
  --native-hud-button-size: clamp(44px, 11vw, 52px);
  --native-hud-gap: 7px;
  --native-hud-clearance: 8px;
  --native-dice-home-clearance: calc(var(--native-hud-gap) + 3px);
  --native-hand-card-width: 32px;
  --native-hand-card-height: 44px;
  --native-hand-tray-height: calc(var(--native-hand-card-height) + var(--native-hand-card-height) + var(--native-hud-gap) + 28px);
  --native-bottom-hud-height: calc(var(--native-hud-button-size) + var(--native-hud-gap) + var(--native-hand-tray-height));
  --native-dice-box-width: calc((var(--native-hud-button-size) * 2) + var(--native-hud-gap));
  --native-dice-box-height: calc(var(--native-hud-button-size) + var(--native-hud-gap));
  --native-dice-size: calc(var(--native-hud-button-size) - var(--native-hud-gap));
  --native-dice-space: var(--native-hud-gap);
  --native-dice-pad-block: calc((var(--native-dice-box-height) - var(--native-dice-size)) / 2);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 6px;
  padding:
    max(7px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
}

.native-top-hud {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  min-height: 46px;
}

.native-bank-slot {
  min-width: 0;
  width: fit-content;
  max-width: calc(100% - 52px);
  display: flex;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 80%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.app-shell.is-native-game .mobile-bank-strip {
  display: grid;
  grid-template-columns: 24px 1px max-content;
  gap: 5px;
  justify-self: center;
  max-width: 100%;
  padding: 0;
}

.app-shell.is-native-game .bank-strip::before {
  height: 32px;
}

.app-shell.is-native-game .bank-emblem {
  width: 24px;
  height: 30px;
}

.app-shell.is-native-game .bank-emblem svg {
  width: 23px;
  height: 24px;
  stroke-width: 2.5;
}

.app-shell.is-native-game .bank-deck-grid {
  grid-template-columns: repeat(6, 28px);
  gap: 5px;
  padding-top: 4px;
}

.app-shell.is-native-game .stacked-card {
  min-height: 38px;
  border-radius: 6px;
}

.app-shell.is-native-game .stacked-card.is-stack::before,
.app-shell.is-native-game .stacked-card.is-stack::after,
.app-shell.is-native-game .stacked-card-face {
  border-radius: 6px;
}

.app-shell.is-native-game .stacked-card.is-stack::before {
  top: -4px;
  bottom: 4px;
}

.app-shell.is-native-game .stacked-card.is-stack::after {
  top: -2px;
  bottom: 2px;
}

.app-shell.is-native-game .stacked-card-count {
  top: -3px;
  right: -4px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 5px;
  font-size: 10px;
}

.app-shell.is-native-game .stacked-card-icon svg {
  width: 15px;
  height: 15px;
}

.native-top-actions {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
}

.native-icon-button {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  backdrop-filter: none;
}

.native-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
}

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

.native-icon-button[data-action="open-settings"] {
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 8%);
  transition:
    color 160ms ease,
    filter 160ms ease;
}

.native-icon-button[data-action="open-settings"]:not(:disabled):hover,
.native-icon-button[data-action="open-settings"]:not(:disabled):focus-visible {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
}

.native-side-rail {
  position: relative;
  display: none;
}

.native-column-resize {
  display: none;
}

.native-left-panel {
  position: relative;
  min-width: 0;
  display: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 80%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.native-left-panel-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.native-left-panel-head strong {
  font-size: 15px;
  line-height: 1;
}

.native-left-panel-head > div,
.native-drawer-head > div {
  display: flex;
  gap: 6px;
  align-items: center;
}

.native-left-panel-head .icon-button,
.native-drawer-head .icon-button {
  width: 30px;
  min-height: 30px;
  border-radius: 8px;
}

.native-left-panel-body {
  min-height: 0;
  height: calc(100% - 42px);
  overflow: auto;
  padding: 10px;
}

.native-left-panel-body .panel-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.native-left-panel-body .collapsible-head {
  display: none;
}

.native-left-panel-body .chat-body {
  max-height: none;
  padding: 0;
}

.native-left-panel-body .chat-messages,
.native-left-panel-body .log-card ol {
  max-height: none;
}

.native-left-resize {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 10px;
  z-index: 4;
  width: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
  opacity: 0.54;
  touch-action: none;
  transition: opacity 180ms ease;
}

.native-left-resize::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 4px;
  height: 54px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 84%, transparent);
  transform: translateY(-50%) scaleY(0.88);
  transform-origin: center;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
  will-change: transform, background-color, opacity;
}

.native-left-resize:hover,
.native-left-resize:focus-visible {
  opacity: 1;
  outline: none;
}

.native-left-resize:hover::after,
.native-left-resize:focus-visible::after,
.native-left-resize:active::after,
body.is-board-column-resizing .native-left-resize::after {
  background-color: color-mix(in srgb, var(--accent) 66%, var(--line-strong));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-50%) scaleY(1.08) scaleX(1.12);
}

.native-side-head,
.native-side-fill,
.native-side-hint-slot,
.native-side-scroll-stack,
.native-side-notification-slot,
.native-side-hand-slot,
.native-side-panels {
  min-width: 0;
}

.native-side-notification-slot {
  min-height: 0;
}

.native-side-notification-slot.has-notification {
  min-height: max-content;
  overflow: visible;
}

.native-side-notification-slot.is-empty {
  display: none;
  height: 0;
  overflow: hidden;
}

.native-side-rail:has(.native-side-notification-slot.is-empty) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.native-side-rail:has(.native-side-notification-slot.has-notification) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.native-side-scroll-stack {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  box-sizing: border-box;
  padding-right: 0;
  -webkit-overflow-scrolling: touch;
}

.native-side-scroll-stack::-webkit-scrollbar {
  width: 7px;
}

.native-side-scroll-stack::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.native-side-scroll-stack::-webkit-scrollbar-track {
  background: transparent;
}

.native-side-scroll-stack > .native-side-notification-slot,
.native-side-scroll-stack > .native-side-panels {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.native-side-scroll-stack > .native-side-fill {
  flex: 1 1 auto;
  min-height: 0;
}

.desktop-ad-rail {
  display: none;
}

.native-side-notification-slot .trade-side-card {
  max-height: none;
  display: grid;
  gap: 7px;
  padding: 9px;
  overflow: visible;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.native-side-notification-slot .trade-builder-side-card {
  grid-template-rows: auto auto;
}

.native-side-notification-slot .trade-side-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.native-side-notification-slot .trade-side-card-head h2,
.native-side-notification-slot .incoming-trade-card-head h2 {
  font-size: 15px;
}

.native-side-notification-slot .trade-side-card-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

.trade-side-close {
  width: 30px;
  min-height: 30px;
  border-radius: 8px;
}

.trade-side-close svg {
  width: 15px;
  height: 15px;
}

.native-side-notification-slot .trade-notice-side {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  overflow: visible;
  padding-right: 2px;
  overscroll-behavior: auto;
}

.native-side-notification-slot .trade-notice-side .trade-tabs {
  gap: 5px;
}

.native-side-notification-slot .trade-notice-side .trade-tabs button {
  min-height: 31px;
  border-radius: 8px;
  font-size: 12px;
}

.native-side-notification-slot .trade-notice-side .trade-dialog-body {
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  overscroll-behavior: auto;
}

.native-side-notification-slot .trade-notice-side .trade-builder,
.native-side-notification-slot .trade-notice-side .trade-builder-grid {
  gap: 8px;
}

.native-side-notification-slot .trade-notice-side .trade-hand {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

.native-side-notification-slot .trade-notice-side .trade-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px 8px;
  flex-wrap: wrap;
}

.native-side-notification-slot .trade-notice-side .trade-card-head strong {
  font-size: 13px;
  line-height: 1;
}

.native-side-notification-slot .trade-notice-side .trade-card-head span {
  text-align: left;
  font-size: 9.5px;
}

.native-side-notification-slot .trade-notice-side .trade-hand-row {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  max-height: none;
  gap: 6px;
  padding: 4px 6px 6px 2px;
  overflow: visible;
  box-sizing: border-box;
}

.native-side-notification-slot .trade-notice-side .trade-hand-card {
  width: min(34px, 100%);
  min-height: 0;
}

.native-side-notification-slot .trade-notice-side .trade-hand-card-count,
.native-side-notification-slot .trade-notice-side .trade-selected-chip-count {
  min-width: 18px;
  min-height: 17px;
  font-size: 10px;
}

.native-side-notification-slot .trade-notice-side .trade-hand-selected {
  min-width: 17px;
  min-height: 16px;
  font-size: 8.5px;
}

.native-side-notification-slot .trade-notice-side .trade-exchange-strip {
  gap: 5px;
  padding: 6px;
}

.native-side-notification-slot .trade-notice-side .trade-exchange-strip p {
  font-size: 11px;
}

.native-side-notification-slot .trade-notice-side .trade-exchange-row {
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

.native-side-notification-slot .trade-notice-side .trade-selected-cards {
  min-height: 42px;
  max-height: none;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: visible;
  padding-right: 0;
}

.native-side-notification-slot .trade-notice-side .trade-selected-chip {
  width: 32px;
  flex: 0 0 32px;
  min-height: 44px;
}

.native-side-notification-slot .trade-notice-side .trade-dialog-actions {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 5px;
  padding-top: 7px;
  background: transparent;
}

.native-side-notification-slot .trade-notice-side .trade-dialog-actions button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 11.5px;
}

.native-side-panels {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}

.native-side-panels > .panel-card {
  min-height: 0;
}

.native-side-panels > .chat-card.is-open,
.native-side-panels > .log-card.is-open {
  flex: 0 0 auto;
  height: var(--side-panel-height, var(--default-side-panel-height));
  min-height: var(--min-side-panel-height);
  max-height: var(--max-side-panel-height);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 12px;
}

.native-side-panels > .chat-card.is-open {
  --min-side-panel-height: 188px;
  --default-side-panel-height: clamp(236px, 34dvh, 268px);
  --max-side-panel-height: min(62dvh, 430px);
}

.native-side-panels > .log-card.is-open {
  --min-side-panel-height: 170px;
  --default-side-panel-height: 170px;
  --max-side-panel-height: min(58dvh, 357px);
}

.native-side-panels > .chat-card.is-collapsed,
.native-side-panels > .log-card.is-collapsed {
  flex: 0 0 auto;
}

.native-side-panels .chat-body,
.native-side-panels .log-body {
  min-height: 0;
  max-height: none;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-bottom: 0;
}

.native-side-panels .chat-messages,
.native-side-panels .log-card ol {
  min-height: 0;
  max-height: none;
}

.native-side-panels .log-card ol {
  align-content: start;
  grid-auto-rows: max-content;
  margin-top: 0;
  padding-right: 4px;
}

.native-side-panels > .panel-card.is-open > .side-panel-resize {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12px;
  margin: 0 14px;
  border: 0;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}

.native-side-panels > .panel-card.is-open > .side-panel-resize::before {
  content: "";
  width: min(122px, 58%);
  height: 4px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent);
  transform: scaleX(0.74);
  transform-origin: center;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
  opacity: 0.72;
  will-change: transform, background-color, opacity;
}

.native-side-panels > .panel-card.is-open > .side-panel-resize:hover::before,
.native-side-panels > .panel-card.is-open > .side-panel-resize:focus-visible::before,
.native-side-panels > .panel-card.is-open > .side-panel-resize:active::before,
body.is-side-panel-resizing .native-side-panels > .panel-card.is-open > .side-panel-resize::before {
  background-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: scaleX(1);
  opacity: 1;
}

.native-player-strip {
  min-width: 0;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--native-player-count, 4), minmax(0, 1fr));
  gap: 5px;
}

.native-player-card {
  --native-player-content-width: min(100%, 126px);
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 4px;
  padding: 6px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 80%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}

.native-player-card.active {
  border-color: color-mix(in srgb, var(--player-color) 72%, var(--active-row-line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--player-color) 22%, transparent), transparent 78%),
    var(--active-row);
}

.native-player-head {
  min-width: 0;
  width: var(--native-player-content-width);
  max-width: 100%;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 18px;
  padding-right: 0;
}

.native-player-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-player-vp {
  position: static;
  flex: 0 0 auto;
  min-width: 29px;
  min-height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--player-color) 68%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #ffffff 24%, transparent), transparent 58%),
    color-mix(in srgb, var(--player-color) 66%, var(--surface-2));
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px color-mix(in srgb, var(--player-color) 18%, transparent);
  white-space: nowrap;
}

.native-player-vp small {
  color: color-mix(in srgb, #ffffff 78%, var(--player-color));
  font-size: 6.4px;
  font-weight: 950;
}

.native-player-stats {
  min-width: 0;
  width: var(--native-player-content-width);
  max-width: 100%;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(7px, 6%, 16px);
  padding-right: 0;
  overflow: hidden;
}

.native-player-stat {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  color: var(--muted);
  line-height: 1;
}

.native-player-stat span {
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 11px;
}

.native-player-stat svg,
.native-player-stat .dev-symbol,
.native-player-stat .tiny-road-icon {
  width: 11px;
  height: 11px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.native-player-stat .tiny-road-icon {
  width: 14px;
}

.native-player-stat .pickaxe-symbol {
  width: 13px;
  height: 13px;
  overflow: visible;
}

.native-player-stat.devs .pickaxe-symbol {
  width: 14px;
  height: 14px;
  transform: translateY(-0.5px);
}

.native-player-stat strong {
  color: var(--text);
  font-size: 9.5px;
  font-weight: 950;
}

.native-player-stat.resources,
.native-player-stat.guards {
  grid-row: 1;
}

.native-player-stat.devs,
.native-player-stat.roads {
  grid-row: 2;
}

.native-player-stat.resources,
.native-player-stat.devs {
  grid-column: 1;
}

.native-player-stat.guards,
.native-player-stat.roads {
  grid-column: 2;
}

.app-shell.is-native-game .board-panel {
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 10px;
}

.app-shell.is-native-game .board-stage {
  --board-floating-inset: 8px;
  --board-action-hud-height: calc(var(--native-bottom-hud-height) + var(--native-hud-clearance));
  --board-control-size: 34px;
  --board-control-gap: var(--native-hud-gap);
  height: 100%;
  min-height: 0;
  border-radius: inherit;
  overflow: hidden;
  overscroll-behavior: none;
}

.app-shell.is-native-game .turn-clock {
  bottom: calc(var(--board-action-hud-height) - var(--native-hud-clearance) + var(--native-hud-gap));
  width: min(230px, calc(100% - 126px));
  min-width: 142px;
  padding: 7px 9px 8px;
}

.app-shell.is-native-game .turn-clock-head {
  font-size: 0.62rem;
}

.app-shell.is-native-game .turn-clock-head strong {
  font-size: 0.8rem;
}

.app-shell.is-native-game .board-svg {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-shell.is-native-game .board-controls {
  top: var(--board-floating-inset);
  right: var(--board-floating-inset);
  grid-template-rows: repeat(3, var(--board-control-size));
}

.app-shell.is-native-game .board-control[data-action="board-zoom-in"] {
  grid-column: 2;
  grid-row: 1;
}

.app-shell.is-native-game .board-control[data-action="board-zoom-out"] {
  grid-column: 2;
  grid-row: 2;
}

.app-shell.is-native-game .board-control[data-action="board-reset"] {
  grid-column: 3;
  grid-row: 1;
}

.app-shell.is-native-game .board-info-control {
  grid-column: 3;
  grid-row: 3;
}

.app-shell.is-native-game .board-control,
.app-shell.is-native-game .board-lock-toggle {
  width: var(--board-control-size);
  min-height: var(--board-control-size);
}

.app-shell.is-native-game .board-control svg,
.app-shell.is-native-game .board-lock-toggle svg {
  width: 18px;
  height: 18px;
}

.app-shell.is-native-game .board-lock-toggle.is-locked {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--line);
  color: var(--accent-strong);
}

.app-shell.is-native-game .board-lock-toggle.is-unlocked {
  color: #ffffff;
}

.app-shell.is-native-game .board-hint-area {
  top: var(--board-floating-inset);
  left: var(--board-floating-inset);
  width: calc(
    100%
    - var(--board-floating-inset)
    - ((var(--board-control-size) * 2) + (var(--board-control-gap) * 2) + var(--board-floating-inset))
  );
}

.app-shell.is-native-game .board-hint-area.is-trading {
  width: calc(
    100%
    - var(--board-floating-inset)
    - ((var(--board-control-size) * 2) + (var(--board-control-gap) * 2) + var(--board-floating-inset))
  );
}

.app-shell.is-native-game .board-hint-area.is-collapsed {
  top: calc(7px + var(--board-control-size) + var(--board-control-gap));
  right: calc(7px + (var(--board-control-size) + var(--board-control-gap)) * 2);
  left: auto;
  width: var(--board-control-size);
}

.app-shell.is-native-game .board-hint-toggle {
  width: var(--board-control-size);
  min-height: var(--board-control-size);
  border-radius: 8px;
}

.app-shell.is-native-game .board-hint-card {
  padding: 10px 11px;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.app-shell.is-native-game .board-hint-copy h2 {
  font-size: 13.5px;
  line-height: 1.08;
}

.app-shell.is-native-game .board-hint-copy p {
  margin-top: 1px;
  font-size: 10.8px;
  line-height: 1.34;
}

.app-shell.is-native-game .board-hint-controls .trade-builder-grid {
  grid-template-columns: 1fr;
}

.app-shell.is-native-game .board-hint-controls .trade-card-grid {
  grid-template-columns: repeat(5, minmax(38px, 1fr));
}

.app-shell.is-native-game .board-hint-controls .trade-card {
  padding: 5px 3px;
}

.app-shell.is-native-game .board-hint-controls .trade-card-main small {
  display: none;
}

.app-shell.is-native-game .trade-offer-summary {
  grid-template-columns: 1fr;
}

.app-shell.is-native-game .trade-bundle-arrow {
  display: none;
}

.app-shell.is-native-game .trade-dialog-actions {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 5px;
  padding-top: 6px;
}

.app-shell.is-native-game .trade-overlay {
  --trade-overlay-gap: max(9px, var(--native-hud-clearance, 8px));
  align-items: end;
  justify-items: center;
  padding:
    var(--trade-overlay-gap)
    max(9px, env(safe-area-inset-right))
    calc(var(--board-action-hud-height) + var(--trade-overlay-gap))
    max(9px, env(safe-area-inset-left));
}

.app-shell.is-native-game .trade-overlay-card {
  width: min(640px, 100%);
  height: min(350px, 100%);
  max-height: 100%;
  border-radius: 11px;
  transform: none;
}

.app-shell.is-native-game .trade-overlay-card.is-incoming {
  width: min(390px, 100%);
  height: auto;
  max-height: calc(100% - 6px);
}

.app-shell.is-native-game .trade-overlay-head {
  gap: 9px;
  padding: 7px 10px 6px;
}

.app-shell.is-native-game .trade-overlay-head h2 {
  margin-top: 2px;
  font-size: 16px;
}

.app-shell.is-native-game .trade-overlay-head p {
  display: none;
}

.app-shell.is-native-game .trade-overlay-close {
  width: 30px;
  min-height: 30px;
}

.app-shell.is-native-game .trade-overlay-card > .trade-notice,
.app-shell.is-native-game .trade-overlay-card > .incoming-trade-panel {
  padding: 7px;
}

.app-shell.is-native-game .trade-overlay-card.is-incoming > .incoming-trade-panel {
  gap: 7px;
}

.app-shell.is-native-game .incoming-trade-summary {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 6px;
}

.app-shell.is-native-game .incoming-trade-side {
  min-height: 58px;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
}

.app-shell.is-native-game .incoming-trade-side > span {
  font-size: 9px;
}

.app-shell.is-native-game .incoming-resource-list {
  gap: 5px;
  padding-top: 4px;
}

.app-shell.is-native-game .incoming-resource-card {
  width: 28px;
  flex-basis: 28px;
}

.app-shell.is-native-game .incoming-trade-arrow svg {
  width: 18px;
  height: 18px;
}

.app-shell.is-native-game .incoming-trade-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-top: 7px;
}

.app-shell.is-native-game .incoming-trade-actions button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

.app-shell.is-native-game .trade-overlay .trade-tabs button {
  min-height: 31px;
  font-size: 12.5px;
}

.app-shell.is-native-game .trade-overlay .trade-builder-grid {
  grid-template-columns: 1fr;
  gap: 11px;
}

.app-shell.is-native-game .trade-overlay .trade-card-head {
  display: grid;
  gap: 2px;
}

.app-shell.is-native-game .trade-hand {
  grid-template-columns: minmax(70px, 0.34fr) minmax(0, max-content);
  gap: 6px;
}

.app-shell.is-native-game .trade-overlay .trade-card-head span {
  max-width: none;
  text-align: left;
  font-size: 9px;
  line-height: 1.08;
}

.app-shell.is-native-game .trade-hand-row {
  grid-template-columns: repeat(5, 28px);
  gap: 5px;
  padding-top: 4px;
}

.app-shell.is-native-game .trade-hand-card {
  min-height: 38px;
}

.app-shell.is-native-game .trade-hand-card.is-stack::before,
.app-shell.is-native-game .trade-hand-card.is-stack::after,
.app-shell.is-native-game .trade-hand-card-face,
.app-shell.is-native-game .trade-selected-chip.is-stack::before,
.app-shell.is-native-game .trade-selected-chip.is-stack::after,
.app-shell.is-native-game .trade-selected-chip-face {
  border-radius: 6px;
}

.app-shell.is-native-game .trade-hand-card.is-stack::before,
.app-shell.is-native-game .trade-selected-chip.is-stack::before {
  top: -4px;
  bottom: 4px;
}

.app-shell.is-native-game .trade-hand-card.is-stack::after,
.app-shell.is-native-game .trade-selected-chip.is-stack::after {
  top: -2px;
  bottom: 2px;
}

.app-shell.is-native-game .trade-hand-card-icon {
  width: auto;
  height: auto;
}

.app-shell.is-native-game .trade-hand-card-icon .resource-symbol {
  width: 15px;
  height: 15px;
}

.app-shell.is-native-game .trade-hand-card-count,
.app-shell.is-native-game .trade-selected-chip-count {
  top: -3px;
  right: -4px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 5px;
  font-size: 10px;
}

.app-shell.is-native-game .trade-hand-selected {
  right: -4px;
  bottom: -5px;
  min-width: 17px;
  min-height: 15px;
  border-radius: 5px;
  font-size: 8.5px;
}

.app-shell.is-native-game .trade-exchange-strip {
  gap: 4px;
  padding: 5px 6px;
  border-radius: 9px;
}

.app-shell.is-native-game .trade-exchange-strip p {
  font-size: 11px;
}

.app-shell.is-native-game .trade-exchange-row {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 5px;
}

.app-shell.is-native-game .trade-selected-cards {
  min-height: 43px;
  gap: 4px;
  padding: 3px;
}

.app-shell.is-native-game .trade-selected-chip {
  width: 28px;
  min-height: 38px;
}

.app-shell.is-native-game .trade-selected-chip .resource-symbol {
  width: 15px;
  height: 15px;
}

.app-shell.is-native-game .trade-exchange-arrow svg {
  width: 20px;
  height: 20px;
}

.app-shell.is-native-game .native-side-notification-slot .trade-notice-side .trade-hand {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

.app-shell.is-native-game .native-side-notification-slot .trade-notice-side .trade-hand-row {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 6px;
  padding: 4px 7px 6px 2px;
  overflow: visible;
  box-sizing: border-box;
}

.app-shell.is-native-game .native-side-notification-slot .trade-notice-side .trade-hand-card {
  width: min(34px, 100%);
  min-height: 0;
}

.app-shell.is-native-game .native-side-notification-slot .trade-notice-side .trade-selected-cards {
  overflow: visible;
}

.app-shell.is-native-game .trade-overlay .trade-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.app-shell.is-native-game .trade-overlay .trade-card {
  min-height: 104px;
  padding: 8px;
}

.app-shell.is-native-game .trade-overlay .trade-card-main {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px;
}

.app-shell.is-native-game .trade-overlay .trade-card-icon {
  width: 32px;
  height: 32px;
}

.app-shell.is-native-game .trade-overlay .trade-card-main strong {
  font-size: 12px;
}

.app-shell.is-native-game .trade-overlay .trade-card-main small {
  display: block;
  font-size: 9.8px;
}

.app-shell.is-native-game .trade-overlay .trade-card-counter {
  grid-template-columns: 42px minmax(28px, 1fr) 42px;
  gap: 7px;
}

.app-shell.is-native-game .trade-overlay .trade-card-counter button {
  width: 42px;
  min-height: 42px;
  border-radius: 10px;
}

.app-shell.is-native-game .trade-overlay .trade-submit,
.app-shell.is-native-game .trade-overlay .trade-dialog-actions button {
  min-height: 34px;
  font-size: 12px;
}

.app-shell.is-native-game .game-over-overlay {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    calc(var(--board-action-hud-height) + 8px)
    max(10px, env(safe-area-inset-left));
  place-items: center;
}

.app-shell.is-native-game .game-over-card {
  width: min(360px, 100%);
  max-height: calc(100% - 10px);
  gap: 10px;
  padding: 15px;
  border-radius: 11px;
}

.app-shell.is-native-game .game-over-card h2 {
  font-size: 29px;
}

.app-shell.is-native-game .game-over-stats {
  gap: 6px;
}

.app-shell.is-native-game .game-over-stats span {
  padding: 8px;
}

.app-shell.is-native-game .game-over-actions button {
  min-height: 38px;
}

.app-shell.is-native-game .board-stage {
  --dice-size: var(--native-dice-size);
  --dice-space: var(--native-dice-space);
  --dice-collapsed-width: var(--native-dice-box-width);
}

.app-shell.is-native-game .board-turn-controls {
  --dice-end-width: var(--native-dice-box-width);
  --dice-end-overlap: clamp(25px, calc(var(--dice-size) * 0.5), 35px);
  --dice-end-visible-height: clamp(43px, calc(var(--dice-size) * 0.7), 54px);
  --dice-end-height: calc(var(--dice-end-visible-height) + var(--dice-end-overlap));
  right: max(var(--board-floating-inset), env(safe-area-inset-right));
  bottom: calc(var(--board-action-hud-height) - var(--native-hud-clearance) + var(--native-dice-home-clearance));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0 solid transparent;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  transition:
    transform 220ms cubic-bezier(0.2, 0.82, 0.22, 1),
    padding 190ms cubic-bezier(0.2, 0.82, 0.22, 1),
    gap 190ms cubic-bezier(0.2, 0.82, 0.22, 1),
    border-width 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.app-shell.is-native-game .board-turn-controls.is-custom {
  right: auto;
  bottom: auto;
}

.app-shell.is-native-game .board-turn-controls.is-dragging {
  transition: none;
  will-change: transform;
}

.app-shell.is-native-game .board-turn-controls.is-dice-on-right {
  flex-direction: row-reverse;
}

.app-shell.is-native-game .board-turn-controls.is-dice-on-left {
  flex-direction: row;
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn {
  gap: 0;
  padding: 0;
  border-width: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn::before {
  display: none;
  content: none;
}

.app-shell.is-native-game .board-turn-controls.is-dice-on-left.has-dice-end-turn::before {
  display: none;
}

.app-shell.is-native-game .dice-default-slot {
  right: max(var(--board-floating-inset), env(safe-area-inset-right));
  bottom: calc(var(--board-action-hud-height) - var(--native-hud-clearance) + var(--native-dice-home-clearance));
  width: var(--native-dice-box-width);
  height: var(--native-dice-box-height);
  min-height: var(--native-dice-box-height);
}

.app-shell.is-native-game .board-dice {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: var(--native-dice-box-height);
  min-height: var(--native-dice-box-height);
  padding: var(--native-dice-pad-block) var(--native-dice-space);
  border-radius: 10px;
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .board-dice {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.16)),
    var(--turn-color);
  box-shadow:
    0 12px 28px rgba(10, 22, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  width: var(--native-dice-box-width);
  min-width: var(--native-dice-box-width);
  max-width: var(--native-dice-box-width);
  height: var(--native-dice-box-height);
  min-height: var(--native-dice-box-height);
  padding: var(--native-dice-pad-block) var(--native-dice-space);
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .board-dice.is-collapsed {
  width: var(--native-dice-box-width);
  min-width: var(--native-dice-box-width);
  max-width: var(--native-dice-box-width);
}

.app-shell.is-native-game .board-turn-controls.is-dice-on-right.has-dice-end-turn .board-dice,
.app-shell.is-native-game .board-turn-controls.is-dice-on-left.has-dice-end-turn .board-dice {
  padding-inline: var(--native-dice-space);
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .board-dice.is-disabled {
  opacity: 1;
  filter: none;
}

.app-shell.is-native-game .dice-end-turn {
  --dice-end-hover-x: 50%;
  --dice-end-hover-y: 50%;
  position: absolute;
  right: auto;
  bottom: calc(100% - var(--dice-end-overlap));
  left: 50%;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--dice-end-width);
  max-width: var(--dice-end-width);
  height: var(--dice-end-height);
  min-height: var(--dice-end-height);
  display: block;
  isolation: isolate;
  padding: 0;
  border: 0;
  border-radius: clamp(12px, calc(var(--dice-end-visible-height) * 0.28), 16px)
    clamp(12px, calc(var(--dice-end-visible-height) * 0.28), 16px)
    clamp(6px, calc(var(--dice-end-visible-height) * 0.14), 8px)
    clamp(6px, calc(var(--dice-end-visible-height) * 0.14), 8px);
  background:
    radial-gradient(
      circle at var(--dice-end-hover-x) var(--dice-end-hover-y),
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 44%,
      transparent 70%
    ),
    #111816;
  color: #f6fffb;
  box-shadow:
    0 9px 16px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  opacity: 0;
  font-size: clamp(13px, calc(var(--native-hud-button-size) * 0.255), 15.5px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-sizing: border-box;
  transform: translate(-50%, calc(var(--dice-end-overlap) + 12px)) scale(0.98);
  transform-origin: center bottom;
  pointer-events: none;
  overflow: visible;
  filter: saturate(0.96);
  background-position: center;
  transition:
    transform 250ms cubic-bezier(0.16, 0.92, 0.2, 1),
    opacity 170ms ease,
    background 160ms ease,
    filter 180ms ease,
    box-shadow 180ms ease;
}

.app-shell.is-native-game .board-turn-controls.is-dice-on-left .dice-end-turn {
  right: auto;
  left: 50%;
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .dice-end-turn.is-visible {
  width: var(--dice-end-width);
  max-width: var(--dice-end-width);
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  filter: saturate(1.06);
  box-shadow:
    0 10px 19px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
}

.app-shell.is-native-game .dice-end-turn-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: visible;
  pointer-events: none;
  border-radius: inherit;
}

.app-shell.is-native-game .dice-end-turn-border,
.app-shell.is-native-game .dice-end-turn-runner,
.app-shell.is-native-game .dice-end-turn-runner-head {
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.app-shell.is-native-game .dice-end-turn-border {
  stroke: color-mix(in srgb, var(--turn-color) 42%, rgba(255, 255, 255, 0.22));
  stroke-width: 2;
}

.app-shell.is-native-game .dice-end-turn-runner {
  stroke: color-mix(in srgb, var(--turn-color) 78%, rgba(255, 255, 255, 0.18));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 18 82;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--turn-color) 46%, transparent));
  will-change: stroke-dashoffset;
}

.app-shell.is-native-game .dice-end-turn-runner-head {
  stroke: color-mix(in srgb, #ffffff 88%, var(--turn-color) 12%);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  filter: drop-shadow(0 0 3px color-mix(in srgb, #ffffff 44%, var(--turn-color) 56%));
  will-change: stroke-dashoffset;
}

.app-shell.is-native-game .dice-end-turn-label {
  position: absolute;
  top: calc(var(--dice-end-visible-height) / 2);
  left: 50%;
  z-index: 3;
  max-width: calc(100% - 18px);
  transform: translate(-50%, -50%);
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.app-shell.is-native-game .dice-end-turn:hover,
.app-shell.is-native-game .dice-end-turn:focus-visible {
  outline: none;
}

.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .dice-end-turn.is-visible:hover,
.app-shell.is-native-game .board-turn-controls.has-dice-end-turn .dice-end-turn.is-visible:focus-visible {
  transform: translate(-50%, 0) scale(1);
  background:
    radial-gradient(
      circle at var(--dice-end-hover-x) var(--dice-end-hover-y),
      rgba(255, 255, 255, 0.14) 0%,
      color-mix(in srgb, var(--turn-color) 14%, transparent) 34%,
      transparent 68%
    ),
    #111816;
  box-shadow:
    0 11px 20px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.app-shell.is-native-game .board-turn-controls.is-dragging .dice-end-turn {
  pointer-events: none;
}

.app-shell.is-native-game .board-dice.is-roll-prompt,
.app-shell.is-native-game .board-dice.is-settling {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 18px);
}

.app-shell.is-native-game .dice-prompt {
  flex: 0 0 auto;
  gap: 7px;
}

.app-shell.is-native-game .board-action-bar {
  --hud-button-size: var(--native-hud-button-size);
  right: 0;
  bottom: 0;
  left: 0;
  grid-template-rows: var(--hud-button-size) var(--native-hand-tray-height);
  gap: var(--native-hud-gap);
}

.app-shell.is-native-game .board-action-buttons {
  gap: var(--native-hud-gap);
  width: 100%;
  grid-template-columns:
    repeat(2, var(--hud-button-size))
    minmax(0, 1fr)
    repeat(2, var(--hud-button-size));
  padding-inline:
    max(var(--board-floating-inset), env(safe-area-inset-left))
    max(var(--board-floating-inset), env(safe-area-inset-right));
  justify-self: stretch;
  justify-content: stretch;
}

.app-shell.is-native-game .board-action-buttons > .board-hud-button.trade {
  grid-column: 4;
}

.app-shell.is-native-game .board-action-buttons > .board-hud-button.development {
  grid-column: 5;
}

.app-shell.is-native-game .dev-purchase-anchor {
  grid-column: 5;
  width: var(--hud-button-size);
  min-width: var(--hud-button-size);
  height: var(--hud-button-size);
  min-height: var(--hud-button-size);
}

.app-shell.is-native-game .dev-purchase-anchor > .board-hud-button.development {
  grid-column: auto;
  grid-row: auto;
}

.app-shell.is-native-game .board-hud-button {
  overflow: hidden;
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.app-shell.is-native-game .board-hud-button[data-tooltip] {
  overflow: visible;
}

.app-shell.is-native-game .native-panel-action {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line) 46%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.22)),
    color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
  color: color-mix(in srgb, var(--accent) 76%, var(--text) 24%);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.app-shell.is-native-game .native-board-action:not(:disabled):not(.is-disabled) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 16%, transparent), rgba(0, 0, 0, 0.12)),
    var(--accent);
  color: #ffffff;
  box-shadow:
    0 10px 18px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.app-shell.is-native-game .native-panel-action:not(:disabled):hover,
.app-shell.is-native-game .native-panel-action:not(:disabled):focus-visible,
.app-shell.is-native-game .native-panel-action.is-selected,
.app-shell.is-native-game .native-board-action:not(:disabled):not(.is-disabled):hover,
.app-shell.is-native-game .native-board-action:not(:disabled):not(.is-disabled):focus-visible,
.app-shell.is-native-game .native-board-action.is-selected:not(:disabled):not(.is-disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-strong) 72%, white 28%);
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 22%, transparent), rgba(0, 0, 0, 0.08)),
    var(--accent-strong);
  color: #ffffff;
  box-shadow:
    0 12px 20px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.app-shell.is-native-game .board-hud-button:not(:disabled):not(.is-disabled):hover,
.app-shell.is-native-game .board-hud-button:not(:disabled):not(.is-disabled):focus-visible,
.app-shell.is-native-game .board-hud-button.is-selected:not(.is-disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #ffffff 78%, var(--accent) 22%);
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.28),
    0 0 12px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.app-shell.is-native-game .native-panel-action:not(:disabled):hover,
.app-shell.is-native-game .native-panel-action:not(:disabled):focus-visible,
.app-shell.is-native-game .native-panel-action.is-selected,
.app-shell.is-native-game .native-board-action:not(:disabled):not(.is-disabled):hover,
.app-shell.is-native-game .native-board-action:not(:disabled):not(.is-disabled):focus-visible,
.app-shell.is-native-game .native-board-action.is-selected:not(:disabled):not(.is-disabled) {
  border-color: color-mix(in srgb, var(--accent-strong) 72%, white 28%);
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffffff 22%, transparent), rgba(0, 0, 0, 0.08)),
    var(--accent-strong);
  color: #ffffff;
  box-shadow:
    0 12px 20px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.app-shell.is-native-game .board-action-bar > .board-hand-tray {
  --hand-card-width: var(--native-hand-card-width);
  --hand-card-height: var(--native-hand-card-height);
  --native-hand-gap: 5px;
  min-height: var(--native-hand-tray-height);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 5px;
  padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.app-shell.is-native-game .board-hand-tray .board-hand-card,
.app-shell.is-native-game .board-shelf-dev-card,
.app-shell.is-native-game .board-hand-placeholder {
  width: var(--hand-card-width);
  height: var(--hand-card-height);
  flex-basis: var(--hand-card-width);
}

.app-shell.is-native-game .board-hand-group {
  gap: var(--native-hand-gap, 5px);
}

.app-shell.is-native-game .board-hand-devs {
  max-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.app-shell.is-native-game .board-hand-devs.has-scroll-overflow {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}

.app-shell.is-native-game .board-hand-devs .board-shelf-dev-card {
  scroll-snap-align: start;
}

.app-shell.is-native-game .board-hand-icon,
.app-shell.is-native-game .board-shelf-dev-icon {
  width: 24px;
  height: 24px;
}

.app-shell.is-native-game .board-hand-icon .resource-symbol,
.app-shell.is-native-game .board-shelf-dev-icon .dev-symbol,
.app-shell.is-native-game .board-hand-placeholder svg {
  width: 21px;
  height: 21px;
}

.app-shell.is-native-game .board-hand-count {
  top: -7px;
  right: -7px;
  min-width: 15px;
  min-height: 15px;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 8.5px;
}

.app-shell.is-native-game .board-shelf-dev-label {
  right: 2px;
  bottom: 2px;
  left: 2px;
  font-size: 5.5px;
}

.app-shell.is-native-game .resource-risk-meter {
  width: 46px;
  height: 46px;
}

.app-shell.is-native-game .resource-risk-ring {
  width: 46px;
  height: 46px;
}

.app-shell.is-native-game .resource-risk-meter strong {
  font-size: 12px;
}

.app-shell.is-native-game .resource-risk-meter.is-crowded strong {
  font-size: 10px;
}

.app-shell.is-native-game .resource-risk-meter.is-risk {
  width: 92px;
  grid-template-columns: minmax(0, 42px) 46px;
}

.app-shell.is-native-game .resource-risk-note {
  font-size: 7px;
}

.app-shell.is-native-game .board-piece-stock {
  min-width: 45px;
  gap: 3px;
}

.app-shell.is-native-game .board-piece-stock-row {
  min-height: 16px;
  grid-template-columns: 17px minmax(13px, auto);
  gap: 4px;
}

.app-shell.is-native-game .board-piece-stock-icon {
  width: 17px;
  height: 17px;
}

.app-shell.is-native-game .board-piece-stock-icon svg,
.app-shell.is-native-game .board-piece-stock-icon .build-symbol {
  width: 16px;
  height: 16px;
}

.app-shell.is-native-game .board-piece-stock-row strong {
  font-size: 11px;
}

.app-shell.is-native-game .board-hud-icon {
  width: 25px;
  height: 25px;
}

.app-shell.is-native-game .board-hud-icon svg,
.app-shell.is-native-game .board-hud-icon .build-symbol,
.app-shell.is-native-game .board-hud-icon .dev-symbol {
  width: 23px;
  height: 23px;
}

.app-shell.is-native-game .board-hud-count {
  top: -9px;
  right: -8px;
  min-width: 23px;
  min-height: 22px;
  font-size: 12px;
}

.app-shell.is-native-game .board-hud-button:disabled {
  opacity: 0.9;
  filter: grayscale(0.32) saturate(0.84) contrast(1.16);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.11) 40%, rgba(0, 0, 0, 0.13)),
    color-mix(in srgb, var(--accent) 34%, var(--surface-2) 66%);
  color: color-mix(in srgb, var(--text) 82%, var(--accent-strong) 18%);
}

.app-shell.is-native-game .board-hud-button:disabled .board-hud-icon {
  color: color-mix(in srgb, var(--text) 82%, var(--accent-strong) 18%);
  opacity: 0.88;
}

.app-shell.is-native-game .native-board-action:disabled,
.app-shell.is-native-game .native-board-action.is-disabled {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line) 46%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.22)),
    color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
  color: color-mix(in srgb, var(--accent) 76%, var(--text) 24%);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transform: none;
  cursor: default;
}

.app-shell.is-native-game .native-board-action:disabled:hover,
.app-shell.is-native-game .native-board-action:disabled:focus-visible,
.app-shell.is-native-game .native-board-action.is-disabled:hover,
.app-shell.is-native-game .native-board-action.is-disabled:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line) 46%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.22)),
    color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transform: none;
}

.app-shell.is-native-game .native-board-action:disabled .board-hud-icon,
.app-shell.is-native-game .native-board-action.is-disabled .board-hud-icon {
  color: color-mix(in srgb, var(--accent) 76%, var(--text) 24%);
  opacity: 1;
  filter: none;
}

.app-shell.is-native-game .board-resize-handle {
  display: none;
}

@media (orientation: landscape) and (min-width: 680px) and (max-height: 620px), (min-width: 1021px) {
  .native-game-layout {
    --native-side-rail-width: clamp(280px, 30vw, 350px);
    --native-left-rail-width: clamp(280px, 28vw, 360px);
    --desktop-ad-rail-width: clamp(104px, 10vw, 136px);
    --native-hud-button-size: clamp(42px, 8.2vh, 48px);
    --native-hand-card-width: 31px;
    --native-hand-card-height: 43px;
    --native-hand-tray-height: calc(var(--native-hand-card-height) + var(--native-hand-card-height) + var(--native-hud-gap) + 22px);
    grid-template-columns: minmax(0, 1fr) var(--native-side-rail-width);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding:
      max(7px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .native-game-layout.is-board-width-custom {
    grid-template-columns: minmax(360px, var(--board-column-width)) minmax(280px, 1fr);
  }

  .native-game-layout.has-desktop-ad-rail {
    grid-template-columns: var(--desktop-ad-rail-width) minmax(0, 1fr) var(--native-side-rail-width);
  }

  .native-game-layout.has-desktop-ad-rail.is-board-width-custom {
    grid-template-columns:
      var(--desktop-ad-rail-width)
      minmax(360px, var(--board-column-width))
      minmax(280px, 1fr);
  }

  .native-game-layout.has-native-left-panel {
    grid-template-columns: var(--native-left-rail-width) minmax(0, 1fr) var(--native-side-rail-width);
  }

  .native-game-layout.has-native-left-panel.is-board-width-custom {
    grid-template-columns:
      var(--native-left-rail-width)
      minmax(360px, var(--board-column-width))
      minmax(280px, 1fr);
  }

  .native-game-layout > .native-top-hud,
  .native-game-layout > .native-player-strip:not(.native-side-players) {
    display: none;
  }

  .native-left-panel {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .native-board-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .native-game-layout.has-desktop-ad-rail .desktop-ad-rail {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
    align-content: stretch;
    gap: 8px;
    padding: 2px;
    overflow: hidden;
  }

  .desktop-ad-card {
    min-height: 0;
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px dashed color-mix(in srgb, var(--line-strong) 62%, transparent);
    border-radius: 10px;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent 76%),
      color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--muted);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 10px 20px rgba(0, 0, 0, 0.12);
  }

  .desktop-ad-card span {
    color: color-mix(in srgb, var(--muted) 86%, var(--text));
    font-size: 8.5px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .desktop-ad-card strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.05;
  }

  .desktop-ad-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
  }

  .desktop-ad-actions {
    min-width: 0;
    display: flex;
    justify-content: flex-start;
  }

  .desktop-remove-ads-button {
    width: 100%;
    min-height: 32px;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
    border-radius: 8px;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 54%, transparent), transparent 78%),
      color-mix(in srgb, var(--surface) 88%, transparent);
    color: color-mix(in srgb, var(--accent) 74%, var(--text));
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .desktop-remove-ads-button:hover,
  .desktop-remove-ads-button:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 70%, white 12%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .native-game-layout.has-native-left-panel .native-board-panel {
    grid-column: 2;
  }

  .native-game-layout.has-desktop-ad-rail .native-board-panel {
    grid-column: 2;
  }

  .native-side-rail {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 7px;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
  }

  .native-column-resize {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 0;
    z-index: 8;
    width: 16px;
    min-height: 0;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: ew-resize;
    opacity: 0.48;
    touch-action: none;
    transition: opacity 180ms ease;
  }

  .native-column-resize::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 4px;
    height: min(92px, 44%);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--line-strong) 78%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent),
      0 8px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-50%) scaleY(0.84);
    transform-origin: center;
    transition:
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      background-color 220ms ease,
      box-shadow 220ms ease,
      opacity 220ms ease;
    will-change: transform, background-color, opacity;
  }

  .native-column-resize:hover,
  .native-column-resize:focus-visible {
    opacity: 1;
    outline: none;
  }

  .native-column-resize:hover::after,
  .native-column-resize:focus-visible::after,
  .native-column-resize:active::after,
  body.is-board-column-resizing .native-column-resize::after {
    background-color: color-mix(in srgb, var(--accent) 66%, var(--line-strong));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent),
      0 8px 18px rgba(0, 0, 0, 0.24),
      0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: translateY(-50%) scaleY(1.08) scaleX(1.12);
  }

  .native-game-layout.has-native-left-panel .native-side-rail {
    grid-column: 3;
  }

  .native-game-layout.has-desktop-ad-rail .native-side-rail {
    grid-column: 3;
  }

  .native-side-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(34px, 1fr);
    align-items: center;
    gap: 8px;
  }

  .native-side-bank-slot {
    grid-column: 2;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    display: flex;
    justify-content: center;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 9px;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 66%, transparent), transparent 80%),
      color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow:
      0 8px 16px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }

  .native-side-settings {
    grid-column: 3;
    justify-self: end;
  }

  .native-side-players {
    grid-template-columns: repeat(var(--native-player-count, 4), minmax(0, 1fr));
    gap: 5px;
  }

  .native-side-hint-slot {
    display: grid;
    min-height: 0;
  }

  .native-board-panel .board-hint-area {
    display: none;
  }

  .app-shell.is-native-game .native-side-hint-slot .board-hint-area {
    position: static;
    z-index: auto;
    width: 100%;
    display: grid;
    justify-items: stretch;
    pointer-events: auto;
  }

  .app-shell.is-native-game .native-side-hint-slot .board-hint-area.is-trading {
    width: 100%;
  }

  .app-shell.is-native-game .native-side-hint-slot .board-hint-card {
    min-height: 0;
    padding: 8px 9px;
    box-shadow:
      0 9px 18px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .native-side-fill {
    min-height: 0;
  }

  .native-side-hand-slot {
    align-self: end;
    min-height: 0;
  }

  .app-shell.is-native-game .native-side-hand-slot .board-hand-tray {
    --hand-card-width: var(--native-hand-card-width);
    --hand-card-height: var(--native-hand-card-height);
    --native-hand-gap: 5px;
    width: 100%;
    min-height: var(--native-hand-tray-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 5px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 10px;
  }

  .app-shell.is-native-game .board-stage {
    --board-floating-inset: 8px;
    --board-control-gap: var(--native-hud-gap);
    --board-action-hud-height: calc(var(--native-hud-button-size) + var(--native-hud-clearance) + var(--board-floating-inset));
  }

  .app-shell.is-native-game .board-hint-area {
    width: min(470px, calc(100% - 126px));
  }

  .app-shell.is-native-game .board-action-bar {
    right: var(--board-floating-inset);
    bottom: var(--board-floating-inset);
    left: var(--board-floating-inset);
    grid-template-rows: var(--hud-button-size);
    gap: 0;
  }

  .app-shell.is-native-game .turn-clock {
    bottom: var(--board-floating-inset);
  }

  .app-shell.is-native-game .board-action-bar > .board-hand-tray {
    display: none;
  }

  .app-shell.is-native-game .board-action-buttons {
    padding-inline: 0;
  }

  .app-shell.is-native-game .board-turn-controls,
  .app-shell.is-native-game .dice-default-slot {
    right: var(--board-floating-inset);
    bottom: calc(var(--board-action-hud-height) - var(--native-hud-clearance) + var(--native-dice-home-clearance));
  }

  .app-shell.is-native-game .trade-overlay {
    padding:
      var(--trade-overlay-gap)
      var(--trade-overlay-gap)
      calc(var(--board-action-hud-height) + var(--trade-overlay-gap))
      var(--trade-overlay-gap);
  }

  .app-shell.is-native-game .game-over-overlay {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .native-drawer-scrim {
    display: none;
  }

  .native-drawer {
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(360px, 32vw);
    min-width: 300px;
    max-height: min(66vh, 460px);
    max-height: min(66dvh, 460px);
    border-radius: 11px;
  }

  .native-drawer-body .chat-messages {
    max-height: min(42vh, 290px);
    max-height: min(42dvh, 290px);
  }

  .native-drawer-body .log-card ol {
    max-height: min(48vh, 330px);
    max-height: min(48dvh, 330px);
  }
}

.native-icon-button:not(:disabled):hover,
.native-icon-button:not(:disabled):focus-visible {
  outline: none;
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 38%, transparent));
}

.native-drawer-scrim {
  position: absolute;
  inset: 0;
  z-index: 50;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.24);
  cursor: default;
}

.native-drawer {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 60;
  max-height: min(62vh, 430px);
  max-height: min(62dvh, 430px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 64%, transparent), transparent),
    color-mix(in srgb, var(--surface) 95%, #000);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  animation: native-drawer-in 180ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.native-drawer-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 13px;
  border-bottom: 1px solid var(--line);
}

.native-drawer-head strong {
  font-size: 15px;
  line-height: 1;
}

.native-drawer-head .icon-button {
  width: 30px;
  min-height: 30px;
  border-radius: 8px;
}

.native-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.native-drawer-body .panel-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.native-drawer-body .chat-body {
  max-height: none;
  padding: 0;
}

.native-drawer-body .chat-messages {
  max-height: min(38vh, 250px);
  max-height: min(38dvh, 250px);
}

.native-drawer-body .collapsible-head {
  display: none;
}

.native-drawer-body .log-card ol {
  max-height: min(42vh, 300px);
  max-height: min(42dvh, 300px);
  margin-top: 0;
  padding-right: 4px;
}

.native-info-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

.native-info-modal {
  width: min(430px, 100%);
  max-height: min(82vh, 620px);
  max-height: min(82dvh, 620px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 64%),
    var(--surface);
  box-shadow: 0 30px 62px rgba(0, 0, 0, 0.38);
}

.native-info-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 14px;
}

.native-info-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
}

.native-info-head .eyebrow {
  margin-bottom: 5px;
}

.native-info-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 14px 12px;
}

.native-info-tabs button {
  min-height: 36px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
}

.native-info-tabs button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.native-info-content {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.native-info-lede {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.native-points-list,
.native-cost-list {
  display: grid;
  gap: 8px;
}

.native-info-row,
.native-cost-row {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-3);
}

.native-cost-row {
  grid-template-columns: 38px minmax(72px, 0.8fr) minmax(0, 1.4fr);
}

.native-info-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
}

.native-info-row-icon svg,
.native-info-row-icon .build-symbol,
.native-info-row-icon .dev-symbol,
.native-info-row-icon .tiny-road-icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.native-info-row strong,
.native-cost-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-info-row small {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.native-cost-row .cost-pips {
  justify-content: end;
}

@keyframes native-drawer-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 390px) {
  .native-game-layout {
    gap: 5px;
    padding-inline: max(6px, env(safe-area-inset-left));
  }

  .native-player-strip.player-count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app-shell.is-native-game .mobile-bank-strip {
    grid-template-columns: 22px 1px max-content;
    gap: 5px;
  }

  .app-shell.is-native-game .bank-deck-grid {
    grid-template-columns: repeat(6, 25px);
    gap: 4px;
  }

  .app-shell.is-native-game .stacked-card {
    min-height: 34px;
  }

  .native-icon-button {
    width: 33px;
    height: 33px;
  }

  .native-player-strip {
    gap: 4px;
  }

  .native-player-card {
    padding: 4px 4px 5px;
  }

  .native-player-head {
    gap: 6px;
  }

  .native-player-vp {
    min-width: 28px;
    min-height: 16px;
    padding: 1px 4px;
    font-size: 9.2px;
  }

  .native-player-vp small {
    font-size: 6px;
  }

  .native-player-head strong {
    font-size: 9.5px;
  }

  .native-game-layout {
    --native-hud-button-size: 42px;
    --native-hand-card-width: 30px;
    --native-hand-card-height: 42px;
    --native-hud-gap: 7px;
  }

  .app-shell.is-native-game .board-action-bar > .board-hand-tray {
    row-gap: 4px;
    padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .app-shell.is-native-game .board-piece-stock {
    min-width: 41px;
  }

  .app-shell.is-native-game .board-piece-stock-row {
    grid-template-columns: 15px minmax(12px, auto);
    min-height: 15px;
    gap: 3px;
  }

  .app-shell.is-native-game .board-piece-stock-icon,
  .app-shell.is-native-game .board-piece-stock-icon svg,
  .app-shell.is-native-game .board-piece-stock-icon .build-symbol {
    width: 15px;
    height: 15px;
  }

  .app-shell.is-native-game .board-piece-stock-row strong {
    font-size: 10px;
  }

}

@media (min-width: 1021px) {
  .native-game-layout {
    --native-side-rail-width: clamp(340px, 28vw, 510px);
    --native-left-rail-width: clamp(300px, 24vw, 400px);
    --desktop-ad-rail-width: clamp(112px, 9vw, 150px);
    --native-hud-button-size: clamp(48px, 3.5vw, 54px);
    --native-hand-card-width: 34px;
    --native-hand-card-height: 48px;
    --native-hand-tray-height: calc(var(--native-hand-card-height) + var(--native-hand-card-height) + var(--native-hud-gap) + 24px);
    gap: 10px;
    padding: 10px 12px;
  }

  .native-side-rail {
    gap: 7px;
  }

  .native-side-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(36px, 1fr);
    gap: 9px;
  }

  .native-side-bank-slot {
    padding: 5px 6px;
  }

  .native-side-players {
    gap: 7px;
  }

  .native-player-card {
    gap: 5px;
    padding: 6px;
  }

  .native-player-head {
    gap: 8px;
  }

  .native-player-head strong {
    font-size: 11px;
  }

  .native-player-vp {
    min-width: 30px;
    min-height: 18px;
    padding: 1px 5px;
    font-size: 10px;
  }

  .native-player-stat span,
  .native-player-stat svg,
  .native-player-stat .dev-symbol {
    width: 12px;
    height: 12px;
  }

  .native-player-stat .tiny-road-icon {
    width: 15px;
  }

  .native-player-stat strong {
    font-size: 10px;
  }

  .app-shell.is-native-game .board-stage {
    --board-floating-inset: 10px;
    --board-control-size: 38px;
    --board-control-gap: var(--native-hud-gap);
    --board-action-hud-height: calc(var(--native-hud-button-size) + var(--native-hud-clearance) + var(--board-floating-inset));
  }

  .app-shell.is-native-game .board-action-bar {
    right: var(--board-floating-inset);
    bottom: var(--board-floating-inset);
    left: var(--board-floating-inset);
  }

  .app-shell.is-native-game .board-action-buttons {
    padding-inline: 0;
  }

  .app-shell.is-native-game .board-turn-controls,
  .app-shell.is-native-game .dice-default-slot {
    right: var(--board-floating-inset);
    bottom: calc(var(--board-action-hud-height) - var(--native-hud-clearance) + var(--native-dice-home-clearance));
  }

  .app-shell.is-native-game .native-side-hand-slot .board-hand-tray {
    padding: 9px;
  }

  .app-shell.is-native-game .board-hud-icon,
  .app-shell.is-native-game .board-hud-icon svg,
  .app-shell.is-native-game .board-hud-icon .build-symbol,
  .app-shell.is-native-game .board-hud-icon .dev-symbol {
    width: 25px;
    height: 25px;
  }

  .app-shell.is-native-game .trade-overlay-card {
    width: min(720px, 100%);
    height: min(410px, 100%);
  }

  .app-shell.is-native-game .trade-overlay-card.is-incoming {
    width: min(520px, 100%);
    height: auto;
    max-height: calc(100% - 8px);
  }

  .side-hint-slot {
    display: grid;
  }

  .game-layout .board-panel .board-hint-area {
    display: none;
  }

  .app-shell.is-native-game .side-hint-slot .board-hint-area {
    position: static;
    z-index: auto;
    width: 100%;
    display: grid;
    justify-items: stretch;
    pointer-events: auto;
  }

  .app-shell.is-native-game .side-hint-slot .board-hint-area.is-trading {
    width: 100%;
  }

  .app-shell.is-native-game .side-hint-slot .board-hint-card {
    min-height: 0;
    padding: 10px 11px;
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 1020px) {
  .app-shell {
    padding: 0 0 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .topbar {
    top: 0;
    min-height: 50px;
    margin-bottom: 8px;
    padding:
      max(6px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      6px
      max(14px, env(safe-area-inset-left));
  }

  .game-layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 10px;
  }

  .game-layout.is-board-width-custom {
    grid-template-columns: 1fr;
  }

  .mobile-bank-strip,
  .mobile-players-card {
    display: grid;
    grid-column: 1;
  }

  .mobile-bank-strip {
    padding: 0 3px;
    justify-self: center;
    justify-items: center;
  }

  .mobile-player-grid {
    gap: 6px;
  }

  .mobile-player-card {
    gap: 4px 6px;
    padding: 6px;
  }

  .mobile-player-avatar {
    width: 28px;
  }

  .mobile-player-vp {
    min-width: 32px;
    min-height: 22px;
    padding: 0 6px;
    font-size: 13px;
  }

  .mobile-player-stats {
    gap: 5px;
    padding-top: 1px;
  }

  .board-panel {
    min-height: auto;
  }

  .board-stage {
    --board-action-hud-height: 202px;
    height: var(--board-height, min(81vh, 760px));
    min-height: 450px;
  }

  .board-action-bar {
    --hud-button-size: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: 1fr;
    grid-template-rows: var(--hud-button-size) auto;
    gap: 8px;
  }

  .board-action-buttons {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(6, var(--hud-button-size));
    padding-inline: var(--board-floating-inset);
    justify-self: end;
  }

  .board-action-bar > .board-hand-tray {
    grid-row: 2;
    display: grid;
    min-width: 0;
    width: 100%;
    padding-inline: calc(var(--board-floating-inset) + 7px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 11px 11px 0 0;
  }

  .board-resize-x,
  .board-resize-corner {
    display: none;
  }

  .board-svg {
    height: 100%;
    min-height: 0;
  }

  .side-panel {
    grid-template-columns: 1fr;
  }

  .side-panel > .bank-card,
  .side-panel .hand-card,
  .side-panel .table-card {
    display: none;
  }
}

@media (max-width: 1020px), (pointer: coarse) {
  .topbar,
  .setup-backdrop,
  .board-control,
  .board-lock-toggle,
  .board-hint-toggle,
  .board-hint-card,
  .board-hand-tray,
  .board-hud-button,
  .native-bank-slot,
  .native-drawer,
  .native-info-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .topbar {
    background: var(--surface);
    box-shadow: 0 4px 12px rgba(15, 26, 22, 0.08);
  }

  .board-panel,
  .panel-card,
  .mobile-player-card,
  .native-player-card,
  .native-bank-slot {
    box-shadow: 0 6px 14px rgba(15, 26, 22, 0.08);
  }

  .board-control,
  .board-lock-toggle,
  .board-hint-toggle,
  .board-hint-card,
  .board-hand-tray,
  .board-hud-button,
  .native-panel-action {
    box-shadow:
      0 5px 11px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }

  .board-hud-button:not(:disabled):not(.is-disabled):hover,
  .board-hud-button:not(:disabled):not(.is-disabled):focus-visible,
  .board-hud-button.is-selected:not(.is-disabled),
  .app-shell.is-native-game .board-hud-button:not(:disabled):not(.is-disabled):hover,
  .app-shell.is-native-game .board-hud-button:not(:disabled):not(.is-disabled):focus-visible,
  .app-shell.is-native-game .board-hud-button.is-selected:not(.is-disabled) {
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.2),
      0 0 8px color-mix(in srgb, var(--accent) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }

  .board-hand-icon .resource-symbol,
  .resource-risk-ring,
  .board-item-info,
  .placement-picker,
  .native-icon-button:not(:disabled):hover,
  .native-icon-button:not(:disabled):focus-visible {
    filter: none;
  }

  .edge-road-glow,
  .edge-road-choice,
  .hex-robber-target,
  .city-upgrade-halo,
  .piece.valid-city:hover,
  .piece.is-selected,
  .edge.has-road.is-selected {
    filter: none;
  }

  .hex-robber-target {
    animation-name: robber-hex-pulse-lite;
  }

  .city-upgrade-halo {
    animation-name: city-upgrade-pulse-lite;
  }

  .edge-road-choice {
    opacity: 0.98;
  }

  .edge-road-choice-aura {
    filter: none;
    opacity: 0.2;
  }

  .resource-risk-meter.is-risk {
    animation-duration: 1.9s;
  }
}

@media (pointer: coarse) {
  .edge.valid-road .edge-hit {
    stroke-width: 72;
  }

  .vertex-hit {
    r: 24px;
  }
}

@media (max-width: 620px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    min-height: 46px;
    margin-bottom: 6px;
    padding:
      max(5px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      5px
      max(8px, env(safe-area-inset-left));
  }

  .topbar h1,
  .brand-home-button {
    font-size: 16px;
  }

  .environment-badge {
    display: none;
  }

  .brand-home-button {
    gap: 5px;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .topbar-center {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .topbar-center.is-empty {
    display: none;
  }

  .topbar-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .topbar-shortcut-keycap {
    display: none;
  }

  .nav-button.has-shortcut {
    gap: 8px;
    padding-inline: 13px;
  }

  .settings-button.has-shortcut {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .friends-popover {
    position: fixed;
    top: calc(max(5px, env(safe-area-inset-top)) + 46px);
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .friends-popover::before {
    right: 96px;
  }

  .friends-popover-head h2 {
    font-size: 23px;
  }

  .friend-quick-actions {
    grid-template-columns: 1fr;
  }

  .friend-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-button {
    min-height: 36px;
    min-width: 0;
    padding: 0 9px;
  }

  .new-game-button {
    width: auto;
  }

  .nav-button.icon-only {
    width: 36px;
    min-height: 36px;
  }

  .nav-button span {
    font-size: 11.5px;
  }

  .new-game-button span,
  .leaderboard-button span {
    display: none;
  }

  .leaderboard-button,
  .new-game-button {
    width: 36px;
    padding: 0;
  }

  .room-seat-card,
  .rooms-signin-panel,
  .store-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .rooms-signin-panel .primary {
    width: 100%;
  }

  .room-player-count {
    min-width: 0;
    width: 100%;
  }

  .room-player-count button {
    flex: 1 1 0;
  }

  .room-fill-grid {
    grid-template-columns: 1fr;
  }

  .room-builder-actions,
  .room-builder-actions .primary {
    width: 100%;
  }

  .room-builder-actions .primary {
    justify-content: center;
  }

  .board-svg {
    height: 100%;
    min-height: 0;
  }

  .board-stage {
    --board-floating-inset: 10px;
    --board-action-hud-height: 178px;
    --board-control-size: 36px;
    --board-control-gap: 6px;
    height: var(--board-height, 71vh);
    min-height: 450px;
  }

  .board-controls {
    top: 8px;
    right: 8px;
    gap: var(--board-control-gap);
    grid-template-columns: repeat(3, var(--board-control-size));
    grid-template-rows: repeat(2, var(--board-control-size));
  }

  .board-control,
  .board-lock-toggle {
    width: var(--board-control-size);
    min-height: var(--board-control-size);
  }

  .board-hint-area {
    top: var(--board-floating-inset);
    left: var(--board-floating-inset);
    width: calc(
      100%
      - var(--board-floating-inset)
      - ((var(--board-control-size) * 2) + (var(--board-control-gap) * 2) + var(--board-floating-inset))
    );
  }

  .board-hint-area.is-trading {
    width: calc(
      100%
      - var(--board-floating-inset)
      - ((var(--board-control-size) * 2) + (var(--board-control-gap) * 2) + var(--board-floating-inset))
    );
  }

  .board-hint-toggle {
    width: 36px;
    min-height: 36px;
  }

  .board-hint-card {
    padding: 9px 10px;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .board-hint-collapse {
    top: 0;
    bottom: 0;
    width: 10px;
  }

  .board-hint-collapse:hover,
  .board-hint-collapse:focus-visible {
    width: 12px;
  }

  .board-hint-copy h2 {
    font-size: 14px;
  }

  .board-hint-copy p {
    font-size: 11px;
  }

  .board-stage {
    --dice-size: 30px;
    --dice-space: 5px;
    --dice-prompt-width: 204px;
  }

  .board-action-bar {
    --hud-button-size: 44px;
    grid-template-columns: 1fr;
    grid-template-rows: var(--hud-button-size) auto;
    gap: 7px;
  }

  .board-action-buttons {
    grid-template-columns: repeat(6, var(--hud-button-size));
    gap: 6px;
    padding-inline: var(--board-floating-inset);
  }

  .board-action-bar > .board-hand-tray {
    --hand-card-width: 31px;
    --hand-card-height: 43px;
    min-height: calc(var(--hand-card-height) + var(--hand-card-height) + 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 10px;
  }

  .board-hand-tray .board-hand-card,
  .board-shelf-dev-card,
  .board-hand-placeholder {
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    flex-basis: var(--hand-card-width);
  }

  .board-hand-group {
    gap: 6px;
    padding: 0;
  }

  .board-shelf-dev-icon,
  .board-shelf-dev-icon .dev-symbol {
    width: 22px;
    height: 22px;
  }

  .board-hand-placeholder svg {
    width: 21px;
    height: 21px;
  }

  .board-shelf-dev-label {
    font-size: 6px;
  }

  .board-hand-empty {
    font-size: 10px;
  }

  .resource-risk-meter {
    width: 46px;
    height: 46px;
  }

  .resource-risk-ring {
    width: 46px;
    height: 46px;
  }

  .resource-risk-meter strong {
    font-size: 12.6px;
  }

  .resource-risk-meter.is-crowded strong {
    font-size: 10.8px;
  }

  .resource-risk-meter.is-risk {
    width: 104px;
    grid-template-columns: minmax(0, 50px) 46px;
    gap: 6px;
  }

  .resource-risk-note {
    max-width: 48px;
    font-size: 7.5px;
  }

  .board-hud-icon {
    width: 26px;
    height: 26px;
  }

  .board-hud-icon svg,
  .board-hud-icon .build-symbol,
  .board-hud-icon .dev-symbol {
    width: 24px;
    height: 24px;
  }

  .board-hud-count {
    top: -10px;
    right: -9px;
    min-width: 24px;
    min-height: 23px;
    font-size: 13px;
  }

  .board-dice.is-roll-prompt {
    width: var(--dice-prompt-width);
    min-width: var(--dice-prompt-width);
    max-width: min(var(--dice-prompt-width), calc(100vw - 18px));
  }

  .board-dice.is-collapsed {
    min-width: var(--dice-collapsed-width);
    max-width: var(--dice-collapsed-width);
  }

  .dice-prompt strong {
    font-size: 15px;
  }

  .turn-badge-dot {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .board-resize-y {
    left: 50%;
    right: auto;
    width: 132px;
    transform: translateX(-50%);
  }

  .board-die {
    gap: 2px;
    padding: 5px;
  }

  .die-pip {
    width: 4.5px;
    height: 4.5px;
  }

  .action-grid,
  .card-list,
  .victim-list,
  .resource-picker {
    grid-template-columns: 1fr;
  }

  .trade-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }

  .bank-emblem {
    width: 28px;
    height: 28px;
  }

  .bank-strip {
    grid-template-columns: 28px 1px max-content;
    gap: 7px;
  }

  .bank-strip::before {
    height: 36px;
  }

  .bank-emblem svg {
    width: 26px;
    height: 26px;
  }

  .bank-deck-grid {
    grid-template-columns: repeat(6, 31px);
    gap: 4px;
  }

  .stacked-card {
    min-height: 41px;
  }

  .stacked-card-count {
    min-width: 19px;
    min-height: 18px;
    font-size: 10px;
  }

  .stacked-card-icon svg {
    width: 17px;
    height: 17px;
  }

  .player-identity {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .player-avatar {
    width: 38px;
  }

  .player-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .home-screen {
    align-items: start;
    gap: 18px;
    padding-bottom: 28px;
  }

  .home-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 12px 0 10px;
  }

  .home-copy h2 {
    font-size: 52px;
  }

  .home-logo-mark {
    width: 104px;
  }

  .home-logo-copy p {
    max-width: none;
    font-size: 24px;
  }

  .home-board-card {
    order: 0;
  }

  .home-copy {
    order: -1;
  }

  .home-board-visual::after {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
      rgba(0, 0, 0, 0.04);
  }

  .home-info-grid {
    grid-template-columns: 1fr;
  }

  .home-secondary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-options {
    align-items: stretch;
    flex-direction: column;
  }

  .home-saved-games {
    width: 100%;
  }

  .saved-library-screen {
    padding-top: 12px;
  }

  .saved-library-hero,
  .saved-library-tools,
  .saved-library-card {
    grid-template-columns: 1fr;
  }

  .saved-library-hero {
    align-items: start;
  }

  .saved-library-hero > small {
    justify-self: start;
  }

  .saved-library-board {
    min-height: 240px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  }

  .home-save-card {
    grid-template-columns: 1fr;
  }

  .home-save-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px;
    justify-content: stretch;
  }

  .home-save-open {
    min-width: 0;
  }

  .home-download {
    grid-template-columns: 1fr;
  }

  .online-card {
    grid-template-columns: 1fr;
  }

  .play-mode-grid {
    grid-template-columns: 1fr;
  }

  .spectator-layout {
    grid-template-columns: 1fr;
  }

  .spectator-board-frame {
    min-height: 460px;
  }

  .online-actions-grid {
    justify-content: stretch;
  }

  .online-actions-grid > .primary,
  .online-join-form {
    width: 100%;
  }

  .online-private-room {
    grid-template-columns: 1fr;
  }

  .online-invite-row,
  .online-request-row,
  .online-friend-invite,
  .friend-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .online-invite-row,
  .online-request-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .home-download-actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .home-options .primary {
    align-self: flex-start;
  }
}

@media (max-width: 620px) {
  .home-screen {
    padding-inline: 12px;
    padding-bottom: 24px;
  }

  .home-hero {
    padding: 12px 0 6px;
  }

  .home-logo-lockup {
    gap: 10px;
  }

  .home-logo-mark {
    width: 72px;
  }

  .home-copy h2 {
    font-size: 36px;
  }

  .home-logo-copy p {
    max-width: 14ch;
    font-size: 17px;
  }

  .home-lede {
    font-size: 15px;
  }

  .home-hero-actions .hero-start {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
  }

  .play-mode-grid {
    padding: 10px;
    gap: 10px;
  }

  .play-mode-section {
    padding: 10px;
  }

  .play-mode-option:not(.play-mode-featured):not(.play-mode-host-option),
  .matchmaking-option.is-compact {
    min-height: 72px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .matchmaking-option,
  .matchmaking-option.is-compact {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .play-mode-icon {
    width: 40px;
    height: 40px;
  }

  .matchmaking-status {
    grid-template-columns: 1fr;
  }

  .matchmaking-status-actions {
    width: 100%;
    justify-content: stretch;
  }

  .matchmaking-status-actions .secondary {
    flex: 1 1 0;
  }

  .matchmaking-status .secondary {
    width: 100%;
  }

  .home-featured-resume {
    min-height: 48px;
    min-width: 136px;
    padding: 0 22px;
  }

  .home-featured-summary > strong {
    font-size: 17px;
  }

  .saved-library-hero {
    padding: 12px;
  }

  .saved-library-tools {
    padding: 8px;
  }

  .saved-library-tool-group {
    gap: 6px;
  }

  .saved-tool-chip {
    flex: 1 1 auto;
    min-width: 0;
  }

  .saved-library-details {
    padding: 13px;
  }

  .saved-library-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saved-library-actions .home-save-open {
    min-width: 0;
  }

  .hero-start span {
    font-size: 19px;
  }

  .home-section-head h2,
  .home-download-copy h2,
  .home-options h2 {
    font-size: 23px;
  }

  .home-download {
    gap: 14px;
    padding: 14px;
  }

  .home-download-actions {
    grid-template-columns: 1fr;
  }

  .home-online {
    width: min(100%, calc(100vw - 24px));
  }

  .online-card {
    gap: 14px;
    padding: 14px;
  }

  .spectator-screen,
  .admin-screen {
    width: min(100%, calc(100vw - 24px));
    padding-top: 12px;
  }

  .spectator-hero,
  .admin-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .spectator-hero h2,
  .admin-hero h2 {
    font-size: 25px;
    line-height: 1.12;
  }

  .spectator-hero p:not(.eyebrow),
  .admin-hero p:not(.eyebrow) {
    overflow-wrap: anywhere;
  }

  .spectator-actions,
  .admin-hero-actions,
  .admin-state-actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: stretch;
  }

  .spectator-actions .secondary,
  .spectator-actions .spectator-live-pill,
  .admin-hero-actions button,
  .admin-state-actions button {
    width: 100%;
  }

  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-status-strip,
  .admin-detail-grid,
  .admin-history-grid {
    grid-template-columns: 1fr;
  }

  .admin-status-strip span,
  .admin-detail-grid span {
    border-right: 0;
  }

  .admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-account-search,
  .admin-account-layout,
  .admin-profile-form,
  .admin-note-form,
  .admin-history-grid {
    grid-template-columns: 1fr;
  }

  .admin-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-account-detail-head,
  .admin-account-actions,
  .admin-detail-actions,
  .admin-search-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-account-detail-head button,
  .admin-account-actions button,
  .admin-detail-actions button,
  .admin-search-actions button,
  .admin-profile-form button,
  .admin-note-form button {
    width: 100%;
  }

  .admin-report-panel .moderator-report-row,
  .admin-report-panel .moderator-report-actions {
    grid-template-columns: 1fr;
  }

  .spectator-board-head,
  .spectator-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .spectator-board-frame {
    min-height: 360px;
    padding: 8px;
  }

  .spectator-board-frame .home-board-preview {
    min-height: 320px;
    height: min(62vh, 520px);
  }

  .spectator-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .online-card-copy {
    align-items: flex-start;
  }

  .online-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .online-card h3 {
    font-size: 20px;
  }

  .online-join-form {
    grid-template-columns: 1fr;
  }

  .online-player-chips {
    grid-template-columns: 1fr;
  }

  .online-lobby-head,
  .online-lobby-actions,
  .account-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .online-lobby-section-head,
  .friend-manager-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .friend-add-form {
    grid-template-columns: 1fr;
  }

  .online-friend-invite {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .friend-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .friend-row .friend-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
    min-width: 0;
  }

  .friend-row .friend-actions .secondary:not(.friend-icon-action) {
    flex: 1 1 auto;
  }

  .leaderboard-body {
    gap: 8px;
  }

  .leaderboard-top-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .leaderboard-self-card.is-signed-out,
  .leaderboard-self-head {
    align-items: stretch;
    flex-direction: column;
  }

  .leaderboard-self-card.is-signed-out {
    grid-template-columns: 1fr;
  }

  .leaderboard-toolbar {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }

  .leaderboard-self-stats,
  .leaderboard-row-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-row-stats span:last-child {
    grid-column: 1 / -1;
  }

  .leaderboard-toolbar,
  .leaderboard-pager,
  .leaderboard-sort,
  .leaderboard-sort-block {
    width: 100%;
  }

  .leaderboard-sort-block {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .leaderboard-sort button {
    flex: 1 1 0;
  }

  .leaderboard-pager {
    justify-content: space-between;
    justify-self: stretch;
  }

  .leaderboard-row {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .leaderboard-row-stats,
  .leaderboard-row-actions {
    grid-column: 1 / -1;
  }

  .leaderboard-row-actions {
    justify-content: stretch;
  }

  .leaderboard-row-actions .secondary {
    flex: 1 1 auto;
  }

  .account-email {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .account-username-head,
  .account-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .moderator-tools-head,
  .moderator-panel-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .moderator-panel-tools .segmented {
    width: 100%;
  }

  .moderator-report-row {
    grid-template-columns: 1fr;
  }

  .moderator-report-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .download-button,
  .download-secondary {
    width: 100%;
  }

  .download-secondary span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .home-options {
    padding: 14px 0;
  }

  .home-footer {
    padding: 16px;
  }

  .footer-brand {
    align-items: flex-start;
    gap: 12px;
  }

  .footer-logo-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .footer-links h3 {
    font-size: 11px;
  }

  .footer-links a,
  .footer-links button {
    font-size: 12px;
    line-height: 1.25;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .setup-backdrop {
    --setup-modal-top-gap: max(14px, calc(env(safe-area-inset-top) + 12px));
    --setup-modal-right-gap: max(10px, env(safe-area-inset-right));
    --setup-modal-bottom-gap: max(10px, calc(env(safe-area-inset-bottom) + 10px));
    --setup-modal-left-gap: max(10px, env(safe-area-inset-left));
    place-items: start center;
  }

  .setup-modal {
    max-height: calc(100vh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
    max-height: calc(100dvh - var(--setup-modal-top-gap) - var(--setup-modal-bottom-gap));
  }

  .setup-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .setup-grid-compact {
    gap: 8px;
  }

  .setup-card-compact {
    padding: 9px 10px;
  }

  .clock-mode-control {
    grid-template-columns: minmax(48px, 0.74fr) minmax(48px, 0.66fr) minmax(88px, 1.28fr);
    gap: 4px;
  }

  .clock-mode-control button {
    min-height: 30px;
    padding-inline: 4px;
    font-size: 13px;
  }

  .setup-option-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
  }

  .game-menu-actions {
    grid-template-columns: 1fr;
  }

  .setup-option-controls.is-harbor {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setup-head,
  .setup-actions {
    padding: 10px 12px;
  }

  .setup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.native-player-strip.player-count-3 .native-player-card,
.native-player-strip.player-count-4 .native-player-card {
  --native-player-content-width: min(100%, 62px);
  min-height: 58px;
  gap: 4px;
  padding: 5px 5px 6px;
}

.native-player-strip.player-count-3 .native-player-head strong,
.native-player-strip.player-count-4 .native-player-head strong {
  font-size: 9.5px;
}

.native-player-strip.player-count-3 .native-player-stats,
.native-player-strip.player-count-4 .native-player-stats {
  width: var(--native-player-content-width);
  max-width: 100%;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-auto-rows: max-content;
  gap: 4px 7px;
  align-content: start;
  justify-content: start;
  padding-right: 0;
}

.native-player-strip.player-count-3 .native-player-vp,
.native-player-strip.player-count-4 .native-player-vp {
  min-width: 28px;
  min-height: 16px;
  padding-inline: 4px;
  font-size: 9.2px;
}

@container (min-width: 640px) {
  .native-player-strip.player-count-3:not(.native-side-players) .native-player-stats,
  .native-player-strip.player-count-4:not(.native-side-players) .native-player-stats {
    width: var(--native-player-content-width);
    max-width: 100%;
    justify-self: center;
    display: flex;
    justify-content: flex-start;
    gap: clamp(8px, 5%, 18px);
    padding-right: 0;
  }

  .native-player-strip.player-count-3:not(.native-side-players) .native-player-card,
  .native-player-strip.player-count-4:not(.native-side-players) .native-player-card {
    --native-player-content-width: min(100%, 126px);
    min-height: 0;
    padding: 6px 6px 7px;
  }
}

@media (max-width: 679px), (orientation: portrait), (max-width: 1020px) and (min-height: 621px) {
  .app-shell.is-native-game .native-game-layout > .native-player-strip:not(.native-side-players) {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    gap: 6px 9px;
  }

  .app-shell.is-native-game .native-game-layout > .native-player-strip:not(.native-side-players) .native-player-card {
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    padding-inline: 10px;
  }

  .app-shell.is-native-game .native-game-layout > .native-player-strip:not(.native-side-players).player-count-3 .native-player-card,
  .app-shell.is-native-game .native-game-layout > .native-player-strip:not(.native-side-players).player-count-4 .native-player-card {
    --native-player-content-width: min(100%, 76px);
    padding-inline: 8px;
  }
}

@media (orientation: landscape) and (min-width: 680px) and (max-height: 620px), (min-width: 1021px) {
  .native-side-players {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    gap: 8px 12px;
  }

  .native-side-players .native-player-card {
    width: max-content;
    flex: 0 0 auto;
    padding-inline: 10px;
  }

  .native-side-players.player-count-3 .native-player-card,
  .native-side-players.player-count-4 .native-player-card {
    --native-player-content-width: min(100%, 76px);
    padding-inline: 8px;
  }
}

@media (orientation: landscape) and (min-width: 680px) and (max-height: 620px), (min-width: 1021px) {
  .app-shell.is-native-game .native-game-layout .native-board-panel .turn-clock {
    top: auto;
    bottom: max(var(--board-floating-inset, 8px), env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-over-confetti span {
    animation: none;
    opacity: 0.42;
    transform: translateY(42vh) rotate(var(--rotate));
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-nav-main::before {
    transition: none;
  }

  body.is-android-app .hub-shell.is-tab-transition-next .hub-main,
  body.is-android-app .hub-shell.is-tab-transition-prev .hub-main {
    animation: none;
  }

}

/* Leaderboard: stable table layout and restrained refresh feedback. */
.leaderboard-refresh-button.is-loading svg {
  opacity: 0.72;
  transform-origin: center;
  animation: leaderboard-refresh-spin 1.8s linear infinite;
}

.leaderboard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.leaderboard-top-strip {
  grid-template-columns: minmax(280px, 0.72fr) minmax(540px, 1.28fr);
  gap: 10px;
}

.leaderboard-toolbar {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 12px;
}

.leaderboard-control-groups {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.leaderboard-control-group {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.leaderboard-control-group > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.leaderboard-filter button {
  min-width: 52px;
}

.leaderboard-message-row {
  flex: 0 0 auto;
}

.leaderboard-list-shell {
  position: relative;
  min-width: 0;
  min-height: 260px;
  flex: 1 1 320px;
  overflow: hidden;
  container: leaderboard-table / inline-size;
}

.leaderboard-loading-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.leaderboard-table {
  min-width: 0;
  min-height: 260px;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
}

.leaderboard-table-grid {
  display: grid;
  grid-template-columns: 52px minmax(160px, 1.6fr) repeat(4, minmax(64px, 0.56fr)) minmax(92px, 0.76fr);
  gap: 10px;
  align-items: center;
}

.leaderboard-table-head {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2));
}

.leaderboard-table-head > span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.leaderboard-table-head .leaderboard-col-rank {
  text-align: right;
}

.leaderboard-table-head .leaderboard-col-wins,
.leaderboard-table-head .leaderboard-col-games,
.leaderboard-table-head .leaderboard-col-rate,
.leaderboard-table-head .leaderboard-col-vp {
  text-align: center;
}

.leaderboard-table-head .leaderboard-col-status {
  text-align: right;
}

.leaderboard-list {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.leaderboard-row {
  min-width: 0;
  min-height: 62px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 0;
  background: transparent;
}

.leaderboard-row:last-child {
  border-bottom: 0;
}

.leaderboard-row.is-self {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
}

.leaderboard-player-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.leaderboard-player-cell .leaderboard-avatar {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.leaderboard-stat-cell {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.leaderboard-row-actions {
  min-width: 0;
  grid-column: auto;
  justify-content: flex-end;
}

.leaderboard-row-actions .secondary {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 9px;
  font-size: 11px;
}

.leaderboard-status-idle {
  color: color-mix(in srgb, var(--muted) 66%, transparent);
  font-weight: 900;
}

.leaderboard-empty {
  min-height: 100%;
  padding: 28px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.leaderboard-empty > div {
  display: grid;
  place-items: center;
  gap: 7px;
}

.leaderboard-empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.76;
}

.leaderboard-empty strong {
  font-size: 18px;
}

@container leaderboard-table (max-width: 720px) {
  .leaderboard-table-grid {
    grid-template-columns: 48px minmax(145px, 1.5fr) repeat(3, minmax(62px, 0.62fr)) minmax(80px, 0.74fr);
  }

  .leaderboard-col-vp {
    display: none;
  }
}

@container leaderboard-table (max-width: 560px) {
  .leaderboard-table-grid {
    grid-template-columns: 44px minmax(128px, 1fr) 60px 72px minmax(66px, 0.7fr);
    gap: 8px;
  }

  .leaderboard-col-games,
  .leaderboard-col-vp {
    display: none;
  }

  .leaderboard-table-head,
  .leaderboard-row {
    padding-inline: 10px;
  }

  .leaderboard-player-cell .leaderboard-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}

@container leaderboard-table (max-width: 430px) {
  .leaderboard-table-grid {
    grid-template-columns: 40px minmax(108px, 1fr) 66px 44px;
    gap: 7px;
  }

  .leaderboard-col-wins,
  .leaderboard-col-games,
  .leaderboard-col-vp {
    display: none;
  }

  .leaderboard-player small {
    display: none;
  }

  .leaderboard-row-actions .secondary {
    width: 32px;
    min-height: 32px;
    padding: 0;
  }

  .leaderboard-row-actions .secondary span {
    display: none;
  }

  .leaderboard-table-head .leaderboard-col-status {
    font-size: 0;
  }

  .leaderboard-table-head .leaderboard-col-status::after {
    content: "Now";
    font-size: 9px;
  }
}

@media (max-width: 1200px) {
  .leaderboard-top-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .leaderboard-toolbar {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .leaderboard-pager {
    width: 100%;
    justify-content: space-between;
    justify-self: stretch;
  }
}

@media (max-width: 620px) {
  .leaderboard-body,
  .leaderboard-top-strip {
    gap: 8px;
  }

  .leaderboard-toolbar {
    padding: 9px;
  }

  .leaderboard-control-groups {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
  }

  .leaderboard-control-group {
    display: grid;
    gap: 5px;
  }

  .leaderboard-control-group .leaderboard-sort {
    width: 100%;
  }

  .leaderboard-control-group .leaderboard-sort button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 7px;
  }

  .leaderboard-list-shell,
  .leaderboard-table {
    min-height: 240px;
  }
}

@media (max-width: 360px) {
  .leaderboard-control-groups {
    grid-template-columns: 1fr;
  }
}

@keyframes leaderboard-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-refresh-button.is-loading svg {
    animation: none;
  }
}

.custom-boards-page {
  gap: 12px;
}

.custom-boards-head {
  align-items: center;
}

.custom-board-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.custom-board-library,
.custom-board-editor {
  min-width: 0;
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-lg);
  background: var(--ui-card-bg);
  box-shadow: var(--ui-card-shadow);
}

.custom-board-library {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  overflow: hidden;
}

.custom-board-library-head,
.custom-board-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.custom-board-library-head {
  min-height: 46px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.custom-board-library-head strong,
.custom-board-section-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.custom-board-library-head small,
.custom-board-section-head small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.custom-board-library-list {
  display: grid;
  gap: 5px;
  padding: 7px;
}

.custom-board-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 64%, transparent);
}

.custom-board-library-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}

.custom-board-library-item > button {
  min-width: 0;
  display: block;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.custom-board-library-item > button strong,
.custom-board-library-item > button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-board-library-item > button strong {
  font-size: 12px;
  font-weight: 950;
}

.custom-board-library-item > button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.custom-board-library-item > span {
  display: grid;
  gap: 3px;
  padding-right: 5px;
}

.custom-board-library-item > span button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.custom-board-library-item > span svg,
.custom-board-library-empty svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-board-library-item > span button:hover,
.custom-board-library-item > span button:focus-visible {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--accent-strong);
  outline: none;
}

.custom-board-library-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
}

.custom-board-library-empty svg {
  width: 28px;
  height: 28px;
  color: var(--accent-strong);
}

.custom-board-library-empty strong {
  color: var(--text);
  font-size: 12px;
}

.custom-board-library-empty small {
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.custom-board-editor {
  display: grid;
  overflow: hidden;
}

.custom-board-editor-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.custom-board-editor-head label,
.custom-board-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.custom-board-editor-head label > span,
.custom-board-field > span,
.custom-board-tool-group > span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-board-editor-head input,
.custom-board-field select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  outline: none;
}

.custom-board-editor-head input {
  width: 100%;
  padding: 0 11px;
}

.custom-board-field select {
  padding: 0 9px;
}

.custom-board-editor-head input:focus,
.custom-board-field select:focus {
  border-color: color-mix(in srgb, var(--accent-strong) 70%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.custom-board-primary-actions,
.custom-board-shape-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.custom-board-primary-actions button,
.custom-board-shape-actions button {
  min-height: 36px;
  padding-inline: 13px;
  font-size: 11px;
}

.custom-board-toolbar .custom-board-shape-actions {
  flex-direction: column;
  align-items: stretch;
  margin-top: 20px;
}

.custom-board-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(235px, 0.9fr) minmax(260px, 0.85fr) 102px;
  gap: 10px;
  align-items: start;
  padding: 10px 12px 11px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 54%, transparent);
}

.custom-board-tool-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.custom-board-tool-group > div {
  min-width: 0;
  gap: 5px;
}

.cursor-tools > div {
  display: flex;
}

.terrain-tools > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(52px, 1fr));
}

.number-tools > div {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  grid-template-rows: repeat(2, 42px);
  grid-auto-flow: row;
  justify-content: start;
}

.custom-board-tool,
.custom-board-number-tool,
.custom-board-cursor-tool {
  min-width: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
}

.custom-board-tool {
  min-height: 48px;
  grid-template-rows: 31px auto;
  gap: 1px;
  padding: 3px 3px 4px;
}

.custom-board-number-tool {
  width: 42px;
  height: 42px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
}

.custom-board-tool b {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-board-cursor-tool {
  width: 70px;
  min-height: 48px;
  position: relative;
  grid-template-columns: 20px auto;
  gap: 5px;
  padding: 0 8px;
}

.custom-board-cursor-tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-board-cursor-tool b {
  font-size: 9px;
  font-weight: 900;
}

.custom-board-cursor-tool kbd {
  position: absolute;
  inset: 3px 3px auto auto;
  color: var(--muted);
  font-size: 7px;
  font-weight: 950;
}

.custom-board-tool.is-active,
.custom-board-number-tool.is-active,
.custom-board-cursor-tool.is-active,
.custom-board-tool:hover,
.custom-board-number-tool:hover,
.custom-board-cursor-tool:hover,
.custom-board-tool:focus-visible,
.custom-board-number-tool:focus-visible,
.custom-board-cursor-tool:focus-visible {
  border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  color: var(--accent-strong);
  outline: none;
}

.custom-board-tool.is-active b {
  color: var(--accent-strong);
}

.custom-board-terrain-preview {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
}

.custom-board-terrain-preview svg {
  width: 31px;
  height: 31px;
  overflow: visible;
}

.custom-board-terrain-preview-fill {
  stroke: color-mix(in srgb, var(--board-line) 76%, transparent);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.custom-board-terrain-preview-fill.is-random {
  fill: url("#custom-board-toolbar-random-fill");
}

.custom-board-terrain-preview text {
  fill: color-mix(in srgb, var(--terrain-text) 82%, var(--text));
  font-size: 12px;
  font-weight: 950;
  text-anchor: middle;
}

.custom-board-token-preview {
  width: 38px;
  height: 38px;
  display: grid;
  grid-template-rows: 1fr 9px;
  place-items: center;
  padding: 5px 3px 3px;
  border: 1.5px solid var(--board-token-line);
  border-radius: 999px;
  background: var(--board-token-bg);
  color: var(--board-token-text);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.custom-board-token-preview > b {
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.custom-board-token-preview > i {
  min-height: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4px;
  color: var(--board-token-pips);
  font-size: 5.5px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.custom-board-token-preview > i > span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.custom-board-token-preview.is-hot {
  color: #b73434;
}

.custom-board-token-preview.is-hot > i {
  color: #b73434;
}

.custom-board-token-preview.is-auto {
  color: var(--muted);
}

.custom-board-number-tool.is-active {
  border-color: color-mix(in srgb, var(--accent-strong) 64%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.custom-terrain-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.custom-terrain-random {
  background: conic-gradient(var(--terrain-hills), var(--terrain-fields), var(--terrain-pasture), var(--terrain-forest), var(--terrain-mountains), var(--terrain-hills));
}

.custom-terrain-hills { fill: var(--terrain-hills); background: var(--terrain-hills); }
.custom-terrain-forest { fill: var(--terrain-forest); background: var(--terrain-forest); }
.custom-terrain-fields { fill: var(--terrain-fields); background: var(--terrain-fields); }
.custom-terrain-pasture { fill: var(--terrain-pasture); background: var(--terrain-pasture); }
.custom-terrain-mountains { fill: var(--terrain-mountains); background: var(--terrain-mountains); }
.custom-terrain-desert { fill: var(--terrain-desert); background: var(--terrain-desert); }

.custom-board-edit-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) 230px;
  align-items: stretch;
}

.custom-board-canvas-wrap {
  min-width: 0;
  position: relative;
  background: var(--board-water);
  overflow: hidden;
}

.custom-board-minimap {
  width: 132px;
  position: absolute;
  inset: 10px auto auto 10px;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  backdrop-filter: blur(9px);
}

.custom-board-minimap > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.custom-board-minimap > span small {
  color: var(--muted);
  font-size: 8px;
}

.custom-board-minimap svg {
  width: 100%;
  height: 72px;
  display: block;
  border-radius: 6px;
}

.custom-board-minimap-water {
  fill: color-mix(in srgb, var(--board-water) 88%, var(--surface));
}

.custom-board-minimap-tile {
  stroke: color-mix(in srgb, var(--board-line) 70%, transparent);
  stroke-width: 7;
}

.custom-board-minimap-tile.is-random {
  fill: url("#custom-board-random-fill");
}

.custom-board-minimap-viewport {
  fill: color-mix(in srgb, var(--accent) 9%, transparent);
  stroke: var(--accent-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.custom-board-canvas-help {
  position: absolute;
  inset: 10px 10px auto auto;
  z-index: 2;
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.custom-board-canvas-help span {
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.custom-board-canvas-help b {
  color: var(--text);
  font-weight: 950;
}

.custom-board-canvas-controls {
  position: absolute;
  inset: auto 10px 10px auto;
  z-index: 3;
  display: flex;
  gap: 5px;
}

.custom-board-canvas-controls button {
  width: 32px;
  height: 32px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

.custom-board-canvas-controls button:hover,
.custom-board-canvas-controls button:focus-visible {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  outline: none;
}

.custom-board-canvas-controls svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-board-canvas {
  width: 100%;
  height: clamp(430px, 57vh, 590px);
  display: block;
  touch-action: none;
  user-select: none;
}

.custom-board-canvas-water {
  fill: var(--board-water);
}

.custom-board-grid-cell {
  cursor: crosshair;
  outline: none;
}

.custom-board-canvas.is-pan-mode,
.custom-board-canvas.is-pan-mode .custom-board-grid-cell {
  cursor: grab;
}

body.is-custom-board-painting,
body.is-custom-board-painting .custom-board-grid-cell {
  cursor: crosshair !important;
  user-select: none;
}

body.is-custom-board-panning,
body.is-custom-board-panning .custom-board-canvas,
body.is-custom-board-panning .custom-board-grid-cell {
  cursor: grabbing !important;
  user-select: none;
}

.custom-board-grid-slot {
  fill: color-mix(in srgb, var(--surface) 7%, transparent);
  stroke: color-mix(in srgb, var(--accent) 19%, var(--line));
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
  transition:
    fill 140ms ease,
    stroke 140ms ease,
    transform 140ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.custom-board-grid-cell:hover .custom-board-grid-slot,
.custom-board-grid-cell:focus-visible .custom-board-grid-slot {
  fill: color-mix(in srgb, var(--accent-soft) 20%, transparent);
  stroke: var(--accent-strong);
  stroke-dasharray: none;
  stroke-width: 2;
}

.custom-board-grid-cell.is-filled .custom-board-grid-slot {
  fill: transparent;
  stroke: transparent;
  stroke-dasharray: none;
}

.custom-board-grid-tile {
  stroke: color-mix(in srgb, var(--board-line) 72%, transparent);
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition:
    filter 150ms ease,
    transform 150ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.custom-board-grid-cell:hover .custom-board-grid-tile,
.custom-board-grid-cell:focus-visible .custom-board-grid-tile {
  filter: brightness(1.06) drop-shadow(0 7px 8px rgba(0, 0, 0, 0.22));
  transform: translateY(-2px) scale(1.018);
}

.custom-board-grid-cell.is-random .custom-board-grid-tile {
  fill: url("#custom-board-random-fill");
}

.custom-board-random-mark {
  fill: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 22px;
  font-weight: 950;
  text-anchor: middle;
  pointer-events: none;
}

.custom-board-number-chip {
  pointer-events: none;
}

.custom-board-number-chip circle {
  fill: var(--board-token-bg);
  stroke: var(--board-token-line);
  stroke-width: 1.7;
}

.custom-board-number-chip text {
  fill: var(--board-token-text);
  font-size: 10px;
  font-weight: 950;
  text-anchor: middle;
}

.custom-board-number-chip .pips {
  fill: var(--board-token-pips);
}

.custom-board-number-chip.is-hot text,
.custom-board-number-chip.is-hot .pips {
  fill: #b73434;
}

.custom-board-inspector {
  min-width: 0;
  display: grid;
  align-content: start;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}

.custom-board-inspector > section {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.custom-board-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.custom-board-stat-grid > span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.custom-board-stat-grid b {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.custom-board-stat-grid small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.custom-board-terrain-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}

.custom-board-terrain-counts span {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.custom-board-terrain-counts .custom-terrain-swatch {
  width: 11px;
  height: 11px;
  flex-basis: 11px;
  border-radius: 3px;
}

.custom-board-terrain-counts b {
  color: var(--text);
  font-weight: 950;
}

.custom-board-validation {
  border-bottom: 0 !important;
}

.custom-board-validation p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.custom-board-validation.is-valid strong {
  color: var(--accent-strong);
}

.custom-board-validation.is-invalid strong,
.custom-board-validation.is-invalid p:not(.is-warning) {
  color: var(--danger);
}

.custom-board-validation p.is-warning {
  color: color-mix(in srgb, #f1bd55 78%, var(--text));
}

.custom-board-notice {
  position: sticky;
  bottom: 10px;
  justify-self: end;
  z-index: 5;
  max-width: min(420px, 100%);
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

@media (max-width: 1160px) {
  .custom-board-workspace {
    grid-template-columns: 1fr;
  }

  .custom-board-library {
    position: static;
  }

  .custom-board-library-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .custom-board-library-empty {
    min-height: 88px;
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .home-tab-nav,
  .home-tab-nav-main {
    grid-template-columns: repeat(var(--home-tab-count, 5), minmax(0, 1fr));
  }

  body.is-android-app .home-tab-nav.is-android-swipe-nav .home-tab-nav-main::before {
    width: calc(var(--home-tab-item-share, 20%) - var(--home-tab-gap-adjustment, 3.2px));
  }

  .home-tab-group {
    display: contents;
  }

  .home-tab-group > .home-tab-button {
    grid-template-columns: 1fr;
  }

  .home-tab-label-stack {
    align-self: auto;
    display: block;
    overflow: hidden;
    transform: none;
  }

  .home-tab-expand-icon,
  .home-tab-subnav-wrap {
    display: none;
  }

  .custom-games-shell {
    gap: 10px;
  }

  .custom-games-mobile-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--ui-menu-bg);
  }

  .custom-games-mobile-nav .custom-games-section-button {
    min-height: 42px;
    grid-template-columns: 18px auto;
    justify-content: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: var(--radius-md);
    font-size: 10px;
    text-align: center;
  }

  .custom-games-mobile-nav .custom-games-section-button::before {
    inset: auto 8px 1px;
    width: auto;
    height: 3px;
    transform: scaleX(0.35);
  }

  .custom-games-mobile-nav .custom-games-section-button.is-active {
    background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface));
  }

  .custom-games-mobile-nav .custom-games-section-button.is-active::before {
    transform: scaleX(1);
  }

  .custom-games-mobile-nav .custom-games-section-button:not(.is-active):hover {
    transform: translateY(-1px);
  }

  .rooms-launchpad,
  .community-game-grid {
    grid-template-columns: 1fr;
  }

  .room-setup-modal .room-settings-grid {
    grid-template-columns: 1fr;
  }

  .custom-boards-page {
    gap: 8px;
  }

  .custom-board-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-board-editor-head,
  .custom-board-toolbar,
  .custom-board-edit-grid {
    grid-template-columns: 1fr;
  }

  .custom-board-toolbar {
    align-items: start;
  }

  .custom-board-primary-actions,
  .custom-board-shape-actions {
    justify-content: stretch;
  }

  .custom-board-toolbar .custom-board-shape-actions {
    flex-direction: row;
    margin-top: 0;
  }

  .custom-board-primary-actions button,
  .custom-board-shape-actions button {
    flex: 1 1 0;
  }

  .custom-board-canvas {
    height: min(68vh, 560px);
    min-height: 390px;
  }

  .custom-board-inspector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .custom-board-inspector > section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  .room-host-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .room-host-card-icon {
    width: 38px;
    height: 38px;
  }

  .room-host-card .primary {
    grid-column: 1 / -1;
    width: 100%;
  }

  .community-game-feature {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px;
  }

  .community-game-icon {
    width: 40px;
    height: 40px;
  }

  .community-game-feature .primary,
  .community-game-feature .secondary {
    grid-column: 1 / -1;
    width: 100%;
  }

  .room-setup-modal {
    width: calc(100vw - 18px);
  }

  .custom-board-library-list,
  .custom-board-inspector {
    grid-template-columns: 1fr;
  }

  .custom-board-inspector > section:last-child {
    grid-column: auto;
  }

  .custom-board-canvas-help {
    inset: 7px 7px auto auto;
  }

  .custom-board-canvas-help span {
    font-size: 8px;
  }

  .terrain-tools > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .number-tools > div {
    grid-template-columns: repeat(6, 40px);
    grid-template-rows: repeat(2, 40px);
  }

  .custom-board-number-tool {
    width: 40px;
    height: 40px;
  }

  .custom-board-token-preview {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-board-grid-slot,
  .custom-board-grid-tile {
    transition: none;
  }
}

/* Keep Quick Play as a single, viewport-fitted workspace. */
.hub-shell[data-home-tab="quick-play"] .hub-main {
  overflow: hidden;
  padding-right: 0;
  scrollbar-gutter: auto;
}

.quick-play-page {
  height: 100%;
  min-height: 0;
  gap: clamp(8px, 1.4vh, var(--ui-page-gap));
  padding-bottom: 0;
}

.quick-play-layout {
  height: 100%;
  min-height: 0;
  align-content: stretch;
  align-items: stretch;
  overflow: hidden;
}

.quick-play-board {
  min-height: 0;
  align-content: stretch;
}

.quick-play-board .home-board-card {
  width: 100%;
  height: 100%;
  max-height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-self: stretch;
}

.quick-play-board .home-board-visual,
.quick-play-board .home-board-preview-action,
.quick-play-board .home-board-preview-action .home-board-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.quick-play-board .home-board-visual {
  aspect-ratio: auto;
}

.quick-play-board .home-board-preview-action {
  border-radius: 7px 7px 0 0;
}

.quick-play-board .home-board-preview-action:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-strong) 72%, transparent);
}

.quick-latest-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 901px) and (max-height: 820px) {
  .hub-shell[data-home-tab="quick-play"] {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "nav main";
  }

  .hub-shell[data-home-tab="quick-play"] .hub-left-rail,
  .hub-shell[data-home-tab="quick-play"] .hub-footer {
    display: none;
  }

  .quick-play-head h2 {
    font-size: clamp(31px, 3.25vw, 46px);
  }

  .quick-play-board .home-board-card figcaption {
    padding: 9px 11px;
  }

  .quick-play-board .home-featured-summary {
    gap: 5px;
  }

  .quick-play-board .home-featured-paused {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  .quick-play-page {
    height: calc(100% - 4px);
    gap: 6px;
  }

  .hub-shell[data-home-tab="quick-play"] .hub-download-button {
    display: none;
  }

  .quick-play-layout {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
  }

  .quick-play-panel {
    gap: 6px;
  }

  .quick-play-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .quick-play-mode-group.is-expanded {
    grid-column: 1 / -1;
  }

  .quick-play-card {
    min-height: 50px;
    padding: 8px;
  }

  .quick-card-info {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 8px;
  }

  .quick-play-card .play-mode-icon {
    width: 31px;
    height: 31px;
  }

  .quick-play-card strong {
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quick-play-card small {
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quick-play-board .home-board-card {
    width: 100%;
    max-width: none;
  }

  .quick-play-board .home-board-card figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 9px;
    padding: 7px 8px 8px;
  }

  .quick-play-board .home-featured-summary > strong {
    align-self: center;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quick-play-board .home-featured-paused,
  .quick-play-board .home-save-scoreboard,
  .quick-play-board .home-featured-times {
    display: none;
  }

  .quick-play-board .quick-latest-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .quick-play-board .quick-latest-actions .primary,
  .quick-play-board .quick-latest-actions .secondary {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 10.5px;
  }

  .quick-play-board .quick-latest-actions .primary[data-home-shortcut="resume"] {
    --resume-keycap-size: 22px;
    --resume-keycap-inset: 5px;
  }
}

@media (max-width: 900px) and (max-height: 900px) {
  .quick-play-intro-card {
    display: none;
  }

  .quick-play-head {
    padding-top: 0;
  }

  .quick-play-head .eyebrow {
    margin-bottom: 3px;
  }

  .quick-play-head h2 {
    font-size: clamp(29px, 8vw, 38px);
  }
}

/* Pointer hover is intentionally outline-only; active and keyboard states keep their fills. */
@media (hover: hover) and (pointer: fine) {
  .app-shell.is-home .topbar button:not(:disabled):hover,
  .app-shell.is-home .hub-shell button:not(:disabled):hover:not([data-home-hover-muted="true"]),
  .app-shell.is-home .settings-modal button:not(:disabled):hover:not([data-play-menu-hover-muted="true"]) {
    border-color: var(--accent-strong) !important;
    outline: none !important;
  }

  .app-shell.is-home .custom-games-section-button:not(:disabled):hover,
  .app-shell.is-home .saved-sort-options button:not(:disabled):hover,
  .app-shell.is-home .settings-section-rail button:not(:disabled):hover,
  .app-shell.is-home .appearance-segmented button:not(:disabled):hover {
    outline: 2px solid var(--accent-strong) !important;
    outline-offset: 1px;
  }

  .app-shell.is-home .home-tab-button:not(.is-active):hover {
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    transform: none;
  }

  .app-shell.is-home .custom-games-section-button:not(.is-active):hover {
    background: transparent;
    color: var(--text);
    text-shadow: 0 0 12px color-mix(in srgb, var(--text) 18%, transparent);
    transform: none;
  }

  .app-shell.is-home .settings-section-rail button:not(.is-active):hover {
    background: transparent;
    color: var(--muted);
    text-shadow: none;
    transform: none;
  }

  .app-shell.is-home .hub-download-button:not(.is-active):hover {
    background: var(--ui-menu-bg);
    color: var(--muted);
  }

  .app-shell.is-home .quick-play-mode-button:not(:disabled):not([data-home-nav-selected="true"]):hover:not([data-home-hover-muted="true"]) {
    box-shadow: none;
    transform: none;
  }

  .app-shell.is-home .play-mode-option:not(:disabled):not(.is-primary):not([data-home-nav-selected="true"]):hover:not([data-play-menu-hover-muted="true"]) {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 15%, transparent), transparent 78%),
      var(--surface);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    transform: none;
  }

  .app-shell.is-home .play-mode-option.is-primary:not(:disabled):hover:not([data-play-menu-hover-muted="true"]) {
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 86%),
      color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
    color: var(--text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    transform: none;
  }

  .app-shell.is-home .saved-sort-options button:not(.is-active):hover,
  .app-shell.is-home .leaderboard-sort button:not(.is-selected):hover {
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    transform: none;
  }

  .app-shell.is-home .saved-library-delete:not(:disabled):hover {
    background: color-mix(in srgb, #1e0909 42%, var(--surface));
    color: #ff6969;
  }

  .app-shell.is-home .settings-tabbar button:not(.is-active):hover {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--muted);
    box-shadow: none;
  }

  .app-shell.is-home .settings-section-reset:not(:disabled):hover {
    background: var(--surface);
    color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
    box-shadow: none;
  }

  .app-shell.is-home .appearance-segmented button:not(:disabled):not(.is-active):hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
  }

  .app-shell.is-home .appearance-segmented button.is-active:hover {
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
    color: var(--accent-strong);
  }

  .app-shell.is-home .volume-mute-button:not(:disabled):hover {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--accent-strong);
    box-shadow: none;
  }

  .app-shell.is-home .volume-mute-button.is-muted:not(:disabled):hover {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: color-mix(in srgb, var(--muted) 78%, var(--text));
  }

  .app-shell.is-home .keybind-clear-action:not(:disabled):hover {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--muted);
    box-shadow: none;
  }

  .app-shell.is-home .keybind-restore-action:not(:disabled):hover {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: color-mix(in srgb, var(--accent-strong) 82%, var(--text));
    box-shadow: none;
  }

  .app-shell.is-home .keybind-capture.is-empty:hover {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: color-mix(in srgb, var(--muted) 58%, transparent);
    opacity: 0.62;
  }

  .app-shell.is-home .keybind-clear-slot:hover {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: color-mix(in srgb, var(--danger) 88%, var(--text));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  }

  .app-shell.is-home .primary:not(:disabled):hover {
    background: var(--accent);
  }

  .app-shell.is-home .new-game-button:not(:disabled):hover {
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 84%, #05221e),
        color-mix(in srgb, var(--accent) 72%, var(--accent-strong))
      );
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .app-shell.is-home .download-button:hover,
  .app-shell.is-home .download-secondary:hover {
    transform: none;
  }

  .app-shell.is-home .download-button:hover {
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #ffffff 8%), color-mix(in srgb, var(--accent) 70%, #061d1a));
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }

  .app-shell.is-home .download-secondary:hover {
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
    color: var(--accent-strong);
    box-shadow: none;
  }

  .app-shell.is-home .inline-icon-button:not(:disabled):hover {
    background: color-mix(in srgb, var(--surface-2) 86%, var(--accent-soft));
    color: color-mix(in srgb, var(--text) 82%, var(--accent-strong));
    box-shadow: none;
  }

  .app-shell.is-home .topbar-actions .nav-button:not(:disabled):hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
  }
}