/* =============================================================================
 * Aide-moi à choisir — direction « Indie / brutaliste digital »
 * Style + animations portés depuis le handoff de design (proto/styles.css).
 * La logique métier reste dans core.js (moteur de tournoi, inchangé).
 * ========================================================================== */
:root{
  --bg:#F2EFE4; --card:#FBFAF4; --ink:#141312; --orange:#FF4E1A; --blue:#2438FF;
  --silver:#C9C6BC; --bronze:#D89B5A; --gold:#FFC83D;
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);
  background-image:radial-gradient(rgba(20,19,18,.15) 1.2px, transparent 1.3px);
  background-size:16px 16px;
  display:flex;justify-content:center;align-items:center;
  overscroll-behavior:none;
}
.mono{font-family:"Space Mono",monospace;}

/* Mobile (défaut) : l'app occupe tout l'écran. */
#app{
  width:100%;max-width:430px;height:100dvh;position:relative;overflow:hidden;
  background:var(--bg);
  background-image:radial-gradient(rgba(20,19,18,.15) 1.2px, transparent 1.3px);
  background-size:16px 16px;
}

/* Par défaut (mobile) : les wrappers desktop sont transparents -> flux vertical normal. */
.home-intro,.home-panel{display:contents;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s;}
.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease, transform .28s ease;}

/* ---------- shared ---------- */
.logo{width:30px;height:30px;display:flex;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);flex:0 0 auto;}
.logo i{flex:1;display:block;}
.logo .a{background:var(--blue);} .logo .b{background:var(--orange);}

.btn{font-family:"Space Grotesk";font-weight:700;border:2px solid var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .08s, box-shadow .08s;}
.btn.solid{background:var(--ink);color:var(--card);}
.btn.ghost{background:var(--card);color:var(--ink);}
.btn.accent{background:var(--orange);color:var(--card);}
.btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)!important;}
.btn:disabled{opacity:.4;cursor:default;}

/* ---------- HOME ---------- */
#screen-home{padding:max(18px,env(safe-area-inset-top)) 22px 18px;display:flex;flex-direction:column;gap:0;min-height:0;}
/* La tête (titre, tagline, onglets, pane de saisie) ne se compresse pas. */
h1.title,.tagline,.tabs,.pane{flex:0 0 auto;}
/* Logo désormais inline dans le titre (gain de hauteur, point 4). */
h1.title{font-weight:700;font-size:46px;line-height:.92;letter-spacing:-1.5px;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;}
h1.title .logo{width:34px;height:34px;}
h1.title .hl{display:inline-block;background:var(--orange);color:var(--card);padding:1px 9px 3px;line-height:1;}
.tagline{font-family:"Space Mono";font-size:13px;line-height:1.5;margin:12px 0 0;color:rgba(20,19,18,.72);}

.tabs{margin-top:20px;display:flex;gap:8px;}
.tab{flex:1;text-align:center;padding:11px 0;font-family:"Space Mono";font-size:13px;font-weight:700;
  text-transform:uppercase;border:2px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer;}
.tab.on{background:var(--ink);color:var(--card);box-shadow:3px 3px 0 var(--orange);}

.pane{margin-top:14px;}
.pane[hidden]{display:none;}

.dropzone{border:2.5px dashed var(--ink);padding:24px 18px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:transform .12s, background .12s;}
.dropzone.drag{background:#fff;transform:scale(1.015);border-color:var(--orange);}
.dropzone .ic{width:44px;height:44px;background:var(--orange);border:2px solid var(--ink);display:grid;place-items:center;
  box-shadow:2px 2px 0 var(--ink);animation:bob 2.4s ease-in-out infinite;color:var(--card);font-size:22px;font-weight:700;}
.dropzone h3{font-weight:700;font-size:20px;margin:12px 0 0;}
.dropzone .sub{font-family:"Space Mono";font-size:12px;color:rgba(20,19,18,.6);margin-top:8px;line-height:1.5;}
/* Mention « glisse-dépose » inutile sur mobile : visible seulement en desktop (≥900px, plus bas). */
.dz-drag{display:none;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

.textfield{display:flex;gap:8px;}
/* font-size:16px = empêche le zoom auto d'iOS au focus du champ. */
.textfield input{flex:1;min-width:0;font-family:"Space Mono";font-size:16px;padding:12px 12px;border:2px solid var(--ink);background:var(--card);color:var(--ink);outline:none;}
.textfield input::placeholder{color:rgba(20,19,18,.4);}
.textfield .add{padding:0 16px;}
.field-hint{font-size:11.5px;line-height:1.5;color:rgba(20,19,18,.55);margin:10px 2px 0;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;flex:1 1 auto;min-height:40px;overflow-y:auto;align-content:flex-start;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;background:var(--card);
  border:2px solid var(--ink);font-family:"Space Mono";font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--ink);
  animation:pop .2s cubic-bezier(.2,1.4,.4,1);max-width:100%;}
.chip .dot{width:9px;height:9px;border:1.5px solid var(--ink);flex:0 0 auto;}
.chip .thumb{width:18px;height:18px;object-fit:cover;border:1.5px solid var(--ink);flex:0 0 auto;}
.chip .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.chip .x{width:16px;height:16px;display:grid;place-items:center;background:var(--ink);color:var(--card);font-size:12px;cursor:pointer;flex:0 0 auto;border:0;}
@keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}

