Embed

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"/>

<style>
#ch-hero-wrap {
  text-align: center;
  padding: 48px 20px 32px;
  position: relative;
  overflow: hidden;
}

/* Animated grid background */
#ch-hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: ch-grid-drift 20s linear infinite;
  pointer-events: none;
}

@keyframes ch-grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Top label */
#ch-event-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.3);
  padding: 6px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
  position: relative;
  animation: ch-fade-up 0.6s ease both;
}

.ch-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: ch-blink 1.4s ease-in-out infinite;
}

@keyframes ch-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* Main title */
#ch-main-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 10vw, 96px);
  line-height: 0.95;
  letter-spacing: 2px;
  color: #ffffff;
  margin-bottom: 6px;
  position: relative;
  animation: ch-fade-up 0.6s ease 0.1s both;
}

#ch-main-title span {
  background: linear-gradient(90deg, #f59e0b 0%, #f59e0b 40%, #fff8e1 50%, #f59e0b 60%, #f59e0b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ch-shimmer 2.4s linear infinite;
}

@keyframes ch-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

#ch-sub-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 8px;
  color: rgba(255,255,255,0.15);
  margin-bottom: 28px;
  animation: ch-fade-up 0.6s ease 0.2s both;
}

/* Hype pills row */
#ch-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 36px;
  flex-wrap: wrap;
  animation: ch-fade-up 0.6s ease 0.3s both;
}

.ch-pill {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e2e8f0;
  padding: 8px 20px;
  position: relative;
}

.ch-pill::after {
  content: '·';
  position: absolute;
  right: -4px;
  color: rgba(245,158,11,0.4);
  font-size: 18px;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.ch-pill:last-child::after { display: none; }

.ch-pill.gold { color: #f59e0b; }

/* Divider line with diamond */
#ch-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  animation: ch-fade-up 0.6s ease 0.35s both;
}

.ch-div-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.4));
}

.ch-div-line.right {
  background: linear-gradient(90deg, rgba(245,158,11,0.4), transparent);
}

.ch-div-diamond {
  width: 8px;
  height: 8px;
  background: #f59e0b;
  transform: rotate(45deg);
}

@keyframes ch-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

<div id="ch-hero-wrap">
  <div id="ch-event-label">
    <div class="ch-label-dot"></div>
    CHARTHACKERS PRESENTS
  </div>

  <div id="ch-main-title">
    SATURDAY NIGHT<br><span>LIVE QUIZ</span>
  </div>

  <div id="ch-sub-title">CHART · HACKERS</div>

  <div id="ch-pills">
    <div class="ch-pill">EVERY SATURDAY</div>
    <div class="ch-pill gold">6PM UK</div>
    <div class="ch-pill">20 QUESTIONS</div>
    <div class="ch-pill gold">PRIZES TO BE WON</div>
  </div>

  <div id="ch-divider">
    <div class="ch-div-line"></div>
    <div class="ch-div-diamond"></div>
    <div class="ch-div-line right"></div>
  </div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"/>
