/* Myquiz-like screens + smooth transitions */
.screen{
  display:none;
  opacity:0;
  transform: translate3d(0,10px,0);
  will-change: opacity, transform;
  transition: opacity .22s ease, transform .22s ease;
}
.screen.active{
  display:block;
  opacity:1;
  transform: translate3d(0,0,0);
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr;}
}

.choice{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(15,40,70,0.12);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  transition: transform .12s ease, box-shadow .18s ease, outline-color .2s ease, border-color .18s ease;
  will-change: transform;
}
.choice:active{transform: scale(0.99);}
.choice:hover{transform: translate3d(0,-1px,0); box-shadow: 0 18px 44px rgba(10,30,60,0.12);} 
.choice.good{outline: 3px solid rgba(34,197,94,0.45);}
.choice.bad{outline: 3px solid rgba(255,61,107,0.35);}
.choice.disabled{opacity:0.70; cursor:default;}

.timer{
  height:10px;border-radius:999px;
  background:rgba(15,40,70,0.10);
  overflow:hidden;
  border:1px solid rgba(15,40,70,0.08);
}
.timer > div{
  height:100%;
  width:100%;
  background: linear-gradient(90deg, rgba(0,184,255,0.90), rgba(107,92,255,0.90));
  transform-origin:left center;
  transform: scaleX(1);
  transition: transform .1s linear;
}

.table{
  width:100%;
  border-collapse:collapse;
}
.table td,.table th{
  padding:10px 8px;
  border-bottom:1px solid rgba(15,40,70,0.10);
  text-align:left;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,40,70,0.10);
  background: rgba(255,255,255,0.65);
}

/* Open answer input */
#openWrap input{
  width:100%;
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(15,40,70,0.12);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  font-size:16px;
  font-weight:700;
  outline:none;
}

/* Reveal stats */
.statRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; }
.statLabel{ font-weight:900; }
.statBar{ flex:1; height:12px; border-radius:999px; background:rgba(15,40,70,0.10); overflow:hidden; border:1px solid rgba(15,40,70,0.08); }
.statBar > div{ height:100%; width:0%; background: rgba(51,42,159,0.85); }
.statCount{ min-width:44px; text-align:right; font-weight:900; }

@media (prefers-reduced-motion: reduce){
  .screen, .choice, .timer > div{transition:none !important;}
}


/* Open question results (enhanced) */
.openWrap{ margin-top: 6px; }
.openHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.openSummary{ display:flex; gap:10px; flex-wrap:wrap; font-size:14px; }
.openCorrect{ margin-top:10px; }
.chipRow{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.03); font-size:13px; }
.chip.ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.chip.bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.choiceSummary{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.openControls{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.openSearch{ flex:1; min-width:200px; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.18); background:#fff; }
.openBtns{ display:flex; gap:8px; flex-wrap:wrap; }
.btn.sm{ padding:8px 12px; font-size:13px; border-radius:999px; }
.btn.on{ box-shadow: 0 0 0 2px rgba(64,128,255,.25) inset; }
.openList{ margin-top:10px; }
.openGroup{ border:1px solid rgba(0,0,0,.10); border-radius:14px; padding:10px 12px; margin:8px 0; background: rgba(255,255,255,.75); }
.openGroupHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.openGroupRight{ display:flex; align-items:center; gap:10px; }
.btn.xs{ padding:6px 10px; font-size:12px; border-radius:999px; }
.openGroupItems{ margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.12); display:flex; flex-direction:column; gap:6px; }
.openVarRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.openVarText{ flex:1; }
.openVarCount{ min-width:36px; text-align:right; font-weight:900; }
@media (max-width: 560px){
  .openSearch{ min-width: 160px; width:100%; }
}

/* =====================
   MyQuiz-like game UI
   Applies only on play page
   ===================== */

body.playpage {
  background: #f3f4f6;
}

body.playpage .bg { display:none; }

.mq-bg{
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 60% 10%, rgba(255,255,255,.18), rgba(255,255,255,0)),
              linear-gradient(180deg, #5b4ae6 0%, #7c2ed6 55%, #f3f4f6 55%, #f3f4f6 100%);
  z-index: -1;
}

.mq-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 16px;
  background: #3b2ea6;
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

.mq-top-left{ display:flex; align-items:center; gap:12px; }
.mq-logo{ width: 44px; height: 44px; object-fit: contain; filter: brightness(1.15) contrast(1.05); }
.mq-title-wrap{ line-height:1.05; }
.mq-appname{ font-size: 12px; opacity:.9; letter-spacing:.3px; font-weight:800; }
.mq-gamename{ font-size: 14px; font-weight:900; max-width: 56vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mq-iconbtn{
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  border-radius: 999px;
  height: 40px;
  padding: 0 14px;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
}

.mq-shell{ padding: 18px 16px 40px; }

.mq-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.mq-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,.12);
  padding: 18px;
}

