html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 20% 12%, rgba(71, 139, 207, 0.28), transparent 32rem),
    linear-gradient(180deg, var(--space-deep), var(--space-void));
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.resource-art-badge {
  display: block;
  object-fit: contain;
  object-position: center;
}

.compartment-effect-grid .resource-art-badge,
.inline-resource-flow .resource-art-badge {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

button {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 2px solid color-mix(in srgb, var(--accent-cyan-bright) 46%, var(--line-default));
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, var(--accent-blue), var(--accent-blue-deep));
  box-shadow: var(--inset-metal), var(--shadow-1);
  color: var(--text-primary);
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(7, 29, 66, 0.42);
  transition:
    border-color var(--motion-fast) var(--ease-tactical),
    background-color var(--motion-fast) var(--ease-tactical),
    color var(--motion-fast) var(--ease-tactical),
    opacity var(--motion-fast) var(--ease-tactical),
    transform var(--motion-fast) var(--ease-tactical);
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--inset-metal);
}

button:not(:disabled):active {
  box-shadow: inset 0 3px 7px rgba(7, 29, 66, 0.32), 0 0.12rem 0 rgba(5, 21, 53, 0.46);
  transform: translateY(2px) scale(0.975);
}

button:disabled {
  border-color: var(--line-soft);
  background: linear-gradient(180deg, rgba(72, 102, 139, 0.74), rgba(38, 66, 105, 0.82));
  color: var(--text-tertiary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0.68;
  text-shadow: none;
}

.game-panel,
.hud-panel,
.drawer-panel,
.flagship-context-panel,
.contextual-bottom-sheet {
  border: 2px solid var(--line-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(145deg, var(--surface-3), var(--surface-1) 76%);
  box-shadow: var(--shadow-2), var(--inset-metal);
  backdrop-filter: blur(9px) saturate(1.06);
}

.hud-panel::before {
  background:
    linear-gradient(90deg, var(--accent-cyan), transparent 38%) top left / 46% 2px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%);
  border-radius: inherit;
  opacity: 0.84;
}

.panel-header strong,
.flagship-overview-header strong,
.selection-copy strong,
.sector-copy strong,
.admiral-identity-line h2 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

.panel-header p,
.hud-resource-copy small,
.commander-power-copy small,
.admiral-rarity,
.admiral-model-stage > small {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.panel-header {
  border-bottom: 2px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(180deg, var(--surface-raised), var(--surface-2));
  box-shadow: 0 0.3rem 0 rgba(5, 21, 53, 0.22);
}

.panel-header button,
.admiral-filters button,
.admiral-tabs button {
  border-color: var(--line-default);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--surface-sunken);
  box-shadow: var(--inset-metal);
}

.admiral-filters button.is-active,
.admiral-tabs button.is-active,
.bottom-navigation-item.is-active {
  border-color: color-mix(in srgb, var(--accent-gold) 78%, white 8%);
  color: var(--accent-gold-bright);
  background:
    linear-gradient(180deg, rgba(255, 224, 128, 0.2), transparent 52%),
    var(--surface-raised);
}

:where(
  .wing-card,
  .ship-card,
  .governor-card,
  .formation-card,
  .upgrade-node,
  .production-model,
  .production-queue-card,
  .production-order,
  .power-breakdown-card,
  .admiral-ability-card,
  .admiral-command-ship-card,
  .admiral-secondary-skills article,
  .hangar-mineral-card
) {
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(145deg, var(--surface-2), var(--surface-sunken));
  box-shadow: var(--inset-metal), var(--shadow-1);
}

:where(
  .wing-card.is-selected,
  .formation-card.is-active,
  .governor-card.is-assigned,
  .governor-card.admiral-collection-card.is-selected
) {
  border-color: color-mix(in srgb, var(--accent-cyan) 72%, var(--line-strong));
  background:
    linear-gradient(90deg, rgba(84, 220, 244, 0.2), transparent 54%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-2));
  box-shadow: var(--inset-metal), 0 0 0 2px rgba(84, 220, 244, 0.12), var(--shadow-1);
}

.hud-progress-bar,
.admiral-xp,
.power-breakdown-bar,
.progress-bar {
  min-height: 0.5rem;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 2px 4px rgba(5, 21, 53, 0.38), 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.hud-progress-bar > span,
.admiral-xp span,
.power-breakdown-bar span,
.progress-bar > span {
  border-radius: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26), 0 0 0.55rem currentColor;
}

