*{margin:0;padding:0;box-sizing:border-box}:root{--mr-navy: #1d3557;--mr-blue: #457b9d;--mr-ice: #f1faee;--mr-red: #b5432e;--mr-brand: #1cc999;--mr-accent: #ffb703;--mr-panel: rgba(19, 34, 56, .92)}html,body{width:100%;height:100%;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--mr-navy);color:var(--mr-ice)}#game-canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}#ui-root{position:fixed;inset:0;pointer-events:none}#ui-root>*{pointer-events:auto}.join-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0912218c,#0912214d 45%,#091221b3),url(/login-bg.webp) center / cover no-repeat,linear-gradient(180deg,#0d1c30,#1c3a5c)}.join-card{width:min(420px,92vw);background:#0d1a2cd1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(28,201,153,.25);border-radius:14px;padding:32px 34px;box-shadow:0 18px 60px #0000008c}.join-card h1.brand{margin-bottom:14px;line-height:0}.join-card h1.brand img{width:100%;max-width:300px;height:auto;display:block}.join-card .subtitle{color:#a8c5e0;font-size:14px;margin-bottom:24px}.join-card label{display:block;font-size:13px;color:#a8c5e0;margin:14px 0 5px}.join-card input[type=text]{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #3a5a7d;background:#10233b;color:var(--mr-ice);font-size:15px}.join-card input[type=text]:focus{outline:2px solid var(--mr-blue)}.join-card .code-input{text-transform:uppercase;letter-spacing:4px;font-family:ui-monospace,monospace}.join-row{display:flex;gap:10px;align-items:center}.join-row input{flex:1}.join-card .checkbox-row{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px}.join-card .divider{display:flex;align-items:center;gap:12px;margin:20px 0 6px;color:#6d8db0;font-size:12px}.join-card .divider:before,.join-card .divider:after{content:"";flex:1;height:1px;background:#3a5a7d}.btn{border:none;border-radius:8px;padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer;color:var(--mr-ice);background:var(--mr-blue);transition:filter .15s}.btn:hover{filter:brightness(1.15)}.btn.primary{background:var(--mr-red);width:100%;margin-top:20px}.btn:disabled{opacity:.5;cursor:wait}.join-error{margin-top:14px;color:#ffb4a2;font-size:14px;min-height:18px}.join-card select{width:100%;padding:9px 12px;border-radius:8px;border:1px solid #3a5a7d;background:#10233b;color:var(--mr-ice);font-size:14px}.hud-room{position:absolute;top:14px;right:16px;background:var(--mr-panel);border-radius:10px;padding:10px 16px;font-size:14px;line-height:1.5;text-align:right}.hud-room .code{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:3px;color:var(--mr-brand)}.hud-hint{position:absolute;left:16px;bottom:12px;font-size:12.5px;color:#f1faeed9;background:#1322388c;padding:7px 12px;border-radius:8px}.interact-prompt{position:absolute;left:50%;bottom:18vh;transform:translate(-50%);background:var(--mr-panel);border:1px solid var(--mr-brand);border-radius:10px;padding:10px 22px;font-size:16px;display:none}.interact-prompt .key{display:inline-block;background:var(--mr-brand);color:#10233b;font-weight:700;border-radius:5px;padding:1px 9px;margin-right:8px}.fade-overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none!important;transition:opacity .45s ease}.quality-menu{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#060c168c}.quality-menu.open{display:flex}.menu-card{width:min(360px,90vw);background:var(--mr-panel);border-radius:14px;padding:26px 30px}.menu-card h2{font-size:20px;margin-bottom:16px}.menu-card .fps{font-size:13px;color:#a8c5e0;margin-bottom:14px}.menu-card .q-option{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:15px;cursor:pointer}.menu-card .btn{margin-top:18px;width:100%}.menu-card .btn.ghost{background:#2a4a6e;margin-top:8px}.loading-screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:linear-gradient(180deg,#070e1ac7,#070e1ae0),url(/login-bg.webp) center / cover no-repeat,linear-gradient(180deg,#0d1c30,#1c3a5c);font-size:17px;letter-spacing:.5px}.loading-screen .loading-logo{width:min(320px,62vw);height:auto;margin-bottom:10px}.loading-screen .spinner{width:38px;height:38px;border:4px solid rgba(241,250,238,.25);border-top-color:var(--mr-ice);border-radius:50%;animation:mr-spin .9s linear infinite}@keyframes mr-spin{to{transform:rotate(360deg)}}