:root{--ink:#1d1a17;--paper:#fff8ec;--orange:#ff7a1a;--orange-d:#d65a00;--green:#2fa84f;--red:#d93a2b;--blue:#2a6fdb;--card:#fff;--muted:#6b6259;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper) radial-gradient(circle at 20% 0,#ffe3c2 0,transparent 50%)}
a{color:var(--orange-d)}
img{max-width:100%;height:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 1rem;background:#fff;border-bottom:3px solid var(--ink)}
.brand img{display:block;height:56px;width:auto}
.top nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.top nav a{font-weight:700;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:2rem 1rem}
h1,h2,h3{line-height:1.15;margin:.6em 0 .4em}
h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.lead{font-size:1.15rem;max-width:40em}
.card{background:var(--card);border:3px solid var(--ink);border-radius:var(--r);padding:1rem;margin:1rem 0;box-shadow:4px 4px 0 var(--ink)}
.narrow{max-width:460px;margin:1rem auto}
label{display:block;margin:.6rem 0;font-weight:600}
input,select{font:inherit;padding:.55rem .7rem;border:2px solid var(--ink);border-radius:10px;width:100%;max-width:100%;background:#fff}
input[type=radio]{width:auto}
.btn{display:inline-block;font:inherit;font-weight:800;color:#fff;background:var(--orange);border:3px solid var(--ink);border-radius:12px;padding:.55rem 1.1rem;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .08s}
.btn:hover{transform:translate(-1px,-1px)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.big{font-size:1.25rem;padding:.8rem 1.6rem}
.btn.small{font-size:.9rem;padding:.35rem .7rem}
.btn.on{background:var(--green)}
.btn.danger{background:var(--red)}
.link{background:none;border:0;color:var(--orange-d);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.inline{display:inline}
.flash{padding:.7rem 1rem;border-radius:10px;border:2px solid var(--ink);background:#e8f6ec}
.flash-error{background:#fde3df}
.create{max-width:520px}
.genders{border:0;padding:0;display:flex;gap:1rem}
.gender{flex:1;text-align:center;border:3px solid #ddd;border-radius:var(--r);padding:.5rem;cursor:pointer;background:#fffdf8}
.gender:has(input:checked){border-color:var(--orange);background:#fff1e3}
.gender input{position:absolute;opacity:0}
.gender img{height:140px;width:auto;display:block;margin:0 auto}
.me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center}
.bcard{display:flex;gap:.8rem;background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:.6rem;box-shadow:3px 3px 0 var(--ink)}
.bcard .pose{width:96px;height:120px;object-fit:contain;flex:none}
.binfo{min-width:0;flex:1}
.binfo strong{font-size:1.1rem;display:block;overflow-wrap:anywhere}
.lvl{font-weight:800;color:var(--orange-d)}
.badge{display:inline-block;font-size:.72rem;font-weight:800;padding:.1rem .45rem;border-radius:999px;border:2px solid var(--ink);margin-left:.3rem}
.badge.npc{background:#ffe27a}
.stats{list-style:none;padding:0;margin:.3rem 0;display:grid;grid-template-columns:repeat(3,auto);gap:.1rem .7rem;font-size:.82rem}
.stats span{color:var(--muted)}
.icons{display:flex;flex-wrap:wrap;gap:3px}
.icons img{width:28px;height:28px;object-fit:contain}
.ico{width:20px;height:20px;vertical-align:-4px}
.xpbar{width:100%;height:16px;accent-color:var(--orange)}
.postures{display:flex;flex-wrap:wrap;gap:.6rem}
.posture{width:110px;text-align:center;border:3px solid #ddd;border-radius:var(--r);padding:.4rem;cursor:pointer;background:#fff;font-size:.85rem;margin:0}
.posture input{position:absolute;opacity:0}
.posture img{width:64px;height:64px;display:block;margin:0 auto}
.posture:has(input:checked){border-color:var(--orange);background:#fff1e3}
.opponents{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.opp{display:flex;flex-direction:column;gap:.4rem}
.opp .btn{align-self:stretch}
.fights{list-style:none;padding:0}
.fights li{padding:.25rem 0}
.fights .won::before{content:"✔ ";color:var(--green)}
.fights .lost::before{content:"✘ ";color:var(--red)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.grid2 form,.grid2>div{display:flex;flex-direction:column;gap:.4rem}
.grid2 h3{font-size:1rem;margin:0}
.levelup{text-align:center}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1rem 0}
.lcard{width:200px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);cursor:pointer;font:inherit;font-weight:800;padding:1rem;transition:transform .12s}
.lcard:hover{transform:rotate(-2deg) scale(1.03)}
.lcard img{width:120px;height:120px;object-fit:contain}
.lcard.type-posture{background:#fff3c4}.lcard.type-animal{background:#e9f7e6}.lcard.type-skill{background:#e8efff}
.statcard{font-size:4rem;color:var(--orange)}
.destiny{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.destiny li{display:flex;align-items:center;gap:.3rem;border:2px solid var(--ink);border-radius:10px;padding:.2rem .5rem;background:#fff;font-size:.85rem}
.destiny img{width:24px;height:24px}
/* replay */
.stage{position:relative;aspect-ratio:16/9;max-height:70vh;width:100%;background:#cfe7ff center/cover no-repeat;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden}
.hud{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;gap:.5rem;padding:.5rem;z-index:5}
.hudbox{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.9);border:3px solid var(--ink);border-radius:12px;padding:.25rem .5rem;width:min(46%,340px)}
.hudbox.R{flex-direction:row-reverse;text-align:right}
.hudbox img{width:44px;height:44px;object-fit:contain}
.hudbox .nm{font-weight:800;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpbar{height:12px;background:#ddd;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--green);transition:width .3s}
.hudbox .col{flex:1;min-width:0}
.floor{position:absolute;inset:0}
.unit{position:absolute;bottom:6%;transition:transform .25s ease-out,left .25s ease-out,opacity .4s;transform-origin:50% 100%}
.unit img.body{display:block;height:100%;width:auto}
.unit.fighter{height:58%}
.unit.animal{height:24%;bottom:4%}
.unit.R img.body{transform:scaleX(-1)}
.unit .weapon{position:absolute;width:30%;top:28%;left:66%;transform:rotate(-35deg);transform-origin:20% 80%;pointer-events:none;transition:transform .18s}
.unit.R .weapon{left:4%;transform:scaleX(-1) rotate(-35deg)}
.unit.swing .weapon{transform:rotate(55deg)}
.unit.R.swing .weapon{transform:scaleX(-1) rotate(55deg)}
.unit.ko{transform:rotate(-80deg) translateY(10%)!important;opacity:.85}
.unit.R.ko{transform:rotate(80deg) translateY(10%)!important}
.unit.flee{opacity:0}
.unit.hurt img.body{filter:brightness(1.6) saturate(.4)}
.fx{position:absolute;pointer-events:none;width:14%;z-index:6;animation:pop .5s ease-out forwards}
.fx.small{width:9%}
@keyframes pop{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:0}}
.num{position:absolute;font-weight:900;font-size:clamp(1rem,3vw,2rem);color:#fff;-webkit-text-stroke:2px var(--ink);z-index:7;animation:up .9s ease-out forwards}
.num.crit{color:#ffd400;font-size:clamp(1.4rem,4vw,2.8rem)}
.num.heal{color:#6ef08a}
.num.miss{color:#e9e9e9;font-size:clamp(.8rem,2vw,1.3rem)}
@keyframes up{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-60px);opacity:0}}
.bubble{position:absolute;z-index:8;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.3rem .7rem;font-weight:900;font-size:clamp(.9rem,2.4vw,1.4rem);animation:pop 1.3s ease-out forwards;white-space:nowrap}
.hpt{font-size:.72rem;font-weight:800;margin-top:1px}
.hudbox.R .hpt{text-align:right}
.feed{position:absolute;top:84px;list-style:none;margin:0;padding:0;width:min(30%,240px);z-index:5;display:flex;flex-direction:column;gap:3px}
.feed.L{left:.5rem}.feed.R{right:.5rem;align-items:flex-end}
.feed li{display:flex;align-items:center;gap:.3rem;background:rgba(20,16,12,.55);color:#fff;border-radius:8px;padding:.15rem .45rem;font-size:clamp(.62rem,1.6vw,.85rem);font-weight:700;max-width:100%;animation:slidein .25s ease-out}
.feed li:nth-child(n+2){opacity:.82}.feed li:nth-child(n+3){opacity:.62}.feed li:nth-child(4){opacity:.45}
.feed li img{width:18px;height:18px;object-fit:contain;flex:none}
.feed li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed li.crit{background:rgba(190,120,0,.75)}.feed li.special{background:rgba(214,90,0,.85)}.feed li.def{background:rgba(42,111,219,.6)}.feed li.heal{background:rgba(47,168,79,.7)}.feed li.bad{background:rgba(217,58,43,.7)}
@keyframes slidein{from{transform:translateY(-6px);opacity:0}to{transform:none}}
.banner{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:9;background:var(--orange);color:#fff;border:4px solid var(--ink);border-radius:16px;padding:.3rem 1rem;font-size:clamp(1.2rem,4vw,2.6rem);font-weight:900;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;animation:pop 1.4s ease-out forwards}
.stage.slowmo{box-shadow:inset 0 0 120px rgba(0,0,0,.55)}
.stage.slowmo .unit{transition-duration:.7s}
.stage.slowmo .fx,.stage.slowmo .num{animation-duration:1.2s}
.title{display:block;font-size:.8rem;color:var(--blue);font-weight:700}
.achs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.achs li{border:2px dashed #ccc;border-radius:10px;padding:.4rem .6rem;opacity:.55;font-size:.85rem}
.achs li span{display:block;color:var(--muted)}
.achs li.got{border:2px solid var(--ink);background:#fff3c4;opacity:1}
.achs li.soon{opacity:.35}
.badge.ach{background:#fff3c4;font-size:.85rem}
.ach-new{background:#fff3c4}
.reflink{font-family:monospace;word-break:break-all}
.result{position:absolute;inset:auto 0 30% 0;text-align:center;z-index:9}
.result span{display:inline-block;background:var(--orange);color:#fff;border:4px solid var(--ink);border-radius:16px;padding:.5rem 1.2rem;font-size:clamp(1.3rem,4vw,2.4rem);font-weight:900;box-shadow:4px 4px 0 var(--ink)}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.8rem 0}
.rewards{font-weight:800}
.log{max-height:220px;overflow:auto;font-size:.85rem;color:var(--muted);background:#fff;border:2px solid #ddd;border-radius:10px;padding:.5rem 1rem .5rem 2rem}
/* staff */
table{border-collapse:collapse;width:100%;background:#fff;font-size:.9rem}
th,td{border:1px solid #ccc;padding:.35rem .5rem;text-align:left;vertical-align:top}
th{background:#fff1e3}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.kpi{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:.7rem}
.kpi b{display:block;font-size:1.6rem}
.staffnav{display:flex;gap:.8rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.alert{color:var(--red);font-weight:700}
.tablewrap{overflow-x:auto}
@media (max-width:700px){.me{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,auto)}.bcard .pose{width:72px;height:96px}.opponents{grid-template-columns:1fr}.hudbox img{width:32px;height:32px}}
.unit.aura{filter:drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 4px #fff3b0)}
.opp .spy{margin:.3rem 0;font-weight:700;color:#7a3e00;background:#fff3d6;border-radius:8px;padding:.2rem .5rem}
.packgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin:.6rem 0}
.btn.pack{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem}
.btn.pack small{font-weight:400}
.shopitem{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px dashed #e3d3b5}
.shopitem select,.shopitem input{max-width:100%}
label.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem}
.legal h2{margin-top:1.2rem}.legal li{margin:.25rem 0}.foot a{color:inherit}

/* marionnette + animaux */
.unit .sq{height:100%;transform-origin:50% 100%}
.unit.animal .sq{animation:breathe 1.4s ease-in-out infinite alternate}
.unit.animal.hop .sq{animation:hop .42s ease-out}
.unit.animal.squish .sq{animation:squish .35s ease-out}
.unit.animal.flee{transition:left .9s ease-in,opacity .9s ease-in}
.unit.animal.flee .sq{animation:fleehop .25s ease-in-out infinite}
@keyframes breathe{from{transform:scale(1,1)}to{transform:scale(1.04,.96) translateY(-2%)}}
@keyframes hop{0%{transform:scale(1.25,.7)}35%{transform:scale(.8,1.25) translateY(-22%)}70%{transform:scale(1.1,.9)}100%{transform:none}}
@keyframes squish{0%{transform:scale(1.35,.6) rotate(-8deg);filter:brightness(2)}50%{transform:scale(.9,1.12) rotate(5deg)}100%{transform:none}}
@keyframes fleehop{0%,100%{transform:translateY(0)}50%{transform:translateY(-15%) rotate(-6deg)}}
.unit.fighter.rigged{width:18%;height:58%}
.unit.rigged{transition:transform .25s ease-out,left .16s ease-out,opacity .4s}
.pup{position:absolute;left:50%;bottom:0;width:0;height:0}
.unit.R .pup{transform:scaleX(-1)}
.pbob{animation:pbob 1.6s ease-in-out infinite alternate}
@keyframes pbob{from{transform:translateY(0)}to{transform:translateY(3px)}}
.pwrap{position:absolute;left:0;top:0;transform-origin:0 0}
.pgrp,.seg{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.pc,.phead,.pweapon{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.phand{position:absolute;width:0;height:0}
.pweapon{transform-origin:20% 80%}
.unit.rigged.hurt .pwrap{filter:brightness(1.6) saturate(.4)}
@media (prefers-reduced-motion:reduce){.pbob,.unit.animal .sq{animation:none}}
.mygold{font-weight:700;margin-left:.6rem;white-space:nowrap}
.zoomable{cursor:zoom-in}
img.zsel{outline:3px solid #ff7a00;outline-offset:2px;border-radius:10px}
dialog.zoom{border:3px solid #222;border-radius:16px;padding:1.2rem;max-width:min(92vw,480px);background:#fff8ee;box-shadow:6px 6px 0 #222}
dialog.zoom::backdrop{background:rgba(0,0,0,.6)}
dialog.zoom figure{margin:0;text-align:center}
dialog.zoom img{width:100%;max-height:55vh;object-fit:contain}
dialog.zoom figcaption{margin-top:.6rem;line-height:1.45}
dialog.zoom figcaption strong{display:block;font-size:1.15rem;margin-bottom:.2rem}
.zx{position:absolute;top:.2rem;right:.5rem;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer}
.lcard .cap{display:block;font-size:.8rem;font-weight:400;line-height:1.3;margin-top:.35rem;opacity:.85;max-width:12rem}
.howto{max-width:760px;margin:1rem auto;line-height:1.6}
.howto h2{margin-top:1.6rem}
.hp-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.hp-ico{width:72px;height:72px;object-fit:contain}
.howto .cta,.intro{text-align:center}
.intro{max-width:760px;margin:1.5rem auto;line-height:1.6;text-align:left}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.tabs a{border:2px solid var(--ink);border-radius:999px;padding:.2rem .7rem;background:#fff;text-decoration:none}
.tabs a.on{background:#ff7a00;color:#fff}
.ranking td,.ranking th{padding:.3rem .4rem;text-align:left}
.ranking .who{display:flex;align-items:center;gap:.4rem}
.ranking .who img{width:32px;height:32px;object-fit:contain}
@media(max-width:600px){.ranking th:nth-child(6),.ranking td:nth-child(6){display:none}}
.pick{margin:.6rem 0 .2rem}
.looks{border:0;padding:0;margin:.3rem 0;display:flex;flex-wrap:wrap;gap:.35rem}
.looks legend{font-weight:700;font-size:.9rem}
.look{margin:0;border:3px solid #ddd;border-radius:10px;background:#fffdf8;cursor:pointer;padding:2px;position:relative}
.look:has(input:checked){border-color:var(--orange);background:#fff1e3;box-shadow:0 0 0 2px var(--orange)}
.look:has(input:focus-visible){outline:2px solid var(--ink)}
.look input{position:absolute;opacity:0}
.look img{display:block;width:66px;height:78px;object-fit:contain}