/* ==========================================================================
   ポン箱の演出（v3）
   出典：Astra「ponbox v3」完成版（design/ponbox_v3.html）の <style>

   セレクタはすべて .pon-stage の中に閉じ込めてある。
   クラス名も pb- 接頭辞付きなので、サイト側（.shadow .ring .flash など）と
   ぶつからない。色は variables.css の --ponbox-* で決まる。
   ポンの箱色は PonBox.mount(el, { genreColor }) が --pb-genre として要素に渡す。

   v2 からの変更は箱の塗りだけ：
     - 銀・金が斜めグラデーション（--pb-silver-fill / --pb-gold-fill）になった
     - 全段階に共通の三角形の面模様（.pb-facet）が乗る
     - 虹の配色とオーラの色を変更

   取り込みにあたって変えた点：
     - デモ用のスタイル（.pb-demo .pb-header .pb-controls .pb-again など）は
       取り込まない。ここにあるのは箱の演出だけ
   ========================================================================== */

/* --- ステージと段階ごとの色 ---------------------------------------------- */
.pon-stage{position:relative;isolation:isolate;width:100%;height:300px;overflow:visible;--pb-fill:var(--ponbox-normal,var(--pb-genre,#FF4B20));--pb-ribbon:var(--ponbox-ribbon,#343CFF);--pb-speed:.30s;--pb-angle:2deg;--pb-tint:#fff0e7;--pb-glow:var(--ponbox-glow,#FFD568)}
.pon-stage *{box-sizing:border-box}
.pon-stage.is-silver{--pb-fill:var(--ponbox-silver,#DDE5EF);--pb-ribbon:var(--ponbox-ribbon,#566C89);--pb-speed:.25s;--pb-angle:3deg;--pb-tint:#edf2fa;--pb-glow:var(--ponbox-glow,#c1d4ed)}
.pon-stage.is-gold{--pb-fill:var(--ponbox-gold,#FFD568);--pb-ribbon:var(--ponbox-ribbon,#9A6119);--pb-speed:.21s;--pb-angle:4deg;--pb-tint:#fff2c9}
.pon-stage.is-rainbow{--pb-speed:.17s;--pb-angle:5deg;--pb-tint:#ede8ff}

/* --- 背景の地とオーラ ----------------------------------------------------- */
.pon-stage .pb-backdrop{position:absolute;inset:0;border-radius:32px;background:var(--ponbox-bg,var(--pb-tint));transition:background-color .25s;z-index:-2}
.pon-stage .pb-aura{position:absolute;inset:-10%;opacity:0;background:conic-gradient(from 20deg,#fff38a55,#28ddd866,#60b8f54d,#ec63ef66,#fff38a55);border-radius:50%;mask-image:radial-gradient(ellipse,#000 10%,transparent 68%);-webkit-mask-image:radial-gradient(ellipse,#000 10%,transparent 68%);transition:opacity .3s;z-index:-1;pointer-events:none}
.pon-stage.is-rainbow .pb-aura{opacity:1}

/* --- 箱の置き場所 --------------------------------------------------------- */
.pon-stage .pb-position{position:absolute;width:240px;height:260px;left:50%;top:50%;transform:translate(-50%,-50%)}
.pon-stage .pb-pop,.pon-stage .pb-shake,.pon-stage .pb-svg{width:100%;height:100%;overflow:visible;display:block}
.pon-stage .pb-shake{transform-origin:50% 86%}

/* --- 塗り（銀・金・虹はグラデーション）と面模様 ----------------------------- */
.pon-stage .pb-fill{fill:var(--pb-fill)}
.pon-stage.is-silver .pb-fill{fill:var(--pb-silver-fill)}
.pon-stage.is-gold .pb-fill{fill:var(--pb-gold-fill)}
.pon-stage.is-rainbow .pb-fill{fill:var(--pb-rainbow-fill)}
.pon-stage .pb-facet{opacity:0;pointer-events:none}
.pon-stage.is-silver .pb-facet,.pon-stage.is-gold .pb-facet,.pon-stage.is-rainbow .pb-facet{opacity:1}
.pon-stage .pb-ribbon{fill:var(--pb-ribbon)}

/* --- ふた・光・振動・段階アップ -------------------------------------------- */
.pon-stage .pb-lid{transform-origin:120px 80px;transition:transform .3s cubic-bezier(.18,.8,.25,1)}
.pon-stage .pb-light{opacity:0;transition:opacity .2s}
.pon-stage.is-open .pb-light{opacity:.85}
.pon-stage.is-open .pb-lid{transform:translate(-24px,-48px) rotate(-24deg)}
.pon-stage.is-opening .pb-lid{animation:pb-lid .3s both}
.pon-stage.is-shaking .pb-shake{animation:pb-shake var(--pb-speed) linear infinite}
.pon-stage.is-changing .pb-pop{animation:pb-upgrade .3s ease-out}
.pon-stage.is-opening .pb-pop{animation:pb-pop .3s ease-out}

/* --- リング・フラッシュ・粒 ------------------------------------------------ */
.pon-stage .pb-ring{position:absolute;inset:24px 14px;border:3px solid var(--pb-glow);border-radius:50%;opacity:0;pointer-events:none}
.pon-stage.is-changing .pb-ring{animation:pb-ring .3s ease-out}
.pon-stage.is-confirmed .pb-ring{animation:pb-gather .3s ease-in both}
.pon-stage .pb-flash{position:absolute;inset:-15%;background:radial-gradient(ellipse,#fff 0%,var(--pb-glow) 25%,transparent 65%);opacity:0;pointer-events:none}
.pon-stage.is-changing .pb-flash,.pon-stage.is-opening .pb-flash{animation:pb-flash .3s ease-out}
.pon-stage .pb-particles{position:absolute;inset:0;overflow:visible;pointer-events:none}
.pon-stage .pb-particle{position:absolute;left:50%;top:44%;width:6px;height:6px;border-radius:50%;background:var(--pb-particle);animation:pb-particle .55s ease-out forwards}
.pon-stage .pb-confetti{width:7px;height:12px;border-radius:1px;animation:pb-confetti 1.5s cubic-bezier(.16,.65,.45,1) forwards}

/* --- 元に戻すとき --------------------------------------------------------- */
.pon-stage.is-resetting .pb-lid{animation:none;transform:none;transition-duration:.4s}
.pon-stage.is-resetting .pb-light{opacity:0}

/* --- キーフレーム --------------------------------------------------------- */
@keyframes pb-shake{0%,100%{transform:rotate(calc(var(--pb-angle) * -1))}25%{transform:translateY(-2px) rotate(var(--pb-angle))}50%{transform:rotate(calc(var(--pb-angle) * -.5))}75%{transform:translateY(-1px) rotate(calc(var(--pb-angle) * .6))}}
@keyframes pb-upgrade{0%{transform:scale(1)}40%{transform:scale(1.10,.94)}70%{transform:scale(.97,1.05)}100%{transform:scale(1)}}
@keyframes pb-pop{45%{transform:translateY(-7px) scale(1.04,.97)}100%{transform:none}}
@keyframes pb-lid{0%{transform:none}60%{transform:translate(-29px,-65px) rotate(-29deg)}100%{transform:translate(-24px,-48px) rotate(-24deg)}}
@keyframes pb-ring{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pb-gather{0%{opacity:0;transform:scale(1.3)}40%{opacity:.8}100%{opacity:0;transform:scale(.45)}}
@keyframes pb-flash{0%{opacity:0}25%{opacity:.8}100%{opacity:0}}
@keyframes pb-particle{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.2)}}
@keyframes pb-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}30%{opacity:1;transform:translate(var(--mx),var(--my)) rotate(120deg)}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin))}}

/* --- スマホ幅と、動きを減らす設定 ------------------------------------------ */
@media(max-width:600px){.pon-stage{height:240px}.pon-stage .pb-position{transform:translate(-50%,-50%) scale(.78)}}
@media(prefers-reduced-motion:reduce){.pon-stage *{animation:none!important;transition-duration:.08s!important}.pon-stage .pb-particles,.pon-stage .pb-ring,.pon-stage .pb-flash{display:none}}