.mq-aside{ display:none; }

@media (min-width: 980px){
  .mq-layout{ grid-template-columns: 1.2fr .68fr; align-items: start; }
  .mq-card{ padding: 22px; }
  .mq-aside{ display:block; }
}

.mq-screen{ min-height: 420px; }

.mq-h1{ font-size: 26px; margin: 0; font-weight: 1000; }
.mq-h2{ font-size: 22px; margin: 6px 0 0; font-weight: 1000; }
.mq-kicker{ font-size: 12px; font-weight: 900; opacity: .75; }

.mq-hr{ height:1px; background: rgba(0,0,0,.08); margin: 14px 0; }

.mq-actions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }

.mq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #1f2937;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
}

.mq-btn.primary{
  background: linear-gradient(180deg, #43c463, #2ea84b);
  border-color: rgba(0,0,0,.06);
  color: #fff;
}

.mq-btn.ghost{
  background: rgba(255,255,255,.75);
}

.mq-badges{ display:flex; gap:10px; flex-wrap:wrap; }

/* Question top info */
.mq-topinfo{
  display:flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
}

.mq-topinfo-right{ display:flex; gap:12px; align-items:flex-start; }

.mq-mini{
  background: rgba(59,46,166,.08);
  border: 1px solid rgba(59,46,166,.14);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 140px;
}

.mq-mini-label{ font-size: 12px; opacity: .7; font-weight: 900; }
.mq-mini-value{ font-size: 18px; font-weight: 1000; margin-top: 2px; }

@media (max-width: 520px){
  .mq-topinfo{ flex-direction: column; }
  .mq-topinfo-right{ width: 100%; }
  .mq-mini{ flex: 1; min-width: 0; }
}

.mq-progress{
  margin-top: 12px;
  height: 6px;
  background: rgba(59,46,166,.15);
  border-radius: 999px;
  overflow:hidden;
}
.mq-progress.thin{ height: 4px; }

#tbar, #mqNextBar{
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #43c463, #6a5cff);
  border-radius: 999px;
}

/* Choices */
.mq-choices{ margin-top: 14px; display:grid; gap: 12px; }
@media (min-width: 720px){
  .mq-choices{ grid-template-columns: 1fr 1fr; }
}

.choice{
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  cursor:pointer;
  user-select:none;
}

.choice:hover{ box-shadow: 0 10px 30px rgba(0,0,0,.08); }

.choice .letter{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(107,92,255,.16);
  color:#6b5cff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 20px;
}

.choice.good{ border-color: rgba(46,168,75,.45); }
.choice.bad{ border-color: rgba(244,63,94,.45); }
.choice.selected{ outline: 3px solid rgba(107,92,255,.22); }

