body.menu-active{background:radial-gradient(ellipse at 50% 16%,#18314a 0%,#0b1725 42%,#050b13 100%);min-height:100dvh}
body.menu-active .app-header{display:none}
body.menu-active #error,body[data-screen=MENU] #connection,body[data-screen=SETUP] #connection,body.menu-active #clear-session,body.menu-active #connect{display:none!important}
#entry.menu-screen,#match-setup.setup-screen,#lobby.room-screen{display:grid;place-items:center;min-height:calc(100dvh - 35px);margin:0;padding:26px 18px;background:none;border:0}
.menu-shell{width:min(940px,100%);padding:clamp(24px,4vw,46px);border:1px solid #54799670;border-radius:10px;background:linear-gradient(145deg,#102437f2,#081522f5 72%);box-shadow:0 24px 80px #0009,inset 0 1px #a6d7f122;position:relative}
.menu-shell::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#59a9d4 30%,#b8c8d5 50%,#59a9d4 70%,transparent);opacity:.65}
.menu-eyebrow{color:#88bfdc;font-size:11px;font-weight:700;letter-spacing:.26em;margin-bottom:12px}
#entry h2{font-size:clamp(38px,6vw,75px);line-height:.95;letter-spacing:.08em;color:#f4f8fd;text-shadow:0 2px 20px #79c7ff50}
#entry h2 span{display:block;margin-top:11px;color:#a5c7de;font-size:clamp(12px,1.8vw,18px);letter-spacing:.29em}
.menu-intro{margin:25px 0 31px;color:#a9bdcc;font-size:15px}
.menu-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.menu-primary button,.primary-action{min-height:56px;border:1px solid #6ab9e9;background:linear-gradient(#23608c,#123b5f);color:#eef8ff;font-size:15px;font-weight:800;letter-spacing:.1em;box-shadow:0 0 22px #389bd440,inset 0 1px #a9ddfc55}.menu-primary button:hover,.primary-action:hover{background:linear-gradient(#307aaa,#185276);border-color:#b1e4ff}
.menu-secondary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:27px;padding-top:23px;border-top:1px solid #52718a50}.menu-secondary button{min-height:61px;background:#142637;border-color:#3b586e;font-size:12px;font-weight:700;letter-spacing:.06em}.menu-secondary button:disabled,.option-tile:disabled{opacity:1;color:#8da0ad;cursor:not-allowed}.menu-secondary small,.option-tile small{display:block;margin-top:6px;color:#7697a8;font-size:10px;font-weight:600;letter-spacing:.12em}
#match-setup .menu-shell,#lobby .menu-shell{width:min(980px,100%)}#match-setup h2,#lobby h2{font-size:clamp(28px,3.8vw,43px);letter-spacing:.08em;color:#eff6fc}#match-setup h3,#lobby h3{margin:26px 0 12px;color:#a6c9dd;font-size:12px;letter-spacing:.17em}
.menu-field{display:flex;flex-direction:column;gap:8px;color:#a7c8dc;font-size:11px;font-weight:700;letter-spacing:.12em}.menu-field input{width:100%;max-width:440px;margin:0;padding:12px 14px;background:#0a1725;border:1px solid #54728a;color:#ecf6fd;font-size:15px;letter-spacing:normal}.menu-field input:focus{outline:2px solid #5bb9e4;outline-offset:1px}.menu-field input::placeholder{color:#718a9c}
#create>.menu-field{margin-top:27px}.variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.option-tile{width:100%;min-height:96px;padding:16px;text-align:left;border:1px solid #4a687f;background:#102236;color:#d7e8f2;font-size:14px;font-weight:700;letter-spacing:.04em}.option-tile.selected,.base-picks button.selected,.faction-picks button.selected{border-color:#82cfff;background:linear-gradient(135deg,#174466,#10304c);color:#fff;box-shadow:0 0 17px #3b9bd240,inset 0 0 0 1px #82cfff33}
.mode-grid .option-tile{min-height:58px}.base-picks{display:flex;gap:12px;flex-wrap:wrap}.base-picks button{width:66px;height:56px;background:#102236;border:1px solid #4a687f;font-size:22px;font-weight:800}.menu-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:32px}.menu-actions button{min-width:150px;padding:12px 20px;font-weight:700;letter-spacing:.08em}.menu-actions button+button{margin-left:0}.menu-actions .primary-action{min-width:220px}
.menu-error{min-height:17px;margin:14px 0 0;color:#ffaaa6;font-size:13px}.menu-error:empty{visibility:hidden}
.room-heading{display:flex;justify-content:space-between;gap:22px;align-items:start}.room-code-panel{display:grid;grid-template-columns:auto auto;column-gap:14px;align-items:center;padding:12px 16px;border:1px solid #587c95;background:#091b2a;border-radius:6px}.room-code-panel small{grid-column:1/-1;color:#85b5d0;font-size:10px;letter-spacing:.15em}.room-code-panel strong{font-size:25px;letter-spacing:.16em;color:#f0f9ff}.room-code-panel button{font-size:10px;letter-spacing:.06em}.room-code-panel span{grid-column:1/-1;min-height:13px;font-size:10px;color:#99e5cc}
.match-summary{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 0}.match-summary span{padding:9px 13px;border:1px solid #42667c;background:#0a1a2a;border-radius:4px;color:#c4d9e7;font-size:12px;font-weight:600;letter-spacing:.06em}
.room-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.room-player{min-height:108px;padding:18px;border:1px solid #46667e;border-radius:7px;background:#0a1a29}.room-player.is-rebel{border-color:#ae555e}.room-player.is-empire{border-color:#4e91c4}.room-player small{display:block;color:#8ca8b9;font-size:10px;letter-spacing:.16em}.room-player strong{display:block;margin:9px 0 5px;font-size:18px;color:#ecf5fb}.room-player span{color:#a6bece;font-size:12px}.room-player.is-ready span{color:#a2e4ca}
.guest-join-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.guest-join-fields .menu-field input{max-width:none}.faction-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.faction-picks button{min-height:53px;border:1px solid #46667e;background:#102236;font-size:13px;font-weight:700;letter-spacing:.08em}.faction-picks button+button{margin-left:0}
@media(max-width:700px){#entry.menu-screen,#match-setup.setup-screen,#lobby.room-screen{padding:14px;align-items:start}.menu-shell{padding:24px}.menu-primary,.room-players,.guest-join-fields{grid-template-columns:1fr}.menu-secondary,.variant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-heading{flex-direction:column}.faction-picks{grid-template-columns:1fr}.menu-actions{flex-wrap:wrap}.menu-actions button,.menu-actions .primary-action{flex:1;min-width:135px}}
@media(max-width:420px){.menu-secondary,.variant-grid,.mode-grid{grid-template-columns:1fr}.base-picks button{flex:1}.menu-shell{padding:20px}}