/* ==========================================================
   Quiz + Lobby Redesign — Master-Quiz DS
   Mobile-first (390 wide), game-y, animation-rich.
   ========================================================== */

.mqx {
  --mq-primary:#6366f1; --mq-primary-dark:#4f46e5; --mq-primary-light:#818cf8;
  --mq-orange:#ff9500; --mq-orange-dark:#ff7b00;
  --mq-grad-start:#667eea; --mq-grad-mid:#764ba2; --mq-grad-end:#9d50bb;
  --mq-grad-main:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --mq-grad-landing:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#9d50bb 100%);
  --mq-grad-cta:linear-gradient(135deg,#ff9500 0%,#ff7b00 100%);
  --mq-grad-red:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  --mq-grad-blue:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  --mq-grad-amber:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  --mq-grad-green:linear-gradient(135deg,#10b981 0%,#059669 100%);
  --mq-grad-pink:linear-gradient(135deg,#ec4899 0%,#db2777 100%);
  --mq-grad-purple:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);
  --mq-grad-teal:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%);
  --mq-gray-50:#f9fafb; --mq-gray-100:#f3f4f6; --mq-gray-200:#e5e7eb;
  --mq-gray-300:#d1d5db; --mq-gray-400:#9ca3af; --mq-gray-500:#6b7280;
  --mq-gray-600:#4b5563; --mq-gray-700:#374151; --mq-gray-800:#1f2937;
  --mq-gray-900:#111827;
  --mq-success:#10b981; --mq-success-light:#d1fae5; --mq-success-dark:#065f46;
  --mq-warning:#f59e0b; --mq-warning-light:#fef3c7;
  --mq-error:#ef4444; --mq-error-light:#fee2e2;
  --mq-shadow-cta:0 8px 24px rgba(255,149,0,.42);
  --mq-shadow-purple:0 10px 30px rgba(102,126,234,.4);
  --mq-shadow-green:0 12px 30px rgba(16,185,129,.4);
  --mq-shadow-card:0 4px 20px rgba(0,0,0,.08);
  --mq-font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mq-font-mono:'Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  --mq-ease:cubic-bezier(.4,0,.2,1);
  --mq-ease-out:cubic-bezier(.16,1,.3,1);
  --mq-ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   STAGE — purple gradient surface inside the phone screen
   ========================================================= */
.mqx{
  position:relative;
  width:100%; height:100%;
  font-family:var(--mq-font-sans);
  color:#1a1a2e;
  background:var(--mq-grad-landing);
  overflow:hidden;
  isolation:isolate;
  letter-spacing:-.005em;
  display:flex; flex-direction:column;
}
.mqx *{box-sizing:border-box}
.mqx::before, .mqx::after{
  content:""; position:absolute; pointer-events:none;
  border-radius:50%; filter:blur(80px); z-index:0;
}
.mqx::before{
  width:340px; height:340px;
  background:radial-gradient(closest-side, rgba(255,223,107,.35), transparent);
  top:-80px; left:-80px;
  animation:mqxFloat 9s ease-in-out infinite;
}
.mqx::after{
  width:320px; height:320px;
  background:radial-gradient(closest-side, rgba(240,147,251,.4), transparent);
  bottom:-80px; right:-80px;
  animation:mqxFloat 11s ease-in-out -3s infinite;
}
@keyframes mqxFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-12px) scale(1.06)}
}

.mqx__scroll{
  position:relative; z-index:2;
  flex:1; min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent;
  /* top padding clears the floating top-bar (14px + 36px + 12px gap) */
  padding:64px 16px 110px;
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 90px), rgba(0,0,0,.15) 100%);
          mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 90px), rgba(0,0,0,.15) 100%);
}
.mqx__scroll::-webkit-scrollbar{width:4px}
.mqx__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:2px}

/* =========================================================
   TOP BAR — minimal floating chrome (just essentials)
   ========================================================= */
.mqx-top{
  position:absolute; top:14px; left:14px; right:14px;
  z-index:5;
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.mqx-top > *{pointer-events:auto}
.mqx-top__spacer{flex:1}

.mqx-iconbtn{
  width:36px; height:36px;
  border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:50%;
  color:#fff;
  display:grid; place-items:center;
  transition:all .15s var(--mq-ease);
}
.mqx-iconbtn:hover{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.36);
}
.mqx-iconbtn svg{width:16px; height:16px}

.mqx-topbal{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px 7px 7px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:9999px;
  color:#fff;
  font-size:12.5px; font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.mqx-topbal__gem{
  width:22px; height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f97316);
  display:grid; place-items:center;
  font-size:11px;
  box-shadow:0 2px 6px rgba(251,191,36,.4);
}
.mqx-topav{
  width:36px; height:36px; border-radius:50%;
  background:var(--mq-grad-pink);
  color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:14px;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 4px 10px rgba(236,72,153,.3);
}

/* =========================================================
   TOP NAV (legacy frosted-pill) — kept for reference
   ========================================================= */
