/* =====================================================================
   AnimeGacha — design system
   ===================================================================== */
:root{
  --bg:#04050c;
  --bg-2:#070914;
  --surface:#0b0e1e;
  --surface-2:#111528;
  --surface-3:#191e36;
  --line:rgba(160,175,255,.08);
  --line-2:rgba(160,175,255,.13);
  --text:#f4f5ff;
  --muted:#a7add4;
  --faint:#6f76a0;

  --accent:#ff4d8d;
  --accent-2:#8b5cf6;
  --accent-grad:linear-gradient(135deg,#ff4d8d 0%,#b44dff 55%,#6d5dfc 100%);
  --ok:#34d399; --bad:#fb7185; --warn:#fbbf24;

  --r-common:#94a3b8; --r-rare:#3b82f6; --r-ultra:#c026d3; --r-legend:#f59e0b;

  --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg:0 30px 60px -20px rgba(0,0,0,.8);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora','Inter',system-ui,sans-serif;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --tabbar-h:64px;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;overflow-x:clip;
}
body::before{ /* halo d'ambiance fixe */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(139,92,246,.18),transparent 60%),
    radial-gradient(700px 400px at 100% 0%,rgba(255,77,141,.12),transparent 60%);
}
body.no-scroll{overflow:hidden;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0;line-height:1.15;}
p{margin:0;}
a{color:inherit;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;}
input,select{font:inherit;color:inherit;}
.hidden{display:none !important;}
.dim{color:var(--muted);font-weight:400;}
.center{display:flex;justify-content:center;margin-top:20px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

.i{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.i.fill{fill:currentColor;stroke:none;}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:0;font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap;}
.logo b{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.logo-mark{width:26px;height:26px;margin-right:9px;border-radius:8px;background:var(--accent-grad);position:relative;box-shadow:0 6px 18px -6px rgba(255,77,141,.8);flex-shrink:0;}
.logo-mark::before,.logo-mark::after{content:'';position:absolute;width:11px;height:15px;border-radius:3px;border:2px solid #fff;top:5px;}
.logo-mark::before{left:5px;transform:rotate(-10deg);opacity:.7;}
.logo-mark::after{left:10px;transform:rotate(8deg);background:rgba(255,255,255,.25);}
.logo.lg{font-size:1.8rem;}
.logo.lg .logo-mark{margin-right:12px;}
.logo.lg .logo-mark{width:40px;height:40px;border-radius:12px;}
.logo.lg .logo-mark::before,.logo.lg .logo-mark::after{width:17px;height:23px;top:8px;}
.logo.lg .logo-mark::before{left:8px;} .logo.lg .logo-mark::after{left:15px;}
.logo.sm{font-size:1rem;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:999px;padding:10px 18px;
  font-weight:600;font-size:.9rem;line-height:1.2;white-space:nowrap;
  transition:transform .15s var(--ease),background .2s,border-color .2s,box-shadow .2s,opacity .2s,filter .2s;
}
.btn:not(:disabled):active{transform:scale(.97);}
.btn-lg{padding:13px 24px;font-size:.98rem;}
.btn-block{width:100%;}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 10px 30px -10px rgba(255,77,141,.7),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-primary:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 14px 36px -10px rgba(255,77,141,.85),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--text);}
.btn-ghost:not(:disabled):hover{background:rgba(255,255,255,.07);}
.btn-soft{background:var(--surface-3);color:var(--text);}
.btn-soft:not(:disabled):hover{background:#2c2c40;}
.btn-soft.ready{background:rgba(52,211,153,.14);color:var(--ok);border-color:rgba(52,211,153,.35);}
.btn:disabled{opacity:.42;cursor:not-allowed;}
.link-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:.82rem;padding:6px;}
.link-btn:hover{color:var(--text);}
.link-btn .i{width:15px;height:15px;}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.06);color:var(--text);}
.icon-btn:hover{background:rgba(255,255,255,.12);}

.is-busy{position:relative;color:transparent !important;pointer-events:none;}
.is-busy > *{visibility:hidden;}
.is-busy::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite;}

.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ---------- Champs ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:500;color:var(--muted);}
.field > span{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.field input,.select,.search input{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:16px;color:var(--text);transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.search input::placeholder{color:var(--faint);}
.field input:focus,.select:focus,.search input:focus{outline:none;border-color:rgba(255,77,141,.6);box-shadow:0 0 0 4px rgba(255,77,141,.12);}
.hint{font-style:normal;font-size:.75rem;font-weight:500;}
.hint.ok{color:var(--ok);} .hint.bad{color:var(--bad);}
.form-error{color:var(--bad);font-size:.84rem;min-height:1.2em;text-align:center;}
.search{position:relative;display:flex;align-items:center;}
.search .i{position:absolute;left:14px;color:var(--faint);pointer-events:none;}
.search input{padding-left:42px;border-radius:999px;background:var(--surface);}
.search.sm input{padding-top:9px;padding-bottom:9px;font-size:15px;}
.select{width:auto;border-radius:999px;padding:9px 36px 9px 14px;font-size:.88rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1b5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;-webkit-appearance:none;}

/* ---------- Segmented / chips ---------- */
.segmented{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;}
.segmented.full{display:flex;width:100%;}
.segmented.full .seg{flex:1;}
.seg{border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .2s,color .2s;}
.seg.active{background:var(--surface-3);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.3);}
.seg-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:.72rem;display:inline-grid;place-items:center;}
.seg-count:empty{display:none;}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin-bottom:16px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:transparent;color:var(--muted);padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:500;transition:all .15s;}
.chip:hover{color:var(--text);}
.chip.active{background:var(--text);color:var(--bg);border-color:var(--text);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--r-common);}
.dot.r-rare{background:var(--r-rare);} .dot.r-ultra{background:var(--r-ultra);} .dot.r-legend{background:var(--r-legend);}

/* ---------- Vues ---------- */
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;}

/* =====================================================================
   ACCUEIL
   ===================================================================== */
#view-landing{overflow-x:hidden;}
.l-nav{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;padding:calc(18px + var(--safe-top)) 24px 18px;}
.l-nav-actions{display:flex;gap:10px;}
.hero{max-width:1180px;margin:0 auto;padding:40px 24px 80px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:rgba(255,77,141,.1);border:1px solid rgba(255,77,141,.25);color:#ffb3cd;font-size:.8rem;font-weight:600;margin-bottom:22px;}
.eyebrow .i{width:16px;height:16px;}
.hero h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;}
.grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lead{color:var(--muted);font-size:clamp(1rem,1.4vw,1.14rem);max-width:520px;margin-top:20px;line-height:1.6;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.hero-stats{display:flex;gap:36px;margin:40px 0 0;padding:0;}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats dt{font-family:var(--font-display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;}
.hero-stats dd{margin:0;color:var(--muted);font-size:.84rem;}

.hero-visual{position:relative;height:480px;display:flex;align-items:center;justify-content:center;}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(180,77,255,.32),rgba(180,77,255,.12) 40%,transparent 68%);}
.fan{position:relative;width:100%;height:100%;}
.fan{--spread:92px;--lift:16px;}
.fan:hover{--spread:120px;}
.fan .tcard{position:absolute;left:50%;top:50%;width:210px;margin:-147px 0 0 -105px;
  transform:translateX(calc(var(--k) * var(--spread))) translateY(calc(var(--ak) * var(--lift))) rotate(calc(var(--k) * 7deg));
  transition:transform .6s var(--ease);animation:fanIn .9s var(--ease) both;}
.fan .tcard:hover{transform:translateX(calc(var(--k) * var(--spread))) translateY(calc(var(--ak) * var(--lift) - 24px)) rotate(calc(var(--k) * 7deg)) scale(1.04);z-index:10 !important;}
@keyframes fanIn{from{opacity:0;transform:translateY(40px) scale(.9);}}
.fan:hover .tcard{transition-duration:.4s;}

.l-section{max-width:1180px;margin:0 auto;padding:70px 24px;}
.l-head{text-align:center;max-width:640px;margin:0 auto 42px;}
.kicker{display:inline-block;color:var(--accent);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.l-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;}
.l-sub{color:var(--muted);margin-top:14px;line-height:1.6;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;overflow:hidden;}
.step-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,77,141,.12);color:var(--accent);margin-bottom:22px;}
.step-ico .i{width:24px;height:24px;}
.step-n{position:absolute;top:20px;right:24px;font-family:var(--font-display);font-weight:800;font-size:2.6rem;color:rgba(255,255,255,.04);}
.step h3{font-size:1.15rem;margin-bottom:8px;}
.step p{color:var(--muted);font-size:.92rem;line-height:1.6;}

.rarity-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rtile{--c:var(--r-common);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.rtile::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--c);}
.rtile.r-rare{--c:var(--r-rare);} .rtile.r-ultra{--c:var(--r-ultra);} .rtile.r-legend{--c:var(--r-legend);}
.rtile b{font-family:var(--font-display);font-size:1.05rem;}
.rt-odds{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--c);}
.rtile p{color:var(--muted);font-size:.85rem;}
.gem{width:14px;height:14px;transform:rotate(45deg);border-radius:3px;background:var(--c,var(--r-common));box-shadow:0 0 12px var(--c,transparent);margin-bottom:6px;}

.l-final{max-width:1180px;margin:30px auto 0;padding:70px 24px;text-align:center;position:relative;}
.l-final::before{content:'';position:absolute;inset:0 24px;border-radius:var(--radius-xl);background:radial-gradient(600px 240px at 50% 0%,rgba(255,77,141,.18),transparent 70%),var(--surface);border:1px solid var(--line);z-index:-1;}
.l-final h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;}
.l-final p{color:var(--muted);margin:12px 0 26px;}
.l-footer{max-width:1180px;margin:0 auto;padding:50px 24px calc(40px + var(--safe-bottom));display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--faint);font-size:.8rem;}
.l-footer p{max-width:560px;line-height:1.6;}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:10px;text-align:center;gap:10px;}
  .hero-copy{display:flex;flex-direction:column;align-items:center;}
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center;}
  .hero-visual{height:360px;order:-1;}
  .fan{--spread:62px;--lift:12px;} .fan:hover{--spread:70px;}
  .fan .tcard{width:160px;margin:-112px 0 0 -80px;}
  .steps,.rarity-tiles{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .hide-sm{display:none !important;}
  .hero-visual{height:300px;}
  .fan{--spread:48px;--lift:10px;} .fan:hover{--spread:52px;}
  .fan .tcard{width:140px;margin:-98px 0 0 -70px;}
  .hero-cta .btn{width:100%;}
  .hero-stats{gap:26px;}
  .steps{grid-template-columns:1fr;}
  .l-section{padding:50px 20px;}
}

