/* KICKOFF · Boutique cosmétique (V3) · DA bleue
   Utilise les tokens (var(--red)=BLEU, --gold accent, --ink...). Mobile-first.
   Contient aussi les états VERROUILLÉS du créateur de perso (pièces boutique). */

.sh-wrap { display:flex; flex-direction:column; gap:16px; }

/* ---------- hero ---------- */
.sh-hero { padding:6px 2px 0; }
.sh-hero-title { font-size:30px; line-height:1.02; margin-top:2px; }
.sh-hero-title .s { color:var(--red); text-shadow:0 0 14px rgba(59,130,246,.7); }
.sh-hero-sub { color:var(--muted); font-size:13.5px; margin-top:6px; max-width:34ch; }

/* ---------- onglets ---------- */
.sh-tabs {
  display:flex; gap:6px; background:var(--ink-2); border:1px solid var(--line);
  border-radius:14px; padding:5px; position:sticky; top:58px; z-index:6;
  backdrop-filter:blur(8px);
}
.sh-tab {
  flex:1; cursor:pointer; border:none; background:transparent; color:var(--muted);
  font-family:var(--disp); font-style:italic; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:13px; padding:9px 6px; border-radius:10px;
  transition:color .15s ease, background .2s ease;
}
.sh-tab.active {
  color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep));
  box-shadow:var(--glow-red);
}

.sh-fade { animation:sh-fade .28s ease both; }
@keyframes sh-fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ---------- pack gratuit du jour ---------- */
.sh-free {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,rgba(59,130,246,.20),var(--ink-3));
  border:1px solid rgba(59,130,246,.42); border-radius:var(--radius); padding:16px;
}
.sh-free.spent { opacity:.72; border-color:var(--line); background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); }
.sh-free-glow {
  position:absolute; inset:-40% -20% auto auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,195,59,.35),transparent 62%); pointer-events:none;
}
.sh-free-txt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.sh-free-title { font-size:20px; }
.sh-free-title i { color:var(--gold); font-style:italic; }
.sh-free-txt .muted { font-size:12.5px; }
.sh-free-btn { width:auto; flex:none; padding:13px 20px; }

