/* GENERATED by build-config.js from server/party/public/{tokens,app}.css.
 * Do not edit - edit the source and rebuild. */

/* MyMickey — design tokens, shared by the phone app and the /tv big screen.
 *
 * These used to be declared twice, by hand, in app.css and tv.css. They had
 * already drifted (--card was 0.045 on the phone and 0.055 on the TV, --red was
 * an alias in one file and a literal in the other), which is exactly the bug
 * one file prevents. Both pages link this first; neither declares :root.
 *
 * The palette is the "Handheld" system the ears and the LAN controller already
 * use: a moulded grape shell, silkscreen cream ink, one gold primary. The four
 * game colours are the ear's KCOL values verbatim — those are the one thing
 * that makes a phone and a display 3 metres apart read as the same product.
 *
 * The ink-and-paper craft this app was built on (film grain, ticket
 * perforations, stamped numerals) is unchanged; it is re-tinted, not replaced.
 */

.mm-party{
  /* ---- ground: a moulded shell lit from above ---- */
  --ink-900: #150E33;          /* deepest, bottom of the page gradient */
  --ink-800: #1B1240;          /* --bg */
  --ink-700: #241A4D;          /* the shell itself, top of the gradient */

  /* Handheld names, for anything written against the system directly */
  --shell: #241A4D;
  --well: #171034;             /* recessed sockets, input wells */
  --cream: #FFF4E2;            /* silkscreen ink */
  --slate: #A9A3C9;            /* secondary label ink */

  /* ---- the four game colours: identical to the ear's KCOL ---- */
  --key-a: #E23E3E; --key-a-dk: #8A2020;
  --key-b: #3474EB; --key-b-dk: #1B4291;
  --key-c: #EBB62C; --key-c-dk: #8F6C0E;
  --key-d: #3AB660; --key-d-dk: #1D6B37;
  /* White on this green measures 2.61:1 — under the 3:1 large-text floor,
   * and it is the option D label on every quiz. Dark ink is 6.36:1. The
   * other three keys carry white at 4.2-9:1, which large bold type earns. */
  --key-d-ink: #04240F;

  /* ---- accents ---- */
  --gold: #FFD65A; --gold-dk: #B8871A; --gold-ink: #2A1B00;
  --teal: #3FD3BE; --teal-dk: #177A6C;
  --indigo: #4A62D8; --indigo-lt: #7D90FF;
  --grape: #B98CFF;
  --coral: #FF6B6B; --coral-deep: #E23E3E;

  /* semantic aliases — every rule and inline style in the app points at these,
   * so re-pointing them here is what repaints the product */
  --red: var(--key-a); --red2: var(--coral);
  --green: var(--key-d); --blue: var(--key-b); --amber: var(--key-c);
  --purple: var(--grape);

  --bg: var(--ink-800);
  --ink: var(--cream);
  --sub: #D8D0F0;
  --dim: var(--slate);

  /* ---- surfaces: warm alphas, so panels sit on the shell rather than on grey */
  --card: rgba(255, 244, 226, 0.055);
  --card2: rgba(255, 244, 226, 0.10);
  --line: rgba(255, 244, 226, 0.13);
  --edge: rgba(255, 214, 90, 0.24);
  --scrim: rgba(23, 16, 52, 0.88);   /* tab bar, sticky CTA, toast */

  /* ---- geometry ---- */
  --r: 18px; --r-lg: 26px; --r-key: 16px;
  --lift: 6px;                       /* keycap underside height */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar: 62px;

  /* ---- type ---- */
  --display: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- motion ----
   * --ease is the app's existing curve, kept so nothing already tuned changes.
   * --ease-key is the keypress curve: it lands hard, like a key bottoming out. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-key: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 90ms;

  --shadow-1: 0 1px 2px rgba(9, 4, 26, 0.40), 0 4px 14px rgba(9, 4, 26, 0.34);
  --shadow-2: 0 2px 6px rgba(9, 4, 26, 0.46), 0 14px 38px rgba(9, 4, 26, 0.48);
}

/* Grandstander (SIL Open Font License 1.1), latin subset, variable weight.
 * Served as a file rather than inlined: this app is a real HTTPS service, so
 * the font should be cached once and not re-shipped inside every page load. */
@font-face {
  font-family: "Grandstander";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/grandstander-subset.woff2") format("woff2");
}

/* MyMickey — phone app.
 *
 * Dark only, on purpose: it is worn and used at night, next to a pair of
 * bright round displays, and a light theme would blind you at the fireworks.
 *
 * Two shells share these tokens. The OWNER shell has a bottom tab bar and
 * behaves like an app. The PLAYER shell (a guest who scanned the QR) is
 * full-bleed with no chrome at all — one job per screen, thumb-reachable.
 */

/* Tokens (palette, geometry, motion, the display face) now live in
 * tokens.css, linked before this file and shared with the /tv screen. */
