/* Lanterval · styles. Appli mobile portrait d'abord : barre du haut, scène illustrée, panneau d'actions dessous ;
   même chose sur grand écran ; seul le téléphone couché met la scène à gauche et le panneau à droite. Polices hébergées avec le jeu (dossier polices/). */
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(../polices/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url(../polices/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url(../polices/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700 800;font-display:swap;src:url(../polices/figtree-700.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(../polices/cinzel-600.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url(../polices/cinzel-700.woff2) format("woff2")}
:root{
  --bg:#0b0d1a; --glow:#1b2142; --surface:rgba(22,26,50,.94); --surface2:rgba(255,255,255,.055); --surface3:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.24); --glass:rgba(9,11,26,.62);
  --text:#eef0fa; --muted:#9ca3c7; --gold:#e9b949; --gold2:#ffd77a; --ink-gold:#2a1b00; --side:#6fb6ff; --crystal:#7fe3f0;
  --hp:#5fd38a; --pp:#6fa8ff; --danger:#ff6b6b;
  --el-L:#cfd5e0; --el-T:#d6a457; --el-F:#ff7d4a; --el-E:#55b8ff; --el-V:#8fe0a8;
  --f-title:"Cinzel",Georgia,serif; --f-ui:"Figtree",system-ui,sans-serif;
  color-scheme:dark;
}
/* touch-action : pas de zoom au double appui (Safari ignore user-scalable=no) ; padding : encoche et barre d'accueil de l'iPhone */
*{box-sizing:border-box;touch-action:manipulation}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 70% at 50% 0%,var(--glow) 0%,var(--bg) 62%);background-color:var(--bg);color:var(--text);font:15px/1.4 var(--f-ui);overflow:hidden;
  padding:max(8px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
#app{height:100%;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.top{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0}
.pillv{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pillv.gold{color:var(--gold2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.pillv svg{width:15px;height:15px}
.top .sp{flex:1;min-width:0}
.ibtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);cursor:pointer;position:relative;flex:none}
.ibtn svg{width:19px;height:19px}
.ibtn:disabled{opacity:.4}
.brand{font-family:var(--f-title);font-weight:700;color:var(--muted);font-size:14px;letter-spacing:.04em}
.stage{flex:1;min-height:0;display:flex;gap:10px}
.scene{position:relative;overflow:hidden;background:#05060f;border:1px solid var(--line);border-radius:18px;min-width:0;min-height:0}
.panel{min-width:0;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
/* téléphone couché (paysage bas) : scène à gauche, panneau à droite */
@media (orientation:landscape) and (max-height:559px){.scene{flex:1.4 1 0}.panel{flex:1 1 0;max-width:440px}}
@media (orientation:portrait){.stage{flex-direction:column}.scene{flex:0 0 35%}#app.inb .scene{flex-basis:44%}.panel{flex:1 1 0}}
/* grand écran : comme sur téléphone, image en haut (format des décors) et panneau dessous, largeur bornée */
@media (orientation:landscape) and (min-height:560px){
  #app{max-width:max(720px,min(1100px,calc((100dvh - 62px) * .6 * 1376 / 768)))}
  .stage{flex-direction:column}
  .scene{flex:0 0 auto;aspect-ratio:1376/768;max-height:60%}
  .panel{flex:1 1 0}
}
/* Scène : décor (image, panorama, dessin provisoire ou cadre nommé), monstres, textes par-dessus */
#decor,#units,#ov,#ovc,#fx{position:absolute;inset:0}
#ov,#units{pointer-events:none}
#decor{background:#05060f}
#decor img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#decor img.flou{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(18px) brightness(.55)}
#decor img.large{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#decor canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.cadre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;
  background:repeating-linear-gradient(135deg,#141833 0 14px,#181d3d 14px 28px);border:2px dashed rgba(255,255,255,.18);border-radius:16px}
.cadre span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cadre b{font-family:var(--f-title);font-size:15px;color:#d8dcf5;max-width:34ch;line-height:1.35}
/* lueur de la lanterne, posée sur le cristal de l'image */
.lueur{position:absolute;width:calc(var(--r,30px)*2);height:calc(var(--r,30px)*2);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,236,170,.9) 0%,rgba(255,200,90,.45) 30%,rgba(255,170,60,0) 70%)}
.lueur.faible{opacity:.35;animation:vacille 2.6s ease-in-out infinite}
.lueur.forte{width:calc(var(--r,30px)*4);height:calc(var(--r,30px)*4);opacity:1;animation:pulse 3.2s ease-in-out infinite}
@keyframes vacille{0%,100%{opacity:.35}40%{opacity:.18}55%{opacity:.4}70%{opacity:.22}}
@keyframes pulse{50%{opacity:.8;transform:translate(-50%,-50%) scale(1.06)}}
#app.inb #decor::after{content:"";position:absolute;inset:0;background:rgba(8,6,26,.3)}
/* monstres en combat : posés par le bas, hauteur en part de la scène */
.unit{position:absolute;transform:translate(-50%,-100%);aspect-ratio:auto;transition:opacity .35s,top .45s ease-out}
.unit img{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.unit.pix img{image-rendering:pixelated}
.unit::after{content:"";position:absolute;left:15%;right:15%;bottom:-3px;height:8px;border-radius:50%;background:rgba(0,0,0,.35);z-index:-1;transition:bottom .45s ease-out,opacity .45s,transform .45s}
.unit.vol::after{bottom:calc(-3px - var(--lev,0%));opacity:.55;transform:scaleX(.6)}
.unit.touche img{animation:touche .3s}
@keyframes touche{0%{filter:brightness(3)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}100%{filter:none}}
.unit.mourant{opacity:.35}
.unit.mort{opacity:0}
.unit.brise img{filter:drop-shadow(0 0 6px #ffe680) brightness(1.1)}
.unit.charge img{filter:drop-shadow(0 0 14px rgba(143,243,255,.9))}
/* Échos : l'image du boss d'origine, en brume bleu-grise et translucide */
.unit.echo img,.bst img.echo{filter:grayscale(.7) sepia(.3) hue-rotate(180deg) saturate(1.6) brightness(1.15) drop-shadow(0 0 10px rgba(150,170,230,.7));opacity:.8}
.unit.actif::before{content:"";position:absolute;left:50%;top:-12px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:var(--gold);box-shadow:0 0 8px var(--gold)}
/* panorama : image large ; on garde le texte lisible */
.scene.pano::after{background:linear-gradient(180deg,transparent 70%,rgba(5,6,15,.35) 100%)}
/* écran titre */
/* écran d'accueil et écran titre, en plein écran par-dessus le jeu : logo Keismey Studio, puis le village
   en paix et « Touche pour commencer », puis le village embrumé (en paix après la fin) sous les boutons */
.accueil{position:fixed;inset:0;z-index:15;background:#05060f;cursor:pointer;overflow:hidden;transition:opacity .6s;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 9vh) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 5vh) max(16px,env(safe-area-inset-left,0px))}
.accueil.menu{cursor:default}
.accueil.out{opacity:0;pointer-events:none}
.accueil .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.accueil .fond.on{opacity:1}
.accueil .voile{position:absolute;inset:0;background:linear-gradient(rgba(5,6,15,.55),rgba(5,6,15,0) 32%,rgba(5,6,15,0) 52%,rgba(5,6,15,.8));transition:background .8s}
.accueil.menu .voile{background:linear-gradient(rgba(5,6,15,.6),rgba(5,6,15,.05) 30%,rgba(5,6,15,.35) 50%,rgba(5,6,15,.9))}
.accueil .haut,.accueil .bas{position:relative;width:100%;max-width:420px;margin:0 auto;text-align:center}
.accueil h1{margin:0;font:700 clamp(40px,12vw,72px)/1 var(--f-title);color:#fff4d6;letter-spacing:.06em;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 24px rgba(255,200,90,.55);opacity:0;animation:spIn 1.4s ease .2s forwards}
.accueil .haut span{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#f0e6cc;text-shadow:0 1px 3px #000;opacity:0;animation:spIn 1.4s ease .6s forwards}
.accueil .go{margin:0;font:600 16px var(--f-title);color:#f2e6c9;text-shadow:0 1px 6px #000;opacity:0;animation:spIn 1s ease 1.2s forwards,spBl 2.2s ease-in-out 2.2s infinite}
.accueil .acts{display:flex;flex-direction:column;gap:10px;animation:spIn .6s ease both}
.accueil .btn{min-height:56px}
.accueil .btn.gris{background:rgba(20,24,46,.82);border-color:var(--line2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.accueil .btn.gris .tx>span{color:#d6d9ec}
.accueil .btn.plus{background:linear-gradient(135deg,#7fd3ff,#3f7cf0);color:#06142e;border-color:transparent;box-shadow:0 0 22px rgba(111,182,255,.55);animation:brille 2.6s ease-in-out infinite}
.accueil .btn.plus small{color:rgba(6,20,46,.75)}
.accueil .btn.plus .ic{background:rgba(255,255,255,.35)}
.accueil .btn.danger{background:rgba(70,20,28,.9)}
.accueil .version{margin:10px 0 0;font-size:11.5px;color:#c9cde6;text-shadow:0 1px 3px #000}
.accueil .lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;transition:opacity .7s;z-index:2}
.accueil .lg img{width:min(62%,260px);height:auto;opacity:0;animation:spIn 1s ease .15s forwards}
.accueil .flou{display:none}
/* grand écran : l'image du titre prend le cadre du jeu (même largeur que #app, mêmes marges, coins arrondis),
   et les bords sont comblés par la même image floutée et assombrie */
@media (orientation:landscape) and (min-height:560px){
  .accueil{--cadre:min(calc(100vw - 32px),max(720px,min(1100px,calc((100dvh - 62px) * .6 * 1376 / 768))))}
  .accueil .flou{display:block;position:absolute;left:-60px;top:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(30px) brightness(.38) saturate(.85);opacity:0;transition:opacity 1.2s ease}
  .accueil .flou.on{opacity:1}
  .accueil .fond,.accueil .voile{left:calc(50% - var(--cadre) / 2);top:8px;right:auto;bottom:auto;width:var(--cadre);height:calc(100% - 16px);border-radius:18px}
  .accueil .voile{border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.5)}
}
/* générique de fin */
.generique{justify-content:center;cursor:pointer}
.generique .voile{background:rgba(5,6,15,.68)}
.generique .defile{text-shadow:0 1px 4px #000}
.generique .defile{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:420px;margin:0 auto}
.generique .cr{opacity:0;animation:spIn 1s ease forwards}
.generique.vite .cr,.generique.vite .go{animation-delay:0s!important}
.generique h2{margin:0 0 6px;font:700 clamp(28px,8vw,44px)/1.1 var(--f-title);color:#fff4d6;text-shadow:0 0 22px rgba(255,200,90,.5)}
.generique .cr span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9cde6}
.generique .cr b{display:block;font:600 19px var(--f-title);color:#f6ecd2}
.generique .cr p{margin:6px 0 0;font:italic 600 17px var(--f-title);color:var(--gold2)}
.generique .go{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 5vh);text-align:center}
@keyframes spIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes spBl{50%{opacity:.35}}
@keyframes brille{50%{box-shadow:0 0 34px rgba(127,211,255,.85);filter:brightness(1.08)}}
#app{opacity:0;transition:opacity .25s}
#app.pret{opacity:1}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,15,.35) 0%,transparent 22%,transparent 70%,rgba(5,6,15,.45) 100%)}
.ptitle{font-family:var(--f-title);font-weight:700;font-size:21px;color:var(--gold2);line-height:1.15;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-wrap:balance}
.ptitle small{font:600 12.5px var(--f-ui);color:var(--muted);letter-spacing:.02em}
.ptext{margin:0;line-height:1.5;text-wrap:pretty}
.ptext b{color:var(--gold2);font-weight:700}
/* astuces de jeu (« ? » dans les textes) : encadrées à part du récit */
.tuto{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--side);border-radius:12px;background:rgba(111,182,255,.09)}
.tuto-q{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--side);color:#0b0d1a;font-weight:800;font-size:14px;line-height:1}
.note{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.msgline{font-size:13.5px;line-height:1.45;padding:9px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.msgline:empty{display:none}
.msgline b{color:var(--gold2)}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:auto}
.btn{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px;min-height:52px;cursor:pointer;position:relative;font-weight:600;font-size:14.5px;line-height:1.2}
.btn .ic{width:34px;height:34px;border-radius:10px;background:var(--surface3);display:grid;place-items:center;flex:none;overflow:hidden}
.btn .ic svg{width:18px;height:18px}
.btn .ic img{width:30px;height:30px;image-rendering:pixelated;object-fit:contain}
.btn .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.btn small{font-weight:500;font-size:12.5px;color:var(--muted)}
.btn:hover:not(:disabled){background:var(--surface3);border-color:var(--line2)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn:focus-visible,.ibtn:focus-visible,.tab:focus-visible,.node:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sheet:focus,#ks-dlg .kb:focus{outline:none}   /* la fenêtre reçoit le focus à l'ouverture ; l'anneau va sur ses boutons */
.btn:disabled{opacity:.42;cursor:default}
.btn.main{background:linear-gradient(135deg,#f3cd63,#c8901f);color:var(--ink-gold);border-color:transparent;box-shadow:0 6px 18px rgba(233,185,73,.22)}
.btn.main small{color:rgba(42,27,0,.72)}
.btn.main .ic{background:rgba(255,255,255,.32)}
.btn.main:hover:not(:disabled){background:linear-gradient(135deg,#f3cd63,#c8901f);border-color:transparent;filter:brightness(1.06)}
.btn.side{border-color:rgba(111,182,255,.55);background:rgba(111,182,255,.1)}
.btn.side .ic{background:rgba(111,182,255,.2);color:var(--side)}
.btn.wide{grid-column:1/-1}
.btn.ghost{background:transparent}
.btn.ghost .tx>span{color:var(--muted)}
.bang{position:absolute;top:-7px;right:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--gold);color:var(--ink-gold);box-shadow:0 0 0 3px var(--surface);animation:bob 1.1s ease-in-out infinite}
.bang.side{background:var(--side);color:#04203a}
@keyframes bob{50%{transform:translateY(-3px)}}
.who{display:flex;align-items:center;gap:10px}
.who b{font-family:var(--f-title);font-size:16px;color:var(--gold2)}
.tag{display:inline-block;font:700 11px var(--f-ui);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--gold);color:var(--ink-gold);margin-right:6px;vertical-align:2px}
.tag.lieu{background:var(--crystal);color:#05282e}
.tag.rnd{background:#c3bdfd;color:#1c1450}
.av{width:40px;height:40px;border-radius:12px;overflow:hidden;flex:none;background:linear-gradient(160deg,#2a3260,#141834);border:1px solid var(--line2);position:relative;display:inline-block}
.av img{position:absolute;width:210%;height:210%;left:-55%;top:-4%;image-rendering:pixelated;object-fit:contain}
.av.face img{width:100%;height:100%;left:0;top:0}
.av img,.chip img{max-width:none}
.av.lg{width:84px;height:84px;border-radius:18px}
.av.sm{width:30px;height:30px;border-radius:9px}
.join{display:flex;gap:14px;align-items:flex-start}
.join .jn{font-family:var(--f-title);font-size:22px;font-weight:700;color:var(--gold2)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface3);border:1px solid var(--line)}
.elc{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:800 10px var(--f-ui);color:#10132a;background:#6b6f88;flex:none}
.elc.L{background:var(--el-L)}.elc.T{background:var(--el-T)}.elc.F{background:var(--el-F)}.elc.E{background:var(--el-E)}.elc.V{background:var(--el-V)}
.elc.unk{background:transparent;color:#cfd5ff;border:1.5px dashed #8d96cc}
.elc.res{opacity:.55;position:relative}
.elc.res::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#fff;transform:rotate(-35deg)}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lbl{position:absolute;left:10px;top:10px;padding:7px 11px;z-index:1;max-width:62%}
.lbl b{display:block;font-family:var(--f-title);font-size:16px;color:#fff}
.lbl span{font-size:12px;color:#d3d8f5}
.ph{position:absolute;right:10px;top:10px;font-size:11px;color:#cbd0ef;padding:3px 8px;z-index:1}
.xcard{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 11px 9px;z-index:1}
.xcard .row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:6px}
.xtrack{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.12)}
.xtrack>i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#4fd1a0,#b4f06a);transition:width .5s}
.gem{position:absolute;top:50%;width:13px;height:13px;transform:translate(-50%,-50%) rotate(45deg);border:2px solid #fff;background:#2a2f55;border-radius:3px}
.gem.ok{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.trav{position:absolute;left:12%;right:12%;top:44%;padding:10px 14px;text-align:center;font-weight:600;font-size:13px;z-index:1}
.trav .xtrack{margin-top:8px}
.trav .xtrack>i{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.tl{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:4px;padding:5px 7px;overflow:hidden;z-index:1}
.tll{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px;text-transform:uppercase;letter-spacing:.06em}
.chip{position:relative;display:inline-block;width:28px;height:28px;flex:0 0 auto;border-radius:9px;overflow:hidden;border:1.5px solid rgba(255,255,255,.3)}
.chip img{position:absolute;image-rendering:pixelated}
.chip.h{background:linear-gradient(160deg,#3555b8,#1c2a66)}
.chip.h img{width:210%;height:210%;left:-55%;top:-4%}
.chip.e{background:linear-gradient(160deg,#9a2c3c,#4a1420)}
.chip.e img{width:100%;height:100%;left:0;top:0;object-fit:contain}
.chip.now{width:34px;height:34px;border:2px solid var(--gold);box-shadow:0 0 10px rgba(233,185,73,.6)}
.chipw{position:relative;flex:0 0 auto;display:flex}
.chipw.ch::before{content:"+";position:absolute;left:-6px;top:50%;transform:translateY(-50%);font-weight:800;font-size:12px;color:var(--gold2);z-index:2}
.chipw i{position:absolute;right:-3px;bottom:-3px;z-index:2;font:800 9.5px var(--f-ui);font-style:normal;padding:0 4px;border-radius:5px;background:#000;color:#fff}
.chipw i.rec{background:#6e7392}
.chipw i.chg{background:var(--danger)}
.bmeta{position:absolute;right:8px;top:56px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:1}
.bmeta>span{padding:3px 9px;font-size:12px;font-weight:700;border-radius:999px}
.pips{display:inline-flex;gap:5px;align-items:center}
.pips b{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--gold);border-radius:2px}
.pips b.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.chain{color:var(--gold2)}
.autoflag{color:#9ff0b8}
.einfo{position:absolute;transform:translateX(-50%);width:max-content;max-width:31%;min-width:84px;padding:4px 7px 5px;font-size:12.5px;font-weight:600;text-align:center;line-height:1.2;z-index:1}
.einfo.tg{pointer-events:auto;cursor:pointer;border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 0 14px rgba(233,185,73,.5);animation:bob 1s infinite}
.einfo .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* un monstre seul (boss) : son nom en entier */
.einfo.seul{max-width:64%}
.erow{display:flex;gap:3px;justify-content:center;align-items:center;margin-top:3px}
.shield{display:inline-grid;place-items:center;width:17px;height:19px;background:#d5dbee;color:#151a33;clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);font-size:10.5px;font-weight:800}
.brk{color:#fff;background:var(--danger);border-radius:6px;padding:1px 5px;font-size:10px;font-weight:800}
.bar{position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--hp);transition:width .3s}
.bar.pp i{background:var(--pp)}
.bar.xp i{background:var(--gold)}
.bar.low i{background:var(--danger)}
.einfo .bar{margin-top:3px;height:5px}
.fnum{position:absolute;transform:translate(-50%,-50%);font:800 18px var(--f-ui);color:#fff;text-shadow:0 2px 0 #000,0 0 6px #000;animation:fup .95s ease-out forwards;white-space:nowrap;pointer-events:none;z-index:5}
.fnum.weak{color:var(--gold2);font-size:21px}
.fnum.heal{color:#7dff9a}
.fnum.res{color:#aab}
.fnum.brk{color:var(--danger);font-size:14px}
@keyframes fup{0%{opacity:0;margin-top:6px}15%{opacity:1}100%{opacity:0;margin-top:-28px}}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pcards.n4{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.pcards.n4 .pcard{padding:6px 5px}
.pcards.n4 .pc-top{gap:4px}
.pcards.n4 .av.sm{width:24px;height:24px;border-radius:7px}
.pcards.n4 .pc-n span{font-size:10px;letter-spacing:-.2px}
/* cinq cartes : quatre héros et une invitée (Hilde) */
.pcards.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pcards.n5 .pcard{padding:5px 4px;gap:3px}
.pcards.n5 .pc-top{gap:3px}
.pcards.n5 .av.sm{display:none}
.pcards.n5 .pc-n b{font-size:11.5px}
.pcards.n5 .pc-n span{font-size:9.5px;letter-spacing:-.2px}
.pcards.n5 .pc-v{font-size:10px;justify-content:center}
.pcards.n5 .pc-v span{display:none}
.pcard{position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard.act{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 14px rgba(233,185,73,.25)}
.pcard.ko{opacity:.45}
.pcard.hit{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pc-top{display:flex;align-items:center;gap:7px;min-width:0}
.pc-n{min-width:0}
.pc-n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-n span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-v{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pc-v b{color:var(--text);font-weight:600}
.pcard .fnum{left:50%;top:40%}
.pcard.empty{border-style:dashed;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;text-align:center;min-height:74px}
.cmds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:auto}
.cmds .btn{flex-direction:column;justify-content:center;gap:4px;min-height:60px;padding:7px 4px;text-align:center;font-size:12.5px}
.cmds .btn .ic{width:28px;height:28px;border-radius:9px}
.cmds .btn small{font-size:12px}
.cmds .btn .tx{align-items:center}
.cmds.list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cmds.list .btn{flex-direction:row;justify-content:flex-start;text-align:left;font-size:13.5px;min-height:50px;padding:6px 10px 6px 6px}
.cmds.list .btn .tx{align-items:flex-start}
.cmds.list .btn small{font-size:12.5px}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:700;font-size:12px;color:#fff;text-shadow:0 1px 2px #000,0 0 6px #000;z-index:1}
.node .dot{width:22px;height:22px;border-radius:50%;background:#2a3a8a;border:3px solid #fff;box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.node.go .dot{background:var(--gold)}
.node.here .dot{background:var(--hp);animation:bob 1.2s infinite}
.node.lock{cursor:default}
.node.lock .dot{background:#3b3f55;border-color:#8a8fa8;border-style:dashed}
.node.lock span{color:#c3c7da}
.node.hide{display:none}
.modal{position:fixed;inset:0;z-index:20;background:rgba(3,4,14,.7);display:flex;align-items:flex-end;justify-content:center;
  padding:max(10px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (orientation:landscape){.modal{align-items:center}}
.sheet{width:min(780px,100%);max-height:100%;overflow-y:auto;background:#161a33;border:1px solid var(--line2);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sheet.grand{height:min(860px,100%)}.sheet>*{flex-shrink:0}
.sheet-h{display:flex;align-items:center;gap:10px}
.sheet-h .ptitle{flex:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.ptabs{margin:10px 0 2px}
/* pastille : une info nouvelle dans le Codex (icône, onglet, personnage) */
.pastille{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.tab .pastille,summary .pastille{position:static;width:8px;height:8px;box-shadow:none;flex:none}
.tab .pastille{margin-left:6px}summary .pastille{margin-left:auto}
details.perso>summary{gap:10px}
.perso .cls-corps p{font-size:13.5px;line-height:1.5}
.perso .cls-corps p.neuf{color:var(--text);border-left:2px solid var(--gold);padding-left:9px}
.tab{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:13.5px}
.tab.txt{padding:7px 14px}
.tab.on{background:var(--gold);color:var(--ink-gold);border-color:transparent}
h3.sec{margin:4px 0 0;font:700 12px var(--f-ui);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.statg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.st{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:6px 9px;font-variant-numeric:tabular-nums}
.st span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.st b{font-size:16px}
.st[data-st],.jauge[data-st]{cursor:pointer}.st.on{border-color:var(--gold)}.jauge.on .pc-v span{color:var(--gold2)}
#m-stinfo{min-height:2.6em;margin:0}
.statg.q4{grid-template-columns:repeat(4,minmax(0,1fr))}
.jauges{display:flex;flex-direction:column;gap:7px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.jauge .pc-v{font-size:12px;margin-bottom:3px}.jauge .bar{height:8px}
.up{color:#7be3a0}.dn{color:var(--danger)}
.list{display:flex;flex-direction:column;gap:6px}
.bst{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:8px}
.bst img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.bst h4{margin:0;font-size:14.5px}
.bst p{margin:2px 0 4px;font-size:12.5px;color:var(--muted)}
.bst .erow{justify-content:flex-start;flex-wrap:wrap}
.bst.unseen{opacity:.55}
.cls{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.cls h4{margin:0;font-size:14.5px}.cls h4 .note{font-weight:600}
.cls p{margin:0;font-size:12.5px;color:var(--muted)}
.cls.unseen{opacity:.55}
details.cls{padding:0 10px}details.cls>summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px}
details.cls>summary::-webkit-details-marker{display:none}
details.cls>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
details.cls[open]>summary::before{transform:rotate(45deg)}details.cls>summary .note{font-weight:600}
.cls-corps{display:flex;flex-direction:column;gap:6px;padding-bottom:10px}
.ctech{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center}
.ctech .ic{width:30px;height:30px;border-radius:9px;background:var(--surface3);display:grid;place-items:center}
.ctech .ic svg{width:16px;height:16px}
.ctech b{display:block;font-size:13.5px}.ctech small{display:block;font-size:12px;color:var(--muted)}
.irow{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:8px 10px}
.irow .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.irow .ic svg{width:19px;height:19px}
.irow b{display:block;font-size:14.5px}
.irow small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.irow .qty{font-weight:700;color:var(--gold2);font-variant-numeric:tabular-nums}
.irow.key{border-color:rgba(233,185,73,.45)}
/* boutons du haut : 44 px de haut partout ; sur téléphone étroit, un peu moins larges et « po » masqué (lu par le lecteur d'écran) pour que la somme tienne */
@media (max-width:400px){.top{gap:5px}.pillv{padding:0 9px;gap:5px}.top .po{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:374px){.ibtn{width:40px}}
@media (max-width:359px){.top{gap:3px}.pillv{padding:0 7px;gap:4px}.ibtn{width:38px}}
.legend{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;font-size:13.5px}
.legend>span:nth-child(odd){display:flex;gap:3px;justify-content:center;min-width:48px}
.quete,.terminees{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:0 10px}
.terminees{background:transparent}.terminees>.list{padding-bottom:10px}
.quete summary,.terminees summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px}
.quete summary::-webkit-details-marker,.terminees summary::-webkit-details-marker{display:none}
.quete summary::before,.terminees summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
.quete[open]>summary::before,.terminees[open]>summary::before{transform:rotate(45deg)}
.quete:not(.finie) summary{color:var(--gold2)}.quete.finie summary{color:var(--muted)}
.quete .qlist{padding-bottom:10px}
.qlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.qlist li{padding-left:24px;position:relative;line-height:1.4;font-size:14px}
.qlist li::before{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border:1.5px solid var(--line2);border-radius:4px}
.qlist li.done{color:var(--muted)}
.qlist li.done::before{background:var(--hp);border-color:var(--hp)}
.qlist li.cur{color:var(--gold2)}
.qlist li.cur::before{border-color:var(--gold);background:rgba(233,185,73,.3)}
.log{flex-shrink:0;max-height:160px;overflow-y:auto;font-size:13px;font-variant-numeric:tabular-nums;background:var(--surface2);border-radius:12px;padding:8px 10px;line-height:1.55}
.log div span{color:var(--muted);margin-right:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.stat{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.stat b{display:block;font-size:20px;color:var(--gold2);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ajouts du vrai jeu */
.btn.danger{border-color:rgba(255,107,107,.6);background:rgba(255,107,107,.12)}
.btn .ic img{object-fit:contain}
.node .bang{position:static;margin-bottom:-2px;animation:bob 1.1s ease-in-out infinite}
.note.centre{text-align:center}
.clair{color:var(--text)}
.niv{font:600 13px var(--f-ui);color:var(--muted)}
.bourse{display:flex;justify-content:space-between;align-items:baseline}
.bourse b{color:var(--gold2)}
.gauche{margin-left:6px}
.grasse{font-weight:800}
.vert{color:#9ff0b8}
.notes{display:flex;flex-direction:column;gap:6px}
/* les images définitives (dossier img/) ne sont pas du pixel art */
img[src^="img/"]{image-rendering:auto!important}
.chip.h.face img{width:100%;height:100%;left:0;top:0;object-fit:cover}
/* texte lettre par lettre : la suite est déjà en place, invisible */
.tw-cache{visibility:hidden}
/* icônes de combat à la couleur de leur élément (Lame, Terre, Feu, Eau) */
.btn.el-L .ic,.ctech.el-L .ic{color:var(--el-L);background:color-mix(in srgb,var(--el-L) 22%,transparent)}
.btn.el-T .ic,.ctech.el-T .ic{color:var(--el-T);background:color-mix(in srgb,var(--el-T) 22%,transparent)}
.btn.el-F .ic,.ctech.el-F .ic{color:var(--el-F);background:color-mix(in srgb,var(--el-F) 22%,transparent)}
.btn.el-E .ic,.ctech.el-E .ic{color:var(--el-E);background:color-mix(in srgb,var(--el-E) 22%,transparent)}
.btn.el-V .ic,.ctech.el-V .ic{color:var(--el-V);background:color-mix(in srgb,var(--el-V) 22%,transparent)}
.zz{color:#151a33;background:#b9d8ff;border-radius:6px;padding:1px 5px;font-size:10px;font-weight:800}
.cher{color:var(--danger);font-weight:800}.bon{color:var(--hp);font-weight:800}
/* écran de victoire */
.vict{display:flex;flex-direction:column;gap:9px}
.vgain{display:flex;gap:6px;flex-wrap:wrap}
.vgain .pill{font-size:13px;color:#b4f06a}
.vgain .pill.or{color:var(--gold2)}
.vrows{display:flex;flex-direction:column;gap:7px}
.vrow{display:grid;grid-template-columns:auto 92px 1fr;align-items:center;gap:8px;padding:6px 9px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.vn{display:flex;flex-direction:column;min-width:0}
.vn b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vn span{font-size:12px;color:var(--muted)}
.vx{display:flex;flex-direction:column;gap:3px}
.vx .xtrack>i{background:var(--gold);transition:width .6s ease-out}
.vup{font-size:12px;font-weight:700;color:var(--gold2);min-height:15px}
.vrow.up{border-color:var(--gold);box-shadow:0 0 12px rgba(233,185,73,.25)}
/* traversée : la barre avance d'une étape à l'autre, le panneau liste ce qui s'est passé */
.trav .xtrack>i{transition:width 1.3s linear}
.travlog{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.travlog li{padding:6px 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--line)}
.travlog li.now{border-color:var(--gold);color:var(--gold2)}
.travlog b{color:var(--gold2)}
/* Options : volumes de la musique et des bruitages */
.vols{display:flex;flex-direction:column;gap:18px;margin:6px 0 14px}
.vol-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.vol-h span{color:var(--gold2);font-variant-numeric:tabular-nums}
.vol input[type=range]{width:100%;accent-color:var(--gold);height:28px;margin:0}
/* ergonomie 0.7 : moins de défilement dans le village, les boutiques, l'Équipe et l'Inventaire */
.sheet .acts{margin-top:0}.sheet .acts.bas{margin-top:auto}
.sheet-h .sp{flex:1}.sheet-h .ptitle+.pillv{flex:none}
.acts.village{grid-template-columns:repeat(2,minmax(0,1fr))}
.acts.village .btn{padding:7px 8px;gap:8px}
.acts.village .btn small{font-size:12.5px}
.acts.village .btn.partir{grid-column:1/-1;position:sticky;bottom:0;z-index:1;background:#1a1e38}
.who.court{align-items:center}.who-t{flex:1;min-width:0}.who .pillv{flex:none}
.ptext.ligne{font-size:13px;color:#d6d9ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ptext.ligne.ouverte{white-space:normal}
.tab.vendre{border-color:rgba(111,182,255,.55);color:var(--side);background:transparent}
.tab.vendre.on{background:var(--side);color:#04203a}
.acts.rayon{grid-template-columns:1fr;gap:6px}
.btn.art{min-height:0;padding:8px 10px}.btn.art .tx{width:100%;gap:5px}
.art-l{display:flex;align-items:baseline;gap:8px;width:100%}
.art-l>b:first-child{flex:1;font-size:14px}
.art-l .eff{font-weight:500;font-size:12px;color:var(--muted)}
.art-l .prix{font-size:13.5px;color:var(--gold2);min-width:52px;text-align:right}
.gains{display:flex;gap:10px;flex-wrap:wrap}
.g{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.g img{width:20px;height:20px;border-radius:6px;object-fit:cover}
.g.up{color:#7be3a0}.g.dn{color:var(--danger)}.g.eg{color:var(--muted)}.g.non{color:#7d84a8}.g.non img{opacity:.35}
.prixl{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 10px;align-items:baseline;padding:8px 12px;border-radius:12px;background:var(--surface2)}
.prixl span{color:var(--muted);font-size:13px}.prixl b{color:var(--gold2)}
.hfiche{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;width:100%}
.hfiche.on{border-color:var(--gold);background:rgba(233,185,73,.1)}
.hfiche.non{opacity:.5;cursor:default}
.hfiche img{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:none}
.hfiche>div{flex:1;min-width:0}.hfiche b{font-size:14px}
.hfiche small{display:block;font-size:12px;color:var(--muted)}
.hfiche .ecart{font-size:13px;text-align:right;color:#d6d9ec;font-variant-numeric:tabular-nums}
.etete{display:flex;gap:12px;align-items:center}
.etete .av.lg{width:72px;height:72px;border-radius:16px}
.etete-d{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.etete .jn{font-family:var(--f-title);font-size:18px;color:var(--gold2)}
.jauges.mini{background:none;border:0;padding:0;gap:4px}
.jauges.mini .jauge{display:grid;grid-template-columns:26px 1fr 64px;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.jauges.mini .bar{height:6px}.jauges.mini b{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.jauges.mini .jauge.on span{color:var(--gold2)}
.souso{border-bottom:1px solid var(--line);padding-bottom:8px}.souso .tab{flex:1;justify-content:center}
#m-stinfo{min-height:0}
.objc{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.objc-h{display:flex;align-items:baseline;gap:8px}.objc-h b{flex:1;font-size:14px}
.hdons{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.hdon{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 6px;border-radius:10px;background:rgba(9,11,26,.6);border:1px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer}
.hdon img{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none}
.hdon span{display:flex;flex-direction:column;min-width:0}.hdon b{font-size:12px}
.hdon small{font-size:11px;color:var(--gold2)}.hdon.plein small{color:var(--muted)}
.hdon:disabled{opacity:.45;cursor:default}
.eqr{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap;padding:7px 10px;border-radius:10px;background:var(--surface2);font-size:13px}
.eqr b{flex:1;min-width:40%}.eqr .note{font-size:12px}
.panel .acts.rayon{margin-top:0}
.tabs.filtres .tab.txt{padding:5px 10px;font-size:12.5px}