/* Classeur « Stories + Deck » (YAP-038) : stories par section, carrousel 3D de paquets,
   éventail, collection, story plein écran. Complète drop.css (mêmes jetons). Animations sur
   transform/opacity uniquement ; rien de tout ça avec le mouvement réduit. */

/* Couleurs par section : anneaux, paquets, badges. */
.sec-players { --s1: var(--gold-1); --s2: var(--gold-3); }
.sec-aura { --s1: var(--gain); --s2: color-mix(in srgb, var(--gain) 30%, var(--ink)); }
.sec-lore { --s1: var(--lore); --s2: var(--lore-ink); }
.sec-season { --s1: var(--loss); --s2: var(--coral-deep); }
.sec-roast { --s1: var(--coral-soft); --s2: var(--coral-deep); }
.sec-awards { --s1: var(--holo-4); --s2: var(--gold-3); }
.sec-predictions { --s1: var(--holo-2); --s2: color-mix(in srgb, var(--down) 45%, var(--ink)); }
.sec-care { --s1: var(--tender); --s2: color-mix(in srgb, var(--tender) 30%, var(--ink)); }
.sec-letter { --s1: var(--paper); --s2: color-mix(in srgb, var(--paper) 35%, var(--gold-3)); }
.sec-quiz { --s1: var(--holo-1); --s2: color-mix(in srgb, var(--down) 40%, var(--ink)); }
.sec-media { --s1: var(--holo-3); --s2: color-mix(in srgb, var(--holo-2) 45%, var(--ink)); }
.sec-records { --s1: var(--up); --s2: color-mix(in srgb, var(--up) 30%, var(--ink)); }
.sec-anthems { --s1: var(--holo-2); --s2: color-mix(in srgb, var(--holo-2) 45%, var(--ink)); }

.bx { display: grid; gap: 18px; min-width: 0; }
.bx-label { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

/* Stories */
.bx-stories { display: grid; gap: 8px; min-width: 0; }
.bx-stories-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; background: var(--coral); color: var(--on-coral); font-size: 14.5px; font-weight: 800;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--coral) 85%, transparent);
}
.bx-play-ico { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.6; }
.bx-rings {
  display: flex; gap: 10px; margin: 0 -6px; padding: 4px 6px 4px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.bx-rings::-webkit-scrollbar { display: none; }
.bx-rings li { flex: none; scroll-snap-align: start; }
.bx-ring {
  position: relative; display: grid; justify-items: center; gap: 5px; width: 72px; padding: 2px 0;
  border: 0; background: none; color: var(--text); -webkit-tap-highlight-color: transparent;
}
.bx-ring:focus-visible { outline: none; }
.bx-ring:focus-visible .bx-ring-ring { outline: 3px solid var(--focus); outline-offset: 3px; }
.bx-ring-ring { position: relative; display: grid; place-items: center; width: 66px; height: 66px; padding: 3px; border-radius: 50%; }
.bx-ring-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--line); }
.bx-ring.is-new .bx-ring-ring::before { background: conic-gradient(from 20deg, var(--coral), var(--gold-2), var(--holo-3), var(--holo-2), var(--holo-1), var(--coral)); }
.bx-ring-avatar {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--ink); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--s1) 55%, var(--ink-2)), var(--ink-2) 78%);
}
.bx-ring-emoji { font-size: 27px; line-height: 1; }
.bx-ring.is-seen .bx-ring-avatar { background: var(--surface); }
.bx-ring.is-sealed .bx-ring-emoji { opacity: .45; }
.bx-ring-name { max-width: 72px; overflow: hidden; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bx-ring.is-seen .bx-ring-name, .bx-ring.is-sealed .bx-ring-name { color: var(--muted); }
.bx-ring-lock {
  position: absolute; top: 47px; right: 1px; display: grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--surface-2); color: var(--text);
}
.bx-ring-lock svg { width: 12px; height: 12px; }

/* Paquets : carrousel 3D */
.bx-decks { position: relative; display: grid; gap: 8px; min-width: 0; }
.bx-stage { position: relative; }
.bx-viewport {
  --deck-w: clamp(146px, 42vw, 180px);
  position: relative; height: calc(var(--deck-w) * 1.4 + 58px); overflow: hidden;
  perspective: 1000px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
  transition: opacity .25s;
}
.bx-track { position: absolute; inset: 0; }
.bx-deck {
  position: absolute; left: 50%; top: 50%; width: var(--deck-w); aspect-ratio: 5 / 7;
  margin: calc(var(--deck-w) * -.7 + 8px) 0 0 calc(var(--deck-w) / -2); padding: 0;
  border: 0; border-radius: 18px; background: none; color: var(--text); -webkit-tap-highlight-color: transparent;
}
.bx-viewport.is-moving .bx-deck { will-change: transform; }
.bx-deck:focus-visible { outline: 3px solid var(--focus); outline-offset: 7px; }
.bx-stack { position: absolute; inset: 0; }
.bx-back, .bx-top { position: absolute; inset: 0; border-radius: 16px; }
.bx-back { background: var(--holo); box-shadow: 0 10px 24px -14px var(--shade); }
.bx-back::after {
  content: ""; position: absolute; inset: 5px; border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ink-2) 55%, transparent), var(--ink-2) 78%);
}
.bx-back-y {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  color: color-mix(in srgb, var(--text) 26%, transparent); font-family: var(--font-display); font-size: calc(var(--deck-w) * .3); font-weight: 900;
}
.bx-back.b1 { transform: translate(7px, 5px) rotate(4deg); }
.bx-back.b2 { transform: translate(-7px, 9px) rotate(-5deg); }
.bx-back.b3 { transform: translate(3px, 13px) rotate(8deg); }
.bx-top {
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 13px 10px 13px; overflow: hidden;
  background: linear-gradient(160deg, var(--s1), var(--s2));
  box-shadow: 0 18px 34px -18px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent) inset;
  transition: transform .4s var(--ease);
}
.bx-top::before {
  content: ""; position: absolute; inset: 5px; border-radius: 12px;
  background: var(--yx-grain) 0 0 / 160px 160px, var(--pat, linear-gradient(transparent, transparent)), radial-gradient(120% 70% at 50% 16%, color-mix(in srgb, var(--s1) 36%, var(--ink-2)), var(--ink-2) 80%);
}
.bx-top > * { position: relative; }
.bx-top-kicker { justify-self: start; padding-left: 4px; color: var(--s1); font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.bx-top-emoji { align-self: center; font-size: calc(var(--deck-w) * .32); line-height: 1; }
.bx-top-name {
  max-width: 100%; font-family: var(--font-display); font-size: calc(var(--deck-w) * .165); font-weight: 900; line-height: .9;
  text-align: center; text-transform: uppercase; overflow-wrap: anywhere;
}
.bx-top-count {
  margin-top: 7px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bx-shine {
  position: absolute; inset: -30% -70%; z-index: 2; opacity: 0; pointer-events: none; transform: translateX(-35%);
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--holo-1) 42%, transparent) 46%, color-mix(in srgb, var(--holo-3) 40%, transparent) 50%, color-mix(in srgb, var(--holo-4) 36%, transparent) 54%, transparent 60%);
}
.bx-deck.is-center .bx-shine { opacity: .6; }
.bx-deck.is-center .bx-top { transform: translateY(-12px) rotate(-3deg); }
.bx-deck.is-center .bx-stack::after {
  content: ""; position: absolute; inset: 6% -10% -14%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s1) 42%, transparent), transparent);
}
.bx-deck.is-sealed .bx-top-emoji { opacity: .6; }
.bx-deck.is-locked .bx-top, .bx-deck.is-locked .bx-back { filter: saturate(.4) brightness(.78); }
/* Blister : film plastique brillant, soudure crantée en haut, cadenas. */
.bx-wrap {
  position: absolute; inset: -7px -6px -14px; z-index: 3; border-radius: 21px; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 20%, color-mix(in srgb, var(--text) 34%, transparent) 28%, transparent 35%, transparent 57%, color-mix(in srgb, var(--text) 20%, transparent) 63%, transparent 70%),
    repeating-linear-gradient(64deg, transparent 0 13px, color-mix(in srgb, var(--text) 6%, transparent) 13px 14px),
    color-mix(in srgb, var(--silver-1) 9%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent) inset, 0 0 22px color-mix(in srgb, var(--text) 10%, transparent) inset;
}
.bx-wrap::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 7px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 26%, transparent) 0 2px, transparent 2px 5px);
}
.bx-lock {
  position: absolute; left: 50%; bottom: -26px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px;
  border-radius: 50%; background: var(--text); color: var(--ink); box-shadow: 0 10px 22px -8px var(--shade);
}
.bx-lock svg { width: 22px; height: 22px; }
.bx-check {
  position: absolute; top: -9px; right: -9px; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--ok); color: var(--ink); font-size: 15px; font-weight: 900; box-shadow: 0 0 0 3px var(--ink);
}
.bx-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; min-height: 28px; text-align: center; }
.bx-caption-name { font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.bx-caption-count { color: var(--muted); font-size: 13px; font-weight: 700; }
.bx-dots { display: flex; justify-content: center; gap: 7px; }
.bx-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--line); }
.bx-dot.is-on { background: var(--coral); transform: scaleX(2.2); }
.bx-hint { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.bx-callout {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px dashed color-mix(in srgb, var(--gold-2) 60%, var(--line)); border-radius: 16px; background: var(--surface);
}
.bx-callout-lock { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--ink); }
.bx-callout-lock svg { width: 17px; height: 17px; }
.bx-callout-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.bx-callout-btn { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--coral); color: var(--on-coral); font-size: 13.5px; font-weight: 800; }

