/* ============================================================
   COMPONENTS — cartes, portraits, tiles, shop, éveil, slots,
   deploy, mission, profil, journal, codex, end
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   PORTRAIT JOUEUR — cadre hexagonal angulaire style MOBA
   ══════════════════════════════════════════════════════════════ */
.pf-portrait{
  width:52px; height:52px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pf-font-display); font-size:20px;
  position:relative; overflow:hidden; flex-shrink:0;
  background: linear-gradient(160deg, #1c1b2c 0%, #0e0d18 100%);
}
.pf-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Bordure couleur personnage */
.pf-portrait::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:2px solid var(--accent,var(--pf-brand));
  box-shadow: 0 0 10px var(--accent,var(--pf-brand-glow)),
              inset 0 0 8px rgba(0,0,0,.4);
  pointer-events:none; z-index:2;
}
/* Reflet lumière coin haut */
.pf-portrait::after{
  content:"";
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 45%);
}

/* ══════════════════════════════════════════════════════════════
   TUILE CHAMPION (sélection / codex)
   ══════════════════════════════════════════════════════════════ */
.champ-tile{
  width:72px; flex-shrink:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  position:relative;
}
.champ-tile-img{
  width:72px; height:90px;
  object-fit:cover; object-position:top center;
  display:block;
  /* Coins coupés style carte MOBA */
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  border:1px solid var(--pf-panel-border-lit);
  transition: border-color .15s, filter .15s;
  filter: saturate(.75) brightness(.85);
}
.champ-tile:hover .champ-tile-img{
  filter:saturate(1) brightness(1);
  border-color: rgba(255,255,255,.2);
}
.champ-tile.selected .champ-tile-img{
  border-color: var(--accent, var(--pf-brand-lit));
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 0 14px var(--accent, var(--pf-brand-glow));
}
.champ-tile-overlay{
  position:absolute; top:0; left:0; width:72px; height:90px;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.champ-tile-role{
  position:absolute; top:4px; right:4px;
  width:18px; height:18px;
  background:rgba(7,8,15,.85);
  border-radius:2px; border:1px solid var(--pf-panel-border-lit);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
}
.champ-tile-name{
  font-family:var(--pf-font-display); font-size:9px; letter-spacing:1.5px;
  color:var(--pf-text-dim); text-transform:uppercase; text-align:center;
  line-height:1;
}
.champ-tile.selected .champ-tile-name{ color:var(--pf-text); }
/* Combat libre : l'adversaire choisi est cerclé de rouge, quelle que
   soit sa couleur propre. */
.champ-tile.foe.selected .champ-tile-img{ border-color:var(--pf-danger); box-shadow:0 0 14px rgba(214,69,63,.55); }
.champ-tile.foe.selected .champ-tile-name{ color:var(--pf-danger); }

/* ══════════════════════════════════════════════════════════════
   HERO BANNER — grand portrait dans l'écran de déploiement
   Inspiré Dota 2 hero page : splash art côté + infos lisibles
   ══════════════════════════════════════════════════════════════ */
.hero-banner{
  display:flex; align-items:center; gap:14px;
  padding:14px;
  background:
    linear-gradient(90deg,
      rgba(7,8,15,.96) 0%,
      rgba(7,8,15,.7) 50%,
      rgba(7,8,15,.2) 100%);
  border: 1px solid var(--pf-panel-border);
  border-left: 2px solid var(--accent, var(--pf-brand));
  box-shadow: -4px 0 18px var(--accent-glow, var(--pf-brand-glow));
  border-radius: var(--pf-radius-lg);
  position:relative; overflow:hidden;
}
/* Splash art en fond right, estompé */
.hero-banner::before{
  content:""; position:absolute;
  right:-20px; top:-20px; bottom:-20px; width:65%;
  background: var(--hero-splash, none) center / cover no-repeat;
  filter:blur(2px) saturate(1.1) brightness(.35);
  pointer-events:none;
}
.hero-banner-img{
  width:80px; height:100px;
  object-fit:cover; object-position:top;
  border-radius:2px; flex-shrink:0; z-index:1;
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px);
  border:1px solid var(--accent, var(--pf-brand));
  box-shadow: 0 0 14px var(--accent, var(--pf-brand-glow));
}
.hero-banner-info{ display:flex; flex-direction:column; gap:5px; z-index:1; }
.hero-banner-role{
  display:flex; align-items:center; gap:5px;
  font-size:9px; letter-spacing:2px; color:var(--pf-text-dim);
  text-transform:uppercase;
}
.hero-banner-name{
  font-family:var(--pf-font-display); font-size:22px; letter-spacing:3px;
  color:var(--pf-text); text-transform:uppercase; line-height:1;
}
.hero-banner-title{
  font-size:11px; color:var(--accent, var(--pf-brand-lit)); letter-spacing:1px;
  font-style:italic;
}

