/* ============================================================
   LAYOUT — structure des écrans
   ============================================================ */
*{ box-sizing: border-box; margin:0; padding:0; }
html, body{
  height:100%; overflow:hidden;
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-font-body);
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#app{ position:fixed; inset:0; }

.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  padding-top: var(--pf-safe-t);
  padding-bottom: var(--pf-safe-b);
}
.screen.active{ display:flex; animation: pfFade .3s ease-out; }
@keyframes pfFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ══════════════════════════════════════════════════════════════
   FOND PLEIN ÉCRAN (partagé par tous les écrans narratifs)
   ══════════════════════════════════════════════════════════════ */
.pf-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.pf-bg-blur{
  position:absolute; inset:-10%;
  width:120%; height:120%;
  object-fit:cover;
  filter: blur(52px) saturate(1.1) brightness(.35);
  transform:scale(1.06);
}
.pf-bg-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
/* Voile multicouche : bas opaque pour lisibilité, haut dégagé */
.pf-bg-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(7,8,15,.55) 0%,
      rgba(7,8,15,.25) 30%,
      rgba(7,8,15,.5)  65%,
      rgba(7,8,15,.93) 100%);
}
.screen > *:not(.pf-bg){ position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════════
   ÉCRAN TITRE
   ══════════════════════════════════════════════════════════════ */
#screen-title{
  overflow:hidden;
  background:#050508;
  justify-content:flex-end;
}
#screen-title .pf-bg-blur{ display:block; filter:blur(60px) saturate(1.05) brightness(.22); }
/* L'équipe réunie dans la cour (assets/lieux/equipe.webp) : plein cadre. */
#screen-title .pf-bg-img{ object-fit:cover; object-position:center 40%; }
#screen-title .pf-bg-overlay{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(7,8,15,.1) 0%, rgba(7,8,15,.4) 60%, rgba(7,8,15,.7) 100%),
    linear-gradient(180deg, rgba(7,8,15,.2) 0%, rgba(7,8,15,.05) 30%, rgba(7,8,15,.6) 72%, rgba(7,8,15,.94) 100%);
}

/* Ornement de titre — ligne dorée encadrant le sous-titre */
.pf-title-content{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center;
  padding-bottom: clamp(22px, 7vh, 64px);
  padding-left:20px; padding-right:20px;
}
.pf-logo{ width:clamp(140px, 24vh, 240px); height:auto; filter:drop-shadow(0 8px 28px rgba(0,0,0,.7)); }

.pf-hero-sub{
  font-family: var(--pf-font-display);
  font-size:13px; letter-spacing:8px;
  color: var(--pf-gold);
  display:flex; align-items:center; gap:10px;
}
.pf-hero-sub::before,
.pf-hero-sub::after{
  content:"";
  display:block; height:1px; width:32px;
  background: linear-gradient(90deg, transparent, var(--pf-gold));
}
.pf-hero-sub::after{ transform:scaleX(-1); }

.pf-title-btns{
  display:flex; flex-direction:column; gap:10px;
  width:min(280px, 78vw); margin-top:12px;
}
/* Bouton COMMENCER — gros, plein écran comme "PLAY DOTA" */
.pf-btn-cta{
  font-size:16px; padding:14px 28px; letter-spacing:3px;
  box-shadow: 0 6px 24px var(--pf-brand-glow), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ══════════════════════════════════════════════════════════════
   ÉCRAN SLOTS
   ══════════════════════════════════════════════════════════════ */
#screen-slots{ justify-content:center; align-items:center; }
.slots-content{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; width:100%; max-width:520px; padding:0 18px;
}
.slots-section-title{
  font-family: var(--pf-font-display); font-size:11px; letter-spacing:4px;
  color: var(--pf-gold); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.slots-section-title::before,
.slots-section-title::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--pf-gold-dim));
}
.slots-section-title::after{ transform:scaleX(-1); }
.slots-list{ display:flex; flex-direction:column; gap:10px; width:100%; }

/* ══════════════════════════════════════════════════════════════
   HUB
   ══════════════════════════════════════════════════════════════ */
#screen-hub{ padding:var(--pf-gap-md); gap:var(--pf-gap-sm); overflow:hidden; }
/* Header hub — barre en haut avec nom du jeu + stats */
.hub-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; padding:10px 14px;
  border-bottom: 1px solid var(--pf-panel-border);
  /* Ligne décorative or en bas du header */
  box-shadow: 0 1px 0 var(--pf-panel-border), 0 2px 0 rgba(201,162,74,.08);
}
.hub-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.hub-panel{ display:none; flex:1; min-height:0; overflow-y:auto; flex-direction:column; gap:var(--pf-gap-md); }
.hub-panel.active{ display:flex; }

