/* Playing together: the friends list, name tags, and the party games.
 *
 * Paired with src/game/roster.js (.ormp-*), src/render/nameTags.js (.ortag-*,
 * .orarrow-*) and src/game/modesUi.js (.mpg-*); the class names are created
 * there and nowhere else.
 *
 * The same language as the driving HUD and the objectives column (hud.css,
 * goals.css), on purpose: one unit that scales with the screen, flat
 * translucent panels with a hairline edge — never backdrop-filter, which
 * re-blurs a 60 fps world behind every panel on every frame — the HUD's amber,
 * tabular numbers. A friend's colour is theirs everywhere it appears: the
 * stripe on their row in the timing tower is the edge of their name tag, the
 * column of light over their car and the dot on the map.
 *
 * Each game has one colour and it never means anything else:
 *   race  amber (the solo races' colour)   tag  signal red   coins  gold
 */

.ormp, .mpg, .ortag-layer {
  --mp-u: clamp(0.56rem, 1.25vmin, 1.25rem);
  --mp-gap: calc(var(--mp-u) * 1.15);
  --mp-ink: #eef4fa;
  --mp-dim: #9fb0c1;
  --mp-faint: #6c7a89;
  --mp-panel: rgba(10, 13, 18, 0.66);
  --mp-panel-hi: rgba(10, 13, 18, 0.86);
  --mp-edge: rgba(255, 255, 255, 0.13);
  --mp-shadow: 0 calc(var(--mp-u) * 0.2) calc(var(--mp-u) * 1.2) rgba(0, 0, 0, 0.45);
  --mp-radius: calc(var(--mp-u) * 0.6);
  --mp-accent: #ffb43c;
  --mp-race: #ffb43c;
  --mp-tag: #ff4d3a;
  --mp-coins: #ffd84a;
  --mp-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --mp-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ormp kbd, .mpg kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.18em 0.4em 0.14em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: 2px;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.06);
  font: 700 0.82em/1 var(--mp-mono);
  text-align: center;
  color: var(--mp-ink);
}

/* ============================================================================
   Friends: the chip, the list (Tab), toasts, the Guide banner, title badge, pins

   --mp-left-top is where the left-hand column starts: a third of the way
   down, or just below the timing tower while a game is on (modesUi.js sets
   it on the root element when the tower changes height).
   ========================================================================== */

.ormp {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  font-family: var(--mp-font);
  color: var(--mp-ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.ormp * { box-sizing: border-box; }
.ormp [hidden] { display: none !important; }

/* A friend's colour: a short vertical stripe, the tower's language. */
.ormp-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: calc(var(--mp-u) * 0.34);
  height: calc(var(--mp-u) * 1.3);
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 calc(var(--mp-u) * 0.6) currentColor;
}

.ormp-chip {
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px));
  top: var(--mp-left-top, 30vh);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.6);
  padding: calc(var(--mp-u) * 0.45) calc(var(--mp-u) * 0.7) calc(var(--mp-u) * 0.45) calc(var(--mp-u) * 0.55);
  border: 1px solid var(--mp-edge);
  border-radius: var(--mp-radius);
  background: var(--mp-panel);
  box-shadow: var(--mp-shadow);
  color: var(--mp-ink);
  font: 700 calc(var(--mp-u) * 1.05)/1.1 var(--mp-font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: top 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ormp-chip:hover { background: var(--mp-panel-hi); }
.ormp-chip .ormp-dots { display: flex; gap: calc(var(--mp-u) * 0.18); }
.ormp-chip .ormp-dots .ormp-dot { height: calc(var(--mp-u) * 1.1); }

/* ---- the list ------------------------------------------------------------- */

.ormp-panel {
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px));
  top: 50%;
  width: min(calc(var(--mp-u) * 40), calc(100vw - 2 * var(--mp-gap)));
  max-height: 86vh;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--mp-u) * -1.2), -50%);
  border: 1px solid var(--mp-edge);
  border-left: calc(var(--mp-u) * 0.3) solid var(--mp-accent);
  border-radius: var(--mp-radius);
  /* Opaque, and above everything else in .ormp (the toasts, the Guide banner
   * and the chip are later siblings, and painted over it at z-index auto: the
   * first Tab after Play put "You're right behind Juno!" across Juno's row).
   * At 0.9 alpha the friend arrows and the objectives column read through it
   * on a phone. It is a menu while it is open; nothing shows through a menu. */
  z-index: 3;
  background: #0b0e13;
  box-shadow: 0 calc(var(--mp-u) * 1) calc(var(--mp-u) * 3.5) rgba(0, 0, 0, 0.55);
  transition: opacity 150ms ease, transform 150ms ease;
}
.ormp-panel.is-open { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }

