/* Mumblark (T-20261108-380): the setup card on the home page, then one full-screen stage on the night violet, read at
   arm's length on a passed phone. Yellow buttons with ink words, pale violet on night: every text pairing clears WCAG AA. */

.mb-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mb-lede { font-size: 1.15rem; max-width: 38rem; }
.mb-how { padding-left: 1.25rem; max-width: 38rem; }
.mb-how li { margin-bottom: .35rem; }

/* ── The setup ── */
.mb-setup { margin: 1.5rem 0 2.5rem; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 16px; background: var(--wp--preset--color--stage); color: var(--wp--preset--color--on-stage); max-width: 30rem; box-sizing: border-box; }
.mb-h { color: var(--wp--preset--color--on-stage); margin: 0 0 1rem; font-size: 1.5rem; }
.mb-names { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; counter-reset: mb; }
.mb-names li { display: flex; align-items: center; gap: .5rem; counter-increment: mb; }
.mb-names li::before { content: counter(mb); flex: 0 0 1.6rem; font-weight: 700; color: var(--wp--preset--color--on-stage-soft); text-align: right; }
.mb-input { flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; padding: .7rem .8rem; border-radius: 10px; border: 2px solid transparent; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); }
.mb-input:focus { outline: none; border-color: var(--wp--preset--color--pop); }
.mb-x { flex: 0 0 44px; height: 44px; border-radius: 10px; border: 2px solid var(--wp--preset--color--on-stage-soft); background: transparent; color: var(--wp--preset--color--on-stage); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mb-add { display: block; margin: 0 0 1.25rem 2.1rem; padding: .55rem .2rem; border: 0; background: none; color: var(--wp--preset--color--on-stage); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.mb-note { margin: .75rem 0 0; color: var(--wp--preset--color--on-stage-soft); font-size: .95rem; text-align: center; }

.mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 56px; padding: .6rem 1.1rem; border-radius: 14px; border: 2px solid var(--wp--preset--color--on-stage-soft); background: transparent; color: var(--wp--preset--color--on-stage); font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.mb-btn small { font-weight: 600; font-size: .9rem; opacity: .85; }
.mb-btn:disabled { opacity: .55; cursor: default; }
.mb-primary { background: var(--wp--preset--color--pop); border-color: var(--wp--preset--color--pop); color: var(--wp--preset--color--ink); }
.mb-go { width: 100%; font-size: 1.25rem; min-height: 64px; }
.mb-btn:focus-visible, .mb-rec:focus-visible, .mb-quit:focus-visible, .mb-x:focus-visible, .mb-add:focus-visible { outline: 3px solid var(--wp--preset--color--pop); outline-offset: 3px; }
.mb-primary:focus-visible { outline-color: var(--wp--preset--color--on-stage); }

/* ── The stage: the whole screen, no scroll ── */
html.mb-playing, html.mb-playing body { overflow: hidden; }
.mb-stage { position: fixed; inset: 0; z-index: 9999; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--wp--preset--color--stage); color: var(--wp--preset--color--on-stage); font-family: var(--wp--preset--font-family--body); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; overscroll-behavior: contain; touch-action: manipulation; }
.mb-stage[hidden] { display: none; }
.mb-top { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem .25rem 1rem; }
.mb-step { font-weight: 700; color: var(--wp--preset--color--on-stage-soft); font-size: 1rem; letter-spacing: .02em; }
.mb-quit { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--wp--preset--color--on-stage-soft); background: transparent; color: var(--wp--preset--color--on-stage); font-size: 1.2rem; cursor: pointer; }
.mb-quit.is-armed { background: var(--wp--preset--color--alarm); border-color: var(--wp--preset--color--on-stage); }
.mb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.6rem, 2.2vh, 1.25rem); padding: 0 clamp(1rem, 6vw, 2.5rem) 1rem; text-align: center; width: 100%; max-width: 34rem; margin: 0 auto; box-sizing: border-box; }
.mb-body .mb-big { width: 100%; min-height: 64px; font-size: 1.3rem; }
.mb-kicker { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--wp--preset--color--on-stage-soft); }
.mb-name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(2.4rem, 12vw, 3.6rem); line-height: 1.05; overflow-wrap: anywhere; color: var(--wp--preset--color--on-stage); }
.mb-line { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.7rem, 7.6vw, 2.5rem); line-height: 1.15; color: var(--wp--preset--color--on-stage); }
.mb-line.mb-small { font-size: clamp(1.15rem, 4.8vw, 1.5rem); color: var(--wp--preset--color--on-stage-soft); }
.mb-hint { margin: 0; font-size: 1.05rem; color: var(--wp--preset--color--on-stage-soft); max-width: 26rem; }
.mb-msg { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.mb-notice { margin: 0; padding: .6rem .9rem; border-radius: 10px; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); font-weight: 600; font-size: 1.05rem; }
.mb-fine { margin: 0; font-size: .9rem; color: var(--wp--preset--color--on-stage-soft); max-width: 24rem; }

