/* =====================================================================
   MATHOPOLY — HUD stylesheet

   The canvas is owned by the WebGL renderer; this file owns every
   overlay drawn on top of it.

   Every selector below is taken from the DOM MathopolyHUD.mount()
   actually builds. The previous version of this file targeted a
   different naming scheme (.mp-go-btn__face, .mp-nav-btn__icon,
   .mp-bottomnav) that the HUD has never emitted, so not one rule
   matched and the interface rendered as unstyled browser buttons.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ROOT TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Safe-area insets (fall back to 0 on non-notched devices) */
  --mp-safe-top: env(safe-area-inset-top, 0px);
  --mp-safe-right: env(safe-area-inset-right, 0px);
  --mp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mp-safe-left: env(safe-area-inset-left, 0px);

  /* Z-index ladder */
  --mp-z-canvas: 0;
  --mp-z-hud: 10;
  --mp-z-modal: 20;

  /* Typography */
  --mp-font: "Satoshi", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --mp-display: "Clash Display", var(--mp-font);
  --mp-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Palette */
  --mp-color-cream: rgba(13, 18, 15, 0.92);
  --mp-color-border: rgba(200, 255, 0, 0.18);
  --mp-color-ink: #f4f7ed;
  --mp-color-ink-muted: rgba(244, 247, 237, 0.62);
  --mp-color-overlay-scrim: rgba(3, 7, 5, 0.76);

  --mp-go-outer: #0a0d0b;
  --mp-go-rim: #e5ff67;
  --mp-go-face-start: #d8ff37;
  --mp-go-face-end: #aee900;
  --mp-go-depth: #5e8200;
  --mp-go-text: #071007;

  --mp-roll-track: rgba(200, 255, 0, 0.12);
  --mp-roll-fill: #c8ff00;
  --mp-roll-fill-end: #7fffd4;

  --mp-focus-ring-color: #c8ff00;
  --mp-focus-ring-width: 3px;

  /* Motion */
  --mp-ease-standard: cubic-bezier(0.33, 1, 0.68, 1);
  --mp-transition-fast: 150ms;
  --mp-transition-medium: 250ms;

  /* Touch targets */
  --mp-touch-min: 48px;
}

/* ---------------------------------------------------------------------
   2. CANVAS + HUD FRAME
   --------------------------------------------------------------------- */
.mp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--mp-z-canvas);
}

.mp-hud {
  position: absolute;
  inset: 0;
  z-index: var(--mp-z-hud);
  font-family: var(--mp-font);
  color: var(--mp-color-ink);
  /* The HUD is a frame around the board: only its controls take input. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.mp-hud button,
.mp-hud .mp-panel {
  pointer-events: auto;
}

.mp-hud button:focus-visible,
.mp-hud a:focus-visible {
  outline: var(--mp-focus-ring-width) solid var(--mp-focus-ring-color);
  outline-offset: 3px;
}

.mp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   3. TOP BAR
   --------------------------------------------------------------------- */
.mp-hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--mp-top-bar-height, 64px) + var(--mp-safe-top));
  padding: var(--mp-safe-top) max(14px, var(--mp-safe-right)) 0
    max(14px, var(--mp-safe-left));
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  background: var(--mp-color-cream);
  border: 1px solid var(--mp-color-border);
  box-shadow: 0 1px 0 rgba(200, 255, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-chip-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

.mp-chip-level .mp-chip-icon {
  background: linear-gradient(180deg, #dfff68, #8ebd00);
  color: #071007;
}

.mp-chip-cash .mp-chip-icon {
  background: linear-gradient(180deg, #95ffe1, #21a77e);
  color: #071007;
}

/* Cash is the number players watch; give it a little more presence. */
.mp-chip-cash {
  font-size: 16px;
}

.mp-icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mp-color-border);
  border-radius: 50%;
  background: var(--mp-color-cream);
  box-shadow: 0 1px 0 rgba(200, 255, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.28);
  color: var(--mp-color-ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--mp-transition-fast) var(--mp-ease-standard);
}

.mp-icon-button:active {
  transform: translateY(2px);
}

.mp-menu-button {
  margin-left: auto;
}

/* ---------------------------------------------------------------------
   4. BOTTOM BAR
   --------------------------------------------------------------------- */
.mp-hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: calc(var(--mp-bottom-bar-height, 88px) + var(--mp-safe-bottom));
  padding: 0 max(10px, var(--mp-safe-right)) 0 max(10px, var(--mp-safe-left));
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: end;
  gap: 8px;
  background: linear-gradient(180deg, rgba(7, 12, 9, 0) 5%, rgba(7, 12, 9, 0.16) 72%, rgba(7, 12, 9, 0.3) 100%);
}

/* GO overlaps the nav bar, the way a physical board-game button would. */
.mp-go-button {
  order: 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--mp-go-size, 64px);
  height: var(--mp-go-size, 64px);
  margin-bottom: -14px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--mp-go-face-start), var(--mp-go-face-end));
  box-shadow:
    0 0 0 5px var(--mp-go-rim),
    0 0 0 9px var(--mp-go-outer),
    0 7px 0 var(--mp-go-depth),
    0 16px 34px rgba(145, 202, 0, 0.25);
  color: var(--mp-go-text);
  font: inherit;
  cursor: pointer;
  transition: transform var(--mp-transition-fast) var(--mp-ease-standard),
    box-shadow var(--mp-transition-fast) var(--mp-ease-standard),
    filter var(--mp-transition-fast) var(--mp-ease-standard);
}

.mp-go-button:hover {
  transform: translateY(-2px);
}

.mp-go-button:active {
  transform: translateY(5px);
  box-shadow:
    0 0 0 5px var(--mp-go-rim),
    0 0 0 9px var(--mp-go-outer),
    0 2px 0 var(--mp-go-depth),
    0 8px 16px rgba(20, 16, 6, 0.4);
}

.mp-go-button[disabled],
.mp-go-button[aria-disabled="true"] {
  filter: grayscale(0.65) brightness(0.82);
  cursor: default;
  transform: none;
}

.mp-go-label {
  font-size: calc(var(--mp-go-size, 64px) * 0.28);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: none;
}

.mp-go-arrow {
  font-size: calc(var(--mp-go-size, 64px) * 0.17);
  line-height: 1;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------
   5. ROLL METER
   --------------------------------------------------------------------- */
.mp-roll-meter {
  order: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--mp-color-cream);
  border: 1px solid var(--mp-color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-roll-track {
  width: clamp(70px, 22vw, 132px);
  height: 7px;
  border-radius: 999px;
  background: var(--mp-roll-track);
  overflow: hidden;
}

.mp-roll-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mp-roll-fill), var(--mp-roll-fill-end));
  transition: width var(--mp-transition-medium) var(--mp-ease-standard);
}

.mp-roll-timer {
  color: var(--mp-color-ink-muted);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   6. BOTTOM NAV
   --------------------------------------------------------------------- */
.mp-nav {
  order: 3;
  display: grid;
  /* A GUTTER FOR THE GO BUTTON, NOT A COLLISION.
     GO is centred and overlaps the nav by design, but with four equal columns
     it sat squarely on top of the middle two. On a phone-width nav those two
     buttons -- BOARD, which is the only way to zoom out and see the whole
     board, and DEEDS, which is the only way to reach the Build controls --
     were completely unreachable. The middle column is now empty space the
     circle can own. */
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr)
    calc(var(--mp-go-size, 64px) + 30px)
    minmax(0, 1fr) minmax(0, 1fr);
  width: min(460px, 100%);
  padding: 14px 6px calc(6px + var(--mp-safe-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--mp-color-cream);
  border: 1px solid var(--mp-color-border);
  border-bottom: none;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
}

/* Skip the gutter: buttons three and four sit to the right of it. */
.mp-nav-button:nth-child(3) { grid-column: 4; }
.mp-nav-button:nth-child(4) { grid-column: 5; }

.mp-nav-button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: var(--mp-touch-min);
  padding: 6px 2px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--mp-color-ink-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: color var(--mp-transition-fast) var(--mp-ease-standard),
    background var(--mp-transition-fast) var(--mp-ease-standard);
}

.mp-nav-button:hover {
  background: rgba(147, 126, 82, 0.1);
}

.mp-nav-button.is-active {
  color: #c8ff00;
  background: rgba(200, 255, 0, 0.1);
}

/* Icons are CSS masks, not asset files: the export ships no HUD sprites,
   and a missing <img> would leave four broken-image boxes in the nav. */
.mp-nav-icon {
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mp-icon-board {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z'/%3E%3C/svg%3E");
}

.mp-icon-dice {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 4a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 8 7Zm8 0a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 16 7ZM8 13.8a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm8 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 4a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 8 7Zm8 0a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 16 7ZM8 13.8a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm8 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z'/%3E%3C/svg%3E");
}

.mp-icon-building {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V8l8-4 8 4v13h-5v-5h-6v5H4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V8l8-4 8 4v13h-5v-5h-6v5H4Z'/%3E%3C/svg%3E");
}

.mp-icon-chart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V10h4v10H4Zm6 0V4h4v16h-4Zm6 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V10h4v10H4Zm6 0V4h4v16h-4Zm6 0v-7h4v7h-4Z'/%3E%3C/svg%3E");
}

.mp-nav-label {
  line-height: 1;
}

/* ---------------------------------------------------------------------
   7. TILE PANEL
   --------------------------------------------------------------------- */
.mp-tile-panel {
  position: absolute;
  left: 50%;
  /* CLEAR THE GO BUTTON. The roll button floats above the bottom bar and is
     also centred, so at the old offset it sat directly on top of this panel's
     body text -- "Available from the bank for $69" was legible right up to the
     dollar amount, which is the only part that matters. Adding the button's own
     height moves the panel above it instead of under it. */
  bottom: calc(
    var(--mp-bottom-bar-height, 88px) + var(--mp-safe-bottom)
    + var(--mp-go-size, 64px) + 34px
  );
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 28px));
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: var(--mp-color-cream);
  border: 1px solid var(--mp-color-border);
  border-top: 5px solid var(--mp-panel-accent, var(--mp-go-face-end));
  box-shadow: 0 18px 40px rgba(20, 16, 6, 0.38);
}

