/* 主選單: pages centred over the street (home, how to play, 選項 and setup), the logo above
   and the mech to one side. All pages share .menu-center. Loaded after
   polaris.css, in the same look: dark navy glass, the chosen mech's accent, amber for the lead. */

/* ---- the street behind the plain pages: darker round the buttons, not a column on the left */
#menu::before {
  background:
    linear-gradient(180deg, #081a29e6, #081a2900 210px),
    radial-gradient(ellipse 44% 70% at 50% 62%, #081a29d9, #081a2985 58%, transparent 100%);
}
#menu .logo { left: var(--safe-l); right: var(--safe-r); top: calc(30px + var(--safe-t)); max-width: none; text-align: center; }
/* back to the games' homepage, top left: the login chip's look in the other corner (settings.css, account.css) */
.menu-home {
  position: absolute; z-index: 3; top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l));
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-dim); background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
  color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.menu-home:hover { border-color: var(--line); color: var(--amber); }
.menu-home:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
:root.ph .menu-home { top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); height: 36px; padding: 0 10px; font-size: 13px; }
/* (the main page only: the others have a Back of their own, in this corner on a phone) */
#menu:not([data-view="home"]) .menu-home { display: none; }
/* the whole screen turns the mech (the buttons sit over it) */
#menu .model-control { inset: 0; }
.pilot-emote {
  --emote-size: clamp(64px, 9vh, 96px);
  position: absolute; z-index: 2; width: var(--emote-size); aspect-ratio: 1;
  left: clamp(calc(var(--safe-l) + var(--emote-size) / 2 + 12px), var(--emote-x, 50%), calc(100% - var(--safe-r) - var(--emote-size) / 2 - 12px));
  top: clamp(calc(var(--safe-t) + var(--emote-size) + 12px), var(--emote-y, 50%), calc(100% - var(--safe-b) - 12px));
  transform: translate(-50%, -100%); pointer-events: none; background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px #e6f1ff) drop-shadow(0 3px 5px #000b);
}
.pilot-emote[hidden] { display: none; }
.pilot-emote-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#menu[data-view="options"] .dev-badge { display: none; }

/* ---- the pages' stage: the buttons centred in what's under the logo */
.menu-center {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: calc(190px + var(--safe-t)) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l));
  overflow-y: auto; overscroll-behavior: contain; pointer-events: none; scrollbar-width: none;
}
.menu-center > * { margin-block: auto; pointer-events: auto; }
#menu:is([data-view="options"], [data-view="setup"]) .menu-center { padding-top: calc(112px + var(--safe-t)); overflow: hidden; }
.menu-center[hidden] { display: none; }

