/* ===== Interfaces DOM des mondes ===== */

/* barre supérieure d'un monde */
.wbar{position:absolute;top:46px;left:0;right:0;height:34px;display:flex;justify-content:space-between;align-items:center;
  padding:0 12px;font-size:13px;font-weight:700;z-index:30;pointer-events:none}
.wbar > *{pointer-events:auto}
.wtag{background:rgba(8,11,24,.8);border:1px solid var(--line);border-radius:999px;padding:3px 12px;letter-spacing:1px}
.wobj{background:rgba(8,11,24,.8);border:1px solid var(--line);border-radius:10px;padding:4px 12px;font-size:12px}
.wobj b{color:var(--acc)}

/* barre latérale de simulation (ferme, royaume, pet) */
.side{position:absolute;top:46px;right:0;bottom:0;width:246px;background:rgba(6,9,20,.92);border-left:1px solid var(--line);
  padding:10px;overflow:auto;font-size:13px;z-index:25}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:rgba(120,140,220,.35);border-radius:6px}
.side h4{margin:8px 0 6px;font-size:11px;letter-spacing:2px;color:var(--acc);text-transform:uppercase}
.side .res{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.side .res span{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700}
.sbtn{display:block;width:100%;text-align:left;margin:4px 0;padding:8px 10px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;
  transition:.13s;font-family:var(--font)}
.sbtn:hover{background:rgba(92,225,230,.16);border-color:var(--acc);transform:translateX(2px)}
.sbtn.on{background:rgba(92,225,230,.24);border-color:var(--acc)}
.sbtn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.sbtn small{display:block;color:var(--dim);font-weight:500;font-size:11px;margin-top:1px}
.sbtn .cost{float:right;color:#ffd25e;font-weight:800}

/* boutons flottants bas d'écran */
.wfoot{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;display:flex;gap:8px;justify-content:center;
  z-index:26;pointer-events:none;flex-wrap:wrap}
.wfoot > *{pointer-events:auto}

/* jauges */
.gauge{margin:5px 0}
.gauge .g-l{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:2px}
.gauge .g-b{height:9px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.gauge .g-b i{display:block;height:100%;transition:width .3s;background:var(--acc)}
.gauge.hun .g-b i{background:#ff9f4d}.gauge.joy .g-b i{background:#ff5fa2}
.gauge.ene .g-b i{background:#ffe14d}.gauge.cln .g-b i{background:#5ce1e6}

/* écran de résultat de niveau */
.result{position:absolute;inset:0;z-index:75;display:grid;place-items:center;background:rgba(3,5,12,.8);backdrop-filter:blur(4px)}
.result .rbox{width:min(470px,92%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;
  text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.75);animation:rIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes rIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.result h2{margin:0 0 4px;font-size:27px;letter-spacing:2px}
.result .stars{font-size:34px;letter-spacing:6px;margin:6px 0}
.result .rlist{text-align:left;margin:10px auto;max-width:300px;font-size:13.5px}
.result .rlist div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.result .rbtns{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.result.win h2{color:var(--ok)}.result.lose h2{color:var(--bad)}

/* messagerie / fichiers */
.msglist{display:flex;flex-direction:column;gap:8px}
.msg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.04)}
.msg .m-h{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:4px}
.msg .m-w{font-weight:800;color:var(--acc);letter-spacing:1px}
.msg.unk{border-color:rgba(76,224,76,.5)}
.msg.unk .m-w{color:#4ce04c}
.msg.unk .m-b{font-family:var(--mono)}

.filelist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.file{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.04);cursor:pointer;
  font-family:var(--mono);font-size:12px;transition:.13s}
.file:hover{border-color:var(--acc);background:rgba(92,225,230,.12)}
.file.locked{opacity:.4;cursor:not-allowed}
.file .f-n{font-weight:700}
.file .f-s{color:var(--dim);font-size:10.5px}

/* succès / collection */
.achlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ach{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;
  background:rgba(255,255,255,.04)}
.ach.got{border-color:#ffd25e;background:rgba(255,210,94,.1)}
.ach .a-i{font-size:22px;filter:grayscale(1) opacity(.5)}
.ach.got .a-i{filter:none}
.ach .a-t{font-weight:700;font-size:12.5px}
.ach .a-d{font-size:11px;color:var(--dim)}

/* inventaire */
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.item{border:1px solid var(--line);border-radius:12px;padding:9px;text-align:center;background:rgba(255,255,255,.04)}
.item .i-i{font-size:26px}
.item .i-n{font-size:11px;font-weight:700;margin-top:2px}
.item .i-c{font-size:10px;color:var(--dim)}

/* fragments */
.fragrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.frag{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-family:var(--mono);font-weight:800;
  background:rgba(255,255,255,.04);color:#444d70}
.frag.got{color:#04101c;background:linear-gradient(135deg,#5ce1e6,#8b6cff);border-color:transparent;
  box-shadow:0 0 18px rgba(92,225,230,.4)}

/* boutique */
.shop{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shopit{border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.04);
  display:flex;gap:9px;align-items:center;cursor:pointer;transition:.13s}
.shopit:hover{border-color:var(--acc);transform:translateY(-2px)}
.shopit.bought{opacity:.55;border-color:var(--ok);cursor:default;transform:none}
.shopit .s-i{font-size:26px}
.shopit .s-n{font-weight:700;font-size:12.5px}
.shopit .s-d{font-size:11px;color:var(--dim)}
.shopit .s-p{margin-left:auto;color:#ffd25e;font-weight:800;font-size:13px;white-space:nowrap}

/* menus de sélection (courses, modes...) */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pickit{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.05);cursor:pointer;
  transition:.14s;position:relative;overflow:hidden}
.pickit:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.pickit.lock{opacity:.4;cursor:not-allowed;transform:none}
.pickit .p-t{font-weight:800;font-size:14px;letter-spacing:.5px}
.pickit .p-d{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}
.pickit .p-b{margin-top:6px;font-size:11px;color:#ffd25e;font-weight:700}

/* effets d'ambiance monde bugué */
.glitchy-screen{animation:glScreen 3s infinite}
@keyframes glScreen{0%,92%{filter:none}94%{filter:hue-rotate(90deg) saturate(3)}96%{filter:invert(1)}98%{filter:none}}
.fake-menu{position:absolute;background:rgba(10,14,30,.9);border:1px solid #4ce04c;border-radius:8px;padding:6px 10px;
  font-family:var(--mono);font-size:11px;color:#4ce04c;pointer-events:none;z-index:20}