/* ============================================================
   POLIMON 2027 — STYLES
   Apparence du site (couleurs, polices, mise en page).
   Le contenu, lui, se modifie dans data/polimons.js
   ============================================================ */
@font-face{
  font-family:'Press Start 2P';
  src:url(../fonts/press-start-2p-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF;
  font-display:swap;
}
@font-face{
  font-family:'Press Start 2P';
  src:url(../fonts/press-start-2p-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2019;
  font-display:swap;
}
:root{
  --jaune:#ffde00; --jaune2:#f5c400; --or:#b3a125;
  --noir:#16161a; --noir2:#232329; --blanc:#fffef5;
  --bleu:#2a5db0; --rouge:#cc0000; --vert:#4e8234;
  --px:4px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  image-rendering:auto;
}
.pixel, h1,h2,h3, .btn, nav a, .tag, .lvl-btn, .code-badge{
  font-family:'Press Start 2P',monospace;
}
img.sprite{image-rendering:pixelated;}
canvas.gen{image-rendering:pixelated;}

/* ============ scanline / grain overlay ============ */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  opacity:.35;
}

/* ============ NAV ============ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--noir); border-bottom:var(--px) solid var(--jaune);
  display:flex; align-items:center; gap:14px; padding:10px 16px;
  flex-wrap:wrap;
}
nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--jaune);}
nav .brand img{height:44px;width:auto;display:block;}
nav .links{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}
nav a.navlink{
  color:var(--blanc); text-decoration:none; font-size:9px; padding:9px 12px;
  border:3px solid transparent;
}
nav a.navlink:hover{border-color:var(--jaune);color:var(--jaune);}
nav a.navlink.active{background:var(--jaune);color:var(--noir);border-color:var(--jaune);}

main{padding-top:62px;}
section.space{display:none;}
section.space.visible{display:block;}

/* ============ pixel frames & dialog ============ */
.pxbox{
  background:var(--blanc); color:var(--noir);
  border:var(--px) solid var(--noir);
  box-shadow:0 0 0 var(--px) var(--blanc), 0 0 0 calc(var(--px)*2) var(--noir), 8px 10px 0 calc(var(--px)*2) rgba(0,0,0,.45);
  padding:18px 20px;
}
.dialog{position:relative;}
.dialog .speaker{
  position:absolute; top:-16px; left:14px; background:var(--rouge); color:#fff;
  font-family:'Press Start 2P',monospace; font-size:8px; padding:6px 10px;
  border:3px solid var(--noir);
}
.dialog .speaker.blue{background:var(--bleu);}
.dialog .speaker.green{background:var(--vert);}
.dialog p{font-size:1.02rem;}
.dialog .arrow{
  position:absolute; right:12px; bottom:6px; color:var(--rouge); font-size:14px;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0;}}

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--jaune); color:var(--noir); border:3px solid var(--noir);
  box-shadow:0 5px 0 var(--noir); padding:13px 20px; font-size:10px;
  transition:transform .06s, box-shadow .06s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--noir);}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--noir);}
.btn.ghost{background:var(--noir2);color:var(--jaune);border-color:var(--jaune);box-shadow:0 5px 0 var(--or);}
.btn.small{padding:9px 12px;font-size:8px;}

/* ============ HERO ============ */
.hero{
  min-height:calc(100vh - 62px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 20px 70px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,222,0,.22), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 24px, transparent 24px 48px),
    var(--noir);
}
.hero .ball{position:absolute;border:3px solid rgba(255,222,0,.14);border-radius:50%;}
.hero img.logo{width:150px;margin-bottom:26px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5));}
.hero h1{
  color:var(--jaune); font-size:clamp(26px,6vw,54px); line-height:1.25;
  text-shadow:4px 4px 0 var(--bleu), 8px 8px 0 rgba(0,0,0,.6);
}
.hero .tagline{
  font-family:'Press Start 2P',monospace; font-size:clamp(10px,2.2vw,15px);
  color:var(--blanc); margin:22px 0 8px; letter-spacing:1px;
}
.hero .tagline .cursor{animation:blink 1s steps(2) infinite;color:var(--jaune);}
.hero .intro{max-width:680px;margin:24px auto 30px;color:#cfcfc6;font-size:1.05rem;}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.hero .demzet{margin-top:38px;font-size:8px;color:#8a8a80;font-family:'Press Start 2P',monospace;}
.hero .scrollhint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--jaune);font-size:11px;font-family:'Press Start 2P',monospace;animation:hop 1.4s ease-in-out infinite;}
@keyframes hop{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ============ 3 espaces cards ============ */
.spaces{max-width:1050px;margin:0 auto;padding:70px 20px;}
.spaces h2, .chapters h2{color:var(--jaune);font-size:16px;text-align:center;margin-bottom:44px;}
.spaces .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;}
.space-card{background:var(--noir2);border:3px solid var(--jaune);padding:26px 22px;text-align:center;cursor:pointer;transition:transform .1s;}
.space-card:hover{transform:translateY(-4px);}
.space-card .ico{font-size:40px;}
.space-card h3{color:var(--jaune);font-size:11px;margin:16px 0 12px;}
.space-card p{color:#cfcfc6;font-size:.95rem;}

/* ============ SCROLLYTELLING ============ */
.story{max-width:1060px;margin:0 auto;padding:30px 18px 80px;}
.scene{
  margin:0 auto 12vh; opacity:0; transform:translateY(46px);
  transition:opacity .8s ease, transform .8s ease;
}
.scene.on{opacity:1;transform:none;}
.scene .art{position:relative;border:var(--px) solid var(--noir);box-shadow:0 0 0 3px var(--jaune);}
.scene .art img{display:block;width:100%;}
.scene .caption{max-width:420px;margin:-30px 0 0 22px;position:relative;z-index:5;}
.scene .caption.right{margin:-30px 22px 0 auto;}
.titlecard{text-align:center;padding:9vh 0;}
.titlecard .ep{color:var(--jaune);font-size:13px;letter-spacing:2px;font-family:'Press Start 2P',monospace;}
.titlecard h3{color:var(--blanc);font-size:clamp(18px,4.5vw,30px);margin-top:18px;font-family:'Press Start 2P',monospace;}
.titlecard .bar{width:120px;height:6px;background:var(--jaune);margin:26px auto 0;}
.duo{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:center;}
.duo .chars{display:flex;justify-content:center;align-items:flex-end;gap:10px;}
.duo .chars img{max-height:300px;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.5));}
.duo .bubbles{display:flex;flex-direction:column;gap:34px;}
.persoscene{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;max-width:820px;margin:0 auto;}
.persoscene img{max-height:330px;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.5));}
@media(max-width:760px){
  .duo,.persoscene{grid-template-columns:1fr;}
  .scene .caption{margin:14px auto 0;}
  .scene .caption.right{margin:14px auto 0;}
}