.ui-badge,
.tier-badge,
.rarity-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.175rem 0.5rem;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
}

[data-tier="1"] { --tier-accent: var(--tier-1); }
[data-tier="2"] { --tier-accent: var(--tier-2); }
[data-tier="3"] { --tier-accent: var(--tier-3); }
[data-tier="4"] { --tier-accent: var(--tier-4); }
[data-tier="5"] { --tier-accent: var(--tier-5); }

[data-tier] .tier-badge,
.tier-badge[data-tier] {
  border-color: color-mix(in srgb, var(--tier-accent) 72%, transparent);
  color: var(--tier-accent);
}

.resource-entry[data-tier],
.hangar-mineral-card[data-tier] {
  border-color: color-mix(in srgb, var(--tier-accent) 30%, var(--line-soft));
}

.resource-entry .tier-badge,
.hangar-mineral-card .tier-badge {
  width: max-content;
  margin-top: 0.2rem;
  color: var(--tier-accent);
}

[data-rarity="common"] { --rarity-accent: var(--rarity-common); }
[data-rarity="rare"] { --rarity-accent: var(--rarity-rare); }
[data-rarity="epic"] { --rarity-accent: var(--rarity-epic); }
[data-rarity="legendary"] { --rarity-accent: var(--rarity-legendary); }
[data-rarity="mythic"] { --rarity-accent: var(--rarity-mythic); }

[data-rarity] .rarity-badge,
.rarity-badge[data-rarity] {
  border-color: color-mix(in srgb, var(--rarity-accent) 72%, transparent);
  color: var(--rarity-accent);
}

.admiral-collection-card[data-rarity] {
  border-left: 2px solid color-mix(in srgb, var(--rarity-accent) 74%, transparent);
}

.is-locked,
[aria-disabled="true"] {
  --state-accent: var(--text-tertiary);
}

.is-selected,
[aria-selected="true"],
[aria-pressed="true"] {
  --state-accent: var(--accent-cyan);
}

.is-selected,
[aria-selected="true"],
[aria-pressed="true"] {
  border-color: var(--state-accent);
  box-shadow: var(--inset-metal), 0 0 0 3px color-mix(in srgb, var(--state-accent) 18%, transparent), var(--shadow-1);
}

/* Shared building blocks for current and future screens. */
.primary-button {
  border-color: color-mix(in srgb, var(--accent-cyan-bright) 64%, white 10%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 44%),
    linear-gradient(180deg, var(--accent-blue), var(--accent-blue-deep));
}

.secondary-button {
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%),
    linear-gradient(180deg, var(--surface-raised), var(--surface-2));
}

.icon-button,
.hud-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch-min);
  padding: 0.5rem;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
}

.resource-counter,
.hud-resource-counter {
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, var(--surface-raised), var(--surface-2));
  box-shadow: var(--inset-metal), var(--shadow-1);
}

:where(.unit-card, .admiral-card, .mission-card, .notification-card) {
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(145deg, var(--surface-2), var(--surface-sunken));
  box-shadow: var(--inset-metal), var(--shadow-1);
}

.notification-card {
  border-left: 0.35rem solid var(--accent-cyan);
}

.notification-card.is-warning {
  border-left-color: var(--state-warning);
}

.notification-card.is-danger {
  border-left-color: var(--state-danger);
}

.tab-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.tab-bar > [aria-selected="true"] {
  color: var(--accent-gold-bright);
  background:
    linear-gradient(180deg, rgba(255, 224, 128, 0.18), transparent),
    var(--surface-raised);
}

.modal,
.tooltip {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-1));
  box-shadow: var(--shadow-3), var(--inset-metal);
}

.tooltip {
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.rarity-frame[data-rarity] {
  border-color: var(--rarity-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rarity-accent) 18%, transparent), var(--shadow-1);
}

.is-upgradeable {
  --state-accent: var(--state-success);
  border-color: color-mix(in srgb, var(--state-success) 72%, var(--line-strong));
}

.has-notification::after {
  border: 2px solid var(--text-primary);
  background: var(--state-danger);
  box-shadow: 0 2px 0 rgba(5, 21, 53, 0.34);
}

.is-loading {
  cursor: wait;
  opacity: 0.76;
}

.drawer-panel:not([hidden]),
.flagship-context-panel:not([hidden]),
.power-toast.is-visible {
  animation: panel-enter var(--motion-normal) var(--ease-tactical) both;
}