/* ══════════════════════════════════════════════════════════════
   CARD MISSION
   ══════════════════════════════════════════════════════════════ */
.mission-card{
  flex-shrink:0;
  width:min(156px, 42vw); padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
  cursor:pointer;
  border-left:2px solid var(--pf-panel-border);
  transition: border-color .15s, box-shadow .15s, filter .15s;
}
.mission-card:hover{
  border-left-color: var(--pf-brand);
  box-shadow: -2px 0 12px var(--pf-brand-glow), var(--pf-shadow-panel);
  filter:brightness(1.08);
}
.mission-card.done{ opacity:.5; filter:saturate(.4); }
.mission-card.done:hover{ opacity:.65; filter:saturate(.55); }
.mission-num{
  font-family:var(--pf-font-display); font-size:9px; letter-spacing:2px;
  color:var(--pf-brand-lit);
}
.mission-name{
  font-family:var(--pf-font-display); font-size:13px; letter-spacing:1px;
  color:var(--pf-text); line-height:1.15;
}
.mission-mode{ font-size:9px; letter-spacing:1.5px; color:var(--pf-text-dim); }
.mission-rewards{ display:flex; gap:4px; flex-wrap:wrap; }
.mission-tag{
  font-size:8px; letter-spacing:1px; padding:1px 5px; border-radius:2px;
  background:rgba(201,162,74,.1); border:1px solid var(--pf-gold-dim);
  color:var(--pf-gold);
}
.mission-tag-mode{
  background:rgba(165,52,43,.12); border-color:var(--pf-brand-dim);
  color:#f09080;
}

/* ══════════════════════════════════════════════════════════════
   STATS (profil)
   ══════════════════════════════════════════════════════════════ */
.pf-stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; border-bottom:1px solid var(--pf-panel-border);
}
.pf-stat-row:last-child{ border-bottom:none; }
.pf-stat-label{ font-size:10px; letter-spacing:1px; color:var(--pf-text-dim); text-transform:uppercase; }
.pf-stat-val{ font-family:var(--pf-font-display); font-size:16px; color:var(--pf-text); }

/* Barre XP sous les stats profil */
.profile-xp-wrap{ display:flex; flex-direction:column; gap:4px; }
.profile-xp-label{ display:flex; justify-content:space-between; }
.profile-xp-label span:first-child{ font-size:10px; letter-spacing:1.5px; color:var(--pf-gold); }
.profile-xp-label span:last-child{ font-size:10px; color:var(--pf-text-dim); }

/* ══════════════════════════════════════════════════════════════
   SHOP — cartes d'objet avec bord de tier
   ══════════════════════════════════════════════════════════════ */
