/* One viewport, driven by explicit ritual actions. Scrolling never changes the scene. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-header{position:absolute;inset:0 0 auto;width:calc(100% - 80px);max-width:1380px;z-index:10;height:84px;padding:0 20px;border-bottom:1px solid #dcd6c780}
.site-header nav{margin-right:30px}.music-toggle{background:#fbf7ed70}
.opening-story{position:relative;height:100svh;min-height:620px;background:radial-gradient(ellipse at 50% 46%,#fff9ed 0%,#f7f0e3 65%,#eee6d7 100%);isolation:isolate}
.opening-sticky{position:relative;height:100%;overflow:hidden;isolation:isolate}
.opening-scene{position:absolute;inset:0;isolation:isolate}
.opening-scene:before,.opening-scene:after{content:'';position:absolute;width:min(79vw,65svh);aspect-ratio:1;left:50%;top:43%;transform:translate(-50%,-50%);border:1px solid #d4c5a970;border-radius:50%;opacity:var(--cake-reveal,0);pointer-events:none}
.opening-scene:after{width:min(75vw,61svh);border:1px dashed #d4c5a960}
.opening-scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.candle-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transform-origin:50% 40%;background:radial-gradient(ellipse 24% 25% at 50% 31%,#ffc9df29 0%,#ec83b51f 30%,transparent 78%),radial-gradient(ellipse 46% 49% at 50% 43%,#b9387c45 0%,#85245124 48%,transparent 83%),radial-gradient(ellipse 38% 13% at 50% 76%,#ae3f7c1a 0%,transparent 90%)}
.ritual-static[data-ritual-state="wishing"] .candle-atmosphere{opacity:.75}
.opening-touch{position:absolute;inset:0;z-index:3;touch-action:pan-y;border:0;background:transparent;outline-offset:-6px}
[data-ritual-state="cake"] .opening-touch,[data-ritual-state="wishing"] .opening-touch{cursor:grab}
.opening-touch.dragging{cursor:grabbing}
.scene-fallback{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none;padding-bottom:90px}
.particle-title-fallback{width:min(95vw,83svh);height:auto;max-width:1040px;display:block}
.ritual-fallback-cake{display:none;width:min(82vw,66svh);height:min(82vw,66svh);--flame-opacity:0}
[data-ritual-state="cake"] .scene-fallback img,[data-ritual-state="wishing"] .scene-fallback img{display:none}
[data-ritual-state="cake"] .ritual-fallback-cake,[data-ritual-state="wishing"] .ritual-fallback-cake{display:block}
[data-ritual-state="wishing"] .ritual-fallback-cake{--flame-opacity:1}
.scene-ready>.scene-fallback{visibility:hidden}
.opening-top-note{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:#8b967c;font:9px Georgia,serif;letter-spacing:3px;z-index:4;pointer-events:none;white-space:nowrap;transition:opacity .4s}
.opening-top-note i{font:22px Georgia;color:#b89c65}
[data-ritual-state="entering"] .opening-top-note,[data-ritual-state="cake"] .opening-top-note,[data-ritual-state="wishing"] .opening-top-note,[data-ritual-state="finishing"] .opening-top-note{opacity:0}
.ritual-panel{position:absolute;bottom:79px;left:20px;right:20px;text-align:center;z-index:5;pointer-events:none}
.ritual-panel>p{font-size:13px;letter-spacing:1.4px;color:#84735d;line-height:1.8}
.ritual-panel>span{display:block;margin-top:7px;color:#a0917b;font-size:10px;letter-spacing:1px;line-height:1.8}
.ritual-panel>.button{margin:18px auto 0;pointer-events:auto;min-height:47px;padding:10px 25px;font-size:12px;letter-spacing:1.4px;border-radius:4px}
.ritual-panel>.button:disabled{opacity:.65;transform:none;box-shadow:none}
.opening-controls{position:absolute;bottom:20px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:5}
#motion-toggle{width:38px;height:38px;border:1px solid #c4bba5;background:#fcf6e8b8;border-radius:50%;color:#8c8169;font-size:12px}
#ritual-replay{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;background:transparent;letter-spacing:1px;color:#9c8b73;min-height:38px;padding:7px 15px}
.opening-controls>a{font-size:11px;color:#8c8169;letter-spacing:1px;min-height:38px;padding:8px 12px;border-radius:20px;background:#fcf6e880;margin-left:auto}
.ritual-static #motion-toggle{border:0;font-size:22px}
.ritual-static .opening-top-note{top:16%}
.ritual-static[data-ritual-state="blessing"] .particle-title-fallback{width:min(95vw,74svh)}
.button,.text-button{touch-action:manipulation}
@media(min-width:1600px){.site-header{max-width:1550px}.opening-controls{left:60px;right:60px}.ritual-panel{bottom:83px}}
@media(max-width:1000px) and (min-width:721px){.site-header{width:calc(100% - 40px);padding:0 10px}.site-header nav{gap:23px;margin-right:15px}}
@media(max-width:720px){
 .site-header{width:calc(100% - 36px);height:67px;padding:0 2px;gap:10px}.site-header nav{display:none}
 .brand{font-size:12px;letter-spacing:1px;gap:7px}.brand svg{width:19px;height:19px}.brand-dot{display:none}
 .music-toggle{min-height:37px;min-width:78px;padding:3px 10px}
 .opening-story{height:100svh;min-height:600px}
 .candle-atmosphere{background:radial-gradient(ellipse 34% 22% at 50% 34%,#ffc9df29 0%,#ec83b51f 30%,transparent 78%),radial-gradient(ellipse 78% 43% at 50% 44%,#b9387c45 0%,#85245124 48%,transparent 83%),radial-gradient(ellipse 58% 11% at 50% 72%,#ae3f7c1a 0%,transparent 90%)}
 .opening-top-note{top:18%;font-size:7px;letter-spacing:2px;gap:11px}.opening-top-note i{font-size:18px}
 .ritual-panel{bottom:86px;left:16px;right:16px}
 .ritual-panel>p{font-size:11px;letter-spacing:.7px}.ritual-panel>span{font-size:9px;letter-spacing:.6px;margin-top:7px}
 .ritual-panel>.button{margin-top:16px;font-size:11px;min-height:47px;max-width:100%;padding-inline:21px}
 .opening-controls{left:22px;right:22px;bottom:max(15px,env(safe-area-inset-bottom));gap:10px}
 .opening-controls>a{font-size:9px;letter-spacing:.3px;padding:10px 9px}
 #ritual-replay{font-size:10px;padding-inline:8px}
 .particle-title-fallback{width:100%}.scene-fallback{padding-bottom:80px}
 .opening-scene:before{width:96vw;top:44%}.opening-scene:after{width:90vw;top:44%}
 .ritual-fallback-cake{width:95vw;height:95vw}.ritual-static[data-ritual-state="blessing"] .particle-title-fallback{width:100%}
 .birthday-ribbon{padding:10px 18px}.text-button{min-height:36px;display:flex;align-items:center;justify-content:center}
 .game-pause{min-width:48px;min-height:40px;bottom:2px;right:6px}.modal-close{min-width:44px;min-height:44px}.modal input{font-size:16px}
}
@media(max-height:700px){.opening-story{min-height:600px}.opening-top-note{top:17%;font-size:7px}.ritual-panel{bottom:72px}.ritual-panel>p{font-size:10px}.ritual-panel>span{font-size:9px}.ritual-panel>.button{margin-top:10px;min-height:43px}.opening-controls{bottom:12px}.site-header{height:61px}}
@media(prefers-reduced-motion:reduce){.opening-top-note{transition:none}}

/* Loading is a quiet empty stage, never a flash of already assembled lettering. */
.magic-pending .scene-fallback{visibility:hidden}
[data-assembling="true"] .opening-top-note{opacity:0}
[data-assembling="true"] #ritual-action{opacity:.65}