.mm-party *{ box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

.mm-party, .mm-party{
  height: 100%;
  overscroll-behavior-y: none;
}

.mm-party{
  font: 400 16px/1.45 var(--body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* the ambient glow behind everything — cheap, and it makes flat cards read
 * as depth without a single shadow */
.mm-party body::before{
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 440px at 10% -10%, rgba(122, 86, 220, 0.34), transparent 62%),
    radial-gradient(780px 420px at 94% 2%, rgba(255, 214, 90, 0.10), transparent 64%),
    radial-gradient(620px 380px at 50% 108%, rgba(63, 211, 190, 0.10), transparent 70%),
    linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 42%, var(--ink-900) 100%);
}

/* Film grain. Disney365 lays SVG turbulence over its paper; on ink it does
 * the same job — it stops large flat fields from looking like dead pixels on
 * an OLED phone, and it is what makes the surfaces read as a material. */
.mm-party body::after{
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.42;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

.mm-party button, .mm-party input, .mm-party textarea{ font: inherit; color: inherit; }
.mm-party button{ border: none; background: none; cursor: pointer; }
.mm-party input, .mm-party textarea{ -webkit-user-select: text; user-select: text; }

/* ============================ layout ============================ */
.mm-party #app{ min-height: 100%; display: flex; flex-direction: column; }

.mm-party .screen{
  flex: 1;
  padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + var(--tabbar) + 24px);
  max-width: 560px; width: 100%; margin: 0 auto;
}
/* Only on a genuine screen change — see screenCls() in app.js. Running this
 * on every repaint is indistinguishable from a rendering fault. */
.mm-party .screen.enter{ animation: rise 0.26s var(--ease); }
.mm-party .screen.bare{ padding-bottom: calc(var(--safe-b) + 24px); }

@keyframes rise { .mm-party from{ opacity: 0; transform: translateY(10px); } }
@keyframes pop  { .mm-party from{ opacity: 0; transform: scale(0.94); } }
@keyframes fade { .mm-party from{ opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mm-party *, .mm-party *::before, .mm-party *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- top bar ---- */
.mm-party .topbar{
  display: flex; align-items: center; gap: 12px;
  padding: 6px 2px 16px;
}
.mm-party .topbar h1{ font-family: var(--display); font-size: 22px; font-weight: 800;
             letter-spacing: 0.01em; flex: 1; }
.mm-party .topbar h1 em{ font-style: normal; color: var(--red); }
.mm-party .topbar .sub{ font-size: 12px; color: var(--dim); font-weight: 500; margin-top: 1px; }

.mm-party .pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); color: var(--sub);
  white-space: nowrap;
}
.mm-party .pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.mm-party .pill.ok{ color: var(--green); border-color: rgba(110, 231, 160, 0.35); }
.mm-party .pill.ok .dot{ background: var(--green); box-shadow: 0 0 8px var(--green); }
.mm-party .pill.warn{ color: var(--gold); border-color: rgba(255, 201, 77, 0.35); }
.mm-party .pill.warn .dot{ background: var(--gold); }
.mm-party .pill.bad{ color: var(--red2); border-color: rgba(255, 95, 122, 0.35); }
.mm-party .pill.bad .dot{ background: var(--red2); }

/* ---- cards ---- */
.mm-party .card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 14px;
}
.mm-party .card > h2{
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 12px;
}
.mm-party .card.flush{ padding: 0; overflow: hidden; }

.mm-party .row{ display: flex; align-items: center; gap: 12px; }
.mm-party .row + .row{ margin-top: 12px; }
.mm-party .grow{ flex: 1; min-width: 0; }
.mm-party .muted{ color: var(--dim); font-size: 13px; line-height: 1.5; }
.mm-party .muted b{ color: var(--sub); font-weight: 600; }
.mm-party .center{ text-align: center; }
.mm-party .stack{ display: flex; flex-direction: column; gap: 10px; }

/* ---- buttons ---- */
/* ---- the keycap ------------------------------------------------------
 * Every control is a moulded key sitting on a darker underside, and pressing
 * it travels down onto that underside. It is the one gesture shared with the
 * ear display, where the answer blocks are built the same way — which is what
 * makes a phone in your hand and a screen across the room read as one object.
 *
 * The face is painted with three custom properties so a variant only has to
 * name its colours. Width is deliberately not part of the look: ten call sites
 * override it to `auto`, and the key must survive that. */
.mm-party .btn{
  --cap: var(--card2);
  --cap-edge: rgba(9, 4, 26, 0.55);
  --cap-ink: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 18px; border-radius: var(--r-key); font-size: 16px; font-weight: 700;
  font-family: var(--display); letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58px),
              var(--cap);
  color: var(--cap-ink); border: 0;
  box-shadow: 0 var(--lift) 0 var(--cap-edge), 0 calc(var(--lift) + 6px) 16px rgba(9, 4, 26, 0.42);
  transition: transform var(--t-press) var(--ease-key),
              box-shadow var(--t-press) var(--ease-key), opacity 0.12s;
  min-height: 56px; width: 100%;
}
.mm-party .btn:active{
  transform: translateY(calc(var(--lift) - 1px));
  box-shadow: 0 1px 0 var(--cap-edge), 0 2px 6px rgba(9, 4, 26, 0.4);
}
.mm-party .btn:focus-visible{ outline: 3px solid var(--cream); outline-offset: 3px; }
.mm-party .btn[disabled]{ opacity: 0.4; pointer-events: none; }

