:root{--panel:rgba(22,18,30,.82);--ink:#f3ead7;--muted:#b9ad97;--gold:#ffd54a;--accent:#d9a441;--line:rgba(255,235,200,.14)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#141019;color:var(--ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated}
.hidden{display:none!important}
#login{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#3b2d4f 0,#141019 70%);z-index:10}
#login .card{width:min(380px,92vw);padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#login h1{margin:0;font:700 42px/1 Georgia,serif;color:var(--accent);letter-spacing:1px}
#login .tag{color:var(--muted);margin:8px 0 20px}
#login input,#login button{width:100%;padding:11px 12px;margin:5px 0;border-radius:8px;border:1px solid var(--line);background:#231c2e;color:var(--ink);font-size:15px}
#login button{background:var(--accent);color:#22180a;font-weight:700;border:0;cursor:pointer;margin-top:10px}
#lerr{color:#ff8a8a;min-height:20px;margin-top:6px}
.small{font-size:12px;color:var(--muted)}
.panel,#stats,#quests,#dialog,#chatLog,#help{background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(4px)}
#stats{position:fixed;left:12px;top:12px;width:230px;padding:10px 12px;z-index:3}
#stats .who{font-weight:700;font-size:15px;margin-bottom:6px}
.lvl{color:var(--gold);font-weight:600;font-size:13px}
.bar{position:relative;height:16px;background:#0d0a12;border-radius:8px;margin:4px 0;overflow:hidden}
.bar div{height:100%;transition:width .2s}
.bar.hp div{background:linear-gradient(#e4554f,#a8302c)}
.bar.xp div{background:linear-gradient(#6fb5ff,#3a74c9)}
.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:16px;text-shadow:0 1px 2px #000}
#stats .row{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted)}
#stats .row b{color:var(--gold)}
#minimap{position:fixed;right:12px;top:12px;width:192px;height:192px;border:1px solid var(--line);border-radius:10px;background:#0d0a12;z-index:3;image-rendering:pixelated}
#quests{position:fixed;right:12px;top:256px;width:250px;max-height:calc(100vh - 380px);overflow:auto;padding:8px 10px;z-index:3}
.qhead{font-weight:700;cursor:pointer;display:flex;justify-content:space-between}
.q{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.q .t{font-weight:600;color:var(--accent)}
.q.ok .t::after{content:" ✓";color:#7dff9a}
.q .o{font-size:12px;color:var(--muted)}
.q .o.done{color:#7dff9a}
.q .d{font-size:12px;color:var(--muted);font-style:italic}
#quests.collapsed .q .d{display:none}
.kbd{display:inline-block;padding:0 5px;border:1px solid var(--line);border-radius:4px;font-size:11px;color:var(--muted)}
#bottom{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
#inv,#buildbar{display:flex;gap:6px}
.slot{min-width:58px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;text-align:center;font-size:12px;color:var(--muted)}
.slot b{display:block;font-size:16px;color:var(--ink)}
.bslot{cursor:pointer;position:relative}
.bslot .k{position:absolute;top:2px;left:5px;font-size:10px;color:var(--muted)}
.bslot.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;color:var(--ink)}
.bslot.poor{opacity:.45}
#hint{font-size:12px;color:var(--muted);text-shadow:0 1px 2px #000}
#chat{position:fixed;left:12px;bottom:12px;width:min(360px,46vw);z-index:3}
#chatLog{max-height:170px;overflow:auto;padding:6px 8px;font-size:13px;margin-bottom:6px}
#chatLog:empty{display:none}
#chatLog .s{color:var(--muted);font-style:italic}
#chatIn{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(22,18,30,.7);color:var(--ink)}
#dialog{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);width:min(520px,94vw);padding:14px 16px;z-index:5}
.dname{font:700 16px Georgia,serif;color:var(--accent)}
.dtext{margin:6px 0 10px;white-space:pre-line}
.dopts button{display:block;width:100%;text-align:left;margin:4px 0;padding:8px 10px;border-radius:7px;border:1px solid var(--line);background:#2a2236;color:var(--ink);cursor:pointer;font-size:14px}
.dopts button:hover{background:#3a2f4a}
.dopts button .n{color:var(--muted);margin-right:6px}
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:6;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--line);padding:7px 14px;border-radius:999px;animation:fade 4s forwards}
@keyframes fade{0%{opacity:0;transform:translateY(-6px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#help{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,92vw);padding:16px 20px;z-index:7}
#help h3{margin:0 0 8px;color:var(--accent)}
#help p{margin:6px 0}
#touch .pad{position:fixed;left:16px;bottom:200px;display:grid;grid-template:repeat(3,52px)/repeat(3,52px);z-index:4}
#touch button{background:rgba(22,18,30,.6);border:1px solid var(--line);color:var(--ink);border-radius:10px;font-size:20px}
#touch .pad [data-d=u]{grid-area:1/2}#touch .pad [data-d=l]{grid-area:2/1}#touch .pad [data-d=r]{grid-area:2/3}#touch .pad [data-d=d]{grid-area:3/2}
#touch .acts{position:fixed;right:16px;bottom:200px;display:flex;flex-direction:column;gap:10px;z-index:4}
#touch .acts button{width:62px;height:62px;border-radius:50%}
@media (max-width:700px){#quests{display:none}#minimap{width:110px;height:110px}#stats{width:180px}#chat{bottom:auto;top:150px;width:60vw}#chatLog{max-height:80px}}

.viewbtn{margin-top:8px;width:100%;padding:6px;border-radius:7px;border:1px solid var(--line);background:#2a2236;color:var(--ink);cursor:pointer;font-size:13px}
.viewbtn:hover{background:#3a2f4a}
canvas#game3d{z-index:0}canvas#game{z-index:1}
#help{width:min(760px,94vw);max-height:90vh;overflow:auto}
#help .hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 22px}
#help h4{margin:10px 0 4px;color:#ffe9a8;font-size:14px}
#help .k{display:inline-block;min-width:18px;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#2a2236;font:600 12px/18px system-ui,sans-serif;text-align:center}
.btnrow{display:flex;gap:6px}.btnrow .viewbtn{flex:1}.btnrow #logoutBtn,.btnrow #sndBtn,.btnrow #keysBtn,.btnrow #worldBtn{flex:0 0 32px}
#viewSwitch{position:fixed;right:12px;top:212px;width:192px;display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;z-index:3}
#viewSwitch button{flex:1;padding:6px 0;border:0;border-radius:7px;background:transparent;color:var(--muted);font:700 14px system-ui,sans-serif;cursor:pointer}
#viewSwitch button.on{background:var(--accent);color:#22180a}
@media (max-width:700px){#viewSwitch{top:126px;width:110px}}
.bar.wt div{background:linear-gradient(#c9a35a,#8a6a2e)}.bar.wt div.over,.bar.wt #wFill.over{background:linear-gradient(#e4554f,#a8302c)}
.viewbtn.glow{border-color:var(--gold);box-shadow:0 0 10px rgba(255,213,74,.45);color:var(--gold)}
#cs,#shop,#pile,#fb,#chest,#keys,#ask{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:8;backdrop-filter:blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#shop{width:min(820px,96vw)}
.cshead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cshead h3{margin:0;color:var(--accent);flex:1}.cshead .gold{color:var(--gold);font-weight:700}
.tabs{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.tabs button,.x{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:#2a2236;color:var(--muted);cursor:pointer;font-size:13px}
.tabs button.on{background:var(--accent);color:#22180a;border-color:var(--accent);font-weight:700}
.x{padding:6px 10px}
.csbody,#shop .cols{overflow:auto;padding:12px 14px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.cols{grid-template-columns:1fr}}
#cs h4,#shop h4{margin:12px 0 6px;color:#ffe9a8}
#cs .hint,#shop .hint{color:var(--muted);margin:4px 0 8px}.hint.ok{color:#7dff9a}.hint.bad,.bad{color:#ff8a8a}.ok{color:#7dff9a}
#cs button:not(.x):not([data-tab]),#shop .ib button{padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:#3a2f4a;color:var(--ink);cursor:pointer;font-size:13px}
#cs button:disabled,#shop button:disabled{opacity:.4;cursor:default}
#cs button.ghost{background:transparent}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.stat .small{display:block}.stat .val{font:700 20px Georgia,serif;color:var(--gold);display:flex;gap:8px;align-items:center}
.stat .val button{width:28px;height:28px;padding:0!important;font-weight:700;background:var(--accent)!important;color:#22180a!important}
.kv{width:100%;border-collapse:collapse}.kv td{padding:5px 4px;border-bottom:1px solid var(--line)}.kv td:last-child{text-align:right;font-weight:600}
.eslots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:700px){.eslots{grid-template-columns:repeat(3,1fr)}}
.eslot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.18)}
.eslot .ei{font-size:28px;line-height:36px}.eslot .ei.empty{color:var(--muted)}
.ilist{display:flex;flex-direction:column;gap:5px}
.irow,.recipe{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.15)}
.ii{font-size:22px;width:30px;text-align:center}.in{flex:1;min-width:0}.in .small{display:block}
.ib{display:flex;gap:5px;align-items:center}.price{color:var(--gold);font-weight:700;margin-right:4px}
.bar.big{height:10px;margin:0 0 10px}
.skill{padding:10px 0;border-bottom:1px solid var(--line)}
.sh{display:flex;gap:10px;align-items:flex-start}.sh .si{font-size:24px}.sh>div{flex:1}.sh .small{display:block}.bar.mini{height:12px;margin-top:4px;max-width:280px}.bar.mini span{line-height:12px;font-size:10px}
.perks{display:flex;align-items:stretch;gap:6px;margin-top:8px;flex-wrap:wrap}.arrow{align-self:center;color:var(--muted)}
.perk{flex:1;min-width:170px;padding:8px;border-radius:8px;border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.perk.own{border-color:#7dff9a;background:rgba(125,255,154,.08)}.perk.ready{border-color:var(--gold);background:rgba(255,213,74,.08)}.perk.lock{opacity:.55}
.perk .req{font-size:12px;color:var(--muted);margin-top:auto}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.recipe.dim{opacity:.6}.need{display:flex;gap:8px;font-size:12px;margin-top:2px;flex-wrap:wrap}
#pile{width:min(420px,94vw)}#pile .csbody{padding:12px}
#fb{width:min(520px,94vw)}#fb .csbody{padding:12px}
.fbk{display:flex;gap:6px;margin-bottom:8px}.fbk button{flex:1;padding:8px;border-radius:8px;border:1px solid var(--line);background:#2a2236;color:var(--muted);cursor:pointer}
.fbk button.on{background:var(--accent);color:#22180a;font-weight:700}
#fbText{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:#1b1524;color:var(--ink);font:14px system-ui,sans-serif;resize:vertical}
.btnrow #fbBtn{flex:1.3}
.bar.fd div{background:linear-gradient(#f0a64a,#b8702a)}.bar.fd div.low{background:linear-gradient(#e4554f,#a8302c)}
#chest{width:min(860px,96vw)}.chestcols{padding:12px 14px;overflow:auto}
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.cslot{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.25);position:relative;display:flex;align-items:center;justify-content:center;user-select:none}
.cslot.full{background:#2a2236;cursor:grab}.cslot.over{outline:2px solid var(--accent)}
.cslot .ci{font-size:24px}.cslot .cn{position:absolute;right:5px;bottom:2px;font:700 12px system-ui;text-shadow:0 1px 2px #000}
.irow[draggable=true]{cursor:grab}
#keys{width:min(520px,94vw)}#keys .csbody{padding:12px;overflow:auto}
.krow{display:grid;grid-template-columns:1fr auto 170px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}.krow .viewbtn{margin:0}
#keys .k{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#2a2236;font:600 12px/20px system-ui;text-align:center}
#stats{width:262px}.btnrow .viewbtn{white-space:nowrap;font-size:12px;padding:6px 4px}.btnrow #fbBtn{flex:1.4}
#ask{width:min(460px,92vw);z-index:12}#ask .csbody{padding:14px}#ask p{margin:6px 0}
.viewbtn.danger{background:#7a2420;border-color:#a8302c;color:#ffe0dc;font-weight:700}.viewbtn.danger:hover{background:#923029}
.bslot.danger{border-color:#a8302c;color:#ffb3ab}
#buildbar{flex-wrap:wrap;justify-content:center;max-width:min(980px,96vw)}
#buildbar .bslot{min-width:0;width:92px;padding:5px 4px;font-size:11px;line-height:1.25}
#buildbar .bslot b{font-size:12px;white-space:normal;line-height:1.15;min-height:28px;display:flex;align-items:center;justify-content:center}
#buildbar .bslot.danger{width:120px}
@media (max-width:700px){#buildbar .bslot{width:70px}}
details.more{margin:4px 0 2px}details.more summary{cursor:pointer;color:var(--accent);font-size:12px;list-style:none}
details.more summary::before{content:'▸ ';}details.more[open] summary::before{content:'▾ ';}details.more summary::-webkit-details-marker{display:none}
details.more p{font-size:12.5px;color:var(--muted);margin:5px 0}
#help section{padding:4px 0}
.who{display:flex;align-items:baseline;gap:6px}.season{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted)}
.vsel{background:#1b1524;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:3px;font-size:12px;max-width:92px}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);vertical-align:middle}
.recipe{flex-wrap:wrap}
#crosshair{position:fixed;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:2;pointer-events:none}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:rgba(255,255,255,.85);box-shadow:0 0 2px #000}
#crosshair::before{left:10px;top:2px;width:2px;height:18px}#crosshair::after{top:10px;left:2px;height:2px;width:18px}

/* ---------- téléphone ---------- */
#mobBar{display:none}
@media (max-width:700px){
  #stats{width:min(56vw,230px);padding:7px 8px;left:8px;top:8px}
  #stats .who{font-size:13px;margin-bottom:3px;flex-wrap:wrap}.season{width:100%;margin-left:0}
  .bar{height:12px;margin:3px 0}.bar span{font-size:9.5px;line-height:12px}
  #stats .row{margin-top:3px;font-size:12px}
  #csBtn,#adminBtn{padding:5px;font-size:12px;margin-top:5px}
  .btnrow{gap:4px}.btnrow .viewbtn{padding:5px 0;font-size:15px}.btnrow .lbl{display:none}
  #keysBtn{display:none}
  #minimap{width:104px;height:104px;right:8px;top:8px}
  #viewSwitch{top:116px;right:8px;width:104px;padding:2px}#viewSwitch button{padding:4px 0;font-size:12px}
  #quests{display:none;top:150px;right:8px;left:auto;width:min(70vw,260px);max-height:45vh}
  body.quests-open #quests{display:block}
  #chat{display:none;left:8px;right:8px;width:auto;top:auto;bottom:222px}
  body.chat-open #chat{display:block}#chatLog{max-height:30vh}
  #inv,#hint{display:none}
  #bottom{bottom:6px}#buildbar{max-width:calc(100vw - 120px)}
  #mobBar{display:flex;position:fixed;left:8px;bottom:8px;gap:6px;z-index:4}
  #mobBar button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:20px}
  #touch .pad{left:12px;bottom:64px;grid-template:repeat(3,48px)/repeat(3,48px)}
  #touch .acts{right:10px;bottom:12px;flex-direction:row;flex-wrap:wrap-reverse;justify-content:flex-end;width:120px;gap:8px}
  #touch .acts button{width:54px;height:54px;font-size:20px}
  #toasts{top:auto;bottom:226px;width:92vw}.toast{font-size:13px;text-align:center}
  body.chat-open #toasts{bottom:auto;top:160px}
  #stats .who{cursor:pointer}
  body.stats-mini #stats .bar.xp,body.stats-mini #stats .bar.wt,body.stats-mini #stats .row,body.stats-mini #stats .btnrow,body.stats-mini #csBtn,body.stats-mini .season{display:none}
  #dialog{bottom:70px}
}
#updating{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(20,16,25,.94)}
#updating .card{width:min(380px,92vw);padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:center}
#updating h1{margin:0;font:700 34px Georgia,serif;color:var(--accent)}
#updating button,.install{margin-top:10px;width:100%;padding:11px;border:0;border-radius:8px;background:var(--accent);color:#22180a;font-weight:700;font-size:15px;cursor:pointer}
.install{background:#2a2236;color:var(--ink);border:1px solid var(--line)}
.irow.dim{opacity:.55}
.worldlink{color:var(--muted)}.worldlink:hover{color:var(--ink)}

#fpsMeter{position:fixed;left:8px;bottom:8px;z-index:30;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.55);color:#9fe8a8;font:600 11px ui-monospace,monospace;pointer-events:none}
#fpsMeter.hidden{display:none}

.dur{height:5px;width:80%;margin:3px auto;background:#0d0a12;border-radius:3px;overflow:hidden}.dur div{height:100%;background:#7dff9a}
.dur.low div{background:#f0c040}.dur.broken{outline:1px solid #e5534b}
b.legend{color:#ffcf5a;text-shadow:0 0 6px rgba(255,190,60,.5)}

#premium{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:8;backdrop-filter:blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#premium .csbody{overflow:auto;padding:12px 14px}#premium h4{margin:14px 0 6px;color:#ffe9a8}#premium .hint{color:var(--muted)}
#premium .ib button,#premium .packs button{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#3a2f4a;color:var(--ink);cursor:pointer}
#premium button:disabled{opacity:.4;cursor:default}
#premium .packs{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}#premium .packs button{flex:1;min-width:120px;padding:12px;font-size:15px;background:linear-gradient(#5a3f78,#3a2a52);border-color:#b48ae0}
#premium .consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink);margin:6px 0}#premium .consent a{color:#d9a441}
#premium .price{color:#c9a0ff;font-weight:700;margin-right:8px}

#chatLog .priv{background:rgba(180,120,230,.14);border-radius:4px;font-style:italic}

#guild{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:8;backdrop-filter:blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#guild .csbody{overflow:auto;padding:12px 14px}#guild h4{margin:14px 0 6px;color:#ffe9a8}#guild .hint{color:var(--muted)}
#guild button:not(.x):not(.gcol){padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:#3a2f4a;color:var(--ink);cursor:pointer;font-size:13px;margin-left:4px}
#guild button.danger{background:#5a2a2e;border-color:#a04848}#guild button:disabled{opacity:.4;cursor:default}
#guild .gtag{display:inline-block;min-width:38px;text-align:center;padding:2px 6px;border-radius:6px;color:#fff;font:700 12px system-ui;text-shadow:0 1px 2px rgba(0,0,0,.6);margin-right:8px}
#guild .gbanner{display:flex;align-items:center;gap:8px;padding:10px;border:2px solid;border-radius:10px;background:rgba(0,0,0,.2)}#guild .gbanner b{font:700 20px Georgia,serif;display:block}
#guild textarea{width:100%;min-height:60px;background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px;font:inherit;box-sizing:border-box}
#guild .motd{white-space:pre-wrap;background:rgba(0,0,0,.2);padding:8px;border-radius:8px}
#guild .gform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#guild .gform input{background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 8px}
#guild .gcols{display:flex;gap:4px}#guild .gcol{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer}#guild .gcol.on{border-color:#fff}
#guild .gfoot{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
#chatLog .gchat{background:rgba(120,200,140,.12);border-radius:4px}

.ltabs{display:flex;gap:6px;margin:0 0 6px}.ltabs button{flex:1;margin:0!important;background:#231c2e!important;color:var(--muted)!important;border:1px solid var(--line)!important;font-weight:600}
.ltabs button.on{background:var(--accent)!important;color:#22180a!important}
#login .lchk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0;text-align:left}#login .lchk input{width:auto;margin:2px 0 0}#login .lchk a{color:var(--accent)}
#login form .hidden{display:none!important}#login a{color:var(--accent)}
#acct{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:9;backdrop-filter:blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#acct .csbody{overflow:auto;padding:12px 14px}#acct h4{margin:14px 0 6px;color:#ffe9a8}#acct .hint{color:var(--muted)}
#acct .arow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}#acct input:not([type=checkbox]){flex:1;min-width:150px;background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px}
#acct textarea{width:100%;min-height:60px;background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px;font:inherit;box-sizing:border-box}
#acct button:not(.x){padding:6px 11px;border-radius:7px;border:1px solid var(--line);background:#3a2f4a;color:var(--ink);cursor:pointer}#acct button.danger{background:#5a2a2e;border-color:#a04848}
#acct .lchk{display:flex;gap:8px;align-items:center;font-size:13px;margin:6px 0}#acct .gfoot{display:flex;justify-content:flex-end;margin-top:12px}
.viewbtn.alert{box-shadow:0 0 0 2px #ff8a5a inset}
#login .lchk{display:block;line-height:1.45}#login .lchk input{vertical-align:-2px;margin-right:6px}
.btnrow{flex-wrap:wrap}.btnrow #discordBtn,.btnrow #acctBtn,.btnrow #guildBtn,.btnrow #premBtn,.btnrow #qualBtn{flex:0 0 32px;text-align:center;text-decoration:none;box-sizing:border-box}
/* rangée de boutons du panneau : deux lignes régulières d'icônes */
.btnrow{flex-wrap:wrap;gap:5px}.btnrow .viewbtn,.btnrow #logoutBtn,.btnrow #sndBtn,.btnrow #keysBtn,.btnrow #worldBtn,.btnrow #discordBtn,.btnrow #acctBtn,.btnrow #guildBtn,.btnrow #premBtn,.btnrow #qualBtn{flex:1 1 13%;min-width:0;margin-top:4px;padding:6px 0;text-align:center}
.btnrow .lbl{display:none}

#market{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,96vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:8;backdrop-filter:blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#market .csbody{overflow:auto;padding:12px 14px}#market h4{margin:12px 0 6px;color:#ffe9a8}#market .hint{color:var(--muted)}
#market .tabs{display:flex;gap:6px;padding:8px 14px 0}#market .tabs button{flex:1;padding:7px;border-radius:8px;border:1px solid var(--line);background:#231c2e;color:var(--muted);cursor:pointer;font-weight:600}#market .tabs button.on{background:var(--accent);color:#22180a}
#market .ib button,#market .mkform button{padding:5px 11px;border-radius:7px;border:1px solid var(--line);background:#3a2f4a;color:var(--ink);cursor:pointer}#market button:disabled{opacity:.4;cursor:default}
#market #mkFind,#market .mkform input{background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 8px}#market #mkFind{width:100%;box-sizing:border-box;margin-bottom:8px}
#market .mkgrid{display:flex;flex-wrap:wrap;gap:5px}#market .mkitem{position:relative;width:44px;height:44px;font-size:22px;border-radius:8px;border:1px solid var(--line);background:#231c2e;cursor:pointer}
#market .mkitem.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}#market .mkitem span{position:absolute;right:3px;bottom:1px;font-size:10px;color:var(--ink)}
#market .mkform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px}#market .mkform input{width:90px}
#market .price{color:#ffd54a;font-weight:700;margin-right:8px}

#cs .achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
#cs .ach{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.18);opacity:.6}
#cs .ach.ok{opacity:1;border-color:#d9a441;background:rgba(217,164,65,.1)}#cs .ach .ai{font-size:24px}#cs .ach b{display:block}
#cs .achbar{height:5px;background:#0d0a12;border-radius:3px;overflow:hidden;margin:4px 0 1px}#cs .achbar div{height:100%;background:#d9a441}
#cs .achtitle{display:flex;gap:8px;align-items:center}#cs .achtitle select{background:#1d1626;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 8px}

#tuto{position:fixed;left:50%;top:64px;transform:translateX(-50%);width:min(480px,92vw);z-index:6;background:rgba(30,24,40,.94);border:1px solid #d9a441;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:10px 12px;color:var(--ink)}
#tuto .th{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#ffd54a}#tuto .th button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px}
#tuto .tb{display:flex;gap:10px;align-items:center;margin:6px 0;font-size:14px;line-height:1.35}#tuto .ti{font-size:26px}
#tuto .tbar{height:4px;background:#0d0a12;border-radius:2px;overflow:hidden}#tuto .tbar div{height:100%;background:#d9a441;transition:width .4s}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,213,74,.9)}50%{box-shadow:0 0 0 6px rgba(255,213,74,0)}}.pulse{animation:pulse 1.2s infinite}

#cs .cfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.15)}
#cs .cfilter label{font-size:13px;display:flex;gap:6px;align-items:center}#cs .cst{display:flex;flex-wrap:wrap;gap:4px}
#cs .cst button{padding:3px 8px!important;font-size:12px!important}#cs .cst button.on{background:var(--accent)!important;color:#22180a!important}