/* Éventail */
.bx-fan { position: absolute; inset: 0; z-index: 150; }
.bx-decks.is-fanned .bx-viewport { opacity: .12; }
.bx-decks.is-fanned :is(.bx-caption, .bx-dots, .bx-hint) { opacity: 0; }
.bx-fan-head { position: absolute; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bx-fan-title { min-width: 0; overflow: hidden; font-family: var(--font-display); font-size: 26px; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bx-fan-close { display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.bx-fan-close svg { width: 18px; height: 18px; }
.bx-hand { position: absolute; inset: 0; }
.bx-fan-card {
  --fan-w: clamp(80px, 24vw, 104px);
  position: absolute; left: 50%; bottom: 22px; width: var(--fan-w); margin-left: calc(var(--fan-w) / -2); aspect-ratio: 5 / 7;
  transform-origin: 50% var(--pivot, 300px);
  box-shadow: 0 14px 28px -12px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent) inset;
}
.bx-fan-card:hover, .bx-fan-card:focus-visible { translate: 0 -18px; z-index: 90 !important; }
.bx-fan-card .mini-big { font-size: calc(var(--fan-w) * .34); }
.bx-new-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--ink); }
.bx-fan-sealed { border: 1.5px dashed var(--line); background: repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--ink-2) 8px 16px); color: var(--muted); }
.bx-fan-sealed .ico-lock { width: 18px; height: 18px; }

/* Collection */
.bx-meter {
  position: relative; display: grid; gap: 10px; padding: 14px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--holo-2) 12%, var(--surface)), var(--surface) 70%);
}
.bx-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.bx-meter-count { display: flex; align-items: baseline; gap: 6px; }
.bx-meter-big { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.bx-meter-text { color: var(--muted); font-size: 13px; font-weight: 700; }
.bx-bar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bx-bar-fill { display: block; width: 100%; height: 100%; background: var(--holo); transform: scaleX(0); transform-origin: 0 50%; }
.bx-bar::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 70%, transparent), transparent);
}
.bx-rarity, .bx-badges { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.bx-r { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; }
.bx-gem { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.bx-r-legendary .bx-gem { background: var(--holo); }
.bx-r-gold .bx-gem { background: linear-gradient(150deg, var(--gold-1), var(--gold-2)); }
.bx-r-common .bx-gem { background: linear-gradient(150deg, var(--silver-1), var(--silver-2)); }
.bx-badge { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px dashed var(--line); border-radius: 50%; }
.bx-badge-ico { font-size: 19px; line-height: 1; opacity: .28; filter: grayscale(1); }
.bx-badge.is-earned {
  border: 0; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--s1) 70%, var(--ink-2)), var(--ink-2) 82%);
  box-shadow: 0 0 0 2px var(--s1), 0 8px 18px -8px var(--s1);
}
.bx-badge.is-earned .bx-badge-ico { opacity: 1; filter: none; }
.bx-complete-btn {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--holo); color: var(--ink); font-size: 15px; font-weight: 900;
}
.bx-banner {
  position: fixed; left: 50%; top: calc(max(14px, var(--safe-top)) + 50px); z-index: 32; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 16px 8px 8px;
  border-radius: 999px; background: var(--text); color: var(--ink); font-size: 14px; font-weight: 800;
  box-shadow: 0 18px 40px -14px var(--shade); pointer-events: none;
}
.bx-banner-badge { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--holo); font-size: 20px; }

