*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10150f;color:#fff;font:16px system-ui,sans-serif;user-select:none}canvas{display:block;width:100%;height:100%;cursor:crosshair}#hud,#board,#modes,#controls{position:fixed;background:#071007df;border:1px solid #384a31}#hud{left:16px;top:16px;display:flex;gap:16px;padding:10px 14px;border-left:4px solid #69a7d8}#health{color:#8cff83}#score{color:#ffd477}#board{right:16px;top:62px;width:230px;padding:12px 16px}#board b{font-size:12px;color:#aed8f5;letter-spacing:.1em}#board ol{padding-left:23px;font-size:12px}#modes{right:16px;top:16px;padding:9px 12px;color:#d8edaa;text-decoration:none;font-weight:800}#controls{bottom:14px;left:50%;transform:translateX(-50%);padding:8px 14px;font-size:11px}#lobby,#ended{position:fixed;z-index:10;inset:0;display:grid;place-items:center;background:#080b08ee}#lobby>div,#ended>div{width:min(460px,92vw);padding:34px;text-align:center;border:1px solid #71845d;background:#172016;box-shadow:0 20px 80px #000}h1{color:#d8edaa;letter-spacing:.12em}button,input,#login,#ended a{width:100%;padding:13px;margin-top:10px;border:1px solid #71845d;background:#3e6685;color:#fff;font:inherit;font-weight:800;text-decoration:none;display:block}.join{display:grid;grid-template-columns:1fr 120px;gap:8px}input{text-transform:uppercase;background:#0b100a}#room-code{display:block;font:900 38px ui-monospace,monospace;letter-spacing:.18em;color:#ffd477}#roster{list-style:none;padding:0}#roster li{padding:5px}.hidden{display:none!important}