html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#030609; color:#e8edf2; font-family:system-ui, sans-serif; }
canvas { display:block; }
#hud { position:fixed; z-index:5; top:12px; left:12px; padding:12px 15px; max-width:min(680px, calc(100vw - 54px)); background:rgba(3,8,12,.78); border:1px solid #36434d; border-radius:10px; box-shadow:0 5px 24px #0008; }
.brand { font-weight:900; letter-spacing:.08em; font-size:clamp(13px, 2vw, 18px); color:#e5d7b7; }
#status { margin-top:8px; color:#b7c6cf; }
#role { margin-top:4px; font-weight:700; }
#timer { margin-top:4px; font-size:24px; font-weight:900; color:#e5d7b7; }
#hint { margin-top:8px; font-size:12px; color:#a7b1b9; line-height:1.4; }
#crosshair { position:fixed; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%); color:#dce8edaa; pointer-events:none; font-size:20px; }
#notice { position:fixed; z-index:6; bottom:22px; left:50%; transform:translateX(-50%); padding:10px 14px; background:#060b10cc; border:1px solid #34414a; border-radius:8px; max-width:90vw; text-align:center; }
#players { position:fixed; z-index:5; top:12px; right:12px; width:190px; max-width:36vw; background:#03080dcc; border:1px solid #36434d; border-radius:10px; padding:10px; font-size:12px; }
.player-row { padding:5px 3px; border-bottom:1px solid #253039; cursor:pointer; }
.player-row:hover { background:#26323a; }
.player-row.dead { opacity:.4; text-decoration:line-through; }
@media(max-width:650px) { #players { top:auto; bottom:78px; } #hint { max-width:70vw; } }