/* ============================================================
   POORUP — design system tokens
   ============================================================ */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-400.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-700.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: "Jersey 15";
  src: url("/assets/fonts/jersey15-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/assets/fonts/silkscreen-regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
}
:root {
  --analytics-primary: var(--gold-300);
  --analytics-comparison: var(--blue-player, #6c9fd8);
  --analytics-human: var(--blue-player, #6c9fd8);
  --analytics-ai: var(--green-player, #6da36c);
  --analytics-bot: var(--gold-400);
  --analytics-positive: var(--green-status, #79c579);
  --analytics-negative: var(--red-action, #e06b5f);
  --analytics-warning: var(--gold-100);
  --analytics-neutral: var(--line-default);
  --analytics-grid: var(--line-subtle);
  --analytics-tooltip-bg: var(--surface-panel-deep);
  --analytics-tooltip-fg: var(--text-primary);
  --bg-canvas: #01070a;
  --bg-chrome: #020a0d;

  --surface-panel: #071314;
  --surface-panel-raised: #09191a;
  --surface-panel-deep: #030c10;
  --surface-board-tile: #061011;
  --surface-board-center: #031d1e;
  --surface-input: #061216;
  --surface-button-dark: #081516;
  --surface-error: #170807;
  --line-error: #af2a21;
  --text-error: #f0b1a6;

  --gold-050: #f0d9ac;
  --gold-100: #e8d3ab;
  --gold-300: #cfa75f;
  --gold-400: #c88f2e;
  --gold-500: #9b783d;
  --gold-700: #5c5033;
  --gold-800: #a08d63;
  --gold-muted: #a79d7d;

  --text-primary: #e8d3ab;
  --text-secondary: #a79d7d;
  --text-muted: #a79d7d;

  --red-action: #af2a21;
  --red-action-hover: #be3126;
  --red-action-pressed: #98231c;
  --red-bright: #e36b5f;
  --red-dark: #87231e;

  --green-status: #35a653;
  --blue-player: #286ea1;
  --olive-icon: #78894f;

  --line-dark: #1d2927;
  --line-subtle: #3a382a;
  --line-default: #5c5033;
  --line-strong: #6b5a36;
  --line-active: #c88f2e;
  --line-board: #9b783d;
  --line-shadow: #101916;

  /* Cosmetic theme hooks. Original values preserve the baseline exactly. */
  --theme-focus: var(--gold-100);
  --theme-scanline: rgb(255 255 255 / 1.6%);
  --theme-scrim: rgb(1 7 10 / 72%);
  --theme-setup-scrim: rgb(1 7 10 / 65%);
  --theme-gallery-scrim: rgb(1 7 10 / 90%);
  --theme-logo-primary: #9b783d;
  --theme-logo-secondary: #cfa75f;
  --theme-icon-primary: #cfa75f;
  --theme-icon-secondary: #f0d9ac;
  --surface-inset: #04100f;
  --surface-button-hover: #0c1c1d;
  --surface-button-pressed: #050f10;
  --surface-disabled: #071011;
  --surface-selected: #0c1f1c;
  --surface-hover: #0b1c1d;
  --surface-board-hover: #0a1a1a;
  --surface-avatar: #0a1416;
  --surface-card: #071516;
  --surface-active: #0d211f;
  --surface-special: #0c2524;
  --surface-board-frame: #020c0d;
  --field-placeholder: #a79d7d;
  --wordmark-color: #e0b972;
  --wordmark-shadow-1: #b8863a;
  --wordmark-shadow-2: #8a6321;
  --wordmark-shadow-3: #4a3512;
  --theme-action-edge: #d05a49;
  --theme-action-shadow: #721c18;
  --theme-action-shadow-muted: #3d1c19;
  --music-surface: #071314;
  --music-border: #5c5033;
  --music-accent: #c88f2e;
  --music-text: #e8d3ab;
  --music-muted: #a79d7d;
  --music-meter: #c88f2e;
  --surface-card-highlight: #0b2020;
  --go-shadow-1: #b8863a;
  --go-shadow-2: #8a6321;
  --night-shadow: #8a6321;

  --shadow-panel: 0 2px 8px rgb(0 0 0 / 45%);
  --shadow-inset: inset 0 1px 0 rgb(240 217 172 / 5%);
  --shadow-active: 0 0 8px rgb(200 143 46 / 12%);

  --font-display: "Pixelify Sans", "Courier New", monospace;
  --font-ui: "Pixelify Sans", "Courier New", monospace;
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-body: "Pixelify Sans", "Courier New", monospace;
  --font-numeric: "Silkscreen", "Courier New", monospace;
  --cursor-reticle: url("/assets/parlor-patrol/crosshair.svg") 16 16;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; overflow-x: hidden; }

body {
  margin: 0;
  isolation: isolate;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  cursor: var(--cursor-reticle), crosshair;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

::selection { background: var(--gold-400); color: var(--bg-canvas); }

button { font: inherit; color: inherit; background: none; border: none; cursor: var(--cursor-reticle), crosshair; }
button:not(:disabled), a, [role="button"], summary, select, input[type="range"] { cursor: var(--cursor-reticle), crosshair; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea { cursor: text; }
input { font: inherit; }
h1, h2, h3, p { margin: 0; }

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--theme-focus, var(--gold-100));
  outline-offset: 1px;
}

/* ============================================================
   texture / structure helpers
   ============================================================ */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--theme-scanline) 0px, var(--theme-scanline) 1px, transparent 1px, transparent 3px);
}

.noise { position: relative; }
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 55%) 100%);
}

.panel {
  background: var(--surface-panel);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--line-shadow),
    inset 0 1px 0 rgb(232 211 171 / 6%),
    0 2px 6px rgb(0 0 0 / 38%);
}

/* ============================================================
   THEME ENVIRONMENT LAYERS
   Decorative worlds sit behind the existing Poorup surfaces. They never
   own input, layout tracks, game state, or semantic status colors.
   ============================================================ */
