@media(max-width:800px) and (orientation:portrait){
 body{background:#eee8fb;background-image:radial-gradient(#cebee4 1px,transparent 1px);background-size:24px 24px}
 .book-world{max-width:440px}
 .book-world .album{padding:18px 16px 20px}
 .mobile-app{position:relative;padding:18px 12px 10px 17px;gap:10px;background:#fcfaff;border:3px solid #8e74b0;border-radius:8px 13px 13px 8px;box-shadow:-5px 0 0 #c9b7e3,0 0 0 4px #ded1ed,4px 5px 0 4px #b6a2cc,inset 5px 0 #eee5f7,inset 0 0 0 2px #eee5f7}
 .mobile-app:before{content:'';position:absolute;left:5px;top:12px;bottom:12px;border-left:2px dashed #baa6d2;pointer-events:none}
 .mobile-app:after{content:'';position:absolute;right:-8px;top:10px;bottom:10px;width:3px;background:repeating-linear-gradient(0deg,#fbf7e9 0 3px,#d1c1dc 3px 4px);z-index:-1}
 .mobile-header{height:46px;min-height:46px;margin-bottom:0;padding:0 4px 4px;border-bottom:1px solid #dfd3ec}
 .mobile-header>span{font:24px/1.15 AlbumPixel,monospace;letter-spacing:1px;color:#4f376e}
 .mobile-header small{font:12px/1.5 AlbumPixel,monospace;letter-spacing:0;color:#8c759f;margin-top:3px}
 .mobile-header button{font:12px AlbumPixel,monospace;padding:8px;color:#826a9b}
 .mobile-preview{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);height:202px;gap:9px;align-items:center}
 .mobile-preview .photo-mount{height:100%;background:#fdfbff;padding:4px;box-shadow:0 2px 0 #e0d4eb}
 .mobile-preview .screen:before,.mobile-preview .screen:after{width:12px;height:12px;border-width:2px}
 .mobile-preview .heart{width:28px;height:28px;font-size:23px;top:3px;right:3px}
 .portrait-column{display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;height:100%}
 .portrait-column .portrait-slot{width:100%;height:auto;aspect-ratio:1/1;flex:none;overflow:hidden;box-shadow:0 2px 0 #e1d5ed}
 .mobile-preview .portrait-slot #album-portrait{width:116%;height:auto;left:50%;top:50%;bottom:auto;transform:translate(-54%,-48%);object-fit:contain}
 .mobile-preview .portrait-slot:after{border-width:3px}
 .mobile-preview .portrait-slot>i{width:14px;height:14px;left:7px;top:7px}
 .mobile-preview .portrait-save{height:29px;width:29px;bottom:3px;right:3px}
 #portrait-enlarge{inset:0;width:100%;height:100%;background:transparent;padding:0;z-index:2;border-radius:0}
 #mobile-background{display:flex;justify-content:center;min-height:30px}
 #mobile-background .swatch{width:22px;height:22px;margin:3px;border-width:3px}
 .mobile-context{min-height:40px;padding:0 6px 6px;gap:6px;background:linear-gradient(90deg,#e4f2e9,#f9fcf9);border:1px solid #cadfd2;border-radius:3px}
 #mobile-outfit{font:16px AlbumPixel,monospace;padding:4px 0;min-height:36px}
 .summary-note{font:12px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:#637b6c}
 .mobile-panel{gap:9px}
 #mobile-clothes .tabs{flex-basis:40px;gap:0;border-bottom:1px solid #dbcee9}
 #mobile-clothes .tab{font-size:14px;padding:7px 0;background:transparent}
 #mobile-clothes .tab.active{background:#dff0e7;border-radius:4px 4px 0 0;border-color:#78aa99}
 #mobile-clothes .looks{grid-auto-rows:140px;gap:7px;padding:1px 4px 3px 1px;scrollbar-width:thin}
 #mobile-clothes .look-card{background:#f7f3fb;border-color:#dbceea;box-shadow:inset 0 0 0 2px #fdfbff}
 #mobile-clothes .look-card[aria-pressed=true]{background:#e1f2e8;border-color:#83ac9c}
 #mobile-clothes .song-name{font-size:12px}
 #mobile-clothes .actions{flex-basis:43px;gap:8px}
 #mobile-clothes .actions button{min-height:43px;font-size:14px;background:#f5effa}
 #mobile-clothes .actions .primary{background:#dff1e6;border-color:#8fb5a3;color:#405d53}
 .mobile-nav{gap:8px;flex:0 0 44px;border:0;padding:0 2px}
 .mobile-nav button{position:relative;min-height:43px;font-size:14px;border:1px solid #c7b3de;border-bottom-width:3px;border-radius:3px 3px 8px 8px;background:#eee4f7;color:#795b95}
 .mobile-nav [aria-pressed=true]{background:#d6ecdf;border-color:#93b9a8;color:#405d53}
 .paper-flower{position:absolute;width:32px;height:32px;object-fit:contain;pointer-events:none;z-index:6}
 .paper-flower.tl{left:-16px;top:-16px;transform:rotate(-25deg)}.paper-flower.br{right:-13px;bottom:-13px;transform:rotate(150deg)}
 .cover-scene{top:clamp(45px,13svh,110px);width:min(82vw,calc((100svh -180px)*.75),385px);aspect-ratio:3/4}
 .cover-subtitle{font-size:27px;letter-spacing:4px}
 .cover-flower.top{right:3%;top:3%;width:35%}.cover-flower.bottom{left:8%;bottom:5%;width:43%}
 .cover-bookmark{bottom:-9%}
}
@media(max-width:800px) and (orientation:portrait) and (max-height:720px){
 .book-world .album{padding:12px 13px 16px}.mobile-app{padding:13px 10px 8px 15px;gap:7px}.mobile-header{height:39px;min-height:39px}.mobile-header small{display:none}.mobile-header>span{font-size:22px}.mobile-preview{height:160px}.mobile-context{min-height:35px}.mobile-nav{flex-basis:40px}.mobile-nav button{min-height:40px}
 #mobile-clothes .looks{grid-auto-rows:124px}#mobile-clothes .item-image{height:62px}
}
@media(max-width:800px) and (orientation:portrait){
 .mobile-preview>.photo-mount{grid-column:1;grid-row:1}
 .mobile-preview>.portrait-column{grid-column:2;grid-row:1}
 .cover-scene{width:min(82vw,calc(75svh - 135px),385px);height:min(109.333vw,calc(100svh - 180px),513.333px)}
}


/* One book footprint for the cover and every inner view. */
@media(max-width:800px) and (orientation:portrait){
 body{height:100vh;height:var(--app-height,100vh);padding:0;overflow:hidden}
 .book-world{width:calc(100% - 36px);max-width:440px;height:calc(100vh - 70px);height:calc(var(--app-height,100vh) - var(--book-top,18px) - var(--book-bottom,52px));margin:var(--book-top,18px) auto 0;transform:none!important}
 .book-world .album{width:100%;height:100%;padding:0}
 .mobile-app{width:100%;height:100%;box-shadow:inset 5px 0 #eee5f7,inset 0 0 0 2px #eee5f7,4px 4px 0 #b6a2cc}
 .cover-scene{left:0;right:auto;top:0;bottom:auto;width:100%;height:100%;aspect-ratio:auto;transform:none}
 .cover-volume{top:0;right:0;bottom:0;left:0}
 .cover-front{transform:none;box-shadow:inset 0 0 0 4px #ede3fa,inset 0 0 0 9px #ad91cd,4px 4px 0 #b6a2cc}
 .cover-back{transform:rotateY(180deg)}
 .cover-bookmark{height:45px;width:27px;bottom:-28px;left:16%}.cover-bookmark>i{height:30px;bottom:-21px}
 .cover-border{top:25px;right:20px;bottom:25px;left:38px}
 .owner-tag{top:12%;font-size:16px}.cover-subtitle{top:54%;font-size:30px}
 .cover-lettering{top:32%;height:21%}.cover-logo{top:28%;height:28%}
 .cover-flower.top{top:5%;width:36%;height:auto}.cover-flower.bottom{bottom:7%;width:44%;height:auto}
 .book-closed:not(.opening) .album{height:100%}
}

.portrait-column .portrait-slot{order:0}#mobile-background{order:1}

@media(max-width:800px) and (orientation:portrait){body{display:flex;flex-direction:column;align-items:center}.book-world{flex-shrink:0}}

/* Mobile utilities reuse the original export/reset controls and their state. */
#mobile-save{display:none}
#mobile-save-options{display:grid;gap:10px}
#mobile-save-options button,#mobile-reset-slot button{min-height:44px;padding:10px;border:1px solid #c7b3de;border-radius:4px;background:#f5effa;color:#604777;font:14px AlbumPixel,monospace}
#mobile-reset-slot button{width:100%;margin-top:14px}
@media(max-width:800px) and (orientation:portrait){
 #mobile-clothes #save{display:none}
 #mobile-clothes #mobile-save{display:flex;align-items:center;justify-content:center}
 #mobile-clothes .looks{min-height:128px}
}
/* Compact previews leave a complete wardrobe row readable on short phones. */
@media(max-width:800px) and (orientation:portrait) and (max-height:600px){
 .mobile-app{gap:4px;padding-top:8px;padding-bottom:6px}
 .mobile-header{height:32px;min-height:32px}
 .mobile-preview{height:88px}
 .mobile-preview #stage{object-fit:contain}
 .portrait-column{gap:3px}
 .portrait-column .portrait-slot{width:52px;align-self:center}
}

@media(max-width:800px) and (orientation:portrait) and (max-height:540px){
 body{overflow-y:auto}
 .book-world{min-height:470px;margin-bottom:52px}
}