:root{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP","Noto Serif JP",serif;color:#efece2;background:#111415;font-synthesis:none;font-feature-settings:"palt" 1}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}.app{position:relative;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#4b4d41,#12191b 80%);user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}.room{position:absolute;inset:0;pointer-events:none;transition:filter 1.8s ease}.room .art{width:100%;height:100%;display:block}.ambient-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 12%,rgba(0,0,0,.27) 60%,rgba(0,0,0,.63));mix-blend-mode:multiply;opacity:.35}.app.tense .ambient-vignette{opacity:.9}.app.tense .room{filter:saturate(.8) contrast(1.1)}.app.ending .room{filter:brightness(.78)}.hud{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top) + 23px) max(21px,env(safe-area-inset-right)) 0 max(21px,env(safe-area-inset-left));pointer-events:none}.brand{display:flex;flex-direction:column;gap:6px}.brand-label{color:#c6b79f;font-size:10px;letter-spacing:.35em;opacity:.9}.brand h1{margin:0;font-weight:500;letter-spacing:.11em;font-size:clamp(16px,2.1vw,24px);text-shadow:0 2px 18px #000}.hud-right{display:flex;align-items:center;gap:20px;pointer-events:auto}.clock{font-size:32px;font-variant-numeric:tabular-nums;min-width:56px;text-align:right;line-height:1}.clock span{font-size:12px;margin-left:5px;color:#bdbaaF}.icon-btn{display:grid;place-items:center;cursor:pointer;background:rgba(27,28,27,.5);color:#eee;border:1px solid #a7a09488;border-radius:50%;width:40px;height:40px;font-family:serif;font-size:21px;touch-action:manipulation}.icon-btn:focus-visible,.choice-button:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible,.text-btn:focus-visible,.collection-button:focus-visible,.x-report-btn:focus-visible{outline:2px solid #efdbb4;outline-offset:3px}.progress-track{z-index:4;position:absolute;top:calc(env(safe-area-inset-top) + 91px);left:4%;right:4%;height:1px;background:rgba(232,227,206,.12)}.progress-fill{height:100%;width:0%;background:#dfd2b8;box-shadow:0 0 14px #e2c895a8}.subtitle{z-index:5;position:absolute;top:clamp(128px,24vh,200px);width:100%;pointer-events:none;text-align:center;min-height:2.2em;color:#f9f5e9;font-size:clamp(14px,1.6vw,19px);letter-spacing:.15em;text-shadow:0 2px 12px #030303,0 2px 6px #030303;padding:0 24px;transition:opacity .2s}.play-area{z-index:2;position:absolute;left:14%;right:14%;top:29%;bottom:25%;cursor:grab;touch-action:none;outline:none}.play-area:active{cursor:grabbing}.grip-spot{position:absolute;inset:0}.play-footer{position:absolute;z-index:4;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 8.5vh);display:flex;align-items:center;flex-direction:column;gap:10px;pointer-events:none}.rhythm-guide{position:relative;width:145px;height:16px;display:flex;align-items:center;justify-content:space-between;opacity:.55}.guide-line{position:absolute;left:10px;right:10px;top:7px;height:1px;background:#cdc3aa72}.guide-end{width:6px;height:6px;border:1px solid #d7c5a6;background:#0a1011;border-radius:50%;z-index:1}.guide-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#e9d8b6;top:3px;left:calc(50% - 5px);box-shadow:0 0 11px 2px #e1c59f88;transition:left .085s linear;z-index:3}.feedback-row{display:flex;gap:13px;justify-content:center;align-items:center;height:18px}.judgement{font-size:11px;letter-spacing:.18em;color:#d0d9c5;min-width:65px;text-align:right}.miss-dots{display:flex;gap:6px;opacity:.8}.miss-dots i{width:5px;height:5px;border-radius:50%;border:1px solid #bab3a2;background:transparent}.miss-dots i.active{background:#cb7970;border-color:#dba49b;box-shadow:0 0 8px #c7665f}.instructions{font-size:12px;letter-spacing:.13em;text-align:center;margin:4px 16px 0;text-shadow:0 2px 10px #000}.hint{font-size:10px;color:#c0b4a3;letter-spacing:.13em;margin:0;text-align:center;text-shadow:0 2px 10px #000}.app.running .hint{display:none}.app.running .instructions{opacity:.67}.app.running .play-area{cursor:grabbing}.overlay{z-index:12;position:absolute;inset:0;background:rgba(9,11,12,.84);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));overflow-y:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.hidden{display:none!important}.panel{background:linear-gradient(160deg,#252522,#151919);border:1px solid rgba(194,178,151,.3);box-shadow:0 22px 90px #000a;border-radius:4px;text-align:center;width:min(100%,480px);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:27px 26px}.eyebrow{display:block;letter-spacing:.3em;font-size:11px;color:#bea98b;margin-bottom:14px}.panel h2{font-size:clamp(21px,5vw,32px);font-weight:400;margin:0 0 14px;letter-spacing:.12em}.panel-desc{color:#c9c4b7;font-size:13px;margin:4px 0 22px}.choice-actions{display:flex;flex-direction:column;gap:11px}.choice-button{width:100%;text-align:left;background:#292c2a;border:1px solid #9285786e;color:#f5f0e4;padding:17px 20px;font:inherit;font-size:17px;letter-spacing:.08em;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.choice-button span{font-size:20px;color:#c5b99f}.choice-button:hover{background:#393a34;border-color:#c1b095}.end-panel{width:min(100%,520px);padding:22px 24px 25px}.end-subheading{margin:0 0 8px;color:#c1ae8e;font-size:13px;letter-spacing:.1em}.end-panel h2{margin:0 0 13px}.end-story{font-size:13px;line-height:1.75;color:#d0cbbf;margin:0 auto 18px;max-width:420px;white-space:pre-line}.card-preview{width:100%;display:block;height:auto;border:1px solid #968c79a1;border-radius:2px;aspect-ratio:4/5;object-fit:contain;background:#151719}.end-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}.end-actions>*{flex:1}.end-actions.smaller{margin-top:7px;gap:7px}.primary-btn,.secondary-btn{border-radius:2px;min-height:44px;padding:11px 10px;font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer}.primary-btn{background:#e0d1b8;border:1px solid #e0d1b8;color:#25221e}.secondary-btn{background:transparent;border:1px solid #968975;color:#e6ddcf}.text-btn{background:none;border:0;border-bottom:1px solid #8e867a79;color:#c5bba9;padding:10px 0 7px;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}.collection-button{margin-top:17px;width:100%;padding:11px;background:transparent;border:1px solid #4f544e;color:#b4baac;font:inherit;font-size:13px;cursor:pointer;display:flex;justify-content:center;gap:11px}.share-note{min-height:18px;margin:10px 0 0;color:#bdb19a;font-size:10px;line-height:1.5}.collection-panel{width:min(100%,600px)}.end-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;text-align:left;margin:22px 0}.end-card{border:1px solid #6a6359;background:#272924;padding:12px;min-height:111px}.end-card.locked{opacity:.45}.end-number{font-size:10px;color:#c1ac86;letter-spacing:.13em}.end-name{display:block;font-size:16px;margin-top:12px}.end-desc{font-size:10px;color:#c0bcaf;line-height:1.6;margin-top:8px}.collection-panel>.secondary-btn{width:100%}.toast{position:absolute;z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);background:#dbd0bc;color:#242724;border-radius:4px;opacity:0;transition:opacity .22s;padding:9px 13px;font-size:12px;pointer-events:none;white-space:nowrap;max-width:92vw;text-overflow:ellipsis;overflow:hidden}.toast.show{opacity:1}@media (hover:hover){.secondary-btn:hover,.text-btn:hover,.collection-button:hover{background:#393b35}.primary-btn:hover{background:#f7e9cc}}
@media (max-width:640px){.hud{padding-top:calc(env(safe-area-inset-top) + 19px)}.brand h1{font-size:17px;letter-spacing:.065em}.brand-label{font-size:9px;letter-spacing:.2em}.clock{font-size:27px}.hud-right{gap:9px}.icon-btn{width:36px;height:36px}.progress-track{top:calc(env(safe-area-inset-top) + 82px)}.subtitle{top:23%;font-size:15px}.play-area{left:7%;right:7%;top:34%;bottom:22%}.play-footer{bottom:calc(env(safe-area-inset-bottom) + 11vh)}.instructions{font-size:12px;max-width:340px}.panel{padding:24px 19px}.end-panel{padding:19px 18px}.end-story{font-size:12px}.end-actions{gap:8px}.text-btn{font-size:10px}.end-grid{gap:7px}.end-card{padding:9px}.end-name{font-size:14px}}
@media (max-height:640px){.hud{padding-top:calc(env(safe-area-inset-top) + 11px)}.progress-track{top:calc(env(safe-area-inset-top) + 60px)}.subtitle{top:18%}.play-area{top:25%;bottom:20%}.play-footer{bottom:calc(env(safe-area-inset-bottom) + 4.5vh);gap:5px}.instructions{font-size:11px}.overlay{align-items:flex-start}.end-panel{margin:auto}.end-story{margin-bottom:10px}.end-panel h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.app.shake .room{animation:one-shudder .45s cubic-bezier(.2,.8,.2,1) 1}
@keyframes one-shudder{0%{transform:translate(0,0)}15%{transform:translate(-13px,4px)}35%{transform:translate(10px,-5px)}55%{transform:translate(-5px,2px)}78%{transform:translate(3px,-1px)}100%{transform:translate(0,0)}}
@media (max-height:450px){.subtitle{top:17%}.play-area{top:21%;bottom:22%}.play-footer{bottom:calc(env(safe-area-inset-bottom) + 3vh);gap:4px}.instructions{margin:0;font-size:11px}.rhythm-guide{height:12px}.feedback-row{height:14px}.hint{font-size:9px}.progress-track{top:calc(env(safe-area-inset-top) + 59px)}}

/* Small-screen polish: keep the heading clear and the grip instructions legible. */
@media(max-width:360px){
 .brand{min-width:0;max-width:calc(100vw - 140px)}
 .brand h1{font-size:15px;line-height:1.3;letter-spacing:.025em;overflow-wrap:anywhere}
 .hud-right{flex-shrink:0}
 .hud{column-gap:8px}
}
@media(max-width:640px) and (orientation:portrait){
 .hint{font-size:11px;color:#ded4c5}
 .play-footer{bottom:calc(env(safe-area-inset-bottom) + 10vh)}
}
@media(max-height:450px) and (orientation:landscape){
 .play-footer{padding:4px 16px 6px;background:linear-gradient(transparent,rgba(7,9,9,.55) 34%,rgba(7,9,9,.7))}
 .hint{color:#ded4c5}
}

/* Accepted design refinements only. Do not restyle held items. */
:root { --baby-text-main: #f5f1e6; --baby-text-soft: #c7bdac; }
.brand h1,.subtitle,.instructions,.panel h2,.end-name{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif}
.subtitle{height:2.35em;min-height:2.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:2.35em;font-size:clamp(13px,1.6vw,19px)}
/* D15: make the small rhythm guide look like a wooden bead on a fine string. */
.rhythm-guide{opacity:.76;transition:opacity .9s ease}
.guide-line{height:1px;background:#bca98b88}
.guide-end{width:7px;height:7px;background:#615040;border:1px solid #a68b67;box-shadow:inset 0 0 2px #d6b99444}
.guide-dot{width:10px;height:10px;top:3px;border-radius:50%;border:1px solid #e0c7a0;background:radial-gradient(circle at 33% 30%,#ead6b3,#9d7953 82%);box-shadow:0 0 8px #e0c29855;transition:left .07s linear}
.app.guide-soft .rhythm-guide{opacity:.55}
/* F19: leave the space reserved to prevent the room from jumping. */
.app.intro-done .instructions{opacity:0;visibility:hidden}
.instructions{transition:opacity .55s ease,visibility .55s ease}
/* D19/D20: animate only the visual cloth; never shift the input target. */
#blanketRise{transform-box:fill-box;transform-origin:center 55%}
#blanketRise.comfort{animation:baby-settle .42s ease-out 1}
#blanketRise.startle{animation:baby-startle .34s ease-out 1}
@keyframes baby-settle{0%{transform:translateY(-3px) scaleY(1.055)}55%{transform:translateY(1px) scaleY(.97)}100%{transform:translateY(0) scaleY(1)}}
@keyframes baby-startle{0%{transform:translateY(0)}28%{transform:translateY(-12px) scaleY(1.14)}65%{transform:translateY(4px) scaleY(.91)}100%{transform:translateY(0)}}
/* D25: distinct ending atmosphere while retaining the original layout. */
.app.end-1 .ambient-vignette{opacity:1}
.app.end-2 .ambient-vignette{opacity:.96}
.app.end-3 .room{filter:brightness(.58)}
.app.end-4 .room{filter:brightness(.83)}
.collection-summary{font-size:13px;letter-spacing:.16em;color:#c3bba8;margin:0 0 8px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.subtitle{font-size:clamp(12px,3.4vw,15px)}.end-actions.smaller{gap:5px}.text-btn{white-space:normal;font-size:10px;line-height:1.4;min-height:40px}}
@media(prefers-reduced-motion:reduce){#blanketRise.comfort,#blanketRise.startle{animation:none!important}}

/* D12: the creature remains indistinct, like a deep shadow instead of a character. */
#creature{filter:blur(5px)}
/* F22: prevent page gestures while actively rocking, not while browsing endings. */
.app.running{touch-action:none;overscroll-behavior:contain}
/* D01: a trace of nursery warmth disappears while the user keeps rocking. */
.warmth-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 66% 46%,rgba(255,197,123,.15) 0,rgba(190,142,91,.06) 34%,transparent 75%);opacity:1;mix-blend-mode:screen}

/* F10 uses the existing warning indicators rather than a new three-dot layout. */
.app.miss-warning .rhythm-guide{filter:drop-shadow(0 0 4px rgba(177,91,83,.72))}
/* On short landscape screens, keep the instructions clear of the rocker's feet. */
@media (max-height:450px) and (orientation:landscape){.play-footer{bottom:calc(env(safe-area-inset-bottom) + .5vh)}}

/* Full-screen, 9:16 ending stills. Original JPEG bytes are displayed without cropping. */
.still-overlay{z-index:20;background:#030405;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:max(8px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));overflow:hidden}
.still-frame{position:relative;flex:0 0 auto;width:min(calc(100vw - 24px),calc((100dvh - 110px)*9/16));aspect-ratio:9/16;max-height:calc(100dvh - 110px);background:#050505;overflow:hidden}
.still-photo{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease}
.still-overlay.photo-visible .still-photo{opacity:1}
.still-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:50px 10px 17px;background:linear-gradient(transparent,rgba(0,0,0,.86));opacity:0;transition:opacity .7s ease;pointer-events:none}
.still-overlay.title-visible .still-caption{opacity:1}
.still-label{font-size:11px;letter-spacing:.22em;color:#d8c0a2}
.still-caption h2{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;font-size:clamp(20px,4vw,29px);font-weight:400;letter-spacing:.14em;margin:7px 0 0;color:#fff4e5;text-shadow:0 2px 12px #000}
.still-continue{width:min(100%,260px);min-height:46px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.still-overlay.title-visible .still-continue{opacity:1;pointer-events:auto}
.still-replay-btn{display:block;margin:0 auto 14px;background:transparent;color:#e2d0b5;border:1px solid #9285788a;border-radius:2px;padding:10px 14px;min-height:43px;font:inherit;font-size:12px;cursor:pointer}
.still-replay-btn:hover,.end-still-link:hover{background:#393a34}
.still-replay-btn:focus-visible,.end-still-link:focus-visible,.still-continue:focus-visible{outline:2px solid #efdbb4;outline-offset:3px}
.end-still-link{display:block;margin-top:11px;border:1px solid #81746079;background:transparent;color:#e0ccac;padding:8px 9px;min-height:40px;font:inherit;font-size:11px;cursor:pointer;width:100%;text-align:center}
@media(max-height:450px) and (orientation:landscape){.still-overlay{gap:5px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}.still-frame{width:min(calc(100vw - 20px),calc((100dvh - 72px)*9/16));max-height:calc(100dvh - 72px)}.still-continue{min-height:42px}.still-caption{padding-top:28px;padding-bottom:10px}.still-caption h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.still-photo,.still-caption,.still-continue{transition:none}}

/* Avoid a silent black screen during slow still loading. */
.still-loading{position:absolute;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px);left:12px;right:12px;margin:0;text-align:center;font-size:12px;letter-spacing:.1em;color:#c7bbad;pointer-events:none}
/* Avoid double-tap zoom and keep small share actions usable on narrow screens. */
button{touch-action:manipulation}
@media(max-width:360px){.end-actions.smaller .text-btn{min-height:44px}}

/* Make previously saved endings accessible after a reload. Hidden until at least one END is collected. */
.saved-end-button{pointer-events:auto;background:rgba(16,18,19,.72);border:1px solid #81746079;color:#cfc2ad;border-radius:2px;font:inherit;font-size:11px;min-height:42px;padding:7px 16px;cursor:pointer;margin-top:2px;touch-action:manipulation}
.saved-end-button span{font-variant-numeric:tabular-nums;color:#e5d5b7;margin-left:6px}
.saved-end-button:focus-visible{outline:2px solid #efdbb4;outline-offset:2px}
.app.running .saved-end-button{display:none}
@media(max-height:640px){.saved-end-button{min-height:36px;padding:6px 12px}}
/* Saved-record shortcut must not shift the original rhythm guide over the rocker. */
.saved-end-button{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
@media(max-height:450px) and (orientation:landscape){.saved-end-button{top:auto;bottom:calc(100% + 4px);left:auto;right:12px;transform:none}}

/* Enlarged, readable spoken subtitles without clipping longer Japanese lines. */
.subtitle{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;height:auto;min-height:2.3em;line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:balance;letter-spacing:.075em;font-size:clamp(21px,2.25vw,29px);text-shadow:0 2px 8px #000,0 0 22px #000}
@media(max-width:640px){.subtitle{font-size:clamp(19px,5vw,23px);line-height:1.5;letter-spacing:.055em;top:22%}}
@media(max-height:450px){.subtitle{font-size:clamp(17px,2.7vw,21px);line-height:1.3;top:17%}}

/* Portrait phones: ending stills fill the entire viewport, without letterbox bands.
   Keep the original still assets and preserve the centre of their composition. */
@media (orientation:portrait) and (max-width:767px){
 .still-overlay{padding:0;gap:0}
 .still-frame{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}
 .still-photo{object-fit:cover}
 .still-caption{bottom:calc(env(safe-area-inset-bottom) + 76px);padding:65px 14px 20px}
 .still-continue{position:absolute;z-index:2;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translateX(-50%);width:min(calc(100vw - 44px),280px);background:rgba(8,9,10,.88);border-color:#d0bc9e}
 .still-loading{z-index:2;bottom:calc(env(safe-area-inset-bottom) + 110px)}
}
/* Small touch targets in the results panel were harder to hit than the main actions. */
@media (max-width:640px){
 .end-actions.smaller .text-btn{min-height:44px;padding:11px 3px;white-space:normal;line-height:1.35}
 .end-still-link{min-height:44px}
 .saved-end-button{min-height:44px}
 .icon-btn{width:44px;height:44px}
}
@media (max-width:360px){
 .brand{max-width:calc(100vw - 151px)}
}
/* On 320px phones the compact icon prevents the game title from wrapping.
   Its transparent hit area is still 44x44. */
@media(max-width:360px){
 .icon-btn{position:relative;width:36px;height:36px}
 .icon-btn::after{content:"";position:absolute;inset:-4px}
 .brand{max-width:calc(100vw - 140px)}
}

/* User motion preference also applies to the brief END shock, not only transitions. */
@media (prefers-reduced-motion: reduce){.app.shake .room{animation:none!important}}

/* The game is no longer playable during an END scene; hide stale timer and touch hints. */
.app.ending .play-footer,.app.ending .progress-track,.app.ending .clock{opacity:0;pointer-events:none}

/* Attribution required for extractable third-party voice samples. */
.sound-credit{margin:15px 0 0;font-size:10px;line-height:1.6;color:#a9a398}.sound-credit a{color:#d9c6a6;text-underline-offset:3px}.sound-credit span{display:block;font-size:9px}

.x-prominent-row{margin-top:16px}.x-prominent-row>*{flex:1}.x-report-btn{width:100%;min-height:56px;padding:14px 16px;border-radius:4px;border:1px solid #5fb3ff;background:linear-gradient(180deg,#2ea8ff,#0f6ecf);color:#fff;font:inherit;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 26px rgba(24,112,210,.35), inset 0 1px 0 rgba(255,255,255,.18)}.x-report-btn:hover{filter:brightness(1.06)}.x-report-btn:active{transform:translateY(1px)}.x-report-btn::before{content:"";display:inline-block;width:1.1em}.share-note strong{color:#efe5d0}@media (max-width:520px){.x-report-btn{font-size:15px;min-height:52px}}
/* Small success pulse: the guide responds to each gentle, correctly timed rock. */
.rhythm-guide.beat-good .guide-dot{animation:rock-good-pulse .38s ease-out both}
.rhythm-guide.beat-perfect .guide-dot{animation:rock-perfect-pulse .48s ease-out both}
@keyframes rock-good-pulse{0%{transform:scale(1)}30%{transform:scale(1.65);box-shadow:0 0 15px 4px #e1c59f99}100%{transform:scale(1)}}
@keyframes rock-perfect-pulse{0%{transform:scale(1)}28%{transform:scale(1.9);box-shadow:0 0 17px 5px #fff1b7cc}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.rhythm-guide.beat-good .guide-dot,.rhythm-guide.beat-perfect .guide-dot{animation:none}}

/* Prominent one-time operating instructions, kept separate from the 40-second timer. */
.intro-overlay{z-index:18;background:rgba(7,9,10,.91)}
.intro-panel{width:min(100%,480px);padding:30px 24px 28px}
.intro-panel h2{font-size:clamp(25px,5.5vw,33px);line-height:1.45;margin:3px auto 18px;letter-spacing:.05em}
.intro-arrows{display:flex;align-items:center;justify-content:center;gap:22px;color:#e3d3b7;font-size:33px;height:66px;margin:6px auto 12px}
.intro-rock{display:inline-grid;place-items:center;font-size:17px;width:52px;height:44px;color:#fff3d6;text-shadow:0 0 20px rgba(253,222,163,.75);animation:intro-rock 2s ease-in-out infinite alternate}
@keyframes intro-rock{0%{transform:translateX(-33px)}100%{transform:translateX(33px)}}
.intro-step{font-size:clamp(16px,4.2vw,19px);line-height:1.85;color:#e5e0d3;margin:12px auto}
.intro-step strong{color:#fff3d6;font-weight:700}
.intro-small{color:#bcb1a2;font-size:12px;line-height:1.6;margin:13px auto 18px}
.intro-start-btn{width:100%;min-height:54px;font-size:16px;font-weight:700}
.intro-start-btn:focus-visible{outline:2px solid #fff4dd;outline-offset:3px}
@media(max-width:360px){.intro-panel{padding:19px 15px}.intro-panel h2{font-size:23px;margin-bottom:8px}.intro-arrows{height:44px;margin:0 auto 4px}.intro-step{font-size:15px;line-height:1.65;margin:8px auto}.intro-small{margin:7px auto 12px}.intro-start-btn{min-height:48px}}
@media(max-height:480px){.intro-overlay{align-items:flex-start;padding-top:8px;padding-bottom:8px}.intro-panel{max-height:calc(100dvh - 16px);margin:auto;padding:12px 22px}.intro-panel h2{font-size:22px;margin:0 auto 5px}.intro-arrows{height:32px;margin:0 auto}.intro-step{font-size:14px;line-height:1.45;margin:4px auto}.intro-small{font-size:11px;margin:4px auto}.intro-start-btn{min-height:42px;padding:7px}}
@media(prefers-reduced-motion:reduce){.intro-rock{animation:none}}

/* HIDDEN END 05: photographed lamp five-tap target; keep crib controls unchanged. */
.secret-lamp-button{position:absolute;z-index:6;width:76px;height:76px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;padding:0;opacity:0;cursor:pointer;touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.app.running.secret-hint .secret-lamp-button{pointer-events:auto}
.secret-lamp-button:focus-visible{opacity:1;outline:2px solid rgba(246,220,165,.7);outline-offset:2px}

.app.secret-hint .secret-lamp-button{animation:secret-lamp-flicker .8s ease 1}
@keyframes secret-lamp-flicker{0%,35%,70%,100%{opacity:0}15%,53%{opacity:.65}}
.app.secret-cutscene .secret-lamp-button{pointer-events:none!important}
.app.secret-cutscene .room{filter:brightness(.2) saturate(.5)}
.app.secret-cutscene .subtitle{top:20%;font-size:clamp(19px,4.8vw,26px);line-height:1.55;min-height:3.2em;white-space:normal}
.app.secret-cutscene .play-area{pointer-events:none}
/* Reuse the original room and ending photo as textures. Silhouettes are code-only. */
.secret-scene{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;background:rgba(0,1,4,.65);transition:background .9s ease}
.secret-scene.eyes-open{background:rgba(0,1,4,.55)}
.secret-eye-pair{position:absolute;width:96px;height:28px;left:50%;top:70%;transform:translate(-50%,-50%) scale(.45);display:flex;justify-content:space-between;gap:18px;opacity:0;filter:drop-shadow(0 1px 8px #000);transition:opacity 2.2s ease,transform 4s ease}
.secret-eye-pair i,.secret-eyes i{display:block;flex:1;position:relative;min-width:0;height:100%;border-radius:55% 55% 49% 49%;background:radial-gradient(ellipse at 50% 55%,#050403 0 19%,#4b3024 20% 37%,#8f7960 38% 46%,#bba995 47% 100%);box-shadow:inset 0 3px 7px #060504,0 0 10px #000}
.secret-eye-pair i:after,.secret-eyes i:after{content:'';position:absolute;left:60%;top:23%;width:14%;height:20%;border-radius:50%;background:rgba(252,241,220,.55)}
.secret-scene.eyes-open .secret-eye-pair{opacity:.85;transform:translate(-50%,-50%) scale(1)}
.secret-scene.child-approach .secret-eye-pair{top:76%;transform:translate(-50%,-50%) scale(1.6);transition:top 5s ease,transform 5s ease}
.secret-memory{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,4,.65),rgba(12,9,7,.23)),url('assets/stills/end4.jpg') center / cover no-repeat;filter:sepia(.9) brightness(.62) blur(1px);opacity:0;transform:scale(1.04);transition:opacity .25s ease}
.secret-scene.memory-open .secret-memory{opacity:1}
.secret-scene.memory-open .secret-eye-pair{opacity:0}
.secret-scene.memory-door .secret-memory{filter:sepia(.85) brightness(.2) blur(4px)}
.secret-scene.return-room .secret-eye-pair{opacity:.9;transform:translate(-50%,-50%) scale(1.75)}
.secret-hand{position:absolute;width:265px;height:230px;left:52%;bottom:-265px;transform:translateX(-50%) rotate(-5deg);opacity:0;filter:drop-shadow(0 5px 21px black);transition:bottom 2.8s ease,opacity 1s ease,filter 3s ease}
.secret-hand:before{content:'';position:absolute;bottom:-60px;left:50px;width:171px;height:195px;background:radial-gradient(ellipse at 44% 30%,#62534a,#372b27 60%,#070809);border-radius:45% 50% 18% 18%;transform:rotate(-7deg)}
.secret-hand i{position:absolute;bottom:115px;width:31px;height:114px;border-radius:44% 45% 10% 10%;background:linear-gradient(85deg,#141314,#74665b 43%,#1b1918);transform-origin:bottom center}
.secret-hand i:nth-child(1){left:42px;height:115px;transform:rotate(-28deg)}
.secret-hand i:nth-child(2){left:91px;height:157px;transform:rotate(-14deg)}
.secret-hand i:nth-child(3){left:136px;height:171px;transform:rotate(0deg)}
.secret-hand i:nth-child(4){left:179px;height:145px;transform:rotate(14deg)}
.secret-hand i:nth-child(5){left:215px;height:103px;transform:rotate(28deg)}
.secret-scene.caught .secret-hand{bottom:-92px;opacity:1}
.secret-scene.transforming .secret-hand{bottom:-35px;filter:grayscale(1) brightness(.27) blur(3px);transform:translateX(-50%) rotate(8deg)}
.secret-shadow{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 1.15s ease}
.secret-scene.last-room .secret-shadow{opacity:.9}
.secret-finale{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(1,3,4,.65)),url('assets/stills/end4.jpg') center / cover no-repeat;opacity:0;transition:opacity 1.15s ease;overflow:hidden}
.secret-scene.last-room .secret-finale{opacity:1}
.secret-scene.last-black .secret-finale{opacity:0}
.secret-figure{position:absolute;background:radial-gradient(ellipse at 48% 41%,rgba(64,43,34,.85) 0%,rgba(11,13,13,.99) 42%,#010304 78%);border-radius:47% 52% 27% 23%;box-shadow:inset -17px 9px 31px #000,0 0 19px #030304;filter:contrast(1.07)}
.secret-figure:before,.secret-figure:after{content:'';position:absolute;background:inherit;bottom:-6%;width:32%;height:41%;border-radius:50%}
.secret-figure:before{left:-15%;transform:rotate(23deg)}
.secret-figure:after{right:-15%;transform:rotate(-21deg)}
.secret-eyes{position:absolute;top:28%;left:15%;width:70%;height:7%;display:flex;gap:9%;z-index:1}
.secret-figure.secret-mother{left:29%;top:28%;height:66%;width:30%;transform:rotate(-5deg)}
.secret-figure.secret-child{left:56%;top:58%;height:37%;width:19%;transform:rotate(10deg)}
.secret-tear{position:absolute;left:65%;top:36%;width:3px;height:33px;border-radius:50% 50% 65% 65%;background:linear-gradient(#a7b6b6,rgba(161,188,194,.02));transform:rotate(-12deg);z-index:3}
.secret-scene.child-smile .secret-child{transform:rotate(5deg) translateX(-14px);transition:transform .8s ease}
/* Dedicated END05 still: the approved original photos remain unaltered. */
.secret-still{position:absolute;inset:0;background:url('assets/stills/end4.jpg') center/cover no-repeat;opacity:0;overflow:hidden;transition:opacity .55s ease}
.still-overlay.photo-visible .secret-still{opacity:1}
.secret-still-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 62%,rgba(22,19,16,.33),rgba(0,0,0,.94) 90%)}
.secret-still-figures{position:absolute;inset:0;filter:drop-shadow(0 3px 18px #000)}
.secret-still .secret-mother{top:30%;left:28%;width:36%;height:56%}
.secret-still .secret-child{top:54%;left:60%;width:25%;height:32%}
.secret-still .secret-tear{height:32px}
@media(max-width:640px){.secret-lamp-button{width:68px;height:68px}.app.secret-cutscene .subtitle{top:15%;font-size:clamp(18px,5vw,23px);line-height:1.6}}
@media(prefers-reduced-motion:reduce){.secret-eye-pair,.secret-hand,.secret-memory,.secret-finale,.secret-still{transition:none!important}.secret-lamp-button:not(.holding){animation:none!important}}
/* A brief, non-spoiling flicker over the physical lamp after ten seconds. */
.secret-lamp-button::before{content:'';position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle,rgba(245,196,115,.37),rgba(245,196,115,.12) 35%,transparent 72%);opacity:0;pointer-events:none}
.app.secret-hint .secret-lamp-button::before{animation:secret-lamp-flicker .8s ease 1}

/* END05: use the seven supplied photographs; preserve all END01–04 styles. */
.secret-scene .end05-frame{position:absolute;inset:0;z-index:1;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.05s ease;pointer-events:none}
.secret-scene .end05-appearance{background-image:url('assets/scene/end05_scene02_appearance.jpg')}
.secret-scene .end05-approach{background-image:url('assets/scene/end05_scene03_approach.jpg')}
.secret-scene .end05-memory{background-image:url('assets/scene/end05_scene01_memory.jpg')}
.secret-scene .end05-transform-start{background-image:url('assets/scene/end05_scene04_transformation_start.jpg')}
.secret-scene .end05-transform-near-end{background-image:url('assets/scene/end05_scene05_transformation_near_end.jpg')}
.secret-scene .end05-finale{background-image:url('assets/stills/end5.jpg')}
.secret-scene.image-appearance .end05-appearance{opacity:1}
.secret-scene.image-approach .end05-appearance{opacity:0}
.secret-scene.image-approach .end05-approach{opacity:1}
.secret-scene.image-memory .end05-approach{opacity:0}
.secret-scene.image-memory .end05-memory{opacity:1}
.secret-scene.image-transform-start .end05-transform-start{opacity:1}
.secret-scene.image-transform-near-end .end05-transform-near-end{opacity:1}
.secret-scene.image-finale .end05-finale{opacity:1}
.secret-scene.image-finale .end05-transform-near-end{opacity:0}
.secret-scene.last-black .end05-frame{opacity:0!important}
/* New photo frames replace only the old CSS-only END05 stand-ins. */
.secret-scene .secret-eye-pair,.secret-scene .secret-memory,.secret-scene .secret-hand,.secret-scene .secret-finale{display:none}

/* END05 photos are portrait: show the complete scene on wide screens as in the existing still viewer. */
@media (min-aspect-ratio:3/4){.secret-scene .end05-frame{background-size:contain}.app.secret-cutscene .secret-scene{background:#030405}}

/* Only long status messages wrap; short game toasts keep their original appearance. */
.toast.toast-wrap{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;text-align:center}

/* The interactive lamp remains inert throughout all existing ending sequences. */
.app.ending .secret-lamp-button{pointer-events:none}


/* Result-screen cleanup requested by user: remove explanatory text below the buttons. */
.share-note,.sound-credit{display:none!important}
.end-panel{padding-bottom:22px}
.end-collection{margin-top:14px}
.collection-button{margin-top:0}

/* Horror-forward, more prominent X share button. */
.x-prominent-row{margin-top:18px}
.x-report-btn{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:62px;
  padding:16px 20px;
  border-radius:8px;
  border:1px solid rgba(255,92,138,.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,90,138,.18), transparent 46%),
    linear-gradient(180deg, #3a0813 0%, #180308 48%, #07080d 100%);
  color:#fff3f6;
  font:inherit;
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 12px 34px rgba(131,9,46,.40),
    0 0 28px rgba(255,62,123,.18);
  text-shadow:0 0 10px rgba(255,125,165,.18), 0 2px 4px rgba(0,0,0,.55);
}
.x-report-btn::before{
  content:"𝕏";
  display:inline-grid;
  place-items:center;
  width:1.8em;
  height:1.8em;
  margin-right:.62em;
  border-radius:999px;
  border:1px solid rgba(255,120,161,.45);
  background:radial-gradient(circle at 50% 35%, rgba(255,124,166,.36), rgba(255,124,166,.08) 55%, rgba(0,0,0,.14) 56%);
  color:#ffe7ee;
  vertical-align:middle;
  box-shadow:0 0 15px rgba(255,88,136,.22);
}
.x-report-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.07) 48%, transparent 61%);
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
}
.x-report-btn:hover{filter:none;box-shadow:0 14px 38px rgba(131,9,46,.46),0 0 36px rgba(255,62,123,.24)}
.x-report-btn:hover::after{transform:translateX(120%)}
.x-report-btn:active{transform:translateY(1px) scale(.995)}
@media (max-width:520px){.x-report-btn{font-size:16px;min-height:58px;padding:15px 16px}.x-report-btn::before{width:1.65em;height:1.65em;margin-right:.5em}}

/* Pending native share is visibly busy, not an apparently tappable button. */
.x-report-btn:disabled{opacity:.58;cursor:wait;filter:saturate(.65);transform:none}

/* Normal END cinematic scenes: photographs sit behind the unchanged subtitle and modal UI. */
.end-scene-photos{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;background:#070606;opacity:0;transition:opacity .36s ease}
.end-scene-photos.visible{opacity:1}
.end-scene-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity .52s ease}
.end-scene-frame.active{opacity:1}
@media(orientation:landscape){.end-scene-frame{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.end-scene-photos,.end-scene-frame{transition:none}}

/* END only: intentional multiline dialogue and tapping anywhere to advance. */
.app.ending .subtitle{white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty;line-height:1.55;max-height:60dvh;overflow-y:auto;scrollbar-width:none;}
.app.ending .subtitle::-webkit-scrollbar{display:none}
.app.ending{touch-action:manipulation}
.app.ending .play-area{cursor:pointer;touch-action:manipulation}
.app.ending .end-tap-hint{display:block}
.end-tap-hint{display:none;position:absolute;z-index:7;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 30px);text-align:center;font-size:12px;letter-spacing:.15em;color:#f4e9d7;text-shadow:0 2px 8px #000;pointer-events:none;opacity:.85}
@media(max-width:640px){.app.ending .subtitle{top:17%;font-size:clamp(17px,4.7vw,21px);line-height:1.58}}
@media(max-height:480px){.app.ending .subtitle{top:10%;font-size:clamp(14px,2.7vw,18px);line-height:1.38;max-height:72dvh}}

/* The secret lamp must not silently intercept ordinary taps before its clue appears. */
.secret-lamp-button{pointer-events:none}
.app.running.secret-hint .secret-lamp-button{pointer-events:auto}

/* END music remains controllable when the still/result overlays cover the HUD. */
.app:has(.still-overlay:not(.hidden),#endOverlay:not(.hidden),#collectionOverlay:not(.hidden)) .hud{z-index:24}
.app:has(.still-overlay:not(.hidden),#endOverlay:not(.hidden),#collectionOverlay:not(.hidden)) .hud .brand,
.app:has(.still-overlay:not(.hidden),#endOverlay:not(.hidden),#collectionOverlay:not(.hidden)) .hud .clock{visibility:hidden}
/* On small result screens, do not leave the invisible timer's width beside mute. */
.app:has(.still-overlay:not(.hidden),#endOverlay:not(.hidden),#collectionOverlay:not(.hidden)) .hud .clock{display:none}
.app:has(.still-overlay:not(.hidden),#endOverlay:not(.hidden),#collectionOverlay:not(.hidden)) .hud-right{gap:0}
/* The X mark is now real button text; don't reserve an empty symbol space. */
.x-report-btn::before{display:none}

/* A tap now makes the photographed bedside lamp flash much more vividly,
   while still using the same room art and keeping the effect localized. */
.secret-lamp-flash{position:absolute;z-index:5;left:0;top:0;width:294px;height:294px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,250,230,.98) 0%,rgba(255,233,170,.95) 11%,rgba(255,201,102,.82) 24%,rgba(247,159,63,.45) 41%,rgba(230,124,39,.18) 58%,transparent 76%);filter:blur(3px) saturate(1.18)}
.secret-lamp-flash::before,.secret-lamp-flash::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0}
.secret-lamp-flash::before{background:radial-gradient(circle,rgba(255,246,216,.96) 0%,rgba(255,223,145,.58) 33%,rgba(255,178,73,.16) 61%,transparent 78%);filter:blur(11px) brightness(1.16)}
.secret-lamp-flash::after{inset:16%;background:radial-gradient(circle,rgba(255,255,244,.98) 0%,rgba(255,239,187,.84) 24%,rgba(255,198,103,.22) 52%,transparent 73%);filter:blur(1px)}
.secret-lamp-flash.flashing{animation:secret-tapped-lamp-flicker .84s linear 1}
.secret-lamp-flash.flashing::before{animation:secret-tapped-lamp-aura .84s ease-out 1}
.secret-lamp-flash.flashing::after{animation:secret-tapped-lamp-core .84s ease-out 1}
.app.lamp-burst #nightlamp{filter:brightness(1.2) saturate(1.13)}
.app.lamp-burst #nightlampGlow{opacity:1!important;filter:drop-shadow(0 0 10px rgba(255,226,151,.76)) drop-shadow(0 0 24px rgba(244,183,84,.5));transform-box:fill-box;transform-origin:center;animation:secret-svg-lamp-burst .82s ease-out 1}
@keyframes secret-tapped-lamp-flicker{0%,17%,31%,48%,67%,100%{opacity:0}6%,23%,39%,56%,74%{opacity:1}12%,28%,45%,63%,82%{opacity:.22}}
@keyframes secret-tapped-lamp-aura{0%{opacity:0;transform:scale(.76)}18%{opacity:.78;transform:scale(1.03)}34%{opacity:.22;transform:scale(.96)}52%{opacity:.64;transform:scale(1.08)}72%{opacity:.14;transform:scale(1.16)}100%{opacity:0;transform:scale(1.22)}}
@keyframes secret-tapped-lamp-core{0%{opacity:0;transform:scale(.55)}10%{opacity:1;transform:scale(1)}22%{opacity:.18;transform:scale(.78)}38%{opacity:.9;transform:scale(1.06)}58%{opacity:.24;transform:scale(.9)}100%{opacity:0;transform:scale(1.18)}}
@keyframes secret-svg-lamp-burst{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}22%{transform:scale(.94)}39%{transform:scale(1.12)}58%{transform:scale(.98)}74%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.secret-lamp-flash.flashing,.secret-lamp-flash.flashing::before,.secret-lamp-flash.flashing::after,.app.lamp-burst #nightlampGlow{animation:secret-tapped-lamp-glow .42s ease-out 1}.app.lamp-burst #nightlamp{filter:brightness(1.12) saturate(1.08)}@keyframes secret-tapped-lamp-glow{0%,100%{opacity:0}35%{opacity:.68}}}

/* END result typography: prioritize the ending title, and keep the three-line
   synopsis comfortably legible on narrow phones. No dialogue or cards altered. */
#endOverlay .end-panel h2{
  font-size:clamp(29px,9.4vw,43px);
  line-height:1.32;
  letter-spacing:.025em;
  margin-bottom:20px;
}
#endOverlay .end-story{
  font-size:clamp(18px,4.8vw,21px);
  line-height:1.75;
  margin-bottom:20px;
}

/* END epilogue: keep the large title, reveal one complete line on each tap. */
#endOverlay .end-story-line{display:block;animation:end-story-line-appear .36s ease-out both}
#endOverlay .end-story-line + .end-story-line{margin-top:.3em}
#endOverlay .end-story.awaiting-tap::after{content:"画面をタップして続きを読む";display:block;margin-top:9px;font-size:11px;line-height:1.5;letter-spacing:.1em;color:#c1ae8e;opacity:.9;pointer-events:none}
@keyframes end-story-line-appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#endOverlay .end-story-line{animation:none}}

/* Result-story spoilers: the card appears after all epilogue lines have been read. */
#endOverlay .card-preview.awaiting-story{display:none!important}

/* Only monster-spoken END dialogue: strong red, readable over dark photos. */
.app.ending #subtitle.monster-dialogue{color:#ff4b4b;font-weight:800;text-shadow:0 2px 8px #160000,0 0 14px rgba(100,0,0,.66)}

/* Balance each already-visible END epilogue sentence individually on narrow screens. */
#endOverlay .end-story-full-line{display:block;text-wrap:balance}

/* All-five-END reward. Added separately; normal END art and cards remain unchanged. */
.bonus-scene-overlay{position:absolute;inset:0;z-index:28;background:#050505;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:manipulation;cursor:pointer;outline:none}
.bonus-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;animation:bonus-photo-rise 5s cubic-bezier(.22,.66,.3,1) both;will-change:transform,opacity}
@keyframes bonus-photo-rise{0%{transform:scale(.2);opacity:0;filter:brightness(.55)}10%{opacity:.52}70%{opacity:1}100%{transform:scale(1);opacity:1;filter:brightness(1)}}
.bonus-photo.at-full-size{animation:none;transform:scale(1);opacity:1;filter:brightness(1)}
.bonus-scene-overlay.paused .bonus-photo{animation-play-state:paused}
.bonus-scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,transparent 30%,rgba(0,0,0,.13) 52%,rgba(0,0,0,.77) 100%);opacity:0;transition:opacity .8s}
.bonus-scene-overlay[data-phase="1"] .bonus-scene-shade,.bonus-scene-overlay[data-phase="2"] .bonus-scene-shade{opacity:1}
.bonus-scene-overlay[data-phase="3"] .bonus-scene-shade{opacity:1;background:rgba(0,0,0,1)}
.bonus-scene-overlay[data-phase="3"] .bonus-photo{opacity:0;transition:opacity 1.25s}
.bonus-line{position:absolute;z-index:2;left:max(17px,env(safe-area-inset-left));right:max(17px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + clamp(95px,15dvh,165px));text-align:center;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;font-size:clamp(21px,5.5vw,31px);font-weight:800;line-height:1.65;letter-spacing:.04em;text-wrap:balance;overflow-wrap:anywhere;color:#fff1dc;text-shadow:0 3px 12px #000,0 0 25px #000;padding:11px 6px}
.bonus-scene-overlay[data-phase="0"] .bonus-line,.bonus-scene-overlay[data-phase="3"] .bonus-line{opacity:0}
.bonus-tap-hint{position:absolute;z-index:3;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 25px);text-align:center;font-size:12px;color:#f2e0c6;text-shadow:0 1px 5px #000;letter-spacing:.08em;pointer-events:none}
.bonus-skip{z-index:4;position:absolute;top:calc(env(safe-area-inset-top) + 18px);right:max(18px,env(safe-area-inset-right));min-height:44px;padding:9px 15px;color:#f2e4ce;font:700 13px/1.2 "Hiragino Mincho ProN","Yu Mincho",serif;border:1px solid #8b7962;background:rgba(0,0,0,.72);border-radius:2px;cursor:pointer}
.bonus-card-overlay{z-index:30;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);background:#060708;backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior:contain}
.bonus-card-shell{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:520px;width:100%;max-height:100%;overflow-y:auto;text-align:center;scrollbar-width:thin;padding:2px 1px}
.bonus-card-label{font-size:11px;letter-spacing:.14em;color:#cdb999;margin:1px 0}
.bonus-card-shell h2{margin:0 0 3px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(24px,6vw,34px);font-weight:800;color:#f3eadb;line-height:1.15}
.bonus-card-image{display:block;max-width:100%;height:auto;width:auto;max-height:min(59dvh,580px,calc(59dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)));aspect-ratio:4/5;object-fit:contain;border:1px solid #7e6e58;background:#0d0c0c;touch-action:auto;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
.bonus-share-button{width:min(100%,420px);min-height:52px;margin:3px auto 0;font-weight:800;font-size:clamp(15px,4.1vw,19px);flex-shrink:0}
.bonus-card-help{margin:0;color:#bdb09e;font-size:10px;line-height:1.35;max-width:420px}
.bonus-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,420px)}
.bonus-card-actions button{min-width:0;font-weight:700}
.bonus-original-button{min-height:44px;border:0;border-bottom:1px solid #817360;color:#ddd0bb;background:transparent;font:700 12px/1.35 "Hiragino Mincho ProN","Yu Mincho",serif;cursor:pointer;padding:5px 12px}
.bonus-gallery-button{width:100%;margin:0 0 11px;border-color:#c3a575!important;color:#f5e8d1!important;font-weight:800!important}
.bonus-skip:focus-visible,.bonus-card-shell button:focus-visible,.bonus-gallery-button:focus-visible{outline:2px solid #ffe0a4;outline-offset:2px}
.app:has(.bonus-scene-overlay:not(.hidden),.bonus-card-overlay:not(.hidden)) .hud{z-index:34}
.app:has(.bonus-scene-overlay:not(.hidden),.bonus-card-overlay:not(.hidden)) .hud .brand,.app:has(.bonus-scene-overlay:not(.hidden),.bonus-card-overlay:not(.hidden)) .hud .clock{display:none}
.app:has(.bonus-scene-overlay:not(.hidden),.bonus-card-overlay:not(.hidden)) .hud{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 12px)}
@media(max-height:680px){.bonus-card-image{max-height:calc(47dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.bonus-card-shell{gap:5px}.bonus-card-help{font-size:9px}.bonus-card-actions button{min-height:44px}.bonus-original-button{min-height:44px}}
@media(max-height:475px) and (orientation:landscape){.bonus-card-image{max-height:42dvh}.bonus-card-shell h2{font-size:20px}.bonus-card-help{display:none}.bonus-line{bottom:16%;font-size:clamp(17px,3vw,24px)}}
@keyframes bonus-photo-fade{from{opacity:0;filter:brightness(.55)}to{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.bonus-photo{animation:bonus-photo-fade 5s linear both;transform:scale(1);will-change:auto}}
/* 320×568 and other compact phones: keep every reward action on one screen. */
@media(max-height:600px){.bonus-card-image{max-height:calc(44dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.bonus-card-help{display:none}.bonus-card-shell{gap:4px}.bonus-card-actions button{min-height:44px}.bonus-original-button{min-height:44px}}

/* Reward actions stay at least 44px on touch screens; short desktop windows fit the card. */
@media(max-height:820px) and (min-width:900px){.bonus-card-image{max-height:calc(48dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}
@media(max-height:475px) and (orientation:landscape){.bonus-card-image{max-height:calc(37dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

/* Debug-only: keep the shortcut clear of the bonus captions and buttons. */
body:has(#bonusSceneOverlay:not(.hidden),#bonusCardOverlay:not(.hidden)) > .debug-opener{left:calc(max(21px,env(safe-area-inset-left)) + 54px);right:auto;top:calc(env(safe-area-inset-top) + 23px);bottom:auto;width:44px;min-height:44px;padding:0;font-size:0}
body:has(#bonusSceneOverlay:not(.hidden),#bonusCardOverlay:not(.hidden)) > .debug-opener::before{content:"🛠";font:normal 19px/1 system-ui,sans-serif}

/* Narrow portrait screens: leave the complete family photo above both captions. */
@media (orientation:portrait) and (max-width:767px){
  .bonus-photo{object-position:50% 34%}
  .bonus-line{bottom:calc(env(safe-area-inset-bottom) + clamp(57px,9dvh,83px))}
}