/* Gradations — direction « Raijin »
   Nuit d'encre tramée, foudre jaune, bordures holo. Panneaux biseautés où les illustrations sont tramées et
   hachurées, objets détourés (boîtiers, cartes) posés en débord. Typo manga : Unbounded 900 + Manrope 700/800.
   Référence : design_handoff_raijin (prototype Claude Design). */

:root{
  --ink:#070818;
  --s1:#12142e;
  --s2:#1b1e44;
  --s3:#262a5e;
  --y:#ffde00;
  --pink:#ff5a7e;
  --t1:#f4f3ff;
  --t2:#c6c4e2;
  --t3:#a9a7c8;
  --t4:#8e8cb0;
  --t5:#6f6d92;
  --line:rgba(255,255,255,.16);
  --sep:rgba(255,255,255,.1);
  --bd:1.5px solid var(--line);
  --holo:linear-gradient(135deg,#22e4ff,#9b6bff 35%,#ff4fa3 65%,#ffde00);
  --r:14px;
  --r-s:10px;
  --sh:0 12px 30px -14px rgba(0,0,0,.85);
  --glow:0 14px 30px -8px rgba(255,222,0,.5);
  --obj:drop-shadow(0 16px 22px rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(255,222,0,.18));
  --title-glow:0 0 26px rgba(255,222,0,.45),0 2px 0 #070818;
  --art-filter:saturate(1.3) contrast(1.05) brightness(.85);
  --d:'Unbounded','Dela Gothic One','Hiragino Sans','Noto Sans JP','Yu Gothic',system-ui,sans-serif;
  --sans:'Manrope',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  --ez:cubic-bezier(.77,0,.18,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}

/* ---------- @keyframes du prototype ---------- */
@keyframes holo{0%{background-position:0% 50%}100%{background-position:250% 50%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes boltFlick{0%,100%{opacity:1}31%{opacity:1}32%{opacity:.15}34%{opacity:1}36%{opacity:.3}38%,78%{opacity:1}79%{opacity:0}81%{opacity:1}}
@keyframes arc{0%,100%{opacity:0}5%{opacity:1}8%{opacity:.2}11%{opacity:1}20%{opacity:0}}
@keyframes jitter{0%,100%{transform:translate(0,0)}50%{transform:translate(1.5px,-1px)}}
@keyframes negaflash{0%,92%{opacity:0}93%{opacity:1}94.5%{opacity:0}96%{opacity:1}97.5%,100%{opacity:0}}
@keyframes zapIn{0%{clip-path:polygon(0 0,0% 0,-8% 22%,4% 44%,-6% 66%,6% 84%,0% 100%,0 100%)}100%{clip-path:polygon(0 0,130% 0,122% 22%,134% 44%,124% 66%,136% 84%,130% 100%,0 100%)}}
@keyframes errShake{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes splitL{0%,34%{transform:none}100%{transform:translateX(-108%)}}
@keyframes splitR{0%,34%{transform:none}100%{transform:translateX(108%)}}
@keyframes strikeDraw{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes flash{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
@keyframes popB{0%{opacity:0;transform:scale(.3) rotate(-10deg)}60%{opacity:1;transform:scale(1.18) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
@keyframes stamp{0%{opacity:0;transform:scale(2.6) rotate(-34deg)}65%{opacity:1;transform:scale(.9) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
@keyframes spinIn{0%{transform:rotateY(540deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes tabStrike{0%{transform:scaleY(0);opacity:1}35%{transform:scaleY(1);opacity:1}50%{opacity:.2}60%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes toastIn{0%{opacity:0;transform:translateY(-16px) rotate(-2deg)}100%{opacity:1;transform:rotate(-2deg)}}

/* ---------- base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}
html,body{margin:0;background:var(--ink);color:var(--t1);overflow-x:clip;}
body{font:700 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;min-height:100vh;}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.3px) 0 0/4px 4px;}
a{color:var(--y);font-weight:800;text-decoration:none;}
a:hover{color:#fff;}
button{font-family:inherit;color:inherit;}
img{max-width:100%;height:auto;display:block;}
input,select{outline:none;-webkit-appearance:none;appearance:none;}
input::placeholder{color:var(--t5);opacity:1;}
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
::selection{background:var(--y);color:var(--ink);}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;}

main{max-width:560px;margin:0 auto;padding:calc(var(--safe-top) + 16px) 14px calc(120px + var(--safe-bottom));animation:zapIn .42s var(--ez) backwards;}

/* ---------- typo ---------- */
.d{font-family:var(--d);font-weight:900;}
.kick{display:inline-block;background:var(--y);color:var(--ink);font:900 12px/1.4 var(--d);padding:4px 8px;}
.ttl-img{color:#fff;text-shadow:var(--title-glow);}
h1.big{margin:0;font:900 46px/1 var(--d);}
.sec-h{margin:28px 0 12px;display:flex;align-items:center;gap:8px;font:900 19px/1.2 var(--d);}
.sec-h::before{content:"";flex:none;width:14px;height:22px;background:var(--y);clip-path:polygon(62% 0,8% 58%,42% 58%,29% 100%,92% 35%,58% 35%,92% 0);}
.sec-h .more{margin-left:auto;font:900 11px var(--d);color:var(--t3);}
.lede{margin:14px 0 0;font:700 15px/1.5 var(--sans);color:var(--t2);}
.muted{color:var(--t2);}
.faint{color:var(--t3);}
.up{color:var(--t1);}
.down{color:var(--pink);}
.gold-t{color:var(--y);}
.foot{margin:18px 2px 0;font:700 12px/1.5 var(--sans);color:var(--t4);}
.hint{font:700 13px/1.5 var(--sans);color:var(--t3);margin:10px 2px 0;}

/* éclair SVG décoratif */
.flick{animation:boltFlick 2.8s steps(1) infinite;}

/* ---------- panneau biseauté à bordure holo ---------- */
.pnl{position:relative;--clip:polygon(0 0,100% 0,100% 80%,0 100%);}
.pnl::before{content:"";position:absolute;inset:0;background:var(--holo);clip-path:var(--clip);}
.pnl > .in{position:absolute;inset:3px;clip-path:var(--clip);overflow:hidden;background:var(--s1);}
.pnl .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--art-filter);}
.dots{position:absolute;inset:0;background:radial-gradient(rgba(17,17,17,.55) 1.1px,transparent 1.6px) 0 0/5px 5px;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%);}
.hatch{position:absolute;inset:0;background:repeating-linear-gradient(-24deg,transparent 0 14px,rgba(255,255,255,.55) 14px 15px);mix-blend-mode:screen;}
.hatch.h12{background:repeating-linear-gradient(-24deg,transparent 0 12px,rgba(255,255,255,.5) 12px 13px);}
.pnl .zb{position:absolute;inset:0;width:100%;height:100%;}
.rays{position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:800px;height:800px;margin:-400px 0 0 -400px;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 4.5deg,rgba(255,222,0,.32) 4.5deg 5.2deg);
  -webkit-mask-image:radial-gradient(circle,transparent 70px,#000 220px);mask-image:radial-gradient(circle,transparent 70px,#000 220px);}
.rays.spin{animation:spin 60s linear infinite;}
.obj{filter:var(--obj);}
.obj img{width:100%;}

/* pavé retour collé en haut à gauche d'un panneau */
.backbtn{position:absolute;left:3px;top:3px;z-index:3;min-height:44px;display:flex;align-items:center;gap:4px;padding:0 14px;background:var(--s2);color:#fff;font:700 14px var(--sans);border:none;cursor:pointer;}
.backbtn:hover{color:var(--y);}

/* bandeau d'en-tête (Carnet, Profil, Centrage, articles) */
.banner{position:relative;height:200px;margin-bottom:14px;}
.banner .pnl{position:absolute;inset:0;--clip:polygon(0 0,100% 0,100% 82%,0 100%);}
.banner .head{position:absolute;left:14px;top:20px;z-index:3;}
.banner .head h1{margin:8px 0 0;font:900 48px/1 var(--d);color:#fff;text-shadow:var(--title-glow);}
.banner .cut{position:absolute;z-index:2;right:6px;top:22px;width:112px;transform:rotate(9deg);}
.banner.art-b{height:260px;}
.banner.art-b .pnl{--clip:polygon(0 0,100% 0,100% 84%,0 100%);}
.banner.art-b .cut{right:28px;top:30px;width:128px;transform:rotate(8deg);}
.art-h{margin:16px 0 0;}
.art-h h1{margin:12px 0 0;font:900 32px/1.1 var(--d);text-wrap:pretty;}

/* ---------- surfaces ---------- */
.box{border:var(--bd);background:var(--s1);box-shadow:var(--sh);border-radius:var(--r);}
.card{border:var(--bd);background:var(--s1);box-shadow:var(--sh);border-radius:var(--r);padding:16px;}
.card + .card{margin-top:10px;}
.card .list{box-shadow:none;background:var(--ink)!important;}
.card.link{display:block;color:var(--t1);transition:transform .2s;}
.card.link:hover{transform:translate(-2px,-2px) rotate(-.6deg);color:var(--t1);}
.card.link:active{transform:translate(3px,3px);}
.card.hero{border:none;background:var(--s2);box-shadow:var(--glow);}
.card.hero .grid-bg{display:none;}
.card.hero .muted{color:var(--t2);}

.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px;}
.stat-row.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.stat{border:var(--bd);background:var(--s1);padding:10px 12px;box-shadow:var(--sh);border-radius:var(--r);}
.stat .k{font:800 12px var(--sans);color:var(--t3);}
.stat .v{font:900 22px var(--d);margin-top:4px;font-variant-numeric:tabular-nums;}

.list{border:var(--bd);background:var(--s1);border-radius:var(--r);overflow:hidden;}
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;position:relative;font:700 13px/1.4 var(--sans);}
.row + .row{border-top:1px solid var(--sep);}
.row .main{flex:1;min-width:0;}
.row .t{font:900 14px/1.3 var(--d);}
.row .s{font:700 12.5px var(--sans);color:var(--t3);margin-top:2px;}
.row .end{text-align:right;flex-shrink:0;font:900 14px var(--d);}

/* pastilles */
.tag{flex:none;display:inline-flex;align-items:center;font:900 11px var(--d);padding:3px 7px;border:var(--bd);border-radius:var(--r);white-space:nowrap;background:var(--s1);color:var(--t1);}
.tag.y,.tag.green,.tag.gold{background:var(--y);border-color:var(--y);color:var(--ink);}
.tag.w{background:#fff;border-color:#fff;color:var(--ink);}
.tag.red{background:var(--pink);border-color:var(--pink);color:var(--ink);}
.pill{display:inline-block;font:900 15px var(--d);padding:5px 9px;border:var(--bd);color:var(--ink);transform:rotate(-3deg);}
.pill.g{background:var(--y);}
.pill.m{background:#fff;}
.pill.b{background:var(--pink);}

/* ---------- boutons ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;width:100%;height:62px;padding:0 22px;border:none;background:var(--y);color:var(--ink);
  font:900 19px var(--d);box-shadow:var(--glow);cursor:pointer;transition:transform .08s;text-align:left;}
.cta:active{transform:translate(4px,4px);}
.cta svg{flex:none;}
.btn2{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:var(--bd);background:var(--s1);color:var(--t1);font:800 13px var(--sans);cursor:pointer;border-radius:var(--r-s);transition:transform .08s;}
.btn2:active{transform:translate(3px,3px);}
.btn2.y{background:var(--y);border-color:var(--y);color:var(--ink);box-shadow:var(--sh);}
.btn2.wide{display:flex;width:100%;min-height:48px;font-size:14px;border-radius:var(--r);}
.btn2.danger{color:var(--pink);}
/* anciens boutons des articles et formulaires */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:var(--bd);background:var(--s1);color:var(--t1);font:800 14px var(--sans);border-radius:var(--r);cursor:pointer;}
.btn.small{width:auto;display:inline-flex;padding:0 14px;min-height:44px;border-radius:var(--r-s);font-size:13px;}

/* ---------- formulaires en lignes ---------- */
.form{border:var(--bd);background:var(--s1);border-radius:var(--r);}
.frow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 14px;font:800 14px var(--sans);}
.frow + .frow{border-top:1px solid var(--sep);}
.frow.stack{flex-direction:column;align-items:stretch;gap:6px;padding:12px 14px;}
.inp{width:110px;height:40px;background:var(--ink);border:var(--bd);padding:0 10px;color:var(--t1);border-radius:var(--r-s);text-align:right;font:900 17px var(--d);font-variant-numeric:tabular-nums;}
.inp.txt{width:150px;text-align:left;font:700 15px var(--sans);}
.frow.stack .inp.txt{width:100%;height:44px;padding:0 12px;}
select.inp{width:150px;text-align:left;font:800 14px var(--sans);cursor:pointer;}
select.inp.wide{width:180px;}
.inp:focus{border-color:var(--y);}
.inp option{background:var(--s1);color:var(--t1);}
.links{display:flex;align-items:center;gap:16px;min-height:44px;padding:0 14px;font:800 13px var(--sans);border-top:1px solid var(--sep);}
.links span{color:var(--t4);}
.result{margin-top:10px;background:var(--s2);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 14px var(--sans);}
.result b{font:900 28px var(--d);color:var(--y);}

/* tri */
.sorts{display:flex;border:var(--bd);background:var(--s1);margin-bottom:12px;border-radius:var(--r);overflow:hidden;}
.sorts button{flex:1;min-height:44px;border:none;background:transparent;color:var(--t1);font:900 14px var(--d);cursor:pointer;transition:background .2s;}
.sorts button.on{background:var(--y);color:var(--ink);}

/* cartes du carnet */
.ccard{border:var(--bd);background:var(--s1);box-shadow:var(--sh);padding:14px;border-radius:var(--r);animation:rise .45s cubic-bezier(.2,.9,.25,1) both;}
.ccard + .ccard{margin-top:12px;}
.ccard .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.ccard .mn{min-width:0;}
.ccard .nm{font:900 16px var(--d);}
.ccard .meta{font:700 12px var(--sans);color:var(--t3);margin-top:2px;}
.ccard .pill{flex:none;}
.ccard .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;}
.ccard .nums span{display:block;font:800 11px var(--sans);color:var(--t3);}
.ccard .nums b{font:900 15px var(--d);}
.ccard .bot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;}
.ccard select.inp{width:auto;height:44px;font-size:13px;}
.del{min-height:44px;padding:0 10px;border:none;background:none;font:900 12px var(--d);color:var(--pink);cursor:pointer;}
.empty{border:1px solid var(--sep);padding:28px 16px;text-align:center;font:700 14px/1.5 var(--sans);color:var(--t3);}
.add-cta{margin-top:16px;width:calc(100% - 6px);height:60px;font-size:18px;padding:0 20px;}
.zb.f3{animation:boltFlick 3s steps(1) infinite;}
.mt10{margin-top:10px;}
.mt18{margin-top:18px;}

/* profil */
.banner.pf-b{height:210px;}
.banner.pf-b .rays{--rx:30%;--ry:55%;-webkit-mask-image:radial-gradient(circle,transparent 80px,#000 240px);mask-image:radial-gradient(circle,transparent 80px,#000 240px);}
.banner.pf-b .head h1{font-size:42px;}
.banner.pf-b .cut{right:10px;top:18px;width:108px;transform:rotate(-8deg);}
.rank{margin-top:14px;}
.rank .rk{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;}
.rank .k{font:800 12px var(--sans);color:var(--t3);}
.rank .nmr{display:flex;align-items:baseline;gap:10px;margin-top:2px;}
.rank .n{font:900 54px/1 var(--d);color:#fff;text-shadow:4px 4px 0 var(--y);}
.rank .nm{font:900 22px var(--d);}
.rank .xp{text-align:right;}
.rank .xp b{display:block;font:900 17px var(--d);}
.rank .xp span{display:block;font:700 12px var(--sans);color:var(--t3);max-width:150px;}
.sec-h.plain::before{display:none;}
.resetp{display:block;width:100%;text-align:left;border:var(--bd);background:var(--s1);padding:12px 14px;cursor:pointer;min-height:44px;border-radius:var(--r-s);}
.resetp b{display:block;font:900 15px var(--d);color:var(--pink);}
.resetp span{display:block;font:700 12.5px var(--sans);color:var(--t3);margin-top:2px;}

/* guides */
main.guides{padding-top:calc(var(--safe-top) + 24px);}
.g-h{position:relative;display:inline-block;}
.g-h svg{display:block;margin-top:4px;animation-duration:2.6s;}
.g-lede{margin:8px 0 18px;font:700 16px var(--sans);color:var(--t2);}
.gg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.gt{position:relative;display:block;aspect-ratio:3/4;border:var(--bd);background:var(--s1);box-shadow:var(--sh);overflow:hidden;isolation:isolate;transition:transform .2s;border-radius:var(--r);color:#fff;}
.gt.wide{grid-column:1 / -1;aspect-ratio:16/10;}
.gt:hover{transform:translate(-2px,-2px) rotate(-.6deg);color:#fff;}
.gt:active{transform:translate(3px,3px);}
.gt .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--art-filter);z-index:-2;}
.gt .hatch{z-index:-1;background:repeating-linear-gradient(-24deg,transparent 0 12px,rgba(255,255,255,.45) 12px 13px);}
.gt .peek{position:absolute;right:-6%;top:-6%;width:48%;transform:rotate(12deg);}
.gt.wide .peek{width:30%;}
.gt .kick{position:absolute;left:8px;top:8px;font-size:11px;}
.gt .t{position:absolute;left:0;right:0;bottom:0;background:var(--s2);color:#fff;padding:14px 12px 10px;font:900 14px/1.2 var(--d);clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);}

/* centrage */
.banner.ce-b{height:180px;}
.banner.ce-b .pnl{--clip:polygon(0 0,100% 0,100% 80%,0 100%);}
.banner.ce-b .head{top:auto;left:16px;bottom:44px;}
.banner.ce-b .head h1{margin-top:6px;font-size:40px;}
.banner.ce-b .cut{right:14px;top:16px;width:96px;transform:rotate(8deg);}
.banner.art-b .rays{--rx:70%;}
.banner.art-b .cut2{right:150px;top:56px;width:112px;transform:rotate(-7deg);z-index:1;}
.pnl .art.cardart,.gt .bg.cardart{object-position:50% 22%;}

/* vignettes de cartes (recherche TCGdex) */
.sugg{margin-top:12px;}
.sg-h{margin:0 2px 8px;font:800 13px var(--sans);color:var(--t3);}
.sg-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;}
.sg-row::-webkit-scrollbar{display:none;}
.sg{flex:none;width:92px;display:flex;flex-direction:column;gap:5px;padding:5px;background:var(--s1);border:var(--bd);border-radius:var(--r-s);color:var(--t1);cursor:pointer;text-align:left;}
.sg img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:5px;background:var(--s2);}
.sg span{font:800 11px/1.25 var(--sans);color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg.on{border-color:var(--y);box-shadow:var(--glow);}

/* ---------- article ---------- */
.prose{max-width:60ch;}
.prose p{color:var(--t2);font:700 16px/1.65 var(--sans);margin:0 0 16px;}
.prose p strong,.prose li strong{color:var(--t1);font-weight:800;}
.prose h2{font:900 19px/1.25 var(--d);margin:30px 0 10px;color:var(--t1);}
.prose ul{padding-left:20px;color:var(--t2);margin:0 0 16px;font:700 16px/1.6 var(--sans);}
.prose li{margin-bottom:10px;}
.prose li::marker{color:var(--y);}
.note{margin:18px 0;padding:12px 14px;background:var(--s2);color:var(--t2);font:700 13px/1.5 var(--sans);border-left:4px solid var(--y);}
.note a{color:var(--y)!important;}
.sources{font:700 12.5px/1.6 var(--sans);color:var(--t3);margin-top:22px;}
.sources a{color:var(--t2);text-decoration:underline;}
h2.section{margin:28px 0 12px;display:flex;align-items:center;gap:8px;font:900 19px/1.2 var(--d);}
h2.section::before{content:"";flex:none;width:14px;height:22px;background:var(--y);clip-path:polygon(62% 0,8% 58%,42% 58%,29% 100%,92% 35%,58% 35%,92% 0);}
.kicker{display:inline-block;background:var(--y);color:var(--ink);font:900 11px/1.4 var(--d);padding:4px 8px;margin:0 0 8px;}
.mono{font-variant-numeric:tabular-nums;}

/* barres horizontales des articles */
.hbars{display:grid;gap:10px;}
.hbar{display:grid;grid-template-columns:72px 1fr 54px;align-items:center;gap:10px;font:800 13px var(--sans);}
.hbar .lbl{color:var(--t2);}
.hbar .trk{position:relative;height:18px;border:var(--bd);border-radius:var(--r);overflow:hidden;}
.hbar .trk span{display:block;height:100%;background:radial-gradient(#a9a7c8 1.2px,transparent 1.6px) 0 0/5px 5px;transform-origin:left;animation:grow .6s steps(8,end) both;}
.hbar .val{text-align:right;font:900 13px var(--d);}
.hbar.hl .lbl,.hbar.hl .val{color:var(--y);}
.hbar.hl .trk span{background:var(--y);}
@keyframes grow{from{transform:scaleX(0);}}

/* ---------- barre d'onglets flottante ---------- */
.tabbar{position:fixed;z-index:25;left:14px;right:14px;bottom:calc(18px + var(--safe-bottom));margin:0 auto;max-width:532px;height:66px;padding:7px;
  background:rgba(18,20,46,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:20px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8),0 0 24px -6px rgba(255,222,0,.35);}
.tabbar .rail{position:relative;height:100%;display:flex;}
.tabbar .ind{position:absolute;top:0;bottom:0;width:25%;left:calc(var(--i,0) * 25%);transition:left .28s var(--ez);}
.tabbar .ind::before{content:"";position:absolute;inset:0 3px;background:var(--y);transform:skewX(-14deg);}
.tabbar a{position:relative;flex:1;display:flex;align-items:center;justify-content:center;font:900 13px var(--d);color:var(--t3);transition:color .2s;}
.tabbar a[aria-current="page"]{color:var(--ink);}
.tabbar .strike{position:absolute;bottom:40px;margin-left:-20px;overflow:visible;transform-origin:top;animation:tabStrike .45s ease-out both;pointer-events:none;}

/* ---------- toast XP ---------- */
.toast{position:fixed;left:50%;top:calc(var(--safe-top) + 14px);margin-left:-140px;width:280px;z-index:50;display:flex;align-items:center;gap:10px;background:var(--s1);border:var(--bd);
  box-shadow:var(--glow);padding:10px 14px;font:900 14px var(--d);border-radius:var(--r);pointer-events:none;animation:toastIn .3s cubic-bezier(.3,1.5,.5,1) both;}
.toast svg{flex:none;}

/* ---------- jauge de rang + badges ---------- */
.meter{display:flex;gap:4px;margin-top:16px;}
.meter i{flex:1;height:22px;border:var(--bd);transform:skewX(-20deg);background:var(--s1);}
.meter i.on{background:var(--y);}
.meter.gem i.on{background:linear-gradient(90deg,#22e4ff,#9b6bff,#ff4fa3,#ffde00,#22e4ff);background-size:250% 100%;animation:holo 3s linear infinite;}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.badge{border:var(--bd);background:var(--s1);padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;border-radius:var(--r);}
.badge .st{width:62px;height:62px;border-radius:50%;border:3.5px solid var(--y);color:var(--y);display:flex;align-items:center;justify-content:center;font:900 28px var(--d);transform:rotate(-10deg);background:rgba(255,222,0,.08);}
.badge .n{font:900 14px var(--d);}
.badge .c{font:700 12px/1.35 var(--sans);color:var(--t3);}
.badge.off{background:transparent;opacity:.6;}
.badge.off .st{border-style:dashed;border-color:var(--t5);color:var(--t5);background:transparent;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition:none!important;}
}