/* games.fun multiplayer kit: party shell. Kit-owned (never edit a copy). The game's frame and the standings rail sit
   side by side, so the kit never draws over the game's own HUD (a game that draws everyone's scores itself,
   live.hud "game", gets the whole stage). Colours come from multiplayer.json "theme". Kit 1.4.0: the waiting room
   stands left of the stage like a game's home menu, over the game's own world when live.backdrop loads it. Kit 1.5.0:
   a world's card stands there too (low on a phone, centred in a post's small card), with a pill and a toast. */
:root {
  --mp-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-bg: #0d0f15; --mp-panel: #1b1e27; --mp-fg: #eef0f6; --mp-muted: #b8bfd2; --mp-faint: #8a90a2;
  --mp-line: #333a4d; --mp-row: #232735; --mp-button: #262a37; --mp-accent: #4f7cff; --mp-accent-fg: #fff;
  --mp-code: #ffd166; --mp-ok: #3ddc84; --mp-radius: 12px; --mp-rail: 248px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--mp-bg); color: var(--mp-fg); font: 15px/1.4 var(--mp-font); overflow: hidden; }
#party { display: grid; grid-template-columns: minmax(0, 1fr) var(--mp-rail); height: 100dvh; }
#party[data-phase="boot"], #party[data-phase="home"], #party[data-rail="off"] { grid-template-columns: minmax(0, 1fr); }

#stage { position: relative; min-width: 0; min-height: 0; background: radial-gradient(120% 90% at 70% 40%, #1d2340 0%, var(--mp-bg) 70%); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#game[hidden] { display: none; }
/* the lobby's backdrop: the game's own page, to look at only */
#game.backdrop { pointer-events: none; }

#rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px 12px; background: var(--mp-panel); border-left: 1px solid var(--mp-line); overflow: auto; }
#rail[hidden] { display: none; }
#rail header h1 { margin: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail header p { margin: 2px 0 0; color: var(--mp-faint); font-size: 12px; }
#racers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#racers li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 6px; align-items: center; padding: 7px 8px; border-radius: 9px; background: var(--mp-row); }
#racers li.me { outline: 1px solid var(--mp-accent); }
#racers .place { color: var(--mp-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
#racers .dot { justify-self: center; }
#racers .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#racers .val { font-variant-numeric: tabular-nums; color: var(--mp-muted); font-size: 13px; }
#racers li.done .val { color: var(--mp-ok); font-weight: 700; }
#racers li.away .name { color: var(--mp-faint); }
#racers .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; }
#racers .bar i { display: block; height: 100%; background: var(--mp-accent); transition: width .25s linear; }
#racers li.done .bar i { background: var(--mp-ok); }
#racers li.out .val { color: var(--mp-faint); }
#status { margin: 0; color: var(--mp-muted); font-size: 13px; min-height: 1.4em; }
#controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
#room-controls { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--mp-line); padding-top: 10px; }
#room-controls button { padding: 6px 10px; font-size: 13px; }

button { cursor: pointer; font: inherit; font-weight: 600; color: var(--mp-fg); background: var(--mp-button); border: 1px solid var(--mp-line); border-radius: 9px; padding: 9px 14px; }
button.primary { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-fg); }
button.big { flex: 1 1 auto; padding: 13px 18px; font-size: 17px; font-weight: 750; border-radius: 12px; box-shadow: 0 4px 0 rgba(0, 0, 0, .28); }
button.big:disabled { box-shadow: none; }
button.quiet, a.quiet { background: transparent; border-color: transparent; color: var(--mp-muted); padding: 6px 8px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
button.quiet:hover, a.quiet:hover { color: var(--mp-fg); }
button:disabled { opacity: .5; cursor: default; }
button[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.dot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--mp-faint); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }

/* ---- cards over the stage ---- */
.card { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(8, 10, 16, .78); backdrop-filter: blur(3px); overflow: auto; }
.card[hidden] { display: none; }
.card .panel { width: min(440px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--mp-panel); border: 1px solid var(--mp-line); border-radius: calc(var(--mp-radius) + 4px); padding: 20px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.card h2 { margin: 0 0 6px; font-size: 20px; }
.card h2.title { font-size: 26px; font-weight: 850; letter-spacing: -.01em; line-height: 1.1; margin: 2px 0 12px; }
.card .eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-accent); }
.card p { margin: 6px 0; color: var(--mp-muted); }
.card p.center { text-align: center; }
.card .muted { color: var(--mp-faint); font-size: 13px; }
.card .err { color: #ffb3bf; font-size: 13px; }
.card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.card .row.foot { margin-top: 8px; justify-content: space-between; }
.card .count { font: 800 88px/1 var(--mp-font); text-align: center; color: var(--mp-code); margin: 8px 0; font-variant-numeric: tabular-nums; }

/* the waiting room: a column on the left (a game's home menu stands there too), the world on the right */
.card.lobby { place-items: center start; padding: 16px clamp(16px, 6vw, 72px); }
#party[data-backdrop="1"] .card.lobby { background: linear-gradient(90deg, rgba(8, 10, 16, .88) 0%, rgba(8, 10, 16, .6) 38%, rgba(8, 10, 16, 0) 66%); backdrop-filter: none; }
.card.lobby .panel { width: min(420px, 100%); background: color-mix(in srgb, var(--mp-panel) 94%, transparent); }
.share { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--mp-line); }
.codebox { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.codebox .label { color: var(--mp-faint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.codebox .code { font: 800 32px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; color: var(--mp-code); }
.card .link { display: flex; gap: 6px; }
.card .link input { flex: 1 1 auto; min-width: 0; font: 12px var(--mp-font); color: var(--mp-muted); background: var(--mp-bg); border: 1px solid var(--mp-line); border-radius: 9px; padding: 8px 10px; }
.card .link button { white-space: nowrap; }
.card .hint { font-size: 13px; color: var(--mp-faint); margin: 8px 2px 12px; }
.listhead { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 6px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-faint); }
.count-pill { padding: 2px 8px; border-radius: 999px; background: var(--mp-row); color: var(--mp-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
ul.players, ol.standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.players li, ol.standings li { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 10px; border-radius: 10px; background: var(--mp-row); }
ul.players li.me, ol.standings li.me { box-shadow: inset 0 0 0 1.5px var(--mp-accent); }
ul.players li.empty { background: transparent; border: 1.5px dashed var(--mp-line); color: var(--mp-faint); }
ul.players li.empty .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--mp-line); }
ul.players .name, ol.standings .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
ul.players .tag { flex: none; font-size: 12px; color: var(--mp-faint); }
ul.players .tag.ok { color: var(--mp-ok); }
.name-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: text; }
.name-edit { flex: 1 1 auto; min-width: 0; font: 650 15px/1.2 var(--mp-font); color: var(--mp-fg); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 6px; margin: -5px 0 -5px -6px; }
.name-edit:hover { border-color: var(--mp-line); }
.name-edit:focus { outline: none; border-color: var(--mp-accent); background: var(--mp-bg); }
.name-wrap .pen { color: var(--mp-faint); font-size: 14px; }
.name-edit:focus + .pen { visibility: hidden; }
.card .tip { font-size: 12px; color: var(--mp-faint); margin: 6px 2px 0; }
.waiting { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--mp-muted); font-weight: 600; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--mp-ok); animation: mp-pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes mp-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* results */
ol.standings .place { width: 18px; flex: none; text-align: center; color: var(--mp-faint); font-variant-numeric: tabular-nums; font-weight: 700; }
ol.standings .val { flex: none; font-variant-numeric: tabular-nums; }
ol.standings li.top { background: linear-gradient(90deg, color-mix(in srgb, var(--mp-code) 22%, var(--mp-row)), var(--mp-row)); }
ol.standings li.top .place, ol.standings li.top .val { color: var(--mp-code); }

/* The game owns the result: only room controls at the bottom, with the stage clear and clickable above them. */
.card.results.own { inset: auto 0 0; max-height: 45%; padding: 0; background: none; backdrop-filter: none; pointer-events: none; }
.card.results.own .panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; min-width: 0;
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-radius: 0; box-shadow: none; pointer-events: auto; }
.card.results.own .eyebrow { flex: 1 1 130px; }
.card.results.own .row { margin: 0; min-width: 0; }
.card.results.own .waiting { margin: 0; max-width: 32ch; overflow-wrap: anywhere; }
.card.results.own button { min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 14px; box-shadow: none; }
.card.results .voice-row { margin-top: 10px; }
.card.results.own .voice-cta { width: auto; margin-top: 0; }

