<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ app_name }} · Host</title>
<!-- QR Code library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#ffffff;--surface:#f0f4f8;--surface2:#e2e8f0;
  --accent:#0077cc;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff;
  --text:#0a0f1e;--muted:#4a5568;--border:rgba(0,0,0,0.12);
  --pixel:'Press Start 2P',monospace;
}
html{font-size:17px;}
html,body{width:100%;height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden;}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,119,204,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,204,0.06) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}

.screen{display:none;height:100vh;padding:1.5rem 2rem;flex-direction:column;}
.screen.active{display:flex;}

/* ── LOBBY ── */
#lobby-screen{align-items:center;justify-content:center;text-align:center;}
.logo{font-family:var(--pixel);font-size:1.6rem;color:var(--accent);text-shadow:0 0 30px var(--accent);margin-bottom:.3rem;}
.tagline{font-size:.8rem;color:var(--muted);margin-bottom:2rem;}

.lobby-main{display:flex;gap:2.5rem;align-items:flex-start;justify-content:center;width:100%;max-width:900px;}

/* QR */
.qr-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem;text-align:center;min-width:200px;}
.qr-label{font-family:var(--pixel);font-size:.4rem;color:var(--muted);letter-spacing:.1em;margin-bottom:.8rem;}
#qrcode{display:flex;justify-content:center;margin-bottom:.8rem;}
#qrcode canvas,#qrcode img{border-radius:8px;}
.qr-url{font-size:.75rem;color:var(--accent);word-break:break-all;}

/* Player list */
.players-box{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem;}
.players-box-title{font-family:var(--pixel);font-size:.45rem;color:var(--muted);letter-spacing:.1em;margin-bottom:.8rem;}
.player-count-big{font-family:var(--pixel);font-size:2.5rem;color:var(--accent);line-height:1;margin-bottom:.3rem;}
.player-count-sub{font-size:.75rem;color:var(--muted);margin-bottom:.8rem;}
.p-chips{display:flex;flex-wrap:wrap;gap:.4rem;max-height:120px;overflow-y:auto;}
.p-chip{padding:.25rem .6rem;border-radius:100px;background:var(--surface2);border:1px solid var(--border);font-size:.72rem;}

.start-row{display:flex;gap:.8rem;margin-top:2rem;}
.hbtn{padding:.8rem 1.8rem;border-radius:6px;font-family:var(--pixel);font-size:.5rem;letter-spacing:.08em;cursor:pointer;border:2px solid;transition:all .15s;}
.hbtn:active{transform:scale(.96);}
.hbtn-primary{border-color:var(--accent);color:#000;background:var(--accent);}
.hbtn-primary:disabled{opacity:.35;cursor:not-allowed;}
.hbtn-secondary{border-color:var(--border);color:var(--muted);background:transparent;}
.hbtn-secondary:hover{border-color:var(--muted);color:var(--text);}
.hbtn-danger{border-color:var(--red);color:var(--red);background:transparent;}
.hbtn-danger:hover{background:rgba(255,51,85,.1);}
.hbtn-warning{border-color:var(--amber);color:var(--amber);background:transparent;}
.hbtn-warning:hover{background:rgba(255,204,0,.1);}

/* ── QUESTION ── */
#question-screen{justify-content:space-between;}
.q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.q-meta{font-family:var(--pixel);font-size:.5rem;color:var(--muted);}
.timer-big{font-family:var(--pixel);font-size:2.5rem;color:var(--amber);}
.timer-big.urgent{color:var(--red);animation:blink .5s step-end infinite;}
.q-body{display:flex;gap:1.5rem;flex:1;}
.q-left{flex:1;}
.q-text{margin-bottom:1.2rem;}
.q-es{font-family:var(--pixel);font-size:clamp(.55rem,1.1vw,.72rem);line-height:2;color:var(--text);display:block;}
.q-en{font-family:var(--pixel);font-size:clamp(.45rem,.9vw,.6rem);line-height:1.8;color:var(--muted);display:block;margin-top:.25rem;}
.opts-grid{display:flex;flex-direction:column;gap:.6rem;}
.opt-box{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:.8rem 1rem;font-size:.82rem;display:flex;align-items:center;gap:.6rem;}
.opt-box.correct{border-color:var(--green);background:rgba(0,255,136,.07);}
.opt-letter{font-family:var(--pixel);font-size:.55rem;min-width:24px;color:var(--muted);}
.q-right{width:240px;display:flex;flex-direction:column;gap:.8rem;}
.ans-box,.lb-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;}
.box-title{font-family:var(--pixel);font-size:.38rem;color:var(--muted);letter-spacing:.1em;margin-bottom:.6rem;}
.ans-count{font-family:var(--pixel);font-size:2rem;color:var(--accent);}
.ans-sub{font-size:.72rem;color:var(--muted);}
.ans-bar-wrap{margin-top:.6rem;height:4px;background:var(--surface2);border-radius:2px;}
.ans-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}
.lb-box{flex:1;overflow:hidden;}
.lb-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;font-size:.78rem;}
.lb-rank{font-family:var(--pixel);font-size:.38rem;color:var(--muted);min-width:18px;}
.lb-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem;}
.lb-score{font-family:var(--pixel);font-size:.38rem;color:var(--accent);}
.host-controls{display:flex;gap:.8rem;margin-top:.8rem;}