/* Story plein écran (cadre de téléphone sur ordinateur) */
.bx-story { --fade: 1; position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; gap: 22px; }
.bx-story-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 94%, transparent); opacity: var(--fade); }
.bx-story-frame {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; overflow: hidden;
  padding: max(10px, var(--safe-top)) max(10px, var(--safe-right)) max(10px, calc(var(--safe-bottom) + 4px)) max(10px, var(--safe-left));
  background: radial-gradient(120% 60% at 50% 0%, var(--glow), var(--ink) 70%) var(--ink);
}
.bx-bars { display: flex; gap: 4px; padding-top: 2px; }
.bx-seg { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--text) 26%, transparent); }
.bx-seg i { display: block; width: 100%; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; }
.bx-seg.is-done i { transform: scaleX(1); }
.bx-story-head { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.bx-story-avatar {
  display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 17px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--s1, var(--coral)) 55%, var(--ink-2)), var(--ink-2) 80%);
  box-shadow: 0 0 0 2px var(--coral);
}
.bx-story-who { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.bx-story-title { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bx-story-pos { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bx-sbtn, .bx-snav {
  display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text);
}
.bx-sbtn svg, .bx-snav svg { width: 20px; height: 20px; }
.bx-story-stage {
  position: relative; flex: 1; min-height: 0; perspective: 1200px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.bx-story-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.bx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bx-story-foot { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.bx-story-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; text-align: center; }
.bx-story-hint.is-quiet { visibility: hidden; }
.bx-story.is-manual [data-act="pause"] { visibility: hidden; }
.bx-sshare {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: var(--coral); color: var(--on-coral); font-size: 14px; font-weight: 800;
}
.bx-sshare svg { width: 18px; height: 18px; }
.bx-side { display: none; }
.bx-side.is-off { visibility: hidden; }
.bx-canvas-card { background: var(--ink-2); }
.bx-canvas-card canvas { display: block; width: 100%; height: 100%; }
html.bx-story-open #btn-sound, html.bx-story-open #lang { visibility: hidden; }
/* Le toast (texte seul) passe au-dessus du carrousel : il ne doit jamais avaler un toucher. */
.toast { pointer-events: none; }
html.bx-story-open .fx, html.bx-party-open .fx { z-index: 28; }

/* Fête des 100 % */
.bx-party {
  position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; overflow-y: auto;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  background: color-mix(in srgb, var(--ink) 96%, transparent);
}
.bx-party-card { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); text-align: center; }
.bx-party-kicker { color: var(--coral-soft); font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.bx-party-title {
  font-family: var(--font-display); font-size: clamp(46px, 14vw, 64px); font-weight: 900; line-height: .9; text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(165deg, var(--holo-1), var(--holo-3) 55%, var(--holo-4)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bx-party-title:focus { outline: none; }
.bx-party-lead { color: var(--muted); font-size: 15px; font-weight: 600; }
.bx-party-frame {
  width: min(230px, 50vw); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px;
  box-shadow: 0 26px 50px -22px var(--shade), 0 0 0 2px color-mix(in srgb, var(--holo-2) 60%, transparent);
}
.bx-party-canvas { display: block; width: 100%; height: 100%; }
.bx-party-actions { display: grid; gap: 10px; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .bx-ring.is-new .bx-ring-ring::before { animation: bx-spin 6s linear infinite; }
  .bx-ring-ring { transition: transform .18s var(--ease); }
  .bx-ring:active .bx-ring-ring { transform: scale(.92); }
  .bx-play { transition: transform .18s var(--ease); }
  .bx-play:active { transform: scale(.96); }
  .bx-deck.is-center .bx-shine { animation: bx-shine 3.8s ease-in-out infinite; }
  .bx-deck.is-center .bx-top { animation: bx-peek 3.2s ease-in-out infinite; }
  .bx-lock.is-shaking { animation: bx-shake .55s cubic-bezier(.36, .07, .19, .97); }
  .bx-dot { transition: transform .25s var(--ease), background-color .25s; }
  .bx-bar-fill { transition: transform .9s var(--ease); }
  .bx-meter.is-up .bx-bar::after { animation: bx-sweep 1s ease-out; }
  .bx-banner { animation: bx-banner 2.6s var(--ease) both; }
  .bx-banner .bx-banner-badge { animation: bx-drop .8s cubic-bezier(.3, 1.4, .5, 1) both; }
  .bx-story-head, .bx-story-foot, .bx-bars { transition: opacity .2s; }
  .bx-story.is-held .bx-story-head, .bx-story.is-held .bx-story-foot, .bx-story.is-held .bx-bars { opacity: 0; }
  .bx-fan-card { transition: translate .2s var(--ease); }
}
@keyframes bx-spin { to { transform: rotate(1turn); } }
@keyframes bx-shine { 0%, 15% { transform: translateX(-35%); } 60%, 100% { transform: translateX(35%); } }
@keyframes bx-peek { 0%, 100% { transform: translateY(-12px) rotate(-3deg); } 50% { transform: translateY(-17px) rotate(-1.5deg); } }
@keyframes bx-shake {
  10%, 90% { transform: translateX(-1px) rotate(-4deg); }
  20%, 80% { transform: translateX(3px) rotate(8deg); }
  30%, 50%, 70% { transform: translateX(-5px) rotate(-13deg); }
  40%, 60% { transform: translateX(5px) rotate(13deg); }
}
@keyframes bx-sweep { from { opacity: 1; transform: translateX(-100%); } to { opacity: 1; transform: translateX(100%); } }
@keyframes bx-banner { 0% { opacity: 0; transform: translateY(-24px) scale(.9); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes bx-drop { 0% { transform: translateY(-60px) rotate(-30deg) scale(1.5); } 60% { transform: translateY(4px) rotate(8deg) scale(.95); } 100% { transform: none; } }

/* Mouvement réduit : liste de paquets, aucune rotation, story manuelle. */
.bx.is-calm .bx-viewport { --deck-w: 140px; height: auto; overflow: visible; perspective: none; -webkit-mask-image: none; mask-image: none; }
.bx.is-calm .bx-track { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 14px; padding: 12px 6px 18px; }
.bx.is-calm .bx-deck { position: relative; left: auto; top: auto; width: auto; margin: 0; }
.bx.is-calm .bx-top-emoji { font-size: 40px; }
.bx.is-calm .bx-top-name { font-size: 22px; }
.bx.is-calm .bx-caption, .bx.is-calm .bx-dots { display: none; }
.bx.is-calm .bx-decks.is-fanned .bx-viewport { display: none; }
.bx.is-calm .bx-fan { position: static; display: grid; gap: 10px; }
.bx.is-calm .bx-fan-head { position: static; }
.bx.is-calm .bx-hand { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bx.is-calm .bx-fan-card { position: relative; left: auto; bottom: auto; width: auto; margin: 0; transform: none; }
.bx.is-calm .bx-fan-card:hover, .bx.is-calm .bx-fan-card:focus-visible { translate: none; }
.bx-story.is-calm .bx-story-hint { font-size: 12px; }

/* Petits écrans */
@media (max-width: 370px) {
  .bx-ring { width: 66px; }
  .bx-ring-ring { width: 60px; height: 60px; }
  .bx-ring-lock { top: 41px; }
  .bx-ring-name { max-width: 66px; font-size: 11px; }
  .bx-play { padding: 0 14px 0 11px; font-size: 13.5px; }
  .bx-story-hint { font-size: 10.5px; }
}

/* Ordinateur : classeur plus large, paquets plus grands, story dans un cadre de téléphone. */
@media (min-width: 900px) {
  .app:has(> #screen-binder:not([hidden])) { max-width: min(1180px, 100%); }
  #screen-binder > :not(.bx), .bx-stories, .bx-decks > .bx-label, .bx-meter, .bx-callout { width: 100%; max-width: 860px; margin-inline: auto; }
  #screen-binder .bx { width: 100%; }
  .bx-rings { justify-content: safe center; }
  .bx-viewport { --deck-w: 200px; }
  .bx-fan-card { --fan-w: 116px; }
  .bx.is-calm .bx-track { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 700px) and (min-height: 560px) {
  .bx-story-frame {
    width: min(440px, calc((100dvh - 48px) * .56)); height: min(900px, calc(100dvh - 48px)); padding: 12px;
    border-radius: 30px; box-shadow: 0 40px 90px -30px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
  }
  .bx-side {
    position: relative; display: grid; flex: none; place-items: center; width: 52px; height: 52px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text);
  }
  .bx-side svg { width: 22px; height: 22px; }
}

/* ───────────── Fonds riches (YAP-041) ─────────────
   Une matière par section et par rareté : dégradés en maillage, motif discret (SVG en
   data: — img-src data: est permis par drop.html et p.html), grain. Peint une fois : aucun
   motif n'est animé. Le texte garde un fond sombre (ou clair pour la lettre et « Vous étiez
   là ») sous les motifs, qui restent sous 15 % d'opacité. */
:root {
  --yx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --yx-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .15 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  --yx-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffffff' fill-opacity='0.55'%3E%3Cpath d='M59.7 26.6L60.3 29.3L63.1 29.9L60.3 30.6L59.7 33.3L59.1 30.6L56.3 29.9L59.1 29.3Z'/%3E%3Ccircle cx='96.2' cy='66.9' r='0.6'/%3E%3Cpath d='M10.4 76.5L10.8 78.2L12.5 78.6L10.8 79.0L10.4 80.7L10.1 79.0L8.4 78.6L10.1 78.2Z'/%3E%3Cpath d='M77.0 144.0L77.4 145.8L79.2 146.2L77.4 146.6L77.0 148.4L76.6 146.6L74.8 146.2L76.6 145.8Z'/%3E%3Ccircle cx='111.9' cy='167.0' r='1.0'/%3E%3Ccircle cx='171.9' cy='12.0' r='1.2'/%3E%3Ccircle cx='28.8' cy='24.3' r='0.8'/%3E%3Ccircle cx='35.1' cy='104.0' r='1.0'/%3E%3Cpath d='M98.2 12.7L98.6 14.4L100.3 14.8L98.6 15.2L98.2 16.9L97.8 15.2L96.2 14.8L97.8 14.4Z'/%3E%3Ccircle cx='121.0' cy='77.5' r='0.8'/%3E%3Ccircle cx='81.9' cy='55.6' r='1.2'/%3E%3Ccircle cx='46.0' cy='102.8' r='1.0'/%3E%3Cpath d='M129.5 49.4L130.2 52.8L133.6 53.5L130.2 54.3L129.5 57.6L128.7 54.3L125.3 53.5L128.7 52.8Z'/%3E%3Ccircle cx='75.9' cy='134.2' r='0.7'/%3E%3Ccircle cx='10.7' cy='118.9' r='1.1'/%3E%3Ccircle cx='154.6' cy='58.0' r='1.1'/%3E%3Ccircle cx='103.7' cy='82.5' r='1.2'/%3E%3Ccircle cx='85.5' cy='118.2' r='0.6'/%3E%3Ccircle cx='115.3' cy='174.8' r='1.2'/%3E%3Ccircle cx='70.4' cy='119.0' r='0.6'/%3E%3Ccircle cx='32.9' cy='24.1' r='0.6'/%3E%3Ccircle cx='26.2' cy='46.6' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --yx-gold-dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%23fff1b8' fill-opacity='0.5'%3E%3Ccircle cx='15.4' cy='67.8' r='1.0'/%3E%3Ccircle cx='120.3' cy='126.7' r='0.8'/%3E%3Cpath d='M54.9 125.2L55.8 128.7L59.3 129.6L55.8 130.4L54.9 133.9L54.1 130.4L50.6 129.6L54.1 128.7Z'/%3E%3Ccircle cx='29.0' cy='36.9' r='0.8'/%3E%3Ccircle cx='87.7' cy='41.3' r='0.6'/%3E%3Ccircle cx='56.4' cy='84.4' r='1.4'/%3E%3Cpath d='M77.2 88.0L77.9 91.0L80.9 91.7L77.9 92.4L77.2 95.3L76.5 92.4L73.5 91.7L76.5 91.0Z'/%3E%3Ccircle cx='131.7' cy='114.8' r='1.3'/%3E%3Ccircle cx='59.7' cy='60.7' r='0.7'/%3E%3Cpath d='M12.8 11.1L13.3 13.1L15.3 13.6L13.3 14.0L12.8 16.0L12.4 14.0L10.4 13.6L12.4 13.1Z'/%3E%3Cpath d='M52.3 9.5L52.6 11.1L54.2 11.5L52.6 11.8L52.3 13.4L51.9 11.8L50.4 11.5L51.9 11.1Z'/%3E%3Ccircle cx='18.4' cy='55.6' r='0.6'/%3E%3Ccircle cx='91.2' cy='25.1' r='0.8'/%3E%3Ccircle cx='55.7' cy='21.4' r='1.3'/%3E%3Cpath d='M70.2 70.6L70.6 72.3L72.3 72.7L70.6 73.1L70.2 74.8L69.8 73.1L68.0 72.7L69.8 72.3Z'/%3E%3Cpath d='M52.7 37.6L53.4 40.8L56.7 41.6L53.4 42.4L52.7 45.6L51.9 42.4L48.6 41.6L51.9 40.8Z'/%3E%3Cpath d='M7.3 135.8L7.9 138.4L10.6 139.0L7.9 139.7L7.3 142.3L6.7 139.7L4.0 139.0L6.7 138.4Z'/%3E%3Ccircle cx='81.1' cy='7.8' r='1.0'/%3E%3Ccircle cx='126.6' cy='102.9' r='0.8'/%3E%3Ccircle cx='27.7' cy='113.6' r='1.0'/%3E%3Ccircle cx='50.8' cy='35.7' r='1.2'/%3E%3Ccircle cx='125.1' cy='118.5' r='1.3'/%3E%3Cpath d='M36.2 74.7L36.7 77.0L39.0 77.5L36.7 78.0L36.2 80.3L35.7 78.0L33.4 77.5L35.7 77.0Z'/%3E%3Ccircle cx='8.0' cy='43.7' r='0.8'/%3E%3Ccircle cx='139.8' cy='67.5' r='1.3'/%3E%3Cpath d='M139.6 53.3L140.1 55.3L142.1 55.8L140.1 56.2L139.6 58.3L139.1 56.2L137.1 55.8L139.1 55.3Z'/%3E%3C/g%3E%3C/svg%3E");
  --yx-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff6cf' fill-opacity='0.85'%3E%3Ccircle cx='26.0' cy='26.9' r='0.9'/%3E%3Ccircle cx='98.1' cy='57.7' r='0.9'/%3E%3Ccircle cx='13.5' cy='78.0' r='1.1'/%3E%3Ccircle cx='88.0' cy='57.5' r='0.7'/%3E%3Ccircle cx='41.2' cy='93.7' r='1.1'/%3E%3Cpath d='M49.0 107.0L49.5 109.5L52.0 110.0L49.5 110.6L49.0 113.1L48.4 110.6L45.9 110.0L48.4 109.5Z'/%3E%3Ccircle cx='18.2' cy='20.9' r='1.1'/%3E%3Ccircle cx='20.4' cy='96.6' r='1.1'/%3E%3Cpath d='M43.2 63.3L43.6 65.1L45.4 65.4L43.6 65.8L43.2 67.6L42.8 65.8L41.1 65.4L42.8 65.1Z'/%3E%3Ccircle cx='112.7' cy='76.8' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  --yx-constellation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg stroke='%23c4b1ff' stroke-opacity='.1' stroke-width='.8'%3E%3Cpath d='M18 22L52 14'/%3E%3Cpath d='M52 14L80 38'/%3E%3Cpath d='M80 38L64 70'/%3E%3Cpath d='M64 70L30 60'/%3E%3Cpath d='M64 70L104 82'/%3E%3Cpath d='M104 82L92 112'/%3E%3C/g%3E%3Cg fill='%23e4dbff' fill-opacity='.3'%3E%3Ccircle cx='18' cy='22' r='2.2'/%3E%3Ccircle cx='52' cy='14' r='1.6'/%3E%3Ccircle cx='80' cy='38' r='1.6'/%3E%3Ccircle cx='64' cy='70' r='2.2'/%3E%3Ccircle cx='30' cy='60' r='1.6'/%3E%3Ccircle cx='104' cy='82' r='1.6'/%3E%3Ccircle cx='92' cy='112' r='2.2'/%3E%3Ccircle cx='20' cy='104' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --yx-hearts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23b23d2e' fill-opacity='.08'%3E%3Cpath d='M16 27s-10-6.2-10-13a5.5 5.5 0 0 1 10-3.2A5.5 5.5 0 0 1 26 14c0 6.8-10 13-10 13z' transform='translate(2 2) scale(.7)'/%3E%3Cpath d='M16 27s-10-6.2-10-13a5.5 5.5 0 0 1 10-3.2A5.5 5.5 0 0 1 26 14c0 6.8-10 13-10 13z' transform='translate(38 36) scale(.9) rotate(-12 16 16)'/%3E%3C/g%3E%3C/svg%3E");
  --yx-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q15 4 30 20 T60 20 T90 20 T120 20' fill='none' stroke='%237ef0ff' stroke-opacity='.13' stroke-width='1.4'/%3E%3Cpath d='M0 28 Q15 18 30 28 T60 28 T90 28 T120 28' fill='none' stroke='%23ff8bd1' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  --yx-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='22'%3E%3Crect x='3' y='5' width='8' height='11' rx='2' fill='%23f8f6f4' fill-opacity='.13'/%3E%3C/svg%3E");
  --yx-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 18 L12 6 L24 18 L36 6 L48 18' fill='none' stroke='%23171318' stroke-opacity='.07' stroke-width='3'/%3E%3C/svg%3E");
  --yx-qmarks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg font-family='Arial' font-weight='900' fill='%23ff8b80' fill-opacity='.07'%3E%3Ctext x='8' y='34' font-size='30'%3E?%3C/text%3E%3Ctext x='52' y='80' font-size='38' transform='rotate(14 60 66)'%3E?%3C/text%3E%3C/g%3E%3C/svg%3E");
  --yx-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23ff8bd1' fill-opacity='.055'%3E%3Cpath d='M20 14v22.5a5 5 0 1 0 2.4 4.3V22l14-3v13.5a5 5 0 1 0 2.4 4.3V11z'/%3E%3Cpath d='M66 56v18a4.2 4.2 0 1 0 2 3.6V60l10-2v-4z' transform='rotate(-10 70 70)'/%3E%3C/g%3E%3C/svg%3E");
  --yx-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 2 L20 11 L11 20 L2 11Z' fill='none' stroke='%23fff1b8' stroke-opacity='.07' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='1' fill='%23fff1b8' fill-opacity='.12'/%3E%3C/svg%3E");
  --yx-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cpath d='M0 130 L40 112 L70 120 L110 74 L150 88 L190 40 L240 52' fill='none' stroke='%23ffd166' stroke-opacity='.16' stroke-width='2'/%3E%3Cg fill='%23ffd166' fill-opacity='.3'%3E%3Ccircle cx='110' cy='74' r='2.5'/%3E%3Ccircle cx='190' cy='40' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --yx-hearts-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23ffcdbd' fill-opacity='.14'%3E%3Cpath d='M16 27s-10-6.2-10-13a5.5 5.5 0 0 1 10-3.2A5.5 5.5 0 0 1 26 14c0 6.8-10 13-10 13z' transform='translate(2 2) scale(.7)'/%3E%3Cpath d='M16 27s-10-6.2-10-13a5.5 5.5 0 0 1 10-3.2A5.5 5.5 0 0 1 26 14c0 6.8-10 13-10 13z' transform='translate(38 36) scale(.9) rotate(-12 16 16)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Motif des paquets (dos du carrousel, mêmes matières que les cartes). */
.sec-players { --pat: var(--yx-diamond) 0 0 / 18px 18px; }
.sec-aura { --pat: repeating-radial-gradient(circle at 50% 40%, transparent 0 11px, color-mix(in srgb, var(--gain) 13%, transparent) 11px 12px); }
.sec-lore { --pat: var(--yx-constellation) 0 0 / 96px 96px; }
.sec-season { --pat: var(--yx-film) 0 0 / 12px 19px repeat-y, var(--yx-film) 100% 0 / 12px 19px repeat-y; }
.sec-roast { --pat: radial-gradient(circle, color-mix(in srgb, var(--coral-soft) 20%, transparent) 1px, transparent 1.5px) 0 0 / 9px 9px; }
.sec-awards { --pat: var(--yx-gold-dust) 0 0 / 120px 120px; }
.sec-predictions { --pat: var(--yx-stars) 0 0 / 140px 140px; }
.sec-care { --pat: var(--yx-hearts-light) 0 0 / 54px 54px; }
.sec-letter { --pat: repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, var(--paper) 10%, transparent) 13px 14px); }
.sec-quiz { --pat: var(--yx-qmarks) 0 0 / 70px 70px; }
.sec-media { --pat: var(--yx-wave) 0 0 / 90px 30px; }
.sec-records { --pat: linear-gradient(color-mix(in srgb, var(--up) 10%, transparent) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, color-mix(in srgb, var(--up) 10%, transparent) 1px, transparent 1px) 0 0 / 14px 14px; }
.sec-anthems { --pat: repeating-radial-gradient(circle at 50% 42%, transparent 0 3px, rgb(255 255 255 / .05) 3px 4px); }

/* Story : le cadre prend la couleur de la section en cours. */
.bx-story-frame[class*="sec-"] { background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--s1) 20%, var(--ink)), var(--ink) 72%) var(--ink); }

/* Joueur : intérieur texturé selon la rareté (le cadre reste la feuille --foil). */
.card-player.r-common .card-in {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 3px),
    radial-gradient(120% 55% at 85% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0, transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--silver-3) 28%, var(--ink-2)), var(--ink-2) 55%);
}
.card-player.r-gold .card-in {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-diamond) 0 0 / 22px 22px,
    radial-gradient(110% 50% at 85% 0%, color-mix(in srgb, var(--gold-2) 28%, transparent) 0, transparent 70%),
    radial-gradient(90% 40% at 0% 100%, color-mix(in srgb, var(--gold-3) 34%, transparent) 0, transparent 70%),
    var(--ink-2);
}
.card-player.r-legendary .card-in {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-stars) 0 0 / 180px 180px,
    radial-gradient(80% 40% at 90% 0%, color-mix(in srgb, var(--holo-2) 32%, transparent) 0, transparent 70%),
    radial-gradient(70% 36% at 0% 34%, color-mix(in srgb, var(--holo-1) 16%, transparent) 0, transparent 70%),
    radial-gradient(90% 40% at 100% 100%, color-mix(in srgb, var(--holo-3) 18%, transparent) 0, transparent 70%),
    var(--ink-2);
}

