/* D / Sortie Cards. All text stays live; artwork comes from the game's atlas.
   One scrolling setup, with a persistent launch action, capped at --w-xl in two columns. */
#menu[data-view="setup"] .logo h1 { font-size: 30px; }
#menu[data-view="setup"] .dev-badge,
#menu[data-view="setup"] .logo-en { display: none; }
#menu[data-view="setup"] .menu-news { display: none; }
#setup.menu-sheet { position: relative; inset: auto; height: fit-content; min-height: 0;
  max-height: 100%; width: min(var(--w-l), 100%);
  display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); overflow: hidden; }
#setup .menu-command { padding: 10px 14px 0; position: static; }
#setup .setup-head { margin-bottom: 8px; }
#setup .setup-title { font-size: 17px; }
#setup .mode-note { font-size: 11px; margin: 6px 0 9px; }
#setup #mode button, #setup .ghost.small { min-height: 44px; }
#setup .modes button small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.battle-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 12px;
  scrollbar-width: thin; scrollbar-color: #426277 #0c2030; }
#setup .menu-setup, #setup .menu-loadout { padding: 0; overflow: visible; border: 0; }
.battle-section { margin-bottom: 10px; border: 1px solid var(--line-dim); background: #10273880; padding: 10px; }
#setup .battle-section h2 { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 900; letter-spacing: .03em; margin: 0 0 9px; }
.battle-section h2 i { font: 700 14px/1 'Chakra Petch', sans-serif; font-style: normal; color: var(--cyan, #57d8ff); border-right: 1px solid #426277; padding-right: 8px; }
.battle-location { position: relative; height: 100px; overflow: hidden; background: #0b2132; }
.battle-location img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.battle-location::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #061523f2, #06152300 85%); pointer-events: none; }
.battle-location > div { position: absolute; z-index: 1; bottom: 10px; left: 12px; right: 12px; display: grid; gap: 3px; }
.battle-location small { color: #9bdcf0; font-size: 10px; letter-spacing: .1em; }
.battle-location b { font-size: 22px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 5px #000; }
#setup .battle-area .row { margin: 7px 0 0; }
#setup .battle-area .row, #setup .battle-foe-row { display: block; }
#setup .battle-area .battle-section-head { margin: -5px 0 4px; }
#place { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: 4px; }
#setup #place button { min-height: 44px; padding: 5px; font-size: 11px; line-height: 1.2; }
.battle-more { display: block; min-height: 44px; margin: 0 0 0 auto; padding: 4px 8px; color: var(--dim); background: transparent; border: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.battle-more:hover { color: var(--line); }
.battle-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
#setup .battle-section-head h2 { flex: 1; margin: 0; white-space: nowrap; }
#setup .battle-section-head .row { display: flex; align-items: center; gap: 7px; margin: 0; }
#setup .stepper button { width: 44px; height: 44px; min-height: 44px; }
#setup .stepper b { min-width: 24px; font-size: 18px; }
#setup .battle-foe-row { margin-top: 8px; }
#foe { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#setup #foe button { display: flex; align-items: center; gap: 4px; text-align: left; min-height: 52px; padding: 4px 6px; font-size: 11px; line-height: 1.2; overflow: hidden; }
#foe button img { width: 42px; height: 44px; object-fit: cover; object-position: center top; flex: none; }
.battle-random { font: 700 26px/1 'Chakra Petch', sans-serif; color: var(--line); width: 32px; text-align: center; }
#setup .battle-invasion { display: flex; align-items: center; gap: 12px; border-color: #ffc45565; box-shadow: inset 3px 0 #ffc45590; }
#setup .battle-invasion h2 { color: var(--amber); margin-bottom: 4px; }
.battle-invasion h2 i { color: var(--amber); }
.battle-invasion > div:first-child { flex: 1; }
.battle-invasion .seg { flex: 0 0 112px; }
#setup .battle-invasion button { min-height: 44px; }
#setup .battle-invasion[data-enabled="true"] { background: #ffc45512; border-color: var(--amber); }
#invasion button[aria-pressed="true"][data-v="1"] { background: var(--amber); color: #1a0f00; border-color: var(--amber); box-shadow: none; }
.battle-note { color: var(--dim); font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.battle-fold { border: 1px solid var(--line-dim); margin-top: 7px; background: #10273880; }
#setup .menu-loadout.battle-fold { border: 1px solid var(--line-dim); }
.battle-fold summary { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.battle-fold summary::-webkit-details-marker { display: none; }
.battle-fold summary b { color: var(--mech-accent); font-size: 12px; }
.battle-chevron { margin-left: auto; font-size: 19px; line-height: 1; color: var(--dim); }
.battle-fold[open] > summary .battle-chevron { rotate: 180deg; }
.battle-fold-body { padding: 0 10px 12px; }
#setup .mechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#setup .mech-card { min-height: 78px; }
#setup #battle-rules .row { display: grid; grid-template-columns: 75px minmax(0, 1fr); align-items: center; gap: 10px; }
#setup #battle-rules .seg button { min-height: 44px; font-size: 12px; }
#setup .menu-deploy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 9px 14px 12px; }
#setup .menu-deploy .go { grid-column: 1; min-height: 48px; }
.battle-summary { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--dim); line-height: 1.4; }
#setup #room-leave { grid-column: 2; grid-row: 2; font-size: 12px; }
#setup .online, #setup #players { margin-bottom: 10px; }
.battle-details { min-width: 0; }
.endless-board { min-width: 0; margin: 10px 0 0; }
#setup .endless-board .seg button { min-height: 44px; font-size: 13px; }
.endless-board table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 10px; font-size: 12px; }
.endless-board th, .endless-board td { padding: 8px 4px; border-bottom: 1px solid var(--line-dim); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.endless-board th { color: var(--dim); font-weight: 500; }
.endless-board th:first-child { width: 36px; }
.endless-board th:nth-child(2) { width: 33%; }
.endless-board th:nth-child(3) { width: 48px; }
.endless-board td:nth-child(2), .endless-board th:nth-child(2) { text-align: left; }
.endless-board td:first-child { color: var(--amber); }
.endless-board [data-board-status]:empty { display: none; }
#setup[data-endless="true"] .menu-deploy { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px), (min-width: 800px) and (max-height: 540px) {
  #setup.menu-sheet { width: min(var(--w-xl), 100%); }
  .battle-scroll { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  #setup .menu-setup { min-width: 0; }
  .battle-details > :first-child { margin-top: 0; }
  .menu-setup > :last-child { margin-bottom: 0; }
  .endless-board { grid-column: 1 / -1; margin-top: 0; }
}
@media (min-width: 1250px) {
  #setup[data-endless="true"] { width: min(var(--w-page), 100%); }
  #setup[data-endless="true"] .battle-scroll { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(340px, 0.9fr); }
  .endless-board { grid-column: auto; }
}
@media (max-width: 760px) {
  #menu[data-view="setup"] .logo h1 { font-size: 23px; }
  .battle-scroll { padding: 8px; }
  #setup .menu-command { padding: 8px 8px 0; }
  #setup #place { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #foe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #setup .battle-invasion { gap: 8px; }
  .battle-invasion .seg { flex-basis: 92px; }
  #setup .mechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #setup .menu-deploy { padding: 8px; }
}
@media (max-height: 540px) and (min-aspect-ratio: 4/5) {
  #menu[data-view="setup"] .logo h1 { font-size: 26px; }
  #setup.menu-sheet { width: min(var(--w-xl), 100%); }
  #setup .setup-head { margin-bottom: 4px; }
  #setup .mode-note { display: none; }
  #setup .menu-command { padding-bottom: 6px; }
  .battle-location { height: 88px; }
}
@media (max-height: 540px) and (min-width: 640px) {
  #setup .menu-command { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 10px; padding-block: 8px; }
  #setup .setup-head { min-width: 0; margin: 0; }
  #setup .setup-title { font-size: 15px; }
  #setup #mode { margin: 0; }
}
/* 無盡: the district to deploy in, using the same cards as a battle's area. */
/* Polaris needs only its mech loadout; collapse the unused district/record columns. */
#setup[data-defense="true"] { width: min(var(--w-l), 100%); }
#setup[data-defense="true"] .battle-scroll { grid-template-columns: minmax(0, 1fr); }
#setup[data-defense="true"] .menu-setup { display: none; }
#setup .endless-area .row { display: block; margin: 7px 0 0; }
#district { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: 4px; }
#setup #district button { min-height: 44px; padding: 5px; font-size: 11px; line-height: 1.2; }
@media (max-width: 760px) { #setup #district { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* paints (shared/colors.js): the loadout's icon and the mini picker it (and a local seat's) opens */
.paint-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 3px; margin-left: auto; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.05); cursor: pointer; touch-action: manipulation; }
.paint-btn:hover, .paint-btn[aria-expanded="true"] { border-color: var(--line); }
.paint-btn:focus-visible, .paint-dot:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.paint-btn i { display: block; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, 0.55); }
.battle-fold summary .paint-btn + .battle-chevron { margin-left: 0; }
.slot .slot-paint { min-width: 34px; width: 34px; height: 32px; margin-left: 0; }
.paint-pop { position: fixed; z-index: 60; display: grid; grid-template-columns: repeat(4, 38px); gap: 6px; padding: 8px; border: 1px solid var(--line-dim); background: var(--panel-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.paint-dot { width: 38px; height: 38px; padding: 4px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); }
.paint-dot i { display: block; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, 0.55); }
.paint-dot[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }