*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#f6ecd9;font-family:"Trebuchet MS",system-ui,sans-serif;color:#5a3d2b;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#hub{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#fff8e8ee;border:3px solid #e2b97a;border-radius:18px;padding:10px 16px;min-width:240px;max-width:calc(100vw - 170px);box-shadow:0 4px 0 #d9a35f55;text-align:center}
#hub h3{margin:0 0 6px;font-size:15px;letter-spacing:.5px}
#hub .req{display:inline-flex;align-items:center;gap:6px;margin:2px 8px;font-size:16px}
#hub .bar{height:8px;background:#ecdcc0;border-radius:6px;margin-top:6px;overflow:hidden}
#hub .bar i{display:block;height:100%;background:#e0533d;border-radius:6px;transition:width .3s}
#hub .pts{font-size:12px;opacity:.7;margin-top:4px}
#help{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;line-height:1.5;background:#fff8eefa;border:3px solid #e2b97a;border-radius:18px;padding:16px 18px;width:min(460px,92vw);max-height:84vh;overflow:auto;box-shadow:0 8px 30px #0003;z-index:20}
#help.hidden,#info.hidden{display:none}
#help h3{margin:0 0 8px}
#help ul{margin:4px 0 10px 18px;padding:0}
#help button,#info button{background:#e0533d;color:#fff;border:0;border-radius:12px;padding:10px 16px;margin:6px 6px 0 0;font-size:14px;min-height:44px}
#info button.sec{background:#8a7656}
#info{position:fixed;left:10px;bottom:calc(92px + env(safe-area-inset-bottom));width:min(330px,92vw);background:#fff8eefa;border:3px solid #e2b97a;border-radius:18px;padding:10px 14px;font-size:13px;line-height:1.45;box-shadow:0 4px 14px #0002;z-index:10}
#info b{font-size:15px}
#dist{position:fixed;left:10px;bottom:calc(8px + env(safe-area-inset-bottom));font-size:11px;opacity:.65;pointer-events:none}
#topright{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px}
button{font:inherit;cursor:pointer}
#topright button,#toolbar button{background:#fff8e8;border:3px solid #e2b97a;border-radius:14px;box-shadow:0 3px 0 #d9a35f88;color:#5a3d2b}
#topright button{width:48px;height:48px;font-size:22px}
#toolbar{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:6px;background:#fff8e8dd;padding:8px;border-radius:20px;border:3px solid #e2b97a;max-width:98vw;overflow-x:auto}
#toolbar button{min-width:58px;height:58px;font-size:24px;position:relative;padding:2px 6px;flex:0 0 auto}
#toolbar button small{display:block;font-size:10px;line-height:1.1}
#hub .req canvas{margin-right:4px}
#toolbar button.sel{background:#ffd98a;border-color:#e0533d}
#toolbar button .k{position:absolute;top:1px;left:4px;font-size:9px;opacity:.6}
#panel{position:fixed;top:10px;right:76px;bottom:90px;width:min(360px,92vw);background:#fff8eef2;border:3px solid #e2b97a;border-radius:18px;padding:12px;overflow:auto}
#panel.hidden{display:none}
#panel h3{margin:0 0 8px}
#panel .card{background:#fff;border:2px solid #ecdcc0;border-radius:12px;padding:8px;margin-bottom:8px}
#panel .card button{background:#e0533d;color:#fff;border:0;border-radius:10px;padding:6px 12px;margin-top:4px}
#panel .card button:disabled{background:#c9b99f}
#toast{position:fixed;top:140px;max-width:80vw;left:50%;transform:translateX(-50%);background:#5a3d2b;color:#fff8e8;padding:10px 18px;border-radius:14px;opacity:0;transition:opacity .4s;pointer-events:none;text-align:center}
#toast.show{opacity:1}

@media (pointer:coarse){#toolbar button{min-width:66px;height:66px}#topright button{width:54px;height:54px}}
@media (max-width:700px){#hub{max-width:calc(100vw - 150px);padding:8px 10px}#toolbar button small{font-size:9px}}