.menu,.lobby-screen{position:fixed;z-index:40;top:0;right:0;bottom:0;left:0;display:none;align-items:stretch;justify-content:stretch}body[data-app=menu] .menu,body[data-app=connecting] .menu{display:flex}body[data-app=menu] .interface,body[data-app=connecting] .interface,body[data-app=lobby] .interface{display:none}body:not([data-app=menu]):not([data-app=connecting]) .menu{display:none}body[data-app=lobby] .lobby-screen{display:flex;align-items:flex-end;justify-content:center;padding:0 clamp(12px,3vw,28px) clamp(12px,2.5vh,24px);pointer-events:none}.menu-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(-18deg,transparent 0 18px,rgb(255 180 0 / 4%) 18px 20px),radial-gradient(ellipse 80% 55% at 20% 15%,rgb(255 180 0 / 18%),transparent 55%),radial-gradient(ellipse 50% 40% at 90% 80%,rgb(255 77 109 / 14%),transparent 50%),linear-gradient(155deg,#06080eeb,#0a0c14f5);pointer-events:none}.menu-backdrop:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--amber) 0 28px,var(--ink) 28px 56px);opacity:.85}.menu-shell{position:relative;z-index:1;display:grid;width:min(1120px,calc(100vw - 32px));max-height:min(920px,calc(100dvh - 32px));margin:auto;padding:clamp(28px,4vw,48px);overflow:auto;overscroll-behavior:contain;border:3px solid rgb(255 180 0 / 55%);background:linear-gradient(145deg,#0e121cfa,#080a10fa);box-shadow:0 40px 100px #0000008c,12px 12px #ffb4002e,inset 0 1px #ffffff14;animation:menu-enter .48s var(--pop) both}.menu-shell[data-panel=main]{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(28px,5vw,56px);align-items:center}.menu-shell:not([data-panel=main]) .menu-hero{display:none}.menu-shell[data-panel=online],.menu-shell[data-panel=options],.menu-shell[data-panel=connecting]{grid-template-columns:1fr;width:min(960px,calc(100vw - 32px));gap:22px}.menu-shell[data-panel=options]{width:min(1040px,calc(100vw - 24px));max-height:min(940px,calc(100dvh - 24px));padding:clamp(24px,3.5vw,40px)}@keyframes menu-enter{0%{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}.menu-hero{display:flex;flex-direction:column;gap:18px;min-width:0}.menu-kicker{align-self:flex-start;padding:8px 14px;border:2px solid var(--amber);background:#07090fbf;color:var(--amber);font:700 12px/1 var(--font-mono);letter-spacing:.28em;box-shadow:4px 4px #ffb40047}.menu-title{margin:0;font-family:var(--font-display);font-size:clamp(56px,11vw,108px);font-weight:400;line-height:.82;letter-spacing:.05em;color:var(--cream);text-shadow:0 5px 0 #5a1a28,0 16px 40px rgb(0 0 0 / 5%);transform:rotate(-1.5deg)}.menu-tagline{margin:0;max-width:22ch;color:var(--muted);font:600 clamp(16px,2.2vw,20px)/1.4 var(--font-ui)}.menu-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.menu-chip{padding:7px 12px;border:1px solid rgb(255 255 255 / 18%);background:#ffffff0d;color:#c5cede;font:700 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.menu-screen[data-screen=main]{min-width:0}.menu-rail{display:flex;flex-direction:column;gap:12px}.menu-rail-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;width:100%;padding:18px 20px;border:2px solid rgb(255 255 255 / 16%);background:linear-gradient(120deg,#ffffff12,#ffffff05);color:var(--cream);text-align:left;cursor:pointer;box-shadow:4px 4px #00000059;transition:transform .15s var(--pop),border-color .15s ease,background .15s ease,box-shadow .15s ease}.menu-rail-item:hover,.menu-rail-item:focus-visible{transform:translate(-3px,-3px);border-color:#ffb400a6;background:linear-gradient(120deg,#ffb40033,#ffb4000f);box-shadow:7px 7px #ffb40047;outline:none}.menu-rail-item--go{border-color:var(--amber);background:linear-gradient(125deg,#ffcf4d,#ffb400 55%,#e0912f);color:var(--ink)}.menu-rail-item--go:hover,.menu-rail-item--go:focus-visible{background:linear-gradient(125deg,#ffe08a,#ffb400);box-shadow:7px 7px #00000059}.menu-rail-num{font:700 clamp(22px,3vw,28px)/1 var(--font-mono);letter-spacing:.04em;opacity:.55}.menu-rail-item--go .menu-rail-num{opacity:.7;color:var(--ink)}.menu-rail-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.menu-rail-copy strong{font-family:var(--font-display);font-size:clamp(26px,4vw,34px);font-weight:400;letter-spacing:.08em;line-height:1}.menu-rail-copy em{font:600 14px/1.35 var(--font-ui);font-style:normal;opacity:.72}.menu-rail-item--go .menu-rail-copy em{color:#07090fbf}.menu-panel-head{display:flex;align-items:center;gap:16px;margin-bottom:4px}.menu-panel-head h2{margin:0;font-family:var(--font-display);font-size:clamp(32px,5vw,48px);font-weight:400;letter-spacing:.06em;line-height:.95}.menu-panel-head p{margin:4px 0 0;color:var(--muted);font:600 15px/1.35 var(--font-ui)}.menu-panel-head-text{min-width:0;flex:1}.menu-icon-back{display:grid;width:52px;height:52px;flex:0 0 auto;place-items:center;border:2px solid rgb(255 255 255 / 22%);background:#ffffff0d;color:var(--cream);font:700 22px/1 var(--font-mono);cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .14s var(--pop)}.menu-icon-back:hover,.menu-icon-back:focus-visible{border-color:var(--amber);background:#ffb40024;outline:none;transform:translate(-2px)}.menu-back{align-self:flex-start;margin-top:8px;padding:12px 4px;border:0;background:none;color:var(--amber);font:700 15px/1.2 var(--font-ui);letter-spacing:.04em;cursor:pointer;text-underline-offset:4px}.menu-back:hover,.menu-back:focus-visible{text-decoration:underline;outline:none}.menu-screen{display:flex;flex-direction:column;gap:18px;min-width:0}.menu-screen[hidden]{display:none!important}.menu-hint{margin:0;min-height:1.4em;color:#ff9db0;font:700 15px/1.4 var(--font-ui)}.menu-hint--ok{color:#8fe89a}.online-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.online-card{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:28px 26px;border:2px solid rgb(255 255 255 / 16%);background:linear-gradient(160deg,#ffffff12,#ffffff05);color:inherit;text-align:left;cursor:default}button.online-card{cursor:pointer;transition:transform .16s var(--pop),border-color .16s ease,background .16s ease,box-shadow .16s ease}button.online-card:hover,button.online-card:focus-visible{transform:translate(-3px,-3px);border-color:var(--amber);background:linear-gradient(160deg,#ffb40038,#ffb4000f);box-shadow:8px 8px #ffb40038;outline:none}.online-card--create{border-color:var(--amber);background:linear-gradient(150deg,#ffb4002e,#ffb4000a)}.online-card-mark{display:grid;width:56px;height:56px;place-items:center;border:2px solid currentColor;font:700 28px/1 var(--font-mono);opacity:.9}.online-card strong{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:400;letter-spacing:.06em;line-height:.95}.online-card>span:not(.online-card-mark){color:var(--muted);font:600 15px/1.4 var(--font-ui);max-width:28ch}.online-card--join{justify-content:space-between}.join-row{display:flex;gap:10px;margin-top:auto}.join-input{flex:1;min-width:0;padding:16px 18px;border:2px solid rgb(255 255 255 / 20%);background:#07090fd9;color:var(--cream);font:700 clamp(18px,2.5vw,22px)/1 var(--font-mono);letter-spacing:.14em}.join-input::placeholder{color:#9aa3b58c;letter-spacing:.08em}.join-input:focus-visible{border-color:var(--amber);outline:none}.join-go{flex:0 0 auto;padding:0 22px;border:2px solid var(--amber);background:var(--amber);color:var(--ink);font-family:var(--font-display);font-size:22px;letter-spacing:.08em;cursor:pointer}.join-go:hover,.join-go:focus-visible{background:var(--amber-hot);outline:none}.options-tabs{display:flex;gap:8px;padding-bottom:4px;border-bottom:3px solid rgb(255 255 255 / 12%)}.options-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:14px 22px;border:2px solid transparent;border-bottom:0;background:#ffffff0a;color:#ffffff8c;font-family:var(--font-display);font-size:20px;letter-spacing:.08em;cursor:pointer}.options-tab[aria-selected=true]{border-color:#ffb40073;background:#ffb40024;color:var(--cream);box-shadow:inset 0 -3px 0 var(--amber)}.options-tab:hover,.options-tab:focus-visible{color:var(--cream);outline:none}.options-panel{display:flex;flex-direction:column;gap:18px;padding-top:8px}.options-panel h3{margin:0;color:var(--muted);font:700 13px/1.2 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}.option-row{display:flex;flex-direction:column;gap:14px;padding:22px 24px;border:2px solid rgb(255 255 255 / 12%);background:#ffffff0a}.option-row label{font:700 18px/1.2 var(--font-ui)}.volume-track{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.volume-track input[type=range]{width:100%;height:12px;accent-color:var(--amber);cursor:pointer}.volume-track output{min-width:4.5ch;color:var(--amber);font:700 22px/1 var(--font-mono);text-align:right}.rebind-list{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,.7fr);gap:10px 16px;align-items:center;max-height:min(48vh,420px);overflow:auto;padding:8px 4px 8px 0}.rebind-label{color:#d7dde8;font:700 16px/1.2 var(--font-ui)}.rebind-key{padding:12px 14px;border:2px solid rgb(255 255 255 / 18%);background:#07090fb3;color:var(--cream);font:700 15px/1 var(--font-mono);letter-spacing:.04em;text-align:center;cursor:pointer}.rebind-key:hover,.rebind-key:focus-visible{border-color:var(--amber);outline:none}.rebind-key[data-listening=true]{border-color:var(--cyan);color:var(--cyan);animation:rebind-pulse .9s ease-in-out infinite}@keyframes rebind-pulse{50%{opacity:.55}}.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border:2px solid rgb(255 255 255 / 18%);background:#ffffff0f;color:var(--cream);font-family:var(--font-display);font-size:20px;letter-spacing:.08em;cursor:pointer;box-shadow:3px 3px #00000008;transition:transform .14s var(--pop),border-color .14s ease,background .14s ease}.menu-btn:hover,.menu-btn:focus-visible{transform:translate(-2px,-2px);border-color:#ffb4008c;outline:none}.menu-btn--primary{border-color:var(--amber);background:linear-gradient(150deg,#ffcf4d,#ffb400);color:var(--ink)}.menu-btn--ghost{border-style:dashed;font-size:16px;letter-spacing:.04em}.menu-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.menu-connecting{display:flex;flex-direction:column;align-items:center;gap:22px;padding:48px 24px;text-align:center}.menu-spinner{width:52px;height:52px;border:4px solid rgb(255 255 255 / 15%);border-top-color:var(--amber);border-radius:50%;animation:menu-spin .7s linear infinite}@keyframes menu-spin{to{transform:rotate(360deg)}}#connecting-label{margin:0;font-family:var(--font-display);font-size:clamp(28px,4vw,40px);letter-spacing:.06em}.lobby-screen .menu-backdrop{display:none}.lobby-screen .menu-shell{pointer-events:auto;width:min(1080px,calc(100vw - 24px));max-height:min(52vh,520px);margin:0;padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:14px;animation:none;box-shadow:0 -12px 48px #0000000d}.lobby-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.lobby-brand .menu-kicker{box-shadow:none;padding:6px 10px;font-size:11px}.lobby-code-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lobby-code-row .code-label{color:var(--muted);font:700 12px/1 var(--font-mono);letter-spacing:.16em}#lobby-code{color:var(--amber);font:700 clamp(26px,3.5vw,36px)/1 var(--font-mono);letter-spacing:.16em}.lobby-copy{padding:10px 14px;border:2px solid rgb(255 180 0 / 5%);background:#ffb4001f;color:var(--amber);font:700 13px/1 var(--font-mono);letter-spacing:.08em;cursor:pointer}.lobby-copy:hover,.lobby-copy:focus-visible{background:#ffb4003d;outline:none}.lobby-stage{display:none}.lobby-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.lobby-slot{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:2px solid rgb(255 255 255 / 12%);border-left:5px solid var(--player-color, #fff);background:#ffffff0a}.lobby-slot--empty{border-left-color:#ffffff05;border-style:dashed;opacity:.55}.lobby-slot .skin-swatch{flex:0 0 auto;width:40px;height:40px}.lobby-slot-body{display:flex;min-width:0;flex-direction:column;gap:4px}.lobby-slot-name{overflow:hidden;color:var(--cream);font:700 16px/1.15 var(--font-ui);text-overflow:ellipsis;white-space:nowrap}.lobby-slot-tags{display:flex;flex-wrap:wrap;gap:8px;font:700 11px/1 var(--font-mono);letter-spacing:.08em}.lobby-tag-host{color:var(--amber)}.lobby-tag-ready{color:#7fe08a}.lobby-tag-waiting{color:#ff9db0}.lobby-tag-you{color:var(--muted)}.lobby-skins-row{display:flex;flex-direction:column;gap:10px}.lobby-skins-row>.code-label{color:var(--muted);font:700 12px/1 var(--font-mono);letter-spacing:.14em}.skin-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.skin-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:2px solid rgb(255 255 255 / 14%);background:#ffffff0a;color:#dce6e3;font:700 13px/1.1 var(--font-ui);cursor:pointer;transition:transform .12s ease,border-color .12s ease}.skin-swatch{width:44px;height:44px;border:2px solid rgb(255 255 255 / 7%);border-radius:50% 45% 48% 43%;background:var(--skin-color, #fff);box-shadow:inset 0 -6px #0000002e;transform:rotate(-5deg)}.skin-option:hover,.skin-option:focus-visible{transform:translateY(-2px);border-color:#ffb4000d;outline:none}.skin-option[aria-pressed=true]{border-color:var(--skin-color, #ffb400);background:color-mix(in srgb,var(--skin-color, #ffb400) 22%,transparent);box-shadow:0 0 0 2px var(--skin-color, #ffb400)}.skin-option--taken{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}.skin-option--taken:after{content:"EN USO";position:absolute;top:6px;right:6px;font:700 9px/1 var(--font-mono);letter-spacing:.08em;color:var(--amber)}.lobby-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.lobby-actions .menu-btn{min-height:48px;padding-inline:22px}#lobby-ready[aria-pressed=true]{border-color:#7fe08a;background:linear-gradient(150deg,#7fe08a3d,#7fe08a0f)}body[data-app=menu] .online-brand,body[data-app=connecting] .online-brand,body[data-app=lobby] .online-brand{display:none}@media(max-width:860px){.menu-shell[data-panel=main]{grid-template-columns:1fr;gap:28px;width:min(560px,calc(100vw - 24px))}.menu-title{font-size:clamp(52px,16vw,80px)}.online-split{grid-template-columns:1fr}.online-card{min-height:0}.lobby-players{grid-template-columns:1fr}.skin-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.rebind-list{grid-template-columns:minmax(110px,1fr) minmax(100px,.85fr)}}@media(max-width:520px){.menu-shell{width:calc(100vw - 16px);padding:20px 16px}.join-row{flex-direction:column}.join-go{min-height:48px}.lobby-screen .menu-shell{max-height:min(62vh,640px)}}@media(prefers-reduced-motion:reduce){.menu-shell,.menu-spinner,.rebind-key[data-listening=true]{animation:none!important}}