:root{
  --wood:#2b1d12;--wood2:#3d2a1a;--parch:#efe0b9;--ink:#3a2814;
  --gold:#f2b632;--blue:#3d8fe0;--red:#d8473b;--green:#58c13a;
  --common:#9ab3c9;--common2:#5d7488;--rare:#ffb347;--rare2:#b8641a;--epic:#c77dff;--epic2:#6a2a9a;--leg1:#7ff3e8;--leg2:#d36cff;
  --font:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea{user-select:text;-webkit-user-select:text}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--wood);color:var(--parch);font-family:var(--font);touch-action:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0}
#cv{position:fixed;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
button,a,input,label{touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}
.hidden{display:none!important}
button{font-family:var(--font)}

/* ---------- application ---------- */
#app{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 20%,#5b3d22 0%,#2b1d12 75%)}
.topbar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;background:#0006;border-bottom:2px solid #000}
.king{display:flex;align-items:center;flex:1;min-width:0}
.kbadge{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:34px;flex:none;font-size:15px;letter-spacing:-.5px;background:linear-gradient(#5aa6ef,#1f5aa0);border:2px solid #fff;border-radius:9px;font-weight:900;box-shadow:0 2px 0 #0008}
.xp{position:relative;flex:1;max-width:130px;height:16px;margin-left:-6px;background:#000a;border-radius:0 8px 8px 0;overflow:hidden}
.xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ffd45a,#d58a10)}
.xp span{position:relative;display:block;text-align:center;font-size:10px;font-weight:800;line-height:16px;text-shadow:0 1px 0 #000}
.pill{display:flex;align-items:center;gap:5px;background:#000a;border-radius:16px;padding:4px 10px 4px 6px;font-size:14px}
.ico-gold{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#f2b632 45%,#a8650a);box-shadow:inset 0 0 0 1px #7a4106}
.ico-trophy{width:16px;height:16px;background:var(--gold);clip-path:polygon(10% 0,90% 0,85% 35%,60% 55%,60% 75%,80% 100%,20% 100%,40% 75%,40% 55%,15% 35%)}
main{flex:1;overflow:hidden;position:relative}
.tab{position:absolute;inset:0;overflow-y:auto;padding:12px 12px 24px;display:none;flex-direction:column;align-items:center;gap:12px;touch-action:pan-y}
.tab.on{display:flex}
.tabs{display:flex;background:linear-gradient(#4a321d,#2b1d12);border-top:2px solid #7a5428;padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;background:none;border:0;color:#d9c391;font-weight:800;font-size:12px;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.tabs button .ti{font-size:22px;line-height:1}
.tabs button.on{background:linear-gradient(#7a5428,#4a321d);color:#fff}
.sec-title{width:100%;max-width:560px;font-weight:900;font-size:17px;color:var(--gold);display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.sec-title small{font-size:12px;color:var(--parch);font-weight:600;opacity:.8}
.sec-title.dim{color:#bfa77a}
.logo{margin:4px 0 0;line-height:.9;text-align:center;font-weight:900;letter-spacing:2px;text-shadow:0 3px 0 #000a}
.logo span{display:block;font-size:min(12vw,56px);color:var(--gold);-webkit-text-stroke:2px #5a2d06}
.logo em{display:block;font-style:normal;font-size:min(8vw,38px);color:#fff;-webkit-text-stroke:1.5px #5a2d06}

/* ---------- boutons ---------- */
.btn{font:700 16px var(--font);color:#fff;background:linear-gradient(#5aa6ef,#2a6fb8);border:2px solid #0d335c;border-radius:12px;padding:12px 16px;box-shadow:0 4px 0 #0d335c;cursor:pointer;text-shadow:0 1px 0 #0008}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0d335c}
.btn.gold{background:linear-gradient(#ffd45a,#e5911b);border-color:#7a4106;box-shadow:0 5px 0 #7a4106}
.btn.green{background:linear-gradient(#7fe05a,#3c9a22);border-color:#1f5a0c;box-shadow:0 4px 0 #1f5a0c}
.btn.big{font-size:26px;width:100%;max-width:420px;padding:16px;letter-spacing:2px}
.btn.ghost{background:#0005;border-color:#0008;box-shadow:none}
.btn:disabled{filter:grayscale(1) brightness(.7)}
.row{display:flex;gap:10px;width:100%;max-width:420px}
.row .btn:first-child{flex:1}
.stats-line{font-size:12px;opacity:.7}

/* ---------- bannière d'arène (accueil) ---------- */
.arena-banner{width:100%;max-width:420px;display:flex;gap:10px;align-items:center;text-align:left;color:var(--ink);background:linear-gradient(#efe0b9,#cdb27a);border:3px solid #6b4520;border-radius:14px;padding:8px;box-shadow:0 6px 0 #0006;cursor:pointer}
.ab-art{position:relative;width:132px;height:110px;flex:none;border-radius:10px;overflow:hidden}
.ab-art img{position:absolute;height:78%;bottom:4%;filter:drop-shadow(0 3px 2px #0006)}
.ab-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ab-info small{font-size:12px;font-weight:700;opacity:.7}
.ab-info b{font-size:18px;line-height:1.1}
.ab-info em{font-size:12px;font-style:normal;font-weight:800;color:#7a4106}
.ab-prog{position:relative;height:16px;background:#0004;border-radius:8px;overflow:hidden}
.ab-prog i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ffd45a,#e5911b)}
.ab-prog span{position:relative;display:block;text-align:center;font-size:11px;font-weight:800;color:#fff;line-height:16px;text-shadow:0 1px 0 #000}

/* ---------- cartes ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:560px}
.grid.deck{padding:8px;background:#0004;border-radius:12px;border:2px solid #0006}
.card{position:relative;aspect-ratio:5/6.4;border-radius:10px;padding:3px;cursor:pointer;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 3px 0 #0008}
.card.common{--c1:var(--common);--c2:var(--common2)}
.card.rare{--c1:var(--rare);--c2:var(--rare2)}
.card.epic{--c1:var(--epic);--c2:var(--epic2)}
.card.legendary{--c1:var(--leg1);--c2:var(--leg2)}
.card .in{position:absolute;inset:3px;border-radius:7px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#5a84b8,#1d3150)}
.card.spellc .in{background:radial-gradient(circle at 50% 40%,#8a5bb0,#3a1d52)}
.card .in img{position:absolute;left:6%;top:4%;width:88%;height:74%;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.card .cost{position:absolute;left:-2px;top:-2px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fd4ff,#1f6fc9);border:2px solid #fff;color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center;text-shadow:0 1px 0 #000;z-index:2}
.card .lv{position:absolute;left:3px;right:3px;bottom:3px;background:#000b;color:#fff;font-size:10px;font-weight:800;text-align:center;padding:2px 0 1px;border-radius:0 0 7px 7px}
.card-wrap .bar{position:relative;height:11px;margin:1px 4px 3px;background:#000a;border-radius:6px;overflow:hidden}
.card-wrap .bar i{position:absolute;inset:0 auto 0 0;background:#3d8fe0}
.card-wrap .bar.up i{background:linear-gradient(#7fe05a,#3c9a22)}
.card-wrap .bar span{position:relative;display:block;font-size:8px;line-height:11px;text-align:center;font-weight:800}
.card .upa{position:absolute;right:-4px;top:-4px;width:20px;height:20px;border-radius:50%;background:var(--green);border:2px solid #fff;color:#fff;font-weight:900;display:grid;place-items:center;font-size:12px;z-index:2;animation:bob 1s infinite alternate}
@keyframes bob{to{transform:translateY(-3px)}}
.card.locked{filter:grayscale(1) brightness(.55)}
.card.locked .lockt{position:absolute;left:3px;right:3px;bottom:3px;background:#000c;color:#fff;font-size:9px;text-align:center;padding:2px;border-radius:0 0 7px 7px}
.card.sel{outline:3px solid var(--gold);outline-offset:1px}
.card.dim{opacity:.35}
.card-wrap{display:flex;flex-direction:column}

/* ---------- arènes ---------- */
#arenaList{display:flex;flex-direction:column;gap:14px;width:100%;max-width:560px}
.arena{position:relative;border-radius:14px;padding:12px;border:3px solid #000a;box-shadow:0 5px 0 #0007;overflow:hidden;background:var(--bg)}
.arena h3{margin:0;font-size:20px;color:#fff;text-shadow:0 2px 0 #000;-webkit-text-stroke:.5px #0008}
.arena .req{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;background:#0007;border-radius:12px;padding:3px 9px;margin:6px 0 10px}
.arena .tag{position:absolute;right:10px;top:10px;font-size:11px;font-weight:900;padding:4px 8px;border-radius:10px;background:var(--green);color:#fff}
.arena.locked .tag{background:#000a}
.arena.locked{filter:saturate(.35) brightness(.8)}
.arena .grid{max-width:none;grid-template-columns:repeat(4,1fr)}
.arena .unlock-msg{font-size:12px;margin-top:8px;opacity:.85}

/* ---------- surcouches ---------- */
#overlay{position:fixed;inset:0;z-index:20;background:#000c;display:flex;align-items:center;justify-content:center;padding:16px;touch-action:none}
.panel{width:100%;max-width:440px;max-height:100%;overflow-y:auto;background:linear-gradient(#f3e6c4,#d9c391);color:var(--ink);border:3px solid #6b4520;border-radius:16px;padding:14px;box-shadow:0 10px 40px #000}
.panel h2{margin:0 0 2px;font-size:24px}
.detail-top{display:flex;gap:12px;align-items:center}
.detail-top .card{width:110px;flex:none}
.rar{display:inline-block;font-size:11px;font-weight:900;padding:2px 8px;border-radius:8px;color:#fff;background:linear-gradient(90deg,var(--c1),var(--c2))}
.rar.common{--c1:var(--common);--c2:var(--common2)}.rar.rare{--c1:var(--rare);--c2:var(--rare2)}.rar.epic{--c1:var(--epic);--c2:var(--epic2)}.rar.legendary{--c1:var(--leg1);--c2:var(--leg2)}
.panel p{margin:8px 0;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;font-size:12px}
.stats div{background:#0001;border-radius:6px;padding:5px 7px;display:flex;justify-content:space-between;gap:6px}
.stats b{white-space:nowrap}
.stats .plus{color:#2f8a12;font-weight:900}
.acts{display:flex;gap:8px;margin-top:12px}
.acts .btn{flex:1;font-size:15px;padding:10px 6px}
.lvbar{position:relative;height:18px;background:#0003;border-radius:9px;overflow:hidden;margin-top:6px}
.lvbar i{position:absolute;inset:0 auto 0 0;background:#3d8fe0}
.lvbar.up i{background:linear-gradient(#7fe05a,#3c9a22)}
.lvbar span{position:relative;display:block;text-align:center;font-size:12px;font-weight:800;color:#fff;line-height:18px;text-shadow:0 1px 0 #000}

/* fin de partie / coffre */
.result{text-align:center;color:#fff}
.result h2{font-size:46px;margin:0;color:var(--gold);-webkit-text-stroke:2px #5a2d06;text-shadow:0 4px 0 #000a}
.result h2.lose{color:#ff8b7d}
.crowns{display:flex;justify-content:center;gap:30px;font-size:44px;font-weight:900;margin:8px 0}
.crowns small{display:block;font-size:13px;opacity:.8}
.result .tr{font-size:22px;font-weight:900;margin-bottom:6px}
.result .gold-w{font-size:16px;font-weight:800;color:#ffd45a}
#chestStage{position:relative;width:100%;max-width:440px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}
#chestStage canvas{width:min(80vw,340px);height:min(80vw,340px)}
#chestStage .ctitle{font-size:26px;font-weight:900;color:var(--gold);-webkit-text-stroke:1.5px #5a2d06;text-shadow:0 3px 0 #000}
#chestStage .hint{font-size:14px;opacity:.8;margin-top:6px;animation:blink 1s infinite alternate}
@keyframes blink{to{opacity:.3}}
.reveal{display:flex;flex-direction:column;align-items:center;gap:8px;animation:pop .35s ease-out}
.reveal .card{width:150px}
.reveal .rname{font-size:22px;font-weight:900}
.reveal .rcount{font-size:34px;font-weight:900;color:#fff;text-shadow:0 3px 0 #000}
.reveal .newc{font-size:16px;font-weight:900;color:#ffd45a;animation:blink .5s infinite alternate}
.reveal .lvbar{width:180px}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.left-n{position:absolute;top:8px;right:8px;background:#000a;border-radius:12px;padding:4px 10px;font-weight:900}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:10px 0}
.summary .card .cnt{position:absolute;left:3px;right:3px;bottom:3px;text-align:center;font-weight:900;font-size:12px;background:#000b;border-radius:0 0 7px 7px}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#000d;color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;z-index:40;animation:pop .3s}

#loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#5b3d22 0%,#2b1d12 70%)}
.load-box{width:100%;max-width:360px;text-align:center;padding:16px}
.load-bar{height:14px;border-radius:8px;background:#0006;border:2px solid #000;overflow:hidden;margin-top:24px}
.load-bar i{display:block;height:100%;width:0;background:linear-gradient(#ffd45a,#e5911b);transition:width .2s}

#chestInfo{width:100%;display:flex;flex-direction:column;align-items:center}
#chestInfo .summary .card{width:auto}

/* ---------- classe ---------- */
.class-box{width:100%;max-width:560px;display:flex;gap:12px;align-items:center;text-align:left;color:var(--ink);background:linear-gradient(#efe0b9,#cdb27a);border:3px solid #6b4520;border-radius:14px;padding:8px;box-shadow:0 5px 0 #0006;cursor:pointer}
.cb-art{width:84px;height:84px;flex:none;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#5a84b8,#1d3150);border:3px solid #6b4520;position:relative}
.cb-art img,.co-art img{position:absolute;left:50%;top:4%;width:118%;transform:translateX(-50%)}
.cb-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.cb-info b{font-size:20px}
.cb-info span{font-size:13px;line-height:1.3}
.cb-info em{font-size:12px;font-style:normal;font-weight:800;color:#7a4106}
.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.class-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#fff6;border:3px solid #b8955a;border-radius:12px;padding:8px 6px;color:var(--ink);cursor:pointer}
.class-opt.on{border-color:#3c9a22;background:#e4f7d6;box-shadow:0 0 0 2px #7fe05a}
.class-opt b{font-size:16px}
.class-opt span{font-size:11px;line-height:1.25}
.class-opt i{position:absolute;top:6px;right:6px;font-style:normal;font-size:10px;font-weight:900;background:#3c9a22;color:#fff;border-radius:8px;padding:2px 6px}
.co-art{width:76px;height:76px;border-radius:50%;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 35%,#5a84b8,#1d3150);border:3px solid #6b4520}

/* ---------- kamas & série ---------- */
img.kamas{width:1.05em;height:1.05em;vertical-align:-0.18em;object-fit:contain}
.pill img.kamas{width:18px;height:18px}
.kamas-big{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 4px 4px #000a)}
.streak-box{width:100%;max-width:420px;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#4b2d6e,#241536);border:3px solid #8a5bc0;border-radius:14px;padding:6px 10px;box-shadow:0 5px 0 #0007}
.sb-chest{width:64px;height:64px;flex:none}
.sb-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.sb-info b{font-size:16px;color:#f0d9ff}
.sb-info span{font-size:11px;opacity:.85}
.pips{display:inline-flex;gap:6px}
.pips i{width:22px;height:10px;border-radius:5px;background:#0008;border:1px solid #fff4}
.pips i.on{background:linear-gradient(#ffd45a,#e5911b);border-color:#fff8;box-shadow:0 0 6px #ffd45a}
.sb-count{font-size:20px;font-weight:900;color:#f0d9ff}
.sb-open{padding:8px 12px;font-size:15px;animation:bob 1s infinite alternate}
.streak-res{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0;font-weight:800}
.result{width:100%;max-width:440px;background:radial-gradient(ellipse at 50% 30%,#4a321dee,#120c06f2);border:3px solid #6b4520;border-radius:18px;padding:18px 14px;box-shadow:0 10px 40px #000}
.result .btn.big{font-size:20px;letter-spacing:1px}

.unlock-grid{max-width:330px;margin:0 auto 6px}
.summary .card .cnt{position:absolute;left:3px;right:3px;bottom:3px;text-align:center;font-weight:900;font-size:11px;background:#000b;border-radius:0 0 7px 7px;color:#ffd45a}

/* ---------- hôtel de vente ---------- */
.pill.og{border:0;color:inherit;font:inherit;cursor:pointer}
.pill.og i{font-style:normal;font-weight:900;background:#3c9a22;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font-size:13px;margin-left:2px}
.tabs button{font-size:11px}
.btn.og{background:linear-gradient(#58d6d0,#1f8f9a);border-color:#0d4a52;box-shadow:0 4px 0 #0d4a52}
.shop-arena{width:100%;max-width:560px;display:flex;gap:10px;align-items:center;background:linear-gradient(#efe0b9,#cdb27a);color:var(--ink);border:3px solid #6b4520;border-radius:14px;padding:8px;box-shadow:0 5px 0 #0006}
.sa-art{position:relative;width:96px;height:84px;flex:none;border-radius:10px;overflow:hidden}
.sa-art img{position:absolute;height:76%;bottom:4%}
.sa-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sa-info small{font-size:11px;font-weight:800;color:#7a4106;text-transform:uppercase}
.sa-info b{font-size:17px}
.sa-info span{font-size:12px;line-height:1.3}
.shop-chests{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shop-chest{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:linear-gradient(#3d2a1a,#24180e);border:3px solid #7a5428;border-radius:12px;padding:8px 5px;overflow:hidden}
.shop-chest.best{border-color:#7ff3e8;box-shadow:0 0 14px #7ff3e855}
.shop-chest .ribbon{position:absolute;top:8px;right:-26px;transform:rotate(35deg);background:#7ff3e8;color:#123;font-size:10px;font-weight:900;padding:2px 28px}
.shop-chest canvas{width:84px;height:74px}
.shop-chest b{font-size:14px}
.sc-arena{font-size:10px;font-weight:900;background:#3c9a22;color:#fff;border-radius:8px;padding:1px 7px}
.shop-chest p{margin:2px 0;font-size:10px;opacity:.85;min-height:26px}
.cs-total{font-size:11px;font-weight:800}
.cs-rar{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:2px 0 4px}
.ck{font-size:9px;font-weight:800;border-radius:6px;padding:1px 5px;color:#fff}
.ck.common{background:var(--common2)}.ck.rare{background:var(--rare2)}.ck.epic{background:var(--epic2)}.ck.legendary{background:linear-gradient(90deg,#2aa79e,#9a3fc0)}
.sc-buy{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:auto}
.sc-buy .btn{font-size:13px;padding:6px 4px}
.shop-row{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.shop-offer{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:linear-gradient(#24414a,#132428);border:3px solid #2f7f88;border-radius:12px;padding:10px 6px}
.shop-offer.pack{background:linear-gradient(#26402a,#132416);border-color:#3c9a22}
.so-get{font-size:19px;font-weight:900}
.shop-offer small{font-size:10px;opacity:.75;margin-bottom:4px}
.shop-offer .btn{width:100%;font-size:14px;padding:7px 4px}
.shop-offer .bonus{position:absolute;top:-8px;right:-4px;background:#e5911b;color:#fff;font-size:10px;font-weight:900;border-radius:8px;padding:2px 6px}
.shop-skins{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-bottom:20px}
.shop-skin{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:linear-gradient(#3d2a1a,#24180e);border:3px solid #7a5428;border-radius:14px;padding:8px}
.shop-skin.eq{border-color:#7fe05a;box-shadow:0 0 12px #7fe05a55}
.sk-prev{position:relative;width:100%;height:150px;border-radius:10px;background:radial-gradient(ellipse at 50% 80%,#7fae47,#3f6d27);overflow:hidden}
.sk-prev canvas{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:140px;height:146px}
.sk-art{position:absolute;right:2px;bottom:0;height:62%;filter:drop-shadow(0 2px 3px #000a)}
.shop-skin b{font-size:15px}
.shop-skin small{font-size:11px;opacity:.8}
.eqtag{font-weight:900;color:#7fe05a;padding:6px}

/* ---------- connexion ---------- */
#auth{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;background:radial-gradient(ellipse at 50% 25%,#5b3d22 0%,#2b1d12 75%)}
.auth-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.auth-box .logo{margin-bottom:6px}
#authBody{display:flex;flex-direction:column;gap:12px;background:linear-gradient(#f3e6c4,#d9c391);color:var(--ink);border:3px solid #6b4520;border-radius:16px;padding:16px;box-shadow:0 10px 30px #000a}
.auth-tabs{display:flex;gap:6px}
.auth-tabs button{flex:1;font:800 15px var(--font);padding:9px;border-radius:10px;border:2px solid #b8955a;background:#fff5;color:var(--ink);cursor:pointer}
.auth-tabs button.on{background:#6b4520;color:#fff;border-color:#6b4520}
#authBody form{display:flex;flex-direction:column;gap:10px}
#authBody label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
#authBody input,.acc-row input{font:600 16px var(--font);padding:10px 12px;border-radius:10px;border:2px solid #b8955a;background:#fffaf0;color:var(--ink);outline:none}
#authBody input:focus,.acc-row input:focus{border-color:#e5911b}
#authBody .btn.big{font-size:18px;padding:13px}
.auth-err{background:#ffdcd5;color:#8a1a0a;border:2px solid #e05a48;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700}
.auth-or{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.7}
.auth-or::before,.auth-or::after{content:"";flex:1;height:2px;background:#b8955a}
.auth-social{display:flex;gap:8px}
.btn.social{flex:1;font-size:15px;padding:11px 6px}
.btn.social.discord{background:linear-gradient(#7289ff,#4c5fd0);border-color:#2c3a8a;box-shadow:0 4px 0 #2c3a8a}
.btn.social.google{background:linear-gradient(#ffffff,#e4e4e4);color:#333;text-shadow:none;border-color:#9a9a9a;box-shadow:0 4px 0 #9a9a9a}
.btn.social[data-off]{opacity:.55}
.auth-offline{background:none;border:0;color:#6b4520;font:700 13px var(--font);text-decoration:underline;cursor:pointer;padding:4px}
.auth-title{margin:0;font-size:20px;text-align:center}
.auth-note{margin:0;font-size:13px;line-height:1.4;text-align:center}
.pseudo{font-weight:900;text-shadow:0 1px 0 #000,0 0 6px #0008}
/* ---------- chip compte + panneau ---------- */
.account-chip{align-self:stretch;max-width:420px;width:100%;margin:0 auto;display:flex;align-items:center;gap:8px;background:#0006;border:2px solid #0008;border-radius:12px;padding:7px 12px;color:#fff;font:700 15px var(--font);cursor:pointer}
.account-chip .pseudo{flex:1;text-align:left;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-gear{font-size:12px;color:#ffd45a}
.acc-panel h2{text-align:center}
.acc-head{display:flex;flex-direction:column;align-items:center;gap:2px;background:#2b1d12;border-radius:12px;padding:10px;margin:6px 0}
.acc-head .pseudo{font-size:24px}
.acc-head small{color:#d9c391}
.acc-links{display:flex;gap:8px;justify-content:center;font-size:12px;font-weight:700}
.acc-links span{background:#0001;border-radius:8px;padding:4px 8px}
.acc-links span.on{color:#2f8a12}
.acc-sec{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.acc-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.acc-row input{flex:1;min-width:0;font-size:15px;padding:8px 10px}
.acc-row .btn{padding:8px 12px;font-size:14px;white-space:nowrap}
.acc-colors{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.acc-colors button{width:30px;height:30px;border-radius:50%;border:3px solid #0004;cursor:pointer}
.acc-colors button.on{border-color:#2b1d12;box-shadow:0 0 0 2px #ffd45a}
.acc-colors input[type=color]{width:38px;height:34px;border:0;background:none;padding:0;cursor:pointer}
.acc-prev{flex:1;background:#2b1d12;border-radius:10px;padding:8px;text-align:center;font-size:18px}
.acc-bal{text-align:center;font-size:14px}
/* ---------- classement ---------- */
.rk-me{width:100%;max-width:560px;background:linear-gradient(#efe0b9,#cdb27a);color:var(--ink);border:3px solid #6b4520;border-radius:14px;padding:10px;box-shadow:0 5px 0 #0006}
.rk-me-head{display:flex;justify-content:space-between;align-items:center;background:#2b1d12;color:#efe0b9;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700}
.rk-me-head .pseudo{font-size:20px}
.rk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.rk-stat{background:#fff6;border-radius:10px;padding:8px 4px;text-align:center;display:flex;flex-direction:column}
.rk-stat b{font-size:20px}
.rk-stat small{font-size:11px;font-weight:700;opacity:.75}
.rk-stat.win b{color:#2f8a12}.rk-stat.lose b{color:#b8321a}
.rk-wr{position:relative;height:20px;background:#0003;border-radius:10px;overflow:hidden;margin-top:8px}
.rk-wr i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#7fe05a,#3c9a22)}
.rk-wr span{position:relative;display:block;text-align:center;font-size:12px;font-weight:800;line-height:20px;color:#fff;text-shadow:0 1px 0 #000}
.rk-sorts{width:100%;max-width:560px;display:flex;gap:6px;overflow-x:auto}
.rk-sorts button{flex:1;font:800 12px var(--font);padding:7px 6px;border-radius:10px;border:2px solid #7a5428;background:#0005;color:#efe0b9;cursor:pointer;white-space:nowrap}
.rk-sorts button.on{background:#ffd45a;color:#3a2814;border-color:#ffd45a}
.rk-list{width:100%;max-width:560px;display:flex;flex-direction:column;gap:5px;padding-bottom:20px}
.rk-row{display:flex;align-items:center;gap:10px;background:#0005;border:2px solid #0006;border-radius:12px;padding:7px 10px}
.rk-row.me{border-color:#4ab0ff;background:#1f3a5a99}
.rk-row.top1{border-color:#ffd45a}.rk-row.top2{border-color:#cfd6de}.rk-row.top3{border-color:#d08a4a}
.rk-pos{width:30px;text-align:center;font-weight:900;font-size:16px}
.rk-name{flex:1;display:flex;flex-direction:column;min-width:0}
.rk-name .pseudo{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-name small{font-size:10px;opacity:.7}
.rk-val{font-weight:900;font-size:15px;color:#ffd45a;white-space:nowrap}
.rk-empty{text-align:center;padding:20px;opacity:.85;display:flex;flex-direction:column;gap:10px;align-items:center}
.tabs button{font-size:10px}
.tabs button .ti{font-size:20px}

/* ---------- appli mobile ---------- */
.install-hint{background:#0005;border:1px dashed #d9c391;color:#efe0b9;border-radius:12px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer;width:100%;max-width:420px}
#app main{min-height:0}

/* ---------- Coin'Z ---------- */
.pill.cz{border:0;color:inherit;font:inherit;cursor:pointer}
.btn.cz{background:linear-gradient(#ffe27a,#e2a21a);border-color:#7a4e06;color:#3a2405;box-shadow:0 4px 0 #7a4e06;text-shadow:none}
.btn img.kamas{width:18px;height:18px;vertical-align:-3px}
@media (max-width:420px){.topbar{gap:5px;padding-left:8px;padding-right:8px}.pill{padding:3px 7px 3px 4px;font-size:13px;gap:3px}.pill img.kamas{width:16px;height:16px}.king .xp{min-width:0}}

/* ---------- combat en ligne ---------- */
.btn.online{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:420px;background:linear-gradient(#5fb6ff,#2a6fd0);border-color:#123a7a;box-shadow:0 5px 0 #123a7a;color:#fff;font-size:20px;padding:10px 12px}
.btn.online small{font-size:12px;font-weight:700;opacity:.92;letter-spacing:0}
.btn.online.locked{filter:grayscale(.85) brightness(.75)}
.btn.online[disabled]{opacity:.6}
.pending-box{width:100%;max-width:420px;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#6a4a12,#3a2508);border:3px solid #ffd45a;border-radius:14px;padding:6px 10px;animation:pbGlow 1.6s ease-in-out infinite}
.pending-box div{flex:1;display:flex;flex-direction:column}.pending-box small{opacity:.8;font-size:12px}
@keyframes pbGlow{50%{box-shadow:0 0 18px #ffd45a88}}
.pvp-lobby{max-width:440px}.pvp-lobby h2{margin:0 0 4px}
.pl-online{font-weight:800;color:#7fe05a;margin-bottom:10px}
.pvp-lobby .rk-grid{margin-bottom:10px}
.streak-box.pvp{background:linear-gradient(135deg,#1d4a7a,#0f2440);border-color:#4ab0ff;max-width:none;margin-bottom:10px}
.pl-balance{background:#0004;border-radius:12px;padding:8px 12px;font-size:13px;text-align:left;margin-bottom:10px}.pl-balance p{margin:4px 0}
.pl-soon{font-size:12px;opacity:.8;margin:6px 0 0}
.ach-new{margin-top:10px;background:#ffd45a22;border:2px solid #ffd45a;border-radius:12px;padding:6px 10px;font-weight:800;color:#ffe9a0}

/* ---------- onglet Succès ---------- */
.tab-badge{position:absolute;top:-4px;right:-12px;background:#e33;color:#fff;font-style:normal;font-size:10px;font-weight:900;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 3px;box-shadow:0 0 0 2px #2b1d12}
.tabs .ti{position:relative}
.ach-head{width:100%;max-width:560px;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#5a3a14,#2e1d0a);border:3px solid #c98a12;border-radius:14px;padding:8px 10px}
.ah-cz{display:flex;align-items:center;gap:6px}.ah-cz img{width:44px;height:44px;filter:drop-shadow(0 2px 3px #0008);animation:czSpin 4s ease-in-out infinite}
.ah-cz b{font-size:20px;display:block;line-height:1;color:#ffe27a}.ah-cz small{font-size:11px;opacity:.8}
@keyframes czSpin{0%,80%,100%{transform:rotateY(0)}90%{transform:rotateY(180deg)}}
.ah-prog{flex:1;min-width:0;font-size:12px;font-weight:800}.ah-prog small{font-weight:600;opacity:.7;font-size:10px;display:block;margin-top:2px}
.ah-bar{height:8px;background:#0008;border-radius:4px;overflow:hidden;margin-top:3px}.ah-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd45a,#ff9a2a)}
.ah-all{font-size:13px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;line-height:1.1}.ah-all small{font-size:10px}
.ach-cats{width:100%;max-width:560px;display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.ach-cats button{flex:0 0 auto;background:#0006;border:2px solid #7a5428;color:#efe0b9;border-radius:18px;padding:6px 12px;font-weight:800;font-size:13px;position:relative;cursor:pointer}
.ach-cats button.on{background:linear-gradient(#ffd45a,#e2a21a);color:#3a2405;border-color:#7a4e06}
.ach-cats button i{font-style:normal;background:#e33;color:#fff;border-radius:9px;font-size:10px;padding:1px 5px;margin-left:5px}
.ach-list{width:100%;max-width:560px;display:flex;flex-direction:column;gap:8px}
.ach-row{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#3d2a1a,#2b1d12);border:2px solid #6b4a24;border-radius:14px;padding:8px 10px;cursor:pointer}
.ach-row.ready{border-color:#7fe05a;box-shadow:0 0 14px #7fe05a44;background:linear-gradient(135deg,#2f4a1a,#1f2f10)}
.ach-row.done{border-color:#c98a12;background:linear-gradient(135deg,#4a3510,#2b1d0a)}
.ach-row.off{opacity:.55}
.ach-ico{flex:0 0 54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle at 40% 35%,#6b4a24,#2b1d12);border:3px solid #c9a27a;overflow:hidden}
.ach-ico img{width:100%;height:100%;object-fit:contain}
.ach-ico.card-ico{background:radial-gradient(circle at 50% 40%,#4d77a8,#22385a)}
.ach-ico.card-ico.common{border-color:var(--common)}.ach-ico.card-ico.rare{border-color:var(--rare)}.ach-ico.card-ico.epic{border-color:var(--epic)}.ach-ico.card-ico.legendary{border-color:var(--leg1)}
.ach-ico.card-ico.golden{border-color:#ffd45a;box-shadow:0 0 10px #ffd45a}
.ach-ico.off img{filter:grayscale(1)}
.ach-ico.cls-ico{background:radial-gradient(circle,#2a5d93,#13304f)}.ach-ico.cls-ico img{object-fit:cover;object-position:top}
.ach-main{flex:1;min-width:0}
.ach-main>b{font-size:13.5px;display:block;line-height:1.2}
.ach-tiers{display:flex;gap:3px;margin:4px 0;flex-wrap:wrap}
.ach-tiers i{font-style:normal;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#0007;border:1px solid #6b4a24;font-size:8.5px;font-weight:900;display:grid;place-items:center;color:#a88}
.ach-tiers i.got{background:linear-gradient(#ffe27a,#e2a21a);color:#3a2405;border-color:#7a4e06}
.ach-tiers i.ready{background:#7fe05a;color:#173;border-color:#3a7a1a;animation:pip 1s ease-in-out infinite}
@keyframes pip{50%{transform:scale(1.18)}}
.ach-bar{position:relative;height:16px;background:#0008;border-radius:8px;overflow:hidden}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#3d8fe0,#7fc4f0)}.ach-bar.full i{background:linear-gradient(90deg,#58c13a,#a6f07a)}
.ach-row.done .ach-bar i{background:linear-gradient(90deg,#e2a21a,#ffe27a)}
.ach-bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:900;text-shadow:0 1px 2px #000}
.ach-rw{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.rw{display:inline-flex;align-items:center;gap:3px;background:#0006;border-radius:10px;padding:2px 7px 2px 3px;font-size:11.5px;font-weight:900;white-space:nowrap}
.rw img{width:20px;height:20px;object-fit:contain}
.rw-cz{color:#ffe27a}
.rw-card{border:2px solid var(--common)}.rw-card.rare{border-color:var(--rare)}.rw-card.epic{border-color:var(--epic)}.rw-card.legendary{border-color:var(--leg1)}
.rw-card img{border-radius:6px;background:#22385a}
.rw-gold{background:linear-gradient(90deg,#ffe27a,#e2a21a);color:#3a2405}
.rw-chest canvas{width:30px;height:26px}
.rw-lock{opacity:.85;font-weight:700}
.ach-act{flex:0 0 auto}.ach-act .btn{padding:8px 10px;font-size:13px;display:flex;flex-direction:column;align-items:center;line-height:1.1}.ach-act .btn small{font-size:10px}
.ach-ok{font-size:22px;color:#ffd45a;font-weight:900}
.ach-next{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0006;border:2px solid #6b4a24;font-size:11px;font-weight:900;opacity:.75}
.ach-detail{max-width:460px;text-align:left}
.ad-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ad-head h2{font-size:17px;margin:0}.ad-head small{opacity:.8}
.ad-tiers{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;touch-action:pan-y}
.ad-tier{display:flex;align-items:center;gap:8px;background:#0004;border:2px solid #6b4a24;border-radius:12px;padding:6px 8px}
.ad-tier.got{border-color:#c98a12;opacity:.7}.ad-tier.ready{border-color:#7fe05a;background:#1f2f10}
.ad-n{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:11px;background:#0007;border:2px solid #c9a27a}
.ad-tier.got .ad-n{background:linear-gradient(#ffe27a,#e2a21a);color:#3a2405}
.ad-t{flex:1;min-width:0}.ad-t b{font-size:12.5px}
.ad-s{font-size:18px}
/* récompenses */
.reward-pop{position:relative;overflow:hidden;max-width:460px}
.rp-burst{position:absolute;inset:-50%;background:repeating-conic-gradient(#ffd45a22 0 10deg,transparent 10deg 20deg);animation:burst 12s linear infinite;pointer-events:none}
@keyframes burst{to{transform:rotate(360deg)}}
.reward-pop>*{position:relative}
.rp-lines{list-style:none;padding:0;margin:4px 0 10px;font-size:13px;font-weight:700}.rp-lines li{margin:2px 0}
.rp-items{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:8px}
.rp-items>div{display:flex;flex-direction:column;align-items:center;gap:3px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
.rp-items>div:nth-child(2){animation-delay:.12s}.rp-items>div:nth-child(3){animation-delay:.24s}.rp-items>div:nth-child(4){animation-delay:.36s}.rp-items>div:nth-child(n+5){animation-delay:.48s}
@keyframes pop{from{transform:scale(.2);opacity:0}}
.rp-cz img{width:72px;height:72px;filter:drop-shadow(0 4px 8px #ffd45a88);animation:czSpin 2.5s ease-in-out infinite}
.rp-cz b{font-size:26px;color:#ffe27a;text-shadow:0 2px 0 #000}
.rp-card .card-wrap{width:70px}.rp-items small{font-weight:900;font-size:12px}
.rp-chest canvas{width:96px;height:84px}
/* cartes dorées */
.card.golden{--c1:#fff3b0;--c2:#c98a12;box-shadow:0 0 0 2px #ffd45a,0 0 14px #ffd45acc,0 3px 0 #0008;animation:goldGlow 2.2s ease-in-out infinite}
.card.golden::after{content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fff8 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:goldShine 3s ease-in-out infinite}
@keyframes goldGlow{50%{box-shadow:0 0 0 2px #ffe27a,0 0 22px #ffd45a,0 3px 0 #0008}}
@keyframes goldShine{0%,60%{background-position:-150% 0}100%{background-position:150% 0}}
/* classement : modes */
.rk-modes{width:100%;max-width:560px;display:flex;gap:6px}
.rk-modes button{flex:1;background:#0006;border:2px solid #7a5428;color:#efe0b9;border-radius:12px;padding:8px;font-weight:900;font-size:14px;cursor:pointer}
.rk-modes button.on{background:linear-gradient(#5fb6ff,#2a6fd0);border-color:#123a7a;color:#fff}
.tabs button{font-size:10px;padding-left:1px;padding-right:1px;text-align:center;line-height:1.1}
.ach-head,.ach-cats,.ach-list,.rk-modes,.pending-box,.btn.online{flex-shrink:0}
.ach-cats{min-height:40px}
.ad-tier{color:#3a2814;background:#fff6;border-color:#c9a27a}
.ad-tier.ready{background:#dff5c8;border-color:#58c13a}
.ad-tier.got{background:#f6e2a8;border-color:#c98a12;opacity:.85}
.ad-tier .rw{background:#3a2814;color:#efe0b9}.ad-tier .rw-gold{background:linear-gradient(90deg,#ffe27a,#e2a21a);color:#3a2405}
.ad-n{color:#efe0b9}
.streak-box.pvp{color:#efe0b9;text-align:left}.pvp-lobby .rk-stat{color:#3a2814}

/* ---------- logo Clash of Dofus ---------- */
.logo-wrap{margin:0;line-height:0;display:flex;justify-content:center;position:relative;flex-shrink:0}
.logo-wrap::before{content:'';position:absolute;left:50%;top:50%;width:80%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#ffd45a55 0%,#ffd45a00 70%);filter:blur(6px);animation:logoGlow 3.2s ease-in-out infinite;pointer-events:none}
.logo-img{position:relative;width:min(92vw,440px);height:auto;filter:drop-shadow(0 6px 10px #000a);animation:logoFloat 4s ease-in-out infinite;user-select:none}
.auth-logo .logo-img{width:min(86vw,380px)}
.load-logo .logo-img{width:min(88vw,460px);animation:logoPop .7s cubic-bezier(.2,1.5,.4,1) both, logoFloat 4s ease-in-out .7s infinite}
#tab-home .logo-wrap{margin:-6px 0 -10px}
@keyframes logoFloat{50%{transform:translateY(-6px) scale(1.015)}}
@keyframes logoGlow{50%{opacity:.45}}
@keyframes logoPop{from{transform:scale(.6);opacity:0}}

.sc-buy{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.sc-limit{font-size:10.5px;font-weight:700;color:#7fe0d8;text-align:center;line-height:1.2}
.sc-limit b{color:#fff}.sc-limit.out{color:#ff9d8f}
.btn.og[disabled]{filter:grayscale(.8);opacity:.6}
.btn.og.free{background:linear-gradient(#7fe05a,#2f9a22);border-color:#145a0e;box-shadow:0 4px 0 #145a0e;animation:pbGlow 1.6s ease-in-out infinite}

/* ---------- Guilde ---------- */
#tab-guild > *{flex-shrink:0}
#guildBody{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px;align-items:center}
.btn.sm{font-size:13px;padding:6px 10px;border-radius:9px;box-shadow:0 3px 0 #0d335c;letter-spacing:0;width:auto;max-width:none}
.btn.sm.gold{box-shadow:0 3px 0 #7a4106}.btn.sm.ghost{box-shadow:none}
.btn.sm.online{display:inline-block;font-size:13px;padding:6px 10px;box-shadow:0 3px 0 #123a7a}
.btn.red{background:linear-gradient(#ff7a6a,#c0362a);border-color:#5e140d;box-shadow:0 3px 0 #5e140d}
.btn.sm small{display:block;font-size:9px;font-weight:700;opacity:.9}
.btn.sm small .kamas{width:10px;height:10px}
canvas.emb{flex:none;vertical-align:middle;filter:drop-shadow(0 1px 1px #0009)}
.ptag{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.ptag .pseudo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-gname{font-style:normal;font-size:10px;color:#ffd45a;opacity:.85}
.g-rname{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-me{gap:10px;justify-content:flex-start}.g-me span:last-child{margin-left:auto}
.g-intro{width:100%;display:flex;gap:12px;align-items:center;background:#0005;border:2px solid #0006;border-radius:14px;padding:10px 12px}
.g-intro-ico{font-size:40px}.g-intro b{display:block;font-size:17px;color:var(--gold)}.g-intro small{font-size:12px;opacity:.85}
.g-pending{width:100%;display:flex;flex-direction:column;gap:6px}
.g-pending div{display:flex;align-items:center;gap:8px;justify-content:space-between;background:#3a2a10;border:1px solid #7a5428;border-radius:10px;padding:6px 10px;font-size:13px}
.g-search{width:100%;display:flex;gap:8px}
.g-search input,.g-send input,.ge-fields input{flex:1;min-width:0;font:600 15px var(--font);padding:10px 12px;border-radius:10px;border:2px solid #6b4520;background:#fff8e6;color:var(--ink)}
.g-search .btn{padding:8px 14px}
.g-list,.g-members,.g-reqs{width:100%;display:flex;flex-direction:column;gap:6px}
.g-row{display:flex;align-items:center;gap:10px;background:#0005;border:2px solid #0006;border-radius:12px;padding:6px 10px}
.g-row-info{flex:1;min-width:0;display:flex;flex-direction:column}
.g-row-info b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g-row-info small{font-size:11px;opacity:.85}
.g-open{color:#7fe05a;font-weight:900}.g-reqb{color:#ffb347;font-weight:900}
.g-card{width:100%;background:linear-gradient(#efe0b9,#cdb27a);color:var(--ink);border:3px solid #6b4520;border-radius:14px;padding:10px;box-shadow:0 5px 0 #0006;display:flex;flex-direction:column;gap:8px}
.g-head{display:flex;gap:12px;align-items:center}
.g-head h2{margin:0;font-size:21px;line-height:1.1;word-break:break-word}
.g-head-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.g-head small{font-size:12px;font-weight:700}
.g-card .g-open{color:#2a8f1a}.g-card .g-reqb,.panel .g-reqb{color:#b8641a}.panel .g-open{color:#2a8f1a}
.g-lvl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.g-xp{position:relative;flex:1;height:14px;background:#0007;border-radius:7px;overflow:hidden;min-width:60px}
.g-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ffd45a,#d58a10)}
.g-xp span{position:relative;display:block;text-align:center;font-size:10px;font-weight:800;line-height:14px;color:#fff;text-shadow:0 1px 0 #000}
.g-actions{display:flex;flex-wrap:wrap;gap:6px}
.g-hint{font-size:11px;opacity:.75}
.g-joinreq{width:100%;background:#3a2a10;border:2px solid #ffb347;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.g-joinreq b{color:#ffd45a}
.g-jr{display:flex;align-items:center;gap:8px}.g-jr .pseudo{flex:1;overflow:hidden;text-overflow:ellipsis}.g-jr small{font-size:11px;opacity:.8}
.g-subs{width:100%;display:flex;gap:6px}
.g-subs button{flex:1;position:relative;font:800 13px var(--font);color:#efe0b9;background:#0005;border:2px solid #0006;border-radius:10px;padding:8px 4px;cursor:pointer}
.g-subs button.on{background:linear-gradient(#7a5428,#4a321d);color:#fff;border-color:#ffd45a}
.g-subs button i{position:absolute;top:-7px;right:-4px;background:#e33;color:#fff;font-style:normal;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center}
#gSub{width:100%}
.g-chat{display:flex;flex-direction:column;gap:6px}
.g-msgs{height:min(46vh,420px);overflow-y:auto;background:#0006;border:2px solid #0008;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:5px;touch-action:pan-y}
.g-msg{max-width:85%;align-self:flex-start;background:#efe0b9;color:var(--ink);border-radius:10px 10px 10px 2px;padding:5px 9px;font-size:14px;word-break:break-word;user-select:text}
.g-msg b{display:flex;gap:6px;align-items:baseline;font-size:12px}.g-msg b small{font-size:10px;opacity:.6;font-weight:600}
.g-msg .pseudo{text-shadow:0 1px 0 #000a,0 0 2px #000}
.g-msg span{display:block}
.g-msg.mine{align-self:flex-end;background:#cfe6ff;border-radius:10px 10px 2px 10px}
.g-msg.sys{align-self:center;max-width:95%;background:none;color:#ffd45a;font-size:12px;font-weight:700;text-align:center;padding:2px}
.g-send{display:flex;gap:6px}.g-send .btn{padding:8px 16px}
.g-mem{display:flex;align-items:center;gap:8px;background:#0005;border:2px solid #0006;border-radius:12px;padding:6px 10px}
.panel .g-mem{background:#0001;border-color:#0002}
.dot{flex:none;width:11px;height:11px;border-radius:50%;background:#777;box-shadow:inset 0 0 0 2px #0005}
.dot.on{background:#3ee05a;box-shadow:0 0 6px #3ee05a}
.g-mname{flex:1;min-width:0;display:flex;flex-direction:column}
.g-mname .pseudo{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-mname small{font-size:10px;opacity:.75}
.g-members.small .g-mname .pseudo{text-shadow:0 1px 0 #000a}
.g-lead,.g-you{display:inline-block;font-style:normal;font-size:9px;font-weight:900;background:#ffd45a;color:#5a2d06;border-radius:6px;padding:0 5px;vertical-align:middle}
.g-you{background:#4ab0ff;color:#fff}
.g-mname > .pseudo + .g-lead{margin-top:2px}
.g-mxp{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;font-weight:800}.g-mxp small{font-size:9px;opacity:.7}
.g-mact{display:flex;flex-direction:column;gap:4px}
.g-reqbox{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;text-align:center}
.g-reqbox small{font-size:11px;opacity:.8}
.g-reqbox .btn.big{font-size:20px}
.g-req{display:flex;align-items:center;gap:10px;background:#0005;border:2px solid #0006;border-radius:12px;padding:6px 10px}
.g-req.mine{border-color:#4ab0ff}
.card.mini{width:46px;flex:none;cursor:default}
.g-req-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.g-req-info small{font-size:11px;opacity:.85}
.g-req-mine{font-size:11px;font-weight:800;color:#8fd0ff;text-align:center;width:64px}
.g-req .btn.sm{min-width:78px}
.g-pick .grid{grid-template-columns:repeat(4,1fr)}
.g-pick .card .cnt{position:absolute;left:3px;right:3px;bottom:3px;text-align:center;font-weight:900;font-size:11px;background:#000b;border-radius:0 0 7px 7px;color:#ffd45a}
.g-pick .bar{display:none}
.g-view .g-head{margin-bottom:6px}
.g-view .g-members{max-height:38vh;overflow-y:auto}
.g-note{font-size:12px;opacity:.8;text-align:center}
.g-edit .ge-top{display:flex;gap:12px;align-items:center}
#gePrev{width:110px;height:110px;flex:none;background:radial-gradient(#fff8,#0000 70%);border-radius:12px}
.ge-fields{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800}
.ge-fields label{display:flex;flex-direction:column;gap:3px}
.ge-name{font-size:20px}
.ge-rec{display:flex;gap:6px}
.ge-rec button,.ge-tabs button{flex:1;font:800 13px var(--font);padding:7px 4px;border-radius:9px;border:2px solid #6b4520;background:#fff6;color:var(--ink);cursor:pointer}
.ge-rec button.on,.ge-tabs button.on{background:linear-gradient(#ffd45a,#e5911b);color:#3a2814}
.ge-colors{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.ge-colors small{font-size:12px;font-weight:800}
.ge-sw{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ge-sw button{width:26px;height:26px;border-radius:50%;border:2px solid #0006;cursor:pointer;padding:0}
.ge-sw button.on{outline:3px solid #2a6fb8;outline-offset:1px}
.ge-sw input{width:34px;height:28px;border:0;padding:0;background:none}
.ge-tabs{display:flex;gap:6px}
.ge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px;max-height:34vh;overflow-y:auto;margin-top:6px;padding:4px;background:#fff5;border-radius:10px;touch-action:pan-y}
.ge-cell{width:54px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;background-color:#fffc;background-repeat:no-repeat;cursor:pointer;justify-self:center}
.ge-cell.on{border-color:#2a6fb8;background-color:#cfe6ff}
.g-duel{text-align:center}
.tabs button{min-width:0}
@media (max-width:420px){.tabs button{font-size:9.5px;letter-spacing:-.2px}.tabs button .ti{font-size:19px}}

.g-mrow{display:flex;align-items:center;gap:5px;min-width:0}
.g-mrow .pseudo{min-width:0}
.g-lead,.g-you{flex:none}
.panel .g-mem{background:#3a2814;color:#efe0b9}
.panel.g-edit,.panel.g-view{overflow-x:hidden}
.g-edit .ge-top,.g-edit .ge-fields,.g-edit label{min-width:0}
.ge-fields input{width:100%}

/* ---------- barre du bas : bouton COMBAT central ---------- */
.tabs{position:relative;align-items:stretch;overflow:visible;z-index:6}
.tabs-side{flex:1;display:flex;min-width:0}
.tabs-side button{flex:1;min-width:0}
.tabs .tab-fight{flex:0 0 92px;position:relative;padding:0 0 8px;justify-content:flex-end;background:none!important;color:#ffe9a8}
.fight-ring{position:absolute;left:50%;top:-30px;width:76px;height:76px;margin-left:-38px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#ffcf5a 0%,#e5911b 55%,#8a4a08 100%);border:3px solid #fff3c4;
  box-shadow:0 0 0 3px #5a2d06,0 6px 0 #3a1c04,0 0 22px rgba(255,200,80,.75);animation:fightPulse 2.2s ease-in-out infinite}
.fight-ring::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,220,120,.55);animation:fightWave 2.2s ease-out infinite}
.fight-ring svg{width:58px;height:58px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));transform:rotate(-8deg);animation:swordShine 2.2s ease-in-out infinite}
.fight-label{position:relative;font-size:13px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#ffd45a;text-shadow:0 2px 0 #000,0 0 6px rgba(255,180,60,.6)}
.tabs .tab-fight.on .fight-ring{background:radial-gradient(circle at 50% 35%,#fff0a0 0%,#f2b632 50%,#a8650a 100%);border-color:#fff}
.tabs .tab-fight:active .fight-ring{transform:translateY(3px) scale(.96);box-shadow:0 0 0 3px #5a2d06,0 2px 0 #3a1c04,0 0 22px rgba(255,200,80,.75)}
@keyframes fightPulse{0%,100%{box-shadow:0 0 0 3px #5a2d06,0 6px 0 #3a1c04,0 0 16px rgba(255,200,80,.55)}50%{box-shadow:0 0 0 3px #5a2d06,0 6px 0 #3a1c04,0 0 30px rgba(255,210,90,.95)}}
@keyframes fightWave{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes swordShine{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg) scale(1.06)}}
@media (max-width:420px){.tabs .tab-fight{flex-basis:80px}.fight-ring{width:68px;height:68px;margin-left:-34px;top:-28px}.fight-ring svg{width:52px;height:52px}.fight-label{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.fight-ring,.fight-ring::before,.fight-ring svg{animation:none}}
.tab{padding-bottom:46px}
.fight-ring{top:-40px;width:72px;height:72px;margin-left:-36px}
.fight-ring svg{width:54px;height:54px}
.tabs .tab-fight{padding-bottom:9px}
@media (max-width:420px){.fight-ring{width:66px;height:66px;margin-left:-33px;top:-38px}.fight-ring svg{width:50px;height:50px}}

/* ---------- abandon ---------- */
.forfeit-btn{position:fixed;left:8px;top:60px;z-index:4;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,12,6,.45);color:#fff;font-size:15px;line-height:28px;opacity:.55;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.forfeit-btn:hover,.forfeit-btn:active{opacity:1}
.ff-panel ul{margin:8px 0;padding-left:20px;font-size:13px;line-height:1.5}
.ff-panel .acts .btn{font-size:15px}
.ff-note{font-size:12px;opacity:.75;margin:6px 0 0}

/* ---------- Dofus (onglet Cartes) ---------- */
.dofus-row{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;flex-shrink:0}
.dofus-slot{position:relative;aspect-ratio:1;border-radius:14px;border:2px solid #0008;background:radial-gradient(circle at 50% 40%,#5a4028,#241708);padding:6px;cursor:pointer;display:grid;place-items:center}
.dofus-slot.got{border-color:var(--dc);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--dc) 45%,#3a2814),#1a1008);box-shadow:0 0 12px color-mix(in srgb,var(--dc) 55%,transparent)}
.dofus-ico{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #000a)}
.dofus-slot.off .dofus-ico{filter:grayscale(1) brightness(.45) contrast(.9)}
.dofus-slot i{position:absolute;right:2px;bottom:0;font-style:normal;font-size:12px}
.dofus-detail{text-align:center}
.dd-ico{width:110px;height:110px;margin:0 auto;padding:8px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dc) 50%,#fff) 0%,transparent 70%)}
.dd-ico.off .dofus-ico,.big-off{filter:grayscale(1) brightness(.6)!important}
.dd-eff{font-weight:800;font-size:15px!important}
.dd-st{font-size:13px}
/* ---------- bouton de l'accueil ---------- */
.btn.quest{display:flex;align-items:center;gap:10px;text-align:left;font-size:18px;padding:8px 14px;letter-spacing:1px;background:linear-gradient(#a06ad8,#5a2a9a);border-color:#2a0f52;box-shadow:0 5px 0 #2a0f52;flex-shrink:0}
.btn.quest .q-ico{width:44px;height:44px;flex:none}
.btn.quest .q-txt{display:flex;flex-direction:column;min-width:0}
.btn.quest small{font-size:12px;font-weight:700;letter-spacing:0;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.quest.ready{animation:questGlow 1.4s ease-in-out infinite}
@keyframes questGlow{0%,100%{box-shadow:0 5px 0 #2a0f52,0 0 0 rgba(255,212,90,0)}50%{box-shadow:0 5px 0 #2a0f52,0 0 18px rgba(255,212,90,.9)}}
/* ---------- écran de quête ---------- */
.quest-panel{max-width:480px}
.qp-dofus{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px}
.qp-dofus button{aspect-ratio:1;border-radius:12px;border:2px solid #6b452033;background:#0001;padding:4px;cursor:pointer}
.qp-dofus button.on{border-color:var(--dc);background:color-mix(in srgb,var(--dc) 25%,#fff)}
.qp-dofus button.off .dofus-ico{filter:grayscale(1) brightness(.5)}
.qp-dofus button:not(.got):not(.on) .dofus-ico{opacity:.75}
.qp-head{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--dc) 35%,#3a2814),#2b1d12);color:#efe0b9;border-radius:14px;padding:10px}
.qp-head .dofus-ico{width:70px;height:70px;flex:none}
.qp-head small{font-size:11px;opacity:.75}.qp-head h2{margin:0;font-size:21px;color:#ffd45a}.qp-head p{margin:2px 0 0!important;font-size:12px!important}
.qp-done,.qp-locked{margin-top:8px;padding:8px 10px;border-radius:10px;font-weight:800;font-size:13px;text-align:center}
.qp-done{background:#2a8f1a33;color:#1f5a0c}.qp-locked{background:#0002}
.qp-steps{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.qs-row{display:flex;align-items:center;gap:8px;border-radius:10px;padding:6px 8px;background:#0001;border:2px solid transparent}
.qs-row.done{opacity:.6}.qs-row.todo{opacity:.55}
.qs-row.cur{background:#fff8;border-color:var(--dc)}
.qs-row.ok{border-color:#2a8f1a;background:#d8f5c8}
.qs-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:#3a2814;color:#ffd45a}
.qs-row.done .qs-n{background:#2a8f1a;color:#fff}
.qs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qs-main b{font-size:13px}
.qs-rw{font-size:11px;opacity:.8;display:flex;align-items:center;gap:3px}.qs-rw img{width:13px;height:13px}
.qs-bar{height:13px}
.qs-cur{font-size:11px;font-weight:800;color:#6a2a9a}.qs-lock{font-size:14px}
.qs-boss{display:flex;gap:10px;align-items:center;border-radius:12px;padding:8px;margin-top:4px;background:linear-gradient(135deg,#3a0f1a,#1a0810);color:#f3d9c4;border:2px solid #6a2030}
.qs-boss.todo{filter:grayscale(.6) brightness(.8)}.qs-boss.cur{border-color:#ff5a3c;box-shadow:0 0 14px #ff5a3c88}.qs-boss.done{border-color:#2a8f1a}
.qb-art{width:84px;height:84px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px #000)}
.qb-info{display:flex;flex-direction:column;gap:2px;font-size:11px;min-width:0}
.qb-info small{color:#ff9d8f;font-weight:900;letter-spacing:1px}.qb-info b{font-size:17px;color:#ffd45a}
.btn.big.boss{font-size:17px;letter-spacing:0;background:linear-gradient(#ff7a4a,#b8261a);border-color:#4a0a06;box-shadow:0 5px 0 #4a0a06;animation:questGlow 1.4s ease-in-out infinite}
.quest-panel .btn.big{font-size:16px;letter-spacing:0;margin-top:6px;max-width:none}
.boss-res .br-dofus{width:120px;height:120px;margin:4px auto;padding:10px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dc) 60%,#fff) 0%,transparent 70%);animation:bob 1.2s infinite alternate}
.br-eff{font-size:13px;opacity:.85;margin:4px 0}
.boss-res h2{font-size:34px;line-height:1.05}
.dofus-slot{min-width:0;overflow:hidden;aspect-ratio:auto;height:auto;padding:5px}
.dofus-slot .dofus-ico{display:block;width:100%;height:auto;aspect-ratio:1}
.dofus-row{margin-bottom:4px}

/* ---------- icônes de la barre du bas (SVG, plus d'emoji) ---------- */
.tabs button .ti{display:grid;place-items:center;width:28px;height:26px;font-size:0}
.nav-ico{width:26px;height:26px;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.nav-ico .ni-f{fill:#7a5a36;stroke:#2b1a0a;stroke-width:1.4;stroke-linejoin:round}
.nav-ico .ni-b{fill:#5a4026;stroke:#2b1a0a;stroke-width:1.4;stroke-linejoin:round}
.nav-ico .ni-l{fill:none;stroke:#e9d6a5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-ico .ni-d{fill:#e9d6a5;stroke:none;opacity:.9}
.nav-ico .ni-h{fill:none;stroke:#fff6;stroke-width:1.4;stroke-linecap:round}
.tabs button.on .nav-ico .ni-f{fill:url(#niGold)}
.tabs button.on .nav-ico .ni-b{fill:#c47a12}
.tabs button.on .nav-ico .ni-l{stroke:#5a2d06;opacity:1}
.tabs button.on .nav-ico .ni-d{fill:#5a2d06;opacity:1}
.tabs button.on .nav-ico{filter:drop-shadow(0 0 5px rgba(255,200,80,.6)) drop-shadow(0 1px 0 rgba(0,0,0,.6));transform:translateY(-1px) scale(1.08)}
.nav-ico{transition:transform .15s}
.nav-ico .ni-f{fill:#8f6c42}.nav-ico .ni-b{fill:#6c4e2e}
.tabs-side:first-child{flex:2}.tabs-side:last-child{flex:3}
.tabs-side button{line-height:1.1;text-align:center}
.tabs-side:first-child,.tabs-side:last-child{flex:1}
.tabs-side:last-child button{font-size:10px;letter-spacing:-.3px}
@media (max-width:400px){.tabs-side:last-child button{font-size:9px}}
#sessionLost{position:fixed;inset:0;z-index:60;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px}
.sl-panel{text-align:center}

/* ---------- choix de la langue (drapeaux) ---------- */
.lang-flags{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.lang-flag{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:10px;border:2px solid #6b452055;background:#0002;color:inherit;font:800 12px var(--font);cursor:pointer;opacity:.75}
.lang-flag svg{width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px #0006;display:block}
.lang-flag.on{opacity:1;border-color:#e5911b;background:#ffd45a33;box-shadow:0 0 8px #ffd45a66}
.lang-flag:hover{opacity:1}
.acc-lang{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0}
.acc-lang .lang-flags{margin:0}
.acc-lang small{font-weight:800;opacity:.8}
#authBody .lang-flag,.acc-lang .lang-flag{color:#3a2814}
/* ---- écran « VS » avant le combat (adversaire de l'arène / boss) ---- */
.vs-screen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));color:#fff;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,10,6,.55),rgba(20,10,6,.85) 55%,rgba(10,20,40,.9)),var(--abg,#2b1d12);animation:vsIn .25s ease-out both}
.vs-screen.out{animation:vsOut .35s ease-in both}
.vs-screen::before{content:"";position:absolute;inset:-20% -20% 45% -20%;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--vc) 55%,transparent) 0%,transparent 60%);pointer-events:none}
.vs-screen.boss::before{background:radial-gradient(ellipse at 50% 60%,rgba(200,60,255,.55) 0%,rgba(255,40,20,.18) 40%,transparent 65%)}
.vs-top{position:relative;font-weight:900;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#ffe6a8;background:rgba(0,0,0,.45);border:1px solid #ffffff30;border-radius:20px;padding:6px 16px;animation:vsDrop .45s .05s cubic-bezier(.2,1.4,.4,1) both}
.vs-screen.boss .vs-top{color:#ffb4ff;border-color:#c93aff88;box-shadow:0 0 18px #c93aff66}
.vs-foe{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;width:100%;animation:vsFoe .55s .1s cubic-bezier(.2,1.3,.4,1) both}
.vs-foe img{position:relative;width:min(62vw,300px);height:min(40vh,300px);object-fit:contain;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px color-mix(in srgb,var(--vc) 70%,transparent))}
.vs-halo{position:absolute;top:50%;left:50%;width:min(70vw,330px);aspect-ratio:1;transform:translate(-50%,-62%);border-radius:50%;border:3px dashed color-mix(in srgb,var(--vc) 80%,#fff);opacity:.45;animation:vsSpin 9s linear infinite}
.vs-screen.boss .vs-halo{border-color:#e08aff}
.vs-name{position:relative;margin-top:6px;font-size:clamp(24px,8vw,38px);font-weight:900;text-align:center;line-height:1.05;-webkit-text-stroke:1.5px #3a1a06;text-shadow:0 4px 0 #000a;color:#fff}
.vs-lvl{position:relative;margin-top:6px;font-weight:800;font-size:14px;background:color-mix(in srgb,var(--vc) 70%,#000);border:2px solid #fff6;border-radius:12px;padding:3px 12px;max-width:92%;text-align:center}
.vs-mid{position:relative;width:100%;display:flex;align-items:center;justify-content:center;margin:6px 0}
.vs-mid::before,.vs-mid::after{content:"";flex:1;height:3px;background:linear-gradient(90deg,transparent,#ffd45a)}
.vs-mid::after{background:linear-gradient(90deg,#ffd45a,transparent)}
.vs-mid span{font-size:48px;font-weight:900;font-style:italic;color:#ffd45a;-webkit-text-stroke:2px #5a2d06;text-shadow:0 4px 0 #000a;padding:0 14px;animation:vsPop .5s .35s cubic-bezier(.2,1.8,.4,1) both}
.vs-me{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#1f5aa0dd,#3d8fe0aa);border:2px solid #9fd0ff;border-radius:16px;padding:8px 18px 8px 8px;animation:vsUp .5s .2s cubic-bezier(.2,1.3,.4,1) both}
.vs-me img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;background:#2a5d93;border:2px solid #e9d6a5}
.vs-me b{display:block;font-size:19px}.vs-me small{font-weight:800;color:#d8ecff}
.vs-load{position:relative;margin-top:12px;font-size:12px;font-weight:700;opacity:.7;animation:vsBlink 1s ease-in-out infinite alternate}
@keyframes vsIn{from{opacity:0}to{opacity:1}}
@keyframes vsOut{to{opacity:0;transform:scale(1.08)}}
@keyframes vsDrop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes vsFoe{from{opacity:0;transform:translateY(-60px) scale(.7)}to{opacity:1;transform:none}}
@keyframes vsUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes vsPop{from{opacity:0;transform:scale(2.6) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes vsSpin{to{transform:translate(-50%,-62%) rotate(360deg)}}
@keyframes vsBlink{from{opacity:.35}to{opacity:.85}}
/* ---- boss d'arène (accueil) ---- */
.arena-boss{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;padding:8px 14px 8px 8px;border-radius:14px;color:#fff;
  background:linear-gradient(110deg,#3a0f4a,#7a1f5a 60%,#a83a2a);border:2px solid #e08aff;box-shadow:0 0 0 2px #0006,0 0 22px #c93aff66;animation:bossPulse 2s ease-in-out infinite}
.arena-boss img{width:70px;height:70px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 0 #0008)}
.arena-boss small{display:block;font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#ffb4ff}
.arena-boss b{display:block;font-size:20px;line-height:1.1}
.arena-boss span{display:block;font-size:12px;font-weight:700;color:#ffe6f4;margin-top:2px}
@keyframes bossPulse{50%{box-shadow:0 0 0 2px #0006,0 0 34px #c93affaa}}
#btnFight.boss-go{background:linear-gradient(#d65aff,#8a1fb8);border-color:#f0c0ff;color:#fff;font-size:21px;letter-spacing:1px;text-shadow:0 2px 0 #0008}
/* ---- arènes : adversaires et boss ---- */
.ar-foes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px}
.ar-boss{display:flex;align-items:center;gap:8px;flex:1 1 180px;background:linear-gradient(110deg,#3a0f4acc,#7a1f5acc);border:1px solid #e08aff99;border-radius:12px;padding:6px 10px 6px 6px;color:#fff}
.ar-boss.done{background:linear-gradient(110deg,#1f4a1fcc,#2f6a2acc);border-color:#9fe08a99}
.ar-boss img{width:48px;height:48px;object-fit:contain;flex:none}
.ar-boss small{display:block;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.ar-boss b{display:block;font-size:15px;line-height:1.1}.ar-boss span{font-size:11px;font-weight:800;color:#ffe6a8}
.ar-opps{flex:2 1 220px;background:#0003;border-radius:12px;padding:5px 8px;color:#fff}
.ar-opps small{display:block;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:2px}
.ar-opps div{display:flex;flex-wrap:wrap;gap:3px}
.ar-opps img{width:34px;height:34px;object-fit:contain;background:radial-gradient(circle,color-mix(in srgb,var(--oc) 45%,transparent) 0%,transparent 70%);border-radius:50%}
.arena.locked .ar-opps img,.arena.locked .ar-boss img{filter:brightness(.35) saturate(0)}
/* ---- résultat d'un boss d'arène ---- */
.br-art img{width:min(46vw,190px);height:min(46vw,190px);object-fit:contain;filter:drop-shadow(0 6px 0 #0008)}
.br-art img.beaten{filter:grayscale(.85) brightness(.75) drop-shadow(0 6px 0 #0008);transform:rotate(-8deg)}
.arena-boss .ab-free{display:block;margin-top:7px;padding:6px 10px;font-size:13px;letter-spacing:0;background:linear-gradient(#f4e2b8,#d8b878);color:#3a2814;border-color:#7a4106}
/* ---- bouton COMBAT (accueil) ---- */
.fight-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;max-width:420px;min-height:86px;padding:8px 10px;cursor:pointer;flex-shrink:0;
  font-family:var(--font);color:#fff;border-radius:20px;border:3px solid #6a3204;
  background:radial-gradient(120% 90% at 50% 0%,#fff3b0 0%,#ffd45a 30%,#f2a42a 62%,#c8621a 100%);
  box-shadow:0 7px 0 #6a3204,0 10px 18px #0008,inset 0 2px 0 #fff8,inset 0 -6px 12px #a0400a66;
  transition:transform .08s,box-shadow .08s;animation:fbGlow 2.4s ease-in-out infinite}
.fight-btn::before{content:"";position:absolute;inset:5px;border-radius:15px;border:2px solid #fff6;pointer-events:none}
.fight-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #6a3204,0 4px 8px #0008,inset 0 2px 0 #fff8}
.fb-shine{position:absolute;top:-40%;bottom:-40%;width:38%;left:-60%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#fff9,transparent);animation:fbShine 3.2s ease-in-out infinite;pointer-events:none}
.fb-ico{width:62px;height:62px;flex:none;filter:drop-shadow(0 3px 0 #6a3204aa);animation:fbSword 2.4s ease-in-out infinite}
.fb-ico svg{width:100%;height:100%;overflow:visible}
.fb-r{transform:scaleX(-1);animation-delay:-1.2s}
.fb-txt{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.fb-txt b{font-size:34px;font-weight:900;letter-spacing:3px;-webkit-text-stroke:2px #5a2a04;paint-order:stroke fill;text-shadow:0 3px 0 #5a2a04,0 0 14px #fff3}
.fb-txt small{margin-top:5px;font-size:12px;font-weight:800;letter-spacing:.5px;color:#5a2a04;background:#fff6;border-radius:10px;padding:2px 10px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fight-btn.boss-go{border-color:#3a0a52;background:radial-gradient(120% 90% at 50% 0%,#ffd0ff 0%,#d65aff 34%,#8a1fb8 70%,#4a0a6a 100%);
  box-shadow:0 7px 0 #3a0a52,0 10px 22px #c93aff77,inset 0 2px 0 #fff8;animation:fbGlowBoss 1.6s ease-in-out infinite}
.fight-btn.boss-go .fb-txt b{font-size:21px;letter-spacing:.5px;white-space:nowrap;-webkit-text-stroke-color:#3a0a52;text-shadow:0 3px 0 #3a0a52}
.fight-btn.boss-go .fb-txt small{color:#3a0a52;font-size:14px}
@keyframes fbShine{0%,55%{left:-60%}85%,100%{left:130%}}
@keyframes fbSword{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-6deg) scale(1.06)}}
.fb-r{animation-name:fbSwordR}
@keyframes fbSwordR{0%,100%{transform:scaleX(-1) rotate(0) scale(1)}50%{transform:scaleX(-1) rotate(-6deg) scale(1.06)}}
@keyframes fbGlow{50%{box-shadow:0 7px 0 #6a3204,0 10px 26px #ffb43a99,inset 0 2px 0 #fff8,inset 0 -6px 12px #a0400a66}}
@keyframes fbGlowBoss{50%{box-shadow:0 7px 0 #3a0a52,0 10px 34px #e08affcc,inset 0 2px 0 #fff8}}
.sb-wait{font-size:22px}
/* ---- lueur dorée (succès de monstre au palier 5000) ---- */
.card.glowing{animation:cardGlow 1.8s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:0 0 6px 1px #ffd45a99,0 0 0 2px #ffd45a}50%{box-shadow:0 0 16px 5px #ffe680cc,0 0 0 2px #fff2b0}}
.rw-glow{background:linear-gradient(90deg,#fff2b0,#ffd45a,#fff2b0);background-size:200% 100%;animation:rwGlow 2s linear infinite}
@keyframes rwGlow{to{background-position:-200% 0}}
/* ---- Battlepass ---- */
.account-row{align-self:stretch;max-width:420px;width:100%;margin:0 auto;display:flex;gap:8px;align-items:stretch}
.account-row .account-chip{flex:1;min-width:0;margin:0}
.bp-btn{position:relative;flex:none;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:12px;cursor:pointer;color:#fff;font:900 13px var(--font);letter-spacing:1px;
  background:linear-gradient(135deg,#3a1f6a,#7a3ab8 55%,#c86aff);border:2px solid #e8c8ff;box-shadow:0 3px 0 #2a0f4a,0 0 12px #c86aff66;text-shadow:0 1px 0 #0008;overflow:hidden}
.bp-btn::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(90deg,transparent,#fff6,transparent);transform:skewX(-20deg);animation:fbShine 4s ease-in-out infinite}
.bp-btn.prem{background:linear-gradient(135deg,#6a3a04,#d8902a 55%,#ffe08a);border-color:#fff2b0;box-shadow:0 3px 0 #4a2a04,0 0 14px #ffd45a88;color:#fff}
.bp-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#ffe680,#f2a42a);color:#7a3a04;font-size:15px;text-shadow:none;box-shadow:0 0 6px #ffd45a}
.bp-lv{background:#0006;border-radius:8px;padding:1px 6px;font-size:12px}
.bp-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e8342a;border:2px solid #fff;color:#fff;font:900 11px/16px var(--font);font-style:normal;text-align:center;animation:bpBadge 1.2s ease-in-out infinite;z-index:1}
@keyframes bpBadge{50%{transform:scale(1.18)}}
.bp-panel{max-width:520px;width:100%;max-height:92vh;display:flex;flex-direction:column;gap:8px;position:relative}
.bp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(120deg,#3a1f6a,#7a3ab8);border-radius:14px;padding:10px 14px;color:#fff;border:2px solid #c8a0ff}
.bp-title small{display:block;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#e8c8ff}
.bp-title b{font-size:24px;letter-spacing:2px;-webkit-text-stroke:1px #2a0f4a;text-shadow:0 2px 0 #2a0f4a}
.bp-level{display:flex;flex-direction:column;align-items:center;line-height:1;background:radial-gradient(circle,#ffe680,#f2a42a);color:#5a2a04;border-radius:12px;padding:6px 12px;border:2px solid #fff2b0}
.bp-level span{font-size:10px;font-weight:900;text-transform:uppercase}.bp-level b{font-size:26px}.bp-level small{font-size:11px;font-weight:800}
.bp-prog{position:relative;height:22px;border-radius:11px;background:#0005;overflow:hidden;border:2px solid #0006}
.bp-prog i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#7a3ab8,#c86aff);transition:width .4s}
.bp-prog span{position:relative;display:block;text-align:center;font-size:12px;font-weight:800;line-height:18px;color:#fff;text-shadow:0 1px 0 #000}
.bp-how{margin:0;font-size:12px;text-align:center;opacity:.85}
.bp-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 16px;border-radius:14px;cursor:pointer;font:900 18px var(--font);color:#5a2a04;
  background:linear-gradient(#fff2b0,#ffd45a 45%,#e5911b);border:3px solid #7a4106;box-shadow:0 5px 0 #7a4106,0 0 18px #ffd45a77;animation:fbGlow 2.4s ease-in-out infinite}
.bp-buy small{display:flex;align-items:center;gap:5px;font-size:16px;background:#fff8;border-radius:10px;padding:3px 10px}.bp-buy small img{width:20px}
.bp-prem-on{text-align:center;font-weight:900;color:#5a2a04;background:linear-gradient(90deg,#fff2b0,#ffd45a,#fff2b0);border-radius:12px;padding:8px;border:2px solid #c8962a}
.bp-all{width:100%}
.bp-cols{display:grid;grid-template-columns:1fr 46px 1fr;gap:6px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;text-align:center;opacity:.8}
.bp-cols span:last-child{color:#a0700a}
.bp-list{overflow-y:auto;flex:1;min-height:160px;display:flex;flex-direction:column;gap:5px;padding-right:2px}
.bp-row{display:grid;grid-template-columns:1fr 46px 1fr;gap:6px;align-items:stretch}
.bp-num{display:grid;place-items:center}
.bp-num b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0004;color:#fff;font-size:15px;border:2px solid #0005}
.bp-row.reached .bp-num b{background:radial-gradient(circle,#c86aff,#5a1f9a);border-color:#e8c8ff}
.bp-row.cur .bp-num b{box-shadow:0 0 0 3px #ffd45a,0 0 12px #ffd45a}
.bp-cell{position:relative;display:flex;align-items:center;gap:6px;min-height:58px;padding:5px 7px;border-radius:10px;font-size:12px;font-weight:800;line-height:1.15;background:#0003;border:2px solid #0004;color:#fff}
.bp-cell.free{background:linear-gradient(120deg,#3b5a7a,#2a3f58)}
.bp-cell.prem{background:linear-gradient(120deg,#8a5a14,#5a3608);border-color:#c8962a88}
.bp-cell canvas{width:46px;height:40px;flex:none}
.bp-cell span{flex:1;min-width:0}
.bp-ri{width:30px;height:30px;object-fit:contain;flex:none}
.bp-ri.card-ri{width:34px;height:34px;border-radius:6px;background:#0004}
.bp-rnd{display:grid;place-items:center;width:30px;height:36px;flex:none;border-radius:6px;font-style:normal;font-weight:900;font-size:18px;border:2px solid #fff8}
.bp-rnd.common{background:#6a8aa8}.bp-rnd.rare{background:#e08a2a}.bp-rnd.epic{background:#a04ad8}.bp-rnd.legendary{background:linear-gradient(135deg,#4ad8c8,#d84a9a)}
.bp-cell.lock{opacity:.55;filter:saturate(.5)}
.bp-cell.plock{filter:grayscale(.6) brightness(.8)}
.bp-cell.done{opacity:.6}
.bp-cell.ready{border-color:#ffd45a;box-shadow:0 0 10px #ffd45a88;animation:questGlow 1.6s ease-in-out infinite}
.bp-get{flex:none;padding:5px 8px;font-size:11px;box-shadow:0 3px 0 #7a4106}
.bp-ok{flex:none;color:#7fe05a;font-size:20px}
.bp-pad{flex:none;font-size:16px}
.bp-confirm{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px;border-radius:inherit;background:#2b1d12f2;color:#fff;text-align:center;font-size:15px}
/* ajustements Battlepass */
.account-row .ac-gear{max-width:15px;overflow:hidden;white-space:nowrap;flex:none}
.bp-btn{padding:5px 9px 5px 6px;font-size:12px;letter-spacing:.5px;gap:5px}
.bp-ico{width:22px;height:22px;font-size:13px}
.bp-prog{flex:none;min-height:22px}
.bp-head,.bp-how,.bp-buy,.bp-prem-on,.bp-all,.bp-cols{flex:none}
.bp-row,.bp-cols{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}
.bp-cell{min-width:0;flex-wrap:wrap;align-content:center}
.bp-cell span{overflow:hidden;text-overflow:ellipsis}
.bp-cell.ready .bp-get{flex-basis:100%;margin-top:3px;padding:4px 6px}
.bp-num b{width:34px;height:34px;font-size:14px}
/* ---- archi-monstre (écran VS) ---- */
.vs-screen.archi::before{background:radial-gradient(ellipse at 50% 60%,rgba(255,210,70,.6) 0%,rgba(255,150,30,.2) 40%,transparent 65%)}
.vs-screen.archi .vs-top{color:#ffe680;border-color:#ffd45a99;box-shadow:0 0 18px #ffd45a77}
.vs-screen.archi .vs-foe img{filter:drop-shadow(0 0 12px #ffd45a) drop-shadow(0 0 26px #ffb43a)}
.vs-screen.archi .vs-halo{border-color:#ffe680;opacity:.7}
/* ---- Arène légendaire ---- */
.arena.legend{border-color:#ffd45a;box-shadow:0 0 0 2px #7a3a04,0 0 26px #ffd45a66}
.arena.legend h3{color:#ffe680;text-shadow:0 2px 0 #3a1a00,0 0 12px #ffd45a}
.lg-txt{font-size:14px;font-weight:700;line-height:1.35;color:#fff4d0;text-shadow:0 1px 0 #000a;margin:10px 4px}
.lg-cur{font-size:13px;font-weight:800;color:#fff;background:#0006;border:1px solid #ffd45a88;border-radius:10px;padding:6px 10px;margin:6px 4px}
.lg-cur b{color:#ffd45a}

/* deck 1 / 2, limites de rareté, tri de la collection */
.deck-tabs{display:inline-flex;gap:4px;margin:0 8px;vertical-align:middle}
.deck-tabs button,.coll-sort button{border:2px solid #7a4106;background:#3a2414;color:#efe0b9;font-weight:900;border-radius:8px;cursor:pointer;font-family:inherit}
.deck-tabs button{width:30px;height:26px;font-size:14px}
.deck-tabs button.on{background:linear-gradient(#ffd45a,#d8902a);color:#3a1d04;border-color:#fff3c4;box-shadow:0 0 8px #ffd45a88}
.deck-lim{font-size:11px;opacity:.8;margin:-4px 0 6px}
.deck-lim .warn{color:#ff8b7d;font-weight:900}
.coll-sort{display:inline-flex;gap:3px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.coll-sort button{font-size:10.5px;padding:3px 6px}
.coll-sort button.on{background:#ffd45a;color:#3a1d04;border-color:#fff3c4}
.sec-title.deck-title,.sec-title.coll-title{justify-content:flex-start;flex-wrap:wrap}
.sec-title.deck-title small{margin-left:auto}
.deck-lim{width:100%;max-width:560px}

/* combat en ligne : recherche d'adversaire */
.pvp-search{text-align:center}
.pvp-search .ps-sub{font-weight:800;font-size:15px;margin:6px 0 2px}
.pvp-search .ps-info{font-size:12px;opacity:.75;min-height:16px;margin:0 0 6px}
.ps-spin{display:flex;justify-content:center;gap:10px;margin:14px 0 8px}
.ps-spin span{width:14px;height:14px;border-radius:50%;background:#ffd45a;box-shadow:0 0 10px #ffd45a88;animation:psb 1.1s infinite ease-in-out}
.ps-spin span:nth-child(2){animation-delay:.18s}.ps-spin span:nth-child(3){animation-delay:.36s}
@keyframes psb{0%,80%,100%{transform:scale(.45);opacity:.45}40%{transform:scale(1);opacity:1}}