/* =========================================================================
   MECCHA CLAUDEON — interface stylesheet
   -------------------------------------------------------------------------
   One file, ordered: tokens, reset, primitives, boot, then one block per
   screen in the order a session meets them (menu, lobby, draw, HUD, paint,
   pose wheel, results, modals).

   Rules the whole sheet obeys:
     - Colour comes from three families only: bone white for the hider, a
       claudeon green for anything the player controls, and a seeker
       red-orange for anything that hunts. Everything else is a neutral.
     - Panels are translucent and blurred over the live 3D map. Nothing is
       fully opaque except the reveal plates, so the room is always present.
     - Motion eases (`--ease`) and never snaps. Entry transitions run
       220-460 ms; state changes run 120-180 ms.
     - Every interactive element has :hover, :active and :focus-visible. The
       browser's default focus ring is replaced, never merely removed.
   ========================================================================= */

:root {
  color-scheme: dark;

  --bone: #f4f6f8;
  --ink: #e9eef3;
  --ink-2: #9aa6b4;
  /* Both lifted to clear 4.5:1 on the #04060a page. The old --ink-3 measured
     4.1:1 and --ink-4 measured 2.1:1, and both were being used for 9-10px
     tracked-out text — roughly half the AA minimum, on the smallest type in the
     interface. --hair keeps the old value for what it was actually good for:
     one-pixel separators, which are decoration and carry no information. */
  --ink-3: #8b98a7;
  --ink-4: #7c8896;
  --hair: #3d4753;
  /* Floor for any text a player has to read. */
  --micro: 0.75rem;

  --green: #63e6a4;
  --green-hi: #9dffcb;
  --green-deep: #135e41;
  --green-glow: rgba(99, 230, 164, 0.28);

  --seeker: #ff5f30;
  --seeker-hi: #ff9264;
  --seeker-deep: #7a2410;
  --seeker-glow: rgba(255, 95, 48, 0.3);

  --warn: #ffc24a;
  --bad: #ff5a5a;

  --bg: #04060a;
  --plate: rgba(11, 15, 21, 0.74);
  --edge: rgba(255, 255, 255, 0.085);
  --edge-2: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;

  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 7px;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  font-family: var(--font);
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` loses to any author `display`, and most
   HUD widgets set one. Without this, `node.hidden = true` does nothing. */
[hidden] { display: none !important; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus { outline: none; }

/* `outline` rather than `box-shadow`: box-shadow *replaces* an element's own
   shadow, so focusing PLAY used to delete its green glow and make the primary
   action look less prominent than it does at rest — and Chrome does not paint
   box-shadow on SVG geometry at all, so all fifteen body-diagram parts were
   focusable with no visible ring whatsoever. An outline composes with element
   shadows and works on SVG. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: inherit;
}

/* A green ring on a green surface is invisible; those get bone white. */
.mc-btn.is-primary:focus-visible,
.mc-tab.is-on:focus-visible,
.mc-diff-btn.is-on:focus-visible,
.mc-part:focus-visible {
  outline-color: var(--bone);
}

.mc-part:focus-visible { outline-offset: 1px; }

::selection { background: var(--green); color: #04120b; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------- layers */

#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.mc-layer { position: absolute; inset: 0; pointer-events: none; }
.mc-layer-hud { z-index: 1; }
.mc-layer-screen { z-index: 2; }
.mc-layer-overlay { z-index: 3; }
.mc-layer-top { z-index: 4; }

.mc-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.34s var(--ease), visibility 0.34s;
}

.mc-screen.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

/* ------------------------------------------------------------ primitives */

.mc-btn {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-ink: var(--ink);
  --btn-edge: var(--edge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 42px;
  padding: 0 1.25rem;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-edge);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    transform 0.14s var(--ease), color 0.16s var(--ease), box-shadow 0.2s var(--ease);
}

.mc-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}

.mc-btn:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--edge-2); transform: translateY(-1px); }
.mc-btn:active { transform: translateY(1px) scale(0.995); background: rgba(255, 255, 255, 0.07); }
.mc-btn[disabled] { opacity: 0.34; pointer-events: none; }

.mc-btn.is-primary {
  --btn-bg: linear-gradient(180deg, var(--green-hi), var(--green));
  --btn-ink: #052616;
  --btn-edge: transparent;
  box-shadow: 0 8px 26px var(--green-glow);
  font-weight: 750;
}

.mc-btn.is-primary:hover {
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  box-shadow: 0 12px 34px var(--green-glow);
  filter: brightness(1.06);
}

.mc-btn.is-danger { --btn-bg: rgba(255, 95, 48, 0.14); --btn-ink: var(--seeker-hi); --btn-edge: rgba(255, 95, 48, 0.34); }
.mc-btn.is-danger:hover { background: rgba(255, 95, 48, 0.24); }

.mc-btn.is-ghost { --btn-bg: rgba(255, 255, 255, 0.035); }
.mc-btn.is-quiet { --btn-bg: transparent; --btn-ink: var(--ink-2); --btn-edge: rgba(255, 255, 255, 0.07); }
.mc-btn.is-quiet:hover { --btn-ink: var(--ink); }

.mc-btn.is-sm { min-height: 32px; padding: 0 0.85rem; font-size: 0.7rem; letter-spacing: 0.08em; }
.mc-btn.is-busy { --btn-bg: rgba(255, 255, 255, 0.08); --btn-ink: var(--ink-2); }

.mc-btn-key,
.mc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-2);
}

.mc-btn.is-primary .mc-btn-key { background: rgba(0, 0, 0, 0.16); border-color: rgba(0, 0, 0, 0.18); color: #0a3a24; }

.mc-glyph { flex: none; }

.mc-panel {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: var(--shadow);
}

.mc-panel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem 0.7rem;
}

.mc-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.mc-panel-count { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.mc-panel-tools { margin-left: auto; display: flex; gap: 0.4rem; }

.mc-panel-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--ink-3);
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.mc-panel-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); border-color: var(--edge); }

.mc-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.6rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--edge);
  font-size: 0.68rem;
  font-weight: 550;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
}

.mc-chip.is-accent { background: rgba(99, 230, 164, 0.13); border-color: rgba(99, 230, 164, 0.3); color: var(--green-hi); }

.mc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hair); flex: none; }

.mc-portrait {
  --size: 40px;
  --tint: #888888;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 32%;
  background: linear-gradient(155deg, color-mix(in srgb, var(--tint) 74%, #fff), var(--tint));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  font-family: var(--font-display);
  font-size: calc(var(--size) * 0.36);
  font-weight: 750;
}

/* fields, sliders, toggles, segmented ------------------------------------ */

.mc-field { display: flex; flex-direction: column; gap: 0.36rem; --fill: 0%; }
.mc-field.is-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.2rem; }
.mc-field.is-wide .mc-settings-note { flex: 1; }
.mc-field.is-wide .mc-settings-note { margin: 0; }

.mc-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }

.mc-field-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mc-field-value { font-family: var(--mono); font-size: 0.76rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.mc-slider-wrap { position: relative; display: block; height: 22px; }

.mc-slider-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

.mc-slider-wrap:has(#paint-hue)::before {
  background: linear-gradient(90deg, #00e5ff, #2b5bff, #c23bff, #ff3b3b, #ffd93b, #45ff8a, #00e5ff);
  opacity: 0.5;
}

.mc-slider-fill {
  position: absolute;
  left: var(--fill-x, 0%);
  top: 50%;
  height: 4px;
  width: var(--fill, 0%);
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  border-radius: 99px;
  pointer-events: none;
}

.mc-field.is-bipolar .mc-slider-fill { background: var(--green); }

/* Centre detent for a bipolar slider, so "no change" has a visible home. */
.mc-field.is-bipolar .mc-slider-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.4);
}

/* The hue track is the gradient; a green fill on top of it means nothing. */
.mc-slider-wrap:has(#paint-hue) .mc-slider-fill { display: none; }

input.mc-slider {
  position: relative;
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

input.mc-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid #060a0e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.14s var(--ease), box-shadow 0.16s;
}

input.mc-slider:hover::-webkit-slider-thumb { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(99, 230, 164, 0.16); }
input.mc-slider:active::-webkit-slider-thumb { transform: scale(1.05); box-shadow: 0 0 0 9px rgba(99, 230, 164, 0.22); }
input.mc-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--bone); border: 2px solid #060a0e; }

.mc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  padding: 0.2rem 0;
}

.mc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.mc-toggle-track {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--edge);
  transition: background 0.2s var(--ease), border-color 0.2s;
  flex: none;
}

.mc-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 0.22s var(--ease), background 0.2s;
}

.mc-toggle.is-on .mc-toggle-track { background: rgba(99, 230, 164, 0.26); border-color: rgba(99, 230, 164, 0.45); }
.mc-toggle.is-on .mc-toggle-knob { transform: translateX(17px); background: var(--green-hi); }
.mc-toggle:hover .mc-toggle-track { border-color: var(--edge-2); }
.mc-toggle:focus-within .mc-toggle-track { box-shadow: 0 0 0 3px rgba(99, 230, 164, 0.25); }

.mc-toggle-label { font-size: 0.76rem; font-weight: 550; color: var(--ink-2); }
.mc-toggle.is-on .mc-toggle-label { color: var(--ink); }

.mc-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--edge);
}

.mc-seg-btn {
  flex: 1;
  min-width: 42px;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.mc-seg-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.mc-seg-btn.is-on { background: rgba(99, 230, 164, 0.17); color: var(--green-hi); box-shadow: 0 0 0 1px rgba(99, 230, 164, 0.28) inset; }

.mc-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.mc-stat-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.mc-stat-value { font-family: var(--mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ boot */

#boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1.4rem;
  justify-items: center;
  background: radial-gradient(circle at 50% 40%, #0d131c 0%, #04060a 72%);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
  z-index: 50;
}

#boot.done { opacity: 0; visibility: hidden; }

.boot-mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.boot-mark span { color: var(--green); letter-spacing: 0.3em; }

.boot-bar { width: min(46vw, 420px); height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--warn)); transition: width 0.25s var(--ease); }

.boot-step { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

.boot-failure {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  max-width: min(520px, 88vw);
  padding: 1.4rem 1.6rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  text-align: center;
}

.boot-failure-title { font-family: var(--font-display); font-size: 1rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--seeker-hi); }
.boot-failure-body { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-2); }
.boot-failure-detail { width: 100%; font-size: var(--micro); color: var(--ink-3); text-align: left; }
.boot-failure-detail summary { cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; }
.boot-failure-detail code { display: block; margin-top: 0.5rem; padding: 0.5rem 0.6rem; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.4); font-family: var(--mono); word-break: break-word; }

/* ------------------------------------------------------------------ menu */

.mc-menu {
  display: grid;
  align-content: center;
  padding: 0 clamp(2rem, 8vw, 8rem);
  background:
    linear-gradient(100deg, rgba(4, 6, 10, 0.95) 0%, rgba(4, 6, 10, 0.86) 38%, rgba(4, 6, 10, 0.42) 78%),
    radial-gradient(60% 80% at 12% 50%, rgba(20, 46, 36, 0.5), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(2, 3, 5, 0.7) 100%);
  backdrop-filter: blur(13px) saturate(1.1) brightness(0.85);
  -webkit-backdrop-filter: blur(13px) saturate(1.1) brightness(0.85);
}

.mc-menu-glow {
  position: absolute;
  left: -12%;
  top: 50%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(99, 230, 164, 0.12), transparent 62%);
  filter: blur(30px);
  animation: menuDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes menuDrift {
  from { transform: translate(-4%, -54%) scale(1); }
  to { transform: translate(6%, -46%) scale(1.14); }
}

.mc-menu-inner { position: relative; max-width: 640px; padding-left: 1.5rem; }

/* Hairline that ties the kicker, the title and the nav into one column. */
.mc-menu-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 2.2rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--green), rgba(99, 230, 164, 0.05));
  animation: riseIn 0.9s 0.1s var(--ease-out) both;
}

.mc-title-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.1rem;
  animation: riseIn 0.7s var(--ease-out) both;
}

.mc-title-mark { margin: 0; display: grid; gap: 0.1rem; font-family: var(--font-display); }

.mc-title-a {
  display: block;
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--bone);
  animation: riseIn 0.75s 0.05s var(--ease-out) both;
}

.mc-title-b {
  display: block;
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0.2em;
  color: transparent;
  background: linear-gradient(96deg, var(--green-hi), var(--green) 42%, #2f9a6d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: riseIn 0.75s 0.13s var(--ease-out) both;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.mc-title-blurb {
  margin: 1.3rem 0 0;
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-2);
  animation: riseIn 0.8s 0.22s var(--ease-out) both;
}

.mc-menu-nav {
  display: grid;
  gap: 0.5rem;
  margin-top: 2.4rem;
  width: min(300px, 100%);
  animation: riseIn 0.8s 0.3s var(--ease-out) both;
}

.mc-menu-nav .mc-btn { justify-content: flex-start; min-height: 48px; font-size: 0.86rem; letter-spacing: 0.14em; }
.mc-menu-nav .mc-btn.is-primary { min-height: 56px; font-size: 0.95rem; }

.mc-menu-nav .mc-btn:not(.is-primary)::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: var(--green);
  transition: width 0.24s var(--ease), margin-right 0.24s var(--ease);
}

.mc-menu-nav .mc-btn:not(.is-primary):hover::before { width: 18px; margin-right: 0.6rem; }

.mc-menu-poses {
  display: flex;
  gap: 0.55rem;
  margin-top: 2.6rem;
  opacity: 0.32;
  animation: riseIn 0.9s 0.4s var(--ease-out) both;
}

.mc-menu-pose { color: var(--ink-2); }

.mc-menu-foot {
  position: absolute;
  left: clamp(2rem, 8vw, 8rem);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mc-pose-icon { display: block; }
.mc-pose-body { fill: currentColor; }
.mc-pose-floor { stroke: currentColor; stroke-width: 2; opacity: 0.22; stroke-linecap: round; }

/* ----------------------------------------------------------------- lobby */

.mc-lobby {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 1rem clamp(1rem, 2.6vw, 2.2rem) 1.1rem;
  background:
    linear-gradient(180deg, rgba(4, 6, 10, 0.93), rgba(4, 6, 10, 0.82) 40%, rgba(4, 6, 10, 0.94)),
    radial-gradient(90% 70% at 50% 0%, rgba(24, 44, 36, 0.4), transparent 70%);
  backdrop-filter: blur(20px) saturate(0.95);
  -webkit-backdrop-filter: blur(20px) saturate(0.95);
}

.mc-lobby-head { display: flex; align-items: center; gap: 1.2rem; }
.mc-lobby-head-title { flex: 1; }

.mc-lobby-head-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 750;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.mc-lobby-head-title p { margin: 0.16rem 0 0; font-size: 0.76rem; color: var(--ink-3); }

.mc-lobby-body { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 0.9rem; min-height: 0; }
.mc-lobby-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.9rem; min-height: 0; }

.mc-panel-map { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; min-height: 0; }

.mc-map-stage {
  position: relative;
  flex: 1;
  min-height: 200px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #070a0e;
}

.mc-map-art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; }
.mc-map-art.is-in { animation: mapIn 0.85s var(--ease-out) forwards; }

@keyframes mapIn {
  from { opacity: 0; transform: scale(1.075); filter: saturate(0.4) blur(4px); }
  to { opacity: 1; transform: scale(1); filter: none; }
}

.mc-map-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, 0.94) 0%, rgba(4, 6, 10, 0.6) 34%, rgba(4, 6, 10, 0) 62%),
    linear-gradient(0deg, rgba(4, 6, 10, 0.74), transparent 46%);
  pointer-events: none;
}

/* Both gutters, not just the right one. The nav chevrons are vertically
   centred in the stage, and at 720p the stage collapses to 250px tall, which
   puts them on top of the map title and the state badge — "rand Ballroom",
   "ADED". The height breakpoint at the bottom of this sheet moves them out of
   the copy entirely; this reserves the space either way. */
.mc-map-copy {
  position: absolute;
  left: 4.6rem;
  bottom: 1.3rem;
  right: 4.6rem;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.mc-map-eyebrow { display: flex; align-items: center; gap: 0.7rem; }

.mc-map-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--edge);
  border-radius: 5px;
}

.mc-map-badge.is-live { color: var(--green); border-color: rgba(99, 230, 164, 0.4); background: rgba(99, 230, 164, 0.1); }
.mc-map-count { font-family: var(--mono); font-size: var(--micro); color: var(--ink-4); letter-spacing: 0.1em; }

.mc-map-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 780;
  line-height: 1.04;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.mc-map-sub { margin: 0; font-size: 0.82rem; color: var(--ink-2); max-width: 44ch; }
.mc-map-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.1rem; }
.mc-map-actions { margin-top: 0.4rem; }

.mc-map-credit {
  position: absolute;
  right: 0.7rem;
  bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.mc-map-nav {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: var(--r-sm);
  background: rgba(4, 6, 10, 0.5);
  border: 1px solid var(--edge);
  color: var(--ink-2);
  backdrop-filter: blur(6px);
  transition: background 0.16s, color 0.16s, transform 0.18s var(--ease);
}

.mc-map-nav:hover { background: rgba(4, 6, 10, 0.8); color: var(--ink); }
.mc-map-nav.is-prev { left: 0.65rem; }
.mc-map-nav.is-prev .mc-glyph { transform: rotate(180deg); }
.mc-map-nav.is-next { right: 0.65rem; }
.mc-map-nav.is-prev:hover { transform: translateY(-50%) translateX(-2px); }
.mc-map-nav.is-next:hover { transform: translateY(-50%) translateX(2px); }

.mc-map-rail { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 2px; }

.mc-rail-card {
  position: relative;
  flex: 1 1 0;
  min-width: 88px;
  display: grid;
  gap: 0.28rem;
  border-radius: var(--r-sm);
  transition: transform 0.2s var(--ease);
}

.mc-rail-art {
  display: block;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.5) brightness(0.55);
  transition: filter 0.24s var(--ease), box-shadow 0.24s var(--ease);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.mc-rail-name {
  font-size: var(--micro);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 0.2rem;
  transition: color 0.18s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-rail-card:hover .mc-rail-art { filter: saturate(0.9) brightness(0.85); }
.mc-rail-card:hover .mc-rail-name { color: var(--ink-2); }
.mc-rail-card:hover { transform: translateY(-2px); }
.mc-rail-card.is-on .mc-rail-art { filter: none; box-shadow: 0 0 0 2px var(--green) inset; }
.mc-rail-card.is-on .mc-rail-name { color: var(--green-hi); }

/* The house leads the rail and is set apart from its wings. */
.mc-rail-card.is-house { flex: 1.5 1 0; margin-right: 0.6rem; }
.mc-rail-card.is-house .mc-rail-name { color: var(--ink-2); }
.mc-rail-card.is-house::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -0.35rem;
  bottom: 4px;
  width: 1px;
  background: var(--edge);
}

/* roster ---------------------------------------------------------------- */

.mc-panel-roster { display: flex; flex-direction: column; min-height: 0; }
.mc-roster-list { display: grid; gap: 3px; padding: 0 0.6rem 0.7rem; overflow-y: auto; min-height: 0; }

.mc-draw-preview {
  margin-top: auto;
  padding: 0.9rem 1.1rem 1.1rem;
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, transparent, rgba(255, 95, 48, 0.045));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.mc-draw-preview-head { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.mc-draw-preview-row { display: flex; gap: 1.6rem; margin: 0.5rem 0 0.6rem; }
.mc-draw-preview-cell { display: flex; align-items: baseline; gap: 0.35rem; }
.mc-draw-preview-value { font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--bone); }
.mc-draw-preview-value.is-seeker { color: var(--seeker); }
.mc-draw-preview-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mc-draw-preview-note { margin: 0; font-size: 0.7rem; line-height: 1.5; color: var(--ink-3); }

.mc-slot {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 0.55rem;
  height: 46px;
  padding: 0 0.55rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.028);
  transition: background 0.16s, border-color 0.16s;
  text-align: left;
}

.mc-slot.is-filled:hover { background: rgba(255, 255, 255, 0.055); }
.mc-slot.is-you { background: linear-gradient(90deg, rgba(99, 230, 164, 0.13), rgba(99, 230, 164, 0.02)); border-color: rgba(99, 230, 164, 0.22); }

.mc-slot-index { font-family: var(--mono); font-size: var(--micro); color: var(--ink-4); }
.mc-slot-body { min-width: 0; display: grid; gap: 3px; align-content: center; }
.mc-slot-name { font-size: 0.83rem; font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-slot-meta { display: flex; align-items: center; gap: 0.4rem; line-height: 1; }
.mc-slot-tag { font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.mc-slot-ready { font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.mc-slot-wait { font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }

.mc-diff { display: flex; gap: 2px; }

.mc-diff-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 700;
  color: var(--ink-4);
  transition: background 0.14s, color 0.14s, transform 0.14s var(--ease);
}

.mc-diff-btn:hover { background: rgba(255, 255, 255, 0.13); color: var(--ink); transform: translateY(-1px); }
.mc-diff-btn.is-on { background: rgba(99, 230, 164, 0.2); color: var(--green-hi); box-shadow: 0 0 0 1px rgba(99, 230, 164, 0.32) inset; }
.mc-diff-you { font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); padding-right: 0.2rem; }

/* A destructive control that is `opacity: 0` with only a :hover rule is
   invisible to a trackpad and a trap for a keyboard: seven unlabelled remove
   buttons that can be activated without ever being seen. It now has a resting
   state, meets the 24px minimum target size, and appears on focus as well as
   on hover. */
.mc-slot-kick {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--ink-3);
  opacity: 0.4;
  transition: opacity 0.16s, color 0.16s, background 0.16s;
}

.mc-slot:hover .mc-slot-kick,
.mc-slot:focus-within .mc-slot-kick { opacity: 1; }
.mc-slot-kick:hover,
.mc-slot-kick:focus-visible { color: var(--seeker); background: rgba(255, 95, 48, 0.14); }
.mc-slot-kick-spacer { width: 26px; }

.mc-roster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  padding: 0.5rem 1.1rem 0.2rem;
  font-size: var(--micro);
  color: var(--ink-3);
}

.mc-roster-legend b { color: var(--ink-2); font-weight: 700; font-family: var(--mono); }

.mc-slot.is-empty {
  grid-template-columns: 22px auto minmax(0, 1fr);
  color: var(--ink-4);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.075);
}

.mc-slot.is-empty:hover { border-color: rgba(99, 230, 164, 0.36); color: var(--green); background: rgba(99, 230, 164, 0.05); }
.mc-slot-plus { font-size: 1.05rem; font-weight: 300; line-height: 1; }
.mc-slot-empty-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* match settings -------------------------------------------------------- */

.mc-panel-settings { padding-bottom: 0.9rem; }
.mc-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 1.2rem; padding: 0 1.1rem; }
.mc-settings-note { margin: 0.3rem 0 0; font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; display: grid; gap: 0.3rem; }
.mc-settings-defer { color: var(--warn); }

.mc-lobby-foot { display: flex; align-items: center; gap: 1.2rem; }
.mc-lobby-status { flex: 1; font-size: 0.76rem; color: var(--ink-3); }
.mc-lobby-foot-actions { display: flex; align-items: center; gap: 1rem; }
.mc-lobby-foot-actions .mc-btn.is-primary { min-height: 48px; padding: 0 2rem; }

/* ----------------------------------------------------------- seeker draw */

.mc-draw {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 2rem;
  background: radial-gradient(70% 70% at 50% 40%, rgba(10, 14, 20, 0.86), rgba(2, 3, 5, 0.97) 78%);
  backdrop-filter: blur(26px) saturate(0.8);
  -webkit-backdrop-filter: blur(26px) saturate(0.8);
}

.mc-draw-rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.035) 6deg, transparent 12deg,
    transparent 30deg, rgba(255, 255, 255, 0.028) 36deg, transparent 42deg);
  animation: rays 42s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.mc-draw.is-settled .mc-draw-rays { animation-duration: 14s; opacity: 1; }

@keyframes rays { to { transform: rotate(360deg); } }

.mc-draw-head { text-align: center; position: relative; }
.mc-draw-kicker { font-size: 0.66rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--ink-3); }

.mc-draw-title {
  margin: 0.5rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.34em;
  color: var(--bone);
}

.mc-draw-status { margin: 0; font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.05em; min-height: 1.2em; }

.mc-reel {
  position: relative;
  width: min(1060px, 92vw);
  height: 164px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.32));
  border: 1px solid var(--edge);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.mc-reel-track {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.16, 0.8, 0.28, 1);
  will-change: transform;
}

.mc-reel.is-fast .mc-reel-track { filter: blur(1.7px); }

.mc-reel-card {
  width: 168px;
  margin-right: 16px;
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  opacity: 0.28;
  transform: scale(0.84);
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease);
}

.mc-reel-card.is-on { opacity: 1; transform: scale(1); }
.mc-reel-card.is-seeker .mc-portrait { box-shadow: 0 0 0 3px var(--seeker), 0 0 30px var(--seeker-glow); }
.mc-reel-name { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }

.mc-reel-marker { position: absolute; inset: 0; pointer-events: none; }

.mc-reel-marker i {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 176px;
  height: 120px;
  transform: translateX(-50%);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px rgba(99, 230, 164, 0.5), 0 0 40px rgba(99, 230, 164, 0.14) inset;
}

.mc-reel-marker i:last-child { width: 208px; box-shadow: none; border-left: 1px solid rgba(99, 230, 164, 0.18); border-right: 1px solid rgba(99, 230, 164, 0.18); }
.mc-draw.is-settled .mc-reel-marker i { box-shadow: 0 0 0 1px rgba(255, 95, 48, 0.6), 0 0 60px rgba(255, 95, 48, 0.2) inset; }
.mc-draw.is-settled .mc-reel-marker i:last-child { box-shadow: none; border-color: rgba(255, 95, 48, 0.22); }

.mc-reel-fade { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; pointer-events: none; }
.mc-reel-fade.is-left { left: 0; background: linear-gradient(90deg, #05070b 8%, transparent); }
.mc-reel-fade.is-right { right: 0; background: linear-gradient(270deg, #05070b 8%, transparent); }

.mc-draw-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }

.mc-draw-chip {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  width: 90px;
  padding: 0.55rem 0.3rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--edge);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
}

.mc-draw-chip.is-you { border-color: rgba(99, 230, 164, 0.32); }
.mc-draw-chip-name { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mc-draw-chip-face { display: grid; justify-items: center; gap: 0.34rem; }

.mc-draw-chip.is-seeker {
  background: linear-gradient(180deg, rgba(255, 95, 48, 0.26), rgba(255, 95, 48, 0.07));
  border-color: var(--seeker);
  transform: translateY(-4px) scale(1.05);
}

/* The portrait's own colours are written by `flip()`; this only handles the
   plate around it. */
.mc-draw-chip.is-seeker .mc-draw-chip-name { color: var(--seeker-hi); }
.mc-draw-chip.is-seeker .mc-draw-chip-face { animation: chipFlip 0.55s var(--ease); }

@keyframes chipFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg) scale(1.12); }
  100% { transform: rotateY(0deg); }
}

.mc-draw-burst {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--seeker);
  animation: burst 0.85s var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes burst {
  from { opacity: 0.9; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.55); }
}

.mc-verdict {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  min-height: 120px;
}

.mc-verdict.is-shown,
.mc-verdict.is-waiting { opacity: 1; transform: none; }
.mc-verdict-rule { width: 56px; height: 2px; background: var(--green); }
.mc-verdict.is-seeker .mc-verdict-rule { background: var(--seeker); }
.mc-verdict-kicker { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-4); }

.mc-verdict-line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--green-hi);
  text-shadow: 0 0 50px var(--green-glow);
  animation: verdictPop 0.6s var(--ease-out) both;
}

.mc-verdict.is-seeker .mc-verdict-line { color: var(--seeker-hi); text-shadow: 0 0 60px var(--seeker-glow); }

@keyframes verdictPop {
  0% { opacity: 0; transform: scale(1.2); filter: blur(10px); letter-spacing: 0.3em; }
  100% { opacity: 1; transform: scale(1); filter: none; letter-spacing: 0.08em; }
}

.mc-verdict-sub { max-width: 46ch; font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }

/* Keeps the verdict's footprint occupied while the reel is still spinning. */
.mc-verdict-wait { display: grid; justify-items: center; gap: 0.8rem; padding-top: 1.4rem; }
.mc-verdict-dots { display: flex; gap: 0.5rem; }

.mc-verdict-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: waitDot 1.35s ease-in-out infinite;
}

.mc-verdict-dots i:nth-child(2) { animation-delay: 0.18s; }
.mc-verdict-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes waitDot {
  0%, 70%, 100% { background: var(--ink-4); transform: scale(1); }
  35% { background: var(--green); transform: scale(1.45); }
}

.mc-verdict-wait-line { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mc-verdict.is-shown .mc-verdict-wait { display: none; }

.mc-draw-foot { position: absolute; right: 2.2rem; bottom: 2rem; display: flex; gap: 0.6rem; }

/* One frame of light per seeker locked in. */
.mc-draw-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 45% at 50% 40%, rgba(255, 130, 80, 0.5), transparent 70%);
  mix-blend-mode: screen;
}

.mc-draw-flash.is-on { animation: drawFlash 0.75s var(--ease-out) forwards; }

@keyframes drawFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------- seeker hold (PREP) */

/* A held seeker cannot walk (`PlayerController._movementAllowed`) and there is
   no spawn room to be held in, so for ninety seconds they stared at whatever
   happened to be in front of the spawn point. This is the room they are held
   in: full-bleed, seeker-orange, and blurred over the live map rather than
   opaque, because the sheet's rule is that the house is always present.

   It is `pointer-events: none` throughout. The pointer is locked to the canvas
   during PREP, so there is no cursor to click with; the panel moves on its own
   instead (the plan sweeps wing by wing, the advice rotates). */

.mc-hold {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.mc-hold.is-on { opacity: 1; visibility: visible; }

/* Translucent, not opaque: the sheet's standing rule is that the house stays
   present behind every panel, and the whole point of the hold is that the
   seeker is looking *into* a room they are about to be let loose in. */
.mc-hold-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 4, 7, 0.86), rgba(3, 4, 7, 0.64) 44%, rgba(3, 4, 7, 0.88)),
    radial-gradient(80% 60% at 50% 0%, rgba(74, 26, 10, 0.4), transparent 70%);
  backdrop-filter: blur(26px) saturate(0.8);
  -webkit-backdrop-filter: blur(26px) saturate(0.8);
  transition: opacity 0.6s var(--ease-out), backdrop-filter 0.6s var(--ease-out);
}

.mc-hold-plate {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  padding: clamp(0.9rem, 2.2vh, 1.7rem) clamp(1rem, 2.6vw, 2.2rem);
  min-height: 0;
}

/* header ---------------------------------------------------------------- */

.mc-hold-head { display: grid; gap: 0.28rem; justify-items: start; position: relative; }
.mc-hold-eyebrow { display: flex; align-items: center; gap: 0.6rem; }

.mc-hold-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mc-hold-tag.is-seeker { color: var(--seeker); }
.mc-hold-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hair); }

.mc-hold-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.8rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 1.05;
  color: var(--bone);
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.8);
}

.mc-hold-lead {
  margin: 0;
  max-width: 74ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

.mc-hold-map-line {
  position: absolute;
  right: 0;
  top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* body ------------------------------------------------------------------ */

.mc-hold-body {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 292px;
  gap: 0.85rem;
  min-height: 0;
}

.mc-hold-col { display: grid; gap: 0.85rem; min-height: 0; }
.mc-hold-col.is-left { grid-template-rows: auto minmax(0, 1fr); }
.mc-hold-col.is-right { grid-template-rows: minmax(0, 1fr) auto; }

.mc-hold-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--edge);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: var(--shadow);
}

.mc-hold-card-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; }

.mc-hold-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.mc-hold-card-sub { font-size: var(--micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }

.mc-hold-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  white-space: nowrap;
}

/* countdown ------------------------------------------------------------- */

.mc-hold-timer { align-items: stretch; }

.mc-hold-dial {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 150px;
  max-width: 150px;
  margin: 0.1rem auto 0.45rem;
  display: grid;
  place-items: center;
}

.mc-hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-hold-ring-track { stroke: rgba(255, 255, 255, 0.075); stroke-width: 5; }

.mc-hold-ring-arc {
  stroke: var(--seeker);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--seeker-glow));
  transition: stroke 0.4s var(--ease);
}

.mc-hold-dial-face { position: relative; display: grid; justify-items: center; gap: 0.15rem; }

.mc-hold-clock-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.mc-hold-clock {
  font-family: var(--mono);
  font-size: 2.9rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.mc-hold-clock-note {
  text-align: center;
  font-size: var(--micro);
  line-height: 1.45;
  color: var(--ink-3);
  min-height: 1.45em;
}

/* The last ten seconds are a different feeling, so they get a different
   readout: one big number instead of `m:ss`, orange instead of bone, and a
   beat on every tick. */
.mc-hold.is-final .mc-hold-clock {
  font-size: 5rem;
  font-weight: 200;
  color: var(--seeker-hi);
  text-shadow: 0 0 60px var(--seeker-glow), 0 0 18px rgba(255, 95, 48, 0.5);
}

.mc-hold.is-final .mc-hold-clock-label { color: var(--seeker); letter-spacing: 0.42em; }
.mc-hold.is-final .mc-hold-clock-note { color: var(--seeker-hi); }
.mc-hold.is-final .mc-hold-ring-arc { stroke: var(--seeker-hi); stroke-width: 7; }

.mc-hold.is-final .mc-hold-timer {
  border-color: rgba(255, 95, 48, 0.55);
  background: linear-gradient(180deg, rgba(74, 22, 8, 0.55), var(--plate) 60%);
  box-shadow: var(--shadow), 0 0 46px rgba(255, 95, 48, 0.22), 0 0 0 1px rgba(255, 95, 48, 0.22) inset;
}

/* The whole screen changes temperature for the last ten seconds, not just the
   dial: at a glance from across a desk, "nearly out" has to be legible from the
   colour of the panel alone. */
.mc-hold.is-final .mc-hold-scrim {
  background:
    linear-gradient(180deg, rgba(6, 3, 2, 0.9), rgba(5, 3, 2, 0.78) 44%, rgba(6, 3, 2, 0.92)),
    radial-gradient(90% 70% at 22% 42%, rgba(140, 44, 14, 0.42), transparent 68%);
}

.mc-hold.is-final .mc-hold-title { color: var(--seeker-hi); }
.mc-hold.is-final .mc-hold-tip { border-left-width: 3px; }

.mc-hold.is-final .mc-hold-dial::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid rgba(255, 95, 48, 0.35);
  animation: holdPulse 1s var(--ease-out) infinite;
}

@keyframes holdPulse {
  0% { opacity: 0.85; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1.1); }
}

.mc-hold-clock.is-beat { animation: holdBeat 0.42s var(--ease-out); }

@keyframes holdBeat {
  0% { transform: scale(1.22); filter: blur(3px); opacity: 0.55; }
  100% { transform: scale(1); filter: none; opacity: 1; }
}

/* controls -------------------------------------------------------------- */

.mc-hold-keys { flex: 1 1 auto; display: grid; gap: 0.24rem; align-content: start; min-height: 0; overflow: hidden; }
.mc-hold-key { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0.55rem; align-items: start; }
.mc-hold-key .mc-key { justify-self: start; font-size: 0.6rem; letter-spacing: 0.04em; }
.mc-hold-key-body { display: grid; gap: 0; min-width: 0; }
.mc-hold-key-name { font-size: 0.76rem; font-weight: 650; color: var(--ink); line-height: 1.2; }
.mc-hold-key-note { font-size: var(--micro); line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-hold-keys-foot {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--edge);
  font-size: var(--micro);
  line-height: 1.4;
  color: var(--ink-3);
}

/* the house ------------------------------------------------------------- */

/* An explicit single 1fr row, and the plan absolutely positioned inside it.
   An auto row sized by an SVG that is itself sized by the row is circular, and
   Chrome resolves it to a 150px-tall default — the plan came out a strip. */
.mc-hold-house-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.9rem;
  min-height: 0;
}

.mc-hold-plan { position: relative; min-height: 150px; }
.mc-hold-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-hold-plan-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--micro); color: var(--ink-4); }

/* Bright enough to read as the connectivity graph it is: which wings touch is
   the one navigational fact a seeker cannot recover by looking around, and the
   cellar being reachable only through the laundry decides a whole sweep. */
.mc-hold-plan-link { fill: rgba(255, 255, 255, 0.115); stroke: rgba(255, 255, 255, 0.2); stroke-width: 0.14; }

.mc-hold-plan-room {
  fill: rgba(255, 255, 255, 0.045);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 0.18;
  transition: fill 0.5s var(--ease), stroke 0.5s var(--ease);
}

/* Every hide spot in the house, plotted. 158 dots is the single most useful
   thing this screen can show a seeker: it is the shape of the search. */
.mc-hold-plan-spot { fill: var(--bone); }

.mc-hold-plan-badge {
  fill: rgba(6, 9, 13, 0.88);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.16;
  transition: fill 0.5s var(--ease), stroke 0.5s var(--ease);
}

.mc-hold-plan-index {
  fill: var(--ink-2);
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--mono);
  font-weight: 700;
  transition: fill 0.5s var(--ease);
}

/* Named only while the sweep is on it. Seven labels at once collided with the
   dots and with each other; one at a time reads, and over ninety seconds the
   sweep names the whole house. `paint-order: stroke` puts the dark halo behind
   the glyphs so the label survives crossing a neighbouring room. */
.mc-hold-plan-tagline {
  fill: var(--seeker-hi);
  stroke: #05070b;
  stroke-width: 0.45;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  /* Out fast, in late (see the `.is-lit` rule): a symmetric crossfade put two
     room names on the plan at once every time the sweep stepped, which reads as
     a bug rather than as a transition. */
  transition: opacity 0.14s var(--ease);
}

.mc-hold-plan-tagline.is-tally { fill: var(--seeker); font-family: var(--mono); font-weight: 500; letter-spacing: 0; }

/* The sweep: one wing at a time lights up, which walks the eye around a house
   the player is about to have to search. */
.mc-hold-plan-wing.is-lit .mc-hold-plan-room { fill: rgba(255, 95, 48, 0.16); stroke: var(--seeker); }
.mc-hold-plan-wing.is-lit .mc-hold-plan-badge { fill: var(--seeker); stroke: var(--seeker-hi); }
.mc-hold-plan-wing.is-lit .mc-hold-plan-index { fill: #2a0a02; }
.mc-hold-plan-wing.is-lit .mc-hold-plan-tagline { opacity: 1; transition: opacity 0.3s var(--ease) 0.16s; }

.mc-hold-plan-you-dot { fill: var(--seeker-hi); }
.mc-hold-plan-you-ring { fill: none; stroke: var(--seeker); stroke-width: 0.3; animation: holdHere 2.4s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }

@keyframes holdHere {
  0% { opacity: 0.9; transform: scale(0.55); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

.mc-hold-plan-compass { opacity: 0.68; }
.mc-hold-plan-needle { fill: var(--ink-3); }
.mc-hold-plan-north { fill: var(--ink-3); text-anchor: middle; font-family: var(--mono); font-weight: 700; }

.mc-hold-wings { display: grid; align-content: start; gap: 1px; overflow-y: auto; min-height: 0; }

.mc-hold-wing {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.mc-hold-wing-index {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-4);
  text-align: center;
  transition: color 0.35s var(--ease);
}

.mc-hold-wing-name {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-hold-wing-count { font-family: var(--mono); font-size: var(--micro); color: var(--ink-3); text-align: right; }

/* `auto` on the tally column, and specific enough to survive the narrow-window
   override below: "SPOTS" is wider than the two-digit counts it heads and was
   being clipped to "SPOT". The right edges still line up because both are
   right-aligned in the same container. */
.mc-hold-wings .mc-hold-wing.is-head {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  margin-bottom: 0.2rem;
}
.mc-hold-wing.is-head .mc-hold-wing-name,
.mc-hold-wing.is-head .mc-hold-wing-count { font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-family: var(--font); font-weight: 700; }

.mc-hold-wing.is-lit { background: rgba(255, 95, 48, 0.12); border-color: rgba(255, 95, 48, 0.32); }
.mc-hold-wing.is-lit .mc-hold-wing-name,
.mc-hold-wing.is-lit .mc-hold-wing-count,
.mc-hold-wing.is-lit .mc-hold-wing-index { color: var(--seeker-hi); }
.mc-hold-wing.is-link .mc-hold-wing-name { color: var(--ink-4); font-style: italic; }
.mc-hold-wing.is-here .mc-hold-wing-name { color: var(--ink); }

.mc-hold-wing-here {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 95, 48, 0.26);
  background: rgba(255, 95, 48, 0.08);
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.mc-hold-wing-here-pin { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--seeker); box-shadow: 0 0 0 3px rgba(255, 95, 48, 0.22); }

/* plan legend ----------------------------------------------------------- */

.mc-hold-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--edge);
  font-size: var(--micro);
  color: var(--ink-3);
}

.mc-hold-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.mc-hold-legend-spot { width: 5px; height: 5px; border-radius: 50%; background: var(--bone); opacity: 0.65; }
.mc-hold-legend-you { width: 7px; height: 7px; border-radius: 50%; background: var(--seeker-hi); box-shadow: 0 0 0 2px rgba(255, 95, 48, 0.35); }

.mc-hold-legend-lit {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(6, 9, 13, 0.88);
}

/* quarry ---------------------------------------------------------------- */

.mc-hold-quarry-list { flex: 1 1 auto; display: grid; align-content: start; gap: 3px; overflow-y: auto; min-height: 0; }

.mc-hold-mark {
  --mark-face: 30px;
  display: grid;
  grid-template-columns: var(--mark-face) minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.4rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
}

.mc-hold-mark .mc-portrait { --size: var(--mark-face); }

.mc-hold-mark-body { display: grid; gap: 2px; min-width: 0; }
.mc-hold-mark-name { font-size: 0.8rem; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-hold-mark-work { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }

/* An indeterminate stripe, never a progress bar: the panel must not appear to
   report how far along a hider's paint job actually is. */
.mc-hold-mark-work i {
  position: relative;
  flex: none;
  width: 34px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.mc-hold-mark-work i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--ink-2), transparent);
  animation: holdPaint 2.2s var(--ease) infinite;
}

.mc-hold-mark:nth-child(2n) .mc-hold-mark-work i::after { animation-delay: 0.5s; }
.mc-hold-mark:nth-child(3n) .mc-hold-mark-work i::after { animation-delay: 1.1s; }

@keyframes holdPaint {
  0% { left: -50%; }
  100% { left: 105%; }
}

.mc-hold-quarry-foot { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--edge); }
.mc-hold-quarry-note { font-size: var(--micro); color: var(--ink-3); }

/* the deal -------------------------------------------------------------- */

.mc-hold-deal-rows { display: grid; gap: 0.28rem; }
.mc-hold-deal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.mc-hold-deal-key { font-size: var(--micro); letter-spacing: 0.06em; color: var(--ink-3); }
.mc-hold-deal-value { font-family: var(--mono); font-size: 0.76rem; color: var(--bone); }
.mc-hold-deal-note { margin: 0.45rem 0 0; font-size: var(--micro); line-height: 1.5; color: var(--ink-3); }

/* advice ---------------------------------------------------------------- */

.mc-hold-tip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem 0.65rem;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--seeker);
  background: linear-gradient(90deg, rgba(255, 95, 48, 0.09), rgba(255, 255, 255, 0.02));
}

.mc-hold-tip-label { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-4); }
.mc-hold-tip-line { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.mc-hold-tip-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--seeker-hi); white-space: nowrap; }
.mc-hold-tip-body { font-size: 0.79rem; line-height: 1.45; color: var(--ink); }
.mc-hold-tip.is-in .mc-hold-tip-line { animation: holdTip 0.5s var(--ease-out); }

@keyframes holdTip {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.mc-hold-tip-pips { display: flex; gap: 4px; }
.mc-hold-tip-pips i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: background 0.3s, transform 0.3s var(--ease); }
.mc-hold-tip-pips i.is-on { background: var(--seeker); transform: scale(1.5); }

/* release --------------------------------------------------------------- */

.mc-hold-release {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  opacity: 0;
  pointer-events: none;
}

/* Positioned, so the absolutely-positioned `::before` backing below paints
   *under* the words rather than over them. A static child loses to a positioned
   sibling in CSS paint order however late it comes in the DOM, which greyed the
   whole beat out. */
.mc-hold-release > * { position: relative; }

.mc-hold-release-kicker { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5em; text-transform: uppercase; color: var(--seeker); }
.mc-hold-release-rule { width: 0; height: 2px; background: var(--seeker); }

.mc-hold-release-word {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--seeker-hi);
  text-shadow: 0 0 60px var(--seeker-glow), 0 4px 30px rgba(0, 0, 0, 0.9);
}

.mc-hold-release-sub { max-width: 60ch; text-align: center; font-size: 0.82rem; color: var(--ink); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); }

/* Its own backing, for the same reason the announcer has one: by the time this
   plays the scrim has cleared, so the words land on whatever the seeker happens
   to be facing — which, at a ballroom spawn, is a brightly lit wall panel.
   Deliberately far larger and shallower than the announcer's plate: at the
   announcer's size the falloff was inside the frame and read as a dark smudge
   painted on the wall rather than as a vignette. */
.mc-hold-release::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190vw;
  height: 46rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(38% 46% at 50% 50%, rgba(2, 4, 7, 0.8), rgba(2, 4, 7, 0.42) 44%, transparent 72%);
  pointer-events: none;
}

/* The panel does not vanish; it gets out of the way. The two flanks slide off,
   the house lifts, the scrim clears and the room the seeker has been reading
   about is finally in front of them.

   Every rule here also sets the *resting* state it animates to, and the word
   holds at full opacity rather than fading itself out. Under
   `prefers-reduced-motion: reduce` — which is the default in headless Chromium
   and is a real user setting — the sheet collapses every animation to 0.01 ms,
   so anything that relied on a keyframe to be visible would never be seen at
   all. This way the release still reads: the panel is gone, the word is up, and
   `seeker_hold.js` clears the class when the beat is over. */
.mc-hold.is-release .mc-hold-scrim { opacity: 0; animation: holdScrim 0.95s var(--ease-out) forwards; }
.mc-hold.is-release .mc-hold-head { opacity: 0; animation: holdOutUp 0.5s var(--ease) forwards; }
.mc-hold.is-release .mc-hold-tip { opacity: 0; animation: holdOutDown 0.5s var(--ease) forwards; }
.mc-hold.is-release .mc-hold-col.is-left { opacity: 0; animation: holdOutLeft 0.62s var(--ease) forwards; }
.mc-hold.is-release .mc-hold-col.is-right { opacity: 0; animation: holdOutRight 0.62s var(--ease) forwards; }
.mc-hold.is-release .mc-hold-house { opacity: 0; animation: holdOutHouse 0.75s var(--ease-out) forwards; }
.mc-hold.is-release .mc-hold-release { opacity: 1; animation: holdGo 0.95s var(--ease-out); }
.mc-hold.is-release .mc-hold-release-rule { width: 220px; animation: holdGoRule 0.95s var(--ease-out); }

@keyframes holdScrim {
  0% { opacity: 1; }
  100% { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}

@keyframes holdOutLeft {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-16vw) scale(0.94); }
}

@keyframes holdOutRight {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(16vw) scale(0.94); }
}

@keyframes holdOutHouse {
  0% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(1.16); filter: blur(8px); }
}

@keyframes holdOutUp {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2.4rem); }
}

@keyframes holdOutDown {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(2.4rem); }
}

@keyframes holdGo {
  0% { opacity: 0; transform: scale(1.3); filter: blur(14px); letter-spacing: 0.6em; }
  26% { opacity: 1; transform: scale(1); filter: none; letter-spacing: 0.3em; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes holdGoRule {
  0% { width: 0; }
  40%, 100% { width: 220px; }
}

/* The HUD's own top bar is the same information one size smaller, and the
   reticle points at a wall the seeker cannot walk to. Both stand down while
   the briefing owns the screen. */
.mc-root.is-holding .mc-hud-top,
.mc-root.is-holding .mc-reticle,
.mc-root.is-holding .mc-hints { opacity: 0; transition: opacity 0.3s var(--ease); }

/* Narrow and short windows. The three-column body is the first thing to give:
   the plan is the piece that must stay large, so the flanks shed width before
   it does, and below 1000px the quarry and the deal fall under the plan as a
   pair rather than being dropped. */
@media (max-width: 1180px) {
  .mc-hold-body { grid-template-columns: 244px minmax(0, 1fr) 250px; gap: 0.7rem; }
  .mc-hold-house-body { grid-template-columns: minmax(0, 1fr) 164px; gap: 0.7rem; }
  .mc-hold-wing { grid-template-columns: 14px minmax(0, 1fr) 26px; gap: 0.35rem; padding-inline: 0.35rem; }
  .mc-hold-key { grid-template-columns: 54px minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .mc-hold-body { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mc-hold-col.is-right {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-rows: auto;
    max-height: 210px;
  }
}

@media (max-height: 700px) {
  .mc-hold-plate { gap: 0.6rem; }
  .mc-hold-dial { max-height: 132px; max-width: 132px; }
  .mc-hold-clock { font-size: 2.2rem; }
  .mc-hold.is-final .mc-hold-clock { font-size: 3.6rem; }
  .mc-hold-lead { display: none; }
  .mc-hold-key-note { display: none; }
  .mc-hold-mark { --mark-face: 24px; padding-block: 0.22rem; }
  .mc-hold-mark-name { font-size: 0.75rem; }
  .mc-hold-card { padding: 0.7rem 0.8rem 0.8rem; }
}

/* ------------------------------------------------------------------- HUD */

.mc-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  font-variant-numeric: tabular-nums;
}

.mc-hud.is-on.is-live { opacity: 1; }

/* One 24px safe area for every HUD widget — top, bottom, meter and cooldowns
   all sit on the same gutter, instead of five anchors at five different insets. */
.mc-hud { --safe: 1.5rem; }

.mc-hud-top {
  position: absolute;
  top: var(--safe);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1.4rem;
  padding: 0 var(--safe);
}

.mc-objective {
  justify-self: start;
  max-width: 32ch;
  padding: 0.5rem 0.85rem 0.55rem;
  border-radius: var(--r-sm);
  background: rgba(6, 9, 13, 0.74);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink);
}

/* A titled card rather than an unlabelled grey box flush to the corner. */
.mc-objective::before {
  content: "Objective";
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.mc-phase {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 220px;
  padding: 0.55rem 1.4rem 0.7rem;
  border-radius: var(--r-md);
  background: rgba(6, 9, 13, 0.78);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
}

.mc-phase-row { display: flex; align-items: center; gap: 0.55rem; }
.mc-phase-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); }
.mc-phase-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--hair); }
.mc-phase-role { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.mc-phase-role.is-hider { color: var(--green); }
.mc-phase-role.is-seeker { color: var(--seeker); }

.mc-phase-clock {
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bone);
  transition: color 0.3s;
}

.mc-phase-clock.is-urgent { color: var(--seeker); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.55; } }

.mc-phase-bar { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; overflow: hidden; margin-top: 0.3rem; }
.mc-phase-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.24s linear; }
.mc-phase.is-hunt .mc-phase-bar i { background: var(--seeker); }

.mc-remaining {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  padding: 0.45rem 0.85rem 0.55rem;
  border-radius: var(--r-sm);
  background: rgba(6, 9, 13, 0.74);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

.mc-remaining-label { font-size: var(--micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.mc-remaining-value { font-family: var(--mono); font-size: 1.65rem; line-height: 1; color: var(--bone); }
.mc-remaining-pips { display: flex; gap: 3px; margin-top: 0.15rem; }
.mc-pip { width: 12px; height: 3px; border-radius: 99px; background: var(--green); transition: background 0.3s; }
.mc-pip.is-out { background: rgba(255, 255, 255, 0.14); }

.mc-hud-mid { position: absolute; inset: 0; }

.mc-meter {
  position: absolute;
  left: var(--safe);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(232px, 17vw, 320px);
  display: grid;
  gap: 0.32rem;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: var(--r-md);
  background: rgba(6, 9, 13, 0.76);
  border: 1px solid var(--edge);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.mc-meter-head { display: flex; align-items: baseline; justify-content: space-between; }
.mc-meter-label { font-size: var(--micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.mc-meter-value { font-family: var(--mono); font-size: 0.86rem; color: var(--bone); }
.mc-meter-track { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.mc-meter-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--seeker), var(--warn) 52%, var(--green)); transition: width 0.28s var(--ease); }
.mc-meter-mark { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.35); }
.mc-meter-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.mc-meter-word { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-meter-worst { font-size: var(--micro); color: var(--ink-3); }
.mc-meter-backing { font-size: var(--micro); color: var(--ink-3); line-height: 1.35; }
.mc-meter-coach {
  margin-top: 0.15rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--r-sm);
  background: rgba(255, 194, 74, 0.14);
  border: 1px solid rgba(255, 194, 74, 0.34);
  font-size: var(--micro);
  line-height: 1.4;
  color: var(--warn);
}

.mc-meter.is-good .mc-meter-word { color: var(--green); }
.mc-meter.is-ok .mc-meter-word { color: var(--warn); }
.mc-meter.is-warn .mc-meter-word { color: #ff9d4a; }
.mc-meter.is-bad .mc-meter-word { color: var(--seeker); }

/* One reticle, one presentation. The documented key (`hold V`) used to draw a
   30px ring with a 20px chip and no readout at all, while the paint panel's
   PICK COLOUR button drew a larger reticle with a hex label — so the
   advertised way of using the headline tool was the blind one. Sampling now
   grows this to the same size and shows the same readout either way. */
.mc-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  --sample: #ffffff;
  transition: width 0.2s var(--ease), height 0.2s var(--ease);
}

.mc-reticle.is-sampling { width: 74px; height: 74px; }

.mc-reticle-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 4px rgba(0, 0, 0, 0.9); }
.mc-reticle.is-seeker .mc-reticle-dot { width: 4px; height: 4px; background: var(--seeker-hi); box-shadow: 0 0 8px var(--seeker-glow); }

/* Four ticks around the dot. Seekers only: a hider is looking at their own
   body, not aiming at anything, so a crosshair would be a lie. */
.mc-reticle-cross { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s var(--ease); }
.mc-reticle.is-seeker .mc-reticle-cross { opacity: 1; }

.mc-reticle-cross i {
  position: absolute;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.mc-reticle-cross i:nth-child(1) { left: 50%; top: 6px; width: 1.5px; height: 8px; transform: translateX(-50%); }
.mc-reticle-cross i:nth-child(2) { left: 50%; bottom: 6px; width: 1.5px; height: 8px; transform: translateX(-50%); }
.mc-reticle-cross i:nth-child(3) { top: 50%; left: 6px; width: 8px; height: 1.5px; transform: translateY(-50%); }
.mc-reticle-cross i:nth-child(4) { top: 50%; right: 6px; width: 8px; height: 1.5px; transform: translateY(-50%); }

.mc-reticle-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px dashed var(--sample);
  /* A dark outline so the ring survives on a near-white surface, which is most
     of the ballroom floor. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}

.mc-reticle.is-sampling .mc-reticle-ring { animation: pickSpin 3.5s linear infinite; }

.mc-reticle-chip {
  position: absolute;
  left: 50%;
  top: 46px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  transform: translateX(-50%) scale(0.6);
  background: var(--sample);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}

/* Hex, surface name and how far the sample is from the surface behind the
   player — the three things a player needs and none of which the hold-V
   presentation used to show. */
.mc-reticle-read {
  position: absolute;
  left: 50%;
  top: 80px;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.32rem 0.6rem;
  border-radius: var(--r-sm);
  transform: translateX(-50%);
  background: rgba(6, 9, 13, 0.86);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.mc-reticle.is-sampling .mc-reticle-read { opacity: 1; }
.mc-reticle-hex { font-family: var(--mono); font-size: var(--micro); color: var(--bone); }
.mc-reticle-surface { font-size: var(--micro); color: var(--ink-2); }
.mc-reticle-delta { font-size: var(--micro); color: var(--ink-3); }
.mc-reticle-delta.is-close { color: var(--green); }

.mc-reticle.is-sampling .mc-reticle-ring { opacity: 1; transform: scale(1); }
.mc-reticle.is-sampling .mc-reticle-chip { opacity: 1; transform: translateX(-50%) scale(1); }

/* Backed, like every other HUD widget: unplated circles with grey labels are
   invisible over a light floor, which is where a seeker spends the hunt. */
.mc-cooldowns {
  position: absolute;
  right: var(--safe);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-md);
  background: rgba(6, 9, 13, 0.76);
  border: 1px solid var(--edge);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.mc-cool { display: grid; justify-items: center; gap: 0.28rem; }

.mc-cool-dial {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 9, 13, 0.8);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.mc-cool-dial i {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  --t: 1;
  background: conic-gradient(var(--seeker) calc(var(--t) * 360deg), rgba(255, 255, 255, 0.08) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}

.mc-cool.is-ready .mc-cool-dial i { background: conic-gradient(var(--green) 360deg, transparent 0); }
.mc-cool-key { font-family: var(--mono); font-size: var(--micro); color: var(--ink-2); }
.mc-cool-label { font-size: var(--micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.mc-hud-bottom {
  position: absolute;
  bottom: var(--safe);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.4rem;
  padding: 0 var(--safe);
}

.mc-feed { justify-self: start; display: grid; gap: 4px; align-content: end; min-height: 1px; }

.mc-feed-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(6, 9, 13, 0.8);
  border: 1px solid var(--edge);
  backdrop-filter: blur(10px);
  font-size: 0.74rem;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.28s var(--ease), transform 0.3s var(--ease);
}

.mc-feed-row.is-in { opacity: 1; transform: none; }
.mc-feed-row.is-out { opacity: 0; transform: translateX(-10px); }
.mc-feed-row.is-you { border-color: rgba(255, 95, 48, 0.5); background: rgba(50, 12, 4, 0.62); }
.mc-feed-row.is-yours { border-color: rgba(99, 230, 164, 0.4); }
.mc-feed-name { font-weight: 650; }
.mc-feed-name.is-seeker { color: var(--seeker-hi); }
.mc-feed-name.is-hider { color: var(--bone); }
.mc-feed-verb { color: var(--ink-3); display: grid; place-items: center; }
.mc-feed-score { font-family: var(--mono); font-size: 0.68rem; color: var(--green); }
.mc-feed-camo { font-size: var(--micro); color: var(--ink-3); }

.mc-pose-chip {
  justify-self: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  background: rgba(6, 9, 13, 0.78);
  border: 1px solid var(--edge);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  min-width: 300px;
  transition: border-color 0.3s, background 0.3s;
}

.mc-pose-chip.is-locked { border-color: rgba(99, 230, 164, 0.45); background: rgba(9, 26, 19, 0.64); }
.mc-pose-chip-art { color: var(--bone); display: grid; place-items: center; width: 36px; }
.mc-pose-chip-name { font-size: 0.82rem; font-weight: 650; }
.mc-pose-chip-reads { font-size: var(--micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-pose-lock {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mc-pose-chip.is-locked .mc-pose-lock { background: rgba(99, 230, 164, 0.18); color: var(--green-hi); }

.mc-hud-centre { justify-self: center; display: grid; gap: 0.5rem; justify-items: center; }

.mc-spectate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-md);
  background: rgba(38, 10, 4, 0.78);
  border: 1px solid rgba(255, 95, 48, 0.5);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.mc-spectate-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--seeker);
  box-shadow: 0 0 12px var(--seeker);
  animation: pulse 1.6s ease-in-out infinite;
}

.mc-spectate-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--seeker-hi); }
.mc-spectate-sub { font-size: var(--micro); color: var(--ink-3); }

/* `justify-items: start` plus a fixed keycap column, so the caps form a column
   instead of being pushed around by the longest label. */
.mc-hints {
  justify-self: end;
  display: grid;
  gap: 5px;
  justify-items: stretch;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(6, 9, 13, 0.66);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.mc-hint { display: grid; grid-template-columns: 2.1rem auto; align-items: center; gap: 0.5rem; font-size: var(--micro); color: var(--ink); justify-items: start; }

.mc-threat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(26% 22% at 50% 33%,
    rgba(255, 74, 32, 0.85) 0%,
    rgba(255, 74, 32, 0.34) 42%,
    rgba(255, 74, 32, 0) 72%);
  mix-blend-mode: screen;
  transition: opacity 0.18s linear;
}

.mc-threat.is-critical { animation: threatPulse 0.9s ease-in-out infinite; }

@keyframes threatPulse { 50% { filter: brightness(1.4); } }

/* scoreboard ------------------------------------------------------------ */

.mc-scoreboard {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), visibility 0.18s;
  background: rgba(2, 4, 7, 0.68);
  backdrop-filter: blur(8px);
}

.mc-scoreboard.is-open { opacity: 1; visibility: visible; }

.mc-score-plate {
  width: min(720px, 88vw);
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--r-lg);
  background: rgba(8, 11, 16, 0.93);
  border: 1px solid var(--edge);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.24s var(--ease-out);
}

.mc-scoreboard.is-open .mc-score-plate { transform: none; }
.mc-score-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; }
.mc-score-head h2 { margin: 0; font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.mc-score-hint { font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.mc-score-body { display: grid; gap: 3px; }

.mc-score-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 74px 78px 62px;
  align-items: center;
  gap: 0.7rem;
  height: 40px;
  padding: 0 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid transparent;
}

.mc-score-row.is-seeker { border-left-color: var(--seeker); }
.mc-score-row.is-hider { border-left-color: rgba(255, 255, 255, 0.2); }
.mc-score-row.is-you { background: rgba(99, 230, 164, 0.09); }
.mc-score-row.is-caught { opacity: 0.5; }
.mc-score-name { font-size: 0.83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-score-role,
.mc-score-state { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.mc-score-points { font-family: var(--mono); font-size: 0.92rem; text-align: right; color: var(--bone); }

/* ----------------------------------------------------------- paint panel */

.mc-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
}

.mc-overlay.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
/* Dim, do not blur. The paint panel's own subtitle is "Match the surface you
   intend to become part of", and blurring the world means the player can see
   neither that surface nor their own body while deciding — so every adjustment
   costs a close, look, reopen on a 90-second clock. */
.mc-overlay-scrim { position: absolute; inset: 0; background: rgba(2, 4, 7, 0.42); transition: opacity 0.24s var(--ease); }
.mc-overlay-scrim.is-soft { background: rgba(2, 4, 7, 0.3); }

/* Docked to the left, not centred over the body: the mannequin sits slightly
   right of centre in the third-person frame, so this keeps a live view of both
   the body and the surface behind it while the panel is open. */
.mc-paint-sheet {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translate(0, -50%) scale(0.985);
  width: min(1040px, 78vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--plate);
  border: 1px solid var(--edge);
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.26s var(--ease);
}

.mc-paint.is-on .mc-paint-sheet { transform: translate(0, -50%) scale(1); opacity: 1; }
.mc-paint.is-picking .mc-paint-sheet { opacity: 0.045; transform: translate(0, -50%) scale(0.97); pointer-events: none; }
.mc-paint.is-picking .mc-overlay-scrim { opacity: 0; }

.mc-paint-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem 0.9rem; }
.mc-paint-head > div:first-child { flex: 1; }
.mc-paint-title { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 750; letter-spacing: 0.2em; text-transform: uppercase; }
.mc-paint-sub { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--ink-3); }

.mc-paint-gate {
  margin: 0 1.4rem 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  background: rgba(255, 95, 48, 0.12);
  border: 1px solid rgba(255, 95, 48, 0.3);
  color: var(--seeker-hi);
  font-size: 0.74rem;
}

.mc-paint-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: 1px;
  background: var(--edge);
  border-top: 1px solid var(--edge);
  overflow: hidden;
  min-height: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* `min-width: 0` on every child: without it a grid item's implicit `auto`
   minimum keeps a button row at its widest intrinsic size and the column spills
   past the divider, which is what sliced STRIP and cut "Symmetry" to "Symme". */
.mc-paint-col {
  background: rgba(9, 12, 17, 0.55);
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: 0.72rem;
  align-content: start;
  overflow-y: auto;
  min-width: 0;
}

.mc-paint-col > * { min-width: 0; }

.mc-mix-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mc-mix-actions .mc-btn { flex: 1 1 150px; min-width: 0; padding-inline: 0.7rem; }
.mc-mix-actions .mc-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.mc-col-head h3,
.mc-col-head h4 { margin: 0; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.mc-col-head.is-sub { margin-top: 0.2rem; }
.mc-col-key { font-size: 0.62rem; color: var(--ink-4); }

/* body diagram */
.mc-body { display: grid; place-items: center; padding: 0.2rem 0; }
.mc-body-svg { width: 100%; max-width: 188px; height: auto; overflow: visible; }
.mc-body-shadow { fill: rgba(0, 0, 0, 0.4); }

/* No `fill` / `stroke` here on purpose — `setPaint` writes them as attributes,
   and a CSS declaration would win over every one of them. */
.mc-part {
  stroke-width: 1.2;
  cursor: pointer;
  transition: filter 0.18s var(--ease), stroke 0.18s var(--ease);
  filter: brightness(0.72) saturate(0.9);
}

.mc-part.is-painted { filter: brightness(0.95) saturate(1); }

.mc-part-line { stroke-width: 15; }

.mc-part:hover { filter: brightness(0.92) saturate(1); stroke: var(--green); }
.mc-part.is-selected { filter: brightness(1) saturate(1.05) drop-shadow(0 0 5px rgba(99, 230, 164, 0.8)); stroke: var(--green-hi); stroke-width: 2; }
.mc-part.is-preview { filter: brightness(1) saturate(1); stroke-dasharray: 4 3; }
.mc-part.is-mirror { stroke: rgba(99, 230, 164, 0.75); stroke-width: 1.8; filter: brightness(1) saturate(1); }
.mc-body.is-whole .mc-part { filter: brightness(0.92) saturate(1); }

.mc-part-warn {
  fill: none;
  stroke: var(--seeker);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: 0.85;
  animation: warnSpin 6s linear infinite;
  pointer-events: none;
}

@keyframes warnSpin { to { stroke-dashoffset: -40; } }

.mc-target-copy { display: grid; gap: 0.12rem; text-align: center; }
.mc-target-name { font-size: 0.88rem; font-weight: 650; }
.mc-target-hint { font-size: 0.68rem; color: var(--ink-3); min-height: 1.2em; }
/* Wrapping rows and shrinkable buttons: at the 1360px breakpoint the column
   content needed 267px against a 232px track, and the symmetry toggle read
   "Symme", the part counter "15 p", and the STRIP button was sliced by the
   column divider. */
.mc-target-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.mc-target-tools > * { flex: 1 1 108px; min-width: 0; }
.mc-target-tools .mc-btn { width: 100%; min-width: 0; padding-inline: 0.6rem; }
.mc-target-tools .mc-btn span,
.mc-toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mixer */
.mc-mix-top { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0.9rem; align-items: center; }

.mc-mix-chip {
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 10px 26px rgba(0, 0, 0, 0.5);
  transition: background 0.14s linear;
}

.mc-mix-read { display: grid; gap: 0.2rem; }
.mc-mix-hex { font-family: var(--mono); font-size: 1.12rem; color: var(--bone); }
.mc-mix-meta { font-size: 0.7rem; color: var(--ink-3); }
.mc-mix-source-row { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; }
.mc-mix-source-label { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.mc-mix-source { width: 18px; height: 18px; border-radius: 5px; background: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; }

.mc-mix-sliders { display: grid; gap: 0.65rem; padding: 0.8rem 0.9rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.032); border: 1px solid var(--edge); }
.mc-mix-sliders.is-surface { background: rgba(255, 255, 255, 0.018); }
.mc-mix-actions { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }

/* library */
.mc-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.mc-swatch { --tint: #ffffff; display: grid; gap: 0.22rem; border-radius: var(--r-sm); transition: transform 0.16s var(--ease); }

.mc-swatch-chip {
  display: block;
  height: 34px;
  border-radius: 6px;
  background: var(--tint);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.16s var(--ease);
}

.mc-swatch-hex { font-family: var(--mono); font-size: 0.54rem; color: var(--ink-4); }
.mc-swatch:hover { transform: translateY(-2px); }
.mc-swatch:hover .mc-swatch-chip { box-shadow: 0 0 0 2px var(--green) inset, 0 6px 16px rgba(0, 0, 0, 0.5); }
.mc-swatch:hover .mc-swatch-hex { color: var(--ink-2); }
.mc-swatch-empty { grid-column: 1 / -1; padding: 1rem 0; text-align: center; font-size: 0.72rem; color: var(--ink-4); }

.mc-lib-meter { display: grid; gap: 0.32rem; padding: 0.7rem 0.8rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.032); border: 1px solid var(--edge); }

.mc-partlist { display: grid; gap: 3px; }
.mc-partlist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0.34rem 0.45rem; border-radius: 6px; background: rgba(255, 255, 255, 0.028); }
.mc-partlist-name { font-size: 0.7rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-partlist-pair { display: flex; align-items: center; gap: 0.25rem; }
.mc-mini-chip { width: 13px; height: 13px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }
.mc-partlist-arrow { font-size: 0.6rem; color: var(--ink-4); }
.mc-partlist-de { font-family: var(--mono); font-size: 0.63rem; color: var(--warn); }
.mc-partlist-empty { padding: 0.8rem 0; text-align: center; font-size: 0.7rem; color: var(--ink-4); }

/* picking mode */
.mc-pick-catcher { position: absolute; inset: 0; cursor: crosshair; display: none; }
.mc-paint.is-picking .mc-pick-catcher { display: block; }

.mc-pick-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  display: none;
  place-items: center;
  pointer-events: none;
  --sample: #ffffff;
}

.mc-paint.is-picking .mc-pick-reticle { display: grid; }

.mc-pick-reticle i {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px dashed var(--sample);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 0, 0, 0.5);
  animation: pickSpin 3.5s linear infinite;
}

@keyframes pickSpin { to { transform: rotate(360deg); } }

.mc-pick-chip {
  position: absolute;
  top: 84px;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ pose wheel */

.mc-wheel { display: grid; place-items: center; }
.mc-wheel-stage { position: relative; width: 600px; height: 600px; display: grid; place-items: center; }

.mc-wheel-dial {
  position: absolute;
  inset: 108px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(circle, rgba(8, 12, 17, 0.92) 38%, rgba(8, 12, 17, 0.3) 70%, transparent 73%);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.65) inset;
}

/* Spokes between the eight sectors, so the ring reads as a dial. */
.mc-wheel-dial::after {
  content: "";
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: conic-gradient(from -22.5deg,
    rgba(255, 255, 255, 0.16) 0deg, transparent 0.4deg, transparent 44.6deg,
    rgba(255, 255, 255, 0.16) 45deg, transparent 45.4deg, transparent 89.6deg);
  -webkit-mask: radial-gradient(circle, transparent 44%, #000 45%, #000 99%, transparent 100%);
  mask: radial-gradient(circle, transparent 44%, #000 45%, #000 99%, transparent 100%);
  pointer-events: none;
}

.mc-wheel-ring { position: absolute; inset: 0; }

.mc-wheel-tile {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 116px;
  height: 116px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.15rem;
  border-radius: var(--r-md);
  background: rgba(11, 15, 21, 0.8);
  border: 1px solid var(--edge);
  backdrop-filter: blur(10px);
  color: var(--ink-2);
  transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.mc-wheel-key { position: absolute; top: 6px; left: 8px; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-4); }
.mc-wheel-art { display: grid; place-items: center; height: 56px; color: var(--bone); }
.mc-wheel-name { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

.mc-wheel-tile:hover,
.mc-wheel-tile.is-on {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--green);
  background: rgba(16, 34, 26, 0.92);
  color: var(--green-hi);
  box-shadow: 0 0 34px var(--green-glow);
}

.mc-wheel-tile.is-current { border-color: rgba(255, 255, 255, 0.4); color: var(--bone); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset; }
.mc-wheel-tile.is-current .mc-wheel-key { color: var(--ink-2); }

.mc-wheel-hub { position: relative; display: grid; justify-items: center; gap: 0.28rem; text-align: center; width: 210px; }
.mc-wheel-hub-kicker { font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-4); }
.mc-wheel-hub-name { font-family: var(--font-display); font-size: 1.36rem; font-weight: 750; }
.mc-wheel-hub-reads { font-size: 0.7rem; color: var(--ink-3); line-height: 1.4; min-height: 2.4em; }
.mc-wheel-hub .mc-btn { margin-top: 0.4rem; }
.mc-wheel-hub .mc-btn.is-danger { --btn-bg: rgba(255, 95, 48, 0.18); --btn-ink: var(--seeker-hi); --btn-edge: rgba(255, 95, 48, 0.4); box-shadow: none; }

.mc-wheel-foot {
  position: absolute;
  bottom: 4.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  background: rgba(6, 9, 13, 0.72);
  border: 1px solid var(--edge);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mc-wheel.is-on .mc-wheel-stage { animation: wheelIn 0.3s var(--ease-out) both; }

@keyframes wheelIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------- results */

.mc-results {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  padding: 1.6rem clamp(1rem, 4vw, 3.2rem) 1.3rem;
  background: radial-gradient(80% 60% at 50% 0%, rgba(14, 20, 28, 0.9), rgba(3, 5, 8, 0.97) 70%);
  backdrop-filter: blur(24px) saturate(0.9);
  -webkit-backdrop-filter: blur(24px) saturate(0.9);
}

.mc-res-rays {
  position: absolute;
  left: 50%;
  top: -40%;
  width: 130vmax;
  height: 130vmax;
  transform: translateX(-50%);
  background: conic-gradient(from 200deg, transparent, rgba(99, 230, 164, 0.07) 12deg, transparent 24deg,
    transparent 60deg, rgba(99, 230, 164, 0.05) 72deg, transparent 84deg);
  animation: rays 60s linear infinite;
  pointer-events: none;
}

.mc-res-banner { position: relative; display: grid; justify-items: center; gap: 0.34rem; text-align: center; }
.mc-res-kicker { font-size: 0.64rem; letter-spacing: 0.44em; text-transform: uppercase; color: var(--green); }
.mc-res-banner.is-seekers .mc-res-kicker { color: var(--seeker); }

.mc-res-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bone);
  animation: verdictPop 0.7s var(--ease-out) both;
}

.mc-res-sub { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
.mc-res-stats { display: flex; gap: 0.4rem; margin-top: 0.3rem; flex-wrap: wrap; justify-content: center; }

.mc-res-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; min-height: 0; align-items: start; align-content: start; }
.mc-res-panel { max-height: 100%; }
.mc-res-panel { display: flex; flex-direction: column; min-height: 0; }
/* The board holds 8 rows and showed 6, flush, with no scrollbar and no fade —
   so the two players who did the hunting simply never appeared on the
   end-of-round screen. A stable gutter keeps the scrollbar visible and the mask
   makes the cut edge read as "more below" rather than as the end of the list. */
.mc-res-board,
.mc-res-reveal {
  display: grid;
  gap: 4px;
  padding: 0 0.8rem 0.9rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  align-content: start;
  min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), rgba(0, 0, 0, 0.15));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), rgba(0, 0, 0, 0.15));
}

.mc-res-panel .mc-panel-count { color: var(--ink-2); }

.mc-res-row,
.mc-reveal-row { animation: rowIn 0.45s var(--ease-out) both; animation-delay: var(--delay, 0ms); }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mc-res-row {
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid transparent;
}

.mc-res-row.is-seeker { border-left-color: var(--seeker); }
.mc-res-row.is-hider { border-left-color: rgba(255, 255, 255, 0.22); }
.mc-res-row.is-you { background: rgba(99, 230, 164, 0.1); }
.mc-res-rank { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-4); }
.mc-res-name { font-size: 0.85rem; font-weight: 650; }
.mc-res-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.mc-res-tag { font-size: var(--micro); color: var(--ink-3); background: rgba(255, 255, 255, 0.05); border-radius: 4px; padding: 0.1rem 0.32rem; }
.mc-res-role { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mc-res-points { font-family: var(--mono); font-size: 0.98rem; text-align: right; color: var(--bone); }

.mc-reveal-row {
  display: grid;
  grid-template-columns: 36px 30px minmax(0, 1fr) 108px minmax(0, 148px);
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}

.mc-reveal-row.is-caught { background: rgba(255, 95, 48, 0.07); }
.mc-reveal-row.is-you { box-shadow: 0 0 0 1px rgba(99, 230, 164, 0.32) inset; }
.mc-reveal-pose { display: grid; place-items: center; color: var(--ink-2); }
.mc-reveal-name { font-size: 0.81rem; font-weight: 620; }
.mc-reveal-spot { font-size: var(--micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-reveal-camo { display: grid; gap: 0.2rem; }
.mc-reveal-camo-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mc-reveal-camo-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--seeker), var(--warn) 55%, var(--green)); }
.mc-reveal-camo-value { font-family: var(--mono); font-size: var(--micro); color: var(--ink-3); }
.mc-reveal-fate { font-size: 0.67rem; color: var(--ink-2); text-align: right; }
.mc-reveal-row.is-caught .mc-reveal-fate { color: var(--seeker-hi); }
.mc-res-empty { padding: 2rem; text-align: center; color: var(--ink-4); font-size: 0.8rem; }

.mc-res-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; }
.mc-res-count { font-size: 0.74rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- modals */

.mc-modal-host { position: absolute; inset: 0; pointer-events: none; }
.mc-modal-host.is-on { pointer-events: auto; }

.mc-modal { position: absolute; inset: 0; display: grid; place-items: center; }
.mc-modal-scrim { position: absolute; inset: 0; background: rgba(2, 4, 7, 0.62); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.24s var(--ease); }
.mc-modal.is-in .mc-modal-scrim { opacity: 1; }

/* The body has to be the only growing child of a `min-height: 0` column, or
   `overflow-y: auto` never measures anything: the Controls tab reported
   scrollHeight 444 / clientHeight 444 while 24 rows ran 60px past the bottom of
   the plate with no way to reach them. */
.mc-modal-plate {
  position: relative;
  width: min(880px, 92vw);
  max-height: min(88vh, 900px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--plate);
  border: 1px solid var(--edge);
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.26s var(--ease), transform 0.32s var(--ease-out);
}

.mc-modal.is-in .mc-modal-plate { opacity: 1; transform: none; }

.mc-modal-head { flex: none; display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 0.9rem; }
.mc-modal-head > div:first-child { flex: 1; }
.mc-modal-title { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 750; letter-spacing: 0.2em; text-transform: uppercase; }
.mc-modal-sub { margin: 0.26rem 0 0; font-size: 0.78rem; color: var(--ink-3); }
.mc-modal-body { flex: 1 1 auto; padding: 0 1.5rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-gutter: stable; }
.mc-modal-foot { flex: none; display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1.1rem 1.5rem 1.3rem; }

/* One height for every tab, so the tab strip and the Done button stay under the
   pointer instead of travelling up to 126px between adjacent clicks. */
.mc-modal[data-modal="settings"] .mc-modal-plate,
.mc-modal[data-modal="controls"] .mc-modal-plate { height: min(78vh, 720px); }

.mc-pause-line { margin: 0.4rem 0 1rem; font-size: 0.84rem; color: var(--ink-2); line-height: 1.6; }
.mc-modal[data-modal="pause"] .mc-modal-plate { width: min(520px, 92vw); }
.mc-modal[data-modal="pause"] .mc-modal-foot { display: grid; grid-template-columns: 1fr 1fr; }

/* controls sheet */
.mc-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; padding-bottom: 0.6rem; }
.mc-controls-group-title { margin: 0 0 0.6rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green); }
.mc-controls-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.28rem 0; }
.mc-keys { display: flex; align-items: center; gap: 3px; min-width: 92px; }
.mc-key-sep { color: var(--ink-4); font-size: 0.7rem; }
.mc-controls-action { font-size: 0.79rem; color: var(--ink-2); }

/* credits */
.mc-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; padding-bottom: 0.6rem; }
.mc-credit-title { margin: 0 0 0.5rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green); }
.mc-credit-line { margin: 0 0 0.26rem; font-size: 0.81rem; color: var(--ink-2); line-height: 1.5; }

/* settings */
.mc-settings { display: grid; gap: 1rem; padding-bottom: 0.4rem; }
.mc-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--edge); }

.mc-tab {
  flex: 1;
  height: 32px;
  border-radius: 7px;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: background 0.16s, color 0.16s;
}

.mc-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.mc-tab.is-on { background: rgba(99, 230, 164, 0.16); color: var(--green-hi); box-shadow: 0 0 0 1px rgba(99, 230, 164, 0.28) inset; }

.mc-tab-page { display: none; }
.mc-tab-page.is-on { display: block; animation: riseIn 0.3s var(--ease-out) both; }
.mc-settings-page { display: grid; gap: 1rem; }
.mc-settings-block { display: grid; gap: 0.8rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--edge); }
.mc-settings-block-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mc-settings-block-title { margin: 0; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }

/* No inner scroller: a nested `max-height` here is what stopped the modal body
   from ever overflowing, so the rows past the fold were clipped rather than
   scrolled. The plate is capped instead and the body does the scrolling. */
.mc-bindings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.1rem 1.4rem; }
.mc-bind-group-title { grid-column: 1 / -1; margin-top: 0.6rem; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green); }
.mc-bind-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 44px; align-items: center; gap: 0.5rem; padding: 0.18rem 0; }
.mc-bind-label { font-size: 0.77rem; color: var(--ink-2); }

.mc-bind-key {
  height: 28px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink);
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}

.mc-bind-key:hover { border-color: var(--green); color: var(--green-hi); }
.mc-bind-key.is-capturing { border-color: var(--warn); color: var(--warn); background: rgba(255, 194, 74, 0.1); animation: pulse 1s ease-in-out infinite; font-size: 0.58rem; }
.mc-bind-alt { font-family: var(--mono); font-size: 0.65rem; color: var(--ink-4); text-align: center; }
.mc-bind-alt.is-empty { opacity: 0.4; }

/* ------------------------------------------------------------- announcer */

.mc-announce {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

/* Suppressed while the scoreboard is up: the announcer is appended after the
   scoreboard in DOM order, so a phase stinger painted straight across the
   scoreboard header and the local player's row. */
.mc-announce.is-on { opacity: 1; visibility: visible; }
.mc-root.is-scoreboard .mc-announce { opacity: 0; }
.mc-announce { z-index: 0; }
.mc-scoreboard { z-index: 1; }

/* Its own backing. The stinger is the game's biggest state signal and it was
   landing on a blown-out chandelier with no plate and no text-shadow, where
   "PAINT, POSE, FREEZE" disappeared completely. */
.mc-announce::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46rem;
  height: 16rem;
  max-width: 92vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 4, 7, 0.86), rgba(2, 4, 7, 0.55) 46%, transparent 74%);
  pointer-events: none;
}

.mc-announce > * { position: relative; }
.mc-announce-rule { width: 46px; height: 2px; background: var(--green); box-shadow: 0 0 12px currentColor; }

.mc-announce-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--bone);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 4px 18px rgba(0, 0, 0, 0.95), 0 0 60px rgba(0, 0, 0, 0.9);
  animation: verdictPop 0.55s var(--ease-out) both;
}

.mc-announce-sub {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.95);
}
.mc-announce.is-seeker .mc-announce-rule { background: var(--seeker); }
.mc-announce.is-seeker .mc-announce-title { color: var(--seeker-hi); }
.mc-announce.is-bad .mc-announce-rule { background: var(--bad); }
.mc-announce.is-bad .mc-announce-title { color: var(--bad); }
.mc-announce.is-good .mc-announce-rule { background: var(--green); }
.mc-announce.is-good .mc-announce-title { color: var(--green-hi); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1360px) {
  .mc-lobby-body { grid-template-columns: minmax(0, 1fr) 330px; }
  .mc-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 264, not 232: the column's own controls measured 267px wide and were being
     clipped mid-word by the divider. */
  .mc-paint-grid { grid-template-columns: 264px minmax(0, 1fr) 264px; }
  .mc-wheel-stage { width: 460px; height: 460px; }
}

/* Height breakpoints. Every 720p failure in review was driven by height, and
   the sheet had nothing but width queries. */
@media (max-height: 820px) {
  /* The map stage collapses to ~250px at 720p, which drops the vertically
     centred chevrons into the title and the badge. Pin them to the art. */
  .mc-map-nav { top: 0.8rem; transform: none; height: 46px; }
  .mc-map-nav.is-prev:hover { transform: translateX(-2px); }
  .mc-map-nav.is-next:hover { transform: translateX(2px); }
  .mc-map-copy { left: 1.5rem; right: 1.5rem; }
  .mc-modal[data-modal="settings"] .mc-modal-plate,
  .mc-modal[data-modal="controls"] .mc-modal-plate { height: 86vh; }
  .mc-paint-sheet { max-height: 94vh; }
}

@media (max-width: 1050px) {
  .mc-lobby-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mc-panel-roster { max-height: 300px; }
  .mc-res-body { grid-template-columns: minmax(0, 1fr); }
  .mc-paint-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-paint-sheet { left: 50%; transform: translate(-50%, -50%) scale(0.985); width: min(1140px, 94vw); }
  .mc-paint.is-on .mc-paint-sheet { transform: translate(-50%, -50%) scale(1); }
  .mc-paint.is-picking .mc-paint-sheet { transform: translate(-50%, -50%) scale(0.97); }
  .mc-meter { left: 1rem; width: 200px; }
}

/* ------------------------------------------------- fine-adjust overlay */

/* `Alt` used to change nothing on screen and its sub-keys were undocumented,
   so the tool the design doc calls "the difference between a good hide and a
   bad one" was undiscoverable. */
.mc-fine {
  position: absolute;
  left: 50%;
  bottom: 6.5rem;
  transform: translateX(-50%);
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem 0.8rem;
  border-radius: var(--r-md);
  background: rgba(6, 9, 13, 0.82);
  border: 1px solid rgba(99, 230, 164, 0.34);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.mc-fine-head { display: flex; align-items: baseline; gap: 0.7rem; }
.mc-fine-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green); }
.mc-fine-read { font-family: var(--mono); font-size: var(--micro); color: var(--ink); }
.mc-fine-keys { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.mc-fine-key { display: flex; align-items: center; gap: 0.4rem; font-size: var(--micro); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05ms !important;
  }
}