.mp-tile-panel[hidden] {
  display: none;
}

.mp-panel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker close"
    "title  close";
  align-items: start;
  gap: 0 10px;
}

.mp-panel-kicker {
  grid-area: kicker;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--mp-panel-accent, var(--mp-go-face-end));
}

.mp-panel-header .mp-panel-title {
  grid-area: title;
}

.mp-panel-close {
  grid-area: close;
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.mp-tile-panel .mp-panel-body {
  text-align: left;
}

/* ---------------------------------------------------------------------
   8. EVENT / DECISION PANEL

   MathopolyHUD builds this panel in code (.mp-panel + .mp-panel-*).
   showDecision() adds .mp-panel-actions with two buttons.
   --------------------------------------------------------------------- */
.mp-event-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--mp-z-modal);
  width: min(380px, calc(100vw - 32px));
  padding: 24px 22px;
  border-radius: 24px;
  background: var(--mp-color-cream);
  border: 1px solid var(--mp-color-border);
  border-top: 5px solid var(--mp-panel-accent, var(--mp-go-face-end));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(22px);
  text-align: center;
}

.mp-event-panel[hidden] {
  display: none;
}

.mp-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  font-family: var(--mp-display);
}

.mp-panel-body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mp-color-ink-muted);
}

.mp-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.mp-panel-actions > .mp-panel-action {
  flex: 1 1 0;
  margin-top: 0;
}

.mp-panel-action {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 18px;
  border: none;
  border-radius: 14px;
  background: #c8ff00;
  color: #071007;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--mp-transition-fast) var(--mp-ease-standard),
    filter var(--mp-transition-fast) var(--mp-ease-standard);
}

.mp-panel-action:hover {
  filter: brightness(1.06);
}

.mp-panel-action:active {
  transform: translateY(1px);
}

.mp-panel-action--ghost {
  background: transparent;
  color: var(--mp-color-ink-muted);
  box-shadow: inset 0 0 0 2px var(--mp-color-border);
}

.mp-panel-action--ghost:hover {
  filter: none;
  color: var(--mp-color-ink);
  box-shadow: inset 0 0 0 2px var(--mp-go-face-end);
}

/* ---------------------------------------------------------------------
   9. STUDY GATE
   --------------------------------------------------------------------- */