/* ---- worlds (kit 1.5.0): the world card over the live world, the pill, the reconnecting toast ---- */
#party[data-mode="world"] .card.lobby { background: linear-gradient(90deg, rgba(8, 10, 16, .86) 0%, rgba(8, 10, 16, .55) 40%, rgba(8, 10, 16, 0) 70%); backdrop-filter: none; }
.card.world .panel { width: min(400px, 100%); }
.card .eyebrow .live-dot { margin-right: 7px; vertical-align: 1px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-ok) 60%, transparent); animation: mp-live 1.8s ease-out infinite; }
@keyframes mp-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-ok) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.card.world h2.title { margin-bottom: 6px; }
.card .tagline { margin: 0 0 12px; color: var(--mp-muted); font-size: 15px; }
.world-count { display: flex; align-items: center; gap: 9px; margin: 0 0 14px !important; padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--mp-line); color: var(--mp-fg) !important; font-weight: 650; font-size: 14px; }
.world-count .dot { width: 10px; height: 10px; }
.world-count.live .dot { background: var(--mp-ok); }
.world-count.empty .dot { background: var(--mp-code); }
.world-count.full .dot { background: #ff8a65; }
.world-count.wait .dot, .world-count.off .dot { background: var(--mp-faint); }
.world-count.full { color: #ffcdb8 !important; }
.field-label { display: block; margin: 0 2px 6px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-faint); }
.namebox { display: flex; gap: 8px; align-items: stretch; }
.name-field { flex: 1 1 auto; min-width: 0; font: 700 17px/1.2 var(--mp-font); color: var(--mp-fg); background: var(--mp-bg); border: 1px solid var(--mp-line); border-radius: 10px; padding: 11px 12px; }
.name-field:focus { outline: none; border-color: var(--mp-accent); }
.name-field:disabled { opacity: .6; }
output.name-field { display: block; }
button.dice { flex: none; padding: 0 13px; font-size: 20px; line-height: 1; border-radius: 10px; }
.card.world .row { margin-top: 12px; }
.card.world .hint { margin: 10px 2px 0; }
.world-pill { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(13, 15, 21, .72); border: 1px solid var(--mp-line); color: var(--mp-fg); font-size: 13px; font-weight: 650; pointer-events: none; backdrop-filter: blur(4px); }
.world-pill[hidden], .world-toast[hidden] { display: none; }
.world-toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: rgba(13, 15, 21, .86); border: 1px solid var(--mp-line); color: var(--mp-fg); font-weight: 650; font-size: 14px; pointer-events: none; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--mp-line); border-top-color: var(--mp-accent); animation: mp-spin .8s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Narrow screens: the standings become a strip above the game; the waiting room is centred. */
@media (max-width: 760px) {
  #party { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #party[data-rail="off"] { grid-template-rows: minmax(0, 1fr); }
  #rail { order: -1; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; border-left: 0; border-bottom: 1px solid var(--mp-line); overflow-x: auto; overflow-y: hidden; }
  #rail header, #status { display: none; }
  #racers { display: flex; gap: 6px; }
  #racers li { grid-template-columns: auto auto auto; white-space: nowrap; padding: 5px 8px; flex: 0 0 auto; }
  #racers .name { max-width: 11ch; }
  #racers .bar { display: none; }
  #controls, #room-controls { margin: 0; flex-wrap: nowrap; border: 0; padding: 0; }
  #controls button, #room-controls button { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
  .card.lobby { place-items: center; padding: 12px; }
  #party[data-backdrop="1"] .card.lobby { background: rgba(8, 10, 16, .55); }
  /* a world on a phone: the card sits low, so the world shows above it */
  #party[data-mode="world"] .card.lobby { place-items: end center; background: linear-gradient(180deg, rgba(8, 10, 16, 0) 0%, rgba(8, 10, 16, .35) 35%, rgba(8, 10, 16, .82) 100%); padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
}
/* Small frames (a post's 480 x 480 card, a phone held sideways): everything tighter */
@media (max-height: 600px), (max-width: 520px) {
  .card { padding: 8px; }
  .card .panel { padding: 14px 14px 12px; }
  .card h2.title { font-size: 21px; margin-bottom: 8px; }
  .codebox .code { font-size: 26px; }
  .share { padding: 9px; gap: 6px; }
  .card .hint, .card .tip, .card.lobby .muted { display: none; }
  ul.players li, ol.standings li { padding: 5px 9px; }
  .card .row { margin-top: 10px; }
  button.big { padding: 11px 14px; font-size: 16px; }
  .card .tagline { font-size: 13px; margin-bottom: 8px; }
  .world-count { margin-bottom: 10px !important; padding: 7px 10px; font-size: 13px; }
  .name-field { font-size: 16px; padding: 9px 10px; }
  .card.world .field-label { display: none; }
  .card.world .hint { display: block; font-size: 12px; margin-top: 8px; }
}
/* A post's 480 x 480 card: just the world, the count, the name and Enter */
@media (max-height: 520px) {
  #party[data-mode="world"] .card.lobby { place-items: center; background: rgba(8, 10, 16, .5); }
  .card.world .panel { padding: 12px 14px 12px; }
  .card.world .eyebrow { display: none; }
  .card.world h2.title { font-size: 19px; margin: 0 0 4px; }
  .card.world .tagline { display: none; }
  .card.world .hint { display: none; }
}
/* Kit 1.6.0, watch then play: the LIVE badge everyone in a streamed room sees, the streamer's share sheet, and a
   viewer's bar (research/watch/PLAN.md). Kit 1.6.2: top left under the game's menu button (top centre covered a round's
   clock, play-test 1). */
.live-badge { position: absolute; top: 58px; left: 10px; z-index: 7; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: rgba(13, 15, 21, .8); border: 1px solid rgba(255, 77, 94, .55); color: var(--mp-fg); font: 650 13px var(--mp-font); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(4px); cursor: pointer; }
.live-badge[data-state="other"] { cursor: default; }
.live-badge[hidden], .live-share[hidden], .watch-bar[hidden] { display: none; }
.live-badge b, .watch-bar .live-tag b { color: #ff4d5e; letter-spacing: .08em; font-weight: 850; }
.rec { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; flex: 0 0 auto; animation: mp-rec 1.4s ease-in-out infinite; }
@keyframes mp-rec { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec { animation: none; } }
.rec.off { background: #8a8f9c; animation: none; }
.live-share { position: absolute; top: 96px; left: 10px; z-index: 8; width: min(380px, calc(100% - 20px)); max-height: calc(100% - 106px); overflow-y: auto; padding: 12px 14px 14px; border-radius: calc(var(--mp-radius) + 4px);
  background: var(--mp-panel); border: 1px solid var(--mp-line); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); color: var(--mp-fg); }
.live-share .live-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.live-share .x { padding: 2px 10px; font-size: 18px; line-height: 1; }
.live-share p { margin: 6px 0 10px; color: var(--mp-muted); font-size: 13px; }
.live-share p.err { color: #ffb3bf; }
.live-share .link { display: flex; gap: 6px; }
.live-share .link input { flex: 1 1 auto; min-width: 0; font: 12px var(--mp-font); color: var(--mp-muted); background: var(--mp-bg); border: 1px solid var(--mp-line); border-radius: 9px; padding: 8px 10px; }
.live-share .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.live-share .mic { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mp-line); }
.live-share .mic button { width: 100%; }
.live-share .mic button.on { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.live-share .mic p { margin: 6px 0 0; }
.live-share a.button { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 14px; border-radius: var(--mp-radius); font-weight: 700; background: var(--mp-accent); color: var(--mp-accent-fg); border: 1px solid var(--mp-accent); }
/* one row where it fits; on a narrow screen the buttons (kit 1.6.3: Join, Start a room, Play solo) take a row of their own under the line */
.watch-bar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
  max-width: calc(100% - 24px); padding: 7px; border-radius: 23px; background: rgba(13, 15, 21, .82); border: 1px solid var(--mp-line); color: var(--mp-fg); font: 650 14px var(--mp-font);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4); backdrop-filter: blur(4px); }
