html,body{margin:0;height:100%;overflow:hidden;background:#0b1020;color:#fff;font-family:system-ui,sans-serif}
canvas{display:block}
#ui{position:fixed;inset:0;pointer-events:none}
#topbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;background:rgba(0,0,0,.55);padding:8px 16px;border-radius:12px;font-size:18px}
#timer{font-variant-numeric:tabular-nums;color:#ffd32a}
#weapon{background:#1e2a5a;padding:2px 10px;border-radius:8px}
#board{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);padding:10px 14px;border-radius:12px;min-width:150px;font-size:14px}
#hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);opacity:.7;font-size:13px}
#join,#over{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
.hidden{display:none!important}
.card{background:#141b34;padding:28px;border-radius:16px;text-align:center;min-width:280px}
.card input{margin:6px;padding:10px;border-radius:8px;border:0}
.card button{padding:10px 26px;border-radius:10px;border:0;background:#ff4757;color:#fff;font-size:18px;cursor:pointer}
.small{opacity:.6;font-size:12px}
#feed{position:absolute;top:70px;left:10px;display:flex;flex-direction:column;gap:6px;max-width:300px}
.feeditem{background:rgba(0,0,0,.6);padding:6px 12px;border-radius:8px;font-size:14px;transition:opacity .8s}
.feeditem.fade{opacity:0}
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:#1e90ff;padding:10px 22px;border-radius:12px;font-size:20px;box-shadow:0 4px 20px rgba(30,144,255,.6)}
#hitmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:64px;color:#ff2222;font-weight:bold;text-shadow:0 0 12px #ff2222}
#cross{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;text-shadow:0 0 8px currentColor,0 2px 0 #000;pointer-events:none;text-align:center;line-height:1.2}
#cross small{font-size:13px;font-weight:700;opacity:.9}
#respawn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(120,0,0,.25)}
#respawnTxt{font-size:32px;background:rgba(0,0,0,.7);padding:16px 32px;border-radius:14px}
#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 60px rgba(255,0,0,.7)}
.dim{opacity:.35}
#touch{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:14px;pointer-events:auto}.tbtn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:26px;user-select:none;-webkit-user-select:none;touch-action:none}
.tbtn.big{width:80px;height:80px;background:rgba(255,71,87,.4)}
#countdown{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font-size:110px;font-weight:900;color:#ffd32a;text-shadow:0 0 30px rgba(255,211,42,.7),0 4px 0 #000}
#podium{margin:10px 0 16px;font-size:16px;line-height:1.7}
#gear{position:absolute;top:10px;left:10px;font-size:24px;background:rgba(0,0,0,.55);border-radius:10px;padding:6px 10px;cursor:pointer;pointer-events:auto}
#settings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);pointer-events:auto}
#settings .card{min-width:300px;text-align:left}
#settings h3{margin:0 0 12px;text-align:center}
#settings .row{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:15px}
#settings .row input[type=range]{flex:1}
#settings .row.chk{justify-content:flex-start}
#settings select{flex:1;padding:8px;border-radius:8px;border:0;background:#0f1730;color:#fff}
#settings button{width:100%;margin-top:8px;padding:10px;border-radius:10px;border:0;background:#1e90ff;color:#fff;font-size:16px;cursor:pointer}