@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--cream:#ede8dd;--cream-dark:#e2dcd0;--cream-border:#cec8ba;--ink:#1e1c18;--ink-mid:#5a574f;--ink-light:#8a8780;--accent:#7c6a52;--correct:#5a8a4a;--wrong:#9a4a4a;--correct-bg:#f0f5ee;--wrong-bg:#f5f0ee;--font-pixel:"Press Start 2P", monospace;--font-vt:"VT323", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--cream);height:100%;color:var(--ink);font-family:var(--font-vt);-webkit-font-smoothing:none;overscroll-behavior:none}button{cursor:pointer;font-family:var(--font-vt);border:1px solid var(--cream-border);background:var(--cream-dark);color:var(--ink-mid);font-size:20px;transition:background .15s}button:active{background:var(--cream-border)}input,textarea{font-family:var(--font-vt);border:1px solid var(--cream-border);background:var(--cream-dark);color:var(--ink);outline:none;width:100%;padding:10px 12px;font-size:20px}input:focus,textarea:focus{border-color:var(--accent)}.screen{background:var(--cream);flex-direction:column;max-width:420px;min-height:100dvh;margin:0 auto;display:flex}.topbar{border-bottom:1px solid var(--cream-border);background:var(--cream-dark);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.topbar-title{font-family:var(--font-pixel);color:var(--accent);letter-spacing:1px;font-size:7px;line-height:1.6}.topbar-right{font-family:var(--font-pixel);color:var(--ink-light);font-size:6px}.content{flex-direction:column;flex:1;gap:14px;padding:16px;display:flex;overflow-y:auto}.navbar{border-top:1px solid var(--cream-border);background:var(--cream-dark);flex-shrink:0;display:flex}.nav-tab{text-align:center;font-family:var(--font-pixel);color:var(--ink-light);letter-spacing:.5px;cursor:pointer;background:0 0;border:none;border-top:2px solid #0000;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 4px 8px;font-size:5px;display:flex}.nav-tab.active{color:var(--accent);border-top-color:var(--accent)}.nav-tab svg{width:18px;height:18px}.pixel-label{font-family:var(--font-pixel);color:var(--ink-light);letter-spacing:2px;text-transform:uppercase;font-size:6px}.corner-px{background:var(--cream-border);width:5px;height:5px;position:absolute}.tl{top:4px;left:4px}.tr{top:4px;right:4px}.bl{bottom:4px;left:4px}.br{bottom:4px;right:4px}.stats-strip{background:var(--cream-dark);border:1px solid var(--cream-border);justify-content:center;align-items:center;gap:14px;padding:8px 12px;display:flex}.stat-val{font-family:var(--font-pixel);font-size:8px}.stat-val.correct{color:var(--correct)}.stat-val.wrong{color:var(--wrong)}.stat-val.total{color:var(--accent)}.mini-bar{gap:1px;width:50px;height:5px;display:flex}.mini-bar-fill{background:var(--correct);height:100%}.mini-bar-empty{background:var(--cream-border);flex:1;height:100%}.action-btn{text-align:center;letter-spacing:1px;flex:1;padding:14px 8px;font-size:20px}.action-btn.flip{border-color:var(--accent);color:var(--accent);background:#fff8f0}.action-btn.correct{border-color:var(--correct);color:var(--correct);background:var(--correct-bg)}.action-btn.wrong{border-color:var(--wrong);color:var(--wrong);background:var(--wrong-bg)}.progress-dots{justify-content:center;gap:5px;display:flex}.dot{background:var(--cream-dark);border:1px solid var(--cream-border);width:8px;height:8px}.dot.done{background:var(--accent);border-color:var(--accent)}.dot.current{background:var(--ink-mid);border-color:var(--ink-mid)}