:root{
  --bg1:#050607;
  --bg2:#0f1413;
  --accent:#00ff77;
  --accent2:#00d4ff;
  --danger:#ff4d4d;
  --card:#0b0f0e;
  --muted:#9aa6a4;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Orbitron',sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#e6fff3}

.app{max-width:980px;margin:20px auto;padding:16px}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand h1{margin:0;color:var(--accent);font-size:1.6rem;letter-spacing:1px}
.subtitle{margin:0;color:var(--accent2);font-size:0.95rem}

.ui-top{display:flex;gap:10px;align-items:center}
.stat{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:8px;border:1px solid rgba(0,255,119,0.06);font-size:0.92rem}
.small{font-size:0.85rem}

.main-area{margin-top:18px}
.card{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(0,255,119,0.06);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.center{text-align:center}

.controls{display:flex;gap:12px;justify-content:center;align-items:center;margin:10px 0}
.controls label{font-size:0.9rem;color:var(--muted)}
.controls select{margin-left:8px;padding:6px;border-radius:6px;background:#07100f;border:1px solid rgba(255,255,255,0.04);color:#e6fff3}

.btn{padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent),#7dffb7);color:#00110b;box-shadow:0 6px 18px rgba(0,255,119,0.12)}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn:disabled{opacity:0.5;cursor:not-allowed}

.question-card{position:relative}
.question-top{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.progress{height:8px;background:rgba(255,255,255,0.03);border-radius:12px;overflow:hidden}
#progressFill{height:100%;width:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));transform-origin:left;transition:width 0.2s linear}

.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:0.9rem}

.question-text{font-size:1.2rem;margin:8px 0;color:#dfffe9}

.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.options-grid button{padding:12px;border-radius:10px;background:#07100f;border:2px solid rgba(0,212,255,0.12);color:var(--accent2);font-weight:700;cursor:pointer;transition:all 0.18s ease;min-height:54px}
.options-grid button:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,212,255,0.06)}

.options-grid button.correct{background:linear-gradient(90deg,var(--accent),#6cf2a2);border-color:var(--accent);color:#041009;font-size:1.05rem;box-shadow:0 10px 30px rgba(0,255,119,0.15);transform:scale(1.03)}
.options-grid button.wrong{background:linear-gradient(90deg,#ff6b6b,#ff3b3b);border-color:var(--danger);color:#fff;font-size:1.02rem;box-shadow:0 8px 24px rgba(255,77,77,0.12)}

.action-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px}
.counters{display:flex;gap:12px;color:var(--muted);font-weight:700}

.feedback{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:60;display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,0.48);padding:18px;border-radius:14px;border:2px solid rgba(255,255,255,0.04);backdrop-filter:blur(6px)}
.feedback .icon{font-size:5rem;color:var(--accent);width:160px;height:160px;display:flex;align-items:center;justify-content:center;border-radius:100%;background:linear-gradient(180deg,rgba(0,255,119,0.08),rgba(0,255,119,0.02));box-shadow:0 18px 50px rgba(0,255,119,0.06)}
.feedback .text{margin-top:12px;font-size:1.2rem;color:#eafef0}

.hidden{display:none}

/* Result Grid */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.tile{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;text-align:center}
.tile h3{margin:0;color:var(--muted);font-size:0.95rem}
.tile p{font-size:1.4rem;margin:6px 0 0 0;color:var(--accent)}

.result-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* Responsive */
@media(max-width:640px){
  .options-grid{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr 1fr}
  .brand h1{font-size:1.2rem}
}