@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --mq-primary: #6366f1;
  --mq-primary-dark: #4f46e5;
  --mq-gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 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-gradient-cta: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
  --mq-gray-100: #f3f4f6;
  --mq-gray-200: #e5e7eb;
  --mq-gray-500: #6b7280;
  --mq-gray-700: #374151;
  --mq-gray-800: #1f2937;
  --mq-gray-900: #111827;
  --mq-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --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 === */
.qr-stage { background: var(--mq-gradient-main); position: relative; font-family: var(--mq-font-sans); color: #fff; overflow: hidden; }
.qr-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 50%), radial-gradient(circle at 85% 90%, rgba(157,80,187,.5), transparent 55%); pointer-events: none; }
.qr-stage > * { position: relative; z-index: 1; }

/* === PLAYER (mobile) === */
.qr-player { width: 100%; min-height: 100vh; display: flex; flex-direction: column; padding: 16px 16px 24px; box-sizing: border-box; }
.qr-spacer { flex: 1; min-height: 0; }
.qr-p-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.qr-progress-dots { flex: 1; display: flex; gap: 5px; }
.qr-pdot { flex: 1; height: 5px; border-radius: 9999px; background: rgba(255,255,255,.22); transition: background .3s var(--mq-ease); }
.qr-pdot.done { background: rgba(255,255,255,.95); }
.qr-pdot.current { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); animation: qrPulseDot 1.6s ease-in-out infinite; }
@keyframes qrPulseDot { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.15); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.05); } }

.qr-menu-btn { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; cursor: pointer; backdrop-filter: blur(10px); padding: 0; transition: background .15s var(--mq-ease); }
.qr-menu-btn:hover { background: rgba(255,255,255,.22); }
.qr-menu-btn svg { width: 14px; height: 14px; }

