/* Le menu du marchand de Bémol (2 nov. 2026, src/story/shop.js) : la sœur de la pause, même papier, même encre, sans flou ni verre. Ce qui
   bouge : le livre qui claque à l'ouverture, les cartes qui tombent une à une, celle qu'on choisit qui se soulève et brille, les chaînes
   qui sautent, les fragments qui volent, le tampon ACHETÉ, les confettis. Tout en transform et opacity, posé sur la grille 640 × 360. */
.px .st-shop { --ink: #1c1226; --paper: #f3e7c9; --paper2: #e9d9b0; --hot: #e8202e; --gold: #ffd23a; position: absolute; inset: -2000px; display: flex; align-items: center; justify-content: center; z-index: 400; pointer-events: auto; font-family: 'Barlow Condensed', sans-serif; color: var(--ink); }
.px.st-hud .st-shop, .px.st-hud .st-shop * { text-shadow: none; }
.px .st-shop p, .px .st-shop dl, .px .st-shop dt, .px .st-shop dd, .px .st-shop span, .px .st-shop button { font-family: 'Barlow Condensed', sans-serif; }
.px .st-shop.leave { animation: sh-out .22s ease-in forwards; }
@keyframes sh-out { to { opacity: 0; } }
.px .sh-bg { position: absolute; inset: 0; background: rgba(10, 6, 18, .74); overflow: hidden; }
.px .st-shop.enter .sh-bg { animation: sh-dim .2s linear; }
@keyframes sh-dim { from { opacity: 0; } }
.px .sh-rays { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px; opacity: .2; background: repeating-conic-gradient(#ffd23a 0 12deg, transparent 12deg 24deg); animation: sh-turn 50s linear infinite; }
@keyframes sh-turn { to { transform: rotate(360deg); } }
.px .sh-dots { position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, .55) 1px, transparent 1.4px) 0 0 / 4px 4px; }
.px .sh-book { position: relative; flex: none; width: 620px; height: 346px; box-sizing: border-box; padding: 8px 10px 0; background: radial-gradient(rgba(120, 88, 40, .13) .8px, transparent 1px) 0 0 / 3px 3px, var(--paper); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.px .st-shop.enter .sh-book { animation: sh-book .36s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sh-book { from { transform: translateY(40px) rotate(-2.4deg) scale(.9); } }
.px .sh-book.hit { animation: sh-hit .26s ease-out; }
@keyframes sh-hit { 0% { transform: translate(4px, 4px) rotate(.5deg); } 40% { transform: translate(-3px, -2px) rotate(-.4deg); } 70% { transform: translate(1px, 1px); } }

/* le haut : le marchand, sa bulle, l'enseigne, la bourse */
.px .sh-top { position: relative; height: 62px; display: flex; align-items: center; gap: 8px; }
.px .sh-me { flex: none; width: 58px; height: 58px; border: 2.5px solid var(--ink); background: #5fd36a; overflow: hidden; box-shadow: 2.5px 2.5px 0 var(--ink); transform: rotate(-3deg); }
.px .sh-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px .sh-me.talk { animation: sh-talk .34s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sh-talk { 0% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(2deg) scale(1.1) translateY(-3px); } }
.px .sh-say { position: relative; flex: 1 1 0; min-width: 0; height: 48px; box-sizing: border-box; padding: 4px 9px; background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
.px .sh-say::before { content: ''; position: absolute; left: -9px; top: 15px; width: 12px; height: 12px; background: #fffaf0; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.px .sh-say b { display: block; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .7px; color: #2f9e5f; line-height: 1.1; }
.px .sh-say span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.12; }
.px .sh-say span.new { animation: sh-word .24s ease-out; }
@keyframes sh-word { from { transform: translateX(-6px); opacity: 0; } }
.px .sh-sign { flex: none; width: 102px; text-align: center; transform: rotate(1.5deg); }
.px .sh-sign small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .4px; }
.px .sh-sign b { display: block; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 21px; line-height: 1; color: var(--hot); letter-spacing: .6px; -webkit-text-stroke: .4px var(--ink); }
.px .sh-purse { flex: none; width: 84px; height: 52px; display: grid; grid-template: 'a b' 34px 'c c' 14px / 30px 1fr; align-items: center; padding: 1px 6px; box-sizing: border-box; background: var(--ink); color: var(--gold); border: 2.5px solid var(--ink); box-shadow: 2.5px 2.5px 0 rgba(28, 18, 38, .35); transform: rotate(-1.5deg); }
.px .sh-purse .sh-st { grid-area: a; width: 26px; height: 26px; }
.px .sh-purse b { grid-area: b; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 31px; line-height: 1; text-align: right; }
.px .sh-purse small { grid-area: c; font-size: 10px; font-weight: 600; text-align: right; color: #f3e7c9; }
.px .sh-st { object-fit: contain; filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); pointer-events: none; } /* (le poing des fragments de Bagarre) */

/* la vitrine : les cartes sur un tapis bleu nuit, sous un projecteur */
.px .sh-main { display: flex; gap: 8px; height: 252px; margin-top: 2px; padding: 7px; box-sizing: border-box; background: radial-gradient(ellipse 62% 76% at 34% 42%, #36307a, #17143f 76%); border: 3px solid var(--ink); }
.px .sh-grid { flex: none; width: 410px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px 6px; }

/* une carte : l'image jusqu'aux bords, le nom sur un bandeau, le prix en jeton. La rareté se lit au cadre : --r */
.px .sh-c { --r: #f3e7c9; position: relative; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); transition: transform .13s cubic-bezier(.2, 1.7, .4, 1); }
.px .sh-c.r2 { --r: #4fd2ff; }
.px .sh-c.r3 { --r: #ffd23a; }
.px .st-shop.enter .sh-c { animation: sh-drop .32s cubic-bezier(.2, 1.5, .4, 1) calc(.1s + var(--n) * .024s) backwards; }
@keyframes sh-drop { from { transform: translateY(-26px) rotate(7deg) scale(.6); opacity: 0; } }
.px .sh-in { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 5px; background: var(--r); box-shadow: 0 0 0 1.5px var(--ink), 2px 3px 0 1.5px rgba(0, 0, 0, .55); }
.px .sh-art { position: absolute; inset: 2.5px 2.5px 19px; overflow: hidden; border-radius: 3px; background: var(--ink); }
.px .sh-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 16%); transition: transform .16s cubic-bezier(.2, 1.6, .4, 1); }
.px .sh-c > .sh-in > b { position: absolute; left: 0; right: 0; bottom: 0; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0 3px; font: 400 10.5px/.92 'Bangers', sans-serif; letter-spacing: .3px; text-align: center; color: #fff; background: var(--ink); }
.px .sh-c > em { position: absolute; right: -4px; top: -4px; z-index: 3; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; font: 400 15px/1 'Bangers', sans-serif; color: var(--ink); background: radial-gradient(circle at 36% 30%, #fff3a8, #ffd23a 46%, #e89b14); border: 1.8px solid var(--ink); border-radius: 50%; box-shadow: 1px 1.5px 0 rgba(0, 0, 0, .5); }

/* le reflet qui passe : tout le temps sur une légendaire, plus vif sur la carte choisie */
.px .sh-art::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .62) 46%, rgba(130, 225, 255, .4) 58%, transparent); transform: skewX(-18deg); opacity: 0; }
.px .sh-c.r3 .sh-art::after { opacity: 1; animation: sh-shine 3.4s ease-in-out infinite; animation-delay: calc(var(--n) * -.31s); }
.px .sh-c.on .sh-art::after { opacity: 1; animation: sh-shine 1.25s ease-in-out infinite; }
@keyframes sh-shine { 0% { transform: translateX(0) skewX(-18deg); } 62%, 100% { transform: translateX(420%) skewX(-18deg); } }
.px .sh-c.r3 .sh-in { background: linear-gradient(135deg, #fff2a0, #ffb81f 34%, #fff6c2 52%, #e8901a 74%, #ffe27a); }

/* la carte choisie : elle se soulève, tangue, et des rayons tournent derrière elle */
.px .sh-c.on { z-index: 4; transform: translateY(-4px) rotate(-2.2deg) scale(1.17); }
.px .sh-c.on .sh-in { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--r), 3px 6px 0 4px rgba(0, 0, 0, .6); animation: sh-float 1.5s ease-in-out infinite alternate; }
.px .sh-c.on .sh-art img { transform: scale(1.09); }
@keyframes sh-float { from { transform: rotate(-1.6deg) translateY(1px); } to { transform: rotate(1.6deg) translateY(-1.5px); } }
.px .sh-c.on::before { content: ''; position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px; z-index: -1; pointer-events: none; background: repeating-conic-gradient(var(--r) 0 13deg, transparent 13deg 30deg); -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); opacity: .5; animation: sh-turn 9s linear infinite; }
.px .sh-c.nope { animation: sh-nope .3s ease-out; }
@keyframes sh-nope { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -3px 0; } }

/* trop chère, déjà à soi, enchaînée */
.px .sh-c.poor .sh-art img { filter: saturate(.5) brightness(.72); }
.px .sh-c.poor.on .sh-art img { filter: saturate(.8) brightness(.9); }
.px .sh-c.poor > em { background: #d9cdb0; color: #6c5a44; }
.px .sh-c.have .sh-art img { filter: saturate(.7) brightness(.62); }
.px .sh-c.have > em { display: none; }
.px .sh-chain, .px .sh-lock { display: none; position: absolute; pointer-events: none; }
.px .sh-c.lock .sh-art img { filter: saturate(.3) brightness(.68); }
.px .sh-c.lock.on .sh-art img { filter: saturate(.55) brightness(.85); }
.px .sh-c.lock > em { background: #8d8798; color: #2a2433; }
.px .sh-c.lock .sh-in > b { color: #a79fb4; }
.px .sh-c.lock .sh-chain { display: block; left: -12%; right: -12%; top: 36%; height: 8px; background: repeating-linear-gradient(90deg, #d7dbe4 0 7px, #5a5f70 7px 8.4px, #8c92a4 8.4px 11px, #5a5f70 11px 12.4px); box-shadow: 0 0 0 1.2px var(--ink); transform: rotate(-20deg); }
.px .sh-c.lock .sh-lock { display: block; left: 50%; top: 38%; width: 24px; height: 24px; margin: -12px; animation: sh-lock 2.2s ease-in-out infinite alternate; }
@keyframes sh-lock { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* … et les chaînes qui sautent quand le double saut est vendu */
.px .sh-c.freed .sh-in::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: sh-flash .36s ease-out calc(var(--f) * .035s); }
.px .sh-c.freed { animation: sh-free .42s cubic-bezier(.2, 1.7, .4, 1) calc(var(--f) * .035s); }
@keyframes sh-free { 35% { transform: translateY(-7px) scale(1.1) rotate(2deg); } }
@keyframes sh-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* le tampon */
.px .sh-stamp { position: absolute; left: 50%; top: 42%; display: none; padding: 0 5px; font: 400 15px/18px 'Bangers', sans-serif; letter-spacing: .8px; color: var(--hot); background: rgba(255, 250, 240, .93); border: 2px solid var(--hot); transform: translate(-50%, -50%) rotate(-13deg); }
.px .sh-c.have .sh-stamp { display: block; }
.px .sh-c.stamped .sh-stamp { animation: sh-stamp .3s cubic-bezier(.2, 1.3, .3, 1); }
.px .sh-c.stamped .sh-in::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: sh-flash .34s ease-out; }
@keyframes sh-stamp { from { transform: translate(-50%, -50%) rotate(-30deg) scale(3.4); opacity: 0; } }

/* Partir : le dos d'une carte */
.px .sh-out .sh-in { background: repeating-linear-gradient(45deg, #2a2360 0 5px, #221c50 5px 10px); box-shadow: 0 0 0 1.5px var(--ink), 2px 3px 0 1.5px rgba(0, 0, 0, .55), inset 0 0 0 2.5px #5a4fa8; }
.px .sh-out { --r: #ff6a5a; }
.px .sh-x { position: absolute; left: 0; right: 0; top: 11px; font: 400 34px/1 'Bangers', sans-serif; text-align: center; color: #ff5a4a; -webkit-text-stroke: 1px var(--ink); }
.px .sh-c.sh-out > .sh-in > b { background: none; font-size: 14px; }

/* le détail, toujours au même endroit : la carte en grand, puis ce qu'elle fait */
.px .sh-side { --r: #f3e7c9; position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; overflow: hidden; background: #fffaf0; border: 2.5px solid var(--r); border-radius: 5px; box-shadow: 0 0 0 2px var(--ink); }
.px .sh-side.r2 { --r: #4fd2ff; }
.px .sh-side.r3 { --r: #ffd23a; }
.px .sh-side.pop .sh-big img { animation: sh-big .26s cubic-bezier(.2, 1.7, .4, 1); }
.px .sh-side.pop .sh-tx { animation: sh-word .16s ease-out; }
@keyframes sh-big { from { transform: scale(1.4) rotate(-5deg); } }
.px .sh-big { position: relative; height: 90px; overflow: hidden; border-bottom: 2.5px solid var(--ink); background: var(--ink); font: 400 58px/90px 'Bangers', sans-serif; color: #ff5a4a; text-align: center; }
.px .sh-big img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% calc(var(--y, 24%) * .5); }
.px .sh-big.poor img { filter: saturate(.65) brightness(.8); }
.px .sh-big.lock img { filter: grayscale(.8) brightness(.6); }
.px .sh-big.have img { filter: saturate(.8) brightness(.75); }
.px .sh-big::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5) 50%, transparent); animation: sh-shine 2.6s ease-in-out infinite; }
.px .sh-rank { position: absolute; left: 0; bottom: 4px; padding: 1px 8px 0 5px; font: 400 10.5px/13px 'Bangers', sans-serif; letter-spacing: .7px; color: var(--ink); background: var(--r); border: 1.5px solid var(--ink); border-left: 0; }
.px .sh-tx { padding: 4px 7px 0; }
.px .sh-side h3 { margin: 0 0 2px; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 17.5px; line-height: 1; letter-spacing: .5px; }
.px .sh-side p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.08; }
.px .sh-side dl { margin: 3px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0 5px; font-size: 10.5px; line-height: 1.1; }
.px .sh-side dt { font-weight: 700; color: #7a5a30; }
.px .sh-side dd { margin: 0; font-weight: 600; }
.px .sh-price { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; gap: 1px; padding: 1px 6px 1px 3px; background: var(--ink); border-radius: 11px; }
.px .sh-price .sh-st { width: 15px; height: 15px; }
.px .sh-price b { font: 400 19px/1 'Bangers', sans-serif; color: var(--gold); }
.px .sh-act { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 23px; display: flex; align-items: center; justify-content: center; font: 400 14px/1 'Bangers', sans-serif; letter-spacing: .6px; border: 2px solid var(--ink); border-radius: 3px; }
.px .sh-act span { display: flex; align-items: center; gap: 4px; }
.px .sh-act.go { cursor: pointer; background: var(--gold); box-shadow: 2px 2px 0 var(--ink); animation: sh-go .7s ease-in-out infinite alternate; }
@keyframes sh-go { to { transform: scale(1.035); } }
.px .sh-act.no { background: #e6d7b2; color: #7a5a30; font-size: 12.5px; }
.px .sh-act.done { background: #d7ecd0; color: #2a6a3a; }

/* le bas, et ce qui vole */
.px .sh-foot { height: 15px; margin-top: 3px; display: flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 600; }
.px .sh-foot span { display: flex; align-items: center; gap: 3px; }
.px .sh-foot em { margin-left: auto; font-style: normal; color: #7a5a30; }
.px .sh-ring { position: absolute; width: 40px; height: 40px; margin: -20px; border: 4px solid #fff; border-radius: 50%; animation: sh-ring .5s ease-out forwards; }
@keyframes sh-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.4); opacity: 0; border-width: 1px; } }
.px .sh-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.px .sh-fly { position: absolute; width: 18px; height: 18px; margin: -9px; animation: sh-fly .46s cubic-bezier(.4, -.3, .5, 1) backwards; opacity: 0; }
.px .sh-fly .sh-st { width: 100%; height: 100%; }
@keyframes sh-fly { 0% { transform: translate(0, 0) scale(.8) rotate(0); opacity: 1; } 55% { transform: translate(calc(var(--x) * .5), calc(var(--y) * .5 - 34px)) scale(1.5) rotate(200deg); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.5) rotate(420deg); opacity: 1; } }
.px .sh-bit { position: absolute; width: 5px; height: 8px; animation: sh-bit .8s cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes sh-bit { to { transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); opacity: 0; } }

.px.st-cine .st-shop, .px.st-cine .st-shop * { text-shadow: none; }