:root{
  --bg:#100d26; --bg2:#171336; --panel:#1d1945; --panel2:#262061; --line:#352e7a; --text:#efedff; --muted:#a29dd0;
  --red:#ff4f4a; --red2:#ff7a52; --gold:#ffcf3f; --ok:#4fd18b; --blue:#4aa8ff;
  --r-lg:20px; --r-md:12px; --r-sm:8px;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif; --body:'Figtree','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 700px at 78% -10%,#2b1f78 0%,transparent 60%),radial-gradient(900px 600px at -10% 110%,#3a1456 0%,transparent 55%),var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5;min-height:100vh}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:#fff}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;line-height:1.1}
img{display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- ossature ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr) 316px;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;padding:22px 14px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(29,25,69,.85),rgba(16,13,38,.9))}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-family:var(--display);font-weight:800;font-size:22px}
.ball{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--red) 0 46%,#1a1530 46% 54%,#fff 54%);border:3px solid #1a1530;position:relative;flex:none;box-shadow:0 0 0 2px #fff3 inset}
.ball::after{content:'';position:absolute;inset:50% auto auto 50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:3px solid #1a1530}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);color:var(--muted);text-decoration:none;font-weight:600;transition:background .15s,color .15s}
.nav a .ic{width:26px;text-align:center;font-size:19px}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.on{background:linear-gradient(90deg,var(--red),var(--red2));color:#fff;box-shadow:0 6px 18px -6px var(--red)}
.nav .badge{margin-left:auto;background:var(--gold);color:#241b00;font-size:12px;font-weight:800;border-radius:99px;padding:1px 8px}
.rail .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--panel)}
.me .av{font-size:26px;width:42px;height:42px;display:grid;place-items:center;background:var(--panel2);border-radius:50%}
.me b{display:block;line-height:1.2}.me small{color:var(--gold);font-weight:700}
.main{padding:28px 32px 70px;min-width:0}
.feed{position:sticky;top:0;height:100vh;padding:22px 16px;border-left:1px solid var(--line);background:rgba(16,13,38,.7);display:flex;flex-direction:column;gap:12px}
.feed h3{font-size:18px;display:flex;align-items:center;gap:8px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok);font-family:var(--body)}
.live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #4fd18b99}100%{box-shadow:0 0 0 10px #4fd18b00}}
.feed-list{display:flex;flex-direction:column;gap:8px;overflow:hidden;mask-image:linear-gradient(#000 80%,transparent)}
.ev{display:flex;gap:10px;align-items:center;padding:9px 10px;background:var(--panel);border-radius:var(--r-md);border-left:4px solid var(--c,var(--line));animation:evin .5s cubic-bezier(.2,1.2,.4,1)}
.ev img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;flex:none}
.ev p{font-size:13.5px;line-height:1.35}.ev small{color:var(--muted)}
@keyframes evin{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- éléments communs ---------- */
.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:clamp(30px,4vw,44px);font-weight:800}
.page-head p{color:var(--muted);max-width:60ch;margin-top:6px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.grid{display:grid;gap:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;font-weight:700;background:var(--panel2);border:1px solid var(--line);transition:transform .12s,background .15s,box-shadow .15s}
.btn:hover{background:#322a7c;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--red),var(--red2));border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px var(--red)}
.btn.gold{background:var(--gold);color:#2a1f00;border-color:transparent}
.btn.ok{background:var(--ok);color:#052a17;border-color:transparent}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.sm{padding:6px 12px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:#fff;background:var(--c,#555);white-space:nowrap}
.chip.f{background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer}
.chip.f.on{background:var(--c,var(--red));color:#fff;border-color:transparent}
.bar{height:10px;background:#0c0a1f;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px #0008}
.bar>i{display:block;height:100%;width:var(--w,50%);border-radius:99px;background:var(--bc,var(--ok));transition:width .9s cubic-bezier(.3,.9,.3,1)}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.money{color:var(--gold);font-weight:800}
.sprite{image-rendering:pixelated;object-fit:contain}

/* ---------- cartes holographiques (box) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}
.card{--rc:#8d96b8;position:relative;border-radius:18px;padding:3px;background:linear-gradient(145deg,var(--rc),#1b1744 60%);cursor:pointer;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s;will-change:transform;text-align:left;display:block;width:100%}
.card:hover{box-shadow:0 18px 40px -14px var(--rc)}
.card .in{position:relative;border-radius:15px;background:linear-gradient(180deg,#241f58,#16123a);padding:12px 12px 10px;overflow:hidden;min-height:236px}
.card .holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#fff7 0%,transparent 45%),conic-gradient(from calc(var(--mx,50)*3.6deg) at 50% 120%,#ff4f4a55,#ffcf3f55,#4fd18b55,#4aa8ff55,#b46bff55,#ff4f4a55)}
.card:hover .holo{opacity:.85}
.card[data-r=epique] .holo,.card[data-r=legendaire] .holo,.card.shiny .holo{opacity:.3}
.card[data-r=epique]:hover .holo,.card[data-r=legendaire]:hover .holo,.card.shiny:hover .holo{opacity:1}
.card .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.card .pic{height:112px;display:grid;place-items:center;margin:4px 0}
.card .pic img{max-height:104px;max-width:100%;transform:translateZ(30px);filter:drop-shadow(0 8px 6px #0007)}
.card h3{font-size:17px;display:flex;gap:6px;align-items:center}
.card .types{display:flex;gap:5px;margin:6px 0 8px}
.card .types .chip{font-size:11px;padding:1px 8px}
.card .iv{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.card .iv .bar{flex:1;height:6px}
.card .flags{position:absolute;right:10px;top:34px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.card.shiny::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff6 50%,transparent 60%);background-size:250% 100%;animation:shine 3.4s infinite;border-radius:18px}
@keyframes shine{from{background-position:130% 0}to{background-position:-30% 0}}
.card.inteam::after,.card.training::after{position:absolute;z-index:3;content:'ÉQUIPE';position:absolute;left:12px;bottom:10px;font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--red);border-radius:6px;padding:1px 6px}
.card.inteam .iv{margin-bottom:16px}
.card.training .in{filter:saturate(.5) brightness(.8)}
.card.training::after{content:'EN ENTRAÎNEMENT';background:var(--gold);color:#2a1f00}

.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:18px;padding:14px 16px}
.filters .grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filters label{font-size:13px;color:var(--muted);font-weight:600}
input[type=search],input[type=number],select{background:#0f0c26;border:1px solid var(--line);color:var(--text);border-radius:99px;padding:8px 14px;font:inherit}
input[type=range]{accent-color:var(--red);width:130px}

/* ---------- modales ---------- */
.veil{position:fixed;inset:0;background:#06041599;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:18px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:24px;width:min(760px,100%);max-height:92vh;overflow:auto;padding:26px;position:relative;animation:pop .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}}
.modal.sm{width:min(460px,100%)}
.x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#0003;font-size:18px}
.fiche{display:grid;grid-template-columns:240px 1fr;gap:24px}
.fiche .art{display:grid;place-items:center;border-radius:20px;background:radial-gradient(circle at 50% 40%,var(--rc,#fff3),transparent 70%),#120e30;padding:14px;position:relative}
.fiche .art img{width:210px;animation:float 3.5s ease-in-out infinite;filter:drop-shadow(0 14px 10px #0008)}
@keyframes float{50%{transform:translateY(-8px)}}
.stat{display:grid;grid-template-columns:78px 36px 1fr 28px;gap:8px;align-items:center;font-size:13px;margin:4px 0}
.stat .bar{height:8px}
.moves{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.mv{padding:8px 12px;border-radius:12px;background:#120e30;border-left:5px solid var(--c);font-size:13.5px}
.mv b{display:block}.mv small{color:var(--muted)}
.mv .eff{color:var(--gold);font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (max-width:760px){.fiche{grid-template-columns:1fr}.moves{grid-template-columns:1fr}}

/* ---------- chasse & capture ---------- */
.stage{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:430px;border:1px solid var(--line);background:linear-gradient(180deg,#20347a 0%,#5a8ee6 46%,#9fd0ff 62%,#5fb36a 62%,#3b8a4e 100%)}
.stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(100deg,#2f7d44 0 14px,#3b8a4e 14px 28px);opacity:.55}
.stage .cloud{position:absolute;top:10%;width:140px;height:40px;background:#fff;border-radius:99px;opacity:.7;filter:blur(1px);animation:drift 40s linear infinite}
.stage .cloud:nth-child(2){top:24%;width:90px;animation-duration:55s;animation-delay:-20s}
@keyframes drift{from{left:-160px}to{left:110%}}
.wild{position:absolute;left:62%;bottom:20%;z-index:3;transform:translateX(-50%);text-align:center;transition:opacity .4s}
.wild img{width:150px;height:150px;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 12px 6px #0006);animation:idle 2.4s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-6px)}}
.wild.enter img{animation:wildin .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes wildin{from{transform:translateX(160px) scale(.6);opacity:0}}
.wild.caught img{animation:none;filter:brightness(0) invert(1);transform:scale(.1);transition:transform .4s,filter .4s;opacity:0}
.wild.flee img{animation:flee .6s forwards}
@keyframes flee{to{transform:translateX(260px);opacity:0}}
.banner{position:absolute;left:18px;top:18px;z-index:5;background:#0a0720d9;border:2px solid var(--rc,#fff);border-radius:16px;padding:10px 14px;max-width:290px;backdrop-filter:blur(4px);animation:pop .4s}
.banner h3{font-size:22px}
.banner .rar{color:var(--rc);font-weight:800}
.pball{position:absolute;left:12%;bottom:10%;width:34px;height:34px;border-radius:50%;z-index:6;background:linear-gradient(180deg,var(--red) 0 45%,#1a1530 45% 55%,#fff 55%);border:3px solid #1a1530;opacity:0}
.pball::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:3px solid #1a1530;transform:translate(-50%,-50%)}
.pball.super{background:linear-gradient(180deg,#3a7dff 0 45%,#1a1530 45% 55%,#fff 55%)}
.pball.hyper{background:linear-gradient(180deg,#ffc53d 0 45%,#1a1530 45% 55%,#fff 55%)}
.pball.master{background:linear-gradient(180deg,#b46bff 0 45%,#1a1530 45% 55%,#fff 55%)}
.pball.throw{animation:throw 1s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes throw{0%{opacity:1;transform:translate(0,0) rotate(0)}60%{opacity:1;transform:translate(calc(var(--dx)*.62),calc(var(--dy)*.62 - 130px)) rotate(540deg)}100%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(900deg)}}
.pball.wobble{opacity:1;transform:translate(var(--dx),var(--dy));animation:wobble .7s ease-in-out 3}
@keyframes wobble{0%,100%{transform:translate(var(--dx),var(--dy)) rotate(0)}25%{transform:translate(var(--dx),var(--dy)) rotate(-24deg)}75%{transform:translate(var(--dx),var(--dy)) rotate(24deg)}}
.pball.ok{opacity:1;transform:translate(var(--dx),var(--dy));animation:okball .9s}
@keyframes okball{50%{box-shadow:0 0 0 18px #ffcf3f55,0 0 40px 10px #ffcf3f}}
.pball.out{opacity:0;transition:opacity .3s}
.sparkle{position:absolute;z-index:7;pointer-events:none;font-size:20px;animation:spark 1.1s forwards}
@keyframes spark{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--sx),var(--sy)) scale(1.3);opacity:0}}
.ballbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ballpick{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:2px solid var(--line);background:var(--panel)}
.ballpick.on{border-color:var(--gold);background:var(--panel2)}
.ballpick i{width:16px;height:16px;border-radius:50%;border:2px solid #1a1530;background:linear-gradient(180deg,var(--c) 0 45%,#fff 45%)}
.log{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.log p{background:var(--panel);border-radius:12px;padding:8px 12px;font-size:14px;animation:evin .3s}

/* ---------- combat ---------- */
.arena{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);min-height:420px;overflow:hidden;background:linear-gradient(180deg,#27408f,#7db3ff 55%,#79c186 55%,#4b9a5c)}
.arena .ground{position:absolute;left:0;right:0;bottom:0;height:45%;background:radial-gradient(ellipse at 28% 78%,#00000030,transparent 30%),radial-gradient(ellipse at 74% 48%,#00000030,transparent 28%)}
.fighter{position:absolute;transition:transform .25s}
.fighter.foe{right:12%;top:20%}.fighter.you{left:12%;bottom:6%}
.fighter img{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 5px #0006)}
.fighter.foe img{width:150px;height:150px}.fighter.you img{width:200px;height:200px}
.fighter.lunge-you{transform:translate(90px,-40px)}.fighter.lunge-foe{transform:translate(-90px,40px)}
.fighter.hit img{animation:hit .5s}
@keyframes hit{0%,100%{opacity:1}20%,60%{opacity:.2;transform:translateX(8px)}40%,80%{opacity:1;transform:translateX(-8px)}}
.fighter.ko img{transition:all .8s;transform:translateY(60px);opacity:0}
.fighter.sleep::after{content:'💤';position:absolute;right:-4px;top:-6px;font-size:28px;animation:zz 1.6s infinite}
@keyframes zz{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-26px) translateX(12px);opacity:0}}
.fighter.psn img{filter:drop-shadow(0 10px 5px #0006) hue-rotate(250deg) saturate(1.4)}
.fighter.brn::before{content:'🔥';position:absolute;left:-2px;top:0;font-size:24px;animation:zz 1s infinite}
.fighter.par::before{content:'⚡';position:absolute;left:-2px;top:0;font-size:24px;animation:zz .7s infinite}
.hud{position:absolute;background:#0a0720e6;border:2px solid #3a3380;border-radius:14px;padding:8px 12px;width:min(270px,44%);z-index:4}
.hud.foe{left:4%;top:8%}.hud.you{right:4%;bottom:8%}
.hud b{display:flex;justify-content:space-between;font-size:15px}
.hud .st{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:0 6px;margin-left:6px;background:var(--red)}
.hud .bar{margin:6px 0 2px;height:12px}
.hud small{color:var(--muted)}
.dmg{position:absolute;z-index:8;font-family:var(--display);font-weight:800;font-size:30px;color:#fff;text-shadow:0 2px 0 #000,0 0 10px var(--red);animation:dmg 1s forwards}
@keyframes dmg{from{transform:translateY(0) scale(.6);opacity:1}to{transform:translateY(-60px) scale(1.2);opacity:0}}
.moves-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:14px}
.moves-bar .btn{justify-content:space-between;border-left:6px solid var(--c)}
.battlelog{margin-top:12px;background:#0a0720;border:1px solid var(--line);border-radius:14px;padding:12px 16px;min-height:64px;font-size:15px}

/* ---------- évolution ---------- */
.evo{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#2d2480,#0a0720 70%);animation:fade .4s}
.evo .box{text-align:center;max-width:520px;padding:24px}
.evo .stagebox{position:relative;width:280px;height:280px;margin:0 auto 12px}
.evo .stagebox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.evo .from{filter:none}
.evo.go .from{animation:glow 3.2s forwards}
@keyframes glow{0%{filter:none;transform:scale(1)}30%{filter:brightness(0) invert(1);transform:scale(1.05)}55%{filter:brightness(0) invert(1);transform:scale(.8)}80%{filter:brightness(0) invert(1);transform:scale(1.25);opacity:1}100%{filter:brightness(0) invert(1);transform:scale(1.4);opacity:0}}
.evo .to{opacity:0;filter:brightness(0) invert(1)}
.evo.go .to{animation:reveal 3.2s forwards}
@keyframes reveal{0%,78%{opacity:0;filter:brightness(0) invert(1);transform:scale(1.4)}88%{opacity:1;filter:brightness(0) invert(1);transform:scale(1.15)}100%{opacity:1;filter:none;transform:scale(1)}}
.evo .ring{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:3px solid #fff;opacity:0}
.evo.go .ring{animation:ring 1.4s ease-out infinite}
.evo.go .ring:nth-child(3){animation-delay:.45s}.evo.go .ring:nth-child(4){animation-delay:.9s}
@keyframes ring{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(9)}}
.evo h2{font-size:34px;margin-bottom:6px}.evo p{color:var(--muted);margin-bottom:16px}

/* ---------- divers ---------- */
.slot{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.slot img{width:84px;height:84px}
.slot.empty{border-style:dashed;color:var(--muted);grid-template-columns:1fr;text-align:center;padding:26px}
.slot.locked{opacity:.55}
.steps{display:flex;gap:6px;margin:8px 0}
.steps i{flex:1;height:10px;border-radius:99px;background:#0c0a1f}
.steps i.on{background:linear-gradient(90deg,var(--gold),var(--red2))}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:8px 12px}
td{padding:12px;border-top:1px solid var(--line)}
tr:hover td{background:#ffffff08}
.warn{color:var(--red2);font-weight:700}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.dex{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;text-align:center;font-size:13px}
.dex img{width:64px;height:64px;margin:0 auto 4px}
.dex.seen img{filter:brightness(0) opacity(.55)}
.dex.unk img{display:none}.dex.unk .q{font-size:40px;color:var(--line);height:68px;line-height:68px}
.dex small{color:var(--muted)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;margin-bottom:22px}
.pod{border-radius:var(--r-lg);padding:18px;text-align:center;background:var(--panel);border:1px solid var(--line)}
.pod .av{font-size:40px}.pod b{font-size:20px;display:block}
.pod.p1{background:linear-gradient(180deg,#5a4510,var(--panel));border-color:var(--gold);padding-bottom:40px}
.pod.p2{padding-bottom:26px}
.toast{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast div{background:var(--panel2);border:1px solid var(--gold);border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px -10px #000;animation:evin .4s;max-width:340px}
.shinyalert{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:80;padding:12px 22px;border-radius:99px;background:linear-gradient(90deg,#ffcf3f,#ff7a52,#b46bff);color:#1a1000;font-weight:800;box-shadow:0 14px 40px -10px #ffcf3f;animation:drop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{transform:translate(-50%,-90px)}}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}

.mate{background:#120e30;border-radius:16px;padding:10px;text-align:center;border-bottom:4px solid var(--rc)}
.mate img{width:72px;height:72px;margin:0 auto}
.mate b{font-size:14px}.mate .bar{height:6px;margin-top:6px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.tile b{display:block;font-family:var(--display);font-size:26px}.tile span{color:var(--muted);font-size:13px}
.egg{display:flex;gap:16px;align-items:center}
.egg .e{width:64px;height:80px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#fff,#e9e3c6 60%);position:relative;overflow:hidden;box-shadow:inset -6px -8px 0 #0002;flex:none}
.egg .e::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,#4aa8ff 0 8%,transparent 9%),radial-gradient(circle at 65% 62%,#ff4f4a 0 9%,transparent 10%),radial-gradient(circle at 45% 78%,#4fd18b 0 7%,transparent 8%)}
.egg.ready .e{animation:shake .5s infinite}
@keyframes shake{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.note{font-size:13px;color:var(--muted);background:#0e0b26;border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
.prog{display:flex;align-items:center;gap:12px}.prog .bar{flex:1;height:14px}
@media (max-width:1300px){.app{grid-template-columns:200px minmax(0,1fr)}.feed{display:none}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:40;flex-direction:row;padding:6px;border-right:0;border-top:1px solid var(--line);overflow-x:auto}
  .brand,.rail .me{display:none}.nav{display:flex;gap:2px}.nav a{flex-direction:column;gap:0;font-size:11px;padding:6px 10px}.nav a .badge{display:none}
  .main{padding:18px 16px 96px}.hero{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}.podium{grid-template-columns:1fr}
  .slot{grid-template-columns:64px 1fr}.slot>:last-child{grid-column:1/-1}.slot img{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= site réel : ajouts communs ================= */
.rail .me .av img,.me .av img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.me .out{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .box{max-width:520px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:40px 32px}
.login h1{font-size:44px;margin:14px 0 8px}
.login .ball{width:64px;height:64px;margin:0 auto}
.login .ball::after{width:18px;height:18px}
.login p{color:var(--muted);margin-bottom:22px}
.login .err{background:#ff4f4a22;border:1px solid var(--red);color:#ffd2d0;border-radius:12px;padding:10px 14px;margin-bottom:18px;text-align:left}
.btn.discord{background:#5865f2;border-color:transparent;color:#fff;font-size:17px;padding:14px 26px}
.btn.discord:hover{background:#6b77f5}
.rt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.rt::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted)}
.rt.on{color:var(--ok)}.rt.on::before{background:var(--ok);animation:pulse 1.6s infinite}
.spin{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--red);animation:rot .8s linear infinite;margin:60px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.empty{padding:40px 20px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r-lg)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:8px 16px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-weight:700;color:var(--muted)}
.tab.on{background:var(--panel2);color:var(--text);border-color:var(--gold)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.right{margin-left:auto}
.badge-dot{margin-left:auto;background:var(--gold);color:#241b00;font-size:12px;font-weight:800;border-radius:99px;padding:1px 8px}
img.sprite[data-fallback]{min-width:24px;min-height:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.squad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mate{cursor:pointer;color:inherit}
a:not(.btn):not(.out){color:var(--gold);text-decoration-color:rgba(255,200,60,.4)}
a:not(.btn):not(.out):hover{text-decoration-color:currentColor}
.nav a,.brand a{text-decoration:none;color:inherit}