<div id="chq-root"></div>
<style>
#chq-root *{box-sizing:border-box;margin:0;padding:0;font-family:'Space Mono',monospace}
#chq-wrap{background:#0a0a0f;color:#e2e8f0;border-radius:14px;overflow:hidden;border:1px solid #1e2030;max-width:640px;margin:0 auto;font-size:1em}
#chq-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f0f1a;border-bottom:1px solid #1e2030}
.chq-logo{font-size:12px;font-weight:700;color:#f59e0b;letter-spacing:2px}
.chq-live{display:flex;align-items:center;gap:6px;font-size:10px;color:#64748b}
.chq-dot{width:7px;height:7px;border-radius:50%;background:#64748b}
.chq-dot.live{background:#ef4444;animation:chq-pulse 1.2s ease-in-out infinite}
@keyframes chq-pulse{0%,100%{opacity:1}50%{opacity:.3}}
#chq-wait-screen{padding:48px 24px;text-align:center}
#chq-wait-screen h2{font-size:15px;color:#f59e0b;letter-spacing:2px;margin-bottom:10px}
#chq-wait-screen p{font-size:11px;color:#64748b;line-height:1.9;margin-bottom:28px}
.chq-pulse-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.chq-pulse-dot{width:10px;height:10px;border-radius:50%;background:#f59e0b;opacity:0.3;animation:chq-wait-bounce 1.4s ease-in-out infinite}
.chq-pulse-dot:nth-child(2){animation-delay:0.2s}
.chq-pulse-dot:nth-child(3){animation-delay:0.4s}
@keyframes chq-wait-bounce{0%,80%,100%{opacity:0.2;transform:scale(0.8)}40%{opacity:1;transform:scale(1.2)}}
#chq-wait-status{font-size:10px;color:#64748b;letter-spacing:2px;margin-top:8px}
#chq-name-screen{display:none;padding:32px 24px;text-align:center}
#chq-name-screen h2{font-size:16px;color:#f59e0b;margin-bottom:8px;letter-spacing:2px}
#chq-name-screen p{font-size:11px;color:#64748b;margin-bottom:20px;line-height:1.8}
#chq-name-input{background:#1e2030;border:1px solid #2d3148;color:#e2e8f0;font-family:'Space Mono',monospace;font-size:13px;padding:10px 14px;border-radius:8px;width:100%;max-width:280px;outline:none;margin-bottom:12px;display:block;margin-left:auto;margin-right:auto}
.chq-btn-join{padding:10px 28px;background:#f59e0b;border:none;color:#0a0a0f;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;letter-spacing:1px}
#chq-name-err{font-size:11px;color:#ef4444;min-height:18px;margin-bottom:6px}
#chq-lobby-screen{display:none;padding:40px 24px;text-align:center}
#chq-lobby-screen h2{font-size:14px;color:#22c55e;letter-spacing:2px;margin-bottom:8px}
#chq-lobby-name{font-size:20px;font-weight:700;color:#e2e8f0;margin-bottom:6px}
#chq-lobby-screen p{font-size:11px;color:#64748b;line-height:1.8;margin-bottom:24px}
#chq-lobby-status{font-size:10px;color:#64748b;letter-spacing:2px;margin-top:8px}
#chq-loading{display:none;padding:40px;text-align:center;font-size:11px;color:#64748b}
#chq-quiz-screen{display:none}
#chq-progress-wrap{width:100%;height:3px;background:#1e2030}
#chq-progress-bar{height:3px;background:#f59e0b;transition:width 1s linear}
#chq-qmeta{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0f0f1a;border-bottom:1px solid #1e2030;font-size:11px}
.chq-qnum{color:#64748b}
.chq-qnum b{color:#e2e8f0}
#chq-timer-wrap{display:flex;align-items:center;gap:8px}
#chq-timer-bg{width:100px;height:5px;background:#1e2030;border-radius:3px;overflow:hidden}
#chq-timer-bar{height:5px;background:#22c55e;border-radius:3px;transition:width 0.9s linear,background 0.5s}
#chq-timer-val{font-size:12px;font-weight:700;color:#f59e0b;min-width:28px;text-align:right}
#chq-qbox{padding:20px 20px 12px}
#chq-cat{font-size:9px;letter-spacing:2px;color:#f59e0b;margin-bottom:8px}
#chq-qtext{font-size:14px;color:#e2e8f0;line-height:1.7;margin-bottom:16px}
#chq-opts{display:flex;flex-direction:column;gap:8px;padding:0 20px 16px}
.chq-opt{padding:11px 14px;background:transparent;border:1px solid #2d3148;color:#94a3b8;font-family:'Space Mono',monospace;font-size:12px;border-radius:8px;cursor:pointer;text-align:left;transition:all 0.15s;display:flex;align-items:center;gap:10px;width:100%}
.chq-opt:hover:not([disabled]){border-color:#f59e0b55;color:#e2e8f0;background:#1a1500}
.chq-opt.chq-correct{border-color:#22c55e;color:#22c55e;background:#052a0e}
.chq-opt.chq-wrong{border-color:#ef4444;color:#ef4444;background:#1a0505}
.chq-opt.chq-reveal{border-color:#22c55e;color:#22c55e;background:#052a0e}
.chq-key{font-size:10px;opacity:0.5;min-width:14px}
#chq-result{margin:0 20px 12px;padding:10px 14px;border-radius:8px;font-size:12px;display:none;line-height:1.6}
#chq-score-row{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;border-top:1px solid #1e2030;font-size:11px;color:#64748b}
#chq-score-row b{color:#f59e0b;font-size:14px}
#chq-streak b{color:#ef4444;font-size:14px}
#chq-lb-panel{padding:10px 16px;border-top:1px solid #1e2030}
#chq-lb-hdr{display:flex;justify-content:space-between;font-size:10px;color:#64748b;margin-bottom:8px;letter-spacing:1px}
#chq-lb-rows{display:flex;flex-direction:column;gap:4px}
.chq-lb-r{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0f0f1a;border-radius:6px;border:1px solid #1e2030;font-size:11px;transition:all 0.3s}
.chq-lb-r.chq-me{border-color:#f59e0b55;background:#1a1500}
.chq-lb-rank{color:#64748b;min-width:20px}
.chq-lb-name{flex:1;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chq-lb-pts{font-weight:700;color:#f59e0b;min-width:44px;text-align:right}
.chq-lb-streak{font-size:10px;color:#ef4444;min-width:28px;text-align:right}
#chq-end-screen{display:none;padding:32px 20px;text-align:center}
#chq-end-screen h2{font-size:15px;color:#f59e0b;letter-spacing:2px;margin-bottom:4px}
.chq-final-score{font-size:36px;font-weight:700;color:#e2e8f0;margin:12px 0 4px}
.chq-grade{font-size:11px;color:#64748b;margin-bottom:20px;line-height:1.8;max-width:300px;margin-left:auto;margin-right:auto}
.chq-prizes{font-size:11px;color:#f59e0b88;margin-top:16px;letter-spacing:1px}
</style>
<script>
(function(){
var WORKER_URL='https://charthackers-quiz.thecharthackers.workers.dev';
var QUIZ_SIZE=20,Q_DURATION=45;
var state={name:'',score:0,streak:0,answered:false,done:false,lastQI:-1,sessionSeed:0,sessionStart:null};
var QUESTIONS=[],ALL_QUESTIONS=[],pollTimer=null,quizTimer=null,quizLoaded=false,lastActive=false;

function seededRandom(seed){return function(){seed|=0;seed=seed+0x6D2B79F5|0;var t=Math.imul(seed^seed>>>15,1|seed);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296;};}
function pickQ(allQ,seed){var rng=seededRandom(seed),pool=allQ.slice();for(var i=pool.length-1;i>0;i--){var j=Math.floor(rng()*(i+1)),tmp=pool[i];pool[i]=pool[j];pool[j]=tmp;}return pool.slice(0,QUIZ_SIZE);}

document.getElementById('chq-root').innerHTML=`
<div id="chq-wrap">
  <div id="chq-hdr">
    <div class="chq-logo">SATURDAY NIGHT LIVE QUIZ</div>
    <div class="chq-hdr-right">
      <div class="chq-live"><div class="chq-dot" id="chq-dot"></div><span id="chq-live-txt">WAITING</span></div>
    </div>
  </div>
  <div id="chq-wait-screen">
    <h2>SATURDAY NIGHT LIVE QUIZ</h2>
    <p>20 questions · 45 seconds each · 15 minutes<br>Everyone gets the same questions.<br>Quiz fires when your host starts it.</p>
    <div class="chq-pulse-row"><div class="chq-pulse-dot"></div><div class="chq-pulse-dot"></div><div class="chq-pulse-dot"></div></div>
    <div id="chq-wait-status">WAITING FOR HOST</div>
    <button class="chq-btn-join" id="chq-btn-goname" style="margin-top:24px">ENTER YOUR NAME →</button>
  </div>
  <div id="chq-name-screen">
    <h2>ENTER YOUR NAME</h2>
    <p>Get your name in now.<br>You'll jump straight in when the host starts.</p>
    <input id="chq-name-input" type="text" placeholder="Your name or Discord handle" maxlength="20"/>
    <div id="chq-name-err"></div>
    <button class="chq-btn-join" id="chq-btn-register">I'M READY →</button>
  </div>
  <div id="chq-lobby-screen">
    <h2>YOU'RE IN THE LOBBY</h2>
    <div id="chq-lobby-name"></div>
    <p>Sit tight — quiz starts the moment your host fires it.<br>Your screen will flip automatically.</p>
    <div class="chq-pulse-row"><div class="chq-pulse-dot"></div><div class="chq-pulse-dot"></div><div class="chq-pulse-dot"></div></div>
    <div id="chq-lobby-status">WAITING FOR HOST TO START</div>
  </div>
  <div id="chq-loading">Loading questions...</div>
  <div id="chq-quiz-screen">
    <div id="chq-progress-wrap"><div id="chq-progress-bar" style="width:0%"></div></div>
    <div id="chq-qmeta">
      <div class="chq-qnum">QUESTION <b id="chq-qnum">1</b> OF <b>${QUIZ_SIZE}</b></div>
      <div id="chq-timer-wrap"><div id="chq-timer-bg"><div id="chq-timer-bar"></div></div><div id="chq-timer-val">${Q_DURATION}</div></div>
    </div>
    <div id="chq-qbox"><div id="chq-cat"></div><div id="chq-qtext"></div></div>
    <div id="chq-opts"></div>
    <div id="chq-result"></div>
    <div id="chq-score-row">
      <div>YOUR SCORE <b id="chq-my-score">0</b></div>
      <div id="chq-streak">STREAK <b id="chq-streak-val">0</b></div>
    </div>
    <div id="chq-lb-panel">
      <div id="chq-lb-hdr"><span>— LEADERBOARD —</span><span id="chq-player-count"></span></div>
      <div id="chq-lb-rows"></div>
    </div>
  </div>
  <div id="chq-end-screen">
    <div style="font-size:10px;color:#64748b;letter-spacing:2px;margin-bottom:6px">QUIZ COMPLETE</div>
    <h2>SATURDAY NIGHT LIVE QUIZ</h2>
    <div class="chq-final-score" id="chq-final-score">0</div>
    <div class="chq-grade" id="chq-grade"></div>
    <div id="chq-end-lb"></div>
    <div class="chq-prizes">🏆 PRIZES TO BE WON</div>
  </div>
</div>`;

document.getElementById('chq-btn-goname').addEventListener('click',function(){showOnly('chq-name-screen');});
document.getElementById('chq-btn-register').addEventListener('click',function(){
  var n=document.getElementById('chq-name-input').value.trim();
  if(!n){document.getElementById('chq-name-err').textContent='Enter a name to join.';return;}
  state.name=n;
  document.getElementById('chq-lobby-name').textContent=n;
  showOnly('chq-lobby-screen');
});

function showOnly(id){['chq-wait-screen','chq-name-screen','chq-lobby-screen','chq-loading','chq-quiz-screen','chq-end-screen'].forEach(function(s){document.getElementById(s).style.display=s===id?'block':'none';});}
function setDot(live){var d=document.getElementById('chq-dot'),t=document.getElementById('chq-live-txt');d.className='chq-dot'+(live?' live':'');t.textContent=live?'LIVE':'WAITING';t.style.color=live?'#ef4444':'#64748b';}
function getScreen(){var ss=['chq-wait-screen','chq-name-screen','chq-lobby-screen','chq-loading','chq-quiz-screen','chq-end-screen'];for(var i=0;i<ss.length;i++){var e=document.getElementById(ss[i]);if(e&&e.style.display==='block')return ss[i];}return 'chq-wait-screen';}

async function fetchSession(){try{var r=await fetch(WORKER_URL+'/session');return await r.json();}catch(e){return{active:false};}}
async function fetchAllQ(){try{var r=await fetch(WORKER_URL+'/questions');var q=await r.json();return Array.isArray(q)?q:[];}catch(e){return[];}}
async function fetchLB(){try{var r=await fetch(WORKER_URL+'/leaderboard');return await r.json();}catch(e){return[];}}
async function postScore(n,s,st){try{var r=await fetch(WORKER_URL+'/score',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,score:s,streak:st})});return await r.json();}catch(e){return[];}}

function renderLB(lb,myName,container){
  if(!container)return;
  if(!lb||!lb.length){container.innerHTML='';return;}
  container.innerHTML='';
  lb.slice(0,8).forEach(function(p,i){
    var isMe=p.name===myName,medals=['◆','▲','●'],rank=medals[i]||('#'+(i+1)),d=document.createElement('div');
    d.className='chq-lb-r'+(isMe?' chq-me':'');
    d.innerHTML='<span class="chq-lb-rank">'+rank+'</span><span class="chq-lb-name">'+(isMe?'<b style="color:#f59e0b">'+p.name+'</b>':p.name)+'</span><span class="chq-lb-pts">'+p.score+'</span>'+(p.streak>1?'<span class="chq-lb-streak">🔥'+p.streak+'</span>':'<span class="chq-lb-streak"></span>');
    container.appendChild(d);
  });
  var pc=document.getElementById('chq-player-count');
  if(pc)pc.textContent=lb.length+' PLAYER'+(lb.length!==1?'S':'');
}

async function launchQuiz(session){
  if(quizLoaded)return;
  quizLoaded=true;
  state.sessionSeed=session.seed;
  state.sessionStart=new Date(session.started_at).getTime();
  showOnly('chq-loading');
  if(!ALL_QUESTIONS.length)ALL_QUESTIONS=await fetchAllQ();
  if(!ALL_QUESTIONS.length){document.getElementById('chq-loading').textContent='Error loading questions. Refresh!';return;}
  QUESTIONS=pickQ(ALL_QUESTIONS,state.sessionSeed);
  showOnly('chq-quiz-screen');
  setDot(true);
  var lb=await fetchLB();
  renderLB(lb,state.name,document.getElementById('chq-lb-rows'));
  startQTimer(state.sessionStart);
}

async function pollSession(){
  if(state.done)return;
  var session=await fetchSession();
  if(session.active){
    lastActive=true;
    setDot(true);
    if(!quizLoaded){
      var scr=getScreen();
      if(scr==='chq-wait-screen'){showOnly('chq-name-screen');return;}
      if(scr==='chq-lobby-screen'||scr==='chq-name-screen'){
        if(state.name)await launchQuiz(session);
      }
    }
  } else {
    setDot(false);
    if(lastActive&&!state.done){
      lastActive=false;quizLoaded=false;
      if(!state.done)showEnd();
    }
    if(!lastActive&&getScreen()==='chq-quiz-screen'&&!state.done){showOnly('chq-wait-screen');}
  }
}

function startQTimer(startedAt){
  if(quizTimer)clearInterval(quizTimer);
  quizTimer=setInterval(function(){if(state.done){clearInterval(quizTimer);return;}tickQuiz(Math.floor((Date.now()-startedAt)/1000));},500);
  tickQuiz(Math.floor((Date.now()-startedAt)/1000));
}

function tickQuiz(elapsed){
  if(!QUESTIONS.length)return;
  var qi=Math.floor(elapsed/Q_DURATION);
  if(qi>=QUIZ_SIZE){if(!state.done){state.done=true;clearInterval(quizTimer);showEnd();}return;}
  var secsLeft=Q_DURATION-(elapsed%Q_DURATION);
  var bar=document.getElementById('chq-timer-bar');
  if(bar){bar.style.width=((secsLeft/Q_DURATION)*100)+'%';bar.style.background=secsLeft<=10?'#ef4444':secsLeft<=20?'#f59e0b':'#22c55e';}
  var tv=document.getElementById('chq-timer-val');if(tv)tv.textContent=secsLeft;
  var pb=document.getElementById('chq-progress-bar');if(pb)pb.style.width=(((qi+1)/QUIZ_SIZE)*100)+'%';
  var qn=document.getElementById('chq-qnum');if(qn)qn.textContent=qi+1;
  if(qi!==state.lastQI){state.lastQI=qi;state.answered=false;showQ(qi);}
}

function showQ(qi){
  var q=QUESTIONS[qi];if(!q)return;
  var opts=[q.option_a,q.option_b,q.option_c,q.option_d];
  var cat=document.getElementById('chq-cat'),qt=document.getElementById('chq-qtext');
  if(cat)cat.textContent=q.category||'GENERAL';
  if(qt)qt.textContent=q.question;
  var c=document.getElementById('chq-opts');if(!c)return;
  c.innerHTML='';
  ['A','B','C','D'].forEach(function(k,i){
    var b=document.createElement('button');
    b.className='chq-opt';
    b.innerHTML='<span class="chq-key">'+k+'</span>'+opts[i];
    b.onclick=(function(idx,qi){return function(){chqAnswer(idx,qi);};})(i,qi);
    c.appendChild(b);
  });
  var rm=document.getElementById('chq-result');if(rm)rm.style.display='none';
  var ms=document.getElementById('chq-my-score'),sv=document.getElementById('chq-streak-val');
  if(ms)ms.textContent=state.score;if(sv)sv.textContent=state.streak;
}

async function chqAnswer(idx,qi){
  if(state.answered||qi!==state.lastQI)return;
  state.answered=true;
  var q=QUESTIONS[qi],elapsed=Math.floor((Date.now()-state.sessionStart)/1000),secsLeft=Q_DURATION-(elapsed%Q_DURATION),correct=idx===q.correct,pts=0;
  if(correct){state.streak++;pts=100+Math.floor(secsLeft/4)+(state.streak>1?(state.streak-1)*25:0);state.score+=pts;}else{state.streak=0;}
  document.querySelectorAll('.chq-opt').forEach(function(b,i){b.disabled=true;if(i===q.correct)b.classList.add(i===idx?'chq-correct':'chq-reveal');else if(i===idx)b.classList.add('chq-wrong');});
  var rm=document.getElementById('chq-result');
  if(correct){rm.style.cssText='display:block;background:rgba(34,197,94,0.1);border:1px solid #22c55e44;color:#22c55e;margin:0 20px 12px;padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.6';rm.textContent='Correct! +'+pts+' pts'+(state.streak>1?' · '+state.streak+'x streak':'');}
  else{rm.style.cssText='display:block;background:rgba(239,68,68,0.1);border:1px solid #ef444444;color:#ef4444;margin:0 20px 12px;padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.6';rm.textContent='Wrong. Correct: '+String.fromCharCode(65+q.correct)+'. Streak reset.';}
  var ms=document.getElementById('chq-my-score'),sv=document.getElementById('chq-streak-val');
  if(ms)ms.textContent=state.score;if(sv)sv.textContent=state.streak;
  var lb=await postScore(state.name,state.score,state.streak);
  renderLB(lb,state.name,document.getElementById('chq-lb-rows'));
}

async function showEnd(){
  if(quizTimer)clearInterval(quizTimer);
  setDot(false);
  showOnly('chq-end-screen');
  document.getElementById('chq-final-score').textContent=state.score;
  var lb=await fetchLB();
  var rank=lb.findIndex(function(x){return x.name===state.name;})+1;
  var pct=Math.round((state.score/(QUIZ_SIZE*133))*100);
  var grades=[[90,'LEGENDARY. Near perfect. Proper ChartHacker.'],[70,'Strong performance. You clearly know your charts.'],[50,'Solid. A few gaps — keep studying.'],[30,'Keep studying — see you on the next one.'],[0,'Rough one. The charts will humble you every time.']];
  var grade=grades.find(function(g){return pct>=g[0];})||grades[grades.length-1];
  document.getElementById('chq-grade').textContent=grade[1]+(rank>0&&state.name?' You ranked #'+rank+'.':'');
  document.getElementById('chq-end-lb').innerHTML='<div id="chq-end-lb-inner"></div>';
  renderLB(lb,state.name,document.getElementById('chq-end-lb-inner'));
}

showOnly('chq-wait-screen');
pollSession();
pollTimer=setInterval(pollSession,2000);
})();
</script>