/* Shared control finish. Load after the screen styles.
   Layout, map markers, navigation and input handlers remain screen-owned. */
:root {
  --control-fill: #20272f;
  --control-hover: #2a333d;
  --control-line: #58616b;
  --control-text: #eeeae2;
  --control-muted: #b6bec5;
  --control-copper: #d7a27d;
  --control-focus: #f1c6a5;
  --control-radius: 5px;
  --control-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23d7b294' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Native menus keep keyboard navigation, mobile pickers and their full labels. */
body:is(.studio-shell, .in-battle, .in-online) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  padding: 11px 39px 11px 13px;
  background-color: #1c232b;
  background-image: var(--control-select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  color: var(--control-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* This older lobby control has an inline background/padding shorthand. */
.studio-shell #mp-theater {
  background: #1c232b var(--control-select-arrow) no-repeat right 12px center / 16px 16px !important;
  padding: 11px 39px 11px 13px !important;
  border-color: var(--control-line) !important;
  color: var(--control-text) !important;
}

body select option {
  background: #1c232b;
  color: var(--control-text);
  font: inherit;
}

body:is(.studio-shell, .in-battle, .in-online) select:disabled {
  border-color: #3c444d;
  color: #969fa8;
  opacity: .65;
  cursor: not-allowed;
}

/* One clear primary action, quiet outlined alternatives. */
.studio-shell :is(.primary, .secondary),
.multiplayer :is(.primary, .secondary),
#modal :is(.primary, .secondary),
.field-pack-dialog :is(.fp-next, .fp-finish) {
  min-height: 44px;
  border-radius: var(--control-radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  gap: 10px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.studio-shell .primary,
.multiplayer .primary,
#modal .primary,
.field-pack-dialog :is(.fp-next, .fp-finish) {
  background: var(--control-copper);
  border: 1px solid #e4b590;
  color: #171c22;
  box-shadow: inset 0 1px #fff2;
}

.studio-shell .secondary,
.multiplayer .secondary,
#modal .secondary {
  background: var(--control-fill);
  border: 1px solid var(--control-line);
  color: var(--control-text);
  box-shadow: none;
}

.studio-shell :is(.studio-text-button, .studio-text-link, .studio-heading-link),
.multiplayer :is(.mp-text-button, .mp-connection button, .mp-connection a),
.field-pack-dialog .fp-close {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #d6b79d;
  font-size: 12px;
  line-height: 1.5;
  border-radius: var(--control-radius);
  text-underline-offset: 4px;
}

/* Tabs are selection controls, rather than competing primary actions. */
.studio-shell :is(.toolbar button, .deck-domain button) {
  min-height: 44px;
  background: #1b2229;
  border: 1px solid #49525d;
  border-radius: var(--control-radius);
  color: var(--control-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.studio-shell :is(.toolbar button.active, .toolbar button[aria-pressed="true"], .deck-domain button[aria-pressed="true"]),
.studio-shell .mp-tabs button.active {
  background: #342b25;
  border-color: #ba8b66;
  color: #f0c8a9;
  box-shadow: inset 0 0 0 1px #d7a27d18;
}

.studio-shell .toolbar button span { color: inherit; }
.studio-shell .mp-tabs button { border-radius: var(--control-radius); }
.studio-shell .mp-tabs small { font-size: 10px; line-height: 1.5; letter-spacing: .4px; }

.studio-shell :is(.deck-unit-row button, .studio-deck-card button, .studio-unlocks button),
.studio-shell #modal .close,
#studio-more-dialog [data-close-more] {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  color: #ecc6a9;
}

.studio-shell .studio-unlocks button { font-size: 12px; }
.studio-shell .deck-unit-row button { line-height: 1; }
.studio-shell .studio-card { transition: border-color 120ms ease; }
.studio-shell .studio-card:hover { transform: none; }

/* Disclosures remain native, with a reliable tap target and visible marker. */
.studio-shell :is(.deck-manage, .training-options, .studio-collection-context, .studio-readiness, .pr-info, .pr-online, .pr-crafting, .ol-help, .elo-method) > summary,
.studio-shell .mp-lobby summary,
.battle-screen .combat-sheet summary {
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 12px;
  line-height: 1.6;
  color: #ccd0d2;
  cursor: pointer;
}

summary::marker { color: #c9a588; }
.studio-shell .pr-crafting > summary { align-items: center; }
.studio-shell .pr-crafting > summary span { min-width: 0; }
.studio-shell .pr-crafting > summary span:last-child { text-align: right; }

/* Text inputs use the same surfaces without giving search a double border. */
.studio-shell :is(.deck-manage input, .mp-friend input, .elo-calculator input),
.studio-shell #mp-deck-name {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--control-line);
  border-radius: var(--control-radius);
  padding: 11px 13px;
  background: #1c232b;
  color: var(--control-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.studio-shell .studio-search {
  border-color: #49525d;
  border-radius: var(--control-radius);
  background: #1c232b;
}
.studio-shell .studio-search input { min-height: 44px; font-size: 13px; line-height: 1.4; }
.studio-shell .studio-search input::placeholder { color: #a2adb7; opacity: 1; }
.studio-shell .studio-search:focus-within { border-color: var(--control-focus); box-shadow: 0 0 0 2px #e1b18b25; }
.studio-shell .quiet-theater { gap: 12px; }
.studio-shell .quiet-theater select { flex: 0 1 320px; }
.studio-shell :is(.studio-collection-selects label, .deck-select-row, .deck-manage label, .mp-friend form > div) { min-width: 0; }
.studio-shell .deck-select-row > .primary { flex-shrink: 0; }
.studio-shell .studio-collection-selects label { color: #c3c9ce; }
.studio-shell :is(.deck-available, #modal),
#studio-more-dialog,
.battle-screen .combat-sheet { scrollbar-color: #6f7881 #171e25; }

/* Combat finish is intentionally limited to controls, not map or dock geometry. */
.battle-screen :is(.combat-hud > button, .combat-exit, .combat-actions button, .select-all, .combat-objectives button, .formation-list button, .combat-option-buttons button),
.battle-screen .combat-sheet :is(.secondary, .reserve),
.multiplayer .mp-reserves button {
  border-radius: var(--control-radius);
  font-family: inherit;
}

.battle-screen :is(.combat-option-buttons button, .combat-sheet .secondary),
.multiplayer .mp-reserves button {
  background: #25313e;
  border: 1px solid #596a7b;
  color: #e2e7eb;
}

.battle-screen .combat-sheet :is(button, select),
.multiplayer :is(.mp-order-buttons button, .mp-reserves button) { min-height: 44px; }
.battle-screen .sheet-title button { min-width: 44px; border-radius: var(--control-radius); color: #ecc6a9; }
.battle-screen .combat-option-buttons button { font-size: 12px; line-height: 1.4; }
.battle-screen .combat-sheet .map-controls { gap: 12px; }
.battle-screen .combat-sheet .map-controls label { min-width: 0; font-size: 12px; color: #bac5ce; }
.battle-screen .combat-sheet .map-controls select { width: 100%; }
.battle-screen .combat-hud > .primary { border-color: #e4b590; }
.battle-screen .formation-list button.active { border-color: #e4b590; background: #34313a; color: #f8dec9; }

/* Focus treatment also covers selects, disclosures and the search field. */
body :is(button, a, select, input, summary):focus-visible,
:is(.studio-shell, .battle-screen, .multiplayer, .field-pack-dialog) :is(button, a, select, input, summary):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
.studio-shell .studio-card:focus-visible,
.battle-screen .formation-list button:focus-visible,
.battle-screen .combat-objectives button:focus-visible { outline-offset: -3px; }
.studio-shell .studio-search input:focus-visible { outline: none; }
.studio-shell .studio-search:has(input:focus-visible) { outline: 2px solid var(--control-focus); outline-offset: 3px; }

/* Disabled controls remain readable and never acquire an enabled hover state. */
.studio-shell :is(.primary, .secondary, .toolbar button, .deck-domain button, .deck-unit-row button, .studio-unlocks button):disabled,
.multiplayer :is(.primary, .secondary, .mp-reserves button):disabled,
#modal :is(.primary, .secondary):disabled {
  background: #22282f;
  border-color: #424a53;
  color: #9da6af;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}
.battle-screen :is(.combat-actions button, .select-all, .formation-list button, .combat-sheet button):disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

@media (hover: hover) {
  body:is(.studio-shell, .in-battle, .in-online) select:not(:disabled):hover { border-color: #b3967f; }
  .studio-shell .primary:not(:disabled):hover,
  .multiplayer .primary:not(:disabled):hover,
  #modal .primary:not(:disabled):hover,
  .field-pack-dialog :is(.fp-next, .fp-finish):not(:disabled):hover { background: #e6b592; border-color: #efc5a5; transform: none; }
  .studio-shell .secondary:not(:disabled):hover,
  .multiplayer .secondary:not(:disabled):hover,
  #modal .secondary:not(:disabled):hover,
  .studio-shell :is(.deck-unit-row button, .studio-unlocks button):not(:disabled):hover { background: var(--control-hover); border-color: #b39379; }
  .studio-shell :is(.toolbar button, .deck-domain button):not(:disabled):hover { border-color: #d0a17c; color: #f4d6bd; }
  .studio-shell :is(.studio-text-button, .studio-text-link, .studio-heading-link):hover,
  .multiplayer :is(.mp-text-button, .mp-connection button, .mp-connection a):hover,
  .field-pack-dialog .fp-close:hover { color: #f1c6a5; text-decoration: underline; }
  .battle-screen :is(.combat-hud > button:not(.primary), .combat-exit, .combat-actions button, .select-all, .combat-option-buttons button):not(:disabled):hover,
  .battle-screen .combat-sheet :is(.secondary, .reserve):not(:disabled):hover,
  .multiplayer .mp-reserves button:not(:disabled):hover { background: #334254; border-color: #c2a18a; }
}

.studio-shell .primary:not(:disabled):active,
.multiplayer .primary:not(:disabled):active,
#modal .primary:not(:disabled):active { background: #c58f69; border-color: #dbac87; }
.studio-shell :is(.secondary, .deck-unit-row button, .studio-unlocks button):not(:disabled):active,
.multiplayer .secondary:not(:disabled):active { background: #171f27; border-color: #d0a17c; }
.battle-screen :is(.combat-hud > button:not(.primary), .combat-exit, .combat-actions button, .select-all, .combat-option-buttons button):not(:disabled):active,
.battle-screen .combat-sheet :is(.secondary, .reserve):not(:disabled):active { background: #1c2937; border-color: #d0a17c; }

@media (max-width: 700px) {
  /* Sixteen-pixel fields avoid automatic zoom in mobile Safari. */
  body:is(.studio-shell, .in-battle, .in-online) select:not([multiple]),
  .studio-shell :is(.deck-manage input, .mp-friend input, .elo-calculator input),
  .studio-shell #mp-deck-name,
  .studio-shell .studio-search input { font-size: 16px; }
  .studio-shell .studio-collection-selects { gap: 12px; }
  .studio-shell .studio-collection-selects label { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; margin-top: 0; font-size: 11px; }
  .studio-shell .studio-collection-selects select { width: 100%; }
  .studio-shell .quiet-theater select { flex: 1; }
  .studio-shell .studio-ownership.toolbar { flex-wrap: wrap; gap: 6px; }
  .studio-shell .studio-ownership.toolbar button { padding: 10px 12px; }
  .studio-shell .studio-heading-end .secondary { min-height: 44px; }
  .studio-shell .deck-select-row select { flex: 1 1 0; width: 0; }
  .studio-shell .deck-manage > div { flex-wrap: wrap; }
  .studio-shell .deck-manage > div:not(.toolbar):not(.studio-filter-row) > button { flex: 1 1 140px; }
}

@media (max-width: 360px) {
  .studio-shell .quiet-theater { gap: 8px; font-size: 11px; }
  .studio-shell .deck-select-row { gap: 8px; }
  .studio-shell .deck-select-row > .primary { padding-left: 12px; padding-right: 12px; font-size: 12px; }
  .studio-shell .studio-ownership.toolbar button { padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-shell :is(.primary, .secondary, .studio-card),
  .multiplayer :is(.primary, .secondary),
  #modal :is(.primary, .secondary),
  .field-pack-dialog :is(.fp-next, .fp-finish) { transition: none; }
}

@media (forced-colors: active) {
  body:is(.studio-shell, .in-battle, .in-online) select:not([multiple]) { appearance: auto; -webkit-appearance: auto; background-image: none; color: CanvasText; border-color: ButtonText; }
  .studio-shell #mp-theater { background: Canvas !important; color: CanvasText !important; border-color: ButtonText !important; }
  body :is(button, a, select, input, summary):focus-visible,
  :is(.studio-shell, .battle-screen, .multiplayer, .field-pack-dialog) :is(button, a, select, input, summary):focus-visible,
  .studio-shell .studio-search:has(input:focus-visible) { outline-color: Highlight; }
  .studio-shell :is(.toolbar button.active, .toolbar button[aria-pressed="true"], .deck-domain button[aria-pressed="true"]) { border: 2px solid Highlight; color: Highlight; }
}