/* The record button: a big red circle in a cream ring; the ring fills as the six seconds run, the core breathes with
   the voice (--p and --lvl are set by game.js while recording). */
.mb-rec { --p: 0; --lvl: 0; position: relative; width: clamp(116px, 34vw, 148px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; flex: 0 0 auto; }
.mb-rec-wait { width: clamp(116px, 34vw, 148px); aspect-ratio: 1; flex: 0 0 auto; }
.mb-rec-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--wp--preset--color--pop) calc(var(--p) * 360deg), var(--wp--preset--color--on-stage) 0); }
.mb-rec-core { position: absolute; inset: 9px; border-radius: 50%; background: var(--wp--preset--color--alarm); display: flex; align-items: center; justify-content: center; transform: scale(calc(1 + var(--lvl) * .08)); transition: transform 60ms linear; }
.mb-rec-dot { width: 30%; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; }
.mb-rec-n { position: absolute; font-family: var(--wp--preset--font-family--heading); font-size: 3.4rem; font-weight: 700; color: #FFFFFF; }
.mb-rec.is-count .mb-rec-dot { display: none; }
.mb-rec.is-on .mb-rec-dot { border-radius: 8px; width: 28%; }
.mb-rec.is-on .mb-rec-core { animation: mb-glow 1s ease-in-out infinite alternate; }
@keyframes mb-glow { to { box-shadow: 0 0 0 10px rgba(179, 38, 30, .35); } }

/* The reveal */
.mb-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.mb-chain li { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--on-stage-soft); font-size: .95rem; color: var(--wp--preset--color--on-stage-soft); }
.mb-chain li + li::before { content: none; }
.mb-chain li.is-on { background: var(--wp--preset--color--pop); border-color: var(--wp--preset--color--pop); color: var(--wp--preset--color--ink); font-weight: 700; }
.mb-pulse { animation: mb-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.mb-reveal { animation: mb-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; color: var(--wp--preset--color--pop); }
@keyframes mb-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.mb-score { display: flex; flex-direction: column; align-items: center; }
.mb-score-n { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(4rem, 22vw, 6rem); line-height: 1; color: var(--wp--preset--color--pop); animation: mb-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.mb-score-l { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.mb-actions .mb-btn { font-size: 1.02rem; padding-inline: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .mb-pulse, .mb-reveal, .mb-score-n, .mb-rec.is-on .mb-rec-core { animation: none; }
  .mb-rec-core { transition: none; }
}
@media (max-height: 600px) {
  .mb-name { font-size: clamp(2rem, 9vw, 2.6rem); }
  .mb-line { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .mb-rec, .mb-rec-wait { width: 104px; }
  .mb-body .mb-big { min-height: 56px; }
}

/* ── The waitlist ── */
.mb-wait { margin: 0; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; background: #FFFFFF; max-width: 34rem; box-sizing: border-box; }
.mb-wait h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.mb-wait p { margin: 0 0 1rem; }
.mb-wait-form label { display: block; font-weight: 700; margin-bottom: .35rem; }
.mb-wait-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.mb-wait-row input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 1.1rem; padding: .7rem .8rem; border: 2px solid var(--wp--preset--color--muted); border-radius: 10px; background: #FFFFFF; color: var(--wp--preset--color--ink); }
.mb-wait-row input:focus { outline: 3px solid var(--wp--preset--color--pop); outline-offset: 1px; }
.mb-wait-row button { flex: 0 0 auto; min-height: 52px; padding: .6rem 1.2rem; border-radius: 10px; border: 0; background: var(--wp--preset--color--stage); color: var(--wp--preset--color--on-stage); font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.mb-wait-row button:disabled { opacity: .6; }
.mb-wait .mb-wait-fine { margin: .75rem 0 0; font-size: .92rem; color: var(--wp--preset--color--muted); }
.mb-wait-msg { margin: .75rem 0 0; font-weight: 600; min-height: 1.4em; }
.mb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }