*{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;-webkit-tap-highlight-color:transparent;background:#000;width:100%;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}#renderCanvas{cursor:crosshair;touch-action:none;width:100vw;height:100vh;display:block}.overlay{z-index:20;background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay.hidden,.hidden{display:none!important}.panel{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f1117eb;border:1px solid #ffffff1f;border-radius:16px;width:90%;max-width:460px;padding:2rem 1.5rem;box-shadow:0 20px 60px #0009}.settings-panel{max-width:420px}.panel h1{letter-spacing:.12rem;color:#fff;margin-bottom:.5rem;font-size:2.25rem}.panel h2{color:#cbd5e1;margin:1.5rem 0 .75rem;font-size:1.1rem}.panel p{opacity:.85;margin-bottom:1.5rem;line-height:1.5}button{font-family:inherit}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:10px;width:100%;margin:.5rem 0;padding:.9rem 1.25rem;font-size:1rem;font-weight:600;transition:transform .1s,opacity .2s,background .2s}.btn-primary{color:#000;background:#4ade80}.btn-primary:hover{background:#22c55e;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:#fff;background:#ffffff1f;border:1px solid #fff3}.btn-secondary:hover{background:#fff3;border-color:#ffffff59}.btn-secondary:active{transform:translateY(0)}.btn-pause{z-index:30;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;background:#00000080;border:1px solid #ffffff59;border-radius:8px;padding:.55rem .9rem;font-size:.85rem;font-weight:600;position:absolute;top:1rem;right:1rem}.btn-pause:hover{background:#000000b3;border-color:#fff}.difficulty{flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.difficulty label{opacity:.8;font-size:.85rem}.diff-btn-group{gap:.4rem;display:flex}.diff-btn{color:#000;cursor:pointer;background:#e2e8f0;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;transition:transform .1s,background .2s}.diff-btn:hover{background:#cbd5e1}.diff-btn.active{background:#4ade80}.diff-btn:active{transform:translateY(0)}.instructions ul{text-align:left;opacity:.85;margin-bottom:1.5rem;list-style:none}.instructions li{margin-bottom:.5rem;font-size:.92rem;line-height:1.5}.instructions li strong{color:#fff}.hud{pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:30;background:#0000008c;border:1px solid #ffffff1a;border-radius:10px;padding:.55rem 1.1rem;font-size:.9rem;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.hud-stats{letter-spacing:.05em;gap:1.5rem;margin-bottom:.35rem;font-weight:600;display:flex}.hud-stats span{opacity:.95}#hud-text{opacity:.75;letter-spacing:.03em;font-size:.85rem}.setting-row{flex-direction:column;align-items:center;gap:.4rem;width:100%;margin-bottom:1.25rem;display:flex}.setting-row label{opacity:.9;justify-content:space-between;width:100%;font-size:.9rem;display:flex}.setting-row input[type=range]{appearance:none;cursor:pointer;background:#ffffff26;border-radius:3px;outline:none;width:100%;height:6px}.setting-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#4ade80;border-radius:50%;width:18px;height:18px}.setting-row input[type=range]::-moz-range-thumb{cursor:pointer;background:#4ade80;border:none;border-radius:50%;width:18px;height:18px}.setting-row select{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff40;border-radius:8px;width:100%;padding:.6rem .8rem;font-size:.9rem}.controls-help{opacity:.75;margin-top:.5rem;font-size:.85rem;line-height:1.5}.setting-actions{flex-direction:column;gap:.5rem;display:flex}.mobile-controls{pointer-events:auto;z-index:25;flex-direction:column;align-items:center;gap:.75rem;display:flex;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.d-pad{grid-template:".up."70px"left down right"70px/70px 70px 70px;gap:10px;display:grid}.dpad-up{grid-area:up}.dpad-left{grid-area:left}.dpad-down{grid-area:down}.dpad-right{grid-area:right}.dpad-btn{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff26;border:1px solid #ffffff4d;border-radius:16px;width:70px;height:70px;font-size:1.6rem;font-weight:700;transition:background .1s,transform 50ms}.dpad-btn:active{background:#ffffff59;transform:scale(.92)}@media (width<=600px){.panel{width:92%;padding:1.75rem 1rem}.panel h1{font-size:1.75rem}.panel h2{font-size:1rem}.panel p{font-size:.9rem}.difficulty label{font-size:.8rem}.diff-btn{padding:.45rem .95rem;font-size:.85rem}.instructions li{font-size:.85rem}.btn-primary,.btn-secondary{padding:.8rem 1rem;font-size:.95rem}.hud{padding:.45rem .9rem;font-size:.8rem;top:.75rem}.hud-stats{gap:1rem;font-size:.8rem}.hud-stats span{font-size:.8rem}#hud-text{font-size:.75rem}.btn-pause{padding:.45rem .75rem;font-size:.75rem;top:.6rem;right:.6rem}.mobile-controls{bottom:.75rem}.d-pad{grid-template-rows:56px 56px;grid-template-columns:56px 56px 56px;gap:8px}.dpad-btn{border-radius:14px;width:56px;height:56px;font-size:1.3rem}}@media (width<=400px){.panel h1{font-size:1.5rem}.d-pad{grid-template-rows:48px 48px;grid-template-columns:48px 48px 48px;gap:6px}.dpad-btn{width:48px;height:48px;font-size:1.1rem}}