/* ═══ IQ TEST ═══ */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--green:#00ff41;--green-d:#00cc33;--red:#ff3333;--yellow:#ccff00;--text:#e0ffe8;--text-dim:#5a7a60;--radius:18px;--radius-sm:12px}

body{font-family:'JetBrains Mono',monospace;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;overflow-y:auto;background-image:linear-gradient(rgba(0,255,65,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,65,.03) 1px,transparent 1px);background-size:32px 32px}
body::after{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,.015) 2px,rgba(0,255,65,.015) 4px);z-index:9999}

.sound-btn{position:fixed;top:16px;right:16px;z-index:10000;width:44px;height:44px;border:1px solid #00ff4130;border-radius:8px;background:rgba(10,10,10,.85);backdrop-filter:blur(8px);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text)}
.sound-btn:hover{border-color:var(--green);box-shadow:0 0 20px rgba(0,255,65,.2);transform:scale(1.08)}
.sound-btn--off{opacity:.5}

.quiz-container{width:100%;max-width:500px;min-height:100vh;padding:32px 16px;display:flex;align-items:center}
.screen{display:none;flex-direction:column;align-items:center;width:100%;animation:glitchIn .4s cubic-bezier(.22,1,.36,1) both}
.screen--active{display:flex}
@keyframes glitchIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

.start-brain{font-size:80px;margin-bottom:20px;animation:pulse 2.5s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(0,255,65,.4))}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.start-title{font-size:2.6rem;font-weight:700;color:var(--green);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 20px rgba(0,255,65,.4)}
.start-subtitle{font-size:.9rem;color:var(--text-dim);margin-bottom:24px}
.start-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.badge{padding:6px 14px;border-radius:4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--green-d);background:rgba(0,255,65,.06);color:var(--green)}
.btn-start{display:inline-flex;align-items:center;gap:10px;padding:14px 40px;border:2px solid var(--green);border-radius:4px;background:transparent;color:var(--green);font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:all .2s ease}
.btn-start:hover{box-shadow:0 0 20px rgba(0,255,65,.3)}
.btn-start:active{transform:scale(.97)}
.btn-restart{margin-top:12px}

.q-top{display:flex;justify-content:space-between;width:100%;margin-bottom:12px}
.q-counter-pill,.q-score-pill{padding:6px 14px;border-radius:4px;font-size:.78rem;font-weight:700;letter-spacing:.06em;border:1px solid #00ff4140}
.q-counter-pill{background:var(--surface);color:var(--text-dim)}
.q-score-pill{background:rgba(204,255,0,.08);color:var(--yellow);border-color:rgba(204,255,0,.3)}
.q-progress-wrap{width:100%;margin-bottom:16px}
.q-progress{width:100%;height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;border:1px solid #00ff4120}
.q-progress__fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .5s ease;box-shadow:0 0 12px rgba(0,255,65,.5)}
.q-card{width:100%;background:var(--surface);border:1px solid #00ff4125;border-radius:var(--radius);padding:28px 20px 24px;text-align:center}
.q-category{display:inline-block;padding:5px 14px;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:rgba(0,255,65,.08);color:var(--green);border:1px solid rgba(0,255,65,.25);margin-bottom:16px}
.q-text{font-size:1.1rem;font-weight:700;line-height:1.55;margin-bottom:24px}
.q-answers{display:flex;flex-direction:column;gap:10px}
.answer-btn{width:100%;padding:14px 18px;border:1px solid #00ff4125;border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-family:inherit;font-size:.88rem;font-weight:600;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .15s ease}
.answer-btn:hover:not(.answer-btn--disabled){border-color:var(--green);background:rgba(0,255,65,.06);box-shadow:0 0 16px rgba(0,255,65,.1);transform:translateX(6px)}
.answer-btn__letter{width:28px;height:28px;border-radius:4px;background:rgba(0,255,65,.06);border:1px solid #00ff4130;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:var(--green);flex-shrink:0}
.answer-btn--correct{border-color:var(--green)!important;background:rgba(0,255,65,.1)!important;box-shadow:0 0 20px rgba(0,255,65,.2)!important}
.answer-btn--correct .answer-btn__letter{background:var(--green)!important;color:#000!important}
.answer-btn--wrong{border-color:var(--red)!important;background:rgba(255,51,51,.1)!important;animation:shake .4s ease}
.answer-btn--wrong .answer-btn__letter{background:var(--red)!important;color:#fff!important}
.answer-btn--disabled{cursor:default;opacity:.3}
.answer-btn--disabled.answer-btn--correct,.answer-btn--disabled.answer-btn--wrong{opacity:1}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

.q-timer-wrap{display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;padding-top:20px}
.q-timer{flex:1;height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;border:1px solid #00ff4115}
.q-timer__fill{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));border-radius:99px;transition:width .1s linear}
.q-timer-sec{font-size:.82rem;font-weight:700;color:var(--text-dim);min-width:24px;text-align:right}

.result-emoji{font-size:76px;margin-bottom:12px;animation:pop .7s cubic-bezier(.22,1,.36,1) both;filter:drop-shadow(0 0 30px rgba(0,255,65,.3))}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.result-title{font-size:1.6rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;text-shadow:0 0 20px rgba(0,255,65,.3)}
.result-iq-circle{width:130px;height:130px;border-radius:50%;border:3px solid var(--green);background:rgba(0,255,65,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 0 30px rgba(0,255,65,.15)}
.result-iq-num{font-size:2.6rem;font-weight:700;color:var(--green);line-height:1}
.result-iq-label{font-size:.8rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em}
.result-bar-wrap{width:100%;max-width:320px;height:8px;background:var(--surface2);border-radius:99px;overflow:hidden;margin-bottom:10px;border:1px solid #00ff4115}
.result-bar{height:100%;width:0;border-radius:99px;background:var(--green);transition:width 1.2s ease;box-shadow:0 0 12px rgba(0,255,65,.5)}
.result-msg{color:var(--text-dim);font-size:.85rem;margin-bottom:28px}

.result-stats{display:flex;gap:10px;margin-bottom:20px}
.stat-card{display:flex;flex-direction:column;align-items:center;padding:12px 20px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid #00ff4120}
.stat-card__num{font-size:1.5rem;font-weight:700;line-height:1}
.stat-card__label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-top:4px}
.stat-card--correct .stat-card__num{color:var(--green)}
.stat-card--wrong .stat-card__num{color:var(--red)}
.stat-card--score .stat-card__num{color:var(--yellow)}

/* ═══ CHART ═══ */
.chart-box{width:100%;max-width:460px;background:var(--surface);border:1px solid #00ff4125;border-radius:var(--radius-sm);padding:16px;margin-bottom:20px;text-align:center;overflow-x:auto}
.chart-header{font-size:.82rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.chart-compare{font-size:.8rem;font-weight:700;margin-bottom:10px;min-height:18px}
.chart-compare--up{color:var(--green)}
.chart-compare--down{color:var(--red)}
.chart-compare--same{color:var(--text-dim)}
.chart-box canvas{display:block;max-width:100%;margin:0 auto}

.particle{position:fixed;pointer-events:none;font-size:24px;z-index:998;animation:floatUp 1.2s ease-out forwards}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-100px) scale(.3)}}

@media(max-width:500px){.quiz-container{padding:20px 10px}.start-title{font-size:2rem}.q-text{font-size:.95rem}.btn-start{padding:12px 28px;font-size:.85rem}.sound-btn{top:10px;right:10px;width:38px;height:38px;font-size:1.1rem}}