/* 確定演出（全画面）
   0.0s まっ暗 → 0.3s 斜めの光の筋 → 0.55s 光線と文字 → 星が降る → フェードアウト */
.kakutei {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: #000; animation: kakutei-in .25s ease-out both;
  font-family: var(--font-heading, "M PLUS Rounded 1c"), sans-serif;
}
.kakutei.is-leaving { animation: kakutei-out .15s ease-in forwards; }
@keyframes kakutei-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kakutei-out { to { opacity: 0; } }

/* 回転する光線 */
.kakutei-rays {
  position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, .85) 0deg 6deg, rgba(120, 70, 0, .2) 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .6) 30%, transparent 60%);
  mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .6) 30%, transparent 60%);
  animation: kakutei-rays-in .3s .25s ease-out forwards, kakutei-spin 9s .25s linear infinite;
}
.k5 .kakutei-rays {
  background: repeating-conic-gradient(from 0deg, #ff5c8a 0deg 5deg, transparent 5deg 12deg, #ffb23f 12deg 17deg, transparent 17deg 24deg,
    #ffe85c 24deg 29deg, transparent 29deg 36deg, #5cf0b0 36deg 41deg, transparent 41deg 48deg, #5cc8ff 48deg 53deg,
    transparent 53deg 60deg, #9b7bff 60deg 65deg, transparent 65deg 72deg);
}
@keyframes kakutei-rays-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes kakutei-spin { to { rotate: 360deg; } }

/* 斜めに走る光の筋（画面が割れるように光る） */
.kakutei-slash {
  position: absolute; left: -20%; right: -20%; top: 50%; height: 4px; margin-top: -2px; transform: rotate(-24deg) scaleX(0);
  background: #fff; box-shadow: 0 0 20px 6px #fff, 0 0 60px 20px rgba(255, 215, 106, .8);
  animation: kakutei-slash .3s .05s cubic-bezier(.2, .9, .2, 1) forwards;
}
.k5 .kakutei-slash { box-shadow: 0 0 20px 6px #fff, 0 0 70px 26px rgba(155, 123, 255, .8), 0 0 120px 40px rgba(255, 92, 138, .5); }
@keyframes kakutei-slash {
  0% { transform: rotate(-24deg) scaleX(0); opacity: 1; }
  55% { transform: rotate(-24deg) scaleX(1); opacity: 1; height: 4px; }
  100% { transform: rotate(-24deg) scaleX(1); opacity: 0; height: 140vh; margin-top: -70vh; }
}

/* 文字 */
.kakutei-text {
  position: relative; display: grid; justify-items: center; gap: 4px; opacity: 0;
  animation: kakutei-text .35s .25s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.kakutei-sub { font-size: 16px; font-weight: 700; letter-spacing: .5em; color: #fff4c2; text-shadow: 0 0 10px #f6b93b; }
.kakutei-main {
  font-size: clamp(40px, 11vw, 84px); font-weight: 900; letter-spacing: .04em; line-height: 1.1;
  color: #ffe08a; text-shadow: 0 0 6px #fff, 0 0 24px #f6b93b, 0 4px 0 #8d6d22;
}
.k5 .kakutei-sub { color: #fff; text-shadow: 0 0 10px #ff5c8a, 0 0 20px #9b7bff; }
.k5 .kakutei-main {
  background: linear-gradient(90deg, #ff5c8a, #ffb23f, #ffe85c, #5cf0b0, #5cc8ff, #9b7bff, #ff5c8a) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) drop-shadow(0 4px 0 #4a2a7a);
  animation: kakutei-rainbow 1s linear infinite;
}
@keyframes kakutei-text { from { opacity: 0; transform: scale(2.6); } to { opacity: 1; transform: scale(1); } }
@keyframes kakutei-shake { 20% { translate: -8px 4px; } 40% { translate: 7px -5px; } 60% { translate: -5px 3px; } 80% { translate: 3px -2px; } }
@keyframes kakutei-rainbow { to { background-position: 200% 0; } }

/* 降ってくる星 */
.kakutei-rain { position: absolute; inset: 0; pointer-events: none; }
.kakutei-rain i {
  position: absolute; top: -30px; font-style: normal; color: #ffe08a; text-shadow: 0 0 8px #f6b93b; opacity: 0;
  animation-name: kakutei-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
.k5 .kakutei-rain i:nth-child(4n) { color: #ff9ae0; text-shadow: 0 0 8px #ff5c8a; }
.k5 .kakutei-rain i:nth-child(4n+1) { color: #9ee8ff; text-shadow: 0 0 8px #5cc8ff; }
.k5 .kakutei-rain i:nth-child(4n+2) { color: #c9b6ff; text-shadow: 0 0 8px #9b7bff; }
@keyframes kakutei-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(110vh) rotate(260deg); } }

@media (prefers-reduced-motion: reduce) {
  .kakutei-rays, .kakutei-slash, .kakutei-text, .k5 .kakutei-main { animation: none; opacity: 1; }
  .kakutei-slash { display: none; }
}

.kakutei { background: #201E29; }
.kakutei-skip {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; min-height: 40px; padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; background: rgb(0 0 0 / 35%); color: #fff;
  font: 500 0.875rem/1 var(--font-body, sans-serif); cursor: pointer;
}
.kakutei-main { color: #F6D58A; text-shadow: 0 0 18px rgb(183 121 22 / 70%), 0 3px 0 #7A4F0C; }

/* ---------- astra6 レビュー（Round 2）: 控えめにする ----------
   回転・斜めの光筋・虹色の文字・画面全体の光をやめ、★4は細い金の光筋1本、★5は静止した虹の輪と星4個にする */
.kakutei { z-index: 60; }
.kakutei-slash { display: none; }
.kakutei-rays { display: none; }
.kakutei-main, .k5 .kakutei-main {
  color: #292635; background: #FFF; padding: 12px 20px; border-radius: 12px;
  text-shadow: none; filter: none; animation: none; -webkit-background-clip: border-box; background-clip: border-box;
  font-size: clamp(32px, 9vw, 56px);
}
.kakutei-sub { color: #F6D58A; text-shadow: none; letter-spacing: .3em; }
.k5 .kakutei-sub { color: #fff; text-shadow: none; }
.kakutei-skip { min-height: 48px; }
.kakutei::before { /* ★4: 細い金の光筋 */
  content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; margin-top: 70px; background: #B77916; opacity: .9;
}
.k5::before { /* ★5: 静止した虹の輪 */
  left: 50%; right: auto; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
  background: none; border: 8px solid transparent; opacity: 1;
  border-image: none;
  background: conic-gradient(#C52F60, #B77916, #16796F, #7152B8, #C52F60);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 8px), #000 calc(50% - 8px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 8px), #000 calc(50% - 8px));
}
.kakutei-text { position: relative; z-index: 1; }