/* Fleet command page. Gameplay controls keep their existing data-action hooks. */
.shipyard-panel {
  top: calc(var(--safe-top) + var(--hud-top-height) + var(--space-3));
  right: auto;
  bottom: calc(var(--safe-bottom) + var(--hud-bottom-height) + var(--space-3));
  left: 50%;
  display: flex;
  width: min(70rem, calc(100vw - var(--safe-left) - var(--safe-right) - 6.25rem));
  max-height: none;
  padding: var(--space-4);
  transform: translateX(-50%);
  flex-direction: column;
  overflow: hidden;
}

.shipyard-panel:not([hidden]) {
  animation: panel-enter-centered var(--motion-normal) var(--ease-tactical) both;
}

.shipyard-panel > .panel-header {
  flex: 0 0 auto;
  margin-bottom: var(--space-3);
}

.shipyard-overview {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.shipyard-overview-card {
  display: grid;
  min-width: 0;
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(17, 39, 62, 0.84), rgba(4, 13, 24, 0.94));
  box-shadow: var(--inset-metal);
}

.shipyard-overview-card small,
.shipyard-overview-card em {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-style: normal;
  letter-spacing: var(--tracking-label);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.shipyard-overview-card strong {
  align-self: center;
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.shipyard-overview-card--capacity strong {
  color: var(--accent-gold-bright);
}

.shipyard-overview-card > span {
  align-self: end;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.shipyard-overview-card > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-cyan), var(--state-success));
}

.shipyard-view-switch {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.shipyard-view-switch button {
  min-height: var(--touch-min);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.shipyard-view-switch button.is-active {
  border-color: rgba(215, 179, 93, 0.68);
  background: linear-gradient(180deg, rgba(93, 72, 26, 0.58), rgba(12, 25, 41, 0.94));
  color: var(--accent-gold-bright);
}

.shipyard-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-3);
}

.shipyard-section {
  display: flex;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(3, 10, 20, 0.5);
  flex-direction: column;
  overflow: hidden;
}

.shipyard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(15, 34, 55, 0.94), rgba(7, 19, 34, 0.9));
}

.shipyard-section-header div {
  min-width: 0;
}

.shipyard-section-header small,
.shipyard-section-header strong,
.shipyard-section-header p {
  display: block;
}

.shipyard-section-header small {
  color: var(--accent-cyan);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.shipyard-section-header strong {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
}

.shipyard-section-header p {
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipyard-section-header > span {
  flex: 0 0 auto;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--text-2xs);
}

.shipyard-panel .fleet-formation-list,
.shipyard-panel .ship-list {
  display: grid;
  min-height: 0;
  padding: var(--space-3);
  gap: var(--space-3);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.shipyard-panel .fleet-formation-list {
  margin: 0;
}

.shipyard-panel .formation-card {
  display: block;
  padding: var(--space-4);
  border-left: 2px solid var(--tier-accent, var(--line-default));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tier-accent, var(--accent-cyan)) 7%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(16, 37, 60, 0.88), rgba(4, 13, 24, 0.96));
}

.shipyard-panel .formation-card.is-selected {
  border-color: var(--accent-gold);
  border-left-color: var(--accent-gold-bright);
  box-shadow: inset 0 0 0 1px rgba(215, 179, 93, 0.15), var(--inset-metal);
}

