*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#05070f;color:#f5f6ff;font-family:"Yu Gothic UI",Meiryo,"Hiragino Sans",sans-serif}
body{min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow-x:hidden}
#app{width:max-content;max-width:100vw;margin:auto}
#canvas-wrap{width:max-content;max-width:100vw;margin:auto}
canvas{display:block;height:min(calc(100dvh - 48px),150vw,720px);width:auto;aspect-ratio:2/3;max-width:100vw;background:#0a1024;touch-action:none;cursor:crosshair;box-shadow:0 0 40px rgba(255,220,60,.25)}
#controls{display:flex;gap:6px;align-items:center;justify-content:center;min-height:48px;flex-wrap:wrap}
button{font:700 13px inherit;font-family:inherit;cursor:pointer;border:1px solid #e7c44d;border-radius:8px;background:#19264a;color:#fff;padding:7px 10px;min-height:36px}
button:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:3px solid #7dffb0;outline-offset:2px}
[hidden]{display:none!important}
#ranking-overlay{position:fixed;inset:0;z-index:20;background:rgba(2,6,18,.93);overflow-y:auto;padding:16px;overscroll-behavior:contain}
#ranking-panel{max-width:520px;margin:auto;padding:16px;border:2px solid #ffe14a;border-radius:14px;background:#0d1630;color:#fff}
#ranking-panel h3{margin:12px 0;color:#ffe14a}
#ranking-panel table{width:100%;font-size:13px;table-layout:fixed;overflow-wrap:anywhere}
#ranking-panel th,#ranking-panel td{padding:6px 2px}