/* ---------- packs ---------- */
.sh-packs { display:flex; flex-direction:column; gap:14px; }
.sh-pack {
  position:relative; background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:15px;
}
.sh-pack.featured { border-color:rgba(244,195,59,.5); box-shadow:0 0 0 1px rgba(244,195,59,.18), 0 18px 44px rgba(0,0,0,.5); }
.sh-pack.owned { opacity:.86; }
.sh-pack-flag {
  position:absolute; top:-9px; left:14px; background:var(--gold); color:#1A1204;
  font-family:var(--disp); font-style:italic; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:10px; padding:3px 10px; border-radius:999px;
}
.sh-pack-head { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.sh-pack-name { font-size:19px; }
.sh-pack-tag { font-size:12.5px; }
.sh-pack-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px;
  margin-bottom:12px;
}
.sh-mini { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sh-mini-fig {
  width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(59,130,246,.16),var(--ink) 70%);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.sh-mini-fig svg { width:100%; height:100%; }
.sh-mini.owned .sh-mini-fig { border-color:rgba(34,197,94,.5); }
.sh-mini-lbl { font-size:9.5px; color:var(--muted); text-align:center; line-height:1.15; }
.sh-pack-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sh-pack-count {
  font-family:var(--disp); font-style:italic; text-transform:uppercase; letter-spacing:.08em;
  font-size:11px; color:var(--muted);
}
.sh-pack-foot .sh-btn, .sh-card .sh-btn { width:auto; flex:none; }

/* ---------- grille skins / cadres ---------- */
.sh-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sh-card {
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 12px 14px;
}
.sh-card .sh-btn { width:100%; }
.sh-card.owned { opacity:.9; }
.sh-fig {
  border-radius:13px; overflow:hidden; aspect-ratio:1;
  background:radial-gradient(circle at 50% 36%,rgba(59,130,246,.15),var(--ink) 72%);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.sh-fig svg { width:100%; height:100%; }
.sh-meta { display:flex; flex-direction:column; gap:1px; min-height:34px; }
.sh-name { font-size:15px; line-height:1.05; }
.sh-coll { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.sh-rar {
  position:absolute; top:10px; left:10px; z-index:2; font-family:var(--disp); font-style:italic;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:9.5px;
  padding:3px 8px; border-radius:999px;
}
.sh-price { font-family:var(--disp); font-style:italic; font-weight:700; letter-spacing:.02em; }

/* rareté : liseré + ruban */
.rar-rare .sh-rar   { background:rgba(59,130,246,.16); color:var(--red-glow); border:1px solid rgba(59,130,246,.42); }
.rar-epic .sh-rar   { background:rgba(139,92,246,.16); color:#B79BFF; border:1px solid rgba(139,92,246,.45); }
.rar-legend .sh-rar { background:rgba(244,195,59,.16); color:var(--gold); border:1px solid rgba(244,195,59,.5); }
.sh-card.rar-epic   { border-color:rgba(139,92,246,.34); }
.sh-card.rar-legend { border-color:rgba(244,195,59,.4); box-shadow:0 0 0 1px rgba(244,195,59,.14); }

/* ---------- révélation d'un pack gratuit ---------- */
.sh-reveal {
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,14,.82); backdrop-filter:blur(6px); opacity:0; transition:opacity .28s ease;
  padding:24px;
}
.sh-reveal.in { opacity:1; }
.sh-reveal-inner {
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  transform:scale(.82); transition:transform .32s cubic-bezier(.2,1.2,.3,1);
}
.sh-reveal.in .sh-reveal-inner { transform:scale(1); }
.sh-reveal-inner .kicker { color:var(--muted); }
.sh-reveal-fig {
  width:min(240px,66vw); aspect-ratio:1; border-radius:22px; overflow:hidden; margin:2px 0;
  background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.2),var(--ink) 70%);
  border:1px solid var(--line); position:relative;
}
.sh-reveal-fig::after {
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  box-shadow:0 0 60px 6px rgba(59,130,246,.4) inset;
}
.rar-legend .sh-reveal-fig::after { box-shadow:0 0 70px 8px rgba(244,195,59,.45) inset; }
.rar-epic .sh-reveal-fig::after { box-shadow:0 0 66px 8px rgba(139,92,246,.42) inset; }
.sh-reveal-fig svg { width:100%; height:100%; }
.sh-reveal-name { font-size:24px; }
.sh-reveal-rar {
  font-family:var(--disp); font-style:italic; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:12px; color:var(--gold);
}
.rar-rare .sh-reveal-rar { color:var(--red-glow); }
.rar-epic .sh-reveal-rar { color:#B79BFF; }
.sh-reveal-close { width:auto; margin-top:12px; padding:13px 34px; }

.sh-legal { font-size:11.5px; line-height:1.5; padding:4px 2px 8px; }

@media (max-width:340px){ .sh-grid { grid-template-columns:1fr; } }

/* ============================================================
   CRÉATEUR DE PERSO · pièces VERROUILLÉES (boutique)
   Styles hébergés ici car character.css ne fait pas partie de ce lot.
   ============================================================ */
.ch-vig.locked .ch-vig-box,
.ch-sw.locked { position:relative; }
.ch-vig.locked .ch-vig-box { filter:grayscale(.55) brightness(.72); }
.ch-vig.locked .ch-vig-lbl { color:var(--gold); }
.ch-sw.locked { filter:grayscale(.3) brightness(.7); box-shadow:0 0 0 2px rgba(244,195,59,.5) inset; }
.ch-choice.locked, .ch-num.locked { color:var(--gold); border-color:rgba(244,195,59,.5); }

/* pastille cadenas "/" (motif slash KickOff) */
.ch-lock {
  position:absolute; top:4px; right:4px; z-index:3;
  width:20px; height:20px; border-radius:7px;
  background:rgba(13,13,13,.78); border:1px solid rgba(244,195,59,.6);
  color:var(--gold); font-family:var(--disp); font-style:italic; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
}
.ch-sw.locked .ch-lock { top:50%; left:50%; right:auto; transform:translate(-50%,-50%); }
.ch-lock-i { color:var(--gold); font-family:var(--disp); font-style:italic; font-weight:700; }