/* Aura : ondes autour du chiffre. */
.card-aura {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    repeating-radial-gradient(circle at 50% 34%, transparent 0 26px, color-mix(in srgb, var(--tone) 8%, transparent) 26px 27.5px),
    radial-gradient(70% 42% at 50% 34%, color-mix(in srgb, var(--tone) 40%, transparent) 0, transparent 72%),
    radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--holo-1) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ink-2), color-mix(in srgb, var(--tone) 9%, var(--ink)));
}

/* Lore : constellation sur nuit violette. */
.card-lore {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-constellation) 0 0 / 128px 128px,
    radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--lore) 24%, transparent), transparent 70%),
    radial-gradient(70% 40% at 0% 85%, color-mix(in srgb, var(--coral) 11%, transparent), transparent 70%),
    linear-gradient(170deg, var(--lore-ink) 0, var(--ink-2) 72%);
}

/* Saison : pellicule, lignes de balayage, projecteur. */
.card-trailer {
  background:
    var(--yx-film) 0 0 / 14px 22px repeat-y, var(--yx-film) 100% 0 / 14px 22px repeat-y,
    repeating-linear-gradient(0deg, rgb(0 0 0 / .16) 0 1px, transparent 1px 3px),
    radial-gradient(60% 35% at 50% 0%, color-mix(in srgb, var(--gold-1) 15%, transparent), transparent 75%),
    linear-gradient(180deg, var(--ink-2) 35%, color-mix(in srgb, var(--coral) 42%, var(--ink-2)) 100%);
}
.card-episode {
  background:
    var(--yx-film) 0 0 / 14px 22px repeat-y, var(--yx-film) 100% 0 / 14px 22px repeat-y,
    repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 3px),
    radial-gradient(70% 30% at 50% 50%, color-mix(in srgb, var(--coral) 13%, transparent), transparent 75%),
    linear-gradient(180deg, var(--ink) 0 15%, var(--ink-2) 15% 85%, var(--ink) 85%);
}

