/*! Zombie 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:1rem;padding:.85rem 1.1rem;font:700 1.25rem var(--f-body);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:12px;cursor:pointer;min-height:68px}
.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}}