*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#87b5d9;font-family:system-ui,-apple-system,sans-serif;color:#fff;user-select:none}
canvas{display:block}
.hidden{display:none!important}
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.65));z-index:10}
.card{background:rgba(15,18,24,.85);padding:32px 36px;border-radius:16px;text-align:center;width:min(420px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.5)}
h1{margin:0;font-size:56px;letter-spacing:6px;font-weight:900;background:linear-gradient(90deg,#ffcc00,#ff5a36);-webkit-background-clip:text;color:transparent}
.sub{margin:4px 0 22px;opacity:.75}
#name{width:100%;padding:12px 14px;font-size:18px;border-radius:10px;border:2px solid #333;background:#0c0e12;color:#fff;outline:none;text-align:center}
#play{margin-top:12px;width:100%;padding:14px;font-size:20px;font-weight:800;border:0;border-radius:10px;background:#ff5a36;color:#fff;cursor:pointer;letter-spacing:2px}
#play:hover{background:#ff7350}.help{font-size:12px;opacity:.6;margin:14px 0 0}
#crosshair{position:fixed;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none}
#crosshair:before,#crosshair:after{content:"";position:absolute;background:#fff;box-shadow:0 0 2px #000}
#crosshair:before{left:10px;top:0;width:2px;height:22px}#crosshair:after{top:10px;left:0;height:2px;width:22px}
#hitmarker{position:fixed;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);opacity:0;pointer-events:none;transition:opacity .15s}
#hitmarker:before,#hitmarker:after{content:"";position:absolute;background:#fff}
#hitmarker:before{left:16px;top:0;width:2px;height:34px}#hitmarker:after{top:16px;left:0;height:2px;width:34px}
#hitmarker.show{opacity:1;transition:none}#hitmarker.kill:before,#hitmarker.kill:after{background:#ff3030}
#hp,#ammo{position:fixed;bottom:22px;font-size:44px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.6)}
#hp{left:28px}#ammo{right:28px}#hp small,#ammo small{font-size:16px;margin-left:6px;opacity:.8}
#feed{position:fixed;top:14px;right:14px;text-align:right;font-size:14px}
#feed div{background:rgba(0,0,0,.45);padding:5px 10px;border-radius:6px;margin-bottom:4px}
#chatlog{position:fixed;left:14px;bottom:100px;font-size:14px;max-width:40vw}
#chatlog div{background:rgba(0,0,0,.35);padding:3px 8px;border-radius:5px;margin-top:3px}
#chatin{position:fixed;left:14px;bottom:70px;width:340px;padding:8px;border-radius:6px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;outline:none}
#score{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,12,16,.88);padding:18px 24px;border-radius:12px;min-width:340px}
#score table{width:100%;border-collapse:collapse}#score td,#score th{padding:5px 10px;text-align:left}#score th{opacity:.6;font-size:12px}
#score tr.me{background:rgba(255,204,0,.15)}
#minimap{position:fixed;top:14px;left:14px;border-radius:8px;overflow:hidden;opacity:.9;border:2px solid rgba(0,0,0,.4)}
#dead{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;background:rgba(120,0,0,.35);text-shadow:0 2px 8px #000}
#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 160px rgba(255,0,0,.0);transition:box-shadow .4s}
#vignette.hurt{box-shadow:inset 0 0 160px rgba(255,0,0,.75);transition:none}
#info{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);font-size:11px;opacity:.55}
#quality{margin-left:6px;background:#0c0e12;color:#fff;border:1px solid #333;border-radius:6px;padding:4px}
label.help{display:block}
#skinbtn,#skinclose{margin-top:10px;width:100%;padding:10px;font-size:15px;font-weight:700;border:2px solid #444;border-radius:10px;background:#1b1f27;color:#fff;cursor:pointer}
#skinbtn:hover,#skinclose:hover{border-color:#ffcc00}
#skins{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:20}
.skincard{width:min(640px,96vw)}.skincard h2{margin:0 0 12px;font-size:22px;letter-spacing:2px}
.skinrow{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap;justify-content:center}
#skinview{width:240px;height:300px;background:radial-gradient(ellipse at 50% 40%,#3b4250,#151820);border-radius:12px}
.skinside{flex:1;min-width:220px;text-align:left}#skincur{font-size:20px;font-weight:800;color:#ffcc00;margin-bottom:8px}
#skingrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.skinbtn{padding:8px 6px;border-radius:8px;border:2px solid #333;background:#0f1218;color:#fff;cursor:pointer;font-size:13px}
.skinbtn.sel{border-color:#ffcc00;background:#2a2410}.skinbtn:disabled{opacity:.45;cursor:default}