/* Button appearance is owned here, after styles.css.
   Layered !important declarations outrank the unlayered legacy !important
   skins, regardless of their selector specificity. State variables have new
   names so their normal declarations do not compete with legacy rules. */
@layer game-controls {
:root {
  --control-surface: linear-gradient(180deg, #19292f, #101b21);
  --control-hover-surface: linear-gradient(180deg, #233c43, #172b32);
  --control-pressed-surface: linear-gradient(180deg, #0d1c22, #14282f);
  --control-selected-surface: linear-gradient(180deg, #20444b, #142e35);
  --control-edge: #526c76;
  --control-accent: #72dae0;
  --control-text: #edf6f7;
  --control-radius: 4px;
}

/* Selectable cards are controls too; combat sprites are deliberately excluded. */
:where(button, .formation-character-card, .battle-enemy-icon-slot[role="button"], .unit-panel[role="button"]) {
  --button-surface: var(--control-surface);
  --button-edge: var(--control-edge);
  --button-text: var(--control-text);
  --button-icon: none;
  --button-icon-size: 24px;
  --button-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  border-image: none !important;
  border: 1px solid var(--button-edge) !important;
  border-radius: var(--control-radius) !important;
  background-color: #101b21 !important;
  background-image: var(--button-icon), var(--button-surface) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: var(--button-icon-size) var(--button-icon-size), 100% 100% !important;
  color: var(--button-text) !important;
  box-shadow: var(--button-shadow) !important;
  text-shadow: none !important;
  outline: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}

:where(button, .formation-character-card, .battle-enemy-icon-slot[role="button"], .unit-panel[role="button"]):where(:hover, :focus-visible):where(:not(:disabled):not([aria-disabled="true"]):not(.locked)) {
  --button-surface: var(--control-hover-surface);
  --button-edge: var(--control-accent);
}

:where(button, .formation-character-card):where(.selected, .active, [aria-pressed="true"], [aria-selected="true"]) {
  --button-surface: var(--control-selected-surface);
  --button-edge: var(--control-accent);
  --button-shadow: inset 0 -3px 0 var(--control-accent);
}

/* Major actions retain hierarchy, with the same shape and surface treatment. */
:where(.stage-launch-button, .explore-launch-button, .exploration-continue-button, .commander-name-save, .unlock-confirm-button, .big-action.primary, .formation-status-action.primary) {
  --button-edge: #e0b568;
  --button-surface: linear-gradient(180deg, #443a28, #2b271e);
  --button-text: #ffedca;
}

:where(.stage-launch-button, .explore-launch-button, .exploration-continue-button, .commander-name-save, .unlock-confirm-button, .big-action.primary, .formation-status-action.primary):where(:hover, :focus-visible):where(:not(:disabled)) {
  --button-edge: #ffe0a0;
  --button-surface: linear-gradient(180deg, #594a30, #39301f);
}

:where(.battle-retreat-button, .retreat-confirm-yes) {
  --button-edge: #b87570;
  --button-text: #ffd8d4;
}

:where(button, .formation-character-card, .battle-enemy-icon-slot[role="button"], .unit-panel[role="button"]):where(:active:not(:disabled):not([aria-disabled="true"]):not(.locked)) {
  --button-surface: var(--control-pressed-surface);
  --button-shadow: inset 0 2px 5px rgb(0 0 0 / 35%);
}

/* No positional hover / press motion. Drag-and-drop transforms remain intact. */
button:not(.reordering):not(.dragging):not(.unlock-lock-button) {
  transform: none !important;
  filter: none !important;
}
button.unlock-lock-button { transform: translate(-50%, -50%) !important; filter: none !important; }

:where(button, [role="button"]):focus-visible {
  outline: 2px solid var(--control-accent) !important;
  outline-offset: 3px !important;
}

:where(button):where(:disabled, [aria-disabled="true"]) {
  --button-surface: linear-gradient(180deg, #182126, #131b20);
  --button-edge: #3f5058;
  --button-text: #9cabb2;
  --button-shadow: none;
  opacity: .52 !important;
  cursor: not-allowed;
}

/* Icon geometry is drawn in ui.css; button surfaces remain owned here. */
button.ui-image-icon {
  --button-icon: var(--ui-icon-image);
  color: transparent !important;
}
button.hud-button.ui-image-icon { --button-icon-size: 28px; }
button.ai-loop-slot-clear {
  --button-icon: var(--ui-icon-clear);
  --button-icon-size: 16px;
}
button .tool-icon.ui-image-icon {
  border: 0 !important;
  border-image: none !important;
  background: var(--ui-icon-image) center / contain no-repeat !important;
  box-shadow: none !important;
}

/* Remove competing selection frames and their extra glow; artwork is untouched. */
button.hangar-slot-tile.selected::after { content: none !important; }
button.hangar-slot-tile.selected .equipment-art { filter: none !important; }
button.hangar-slot-tile.selected span:not(.equipment-art) { text-shadow: none !important; }
button.shared-header-options::after { filter: none !important; }
button :where(.ops-label, .ops-label strong, .ops-label small) { text-shadow: none !important; }
button.big-action strong { text-shadow: none !important; }
button :where(.ops-label small, .stage-node-label small) { color: #b4c6cd !important; }
button.action-chip span { color: var(--control-text) !important; }
button.action-chip strong { background: none !important; border-radius: 0 !important; text-shadow: none !important; }

/* Keep the diamond layout and shared control colors, with a rounded 2px rim. */
body[data-route="home"] .home-actions,
body[data-route="home"][data-viewport] .home-actions {
  grid-template-columns: repeat(2, 252px) !important;
  grid-template-rows: 136px 252px !important;
  gap: 0 4px !important;
  /* Move the four home commands together, preserving the diamond spacing. */
  transform: translateY(-51px);
  position: relative;
}
body[data-route="home"] button.big-action.home-duel-action {
  position: absolute !important;
  top: 272px;
  left: calc(50% - 114px);
}
body[data-route="home"] button.big-action,
body[data-route="home"][data-viewport] button.big-action {
  width: 228px !important;
  height: 228px !important;
  min-height: 228px !important;
  padding: 44px 28px !important;
  /* Keep each center in its original grid slot while opening up the gaps. */
  justify-self: center;
  margin: 12px 0 0 !important;
  --button-surface: var(--control-surface);
  --button-edge: #86bdcf;
  --button-text: var(--control-text);
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}
body[data-route="home"] button.big-action::before {
  content: "" !important;
  /* A rounded square rotated inside the diamond hit area. */
  inset: 14.64466094% !important;
  transform: rotate(45deg) !important;
  clip-path: none !important;
  border: 2px solid var(--button-edge) !important;
  border-radius: var(--control-radius) !important;
  background: var(--button-surface) !important;
  box-shadow: var(--button-shadow) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
body[data-route="home"] button.big-action::after {
  content: none !important;
}
body[data-route="home"] button.big-action:is(:hover, :focus-visible):not(:disabled) {
  --button-surface: var(--control-hover-surface);
  --button-edge: var(--control-accent);
}
body[data-route="home"] button.big-action:focus-visible {
  outline: none !important;
}
body[data-route="home"] button.big-action:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--control-accent) !important;
}
body[data-route="home"] button.big-action:active:not(:disabled) {
  --button-surface: var(--control-pressed-surface);
}
body[data-route="home"] button.big-action span {
  color: #b4c6cd !important;
}

/* Use the same credit frame in every shared header, including non-home routes.
   Keep their layout, icons and state labels; a resource readout is not a button. */
.shared-status-tools .shared-credit,
body[data-route="home"] :is(.home-status-tools .shared-credit, button.shared-header-options, button.home-ui-toggle) {
  border: 1px solid var(--control-edge) !important;
  border-image: none !important;
  border-radius: var(--control-radius) !important;
  background-color: #101b21 !important;
  background-image: var(--control-surface) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%) !important;
  color: var(--control-text) !important;
  text-shadow: none !important;
}
body[data-route="home"] button:is(.shared-header-options, .home-ui-toggle):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--control-accent) !important;
  background-image: var(--control-hover-surface) !important;
}
body[data-route="home"] button:is(.shared-header-options, .home-ui-toggle):active:not(:disabled) {
  background-image: var(--control-pressed-surface) !important;
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 35%) !important;
}
body[data-route="home"] .home-status-tools .shared-credit::before {
  filter: none !important;
}

/* Clip the whole readout to its rounded outline, including at fractional canvas scales. */
.shared-status-tools .shared-credit {
  overflow: hidden;
  background-clip: padding-box !important;
  clip-path: inset(0 round var(--control-radius));
}

/* Special hit areas must never become opaque rectangular buttons. */
button.start-launch-button,
button.ai-loop-slot-select {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}
button.start-launch-button { border-radius: 0 !important; }
button.start-launch-button:focus-visible strong {
  outline: 2px solid var(--control-accent);
  outline-offset: 6px;
}

/* Slideshow controls share one quiet, frameless treatment. */
button.home-slide-arrow,
button.home-slide-dot {
  display: grid !important;
  place-items: center !important;
  --slide-nav-color: #63818b;
  color: var(--slide-nav-color) !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}
button:is(.home-slide-arrow, .home-slide-dot):is(:hover, :focus-visible),
button.home-slide-dot.active { --slide-nav-color: var(--control-accent); }
button.home-slide-arrow {
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
button.home-slide-arrow::before {
  content: "" !important;
  position: static !important;
  grid-area: 1 / 1;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  background: none !important;
  box-shadow: none !important;
  transform: rotate(135deg);
}
button.home-slide-arrow:last-child::before { transform: rotate(-45deg); }
button.home-slide-arrow::after { content: none !important; }
button.home-slide-dot {
  width: 28px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  --button-surface: transparent;
  --button-edge: transparent;
  --button-shadow: none;
}

/* The commander name is a quiet inline edit control, not a primary action. */

button.commander-name-button {
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}
button.commander-name-button:hover { text-decoration: underline !important; text-underline-offset: 4px !important; }

/* Preserve important battle status signals on the clickable information cards. */
.unit-panel[role="button"].skill-full { --button-edge: #e0b568; --button-shadow: inset 0 -3px 0 #e0b568; }
.unit-panel[role="button"].is-action-focus { --button-edge: var(--control-accent); }
.unit-panel[role="button"].defeated { --button-edge: #684c4b; }

@media (prefers-reduced-motion: reduce) {
  :where(button, .formation-character-card, .battle-enemy-icon-slot[role="button"], .unit-panel[role="button"]) { transition: none !important; }
}
}