/* timer */
.qr-timer { width: 54px; height: 54px; position: relative; display: grid; place-items: center; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); flex-shrink: 0; }
.qr-timer__ring { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(#fff calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.12) 0); -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px); }
.qr-timer__num { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; line-height: 1; letter-spacing: -.02em; }
.qr-timer.warn .qr-timer__ring { background: conic-gradient(#fbbf24 calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.12) 0); }
.qr-timer.danger { background: rgba(239,68,68,.25); border-color: rgba(255,255,255,.6); animation: qrPulseTimer .8s ease-in-out infinite; }
.qr-timer.danger .qr-timer__ring { background: conic-gradient(#ff5252 calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.12) 0); }
.qr-timer.danger .qr-timer__num { color: #fecaca; }
@keyframes qrPulseTimer { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(239,68,68,0); } }

/* question card */
.qr-q-slot { min-height: 230px; display: flex; align-items: center; margin-bottom: 14px; }
.qr-q-card { background: #fff; color: var(--mq-gray-900); border-radius: 24px; padding: 22px 20px 20px; width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(20,10,60,.4), 0 1px 0 rgba(255,255,255,.5) inset; }
.qr-q-card__scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.qr-q-card__scroll::-webkit-scrollbar { display: none; }
.qr-q-text { font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; margin: 0; color: var(--mq-gray-900); text-wrap: balance; }
.qr-q-text.long { font-size: 16px; }

/* answers A/B/C/D */
.qr-answers { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; min-height: 228px; }
.qr-ans { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 14px; border: 0; border-radius: 18px; font-family: inherit; color: #fff; font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; letter-spacing: -.01em; line-height: 1.25; transition: transform .25s var(--mq-ease-out), filter .3s var(--mq-ease), box-shadow .25s var(--mq-ease); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.18) inset; }
.qr-ans::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 40%); pointer-events: none; }
.qr-ans[data-v="a"] { background: var(--mq-grad-red); }
.qr-ans[data-v="b"] { background: var(--mq-grad-blue); }
.qr-ans[data-v="c"] { background: var(--mq-grad-amber); }
.qr-ans[data-v="d"] { background: var(--mq-grad-green); }

.qr-ans__letter { width: 30px; height: 30px; background: rgba(0,0,0,.22); border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.qr-ans__text { flex: 1; display: flex; align-items: flex-end; }

.qr-ans:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.qr-ans:active:not(:disabled) { transform: translateY(0); }

.qr-ans__mark { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 900; opacity: 0; transform: scale(.6); transition: opacity .2s var(--mq-ease), transform .25s var(--mq-ease-back); pointer-events: none; }

/* === state machine === */
[data-state="selected"] .qr-ans[data-selected],
[data-state="waiting"] .qr-ans[data-selected] { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 30px rgba(0,0,0,.32), 0 0 0 4px rgba(255,255,255,.85); }

[data-state="reveal"] .qr-ans[data-correct] { animation: qrCorrect .6s var(--mq-ease-back); box-shadow: 0 14px 36px rgba(16,185,129,.55), 0 0 0 4px #34d399; }
[data-state="reveal"] .qr-ans[data-correct] .qr-ans__mark { opacity: 1; transform: scale(1); color: #059669; }
[data-state="reveal"] .qr-ans[data-correct] .qr-ans__mark::before { content: "✓"; }

[data-state="reveal"] .qr-ans[data-selected]:not([data-correct]) { filter: grayscale(.4) brightness(.7); box-shadow: 0 8px 18px rgba(0,0,0,.2), 0 0 0 4px rgba(239,68,68,.7); }
[data-state="reveal"] .qr-ans[data-selected]:not([data-correct]) .qr-ans__mark { opacity: 1; transform: scale(1); color: #dc2626; }
[data-state="reveal"] .qr-ans[data-selected]:not([data-correct]) .qr-ans__mark::before { content: "✗"; }

[data-state="reveal"] .qr-ans:not([data-correct]):not([data-selected]) { filter: grayscale(.55) brightness(.55) saturate(.7); opacity: .7; }

@keyframes qrCorrect { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1.015); } }

/* bottom row */
.qr-bottom { margin-top: 14px; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.qr-streak { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); border-radius: 9999px; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.qr-streak b { font-weight: 900; font-variant-numeric: tabular-nums; }
[data-state="reveal"] .qr-streak { background: linear-gradient(135deg, rgba(255,200,80,.4), rgba(255,149,0,.6)); border-color: rgba(255,255,255,.5); }

.qr-status { flex: 1; display: none; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); border-radius: 9999px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: -.005em; justify-content: center; }
[data-state="idle"] .qr-status--idle,
[data-state="danger"] .qr-status--idle,
[data-state="waiting"] .qr-status--waiting,
[data-state="reveal"] .qr-status--reveal { display: flex; }
.qr-status--reveal { background: rgba(16,185,129,.25); border-color: rgba(52,211,153,.5); }
.qr-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.3); animation: qrBlink 1.4s ease-in-out infinite; }
@keyframes qrBlink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* === HOST (desktop) === */
.qr-host { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; gap: 24px; padding: 32px 36px 36px; box-sizing: border-box; }
.qr-host__topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.qr-host__brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.qr-host__brand .bolt { width: 32px; height: 32px; background: var(--mq-gradient-cta); border-radius: 9px; display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 15px rgba(255,149,0,.4); }
.qr-host__progress { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.qr-host__progress-meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.qr-host__progress-meta b { color: #fff; font-weight: 900; }
.qr-host__progress-track { height: 6px; background: rgba(255,255,255,.18); border-radius: 9999px; overflow: hidden; }
.qr-host__progress-fill { height: 100%; background: linear-gradient(90deg, #fff, #e0e7ff); border-radius: 9999px; box-shadow: 0 0 14px rgba(255,255,255,.5); }

.qr-host__timer { width: 84px; height: 84px; position: relative; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); flex-shrink: 0; }
.qr-host__timer-ring { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(#fff calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); mask: radial-gradient(circle, transparent 38px, #000 39px); }
.qr-host__timer-num { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; line-height: 1; letter-spacing: -.03em; }
.qr-host__timer-lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.7); letter-spacing: .16em; text-transform: uppercase; }
.qr-host__timer.warn .qr-host__timer-ring { background: conic-gradient(#fbbf24 calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.1) 0); }
.qr-host__timer.danger { background: rgba(239,68,68,.18); animation: qrPulseTimer .8s ease-in-out infinite; }
.qr-host__timer.danger .qr-host__timer-ring { background: conic-gradient(#ff5252 calc(var(--qr-prog, 1) * 360deg), rgba(255,255,255,.1) 0); }

.qr-host__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.qr-host__question { background: #fff; color: var(--mq-gray-900); border-radius: 28px; padding: 36px 40px; box-shadow: 0 30px 60px -20px rgba(20,10,60,.5); display: flex; flex-direction: column; gap: 18px; }
.qr-host__qtext { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.qr-host__qtext.long { font-size: 26px; }

.qr-host__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qr-host__ans { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 0; border-radius: 20px; font-family: inherit; color: #fff; font-size: 20px; font-weight: 800; text-align: left; letter-spacing: -.01em; line-height: 1.25; min-height: 84px; transition: transform .25s var(--mq-ease-out), filter .3s var(--mq-ease), box-shadow .25s var(--mq-ease); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.18) inset; }
.qr-host__ans::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 40%); pointer-events: none; }
.qr-host__ans[data-v="a"] { background: var(--mq-grad-red); }
.qr-host__ans[data-v="b"] { background: var(--mq-grad-blue); }
.qr-host__ans[data-v="c"] { background: var(--mq-grad-amber); }
.qr-host__ans[data-v="d"] { background: var(--mq-grad-green); }
.qr-host__ans-letter { width: 46px; height: 46px; flex-shrink: 0; background: rgba(0,0,0,.22); border-radius: 12px; display: grid; place-items: center; font-size: 22px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.qr-host__ans-text { flex: 1; min-width: 0; }
.qr-host__ans-count { font-size: 13px; font-weight: 800; opacity: .85; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.2); padding: 5px 11px; border-radius: 9999px; }
.qr-host__ans-mark { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 900; opacity: 0; transform: scale(.6); transition: opacity .2s var(--mq-ease), transform .25s var(--mq-ease-back); }
[data-state="reveal"] .qr-host__ans[data-correct] { box-shadow: 0 14px 36px rgba(16,185,129,.55), 0 0 0 4px #34d399; animation: qrCorrect .6s var(--mq-ease-back); }
[data-state="reveal"] .qr-host__ans[data-correct] .qr-host__ans-mark { opacity: 1; transform: scale(1); color: #059669; }
[data-state="reveal"] .qr-host__ans[data-correct] .qr-host__ans-mark::before { content: "✓"; }
[data-state="reveal"] .qr-host__ans:not([data-correct]) { filter: grayscale(.55) brightness(.55) saturate(.7); opacity: .6; }
[data-state="reveal"] .qr-host__ans-count { display: none; }

.qr-host__side { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.qr-host__panel { background: rgba(255,255,255,.1); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 20px; color: #fff; }
.qr-host__panel-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.qr-host__answered-count { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.qr-host__answered-count small { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.6); }
.qr-host__answered-track { height: 5px; background: rgba(255,255,255,.18); border-radius: 9999px; overflow: hidden; margin-top: 14px; }
.qr-host__answered-fill { height: 100%; background: #34d399; border-radius: 9999px; box-shadow: 0 0 12px rgba(52,211,153,.5); transition: width .4s var(--mq-ease); }
.qr-host__avs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.qr-host__av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); font-size: 11px; font-weight: 800; display: grid; place-items: center; color: #fff; }
.qr-host__av[data-pal="0"] { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.qr-host__av[data-pal="1"] { background: var(--mq-grad-red); }
.qr-host__av[data-pal="2"] { background: var(--mq-grad-blue); }
.qr-host__av[data-pal="3"] { background: var(--mq-grad-amber); }
.qr-host__av[data-pal="4"] { background: var(--mq-grad-green); }
.qr-host__av.muted { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.15); }
.qr-host__points-num { font-size: 36px; font-weight: 900; line-height: 1; letter-spacing: -.03em; background: linear-gradient(135deg, #fbbf24, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.qr-host__points-meta { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 4px; font-weight: 600; }
.qr-host__pin { text-align: center; padding: 18px 16px; }
.qr-host__pin-num { font-family: 'Courier New', monospace; font-size: 28px; font-weight: 900; letter-spacing: .3rem; color: #fff; margin-top: 6px; }

/* === hide global navbar inside question section === */
body:has(#question-page.section.active) .navbar { display: none !important; }

/* === photo mode (custom, not in prototype) === */
.qr-ans[data-mode="photo"] { background-size: cover !important; background-position: center !important; min-height: 110px; }
.qr-ans[data-mode="photo"] .qr-ans__text { display: none; }
.qr-ans[data-mode="photo"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5)); pointer-events: none; }
.qr-ans[data-mode="photo"] .qr-ans__letter { position: relative; z-index: 1; }
.qr-host__ans[data-mode="photo"] { background-size: cover !important; background-position: center !important; min-height: 140px; }
.qr-host__ans[data-mode="photo"] .qr-host__ans-text { display: none; }