/* anniversary-wrapped.css — Waifly Wrapped (scripts/anniversary-wrapped.js).
   Les cartes sont des illustrations (fonds propres à chaque carte) ; les boutons suivent le thème.
   Toutes les tailles sont en cqw : la même carte sert au lecteur plein écran et aux miniatures. */

.b3w-card {
    container-type: inline-size;
    position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 9 / 16;
    display: flex; flex-direction: column; gap: 3.5cqw; overflow: hidden;
    padding: 4.5cqw 5cqw 5cqw; border-radius: 6cqw; color: #f4f7fd;
    font-family: inherit; text-align: start; user-select: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.b3w-days { background: radial-gradient(120% 80% at 0% 0%, rgba(56, 177, 237, .45), transparent 60%), linear-gradient(165deg, #0f3a66, #081426 75%); }
.b3w-servers { background: radial-gradient(110% 80% at 100% 0%, rgba(45, 212, 191, .35), transparent 60%), linear-gradient(165deg, #0d4b52, #06191d 75%); }
.b3w-life { background: radial-gradient(110% 80% at 0% 100%, rgba(251, 146, 60, .4), transparent 60%), linear-gradient(165deg, #6b2f12, #200d05 75%); }
.b3w-supporter { background: radial-gradient(110% 80% at 100% 0%, rgba(234, 179, 8, .35), transparent 60%), linear-gradient(165deg, #4a3508, #171003 72%); }
.b3w-supporter.rarity-diamond { background: radial-gradient(110% 80% at 100% 0%, rgba(34, 211, 238, .4), transparent 60%), linear-gradient(165deg, #0b4250, #04161c 72%); }
.b3w-supporter.rarity-silver { background: radial-gradient(110% 80% at 100% 0%, rgba(226, 232, 240, .3), transparent 60%), linear-gradient(165deg, #3a4352, #10141b 72%); }
.b3w-supporter.rarity-bronze { background: radial-gradient(110% 80% at 100% 0%, rgba(205, 127, 70, .38), transparent 60%), linear-gradient(165deg, #4d2a12, #170c05 72%); }
.b3w-free { background: linear-gradient(165deg, #2a3446, #121722 72%); }
.b3w-final { background: radial-gradient(120% 90% at 50% 0%, rgba(244, 194, 91, .4), transparent 60%), linear-gradient(165deg, #1d2b4a, #0a0f1d); }

.b3w-card > * { position: relative; z-index: 1; }
/* Halos flous et grande icône en filigrane : décor, derrière le contenu. */
.b3w-card > .b3w-glow { position: absolute; z-index: 0; width: 70cqw; height: 70cqw; border-radius: 50%; filter: blur(14cqw); opacity: .55; pointer-events: none; }
.b3w-glow.a { top: -18cqw; left: -22cqw; background: rgba(255, 255, 255, .22); }
.b3w-glow.b { bottom: -26cqw; right: -24cqw; background: rgba(255, 255, 255, .12); }
.b3w-card > .b3w-mark { position: absolute; z-index: 0; right: -14cqw; bottom: 10cqw; width: 72cqw; height: 72cqw; opacity: .08; transform: rotate(-14deg); pointer-events: none; }
.b3w-mark svg { width: 100%; height: 100%; }
.b3w-brand { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-top: -1cqw; font-size: 3.6cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.b3w-brand-tag { padding: .6cqw 2.4cqw; border-radius: 99cqw; border: 1px solid rgba(255, 255, 255, .45); font-size: 3.2cqw; }
.b3w-word { font-size: 18cqw; }
.b3w-name { font-size: 7cqw; font-weight: 800; }

.b3w-bars { display: flex; gap: 1.6cqw; flex: none; }
.b3w-bars i { flex: 1; height: 1.2cqw; min-height: 2px; border-radius: 1cqw; background: rgba(255, 255, 255, .28); }
.b3w-bars i.on { background: #fff; }
.b3w-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; min-height: 0; }
.b3w-foot { flex: none; display: flex; flex-direction: column; gap: 3cqw; }
.b3w-final .b3w-body { align-items: center; text-align: center; }

.b3w-kicker { font-size: 4.4cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.b3w-huge { font-size: 24cqw; font-weight: 800; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.b3w-big { font-size: 10cqw; font-weight: 800; line-height: 1.05; }
.b3w-txt { margin: 0; font-size: 5.4cqw; line-height: 1.4; opacity: .94; }
.b3w-hint { font-size: 4.6cqw; opacity: .8; line-height: 1.35; }
.b3w-art { display: block; width: 22cqw; height: 22cqw; opacity: .85; }
.b3w-art svg { width: 100%; height: 100%; }

.b3w-chips { display: flex; flex-wrap: wrap; gap: 2cqw; }
.b3w-chip { font-size: 4.4cqw; padding: 1cqw 3.4cqw; border-radius: 99cqw; background: rgba(255, 255, 255, .14); }
.b3w-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; font-size: 5cqw; }
.b3w-facts b { font-size: 6cqw; }

.b3w-tier { display: flex; align-items: center; gap: 3cqw; font-size: 6cqw; }
.b3w-tier.center { justify-content: center; }
.b3w-card .b3w-badge { width: 10cqw; height: 10cqw; border-radius: 2.6cqw; flex: none; }
.b3w-card .b3w-badge svg { width: 6.4cqw; height: 6.4cqw; }

.b3w-ladder { display: flex; flex-direction: column; gap: 1.6cqw; font-size: 4.4cqw; }
.b3w-ladder > span { display: flex; justify-content: space-between; padding: 1.6cqw 3cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, .08); opacity: .66; }
.b3w-ladder > span.me { background: rgba(255, 255, 255, .2); outline: 1px solid rgba(255, 255, 255, .55); opacity: 1; font-weight: 700; }
.b3w-ladder i { font-style: normal; }

.b3w-avatar { position: relative; width: 30cqw; height: 30cqw; padding: 1.6cqw; border-radius: 50%;
    background: conic-gradient(#38b1ed, #f4c25b, #f472b6, #4ade80, #38b1ed); }
.b3w-avatar::after { content: ""; position: absolute; inset: -5cqw; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 10% 30%, #f472b6 0 1.1cqw, transparent 1.3cqw), radial-gradient(circle at 90% 20%, #38b1ed 0 1.1cqw, transparent 1.3cqw),
                radial-gradient(circle at 94% 72%, #facc15 0 1.1cqw, transparent 1.3cqw), radial-gradient(circle at 18% 88%, #4ade80 0 1.1cqw, transparent 1.3cqw),
                radial-gradient(circle at 52% 0%, #e2e8f0 0 1cqw, transparent 1.2cqw); }
.b3w-face { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    font-size: 12cqw; font-weight: 800; background: radial-gradient(circle at 35% 30%, #5b7bb3, #2a3f66); }
.b3w-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b3w-gifts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; font-size: 4.6cqw; text-align: start; }
.b3w-gifts li { display: flex; align-items: center; gap: 3cqw; }
.b3w-gifts .b3w-badge { width: 8cqw; height: 8cqw; }
.b3w-gifts .b3w-badge svg { width: 5cqw; height: 5cqw; }

.b3w-btn {
    display: block; width: 100%; box-sizing: border-box; padding: 3.4cqw; border: 0; border-radius: 3cqw;
    background: var(--primary-gradient, var(--primary-color, #38b1ed)); color: #fff;
    font: inherit; font-size: 5cqw; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.b3w-btn.ghost { background: rgba(255, 255, 255, .14); }
.terminal-mode .b3w-btn:not(.ghost) { background: var(--primary-color, #22c55e); color: #000; border-radius: 0; }

.b3w-cry { display: block; width: 40cqw; height: 40cqw; align-self: center; }
.b3w-cry svg { width: 100%; height: 100%; }
.b3w-cry .tear { animation: b3w-tear 1.8s ease-in infinite; }
.b3w-cry .tear.r { animation-delay: .9s; }
@keyframes b3w-tear { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }

/* ── Lecteur plein écran ── */
html.b3w-lock, html.b3w-lock body { overflow: hidden; }
.b3w-overlay {
    position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center;
    background: rgba(3, 7, 15, .88); backdrop-filter: blur(6px);
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.b3w-stage { width: min(420px, 100%, calc((100dvh - 48px) * 9 / 16)); cursor: pointer; }
.b3w-close, .b3w-nav {
    position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.b3w-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.b3w-close svg, .b3w-nav svg { width: 20px; height: 20px; }
.b3w-nav { top: 50%; translate: 0 -50%; }
.b3w-nav.prev { left: 16px; } .b3w-nav.prev svg { rotate: 90deg; }
.b3w-nav.next { right: 16px; } .b3w-nav.next svg { rotate: -90deg; }
.b3w-nav:disabled { opacity: .25; cursor: default; }
.b3w-label { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 16px; font-size: .78rem; font-weight: 700; color: #fde68a; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 640px) { .b3w-nav { display: none; } }

.b3w-in { animation: b3w-in .38s cubic-bezier(.2, .8, .2, 1); }
.b3w-in-back { animation: b3w-in-back .3s ease-out; }
@keyframes b3w-in { from { opacity: 0; transform: translateX(6%) scale(.97); } }
@keyframes b3w-in-back { from { opacity: 0; transform: translateX(-6%) scale(.97); } }
.b3w-in .b3w-huge, .b3w-in .b3w-big, .b3w-in .b3w-avatar { animation: b3w-pop .55s .08s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes b3w-pop { from { opacity: 0; transform: scale(.7); } }

@media (prefers-reduced-motion: reduce) {
    .b3w-cry .tear { animation: none; opacity: 1; }
    .b3w-in, .b3w-in-back, .b3w-in .b3w-huge, .b3w-in .b3w-big, .b3w-in .b3w-avatar { animation: none; }
}