/* ============================================================
   りんかのスロット（2026-10-01）— #rinka-slot-app の中だけに効く。夜のカードテーブルの続き。
   - 6列×7行の盤面。絵のタイルは transform だけで動かす（入れかえ・落下・消える・はずむ）。
   - スロット（3つのリール）・連鎖の文字・大当たりのバナー。
   - 絵文字は使わない（記号はインラインSVG）。押す所は 44px 以上。prefers-reduced-motion では止める。
   ============================================================ */

.rinka-cg-slot .sl-sym { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sl-helpbtn .sl-q { font-weight: 900; font-size: 20px; line-height: 1; font-family: var(--cg-num); }
.sl-streak { margin: 0 0 10px; font-size: 12.5px; color: var(--cg-gold); font-weight: 700; text-align: center; }
.sl-help__syms { display: flex; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.sl-help__syms .sl-sym { width: 36px; height: 36px; }
.rinka-cg-slot .rinka-cg-tier.is-ex { background: linear-gradient(135deg, rgba(247, 207, 115, .26), rgba(255, 143, 189, .26)); box-shadow: inset 0 0 0 1.5px rgba(247, 207, 115, .6); }

/* ---------- 上の数字 ---------- */
.sl-hud { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin: 2px 0 8px; }
.sl-hud small { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--cg-soft); font-weight: 700; }
.sl-hud b { font-family: var(--cg-num); font-weight: 700; line-height: 1.05; display: inline-block; }
.sl-hud__score b { font-size: 34px; color: var(--cg-gold); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.sl-hud__moves { text-align: right; }
.sl-hud__moves b { font-size: 34px; color: var(--cg-cream); }
.sl-hud__moves b.is-low { color: #ff9aa8; animation: sl-pulse .7s ease-in-out infinite alternate; }
.sl-hud b.is-bump { animation: sl-bump .3s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes sl-bump { from { transform: scale(1.22); } }
@keyframes sl-pulse { to { transform: scale(1.12); } }
.sl-goal { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sl-goal__bar { position: relative; flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: visible; }
.sl-goal__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cg-pink), var(--cg-gold)); box-shadow: 0 0 10px rgba(247, 207, 115, .5); transition: width .5s cubic-bezier(.3, 1, .5, 1); }
.sl-goal__bar u { position: absolute; top: -3px; width: 2px; height: 16px; background: rgba(255, 247, 238, .65); text-decoration: none; transform: translateX(-1px); }
.sl-goal__lab { font-size: 12.5px; font-weight: 800; color: var(--cg-cream); min-width: 4.5em; }
.sl-goal__lab .cg-stars { gap: 1px; } .sl-goal__lab .cg-star { width: 16px; height: 16px; }
.is-ex .sl-goal__lab { order: -1; min-width: 0; font-family: var(--cg-num); letter-spacing: .04em; color: var(--cg-gold); }

/* ---------- 盤面 ---------- */
.sl-wrap { margin-top: 8px; }
.sl-board {
  position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 6 / 7; border-radius: 22px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 225, 160, .12), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 8px),
    linear-gradient(170deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 0 2px rgba(247, 207, 115, .35), inset 0 0 40px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .3);
}
.sl-t {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--cols, 6)); height: calc(100% / var(--rows, 7));
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); transition: transform .2s cubic-bezier(.3, 1.15, .5, 1);
  padding: 2.4%; will-change: transform;
}
.sl-t.is-fall { transition: transform .4s cubic-bezier(.34, 1.3, .55, 1); }
.sl-t__in { position: relative; display: block; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #2b1d33; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); transition: transform .18s, filter .18s; }
.sl-t__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; pointer-events: none; }
.sl-t__ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px var(--kc, #fff), inset 0 -16px 14px -8px rgba(0, 0, 0, .4); }
.sl-t__in::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--kc, #fff) 55%, transparent)); }
.sl-t__mark { position: absolute; left: 3px; bottom: 3px; z-index: 3; width: 38%; max-width: 22px; aspect-ratio: 1; padding: 2px; border-radius: 50%; background: var(--kc, #fff); box-shadow: 0 0 0 1.5px rgba(43, 24, 66, .8), 0 2px 4px rgba(0, 0, 0, .4); }
.sl-t__mark .sl-sym { filter: none; color: #fff !important; }
.sl-t.r-sr .sl-t__in { box-shadow: 0 0 0 1.5px var(--cg-gold), 0 0 10px rgba(247, 207, 115, .55), 0 3px 8px rgba(0, 0, 0, .4); }
.sl-t.r-ssr .sl-t__in { box-shadow: 0 0 0 1.5px #ffb3d9, 0 0 12px rgba(255, 158, 200, .7), 0 3px 8px rgba(0, 0, 0, .4); }
.sl-t.r-secret .sl-t__in, .sl-t.r-medal .sl-t__in { box-shadow: 0 0 0 1.5px #c9b3ff, 0 0 14px rgba(169, 155, 255, .8), 0 3px 8px rgba(0, 0, 0, .4); }
.sl-t.r-sr .sl-t__in::after, .sl-t.r-ssr .sl-t__in::after, .sl-t.r-secret .sl-t__in::after, .sl-t.r-medal .sl-t__in::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .28; background: linear-gradient(120deg, #ff9ec8, #ffe79a, #8ff3e0, #a99bff, #ff9ec8); background-size: 300% 300%; animation: cg-holo 4.5s linear infinite; }
.sl-t__rar { position: absolute; right: 3px; top: 3px; z-index: 3; font-family: var(--cg-num); font-size: 8px; font-weight: 700; letter-spacing: 0; color: #3a2408; background: var(--cg-gold); border-radius: 999px; padding: 0 5px; line-height: 14px; }
.sl-t.is-in { animation: sl-in .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sl-in { from { opacity: 0; scale: .3; } }
.sl-t.is-sel .sl-t__in { transform: scale(1.1); filter: brightness(1.15); box-shadow: 0 0 0 3px var(--cg-gold), 0 0 18px rgba(247, 207, 115, .8); }
.sl-t.is-hint .sl-t__in { animation: sl-hint .75s ease-in-out infinite alternate; }
@keyframes sl-hint { to { transform: scale(1.12); box-shadow: 0 0 0 3px var(--cg-mint), 0 0 16px rgba(127, 230, 210, .8); } }
.sl-t.is-shake .sl-t__in { animation: sl-shake .3s ease; }
@keyframes sl-shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.sl-t.is-pop { z-index: 3; pointer-events: none; }
.sl-t.is-pop .sl-t__in { animation: sl-pop .3s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes sl-pop { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.28); filter: brightness(1.8); } 100% { transform: scale(.1) rotate(25deg); opacity: 0; } }
.sl-t.is-jack .sl-t__in { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 231, 154, 1); }

/* 連鎖・ふわっと点・バナー */
.sl-chain { position: absolute; left: 50%; top: 8%; z-index: 7; transform: translate(-50%, 0) scale(.5); opacity: 0; pointer-events: none; white-space: nowrap; font-family: var(--cg-num); font-weight: 700; font-size: 30px; letter-spacing: .06em; color: var(--cg-gold); text-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 20px rgba(247, 207, 115, .8); -webkit-text-stroke: 1.5px rgba(43, 24, 66, .7); paint-order: stroke fill; }
.sl-chain.is-on.pop { animation: sl-chain .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.sl-chain.c3 { color: #ffb3d9; font-size: 34px; } .sl-chain.c4, .sl-chain.c5 { color: #fff7a8; font-size: 38px; }
@keyframes sl-chain { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4) rotate(-5deg); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.2) rotate(2deg); } 60% { transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -14px) scale(1); } }
.sl-float { position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; font-family: var(--cg-num); font-weight: 700; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(247, 207, 115, .8); -webkit-text-stroke: 1px rgba(43, 24, 66, .6); paint-order: stroke fill; animation: sl-float 1s ease-out both; }
.sl-float.is-big { font-size: 28px; color: var(--cg-gold); }
@keyframes sl-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
.sl-banner { position: absolute; left: 50%; top: 46%; z-index: 9; transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; white-space: nowrap; font-family: var(--cg-num); font-weight: 700; font-size: 44px; letter-spacing: .08em; color: var(--cg-cream); text-shadow: 0 4px 0 rgba(0, 0, 0, .4); -webkit-text-stroke: 2px rgba(43, 24, 66, .75); paint-order: stroke fill; }
.sl-banner.is-on { animation: sl-banner 1.4s cubic-bezier(.3, 1.5, .5, 1) both; }
.sl-banner.is-jackpot { font-size: 50px; background: linear-gradient(90deg, #ff9ec8, #ffe79a, #8ff3e0, #a99bff, #ff9ec8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: sl-banner 1.8s cubic-bezier(.3, 1.5, .5, 1) both, cg-holo 1.6s linear infinite; }
.sl-banner.is-two { color: var(--cg-mint); font-size: 34px; } .sl-banner.is-stage { color: var(--cg-gold); font-size: 40px; }
@keyframes sl-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); } 28% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); } 50% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58%) scale(1); } }

/* ---------- スロット（3つのリール） ---------- */
.sl-reels { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(21, 12, 38, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: dr-fade .25s both; }
.sl-reels.is-out { opacity: 0; transition: opacity .25s; }
.sl-reels__frame { position: relative; display: flex; gap: 8px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(160deg, #ffe39a, #f7cf73 40%, #c98a2c); box-shadow: 0 0 0 3px #7a4a12, 0 14px 30px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .7); }
.sl-reels__lamp { position: absolute; left: 10px; right: 10px; top: 4px; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 14px); opacity: .85; border-radius: 3px; animation: sl-lamp .5s steps(2) infinite; }
@keyframes sl-lamp { 50% { opacity: .25; } }
.sl-reel { --rh: clamp(56px, 17vw, 76px); width: var(--rh); height: var(--rh); border-radius: 12px; overflow: hidden; background: linear-gradient(#fff9ee, #ffe9d2); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .35), inset 0 -4px 8px rgba(0, 0, 0, .2); position: relative; }
.sl-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .28), transparent 28%, transparent 72%, rgba(0, 0, 0, .28)); }
.sl-reel__strip span { display: block; width: var(--rh); height: var(--rh); padding: 13%; }
.sl-reel.is-stop { animation: sl-stop .3s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes sl-stop { 0% { transform: translateY(6px); } 100% { transform: none; } }
.sl-reels.is-jackpot .sl-reels__frame { animation: sl-jp .35s ease-in-out infinite alternate; }
@keyframes sl-jp { to { transform: scale(1.08); box-shadow: 0 0 0 3px #7a4a12, 0 0 46px rgba(255, 231, 154, 1), 0 14px 30px rgba(0, 0, 0, .5); } }
.sl-reels.is-two .sl-reels__frame { box-shadow: 0 0 0 3px #7a4a12, 0 0 28px rgba(127, 230, 210, .8), 0 14px 30px rgba(0, 0, 0, .5); }
.sl-reels.is-none .sl-reels__frame { filter: saturate(.7) brightness(.92); }

/* ---------- 下のボタン ---------- */
.sl-foot { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.sl-foot .rinka-cg-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

@media (max-width: 380px) { .sl-hud__score b, .sl-hud__moves b { font-size: 28px; } .sl-banner { font-size: 36px; } .sl-banner.is-jackpot { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .rinka-cg-slot *, .rinka-cg-slot *::before, .rinka-cg-slot *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- ハブの入口：ロゴを看板に（ドロー・スロット共通） ---------- */
.cg-art--logo { display: flex; align-items: center; justify-content: center; height: 104px; }
.cg-art--logo img { width: 112px; height: auto; max-height: 100px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }

/* 大当たりコンプ（6つの絵柄で大当たりを出すと埋まる・やりこみ） */
.sl-comp { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--cg-line); }
.sl-comp b { font-size: 12.5px; letter-spacing: .04em; }
.sl-comp__row { display: flex; gap: 6px; flex: 1; justify-content: center; }
.sl-comp__i { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); filter: grayscale(1) brightness(.55); opacity: .6; }
.sl-comp__i.is-on { filter: none; opacity: 1; background: rgba(43, 24, 66, .7); box-shadow: 0 0 0 1.5px var(--cg-gold), 0 0 10px rgba(247, 207, 115, .6); }
.sl-comp small { font-family: var(--cg-num); font-weight: 700; color: var(--cg-gold); }

/* ---- 目標の見出し ---- */
.sl-goal__cap { font-size: 11.5px; font-weight: 900; letter-spacing: .04em; color: var(--cg-gold); white-space: nowrap; }

/* ---- はじめてガイドの見本（スロット） ---- */
.gts-grid { position: relative; display: grid; grid-template-columns: repeat(5, 34px); grid-template-rows: repeat(3, 34px); gap: 4px; padding: 6px; }
.gts-d { display: block; width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .55), 0 3px 6px rgba(0, 0, 0, .35); }
.gts-d.c1 { background: #ff6f9f; } .gts-d.c2 { background: #45c6ff; } .gts-d.c3 { background: #7ae582; } .gts-d.c4 { background: #ffc83a; }
.gts-grid.is-swap .gts-d.is-mv  { animation: gts-down 3s ease-in-out infinite; }
.gts-grid.is-swap .gts-d.is-mv2 { animation: gts-up 3s ease-in-out infinite; }
@keyframes gts-up { 0%, 30% { transform: translateY(0); } 50%, 85% { transform: translateY(-38px); } 100% { transform: translateY(0); } }
@keyframes gts-down { 0%, 30% { transform: translateY(0); } 50%, 85% { transform: translateY(38px); } 100% { transform: translateY(0); } }
.gts-grid.is-swap .gts-d.is-mv2 { background: #ff6f9f; }
.gts-grid.is-swap .gts-d.is-mv { background: #45c6ff; }
.gts-grid.is-match .gts-d.c1:nth-child(n + 6):nth-child(-n + 10) { animation: gts-pop 3s ease-in-out infinite; }
@keyframes gts-pop { 0%, 40% { transform: scale(1); filter: none; } 55% { transform: scale(1.25); filter: brightness(1.6); } 70%, 100% { transform: scale(.1); opacity: 0; } }
.gts-tap { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: 10px 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 3px rgba(247, 207, 115, .85); opacity: 0; }
.gts-grid.is-swap .gts-tap { animation: gts-finger 3s ease-in-out infinite; }
@keyframes gts-finger { 0%, 20% { opacity: 0; transform: translateY(18px); } 30% { opacity: 1; transform: translateY(18px); } 50%, 80% { opacity: 1; transform: translateY(-18px); } 95%, 100% { opacity: 0; transform: translateY(-18px); } }
.gts-reels { display: flex; align-items: center; gap: 8px; }
.gts-reels span { width: 52px; height: 52px; padding: 9px; border-radius: 12px; background: linear-gradient(#fff9ee, #ffe9d2); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .3), 0 0 0 3px #f7cf73; animation: gts-reel 1.4s ease-in-out infinite; }
.gts-reels span:nth-child(2) { animation-delay: .15s; } .gts-reels span:nth-child(3) { animation-delay: .3s; }
.gts-reels b { position: absolute; left: 0; right: 0; bottom: 8px; font-family: var(--cg-num); font-size: 16px; letter-spacing: .1em; background: linear-gradient(90deg, #ff9ec8, #ffe79a, #8ff3e0, #a99bff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.gts-reels { padding-bottom: 22px; }
@keyframes gts-reel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gts-goal { width: 86%; }
.gts-goal__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--cg-soft); margin-bottom: 8px; }
.gts-goal__top b { font-family: var(--cg-num); font-size: 18px; color: var(--cg-gold); }
.gts-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.gts-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cg-pink), var(--cg-gold)); animation: gts-bar 3s ease-in-out infinite; }
.gts-bar u { position: absolute; top: -3px; width: 2px; height: 16px; background: rgba(255, 247, 238, .7); }
.gts-stars { margin-top: 10px; font-size: 22px; letter-spacing: 6px; color: var(--cg-gold); text-shadow: 0 0 10px rgba(247, 207, 115, .6); }
@keyframes gts-bar { 0% { width: 0; } 70%, 100% { width: 70%; } }
@media (prefers-reduced-motion: reduce) { .gts-d, .gts-tap, .gts-reels span, .gts-bar i { animation: none !important; } }

/* ---- v2：ラッキー柄・ぴかぴか・STOPで目押し・演出（2026-10-01） ---- */
.sl-hud { grid-template-columns: 1fr auto auto; align-items: end; }
.sl-lucky { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px var(--kc, #ffd56a); }
.sl-lucky__img { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 10px var(--kc, #ffd56a); flex: none; }
.sl-lucky__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.sl-lucky__txt small { display: block; font-size: 9px; letter-spacing: .12em; }
.sl-lucky__txt b { font-size: 18px; color: var(--cg-gold); }
.sl-lucky.is-new { animation: sl-lkin .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sl-lkin { 0% { transform: scale(.6) rotate(-8deg); filter: brightness(2); } 100% { transform: none; } }
.sl-t__lk { display: none; position: absolute; left: 3px; top: 3px; z-index: 4; font-style: normal; font-family: var(--cg-num); font-size: 9px; font-weight: 700; line-height: 14px; padding: 0 5px; border-radius: 999px; color: #3a2408; background: linear-gradient(180deg, #fff6cc, var(--cg-gold)); box-shadow: 0 0 8px rgba(255, 231, 154, .9); }
.sl-t.is-lucky .sl-t__lk { display: block; }
.sl-t.is-lucky .sl-t__in { animation: sl-lucky 1.3s ease-in-out infinite alternate; }
@keyframes sl-lucky { to { box-shadow: 0 0 0 2.5px #fff6cc, 0 0 16px rgba(255, 231, 154, .95), 0 3px 8px rgba(0, 0, 0, .4); } }
.sl-t.is-pop .sl-t__in { animation: sl-pop .3s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.sl-bomb { position: relative; overflow: hidden; gap: 6px; }
.sl-bomb .cg-ico, .sl-bomb svg { position: relative; z-index: 1; width: 18px; height: 18px; }
.sl-bomb span { position: relative; z-index: 1; }
.sl-bomb__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--g, 0%); background: linear-gradient(90deg, rgba(255, 158, 200, .55), rgba(247, 207, 115, .7)); transition: width .4s cubic-bezier(.3, 1, .5, 1); }
.sl-bomb:not(.is-ready) { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); color: var(--cg-cream); }
.sl-bomb.is-ready { animation: sl-ready 1s ease-in-out infinite alternate; }
.sl-bomb.is-ready .sl-bomb__fill { background: linear-gradient(180deg, #ffe39a, var(--cg-gold) 45%, var(--cg-gold2)); }
.sl-bomb.is-ready span, .sl-bomb.is-ready svg { color: #3a2408; }
.sl-bomb.is-flash { animation: sl-bflash .7s cubic-bezier(.3, 1.6, .5, 1), sl-ready 1s .7s ease-in-out infinite alternate; }
@keyframes sl-ready { to { box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255, 231, 154, .95); transform: scale(1.05); } }
@keyframes sl-bflash { 0% { transform: scale(.7); filter: brightness(2.2); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.sl-board.is-aim { box-shadow: inset 0 0 0 3px var(--cg-gold), 0 0 26px rgba(247, 207, 115, .8), 0 12px 28px rgba(0, 0, 0, .3); cursor: crosshair; }
.sl-board.is-aim .sl-t .sl-t__in { animation: sl-aim .6s ease-in-out infinite alternate; }
@keyframes sl-aim { to { filter: brightness(1.25); transform: scale(1.04); } }
.sl-board.is-kick1 { animation: sl-k1 .4s ease; } .sl-board.is-kick2 { animation: sl-k2 .48s ease; }
@keyframes sl-k1 { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } }
@keyframes sl-k2 { 15% { transform: translate(-6px, 4px) rotate(-.4deg); } 35% { transform: translate(6px, -4px) rotate(.4deg); } 55% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -1px); } }
.sl-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: screen; opacity: 0; animation: sl-fl .5s ease-out both; }
@keyframes sl-fl { 0% { opacity: .85; } 100% { opacity: 0; } }
.sl-rain { position: absolute; top: -40px; z-index: 9; width: 30px; height: 30px; pointer-events: none; animation: sl-rain 1.6s cubic-bezier(.4, 0, .8, .6) both; }
.sl-rain .sl-sym { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
@keyframes sl-rain { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(300deg); opacity: .9; } }
.sl-reels { flex-direction: column; gap: 10px; }
.sl-reels__frame { padding-bottom: 12px; }
.sl-rc { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.sl-reel__strip { will-change: transform; }
.sl-stopbtn { min-height: 44px; min-width: 58px; padding: 0 10px; border: 0; border-radius: 12px; font-family: var(--cg-num); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: #fff; cursor: pointer; background: linear-gradient(180deg, #ff8a9c, #e0445e); box-shadow: 0 4px 0 #8f2239, 0 6px 10px rgba(0, 0, 0, .35); }
.sl-stopbtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8f2239; }
.sl-stopbtn:disabled { background: linear-gradient(180deg, #b9a6b0, #8a7783); box-shadow: 0 2px 0 #5b4a55; cursor: default; }
.sl-rc.is-pressed .sl-reel { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .8); }
.sl-rc.is-stop .sl-reel { animation: sl-stop .3s cubic-bezier(.3, 1.8, .5, 1); }
.sl-reels__cap { margin: 0; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .4); font-size: 13px; font-weight: 800; color: var(--cg-cream); letter-spacing: .04em; }
.sl-reels.is-reach .sl-reels__frame { animation: sl-reach .35s ease-in-out infinite alternate; }
.sl-reels.is-reach .sl-reels__cap { color: #ff9aa8; }
.sl-reels.is-reach .sl-reels__cap::before { content: 'REACH!  '; font-family: var(--cg-num); font-weight: 700; color: #ff6b7d; }
@keyframes sl-reach { to { box-shadow: 0 0 0 3px #7a4a12, 0 0 40px rgba(255, 90, 120, .95), 0 14px 30px rgba(0, 0, 0, .5); } }
.sl-res-sub { margin: 0 0 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--cg-soft); }
.gts-lk { display: flex; align-items: center; gap: 14px; }
.gts-lk__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px #ffd56a; animation: gtd-pip 1.2s ease-in-out infinite; }
.gts-lk__chip .gts-d { width: 26px; height: 26px; border-radius: 50%; }
.gts-lk__chip b { font-family: var(--cg-num); font-size: 15px; color: var(--cg-gold); }
.gts-lk__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 40px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.gts-lk__btn u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 158, 200, .7), var(--cg-gold)); animation: gts-gauge 3s ease-in-out infinite; }
.gts-lk__btn b { position: relative; font-size: 14px; color: var(--cg-cream); }
@keyframes gts-gauge { 0% { width: 0; } 75%, 100% { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sl-t.is-lucky .sl-t__in, .sl-bomb.is-ready, .sl-reels.is-reach .sl-reels__frame, .gts-lk__chip, .gts-lk__btn u { animation: none !important; } .gts-lk__btn u { width: 100%; } }
.sl-foot .sl-bomb { flex: 0 0 auto; min-width: 150px; padding: 0 18px; }
.sl-foot .sl-bomb .sl-sym { width: 20px; height: 20px; flex: none; }
.sl-bomb.is-ready .sl-sym { color: #3a2408 !important; }
.sl-bomb .sl-sym { color: var(--cg-gold) !important; }

/* ---- 目押しはリーチの時だけ（2026-10-01） ---- */
.sl-stopbtn:disabled { opacity: .45; }
.sl-rc.is-target .sl-stopbtn { animation: sl-push .42s ease-in-out infinite alternate; }
.sl-rc.is-target .sl-reel { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .35), 0 0 0 3px #ff6b7d, 0 0 22px rgba(255, 90, 120, .95); }
.sl-reels.is-reach .sl-rc:not(.is-target) .sl-reel { filter: brightness(.85); }
@keyframes sl-push { to { transform: scale(1.14); box-shadow: 0 4px 0 #8f2239, 0 0 20px rgba(255, 120, 150, 1); } }
@media (prefers-reduced-motion: reduce) { .sl-rc.is-target .sl-stopbtn { animation: none !important; } }

/* ---- ぎゃくてん演出（目押しがずれた後、リールがもどってそろう） ---- */
.sl-rc.is-rescue .sl-reel { animation: sl-resc .3s ease-in-out infinite alternate; }
@keyframes sl-resc { to { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .35), 0 0 0 3px #fff6cc, 0 0 26px rgba(255, 231, 154, 1); filter: brightness(1.25); } }
.sl-reels.is-rescuing .sl-reels__frame { animation: sl-jp .3s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .sl-rc.is-rescue .sl-reel, .sl-reels.is-rescuing .sl-reels__frame { animation: none !important; } }