/* style.css — Zone de jeu (#stage) plein écran 16:9 et interface (#ui, voir js/ui.js).
   INTERFACE : toutes les tailles sont en "em" ; le corps de police = 1.15 % de la largeur de la zone de jeu (cqw). Aucune valeur en px fixes
   (ni clamp en px) : le zoom du navigateur (Ctrl+molette / Ctrl +/-) ne change donc JAMAIS la taille du HUD par rapport à la zone de jeu.
   Les icônes sont des PNG (assets/ui/icons/) affichés sans lissage (image-rendering:pixelated). */
:root{--bg:#10151f;--fg:#f3ead3;--ac:#f08a1c;--pn:rgba(16,21,31,.93);--hp:#d6453d;--ki:#3b9cf0;--xp:#e8c547;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10151f;--fg:#f3ead3;--ac:#f08a1c}}
:root[data-theme="dark"]{--bg:#10151f;--fg:#f3ead3;--ac:#f08a1c}
html,body{height:100%;margin:0}
body{background:#000;color:var(--fg);font-family:"Trebuchet MS",Verdana,sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden}
#stage{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;background:#000;container-type:inline-size;overflow:hidden}
#game{display:block;width:100%;height:100%;touch-action:none}
/* ---- interface ---- */
#ui{position:absolute;inset:0;pointer-events:none;font-size:calc(1.15cqw*var(--uis,1));line-height:1.35;color:var(--fg);user-select:none}
#ui button,#ui input,#ui select,#ui .pop,#ui .ov,#dlg,#cfm{pointer-events:auto}
#ui b{color:inherit}
#ui .pos{color:#7bd66b}
#ui em,#ui small{opacity:.75;font-style:normal}
.ic{width:1.5em;height:1.5em;image-rendering:pixelated;vertical-align:middle}.ic.big{width:3em;height:3em}
.btn{background:var(--ac);color:#1a1005;border:0;border-radius:.3em;padding:.4em .9em;font:inherit;font-weight:bold;cursor:pointer}
.btn.alt{background:transparent;color:var(--fg);border:.06em solid var(--ac)}
.btn:disabled{opacity:.4;cursor:default}
.key,kbd{display:inline-block;min-width:1.5em;padding:.1em .4em;border:.1em solid var(--ac);border-bottom-width:.25em;border-radius:.3em;background:rgba(255,255,255,.08);text-align:center;font:inherit;font-size:.85em;font-weight:bold}
/* barres PV / Ki (haut gauche) : montent hors de l'écran quand tout est plein ; la part perdue reste en rouge puis fond vers le noir */
#tl{position:absolute;left:.8em;top:.8em;display:flex;flex-direction:column;gap:.6em;max-height:calc(100% - 1.6em);max-width:calc(100% - 1.6em)}
#hud{display:flex;gap:.6em;align-items:center;transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .5s}
#hud.off{transform:translateY(-250%);opacity:0}
#lvl{width:3.1em;height:3.1em;border-radius:50%;border:.12em solid var(--ac);background:var(--pn);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8em;line-height:1}
#lvl b{font-size:1.5em;color:var(--fg)}
.bars{display:flex;flex-direction:column;gap:.25em}
.bar{position:relative;width:15em;height:1.5em;background:#000;border:.06em solid rgba(255,255,255,.35);border-radius:.3em;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0}
.bar .fl{width:100%;background:#43b84a;transition:width .08s}   /* PV toujours verts : on voit le rouge (fantôme) fondre */
.bar.ki .fl{background:var(--ki)}
.bar .gh{width:100%;background:#ff3b3b;transition:width .45s ease .35s}
.bar.ki .gh{background:#8fe3ff}   /* le Ki qui se vide laisse une trace bleu clair (pas rouge) */
.bar.xp{height:.35em;border:0}.bar.xp .fl{background:var(--xp)}.bar.xp .gh{display:none}
.bar.big{width:100%;height:.6em;margin:.3em 0}
.bar span{position:relative;font-size:.85em;line-height:1.7em;padding-left:.5em;text-shadow:0 .08em .12em #000}
#hud.low .bar.hp{animation:lowbar .8s ease-in-out infinite}   /* PV bas : la barre tremble et clignote de façon bien visible */
@keyframes lowbar{0%,100%{transform:translateX(0);opacity:1}15%{transform:translateX(-.35em)}30%{transform:translateX(.35em);opacity:.6}45%{transform:translateX(-.3em)}60%{transform:translateX(.3em);opacity:1}75%{transform:translateX(-.15em);opacity:.6}}
#vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 6em .5em rgba(200,0,0,0);transition:box-shadow .25s}
#vig.hit{box-shadow:inset 0 0 8em 2em rgba(255,60,60,.5)}   /* à chaque coup reçu : bords rouges */
#vig.low{animation:vg 1.1s ease-in-out infinite}   /* PV bas : le même effet, 3x plus visible, en continu */
@keyframes vg{0%,100%{box-shadow:inset 0 0 14em 5em rgba(255,60,60,.9)}50%{box-shadow:inset 0 0 20em 8em rgba(255,0,0,1)}}
#vig.dead{box-shadow:inset 0 0 30em 12em rgba(0,0,0,.85);animation:none}
@media (prefers-reduced-motion:reduce){#hud.low .bar.hp,#vig.low{animation:none}.blink{animation:none;box-shadow:0 0 .6em var(--ac)}}
/* popups (une seule, sous les barres) */
.pop{background:var(--pn);border:.12em solid var(--ac);border-radius:.4em;padding:.7em .8em;width:27em;max-width:100%;overflow:auto;min-height:0}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4em;font-size:1.1em}
.x{background:none;border:0;color:var(--fg);font-size:1em;cursor:pointer}
.sec{margin:.6em 0 .25em;padding-top:.3em;border-top:.06em solid rgba(255,255,255,.18);font-weight:bold;opacity:.9}
.zeni{display:flex;align-items:center;gap:.3em;font-weight:bold;color:var(--xp)}
.zdrop{margin-left:auto;display:inline-flex;gap:.3em}
#zamt,#nick,#cin{font:inherit;background:var(--pn);color:var(--fg);border:.1em solid var(--ac);border-radius:.3em;padding:.25em .4em}
#zamt{width:4.5em}
.eq{display:grid;grid-template-columns:repeat(6,1fr);gap:.3em}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.3em}
.sq{aspect-ratio:1/1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0}
.sq.empty{border:.06em dashed rgba(255,255,255,.12);border-radius:.3em}
.slot,.it{position:relative;border:.06em solid rgba(255,255,255,.25);border-radius:.3em;padding:.3em;background:rgba(255,255,255,.05);color:var(--fg);font:inherit;cursor:pointer;text-align:center;min-height:2.3em}
.slot .ic,.it .ic{width:2em;height:2em}
.cur{display:flex;gap:1em;align-items:center;justify-content:space-between;font-size:1.05em;margin-bottom:.3em}
.cur span{display:inline-flex;align-items:center;gap:.3em}
.slot small{position:absolute;left:.3em;top:.1em;font-size:.6em}
.it b{position:absolute;right:.2em;bottom:0;font-size:.7em;color:var(--fg)}
.slot.sel,.it.sel{border-color:var(--ac);background:rgba(240,138,28,.2)}
.detail{margin-top:.5em;padding:.5em;border-radius:.3em;background:rgba(255,255,255,.06)}
.detail p{margin:.3em 0;text-align:left;padding:0;font-size:.95em}
.acts{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.4em}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin:.25em 0}
.row.soon{opacity:.55}
.row label{flex:1}
.row input[type=range]{width:8em;vertical-align:middle}
.row .v{display:inline-block;min-width:2em;text-align:right}
.tip{position:relative}
.tipbox{margin-top:.5em;padding:.4em .6em;border-radius:.3em;background:rgba(255,255,255,.07);font-size:.9em;min-height:2.8em;line-height:1.3}
.deriv{line-height:1.6}
.avrow{display:flex;gap:.8em;align-items:center}
#av{width:6em;height:7.5em;image-rendering:pixelated;background:rgba(255,255,255,.07);border-radius:.3em}
.avinfo{flex:1}
.chips{display:flex;gap:.3em;flex-wrap:wrap;margin-top:.5em}
.chip{border:.06em solid var(--ac);background:transparent;color:var(--fg);border-radius:1em;padding:.15em .7em;font:inherit;cursor:pointer}
.chip.sel{background:var(--ac);color:#1a1005}.chip:disabled{opacity:.35;cursor:default}
.plus{margin-left:.4em;width:1.8em;height:1.8em;border-radius:.3em;border:0;background:var(--ac);color:#1a1005;font-weight:bold;cursor:pointer}
.guide div{display:flex;align-items:center;gap:.3em;margin:.2em 0}.guide span{width:9em;flex:none}
.soonbox{text-align:center;padding:1em .5em}.soonbox p{margin:.5em 0 0;font-size:.95em;opacity:.8}
.bcard{display:flex;gap:.7em;margin:.5em 0;padding:.5em;border-radius:.3em;background:rgba(255,255,255,.06)}
.mimg{width:4em;height:4em;flex:none;background-repeat:no-repeat;image-rendering:pixelated;display:flex;align-items:center;justify-content:center}
.sil{filter:brightness(0)}
.drops{margin-top:.2em}.drops span{display:inline-flex;align-items:center;gap:.2em;margin-right:.7em;font-size:.9em}
.note{font-size:.9em;opacity:.8;margin:.5em 0}
/* boutons bas droite */
#dock{position:absolute;right:.8em;bottom:.8em;display:flex;gap:.5em}
.ib{position:relative;width:3.2em;height:3.2em;border-radius:.4em;border:.12em solid var(--ac);background:var(--pn);color:var(--fg);font-size:1em;cursor:pointer}
.ib .ic{width:2em;height:2em}
.ib small{position:absolute;right:.2em;bottom:.05em;font-weight:bold;font-size:.6em;color:var(--ac);opacity:1;text-shadow:0 0 .2em #000}
.ib.on{background:var(--ac)}.ib.on small{color:#1a1005}
.blink{animation:bl 1.4s ease-in-out infinite}
@keyframes bl{50%{box-shadow:0 0 .9em .15em var(--ac);border-color:#fff}}
/* minimap + potions rapides (haut droite) */
#tr{position:absolute;right:.8em;top:.8em;display:flex;flex-direction:column;align-items:flex-end;gap:.6em}
#mm{position:relative;width:11em;height:11em;border:.12em solid var(--ac);background:#000;border-radius:.4em;overflow:hidden;pointer-events:auto}
#mmc{width:100%;height:100%;display:block;cursor:pointer}
#mmb{position:absolute;right:.2em;top:.2em;width:1.6em;height:1.6em;border:.1em solid var(--ac);border-radius:.3em;background:var(--pn);color:var(--ac);font:inherit;font-size:.8em;font-weight:bold;cursor:pointer;padding:0}
#qkold{}
.qb{display:none;position:relative;width:4.2em;height:4.2em;border-radius:.4em;border:.08em solid rgba(255,255,255,.5);background:rgba(16,21,31,.5);color:var(--fg);font-size:1em;overflow:hidden;cursor:pointer;opacity:.75}
.qb.has{display:block}.qb:hover{opacity:1}
.qb .ic{width:2.6em;height:2.6em}
.qb b{position:absolute;left:.25em;bottom:.1em;font-size:.9em;color:var(--fg)}
.qb small{position:absolute;right:.25em;top:.05em;font-size:.75em;opacity:1;color:var(--ac);font-weight:bold}
.qb .cd{position:absolute;inset:0 0 auto 0;height:0;background:rgba(0,0,0,.65)}
.qb em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:bold;opacity:1;font-size:1.2em}
#bigmap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,48em);z-index:5}
.bmrow{display:flex;gap:1em}
#bmc{width:20em;height:20em;background:#000;border:.12em solid var(--ac);border-radius:.3em;display:block}
.zones{flex:1;display:grid;gap:.4em;align-content:start}
.zone{border-left:.4em solid var(--zc);background:rgba(255,255,255,.06);padding:.4em .6em;border-radius:.3em;display:flex;justify-content:space-between;align-items:center;gap:.5em}
.zone.lock{filter:grayscale(1) brightness(.6)}
/* chat bas gauche */
#chat{position:absolute;left:.8em;bottom:.8em;width:30em;max-width:55%}
#clog{display:flex;flex-direction:column;gap:.12em;font-size:.95em;max-height:11em;overflow:hidden;justify-content:flex-end}
#clog div{background:rgba(0,0,0,.4);padding:.1em .4em;border-radius:.2em;text-shadow:0 .08em .12em #000;transition:opacity .6s;word-break:break-word}
#clog div.old{opacity:0}
#chat.open #clog div.old{opacity:1}
#clog .warn{color:#ffb454;font-weight:bold}
#clog .all b{color:var(--xp)}#clog .map b{color:#9fd3ff}#clog .sys{color:#bbb;font-style:italic}
#cin{display:none;width:100%;box-sizing:border-box;margin-top:.3em}
#chat.open #cin{display:block}
#toast{position:absolute;top:18%;left:50%;transform:translateX(-50%);padding:.4em 1em;border-radius:.3em;background:var(--pn);border:.08em solid var(--ac);opacity:0;transition:opacity .3s;white-space:nowrap}
#toast.show{opacity:1}
/* étiquettes au-dessus des entités (pseudo, barre de vie, bulle, textes flottants) */
#oh{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.oh{position:absolute;left:0;top:0}
.ohi{transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.bub{background:#fff;color:#111;border-radius:.4em;padding:.15em .5em;max-width:14em;text-align:center;font-size:.85em;margin-bottom:.2em;word-break:break-word}
.bub.hint{background:rgba(16,21,31,.92);color:var(--fg);border:.06em solid var(--ac)}
.nm{font-size:.85em;white-space:nowrap;text-shadow:0 .08em .12em #000,0 0 .2em #000}
.nm.pl{color:#fff}.nm.mob{color:#ffb0b0;font-size:.75em}.nm.npc{color:var(--xp)}.nm.it{color:#9fe89a}
.hb{position:relative;width:4.2em;height:.5em;background:#000;border:.06em solid #000;margin-top:.1em}
.hb i{position:absolute;inset:0 auto 0 0;height:100%}
.hb .gh{width:100%;background:#ff3b3b;transition:width .45s ease .35s}
.hb .fl{width:100%;background:#43b84a;transition:width .08s}
.ft{position:absolute;left:0;top:0;translate:-50% -100%;font-weight:bold;font-size:1.1em;text-shadow:0 .08em .12em #000,0 0 .2em #000}
/* dialogue PNJ et confirmation */
#dlg{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(80%,40em);background:var(--pn);border:.12em solid var(--ac);border-radius:.5em;padding:.7em 1em;cursor:pointer;z-index:6}
#dlg .dn{color:var(--xp)}#dlg .dt{margin:.3em 0;min-height:2.7em;font-size:1.1em}
#cfm{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--pn);border:.12em solid var(--ac);padding:1em;border-radius:.4em;z-index:8;text-align:center}
/* menu principal */
.ov{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.7em;background:rgba(10,14,22,.88);z-index:7}
.ov.show{display:flex}
.ov h1{margin:0;font-size:3em;letter-spacing:.05em;color:var(--ac)}
.ov p{opacity:.7;margin:0 0 .6em}
.ov .btn{min-width:14em;font-size:1.1em}
#nick{width:14em;font-size:1.1em;text-align:center}

.ic.sm{width:1.1em;height:1.1em}.ic.huge{width:6em;height:6em}
.pm{margin-left:.3em;width:1.7em;height:1.7em;border-radius:.3em;border:.06em solid var(--ac);background:transparent;color:var(--fg);font-weight:bold;cursor:pointer;padding:0}
.pm:disabled{opacity:.3;cursor:default}
.shopit{display:flex;align-items:center;gap:.6em;margin:.3em 0;padding:.4em;border-radius:.3em;background:rgba(255,255,255,.06)}
.shopit .si{flex:none}.shopit .sd{flex:1}.shopit .btn{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.ver{text-align:center;opacity:.5;margin-top:.6em;font-size:.85em}
#ver{position:absolute;left:50%;bottom:.3em;transform:translateX(-50%);font-size:.7em;opacity:.45;pointer-events:none}
#amt{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--pn);border:.12em solid var(--ac);padding:1em;border-radius:.4em;z-index:8;text-align:center}
#amt input{width:9em;font:inherit;background:var(--pn);color:var(--fg);border:.1em solid var(--ac);border-radius:.3em;padding:.25em .4em;text-align:center}
#pack{z-index:9;background:rgba(5,8,14,.9)}#pack.ov:not(.show){display:none}.pk{display:flex;flex-direction:column;align-items:center;gap:.8em;text-align:center}
.pk .rv{display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:1.3em;animation:pop .5s ease}
.pk .cap.shake{animation:shake 1.3s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-12deg) scale(1.05)}30%{transform:rotate(12deg) scale(1.1)}45%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(14deg) scale(1.2)}80%{transform:rotate(0) scale(1.35)}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.cb{display:none;margin-top:.15em}.cb span{position:relative;display:block;width:4.2em;height:.4em;background:#000;border:.05em solid #000}.cb i{position:absolute;inset:0 auto 0 0;height:100%;width:0}.cb .a{background:#6fd3ff}.cb .b{background:#ffd24a}   /* une seule barre ; au niv 3 une 2e couleur la remplit */
/* qk : potions sous les barres */
#qk{display:flex;gap:.4em;margin-top:.15em}
.qb{width:3.2em;height:3.2em}.qb .ic{width:2em;height:2em}
/* menu principal : traveling visible derrière */
.ov{background:radial-gradient(ellipse at center,rgba(10,14,22,.25),rgba(10,14,22,.78))}

#feed{position:absolute;left:.8em;top:42%;display:flex;flex-direction:column;gap:.15em;pointer-events:none}
#feed div{padding:.15em .6em;border-radius:.3em;background:rgba(16,21,31,.75);border-left:.25em solid var(--ac);transition:opacity .5s;animation:fin .25s ease-out}
#feed div.out{opacity:0}
@keyframes fin{from{transform:translateX(-1em);opacity:0}to{transform:none;opacity:1}}
.online{display:flex;flex-direction:column;align-items:center;gap:.4em;margin:.4em 0;padding:.6em 1em;border-top:.06em solid rgba(255,255,255,.2);border-bottom:.06em solid rgba(255,255,255,.2)}
#au,#ap{width:14em;font:inherit;text-align:center;background:var(--pn);color:var(--fg);border:.1em solid var(--ac);border-radius:.3em;padding:.25em .4em}
#auerr{color:#ff9a8a;min-height:1.2em}
.nm.other{color:#9fd3ff}