@font-face{font-family:Anton;src:url('/assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

/* Ace Squadron: paper, ink and a moving space-poster plate. Flight UI stays separate. */
#menu,.ace-dialog,body[data-mode=menu] #manual{
  --paper:#eee5cd;--ink:#171814;--muted:#615b4d;--orange:#d94e16;
  --line:#99917e;--bg:var(--paper);--panel:#f4eddc;--accent:var(--orange);
  --amber:var(--orange);--green:#527643;--ease-out:cubic-bezier(.23,1,.32,1);
  color:var(--ink);color-scheme:light;scrollbar-color:var(--muted) var(--paper);
}
#menu.ace-menu{position:relative;display:grid;grid-template-columns:minmax(380px,37%) minmax(0,1fr);align-items:stretch;gap:0;min-height:100svh;padding:0;background:var(--paper);overflow:clip}
body[data-mode=menu]{background:#eee5cd}
body[data-mode=menu]>header{display:none}
#menu .launch-panel{width:auto;max-width:none;min-width:0;min-height:100svh;padding:20px 32px 16px;display:flex;flex-direction:column;z-index:2;container-type:inline-size;background:var(--paper)}
.ace-masthead{display:flex;align-items:center;gap:12px;font-size:10px;line-height:1.3;letter-spacing:.27em;white-space:nowrap}
.ace-masthead i,.ace-edition i{height:1px;background:var(--ink);flex:1}
#menu h1{font:400 32cqw/1.08 Anton,sans-serif;letter-spacing:-.025em;text-align:left;margin:12px 0 8px;white-space:nowrap;overflow:hidden}
#menu h1 span{display:block;width:max-content;color:var(--ink);transform:scaleX(.69);transform-origin:left center}
.ace-edition{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700;letter-spacing:.44em;white-space:nowrap;line-height:1.4;margin-bottom:27px}
#menu .factions{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px}
#menu button,.ace-dialog button,body[data-mode=menu] #manual button{border-radius:0;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out);touch-action:manipulation}
#menu .faction{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:15px;min-height:48px;padding:8px 12px;border:1px solid var(--line);color:var(--muted);background:transparent;font-size:13px;letter-spacing:.2em;line-height:1.2}
#menu .faction span{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
#menu .faction.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.faction svg{width:30px;height:30px;flex-shrink:0}
#menu #launch-ships{position:relative;margin:0 0 16px}
#menu #launch-ship-summary{display:flex;align-items:center;justify-content:space-between;padding:0;min-height:67px;color:var(--ink);background:none;border:0;list-style:none}
#launch-ship-summary::-webkit-details-marker{display:none}
#launch-ship-summary strong{display:block;font:400 clamp(24px,6.8cqw,40px)/1.15 Anton,sans-serif;text-transform:uppercase;letter-spacing:0}
#launch-ship-summary small{display:block;margin-top:6px;font:10px/1.4 Consolas,monospace;letter-spacing:.24em}
#menu svg:not(.faction svg):not(.ace-insignia svg){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;flex-shrink:0}
#menu #launch-options{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:10;grid-template-columns:1fr;background:var(--paper);padding:10px;border:1px solid var(--ink);box-shadow:0 16px 28px #17181430;max-height:52svh;overflow:auto}
#menu #launch-options .ship-choice{background:transparent;color:var(--ink);border:1px solid var(--line)}
#menu #launch-options .ship-choice:has(input:checked){border-color:var(--orange);background:#dfd5bd}
#menu #launch-options .ship-choice strong{font-family:Anton,sans-serif;color:var(--ink);font-weight:400;letter-spacing:.02em}
#menu #launch-options .ship-role,#menu #launch-options .ship-description,#menu #launch-options .ship-stats{color:var(--muted)}
#menu .ace-play-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 18px;min-height:76px;margin:0;background:var(--ink);border:1px solid var(--ink);color:var(--paper);font:400 clamp(24px,8.8cqw,52px)/1 Anton,sans-serif;letter-spacing:.015em}
#menu .ace-play-mode svg{height:32px;width:32px;color:var(--orange);stroke-width:5;transition:transform 180ms var(--ease-out)}
#menu .ace-play-mode>span{font:inherit;letter-spacing:inherit;float:none}
.ace-play-modes{display:grid;gap:10px;margin-bottom:12px}
.ace-navigation{margin:0 0 22px}
.career-preview-link{text-decoration:none;box-sizing:border-box}
#menu .ace-nav-row{display:flex;align-items:center;gap:22px;width:100%;min-height:47px;text-align:left;padding:9px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1.3}
.ace-nav-row .ace-number{color:var(--muted);font-size:15px;font-weight:400;letter-spacing:.12em}
#menu .ace-nav-row svg{margin-left:auto;width:15px;height:15px;opacity:0;transform:translateX(-5px);transition:opacity 150ms ease,transform 180ms var(--ease-out)}
#menu #bridge-launch{margin:0}
#menu #bridge-launch #bridge-loading{color:var(--orange)!important;font-size:11px}
.ace-briefing{margin-top:auto;padding:0 0 10px}
.ace-briefing-label{font-size:10px;color:#a6330b;font-weight:bold;letter-spacing:.2em}
#menu .destination{display:block;margin:6px 0 0;color:var(--ink)}
#menu #sector{font:400 32px/1.15 Anton,sans-serif;letter-spacing:.015em;text-transform:uppercase}
#mission-summary{font-size:10px;letter-spacing:.14em;margin:6px 0 0;text-transform:uppercase}
#menu #battle-preview{font-size:10px;color:var(--muted);margin:4px 0 9px}
.ace-mission-actions{display:flex;gap:24px;flex-wrap:wrap}
#menu .ace-mission-actions button{display:flex;align-items:center;gap:6px;min-height:32px;padding:2px 0;background:transparent;border:0;color:var(--muted);font-size:9px;letter-spacing:.15em}
#menu .ace-mission-actions svg{width:13px;height:13px;stroke-width:2}
.ace-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--ink);padding-top:12px;font-size:8px;line-height:1.5;letter-spacing:.06em;white-space:nowrap}
#menu .ace-footer button{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink);font-size:8px;padding:5px 0;letter-spacing:.06em;min-height:30px}
.ace-footer i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ace-footer [data-state=loading] i{background:#a67419}
.ace-footer [data-state=error] i{background:var(--orange)}
.ace-footer>span{color:var(--muted)}

.ace-art{position:sticky;top:0;align-self:start;height:100svh;min-height:600px;isolation:isolate;margin:0;overflow:hidden;background:#131412 url('/assets/menu/ace-backdrop.png') center/cover no-repeat;color:#eee5cd}
.ace-stripes{position:absolute;width:150%;left:-22%;top:21%;transform:rotate(33deg);display:grid;gap:14px;z-index:-1;pointer-events:none}
.ace-stripes i{display:block;background:#dc5317;height:60px;opacity:.92}
.ace-stripes i:nth-child(2){height:32px}.ace-stripes i:nth-child(3){height:15px}
.ace-art-top{position:absolute;top:27px;right:35px;display:flex;flex-direction:column;align-items:center;gap:18px;z-index:2}
.ace-art-top>span{font-size:11px;letter-spacing:.25em;border-bottom:1px solid #eee5cd;padding:0 8px 10px}
.ace-insignia svg{width:69px;height:69px}
.rebel-mark{display:none}
body[data-faction=rebel] .empire-mark{display:none}body[data-faction=rebel] .rebel-mark{display:block}
.ace-ship-drift{position:absolute;inset:7% -1% 8%;animation:ace-drift 11s ease-in-out infinite;animation-play-state:paused}
.ace-ship{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;filter:drop-shadow(0 25px 24px #0007);transition:opacity 240ms ease;pointer-events:none;user-select:none}
.ace-ship-rebel{opacity:0;transform:rotate(-8deg) scale(1.03)}
body[data-faction=rebel] .ace-ship-empire{opacity:0}body[data-faction=rebel] .ace-ship-rebel{opacity:1}
body[data-mode=menu]:not(.menu-suspended) .ace-ship-drift{animation-play-state:running}
.ace-art figcaption{position:absolute;right:34px;bottom:33px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;z-index:2}
.ace-art figcaption>span{font-size:10px;letter-spacing:.22em}
.ace-art figcaption>span:first-child{font-size:9px;margin-bottom:9px}
.ace-art figcaption strong{font:400 clamp(90px,11vw,172px)/1 Anton,sans-serif;letter-spacing:-.04em}
.ace-art figcaption>span:last-child{border-top:1px solid #eee5cd;padding-top:12px;margin-top:10px}
.ace-art-caption{position:absolute;bottom:35px;left:28px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.25em}
.ace-art-caption span{margin:14px 0}
@keyframes ace-drift{0%,100%{transform:translate3d(-5px,7px,0) rotate(-1deg)}50%{transform:translate3d(7px,-8px,0) rotate(1deg)}}

.ace-dialog,body[data-mode=menu] #manual{width:min(620px,calc(100% - 32px));max-width:620px;max-height:88svh;padding:28px 32px;border:1px solid var(--ink);background:var(--paper);box-shadow:0 24px 70px #0005}
.ace-dialog::backdrop,body[data-mode=menu] #manual::backdrop{background:#11130feb;backdrop-filter:none}
.ace-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:19px;margin-bottom:22px}
.ace-dialog h2,body[data-mode=menu] #manual h2{font:400 34px/1.2 Anton,sans-serif;letter-spacing:0;margin:0}
.ace-dialog-heading button{padding:9px 12px;background:none;color:var(--ink);border:1px solid var(--line);font-size:10px;min-height:40px}
.ace-dialog-intro{font-size:12px!important;line-height:1.7!important;margin-bottom:24px}
.ace-dialog .menu-settings{border:0;padding:0;margin:0;gap:16px}
.ace-dialog .setting-row{grid-template-columns:1fr 1.15fr;gap:18px}
.ace-dialog .setting-row label{margin:0;color:var(--ink);font-size:11px;letter-spacing:.06em}
.ace-dialog select,.ace-dialog input:not([type=checkbox]):not([type=range]){min-height:40px;background:#f7f0de;color:var(--ink);border:1px solid var(--line);font-size:11px;padding:8px}
.ace-dialog .setting-row output{color:var(--ink);font-size:10px}
.ace-dialog .size-summary{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 4px}
.ace-dialog .music-status{font-size:10px;line-height:1.6}
.ace-dialog input[type=range],.ace-dialog input[type=checkbox],#menu input{accent-color:var(--orange)}
.ace-dialog input[type=range]{min-height:30px}
#menu-network-dialog{width:min(820px,calc(100vw - 32px))}
.ace-dialog #room-code{width:100%}
.ace-dialog .lobby-form button,.ace-dialog #room-ready,.ace-dialog .lobby-row button{background:var(--ink);color:var(--paper);border:1px solid var(--ink);min-height:44px}
.lobby-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ace-dialog h3{font:400 22px/1.25 Anton,sans-serif;letter-spacing:0;margin:0}
.lobby-browser-heading button{background:transparent;color:var(--ink);border:1px solid var(--line);min-height:44px;font-size:10px;padding:8px 12px}
.ace-dialog #lobby-list-status{font-size:11px;line-height:1.6;margin:12px 0;color:var(--muted)}
#lobby-list{max-height:300px;overflow-y:auto;scrollbar-color:var(--muted) var(--paper)}
.lobby-row{display:grid;grid-template-columns:minmax(130px,1fr) 100px 86px 112px;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:10px}
.lobby-row strong{display:block;font-size:15px;letter-spacing:.06em;margin-bottom:5px}
.lobby-row div>span{display:block;color:var(--muted);font-size:10px;line-height:1.6;overflow-wrap:anywhere}
.lobby-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.lobby-row button{font-size:10px;padding:8px}
#join-lobby-details{border-block:1px solid var(--line);margin-top:18px;padding:4px 0}
#join-lobby-details summary{padding:14px 0;cursor:pointer;font-size:11px;line-height:1.5}
.lobby-create{margin-top:26px}
.ace-dialog .lobby-create>p{font-size:11px;line-height:1.7;margin:10px 0 16px;color:var(--muted)}
.lobby-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:end}
.ace-dialog .lobby-form label{margin:0;color:var(--ink);font-size:10px;line-height:1.5;letter-spacing:0}
.lobby-form label>span{color:var(--muted)}
.ace-dialog .lobby-form input,.ace-dialog .lobby-form select{display:block;width:100%;min-width:0;margin-top:7px;min-height:44px;caret-color:var(--ink)}
.ace-dialog .lobby-form input::placeholder{color:var(--muted);opacity:1}
.lobby-form button{justify-self:start;padding:10px 18px;font-size:11px}
#join-lobby-form{padding:5px 0 16px}
@media(max-width:560px){
 .lobby-row{grid-template-columns:minmax(0,1fr) 112px;gap:9px 12px}
 .lobby-row>div{grid-column:1;grid-row:1 / 3}.lobby-access{grid-column:2;grid-row:1}.lobby-count{grid-column:2;grid-row:2}.lobby-row button{grid-column:2;grid-row:3}
 .lobby-form{grid-template-columns:minmax(0,1fr)}.lobby-form button{width:100%}
}
.ace-dialog #network-status{font-size:11px;line-height:1.7;margin-top:16px;color:var(--ink)}
.ace-dialog #room-players{font-size:11px;gap:13px;margin:20px 0}
.ace-dialog .room-heading{flex-wrap:wrap}.ace-dialog .room-heading strong{font-size:13px}
.ace-dialog #crew-role{margin:10px 0 16px}
.ace-dialog .preload-panel{margin:0;background:none;border:0;padding:0;font-size:11px}
.ace-dialog .preload-panel>div{min-height:42px;border-bottom:1px solid var(--line)}
#menu :focus-visible,.ace-dialog :focus-visible,body[data-mode=menu] #manual :focus-visible{outline:2px solid var(--orange);outline-offset:4px}
#menu ::selection,.ace-dialog ::selection{color:var(--paper);background:var(--ink)}
#menu button:active:not(:disabled),.ace-dialog button:active:not(:disabled){transform:scale(.97)}
#menu button:disabled,.ace-dialog button:disabled{cursor:not-allowed;opacity:.45}
@media(hover:hover) and (pointer:fine){
  #menu .faction:hover:not(:disabled){background:#bd3e0f;color:#fff7e2;border-color:#bd3e0f}
  #menu .ace-play-mode:hover{background:var(--orange);color:var(--paper);border-color:var(--orange)}
  #menu .ace-play-mode:hover svg{color:var(--paper);transform:translateX(4px)}
  #menu .ace-nav-row:hover:not(:disabled){background:#ded4bb;color:#963107}
  #menu .ace-nav-row:hover svg{opacity:1;transform:translateX(0)}
  #menu #launch-ship-summary:hover{color:#a6330b}
  #menu .ace-mission-actions button:hover:not(:disabled),#menu .ace-footer button:hover{color:#a6330b}
  .ace-dialog button:hover:not(:disabled),body[data-mode=menu] #manual button:hover{background:#bd3e0f;color:var(--paper);border-color:#bd3e0f}
  #menu #launch-options .ship-choice:hover{background:#ded4bb}
}
@media(min-width:1600px){#menu .launch-panel{padding:34px 42px 23px}.ace-navigation{margin-bottom:32px}#menu .ace-nav-row{min-height:54px}.ace-edition{margin-bottom:35px}}
@media(min-width:761px) and (max-height:800px){
  #menu .launch-panel{padding-top:19px;padding-bottom:12px}#menu h1{font-size:28cqw;margin:8px 0}#menu h1 span{transform:scaleX(.79)}.ace-edition{margin-bottom:18px}#menu .factions{margin-bottom:12px}#menu #launch-ships{margin-bottom:10px}#menu #launch-ship-summary{min-height:58px}#menu .ace-play-mode{min-height:68px;font-size:8.8cqw}.ace-navigation{margin-bottom:18px}#menu .ace-nav-row{min-height:43px}.ace-briefing{padding-bottom:10px}
}
@media(max-width:1050px) and (min-width:761px){
  #menu.ace-menu{grid-template-columns:380px minmax(0,1fr)}#menu .launch-panel{padding-inline:24px}.ace-masthead{font-size:8px}.ace-edition{font-size:10px}.ace-art-top{right:22px}.ace-ship-drift{inset:12% -12% 12%}.ace-art-caption{display:none}
}
@media(max-width:760px){
  #menu.ace-menu{display:flex;flex-direction:column;padding:0;gap:0}
  #menu .launch-panel{order:1;width:100%;min-height:0;padding:24px;max-width:none}
  .ace-art{order:0;position:relative;width:100%;height:40svh;min-height:260px;max-height:390px;background-position:center 62%}
  .ace-ship-drift{inset:0 12% -3%}.ace-stripes{width:145%;top:12%;left:-17%;gap:8px}.ace-stripes i{height:34px}.ace-stripes i:nth-child(2){height:18px}.ace-stripes i:nth-child(3){height:9px}
  .ace-art-top{right:22px;top:20px;gap:12px}.ace-art-top>span{font-size:9px}.ace-insignia svg{width:42px;height:42px}
  .ace-art figcaption{right:22px;bottom:17px}.ace-art figcaption strong{font-size:54px}.ace-art figcaption>span:first-child{display:none}.ace-art figcaption>span:last-child{font-size:8px;padding-top:7px;margin-top:4px}.ace-art-caption{font-size:7px;left:17px;bottom:20px}
  #menu h1{font-size:32cqw;margin:9px 0}#menu h1 span{transform:scaleX(.69)}.ace-masthead{font-size:8px;letter-spacing:.19em}.ace-edition{font-size:11px;margin-bottom:23px}
  #menu .factions{gap:15px;margin-bottom:18px}#menu .faction{min-height:46px;font-size:12px}
  #menu #launch-ships{margin-bottom:15px}#menu .ace-play-mode{font-size:8.8cqw;min-height:72px}
  #menu .ace-nav-row{min-height:50px;font-size:11px;letter-spacing:.12em}.ace-navigation{margin-bottom:27px}.ace-briefing{padding-bottom:16px}#menu #sector{font-size:32px}
  .ace-footer{font-size:7px}.ace-footer>span{font-size:7px}.ace-dialog{padding:23px}.ace-dialog h2{font-size:28px}.ace-dialog .setting-row{gap:12px}.ace-dialog .setting-row label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .ace-ship-drift{animation:none;transform:none}.ace-ship{transition:opacity 120ms ease}
  #menu button,.ace-dialog button{transition:background-color 120ms ease,color 120ms ease}
  #menu button:active:not(:disabled),.ace-dialog button:active:not(:disabled){transform:none}
  #menu .ace-play-mode svg,#menu .ace-nav-row svg{transition:none;transform:none}
}