*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0d12;color:#eee;font-family:system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
button{font:inherit;border:0;border-radius:12px;background:#222;color:#fff;cursor:pointer}
#menu{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:14px;overflow:auto;background:radial-gradient(circle at 50% 20%,#2a1d1d,#0b0b10);touch-action:pan-y}
#menu h1{margin:4px 0 0;font-size:34px;letter-spacing:2px}
.w{color:#fff;text-shadow:0 0 0 #000,2px 2px 0 #e11}.b{color:#111;-webkit-text-stroke:1px #fff;text-shadow:2px 2px 0 #e11}
.sub{margin:0;opacity:.8;font-size:14px;text-align:center}
#menu>button{width:min(320px,90%);padding:13px;font-size:17px;font-weight:700;background:#e11d2a;box-shadow:0 4px 0 #7a0a12}
#menu>button#mSoloB{background:#1a1a1a;border:2px solid #fff;box-shadow:0 4px 0 #555}
#menu>button#mHost{background:#f4f4f4;color:#111;box-shadow:0 4px 0 #888}
#hostBox{text-align:center;background:#fff;color:#111;border-radius:12px;padding:10px}
#qr img{width:200px;height:200px;image-rendering:pixelated}
.mono{font-family:monospace;font-size:11px;word-break:break-all;max-width:280px}
details{max-width:420px;font-size:13px;opacity:.9}
.gear{color:#e11d2a;font-weight:700;text-decoration:none;margin-top:6px}
#hud{position:fixed;top:6px;left:8px;right:8px;display:flex;justify-content:space-between;font-weight:700;font-size:15px;pointer-events:none;text-shadow:0 1px 2px #000}
#banner{position:fixed;top:34px;left:50%;transform:translateX(-50%);background:#e11d2acc;padding:4px 14px;border-radius:20px;font-weight:800;pointer-events:none}
#toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:5}
.toast{background:#000c;padding:5px 12px;border-radius:10px;font-size:14px;animation:fade 3s forwards}
@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}
#pad{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:10px max(10px,env(safe-area-inset-left));pointer-events:none}
#pad button{pointer-events:auto;background:#fff2;border:2px solid #fff5;backdrop-filter:blur(2px);color:#fff;font-weight:800}
.dpad{display:flex;flex-direction:column;align-items:center;gap:4px}.dpad div{display:flex;gap:44px}
.dpad button{width:58px;height:50px;font-size:22px}
.acts{display:flex;gap:10px}.acts button{width:76px;height:76px;border-radius:50%;font-size:16px}
#bAct{background:#e11d2a99!important}
#modal{position:fixed;left:50%;bottom:8px;max-height:96vh;overflow:auto;transform:translateX(-50%);background:#16161cf2;border:2px solid #e11d2a;border-radius:16px;padding:12px;z-index:10;text-align:center;max-width:94vw}
#modal p{margin:0 0 8px;font-weight:700}
#modal button{margin:3px;padding:10px 14px;font-weight:700;background:#333}
#modal button.pri{background:#e11d2a}
#wires{display:block;margin:0 auto 6px;background:#2a2a2a;border-radius:8px;max-width:100%}
.cut{opacity:.35;text-decoration:line-through}