/* The portrait scene is composed for a phone; no stretched landscape image. */
body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));-webkit-text-size-adjust:100%}
.header{padding:calc(12px + env(safe-area-inset-top,0px)) 17px 6px;gap:8px}
.brand{gap:7px;min-width:0}.brand svg{width:32px;flex-shrink:0}.brand span{font-size:19px;white-space:nowrap}.brand small{font-size:10px;letter-spacing:.4px;margin-top:3px}
.header nav{gap:5px;font-size:11px;flex-shrink:0}.header nav button{min-height:44px;padding:5px 6px}.header nav button[data-open]{display:none}.header nav .mobile-manage{display:block;color:var(--rose)}#motion{font-size:10px;width:44px;padding-inline:0;white-space:nowrap;line-height:1.4}
.intro{padding:16px 18px 15px}.intro>p:first-of-type{font-size:14px;letter-spacing:2px}.intro h1{font-size:clamp(25px,7vw,31px);letter-spacing:0;margin:8px 0 5px;line-height:1.45}.intro-sub{font-size:12px;line-height:1.8;letter-spacing:.1px}.mobile-break{display:none}.doodle{left:6%;top:11px;font-size:19px}.doodle.second{right:5%;top:68px;font-size:17px}
.scene{margin:0 8px;aspect-ratio:4/5;max-width:none;overflow:hidden;border-radius:45% 45% 12px 12px / 4% 4% 12px 12px}
.landscape{object-fit:cover}.girl{height:49%;width:43%;left:28.5%;bottom:12%;filter:drop-shadow(0 4px 2px #4c574410)}.girl-caption{font-size:14px;padding:3px 12px;bottom:-9px;min-height:28px}
.scene-tag{padding:9px 12px;min-height:54px;max-width:40%;box-shadow:1px 2px 0 #8b776a35}.scene-tag span{font-size:18px;line-height:1.3}.scene-tag small{font-size:10px;letter-spacing:0}.easel{left:3%;top:46%;transform:rotate(-5deg)}.music{right:2%;top:48%;transform:rotate(4deg)}
.cat-hotspot{left:74%;top:72%;width:22%;height:19%;min-width:44px;min-height:44px}.cat-hotspot span{font-size:13px;padding:5px 10px;bottom:-2px;left:43%}
.speech{font-size:17px;padding:10px 13px;top:29%;width:210px;max-width:62%;line-height:1.55}.treasure{width:44px;height:44px;font-size:28px;background:#fff1dbda}.treasure-one{left:16%;top:17%}.treasure-two{left:9%;top:80%}.treasure-three{right:9%;top:26%}
.world-bottom{margin:9px 20px 0;justify-content:center}.little-note{display:none}#hunt{min-height:44px;font-size:13px;padding:9px 8px}#hunt-count{font-size:13px}
.play-shelf{gap:9px;margin:7px 16px 0}.play-shelf>.handwritten{display:none}.play-shelf>button{flex:1;padding:9px 5px;font-size:12px;min-height:48px;white-space:nowrap}.play-shelf>button span{font-size:23px;margin-right:2px}
.invitation{margin:25px 20px 12px;padding:21px 0;gap:12px;flex-wrap:wrap}.pencil-mark{font-size:43px}.invitation h2{font-size:23px}.invitation p{font-size:12px;line-height:1.9;max-width:265px}.invitation>.pink-button{margin:3px 0 0 52px;font-size:13px;min-height:44px}
footer{padding:9px 20px 20px;font-size:10px;gap:12px}footer button{font-size:12px;min-height:44px;white-space:nowrap}
.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(3,1fr);left:12px;right:12px;bottom:calc(9px + env(safe-area-inset-bottom,0px));z-index:6;background:#fffaf1;border:1px solid #d9cfba;border-radius:17px;box-shadow:0 4px 22px #40503d1c;padding:5px 9px}.mobile-dock button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;font-size:13px;border-radius:12px}.mobile-dock button+button{border-left:1px solid #e3dfd0;border-radius:0}.mobile-dock button span{font:24px/1 var(--hand);color:#a66d81}.mobile-dock button:active{background:#f2e7dd}body.modal-open .mobile-dock{visibility:hidden;pointer-events:none}
.paper-dialog,.detail-dialog,.music-dialog,.drawing-dialog{display:none;position:fixed;top:calc(var(--viewport-top,0px) + 10px);bottom:auto;margin:0 auto;width:calc(100vw - 20px);max-width:560px;height:calc(var(--viewport-height,100dvh) - 20px);max-height:calc(var(--viewport-height,100dvh) - 20px);border-radius:21px}
.paper-dialog[open]{display:flex;flex-direction:column}.dialog-head{padding:18px 18px 15px;flex-shrink:0;gap:10px;min-height:91px}.dialog-head h2{font-size:27px;line-height:1.3}.dialog-head .handwritten{font-size:14px;margin-bottom:4px}.close{width:44px;min-width:44px;height:44px;font-size:29px}.dialog-scroll{flex:1;min-height:0;max-height:none;padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));overflow:auto;-webkit-overflow-scrolling:touch;scroll-padding:16px}
.gallery-toolbar{gap:10px;flex-wrap:wrap;margin-bottom:22px;align-items:center}.filters{display:flex;gap:1px;flex:1}.filters button{font-size:13px;padding:7px 14px;min-height:44px}.gallery-toolbar .pink-button{font-size:12px;padding:9px 12px;min-height:44px}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.work-item{min-width:0;padding:7px 7px 12px}.work-item h3{font-size:20px;margin:9px 4px 1px}.work-item small{font-size:12px}.work-item img{aspect-ratio:4/5;object-fit:contain;background:#f4f1e8}.empty-gallery{padding:30px 0}.empty-gallery h3{font-size:24px}.empty-gallery p{font-size:13px;line-height:2}.empty-gallery>span{font-size:80px}
.editor{padding:19px 14px;margin-bottom:20px}.editor h3{font-size:23px;line-height:1.45}.editor p{font-size:13px}.editor label{font-size:14px}.form-columns{grid-template-columns:1fr;gap:0}.login-row{flex-wrap:wrap;gap:10px}.login-row input{flex-basis:100%;max-width:none}.login-row .pink-button{flex:1}.login-row .text-button{min-width:70px}.text-button{min-height:44px;font-size:13px;padding:10px 4px}input:not([type=file]),textarea,select{font-size:16px;min-height:46px}.file-picker{min-height:130px}.file-picker small{font-size:11px;text-align:center;padding-inline:4px}.file-picker span{font-size:16px;max-width:100%;overflow-wrap:anywhere}#upload-preview{max-height:200px}#save-work{min-width:155px;font-size:14px;min-height:46px}.form-actions{position:sticky;bottom:-20px;background:#f7f0e8;padding:10px 0;gap:15px}.form-message{overflow-wrap:anywhere}#detail-image{max-height:62dvh;width:100%;object-fit:contain}.detail-dialog .dialog-head h2{font-size:24px}#detail-description{font-size:15px;line-height:1.9}
.music-dialog .dialog-head h2{font-size:25px}.music-dialog .dialog-scroll>p{font-size:14px}.zither{padding:18px 12px;border-width:8px;margin:24px 0}.zither button{height:52px;min-height:48px}.zither span{font-size:20px}.melody-controls{gap:10px 17px;justify-content:flex-start}.melody-controls .pink-button{flex-basis:100%;min-height:46px;font-size:14px}.melody-controls .text-button{font-size:14px}.music-note{min-height:44px}
.drawing-tools{gap:8px 14px;margin-bottom:13px}.pencil-colors{gap:4px;flex-basis:100%;justify-content:space-between}.pencil-colors button{width:44px;height:46px;flex-shrink:0}.pencil-colors button:before{inset:8px 13px}.brush-width{font-size:13px;gap:6px}.brush-width select{padding:7px;font-size:16px;min-height:44px;width:105px}.drawing-tools .text-button{font-size:13px}.drawing-tools #eraser[aria-pressed=true]{padding:6px 10px}#drawing-canvas{width:min(100%,calc(var(--viewport-height,100dvh)*.43));max-width:100%;height:auto;margin-inline:auto;flex-shrink:0}.drawing-note{font-size:12px;line-height:1.8;margin-top:10px}.drawing-actions{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:6px;position:sticky;bottom:-20px;background:#fffbf3;padding:10px 0;margin-top:12px}.drawing-actions .pink-button{font-size:12px;padding:9px 7px;min-height:44px;gap:0}.drawing-actions .text-button{font-size:12px;padding-inline:1px}.toast{bottom:calc(87px + env(safe-area-inset-bottom,0px));font-size:13px}
@media(max-width:360px){.header{padding-inline:12px}.brand span{font-size:18px}.brand small{font-size:9px}.header nav{gap:0}.header nav button{padding-inline:4px}.intro{padding-top:12px;padding-bottom:12px}.intro-sub{font-size:11px}.intro h1{font-size:25px}.scene-tag span{font-size:17px}.scene-tag{padding:8px 10px}.play-shelf>button{font-size:11px}.dialog-head{padding-inline:15px}.dialog-scroll{padding-inline:14px}.gallery-toolbar{gap:6px}.gallery-toolbar>.pink-button{flex-basis:100%;font-size:13px}.pencil-colors{gap:2px}.pencil-colors button{width:40px;min-width:0;flex:1}.pencil-colors button:before{inset:8px 12px}.brush-width select{width:95px}.drawing-tools{gap:6px 10px}.mobile-dock{left:9px;right:9px}.mobile-dock button{gap:5px;font-size:12px}}