/*! Rotgate — thème : soleil rouge, ruines, zombie. Surcharge de style.css. */
:root{
  --bg:#0b0305; --panel:#1a0b0a; --panel2:#2a1210; --line:#5a2418;
  --text:#f6e6dc; --muted:#b49890; --gold:#ff8a44; --gold-d:#8a2a14;
  --blue:#5aa9ff; --red:#ff5a4a; --ok:#9be15d; --warn:#ffb347;
  --f-display:'Creepster','Almendra SC',Georgia,serif;
}
body{background:#050102}
.brand{font-family:var(--f-display);letter-spacing:.06em;color:var(--gold)}
.veil{background:radial-gradient(ellipse at 50% 30%,rgba(90,22,12,.55),rgba(6,2,3,.94) 70%)}
.card{border-color:var(--gold-d);box-shadow:0 20px 60px rgba(0,0,0,.75),0 0 40px rgba(255,90,40,.12)}
.card h1,.card h2{letter-spacing:.07em;text-shadow:0 0 18px rgba(255,110,50,.4)}
.card.home{background:radial-gradient(circle at 50% 0%,rgba(255,110,50,.16),transparent 55%),var(--panel)}
.card.home h1{font-size:clamp(2.4rem,10vw,3.6rem);color:#ffb27a;text-shadow:0 0 22px rgba(255,110,50,.5),0 3px 0 #4a0f08}
.card.home .logo{filter:drop-shadow(0 6px 18px rgba(255,90,40,.45))}
.eras li{border-color:var(--gold-d);color:var(--gold)}
.zrec{margin:.2rem 0 .8rem;font-weight:700;color:var(--red);letter-spacing:.04em}
.btn.gold{background:linear-gradient(#ff9a54,#d23a1a);color:#1a0503;border-color:#ffc08a}
.btn.gold:hover{filter:brightness(1.08)}
.diffs button[aria-pressed="true"]{border-color:var(--gold);background:#3a160f}
.pw{--c:var(--gold)}
#obj{border-color:var(--gold-d)}
#tuto{display:none}

.step{margin:0 0 .2rem;font:700 .72rem var(--f-body);text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.sub2{margin:.1rem 0 .6rem;color:var(--muted)}
.recap{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:.6rem 0 .9rem;padding:.8rem .9rem;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.recap dt{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.recap dd{margin:0;font-weight:700}
.hint2{color:var(--muted);margin:.2rem 0 .9rem;text-align:center;font-style:italic}
#veil .lvs{}

/* Accueil plein écran sur smartphone */
@media (max-width:720px){
  #veil:has(.card.home:not([hidden])){padding:0;align-items:stretch}
  #veil .card.home:not([hidden]){width:100%;max-width:none;min-height:100%;box-sizing:border-box;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;
    padding:calc(1.4rem + env(safe-area-inset-top,0px)) 1.3rem calc(1.2rem + env(safe-area-inset-bottom,0px))}
  #veil .card.home .logo{width:min(46vw,200px);height:auto;margin:0 auto 1rem}
  #veil .card.home h1{margin-top:.2rem}
  #veil .card.home .eras{margin:1rem 0 1.6rem}
  #veil .card.home .menu{width:100%;max-width:none;margin-top:auto}
  #veil .card.home .foot{margin-top:1.4rem}
}

.zgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:.5rem 0}
.zt{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font:700 1.05rem var(--f-body);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;cursor:pointer;padding:0}
.zt i{position:absolute;top:1px;right:4px;font-style:normal;font-size:.7rem;color:var(--gold)}
.zt.boss{border-color:#a03a2a;color:#ffb27a}
.zt.done{background:#2a1a10}
.zt.done::after{content:'✓';position:absolute;bottom:1px;right:5px;font-size:.65rem;color:var(--ok)}
.zt[aria-pressed="true"]{border-color:var(--gold);background:#3a160f;box-shadow:0 0 0 1px var(--gold)}
.zt:disabled{opacity:.4;cursor:not-allowed;font-size:.85rem}
#lvDesc{min-height:5.2em}
#veil{align-items:flex-start}
#veil .card{margin:auto}
.zgrid{max-height:min(44vh,360px);overflow:auto;padding:2px}

/* Écran de choix de la langue */
.langveil{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 20%,#4a1410,#0b0305 70%)}
.langveil[hidden]{display:none}
.langcard{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem}
.langlogo{width:min(34vw,140px);height:auto;border-radius:24px;filter:drop-shadow(0 6px 22px rgba(255,90,40,.45))}
.langtitle{margin:.2rem 0 0;font:400 clamp(2.2rem,9vw,3.2rem) var(--f-display);color:#ffb27a;letter-spacing:.06em;text-shadow:0 0 22px rgba(255,110,50,.5),0 3px 0 #4a0f08}
.langhint{margin:0 0 .6rem;color:var(--muted)}
.langbtn{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;gap:.8rem;padding:.6rem 1rem;font:700 1.1rem var(--f-body);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:12px;cursor:pointer;min-height:52px}
.langbtn:hover,.langbtn:focus-visible{border-color:var(--gold);background:#3a160f;outline:none}
.langbtn svg{flex:none;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ===== Cartes de zombies ===== */
.zcard{--rc:#9aa8a2;position:relative;box-sizing:border-box;width:12.5em;font-size:16px;padding:.35em;border-radius:.7em;background:linear-gradient(170deg,#241210,#0e0605);border:.2em solid var(--rc);box-shadow:0 0 1.1em rgba(0,0,0,.6),0 0 .9em color-mix(in srgb,var(--rc) 45%,transparent);color:var(--text);text-align:center;font-family:var(--f-body)}
.r-c{--rc:#9aa8a2}.r-u{--rc:#5fd070}.r-r{--rc:#4aa0ff}.r-e{--rc:#b86aff}.r-l{--rc:#ffc83a}
.zc-top{display:flex;justify-content:space-between;align-items:center;font-size:.8em;padding:0 .15em .25em}
.zc-lv{display:inline-flex;min-width:1.9em;height:1.9em;align-items:center;justify-content:center;border-radius:50%;background:var(--rc);color:#120808;font-weight:800}
.zc-rar{color:var(--rc);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85em}
.zc-art{position:relative;border-radius:.4em;overflow:hidden;border:.12em solid rgba(0,0,0,.65)}
.zc-art svg{display:block;width:100%;height:auto}
.zc-shine{display:none;position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);background-size:260% 100%;animation:zcShine 3.2s linear infinite}
.r-e .zc-shine,.r-l .zc-shine{display:block}
@keyframes zcShine{from{background-position:130% 0}to{background-position:-130% 0}}
.zc-name{font:400 1.3em var(--f-display);letter-spacing:.04em;color:var(--rc);padding:.25em 0 .05em;line-height:1.1;min-height:2.3em;display:flex;align-items:center;justify-content:center}
.zc-sub{font-size:.7em;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding-bottom:.2em}
.zc-cnt{position:absolute;right:.5em;bottom:.45em;font-style:normal;font-weight:800;font-size:.8em;background:var(--rc);color:#120808;border-radius:.7em;padding:0 .45em}
.r-l{box-shadow:0 0 1.4em rgba(255,200,58,.55)}
.zc-back{aspect-ratio:12.5/20;background:radial-gradient(circle at 50% 40%,#5a1a12,#14080a 75%);border-color:#ff8a44;display:flex;align-items:center;justify-content:center}
.zc-bk{width:70%}.zc-bk svg{width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,90,40,.6))}
.zc-lock{aspect-ratio:12.5/20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;opacity:.55;border:.2em dashed #3a1c14;background:#120807;box-shadow:none}
.zc-lock b{font-size:2em;color:var(--muted)}.zc-lock span{font:400 4em var(--f-display);color:#4a2418;line-height:1}
.zcol{max-width:560px}
.zcrar{display:flex;flex-wrap:wrap;gap:.3rem .8rem;list-style:none;margin:0 0 .6rem;padding:0;font-size:.8rem;color:var(--rc)}
.zcgrid{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem;max-height:min(52vh,470px);overflow:auto;padding:2px;margin:.3rem 0}
.zcb{container-type:inline-size;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-align:center}
.zcb.lock{cursor:default}
.zcard.sm{width:100%;font-size:8cqw;padding:.3em;border-width:.16em}
.zcz{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;cursor:pointer}
.zcz[hidden]{display:none}
.zcard.big{font-size:min(24px,6.2vw,3.7vh)}
.zcz-h{margin:0;color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}

/* ===== Fin de niveau ===== */
.zend{position:fixed;inset:0;z-index:85;overflow:hidden;background:#07030a;font-family:var(--f-body);color:var(--text)}
.zend[hidden]{display:none}
.ze-sky,.ze-dawn{position:absolute;inset:0}
.ze-sky{background:linear-gradient(180deg,#12040a 0%,#3a0e12 60%,#7a2410 100%)}
.ze-dawn{background:linear-gradient(180deg,#24102e 0%,#8a3428 58%,#e08a3a 100%);opacity:0;animation:zeDawn 3.4s ease-in forwards}
@keyframes zeDawn{to{opacity:.92}}
.ze-sun{position:absolute;left:50%;bottom:8vh;width:min(120vmin,760px);aspect-ratio:1;margin-left:calc(min(120vmin,760px)/-2);transform:translateY(75%);animation:zeSun 3.4s cubic-bezier(.25,.75,.25,1) forwards}
@keyframes zeSun{to{transform:translateY(-4%)}}
.ze-sun svg{width:100%;height:100%;overflow:visible}
.ze-rays{transform-origin:100px 100px;animation:zeSpin 40s linear infinite;opacity:.4}
@keyframes zeSpin{to{transform:rotate(360deg)}}
.sun-g{opacity:0;animation:zeIn 3s .2s forwards}
.sun-r{animation:zeOut 3s .2s forwards}
@keyframes zeIn{to{opacity:1}}@keyframes zeOut{to{opacity:0}}
.ze-hill{position:absolute;left:0;bottom:0;width:100%;height:24vh;z-index:2}
.ze-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.ze-e{position:absolute;bottom:-10px;border-radius:50%;background:#ffb04a;box-shadow:0 0 8px #ff8a2a;opacity:0;animation:zeEmber 4s linear infinite}
@keyframes zeEmber{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(30px,-105vh);opacity:0}}
.ze-b{position:absolute;border-radius:50%;opacity:0;animation:zeBurst 1.4s ease-out forwards;box-shadow:0 0 10px currentColor}
@keyframes zeBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.ze-flash{position:absolute;inset:0;z-index:2;background:#fff6c0;opacity:0;pointer-events:none}
.zend.flash .ze-flash{animation:zeFlash .9s ease-out}
@keyframes zeFlash{0%{opacity:.8}100%{opacity:0}}
.ze-main{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:14px 16px 18px;box-sizing:border-box;text-align:center;overflow:auto}
.ze-banner{animation:zePop .9s .3s both cubic-bezier(.2,1.5,.4,1)}
@keyframes zePop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ze-banner small{display:block;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ffd98a;font-size:.8rem}
.ze-banner h2{margin:.1rem 0;font:400 clamp(2.4rem,11vw,4.2rem) var(--f-display);letter-spacing:.06em;color:#fff0c4;text-shadow:0 0 26px rgba(255,170,60,.8),0 3px 0 #5a1608}
.ze-banner p{margin:0;color:#fff0dc;font-size:.95rem;text-shadow:0 0 8px #000,0 1px 3px #000}
.ze-stage{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.ze-card{--ce:min(17px,4.6vw,1.8vh);font-size:var(--ce);width:12.5em;perspective:1000px;opacity:0;transform:translateY(30px) scale(.85);transition:opacity .7s,transform .7s}
.zend.p1 .ze-card{opacity:1;transform:none}
.ze-in{position:relative;width:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,1.25,.4,1)}
.zend.p2 .ze-in{transform:rotateY(180deg)}
.ze-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;width:100%}
.ze-face.front{position:absolute;inset:0;transform:rotateY(180deg)}
.ze-face .zcard{font-size:inherit}
.ze-face.back .zcard,.ze-face.front .zcard{width:100%}
.zend.p1:not(.p2) .ze-in{animation:zeWob 1.4s ease-in-out infinite}
@keyframes zeWob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.zend.miss.p2 .ze-in{transform:none;animation:zeMiss 1s forwards}
@keyframes zeMiss{0%{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(9px)}45%{transform:translateX(-7px)}60%{transform:translateX(5px)}100%{transform:translateX(0);opacity:.28;filter:grayscale(1)}}
.ze-cap{margin:0;min-height:2.6em;max-width:330px;padding:.3em .8em;border-radius:.8em;background:rgba(8,3,4,.72);font-weight:700;color:var(--gold);opacity:0;transition:opacity .5s;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.zend.p3 .ze-cap{opacity:1}
.ze-cap.r-c,.ze-cap.r-u,.ze-cap.r-r,.ze-cap.r-e,.ze-cap.r-l{color:var(--rc)}
.ze-btns{width:min(360px,100%);display:flex;flex-direction:column;gap:.45rem;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.zend.p3 .ze-btns{opacity:1;transform:none;pointer-events:auto}
.ze-next{animation:zeGlow 1.6s ease-in-out infinite}
.ze-next small{color:#4a2a0a;font-weight:700}
@keyframes zeGlow{0%,100%{box-shadow:0 0 0 rgba(255,138,68,0)}50%{box-shadow:0 0 22px rgba(255,138,68,.8)}}
.ze-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.ze-row .btn{text-align:center;padding:.4rem .3rem;font-size:.82rem;background:rgba(10,4,6,.7)}
.zend.skip .ze-banner,.zend.skip .ze-card{animation-duration:.01s;transition-duration:.2s}
@media (max-height:640px){.ze-banner h2{font-size:2.3rem}.ze-card{--ce:min(14px,4.2vw,1.7vh)}}
@media (prefers-reduced-motion:reduce){.ze-e,.ze-rays,.zc-shine,.ze-next{animation:none}}

/* ===== Défaite ===== */
.ze-fire,.ze-horde{display:none;position:absolute;left:0;bottom:0;width:100%;height:24vh;z-index:2;pointer-events:none}
.zend.lose .ze-fire,.zend.lose .ze-horde{display:block}
.zend.lose .ze-horde{z-index:3}
.zend.lose .ze-flag{display:none}
.zend.lose{animation:zeShake .7s .5s}
@keyframes zeShake{0%,100%{transform:none}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,3px)}60%{transform:translate(4px,-3px)}80%{transform:translate(-2px,1px)}}
.zend.lose .ze-sky{background:linear-gradient(180deg,#040102 0%,#260508 58%,#5a1208 100%)}
.zend.lose .ze-dawn,.zend.lose .ze-stage,.zend.lose .ze-rays,.zend.lose .sun-g{display:none}
.zend.lose .sun-r{animation:none;opacity:1}
.zend.lose .ze-sun{transform:translateY(-22%);opacity:.9;filter:brightness(.8) saturate(1.2);animation:zeMoon 3.6s ease-in forwards}
@keyframes zeMoon{to{transform:translateY(46%)}}
.zend.lose .ze-banner h2{color:#ff6a4a;text-shadow:0 0 26px rgba(255,40,20,.85),0 3px 0 #2a0404;font-size:clamp(2rem,9.5vw,3.5rem);line-height:1.05}
.zend.lose .ze-banner small{color:#ff9a7a}
.zend.lose .ze-banner p{color:#f0cfc4}
.zend.lose .ze-e{background:#9a9088;box-shadow:none;bottom:auto;top:-10px;animation-name:zeAsh}
@keyframes zeAsh{0%{transform:translate(0,0);opacity:0}15%{opacity:.75}100%{transform:translate(-45px,105vh);opacity:0}}
.ze-ff{transform-box:fill-box;transform-origin:50% 100%;animation:zeFlick .55s ease-in-out infinite alternate}
.ze-fire g:nth-child(2n) .ze-ff{animation-duration:.4s}
@keyframes zeFlick{from{transform:scale(1,.8)}to{transform:scale(1.1,1.15)}}
.ze-horde .hl{animation:zeMarchL 3.2s ease-out both}.ze-horde .hr{animation:zeMarchR 3.2s ease-out both}
@keyframes zeMarchL{from{transform:translateX(-120px)}to{transform:translateX(0)}}
@keyframes zeMarchR{from{transform:translateX(120px)}to{transform:translateX(0)}}
.ze-row{display:flex;gap:.4rem}.ze-row .btn{flex:1}
@media (prefers-reduced-motion:reduce){.zend.lose{animation:none}.ze-ff,.ze-horde .hl,.ze-horde .hr{animation:none}}

/* ===== Nouveaux pouvoirs ===== */
.zpow{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(4,1,2,.82);overflow:auto}
.zpow[hidden]{display:none}
.zp-card{width:min(420px,100%);box-sizing:border-box;padding:1rem 1.1rem 1.1rem;border-radius:14px;background:radial-gradient(circle at 50% 0%,rgba(255,110,50,.16),transparent 60%),var(--panel);border:1px solid var(--gold);box-shadow:0 0 40px rgba(255,100,40,.3);text-align:center;animation:zpIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes zpIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.zp-kick{margin:0;font:800 .72rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.zp-card h2{margin:.15rem 0 .5rem;font:400 clamp(1.8rem,8vw,2.4rem) var(--f-display);letter-spacing:.06em;color:#ffd9b0;text-shadow:0 0 16px rgba(255,110,50,.5)}
.zp-scene{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0a0608}
.zp-svg{display:block;width:100%;height:auto}
.zp-eff{margin:.7rem 0 .2rem;font-weight:700}
.zp-how{margin:0 0 .4rem;color:var(--muted)}
.zp-cost{margin:0 0 .8rem;color:var(--gold);font-size:.85rem;font-weight:700}
.pw.fresh{animation:pwFresh 1.1s ease-in-out infinite;border-color:var(--gold)!important}
@keyframes pwFresh{0%,100%{box-shadow:0 0 0 0 rgba(255,138,68,.7)}50%{box-shadow:0 0 0 7px rgba(255,138,68,0)}}
.zp-svg *{transform-box:fill-box;transform-origin:center}
.zp-svg g[transform] *{}
.zp-hp{transform-origin:left center!important;animation:zpHp 2.8s ease-out infinite}
@keyframes zpHp{0%{transform:scaleX(.2)}60%,100%{transform:scaleX(1)}}
.zp-aura,.zp-ring,.zp-nova{animation:zpAura 2.6s ease-out infinite}
@keyframes zpAura{0%{transform:scale(.2);opacity:1}100%{transform:scale(1);opacity:0}}
.zp-nova{animation-duration:2.2s}
.zp-rise{animation:zpRise 2.2s ease-out infinite}
@keyframes zpRise{0%{transform:translate(var(--x,0),0);opacity:0}20%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.zp-tgt{animation:zpTgt 2.6s ease-in-out infinite}
@keyframes zpTgt{0%{transform:scale(.3);opacity:0}25%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
.zp-beam{stroke-dasharray:30 200;animation:zpBeam 2.6s linear infinite;opacity:0}
@keyframes zpBeam{0%,15%{stroke-dashoffset:60;opacity:0}20%{opacity:1}45%{stroke-dashoffset:-150;opacity:1}46%,100%{opacity:0}}
.zp-boom{opacity:0;animation:zpBoom 2.6s ease-out infinite}
@keyframes zpBoom{0%,40%{transform:scale(.2);opacity:0}46%{transform:scale(1.3);opacity:.95}70%,100%{transform:scale(2.4);opacity:0}}
.zp-die{animation:zpDie 2.6s ease-in infinite}
@keyframes zpDie{0%,45%{opacity:1;transform:none}52%{transform:translateX(3px)}58%{transform:translateX(-3px)}75%,100%{opacity:0;transform:translateY(8px)}}
.zp-drop{animation:zpDrop 2.8s ease-in infinite}
@keyframes zpDrop{0%{transform:translateY(-90px);opacity:0}15%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}
.zp-dust{opacity:0;animation:zpDust 2.8s ease-out infinite}
@keyframes zpDust{0%,58%{transform:scale(.3);opacity:0}64%{opacity:.8}100%{transform:scale(1.8);opacity:0}}
.zp-bolt{opacity:0;animation:zpBolt 2.2s linear infinite}
@keyframes zpBolt{0%,18%{opacity:0}20%,26%{opacity:1}28%,44%{opacity:0}46%,50%{opacity:1}52%,100%{opacity:0}}
.zp-flash{opacity:0;animation:zpFl 2.2s linear infinite}
@keyframes zpFl{0%,18%{opacity:0}20%{opacity:.5}26%,44%{opacity:0}46%{opacity:.4}52%,100%{opacity:0}}
.zp-walk{animation:zpWalk 3s linear infinite}
@keyframes zpWalk{0%{transform:translateX(70px);opacity:1}40%{transform:translateX(0);opacity:1}60%,100%{transform:translateX(-4px);opacity:0}}
.zp-fl{transform-origin:50% 100%!important;animation:zpFl2 .5s ease-in-out infinite alternate}
@keyframes zpFl2{from{transform:scale(.8,.7)}to{transform:scale(1.15,1.2)}}
.zp-slow{animation:zpSlow 2.8s linear infinite}
@keyframes zpSlow{0%{transform:translateX(60px)}30%{transform:translateX(0)}100%{transform:translateX(0)}}
.zp-ice{opacity:0;animation:zpIce 2.8s ease-out infinite}
@keyframes zpIce{0%,22%{opacity:0;transform:scale(.4)}30%,90%{opacity:1;transform:scale(1)}100%{opacity:0}}
.zp-dome{animation:zpDome 1.6s ease-in-out infinite alternate;transform-origin:50% 100%!important}
@keyframes zpDome{from{opacity:.65}to{opacity:1}}
.zp-bump{animation:zpBump 2.4s ease-in-out infinite}
@keyframes zpBump{0%{transform:translateX(70px)}38%,42%{transform:translateX(0)}60%,100%{transform:translateX(26px)}}
.zp-spark{opacity:0;animation:zpSp 2.4s ease-out infinite}
@keyframes zpSp{0%,36%{opacity:0;transform:scale(.3)}42%{opacity:1;transform:scale(1.2)}60%,100%{opacity:0;transform:scale(1.7)}}
.zp-arc{stroke-dasharray:6 5;animation:zpArc 1.2s linear infinite}
@keyframes zpArc{from{stroke-dashoffset:0;opacity:.4}50%{opacity:1}to{stroke-dashoffset:22;opacity:.4}}
.zp-flyl{animation:zpFlyL 2.2s ease-out infinite}.zp-flyr{animation:zpFlyR 2.2s ease-out infinite}
@keyframes zpFlyL{0%,28%{transform:none;opacity:1}100%{transform:translate(-50px,-20px) rotate(-60deg);opacity:0}}
@keyframes zpFlyR{0%,28%{transform:none;opacity:1}100%{transform:translate(50px,-20px) rotate(60deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.zp-svg *{animation:none!important}}

#bSelFab{position:fixed;right:10px;top:300px;z-index:30;width:50px;height:50px;border-radius:14px;border:1px solid rgba(255,140,80,.6);background:rgba(20,10,8,.78);color:#ffb27a;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:pointer;-webkit-tap-highlight-color:transparent}
#bSelFab[hidden]{display:none}
#bSelFab:active{background:rgba(255,120,60,.35)}

.zt svg{position:absolute;inset:0;width:100%;height:100%;border-radius:7px;overflow:hidden}
.zt b{position:relative;z-index:1;text-shadow:0 1px 3px #000,0 0 6px #000}
.zt i{z-index:2;text-shadow:0 1px 2px #000}
.zt.done::after{z-index:2;text-shadow:0 1px 2px #000}
.zt:not(:disabled){background:#000}

.zp-stun{animation:zpStun .12s steps(2) infinite;filter:drop-shadow(0 0 4px #7af0ff)}
@keyframes zpStun{from{transform:translateX(-1px)}to{transform:translateX(1px)}}
.zp-flash2{opacity:0;animation:zpFl3 2.2s linear infinite}
@keyframes zpFl3{0%,16%{opacity:0}20%{opacity:.85}34%,100%{opacity:0}}

.zp-pop{transform-origin:50% 100%!important;animation:zpPop 3s ease-out infinite}
@keyframes zpPop{0%{transform:scaleY(.04);opacity:0}16%{transform:scaleY(1.07);opacity:1}24%,88%{transform:scaleY(1);opacity:1}100%{opacity:0}}
.zp-pulse{animation:zpPulse 1s ease-in-out infinite alternate}
@keyframes zpPulse{from{transform:scale(.9);opacity:.7}to{transform:scale(1.12);opacity:1}}
.zp-out{animation:zpOut 3s linear infinite;opacity:0}
@keyframes zpOut{0%,24%{transform:translateX(-30px);opacity:0}30%{opacity:1}100%{transform:translateX(120px);opacity:1}}
.zp-drive{animation:zpDrive 2.4s linear infinite;opacity:0}
@keyframes zpDrive{0%,20%{transform:translateX(0);opacity:0}28%{opacity:1}100%{transform:translateX(200px);opacity:1}}
.zp-drive2{animation:zpDrive2 2.8s ease-in infinite}
@keyframes zpDrive2{0%{transform:translateX(-40px)}100%{transform:translateX(280px)}}
.zp-hov{animation:zpHov 1.2s ease-in-out infinite alternate}
@keyframes zpHov{from{transform:translate(190px,58px)}to{transform:translate(190px,64px)}}
.zp-spin{animation:zpSpinS .12s linear infinite}
@keyframes zpSpinS{from{transform:scaleX(1)}to{transform:scaleX(.55)}}

#bHeroFab{position:fixed;right:10px;top:calc(50% + 62px);z-index:30;width:50px;height:50px;border-radius:14px;border:1px solid rgba(255,214,120,.8);background:rgba(40,26,6,.85);color:#ffd878;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,200,90,.35);cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
#bHeroFab[hidden]{display:none}
#bHeroFab small{font:700 .62rem var(--f-body);line-height:1;margin-top:1px}
#bHeroFab:disabled{opacity:.55;box-shadow:none;cursor:default}
#bHeroFab:not(:disabled){animation:pwFresh 1.6s ease-in-out infinite}
/* tutoriel animé */
.zp-walkL{animation:zpWalkL 3s linear infinite}
@keyframes zpWalkL{0%{transform:translateX(-70px);opacity:1}40%{transform:translateX(0);opacity:1}60%,100%{transform:translateX(4px);opacity:.9}}
.zp-slot{animation:ztSlot 4s linear infinite}
@keyframes ztSlot{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
.zp-bpop{transform-origin:50% 100%!important;animation:ztBpop 4s ease-out infinite}
@keyframes ztBpop{0%,45%{transform:scaleY(.04);opacity:0}53%{transform:scaleY(1.08);opacity:1}58%,92%{transform:scaleY(1);opacity:1}100%{opacity:0}}
.zp-finger,.zp-finger2,.zp-finger3,.zp-finger4,.zp-finger5a{animation:ztFing 4s ease-in-out infinite}
@keyframes ztFing{0%{transform:translate(46px,34px);opacity:0}8%{opacity:1}30%{transform:translate(0,0);opacity:1}35%{transform:translate(0,2px) scale(.88)}42%{transform:translate(0,0);opacity:1}55%,100%{transform:translate(0,0);opacity:0}}
.zp-finger5b{animation:ztFing5b 4s ease-in-out infinite;opacity:0}
@keyframes ztFing5b{0%,34%{transform:translate(40px,30px);opacity:0}38%{opacity:1}48%{transform:translate(0,0);opacity:1}52%{transform:translate(0,2px) scale(.88)}60%{opacity:1}72%,100%{opacity:0}}
.zp-ripple,.zp-ripple2,.zp-ripple3,.zp-ripple4,.zp-ripple5{opacity:0;animation:ztRip 4s ease-out infinite}
@keyframes ztRip{0%,32%{transform:scale(.4);opacity:0}35%{opacity:.95}58%,100%{transform:scale(2.2);opacity:0}}
.zp-out2{opacity:0;animation:ztOut2 4s linear infinite}
@keyframes ztOut2{0%,40%{transform:translateX(-30px);opacity:0}46%{opacity:1}100%{transform:translateX(120px);opacity:1}}
.zp-rise2{opacity:0;animation:ztRise2 4s ease-out infinite}
@keyframes ztRise2{0%,34%{transform:translateY(0);opacity:0}40%{opacity:1}75%,100%{transform:translateY(-26px);opacity:0}}
.zp-march{animation:ztMarch 4s ease-in-out infinite}
@keyframes ztMarch{0%,36%{transform:translateX(0)}78%,100%{transform:translateX(120px)}}
.zp-die3{animation:ztDie3 4s ease-in infinite}
@keyframes ztDie3{0%,78%{opacity:1;transform:none}84%{transform:translateX(3px)}100%{opacity:0;transform:translateY(8px)}}
.zp-tgt2{opacity:0;animation:ztTgt2 4s ease-out infinite}
@keyframes ztTgt2{0%,34%{opacity:0;transform:scale(.3)}40%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
.zp-hl{animation:none}
.zp-ringb{opacity:0;animation:ztRing 4s ease-out infinite}
@keyframes ztRing{0%,34%{opacity:0;transform:scale(.4)}42%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
.zp-btnp{animation:ztBtn 4s ease-in-out infinite}
@keyframes ztBtn{0%,33%{transform:scale(1)}36%{transform:scale(.88)}42%,100%{transform:scale(1)}}
.zp-die4{animation:ztDie4 4s ease-in infinite}
@keyframes ztDie4{0%,58%{opacity:1;transform:none}64%{transform:translateX(3px)}78%,100%{opacity:0;transform:translateY(8px)}}
.zp-beam4,.zp-beam5{stroke-dasharray:30 200;opacity:0;animation:ztBeam 4s linear infinite}
.zp-beam5{animation-duration:3s}
@keyframes ztBeam{0%,50%{stroke-dashoffset:60;opacity:0}54%{opacity:1}66%{stroke-dashoffset:-150;opacity:1}67%,100%{opacity:0}}
.zp-tgt4{opacity:0;animation:ztTgt4 4s ease-out infinite}
@keyframes ztTgt4{0%,48%{opacity:0;transform:scale(.3)}54%,74%{opacity:1;transform:scale(1)}100%{opacity:0}}
.zp-die5{animation:ztDie5 3s ease-in infinite}
@keyframes ztDie5{0%,50%{opacity:1}56%{transform:translateY(-3px)}80%,100%{opacity:0;transform:translateY(20px)}}
.zp-stomp{transform-origin:50% 100%!important;animation:ztStomp 3s ease-in infinite}
@keyframes ztStomp{0%,35%{transform:scaleY(1)}42%{transform:scaleY(.86)}50%,100%{transform:scaleY(1)}}
.zp-quake{opacity:0;animation:ztQuake 3s ease-out infinite}
@keyframes ztQuake{0%,38%{transform:scale(.2);opacity:0}44%{opacity:.95}80%,100%{transform:scale(1.5);opacity:0}}
.zp-fallu{transform-origin:50% 100%!important;animation:ztFall 3s ease-in-out infinite}
@keyframes ztFall{0%,40%{transform:none}48%,66%{transform:rotate(88deg) translateY(-2px)}82%,100%{transform:none}}
.zp-cardin{animation:ztCard 4s ease-out infinite}
@keyframes ztCard{0%{transform:scale(.2) rotate(-12deg);opacity:0}18%{transform:scale(1.1) rotate(3deg);opacity:1}28%,90%{transform:scale(1) rotate(0);opacity:1}100%{opacity:0}}
.zp-sparkb{opacity:0;animation:zpSp 1.6s ease-out infinite}
.zt-dots{display:flex;gap:6px;justify-content:center;margin:.4rem 0 .7rem}
.zt-dots i{width:8px;height:8px;border-radius:50%;background:#4a3a34}
.zt-dots i.on{background:var(--gold);box-shadow:0 0 6px rgba(255,160,70,.7)}
.zt-row{display:flex;gap:.5rem}.zt-row .btn{flex:1}
.zt-skip{margin-top:.5rem;width:100%;font-size:.8rem}

.pw[data-left]{position:relative}
.pw[data-left]::before{content:attr(data-left);position:absolute;top:2px;left:5px;font:800 .58rem var(--f-body);color:#ffd27a;text-shadow:0 1px 2px #000;z-index:1}
.pw[data-left="0/3"]::before{color:#ff6a5a}

#side{direction:rtl}#side .pw{direction:ltr}
.zq{display:flex;gap:6px;flex-wrap:wrap;min-height:34px;align-items:center}
.zq .qi{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:rgba(20,12,10,.8);color:#ffb27a}
.zq .qi.first{border-color:#ff8c50}
.zq .qi b{position:absolute;right:-5px;top:-6px;min-width:15px;height:15px;border-radius:8px;background:#ff8c50;color:#1a0c06;font:800 .62rem/15px var(--f-body);text-align:center;padding:0 3px}
.zq .qi i{position:absolute;left:3px;right:3px;bottom:2px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.zq .qi i::before{content:'';display:block;height:100%;width:var(--w,0);background:#ffb27a}

.pw[data-left]::before{top:auto;bottom:2px;left:4px;font-size:.54rem}
#intro .ibar{display:none}
#intro #iSkip{bottom:14px}
#intro .icap{bottom:8%}

.buildgrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.buildgrid .btn.bico{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:.55rem .35rem}
.buildgrid .btn.bico svg{color:#ffb27a;margin-bottom:.1rem}
.buildgrid .btn.bico:disabled svg{opacity:.45}
.buildgrid .btn.bico small{display:block}
.row .btn.bico{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:.55rem .35rem}
.row .btn.bico svg{color:#ffb27a;margin-bottom:.1rem}
.row .btn.bico:disabled svg{opacity:.45}
.row .btn.bico small{display:block}
.row:has(>.btn.bico){display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,176px));justify-content:start;gap:.5rem}
.row:has(>.btn.bico)>.btn.bico{width:100%;min-height:104px;justify-content:flex-start}
.btn[hidden]{display:none!important}
.langsw{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}
.langsw button{padding:.3rem .45rem;background:var(--panel2);border:1px solid var(--line);border-radius:9px;cursor:pointer;opacity:.55;line-height:0}
.langsw button.on{opacity:1;border-color:var(--gold)}
.langsw svg{border-radius:3px}
#veil .card.home .foot,.card.home .foot{display:block;width:100%;text-align:center;margin-left:auto;margin-right:auto}
#devName{cursor:default;-webkit-tap-highlight-color:transparent;user-select:none}
.zp-flapR{transform-box:fill-box;transform-origin:0% 60%;animation:zpFlapR .28s ease-in-out infinite alternate}
.zp-flapL{transform-box:fill-box;transform-origin:100% 60%;animation:zpFlapL .28s ease-in-out infinite alternate}
@keyframes zpFlapR{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}
@keyframes zpFlapL{from{transform:rotate(24deg)}to{transform:rotate(-18deg)}}

.hfab{position:fixed;right:122px;z-index:30;width:50px;height:50px;border-radius:14px;border:1px solid rgba(255,214,120,.8);background:rgba(40,26,6,.85);color:#ffd878;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,200,90,.35);cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.hfab[hidden]{display:none}
.hfab .hi{display:flex}
.hfab small{font:700 .62rem var(--f-body);line-height:1;margin-top:1px}
.hfab:disabled{opacity:.55;box-shadow:none;cursor:default}
.hfab:not(:disabled){animation:pwFresh 1.6s ease-in-out infinite}
.hfab.sel{border-color:#fff2c0}
.zp-bl{opacity:.9}
.zp-lt{animation:zpLt .5s steps(2) infinite}
@keyframes zpLt{0%{opacity:1}50%{opacity:.08}100%{opacity:1}}
.zp-scr{animation:zpLt .9s steps(3) infinite}
.zp-run{animation:zpWalk 1.4s linear infinite}
.zp-pyz{animation:zpPyz 3s ease-in infinite}
@keyframes zpPyz{0%,45%{transform:translateX(0);opacity:1}60%{transform:translateX(0) scaleY(1);opacity:1}100%{transform:translateY(8px) scaleY(.2);opacity:0}}
.zp-arcx{animation:zpArcX 3s linear infinite}
.zp-arcy{animation:zpArcY 3s ease-out infinite}
@keyframes zpArcX{0%{transform:translateX(0)}40%,100%{transform:translateX(126px)}}
@keyframes zpArcY{0%{transform:translateY(0)}20%{transform:translateY(-40px)}40%,100%{transform:translateY(22px);opacity:1}}
.zp-fireup{opacity:0;animation:zpFireUp 3s linear infinite}
@keyframes zpFireUp{0%,40%{opacity:0}46%,100%{opacity:1}}
.zp-rotor{animation:zpRotor .12s linear infinite alternate}
@keyframes zpRotor{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
.zp-bob{animation:zpBob 1.4s ease-in-out infinite alternate}
@keyframes zpBob{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.zrd-art{max-width:300px;margin:.6rem auto .4rem}
.zg-h{margin:1.1rem 0 .4rem;font:700 .8rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.zg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:.5rem}
.zgt{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .3rem;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);cursor:pointer;text-align:center;font:inherit}
.zgt:hover,.zgt:focus-visible{border-color:var(--gold);outline:none}
.zgt .zgi{color:#ffb27a;display:flex;height:44px;align-items:center;justify-content:center}
.zgt b{font:700 .78rem var(--f-body);line-height:1.15}
.zgt small{font:.66rem var(--f-body);color:var(--muted)}
.zgt.lock{opacity:.45;cursor:default}

/* pas de flash au changement de langue : on masque jusqu'à la traduction */
html.lsaved #langveil{display:none!important}
html.lsaved body{visibility:hidden}

.pw.rdy{border-color:#ffd878!important;box-shadow:0 0 10px rgba(255,200,90,.5);animation:pwFresh 1.6s ease-in-out infinite}
.hfab{display:none!important}

.pw.cd{opacity:.6}
#side{grid-auto-flow:row dense}#side .pw[data-act="hero"]{grid-column:1}

/* pubs & achat */
.zprem-i{margin:.1rem 0 .4rem;color:#ffd27a}
.zprem-b{margin:0 0 .6rem;width:100%}
.zgate .zp-card{max-width:440px}
.zgate .btn{width:100%;margin-top:.5rem;display:flex;align-items:center;justify-content:center;text-align:center}
.zg-timer{margin:.6rem 0 .2rem;font:800 1.15rem var(--f-body);letter-spacing:.04em;color:#ffb27a;text-align:center}
.zg-timer.rdy{color:#8dffa4}
.zg-buy{background:linear-gradient(#3b2a1a,#241408);border:1px solid #ffd27a;color:#ffd27a}
.zg-link{display:block;margin:.7rem auto 0;background:none;border:0;color:#b99b8a;text-decoration:underline;font:600 .8rem var(--f-body);cursor:pointer}
.zsim-box{height:90px;margin:.6rem 0;border-radius:10px;background:repeating-linear-gradient(45deg,#2a1a16,#2a1a16 10px,#341f19 10px,#341f19 20px);border:1px dashed #6a4a3a}
.zsim .btn{width:100%}

/* ouverture d'une mallette */
.zcase{position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 10px;border-radius:16px;background:rgba(18,9,6,.94);border:1px solid #ffd27a;box-shadow:0 0 30px rgba(255,190,90,.45);pointer-events:none;animation:zcIn .35s ease-out both,zcOut .5s ease-in 3.8s forwards}
.zc-svg{width:104px;height:80px;flex:none;overflow:visible}
.zc-txt{max-width:260px}
.zc-k{margin:0;font:800 .62rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#ffb27a}
.zc-txt h3{margin:.1rem 0 .2rem;font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:#ffe28a;letter-spacing:.03em}
.zc-m{margin:0;font:600 .86rem/1.3 var(--f-body);color:#eadfd8}
.zc-lid{transform-box:fill-box;transform-origin:0% 100%;animation:zcLid 1.2s cubic-bezier(.3,1.4,.5,1) .15s both}
.zc-item{transform-box:fill-box;transform-origin:50% 50%;animation:zcItem 1.7s ease-out .35s both}
.zc-glow{transform-box:fill-box;transform-origin:50% 50%;animation:zcGlow 1.8s ease-out .2s both}
.zc-rays{transform-box:fill-box;transform-origin:50% 50%;animation:zcRays 1.8s ease-out .3s both}
@keyframes zcIn{from{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@keyframes zcOut{to{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@keyframes zcLid{0%{transform:rotate(0)}100%{transform:rotate(-72deg)}}
@keyframes zcItem{0%{transform:translateY(34px) scale(.2);opacity:0}35%{opacity:1}100%{transform:translateY(-20px) scale(1.05);opacity:1}}
@keyframes zcGlow{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(1.25);opacity:.55}}
@keyframes zcRays{0%{transform:scale(.4);opacity:0}40%{opacity:1}100%{transform:scale(1.15);opacity:.5}}

.zg-adm{background:transparent;border:1px dashed #8dffa4;color:#8dffa4}

.foot-priv{margin-top:.2rem!important}.foot-priv a{color:inherit;text-decoration:underline;opacity:.85}
#veil .card.home .foot.foot-priv{margin-top:.2rem}
.privov{position:fixed;inset:0;z-index:99999;background:#0b0305;color:#eadfd8;overflow:auto;font:15px/1.55 system-ui,sans-serif}.privov main{max-width:720px;margin:0 auto;padding:20px 18px 60px}.privov h1{color:#ffb27a;font-weight:400}.privov h2{color:#ffb27a;font-size:1.05rem;margin-top:1.4rem}.privov hr{border:0;border-top:1px solid #3a1a14;margin:2rem 0}.privov button{position:sticky;top:10px;float:right;margin:10px;padding:.5rem 1rem;border-radius:8px;border:1px solid #ffb27a;background:#1a0a08;color:#ffb27a;font:600 .9rem system-ui}

/* ===== Rotgate Multiplayer : salon et HUD ===== */
.mpcard{max-width:560px;width:100%}
.mpcard .menu .btn{display:flex;flex-direction:column;gap:.1rem}
.mpcard .menu .btn small{font-weight:400;opacity:.8;font-size:.72rem}
.mpnamel{display:block;margin:.4rem 0;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.mpnamel input{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--text);font:700 1rem var(--f-body);letter-spacing:.12em;text-transform:none}
#mpJoinCode{text-transform:uppercase;font-size:1.3rem;text-align:center}
.mperr{color:var(--warn);font-weight:700;min-height:1.2em}
.mpscan{margin:.6rem 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;min-height:60px;text-align:center;padding:.4rem}
.mpscan video{width:100%;max-height:240px;object-fit:cover;border-radius:6px}
.mpinv{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.4rem 0 .8rem;padding:.7rem;background:var(--panel2);border:1px solid var(--gold-d);border-radius:8px}
.mpinv small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.mpcode{display:block;font:700 2.2rem var(--f-body);letter-spacing:.3em;color:var(--gold);margin:.1rem 0 .4rem}
.mpqr canvas{width:150px;height:150px;border-radius:6px;display:block}
.mpset{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin:.4rem 0}
.mpset label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.mpcard select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.4rem;font:600 .9rem var(--f-body);min-width:0}
.mpslots{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0}
.mpslot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem .55rem;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:6px}
.mpslot.me{border-color:var(--gold)}
.mpslot .mpnm{flex:1 1 110px;font-weight:700}
.mpslot .dim,.mpslot small{color:var(--muted);font-weight:400}
.mpdot{width:.8rem;height:.8rem;border-radius:50%;background:var(--c);display:inline-block}
.mptag{color:var(--muted);font-size:.8rem}
.btn.sm{padding:.25rem .55rem;min-height:28px;font-size:.78rem}
.mpchips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
.mpchip{font:700 .66rem var(--f-body);font-style:normal;padding:.1rem .4rem;border-radius:10px;border:1px solid var(--c);color:var(--c);background:rgba(0,0,0,.35)}
.mpchip.out{opacity:.4;text-decoration:line-through}

.mpcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem;margin:.6rem 0 .9rem}
.mpcard2{display:flex;flex-direction:column;gap:.2rem;text-align:left;padding:.7rem .8rem;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;cursor:pointer}
.mpcard2 b{font-size:1rem}.mpcard2 small{color:var(--muted);font-size:.74rem;line-height:1.3}
.mpcard2.on{border-color:var(--gold);background:#3a160f}
.mpcard2:disabled{opacity:.4;cursor:not-allowed}

.mpwait{text-align:center;margin:.4rem 0 .8rem}
.mpwait h2{margin:.6rem 0 .2rem}
.mpspin{width:46px;height:46px;margin:0 auto;border:4px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:mpspin 1s linear infinite}
@keyframes mpspin{to{transform:rotate(360deg)}}
.mpst{font:700 .72rem var(--f-body);padding:.1rem .5rem;border-radius:10px;border:1px solid var(--line)}
.mpst.ok{color:var(--ok);border-color:var(--ok)}.mpst.wait{color:var(--warn);border-color:var(--warn)}