.mqx-nav{
  position:relative; z-index:5;
  margin:14px 14px 0;
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 14px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  border-radius:9999px;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.mqx-nav__logo{
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:15px; letter-spacing:-.02em;
  color:var(--mq-primary-dark);
}
.mqx-nav__logo-b{
  width:26px; height:26px; border-radius:8px;
  background:var(--mq-grad-main);
  color:#fff; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(102,126,234,.45);
}
.mqx-nav__spacer{flex:1}
.mqx-nav__bal{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 5px; border-radius:9999px;
  background:linear-gradient(135deg, #ede9fe, #ddd6fe);
  color:#5b21b6; font-weight:900; font-size:12.5px;
}
.mqx-nav__bal-gem{
  width:20px; height:20px; border-radius:6px;
  background:linear-gradient(135deg, #a78bfa, #7c3aed);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px;
}
.mqx-nav__av{
  width:32px; height:32px; border-radius:50%;
  background:var(--mq-grad-main);
  color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:13px;
  border:2px solid #fff;
}

/* Sub-nav breadcrumb (no longer used — replaced by top close button) */
.mqx-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 8px;
  border-radius:9999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
  font-size:12px; font-weight:700;
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.mqx-back svg{width:12px; height:12px}

/* =========================================================
   GENERIC CARD on purple
   ========================================================= */
.mqx-card{
  background:#fff;
  border-radius:24px;
  box-shadow:0 18px 44px -18px rgba(15,23,42,.45),
             0 4px 12px rgba(15,23,42,.08);
  padding:20px;
}
.mqx-card--tight{padding:16px}

/* =========================================================
   HERO TITLE on purple (page-level heading inside artboard)
   ========================================================= */
.mqx-hero{
  position:relative; z-index:2;
  padding:18px 4px 14px;
  color:#fff;
}
.mqx-hero__eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:9999px;
  font-size:11px; font-weight:800;
  letter-spacing:.06em;
  margin-bottom:10px;
  backdrop-filter:blur(10px);
}
.mqx-hero__title{
  margin:0 0 4px;
  font:900 30px/1.05 var(--mq-font-sans);
  letter-spacing:-.03em;
}
.mqx-hero__title em{
  font-style:normal;
  background:linear-gradient(135deg,#fbbf24 0%,#fb923c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mqx-hero__sub{
  margin:0; color:rgba(255,255,255,.78);
  font-size:13.5px; font-weight:500; line-height:1.5;
}

/* =========================================================
   CTA BUTTON
   ========================================================= */
.mqx-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  border:0; cursor:pointer;
  background:var(--mq-grad-cta);
  color:#fff;
  padding:16px 18px;
  border-radius:16px;
  font-family:inherit; font-size:16px; font-weight:900;
  letter-spacing:-.01em;
  box-shadow:var(--mq-shadow-cta);
  transition:all .15s var(--mq-ease);
  position:relative; overflow:hidden;
}
.mqx-cta:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(255,149,0,.55)}
.mqx-cta:active{transform:translateY(0)}
.mqx-cta::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 50%);
  pointer-events:none;
}
.mqx-cta svg{width:16px; height:16px}

.mqx-cta--ghost{
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  font-weight:700;
  font-size:14px;
}
.mqx-cta--ghost::after{display:none}
.mqx-cta--ghost:hover{background:rgba(255,255,255,.22); transform:translateY(-1px); box-shadow:none}

/* =========================================================
   SECTION LABEL
   ========================================================= */
.mqx-label{
  display:flex; align-items:center; gap:8px;
  margin:0 0 10px;
  font-size:13.5px; font-weight:800;
  color:var(--mq-gray-900);
  letter-spacing:-.01em;
}
.mqx-label__icon{
  width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center;
  font-size:12px;
}
.mqx-label__hint{
  margin-left:auto; font-size:11px; font-weight:700;
  color:var(--mq-gray-500);
  letter-spacing:.03em;
}
.mqx-label__beta{
  display:inline-flex; align-items:center;
  padding:1px 8px;
  background:var(--mq-grad-cta); color:#fff;
  border-radius:9999px;
  font-size:9.5px; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase;
}

/* ============================================================
   CREATE QUIZ — topic + chips
   ============================================================ */