.fleet-formation-header {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.fleet-formation-header .ship-badge {
  width: 2.35rem;
  height: 2.35rem;
  border-color: var(--tier-accent, var(--line-strong));
  color: var(--text-primary);
}

.fleet-formation-header > div {
  min-width: 0;
}

.fleet-formation-header strong,
.fleet-formation-header p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-formation-header strong {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
}

.fleet-formation-header p {
  margin: 0.15rem 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.fleet-status-badge {
  border-color: var(--line-default);
  color: var(--state-success);
}

.formation-card[data-state="moving"] .fleet-status-badge,
.formation-card[data-state="returning"] .fleet-status-badge,
.formation-card[data-state="retreating"] .fleet-status-badge {
  color: var(--state-warning);
}

.formation-card[data-state="resolving"] .fleet-status-badge {
  color: var(--state-danger);
}

.fleet-vitals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.fleet-vital {
  display: grid;
  min-width: 0;
  min-height: 3.15rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

.fleet-vital small,
.fleet-vital em {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 0.56rem;
  font-style: normal;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fleet-vital strong {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-vital > i {
  align-self: end;
  height: 0.2rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(127, 148, 170, 0.18);
}

.fleet-vital > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--state-success);
}

.fleet-vital--cargo > i b {
  background: var(--accent-cyan);
}

.fleet-loadout {
  display: grid;
  grid-template-columns: 1.25fr 0.5fr 1.15fr 0.9fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.fleet-loadout button {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, rgba(29, 67, 96, 0.78), rgba(7, 22, 39, 0.94));
  text-align: left;
}

.fleet-loadout button small,
.fleet-loadout button strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-loadout button small {
  color: var(--text-tertiary);
  font-size: 0.56rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.fleet-loadout button strong {
  margin-top: 0.15rem;
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.fleet-loadout [data-action="role"] {
  border-color: rgba(103, 204, 138, 0.42);
}

.fleet-formation-footer {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(13rem, 1.1fr);
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.fleet-select-button {
  min-height: var(--touch-comfortable);
  border-color: rgba(91, 198, 232, 0.48);
}

.formation-card.is-selected .fleet-select-button {
  border-color: rgba(215, 179, 93, 0.68);
  background: linear-gradient(180deg, rgba(112, 84, 28, 0.82), rgba(35, 29, 20, 0.94));
  color: var(--accent-gold-bright);
}

.fleet-quantity-control {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: stretch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow: hidden;
}

.fleet-quantity-control button {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 0;
  border-radius: 0;
  background: rgba(29, 67, 96, 0.72);
  font-size: var(--text-xl);
}

.fleet-quantity-control > span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  min-width: 0;
  padding: 0 var(--space-3);
  column-gap: var(--space-2);
}

.fleet-quantity-control small,
.fleet-quantity-control em {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 0.56rem;
  font-style: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fleet-quantity-control strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--accent-gold-bright);
  font-family: var(--font-data);
  font-size: var(--text-xl);
}

.ship-family-group {
  display: grid;
  gap: var(--space-2);
}

.ship-family-group > header {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

.ship-family-group > header .ship-badge {
  width: 2.25rem;
  height: 2.25rem;
}

.ship-family-group > header strong,
.ship-family-group > header p {
  display: block;
  margin: 0;
}

.ship-family-group > header strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.ship-family-group > header p {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.ship-family-models {
  display: grid;
  gap: var(--space-2);
}

.shipyard-panel .ship-card {
  display: block;
  padding: var(--space-3);
  border-left: 2px solid var(--tier-accent, var(--line-default));
}

.ship-model-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.ship-model-header > div {
  min-width: 0;
}

.ship-model-header > div strong,
.ship-model-header > div small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-model-header > div strong {
  margin: 0;
  font-size: var(--text-md);
}

.ship-model-header > div small,
.ship-stock small {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  text-transform: uppercase;
}

.ship-stock {
  display: grid;
  min-width: 3.5rem;
  text-align: right;
}

.ship-stock strong {
  color: var(--accent-gold-bright);
  font-family: var(--font-data);
  font-size: var(--text-md);
}

.ship-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.ship-stat-grid span {
  display: grid;
  padding: var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

.ship-stat-grid small {
  color: var(--text-tertiary);
  font-size: 0.54rem;
  text-transform: uppercase;
}

.ship-stat-grid strong {
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--text-xs);
}

.ship-cost-block {
  margin-top: var(--space-2);
}

.ship-cost-block > small {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ship-visual-cost {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.ship-visual-cost .resource-entry {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 17, 0.52);
}

.ship-visual-cost .resource-entry > .resource-art-badge,
.ship-visual-cost .resource-entry > i {
  width: 2rem;
  height: 2rem;
  border: 0;
  background-color: rgba(7, 24, 47, 0.72);
}

.ship-visual-cost .resource-entry em {
  display: grid;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  line-height: 1.1;
  text-transform: capitalize;
  white-space: normal;
}

.ship-visual-cost .resource-entry .tier-badge {
  min-height: 0.9rem;
  padding: 0.05rem 0.2rem;
  font-size: 0.5rem;
}

.ship-visual-cost .resource-entry b {
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--text-xs);
}

.resource-generic-badge {
  position: relative;
  display: block;
  background: radial-gradient(circle, rgba(91, 198, 232, 0.34), rgba(7, 24, 47, 0.82));
}

.resource-generic-badge::before {
  position: absolute;
  inset: 26%;
  border: 1px solid var(--accent-cyan);
  background: rgba(91, 198, 232, 0.18);
  content: "";
  transform: rotate(45deg);
}

.ship-lock-requirement {
  margin: var(--space-2) 0 0;
  color: var(--state-warning);
  font-size: var(--text-xs);
}

.shipyard-panel .ship-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.shipyard-panel .ship-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  gap: var(--space-2);
}

.shipyard-panel .ship-actions button small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.shipyard-panel .ship-actions button strong {
  margin: 0;
  color: var(--accent-gold-bright);
  font-family: var(--font-data);
  font-size: var(--text-md);
}

@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  .shipyard-panel {
    top: calc(var(--safe-top) + 3rem);
    right: calc(var(--safe-right) + var(--hud-rail-width) + var(--space-2));
    bottom: calc(var(--safe-bottom) + var(--hud-bottom-height) + var(--space-2));
    left: var(--safe-left);
    width: auto;
    padding: var(--space-2);
    transform: none;
  }

  .shipyard-panel:not([hidden]) {
    animation-name: panel-enter;
  }

  .shipyard-panel > .panel-header {
    top: calc(var(--space-2) * -1);
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .shipyard-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--space-2);
  }

  .shipyard-overview-card {
    min-height: 2.65rem;
    padding: var(--space-1) var(--space-2);
  }

  .shipyard-overview-card strong {
    font-size: var(--text-sm);
  }

  .shipyard-overview-card em {
    display: none;
  }

  .shipyard-view-switch {
    display: grid;
  }

  .shipyard-layout {
    display: block;
  }

  .shipyard-section {
    height: 100%;
  }

  .shipyard-panel[data-view="formations"] .shipyard-catalog,
  .shipyard-panel[data-view="construction"] .shipyard-roster {
    display: none;
  }

  .shipyard-section-header {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
  }

  .shipyard-section-header p {
    display: none;
  }

  .shipyard-panel .fleet-formation-list,
  .shipyard-panel .ship-list {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .shipyard-panel .formation-card {
    padding: var(--space-3);
  }

  .fleet-vitals {
    margin-top: var(--space-2);
  }

  .fleet-loadout,
  .fleet-formation-footer {
    margin-top: var(--space-2);
  }
}

@media (max-height: 420px) and (orientation: landscape) {
  .shipyard-overview {
    display: none;
  }

  .shipyard-section-header {
    display: none;
  }

  .shipyard-panel > .panel-header p {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--text-2xs);
  }

  .shipyard-panel .formation-card {
    padding: var(--space-2) var(--space-3);
  }

  .fleet-vital {
    min-height: 2.65rem;
    padding-block: var(--space-1);
  }

  .fleet-loadout button {
    min-height: var(--touch-min);
  }
}

@media (max-width: 620px) {
  .shipyard-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-vitals,
  .fleet-loadout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-formation-footer {
    grid-template-columns: 1fr;
  }

  .ship-visual-cost {
    grid-template-columns: 1fr;
  }
}

/* --- DA "Space Conquete" : vignettes de vaisseaux et cartes chunky --- */

.ship-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 2.7rem;
  border: 2px solid color-mix(in srgb, var(--tier-accent, var(--accent-cyan)) 60%, var(--line-default));
  border-radius: var(--radius-sm);
  background-image:
    url("/assets/hud/ship-tier-sheet.jpg"),
    radial-gradient(circle at 50% 42%, #f4f9ff, #bad3ea 82%);
  background-size: var(--thumb-size, 543% 469%), cover;
  background-position: var(--thumb-pos, 50% 50%), center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0.45rem rgba(9, 32, 74, 0.28), 0 0.2rem 0 rgba(5, 21, 53, 0.35);
}

.ship-thumb-tier {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border: 2px solid #fff;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, var(--accent-gold-bright), var(--accent-gold));
  color: #4a3305;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(5, 21, 53, 0.4);
}

.fleet-formation-header {
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
}

.ship-model-header .ship-thumb {
  width: 3.1rem;
  height: 2.5rem;
}

.fleet-roster-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.fleet-roster-actions button {
  min-height: 2.6rem;
  border-color: color-mix(in srgb, var(--accent-cyan-bright) 52%, var(--line-default));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(180deg, var(--accent-blue), var(--accent-blue-deep));
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--inset-metal), 0 0.24rem 0 rgba(12, 44, 96, 0.85), 0 0.6rem 1rem rgba(5, 21, 53, 0.25);
}

.fleet-roster-actions button:not(:disabled):active {
  box-shadow: inset 0 3px 6px rgba(7, 29, 66, 0.4), 0 0.08rem 0 rgba(12, 44, 96, 0.85);
}

.fleet-quantity-control {
  padding: 0.28rem;
  gap: 0.28rem;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: visible;
}

.fleet-quantity-control button {
  min-width: 2.55rem;
  min-height: 2.55rem;
  border-radius: 0.65rem;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(7, 29, 66, 0.5);
}

.fleet-quantity-control button[data-action="minus"]:not(:disabled) {
  border: 2px solid color-mix(in srgb, var(--accent-red) 55%, white 16%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(180deg, var(--accent-red), var(--accent-red-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0.2rem 0 rgba(120, 18, 26, 0.85);
}

.fleet-quantity-control button[data-action="plus"]:not(:disabled) {
  border: 2px solid color-mix(in srgb, var(--accent-green) 55%, white 16%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(180deg, var(--accent-green), var(--accent-green-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0.2rem 0 rgba(30, 96, 22, 0.85);
}

.fleet-quantity-control strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
}

.fleet-quantity-control strong::before {
  content: "x";
  margin-right: 0.06rem;
  font-size: 0.72em;
  opacity: 0.85;
}

.fleet-select-button {
  border-color: color-mix(in srgb, var(--accent-cyan-bright) 52%, var(--line-default));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(180deg, var(--accent-blue), var(--accent-blue-deep));
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  box-shadow: var(--inset-metal), 0 0.24rem 0 rgba(12, 44, 96, 0.85);
}

.formation-card.is-selected .fleet-select-button {
  border-color: color-mix(in srgb, var(--accent-gold) 78%, white 10%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 44%),
    linear-gradient(180deg, var(--accent-gold-bright), var(--accent-gold) 52%, #e89a18);
  color: #45320a;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.66);
  box-shadow: var(--inset-metal), 0 0.24rem 0 rgba(140, 84, 10, 0.72);
}

/* --- Rail des flottes : raccourci de rappel --- */

.fleet-quick-slot {
  position: relative;
  display: block;
}

.fleet-quick-recall {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--accent-gold) 78%, white 10%);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 44%),
    linear-gradient(180deg, var(--accent-gold-bright), var(--accent-gold) 55%, #e89a18);
  color: #45320a;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0.16rem 0 rgba(140, 84, 10, 0.75);
}

.fleet-quick-recall:not(:disabled):active {
  box-shadow: inset 0 2px 4px rgba(120, 70, 8, 0.4);
  transform: translateY(1px) scale(0.96);
}