.shop-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; flex-shrink:0;
}
.shop-tier-label{
  font-family:var(--pf-font-display); font-size:9px; letter-spacing:3px;
  color:var(--pf-text-dim); padding:0 2px 6px;
  border-bottom:1px solid var(--pf-panel-border); margin-bottom:8px;
}
.shop-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 44vw), 1fr));
  gap:8px; margin-bottom:16px;
}
.shop-card{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 10px 8px;
  border-top:2px solid var(--tier-color, var(--pf-panel-border));
  cursor:default;
  transition:box-shadow .15s, filter .15s;
}
.shop-card:not(.owned):hover{
  box-shadow: 0 0 14px color-mix(in srgb, var(--tier-color,#888) 40%, transparent),
              var(--pf-shadow-panel);
  filter:brightness(1.08);
}
.shop-card.owned{ opacity:.6; }
.shop-card-ico{
  font-size:22px; display:flex; align-items:center; justify-content:center;
  height:32px; color:var(--tier-color,var(--pf-text-dim));
}
.shop-card-name{
  font-family:var(--pf-font-display); font-size:13px; letter-spacing:1px;
  color:var(--pf-text); line-height:1.1; text-align:center;
}
.shop-card-stats{ font-size:9px; color:var(--pf-text-dim); text-align:center; line-height:1.5; }
.shop-card-from{ font-size:8px; color:var(--pf-text-faint); text-align:center; }
.shop-card-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:2px; border-top:1px solid var(--pf-panel-border); padding-top:6px;
}
.shop-card-cost{
  font-family:var(--pf-font-display); font-size:12px; color:var(--pf-gold);
  display:flex; align-items:center; gap:3px;
}
.shop-owned-badge{
  font-size:9px; letter-spacing:1px; color:var(--pf-good);
  display:flex; align-items:center; gap:3px;
}

/* ══════════════════════════════════════════════════════════════
   ÉVEIL — arbres de talents
   ══════════════════════════════════════════════════════════════ */
.eveil-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; flex-shrink:0; margin-bottom:4px;
}
.eveil-tree{
  padding:12px; margin-bottom:10px;
  border-left:2px solid var(--tree-color,var(--pf-panel-border));
  box-shadow: -3px 0 12px color-mix(in srgb, var(--tree-color,transparent) 25%, transparent),
              var(--pf-shadow-panel);
}
.eveil-tree-title{
  font-family:var(--pf-font-display); font-size:12px; letter-spacing:2px;
  color:var(--pf-text); text-transform:uppercase;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.eveil-gem{
  width:10px; height:10px; border-radius:2px; flex-shrink:0;
  box-shadow: 0 0 6px currentColor;
}
.eveil-node{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 6px; border-bottom:1px solid var(--pf-panel-border);
  gap:10px; transition: opacity .15s;
}
.eveil-node:last-child{ border-bottom:none; }
.eveil-node.locked{ opacity:.35; pointer-events:none; }
.eveil-node.maxed .eveil-node-name{ color:var(--tree-color,var(--pf-text)); }
.eveil-node-left{ flex:1; }
.eveil-node-name{
  font-size:12px; font-weight:500; color:var(--pf-text); margin-bottom:2px;
}
.eveil-node-desc{ font-size:10px; color:var(--pf-text-dim); line-height:1.4; }
.eveil-node-req{ font-size:9px; color:var(--pf-brand-lit); margin-top:2px; }
.eveil-node-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.eveil-pips{ display:flex; gap:3px; }
.eveil-pip{
  width:10px; height:10px; border-radius:2px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  transition:background .15s;
}
.eveil-pip.filled{
  background:var(--pip-color,var(--pf-brand));
  border-color:var(--pip-color,var(--pf-brand));
  box-shadow:0 0 5px var(--pip-color,var(--pf-brand-glow));
}
.eveil-btn-plus{ min-width:28px; font-size:14px; padding:3px 8px; }
.eveil-btn-rst{ min-width:28px; font-size:13px; padding:3px 8px; }

/* ══════════════════════════════════════════════════════════════
   SLOTS — sélection de sauvegarde
   ══════════════════════════════════════════════════════════════ */
.slot-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; gap:12px;
  border-left:2px solid var(--pf-panel-border);
  transition:border-color .15s, box-shadow .15s;
}
.slot-card:hover,
.slot-card.current{
  border-left-color:var(--pf-brand-lit);
  box-shadow: -3px 0 14px var(--pf-brand-glow), var(--pf-shadow-panel);
}
.slot-card-left{ display:flex; align-items:center; gap:12px; }
.slot-card-title{
  font-family:var(--pf-font-display); font-size:13px; letter-spacing:2px;
  color:var(--pf-text);
}
.slot-card-sub{ font-size:10px; color:var(--pf-text-dim); margin-top:2px; }
.slot-card-empty{ color:var(--pf-text-faint); font-style:italic; }
.slot-card-right{ display:flex; gap:6px; }
.slot-card-del.confirm{ color:var(--pf-danger); border-color:var(--pf-danger); }

/* ══════════════════════════════════════════════════════════════
   JOURNAL / CODEX
   ══════════════════════════════════════════════════════════════ */
