:root{--ink:#2f3a24;--paper:#fffaf0;--leaf:#4fae4a;--leaf-dark:#2f7d33;--shadow:0 4px 0 #0000002e;color:var(--ink);font-family:Hiragino Maru Gothic ProN,Zen Maru Gothic,Yu Gothic UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#bfe3f5;height:100dvh;margin:0;overflow:hidden}[hidden]{display:none!important}#view{width:100%;height:100%;display:block;position:fixed;inset:0}#labels,#hud{pointer-events:none;position:fixed;inset:0}#labels{overflow:hidden}.nametag{white-space:nowrap;will-change:transform;background:#fffaf0e0;border-radius:99px;padding:2px 9px;font-size:13px;font-weight:700;position:absolute;top:0;left:0}#scores{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));background:#fffaf0db;border-radius:16px;min-width:96px;margin:0;padding:8px 14px 8px 10px;font-size:15px;font-weight:700;list-style:none;position:absolute}#scores li{align-items:center;gap:8px;line-height:1.75;display:flex}#scores li.me{color:var(--leaf-dark)}#scores i{border:2px solid #00000026;border-radius:50%;flex:none;width:14px;height:14px}#scores span{text-overflow:ellipsis;white-space:nowrap;flex:1;max-width:9em;overflow:hidden}.nametag.tray{border:3px solid;padding:3px 11px;font-size:15px}#toasts{top:calc(14px + env(safe-area-inset-top));justify-items:center;gap:6px;display:grid;position:absolute;left:50%;transform:translate(-50%)}#toasts div{color:#fff;white-space:nowrap;background:#f07a2a;border-radius:99px;padding:8px 18px;font-size:17px;font-weight:800;animation:3.5s both toast}@keyframes toast{0%{opacity:0;transform:translateY(-10px)scale(.9)}8%,85%{opacity:1;transform:none}to{opacity:0}}#status{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));background:#fffaf0db;border-radius:99px;padding:5px 13px;font-size:13px;font-weight:700;position:absolute}#status:before{content:"";background:#e0a020;border-radius:50%;width:9px;height:9px;margin-right:6px;display:inline-block}#status[data-s=online]:before{background:var(--leaf)}#status[data-s=offline]:before{background:#d9483a}#stick{background:#fff3;border:3px solid #ffffff8c;border-radius:50%;width:120px;height:120px;position:absolute;top:-60px;left:-60px}#knob{width:50px;height:50px;box-shadow:var(--shadow);background:#ffffffd9;border-radius:50%;position:absolute;top:32px;left:32px}#buttons{right:calc(22px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));pointer-events:auto;align-items:flex-end;gap:16px;display:flex;position:absolute}#buttons button{font:inherit;color:var(--ink);white-space:nowrap;width:92px;height:92px;box-shadow:var(--shadow);touch-action:none;background:#fffaf0e6;border:none;border-radius:50%;font-size:15px;font-weight:800}#buttons button:active{box-shadow:none;transform:translateY(3px)}#buttons #use{color:#fff;background:#f07a2a;width:104px;height:104px;margin-bottom:44px;font-size:18px}#start{background:var(--paper);text-align:center;border-radius:28px;gap:16px;width:min(88vw,380px);height:fit-content;margin:auto;padding:26px 28px 28px;display:grid;position:fixed;inset:0;box-shadow:0 10px #00000024}#start h1{letter-spacing:.04em;color:var(--leaf-dark);margin:0;font-size:44px}#start p{margin:-8px 0 4px;font-size:15px}#start label{text-align:left;gap:6px;font-size:14px;font-weight:700;display:grid}#start input{font:inherit;color:var(--ink);-webkit-user-select:text;user-select:text;background:#fff;border:3px solid #d8d2c0;border-radius:14px;padding:10px 14px;font-size:20px}#start input:focus{border-color:var(--leaf);outline:none}#colors{justify-content:space-between;display:flex}#colors button{border:4px solid #0000;border-radius:50%;width:44px;height:44px;padding:0;box-shadow:0 0 0 2px #0000001f}#colors button[aria-checked=true]{box-shadow:0 0 0 4px var(--ink);border-color:#fff}#start button[type=submit]{font:inherit;color:#fff;background:var(--leaf);box-shadow:0 5px 0 var(--leaf-dark);border:none;border-radius:18px;padding:14px;font-size:22px;font-weight:800}#start button[type=submit]:active{box-shadow:0 1px 0 var(--leaf-dark);transform:translateY(4px)}