.mp-event-panel.mp-study-panel {
  width: min(680px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: clamp(20px, 3vw, 32px);
  text-align: left;
}

.mp-study-eyebrow,
.mp-study-roll {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mp-study-eyebrow { color: var(--mp-color-ink-muted); }
.mp-study-roll { margin-top: 9px; color: var(--mp-panel-accent); }

.mp-study-question {
  margin: 20px 0 0;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.28;
}

.mp-study-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.mp-study-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 11px 13px;
  border: 2px solid rgba(200, 255, 0, 0.14);
  border-radius: 15px;
  background: #111a15;
  color: var(--mp-color-ink);
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.mp-study-choice:not(:disabled):hover { border-color: var(--mp-panel-accent); }
.mp-study-choice.is-correct { border-color: #c8ff00; background: #182610; }
.mp-study-choice.is-wrong { border-color: #ff655c; background: #291412; }
.mp-study-choice:disabled { opacity: 1; cursor: default; }

.mp-study-choice-key {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(57, 174, 235, 0.12);
  color: #167eaf;
  font-weight: 950;
}

.mp-study-feedback {
  margin-top: 18px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(42, 36, 16, 0.055);
}

.mp-study-feedback > strong { font-size: 16px; }
.mp-study-feedback > p { margin: 7px 0 0; color: var(--mp-color-ink-muted); font-size: 14px; line-height: 1.5; }
.mp-study-feedback.is-correct > strong { color: #238651; }
.mp-study-feedback.is-wrong > strong { color: #b73d31; }

/* ---------------------------------------------------------------------
   10. PRE-GAME SETUP
   --------------------------------------------------------------------- */
.mp-setup-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(18px, 3vw, 42px);
  background:
    radial-gradient(circle at 82% 12%, rgba(200, 255, 0, 0.15), transparent 27%),
    radial-gradient(circle at 10% 88%, rgba(87, 255, 210, 0.1), transparent 31%),
    linear-gradient(145deg, #050705, #0b110d 56%, #07100b);
  color: #f4f7ed;
  font-family: var(--mp-font);
  transition: opacity 200ms ease, transform 200ms ease;
}

.mp-setup-layer::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.mp-setup-layer.is-leaving { opacity: 0; transform: scale(1.015); }

.mp-setup-shell {
  box-sizing: border-box;
  position: relative;
  width: min(1120px, 100%);
  max-height: min(900px, calc(100dvh - 36px));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  grid-template-areas:
    "top top"
    "hero controls"
    "topics topics"
    "avatars avatars"
    "footer footer";
  gap: clamp(18px, 2.2vw, 30px) clamp(26px, 4vw, 64px);
  padding: clamp(22px, 3.6vw, 52px);
  border: 1px solid rgba(200, 255, 0, 0.18);
  border-radius: clamp(24px, 3vw, 38px);
  background: rgba(8, 12, 9, 0.82);
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
}

.mp-setup-top { grid-area: top; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mp-setup-lockup { display: flex; align-items: center; gap: 11px; font: 700 13px/1 var(--mp-mono); letter-spacing: 0.08em; }
.mp-setup-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #c8ff00; color: #050805; font: 800 18px/1 var(--mp-display); transform: skew(-6deg); }
.mp-setup-edition { color: rgba(244, 247, 237, 0.5); font: 600 10px/1 var(--mp-mono); letter-spacing: 0.14em; }

.mp-setup-hero { grid-area: hero; align-self: center; }
.mp-setup-hero > p:first-child { margin: 0 0 13px; color: #c8ff00; font: 700 11px/1.2 var(--mp-mono); letter-spacing: 0.14em; }
.mp-setup-hero h1 { max-width: 12ch; margin: 0; font: 600 clamp(38px, 5.3vw, 72px)/0.94 var(--mp-display); letter-spacing: -0.048em; }
.mp-setup-hero h1:focus { outline: none; }
.mp-setup-hero > p:last-child { max-width: 52ch; margin: 19px 0 0; color: rgba(244, 247, 237, 0.62); font-size: 15px; line-height: 1.55; }

.mp-setup-controls { grid-area: controls; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: center; }
.mp-setup-field { min-width: 0; display: grid; gap: 8px; }
.mp-setup-field > span { color: rgba(244, 247, 237, 0.52); font: 700 10px/1 var(--mp-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.mp-setup-field select {
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(244, 247, 237, 0.12);
  border-radius: 13px;
  background: #111713;
  color: #f4f7ed;
  font: 650 14px/1 var(--mp-font);
  color-scheme: dark;
}
.mp-setup-field select:focus-visible { outline: 2px solid #c8ff00; outline-offset: 2px; }

.mp-setup-section { grid-area: topics; }
.mp-setup-section + .mp-setup-section { grid-area: avatars; }
.mp-setup-section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.mp-setup-section-heading h2 { margin: 0; font: 600 17px/1 var(--mp-display); }
.mp-setup-section-heading span { color: rgba(244, 247, 237, 0.45); font: 600 10px/1 var(--mp-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.mp-setup-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.mp-setup-topic {
  min-height: 44px;
  border: 1px solid rgba(244, 247, 237, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 247, 237, 0.5);
  font: 700 12px/1 var(--mp-font);
  cursor: pointer;
}
.mp-setup-topic.is-selected { border-color: rgba(200, 255, 0, 0.42); background: rgba(200, 255, 0, 0.09); color: #dcff58; }

.mp-setup-avatars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.mp-setup-avatar {
  min-width: 0;
  min-height: 78px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 9px 4px;
  border: 1px solid rgba(244, 247, 237, 0.1);
  border-radius: 14px;
  background: #0e1410;
  color: rgba(244, 247, 237, 0.54);
  cursor: pointer;
}
.mp-setup-avatar > span { font: 500 27px/1 var(--mp-display); }
.mp-setup-avatar small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 650 9px/1 var(--mp-font); white-space: nowrap; }
.mp-setup-avatar.is-selected { border-color: #c8ff00; background: #17210d; color: #e6ff84; box-shadow: inset 0 0 0 1px rgba(200, 255, 0, 0.22), 0 9px 30px rgba(126, 177, 0, 0.12); }

.mp-setup-footer { grid-area: footer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 2px; }
.mp-setup-footer p { margin: 0; color: rgba(244, 247, 237, 0.52); font: 600 10px/1.5 var(--mp-mono); letter-spacing: 0.06em; }
.mp-setup-footer strong { color: #c8ff00; }
.mp-setup-play {
  min-width: 250px;
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 15px;
  background: #c8ff00;
  box-shadow: 0 7px 0 #638100, 0 18px 42px rgba(152, 213, 0, 0.22);
  color: #050805;
  font: 750 13px/1 var(--mp-mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.mp-setup-play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mp-setup-play:active { transform: translateY(5px); box-shadow: 0 2px 0 #638100, 0 9px 20px rgba(152, 213, 0, 0.18); }

/* ---------------------------------------------------------------------
   11. QUESTION EXPERIENCE
   --------------------------------------------------------------------- */
.mp-question-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(14px, 3vw, 36px);
  background:
    radial-gradient(circle at 84% 10%, rgba(200, 255, 0, 0.11), transparent 25%),
    rgba(3, 7, 5, 0.79);
  backdrop-filter: blur(16px) saturate(0.8);
  color: #f4f7ed;
  font-family: var(--mp-font);
  animation: mp-question-in 180ms ease-out both;
}

@keyframes mp-question-in { from { opacity: 0; } to { opacity: 1; } }

.mp-question-card {
  box-sizing: border-box;
  width: min(940px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: clamp(21px, 3.4vw, 44px);
  border: 1px solid rgba(200, 255, 0, 0.2);
  border-radius: clamp(22px, 3vw, 34px);
  background: linear-gradient(145deg, rgba(15, 21, 17, 0.98), rgba(7, 11, 8, 0.98));
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mp-question-card * { box-sizing: border-box; min-width: 0; }

.mp-question-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mp-question-brand { font: 700 11px/1 var(--mp-mono); letter-spacing: 0.11em; color: rgba(244, 247, 237, 0.54); }
.mp-question-badge { padding: 8px 11px; border: 1px solid rgba(200, 255, 0, 0.3); border-radius: 999px; background: rgba(200, 255, 0, 0.08); color: #dfff66; font: 700 10px/1 var(--mp-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.mp-question-meta { display: flex; gap: 12px; align-items: center; margin-top: clamp(24px, 4vw, 42px); color: #c8ff00; font: 700 10px/1 var(--mp-mono); letter-spacing: 0.12em; }
.mp-question-timer { margin-left: auto; padding: 7px 9px; border-radius: 8px; background: rgba(200, 255, 0, 0.1); font-variant-numeric: tabular-nums; }
.mp-question-stem { margin-top: 15px; font: 500 clamp(21px, 3vw, 34px)/1.24 var(--mp-display); letter-spacing: -0.018em; }
/* THE DIAGRAM THE QUESTION IS ABOUT.
   js/figures.js draws light ink on a DARK ground -- INK #c9c9c1, TXT #d9d9d2,
   axis and grid lines in rgba(255,255,255,...) -- because every other place
   that renders it (css/style.css's .q-fig) gives it one explicitly. This card
   used to guess the opposite and paint itself near-white, which put light
   text and light gridlines on a near-white background: not broken, just
   invisible, which is what "figures are all white" actually was. Capped in
   height so a tall graph cannot push the answers off screen. */
.mp-question-figure {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 14px;
  /* TRANSPARENT, NOT ITS OWN PANEL. The ink in js/figures.js is light, so it
     needs a dark ground -- but #0a0a09 against the card's own near-black
     gradient read as a separate box floating inside the question rather than
     part of it. Inheriting the card keeps the contrast the ink needs and
     loses the seam. Tables carry their own borders, so they still read as
     tables with nothing behind them. */
  background: transparent;
  display: grid;
  place-items: center;
  overflow-x: auto;
}
.mp-question-figure svg {
  max-width: 100%;
  max-height: min(34vh, 320px);
  height: auto;
}
/* TABLE QUESTIONS HAD NO STYLING AT ALL. figures.js's B.table() returns a
   bare <table class="q-table">, and css/style.css is the only file that ever
   defined that class -- Mathopoly never loads css/style.css, so the markup
   landed in the DOM correctly and rendered with whatever it inherited: pale
   text on the pale card above, on a page with no border or shading to say a
   table was even there. That read as "tables don't load"; they were loading,
   just as blank as the SVGs sitting in the same wrapper. */
.mp-question-figure .q-table {
  border-collapse: collapse;
  font: 600 14px/1.4 var(--mp-mono);
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
}
.mp-question-figure .q-table th,
.mp-question-figure .q-table td {
  border: 1px solid rgba(200, 255, 0, 0.22);
  padding: 9px 18px;
  text-align: center;
}
.mp-question-figure .q-table th {
  color: #c8ff00;
  background: rgba(200, 255, 0, 0.07);
  font-weight: 700;
}
.mp-question-figure .q-table td {
  color: #f4f7ed;
}

/* A PASSAGE IS NOT A ONE-LINE EQUATION.
   The display face at 34px is right for "solve for x" and catastrophic for the
   200-word Reading passages the English/Reading tracks serve: it overflowed the
   card into an unreadable wall of text with the answers pushed off screen.
   Long stems drop to a reading size, gain line height, and scroll inside their
   own box so the choices stay put. */
.mp-question-stem.is-passage {
  font: 400 clamp(15px, 1.5vw, 18px)/1.6 var(--mp-body, var(--mp-display));
  letter-spacing: 0;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding-right: 10px;
  white-space: pre-wrap;
}
.mp-question-stem.is-passage p { margin: 0 0 0.85em; }
.mp-question-stem.is-passage::-webkit-scrollbar { width: 6px; }
.mp-question-stem.is-passage::-webkit-scrollbar-thumb { background: rgba(200, 255, 0, 0.28); border-radius: 3px; }
.mp-question-stem .math-prose { margin: 0; }
.mp-question-stem .katex { font-size: 1.02em; }

.mp-question-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: clamp(24px, 3vw, 34px); }
.mp-question-choice {
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(244, 247, 237, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.026);
  color: #f4f7ed;
  font: 600 15px/1.35 var(--mp-font);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.mp-question-choice:not(:disabled):hover { border-color: rgba(200, 255, 0, 0.55); background: rgba(200, 255, 0, 0.055); transform: translateY(-1px); }
.mp-question-choice.is-correct { border-color: #c8ff00; background: rgba(200, 255, 0, 0.11); }
.mp-question-choice.is-wrong { border-color: #ff655c; background: rgba(255, 72, 65, 0.1); }
.mp-question-choice:disabled { opacity: 0.7; cursor: default; }
.mp-question-choice.is-correct:disabled, .mp-question-choice.is-wrong:disabled { opacity: 1; }
.mp-question-choice-key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(200, 255, 0, 0.1); color: #dfff66; font: 800 12px/1 var(--mp-mono); }
.mp-question-choice-copy .math-prose { margin: 0; }

.mp-question-feedback { margin-top: 18px; padding: 18px; border-radius: 17px; border: 1px solid rgba(244, 247, 237, 0.1); background: rgba(255, 255, 255, 0.025); }
.mp-question-feedback.is-correct { border-color: rgba(200, 255, 0, 0.28); }
.mp-question-feedback.is-wrong { border-color: rgba(255, 101, 92, 0.25); }
.mp-question-verdict { display: inline-flex; color: #c8ff00; font: 800 11px/1 var(--mp-mono); letter-spacing: 0.12em; }
.mp-question-feedback.is-wrong .mp-question-verdict { color: #ff8b84; }
.mp-question-reward { margin: 9px 0 15px; font: 600 19px/1.25 var(--mp-display); }
.mp-question-solution { max-height: 210px; overflow: auto; color: rgba(244, 247, 237, 0.7); font-size: 13px; line-height: 1.48; }
.mp-question-solution .solution-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mp-question-solution .solution-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.mp-question-solution .solution-step-number { color: #c8ff00; font: 700 10px/1.5 var(--mp-mono); }
.mp-question-solution .solution-step-copy > b { display: block; color: #f4f7ed; }
.mp-question-solution .math-prose { margin: 2px 0 0; }
.mp-question-continue { width: 100%; min-height: 54px; margin-top: 18px; border: 0; border-radius: 14px; background: #c8ff00; color: #071007; font: 800 12px/1 var(--mp-mono); letter-spacing: 0.09em; cursor: pointer; }
.mp-question-continue:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------------
   12. GAME COMMAND CENTER

   These panels are intentionally HTML overlays. The board stays a single
   WebGL scene while roll strategy, portfolio actions, attacks and progress
   remain crisp, keyboard reachable and legible on small screens.
   --------------------------------------------------------------------- */
.mp-go-cluster {
  order: 2;
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: calc(var(--mp-go-size, 64px) + 34px);
  margin-bottom: -19px;
}

.mp-go-cluster .mp-go-button {
  order: initial;
  margin-bottom: 0;
}

.mp-go-multiplier {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  min-height: 28px;
  margin-top: -2px;
  padding: 4px 10px;
  border: 2px solid #0a0d0b;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6ffe0, #d8ff58);
  box-shadow: 0 4px 0 #6c8d08, 0 10px 24px rgba(0, 0, 0, 0.28);
  color: #071007;
  font: 900 12px/1 var(--mp-mono);
  cursor: pointer;
  transition: transform var(--mp-transition-fast) var(--mp-ease-standard),
    filter var(--mp-transition-fast) var(--mp-ease-standard);
}

.mp-go-multiplier:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mp-go-multiplier:active { transform: translateY(2px); }
.mp-go-multiplier-arrow { font-size: 9px; opacity: 0.65; }

.mp-command-layer {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: end center;
  padding: max(72px, calc(var(--mp-safe-top) + 64px)) 18px
    max(112px, calc(var(--mp-safe-bottom) + 102px));
  background: linear-gradient(180deg, rgba(3, 7, 5, 0.04), rgba(3, 7, 5, 0.52));
  font-family: var(--mp-font);
  color: var(--mp-color-ink);
  pointer-events: auto;
}

.mp-command-panel {
  box-sizing: border-box;
  width: min(760px, 100%);
  max-height: min(650px, calc(100dvh - 190px));
  overflow: auto;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(200, 255, 0, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0, rgba(200, 255, 0, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(15, 22, 17, 0.98), rgba(6, 10, 7, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(26px);
  scrollbar-color: rgba(200, 255, 0, 0.4) transparent;
}

.mp-command-panel *,
.mp-command-panel *::before,
.mp-command-panel *::after { box-sizing: border-box; }

.mp-command-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.mp-command-kicker {
  display: block;
  margin-bottom: 8px;
  color: #c8ff00;
  font: 750 10px/1 var(--mp-mono);
  letter-spacing: 0.14em;
}

.mp-command-title {
  margin: 0;
  color: #f6f8f0;
  font: 600 clamp(24px, 3.2vw, 38px)/1.04 var(--mp-display);
  letter-spacing: -0.035em;
}

.mp-command-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 247, 237, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(244, 247, 237, 0.72);
  font: 400 24px/1 var(--mp-font);
  cursor: pointer;
}

.mp-command-close:hover { border-color: rgba(200, 255, 0, 0.5); color: #c8ff00; }
.mp-command-body { display: grid; gap: 18px; }
.mp-command-intro { margin: 0; color: rgba(244, 247, 237, 0.64); font-size: 14px; line-height: 1.55; }

.mp-roll-balance,
.mp-portfolio-summary,
.mp-stats-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.mp-stats-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mp-command-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(244, 247, 237, 0.09);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.027);
}

.mp-command-metric > strong {
  display: block;
  overflow: hidden;
  color: #f6f8f0;
  font: 650 clamp(18px, 2.4vw, 27px)/1 var(--mp-display);
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.mp-command-metric > span {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(244, 247, 237, 0.45);
  font: 700 9px/1.2 var(--mp-mono);
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-multiplier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mp-multiplier-card {
  min-height: 158px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(244, 247, 237, 0.12);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  color: #f4f7ed;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms var(--mp-ease-standard), border-color 150ms ease,
    background 150ms ease;
}

.mp-multiplier-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: rgba(200, 255, 0, 0.58);
  background: rgba(200, 255, 0, 0.055);
}

.mp-multiplier-card.is-selected {
  border-color: #c8ff00;
  box-shadow: inset 0 0 0 1px #c8ff00, 0 14px 34px rgba(164, 218, 0, 0.09);
}

.mp-multiplier-card.is-locked { opacity: 0.38; cursor: not-allowed; }
.mp-multiplier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mp-multiplier-value { color: #dfff66; font: 650 31px/1 var(--mp-display); }
.mp-multiplier-cost { color: rgba(244, 247, 237, 0.5); font: 700 9px/1 var(--mp-mono); }
.mp-multiplier-difficulty { margin-top: auto; color: #8cffe0; font: 750 9px/1 var(--mp-mono); letter-spacing: 0.08em; }
.mp-multiplier-description { color: rgba(244, 247, 237, 0.58); font-size: 12px; line-height: 1.35; }

.mp-portfolio-list,
.mp-topic-report { display: grid; gap: 9px; }

.mp-property-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 15px 15px 15px 19px;
  border: 1px solid rgba(244, 247, 237, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.mp-property-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mp-row-accent, #c8ff00);
}

.mp-property-copy { min-width: 0; display: grid; gap: 5px; }
.mp-property-name { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mp-property-meta { color: rgba(244, 247, 237, 0.52); font-size: 11px; line-height: 1.35; }
.mp-property-alert { color: #ff9d95; font: 700 9px/1.2 var(--mp-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.mp-property-build,
.mp-command-secondary,
.mp-attack-action {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(200, 255, 0, 0.32);
  border-radius: 12px;
  background: rgba(200, 255, 0, 0.1);
  color: #dfff66;
  font: 750 10px/1 var(--mp-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.mp-property-build:hover:not(:disabled),
.mp-command-secondary:hover,
.mp-attack-action:hover:not(:disabled) { background: #c8ff00; color: #071007; }
.mp-property-build:disabled,
.mp-attack-action:disabled { opacity: 0.38; cursor: not-allowed; }
.mp-empty-state { padding: 40px 24px; border: 1px dashed rgba(200, 255, 0, 0.22); border-radius: 18px; color: rgba(244, 247, 237, 0.55); text-align: center; }

.mp-topic-row {
  display: grid;
  grid-template-columns: minmax(124px, 0.72fr) minmax(100px, 1fr) 48px;
  align-items: center;
  gap: 14px;
  min-height: 48px;
}

.mp-topic-label { display: grid; gap: 4px; }
.mp-topic-label strong { font-size: 13px; }
.mp-topic-label span { color: rgba(244, 247, 237, 0.45); font-size: 10px; }
.mp-topic-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(244, 247, 237, 0.08); }
.mp-topic-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c8ff00, #7fffd4); }
.mp-topic-percent { color: #dfff66; font: 750 11px/1 var(--mp-mono); text-align: right; }

.mp-mini-game-layer { z-index: 96; place-items: center; padding-bottom: 18px; background: rgba(2, 5, 3, 0.78); backdrop-filter: blur(12px); }
.mp-attack-panel,
.mp-heist-panel,
.mp-chest-panel { width: min(560px, 100%); max-height: calc(100dvh - 36px); }
.mp-attack-grid { display: grid; gap: 10px; margin-top: 20px; }
.mp-attack-card { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; align-items: center; gap: 9px; padding: 13px; border: 1px solid rgba(244, 247, 237, 0.1); border-radius: 15px; background: rgba(255, 255, 255, 0.025); }
.mp-attack-danger { border-color: rgba(255, 101, 92, 0.35); background: rgba(255, 101, 92, 0.08); color: #ff9d95; }
.mp-command-secondary { width: 100%; margin-top: 14px; border-color: rgba(244, 247, 237, 0.14); background: transparent; color: rgba(244, 247, 237, 0.6); }

.mp-vault-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.mp-vault-tile {
  aspect-ratio: 1;
  min-height: 78px;
  border: 1px solid rgba(200, 255, 0, 0.28);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, #222c25, #0c120e);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22), 0 7px 18px rgba(0, 0, 0, 0.25);
  color: #c8ff00;
  font: 650 clamp(20px, 4vw, 34px)/1 var(--mp-display);
  cursor: pointer;
}
.mp-vault-tile:hover:not(.is-open) { border-color: #c8ff00; transform: translateY(-2px); }
.mp-vault-tile.is-open { background: linear-gradient(145deg, #dfff66, #7fffd4); color: #071007; }

.mp-chest-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.mp-chest-action { display: grid; place-items: center; gap: 9px; min-height: 128px; border: 1px solid rgba(200, 255, 0, 0.35); border-radius: 20px; background: rgba(200, 255, 0, 0.07); color: #f4f7ed; cursor: pointer; }
.mp-chest-action strong { color: #dfff66; font: 650 30px/1 var(--mp-display); }
.mp-chest-action span { font: 750 10px/1 var(--mp-mono); letter-spacing: 0.08em; }
.mp-chest-action:hover:not(:disabled) { background: rgba(200, 255, 0, 0.14); transform: translateY(-2px); }
.mp-chest-action:disabled { opacity: 0.38; cursor: not-allowed; }
.mp-chest-shield strong { color: #7fffd4; }

/* ---------------------------------------------------------------------
   13. RESPONSIVE + MOTION
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .mp-hud-top {
    padding-left: 22px;
    padding-right: 22px;
  }

  .mp-nav {
    border-radius: 20px;
    border-bottom: 1px solid var(--mp-color-border);
    margin-bottom: 14px;
  }

  .mp-hud-bottom {
    gap: 10px;
  }

  .mp-command-layer {
    place-items: center;
    padding: 78px 24px 118px;
  }
}

@media (max-width: 620px) {
  .mp-hud-top { gap: 7px; padding-left: max(9px, var(--mp-safe-left)); padding-right: max(9px, var(--mp-safe-right)); }
  .mp-chip { height: 35px; padding: 0 10px 0 8px; font-size: 13px; }
  .mp-chip-icon { width: 20px; height: 20px; }
  .mp-icon-button { width: 35px; height: 35px; }
  .mp-hud-bottom { gap: 6px; }
  .mp-roll-meter { height: 24px; padding: 0 9px; gap: 7px; font-size: 10px; }
  .mp-roll-track { width: clamp(54px, 20vw, 88px); }
  .mp-nav { padding-top: 12px; }
  .mp-go-cluster { margin-bottom: -17px; }
  .mp-command-layer { place-items: stretch; padding: 0; background: rgba(3, 7, 5, 0.84); }
  .mp-command-panel { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; padding: max(22px, calc(var(--mp-safe-top) + 14px)) 16px max(30px, calc(var(--mp-safe-bottom) + 20px)); }
  .mp-command-header { margin-bottom: 16px; }
  .mp-command-title { font-size: clamp(27px, 8vw, 36px); }
  .mp-roll-balance, .mp-portfolio-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mp-stats-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-command-metric { padding: 11px 9px; }
  .mp-command-metric > strong { font-size: clamp(17px, 5vw, 23px); }
  .mp-command-metric > span { font-size: 7.5px; letter-spacing: 0.055em; }
  .mp-multiplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-multiplier-card { min-height: 138px; padding: 14px; }
  .mp-property-row { grid-template-columns: minmax(0, 1fr); }
  .mp-property-build { width: 100%; }
  .mp-topic-row { grid-template-columns: minmax(104px, 0.85fr) minmax(74px, 1fr) 40px; gap: 9px; }
  .mp-attack-card { grid-template-columns: 1fr 1fr; }
  .mp-attack-card > strong { grid-column: 1 / -1; }
  .mp-attack-action { padding: 0 9px; font-size: 8px; }
  .mp-chest-actions { grid-template-columns: 1fr; }
  .mp-chest-action { min-height: 102px; }
  .mp-study-choices { grid-template-columns: 1fr; }
  .mp-event-panel.mp-study-panel { top: 48%; }
  .mp-setup-layer { padding: 0; place-items: stretch; }
  .mp-setup-shell { min-height: 100dvh; max-height: none; grid-template-columns: 1fr; grid-template-areas: "top" "hero" "controls" "topics" "avatars" "footer"; border: 0; border-radius: 0; padding: 22px 18px 30px; gap: 22px; }
  .mp-setup-top { padding-left: 44px; }
  .mp-setup-edition { display: none; }
  .mp-setup-hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .mp-setup-hero > p:last-child { font-size: 14px; }
  .mp-setup-controls { grid-template-columns: 1fr 1fr; }
  .mp-setup-topics { grid-template-columns: repeat(2, 1fr); }
  .mp-setup-topic:last-child { grid-column: 1 / -1; }
  .mp-setup-avatars { grid-template-columns: repeat(4, 1fr); }
  .mp-setup-footer { align-items: stretch; flex-direction: column; }
  .mp-setup-play { width: 100%; min-width: 0; }
  .mp-question-layer { padding: 0; place-items: stretch; }
  .mp-question-card { min-height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: 22px 17px 28px; }
  .mp-question-choices { grid-template-columns: 1fr; }
  .mp-question-stem { font-size: clamp(21px, 6.4vw, 29px); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-go-button,
  .mp-go-multiplier,
  .mp-icon-button,
  .mp-nav-button,
  .mp-roll-fill,
  .mp-panel-action,
  .mp-multiplier-card,
  .mp-vault-tile,
  .mp-chest-action {
    transition: none;
  }
}

/* =====================================================================
   CLASSIC EDITION OVERRIDES — readable state, no arcade energy strip
   ===================================================================== */
:root {
  --acc: #c8ff00;
  --acc-rgb: 200, 255, 0;
  --bg: #080d0a;
  --text: #f4f7ed;
  --dim: rgba(244,247,237,.58);
  --line: rgba(244,247,237,.13);
  --hot: #ff664d;
  --r: 14px;
}

.mp-turn-status {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--mp-color-border);
  border-radius: 999px;
  background: var(--mp-color-cream);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  font: 750 9px/1 var(--mp-mono);
  letter-spacing: .075em;
  white-space: nowrap;
}
.mp-turn-status-dice { color: #c8ff00; }
.mp-turn-status-copy { color: rgba(244,247,237,.66); }
.mp-go-cluster { width: var(--mp-go-size, 64px); }
.mp-go-label { font-size: calc(var(--mp-go-size, 64px) * .22); letter-spacing: .01em; }
.mp-hud.is-modal-open .mp-hud-bottom,
.mp-hud.is-modal-open .mp-tile-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.mp-event-panel { z-index: 75; top: 46%; }
.mp-auction-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid rgba(200,255,0,.35);
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,.045);
  color: #f4f7ed;
  font: 700 22px/1 var(--mp-mono);
  text-align: center;
}
.mp-auction-input:focus { border-color: #c8ff00; box-shadow: 0 0 0 3px rgba(200,255,0,.13); }

.mp-board-labels {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.mp-space-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(66px, 5.1vw, 92px);
  min-height: 29px;
  padding: 4px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--mp-space-color) 76%, white 12%);
  border-radius: 7px;
  background: rgba(7,12,9,.86);
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 2px 0 var(--mp-space-color);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(5px);
  will-change: transform;
}
.mp-space-marker-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 800 clamp(6px,.46vw,8px)/1.05 var(--mp-font);
  letter-spacing: -.01em;
}
.mp-space-marker-state {
  display: block;
  margin-top: 3px;
  color: #aef9d6;
  font: 800 clamp(5px,.4vw,7px)/1 var(--mp-mono);
  letter-spacing: .035em;
}
.mp-space-marker[data-status="local"] { background: rgba(7,36,35,.92); border-color: #54f4df; }
.mp-space-marker[data-status="local"] .mp-space-marker-state { color: #65ffe8; }
.mp-space-marker[data-status="owned"] .mp-space-marker-state { color: #ffd36e; }
.mp-space-marker[data-status="mortgaged"] { opacity: .68; filter: grayscale(.6); }
.mp-space-marker:focus-visible { outline: 2px solid #c8ff00; outline-offset: 2px; }
#mp-stage:has(.mp-question-layer) .mp-board-labels,
#mp-stage:has(.mp-command-layer) .mp-board-labels { opacity: 0; pointer-events: none; }

.mp-property-actions { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.mp-property-build--secondary { border-color: rgba(244,247,237,.18); background: transparent; color: rgba(244,247,237,.75); }
.mp-rules-card { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(200,255,0,.17); border-radius: 17px; background: rgba(200,255,0,.035); }
.mp-rules-card strong { color: #c8ff00; font: 800 10px/1 var(--mp-mono); letter-spacing: .1em; }
.mp-rules-card p { margin: 0; color: rgba(244,247,237,.64); font-size: 13px; line-height: 1.45; }
.mp-property-row.is-current-player { border-color: rgba(200,255,0,.35); }

.mp-setup-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-setup-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.mp-setup-rule-card { display: grid; gap: 5px; min-height: 86px; padding: 12px; border: 1px solid rgba(244,247,237,.1); border-radius: 13px; background: rgba(255,255,255,.025); }
.mp-setup-rule-card > span { color: #c8ff00; font: 800 8px/1 var(--mp-mono); }
.mp-setup-rule-card > strong { font: 650 17px/1 var(--mp-display); }
.mp-setup-rule-card > small { color: rgba(244,247,237,.52); font-size: 10px; line-height: 1.35; }

/* Embedded calculator, shared with the study pages. */
#calc-dock { position: fixed; right: 0; bottom: 0; z-index: 4800; font-family: var(--mp-font); }
#calc-dock[hidden] { display: none !important; }
#calc-btn { position: fixed; right: 22px; bottom: 118px; z-index: 901; font-family: var(--mp-mono); font-size: 12px; letter-spacing: .14em; color: var(--acc); background: var(--bg); border: 1px solid var(--acc); padding: 12px 18px; cursor: pointer; border-radius: var(--r); transition: background .18s,color .18s,transform .18s; }
body:has(.mp-question-layer) #calc-btn { bottom: 22px; }
#calc-btn:hover,#calc-btn.active { background: var(--acc); color: var(--bg); transform: translateY(-2px); }
body.calc-open #calc-btn { opacity: 0; pointer-events: none; }
#calc-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 902; width: min(var(--calc-width,480px),100vw); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -28px 0 70px rgba(0,0,0,.55); transform: translateX(102%); transition: transform .3s cubic-bezier(.22,.8,.24,1); display:flex; flex-direction:column; color:var(--text); }
#calc-panel.open { transform: translateX(0); }
.calc-resize { position:absolute; z-index:4; top:0; bottom:0; left:-7px; width:14px; cursor:col-resize; touch-action:none; }
.calc-resize::after { content:""; position:absolute; top:50%; left:5px; width:3px; height:58px; border-radius:99px; background:rgba(var(--acc-rgb),.36); transform:translateY(-50%); }
.calc-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.calc-title { font-family:var(--mp-display); font-weight:600; font-size:15px; letter-spacing:.08em; }
.calc-sub { font:500 10.5px/1 var(--mp-mono); color:var(--dim); letter-spacing:.12em; text-transform:uppercase; }
.calc-head-spacer { flex:1; }
.calc-tool { background:none; border:1px solid var(--line); color:var(--text); min-width:34px; height:32px; padding:0 10px; border-radius:10px; cursor:pointer; font:650 9px/1 var(--mp-mono); letter-spacing:.1em; }
.calc-tool:hover { border-color:var(--acc); color:var(--acc); }
#calc-close { width:32px; padding:0; }
#calc-host { flex:1; min-height:0; }
.calc-msg { height:100%; display:grid; place-items:center; text-align:center; font:600 11px/1.5 var(--mp-mono); color:var(--dim); padding:30px; }
@media (min-width:900px) {
  body.calc-open:not(.calc-expanded) #mp-stage { right: var(--calc-width,480px); }
  body.calc-expanded #calc-panel { inset:0; width:100vw; border:0; }
}
@media (max-width:899px) {
  #calc-panel { inset:auto 0 0; width:100%; height:min(48dvh,480px); border-left:0; border-top:1px solid var(--line); transform:translateY(102%); }
  #calc-panel.open { transform:translateY(0); }
  .calc-resize { display:none; }
  body.calc-open:not(.calc-expanded) #mp-stage { bottom:min(48dvh,480px); }
  body.calc-expanded #calc-panel { inset:0; width:100%; height:100dvh; }
}
@media (max-width:620px) {
  .mp-turn-status { max-width: calc(100vw - 20px); overflow: hidden; }
  .mp-turn-status-copy { overflow:hidden; text-overflow:ellipsis; }
  .mp-space-marker { width: 58px; min-height: 25px; padding:3px 4px; }
  .mp-space-marker-name { font-size:5.7px; }
  .mp-space-marker-state { font-size:4.9px; }
  .mp-setup-controls { grid-template-columns: 1fr 1fr; }
  .mp-setup-rule-grid { grid-template-columns: 1fr; }
  .mp-property-actions { grid-template-columns: 1fr; }
  #calc-btn { right:14px; bottom:104px; padding:10px 14px; }
  body:has(.mp-question-layer) #calc-btn { bottom:14px; }
}

/* ==========================================================================
   Title deed card
   --------------------------------------------------------------------------
   The classic Monopoly card shape, in VECTOR's palette. Landing on a property
   used to show one sentence of prose ("Buy it for $180? Rent starts at $14."),
   which is not enough to price a decision. This is.
   ========================================================================== */
.mp-deed {
  --deed-accent: #c8ff00;
  width: 100%;
  border: 1px solid rgba(233, 246, 239, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(18, 24, 20, 0.97), rgba(9, 13, 10, 0.97));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.mp-deed-band {
  background: var(--deed-accent);
  padding: 12px 16px 13px;
  text-align: center;
  /* The colour band is the property's identity, so the text on it has to stay
     legible against eight very different hues -- hence the dark ink and the
     shadow rather than a fixed white. */
  color: #0b1410;
  border-bottom: 2px solid rgba(0, 0, 0, 0.28);
}
.mp-deed-kicker {
  display: block;
  font: 700 9px/1 var(--mp-mono);
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.mp-deed-name {
  margin: 5px 0 0;
  font: 700 clamp(15px, 2vw, 19px)/1.15 var(--mp-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mp-deed-body { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 11px; }

.mp-deed-rents { display: flex; flex-direction: column; gap: 3px; }
.mp-deed-rent {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 7px; border-radius: 6px;
  font: 500 12px/1.35 var(--mp-body, inherit);
  color: rgba(244, 247, 237, 0.82);
}
.mp-deed-rent-label { min-width: 0; }
.mp-deed-rent-value { font: 700 12px/1.35 var(--mp-mono); color: #f4f7ed; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The row the property is actually charging right now. Without this the ladder
   is reference material; with it, it tells you where you stand. */
.mp-deed-rent.is-current { background: rgba(200, 255, 0, 0.1); color: #dfff66; }
.mp-deed-rent.is-current .mp-deed-rent-value { color: #c8ff00; }

.mp-deed-builds {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 9px; border-top: 1px solid rgba(233, 246, 239, 0.1);
}
.mp-deed-build {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 11px/1.4 var(--mp-body, inherit); color: rgba(244, 247, 237, 0.58);
}
.mp-deed-build-label { white-space: nowrap; }
.mp-deed-build-cost {
  font-family: var(--mp-mono); font-variant-numeric: tabular-nums;
  text-align: right;
}

.mp-deed-footer {
  /* COLUMN FLOW, NOT auto-fit. `repeat(auto-fit, minmax(0, 1fr))` reads like
     "as many equal columns as fit" and is not: auto-fit can only count
     repetitions against a definite track size, and `1fr` is flexible, so the
     count resolves to ONE. Price, mortgage and colour set were stacking into a
     single column down the bottom of every card. Column auto-flow lays however
     many metrics there are -- one, two or three -- across a single row. */
  /* minmax(0, 1fr), NOT 1fr. A bare `1fr` is `minmax(auto, 1fr)`, whose floor
     is min-content -- so "COLOUR SET" refused to shrink below its own width,
     pushed the row wider than the card, and produced a horizontal scrollbar
     across the bottom of every deed. Zero as the minimum lets the columns
     share the space they actually have. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  padding-top: 10px; border-top: 1px solid rgba(233, 246, 239, 0.1);
}
.mp-deed-metric { text-align: center; }
.mp-deed-metric-value { display: block; font: 700 15px/1.1 var(--mp-mono); color: #f4f7ed; font-variant-numeric: tabular-nums; }
.mp-deed-metric-label { display: block; margin-top: 3px; font: 700 8px/1 var(--mp-mono); letter-spacing: 0.16em; color: rgba(244, 247, 237, 0.45); }
/* PRICE reads first: bigger, accented, and given its own baseline so it does
   not just look like a wider version of MORTGAGE next to it. */
.mp-deed-metric--emphasis .mp-deed-metric-value { font-size: 21px; color: #c8ff00; }
.mp-deed-metric--emphasis .mp-deed-metric-label { color: rgba(200, 255, 0, 0.55); }

.mp-deed-status {
  padding: 7px 9px; border-radius: 7px;
  background: rgba(200, 255, 0, 0.07); border: 1px solid rgba(200, 255, 0, 0.18);
  font: 700 9px/1.4 var(--mp-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: #dfff66; text-align: center;
}

/* In the decision dialog the card sits above the buttons and must not push
   them off a phone screen. */
.mp-decision-deed {
  margin: 10px 0 4px; max-height: 60vh;
  /* `overflow-y: auto` alone still lets a too-wide child paint a horizontal
     bar. The card is a fixed-width column of text; nothing in it should ever
     scroll sideways. */
  overflow-y: auto; overflow-x: hidden;
}
/* Tighter inside a dialog than on the dashboard: the buy/pass buttons have to
   stay reachable without scrolling on a laptop. */
.mp-decision-deed .mp-deed-body { padding: 11px 14px 13px; gap: 9px; }
.mp-decision-deed .mp-deed-rent { padding: 3px 7px; }
.mp-decision-deed .mp-deed-band { padding: 10px 14px 11px; }

/* ==========================================================================
   Opponent toasts
   --------------------------------------------------------------------------
   Bot turns used to be entirely silent: three opponents rolled, moved, bought
   and paid with nothing on screen, so the board changed between your turns for
   no visible reason. These say what happened WITHOUT gating the turn behind a
   Continue button, which is why they are not notify() modals.
   ========================================================================== */
.mp-toast-host {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Clear of the top bar, well above the bottom nav and the GO button. */
  top: calc(var(--mp-top-bar-height, 64px) + 14px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.mp-toast {
  --mp-toast-accent: #c8ff00;
  width: 100%;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--mp-toast-accent) 42%, transparent);
  border-left: 3px solid var(--mp-toast-accent);
  background: rgba(10, 15, 11, 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: mp-toast-in 200ms ease-out both;
}
.mp-toast.is-leaving { animation: mp-toast-out 220ms ease-in both; }
.mp-toast-title { font: 700 11px/1.25 var(--mp-mono); letter-spacing: 0.07em; color: var(--mp-toast-accent); text-transform: uppercase; }
.mp-toast-body { font: 500 12px/1.35 var(--mp-body, inherit); color: rgba(244, 247, 237, 0.86); }

@keyframes mp-toast-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes mp-toast-out { to { opacity: 0; transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .mp-toast, .mp-toast.is-leaving { animation: none; }
}

/* ==========================================================================
   Knowledge Circuit
   --------------------------------------------------------------------------
   THE MARKUP FOR ALL OF THIS SHIPPED WITHOUT A STYLESHEET. Ten class names
   were emitted by MathopolyHUD.ts and none of them matched a selector here, so
   the movement prompt rendered as one run-on line of text over the board and
   the card reveal had no card. Everything below is the missing half.
   ========================================================================== */

.mp-event-panel.mp-tactic-panel {
  width: min(440px, calc(100vw - 28px));
  padding: 20px 18px 18px;
  text-align: left;
}

.mp-tactic-panel .mp-panel-kicker,
.mp-tactic-panel .mp-panel-title { text-align: center; }
.mp-tactic-panel .mp-panel-body { margin: 8px 0 0; text-align: center; font-size: 13px; }

.mp-tactic-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.mp-tactic-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--mp-color-border);
  background: rgba(200, 255, 0, 0.05);
  color: var(--mp-color-ink);
  font-family: var(--mp-font);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.mp-tactic-option:hover:not(:disabled),
.mp-tactic-option:focus-visible:not(:disabled) {
  border-color: var(--mp-go-rim);
  background: rgba(200, 255, 0, 0.12);
  transform: translateY(-1px);
  outline: none;
}

/* Unaffordable, not broken. A disabled tactic still has to say what it WOULD
   do and what it costs -- that is the information a player needs in order to
   decide whether to save for it. */
.mp-tactic-option:disabled { opacity: 0.42; cursor: not-allowed; }

.mp-tactic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mp-tactic-name {
  font: 700 15px/1.2 var(--mp-display);
  letter-spacing: -0.01em;
}

.mp-tactic-cost {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 255, 0, 0.14);
  color: var(--mp-go-rim);
  font: 700 10px/1.5 var(--mp-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mp-tactic-normal .mp-tactic-cost {
  background: rgba(244, 247, 237, 0.1);
  color: var(--mp-color-ink-muted);
}

.mp-tactic-target {
  font: 600 13px/1.35 var(--mp-font);
  color: var(--mp-go-rim);
}

.mp-tactic-normal .mp-tactic-target { color: var(--mp-color-ink); }

.mp-tactic-detail {
  font: 400 11.5px/1.4 var(--mp-font);
  color: var(--mp-color-ink-muted);
}

/* --- Circuit card reveal ------------------------------------------------- */

.mp-event-panel.mp-card-reveal-panel {
  width: min(360px, calc(100vw - 28px));
}

.mp-circuit-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--mp-panel-accent, var(--mp-color-border));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--mp-panel-accent) 18%, transparent), transparent 65%),
    rgba(8, 12, 9, 0.7);
}

.mp-circuit-card-mark {
  font: 700 40px/1 var(--mp-display);
  color: var(--mp-panel-accent);
}

.mp-circuit-card .mp-panel-kicker { color: var(--mp-panel-accent); }

/* --- Finals banner ------------------------------------------------------- */

.mp-finals-banner {
  position: absolute;
  left: 50%;
  top: calc(var(--mp-safe-top) + 62px);
  transform: translateX(-50%);
  z-index: var(--mp-z-hud);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--mp-go-rim);
  background: rgba(8, 12, 9, 0.82);
  color: var(--mp-go-rim);
  font: 700 10px/1.4 var(--mp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.mp-finals-banner[hidden] { display: none; }

/* --- Insight chip -------------------------------------------------------- */

.mp-chip-insight .mp-chip-icon { color: var(--mp-go-rim); }
.mp-chip-value { font-variant-numeric: tabular-nums; }
.mp-chip-insight[hidden] { display: none; }

/* ==========================================================================
   Follow camera
   --------------------------------------------------------------------------
   THE CHIPS COME OFF HERE, AND ONLY HERE. The board GLB already carries forty
   printed LABEL_00..39 nodes, so every tile has its name on it -- but at the
   wide isometric shot they are a few pixels tall and a DOM chip had to be
   drawn over each one. The follow camera exists to make the printed names
   legible, which is what earns the right to remove the chips rather than
   merely hide them. `?camera=wide` opts out and keeps them.
   ========================================================================== */

/* THE CHIPS BECOME DOTS RATHER THAN DISAPPEARING.
   Hiding the whole layer took the names off the board -- correct, the board
   prints its own -- but it also took away the one thing the board does NOT
   print: who owns what. A name you can read is not the same as knowing it is
   still for sale. So in follow mode every ownable space keeps its marker and
   loses everything except a status dot, which reuses the projection maths and
   the click target that were already there. */
.mp-camera-follow .mp-space-marker {
  padding: 0;
  /* Both minimums, or the chip's min-height keeps the dot an oval. */
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(4, 8, 5, 0.72);
  background: var(--mp-dot, #5ce27a);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* OUT OF THE WAY OF THE NAME. The marker is anchored to the middle of the
     tile, which is exactly where the printed name is, so a dot centred there
     sat on top of the words the follow camera exists to make readable. Pushed
     to the tile's inner corner it marks the same square without covering
     anything, and 10px reads as a status light rather than a game piece. */
  transform-origin: 50% 50%;
  margin: -13px 0 0 -13px;
  /* NO TRANSITION ON TRANSFORM. The projection rewrites `transform` on every
     frame to follow the tile, so easing it meant the dot was permanently
     chasing a position it never reached -- it swam behind the board whenever
     the camera moved and only settled when everything stopped. Transition the
     things that are not driven per-frame instead. */
  transition: width 120ms ease, height 120ms ease, background-color 160ms ease;
  pointer-events: auto;
}

.mp-camera-follow .mp-space-marker > * { display: none; }
/* Grow by size, not by transform, for the same reason. */
.mp-camera-follow .mp-space-marker:hover { width: 15px; height: 15px; }

/* Green is money you can still spend. Red is money you will be spending. */
.mp-camera-follow .mp-space-marker[data-status="open"]      { --mp-dot: #5ce27a; }
.mp-camera-follow .mp-space-marker[data-status="owned"]     { --mp-dot: #ff5f6d; }
.mp-camera-follow .mp-space-marker[data-status="local"]     { --mp-dot: #c8ff00; }
.mp-camera-follow .mp-space-marker[data-status="mortgaged"] { --mp-dot: #6c7a70; }

/* ==========================================================================
   Players table
   --------------------------------------------------------------------------
   Everyone's cash, permanently. Down the left because that edge is otherwise
   empty at follow zoom, and because a property game is played against what
   the other players can afford -- which the HUD previously never showed.
   ========================================================================== */

.mp-roster {
  position: absolute;
  left: max(10px, var(--mp-safe-left));
  top: calc(var(--mp-safe-top) + var(--mp-top-bar-height, 56px) + 12px);
  z-index: var(--mp-z-hud);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 46vw;
  pointer-events: auto;
}

.mp-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 9px;
  border: 1px solid rgba(233, 246, 239, 0.12);
  border-left: 3px solid var(--mp-roster-accent, #c8ff00);
  border-radius: 9px;
  background: rgba(8, 12, 9, 0.74);
  backdrop-filter: blur(9px);
  color: var(--mp-color-ink);
  font-family: var(--mp-font);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mp-roster-row:hover { background: rgba(8, 12, 9, 0.9); }

/* Whose turn it is, without a second widget saying so. */
.mp-roster-row[data-active="true"] {
  border-color: var(--mp-roster-accent, #c8ff00);
  background: rgba(20, 30, 14, 0.88);
}

.mp-roster-row[data-bankrupt="true"] { opacity: 0.42; }

.mp-roster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 11.5px/1.3 var(--mp-font);
}

.mp-roster-row[data-you="true"] .mp-roster-name { color: var(--mp-go-rim); }

.mp-roster-cash {
  font: 700 11.5px/1.3 var(--mp-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The deed count reads as a token, not a second number to be confused with cash. */
.mp-roster-owned {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(233, 246, 239, 0.1);
  color: var(--mp-color-ink-muted);
  font: 700 10px/1.5 var(--mp-mono);
  text-align: center;
}

@media (max-width: 620px) {
  .mp-roster { max-width: 60vw; }
  .mp-roster-name { font-size: 10.5px; }
  .mp-roster-cash { font-size: 10.5px; }
}

/* ==========================================================================
   Next turn
   ========================================================================== */

.mp-next-turn {
  position: absolute;
  left: 50%;
  /* Clear of the tile panel, which sits at go-size + 34 and was being covered.
     Both appear on a bot's landing, and the one that tells you what happened
     must not be hidden by the one that moves past it. */
  bottom: calc(
    var(--mp-bottom-bar-height, 88px) + var(--mp-safe-bottom) + var(--mp-go-size, 64px) + 128px
  );
  transform: translateX(-50%);
  z-index: var(--mp-z-modal);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--mp-color-border);
  background: rgba(8, 12, 9, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.mp-next-turn-label {
  font: 700 12px/1.3 var(--mp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mp-color-ink-muted);
}

.mp-next-turn-button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mp-go-face-start), var(--mp-go-face-end));
  color: #0b1410;
  font: 900 12px/1 var(--mp-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.mp-next-turn-button:hover { filter: brightness(1.07); }
.mp-next-turn-button:focus-visible { outline: 2px solid var(--mp-go-rim); outline-offset: 2px; }

/* The portfolio is a column of real deeds now, so the row that holds each one
   has to stack rather than sit the card beside its buttons. */
.mp-property-row:has(.mp-deed) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-property-row .mp-deed { max-width: 100%; }
.mp-property-row:has(.mp-deed) .mp-property-actions {
  display: flex;
  gap: 8px;
}
.mp-property-row:has(.mp-deed) .mp-property-actions > * { flex: 1; }

/* ==========================================================================
   The space card
   --------------------------------------------------------------------------
   The tile panel is a card now and closes itself, so it has no chrome of its
   own: no header, no border, no X. The deed brings its own.
   ========================================================================== */

.mp-tile-panel.is-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  width: min(320px, calc(100vw - 32px));
  /* CENTRED, NOT STACKED ON THE GO BUTTON. The prose panel was two lines and
     sat neatly above the roll button; a full deed is around 340px and, anchored
     from the bottom of a laptop viewport, ran off the top -- the colour band
     and the property's own name were the parts that went. A card is the focus
     while it is up, so it belongs in the middle. */
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: mp-card-in 460ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.mp-tile-panel.is-card .mp-deed { position: relative; }

/* DEALT, NOT THROWN. The card scaled up from nothing at the centre of the
   screen, which reads as being shoved at you. Sliding it up from the board
   with a slight tilt that settles reads as a card being turned over and put
   down, which is what is actually happening. */
@keyframes mp-card-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 76px)) scale(0.88) rotate(-4deg);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 6px)) scale(1.02) rotate(1deg);
  }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* BOUGHT, across the card. An opponent taking a deed is the event that most
   changes what the board is worth to you, so it gets the loudest treatment
   the card can carry. */
.mp-deed-stamp {
  position: absolute;
  inset: auto 0 38%;
  transform: rotate(-11deg);
  text-align: center;
  font: 900 34px/1 var(--mp-display);
  letter-spacing: 0.06em;
  color: #ff3b52;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  border-top: 4px solid #ff3b52;
  border-bottom: 4px solid #ff3b52;
  padding: 5px 0;
  opacity: 0.94;
  pointer-events: none;
  animation: mp-stamp 380ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes mp-stamp {
  from { transform: rotate(-11deg) scale(2.1); opacity: 0; }
  to   { transform: rotate(-11deg) scale(1); opacity: 0.94; }
}

/* Why the bank said no, where a dead Build button used to be. */
.mp-panel-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 186, 74, 0.1);
  border: 1px solid rgba(255, 186, 74, 0.28);
  color: #ffd79a;
  font: 600 12px/1.45 var(--mp-font);
  text-align: center;
}

/* Armed: the next roll will offer Insight tactics. Unlit, the turn runs
   without a dialog, which is the default because the prompt used to open on
   every roll before the player had seen where the dice put them. */
.mp-chip-insight { cursor: pointer; }
.mp-chip-insight[data-armed="true"] {
  border-color: var(--mp-go-rim);
  background: rgba(200, 255, 0, 0.16);
  box-shadow: 0 0 0 1px var(--mp-go-rim), 0 0 14px rgba(200, 255, 0, 0.35);
}
.mp-chip-insight[data-armed="true"] .mp-chip-icon { color: var(--mp-go-rim); }

/* A word rather than a symbol, for chips whose meaning is not obvious from an
   icon. Smaller and dimmer than the value so the number still leads. */
.mp-chip-word {
  /* The icon slot is a fixed square sized for a glyph, which clipped "TURN"
     to "TUR". A word needs its own width. */
  width: auto;
  min-width: 0;
  flex: none;
  white-space: nowrap;
  font: 700 8.5px/1 var(--mp-mono);
  letter-spacing: 0.14em;
  color: var(--mp-color-ink-muted);
}

/* ---------------------------------------------------------------------
   16. ONLINE — LOBBY AND TRADING
   --------------------------------------------------------------------- */

/* The second exit from setup. Same size and weight as ENTER THE CIRCUIT so
   neither reads as the afterthought, but hollow, because solo is still the
   one that works with nobody else in the room. */
.mp-setup-play-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-setup-play-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(200, 255, 0, 0.45);
  color: #c8ff00;
}
.mp-setup-play-ghost:hover { background: rgba(200, 255, 0, 0.08); }
.mp-setup-play-ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(200, 255, 0, 0.45); }
.mp-setup-play-ghost.is-on { background: rgba(200, 255, 0, 0.16); }
.mp-setup-play:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* The lobby borrows the setup shell but has one column of content, so the
   two-column grid the setup declares has to be undone rather than fought. */
.mp-lobby-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  width: min(720px, 100%);
}
.mp-lobby-hero { display: grid; gap: 12px; }
.mp-lobby-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.mp-lobby-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(244, 247, 237, 0.12);
  border-radius: 13px;
  background: #111713;
  color: #f4f7ed;
  font: 650 15px/1 var(--mp-font);
  color-scheme: dark;
}
.mp-lobby-input:focus-visible { outline: 2px solid #c8ff00; outline-offset: 2px; }
/* A room code is read character by character off a screen, so it is set in the
   mono face and spaced out — the reason the alphabet has no O, I or S. */
.mp-lobby-code-input { font: 750 20px/1 var(--mp-mono); letter-spacing: 0.34em; text-transform: uppercase; }

.mp-lobby-code-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-lobby-code {
  padding: 10px 20px;
  border: 1px solid rgba(200, 255, 0, 0.4);
  border-radius: 14px;
  background: rgba(200, 255, 0, 0.08);
  color: #c8ff00;
  font: 750 clamp(26px, 5vw, 40px)/1 var(--mp-mono);
  letter-spacing: 0.24em;
}
.mp-lobby-copy {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(244, 247, 237, 0.16);
  border-radius: 12px;
  background: transparent;
  color: rgba(244, 247, 237, 0.78);
  font: 700 11px/1 var(--mp-mono);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mp-lobby-copy:hover { border-color: rgba(200, 255, 0, 0.45); color: #c8ff00; }
.mp-lobby-hint { color: rgba(244, 247, 237, 0.52); font: 600 11px/1.5 var(--mp-mono); }

.mp-lobby-seats { display: grid; gap: 8px; }
.mp-lobby-seat {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(244, 247, 237, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.mp-lobby-seat[data-you="true"] { border-color: rgba(200, 255, 0, 0.4); background: rgba(200, 255, 0, 0.06); }
.mp-lobby-seat.is-empty { border-style: dashed; opacity: 0.55; grid-template-columns: 40px minmax(0, 1fr); }
.mp-lobby-seat-glyph { font: 400 22px/1 var(--mp-font); color: #c8ff00; text-align: center; }
.mp-lobby-seat-name { font: 650 15px/1 var(--mp-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-lobby-seat-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(200, 255, 0, 0.16);
  color: #c8ff00;
  font: 750 9px/1 var(--mp-mono);
  letter-spacing: 0.1em;
}
.mp-lobby-seat-state { color: rgba(244, 247, 237, 0.45); font: 700 10px/1 var(--mp-mono); letter-spacing: 0.1em; }
.mp-lobby-seat[data-ready="true"] .mp-lobby-seat-state { color: #c8ff00; }

.mp-lobby-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-lobby-error { margin: 0; color: #ff8fd4; font: 650 12px/1.5 var(--mp-font); }
.mp-lobby-error[data-tone="info"] { color: rgba(244, 247, 237, 0.55); }
.mp-lobby-back {
  align-self: start;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: rgba(244, 247, 237, 0.5);
  font: 650 12px/1 var(--mp-font);
  cursor: pointer;
}
.mp-lobby-back:hover { color: #f4f7ed; }
.mp-setup-edition[data-status="reconnecting"] { color: #ff8fd4; }

/* --- Trading ------------------------------------------------------------ */

/* Its own control rather than a fifth nav item: the nav is shared with the
   solo game, where trading does not exist.

   BOTTOM LEFT, NOT BOTTOM RIGHT. The site's floating CALC pill lives in the
   bottom-right corner, and the first version of this button landed on top of
   it -- a tap meant for a trade opened Desmos instead. The left side of the
   bottom strip is empty on every viewport the board is playable at. */
.mp-trade-open {
  position: absolute;
  left: max(14px, var(--mp-safe-left));
  bottom: calc(var(--mp-bottom-bar-height, 88px) + var(--mp-safe-bottom) + 14px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--mp-touch-min);
  padding: 0 16px;
  border: 1px solid rgba(200, 255, 0, 0.34);
  border-radius: 999px;
  background: rgba(9, 14, 10, 0.92);
  color: #c8ff00;
  font: 750 11px/1 var(--mp-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
  pointer-events: auto;
}
.mp-trade-open:hover { background: rgba(200, 255, 0, 0.14); }
.mp-trade-open.has-offers { border-color: #c8ff00; box-shadow: 0 0 18px rgba(200, 255, 0, 0.35); }
/* `display: grid` here outranks the user agent's `[hidden] { display: none }`,
   so an empty badge sat there reading "0" until it was told not to. */
.mp-trade-open-badge[hidden] { display: none; }
.mp-trade-open-badge {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff8fd4;
  color: #17040e;
  font: 750 11px/1 var(--mp-mono);
}

.mp-trade-panel { width: min(1000px, 100%); max-height: min(720px, calc(100dvh - 150px)); }
.mp-trade-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.4vw, 28px); }
.mp-trade-heading { margin: 0 0 10px; font: 600 13px/1 var(--mp-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 247, 237, 0.55); }
.mp-trade-empty { margin: 0 0 12px; color: rgba(244, 247, 237, 0.45); font: 600 12px/1.6 var(--mp-font); }

.mp-trade-card {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid rgba(244, 247, 237, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.028);
}
/* An offer waiting on you is the only thing on this screen that is a task. */
.mp-trade-card[data-kind="incoming"] { border-color: rgba(200, 255, 0, 0.45); background: rgba(200, 255, 0, 0.07); }
.mp-trade-card[data-kind="settled"] { opacity: 0.6; }
.mp-trade-card-title { margin: 0 0 10px; font: 650 14px/1.3 var(--mp-font); }
.mp-trade-card-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mp-trade-side { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.mp-trade-side-label { color: rgba(244, 247, 237, 0.42); font: 700 9px/1 var(--mp-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mp-trade-side-empty { color: rgba(244, 247, 237, 0.35); font: 600 12px/1 var(--mp-font); font-style: italic; }
.mp-trade-chip {
  max-width: 100%;
  padding: 5px 9px;
  border-left: 3px solid var(--mp-trade-accent, #c8ff00);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font: 650 12px/1.25 var(--mp-font);
  overflow-wrap: anywhere;
}
.mp-trade-chip-cash { border-left-color: #c8ff00; color: #c8ff00; font-family: var(--mp-mono); }
.mp-trade-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.mp-trade-accept, .mp-trade-decline {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  font: 750 11px/1 var(--mp-mono);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mp-trade-accept { background: #c8ff00; color: #050805; }
.mp-trade-decline { background: rgba(255, 255, 255, 0.06); color: rgba(244, 247, 237, 0.7); }
.mp-trade-accept:hover { filter: brightness(1.08); }
.mp-trade-decline:hover { background: rgba(255, 143, 212, 0.16); color: #ff8fd4; }
.mp-trade-note { margin: 10px 0 0; color: #ff8fd4; font: 600 11px/1.4 var(--mp-font); }
.mp-trade-status { margin: 10px 0 0; color: rgba(244, 247, 237, 0.45); font: 700 10px/1 var(--mp-mono); letter-spacing: 0.1em; }

.mp-trade-partners { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-trade-partner {
  display: grid;
  gap: 3px;
  padding: 9px 13px;
  border: 1px solid rgba(244, 247, 237, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 247, 237, 0.7);
  text-align: left;
  cursor: pointer;
}
.mp-trade-partner strong { font: 650 13px/1 var(--mp-font); }
.mp-trade-partner small { font: 600 10px/1 var(--mp-mono); color: rgba(244, 247, 237, 0.45); }
.mp-trade-partner.is-selected { border-color: #c8ff00; background: rgba(200, 255, 0, 0.1); color: #f4f7ed; }

.mp-trade-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mp-trade-column { min-width: 0; display: grid; align-content: start; gap: 9px; }
.mp-trade-column-title { margin: 0; font: 700 10px/1 var(--mp-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 247, 237, 0.5); }
.mp-trade-grid { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.mp-trade-deed {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgba(244, 247, 237, 0.1);
  border-left: 3px solid var(--mp-trade-accent, #c8ff00);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 247, 237, 0.78);
  text-align: left;
  cursor: pointer;
}
.mp-trade-deed.is-selected { border-color: #c8ff00; border-left-color: var(--mp-trade-accent, #c8ff00); background: rgba(200, 255, 0, 0.13); color: #f4f7ed; }
.mp-trade-deed:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-trade-deed-name { font: 650 12.5px/1.2 var(--mp-font); }
.mp-trade-deed-note { font: 600 9.5px/1 var(--mp-mono); letter-spacing: 0.06em; color: rgba(244, 247, 237, 0.45); }
.mp-trade-cash { display: grid; gap: 6px; }
.mp-trade-cash > span { color: rgba(244, 247, 237, 0.45); font: 700 9.5px/1 var(--mp-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.mp-trade-cash .mp-lobby-input { min-height: 44px; font-family: var(--mp-mono); }

/* The one line that says what actually happens, between the boxes and the
   button that commits them. */
.mp-trade-summary {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 247, 237, 0.78);
  font: 650 12.5px/1.5 var(--mp-font);
}
.mp-trade-send { margin-top: 12px; width: 100%; min-width: 0; }

@media (max-width: 900px) {
  .mp-lobby-form { grid-template-columns: minmax(0, 1fr); }
  .mp-trade-body { grid-template-columns: minmax(0, 1fr); }
  .mp-trade-columns { grid-template-columns: minmax(0, 1fr); }
  .mp-trade-panel { max-height: calc(100dvh - 120px); }
}


/* ==========================================================================
   Match menu

   The three-bar button in the top bar had no handler at all -- it looked like
   a control and did nothing, which is worse than not being there. It opens
   this. Deliberately short: the two things a player actually wants mid-match
   are a look at the whole board and a way out.
   ========================================================================== */
.mp-menu-popover {
  position: absolute;
  top: calc(var(--mp-top-bar-height, 64px) + 8px);
  right: max(12px, var(--mp-safe-right));
  z-index: var(--mp-z-modal);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  gap: 2px;
  border-radius: 16px;
  border: 1px solid var(--mp-color-border);
  background: rgba(8, 12, 9, 0.95);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.mp-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #f4f7ed;
  font: 700 13px/1.2 var(--mp-font);
  text-align: left;
  cursor: pointer;
}

.mp-menu-item:hover { background: rgba(200, 255, 0, 0.12); }
.mp-menu-item--danger { color: #ff9b8a; }
.mp-menu-item--danger:hover { background: rgba(255, 120, 100, 0.14); }
.mp-menu-icon { width: 18px; text-align: center; opacity: 0.85; }


/* ==========================================================================
   Section picker

   Was a single <select>, so revising for a whole exam meant running one match
   per section. Chips because the answer is usually more than one, and because
   a multiple-<select> on a phone is a scroll trap.
   ========================================================================== */
.mp-setup-field--wide { grid-column: 1 / -1; }

.mp-section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-section-chip {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(244, 247, 237, 0.14);
  border-radius: 999px;
  background: #111713;
  color: rgba(244, 247, 237, 0.66);
  font: 650 13px/1 var(--mp-font);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mp-section-chip:hover { border-color: rgba(200, 255, 0, 0.45); color: #f4f7ed; }

.mp-section-chip[data-on="true"] {
  border-color: #c8ff00;
  background: rgba(200, 255, 0, 0.15);
  color: #eaffb0;
}

.mp-section-chip--all {
  border-style: dashed;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mp-section-chip:focus-visible { outline: 2px solid #c8ff00; outline-offset: 2px; }


/* ==========================================================================
   Liquidation picker

   Replaces a silent auto-mortgage. The rows are wide touch targets because
   this dialog opens at the worst moment in a match and the player is usually
   annoyed already.
   ========================================================================== */
.mp-liq-tally {
  margin: 2px 0 10px;
  font: 650 13px/1.35 var(--mp-font);
  color: rgba(244, 247, 237, 0.72);
}

.mp-liq-tally[data-enough="true"] { color: #c8ff00; }

.mp-liq-list {
  display: grid;
  gap: 7px;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 2px;
}

.mp-liq-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name amount" "detail amount";
  gap: 1px 10px;
  align-items: center;
  width: 100%;
  padding: 9px 12px 9px 16px;
  position: relative;
  border: 1px solid rgba(244, 247, 237, 0.12);
  border-radius: 11px;
  background: #111713;
  color: #f4f7ed;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

/* The colour band, so a deed in the picker reads as the deed on the board. */
.mp-liq-row::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: 9px;
  width: 4px;
  border-radius: 3px;
  background: var(--mp-liq-swatch, #c8ff00);
}

.mp-liq-row:hover { border-color: rgba(200, 255, 0, 0.45); }

.mp-liq-row[data-on="true"] {
  border-color: #c8ff00;
  background: rgba(200, 255, 0, 0.14);
}

.mp-liq-row:focus-visible { outline: 2px solid #c8ff00; outline-offset: 2px; }

.mp-liq-name { grid-area: name; font: 650 14px/1.2 var(--mp-font); }

.mp-liq-detail {
  grid-area: detail;
  font: 600 11px/1.3 var(--mp-mono);
  color: rgba(244, 247, 237, 0.5);
}

.mp-liq-amount {
  grid-area: amount;
  font: 700 15px/1 var(--mp-mono);
  color: #c8ff00;
}

.mp-panel-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}