.journal-entry{
  padding:12px 14px; border-left:2px solid var(--pf-panel-border);
  margin-bottom:8px; transition:border-color .15s;
}
.journal-entry:hover{ border-left-color:var(--pf-gold-dim); }
.journal-entry-title{
  font-family:var(--pf-font-display); font-size:13px; letter-spacing:1.5px;
  color:var(--pf-text); margin-bottom:4px;
}
.journal-entry-body{ font-size:11px; color:var(--pf-text-dim); line-height:1.6; }
/* Ligne décorative entre titre et texte style Dota Lore */
.journal-entry-divider{
  display:flex; align-items:center; gap:8px; margin:6px 0;
}
.journal-entry-divider::before,
.journal-entry-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--pf-panel-border-lit),transparent);
}
.journal-entry-divider span{
  font-family:var(--pf-font-display); font-size:8px; letter-spacing:2px;
  color:var(--pf-gold); opacity:.6;
}

/* Codex — carte de champion avec coins ornementaux */
.codex-card{
  cursor:pointer; transition:filter .15s, box-shadow .15s;
  overflow:hidden;
  border-top:1px solid var(--pf-panel-border-lit);
  position:relative;
}
.codex-card::after{
  content:"";
  position:absolute; top:0; right:0;
  border-style:solid;
  border-width:0 14px 14px 0;
  border-color:transparent var(--pf-panel-border-lit) transparent transparent;
  pointer-events:none;
}
.codex-card:hover{ filter:brightness(1.1); }
.codex-card.selected{
  box-shadow: 0 0 16px var(--pf-brand-glow), var(--pf-shadow-panel);
  border-top-color:var(--pf-brand-lit);
}
.codex-card.selected::after{ border-right-color:var(--pf-brand-lit); }
.codex-card-header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 8px;
}
.codex-card-name{
  font-family:var(--pf-font-display); font-size:15px; letter-spacing:1.5px; color:var(--pf-text);
}
.codex-card-role{ font-size:9px; color:var(--pf-text-dim); letter-spacing:1px; }
.codex-card-body{ padding:0 12px 10px; display:flex; flex-direction:column; gap:4px; }

/* ══════════════════════════════════════════════════════════════
   FIN DE MATCH — lignes de récompenses
   ══════════════════════════════════════════════════════════════ */
.end-reward-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:6px;
  border-left:2px solid var(--pf-panel-border-lit);
  transition:border-color .2s;
  animation: pfFade .35s ease-out both;
}
.end-reward-row:nth-child(2){ animation-delay:.06s; }
.end-reward-row:nth-child(3){ animation-delay:.12s; }
.end-reward-row:nth-child(4){ animation-delay:.18s; }
.end-reward-row.highlight{ border-left-color:var(--pf-gold); }
.end-reward-row.highlight .pf-label{ color:var(--pf-gold); }

/* ══════════════════════════════════════════════════════════════
   DEPLOY — section labels
   ══════════════════════════════════════════════════════════════ */
.deploy-section-title{
  font-family:var(--pf-font-display); font-size:9px; letter-spacing:3px;
  color:var(--pf-text-dim); text-transform:uppercase; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.deploy-section-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--pf-panel-border),transparent);
}
.deploy-allies-wrap{ display:flex; gap:8px; flex-wrap:wrap; }
.deploy-team-preview{
  font-size:10px; color:var(--pf-text-dim); letter-spacing:1px;
  border-top:1px solid var(--pf-panel-border); padding-top:8px;
}

/* ══════════════════════════════════════════════════════════════
   CHAMP GRID — grille de champion dans le codex
   ══════════════════════════════════════════════════════════════ */
.champ-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(148px,44vw),1fr));
  gap:8px;
}
.champ-filter-row{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;
}
.champ-filter-btn{
  font-family:var(--pf-font-display); font-size:9px; letter-spacing:1.5px;
  padding:4px 10px; border-radius:2px;
  background:transparent; border:1px solid var(--pf-panel-border-lit);
  color:var(--pf-text-dim); cursor:pointer; transition:all .12s;
  text-transform:uppercase;
}
.champ-filter-btn:hover{ border-color:var(--pf-text-dim); color:var(--pf-text); }
.champ-filter-btn.active{
  background:rgba(165,52,43,.15); border-color:var(--pf-brand-lit); color:var(--pf-text);
}

/* ══════════════════════════════════════════════════════════════
   HUB — bloc de stats joueur dans le header
   ══════════════════════════════════════════════════════════════ */
