:root{--bg: #0a0c10;--panel: rgba(14, 17, 23, .82);--panel-solid: #12151b;--border: rgba(255, 255, 255, .09);--border-strong: rgba(255, 255, 255, .18);--text: #eef1f4;--text-dim: #8b95a1;--accent: #e8a33d;--accent-dim: #a8752c;--accent-glow: rgba(232, 163, 61, .35);--break: #e0555a;--place: #6bcf8f;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow:hidden;-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100vh}#game-canvas{position:absolute;inset:0;display:block;outline:none}.hidden{display:none!important}.corner-frame{background:var(--panel);border:1px solid var(--border);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);backdrop-filter:blur(6px)}#connect-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:radial-gradient(ellipse at 50% 30%,rgba(232,163,61,.06),transparent 60%)}.connect-panel{width:360px;padding:32px 30px 26px;background:var(--panel);border:1px solid var(--border);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);backdrop-filter:blur(10px);box-shadow:0 30px 80px #0000008c}.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.brand-mark{width:22px;height:22px;position:relative;flex-shrink:0}.brand-mark:before,.brand-mark:after{content:"";position:absolute;inset:0}.brand-mark:before{background:linear-gradient(135deg,var(--accent),var(--accent-dim));clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.brand-mark:after{background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 60%);clip-path:polygon(50% 0%,100% 25%,50% 50%,0% 25%)}.brand h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.16em;margin:0}.tagline{font-family:var(--font-mono);color:var(--text-dim);font-size:12.5px;margin:0 0 22px;line-height:1.5}.field{display:block;margin-bottom:14px}.field span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}.field input{width:100%;background:#ffffff0a;border:1px solid var(--border-strong);color:var(--text);font-family:var(--font-mono);font-size:14px;padding:10px 12px;outline:none}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}#play-btn{width:100%;margin-top:6px;padding:12px;background:var(--accent);border:none;color:#1a1204;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:filter .15s ease,transform .1s ease}#play-btn:hover{filter:brightness(1.12)}#play-btn:active{transform:scale(.98)}#play-btn:disabled{filter:grayscale(.6) brightness(.7);cursor:default}.status{min-height:16px;font-size:11.5px;color:var(--text-dim);margin:10px 0 0}.status.error{color:var(--break)}.status.ok{color:var(--place)}.controls-list{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:11px;color:var(--text-dim)}.controls-list b{color:var(--text)}#hud{position:absolute;inset:0;z-index:10;pointer-events:none}#crosshair{position:absolute;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%)}#crosshair span{position:absolute;background:#ffffffd9;box-shadow:0 0 2px #0009}#crosshair span:first-child{left:50%;top:0;width:2px;height:100%;margin-left:-1px}#crosshair span:last-child{top:50%;left:0;height:2px;width:100%;margin-top:-1px}#debug-panel{position:absolute;top:16px;left:16px;padding:10px 16px 10px 12px;font-size:11.5px;min-width:150px}.debug-row{display:flex;justify-content:space-between;gap:16px;padding:2px 0;color:var(--text-dim)}.debug-row b{color:var(--accent);font-weight:500}#player-list{position:absolute;top:16px;right:16px;padding:10px 14px;font-size:12px;min-width:130px;max-height:180px;overflow:hidden}.player-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--text-dim)}.player-row .dot{width:8px;height:8px;flex-shrink:0}.player-row.me{color:var(--text)}.player-row .you-tag{color:var(--accent);font-size:9px;margin-left:auto}#hotbar{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;gap:6px;pointer-events:auto}.hotbar-slot{width:52px;height:52px;background:var(--panel);border:1px solid var(--border);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.hotbar-slot .swatch{width:30px;height:30px}.hotbar-slot .key{position:absolute;top:3px;left:5px;font-size:9px;color:var(--text-dim)}.hotbar-slot.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow),0 0 16px var(--accent-glow)}#chat-log{position:absolute;bottom:92px;left:16px;width:340px;max-height:160px;display:flex;flex-direction:column-reverse;gap:3px;overflow:hidden;font-size:12px;mask-image:linear-gradient(to top,black 60%,transparent 100%)}.chat-line{background:#0a0c108c;padding:3px 8px;color:var(--text);width:fit-content;max-width:100%;word-break:break-word}.chat-line .who{color:var(--accent);margin-right:6px}.chat-line.system{color:var(--text-dim);font-style:italic}#chat-input-wrap{position:absolute;bottom:92px;left:16px;width:340px;pointer-events:auto}#chat-input{width:100%;background:#0a0c10d9;border:1px solid var(--accent);color:var(--text);font-family:var(--font-mono);font-size:13px;padding:8px 10px;outline:none}#pointer-lock-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06070a59;color:var(--text);font-family:var(--font-display);font-size:15px;letter-spacing:.04em;pointer-events:auto;cursor:pointer}#pointer-lock-prompt>div{padding:14px 22px;background:var(--panel);border:1px solid var(--border);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}#controls-hint{position:absolute;bottom:8px;right:16px;font-size:10px;color:var(--text-dim);opacity:.65;letter-spacing:.02em}