/* Roast : trame, zigzags, braise. */
.card-roast {
  background:
    var(--yx-zigzag) 0 0 / 48px 24px,
    radial-gradient(circle, rgb(23 19 24 / .1) 1.1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(90% 50% at 15% 0%, color-mix(in srgb, var(--gold-2) 36%, transparent), transparent 70%),
    radial-gradient(90% 55% at 100% 100%, color-mix(in srgb, var(--coral-deep) 28%, transparent), transparent 72%),
    var(--coral);
}

/* Award : rayons, poussière d'or, vignette. */
.card-award {
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 55%, rgb(0 0 0 / .32)),
    var(--yx-gold-dust) 0 0 / 150px 150px,
    repeating-conic-gradient(from 0deg at 50% 24%, color-mix(in srgb, var(--gold-2) 12%, transparent) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--gold-2) 30%, var(--ink-2)), var(--ink-2) 62%);
}

/* Prédiction : ciel étoilé, nébuleuse. */
.card-pred {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-stars) 0 0 / 180px 180px,
    radial-gradient(90% 50% at 50% 28%, color-mix(in srgb, var(--lore) 28%, transparent), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--down) 20%, transparent), transparent 70%),
    radial-gradient(60% 40% at 100% 70%, color-mix(in srgb, var(--holo-3) 12%, transparent), transparent 70%),
    var(--ink-2);
}

/* Vous étiez là : maillage chaud, cœurs à peine visibles. */
.card-care {
  background:
    var(--yx-hearts) 0 0 / 72px 72px,
    radial-gradient(80% 45% at 100% 0%, color-mix(in srgb, var(--gold-1) 50%, transparent), transparent 70%),
    radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--coral) 26%, transparent), transparent 70%),
    linear-gradient(165deg, var(--tender) 0, color-mix(in srgb, var(--tender) 72%, var(--coral)) 100%);
}

/* Lettre : papier fibreux, réglure, bords dorés. */
.card-letter {
  background:
    var(--yx-grain-dark) 0 0 / 160px 160px,
    radial-gradient(130% 90% at 50% 40%, transparent 62%, color-mix(in srgb, var(--gold-3) 20%, transparent) 100%),
    repeating-linear-gradient(180deg, transparent 0 25px, rgb(43 34 38 / .06) 25px 26px) 0 70px,
    var(--paper);
}

/* Classement : faisceaux, podium. */
.card-rank {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb, var(--up) 5%, transparent) 34px 68px),
    radial-gradient(80% 35% at 50% 0%, color-mix(in srgb, var(--up) 24%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--up) 12%, var(--ink-2)), var(--ink-2) 55%);
}

/* Quiz : papier quadrillé, points d'interrogation. */
.card-quiz {
  background:
    var(--yx-qmarks) 0 0 / 90px 90px,
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--coral) 24%, transparent), transparent 65%),
    var(--ink-2);
}

/* Médias : ondes sonores, trame photo. */
.card-voices {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-wave) 0 0 / 120px 40px,
    radial-gradient(80% 40% at 0% 0%, color-mix(in srgb, var(--holo-1) 20%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--holo-1) 14%, var(--ink-2)), var(--ink-2) 60%);
}
.card-meme {
  background:
    radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 8px 8px,
    radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 70%),
    var(--ink);
}

/* Carton d'intro : rayons et halo de la section. */
.card-intro {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--pat, linear-gradient(transparent, transparent)),
    repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in srgb, var(--s1, var(--coral)) 7%, transparent) 0 5deg, transparent 5deg 12deg),
    radial-gradient(110% 60% at 50% 30%, color-mix(in srgb, var(--s1, var(--coral)) 34%, var(--ink-2)), var(--ink) 75%);
}

/* Record du groupe (Légendaire) : plan millimétré, courbe. Typographie : drop.css. */
.card-record {
  --rec: var(--up);
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-chart) 100% 100% / 240px 160px no-repeat,
    linear-gradient(color-mix(in srgb, var(--rec) 8%, transparent) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, color-mix(in srgb, var(--rec) 8%, transparent) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(color-mix(in srgb, var(--rec) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--rec) 4%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(100% 50% at 50% 20%, color-mix(in srgb, var(--rec) 24%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--rec) 8%, var(--ink-2)), var(--ink) 85%);
}
.card-record .rec-icon { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--rec) 45%, transparent)); }
.card-record .rec-value { text-shadow: 0 0 34px color-mix(in srgb, var(--rec) 40%, transparent); }
/* Rendu de secours de binder.js (unité, détenteur) : mêmes codes que drop.css. */
.rec-unit { margin-top: -6px; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rec-holder { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--rec, var(--up)) 15%, transparent); color: var(--rec, var(--up)); font-size: 14px; font-weight: 800; }

