html,body{margin:0;height:100%;background:#0d0f12;overflow:hidden}canvas{display:block;cursor:crosshair}:root{--amber: #d9a441;--amber-dim: #a87d30;--ink: #0b0d10;--panel: #14181f;--line: #2a323d;--text: #e8e2d8;--muted: #7d858e;--foe: #e2724f;--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace}.menu{position:fixed;inset:0;z-index:10;display:grid;place-items:center;font-family:var(--mono);color:var(--text);-webkit-font-smoothing:antialiased}.menu[hidden]{display:none}.menu-bg{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#07090b8c,#07090b00 26% 68%,#07090b99)}.menu-panel{position:relative;width:min(92vw,620px);padding:8px 4px 4px;text-align:center;animation:rise .32s ease both}.menu-panel[data-screen=online],.menu-panel[data-screen=joining],.menu-panel[data-screen=waiting],.menu-panel[data-screen=connecting]{width:min(92vw,460px);padding:34px 30px 30px;background:#0c0f13d1;border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.menu-title{display:inline-block;position:relative;margin:0;font-size:clamp(52px,11vw,120px);font-weight:800;letter-spacing:.02em;line-height:.9;color:var(--text);text-shadow:0 6px 30px rgba(0,0,0,.6)}.menu-title span{color:var(--amber)}.menu-title:after{content:"";position:absolute;left:0;bottom:-14px;height:3px;width:100%;background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 82%,transparent 82%);box-shadow:0 0 12px #d9a44180;transform-origin:left center;animation:rope .5s cubic-bezier(.2,.9,.3,1) .15s both}@keyframes rope{0%{transform:scaleX(0)}}.menu-tag{margin:26px 0 40px;color:var(--muted);letter-spacing:.5em;font-size:12px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.8)}.menu-head{margin:0 0 22px;font-size:clamp(22px,4vw,30px);font-weight:700;letter-spacing:.14em;color:var(--amber)}.menu-modes{display:inline-flex;flex-direction:column;gap:2px;margin-bottom:34px;text-align:left}.mode{--i: "";position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 46px;background:none;border:none;border-radius:8px;color:var(--text);font-family:var(--mono);cursor:pointer;transition:transform .14s cubic-bezier(.2,.9,.3,1),background .14s ease}.mode:before{content:"›";position:absolute;left:16px;top:11px;font-size:22px;font-weight:700;color:var(--amber);opacity:0;transform:translate(-8px);transition:opacity .14s ease,transform .14s cubic-bezier(.2,.9,.3,1)}.mode:hover,.mode:focus-visible{transform:translate(8px);background:#d9a4410f;outline:none}.mode:hover:before,.mode:focus-visible:before{opacity:1;transform:translate(0)}.mode-name{font-size:26px;font-weight:800;letter-spacing:.06em;text-shadow:0 2px 10px rgba(0,0,0,.85)}.mode:hover .mode-name,.mode:focus-visible .mode-name{color:var(--amber)}.mode-sub{font-size:12.5px;color:var(--muted);text-shadow:0 1px 6px rgba(0,0,0,.9)}[data-screen=online] .menu-modes{display:flex;width:100%}[data-screen=online] .mode{padding:12px 14px}[data-screen=online] .mode:before{display:none}[data-screen=online] .mode:hover,[data-screen=online] .mode:focus-visible{transform:none}[data-screen=online] .mode-name{font-size:20px}.menu-controls{color:var(--muted);font-size:12.5px;letter-spacing:.03em;margin:6px 0 18px;text-shadow:0 1px 8px rgba(0,0,0,.9)}.menu-controls b{color:var(--amber);font-weight:700}.menu-foot{color:#5a6570;font-size:11px;letter-spacing:.42em;text-transform:uppercase;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.9)}.menu-code{font-size:clamp(48px,12vw,84px);font-weight:800;letter-spacing:.22em;color:var(--amber);text-shadow:0 0 34px rgba(217,164,65,.25);margin:8px 0 12px}.menu-code-input{display:block;width:100%;box-sizing:border-box;text-align:center;font-family:var(--mono);font-size:44px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);background:#0c0f13;border:1px solid var(--line);border-radius:10px;padding:16px 10px;margin-bottom:16px;outline:none}.menu-code-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px #d9a4411f}.menu-code-input::placeholder{color:#3a4048;letter-spacing:.3em}.menu-wait{color:var(--muted);letter-spacing:.05em;margin:4px 0 20px}.menu-wait .dots:after{content:"";animation:dots 1.4s steps(1,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.menu-primary{display:inline-block;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--ink);background:var(--amber);border:none;border-radius:9px;padding:13px 26px;cursor:pointer;transition:filter .12s ease,transform .12s ease}.menu-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.menu-primary:disabled{opacity:.4;cursor:default}.menu-link{color:#5b6570;font-size:12px;word-break:break-all;margin:14px 0 6px}.menu-error{color:var(--foe);font-size:13px;min-height:16px;margin:-8px 0 14px}.menu-back{display:inline-block;margin-top:22px;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.05em;cursor:pointer;transition:color .12s ease}.menu-back:hover{color:var(--text)}.menu-tab{position:fixed;top:14px;right:16px;z-index:9;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);background:#10141ab3;border:1px solid var(--line);border-radius:7px;padding:7px 11px;cursor:pointer;backdrop-filter:blur(4px);transition:color .12s ease,border-color .12s ease}.menu-tab:hover{color:var(--amber);border-color:var(--amber-dim)}.menu-tab[hidden]{display:none}