/* =====================================================================
   APPLICATION
   ===================================================================== */
.app-top{position:sticky;top:0;z-index:40;background:rgba(4,5,12,.97);border-bottom:1px solid var(--line);padding-top:var(--safe-top);}
.app-top-inner{max-width:1180px;margin:0 auto;height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.main-nav{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);}
.nav-btn{position:relative;display:flex;align-items:center;gap:8px;border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.88rem;transition:background .2s,color .2s;}
.nav-btn:hover{color:var(--text);}
.nav-btn.active{background:var(--surface-3);color:var(--text);}
.nav-btn .i{width:17px;height:17px;}
.nav-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;display:inline-grid;place-items:center;}
.top-right{display:flex;align-items:center;gap:8px;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.86rem;font-variant-numeric:tabular-nums;}
button.pill:hover{border-color:var(--line-2);}
.pill .i{width:15px;height:15px;color:var(--accent);}
.pill .i.fill{color:var(--warn);}
.user-menu{position:relative;}
.avatar{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent-grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;display:grid;place-items:center;text-transform:uppercase;}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:6px;box-shadow:var(--shadow-lg);animation:fadeUp .15s var(--ease);z-index:50;}
.menu-head{display:flex;flex-direction:column;padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:.8rem;}
.menu-head b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:10px 12px;border-radius:10px;font-size:.9rem;text-align:left;}
.menu-item:hover{background:rgba(255,255,255,.06);}
.menu-item[aria-checked="false"]{color:var(--muted);}
/* Bandeau "confirme ton email" */
.verify-banner{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,77,141,.12),rgba(139,92,246,.12));border:1px solid rgba(255,77,141,.3);font-size:.88rem;line-height:1.45;}
.verify-banner > .i{width:22px;height:22px;color:var(--accent);}
.verify-banner > span{flex:1;min-width:0;overflow-wrap:anywhere;}
.verify-banner .dim{color:var(--muted);}
.verify-banner .btn{flex-shrink:0;}
@media (max-width:640px){ .verify-banner{flex-wrap:wrap;} .verify-banner .btn{width:100%;} }

.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 80px;}
.panel{animation:fadeUp .3s var(--ease);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 18px;}
.section-head h2{font-size:1.45rem;font-weight:700;}
.sub{color:var(--muted);font-size:.9rem;margin-top:4px;}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.filters{display:flex;gap:10px;margin-bottom:12px;}
.filters .search{flex:1;max-width:360px;}

/* Barre d'onglets en bas sur mobile, façon appli native */
@media (max-width:760px){
  .app-top-inner{height:56px;padding:0 16px;}
  .main-nav{position:fixed;left:0;right:0;bottom:0;z-index:45;border-radius:0;border:none;border-top:1px solid var(--line);padding:6px 8px calc(6px + var(--safe-bottom));background:rgba(6,7,16,.98);justify-content:space-around;gap:0;}
  .nav-btn{flex:1;flex-direction:column;gap:3px;padding:6px 2px;font-size:.68rem;font-weight:600;border-radius:12px;}
  .nav-btn.active{background:transparent;color:var(--accent);}
  .nav-btn .i{width:22px;height:22px;}
  .nav-badge{position:absolute;top:0;left:calc(50% + 6px);}
  .wrap{padding:20px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 32px);}
  .section-head h2{font-size:1.25rem;}
  .hide-sm{display:none !important;}
}

/* ---------- Packs : scène + widgets ---------- */
.pack-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;margin-bottom:44px;}
.stage{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);background:var(--surface);min-height:470px;display:flex;}
.stage-bg{position:absolute;inset:0;opacity:.55;transition:background .4s;}
.stage-bg.mystery{background:radial-gradient(circle at 50% 40%,rgba(180,77,255,.6),transparent 60%),radial-gradient(circle at 30% 80%,rgba(255,77,141,.4),transparent 55%);}
.stage::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(4,5,12,.9),transparent 60%);pointer-events:none;}
.stage-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px 20px;}
.stage-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:90%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn-open{min-width:240px;}

/* Booster */
.booster{
  position:relative;width:200px;aspect-ratio:5/7.4;border:none;padding:0;border-radius:10px;
  background:linear-gradient(160deg,#2a1b4d,#120c24);overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 60px -10px rgba(180,77,255,.5);
  transform-style:preserve-3d;transition:transform .3s var(--ease),box-shadow .3s;animation:hover 4s ease-in-out infinite;
}
@keyframes hover{0%,100%{translate:0 0;rotate:0deg;}50%{translate:0 -8px;rotate:.8deg;}}
.booster:not(:disabled):hover{transform:scale(1.03);}
.booster:disabled{animation:none;filter:grayscale(.6) brightness(.7);cursor:not-allowed;}
.booster-art{position:absolute;inset:0;background-size:cover;background-position:center 20%;}
.booster-art.mystery{background:
  radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 35%),
  conic-gradient(from 200deg at 50% 45%,#ff4d8d,#b44dff,#6d5dfc,#22d3ee,#ff4d8d);opacity:.85;}
.booster-art.mystery::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:6rem;color:rgba(255,255,255,.9);text-shadow:0 6px 30px rgba(0,0,0,.4);padding-bottom:14%;}
.booster::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,5,12,.55) 0%,transparent 22%,transparent 55%,rgba(4,5,12,.92) 100%);}
.booster-crimp{position:absolute;left:0;right:0;height:9px;z-index:3;background:rgba(255,255,255,.3);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;}
.booster-crimp.top{top:0;} .booster-crimp.bottom{bottom:0;transform:scaleY(-1);}
.booster-foil{position:absolute;inset:0;z-index:2;overflow:hidden;}
.booster-foil::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:60%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.22),transparent);animation:foil 4s linear infinite;will-change:transform;}
@keyframes foil{from{transform:translateX(0);}to{transform:translateX(370%);}}
.booster-brand{position:absolute;z-index:3;top:18px;left:0;right:0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.02em;}
.booster-brand b{color:#ffb3cd;}
.booster-title{position:absolute;z-index:3;left:12px;right:12px;bottom:34px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.6);}
.booster-count{position:absolute;z-index:3;bottom:16px;left:0;right:0;text-align:center;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;}
.booster.shake{animation:boosterShake .6s ease;}
@keyframes boosterShake{0%,100%{transform:rotate(0) scale(1);}15%{transform:rotate(-5deg) scale(1.04);}30%{transform:rotate(5deg) scale(1.06);}45%{transform:rotate(-4deg) scale(1.08);}60%{transform:rotate(4deg) scale(1.1);}80%{transform:rotate(0) scale(1.14);filter:brightness(1.6);}}