.view { position: relative; z-index: 1; }
.theme-page-world,
.theme-home-world,
.theme-board-world {
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}
.theme-page-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--theme-sky, var(--surface-board-center));
  opacity: 0.24;
  --theme-scene-opacity: 0.48;
}
.theme-home-world,
.theme-board-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-board-center);
  opacity: 1;
  --theme-scene-opacity: 0.42;
}
.theme-board-world { opacity: 1; --theme-scene-opacity: 0.34; }
.theme-scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  opacity: var(--theme-scene-opacity, 0.36);
}
.theme-home-world .theme-scene { opacity: 0.42; }
.theme-board-world .theme-scene { opacity: 0.34; }
.theme-prop {
  position: absolute;
  display: block;
  width: clamp(16px, 4vw, 48px);
  height: auto;
  image-rendering: pixelated;
  opacity: 0.28;
  transform: translate3d(0, 0, 0);
}
.theme-prop-signature { left: 12%; bottom: 10%; }
.theme-prop-incident { top: 19%; left: 14%; }
.theme-prop-light { top: 12%; right: 14%; width: clamp(14px, 3vw, 38px); }
.theme-prop-weather { right: 18%; bottom: 15%; width: clamp(18px, 3.2vw, 42px); }
.theme-scene.is-entering { animation: theme-scene-in 300ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes theme-scene-in {
  from { opacity: 0; transform: translate3d(0, 2px, 0); }
  to { opacity: var(--theme-scene-opacity, 0.36); transform: translate3d(0, 0, 0); }
}
.theme-motion-paused .theme-scene,
.theme-motion-paused .theme-prop { animation-play-state: paused; }
.theme-open-btn { min-height: 34px; padding: 0 9px; flex-shrink: 0; }
.profile-preferences { position: relative; }
.theme-popover {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 60;
  width: min(540px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  padding: 14px;
  background: var(--surface-panel);
  border-color: var(--line-active);
  box-shadow: var(--shadow-panel);
}
.theme-popover.is-hidden { display: none; }
.theme-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.theme-popover-head h2 { margin-top: 5px; color: var(--gold-100); }
.theme-popover-head button { min-height: 34px; padding: 0 8px; }
.theme-popover-description { margin-top: 10px; color: var(--text-secondary); }
.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  max-height: min(470px, calc(100vh - 230px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.theme-choice {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 64px;
  padding: 7px;
  text-align: left;
  color: var(--text-muted);
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  transition: border-color 100ms steps(2, end), background 100ms steps(2, end), color 100ms steps(2, end);
}
.theme-choice:hover { color: var(--gold-100); background: var(--surface-button-dark); border-color: var(--line-default); }
.theme-choice:focus-visible { color: var(--gold-050); border-color: var(--line-active); outline: 2px solid var(--gold-100); outline-offset: 1px; }
.theme-choice[aria-checked="true"] { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); box-shadow: var(--shadow-active); }
.theme-choice img { display: block; width: 52px; height: 38px; object-fit: cover; image-rendering: pixelated; border: 1px solid var(--line-dark); }
.theme-choice-copy { display: grid; gap: 4px; min-width: 0; }
.theme-choice-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.theme-choice-description { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text-muted); font-family: var(--font-body); font-size: 10px; line-height: 1.25; }
.theme-choice[aria-checked="true"] .theme-choice-description { color: var(--gold-muted); }
@media (max-width: 900px) {
  .theme-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .theme-popover { top: 48px; right: 8px; width: calc(100vw - 32px); max-height: calc(100dvh - 104px); }
  .theme-choice-grid { grid-template-columns: 1fr; max-height: calc(100dvh - 210px); }
  .theme-choice { min-height: 58px; }
}
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1279px) {
  .theme-popover { width: min(520px, calc(100vw - 28px)); }
  .theme-choice { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-scene.is-entering { animation: none; opacity: 0.66; transform: none; }
}
@media (forced-colors: active) {
  .theme-page-world,
  .theme-home-world,
  .theme-board-world { display: none; }
  .theme-choice[aria-checked="true"] { outline: 2px solid Highlight; }
}

/* Compact global reference music dock. Keep the final control close to the edge. */
/* ============================================================
   LEGAL DOCUMENTS - static, policy-gated reading surface
   ============================================================ */
.legal-page {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-canvas);
  color: var(--text-primary);
}
.legal-main {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 32px 20px 48px;
}
.legal-main h1 {
  margin-top: 8px;
  color: var(--gold-050);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}
.legal-main h2 {
  color: var(--gold-100);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}
.legal-slot {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
}
.legal-main > .legal-slot { max-width: 70ch; margin-top: 14px; }
.legal-updated { margin-top: 14px; }
.legal-nav {
  margin-top: 24px;
  padding: 12px 14px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
}
.legal-nav ul,
.legal-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-nav a,
.legal-index-link,
.legal-return {
  color: var(--gold-100);
  text-underline-offset: 3px;
}
.legal-nav a:hover,
.legal-nav a:focus-visible,
.legal-index-link:hover,
.legal-index-link:focus-visible,
.legal-return:hover,
.legal-return:focus-visible { color: var(--gold-050); }
.legal-sections {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.legal-sections section {
  padding: 18px;
  background: var(--surface-panel);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  scroll-margin-top: 20px;
}
.legal-sections h2 { margin-bottom: 10px; }
.legal-return {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-top: 24px;
}
.legal-ticker { margin-top: 0; }
.legal-index-link { display: inline-flex; min-height: 32px; align-items: center; }
.legal-links { white-space: nowrap; }
.legal-links a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-block: -5.71px;
  padding-inline: 3px;
}

/* ============================================================
   LEGAL DOCUMENT SHELL — long-form reading surface
   ============================================================ */
.legal-shell { height: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
.legal-header { gap: 14px; }
.legal-brand { color: inherit; text-decoration: none; }
.legal-brand:focus-visible { outline-offset: 3px; }
.legal-mark {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-active);
  box-shadow: inset 0 0 0 3px var(--surface-panel), var(--shadow-active);
}
.legal-mark::before,
.legal-mark::after { content: ""; position: absolute; background: var(--gold-300); }
.legal-mark::before { left: 7px; right: 7px; top: 9px; height: 2px; box-shadow: 0 5px 0 var(--gold-300); }
.legal-mark::after { left: 9px; top: 7px; width: 2px; height: 12px; box-shadow: 5px 0 0 var(--gold-300); }
.legal-breadcrumb { margin-left: 4px; white-space: nowrap; }
.legal-back { display: inline-flex; min-height: 40px; align-items: center; padding-inline: 12px; text-decoration: none; }
.legal-document-main {
  flex: 1;
  min-height: 0;
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 18px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--line-default) var(--surface-panel-deep);
}
.legal-hero { padding: clamp(18px, 2.2vw, 28px); border-color: var(--line-board); }
.legal-hero h1 { margin-top: 7px; color: var(--gold-050); font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.legal-lede { max-width: 72ch; margin-top: 10px; color: var(--text-secondary); font: 15px/1.6 var(--font-body); }
.legal-meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--gold-400); font: 10px/1.4 var(--font-pixel); letter-spacing: .05em; text-transform: uppercase; }
.legal-draft-banner { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; border-color: var(--line-active); background: var(--surface-panel-deep); }
.legal-draft-banner strong { color: var(--gold-050); font: 12px/1.3 var(--font-pixel); letter-spacing: .07em; }
.legal-draft-banner p { max-width: 100ch; color: var(--text-secondary); font: 13px/1.55 var(--font-body); }
.legal-doc-layout { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 14px; }
.legal-outline-wrap { position: sticky; top: 0; align-self: start; min-width: 0; }
.legal-outline { display: grid; gap: 3px; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-board); box-shadow: var(--shadow-panel); }
.legal-outline > .t-micro { padding: 2px 7px 7px; }
.legal-outline a { display: flex; align-items: center; min-height: 40px; padding: 5px 8px; color: var(--text-muted); border: 1px solid transparent; text-decoration: none; font: 11px/1.3 var(--font-ui); }
.legal-outline a:hover, .legal-outline a:focus-visible { color: var(--gold-050); background: var(--surface-button-hover); border-color: var(--line-active); }
.legal-outline-mobile { display: none; padding: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-board); }
.legal-outline-mobile summary { min-height: 44px; padding: 0 10px; display: flex; align-items: center; color: var(--gold-100); cursor: pointer; font: 11px/1 var(--font-pixel); letter-spacing: .06em; list-style: none; }
.legal-outline-mobile summary::-webkit-details-marker { display: none; }
.legal-outline-mobile summary::after { content: "+"; margin-left: auto; color: var(--gold-400); font: 18px/1 var(--font-ui); }
.legal-outline-mobile[open] summary::after { content: "−"; }
.legal-outline-mobile nav { display: grid; gap: 2px; padding: 0 8px 8px; }
.legal-outline-mobile nav a { display: flex; align-items: center; min-height: 38px; padding: 5px 8px; color: var(--text-muted); border: 1px solid transparent; text-decoration: none; font: 11px/1.3 var(--font-ui); }
.legal-outline-mobile nav a:hover, .legal-outline-mobile nav a:focus-visible { color: var(--gold-050); background: var(--surface-button-hover); border-color: var(--line-active); }
.legal-article { min-width: 0; padding: clamp(18px, 2.2vw, 30px); background: var(--surface-panel); border: 1px solid var(--line-board); box-shadow: inset 0 1px 0 rgb(232 211 171 / 6%), 0 3px 14px rgb(0 0 0 / 28%); }
.legal-article section { scroll-margin-top: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line-dark); }
.legal-article section + section { margin-top: 22px; }
.legal-article h2 { color: var(--gold-100); font: 20px/1.2 var(--font-display); }
.legal-article h3 { margin-top: 16px; color: var(--gold-300); font: 13px/1.3 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase; }
.legal-article p, .legal-article li { max-width: 78ch; color: var(--text-secondary); font: 14px/1.65 var(--font-body); }
.legal-article p + p { margin-top: 10px; }
.legal-article ul { max-width: 78ch; margin: 10px 0 0; padding-left: 22px; }
.legal-article li + li { margin-top: 6px; }
.legal-fact-note { margin: 0 0 20px; padding: 10px 12px; border-inline-start: 2px solid var(--line-active); background: var(--surface-panel-deep); color: var(--gold-100) !important; }
.legal-fact-note strong { color: var(--gold-050); font-family: var(--font-pixel); letter-spacing: .05em; }
.legal-related { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; padding-top: 18px; }
.legal-related .t-micro { margin-right: 4px; }
.legal-related a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 9px; color: var(--gold-100); border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); text-decoration: none; font: 11px/1 var(--font-ui); }
.legal-related a:hover, .legal-related a:focus-visible { color: var(--gold-050); border-color: var(--line-active); background: var(--surface-button-hover); }
.legal-index-section { margin-top: 16px; }
.legal-section-heading { display: flex; align-items: center; gap: 10px; }
.legal-section-heading h2 { color: var(--gold-100); font: 20px/1.2 var(--font-display); }
.legal-section-heading .hair { margin-left: 4px; }
.legal-index-main .legal-nav { margin-top: 10px; }
.legal-index-main .legal-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.legal-index-main .legal-sections section { display: grid; gap: 10px; min-height: 150px; margin: 0; padding: 14px; background: var(--surface-panel); border: 1px solid var(--line-subtle); border-radius: 2px; scroll-margin-top: 20px; }
.legal-index-main .legal-sections section:hover { border-color: var(--line-active); }
.legal-index-main .legal-sections h2 { margin: 0; color: var(--gold-100); font: 17px/1.2 var(--font-display); }
.legal-index-main .legal-sections p { max-width: 60ch; color: var(--text-secondary); font: 13px/1.5 var(--font-body); }
.legal-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--gold-400); font: 9px/1.3 var(--font-pixel); letter-spacing: .04em; }
.legal-card-meta .legal-index-link { flex: 0 0 auto; }
.legal-contact { display: grid; gap: 8px; margin-top: 14px; padding: 16px; }
.legal-contact h2 { color: var(--gold-100); font: 19px/1.2 var(--font-display); }
.legal-contact p { max-width: 78ch; color: var(--text-secondary); font: 13px/1.55 var(--font-body); }
.legal-contact .legal-return { margin-top: 2px; }
.legal-page .legal-ticker { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .legal-document-main { animation: legal-document-in 180ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both; }
}
@keyframes legal-document-in { from { opacity: .84; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .legal-document-main { animation: none; } }
@media (forced-colors: active) {
  .legal-mark, .legal-outline, .legal-outline-mobile, .legal-article, .legal-hero, .legal-draft-banner, .legal-contact { border-color: CanvasText; box-shadow: none; }
  .legal-outline a:hover, .legal-outline a:focus-visible, .legal-outline-mobile nav a:hover, .legal-outline-mobile nav a:focus-visible, .legal-related a:hover, .legal-related a:focus-visible { color: HighlightText; background: Highlight; border-color: Highlight; }
}
@media print {
  .legal-page { background: #fff; color: #000; }
  .legal-header, .legal-outline-wrap, .legal-ticker, .legal-related, .skip-link { display: none !important; }
  .legal-shell, .legal-document-main { display: block; min-height: auto; width: 100%; max-width: none; padding: 0; overflow: visible; }
  .legal-hero, .legal-draft-banner, .legal-article, .legal-contact { color: #000; background: #fff; border: 0; box-shadow: none; }
  .legal-doc-layout { display: block; margin: 0; }
  .legal-article p, .legal-article li, .legal-lede, .legal-contact p { color: #222 !important; }
}
@media (max-width: 640px) {
  .legal-main { padding: 24px 14px 36px; }
  .legal-nav ul,
  .legal-nav ol { display: grid; gap: 4px; }
  .legal-nav a,
  .legal-index-link { min-height: 36px; align-items: center; }
}

@media (max-width: 900px) {
  .legal-document-main { padding: 14px 14px 24px; }
  .legal-doc-layout { display: block; }
  .legal-outline-wrap { position: static; margin-bottom: 10px; }
  .legal-outline { display: none; }
  .legal-outline-mobile { display: block; }
}
@media (max-width: 640px) {
  .legal-page { height: auto; min-height: 100%; overflow: visible; }
  .legal-shell { height: auto; min-height: 100dvh; }
  .legal-header { gap: 8px; padding-inline: 10px; }
  .legal-brand { gap: 8px; min-width: 0; }
  .legal-mark { width: 26px; height: 26px; flex-basis: 26px; }
  .legal-mark::before { left: 6px; right: 6px; top: 8px; }
  .legal-mark::after { left: 8px; top: 6px; }
  .legal-brand .hdr-wordmark { font-size: 26px; }
  .legal-breadcrumb { display: none; }
  .legal-back { min-height: 40px; padding-inline: 8px; font-size: 10px; }
  .legal-document-main { min-height: auto; overflow: visible; padding: 12px 10px 24px; }
  .legal-hero { padding: 16px; }
  .legal-hero h1 { font-size: 32px; }
  .legal-lede { font-size: 14px; }
  .legal-meta-row { display: grid; gap: 5px; }
  .legal-draft-banner { padding: 11px 12px; }
  .legal-draft-banner p { font-size: 12px; }
  .legal-article { padding: 16px; }
  .legal-article h2 { font-size: 19px; }
  .legal-article p, .legal-article li { font-size: 14px; }
  .legal-article table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
  .legal-article th, .legal-article td { overflow-wrap: anywhere; word-break: break-word; padding: 5px 4px; vertical-align: top; }
  .legal-index-main .legal-sections { grid-template-columns: 1fr; }
  .legal-section-heading { align-items: flex-start; flex-wrap: wrap; }
  .legal-section-heading .hair { display: none; }
  .legal-card-meta { align-items: flex-start; flex-direction: column; }
}

.hair { flex: 1; height: 1px; background: var(--line-subtle); }

.view { display: flex; flex-direction: column; min-height: 100vh; }
.view { position: relative; z-index: 1; }

/* ============================================================
   COSMETIC WORLDS — scenery is always behind the existing controls.
   ============================================================ */
.theme-page-world,
.theme-home-world,
.theme-board-world {
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}
.theme-page-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-canvas);
  opacity: 0.25;
}
.theme-home-world,
.theme-board-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-board-center);
}
.theme-scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.theme-prop {
  position: absolute;
  display: block;
  width: clamp(18px, 7vw, 96px);
  height: auto;
  image-rendering: pixelated;
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
}
.theme-prop-light,
.theme-prop-signature,
.theme-prop-accent,
.theme-prop-weather,
.theme-prop-clouds,
.theme-prop-fog { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-prop-light { opacity: 0.96; }
.theme-prop-signature { opacity: 1; }
.theme-prop-accent { opacity: 0.9; }
.theme-prop-weather { opacity: 0.82; }
.theme-prop-clouds { opacity: 0.92; }
.theme-prop-fog { opacity: 0.16; }
.theme-prop-petals { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.86; }
.theme-petal-a,
.theme-petal-b { animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-petal-a { animation-name: theme-petal-a-fall; }
.theme-petal-b { animation-name: theme-petal-b-fall; transform: translate3d(0, -100%, 0); }
.theme-prop-snow { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.theme-snow-a,
.theme-snow-b { animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-snow-a { animation-name: theme-snow-a-fall; }
.theme-snow-b { animation-name: theme-snow-b-fall; transform: translate3d(0, -100%, 0); }
.theme-prop-leaves { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.theme-leaves-a,
.theme-leaves-b { animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-leaves-a { animation-name: theme-leaves-a-fall; }
.theme-leaves-b { animation-name: theme-leaves-b-fall; transform: translate3d(0, -100%, 0); }
.theme-pedestrian-band { inset: 0; width: 100%; height: 100%; opacity: 1; }
.theme-pedestrian-a,
.theme-pedestrian-b { animation-duration: 36s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-pedestrian-a { animation-name: theme-pedestrian-a-walk; }
.theme-pedestrian-b { animation-name: theme-pedestrian-b-walk; transform: translate3d(-100%, 0, 0); }
.theme-pedestrian-band .theme-prop-pedestrians { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-pedestrian-pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-pedestrian-pose-a { animation: theme-pedestrian-pose-a 360ms steps(2, end) infinite alternate; }
.theme-pedestrian-pose-b { opacity: 0; animation: theme-pedestrian-pose-b 360ms steps(2, end) infinite alternate; }
.theme-cloud-a,
.theme-cloud-b { animation-duration: 42s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-cloud-a { animation-name: theme-cloud-a-drift; }
.theme-cloud-b { animation-name: theme-cloud-b-drift; transform: translate3d(100%, 0, 0); }
.theme-fog-a,
.theme-fog-b { animation-duration: 48s; animation-timing-function: linear; animation-iteration-count: infinite; }
.theme-fog-a { animation-name: theme-fog-a-drift; }
.theme-fog-b { animation-name: theme-fog-b-drift; transform: translate3d(-100%, 0, 0); }
.theme-prop-weather-petal { animation: theme-petal-fall 11s steps(1, end) infinite; }
.theme-prop-weather-leaves { animation: theme-leaf-fall 9s steps(1, end) infinite; }
.theme-prop-weather-water { animation: theme-water-drift 14s steps(1, end) infinite alternate; opacity: 0.82; }
.theme-prop-weather-cloud { animation: theme-cloud-drift 15s steps(1, end) infinite alternate; opacity: 0.68; }
.theme-prop-accent { animation: theme-accent-drift 18s steps(1, end) infinite alternate; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.theme-motion-paused) .view:not(.is-hidden) :is(
    .theme-petal-a,
    .theme-petal-b,
    .theme-snow-a,
    .theme-snow-b,
    .theme-leaves-a,
    .theme-leaves-b,
    .theme-pedestrian-a,
    .theme-pedestrian-b,
    .theme-cloud-a,
    .theme-cloud-b,
    .theme-fog-a,
    .theme-fog-b,
    .home-house-drift-track
  ) { will-change: transform; }
}
/* Four held poses, with a longer first beat; ambient layers ping-pong. */
@keyframes theme-petal-fall { 0%, 100% { transform: translate3d(0, -6px, 0); } 35% { transform: translate3d(3px, 0, 0); } 55% { transform: translate3d(0, 6px, 0); } 80% { transform: translate3d(-3px, 12px, 0); } }
@keyframes theme-leaf-fall { 0%, 100% { transform: translate3d(3px, -6px, 0); } 30% { transform: translate3d(0, 0, 0); } 55% { transform: translate3d(-6px, 6px, 0); } 80% { transform: translate3d(-3px, 12px, 0); } }
@keyframes theme-water-drift { 0% { transform: translate3d(-3px, 0, 0); } 40% { transform: translate3d(0, 0, 0); } 70%, 100% { transform: translate3d(3px, 0, 0); } }
@keyframes theme-cloud-drift { 0% { transform: translate3d(-6px, 0, 0); } 35% { transform: translate3d(-3px, 0, 0); } 60% { transform: translate3d(0, 0, 0); } 85%, 100% { transform: translate3d(3px, 0, 0); } }
@keyframes theme-cloud-a-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes theme-cloud-b-drift { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-fog-a-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes theme-fog-b-drift { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-petal-a-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2%, 100%, 0); } }
@keyframes theme-petal-b-fall { from { transform: translate3d(-2%, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-snow-a-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, 100%, 0); } }
@keyframes theme-snow-b-fall { from { transform: translate3d(2%, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-leaves-a-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2%, 100%, 0); } }
@keyframes theme-leaves-b-fall { from { transform: translate3d(-2%, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-pedestrian-a-walk { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes theme-pedestrian-b-walk { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes theme-pedestrian-pose-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes theme-pedestrian-pose-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes theme-accent-drift { 0% { transform: translate3d(0, 0, 0); } 40% { transform: translate3d(3px, -3px, 0); } 75%, 100% { transform: translate3d(6px, -3px, 0); } }
body[data-theme-id]:not([data-theme-id="original"]) #view-home .home-house-drift { opacity: 0; }
body[data-theme-id="spring"] #view-home .parlor-statement .ts-kicker,
body[data-theme-id="spring"] #view-home .parlor-statement .ts-copy,
body[data-theme-id="spring"] #view-home .parlor-statement .ts-rule .g-muted,
body[data-theme-id="spring"] #view-home .home-local-time,
body[data-theme-id="spring"] #view-home .home-patrol-score,
body[data-theme-id="spring"] #view-home .home-patrol-hint { color: #173e4b; text-shadow: 0 2px 0 rgb(239 247 224 / 70%); }
body[data-theme-id="summer"] #view-home .parlor-statement .ts-kicker,
body[data-theme-id="summer"] #view-home .parlor-statement .ts-copy,
body[data-theme-id="summer"] #view-home .parlor-statement .ts-rule .g-muted,
body[data-theme-id="summer"] #view-home .home-local-time,
body[data-theme-id="summer"] #view-home .home-patrol-score,
body[data-theme-id="summer"] #view-home .home-patrol-hint { color: #3d321d; text-shadow: 0 2px 0 rgb(255 237 185 / 80%); }
body[data-theme-id="light"] #view-home .parlor-statement .ts-kicker,
body[data-theme-id="light"] #view-home .parlor-statement .ts-copy,
body[data-theme-id="light"] #view-home .parlor-statement .ts-rule .g-muted,
body[data-theme-id="light"] #view-home .home-local-time,
body[data-theme-id="light"] #view-home .home-patrol-score,
body[data-theme-id="light"] #view-home .home-patrol-hint { color: #173f4d; text-shadow: 0 2px 0 rgb(228 245 238 / 85%); }
.theme-scene.is-entering { animation: theme-scene-in 300ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes theme-scene-in { from { opacity: 0; transform: translate3d(0, 2px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.theme-motion-paused .theme-scene,
.theme-motion-paused .theme-prop,
.theme-motion-paused .home-house-drift-track { animation-play-state: paused; }
.theme-open-btn { min-height: 34px; padding: 0 9px; flex-shrink: 0; }
.profile-preferences { position: relative; }
.theme-popover {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 60;
  width: min(560px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  padding: 14px;
  background: var(--surface-panel);
  border: 1px solid var(--line-active);
  box-shadow: var(--shadow-panel);
}
.theme-popover.is-hidden { display: none; }
.theme-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.theme-popover-head h2 { margin-top: 5px; color: var(--gold-100); }
.theme-popover-head button { min-height: 34px; padding: 0 8px; }
.theme-popover-description { margin-top: 10px; color: var(--text-secondary); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; max-height: min(470px, calc(100vh - 230px)); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.theme-choice { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 72px; padding: 7px; text-align: left; color: var(--text-muted); background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); border-radius: 2px; cursor: pointer; transition: border-color 100ms steps(2, end), background 100ms steps(2, end), color 100ms steps(2, end); }
.theme-choice input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.theme-choice:hover { color: var(--gold-100); background: var(--surface-button-dark); border-color: var(--line-default); }
.theme-choice:focus-within { color: var(--gold-050); border-color: var(--line-active); outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 1px; }
.theme-choice:has(input:checked) { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); box-shadow: var(--shadow-active); }
.theme-choice input:checked + .theme-choice-art { border-color: var(--line-active); }
.theme-choice-art { display: block; width: 68px; height: 42px; overflow: hidden; border: 1px solid var(--line-dark); background: var(--surface-board-center); }
.theme-choice img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.theme-choice-copy { display: grid; gap: 4px; min-width: 0; }
.theme-choice-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.theme-choice-description { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text-muted); font-family: var(--font-body); font-size: 10px; line-height: 1.25; }
.theme-choice:has(input:checked) .theme-choice-description { color: var(--gold-muted); }
.maintenance-banner {
  border-color: var(--line-active);
  background: var(--surface-panel);
  color: var(--text-primary);
}
.maintenance-home {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--surface-panel);
  border: 0;
  border-radius: 0;
}
.maintenance-home h2,
.maintenance-home p { max-width: 560px; margin: 0; }
.maintenance-home button { min-width: 132px; min-height: 44px; margin-top: 6px; }
.maintenance-game {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 12px;
  border-inline: 0;
  border-radius: 0;
}
.maintenance-game [data-maintenance-copy] { flex: 1; min-width: 0; }
.maintenance-game [data-maintenance-rounds] { flex-shrink: 0; }
.admin-analytics-main {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  margin: 0 auto;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#view-admin-analytics { height: 100dvh; min-height: 0; overflow: hidden; background: transparent; }
#view-admin-analytics .admin-analytics-main { height: auto; }
#view-admin-analytics .hdr { border-bottom-color: var(--line-board); }
body:has(#view-admin-analytics:not(.is-hidden)) .theme-page-world {
  opacity: 0.36;
  --theme-scene-opacity: 0.58;
}
.admin-analytics-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border-color: var(--line-board);
}
.admin-analytics-hero { grid-row: 1; }
.admin-console-tabs { grid-row: 2; }
.admin-analytics-workspace,
.admin-provider-workspace { grid-row: 3; min-height: 0; }
#admin-analytics-status { grid-row: 4; }
.admin-analytics-heading,
.admin-analytics-hero-actions { min-width: 0; }
.admin-analytics-hero h1 { margin-top: 6px; }
.admin-analytics-hero p { max-width: 680px; margin-top: 8px; }
.admin-analytics-hero-actions { display: grid; justify-items: end; gap: 10px; text-align: end; }
.admin-analytics-hero-actions button { min-width: 104px; min-height: 44px; }
.analytics-admin-badge { border-inline-start: 1px solid var(--line-active); padding-inline-start: 10px; }
.admin-analytics-workspace { position: relative; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 12px; border-color: var(--line-board); overflow: hidden; }
.analytics-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; border-bottom: 1px solid var(--line-subtle); padding-bottom: 10px; }
.analytics-tab {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  background: var(--surface-button-dark);
  color: var(--text-muted);
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.analytics-tab:hover,
.analytics-tab:focus-visible,
.analytics-tab.is-active { border-color: var(--line-active); color: var(--gold-050); background: var(--surface-button-hover); }
.analytics-tab:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.admin-console-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.admin-console-tab { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-subtle); border-radius: 2px; background: var(--surface-button-dark); color: var(--text-muted); font: 11px/1 var(--font-pixel); letter-spacing: .05em; text-transform: uppercase; }
.admin-console-tab:hover, .admin-console-tab:focus-visible, .admin-console-tab.is-active { border-color: var(--line-active); background: var(--surface-button-hover); color: var(--gold-050); }
.admin-console-tab:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.admin-provider-workspace { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; min-height: 0; padding: 14px; border-color: var(--line-board); overflow: auto; overscroll-behavior: contain; }
.admin-provider-workspace.is-hidden { display: none; }
.admin-provider-workspace.is-entering { animation: admin-provider-in 180ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both; }
@keyframes admin-provider-in { from { opacity: 0; transform: translate3d(0, 4px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.admin-provider-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-width: 0; padding-block-end: 12px; border-block-end: 1px solid var(--line-subtle); }
.admin-provider-heading h2 { margin-block-start: 6px; }
.admin-provider-heading p { max-width: 72ch; margin-block-start: 8px; }
.admin-provider-state { flex: 0 0 auto; min-height: 32px; padding: 8px 10px; border: 1px solid var(--line-active); color: var(--gold-050); }
.admin-provider-state[data-state="healthy"] { border-color: var(--green-status); color: var(--green-status); }
.admin-provider-state[data-state="error"] { border-color: var(--red-bright); color: var(--red-bright); }
.admin-provider-layout { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.62fr); gap: 14px; min-width: 0; }
.admin-provider-active { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 0; padding: 14px; background: var(--surface-panel-deep); border-color: var(--line-subtle); box-shadow: none; }
.admin-provider-active h3 { overflow-wrap: anywhere; }
.admin-provider-section-label { letter-spacing: .08em; }
.admin-provider-facts { display: grid; gap: 8px; margin: 2px 0 0; }
.admin-provider-facts > div { display: grid; gap: 4px; min-width: 0; padding-block-end: 8px; border-block-end: 1px solid var(--line-dark); }
.admin-provider-facts dt, .admin-provider-facts dd { margin: 0; }
.admin-provider-facts dd { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.admin-provider-active-note { margin-block-start: 2px; line-height: 1.45; }
.admin-provider-editor { display: grid; align-content: start; gap: 10px; min-width: 0; }
.admin-provider-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.admin-provider-field { display: grid; gap: 5px; min-width: 0; }
.admin-provider-field-wide { grid-column: 1 / -1; }
.admin-provider-field .input-dark { width: 100%; min-height: 44px; padding-inline: 10px; border: 1px solid var(--line-subtle); border-radius: 2px; background: var(--surface-panel-deep); color: var(--text-primary); font: 13px var(--font-body); }
.admin-provider-field .input-dark:focus-visible { border-color: var(--line-active); outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.admin-provider-key-note { margin-block-start: 2px; line-height: 1.45; }
.admin-provider-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-provider-form-actions .btn-dark { min-width: 132px; min-height: 44px; }
.admin-provider-editor > .analytics-status { min-height: 44px; margin-block-start: 2px; }
.admin-provider-profiles { display: grid; gap: 10px; min-width: 0; padding-block-start: 12px; border-block-start: 1px solid var(--line-subtle); }
.admin-provider-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-provider-section-head h3 { margin-block-start: 5px; }
.admin-provider-list { display: grid; gap: 8px; min-width: 0; }
.admin-provider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.admin-provider-row.is-active { border-color: var(--line-active); box-shadow: inset 3px 0 0 var(--line-active); }
.admin-provider-row-copy { display: grid; gap: 4px; min-width: 0; }
.admin-provider-row-copy strong { overflow: hidden; color: var(--gold-100); text-overflow: ellipsis; white-space: nowrap; }
.admin-provider-row-copy span, .admin-provider-row-copy small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.admin-provider-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-provider-row-actions .btn-dark { min-width: 72px; min-height: 36px; padding-inline: 8px; }
.admin-provider-row-actions .btn-dark:disabled { opacity: .52; }
.admin-provider-empty { min-height: 44px; padding: 12px; border: 1px solid var(--line-subtle); color: var(--text-muted); background: var(--surface-panel-deep); }
@media (max-width: 900px) { .admin-provider-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .admin-console-tabs { grid-template-columns: 1fr; }
  .admin-provider-heading { flex-direction: column; gap: 10px; }
  .admin-provider-state { align-self: flex-start; }
  .admin-provider-form-grid { grid-template-columns: 1fr; }
  .admin-provider-field-wide { grid-column: auto; }
  .admin-provider-row { grid-template-columns: 1fr; align-items: start; }
  .admin-provider-row-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .admin-provider-workspace.is-entering { animation: none; } }
.analytics-filters { position: relative; display: grid; min-width: 0; gap: 8px; align-items: end; }
.analytics-filter { display: grid; gap: 5px; min-width: 0; }
.analytics-filter .input-dark { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 9px; border: 1px solid var(--line-subtle); border-radius: 2px; background: var(--surface-panel-deep); color: var(--text-primary); font: 13px var(--font-body); }
.analytics-select-shell { position: relative; display: block; min-width: 0; }
.analytics-select-shell > .input-dark { appearance: none; -webkit-appearance: none; padding-inline: 12px 38px; }
.analytics-select-shell::after { position: absolute; top: 50%; right: 14px; width: 7px; height: 7px; border-inline-end: 2px solid var(--gold-100); border-block-end: 2px solid var(--gold-100); content: ""; pointer-events: none; transform: translateY(-3px) rotate(45deg); }
.analytics-select-shell:focus-within::after { border-color: var(--gold-050); }
.analytics-filter .input-dark:focus-visible { border-color: var(--line-active); outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.analytics-filter-event { grid-column: span 2; }
.analytics-filter-actions { display: flex; gap: 8px; grid-column: span 3; justify-content: flex-end; }
.analytics-filter-actions .btn-dark { min-width: 88px; min-height: 44px; }
.analytics-filter-strip { display: grid; grid-template-columns: minmax(170px, 220px) minmax(138px, 180px) minmax(0, 1fr) auto auto; align-items: end; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.analytics-filter-window { min-width: 0; }
.analytics-filter-baseline { display: grid; gap: 5px; min-height: 44px; align-content: center; padding: 0 10px; border-inline-start: 1px solid var(--line-subtle); color: var(--text-secondary); }
.analytics-active-filters { display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 0 10px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.analytics-filter-chip { display: inline-flex; align-items: center; min-height: 26px; max-width: 180px; margin-inline-end: 6px; padding: 0 8px; overflow: hidden; border: 1px solid var(--line-subtle); background: var(--surface-panel); color: var(--gold-100); font: 10px var(--font-pixel); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.analytics-more-filters,
.analytics-filter-reset { min-height: 44px; padding-inline: 12px; white-space: nowrap; }
.analytics-filter-dialog { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 30; display: grid; gap: 12px; max-height: min(440px, calc(100dvh - 220px)); overflow-y: auto; padding: 14px; border: 1px solid var(--line-active); background: var(--surface-panel); box-shadow: var(--shadow-panel); }
.analytics-filter-dialog.is-hidden { display: none; }
.analytics-filter-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-block-end: 10px; border-block-end: 1px solid var(--line-dark); }
.analytics-filter-dialog-head h2 { margin-block-start: 5px; color: var(--gold-100); }
.analytics-filter-dialog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.analytics-filter-dialog .analytics-filter-actions { display: flex; justify-content: flex-end; grid-column: auto; }
.analytics-panel-descriptions { min-width: 0; }
.analytics-panel-descriptions section { display: grid; gap: 10px; min-width: 0; }
.analytics-panel-descriptions h2,
.analytics-panel-descriptions h3,
.analytics-panel-descriptions p { margin: 0; }
.analytics-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-block-end: 4px; border-block-end: 1px solid var(--analytics-grid); }
.analytics-panel-question { margin-block-start: 6px !important; color: var(--text-primary); font: 600 15px/1.35 var(--font-body); max-width: 68ch; }
.analytics-panel-state { flex: 0 0 auto; border: 1px solid var(--line-subtle); padding: 6px 8px; }
.analytics-panel-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; min-width: 0; }
.analytics-panel-ledger { display: grid; gap: 12px; min-width: 0; }
.analytics-panel-context { display: grid; align-content: start; gap: 10px; min-width: 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--analytics-grid); }
.analytics-report-book { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.analytics-report-page { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-active) var(--surface-panel-deep); scrollbar-gutter: stable; }
.analytics-report-page:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: -2px; }
.analytics-page-footer { position: relative; right: auto; bottom: auto; left: auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 44px; margin: 0 12px 12px; padding: 8px 0 0; border-block-start: 1px solid var(--line-subtle); background: var(--surface-panel); }
.analytics-page-turn { min-width: 104px; min-height: 44px; }
.analytics-panel-descriptions { height: 100%; min-height: 0; }
.analytics-panel-descriptions > section:not(.is-hidden) { min-height: 0; }
.analytics-panel-descriptions > section:not(.is-hidden) .analytics-panel-layout { min-height: 0; }
.analytics-chart-slot { min-width: 0; min-height: 0; }
.analytics-chart { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.analytics-chart > figure { display: grid; gap: 8px; margin: 0; }
.analytics-chart-engine { display: block; width: 100%; height: var(--analytics-chart-height, clamp(188px, 18vw, 240px)); min-height: 188px; overflow: hidden; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.analytics-chart-engine[data-chart-engine="unavailable"] { display: none; }
.analytics-chart-engine > svg { display: block; width: 100% !important; height: 100% !important; }
.analytics-chart-engine-status { margin: 0; color: var(--text-muted); }
.analytics-chart svg { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 640 / 260; overflow: visible; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.analytics-chart figcaption { color: var(--gold-100); font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.analytics-chart-table-toggle { justify-self: start; min-height: 44px; padding: 0 10px; }
.analytics-chart-data { max-width: 100%; max-height: min(320px, 40dvh); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-active) var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.analytics-chart-data:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 1px; }
.analytics-chart-table { width: 100%; min-width: 520px; border-collapse: collapse; color: var(--text-secondary); font: 12px/1.35 var(--font-body); }
.analytics-chart-table th,
.analytics-chart-table td { padding: 6px 8px; border: 1px solid var(--line-subtle); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.analytics-chart-table caption { margin-block-end: 6px; color: var(--text-muted); text-align: left; }
.analytics-chart-table th { color: var(--gold-100); font-weight: 600; }
.analytics-chart svg text { fill: var(--text-muted); font: 11px var(--font-numeric, "IBM Plex Mono", monospace); font-variant-numeric: tabular-nums; }
.analytics-chart svg { shape-rendering: crispEdges; }
.analytics-chart-frame { fill: var(--surface-panel); stroke: var(--line-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-grid-line { stroke: var(--analytics-grid); stroke-width: 1; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.analytics-chart-axis { color: var(--text-muted); }
.analytics-chart-axis line { stroke: var(--line-active); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-axis text,
.analytics-chart-x-label,
.analytics-chart-unit { fill: var(--text-muted); }
.analytics-chart-unit { fill: var(--gold-100); font-weight: 600; letter-spacing: .08em; }
.analytics-chart-legend text { fill: var(--gold-100); font-weight: 600; letter-spacing: .04em; }
.analytics-chart-legend-item rect { stroke: var(--surface-panel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-area { pointer-events: none; }
.analytics-chart-line { stroke-linecap: square; stroke-linejoin: miter; }
.analytics-chart-point,
.analytics-chart-bar,
.analytics-chart-stack-segment,
.analytics-chart-heat-cell,
.analytics-board-tile { stroke: var(--surface-panel-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-point { stroke: var(--gold-050); }
.analytics-chart-point:hover,
.analytics-chart-bar:hover,
.analytics-chart-stack-segment:hover,
.analytics-chart-heat-cell:hover,
.analytics-board-tile:hover { stroke: var(--gold-050); stroke-width: 2; }
.analytics-chart-bar-track { stroke: var(--line-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-bar-label { fill: var(--text-primary); font-weight: 600; }
.analytics-chart-value-label { fill: var(--gold-050); font-weight: 600; }
.analytics-chart-overflow-note,
.analytics-chart-range-note { fill: var(--text-muted); font-size: 10px; letter-spacing: .04em; }
.analytics-chart-box-whisker,
.analytics-chart-box-cap { stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-chart-box-median { vector-effect: non-scaling-stroke; }
.analytics-chart svg title { pointer-events: none; }
.analytics-chart-summary { margin: 0; }
.analytics-chart-placeholder { min-height: 178px; align-content: center; justify-items: start; }
.analytics-chart-placeholder p { color: var(--text-muted); }
.analytics-kpi-context,
.analytics-kpi-definition,
.analytics-kpi-timestamp { min-width: 0; overflow-wrap: anywhere; }
.analytics-kpi-unit { display: block; margin-block-start: -4px; text-transform: uppercase; }
.analytics-kpi-timestamp { color: var(--text-muted); }
.analytics-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.analytics-support-panel { min-width: 0; padding: 12px; border-block-start: 1px solid var(--line-active); background: var(--surface-panel); }
.analytics-alerts { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.analytics-contextual-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--line-subtle); }
.analytics-context-slot { min-width: 0; padding: 10px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.analytics-read-model { display: grid; gap: 10px; min-width: 0; margin-top: 10px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-active) var(--surface-panel-deep); }
.analytics-read-model:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 1px; }
.analytics-read-table { width: 100%; min-width: 560px; border-collapse: collapse; color: var(--text-secondary); font: 12px/1.35 var(--font-body); }
.analytics-read-table th,
.analytics-read-table td { padding: 8px; border: 1px solid var(--line-subtle); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.analytics-read-table th { color: var(--gold-100); font-weight: 600; white-space: nowrap; }
.analytics-read-field { display: inline-flex; gap: 5px; margin: 0 10px 5px 0; }
.analytics-read-field b { color: var(--text-muted); font-weight: 600; }
.analytics-association { margin: 0; padding: 8px; border-inline-start: 2px solid var(--line-active); background: var(--surface-panel-deep); color: var(--gold-100); font: 11px/1.4 var(--font-body); }
.analytics-reset-filter { justify-self: start; min-height: 44px; padding: 0 12px; }
.analytics-status { margin: 0; padding: 10px 12px; border-inline-start: 2px solid var(--line-default); overflow-wrap: anywhere; }
.analytics-status.green { color: var(--green-player, var(--green-status)); border-color: var(--analytics-positive); }
.analytics-status.warning { color: var(--warning-player, var(--gold-100)); border-color: var(--analytics-warning); }
.admin-analytics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.analytics-metric { display: grid; gap: 7px; min-width: 0; min-height: 126px; padding: 14px; }
.analytics-metric .t-money { font-size: clamp(22px, 2vw, 32px); line-height: 1.08; overflow-wrap: anywhere; }
.analytics-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
@media (min-width: 768px) and (max-width: 1439px) {
  .admin-analytics-main { width: 100%; }
  .analytics-panel-layout { grid-template-columns: minmax(0, 7fr) minmax(220px, 5fr); }
}
@media (max-width: 1100px) {
  .analytics-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-filter-event,
  .analytics-filter-actions { grid-column: span 2; }
  .analytics-filter-strip { grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(0, 2fr) auto auto; }
  .analytics-chart svg text { font-size: 10px; }
  .admin-analytics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .analytics-panel-layout { grid-template-columns: 1fr; }
  .analytics-panel-context { padding-inline-start: 0; padding-block-start: 10px; border-inline-start: 0; border-block-start: 1px solid var(--analytics-grid); }
  .analytics-contextual-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .maintenance-home { padding: 18px; }
  .maintenance-game { align-items: flex-start; flex-direction: column; gap: 4px; }
  .admin-analytics-main { padding: 12px 10px max(14px, env(safe-area-inset-bottom)); }
  .admin-analytics-hero { flex-direction: column; gap: 12px; padding: 14px; }
  .admin-analytics-hero-actions { width: 100%; justify-items: stretch; text-align: start; }
  .admin-analytics-hero-actions button { width: 100%; }
  .admin-analytics-workspace { padding: 10px; }
  .analytics-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .analytics-tab { flex: 0 0 140px; }
  .analytics-filter .input-dark { font-size: 16px; }
  .analytics-filters { grid-template-columns: 1fr; }
  .analytics-filter-event,
  .analytics-filter-actions { grid-column: auto; }
  .analytics-filter-strip { grid-template-columns: minmax(140px, 1fr) minmax(0, 1fr) auto; }
  .analytics-filter-baseline { border-inline-start: 0; }
  .analytics-active-filters { grid-column: 1 / 3; grid-row: 2; }
  .analytics-more-filters { grid-column: 3; grid-row: 1; }
  .analytics-filter-reset { grid-column: 3; grid-row: 2; justify-self: stretch; }
  .analytics-filter-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-filter-actions { justify-content: stretch; }
  .analytics-filter-actions .btn-dark { flex: 1; min-width: 0; }
  .analytics-panel-heading { flex-direction: column; gap: 8px; }
  .analytics-panel-state { align-self: start; }
  .analytics-page-footer { padding-inline: 0; }
  .analytics-chart-engine { height: var(--analytics-chart-height, 180px); min-height: 180px; }
  .analytics-chart svg text { font-size: 10px; }
  .analytics-support-grid,
  .analytics-contextual-slots { grid-template-columns: 1fr; }
  .analytics-contextual-slots:not(:has(> .analytics-context-slot:not([hidden]))) { display: none; }
  .admin-analytics-grid { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .analytics-chart-engine { display: none !important; }
  .analytics-chart-data { border-color: CanvasText; }
  .analytics-chart-table { border: 1px solid CanvasText; }
  .analytics-chart-table th,
  .analytics-chart-table td { border-color: CanvasText; color: CanvasText; }
  .analytics-tab:focus-visible,
  .analytics-filter .input-dark:focus-visible { outline-color: Highlight; }
  .analytics-select-shell::after { border-color: ButtonText; }
  .analytics-chart-placeholder { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-analytics-main *,
  .admin-analytics-main *::before,
  .admin-analytics-main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 900px) { .theme-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .theme-popover { top: 48px; right: 8px; width: calc(100vw - 32px); max-height: calc(100dvh - 104px); } .theme-choice-grid { grid-template-columns: 1fr; max-height: calc(100dvh - 210px); } .theme-choice { min-height: 64px; } }
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) and (hover: none) and (pointer: coarse) { .theme-popover { width: min(540px, calc(100vw - 28px)); } }
@media (prefers-reduced-motion: reduce) { .theme-scene.is-entering, .theme-prop { animation: none; transform: none; } }
@media (forced-colors: active) { .theme-page-world, .theme-home-world, .theme-board-world { display: none; } .theme-choice:has(input:checked) { outline: 2px solid Highlight; } }
.is-hidden { display: none !important; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--gold-050);
  background: var(--surface-panel);
  border: 1px solid var(--line-active);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
.sr-live {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pad12 { padding: 12px; }
.pad16 { padding: 16px; }
.mt24 { margin-top: 24px; }

/* ============================================================
   typography
   ============================================================ */
.t-section {
  font-family: var(--font-display);
  font-size: 16px; line-height: 1.2; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.t-label {
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.2; font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.t-micro {
  font-family: var(--font-pixel);
  font-size: 9px; line-height: 1.4;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.t-micro.ink-3,
.t-micro.g-muted {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.03em;
}
.t-tile {
  font-family: var(--font-ui);
  font-size: 12px; line-height: 1.15; font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.t-money {
  font-family: var(--font-numeric);
  font-size: 40px; line-height: 1; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.t-body {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.45; font-weight: 400;
}

/* Numeric readouts use Silkscreen for a crisp, compact arcade readout without
   changing the Pixelify identity of labels. */
.home-local-time,
.home-patrol-score,
.night-shift-wave,
.pr-cash,
.room-code,
.dd-row-rent,
.cr-amount,
.auction-bid-val,
.trade-deed-price,
.pool-val,
.profile-stat strong,
.stats-record strong,
.stats-bar-value,
.financing-number input,
.financing-field output,
.numeric {
  font-family: var(--font-numeric);
}

.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f20 { font-size: 20px; }
.f28 { font-size: 28px; }
.trk16 { letter-spacing: 0.16em; }

.ink   { color: var(--text-primary); }
.ink-2 { color: var(--text-secondary); }
.ink-3 { color: var(--text-muted); }
.g100  { color: var(--gold-100); }
.g300  { color: var(--gold-300); }
.g400  { color: var(--gold-400); }
.g5    { color: var(--gold-500); }
.g800  { color: var(--gold-800); }
.g-muted { color: var(--gold-muted); }
.green { color: var(--green-status); }
.red   { color: var(--red-bright); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.045em;
  color: var(--wordmark-color);
  text-shadow: 0 2px 0 var(--wordmark-shadow-1), 0 4px 0 var(--wordmark-shadow-2), 0 6px 0 var(--wordmark-shadow-3), 0 10px 16px rgb(0 0 0 / 60%);
}
.wm-hero  { font-size: clamp(52px, 8vw, 96px); }
.wm-mini  { font-size: 30px; }
.wm-board { font-size: clamp(38px, 5.2vw, 76px); text-shadow: 0 2px 0 var(--wordmark-shadow-1), 0 4px 0 var(--wordmark-shadow-2), 0 6px 0 var(--wordmark-shadow-3), 0 8px 12px rgb(0 0 0 / 55%); }

.q-mark { font-family: var(--font-pixel); font-size: 12px; line-height: 1; color: var(--red-bright); }
.q-lg   { font-size: 30px; }

/* ============================================================
   controls
   ============================================================ */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-button-dark);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  color: var(--gold-300);
  transition: border-color 100ms steps(2, end), background 100ms steps(2, end), color 100ms steps(2, end);
}
.btn-dark:hover:not(:disabled) { border-color: var(--line-active); color: var(--gold-050); background: var(--surface-button-hover); }
.btn-dark:active:not(:disabled) { transform: translateY(1px); background: var(--surface-button-pressed); }
.btn-dark:disabled { cursor: not-allowed; border-color: var(--gold-800); background: var(--surface-disabled); color: var(--text-muted); }
button[id$="-close"],
[data-cosmetic-preview-close] { min-height: 40px; }

.cta-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--red-action);
  border: 1px solid var(--theme-action-edge);
  border-radius: 2px;
  color: var(--gold-050);
  box-shadow: 0 3px 0 var(--theme-action-shadow), 0 5px 10px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(240 217 172 / 18%);
  transition: background 80ms steps(2, end), box-shadow 80ms steps(2, end), transform 60ms steps(2, end);
}
.cta-red:hover:not(:disabled) { background: var(--red-action-hover); }
.cta-red:active:not(:disabled) {
  background: var(--red-action-pressed);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--theme-action-shadow), 0 2px 5px rgb(0 0 0 / 35%);
}
.cta-red:disabled {
  background: var(--theme-action-shadow-muted);
  color: rgb(240 217 172 / 50%);
  box-shadow: 0 3px 0 var(--theme-action-shadow-muted), inset 0 1px 0 rgb(240 217 172 / 8%);
  cursor: not-allowed;
}
.cta-text {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 rgb(0 0 0 / 35%);
}

.field {
  height: 44px;
  padding: 0 12px;
  background: var(--surface-input);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
}
.field::placeholder { color: var(--field-placeholder); }
.field:focus { outline: 2px solid var(--theme-focus, var(--gold-100)); border-color: var(--line-active); }
.field:disabled { cursor: not-allowed; opacity: 0.6; }

.dot { display: block; width: 11px; height: 11px; border-radius: 999px; }
.dot-green { background: var(--green-status); box-shadow: 0 0 6px rgb(53 166 83 / 60%); }
.dot-red { width: 8px; height: 8px; background: var(--red-bright); }

.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: var(--surface-panel-deep); }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--line-subtle); border: 1px solid var(--line-dark); }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--line-default); }

/* ============================================================
   animation
   ============================================================ */
@keyframes shake-dice {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-3px, -2px) rotate(-8deg); }
  50%  { transform: translate(3px, 1px) rotate(7deg); }
  75%  { transform: translate(-2px, 2px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.dice-rolling { animation: shake-dice var(--dice-shake-cycle, 240ms) steps(3, end) infinite; }

@keyframes blink-dot { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }
.blink { animation: blink-dot 1400ms steps(1, end) infinite; }

@keyframes token-pop { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
.token-pop { animation: token-pop 120ms steps(2, end); }

@keyframes boot-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.boot-in { animation: boot-in 80ms steps(2, end) both; }

/* ============================================================
   HEADER (shared chrome)
   ============================================================ */
.hdr, .topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  flex-shrink: 0;
  padding: 0 14px;
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line-subtle);
  position: relative;
}
.hdr-brand, .topnav-brand { display: flex; align-items: center; gap: 12px; text-align: left; }
.topnav-brand { transition: opacity 100ms steps(2, end); }
.topnav-brand:hover { opacity: 0.9; }
.hdr-brand-text { line-height: 1; }
.hdr-wordmark {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: 0.01em; color: var(--gold-300);
  text-shadow: 0 2px 0 rgb(0 0 0 / 60%);
}
.tn-word { font-size: 34px; }
.hdr-sub { margin-top: 5px; display: block; }

.hdr-meta { display: none; align-items: center; gap: 4px; margin-left: 12px; visibility: hidden; }
.hdr-meta .sep { padding: 0 4px; color: var(--gold-800); }

.hdr-right, .tn-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.online { display: flex; align-items: center; gap: 10px; }
.hdr > .hdr-right .online { display: none; }
.you-chip {
  display: none; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px;
  background: var(--surface-input);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.you-chip-btn {
  cursor: pointer;
  transition: border-color 100ms steps(2, end), background 100ms steps(2, end);
}
.you-chip-btn:hover { border-color: var(--line-active); background: var(--surface-button-hover); }
.you-chip-av {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.you-chip-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hdr-rules { height: 40px; padding: 0 12px; gap: 6px; }
.hdr-rules .t-label { font-size: 11px; }
.hdr-rules[aria-pressed="true"] { border-color: var(--line-active); color: var(--gold-050); background: var(--surface-button-dark); }

.tn-div { display: none; width: 1px; height: 38px; background: var(--gold-800); margin: 0 8px; }
.tn-group { display: flex; align-items: center; gap: 16px; }
.room-badge {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  background: var(--surface-input);
  border: 1px solid var(--line-default);
  border-radius: 2px;
}
.room-badge:hover,
.room-badge:focus-visible,
.room-badge.is-copied { border-color: var(--line-active); color: var(--gold-050); background: var(--surface-button-dark); }
.room-badge.is-public { cursor: default; border-color: var(--line-subtle); color: var(--gold-300); }
.room-badge.is-public:disabled { opacity: 1; }
.audio-toggle { width: 42px; min-width: 42px; height: 40px; padding: 7px; display: inline-grid; place-items: center; }
.audio-toggle img { width: 24px; height: 24px; image-rendering: pixelated; }
.tn-lobby { display: none; align-items: center; gap: 8px; }
.tn-turn {
  display: none; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px;
  background: var(--surface-input);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}

.inactivity-timer-host {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 2px;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  color: var(--gold-050);
}
.inactivity-timer {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  color: var(--gold-050);
}
.inactivity-ring-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.inactivity-timer-copy {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  max-width: 76%;
  text-align: center;
  text-shadow: 0 1px #01070a, 1px 0 #01070a, -1px 0 #01070a;
}
.inactivity-timer-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--gold-300);
  font: 700 6px/1.1 var(--font-pixel);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inactivity-timer-time {
  color: var(--gold-050);
  font: 700 10px/1.1 var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.inactive-player-list { display: grid; gap: 4px; margin-top: 8px; }
.inactive-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--line-default);
  background: var(--surface-panel-deep);
  color: var(--gold-100);
  font: 600 10px/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.inactive-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inactive-player-time { flex: 0 0 auto; color: var(--gold-300); font-family: var(--font-numeric); }
.room-vote-host {
  position: fixed;
  z-index: 40;
  top: 78px;
  left: 50%;
  width: min(440px, calc(100vw - 24px));
  transform: translateX(-50%);
}
.room-vote-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line-active); background: var(--surface-panel); }
.room-vote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.room-vote-head h2 { margin-top: 5px; }
.room-vote-expiry { flex: 0 0 auto; color: var(--gold-300); font: 700 16px/1 var(--font-numeric); font-variant-numeric: tabular-nums; }
.room-vote-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.room-vote-counts > div { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.room-vote-counts strong { color: var(--gold-100); font: 700 16px/1 var(--font-numeric); }
.room-vote-progress { height: 8px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.room-vote-progress > span { display: block; height: 100%; background: var(--green-500, #35a653); }
.room-vote-consequence { margin: 0; }
.room-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room-vote-actions button, .room-vote-confirm, .player-profile-votekick button { min-height: 44px; }
.player-profile-votekick { display: grid; gap: 6px; padding: 0 20px 20px; }
.player-profile-votekick > span { line-height: 1.5; }
.financing-collateral-picker { display: grid; gap: 6px; min-width: 0; }
.financing-collateral-trigger { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-overflow: ellipsis; }
.financing-collateral-trigger::placeholder { color: var(--text-primary); opacity: 1; }
.financing-collateral-panel { display: grid; gap: 10px; margin-top: 2px; padding: 10px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.financing-collateral-panel[hidden] { display: none; }
.financing-collateral-options { display: grid; gap: 4px; max-height: 112px; min-width: 0; margin: 0; padding: 0 4px 0 0; overflow-y: auto; border: 0; }
.financing-collateral-options legend { padding: 0 0 5px; }
.financing-collateral-option { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line-subtle); background: var(--surface-input); cursor: pointer; }
.financing-collateral-option input { width: 20px; height: 20px; accent-color: var(--gold-400); }
.financing-collateral-option:focus-within { outline: 2px solid var(--line-active); outline-offset: 2px; }
.equity-transfer-composer { margin-top: 12px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.equity-transfer-composer > summary { min-height: 44px; padding: 13px 12px; cursor: pointer; }
.equity-transfer-composer > p { margin: 0; padding: 0 12px 10px; }
.equity-transfer-composer form { display: grid; gap: 10px; padding: 0 12px 12px; }
.equity-transfer-composer form > button { min-height: 44px; }

/* ============================================================
   HOME — title screen
   ============================================================ */
.home-main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 14px 14px 28px; }

.title-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-board-center);
  border: 2px solid var(--line-board);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line-shadow), inset 0 0 0 1px rgb(232 211 171 / 5%), 0 4px 14px rgb(0 0 0 / 55%);
}
.skyline { position: absolute; inset-inline: 0; bottom: 0; height: 44%; width: 100%; opacity: 0.5; pointer-events: none; }
.home-house-drift { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; height: 44%; overflow: hidden; pointer-events: none; opacity: 0.5; }
.home-house-drift-track { display: flex; width: 200%; height: 100%; animation: home-house-drift 38s linear infinite; }
.home-house-drift .skyline { position: static; flex: 0 0 50%; width: 50%; height: 100%; opacity: 1; pointer-events: none; }
@keyframes home-house-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.view.is-hidden .home-house-drift-track { animation-play-state: paused; }
.home-sky-atmosphere { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.home-local-time,
.home-patrol-score {
  position: absolute; top: 5%; z-index: 3;
  font-family: var(--font-numeric); font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 400; line-height: 1; letter-spacing: 0.04em;
  color: var(--gold-050); text-shadow: 0 2px 0 rgb(0 0 0 / 55%);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.home-local-time { left: clamp(32px, 5vw, 88px); }
.home-patrol-score { right: clamp(32px, 5vw, 88px); text-align: right; }
.home-patrol-hint {
  position: absolute; top: calc(5% + 52px); right: clamp(32px, 5vw, 88px); z-index: 3; text-align: right;
  display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 4px 8px;
  border: 1px solid rgb(196 151 74 / 42%); border-radius: 3px; background: rgb(16 20 22 / 82%);
  font-family: var(--font-numeric); font-size: clamp(10px, 1vw, 13px); letter-spacing: 0.06em;
  color: var(--gold-muted); text-shadow: 0 2px 0 rgb(0 0 0 / 55%); pointer-events: auto; cursor: pointer; touch-action: manipulation;
}
.home-patrol-hint:hover { color: var(--gold-050); border-color: var(--gold-muted); }
.home-patrol-hint:focus-visible { outline: 2px solid var(--gold-050); outline-offset: 3px; }
.home-helicopter {
  position: absolute; top: 18%; left: -160px; z-index: 4;
  display: block; width: 128px; height: 64px; padding: 0;
  border: 0; background: transparent; opacity: 0;
  pointer-events: auto; cursor: var(--cursor-reticle), crosshair;
}
.home-helicopter-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.home-helicopter.is-flying { animation: home-helicopter-pass 18s linear 1 both; }
.home-helicopter.home-helicopter-left.is-flying { animation-name: home-helicopter-pass-left; }
@keyframes home-helicopter-pass {
  0% { opacity: 0; transform: translate3d(-160px, 0, 0); }
  8% { opacity: 0.78; }
  86% { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(calc(100vw + 220px), 0, 0); }
}
@keyframes home-helicopter-pass-left {
  0% { opacity: 0; transform: translate3d(calc(100vw + 220px), 0, 0); }
  8% { opacity: 0.78; }
  86% { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(-160px, 0, 0); }
}
.home-patrol-effect {
  position: absolute; z-index: 5; display: block;
  opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0) scale(0.96);
}
@media (prefers-reduced-motion: no-preference) {
  .home-helicopter.is-flying,
  .home-patrol-effect.is-burst,
  .night-target.is-flight,
  .night-shift-effect.is-burst,
  .night-shift-effect.night-shift-aircraft-burst { will-change: transform, opacity; }
}
.home-patrol-effect img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.home-patrol-impact { width: 64px; height: 64px; }
.home-patrol-smoke { width: 80px; height: 64px; }
.home-patrol-impact.is-burst { animation: patrol-impact-burst 520ms steps(4, end) both; }
.home-patrol-smoke.is-burst { animation: patrol-smoke-burst 760ms steps(5, end) 70ms both; }
@keyframes patrol-impact-burst {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.96); }
  15% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -4px, 0) scale(1.05); }
}
@keyframes patrol-smoke-burst {
  0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(0.96); }
  16% { opacity: 0.85; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-8px, -12px, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .home-house-drift-track { animation: none; transform: none; }
  .home-helicopter.is-flying { animation: none; opacity: 0.78; transform: translate3d(50vw, 0, 0); }
  .home-helicopter.is-hit { opacity: 0; transform: none; }
  .home-patrol-impact.is-burst,
  .home-patrol-smoke.is-burst { animation: none; opacity: 0; transform: none; }
}

/* ============================================================
   NIGHT SHIFT — Home-only wave microgame
   ============================================================ */
.night-shift { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; background: transparent; }
.night-shift-hud {
  position: absolute; inset: 0; z-index: 2;
  display: block; padding: 0;
  pointer-events: none;
}
.night-shift-wave {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-numeric); font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 700; line-height: 1; letter-spacing: 0.04em;
  color: var(--gold-050); text-shadow: 0 2px 0 rgb(0 0 0 / 55%);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.night-shift-readout { position: absolute; top: 54px; left: 50%; display: flex; align-items: center; gap: 6px; min-width: 74px; transform: translateX(-50%); }
.night-shift-readout > .t-micro { display: none; }
.night-shift-hearts { display: flex; align-items: center; gap: 4px; min-height: 16px; }
.night-heart { width: 16px; height: 14px; display: block; image-rendering: pixelated; }
.night-heart.is-empty { opacity: 0.25; }
.night-shift-exit { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 40px; padding: 0 12px; pointer-events: auto; }
.night-shift-targets, .night-shift-effects { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.night-shift-wave-banner {
  position: absolute; top: 45%; left: 50%; z-index: 2;
  transform: translate3d(-50%, -50%, 0) scale(0.96); opacity: 0;
  font-family: var(--font-display); font-size: clamp(30px, 6vw, 84px); font-weight: 700;
  line-height: 1; letter-spacing: 0.06em; color: var(--gold-050);
  text-shadow: 0 3px 0 var(--night-shadow), 0 6px 0 rgb(0 0 0 / 45%);
  pointer-events: none;
}
.night-shift-wave-banner.is-announcing { animation: night-wave-announce 900ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes night-wave-announce {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.96); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  72% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.03); }
}
.night-target {
  position: absolute; z-index: 1; display: block; width: 128px; height: 64px; padding: 0;
  border: 0; background: transparent; pointer-events: auto; cursor: var(--cursor-reticle), crosshair;
}
.night-target img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.night-target-right { left: -160px; }
.night-target-left { right: -160px; }
.night-target-right.is-flight { animation: night-target-flight-right var(--night-flight-duration, 6800ms) linear both; }
.night-target-left.is-flight { animation: night-target-flight-left var(--night-flight-duration, 6800ms) linear both; }
.night-target-drop { left: var(--night-drop-left, 50%); top: -96px; }
.night-target-drop.is-flight { animation: night-target-drop var(--night-flight-duration, 6800ms) linear both; }
@keyframes night-target-flight-right {
  0% { opacity: 0; transform: translate3d(-160px, 0, 0); }
  8% { opacity: 0.82; }
  88% { opacity: 0.82; }
  100% { opacity: 0.82; transform: translate3d(calc(100vw + 180px), 0, 0); }
}
@keyframes night-target-flight-left {
  0% { opacity: 0; transform: translate3d(160px, 0, 0); }
  8% { opacity: 0.82; }
  88% { opacity: 0.82; }
  100% { opacity: 0.82; transform: translate3d(calc(-100vw - 180px), 0, 0); }
}
@keyframes night-target-drop {
  0% { opacity: 0; transform: translate3d(0, -96px, 0) rotate(-8deg); }
  8% { opacity: 0.82; }
  88% { opacity: 0.82; transform: translate3d(0, calc(100vh - 96px), 0) rotate(8deg); }
  100% { opacity: 0.82; transform: translate3d(0, calc(100vh + 140px), 0) rotate(-10deg); }
}
.night-target.is-popping { animation: none; pointer-events: none; }
.night-shift-effect { position: absolute; z-index: 3; width: 64px; height: 64px; opacity: 0; pointer-events: none; }
.night-shift-effect img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.night-shift-effect.is-burst { animation: night-shift-burst 620ms steps(4, end) both; }
.night-shift-aircraft-burst { animation: night-shift-burst 820ms steps(8, end) both; }
.night-shift-home-impact.is-burst { animation: patrol-impact-burst 520ms steps(4, end) both; }
.night-shift-home-smoke.is-burst { animation: patrol-smoke-burst 760ms steps(5, end) 70ms both; }
@keyframes night-shift-burst {
  0% { opacity: 0; transform: translate3d(0, 5px, 0) scale(0.96); }
  14% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -6px, 0) scale(1.05); }
}
.night-shift-open #view-home .parlor-statement,
.night-shift-open #view-home .home-entry-desk,
.night-shift-open #view-home .home-patrol-hint,
.night-shift-open #log-drawer {
  visibility: hidden;
  pointer-events: none;
}
.night-shift-paused .night-target.is-flight,
.night-shift-paused .night-shift-wave-banner,
.night-shift-paused .night-shift-effect { animation-play-state: paused; }
@media (max-width: 720px) {
  .night-shift-wave { top: 14px; }
  .night-shift-readout { top: 44px; }
  .night-shift-exit { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .night-target-right.is-flight { left: 38%; animation: none; opacity: 0.82; transform: none; }
  .night-target-left.is-flight { right: 38%; animation: none; opacity: 0.82; transform: none; }
  .night-target-drop.is-flight { left: 46%; top: 40%; animation: none; opacity: 0.82; transform: none; }
  .night-target.is-popping { animation: none; opacity: 0; transform: none; }
  .night-shift-effect.is-burst,
  .night-shift-aircraft-burst,
  .night-shift-home-impact,
  .night-shift-home-smoke { animation: none; opacity: 1; transform: none; }
  .night-shift-wave-banner.is-announcing { animation: none; opacity: 1; transform: translate3d(-50%, -50%, 0); }
}

/* Keep one deliberate Home status strip. Legacy dynamic row details remain
   visually suppressed until their semantic owner is consolidated. */
#view-game .pr-right,
.room-state-tag { display: none !important; }

.title-grid { position: relative; z-index: 2; display: grid; gap: 24px; padding: 20px; }
.title-grid-clean { align-items: center; }
.ts-left { display: flex; flex-direction: column; }
.ts-kicker { display: flex; align-items: center; gap: 8px; }
.ts-word { margin-top: 20px; }
.ts-rule { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.rule-line { display: block; width: 32px; height: 1px; background: var(--gold-500); }
.ts-copy { margin-top: 16px; max-width: 440px; font-size: 14px; color: var(--text-secondary); }

.ts-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.ts-cta { min-height: 78px; padding: 0 28px; }
.ts-cta .cta-text { font-size: 30px; }
.ts-join { min-height: 78px; padding: 0 20px; gap: 12px; }

.open-chair {
  margin-top: 20px; max-width: 480px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-input);
  border: 1px solid var(--line-default);
  border-radius: 2px;
}
.chair-av {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-active);
}
.chair-text { flex: 1; min-width: 0; }
.chair-name { margin-top: 6px; display: block; }
.chair-edit { height: 32px; padding: 0 12px; flex-shrink: 0; }
.home-alias-form { margin-top: 14px; max-width: 480px; display: flex; flex-direction: column; gap: 7px; }
.home-alias-form .field { width: 100%; }
.home-alias-error { min-height: 16px; color: var(--red-bright); font-family: var(--font-body); font-size: 11px; line-height: 1.4; }

.profile-library { margin-top: 14px; max-width: 480px; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pl-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pl-head-actions .profile-delete { margin-right: 0; }
.pl-save { min-height: 30px; padding: 0 12px; }
.pl-save .cta-text { font-size: 11px; }
.pl-new { height: 30px; padding: 0 12px; }
.profile-save-status { min-height: 16px; margin: 4px 0 8px; color: var(--green-status); }
.pl-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-tile {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  transition: border-color 100ms steps(2, end), background 100ms steps(2, end);
  min-width: 150px;
  flex: 1 1 210px;
  max-width: 240px;
}
.pl-tile:hover { border-color: var(--gold-500); background: var(--surface-hover); }
.pl-tile.is-active { border-color: var(--line-active); box-shadow: var(--shadow-active); background: var(--surface-selected); }
.pl-tile.is-draft { border-style: dashed; border-color: var(--gold-500); background: var(--surface-selected); }
.pl-tile.is-editing { border-color: var(--gold-300); box-shadow: var(--shadow-active); }
.pl-tile-draft { cursor: default; }
.pl-tile-select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.pl-tile-select:hover { background: transparent; }
.pl-tile-select:focus-visible { outline-offset: 3px; }
.pl-tile-av {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.pl-tile.is-active .pl-tile-av { border-color: var(--line-active); }
.pl-tile-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: left; }
.pl-tile-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tile-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pl-tile-actions .btn-dark { height: 24px; padding: 0 8px; }
.pl-tile-actions .t-label { font-size: 10px; }
.pl-tile-actions .pl-delete { color: var(--red-bright); }
.pl-draft-badge { padding: 3px 5px; border: 1px solid var(--gold-500); white-space: nowrap; }
.pl-empty { color: var(--text-muted); font-family: var(--font-body); font-size: 12px; padding: 4px 0; }

/* ============================================================
   DEED DETAIL / HOUSE MANAGER
   ============================================================ */
.deed-detail-card { max-width: min(520px, calc(100vw - 32px)); }
.dd-rail { height: 10px; width: 100%; }
.dd-body { padding: 16px; }
.dd-head { display: flex; align-items: flex-start; gap: 14px; }
.dd-icon {
  width: 60px; height: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); border-radius: 2px;
}
.dd-title { margin-top: 6px; font-size: 17px; line-height: 1.2; color: var(--gold-100); }
.dd-close { height: 32px; padding: 0 12px; flex-shrink: 0; }

.dd-stats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.dd-ladder { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.dd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.dd-row.is-current {
  background: var(--surface-selected);
  border-color: var(--line-active);
  box-shadow: var(--shadow-active);
}
.dd-row-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dd-row-pips { display: flex; gap: 2px; align-items: center; min-width: 46px; }
.dd-row-rent { font-family: var(--font-numeric); font-size: 13px; font-weight: 700; color: var(--green-status); font-variant-numeric: tabular-nums; }
.dd-row.is-current .dd-row-rent { color: var(--gold-050); }
.dd-now { font-size: 6px; color: var(--gold-300); }

.dd-build { margin-top: 16px; }
.dd-build-msg {
  padding: 10px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.dd-build-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-build-btn { height: 54px; flex-direction: column; gap: 3px; }
.dd-build-btn .t-label { font-size: 13px; }
.dd-build-btn .t-micro { color: rgb(240 217 172 / 55%); }
.dd-sell-btn .t-micro { color: var(--text-muted); }
.dd-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deed-card.is-clickable { cursor: pointer; }
.deed-card.is-clickable:hover { border-color: var(--gold-500); }

/* card reveal */
.card-reveal { max-width: 448px; overflow: hidden; border-color: var(--line-board); box-shadow: 0 18px 60px rgb(0 0 0 / 58%), 0 0 0 1px rgb(207 167 95 / 10%); }
.cr-card { --cr-accent: var(--gold-500); position: relative; overflow: hidden; background: linear-gradient(145deg, var(--surface-card-highlight) 0%, var(--surface-card) 62%, var(--surface-board-tile) 100%); }
.cr-card::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgb(232 211 171 / 10%); border-radius: 2px; }
.cr-rail { position: relative; z-index: 1; height: 7px; width: 100%; background: var(--cr-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--cr-accent) 38%, transparent); }
.cr-body { position: relative; z-index: 1; padding: 22px 24px 24px; text-align: center; }
.cr-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cr-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--gold-050); background: rgb(1 7 10 / 48%); border: 1px solid color-mix(in srgb, var(--cr-accent) 62%, var(--line-default)); border-radius: 2px; letter-spacing: 0.12em; }
.cr-sequence { letter-spacing: 0.12em; }
.cr-icon { width: 92px; height: 72px; margin: 20px auto 11px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgb(207 167 95 / 16%), transparent 68%); border-top: 1px solid rgb(207 167 95 / 22%); border-bottom: 1px solid rgb(207 167 95 / 22%); }
.cr-icon .board-icon-mark { width: 58px; height: auto; }
.cr-icon .airport-mark { width: 52px; }
.cr-icon [data-sprite] { transform: scale(1.15); }
.cr-source { display: block; letter-spacing: 0.14em; }
.cr-name { max-width: 34ch; margin: 11px auto 0; font-family: var(--font-display); font-size: clamp(18px, 3.8vw, 24px); line-height: 1.22; letter-spacing: 0.02em; color: var(--gold-100); text-wrap: balance; }
.cr-rule { width: 74%; height: 1px; margin: 18px auto 14px; background: linear-gradient(90deg, transparent, var(--cr-accent), transparent); opacity: 0.72; }
.cr-outcome { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 12px; background: rgb(1 7 10 / 42%); border: 1px solid var(--line-dark); }
.cr-outcome-label { letter-spacing: 0.14em; }
.cr-amount { font-family: var(--font-numeric); font-size: 25px; font-weight: 700; letter-spacing: 0.04em; }
.cr-amount.positive { color: var(--green-status); }
.cr-amount.negative { color: var(--red-bright); }
.cr-amount.neutral { color: var(--gold-050); font-size: 17px; }
.cr-btn { margin-top: 18px; width: 100%; height: 48px; }

/* all-card design gallery (visual-only ?preview=cards route) */
.card-gallery { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 28px); }
.card-gallery-scrim { position: absolute; inset: 0; background: var(--theme-gallery-scrim); }
.card-gallery-shell { position: relative; z-index: 1; width: min(1180px, 100%); max-height: min(94vh, 980px); display: flex; flex-direction: column; overflow: hidden; border-color: var(--line-board); box-shadow: 0 18px 70px rgb(0 0 0 / 65%); }
.card-gallery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line-dark); background: rgb(8 24 24 / 80%); }
.card-gallery-head h2 { margin-top: 7px; color: var(--gold-100); }
.card-gallery-head p { margin-top: 7px; max-width: 58ch; }
.card-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; padding: 16px; overflow: auto; }
.card-gallery-grid .cr-card { min-width: 0; border: 1px solid var(--line-dark); }
.card-gallery-grid .cr-card:hover { border-color: color-mix(in srgb, var(--cr-accent) 70%, var(--line-default)); }
.card-gallery-grid .cr-card::before { inset: 7px; }
.card-gallery-grid .cr-body { padding: 15px 16px 16px; }
.card-gallery-grid .cr-meta { gap: 8px; }
.card-gallery-grid .cr-kind { padding: 4px 7px; }
.card-gallery-grid .cr-icon { width: 76px; height: 54px; margin: 13px auto 9px; }
.card-gallery-grid .cr-icon .board-icon-mark { width: 42px; }
.card-gallery-grid .cr-icon .airport-mark { width: 38px; }
.card-gallery-grid .cr-name { min-height: 3.7em; margin-top: 9px; font-size: 15px; line-height: 1.22; }
.card-gallery-grid .cr-rule { margin: 12px auto 10px; }
.card-gallery-grid .cr-outcome { padding: 7px 9px; }
.card-gallery-grid .cr-amount { font-size: 17px; }
.card-gallery-grid .cr-amount.neutral { font-size: 13px; }

@media (max-width: 620px) {
  .card-gallery { padding: 0; align-items: stretch; }
  .card-gallery-shell { max-height: 100vh; border-left: 0; border-right: 0; }
  .card-gallery-head { padding: 15px; }
  .card-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .card-gallery-grid .cr-body { padding: 12px 10px; }
  .card-gallery-grid .cr-name { font-size: 13px; }
  .card-gallery-grid .cr-sequence { font-size: 8px; }
}

/* game over */
.go-name { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--gold-050); text-shadow: 0 2px 0 var(--go-shadow-1), 0 4px 0 var(--go-shadow-2); }
.go-kicker { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.go-summary { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.go-summary-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-panel-raised); border: 1px solid var(--line-subtle); border-radius: 2px; }
.go-summary-row.is-winner { border-color: var(--line-active); box-shadow: var(--shadow-active); }
.go-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.profile-delete { margin-right: auto; height: 40px; padding: 0 16px; }
.profile-delete .t-label { color: var(--red-bright); }
.profile-delete:hover { border-color: var(--red-bright); color: var(--red-bright); }

.ts-right { display: flex; flex-direction: column; gap: 16px; }
.ts-right-clean { max-width: 360px; margin-left: auto; width: 100%; }

.mini-board {
  width: 100%;
  padding: 5px;
  background: var(--surface-board-frame);
  border: 2px solid var(--line-board);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(232 211 171 / 5%);
}
.mini-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2px;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.mini-cell { position: relative; background: var(--surface-board-tile); border: 1px solid var(--line-default); }
.mini-cell.is-corner { border-color: var(--line-board); display: flex; align-items: center; justify-content: center; }
.mini-cell .strip { position: absolute; left: 0; right: 0; top: 0; height: 26%; }
.mini-center {
  position: absolute; inset: 0; margin: auto;
  width: 54%; height: 54%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-board-center);
  border: 1px solid #14403c;
  pointer-events: none;
}
.mini-ver { margin-top: 8px; }

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-stat {
  padding: 10px;
  background: var(--surface-panel);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: 8px;
}

.st-dot { display: block; width: 8px; height: 8px; border-radius: 999px; }

/* rooms browser & creator */
.rooms-card { max-width: 720px; width: 100%; }
.rooms-body { padding: 16px; }
.rooms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rooms-title { margin-top: 8px; font-size: 18px; }
.rooms-copy { margin-top: 10px; }

.rm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-bottom: 1px solid var(--line-subtle); }
.rm-tab { position: relative; min-width: 0; padding: 10px 2px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: background 100ms steps(2, end), color 100ms steps(2, end); cursor: pointer; }
.rm-tab .t-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(9px, 1.05vw, 12px); }
.rm-tab.is-active { background: var(--surface-board-hover); color: var(--gold-300); }
.rm-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); }

.rooms-filters { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.rooms-filter { height: 32px; padding: 0 10px; }
.rooms-filter.is-active { border-color: var(--line-active); color: var(--gold-050); box-shadow: var(--shadow-active); }
.rooms-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: min(48vh, 420px); overflow-y: auto; }
.room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.room-row:hover { background: var(--surface-hover); }
.room-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.room-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-code { color: var(--gold-300); }
.room-name { color: var(--text-primary); }
.room-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.room-meta-item { display: flex; align-items: center; gap: 6px; }
.room-actions { display: flex; align-items: center; gap: 8px; }
.room-actions .btn-dark, .room-actions .cta-red { height: 36px; padding: 0 12px; }
.rooms-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--line-subtle);
  border-radius: 2px;
}
.rooms-foot { margin-top: 14px; }
.rooms-host { width: 100%; height: 52px; }

.ticker {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 16px;
  padding: 10px 14px;
  background: var(--bg-chrome);
  border-top: 1px solid var(--line-subtle);
}
.tk { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.tk-sep { padding-right: 12px; }
.tk-right { display: none; margin-left: auto; }

/* ============================================================
   GAME — shell
   ============================================================ */
.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 14px 14px;
  min-height: 0;
}
.rail-left { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.rail-center { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* players */
.player-list { display: flex; flex-direction: column; gap: 8px; }
.player-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 10px 12px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 4%);
  transition: background 100ms steps(2, end);
}
.player-row-action { width: 100%; text-align: left; cursor: pointer; }
.player-row-action:hover, .player-row-action:focus-visible { background: var(--surface-active); border-color: var(--line-active); }
.player-row.is-active {
  background: var(--surface-selected);
  border: 2px solid var(--line-active);
  box-shadow: var(--shadow-active);
}
.pr-arrow { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); }
.pr-av {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.player-row.is-active .pr-av { border-color: var(--line-active); }
.pr-mid { flex: 1; min-width: 0; }
.pr-nameline { display: flex; align-items: center; gap: 6px; }
.pr-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-cash { margin-top: 5px; font-size: 12px; color: var(--gold-muted); }
.pr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pr-dot { display: block; width: 9px; height: 9px; border-radius: 999px; }
.player-row.is-spectating .pr-name,
.player-row.is-spectating .pr-cash,
.pr-spectating-label { color: var(--text-muted) !important; }
.player-row.is-spectating .pr-av-spectating { filter: grayscale(1); opacity: 0.58; }
.pr-dot-spectating { background: var(--text-muted); box-shadow: none; }

/* chat */
.chat-panel { display: flex; flex-direction: column; flex: 1; min-height: 240px; }
.chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-line { word-break: break-word; }
.chat-new-message { align-self: flex-end; margin-top: 6px; }
.action-status { color: var(--red-bright); margin: 8px 0 0; }
.chat-form { margin-top: 12px; display: flex; gap: 8px; }
.chat-input { flex: 1; min-width: 0; }
.chat-send { width: 44px; height: 44px; flex-shrink: 0; padding: 0; }

/* board */
.board-area { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.board-area { position: relative; }
.dice-roll-total {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(.82);
  color: var(--text-primary, #f6e7c7);
  font: clamp(72px, 13cqw, 220px)/.9 var(--font-pixel, var(--font-display));
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 0 10px var(--theme-action-edge), 0 0 30px var(--theme-action-edge), 0 0 68px var(--theme-action-edge);
  -webkit-text-stroke: 1px rgb(255 255 255 / 55%);
  user-select: none;
  image-rendering: pixelated;
}

.dice-roll-total.is-visible { animation: dice-total-reveal 2200ms ease-out both; }
@keyframes dice-total-reveal {
  0% { opacity: 0; transform: translate(-50%, -36%) scale(.72); }
  11%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dice-roll-total.is-visible { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes event-banner-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hud-loan-status { display: block; margin-top: 5px; color: var(--red-bright); font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.06em; }
.board-holder {
  position: relative;
  width: 100%;
  max-width: 760px;
  /* keep the board a square that never exceeds the available height */
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  container-type: size;
  max-height: 100%;
  margin: 0 auto;
}
.board-holder.is-metro { min-width: 560px; min-height: 560px; }
@media (max-width: 767px) {
  .board-holder.is-metro { min-width: 0; min-height: 0; }
}

.board-frame {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 6px;
  background: var(--surface-board-frame);
  border: 2px solid var(--line-board);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line-shadow), inset 0 0 0 1px rgb(232 211 171 / 5%), 0 4px 14px rgb(0 0 0 / 55%);
}
.board-grid {
  --board-grid-size: 11;
  --board-inner-count: 9;
  --board-inner-span: 9;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) repeat(var(--board-inner-count), minmax(0, 1fr)) minmax(0, 1.18fr);
  grid-template-rows: minmax(0, 1.18fr) repeat(var(--board-inner-count), minmax(0, 1fr)) minmax(0, 1.18fr);
  gap: 2px;
  height: 100%;
  width: 100%;
}

.tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-board-tile);
  border: 1px solid var(--line-default);
  text-align: center;
  transition: background 100ms steps(2, end);
}
.tile:hover { background: var(--surface-board-hover); }
.tile[aria-disabled="true"] { cursor: default; }
.tile[aria-disabled="true"]:hover { background: var(--surface-board-tile); }
.tile[aria-disabled="true"]:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -3px; }
.tile.is-corner { border-color: var(--line-board); gap: 4px; padding: 4px; }
.tile.is-highlight { border-color: var(--line-active); box-shadow: inset 0 0 0 1px var(--line-active), 0 0 8px rgb(200 143 46 / 25%); }
.tile-strip { position: absolute; }
.tile-name {
  display: block;
  color: var(--gold-100);
  font-size: clamp(9px, 1.2cqw, 13px);
  line-height: 1.15;
  white-space: nowrap;
}
.tile-price {
  margin-top: 2px;
  font-family: var(--font-numeric);
  font-size: clamp(10px, 1.2cqw, 14px);
  line-height: 1;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.tile-icon { margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.airport-mark {
  display: block;
  width: clamp(16px, 4cqw, 36px);
  height: auto;
  image-rendering: pixelated;
}
.airport-mark-card { width: 26px; }
.airport-mark-popup { width: 52px; }
.tile-owner { position: absolute; right: 2px; top: 2px; width: clamp(10px, .75vw, 16px); height: clamp(10px, .75vw, 16px); box-shadow: 0 0 0 1px var(--bg-canvas); }
.tile-owner > svg { display: block; width: 100%; height: 100%; }
.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  max-width: 100%;
}
.tile.side-left .tile-face { transform: rotate(90deg); }
.tile.side-right .tile-face { transform: rotate(-90deg); }
.tile-face-special {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  gap: 4px;
  padding: 4px;
}
.tile-face-special .tile-name { font-size: clamp(10px, 1.2cqw, 13px); }
.tile-icon-large svg { width: 32px; height: 32px; }
.board-icon-mark { display: block; height: auto; image-rendering: pixelated; }
.board-icon-chest { width: clamp(26px, 7cqw, 84px); }
.board-icon-surprise { width: clamp(26px, 7cqw, 84px); }
.tile-icon-large .board-icon-mark { width: clamp(26px, 7cqw, 84px); }
.go-big { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--red-bright); }
.jail-bars { width: 52%; }
.passing-by-corner-layout {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.passing-by-corner-label {
  position: absolute;
  top: 11%;
  left: 0;
  right: 0;
  width: 100%;
  color: var(--gold-100);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.passing-by-prison-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64%;
  height: 64%;
  overflow: hidden;
  background: linear-gradient(to bottom, #0b2020, #031314);
  border-top: 1px solid var(--gold-800);
  border-right: 1px solid var(--gold-800);
}
.passing-by-bars-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}
.passing-by-token-anchor {
  position: absolute;
  display: block;
  pointer-events: none;
}
.passing-by-token-anchor-pass {
  top: 0;
  right: 0;
  width: 36%;
  height: 50%;
}
.passing-by-token-anchor-prison {
  left: 0;
  bottom: 0;
  width: 64%;
  height: 64%;
}

.token-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-inset);
  border: 2px solid var(--gold-500);
  border-radius: 2px;
  box-shadow: 0 2px 0 rgb(0 0 0 / 70%), 0 0 0 1px #01070a;
  translate: 0 0;
  transform: translate(var(--piece-x, 0px), var(--piece-y, 0px)) translate(-50%, -50%);
  z-index: 1;
}
.piece.is-active {
  z-index: 5;
  box-shadow: 0 0 0 2px #c88f2e, 0 3px 0 rgb(0 0 0 / 70%);
}
.piece.is-moving {
  z-index: 6;
  transition: transform 240ms cubic-bezier(0.77, 0, 0.175, 1);
}
.piece.is-hopping {
  animation: piece-hop 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes piece-hop {
  0% { translate: 0 0; }
  50% { translate: 0 -7px; }
  100% { translate: 0 0; }
}

.center-field {
  position: relative;
  isolation: isolate;
  grid-column: 2 / span var(--board-inner-span);
  grid-row: 2 / span var(--board-inner-span);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--surface-board-center);
  border: 1px solid #14403c;
  box-shadow: inset 0 0 60px rgb(0 0 0 / 55%);
}
.center-skyline { top: 6%; bottom: auto; left: 50%; transform: translateX(-50%); width: 74%; height: auto; opacity: 0.48; }
.cf-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.cf-logo-row { display: flex; align-items: center; gap: 16px; }
.cf-orn { display: none; font-family: var(--font-pixel); font-size: 12px; color: var(--gold-300); }
.cf-rules { padding: 4px 16px; border-top: 2px dotted var(--line-board); border-bottom: 2px dotted var(--line-board); }
.cf-sub { margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--gold-muted); letter-spacing: 0.14em; }

.deck {
  position: absolute; bottom: 8%;
  display: none; align-items: center; justify-content: center;
  width: 132px; height: 86px;
}
.deck-chest {
  left: 10%;
  background: #042526;
  border: 2px solid var(--line-board);
  box-shadow: inset 0 0 0 3px var(--surface-board-center), inset 0 0 0 4px #6f6039;
  transform: rotate(-7deg);
}
.deck-chance {
  right: 10%;
  background: #280f0f;
  border: 2px solid var(--red-dark);
  box-shadow: inset 0 0 0 3px #1a0a0a, inset 0 0 0 4px #a5352c;
  transform: rotate(7deg);
}

/* setup overlay — fixed so it centers in the viewport and never clips inside the square board */
.setup-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.setup-scrim { position: fixed; inset: 0; background: var(--theme-setup-scrim); }
.setup-card { position: relative; z-index: 2; width: 100%; max-width: 460px; padding: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.su-tag { margin-left: auto; }
.su-copy { margin-bottom: 16px; }
.su-active-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 76px; padding: 10px 12px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-active);
  border-radius: 2px;
  box-shadow: var(--shadow-active);
}
.su-active-avatar {
  width: 54px; height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-active);
}
.su-active-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.su-active-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-active-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.su-active-actions > button { min-height: 34px; padding: 0 10px; }
.su-active-actions > button:first-child { flex: 1 1 180px; }
.su-active-actions > button:not(:first-child) { flex: 0 1 auto; }
.su-chooser { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-subtle); }

