/* =====================================================================
   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;
  grid-template-columns: repeat(4, 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);
}

.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%;
  bottom: calc(var(--mp-bottom-bar-height, 88px) + var(--mp-safe-bottom) + 26px);
  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; }
.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;
  }
}