html,body{margin:0;height:100%;overflow:hidden;background:#6f5642;font-family:system-ui,sans-serif}canvas{display:block;width:100vw;height:100vh;height:100dvh;touch-action:none;user-select:none;-webkit-user-select:none}.bar{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}.bar button{pointer-events:auto}button{font:600 15px system-ui,sans-serif;padding:10px 16px;border:0;border-radius:10px;background:#ffffffe0;color:#3a2e22;box-shadow:0 2px 6px #00000040;touch-action:manipulation}button.primary{background:#ff8a2a;color:#fff}button.on{background:#3a2e22;color:#fff}@media(max-width:480px){button{padding:8px 11px;font-size:14px}}button:active{transform:translateY(1px)}#sliders{position:fixed;left:50%;transform:translate(-50%);bottom:max(12px,env(safe-area-inset-bottom));background:#00000073;color:#fff;border-radius:12px;padding:8px 12px;font-size:14px;display:grid;gap:6px;width:min(420px,92vw);box-sizing:border-box}#sliders label{display:grid;grid-template-columns:52px 1fr 40px 92px;align-items:center;gap:6px}#sliders i{font-style:normal;font-size:12px;opacity:.85;white-space:nowrap}#sliders input{width:100%}#sliders b{text-align:right;font-weight:600}#hud{position:fixed;top:max(110px,env(safe-area-inset-top));left:50%;transform:translate(-50%);color:#fff;font:700 22px system-ui,sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}#result{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:#0000008c;color:#fff;border-radius:16px;padding:18px 22px;text-align:center}#result-dist{font:800 44px system-ui,sans-serif;margin-bottom:12px}#result .row{display:flex;gap:10px}#hint{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%);padding:8px 14px;border-radius:8px;background:#0009;color:#fff;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none}#hint.show{opacity:1}#result-status{margin-bottom:10px;font-size:15px}#name-form{display:flex;gap:8px;margin-bottom:12px}#name-form input{flex:1;min-width:0;font:16px system-ui,sans-serif;padding:8px 10px;border-radius:8px;border:0}#board{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);max-height:80vh;display:flex;flex-direction:column;background:#14100ceb;color:#fff;border-radius:14px;padding:12px}.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:18px}#board-list{overflow-y:auto}.board-row{display:grid;grid-template-columns:36px 1fr auto;width:100%;text-align:left;margin:2px 0;padding:7px 10px;background:#ffffff14;color:#fff;box-shadow:none;border-radius:8px;font-weight:500}.board-row:hover{background:#ffffff2e}.board-row .pending{font-size:11px;padding:1px 5px;border-radius:4px;background:#ffb43c59}
