/* Vestiaire : cosmetiques, emotes. */
/* vestiaire */
.wardrobe { display:grid; grid-template-columns:170px 1fr; gap:14px; align-items:start; }
.wpreview { position:sticky; top:8px; text-align:center; }
#wardPreview { width:160px; height:160px; border-radius:12px; background:#f6f7fb; display:block; margin:0 auto; }
.wname { margin-top:8px; font-weight:800; font-size:14px; }
.wtitle { font-size:11px; color:var(--gold); min-height:14px; }
.wgroups h4 { margin:12px 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.wgroups h4:first-of-type { margin-top:0; }
.wgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px; }
.wlist { display:flex; flex-wrap:wrap; gap:6px; }
.witem { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px 6px; border:1px solid var(--line); border-radius:10px;
         background:var(--panel2); color:var(--text); font:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:border-color .15s, transform .1s; }
.witem:hover { border-color:var(--line2); transform:translateY(-1px); }
.witem canvas { width:44px; height:44px; }
.witem.locked canvas { opacity:.4; filter:grayscale(.7); }
.witem.locked { color:var(--muted); }
.witem.eq { border-color:var(--mint); box-shadow:0 0 0 2px rgba(95,214,168,.18); }
.witem.sel:not(.eq) { border-color:var(--accent); }
.witem .lk { position:absolute; top:5px; right:5px; width:15px; height:15px; display:block; }
.witem.title .lk { position:static; flex:none; width:13px; height:13px; margin-left:1px; }
.witem .slot-tag { position:absolute; top:5px; right:5px; min-width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:900; background:var(--mint); color:#15171f; }
.lock-ico { display:block; width:100%; height:100%; overflow:visible; }
.lock-ico .lk-sh { fill:none; stroke:#aab0c6; stroke-width:2.3; stroke-linecap:round; }
.lock-ico .lk-bd { fill:#8e93ab; }
.lock-ico .lk-ho { fill:#15171f; stroke:#15171f; stroke-width:1.5; }
.lock-ico .lk-ho[stroke-linecap] { fill:none; }
.witem.locked .lock-ico .lk-bd { fill:#ffcf6b; } .witem.locked .lock-ico .lk-sh { stroke:#ffcf6b; }
.wNum .lock-ico { width:20px; height:20px; } .wNum .lock-ico .lk-bd { fill:#ffcf6b; } .wNum .lock-ico .lk-sh { stroke:#ffcf6b; }
.witem.title { flex-direction:row; padding:6px 10px; }
@media (max-width:560px) { .wardrobe { grid-template-columns:1fr; } .wpreview { position:static; } }
.wslots { display:flex; gap:8px; margin:0 0 8px; }
.wslot { position:relative; width:52px; height:52px; padding:6px; border:1.5px dashed var(--line2); border-radius:12px; background:var(--panel2); cursor:pointer; transition:border-color .15s, transform .1s; }
.wslot:hover { transform:translateY(-1px); }
.wslot.on { border-style:solid; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,90,95,.14); }
.wslot svg { display:block; width:100%; height:100%; }
.wslot kbd { position:absolute; right:-4px; bottom:-5px; min-width:14px; padding:0 4px; border-radius:5px; background:var(--bg); border:1px solid var(--line2); color:var(--muted); font:700 10px/14px system-ui, sans-serif; text-align:center; }
#wardGrid .witem > svg { display:block; width:38px; height:38px; }
#wardGrid .witem.locked > svg { opacity:.4; filter:grayscale(.7); }
.emoteBar { display:flex; gap:6px; margin:8px 0 2px; flex-wrap:wrap; }
.emoteBar:empty { display:none; }
/* mouvements des emotes dans la barre et le vestiaire (la bulle en jeu les calcule dans game.js : drawEmoteIcon) */
@keyframes emAlt { 0%, 100% { transform:translateY(2.6px); } 50% { transform:translateY(-2.6px); } }
@keyframes emWave { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-2.4px); } }
@keyframes emWig { 0%, 100% { transform:rotate(-.1rad); } 50% { transform:rotate(.1rad); } }
@keyframes emTilt { 0%, 100% { transform:rotate(-.18rad); } 50% { transform:rotate(-.1rad); } }
.an-alt.el { animation:emAlt .63s ease-in-out infinite; animation-delay:calc(var(--i) * -.315s); }
.an-wave.el { animation:emWave .7s ease-in-out infinite; animation-delay:calc(var(--i) * -.12s); }
.em-all.an-wiggle { transform-origin:16px 16px; animation:emWig .7s ease-in-out infinite; }
.em-all.an-tilt { transform-origin:16px 16px; animation:emTilt .9s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .an-alt.el, .an-wave.el, .em-all { animation:none; } }
.emoteBar button { position:relative; width:38px; height:38px; padding:4px; border:1px solid var(--line2); border-radius:10px; background:var(--panel); cursor:pointer; transition:transform .1s, border-color .15s; }
.emoteBar button:hover { transform:translateY(-2px); border-color:var(--accent); }
.emoteBar button:active { transform:scale(.94); }
.emoteBar button.on-cd { cursor:not-allowed; }
.emoteBar button.on-cd:hover { transform:none; border-color:var(--line2); }
.emoteBar button.on-cd:active { transform:none; }
.emoteBar button.on-cd svg { filter:grayscale(1); opacity:.35; }
.emoteBar button.on-cd kbd { opacity:.15; }
.emoteBar .emoteCd { display:none; position:absolute; inset:0; align-items:center; justify-content:center; font:800 13px/1 system-ui, sans-serif; color:#ff2d55; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 2px #000; pointer-events:none; z-index:2; }
.emoteBar button.on-cd .emoteCd { display:flex; }
.emoteBar svg { display:block; width:100%; height:100%; }
.emoteBar kbd { position:absolute; right:-3px; bottom:-4px; min-width:13px; padding:0 3px; border-radius:5px; background:var(--bg); border:1px solid var(--line2); color:var(--muted); font:700 9px/13px system-ui, sans-serif; text-align:center; }
.wardrobe { grid-template-columns:190px 1fr; gap:18px; }
.wmain { min-width:0; }
.wdetail { margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); text-align:left; min-height:76px; }
.wdetail small { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.wdetail b { display:block; margin:2px 0 7px; font-size:14px; }
.wdetail p { margin:7px 0 0; font-size:11.5px; line-height:1.45; color:var(--muted); }
.wpill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:800; }
.wpill.eq { background:rgba(95,214,168,.16); color:var(--mint); }
.wpill.own { background:rgba(255,255,255,.08); color:var(--text); }
.wpill.lock { background:rgba(255,207,107,.14); color:var(--gold); }
.wpill .lock-ico { width:11px; height:11px; }
.wcats { display:flex; flex-wrap:wrap; gap:2px; margin:0 0 12px; border-bottom:1px solid var(--line); }
.wcats button { display:flex; align-items:baseline; gap:6px; padding:8px 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.wcats button small { font-size:10.5px; opacity:.7; font-variant-numeric:tabular-nums; }
.wcats button:hover { color:var(--text); }
.wcats button.on { color:var(--text); border-bottom-color:var(--accent); }
.wgrid.list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.witem.trow { flex-direction:row; align-items:center; gap:10px; padding:9px 12px; text-align:left; }
.trow .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trow .tx b { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow .tx small { font-size:11px; font-weight:500; line-height:1.3; color:var(--muted); }
.trow.locked .tx b { color:var(--muted); }
.trow .lk { position:static; flex:none; width:15px; height:15px; margin:0; }
.trow .ok { flex:none; width:16px; height:16px; color:var(--mint); }
.trow .ok svg { display:block; width:100%; height:100%; }
@media (max-width:640px) { .wgrid.list { grid-template-columns:1fr; } }
.wslots[hidden] { display:none; }
.wardLockCard { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 24px; margin:10px auto 14px; max-width:480px; background:var(--panel2); border:1px dashed var(--line2); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.wardLockIconWrap { width:56px; height:56px; border-radius:50%; background:var(--goldBg); border:1px solid rgba(255,207,107,.25); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 0 20px rgba(255,207,107,.12); }
.wardLockIconWrap .lock-ico { width:26px; height:26px; }
.wardLockIconWrap .lock-ico .lk-bd { fill:var(--gold); }
.wardLockIconWrap .lock-ico .lk-sh { stroke:var(--gold); stroke-width:2.4; }
.wardLockIconWrap .lock-ico .lk-ho { fill:var(--panel2); stroke:var(--panel2); }
.wardLockTitle { margin:0 0 8px; font-size:18px; font-weight:800; color:var(--text); }
.wardLockMsg { margin:0 0 20px; font-size:13.5px; line-height:1.5; color:var(--muted); max-width:400px; }
.wardLockActions { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:230px; }
.wardLockBtn { width:100%; padding:11px 16px; font-size:14px; font-weight:800; border-radius:8px; }
.wardLockLoginBtn { background:none; border:0; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 8px; text-decoration:underline; text-underline-offset:3px; transition:color .15s; }
.wardLockLoginBtn:hover { color:var(--text); }