.ormp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(var(--mp-u) * 0.9) calc(var(--mp-u) * 1) calc(var(--mp-u) * 0.4);
}
.ormp-title {
  font: 900 calc(var(--mp-u) * 1.2)/1 var(--mp-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ormp-x {
  appearance: none;
  border: 0;
  background: none;
  color: var(--mp-dim);
  font: 600 calc(var(--mp-u) * 0.95)/1 var(--mp-font);
  cursor: pointer;
  padding: calc(var(--mp-u) * 0.3) calc(var(--mp-u) * 0.4);
}
.ormp-x:hover { color: var(--mp-ink); }
.ormp-x kbd { margin-left: 0.3em; }

.ormp-sec {
  margin: calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 1) calc(var(--mp-u) * 0.3);
  font: 800 calc(var(--mp-u) * 0.78)/1 var(--mp-font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mp-faint);
}

.ormp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--mp-u) * 0.8);
  min-height: calc(var(--mp-u) * 3.4);
  padding: calc(var(--mp-u) * 0.45) calc(var(--mp-u) * 1);
  border-left: calc(var(--mp-u) * 0.22) solid transparent;
}
.ormp-row.is-sel { background: rgba(255, 255, 255, 0.07); border-left-color: var(--mp-ink); }
.ormp-who { min-width: 0; }
.ormp-name {
  font: 800 calc(var(--mp-u) * 1.2)/1.2 var(--mp-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ormp-car {
  font: 600 calc(var(--mp-u) * 0.85)/1.3 var(--mp-font);
  color: var(--mp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ormp-where {
  display: flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.4);
  font: 700 calc(var(--mp-u) * 1)/1 var(--mp-mono);
  color: var(--mp-ink);
  white-space: nowrap;
}
.ormp-arrow { width: calc(var(--mp-u) * 1.4); height: calc(var(--mp-u) * 1.4); display: inline-block; }
.ormp-btns { display: flex; gap: calc(var(--mp-u) * 0.4); }

.ormp-btn {
  appearance: none;
  min-height: calc(var(--mp-u) * 2.6);
  min-width: calc(var(--mp-u) * 5);
  padding: 0 calc(var(--mp-u) * 0.8);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: calc(var(--mp-u) * 0.35);
  background: transparent;
  color: var(--mp-ink);
  font: 800 calc(var(--mp-u) * 0.85)/1 var(--mp-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ormp-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.ormp-btn:disabled { opacity: 0.35; cursor: default; }
.ormp-btn--go { border-color: var(--mp-accent); background: var(--mp-accent); color: #1a1200; }
.ormp-btn--go:hover:not(:disabled) { background: #ffc766; }
.ormp-btn.is-on { border-color: var(--mp-ink); background: rgba(255, 255, 255, 0.14); }
@media (pointer: coarse) { .ormp-btn { min-height: 44px; min-width: 64px; } }

.ormp-empty { padding: calc(var(--mp-u) * 0.6) calc(var(--mp-u) * 1.2); color: var(--mp-dim); font: 600 calc(var(--mp-u) * 0.95)/1.45 var(--mp-font); }
.ormp-foot {
  margin-top: calc(var(--mp-u) * 0.6);
  padding: calc(var(--mp-u) * 0.7) calc(var(--mp-u) * 1) calc(var(--mp-u) * 0.9);
  border-top: 1px solid var(--mp-edge);
  color: var(--mp-dim);
  font: 600 calc(var(--mp-u) * 0.82)/1.9 var(--mp-font);
}

/* ---- Play together: one row per game ------------------------------------ */

.ormp-game { --k: var(--mp-race); grid-template-columns: auto minmax(0, 1fr) auto; }
.ormp-game[data-kind="tag"] { --k: var(--mp-tag); }
.ormp-game[data-kind="coins"] { --k: var(--mp-coins); }
.ormp-game-mark {
  width: calc(var(--mp-u) * 2.4);
  height: calc(var(--mp-u) * 2.4);
  color: var(--k);
  filter: drop-shadow(0 0 calc(var(--mp-u) * 0.4) var(--k));
}
.ormp-game-mark svg { display: block; width: 100%; height: 100%; }
.ormp-game-name {
  font: 900 calc(var(--mp-u) * 1.1)/1.15 var(--mp-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k);
}
.ormp-game-sub { font: 600 calc(var(--mp-u) * 0.85)/1.35 var(--mp-font); color: var(--mp-dim); }
.ormp-pick {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.3);
  margin-top: calc(var(--mp-u) * 0.2);
  color: var(--mp-ink);
  font: 700 calc(var(--mp-u) * 0.95)/1.2 var(--mp-font);
}
.ormp-pick button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--mp-dim);
  font: 800 calc(var(--mp-u) * 1)/1 var(--mp-font);
  padding: 0 calc(var(--mp-u) * 0.25);
  cursor: pointer;
}
.ormp-pick button:hover { color: var(--mp-ink); }
.ormp-game .ormp-btn--go { border-color: var(--k); background: var(--k); color: #150d05; }
.ormp-game .ormp-btn--live { border-color: var(--k); color: var(--k); }

/* ---- toasts and the Guide banner -------------------------------------- */

.ormp-toasts {
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px));
  top: calc(var(--mp-left-top, 30vh) + var(--mp-u) * 3.6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--mp-u) * 0.45);
  transition: top 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ormp-toast {
  display: flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.6);
  max-width: min(calc(var(--mp-u) * 30), 80vw);
  padding: calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 0.9) calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 0.6);
  border: 1px solid var(--mp-edge);
  border-radius: var(--mp-radius);
  background: var(--mp-panel);
  box-shadow: var(--mp-shadow);
  font: 700 calc(var(--mp-u) * 1.02)/1.25 var(--mp-font);
  animation: ormp-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ormp-toast.is-out { opacity: 0; transform: translateX(calc(var(--mp-u) * -0.6)); transition: opacity 0.3s, transform 0.3s; }
@keyframes ormp-in { from { opacity: 0; transform: translateX(calc(var(--mp-u) * -1)); } to { opacity: 1; transform: none; } }

.ormp-guide {
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px));
  top: calc(var(--mp-left-top, 30vh) - var(--mp-u) * 3.4);
  display: flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.6);
  padding: calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 0.9) calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 0.6);
  border: 1px solid var(--mp-edge);
  border-radius: var(--mp-radius);
  background: var(--mp-panel);
  box-shadow: var(--mp-shadow);
  font: 800 calc(var(--mp-u) * 1.05)/1.1 var(--mp-font);
  white-space: nowrap;
}
.ormp-guide small { font: 600 calc(var(--mp-u) * 0.8)/1 var(--mp-font); color: var(--mp-dim); letter-spacing: 0.04em; }