/* ── RESULTS ── */
#results-screen{justify-content:center;align-items:center;}
.res-inner{width:100%;display:flex;gap:2.5rem;align-items:flex-start;justify-content:center;}
.res-left{flex:1;max-width:480px;}
.res-q-num{font-family:var(--pixel);font-size:.4rem;color:var(--muted);letter-spacing:.1em;margin-bottom:.8rem;}
.correct-box{background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.25);border-radius:10px;padding:1rem;margin-bottom:.8rem;}
.correct-box-lbl{font-family:var(--pixel);font-size:.38rem;color:var(--green);letter-spacing:.1em;margin-bottom:.4rem;}
.correct-box-text{font-size:.95rem;font-weight:500;}
.fun-fact-box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;font-size:.85rem;line-height:1.65;}
.res-right{width:260px;}
.full-lb{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;}
.full-lb-title{font-family:var(--pixel);font-size:.5rem;margin-bottom:.8rem;}
.flb-item{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.82rem;}
.flb-item:last-child{border:none;}
.flb-rank{font-size:.9rem;min-width:24px;}
.flb-name{flex:1;}
.flb-score{font-family:var(--pixel);font-size:.38rem;color:var(--accent);}
.flb-dept{font-size:.68rem;color:var(--muted);}

/* ── PODIUM ── */
#podium-screen{align-items:center;justify-content:center;text-align:center;}
#podium-screen h1{font-family:var(--pixel);font-size:1.2rem;color:var(--amber);text-shadow:0 0 20px var(--amber);margin-bottom:.3rem;}
.podium-stage{display:flex;align-items:flex-end;gap:1rem;margin:1.5rem 0;}
.p-block{display:flex;flex-direction:column;align-items:center;width:160px;}
.p-avatar{font-size:1.8rem;margin-bottom:.4rem;}
.p-pname{font-family:var(--pixel);font-size:.45rem;margin-bottom:.2rem;line-height:1.5;}
.p-pdept{font-size:.7rem;color:var(--muted);margin-bottom:.4rem;}
.p-pscore{font-size:.65rem;color:var(--muted);margin-bottom:.4rem;}
.p-bar{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px 8px 0 0;font-family:var(--pixel);font-size:1.5rem;font-weight:800;}
.pb1{background:rgba(255,204,0,.15);border:1px solid rgba(255,204,0,.4);height:120px;color:var(--amber);}
.pb2{background:rgba(200,200,200,.08);border:1px solid rgba(200,200,200,.3);height:85px;color:#9ca3af;}
.pb3{background:rgba(180,120,60,.08);border:1px solid rgba(180,120,60,.3);height:60px;color:#b4783c;}
.rest-list{display:flex;flex-direction:column;gap:.4rem;max-width:380px;}
.rest-item{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.5rem .8rem;font-size:.8rem;}
.rest-rank{font-family:var(--pixel);font-size:.38rem;color:var(--muted);min-width:22px;}
.rest-name{flex:1;}
.rest-score{font-family:var(--pixel);font-size:.38rem;color:var(--accent);}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes confetti{from{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}
.cfp{position:fixed;width:8px;height:8px;border-radius:2px;animation:confetti linear forwards;pointer-events:none;}

/* ── AUTH GATE ── */
#auth-gate{
  position:fixed;inset:0;z-index:9000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
#auth-box{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:340px;
}
#auth-logo{font-family:var(--pixel);font-size:1rem;color:var(--accent);text-shadow:0 0 20px var(--accent);}
#auth-sub{font-size:.75rem;color:var(--muted);margin-bottom:.5rem;}
#auth-input{
  width:100%;padding:.85rem 1rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:1rem;font-family:'DM Sans',sans-serif;
  outline:none;text-align:center;letter-spacing:.15em;
}
#auth-input:focus{border-color:var(--accent);}
#auth-btn{
  width:100%;padding:.85rem;
  background:var(--accent);border:none;border-radius:6px;
  color:#000;font-family:var(--pixel);font-size:.55rem;letter-spacing:.1em;
  cursor:pointer;transition:opacity .15s;
}
#auth-btn:hover{opacity:.85;}
#auth-err{font-family:var(--pixel);font-size:.4rem;color:var(--red);min-height:1rem;}