.main-menu { display: grid; gap: 10px; width: min(400px, 100%); }
.menu-title { margin: 0; text-align: center; font: 900 clamp(26px, 3vw, 34px)/1.15 var(--font); letter-spacing: 0.12em; color: var(--ink); text-shadow: 0 2px 14px #081a29; }
.menu-sub { margin: -4px 0 6px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--dim); text-shadow: 0 1px 3px #000; }

.main-btn {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; width: 100%; min-height: 64px; padding: 9px 22px;
  color: var(--ink); text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-dim); border-radius: 0; background: var(--panel);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.main-btn b { font: 900 clamp(20px, 2.1vw, 24px)/1.15 var(--font); letter-spacing: 0.16em; }
.main-btn small { font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; color: var(--dim); }
.main-btn:hover, .main-btn:focus-visible { background: #173246; border-color: var(--mech-accent); box-shadow: inset 4px 0 var(--mech-accent), inset -4px 0 var(--mech-accent); }
.main-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.main-btn:active { background: #1d3e55; }
/* the lead (故事): the amber of the launch button */
.main-btn.lead { color: #1a0f00; background: var(--amber); border-color: var(--amber); }
.main-btn.lead small { color: #3d2a06; }
.main-btn.lead:hover, .main-btn.lead:focus-visible { background: #ffd070; border-color: #ffd070; box-shadow: inset 4px 0 #1a0f00, inset -4px 0 #1a0f00; }
/* 選項, 離開 and 返回: smaller, a little apart from the modes */
.main-btn.minor { min-height: 50px; background: #081a29c4; }
.main-btn.minor b { font-size: clamp(16px, 1.7vw, 19px); }
.main-btn:not(.minor) + .main-btn.minor { margin-top: 10px; }
/* the home page's 選項 and 離開 are as big as the modes, only a little apart from them */
:where(#main-menu) .main-btn.minor { min-height: 64px; }
:where(#main-menu) .main-btn.minor b { font-size: clamp(20px, 2.1vw, 24px); }

/* ---- 千里眼新聞 on a television right of the home page's buttons (js/ui/menu-news.js; the picture's own
   look is news.css's): centred in the stage beside them, as wide as there's room for; a click changes the story */
.menu-news {
  --menu-w: 400px;
  position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;
  top: calc(190px + var(--safe-t)); bottom: calc(64px + var(--safe-b));
  left: calc(50% + var(--menu-w) / 2 + 28px); right: calc(20px + var(--safe-r));
}
#menu .menu-news > .news { position: relative; inset: auto; width: min(100%, 520px); pointer-events: auto; cursor: pointer; }
[data-mode="3d"] .menu-news { display: none; }

/* ---- 選項 */
.options {
  width: min(560px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line-dim); border-top: 2px solid var(--mech-accent); background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 50px #0006;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.options-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0b2132; border-bottom: 1px solid var(--line-dim); }
.options-head .ghost { margin: 0; flex: none; }
.options-head .menu-title { flex: 1; text-align: left; font-size: 22px; text-shadow: none; }
.options-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 18px; scrollbar-width: thin; scrollbar-color: #426277 #0c2030; }
.options .upscale-note { margin: 6px 0 10px; line-height: 1.4; }
.options [data-setting="upscaleScale"][hidden] { display: none; }
.options-body h3 { margin: 20px 0 8px; padding-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--line); border-bottom: 1px solid var(--line-dim); }
.options-body h3:first-child { margin-top: 14px; }
.options .row { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 12px; }
.options .seg button { min-height: 38px; font-size: 13px; }
.options .ghost:not(.small) { margin-top: 14px; }
.opt-volume { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--dim); }
.opt-volume output { color: var(--ink); font: 700 15px/1 'Chakra Petch', var(--cjk), sans-serif; font-variant-numeric: tabular-nums; }
.options input[type="range"] { display: block; width: 100%; height: 36px; margin: 4px 0 0; padding: 0; accent-color: var(--amber); cursor: pointer; }
.options .ghost[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.options .help { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-dim); }
/* its tabs (畫質 · 音訊 · 操作 · 其他) in the head; 操作 wider, for the controller's drawing beside its list */
.options { position: relative; }
.options[data-tab="controls"] { width: min(var(--w-xl), 100%); }
/* 畫質's own rows two to a line where the window allows: one column ran past a screen of scrolling */
@media (min-width: 760px) {
  .options[data-tab="graphics"] { width: min(var(--w-l), 100%); }
  .options #opt-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .options #opt-extras [data-setting="upscaling"], .options .upscale-note, .options #opt-extras .row:has(.seg > :nth-child(5)) { grid-column: 1 / -1; }
}
/* the pause menu's 選項: the same page, over the paused fight */
.pause-options { z-index: 21; }
.pause-options .options { max-height: calc(100dvh - 40px - var(--safe-t, 0px) - var(--safe-b, 0px)); }
.options-head { flex-wrap: wrap; }
.opt-tabs { flex: 1 1 100%; order: 3; gap: 4px; }
.opt-tabs button { min-height: 38px; font-size: 14px; letter-spacing: 0.08em; }
@media (min-width: 720px) { .opt-tabs { flex: 0 1 360px; order: 0; } .options-head .menu-title { flex: 1 1 auto; } }
.opt-pane[hidden], .opt-sub[hidden] { display: none; }
.opt-subtabs { margin-top: 14px; }
.opt-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dim); }
.options .ghost.danger, .opt-confirm .ghost.danger { border-color: rgba(255, 75, 62, 0.6); color: #ffb3ac; }
.options .ghost.danger:hover, .options .ghost.danger:focus-visible { border-color: var(--red); color: #fff; background: rgba(255, 75, 62, 0.16); }

/* 鍵盤＋滑鼠: an action a row, its two keys */
.bind-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.bind-table th { font-weight: 700; text-align: left; }
.bind-table thead th { padding: 0 6px 6px; font-size: 11px; letter-spacing: 0.14em; color: var(--line); border-bottom: 1px solid var(--line-dim); }
.bind-table tbody th { padding: 6px; }
.bind-table tbody th b { display: block; color: var(--ink); font-size: 14px; }
.bind-table tbody th small { display: block; margin-top: 1px; color: var(--dim); font-weight: 500; font-size: 12px; line-height: 1.35; }
.bind-table td { width: 30%; padding: 3px; }
.bind-table tbody tr + tr > * { border-top: 1px solid rgba(47, 210, 255, 0.12); }
.bind { width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 700 14px 'Chakra Petch', var(--cjk), sans-serif; cursor: pointer; }
.bind:hover, .bind:focus-visible { border-color: var(--line); }
.bind.empty { color: #5f7690; font-weight: 500; }
.bind.listening { border-color: var(--amber); color: var(--amber); background: rgba(255, 177, 46, 0.12); animation: bind-wait 1s ease-in-out infinite; }
@keyframes bind-wait { 50% { background: rgba(255, 177, 46, 0.24); } }
@media (prefers-reduced-motion: reduce) { .bind.listening { animation: none; } }
.bind-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); }

/* 手把: the controller (js/ui/pad-art.js), its buttons to click, the list beside it */
.opt-sub[data-sub-pane="pad"] { position: relative; }
.pad-layout { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 860px) { .pad-layout { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); align-items: center; } }
.pad-art { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 400 / 290; }
.pad-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pad-svg .pad-body { fill: url(#pad-body); stroke: var(--line-dim); stroke-width: 1.5; }
.pad-svg .pad-rim { fill: none; stroke: rgba(47, 210, 255, 0.14); stroke-width: 1.5; }
.pad-svg .pad-guide { fill: #0e1c2b; stroke: var(--line-dim); }
.pad-svg .pad-guide-ring { fill: none; stroke: var(--mech-accent, var(--line)); stroke-width: 2; opacity: 0.7; }
.pad-svg .stick-well { fill: #081320; stroke: rgba(47, 210, 255, 0.2); }
.pad-svg .stick { fill: url(#pad-stick); stroke: #5c7a96; stroke-width: 1.5; }
.pad-svg path.pb, .pad-svg rect.pb { fill: #1b3449; stroke: #5c7a96; stroke-width: 1.5; }
.pad-svg .face circle { fill: #10202f; stroke: var(--face); stroke-width: 2; }
.pad-svg .face text { fill: var(--face); font: 900 14px 'Chakra Petch', sans-serif; text-anchor: middle; }
.pad-svg .pl { fill: #9fb6cf; font: 700 12px 'Chakra Petch', sans-serif; text-anchor: middle; pointer-events: none; }
.pad-svg .pl.small { font-size: 9px; fill: #6d88a4; }
.pad-svg .pb { transition: fill 0.08s, stroke 0.08s; }
.pad-svg path.pb.hot, .pad-svg rect.pb.hot, .pad-svg .pb.hot .stick, .pad-svg .face.hot circle { stroke: var(--amber); stroke-width: 2.5; }
.pad-svg path.pb.on, .pad-svg rect.pb.on, .pad-svg .pb.on .stick, .pad-svg .face.on circle { fill: var(--amber); }
.pad-svg .face.on text { fill: #1a0f00; }
.pad-hit { position: absolute; translate: -50% -50%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.pad-hit.round { border-radius: 50%; }
.pad-hit:hover, .pad-hit.hot { box-shadow: 0 0 0 2px var(--amber), 0 0 14px rgba(255, 177, 46, 0.5); }
.pad-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.pad-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
.pad-glyph { display: grid; place-items: center; min-height: 28px; padding: 0 4px; white-space: nowrap; border: 1px solid #5c7a96; border-radius: 6px; color: #cfe2f5; font: 900 12px 'Chakra Petch', sans-serif; }
.pad-glyph.face { border-radius: 50%; width: 28px; justify-self: center; color: var(--face); border-color: var(--face); }
.pad-list .bind { min-height: 32px; text-align: left; font-family: var(--font); font-size: 13px; }
.pad-list .fixed { padding: 4px 9px; color: var(--dim); }
.pad-list li.on .pad-glyph { background: var(--amber); color: #1a0f00; border-color: var(--amber); }
.pad-pick {
  position: absolute; z-index: 3; left: 50%; top: 12px; translate: -50% 0; width: min(420px, 100%); padding: 14px;
  border: 1px solid var(--line-dim); border-top: 2px solid var(--amber); background: #0b1a29; box-shadow: 0 14px 40px #000a;
}
.opt-sub:has(> .pad-pick:not([hidden])) > :not(.pad-pick) { opacity: 0.3; }
.pad-pick[hidden] { display: none; }
.pad-pick p { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.pad-pick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.pad-pick-list button { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); color: var(--ink); text-align: left; font-weight: 600; cursor: pointer; }
.pad-pick-list button small { display: block; color: var(--dim); font-size: 11px; font-weight: 500; }
.pad-pick-list button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #1a0f00; }
.pad-pick-list button[aria-pressed="true"] small { color: #3d2a06; }
.pad-pick-list button:hover, .pad-pick-list button:focus-visible { border-color: var(--line); }

/* 其他: the campaign's reset asked first, over the panel */
.opt-confirm { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; background: rgba(4, 8, 16, 0.72); }
.opt-confirm[hidden] { display: none; }
.opt-confirm-box { width: min(var(--w-m), 100%); padding: 20px; background: var(--panel-solid); border: 1px solid rgba(255, 75, 62, 0.5); border-top: 3px solid var(--red); }
.opt-confirm-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; color: #ffb3ac; letter-spacing: 0.06em; }
.opt-confirm-box p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.opt-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.opt-confirm-actions .ghost { margin: 0; }

/* the first campaign's question: the menu's own page */
#ask-menu { width: min(400px, 100%); }

/* ---- a 戰鬥's setup: back, and where it is */
.setup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.setup-head .ghost { margin: 0; flex: none; }
.menu-sheet h2.setup-title { margin: 0; font-size: 17px; letter-spacing: 0.08em; font-weight: 900; color: var(--ink); }

/* ---- phones sideways, and short windows: the buttons close up */
@media (max-height: 640px) {
  .menu-news { top: calc(150px + var(--safe-t)); }
  .menu-center { padding-top: calc(150px + var(--safe-t)); }
  #menu:is([data-view="options"], [data-view="setup"]) .menu-center { padding-top: calc(96px + var(--safe-t)); }
  .main-btn { min-height: 54px; padding-block: 6px; }
  .main-btn.minor { min-height: 44px; }
}
@media (max-height: 540px) {
  .menu-news { --menu-w: 340px; top: calc(52px + var(--safe-t)); bottom: calc(10px + var(--safe-b)); }
  #menu .logo { top: calc(52px + var(--safe-t)); }
  #menu .logo h1 { font-size: 26px; }
  #menu .logo-en, #menu .dev-badge { display: none; }
  .menu-center, #menu:is([data-view="options"], [data-view="setup"]) .menu-center { padding-top: calc(90px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  .main-menu { gap: 6px; width: min(340px, 100%); }
  /* (教學 and 選項 side by side: six buttons in five rows) */
  #main-menu { grid-template-columns: 1fr 1fr; }
  #main-menu > .main-btn { grid-column: 1 / -1; }
  #main-menu > :is(#menu-tutorial, [data-go="options"]) { grid-column: auto; margin-top: 0; }
  .menu-sub { display: none; }
  #main-menu .main-btn small { display: none; }
  .main-btn, .main-btn.minor { min-height: 44px; padding-block: 4px; }
  .main-btn b { font-size: 18px; }
  .menu-title { font-size: 22px; }
  .options-body h3 { margin-top: 14px; }
}
/* portrait: the mech above, the buttons in the lower half */
@media (max-aspect-ratio: 4/5) {
  #menu .logo { top: calc(58px + var(--safe-t)); }
  #menu::before { background: linear-gradient(180deg, transparent 30%, #081a29d9 62%); }
  .menu-center { padding: max(44vh, 240px) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l)); }
  #menu:is([data-view="options"], [data-view="setup"]) .menu-center { padding-top: calc(100px + var(--safe-t)); }
  .main-menu { width: min(420px, 100%); }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .main-btn { min-height: 54px; }
  .main-btn.minor { min-height: 44px; }
}
/* no room beside the buttons (the TV would be too small to read): none */
@media (max-width: 939px), (max-aspect-ratio: 4/5) { .menu-news { display: none; } }
@media (max-height: 540px) and (min-width: 840px) and (min-aspect-ratio: 4/5) { .menu-news { display: flex; } }