.su-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
.su-tab { position: relative; padding: 10px 4px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 100ms steps(2, end), color 100ms steps(2, end); }
.su-tab.is-active { background: var(--surface-board-hover); color: var(--gold-300); }
.su-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); }
.su-tab-count { color: var(--text-muted); }
.su-tab.is-active .su-tab-count { color: var(--gold-muted); }

.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.su-new-custom { margin-top: 12px; width: 100%; height: 42px; }
.su-empty-custom { padding: 20px 4px; text-align: center; color: var(--text-muted); font-family: var(--font-body); font-size: 12px; grid-column: 1 / -1; }
.su-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; text-align: left;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 4%);
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.su-opt.is-active { background: var(--surface-active); border: 2px solid var(--line-active); box-shadow: var(--shadow-active); }
.su-av {
  width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.su-opt.is-active .su-av { border-color: var(--line-active); }
.su-opt-create { border-style: dashed; }
.su-opt-create:hover { border-color: var(--gold-400); }
.su-av-plus {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-400);
}
.su-opt-profile .su-av { border-color: var(--gold-500); }
.su-state { margin-top: 6px; display: block; }
.su-opt.is-taken { border-style: dashed; border-color: var(--line-dark); background: var(--surface-panel-deep); }
.su-opt.is-taken .su-av { filter: grayscale(1); opacity: 0.45; border-color: var(--line-dark); }
.su-opt.is-taken .su-state { color: var(--red-bright); }

