/* Prime XI — barre de navigation, missions, titres et personnalisation du profil. Chargé en dernier. */
:root {
  --acc-lime: #d7ff3e; --acc-gold: #f6c945; --acc-cyan: #3fe0ff; --acc-pink: #ff5fae; --acc-orange: #ff8a3d; --acc-white: #f4f7f5;
}

/* ---------- en-tête ---------- */
.top {
  background:
    radial-gradient(600px 80px at 50% -30px, rgba(215, 255, 62, .14), transparent 70%),
    linear-gradient(180deg, rgba(10, 26, 19, .94), rgba(7, 17, 13, .9));
  padding-top: 9px; padding-bottom: 9px;
}
.logo-mark {
  background: radial-gradient(circle at 30% 25%, rgba(215, 255, 62, .25), transparent 70%);
  box-shadow: 0 0 18px -4px rgba(215, 255, 62, .7), inset 0 0 10px rgba(215, 255, 62, .2);
  transition: transform .25s;
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-word { background: linear-gradient(180deg, #fff, #cfe6d8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* navigation en capsule : icône + texte, l'onglet actif est une pastille fluo */
.nav {
  gap: 2px; padding: 4px; border-radius: 999px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(25, 52, 40, .85), rgba(12, 27, 21, .85));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px -14px rgba(0, 0, 0, .8);
}
.nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px;
  color: var(--muted); transition: color .15s, background .2s, transform .15s;
}
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav a:hover { color: var(--text); background: rgba(215, 255, 62, .07); }
.nav a.on, .nav a.on:hover {
  color: var(--accent-ink); background: linear-gradient(135deg, #f0ff8f, #d7ff3e 50%, #b4ee25);
  box-shadow: 0 4px 18px -6px rgba(215, 255, 62, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.nav a.on svg { opacity: 1; }
.top-right { margin-left: 0; }
.nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1; color: #fff; background: #ff4d5e;
  box-shadow: 0 0 0 2px var(--bg), 0 0 12px rgba(255, 77, 94, .8); animation: badgePop 1.8s ease-in-out infinite;
}
.nav a.on .nav-badge { box-shadow: 0 0 0 2px #d7ff3e; }
@keyframes badgePop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@media (max-width: 1500px) { .nav a span { display: none; } .nav a { padding: 8px 11px; } .nav a.on span { display: inline; } }

/* barre d'onglets du téléphone */
@media (max-width: 960px) {
  .top-right { margin-left: auto; }
  .tabbar { grid-template-columns: repeat(6, 1fr); padding-top: 8px; }
  .tabbar a { position: relative; gap: 3px; font-size: 10.5px; }
  .tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbar a svg { padding: 3px; width: 30px; height: 26px; border-radius: 999px; transition: background .2s, color .2s; }
  .tabbar a.on svg { color: var(--accent-ink); background: linear-gradient(135deg, #f0ff8f, #d7ff3e); box-shadow: 0 0 16px -4px rgba(215, 255, 62, .9); }
  .tabbar .nav-badge { position: absolute; top: -4px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 10px; }
}

@media (max-width: 600px) {
  .top-right { gap: 5px; }
  .pill.lang { display: none; } /* (la langue se change aussi dans « Mon compte ») */
}

/* ---------- missions ---------- */
.mission-list { display: flex; flex-direction: column; gap: 8px; }
.mission {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(25, 52, 40, .7), rgba(14, 30, 23, .7)); border: 1px solid var(--line);
}
.m-main { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.m-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-weight: 800; min-width: 0; }
.m-title a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-title a:hover { color: var(--accent); }
.m-main .bar { height: 7px; }
.m-main small { font-weight: 800; font-variant-numeric: tabular-nums; }
.stars { color: #ffc93c; letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.stars i { font-style: normal; color: rgba(255, 255, 255, .15); }
.reward { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reward b { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; background: rgba(215, 255, 62, .12); color: var(--accent); white-space: nowrap; }
.reward .rw-pack { background: rgba(176, 97, 255, .16); color: #d6b3ff; }
.mission.ready {
  border-color: rgba(215, 255, 62, .55); background: linear-gradient(120deg, rgba(60, 90, 20, .55), rgba(20, 42, 30, .8));
  box-shadow: 0 0 26px -12px rgba(215, 255, 62, .9);
}
.mission.ready .btn { animation: badgePop 1.6s ease-in-out infinite; }
.mission.claimed { opacity: .55; }
.mission.claimed .bar i { background: var(--ok); }
.tab-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 11px; }
@media (max-width: 600px) {
  .mission { grid-template-columns: 1fr auto; }
  .mission .reward { grid-column: 1; justify-content: flex-start; }
}

/* ---------- titres ---------- */
.title-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--accent-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pa, var(--accent)) 70%, #fff), var(--pa, var(--accent)));
  box-shadow: 0 0 16px -5px var(--pa, var(--accent));
}
.title-chip.sm { margin-left: 8px; padding: 1px 8px; font-size: 10px; vertical-align: middle; }

/* ---------- profil personnalisé ---------- */
.profile-hero { position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--pa, var(--accent)) 40%, transparent); }
.profile-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(500px 200px at 10% 0%, color-mix(in srgb, var(--pa, var(--accent)) 22%, transparent), transparent 70%);
}
.profile-hero .av-xl { box-shadow: 0 0 0 3px var(--pa, var(--accent)), 0 0 30px -6px var(--pa, var(--accent)); }
.profile-hero .profile-stats b { color: var(--pa, var(--text)); }
.profile-hero h1 { margin: 6px 0 0; }
.motto { margin: 4px 0 0; font-style: italic; font-weight: 700; color: color-mix(in srgb, var(--pa, var(--accent)) 60%, #fff); }

.banner-pitch { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 60px, transparent 60px 120px), linear-gradient(120deg, #1d5a3a, #0a1a12); }
.banner-night { background: radial-gradient(circle at 80% 20%, rgba(120, 160, 255, .25), transparent 40%), linear-gradient(140deg, #141b3a, #05070f); }
.banner-ocean { background: radial-gradient(circle at 20% 110%, rgba(63, 224, 255, .3), transparent 50%), linear-gradient(140deg, #0b4a66, #04141f); }
.banner-crimson { background: radial-gradient(circle at 85% 0%, rgba(255, 120, 120, .25), transparent 45%), linear-gradient(140deg, #6a1022, #1a050a); }
.banner-violet { background: radial-gradient(circle at 15% 0%, rgba(214, 160, 255, .3), transparent 45%), linear-gradient(140deg, #45197a, #12061f); }
.banner-sunset { background: linear-gradient(160deg, #ff8a3d 0%, #c2306b 45%, #2a0b2e 100%); }
.banner-carbon {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .25) 0 6px, transparent 6px 12px), linear-gradient(140deg, #2b2f33, #0c0e10);
}
.banner-gold { background: radial-gradient(circle at 75% 10%, rgba(255, 240, 180, .5), transparent 40%), linear-gradient(140deg, #9a6b12, #3b2706 70%, #1a1102); }
.banner-royal {
  background: radial-gradient(circle at 50% -20%, rgba(246, 226, 122, .45), transparent 50%),
    conic-gradient(from 200deg at 50% 120%, #2a0f4a, #6b1f7a, #f6e27a, #6b1f7a, #2a0f4a);
}

.style-panel { display: flex; flex-direction: column; gap: 10px; }
.style-panel > .kicker { align-self: flex-start; margin-top: 6px; }
.title-pick, .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.title-opt {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
  font-weight: 800; font-size: 13px; cursor: pointer;
}
.title-opt.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.title-opt.locked { opacity: .45; cursor: default; }
.title-opt em { font-style: normal; font-weight: 700; margin-left: 4px; }
.swatch {
  width: 120px; height: 56px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; display: flex; align-items: flex-end;
  padding: 6px 8px; font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.swatch.on { border-color: var(--accent); box-shadow: 0 0 16px -4px var(--accent); }
.swatch:disabled { opacity: .45; cursor: default; }
.dot { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; background: var(--pa); cursor: pointer; box-shadow: 0 0 14px -4px var(--pa); }
.dot.on { border-color: #fff; }

/* ---------- ouverture : lueur de la meilleure carte autour du sachet ---------- */
.aura-r2 { --aura: rgba(61, 139, 253, .85); --aura-s: 1; }
.aura-r3 { --aura: rgba(176, 97, 255, .9); --aura-s: 1.15; }
.aura-r4 { --aura: rgba(255, 191, 31, .95); --aura-s: 1.3; }
.aura-r5 { --aura: rgba(255, 77, 94, 1); --aura-s: 1.5; }
.aura-r6 { --aura: rgba(246, 226, 122, 1); --aura-s: 1.75; }
.pack-stage::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--aura, transparent), transparent);
  transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.2, .4, 1);
}
.pack-stage.aura::before {
  opacity: .75; transform: translate(-50%, -50%) scale(var(--aura-s));
  animation: auraPulse .7s ease-in-out .35s infinite alternate;
}
.pack-stage.aura .front .b-body { box-shadow: 0 0 24px var(--aura), 0 0 70px -10px var(--aura); transition: box-shadow .35s; }
.pack-stage.aura.torn::after { background: radial-gradient(circle, rgba(255, 255, 255, .95), var(--aura) 35%, transparent 65%); }
/* Historique et GOAT : des rayons sortent du sachet */
.pack-stage.aura-r5 .front::after, .pack-stage.aura-r6 .front::after {
  content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--aura) 0 6deg, transparent 6deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: auraSpin 3s linear infinite; opacity: .7;
}
.emerge.glow-r2 i { border-color: var(--r2); box-shadow: 0 0 22px rgba(61, 139, 253, .5); }
.emerge.glow-r3 i { border-color: var(--r3); box-shadow: 0 0 24px rgba(176, 97, 255, .55); }
@keyframes auraPulse { to { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--aura-s) * 1.12)); } }
@keyframes auraSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .pack-stage::before { width: 380px; height: 380px; } }

/* ---------- ouverture : rien de cliquable pendant que le sachet se déchire ---------- */
.opener.opening .count-picker, .opener.opening #go, .opener.opening > a { pointer-events: none; opacity: .35; transition: opacity .2s; }

/* ---------- photos de profil ---------- */
.av-letter { color: #fff; background: linear-gradient(135deg, hsl(var(--h, 140) 65% 45%), hsl(calc(var(--h, 140) + 40) 70% 25%)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.av-rank { width: 42px; height: 42px; font-size: 18px; box-shadow: 0 0 0 2px var(--line-2); }
.rank-row:nth-child(1) .av-rank { box-shadow: 0 0 0 3px var(--r4), 0 0 18px -4px var(--r4); }
.rank-row:nth-child(2) .av-rank { box-shadow: 0 0 0 3px #cfd8dc, 0 0 14px -4px #cfd8dc; }
.rank-row:nth-child(3) .av-rank { box-shadow: 0 0 0 3px #d08a4e, 0 0 14px -4px #d08a4e; }
.rank-row.me .av-rank { box-shadow: 0 0 0 3px var(--accent), 0 0 16px -4px var(--accent); }
#top .av { width: 34px; height: 34px; font-size: 15px; }

/* ---------- animation d'ouverture du sachet ---------- */
/* la salle s'assombrit autour du sachet, avec des rayons de la couleur de la meilleure carte */
.ob-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 0 160px, rgba(2, 6, 4, .82) 480px);
  animation: veilIn .45s ease-out both;
}
.ob-veil::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, var(--aura, rgba(215, 255, 62, .35)) 0 3deg, transparent 3deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 0, transparent 60%); mask: radial-gradient(closest-side, #000 0, transparent 60%);
  opacity: .22; animation: auraSpin 14s linear infinite;
}
.ob-veil.out { animation: veilOut .4s ease-in forwards; }
@keyframes veilIn { from { opacity: 0; } }
@keyframes veilOut { to { opacity: 0; } }
.opener.opening .pack-stage { position: relative; z-index: 2; }
.opener.opening .kicker { position: relative; z-index: 2; }

/* les sachets se rassemblent, celui de devant grossit */
.pack-stage .front { transition: scale .45s cubic-bezier(.2, 1.3, .4, 1); }
.pack-stage.focus .front { scale: 1.1; }
.pack-stage.focus .behind { transform: none !important; opacity: 0; transition: transform .45s ease-in, opacity .45s ease-in; }
.pack-stage.focus .pack-count, .pack-stage.focus .pull-track { opacity: 0; transition: opacity .2s; }
.pack-stage.charge.rumble .front { animation-duration: .06s; }

/* la ligne de déchirure s'allume de gauche à droite */
.ob-seam {
  position: absolute; left: 0; top: 15%; width: 0; height: 4px; z-index: 6; pointer-events: none; border-radius: 2px;
  transform: translateY(-50%);
}
.charge .ob-seam { animation: seamGrow .55s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes seamGrow { to { width: 100%; } }
/* faisceau de lumière qui sort de l'ouverture */
.ob-seam::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 0; border-radius: 50% 50% 0 0;
  background: linear-gradient(to top, #fff, var(--aura, #d7ff3e) 25%, transparent); filter: blur(8px); opacity: 0;
}
.ripped .ob-seam { width: 100%; animation: none; }
.ripped .ob-seam::after { animation: beamUp 1.3s ease-out forwards; }
@keyframes beamUp { 25% { height: 240px; opacity: .95; } 100% { height: 320px; opacity: 0; } }

/* le haut arraché : copie du sachet découpée au-dessus du bord dentelé, qui part en tournant */
.pack-stage.ripped .front .b-body:not(.ob-cap) { clip-path: var(--rip-bottom); }
.pack-stage.ripped .front .b-tear { visibility: hidden; }
.ob-cap {
  z-index: 5; clip-path: var(--rip-top); transform-origin: 100% 15%; pointer-events: none;
  animation: capOff .8s cubic-bezier(.35, .1, .45, 1) forwards;
}
@keyframes capOff {
  0% { transform: none; }
  30% { transform: rotate(9deg) translate(2px, -6px); }
  100% { transform: translate(150px, -230px) rotate(38deg); opacity: 0; }
}

/* les cartes sortent par l'ouverture (derrière le sachet), puis passent devant quand il tombe */
.ripped .emerge i { transition: transform .7s cubic-bezier(.2, 1.15, .4, 1), box-shadow .3s; transition-delay: calc(var(--i) * 70ms); }
.ripped.rising .emerge i {
  transform: translate(calc((var(--i) - 2) * 58px), -54%) rotate(calc((var(--i) - 2) * 11deg));
  box-shadow: 0 0 24px var(--aura, rgba(215, 255, 62, .45)), 0 16px 28px rgba(0, 0, 0, .5);
}
.ripped.gather .emerge i {
  transform: translate(calc((var(--i) - 2) * 1.5px), calc(-24% + (var(--i) - 2) * 1.5px)) scale(1.05); box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.3, .7, .25, 1), box-shadow .45s; transition-delay: calc((4 - var(--i)) * 25ms);
}
@media (max-width: 600px) { .ripped.rising .emerge i { transform: translate(calc((var(--i) - 2) * 38px), -56%) rotate(calc((var(--i) - 2) * 10deg)); } }
@media (prefers-reduced-motion: reduce) {
  .ob-veil::before, .ob-cap, .ob-seam::after { animation: none; }
}

/* ---------- menu « Plus » du téléphone ---------- */
.tabbar button { all: unset; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 4px 0; position: relative; cursor: pointer; }
.tabbar button.on { color: var(--accent); }
@media (max-width: 960px) {
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .tabbar button svg { padding: 3px; width: 30px; height: 26px; border-radius: 999px; }
  .tabbar button.on svg { color: var(--accent-ink); background: linear-gradient(135deg, #f0ff8f, #d7ff3e); }
  .tabbar .nav-badge.dot { position: absolute; top: -2px; left: calc(50% + 8px); min-width: 10px; height: 10px; padding: 0; }
}
#more-sheet { position: fixed; inset: 0; z-index: 40; background: rgba(2, 6, 4, .6); display: flex; align-items: flex-end; animation: veilIn .2s both; }
.more-panel {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #17382a, #0b1a13); border-top: 1px solid rgba(215, 255, 62, .3);
  animation: sheetUp .25s cubic-bezier(.2, 1, .4, 1) both;
}
.more-panel a, .more-panel button {
  all: unset; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-weight: 800; font-size: 13px; text-align: center; cursor: pointer;
}
.more-panel a.on { border-color: var(--accent); color: var(--accent); }
.more-panel svg { width: 24px; height: 24px; }
.more-panel .nav-badge { position: absolute; top: 6px; right: 10px; }
@keyframes sheetUp { from { transform: translateY(100%); } }

/* ---------- récompense de connexion ---------- */
.login-panel { margin-bottom: 18px; }
.login-panel .section-head { margin-bottom: 12px; }
.login-days { display: grid; grid-template-columns: repeat(6, 1fr) 1.6fr; gap: 8px; }
.login-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px; min-height: 96px;
  border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); text-align: center;
}
.login-day b { font-size: 13px; }
.ld-n { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.ld-ico { font-size: 24px; line-height: 1.2; }
.login-day.big { background: linear-gradient(160deg, rgba(246, 201, 69, .28), rgba(90, 60, 10, .4)); border-color: rgba(246, 201, 69, .55); }
.login-day.big .ld-ico { font-size: 34px; }
.login-day.big b { color: #ffd76a; font-size: 15px; }
.login-day.today { border-color: var(--accent); box-shadow: 0 0 22px -6px var(--accent); animation: badgePop 1.6s ease-in-out infinite; }
.login-day.today .ld-n { color: var(--accent); }
.login-day.got { opacity: .55; }
.ld-check { position: absolute; top: 6px; right: 8px; font-style: normal; color: var(--ok); font-weight: 800; }
.login-modal { width: min(720px, 100%); }
.login-modal .login-days { margin: 18px 0; }
@media (max-width: 640px) { .login-days { grid-template-columns: repeat(4, 1fr); } .login-day.big { grid-column: span 2; } }

/* ---------- missions : onglets et bouton « tout récupérer » ---------- */
.mis-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mis-bar .tabs { margin: 0; }
.claim-all { animation: badgePop 1.6s ease-in-out infinite; }

/* ---------- parrainage ---------- */
.ref-hero {
  padding: 28px 24px; border-radius: 22px; text-align: center; border: 1px solid rgba(215, 255, 62, .3);
  background: radial-gradient(500px 200px at 50% 0%, rgba(215, 255, 62, .18), transparent 70%), linear-gradient(160deg, #1d4a32, #0a1a12);
}
.ref-hero h1 { margin: 10px 0 18px; font-size: clamp(30px, 5vw, 48px); }
.ref-link { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; flex-wrap: wrap; }
.ref-link .input { min-width: 220px; font-weight: 700; }
.ref-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.ref-steps .panel { display: flex; align-items: center; gap: 12px; }
.ref-steps h3 { margin: 0; font-size: 15px; }
.ref-num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-family: var(--font-display); font-size: 20px; color: var(--accent-ink); background: var(--accent); }
.ref-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 12px 0 14px; }
.ref-fill { height: 100%; background: linear-gradient(90deg, #a8e81f, var(--accent)); box-shadow: 0 0 12px var(--accent); }
.ref-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ref-tier {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.ref-goal { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.ref-tier b { font-size: 13px; color: var(--accent); }
.ref-tier .rw-pack { color: #d6b3ff; }
.ref-tier.next { border-color: rgba(215, 255, 62, .5); }
.ref-tier.ready { border-color: var(--accent); box-shadow: 0 0 22px -8px var(--accent); }
.ref-tier.claimed { opacity: .55; }
@media (max-width: 760px) { .ref-steps { grid-template-columns: 1fr; } .ref-tiers { grid-template-columns: repeat(3, 1fr); } }

/* ---------- amis ---------- */
.friend-add { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.friend-add .grow { flex: 1; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.friend-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(25, 52, 40, .7), rgba(14, 30, 23, .7)); border: 1px solid var(--line);
}
.fc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-main small { color: var(--muted); font-weight: 700; }
.fc-actions { display: flex; gap: 6px; }
.badge.ok { color: var(--ok); }
.ok-btn { color: var(--ok); }

/* ---------- profil ---------- */
.profile-hero { grid-template-columns: 1fr auto; padding: 28px; min-height: 220px; align-items: end; }
.profile-hero .av-xl { width: 104px; height: 104px; font-size: 42px; }
.profile-hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1; }
.profile-rank { text-align: right; }
.profile-rank b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1; color: var(--pa, var(--accent)); text-shadow: 0 0 30px var(--pa, var(--accent)); }
.profile-rank small { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.pstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
.pstat { padding: 14px 10px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, rgba(25, 52, 40, .75), rgba(14, 30, 23, .75)); border: 1px solid var(--line); }
.pstat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.pstat small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.rarity-panel { margin-top: 14px; }
.rarity-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: rgba(255, 255, 255, .06); }
.rarity-bar i { min-width: 4px; }
.rarity-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.rarity-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rarity-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); }
.rarity-legend b { color: var(--rc); }
.profile-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.best-grid { grid-template-columns: repeat(3, 1fr) !important; }
.pull-list { display: flex; flex-direction: column; gap: 8px; }
.pull-row {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-left: 3px solid var(--rc);
}
.pull-row small { grid-column: 2; color: var(--rc); font-weight: 800; }
.pr-dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.friend-strip { display: flex; gap: 14px; flex-wrap: wrap; }
.friend-strip a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 70px; text-decoration: none; font-size: 12px; font-weight: 700; }
.friend-strip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .pstats { grid-template-columns: repeat(3, 1fr); }
  .profile-cols { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-rank { text-align: left; }
  .profile-rank b { font-size: 44px; }
}

/* ---------- wiki ---------- */
.wiki-tile.unknown .card { filter: grayscale(1) brightness(.72); opacity: .82; }
.wiki-tile.unknown:hover .card { filter: grayscale(.6) brightness(.7); opacity: 1; }
.wiki-count { margin: 6px 0 10px; }
.wiki-more { height: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.chips .chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ---------- la ligne pointillée de déchirure n'apparaît que sur l'écran d'ouverture ---------- */
.booster .b-tear { border-bottom-color: transparent; }
.pack-stage .front .b-tear { border-bottom-color: rgba(255, 255, 255, .5); }
.pack-stage .front.b-daily .b-tear { border-bottom-color: rgba(19, 32, 10, .4); }

/* ---------- favoris ---------- */
.title-row { display: flex; align-items: center; gap: 12px; }
.fav-btn {
  flex: none; width: 46px; height: 46px; margin-top: 8px; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer;
  background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 24px; line-height: 1; transition: transform .15s, color .15s;
}
.fav-btn:hover { transform: scale(1.08); color: #ffc93c; }
.fav-btn.on { color: #ffc93c; border-color: rgba(255, 201, 60, .6); box-shadow: 0 0 18px -4px #ffc93c; }
.wiki-tile { position: relative; }
.wiki-fav { position: absolute; top: -6px; right: -4px; z-index: 9; color: #ffc93c; font-size: 20px; text-shadow: 0 0 8px rgba(0, 0, 0, .8); }
.price-range { align-self: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: rgba(215, 255, 62, .1); color: var(--accent); }
.badge.bad { color: var(--danger); }

/* ---------- missions du jour ---------- */
.daily-missions { margin-top: 0; margin-bottom: 18px; }

/* ---------- notifications ---------- */
.bell { position: relative; }
.bell .nav-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; font-size: 10px; }
#notif-panel {
  position: fixed; top: 60px; right: clamp(8px, 3vw, 32px); z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 520px);
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #17382a, #0b1a13); border: 1px solid rgba(215, 255, 62, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: popIn .25s cubic-bezier(.2, 1.3, .4, 1) both;
}
.np-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.np-list { overflow-y: auto; }
.np-item { display: flex; gap: 10px; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--line); font-size: 14px; }
.np-item:hover { background: rgba(255, 255, 255, .04); }
.np-item.new { background: rgba(215, 255, 62, .07); }
.np-item small { display: block; color: var(--muted); font-weight: 700; margin-top: 2px; }
.np-ico { font-size: 18px; }
.np-empty { padding: 30px; text-align: center; font-size: 28px; opacity: .4; }
@media (max-width: 600px) { #sound-btn { display: none; } }

/* ---------- séparateurs entre les groupes de la navigation ---------- */
.nav-sep { align-self: center; width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }

/* ---------- présentation du jeu (première visite) ---------- */
.intro { width: min(520px, 100%); padding: 30px 28px 22px; }
.intro-ico { font-size: 54px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 0 18px rgba(215, 255, 62, .5)); animation: popIn .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.intro h2 { font-size: clamp(26px, 6vw, 34px); }
.intro-body { min-height: 150px; font-size: 15.5px; line-height: 1.55; }
.intro-body p { margin: 10px 0; }
.intro-body b { color: var(--accent); }
.intro-gift { padding: 12px; border-radius: 14px; background: rgba(215, 255, 62, .12); border: 1px solid rgba(215, 255, 62, .35); }
.intro-rar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.intro-rar span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.intro-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0; }
.intro-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: width .25s, background .25s; }
.intro-dots i.on { width: 22px; background: var(--accent); }
.intro-actions { justify-content: space-between; }
.intro-actions .big-btn { width: auto; min-width: 170px; }

/* ---------- fenêtre de confirmation du site ---------- */
.confirm-box { width: min(420px, 100%); }
.confirm-box p { font-size: 16px; font-weight: 700; margin: 6px 0 18px; }
.confirm-actions { justify-content: flex-end; gap: 10px; }
.confirm-actions .btn { min-width: 110px; }

/* ---------- recyclage des doublons ---------- */
.recycle-box { width: min(520px, 100%); text-align: left; }
.recycle-box h2 { text-align: center; }
.rec-keep { text-align: center; margin: 4px 0 16px !important; font-weight: 700; }
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-left: 4px solid var(--rc); transition: background .15s, border-color .15s;
}
.rec-row.on { background: color-mix(in srgb, var(--rc) 14%, transparent); border-color: color-mix(in srgb, var(--rc) 55%, transparent); border-left-color: var(--rc); }
.rec-row.none { opacity: .4; cursor: default; }
.rec-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.rec-name { font-weight: 800; color: var(--rc); }
.rec-calc { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-sum { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.rec-row:not(.on) .rec-sum { opacity: .5; }
.rec-total { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: rgba(215, 255, 62, .1); border: 1px solid rgba(215, 255, 62, .35); font-weight: 800; }
.rec-total b { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--accent); }
@media (max-width: 480px) { .rec-row { grid-template-columns: auto 1fr auto; } .rec-calc { grid-column: 2; grid-row: 2; font-size: 12px; } .rec-sum { grid-row: span 2; } }

/* ---------- annonce : le GOAT a été tiré ---------- */
.goat-wrap { background: radial-gradient(circle at 50% 35%, rgba(246, 226, 122, .25), rgba(3, 8, 6, .94) 70%); }
.goat-news { width: min(460px, 100%); border-color: rgba(246, 226, 122, .6); box-shadow: 0 0 80px -10px rgba(246, 226, 122, .7), 0 30px 80px rgba(0, 0, 0, .6); }
.goat-news .kicker { color: var(--r6); }
.goat-news h2 { color: var(--r6); text-shadow: 0 0 24px rgba(246, 226, 122, .7); }
.goat-card { width: min(240px, 60vw); margin: 14px auto; }
.goat-card .card { width: 100%; }
.goat-by { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.goat-by b { color: var(--r6); }
.goat-now { font-weight: 700; margin: 8px 0 16px !important; }