/* Bande-son (Légendaire) : nuit violette, sillons, notes. Typographie : drop.css. */
.card-anthem {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-notes) 0 0 / 96px 96px,
    repeating-radial-gradient(circle at 50% 30%, transparent 0 9px, rgb(255 255 255 / .022) 9px 10px),
    radial-gradient(80% 40% at 50% 30%, color-mix(in srgb, var(--holo-2) 34%, transparent), transparent 72%),
    radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--holo-3) 20%, transparent), transparent 72%),
    linear-gradient(170deg, color-mix(in srgb, var(--holo-2) 14%, var(--ink-2)), var(--ink) 85%);
}
.mini.card-record .mini-big, .mini.card-anthem .mini-big { font-family: var(--font-body); }

/* ───────────── Holo doré Légendaire (YAP-041) ─────────────
   Cartes joueur du palier Légendaire : feuille d'or au lieu de la rareté, cadre qui tourne
   (transform seulement), reflet qui balaie, paillettes qui scintillent (opacité). Avec le
   mouvement réduit : le même or, immobile. */
.card.bx-gold, .mini.bx-gold, .bx-deck.is-gold, .bx-epic-deck.is-gold {
  --foil: linear-gradient(135deg, #fff6cf, var(--gold-2) 22%, var(--gold-3) 45%, var(--holo-4) 62%, #b8860b 80%, #fff6cf);
  --accent: var(--gold-1);
  --num: linear-gradient(170deg, #fffbe8, var(--holo-4) 40%, var(--gold-2) 75%, var(--gold-1));
}
.card.bx-gold { box-shadow: 0 24px 50px -24px var(--shade), 0 0 36px -8px color-mix(in srgb, var(--gold-2) 60%, transparent); }
.card.card-player.bx-gold .card-in {
  background:
    var(--yx-grain) 0 0 / 160px 160px,
    var(--yx-sparkle) 0 0 / 120px 120px,
    var(--yx-diamond) 0 0 / 22px 22px,
    radial-gradient(90% 42% at 85% 0%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 70%),
    radial-gradient(80% 36% at 0% 100%, color-mix(in srgb, var(--gold-3) 20%, transparent), transparent 72%),
    linear-gradient(180deg, var(--ink-2), color-mix(in srgb, var(--ink) 70%, var(--ink-2)));
}
.card.bx-gold::before {
  opacity: .28;
  background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, #fff6cf 70%, transparent) 42%, color-mix(in srgb, var(--gold-2) 60%, transparent) 50%, color-mix(in srgb, var(--holo-4) 50%, transparent) 58%, transparent 75%);
  background-size: 260% 260%; background-position: var(--hx, 50%) var(--hy, 50%);
}
/* Le reflet holographique de drop.css (color-dodge) salirait l'or : plus discret ici. */
.card.is-holo.bx-gold::before { opacity: .14; }
.bx-gold-foil, .bx-gold-sweep { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* Cadre seul : 1,5 % de la largeur, comme le liseré de la carte joueur (6 px sur 400). */
.bx-gold-foil {
  padding: 1.5%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bx-gold-foil::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, #fff6cf, var(--gold-2), var(--gold-3), var(--holo-4), #fffbe8, #b8860b, var(--gold-2), #fff6cf);
}
.bx-gold-sweep { mix-blend-mode: screen; }
.bx-gold-sweep::before {
  content: ""; position: absolute; inset: -10% -60%; transform: translateX(-70%) rotate(8deg);
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, #fff6cf 34%, transparent) 47%, color-mix(in srgb, var(--holo-4) 26%, transparent) 52%, transparent 60%);
}
.bx-gold-sweep::after { content: ""; position: absolute; inset: 0; opacity: .45; background: var(--yx-sparkle) 0 0 / 120px 120px; }
.mini.card-player.bx-gold { box-shadow: 0 14px 28px -12px var(--shade), 0 0 18px -4px color-mix(in srgb, var(--gold-2) 70%, transparent); }
:is(.bx-deck, .bx-epic-deck).is-gold .bx-top { background: var(--foil); }
:is(.bx-deck, .bx-epic-deck).is-gold .bx-top::before { background: var(--yx-sparkle) 0 0 / 120px 120px, var(--yx-diamond) 0 0 / 18px 18px, radial-gradient(120% 70% at 50% 16%, color-mix(in srgb, var(--gold-2) 38%, var(--ink-2)), var(--ink-2) 80%); }
:is(.bx-deck, .bx-epic-deck).is-gold .bx-top-kicker { color: var(--gold-1); }
:is(.bx-deck, .bx-epic-deck).is-gold .bx-shine { background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, #fff6cf 55%, transparent) 47%, color-mix(in srgb, var(--gold-2) 45%, transparent) 52%, transparent 60%); }
/* Page partagée : la carte dessinée sur canevas, au même or. */
.sv-stage.is-gold .sv-card { box-shadow: 0 24px 50px -24px var(--shade), 0 0 40px -6px color-mix(in srgb, var(--gold-2) 60%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .bx-gold-foil::before { animation: bx-gold-turn 6s linear infinite; }
  .bx-gold-sweep::before { animation: bx-gold-sweep 4.8s cubic-bezier(.45, 0, .2, 1) infinite; }
  .bx-gold-sweep::after { animation: bx-twinkle 2.4s ease-in-out infinite alternate; }
}
@keyframes bx-gold-turn { to { transform: rotate(1turn); } }
@keyframes bx-gold-sweep { 0%, 35% { transform: translateX(-70%) rotate(8deg); } 75%, 100% { transform: translateX(70%) rotate(8deg); } }
@keyframes bx-twinkle { from { opacity: .2; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .bx-gold-sweep::before { display: none; }
}

/* ───── YAP-042 : grand écran (≥ 1024 px). Classeur en deux colonnes : stories sur toute la
   largeur, grand carrousel à gauche, collection, lien et actions en panneau à droite.
   Story : la carte au centre à hauteur confortable, navigation sur ses flancs. ───── */
@media (min-width: 1024px) {
  .app:has(> #screen-binder:not([hidden])) { max-width: none; }
  #screen-binder {
    --page-w: 1480px;
    display: grid; align-content: start;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 430px);
    /* Carrousel puis collection à gauche ; lien du classeur puis actions à droite. */
    grid-template-areas:
      "eye eye" "title title" "lead lead" "stories stories"
      "decks group" "meter actions" "note note";
    column-gap: clamp(28px, 3.4vw, 64px); row-gap: 18px; padding-bottom: 28px;
  }
  #screen-binder > :not(.bx), .bx-stories, .bx-decks > .bx-label, .bx-meter, .bx-callout { width: auto; max-width: none; margin-inline: 0; }
  #screen-binder > .eyebrow { grid-area: eye; }
  #screen-binder > .title-xl { grid-area: title; }
  #screen-binder > .lead { grid-area: lead; max-width: 70ch; }
  #screen-binder > .bx { display: contents; }
  #screen-binder .bx-stories { grid-area: stories; margin-top: 8px; }
  #screen-binder .bx-decks { grid-area: decks; align-self: start; gap: 12px; }
  #screen-binder .bx-meter { grid-area: meter; align-self: start; }
  #screen-binder > #group-box { grid-area: group; align-self: start; }
  #screen-binder > .recap-actions { grid-area: actions; align-self: start; }
  #screen-binder > .foot-note { grid-area: note; text-align: left; }
  /* Sans lien de classeur (démo, classeur partagé) : les actions montent à côté du carrousel. */
  #screen-binder:not(:has(> #group-box:not([hidden]))) {
    grid-template-areas:
      "eye eye" "title title" "lead lead" "stories stories"
      "decks actions" "meter actions" "note note";
  }

  /* Stories : anneaux plus grands, alignés à gauche, défilement si besoin. */
  .bx-rings { --ring: clamp(66px, 5vw, 84px); justify-content: flex-start; gap: clamp(10px, 1.2vw, 20px); }
  .bx-ring { width: calc(var(--ring) + 10px); gap: 7px; }
  .bx-ring-ring { width: var(--ring); height: var(--ring); }
  .bx-ring-emoji { font-size: calc(var(--ring) * .42); }
  .bx-ring-name { max-width: calc(var(--ring) + 10px); font-size: 12.5px; }
  .bx-ring-lock { top: calc(var(--ring) - 19px); }
  .bx-play { min-height: 48px; font-size: 15.5px; }

  /* Carrousel : paquets plus grands ; scène sur fond doux qui délimite la colonne. */
  .bx-stage {
    padding: 22px 0 8px; border-radius: 28px;
    background: radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--holo-2) 9%, transparent), transparent 75%);
  }
  /* Marge basse pour le cadenas du paquet scellé (il dépasse sous le paquet). */
  .bx-viewport { --deck-w: clamp(196px, 15vw, 268px); height: calc(var(--deck-w) * 1.4 + 92px); }
  .bx-caption-name { font-size: 34px; }
  .bx-caption-count { font-size: 14px; }
  .bx-hint { font-size: 13px; }
  .bx-fan-card { --fan-w: clamp(116px, 8.6vw, 148px); }
  .bx-fan-title { font-size: 32px; }
  .bx.is-calm .bx-track { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }

  /* Panneau : collection, lien du classeur, actions. */
  .bx-meter { padding: 18px 20px; gap: 12px; border-radius: 22px; }
  .bx-meter-head { justify-content: flex-start; gap: 4px 18px; }
  .bx-meter-big { font-size: 44px; }
  .bx-badges { gap: 8px; }
  #screen-binder > .side-box { padding: 18px; border-radius: 22px; }

  /* Story : cadre large. La carte occupe la hauteur au centre, les flèches la bordent ; la
     section en grand à gauche (contexte), commandes en haut à droite, partage en bas. */
  .bx-story { gap: 16px; }
  .bx-story-frame {
    container-type: size;
    display: grid; gap: 12px 24px;
    width: min(1440px, calc(100vw - 2 * (52px + 16px + 20px))); height: calc(100dvh - 40px);
    padding: 22px 26px 24px; border-radius: 32px;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "ava . bars . ctrl" "who prev stage next ." "hint prev stage next share";
    box-shadow: 0 40px 90px -30px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
  }
  .bx-bars { grid-area: bars; align-self: end; padding-top: 0; }
  .bx-story-head, .bx-story-foot { display: contents; }
  .bx-story-avatar { grid-area: ava; width: 72px; height: 72px; font-size: 36px; box-shadow: 0 0 0 3px var(--coral), 0 18px 40px -18px var(--shade); }
  .bx-story-who { grid-area: who; align-self: start; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }
  .bx-story-title { font-family: var(--font-display); font-size: clamp(40px, 3.6vw, 64px); font-weight: 900; line-height: .9; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; }
  .bx-story-pos { font-size: 15px; }
  .bx-story-head > .bx-sbtn { grid-area: ctrl; justify-self: end; align-self: start; width: 46px; height: 46px; }
  .bx-story-head > [data-act="sound"] { margin-right: 56px; }
  .bx-story-head > [data-act="pause"] { margin-right: 112px; }
  /* Hauteur confortable : la carte (dessinée pour un téléphone) plafonne à 820 px. */
  .bx-story-stage { grid-area: stage; width: min(calc(min(100cqh - 110px, 820px) * .5625), 56cqw); max-height: 820px; justify-self: center; align-self: center; height: 100%; }
  .bx-story-foot > [data-act="prev"] { grid-area: prev; align-self: center; }
  .bx-story-foot > [data-act="next"] { grid-area: next; align-self: center; }
  .bx-story-foot > .bx-story-hint { grid-area: hint; align-self: end; justify-self: start; max-width: 32ch; font-size: 13px; text-align: left; }
  .bx-story-foot > .bx-sshare { grid-area: share; align-self: end; justify-self: end; min-height: 52px; padding: 0 22px 0 18px; font-size: 15.5px; }
  .bx-snav { width: 58px; height: 58px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); }
  .bx-snav svg { width: 24px; height: 24px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* En-tête et pied en display: contents : le maintien masque leurs éléments un à un. */
  .bx-story-head > *, .bx-story-foot > * { transition: opacity .2s; }
  .bx-story.is-held .bx-story-head > *, .bx-story.is-held .bx-story-foot > * { opacity: 0; }
}

/* ───── YAP-047 : ouverture épique (appui long), « Mélanger », démo à une carte par section.
   Tout ce qui bouge passe par transform et opacité ; les dégradés et ombres sont fixes.
   Mouvement réduit : aucune de ces animations ne tourne (binder.js fait un fondu court). ───── */

/* Anneau de charge, centré sur l'emblème du paquet : deux demi-anneaux en « D » tournent dans leur moitié. */
.bx-top > .bx-charge {
  position: absolute; left: 50%; top: 46%; z-index: 3; width: calc(var(--deck-w) * .64); aspect-ratio: 1;
  margin: calc(var(--deck-w) * -.32) 0 0 calc(var(--deck-w) * -.32); pointer-events: none;
  --ring: color-mix(in srgb, var(--s1) 55%, #fff);
}
.bx-charge-glow {
  position: absolute; inset: -16%; border-radius: 50%; opacity: .2;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s1) 60%, #fff) 0%, color-mix(in srgb, var(--s1) 45%, transparent) 45%, transparent 100%);
}
.bx-charge-track { position: absolute; inset: 0; border: 5px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 50%; }
.bx-charge-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
.bx-charge-half.is-r { left: 50%; }
.bx-charge-half.is-l { left: 0; }
.bx-charge-half i {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box;
  border: 5px solid var(--ring); box-shadow: 0 0 9px -1px var(--ring);
}
.bx-charge-half.is-r i { border-left: 0; border-radius: 0 999px 999px 0; transform-origin: 0 50%; transform: rotate(-180deg); }
.bx-charge-half.is-l i { border-right: 0; border-radius: 999px 0 0 999px; transform-origin: 100% 50%; transform: rotate(-180deg); }
:is(.bx-deck, .bx-epic-deck).is-gold .bx-charge { --ring: #fff3c4; }
.bx-deck.is-charging .bx-shine { opacity: 1; }
/* Écrits à chaque image pendant la charge et la montée : leur propre calque, rien à repeindre. */
.bx-deck.is-charging .bx-stack, .bx-charge-half i, .bx-charge-glow, .bx-epic-shake, .bx-epic-flare, .bx-epic-seam { will-change: transform, opacity; }
.bx-deck.is-epic-src { opacity: 0 !important; }

/* Démo : compteur sous scellé sur le paquet, note au-dessus du carrousel. */
.bx-more {
  position: absolute; left: 50%; bottom: -15px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  translate: -50% 0; border-radius: 999px; background: var(--text); color: var(--ink); white-space: nowrap;
  font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -8px var(--shade);
}
.bx-more-seal { color: var(--gold-3); font-size: 12px; }
.bx-deck.is-sample.is-sealed .bx-top, .bx-deck.is-sample.is-sealed .bx-back { filter: saturate(.55) brightness(.82); }
.bx-sample-note {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  border: 1.5px dashed color-mix(in srgb, var(--gold-2) 55%, var(--line)); border-radius: 14px;
  background: color-mix(in srgb, var(--gold-2) 8%, var(--surface)); font-size: 13px; font-weight: 700; line-height: 1.35;
}
.bx-sample-note::before { content: "✦"; flex: none; color: var(--gold-2); }
.bx-callout-lock.is-seal { background: var(--gold-2); color: var(--ink); font-size: 16px; font-weight: 900; }
.bx-fan-sealed.is-sample {
  border: 1.5px dashed color-mix(in srgb, var(--gold-2) 65%, var(--line)); color: var(--text);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold-2) 12%, var(--surface)) 0 8px, var(--ink-2) 8px 16px);
}
.bx-fan-sealed.is-sample .mini-big { color: var(--gold-1); }
.mini.mini-sealed { border-color: color-mix(in srgb, var(--gold-2) 60%, var(--line)); }
.mini.mini-sealed .mini-big { color: var(--gold-1); }

