/* The phone portrait experience is the primary composition, with full effects. */
@media(max-width:900px){
  .story-mode header{padding:calc(18px + env(safe-area-inset-top,0px)) 23px 12px;gap:12px;align-items:center;font-size:8px;letter-spacing:1px;line-height:1.5}
  .story-mode main{height:100vh;height:100dvh}
  .panel-scroll{height:calc(100% - 82px - env(safe-area-inset-bottom,0px))}
  .panel-content{width:100%;max-width:620px;padding:calc(58px + env(safe-area-inset-top,0px)) 28px 28px;justify-content:center}
  .panel-content>.decorations{height:99px;margin-bottom:4px;overflow:visible}
  .sticker:nth-child(odd){--sticker-size:94px;left:3%;top:1px}
  .sticker:nth-child(even){--sticker-size:88px;right:5%;top:13px}
  section:nth-of-type(2) .sticker:nth-child(odd){left:8%;top:8px}
  section:nth-of-type(2) .sticker:nth-child(even){right:2%;top:-2px}
  section:nth-of-type(3) .sticker:nth-child(odd){left:1%;top:0}
  section:nth-of-type(3) .sticker:nth-child(even){right:8%;top:13px}
  section:nth-of-type(4) .sticker:nth-child(odd){left:10%;top:-1px}
  section:nth-of-type(4) .sticker:nth-child(even){right:3%;top:11px}
  .panel-content>.roman{font-size:21px;line-height:1.3;gap:16px}
  .panel-content>.en{margin:12px 0;font-size:9px;line-height:1.5;letter-spacing:2.4px}
  .panel-content h1{font-size:clamp(38px,10.6vw,54px);line-height:1.22;margin:12px 0}
  .panel-content h2{font-size:clamp(25px,6.6vw,32px);line-height:1.5;letter-spacing:2px;margin:13px 0}
  .panel-content>p{font-size:13px;line-height:1.9;margin:9px 0}
  .panel-content>.bow.bow-ornate{width:clamp(155px,43vw,185px);margin:4px auto 2px}
  .scene-birthday .panel-content>.date{font-size:16px;line-height:1.5;padding:9px 28px;margin:16px auto}
  .scene-frame{inset:58px 17px calc(82px + env(safe-area-inset-bottom,0px));border-width:3px}
  .lace-rail{width:16px;opacity:.85}.rail-left{left:10px}.rail-right{right:10px}
  .pearl-swag{width:155px!important;right:5%!important;left:auto!important;top:47px!important;opacity:.95;rotate:6deg}
  .scene-memories .pearl-swag{right:auto!important;left:7%!important;width:137px!important;rotate:-7deg}
  .scene-theatre .pearl-swag{right:7%!important;width:172px!important;rotate:1deg}
  .scene-letter .pearl-swag{right:auto!important;left:5%!important;width:150px!important;rotate:-9deg}
  .corner-flower{width:58px!important;left:12px!important;bottom:100px!important;top:auto!important;opacity:.85}
  .flower-two{left:auto!important;right:14px!important;top:91px!important;bottom:auto!important;width:49px!important}
  .scene-memories .flower-two{top:26%!important;right:9px!important;width:56px!important}
  .scene-theatre .flower-two{top:44%!important;right:10px!important;width:51px!important}
  .scene-letter .flower-two{top:23%!important;right:11px!important;width:53px!important}
  .scrap-stamp{display:block;writing-mode:horizontal-tb;rotate:-7deg;left:37px;top:auto;bottom:calc(91px + env(safe-area-inset-bottom,0px));font-size:11px;letter-spacing:1px;color:#b17b9460}
  .scene-mote,.scene-mote:nth-of-type(n+6){display:block;left:var(--phone-x);top:var(--phone-y);font-size:clamp(12px,3.4vw,16px)}
  .panel-content>.album{max-width:390px;width:100%;gap:18px;margin-top:22px}
  .panel-content .photo{padding:9px 9px 14px}
  .panel-content .photo:nth-child(2){margin-top:19px}
  .panel-content .photo:nth-child(3){width:59%;margin-top:1px}
  .panel-content .image-space,.photo-open img{aspect-ratio:4/3;max-height:none}
  .image-space{gap:10px}.image-space b{font-size:32px}.image-space span{font-size:10px}
  .photo figcaption{margin-top:12px}.photo figcaption small{margin-top:0;font-size:9px;letter-spacing:1.5px}
  .photo-open,.smile-button,.photo-close,.motion-toggle,.story-next{touch-action:manipulation;-webkit-tap-highlight-color:#eebbd044}
  .photo-open:active{scale:.98}.smile-button:active .smile-sticker{scale:1.08}
  .smile-button{min-width:84px;min-height:84px;display:grid;place-items:center;margin:5px auto}
  .smile-button .smile-sticker{width:84px;height:84px}
  .scene-theatre .panel-content>.film{width:calc(100% - 8px);margin-top:23px;padding:20px 13px 12px;border-radius:85px 85px 8px 8px}
  .video-space{border-radius:65px 65px 2px 2px;min-height:150px}.video-space p{font-size:11px;line-height:1.9;margin:4px}
  .scene-theatre .film:before,.scene-theatre .film:after{width:13%;top:12px;height:48%}
  .caption{font-size:11px;line-height:1.7;padding-top:15px}
  .scene-letter .sunset-title{font-size:clamp(22px,6vw,29px);line-height:1.65;letter-spacing:2px}
  .panel-content>.letter{padding:27px 22px 24px;margin:26px auto 0;width:100%}
  .panel-content .letter p{font-size:14px;line-height:2.1;margin:10px 0;letter-spacing:.5px}
  .panel-content .letter .greeting{font-size:18px}.panel-content .letter .sign{margin-top:20px}
  .panel-content>.wish{font-size:clamp(19px,5.2vw,24px);line-height:1.5;margin:28px 0 10px}
  .story-next{left:18px;right:108px;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:none;width:auto;max-width:none;min-height:48px;padding:9px 10px;gap:7px;flex-direction:row;justify-content:center;letter-spacing:0;font-size:11px;white-space:nowrap;color:#8b506d;opacity:1;animation:none;background:#fff8f3ed;border:1px solid #dfb7c9;box-shadow:0 3px 14px #ba7c9a12}
  .story-next small{font-size:9px;letter-spacing:1px}.story-next svg{width:20px;height:16px;flex-shrink:0}
  .motion-toggle{right:18px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:none;min-width:76px;min-height:48px;padding:8px 10px;line-height:1.5;font-size:11px;border-radius:24px;background:#fff8f3ed}
  .photo-dialog{width:calc(100vw - 28px);max-width:560px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding:52px 16px 16px;overflow-y:auto;overscroll-behavior:contain}
  .photo-close{top:3px;right:4px;width:48px;height:44px;font-size:32px}.photo-detail img{max-height:65vh;max-height:65dvh}.photo-detail .image-space{min-height:230px;aspect-ratio:4/5;max-height:60dvh}
}
@media(max-width:359px){.panel-content{padding-left:25px;padding-right:25px}.story-next{font-size:10px;gap:6px}.story-next small{font-size:8px}.panel-content>.album{gap:15px}.panel-content h1{font-size:36px}.panel-content .letter p{font-size:13px}.image-space span{font-size:9px}}
@media(max-width:900px) and (max-height:720px){.panel-content{justify-content:flex-start;padding-top:60px}.panel-content>.decorations{height:87px}.sticker:nth-child(odd){--sticker-size:84px}.sticker:nth-child(even){--sticker-size:79px}.panel-content>.bow.bow-ornate{width:145px}.panel-content>.en{margin:9px 0}}
@media(max-width:900px) and (orientation:landscape){.panel-content{max-width:620px;padding-top:65px}.panel-content>.decorations{height:92px}.pearl-swag{width:120px!important}.scene-mote{font-size:12px}.story-next{left:calc(50% - 170px);right:auto;width:220px}.motion-toggle{right:calc(50% - 170px)}}