/* v20 cover: white emblem behind title, mint embroidered signature. */
.cover-logo{position:absolute;left:35%;top:27%;width:36%;height:31%;object-fit:contain;pointer-events:none;opacity:.86}
.cover-lettering{z-index:1;mix-blend-mode:normal}
.cover-subtitle{font-size:36px;letter-spacing:8px}
.cover-moli{position:absolute;width:29%;height:auto;aspect-ratio:2.3;right:12%;bottom:14%;transform:rotate(-7deg);pointer-events:none}
.cover-moli svg{shape-rendering:geometricPrecision}
@media(max-width:800px) and (orientation:portrait){
 .cover-logo{left:35%;top:30%;width:36%;height:29%}
 .cover-subtitle{font-size:clamp(24px,7cqw,34px);letter-spacing:5px}
 .cover-moli{width:31%;right:12%;bottom:14%}
}

/* v21: textile patch anchored inside the lower-right border. */
.cover-moli{width:30%;height:14%;aspect-ratio:auto;right:9%;bottom:8%;object-fit:contain;image-rendering:auto;transform:rotate(-5deg)}
.motion-ready .book-world,.motion-ready .cover-volume{transition:none}
.motion-ready.opening .book-world,.motion-ready.closing .book-world,.motion-ready.opening .cover-volume,.motion-ready.closing .cover-volume{will-change:transform}
.cover-motion-shade{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(90deg,#28183d80,transparent 90%);z-index:8}
@media(max-width:800px) and (orientation:portrait){.cover-moli{width:32%;height:15%;right:9%;bottom:8%}}

/* v22: one stable spread; the phone never switches between unequal leaves. */
.mobile-pages,.mobile-live,.rotate-phone{display:none}
@media(min-width:801px), (orientation:landscape){
 body{padding:50px 64px 60px}
 .book-world{width:1220px;max-width:none}
 .game-shell{height:940px;grid-template-columns:1fr 1fr;box-sizing:border-box}
 .game-shell>.dressing-room,.game-shell>.wardrobe{height:100%;min-height:0;min-width:0;margin:0}
 .game-shell>.wardrobe{display:flex;flex-direction:column}
 .wardrobe .keepsakes{flex:0 0 266px}
 .wardrobe .wardrobe-heading,.wardrobe .tabs,.wardrobe .actions,.wardrobe .extra-actions{flex-shrink:0}
 .wardrobe .looks{flex:1;min-height:0;max-height:none;align-content:start}
 .dressing-room .page-heading,.dressing-room .photo-mount,.dressing-room .record-heading,.dressing-room .background-picker{flex-shrink:0}
 .cover-scene{height:940px}
 .cover-flower.top{width:33%;height:auto;aspect-ratio:1;right:3%;top:3%}
 .cover-flower.bottom{width:36%;height:auto;aspect-ratio:1;left:6%;bottom:4%}
}
@media(orientation:landscape) and (max-width:1024px){body{padding:35px 38px 55px}}
@media(max-width:800px) and (orientation:portrait){
 body{padding:0;min-height:100svh}
 .book-world{display:none}
 .rotate-phone{display:flex;min-height:100svh;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;gap:18px;color:#604777}
 .rotate-phone svg{width:96px;height:96px;color:#78aa99}
 .rotate-phone p,.rotate-phone h1{margin:0}
 .rotate-phone h1{font:600 28px/1.4 Georgia,serif}
 .rotate-phone p{font:15px/1.8 system-ui;max-width:25em}
 .rotate-phone small{font:13px/1.6 system-ui;color:#847091}
}

/* v23: pocket scrapbook. Preview stays put; only the lower tray changes. */
.mobile-app,#portrait-enlarge{display:none}
#portrait-large{display:block;width:min(68vw,420px);max-width:100%;height:auto;margin:0 auto 16px}
#portrait-download{width:100%;padding:12px;border:1px solid #78aa99;background:#dff2e8;border-radius:4px}
@media(max-width:800px) and (orientation:portrait){
 body{padding:0;overflow:hidden;height:100svh;height:100dvh;min-height:0}
 .book-world{display:block;zoom:1!important;width:100%;max-width:480px;height:100svh;height:100dvh;margin:auto;transform:none!important;perspective:1600px}
 .book-world .album{height:100%;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .album>.game-shell,.album>footer{display:none}
 .mobile-app{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;background:#fcfaff;border:2px solid #b9a5d0;border-radius:10px;padding:10px;box-shadow:inset 0 0 0 3px #f0e8fa}
 .mobile-header{display:flex;align-items:center;justify-content:space-between;min-height:34px;flex-shrink:0;color:#604777}
 .mobile-header>span{font:600 18px/1.3 Georgia,serif}.mobile-header small{display:block;font:11px/1.4 AlbumPixel,monospace;color:#8b78a1;letter-spacing:1px}
 .mobile-header button{min-height:40px;padding:5px 8px;border:0;background:transparent;font:13px system-ui;color:#78648e}
 .mobile-preview{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:8px;height:clamp(155px,27svh,226px);flex-shrink:0}
 .mobile-preview .photo-mount{min-width:0;height:100%;padding:3px;border:1px solid #c6b6db}
 .mobile-preview .screen{height:100%;border:0}
 .mobile-preview #stage{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
 .mobile-preview .heart{width:32px;height:32px;top:4px;right:4px;font-size:25px;z-index:2}
 .mobile-preview .portrait-slot{height:100%;border:1px solid #b9a8cf}
 .mobile-preview .portrait-slot #album-portrait{position:absolute;width:132%;height:auto;object-fit:contain;object-position:center bottom;left:-16%;bottom:4px}
 .mobile-preview .portrait-slot>i{width:16px;height:16px;left:8px;top:8px}
 .mobile-preview .photo-corner{width:17px;height:17px}
 #portrait-enlarge{display:block;position:absolute;bottom:7px;left:7px;z-index:3;border:0;border-radius:3px;background:#fcfaffdb;padding:8px 5px;font:11px system-ui}
 .mobile-preview .portrait-save{right:4px;bottom:4px;width:36px;height:36px;opacity:1;z-index:4;transform:none}
 .mobile-context{display:flex;align-items:center;justify-content:space-between;min-height:40px;flex-shrink:0;gap:5px;border-bottom:1px dashed #d5c6e6;padding-bottom:4px}
 #mobile-outfit{background:transparent;border:0;padding:8px 3px;white-space:nowrap;font-size:14px;min-height:40px}#mobile-outfit span{color:#947eae;margin-left:5px}
 #mobile-background .background-picker{height:auto;min-height:0;padding:0;margin:0;border:0;gap:0}
 #mobile-background .background-name{display:none}#mobile-background .swatches{gap:0}
 #mobile-background .swatch{width:26px;height:26px;margin:3px;border-width:4px}
 .mobile-panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
 #mobile-clothes .tabs{margin:0;gap:0;flex:0 0 42px}
 #mobile-clothes .tab{font-size:14px;padding:8px 0;min-width:0}
 #mobile-clothes .looks{flex:1;min-height:0;max-height:none;grid-auto-rows:140px;gap:6px;padding:1px 3px 2px 1px;align-content:start;touch-action:pan-y}
 #mobile-clothes .look-card{padding:5px 2px;gap:4px}
 #mobile-clothes .item-image{height:78px}#mobile-clothes .kind-upper .item-image img{height:72px}#mobile-clothes .song-name{font-size:12px;line-height:15px;flex-basis:45px}
 #mobile-clothes .looks.headwear{grid-auto-rows:124px}#mobile-clothes .accessory-heading{grid-column:1/-1;height:auto;align-self:center;font-size:12px;grid-row:auto}
 #mobile-clothes .looks.headwear{grid-template-rows:25px 124px 124px 25px 124px}
 #mobile-clothes .looks.headwear .look-card{height:auto;min-height:0}
 #mobile-clothes .actions{margin:0;gap:8px;flex:0 0 44px}
 #mobile-clothes .actions button{font-size:14px;min-height:44px;padding:6px;gap:6px}
 #mobile-clothes .actions button i{width:19px;height:19px}
 #mobile-food .snack-page{height:100%;min-height:0;gap:8px}
 #mobile-food .snack-page h2{font-size:18px;height:36px;min-height:36px;padding:0;margin:0}
 #mobile-food .food-tray{min-height:0;gap:10px;grid-auto-rows:1fr}
 #mobile-food .snack{touch-action:manipulation;padding:8px}
 #mobile-food .snack img{width:75%;max-width:80px;height:80%;max-height:110px}
 .mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:7px;border-top:1px solid #e0d4ed;flex:0 0 51px}
 .mobile-nav button{border:0;background:transparent;border-radius:4px;font-size:15px;min-height:44px}
 .mobile-nav [aria-pressed=true]{background:#dff2e8;color:#416e61}
 .cover-scene{left:50%;right:auto;top:36px;width:min(84vw,calc((100svh -155px)*.75),410px);height:auto;aspect-ratio:3/4;transform:translateX(-50%)}
 .cover-volume{inset:0}.cover-border{inset:6% 6% 6% 12%}
 .owner-tag{top:13%;left:15%;font-size:clamp(13px,4vw,20px);padding:4px 6px;gap:4px;max-width:58%}
 .owner-tag i{width:22px;height:22px}
 .cover-flower.top{width:36%;height:auto;aspect-ratio:1;right:3%;top:3%}
 .cover-flower.bottom{width:43%;height:auto;aspect-ratio:1;left:8%;bottom:6%}
 .cover-lettering{top:35%;left:14%;width:78%;height:22%}.cover-subtitle{top:58%;font-size:clamp(20px,6vw,29px);letter-spacing:4px}
 .cover-logo{left:35%;top:30%;width:36%;height:29%}.cover-moli{width:32%;height:15%;right:9%;bottom:8%}
 .cover-bookmark{left:16%;width:9%;height:14%;bottom:-9%}.cover-bookmark>i{width:70%;height:70%;left:15%;bottom:-60%}
 .cover-corner{width:4%;height:3%}.cover-corner.tl,.cover-corner.bl{left:11%}.cover-corner.tr,.cover-corner.br{right:6%}
 .cover-corner.tl,.cover-corner.tr{top:5%}.cover-corner.bl,.cover-corner.br{bottom:5%}
 .book-closed:not(.opening) .album{height:100%;aspect-ratio:auto;overflow:hidden}
 .cover-back{background:#fcfaff;box-shadow:inset 0 0 0 6px #e0d2ed}
 .opening .mobile-app,.closing .mobile-app{pointer-events:none}
 dialog{width:calc(100% -28px);max-height:85svh;padding:16px;border-width:2px;border-radius:9px}
 #mobile-outfit-content .part-summary{min-height:48px;grid-template-columns:30px 42px 1fr 16px;font-size:13px}
 #mobile-outfit-content .part-summary strong,#mobile-outfit-content .part-summary>span{font-size:13px}
 #portrait-large{width:100%;max-height:58svh;object-fit:contain}
 .saved-looks{grid-template-columns:repeat(2,minmax(0,1fr))}.saved-wear img{height:130px}
 .toast{bottom:max(68px,env(safe-area-inset-bottom));font:12px/1.5 system-ui;white-space:normal;text-align:center}
}
@media(max-width:800px) and (orientation:portrait) and (max-height:650px){
 .mobile-app{gap:5px;padding:7px}.mobile-preview{height:150px}.mobile-header{min-height:28px}.mobile-header small{display:none}
 .mobile-context{min-height:34px;padding:0}.mobile-nav{flex-basis:47px;padding-top:3px}
 #mobile-clothes .looks{grid-auto-rows:124px}#mobile-clothes .item-image{height:62px}#mobile-clothes .kind-upper .item-image img{height:60px}
}