:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f7f3e9;background:#0c1017;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{min-height:38px;border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#f7f3e9;background:#ffffff14;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:900}button:hover{border-color:#ffffff5c;background:#ffffff24}.game-shell{position:relative;width:100%;height:100%;min-width:320px;min-height:520px;background:#0c1017;-webkit-user-select:none;user-select:none;touch-action:none}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;cursor:crosshair}.hud{position:absolute;z-index:2;color:#f7f3e9;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#090d14b3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 48px #0000003d}.loading-card{position:absolute;z-index:5;left:50%;top:50%;width:min(360px,calc(100vw - 32px));min-height:190px;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:10px;padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#090d14db;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 80px #0000006b;text-align:center}.loading-card p,.loading-card h2,.loading-card span{margin:0}.loading-card p{color:#38e2c2;font-size:.78rem;font-weight:1000}.loading-card h2{font-size:1.25rem;line-height:1.15}.loading-card span:not(.loading-ring){color:#aeb8ca;font-size:.9rem;line-height:1.35}.waiting-roster{width:100%;display:grid;gap:4px;margin-top:6px;padding:9px;border-radius:8px;background:#ffffff12}.waiting-roster strong{color:#fff;font-size:.9rem}.waiting-roster span{color:#aeb8ca;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loading-ring{width:44px;height:44px;border-radius:999px;border:4px solid rgba(255,255,255,.14);border-top-color:#38e2c2;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.top-left{top:18px;left:18px;width:min(460px,calc(100vw - 36px));padding:14px}.top-right{top:18px;right:18px;width:330px;padding:12px}.bottom-left{left:18px;bottom:18px;padding:12px 14px}.bottom-right{right:18px;bottom:18px;width:260px;padding:12px}.brand{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center}.logo-mark{width:54px;height:54px;border-radius:8px;display:grid;place-items:center;color:#0c1017;background:#38e2c2;font-weight:1000;letter-spacing:0}.brand p,.brand h1{margin:0}.brand p{color:#38e2c2;font-size:.78rem;font-weight:1000}.brand h1{margin-top:4px;font-size:clamp(1rem,2vw,1.35rem);line-height:1.1}.status-row{min-height:32px;display:grid;grid-template-columns:10px auto 1fr;gap:8px;align-items:center;margin-top:12px;color:#aeb8ca;font-size:.86rem}.status-row strong{color:#fff}.room-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.room-pills span{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px;border-radius:8px;background:#ffffff12}.room-pills strong{color:#aeb8ca;font-size:.72rem;font-weight:1000}.room-pills em{color:#fff;font-style:normal;font-weight:1000;overflow-wrap:anywhere}.live-dot{width:10px;height:10px;border-radius:999px;background:#ffcf4a;box-shadow:0 0 18px #ffcf4a}.live-dot.host{background:#ff5e7e;box-shadow:0 0 18px #ff5e7e}.live-dot.client{background:#38e2c2;box-shadow:0 0 18px #38e2c2}.name-box{display:grid;gap:7px}.name-box span{color:#aeb8ca;font-size:.72rem;font-weight:1000}.name-box input{width:100%;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:0 11px;color:#fff;background:#ffffff14;outline:none;font-weight:900}.name-box input:focus{border-color:#38e2c2;box-shadow:0 0 0 3px #38e2c229}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.hud-stat{min-height:58px;display:grid;grid-template-columns:20px 1fr;gap:2px 8px;align-items:center;padding:9px;border-radius:8px;background:#ffffff12}.hud-stat svg{color:#38e2c2}.hud-stat span{color:#aeb8ca;font-size:.72rem;font-weight:850}.hud-stat strong{grid-column:1 / -1;font-size:1.25rem;line-height:1;overflow-wrap:anywhere}.control-line{display:flex;align-items:center;gap:8px;color:#dbe2ef;font-size:.9rem;font-weight:800;white-space:nowrap}.control-line svg{color:#ffcf4a}.control-line.mobile{display:none;margin-top:6px;color:#aeb8ca}.leader-title{display:flex;gap:8px;align-items:center;color:#fff}.leader-title svg{color:#ffcf4a}.leaderboard{display:grid;gap:6px;padding:0;margin:10px 0;list-style:none}.leaderboard li{min-height:32px;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;padding:0 8px;border-radius:8px;background:#ffffff12}.leaderboard span{width:10px;height:10px;border-radius:999px}.leaderboard strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.leaderboard em{color:#ffcf4a;font-style:normal;font-weight:1000}.bottom-right button{width:100%}.skill-button{position:absolute;z-index:3;left:50%;bottom:18px;min-width:104px;transform:translate(-50%);border-color:#f06cff70;background:#f06cff2e;box-shadow:0 0 28px #f06cff38}.skill-button:hover{border-color:#f06cffb8;background:#f06cff42}@media(max-width:760px){.top-left,.top-right,.bottom-left,.bottom-right{left:10px;right:10px;width:auto}.top-left{top:10px;padding:10px}.top-right{top:auto;bottom:82px;display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:8px}.bottom-left{bottom:10px;padding:9px}.skill-button{left:auto;right:18px;bottom:68px;min-width:94px;transform:none}.bottom-right{display:none}.brand{grid-template-columns:42px 1fr}.logo-mark{width:42px;height:42px}.brand h1{font-size:.98rem}.status-row{margin-top:8px;grid-template-columns:10px auto}.status-row span:last-child{grid-column:1 / -1}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}.hud-stat{min-height:48px;padding:6px;gap:0}.hud-stat span,.hud-stat svg{display:none}.hud-stat strong{font-size:1rem;text-align:center}.control-line{display:none}.control-line.mobile{display:block;white-space:normal;text-align:center}}@media(max-width:460px){.top-right{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}