.home-foot{flex:0 0 auto;padding-top:16px;}
.long-warn{font-size:11.5px;line-height:1.45;color:var(--ink);background:var(--gold);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);padding:9px 11px;margin:0 0 12px;}
.long-warn[hidden]{display:none;}
.priv{display:flex;align-items:center;gap:8px;font-family:"Space Mono";font-size:11.5px;color:rgba(20,19,18,.65);margin-bottom:12px;}
.priv .lk{display:grid;place-items:center;width:16px;height:16px;background:var(--ink);color:var(--card);font-size:9px;}
#start{width:100%;padding:17px 0;font-size:19px;box-shadow:4px 4px 0 var(--ink);}
#start .count{font-family:"Space Mono";font-size:12px;font-weight:700;background:rgba(255,255,255,.2);padding:3px 8px;}

/* ---------- DUEL ---------- */
.duel-top{display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 20px 12px;}
.quit{width:34px;height:34px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-size:16px;
  display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink);flex:0 0 auto;}
.quit:active{transform:translate(2px,2px);box-shadow:none;}
.quit.undo{font-size:18px;}
.quit:disabled{opacity:.4;cursor:default;}
.quit.undo:disabled{box-shadow:2px 2px 0 var(--ink);transform:none;}
.prog{flex:1;}
.prog-row{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:5px;}
.prog-bar{height:8px;border:2px solid var(--ink);background:var(--card);position:relative;overflow:hidden;}
.prog-fill{position:absolute;inset:0;width:0;background:var(--ink);transition:width .35s cubic-bezier(.3,1.3,.4,1);}

.arena{flex:1;position:relative;padding:0 16px 16px;min-height:0;}
.arena-inner{display:flex;flex-direction:column;gap:16px;height:100%;}
.duel-card{position:relative;flex:1;border:3px solid var(--ink);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;padding:0 26px;font-family:inherit;text-align:left;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s, opacity .3s, filter .3s;}
.duel-card .kicker{font-family:"Space Mono";font-size:12px;font-weight:700;}
.duel-card .name{font-weight:700;font-size:58px;line-height:.95;letter-spacing:-1px;word-break:break-word;}
.side-a{background:var(--ink);} .side-a .kicker{color:rgba(255,255,255,.6);} .side-a .name{color:var(--card);}
.side-b{background:var(--orange);} .side-b .kicker{color:rgba(20,19,18,.55);} .side-b .name{color:var(--ink);}
.duel-card .opt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.duel-card[hidden]{display:flex;} /* garde le bouton affiché même si l'<img> interne est hidden */
.duel-card .opt-img[hidden]{display:none;}
.duel-card.has-img .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 55%);}
.duel-card:not(.has-img) .scrim{display:none;}
.duel-card.has-img .name{position:relative;color:#fff;align-self:flex-start;margin-top:auto;padding-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.duel-card.has-img .kicker{position:relative;color:rgba(255,255,255,.85);align-self:flex-start;}
.duel-card.has-img.no-label .name,.duel-card.has-img.no-label .kicker,.duel-card.has-img.no-label .scrim{display:none;}

/* entry */
.slam-a{animation:slamA .34s cubic-bezier(.2,.9,.3,1.25) both;}
.slam-b{animation:slamB .34s cubic-bezier(.2,.9,.3,1.25) both;}
@keyframes slamA{from{transform:translateY(-26px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes slamB{from{transform:translateY(26px);opacity:0;}to{transform:none;opacity:1;}}
/* picked / lose */
.duel-card.picked{transform:scale(1.025);z-index:3;}
.side-a.picked{box-shadow:8px 8px 0 var(--orange);}
.side-b.picked{box-shadow:8px 8px 0 var(--blue);}
.duel-card.lose{opacity:.32;filter:grayscale(.85);transform:scale(.96);}
.pick-flash{position:absolute;top:14px;right:14px;width:34px;height:34px;background:var(--card);border:3px solid var(--ink);
  display:grid;place-items:center;opacity:0;transform:scale(.3) rotate(-12deg);font-weight:700;font-size:18px;color:var(--ink);}
.duel-card.picked .pick-flash{animation:flashin .3s cubic-bezier(.2,1.5,.4,1) .05s both;}
@keyframes flashin{to{opacity:1;transform:scale(1) rotate(-8deg);}}

.vs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:5;
  width:64px;height:64px;border-radius:50%;background:var(--card);border:3px solid var(--ink);
  display:grid;place-items:center;font-weight:700;font-size:26px;letter-spacing:-1px;box-shadow:3px 3px 0 var(--ink);
  animation:vspulse 2s ease-in-out infinite;}
@keyframes vspulse{0%,100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);}50%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.07);}}
.vs.hit{animation:vshit .4s cubic-bezier(.3,1.4,.4,1);}
@keyframes vshit{0%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);}
  30%{transform:translate(-50%,-50%) rotate(8deg) scale(1.25);}
  60%{transform:translate(-50%,-50%) rotate(-14deg) scale(.92);}
  100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);}}