.mm-party .btn.primary{ --cap: var(--gold); --cap-edge: var(--gold-dk); --cap-ink: var(--gold-ink); }
.mm-party .btn.gold{ --cap: var(--gold); --cap-edge: var(--gold-dk); --cap-ink: var(--gold-ink); }
.mm-party .btn.green{ --cap: var(--key-d); --cap-edge: var(--key-d-dk); --cap-ink: var(--key-d-ink); }
.mm-party .btn.red{ --cap: var(--key-a); --cap-edge: var(--key-a-dk); --cap-ink: #fff; }
.mm-party .btn.teal{ --cap: var(--teal); --cap-edge: var(--teal-dk); --cap-ink: #04241F; }
/* a quiet secondary: no underside, because it is not the thing to press */
.mm-party .btn.ghost{ background: transparent; box-shadow: none; border: 1px solid var(--line);
               color: var(--ink); }
.mm-party .btn.ghost:active{ transform: translateY(2px); box-shadow: none; }
.mm-party .btn.sm{ padding: 10px 14px; min-height: 44px; font-size: 14px; border-radius: 12px;
               --lift: 4px; }
.mm-party .btn.on{ outline: 2px solid var(--green); outline-offset: -2px; }

.mm-party .btns2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-party .btns3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---- inputs ---- */
.mm-party .field{
  width: 100%; padding: 15px 16px; border-radius: 14px; font-size: 16px;
  background: var(--well); border: 1px solid var(--line); color: var(--ink);
  outline: none; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
  font-family: var(--display); letter-spacing: 0.02em;
}
.mm-party .field:focus{ border-color: var(--gold); }
.mm-party .field::placeholder{ color: #6A6194; }

/* ---- bottom tab bar ---- */
.mm-party #tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--safe-b);
  background: var(--scrim);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--line);
}
.mm-party #tabbar button{
  height: var(--tabbar);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  transition: color 0.15s;
}
.mm-party #tabbar button .ic{ font-size: 21px; line-height: 1; transition: transform 0.2s var(--ease); }
.mm-party #tabbar button.on{ color: var(--ink); }
.mm-party #tabbar button.on .ic{ transform: translateY(-2px) scale(1.12); }
.mm-party #tabbar button .badge{
  position: absolute; transform: translate(16px, -14px);
  min-width: 8px; height: 8px; border-radius: 999px; background: var(--red);
}

/* ============================ party ============================ */
.mm-party .mode-cards{ display: grid; gap: 12px; }
.mm-party .mode-card{
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 20px; text-align: left;
  border: 1px solid var(--line); background: var(--card);
  display: block; width: 100%;
  transition: transform 0.1s var(--ease);
}
.mm-party .mode-card:active{ transform: scale(0.985); }
.mm-party .mode-card .em{ font-size: 38px; display: block; margin-bottom: 8px; }
.mm-party .mode-card .nm{ font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.mm-party .mode-card .bl{ font-size: 13px; color: var(--dim); margin-top: 4px; line-height: 1.4; }
.mm-party .mode-card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px 160px at 88% 0%, var(--accent, transparent), transparent 70%);
  opacity: 0.5;
}

/* The host's Start button. It sits above everything because in a lobby the
 * roster keeps growing and the button would otherwise walk off the bottom of
 * the screen exactly when the host wants to press it. */
.mm-party .sticky-cta{
  position: fixed; left: 0; right: 0; z-index: 30;
  bottom: calc(var(--safe-b) + var(--tabbar));
  padding: 12px 16px calc(12px);
  background: linear-gradient(180deg, transparent, var(--scrim) 38%);
  max-width: 560px; margin: 0 auto;
}
.mm-party .screen.bare .sticky-cta{ bottom: var(--safe-b); }
.mm-party .screen:has(.sticky-cta){ padding-bottom: calc(var(--safe-b) + var(--tabbar) + 96px); }
.mm-party .screen.bare:has(.sticky-cta){ padding-bottom: calc(var(--safe-b) + 96px); }

/* ---- the QR screen ---- */
.mm-party .qr-wrap{ text-align: center; padding: 6px 0 2px; }
.mm-party .qr-code{
  width: min(74vw, 320px); aspect-ratio: 1; margin: 0 auto;
  background: #fff; border-radius: 22px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
  animation: pop 0.35s var(--ease);
}
.mm-party .qr-code svg, .mm-party .qr-code img{ width: 100%; height: 100%; display: block; }
.mm-party .code-big{
  font-size: 46px; font-weight: 900; letter-spacing: 10px; margin: 16px 0 2px;
  font-variant-numeric: tabular-nums; text-indent: 10px;
  background: linear-gradient(180deg, #fff, #b9c3ea);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* full-screen QR — the "hold the phone up" mode */
.mm-party #bigqr{
  position: fixed; inset: 0; z-index: 90; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; animation: fade 0.2s;
}
.mm-party #bigqr .qr{ width: min(78vw, 78vh); aspect-ratio: 1; }
.mm-party #bigqr .qr svg, .mm-party #bigqr .qr img{ width: 100%; height: 100%; }
.mm-party #bigqr .lbl{ color: #0b0e1c; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; }
.mm-party #bigqr .cd{
  color: #0b0e1c; font-size: 44px; font-weight: 900; letter-spacing: 9px; text-indent: 9px;
}

