/* 敲擊使用覆蓋整個舞台的動態多層漸層，取代僅有描邊的圓圈 */
#rippleContainer { z-index: 15; overflow: hidden !important; border-radius: inherit; contain: paint; }
#floatingTextContainer { z-index: 20; overflow: hidden !important; border-radius: inherit; }
@keyframes zenFullBloom {
    0% { opacity: 0; transform: scale(.72); }
    17% { opacity: .98; transform: scale(.92); }
    50% { opacity: .72; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.21); }
}
@keyframes zenSoftSweep {
    0% { opacity: 0; transform: translateX(-40%) skewX(-15deg); }
    30% { opacity: .85; }
    100% { opacity: 0; transform: translateX(50%) skewX(-15deg); }
}
.zen-strike-bloom {
    position: absolute; inset: -22%; pointer-events: none; border-radius: 45%;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(255, 249, 205, .78) 0%, rgba(240, 195, 117, .6) 27%, rgba(214, 168, 91, .3) 61%, transparent 86%),
        radial-gradient(ellipse at 27% 29%, rgba(250, 229, 177, .55), transparent 73%);
    animation: zenFullBloom .94s ease-out forwards; will-change: opacity, transform;
}
.zen-strike-bloom::after {
    content: ""; position: absolute; inset: 13%; border-radius: 46%;
    background: radial-gradient(ellipse at center, transparent 32%, rgba(255, 252, 232, .35) 66%, transparent 84%);
}
.dark .zen-strike-bloom {
    background:
        radial-gradient(ellipse at 50% 56%, rgba(248, 205, 125, .5), rgba(179, 126, 65, .28) 39%, rgba(137, 125, 82, .18) 67%, transparent 86%),
        radial-gradient(ellipse at 29% 29%, rgba(255, 218, 169, .27), transparent 73%);
}
.zen-strike-sweep {
    position: absolute; inset: -9% 4%; pointer-events: none;
    background: linear-gradient(110deg, transparent 12%, rgba(255,255,242,.08) 26%, rgba(255,255,232,.55) 46%, rgba(255,224,164,.11) 63%, transparent 84%);
    animation: zenSoftSweep .85s ease-out forwards; will-change: opacity, transform;
}
@keyframes zenMeritSingle {
    0% { opacity: 0; transform: translate(-50%, 14px) scale(.93); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
    68% { opacity: 1; transform: translate(-50%, -19px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -37px) scale(.97); }
}
#floatingTextContainer .merit-float-text {
    position: absolute; top: 16%; left: 50%; width: max-content; max-width: calc(100% - 24px);
    padding: .2rem .75rem; text-align: center; white-space: normal;
    overflow-wrap: anywhere; line-height: 1.48;
    background: rgba(251, 243, 217, .78); border-radius: 24px;
    border: 1px solid rgba(167, 122, 58, .2);
    box-shadow: 0 3px 14px rgba(105, 78, 35, .08);
    transform: translate(-50%, 0); animation: none; pointer-events: none;
}
#floatingTextContainer .merit-float-text.merit-active {
    animation: zenMeritSingle 1.15s cubic-bezier(.22, 1, .36, 1) forwards;
}
.dark #floatingTextContainer .merit-float-text {
    background: rgba(48, 38, 28, .84); border-color: rgba(226, 185, 113, .22);
}
#sceneStageShell[data-scene="spring_droplet"] {
    background-color: rgba(115, 159, 150, .12);
}
.tone-btn, .scene-btn { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    header { row-gap: .65rem; }
    header > div:first-child { width: 100%; min-width: 0; }
    header > div:first-child > div:last-child { min-width: 0; }
    header h1 { flex-wrap: wrap; row-gap: .15rem; font-size: clamp(1.05rem, 5vw, 1.38rem); line-height: 1.5; }
    header > div:last-child { width: 100%; justify-content: space-between; gap: .35rem; }
    header > div:last-child button { min-height: 40px; }
    #sceneStageShell { width: min(100%, 380px); height: clamp(248px, 76vw, 285px); }
    #muyuSvgWrapper { max-width: 100%; }
    #autoControlHeader, #toneControlHeader { flex-wrap: wrap; gap: .65rem; }
    #autoControlHeader > button { margin-left: auto; }
    #toneControlHeader > div:last-child { min-width: 112px; width: 45%; }
    #speedControlHeader, #ambientControlHeader { flex-wrap: wrap; gap: .6rem; }
    #speedControlHeader > div:last-child { margin-left: auto; }
    #ambientControlHeader > div:first-child { flex: 1 1 140px; min-width: 0; }
    #panelAmbientToggleBtn { width: 100%; justify-content: center; line-height: 1.5; padding-inline: .5rem; white-space: normal; }
    #ambientControlHeader > div:last-child { flex: 1 1 112px; min-width: 102px; max-width: 150px; }
    .tone-btn, .scene-btn { line-height: 1.45; font-size: .75rem; }
    #customFloatingInput { min-width: 0; width: 100%; }
    #floatingTextContainer .merit-float-text { font-size: clamp(.85rem, 3.8vw, 1.05rem); }
    #zenToast { max-width: calc(100vw - 24px); width: max-content; }
    #zenToastMessage { overflow-wrap: anywhere; }
}
@media (max-width: 370px) {
    #sceneStageShell { height: 245px; }
    #speedControlHeader > div:last-child { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .zen-strike-bloom, .zen-strike-sweep { display: none !important; animation: none !important; }
    #floatingTextContainer .merit-float-text { opacity: 1 !important; animation: none !important; transform: translate(-50%, 0) !important; }
}