.su-opt-profile-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; text-align: left;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 4%);
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.su-opt-profile-wrap.is-active { background: var(--surface-active); border: 2px solid var(--line-active); box-shadow: var(--shadow-active); padding: 7px; }
.su-opt-select { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.su-opt-edit { height: 32px; padding: 0 10px; flex-shrink: 0; }
.su-actions { margin-top: 16px; display: flex; gap: 12px; }
.su-start { flex: 1; height: 52px; padding: 0 20px; }
.su-spec { height: 52px; padding: 0 16px; }

/* HUD */
.hud { display: grid; gap: 16px; flex-shrink: 0; }
.hud-cell {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 132px; padding: 14px;
  background: var(--surface-panel);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 5%), 0 2px 8px rgb(0 0 0 / 45%);
}
.hud-body { display: flex; align-items: center; gap: 12px; flex: 1; width: 100%; }
.hud-top-row { display: flex; align-items: center; gap: 8px; }
.hud-stage { padding: 2px 6px; border: 1px solid var(--line-active); border-radius: 2px; color: var(--gold-300); }
.hud-stage.st-end { color: var(--green-status); border-color: var(--green-status); }
.hud-stage.st-resolve { color: var(--red-bright); border-color: var(--red-bright); }
.hud-split { justify-content: space-between; }
.hud-cash-action {
  width: 100%;
  min-height: 58px;
  padding: 0;
  text-align: left;
  border: 1px solid transparent;
  color: inherit;
  background: transparent;
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.hud-cash-action:hover:not(:disabled) { background: var(--surface-button-dark); border-color: var(--line-subtle); }
.hud-cash-action:active:not(:disabled) { transform: translateY(1px); }
.hud-cash-action:focus-visible { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 3px; }
.hud-cash-action:disabled { cursor: not-allowed; opacity: .7; }
.hud-dice { justify-content: center; gap: 16px; }
.hud-pool { gap: 12px; }
.hud-name {
  display: block;
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; line-height: 1;
  color: var(--gold-300);
  text-shadow: 0 2px 0 rgb(0 0 0 / 55%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .hud-bot-status.is-thinking { animation: none; } }
.hud-jail-action { margin-top: 10px; min-height: 32px; padding: 0 10px; }
.hud-primary-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hud-jail-actions { display: grid; gap: 6px; }
.hud-primary-actions .hud-jail-action { width: 100%; margin-top: 0; white-space: normal; }
.t-money { text-shadow: 0 2px 0 rgb(0 0 0 / 50%); }
.pool-val { font-size: 30px; }
.pool-swatches { margin-top: 6px; display: flex; gap: 4px; }
.pool-swatches span { display: block; width: 11px; height: 11px; }
.hud-roll { min-height: 132px; padding: 0 18px; }
.hud-primary-actions .hud-roll { width: 100%; flex: 1 1 auto; }
.hud-roll .cta-text { font-size: 30px; }

.die {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 46px; height: 46px; padding: 7px;
  background: var(--gold-050);
  border: 1px solid var(--line-board);
  border-radius: 3px;
  box-shadow: inset -2px -2px 0 rgb(155 120 61 / 45%), 0 2px 4px rgb(0 0 0 / 45%);
}
.die span { display: block; }
.die span.on { background: #0d1b16; }
.die-blank {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: #e5d0a4;
  border: 1px solid var(--line-board);
  border-radius: 3px;
  box-shadow: inset -2px -2px 0 rgb(155 120 61 / 45%), 0 2px 4px rgb(0 0 0 / 45%);
  font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: #0d1b16;
}

/* right rail */
.right-rail { position: relative; display: flex; flex-direction: column; min-height: 520px; }
.rr-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; }
.rr-count { margin-left: auto; }
.tabs { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-subtle); }
.tab { position: relative; padding: 10px 4px; color: var(--text-muted); transition: background 100ms steps(2, end), color 100ms steps(2, end); }
.tab.is-active { background: var(--surface-board-hover); color: var(--gold-300); }
.tab-underline { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); }
.tab.is-active .tab-underline { display: block; }
.rr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rr-foot { padding: 0 12px 12px; }
.rr-empty { padding: 24px 4px; text-align: center; color: var(--text-muted); }
.deed-group { display: grid; gap: 8px; }
.deed-group-title { margin: 6px 0 0; color: var(--gold-400); }
.lobby-start-btn { height: 56px; width: 100%; }
.panel-menu { position: absolute; top: 58px; right: 14px; z-index: 68; width: min(360px, calc(100vw - 28px)); padding: 14px; background: var(--surface-panel); border: 1px solid var(--line-active); box-shadow: var(--shadow-panel); }
.panel-menu.is-hidden { display: none; }
.panel-menu.is-open { animation: panel-menu-in 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both; }
@keyframes panel-menu-in { from { opacity: .72; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.panel-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.panel-menu-head h2 { margin-top: 5px; color: var(--gold-100); }
.panel-menu-head button { min-height: 32px; padding: 0 8px; }
.panel-menu-options { display: grid; gap: 6px; margin-top: 12px; }
.panel-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 7px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); cursor: pointer; }
.panel-option > span { display: grid; gap: 3px; min-width: 0; }
.panel-option strong { color: var(--gold-100); }
.panel-option small { color: var(--text-muted); }
.panel-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold-400); }
.panel-option select { width: 112px; min-height: 34px; padding-inline: 7px; font-size: 11px; }
.panel-menu-note { margin-top: 10px; line-height: 1.45; }
.rail-left.is-players-hidden > .panel:first-child { display: none; }
.rail-left.is-chat-hidden > .chat-panel { display: none; }
.rail-left.is-panel-hidden { display: none; }
.right-rail.is-panel-hidden { display: none; }
.hud.is-compact .hud-cell { min-height: 92px; padding: 10px; }
.hud.is-compact .hud-cell:first-child .hud-note,
.hud.is-compact .hud-cell:first-child .hud-bot-status { display: none !important; }
.hud.is-compact .hud-roll { min-height: 92px; }
.rail-section { display: grid; gap: 8px; min-width: 0; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.rail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line-dark); }
.rail-section-head > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holdings-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.holdings-account-row > div, .holding-item-row > div { display: grid; gap: 4px; min-width: 0; }
.holdings-account-row strong, .holding-item-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holdings-account-row button, .holdings-items-open { min-height: 34px; padding: 0 8px; }
.holdings-empty { display: grid; gap: 8px; justify-items: start; }
.holding-item-list, .deals-player-list, .prediction-list { display: grid; gap: 6px; min-width: 0; }
.holding-item-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid var(--line-dark); background: var(--surface-panel); }
.holding-item-row button { min-height: 30px; padding: 0 7px; }
.holding-item-glyph { display: grid; place-items: center; width: 22px; height: 22px; color: var(--gold-400); border: 1px solid var(--line-active); font-family: var(--font-numeric); font-size: 12px; }
.deals-surface, .activity-surface { display: grid; gap: 8px; min-width: 0; }
.activity-data-status { margin: 0; letter-spacing: .08em; }
.spectator-rail { display: grid; gap: 10px; padding: 16px; border-color: var(--line-subtle); }
.spectator-rail-kicker { color: var(--text-muted); letter-spacing: .1em; }
.spectator-rail .btn-dark { min-height: 44px; }
.deals-filter-bar, .activity-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.deals-filter, .activity-mode-tab { min-height: 36px; padding: 0 5px; color: var(--text-muted); border: 1px solid transparent; }
.deals-filter:hover, .activity-mode-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.deals-filter.is-active, .activity-mode-tab.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.deals-note { line-height: 1.45; }
.activity-mode-content { min-width: 0; }
.prediction-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.prediction-summary-row > div { display: grid; gap: 4px; min-width: 0; }
.prediction-summary-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   LOBBY SETTINGS PANEL
   ============================================================ */
.lobby-section { display: flex; flex-direction: column; gap: 6px; }
.lobby-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--line-subtle);
  margin-bottom: 2px;
}
.lobby-section-head .t-label { font-size: 11px; color: var(--gold-400); }

/* toggle switch */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  transition: background 100ms steps(2, end);
}
.setting-row:hover { background: var(--surface-hover); }
.setting-label { display: flex; flex-direction: column; gap: 4px; }
.setting-desc { color: var(--text-muted); font-size: 10px; line-height: 1.4; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }

.tog {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 20px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  cursor: pointer;
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.tog.is-on {
  background: #2a2110;
  border-color: var(--gold-400);
}
.tog::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 14px;
  background: var(--line-default);
  border-radius: 1px;
  transition: transform 80ms steps(2, end), background 80ms steps(2, end);
}
.tog.is-on::after {
  transform: translateX(17px);
  background: var(--gold-400);
}
/* number stepper */
.setting-row-num {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.stepper { display: flex; align-items: center; gap: 0; }
.stepper-btn {
  width: 24px; height: 24px;
  background: var(--surface-button-dark);
  border: 1px solid var(--line-default);
  color: var(--gold-300);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: background 80ms steps(2, end);
}
.stepper-btn:hover:not(:disabled) { background: var(--surface-button-hover); color: var(--gold-050); }
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-val {
  min-width: 32px; text-align: center;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700;
  color: var(--gold-100);
  border-top: 1px solid var(--line-default);
  border-bottom: 1px solid var(--line-default);
  height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-input);
}

/* select */
.setting-select {
  height: 30px;
  padding: 0 8px;
  background: var(--surface-input);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  color: var(--gold-100);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
.setting-select:focus { outline: 2px solid var(--theme-focus, var(--gold-100)); }
.setting-select option { background: var(--surface-panel); }
.setting-control-stack { display: grid; justify-items: end; gap: 4px; min-width: 0; flex-shrink: 0; }
.setting-select.is-error { color: #f0b39a; border-color: var(--red-bright, #d74438); }
.setting-status { font: 9px/1 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase; }
.setting-status-error { color: #f0b39a; }

/* lobby player preview */
.lobby-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.lobby-av {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.lobby-player-you .lobby-av { border-color: var(--line-active); }
.lobby-player-info { flex: 1; min-width: 0; }
.lobby-player-name { display: flex; align-items: center; gap: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-brain-icon { width: 16px; height: 16px; flex: 0 0 16px; image-rendering: pixelated; }
.lobby-host-badge { flex: 0 0 auto; padding: 2px 4px; border: 1px solid var(--line-active); line-height: 1; }
.lobby-player-sub { margin-top: 4px; color: var(--text-muted); font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.04em; text-transform: uppercase; }
.lobby-ready-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

.settings-rule {
  padding: 10px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
}
.lobby-lock-note {
  border-color: var(--line-active);
  box-shadow: var(--shadow-active);
}

.deed-card {
  position: relative;
  display: flex; gap: 12px;
  min-height: 95px; padding: 12px 12px 12px 22px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  transition: background 100ms steps(2, end);
}
.deed-card:hover { background: var(--surface-hover); }
.deed-card[type="button"] { width: 100%; color: inherit; text-align: left; }
.deed-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; }
.deed-main { flex: 1; min-width: 0; }
.deed-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.deed-name { font-size: 12px; line-height: 1.25; color: var(--text-primary); }
.deed-price { flex-shrink: 0; font-size: 12px; color: var(--gold-300); }
.deed-rent { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deed-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deed-foot .btn-dark { padding: 5px 10px; }
.houses { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.deed-rent-scale { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.deed-build { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.deed-build .t-label { font-size: 11px; }
.build-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.build-row .btn-dark { height: 26px; padding: 0 10px; }
.build-msg { padding: 2px 0; }
.hotel-pixel { display: inline-flex; }

.rent-grid { margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rent-grid-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; background: #030c10; border: 1px solid #1d2927; }
.rent-grid-row .t-label { font-size: 11px; }

.log-line {
  padding: 6px 8px;
  color: var(--text-secondary);
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
}
.log-n { color: var(--gold-500); }

/* ============================================================
   tile popup
   ============================================================ */
.popup { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.popup-scrim { position: absolute; inset: 0; background: var(--theme-scrim); cursor: pointer; }
.popup-card { position: relative; z-index: 2; width: 100%; max-width: 440px; overflow: hidden; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.popup:not(.is-hidden) > .popup-card { animation: parlor-modal-enter var(--modal-enter-duration, 160ms) cubic-bezier(.23, 1, .32, 1) both; }
@keyframes parlor-modal-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .popup:not(.is-hidden) > .popup-card { animation: none; } }
.social-surface-card { max-width: min(1080px, calc(100vw - 48px)); max-height: min(88vh, 820px); }
#player-card {
  width: min(480px, calc(100vw - 32px));
  max-width: 480px;
  max-height: min(82dvh, 700px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#player-card .social-surface-head { padding: 12px 16px; }
#player-card .player-profile-head { padding: 12px 16px 0; }
#player-card .player-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 0; }
#player-card .player-profile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 16px; }
#player-card .player-profile-recent { margin: 12px 16px 0; }
.social-page-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; }
.social-page-main > .social-surface-head { background: var(--surface-panel); border: 1px solid var(--line-board); }
.social-page-main > .social-search { padding-inline: 0; }
.social-page-main > .social-search-results { padding-inline: 0; }
.social-page-main > .social-surface-body, .social-page-main > .ranking-list { max-height: none; min-height: 360px; padding-inline: 0; }
.rules-page-main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 16px 48px; }
.rules-shell { display: flex; flex-direction: column; gap: 14px; }
.rules-intro { display: flex; align-items: center; gap: 16px; padding: clamp(16px, 2.4vw, 28px); border-color: var(--line-board); background: var(--surface-panel); }
.rules-intro, .rules-toolbar { flex-shrink: 0; }
.rules-intro-icon { width: 58px; height: 58px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-active); box-shadow: var(--shadow-active); }
.rules-intro-icon img { width: 36px; height: 36px; image-rendering: pixelated; }
.rules-intro-copy { min-width: 0; flex: 1; }
.rules-intro-copy h1 { margin-top: 7px; color: var(--gold-050); }
.rules-intro-copy p { max-width: 72ch; margin-top: 9px; }
.rules-active-contract { color: var(--gold-100); }
.rules-intro-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; flex-shrink: 0; }
.rules-toolbar { display: flex; align-items: flex-end; gap: 16px; padding: 12px 16px; background: var(--surface-panel-deep); border-color: var(--line-subtle); }
.rules-search-label { display: flex; flex-direction: column; gap: 6px; min-width: min(520px, 100%); flex: 1; }
.rules-search-label .field { width: 100%; }
.rules-search-count { min-width: 100px; padding-bottom: 13px; text-align: right; }
.rules-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); align-items: start; gap: 14px; }
.rules-book-spread { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); align-items: stretch; gap: 14px; flex: 1; min-height: 0; }
.rules-index { position: sticky; top: 14px; padding: 12px; background: var(--surface-panel); border-color: var(--line-subtle); }
.rules-index-head { display: flex; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid var(--line-dark); }
.rules-index-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.rules-index-link { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 38px; padding: 0 7px; text-align: left; color: var(--text-muted); border: 1px solid transparent; }
.rules-index-link:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.rules-index-link.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.rules-index-link.is-filtered { display: none; }
.rules-index-number { color: var(--gold-400); font-family: var(--font-numeric); font-size: 10px; }
.rules-status { display: inline-flex; align-items: center; min-height: 19px; padding: 2px 5px; font-family: var(--font-body); font-size: 8px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-subtle); }
.rules-status-live { color: var(--green-status); border-color: rgb(53 166 83 / 55%); }
.rules-status-planned { color: var(--gold-300); border-color: var(--line-active); }
.rules-section-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rules-article { scroll-margin-top: 84px; padding: clamp(16px, 2vw, 24px); border-color: var(--line-subtle); animation: rules-article-in 180ms ease-out both; }
@keyframes rules-article-in { from { opacity: 0.7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.rules-article.is-filtered { display: none; }
.rules-article-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.rules-article-head h2 { margin-top: 7px; color: var(--gold-050); }
.rules-article-summary { max-width: 76ch; margin-top: 10px; }
.rules-article-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.rules-article-body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.rules-article-body h3 { margin-top: 3px; }
.rules-bullets, .rules-steps { display: flex; flex-direction: column; gap: 9px; padding-left: 20px; margin: 0; color: var(--text-secondary); }
.rules-bullets li, .rules-steps li { padding-left: 4px; font-family: var(--font-body); font-size: 13px; line-height: 1.45; }
.rules-steps { padding: 0; list-style: none; }
.rules-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.rules-steps p { margin-top: 4px; }
.rules-step-number { color: var(--gold-400); font-family: var(--font-numeric); font-size: 10px; }
.rules-callout, .rules-warning, .rules-planned, .rules-inline-note { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface-panel-deep); border: 1px solid var(--line-default); }
.rules-warning { border-color: var(--red-dark); }
.rules-warning .t-micro { color: var(--red-bright); }
.rules-planned { border-color: var(--line-active); }
.rules-inline-note { flex-direction: row; align-items: baseline; gap: 12px; border-style: dashed; }
.rules-board-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rules-board-order > div, .rules-term-grid > div, .rules-settings-table > div { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.rules-term-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rules-code-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--surface-panel-deep); border: 1px solid var(--line-default); color: var(--gold-100); font-family: var(--font-numeric); font-size: 10px; letter-spacing: 0.08em; }
.rules-code-flow i { color: var(--gold-400); font-style: normal; }
.rules-settings-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rules-settings-table .t-body, .rules-term-grid .t-body { color: var(--text-secondary); }
.rules-empty { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding: 20px; border-color: var(--line-active); }
.rules-book-page { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-panel); border: 1px solid var(--line-board); box-shadow: inset 0 1px 0 rgb(232 211 171 / 6%), 0 3px 14px rgb(0 0 0 / 28%); }
.rules-book-page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: clamp(16px, 2vw, 24px); overscroll-behavior: contain; }
.rules-book-page-scroll .rules-article-head { padding-bottom: 18px; }
.rules-book-page-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface-panel-deep); border-top: 1px solid var(--line-dark); }
.rules-page-turn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 34%; padding: 0 9px; }
.rules-page-turn .t-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-rules { height: 100vh; min-height: 0; overflow: hidden; }
#view-rules .rules-page-main { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
#view-rules .rules-shell { width: 100%; max-width: 1400px; min-height: 0; flex: 1; margin: 0 auto; }
#view-rules .rules-index { position: relative; top: auto; min-height: 0; overflow-y: auto; }
@media (max-width: 860px) {
  .rules-layout, .rules-book-spread { grid-template-columns: 1fr; }
  .rules-book-spread { overflow: hidden; }
  #view-rules .rules-index { max-height: 190px; }
  .rules-index-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .inactivity-timer-host { width: 50px; height: 50px; top: 8px; }
  .inactivity-timer-name { display: none; }
  .inactivity-timer-time { font-size: 9px; }
  .inactive-player-row { min-height: 40px; font-size: 11px; }
  .rules-page-main { padding-inline: 10px; }
  .rules-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon copy" "meta meta";
    align-items: start;
    gap: 12px;
  }
  .rules-intro-icon { grid-area: icon; }
  .rules-intro-copy { grid-area: copy; min-width: 0; }
  .rules-intro-meta { grid-area: meta; width: 100%; margin: 0; padding-top: 10px; align-items: flex-start; text-align: left; border-top: 1px solid var(--line-dark); }
  .rules-toolbar { align-items: stretch; flex-direction: column; }
  .rules-search-label { min-width: 0; }
  .rules-search-count { padding-bottom: 0; text-align: left; }
  .rules-index-nav, .rules-term-grid, .rules-settings-table, .rules-board-order { grid-template-columns: 1fr; }
  .rules-article-head { flex-direction: column; }
  .rules-article-meta { flex-direction: row; align-items: center; }
  .rules-inline-note { flex-direction: column; gap: 5px; }
  #view-rules .rules-page-main { padding-bottom: env(safe-area-inset-bottom); }
  #view-rules .rules-index { max-height: 170px; }
  .rules-book-page-footer { padding: 8px 10px; }
  .rules-page-turn { max-width: 42%; padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .rules-article { animation: none; }
}
.social-surface-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line-dark); }
.social-surface-head h2 { margin-top: 7px; color: var(--gold-050); }
.social-surface-head p { margin-top: 8px; max-width: 58ch; }
.social-close { min-height: 34px; padding: 0 10px; flex-shrink: 0; }
.social-tabs { display: flex; gap: 3px; padding: 4px; background: var(--surface-panel-deep); border-bottom: 1px solid var(--line-dark); }
.social-tab { min-height: 38px; padding: 0 10px; color: var(--text-muted); border: 1px solid transparent; }
.social-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.social-tab.is-active { color: var(--gold-050); border-color: var(--line-active); background: var(--surface-panel-raised); }
.social-search { display: flex; gap: 8px; padding: 12px 20px 0; }
.social-search input { flex: 1; min-width: 0; }
.social-search-results { display: grid; gap: 6px; padding: 8px 20px 0; }
.social-surface-body { display: grid; gap: 7px; max-height: 54vh; padding: 14px 20px 20px; overflow: auto; overscroll-behavior: contain; }
.social-player-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.social-player-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--line-default); }
.social-player-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.social-player-main strong, .social-player-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-player-open { min-height: 32px; padding: 0 9px; flex-shrink: 0; }
.social-request-row, .social-invite-row, .social-notification-row { display: grid; gap: 7px; padding: 9px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.social-request-actions { display: flex; gap: 7px; }
.social-request-actions button { min-height: 34px; padding: 0 10px; }
.social-notification-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.social-notification-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.social-notification-row .t-body { font-size: 12px; }
.social-notification-row.is-unread { border-color: var(--line-active); }
.toast-stack { position: fixed; z-index: 75; top: 78px; right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.bot-provider-banner { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 78; width: min(520px, calc(100vw - 32px)); padding: 10px 14px; transform: translateX(-50%); color: var(--red-bright); background: var(--surface-panel); border: 1px solid var(--red-bright); box-shadow: var(--shadow-panel); font: 11px/1.35 var(--font-pixel); letter-spacing: .04em; text-align: center; }
.bot-provider-banner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bot-provider-banner { transition: none; } }
@media (forced-colors: active) { .bot-provider-banner { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; } }
.parlor-toast.is-mythical { border-color: #18d6d0; box-shadow: 2px 0 0 rgb(231 76 207 / 62%), 0 10px 28px rgb(0 0 0 / 48%); }
.parlor-toast-title { display: block; color: var(--gold-050); }
.parlor-toast-body { display: block; margin-top: 5px; color: var(--text-secondary); font-family: var(--font-body); font-size: 12px; line-height: 1.35; }
.parlor-toast { position: relative; width: 100%; padding: 11px 32px 11px 13px; background: var(--surface-panel); border: 1px solid var(--line-active); box-shadow: 0 10px 28px rgb(0 0 0 / 48%); animation: parlor-toast-in 180ms steps(3, end) backwards; pointer-events: auto; cursor: pointer; }
.parlor-toast-close { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; color: var(--text-muted); border: 1px solid transparent; border-radius: 2px; }
.parlor-toast-close:hover, .parlor-toast-close:focus-visible { color: var(--gold-050); border-color: var(--line-default); background: var(--surface-panel-raised); }
.parlor-toast.is-error { border-color: var(--line-error); background: var(--surface-error); box-shadow: 0 10px 28px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(175 42 33 / 22%); }
.parlor-toast-glyph { flex-shrink: 0; width: 12px; height: 12px; margin-top: 2px; color: var(--red-bright); }
.parlor-toast-glyph svg { display: block; width: 100%; height: 100%; }
.parlor-toast.is-error > .t-label { display: flex; align-items: flex-start; gap: 8px; color: var(--text-error); }
/* stack lift: older siblings shift up + shrink as they sink away (Kowalski pattern) */
.parlor-toast { transform: translateY(calc(-14px * var(--toasts-before, 0))) scale(calc(1 - 0.05 * var(--toasts-before, 0))); }
@keyframes parlor-toast-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes parlor-toast-out { to { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .parlor-toast { animation: none; transform: none; } .parlor-toast.is-leaving { opacity: 0; } }
.social-signin-note { display: grid; gap: 10px; padding: 16px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.social-signin-note button { min-height: 42px; }
.social-empty { padding: 24px 8px; text-align: center; }
.ranking-list { display: grid; gap: 6px; max-height: 58vh; padding: 14px 20px 20px; overflow: auto; overscroll-behavior: contain; }
.ranking-row { display: grid; grid-template-columns: 32px 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.ranking-row:hover, .ranking-row:focus-visible { border-color: var(--line-active); background: var(--surface-panel-raised); }
.ranking-place { color: var(--gold-400); font-variant-numeric: tabular-nums; }
.ranking-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-default); }
.ranking-player { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ranking-player strong, .ranking-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-trend { width: fit-content; }
.ranking-trend-up { color: var(--green-status); }
.ranking-trend-down { color: var(--red-bright); }
.ranking-trend-flat { color: var(--text-muted); }
.ranking-value { font-variant-numeric: tabular-nums; }
.rankings-page-shell, .social-page-shell { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.rankings-hero, .social-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: clamp(16px, 2vw, 24px); border-color: var(--line-board); background: var(--surface-panel); }
.rankings-page-shell.is-modal .rankings-hero,
.social-page-shell.is-modal .social-hero { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.rankings-hero-mark, .social-hero-mark { width: 54px; height: 54px; display: grid; place-items: center; background: var(--surface-panel-deep); border: 1px solid var(--line-active); box-shadow: var(--shadow-active); }
.rankings-hero-mark img, .social-hero-mark img { width: 32px; height: 32px; image-rendering: pixelated; }
.rankings-hero-copy, .social-hero-copy { min-width: 0; }
.rankings-search-band { padding: 10px 14px; background: var(--surface-panel-deep); border-color: var(--line-subtle); }
.rankings-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rankings-search-field { display: grid; gap: 5px; min-width: 0; }
.rankings-search-label { display: block; min-width: 0; }
.rankings-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.rankings-search-controls .field { width: 100%; min-width: 0; }
.rankings-search-submit { align-self: stretch; min-width: 84px; min-height: 44px; }
.rankings-search-results { grid-column: 1 / -1; display: grid; gap: 5px; padding-top: 6px; }
.ranking-search-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 5px 8px; text-align: left; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.ranking-search-result:hover, .ranking-search-result:focus-visible { border-color: var(--line-active); background: var(--surface-panel-raised); }
.rankings-hero-copy h2, .social-hero-copy h2 { margin-top: 7px; color: var(--gold-050); }
.rankings-hero-copy p, .social-hero-copy p { max-width: 70ch; margin-top: 9px; }
.rankings-hero-stats, .social-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 7px; }
.rankings-hero-stat, .social-hero-stats > div { display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.rankings-hero-stat strong, .social-hero-stats strong { font-variant-numeric: tabular-nums; }
.rankings-page-shell.is-page { height: 100%; }
.rankings-stage { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-color: var(--line-board); }
.rankings-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line-dark); }
.rankings-stage-copy { min-width: 0; }
.rankings-stage-copy h3 { margin-top: 6px; color: var(--gold-050); }
.rankings-stage-copy p { max-width: 70ch; margin-top: 7px; color: var(--text-secondary); }
.ranking-stage-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ranking-step { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; font-family: var(--font-pixel); font-size: 25px; line-height: 1; color: var(--gold-100); }
.ranking-step:hover, .ranking-step:focus-visible { color: var(--gold-050); border-color: var(--line-active); }
.ranking-metric-navigation { display: flex; justify-content: flex-end; padding: 4px 14px; background: var(--surface-panel-deep); border-bottom: 1px solid var(--line-dark); }
.ranking-position { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 65px; text-align: center; }
.ranking-position strong { font-variant-numeric: tabular-nums; }
.rankings-stage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 47px; padding: 0 14px; border-bottom: 1px solid var(--line-dark); background: var(--surface-panel-deep); }
.rankings-stage-toolbar .ranking-scopes { padding: 0; }
.ranking-stage-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rankings-stage:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.rankings-stage .ranking-list { flex: 1; min-height: 0; max-height: none; padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.ranking-scopes { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px 0; }
.ranking-scope { min-height: 30px; padding: 4px 8px; color: var(--text-muted); background: transparent; border: 1px solid var(--line-subtle); cursor: pointer; }
.ranking-scope.is-active { color: var(--gold-100); border-color: var(--gold-300); background: rgba(217,166,47,.08); }
.rankings-main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.social-network-rail, .social-feed, .social-context { min-height: 0; overflow: hidden; }
.social-feed-head, .social-rail-head, .social-context-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-dark); }
.social-feed-head h3, .social-context-head h3 { margin-top: 6px; color: var(--gold-050); }
.social-page-shell.is-page { height: 100%; }
.social-search-band { flex-shrink: 0; padding: 12px 16px; background: var(--surface-panel-deep); border-color: var(--line-subtle); }
.social-search-band .social-search { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.social-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.social-search-label { display: grid; grid-template-rows: auto 44px auto; gap: 5px; min-width: 0; }
.social-search-label .field { width: 100%; min-height: 44px; height: 44px; }
.social-search-submit { align-self: start; min-width: 84px; min-height: 44px; height: 44px; margin-top: 18px; }
.social-search-results { grid-column: 1 / -1; display: grid; gap: 6px; }
.social-search-band .social-search-results { padding: 8px 0 0; }
.social-guest-shell { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 14px; }
.social-guest-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 14px; }
.social-guest-shell.is-guest .social-guest-content { filter: blur(3px); opacity: .42; pointer-events: none; user-select: none; }
.social-guest-gate { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: rgb(3 12 16 / 74%); border: 1px solid var(--line-active); }
.social-guest-gate-card { display: grid; gap: 10px; width: min(460px, 100%); padding: 24px; background: var(--surface-panel); border: 1px solid var(--line-board); box-shadow: var(--shadow-active); text-align: center; }
.social-guest-gate-card h3 { color: var(--gold-050); }
.social-guest-gate-card p { max-width: 48ch; margin: 0 auto; }
.social-guest-gate-card button { min-height: 46px; margin-top: 4px; }
.social-network-grid { display: grid; grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.65fr) minmax(270px, 0.9fr); gap: 14px; flex: 1; min-height: 0; }
.social-network-rail { padding: 12px; background: var(--surface-panel); border-color: var(--line-subtle); }
.social-rail-head { padding: 2px 2px 10px; }
.social-rail-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.social-rail-nav .social-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 10px; text-align: left; }
.social-tab-count { min-width: 21px; padding: 2px 5px; color: var(--gold-300); font-family: var(--font-numeric); font-size: 9px; text-align: center; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.social-tab.is-active .social-tab-count { color: var(--gold-050); border-color: var(--line-active); }
.social-feed { display: flex; flex-direction: column; background: var(--surface-panel); border-color: var(--line-subtle); }
.social-feed:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.social-feed .social-surface-body { flex: 1; min-height: 0; max-height: none; padding: 12px 14px 16px; overflow-y: auto; }
.social-context { display: flex; flex-direction: column; background: var(--surface-panel); border-color: var(--line-subtle); }
.social-context-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 12px 14px 0; }
.social-context-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.social-context-roster { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; overflow-y: auto; }
.social-context-empty { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface-panel-deep); border: 1px dashed var(--line-subtle); }
.social-context-foot { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-top: 1px dashed var(--line-subtle); }
.recent-players-wrap { display: grid; gap: 9px; }
.recent-players-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-subtle); }
#view-rankings, #view-social { min-height: 0; height: 100vh; overflow: hidden; }
#view-rankings .social-page-main, #view-social .social-page-main { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.social-page-main > .social-page-shell { flex: 1; min-height: 0; }
@media (max-width: 1100px) {
  .rankings-hero, .social-hero,
  .rankings-page-shell.is-modal .rankings-hero,
  .social-page-shell.is-modal .social-hero { grid-template-columns: auto minmax(0, 1fr); }
  .rankings-hero-stats { grid-column: 1 / -1; }
  .social-hero-stats { grid-column: 1 / -1; }
  .rankings-main-grid { grid-template-columns: 1fr; }
  .social-network-grid { grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.25fr); }
  .social-context { grid-column: 1 / -1; max-height: 240px; }
}
@media (max-width: 640px) {
  #view-rankings .social-page-main, #view-social .social-page-main { padding: 12px 10px 24px; }
  #view-rankings .social-page-main, #view-social .social-page-main { overflow-y: auto; overflow-x: hidden; }
  .rankings-page-shell.is-page, .social-page-shell.is-page { height: auto; min-height: 0; }
  .rankings-main-grid, .social-network-grid { flex: none; min-height: 0; }
  .rankings-stage { min-height: 520px; }
  .rankings-stage .ranking-list { min-height: 260px; }
  .social-network-rail { max-height: none; min-height: 180px; }
  .social-feed { min-height: 360px; }
  .social-context { max-height: none; min-height: 280px; }
  .rankings-hero, .social-hero,
  .rankings-page-shell.is-modal .rankings-hero,
  .social-page-shell.is-modal .social-hero { grid-template-columns: 1fr; }
  .rankings-hero-stats, .social-hero-stats { grid-column: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rankings-stage-head { flex-direction: column; gap: 12px; }
  .ranking-stage-controls { width: 100%; justify-content: space-between; }
  .ranking-position { flex: 1; }
  .rankings-stage-toolbar { align-items: flex-start; flex-direction: column; padding: 8px 10px; }
  .rankings-stage-toolbar .ranking-scopes { width: 100%; overflow-x: auto; }
  .ranking-stage-count { align-self: flex-end; }
  .social-network-grid { grid-template-columns: 1fr; }
  .social-network-rail { max-height: 190px; }
  .social-context { grid-column: auto; max-height: 220px; }
  .social-feed { min-height: 280px; }
  .social-search-row { grid-template-columns: 1fr; }
  .social-search-submit { width: 100%; margin-top: 0; }
  .rankings-search { grid-template-columns: 1fr; }
  .rankings-search-controls { grid-template-columns: 1fr; }
  .rankings-search-submit { width: 100%; }
  .market-derivative-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-book-spread { display: flex; flex-direction: column; flex: none; min-height: 0; }
  #view-rules .rules-index { flex: 0 0 auto; max-height: 150px; }
  #view-rules .rules-book-page { flex: 0 0 430px; min-height: 430px; }
}
.player-profile-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.player-profile-head > div:last-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.player-profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line-active); background: var(--surface-panel-deep); }
.player-profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 16px 20px 0; }
.player-profile-facts > div { display: flex; flex-direction: column; gap: 5px; padding: 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.player-profile-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 20px 20px; }
.player-profile-actions button { min-height: 42px; }
.player-history-scopes { display: flex; gap: 4px; margin: 14px 20px 0; padding: 4px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); overflow-x: auto; }
.player-history-scope { min-height: 32px; padding: 0 9px; color: var(--text-muted); border: 1px solid transparent; white-space: nowrap; }
.player-history-scope:hover, .player-history-scope.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.player-history-list { display: grid; gap: 7px; max-height: 52vh; padding: 16px 20px 0; overflow: auto; overscroll-behavior: contain; }
.player-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.social-back { margin: 16px 20px 20px; min-height: 40px; }
.confirm-card { max-width: 460px; }
.confirm-body { padding: 20px; }
.confirm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.confirm-head h2 { margin-top: 7px; color: var(--gold-100); }
.confirm-message { margin-top: 14px; max-width: 58ch; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.confirm-actions > button { width: 100%; min-height: 46px; }
.pop-rail { height: 10px; width: 100%; }
.pop-body { padding: 16px; }
.pop-head { display: flex; align-items: flex-start; gap: 16px; }
.pop-icon {
  width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.pop-headtext { flex: 1; min-width: 0; }
.pop-title { margin-top: 8px; font-size: 18px; line-height: 1.2; color: var(--gold-100); }
.pop-desc { margin-top: 8px; color: var(--text-secondary); }
.pop-close { height: 34px; padding: 0 12px; }
.pop-rows { margin-top: 16px; display: grid; gap: 8px; }
.pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.pop-row .v { text-align: right; }
.pop-effect-head { margin-top: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pop-effect {
  padding: 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-default);
  border-radius: 2px;
}
.pop-grid2 { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pop-foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#popup-card {
  max-width: min(520px, calc(100vw - 32px));
  max-height: min(90dvh, 860px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#popup-card .dd-icon { width: 60px; height: 60px; }
#popup-card .dd-head { gap: 14px; }
#popup-card .dd-title { margin-top: 6px; font-size: 17px; }
#popup-card .dd-stats { margin-top: 14px; }
.pop-buy-row { margin-top: 16px; }
.pop-buy { width: 100%; height: 56px; }
.cta-text-sm { font-size: 22px; }

/* ============================================================
   trade tab (player list)
   ============================================================ */
.trade-player-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.tp-av {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-subtle);
}
.tp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-sub { margin-top: 5px; }
.trade-player-row .btn-dark { height: 32px; padding: 0 12px; flex-shrink: 0; }
.trade-player-row .btn-dark:disabled { opacity: 0.5; }

/* ============================================================
   trade modal
   ============================================================ */
.trade-card { max-width: 660px; padding: 0; }
.trade-body { padding: 16px; }
.trade-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade-copy { margin-top: 8px; }
.trade-cols { margin-top: 16px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.trade-side {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.trade-side-head { display: flex; align-items: center; gap: 10px; }
.trade-side-head > div { display: flex; flex-direction: column; min-width: 0; }
.trade-cash-label { margin-top: 5px; }
.trade-deed-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 168px; overflow-y: auto;
  padding-right: 2px;
}
.trade-empty { padding: 10px 2px; color: var(--text-muted); }
.trade-deed {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  text-align: left;
  transition: border-color 100ms steps(2, end), background 100ms steps(2, end);
}
.trade-deed:hover { background: var(--surface-hover); }
.trade-deed.is-selected { border: 2px solid var(--line-active); background: var(--surface-selected); box-shadow: var(--shadow-active); }
.trade-deed.is-mortgaged { opacity: 0.45; cursor: not-allowed; }
.trade-deed.is-mortgaged .trade-deed-name::after { content: " · MTG"; color: var(--red-bright); font-size: 9px; }
.trade-deed-rail { width: 8px; height: 22px; flex-shrink: 0; border-radius: 1px; }
.trade-deed-name { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-deed-price { flex-shrink: 0; font-family: var(--font-numeric); font-size: 12px; font-weight: 700; color: var(--gold-300); }
.trade-deed-check { flex-shrink: 0; width: 14px; height: 14px; border: 1px solid var(--line-default); border-radius: 1px; }
.trade-deed.is-selected .trade-deed-check { background: var(--gold-400); border-color: var(--gold-400); }
.trade-cash-field { display: flex; flex-direction: column; gap: 6px; }
.trade-cash-field .field { width: 100%; }
.trade-summary {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-default);
  border-radius: 2px;
}
.trade-arrow { color: var(--gold-500); font-size: 16px; }
.trade-actions { margin-top: 16px; display: flex; gap: 12px; }
.trade-send { flex: 1; height: 52px; }
.trade-cancel { height: 52px; padding: 0 20px; }

/* ============================================================
   forced BUY / AUCTION choice
   ============================================================ */
.popup-scrim-locked { cursor: not-allowed; }
.choice-card { max-width: 420px; overflow: hidden; }
.choice-body { padding: 16px; }
.choice-head { display: flex; align-items: flex-start; gap: 14px; }
.choice-icon {
  width: 60px; height: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); border-radius: 2px;
}
.choice-title { margin-top: 6px; font-size: 17px; line-height: 1.2; color: var(--gold-100); }
.choice-copy { margin-top: 14px; }
.choice-rows { margin-top: 12px; display: grid; gap: 8px; }
.choice-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-btn { height: 64px; flex-direction: column; gap: 4px; }
.choice-btn .t-label { font-size: 14px; }
.choice-btn .t-micro { color: var(--text-muted); }
.choice-buy .t-micro { color: rgb(240 217 172 / 60%); }
.choice-note { margin-top: 12px; text-align: center; }

/* ============================================================
   live AUCTION
   ============================================================ */
.auction-card { max-width: 460px; overflow: hidden; }
.auction-rail { height: 10px; width: 100%; }
.auction-body { padding: 16px; }
.auction-head { display: flex; align-items: center; gap: 14px; }
.auction-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); border-radius: 2px;
}
.auction-title { margin-top: 6px; font-size: 17px; line-height: 1.2; color: var(--gold-100); }
.auction-close { min-height: 40px; height: 40px; padding: 0 10px; flex-shrink: 0; }

.auction-bid-box {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-default);
  border-radius: 2px;
}
.auction-bid-val { font-family: var(--font-numeric); font-size: 32px; font-weight: 700; color: var(--green-status); line-height: 1; font-variant-numeric: tabular-nums; }
.auction-leader { text-align: right; }
.auction-leader-name { margin-top: 6px; font-size: 13px; }