.side{display:flex;flex-direction:column;gap:14px;}
.widget .btn{white-space:normal;}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:12px;}
.widget-head{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.widget-head .dim{text-transform:none;letter-spacing:0;font-weight:500;}
.packs-count{display:flex;align-items:baseline;gap:10px;}
.packs-count b{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.packs-count span{color:var(--muted);font-size:.86rem;}
.free-row{display:flex;align-items:center;gap:14px;}
.ring{width:48px;height:48px;transform:rotate(-90deg);flex-shrink:0;}
.ring circle{fill:none;stroke-width:4;}
.ring-bg{stroke:var(--surface-3);}
.ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .6s var(--ease);}
.ring.done .ring-fg{stroke:var(--ok);}
.free-text{display:flex;flex-direction:column;}
.free-text b{font-size:1.05rem;font-variant-numeric:tabular-nums;}
.free-text span{color:var(--muted);font-size:.8rem;}
.progress{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.progress > span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#fbbf24,#f97316);transition:width .6s var(--ease);}
.loyalty-row{display:flex;align-items:baseline;gap:6px;}
.loyalty-row b{font-family:var(--font-display);font-size:1.3rem;font-variant-numeric:tabular-nums;}

@media (max-width:900px){
  .pack-layout{grid-template-columns:minmax(0,1fr);}
  .stage{min-height:420px;}
  .side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .side{grid-template-columns:minmax(0,1fr);gap:12px;}
  .widget{padding:14px;gap:10px;}
  .booster{width:170px;}
  .btn-open{min-width:0;width:100%;max-width:320px;}
  .free-row{gap:10px;} .ring{width:40px;height:40px;}
}

/* ---------- Grilles d'animes (posters) ---------- */
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:18px;}
.poster{position:relative;border:none;padding:0;background:var(--surface);border-radius:var(--radius);overflow:hidden;aspect-ratio:2/3;text-align:left;box-shadow:0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s;}
.poster:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-2),var(--shadow);}
.poster.selected{box-shadow:0 0 0 2px var(--accent),0 16px 40px -14px rgba(255,77,141,.6);}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,5,12,.95) 92%);}
.poster-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:12px;display:flex;flex-direction:column;gap:7px;}
.poster-title{font-weight:700;font-size:.88rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.poster-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.mini-progress{height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;}
.mini-progress span{display:block;height:100%;background:var(--accent-grad);border-radius:inherit;}
.poster-check{position:absolute;z-index:2;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--accent);display:none;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4);}
.poster-check .i{width:16px;height:16px;stroke-width:3;}
.poster.selected .poster-check{display:grid;}
.poster.mystery{background:conic-gradient(from 200deg at 50% 45%,#ff4d8d,#b44dff,#6d5dfc,#22d3ee,#ff4d8d);}
.poster.mystery .mystery-ico{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:30%;}
.poster.mystery .mystery-ico .i{width:54px;height:54px;color:#fff;stroke-width:1.6;}
.poster-fallback{position:absolute;inset:0;background:linear-gradient(160deg,var(--c,#2a2240),#070914);}
@media (max-width:640px){ .poster-grid{grid-template-columns:repeat(3,1fr);gap:10px;} .poster-body{padding:8px;gap:5px;} .poster-title{font-size:.74rem;} .poster-meta{font-size:.64rem;} }

/* =====================================================================
   CARTES À COLLECTIONNER
   ===================================================================== */
.tcard{
  --frame:linear-gradient(160deg,#64748b,#334155 45%,#1e293b);
  --glow:rgba(148,163,184,.25);
  --c:var(--r-common);
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  position:relative;display:block;width:100%;aspect-ratio:5/7;border-radius:14px;padding:3px;border:none;
  background:var(--frame);box-shadow:0 12px 30px -14px rgba(0,0,0,.9),0 0 24px -10px var(--glow);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .35s var(--ease),box-shadow .3s;text-align:left;color:var(--text);
}
.tcard.r-rare{--frame:linear-gradient(160deg,#93c5fd,#3b82f6 40%,#1e3a8a);--glow:rgba(59,130,246,.5);--c:var(--r-rare);}
.tcard.r-ultra{--frame:linear-gradient(160deg,#f0abfc,#c026d3 40%,#581c87);--glow:rgba(192,38,211,.55);--c:var(--r-ultra);}
.tcard.r-legend{--frame:linear-gradient(160deg,#fef3c7,#fbbf24 25%,#d97706 55%,#fde68a 80%,#b45309);--glow:rgba(245,158,11,.65);--c:var(--r-legend);}
.tcard-inner{position:relative;height:100%;border-radius:11px;overflow:hidden;background:#0c0c14;}
.tcard-art{position:absolute;inset:0;}
.tcard-art img,.tcard-art svg{width:100%;height:100%;object-fit:cover;object-position:50% 15%;}
.tcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,12,.35) 0%,transparent 18%,transparent 48%,rgba(4,5,12,.85) 74%,#04050c 100%);}
.tcard-top{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;z-index:2;}
.rarity-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:999px;background:rgba(4,5,12,.72);border:1px solid rgba(255,255,255,.14);font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c);}
.rarity-tag .gem{width:7px;height:7px;margin:0;border-radius:1.5px;background:var(--c);box-shadow:0 0 6px var(--c);}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.03em;}
.badge.new{background:var(--accent);color:#fff;box-shadow:0 4px 12px -2px rgba(255,77,141,.8);}
.badge.count{background:rgba(255,255,255,.92);color:#0c0c14;}
.badge.lock{background:rgba(4,5,12,.8);border:1px solid var(--line-2);color:var(--muted);}
.badge.lock .i{width:11px;height:11px;}
.tcard-info{position:absolute;left:0;right:0;bottom:0;padding:10px 11px 11px;z-index:2;}
.tcard-name{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tcard-anime{font-size:.68rem;color:rgba(255,255,255,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.tcard-stats{display:flex;gap:10px;margin-top:8px;font-size:.7rem;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88);}
.tcard-stats span{display:inline-flex;align-items:center;gap:3px;}
.tcard-stats .i{width:12px;height:12px;color:var(--c);}
.tcard-stats .fav{margin-left:auto;color:rgba(255,255,255,.6);}
.tcard-stats .fav .i{color:#fb7185;}
/* Reflet holographique (Ultra Rare / Légendaire) + reflet de lumière qui suit le pointeur */
.tcard-foil,.tcard-glare{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;}
.tcard.r-ultra .tcard-foil,.tcard.r-legend .tcard-foil{
  background:repeating-linear-gradient(115deg,rgba(255,0,128,.0) 0%,rgba(255,119,0,.16) 8%,rgba(255,255,0,.14) 16%,rgba(0,255,170,.14) 24%,rgba(0,170,255,.16) 32%,rgba(170,0,255,.14) 40%,rgba(255,0,128,0) 48%);
  background-size:220% 220%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.55;
}
.tcard.tilting .tcard-foil,.flip-card.flipped .tcard-foil{animation:holo 6s linear infinite;}
.tcard.r-ultra .tcard-foil{opacity:.3;}
@keyframes holo{0%{background-position:0% 0%;}100%{background-position:220% 220%;}}
.tcard-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:overlay;}
.tcard.tilting{transition:transform .08s linear,box-shadow .3s;}
.tcard.tilting .tcard-glare{opacity:1;}
button.tcard{cursor:pointer;}
button.tcard:hover{box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 34px -8px var(--glow);}
.tcard.selected{outline:3px solid var(--accent);outline-offset:3px;}
.tcard.selected::after{content:'';position:absolute;z-index:4;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.5);}
.tcard.is-locked{opacity:.55;}
/* Perso pas encore obtenu (album d'un anime) : aperçu flouté + cadenas */
.tcard.missing{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 40%,#111528),#14141e 70%);box-shadow:none;}
.tcard.missing .tcard-inner{background:#0c0c14;}
.tcard.missing .tcard-art img,.tcard.missing .tcard-art svg{filter:grayscale(1) blur(6px) brightness(.3);transform:scale(1.15);}
.tcard.missing .tcard-art::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.55)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center 42%/28px no-repeat;}
.tcard.missing .tcard-foil,.tcard.missing .tcard-glare{display:none;}
.tcard.missing .tcard-name{color:var(--faint);}

/* Petites cartes (sélecteurs d'échange, grilles denses) */
.tcard.sm{border-radius:11px;padding:2px;}
.tcard.sm .tcard-inner{border-radius:9px;}
.tcard.sm .tcard-top{top:5px;left:5px;right:5px;}
.tcard.sm .rarity-tag{padding:2px;border:none;background:rgba(4,5,12,.6);}
.tcard.sm .rarity-tag .label{display:none;}
.tcard.sm .rarity-tag .gem{width:8px;height:8px;margin:3px;}
.tcard.sm .tcard-info{padding:6px 7px 7px;}
.tcard.sm .tcard-name{font-size:.72rem;}
.tcard.sm .tcard-anime{display:none;}
.tcard.sm .tcard-stats{margin-top:3px;font-size:.6rem;gap:6px;}
.tcard.sm .tcard-stats .i{width:10px;height:10px;}
.tcard.sm .tcard-stats .fav{display:none;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:24px;}
.card-grid.picker{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:460px;overflow-y:auto;padding:6px 8px 6px 4px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.card-grid > .empty-state,.card-grid > .empty,.poster-grid > .empty-state{grid-column:1/-1;}
@media (max-width:640px){
  /* Mobile : 2 cartes par ligne (au lieu de 3) pour qu'elles restent lisibles */
  .card-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .card-grid .tcard:not(.sm) .tcard-top{top:6px;left:6px;right:6px;}
  .card-grid .tcard:not(.sm) .rarity-tag{font-size:.55rem;}
  .card-grid .tcard:not(.sm) .tcard-info{padding:8px 9px 9px;}
  .card-grid .tcard:not(.sm) .tcard-name{font-size:.86rem;}
  .card-grid .tcard:not(.sm) .tcard-anime{font-size:.64rem;}
  .card-grid .tcard:not(.sm) .tcard-stats{font-size:.64rem;gap:8px;margin-top:6px;}
  .card-grid .tcard:not(.sm) .badge{font-size:.56rem;padding:2px 6px;}
}

.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;}
.skeleton.card{aspect-ratio:5/7;}
.skeleton.poster-sk{aspect-ratio:2/3;}
.skeleton.row{height:150px;}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 20px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);color:var(--muted);}
.empty-state .i{width:34px;height:34px;color:var(--faint);stroke-width:1.5;}
.empty-state b{color:var(--text);font-size:1.02rem;}
.empty-state .btn{margin-top:8px;}
.empty{color:var(--muted);font-size:.88rem;text-align:center;padding:26px 16px;border:1px dashed var(--line-2);border-radius:var(--radius);}

/* ---------- Collection ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:2px;}
.kpi b{font-family:var(--font-display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;}
.kpi span{color:var(--muted);font-size:.8rem;}
.kpi.legend b{color:var(--r-legend);}
@media (max-width:640px){ .kpis{grid-template-columns:repeat(2,1fr);gap:10px;} .kpi{padding:12px 14px;} .kpi b{font-size:1.3rem;} }

.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.series-card{display:flex;gap:14px;align-items:stretch;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);text-align:left;transition:transform .2s var(--ease),border-color .2s,background .2s;}
.series-card:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--surface-2);}
.series-cover{width:72px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface-3);}
.series-cover img{width:100%;height:100%;object-fit:cover;}
.series-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.series-title{font-weight:700;font-size:.95rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.series-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.series-meta .pct{color:var(--text);font-weight:700;}
.series-card .mini-progress{height:6px;background:var(--surface-3);}
.series-card.complete .mini-progress span{background:linear-gradient(90deg,#fbbf24,#f59e0b);}
.series-tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--muted);}
.tag.legend{color:var(--r-legend);background:rgba(245,158,11,.12);}
.tag .i{width:11px;height:11px;}

/* Album d'un anime */
.album-hero{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);margin-bottom:24px;background:var(--surface);}
.album-banner{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35;filter:saturate(1.2);}
.album-banner.blur{opacity:.6;}
.album-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,12,.95) 0%,rgba(4,5,12,.7) 50%,rgba(4,5,12,.4));}
.album-inner{position:relative;z-index:1;display:flex;gap:22px;padding:22px;align-items:flex-end;}
.album-cover{width:120px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow);background:var(--surface-3);}
.album-cover img{width:100%;height:100%;object-fit:cover;}
.album-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.album-info h2{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;}
.album-sub{color:var(--muted);font-size:.86rem;}
.album-progress{display:flex;align-items:center;gap:12px;max-width:440px;}
.album-progress .mini-progress{flex:1;height:8px;background:rgba(255,255,255,.12);}
.album-progress b{font-variant-numeric:tabular-nums;font-size:.9rem;}
.album-rarities{display:flex;gap:8px;flex-wrap:wrap;}
.album-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.back-btn{display:inline-flex;align-items:center;gap:4px;border:none;background:none;color:var(--muted);font-weight:600;font-size:.88rem;padding:6px 8px 6px 0;margin-bottom:12px;}
.back-btn:hover{color:var(--text);}
@media (max-width:640px){ .album-inner{padding:18px;} .album-cover{display:none;} .album-actions .btn{flex:1;white-space:normal;} .album-hero::after{background:linear-gradient(180deg,rgba(4,5,12,.55),rgba(4,5,12,.95) 70%);} }

/* ---------- Échanges ---------- */
.trades-list{display:flex;flex-direction:column;gap:14px;}
.trade-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:16px;animation:fadeUp .25s var(--ease);}
.trade-row.incoming{border-color:rgba(255,77,141,.35);background:linear-gradient(180deg,rgba(255,77,141,.06),var(--surface) 40%);}
.trade-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.trade-who{display:flex;align-items:center;gap:10px;}
.trade-who .avatar{width:32px;height:32px;font-size:.8rem;cursor:default;}
.trade-who .meta{color:var(--muted);font-size:.78rem;}
.status-pill{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-3);color:var(--muted);}
.status-pill.in{background:rgba(255,77,141,.15);color:#ffb3cd;}
.trade-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;}
.trade-side{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:100%;}
.trade-side-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.trade-arrow{width:38px;height:38px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;color:var(--muted);}
.mini-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;}
.mini-cards .tcard{padding:2px;border-radius:8px;}
.mini-cards .tcard .tcard-inner{border-radius:6px;}
.mini-cards .tcard .tcard-top,.mini-cards .tcard .tcard-stats,.mini-cards .tcard .tcard-anime{display:none;}
.mini-cards .tcard .tcard-info{padding:4px 5px;}
.mini-cards .tcard .tcard-name{font-size:.58rem;font-family:var(--font);}
.mini-none{color:var(--faint);font-size:.82rem;font-style:italic;}
.trade-actions{display:flex;gap:10px;justify-content:flex-end;}
.trade-actions .btn.confirming{background:var(--bad);color:#fff;border-color:var(--bad);}
.trade-actions .btn-primary.confirming{background:var(--ok);color:#04130c;box-shadow:none;}
@media (max-width:640px){
  .trade-sides{grid-template-columns:1fr;}
  .trade-arrow{justify-self:center;transform:rotate(90deg);}
  .trade-actions .btn{flex:1;}
}
.trade-form{display:flex;flex-direction:column;gap:18px;}
.t-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.t-step-head{display:flex;align-items:center;gap:10px;}
.t-step-head h3{font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.t-num{width:26px;height:26px;border-radius:50%;background:var(--accent-grad);display:grid;place-items:center;font-size:.8rem;font-weight:800;flex-shrink:0;}
.count-pill{background:var(--surface-3);border-radius:999px;padding:1px 9px;font-size:.75rem;font-family:var(--font);}
.inline-field{display:flex;gap:10px;max-width:560px;}
.inline-field .search{flex:1;}
.t-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.t-submit{position:sticky;bottom:16px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:rgba(19,19,29,.98);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.t-submit .btn{width:100%;max-width:420px;}
.t-submit .form-error:empty{display:none;}
@media (max-width:900px){ .t-cols{grid-template-columns:1fr;} }
@media (max-width:760px){ .t-submit{bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 10px);} .inline-field{flex-direction:column;} }

/* ---------- Packs : stock, dernières trouvailles ---------- */
.stage-sub{font-size:.8rem;color:var(--muted);text-align:center;min-height:1.2em;}
.stock{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;}
.stock span{height:8px;border-radius:3px;background:var(--surface-3);transition:background .3s;}
.stock span.on{background:var(--accent-grad);box-shadow:0 0 8px -2px rgba(255,77,141,.8);}
.widget-note{font-size:.74rem;color:var(--faint);line-height:1.45;}
.recent-strip{display:grid;grid-auto-flow:column;grid-auto-columns:196px;gap:18px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:thin;scroll-snap-type:x mandatory;}
.recent-strip > *{scroll-snap-align:start;}
.recent-strip > .empty-state{grid-column:1/-1;width:100%;}
@media (max-width:640px){ .recent-strip{grid-auto-columns:148px;gap:12px;} }
.catalog-search{margin-bottom:18px;}

/* ---------- Avatars ---------- */
.avatar{overflow:hidden;padding:0;}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;}
.avatar.lg{width:88px;height:88px;font-size:2rem;box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(255,77,141,.6);}
.avatar.md{width:44px;height:44px;font-size:1.05rem;}

/* ---------- Classement ---------- */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin:6px 0 22px;}
.podium-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:none;color:inherit;background:linear-gradient(180deg,var(--surface-2),var(--surface));border-radius:var(--radius-lg);padding:20px 12px 18px;box-shadow:0 0 0 1px var(--line);transition:transform .2s var(--ease);}
.podium-slot:hover{transform:translateY(-3px);}
.podium-slot.p1{padding-top:30px;box-shadow:0 0 0 1px rgba(245,158,11,.45),0 20px 50px -24px rgba(245,158,11,.6);}
.podium-slot .medal{position:absolute;top:-12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#1a1204;}
.podium-slot.p1 .medal{background:linear-gradient(160deg,#fde68a,#f59e0b);}
.podium-slot.p2 .medal{background:linear-gradient(160deg,#f1f5f9,#94a3b8);}
.podium-slot.p3 .medal{background:linear-gradient(160deg,#fed7aa,#c2410c);color:#fff;}
.podium-slot .avatar{width:64px;height:64px;font-size:1.5rem;}
.podium-slot.p1 .avatar{width:80px;height:80px;box-shadow:0 0 0 3px #f59e0b;}
.podium-name{font-weight:700;font-size:.92rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-value{font-family:var(--font-display);font-weight:800;font-size:1.3rem;}
.podium-value small,.rank-value small{font-family:var(--font);font-weight:500;font-size:.72rem;color:var(--muted);margin-left:4px;}
.rank-list{display:flex;flex-direction:column;gap:8px;}
.rank-row{display:grid;grid-template-columns:44px 40px 1fr auto;align-items:center;gap:12px;width:100%;border:none;color:inherit;text-align:left;background:var(--surface);border-radius:var(--radius);padding:10px 16px 10px 10px;box-shadow:0 0 0 1px var(--line);transition:background .15s;}
.rank-row:hover{background:var(--surface-2);}
.rank-row.me{box-shadow:0 0 0 1px rgba(255,77,141,.5);background:linear-gradient(90deg,rgba(255,77,141,.1),var(--surface) 60%);}
.rank-n{font-family:var(--font-display);font-weight:800;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;}
.rank-row .avatar{width:40px;height:40px;font-size:.95rem;}
.rank-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank-name .you{font-size:.7rem;font-weight:700;color:var(--accent);margin-left:6px;}
.rank-value{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;}
.rank-me{position:sticky;bottom:16px;margin-top:14px;}
.rank-me .rank-row{background:rgba(26,26,39,.98);box-shadow:0 0 0 1px rgba(255,77,141,.5),var(--shadow-lg);}
@media (max-width:760px){ .rank-me{bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 10px);} }
@media (max-width:560px){
  .podium{gap:8px;} .podium-slot{padding:18px 6px 14px;}
  .podium-slot .avatar{width:48px;height:48px;} .podium-slot.p1 .avatar{width:60px;height:60px;}
  .podium-value{font-size:1.05rem;} .podium-name{font-size:.8rem;}
  .rank-row{grid-template-columns:32px 36px 1fr auto;gap:10px;}
}

/* ---------- Profil d'un joueur ---------- */
.player-card{max-width:620px;}
.player-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.player-head h2{margin:0 0 4px;}
.player-head .sub{margin:0;}
.player-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.player-stats .fact b{font-family:var(--font-display);font-size:1.25rem;}
.player-showcase{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0 22px;}
.player-showcase .tcard{padding:2px;border-radius:9px;}
.player-showcase .tcard .tcard-inner{border-radius:7px;}
.player-showcase .tcard .tcard-top,.player-showcase .tcard .tcard-stats,.player-showcase .tcard .tcard-anime{display:none;}
.player-showcase .tcard .tcard-info{padding:4px 5px;}
.player-showcase .tcard .tcard-name{font-size:.56rem;font-family:var(--font);}
.player-actions{display:flex;gap:10px;flex-wrap:wrap;}
.player-actions .btn{flex:1;}
@media (max-width:560px){ .player-stats{grid-template-columns:repeat(2,1fr);} .player-showcase{grid-template-columns:repeat(3,1fr);} }

/* ---------- Choix de la photo ---------- */
.avatar-card{max-width:560px;}
.avatar-card .search{margin:16px 0 14px;}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px;max-height:50vh;overflow-y:auto;padding:4px;margin-bottom:12px;}
.avatar-opt{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;color:var(--muted);font-size:.68rem;padding:4px;border-radius:12px;}
.avatar-opt:hover{background:var(--surface-2);color:var(--text);}
.avatar-opt .avatar{width:60px;height:60px;box-shadow:0 0 0 2px var(--c,var(--line-2));}
.avatar-opt.current .avatar{box-shadow:0 0 0 3px var(--accent);}
.avatar-opt span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.avatar-opt.r-legend{--c:var(--r-legend);} .avatar-opt.r-ultra{--c:var(--r-ultra);} .avatar-opt.r-rare{--c:var(--r-rare);}
.trade-who .avatar,.player-head .avatar{cursor:default;}

/* =====================================================================
   FENÊTRES
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,4,8,.82);animation:fadeIn .2s;}
.modal-card{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-lg);animation:modalIn .3s var(--spring);}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96);}}
.modal-card h2{font-size:1.4rem;margin:16px 0 18px;}
.modal-x{position:absolute;top:16px;right:16px;}
.auth-card .auth-form{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.odds-list{display:flex;flex-direction:column;gap:10px;margin:18px 0;}
.odds-row{display:grid;grid-template-columns:110px 1fr 48px;align-items:center;gap:12px;font-size:.9rem;}
.odds-row .bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.odds-row .bar span{display:block;height:100%;border-radius:inherit;}
.odds-row b{text-align:right;font-variant-numeric:tabular-nums;}
#odds-modal .sub + .sub{margin-top:8px;}
@media (max-width:560px){
  .modal{align-items:flex-end;padding:0;}
  .modal-card{max-width:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:24px 20px calc(24px + var(--safe-bottom));max-height:92vh;animation:sheetIn .35s var(--ease);}
  @keyframes sheetIn{from{transform:translateY(100%);}}
}

/* Détail d'une carte */
.card-detail{max-width:880px;}
.cd-layout{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start;}
.cd-layout .tcard .tcard-name{font-size:1.35rem;}
.cd-layout .tcard .tcard-anime{font-size:.8rem;}
.cd-layout .tcard .tcard-stats{font-size:.82rem;}
.cd-info{display:flex;flex-direction:column;gap:14px;padding-top:6px;}
.cd-info h2{margin:0;font-size:1.6rem;}
.cd-anime{color:var(--muted);font-size:.92rem;margin-top:-8px;}
.stat-bars{display:flex;flex-direction:column;gap:10px;}
.stat-bar{display:grid;grid-template-columns:70px 1fr 34px;gap:10px;align-items:center;font-size:.84rem;color:var(--muted);}
.stat-bar .bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.stat-bar .bar span{display:block;height:100%;border-radius:inherit;background:var(--accent-grad);}
.stat-bar b{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;}
.cd-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fact{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px;}
.fact span{display:block;color:var(--muted);font-size:.75rem;}
.fact b{font-size:.98rem;}
@media (max-width:640px){ .cd-layout{grid-template-columns:1fr;gap:18px;} .cd-layout > .tcard{max-width:290px;margin:0 auto;} .cd-info h2{font-size:1.3rem;text-align:center;} .cd-anime{text-align:center;} .cd-info > .rarity-line{justify-content:center;} }
.rarity-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* =====================================================================
   OUVERTURE DE PACK (plein écran)
   ===================================================================== */
.reveal-overlay{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(20px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));background:rgba(4,4,8,.97);animation:fadeIn .3s;overflow-y:auto;}
.reveal-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.reveal-head{position:relative;text-align:center;display:flex;flex-direction:column;gap:6px;}
.reveal-anime{font-family:var(--font-display);font-weight:700;font-size:1.2rem;}
.reveal-hint{color:var(--muted);font-size:.9rem;}
.reveal{position:relative;width:100%;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;max-width:1100px;}
.flip-card{position:relative;width:200px;aspect-ratio:5/7;perspective:1200px;animation:deal .55s var(--spring) both;}
@keyframes deal{from{opacity:0;transform:translateY(80px) scale(.6) rotate(-8deg);}}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s var(--ease);transform-style:preserve-3d;}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.flip-back{width:100%;height:100%;border:none;padding:3px;border-radius:14px;background:linear-gradient(160deg,#3b2a6b,#1a1030);box-shadow:0 20px 40px -16px rgba(0,0,0,.9);cursor:pointer;transition:transform .2s var(--ease);}
.flip-back:hover{transform:translateY(-6px);}
.flip-back-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;border-radius:11px;background:
  radial-gradient(circle at 50% 45%,rgba(255,77,141,.35),transparent 45%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px),#130d25;border:1px solid rgba(255,255,255,.08);}
.flip-back-inner .logo-mark{margin:0;width:46px;height:46px;border-radius:13px;}
.flip-back-inner .logo-mark::before,.flip-back-inner .logo-mark::after{width:19px;height:26px;top:9px;}
.flip-back-inner .logo-mark::before{left:9px;} .flip-back-inner .logo-mark::after{left:17px;}
.flip-back-inner span{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
/* Aura de rareté qui "fuit" avant la révélation (anticipation) */
.flip-card.r-ultra:not(.flipped) .flip-back{box-shadow:0 0 30px -4px rgba(192,38,211,.7),0 20px 40px -16px rgba(0,0,0,.9);}
.flip-card.r-legend:not(.flipped) .flip-back{box-shadow:0 0 40px 0 rgba(245,158,11,.75),0 20px 40px -16px rgba(0,0,0,.9);animation:pulseGold 1.4s ease-in-out infinite;}
@keyframes pulseGold{50%{box-shadow:0 0 60px 6px rgba(245,158,11,.9),0 20px 40px -16px rgba(0,0,0,.9);}}
.flip-front{transform:rotateY(180deg);}
.flip-front .tcard{height:100%;}
.flip-card.burst::before{content:'';position:absolute;inset:-50%;border-radius:50%;background:radial-gradient(circle,var(--burst) 0%,transparent 60%);animation:burst .9s ease-out forwards;pointer-events:none;z-index:-1;}
@keyframes burst{0%{opacity:1;transform:scale(.3);}100%{opacity:0;transform:scale(1.3);}}
.flip-card.flipped.r-legend .tcard{animation:legendGlow 1.8s ease-in-out infinite alternate;}
@keyframes legendGlow{to{box-shadow:0 0 50px 4px rgba(245,158,11,.55),0 12px 30px -14px rgba(0,0,0,.9);}}
.reveal-summary{position:relative;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:fadeUp .3s var(--ease);}
.reveal-actions{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
@media (max-width:640px){
  .reveal-overlay{justify-content:flex-start;gap:16px;}
  .reveal{gap:10px;}
  .flip-card{width:calc(33.33% - 7px);max-width:150px;}
  .flip-card .tcard{border-radius:10px;padding:2px;}
  .flip-card .tcard-inner{border-radius:8px;}
  .flip-card .tcard-top{top:5px;left:5px;right:5px;}
  .flip-card .rarity-tag .label{display:none;}
  .flip-card .rarity-tag{padding:2px;border:none;}
  .flip-card .rarity-tag .gem{width:8px;height:8px;margin:3px;}
  .flip-card .tcard-info{padding:6px;}
  .flip-card .tcard-name{font-size:.72rem;}
  .flip-card .tcard-anime,.flip-card .tcard-stats .fav{display:none;}
  .flip-card .tcard-stats{font-size:.58rem;gap:5px;margin-top:3px;}
  .flip-card .badge{font-size:.52rem;padding:2px 5px;}
  .flip-back-inner .logo-mark{width:32px;height:32px;border-radius:9px;}
  .flip-back-inner .logo-mark::before,.flip-back-inner .logo-mark::after{width:13px;height:18px;top:6px;}
  .flip-back-inner .logo-mark::before{left:6px;} .flip-back-inner .logo-mark::after{left:12px;}
  .flip-back-inner span{font-size:.58rem;}
  .reveal-actions{width:100%;} .reveal-actions .btn{flex:1;}
}

/* ---------- Toasts ---------- */
.toasts{position:fixed;left:0;right:0;top:calc(76px + var(--safe-top));z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:440px;width:max-content;min-width:min(100%,260px);background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);border-radius:14px;padding:12px 16px;font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lg);animation:toastIn .3s var(--spring);}
.toast::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex-shrink:0;}
.toast.ok::before{background:var(--ok);}
.toast.err::before{background:var(--bad);}
.toast.out{animation:toastOut .25s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96);}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px);}}

/* =====================================================================
   CARTES : finitions (plaque du nom, liseré, cadre légendaire animé, favoris)
   ===================================================================== */
/* Liseré intérieur couleur rareté + vignette */
.tcard-inner::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 28px -6px color-mix(in srgb,var(--c) 45%,transparent);}
/* Plaque du nom façon verre dépoli, avec un filet de couleur au-dessus */
.tcard:not(.missing) .tcard-info{background:linear-gradient(180deg,rgba(10,10,18,.15),rgba(10,10,18,.72) 40%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.tcard:not(.missing) .tcard-info::before{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.9;}
.tcard-name{text-shadow:0 2px 10px rgba(0,0,0,.7);letter-spacing:.01em;}
.tcard-stats > span:not(.fav){padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);}
.tcard.sm .tcard-stats > span:not(.fav),.mini-cards .tcard-stats > span,.player-showcase .tcard-stats > span{padding:0;background:none;border:none;}
.tcard.sm .tcard-info,.mini-cards .tcard-info,.player-showcase .tcard-info{backdrop-filter:none;-webkit-backdrop-filter:none;}
.tcard-art img{transition:transform .5s var(--ease);}
button.tcard:hover .tcard-art img{transform:scale(1.06);}
button.tcard{transition:transform .35s var(--ease),box-shadow .3s,translate .3s var(--ease);}
button.tcard:hover{translate:0 -5px;}
/* Cadre Ultra Rare / Légendaire : reflet métallique qui défile */
.tcard.r-ultra:not(.missing),.tcard.r-legend:not(.missing){background-size:220% 220%;animation:frameShine 5s ease-in-out infinite;}
.tcard.r-legend:not(.missing){box-shadow:0 14px 34px -14px rgba(0,0,0,.9),0 0 30px -6px var(--glow);}
@keyframes frameShine{0%,100%{background-position:0% 0%;}50%{background-position:100% 100%;}}
/* Favori : étoile dorée + halo */
.fav-star{position:absolute;z-index:4;top:36px;left:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d6,#fbbf24 55%,#b45309);color:#fff;box-shadow:0 0 0 2px rgba(4,5,12,.6),0 4px 14px -2px rgba(251,191,36,.8);}
.fav-star .i{width:14px;height:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
.tcard.is-fav:not(.missing){box-shadow:0 12px 30px -14px rgba(0,0,0,.9),0 0 0 2px rgba(251,191,36,.55),0 0 26px -6px rgba(251,191,36,.6);}
.tcard.sm .fav-star,.mini-cards .fav-star,.player-showcase .fav-star{top:5px;left:auto;right:5px;width:18px;height:18px;}
.tcard.sm .fav-star .i,.mini-cards .fav-star .i,.player-showcase .fav-star .i{width:10px;height:10px;}
@media (max-width:640px){ .card-grid .tcard:not(.sm) .fav-star{top:30px;left:6px;width:22px;height:22px;} .card-grid .tcard:not(.sm) .fav-star .i{width:12px;height:12px;} }
.chip-fav .i{width:14px;height:14px;color:#fbbf24;}
.chip-fav.active .i{color:#d97706;fill:currentColor;}
/* Bouton favori de la fiche */
.cd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.fav-btn{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);color:var(--muted);cursor:pointer;transition:all .2s var(--ease);}
.fav-btn:hover{color:#fbbf24;border-color:rgba(251,191,36,.5);}
.fav-btn .i{width:20px;height:20px;}
.fav-btn.on{color:#fbbf24;border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.12);box-shadow:0 0 22px -6px rgba(251,191,36,.7);}
.fav-btn.pop{animation:favPop .4s var(--spring);}
@keyframes favPop{40%{transform:scale(1.3);}}
@media (max-width:640px){ .cd-head{justify-content:center;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* =====================================================================
   COSMÉTIQUES (boutique de style)
   Animations légères : rotation / opacité / position de dégradé.
   ===================================================================== */
/* ---- Pseudo ---- */
.pname{font-weight:inherit;}
.cos-name-rainbow{background:linear-gradient(90deg,#ff5f6d,#ffc371,#fff36b,#5dfc8d,#4dd2ff,#a66bff,#ff6bd6,#ff5f6d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosSlide 3s linear infinite;}
.cos-name-sakura{background:linear-gradient(90deg,#f9a8d4,#fff1f7 45%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cos-name-neon{color:#cffafe;text-shadow:0 0 4px #22d3ee,0 0 12px rgba(34,211,238,.75);animation:cosFlicker 5s linear infinite;}
.cos-name-gold{background:linear-gradient(100deg,#b45309 0%,#fbbf24 30%,#fff7d6 45%,#fbbf24 60%,#b45309 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosSlide 3.5s linear infinite;}
.cos-name-glitch{color:#fff;text-shadow:2px 0 #ff2bd6,-2px 0 #22d3ee;animation:cosGlitch 2.4s steps(1) infinite;}
@keyframes cosSlide{to{background-position:-200% 0;}}
@keyframes cosFlicker{0%,92%,100%{opacity:1;}93%{opacity:.55;}95%{opacity:1;}97%{opacity:.7;}}
@keyframes cosGlitch{0%,86%,100%{text-shadow:2px 0 #ff2bd6,-2px 0 #22d3ee;transform:none;}88%{text-shadow:-3px 0 #ff2bd6,3px 0 #22d3ee;transform:translateX(1px);}92%{text-shadow:3px 1px #ff2bd6,-3px -1px #22d3ee;transform:translateX(-1px);}}

/* ---- Titre (sous le pseudo) ---- */
.ptitle{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:rgba(255,77,141,.14);color:#ffb3cd;white-space:nowrap;vertical-align:middle;}
.cos-title-hunter{background:rgba(245,158,11,.15);color:#fcd34d;}
.cos-title-collector{background:rgba(59,130,246,.16);color:#93c5fd;}
.cos-title-senpai{background:rgba(139,92,246,.18);color:#c4b5fd;}

/* ---- Cadre d'avatar ---- */
.frame{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex-shrink:0;vertical-align:middle;}
.frame[class*="cos-frame-"]{padding:3px;}
.frame[class*="cos-frame-"]::before{content:'';position:absolute;inset:0;border-radius:50%;}
.frame > .avatar{position:relative;z-index:1;}
.frame[class*="cos-frame-"] > .avatar{box-shadow:0 0 0 2px var(--bg) !important;}
.cos-frame-neon::before{background:#22d3ee;box-shadow:0 0 12px 2px rgba(34,211,238,.75);animation:cosPulse 1.8s ease-in-out infinite;}
.cos-frame-rainbow::before{background:conic-gradient(#ff5f6d,#ffc371,#fff36b,#5dfc8d,#4dd2ff,#a66bff,#ff6bd6,#ff5f6d);animation:spin 3s linear infinite;}
.cos-frame-sakura::before{background:conic-gradient(#fbcfe8,#f472b6,#fdf2f8,#f9a8d4,#ec4899,#fbcfe8);}
.cos-frame-sakura::after{content:'🌸';position:absolute;z-index:2;right:-4px;top:-6px;font-size:14px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.cos-frame-flames::before{background:conic-gradient(#f97316,#ef4444,#facc15,#f97316,#dc2626,#fb923c,#f97316);box-shadow:0 0 14px 1px rgba(249,115,22,.7);animation:spin 1.6s linear infinite;}
.cos-frame-legend::before{background:conic-gradient(#fef3c7,#f59e0b,#b45309,#fde68a,#f59e0b,#fef3c7);box-shadow:0 0 16px 2px rgba(245,158,11,.75);animation:spin 4s linear infinite;}
@keyframes cosPulse{50%{opacity:.55;}}
.avatar-btn-wrap{display:inline-grid;}

/* ---- Fond de profil ---- */
.banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d1633,#2a1b4d 60%,#3b1f5c);}
.cos-banner-stars{background:
  radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 68%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 46% 34%,#fff,transparent),radial-gradient(1px 1px at 62% 78%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 78% 18%,#fff,transparent),radial-gradient(1px 1px at 90% 58%,#fff,transparent),
  radial-gradient(1px 1px at 35% 12%,#fff,transparent),radial-gradient(1px 1px at 70% 45%,#fff,transparent),
  linear-gradient(180deg,#050816,#13204a 70%,#2b1b5c);}
.cos-banner-stars::after{content:'';position:absolute;inset:0;background:radial-gradient(2px 2px at 22% 40%,#fff,transparent),radial-gradient(2px 2px at 55% 20%,#c7d2fe,transparent),radial-gradient(2px 2px at 84% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 8% 80%,#e0e7ff,transparent);animation:cosTwinkle 2.6s ease-in-out infinite;}
@keyframes cosTwinkle{50%{opacity:.15;}}
.cos-banner-sakura{background:linear-gradient(180deg,#4a1033,#9d174d 55%,#f472b6);}
.cos-banner-sakura::before,.cos-banner-sakura::after{content:'🌸 · 🌸 · 🌸';position:absolute;left:0;right:0;top:-30px;font-size:16px;letter-spacing:22px;text-align:center;white-space:nowrap;opacity:.85;animation:cosFall 6s linear infinite;}
.cos-banner-sakura::after{content:'· 🌸 · 🌸 ·';animation-delay:-3s;font-size:12px;letter-spacing:30px;}
@keyframes cosFall{from{transform:translate(-20px,0) rotate(0);}to{transform:translate(20px,180px) rotate(20deg);}}
.cos-banner-aurora{background:#041019;}
.cos-banner-aurora::before{content:'';position:absolute;inset:-40% -20%;background:radial-gradient(40% 50% at 30% 50%,rgba(52,211,153,.75),transparent 70%),radial-gradient(35% 45% at 60% 40%,rgba(139,92,246,.7),transparent 70%),radial-gradient(30% 40% at 80% 60%,rgba(34,211,238,.6),transparent 70%);animation:cosAurora 8s ease-in-out infinite alternate;}
@keyframes cosAurora{from{transform:translateX(-12%) skewX(-8deg);}to{transform:translateX(12%) skewX(8deg);}}
.cos-banner-synthwave{background:linear-gradient(180deg,#12002b 0%,#4c1d95 40%,#db2777 58%,#120024 58.5%);}
.cos-banner-synthwave::before{content:'';position:absolute;left:50%;top:22%;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:repeating-linear-gradient(180deg,#fde047 0 9px,transparent 9px 13px),linear-gradient(#fde047,#f97316);opacity:.9;}
.cos-banner-synthwave::after{content:'';position:absolute;left:-50%;right:-50%;bottom:0;height:42%;background:repeating-linear-gradient(90deg,rgba(236,72,153,.8) 0 2px,transparent 2px 40px),repeating-linear-gradient(0deg,rgba(236,72,153,.8) 0 2px,transparent 2px 22px);transform:perspective(120px) rotateX(55deg);transform-origin:top;animation:cosGrid 1.2s linear infinite;}
@keyframes cosGrid{to{background-position:0 0,0 22px;}}

/* ---- Dos de cartes ---- */
.cos-back-galaxy .flip-back-inner,.back-preview.cos-back-galaxy{background:radial-gradient(circle at 30% 30%,rgba(139,92,246,.7),transparent 42%),radial-gradient(circle at 70% 72%,rgba(236,72,153,.55),transparent 45%),radial-gradient(1px 1px at 20% 60%,#fff,transparent),radial-gradient(1px 1px at 80% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 85%,#fff,transparent),#0b0620;}
.cos-back-sakura .flip-back-inner,.back-preview.cos-back-sakura{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.35),transparent 40%),repeating-radial-gradient(circle at 0 0,#f9a8d4 0 6px,#fbcfe8 6px 12px),#f472b6;}
.cos-back-neon .flip-back-inner,.back-preview.cos-back-neon{background:repeating-linear-gradient(0deg,rgba(34,211,238,.35) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,rgba(34,211,238,.35) 0 1px,transparent 1px 14px),radial-gradient(circle at 50% 45%,rgba(34,211,238,.45),transparent 50%),#030712;box-shadow:inset 0 0 18px rgba(34,211,238,.5);}
.cos-back-gold .flip-back-inner,.back-preview.cos-back-gold{background:linear-gradient(135deg,#78350f,#f59e0b 30%,#fef3c7 48%,#f59e0b 62%,#78350f);}
.cos-back-gold .flip-back-inner span,.cos-back-sakura .flip-back-inner span{color:#3b0a1d;}
.flip-back[class*="cos-back-"]{background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.08));}
.back-preview{display:grid;place-items:center;width:64px;aspect-ratio:5/7;border-radius:8px;border:2px solid rgba(255,255,255,.18);background:radial-gradient(circle at 50% 45%,rgba(255,77,141,.35),transparent 45%),repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px),#130d25;}
.back-preview .logo-mark{width:22px;height:22px;margin:0;border-radius:7px;}
.back-preview .logo-mark::before,.back-preview .logo-mark::after{width:9px;height:12px;top:4px;}
.back-preview .logo-mark::before{left:4px;} .back-preview .logo-mark::after{left:8px;}

/* =====================================================================
   BOUTIQUE
   ===================================================================== */
.style-stage{margin-bottom:28px;}
.style-preview{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);background:var(--surface);}
.style-preview .banner{height:120px;}
.sp-body{position:relative;display:flex;align-items:flex-end;gap:16px;padding:0 22px 20px;margin-top:-44px;flex-wrap:wrap;}
.sp-body .frame .avatar,.sp-body > .avatar{width:88px;height:88px;font-size:2rem;box-shadow:0 0 0 4px var(--surface);}
.sp-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-bottom:4px;}
.sp-id b{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-back{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.66rem;color:var(--muted);}
.style-hint{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;font-size:.8rem;color:var(--muted);padding:0 4px;}
.style-hint.previewing #preview-label{color:#ffb3cd;font-weight:600;}

.shop-sec{margin-bottom:30px;}
.shop-sec h3{font-size:1.05rem;margin-bottom:4px;}
.shop-sec .sub{margin:0 0 14px;}
.shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.shop-item{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,transform .2s var(--ease);}
.shop-item:hover{border-color:var(--line-2);transform:translateY(-2px);}
.shop-item.trying{border-color:rgba(255,77,141,.6);box-shadow:0 0 0 1px rgba(255,77,141,.4);}
.shop-item.equipped{border-color:rgba(52,211,153,.5);}
.si-preview{height:118px;display:grid;place-items:center;background:var(--bg-2);border:none;width:100%;color:inherit;padding:10px;cursor:pointer;position:relative;overflow:hidden;}
.si-preview .banner{position:absolute;inset:0;}
.si-preview .pname{font-family:var(--font-display);font-weight:700;font-size:1.25rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.si-preview .frame .avatar,.si-preview > .avatar{width:64px;height:64px;font-size:1.5rem;}
.si-preview .ptitle{font-size:.8rem;padding:4px 12px;}
.si-try{position:absolute;bottom:6px;right:8px;font-size:.62rem;color:var(--faint);font-weight:600;}
.si-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1;}
.si-name{font-weight:700;font-size:.92rem;}
.si-desc{color:var(--muted);font-size:.78rem;line-height:1.4;flex:1;}
.si-actions{margin-top:10px;}
.si-actions .btn{width:100%;padding:9px 14px;}
.btn-price{background:var(--text);color:var(--bg);font-weight:700;}
.btn-price:not(:disabled):hover{filter:brightness(.92);}
.btn-equipped{background:rgba(52,211,153,.14);color:var(--ok);border-color:rgba(52,211,153,.35);}
.shop-item .ribbon{position:absolute;z-index:2;top:10px;left:10px;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;}
.shop-items.bundles{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.bundles .si-preview{height:140px;display:flex;justify-content:center;align-items:center;gap:16px;}
.bundle-name{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
.price-old{color:var(--faint);text-decoration:line-through;font-weight:500;margin-left:6px;font-size:.82rem;}
.shop-legal{color:var(--faint);font-size:.75rem;text-align:center;max-width:620px;margin:10px auto 0;line-height:1.5;}
@media (max-width:640px){
  .shop-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .shop-items.bundles{grid-template-columns:minmax(0,1fr);}
  .si-preview{height:100px;} .si-preview .pname{font-size:1.02rem;}
  .si-body{padding:10px 11px 12px;} .si-desc{font-size:.72rem;}
  .sp-body{padding:0 16px 16px;gap:12px;} .sp-id b{font-size:1.2rem;}
  .sp-body .frame .avatar,.sp-body > .avatar{width:72px;height:72px;}
}

/* Fenêtre d'achat */
.buy-card{max-width:440px;}
.buy-preview{height:150px;border-radius:var(--radius-lg);background:var(--bg-2);display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden;position:relative;margin:8px 0 16px;}
.buy-preview .banner{position:absolute;inset:0;}
.buy-preview .pname{font-family:var(--font-display);font-weight:700;font-size:1.5rem;}
.buy-preview .frame .avatar,.buy-preview > .avatar{width:72px;height:72px;font-size:1.6rem;}
.buy-card h2{margin:0 0 4px;}
.buy-includes{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);}
.buy-includes li::before{content:'✓ ';color:var(--ok);font-weight:700;}
.buy-price{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.buy-price b{font-family:var(--font-display);font-size:1.6rem;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.45;margin-bottom:16px;cursor:pointer;}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;}
.buy-note{font-size:.78rem;color:var(--faint);text-align:center;margin-top:10px;}
.buy-note.test{color:var(--warn);}

/* Joueurs dans le classement / profils / échanges */
.rank-name{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rank-name .pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-slot .ptitle{font-size:.6rem;}
.player-banner{height:110px;margin:-28px -28px 0;}
.player-card .player-head{margin-top:-40px;position:relative;align-items:flex-end;}
.player-card .player-head h2{display:flex;flex-direction:column;gap:4px;}
.player-card .modal-x{z-index:3;background:rgba(4,5,12,.55);}
@media (max-width:560px){ .player-banner{margin:-24px -20px 0;} }
.si-preview .ptitle,.buy-preview .ptitle{white-space:normal;text-align:center;max-width:100%;line-height:1.3;}

/* =====================================================================
   JETONS, MARCHÉ, CONNEXION GOOGLE/DISCORD, LANGUE
   ===================================================================== */
.coin-pill .i,.coins-count .i{color:#fbbf24;}
.coins-count{display:flex;align-items:center;gap:8px;}
.coins-count .i{width:28px;height:28px;}
.coin{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-variant-numeric:tabular-nums;color:#fde68a;}
.coin .i{width:15px;height:15px;color:#fbbf24;}

/* Marché */
.market-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));}
.market-item{display:flex;flex-direction:column;gap:8px;min-width:0;}
.market-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 2px;}
.market-meta .coin{font-size:1rem;}
.market-seller{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;padding:0;text-align:right;min-width:0;}
.market-seller:hover{color:var(--text);}
.market-item .btn{width:100%;padding:8px 12px;font-size:.84rem;}
.market-item.mine .tcard{opacity:.9;}
.history-title{font-size:1rem;margin:30px 0 12px;}
.history-list{display:flex;flex-direction:column;gap:8px;}
.history-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px 8px 8px;font-size:.85rem;}
.history-row img{width:40px;height:40px;border-radius:8px;object-fit:cover;object-position:50% 15%;}
.history-row .h-sub{color:var(--muted);font-size:.74rem;}
.history-row .plus{color:var(--ok);font-weight:700;}
.history-row .minus{color:var(--bad);font-weight:700;}
@media (max-width:640px){ .market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} #panel-trades .toolbar .segmented{display:flex;width:100%;} #panel-trades .seg{flex:1 1 auto;padding:8px 6px;font-size:.76rem;min-width:0;white-space:nowrap;} }

/* Fiche d'une carte : vendre / recycler */
.cd-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cd-actions .btn{flex:1;min-width:140px;}
.sell-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;}
.sell-row{display:flex;gap:10px;align-items:center;}
.sell-row input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 12px;font-size:16px;color:var(--text);}
.sell-row input:focus{outline:none;border-color:rgba(255,77,141,.6);}
.sell-hint{font-size:.78rem;color:var(--muted);line-height:1.5;}
.sell-hint b{color:var(--text);}
.cd-locked{font-size:.82rem;color:var(--muted);background:var(--bg-2);border:1px dashed var(--line-2);border-radius:var(--radius);padding:10px 12px;}

/* Recycler les doublons */
.dupes-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px;}
.dupe-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);cursor:pointer;font-size:.88rem;}
.dupe-opt input{width:18px;height:18px;accent-color:var(--accent);}
.dupe-opt .grow{flex:1;}
.dupe-opt .dim{font-size:.78rem;}

/* Connexion Google / Discord */
.oauth{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:999px;font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid var(--line-2);background:#fff;color:#1f1f1f;transition:filter .15s,transform .15s;}
.oauth-btn:hover{filter:brightness(.95);}
.oauth-btn:active{transform:scale(.98);}
.oauth-btn.discord{background:#5865f2;color:#fff;border-color:#5865f2;}
.oauth-btn svg{width:18px;height:18px;flex-shrink:0;}
.oauth-sep{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.78rem;margin-top:4px;}
.oauth-sep::before,.oauth-sep::after{content:'';flex:1;height:1px;background:var(--line-2);}

/* Langue */
.lang-btn{padding:9px 12px;}
.lang-btn .i{width:16px;height:16px;}

/* Échanges sur mobile : une rangée de cartes qui défile horizontalement,
   et le bouton « Proposer » en bas du formulaire (plus collé par-dessus les cartes). */
@media (max-width:760px){
  .card-grid.picker{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:104px;grid-template-rows:auto;
    max-height:none;overflow-x:auto;overflow-y:hidden;padding:6px 4px 10px;scroll-snap-type:x proximity;}
  .card-grid.picker > *{scroll-snap-align:start;}
  .card-grid.picker > .empty{grid-column:auto;width:calc(100vw - 72px);}
  .t-submit{position:static;box-shadow:none;}
}

/* Compteur d'échanges hebdomadaire */
.quota{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:.84rem;color:var(--muted);}
.quota b{color:var(--text);font-variant-numeric:tabular-nums;}
.quota .bar{flex:1;min-width:120px;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.quota .bar span{display:block;height:100%;background:var(--accent-grad);border-radius:inherit;}
.quota.full{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.06);}
.quota.full .bar span{background:var(--bad);}

/* =====================================================================
   SUCCÈS
   ===================================================================== */
.ach-track{margin-bottom:30px;}
.ach-track-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.ach-track-head h3{font-size:1.05rem;}
.ach-track-head .ach-value{font-family:var(--font-display);font-weight:700;color:var(--text);}
.ach-track-head .ach-value small{font-family:var(--font);font-weight:500;color:var(--muted);font-size:.8rem;margin-left:4px;}
.ach-item .si-preview{height:104px;}
.ach-item.locked .si-preview > *{filter:grayscale(1) brightness(.55);}
.ach-item.locked .si-preview::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") right 10px top 10px/18px no-repeat;}
.ach-item.ready{border-color:rgba(251,191,36,.6);box-shadow:0 0 0 1px rgba(251,191,36,.35),0 10px 30px -14px rgba(251,191,36,.6);}
.ach-goal{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);}
.ach-progress{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:8px;}
.ach-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent-grad);}
.ach-progress-txt{font-size:.72rem;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums;}
.btn-claim{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#1a1204;font-weight:800;animation:cosPulse 1.6s ease-in-out infinite;}
.btn-claim:not(:disabled):hover{filter:brightness(1.05);}

/* =====================================================================
   RÔLES
   ===================================================================== */
.pname.role-admin{color:#ff3b3b !important;-webkit-text-fill-color:#ff3b3b;background:none !important;text-shadow:0 0 10px rgba(255,59,59,.45);font-weight:800;animation:none;}
.role-tag{display:inline-flex;align-items:center;font-size:.58rem;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:5px;background:#ff3b3b;color:#fff;vertical-align:middle;margin-left:6px;line-height:1.3;}

/* =====================================================================
   CHAT
   ===================================================================== */
.chat-fab{position:fixed;right:20px;bottom:24px;z-index:70;width:56px;height:56px;border-radius:50%;border:none;background:var(--accent-grad);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(255,77,141,.7);transition:transform .15s;}
.chat-fab:hover{transform:scale(1.05);} .chat-fab .i{width:24px;height:24px;}
.chat-fab .nav-badge{position:absolute;top:-2px;right:-2px;}
.chat-drawer{position:fixed;right:20px;bottom:90px;z-index:75;width:380px;height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .25s var(--spring);}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--line);}
.chat-head .segmented{flex:1;display:flex;} .chat-head .seg{flex:1;padding:7px 8px;font-size:.8rem;}
.chat-sub{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.88rem;}
.chat-sub .back-btn{margin:0;padding:4px 6px 4px 0;}
.chat-sub .avatar{width:30px;height:30px;font-size:.8rem;}
.chat-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;}
.msg{display:flex;gap:9px;align-items:flex-start;position:relative;}
.msg .avatar{width:32px;height:32px;font-size:.8rem;flex-shrink:0;cursor:pointer;}
.msg .frame{flex-shrink:0;cursor:pointer;}
.msg-main{min-width:0;flex:1;}
.msg-meta{display:flex;align-items:baseline;gap:6px;font-size:.78rem;flex-wrap:wrap;}
.msg-meta .pname{font-weight:700;cursor:pointer;}
.msg-meta time{color:var(--faint);font-size:.68rem;}
.msg-text{font-size:.9rem;line-height:1.45;color:var(--text);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;}
.msg-tools{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.msg:hover .msg-tools,.msg:focus-within .msg-tools{opacity:1;}
@media (hover:none){ .msg-tools{opacity:1;} }
.msg-tools button{border:none;background:none;color:var(--faint);padding:3px;border-radius:6px;}
.msg-tools button:hover{color:var(--bad);background:rgba(251,113,133,.1);}
.msg-tools .i{width:14px;height:14px;}
/* Messages privés : bulles */
.chat-body.dm .msg{max-width:85%;}
.chat-body.dm .msg.mine{align-self:flex-end;}
.bubble{padding:8px 12px;border-radius:14px;background:var(--surface-3);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap;}
.msg.mine .bubble{background:linear-gradient(135deg,rgba(255,77,141,.85),rgba(139,92,246,.85));color:#fff;}
.bubble-time{display:block;font-size:.64rem;color:var(--faint);margin-top:3px;text-align:right;}
.conv{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius);border:none;background:none;width:100%;text-align:left;color:inherit;}
.conv:hover{background:var(--surface-2);}
.conv .avatar{width:38px;height:38px;}
.conv-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.conv-last{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conv .seg-count{background:var(--accent);}
.new-dm{display:flex;gap:8px;margin-bottom:6px;}
.new-dm input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;font-size:15px;color:var(--text);}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);}
.chat-form input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:10px 14px;font-size:16px;color:var(--text);}
.chat-form input:focus{outline:none;border-color:rgba(255,77,141,.6);}
.chat-form .btn{padding:10px 14px;}
.chat-rules{font-size:.68rem;color:var(--faint);text-align:center;padding:0 12px 10px;}
.chat-empty{margin:auto;color:var(--muted);font-size:.85rem;text-align:center;padding:20px;}
.muted-note{font-size:.8rem;color:var(--bad);text-align:center;padding:8px 12px;border-top:1px solid var(--line);}
@media (max-width:760px){
  .chat-fab{right:14px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px);width:50px;height:50px;}
  .chat-drawer{inset:0;width:auto;height:auto;border-radius:0;border:none;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);z-index:95;}
}

/* ===== Parrainage + mentions légales ===== */
a.menu-item{color:inherit;text-decoration:none;}
.ref-note{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,77,141,.1);border:1px solid rgba(255,77,141,.3);font-size:.88rem;line-height:1.4;}
.ref-note .i{flex:none;color:var(--accent);}
.legal-note{margin:0;font-size:.75rem;line-height:1.5;color:var(--muted);text-align:center;}
.legal-note a,.l-legal a{color:inherit;text-decoration:underline;}
.ref-link{display:flex;gap:8px;margin:16px 0 8px;}
.ref-link input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font:inherit;font-size:.85rem;}

/* ===== Widget « Invite tes amis » ===== */
.invite-widget{position:relative;overflow:hidden;border-color:rgba(255,77,141,.28);background:linear-gradient(160deg,rgba(255,77,141,.12),rgba(109,93,252,.08) 60%,transparent),var(--surface);}
.invite-widget .widget-head b{color:var(--text);}
.invite-text{margin:2px 0 12px;font-size:.92rem;line-height:1.45;color:var(--muted);}
.invite-text b{color:var(--text);}

/* ===== Ambiance « ville la nuit sous un ciel étoilé » =====
   3 calques fixes derrière tout le contenu :
   html::before = ciel dégradé indigo + lueur de la ville à l'horizon + étoiles fixes
   body::before = silhouette de la ville éclairée (skyline.svg), en bas de l'écran
   body::after  = étoiles qui scintillent + étoile filante */
html::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(1px 1px at 8% 14%,#fff,transparent 60%) 0 0/430px 330px,
    radial-gradient(1px 1px at 52% 6%,rgba(255,255,255,.8),transparent 60%) 0 0/430px 330px,
    radial-gradient(1px 1px at 81% 31%,rgba(200,215,255,.85),transparent 60%) 0 0/430px 330px,
    radial-gradient(1px 1px at 33% 47%,rgba(255,255,255,.6),transparent 60%) 0 0/430px 330px,
    radial-gradient(1px 1px at 67% 66%,rgba(255,255,255,.5),transparent 60%) 0 0/430px 330px,
    radial-gradient(1px 1px at 17% 79%,rgba(255,255,255,.45),transparent 60%) 0 0/430px 330px,
    radial-gradient(80% 35% at 50% 105%,rgba(255,140,90,.08),transparent 70%),
    radial-gradient(55% 30% at 15% 100%,rgba(236,72,153,.10),transparent 70%),
    radial-gradient(55% 30% at 90% 100%,rgba(99,102,241,.12),transparent 70%),
    radial-gradient(80% 45% at 50% -15%,rgba(67,56,202,.16),transparent 70%),
    linear-gradient(180deg,#020309 0%,#04050e 50%,#070716 85%,#0b0a1c 100%);
}
body::before{
  inset:auto 0 0 0;height:min(32vh,240px);filter:none;animation:none;
  background:url(skyline.svg) repeat-x left bottom/1200px 100%;
  mask-image:none;-webkit-mask-image:none;
  opacity:.85;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:1;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent 60%) 0 0/560px 420px,
    radial-gradient(1.4px 1.4px at 58% 12%,rgba(255,236,200,.95),transparent 60%) 0 0/560px 420px,
    radial-gradient(1.8px 1.8px at 88% 38%,rgba(190,210,255,.95),transparent 60%) 0 0/560px 420px,
    radial-gradient(1.3px 1.3px at 36% 58%,#fff,transparent 60%) 0 0/560px 420px,
    radial-gradient(1.5px 1.5px at 72% 70%,rgba(255,255,255,.8),transparent 60%) 0 0/560px 420px;
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 80%);
  animation:twinkle 3.5s ease-in-out infinite alternate;
}
@media (max-width:760px){ body::before{bottom:calc(var(--tabbar-h) + var(--safe-bottom));height:min(22vh,160px);} }
@keyframes twinkle{from{opacity:.25;}to{opacity:1;}}
/* Étoile filante : passe toutes les ~12 s en haut de l'écran */
html::after{
  content:'';position:fixed;top:8vh;left:-10vw;width:140px;height:2px;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));border-radius:2px;
  filter:drop-shadow(0 0 6px rgba(190,210,255,.9));
  transform:rotate(-18deg);opacity:0;
  animation:shooting 12s ease-in 4s infinite;
}
@keyframes shooting{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(-18deg);}
  2%{opacity:1;}
  9%{opacity:0;transform:translate3d(70vw,-22vh,0) rotate(-18deg);}
  100%{opacity:0;transform:translate3d(70vw,-22vh,0) rotate(-18deg);}
}

/* En-tête en verre dépoli, liseré dégradé */
/* Le flou est sur un pseudo-élément : sur .app-top lui-même, backdrop-filter
   ferait de l'en-tête le repère de la barre d'onglets mobile (position:fixed). */
.app-top{background:transparent;border-bottom:none;}
.app-top::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(4,5,12,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);}
.app-top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,77,141,.55),rgba(139,92,246,.55),transparent);}

/* ===== Logo ===== */
.logo{font-weight:800;letter-spacing:-.035em;}
.logo b{
  background:linear-gradient(100deg,#ff4d8d 0%,#ff8ac0 20%,#b44dff 45%,#6d5dfc 65%,#ff4d8d 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,77,141,.45));
  animation:logo-shift 6s linear infinite;
  padding-right:.04em;
}
.logo-mark{animation:logo-float 4s ease-in-out infinite;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 8px 22px -6px rgba(255,77,141,.9),0 0 26px -4px rgba(180,77,255,.6);}
.logo-mark{background:
  linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%) -150% 0/250% 100% no-repeat,
  var(--accent-grad);
  animation:logo-float 4s ease-in-out infinite,logo-shine 5s ease-in-out infinite;}
.logo.lg{font-size:2.1rem;}
.logo.lg b{filter:drop-shadow(0 0 22px rgba(255,77,141,.55));}
@keyframes logo-shift{to{background-position:-220% 0;}}
@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-2px) rotate(4deg);}}
@keyframes logo-shine{0%,60%{background-position:-150% 0,0 0;}100%{background-position:250% 0,0 0;}}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.logo b,.logo-mark{animation:none !important;}
  html::after{display:none;}
}

/* ===== Chat : séparateurs de jour + messages regroupés ===== */
.chat-day{display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--faint);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.chat-day::before,.chat-day::after{content:'';flex:1;height:1px;background:var(--line-2);}
.chat-day span{white-space:nowrap;}
.chat-day:first-child{margin-top:0;}
.msg.cont{margin-top:-6px;}
.msg.cont>[data-player]{visibility:hidden;height:0;}
.msg.cont .msg-meta{display:none;}
.chat-body.dm .msg.cont{margin-top:-6px;}
.msg-meta time{cursor:default;}
.conv-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.conv-time{flex-shrink:0;font-size:.7rem;color:var(--faint);}

/* ===== Modifier mon profil : photo ===== */
.profile-photo-row{display:flex;align-items:center;gap:12px;padding:12px;margin:4px 0 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);}
.profile-photo-row .avatar{width:48px;height:48px;font-size:1.1rem;}
.profile-photo-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.88rem;}
.profile-photo-text .dim{font-size:.78rem;}
.msg.mine .bubble-time,.msg.mine .bubble-time time{color:rgba(255,255,255,.8);}

/* Album : le bouton « Ma collection » reste visible quand on descend dans les cartes */
#series-detail>.back-btn{
  position:sticky;top:calc(var(--safe-top) + 76px);z-index:30;
  padding:8px 14px 8px 10px;border-radius:999px;color:var(--text);
  background:rgba(17,21,40,.85);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.8);
}
#series-detail>.back-btn:hover{border-color:rgba(255,77,141,.5);}
@media (max-width:760px){ #series-detail>.back-btn{top:calc(var(--safe-top) + 64px);} }