/* 原創 AI 攝影法器，照片僅為靜態素材，數字與敲擊互動依舊由程式即時產生 */
#sceneStageShell.has-photo {
    overflow: hidden;
    background: #ddc6a7 !important;
    box-shadow: 0 8px 25px rgba(73, 48, 25, .12);
    border-color: rgba(137, 110, 77, .25);
}
#sceneStageShell #scenePhoto {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity .38s ease;
}
#sceneStageShell.has-photo #scenePhoto { opacity: 1; }
#sceneStageShell.has-photo #muyuTouchArea {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
}
#sceneStageShell.has-photo #muyuSvgWrapper { visibility: hidden; }
#sceneStageShell.has-photo #incenseSmokeWrapper,
#sceneStageShell.has-photo #ambientGlowCircle { opacity: 0 !important; }
/* 保留極淺的漸層脈衝，不再用高亮黃色覆蓋照片 */
#sceneStageShell.has-photo .zen-strike-bloom {
    background: radial-gradient(ellipse at 50% 52%, rgba(255, 246, 215, .16) 0%, rgba(233, 200, 146, .10) 45%, transparent 76%) !important;
    mix-blend-mode: soft-light;
}
@keyframes zenPhotoLightSweep {
    0% { opacity: 0; transform: translateX(-25%) skewX(-10deg); }
    35% { opacity: .12; }
    100% { opacity: 0; transform: translateX(32%) skewX(-10deg); }
}
#sceneStageShell.has-photo .zen-strike-sweep {
    background: linear-gradient(112deg, transparent 25%, rgba(255,255,238,.25) 48%, transparent 74%) !important;
    animation: zenPhotoLightSweep .72s ease-out forwards;
    mix-blend-mode: soft-light;
}
@keyframes zenPhotoHit {
    0% { transform: scale(1); filter: brightness(1); }
    28% { transform: scale(1.012); filter: brightness(1.09) saturate(1.04); }
    100% { transform: scale(1); filter: brightness(1); }
}
#sceneStageShell.has-photo.photo-strike #scenePhoto {
    animation: zenPhotoHit .44s cubic-bezier(.16,1,.3,1) both;
}
#sceneStageShell.has-photo::after {
    border: 1px solid rgba(255, 253, 243, .18);
    box-shadow: inset 0 0 20px rgba(35, 20, 9, .04);
}
/* 讓浮動功德數字在真實攝影背景上可讀，但避免巨大遮蔽面積 */
#sceneStageShell.has-photo #floatingTextContainer .merit-float-text {
    top: 11%;
    color: #733915;
    background: rgba(255, 250, 235, .90);
    border: 1px solid rgba(255, 247, 216, .7);
    box-shadow: 0 3px 14px rgba(22, 19, 14, .12);
    backdrop-filter: blur(5px);
    font-size: clamp(.85rem, 3.6vw, 1.06rem);
}
@media (prefers-reduced-motion: reduce) {
    #sceneStageShell.has-photo.photo-strike #scenePhoto { animation: none !important; }
    #sceneStageShell #scenePhoto { transition: none; }
}

/* v3: Photo-exclusive canvas: prevent every legacy SVG/mallet image from showing,
   including for a moment when navigating between scenes or while a photo loads. */