.auction-timer-wrap { margin-top: 14px; }
.auction-timer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auction-bar-track {
  height: 14px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  overflow: hidden;
}
.auction-bar-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: repeating-linear-gradient(45deg, #c88f2e 0, #c88f2e 6px, #9b783d 6px, #9b783d 12px);
  transition: transform 60ms linear;
}
.auction-bar-fill.is-low { background: repeating-linear-gradient(45deg, #d74438 0, #d74438 6px, #87231e 6px, #87231e 12px); }

.auction-bids { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.auction-bid-btn { height: 56px; flex-direction: column; gap: 2px; }
.auction-bid-btn .t-label { font-size: 18px; color: var(--gold-050); }
.auction-bid-btn .t-micro { color: rgb(240 217 172 / 55%); }
.auction-foot { margin-top: 14px; text-align: center; }

/* ============================================================
   responsive
   ============================================================ */
@media (min-width: 640px) {
  .tk-right { display: flex; }
  .trade-cols { grid-template-columns: 1fr 1fr; }
  .hdr > .hdr-right .online { display: flex; }
}

@media (min-width: 768px) {
  .title-grid { padding: 32px; }
  .you-chip { display: flex; }
  .tn-div { display: block; }
  .cf-orn { display: inline; }
}

@media (min-width: 1024px) {
  .tn-turn { display: flex; }
  .deck { display: flex; }
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-primary-actions { grid-column: span 2; }
  .hud-roll { grid-column: span 2; }
  .room-row { grid-template-columns: 1fr auto; }
}

@media (min-width: 900px) {
  .piece { width: 30px; height: 30px; }
}

@media (min-width: 1280px) {
  .hdr-meta { display: flex; }
  .tn-lobby { display: flex; }
  .title-grid { grid-template-columns: 1.15fr 0.85fr; gap: 32px; }

  .home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 2240px;
  }
  .title-screen {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .title-grid {
    width: 100%;
    min-height: 100%;
  }
  .ts-join { min-height: 60px; }
  #quick-table-btn { min-height: 44px; }

  #view-game { height: 100vh; overflow: hidden; }
  .game-main {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr) 304px;
    align-items: stretch;
    height: calc(100vh - 68px);
    overflow: hidden;
  }
  .rail-left { min-height: 0; overflow: hidden; }
  .rail-center { min-height: 0; overflow: hidden; }
  .board-area { min-height: 0; overflow: hidden; container-type: size; }
  /* Size the board from the center stage's actual width and height. */
  .board-holder {
    width: min(100%, 100vh, 1600px);
    width: min(100cqw, 100cqh, 1600px);
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
  }
  .board-holder.is-metro { min-width: 0; min-height: 0; }
  .right-rail { min-height: 0; }
  /* let the players panel size to content and the chat panel take the rest and scroll */
  .rail-left > .panel:first-child { flex: 0 0 auto; }
  .chat-panel { min-height: 0; }
}

@media (max-width: 1399px) and (min-width: 768px) {
  .board-area:has(.board-holder.is-metro) { overflow: auto; align-items: flex-start; padding: 8px; }
}

@media (min-width: 1536px) {
  .hud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .hud-roll { grid-column: span 1; }
}

@media (min-width: 1800px) {
  .game-main {
    width: calc(100% - 20px);
    margin-inline: 10px;
    grid-template-columns: 282px minmax(0, 1fr) 334px;
    gap: 14px;
  }
  .board-holder { max-width: min(1600px, 100%); }
  .rail-left, .right-rail { height: calc(100% - 4px); }
}

@media (min-width: 2200px) {
  .game-main {
    --game-rail-width: clamp(320px, 11vw, 420px);
    width: min(calc(100% - 28px), calc(min(1600px, calc(100dvh - 160px)) + var(--game-rail-width) + var(--game-rail-width) + 72px));
    margin-inline: auto;
    grid-template-columns: var(--game-rail-width) minmax(0, 1fr) var(--game-rail-width);
    gap: 18px;
  }
  .board-holder { max-width: min(1600px, 100%); }
  .hud {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 0.8fr)
      minmax(0, 1fr)
      minmax(0, 1fr);
  }
  .hud-roll {
    width: 100%;
    justify-self: stretch;
    margin-left: 0;
  }
  .lobby-start-btn {
    width: 100%;
    align-self: stretch;
  }
}

@media (min-width: 1400px) {
  #view-game .rail-center { min-width: 0; gap: 10px; }
  #view-game .hud {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.1fr) minmax(108px, .85fr) minmax(0, .92fr) minmax(0, 1.16fr);
    gap: 8px;
  }
  #view-game .hud-primary-actions { grid-column: span 1; }
  #view-game .hud-cell,
  #view-game .hud-roll {
    min-width: 0;
    min-height: 96px;
    height: 96px;
    padding: 9px;
  }
  #view-game .hud-roll { grid-column: span 1; }
  #view-game .hud-cell:first-child {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #view-game .hud-cell:first-child:has(.hud-jail-action:not(.is-hidden)),
  #view-game .hud-cell:first-child:has(.hud-loan-status:not(.is-hidden)) {
    height: auto;
    min-height: 116px;
  }
  #view-game .hud-name { font-size: clamp(18px, 1.25vw, 24px); }
  #view-game .hud-roll .cta-text { font-size: clamp(16px, 1.25vw, 23px); }
  #view-game .t-money { font-size: clamp(19px, 1.4vw, 26px); }
  #view-game .pool-val { font-size: clamp(18px, 1.2vw, 24px); }
}

/* The panel menu collapses the corresponding grid tracks as well as hiding
   their contents, so board space is reclaimed instead of becoming a blank
   gutter. */
@media (min-width: 1280px) {
  #view-game.is-left-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 304px; }
  #view-game.is-right-rail-hidden .game-main { grid-template-columns: 272px minmax(0, 1fr) 0; }
  #view-game.is-left-rail-hidden.is-right-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
}
@media (min-width: 1800px) {
  #view-game.is-left-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 334px; }
  #view-game.is-right-rail-hidden .game-main { grid-template-columns: 282px minmax(0, 1fr) 0; }
  #view-game.is-left-rail-hidden.is-right-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
}
@media (min-width: 2200px) {
  #view-game.is-left-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) var(--game-rail-width); }
  #view-game.is-right-rail-hidden .game-main { grid-template-columns: var(--game-rail-width) minmax(0, 1fr) 0; }
  #view-game.is-left-rail-hidden.is-right-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
}

/* ============================================================
   PROFILE EDITOR VIEW
   ============================================================ */
.profile-back { cursor: pointer; }
.profile-back-arrow {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--gold-400);
  transition: transform 100ms steps(2, end);
}
@media (hover: hover) and (pointer: fine) {
  .profile-back:hover .profile-back-arrow { transform: translateX(-3px); }
  .profile-swatch:hover { transform: translateY(-1px); }
}
@media (min-width: 768px) {
  /* The arrow is a non-game back affordance. Reclaim its flex slot so the
     shared navigation starts at the same x-position as the Home header. */
  .profile-back,
  #view-rules .hdr-brand,
  #view-rankings .hdr-brand,
  #view-social .hdr-brand { margin-right: -40px; }
}
.profile-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 14px 32px; }
.profile-library-panel { margin-bottom: 16px; }
.account-panel { margin-bottom: 16px; }
.account-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-badge { padding: 4px 8px; border: 1px solid var(--line-subtle); color: var(--gold-300); }
.account-copy { margin-top: 10px; max-width: 760px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.account-action-btn { min-height: 42px; padding: 0 16px; }
.account-identity-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.account-avatar { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-inset); border: 1px solid var(--line-active); }
.account-identity-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.account-identity-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-identity-actions .btn-dark { min-height: 34px; padding: 0 10px; }
.account-signout { height: 34px; padding: 0 12px; }
.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.account-stats > div { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.account-card { max-width: 480px; width: 100%; overflow: hidden; }
.account-modal-body { padding: 16px; }
.account-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-modal-head h2 { margin-top: 7px; }
.account-modal-body > .t-body { margin-top: 12px; }
.account-modal-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-bottom: 1px solid var(--line-subtle); }
.account-field { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.account-username-status { min-height: 14px; color: var(--text-muted); }
.account-username-status.is-checking { color: var(--gold-300); }
.account-username-status.is-available { color: var(--green-status); }
.account-username-status.is-taken,
.account-username-status.is-invalid { color: var(--red-bright); }
.account-field .field[aria-invalid="true"] { border-color: var(--red-bright); }
.account-field .field[aria-invalid="false"] { border-color: var(--green-status); }
.account-form-error { min-height: 18px; margin-top: 10px; color: var(--red-bright); font-family: var(--font-body); font-size: 12px; line-height: 1.4; }
.account-form-error:not(:empty) { padding: 7px 9px; background: var(--surface-error); border: 1px solid var(--line-error); }
.account-submit { width: 100%; height: 50px; margin-top: 2px; }
.account-modal-foot { margin-top: 12px; text-align: center; }
.account-privacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-rights { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.account-rights-pending { border-top-color: var(--line-error); }
.account-rights-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-rights h3 { margin: 0 0 6px; }
.account-rights-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-rights-actions button { min-height: 40px; padding: 0 10px; }
.account-operator {
  margin-top: 14px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--gold-500);
  background: var(--surface-panel-deep);
}
.account-operator-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-operator h3 { margin: 0 0 6px; }
.account-operator-badge {
  padding: 3px 8px;
  border: 1px solid var(--line-subtle);
  color: var(--gold-300);
  letter-spacing: 0.04em;
}
.account-operator-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-operator-open {
  min-height: 44px;
  padding: 0 14px;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.account-operator-open:active:not(:disabled) { transform: translateY(1px) scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .account-operator-open { transition: none; }
  .account-operator-open:active:not(:disabled) { transform: none; }
}
.account-rights-dialog { max-height: min(620px, 90vh); overflow: auto; }
.account-rights-dialog form { margin-top: 14px; }
.account-rights-dialog form > button { width: 100%; min-height: 46px; margin-top: 8px; }
@media (max-width: 560px) { .account-privacy-grid { grid-template-columns: 1fr; } }
.profile-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

.profile-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.profile-field:first-of-type { margin-top: 16px; }
.profile-label { display: block; }

.profile-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-swatch {
  width: 34px; height: 34px;
  border: 2px solid var(--line-subtle);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 100ms steps(2, end), transform 80ms steps(2, end);
}
.profile-swatch.is-active { border-color: var(--gold-050); box-shadow: 0 0 0 1px var(--gold-400); }

.profile-custom-color { display: flex; align-items: center; gap: 10px; }
.color-input {
  width: 44px; height: 30px;
  padding: 2px;
  background: var(--surface-input);
  border: 1px solid var(--line-default);
  border-radius: 2px;
  cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: none; border-radius: 1px; }

.profile-preview-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}
.profile-preview-av {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inset); border: 1px solid var(--line-active);
}

.face-hint { margin-left: auto; }
.face-editor-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 8px; }
.face-canvas-wrap {
  padding: 8px;
  background: var(--surface-board-frame);
  border: 2px solid var(--line-board);
  border-radius: 3px;
  flex-shrink: 0;
}
.face-canvas {
  display: grid;
  grid-template-columns: repeat(8, minmax(20px, 28px));
  grid-template-rows: repeat(8, minmax(20px, 28px));
  gap: 1px;
  background: var(--line-dark);
  user-select: none;
  touch-action: none;
}
.face-cell {
  appearance: none;
  border: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--surface-inset);
  background-image:
    linear-gradient(45deg, var(--surface-avatar) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-avatar) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-avatar) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-avatar) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  cursor: pointer;
}
.face-cell:hover { outline: 1px solid var(--gold-400); outline-offset: -1px; }
.face-cell:focus-visible { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: -2px; }

.face-tools { display: flex; flex-direction: column; gap: 10px; min-width: 200px; flex: 1; }
.face-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.face-swatch {
  width: 26px; height: 26px;
  border: 2px solid var(--line-subtle);
  border-radius: 2px;
  cursor: pointer;
}
.face-swatch.is-active { border-color: var(--gold-050); box-shadow: 0 0 0 1px var(--gold-400); }
.face-custom-color { display: flex; align-items: center; gap: 10px; }
.face-tool-btn { height: 34px; padding: 0 12px; justify-content: flex-start; }
.face-tool-btn.is-active { border-color: var(--line-active); color: var(--gold-050); }
.face-footnote { margin-top: 14px; }

@media (min-width: 900px) {
  .profile-grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* Phone game layout: single column with turn controls first. The board,
   rails, and chat stack below in DOM order instead of burying the roll
   button and timer off-screen during timed auctions. */
@media (hover: none) and (pointer: coarse) {
  /* 44px touch floors for fast-tap game controls. Scoped to touch so the
     desktop pixel aesthetic keeps its authored sizes. */
  .hud-jail-action { min-height: 44px; }
  .theme-open-btn { min-height: 44px; }
  .rules-page-turn { min-height: 44px; }
  /* Crosshair cursors fight affordance on touch/trackpads: default there.
     Desktop keeps the authored reticle theme. */
  body, button:not(:disabled), a, [role="button"] { cursor: default; }
}
@media (max-width: 767px) {
  #view-game { height: auto; min-height: 100vh; overflow: visible; }
  #view-game .game-main { display: flex; flex-direction: column; height: auto; overflow: visible; }
  #view-game .rail-center { display: contents; }
  #view-game .hud { order: -1; }
  #view-game .board-area { min-height: 0; }
  #view-game .rail-left, #view-game .right-rail { height: auto; }
}

@media (max-width: 767px) {
  /* The global destinations remain reachable on phones as a compact second
     header row instead of disappearing with the desktop nav. Horizontal
     scrolling keeps every tab at a readable touch target. */
  .hdr { min-height: 76px; height: auto; flex-wrap: wrap; gap: 7px; padding-block: 8px; }
  .hdr .home-nav { display: flex; order: 3; flex: 1 0 100%; width: 100%; max-width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%); }
  .hdr .home-nav::-webkit-scrollbar { display: none; }
  .hdr .home-nav-tab { flex: 0 0 auto; min-width: max-content; padding-inline: 10px; }

  #view-home {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  #view-home .home-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 12px;
  }
  #view-home .title-screen { flex: 0 0 auto; min-height: 0; }

  @media (hover: none) and (pointer: coarse) {
    .hdr .home-nav { scrollbar-width: thin; scrollbar-color: var(--line-default) var(--surface-panel-deep); }
    .hdr .home-nav::-webkit-scrollbar { display: block; height: 4px; }
    .hdr .home-nav::-webkit-scrollbar-track { background: var(--surface-panel-deep); }
    .hdr .home-nav::-webkit-scrollbar-thumb { background: var(--line-default); }
  }

}

/* Portrait/mobile Home keeps the patrol readouts in a reserved band above
   the title. The scenic layers remain absolute so the authored pixel scene
   and fly-by paths do not change, only the readout flow does. */
@media (max-width: 767px) {
  .field,
  .setting-select { font-size: 16px; }
}

@media (max-width: 640px) {
  #view-home .home-sky-atmosphere {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "time score" "hint hint";
    align-items: center;
    gap: 6px 16px;
    min-height: 110px;
    padding: 12px 16px 8px;
    overflow: visible;
  }
  #view-home .home-local-time { position: static; grid-area: time; }
  #view-home .home-patrol-score { position: static; grid-area: score; justify-self: end; }
  #view-home .home-patrol-hint { position: static; grid-area: hint; justify-self: end; text-align: right; }
}