/* ---------- PODIUM ---------- */
#screen-podium{padding:max(16px,env(safe-area-inset-top)) 22px 18px;overflow:hidden;}
.pod-head{text-align:left;}
.pod-head .kick{font-family:"Space Mono";font-size:12px;font-weight:700;text-transform:uppercase;}
.pod-head h1{font-weight:700;font-size:48px;line-height:.9;letter-spacing:-1.5px;margin:8px 0 0;}
.pod-head h1 .hl{display:inline-block;background:var(--ink);color:var(--card);padding:1px 10px 3px;line-height:1;
  clip-path:inset(0 100% 0 0);}
.pod-head h1 .hl.wipe{animation:wipe .5s cubic-bezier(.4,0,.2,1) .15s forwards;}
@keyframes wipe{to{clip-path:inset(0 0 0 0);}}
.pod-sub{font-family:"Space Mono";font-size:13px;color:rgba(20,19,18,.7);margin:14px 0 0;}

.steps{display:flex;align-items:flex-end;gap:10px;margin-top:auto;}
.step{flex:1;display:flex;flex-direction:column;align-items:center;}
.step .crown{height:22px;margin-bottom:4px;opacity:0;transform:translateY(6px);font-size:20px;line-height:1;}
.step .nm{font-weight:700;margin-bottom:8px;text-align:center;width:100%;overflow-wrap:break-word;line-height:1;opacity:0;transform:translateY(8px);}
.step.s1 .nm{font-size:22px;} .step.s2 .nm,.step.s3 .nm{font-size:18px;}
.bar{width:100%;border:3px solid var(--ink);border-bottom:none;box-shadow:inset -4px 0 0 rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;padding-top:12px;position:relative;overflow:hidden;
  height:0;transition:height .5s cubic-bezier(.3,1.25,.4,1);}
.step.s1 .bar{background:var(--orange);} .step.s2 .bar{background:var(--blue);} .step.s3 .bar{background:#6E6880;}
/* Photo dans la marche : image plein cadre. Couronne + rang sont au-dessus de la
   barre (hors image) → rien ne recouvre la photo, elle reste entièrement visible. */
.bar-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;}
.bar .crown-svg,.bar .rank{position:relative;z-index:3;}
/* Marche-photo cliquable (lightbox). */
.bar.has-img{cursor:zoom-in;}
/* Couronne SVG posée AU-DESSUS du rang (le chiffre « porte » la couronne). */
.crown-svg{width:34px;height:26px;display:block;opacity:0;transform:scale(.2);transform-origin:center bottom;overflow:visible;}
.step.s1 .crown-svg{width:40px;height:31px;}
.bar .crown-svg{position:relative;z-index:3;}
.bar .rank{font-family:"Space Mono";font-size:22px;font-weight:700;margin-top:4px;opacity:0;color:var(--card);}
/* Marche-photo : couronne + rang posés au-dessus de la barre (hors image), sur fond crème.
   L'image reste ainsi entièrement visible. */
.pod-head{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;margin-bottom:8px;}
.step .rank-over{font-family:"Space Mono";font-size:22px;font-weight:700;opacity:0;color:var(--ink);text-align:center;line-height:1;}
.step.s2 .rank-over,.step.s3 .rank-over{font-size:18px;}
.podium-base{height:8px;background:var(--ink);}

.how{display:block;text-align:center;margin:16px auto;font-family:"Space Mono";font-size:12.5px;font-weight:700;
  color:var(--ink);text-decoration:none;border:0;border-bottom:2px solid var(--ink);width:max-content;background:none;
  padding-bottom:2px;cursor:pointer;}
.pod-actions{display:flex;gap:10px;}
.pod-actions .btn{flex:1;padding:15px 0;font-size:15px;box-shadow:3px 3px 0 var(--ink);}
.pod-actions .btn.solid{box-shadow:3px 3px 0 var(--orange);}

