*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#060B18;font-family:'Space Grotesk',sans-serif;color:#fff;}
canvas{display:block;width:100%;height:100%;position:fixed;top:0;left:0;z-index:1;}

/* Overlays */
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(6,11,24,0.85);backdrop-filter:blur(12px);}
.overlay.hidden{display:none;}
.panel{text-align:center;max-width:480px;padding:2.5rem 2rem;}
.panel-logo{width:100px;height:100px;border-radius:50%;margin:0 auto 1.5rem;border:3px solid #627EEA;box-shadow:0 0 40px rgba(98,126,234,0.35);}
.panel h1{font-size:2rem;font-weight:800;margin-bottom:.8rem;background:linear-gradient(135deg,#F5A623,#8BA0F0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.panel h2{font-size:1.6rem;font-weight:700;margin-bottom:1rem;}
.panel-desc{font-size:.9rem;color:#94A3B8;line-height:1.7;margin-bottom:1.5rem;}
.panel-controls{font-size:.8rem;color:#64748B;margin-bottom:1.5rem;}
.panel-quote{font-size:.8rem;color:#F5A623;font-style:italic;margin-top:1.2rem;}
.btn-play{
  display:inline-block;padding:14px 40px;border-radius:50px;border:none;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,#627EEA,#4A63C8);color:#fff;
  transition:transform .3s,box-shadow .3s;
}
.btn-play:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(98,126,234,0.4);}
.btn-share{
  display:inline-block;padding:14px 40px;border-radius:50px;
  font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,#F5A623,#D4891A);color:#060B18;
  transition:transform .3s,box-shadow .3s;
}
.btn-share:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(245,166,35,0.3);}
.btn-back{display:block;margin-top:1rem;font-size:.8rem;color:#64748B;transition:color .3s;}
.btn-back:hover{color:#F5A623;}
.end-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;}
.score-display{display:flex;gap:2rem;justify-content:center;margin-bottom:1rem;}
.score-item{display:flex;flex-direction:column;align-items:center;}
.score-label{font-size:.7rem;color:#64748B;text-transform:uppercase;letter-spacing:1px;}
.score-val{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,#F5A623,#8BA0F0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Question popup */
.q-card{
  background:rgba(17,26,48,0.95);border:1px solid rgba(98,126,234,0.3);
  border-radius:20px;padding:2.5rem 2rem;max-width:500px;text-align:center;
  animation:qPop .4s ease-out;
}
@keyframes qPop{0%{transform:scale(0.7);opacity:0;}100%{transform:scale(1);opacity:1;}}
.q-num{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#627EEA;margin-bottom:.8rem;}
.q-text{font-size:1.15rem;font-weight:600;line-height:1.6;color:#FFD580;margin-bottom:1rem;}
.q-hint{font-size:.75rem;color:#64748B;font-style:italic;}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:5;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;}
.hud.hidden{display:none;}
.hud-left{display:flex;gap:1.5rem;align-items:center;}
.hud-score{font-size:1.4rem;font-weight:800;color:#F5A623;}
.hud-dist{font-size:.85rem;color:#64748B;}
.hud-right{display:flex;gap:4px;}
.hud-questions{display:flex;gap:4px;}
.hud-q{width:24px;height:24px;border-radius:50%;border:2px solid #627EEA;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#627EEA;transition:all .3s;}
.hud-q.collected{background:#F5A623;border-color:#F5A623;color:#060B18;}

@media(max-width:600px){
  .panel{padding:2rem 1.5rem;}
  .panel h1{font-size:1.5rem;}
  .score-display{gap:1rem;}
  .score-val{font-size:1.4rem;}
}