.watch-bar .live-tag { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.watch-bar > :first-child { margin-left: 6px; }
.watch-bar .watch-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-bar[data-waiting="true"] .watch-line { white-space: normal; overflow-wrap: anywhere; }
.watch-bar .watch-acts { display: flex; flex: 1 0 auto; gap: 6px; margin-left: 0; }
.watch-bar button { flex: 1 0 auto; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }
.watch-bar button:not(.primary) { background: rgba(255, 255, 255, .08); }
.watch-bar button:not(.primary):not(:disabled):hover { background: rgba(255, 255, 255, .16); }
/* a viewer asked to join: the world card over the live stream, which keeps playing behind it */
#party[data-world="watch"] .card.lobby { background: rgba(8, 10, 16, .45); }
@media (max-height: 520px), (max-width: 520px) {
  .live-badge { font-size: 12px; padding: 4px 10px 4px 8px; }
  /* left of the game's full-screen button (bottom right) */
  .watch-bar { font-size: 13px; gap: 6px 8px; left: 10px; transform: none; max-width: calc(100% - 74px); }
  .watch-bar button { padding: 7px 12px; }
  .live-share { top: 90px; }
}
/* kit 1.6.5: the streamer link (keep the same link next time), and the note on a page opened from it */
.live-share .keep { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--mp-line); }
.live-share .keep p { margin: 0 0 8px; font-size: 12px; }
.live-saved { position: absolute; top: 10px; left: 10px; z-index: 8; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); padding: 5px 6px 5px 12px;
  border-radius: 999px; background: rgba(13, 15, 21, .85); border: 1px solid var(--mp-line); color: var(--mp-fg); font: 600 13px var(--mp-font); backdrop-filter: blur(4px); }
.live-saved[hidden] { display: none; }
.live-saved span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-saved .x { padding: 2px 9px; font-size: 16px; line-height: 1; }
/* kit 1.6.6: a locked waiting room */
.players li.empty.locked .name { color: var(--mp-fg); }
.players li.empty.locked .dot { background: #8a8f9c; border-color: #8a8f9c; }
/* kit 1.7.0: the streamer's voice. A viewer's sound button leads the bar's buttons; on, it reads as on. */
.watch-bar button.sound { flex: 0 0 auto; }
.watch-bar button.sound.on { background: #2b7a4b; border-color: #3ddc84; color: #fff; }

/* the host's Remove beside a player (kit 1.7.2): a first press asks, a second removes */
.players li .kick { margin-left: auto; min-height: 32px; padding: 4px 10px; font-size: 12px; }
.players li .kick.asking { color: #fff; background: #c2413b; border-color: #c2413b; }
/* Kit 1.7.3, phones (the creator, 2026-10-12, on the forge zombie game: "Review mobile, especially around the pre-game
   lobby. Looks like some of the buttons run off the screen"). Everything a finger presses is at least 44 px each way
   and on the screen at every phone size, upright and held sideways (568 x 320 up). The waiting room is two parts: the
   room's facts (code, invite, players), which scroll inside the card when the screen is short, and its actions (Start
   or the waiting line, then Play alone, Lock, Go live, Close), which always show: under the facts, or beside them on a
   phone held sideways. The secondary actions are buttons, not underlined words. The stream panel holds to the screen
   and, held sideways, puts the mic and Post / Stop beside the link. (A viewer's bar and the race rail are as before.) */
.card button, .live-share button, .live-saved button { min-height: 44px; }
.card button.quiet, .card a.quiet, .live-share button.quiet, .live-saved button.quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mp-line); border-radius: 9px;
  background: transparent; color: var(--mp-muted); font: inherit; font-size: 14px; font-weight: 650; text-decoration: none; text-align: center; line-height: 1.2; }
.card button.quiet:hover, .card a.quiet:hover, .live-share button.quiet:hover { color: var(--mp-fg); border-color: var(--mp-muted); }
.live-share button.quiet.x, .live-saved button.quiet.x { min-width: 44px; padding: 0 10px; border-color: transparent; }
.card .link input, .live-share .link input { min-height: 44px; }
ul.players, ol.standings { grid-template-columns: minmax(0, 1fr); }
ul.players li { min-height: 48px; }
.players li .kick { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 13px; flex: none; }
.name-edit { min-height: 44px; margin: -8px 0 -8px -6px; }
.card.lobby .panel[data-view="lobby"] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lobby-main { flex: 0 1 auto; min-height: 0; min-width: 0; overflow: hidden auto; overscroll-behavior: contain; padding: 20px 22px 4px; }
.card .codebox { flex-wrap: wrap; }
.card .link { flex-wrap: wrap; }
.card .link input { flex: 1 1 150px; }
.card .link button { flex: 1 0 auto; }
.lobby-acts { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 22px 18px; }
.lobby-acts .row { margin-top: 0; }
.lobby-acts .row.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 0; }
.lobby-acts .row.foot > * { width: 100%; }
.lobby-acts .waiting { min-height: 44px; }
.row.foot .live, #mp-alone { color: var(--mp-fg); }
/* the LIVE badge: a 44 px target round the pill it draws (its transparent border is part of the button) */
.live-badge { top: 52px; left: 4px; min-height: 44px; border: 6px solid transparent; background-clip: padding-box; background-color: rgba(13, 15, 21, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .55); backdrop-filter: none; max-width: calc(100% - 12px); }
/* the stream panel: never past the screen; its × and every button a thumb's size */
.live-share { max-height: calc(100% - 106px); overflow: auto; overscroll-behavior: contain; }
.live-share .x { min-width: 44px; min-height: 44px; padding: 0 10px; }
.live-share a.button { min-height: 44px; justify-content: center; }
.live-share .row > * { flex: 1 1 auto; }
.live-saved .x { min-width: 44px; min-height: 44px; }
@media (max-height: 600px), (max-width: 520px) {
  .lobby-main { padding: 14px 14px 2px; }
  .lobby-acts { padding: 10px 14px 12px; gap: 6px; }
  .lobby-acts .row.foot { gap: 6px; }
}
/* kit 1.7.4: voice chat in the waiting room. Under Studio's page a full-width button (Join voice chat, then In voice · mic
   on); on the game's own link a line that opens Studio's page in this room. Both at least 44 px. */