.admiral-tab-content > *,
.production-order.is-completed,
.combat-result-card {
  animation: content-reveal var(--motion-slow) var(--ease-tactical) both;
}

.combat-result-card {
  border-left: 2px solid var(--state-success);
}

.combat-result-card.is-defeat {
  border-left-color: var(--state-danger);
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(0.65rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes content-reveal {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

* {
  scrollbar-color: var(--accent-blue) var(--surface-sunken);
  scrollbar-width: thin;
}

@media (hover: hover) {
  button:not(:disabled):hover {
    border-color: var(--accent-cyan-bright);
    filter: brightness(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --- DA "Space Conquete" : titres de sections --- */

.panel-header strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shipyard-section-header small,
.resource-inventory-header small,
.selection-copy strong {
  color: var(--accent-cyan);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: 0 0 0.55rem rgba(70, 212, 255, 0.35);
}

/* Pastille de ressource illustree : l'image remplace le carre colore et ses
   initiales. Le fond reste sombre pour que les visuels clairs (cristal, credits)
   gardent du contraste. */
.ship-badge.unit-shape.has-resource-art {
  display: grid;
  place-items: center;
  padding: 0.1rem;
  border: 1px solid rgba(120, 180, 240, 0.28);
  background: radial-gradient(circle at 50% 35%, rgba(46, 96, 160, 0.5), rgba(6, 18, 42, 0.9) 70%);
}

.ship-badge.unit-shape.has-resource-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.1rem 0.25rem rgba(0, 0, 0, 0.55));
}

/* Cout illustre : une pastille par ressource, image plutot qu'initiales. */
.cost-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  vertical-align: middle;
}

.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.3rem 0.05rem 0.15rem;
  border: 1px solid rgba(120, 180, 240, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(8, 24, 52, 0.62);
  line-height: 1.4;
  white-space: nowrap;
}

.cost-chip img {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
}

/* Repli pour une ressource sans illustration : ses initiales. */
.cost-chip i {
  font-style: normal;
  opacity: 0.75;
  font-size: 0.85em;
}

.cost-chip b {
  font-weight: 700;
}

/* --- Profil : onglets Puissance / Statistiques --------------------------- */

.profile-tabs {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
}

.profile-tab {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(120, 180, 240, 0.34);
  border-radius: var(--radius-md);
  background: rgba(12, 34, 72, 0.7);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.profile-tab.is-active {
  border-color: rgba(255, 205, 110, 0.7);
  background: linear-gradient(180deg, rgba(255, 199, 88, 0.9), rgba(190, 124, 20, 0.9));
  color: #16110a;
}

.profile-stats-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  overflow-y: auto;
}

.profile-stats-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.profile-stats-title {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: var(--space-2);
}

.profile-stats-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
}

.profile-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--space-2);
  border: 1px solid rgba(120, 180, 240, 0.26);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(16, 44, 92, 0.6), rgba(5, 16, 40, 0.85));
}

.profile-stat-card small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.profile-stat-card strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.profile-stat-card em {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
}

.profile-stat-card.is-positive strong {
  color: #86eec0;
}

.profile-stat-card.is-negative strong {
  color: #ff9a86;
}

/* Un compteur volontairement inactif doit se lire comme tel, pas comme un bug. */
.profile-stat-card.is-muted {
  opacity: 0.72;
}

/* --- Profil : recommencer une partie ---------------------------------------
   Volontairement en bas, visuellement a part et sobre au repos : une action
   irreversible ne doit pas attirer le doigt. */

.profile-danger {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px solid rgba(224, 69, 47, 0.35);
  border-radius: var(--radius-md);
  background: rgba(60, 16, 12, 0.32);
}

.profile-danger h4 {
  margin: 0 0 0.2rem;
  color: #ff9a86;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.profile-danger p {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.profile-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-danger-button {
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(224, 69, 47, 0.5);
  border-radius: var(--radius-md);
  background: rgba(70, 20, 16, 0.7);
  color: #ffb3a4;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

/* Une fois arme, le bouton change de couleur *et* de libelle : deux signaux
   plutot qu'un, pour qu'un appui reflexe ne suffise pas. */
.profile-danger-button.is-armed {
  border-color: rgba(255, 90, 70, 0.9);
  background: linear-gradient(180deg, rgba(190, 40, 30, 0.95), rgba(120, 20, 16, 0.95));
  color: #fff;
}

.profile-danger-cancel {
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(120, 180, 240, 0.4);
  border-radius: var(--radius-md);
  background: rgba(12, 28, 62, 0.8);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}