*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0a0a1a;--color-panel: #1a1a2e;--color-panel-border: #4a4a8a;--color-accent: #f0c040;--color-accent-dark: #c09020;--color-text: #e8e8f0;--color-text-dim: #8888aa;--color-correct: #40d060;--color-wrong: #d04040;--color-btn-a: #5050c0;--color-btn-b: #4040a0;--pixel-size: 2px;--font-pixel: "Courier New", Courier, monospace}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:var(--font-pixel);font-size:16px;line-height:1.4;-webkit-font-smoothing:none;image-rendering:pixelated;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{width:100%;height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0}.pixel-border{border:4px solid var(--color-panel-border);box-shadow:-4px 0 0 0 var(--color-panel-border),4px 0 0 0 var(--color-panel-border),0 -4px 0 0 var(--color-panel-border),0 4px 0 0 var(--color-panel-border),inset -4px 0 #ffffff0d,inset 4px 0 #0000004d}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;min-height:48px;min-width:120px;background:var(--color-btn-a);color:var(--color-text);font-family:var(--font-pixel);font-size:18px;font-weight:700;letter-spacing:1px;border:4px solid #8080ff;cursor:pointer;text-transform:uppercase;image-rendering:pixelated;transition:transform 80ms,background 80ms;box-shadow:4px 4px #2020a0;outline:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:translate(2px,2px);box-shadow:2px 2px #2020a0}.btn:hover{background:#6060d0}.btn--accent{background:var(--color-accent);color:#1a1a00;border-color:#ffd860;box-shadow:4px 4px 0 var(--color-accent-dark)}.btn--accent:hover{background:#f8d050}.btn--accent:active{box-shadow:2px 2px 0 var(--color-accent-dark)}.btn--danger{background:#a02020;border-color:#f44;box-shadow:4px 4px #601010}.btn--danger:hover{background:#c03030}.ui-option-btn{font-family:var(--font-pixel);font-weight:700;background:#0d0d22;border:3px solid #3a3a6a;color:#6060a0;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}.ui-option-btn--selected{background:#1a1500;border-color:#f0c040;color:#f0c040;box-shadow:inset 0 0 0 1px #ffffff0a,0 0 10px #f0c04047}.text-xl{font-size:clamp(24px,5vw,48px)}.text-lg{font-size:clamp(18px,4vw,32px)}.text-md{font-size:clamp(14px,3vw,22px)}.text-sm{font-size:clamp(11px,2vw,16px)}canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-panel)}::-webkit-scrollbar-thumb{background:var(--color-panel-border)}.screen-enter{animation:screenIn .15s ease-out forwards}.screen-exit{animation:screenOut .15s ease-in forwards}@keyframes screenIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes screenOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}