/* ---- player list ---- */
.mm-party .plist{ display: flex; flex-direction: column; gap: 8px; }
.mm-party .prow{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  animation: rise 0.28s var(--ease);
}
.mm-party .prow .em{ font-size: 25px; width: 30px; text-align: center; }
.mm-party .prow .nm{ font-weight: 700; font-size: 15px; }
.mm-party .prow .st{ font-size: 12px; color: var(--dim); }
.mm-party .prow .sc{ margin-left: auto; font-weight: 800; font-size: 17px; color: var(--gold); font-variant-numeric: tabular-nums; }
.mm-party .prow.off{ opacity: 0.45; }
.mm-party .prow.me{ border-color: rgba(255, 214, 90, 0.55); }
.mm-party .prow .rk{
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--card2); color: var(--sub);
}
.mm-party .prow.r1{ box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.35); }
.mm-party .prow.r1 .rk{ background: linear-gradient(180deg, #ffdc80, var(--gold)); color: #2a1c00; }
.mm-party .prow.r2 .rk{ background: #c7cee6; color: #1a1d2e; }
.mm-party .prow.r3 .rk{ background: #cd9366; color: #23130a; }
.mm-party .slot{
  padding: 11px 13px; border-radius: 14px; border: 1px dashed var(--line);
  color: var(--dim); font-size: 13px; text-align: center;
}

/* ---- vote ---- */
.mm-party .vote-opt{
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border-radius: var(--r); text-align: left;
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.1s var(--ease), border-color 0.15s;
}
.mm-party .vote-opt:active{ transform: scale(0.98); }
.mm-party .vote-opt.picked{ border-color: var(--green); background: rgba(110, 231, 160, 0.10); }
.mm-party .vote-opt .em{ font-size: 30px; }
.mm-party .vote-opt .nm{ font-weight: 800; font-size: 16px; }
.mm-party .vote-opt .bl{ font-size: 12px; color: var(--dim); margin-top: 2px; }
.mm-party .vote-opt .ct{
  margin-left: auto; font-weight: 800; color: var(--gold); font-size: 15px;
  min-width: 22px; text-align: right;
}

/* ---- timer bar ---- */
.mm-party .timer{ height: 6px; border-radius: 999px; background: var(--card2); overflow: hidden; margin: 12px 0; }
.mm-party .timer > i{ display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); }
.mm-party .timer.calm > i{ background: linear-gradient(90deg, var(--blue), var(--purple)); }

/* ---- big game surfaces ---- */
.mm-party .stage{
  min-height: 62vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
}
.mm-party .stage .huge{ font-size: 60px; line-height: 1; }
.mm-party .stage .head{ font-family: var(--display); }
.mm-party .stage .head{ font-size: clamp(24px, 7vw, 30px); font-weight: 800;
               letter-spacing: 0.005em; }
.mm-party .stage .body{ font-size: 15px; color: var(--sub); max-width: 30ch; }

.mm-party .tap-target{
  width: min(78vw, 330px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: 30px; font-weight: 900; letter-spacing: 1px;
  border: 3px solid var(--line); background: var(--card);
  transition: background 0.06s, transform 0.06s, border-color 0.06s;
}
.mm-party .tap-target.armed{ background: #3A1520; border-color: rgba(255, 255, 255, 0.14); color: var(--dim); }
.mm-party .tap-target.go{
  background: radial-gradient(circle at 50% 40%, #9dffc4, #23c46e);
  color: #04240f; border-color: #E8FFF2; transform: scale(1.03);
  box-shadow: 0 0 60px rgba(60, 230, 140, 0.55);
}
.mm-party .tap-target.done{ background: var(--card2); color: var(--sub); font-size: 22px; }
.mm-party .tap-target.early{ background: rgba(226, 62, 62, 0.22); border-color: var(--red); color: var(--red2); font-size: 22px; }

.mm-party .q-text{
  font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.3px;
  text-align: center; margin: 8px 0 18px;
}
.mm-party .opts{ display: grid; gap: 10px; }
/* Answer keys are keycaps too, and they wear the ear's four colours in the
 * ear's order — so the block you tap here is the block that lights up on the
 * display. Colour is never the only signal: the A/B/C/D chip carries it as
 * well, which is what keeps the round playable for a colourblind guest. */
.mm-party .opt{
  --cap: var(--card); --cap-edge: rgba(9, 4, 26, 0.5); --cap-ink: var(--ink);
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 17px 16px; border-radius: var(--r-key); text-align: left;
  font-size: 16px; font-weight: 700; font-family: var(--display);
  min-height: 64px; border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 46px),
              var(--cap);
  color: var(--cap-ink);
  box-shadow: 0 var(--lift) 0 var(--cap-edge), 0 calc(var(--lift) + 5px) 14px rgba(9, 4, 26, 0.4);
  transition: transform var(--t-press) var(--ease-key),
              box-shadow var(--t-press) var(--ease-key), opacity 0.15s;
}
.mm-party .opt:active{
  transform: translateY(calc(var(--lift) - 1px));
  box-shadow: 0 1px 0 var(--cap-edge), 0 2px 6px rgba(9, 4, 26, 0.4);
}
.mm-party .opt:focus-visible{ outline: 3px solid var(--cream); outline-offset: 3px; }
.mm-party .opts > .opt:nth-child(1){ --cap: var(--key-a); --cap-edge: var(--key-a-dk); --cap-ink: #fff; }
.mm-party .opts > .opt:nth-child(2){ --cap: var(--key-b); --cap-edge: var(--key-b-dk); --cap-ink: #fff; }
.mm-party .opts > .opt:nth-child(3){ --cap: var(--key-c); --cap-edge: var(--key-c-dk); --cap-ink: var(--gold-ink); }
.mm-party .opts > .opt:nth-child(4){ --cap: var(--key-d); --cap-edge: var(--key-d-dk); --cap-ink: var(--key-d-ink); }
.mm-party .opt .k{
  width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.24); font-size: 14px; font-weight: 800; color: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mm-party .opt .bar{ color: inherit; opacity: 0.75; }

/* committed: the key sits in its socket */
.mm-party .opt.picked{
  transform: translateY(calc(var(--lift) - 1px));
  box-shadow: 0 1px 0 var(--cap-edge), inset 0 3px 8px rgba(0, 0, 0, 0.35);
}
/* the reveal, drawn exactly as the display draws it: the winner keeps its
 * lift and takes a white halo, everything else sinks and goes dark */
.mm-party .opt.right{ box-shadow: 0 var(--lift) 0 var(--cap-edge), 0 0 0 3px #fff,
             0 calc(var(--lift) + 8px) 20px rgba(9, 4, 26, 0.5); }
.mm-party .opt.wrong{ transform: translateY(calc(var(--lift) - 1px));
             box-shadow: 0 1px 0 var(--cap-edge); opacity: 0.3; }
.mm-party .opt .bar{
  margin-left: auto; font-size: 12px; font-weight: 800; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.mm-party .answer-card{
  width: 100%; padding: 16px; border-radius: 16px; text-align: left; font-size: 16px;
  background: var(--card); border: 1px solid var(--line); line-height: 1.35;
  transition: transform 0.08s var(--ease);
}
.mm-party .answer-card:active{ transform: scale(0.98); }
.mm-party .answer-card.mine{ opacity: 0.5; border-style: dashed; }
.mm-party .answer-card.picked{ border-color: var(--gold); background: rgba(255, 201, 77, 0.12); }
.mm-party .answer-card .v{ float: right; color: var(--gold); font-weight: 800; }

/* ---- scores / winner ---- */
.mm-party .crown{ font-size: 76px; animation: pop 0.5s var(--ease); }
.mm-party .winner-name{
  font-size: 34px; font-weight: 900; letter-spacing: -0.6px;
  background: linear-gradient(180deg, #fff6d8, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-party .gain{ color: var(--green); font-weight: 800; font-size: 13px; }

/* ---- toast ---- */
.mm-party #toast{
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + var(--tabbar) + 18px);
  transform: translateX(-50%) translateY(14px); z-index: 100;
  background: var(--scrim); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s var(--ease);
  max-width: 88vw; text-align: center;
}
.mm-party #toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ character select ============================ */
.mm-party .pickgrid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.mm-party .picktile{
  position: relative; padding: 10px 6px 12px; border-radius: 18px;
  background: var(--card); border: 1.5px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform 0.1s var(--ease), border-color 0.15s, background 0.15s;
}
.mm-party .picktile:active{ transform: scale(0.95); }
.mm-party .picktile canvas{ display: block; }
.mm-party .picktile .pn{ font-size: 14px; font-weight: 800; }
.mm-party .picktile .pb{ font-size: 10px; color: var(--dim); line-height: 1.25; text-align: center; }
.mm-party .picktile .plock, .mm-party .picktile .ptaken{
  font-size: 10px; font-weight: 800; color: var(--dim); letter-spacing: 0.3px;
}
.mm-party .picktile.mine{
  border-color: var(--green); background: rgba(110, 231, 160, 0.12);
  box-shadow: 0 0 0 3px rgba(110, 231, 160, 0.14);
}
.mm-party .picktile.locked, .mm-party .picktile.taken{ opacity: 0.42; }
.mm-party .picktile[disabled]{ pointer-events: none; }

.mm-party .xpbar{ height: 9px; border-radius: 999px; background: var(--card2); overflow: hidden; }
.mm-party .xpbar > i{
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 0.6s var(--ease);
}
.mm-party .xp-card{ border-color: rgba(255, 201, 77, 0.35); }
.mm-party .unlocks{ display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.mm-party .unlock-tile{
  padding: 12px 8px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--a, var(--gold));
  animation: pop 0.45s var(--ease) backwards;
}
.mm-party .unlock-tile .pn{ font-size: 14px; font-weight: 800; margin-top: 2px; }
.mm-party .unlock-tile .pb{ font-size: 10px; color: var(--dim); line-height: 1.25; }

/* ---- game intro ---- */
.mm-party .intro-pop{ animation: pop 0.5s var(--ease); }
.mm-party .finale-flag{
  font-size: 12px; font-weight: 900; letter-spacing: 2px; padding: 6px 14px;
  border-radius: 999px; color: #2a1c00;
  background: linear-gradient(180deg, #ffd76e, var(--gold));
}
.mm-party .howto{ display: flex; flex-direction: column; gap: 8px; margin-top: 6px; width: 100%; max-width: 320px; }
.mm-party .howto-row{
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); font-size: 14px; color: var(--sub);
  animation: rise 0.35s var(--ease) backwards;
}
.mm-party .howto-row .n{
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: var(--card2); font-size: 11px; font-weight: 800;
}

/* ============================ arena ============================ */
.mm-party .arena-screen{ padding: 0 !important; }
.mm-party .arena{
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: var(--safe-t) 0 var(--safe-b);
  background: var(--ink-900);
}

/* The stage is small for a player (a glance) and large for the host (it IS
 * the shared screen when the ears are not showing it). */
.mm-party .stage-wrap{
  position: relative; width: 100%; flex: 0 0 26vh;
  background: var(--ink-800); overflow: hidden;
  transition: flex-basis 0.32s var(--ease);
}
.mm-party .arena.peek .stage-wrap{ flex: 0 0 46vh; }
.mm-party .stage-wrap canvas{ display: block; margin: 0 auto; }
.mm-party .stage-tag{
  position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: var(--sub);
}

.mm-party .ahud{ display: flex; align-items: center; gap: 12px; padding: 10px 16px 4px; }
.mm-party .ahud-l{ display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.mm-party .ahud-em{ font-size: 26px; }
.mm-party .ahud-t{ font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-party .ahud-s{ font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-party .ahud-r{ display: flex; align-items: center; gap: 10px; }
.mm-party .ahud-score{
  font-size: 26px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mm-party .peek-btn{
  width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
  background: var(--card2); border: 1px solid var(--line);
}

.mm-party .abar{ height: 5px; margin: 4px 16px 0; border-radius: 999px; background: var(--card2); overflow: hidden; }
.mm-party .abar > i{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 0.2s linear;
}
.mm-party .abar > i.low{ background: linear-gradient(90deg, var(--gold), var(--red)); }

/* ---- the gamepad ---- */
.mm-party .gamepad{ flex: 1; display: flex; align-items: stretch; gap: 10px; padding: 12px 14px 16px; min-height: 0; }

.mm-party .pad{
  position: relative; flex: 1; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1.5px solid var(--line); overflow: hidden;
  touch-action: none;
}
.mm-party .pad::after{
  /* a faint left/right hint that lights up with the stick */
  content: '◀        ▶'; position: absolute; inset: 0; display: grid;
  place-items: center; font-size: 15px; letter-spacing: 4px; color: rgba(255,255,255,0.10);
  pointer-events: none; transition: color 0.2s;
}
.mm-party .pad[data-dir="l"]::after, .mm-party .pad[data-dir="r"]::after{ color: rgba(255,255,255,0.03); }
.mm-party .pad-hint{
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-size: 11px; color: var(--dim); pointer-events: none;
}
.mm-party .stick{
  position: absolute; width: 0; height: 0; opacity: 0;
  transition: opacity 0.14s;
}
.mm-party .stick.on{ opacity: 1; }
.mm-party .stick::before{
  content: ''; position: absolute; left: -58px; top: -58px;
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255,255,255,0.13);
}
.mm-party .knob{
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--red2) 62%, var(--red));
  box-shadow: 0 6px 20px rgba(233, 69, 96, 0.45);
}

.mm-party .btns{ display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.mm-party .gbtn{
  width: 108px; height: 108px; border-radius: 50%; font-size: 15px; font-weight: 900;
  letter-spacing: 1px; color: #fff; border: 2px solid rgba(255,255,255,0.16);
  transition: transform 0.07s var(--ease), filter 0.1s;
  touch-action: none;
}
.mm-party .gbtn.jump{ background: radial-gradient(circle at 40% 32%, #b9a2ff, var(--purple) 60%, #5b3fbe); }
.mm-party .gbtn.act{ background: radial-gradient(circle at 40% 32%, #9df3ff, #2ea8d6 60%, #1a7ba1); width: 92px; height: 92px; }
.mm-party .gbtn.hit{ transform: scale(0.9); filter: brightness(1.35); }
.mm-party .gbtn.cooling{ opacity: 0.42; }

/* the one big word — countdown, FREEZE, OUT */
.mm-party .big-msg{
  position: absolute; left: 0; right: 0; top: 52vh; text-align: center;
  font-size: 74px; font-weight: 900; letter-spacing: -2px; pointer-events: none;
  color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: scale(0.7); transition: opacity 0.15s, transform 0.25s var(--ease);
}
.mm-party .big-msg.on{ opacity: 1; transform: scale(1); }
.mm-party .big-msg.bad{ color: var(--red2); }
.mm-party .big-msg.good{ color: var(--green); }

.mm-party .arena.stunned .gamepad{ filter: saturate(0.25); }
.mm-party .arena.stunned .pad{ border-color: rgba(233, 69, 96, 0.45); }

/* Landscape or a big screen: the stage takes over and the pad goes beside it */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  .mm-party .arena{ flex-direction: row; }
  .mm-party .stage-wrap{ flex: 1 1 auto; height: 100%; }
  .mm-party .gamepad{ flex: 0 0 340px; flex-direction: column; }
}

/* ============================ ears ============================ */
.mm-party .outfit-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mm-party .outfit{
  padding: 14px 8px; border-radius: 16px; font-size: 13px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); text-transform: capitalize;
  transition: transform 0.08s var(--ease);
}
.mm-party .outfit:active{ transform: scale(0.96); }
.mm-party .outfit.on{ background: linear-gradient(180deg, var(--red2), var(--red)); border-color: transparent; }

/* ---- photos ---- */
.mm-party .photo-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.mm-party .photo-tile{
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--line); background: #000;
  animation: pop 0.3s var(--ease);
}
/* Round, because the displays are round — a square thumbnail would quietly
 * promise corners the ear cannot show. */
.mm-party .photo-tile img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-party .photo-tile.on{ border-color: var(--green); box-shadow: 0 0 0 3px rgba(110,231,160,0.25); }
.mm-party .photo-x{
  position: absolute; top: 2px; right: 2px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px;
  display: grid; place-items: center; backdrop-filter: blur(4px);
}
.mm-party .photo-live{
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #06240f;
  background: var(--green); padding: 2px 0;
}

.mm-party .chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.mm-party .chip{
  padding: 10px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--card2); border: 1px solid var(--line); color: var(--sub);
  transition: transform 0.08s var(--ease);
}
.mm-party .chip:active{ transform: translateY(2px); background: var(--gold); color: var(--gold-ink); }

.mm-party .slider-row{ display: flex; align-items: center; gap: 14px; }
.mm-party .slider-row label{ font-size: 14px; color: var(--sub); width: 88px; flex: none; }
.mm-party .slider-row output{ font-size: 14px; font-weight: 700; color: var(--green); width: 36px; text-align: right; }
.mm-party input[type=range]{ flex: 1; accent-color: var(--red); height: 34px; }

/* ============================ park (demo) ============================ */
.mm-party .stat-n{
  font-size: clamp(19px, 6.4vw, 27px); font-weight: 800; white-space: nowrap;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.mm-party .demo-flag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: #2a1c00; background: var(--gold); padding: 4px 10px; border-radius: 999px;
}
.mm-party .land{
  display: flex; align-items: center; gap: 12px; padding: 13px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line);
}
.mm-party .land .em{ font-size: 24px; }
.mm-party .land .bar{ height: 5px; border-radius: 999px; background: var(--card2); margin-top: 6px; overflow: hidden; }
.mm-party .land .bar > i{ display: block; height: 100%; border-radius: 999px; }
.mm-party .badges{ display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.mm-party .badge-t{
  padding: 14px 8px; border-radius: 16px; text-align: center;
  background: var(--card); border: 1px solid var(--line);
}
.mm-party .badge-t .em{ font-size: 30px; display: block; }
.mm-party .badge-t .nm{ font-size: 11px; font-weight: 700; margin-top: 5px; line-height: 1.25; }
.mm-party .badge-t.locked{ opacity: 0.32; }
.mm-party .badge-t.locked .em{ filter: grayscale(1); }

/* ============================ misc ============================ */
.mm-party .spinner{
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto;
  border: 2.5px solid var(--card2); border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { .mm-party to{ transform: rotate(360deg); } }

.mm-party .empty{ text-align: center; color: var(--dim); font-size: 14px; padding: 26px 10px; }
.mm-party .empty .em{ font-size: 40px; display: block; margin-bottom: 10px; opacity: 0.7; }

.mm-party hr.sep{ border: none; border-top: 1px solid var(--line); margin: 14px 0; }


/* ============================ premium pass ============================
 * Lifted from Disney365's vocabulary: perforated tickets, stamped numerals,
 * and a grain over everything. */
/* ---- stamped numerals ----
 * Monospace and tabular so a score that ticks from 990 to 1000 does not shove
 * the row sideways, with the unit set small and dimmed beside it. */
.mm-party .stamp{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.mm-party .stamp .u{
  font-size: 0.42em; opacity: 0.6; margin-left: 0.12em;
  font-weight: 600; letter-spacing: 0.04em;
}

.mm-party .prow .sc, .mm-party .ahud-score, .mm-party .rrow .sc{ font-family: var(--mono); letter-spacing: -0.02em; }
.mm-party .code-big, .mm-party .cd, .mm-party .code{ font-family: var(--mono); }

/* ---- the ticket ----
 * A punched card. The notches are a mask, so they work on any background —
 * which matters because these sit over a gradient. */
.mm-party .ticket{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border-radius: var(--r-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.10);
  --notch: 13px;
  -webkit-mask-image:
    radial-gradient(circle at 0 62%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 62%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  mask-image:
    radial-gradient(circle at 0 62%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at 100% 62%, transparent var(--notch), #000 calc(var(--notch) + 0.5px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* the tear line the notches sit on */
.mm-party .ticket::after{
  content: ''; position: absolute; left: 14px; right: 14px; top: 62%;
  border-top: 2px dashed rgba(255,255,255,0.16);
  pointer-events: none;
}
.mm-party .ticket.no-tear::after{ display: none; }

/* ---- cards get depth rather than just an outline ---- */
.mm-party .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.028));
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mm-party .card > h2{ color: var(--sub); opacity: 0.62; }

/* ---- buttons: a lit edge instead of a flat fill ---- */
/* (the button treatment is the keycap, defined once above) */
/* ---- the mode cards carry the ticket treatment ---- */
.mm-party .mode-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.10);
  border-color: var(--edge);
}
.mm-party .mode-card .nm{ letter-spacing: -0.5px; }

/* ---- headings ---- */
.mm-party .winner-name{ letter-spacing: 0; }

/* ---- the join code, set like a ticket serial ---- */
.mm-party .code-big{
  background: linear-gradient(180deg, #ffffff, var(--indigo-lt));
  -webkit-background-clip: text; background-clip: text;
}

/* The join ticket carries the tear line under the QR, above the code, so the
 * code reads as the stub you keep. */
.mm-party .ticket .qr-wrap{ padding-top: 2px; }
.mm-party .ticket{ --notch: 15px; }
/* The tear sits BETWEEN the QR and the code, so the code reads as the stub
 * you keep rather than having a dashed line struck through it. */
.mm-party .ticket::after{ top: 61%; }
.mm-party .ticket .code-big{ margin-top: 26px; }

/* ---- embedded game ----
 * The game gets the screen. Everything else on this view is a thin strip, so
 * a drawing canvas or a typing box has room to actually be used on a phone. */
.mm-party .round-head{
  display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px;
}
.mm-party .round-em{ font-size: 26px; }
.mm-party .round-name{ font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.mm-party .round-sub{
  font-size: 12px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-party .gameframe{
  position: relative; width: 100%;
  height: calc(100vh - var(--safe-t) - var(--safe-b) - 190px);
  min-height: 380px;
  border-radius: var(--r); overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.mm-party .gameframe iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* ---- in-app QR scanner ---- */
.mm-party #scanner{
  position: fixed; inset: 0; z-index: 120; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.mm-party #scanner video{ width: 100%; height: 100%; object-fit: cover; }
.mm-party .scan-frame{
  position: absolute; width: min(70vw, 300px); aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,0.9); border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55);
}
.mm-party .scan-msg{
  position: absolute; left: 20px; right: 20px; bottom: calc(var(--safe-b) + 96px);
  text-align: center; font-size: 15px; font-weight: 600; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.mm-party .scan-x{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 24px); width: auto; padding: 12px 28px;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(8px);
}

/* ---- Heads Up ---------------------------------------------------------
 * The word is the whole screen for everyone except the guesser, so it gets
 * room to breathe and the judge buttons get thumb-sized targets. */
.mm-party .hu-word{ position: relative; }
.mm-party .hu-judge{ min-height: 74px; font-size: 19px; font-weight: 800; }
.mm-party .hu-flash{
  position: absolute; inset: auto 0 8px 0; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: 0.14em;
  animation: huflash 900ms ease-out both;
}
.mm-party .hu-flash.got{ color: var(--green); }
.mm-party .hu-flash.pass{ color: var(--red2); }
@keyframes huflash { .mm-party from{ opacity: 0; transform: translateY(8px); } .mm-party to{ opacity: 1; } }

/* Anything nested inside a keycap takes the cap's own ink. Secondary text was
 * still painted --dim, which is a mid slate — legible on the shell it was
 * designed for, and unreadable once the key underneath it is gold. */
.mm-party .opt .muted, .mm-party .opt small, .mm-party .opt .st, .mm-party .opt .nm, .mm-party .btn .muted, .mm-party .btn small{ color: inherit; }
.mm-party .opt .muted, .mm-party .opt small, .mm-party .opt .st, .mm-party .btn .muted, .mm-party .btn small{ opacity: 0.72; }

/* ---- the cup --------------------------------------------------------
 * A tournament needs two things on screen: what this round is worth, and
 * whether you are climbing. Everything else is the scoreboard's job. */
.mm-party .cup-stake{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--sub);
}
.mm-party .cup-stake b{ font-family: var(--display); color: var(--ink); font-size: 14px; }
.mm-party .cup-stake .nx{ margin-left: auto; opacity: 0.7; }
.mm-party .cup-stake.final{
  background: linear-gradient(180deg, rgba(255,214,90,0.22), rgba(255,214,90,0.10));
  border-color: rgba(255,214,90,0.5); color: var(--gold);
}
.mm-party .cup-stake.final b{ color: var(--gold); }

.mm-party .ctable{ display: flex; flex-direction: column; gap: 8px; }
.mm-party .crow{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.mm-party .crow.me{ border-color: rgba(255, 214, 90, 0.55); }
.mm-party .crow .cpos{
  width: 22px; flex: none; text-align: center;
  font-family: var(--display); font-weight: 800; color: var(--dim);
}
.mm-party .crow .nm{ font-size: 15px; font-weight: 700; }
.mm-party .crow .csc{
  margin-left: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 800; color: var(--gold); font-size: 16px;
}
.mm-party .cdots{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.mm-party .cdot{
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim);
  background: rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 1px 6px;
}
.mm-party .crow i{ font-style: normal; font-size: 12px; font-weight: 800; width: 30px; text-align: right; }
.mm-party .crow i.up{ color: var(--green); }
.mm-party .crow i.dn{ color: var(--red2); }
.mm-party .crow i.lv{ color: var(--dim); opacity: 0.6; }

/* ---- Dial It In -----------------------------------------------------
 * A spectrum needs two things to be readable across a room: the poles, and
 * one obvious marker. The range input does the dragging because it is already
 * accessible and already handles touch — the bar above it is just the picture. */
.mm-party .poles{
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--display); font-size: 14px; font-weight: 700;
  color: var(--sub); margin: 6px 2px;
}
.mm-party .poles span:last-child{ text-align: right; }
.mm-party .dial{
  position: relative; height: 14px; border-radius: 999px; margin: 6px 0;
  background: linear-gradient(90deg, var(--key-b), var(--grape), var(--key-a));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.mm-party .dial.big{ height: 22px; }
.mm-party .dial > i{
  position: absolute; top: 50%; width: 6px; height: 30px; margin-left: -3px;
  transform: translateY(-50%); border-radius: 3px; background: var(--cream);
  box-shadow: 0 2px 6px rgba(9, 4, 26, 0.6);
}
.mm-party .dial.big > i{ height: 40px; }
.mm-party .dial > i.t{ background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 214, 90, 0.3); }
.mm-party .dial > b{
  position: absolute; top: -22px; margin-left: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--well); border: 1px solid var(--line);
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
}

/* The range input IS the dial: it sits directly on the painted bar with an
 * invisible track, so you drag the marker itself rather than a control beneath
 * it. Kept as a real <input type=range> because it already handles touch,
 * keyboard and screen readers for free. */
.mm-party .dialwrap{ position: relative; padding: 6px 0 2px; }
.mm-party .dialwrap input[type=range]{
  position: absolute; inset: 6px 0 auto 0; width: 100%; height: 44px;
  margin: 0; background: transparent; -webkit-appearance: none; appearance: none;
}
.mm-party .dialwrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%;
  background: transparent; cursor: grab;
}
.mm-party .dialwrap input[type=range]::-moz-range-thumb{
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
}
.mm-party .dialwrap input[type=range]::-moz-range-track{ background: transparent; }
.mm-party .dialwrap input[type=range]:disabled{ pointer-events: none; }

/* A wall of equal candidates — no colour code, because there is none to learn */
.mm-party .opts.plain > .opt{ --cap: var(--card); --cap-edge: rgba(9, 4, 26, 0.5); --cap-ink: var(--ink); }
.mm-party .opts.plain > .opt.picked{ --cap: var(--gold); --cap-edge: var(--gold-dk); --cap-ink: var(--gold-ink); }