body{background:radial-gradient(circle at top,#2b60a533,#0000 36%),linear-gradient(#0d1320 0%,#05070d 100%);margin:0;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#renderCanvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.menu-shell{z-index:4;pointer-events:none;gap:8px;width:min(320px,100vw - 28px);display:grid;position:absolute;inset:14px 14px auto auto}.menu-shell.playing{inset:auto 14px 14px auto}.menu-card{pointer-events:auto;color:#eef6ff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#070c18d6;border:1px solid #7db9ff38;border-radius:14px;padding:12px;box-shadow:0 18px 60px #00000047}.menu-card.compact{justify-self:end;width:min(280px,100vw - 28px)}.menu-card.compact.collapsed{width:min(240px,100vw - 28px)}.hidden{display:none!important}.menu-head{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;display:flex}.panel-head-actions{align-items:center;gap:8px;display:flex}.menu-kicker{letter-spacing:.16em;text-transform:uppercase;color:#8fb3da;margin-bottom:4px;font-size:10px}.menu-title{color:#fff;font-size:20px;font-weight:800}.menu-title.small{font-size:16px}.menu-copy{color:#c8d7f0;margin-bottom:8px;font-size:12px;line-height:1.5}.menu-copy.subtle{color:#8fb3da;margin-bottom:0}.menu-message{color:#ffd58f;min-height:18px;margin-top:8px;font-size:12px}.menu-grid{grid-template-columns:1.4fr 1fr;gap:8px;display:grid}.menu-section{background:#ffffff0a;border-radius:12px;gap:8px;padding:10px;display:grid}.menu-section.tight{gap:8px}.section-title{letter-spacing:.1em;text-transform:uppercase;color:#8fb3da;font-size:11px}.menu-input,.menu-select,.menu-button{width:100%;font:inherit;border:1px solid #7db9ff33;border-radius:12px}.menu-input,.menu-select{color:#eef6ff;background:#ffffff0d;padding:10px 12px}.menu-select option{color:#0d1320}.menu-button{cursor:pointer;padding:9px 12px;font-weight:700;transition:transform .12s,opacity .12s,background .12s}.icon-button{color:#eef6ff;cursor:pointer;width:28px;height:28px;font:inherit;background:#ffffff0f;border:1px solid #7db9ff33;border-radius:10px;line-height:1}.menu-button:hover:not(:disabled){transform:translateY(-1px)}.menu-button:disabled{cursor:not-allowed;opacity:.48}.menu-button.primary{color:#08111f;background:linear-gradient(135deg,#9be0ff 0%,#7fc0ff 100%)}.menu-button.secondary{color:#eef6ff;background:#ffffff0f}.menu-chip{color:#9fd4ff;white-space:nowrap;background:#ffffff0f;border-radius:999px;padding:6px 9px;font-size:11px}.room-list,.player-list{gap:8px;display:grid}.room-card,.player-row{background:#ffffff0a;border-radius:12px;gap:4px;padding:8px 10px;display:grid}.room-card-title,.player-name{color:#fff;font-size:13px;font-weight:700}.room-card-meta,.player-score{color:#9fb5cc;font-size:11px}.room-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.hud{z-index:2;color:#eff6ff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#070c18c2;border:1px solid #7db9ff42;border-radius:14px;max-width:min(320px,100vw - 28px);padding:10px 12px;position:absolute;top:14px;left:14px;box-shadow:0 18px 60px #00000059}.hud-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.hud-mini{color:#d8eeff;flex-wrap:wrap;gap:10px;font-size:11px;font-weight:700;display:flex}.brand{letter-spacing:.04em;color:#fff;margin-bottom:0;font-size:16px;font-weight:700}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px;display:grid}.stats>div{background:#ffffff0d;border-radius:10px;gap:4px;padding:7px 9px;display:grid}.label{text-transform:uppercase;letter-spacing:.08em;color:#8fb3da;font-size:10px}.stats span:last-child{color:#f8fbff;font-size:16px;font-weight:700}.tips{color:#c8d7f0;gap:4px;font-size:11px;line-height:1.35;display:grid}.status{color:#8fe7d3;border-top:1px solid #7db9ff29;margin-top:8px;padding-top:8px;font-size:11px}.message{color:#ffd58f;opacity:0;min-height:16px;margin-top:8px;font-size:11px;transition:opacity .18s,transform .18s;transform:translateY(4px)}.message.show{opacity:1;transform:translateY(0)}.crosshair{z-index:2;pointer-events:none;width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:#ffffffeb;position:absolute;box-shadow:0 0 8px #fff6}.crosshair:before{width:22px;height:2px;top:10px;left:0}.crosshair:after{width:2px;height:22px;top:0;left:10px}.killfeed{z-index:2;pointer-events:none;gap:8px;width:min(320px,100vw - 40px);display:grid;position:absolute;top:20px;right:20px}.killfeed-entry{color:#eef6ff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#090e1ccc;border:1px solid #7db9ff38;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;transition:opacity .22s,transform .22s;box-shadow:0 16px 40px #00000047}.killfeed-entry.self{color:#ffe6a3;border-color:#ffcc6e6b}.killfeed-entry.danger{color:#ffd3d3;border-color:#ff79796b}.killfeed-entry.fade{opacity:0;transform:translateY(-6px)}.hitmarker{z-index:3;opacity:0;pointer-events:none;width:34px;height:34px;transition:opacity .1s,transform .1s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.86)}.hitmarker:before,.hitmarker:after{content:"";background:linear-gradient(45deg,#0000 46%,#fffffff2 47% 53%,#0000 54%);position:absolute;inset:0}.hitmarker:after{transform:rotate(90deg)}.hitmarker.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.hitmarker.headshot:before,.hitmarker.headshot:after{background:linear-gradient(45deg,#0000 44%,#ffc366fa 45% 55%,#0000 56%)}.damage-flash{z-index:1;pointer-events:none;opacity:0;transition:opacity .16s;position:absolute;inset:0}.damage-flash.hit{opacity:1;background:radial-gradient(circle,#0000 52%,#ff494914 70%,#ff49493d 100%)}.damage-flash.death{opacity:1;background:radial-gradient(circle,#00000014 30%,#60000052 72%,#6000007a 100%)}@media (width<=640px){.hud{max-width:none;padding:14px;top:12px;left:12px;right:12px}.menu-shell{width:auto;inset:auto 12px 12px}.menu-shell.playing{inset:auto 12px 12px}.menu-grid,.room-actions{grid-template-columns:1fr}.menu-card.compact{width:auto}.brand{font-size:18px}.stats{grid-template-columns:1fr}.killfeed{width:min(320px,100vw - 24px);top:auto;bottom:12px;right:12px}}