:root { --navy:#14213d; --ink:#26344e; --blue:#4d7cff; --mint:#dff7e9; --green:#1ca877; --rose:#fff0f0; --red:#e65757; --paper:#fffdf8; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; background:#f7f2e9; color:var(--ink); font-family:Nunito, sans-serif; }
body::before, body::after { content:""; position:fixed; z-index:-1; border-radius:50%; opacity:.45; filter:blur(2px); }
body::before { width:310px; height:310px; background:#d9e5ff; top:-135px; right:-85px; }
body::after { width:260px; height:260px; background:#ffe0b5; bottom:-135px; left:-80px; }
.app { width:min(940px, calc(100% - 32px)); margin:0 auto; padding:38px 0 48px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.header-actions { display:flex; gap:12px; align-items:center; }
.brand { display:flex; gap:12px; align-items:center; color:var(--navy); font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:23px; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--blue); color:white; font-size:25px; box-shadow:0 6px 0 #355bd0; }
.level { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ebe6db; border-radius:20px; padding:8px 13px; font-size:14px; font-weight:800; }
.operation-panel { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.operation-label { color:#7f8798; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.operation-buttons { display:flex; gap:8px; }
.operation-button { border:0; background:#f4f6fb; color:var(--ink); width:44px; height:44px; border-radius:14px; font:800 20px "Space Grotesk", sans-serif; cursor:pointer; transition:.15s; }
.operation-button:hover { background:#e6edff; }
.operation-button.active, .operation-button[aria-pressed="true"] { background:var(--blue); color:#fff; box-shadow:0 4px 0 #3159d2; }
select { border:0; background:transparent; color:var(--blue); font:inherit; outline:none; cursor:pointer; }
.game { display:grid; grid-template-columns:1.35fr .85fr; gap:22px; }
.card { background:var(--paper); border:1px solid #e9e2d7; border-radius:26px; box-shadow:0 16px 40px rgba(51,47,40,.08); }
.question-card { min-height:510px; padding:34px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.eyebrow { align-self:stretch; display:flex; justify-content:space-between; color:#7f8798; font-size:14px; font-weight:800; }
.question { color:var(--navy); font-family:"Space Grotesk", sans-serif; font-size:clamp(52px, 10vw, 84px); letter-spacing:-4px; font-weight:700; margin:58px 0 28px; }
.answer-row { display:flex; width:min(100%, 380px); gap:10px; }
input { width:100%; border:2px solid #dfe4ee; border-radius:15px; padding:14px 16px; text-align:center; font:800 28px "Space Grotesk", sans-serif; color:var(--navy); outline:none; transition:.15s; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 4px #e6edff; }
button { border:0; border-radius:14px; padding:0 21px; cursor:pointer; background:var(--blue); color:#fff; font:800 16px Nunito,sans-serif; box-shadow:0 4px 0 #3159d2; transition:transform .12s, box-shadow .12s; }
button:hover { transform:translateY(-2px); box-shadow:0 6px 0 #3159d2; }
button:active { transform:translateY(3px); box-shadow:0 1px 0 #3159d2; }
.feedback { min-height:29px; margin:22px 0 0; font-size:17px; font-weight:900; }
.feedback.correct { color:var(--green); } .feedback.wrong { color:var(--red); }
.tip { margin-top:auto; border-radius:13px; padding:11px 16px; background:#f4f6fb; color:#71809b; font-size:13px; font-weight:700; }
.stats { padding:25px; display:flex; flex-direction:column; gap:16px; }
.stats h2 { margin:0 0 2px; font:700 20px "Space Grotesk", sans-serif; color:var(--navy); }
.stat { border-radius:18px; padding:19px; display:flex; align-items:center; gap:14px; }
.stat-icon { font-size:24px; } .stat p { margin:0; color:#687690; font-size:13px; font-weight:800; } .stat strong { display:block; color:var(--navy); font:700 28px "Space Grotesk", sans-serif; }
.correct-stat { background:var(--mint); } .wrong-stat { background:var(--rose); }
.correct-stat strong { color:var(--green); } .wrong-stat strong { color:var(--red); }
.progress { margin-top:auto; background:#f4f6fb; border-radius:18px; padding:18px; }
.progress-top { display:flex; justify-content:space-between; font-size:13px; font-weight:900; color:#687690; margin-bottom:10px; }
.bar { height:10px; background:#dfe5f0; border-radius:20px; overflow:hidden; } .bar div { height:100%; width:0; background:linear-gradient(90deg,#5f8bff,#62c3ec); border-radius:inherit; transition:width .25s; }
.reset { height:45px; margin-top:2px; background:#fff; color:#62708a; border:1px solid #dce2ec; box-shadow:none; } .reset:hover { box-shadow:none; border-color:#aeb9cb; }
@media (max-width:720px) { .app { padding-top:22px; } .game { grid-template-columns:1fr; } .question-card { min-height:440px; padding:25px; } .question { margin:45px 0 25px; } .stats { display:grid; grid-template-columns:1fr 1fr; } .stats h2,.progress,.reset { grid-column:1/-1; } }