feat: update quiz templates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

templates/host.html

@@ -10,14 +10,14 @@
 @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:#000510;--surface:#0d1117;--surface2:#161b22;
-  --accent:#00c8ff;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff;
-  --text:#e8edf5;--muted:#6b7a99;--border:rgba(255,255,255,0.08);
+  --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;}
-body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);pointer-events:none;z-index:9999;}
-.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,200,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
+.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;}
@@ -53,6 +53,8 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
 .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;}
@@ -62,8 +64,10 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
 .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{font-family:var(--pixel);font-size:clamp(.55rem,1.2vw,.75rem);line-height:2;margin-bottom:1.2rem;color:var(--text);}
-.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
+.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);}
@@ -175,6 +179,7 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
   </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>
@@ -280,11 +285,22 @@ function handleMessage(msg) {
   else if (msg.type === 'question') {
     currentQ = msg.number;
     document.getElementById('q-meta').textContent = `Q ${msg.number} / ${msg.total}`;
-    document.getElementById('host-q-text').textContent = msg.q;
+    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'];
-    document.getElementById('host-opts').innerHTML = msg.options.map((o,i) =>
-      `<div class="opt-box" id="hopt-${i}"><span class="opt-letter">${letters[i]}</span>${o}</div>`
-    ).join('');
+    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%';
@@ -357,6 +373,11 @@ async function clearScores() {
   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'];