/* ═══ Ouverture : socle commun (plateau, consignes, aperçu) ═══════════ */
.ob-stage { touch-action: none; overscroll-behavior: contain; }
.ob-stage.revealing { overflow: hidden; }
.ob-hint-bottom { position: fixed; z-index: 6; left: 0; right: 0; bottom: calc(26px + var(--safe-b)); margin: 0; padding: 0 24px; text-align: center; pointer-events: none; line-height: 1.5; }
.ob-demo-tag { position: fixed; z-index: 6; top: max(16px, env(safe-area-inset-top)); left: 14px; max-width: 30vw; padding: 7px 12px; border-radius: 999px; background: #ffc53122; border: 1px solid #ffc53155; color: #ffe17a; font: 800 11px/1.25 var(--font); letter-spacing: .03em; }

.ob-board { position: fixed; inset: 0; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: max(14px, env(safe-area-inset-top)); }
.ob-board-head { padding: 10px 16px 8px; text-align: center; }
.ob-board-head h2 { margin: 0; color: #fff; font-size: clamp(20px, 5.4vw, 30px); }
.ob-board-grid { width: 100%; max-width: 1000px; margin: 0 auto; padding: 8px 16px 18px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ob-board-grid .flip { width: 100%; animation: none; }
.ob-board.single .ob-board-grid { grid-template-columns: min(62vw, 250px); justify-content: center; align-content: center; }
.ob-board-foot { display: grid; gap: 10px; justify-items: center; padding: 12px 16px calc(14px + var(--safe-b)); background: linear-gradient(to top, #04060df5 55%, transparent); }
.ob-board-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 620px; }
.ob-board-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.ob-board-actions .btn[hidden] { display: none; }
.ob-stage.focusing .ob-board { opacity: .1; filter: blur(4px); pointer-events: none; transition: opacity .3s, filter .3s; }
@media (min-width: 640px) { .ob-board-grid { gap: 14px; } .ob-board-actions .btn { flex: 0 1 auto; min-width: 150px; } }

/* ═══ 1. Capture ═════════════════════════════════════════════════════ */
.cap-scene { position: fixed; inset: 0; z-index: 4; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; padding: calc(max(16px, env(safe-area-inset-top)) + 52px) 16px calc(110px + var(--safe-b)); pointer-events: none; }
.cap-banner { color: #fff; font: 800 clamp(19px, 5.4vw, 26px)/1.2 var(--display); text-align: center; text-shadow: 0 2px 20px #9ecbff66; animation: ob-label-in .5s var(--spring); }
.cap-wild { position: relative; align-self: center; width: min(44vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.cap-wild i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fffffff0, #b9dcff88 40%, transparent 70%); filter: blur(3px); animation: cap-wild 2.4s ease-in-out infinite; }
.cap-wild i + i { inset: 14%; background: none; border: 2px solid #ffffff88; filter: none; animation: cap-ring 1.8s ease-out infinite; }
.cap-wild b { position: relative; font: 800 clamp(48px, 15vw, 72px)/1 var(--display); color: #1b2140; }
.cap-wild.absorbed { animation: cap-absorb .6s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes cap-wild { 50% { transform: scale(1.08); opacity: .85; } }
@keyframes cap-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes cap-absorb { 35% { filter: brightness(2.5); transform: scale(1.1); } to { transform: scale(0) translateY(60px); opacity: 0; } }
.cap-wrap { position: relative; align-self: end; width: min(38vw, 160px); aspect-ratio: 1; }
.cap-ball { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 92%; }
.cap-ball .ball-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px #000b); }
.cap-shadow { position: absolute; left: 14%; right: 14%; bottom: -9%; height: 13%; border-radius: 50%; background: radial-gradient(#000a, transparent 70%); }
.cap-wrap.wobble .cap-ball { animation: cap-wobble .9s cubic-bezier(.4, 0, .3, 1); }
@keyframes cap-wobble { 14% { rotate: -24deg; } 38% { rotate: 17deg; } 60% { rotate: -8deg; } 80% { rotate: 3deg; } }
.cap-wrap.wobble .ball-svg circle[r="8.3"] { animation: cap-blink .9s steps(1); }
@keyframes cap-blink { 0%, 30% { fill: #ff6b6b; } 15%, 45%, 100% { fill: #f7f8fc; } }
.cap-wrap.glow .ball-svg { filter: drop-shadow(0 18px 24px #000b) drop-shadow(0 0 26px #fff3c4) drop-shadow(0 0 8px #fff); }
.cap-stars { position: absolute; left: 50%; top: 20%; width: 0; height: 0; pointer-events: none; }
.cap-stars i { position: absolute; font-style: normal; font-size: 28px; line-height: 1; color: #ffe17a; text-shadow: 0 0 14px #ffe17a; opacity: 0; translate: -50% -50%; }
.cap-stars.go i { animation: cap-star 1s cubic-bezier(.2, .8, .3, 1) forwards; }
.cap-stars i:nth-child(1) { --tx: -74px; --ty: -48px; }
.cap-stars i:nth-child(2) { --tx: 0px; --ty: -92px; animation-delay: .06s; }
.cap-stars i:nth-child(3) { --tx: 74px; --ty: -48px; animation-delay: .12s; }
@keyframes cap-star { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.25) rotate(150deg); } }
.cap-wrap.open .ball-top { animation: cap-lid .5s cubic-bezier(.2, .9, .3, 1.25) forwards; transform-box: view-box; transform-origin: 12px 50px; }
@keyframes cap-lid { to { transform: rotate(-62deg); } }
.cap-beam { position: absolute; left: 50%; bottom: 50%; width: 70%; height: 62vh; translate: -50% 0; transform-origin: bottom; pointer-events: none; background: linear-gradient(to top, #ffffffd9, #ffffff00); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); filter: blur(6px); animation: ob-beam .5s ease-out both, ob-beam-glow 2s ease-in-out .5s infinite; }
.cap-wrap.docked { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); width: 58px; translate: -50% 0; align-self: auto; }
.cap-wrap.docked .cap-shadow, .cap-wrap.docked .cap-beam, .cap-wrap.docked .cap-stars { display: none; }
.cap-ball.emit .ball-svg { animation: ob-emit .26s var(--spring); }
.cap-board { padding-top: calc(max(14px, env(safe-area-inset-top)) + 52px); }

/* ═══ 2. Booster ═════════════════════════════════════════════════════ */
.bo-scene { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding-bottom: 56px; perspective: 1100px; }
.bo-pack { --rx: 0deg; --ry: 0deg; --tear: 0; position: relative; width: min(62vw, 250px); aspect-ratio: 5 / 8; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; touch-action: none; cursor: grab; animation: bo-in .6s cubic-bezier(.2, .9, .3, 1.2) both, bo-float 3.2s ease-in-out .6s infinite; }
@keyframes bo-in { from { transform: translateY(60vh) rotate(-12deg) scale(.7); opacity: 0; } }
@keyframes bo-float { 50% { translate: 0 -8px; } }
.bo-face { position: absolute; inset: 9% 0 7%; display: grid; place-items: center; align-content: center; gap: 12px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 38%, #ffffff30, transparent 55%), linear-gradient(160deg, #ff5a4e, #a91f2d 45%, #3d1a6b); box-shadow: 0 30px 60px -18px #000d, inset 0 0 0 1px #ffffff33; }
.bo-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 22%, #ffffff66 30%, #9ecbff55 37%, #ff9de255 44%, transparent 54%); background-size: 260% 100%; animation: bo-holo 3.6s linear infinite; }
@keyframes bo-holo { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.bo-logo { position: relative; display: grid; justify-items: center; gap: 8px; }
.bo-logo .ball-svg { filter: drop-shadow(0 8px 14px #0008); }
.bo-logo b { font: 800 clamp(26px, 8vw, 34px)/1 var(--display); letter-spacing: -.02em; }
.bo-logo b i { font-style: normal; color: #ffe17a; }
.bo-face small { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.bo-strip, .bo-bottom { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(90deg, #e3e6f0 0 5px, #bcc1d1 5px 10px); box-shadow: 0 6px 16px -8px #000a; }
.bo-strip { top: 0; height: 10%; border-radius: 10px 10px 0 0; }
.bo-bottom { bottom: 0; height: 8%; border-radius: 0 0 10px 10px; }
.bo-cut { position: absolute; left: 3%; right: 3%; top: calc(10% - 2px); height: 4px; pointer-events: none; }
.bo-cut::before { content: ''; position: absolute; left: 0; right: 0; top: 1px; border-top: 2px dashed #ffffffb0; animation: bo-dash 1.2s ease-in-out infinite; }
.bo-cut i { position: relative; display: block; height: 100%; width: calc(var(--tear) * 100%); border-radius: 4px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #ffe17a; }
@keyframes bo-dash { 50% { opacity: .35; } }
.bo-pack.open { cursor: default; }
.bo-pack.open .bo-cut { display: none; }
.bo-pack.open::after { content: ''; position: absolute; left: 4%; right: 4%; top: 6%; height: 34%; pointer-events: none; background: radial-gradient(ellipse at 50% 0, #fffbe0, transparent 70%); filter: blur(6px); animation: fade .3s; }
.bo-pack.sink { animation: bo-sink .5s ease-in forwards; }
@keyframes bo-sink { to { transform: translateY(70vh) scale(.9); opacity: 0; } }
.bo-reveal { position: fixed; inset: 0; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 12px; padding: calc(max(16px, env(safe-area-inset-top)) + 48px) 16px calc(80px + var(--safe-b)); }
.bo-count { color: #fff; font: 800 14px/1 var(--font); letter-spacing: .14em; opacity: .85; }
.bo-stack { position: relative; align-self: center; width: min(66vw, 290px, calc((100dvh - 260px) * .678)); aspect-ratio: 160 / 236; }
.bo-stack > .flip { position: absolute; inset: 0; z-index: 2; width: 100%; animation: none; touch-action: none; cursor: grab; }
.bo-under { position: absolute; inset: 0; border-radius: 18px; border: 1px solid #ffffff22; background: linear-gradient(160deg, #1f2843, #0b0f1d); transform: translate(calc(var(--k) * 5px), calc(var(--k) * 7px)) rotate(calc(var(--k) * 2deg)); opacity: calc(1 - var(--k) * .25); }
.bo-card.bo-mystery .flip-back { box-shadow: 0 0 0 2px #ffffffb0, 0 0 50px -4px #ffffffcc; animation: pulse 1.2s ease-in-out infinite; }
.bo-card.shine .flip-front::after { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: 18px; pointer-events: none; background: linear-gradient(110deg, transparent 30%, #ffffff77 45%, transparent 60%); background-size: 260% 100%; animation: bo-shine .8s ease-out forwards; }
@keyframes bo-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.bo-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 280px; min-height: 18px; }
.bo-thumb { width: 12px; height: 18px; border-radius: 3px; background: var(--bc); box-shadow: 0 0 8px var(--bc); animation: pop .3s var(--spring); }
.bo-thumb.shiny { background: conic-gradient(#ff5ad1, #ffe17a, #2fd8a2, #3d8bff, #ff5ad1); }

/* ═══ 3. Gachapon ════════════════════════════════════════════════════ */
.ga-scene { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding-bottom: 60px; pointer-events: none; }
.ga-machine { position: relative; width: min(70vw, 280px); display: grid; justify-items: center; pointer-events: auto; animation: bo-in .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.ga-dome { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #9ecbff18, #0b1022d0 72%); box-shadow: inset 0 0 0 6px #ffffff26, inset 0 -24px 40px #000a, 0 12px 30px #0007; }
.ga-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 24%, #ffffffb0 0 5%, transparent 17%), radial-gradient(circle at 72% 78%, #ffffff22, transparent 30%); }
.ga-deco { position: absolute; left: var(--x); top: var(--y); width: 23%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #ffffff99, transparent 28%), linear-gradient(to bottom, var(--c) 0 50%, #f1f3fb 50%); box-shadow: inset 0 -4px 8px #0003, inset 0 0 0 2px #0002; transform: translate(-50%, -50%) rotate(var(--r)); animation: ga-bob 2.6s ease-in-out var(--d) infinite; }
@keyframes ga-bob { 50% { translate: 0 -3px; } }
.ga-dome.shake .ga-deco { animation: ga-jiggle .4s ease-out; }
@keyframes ga-jiggle { 30% { translate: 5px -10px; rotate: 18deg; } 65% { translate: -4px 3px; rotate: -10deg; } }
.ga-body { position: relative; width: 86%; margin-top: -9%; padding: 15% 0 9%; display: grid; justify-items: center; gap: 12px; border-radius: 18px 18px 28px 28px; background: linear-gradient(180deg, #ff6a5c, #c2283a); box-shadow: inset 0 -10px 0 #0003, 0 22px 40px -12px #000c; }
.ga-plate { padding: 5px 10px; border-radius: 7px; background: #0003; color: #fff; font: 800 12px/1 var(--display); letter-spacing: .22em; }
.ga-crank { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #f4f6ff 0 28%, #d6dbea 29% 62%, #aeb6cb 63%); box-shadow: 0 6px 0 #0005, inset 0 0 0 3px #0002; touch-action: none; cursor: grab; animation: ga-call 1.6s ease-in-out infinite; }
@keyframes ga-call { 50% { box-shadow: 0 6px 0 #0005, inset 0 0 0 3px #0002, 0 0 0 8px #ffffff22; } }
.ga-handle { position: relative; display: block; width: 100%; height: 100%; }
.ga-handle i { position: absolute; left: 50%; top: 5%; width: 18px; height: 46%; translate: -50% 0; border-radius: 10px; background: linear-gradient(90deg, #ffd45c, #f29b11); box-shadow: 0 2px 0 #0004; }
.ga-chute { width: 46%; height: 34px; border-radius: 10px 10px 18px 18px; background: #161a2a; box-shadow: inset 0 8px 12px #000b; }
.ga-machine.bump { animation: ga-bump .2s ease-out; }
@keyframes ga-bump { 50% { transform: translateY(3px) scale(1.01, .98); } }
.ga-scene.docked { place-items: start center; padding: max(6px, env(safe-area-inset-top)) 0 0; }
.ga-scene.docked .ga-machine { width: 62px; animation: none; }
.ga-scene.docked .ga-body { gap: 4px; padding: 14% 0 8%; }
.ga-scene.docked .ga-crank { width: 18px; height: 18px; animation: none; }
.ga-scene.docked .ga-handle i { width: 5px; }
.ga-scene.docked .ga-plate { display: none; }
.ga-scene.docked .ga-chute { height: 10px; }
.ga-board { padding-top: calc(max(6px, env(safe-area-inset-top)) + 122px); }
.ga-board .ob-board-head { padding-top: 0; }
.ga-board .flip-back { background: radial-gradient(circle at 50% 46%, #ffffff16, transparent 66%), linear-gradient(160deg, #1f2843, #0b0f1d); }
.ga-cap { position: relative; display: block; width: 64%; aspect-ratio: 1; }
.ga-cap i { position: absolute; left: 0; right: 0; }
.ga-cap-top { top: 0; height: 50%; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 34% 30%, #ffffffaa, transparent 32%), var(--c); box-shadow: inset 0 -3px 0 #0003; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.ga-cap-bottom { bottom: 0; height: 50%; border-radius: 0 0 999px 999px; background: linear-gradient(#f4f6ff, #c4cadb); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.ga-cap-shine { inset: 0; border-radius: 50%; box-shadow: 0 0 26px -4px var(--c); }
.flip.crack .ga-cap-top { transform: translateY(-40%) rotate(-26deg); }
.flip.crack .ga-cap-bottom { transform: translateY(32%) rotate(12deg); }
.ga-cap.twinkle::after { content: '✦'; position: absolute; right: -10%; top: -12%; color: #fff; font-size: 15px; text-shadow: 0 0 8px #ffe17a; animation: ob-twinkle .8s ease-in-out infinite alternate; }

/* ═══ Choix de l'animation (page Ouvrir) ═══════════════════════════ */
.open-style { display: grid; gap: 10px; }
.open-style-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.open-style-head b { font-size: 14px; }
.open-style-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.open-style-opt { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: 700 13px/1.1 var(--font); cursor: pointer; }
.open-style-opt[aria-pressed='true'] { border-color: var(--coral); color: var(--ink); background: color-mix(in srgb, var(--coral) 12%, var(--surface-2)); box-shadow: 0 0 0 1px var(--coral); }
.open-style-opt .icon { color: var(--coral); }
.open-style-desc { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .bo-pack, .bo-holo, .ga-deco, .ga-crank, .cap-wild i { animation: none; }
}

/* ═══ Page Ouvrir : la Ball et le bouton tiennent dans le premier écran ═══ */
.open-main { position: relative; display: grid; gap: 16px; padding: clamp(16px, 3vw, 28px); overflow: hidden; }
.open-main::after { content: ''; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #ff5a4e30, transparent 70%); pointer-events: none; }
.open-main > * { position: relative; z-index: 1; }
.open-main-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.open-main-top h1 { margin: 6px 0 4px; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.05; }
.open-main-top p { margin: 0; font-size: 13px; }
.regen-copy { display: grid; gap: 2px; }
.regen-copy small { max-width: 20ch; }
.open-ball { position: relative; display: grid; place-items: center; min-height: clamp(180px, 30vh, 280px); }
.open-ball .capsule-big .ball-svg { width: clamp(140px, 36vw, 200px); height: auto; aspect-ratio: 1; }
.open-controls { display: grid; justify-items: center; gap: 12px; }
.open-controls .qty button { min-height: 44px; padding: 0 20px; }
.open-cta { width: min(100%, 380px); min-height: 56px; font-size: 17px; justify-content: center; }
.open-odds { border-top: 1px solid var(--line); padding-top: 12px; }
.open-odds > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 800; }
.open-odds > summary span { flex: 1; }
.open-odds > summary::-webkit-details-marker { display: none; }
.open-odds > summary::after { content: '▾'; color: var(--ink-3); }
.open-odds[open] > summary::after { content: '▴'; }
@media (max-width: 560px) {
  .open-main { gap: 12px; padding: 16px 14px; }
  .open-main-top { align-items: flex-start; }
  .open-main-top .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .open-main-top h1 { font-size: 22px; }
  .open-main-top p { font-size: 12px; }
  .open-main .regen { flex-direction: column; gap: 4px; text-align: center; }
  .open-main .regen-ring { width: 54px; height: 54px; font-size: 16px; }
  .regen-copy b { display: none; }
  .regen-copy small { font-size: 10px; max-width: 13ch; line-height: 1.3; }
  .open-ball { min-height: 168px; }
  .open-ball .cap-halo { width: 190px; height: 190px; }
  .open-style-opt { padding: 10px 4px 8px; font-size: 12px; }
}

/* ═══ Mélangeur Pokémon ══════════════════════════════════════════════ */
.mx-scene { position: fixed; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px 16px; text-align: center; color: #fff; }
.mx-slot { position: relative; width: min(56vw, 240px); aspect-ratio: 1; }
.mx-slot .art { width: 100%; height: 100%; border-radius: 26px; box-shadow: 0 0 0 2px #a35cff88, 0 30px 70px -20px #a35cffaa; }
.mx-slot.shake { animation: ob-card-shake .07s linear infinite; }
.mx-stage.spinning .mx-slot .art { filter: blur(1.2px) saturate(1.4); }
.mx-slot.land { animation: mx-land .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mx-land { 0% { transform: scale(.7); filter: brightness(2.5); } 60% { transform: scale(1.1); } }
.mx-label { margin: 0; min-height: 1.3em; font: 800 clamp(17px, 4.6vw, 22px)/1.3 var(--display); }
.mx-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mx-rings i { position: absolute; width: min(80vw, 360px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed #a35cff66; animation: ob-spin-slow 6s linear infinite; }
.mx-rings i:nth-child(2) { width: min(64vw, 290px); border-color: #ff5ad155; animation-direction: reverse; animation-duration: 4s; }
.mx-rings i:nth-child(3) { width: min(96vw, 430px); border-style: dotted; border-color: #3d8bff44; animation-duration: 9s; }
.mx-stage.spinning .mx-rings i { animation-duration: .9s; }
.mx-result { position: relative; display: grid; justify-items: center; gap: 10px; animation: fade .4s; }
.mx-card { width: min(60vw, 240px); }
.mx-result h2 { margin: 6px 0 0; font-size: clamp(22px, 6vw, 32px); }
.mx-result p { margin: 0 0 8px; color: #fffc; }

.ob-stage.revealing .ob-hint-bottom { display: none; }