.voice-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; font-size: 16px; font-weight: 750;
  color: var(--mp-fg); background: color-mix(in srgb, #3ddc84 16%, var(--mp-button)); border: 1.5px solid #3ddc84; border-radius: 12px; }
.voice-cta.on { background: #1f9d55; border-color: #1f9d55; color: #fff; }
/* kit 1.14.0: listening is the default; the control is Talk, and beside it this listener's speaker (voices on / off) */
.voice-row { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.voice-row .voice-cta { flex: 1 1 auto; width: auto; }
.voice-cta.on.held { background: color-mix(in srgb, #e0a030 30%, var(--mp-button)); border-color: #e0a030; color: var(--mp-fg); }
.voice-sound { flex: none; min-width: 48px; min-height: 48px; padding: 0 10px; font-size: 20px; line-height: 1; border-radius: 12px;
  background: var(--mp-button); color: var(--mp-fg); border: 1.5px solid var(--mp-line); }
.voice-sound.off { opacity: .75; border-style: dashed; }
.card.results.own .voice-row { width: auto; }
/* the browser holds sound back until a tap: one small button over the stage (party.js hearNote) */
.hear-tap { position: absolute; z-index: 30; top: 10px; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 8px 16px;
  font-size: 15px; font-weight: 700; border-radius: 999px; border: 1.5px solid #3ddc84; background: rgba(12, 16, 22, .88); color: #fff; }
.voice-hint { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--mp-line);
  color: var(--mp-muted); font-size: 13px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.voice-hint:hover { color: var(--mp-fg); border-color: var(--mp-muted); }
/* kit 1.13.0: the voice window was refused (party.js voiceBlockedNote): one line over the game, with its link and × */
.world-toast.voice-blocked { pointer-events: auto; top: 10px; max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center; text-align: center; font-weight: 600; }
.voice-blocked a { color: inherit; text-decoration: underline; }
.voice-blocked .x { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--mp-muted); font-size: 18px; }
/* a phone held sideways (and any short, wide frame): the room's facts on the left, its actions on the right */
@media (max-height: 540px) and (min-width: 560px) {
  .card.lobby .panel[data-view="lobby"] { flex-direction: row; width: min(800px, 100%); }
  .card.lobby .panel[data-view="lobby"] .lobby-main { flex: 1 1 56%; padding: 12px 10px 10px 16px; }
  .card.lobby .panel[data-view="lobby"] .lobby-acts { flex: 1 1 44%; justify-content: center; padding: 12px 16px 12px 10px; overflow: auto; }
  .card.lobby .panel[data-view="lobby"] .lobby-acts .row.foot { grid-template-columns: 1fr 1fr; }
  .card.lobby .panel[data-view="lobby"] .lobby-acts .row.foot > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .live-share { top: 8px; left: auto; right: 8px; width: min(640px, calc(100% - 16px)); max-height: calc(100% - 16px); padding: 10px 14px 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-content: start; }
  .live-share > * { grid-column: 1; }
  .live-share > .live-head { grid-column: 1 / -1; }
  .live-share > .mic { grid-column: 2; grid-row: 2 / span 2; margin-top: 6px; padding-top: 0; border-top: 0; }
  .live-share > .row { grid-column: 2; align-self: end; }
  /* kit 1.21.0: Poll your viewers sits under the mic, so the panel stays one screen high */
  .live-share > .mic:has(~ .poll-ctl) { grid-row: 2; margin-top: 2px; }
  .live-share > .poll-ctl { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; padding-top: 0; border-top: 0; }
  .live-share p { margin: 4px 0 8px; }
  .live-share .keep { margin-top: 8px; }
}
/* Kit 1.21.0, the audience poll (party.js "the audience poll"). A viewer's card: right of the stream on a wide screen,
   just above the watch bar on a phone held upright (party.js pollPlace), top right on a phone held sideways. Its type
   grows with the screen (15 px on a phone, up to 38 px on a 4K screen), every choice is a button at least 48 px tall,
   and the card can shrink to its header (–). The streamer's bars sit in the stream panel; a pill under LIVE between. */
.poll-card { position: absolute; z-index: 9; right: 16px; top: 50%; transform: translateY(-50%); width: clamp(290px, 30vw, 1100px); max-height: calc(100% - 120px); overflow: auto;
  padding: .7em .8em .8em; border-radius: calc(var(--mp-radius) + 6px); background: rgba(16, 19, 28, .94); border: 1px solid var(--mp-line); color: var(--mp-fg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(6px); font: 600 clamp(15px, calc(.55vw + .55vh + 6px), 38px)/1.3 var(--mp-font); }
.poll-card[hidden] { display: none; }
.poll-card header { display: flex; align-items: center; gap: .5em; min-height: 2em; }
.poll-card .tag { flex: none; padding: .1em .5em; border-radius: 999px; background: var(--mp-accent); color: var(--mp-accent-fg); font-size: .75em; letter-spacing: .08em; font-weight: 850; }
.poll-card .hq { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-card .left { margin-left: auto; flex: none; color: var(--mp-muted); font-variant-numeric: tabular-nums; }
.poll-card .min { flex: none; min-width: 44px; min-height: 44px; padding: 0 .4em; border: 0; background: transparent; color: var(--mp-muted); font-size: 1.2em; line-height: 1; }
.poll-card .q { margin: .25em 0 .55em; font-size: 1.22em; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.poll-card .opts { display: grid; gap: .45em; }
.poll-card .opt { position: relative; display: flex; align-items: center; gap: .5em; width: 100%; min-height: max(48px, 2.6em); padding: .45em .75em; overflow: hidden; text-align: left;
  font: inherit; font-weight: 700; color: var(--mp-fg); background: var(--mp-row); border: 2px solid var(--mp-line); border-radius: .6em; }
.poll-card .opt:disabled { opacity: 1; cursor: default; }
.poll-card .opt:not(:disabled):hover { border-color: var(--mp-muted); }
.poll-card .opt .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(79, 124, 255, .32); transition: width .35s ease-out; pointer-events: none; }
.poll-card .opt > span { position: relative; }
.poll-card .opt .lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.poll-card .opt .you { flex: none; color: var(--mp-ok); font-size: .8em; }
.poll-card .opt .pct { flex: none; color: var(--mp-muted); font-variant-numeric: tabular-nums; font-size: .9em; }
.poll-card .opt.mine { border-color: var(--mp-ok); }
.poll-card .opt.mine .fill { background: rgba(61, 220, 132, .3); }
.poll-card[data-state="final"] .opt.win { border-color: var(--mp-code); }
.poll-card[data-state="final"] .opt.win .fill { background: rgba(255, 209, 102, .35); }
.poll-card[data-state="final"] .opt.win .lbl::after { content: "  \2605"; color: var(--mp-code); }
.poll-card .note { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .55em 0 0; color: var(--mp-muted); font-size: .85em; }
.poll-card .note button { min-height: 44px; font-size: 1em; }
.poll-card.min .q, .poll-card.min .opts, .poll-card.min .note { display: none; }
.poll-card.min .hq { display: block; }
.poll-card.min header { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .poll-card .opt .fill { transition: none; } }
@media (max-width: 640px) and (min-height: 521px) {
  .poll-card { top: auto; bottom: 96px; left: 10px; right: 10px; width: auto; transform: none; max-height: 60%; }
}
@media (max-height: 520px) {
  .poll-card { top: 10px; right: 10px; transform: none; width: min(46vw, 420px); max-height: calc(100% - 90px); }
}
.poll-pill { position: absolute; top: 96px; left: 10px; z-index: 7; min-height: 36px; padding: 5px 12px; border-radius: 999px; background: rgba(13, 15, 21, .85);
  border: 1px solid var(--mp-accent); color: var(--mp-fg); font: 650 13px var(--mp-font); white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.poll-pill[hidden] { display: none; }
@media (max-height: 520px), (max-width: 520px) { .poll-pill { top: 90px; font-size: 12px; } }
.live-share .poll-ctl { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mp-line); display: grid; gap: 8px; }
.live-share .poll-ctl .row { margin-top: 0; }
.live-share .live-head .poll-open { margin-left: auto; text-decoration: none; color: var(--mp-fg); border: 1px solid var(--mp-line); border-radius: 999px; padding: 4px 12px; }
.live-share .poll-ctl .poll-title { font-size: 14px; }
.live-share .poll-ctl .poll-q { margin: 0; color: var(--mp-fg); font-weight: 700; overflow-wrap: anywhere; }
.live-share .poll-ctl input[type="text"], .live-share .poll-ctl select { width: 100%; min-height: 44px; font: 14px var(--mp-font); color: var(--mp-fg); background: var(--mp-bg);
  border: 1px solid var(--mp-line); border-radius: 9px; padding: 7px 10px; }
.live-share .poll-ctl .poll-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.live-share .poll-ctl .poll-how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.live-share .poll-ctl .poll-how select { width: auto; flex: 0 0 auto; }
.live-share .poll-ctl .poll-change { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mp-muted); font-size: 13px; }
.live-share .poll-ctl .poll-change input { width: 20px; height: 20px; }
.live-share .poll-ctl .poll-rows { display: grid; gap: 5px; }
.live-share .poll-ctl .opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 9px; overflow: hidden; border-radius: 8px; background: var(--mp-row); font-weight: 650; font-size: 14px; }
.live-share .poll-ctl .opt .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(79, 124, 255, .3); transition: width .35s ease-out; }
.live-share .poll-ctl .opt.lead .fill { background: rgba(255, 209, 102, .32); }
.live-share .poll-ctl .opt > span { position: relative; }
.live-share .poll-ctl .opt .lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.live-share .poll-ctl .opt .pct { flex: none; color: var(--mp-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.live-share .poll-ctl .poll-meta { margin: 0; }

/* Kit 1.22.0. The bottom bubble: on a touch screen an app may draw over the bottom of the
   page (the X app's site bubble over a post's card, about 60-72 px), so every button here keeps clear of the bottom
   --gf-bubble px: the cards, the watch bar, the stream panel, the poll card, the rail and the game's own results bar.
   vendor/gf.js (Host / Join, joining) reads the same length. */
:root { --gf-bubble: 0px; }
@media (pointer: coarse) { :root { --gf-bubble: 72px; } }
#party .card { padding-bottom: calc(16px + var(--gf-bubble)); }
#party[data-mode="world"] .card.lobby { padding-bottom: calc(16px + var(--gf-bubble)); }
#party .card.results.own { bottom: var(--gf-bubble); padding-bottom: 0; }
.watch-bar { bottom: max(12px, env(safe-area-inset-bottom), calc(8px + var(--gf-bubble))); }
.live-share { max-height: calc(100% - 106px - var(--gf-bubble)); }
#rail { padding-bottom: calc(12px + var(--gf-bubble)); }
@media (max-width: 760px) {
  #party[data-mode="world"] .card.lobby { padding-bottom: max(12px, env(safe-area-inset-bottom), calc(12px + var(--gf-bubble))); }
  #rail { padding-bottom: 6px; }
}
@media (max-height: 600px), (max-width: 520px) { #party .card { padding-bottom: calc(8px + var(--gf-bubble)); } }
@media (max-width: 640px) and (min-height: 521px) { .poll-card { bottom: calc(96px + var(--gf-bubble)); } }
@media (max-height: 520px) { .poll-card { max-height: calc(100% - 90px - var(--gf-bubble)); } }
@media (max-height: 540px) and (min-width: 560px) { .live-share { max-height: calc(100% - 16px - var(--gf-bubble)); } }
/* a touch screen held sideways, its bottom kept clear: the stream panel in one screen without scrolling (its lead line
   goes, the title says it; Copy link stays on one line) */
@media (max-height: 540px) and (min-width: 560px) and (pointer: coarse) {
  .live-share > p:not(.err) { display: none; }
  .live-share .link button { white-space: nowrap; flex: 0 0 auto; }
  /* without a poll open: the mic beside the link, Post on X and Stop beside the streamer link (no row of their own) */
  .live-share:not(:has(> .poll-ctl)) > .mic { grid-row: 2; }
  .live-share:not(:has(> .poll-ctl)) > .row { grid-row: 3; }
}

/* Kit 1.22.1. A lobby card's LIVE pill: in the card's flow, never over the card's rows. */
.live-slot:empty { display: none; }
.live-badge.in-card { position: static; display: flex; width: fit-content; max-width: 100%; margin: 0 0 10px; top: auto; left: auto; }
/* the watch bar's buttons a thumb's size (1.22.1: measure 25 now measures a stream's first screen) */
.watch-bar button { min-height: 44px; }

/* Kit 1.24.0. The one player button (signin.js, player.css) sits at the top right of every screen: each lobby screen keeps
   the top --gf-top px clear for it (player.css sets it on html.gf-player-on; vendor/gf.js's Host / Join panel reads the
   same length), and the standings rail starts under it. */
html.gf-player-on #party .card { padding-top: calc(16px + var(--gf-top, 0px)); }
@media (max-height: 600px), (max-width: 520px) { html.gf-player-on #party .card { padding-top: calc(8px + var(--gf-top, 0px)); } }
@media (max-height: 520px) and (min-width: 560px) { html.gf-player-on #party .card { padding-right: calc(8px + var(--gf-right, 0px)); } }
html.gf-player-on #rail { padding-top: max(12px, var(--gf-top, 0px)); }
/* the strip of standings over the game on a narrow screen: the button at its right end, its scrolling row left of it */
@media (max-width: 760px) { html.gf-player-on #rail { padding-top: 6px; margin-right: calc(16px + var(--gf-player-w, 96px)); min-height: calc(var(--gf-player-h, 44px) + 16px); } }

/* gf-multiplayer 1.26.0: a card's header row: the eyebrow, and the account control (signin.js docks the one player
   button in .acct), right-aligned within the card on the eyebrow's line, part of the card */
.card .eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 20px; }
.card .eyebrow-row .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .eyebrow-row .acct, .watch-bar .acct { display: inline-flex; align-items: center; flex: none; margin-left: auto; min-width: 0; }
.card .eyebrow-row .acct:empty, .watch-bar .acct:empty { display: none; }
.card.results.own .eyebrow-row { flex: 1 1 130px; }
@media (max-height: 520px) { .card.world .eyebrow-row .eyebrow { display: none; } }
/* the plain friends page's way to a giveaway that is on now (giveaway.js find), in Host / Join's top slot */
#mp-giveaway-on { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; min-height: 44px; border-radius: 12px; text-decoration: none;
  background: color-mix(in srgb, var(--mp-code, #ffd166) 14%, var(--mp-panel, #1b1e27)); color: var(--mp-fg, #eef0f6); font: 650 14px/1.3 var(--mp-font, system-ui, sans-serif); }
#mp-giveaway-on b { color: var(--mp-code, #ffd166); }
#mp-giveaway-on span { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
/* a show room's waiting room (live.show): the game's own lobby panel (your look), and each player's face */
.card .look-slot { margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: var(--mp-row, #232735); border: 1px solid var(--mp-line, #333a4d);
  --gw-raised: var(--mp-panel, #1b1e27); --gw-you: var(--mp-code, #ffd166); --gw-fg: var(--mp-fg, #eef0f6); --gw-dim: var(--mp-muted, #b8bfd2); }
.card .look-slot h2 { font-size: 16px; }
.card .look-slot .gw-small { color: var(--mp-muted, #b8bfd2); font-size: 13px; }
.card ul.players li .face { display: inline-grid; place-items: center; width: 22px; height: 30px; flex: none; }
.watch-bar .acct .pl-btn.pl-docked { background: transparent; border: 0; box-shadow: none; }
.watch-bar .acct .pl-btn.pl-docked.in { background: color-mix(in srgb, var(--mp-row, #232735) 85%, transparent); }
/* gf-multiplayer 1.29.0: the friends page's home. The game's title, one line, and three big buttons (Run a giveaway,
   Play solo, Host a room), "Have a code? Join a friend" under them; the account chip in the header row. One column on a
   phone (each button about 80 px tall), a wider column with larger type on a computer; it scrolls if a screen is short. */
#gf-p2p[hidden] { display: none !important; }
.home { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: auto; overscroll-behavior: contain; background: rgba(8, 10, 16, .72); }
.home[hidden] { display: none; }
.home-panel { width: min(560px, 100%); display: grid; gap: 14px; padding: clamp(18px, 3vw, 34px); border-radius: calc(var(--mp-radius, 14px) + 6px);
  background: var(--mp-panel); border: 1px solid var(--mp-line); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); font-size: clamp(15px, min(1.15vw, 1.9vh), 30px); }
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.home-title { margin: 0; min-width: 0; font: 850 clamp(26px, 2.4em, 64px)/1.08 var(--mp-font); letter-spacing: -.01em; color: var(--mp-fg); overflow-wrap: anywhere; }
.home-line { margin: 0; color: var(--mp-muted); font-size: 1.02em; }
.home-acts { display: grid; gap: 12px; margin-top: 6px; }
.home-btn { display: grid; gap: 3px; align-content: center; justify-items: start; width: 100%; min-height: max(76px, 4.6em); padding: .8em 1.15em; text-align: left;
  border-radius: calc(var(--mp-radius, 14px) + 2px); border: 1px solid var(--mp-line); background: var(--mp-row, rgba(255, 255, 255, .06)); color: var(--mp-fg); cursor: pointer; font: inherit; }
.home-btn b { font-size: 1.32em; font-weight: 800; line-height: 1.15; }
.home-btn span { color: var(--mp-muted); font-size: .92em; line-height: 1.3; }
.home-btn.primary { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-fg, #fff); box-shadow: 0 .25em 0 rgba(0, 0, 0, .3); }
.home-btn.primary span { color: inherit; opacity: .85; }
.home-btn:hover { filter: brightness(1.08); }
.home-btn:focus-visible, .home-join:focus-visible { outline: 3px solid var(--mp-code, #ffd166); outline-offset: 3px; }
.home-join { justify-self: center; min-height: 44px; padding: 8px 14px; background: none; border: 0; color: var(--mp-muted); font: 600 1em var(--mp-font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.home-back { min-height: 44px; padding: 6px 14px; margin: 0 0 8px; border-radius: 999px; border: 1px solid var(--mp-line); background: transparent; color: var(--mp-muted); font: 600 14px var(--mp-font); cursor: pointer; }
/* 1.36.0: an NFT-only event's banner on the home (?event=): the NFT, the event, until when, one action */
.home-event { display: grid; gap: 12px; }
.home-event-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255, 203, 61, 0.45); background: rgba(255, 203, 61, 0.08); }
.home-event-pic { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex: none; }
.home-event-what { display: grid; gap: 3px; min-width: 0; }
.home-event-what b { font-size: 1.15em; overflow: hidden; text-overflow: ellipsis; }
.home-event-what small { opacity: .8; }
.home-event-tag { justify-self: start; padding: 2px 9px; border-radius: 999px; background: #ffcb3d; color: #241a00; font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.home-event-go { min-height: 52px; border: 0; border-radius: 14px; background: #ffcb3d; color: #241a00; font: inherit; font-weight: 800; font-size: 1.05em; cursor: pointer; box-shadow: 0 4px 0 #c68c00; }
.home-event-go:disabled { opacity: .6; cursor: default; }
.home-event-when, .home-event-done { margin: 0; text-align: center; font-weight: 700; }
/* kit 1.39.0: the room's event (a participation NFT or code for everyone in the room) */
.card .room-event { font-size: 13px; color: var(--mp-fg); background: var(--mp-row); border: 1px solid var(--mp-line); border-left: 3px solid var(--mp-accent); border-radius: 8px; padding: 8px 10px; margin: 8px 2px; }
.card .room-event[data-you="in"] { border-left-color: var(--mp-ok); }
/* kit 1.40.0: the room's event's rules, lottery and results in one box; the door's card; the host's mark of each guest */
.card .room-event-box { display: grid; gap: 6px; font-size: 13px; color: var(--mp-fg); background: var(--mp-row); border: 1px solid var(--mp-line); border-left: 3px solid var(--mp-accent); border-radius: 8px; padding: 8px 10px; margin: 8px 2px; }
.card .room-event-box[data-you="in"] { border-left-color: var(--mp-ok); }
.card .room-event-box .room-event { background: none; border: 0; padding: 0; margin: 0; font-weight: 650; }
.card .room-event-sub { margin: 0; color: var(--mp-muted); }
.card .room-event-go { justify-self: start; min-height: 44px; padding: 8px 14px; background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-fg); font-weight: 750; }
.card .room-event-go:disabled { opacity: .6; cursor: default; }
.card .room-results { display: grid; gap: 4px; padding: 8px; border-radius: 8px; background: var(--mp-bg); }
.card .room-results ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.card .room-results li.me { color: var(--mp-ok); font-weight: 750; }
.card .room-door { display: grid; gap: 6px; margin: 8px 2px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--mp-code); background: color-mix(in srgb, var(--mp-code) 12%, var(--mp-panel)); }
.card .room-door b { font-size: 15px; }
.card .room-door p { margin: 0; font-size: 13px; }
.card .room-door .room-event-go { justify-self: stretch; }
ul.players .mark { flex: none; font-size: 12px; font-weight: 700; color: var(--mp-ok); white-space: nowrap; }
ul.players .mark.no { color: #ffb3bf; }
@media (max-width: 420px) { ul.players li { flex-wrap: wrap; } ul.players .mark { order: 5; flex-basis: 100%; padding-left: 26px; } }
/* kit 1.41.0: a paid lottery's next step (anyone presses it; the host's first and bigger), and the oracle's wait */
.card .room-event-go.big { justify-self: stretch; min-height: 48px; font-size: 15px; }
.card .room-lot-wait { display: flex; align-items: center; gap: 8px; color: var(--mp-fg); }
/* kit 1.42.0: the host's Draw now and its confirm in the event's box */
.card .room-confirm { margin: 0; }
.card .room-confirm .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }