/**
 * rinka-gacha-fx.css — 今日の一枚ガチャの演出（2026-09-26）
 * rinka-gacha-fx.js が作るオーバーレイ（.rgfx）と、ページ内の結果カードの飾り（.rgfx-deco）だけの見た目。
 * 既存の main.css / rinka-world-2026.css は触らず、ここで上に重ねる。
 */

/* ===== オーバーレイ全体 ===== */
.rgfx {
  --ink: #5a3a66;
  --cw: min(66vw, 320px, calc((100vh - 330px) * .714));
  --holo-o: .12;
  --glare-o: .25;
  position: fixed;
  inset: 0;
  z-index: 100000;
  color: var(--ink);
  opacity: 0;
  transition: opacity .28s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  line-height: 1.6;
  text-align: center;
}
@supports (height: 100dvh) {
  .rgfx { --cw: min(66vw, 320px, calc((100dvh - 330px) * .714)); }
}
.rgfx.is-in, .rgfx.is-reduced { opacity: 1; }
.rgfx.is-leaving { opacity: 0; pointer-events: none; }
.rgfx *, .rgfx *::before, .rgfx *::after { box-sizing: border-box; }

.rgfx--n  { --holo-o: .10; --glare-o: .22; }
.rgfx--r  { --holo-o: .16; --glare-o: .28; }
.rgfx--sr { --holo-o: .32; --glare-o: .38; }
.rgfx--ssr { --holo-o: .36; --glare-o: .42; }
.rgfx--secret { --holo-o: .40; --glare-o: .42; }

/* 背景（段階で色が深くなる：パステル → 夕焼けの金 → 闇と虹 → 星空） */
.rgfx__veil,
.rgfx__veil::before,
.rgfx__veil::after,
.rgfx__sky,
.rgfx__rays,
.rgfx__flash { position: absolute; inset: 0; pointer-events: none; }
.rgfx__veil {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 228, 240, .94) 45%, rgba(236, 222, 255, .95) 100%);
}
.rgfx__veil::before {
  content: "";
  background: radial-gradient(circle at 50% 40%, #6b3f55 0%, #3b2440 55%, #22152b 100%);
  opacity: 0;
  transition: opacity .6s ease;
}
.rgfx__veil::after {
  content: "";
  background: radial-gradient(circle at 50% 40%, #1d1330 0%, #0b0712 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.rgfx[data-step="2"] .rgfx__veil::before,
.rgfx--sr.is-revealed .rgfx__veil::before { opacity: .96; }
.rgfx[data-step="3"] .rgfx__veil::after,
.rgfx[data-step="4"] .rgfx__veil::after,
.rgfx--ssr.is-revealed .rgfx__veil::after { opacity: .97; }

/* 星空（SECRET） */
.rgfx__sky {
  opacity: 0;
  transition: opacity .9s ease;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, #fff8d6 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 28%, #d8ccff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 80%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 88%, #bfe6ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 42%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 90%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 50% 110%, rgba(140, 110, 255, .45), transparent 60%),
    linear-gradient(180deg, #0a0f2e 0%, #1b1244 55%, #2c1650 100%);
}
.rgfx__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 50%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 60%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 70%, #fff 50%, transparent 51%);
  background-size: 180px 180px;
  animation: rgfx-twinkle 2.4s ease-in-out infinite alternate;
}
.rgfx[data-step="5"] .rgfx__sky { opacity: 1; }
.rgfx[data-step="4"] .rgfx__sky { opacity: .35; }
.rgfx__sky i {
  position: absolute;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform: rotate(-28deg);
  opacity: 0;
  filter: drop-shadow(0 0 6px #fff);
}
.rgfx[data-step="5"] .rgfx__sky i { animation: rgfx-shoot 2.8s ease-in infinite; }
.rgfx__sky i:nth-child(1) { top: 10%; left: 60%; animation-delay: .1s !important; }
.rgfx__sky i:nth-child(2) { top: 22%; left: 20%; animation-delay: .9s !important; }
.rgfx__sky i:nth-child(3) { top: 6%;  left: 85%; animation-delay: 1.6s !important; }
.rgfx__sky i:nth-child(4) { top: 30%; left: 45%; animation-delay: 2.2s !important; }

/* 光のすじ（白 → 金 → 虹） */
.rgfx__rays {
  inset: auto;
  left: 50%;
  top: 40%;
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 9deg, rgba(255, 255, 255, .55) 9deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 42%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 42%);
  opacity: 0;
  transition: opacity .5s ease;
  animation: rgfx-spin 22s linear infinite;
}
.rgfx[data-step="1"] .rgfx__rays { opacity: .45; }
.rgfx[data-step="2"] .rgfx__rays,
.rgfx--sr.is-revealed .rgfx__rays {
  opacity: .9;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 110, 0) 0deg 8deg, rgba(255, 214, 110, .75) 8deg 11deg);
}
.rgfx[data-step="3"] .rgfx__rays,
.rgfx--ssr.is-revealed .rgfx__rays {
  opacity: 1;
  background: conic-gradient(from 0deg, #ff7fa8, #ffd76e, #9df2c8, #8fc9ff, #c9b3ff, #ff7fa8);
  -webkit-mask:
    repeating-conic-gradient(from 0deg, transparent 0deg 7deg, #000 7deg 11deg),
    radial-gradient(circle, #000 0%, transparent 44%);
  -webkit-mask-composite: source-in;
  mask:
    repeating-conic-gradient(from 0deg, transparent 0deg 7deg, #000 7deg 11deg) intersect,
    radial-gradient(circle, #000 0%, transparent 44%);
  animation-duration: 9s;
}
.rgfx[data-step="5"] .rgfx__rays {
  opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(200, 190, 255, 0) 0deg 10deg, rgba(220, 210, 255, .6) 10deg 12deg);
}

.rgfx__flash { background: #fff; opacity: 0; }
.rgfx.is-revealed .rgfx__flash { animation: rgfx-flash .55s ease-out both; }
.rgfx--ssr.is-revealed .rgfx__flash { background: radial-gradient(circle at 50% 40%, #fff 0%, #fff3d6 35%, #ffd6ec 60%, #d9ccff 100%); animation-duration: .8s; }
.rgfx--secret.is-revealed .rgfx__flash { background: radial-gradient(circle at 50% 40%, #fff 0%, #e6dcff 50%, #9fb4ff 100%); animation-duration: 1s; }
.rgfx.is-instant .rgfx__flash { animation-duration: .3s; }

/* 時間が止まる（SECRET） */
.rgfx.is-frozen .rgfx__body,
.rgfx.is-frozen .rgfx__rays { filter: saturate(.15) brightness(.9); }
.rgfx.is-frozen *,
.rgfx.is-frozen *::before,
.rgfx.is-frozen *::after { animation-play-state: paused !important; }
.rgfx.is-frozen .rgfx__caption { filter: none; letter-spacing: .3em; }

/* スキップ */
.rgfx__skip {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  min-width: 88px;
  min-height: 40px;
  padding: 6px 18px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(90, 58, 102, .55);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rgfx__skip:focus-visible { outline: 3px solid #ffd76e; outline-offset: 2px; }

/* ===== 中身のレイアウト ===== */
.rgfx__body {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.rgfx__stagebox { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rgfx__panel { width: min(92vw, 420px); min-height: 60px; }

/* レア度バッジ（表になったら出る） */
.rgfx__badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  background: linear-gradient(135deg, #7cc9a5, #a5e0c3);
  box-shadow: 0 6px 18px rgba(90, 58, 102, .25);
  opacity: 0;
  transform: translateY(8px) scale(.8);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.rgfx__badge b { font-size: 1.15em; }
.rgfx__badge span { font-size: .95em; letter-spacing: .05em; }
.rgfx.is-revealed .rgfx__badge { opacity: 1; transform: none; }
.rgfx--r .rgfx__badge { background: linear-gradient(135deg, #5aa7e0, #7fc3f2); }
.rgfx--sr .rgfx__badge { background: linear-gradient(135deg, #b388ff, #7c4dff); box-shadow: 0 0 0 2px #ffd76e, 0 0 24px rgba(255, 215, 110, .8); }
.rgfx--ssr .rgfx__badge {
  color: #6b4a12;
  background: linear-gradient(135deg, #fff1b8, #ffd76e 45%, #f0a93a);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px transparent, 0 0 30px rgba(255, 180, 240, .9);
  position: relative;
}
.rgfx--ssr .rgfx__badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(#ff7fa8, #ffd76e, #9df2c8, #8fc9ff, #c9b3ff, #ff7fa8);
  animation: rgfx-hue 3s linear infinite;
}
.rgfx--secret .rgfx__badge {
  background: linear-gradient(135deg, #2a1d5c, #6a4bd1 55%, #b69cff);
  box-shadow: 0 0 0 2px #e8e1ff, 0 0 30px rgba(190, 170, 255, .95);
}

/* ===== カード（ふうとう → 裏 → 表） ===== */
.rgfx__cardwrap {
  position: relative;
  width: var(--cw);
  min-width: 150px;
  aspect-ratio: 5 / 7;   /* 本物のカードと同じ比率（2026-10-01 制作者「実際のカードにして」）＝絵を切り取らずに全体を見せる */
  perspective: 1100px;
}
.rgfx__aura {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .5s ease, background .5s ease;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.rgfx[data-step="1"] .rgfx__aura { opacity: .9; animation: rgfx-breathe 1s ease-in-out infinite alternate; }
.rgfx[data-step="2"] .rgfx__aura,
.rgfx--sr.is-revealed .rgfx__aura { opacity: 1; background: radial-gradient(circle, rgba(255, 236, 170, 1) 0%, rgba(255, 200, 80, .55) 32%, rgba(255, 200, 80, 0) 64%); }
.rgfx[data-step="3"] .rgfx__aura,
.rgfx--ssr.is-revealed .rgfx__aura {
  opacity: 1;
  background: conic-gradient(from 0deg, rgba(255, 127, 168, .9), rgba(255, 215, 110, .9), rgba(157, 242, 200, .9), rgba(143, 201, 255, .9), rgba(201, 179, 255, .9), rgba(255, 127, 168, .9));
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 64%);
  mask: radial-gradient(circle, #000 20%, transparent 64%);
  filter: blur(8px);
  animation: rgfx-spin 4s linear infinite;
}
.rgfx[data-step="5"] .rgfx__aura,
.rgfx--secret.is-revealed .rgfx__aura { opacity: 1; background: radial-gradient(circle, rgba(235, 228, 255, 1) 0%, rgba(160, 140, 255, .55) 34%, rgba(120, 100, 255, 0) 66%); }

.rgfx__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease-out;
  touch-action: none;
}
.rgfx__tilt.is-tilting { transition: transform .06s linear; }
.rgfx__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform var(--flip-ms, 450ms) cubic-bezier(.22, .7, .18, 1);
}
.rgfx--n .rgfx__card, .rgfx--r .rgfx__card { transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
.rgfx.is-flipped .rgfx__card { transform: rotateY(var(--flip-deg, 180deg)); }
.rgfx--ssr.is-flipped .rgfx__card,
.rgfx--secret.is-flipped .rgfx__card { transform: rotateY(var(--flip-deg, 180deg)) translateZ(0); }
.rgfx.is-instant .rgfx__card,
.rgfx.is-instant .rgfx__half,
.rgfx.is-instant .rgfx__seal { transition-duration: 0s !important; }

.rgfx__face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 16px 40px rgba(60, 20, 60, .35);
}
.rgfx__face--back {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .8) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(circle at 75% 75%, rgba(255, 143, 181, .45) 0 2.5px, transparent 3.5px) 0 0 / 22px 22px,
    linear-gradient(160deg, #ffc9dc 0%, #ffe3ee 45%, #e3d4ff 100%);
}
.rgfx__backframe {
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 4px rgba(255, 143, 181, .35);
}
.rgfx__face--back .rgfx__crest { width: 52%; height: auto; filter: drop-shadow(0 4px 8px rgba(176, 82, 127, .35)); }
.rgfx__back-carrot { position: absolute; width: 16%; height: auto; }
.rgfx__back-carrot--a { left: 8%; bottom: 8%; transform: rotate(-20deg); }
.rgfx__back-carrot--b { right: 8%; top: 8%; transform: rotate(160deg); }

.rgfx__face--front { transform: rotateY(180deg); background: #fff; }
.rgfx__art { display: block; width: 100%; height: 100%; object-fit: cover; }
.rgfx__art--none { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #ffe3ee, #e3d4ff); }
.rgfx__art--none .rgfx__crest { width: 50%; }

/* ホロ加工（レアほど強い）＋光沢。--mx/--my はマウス・指の位置 */
.rgfx__holo,
.rgfx__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.rgfx__holo {
  opacity: var(--holo-o, .15);
  mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 119, 187, .6) 36%, rgba(125, 220, 255, .6) 46%, rgba(255, 240, 140, .6) 56%, rgba(190, 160, 255, .55) 64%, transparent 76%);
  background-size: 260% 260%;
  background-position: var(--mx, 50%) var(--my, 50%);
  animation: rgfx-holo-idle 5s ease-in-out infinite alternate;
}
.rgfx--ssr .rgfx__holo::after,
.rgfx--secret .rgfx__holo::after,
.rgfx-deco--ssr .rgfx__holo::after,
.rgfx-deco--secret .rgfx__holo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 .8px, transparent 1.3px);
  background-size: 17px 17px, 11px 11px;
  background-position: 0 0, 5px 7px;
  mix-blend-mode: screen;
  opacity: .85;
  -webkit-mask-image: linear-gradient(115deg, transparent 28%, #000 46%, #000 54%, transparent 72%);
  mask-image: linear-gradient(115deg, transparent 28%, #000 46%, #000 54%, transparent 72%);
  -webkit-mask-size: 260% 260%;
  mask-size: 260% 260%;
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%);
  mask-position: var(--mx, 50%) var(--my, 50%);
  animation: rgfx-glitter-idle 5s ease-in-out infinite alternate;
}
.is-tilting .rgfx__holo::after { animation: none; }
.is-tilting .rgfx__holo { animation: none; }
.rgfx__glare {
  opacity: var(--glare-o, .3);
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 18%), rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 48%);
}
.rgfx__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #a5e0c3;
}
.rgfx--r .rgfx__frame { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #7fc3f2; }
.rgfx--sr .rgfx__frame { box-shadow: inset 0 0 0 3px #ffe9a3, inset 0 0 0 6px #d9a93a, inset 0 0 0 8px #fff3c4, inset 0 0 22px rgba(255, 215, 110, .7); }
.rgfx--ssr .rgfx__frame,
.rgfx--secret .rgfx__frame {
  padding: 6px;
  box-shadow: none;
  background: conic-gradient(#ff7fa8, #ffd76e, #9df2c8, #8fc9ff, #c9b3ff, #ff7fa8);
  -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);
  animation: rgfx-hue 4s linear infinite;
}
.rgfx--secret .rgfx__frame { background: conic-gradient(#e8e1ff, #9fb4ff, #6a4bd1, #d6c8ff, #fff, #e8e1ff); animation: rgfx-starframe 2.4s ease-in-out infinite alternate; }
.rgfx.is-revealed .rgfx__face--front { box-shadow: 0 18px 50px rgba(60, 20, 60, .45), 0 0 0 1px rgba(255, 255, 255, .6); }
.rgfx--sr.is-revealed .rgfx__face--front { box-shadow: 0 18px 50px rgba(60, 20, 60, .45), 0 0 36px rgba(255, 215, 110, .75); }
.rgfx--ssr.is-revealed .rgfx__face--front { box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 46px rgba(255, 170, 230, .8); }
.rgfx--secret.is-revealed .rgfx__face--front { box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 50px rgba(180, 160, 255, .9); }

.rgfx__new {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5c93, #ff8fb5);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  box-shadow: 0 3px 10px rgba(255, 92, 147, .5);
  opacity: 0;
  transform: scale(.4) rotate(-12deg);
}
.rgfx.is-revealed .rgfx__new { animation: rgfx-pop .5s .35s cubic-bezier(.34, 1.56, .64, 1) forwards; }

/* ふうとう（カードパック）：左右にひらく＋うさ耳の封 */
.rgfx__pack {
  position: absolute;
  inset: -3%;
  pointer-events: none;
  transform: translateY(-40px) scale(.9);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.rgfx.is-in .rgfx__pack, .rgfx.is-reduced .rgfx__pack { transform: none; opacity: 1; }
.rgfx__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  border: 3px solid #fff;
  background:
    linear-gradient(180deg, transparent 36%, #ff8fb5 36%, #ff8fb5 46%, transparent 46%),
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .85) 0 2px, transparent 3px) 0 0 / 20px 20px,
    linear-gradient(160deg, #ffb3cd 0%, #ffd9e7 50%, #dccbff 100%);
  box-shadow: 0 14px 34px rgba(90, 58, 102, .3);
  transition: transform .38s cubic-bezier(.5, 0, .75, 0), opacity .38s ease-in;
}
.rgfx__half--l {
  left: 0;
  border-radius: 20px 4px 4px 20px;
  border-right: 0;
  background:
    linear-gradient(270deg, #ff8fb5 0, #ff8fb5 9%, transparent 9%),
    linear-gradient(180deg, transparent 36%, #ff8fb5 36%, #ff8fb5 46%, transparent 46%),
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .85) 0 2px, transparent 3px) 0 0 / 20px 20px,
    linear-gradient(160deg, #ffb3cd 0%, #ffd9e7 50%, #dccbff 100%);
}
.rgfx__half--r {
  right: 0;
  border-radius: 4px 20px 20px 4px;
  border-left: 0;
  background:
    linear-gradient(90deg, #ff8fb5 0, #ff8fb5 9%, transparent 9%),
    linear-gradient(180deg, transparent 36%, #ff8fb5 36%, #ff8fb5 46%, transparent 46%),
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .85) 0 2px, transparent 3px) 0 0 / 20px 20px,
    linear-gradient(200deg, #ffb3cd 0%, #ffd9e7 50%, #dccbff 100%);
}
.rgfx__seal {
  position: absolute;
  left: 50%;
  top: 41%;
  width: 36%;
  aspect-ratio: 1;
  margin: -18% 0 0 -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe3ee);
  border: 3px solid #ff8fb5;
  box-shadow: 0 6px 16px rgba(176, 82, 127, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.rgfx__seal .rgfx__crest { width: 82%; height: auto; }
.rgfx.is-shake .rgfx__pack { animation: rgfx-shake .5s ease-in-out infinite; }
.rgfx.is-shake[data-step="2"] .rgfx__pack { animation-duration: .32s; }
.rgfx.is-shake[data-step="3"] .rgfx__pack,
.rgfx.is-shake[data-step="5"] .rgfx__pack { animation: rgfx-shake-hard .18s linear infinite; }
.rgfx.is-open .rgfx__half--l { transform: translateX(-75%) rotate(-16deg); opacity: 0; }
.rgfx.is-open .rgfx__half--r { transform: translateX(75%) rotate(16deg); opacity: 0; }
.rgfx.is-open .rgfx__seal { transform: translateY(-60px) scale(1.5); opacity: 0; }
.rgfx.is-open .rgfx__pack { animation: none; }

/* 光るふち（出だしの共通演出） */
.rgfx[data-step="1"] .rgfx__half { box-shadow: 0 0 26px rgba(255, 255, 255, .95), 0 14px 34px rgba(90, 58, 102, .3); }
.rgfx[data-step="2"] .rgfx__half { box-shadow: 0 0 34px rgba(255, 215, 110, .95), 0 0 0 2px #ffd76e; }
.rgfx[data-step="3"] .rgfx__half,
.rgfx[data-step="4"] .rgfx__half { box-shadow: 0 0 40px rgba(255, 150, 220, .95), 0 0 0 2px #fff; animation: rgfx-rainbow-glow 1.2s linear infinite; }
.rgfx[data-step="5"] .rgfx__half { box-shadow: 0 0 44px rgba(190, 170, 255, 1), 0 0 0 2px #e8e1ff; }

/* “惜しい”の一拍（N/R）：金の輪が一瞬だけ */
.rgfx__glintring {
  position: absolute;
  inset: -7%;
  border-radius: 26px;
  border: 3px solid rgba(255, 215, 110, .95);
  box-shadow: 0 0 22px rgba(255, 215, 110, .8);
  opacity: 0;
  pointer-events: none;
}
.rgfx.is-glint .rgfx__glintring { animation: rgfx-glint .6s ease-out both; }

/* 相棒うさぎ（のぞきこむ） */
.rgfx__usagi {
  position: absolute;
  left: -8%;
  bottom: -6%;
  width: 26%;
  min-width: 52px;
  max-width: 76px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(90, 58, 102, .3);
  transform: translateY(30px) scale(.6);
  opacity: 0;
  transition: transform .5s .25s cubic-bezier(.34, 1.56, .64, 1), opacity .3s .25s ease;
  pointer-events: none;
}
.rgfx.is-in .rgfx__usagi { transform: none; opacity: 1; }
.rgfx.is-open .rgfx__usagi { animation: rgfx-hop .5s ease-out 2; }
.rgfx.is-revealed .rgfx__usagi { left: -10%; bottom: -8%; }

/* ===== 下のパネル ===== */
.rgfx__caption {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--ink);
  min-height: 1.6em;
  transition: color .4s ease;
}
.rgfx[data-step="2"] .rgfx__caption,
.rgfx[data-step="3"] .rgfx__caption,
.rgfx[data-step="4"] .rgfx__caption,
.rgfx[data-step="5"] .rgfx__caption { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .6); }
.rgfx__info {
  margin: 0 auto;
  padding: 14px 16px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px rgba(60, 20, 60, .25);
  animation: rgfx-rise .45s .15s cubic-bezier(.34, 1.4, .64, 1) both;
}
.rgfx__title { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rgfx__title b { font-size: 16px; }
.rgfx__chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rgfx__chip--new { background: #ffe3ee; color: #d63f78; }
.rgfx__chip--dupe { background: #eef0ff; color: #5b5fb0; }
.rgfx__talk { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.rgfx__face-img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #ffc9dc;
  object-fit: cover;
  background: #fff;
}
.rgfx__bubble {
  position: relative;
  margin: 4px 0 0;
  padding: 9px 14px;
  border-radius: 16px;
  background: #fff4f8;
  border: 1.5px solid #ffd1e2;
  font-size: 14.5px;
  line-height: 1.6;
}
.rgfx__bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 16px;
  border: 7px solid transparent;
  border-right-color: #ffd1e2;
  border-left: 0;
}
.rgfx__lead { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7; }
.rgfx__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 46px;
  padding: 8px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8fb5, #ff5c93);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  box-shadow: 0 8px 20px rgba(255, 92, 147, .4);
  cursor: pointer;
}
.rgfx__close:focus-visible { outline: 3px solid #ffd76e; outline-offset: 3px; }
.rgfx__close img { width: 26px; height: 26px; }
.rgfx__hint { margin: 8px 0 0; font-size: 11.5px; opacity: .7; }

/* ===== スマホ横持ち・低い画面：左右ならび ===== */
@media (orientation: landscape) and (max-height: 560px) {
  .rgfx { --cw: min(34vw, calc((100vh - 96px) * .714)); }
  @supports (height: 100dvh) { .rgfx { --cw: min(34vw, calc((100dvh - 96px) * .714)); } }
  .rgfx__body {
    flex-direction: row;
    gap: 28px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 110px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 24px);
  }
  .rgfx__stagebox { gap: 8px; }
  .rgfx__rays { top: 50%; left: 36%; }
  .rgfx__badge { padding: 4px 16px; }
  .rgfx__panel { width: min(48vw, 400px); }
  .rgfx__info { padding: 10px 14px; }
  .rgfx__close { margin-top: 8px; min-height: 42px; }
  .rgfx__hint { display: none; }
}
/* 小さい縦画面（iPhone SE など） */
@media (max-height: 700px) and (orientation: portrait) {
  .rgfx { --cw: min(60vw, 250px, calc((100vh - 300px) * .714)); }
  .rgfx__body { gap: 8px; padding-top: calc(env(safe-area-inset-top, 0px) + 52px); }
  .rgfx__hint { display: none; }
}

/* 動きを減らす設定 */
.rgfx.is-reduced *,
.rgfx.is-reduced *::before,
.rgfx.is-reduced *::after { animation: none !important; transition-duration: .01s !important; }
.rgfx.is-reduced .rgfx__info { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rgfx-deco .rgfx__holo { animation: none; }
}

/* ===== ページ内の結果カードの飾り（ホロ・傾き・NEW） ===== */
.rinka-gacha__card.rgfx-deco {
  --holo-o: .10;
  --glare-o: .2;
  position: relative;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease-out;
  touch-action: pan-y;
}
.rinka-gacha__card.rgfx-deco.is-tilting { transition: transform .06s linear; }
.rinka-gacha__card.rgfx-deco:hover { transform: perspective(800px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.rgfx-deco--r   { --holo-o: .15 !important; --glare-o: .24 !important; }
.rgfx-deco--sr  { --holo-o: .30 !important; --glare-o: .32 !important; }
.rgfx-deco--ssr { --holo-o: .32 !important; --glare-o: .36 !important; }
.rgfx-deco--secret { --holo-o: .34 !important; --glare-o: .36 !important; }
.rgfx-deco .rinka-gacha__thumb { position: relative; }
.rgfx-deco .rgfx__holo, .rgfx-deco .rgfx__glare { border-radius: 0; }
.rgfx-deco--sr { box-shadow: 0 0 0 1px #ffd76e, 0 10px 26px rgba(255, 200, 80, .35); }
.rgfx-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, #ff5c93, #ff8fb5);
  box-shadow: 0 3px 8px rgba(255, 92, 147, .45);
  animation: rgfx-pop .5s .2s cubic-bezier(.34, 1.56, .64, 1) both;
}
.rgfx-tag--dupe { background: linear-gradient(135deg, #7c83d9, #a8aef0); box-shadow: 0 3px 8px rgba(90, 90, 180, .4); }

/* お試し再生バー（?gachafx=…のときだけ） */
.rgfx-demo {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 99990;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-size: 12px;
  text-align: center;
}
.rgfx-demo p { margin: 0 0 6px; font-weight: 700; color: #5a3a66; }
.rgfx-demo div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rgfx-demo button {
  min-height: 34px;
  padding: 4px 12px;
  border: 1.5px solid #ffc9dc;
  border-radius: 999px;
  background: #fff;
  color: #5a3a66;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ===== keyframes ===== */
@keyframes rgfx-spin { to { transform: rotate(360deg); } }
@keyframes rgfx-hue { to { filter: hue-rotate(360deg); } }
@keyframes rgfx-flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }
@keyframes rgfx-breathe { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes rgfx-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.2deg) translateY(-2px); }
  75% { transform: rotate(2.2deg) translateY(-2px); }
}
@keyframes rgfx-shake-hard {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-3px, 1px) rotate(-1.5deg); }
  50% { transform: translate(2px, -2px) rotate(1deg); }
  75% { transform: translate(3px, 1px) rotate(1.5deg); }
}
@keyframes rgfx-glint {
  0% { opacity: 0; transform: scale(.94); }
  35% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.1); }
}
@keyframes rgfx-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
}
@keyframes rgfx-pop { to { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes rgfx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rgfx-holo-idle {
  0% { background-position: 20% 20%; }
  100% { background-position: 80% 80%; }
}
@keyframes rgfx-glitter-idle {
  0% { -webkit-mask-position: 15% 15%; mask-position: 15% 15%; }
  100% { -webkit-mask-position: 85% 85%; mask-position: 85% 85%; }
}
@keyframes rgfx-rainbow-glow {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 127, 168, .95), 0 0 0 2px #fff; }
  25% { box-shadow: 0 0 40px rgba(255, 215, 110, .95), 0 0 0 2px #fff; }
  50% { box-shadow: 0 0 40px rgba(143, 201, 255, .95), 0 0 0 2px #fff; }
  75% { box-shadow: 0 0 40px rgba(201, 179, 255, .95), 0 0 0 2px #fff; }
}
@keyframes rgfx-starframe { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes rgfx-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes rgfx-shoot {
  0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
  8% { opacity: 1; }
  30% { opacity: 0; transform: rotate(-28deg) translateX(-320px); }
  100% { opacity: 0; transform: rotate(-28deg) translateX(-320px); }
}

/* ==========================================================================
 * ガチャガチャ演出（2026-09-30）— .rgfx--capsule
 * 前段：機械がぽんと出る → コインが飛んでスロットへ → レバーがまわる（ガラガラ）
 *       → 出口からカプセルが出て、弾んで、転がって手前へ → 機械が消える
 * そのあとは今までの昇格演出（白→金→虹→星空）。カプセルがひらいてカードが出てくる。
 * アニメは transform / opacity / filter と個別プロパティ（translate / rotate / scale）だけ。
 * 機械の絵は 768×960。位置は絵の中のパーセントで決めている（rinka-gacha-fx.js の DOME_CAPS も同じ座標系）。
 * ========================================================================== */
.rgfx__machine { display: none; }
.rgfx--capsule .rgfx__machine {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.rgfx--capsule .rgfx__mach-in {
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 960;
  transform: translateY(46px) scale(.88);
  opacity: 0;
  transform-origin: 50% 92%;
  will-change: transform, opacity;
}
.rgfx.is-in.rgfx--capsule .rgfx__mach-in { animation: rgfx-mach-in .85s cubic-bezier(.34, 1.45, .55, 1) .1s both; }
.rgfx.rgfx--capsule.is-machgone .rgfx__mach-in { animation: rgfx-mach-gone .7s cubic-bezier(.5, 0, .75, .4) both; }
.rgfx.is-revealed .rgfx__machine { display: none; }
@keyframes rgfx-mach-in {
  0%   { transform: translateY(46px) scale(.88, .9); opacity: 0; }
  45%  { opacity: 1; }
  62%  { transform: translateY(-6px) scale(.97, 1.04); }
  82%  { transform: translateY(2px) scale(1.02, .98); }
  100% { transform: none; opacity: 1; }
}
@keyframes rgfx-mach-gone {
  0%   { transform: none; opacity: 1; filter: none; }
  100% { transform: translateY(30px) scale(.94); opacity: 0; filter: blur(3px); }
}
/* レバーをまわしている間、機械がガタガタ（個別プロパティ＝ポップインの transform と同時に動かせる） */
.rgfx.is-rattle .rgfx__mach-in { animation: rgfx-mach-rattle .11s linear infinite; }
@keyframes rgfx-mach-rattle {
  0%   { translate: 0 0; rotate: 0deg; }
  25%  { translate: 1.2px -1px; rotate: -.5deg; }
  50%  { translate: -1px 0; rotate: .4deg; }
  75%  { translate: .8px 1px; rotate: -.3deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
.rgfx__mach-body { display: block; position: relative; z-index: 1; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.rgfx__mach-dome { position: absolute; inset: 0; z-index: 0; }

/* ドームの中のカプセル */
.rgfx__mc { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
.rgfx.is-rattle .rgfx__mc { animation: rgfx-mc-tumble .2s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0ms) * -1); }
@keyframes rgfx-mc-tumble {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: calc(var(--j, 1) * 9%) -34%; rotate: calc(var(--j, 1) * 26deg); }
}

/* カプセル（ドームの中・出口から出るもの・ひらくもの 全部おなじ部品） */
.rgfx__cap { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.rgfx__cap-top, .rgfx__cap-bot { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; }
.rgfx__cap-top { height: 54%; }
.rgfx__cap-bot { height: 61%; }
.rgfx__cap-bot {
  bottom: 0;
  background-image: var(--img-cap-bot);
  background-size: 104.5% 158%;
  background-position: 45.4% 78.8%;
  z-index: 0;
}
.rgfx__cap-top {
  top: 0;
  background-image: var(--img-cap-top);
  background-size: 100% 152.4%;
  background-position: 0 44.3%;
  filter: hue-rotate(var(--h, 0deg));
  z-index: 2;
}
.rgfx__cap-core {
  position: absolute;
  left: 12%;
  top: 22%;
  width: 76%;
  height: 56%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
}

/* スロット（コイン投入口）とコイン */
.rgfx__mach-slot {
  position: absolute;
  left: 43.4%;
  top: 53.9%;
  width: 13.2%;
  height: 2.9%;
  z-index: 2;
  border-radius: 999px;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 14px 4px rgba(255, 235, 150, .95);
}
.rgfx.is-slotflash .rgfx__mach-slot { animation: rgfx-slot-flash .5s ease-out both; }
@keyframes rgfx-slot-flash { 0% { opacity: 0; transform: scaleX(.6); } 25% { opacity: .95; transform: scaleX(1.25); } 100% { opacity: 0; transform: scaleX(1.5); } }
.rgfx__mach-coin {
  position: absolute;
  left: 44%;
  top: 50.4%;
  width: 12%;
  height: auto;
  z-index: 3;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(90, 58, 102, .3));
}
.rgfx.is-coin .rgfx__mach-coin { animation: rgfx-coin .52s cubic-bezier(.4, .3, .5, 1) both; }
@keyframes rgfx-coin {
  0%   { transform: translate(340%, -600%) perspective(500px) rotateY(0deg) rotate(18deg) scale(1.2); opacity: 0; }
  12%  { opacity: 1; }
  62%  { transform: translate(40%, -130%) perspective(500px) rotateY(540deg) rotate(-6deg) scale(1.02); opacity: 1; }
  82%  { transform: translate(0, -44%) perspective(500px) rotateY(630deg) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(0, 38%) perspective(500px) rotateY(630deg) scale(1, .7); opacity: 0; }
}

/* レバー（星のつまみ）：いったん逆にためて → ぐるっと一周 */
.rgfx__mach-lever {
  position: absolute;
  left: 34.65%;
  top: 50.7%;
  width: 30.7%;
  height: auto;
  z-index: 3;
  transform-origin: 50% 59.6%;
  filter: drop-shadow(0 6px 6px rgba(90, 40, 100, .28));
}
.rgfx.is-lever .rgfx__mach-lever { animation: rgfx-lever 1.15s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes rgfx-lever {
  0%   { transform: rotate(0deg) scale(1); }
  12%  { transform: rotate(-16deg) scale(.95); }
  100% { transform: rotate(360deg) scale(1); }
}

/* カプセル（ひらく1個）：出口 → 弾む → 転がって手前へ */
.rgfx--capsule .rgfx__cap--main {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  margin: -29% 0 0 -29%;
  filter: drop-shadow(0 12px 14px rgba(90, 58, 102, .3));
}
.rgfx--themed .rgfx__tilt { z-index: 2; }
.rgfx--themed .rgfx__pack { z-index: 3; }
.rgfx.is-in.rgfx--capsule:not(.is-capout) .rgfx__pack { opacity: 0; }
.rgfx.rgfx--capsule.is-capout .rgfx__pack { opacity: 1; }
.rgfx--capsule .rgfx__cardwrap { margin: calc(var(--cw) * .07) 0 calc(var(--cw) * .13); }
.rgfx--capsule .rgfx__glintring { border-radius: 50%; inset: 12%; }
.rgfx__mc { filter: saturate(1.45) contrast(1.05); }
.rgfx.rgfx--capsule.is-capout:not(.is-shake):not(.is-open) .rgfx__pack { animation: rgfx-cap-drop 1.5s both; }
@keyframes rgfx-cap-drop {
  0%   { transform: translate(0, calc(var(--cw) * .44)) scale(.36) rotate(0deg); opacity: 0; animation-timing-function: ease-out; }
  7%   { transform: translate(0, calc(var(--cw) * .5)) scale(.37) rotate(6deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, 1, .8); }
  24%  { transform: translate(0, calc(var(--cw) * .72)) scale(.54) rotate(40deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  34%  { transform: translate(0, calc(var(--cw) * .56)) scale(.52) rotate(72deg); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  43%  { transform: translate(0, calc(var(--cw) * .72)) scale(.55) rotate(112deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  50%  { transform: translate(0, calc(var(--cw) * .66)) scale(.54) rotate(132deg); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  56%  { transform: translate(0, calc(var(--cw) * .72)) scale(.56) rotate(152deg); animation-timing-function: linear; }
  62%  { transform: translate(0, calc(var(--cw) * .72)) scale(.56) rotate(160deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 1; }
}

/* ひらく前の光：カプセルの中が、すけて光る（段階でいろが変わる） */
.rgfx[data-step="1"] .rgfx__cap--main { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .95)) drop-shadow(0 12px 14px rgba(90, 58, 102, .25)); }
.rgfx[data-step="1"] .rgfx__cap--main .rgfx__cap-core { opacity: .9; }
.rgfx[data-step="2"] .rgfx__cap--main { filter: drop-shadow(0 0 26px rgba(255, 215, 110, .98)); }
.rgfx[data-step="2"] .rgfx__cap--main .rgfx__cap-core { opacity: 1; background: radial-gradient(circle, #fff6cc 0%, rgba(255, 210, 90, .8) 40%, rgba(255, 210, 90, 0) 72%); }
.rgfx[data-step="3"] .rgfx__cap--main, .rgfx[data-step="4"] .rgfx__cap--main { animation: rgfx-cap-rainbow 1.2s linear infinite; }
.rgfx[data-step="3"] .rgfx__cap--main .rgfx__cap-core, .rgfx[data-step="4"] .rgfx__cap--main .rgfx__cap-core {
  opacity: 1;
  background: conic-gradient(rgba(255, 127, 168, .95), rgba(255, 215, 110, .95), rgba(157, 242, 200, .95), rgba(143, 201, 255, .95), rgba(201, 179, 255, .95), rgba(255, 127, 168, .95));
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 72%); mask: radial-gradient(circle, #000 28%, transparent 72%);
  animation: rgfx-spin 2.4s linear infinite;
}
.rgfx[data-step="5"] .rgfx__cap--main { filter: drop-shadow(0 0 30px rgba(190, 170, 255, 1)); }
.rgfx[data-step="5"] .rgfx__cap--main .rgfx__cap-core { opacity: 1; background: radial-gradient(circle, #f0eaff 0%, rgba(150, 130, 255, .8) 42%, rgba(150, 130, 255, 0) 72%); }
@keyframes rgfx-cap-rainbow {
  0%   { filter: drop-shadow(0 0 28px #ff7fa8); }
  25%  { filter: drop-shadow(0 0 28px #ffd76e); }
  50%  { filter: drop-shadow(0 0 28px #9df2c8); }
  75%  { filter: drop-shadow(0 0 28px #8fc9ff); }
  100% { filter: drop-shadow(0 0 28px #ff7fa8); }
}

/* ひらく：上半分がぱかっと飛んで、下半分がすとんと落ちる。中の光がぱっとひろがる */
.rgfx--capsule .rgfx__cap--main .rgfx__cap-top { transition: translate .55s cubic-bezier(.15, .8, .25, 1), rotate .55s cubic-bezier(.15, .8, .25, 1), opacity .4s ease .12s; }
.rgfx--capsule .rgfx__cap--main .rgfx__cap-bot { transition: translate .6s cubic-bezier(.4, 0, .8, .5) .05s, rotate .6s ease .05s, opacity .45s ease .14s; }
.rgfx--capsule.is-open .rgfx__cap--main .rgfx__cap-top { translate: -16% -170%; rotate: -34deg; opacity: 0; }
.rgfx--capsule.is-open .rgfx__cap--main .rgfx__cap-bot { translate: 6% 70%; rotate: 8deg; opacity: 0; }
.rgfx--capsule.is-open .rgfx__cap--main { filter: none; }
.rgfx--capsule.is-open .rgfx__cap--main .rgfx__cap-core { animation: rgfx-cap-burst .8s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rgfx-cap-burst { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.rgfx.is-instant .rgfx__cap-top, .rgfx.is-instant .rgfx__cap-bot { transition-duration: 0s !important; transition-delay: 0s !important; }

/* カードは、カプセルがひらくまで見せない。ひらいたら中からふわっと出てくる */
.rgfx--themed:not(.is-open):not(.rgfx--balloon) .rgfx__tilt { opacity: 0; }
.rgfx--themed.is-open:not(.rgfx--balloon) .rgfx__tilt { animation: rgfx-card-emerge .7s cubic-bezier(.2, .9, .25, 1.15) both; }
.rgfx--themed.is-instant .rgfx__tilt { animation-duration: .01s; }
@keyframes rgfx-card-emerge {
  0%   { scale: .28; translate: 0 10%; opacity: 0; }
  35%  { opacity: 1; }
  100% { scale: 1; translate: 0 0; opacity: 1; }
}

/* 機械が地面に立っている影（ぽんと置かれる時にいっしょに出る） */
.rgfx--capsule .rgfx__mach-in::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -1.5%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90, 58, 102, .28) 0%, rgba(90, 58, 102, 0) 70%);
  z-index: 0;
}

/* ==========================================================================
 * ガラポン（福引）／宝箱／風船 の演出（2026-10-01）— .rgfx--garapon / --chest / --balloon
 * 考えかたはガチャガチャと同じ：前段（そのテーマの登場）→ いつもの昇格演出（白→金→虹→星空）→ ひらいてカードが出る。
 * ========================================================================== */

/* ---- ガラポン：機械（640×640）＋レバーの星つまみ（軸）＋白い玉に色を重ねる ---- */
.rgfx--garapon .rgfx__machine {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 115%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.rgfx--garapon .rgfx__mach-in {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform: translateY(46px) scale(.88);
  opacity: 0;
  transform-origin: 50% 92%;
  will-change: transform, opacity;
}
.rgfx.is-in.rgfx--garapon .rgfx__mach-in { animation: rgfx-mach-in .85s cubic-bezier(.34, 1.45, .55, 1) .1s both; }
.rgfx.rgfx--garapon.is-machgone .rgfx__mach-in { animation: rgfx-mach-gone .7s cubic-bezier(.5, 0, .75, .4) both; }
.rgfx--garapon .rgfx__mach-in::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -1%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90, 58, 102, .28) 0%, rgba(90, 58, 102, 0) 70%);
  z-index: 0;
}
.rgfx__gcrank {
  left: 36.7%;
  top: 30.3%;
  width: 26%;
}
.rgfx.is-crank .rgfx__gcrank { animation: rgfx-gcrank 1.7s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes rgfx-gcrank {
  0%   { transform: rotate(0deg) scale(1); }
  10%  { transform: rotate(-18deg) scale(.95); }
  100% { transform: rotate(720deg) scale(1); }
}
.rgfx--garapon .rgfx__cardwrap { margin: calc(var(--cw) * .07) 0 calc(var(--cw) * .13); }
.rgfx__gball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  margin: -23% 0 0 -23%;
  aspect-ratio: 1;
  filter: drop-shadow(0 12px 12px rgba(90, 58, 102, .3));
}
.rgfx__gball img { display: block; position: relative; width: 100%; height: 100%; }
.rgfx__gball i {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 34% 28%, #fff 0, #fff 12%, var(--bc, #ff9ec4) 42%, var(--bc, #ff9ec4) 100%);
  -webkit-mask: url(../img/gacha/machine/garapon_ball.webp) center / 100% 100% no-repeat;
  mask: url(../img/gacha/machine/garapon_ball.webp) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}
.rgfx__gball::after {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 65%);
  opacity: 0;
}
.rgfx.is-in.rgfx--garapon:not(.is-capout) .rgfx__pack { opacity: 0; }
.rgfx.rgfx--garapon.is-capout .rgfx__pack { opacity: 1; }
.rgfx.rgfx--garapon.is-capout:not(.is-shake):not(.is-open) .rgfx__pack { animation: rgfx-ball-drop 1.4s both; }
@keyframes rgfx-ball-drop {
  0%   { transform: translate(0, calc(var(--cw) * .3)) scale(.3) rotate(0deg); opacity: 0; animation-timing-function: ease-out; }
  8%   { transform: translate(0, calc(var(--cw) * .34)) scale(.32) rotate(20deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, 1, .8); }
  26%  { transform: translate(0, calc(var(--cw) * .66)) scale(.5) rotate(120deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  36%  { transform: translate(0, calc(var(--cw) * .5)) scale(.48) rotate(180deg); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  46%  { transform: translate(0, calc(var(--cw) * .66)) scale(.5) rotate(260deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  53%  { transform: translate(0, calc(var(--cw) * .6)) scale(.49) rotate(300deg); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  60%  { transform: translate(0, calc(var(--cw) * .66)) scale(.5) rotate(340deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { transform: translate(0, 0) scale(1) rotate(720deg); opacity: 1; }
}
.rgfx[data-step="1"] .rgfx__gball { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .95)); }
.rgfx[data-step="2"] .rgfx__gball { filter: drop-shadow(0 0 26px rgba(255, 215, 110, .98)); }
.rgfx[data-step="3"] .rgfx__gball, .rgfx[data-step="4"] .rgfx__gball { animation: rgfx-cap-rainbow 1.2s linear infinite; }
.rgfx[data-step="5"] .rgfx__gball { filter: drop-shadow(0 0 30px rgba(190, 170, 255, 1)); }
.rgfx--garapon.is-open .rgfx__gball { filter: none; animation: rgfx-ball-pop .55s cubic-bezier(.2, .8, .3, 1) both; }
.rgfx--garapon.is-open .rgfx__gball::after { animation: rgfx-cap-burst .8s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rgfx-ball-pop {
  0%   { transform: scale(1); opacity: 1; }
  25%  { transform: scale(1.22, .9); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---- 宝箱：どしんと落ちる → カギがきらり → ひらいて光があふれる ---- */
.rgfx__chest {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 82%;
  margin: -41% 0 0 -41%;
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 14px rgba(90, 58, 102, .3));
}
.rgfx__chest img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rgfx__chest-o { opacity: 0; transform-origin: 50% 85%; }
.rgfx__chest-c { transition: opacity .12s ease; }
.rgfx__chest-beam {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 42%;
  height: 160%;
  background: linear-gradient(to top, rgba(255, 250, 200, .95), rgba(255, 250, 200, 0));
  clip-path: polygon(8% 100%, 92% 100%, 100% 0, 0 0);
  opacity: 0;
  transform-origin: 50% 100%;
}
.rgfx__chest-glint {
  position: absolute;
  left: 43%;
  top: 55%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 240, 150, 0) 70%);
  opacity: 0;
}
.rgfx.is-in.rgfx--chest:not(.is-capout) .rgfx__pack { opacity: 0; }
.rgfx.rgfx--chest.is-capout .rgfx__pack { opacity: 1; }
.rgfx.rgfx--chest.is-capout:not(.is-shake):not(.is-open) .rgfx__pack { animation: rgfx-chest-drop 1.15s both; }
@keyframes rgfx-chest-drop {
  0%   { transform: translate(0, calc(var(--cw) * -1.7)) rotate(-5deg) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .7); opacity: 1; }
  52%  { transform: translate(0, 0) rotate(0deg) scale(1.08, .9); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  62%  { transform: translate(0, calc(var(--cw) * -.12)) scale(.98, 1.04); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  74%  { transform: translate(0, 0) scale(1.04, .96); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  86%  { transform: translate(0, calc(var(--cw) * -.035)) scale(1); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.rgfx.is-lockglint .rgfx__chest-glint { animation: rgfx-glint2 .8s ease-out both; }
@keyframes rgfx-glint2 { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.2); } }
.rgfx[data-step="1"] .rgfx__chest { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .95)) drop-shadow(0 14px 14px rgba(90, 58, 102, .2)); }
.rgfx[data-step="2"] .rgfx__chest { filter: drop-shadow(0 0 26px rgba(255, 215, 110, .98)); }
.rgfx[data-step="3"] .rgfx__chest, .rgfx[data-step="4"] .rgfx__chest { animation: rgfx-cap-rainbow 1.2s linear infinite; }
.rgfx[data-step="5"] .rgfx__chest { filter: drop-shadow(0 0 30px rgba(190, 170, 255, 1)); }
.rgfx--chest.is-open .rgfx__chest { filter: none; }
.rgfx--chest.is-open .rgfx__chest-c { opacity: 0; }
.rgfx--chest.is-open .rgfx__chest-o { opacity: 1; animation: rgfx-chest-pop .55s cubic-bezier(.2, .9, .3, 1.3) both; }
.rgfx--chest.is-open .rgfx__chest-beam { animation: rgfx-beam 1.3s ease-out both; }
.rgfx.rgfx--chest.is-open .rgfx__pack { animation: rgfx-fade-late .5s 1.05s both; }
@keyframes rgfx-chest-pop { 0% { transform: scale(.94, 1.04); } 50% { transform: scale(1.06, .96); } 100% { transform: scale(1); } }
@keyframes rgfx-beam { 0% { opacity: 0; transform: scaleY(.1); } 25% { opacity: 1; transform: scaleY(1); } 100% { opacity: .35; transform: scaleY(1.15); } }
@keyframes rgfx-fade-late { from { opacity: 1; } to { opacity: 0; } }

/* ---- 風船：ふわふわおりてくる → ゆれる → ぱんっ（風船がとんでいく） ---- */
.rgfx__bunch {
  position: absolute;
  left: 11.3%;
  top: -42.3%;
  width: 77.4%;
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(90, 58, 102, .22));
}
.rgfx--balloon .rgfx__pack { transform-origin: 50% 10%; z-index: 3; }
.rgfx--balloon .rgfx__tilt { z-index: 2; transform-origin: 50% 7.5%; }
.rgfx--balloon:not(.is-capout) .rgfx__tilt { opacity: 0; }
.rgfx.is-in.rgfx--balloon:not(.is-capout) .rgfx__pack { opacity: 0; }
.rgfx.rgfx--balloon.is-capout .rgfx__pack { opacity: 1; animation: rgfx-bal-down 2.4s both; }
.rgfx.rgfx--balloon.is-capout .rgfx__tilt { opacity: 1; animation: rgfx-bal-down 2.4s both; }
@keyframes rgfx-bal-down {
  0%   { translate: 0 calc(var(--cw) * -2.3); rotate: -7deg; animation-timing-function: cubic-bezier(.3, .4, .3, 1); }
  58%  { translate: 0 calc(var(--cw) * .07); rotate: 5deg; animation-timing-function: ease-in-out; }
  74%  { translate: 0 calc(var(--cw) * -.05); rotate: -3deg; animation-timing-function: ease-in-out; }
  88%  { translate: 0 calc(var(--cw) * .02); rotate: 1.4deg; animation-timing-function: ease-in-out; }
  100% { translate: 0 0; rotate: 0deg; }
}
.rgfx[data-step="1"] .rgfx__bunch { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .95)); }
.rgfx[data-step="2"] .rgfx__bunch { filter: drop-shadow(0 0 26px rgba(255, 215, 110, .98)); }
.rgfx[data-step="3"] .rgfx__bunch, .rgfx[data-step="4"] .rgfx__bunch { animation: rgfx-cap-rainbow 1.2s linear infinite; }
.rgfx[data-step="5"] .rgfx__bunch { filter: drop-shadow(0 0 30px rgba(190, 170, 255, 1)); }
.rgfx.rgfx--balloon.is-open .rgfx__pack { animation: rgfx-bunch-away 1.1s cubic-bezier(.3, 0, .6, 1) both; }
.rgfx.rgfx--balloon.is-open .rgfx__tilt { animation: none; transform-origin: 50% 50%; }
@keyframes rgfx-bunch-away {
  0%   { translate: 0 0; scale: 1; opacity: 1; }
  20%  { translate: 0 calc(var(--cw) * .05); scale: 1.06; opacity: 1; }
  100% { translate: 0 calc(var(--cw) * -2.6); scale: 1.12; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rgfx--garapon .rgfx__machine { display: none; }
}

/* ===== スマホは、すぐ押せる大きなスキップ（親指が届く下側・2026-10-01） ===== */
.rgfx.has-skip-phone .rgfx__skip {
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  min-width: 168px;
  min-height: 52px;
  padding: 10px 28px;
  font-size: 16px;
  letter-spacing: .1em;
  background: rgba(90, 58, 102, .72);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(40, 20, 60, .3);
}
.rgfx.has-skip-phone .rgfx__skip::after { content: " »"; font-weight: 800; }
.rgfx.has-skip-phone .rgfx__skip:active { transform: translateX(-50%) scale(.96); }
.rgfx.has-skip-phone .rgfx__body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
.rgfx.has-skip-phone.is-revealed .rgfx__body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }