:root{--bg:#f4f2fb;--ink:#35224a;--soft:#e6ddee;--accent:#dc8061;--scene:#241b40;--veil:#eee7f7ef}
*{box-sizing:border-box}body{margin:0;background:var(--bg,#f4f2fb);color:var(--ink,#35224a);font:16px/1.5 system-ui,sans-serif}.demo{max-width:870px;margin:auto;padding:18px}header{text-align:center}header span{font-size:11px;letter-spacing:.12em;font-weight:800}h1{font-size:32px;letter-spacing:-1px;line-height:1.15;margin:9px 0}header p{font-size:14px;margin:5px 0 16px}.hud{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:800;margin:10px 3px}.arena{position:relative;border:2px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #25365413}canvas{display:block;width:100%;height:auto;touch-action:none;background:var(--scene,#241b40)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--veil,#eee7f7ef);padding:24px}.overlay strong{font-size:37px;line-height:1.12;letter-spacing:-1px;max-width:470px}.overlay p{font-size:14px;max-width:450px;margin:15px 0}.overlay button{margin-top:8px}button{font:700 14px system-ui;border:0;border-radius:25px;padding:13px 24px;background:var(--ink);color:white;cursor:pointer;touch-action:none;min-height:44px}button:hover{filter:brightness(1.2)}button:disabled{opacity:.4;cursor:default}button:focus-visible,canvas:focus-visible{outline:4px solid #ed9f38;outline-offset:4px}.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:17px 0}.primary{background:var(--accent,#dc8061);color:var(--ink);min-width:190px;min-height:54px}.secondary{background:var(--soft,#e6ddee);color:var(--ink)}.instructions{text-align:center;font-size:13px;line-height:1.7;max-width:650px;margin:12px auto}.note{text-align:center;font-size:11px;opacity:.75;line-height:1.7;margin:15px 0}a{color:inherit}#status{font-size:13px;text-align:center;min-height:22px;font-weight:600}.settings{display:flex;justify-content:center;gap:18px;align-items:center;font-size:13px}.aim{width:min(290px,70vw)}[hidden]{display:none!important}@media(max-width:500px){.demo{padding:9px}header span{font-size:9px}h1{font-size:25px}header p{font-size:12px}.hud{font-size:11px}.overlay{padding:14px}.overlay strong{font-size:26px}.overlay p{font-size:11px;margin:9px 0}.overlay button{font-size:12px;min-height:36px;padding:9px 17px}.controls{gap:8px}.controls button{padding:11px 16px}.primary{min-width:145px}.instructions{font-size:11px}#status{font-size:11px}.note{font-size:10px}}

header span,.note{font-size:12px}@media(max-width:500px){header span{font-size:11px}.hud{font-size:12px}.instructions{font-size:12px}.note{font-size:12px}#status{font-size:12px}}
.settings{flex-wrap:wrap}.settings select{font:inherit;color:var(--ink);background:white;border:1px solid #9bb4bf;border-radius:10px;padding:10px;min-height:44px;max-width:100%;min-width:0}.settings label{max-width:100%}.overlay{overflow:auto}@media(max-width:500px){.overlay{justify-content:flex-start}.overlay button{min-height:44px;flex-shrink:0}.settings{gap:10px}.settings select{width:100%}}