*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--clr-bg: #0a0a0c;--clr-surface: #151518;--clr-surface-2: #1e1e22;--clr-border: #2a2a30;--clr-text: #f3f3f2;--clr-text-muted: #8a8a98;--clr-accent: #f4d566;--clr-accent-hover: #f7e08a;--clr-pink: #f3978a;--clr-yes: #22c55e;--clr-yes-hover: #16a34a;--clr-no: #ef4444;--clr-no-hover: #dc2626;--clr-correct: #22c55e;--clr-wrong: #ef4444;--clr-gold: #f4d566;--clr-timer-ok: #22c55e;--clr-timer-warn: #f4d566;--clr-timer-danger: #ef4444;--radius: 16px;--radius-sm: 10px;--shadow: 0 4px 32px rgba(0,0,0,.5)}html,body{height:100%;overflow:hidden}body{font-family:Inter,system-ui,sans-serif;background:var(--clr-bg);color:var(--clr-text);display:flex;align-items:center;justify-content:center;min-height:100dvh}#app{width:100%;max-width:480px;height:100dvh;display:flex;flex-direction:column;padding:0 12px;overflow:hidden}.screen-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:1;min-height:0;overflow-y:auto;text-align:center;padding:24px 0}.intro-mascot{width:120px;height:auto;filter:drop-shadow(0 0 20px rgba(244,213,102,.25))}.intro-title{font-size:clamp(1.8rem,7vw,2.6rem);font-weight:900;letter-spacing:-.02em;line-height:1.1}.intro-title span{color:var(--clr-accent)}.intro-rules{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:16px 20px;font-size:.9rem;line-height:1.6;color:var(--clr-text-muted);max-width:340px}.intro-rules strong{color:var(--clr-text)}.intro-best{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:12px 20px;font-size:.85rem;color:var(--clr-text-muted)}.intro-best .best-score{font-size:1.3rem;font-weight:800;color:var(--clr-accent)}.intro-best .best-rank{color:var(--clr-pink);font-weight:700}.intro-challenge{background:var(--clr-surface);border:1px solid var(--clr-accent);border-radius:var(--radius-sm);padding:12px 20px;font-size:.95rem;color:var(--clr-accent);font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius);font-family:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;transition:transform 80ms,filter 80ms;padding:16px 24px;min-height:56px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.96)}.btn:focus-visible{outline:3px solid var(--clr-accent);outline-offset:3px}.btn-primary{background:var(--clr-accent);color:#0a0a0c;font-size:1.15rem;padding:18px 40px;min-height:60px;box-shadow:0 4px 20px #f4d5664d}.btn-primary:hover{filter:brightness(1.1)}.btn-yes{background:var(--clr-yes);color:#fff;flex:1;font-size:1rem}.btn-yes:hover{background:var(--clr-yes-hover)}.btn-no{background:var(--clr-no);color:#fff;flex:1;font-size:1rem}.btn-no:hover{background:var(--clr-no-hover)}.btn-secondary{background:var(--clr-surface-2);color:var(--clr-text);border:1px solid var(--clr-border)}.btn-secondary:hover{background:var(--clr-border)}.btn:disabled{opacity:.45;pointer-events:none}.screen-game{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:12px;padding-bottom:16px;gap:12px}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);font-size:.85rem}.hud-block{display:flex;flex-direction:column;align-items:center;gap:2px}.hud-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--clr-text-muted)}.hud-value{font-size:1.1rem;font-weight:800;line-height:1}.hud-score .hud-value{color:var(--clr-accent)}.hud-streak .hud-value{color:var(--clr-gold)}.lives{display:flex;gap:3px;font-size:1.1rem}.image-container{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);overflow:hidden;min-height:0}.game-image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .15s ease}.game-image.loading{opacity:0}.feedback-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:3.5rem;font-weight:900;border-radius:calc(var(--radius) - 1px);opacity:0;pointer-events:none;transition:opacity 80ms}.feedback-overlay.visible{opacity:1}.feedback-overlay.correct{background:#22c55e2e;color:var(--clr-correct);border:3px solid var(--clr-correct)}.feedback-overlay.wrong{background:#ef44442e;color:var(--clr-wrong);border:3px solid var(--clr-wrong)}.feedback-label{font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.feedback-points{font-size:1.1rem;font-weight:800;color:var(--clr-accent)}.timer-track{height:8px;background:var(--clr-surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--clr-border)}.timer-bar{height:100%;background:var(--clr-timer-ok);border-radius:99px;transform-origin:left;will-change:transform;transition:background .3s}.timer-bar.warn{background:var(--clr-timer-warn)}.timer-bar.danger{background:var(--clr-timer-danger);animation:timerPulse .4s ease-in-out infinite alternate}@keyframes timerPulse{0%{opacity:1}to{opacity:.6}}.answer-buttons{display:flex;gap:10px}.streak-milestone{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:3rem;font-weight:900;color:var(--clr-gold);text-shadow:0 0 30px rgba(244,213,102,.5);pointer-events:none;z-index:100;animation:streakPop .7s ease-out forwards}@keyframes streakPop{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.screen-results{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 0;gap:16px;overflow-y:auto}.results-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:24px 20px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}.results-mascot{width:100px;height:auto;margin-bottom:4px}.results-rank{font-size:1.3rem;font-weight:900;color:var(--clr-pink);line-height:1.2}.results-rank-message{font-size:.85rem;color:var(--clr-text-muted);font-style:italic;max-width:280px}.results-score{font-size:clamp(3rem,14vw,4.5rem);font-weight:900;color:var(--clr-accent);line-height:1}.results-score-label{font-size:.75rem;color:var(--clr-text-muted);letter-spacing:.04em;text-transform:uppercase}.results-new-record{display:inline-flex;align-items:center;gap:6px;background:#f4d56626;border:1px solid var(--clr-accent);border-radius:99px;padding:6px 16px;font-size:.85rem;font-weight:700;color:var(--clr-accent);animation:recordPulse 1s ease-in-out 3}@keyframes recordPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.results-nearmiss{font-size:.85rem;color:var(--clr-text-muted);text-align:center;padding:0 12px}.results-nearmiss strong{color:var(--clr-pink)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-block{background:var(--clr-surface-2);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:14px 12px;text-align:center}.stat-value{font-size:1.5rem;font-weight:800;line-height:1;margin-bottom:4px}.stat-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--clr-text-muted)}.stat-correct .stat-value{color:var(--clr-correct)}.stat-streak .stat-value{color:var(--clr-gold)}.results-actions{display:flex;flex-direction:column;gap:10px}.screen-enter{animation:fadeUp .2s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.keyboard-hint{text-align:center;font-size:.72rem;color:var(--clr-text-muted);padding-top:2px}.kbd{display:inline-block;background:var(--clr-surface-2);border:1px solid var(--clr-border);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.78rem}@media (min-width: 640px){#app{padding:0}.screen-game{padding-top:20px;padding-bottom:24px}.btn-yes,.btn-no{font-size:1.1rem}.hud{padding:12px 20px}.intro-mascot{width:150px}.results-mascot{width:120px}}