.choice.good .letter{ background: rgba(46,168,75,.14); color:#2ea84b; }
.choice.bad .letter{ background: rgba(244,63,94,.14); color:#f43f5e; }

/* Reveal side cards */
.mq-sidecard{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,.12);
  padding: 18px;
  margin-bottom: 16px;
}

.mq-side-title{ font-weight: 1000; opacity: .9; margin-bottom: 10px; }

.mq-ring{ position: relative; width: 140px; height: 140px; margin: 0 auto; }
.mq-ring-svg{ width: 140px; height: 140px; transform: rotate(-90deg); }
.mq-ring-track{ fill: none; stroke: rgba(0,0,0,.08); stroke-width: 10; }
.mq-ring-prog{ fill: none; stroke: #6b5cff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 0; }
.mq-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: 42px; font-weight: 1000; color:#111827; }

/* Toast */
.mq-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 100;
  min-width: min(520px, calc(100vw - 24px));
  background: #111827;
  color:#fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
  font-weight: 900;
}

.mq-toast.good{ background: #2ea84b; }
.mq-toast.bad{ background: #f43f5e; }

/* Hide legacy elements on play page */
body.playpage .shell, body.playpage .card{ all: unset; }
body.playpage .timer{ display:none; }
body.playpage .grid-2, body.playpage .grid-1{ all: unset; }

/* Make existing elements fit new layout */
body.playpage input{ border-radius: 12px; }


/* =====================
   MyQuiz-like game UI
   Applies only on play page
   ===================== */

body.playpage { background:#f3f4f6; }
body.playpage .bg { display:none; }

.mq-bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 60% 10%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(180deg, #3a23a3 0%, #6c37d6 55%, #f3f4f6 55%, #f3f4f6 100%);
  z-index:-1;
}

.mq-topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  color:#fff;
}
.mq-top-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.mq-logo{ width:40px; height:40px; object-fit:contain; border-radius:10px; }
.mq-title-wrap{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.mq-appname{ font-weight:900; font-size:12px; letter-spacing:.08em; opacity:.9; }
.mq-gamename{ font-weight:900; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; }

.mq-iconbtn{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:#fff;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:18px;
  cursor:pointer;
}

.mq-shell{ padding:18px; }
.mq-layout{ display:grid; grid-template-columns: 1fr 360px; gap:18px; align-items:start; }
.mq-main{ min-width:0; }
.mq-aside{ position:sticky; top:78px; display:flex; flex-direction:column; gap:14px; }

.mq-card{
  background:#fff;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding:18px 18px 16px;
}
.mq-screen{ padding:0; }

.mq-h1{ font-size:26px; margin:0 0 6px; }
.mq-h2{ font-size:22px; margin:0; font-weight:900; }
.mq-kicker{ font-weight:900; font-size:13px; color:#6b7280; }
.mq-hr{ height:1px; background:#e5e7eb; margin:14px 0; }

.mq-block .sub{ margin:0 0 10px; }

.mq-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.mq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 16px;
  font-weight:900;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  text-decoration:none;
  cursor:pointer;
}
.mq-btn.primary{
  border-color:#22c55e;
  background:#22c55e;
  color:#fff;
}
.mq-btn.ghost{
  background:transparent;
  border-color:#c7c9ff;
  color:#4f46e5;
}

.mq-lobby-head .sub{ margin:0 0 10px; }
.mq-badges{ display:flex; gap:10px; flex-wrap:wrap; }

.mq-topinfo{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.mq-topinfo-right{ display:flex; gap:12px; }
.mq-mini{ text-align:right; min-width:92px; }
.mq-mini-label{ font-size:12px; color:#6b7280; font-weight:900; }
.mq-mini-value{ font-size:20px; font-weight:900; color:#111827; }

.mq-progress{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.mq-progress.thin{ height:6px; margin-top:8px; }
#tbar, #mqNextBar{
  height:100%;
  width:100%;
  transform-origin:left center;
  background:#22c55e;
  transform:scaleX(1);
}
#mqNextBar{ background:#4f46e5; }

.mq-multibar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  gap:12px;
}

.mq-choices{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.mq-choices .choice{
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:14px 14px;
  display:flex;
  gap:12px;
  align-items:center;
}
.mq-choices .choice .letter{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#6366f1;
  background:#eef2ff;
  flex:0 0 auto;
}
.mq-choices .choice.selected{ outline:3px solid rgba(79,70,229,.25); border-color:#c7c9ff; }
.mq-choices .choice.good{ border-color:#22c55e; }
.mq-choices .choice.bad{ border-color:#ef4444; }
.mq-choices .choice.bad.selected{ background:#ffe4e6; }
.mq-choices .choice.good.selected{ background:#dcfce7; }

.mq-open input{
  width:100%;
  border-radius:14px;
  padding:14px 14px;
  border:1px solid #e5e7eb;
  font-weight:800;
  margin-top:6px;
}

.mq-sidecard{
  background:#fff;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding:14px;
}
.mq-side-title{ font-weight:900; color:#111827; margin-bottom:10px; }

.mq-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  position:relative;
}
.mq-ring-svg{ width:160px; height:160px; }
.mq-ring-track{ fill:none; stroke:#e5e7eb; stroke-width:10; }
.mq-ring-prog{
  fill:none; stroke:#4f46e5; stroke-width:10;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 289.0;
  stroke-dashoffset: 0;
}
.mq-ring-num{
  position:absolute;
  font-size:44px;
  font-weight:900;
  color:#111827;
}

.mq-toast{
  position:fixed;
  left:12px; right:12px; bottom:14px;
  border-radius:14px;
  padding:14px 16px;
  font-weight:900;
  color:#fff;
  z-index:9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.mq-toast.ok{ background:#16a34a; }
.mq-toast.bad{ background:#ef4444; }
.mq-toast.info{ background:#4f46e5; }

/* Mobile */
@media (max-width: 980px){
  .mq-topbar{ height:56px; padding:0 14px; }
  .mq-gamename{ max-width:62vw; }
  .mq-shell{ padding:12px; }
  .mq-layout{ grid-template-columns:1fr; }
  .mq-aside{ display:none; }
  .mq-card{ border-radius:16px; padding:14px; }
  .mq-topinfo{ flex-direction:column; align-items:flex-start; }
  .mq-topinfo-right{ width:100%; justify-content:space-between; }
  .mq-mini{ text-align:left; min-width:auto; }
  .mq-choices{ grid-template-columns:1fr; }
  .mq-btn{ width:100%; }
  .mq-actions{ flex-direction:column; }
}

/* Host control page layout */
body.hostcontrol .bg{ display:none; }
body.hostcontrol .mq-shell{ padding-top:8px; }
.hc-toplink{ padding:10px 14px; }
.hc-grid{ display:grid; grid-template-columns: 1fr 380px; gap:18px; align-items:start; }
.hc-badges{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hc-qrwrap{ display:flex; justify-content:center; align-items:center; padding:8px; border:1px dashed #e5e7eb; border-radius:16px; background:#f9fafb; }
.hc-qr{ width:220px; height:220px; object-fit:contain; border-radius:12px; background:#fff; }
.hc-answerednow{ margin-top:10px; }
.hc-answerednow-title{ margin-bottom:8px; font-size:12px; line-height:1.2; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:rgba(17,24,39,.62); }
.hc-answer-stack{ display:flex; align-items:center; flex-wrap:wrap; padding-left:8px; }
.hc-answer-pill{ display:inline-flex; align-items:center; max-width:160px; min-height:34px; margin-left:-8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.96); box-shadow:0 8px 20px rgba(15,23,42,.08); color:#111827; font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-answer-pill:first-child{ margin-left:0; }
.hc-answer-pill-more{ background:rgba(79,70,229,.08); color:#4338ca; }

.hc-liveq{ margin-top:6px; padding:16px; border-radius:18px; border:1px solid rgba(15,23,42,.08); background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98)); box-shadow:0 14px 34px rgba(15,23,42,.06); }
.hc-liveq-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hc-liveq-kicker{ margin-bottom:4px; font-size:12px; line-height:1.2; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:rgba(17,24,39,.62); }
.hc-liveq-text{ margin-top:10px; font-size:24px; line-height:1.25; font-weight:1000; color:#111827; }
.hc-liveq-sub{ margin-top:8px; color:#4b5563; font-size:14px; line-height:1.45; }
.hc-liveq-img{ display:block; width:100%; max-height:240px; object-fit:contain; margin-top:12px; border-radius:16px; background:#f8fafc; border:1px solid rgba(15,23,42,.08); }
.hc-liveq-choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.hc-liveq-choice{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:16px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.06); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.hc-liveq-choice.is-correct{ border-color:rgba(34,197,94,.42); box-shadow:0 12px 30px rgba(34,197,94,.10); }
.hc-liveq-choice-index{ flex:0 0 30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(79,70,229,.08); color:#4338ca; font-weight:1000; font-size:13px; }
.hc-liveq-choice-body{ min-width:0; flex:1; }
.hc-liveq-choice-text{ font-size:15px; line-height:1.4; font-weight:800; color:#111827; word-break:break-word; }
.hc-liveq-choice-img{ display:block; width:100%; max-height:140px; object-fit:contain; margin-top:8px; border-radius:12px; background:#f8fafc; border:1px solid rgba(15,23,42,.08); }
.hc-liveq-note{ padding:12px 14px; border-radius:14px; margin-top:14px; background:rgba(79,70,229,.06); color:#3730a3; font-weight:800; }

@media (max-width: 980px){
  .hc-grid{ grid-template-columns:1fr; }
  body.hostcontrol .mq-topbar{ padding:0 12px; }
  body.hostcontrol .mq-shell{ padding:12px 12px 28px; }
  .hc-card{ padding:14px; }
  .hc-actions .mq-btn{ width:100%; }
  .hc-qr{ width:180px; height:180px; }
  .hc-answer-stack{ padding-left:0; }
  .hc-answer-pill{ max-width:calc(100vw - 84px); min-height:32px; padding:7px 11px; font-size:12px; }
  .hc-liveq{ margin-top:2px; padding:12px; border-radius:16px; }
  .hc-liveq-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .hc-liveq-head .badge{ align-self:flex-start; }
  .hc-liveq-text{ font-size:20px; line-height:1.3; }
  .hc-liveq-sub{ font-size:13px; }
  .hc-liveq-img{ max-height:200px; border-radius:14px; }
  .hc-liveq-choices{ grid-template-columns:1fr; gap:8px; }
  .hc-liveq-choice{ gap:10px; padding:10px; border-radius:14px; }
  .hc-liveq-choice-index{ flex:0 0 28px; height:28px; font-size:12px; }
  .hc-liveq-choice-text{ font-size:14px; }
  .hc-liveq-choice-img{ max-height:120px; }
}


/* ===== UI overrides (2026-02) ===== */
body.playpage .bg{ display:block !important; }
body.hostcontrol .bg{ display:block !important; }
body.playpage .mq-bg, body.hostcontrol .mq-bg{ display:none !important; }

.mq-topbar.mq-topbar-light{
  background: rgba(255,255,255,.78);
  color:#111827;
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mq-topbar.mq-topbar-light .mq-logo{
  width:56px;
  height:56px;
  border-radius:14px;
  background:#fff;
}
.mq-topbar.mq-topbar-light .mq-gamename{ color:#111827; }
.mq-topbar.mq-topbar-light .mq-appname{ display:none; }
.mq-topbar.mq-topbar-light .mq-iconbtn{ display:none !important; }
.mq-topbar.mq-topbar-light .hc-toplink{
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.55);
  color:#111827;
}

.hc-link{
  display:block;
  margin-top:10px;
  font-weight:800;
  color:#1d4ed8;
  text-decoration:none;
  word-break: break-all;
}
.hc-link:hover{ text-decoration:underline; }

/* toast should not look like a full-width bar on mobile */
.mq-toast{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: min(360px, calc(100vw - 24px));
  width: auto !important;
  min-width: 0 !important;
}

/* in-question live counters */
#answeredLine{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(17,24,39,.7);
  font-weight: 800;
}
.liveTop10{
  margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
}
.liveTop10 .ttl{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(17,24,39,.7);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.liveTop10 .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
  font-weight: 850;
}
.liveTop10 .row:last-child{ border-bottom: none; }
.liveTop10 .row .name{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.liveTop10 .row .pts{ color: rgba(17,24,39,.8); }

/* Guest extra fields (play join screen) */
.mq-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mq-field label{ display:block; margin:0 0 6px; font-weight:800; }
.mq-field input{ width:100%; }
@media (max-width: 560px){
  .mq-grid2{ grid-template-columns: 1fr; }
}