.hub-player{
  display:flex; align-items:center; gap:10px;
}
.hub-player-name{
  font-family:var(--pf-font-display); font-size:14px; letter-spacing:2px;
  color:var(--pf-text); line-height:1;
}
.hub-player-level{
  font-size:9px; color:var(--pf-text-dim); letter-spacing:1px; margin-top:2px;
}
.hub-currency{
  display:flex; align-items:center; gap:6px;
}

/* ══════════════════════════════════════════════════════════════
   HUB TITLE (logo en haut du hub)
   ══════════════════════════════════════════════════════════════ */
.hub-logo{
  font-family:var(--pf-font-display); font-size:15px; letter-spacing:3px;
  color:var(--pf-brand-lit); text-transform:uppercase;
}

/* ══════════════════════════════════════════════════════════════
   MINIMAP HUD
   ══════════════════════════════════════════════════════════════ */
.hud-minimap{
  border:1px solid var(--pf-panel-border-lit);
  border-radius:2px;
  box-shadow: 0 0 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  background:#05060c;
}

/* ══════════════════════════════════════════════════════════════
   ÉCRAN TITRE — logo textuel si image absente
   ══════════════════════════════════════════════════════════════ */
.pf-wordmark{
  font-family:var(--pf-font-display);
  font-size:clamp(38px,10vw,72px);
  letter-spacing:8px;
  color:var(--pf-text);
  text-transform:uppercase;
  text-shadow: 0 0 60px var(--pf-brand-glow), 0 4px 14px rgba(0,0,0,.9);
  line-height:1;
}
.pf-wordmark em{
  font-style:normal;
  color:var(--pf-brand-lit);
  text-shadow: 0 0 40px var(--pf-brand-glow);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .hero-banner-img{ width:64px; height:80px; }
  .hero-banner-name{ font-size:18px; }
  .champ-tile{ width:60px; }
  .champ-tile-img{ width:60px; height:75px; }
  .shop-grid{ grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
  .pf-wordmark{ font-size:clamp(30px,9vw,52px); letter-spacing:5px; }
}

/* ══════════════════════════════════════════════════════════════
   COMBAT LIBRE — cartes animées, façon sélection de champion
   (apparition en cascade, survol, reflet sur la carte choisie,
   verrouillage, portrait qui glisse en place).
   ══════════════════════════════════════════════════════════════ */
.deploy-free .champ-tile{ transition:transform .18s ease; }
.deploy-free .champ-tile.enter{ animation:pf-tile-in .42s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 55ms); }
.deploy-free .champ-tile:hover{ transform:translateY(-3px); }
.deploy-free .champ-tile:hover .champ-tile-img{ filter:saturate(1.1) brightness(1.1); }

/* Carte choisie : halo qui respire et reflet qui la balaie. */
.deploy-free .champ-tile.selected .champ-tile-img{ animation:pf-tile-breathe 2.4s ease-in-out infinite; }
.deploy-free .champ-tile.foe.selected .champ-tile-img{ animation-name:pf-tile-breathe-foe; }
.deploy-free .champ-tile.selected .champ-tile-overlay{
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,240,200,.28) 50%, transparent 65%) no-repeat,
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7) 100%);
  background-size:250% 100%, 100% 100%;
  animation:pf-tile-sheen 2.8s ease-in-out infinite;
}
/* Verrouillage : la carte claque, un anneau s'échappe. */
.deploy-free .champ-tile.lock{ animation:pf-tile-lock .34s cubic-bezier(.3,1.6,.5,1); }
.deploy-free .champ-tile.lock::after{
  content:''; position:absolute; top:0; left:0; width:72px; height:90px; pointer-events:none;
  clip-path:polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  box-shadow:inset 0 0 0 2px var(--accent, var(--pf-gold));
  animation:pf-tile-ring .5s ease-out forwards;
}
.deploy-free .champ-tile.foe.lock::after{ box-shadow:inset 0 0 0 2px var(--pf-danger); }
/* Le grand portrait glisse en place à chaque changement de personnage. */
.deploy-free .hero-banner-img{ animation:pf-splash-in .45s cubic-bezier(.2,.8,.2,1); }
.deploy-free .hero-banner-info{ animation:pf-splash-txt .45s .08s cubic-bezier(.2,.8,.2,1) both; }

