/* 4장 키치 연출: CSS로만 구현 (이미지·음원 파일 없음) */
.word-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.word-pop { position: absolute; font-weight: 900; color: var(--yellow); text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 #000; white-space: nowrap; animation: wordpop .8s ease-out forwards; }
@keyframes wordpop {
  0% { transform: translateY(20px) scale(.4) rotate(var(--rot)); opacity: 0; }
  25% { transform: translateY(-10px) scale(1.2) rotate(var(--rot)); opacity: 1; }
  100% { transform: translateY(-70px) scale(1) rotate(var(--rot)); opacity: 0; }
}
.score-pop { position: fixed; z-index: 600; transform: translate(-50%, 0); font-weight: 900; font-size: 24px; color: var(--yellow); text-shadow: 2px 2px 0 #000; pointer-events: none; animation: scorepop .8s ease-out forwards; }
@keyframes scorepop { to { transform: translate(-50%, -80px); opacity: 0; } }

.combo-text { position: absolute; top: 4%; left: 0; right: 0; text-align: center; font-size: 54px; font-weight: 900; color: var(--orange); text-shadow: 4px 4px 0 #000; opacity: 0; pointer-events: none; }
.combo-text.show { animation: combo .6s steps(8) forwards; }
@keyframes combo { 0% { opacity: 1; transform: scale(.5); } 30% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.big-overlay { position: absolute; inset: 0; display: grid; place-items: center; font-size: 160px; font-weight: 900; color: var(--yellow); text-shadow: 8px 8px 0 var(--pink), 14px 14px 0 #000; z-index: 40; pointer-events: none; text-align: center; }
.big-overlay.pop { animation: popin .3s steps(6); }
.banner { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 700; background: var(--yellow); color: #000; border: 6px solid #000; padding: 20px 48px; font-size: 52px; font-weight: 900; box-shadow: 10px 10px 0 var(--pink); animation: popin .3s steps(6); white-space: nowrap; }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 950; }
#flash.on { opacity: 1; }
#fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 650; }

/* 게이지 100%: 무지개 */
.gauge-fill.rainbow { background: linear-gradient(90deg, #f33, #fa3, #ee3, #3d6, #3be, #96f, #f3b, #f33) !important; background-size: 200% 100%; animation: rainbow .4s linear infinite; }
@keyframes rainbow { to { background-position: -200% 0; } }

/* 움직임 줄이기: OS 설정이 켜져 있으면 CSS 애니메이션도 최소화 */
@media (prefers-reduced-motion: reduce) {
  .gauge-fill.rainbow, .hint, .rise { animation: none; }
  .word-pop { animation-duration: .01s !important; }
}