:root{
  --bg-deep:#04051a;
  --bg-mid:#0c1140;
  --panel:#101a5c;
  --panel-2:#161f6e;
  --indigo:#1b2470;
  --gold:#f4c430;
  --gold-bright:#ffe27a;
  --amber:#ff9d2f;
  --text:#f2f0e6;
  --text-dim:#b9c0e8;
  --correct:#2ecc71;
  --wrong:#ff4d4d;
  --locked:#3b6fd1;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Verdana, system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(244,196,48,0.06), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(59,111,209,0.10), transparent 45%),
    radial-gradient(circle at 50% 50%, var(--bg-mid), var(--bg-deep) 75%);
  min-height:100vh;
}
.app{ max-width:1200px; margin:0 auto; padding:22px 18px 60px; }
.brand{ text-align:center; margin-bottom:18px; }
.brand .institute-tag{ margin:0 0 8px; color:var(--gold-bright); font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; font-weight:600;}
.brand h1{
  font-family:var(--serif); font-size:2.2rem; letter-spacing:1px; margin:0;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(244,196,48,0.25);
}
.brand p.sub{ margin:6px 0 0; color:var(--text-dim); font-size:0.95rem; letter-spacing:1px;}

.card{
  max-width:640px; margin:24px auto; background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid rgba(244,196,48,0.35); border-radius:18px; padding:30px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.card h2{ font-family:var(--serif); color:var(--gold-bright); margin-top:0; font-size:1.3rem;}
.card p{ color:var(--text-dim); font-size:0.92rem; line-height:1.6;}
.card code{ background:rgba(0,0,0,0.35); padding:1px 6px; border-radius:4px; color:var(--gold-bright); font-size:0.85em;}

select, input[type=file], input[type=text], input[type=number]{
  font-family:var(--sans); font-size:0.95rem; border-radius:8px; border:1px solid rgba(244,196,48,0.4);
  background:rgba(0,0,0,0.3); color:var(--text); padding:9px 12px; width:100%;
}
label{ display:block; color:var(--text-dim); font-size:0.88rem; margin:14px 0 6px;}
.btn{
  cursor:pointer; font-weight:600; letter-spacing:0.5px; font-family:var(--sans); font-size:0.95rem;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#1a1200; border:none; padding:12px 22px; border-radius:10px;
  box-shadow:0 6px 18px rgba(244,196,48,0.25);
  transition:transform 0.15s, box-shadow 0.15s;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 10px 24px rgba(244,196,48,0.35);}
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn.secondary{ background:transparent; color:var(--gold-bright); border:1px solid rgba(244,196,48,0.5); box-shadow:none;}
.btn.danger{ background:linear-gradient(180deg,#ff8a8a,var(--wrong)); color:#2a0000;}
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
.checkbox-row{ display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--text-dim); font-size:0.88rem;}
.checkbox-row input{ width:auto; }

.msg{ margin-top:14px; padding:10px 14px; border-radius:8px; font-size:0.88rem; }
.msg.ok{ background:rgba(46,204,113,0.12); color:var(--correct); border:1px solid rgba(46,204,113,0.35);}
.msg.err{ background:rgba(255,77,77,0.12); color:var(--wrong); border:1px solid rgba(255,77,77,0.35);}
.stat{ text-align:center; color:var(--text-dim); font-size:0.9rem; margin-top:10px;}
.stat b{ color:var(--gold-bright); font-family:var(--serif); font-size:1.1rem;}
.nav-links{ text-align:center; margin-top:16px; }
.nav-links a{ color:var(--gold-bright); text-decoration:none; font-size:0.88rem; margin:0 10px;}
.nav-links a:hover{ text-decoration:underline; }

/* ---------- GAME SCREEN ---------- */
.game-wrap{ display:grid; grid-template-columns: 1fr 240px; gap:22px; align-items:start;}
@media(max-width:880px){ .game-wrap{ grid-template-columns:1fr; } .side-panel{ order:3; } }

.top-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.lifelines{ display:flex; gap:10px; }
.lifeline-btn{
  width:54px; height:54px; border-radius:50%; border:2px solid var(--gold);
  background:radial-gradient(circle at 35% 30%, var(--panel-2), var(--panel));
  color:var(--gold-bright); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.lifeline-btn:hover:not(:disabled){ transform:scale(1.08); box-shadow:0 0 18px rgba(244,196,48,0.5);}
.lifeline-btn:disabled{ opacity:0.25; cursor:not-allowed; filter:grayscale(1);}
.prize-current{ font-family:var(--serif); font-size:1.1rem; color:var(--gold-bright); text-align:right;}
.prize-current small{ display:block; color:var(--text-dim); font-size:0.7rem; letter-spacing:1px; font-family:var(--sans);}

.timer-bar-outer{ height:6px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; margin-bottom:6px;}
.timer-bar-inner{ height:100%; background:linear-gradient(90deg, var(--gold), var(--amber)); width:100%; transition:width 1s linear;}
.timer-bar-inner.low{ background:linear-gradient(90deg, var(--wrong), #ff8a8a); }
.timer-label{ text-align:center; font-size:0.78rem; color:var(--text-dim); margin-bottom:14px;}

.question-hex{
  position:relative; background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border-radius:16px; border:1px solid rgba(244,196,48,0.3);
  padding:26px; margin-bottom:22px; min-height:110px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
.question-hex.locking{ animation:pulseGlow 0.9s infinite alternate; }
@keyframes pulseGlow{
  from{ box-shadow:0 12px 40px rgba(0,0,0,0.45), 0 0 0 rgba(244,196,48,0.0);}
  to{ box-shadow:0 12px 40px rgba(0,0,0,0.45), 0 0 34px rgba(244,196,48,0.55);}
}
.question-hex .qnum{ position:absolute; top:-12px; left:20px; background:var(--gold); color:#1a1200;
  font-weight:700; font-size:0.8rem; padding:4px 12px; border-radius:20px; font-family:var(--serif);}
.question-text{ font-family:var(--serif); font-size:1.2rem; line-height:1.5; }

.options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .options-grid{ grid-template-columns:1fr; } }
.option-btn{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(160deg, var(--panel-2), var(--indigo));
  border:1px solid rgba(244,196,48,0.25); border-radius:12px; padding:14px 16px;
  color:var(--text); font-size:1rem; cursor:pointer; transition:all 0.15s;
}
.option-btn:hover:not(:disabled){ border-color:var(--gold-bright); background:linear-gradient(160deg,#1c2680,#141c66); transform:translateX(3px);}
.option-btn .tag{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; color:var(--gold-bright); font-size:0.9rem;
}
.option-btn.selected{ border-color:var(--locked); background:linear-gradient(160deg,#22307f, #182566); box-shadow:0 0 16px rgba(59,111,209,0.5);}
.option-btn.correct{ border-color:var(--correct); background:linear-gradient(160deg,#12401f,#0d3018); box-shadow:0 0 20px rgba(46,204,113,0.5);}
.option-btn.wrong{ border-color:var(--wrong); background:linear-gradient(160deg,#4a1414,#330d0d); box-shadow:0 0 20px rgba(255,77,77,0.5);}
.option-btn.faded{ opacity:0.15; pointer-events:none; }
.option-btn:disabled{ cursor:default; }

.action-row{ display:flex; justify-content:center; gap:14px; margin-top:22px; flex-wrap:wrap;}

.poll-panel{ margin-top:16px; background:rgba(0,0,0,0.25); border-radius:12px; padding:14px 16px; display:none;}
.poll-panel.show{ display:block; }
.poll-row{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:0.85rem; }
.poll-row .lbl{ width:22px; font-family:var(--serif); color:var(--gold-bright); }
.poll-bar-outer{ flex:1; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; height:16px;}
.poll-bar-inner{ height:100%; background:linear-gradient(90deg,var(--amber),var(--gold)); width:0%; transition:width 0.8s ease;}
.poll-row .pct{ width:34px; text-align:right; color:var(--text-dim); font-size:0.8rem;}

.side-panel{ display:flex; flex-direction:column; gap:16px; }
.lifelines-panel, .grid-panel{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid rgba(244,196,48,0.3); border-radius:16px; padding:16px 14px;
}
.lifelines-panel h3, .grid-panel h3{
  text-align:left; font-family:var(--serif); color:var(--gold-bright); margin:0 0 12px; font-size:0.85rem;
  letter-spacing:1px; text-transform:uppercase;
}
.life-btn{
  display:block; width:100%; background:transparent; border:1px solid rgba(244,196,48,0.5);
  color:var(--gold-bright); border-radius:10px; padding:11px 10px; font-weight:600; font-size:0.8rem;
  letter-spacing:0.3px; margin-bottom:10px; cursor:pointer; font-family:var(--sans); transition:all 0.15s;
}
.life-btn:last-child{ margin-bottom:0; }
.life-btn:hover:not(:disabled){ background:rgba(244,196,48,0.12); transform:translateY(-1px); }
.life-btn:disabled{ opacity:0.3; text-decoration:line-through; cursor:not-allowed; }

.grid-panel{ max-height:640px; overflow-y:auto; }
.qgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.qcell{
  aspect-ratio:1; border-radius:6px; border:none; font-size:0.7rem; font-weight:700;
  color:var(--text-dim); background:rgba(0,0,0,0.28); display:flex; align-items:center; justify-content:center;
}
.qcell.current{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1a1200; }
.qcell.done-correct{ background:rgba(46,204,113,0.85); color:#062b13; }
.qcell.done-wrong{ background:rgba(255,77,77,0.85); color:#330d0d; }

/* ---------- PAUSE OVERLAY (phone-a-friend / audience poll) ---------- */
.pause-overlay{
  position:fixed; inset:0; background:rgba(2,3,15,0.88); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:50; flex-direction:column; text-align:center; padding:20px;
}
.pause-overlay.show{ display:flex; }
.pause-overlay .icon{ font-size:3rem; margin-bottom:10px; }
.pause-overlay h3{ font-family:var(--serif); color:var(--gold-bright); font-size:1.4rem; margin:0 0 8px;}
.pause-overlay p{ color:var(--text-dim); margin:0 0 18px; max-width:420px;}
.pause-countdown{
  font-family:var(--serif); font-size:2.6rem; color:var(--gold-bright);
  text-shadow:0 0 24px rgba(244,196,48,0.5);
}

/* ---------- END SCREEN ---------- */
.end-card{
  max-width:560px; margin:60px auto; text-align:center;
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid rgba(244,196,48,0.35); border-radius:18px; padding:40px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.end-card .headline{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-bright); margin-bottom:6px;}
.end-card .amount{ font-family:var(--serif); font-size:2.2rem; margin:14px 0; color:var(--gold-bright);
  text-shadow:0 0 30px rgba(244,196,48,0.4);}
.end-card p.sub{ color:var(--text-dim); }

.hidden{ display:none !important; }
footer{ text-align:center; margin-top:40px; color:rgba(255,255,255,0.25); font-size:0.75rem;}