@keyframes pf-tile-in{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes pf-tile-breathe{
  0%,100%{ box-shadow:0 0 10px var(--accent, var(--pf-brand-glow)); }
  50%{ box-shadow:0 0 22px var(--accent, var(--pf-brand-glow)); }
}
@keyframes pf-tile-breathe-foe{
  0%,100%{ box-shadow:0 0 10px rgba(214,69,63,.45); }
  50%{ box-shadow:0 0 22px rgba(214,69,63,.8); }
}
@keyframes pf-tile-sheen{ 0%{ background-position:150% 0, 0 0; } 55%,100%{ background-position:-50% 0, 0 0; } }
@keyframes pf-tile-lock{ 0%{ transform:scale(.92); } 60%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
@keyframes pf-tile-ring{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(1.25); } }
@keyframes pf-splash-in{ from{ opacity:0; transform:translateX(24px) scale(1.04); } to{ opacity:1; transform:none; } }
@keyframes pf-splash-txt{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .deploy-free .champ-tile, .deploy-free .champ-tile *, .deploy-free .champ-tile::after,
  .deploy-free .hero-banner-img, .deploy-free .hero-banner-info{ animation:none !important; transition:none !important; }
}

/* ── Récit : scène de dialogue avant / après mission (ui/story.js) ── */
.story{
  position:fixed; inset:0; z-index:60; overflow:hidden; cursor:pointer;
  background:#07080d; animation:story-in .35s ease both;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.story.out{ animation:story-out .25s ease both; }
@keyframes story-in{ from{ opacity:0; } }
@keyframes story-out{ to{ opacity:0; } }
.story-bg{ position:absolute; inset:0; z-index:0; }
/* Fond : la photo du lieu de la mission (js/data/lieux.js), à peine
   floutée, avec un lent travelling avant pour qu'elle vive. */
.story-bg img{ width:100%; height:100%; object-fit:cover; filter:blur(1px) brightness(.62) saturate(.95);
  transform:scale(1.04); animation:story-drift 40s linear both; }
@keyframes story-drift{ to{ transform:scale(1.16) translate(-1.5%, -1%); } }
.story-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,13,.5) 0%, transparent 28%, rgba(7,8,13,.15) 55%, rgba(7,8,13,.95) 100%); }
/* Pendant un dialogue, un voile sombre derrière le portrait (le portrait
   est détouré sur fond noir : il lui faut un fond sombre pour rester net). */
