/* ============================================================
   HUZILL - DUNGEON MMO  ·  Interface
   Direction artistique : vif, arrondi, lumineux, moderne.
   ============================================================ */
:root{
  --violet:#7b3dff; --violet2:#a56bff;
  --cyan:#22e2ff; --lime:#8dff4f; --gold:#ffc531;
  --pink:#ff3d94; --red:#ff5b7f; --blue:#3d7bff;
  --ink:#0d0a1c; --ink2:#171235; --ink3:#221a4d;
  --glass:rgba(23,18,53,.82);
  --stroke:rgba(255,255,255,.14);
  /* de quoi tailler des plaques : un trait sombre épais, une pierre
     opaque, une crème pour le texte. Pas de verre dépoli, pas de halo. */
  --trait:#100b20; --pierre:#232043; --pierre2:#1a1733; --creme:#fff4de;
  --commun:#c9d2e3; --rare:#39a7ff; --epique:#b45cff; --legendaire:#ffb020; --mythique:#ff4d7d;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#08060f;color:#fff;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;user-select:none}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
.muted{color:#a99fd0}.small{font-size:12px}
em{font-style:normal;opacity:.75}

/* ---------- boutons ---------- */
/* Une touche, pas une pastille : couleur pleine, trait sombre autour,
   et une tranche visible dessous qui s écrase quand on appuie. */
.btn{cursor:pointer;color:#fff;font-weight:800;letter-spacing:.05em;
  font-size:15px;padding:13px 22px;border-radius:5px;
  border:3px solid var(--trait);background:var(--violet);
  box-shadow:0 5px 0 var(--trait);
  transition:transform .06s,box-shadow .06s,background .12s}
.btn:hover{background:var(--violet2)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--trait)}
.btn.big{font-size:19px;padding:16px 26px;box-shadow:0 6px 0 var(--trait)}
.btn.big:active{transform:translateY(6px)}
.btn.ghost{background:#33305a;color:#e7e1ff}
.btn.ghost:hover{background:#413d6e}
.btn.cyan{background:#12a8cf}.btn.cyan:hover{background:#22c3e8}
.btn.gold{background:#f2a90c;color:#2e1c00}.btn.gold:hover{background:#ffc531}
.btn.pink{background:#e01f66}.btn.pink:hover{background:#ff3d94}
.btn:disabled{filter:grayscale(1) brightness(.65);cursor:not-allowed}
.col{display:flex;flex-direction:column;gap:12px}

/* ---------- ecrans ---------- */
/* Le fond n est plus un dégradé : c est le décor 3D qui passe derrière.
   On pose juste une ombre douce sur les bords pour que le texte tienne. */
.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;text-align:center;
  background:radial-gradient(115% 78% at 50% 42%,rgba(6,4,14,0) 0%,rgba(6,4,14,.28) 52%,rgba(6,4,14,.82) 100%)}
/* le createur laisse voir la scene 3D derriere lui */
.screen.side{background:transparent;pointer-events:none}
.screen.side .creatorPanel{pointer-events:auto}
/* Un mot posé sur le monde, pas un néon : crème plein, contour noir,
   et une ombre franche dessous. Aucun flou. */
.logo .big{display:block;font-size:clamp(50px,10.5vw,124px);font-weight:900;letter-spacing:.06em;line-height:.92;
  color:var(--creme);
  text-shadow:-4px 0 var(--trait),4px 0 var(--trait),0 -4px var(--trait),0 4px var(--trait),
    -4px -4px var(--trait),4px -4px var(--trait),-4px 4px var(--trait),4px 4px var(--trait),
    0 10px 0 var(--violet),0 14px 0 var(--trait)}
.logo .sub{display:inline-block;margin-top:16px;padding:5px 14px;border:3px solid var(--trait);border-radius:4px;
  background:var(--violet);font-size:clamp(11px,1.9vw,16px);font-weight:800;letter-spacing:.34em;color:#fff}
.slogan{color:#e8dfff;font-size:14px;letter-spacing:.02em;
  text-shadow:0 2px 0 var(--trait),0 0 12px rgba(0,0,0,.8)}
.loadbar{width:min(420px,70vw);height:16px;border-radius:4px;border:3px solid var(--trait);
  background:#1a1733;overflow:hidden}
.loadbar i{display:block;height:100%;width:0%;background:var(--lime);transition:width .25s}

/* ---------- createur ---------- */
/* le panneau laisse toujours de la place au heros a droite */
.creatorPanel{position:absolute;left:0;top:0;bottom:0;width:min(520px,58%);min-width:min(320px,100%);
  background:var(--pierre2);border-right:4px solid var(--trait);
  padding:22px 24px 0;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.creatorPanel h1{font-size:26px;letter-spacing:.04em;color:var(--creme);
  text-shadow:0 3px 0 var(--trait)}
.tabs{display:flex;gap:5px}
.tab{flex:1;padding:11px 0;border:3px solid var(--trait);border-radius:4px;cursor:pointer;
  font-weight:800;font-size:12px;letter-spacing:.08em;background:#33305a;color:#bdb2e8}
.tab:hover{background:#413d6e}
.tab.active{background:var(--gold);color:#2e1c00}
.tabpage{flex:1;overflow-y:auto;padding-right:8px;display:flex;flex-direction:column;gap:6px}
.tabpage::-webkit-scrollbar{width:8px}.tabpage::-webkit-scrollbar-thumb{background:#3c2f7a;border-radius:8px}
label{font-size:11px;letter-spacing:.16em;color:#9c92c8;font-weight:800;margin-top:8px}
input[type=text],input:not([type]){width:100%;padding:11px 13px;border-radius:4px;border:3px solid var(--trait);
  background:#12101f;color:#fff;font-size:16px;font-weight:700;outline:0}
input[type=range]{width:100%;accent-color:var(--gold)}
.pickrow{display:flex;flex-wrap:wrap;gap:6px}
.pick{padding:8px 12px;border-radius:4px;border:3px solid var(--trait);background:#33305a;
  cursor:pointer;font-size:13px;font-weight:700;color:#d6cffb}
.pick:hover{background:#413d6e}
.pick.on{background:var(--gold);color:#2e1c00}
.swatch{width:32px;height:32px;border-radius:4px;border:3px solid var(--trait);cursor:pointer}
.swatch.on{border-color:var(--creme);outline:3px solid var(--trait)}
.classlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ccard{padding:13px;border-radius:4px;cursor:pointer;border:3px solid var(--trait);background:#2b2850;text-align:left}
.ccard:hover{background:#37326a}
.ccard.on{background:var(--gold);color:#2e1c00}
.ccard.on span{color:#5b3d00}
.ccard b{display:block;font-size:15px;letter-spacing:.06em}
.ccard span{font-size:12px;color:#b9aee6}
.classinfo{margin-top:10px;padding:13px;border-radius:4px;border:3px solid var(--trait);
  background:#12101f;font-size:13px;line-height:1.55;color:#d8d1ff}
.classinfo h3{font-size:14px;letter-spacing:.1em;color:var(--cyan);margin-bottom:6px}
.creatorFoot{display:flex;gap:10px;padding:16px 0 22px}
.creatorFoot .btn{flex:1}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20;font-size:14px}
#hud button,#hud .clickable{pointer-events:auto}
.hudTL{position:absolute;left:18px;top:18px;display:flex;flex-direction:column;gap:8px}
.pcard{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:18px;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(8px);min-width:290px}
.pav{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:22px;
  background:linear-gradient(160deg,var(--cyan),var(--violet));box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
/* le portrait remplit la pastille ; pixelated pour rester raccord avec le jeu */
.pav img,.dav img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  border-radius:inherit;image-rendering:pixelated;display:block}
.pinfo{flex:1;display:flex;flex-direction:column;gap:4px}
.pname{font-weight:800;font-size:14px;letter-spacing:.03em}
.pname em{font-size:10px;letter-spacing:.14em;color:var(--cyan)}
.bar{position:relative;height:13px;border-radius:8px;background:rgba(0,0,0,.45);overflow:hidden}
.bar.small{height:7px}
.bar i{display:block;height:100%;width:100%;border-radius:8px;transition:width .18s}
.bar.hp i{background:linear-gradient(90deg,#ff4d6d,#ff9a6b)}
.bar.en i{background:linear-gradient(90deg,#22e2ff,#5b8cff)}
.bar.xp i{background:linear-gradient(90deg,#8dff4f,#ffe14f)}
.bar span{position:absolute;inset:0;text-align:center;font-size:9px;font-weight:800;line-height:13px;
  text-shadow:0 1px 2px #000;letter-spacing:.06em}
.lvl{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:900;font-size:18px;
  background:linear-gradient(180deg,var(--gold),#ff8a00);color:#42230a;box-shadow:0 3px 0 #a35b00}
.pet{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:15px;background:var(--glass);
  border:1px solid var(--stroke);width:250px}
.picon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:17px}

.hudTR{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.coins{display:flex;gap:8px}
.coins span{padding:7px 14px 7px 30px;border-radius:13px;background:var(--glass);border:1px solid var(--stroke);
  font-weight:800;position:relative}
.coins span::before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%}
.coins .c1::before{background:linear-gradient(160deg,#ffe27a,#ff9d00);box-shadow:0 0 8px #ffae0090}
.coins .c2::before{background:linear-gradient(160deg,#8ff0ff,#a56bff);box-shadow:0 0 8px #a56bff90;border-radius:4px}
#minimap{border-radius:20px;background:rgba(13,10,28,.72);border:1px solid var(--stroke);backdrop-filter:blur(6px)}
.zoneName{padding:6px 14px;border-radius:11px;background:var(--glass);border:1px solid var(--stroke);
  font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--cyan)}

.hudQuest{position:absolute;right:18px;top:280px;width:230px;display:flex;flex-direction:column;gap:8px}
.qcard{padding:11px 13px;border-radius:15px;background:var(--glass);border:1px solid var(--stroke);border-left:3px solid var(--gold)}
.qcard b{font-size:12px;letter-spacing:.05em;display:block;margin-bottom:5px}
.qcard .qp{height:6px;border-radius:5px;background:rgba(0,0,0,.4);overflow:hidden;margin-top:6px}
.qcard .qp i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--gold))}
.qcard span{font-size:11px;color:#bdb2e8}

.hudBottom{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:14px}
.weaponCard{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:var(--glass);
  border:1px solid var(--stroke)}
.weaponCard .wicon{font-size:22px}
.weaponCard b{display:block;font-size:13px}
.weaponCard em{font-size:11px;color:#a99fd0}
.skills{display:flex;gap:10px}
.skill{width:62px;height:62px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke);
  position:relative;display:grid;place-items:center;font-size:26px;overflow:hidden}
.skill .k{position:absolute;top:3px;left:6px;font-size:10px;font-weight:900;color:#fff;opacity:.75}
.skill .cd{position:absolute;inset:0;background:rgba(5,2,15,.78);display:grid;place-items:center;
  font-size:16px;font-weight:900;color:#fff}
.skill.locked{filter:grayscale(1) brightness(.5)}
.skill.ready{box-shadow:0 0 0 2px rgba(34,226,255,.5),0 0 18px rgba(34,226,255,.35)}
.hint{position:absolute;left:50%;bottom:-4px;transform:translate(-50%,100%);font-size:11px;color:#7e75a8;white-space:nowrap}

.bossbar{position:absolute;left:50%;top:26px;transform:translateX(-50%);width:min(620px,70vw);text-align:center}
.bname{font-weight:900;letter-spacing:.2em;font-size:16px;text-shadow:0 2px 10px #000;margin-bottom:5px}
.bbar{height:19px;border-radius:11px;background:rgba(0,0,0,.6);border:1px solid #fff2;overflow:hidden}
.bbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2d6f,#ff9d00);transition:width .2s}

.toasts{position:absolute;left:50%;top:120px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;width:420px}
.toast{padding:11px 20px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);
  font-weight:700;font-size:14px;animation:pop .3s ease-out,fade .4s ease-in 2.6s forwards;text-align:center}
.toast.good{border-color:#8dff4f66;box-shadow:0 0 24px #8dff4f30}
.toast.gold{border-color:#ffc53166;box-shadow:0 0 24px #ffc53130}
.toast.bad{border-color:#ff5b7f66;box-shadow:0 0 24px #ff5b7f30}
@keyframes pop{from{transform:scale(.85) translateY(-10px);opacity:0}}
@keyframes fade{to{opacity:0;transform:translateY(-14px)}}
.prompt{position:absolute;left:50%;bottom:160px;transform:translateX(-50%);padding:9px 18px;border-radius:12px;
  background:var(--glass);border:1px solid var(--stroke);font-weight:800;font-size:13px;letter-spacing:.06em}

.chatbox{position:absolute;left:18px;bottom:20px;width:330px}
.chatlog{max-height:150px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-size:12px}
.chatlog div{padding:3px 9px;border-radius:8px;background:rgba(13,10,28,.55);width:fit-content;max-width:100%}
.chatlog b{color:var(--cyan)}
#chatinput{pointer-events:auto;margin-top:6px;padding:9px 12px;font-size:13px}

#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}
#crosshair i{display:block;width:8px;height:8px;border-radius:50%;border:2px solid #fff;opacity:.85;
  box-shadow:0 0 6px #000}
#dmglayer{position:fixed;inset:0;pointer-events:none;z-index:18;overflow:hidden}
.dmg{position:absolute;font-weight:900;font-size:19px;text-shadow:0 2px 6px #000,0 0 12px currentColor;
  animation:rise 1s ease-out forwards;white-space:nowrap}
@keyframes rise{to{transform:translate(-50%,-70px) scale(1.25);opacity:0}}

/* ---------- dialogue ---------- */
#dialog{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:30;width:min(760px,92vw)}
.dbox{padding:20px 24px;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dhead{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.dav{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:20px;
  background:linear-gradient(160deg,var(--gold),var(--pink))}
.dhead b{font-size:17px;letter-spacing:.06em}
.dhead em{font-size:12px;color:var(--cyan)}
#dText{font-size:15px;line-height:1.6;color:#e6e0ff;min-height:48px}
.dopts{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.dopts .btn{padding:11px 18px;font-size:13px}

/* les 4 niveaux de qualite, cote a cote */
.qualgrid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.qualgrid .item .ic{font-size:22px;letter-spacing:-2px}

/* ---------- multijoueur : compte et liste des mondes ---------- */
.multiPanel{width:min(620px,94vw);max-height:88vh;overflow-y:auto;background:var(--pierre2);
  border:4px solid var(--trait);border-radius:5px;padding:24px 24px 20px;
  box-shadow:0 10px 0 rgba(0,0,0,.35)}
.multiPanel h1{font-size:20px;letter-spacing:.14em;margin:0 0 16px;text-align:center;
  color:var(--creme);text-shadow:0 3px 0 var(--trait)}
.multiPanel input[type=email],.multiPanel input[type=password],.multiPanel input:not([type]){
  width:100%;margin-bottom:8px;background:#12101f;border:3px solid var(--trait);
  border-radius:4px;padding:11px 13px;color:#e6e0ff;font:inherit;font-size:14px;outline:none}
.multiPanel input:focus{border-color:var(--gold)}
.multiNote{font-size:12px;line-height:1.6;color:#a89ed0;margin:0 0 14px}
.multiErr{color:#ff5b7f;font-size:12px;font-weight:700;min-height:18px;margin-bottom:6px}
.multiQui{font-size:13px;color:#a89ed0;display:flex;align-items:center;gap:10px}
.multiQui b{color:#8de6ff}
.multiQui .mini{margin-left:auto;padding:5px 11px;font-size:11px}
.multiCase{display:flex;align-items:center;gap:6px;font-size:13px;color:#a89ed0;white-space:nowrap}
.multiCase input{width:17px;height:17px;margin:0;padding:0}
.listeMondes{max-height:330px;overflow-y:auto}
.mondeItem{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 13px;
  border:3px solid var(--trait);border-radius:4px;margin-bottom:8px;
  background:#2b2850}
.mondeItem b{font-size:15px}
.mondeItem .qui{font-size:11px;color:#a89ed0}
.mondeItem .tag{font-size:9px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:3px;
  border:2px solid var(--trait);color:#161226}
.mondeItem .tag.pub{background:#8dff4f}
.mondeItem .tag.priv{background:#c9a8ff}
.mondeItem .tag.moi{background:#22e2ff}
.mondeItem .actes{margin-left:auto;display:flex;gap:6px;align-items:center}
.mondeItem .actes input{width:106px!important;margin:0!important;padding:7px 9px!important;
  font-size:12px!important;text-transform:uppercase;letter-spacing:.1em}
.mondeItem .btn{padding:7px 13px;font-size:12px}
.multiVide{text-align:center;padding:24px;color:#7a72a0;font-size:13px}
/* bandeau du monde en cours, dans le HUD */
.hudMonde{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:#8de6ff;background:rgba(18,13,34,.7);border:1px solid rgba(255,255,255,.12);
  border-radius:11px;padding:6px 11px}

/* ---------- écran de mort ----------
   On garde le monde derrière, teinté de rouge : on voit où on est
   tombé. Le K.O. est un tampon, pas un néon. */
#dead{justify-content:flex-start;padding-top:10vh;gap:24px;
  background:radial-gradient(112% 78% at 50% 38%,rgba(120,8,30,.06) 0%,rgba(60,4,18,.46) 52%,rgba(14,2,8,.88) 100%)}
#dead .ko{display:block;font-size:clamp(64px,13vw,150px);font-weight:900;letter-spacing:.02em;line-height:1;
  color:#ff5b7f;transform:rotate(-4deg);
  text-shadow:-4px 0 var(--trait),4px 0 var(--trait),0 -4px var(--trait),0 4px var(--trait),
    -4px -4px var(--trait),4px -4px var(--trait),-4px 4px var(--trait),4px 4px var(--trait),
    0 10px 0 #7a0d28,0 14px 0 var(--trait)}
#deadTxt{max-width:min(520px,86vw);font-size:15px;line-height:1.6;color:#ffd9e2;
  text-shadow:0 2px 0 var(--trait),0 0 12px rgba(0,0,0,.85)}

/* ---------- mode parcours ---------- */
#pcHud{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:22;text-align:center;
  background:rgba(20,14,38,.82);border:2px solid rgba(255,255,255,.14);border-radius:18px;
  padding:10px 26px;backdrop-filter:blur(8px);pointer-events:none}
#pcHud .pcT{font-size:34px;font-weight:900;letter-spacing:.04em;line-height:1;
  background:linear-gradient(180deg,#fff,#8de6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#pcHud .pcL{font-size:11px;font-weight:700;letter-spacing:.08em;color:#c9c2e8;margin-top:5px}
#pcHud .pcAide{color:#8a80b8;letter-spacing:.05em}

/* ---------- menu ---------- */
#menu{position:fixed;inset:0;z-index:35;background:rgba(8,6,15,.86);
  display:flex;align-items:center;justify-content:center;padding:32px}
.menuWrap{width:min(1180px,100%);height:min(760px,100%);display:flex;gap:18px}
.menuNav{width:210px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.navliste{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:4px}
.navliste::-webkit-scrollbar{width:7px}.navliste::-webkit-scrollbar-thumb{background:#3c2f7a;border-radius:7px}
.mnav{padding:12px 15px;border-radius:4px;border:3px solid var(--trait);background:#2b2850;
  cursor:pointer;font-weight:800;letter-spacing:.08em;font-size:13px;color:#c3b9ee;text-align:left;display:flex;gap:10px}
.mnav:hover{background:#37326a}
.mnav.on{background:var(--gold);color:#2e1c00}
/* reglage du son en bas de la colonne du menu */
.volbox{flex:none;padding:13px;border-radius:4px;background:#2b2850;
  border:3px solid var(--trait);display:flex;flex-direction:column;gap:4px}
.volbox .voltitre{font-size:11px;font-weight:800;letter-spacing:.14em;color:#c3b9ee;margin-bottom:4px}
.volbox .voltitre em{float:right;color:var(--cyan);font-size:10px;letter-spacing:0}
.volbox label{margin-top:2px}
.volbox input[type=range]{pointer-events:auto}
.volbox .mute{padding:9px 0;font-size:11px;margin-top:10px;letter-spacing:.08em}
/* version d une seule ligne, pour le createur de personnage */
.volbox.compacte{flex-direction:row;align-items:center;gap:9px;padding:9px 12px;margin:0}
.volbox.compacte .mute{margin:0;padding:8px 11px;font-size:15px;flex:none}
.volbox.compacte .vlab{font-size:14px;flex:none}
.volbox.compacte input[type=range]{flex:1;min-width:44px;margin:0}
.menuBody{flex:1;border-radius:5px;background:var(--pierre2);
  border:4px solid var(--trait);padding:24px;overflow-y:auto}
.menuBody::-webkit-scrollbar{width:9px}.menuBody::-webkit-scrollbar-thumb{background:#3c2f7a;border-radius:9px}
.menuBody h2{font-size:24px;letter-spacing:.08em;margin-bottom:4px}
.menuBody h3{font-size:13px;letter-spacing:.16em;color:var(--cyan);margin:20px 0 10px}
.menuBody p.sub{color:#a99fd0;font-size:13px;margin-bottom:14px}
.closeX{position:absolute;right:26px;top:22px;width:42px;height:42px;border-radius:4px;border:3px solid var(--trait);
  background:#33305a;color:#fff;font-size:18px;cursor:pointer}
.closeX:hover{background:#e01f66}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.item{padding:12px;border-radius:4px;background:#2b2850;border:3px solid var(--trait);
  border-left-width:6px;border-left-color:var(--commun);display:flex;gap:11px;align-items:flex-start;
  cursor:pointer;transition:transform .08s}
.item:hover{transform:translateY(-3px);background:#37326a}
.item .ic{width:40px;height:40px;border-radius:4px;display:grid;place-items:center;font-size:22px;background:#12101f;flex:none}
.item b{display:block;font-size:14px}
.item .r{font-size:10px;letter-spacing:.14em;font-weight:800}
.item .d{font-size:11px;color:#a99fd0;margin-top:4px;line-height:1.4}
.item.eq{box-shadow:0 0 0 2px var(--lime) inset}
.item[data-r=commun]{border-left-color:var(--commun)}
.item[data-r=rare]{border-left-color:var(--rare)}
.item[data-r=epique]{border-left-color:var(--epique)}
.item[data-r=legendaire]{border-left-color:var(--legendaire);box-shadow:0 0 20px rgba(255,176,32,.18)}
.item[data-r=mythique]{border-left-color:var(--mythique);box-shadow:0 0 22px rgba(255,77,125,.25)}
.item[data-r=commun] .r{color:var(--commun)}
.item[data-r=rare] .r{color:var(--rare)}
.item[data-r=epique] .r{color:var(--epique)}
.item[data-r=legendaire] .r{color:var(--legendaire)}
.item[data-r=mythique] .r{color:var(--mythique)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stat{padding:8px 13px;border-radius:4px;border:3px solid var(--trait);background:#12101f;font-size:12px}
.stat b{color:var(--cyan)}
.big2{font-size:34px;font-weight:900}
.tag{padding:3px 9px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.1em;background:rgba(255,255,255,.1)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
th{font-size:11px;letter-spacing:.12em;color:#9c92c8}
#worldmap{width:100%;max-width:520px;border-radius:4px;background:#12101f;border:3px solid var(--trait)}

/* ---------- battle (monster battle / duel) ---------- */
#battle{position:fixed;inset:0;z-index:38;background:radial-gradient(90% 80% at 50% 20%,#2a1a5e,#0b0818 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px}
.bside{display:flex;gap:60px;align-items:center;justify-content:center;width:min(900px,100%)}
.bunit{width:210px;padding:16px;border-radius:20px;background:var(--glass);border:1px solid var(--stroke);text-align:center}
.bunit .em{font-size:56px;line-height:1.1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.bunit.hit{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.blog{width:min(900px,100%);height:104px;overflow:hidden;padding:12px 16px;border-radius:16px;
  background:rgba(0,0,0,.35);font-size:13px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.bacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- l'écran-titre par-dessus le décor ----------
   Le menu se pose sur une bande sombre aux bords fondus : le texte
   reste lisible quelle que soit la maison qui passe derrière, sans
   remettre un panneau de verre par-dessus le jeu. */
#title>*,#loading>*,#dead>*{position:relative;z-index:1}
#title::before,#loading::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 54% at 50% 47%,rgba(7,5,15,.74) 0%,rgba(7,5,15,.58) 52%,
    rgba(7,5,15,.18) 82%,rgba(7,5,15,0) 100%)}

/* Sur un écran pas très large, le chat et la barre de pouvoirs se
   marchaient dessus : le chat monte au-dessus de la barre. */
@media (max-width:1100px){ .chatbox{bottom:104px} }

/* ---------- la mort ----------
   Un coup de rouge court au moment du coup fatal, puis l'écran K.O.
   qui arrive en fondu une fois le corps posé — pas d'un bloc au
   milieu de l'action. */
#mortFlash{position:fixed;inset:0;z-index:39;pointer-events:none;background:#ff2d55;
  animation:flashMort .5s ease-out forwards}
@keyframes flashMort{from{opacity:.5}to{opacity:0}}
#dead{animation:mortFondu .45s ease-out}
@keyframes mortFondu{from{opacity:0}}
#dead .ko{animation:koTampon .4s cubic-bezier(.18,1.5,.4,1)}
@keyframes koTampon{from{transform:rotate(-4deg) scale(2.6);opacity:0}
  to{transform:rotate(-4deg) scale(1);opacity:1}}

/* dans la liste des mondes : où l'on a déjà une partie, où l'on repart de zéro */
.mondeItem .tag.partie{background:#ffc531}
.mondeItem .tag.neuf{background:#5c5680;color:#e7e1ff}

/* ---------- mes persos : la bibliothèque de visages du créateur ---------- */
.persos{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;align-items:center;flex:none}
.persos::-webkit-scrollbar{height:6px}
.persos::-webkit-scrollbar-thumb{background:#3c2f7a;border-radius:6px}
.persos .btn.mini{padding:8px 11px;font-size:11px;white-space:nowrap;flex:none}
.perso{position:relative;flex:none;width:62px;cursor:pointer;text-align:center;
  border:3px solid var(--trait);border-radius:4px;background:#2b2850;padding:3px}
.perso:hover{background:#37326a}
.perso .vign{width:54px;height:54px;border-radius:3px;overflow:hidden;background:#12101f}
.perso .vign img{width:100%;height:100%;display:block;image-rendering:pixelated;
  object-fit:cover;object-position:center 28%}
.perso span{display:block;font-size:9px;font-weight:800;margin-top:2px;color:#d6cffb;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perso .x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:1;
  border:2px solid var(--trait);border-radius:3px;background:#e01f66;color:#fff;
  font-weight:900;font-size:11px;cursor:pointer;padding:0}