#sceneStageShell,
#sceneStageShell.has-photo {
    isolation: isolate;
    overflow: hidden !important;
    background: #d9cbb5 !important;
    border-color: rgba(134,112,84,.26) !important;
    box-shadow: 0 6px 18px rgba(61,42,20,.10);
}
.dark #sceneStageShell,
.dark #sceneStageShell.has-photo { background: #332f29 !important; }
#sceneStageShell #muyuSvgWrapper,
#sceneStageShell #originalMuyuArtwork,
#sceneStageShell #sceneArtwork,
#sceneStageShell #malletElement,
#sceneStageShell #incenseSmokeWrapper,
#sceneStageShell #ambientGlowCircle { display: none !important; visibility: hidden !important; }
#sceneStageShell #muyuTouchArea {
    position: absolute !important;
    inset: 0 !important;
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    display: block; border-radius: inherit;
    z-index: 10; cursor: pointer;
}
#sceneStageShell.has-photo:not(.photo-ready) #scenePhoto { opacity: 0 !important; }
#sceneStageShell.photo-ready #scenePhoto { opacity: 1 !important; }
#sceneStageShell #scenePhoto { filter: none; }
#sceneStageShell::after {
    inset: 2px;
    border: 1px solid rgba(255,255,244,.18);
    box-shadow: none !important;
}
#sceneStageShell .zen-strike-bloom,
#sceneStageShell .zen-strike-sweep { display: none !important; }

/* Small, transparent concentric sound waves, no beige flash or full-stage overlay. */
@keyframes zenSoftWave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.38); }
    12% { opacity: .58; }
    58% { opacity: .29; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
#sceneStageShell .zen-sound-wave {
    position: absolute;
    left: var(--wave-x, 50%); top: var(--wave-y, 52%);
    width: clamp(96px, 37%, 162px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(255,245,217,.74);
    background: transparent !important;
    box-shadow: 0 0 9px rgba(247,225,186,.12);
    transform: translate(-50%, -50%) scale(.38);
    animation: zenSoftWave .9s cubic-bezier(.16,1,.3,1) both;
    pointer-events: none;
    will-change: transform, opacity;
}
#sceneStageShell .zen-sound-wave.wave-follow {
    animation-delay: .12s;
    border: 1px solid rgba(255,243,209,.55);
}
.dark #sceneStageShell .zen-sound-wave {
    border-color: rgba(236,199,158,.57);
}

/* Each strike: its own blessing, easing upwards independently in non-colliding lanes. */
@keyframes zenIndividualBlessing {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(.94); }
    18%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    64%  { opacity: .96; transform: translate(-50%, -9px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -24px) scale(.97); }
}
#sceneStageShell #floatingTextContainer .zen-merit-phrase {
    position: absolute;
    left: var(--merit-x, 50%);
    top: var(--merit-y, 18%);
    width: max-content; max-width: 45%;
    text-align: center;
    padding: .24rem .56rem;
    border-radius: 999px;
    font-family: "Noto Serif TC", serif;
    font-size: clamp(.79rem, 3.5vw, 1.02rem);
    line-height: 1.48; font-weight: 600;
    overflow-wrap: anywhere; white-space: normal;
    color: #6a371a;
    background: rgba(255,249,233,.84);
    border: 1px solid rgba(255,245,218,.77);
    box-shadow: 0 2px 8px rgba(33,24,12,.12);
    animation: zenIndividualBlessing 1.55s ease-out both;
    transform: translate(-50%, 0);
    pointer-events: none; will-change: transform, opacity;
}
#sceneStageShell #floatingTextContainer .zen-merit-phrase.wide {
    max-width: calc(100% - 26px); border-radius: 14px;
}
.dark #sceneStageShell #floatingTextContainer .zen-merit-phrase {
    color: #ffefd2; background: rgba(42,35,28,.84);
    border-color: rgba(240,211,165,.25);
}
/* Photo barely responds to touch; the acoustic waves are the primary feedback. */
@keyframes zenNaturalTouch {
    0% { transform: scale(1); }
    40% { transform: scale(1.003); }
    100% { transform: scale(1); }
}
#sceneStageShell.has-photo.photo-strike #scenePhoto {
    animation: zenNaturalTouch .30s ease-out !important;
    filter: none !important;
}
@media (max-width: 640px) {
    #sceneStageShell #floatingTextContainer .zen-merit-phrase {
        font-size: clamp(.77rem, 3.5vw, .94rem); padding: .2rem .43rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    #sceneStageShell .zen-sound-wave { display: none !important; animation: none !important; }
    #sceneStageShell.has-photo.photo-strike #scenePhoto { animation: none !important; }
    #sceneStageShell #floatingTextContainer .zen-merit-phrase {
        animation: none !important; opacity: 1 !important;
        transform: translate(-50%, 0) !important;
    }
}