/* Onglets nav — style Dota 2 : ligne active en bas, pas de fond plein */
.hub-tabs{
  display:flex; gap:2px; flex-shrink:0;
  border-top: 1px solid var(--pf-panel-border);
  padding-top:0;
}
.hub-tab-btn{
  flex:1; text-align:center; padding:11px 0;
  font-family: var(--pf-font-display); letter-spacing:1.5px; font-size:11px;
  background: transparent;
  border:none; border-top:2px solid transparent;
  color: var(--pf-text-faint); cursor:pointer;
  transition: color .15s, border-color .15s, background .15s;
  text-transform:uppercase;
}
.hub-tab-btn:hover{ color: var(--pf-text-dim); background: rgba(255,255,255,.02); }
.hub-tab-btn.active{
  border-top-color: var(--pf-brand-lit);
  color: var(--pf-text);
  background: linear-gradient(180deg, rgba(165,52,43,.1) 0%, transparent 100%);
}

.acte-block{ display:flex; flex-direction:column; gap:var(--pf-gap-sm); }
.acte-title{
  font-family: var(--pf-font-display); letter-spacing:2.5px; font-size:11px;
  color: var(--pf-gold); padding-left:2px;
  display:flex; align-items:center; gap:8px;
}
.acte-title::after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, var(--pf-gold-dim), transparent); opacity:.5; }
.mission-row{ display:flex; gap:var(--pf-gap-sm); overflow-x:auto; padding-bottom:4px; }

/* ══════════════════════════════════════════════════════════════
   DÉPLOIEMENT
   ══════════════════════════════════════════════════════════════ */
#screen-deploy{ padding:var(--pf-gap-md); gap:var(--pf-gap-md); }
.deploy-body{
  flex:1; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:1fr; gap:var(--pf-gap-md);
}
.deploy-footer{ display:flex; gap:var(--pf-gap-sm); align-items:center; flex-shrink:0; }
.deploy-footer .pf-btn-brand{ flex:1; }
/* Label "ENTRER EN COMBAT" visible plein écran */
.deploy-footer .pf-btn-brand{ font-size:15px; padding:13px 20px; letter-spacing:2.5px; }

/* ══════════════════════════════════════════════════════════════
   COMBAT
   ══════════════════════════════════════════════════════════════ */
#screen-game{ padding:0; }
#game-mount{ position:absolute; inset:0; }
#game-hud{ position:absolute; inset:0; pointer-events:none; }
#game-hud > *{ pointer-events:auto; }

/* ══════════════════════════════════════════════════════════════
   FIN DE MATCH — plein écran avec colonnes de personnages
   ══════════════════════════════════════════════════════════════ */
#screen-end{
  align-items:center; padding:var(--pf-gap-lg);
  gap:var(--pf-gap-md); overflow:hidden;
}
#end-title{
  font-family: var(--pf-font-display);
  font-size:clamp(36px, 8vw, 56px);
  letter-spacing:6px;
  text-shadow: 0 0 40px currentColor, 0 4px 14px rgba(0,0,0,.9);
  text-transform:uppercase;
}
#end-subtitle{ font-size:13px; color: var(--pf-text-dim); letter-spacing:2px; margin-bottom:4px; }
#end-rewards{ width:100%; max-width:480px; overflow-y:auto; flex:1; min-height:0; }
.end-btns{ width:100%; max-width:480px; display:flex; gap:var(--pf-gap-sm); flex-shrink:0; }
.end-btns .pf-btn{ flex:1; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBARS
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar{ width:4px; height:4px; }
::-webkit-scrollbar-thumb{ background: var(--pf-panel-border-lit); border-radius:2px; }
::-webkit-scrollbar-track{ background:transparent; }

/* Téléphone tenu à la verticale : le jeu se joue à l'horizontale. */
.pf-rotate{ display:none; }
@media (orientation:portrait) and (max-width:600px){
  .pf-rotate{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    position:fixed; inset:0; z-index:1000; padding:24px; text-align:center;
    background:#07080f; color:var(--pf-text);
    font-family:var(--pf-font-display); font-size:22px; letter-spacing:2px;
  }
  .pf-rotate-ico{ font-size:64px; color:var(--pf-gold); animation:pf-rotate-turn 2s ease-in-out infinite; }
}
@keyframes pf-rotate-turn{ 0%,30%{ transform:rotate(0); } 60%,100%{ transform:rotate(-90deg); } }