/* PPFX1029 プレプレを派手にする層（第1弾＋第2弾）。いつも動く物は数回で止まり、画面に入り直すとまた動く（ほかの部品が毎コマ描き直す時の重さを増やさない）。
   html.ppfx のときだけ効く。PPUI 第3版（ミルクティー・サロン）の色に合わせる。
   動かすのは transform と opacity だけ。画面の外の物は JS が .ppfx-v を外して止める。prefers-reduced-motion では全部止める（いちばん下）。 */
html.ppfx{--fx-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4z'/%3E%3C/svg%3E");--fx-pk:#ff7aa8;--fx-ac:#c0728a;--fx-gd:#e8b85a;--fx-gd2:#fff2c4;--fx-lv:#a98ee0;--fx-ease:cubic-bezier(.2,.9,.25,1.25)}

/* ===== nav: 下のナビ ===== */
/* 選んでいるタブ: PPUI の上の細い線は消して、後ろの光る玉と、すべる下線（.ppfx-nb は JS が1つだけ足す） */
html.ppfx-nav .ppu-n.is-on::before{display:none}
html.ppfx-nav .cmsocial-bottom,html.ppfx-nav #msBottomNav[data-ppu]{isolation:isolate}
html.ppfx-nav .ppu-n{z-index:1}
html.ppfx-nav .ppu-n__ic{position:relative}
html.ppfx-nav .ppu-n__ic::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:30px;margin:-15px 0 0 -24px;border-radius:999px;z-index:-1;
	background:linear-gradient(135deg,#ffe3ec,#f6dcff 60%,#ffeccd);box-shadow:0 4px 12px rgba(192,114,138,.28),inset 0 1px 0 #fff;opacity:0;transform:scale(.4)}
html.ppfx-nav .ppu-n.is-on .ppu-n__ic::before{opacity:1;transform:none;transition:transform .32s var(--fx-ease),opacity .2s}
html.ppfx-nav .ppu-n.is-on .ppu-n__ic svg{stroke-width:2.2;filter:drop-shadow(0 1px 0 #fff)}
html.ppfx-nav .ppu-n.is-on .ppu-n__t{background:linear-gradient(90deg,#d0577f,#9d6bd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ppfx-nb{position:absolute;left:0;top:0;height:3px;width:30px;border-radius:0 0 4px 4px;z-index:2;pointer-events:none;
	background:linear-gradient(90deg,var(--fx-pk),var(--fx-lv),var(--fx-gd));box-shadow:0 0 10px rgba(255,122,168,.7);transition:transform .38s var(--fx-ease),opacity .2s;will-change:transform}
.ppfx-nb.is-init{transition:none}
/* 押した時: 沈んで（PPUI の .is-press）→ 離したら弾む＋光の輪 */
html.ppfx-nav .ppu-n.ppfx-pop .ppu-n__ic{animation:fx-pop .48s var(--fx-ease)}
html.ppfx-nav .ppu-n.ppfx-pop .ppu-n__ic::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--fx-pk);opacity:0;animation:fx-ring .5s ease-out}
@keyframes fx-pop{0%{transform:scale(.82)}45%{transform:scale(1.2) translateY(-3px)}70%{transform:scale(.95)}100%{transform:none}}
@keyframes fx-ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
/* ページを開いた時、選んでいるタブが1回だけ跳ねる */
html.ppfx-nav .ppu-n.is-on.ppfx-hi .ppu-n__ic{animation:fx-pop .6s var(--fx-ease) .15s both}
html.ppfx-nav .ppu-n__badge{animation:fx-badge 2.4s ease-in-out 5;transform-origin:50% 50%}
@keyframes fx-badge{0%,70%,100%{transform:none}78%{transform:scale(1.22)}86%{transform:scale(.94)}}

/* ===== press: ボタンの押し心地 ===== */
html.ppfx-press :is(.ppu-btn,.ppu-hd__join,.hbs__btn,.al-two__c,.al-card,.al-rank__a,.ppu-hd__kit,.ppfx-cta).is-press,
html.ppfx-press :is(.ppu-btn,.ppu-hd__join,.hbs__btn,.al-two__c,.ppfx-cta):active{transform:scale(.95)!important;transition:transform .08s ease!important}
html.ppfx-press :is(.al-card,.al-rank__a,.al-two__c,.hbs__btn){transition:transform .22s var(--fx-ease)}
/* 時々流れる光沢（目立たせたいボタンだけ。JS が中に <i class="ppfx-gl"> を足す・画面の中だけ） */
.ppfx-gl{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
.ppfx-gl::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);opacity:.9}
.ppfx-v>.ppfx-gl::before{animation:fx-gl 3.6s ease-in-out 3}
@keyframes fx-gl{0%,62%{transform:translateX(-120%) skewX(-18deg)}88%,100%{transform:translateX(330%) skewX(-18deg)}}
html.ppfx-press :is(.ppu-btn,.hbs__btn,.ppfx-cta){position:relative}
html.ppfx-press .ppu-btn{background:linear-gradient(180deg,#f29bb5,#c86a8c 60%,#b85d80)!important;box-shadow:0 8px 18px rgba(192,90,130,.38),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(120,40,70,.18)!important}
html.ppfx-press .ppu-hd__join{background:linear-gradient(180deg,#f7a6bf,#c86a8c)!important;box-shadow:0 6px 16px rgba(200,90,130,.42),inset 0 1px 0 rgba(255,255,255,.5)!important}

/* ===== page: ページの切り替え・ふわっと出る ===== */
/* view-transition（Chrome・新しい Safari）: 前のページは少し沈んで消え、次のページは下から少し大きく出る */
html.ppfx-page::view-transition-old(root){animation:fx-vo .2s ease both}
html.ppfx-page::view-transition-new(root){animation:fx-vi .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-vo{to{opacity:0;transform:scale(.985)}}
@keyframes fx-vi{from{opacity:0;transform:translateY(14px) scale(1.01)}}
/* 開いた時: 最初に見える部品が順に（JS が .ppfx-in と --d を付ける。0.4秒で全部出る・JS が動かない時は何もしない） */
html.ppfx-page .ppfx-in{animation:fx-in .46s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes fx-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
/* 画面に入った時（下のカード・横に流す列） */
html.ppfx-page .ppfx-rv:not(.ppfx-rvd){opacity:0;transform:translateY(18px) scale(.97)}
html.ppfx-page .ppfx-rv.ppfx-rvd{transition:opacity .42s ease,transform .5s var(--fx-ease);transition-delay:var(--d,0s)}
/* ページの頭の題の札: 開いた時にふわっと・飾りの星がまたたく */
html.ppfx-page .ppu-ph__plate{animation:fx-plate .6s var(--fx-ease) .1s both}
@keyframes fx-plate{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
html.ppfx-page .ppu-ph__f::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%);transform:translateX(-100%);animation:fx-sweep 1.3s ease-out .35s both}
@keyframes fx-sweep{to{transform:translateX(100%)}}
/* カードの立体感と光沢（影と上の縁だけ・文字は変えない） */
html.ppfx-page .al-card{box-shadow:0 10px 22px -10px rgba(120,70,90,.35),0 2px 4px rgba(120,70,90,.08)}
html.ppfx-page .al-card__art{position:relative}
html.ppfx-page .al-card__art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 38%)}

/* ===== rank: ランキングの1〜3位 ===== */
html.ppfx-rank .al-rank__li:is(.is-r1,.is-r2,.is-r3){position:relative}
html.ppfx-rank .al-rank__li:is(.is-r1,.is-r2,.is-r3) .al-rank__a{position:relative;isolation:isolate}
html.ppfx-rank .al-rank__li.is-r1 .al-rank__a{box-shadow:0 0 0 2px #f0c860,0 10px 26px -8px rgba(214,160,40,.6)!important;background-image:linear-gradient(115deg,#fff8e1,#fff 45%,#fff3d6)!important}
html.ppfx-rank .al-rank__li.is-r2 .al-rank__a{box-shadow:0 0 0 2px #cfd6e2,0 8px 20px -8px rgba(120,135,160,.55)!important;background-image:linear-gradient(115deg,#f3f6fb,#fff 45%,#eef2f8)!important}
html.ppfx-rank .al-rank__li.is-r3 .al-rank__a{box-shadow:0 0 0 2px #e2b48c,0 8px 20px -8px rgba(170,110,60,.5)!important;background-image:linear-gradient(115deg,#fbefe5,#fff 45%,#f8eadd)!important}
/* 光沢が横切る（画面の中だけ） */
html.ppfx-rank .ppfx-rk-gl{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;border-radius:inherit}
html.ppfx-rank .ppfx-rk-gl::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.8) 50%,rgba(255,255,255,0));transform:translateX(-110%) skewX(-16deg)}
html.ppfx-rank .ppfx-v .ppfx-rk-gl::before{animation:fx-gl 4.2s ease-in-out 3}
html.ppfx-rank .is-r2.ppfx-v .ppfx-rk-gl::before{animation-delay:.5s}
html.ppfx-rank .is-r3.ppfx-v .ppfx-rk-gl::before{animation-delay:1s}
/* 順位の札: 王冠＋後ろで回る光 */
html.ppfx-rank .al-rank__li:is(.is-r1,.is-r2,.is-r3) .al-rank__no{position:relative;z-index:2;overflow:visible}
.ppfx-crown{position:absolute;left:50%;top:-19px;width:22px;height:14px;margin-left:-11px;z-index:3;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(120,80,0,.35))}
.ppfx-crown::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff4c2,#f2c14e 55%,#c98a14);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 4l5 4 6-7 6 7 5-4-2 11H3z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 4l5 4 6-7 6 7 5-4-2 11H3z'/%3E%3C/svg%3E") center/contain no-repeat}
.is-r2 .ppfx-crown::before{background:linear-gradient(180deg,#fff,#cfd8e6 55%,#8d9bb3)}
.is-r3 .ppfx-crown::before{background:linear-gradient(180deg,#ffe6cf,#e0a274 55%,#a8643a)}
.is-r1.ppfx-v .ppfx-crown{animation:fx-crown 2.8s ease-in-out 5}
@keyframes fx-crown{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2px) rotate(4deg)}}
.ppfx-rays{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:-1;pointer-events:none;border-radius:50%;
	background:repeating-conic-gradient(from 0deg,rgba(255,200,70,.8) 0 12deg,rgba(255,200,70,0) 12deg 30deg);
	-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);opacity:.9}
.is-r2 .ppfx-rays{background:repeating-conic-gradient(from 0deg,rgba(190,205,230,.6) 0 12deg,rgba(190,205,230,0) 12deg 30deg)}
.is-r3 .ppfx-rays{background:repeating-conic-gradient(from 0deg,rgba(230,170,120,.5) 0 12deg,rgba(230,170,120,0) 12deg 30deg)}
.is-r1.ppfx-v .ppfx-rays{animation:fx-spin 9s linear 3}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* きらめき（1位だけ） */
.ppfx-tw{position:absolute;width:9px;height:9px;z-index:4;pointer-events:none;background:#fff6c8;opacity:0;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
	filter:drop-shadow(0 0 3px #ffd56b)}
.ppfx-v .ppfx-tw{animation:fx-tw 2.2s ease-in-out 6}
.ppfx-tw.t2{animation-delay:.7s!important}.ppfx-tw.t3{animation-delay:1.4s!important}
@keyframes fx-tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* ゲーム一覧の「いま人気」1〜3位の札 */
html.ppfx-rank .ppfx-hot{display:inline-flex!important;align-items:center;gap:3px;isolation:isolate}
html.ppfx-rank .ppfx-h1{background:linear-gradient(135deg,#fff1b8,#f2b632 50%,#d98a0b)!important;color:#5a3500!important;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:0 0 0 1.5px #fff6d0,0 3px 12px rgba(230,160,20,.6)!important}
html.ppfx-rank .ppfx-h2{background:linear-gradient(135deg,#fff,#c9d3e3 50%,#8e9bb4)!important;color:#2f3a52!important;text-shadow:0 1px 0 rgba(255,255,255,.7);box-shadow:0 0 0 1.5px #fff,0 3px 10px rgba(120,135,170,.55)!important}
html.ppfx-rank .ppfx-h3{background:linear-gradient(135deg,#ffe2c8,#dc9b68 50%,#a95f33)!important;color:#fff!important;text-shadow:0 1px 1px rgba(90,40,10,.4);box-shadow:0 0 0 1.5px #ffe9d6,0 3px 10px rgba(170,95,50,.5)!important}
.ppfx-crown--in{position:relative;left:auto;top:auto;margin:0 1px 0 0;width:15px;height:10px;flex:0 0 15px;filter:none}
.ppfx-h1 .ppfx-crown--in::before{background:linear-gradient(180deg,#b06a00,#6b3d00)}
.ppfx-h2 .ppfx-crown--in::before{background:linear-gradient(180deg,#6c7a96,#39445c)}
.ppfx-h3 .ppfx-crown--in::before{background:#fff}
.ppfx-crown--in{animation:none!important}
html.ppfx-rank .ppfx-hot{overflow:hidden}
html.ppfx-rank .ppfx-hot::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85) 50%,rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg)}
html.ppfx-rank .ppfx-hot.ppfx-v::after{animation:fx-gl 2.6s ease-in-out 4}
html.ppfx-rank .ppfx-h2.ppfx-v::after{animation-delay:.4s}
html.ppfx-rank .ppfx-h3.ppfx-v::after{animation-delay:.8s}

/* ===== new: NEW の札（JS が「NEW」と出ている札だけに .ppfx-nw。「更新」の札などは今のまま） ===== */
html.ppfx-new .ppfx-nw{isolation:isolate;background:linear-gradient(135deg,#ff4f8b,#ff7a5c 55%,#ffb52e)!important;color:#fff!important;box-shadow:0 3px 10px rgba(255,80,130,.45),inset 0 1px 0 rgba(255,255,255,.55)!important;text-shadow:0 1px 1px rgba(160,30,70,.35)}
html.ppfx-new .ppfx-nw.ppfx-v{animation:fx-beat 1.8s ease-in-out var(--fxd,0s) 4}
html.ppfx-new .ppfx-nw{overflow:hidden}
html.ppfx-new .ppfx-nw::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:50%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg)}
html.ppfx-new .ppfx-nw.ppfx-v::after{animation:fx-gl 1.8s ease-in-out var(--fxd,0s) 4}
@keyframes fx-beat{0%,55%,100%{transform:scale(1)}15%{transform:scale(1.13)}30%{transform:scale(.97)}42%{transform:scale(1.06)}}

/* =====================================================================
   第2弾
   ===================================================================== */
/* ===== party: 切手・ギフトを受け取った時（紙吹雪・数字が増える） ===== */
.ppfx-cf{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483001;pointer-events:none}
.ppfx-cf i{position:absolute;left:-5px;top:-7px;width:10px;height:14px;border-radius:2px;opacity:0;
	animation:fx-cf var(--t,1.6s) cubic-bezier(.15,.7,.3,1) var(--d,0s) forwards}
.ppfx-cf i.c{border-radius:50%;width:9px;height:9px}
.ppfx-cf i.s{width:14px;height:14px;border-radius:0;-webkit-mask:var(--fx-star) center/contain no-repeat;mask:var(--fx-star) center/contain no-repeat}
@keyframes fx-cf{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}
	35%{opacity:1;transform:translate(calc(var(--x) * .75),calc(var(--y) * .9)) rotate(calc(var(--r) * .5)) scale(1)}
	100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r)) scale(.9)}}
.ppfx-cf b{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,214,110,.6) 45%,rgba(255,150,200,0));animation:fx-flash .6s ease-out forwards}
@keyframes fx-flash{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
/* 「+80」が浮かぶ */
.ppfx-plus{position:fixed;z-index:2147483002;pointer-events:none;font:900 20px/1 "Zen Maru Gothic",system-ui,sans-serif;color:#fff;padding:6px 12px;border-radius:999px;
	background:linear-gradient(135deg,#ff5f93,#ffb52e);box-shadow:0 6px 18px rgba(255,90,140,.5),inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 1px rgba(150,40,60,.4);
	animation:fx-plus 1.8s cubic-bezier(.2,.9,.25,1.2) forwards;white-space:nowrap}
@keyframes fx-plus{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}18%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}30%{transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,-26px)}100%{opacity:0;transform:translate(-50%,-44px)}}
.ppfx-cnt{display:inline-block;animation:fx-cnt .9s ease-out}
@keyframes fx-cnt{0%,100%{transform:none}20%{transform:scale(1.35)}45%{transform:scale(.95)}65%{transform:scale(1.08)}}
/* ギフトが届いた帯: 絵が弾んで出る */
html.ppfx-party .cmsocial-gifttoast .cmsocial-gifttoast__art{animation:fx-gift .9s cubic-bezier(.2,.9,.25,1.4) .15s both}
@keyframes fx-gift{0%{transform:scale(.2) rotate(-25deg);opacity:0}55%{transform:scale(1.3) rotate(8deg);opacity:1}75%{transform:scale(.92) rotate(-3deg)}100%{transform:none}}

/* ===== gacha: 宝箱ガチャ（.g2）の演出を足す（ガチャの中身・確率・画面の作りは変えない） ===== */
.ppfx-gx{position:fixed;inset:0;z-index:2147482990;pointer-events:none;overflow:hidden}
.ppfx-gx__v{position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(30,10,60,0) 40%,rgba(30,10,60,.75));opacity:0;transition:opacity .5s}
.ppfx-gx.is-charge .ppfx-gx__v{opacity:1}
/* 溜め: 光の粒が中心へ集まる */
.ppfx-gx__p{position:absolute;left:var(--cx);top:var(--cy);width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px var(--gc,#ffd56b);opacity:0}
.ppfx-gx.is-charge .ppfx-gx__p{animation:fx-suck 1s ease-in var(--d,0s) infinite}
@keyframes fx-suck{0%{opacity:0;transform:rotate(var(--a)) translateY(-170px) scale(1.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}}
/* 光の柱 */
.ppfx-gx__pl{position:absolute;left:var(--cx);top:-10%;bottom:-10%;width:120px;margin-left:-60px;transform:scaleX(0);opacity:0;
	background:linear-gradient(90deg,rgba(255,255,255,0),var(--gc,#ffd56b) 30%,#fff 50%,var(--gc,#ffd56b) 70%,rgba(255,255,255,0))}
.ppfx-gx.is-pillar .ppfx-gx__pl{animation:fx-pillar 1.5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fx-pillar{0%{opacity:0;transform:scaleX(0)}20%{opacity:.95;transform:scaleX(1.2)}60%{opacity:.85;transform:scaleX(.8)}100%{opacity:0;transform:scaleX(1.6)}}
/* 光の爆発（全体の白い光・回る光の筋） */
.ppfx-gx__f{position:absolute;inset:0;background:#fff;opacity:0}
.ppfx-gx.is-boom .ppfx-gx__f{animation:fx-boom .7s ease-out forwards}
@keyframes fx-boom{0%{opacity:0}12%{opacity:.92}100%{opacity:0}}
.ppfx-gx__r{position:absolute;left:var(--cx);top:var(--cy);width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;opacity:0;
	background:repeating-conic-gradient(var(--gc,#ffd56b) 0 6deg,rgba(255,255,255,0) 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 70%);mask:radial-gradient(closest-side,#000 10%,transparent 70%)}
.ppfx-gx.is-boom .ppfx-gx__r{animation:fx-rays 2.2s ease-out forwards}
@keyframes fx-rays{0%{opacity:0;transform:scale(.2) rotate(0)}15%{opacity:.9}100%{opacity:0;transform:scale(1.2) rotate(70deg)}}
.ppfx-gx.is-UR{--gc:#ff7ad9}
.ppfx-gx.is-UR .ppfx-gx__pl{background:linear-gradient(90deg,rgba(255,255,255,0),#ff7ad9 20%,#ffe066 40%,#fff 50%,#7ae0ff 60%,#b18cff 80%,rgba(255,255,255,0))}
.ppfx-gx.is-UR .ppfx-gx__r{background:repeating-conic-gradient(#ff7ad9 0 5deg,rgba(255,255,255,0) 5deg 12deg,#7ae0ff 12deg 17deg,rgba(255,255,255,0) 17deg 24deg,#ffe066 24deg 29deg,rgba(255,255,255,0) 29deg 36deg)}
/* 画面の揺れ（ガチャの所だけ） */
.ppfx-shake{animation:fx-shake .5s linear}
.ppfx-shake2{animation:fx-shake .7s linear 2}
@keyframes fx-shake{0%,100%{transform:none}10%{transform:translate(-6px,3px) rotate(-1deg)}20%{transform:translate(6px,-4px) rotate(1deg)}30%{transform:translate(-8px,2px)}40%{transform:translate(7px,4px) rotate(.8deg)}50%{transform:translate(-5px,-3px)}60%{transform:translate(4px,2px)}70%{transform:translate(-3px,-2px)}80%{transform:translate(2px,1px)}90%{transform:translate(-1px,0)}}
/* カードがめくれる・SR/UR は光る */
html.ppfx-gacha .g2__reveal{perspective:800px}
html.ppfx-gacha .g2__card.ppfx-flip{animation:fx-flip .6s cubic-bezier(.2,.8,.25,1.2) both;backface-visibility:hidden}
@keyframes fx-flip{0%{transform:rotateY(180deg) scale(.7);opacity:0}45%{opacity:1}100%{transform:none}}
html.ppfx-gacha .g2__card:is(.is-SR,.is-UR){position:relative;isolation:isolate}
html.ppfx-gacha .g2__card.is-SR{box-shadow:0 0 0 2px #ffd56b,0 0 22px rgba(255,200,80,.75)!important}
html.ppfx-gacha .g2__card.is-UR{box-shadow:0 0 0 2px #ff7ad9,0 0 26px rgba(255,120,220,.85),0 0 46px rgba(120,220,255,.5)!important}

/* ===== shine: 見出し・帯の光と、流れる色 ===== */
html.ppfx-shine .ppu-ph__plate{z-index:2}
/* 見出しの下に、色の線がすっと伸びる */
.ppfx-hl::after{content:"";display:block;height:3px;margin:5px 0 0;width:72px;border-radius:3px;background:linear-gradient(90deg,#ff7aa8,#a98ee0,#7ad3ff,#ffc24d);transform-origin:0 50%;transform:scaleX(.15);opacity:0}
.ppfx-hl.ppfx-v::after{animation:fx-line .9s cubic-bezier(.2,.9,.25,1.2) .1s forwards}
@keyframes fx-line{to{transform:none;opacity:1}}
/* 会員ランキングの見出し（灰色だった物）: 明るい色＋回るオーロラ＋光 */
html.ppfx-shine .rk-head{background:linear-gradient(135deg,#ff6fa5 0%,#a35cf0 50%,#ffb547 100%)!important;box-shadow:0 14px 34px -10px rgba(170,70,200,.6),inset 0 1px 0 rgba(255,255,255,.5)!important}
html.ppfx-shine .rk-head::before{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(70,10,90,.3))!important}
.ppfx-aur{position:absolute!important;left:50%;top:50%;width:170%;padding-top:170%;margin:-85% 0 0 -85%;pointer-events:none;z-index:0;border-radius:50%;opacity:.9;
	background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,240,180,.4),rgba(255,255,255,0) 25%,rgba(150,220,255,.35) 45%,rgba(255,255,255,0) 60%,rgba(255,170,220,.4) 80%,rgba(255,255,255,0))}
.ppfx-v>.ppfx-aur{animation:fx-spin 16s linear 2}
html.ppfx-shine .rk-head>.ppfx-gl{position:absolute!important;z-index:1}
html.ppfx-shine .rk-head h1{text-shadow:0 2px 0 rgba(120,30,90,.35),0 0 18px rgba(255,220,120,.7)!important}
/* ひろば・ゲーム一覧の箱 */
html.ppfx-shine .al-new{box-shadow:0 12px 30px -14px rgba(255,80,140,.55)}
html.ppfx-shine .al-rank{box-shadow:0 12px 30px -14px rgba(220,160,40,.6)}
/* カードは画面に入った時に一度だけ光が走る */
html.ppfx-shine .ppfx-sh1 .al-card__art::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 65%);transform:translateX(-110%);animation:fx-sweep 1.1s ease-out var(--sd,.15s) forwards}

/* ===== empty: 入っていない人に見える空っぽの画面 ===== */
.ppfx-join{position:relative;margin:14px 0 18px;padding:0 0 18px;border-radius:24px;overflow:hidden;text-align:center;background:linear-gradient(180deg,#fff,#fff4f8);
	box-shadow:0 0 0 1.5px #f6d3e0,0 18px 36px -16px rgba(200,90,140,.45);font-family:"Zen Maru Gothic",system-ui,sans-serif;color:#4a3a3f}
.ppfx-join__art{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#fbeef3}
.ppfx-join__art.is-wide{aspect-ratio:3/1}
.ppfx-join__t{margin:14px 16px 4px;font:500 21px/1.35 "Kiwi Maru","Zen Maru Gothic",serif;color:#5a3048}
.ppfx-join__s{margin:0 18px 14px;font-size:13.5px;line-height:1.75;color:#8a6e78}
.ppfx-join__b{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 16px;min-height:58px;border-radius:999px;font-weight:900;font-size:18px;letter-spacing:.04em;text-decoration:none!important;color:#fff!important;
	background:linear-gradient(180deg,#ff8db5,#e0578c 55%,#c9467a);box-shadow:0 10px 22px rgba(220,80,130,.45),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(120,20,60,.2);overflow:hidden}
.ppfx-join__b.ppfx-v{animation:fx-breath 2.4s ease-in-out 4}
@keyframes fx-breath{0%,100%{transform:none}50%{transform:scale(1.04)}}
.ppfx-join__n{display:block;margin:10px 0 0;font-size:11.5px;color:#a8908f}
html.ppfx-empty .ppfx-hide{display:none!important}
#rm .ppfx-join{margin:14px 12px 18px}

/* ===== top: ひろばのトップ（ヒーローと入口の格子） ===== */
html.ppfx-top .al-hero{position:relative;isolation:isolate;padding:18px 10px 16px;border-radius:24px;overflow:hidden;
	background:radial-gradient(120% 140% at 50% 0,#fff 0,#fff1f7 45%,#f3e9ff 100%);box-shadow:0 0 0 1.5px #f4d6e6,0 16px 34px -18px rgba(170,90,200,.55)}
html.ppfx-top .al-hero .ppfx-aur{opacity:.55}
html.ppfx-top .al-hero>:not(.ppfx-aur):not(.ppfx-tw){position:relative;z-index:1}
html.ppfx-top .al-hero .pp-logo{font-size:1.5em;filter:drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 6px 12px rgba(160,80,200,.35))}
html.ppfx-top .al-hero.ppfx-v .pp-logo{animation:fx-bob 3s ease-in-out 4}
@keyframes fx-bob{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-1deg)}}
html.ppfx-top .al-hero .ppfx-tw{width:14px;height:14px;z-index:2}
html.ppfx-top .al-hero.ppfx-v .ppfx-tw{animation:fx-tw 2.4s ease-in-out 5}
.ppfx-door{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
.ppfx-door a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 9px;border-radius:20px;text-decoration:none!important;color:#5a3048!important;font:900 12.5px/1.2 "Zen Maru Gothic",system-ui,sans-serif;
	background:linear-gradient(180deg,#fff,var(--b2,#ffeef5));box-shadow:0 0 0 1.5px var(--b3,#f6d3e0),0 10px 18px -10px var(--b4,rgba(220,90,140,.55));-webkit-tap-highlight-color:transparent;transition:transform .2s var(--fx-ease)}
.ppfx-door a:nth-child(2){--b2:#fff3dc;--b3:#f6dcae;--b4:rgba(230,150,40,.55)}
.ppfx-door a:nth-child(3){--b2:#e9fbf3;--b3:#bfe9d6;--b4:rgba(40,170,120,.5)}
.ppfx-door a:nth-child(4){--b2:#efeaff;--b3:#d7cdf6;--b4:rgba(130,100,220,.55)}
.ppfx-door img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(120,60,90,.25))}
.ppfx-door.ppfx-v img{animation:fx-bob 2.6s ease-in-out var(--d,0s) 3}
.ppfx-door a.is-press,.ppfx-door a:active{transform:scale(.93)}
@media (max-width:359px){.ppfx-door{gap:6px}.ppfx-door img{width:50px;height:50px}.ppfx-door a{font-size:11.5px}}

/* ===== 動きを減らす設定・印刷 ===== */
@media (prefers-reduced-motion:reduce){
	html.ppfx :is(.ppfx-nb,.ppfx-in,.ppfx-rv,.ppfx-nw,.ppfx-hot,.ppfx-crown,.ppu-n__ic,.ppu-n__badge,.ppu-ph__plate),html.ppfx :is(.ppfx-nw,.ppfx-hot,.ppu-n__ic,.ppu-ph__f)::before,html.ppfx :is(.ppfx-nw,.ppfx-hot,.ppu-n__ic)::after{animation:none!important;transition:none!important}
	html.ppfx .ppfx-rv{opacity:1!important;transform:none!important}
	.ppfx-gl,.ppfx-rays,.ppfx-tw,.ppfx-cf,.ppfx-plus,.ppfx-gx,.ppfx-aur{display:none!important}
	html.ppfx :is(.ppfx-cnt,.ppfx-flip,.ppfx-shake,.ppfx-shake2,.ppfx-join__b,.ppfx-door img,.pp-logo,.cmsocial-gifttoast__art),html.ppfx .ppfx-hl::after,html.ppfx .ppfx-sh1 .al-card__art::before{animation:none!important}
	.ppfx-hl::after{transform:none!important;opacity:1!important}
	html.ppfx-page::view-transition-old(root),html.ppfx-page::view-transition-new(root){animation:none!important}
}
@media print{.ppfx-gl,.ppfx-rays,.ppfx-tw,.ppfx-nb,.ppfx-cf,.ppfx-gx{display:none!important}}