/* Carte du Talent — thème général et rendu de la carte */

:root {
  --mer: #9FD3E0;
  --mer-profonde: #2F6A78;
  --papier: #FFFBF2;
  --encre: #2E3A3F;
  --encre-douce: #5F6B70;
  --accent: #E5738E;
  --accent-fort: #B23C5D; /* texte rose : 5,4:1 sur le papier */
  --accent-bouton: #C2456A; /* fond des boutons principaux : texte blanc à 4,8:1 */
  --accent-bouton-survol: #A9364F;
  --focus: #1F5F70; /* contour du focus clavier : 6,9:1 sur le papier */
  --or: #E9B23E;
  --ombre: 0 8px 28px rgba(31, 72, 84, .18);
  --rayon: 16px;
  --police: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--mer);
  color: var(--encre);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scene-carte {
  position: relative;
  flex: 1;
  min-height: 0;
}

.carte {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.carte .nom {
  font-family: var(--police);
  font-size: 12.5px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: .01em;
  /* Léger halo clair : nom lisible sur toutes les couleurs de région. */
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.carte .nom-capitale {
  font-size: 11.5px;
  font-weight: 800;
}

.carte .tuile-a_conquerir .nom { font-weight: 600; font-style: italic; }

.carte .etiquette {
  font-family: var(--police);
  font-weight: 800;
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: .14em;
  paint-order: stroke;
  stroke: #FFFBF2;
  stroke-linejoin: round;
  pointer-events: none;
}

.carte .etiquette { stroke-width: .28em; }

.carte .etiquette-region,
.carte .etiquette-province {
  opacity: 0;
  transition: opacity .25s;
}

.carte .etiquette-region,
.carte .etiquette-province { text-transform: none; letter-spacing: .02em; }
.carte .etiquette-province { font-style: italic; font-weight: 700; }

.carte .etiquette-mer {
  fill: #24535E;
  stroke: rgba(191, 230, 238, .9);
  font-style: italic;
  text-transform: none;
  letter-spacing: .06em;
}

.carte .rose-n {
  font: 800 13px var(--police);
  fill: var(--mer-profonde);
}

/* Vue d'ensemble (dézoomé) : noms des régions, noms des compétences masqués. */
.carte.vue-ensemble .etiquette-region,
.carte.vue-ensemble .etiquette-province { opacity: .95; }
.carte.vue-ensemble .tuile .nom { opacity: 0; }

.carte .tuile { cursor: pointer; outline: none; }
.carte .tuile .nom { transition: opacity .2s; }
.carte.vue-ensemble .tuile .icone { opacity: .9; }

/* Sélection et focus clavier : anneau doré autour de la tuile. */
.carte .anneau-selection {
  fill: none;
  stroke: #FFD45C;
  stroke-width: 6;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 196, 61, .9));
}

.carte .tuile:focus-visible { outline: none; } /* le contour hexagonal suffit */
.carte .tuile:focus-visible .dessus { stroke: var(--focus); stroke-width: 5; stroke-dasharray: none; }

/* Glisser-déposer */
.carte.deplacement-en-cours { cursor: grabbing; }
.carte .tuile.souleve { opacity: .92; filter: drop-shadow(0 14px 12px rgba(20, 50, 60, .35)); pointer-events: none; }
.carte .case-cible { fill: rgba(255, 255, 255, .35); stroke: #fff; stroke-width: 3; stroke-dasharray: 8 6; pointer-events: none; }
.carte .case-cible.refus { fill: rgba(200, 60, 60, .2); stroke: #C2412D; }
.carte .case-cible.echange { fill: rgba(255, 212, 92, .35); stroke: #E9A400; }
.carte .case-origine { fill: rgba(47, 106, 120, .18); stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-dasharray: 4 5; pointer-events: none; }

/* Éclat : flow des 30 derniers jours (halo sous la tuile, la tuile ne bouge pas). */
.carte .eclat { pointer-events: none; }
.carte .eclat-1 { opacity: .45; }
.carte .eclat-2 { opacity: .65; }
.carte .eclat-3 { opacity: .85; }
.carte .eclat-4 { opacity: 1; }

.carte .lueur { mix-blend-mode: screen; }
.carte .lueur-1 { opacity: .3; }
.carte .lueur-2 { opacity: .45; }
.carte .lueur-3 { opacity: .6; animation: respire-lueur 3.4s ease-in-out infinite alternate; }
.carte .lueur-4 { opacity: .75; animation: respire-lueur 2.8s ease-in-out infinite alternate; }
.carte .liseret-eclat { filter: drop-shadow(0 0 4px rgba(255, 200, 60, .9)); }
.carte .liseret-2 { opacity: .7; }

@keyframes respire-lueur {
  from { opacity: .45; }
  to { opacity: .8; }
}

@keyframes respire {
  from { opacity: .7; }
  to { opacity: 1; }
}

/* Brouillard de guerre */
.carte .brumes { opacity: .7; }
.carte .nom-brouillard { font-size: 15px; font-weight: 800; }
.carte.vue-ensemble .tuile-brouillard .nom { opacity: 1; }

/* Effets passagers (calque au-dessus des tuiles) */
.carte .effet, .carte .effet * { pointer-events: none; }
.carte .effet polygon, .carte .effet circle, .carte .effet line, .carte .effet g {
  transform-box: fill-box;
  transform-origin: center;
}

.carte .effet-eclair { opacity: 0; animation: eclair .75s ease-out forwards; }
.carte .effet-eclair-or { animation-duration: 1.1s; }

@keyframes eclair {
  0% { opacity: .75; }
  100% { opacity: 0; }
}

.carte .effet-onde {
  fill: none;
  stroke: #FFD45C;
  stroke-width: 5;
  opacity: 0;
  animation: onde .9s ease-out forwards;
}

@keyframes onde {
  0% { opacity: .95; transform: scale(.95); }
  100% { opacity: 0; transform: scale(1.5); }
}

.carte .effet-etincelle { opacity: 0; animation: etincelle .85s ease-out forwards; }

@keyframes etincelle {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

.carte .effet-rayon {
  stroke: #F2C14E;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: rayon .8s .1s ease-out forwards;
}

@keyframes rayon {
  0% { opacity: 1; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.25); }
}

.carte .effet-trophee { opacity: 0; animation: trophee 1.3s ease-out forwards; }

@keyframes trophee {
  0% { opacity: 0; transform: translateY(14px) scale(.6); }
  25% { opacity: 1; transform: translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}

.carte .effet-dissipation { opacity: 0; animation: dissipation .9s ease-out forwards; }

@keyframes dissipation {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Mouvements réduits : simples fondus, pas de respiration. */
@media (prefers-reduced-motion: reduce) {
  .carte .lueur-3, .carte .lueur-4 { animation: none; }
  .carte .effet-onde, .carte .effet-etincelle, .carte .effet-rayon, .carte .effet-trophee, .carte .effet-dissipation {
    animation: eclair .6s ease-out forwards;
  }
}

/* Suggestions : hexagones fantômes */
.carte .tuile-suggestion { animation: apparition .5s ease-out both; }
.carte .tuile-suggestion .nom { font-style: italic; }
.carte .tuile-suggestion:hover .dessus, .carte .tuile-suggestion:focus-visible .dessus { fill-opacity: .95; stroke-width: 3.5; }
.carte.vue-ensemble .tuile-suggestion .nom { opacity: 0; }

@keyframes apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .carte .tuile-suggestion { animation: none; }
}