@media (orientation: portrait) and (max-width: 1100px) {
  .field,
  .setting-select { font-size: 16px; }
  #view-home .home-sky-atmosphere {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "time score" "hint hint";
    align-items: center;
    gap: 6px 16px;
    min-height: 110px;
    padding: 12px 16px 8px;
    overflow: visible;
  }
  #view-home .home-local-time { position: static; grid-area: time; }
  #view-home .home-patrol-score { position: static; grid-area: score; justify-self: end; }
  #view-home .home-patrol-hint { position: static; grid-area: hint; justify-self: end; text-align: right; }
}

/* ============================================================
   HOME + PROFILE DESKTOP PASS
   ============================================================ */
.home-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 18px;
  padding: 3px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
}
.home-nav-tab {
  min-height: 34px;
  padding: 0 14px;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color 100ms steps(2, end), background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.home-nav-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.home-nav-tab.is-active {
  color: var(--gold-050);
  background: var(--surface-panel-raised);
  border-color: var(--line-active);
}

.home-signal-line {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  border: 1px solid var(--line-subtle);
  background: rgb(3 12 16 / 70%);
}
.home-signal {
  appearance: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  min-width: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border-right: 1px solid var(--line-subtle);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  cursor: pointer;
  transition: color 100ms steps(2, end), background 100ms steps(2, end), box-shadow 100ms steps(2, end);
}
.home-signal:last-child { border-right: 0; }
.home-signal .t-label { font-variant-numeric: tabular-nums; }
.home-signal:hover { color: var(--gold-100); background: rgb(9 25 26 / 85%); }
.home-signal:focus-visible { z-index: 1; outline: 2px solid var(--theme-focus, var(--gold-300)); outline-offset: -2px; box-shadow: inset 0 0 0 1px var(--surface-panel-deep); }
.home-signal[data-connection="offline"] .t-label { color: var(--red-bright); }
.home-signal[data-connection="reconnecting"] .t-label,
.home-signal[data-connection="connecting"] .t-label { color: var(--gold-300); }

.profile-hero {
  padding: clamp(16px, 2vw, 28px);
  background: var(--surface-panel);
  border-color: var(--line-board);
}
.profile-hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile-hero-avatar {
  width: 88px; height: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-panel-deep);
  border: 2px solid var(--line-active);
  box-shadow: var(--shadow-active);
}
.profile-hero-copy { min-width: 0; flex: 1; }
.profile-hero-name {
  margin-top: 7px;
  color: var(--gold-050);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--gold-500);
}
.profile-hero-handle { margin-top: 8px; font-variant-numeric: tabular-nums; }
.profile-hero-state { margin-top: 8px; color: var(--gold-400); }
.profile-hero-state.is-account { color: var(--green-status); }
.profile-hero-account { min-height: 40px; padding: 0 14px; flex-shrink: 0; }
.profile-stat-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) minmax(150px, 1.2fr);
  gap: 8px;
  margin-top: 20px;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 66px;
  padding: 10px 12px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
}
.profile-stat strong { font-variant-numeric: tabular-nums; }
.profile-stat-joined strong { white-space: nowrap; }
.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 16px;
  padding: 3px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-subtle);
}
.profile-tab {
  min-height: 42px;
  padding: 0 16px;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color 100ms steps(2, end), background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.profile-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.profile-tab.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.profile-tab-count { display: inline-block; margin-left: 6px; color: var(--gold-400); font-family: var(--font-numeric); font-size: 9px; }
.profile-tab-panel { margin-top: 16px; animation: profile-panel-in 160ms ease-out both; }
@keyframes profile-panel-in { from { opacity: 0.55; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.profile-overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; }
.profile-overview-card { min-height: 238px; }
.profile-overview-person { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.profile-overview-avatar { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-active); }
.profile-overview-copy { max-width: 64ch; margin-top: 16px; }
.profile-overview-edit { min-height: 44px; margin-top: 18px; padding: 0 16px; }
.profile-overview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.profile-overview-facts > div { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-empty-panel { min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.profile-empty-panel .t-body { max-width: 62ch; color: var(--gold-100); }
.profile-empty-panel .t-micro { max-width: 72ch; }
.profile-preferences { margin-top: 16px; }
.profile-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-subtle); }
.profile-preference-row:first-of-type { margin-top: 4px; }
.profile-preference-row > div { display: flex; flex-direction: column; gap: 5px; }
#view-profile { height: 100dvh; min-height: 0; overflow: hidden; }
#view-profile .profile-main { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.profile-preferences-local { white-space: nowrap; }
.theme-preference-board { display: grid; gap: 12px; margin-top: 16px; padding: 14px; background: var(--surface-panel-deep); border: 1px solid var(--line-default); }
.theme-preference-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.theme-preference-head > div { display: grid; gap: 6px; min-width: 0; }
.theme-preference-head h3 { color: var(--gold-100); }
.theme-preference-description { color: var(--text-secondary); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; max-height: none; overflow: visible; padding: 2px; }
.theme-choice { position: relative; grid-template-columns: 68px minmax(0, 1fr); min-height: 76px; cursor: pointer; }
.theme-choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.theme-choice:focus-within { color: var(--gold-050); border-color: var(--line-active); outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 1px; }
.theme-choice:has(input:checked) { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); box-shadow: var(--shadow-active); }
.theme-choice-track { color: var(--gold-400); }
.theme-choice-copy { pointer-events: none; }
.theme-music-panel { min-width: 0; padding: 12px; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.theme-music-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-music-head > div { display: grid; gap: 5px; }
.theme-music-head h3 { color: var(--gold-050); }
.theme-music-mode { padding: 4px 6px; color: var(--gold-100); border: 1px solid var(--line-active); white-space: nowrap; }
.theme-music-copy { margin-top: 8px; }
.theme-track-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 7px; margin-top: 10px; }
.theme-track-choice { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; min-height: 48px; padding: 7px 9px; color: var(--text-muted); background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); cursor: pointer; }
.theme-track-choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.theme-track-choice:focus-within { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 1px; }
.theme-track-choice:has(input:checked), .theme-track-choice[data-selected="true"] { color: var(--gold-050); border-color: var(--line-active); }
.theme-track-mark { color: var(--gold-300); font-size: 12px; }
.theme-track-copy { display: grid; gap: 4px; min-width: 0; pointer-events: none; }
.theme-track-state { color: var(--gold-400); pointer-events: none; }
.theme-track-empty { padding: 10px 0; }
.theme-preference-status { min-height: 1em; margin-top: 8px; color: var(--text-secondary); }
@media (max-width: 900px) { .theme-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #view-profile .profile-main { padding-inline: 12px; }
  .theme-preference-board { padding: 10px; }
  .theme-preference-head { flex-direction: column; }
  .theme-choice-grid { grid-template-columns: 1fr; }
  .theme-choice { min-height: 64px; }
  .theme-track-list { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .theme-choice:has(input:checked), .theme-track-choice:has(input:checked) { outline: 2px solid Highlight; }
}

/* ============================================================
   PROFILE — ACHIEVEMENT DECK
   ============================================================ */
.achievements-panel { border-color: var(--line-board); display: flex; flex-direction: column; max-height: min(720px, max(280px, calc(100vh - 410px))); overflow: hidden; }
.achievements-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.achievements-intro h2 { margin-top: 7px; color: var(--gold-050); }
.achievements-intro .t-body { max-width: 66ch; margin-top: 10px; }
.achievements-progress { min-width: 86px; padding: 9px 10px; text-align: right; background: var(--surface-panel-deep); border: 1px solid var(--line-active); }
.achievements-progress strong { display: block; color: var(--gold-050); font-variant-numeric: tabular-nums; }
.achievements-progress span { display: block; margin-top: 4px; }
.achievements-filter-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; padding: 4px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.achievement-filter { min-height: 34px; padding: 0 10px; color: var(--text-muted); border: 1px solid transparent; }
.achievement-filter:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.achievement-filter.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.achievement-filter-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.achievement-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.achievement-filter-select { width: 100%; min-height: 34px; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; margin-top: 12px; flex: 1; min-height: 0; padding: 2px 6px 6px 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.achievement-card { min-width: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); transition: border-color 160ms ease-out, background 160ms ease-out; }
.achievement-card:hover { border-color: var(--line-default); background: var(--surface-panel-raised); }
.achievement-card.is-unlocked { border-color: rgb(53 166 83 / 62%); }
.achievement-card.is-secret { border-color: rgb(207 167 95 / 38%); }
.achievement-card:focus-within { border-color: var(--line-active); box-shadow: 0 0 0 1px rgb(207 167 95 / 22%); }
.achievement-icon-wrap { width: 58px; height: 58px; display: grid; place-items: center; background: var(--surface-card); border: 1px solid var(--line-dark); }
.achievement-icon { width: 44px; height: 44px; image-rendering: pixelated; shape-rendering: crispEdges; }
.achievement-card:not(.is-unlocked) .achievement-icon { filter: grayscale(1); opacity: 0.42; }
.achievement-card.is-secret:not(.is-unlocked) .achievement-icon { opacity: 0.25; }
.achievement-card.rarity-mythical:not(.is-unlocked) .achievement-icon { filter: saturate(1.35) drop-shadow(2px 0 0 rgb(24 214 208 / 45%)) drop-shadow(-2px 0 0 rgb(231 76 207 / 40%)); opacity: 0.62; }
.achievement-card.rarity-mythical .achievement-icon-wrap { border-color: rgb(24 214 208 / 42%); box-shadow: inset 2px 0 0 rgb(231 76 207 / 25%); }
.achievement-card-main { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.achievement-card-top { display: flex; align-items: center; gap: 8px; }
.achievement-category { color: var(--gold-400); letter-spacing: 0.08em; }
.achievement-rarity { color: var(--text-muted); }
.rarity-common { color: #4b9bd1; }
.rarity-uncommon { color: var(--green-status); }
.rarity-rare { color: var(--gold-300); }
.rarity-epic { color: #b77ae2; }
.rarity-legendary { color: var(--red-bright); }
.achievement-title { overflow: hidden; color: var(--gold-050); text-overflow: ellipsis; white-space: nowrap; }
.achievement-short { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achievements-empty { grid-column: 1 / -1; padding: 28px; text-align: center; }
.achievement-card { appearance: none; width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 84px; padding: 10px; text-align: left; cursor: pointer; }
.achievement-card:focus-visible { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 2px; }
.achievement-card { scroll-margin-block: 10px; }
.achievement-detail-modal { max-width: 500px; overflow: hidden; border-color: var(--line-board); box-shadow: 0 18px 60px rgb(0 0 0 / 58%); }
.achievement-modal-rail { height: 7px; background: var(--achievement-accent, var(--gold-500)); }
.achievement-detail-body { padding: 22px; }
.achievement-detail-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.achievement-detail-icon { width: 72px; height: 72px; display: grid; place-items: center; background: var(--surface-card); border: 1px solid var(--line-active); }
.achievement-detail-icon .achievement-icon { width: 56px; height: 56px; }
.achievement-detail-icon.is-locked .achievement-icon { filter: grayscale(1); opacity: 0.42; }
.achievement-detail-icon.rarity-mythical.is-locked .achievement-icon { filter: saturate(1.35) drop-shadow(2px 0 0 rgb(24 214 208 / 45%)) drop-shadow(-2px 0 0 rgb(231 76 207 / 40%)); opacity: 0.62; }
.achievement-detail-kicker { display: flex; align-items: center; gap: 8px; }
.achievement-detail-title { margin-top: 6px; color: var(--gold-050); }
.achievement-detail-state { align-self: start; padding: 4px 6px; color: var(--gold-300); border: 1px solid var(--line-subtle); white-space: nowrap; }
.achievement-detail-copy { margin-top: 18px; padding: 13px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.achievement-detail-note { margin-top: 12px; color: var(--gold-muted); }
.achievement-detail-close { width: 100%; min-height: 46px; margin-top: 18px; }

/* ============================================================
   PROFILE — STATISTICS DECK
   ============================================================ */
.stats-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px; border-color: var(--line-board); }
.stats-intro h2 { margin-top: 7px; color: var(--gold-050); }
.stats-intro .t-body { max-width: 66ch; margin-top: 10px; }
.stats-source { flex-shrink: 0; padding: 5px 8px; border: 1px solid var(--line-subtle); white-space: nowrap; }
.profile-stats-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border-color: var(--line-board); }
.profile-stats-overview h2 { margin-top: 5px; color: var(--gold-050); }
.profile-stats-headline { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); gap: 8px; width: min(620px, 72%); }
.profile-stats-kpi { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-stats-kpi strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.profile-stats-categories { margin-top: 12px; border: 1px solid var(--line-subtle); background: var(--surface-panel); }
.profile-stat-tabs, .profile-history-detail-tabs { display: flex; gap: 4px; min-height: 42px; padding: 4px; overflow-x: auto; background: var(--surface-panel-deep); border-bottom: 1px solid var(--line-subtle); scrollbar-width: thin; }
.profile-stat-tab, .profile-history-detail-tabs button { flex: 0 0 auto; min-width: 100px; min-height: 36px; padding: 0 12px; color: var(--text-secondary); border: 1px solid transparent; background: transparent; font-family: var(--font-pixel); font-size: 10px; }
.profile-stat-tab:hover, .profile-stat-tab.is-active, .profile-history-detail-tabs button[aria-selected="true"] { color: var(--gold-050); border-color: var(--line-active); background: var(--surface-panel-raised); }
.profile-stat-tab-panel { max-height: min(38dvh, 360px); min-height: 82px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.profile-stat-tab-panel[hidden], .profile-history-details[hidden], .profile-history-details [role="tabpanel"][hidden] { display: none; }
.profile-recent-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; margin: 0; padding: 12px; list-style: none; }
.profile-result-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 7px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-result-row strong { text-align: right; }
.profile-results-empty { margin: 0; padding: 18px; }
.profile-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px; }
.profile-stat-record { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 38px; padding: 6px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-stat-record dd { margin: 0; text-align: right; }
.profile-personal-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; }
.profile-personal-record { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 8px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-personal-record strong { overflow-wrap: anywhere; }
.profile-history-list { display: grid; gap: 8px; margin-top: 16px; }
.profile-history-row { min-width: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.profile-history-row.is-win { border-color: rgb(53 166 83 / 55%); background: var(--surface-selected); box-shadow: var(--shadow-active); }
.profile-history-toggle, .profile-history-summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 9px 12px; text-align: left; color: var(--text-primary); border: 0; background: transparent; }
.profile-history-toggle:hover { background: var(--surface-panel-raised); }
.profile-history-index { color: var(--gold-500); }
.profile-history-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.profile-history-meta { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.profile-history-details { border-top: 1px solid var(--line-subtle); }
.profile-history-detail-tabs { min-height: 38px; }
.profile-history-detail-tabs button { min-width: 80px; min-height: 32px; font-size: 9px; }
.profile-detail-scroll { max-height: min(28dvh, 240px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.profile-history-details [role="tabpanel"] { padding: 10px; }
.profile-history-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.profile-history-detail-field { min-width: 0; padding: 7px; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.profile-history-detail-field dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.profile-history-player-list, .profile-history-event-list ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.profile-history-player-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; background: var(--surface-panel); border: 1px solid var(--line-subtle); }
.profile-history-event-list li, .profile-history-event-list p { margin: 0; padding: 7px 9px; color: var(--text-secondary); border-bottom: 1px solid var(--line-subtle); }
.profile-history-note { margin-top: 14px; line-height: 1.5; }
.pop-icon .board-icon-mark { width: 48px; }

/* ============================================================
   FINANCING UI MODEL
   ============================================================ */
.right-rail .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-rail-intro { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
.finance-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.finance-bank { margin-bottom: 14px; padding: 12px; border-color: var(--line-active); box-shadow: var(--shadow-active); }
.finance-bank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
summary.finance-bank-head { list-style: none; cursor: pointer; }
summary.finance-bank-head::-webkit-details-marker { display: none; }
.finance-bank-head h3 { margin-top: 6px; color: var(--gold-100); }
.finance-bank-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.finance-bank-metrics > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 7px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.finance-bank-metrics strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-bank-copy { margin-top: 11px; }
.finance-bank-actions { margin-top: 11px; }
.finance-bank-action { width: 100%; min-height: 42px; }
.finance-repay-controls, .contract-repay-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; }
.finance-repay-controls > label, .contract-repay-controls > label { grid-column: 1 / -1; }
.finance-repay-input, .contract-repay-input { min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.finance-repay-controls .finance-bank-action, .contract-repay-controls > button { min-width: 72px; }
.finance-bank-note { margin-top: 9px; color: var(--gold-muted); }
.finance-bank-unavailable { margin: 10px 0 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.bank-loan-card { width: min(520px, calc(100vw - 32px)); max-width: 520px; max-height: min(90dvh, 760px); display: flex; flex-direction: column; overflow: hidden; }
.bank-offer-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 0; }
.bank-offer-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.bank-offer-terms > div { min-width: 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.bank-offer-terms > .bank-offer-collateral { grid-column: 1 / -1; }
.bank-offer-terms dt { margin-bottom: 4px; }
.bank-offer-terms dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bank-offer-consequence { margin: 0; padding: 10px; border: 1px solid var(--line-active); background: var(--surface-panel-deep); line-height: 1.45; }
.bank-offer-status:empty { display: none; }
.bank-offer-status:not(:empty) { margin: 10px 0; padding: 8px; color: var(--red-bright); border: 1px solid var(--red-bright); }
.bank-offer-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line-dark); background: var(--surface-panel); }
.bank-offer-actions > button { min-width: 96px; min-height: 44px; }
@media (max-width: 480px) { .bank-offer-actions { flex-direction: column-reverse; } }
@media (forced-colors: active) {
  .finance-bank-unavailable, .bank-offer-terms > div, .bank-offer-consequence, .bank-offer-status:not(:empty) { border: 1px solid CanvasText; }
}
.player-contracts { display: grid; gap: 10px; margin-top: 14px; padding: 12px; background: var(--surface-panel); border: 1px solid var(--line-active); }
.player-contract-offer { display: grid; gap: 6px; padding: 10px; background: rgba(217,166,47,.08); border: 1px solid var(--line-active); animation: deal-row-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes deal-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.deal-collapsed { width: 100%; color: inherit; text-align: left; cursor: pointer; transition: background 160ms ease-out, border-color 160ms ease-out, transform 100ms ease-out; }
.deal-collapsed:hover, .deal-collapsed:focus-visible { background: var(--surface-panel-raised); border-color: var(--gold-300); }
.deal-collapsed:active { transform: scale(.985); }
.deal-detail-card { max-width: 680px; }
.deal-detail-body { padding: 20px; }
.deal-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.deal-detail-title-wrap { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.deal-detail-mark { width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; }
.deal-detail-head h2 { margin-top: 7px; color: var(--gold-100); }
.deal-detail-grid, .deal-detail-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.deal-detail-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.deal-detail-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-detail-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deal-term { min-width: 0; padding: 10px; color: var(--gold-100); background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); overflow-wrap: anywhere; }
.deal-detail-copy { margin-top: 16px; max-width: 66ch; }
.deal-detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.deal-detail-actions > button { width: 100%; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .deal-collapsed, .player-contract-offer { transition: none; animation: none; } .deal-collapsed:active { transform: none; } }
.player-contract-active { display: grid; gap: 6px; }
.player-contract-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.player-contract-row > div { display: grid; gap: 4px; min-width: 0; }
.player-contract-row strong, .player-contract-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-offer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.player-contract-details { display: grid; gap: 9px; }
.player-contract-details > summary { list-style: none; cursor: pointer; }
.player-contract-details > summary::-webkit-details-marker { display: none; }
.player-contract-form { display: grid; gap: 8px; padding-top: 4px; }
.player-contract-form .account-field { display: grid; gap: 4px; }
.player-contract-form [hidden] { display: none; }
.player-contract-form .financing-check { margin-top: 2px; }
.player-profile-recent { display: grid; gap: 6px; margin: 14px 20px 0; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.player-profile-actions-note { margin: 0; padding: 10px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); line-height: 1.5; }
.player-profile-match { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-dark); }
.player-profile-match span:last-child { text-align: right; }
.economy-empty { display: grid; gap: 9px; justify-items: start; padding: 14px; border-color: var(--line-subtle); }
.economy-empty img, .economy-surface-head img { image-rendering: pixelated; }
.economy-surface { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.economy-surface-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-subtle); }
.economy-surface-head h3 { margin-top: 4px; color: var(--gold-100); }
.casino-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.casino-odds span { display: grid; gap: 3px; padding: 8px 6px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); text-align: center; }
.casino-odds strong { color: var(--text-primary); font: 700 11px var(--font-display); }
.casino-odds small { color: var(--text-muted); font: 500 10px var(--font-numeric); }
.casino-form { display: grid; gap: 10px; }
.casino-form fieldset { border: 0; padding: 0; margin: 0; }
.casino-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.casino-choice { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); cursor: pointer; }
.casino-choice:has(input:checked) { border-color: var(--gold-300); box-shadow: inset 0 -2px 0 var(--gold-300); }
.casino-choice input { position: absolute; opacity: 0; pointer-events: none; }
.casino-choice-red:has(input:checked) { color: var(--red-bright); }
.casino-choice-black:has(input:checked) { color: var(--text-primary); }
.casino-choice-green:has(input:checked) { color: var(--green-status); }
.casino-stake, .market-quantity { display: grid; gap: 5px; }
.casino-stake .field, .market-quantity .field { width: 100%; }
.casino-desk-open { width: 100%; min-height: 38px; }
.casino-desk-card { width: min(560px, 100%); max-height: min(760px, calc(100vh - 32px)); overflow: hidden; }
.casino-modal-body { display: flex; flex-direction: column; min-height: 0; padding: 20px; }
.casino-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.casino-modal-head h2 { margin-top: 7px; color: var(--gold-100); }
.casino-modal-head p { max-width: 52ch; margin-top: 10px; }
.casino-modal-head > button { min-height: 34px; padding: 0 9px; flex-shrink: 0; }
.casino-modal-body .casino-odds { margin-top: 16px; }
.casino-modal-body .casino-form { margin-top: 16px; }
.casino-modal-body .economy-result { margin-top: 14px; }
@media (max-width: 640px) { .casino-modal-body { padding: 16px; } }
.casino-reel { display: grid; gap: 10px; margin-top: 16px; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-active); }
.casino-reel-viewport { position: relative; min-height: 96px; overflow: hidden; border: 1px solid var(--line-dark); background: var(--bg-chrome); }
.casino-reel-track { display: flex; align-items: center; gap: 6px; height: 96px; width: max-content; padding: 0 8px; }
@media (prefers-reduced-motion: no-preference) {
  .casino-reel[data-reel-state="presenting"] .casino-reel-track { will-change: transform; }
}
.casino-reel-card { display: grid; place-items: center; align-content: center; gap: 5px; width: 76px; height: 72px; flex: 0 0 76px; color: var(--text-primary); border: 1px solid var(--line-subtle); background: var(--surface-card); font-family: var(--font-numeric); image-rendering: pixelated; }
.casino-reel-card strong { font: 700 22px var(--font-display); line-height: 1; }
.casino-reel-card small { font: 700 8px var(--font-pixel); letter-spacing: .08em; }
.casino-reel-card-red { border-color: var(--red-dark); color: var(--red-bright); }
.casino-reel-card-black { border-color: #657178; color: var(--text-primary); }
.casino-reel-card-green { border-color: var(--green-status); color: var(--green-status); }
.casino-reel-card.is-target { border-color: var(--line-active); box-shadow: inset 0 0 0 1px var(--line-active); }
.casino-reel-pointer { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: var(--gold-300); box-shadow: 0 0 0 1px rgb(1 7 10 / 70%); pointer-events: none; }
.casino-reel-pointer::before, .casino-reel-pointer::after { content: ""; position: absolute; left: -5px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.casino-reel-pointer::before { top: 0; border-top: 8px solid var(--gold-300); }
.casino-reel-pointer::after { bottom: 0; border-bottom: 8px solid var(--gold-300); }
.casino-reel-pointer { width: 2px; transform: translateX(-1px); background: var(--gold-300); box-shadow: 0 0 0 1px rgb(1 7 10 / 70%); }
.casino-reel-pointer::before, .casino-reel-pointer::after { display: none; }
.casino-reel-pointer img { position: absolute; top: 0; left: -7px; display: block; width: 16px; height: 16px; image-rendering: pixelated; }
.casino-reel-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.casino-reel-status > .t-micro { grid-column: 1 / -1; }
.casino-reel-status [data-casino-reel-result] { margin: 0; font-family: var(--font-numeric); }
.casino-reel-skip { min-height: 34px; padding: 0 9px; }
.casino-reel.is-reduced-motion .casino-reel-viewport { min-height: 70px; }
.casino-reel.is-reduced-motion .casino-reel-track { height: 70px; }
.casino-reel.is-reduced-motion .casino-reel-card:not(.is-target) { opacity: .25; }
@media (max-width: 460px) {
  .casino-reel-card { width: 64px; flex-basis: 64px; }
  .casino-reel-status { grid-template-columns: 1fr; }
  .casino-reel-skip { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .casino-reel-track { transition: none; }
}
.economy-result { padding: 9px; color: var(--gold-100); background: rgba(217,166,47,.08); border-left: 2px solid var(--gold-300); font: 500 10px var(--font-numeric); letter-spacing: .06em; }
.economy-note { line-height: 1.5; }
.market-risk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.market-risk-strip > div { display: grid; gap: 3px; min-width: 0; padding: 7px 6px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.market-risk-strip strong { color: var(--gold-100); font-variant-numeric: tabular-nums; }
.market-risk-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-list { display: flex; flex-direction: column; gap: 5px; min-height: 0; max-height: 360px; overflow-y: auto; }
.market-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.market-row > div { display: grid; gap: 3px; min-width: 0; }
.market-row strong { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.market-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.market-advanced-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 4px; margin: -3px 0 4px; }
.market-advanced-actions button { min-height: 26px; padding: 0 5px; color: var(--gold-300); font-family: var(--font-pixel); font-size: 8px; }
.market-expansion-toolbar, .market-derivative-fields { display: grid; gap: 6px; margin-top: 8px; }
.market-expansion-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.market-derivative-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.market-expansion-toolbar label, .market-derivative-fields label { display: grid; gap: 4px; }
.market-expansion-toolbar button { min-height: 34px; padding: 0 9px; }
.market-actions .btn-dark { min-height: 30px; padding: 4px 6px; }
.market-desk-open { width: 100%; min-height: 38px; }
.market-desk-card { width: min(1120px, calc(100vw - 32px)); max-width: 1120px; max-height: min(820px, calc(100dvh - 32px)); overflow: hidden; }
.market-desk-body { display: flex; flex-direction: column; min-height: 0; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 16px; }
.market-desk-head { position: sticky; top: -16px; z-index: 2; display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 14px; margin: -16px -16px 0; padding: 12px 16px 10px; background: var(--surface-panel); border-bottom: 1px solid var(--line-subtle); }
.market-desk-head h2 { margin-top: 7px; color: var(--gold-100); }
.market-desk-head p { max-width: 56ch; margin-top: 7px; line-height: 1.4; }
.market-desk-head > button { min-width: 72px; min-height: 40px; padding: 0 10px; flex-shrink: 0; }
.market-desk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; padding: 6px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.market-desk-summary strong { margin-right: 3px; color: var(--gold-100); }
.market-round-chip, .market-fee-chip { padding-left: 8px; border-left: 1px solid var(--line-subtle); }
.market-index-strip { display: none; }
.market-index-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; margin-top: 9px; padding: 7px 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.market-index-select select { min-height: 44px; width: 100%; color: var(--text-primary); font: 11px var(--font-pixel); }
.market-history { display: grid; gap: 7px; min-width: 0; margin-top: 0; }
.market-history h3 { margin: 0; }
.market-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.market-history-range { display: none; grid-template-columns: auto minmax(145px, 190px); align-items: center; gap: 7px; }
.market-history-range select { width: 100%; min-height: 44px; }
.market-history-range-note { display: none; }
.market-quote-chart { display: block; width: 100%; height: 250px; min-height: 190px; overflow: hidden; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.market-history-empty { margin: 0; padding: 12px; color: var(--text-muted); border: 1px dashed var(--line-subtle); }
.market-advanced-settings { min-width: 0; margin-top: 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel); }
.market-advanced-settings > summary, .market-advanced-disclosure > summary { min-height: 36px; align-content: center; color: var(--gold-300); cursor: pointer; font: 9px var(--font-pixel); }
.market-advanced-disclosure { min-width: 0; }
.market-advanced-disclosure .market-desk-actions { margin-top: 5px; }
.market-advanced-settings summary:focus-visible, .market-advanced-disclosure summary:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.market-derivatives-unavailable { grid-column: 1 / -1; padding: 7px; color: var(--text-muted); border: 1px solid var(--line-subtle); font: 10px/1.4 var(--font-pixel); }
.market-desk-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.market-desk-tools label, .market-desk-option-fields label { display: grid; gap: 5px; }
.market-desk-tools button { min-height: 44px; padding: 0 12px; }
.market-desk-option-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.market-desk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 5px; }
.market-desk-actions button { min-height: 34px; padding: 0 7px; }
@media (max-width: 700px) {
  .market-desk-body { padding: 14px; }
  .market-desk-head { top: -14px; margin: -14px -14px 0; padding: 10px 14px 9px; }
}
@media (max-width: 760px) {
  .right-rail .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  .right-rail .tab { min-width: 0; }
  .market-risk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.market-desk-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: stretch; gap: 10px; min-width: 0; margin-top: 10px; }
.market-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.market-ticket-head h3 { margin: 0; }
.market-index-strip { align-items: stretch; gap: 6px; min-width: 0; margin-top: 9px; padding: 1px 2px 7px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
.market-index-pill { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; flex: 0 0 142px; align-content: center; gap: 4px 6px; min-width: 0; min-height: 54px; padding: 7px; text-align: left; color: var(--text-secondary); background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); scroll-snap-align: start; }
.market-index-pill:hover { border-color: var(--line-active); }
.market-index-pill.is-selected { color: var(--text-primary); background: var(--surface-panel-raised); border: 2px solid var(--gold-400); box-shadow: inset 0 -2px 0 var(--gold-300); }
.market-index-pill:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.market-index-pill-name { min-width: 0; color: var(--gold-100); font: 8px/1.2 var(--font-pixel); overflow-wrap: anywhere; }
.market-index-pill-price { color: var(--text-primary); font: 10px var(--font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-index-pill-movement { grid-column: 1 / -1; min-width: 0; color: var(--text-muted); font: 8px/1.2 var(--font-numeric); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-desk-center { display: grid; gap: 10px; min-width: 0; }
.market-selected-quote { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line-active); background: var(--surface-panel-deep); }
.market-selected-quote h3 { margin: 5px 0 4px; color: var(--gold-100); }
.market-current-price { display: grid; justify-items: end; gap: 4px; min-width: 150px; text-align: right; }
.market-current-price-value { color: var(--gold-050); font: 26px/1 var(--font-numeric); font-variant-numeric: tabular-nums; }
[data-market-movement] { color: var(--text-secondary); text-align: right; }
.market-position-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.market-position-strip > div { display: grid; gap: 5px; min-width: 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel); }
.market-position-strip strong { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font: 10px/1.3 var(--font-numeric); font-variant-numeric: tabular-nums; }
.market-personal-ledger-disclosure { min-width: 0; margin-top: 8px; border-top: 1px solid var(--line-subtle); }
.market-personal-ledger-disclosure > summary { min-height: 38px; align-content: center; cursor: pointer; }
.market-personal-ledger-disclosure > summary:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.market-personal-ledger { max-height: 58px; overflow-y: auto; }
.market-personal-ledger ul { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 5px 0 0; padding-left: 16px; }
.market-trade-ticket { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line-active); background: var(--surface-panel-deep); }
.market-ticket-instrument { margin: 0; color: var(--text-primary); }
.market-ticket-cash { padding-bottom: 7px; border-bottom: 1px solid var(--line-subtle); }
.market-order-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 7px; }
.market-order-fields label { display: grid; gap: 5px; min-width: 0; }
.market-order-side { min-width: 0; margin: 0; padding: 0; border: 0; }
.market-order-side legend { margin-bottom: 5px; }
.market-order-side > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--line-subtle); background: var(--surface-panel); }
.market-order-side-button { min-height: 44px; color: var(--text-muted); border: 1px solid transparent; background: transparent; font: 10px var(--font-pixel); }
.market-order-side-button.is-active { color: var(--gold-050); border-color: var(--line-active); background: var(--surface-panel-raised); box-shadow: inset 0 -2px 0 var(--gold-300); }
.market-order-side-button:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.market-order-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 10px; min-height: 96px; margin: 0; padding: 11px; color: var(--gold-100); border: 1px solid var(--line-subtle); background: var(--surface-panel); font: 10px/1.45 var(--font-numeric); font-variant-numeric: tabular-nums; }
.market-order-breakdown > * { min-width: 0; }
.market-order-breakdown [data-market-total] { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line-subtle); color: var(--gold-050); }
.market-order-submit { min-height: 46px; width: 100%; padding: 0 10px; }
.market-order-submit:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 1200px) and (min-width: 701px) {
  .market-history-range { display: grid; }
  .market-history-range-note { display: block; }
  .market-desk-layout { grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); margin-top: 9px; }
  .market-position-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-chart { height: clamp(170px, 24dvh, 220px); min-height: 160px; }
  .market-trade-ticket { gap: 8px; padding: 9px; }
}
@media (max-width: 700px) {
  .market-desk-card { max-height: calc(100dvh - 24px); }
  .market-desk-body { padding: 12px; }
  .market-desk-head { top: -12px; margin: -12px -12px 0; padding: 10px 12px 9px; }
  .market-desk-layout { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .market-selected-quote { align-items: flex-start; flex-direction: column; gap: 10px; }
  .market-current-price { justify-items: start; min-width: 0; text-align: left; }
  [data-market-movement] { text-align: left; }
  .market-position-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-chart { height: 190px; min-height: 170px; }
  .market-order-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 760px) and (min-width: 701px) {
  .market-quote-chart { height: 205px; min-height: 180px; }
}

@media (min-width: 1400px) {
  .market-desk-layout { height: min(66dvh, 720px); min-height: 460px; }
  .market-desk-center { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }
  .market-history { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
  .market-quote-chart { flex: 1 1 0; height: auto; min-height: 190px; }
  .market-trade-ticket { height: 100%; }
  .market-trade-ticket .market-order-submit { margin-top: auto; }
}

/* Market Desk workbench: same controls, arranged for the available work area. */
.market-desk-card {
  width: min(1760px, calc(100vw - 48px));
  max-width: 1760px;
  max-height: min(1200px, calc(100dvh - 40px));
}
#market-modal.popup {
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.market-index-rail,
.market-view-tabs,

@media (min-width: 1920px) {
  .market-index-select { display: grid; }
  .market-desk-layout { grid-template-columns: minmax(0, 1.32fr) minmax(340px, .78fr); gap: 12px; }
  .market-desk-center { gap: 8px; }
}

@media (min-width: 768px) and (max-width: 1399px) {
  .market-desk-card {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
  .market-desk-body { padding: 14px; }
  .market-desk-head { top: -14px; margin: -14px -14px 0; padding: 10px 14px 9px; }
  #market-modal #market-modal-close { min-height: 44px; }
  .market-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 9px;
    padding: 3px;
    background: var(--surface-panel-deep);
    border: 1px solid var(--line-subtle);
  }
  .market-view-button {
    min-height: 44px;
    color: var(--text-muted);
    border: 1px solid transparent;
  }
  .market-view-button:hover,
  .market-view-button:focus-visible { color: var(--gold-100); background: var(--surface-button-dark); }
  .market-view-button.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
  .market-view-button:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
  .market-desk-layout { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .market-history-range { display: grid; }
  .market-history-range-note { display: block; }
  .market-position-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-quote-chart { height: clamp(150px, 23dvh, 210px); min-height: 150px; }
  .market-trade-ticket { gap: 8px; padding: 9px; }
  .market-desk-center { height: auto; min-height: 0; grid-template-rows: none; }
  .market-history { grid-template-rows: none; }
  .market-quote-chart { height: clamp(150px, 23dvh, 210px); min-height: 150px; }
  .market-trade-ticket { height: auto; }
  .market-index-select { grid-template-columns: 1fr; gap: 6px; }
  .market-order-submit {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--surface-panel);
    box-shadow: 0 -5px 8px var(--surface-panel-deep);
  }
  .market-desk-card[data-market-view="overview"] .market-trade-ticket { display: none; }
  .market-desk-card[data-market-view="overview"] .market-desk-layout { grid-template-columns: minmax(0, 1fr); }
  .market-desk-card[data-market-view="trade"] .market-desk-center > :not(.market-selected-quote) { display: none; }
  .market-desk-card[data-market-view="trade"] .market-desk-layout { grid-template-columns: minmax(0, 1fr); }
  .market-desk-card[data-market-view="trade"] .market-personal-ledger-disclosure { display: none; }
}

.finance-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; text-align: center; background: var(--surface-panel-deep); border: 1px dashed var(--line-subtle); }
.finance-empty > span:first-child { color: var(--gold-400); }
.finance-rail-actions { display: grid; gap: 8px; margin-top: auto; }
.finance-rail-actions .btn-dark { min-height: 42px; width: 100%; }
.wallet-card { width: min(680px, 100%); max-height: min(760px, calc(100vh - 32px)); overflow: hidden; }
.wallet-modal-body { display: flex; flex-direction: column; max-height: inherit; padding: 20px; }
.wallet-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wallet-modal-head h2 { margin-top: 7px; color: var(--gold-100); }
.wallet-modal-head p { max-width: 62ch; margin-top: 10px; }
.wallet-modal-head > button { min-height: 34px; padding: 0 9px; flex-shrink: 0; }
.wallet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 18px; padding: 3px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.wallet-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; color: var(--text-muted); border: 1px solid transparent; }
.wallet-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.wallet-tab.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.wallet-view { min-height: 0; margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.wallet-balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.wallet-balance-grid > div { display: grid; gap: 5px; min-width: 0; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.wallet-balance-grid strong { overflow-wrap: anywhere; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wallet-upgrade-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; background: var(--surface-panel-deep); border: 1px solid var(--line-active); }
.wallet-upgrade-panel > div { display: grid; gap: 5px; min-width: 0; }
.wallet-upgrade-panel strong { overflow-wrap: anywhere; }
.wallet-upgrade-panel p { line-height: 1.45; }
.wallet-primary { min-height: 42px; padding: 0 12px; white-space: nowrap; }
.wallet-ledger { display: grid; gap: 6px; margin-top: 16px; }
.wallet-ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; background: var(--surface-panel-deep); border: 1px solid var(--line-dark); }
.wallet-ledger-row strong { font-variant-numeric: tabular-nums; }
.wallet-empty { display: grid; justify-items: center; gap: 9px; padding: 32px 20px; text-align: center; background: var(--surface-panel-deep); border: 1px dashed var(--line-subtle); }
.wallet-empty p { max-width: 54ch; }
.wallet-items-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-dark); }
.wallet-items-list { display: grid; gap: 7px; max-height: 430px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
.wallet-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.wallet-item-row.is-selected { border-color: var(--line-active); background: var(--surface-panel-raised); }
.wallet-item-select { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 0; text-align: left; }
.wallet-item-select:hover { color: var(--gold-050); }
.wallet-item-copy { display: grid; gap: 4px; min-width: 0; }
.wallet-item-copy strong { overflow-wrap: anywhere; }
.wallet-item-copy p { line-height: 1.45; }
.wallet-item-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.wallet-item-actions button { min-height: 30px; padding: 0 8px; }
.wallet-item-detail { display: grid; gap: 6px; margin-top: 10px; padding: 11px; background: var(--surface-panel-deep); border: 1px solid var(--line-active); }
.wallet-item-detail p { line-height: 1.45; }
@media (max-width: 640px) {
  .wallet-modal-body { padding: 16px; }
  .wallet-upgrade-panel { grid-template-columns: 1fr; }
  .wallet-primary { width: 100%; }
}
.financing-card { max-width: 720px; }
.bank-offer-head { display: grid; gap: 8px; }
.bank-offer-head h2, .bank-offer-head p { margin: 0; }
.financing-body { padding: 20px; }
.financing-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 12px; }
.financing-head h2 { margin-top: 7px; }
.financing-badge { align-self: start; padding: 4px 7px; color: var(--gold-400); border: 1px solid var(--line-subtle); white-space: nowrap; }
.financing-close { min-height: 34px; padding: 0 10px; }
.financing-description { max-width: 68ch; margin-top: 14px; }
.financing-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 18px; padding: 3px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.financing-mode-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; padding: 8px 5px; color: var(--text-muted); border: 1px solid transparent; }
.financing-mode-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.financing-mode-tab.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.financing-mode-tab .t-micro { color: inherit; }
.financing-form { display: grid; gap: 12px; margin-top: 18px; }
.financing-field { display: flex; flex-direction: column; gap: 7px; }
.financing-field output { float: right; color: var(--gold-100); font-variant-numeric: tabular-nums; }
.financing-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.financing-field input[type="range"] { width: 100%; accent-color: var(--gold-400); }
.financing-field select.field { width: 100%; }
.financing-preview { margin-top: 18px; padding: 14px; background: var(--surface-panel-deep); border: 1px solid var(--line-active); box-shadow: var(--shadow-active); }
.financing-preview-head { display: flex; flex-direction: column; gap: 6px; }
.financing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.financing-metrics > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px; border: 1px solid var(--line-subtle); background: var(--surface-panel); }
.financing-metrics strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.financing-preview-copy { margin-top: 14px; }
.financing-preview-note { margin-top: 9px; color: var(--gold-muted); }
.financing-actions { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 10px; margin-top: 18px; }
.financing-actions.is-solo { grid-template-columns: minmax(0, 1fr); }
.financing-actions > button { min-height: 46px; width: 100%; }
.financing-disabled-action { opacity: 0.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.music-runtime { display: none; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.music-runtime audio { display: none; }
.financing-surface-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 18px; padding: 3px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.financing-surface-tab { min-height: 40px; padding: 0 8px; color: var(--text-muted); border: 1px solid transparent; }
.financing-surface-tab:hover { color: var(--gold-100); background: var(--surface-button-dark); }
.financing-surface-tab.is-active { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-active); }
.financing-surface-body { margin-top: 18px; }
.financing-surface-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.financing-surface-body > h3 { margin-top: 8px; color: var(--gold-100); }
.financing-contract-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.financing-contract-grid > div,
.financing-rights-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.financing-contract-grid strong,
.financing-rights-grid strong { font-variant-numeric: tabular-nums; }
.financing-checkpoints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.financing-checkpoints > span { padding: 8px; color: var(--text-muted); background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); font-family: var(--font-pixel); font-size: 7px; line-height: 1.4; }
.financing-checkpoints > span.is-paid { color: var(--green-status); border-color: rgb(53 166 83 / 55%); }
.financing-surface-copy { max-width: 68ch; margin-top: 16px; }
.financing-surface-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.financing-surface-actions > button { min-height: 44px; width: 100%; }
.financing-ownership-bar { display: flex; height: 14px; margin-top: 14px; background: var(--surface-panel-deep); border: 1px solid var(--line-default); }
.financing-ownership-primary { background: var(--gold-400); }
.financing-ownership-secondary { background: var(--blue-player); }
.financing-owner-list { display: grid; gap: 6px; margin-top: 10px; }
.financing-owner-list > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.ownership-avatar { width: 12px; height: 12px; display: block; border: 1px solid var(--gold-050); }
.ownership-avatar-primary { background: var(--gold-400); }
.ownership-avatar-secondary { background: var(--blue-player); }
.financing-rights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.financing-default-amount { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px; background: var(--surface-panel-deep); border: 1px solid var(--red-bright); }
.financing-default-amount .t-money { font-size: 28px; }
.financing-default-actions { display: grid; gap: 8px; margin-top: 12px; }
.financing-default-actions > button { min-height: 44px; width: 100%; }
.financing-number { position: relative; display: flex; align-items: center; }
.financing-number input { width: 100%; padding-right: 66px; font-variant-numeric: tabular-nums; }
.financing-number > span { position: absolute; right: 11px; color: var(--gold-500); font-family: var(--font-pixel); font-size: 8px; pointer-events: none; }
.financing-check { display: flex; align-items: center; gap: 9px; min-height: 34px; color: var(--text-muted); cursor: pointer; }
.financing-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold-400); }
.financing-field input[type="range"] { appearance: none; width: 100%; height: 24px; margin: 2px 0; padding: 0; background: transparent; cursor: pointer; }
.financing-field input[type="range"]::-webkit-slider-runnable-track { height: 8px; border: 1px solid var(--line-default); background: repeating-linear-gradient(to right, var(--surface-panel-deep) 0 9%, var(--line-subtle) 9% 10%); }
.financing-field input[type="range"]::-moz-range-track { height: 8px; border: 1px solid var(--line-default); background: repeating-linear-gradient(to right, var(--surface-panel-deep) 0 9%, var(--line-subtle) 9% 10%); }
.financing-field input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--gold-050); border-radius: 0; background: var(--gold-400); box-shadow: 2px 2px 0 var(--gold-800); }
.financing-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--gold-050); border-radius: 0; background: var(--gold-400); box-shadow: 2px 2px 0 var(--gold-800); }
.financing-field input[type="range"]:focus-visible { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: 3px; }
.financing-field input[type="range"]:active::-webkit-slider-thumb { background: var(--gold-050); }
.financing-field input[type="range"]:active::-moz-range-thumb { background: var(--gold-050); }
.sponsorship-card { max-width: 620px; }
.sponsorship-body { padding: 20px; }
.sponsorship-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sponsorship-head h2 { margin-top: 7px; color: var(--gold-100); }
.sponsorship-funding-type { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-top: 12px; padding: 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); border-left: 3px solid var(--gold-400); }
.sponsorship-funding-type strong { min-width: 0; text-align: right; }
.sponsorship-funding-type > span:last-child { grid-column: 1 / -1; }
.sponsorship-funding-type.is-equity { border-left-color: var(--blue-player); }
.sponsorship-funding-type.is-gift { border-left-color: var(--green-status); }
.sponsorship-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.sponsorship-meter > div { display: flex; flex-direction: column; gap: 5px; padding: 9px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.sponsorship-meter .t-money { font-size: 20px; }
.sponsorship-copy { margin-top: 15px; max-width: 64ch; }
.sponsorship-list { display: grid; gap: 5px; margin-top: 16px; }
.sponsorship-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface-panel-deep); border: 1px solid var(--line-subtle); }
.sponsorship-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 9px; margin-top: 18px; }
.sponsorship-actions > button { min-height: 44px; width: 100%; }
.sponsorship-contribute { display: grid; gap: 7px; margin-top: 18px; }
.sponsorship-contribute-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.sponsorship-contribute-row .cta-red { min-width: 130px; }
.sponsorship-request-form { display: grid; gap: 12px; margin-top: 14px; }
.sponsorship-audience, .sponsorship-mode-preview { display: grid; gap: 7px; min-width: 0; padding: 10px; border: 1px solid var(--line-subtle); background: var(--surface-panel-deep); }
.sponsorship-audience-players { display: flex; flex-wrap: wrap; gap: 6px; }
.sponsorship-audience-player { padding: 5px 8px; color: var(--gold-100); background: var(--surface-panel); border: 1px solid var(--line-dark); font: 9px/1.2 var(--font-pixel); }
.sponsorship-mode-preview { border-left: 3px solid var(--gold-400); }
.sponsorship-mode-preview strong { color: var(--gold-100); line-height: 1.5; }
.sponsorship-mode-options { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.sponsorship-mode-options legend { padding: 0 5px; }
.sponsorship-mode-options label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px; border: 1px solid var(--line-subtle); background: var(--surface-input); cursor: pointer; }
.sponsorship-mode-options input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--gold-400); }
.sponsorship-mode-options label > span { display: grid; gap: 3px; }
.sponsorship-mode-options label:focus-within { outline: 2px solid var(--line-active); outline-offset: 2px; }
.sponsorship-share-field { display: grid; gap: 8px; }
.sponsorship-share-field input { min-height: 32px; accent-color: var(--gold-400); }
.sponsorship-equity-terms { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 12px; padding: 10px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.sponsorship-equity-terms > :nth-child(2n) { text-align: right; }
@media (max-width: 520px) {
  .sponsorship-body { padding: 14px; }
  .sponsorship-meter { grid-template-columns: 1fr; }
  .sponsorship-funding-type { grid-template-columns: 1fr; }
  .sponsorship-funding-type strong { text-align: left; }
}
.sponsorship-investor-locked { margin-top: 18px; padding: 10px; border: 1px solid var(--line-default); background: var(--surface-panel-deep); }
.financing-range { position: relative; display: flex; align-items: center; min-height: 24px; }
.financing-range::before,
.financing-range::after { content: ""; position: absolute; left: 0; top: 8px; height: 8px; pointer-events: none; }
.financing-range::before { right: 0; background: var(--surface-panel-deep); border: 1px solid var(--line-default); }
.financing-range::after { width: var(--range-progress, 0%); top: 9px; height: 6px; background: repeating-linear-gradient(45deg, var(--gold-400) 0 6px, var(--gold-500) 6px 12px); }
.financing-range input[type="range"] { position: relative; z-index: 1; }
.financing-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; border-color: transparent; }
.financing-range input[type="range"]::-moz-range-track { background: transparent; border-color: transparent; }
.parlor-dropdown { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.parlor-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; text-align: left; color: var(--text-primary); background: var(--surface-input); border: 1px solid var(--line-default); border-radius: 2px; }
.parlor-dropdown-trigger:hover { color: var(--gold-050); background: var(--surface-button-dark); border-color: var(--line-active); }
.parlor-dropdown-trigger[aria-expanded="true"] { color: var(--gold-050); border-color: var(--line-active); box-shadow: var(--shadow-active); }
.parlor-dropdown-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: 13px; }
.parlor-dropdown-caret { color: var(--gold-400); font-family: var(--font-ui); font-size: 16px; line-height: 1; }
.parlor-dropdown-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90; display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; padding: 3px; background: var(--surface-panel); border: 1px solid var(--line-active); box-shadow: 0 5px 12px rgb(0 0 0 / 55%); }
.parlor-dropdown-menu[hidden] { display: none; }
.parlor-dropdown-option { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; text-align: left; color: var(--text-secondary); background: transparent; border: 1px solid transparent; }
.parlor-dropdown-option:hover,
.parlor-dropdown-option:focus-visible,
.parlor-dropdown-option[aria-selected="true"] { color: var(--gold-050); background: var(--surface-panel-raised); border-color: var(--line-subtle); }
.parlor-dropdown-option:focus-visible { outline: 2px solid var(--theme-focus, var(--gold-100)); outline-offset: -2px; }
.trade-recipient-dropdown { margin-top: 14px; }

@media (max-width: 640px) {
  .financing-head { grid-template-columns: minmax(0, 1fr) auto; }
  .financing-badge { grid-column: 1 / -1; justify-self: start; }
  .financing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .financing-surface-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .financing-contract-grid, .financing-checkpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsorship-meter { grid-template-columns: 1fr; }
  .sponsorship-actions, .sponsorship-contribute-row { grid-template-columns: 1fr; }
  .deal-detail-grid, .deal-detail-terms, .deal-detail-actions { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .home-nav { display: flex; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  /* Keep the six navigation destinations and audio controls reachable in a
     compact header. Connection/profile context remains available inside the
     destination pages and the game HUD. */
  .hdr > .hdr-right .online,
  .hdr > .hdr-right .you-chip { display: none; }
  .home-nav { margin-left: 8px; }
  .home-nav-tab { padding-inline: 10px; }
}

@media (min-width: 1280px) {
  .title-grid {
    grid-template-columns: minmax(540px, 0.82fr) minmax(560px, 1.18fr);
    gap: clamp(24px, 3.2vw, 64px);
    align-content: center;
  }
  .ts-left { max-width: 700px; justify-content: center; }
  .ts-right-clean { max-width: none; margin-left: 0; align-items: center; justify-content: center; }
  .mini-board { width: clamp(440px, 31vw, 700px); }
  .ts-actions { gap: 10px; }
  .ts-cta { min-height: 72px; }
  .ts-quick { min-height: 56px; padding: 0 18px; }
  .home-signal-line { max-width: 700px; }
  .profile-main { max-width: 2080px; padding: 24px 32px 52px; }
  .social-page-main,
  .rules-page-main { max-width: 2080px; padding: 24px 32px 52px; }
  #view-rules .rules-shell { max-width: 2080px; }
  .social-page-main > .ranking-list,
  .social-page-main > .social-surface-body { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; }
  #view-rules .rules-book-spread { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); gap: 20px; }
  #view-rules .rules-book-page-scroll { padding: clamp(20px, 2vw, 32px); }
}

@media (min-width: 2200px) {
  .title-grid { padding: 48px 64px; }
  .mini-board { width: clamp(560px, 28vw, 760px); }
  .profile-main { padding-inline: 48px; }
  .social-page-main,
  .rules-page-main { padding-inline: 48px; }
}

@media (max-width: 899px) {
  .profile-stat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stat-joined { grid-column: span 2; }
  .profile-overview-grid { grid-template-columns: 1fr; }
  .profile-stats-overview { align-items: stretch; flex-direction: column; gap: 10px; }
  .profile-stats-headline { width: 100%; }
  .profile-history-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-personal-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achievements-intro { flex-direction: column; }
  .achievements-progress { width: 100%; text-align: left; }
  .achievements-progress strong { display: inline; margin-right: 7px; }
  .achievements-panel { height: min(620px, max(420px, calc(100vh - 260px))); max-height: none; }
  .social-surface-card { max-height: 92vh; }
  .social-tabs { overflow-x: auto; }
  .social-tab { flex: 0 0 auto; }
  .player-profile-actions { grid-template-columns: 1fr; }
  .player-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-tab-panel { animation: none; }
}

@media (min-width: 2200px) {
  .home-main { max-width: 2520px; }
}

/* ============================================================
   PARLOR DESK HOMEPAGE COMPOSITION
   ============================================================ */
.parlor-desk-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 20px;
}
.parlor-statement { width: 100%; min-width: 0; }
.parlor-statement .home-signal-line { margin-top: 20px; max-width: 700px; }
.home-entry-desk {
  width: 100%;
  padding: 16px;
  background: rgb(3 12 16 / 86%);
  border-color: var(--line-board);
}
.entry-desk-head { display: flex; flex-direction: column; gap: 6px; }
.home-entry-desk .ts-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.home-entry-desk .ts-cta,
.home-entry-desk .ts-quick,
.home-entry-desk #resume-btn { width: 100%; }
.home-entry-desk .ts-cta { min-height: 70px; }
.home-entry-desk .ts-quick,
.home-entry-desk #resume-btn { min-height: 44px; }
.home-entry-desk .ts-local-note { width: 100%; margin-top: 12px; }
.home-entry-desk .open-chair { width: 100%; max-width: none; margin-top: 18px; }
.home-entry-desk .home-alias-form { width: 100%; max-width: none; }

@media (min-width: 1280px) {
  .title-screen { flex-direction: column; }
  .parlor-desk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
    align-items: center;
    align-content: center;
    flex: 1;
    min-height: 0;
    gap: clamp(28px, 5vw, 96px);
    padding: 34px clamp(32px, 5vw, 88px) 44px;
  }
  .parlor-statement { max-width: 760px; justify-self: start; }
  .parlor-statement .wm-hero { font-size: clamp(52px, 6vw, 88px); }
  .home-entry-desk { max-width: 760px; justify-self: end; align-self: center; padding: 24px; }
}

@media (min-width: 2200px) {
  .parlor-desk-grid { padding-inline: 88px; }
  .home-entry-desk { padding: 28px; }
}

/* ============================================================
   MORTGAGE + TILE STATE VISUALS
   ============================================================ */
.tile.is-mortgaged .tile-name,
.tile.is-mortgaged .tile-price,
.tile.is-mortgaged .tile-icon { opacity: 0.45; }
.tile.is-mortgaged::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgb(1 7 10 / 55%) 0 4px, transparent 4px 9px);
  pointer-events: none;
}
.tile-build {
  position: absolute;
  display: flex; gap: 1px;
  pointer-events: none;
}
.tile-build.side-bottom { bottom: 2px; left: 0; right: 0; justify-content: center; }
.tile-build.side-top { top: 2px; left: 0; right: 0; justify-content: center; }
.tile-build.side-left { left: 2px; top: 0; bottom: 0; flex-direction: column; justify-content: center; }
.tile-build.side-right { right: 2px; top: 0; bottom: 0; flex-direction: column; justify-content: center; }
.deed-mtg { margin-top: 6px; }

/* ============================================================
   AUCTION BIDDER LIST
   ============================================================ */
.auction-players { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.auction-player {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
}
.auction-player.is-leading { border-color: var(--line-active); box-shadow: var(--shadow-active); }
.ap-av { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--surface-inset); border: 1px solid var(--line-subtle); flex-shrink: 0; }
.ap-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ap-st { font-size: 6px; }

/* ============================================================
   OFFER INBOX
   ============================================================ */