/* ---- the title screen's badge and the map's pins (in menus.js's DOM) ---- */

.ormp-badge {
  --mp-u: clamp(0.56rem, 1.25vmin, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  pointer-events: auto;
  font-family: var(--mp-font, system-ui, sans-serif);
}
.ormp-badge[hidden] { display: none; }
.ormp-badge .ormp-dot { width: 0.3rem; height: 1rem; border-radius: 1px; background: currentColor; display: inline-block; }
.ormp-badge-lead {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-right: 0.3rem;
  font: 800 0.8rem/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #eef4fa;
}
.ormp-badge-lead .ormp-dot { color: #5ce07a; box-shadow: 0 0 8px #5ce07a; }
.ormp-pickf {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.1rem;
  padding: 0 0.75em 0 0.55em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.35rem;
  background: rgba(10, 13, 18, 0.5);
  color: #eef4fa;
  font: 700 0.85rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.ormp-pickf:hover { background: rgba(255, 255, 255, 0.1); }
.ormp-pickf.is-on { border-color: #ffb43c; box-shadow: inset 0 0 0 1px #ffb43c; }
.ormp-badge-note { width: 100%; font: 500 0.78rem/1.3 system-ui, sans-serif; color: rgba(238, 242, 246, 0.6); }

.ormp-pins { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.ormp-pin {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: auto;
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%);
}
.ormp-pin i { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(6, 8, 12, 0.85), 0 0 12px currentColor; }
.ormp-pin b {
  margin-bottom: 4px; padding: 2px 7px; border-radius: 3px;
  border-left: 3px solid currentColor;
  background: rgba(6, 8, 12, 0.85); color: #fff;
  font: 700 12px/1.2 system-ui, sans-serif; white-space: nowrap;
}
.ormp-pop {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: auto;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 190px; padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
  background: rgba(10, 13, 18, 0.94); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-family: system-ui, sans-serif; color: #eef4fa;
}
.ormp-pop[hidden] { display: none; }
.ormp-pop .ormp-name { font: 800 14px/1.2 system-ui, sans-serif; }
.ormp-pop .ormp-car { font: 600 11.5px/1.3 system-ui, sans-serif; color: #9fb0c1; }
.ormp-pop .ormp-btn { min-height: 34px; min-width: 64px; font-size: 11px; }

/* ============================================================================
   Name tags and edge arrows (render/nameTags.js)
   ========================================================================== */

.ortag-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; font-family: var(--mp-font); }
.ortag { position: absolute; left: 0; top: 0; will-change: transform; }
.ortag__in { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.ortag__name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid currentColor;
  border-radius: 4px;
  background: rgba(10, 13, 18, 0.74);
  font: 800 15px/1.2 var(--mp-font);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ortag__name span { color: #fff; }
.ortag__badge {
  display: none;
  margin-left: 2px;
  padding: 2px 5px 1px;
  border-radius: 2px;
  background: currentColor;
  font: 900 11px/1 var(--mp-font);
  letter-spacing: 0.08em;
}
.ortag__badge b { color: #10131a; }
.ortag.has-badge .ortag__badge { display: inline-block; }
.ortag.is-it .ortag__badge { background: var(--mp-tag); animation: ortag-it 0.7s ease-in-out infinite alternate; }
.ortag.is-it .ortag__badge b { color: #fff; }
@keyframes ortag-it { to { box-shadow: 0 0 12px 2px var(--mp-tag); } }
.ortag__dist { margin-top: 2px; font: 700 12px/1.3 var(--mp-mono); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); }
.ortag__stem { width: 2px; height: 12px; background: linear-gradient(currentColor, transparent); }
.ortag.is-guide .ortag__name { animation: ortag-pulse 1s ease-in-out infinite; }
@keyframes ortag-pulse { 50% { box-shadow: 0 0 18px 1px currentColor; } }

/* A reaction: a speech bubble over the tag, in the sender's colour, with a
 * tail pointing down at the car. Preset words only (modes.js EMOTE_TEXT). */
.ortag__say, .ortag-self {
  position: relative;
  margin-bottom: 8px;
  padding: 6px 12px 7px;
  border: 2px solid currentColor;
  border-radius: 10px;
  background: #fbfcfe;
  font: 900 17px/1 var(--mp-font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  animation: ortag-say 0.34s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.ortag__say b, .ortag-self b { color: #121620; }
.ortag__say::after, .ortag-self::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -7px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: currentColor;
}
.ortag__say[hidden] { display: none; }
@keyframes ortag-say { from { transform: translateY(6px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ortag-self { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; }
.ortag-self[hidden] { display: none; }

.orarrow { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.orarrow__tri {
  position: absolute; left: -11px; top: -11px; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-bottom: 20px solid currentColor;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px currentColor);
}
.orarrow__lbl {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  padding: 3px 7px;
  border-left: 3px solid currentColor;
  border-radius: 3px;
  background: rgba(10, 13, 18, 0.78);
  color: #fff;
  font: 800 13px/1 var(--mp-font);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}
.orarrow.is-guide .orarrow__tri, .orarrow.is-it .orarrow__tri { animation: orarrow-pulse 0.8s ease-in-out infinite; }
@keyframes orarrow-pulse { 50% { transform: scale(1.25); } }

/* ============================================================================
   Party games (src/game/modesUi.js)
   ========================================================================== */

.mpg {
  --k: var(--mp-race);
  position: fixed;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  color: var(--mp-ink);
  font-family: var(--mp-font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
.mpg[data-kind="tag"] { --k: var(--mp-tag); }
.mpg[data-kind="coins"] { --k: var(--mp-coins); }
.mpg * { box-sizing: border-box; }
.mpg [hidden] { display: none !important; }
.mpg.is-off > * { display: none !important; }

/* ---- the timing tower: who is where, top left ------------------------------ */

.mpg-tower {
  --row: calc(var(--mp-u) * 2.25);
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px));
  /* --mpg-top / --mpg-w: set by modesUi.js only when the HUD's place line or
   * objectives column would otherwise be under the tower (a phone, upright). */
  top: var(--mpg-top, calc(var(--mp-gap) + env(safe-area-inset-top, 0px)));
  width: var(--mpg-w, min(calc(var(--mp-u) * 21), 44vw));
  border: 1px solid var(--mp-edge);
  border-top: calc(var(--mp-u) * 0.3) solid var(--k);
  border-radius: var(--mp-radius);
  background: var(--mp-panel);
  box-shadow: var(--mp-shadow);
  overflow: hidden;
  animation: mpg-drop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes mpg-drop { from { transform: translateY(calc(var(--mp-u) * -1)); opacity: 0; } }
.mpg-tower__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--mp-u) * 0.6);
  padding: calc(var(--mp-u) * 0.55) calc(var(--mp-u) * 0.8) calc(var(--mp-u) * 0.45);
}
.mpg-tower__game {
  font: 900 calc(var(--mp-u) * 0.85)/1 var(--mp-font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k);
}
.mpg-tower__name {
  flex: 1;
  min-width: 0;
  font: 700 calc(var(--mp-u) * 0.9)/1.1 var(--mp-font);
  color: var(--mp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpg-tower__clock { font: 700 calc(var(--mp-u) * 1.05)/1 var(--mp-mono); }
.mpg-tower__rows { position: relative; margin: 0; padding: 0; list-style: none; }

.mpg-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  display: grid;
  grid-template-columns: calc(var(--mp-u) * 2.3) calc(var(--mp-u) * 0.3) minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: calc(var(--mp-u) * 0.55);
  padding-right: calc(var(--mp-u) * 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.mpg-row__pos {
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  font: 900 calc(var(--mp-u) * 1.05)/1 var(--mp-font);
}
.mpg-row[data-pos="1"] .mpg-row__pos { color: #ffd23f; }
.mpg-row[data-pos="2"] .mpg-row__pos { color: #dfe7ee; }
.mpg-row[data-pos="3"] .mpg-row__pos { color: #e2a06a; }
.mpg-row__col { width: 100%; height: 62%; border-radius: 1px; background: currentColor; }
.mpg-row__name {
  font: 800 calc(var(--mp-u) * 1.02)/1.1 var(--mp-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mp-ink);
}
.mpg-row__tag {
  padding: calc(var(--mp-u) * 0.18) calc(var(--mp-u) * 0.35) calc(var(--mp-u) * 0.12);
  border-radius: 2px;
  background: var(--mp-tag);
  color: #fff;
  font: 900 calc(var(--mp-u) * 0.72)/1 var(--mp-font);
  letter-spacing: 0.1em;
}
.mpg-row__stat { font: 700 calc(var(--mp-u) * 0.92)/1 var(--mp-mono); color: var(--mp-dim); }
.mpg-row.is-me { background: rgba(255, 255, 255, 0.08); }
.mpg-row.is-me .mpg-row__pos { background: var(--k); color: #150d05; }
.mpg-row.is-me .mpg-row__stat { color: var(--mp-ink); }
.mpg-row.is-out { opacity: 0.45; }

.mpg-tower__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--mp-u) * 0.5);
  padding: calc(var(--mp-u) * 0.5) calc(var(--mp-u) * 0.8) calc(var(--mp-u) * 0.6);
  border-top: 1px solid var(--mp-edge);
  font: 800 calc(var(--mp-u) * 0.82)/1.2 var(--mp-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-dim);
}
.mpg-tower__foot b { color: var(--k); font-weight: 900; }
.mpg-tower__foot.is-hot { color: #fff; background: color-mix(in srgb, var(--k) 28%, transparent); }
.mpg-gates { display: flex; gap: calc(var(--mp-u) * 0.2); margin-left: auto; }
.mpg-gates i { width: calc(var(--mp-u) * 0.55); height: calc(var(--mp-u) * 0.55); border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
.mpg-gates i.is-done { background: var(--k); box-shadow: 0 0 calc(var(--mp-u) * 0.4) var(--k); }

/* ---- the invite / lobby card, top centre --------------------------------- */

.mpg-card {
  position: absolute;
  left: 50%;
  top: calc(var(--mp-u) * 6 + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: min(calc(var(--mp-u) * 30), calc(100vw - 2 * var(--mp-gap)));
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--mp-u) * 0.9);
  padding: calc(var(--mp-u) * 0.8) calc(var(--mp-u) * 1) calc(var(--mp-u) * 1);
  border: 1px solid var(--mp-edge);
  border-left: calc(var(--mp-u) * 0.3) solid var(--k);
  border-radius: var(--mp-radius);
  /* Near-solid: it is the one thing on screen to act on, and on a phone it
     sits over the objectives column, whose words showed through at 0.86. */
  background: rgba(12, 15, 20, 0.95);
  box-shadow: var(--mp-shadow), 0 0 calc(var(--mp-u) * 3) color-mix(in srgb, var(--k) 25%, transparent);
  cursor: pointer;
  overflow: hidden;
  animation: mpg-card-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes mpg-card-in { from { transform: translate(-50%, calc(var(--mp-u) * -1.5)); opacity: 0; } }
.mpg-card.is-mine { cursor: default; }
.mpg-card__mark { width: calc(var(--mp-u) * 3); height: calc(var(--mp-u) * 3); color: var(--k); filter: drop-shadow(0 0 calc(var(--mp-u) * 0.5) var(--k)); }
.mpg-card__mark svg { display: block; width: 100%; height: 100%; }
.mpg-card__text { min-width: 0; }
.mpg-card__kind {
  font: 900 calc(var(--mp-u) * 0.78)/1 var(--mp-font);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k);
}
.mpg-card__title {
  margin-top: calc(var(--mp-u) * 0.3);
  font: 900 calc(var(--mp-u) * 1.45)/1.1 var(--mp-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpg-card__sub { margin-top: calc(var(--mp-u) * 0.25); font: 600 calc(var(--mp-u) * 0.92)/1.3 var(--mp-font); color: var(--mp-dim); }
.mpg-card__who { display: flex; flex-wrap: wrap; gap: calc(var(--mp-u) * 0.3) calc(var(--mp-u) * 0.7); margin-top: calc(var(--mp-u) * 0.5); }
.mpg-card__who span { display: inline-flex; align-items: center; gap: calc(var(--mp-u) * 0.3); font: 700 calc(var(--mp-u) * 0.85)/1 var(--mp-font); }
.mpg-card__who i { width: calc(var(--mp-u) * 0.3); height: calc(var(--mp-u) * 0.95); border-radius: 1px; background: currentColor; }
.mpg-card__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mp-u) * 0.35);
  font: 900 calc(var(--mp-u) * 0.85)/1 var(--mp-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mpg-card__act kbd { font-size: calc(var(--mp-u) * 1.4); padding: 0.25em 0.55em 0.2em; border-color: var(--k); color: var(--k); }
.mpg-card__secs { font: 900 calc(var(--mp-u) * 1.7)/1 var(--mp-mono); color: var(--mp-ink); }
.mpg-card__time {
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--mp-u) * 0.22);
  width: 100%;
  background: var(--k);
  transform-origin: 0 50%;
}

/* ---- the big numbers, and the banners ---------------------------------- */

.mpg-count {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mp-u) * 0.6);
}
.mpg-count b {
  font: 900 calc(var(--mp-u) * 11)/1 var(--mp-font);
  color: #fff;
  text-shadow: 0 0 calc(var(--mp-u) * 2) var(--k), 0 calc(var(--mp-u) * 0.3) calc(var(--mp-u) * 1) rgba(0, 0, 0, 0.7);
}
.mpg-count b.is-tick { animation: mpg-tick 1s ease-out; }
.mpg-count b.is-go { color: #6dff9e; text-shadow: 0 0 calc(var(--mp-u) * 2.4) rgba(80, 255, 140, 0.9), 0 calc(var(--mp-u) * 0.3) calc(var(--mp-u) * 1) rgba(0, 0, 0, 0.7); }
.mpg-count small {
  padding: calc(var(--mp-u) * 0.35) calc(var(--mp-u) * 0.8);
  border-radius: var(--mp-radius);
  background: var(--mp-panel);
  font: 900 calc(var(--mp-u) * 1.05)/1 var(--mp-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@keyframes mpg-tick {
  0% { transform: scale(2.1); opacity: 0; }
  15% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.85; }
}

.mpg-flash {
  position: absolute;
  left: 50%;
  top: 21%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mp-u) * 0.3);
  pointer-events: none;
}
.mpg-flash__big {
  --f: var(--k);
  padding: calc(var(--mp-u) * 0.45) calc(var(--mp-u) * 1.4) calc(var(--mp-u) * 0.5);
  background: var(--f);
  color: #150d05;
  font: 900 italic calc(var(--mp-u) * 2.6)/1 var(--mp-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  clip-path: polygon(calc(var(--mp-u) * 0.9) 0, 100% 0, calc(100% - var(--mp-u) * 0.9) 100%, 0 100%);
  box-shadow: 0 0 calc(var(--mp-u) * 3) var(--f);
  animation: mpg-slam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.mpg-flash__big.is-red { --f: var(--mp-tag); color: #fff; }
.mpg-flash__big.is-gold { --f: var(--mp-coins); }
.mpg-flash__big.is-green { --f: #6dff9e; }
.mpg-flash__small {
  padding: calc(var(--mp-u) * 0.3) calc(var(--mp-u) * 0.8);
  border-radius: 3px;
  background: var(--mp-panel-hi);
  font: 800 calc(var(--mp-u) * 1.05)/1.2 var(--mp-font);
  letter-spacing: 0.04em;
  animation: mpg-rise 0.3s ease-out;
}
.mpg-flash > .is-out { opacity: 0; transition: opacity 0.35s ease; }
@keyframes mpg-slam { 0% { transform: scale(1.8) skewX(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes mpg-rise { from { transform: translateY(calc(var(--mp-u) * 0.6)); opacity: 0; } }

/* ---- the podium --------------------------------------------------------------- */

.mpg-podium {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(var(--mp-u) * 34), calc(100vw - 2 * var(--mp-gap)));
  pointer-events: auto;
  padding: calc(var(--mp-u) * 1.2) calc(var(--mp-u) * 1.4) calc(var(--mp-u) * 1.2);
  border: 1px solid var(--mp-edge);
  border-top: calc(var(--mp-u) * 0.35) solid var(--k);
  border-radius: var(--mp-radius);
  /* Opaque, like the party panel: at 0.9 the tower and a friend's name tag
   * read through the steps on a phone. */
  background: #0b0e13;
  box-shadow: 0 calc(var(--mp-u) * 1.2) calc(var(--mp-u) * 4) rgba(0, 0, 0, 0.6);
  animation: mpg-podium-in 0.5s cubic-bezier(0.2, 1.2, 0.4, 1);
}
/* The podium is a moment, not a HUD: the tower (whose rows it repeats) and
 * the left column wait (modesUi.js sets these while it is up). .ormp paints
 * above .mpg, so its pieces are hidden, not merely stacked under. */
.mpg.has-podium .mpg-say,
.mpg.has-podium .mpg-tower { display: none !important; }
:root[data-mpg-podium] .ormp-chip,
:root[data-mpg-podium] .ormp-toasts,
:root[data-mpg-podium] .ormp-guide { visibility: hidden; }
@keyframes mpg-podium-in { from { transform: translate(-50%, -44%); opacity: 0; } }
.mpg-podium__kind { font: 900 calc(var(--mp-u) * 0.8)/1 var(--mp-font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--k); }
.mpg-podium__title { margin-top: calc(var(--mp-u) * 0.35); font: 900 calc(var(--mp-u) * 1.6)/1.1 var(--mp-font); }
.mpg-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: calc(var(--mp-u) * 0.5);
  margin: calc(var(--mp-u) * 1.2) 0 calc(var(--mp-u) * 0.8);
}
.mpg-step { display: flex; flex-direction: column; align-items: center; gap: calc(var(--mp-u) * 0.35); min-width: 0; }
.mpg-step__name { max-width: 100%; font: 900 calc(var(--mp-u) * 1.1)/1.15 var(--mp-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpg-step__stat { font: 700 calc(var(--mp-u) * 0.9)/1 var(--mp-mono); color: var(--mp-dim); }
.mpg-step__block {
  position: relative;
  width: 100%;
  display: grid;
  place-items: start center;
  padding-top: calc(var(--mp-u) * 0.4);
  border-top: calc(var(--mp-u) * 0.3) solid currentColor;
  background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
  font: 900 calc(var(--mp-u) * 2.2)/1 var(--mp-font);
  transform-origin: 50% 100%;
  animation: mpg-rise-step 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.mpg-step[data-place="1"] .mpg-step__block { height: calc(var(--mp-u) * 6.4); animation-delay: 0.36s; }
.mpg-step[data-place="2"] .mpg-step__block { height: calc(var(--mp-u) * 4.6); animation-delay: 0.18s; }
.mpg-step[data-place="3"] .mpg-step__block { height: calc(var(--mp-u) * 3.3); }
.mpg-step[data-place="1"] .mpg-step__block span { color: #ffd23f; }
.mpg-step[data-place="2"] .mpg-step__block span { color: #dfe7ee; }
.mpg-step[data-place="3"] .mpg-step__block span { color: #e2a06a; }
.mpg-step.is-empty { visibility: hidden; }
.mpg-step.is-me .mpg-step__name::after { content: " (you)"; font-weight: 700; color: var(--mp-dim); }
@keyframes mpg-rise-step { from { transform: scaleY(0); } }
.mpg-rest { margin: 0 0 calc(var(--mp-u) * 0.8); padding: 0; list-style: none; font: 700 calc(var(--mp-u) * 0.92)/1.8 var(--mp-font); color: var(--mp-dim); }
.mpg-rest li { display: flex; gap: calc(var(--mp-u) * 0.6); }
.mpg-rest li span:last-child { margin-left: auto; font-family: var(--mp-mono); }
.mpg-podium__acts { display: flex; align-items: center; gap: calc(var(--mp-u) * 0.6); }
.mpg-podium__acts .ormp-btn { min-height: calc(var(--mp-u) * 2.8); }
.mpg-podium__acts .ormp-btn--go { border-color: var(--k); background: var(--k); color: #150d05; }
.mpg-podium__bar { flex: 1; height: calc(var(--mp-u) * 0.2); background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mpg-podium__bar i { display: block; height: 100%; background: var(--k); transform-origin: 0 50%; }

/* ---- emotes on a touch screen ----------------------------------------------- */

.mpg-say {
  position: absolute;
  left: calc(var(--mp-gap) + env(safe-area-inset-left, 0px) + var(--mp-u) * 0.2);
  top: calc(var(--mp-left-top, 30vh) + var(--mp-u) * 3.4);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.mpg-say button {
  appearance: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mp-edge);
  border-radius: 10px 10px 10px 2px;
  background: #fbfcfe;
  color: #121620;
  font: 900 15px/1 var(--mp-font);
  cursor: pointer;
}
.mpg-say .mpg-say__open { background: var(--mp-panel); color: var(--mp-ink); border-radius: var(--mp-radius); }

@media (prefers-reduced-motion: reduce) {
  .ormp *, .mpg *, .ortag-layer * { animation: none !important; transition: none !important; }
}
@media (max-width: 640px), (max-height: 520px) {
  .mpg-tower { width: var(--mpg-w, min(calc(var(--mp-u) * 18), 46vw)); }
  .mpg-card { top: calc(var(--mp-u) * 4.5 + env(safe-area-inset-top, 0px)); }
}
/* A phone held upright: the objectives column fills the top right, so the
   banners drop below it rather than landing on its words. */
@media (max-width: 640px) and (orientation: portrait) {
  .mpg-flash { top: 38%; }
}