:root{--bg:#05060c;--card:#0b1220;--accent:#7c5cff;--accent2:#00d4ff;--text:#eaf6ff}
*{box-sizing:border-box}
.body-fix-wrapper {}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,-apple-system,Arial;background:linear-gradient(180deg,#061018 0%, #03040a 100%);color:var(--text);min-height:100vh}
/* make the app container fully centered on the viewport */
.app{max-width:920px;margin:0 auto;padding:18px;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}
.board{max-width:720px;width:100%}
.hud{justify-content:center}
.hud div{min-width:90px;text-align:center}

/* hint button slight style */
.controls #hintBtn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#021;border:none}

/* small timer display for speed rounds */
.timer-bar{height:8px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:hidden;margin-top:8px}
.timer-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:100%;transition:width .2s linear}

/* Badge popup */
.badge-popup{position:fixed;left:50%;top:18%;transform:translateX(-50%) translateY(-10px);background:linear-gradient(90deg,var(--accent),var(--accent2));color:#021;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 20px 60px rgba(2,6,23,0.6);opacity:0;pointer-events:none;z-index:200;transition:opacity .3s,transform .4s}
.badge-popup.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.badge-icon{display:inline-block;width:36px;height:36px;border-radius:8px;background:#fff;margin-right:10px;vertical-align:middle}
.app-header h1{margin:0 0 6px;font-size:20px}
.muted{color:rgba(234,246,255,0.7)}
.setup{display:flex;gap:10px;align-items:center;margin:14px 0}
.setup label{font-weight:700}
/* improved dropdown contrast for readability */
select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg, rgba(2,6,23,0.7), rgba(7,12,22,0.6));color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none}
select:focus{outline:2px solid rgba(124,92,255,0.28);outline-offset:2px}
/* option styling (best-effort; some UAs ignore option rules) */
option{background:var(--card);color:var(--text)}
.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;padding:10px 14px;border-radius:10px;color:#041018;font-weight:800;cursor:pointer}
.game{margin-top:18px}
.hud{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.board{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}

.choices{display:flex;gap:8px;margin-top:10px}
.choices button{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);cursor:pointer;font-weight:700}
.choices button.correct{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041018}
.choices button.wrong{opacity:0.6}
.progress-wrap{height:8px;background:rgba(255,255,255,0.03);border-radius:999px;margin-top:12px;overflow:hidden}
#progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .36s ease}
.question{font-size:24px;font-weight:800;margin-bottom:10px}
form{display:flex;gap:8px}
input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);flex:1}
.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:10px;color:var(--text);cursor:pointer}
.feedback{margin-top:8px;min-height:22px}
.hidden{display:none}
.app-footer{margin-top:16px;text-align:center;font-size:13px}

@media (max-width:640px){.app{padding:12px;margin:12px}.question{font-size:20px}}