.story-bg::before{ content:''; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(ellipse 34% 52% at 50% 44%, rgba(7,8,13,.92) 0%, rgba(7,8,13,.6) 55%, transparent 100%); }
.story.is-dialogue .story-bg::before{ opacity:1; }
.story-top{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; }
.story-title{ font-family:var(--pf-font-display); letter-spacing:2px; font-size:13px; line-height:1.3; color:var(--pf-text-dim); }
.story-cast{
  position:absolute; left:50%; bottom:clamp(150px, 26vh, 230px); height:min(58vh, 520px); aspect-ratio:4/5;
  transform:translateX(-50%) translateY(18px); opacity:0; transition:opacity .3s ease, transform .35s ease; pointer-events:none;
}
.story-cast.in{ opacity:1; transform:translateX(-50%); }
.story-portrait{ width:100%; height:100%; object-fit:cover; mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 42%, #000 58%, transparent 100%); mask-image:radial-gradient(ellipse 58% 62% at 50% 42%, #000 58%, transparent 100%); }
.story-box{
  position:absolute; left:12px; right:12px; bottom:max(16px, env(safe-area-inset-bottom)); max-width:760px; margin:0 auto;
  padding:16px 18px 22px; min-height:112px;
  background:linear-gradient(180deg, rgba(20,21,31,.94), rgba(15,16,24,.97));
  border:1px solid var(--pf-panel-border-lit); border-top:2px solid var(--pf-brand);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.story-name{ font-family:var(--pf-font-display); font-size:20px; letter-spacing:2px; color:#e9c46a; min-height:4px; margin-bottom:4px; }
.story.is-narration .story-name{ display:none; }
.story-text{ margin:0; font-size:15px; line-height:1.6; color:var(--pf-text); }
.story.is-narration .story-text{ font-style:italic; color:#cfc9b8; }
.story-next{ position:absolute; right:16px; bottom:8px; font-size:10px; color:var(--pf-brand-lit, #d0463a); animation:story-blink 1.1s ease-in-out infinite; }
@keyframes story-blink{ 50%{ opacity:.25; transform:translateY(2px); } }
@media (prefers-reduced-motion: reduce){ .story, .story.out, .story-next, .story-bg img{ animation:none; } .story-cast{ transition:none; } }

/* ── Prologue : cinématique d'ouverture (ui/intro.js) ── */
.intro{ position:fixed; inset:0; z-index:70; background:#000; overflow:hidden; user-select:none; -webkit-tap-highlight-color:transparent; }
.intro.out{ animation:story-out .6s ease both; }
.intro-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; touch-action:none; }
.intro-stage{ position:absolute; inset:0; overflow:hidden; }
.intro-stage canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; outline:none; touch-action:none; }
.intro-load{ position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#f3e7cc; font-family:var(--pf-font-display); letter-spacing:2px; font-size:13px; transition:opacity .6s ease; pointer-events:none; }
.intro-load i{ display:block; width:min(50vw, 240px); height:3px; background:rgba(243,231,204,.18); border-radius:2px; overflow:hidden; position:relative; }
.intro-load i::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--p, 8%); background:#e9c46a; transition:width .3s ease; }
.intro.ready .intro-load{ opacity:0; }
.intro-card{ position:absolute; left:6vw; top:calc(9vh + 26px); z-index:3; display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateX(-14px);
  transition:opacity .8s ease, transform .8s ease; pointer-events:none; border-left:3px solid #e9c46a; padding-left:12px; }
.intro-card.in{ opacity:1; transform:none; }
.intro-card b{ font-family:var(--pf-font-display); font-size:clamp(20px, 3.6vw, 34px); letter-spacing:4px; color:#f3e7cc; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.intro-card span{ font-size:clamp(12px, 1.8vw, 15px); letter-spacing:1.5px; color:#e9c46a; text-shadow:0 1px 6px #000; font-style:italic; }
.intro-flash.dark{ background:#000; }
.intro-end{ flex-direction:column; gap:18px; }
.intro-end small{ position:absolute; bottom:calc(9vh + 6px); font-size:11px; letter-spacing:1px; color:rgba(243,231,204,.55); }
/* Voile noir du début, qui se lève quand la scène est prête. */
.intro-veil{ position:absolute; inset:0; background:#000; transition:opacity 1.6s ease; pointer-events:none; }
.intro.ready .intro-veil{ opacity:0; }
.intro.white .intro-veil{ opacity:1; background:#fff8ec; transition:opacity .9s ease; }
.intro.title .intro-veil{ background:#07080d; transition:background 1s ease; }
/* Bandes cinéma. */
.intro::before, .intro::after{ content:''; position:absolute; left:0; right:0; height:9vh; background:#000; z-index:1; pointer-events:none; }
.intro::before{ top:0; } .intro::after{ bottom:0; }
.intro-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:2; }
.intro-flash.go{ animation:intro-flash 1.1s ease-out both; }
@keyframes intro-flash{ 0%{ opacity:0; } 12%{ opacity:.9; } 100%{ opacity:0; } }
.intro-skip{ position:absolute; top:calc(9vh + 10px); right:14px; z-index:3; background:rgba(0,0,0,.5); color:#f3e7cc; border-color:rgba(243,231,204,.6); }
.intro-sub{
  position:absolute; left:50%; bottom:calc(9vh + 18px); z-index:3; width:min(92vw, 760px); transform:translateX(-50%);
  margin:0; text-align:center; font-family:var(--pf-font-display); font-size:clamp(15px, 2.6vw, 21px); line-height:1.5;
  letter-spacing:.5px; color:#f3e7cc; text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 2px #000; opacity:0; transition:opacity .7s ease;
}
.intro-sub.in{ opacity:1; }
.intro-end{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 1.4s ease; }
.intro-end img{ width:min(70vw, 460px); max-height:52vh; object-fit:contain; filter:drop-shadow(0 6px 30px rgba(233,196,106,.35)); }
.intro.title .intro-end{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .intro-flash.go{ animation:none; } .intro-card{ transition:none; } }