.confetti{position:absolute;width:11px;height:11px;border:2px solid var(--ink);z-index:6;pointer-events:none;will-change:transform;}

/* reveal helpers */
.step.show .nm{animation:rise .4s ease .05s forwards;}
.step.show .crown-svg{animation:popin .4s cubic-bezier(.2,1.6,.4,1) .25s forwards;}
.step.show .rank{animation:fadein .3s ease .35s forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
@keyframes fadein{to{opacity:1;}}
@keyframes popin{to{opacity:1;transform:scale(1);}}
.crown-svg.wig{animation:popin .4s cubic-bezier(.2,1.6,.4,1) .25s forwards, wiggle .5s ease .7s;}
@keyframes wiggle{0%,100%{rotate:0;}25%{rotate:-10deg;}75%{rotate:10deg;}}

/* how-modal */
.modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:28px;
  background:rgba(20,19,18,.55);}
.modal.open{display:flex;}
.modal .box{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);padding:22px;max-width:340px;}
.modal h4{font-weight:700;font-size:20px;margin:0 0 10px;}
.modal p{font-family:"Space Mono";font-size:13px;line-height:1.6;color:rgba(20,19,18,.8);margin:0 0 16px;}
.modal .btn{width:100%;padding:13px 0;font-size:14px;box-shadow:3px 3px 0 var(--ink);}

/* toast (repli partage) */
.toast{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(18px);
  background:var(--ink);color:var(--card);font-family:"Space Mono";font-size:12px;font-weight:700;padding:11px 16px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--orange);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:30;}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.05s !important;}
}

/* =============================================================================
 * DESKTOP — vraie mise en page large (≥ 900px).
 * Le style brutaliste/indie reste identique : on ne change QUE la disposition.
 *   - #app s'élargit et se centre (plus de fausse fenêtre mobile)
 *   - Accueil = 2 colonnes : intro (gauche) / panneau de saisie (droite)
 *   - Duel = 2 cartes côte à côte (gauche/droite) au lieu d'empilées
 *   - Podium = plus grand, centré
 * ========================================================================== */
@media (min-width:900px){
  body{padding:40px;}

  #app{
    max-width:1040px;
    width:100%;
    height:min(720px, calc(100dvh - 80px));
    border:3px solid var(--ink);
    box-shadow:12px 12px 0 var(--ink);
  }

  /* ---- Accueil 2 colonnes ---- */
  #screen-home{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    gap:48px;
    padding:48px 56px;
    align-items:center;
  }
  /* On annule le display:contents : les wrappers redeviennent de vraies colonnes. */
  .home-intro{display:flex;flex-direction:column;justify-content:center;}
  .home-panel{display:flex;flex-direction:column;min-height:0;height:100%;justify-content:center;}

  h1.title{font-size:64px;}              /* le titre respire sur grand écran */
  h1.title .logo{width:44px;height:44px;}
  .tagline{font-size:15px;max-width:34ch;}

  .home-panel .tabs{margin-top:0;}
  .chips{max-height:none;}               /* la colonne gère déjà la hauteur */
  .home-foot{padding-top:18px;}
  .dz-drag{display:inline;}              /* le glisse-dépose redevient pertinent au desktop */

  /* ---- Duel côte à côte ---- */
  .arena{padding:0 40px 28px;}
  .arena-inner{flex-direction:row;gap:28px;}
  .duel-card .name{font-size:clamp(40px,5vw,68px);}

  /* Le VS reste pile au centre (déjà en absolute center) — rien à changer. */

  /* ---- Podium plus large ---- */
  #screen-podium{padding:40px 56px;align-items:center;}
  .pod-head{width:100%;max-width:760px;}
  .steps{width:100%;max-width:680px;align-self:center;}
  .pod-actions{width:100%;max-width:680px;align-self:center;}
  .how{margin-top:22px;}
}

/* =============================================================================
 * LIGHTBOX — voir une photo du podium en grand (créée à la volée par app.js).
 * Style brutaliste : fond ink translucide, image bordée + ombre dure décalée.
 * ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 19, 18, .82);
  opacity: 0;
  transition: opacity .2s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; }

.lightbox img {
  max-width: min(92vw, 720px);
  max-height: 86vh;
  object-fit: contain;
  border: 3px solid var(--ink, #141312);
  background: var(--card, #FBFAF4);
  box-shadow: 8px 8px 0 var(--orange, #FF4E1A);
  transform: scale(.94);
  transition: transform .2s ease;
}
.lightbox.open img { transform: scale(1); }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--ink, #141312);
  background: var(--card, #FBFAF4);
  border: 3px solid var(--ink, #141312);
  box-shadow: 4px 4px 0 var(--ink, #141312);
  cursor: pointer;
}
.lightbox-close:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink, #141312); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
  .lightbox img { transform: none; }
}