/* starters */
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:760px;margin:34px auto 0;}
.starter{
  background:var(--noir2); border:3px solid #555; padding:14px; cursor:pointer; text-align:center;
  transition:border-color .15s, transform .1s;
}
.starter:hover{border-color:var(--jaune);transform:translateY(-4px);}
.starter.chosen{border-color:var(--jaune);background:#33321f;box-shadow:0 0 0 3px var(--jaune);}
.starter img{width:100%;image-rendering:pixelated;}
.starter .ballrow{font-size:20px;margin-top:8px;}
@media(max-width:600px){.starters{grid-template-columns:1fr;}}
#starter-reponse{max-width:640px;margin:40px auto 0;display:none;}
#starter-reponse.show{display:block;animation:pop .35s ease;}
@keyframes pop{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* chapters teaser */
.chapters{max-width:900px;margin:0 auto;padding:20px 20px 90px;}
.chapter-row{display:flex;align-items:center;gap:18px;background:var(--noir2);border:3px solid #444;padding:18px 20px;margin-bottom:16px;}
.chapter-row.done{border-color:var(--jaune);}
.chapter-row .num{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--jaune);min-width:44px;}
.chapter-row .t{flex:1;}
.chapter-row .t b{display:block;font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:1px;}
.chapter-row .t span{color:#9c9c92;font-size:.9rem;}
.chapter-row .stat{font-family:'Press Start 2P',monospace;font-size:8px;padding:7px 10px;border:2px solid;}
.chapter-row .stat.ok{color:var(--noir);background:var(--jaune);border-color:var(--jaune);}
.chapter-row .stat.soon{color:#9c9c92;border-color:#555;}

/* ============ COMBAT ============ */
.combat-wrap{max-width:1100px;margin:0 auto;padding:46px 18px 90px;}
.space-header{text-align:center;margin-bottom:40px;}
.space-header h2{color:var(--jaune);font-size:clamp(15px,3.5vw,22px);}
.space-header p{color:#cfcfc6;max-width:640px;margin:18px auto 0;}
.rule-note{
  max-width:640px;margin:20px auto 0;background:var(--noir2);border:3px dashed var(--jaune);
  padding:12px 16px;color:var(--jaune);font-size:.9rem;text-align:center;
}
.lvl-picker{display:flex;gap:12px;justify-content:center;margin:34px 0;flex-wrap:wrap;}
.lvl-btn{
  cursor:pointer;background:var(--noir2);color:var(--blanc);border:3px solid #555;
  padding:12px 16px;font-size:9px;
}
.lvl-btn.active{background:var(--jaune);color:var(--noir);border-color:var(--jaune);}
.vs-grid{display:grid;grid-template-columns:1fr 70px 1fr;gap:14px;align-items:start;}
.vs-mid{
  text-align:center;font-family:'Press Start 2P',monospace;color:var(--rouge);
  font-size:22px;padding-top:120px;text-shadow:2px 2px 0 var(--noir);
}
@media(max-width:800px){.vs-grid{grid-template-columns:1fr;}.vs-mid{padding:6px 0;}}
.fighter{background:var(--noir2);border:3px solid var(--jaune);padding:18px;}
.fighter select{
  width:100%;background:var(--noir);color:var(--blanc);border:3px solid var(--jaune);
  padding:11px;font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:16px;
}
.fighter .card-face{text-align:center;}
.fighter .card-face .spr{margin:4px auto 10px;width:132px;height:132px;display:flex;align-items:center;justify-content:center;background:#0e0e11;border:3px solid #444;}
.fighter .pname{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--jaune);}
.fighter .meta{font-size:.88rem;color:#cfcfc6;margin-top:8px;}
.tag{
  display:inline-block;font-size:8px;padding:6px 9px;border:2px solid var(--noir);
  color:var(--noir);margin:3px 2px;
}
.compare{margin-top:44px;}
.compare h3{color:var(--jaune);font-size:12px;margin:34px 0 14px;display:flex;align-items:center;gap:10px;}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){.cmp-row{grid-template-columns:1fr;}}
.cmp-cell{background:var(--blanc);color:var(--noir);border:3px solid var(--noir);padding:14px 16px;font-size:.95rem;box-shadow:4px 4px 0 rgba(0,0,0,.4);}
.cmp-cell .who{font-family:'Press Start 2P',monospace;font-size:8px;margin-bottom:8px;color:var(--bleu);}
.cmp-cell.b .who{color:var(--rouge);}
.stats-note{margin-top:40px;text-align:center;color:#9c9c92;font-size:.85rem;}
.statbars{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:760px;margin-left:auto;margin-right:auto;}
.statbar{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#9c9c92;}
.statbar .bar{flex:1;height:12px;background:#2c2c33;border:2px solid #444;position:relative;}
.statbar .bar::after{content:"";position:absolute;inset:0;width:0%;background:var(--jaune);}
.placeholder-panel{text-align:center;padding:60px 0;color:#8a8a80;}

/* ============ POLIDEX ============ */
.dex-wrap{max-width:1150px;margin:0 auto;padding:46px 18px 90px;}
.dex-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
.dex-controls select,.dex-controls input{
  background:var(--noir2);color:var(--blanc);border:3px solid var(--jaune);
  padding:10px 12px;font-family:'Press Start 2P',monospace;font-size:8px;
}
.dex-controls input{width:220px;}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px;}
.dex-card{
  background:var(--noir2);border:3px solid #494950;padding:12px 10px 14px;text-align:center;
  cursor:pointer;transition:transform .08s,border-color .12s;position:relative;
}
.dex-card:hover{transform:translateY(-3px);border-color:var(--jaune);}
.dex-card .code-badge{position:absolute;top:6px;left:8px;font-size:7px;color:#8a8a80;}
.dex-card .lvl{position:absolute;top:6px;right:8px;font-size:12px;letter-spacing:-2px;}
.dex-card .spr{width:96px;height:96px;margin:10px auto 6px;display:flex;align-items:center;justify-content:center;}
.dex-card .nm{font-family:'Press Start 2P',monospace;font-size:8.5px;color:var(--blanc);margin-top:4px;line-height:1.6;}
.dex-card .el{margin-top:6px;font-size:13px;}
.dex-count{text-align:center;color:#8a8a80;font-size:.85rem;margin:26px 0 0;}

/* modal fiche */
#fiche-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;display:none;
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:70px 14px 40px;
}
#fiche-overlay.open{display:flex;}
.fiche{
  background:var(--noir2);border:var(--px) solid var(--jaune);max-width:780px;width:100%;
  padding:26px 26px 34px;position:relative;
}
.fiche .close{
  position:absolute;top:10px;right:10px;cursor:pointer;background:var(--rouge);color:#fff;
  border:3px solid var(--noir);font-family:'Press Start 2P',monospace;font-size:10px;padding:8px 10px;
}
.fiche-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.fiche-head .spr{width:150px;height:150px;background:#0e0e11;border:3px solid var(--jaune);display:flex;align-items:center;justify-content:center;}
.fiche-head h3{font-size:15px;color:var(--jaune);font-family:'Press Start 2P',monospace;}
.fiche-head .sub{color:#cfcfc6;margin-top:10px;font-size:.92rem;}
.fiche h4{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--jaune);margin:30px 0 14px;}
.evo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.evo-step{background:var(--noir);border:3px solid #494950;padding:10px;text-align:center;cursor:pointer;min-width:104px;}
.evo-step.cur{border-color:var(--jaune);}
.evo-step .nm{font-family:'Press Start 2P',monospace;font-size:7px;margin-top:6px;display:block;color:var(--blanc);}
.evo-step .lv{font-size:.7rem;color:#8a8a80;}
.evo-arr{font-family:'Press Start 2P',monospace;color:var(--jaune);font-size:14px;}
.dim-row{background:var(--blanc);color:var(--noir);border:3px solid var(--noir);padding:12px 15px;margin-bottom:10px;box-shadow:4px 4px 0 rgba(0,0,0,.35);}
.dim-row b{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--bleu);display:block;margin-bottom:4px;}
.dim-row p{font-size:.93rem;}

footer{
  border-top:var(--px) solid var(--jaune);padding:36px 20px;text-align:center;color:#8a8a80;font-size:.85rem;
}
footer .px{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--jaune);margin-bottom:12px;}
.wip{display:inline-block;background:var(--rouge);color:#fff;border:2px solid var(--noir);font-family:'Press Start 2P',monospace;font-size:7px;padding:5px 8px;vertical-align:middle;margin-left:8px;}

/* ============ images officielles des Polimons ============ */
.spr img.poli-img{max-width:100%;max-height:100%;display:block;object-fit:contain;}
.evo-step .mini img.poli-img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto;}

/* ============================================================
   CARTES HOLOGRAPHIQUES (Polidex) — tilt 3D + reflet arc-en-ciel
   ============================================================ */
.dex-grid{perspective:1200px;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:22px;}
.dex-card{
  border-color:var(--c1,#494950);
  transition:box-shadow .25s ease;
  transform-style:preserve-3d;
  will-change:transform;
  overflow:hidden;
}
.dex-card:hover{transform:none;border-color:var(--c1,#494950);}
.dex-card.holo-on{box-shadow:0 18px 34px rgba(0,0,0,.6), 0 0 22px var(--c1-glow,rgba(255,222,0,.18));z-index:5;}
.dex-card .spr{border:2px solid var(--c1,#444);background:#0e0e11;}
.dex-card .who-mini{font-size:.72rem;color:#8a8a80;margin-top:4px;}
.dex-card .holo,.dex-card .glare,.trainer-card .holo,.trainer-card .glare{
  position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.dex-card .holo,.trainer-card .holo{
  background-image:
    repeating-linear-gradient(115deg,
      transparent 0%, transparent 22%,
      rgba(0,255,255,.30) 30%,
      rgba(255,80,255,.32) 38%,
      rgba(255,235,80,.30) 46%,
      rgba(80,255,140,.28) 54%,
      transparent 64%, transparent 100%);
  background-size:260% 260%;
  mix-blend-mode:color-dodge;
  filter:brightness(1.05) contrast(1.15) saturate(1.3);
}
.dex-card .glare,.trainer-card .glare{mix-blend-mode:overlay;}
.dex-card.holo-on .holo,.trainer-card.holo-on .holo{opacity:.85;}
.dex-card.holo-on .glare,.trainer-card.holo-on .glare{opacity:1;}

/* ============================================================
   ESPACE DRESSEURS
   ============================================================ */
.trainer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;perspective:1200px;}
.trainer-card{
  position:relative;background:var(--noir2);border:3px solid var(--c1,#494950);
  padding:20px 18px;transition:box-shadow .25s ease;transform-style:preserve-3d;
  will-change:transform;overflow:hidden;
}
.trainer-card.holo-on{box-shadow:0 18px 34px rgba(0,0,0,.6);z-index:5;}
.t-head{display:flex;gap:16px;align-items:center;}
.t-avatar{
  width:74px;height:74px;flex:0 0 74px;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--c1,#555);background:#0e0e11;overflow:hidden;
}
.t-avatar img{width:100%;height:100%;object-fit:cover;}
.t-avatar .initials{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--c1,#ffde00);}
.t-name{font-family:'Press Start 2P',monospace;font-size:10.5px;color:var(--blanc);line-height:1.7;}
.t-parti{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--jaune);margin:6px 0 8px;}
.t-bio{color:#cfcfc6;font-size:.92rem;margin:16px 0 6px;min-height:66px;}
.t-lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.t-poli{
  background:var(--noir);border:2px solid #3c3c44;text-align:center;padding:8px 4px;cursor:pointer;
  transition:border-color .15s;
}
.t-poli:hover{border-color:var(--jaune);}
.t-poli img,.t-poli canvas{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto;}
.t-poli .pn{font-family:'Press Start 2P',monospace;font-size:6.5px;color:#cfcfc6;display:block;margin-top:6px;line-height:1.6;}
.t-poli .pl{font-size:9px;color:var(--jaune);letter-spacing:-1px;}

/* ============================================================
   SCÈNE DE COMBAT FAÇON GAME BOY
   ============================================================ */
.battle-pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:20px;}
.battle-pickers select{
  width:100%;background:var(--noir);color:var(--blanc);border:3px solid var(--jaune);
  padding:11px;font-family:'Press Start 2P',monospace;font-size:9px;
}
.battle-pickers .vs{font-family:'Press Start 2P',monospace;color:var(--rouge);font-size:16px;text-shadow:2px 2px 0 var(--noir);}
.battle{
  position:relative;height:400px;overflow:hidden;
  border:var(--px) solid var(--noir);box-shadow:0 0 0 3px var(--jaune);
  background:
    repeating-linear-gradient(0deg, rgba(15,56,15,.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#9bbc0f 0%,#8bac0f 54%,#739405 54.4%,#6d8c05 100%);
}
.spr-slot{position:absolute;z-index:0;}
.spr-slot::after{
  content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:180px;height:36px;background:#306230;border-radius:50%;opacity:.5;z-index:-1;
}
.spr-slot.foe{top:36px;right:9%;}
.spr-slot.ally{bottom:96px;left:9%;}
@keyframes enter-left{from{transform:translateX(-140px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes enter-right{from{transform:translateX(140px);opacity:0;}to{transform:none;opacity:1;}}
.spr-slot.ally.enter{animation:enter-left .55s steps(7);}
.spr-slot.foe.enter{animation:enter-right .55s steps(7);}
.plate{
  position:absolute;z-index:3;background:var(--blanc);color:var(--noir);
  border:3px solid var(--noir);box-shadow:4px 4px 0 rgba(15,56,15,.45);
  padding:10px 14px;min-width:230px;
}
.plate-foe{top:28px;left:4%;}
.plate-ally{bottom:100px;right:4%;}
.pl-name{font-family:'Press Start 2P',monospace;font-size:9px;display:flex;justify-content:space-between;gap:10px;}
.pl-lvl{color:#b3a125;letter-spacing:-2px;}
.pl-el{font-size:.78rem;color:#555;margin-top:7px;}
.pl-hp{display:flex;align-items:center;gap:7px;margin-top:9px;}
.pl-hp span{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--rouge);}
.pl-bar{flex:1;height:9px;background:#ddd;border:2px solid var(--noir);}
.pl-bar div{height:100%;width:100%;background:#4e8234;}
.battle-msg{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  background:var(--noir);border-top:4px solid var(--jaune);
  color:var(--blanc);font-family:'Press Start 2P',monospace;font-size:9px;
  line-height:2;padding:15px 18px;min-height:66px;
}
@media(max-width:680px){
  .battle{height:340px;}
  .spr-slot canvas,.spr-slot img{width:110px !important;height:110px !important;}
  .spr-slot::after{width:120px;height:26px;bottom:-10px;}
  .spr-slot.foe{top:20px;right:4%;}
  .spr-slot.ally{bottom:120px;left:4%;}
  .plate{min-width:140px;padding:8px 10px;}
  .plate-foe{top:14px;}
  .plate-ally{bottom:130px;}
  .pl-name{font-size:7.5px;}
  .battle-msg{font-size:8px;}
}

/* ============================================================
   POKÉBALL (choix du starter)
   ============================================================ */
.starter{position:relative;}
.pokeball{
  position:relative;width:92px;height:92px;margin:26px auto;border-radius:50%;
  border:4px solid var(--noir);
  background:linear-gradient(180deg,#cc0000 0%,#cc0000 44%,#16161a 44%,#16161a 56%,#fffef5 56%,#fffef5 100%);
  box-shadow:inset -10px -10px 0 rgba(0,0,0,.16), 0 6px 0 rgba(0,0,0,.35);
}
.pokeball::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;background:#fffef5;border:4px solid var(--noir);border-radius:50%;
  box-shadow:inset 0 0 0 3px #ddd;
}
@keyframes pb-wobble{
  0%,100%{transform:rotate(0);}
  12%{transform:rotate(-20deg) translateX(-5px);}
  28%{transform:rotate(16deg) translateX(5px);}
  44%{transform:rotate(-12deg) translateX(-3px);}
  60%{transform:rotate(9deg) translateX(3px);}
  78%{transform:rotate(-5deg);}
}
.pokeball.shaking{animation:pb-wobble .95s ease-in-out;}
.starter img.sprite{display:none;}
.starter.opened .pokeball{display:none;}
.starter.opened img.sprite{display:block;animation:pb-pop .5s ease;}
@keyframes pb-pop{0%{transform:scale(.2);opacity:0;}70%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}
.starter.opened::before{
  content:"";position:absolute;inset:0;background:#fff;opacity:0;
  animation:pb-flash .55s ease-out;pointer-events:none;z-index:5;
}
@keyframes pb-flash{0%{opacity:.95;}100%{opacity:0;}}

/* ============================================================
   FICHE : SOUS-DIMENSIONS ET THÈMES (niveaux 2 et 3)
   ============================================================ */
.dim-group{margin-bottom:12px;border:3px solid #494950;background:var(--noir);}
.dim-group summary{
  cursor:pointer;list-style:none;padding:13px 14px;
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--jaune);
}
.dim-group summary::-webkit-details-marker{display:none;}
.dim-group summary::before{content:"▸ ";}
.dim-group[open] summary::before{content:"▾ ";}
.dim-group .dim-intro{color:#9c9c92;font-style:italic;font-size:.88rem;margin:0 14px 12px;}
.dim-group .dim-row{margin:0 12px 10px;}
.wip-txt{color:#8a8a80;}

/* ============================================================
   SCROLLYTELLING ÉPISODE 1 — apparitions raffinées + parallaxe
   ============================================================ */
.scene{opacity:1;transform:none;transition:none;}
.scene .art{
  aspect-ratio:1672/941;overflow:hidden;background:#0e100c;
  opacity:0;transform:translateY(32px) scale(.985);
  transition:opacity .55s steps(9), transform .85s cubic-bezier(.22,.61,.36,1);
}
.scene.on .art{opacity:1;transform:none;}
.scene .art img{
  width:100%;height:100%;object-fit:cover;display:block;will-change:transform;
}
.scene .caption{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease .18s, transform .7s cubic-bezier(.22,.61,.36,1) .18s;
}
.scene.on .caption{opacity:1;transform:none;}
.cap-stack{
  max-width:470px;margin:-34px 0 0 24px;position:relative;z-index:5;
  display:flex;flex-direction:column;gap:30px;
}
.cap-stack.right{margin:-34px 24px 0 auto;}
.cap-stack .pxbox{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease .2s, transform .7s cubic-bezier(.22,.61,.36,1) .2s;
}
.cap-stack .pxbox:nth-child(2){transition-delay:.5s,.5s;}
.scene.on .cap-stack .pxbox{opacity:1;transform:none;}
.scene.persoscene img{
  width:270px;max-height:none;border:4px solid var(--noir);box-shadow:0 0 0 3px var(--jaune);
  opacity:0;transform:scale(.55);
  transition:opacity .4s steps(6), transform .55s cubic-bezier(.34,1.56,.64,1) .05s;
}
.scene.on.persoscene img{opacity:1;transform:none;}
.titlecard .ep,.titlecard h3{opacity:0;transition:opacity .55s ease .12s;}
.scene.on .ep,.scene.on h3{opacity:1;}
.titlecard .bar{width:0;transition:width .9s steps(12) .3s;}
.scene.on .bar{width:120px;}
.scene .starters{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease .15s, transform .7s cubic-bezier(.22,.61,.36,1) .15s;
}
.scene.on .starters{opacity:1;transform:none;}
#branch-scene[hidden]{display:none;}
#branch-scene #starter-reponse{max-width:470px;}
@media(max-width:760px){
  .cap-stack,.cap-stack.right{margin:14px auto 0;}
  .scene.persoscene img{width:200px;margin:0 auto;}
}
@media(prefers-reduced-motion: reduce){
  .scene .art,.scene .caption,.cap-stack .pxbox,.scene .starters,
  .scene.persoscene img,.titlecard .ep,.titlecard h3{transition:none;opacity:1;transform:none;}
  .titlecard .bar{transition:none;width:120px;}
}

/* ============================================================
   CARTE OVERWORLD + MARCHEUR + ACCUEIL v2
   ============================================================ */
/* L'espace Aventure se joue sur la carte : herbe pixel + chemin
   de terre vertical (Sachez marche dessus pendant le scroll). */
#aventure{
  background:
    url(../images/map-path.png) repeat-y 34px 0,
    url(../images/map-village.png) repeat;
  background-size:104px auto, 1280px;
}
/* le hero garde sa lisibilité : voile sombre au-dessus de la carte */
.hero{
  background:
    radial-gradient(circle at 50% 120%, rgba(255,222,0,.20), transparent 55%),
    linear-gradient(rgba(18,18,22,.82), rgba(18,18,22,.68));
}
.spaces{background:rgba(18,18,22,.62);padding-top:60px;padding-bottom:60px;max-width:none;}
.spaces .inner{max-width:1180px;margin:0 auto;}
.chapters{background:rgba(18,18,22,.62);max-width:none;}
.chapters .inner{max-width:900px;margin:0 auto;padding:20px 20px 70px;}

/* Sachez marche sur le chemin (fixe à l'écran, la carte défile) */
#walker{
  position:fixed;left:52px;top:44vh;z-index:60;pointer-events:none;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));
}
#walker img{width:62px;display:block;}
@keyframes walk-bob{
  0%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-4px) rotate(2deg);}
  100%{transform:translateY(0) rotate(-2deg);}
}
#walker.walking img{animation:walk-bob .34s steps(2) infinite;}
@media(max-width:1023px){#walker{display:none;}}

/* Aide clavier du scrollytelling */
#kbd-hint{
  position:fixed;right:18px;bottom:16px;z-index:60;
  background:var(--noir);border:3px solid var(--jaune);color:#cfcfc6;
  font-family:'Press Start 2P',monospace;font-size:7px;padding:9px 11px;
  opacity:0;transition:opacity .4s;pointer-events:none;line-height:1.8;
}
#kbd-hint .k{background:var(--jaune);color:var(--noir);padding:3px 6px;margin-right:6px;}
#kbd-hint.show{opacity:1;}
@media(max-width:760px){#kbd-hint{display:none;}}

/* Les 4 espaces : une seule rangée, cartes plus riches */
.spaces .grid{grid-template-columns:repeat(4,1fr);gap:22px;max-width:1180px;margin:0 auto;}
@media(max-width:1000px){.spaces .grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.spaces .grid{grid-template-columns:1fr;}}
.space-card{
  position:relative;display:flex;flex-direction:column;padding:26px 20px 56px;
  border-color:#3c3c44;background:rgba(35,35,41,.92);
  transition:transform .12s, border-color .15s, box-shadow .15s;
}
.space-card:hover,.space-card:focus-visible{
  transform:translateY(-6px);border-color:var(--jaune);
  box-shadow:0 12px 0 rgba(0,0,0,.35);outline:none;
}
.space-card:focus-visible{box-shadow:0 0 0 3px var(--jaune), 0 12px 0 rgba(0,0,0,.35);}
.space-card:nth-child(1){border-top:6px solid #78c850;}
.space-card:nth-child(2){border-top:6px solid #c03028;}
.space-card:nth-child(3){border-top:6px solid #f08030;}
.space-card:nth-child(4){border-top:6px solid #6890f0;}
.space-card .go-hint{
  position:absolute;left:0;right:0;bottom:0;padding:10px 0;
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--jaune);
  background:rgba(0,0,0,.28);opacity:.55;transition:opacity .15s;
}
.space-card:hover .go-hint,.space-card:focus-visible .go-hint{opacity:1;}

/* correction : bandes pleine largeur avec contenu centré */
.spaces{max-width:none;padding:60px max(20px, calc((100% - 1180px) / 2));}
.chapters{max-width:none;padding:26px max(20px, calc((100% - 900px) / 2)) 80px;}

/* ============================================================
   COMBAT v3 — mini-jeu en 5 rounds
   ============================================================ */
.fight-cta{text-align:center;margin-bottom:22px;}
.spr-frame{
  background:#fffef5;border:3px solid var(--noir);padding:5px;
  box-shadow:0 0 0 3px var(--jaune), 6px 8px 0 rgba(15,56,15,.45);
}
.spr-frame img,.spr-frame canvas{display:block;}
.spr-slot::after{width:150px;height:26px;bottom:-12px;}
.pl-pv{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--noir);min-width:26px;text-align:right;}
.pl-bar div{transition:width .6s ease, background .3s;}
@keyframes hit-shake{
  10%,50%,90%{transform:translateX(-9px);}
  30%,70%{transform:translateX(9px);}
}
.spr-slot.hit{animation:hit-shake .55s;}
.spr-slot.hit .spr-frame{filter:brightness(1.7) saturate(.25);}
.spr-slot.faint{transition:transform 1s ease, opacity 1s;transform:translateY(70px) rotate(9deg);opacity:0;}
@keyframes victory-bounce{0%,100%{transform:none;}40%{transform:translateY(-16px);}}
.spr-slot.victory{animation:victory-bounce .9s ease infinite;}
.spr-slot.victory .spr-frame{box-shadow:0 0 0 3px var(--jaune), 0 0 30px rgba(255,222,0,.85), 6px 8px 0 rgba(15,56,15,.45);}

.round-head{
  text-align:center;font-family:'Press Start 2P',monospace;color:var(--jaune);
  font-size:clamp(10px,2.4vw,13px);margin:30px 0 10px;line-height:1.9;
}
.round-sub{text-align:center;color:#9c9c92;font-size:.9rem;margin-bottom:18px;}
.idea-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.idea-row{grid-template-columns:1fr;}}
.idea-card{
  background:var(--blanc);color:var(--noir);border:3px solid var(--noir);
  box-shadow:4px 4px 0 rgba(0,0,0,.4);padding:18px 20px;cursor:pointer;
  font-size:1rem;transition:transform .1s, box-shadow .1s;
}
.idea-card:hover,.idea-card:focus-visible{
  transform:translateY(-4px);box-shadow:0 0 0 3px var(--jaune), 6px 8px 0 rgba(0,0,0,.4);outline:none;
}
.idea-card .own{
  display:none;font-family:'Press Start 2P',monospace;font-size:7.5px;
  color:var(--bleu);margin-bottom:10px;line-height:1.9;
}
.idea-card.revealed{cursor:default;transform:none;}
.idea-card.revealed .own{display:block;}
.idea-card.picked{box-shadow:0 0 0 4px var(--jaune), 6px 8px 0 rgba(0,0,0,.4);}
.idea-card.picked .own::after{content:"  ✔ TON VOTE";color:var(--vert);}
.idea-card.lost{opacity:.55;}
.continue-wrap{text-align:center;margin:26px 0 6px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.recap{max-width:640px;margin:0 auto;}
.recap-row{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--noir2);border:3px solid #3c3c44;padding:12px 16px;margin-bottom:10px;
}
.recap-row .rd{color:#cfcfc6;font-size:.92rem;}
.recap-row .rw{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--jaune);text-align:right;line-height:1.8;}
.recap-row .rw i{color:#8a8a80;font-style:normal;}

/* ============================================================
   DRESSEURS v2 — liste épurée + carte en modale
   ============================================================ */
.trainer-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px;perspective:none;}
.trainer-mini{
  background:var(--noir2);border:3px solid #3c3c44;border-top:5px solid var(--c1,#3c3c44);
  padding:20px 12px 16px;text-align:center;cursor:pointer;
  transition:transform .12s, border-color .15s, box-shadow .15s;
}
.trainer-mini:hover,.trainer-mini:focus-visible{
  transform:translateY(-5px);border-color:var(--c1,var(--jaune));
  box-shadow:0 10px 0 rgba(0,0,0,.35);outline:none;
}
.tm-avatar{margin:0 auto 14px;width:88px;height:88px;flex:none;}
.tm-name{font-family:'Press Start 2P',monospace;font-size:8.5px;color:var(--blanc);line-height:1.8;min-height:32px;}
.tm-el{margin-top:8px;}
.tm-el .tag{font-size:7px;padding:5px 7px;}
/* carte détaillée dans la modale */
#fiche-content .t-bio{min-height:0;}
#fiche-content .t-lineup{max-width:460px;}
#fiche-content .t-poli img,#fiche-content .t-poli canvas{width:72px;height:72px;}

/* lisibilité des cartons de titre sur la carte village */
.titlecard .ep,.titlecard h3{text-shadow:2px 2px 0 rgba(0,0,0,.55);}

/* ============================================================
   v9 — lisibilité, écrans de détail, barres dresseurs, mobile
   ============================================================ */

/* Titres de chapitre : plaque sombre lisible sur la carte */
.titlecard{
  background:rgba(16,16,20,.86);border:3px solid var(--noir);
  box-shadow:0 0 0 3px var(--jaune), 8px 10px 0 rgba(0,0,0,.35);
  max-width:560px;margin:0 auto 12vh;padding:44px 24px;
}
.titlecard .ep,.titlecard h3{text-shadow:none;}

/* Machine à écrire : flèche masquée pendant la frappe */
.pxbox.dialog{cursor:default;}
.pxbox.dialog.typing .arrow{visibility:hidden;}
.pxbox.dialog.typing{cursor:pointer;}

/* Accueil plus compact : hero raccourci, espaces resserrés */
.hero{min-height:72vh;padding:34px 20px 56px;}
.spaces{padding-top:34px;padding-bottom:38px;}
.spaces h2{margin-bottom:26px;font-size:14px;}
.spaces .grid{gap:16px;}
.space-card{padding:18px 14px 46px;}
.space-card .ico{font-size:28px;}
.space-card h3{font-size:10px;margin:12px 0 8px;}
.space-card p{font-size:.86rem;line-height:1.55;}

/* Écran de détail plein page (fiche Polimon / carte dresseur) */
#fiche-overlay{
  background:var(--noir);align-items:stretch;padding:0;display:none;overflow-y:auto;
}
#fiche-overlay.open{display:block;}
.screen-bar{
  position:sticky;top:0;z-index:10;background:var(--noir);
  border-bottom:4px solid var(--jaune);
  display:flex;align-items:center;gap:18px;padding:12px 16px;
}
.screen-label{font-family:'Press Start 2P',monospace;font-size:9px;color:#8a8a80;letter-spacing:1px;}
.fiche{
  max-width:860px;margin:26px auto 70px;border:var(--px) solid var(--jaune);
}
.fiche .close{display:none;}
.t-badges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.t-badges .stat{font-family:'Press Start 2P',monospace;font-size:7px;padding:6px 9px;border:2px solid;}
.t-fact{color:#cfcfc6;font-size:.95rem;margin-bottom:8px;}
.sujets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.sujets span{
  background:#ecead9;border:2px solid #c9c6b2;color:#555;
  font-size:.74rem;padding:3px 8px;line-height:1.4;
}

/* Dresseurs : barres horizontales empilées */
.trainer-grid{display:block;max-width:940px;margin:0 auto;}
.trainer-bar{
  display:grid;grid-template-columns:58px 1.4fr 1.2fr auto 22px;
  gap:16px;align-items:center;
  background:var(--noir2);border:3px solid #3c3c44;border-left:7px solid var(--c1,#3c3c44);
  padding:10px 16px;margin-bottom:12px;cursor:pointer;
  transition:transform .12s, border-color .15s, box-shadow .15s;
}
.trainer-bar:hover,.trainer-bar:focus-visible{
  transform:translateX(6px);border-color:var(--jaune);border-left-color:var(--c1);
  box-shadow:-6px 6px 0 rgba(0,0,0,.35);outline:none;
}
.tb-avatar{width:52px;height:52px;flex:none;}
.tb-avatar .initials{font-size:12px;}
.tb-name{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--blanc);line-height:1.8;}
.tb-parti{color:#9c9c92;font-size:.82rem;margin-top:3px;}
.tb-el .tag{font-size:7px;padding:5px 7px;}
.tb-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.tb-badges .stat{font-family:'Press Start 2P',monospace;font-size:6.5px;padding:5px 7px;border:2px solid;}
.tb-int{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--jaune);}
.tb-go{font-family:'Press Start 2P',monospace;color:var(--jaune);font-size:13px;}

/* ============ RESPONSIVE MOBILE ============ */
@media(max-width:760px){
  nav{gap:8px;padding:8px 10px;}
  nav .brand img{height:34px;}
  nav a.navlink{font-size:7.5px;padding:8px 8px;}
  main{padding-top:56px;}
  .hero{min-height:62vh;}
  .hero h1{font-size:clamp(22px,8vw,34px);}
  .battle-pickers{grid-template-columns:1fr;gap:8px;}
  .battle-pickers .vs{display:none;}
  .idea-card{font-size:.92rem;padding:14px 14px;}
  .fiche{padding:18px 14px 26px;margin:14px 10px 50px;}
  .fiche-head .spr{width:110px;height:110px;}
  .fiche-head h3{font-size:11px;}
  .trainer-bar{
    grid-template-columns:46px 1fr 22px;grid-template-areas:
      "av id go" "av el go" "av bd go";row-gap:6px;
  }
  .tb-avatar{grid-area:av;width:42px;height:42px;}
  .tb-id{grid-area:id;}
  .tb-el{grid-area:el;}
  .tb-badges{grid-area:bd;justify-content:flex-start;}
  .tb-go{grid-area:go;}
  .t-lineup{grid-template-columns:repeat(3,1fr);gap:6px;}
  .recap-row{flex-direction:column;align-items:flex-start;gap:6px;}
  .recap-row .rw{text-align:left;}
  .dex-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px;}
  .evo-row{justify-content:center;}
  .cmp-row{grid-template-columns:1fr;}
  footer{padding:26px 14px;}
}
/* correctif mobile : la fiche ne déborde plus */
.fiche{width:auto;}
#fiche-overlay{overflow-x:hidden;}

/* ============ Portraits des dresseurs ============ */
.t-avatar img{object-fit:cover;object-position:top center;}
.pl-top{display:flex;gap:10px;align-items:flex-start;}
.pl-avatar{width:38px;height:38px;flex:none;border-width:2px;}
.pl-avatar .initials{font-size:9px;}
.pl-main{flex:1;min-width:0;}
.dr-link{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:2px solid #494950;background:var(--noir);padding:5px 10px 5px 5px;margin:6px 0;
  transition:border-color .15s;
}
.dr-link:hover,.dr-link:focus-visible{border-color:var(--jaune);outline:none;}
.dr-link .dr-arrow{color:var(--jaune);}
.dr-avatar-mini{width:30px;height:30px;flex:none;border-width:2px;}
.dr-avatar-mini .initials{font-size:8px;}

/* ============================================================
   v12 — COMBAT façon écran Game Boy (plaques noires, Pokéballs)
   ============================================================ */
.gone{display:none !important;}
.battle{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 2px, transparent 2px 4px),
    #eef0e0;
  height:430px;
}
/* plaques : texte noir, arête soulignée + flèche, barre pilule */
.plate{
  background:transparent;border:none;box-shadow:none;padding:0;min-width:250px;color:var(--noir);
}
.plate-foe{top:24px;left:5%;}
.plate-ally{bottom:104px;right:5%;}
.pl-name{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--noir);
  display:block;letter-spacing:1px;line-height:1.7;
}
.pl-name .pl-l{font-size:9px;color:#3a3a34;}
.pl-sub{font-size:.78rem;color:#5a5a52;margin:2px 0 7px;}
.pl-hp{display:flex;align-items:center;gap:7px;margin:0;}
.pl-hp span{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--noir);}
.pl-bar{
  flex:1;height:10px;background:#fffef5;border:2px solid var(--noir);border-radius:7px;overflow:hidden;
}
.pl-bar div{height:100%;width:100%;background:#3f6b3a;transition:width .6s ease, background .3s;}
.pl-foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:7px;
  border-bottom:3px solid var(--noir);padding-bottom:7px;position:relative;
}
.pl-foot::after{
  content:"";position:absolute;bottom:-10px;width:0;height:0;
  border-top:8px solid var(--noir);
}
.plate-foe .pl-foot::after{right:-2px;border-left:10px solid transparent;}
.plate-ally .pl-foot::after{left:-2px;border-right:10px solid transparent;}
.pl-pv{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--noir);min-width:0;text-align:right;}
.pl-balls{display:inline-flex;gap:5px;}
.pl-balls .ball{
  width:11px;height:11px;border:2px solid var(--noir);border-radius:50%;background:#fffef5;display:inline-block;
}
.pl-balls .ball.full{background:var(--noir);}
/* dresseurs sur la scène d'intro */
.trainer-slot{position:absolute;z-index:1;transition:transform .5s steps(6), opacity .5s;}
.trainer-slot.t-foe{top:30px;right:8%;}
.trainer-slot.t-ally{bottom:100px;left:8%;}
.trainer-slot.t-foe.exit{transform:translateX(180px);opacity:0;}
.trainer-slot.t-ally.exit{transform:translateX(-180px);opacity:0;}
.battle-tr{width:auto;height:190px;border:none;background:transparent;display:block;flex:none;}
.battle-tr img{width:auto;height:190px;object-fit:contain;image-rendering:pixelated;}
.battle-tr .initials{
  font-family:'Press Start 2P',monospace;font-size:16px;color:var(--noir);
  display:flex;align-items:center;justify-content:center;width:120px;height:150px;
  border:4px solid var(--noir);background:#fffef5;
}
/* sprites : cadre discret sur fond pâle */
.spr-frame{box-shadow:4px 6px 0 rgba(0,0,0,.18);}
.spr-slot::after{background:#c9cdb4;opacity:.9;}
/* boîte de message : double cadre clair façon GB */
.battle-msg{
  background:#fffef5;color:var(--noir);border-top:none;
  border:4px solid var(--noir);outline:3px solid #fffef5;outline-offset:-9px;
  box-shadow:inset 0 0 0 5px #fffef5, inset 0 0 0 7px var(--noir);
  font-size:10px;padding:18px 22px;min-height:70px;
}
/* ============ COMBAT MOBILE : plus aucun chevauchement ============ */
@media(max-width:680px){
  .battle{
    position:relative;height:auto;min-height:0;
    display:grid;grid-template-columns:1fr auto;gap:12px 10px;align-items:center;
    grid-template-areas:
      "pf sf"
      "sa pa"
      "msg msg";
    padding:16px 12px 14px;
  }
  .plate,.spr-slot,.trainer-slot,.battle-msg{position:static;}
  .plate{min-width:0;width:100%;}
  .plate-foe{grid-area:pf;}
  .plate-ally{grid-area:pa;}
  .spr-slot.foe,.trainer-slot.t-foe{grid-area:sf;justify-self:end;}
  .spr-slot.ally,.trainer-slot.t-ally{grid-area:sa;justify-self:start;}
  .battle-msg{grid-area:msg;margin-top:6px;}
  .spr-slot canvas,.spr-slot img{width:104px !important;height:104px !important;}
  .spr-slot::after{display:none;}
  .battle-tr,.battle-tr img{height:120px;}
  .battle-tr .initials{width:86px;height:104px;font-size:12px;}
  .trainer-slot.t-foe.exit{transform:translateX(90px);opacity:0;}
  .trainer-slot.t-ally.exit{transform:translateX(-90px);opacity:0;}
  .pl-name{font-size:9px;}
  .pl-pv{font-size:8px;}
  .fight-cta .btn{width:100%;}
}

/* ============================================================
   v14 — compagnon suiveur, choix verrouillé, explorateur, chap.2
   ============================================================ */
/* le Polimon choisi trottine derrière Sachez */
#follower{
  position:fixed;left:58px;top:calc(44vh - 74px);z-index:59;pointer-events:none;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.3));
}
#follower img{width:44px;display:block;}
#follower.walking img{animation:walk-bob .34s steps(2) infinite;animation-delay:.12s;}
@media(max-width:1023px){#follower{display:none;}}

/* choix du starter verrouillé */
.starter.locked{opacity:.45;filter:grayscale(.7);pointer-events:none;transform:none !important;}
.starter.locked .ballrow{color:#666;}

/* explorateur d'idées */
.idea-explorer{max-width:900px;margin:34px auto 0;position:relative;z-index:6;}
.ie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:700px){.ie-grid{grid-template-columns:1fr;}}
.ie-col{background:rgba(18,18,22,.88);border:3px solid #3c3c44;padding:14px 10px;text-align:center;}
.ie-head img,.ie-head canvas{width:74px;height:74px;object-fit:contain;background:#fffef5;border:3px solid var(--noir);box-shadow:0 0 0 2px var(--jaune);}
.ie-name{font-family:'Press Start 2P',monospace;font-size:8.5px;color:var(--jaune);margin:10px 0 12px;}
.ie-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ie-chip{
  cursor:pointer;background:var(--noir);color:#cfcfc6;border:2px solid #494950;
  font-family:'Press Start 2P',monospace;font-size:6.5px;padding:7px 8px;
  display:inline-flex;align-items:center;gap:5px;transition:border-color .12s, color .12s;
}
.ie-chip span{letter-spacing:.5px;}
.ie-chip:hover,.ie-chip:focus-visible,.ie-chip.active{
  border-color:var(--jaune);color:var(--jaune);outline:none;
}
.ie-display{margin-top:14px;min-height:74px;font-size:.96rem;}
.ie-display b{font-family:'Press Start 2P',monospace;font-size:8.5px;color:var(--bleu);display:block;margin-bottom:8px;line-height:1.8;}

/* chapitre 2 : bande pleine largeur, ambiance nuit */
#chapitre2{
  margin:60px calc(50% - 50vw) 0;
  padding:70px max(20px, calc(50vw - 530px)) 90px;
  background:url(../images/map-chap2.png) repeat;background-size:1280px;
}
#chapitre2 .titlecard{background:rgba(10,12,22,.88);}
.art-placeholder{
  aspect-ratio:1672/941;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:#141828;border:var(--px) solid var(--noir);box-shadow:0 0 0 3px var(--jaune);
  opacity:0;transform:translateY(32px);transition:opacity .55s steps(9), transform .85s cubic-bezier(.22,.61,.36,1);
}
.scene.on .art-placeholder{opacity:1;transform:none;}
.art-placeholder .ph-q{
  font-family:'Press Start 2P',monospace;font-size:64px;color:#2c3452;
  text-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.art-placeholder .ph-t{font-family:'Press Start 2P',monospace;font-size:9px;color:#5a6488;letter-spacing:1px;}

/* ============================================================
   v15 — carte à jouer (fiche Polimon) + Polidex peaufiné
   ============================================================ */
/* --- grille du Polidex, un poil plus chiadée --- */
.dex-card{border-width:2px;padding:14px 10px 15px;}
.dex-card::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.09);pointer-events:none;
}
.dex-card .code-badge{
  background:rgba(0,0,0,.5);padding:4px 6px;color:#d8d8cc;font-size:7px;letter-spacing:1px;
}
.dex-card .lvl{color:var(--jaune);text-shadow:1px 1px 0 rgba(0,0,0,.7);font-size:11px;}
.dex-card .spr{
  width:112px;height:112px;margin:16px auto 10px;padding:6px;
  background:linear-gradient(165deg,#fffef5,#e6e2d0);
  border:2px solid var(--c1,#555);box-shadow:inset 0 0 0 2px #fffef5, 0 3px 0 rgba(0,0,0,.35);
}
.dex-card .nm{font-size:9px;letter-spacing:1px;}
.dex-card .el{margin-top:7px;}
.dex-card .who-mini{
  margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;
}

/* --- disposition de la fiche --- */
.fiche-top{display:grid;grid-template-columns:400px 1fr;gap:30px;align-items:start;margin-bottom:26px;}
@media(max-width:860px){.fiche-top{grid-template-columns:1fr;}.tcg{margin:0 auto;}}
.fiche-aside h3{font-size:14px;color:var(--jaune);font-family:'Press Start 2P',monospace;margin-bottom:12px;}
.fiche-aside .sub{color:#cfcfc6;font-size:.92rem;}
.fiche-aside h4{margin-top:26px;}

/* --- LA CARTE À JOUER --- */
.tcg{
  position:relative;width:min(400px,100%);
  background:linear-gradient(150deg, var(--c1), var(--c2) 55%, var(--c1d));
  border-radius:16px;padding:13px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 14px 30px rgba(0,0,0,.55);
  transform-style:preserve-3d;will-change:transform;overflow:hidden;cursor:default;
}
.tcg .holo,.tcg .glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:16px;}
.tcg .holo{
  background-image:repeating-linear-gradient(115deg,
    transparent 0% 22%, rgba(0,255,255,.30) 30%, rgba(255,80,255,.32) 38%,
    rgba(255,235,80,.30) 46%, rgba(80,255,140,.28) 54%, transparent 64% 100%);
  background-size:260% 260%;mix-blend-mode:color-dodge;filter:saturate(1.3) contrast(1.1);
}
.tcg .glare{mix-blend-mode:overlay;}
.tcg.holo-on .holo{opacity:.85;}
.tcg.holo-on .glare{opacity:1;}
.tcg-inner{background:#f3eeda;border-radius:8px;padding:10px 12px 8px;color:#232019;}
.tcg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.tcg-stage{
  background:#fffef5;border:1.5px solid #232019;border-radius:9px;
  font-family:'Press Start 2P',monospace;font-size:6.5px;padding:4px 7px;
}
.tcg-name{
  flex:1;font-family:'Press Start 2P',monospace;font-size:12px;color:#1c1a14;
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcg-pv{font-family:'Press Start 2P',monospace;font-size:7px;color:#a02020;}
.tcg-pv b{font-size:13px;margin-left:2px;}
.tcg-elicon{
  font-size:15px;background:#fffef5;border:1.5px solid #232019;border-radius:50%;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none;
}
.tcg-art{
  aspect-ratio:4/3;border:3px solid #c9b458;box-shadow:0 2px 4px rgba(0,0,0,.25);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--c1), var(--c2));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tcg-art img,.tcg-art canvas{width:auto !important;height:96% !important;max-width:96%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));}
.tcg-strip{
  margin:7px auto 9px;text-align:center;font-size:.68rem;color:#3f3a2c;
  background:linear-gradient(90deg,transparent,#e4dcbb 18%,#e4dcbb 82%,transparent);
  padding:3px 8px;
}
.tcg-talent{border-top:2px solid #d8cfa8;padding-top:8px;}
.talent-pill{
  background:#c03028;color:#fff;border:1.5px solid #232019;border-radius:10px;
  font-family:'Press Start 2P',monospace;font-size:6.5px;padding:4px 8px;margin-right:8px;
}
.talent-name{font-family:'Press Start 2P',monospace;font-size:9px;color:#a05a10;}
.tcg-talent p{font-size:.8rem;margin-top:6px;line-height:1.45;}
.tcg-attack{
  display:flex;align-items:center;gap:9px;margin:9px 0 8px;
  border-top:2px solid #d8cfa8;padding-top:9px;
}
.tcg-energy i{
  font-style:normal;font-size:11px;background:#fffef5;border:1.5px solid #232019;border-radius:50%;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;margin-right:2px;
}
.tcg-atk-name{flex:1;font-family:'Press Start 2P',monospace;font-size:9px;color:#1c1a14;}
.tcg-atk-dmg{font-family:'Press Start 2P',monospace;font-size:12px;}
.tcg-foot{
  display:flex;justify-content:space-between;border-top:2px solid #232019;
  padding:6px 2px 5px;font-size:.62rem;color:#3f3a2c;text-align:center;line-height:1.6;
}
.tcg-foot b{font-size:.72rem;color:#1c1a14;}
.tcg-flavor{
  font-size:.72rem;font-style:italic;color:#4a4436;border:1px solid #d8cfa8;
  padding:5px 8px;margin:4px 0 6px;background:#efe8cf;
}
.tcg-credits{display:flex;justify-content:space-between;font-size:.6rem;color:#6a6350;}
@media(max-width:480px){
  .tcg-name{font-size:10px;}
  .tcg-art img,.tcg-art canvas{height:92% !important;}
}

/* ================================================================
   v17 — POLIDEX EN CARROUSEL + IDÉES PAR ONGLETS
   ================================================================ */

/* --- Le carrousel de cartes --- */
.dex-rail-wrap{position:relative;margin-top:12px;}
.dex-rail{
  display:flex;gap:22px;overflow-x:auto;padding:20px 8px 26px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#c9b458 #1c1c22;outline:none;
}
.dex-rail::-webkit-scrollbar{height:10px;}
.dex-rail::-webkit-scrollbar-track{background:#1c1c22;border-radius:5px;}
.dex-rail::-webkit-scrollbar-thumb{background:#c9b458;border-radius:5px;border:2px solid #1c1c22;}
.dex-slide{flex:0 0 auto;width:340px;scroll-snap-align:center;}
.dex-slide .tcg{width:100%;cursor:pointer;transition:transform .22s ease;}
.dex-slide .tcg:hover,.dex-slide .tcg:focus-visible{transform:translateY(-8px);}
.dex-slide .tcg:focus-visible{outline:3px solid #ffd23f;outline-offset:3px;}
.dex-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border:3px solid #1c1a14;border-radius:10px;
  background:#ffd23f;color:#1c1a14;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:14px;line-height:1;
  box-shadow:0 4px 0 #1c1a14;
}
.dex-arrow:hover{filter:brightness(1.06);}
.dex-arrow:active{transform:translateY(-50%) translateY(3px);box-shadow:0 1px 0 #1c1a14;}
.dex-arrow.prev{left:-8px;}
.dex-arrow.next{right:-8px;}
@media(max-width:680px){
  .dex-slide{width:min(82vw,320px);}
  .dex-arrow{display:none;} /* au doigt, le défilement natif suffit */
}
@media(prefers-reduced-motion:reduce){
  .dex-rail{scroll-behavior:auto;}
  .dex-slide .tcg{transition:none;}
}

/* --- Les idées par onglets (fiche Polimon) --- */
.ideas{margin-top:32px;}
.ideas-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.itab{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:#1c1c22;border:2px solid #3a3a44;border-radius:9px;
  color:#cfcfd8;padding:10px 12px;
  font-family:'Press Start 2P',monospace;font-size:7.5px;letter-spacing:.4px;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.itab:hover{transform:translateY(-2px);border-color:#c9b458;}
.itab.active{
  background:#ffd23f;color:#1c1a14;border-color:#1c1a14;
  box-shadow:0 3px 0 #1c1a14;
}
.itab .ico{font-size:13px;}
.itab .cnt{
  background:#33333d;border-radius:8px;padding:3px 6px;
  font-size:7px;color:#9a9aa6;
}
.itab .cnt.on{background:#2c7a3f;color:#eaffea;}
.itab.active .cnt{background:rgba(0,0,0,.16);color:#1c1a14;}
.itab.active .cnt.on{background:#1c6b33;color:#eaffea;}

@keyframes ideaIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.ideas-panel{margin-top:16px;}
.idea-lead,.idea-card,.idea-empty,.idea-todo,.idea-group{animation:ideaIn .38s ease both;}
@media(prefers-reduced-motion:reduce){
  .idea-lead,.idea-card,.idea-empty,.idea-todo,.idea-group{animation:none;}
}
.idea-lead{
  background:linear-gradient(160deg,#fdf8e2,#f3eeda);
  border:3px solid #c9b458;border-radius:12px;padding:16px 18px;color:#232019;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.idea-lead p{font-size:1.05rem;line-height:1.65;margin:10px 0 0;}
.idea-tag{
  display:inline-block;font-family:'Press Start 2P',monospace;font-size:7px;color:#7a6a1e;
  background:#fff8d8;border:1.5px solid #c9b458;border-radius:7px;padding:5px 8px;
}
.idea-card{
  background:#f3eeda;border-radius:10px;padding:13px 16px;margin-top:12px;color:#232019;
  border-left:6px solid #c9b458;box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.idea-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.idea-head b{font-size:.95rem;}
.idea-code{
  font-family:'Press Start 2P',monospace;font-size:8px;background:#1c1a14;color:#ffd23f;
  border-radius:6px;padding:4px 7px;flex:none;
}
.idea-card p{font-size:.92rem;line-height:1.6;margin:0;}
.idea-card .sujets{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;}
.idea-card .sujets span{
  background:#e6dcb2;border:1px solid #c9b458;color:#4a4430;
  border-radius:7px;padding:3px 8px;font-size:.68rem;
}
.idea-empty{
  border:2px dashed #55555f;border-radius:10px;padding:14px 16px;
  color:#9a9aa6;font-style:italic;
}
.idea-todo{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.idea-todo .lbl{
  font-family:'Press Start 2P',monospace;font-size:6.5px;color:#8a8a96;margin-right:4px;
}
.idea-todo .ghost{
  border:1.5px dashed #55555f;border-radius:8px;padding:5px 9px;
  font-size:.72rem;color:#9a9aa6;
}
.idea-group{margin-top:22px;}
.idea-group-h{
  font-family:'Press Start 2P',monospace;font-size:8px;color:#c9b458;
  border-bottom:2px solid #33333d;padding-bottom:7px;letter-spacing:.5px;
}

/* ================================================================
   v17.1 — POLIDEX : cartes toutes au même format (63×88, comme une
   vraie carte Pokémon). La fenêtre d'art absorbe la variation de
   hauteur ; le texte d'ambiance n'apparaît que dans la fiche.
   ================================================================ */
.dex-slide{width:350px;}
.dex-slide .tcg{
  aspect-ratio:63/88;   /* format officiel d'une carte à jouer */
  height:auto;
}
.dex-slide .tcg-inner{display:flex;flex-direction:column;height:100%;}
.dex-slide .tcg-head{flex:none;}
.dex-slide .tcg-art{
  aspect-ratio:auto;    /* remplace le 4/3 : l'art prend la place restante */
  flex:1 1 auto;min-height:0;
}
.dex-slide .tcg-strip{
  flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.dex-slide .tcg-talent,.dex-slide .tcg-attack,.dex-slide .tcg-foot{flex:none;}
.dex-slide .tcg-flavor{display:none;}
.dex-slide .tcg-credits{margin-top:auto;padding-top:6px;}
@media(max-width:680px){
  .dex-slide{width:min(82vw,330px);}
}

/* ================================================================
   v18 — ÉPISODES : choix du compagnon DANS l'image + épisode 2
   ================================================================ */

/* --- Scène interactive (épisode 1) --- */
.art.interactive{position:relative;}
.art.interactive img{transform:none !important;}   /* pas de parallaxe ici */

/* pastilles invisibles posées sur les hexagones de dimensions */
.hs-dim{
  position:absolute;width:6%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid transparent;background:transparent;
  cursor:help;padding:0;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.hs-dim:hover,.hs-dim:focus-visible{
  border-color:#ffd23f;outline:none;
  box-shadow:0 0 0 3px rgba(255,210,63,.25), 0 0 18px rgba(255,210,63,.55);
  background:rgba(255,210,63,.14);
}
/* info-bulle partagée, affichée au-dessus du groupe survolé */
.hs-tip{
  position:absolute;top:2.5%;transform:translateX(-50%);z-index:8;
  width:min(400px,46%);padding:10px 14px;text-align:left;pointer-events:none;
}
.hs-tip b{font-family:'Press Start 2P',monospace;font-size:7.5px;display:block;margin-bottom:7px;}
.hs-tip p{font-size:.84rem;line-height:1.5;margin:0;}

/* zone cliquable du Polimon */
.hs-poli{
  position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:transparent;border:none;cursor:pointer;padding:0;
}
.hs-poli:focus-visible{outline:none;}
.hs-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px dashed rgba(255,210,63,.7);
  animation:hsPulse 2.2s ease-in-out infinite;
}
@keyframes hsPulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.07);opacity:1;}}
.hs-name{
  position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);
  background:#1c1a14;color:#ffd23f;border:2px solid #ffd23f;border-radius:8px;
  font-family:'Press Start 2P',monospace;font-size:7px;padding:6px 9px;white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.hs-poli:hover .hs-name,.hs-poli:focus-visible .hs-name{opacity:1;}
.hs-poli:hover .hs-ring,.hs-poli:focus-visible .hs-ring{border-style:solid;}
/* après le choix : l'élu brille, les autres s'éteignent dans l'image */
.hs-poli.chosen .hs-ring{
  border-style:solid;border-color:#ffd23f;animation:none;
  box-shadow:0 0 26px rgba(255,210,63,.65), inset 0 0 22px rgba(255,210,63,.18);
}
.hs-poli.chosen .hs-name{opacity:1;}
.hs-poli.chosen{cursor:default;}
.hs-poli.locked{cursor:default;}
.hs-poli.locked .hs-ring{
  animation:none;border-color:transparent;
  backdrop-filter:grayscale(1) brightness(.5);
  -webkit-backdrop-filter:grayscale(1) brightness(.5);
}
.hs-poli.locked .hs-name{display:none;}
@media(prefers-reduced-motion:reduce){.hs-ring{animation:none;}}
@media(max-width:680px){
  .hs-tip{width:74%;}
  .hs-tip p{font-size:.7rem;}
  .hs-name{font-size:6px;padding:5px 7px;}
}

/* --- Épisode 2 : voix supplémentaires --- */
.speaker.gris{color:#9fb4c8;}
.speaker.rose{color:#e8a2b8;}

/* correctif : l'image promue en couche GPU (will-change) recouvrait
   l'info-bulle — on neutralise la promotion dans la scène interactive */
.art.interactive img{will-change:auto;}
.hs-tip{z-index:50;}

/* v18.1 — la bulle de dimension vit DANS sa pastille (pur CSS) */
.hs-tip{display:none;}
.hs-dtip{
  position:absolute;bottom:135%;left:50%;transform:translateX(-50%);
  width:min(360px,38vw);padding:10px 13px;text-align:left;
  background:var(--blanc);color:var(--noir);
  border:var(--px) solid var(--noir);
  box-shadow:0 0 0 var(--px) var(--blanc), 0 0 0 calc(var(--px)*2) var(--noir), 6px 8px 0 calc(var(--px)*2) rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20;
}
.hs-dtip b{font-family:'Press Start 2P',monospace;font-size:7px;display:block;margin-bottom:6px;}
.hs-dtip i{font-style:normal;font-size:.8rem;line-height:1.5;display:block;}
.hs-dim:hover .hs-dtip,.hs-dim:focus-visible .hs-dtip{opacity:1;}
/* les bulles des pastilles de gauche/droite restent dans l'image */
.hs-dim:nth-child(-n+1) .hs-dtip{left:0;transform:none;}
@media(max-width:680px){
  .hs-dtip{width:min(300px,72vw);}
  .hs-dtip i{font-size:.68rem;}
}

/* v18.2 — invitations de fin d'épisode */
.tc-invite{
  margin:26px auto 0;max-width:440px;font-size:.92rem;line-height:1.6;color:#cfcfd8;
}
.titlecard .tc-btn{display:inline-block;margin-top:16px;}

/* ================================================================
   v18.3 — fiche Polimon : bloc dresseur cliquable + lignée sur 1 ligne
   ================================================================ */
.fh-trainer{
  display:flex;align-items:center;gap:12px;
  background:#1c1c22;border:3px solid #494950;
  padding:10px 12px;margin:16px 0 6px;cursor:pointer;
  transition:border-color .2s, transform .15s;
}
.fh-trainer:hover,.fh-trainer:focus-visible{border-color:var(--jaune);transform:translateY(-2px);outline:none;}
.fh-tav{
  width:54px;height:54px;flex:none;overflow:hidden;
  border:2px solid #494950;background:#26262c;
  display:flex;align-items:center;justify-content:center;
}
.fh-tav img{width:100%;height:100%;object-fit:cover;object-position:top;}
.fh-tav .initials{font-family:'Press Start 2P',monospace;font-size:11px;color:#cfcfd8;}
.fh-tinfo{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.fh-tinfo b{
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--blanc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-tinfo span{font-size:.78rem;color:#9a9aa6;}
.fh-tgo{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--jaune);white-space:nowrap;}

/* la lignée « 3P » tient sur une seule ligne : gauche · milieu · droite */
.evo-row{flex-wrap:nowrap;gap:6px;}
.evo-step{flex:1 1 0;min-width:0;padding:9px 4px;}
.evo-step .mini img.poli-img,.evo-step .mini canvas{width:54px !important;height:54px !important;}
.evo-step .nm{font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.evo-step .lv{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.evo-arr{font-size:11px;flex:none;}
@media(max-width:420px){
  .evo-step .mini img.poli-img,.evo-step .mini canvas{width:44px !important;height:44px !important;}
  .fh-tgo{display:none;}
}

/* ================================================================
   v18.4 — combat : étiquette de nom sous chaque Polimon
   ================================================================ */
.spr-name{
  display:block;margin-top:14px;text-align:center;
  background:var(--noir);color:var(--blanc);
  border:2px solid rgba(255,255,255,.25);
  font-family:'Press Start 2P',monospace;font-size:7.5px;
  padding:6px 9px;white-space:nowrap;
  box-shadow:3px 3px 0 rgba(15,56,15,.45);
}

/* ================================================================
   v18.4b — combat : chaque plaque colle à SON Polimon
   (l'adversaire en haut, ton camp en bas — plus d'ambiguïté)
   ================================================================ */
.battle{
  display:grid;height:auto;min-height:380px;
  grid-template-columns:1fr 1fr;align-items:center;
  grid-template-areas:
    "pf sf"
    "sa pa"
    "msg msg";
  gap:16px 20px;padding:26px 4% 18px;
}
.plate,.battle-msg{position:static;}
.spr-slot,.trainer-slot{position:relative;top:auto;left:auto;right:auto;bottom:auto;}
.plate-foe{grid-area:pf;justify-self:end;}
.spr-slot.foe,.trainer-slot.t-foe{grid-area:sf;justify-self:start;}
.spr-slot.ally,.trainer-slot.t-ally{grid-area:sa;justify-self:end;}
.plate-ally{grid-area:pa;justify-self:start;}
.battle-msg{grid-area:msg;margin-top:4px;}
.spr-slot::after{bottom:24px;}
@media(max-width:680px){
  .battle{padding:16px 12px 14px;gap:10px 12px;}
  .spr-name{font-size:6.5px;padding:5px 7px;margin-top:10px;}
}

/* neutralise les anciens décalages absolus (spécificité supérieure) */
.spr-slot.foe,.spr-slot.ally,.trainer-slot.t-foe,.trainer-slot.t-ally,
.plate-foe,.plate-ally,.battle .battle-msg{
  top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
}

/* v18.4c — mobile : la bulle de dimension s'affiche SOUS les hexagones,
   calée sur le bord de sa colonne pour rester entière dans l'image */
@media(max-width:680px){
  .hs-dtip{bottom:auto;top:140%;width:min(280px,68vw);}
  .hs-dim.col-a .hs-dtip{left:-100%;transform:none;}
  .hs-dim.col-b .hs-dtip{left:50%;transform:translateX(-50%);}
  .hs-dim.col-c .hs-dtip{left:auto;right:-100%;transform:none;}
}