/* Éventail : outils (Mélanger, ranger). Pendant l'ouverture épique, l'en-tête attend la pose. */
.bx-fan-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.bx-fan-shuffle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 800;
}
.bx-fan-shuffle svg { width: 17px; height: 17px; }
.bx-fan.is-epic .bx-fan-head { opacity: 0; pointer-events: none; }
.bx-fan-cover {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border-radius: inherit;
  background: var(--holo); pointer-events: none;
}
.bx-fan-cover::after {
  content: ""; position: absolute; inset: 4px; border-radius: 9px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ink-2) 50%, transparent), var(--ink-2) 78%);
}
.bx-fan-cover-y { position: relative; z-index: 1; color: color-mix(in srgb, var(--text) 32%, transparent); font-family: var(--font-display); font-size: calc(var(--fan-w) * .4); font-weight: 900; }
.bx-fx-halo, .bx-fx-glint { position: absolute; z-index: 5; pointer-events: none; opacity: 0; }
.bx-fx-halo {
  inset: -30%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, #fff 75%, transparent), color-mix(in srgb, var(--holo-2) 55%, transparent) 45%, color-mix(in srgb, var(--holo-1) 30%, transparent) 70%, transparent);
}
.bx-fx-glint { inset: -10% 10%; opacity: 1; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff6cf 85%, transparent) 50%, transparent 70%); }

