html,body{margin:0;height:100%;overflow:hidden;background:#1b1d22;font-family:system-ui,sans-serif}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}#topleft{position:fixed;top:16px;left:24px;right:16px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;pointer-events:none}#topleft,#panel,#hud,#mode,#power-box,#result,#hint,#selector{pointer-events:none;user-select:none;-webkit-user-select:none}button,summary,select,input{pointer-events:auto}.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #f2f2f2;box-sizing:border-box;vertical-align:-1px;margin-right:6px;background:#9a9a9a}#player-swatch{width:28px;height:28px;padding:0;margin:8px 8px 0 0;border-radius:50%;border:2px solid #f2f2f2;cursor:pointer;flex:none}#player-swatch:focus-visible{outline:2px solid #6aa9ff;outline-offset:2px}.swatch[hidden]{display:none}#selector-row{display:flex;align-items:flex-start}#hud{display:flex;margin-top:8px;flex-wrap:wrap;gap:12px;align-items:flex-start;color:#f2f2f2}#selector{display:flex;flex-wrap:wrap;gap:10px 12px;padding-top:8px}.die-btn{position:relative;font:inherit;padding:6px 14px 6px 10px;border-radius:6px;border:1px solid #666;background:#2b2e36;color:#aaa;cursor:pointer}.die-btn.active{color:#f2f2f2;border-color:#aaa}.die-btn:focus-visible{outline:2px solid #6aa9ff;outline-offset:2px}.die-btn .badge{position:absolute;top:-8px;right:-8px;min-width:18px;padding:0 5px;white-space:nowrap;box-sizing:border-box;height:18px;line-height:18px;text-align:center;font-size:12px;border-radius:9px;background:#4a6fd8;color:#fff}#result{color:#f2f2f2;font-size:20px;min-width:12ch;white-space:pre-line;max-height:40vh;overflow-y:auto}#panel{color:#f2f2f2}#panel summary{display:none;cursor:pointer;padding:6px 12px;width:max-content;border-radius:6px;border:1px solid #888;background:#2b2e36}#panel #selector-row{margin-bottom:6px}@media(max-width:899px){#topleft{top:8px;left:20px;right:8px;gap:6px}#panel summary{display:block}#panel[open]{background:#1b1d22eb;padding:6px;border-radius:8px;max-width:calc(100vw - 28px)}#result{position:fixed;left:20px;bottom:144px;font-size:16px;max-height:20vh;max-width:min(60vw,360px);background:#1b1d22b3;border-radius:6px;padding:2px 6px}#hint{display:none}#result{display:block}}#mode{display:flex;gap:6px;padding:8px 0 0 12px}.mode-btn{font:inherit;padding:6px 12px;border-radius:6px;border:1px solid #666;background:#2b2e36;color:#aaa;cursor:pointer}.mode-btn[aria-pressed=true]{color:#f2f2f2;border-color:#aaa;background:#3a3f4b}.mode-btn:focus-visible{outline:2px solid #6aa9ff;outline-offset:2px}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-10px);pointer-events:none;user-select:none;-webkit-user-select:none;color:#f2f2f2;text-align:center;text-shadow:0 0 3px #000}#crosshair[hidden]{display:none}#crosshair .cross{position:relative;width:20px;height:20px;margin:0 auto}#crosshair .cross:before,#crosshair .cross:after{content:"";position:absolute;background:#f2f2f2;box-shadow:0 0 2px #000}#crosshair .cross:before{left:9px;top:0;width:2px;height:20px}#crosshair .cross:after{top:9px;left:0;height:2px;width:20px}#crosshair-speed{display:block;margin-top:6px;font-size:14px}#replay,#reset-view{font:inherit;padding:6px 12px;border-radius:6px;border:1px solid #888;background:#2b2e36;color:#f2f2f2;cursor:pointer}#replay:disabled{opacity:.4;cursor:default}#power-box{display:flex;align-items:center;gap:8px;font-size:14px;color:#ddd;padding-top:8px}#power{width:160px}#power-value{min-width:7ch}#hint{position:fixed;bottom:152px;left:16px;color:#aaa;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