/* ── THEME TOGGLE ── */
.theme-toggle{
  position:fixed;top:1rem;right:1rem;z-index:10000;
  display:flex;gap:.3rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.3rem .4rem;
}
.t-btn{
  padding:.28rem .55rem;border-radius:4px;font-size:.5rem;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);
  font-family:var(--pixel);transition:all .15s;
}
.t-btn:hover{color:var(--text);}
.t-btn.active{background:var(--accent);color:#000;}
</style>
</head>
<body>
<div class="theme-toggle">
  <button class="t-btn" onclick="setTheme('dark')" id="t-dark">DARK</button>
  <button class="t-btn" onclick="setTheme('light')" id="t-light">LIGHT</button>
  <button class="t-btn" onclick="setTheme('hc')" id="t-hc">HC</button>
</div>
<div class="grid-bg"></div>

<!-- LOBBY -->
<div class="screen active" id="lobby-screen">
  <div class="logo">🌐 {{ app_name }}</div>
  <div class="tagline">{{ org_name }}{% if org_name %} — {% endif %}Host Panel</div>
  <div class="lobby-main">
    <div class="qr-box">
      <div class="qr-label">SCAN TO PLAY</div>
      <div id="qrcode"></div>
      <div class="qr-url" id="join-url"></div>
    </div>
    <div class="players-box">
      <div class="players-box-title">PLAYERS CONNECTED</div>
      <div class="player-count-big" id="player-count">0</div>
      <div class="player-count-sub">participants ready</div>
      <div class="p-chips" id="p-chips"></div>
    </div>
  </div>
  <div class="start-row">
    <button class="hbtn hbtn-primary" id="start-btn" disabled onclick="startGame()">▶ START GAME</button>
    <button class="hbtn hbtn-warning" onclick="clearLobby()">🧹 CLEAR LOBBY</button>
    <button class="hbtn hbtn-danger" onclick="clearScores()">🗑 CLEAR SCORES</button>
    <button class="hbtn hbtn-secondary" onclick="location.href='/scores'">📊 HISTORY</button>
  </div>
</div>

<!-- QUESTION -->
<div class="screen" id="question-screen">
  <div class="q-top">
    <span class="q-meta" id="q-meta">Q 1 / 5</span>
    <div class="timer-big" id="host-timer">15</div>
    <button class="hbtn hbtn-secondary" onclick="showResults()">RESULTS →</button>
  </div>
  <div class="q-body">
    <div class="q-left">
      <div class="q-text" id="host-q-text"></div>
      <div class="opts-grid" id="host-opts"></div>
    </div>
    <div class="q-right">
      <div class="ans-box">
        <div class="box-title">ANSWERED</div>
        <div class="ans-count" id="ans-count">0</div>
        <div class="ans-sub" id="ans-sub">of 0 players</div>
        <div class="ans-bar-wrap"><div class="ans-bar" id="ans-bar" style="width:0%"></div></div>
      </div>
      <div class="lb-box">
        <div class="box-title">LIVE RANKING</div>
        <div id="live-lb"></div>
      </div>
    </div>
  </div>
</div>

<!-- RESULTS -->
<div class="screen" id="results-screen">
  <div class="res-inner">
    <div class="res-left">
      <div class="res-q-num" id="res-q-num">QUESTION 1</div>
      <div class="correct-box">
        <div class="correct-box-lbl">✓ CORRECT ANSWER</div>
        <div class="correct-box-text" id="correct-ans-text"></div>
      </div>
      <div class="fun-fact-box" id="host-fun-fact"></div>
      <div style="display:flex;gap:.8rem;margin-top:1.2rem;">
        <button class="hbtn hbtn-primary" id="next-btn" onclick="nextQuestion()">NEXT →</button>
        <button class="hbtn hbtn-secondary" onclick="resetGame()">RESET</button>
      </div>
    </div>
    <div class="res-right">
      <div class="full-lb">
        <div class="full-lb-title">🏆 TOP 10</div>
        <div id="full-lb-list"></div>
      </div>
    </div>
  </div>
</div>

<!-- PODIUM -->
<div class="screen" id="podium-screen">
  <h1>🏆 GAME OVER!</h1>
  <div class="podium-stage" id="podium-stage"></div>
  <div class="rest-list" id="rest-list"></div>
  <div style="display:flex;gap:.8rem;margin-top:1.5rem;">
    <button class="hbtn hbtn-primary" onclick="resetGame()">▶ PLAY AGAIN</button>
    <button class="hbtn hbtn-secondary" onclick="location.href='/scores'">📊 FULL HISTORY</button>
  </div>
</div>

<script>
let ws, currentTotal = 0, currentQ = 0, timerInterval = null;

// ── QR CODE ──────────────────────────────────────────────────────────────────
const baseUrl = `${location.protocol}//${location.hostname}${location.port?':'+location.port:''}`;
document.getElementById('join-url').textContent = baseUrl;
new QRCode(document.getElementById('qrcode'), {
  text: baseUrl,
  width: 160, height: 160,
  colorDark: getComputedStyle(document.documentElement).getPropertyValue('--qr-dark').trim() || '#00c8ff',
  colorLight: getComputedStyle(document.documentElement).getPropertyValue('--qr-light').trim() || '#0d1117',
  correctLevel: QRCode.CorrectLevel.M
});

// ── WS ────────────────────────────────────────────────────────────────────────
function connectWS() {
  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
  ws = new WebSocket(`${proto}://${location.host}/ws/host`);
  ws.onmessage = e => handleMessage(JSON.parse(e.data));
  ws.onclose = () => setTimeout(connectWS, 2000);
}

function show(id) {
  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
  document.getElementById(id).classList.add('active');
}

function handleMessage(msg) {
  if (msg.type === 'lobby_update') {
    document.getElementById('player-count').textContent = msg.count;
    document.getElementById('start-btn').disabled = msg.count < 1;
    currentTotal = msg.count;
    const chips = document.getElementById('p-chips');
    chips.innerHTML = msg.players.map(p =>
      `<span class="p-chip">${p.display || p.name}</span>`).join('');
  }
  else if (msg.type === 'question') {
    currentQ = msg.number;
    document.getElementById('q-meta').textContent = `Q ${msg.number} / ${msg.total}`;
    const qParts = msg.q.split('\n\n[EN]');
    const qEs = qParts[0].trim();
    const qEn = qParts[1] ? qParts[1].trim() : '';
    document.getElementById('host-q-text').innerHTML =
      `<span class="q-es">${qEs}</span>${qEn ? `<span class="q-en">[EN] ${qEn}</span>` : ''}`;
    const letters = ['A','B','C','D'];
    const optColors = ['#5b9cf6','#cc44ff','#00ff88','#ffcc00'];
    document.getElementById('host-opts').innerHTML = msg.options.map((o,i) => {
      const parts = o.split(' / ');
      const oEs = parts[0] || o;
      const oEn = parts.slice(1).join(' / ') || '';
      return `<div class="opt-box" id="hopt-${i}" style="border-color:${optColors[i]};background:${optColors[i]}18">
        <span class="opt-letter" style="color:${optColors[i]}">${letters[i]}</span>
        <span><span style="display:block;font-size:.83rem">${oEs}</span>${oEn ? `<span style="display:block;font-size:.7rem;color:var(--muted)">${oEn}</span>` : ''}</span>
      </div>`;
    }).join('');
    document.getElementById('ans-count').textContent = '0';
    document.getElementById('ans-sub').textContent = `of ${currentTotal} players`;
    document.getElementById('ans-bar').style.width = '0%';
    document.getElementById('live-lb').innerHTML = '';
    show('question-screen');
    startTimer(msg.time_limit);
  }
  else if (msg.type === 'answer_update') {
    const pct = currentTotal > 0 ? (msg.answered / currentTotal * 100) : 0;
    document.getElementById('ans-count').textContent = msg.answered;
    document.getElementById('ans-sub').textContent = `of ${msg.total} players`;
    document.getElementById('ans-bar').style.width = pct + '%';
    // Live ranking from answer details
    const lb = document.getElementById('live-lb');
    lb.innerHTML = (msg.details || []).slice(0,10).map((d,i) =>
      `<div class="lb-item">
        <span class="lb-rank">${i+1}</span>
        <span class="lb-name">${d.name}</span>
        <span class="lb-score" style="color:${d.correct?'var(--green)':'var(--red)'}">${d.correct?d.elapsed+'s ✓':'✗'}</span>
      </div>`).join('');
  }
  else if (msg.type === 'results') {
    clearInterval(timerInterval);
    document.getElementById('res-q-num').textContent = `QUESTION ${currentQ} / 5`;
    document.getElementById('host-fun-fact').textContent = msg.fun_fact;
    const opts = document.querySelectorAll('#host-opts .opt-box');
    opts.forEach((o,i) => { if(i === msg.correct_idx) o.classList.add('correct'); });
    document.getElementById('correct-ans-text').textContent =
      opts[msg.correct_idx]?.textContent.trim().slice(1) || '';
    document.getElementById('next-btn').textContent = currentQ >= 5 ? 'PODIUM →' : 'NEXT →';
    // Top 10 leaderboard
    const medals = ['🥇','🥈','🥉'];
    document.getElementById('full-lb-list').innerHTML = msg.leaderboard.slice(0,10).map((p,i) =>
      `<div class="flb-item">
        <span class="flb-rank">${i<3?medals[i]:i+1}</span>
        <span class="flb-name">${p.name}<br><span class="flb-dept">${p.dept||''}</span></span>
        <span class="flb-score">${p.score.toLocaleString()}</span>
      </div>`).join('');
    show('results-screen');
  }
  else if (msg.type === 'podium') {
    clearInterval(timerInterval);
    buildPodium(msg.leaderboard);
  }
}

function startTimer(secs) {
  clearInterval(timerInterval);
  let rem = secs;
  const el = document.getElementById('host-timer');
  function tick() {
    el.textContent = rem;
    el.classList.toggle('urgent', rem <= 5);
    if(rem <= 0) clearInterval(timerInterval);
    rem--;
  }
  tick();
  timerInterval = setInterval(tick, 1000);
}

function startGame() { ws.send(JSON.stringify({type:'start_game'})); nextQuestion(); }
function nextQuestion() { ws.send(JSON.stringify({type:'next_question'})); }
function showResults() { clearInterval(timerInterval); ws.send(JSON.stringify({type:'show_results'})); }
function resetGame() { clearInterval(timerInterval); ws.send(JSON.stringify({type:'reset'})); show('lobby-screen'); }

async function clearScores() {
  if (!confirm('¿Borrar todos los scores guardados? Esta acción no se puede deshacer.')) return;
  const r = await fetch('/api/scores/clear', {method:'DELETE'});
  if (r.ok) alert('Scores borrados.');
  else alert('Error al borrar scores.');
}

function clearLobby() {
  if (!confirm('¿Remover todos los jugadores del lobby? Los jugadores serán enviados de regreso al join screen.')) return;
  ws.send(JSON.stringify({type: 'clear_lobby'}));
}

function buildPodium(lb) {
  const medals = ['🥇','🥈','🥉'];
  const pbClass = ['pb1','pb2','pb3'];
  const order = [1,0,2];
  const stage = document.getElementById('podium-stage');
  stage.innerHTML = order.map(i => {
    const p = lb[i]; if(!p) return '';
    return `<div class="p-block">
      <div class="p-avatar">${medals[i]}</div>
      <div class="p-pname">${p.name}</div>
      <div class="p-pdept">${p.dept||''}</div>
      <div class="p-pscore">${p.score.toLocaleString()} pts</div>
      <div class="p-bar ${pbClass[i]}">${i+1}</div>
    </div>`;
  }).join('');
  document.getElementById('rest-list').innerHTML = lb.slice(3).map((p,i) =>
    `<div class="rest-item">
      <span class="rest-rank">${i+4}</span>
      <span class="rest-name">${p.name} <span style="color:var(--muted);font-size:.72rem;">${p.dept||''}</span></span>
      <span class="rest-score">${p.score.toLocaleString()}</span>
    </div>`).join('');
  show('podium-screen');
  confetti();
}

function confetti() {
  const colors = ['#00c8ff','#cc44ff','#00ff88','#ffcc00','#fff'];
  for(let i=0;i<80;i++) {
    setTimeout(()=>{
      const el = document.createElement('div');
      el.className = 'cfp';
      el.style.cssText = `left:${Math.random()*100}vw;background:${colors[Math.floor(Math.random()*colors.length)]};animation-duration:${2+Math.random()*2}s;top:-10px;`;
      document.body.appendChild(el);
      setTimeout(()=>el.remove(), 4000);
    }, i*40);
  }
}

// ── THEME ─────────────────────────────────────────────────────────────────────
function setTheme(t) {
  document.documentElement.setAttribute('data-theme', t);
  localStorage.setItem('si-quiz-theme', t);
  document.querySelectorAll('.t-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('t-' + t)?.classList.add('active');
}
(function(){ setTheme(localStorage.getItem('si-quiz-theme') || 'dark'); })();

// ── AUTH ─────────────────────────────────────────────────────────────────────
const HOST_PASSWORD = '{{ host_password }}';

function checkAuth() {
  const saved = sessionStorage.getItem('host_auth');
  if (saved === HOST_PASSWORD) { connectWS(); return; }

  // Build gate overlay
  const gate = document.createElement('div');
  gate.id = 'auth-gate';
  gate.innerHTML = `
    <div id="auth-box">
      <div id="auth-logo">🌐 {{ app_name }}</div>
      <div id="auth-sub">Host Panel · Acceso restringido</div>
      <input id="auth-input" type="password" placeholder="contraseña" autocomplete="off" />
      <button id="auth-btn">ENTRAR →</button>
      <div id="auth-err"></div>
    </div>`;
  document.body.appendChild(gate);

  const input = document.getElementById('auth-input');
  const btn   = document.getElementById('auth-btn');
  const err   = document.getElementById('auth-err');

  function attempt() {
    if (input.value === HOST_PASSWORD) {
      sessionStorage.setItem('host_auth', HOST_PASSWORD);
      gate.remove();
      connectWS();
    } else {
      err.textContent = 'contraseña incorrecta';
      input.value = '';
      input.focus();
      setTimeout(() => err.textContent = '', 2000);
    }
  }
  btn.addEventListener('click', attempt);
  input.addEventListener('keydown', e => { if (e.key === 'Enter') attempt(); });
  input.focus();
}

checkAuth();
</script>
</body>
</html>