:root{color-scheme:dark;--sa-top: env(safe-area-inset-top, 0px);--sa-right: env(safe-area-inset-right, 0px);--sa-bottom: env(safe-area-inset-bottom, 0px);--sa-left: env(safe-area-inset-left, 0px)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#0a1428;color:#e8edf6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#game{position:fixed;inset:0;width:100vw;height:100dvh;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.join{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#060c18bf;z-index:10}.join.hidden{display:none}.join-card{background:#101d36;border:1px solid #22345a;border-radius:16px;padding:28px 24px;width:min(320px,86vw);text-align:center;box-shadow:0 12px 40px #00000073}.join-card h1{font-size:22px;letter-spacing:.05em;margin-bottom:18px}.join-card input{width:100%;padding:12px;border-radius:10px;border:1px solid #2a3c60;background:#0a1428;color:#e8edf6;font-size:16px;text-align:center;margin-bottom:12px;outline:none}.join-card input:focus{border-color:#39d98a}.join-card button{width:100%;padding:12px;border-radius:10px;border:none;background:#39d98a;color:#06251a;font-weight:700;font-size:16px;letter-spacing:.06em;cursor:pointer}.join-screen-link{display:block;margin-top:10px;padding:11px;border-radius:10px;border:1px solid rgba(255,209,102,.55);background:#ffd16614;color:#ffd166;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none}.join-screen-link:active,.join-screen-link:hover{background:#ffd16629;border-color:#ffd166}.music-toggle{position:fixed;z-index:10;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(232,237,246,.35);background:#ffffff0f;color:#e8edf6d9;font-size:16px;line-height:1;cursor:pointer;padding:0}.music-toggle:active{background:#ffffff24}.music-toggle-game{top:calc(52px + var(--sa-top));left:12px}.music-toggle-screen{right:calc(128px + var(--sa-right));bottom:calc(17px + var(--sa-bottom))}.join-footer{position:absolute;left:0;right:0;bottom:calc(18px + var(--sa-bottom));text-align:center;color:#8fa3c4bf;font-size:13px;letter-spacing:.04em;text-decoration:none}.screen-exit{position:fixed;right:calc(16px + var(--sa-right));bottom:calc(16px + var(--sa-bottom));z-index:10;padding:11px 24px;border-radius:22px;border:1.5px solid rgba(232,237,246,.45);background:#ffffff0f;color:#e8edf6d9;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none}.screen-exit:active,.screen-exit:hover{background:#ffffff1f;border-color:#e8edf6b3}.join-footer:active,.join-footer:hover{color:#e8edf6e6}.host{position:fixed;inset:0;overflow-y:auto;padding:calc(20px + var(--sa-top)) 20px calc(20px + var(--sa-bottom));-webkit-overflow-scrolling:touch}.host-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:18px}.host-head h1{font-size:20px;letter-spacing:.04em}.host-status{font-size:12px;color:#8fa3c4}.host-gate,.host-panel{background:#101d36;border:1px solid #22345a;border-radius:14px;padding:18px;max-width:560px}.host-gate p{font-size:13px;color:#8fa3c4;margin-bottom:12px}.host-gate code{color:#e8edf6;font-size:12px}.host-gate-row{display:flex;gap:10px}.host-gate input{flex:1;padding:11px;border-radius:10px;border:1px solid #2a3c60;background:#0a1428;color:#e8edf6;font-size:16px;outline:none}.host-gate input:focus{border-color:#39d98a}.host-gate button,.host-btn{padding:11px 16px;border-radius:10px;border:none;background:#39d98a;color:#06251a;font-weight:700;font-size:14px;letter-spacing:.05em;cursor:pointer}.host-btn-warn{background:#ff9e58;color:#2b1400}.host-btn-live{background:#ffd166;color:#2b2200}.host-actions{display:flex;gap:10px;margin-bottom:16px}.host-error{margin-top:10px;font-size:12px;color:#ff7a7a;min-height:16px}.host-table{width:100%;border-collapse:collapse;font-size:14px}.host-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fa3c4;padding-bottom:8px}.host-table th:nth-child(3),.host-table th:nth-child(4),.host-table td:nth-child(3),.host-table td:nth-child(4){text-align:right;width:64px}.host-table td{padding:7px 0;border-top:1px solid #1b2a47}.host-table tr.dead{opacity:.45}.host-dot{display:inline-block;width:11px;height:11px;border-radius:50%}.host-tag{font-size:10px;letter-spacing:.06em;color:#8fa3c4;border:1px solid #2a3c60;border-radius:5px;padding:1px 4px}.host-kick{padding:5px 10px;border-radius:8px;border:1px solid #4a2130;background:#2a1220;color:#ff7a7a;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer}.host-kick:hover{background:#3a1a2c}.hidden{display:none}