.offer-card { max-width: 460px; overflow: hidden; }
.offer-rail { height: 10px; width: 100%; }
.offer-body { padding: 16px; }
.offer-head { display: flex; align-items: center; gap: 12px; }
.offer-av { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--surface-inset); border: 1px solid var(--line-subtle); border-radius: 2px; }
.offer-title { margin-top: 6px; font-size: 17px; }
.offer-rows { margin-top: 14px; display: block; line-height: 1.55; }
.offer-actions { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.offer-btn { height: 50px; }
.offer-note { margin-top: 12px; text-align: center; }
@media (max-width: 480px) { .offer-actions { grid-template-columns: 1fr; } }

/* ============================================================
   BANKRUPTCY
   ============================================================ */
.bank-body { position: relative; padding: 16px; }
.bank-dismiss { position: absolute; top: 14px; right: 14px; min-height: 36px; padding: 0 10px; }
.bank-head { display: flex; align-items: center; gap: 12px; padding-right: 72px; }
.bank-icon { font-family: var(--font-display); font-size: 34px; color: var(--red-bright); line-height: 1; }
.bank-title { margin-top: 6px; font-size: 17px; color: var(--gold-100); }
.bank-copy { margin-top: 14px; }
.bank-actions { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bank-btn { height: 52px; width: 100%; }
@media (max-width: 480px) { .bank-actions { grid-template-columns: 1fr; } }

/* In-game retire control (topbar): danger tint from the existing red token
   ramp. Press feedback comes from .btn-dark:active; nothing new animates. */
.hdr-retire { border-color: var(--red-dark); }
.hdr-retire .t-label { color: var(--red-bright); }
.hdr-retire:hover:not(:disabled) { border-color: var(--red-action-hover); }
.hdr-retire:active:not(:disabled) { background: var(--red-action-pressed); }

/* ============================================================
   LOG DRAWER
   ============================================================ */
.log-drawer {
  position: absolute; inset: 0; z-index: 4;
  width: auto;
  display: flex; flex-direction: column;
  padding: 14px;
  background: var(--surface-panel);
  border: 1px solid var(--line-default);
  box-shadow: var(--shadow-panel);
  transform: translateX(105%);
  transition: transform 130ms steps(3, end);
  visibility: hidden; pointer-events: none;
}
.log-drawer.is-open { transform: none; visibility: visible; pointer-events: auto; }
.log-drawer:not(.is-open) { display: none; }
.log-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.drawer-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.drawer-filter { height: 30px; padding: 0 10px; }
.drawer-filter.is-active { border-color: var(--line-active); color: var(--gold-050); box-shadow: var(--shadow-active); }
.log-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; display: flex; flex-direction: column; gap: 6px; }
.log-drawer-body .log-line { flex-shrink: 0; }
.log-drawer-foot { margin-top: 10px; text-align: right; }
@media (max-width: 640px) {
  /* On touch widths (including an effective 200% zoom viewport), keep the
     closed fixed drawer inside the viewport so it cannot create page
     overflow. Opening uses a restrained opacity transition. */
  .log-drawer { position: absolute; inset: 0; width: auto; transform: none; opacity: 0; pointer-events: none; }
  .log-drawer.is-open { opacity: 1; pointer-events: auto; }
}
@media (max-width: 320px) {
  .hdr { gap: 6px; padding-inline: 8px; }
  .hdr-brand { min-width: 0; flex: 1 1 110px; gap: 6px; }
  .hdr-brand-text { min-width: 0; }
  .hdr-wordmark { font-size: 24px; }
  .hdr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr-right { gap: 6px; min-width: 0; }
}

/* ============================================================
   CREATE ROOM PANEL
   ============================================================ */
.rc-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rc-field { display: block; }
.rc-field .t-label { display: block; margin-bottom: 6px; }
.rc-input { width: 100%; }
.rc-vis-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.rc-vis-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; text-align: left;
  background: var(--surface-panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  cursor: pointer;
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end);
}
.rc-vis-opt:hover { background: var(--surface-hover); }
.rc-vis-opt.is-active { background: var(--surface-active); border-color: var(--line-active); box-shadow: var(--shadow-active); }
.rc-code-entry { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rc-room-code { flex: 1; min-width: 0; letter-spacing: 0.16em; text-transform: uppercase; }
.rc-code-status { min-width: 118px; color: var(--text-muted); text-align: right; }
.rc-code-status.is-valid { color: var(--green-status); }
.rc-code-status.is-invalid { color: var(--red-bright); }
.rc-code-help { display: block; margin-top: 6px; }
.rc-create-btn { margin-top: 8px; width: 100%; height: 52px; }
.rc-local { margin-top: 10px; text-align: center; line-height: 1.6; }

/* local-table notice */
.local-note {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px dashed var(--line-default);
  border-radius: 2px;
  color: var(--gold-muted);
}
.local-note .dot { flex-shrink: 0; }
.ts-local-note { margin-top: 16px; max-width: 520px; }
.tn-local { margin-left: 4px; }

/* whole-table + build supply */
.supply-strip {
  margin-top: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.supply-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 8px;
  background: var(--surface-panel-deep);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dice-rolling, .token-pop, .chest, .boot-in, .blink, .piece.is-hopping, .face-cell:hover { animation: none !important; }
  .piece.is-moving, .log-drawer { transition: none !important; }
  .popup-card, .panel, .hud-cell, .global-event-banner, .panel-menu, .auction-bar-fill { transition: none !important; animation: none !important; }
  .hud-cash-action:active:not(:disabled) { transform: none; }
}

@media (forced-colors: active) {
  .panel, .popup-card, .field, button, .room-badge, .hud-cell, .board-frame,
  .tile, .player-row, .room-row { forced-color-adjust: none; border-color: CanvasText; }
  button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, a:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .dot, .st-dot, .pr-dot, .tile-owner { background: currentColor !important; box-shadow: none !important; }
  .cta-red { background: ButtonFace; color: ButtonText; border-color: CanvasText; }
}

/* ============================================================
   LANDSCAPE TABLET DESK — iPad-first composition
   The board is the primary surface on landscape iPad touch profiles through 1399px.
   Keep the live round inside the viewport; rails and focused work scroll
   internally instead of turning the game into a long document.
   ============================================================ */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) and (hover: none) and (pointer: coarse) {
  html,
  body { min-height: 100%; overflow-x: hidden; }

  .hdr,
  .topnav {
    height: 64px;
    min-height: 64px;
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
    gap: 8px;
  }
  .hdr-brand,
  .topnav-brand { gap: 8px; flex-shrink: 0; }
  .hdr-brand {
    box-sizing: border-box;
    width: 180px;
    min-width: 180px;
    flex: 0 0 180px;
    margin-right: 0;
  }
  #view-rankings .hdr-brand,
  #view-social .hdr-brand,
  #view-rules .hdr-brand { margin-right: 0; }
  .hdr-brand-text { flex: 1; min-width: 0; }
  .hdr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr-wordmark { font-size: 28px; }
  .tn-word { font-size: 28px; }
  .home-nav { margin-left: 4px; }
  .hdr .home-nav { height: 50px; min-height: 50px; }
  .home-nav-tab { min-height: 44px; padding-inline: 8px; }
  .hdr-right,
  .tn-right { gap: 6px; }
  .hdr-rules { height: 44px; min-height: 44px; padding-inline: 8px; }
  .audio-toggle { width: 44px; min-width: 44px; height: 44px; padding: 6px; }

  /* Home stays a desk, not a page. The ticker remains in the first viewport. */
  #view-home {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  #view-home .home-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    padding: 10px 14px 12px;
  }
  #view-home .title-screen {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  #view-home .parlor-desk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: 18px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 18px 22px;
  }
  #view-home .parlor-statement { max-width: 620px; }
  #view-home .parlor-statement .wm-hero { font-size: clamp(52px, 7vw, 78px); }
  #view-home .home-entry-desk { max-width: none; padding: 18px; }
  #view-home .home-entry-desk .ts-actions { gap: 8px; margin-top: 14px; }
  #view-home .home-entry-desk .ts-cta { min-height: 58px; }
  #view-home .home-entry-desk .ts-cta .cta-text { font-size: 25px; }
  #view-home .home-entry-desk .ts-quick,
  #view-home .home-entry-desk #resume-btn { min-height: 44px; }
  #view-home .home-entry-desk .open-chair { margin-top: 12px; }
  #view-home .ticker { flex-shrink: 0; padding-block: 8px; }

  /* Rankings and Social retain a readable multi-panel desk at Mini width. */
  #view-rankings,
  #view-social,
  #view-rules {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
  #view-rankings .social-page-main,
  #view-social .social-page-main,
  #view-rules .rules-page-main {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    min-height: 0;
    padding: 10px 14px 14px;
  }
  #view-rankings .social-page-shell,
  #view-social .social-page-shell,
  #view-rules .rules-shell { height: 100%; min-height: 0; }
  #view-rankings .rankings-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
  }
  #view-rankings .rankings-stage,
  #view-rankings .rankings-stage .ranking-list { min-height: 0; }
  #view-social .social-network-grid {
    grid-template-columns: minmax(190px, .75fr) minmax(0, 1.8fr) minmax(220px, .9fr);
    gap: 10px;
    min-height: 0;
  }
  #view-social .social-network-rail,
  #view-social .social-feed,
  #view-social .social-context { grid-column: auto; height: 100%; min-height: 0; }
  #view-social .social-context { max-height: none; }

  /* Rules remains a book: the index and article are the only scroll regions. */
  #view-rules .rules-intro { padding: 14px 18px; }
  #view-rules .rules-toolbar { padding: 10px 14px; }
  #view-rules .rules-book-spread { flex: 1; min-height: 0; }

  /* Profile is a long editor, so keep its navigation reachable while it scrolls. */
  #view-profile .hdr { position: sticky; top: 0; z-index: 50; }
  #view-profile .profile-main { max-width: none; padding: 14px 24px 32px; }

  /* Board-first live round. CSS variables let Mini and Pro breathe differently. */
  #view-game {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  #view-game .game-main {
    --ipad-left-rail: 164px;
    --ipad-right-rail: 220px;
    display: grid;
    grid-template-columns: var(--ipad-left-rail) minmax(0, 1fr) var(--ipad-right-rail);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    min-height: 0;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #view-game .rail-left {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
  }
  #view-game .rail-left > .panel:first-child {
    flex: 0 0 auto;
    max-height: 206px;
    overflow: hidden;
  }
  #view-game .rail-left > .panel:first-child .player-list {
    max-height: 144px;
    overflow-y: auto;
  }
  #view-game .chat-panel { min-height: 0; overflow: hidden; }
  #view-game .chat-body { min-height: 0; }
  #view-game .rail-center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
  }
  #view-game .board-area { min-width: 0; min-height: 0; overflow: hidden; container-type: size; }
  #view-game .board-holder {
    width: min(100%, 68vh);
    width: min(100%, 68dvh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  #view-game .board-holder.is-metro {
    width: min(100%, 68vh);
    width: min(100%, 68dvh);
    min-width: 0;
    min-height: 0;
  }
  #view-game .hud {
    grid-template-columns: minmax(0, .96fr) minmax(0, .9fr) minmax(104px, 1.1fr) minmax(0, 1.04fr) minmax(0, 1.1fr);
    gap: 6px;
    height: 86px;
    min-height: 86px;
  }
  #view-game .hud-roll { grid-column: span 1; }
  #view-game .hud-cell,
  #view-game .hud-roll { min-height: 86px; height: 86px; padding: 8px; overflow: hidden; }
  #view-game .hud-cell:first-child { overflow-y: auto; overscroll-behavior: contain; }
  #view-game .hud-body { min-width: 0; gap: 6px; }
  #view-game .hud-body > div { min-width: 0; }
  #view-game #hud-cash-action { gap: 4px; }
  #view-game #hud-cash-action #hud-cash { flex: 1 1 auto; min-width: 0; font-size: clamp(16px, 1.5vw, 18px); }
  #view-game #hud-cash-action [data-sprite="note"] { display: none; }
  #view-game .hud-name { font-size: 20px; }
  #view-game .hud-note { margin-top: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-game .t-money { font-size: 24px; }
  #view-game .pool-val { font-size: 20px; }
  #view-game .tile-name { font-size: clamp(7px, .95cqw, 9.5px); }
  #view-game .tile-price { font-size: clamp(8px, .95cqw, 10px); }
  #view-game .tile-face-special .tile-name { font-size: clamp(7px, .95cqw, 9.5px); }
  #view-game .go-big { font-size: 20px; }
  #view-game .tile-icon > svg { transform: scale(.92); transform-origin: center; }
  #view-game .tile-icon-large svg { width: 28px; height: 28px; }
  #view-game .airport-mark { width: clamp(14px, 3.3cqw, 30px); }
  #view-game .board-icon-chest,
  #view-game .board-icon-surprise,
  #view-game .tile-icon-large .board-icon-mark { width: clamp(24px, 6cqw, 72px); }
  #view-game .piece { width: 22px; height: 22px; }
  #view-game .piece > svg { width: 18px; height: 18px; }
  #view-game .die,
  #view-game .die-blank { width: 42px; height: 42px; padding: 7px; gap: 2px; }
  #view-game .die { width: 42px; height: 42px; padding: 7px; gap: 2px; }
  #view-game .hud-roll { padding-inline: 10px; }
  #view-game .hud-roll .cta-text { font-size: 18px; }
  #view-game .right-rail {
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  #view-game .rr-body { min-height: 0; overflow-y: auto; }
  #view-game .global-event-banner { width: min(680px, calc(100% - 14px)); gap: 8px; padding: 8px 10px; }

  #view-game.is-left-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) var(--ipad-right-rail); }
  #view-game.is-right-rail-hidden .game-main { grid-template-columns: var(--ipad-left-rail) minmax(0, 1fr) 0; }
  #view-game.is-left-rail-hidden.is-right-rail-hidden .game-main { grid-template-columns: 0 minmax(0, 1fr) 0; }

  @media (min-width: 1100px) {
    #view-game .game-main { --ipad-left-rail: 184px; --ipad-right-rail: 250px; gap: 10px; }
    #view-game .hud { grid-template-columns: minmax(0, .96fr) minmax(0, .9fr) minmax(112px, 1.1fr) minmax(0, 1.04fr) minmax(0, 1.1fr); }
  }
  @media (min-width: 1150px) {
    #view-game .board-holder,
    #view-game .board-holder.is-metro {
      width: min(100%, 72vh);
      width: min(100%, 72dvh);
    }
  }

  /* Mini-class landscape still has room for context. Keep a compact avatar
     and connection signal instead of removing identity from the shared bar. */
  @media (min-width: 900px) and (max-width: 1100px) {
    .hdr > .hdr-right .you-chip {
      display: flex;
      width: 40px;
      min-width: 40px;
      height: 40px;
      padding: 0;
      justify-content: center;
    }
    .hdr > .hdr-right .you-chip-text { display: none; }
  }

  /* Tablet touch contract: AA minimum everywhere, comfortable size for chrome. */
  button,
  a,
  input,
  select,
  textarea,
  [role="button"],
  [role="tab"] { touch-action: manipulation; -webkit-tap-highlight-color: rgb(200 143 46 / 24%); }
  .home-nav-tab { min-height: 44px; }
  .rm-tab,
  .rules-index-link { min-height: 40px; }
  .profile-tab { min-height: 44px; }
  .popup-card .btn-dark,
  .log-drawer .btn-dark,
  #panel-menu .panel-menu-head button,
  .holdings-empty .btn-dark { min-height: 40px; }
  #panel-menu .panel-option input[type="checkbox"] { width: 24px; height: 24px; }
  .parlor-toast-close { width: 40px; height: 40px; top: 4px; right: 4px; }
  #view-home .chair-edit { min-height: 44px; height: 44px; }
  .field { font-size: 16px; }
  .social-search-label .field { height: 44px; min-height: 44px; flex-basis: 44px; }
  .setting-select { height: 40px; font-size: 16px; }

  /* Coarse pointers do not get sticky desktop hover states. */
  @media (hover: none) and (pointer: coarse) {
    .btn-dark:hover:not(:disabled) { border-color: var(--line-default); color: var(--gold-300); background: var(--surface-button-dark); }
    .cta-red:hover:not(:disabled) { background: var(--red-action); }
    .home-nav-tab:hover,
    .home-signal:hover,
    .social-tab:hover,
    .profile-tab:hover { color: inherit; background: transparent; }
  }
}

/* Global events live only inside the board's center field, so the status
   never reflows the fixed game shell or covers the board's action controls. */
.global-event-banner {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(680px, calc(100% - 20px));
  max-height: calc(100% - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  padding: 10px 12px;
  color: var(--gold-100);
  background: color-mix(in srgb, var(--surface-board-center) 88%, transparent);
  border: 1px solid var(--line-board);
  border-top: 2px solid var(--event-accent, var(--gold-500));
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 8%), 0 4px 18px rgb(0 0 0 / 45%);
}
.global-event-banner.is-delayed { visibility: hidden; }
.global-event-ribbon {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  width: min(760px, calc(100% - 24px));
  min-height: 54px;
  padding: 8px 14px;
  color: var(--gold-050);
  background: color-mix(in srgb, var(--red-action) 86%, transparent);
  border: 1px solid var(--gold-400);
  border-top: 2px solid var(--gold-100);
  box-shadow: inset 0 1px 0 rgb(255 235 195 / 16%), 0 5px 16px rgb(0 0 0 / 55%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0) rotate(0deg);
}
.global-event-ribbon.is-visible {
  opacity: 1;
  animation: global-event-ribbon-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (max-width: 620px) {
  .global-event-ribbon {
    grid-template-columns: auto minmax(0, 1fr);
    width: calc(100% - 12px);
  }
  .global-event-ribbon-cue { grid-column: 1 / -1; }
}
.global-event-ribbon-label,
.global-event-ribbon-cue {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.global-event-ribbon-label { color: var(--gold-050); }
.global-event-ribbon-title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(14px, 2.4vw, 20px);
  line-height: 1.2;
  text-overflow: ellipsis;
}
.global-event-ribbon-cue { color: var(--gold-050); }
@keyframes global-event-ribbon-in {
  from { opacity: 0; transform: translate(-50%, -8px) rotate(-2deg); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
}

/* ---- Compact global-event paint ---- */
@media (max-width: 620px) {
  .global-event-banner {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 6;
  width: min(440px, calc(100% - 12px));
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  color: var(--gold-100);
  background: color-mix(in srgb, var(--surface-board-center) 88%, transparent);
  border: 1px solid var(--line-board);
  border-top: 2px solid var(--event-accent, var(--gold-500));
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(240 217 172 / 8%), 0 4px 18px rgb(0 0 0 / 45%);
  transform: translateX(-50%);
}
  .global-event-copy { white-space: normal; overflow: visible; }
.global-event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.global-event-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.global-event-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.global-event-kicker {
  white-space: nowrap;
  letter-spacing: 0.08em;
  color: var(--event-accent, var(--gold-300));
  font-family: var(--font-pixel);
  font-size: 8px;
}
.global-event-status-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.global-event-rounds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgb(0 0 0 / 35%);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  font-family: var(--font-numeric);
  font-size: 8px;
  color: var(--event-accent, var(--gold-300));
  white-space: nowrap;
}
.global-event-timer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.global-event-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--surface-button-dark);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  color: var(--gold-100);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end), transform 60ms ease;
}
.global-event-toggle:hover {
  background: var(--surface-button-hover);
  border-color: var(--line-active);
  color: var(--gold-050);
}
.global-event-toggle:active {
  transform: translateY(1px);
}
.global-event-toggle:focus-visible {
  outline: 2px solid var(--theme-focus, var(--gold-100));
  outline-offset: 2px;
}
.global-event-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.global-event-body-wrap.is-hidden {
  display: none;
}
.global-event-main {
  min-width: 0;
}
.global-event-main h2 {
  margin-top: 1px;
  color: var(--gold-050);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.global-event-copy {
  margin-top: 2px;
  color: var(--gold-muted);
  font-size: 10px;
  line-height: 1.3;
}
.global-event-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.global-event-effect {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  color: var(--gold-100);
  background: rgb(1 7 10 / 60%);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  letter-spacing: 0.04em;
  font-family: var(--font-numeric);
  font-size: 8px;
}
.global-event-trend {
  display: inline-flex;
  align-items: center;
}
.global-event-trend.mod-up {
  color: var(--green-status);
}
.global-event-trend.mod-down {
  color: var(--red-bright);
}
.global-event-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.global-event-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.global-event-choice {
  min-height: 26px;
  padding: 3px 8px;
  color: var(--gold-100);
  background: var(--surface-button-dark);
  border: 1px solid var(--line-default);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 100ms steps(2, end), border-color 100ms steps(2, end), transform 60ms ease;
}
.global-event-choice:hover {
  border-color: var(--event-accent, var(--gold-500));
  color: var(--gold-050);
}
.global-event-choice:active {
  transform: translateY(1px);
}
.global-event-choice:focus-visible {
  border-color: var(--event-accent, var(--gold-500));
  outline: 2px solid var(--theme-focus, var(--gold-100));
  outline-offset: 2px;
}
.global-event-choice:disabled {
  opacity: 0.55;
  cursor: default;
}
.global-event-banner.is-compact {
  padding: 4px 8px;
  gap: 4px;
}
.global-event-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.global-event-compact-row.is-hidden {
  display: none;
}
.global-event-compact-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-050);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.global-event-compact-rounds {
  flex: 0 0 auto;
  color: var(--gold-300);
  font-family: var(--font-numeric);
  font-size: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.global-event-compact-effects {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.global-event-compact-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  color: var(--gold-100);
  background: rgb(1 7 10 / 60%);
  border: 1px solid var(--line-subtle);
  border-radius: 2px;
  font-family: var(--font-numeric);
  font-size: 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.global-event-compact-vote {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 6px;
  color: var(--gold-050);
  background: rgb(217 166 47 / 20%);
  border: 1px solid var(--gold-400);
  border-radius: 2px;
  font-family: var(--font-pixel);
  font-size: 7px;
  cursor: pointer;
}
.global-event-compact-vote.is-hidden {
  display: none;
}
}
@media (prefers-reduced-motion: reduce) {
  .popup-card, .panel, .hud-cell, .global-event-banner, .panel-menu, .auction-bar-fill { transition: none !important; animation: none !important; }
  .global-event-ribbon,
  .global-event-ribbon.is-visible { animation: none !important; opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
  .inactivity-ring-art { animation: none !important; }
}
@media (forced-colors: active) {
  .global-event-ribbon,
  .global-event-banner { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .global-event-ribbon-label,
  .global-event-ribbon-title,
  .global-event-ribbon-cue,
  .global-event-banner :is(h2, p, button, span) { color: CanvasText; }
  .global-event-toggle,
  .global-event-choice { border-color: CanvasText; forced-color-adjust: none; }
  .inactive-player-row,
  .inactivity-timer-host { border-color: CanvasText; color: CanvasText; }
  .inactivity-timer-time,
  .inactive-player-time { color: LinkText; }
  .room-vote-panel, .room-vote-counts > div, .room-vote-progress { border-color: CanvasText; }
  .room-vote-progress > span { background: Highlight; }
}
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) and (hover: none) and (pointer: coarse) {
  #view-game .global-event-banner { width: min(680px, calc(100% - 14px)); gap: 8px; padding: 8px 10px; }
}
@media (hover: none) and (pointer: coarse) {
  .global-event-toggle,
  .global-event-compact-vote { min-height: 44px; }
}
@keyframes event-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-transparency: reduce) {
  .global-event-ribbon,
  .global-event-banner {
    background: var(--surface-board-center);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 2560×1440 gets a wider game surround and larger in-game work surfaces.
   The centered board column remains height-limited, so the board and HUD do
   not change size when the side rails grow. */
@media (orientation: landscape) and (min-width: 2400px) and (max-width: 3199px) {
  #view-game .game-main {
    --game-rail-width: minmax(360px, 1fr);
    width: 100%;
    margin-inline: 0;
    grid-template-columns:
      minmax(360px, 1fr)
      minmax(0, calc(min(1600px, calc(100dvh - 160px)) + 8px))
      minmax(360px, 1fr);
  }

  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card {
    max-width: 500px;
    max-height: min(94dvh, 1180px);
  }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-section { font-size: 18px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-label { font-size: 14px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-micro { font-size: 10px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-tile { font-size: 13px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-body { font-size: 14px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .t-money { font-size: 44px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .f11 { font-size: 12px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .f12 { font-size: 13px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card .f13 { font-size: 14px; }
  :is(#popup, #trade-modal, #choice-modal, #auction-modal, #offer-modal, #deed-modal,
    #financing-modal, #bank-loan-modal, #wallet-modal, #market-modal, #casino-modal,
    #deal-detail-modal, #sponsorship-modal, #bankruptcy-modal, #card-modal, #gameover-modal,
    #confirm-modal, #achievement-modal, #rankings-modal, #social-modal) .popup-card :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-height: 48px;
  }

  #choice-modal .choice-card,
  #bankruptcy-modal .choice-card,
  #gameover-modal .choice-card,
  #confirm-modal .confirm-card,
  #auction-modal .auction-card,
  #offer-modal .offer-card { max-width: 520px; }
  #popup #popup-card,
  #deed-modal .deed-detail-card { max-width: 600px; }
  #trade-modal .trade-card { max-width: 740px; }
  #bank-loan-modal .bank-loan-card {
    width: min(600px, calc(100vw - 128px));
    max-width: 600px;
    max-height: min(94dvh, 900px);
  }
  #financing-modal .financing-card { max-width: 800px; }
  #sponsorship-modal .sponsorship-card { max-width: 720px; }
  #deal-detail-modal .deal-detail-card { max-width: 760px; }
  #card-modal .card-reveal { max-width: 520px; }
  #rankings-modal .social-surface-card,
  #social-modal .social-surface-card { max-width: min(1200px, calc(100vw - 128px)); }
  #player-modal #player-card { width: min(480px, calc(100vw - 32px)); max-width: 480px; max-height: min(82dvh, 700px); }
  #account-modal .account-card { max-width: 560px; max-height: min(94dvh, 900px); }
  #account-modal .account-modal-body { padding: 20px; }
  #account-modal .account-card .t-section { font-size: 18px; }
  #account-modal .account-card .t-label { font-size: 14px; }
  #account-modal .account-card .t-micro { font-size: 10px; }
  #account-modal .account-card .t-body { font-size: 14px; }
  #account-modal .account-card :is(button, input, select, textarea) { min-height: 48px; }

  #wallet-modal .wallet-card {
    width: min(760px, calc(100vw - 128px));
    max-width: 760px;
    max-height: min(90dvh, 900px);
  }
  #wallet-modal .wallet-modal-body,
  #bank-loan-modal .bank-offer-content,
  #casino-modal .casino-modal-body,
  #financing-modal .financing-body,
  #sponsorship-modal .sponsorship-body,
  #deal-detail-modal .deal-detail-body { padding: 24px; }

  #casino-modal .casino-desk-card {
    width: min(680px, calc(100vw - 128px));
    max-width: 680px;
    max-height: min(90dvh, 900px);
  }
  #casino-modal .casino-modal-head > button,
  #financing-modal .financing-close { min-height: 48px; }

  #market-modal .market-desk-card {
    width: min(1500px, calc(100vw - 128px));
    max-width: 1500px;
    max-height: min(1300px, calc(100dvh - 64px));
  }
  #market-modal .market-desk-body { padding: 20px; }
  #market-modal .market-desk-head { top: -20px; margin: -20px -20px 0; padding: 14px 20px 12px; }
  #market-modal #market-modal-close { min-height: 48px; }
  #market-modal .market-order-side-button,
  #market-modal .market-order-submit { min-height: 48px; }

  #card-gallery .card-gallery-shell { width: min(1400px, 100%); max-height: min(94dvh, 1100px); }
  #card-gallery .card-gallery-head { padding: 24px 26px 18px; }
  #card-gallery .card-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 20px; }
}

/* The Market Desk is a compact workbench at every supported profile. */
#market-modal .market-desk-card {
  display: flex;
  flex-direction: column;
  width: min(1320px, calc(100vw - 48px));
  max-width: 1320px;
  max-height: min(900px, calc(100dvh - 48px));
  overflow: hidden;
}
#market-modal .market-desk-body {
  flex: 0 1 auto;
  max-height: min(900px, calc(100dvh - 48px));
  padding: 14px;
}
#market-modal .market-desk-head { top: -14px; margin: -14px -14px 0; padding: 10px 14px 9px; }
#market-modal .market-desk-summary { min-height: 44px; margin-top: 8px; gap: 6px 8px; padding: 5px 8px; }
#market-modal .market-desk-summary .market-index-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 1 1 340px;
  gap: 8px;
  min-width: 260px;
  max-width: 520px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}
#market-modal .market-desk-summary .market-index-select select { min-height: 42px; }
#market-modal .market-index-rail,
#market-modal .market-index-strip { display: none; }
#market-modal #market-modal-close { min-height: 44px; }

@media (min-width: 1400px) {
  #market-modal .market-view-tabs { display: none; }
  #market-modal .market-desk-layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(340px, .78fr);
    gap: 12px;
    height: min(56dvh, 560px);
    min-height: 420px;
  }
  #market-modal .market-desk-center { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
  #market-modal .market-history { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
  #market-modal .market-history-range { display: grid; grid-template-columns: auto minmax(130px, 160px); }
  #market-modal .market-history-range-note { display: block; }
  #market-modal .market-quote-chart { flex: 1 1 0; height: auto; min-height: 180px; }
  #market-modal .market-trade-ticket { height: 100%; gap: 8px; padding: 10px; }
  #market-modal .market-trade-ticket .market-order-submit { margin-top: auto; }
}

@media (min-width: 768px) and (max-width: 1399px) {
  #market-modal .market-desk-card { width: min(980px, calc(100vw - 64px)); max-width: 980px; }
  #market-modal .market-desk-head p { display: none; }
  #market-modal .market-desk-summary {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    gap: 5px 7px;
    padding: 5px 7px;
  }
  #market-modal .market-desk-summary .market-index-select {
    grid-template-columns: auto minmax(0, 1fr);
    flex: initial;
    grid-column: auto;
    gap: 6px;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  #market-modal .market-position-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  #market-modal .market-position-strip > div { gap: 4px; padding: 7px 6px; }
  #market-modal .market-quote-chart { height: clamp(140px, 18dvh, 170px); min-height: 140px; }
  #market-modal .market-trade-ticket { gap: 7px; padding: 9px; }
  #market-modal .market-order-breakdown { gap: 6px 8px; min-height: 82px; padding: 9px; }
}

/* ============================================================
   TOUCH TABLET EXTERNAL PAGES — iPad-first reading layout
   Keep the desktop desk intact; use one intentional vertical scroller
   per active page and progressively disclose secondary controls.
   ============================================================ */
.rankings-search-toggle,
.rankings-view-tabs,
.rules-search-toggle,
.rules-chapters-toggle,
.achievement-filter-toggle { display: none; }

@media (min-width: 768px) and (max-width: 1399px) and (hover: none) and (pointer: coarse) {
  #view-rankings,
  #view-social,
  #view-rules,
  #view-profile {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #view-rankings .social-page-main,
  #view-social .social-page-main,
  #view-rules .rules-page-main {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    min-height: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* Lookup stays available without reserving a full toolbar row. */
  .rankings-search-band.is-search-collapsible { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 10px; }
  .rankings-search-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; }
  .rankings-search-band.is-search-collapsible .rankings-search { display: none; }
  .rankings-search-band.is-search-collapsible.is-search-open .rankings-search { display: block; padding: 8px 2px 3px; }

  /* Keep all Profile sections reachable on one horizontal tab rail. */
  #view-profile .profile-main {
    max-width: none;
    padding: 10px max(14px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom));
  }
  #view-profile .profile-hero { padding: 12px 14px; }
  #view-profile .profile-hero-main { gap: 12px; }
  #view-profile .profile-hero-avatar { width: 68px; height: 68px; }
  #view-profile .profile-hero-name { font-size: clamp(26px, 2.5vw, 38px); }
  #view-profile .profile-hero-handle,
  #view-profile .profile-hero-state { margin-top: 5px; }
  #view-profile .profile-stat-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  #view-profile .profile-stat { min-width: 0; min-height: 52px; gap: 4px; padding: 7px 8px; }
  #view-profile .profile-stat strong { font-size: 16px; }
  #view-profile .profile-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 8px;
    scrollbar-color: var(--line-active) var(--surface-panel-deep);
    scrollbar-width: thin;
    white-space: nowrap;
  }
  #view-profile .profile-tab { flex: 0 0 auto; min-height: 44px; padding-inline: 12px; white-space: nowrap; }
  #view-profile .profile-tab-panel { min-width: 0; scroll-margin-top: 54px; }
  #view-profile .achievements-panel { height: auto; max-height: none; overflow: visible; }
  #view-profile .achievements-grid { flex: none; min-height: 0; overflow: visible; overscroll-behavior: auto; scrollbar-gutter: auto; }
  #view-profile .achievements-intro { align-items: center; gap: 12px; }
  #view-profile .achievements-intro .t-body { margin-top: 6px; }
  #view-profile .achievements-progress { flex: 0 0 auto; min-width: 70px; padding: 6px 8px; }
  #view-profile .achievements-progress strong { font-size: 16px; }

  /* Keep categories visible; put secondary time/rarity filters behind one control. */
  #view-profile .achievements-filter-bar { flex-wrap: nowrap; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--line-active) var(--surface-panel-deep); scrollbar-width: thin; }
  #view-profile .achievement-filter { flex: 0 0 auto; min-height: 44px; padding-inline: 10px; white-space: nowrap; }
  #view-profile .achievement-filter-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding-inline: 10px; }
  #view-profile .achievement-filter-controls { display: none; }
  #view-profile .achievements-panel.is-filters-open .achievement-filter-controls { display: flex; }
  #view-profile .achievement-filter-field { min-width: min(190px, 42vw); }

  /* Search remains one tap away on both Rankings and Rules. */
  #view-rules .rules-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  #view-rules .rules-search-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 10px; }
  #view-rules .rules-search-label { display: none; flex: 1 1 100%; min-width: 0; }
  #view-rules .rules-toolbar.is-search-open .rules-search-label { display: flex; }
  #view-rules .rules-search-count { margin-left: auto; }
  #view-rules .rules-page-main { min-height: 0; }
  #view-rules .rules-book-page-scroll { scrollbar-color: var(--line-active) var(--surface-panel-deep); scrollbar-width: thin; }
  #view-rules .rules-index-nav { scrollbar-color: var(--line-active) var(--surface-panel-deep); scrollbar-width: thin; }

  .rules-search-toggle,
  .rules-chapters-toggle { display: none; }
}

@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  /* Portrait turns the chapter list into a compact disclosure above one reader. */
  #view-rules .rules-book-spread { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
  #view-rules .rules-index { flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; padding: 8px 10px; }
  #view-rules .rules-index-head { align-items: center; padding: 0; border: 0; }
  #view-rules .rules-index-head > span { display: none; }
  #view-rules .rules-chapters-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding-inline: 10px; }
  #view-rules .rules-index-nav { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(240px, 26dvh); margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; }
  #view-rules .rules-index.is-index-open .rules-index-nav { display: grid; }
  #view-rules .rules-book-page { flex: 1 1 0; min-height: 0; }
  #view-rules .rules-book-page-scroll { padding: 14px; }
}