.mqxc-topic{
  position:relative;
  display:flex; gap:10px;
}
.mqxc-topic__input{
  flex:1; min-width:0;
  padding:14px 16px;
  border:2px solid var(--mq-gray-200);
  background:#fff;
  border-radius:14px;
  font-family:inherit; font-size:15.5px; font-weight:600;
  color:var(--mq-gray-900);
  outline:0;
  transition:all .15s var(--mq-ease);
}
.mqxc-topic__input::placeholder{color:var(--mq-gray-400); font-weight:500}
.mqxc-topic__input:focus{
  border-color:var(--mq-primary);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.mqxc-topic__dice{
  flex-shrink:0;
  width:52px; height:52px;
  border:0; cursor:pointer;
  border-radius:14px;
  background:var(--mq-grad-purple);
  color:#fff;
  display:grid; place-items:center;
  font-size:22px;
  box-shadow:0 8px 20px rgba(124,58,237,.4);
  transition:all .15s var(--mq-ease);
}
.mqxc-topic__dice:hover{transform:rotate(15deg) scale(1.05)}

.mqxc-chips{
  position:relative;
  margin:12px -12px 0;
  /* fade out at the right edge to hint at scroll */
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.mqxc-chips__scroll{
  display:flex; gap:6px;
  padding:2px 28px 2px 12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.mqxc-chips__scroll::-webkit-scrollbar{display:none}
.mqxc-chip{
  flex-shrink:0;
  scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px;
  background:var(--mq-gray-50);
  border:1px solid var(--mq-gray-100);
  border-radius:9999px;
  font-size:13px; font-weight:700;
  color:var(--mq-gray-800);
  cursor:pointer;
  transition:all .15s var(--mq-ease);
  line-height:1.2;
  letter-spacing:-.005em;
}
.mqxc-chip:hover{
  background:#fff;
  border-color:var(--mq-gray-300);
}
.mqxc-chip__emoji{
  font-size:14px;
  line-height:1;
}
.mqxc-chip.on{
  background:#1f2937;
  border-color:#1f2937;
  color:#fff;
}

/* COUNT TILES */
.mqxc-count{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.mqxc-count__tile{
  position:relative;
  padding:18px 8px 14px;
  background:#fff;
  border:2px solid var(--mq-gray-100);
  border-radius:18px;
  cursor:pointer;
  text-align:center;
  transition:all .2s var(--mq-ease);
  overflow:hidden;
}
.mqxc-count__tile::before{
  content:""; position:absolute; inset:0;
  background:var(--mq-grad-purple);
  opacity:0;
  transition:opacity .2s var(--mq-ease);
  border-radius:16px;
}
.mqxc-count__tile > *{position:relative}
.mqxc-count__tile.on{border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,58,237,.4)}
.mqxc-count__tile.on::before{opacity:1}
.mqxc-count__tile-n{
  display:block;
  font-size:30px; font-weight:900;
  letter-spacing:-.03em;
  color:var(--mq-gray-900);
  line-height:1;
}
.mqxc-count__tile.on .mqxc-count__tile-n{color:#fff}
.mqxc-count__tile-m{
  display:block;
  margin-top:6px;
  font-size:11px; font-weight:700;
  color:var(--mq-gray-500);
  letter-spacing:.03em;
}
.mqxc-count__tile.on .mqxc-count__tile-m{color:rgba(255,255,255,.85)}
.mqxc-count__tile-spark{
  position:absolute; top:6px; right:8px;
  font-size:11px;
  opacity:0;
  transition:opacity .2s var(--mq-ease);
}
.mqxc-count__tile.on .mqxc-count__tile-spark{opacity:1}

/* DIFFICULTY TILES */
.mqxc-diff{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.mqxc-diff__tile{
  position:relative; padding:14px 8px;
  background:#fff;
  border:2px solid var(--mq-gray-100);
  border-radius:18px;
  cursor:pointer;
  text-align:center;
  transition:all .2s var(--mq-ease);
  overflow:hidden;
}
.mqxc-diff__tile::before{
  content:""; position:absolute; inset:0;
  opacity:0;
  transition:opacity .2s var(--mq-ease);
  border-radius:16px;
}
.mqxc-diff__tile > *{position:relative}
.mqxc-diff__tile[data-d="easy"]::before{background:var(--mq-grad-green)}
.mqxc-diff__tile[data-d="med"]::before{background:var(--mq-grad-amber)}
.mqxc-diff__tile[data-d="hard"]::before{background:var(--mq-grad-red)}
.mqxc-diff__tile.on{border-color:transparent; color:#fff; transform:translateY(-2px)}
.mqxc-diff__tile.on::before{opacity:1}
.mqxc-diff__tile[data-d="easy"].on{box-shadow:var(--mq-shadow-green)}
.mqxc-diff__tile[data-d="med"].on{box-shadow:0 12px 30px rgba(245,158,11,.4)}
.mqxc-diff__tile[data-d="hard"].on{box-shadow:0 12px 30px rgba(239,68,68,.4)}
.mqxc-diff__tile-em{font-size:30px; line-height:1; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))}
.mqxc-diff__tile-l{
  display:block; margin-top:8px;
  font-size:13px; font-weight:800;
  color:var(--mq-gray-900);
  letter-spacing:-.005em;
}
.mqxc-diff__tile.on .mqxc-diff__tile-l{color:#fff}
.mqxc-diff__tile-h{
  display:block;
  font-size:10.5px; font-weight:700;
  color:var(--mq-gray-500);
  margin-top:2px;
}
.mqxc-diff__tile.on .mqxc-diff__tile-h{color:rgba(255,255,255,.85)}

/* PHOTO TOGGLE */
.mqxc-photo{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:#fff;
  border:2px solid var(--mq-gray-100);
  border-radius:18px;
  cursor:pointer;
  transition:all .2s var(--mq-ease);
}
.mqxc-photo.on{
  background:linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color:#fdba74;
}
.mqxc-photo__icon{
  width:46px; height:46px;
  flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(135deg, #fed7aa, #fdba74);
  display:grid; place-items:center;
  font-size:22px;
  transition:all .2s var(--mq-ease);
}
.mqxc-photo.on .mqxc-photo__icon{
  background:var(--mq-grad-cta);
  box-shadow:0 6px 14px rgba(255,149,0,.4);
}
.mqxc-photo__txt{flex:1; min-width:0}
.mqxc-photo__t{
  display:flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:800;
  color:var(--mq-gray-900);
}
.mqxc-photo__s{
  font-size:12px; color:var(--mq-gray-500);
  font-weight:500; margin-top:2px;
  line-height:1.4;
}
.mqxc-photo__sw{
  flex-shrink:0;
  width:42px; height:26px;
  background:var(--mq-gray-200);
  border-radius:9999px;
  position:relative;
  transition:background .2s var(--mq-ease);
}
.mqxc-photo__sw::after{
  content:""; position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .25s var(--mq-ease-out);
}
.mqxc-photo.on .mqxc-photo__sw{background:var(--mq-orange)}
.mqxc-photo.on .mqxc-photo__sw::after{transform:translateX(16px)}

/* NAME FIELD */
.mqxc-name{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 10px;
  background:#fff;
  border:2px solid var(--mq-gray-100);
  border-radius:18px;
  transition:border-color .15s var(--mq-ease);
}
.mqxc-name:focus-within{
  border-color:var(--mq-primary);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.mqxc-name__av{
  width:38px; height:38px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--mq-grad-pink);
  color:#fff;
  display:grid; place-items:center;
  font-size:16px; font-weight:900;
  box-shadow:0 4px 10px rgba(236,72,153,.4);
}
.mqxc-name__input{
  flex:1; min-width:0;
  border:0; background:transparent; outline:0;
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--mq-gray-900);
  padding:8px 0;
}
.mqxc-name__edit{
  flex-shrink:0;
  width:32px; height:32px;
  border:0; background:var(--mq-gray-100);
  border-radius:10px;
  cursor:pointer;
  display:grid; place-items:center;
  color:var(--mq-gray-500);
}
.mqxc-name__edit svg{width:14px; height:14px}

/* COST LINE */
.mqxc-cost{
  display:flex; align-items:center; gap:8px;
  margin-top:10px;
  padding:0 4px;
  font-size:11.5px;
  color:rgba(255,255,255,.75);
  font-weight:600;
}
.mqxc-cost b{
  color:#fff; font-weight:900;
  display:inline-flex; align-items:center; gap:4px;
}
.mqxc-cost b::before{
  content:"💎"; font-size:11px;
}

/* ============================================================
   LOADING SCREEN — generation progress
   ============================================================ */
.mqxl{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 24px;
  text-align:center;
  color:#fff;
  position:relative; z-index:2;
}

/* Spinning orb with emoji core */
.mqxl-orb{
  position:relative;
  width:180px; height:180px;
  margin-bottom:28px;
}
.mqxl-orb__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:#fbbf24;
  border-right-color:rgba(251,191,36,.4);
  animation:mqxlSpin 2.2s linear infinite;
}
.mqxl-orb__ring2{
  position:absolute; inset:14px;
  border-radius:50%;
  border:2px solid transparent;
  border-bottom-color:#fff;
  border-left-color:rgba(255,255,255,.5);
  animation:mqxlSpin 1.4s linear -.5s infinite reverse;
}
.mqxl-orb__core{
  position:absolute; inset:30px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  font-size:54px;
  box-shadow:0 0 60px rgba(251,191,36,.3),
             inset 0 1px 0 rgba(255,255,255,.3);
  animation:mqxlBob 3s ease-in-out infinite;
}
.mqxl-orb__sparks{
  position:absolute; inset:-12px;
  pointer-events:none;
}
.mqxl-orb__sparks span{
  position:absolute;
  font-size:18px;
  animation:mqxlOrbit 6s linear infinite;
  transform-origin:0 0;
  filter:drop-shadow(0 0 8px rgba(251,191,36,.6));
}
.mqxl-orb__sparks span:nth-child(1){top:50%;left:50%;animation-delay:0s}
.mqxl-orb__sparks span:nth-child(2){top:50%;left:50%;animation-delay:-2s}
.mqxl-orb__sparks span:nth-child(3){top:50%;left:50%;animation-delay:-4s}
@keyframes mqxlSpin{to{transform:rotate(360deg)}}
@keyframes mqxlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mqxlOrbit{
  0%{transform:rotate(0) translateX(96px) rotate(0)}
  100%{transform:rotate(360deg) translateX(96px) rotate(-360deg)}
}

.mqxl-title{
  margin:0 0 6px;
  font:900 28px/1.1 var(--mq-font-sans);
  letter-spacing:-.025em;
}
.mqxl-sub{
  margin:0; color:rgba(255,255,255,.78);
  font-size:13.5px; font-weight:500; line-height:1.5;
  max-width:280px;
}

/* progress bar */
.mqxl-pct{
  display:flex; align-items:center; gap:10px;
  margin:24px 0 6px;
  font-size:12px; font-weight:800;
  color:rgba(255,255,255,.8);
  letter-spacing:.06em;
  width:100%; max-width:300px;
}
.mqxl-pct b{
  margin-left:auto;
  font-size:24px; font-weight:900; letter-spacing:-.02em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.mqxl-bar{
  width:100%; max-width:300px;
  height:8px;
  background:rgba(255,255,255,.16);
  border-radius:9999px;
  overflow:hidden;
  position:relative;
}
.mqxl-bar__fill{
  height:100%;
  background:linear-gradient(90deg, #fbbf24, #fb923c, #fbbf24);
  background-size:200% 100%;
  border-radius:9999px;
  position:relative;
  animation:mqxlBarShimmer 2s linear infinite;
  box-shadow:0 0 12px rgba(251,191,36,.5);
  transition:width .6s var(--mq-ease);
}
@keyframes mqxlBarShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* step list */
.mqxl-steps{
  width:100%; max-width:300px;
  margin-top:24px;
  display:flex; flex-direction:column; gap:10px;
}
.mqxl-step{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  border-radius:14px;
  font-size:13.5px; font-weight:700;
  color:rgba(255,255,255,.8);
  transition:all .3s var(--mq-ease);
}
.mqxl-step__icon{
  width:28px; height:28px;
  flex-shrink:0;
  border-radius:9px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  font-size:14px;
  transition:all .3s var(--mq-ease);
}
.mqxl-step.done{
  background:rgba(16,185,129,.18);
  border-color:rgba(16,185,129,.4);
  color:#fff;
}
.mqxl-step.done .mqxl-step__icon{
  background:var(--mq-grad-green);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(16,185,129,.4);
}
.mqxl-step.active{
  background:rgba(251,191,36,.18);
  border-color:rgba(251,191,36,.5);
  color:#fff;
  transform:translateX(2px);
}
.mqxl-step.active .mqxl-step__icon{
  background:var(--mq-grad-cta);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(255,149,0,.5);
  animation:mqxlPulse 1.4s ease-in-out infinite;
}
@keyframes mqxlPulse{
  0%,100%{box-shadow:0 4px 12px rgba(255,149,0,.5), 0 0 0 0 rgba(255,149,0,.4)}
  50%{box-shadow:0 4px 12px rgba(255,149,0,.5), 0 0 0 8px rgba(255,149,0,0)}
}
.mqxl-step__lbl{flex:1; text-align:left}
.mqxl-step__sub{
  display:block; font-size:11px; font-weight:600;
  opacity:.7; margin-top:1px;
}
.mqxl-step__sp{
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:mqxlSpin .8s linear infinite;
  margin-left:auto;
}
.mqxl-step.done .mqxl-step__sp{display:none}
.mqxl-step:not(.active):not(.done) .mqxl-step__sp{display:none}

/* fun fact */
.mqxl-fact{
  margin-top:24px;
  padding:12px 16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  border-radius:14px;
  font-size:12.5px; line-height:1.45;
  color:rgba(255,255,255,.85);
  font-weight:500;
  max-width:300px;
  display:flex; gap:10px; align-items:flex-start;
  text-align:left;
}
.mqxl-fact b{color:#fbbf24; font-weight:900}
.mqxl-fact__icon{font-size:18px; line-height:1; flex-shrink:0; margin-top:1px}

/* ============================================================
   HOST LOBBY — with embedded generation progress
   ============================================================ */
/* Generation strip — replaces the standalone loading screen.
   Sits at top of host lobby while AI works; players can already join. */
.mqxh-gen{
  position:relative;
  margin-bottom:14px;
  padding:16px 16px 14px;
  border-radius:22px;
  background:linear-gradient(135deg, #0e0826 0%, #2d1b69 60%, #4c1d95 100%);
  color:#fff;
  box-shadow:0 18px 40px -15px rgba(76,29,149,.55),
             inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;
}
.mqxh-gen::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 100% 0%, rgba(251,191,36,.32), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(236,72,153,.25), transparent 55%);
  pointer-events:none;
}
.mqxh-gen > *{position:relative}
.mqxh-gen__row{
  display:flex; align-items:center; gap:12px;
}
.mqxh-gen__orb{
  position:relative;
  width:48px; height:48px;
  flex-shrink:0;
}
.mqxh-gen__orb-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#fbbf24;
  border-right-color:rgba(251,191,36,.4);
  animation:mqxlSpin 1.6s linear infinite;
}
.mqxh-gen__orb-core{
  position:absolute; inset:8px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  font-size:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 0 16px rgba(251,191,36,.25);
}
.mqxh-gen__txt{flex:1; min-width:0}
.mqxh-gen__t{
  font-size:14.5px; font-weight:900;
  letter-spacing:-.015em;
  color:#fff;
}
.mqxh-gen__s{
  margin-top:1px;
  font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,.7);
}
.mqxh-gen__pct{
  font-size:22px; font-weight:900;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:#fbbf24;
  text-shadow:0 0 14px rgba(251,191,36,.35);
}
.mqxh-gen__bar{
  margin-top:12px;
  height:5px;
  background:rgba(255,255,255,.14);
  border-radius:9999px;
  overflow:hidden;
}
.mqxh-gen__bar-fill{
  height:100%;
  background:linear-gradient(90deg, #fbbf24, #fb923c, #fbbf24);
  background-size:200% 100%;
  border-radius:9999px;
  animation:mqxlBarShimmer 2s linear infinite;
  box-shadow:0 0 10px rgba(251,191,36,.55);
  transition:width .6s var(--mq-ease);
}
/* horizontal step pills under bar */
.mqxh-gen__chain{
  display:flex; gap:6px;
  margin-top:12px;
}
.mqxh-gen__chip{
  flex:1;
  display:flex; align-items:center; gap:5px;
  min-width:0;
  padding:6px 8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  font-size:10.5px; font-weight:800;
  color:rgba(255,255,255,.65);
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.005em;
  transition:all .3s var(--mq-ease);
}
.mqxh-gen__chip-em{font-size:12px; flex-shrink:0}
.mqxh-gen__chip-l{overflow:hidden; text-overflow:ellipsis}
.mqxh-gen__chip.done{
  background:rgba(16,185,129,.22);
  border-color:rgba(16,185,129,.45);
  color:#fff;
}
.mqxh-gen__chip.active{
  background:rgba(251,191,36,.22);
  border-color:rgba(251,191,36,.5);
  color:#fff;
  box-shadow:0 0 0 1px rgba(251,191,36,.2) inset;
}
.mqxh-gen__chip.active .mqxh-gen__chip-em{
  animation:mqxlBob 1.4s ease-in-out infinite;
}

/* "ready" state — collapsed strip, green */
.mqxh-gen.ready{
  background:linear-gradient(135deg, #065f46 0%, #059669 100%);
}
.mqxh-gen.ready .mqxh-gen__bar{display:none}
.mqxh-gen.ready .mqxh-gen__chain{display:none}

/* CTA disabled-but-styled when generating */
.mqx-cta--gen{
  background:linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
  box-shadow:0 10px 24px rgba(76,29,149,.45);
  cursor:wait;
}
.mqx-cta--gen:hover{transform:none; box-shadow:0 10px 24px rgba(76,29,149,.45)}
.mqx-cta--gen .mqx-cta__sp{
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:mqxlSpin .8s linear infinite;
}


/* Big PIN tile */
.mqxh-pin{
  position:relative;
  padding:24px 22px;
  background:linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  border-radius:24px;
  color:#fff;
  text-align:center;
  box-shadow:0 18px 40px -10px rgba(16,185,129,.5),
             inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
}
.mqxh-pin::before{
  content:""; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.2), transparent);
  pointer-events:none;
}
.mqxh-pin > *{position:relative}
.mqxh-pin__lbl{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800;
  letter-spacing:.18em;
  opacity:.85;
}
.mqxh-pin__num{
  font-family:var(--mq-font-mono);
  font-size:54px;
  font-weight:900;
  letter-spacing:.16em;
  line-height:1.05;
  margin:8px 0 4px;
  text-shadow:0 4px 16px rgba(0,0,0,.2);
}
.mqxh-pin__url{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px;
  padding:4px 10px;
  background:rgba(0,0,0,.18);
  border-radius:9999px;
  font-size:11.5px; font-weight:700;
  letter-spacing:-.005em;
}

/* Share pills INSIDE the PIN tile — frosted glass on green gradient */
.mqxh-pin__share{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:18px;
}
.mqxh-share{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 8px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  color:#fff;
  border-radius:13px;
  font-family:inherit; font-size:12.5px; font-weight:800;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:all .15s var(--mq-ease);
}
.mqxh-share:hover{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.34);
  transform:translateY(-1px);
}
.mqxh-share svg{width:14px; height:14px}
.mqxh-share--primary{
  background:#fff;
  color:var(--mq-success-dark);
  border-color:#fff;
  font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.mqxh-share--primary:hover{
  background:#f9fafb;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* QR mini preview pinned right of PIN */
.mqxh-qr{
  flex-shrink:0;
  width:84px; height:84px;
  background:#fff;
  border-radius:14px;
  padding:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  display:grid; place-items:center;
}
.mqxh-qr svg{width:100%; height:100%; display:block}

/* Lobby header (players) */
.mqxh-players-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.mqxh-players-head__t{
  font-size:16px; font-weight:900;
  color:var(--mq-gray-900);
  letter-spacing:-.015em;
}
.mqxh-players-head__c{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px 4px 7px;
  background:var(--mq-grad-main);
  color:#fff;
  border-radius:9999px;
  font-size:11.5px; font-weight:900;
  box-shadow:0 4px 10px rgba(102,126,234,.4);
}
.mqxh-players-head__c-dot{
  width:6px; height:6px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 2px rgba(52,211,153,.35);
  animation:mqxhBlink 1.4s ease-in-out infinite;
}
@keyframes mqxhBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* Player grid */
.mqxh-pgrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.mqxh-p{
  position:relative;
  padding:10px 4px 8px;
  background:var(--mq-gray-50);
  border:1.5px solid var(--mq-gray-100);
  border-radius:14px;
  text-align:center;
  transition:all .2s var(--mq-ease-back);
  animation:mqxhPop .35s var(--mq-ease-back) both;
}
.mqxh-p:nth-child(2){animation-delay:.05s}
.mqxh-p:nth-child(3){animation-delay:.1s}
.mqxh-p:nth-child(4){animation-delay:.15s}
.mqxh-p:nth-child(5){animation-delay:.2s}
.mqxh-p:nth-child(6){animation-delay:.25s}
.mqxh-p:nth-child(7){animation-delay:.3s}
.mqxh-p:nth-child(8){animation-delay:.35s}
@keyframes mqxhPop{
  from{opacity:0; transform:scale(.5) translateY(8px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}
.mqxh-p__av{
  width:36px; height:36px;
  margin:0 auto 5px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:18px;
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12),
             inset 0 1px 0 rgba(255,255,255,.2);
}
.mqxh-p__n{
  font-size:11.5px; font-weight:800;
  color:var(--mq-gray-800);
  overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis;
  letter-spacing:-.005em;
}
.mqxh-p.host{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:#fbbf24;
}
.mqxh-p.host::after{
  content:"👑"; position:absolute;
  top:-8px; left:50%; transform:translateX(-50%);
  font-size:16px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.mqxh-p.you{
  background:linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color:#a78bfa;
}
.mqxh-p.you::after{
  content:"ВЫ"; position:absolute;
  top:-7px; right:-2px;
  padding:1px 6px;
  background:var(--mq-grad-main);
  color:#fff;
  border-radius:9999px;
  font-size:9px; font-weight:900; letter-spacing:.05em;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.mqxh-p.joining{
  opacity:.5;
  border-style:dashed;
}
.mqxh-p.joining .mqxh-p__av{
  background:var(--mq-gray-200) !important;
  color:var(--mq-gray-400);
  animation:mqxhSkele 1.4s ease-in-out infinite;
}
@keyframes mqxhSkele{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* small status row + music toggle */
.mqxh-strip{
  display:flex; align-items:center; gap:10px;
  margin-top:12px;
  padding:10px 14px;
  background:var(--mq-gray-50);
  border:1px solid var(--mq-gray-100);
  border-radius:14px;
}
.mqxh-strip__t{
  flex:1;
  font-size:12px; font-weight:700;
  color:var(--mq-gray-600);
}
.mqxh-strip__t b{color:var(--mq-gray-900); font-weight:900}
.mqxh-music{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 8px;
  background:#fff;
  border:1.5px solid var(--mq-gray-200);
  border-radius:9999px;
  font-size:11.5px; font-weight:800;
  color:var(--mq-gray-700);
  cursor:pointer;
  transition:all .15s var(--mq-ease);
}
.mqxh-music.on{
  background:linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color:#a78bfa;
  color:#6d28d9;
}
.mqxh-music__eq{
  display:inline-flex; align-items:flex-end; gap:1.5px;
  height:11px;
}
.mqxh-music__eq span{
  display:block; width:2px; background:currentColor;
  border-radius:1px;
  animation:mqxhEq 1.2s ease-in-out infinite;
}
.mqxh-music__eq span:nth-child(1){height:50%; animation-delay:0s}
.mqxh-music__eq span:nth-child(2){height:100%; animation-delay:.2s}
.mqxh-music__eq span:nth-child(3){height:70%; animation-delay:.4s}
.mqxh-music__eq span:nth-child(4){height:90%; animation-delay:.1s}
.mqxh-music:not(.on) .mqxh-music__eq span{animation:none; height:40%}
@keyframes mqxhEq{
  0%,100%{transform:scaleY(.4)}
  50%{transform:scaleY(1)}
}

/* Quiz meta strip — what's been generated */
.mqxh-meta{
  display:flex; gap:8px; flex-wrap:wrap;
}
.mqxh-meta__pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px 5px 6px;
  background:var(--mq-gray-50);
  border:1px solid var(--mq-gray-100);
  border-radius:9999px;
  font-size:11.5px; font-weight:700;
  color:var(--mq-gray-700);
}
.mqxh-meta__em{
  width:18px; height:18px;
  background:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:10px;
}
.mqxh-meta__pill b{color:var(--mq-gray-900); font-weight:900}

/* Sticky footer */
.mqxx-foot{
  position:relative; z-index:6;
  padding:12px 16px 18px;
  background:linear-gradient(180deg, transparent, rgba(13,8,30,.6) 40%);
}

/* ============================================================
   PLAYER LOBBY
   ============================================================ */
/* Hero "you're in" */
.mqxp-in{
  position:relative;
  margin-top:6px;
  padding:22px 18px 18px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 18px 44px -18px rgba(15,23,42,.45),
             0 4px 12px rgba(15,23,42,.08);
  text-align:center;
  overflow:hidden;
}
.mqxp-in::before{
  content:""; position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0% 0%, rgba(167,139,250,.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(251,191,36,.15), transparent 55%);
  pointer-events:none;
}
.mqxp-in > *{position:relative}
.mqxp-in__check{
  width:60px; height:60px;
  margin:0 auto 12px;
  border-radius:50%;
  background:var(--mq-grad-green);
  color:#fff;
  display:grid; place-items:center;
  font-size:30px;
  box-shadow:0 12px 28px rgba(16,185,129,.5),
             inset 0 1px 0 rgba(255,255,255,.3);
  animation:mqxpCheck .6s var(--mq-ease-back) both;
}
@keyframes mqxpCheck{
  0%{transform:scale(.2); opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1); opacity:1}
}
.mqxp-in__check svg{width:30px; height:30px}
.mqxp-in__t{
  margin:0 0 4px;
  font:900 22px/1.15 var(--mq-font-sans);
  letter-spacing:-.02em;
  color:var(--mq-gray-900);
}
.mqxp-in__s{
  margin:0;
  font-size:13px; color:var(--mq-gray-500);
  font-weight:600;
}
.mqxp-in__quiz{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 7px;
  background:linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-radius:9999px;
  font-size:12px; font-weight:800;
  color:#6d28d9;
}
.mqxp-in__quiz-em{
  width:22px; height:22px;
  background:var(--mq-grad-main);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:12px;
  box-shadow:0 3px 8px rgba(102,126,234,.4);
}

/* "Your avatar" picker — big tile under hero */
.mqxp-me{
  margin-top:14px;
  padding:16px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 18px 44px -18px rgba(15,23,42,.45),
             0 4px 12px rgba(15,23,42,.08);
  display:flex; align-items:center; gap:14px;
}
.mqxp-me__av{
  position:relative;
  width:62px; height:62px; flex-shrink:0;
  border-radius:18px;
  background:var(--mq-grad-pink);
  color:#fff;
  display:grid; place-items:center;
  font-size:30px;
  box-shadow:0 10px 24px rgba(236,72,153,.45),
             inset 0 1px 0 rgba(255,255,255,.25);
  animation:mqxpAvBob 4s ease-in-out infinite;
}
@keyframes mqxpAvBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
}
.mqxp-me__av-ring{
  position:absolute; inset:-4px;
  border:2px dashed rgba(236,72,153,.4);
  border-radius:22px;
  animation:mqxpSpin 16s linear infinite;
}
@keyframes mqxpSpin{to{transform:rotate(360deg)}}
.mqxp-me__txt{flex:1; min-width:0}
.mqxp-me__l{
  font-size:11.5px; font-weight:800;
  color:var(--mq-gray-500);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.mqxp-me__n{
  margin-top:2px;
  font-size:22px; font-weight:900;
  color:var(--mq-gray-900);
  letter-spacing:-.02em;
}
.mqxp-me__edit{
  flex-shrink:0;
  width:38px; height:38px;
  border:0; cursor:pointer;
  background:var(--mq-gray-100);
  color:var(--mq-gray-600);
  border-radius:12px;
  display:grid; place-items:center;
  transition:all .15s var(--mq-ease);
}
.mqxp-me__edit:hover{background:var(--mq-gray-200)}
.mqxp-me__edit svg{width:16px; height:16px}

/* waiting indicator (other players) */
.mqxp-wait{
  margin-top:14px;
  padding:18px 18px 16px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 18px 44px -18px rgba(15,23,42,.45),
             0 4px 12px rgba(15,23,42,.08);
}
.mqxp-wait__head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.mqxp-wait__t{
  font-size:14.5px; font-weight:900;
  color:var(--mq-gray-900);
  letter-spacing:-.01em;
}
.mqxp-wait__c{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px 3px 6px;
  background:var(--mq-gray-100);
  color:var(--mq-gray-700);
  border-radius:9999px;
  font-size:11.5px; font-weight:800;
}
.mqxp-wait__c-dot{
  width:6px; height:6px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 2px rgba(52,211,153,.35);
  animation:mqxhBlink 1.4s ease-in-out infinite;
}
.mqxp-wait__list{
  display:flex; flex-wrap:wrap; gap:8px;
}
.mqxp-wait__p{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px 5px 5px;
  background:var(--mq-gray-50);
  border:1.5px solid var(--mq-gray-100);
  border-radius:9999px;
  font-size:12.5px; font-weight:800;
  color:var(--mq-gray-800);
  animation:mqxhPop .35s var(--mq-ease-back) both;
}
.mqxp-wait__p:nth-child(2){animation-delay:.06s}
.mqxp-wait__p:nth-child(3){animation-delay:.12s}
.mqxp-wait__p:nth-child(4){animation-delay:.18s}
.mqxp-wait__p:nth-child(5){animation-delay:.24s}
.mqxp-wait__p:nth-child(6){animation-delay:.3s}
.mqxp-wait__p:nth-child(7){animation-delay:.36s}
.mqxp-wait__p-av{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px;
  color:#fff;
}
.mqxp-wait__p.host .mqxp-wait__p-av::after{
  content:"👑"; position:absolute;
  top:-9px; left:0;
  font-size:11px;
}
.mqxp-wait__p.host{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:#fbbf24;
}

/* mini-game / fact while waiting */
.mqxp-fun{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(13,8,30,.55), rgba(76,29,149,.55));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  display:flex; gap:12px; align-items:center;
  color:#fff;
  overflow:hidden;
  position:relative;
}
.mqxp-fun::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 20%, rgba(251,191,36,.3), transparent 50%);
  pointer-events:none;
}
.mqxp-fun > *{position:relative}
.mqxp-fun__icon{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:12px;
  background:var(--mq-grad-cta);
  display:grid; place-items:center;
  font-size:20px;
  box-shadow:0 6px 14px rgba(255,149,0,.45);
  animation:mqxpBob 3s ease-in-out infinite;
}
@keyframes mqxpBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-3px) rotate(3deg)}
}
.mqxp-fun__txt{flex:1; min-width:0}
.mqxp-fun__l{
  font-size:10.5px; font-weight:800;
  color:rgba(255,255,255,.7);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:2px;
}
.mqxp-fun__b{
  font-size:13px; font-weight:700;
  line-height:1.4;
}
.mqxp-fun__b b{color:#fbbf24; font-weight:900}

/* Reaction strip — emoji buttons */
.mqxp-reax{
  margin-top:14px;
  display:flex; gap:6px;
  padding:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  border-radius:9999px;
  justify-content:space-around;
}
.mqxp-reax__b{
  flex:1;
  height:42px;
  border:0; background:transparent;
  border-radius:9999px;
  cursor:pointer;
  font-size:22px;
  display:grid; place-items:center;
  transition:all .15s var(--mq-ease-back);
}
.mqxp-reax__b:hover{
  background:rgba(255,255,255,.18);
  transform:scale(1.15);
}
.mqxp-reax__b:active{transform:scale(.92)}

/* Tip pill at the very bottom */
.mqxp-tip{
  margin-top:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 8px;
  align-self:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  border-radius:9999px;
  color:rgba(255,255,255,.85);
  font-size:11.5px; font-weight:700;
  margin-left:auto; margin-right:auto;
}

/* ============================================================
   GENERATION STRIP — shown when AI is still generating
   Used both in host lobby and (smaller) player lobby
   ============================================================ */
.mqxh-gen--strip{
  position:relative;
  display:flex; gap:12px; align-items:center;
  padding:14px 16px 12px;
  background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 50%,#5b21b6 100%);
  border-radius:18px;
  color:#fff;
  margin-bottom:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px -10px rgba(76,29,149,.6);
}
.mqxh-gen--strip::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 92% 50%, rgba(251,191,36,.32), transparent 55%);
  pointer-events:none;
}
.mqxh-gen--strip > *{position:relative}
.mqxh-gen--strip__spin{
  width:40px; height:40px; flex-shrink:0;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
  font-size:20px;
  position:relative;
}
.mqxh-gen--strip__spin::after{
  content:""; position:absolute; inset:-3px;
  border:2px solid transparent;
  border-top-color:#fbbf24;
  border-right-color:rgba(251,191,36,.5);
  border-radius:14px;
  animation:mqxlSpin 1.4s linear infinite;
}
.mqxh-gen--strip__txt{flex:1; min-width:0}
.mqxh-gen--strip__t{
  display:flex; align-items:baseline; gap:8px;
  font-size:13.5px; font-weight:800;
  letter-spacing:-.005em;
}
.mqxh-gen--strip__t b{
  margin-left:auto;
  font-size:14px; font-weight:900;
  color:#fbbf24;
  font-variant-numeric:tabular-nums;
}
.mqxh-gen--strip__b{
  height:5px;
  background:rgba(255,255,255,.14);
  border-radius:3px;
  margin-top:8px;
  overflow:hidden;
}
.mqxh-gen--strip__b-f{
  height:100%;
  background:linear-gradient(90deg,#fbbf24,#fb923c,#fbbf24);
  background-size:200% 100%;
  animation:mqxlBarShimmer 2s linear infinite;
  border-radius:3px;
  box-shadow:0 0 10px rgba(251,191,36,.5);
  transition:width .6s var(--mq-ease);
}
.mqxh-gen--strip__s{
  margin-top:6px;
  font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,.72);
}
.mqxh-gen--strip__s b{color:#fff; font-weight:800}

/* Disabled CTA */
.mqx-cta.is-disabled{
  background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.62);
  box-shadow:none;
  cursor:wait;
  border:1px solid rgba(255,255,255,.18);
}
.mqx-cta.is-disabled::after{display:none}
.mqx-cta.is-disabled:hover{transform:none; box-shadow:none}
.mqx-cta__dots{
  display:inline-flex; gap:3px; margin-left:6px;
}
.mqx-cta__dots span{
  width:5px; height:5px; border-radius:50%;
  background:currentColor;
  animation:mqxhBlink 1.2s ease-in-out infinite;
}
.mqx-cta__dots span:nth-child(2){animation-delay:.2s}
.mqx-cta__dots span:nth-child(3){animation-delay:.4s}