/* Scène de l'ouverture : sous l'éventail (même pile que lui), au-dessus du reste de la page. */
.bx-epic {
  position: fixed; inset: 0; z-index: 140; overflow: hidden; pointer-events: auto; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.bx-epic > * { position: absolute; pointer-events: none; }
.bx-epic-dim {
  inset: 0; opacity: 0;
  background: radial-gradient(90% 70% at var(--cx) var(--cy), color-mix(in srgb, var(--s1) 22%, var(--ink)) 0%, color-mix(in srgb, var(--ink) 94%, transparent) 55%, var(--ink) 100%);
}
.bx-epic-rays {
  --size: max(560px, 120vmin);
  left: var(--cx); top: var(--cy); width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 4deg, color-mix(in srgb, var(--s1) 50%, #fff) 0deg 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 42%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 42%, transparent 100%);
}
.bx-epic.rar-gold .bx-epic-rays { background: repeating-conic-gradient(from 4deg, #fff3c4 0deg 4deg, transparent 4deg 13deg, var(--gold-2) 13deg 16deg, transparent 16deg 26deg); }
.bx-epic.rar-legendary .bx-epic-rays { background: repeating-conic-gradient(from 4deg, var(--holo-1) 0deg 4deg, transparent 4deg 12deg, var(--holo-3) 12deg 16deg, transparent 16deg 24deg, var(--holo-4) 24deg 28deg, transparent 28deg 36deg); }
.bx-epic-glow {
  --size: min(110vmin, 780px);
  left: var(--cx); top: var(--cy); width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, #fff 80%, var(--s1)) 0%, color-mix(in srgb, var(--s1) 70%, transparent) 28%, color-mix(in srgb, var(--s1) 22%, transparent) 60%, transparent 100%);
}
.bx-epic.rar-gold .bx-epic-glow { background: radial-gradient(closest-side, #fffbe8 0%, color-mix(in srgb, var(--gold-2) 75%, transparent) 28%, color-mix(in srgb, var(--gold-3) 25%, transparent) 60%, transparent 100%); }
.bx-epic.rar-legendary .bx-epic-glow { background: radial-gradient(closest-side, #fff 0%, color-mix(in srgb, var(--holo-2) 70%, transparent) 28%, color-mix(in srgb, var(--holo-1) 25%, transparent) 60%, transparent 100%); }
.bx-epic-hero { transform-origin: 50% 50%; }
.bx-epic-shake, .bx-epic-deck { position: absolute; inset: 0; }
.bx-epic-deck { color: var(--text); }
.bx-epic-deck .bx-shine { opacity: .8; }
.bx-epic-deck .bx-back.b1 { transform: translate(9px, 6px) rotate(5deg); }
.bx-epic-deck .bx-back.b2 { transform: translate(-9px, 10px) rotate(-6deg); }
.bx-epic-foil { position: absolute; inset: -6px -5px -9px; z-index: 3; }
.bx-epic-half {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background:
    linear-gradient(118deg, transparent 18%, color-mix(in srgb, #fff 55%, transparent) 27%, transparent 36%, transparent 56%, color-mix(in srgb, #fff 32%, transparent) 63%, transparent 72%) 0 0 / 196% 100%,
    repeating-linear-gradient(64deg, transparent 0 11px, color-mix(in srgb, #fff 10%, transparent) 11px 12px),
    linear-gradient(180deg, color-mix(in srgb, var(--silver-1) 26%, transparent), color-mix(in srgb, var(--silver-1) 12%, transparent) 40%, color-mix(in srgb, var(--silver-1) 20%, transparent));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, #fff 40%, transparent) inset, 0 0 26px color-mix(in srgb, #fff 16%, transparent) inset;
}
.bx-epic-half.is-l { left: 0; border-radius: 21px 0 0 21px; clip-path: polygon(0 0, 100% 0, 94% 9%, 100% 19%, 93% 31%, 100% 43%, 94% 55%, 100% 67%, 93% 79%, 100% 90%, 96% 100%, 0 100%); }
.bx-epic-half.is-r { right: 0; border-radius: 0 21px 21px 0; background-position: 100% 0, 0 0, 0 0; clip-path: polygon(6% 0, 100% 0, 100% 100%, 4% 100%, 0 90%, 7% 79%, 0 67%, 6% 55%, 0 43%, 7% 31%, 0 19%, 6% 9%); }
.bx-epic-crimp {
  left: 8px; right: 8px; top: -3px; height: 15px; border-radius: 6px 6px 3px 3px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, #fff 58%, transparent) 0 2px, color-mix(in srgb, #fff 16%, transparent) 2px 5px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.bx-epic-foil > * { position: absolute; }
.bx-epic-seam {
  left: 50%; top: 3%; bottom: 3%; width: 4px; margin-left: -2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(#fff, color-mix(in srgb, var(--s1) 50%, #fff) 50%, #fff);
  box-shadow: 0 0 14px 5px color-mix(in srgb, var(--s1) 70%, #fff);
}
.bx-epic-flare {
  position: absolute; inset: 0; z-index: 4; border-radius: 16px; opacity: 0;
  background: radial-gradient(75% 55% at 50% 42%, rgba(255, 255, 255, .92), color-mix(in srgb, var(--s1) 50%, transparent) 58%, transparent 85%);
}
.bx-epic-wave {
  left: var(--cx); top: var(--cy); width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; opacity: 0;
  border: 5px solid color-mix(in srgb, #fff 80%, var(--s1));
  box-shadow: 0 0 34px color-mix(in srgb, var(--s1) 70%, transparent), inset 0 0 26px color-mix(in srgb, var(--s1) 55%, transparent);
}
.bx-epic-flash {
  inset: 0; opacity: 0;
  background: radial-gradient(circle at var(--cx) var(--cy), #fff 0, #fff 14%, color-mix(in srgb, var(--s1) 55%, transparent) 40%, transparent 78%);
}
.bx-epic.rar-gold .bx-epic-flash { background: radial-gradient(circle at var(--cx) var(--cy), #fff 0, #fffbe8 14%, color-mix(in srgb, var(--gold-2) 60%, transparent) 40%, transparent 78%); }
.bx-epic-sparks { inset: 0; }
.bx-spark {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c, #fff); box-shadow: 0 0 8px 1px var(--c, #fff);
}
.c-w { --c: #fff; }
.c-s { --c: var(--s1); }
.c-h1 { --c: var(--holo-1); }
.c-h2 { --c: var(--holo-2); }
.c-h3 { --c: var(--holo-3); }
.c-h4 { --c: var(--holo-4); }
.c-g1 { --c: #fff3c4; }
.c-g2 { --c: var(--gold-2); }
.c-g3 { --c: var(--gold-1); }
.bx-epic-skip {
  left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); opacity: 0; text-align: center;
  color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* Story de démo : la carte « sous scellé ». */
.card.card-sealed { background: radial-gradient(110% 60% at 50% 30%, color-mix(in srgb, var(--gold-2) 22%, var(--ink-2)), var(--ink) 78%); }
.card-sealed .card-in { align-items: center; text-align: center; }
.card-sealed .kicker { align-self: flex-start; color: var(--gold-1); }
.sealed-pile { position: relative; width: 44%; aspect-ratio: 5 / 7; margin-top: 8px; }
.sealed-back {
  position: absolute; inset: 0; border-radius: 14px; background: var(--holo);
  box-shadow: 0 16px 30px -16px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent) inset;
}
.sealed-back::after {
  content: ""; position: absolute; inset: 5px; border-radius: 10px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ink-2) 50%, transparent), var(--ink-2) 78%);
}
.sealed-back.b1 { transform: translate(-12px, 8px) rotate(-9deg); }
.sealed-back.b2 { transform: translate(12px, 6px) rotate(8deg); }
.sealed-y { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: color-mix(in srgb, var(--text) 30%, transparent); font-family: var(--font-display); font-size: 64px; font-weight: 900; }
.sealed-seal {
  position: absolute; left: 50%; bottom: -18px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; translate: -50% 0;
  border-radius: 50%; background: var(--gold-2); color: var(--ink); font-size: 20px; font-weight: 900; box-shadow: 0 8px 18px -6px var(--shade);
}
.sealed-title { margin-top: 22px; font-size: clamp(34px, 10vw, 48px); }
.sealed-more { color: var(--gold-1); font-size: 17px; font-weight: 800; }
.sealed-note { max-width: 30ch; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.sealed-cta { min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
  .bx-fan-head { transition: opacity .35s var(--ease); }
  .bx-more.is-shaking { animation: bx-shake .55s cubic-bezier(.36, .07, .19, .97); }
}