/* ============================================================
   FLOATING CTA — absolutely positioned over the artboard,
   content scrolls behind it (Linear / Arc / Headspace style)
   ============================================================ */
.mqx__foot{
  position:absolute; left:0; right:0; bottom:0;
  z-index:6;
  padding:0 16px 20px;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.mqx__foot > *{pointer-events:auto}
.mqx__foot--solid{background:transparent; border:0}
.mqx__foot-row{
  display:flex; gap:8px;
}
.mqx__foot-row .mqx-cta{flex:1}

/* Stronger shadow on floating CTA so it reads as elevated above any scroll content */
.mqx__foot .mqx-cta{
  box-shadow:0 12px 28px rgba(255,149,0,.5),
             0 4px 12px rgba(15,23,42,.25);
}
.mqx__foot .mqx-cta.is-disabled{
  background:rgba(20,15,40,.78);
  color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 12px 28px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.08);
}

/* Player-lobby specific bottom ribbon — floating, no background */
.mqxp-ribbon{
  position:absolute; left:0; right:0; bottom:0;
  z-index:6;
  padding:12px 18px 18px;
  display:flex; align-items:center; gap:10px;
  color:#fff;
  font-size:12.5px; font-weight:700;
  pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.mqxp-ribbon > *{pointer-events:auto}
.mqxp-ribbon__dot{
  width:7px; height:7px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.3);
  animation:mqxhBlink 1.4s ease-in-out infinite;
}
.mqxp-ribbon__spacer{flex:1}
.mqxp-ribbon__leave{
  border:0; cursor:pointer;
  background:transparent;
  color:rgba(255,255,255,.7);
  font-family:inherit; font-size:12px; font-weight:700;
  padding:6px 10px;
  border-radius:9999px;
  display:inline-flex; align-items:center; gap:4px;
}
.mqxp-ribbon__leave:hover{background:rgba(255,255,255,.1); color:#fff}
.mqxp-ribbon__leave svg{width:11px; height:11px}

/* ================= SPA adaptation ================= */
/* .mqx: из телефона в адаптивную full-bleed сцену. Переходим на скролл СТРАНИЦЫ. */
.mqx{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:auto;
  overflow:visible;        /* было hidden — иначе высокий контент обрежется при page-scroll */
  border-radius:0;
}
.mqx__scroll{
  max-width:480px;
  margin:0 auto;
  flex:none;               /* было flex:1 */
  min-height:0;
  overflow:visible;        /* было overflow-y:auto — скроллит страница, не контейнер */
  padding-bottom:20px;
  -webkit-mask-image:none;
          mask-image:none;
}
.mqx-top{
  left:50%; right:auto;
  transform:translateX(-50%);
  width:min(calc(100% - 28px), 452px);
}
.mqx__foot{
  position:sticky; bottom:0;
  left:auto; right:auto; transform:none;
  padding:12px 0 16px;
  background:transparent;
}
.mqx__foot > *{pointer-events:auto}
.mqxp-ribbon{
  position:static;
  transform:none;
  padding:10px 4px 2px;
}
#create-game .create-game-container,
#game-room-player .player-lobby-wrapper{
  padding:0; margin:0; max-width:none;
}

/* full-bleed режим: прячем штатный навбар (у него свой баланс — иначе дубль) */
body.lobby-fullbleed .navbar{ display:none !important; }

/* disabled-состояние CTA (кнопка «AI думает...») */
.mqx-cta:disabled,
.mqx-cta.is-disabled{ opacity:.6; cursor:wait; }
.mqx-cta:disabled:hover{ transform:none; box-shadow:0 8px 24px rgba(255,149,0,.42); }

/* kick-кнопка на плитке игрока (хост) */
.mqxh-p__kick{
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; padding:0;
  border:0; cursor:pointer; border-radius:50%;
  background:rgba(239,68,68,.92); color:#fff; font-size:10px; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* значение баланса в топ-баре (обновляется из JS) */
.mqx-topbal__val{ font-variant-numeric:tabular-nums; }

/* факты интегрированы в тёмную карточку генерации (не белый бокс) */
.mqxh-gen .cg-facts-section{ margin-top:12px; background:transparent; padding:0; box-shadow:none; }
.mqxh-gen .cg-facts-label{ color:rgba(255,255,255,.7); font-size:11.5px; }
.mqxh-gen .cg-facts-carousel{ position:relative; min-height:44px; }
.mqxh-gen .cg-fact-item{ background:transparent; box-shadow:none; padding:0; }
.mqxh-gen .cg-fact-item *,
.mqxh-gen .cg-fact-text{ color:rgba(255,255,255,.92); }
.mqxh-gen .cg-fact-dot{ background:rgba(255,255,255,.3); }
.mqxh-gen .cg-fact-dot.active{ background:#fbbf24; }

/* secondary lobby actions: quiet frosted buttons, not heavy dark boxes */
.mqx-cta--ghost{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  box-shadow:none;
}
.mqx-cta--ghost:hover{ background:rgba(255,255,255,.24); box-shadow:none; }

/* поле имени: убираем «бокс в боксе» — плоское поле внутри карточки */
.mqxc-name{
  border:0;
  background:var(--mq-gray-50);
}
.mqxc-name:focus-within{
  background:#fff;
  box-shadow:0 0 0 2px var(--mq-primary);
}