/* Final mobile overrides: visible viewport and independent scene/dialogue sizing. */
body[data-mode="letters"]{background:#eef3f8!important}
html body[data-mode="letters"] #view{top:var(--visual-top,0px)!important;bottom:auto!important;height:var(--phone-height,100dvh)!important}
@media(max-width:900px){
 .home-grid.ref-home-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important;align-items:start!important}
 .ref-map-sheet,.ref-chapter-sheet{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;box-sizing:border-box}
 .ref-map-sheet .map-wrap{height:auto!important;aspect-ratio:4/3;min-height:260px!important}
 .ref-map-sheet .world-map{width:100%;height:100%;object-fit:cover}
 .ref-map-sheet .map-point.locked .pin-name{display:none!important}
 .ref-map-sheet .pin-name{font-size:11px!important;max-width:100px!important;white-space:nowrap}
 .ref-chapter-sheet .chapter-number{font-size:56px!important}.ref-chapter-sheet h2{font-size:26px!important;writing-mode:horizontal-tb!important;word-break:normal!important}
 .ref-chapter-sheet p{font-size:15px!important;line-height:1.7!important}.ref-chapter-sheet .ref-chapter-bottom{position:static!important;margin-top:20px}
 .sidebar{width:100%!important;max-width:100vw!important;overflow:visible!important}.sidebar nav{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;width:100%!important;max-width:100vw!important;scrollbar-width:thin;touch-action:pan-x;padding:4px 8px!important;gap:4px!important}
 .sidebar nav .nav-item{display:flex!important;flex:0 0 66px!important;min-width:66px!important;max-width:none!important;padding:8px 4px!important;clip-path:none!important}.sidebar nav .nav-item b{font-size:13px!important}.sidebar nav .nav-item small{display:none!important}
 .author-note{display:flex!important;flex-wrap:wrap!important;gap:10px!important}.author-note p{flex:1 1 180px;min-width:0}
 #view .text-companion{display:flex!important;flex-direction:column!important;height:calc(var(--phone-height,100dvh) - 120px);min-height:0!important}
 #view .text-companion .text-thread{flex:1!important;min-height:0!important;overflow:auto!important;padding:12px!important}
 #view .text-companion>header{padding:10px 12px!important;gap:8px!important;flex-wrap:wrap}#view .text-companion>header h1{font-size:18px!important;margin:0!important}#view .text-companion>header>div>span{display:none!important}
 #view .text-preferences{padding:0 12px!important;flex:none}#view .text-compose{padding:8px 12px!important;flex:none}#view .text-companion .text-compose textarea{min-height:40px!important;height:44px!important;font-size:16px!important;padding:10px!important}
 html body[data-page].experience-fullscreen .text-companion{height:var(--phone-height,100dvh)!important;min-height:0!important}
 html body[data-page].experience-fullscreen #view,html body[data-page].experience-fullscreen .interlude-page{min-height:0!important;height:var(--phone-height,100dvh)!important}
 body.immersive .v2-story,html body[data-page].immersive #view .vn-social .interlude-stage{height:var(--phone-height,100dvh)!important;min-height:0!important;top:var(--visual-top,0px)!important;bottom:auto!important}
 #view .vn-social .vn-soft-compose{bottom:calc(100dvh - var(--phone-height,100dvh) - var(--visual-top,0px) + 8px)!important;left:12px!important;right:12px!important;min-height:44px!important;padding:6px!important}
 #view .vn-social{--vn-compose-space:66px}
 html body[data-page].immersive #view .vn-social .vn-soft-dialogue{bottom:calc(100dvh - var(--phone-height,100dvh) - var(--visual-top,0px) + 66px)!important;min-height:0!important;padding:12px 16px!important;max-height:24dvh!important;border-radius:18px!important}
 #view .vn-social .vn-soft-dialogue .v2-nameplate{position:static!important;margin:0!important;transform:none!important}#view .vn-social .vn-soft-dialogue .v2-dialogue-body{overflow:auto!important;min-height:0!important;padding:0!important}#view .vn-social .vn-soft-dialogue .v2-prose{font-size:16px!important;line-height:1.55!important}
 #view .vn-social .vn-scene-toolbar{top:calc(var(--visual-top,0px) + max(6px,env(safe-area-inset-top)))!important;left:max(8px,env(safe-area-inset-left))!important;gap:6px!important}#view .vn-scene-toolbar button{padding:6px 10px!important;min-height:34px!important}
 input,textarea,select{font-size:16px}
}
@media(max-width:600px) and (orientation:portrait){
 html body[data-page].immersive #view .vn-social .vn-reference-frame{left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}
 html body[data-page].immersive #view .vn-social .vn-reference-frame .story-cast.vn-reference-cast{inset:14% 0 24%!important}
 html body[data-page].immersive #view .vn-social .vn-reference-frame .story-portrait{width:100%!important;max-width:100%!important}
 html body[data-page].immersive #view .vn-social .vn-soft-dialogue{left:5%!important;right:5%!important;max-height:23dvh!important}
}
@media(max-height:500px) and (orientation:landscape){
 html body[data-page].immersive .v2-story-head{top:max(4px,env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important;left:auto!important;padding:0!important}
 .v2-story-tools{padding:3px!important;display:flex!important;gap:3px!important;flex-wrap:nowrap!important}.v2-story-tools button{font-size:12px!important;padding:5px 9px!important;min-height:30px!important}.v2-story-tools .ui-label small{display:none!important}
 html body[data-page].immersive .v2-dialogue:not(.vn-soft-dialogue){bottom:max(6px,env(safe-area-inset-bottom))!important;left:max(12px,env(safe-area-inset-left))!important;right:max(12px,env(safe-area-inset-right))!important;min-height:0!important;height:auto!important;max-height:38dvh!important;padding:10px 16px!important;overflow:visible!important}
 .v2-dialogue:not(.vn-soft-dialogue) .v2-nameplate{position:static!important;transform:none!important;margin:0 0 4px!important;padding:2px 10px!important;font-size:13px!important}.v2-dialogue:not(.vn-soft-dialogue) .v2-dialogue-body{max-height:19dvh!important;overflow:auto!important;padding:0!important}.v2-dialogue .v2-prose{font-size:16px!important;line-height:1.5!important}.v2-dialogue footer{margin:3px 0 0!important;padding:0!important}.v2-dialogue .v2-next{min-height:28px!important;padding:3px 14px!important;font-size:12px!important}
 #view .text-companion>header{flex-wrap:nowrap!important;padding:5px 10px!important}#view .text-companion .text-compose textarea{height:36px!important;min-height:36px!important}#view .text-companion .text-compose>div{display:flex!important;justify-content:flex-end!important}#view .text-companion .text-compose small{margin-right:auto}#view .text-companion .text-compose button{min-height:30px!important;padding:4px 16px!important}
 html body[data-page].immersive #view .vn-social .vn-soft-dialogue{max-height:24dvh!important;left:5%!important;right:5%!important;padding:7px 14px!important}#view .vn-social .vn-soft-dialogue footer{display:none!important}#view .vn-social .vn-soft-dialogue .v2-nameplate{font-size:12px!important}
}
@media(max-width:900px){
 html body[data-page] .home-grid.ref-home-grid{grid-template-columns:minmax(0,1fr)!important;align-items:start!important}
 html body[data-page]:not(.immersive):not([data-mode="letters"]) .sidebar{width:100%!important;max-width:100%!important;position:relative!important;height:auto!important}
 html body[data-page]:not(.immersive):not([data-mode="letters"]) .game-shell{display:block!important}
 html body[data-page] .sidebar nav{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;max-width:100vw!important}
 html body[data-page] .sidebar nav .nav-item{display:flex!important;flex-direction:column!important;flex:0 0 64px!important;min-width:64px!important}
 html body[data-page] .sidebar nav .nav-item span,html body[data-page] .sidebar nav .nav-item b{display:block!important}html body[data-page] .sidebar nav .nav-item small{display:none!important}
 html body[data-page] .sidebar .brand,html body[data-page] .sidebar-foot{display:none!important}
 html body[data-page] .ref-map-sheet,html body[data-page] .ref-chapter-sheet{min-height:0!important;height:auto!important;min-width:0!important}
}
@media(max-height:500px) and (orientation:landscape){html body[data-page].immersive #view .vn-social .interlude-stage{background-image:var(--companion-backdrop)!important;background-size:cover!important;background-position:center!important}}
@media(max-height:500px) and (orientation:landscape){
 html body[data-page].immersive #view .vn-social .vn-reference-frame{overflow:visible!important}
 html body[data-page].immersive #view .vn-social .vn-reference-frame .v2-story-bg,html body[data-page].immersive #view .vn-social .vn-reference-frame .v2-story-wash{left:50%!important;right:auto!important;width:calc(100vw / var(--scene-scale))!important;transform:translateX(-50%)!important}
}
/* Readable shop and wardrobe cards, rather than compressed desktop columns. */
@media(max-width:900px){
 html body[data-page] #view .shop-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
 html body[data-page] #view .shop-world,html body[data-page] #view .shop-desk{min-width:0!important;width:100%!important}
 html body[data-page] #view .shop-top{display:flex!important;flex-wrap:wrap!important;gap:12px!important}html body[data-page] #view .shop-top h1{font-size:28px!important;white-space:nowrap!important}
 html body[data-page] #view .shop-room{height:220px!important;min-height:0!important}html body[data-page] #view .shop-orders{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:10px!important;align-items:stretch!important}
 html body[data-page] #view .shop-order{flex:0 0 190px!important;width:190px!important;min-width:190px!important;max-width:190px!important;height:auto!important;writing-mode:horizontal-tb!important;padding:14px!important}
 html body[data-page] #view .shop-order b{font-size:18px!important;white-space:normal!important}html body[data-page] #view .shop-order p{font-size:14px!important;line-height:1.6!important}html body[data-page] #view .shop-queue h2{font-size:21px!important}
 html body[data-page] #view .ref-wardrobe-room{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:14px!important;min-width:0!important}
 html body[data-page] #view .ref-fitting{min-width:0!important;min-height:0!important;height:auto!important}html body[data-page] #view .ref-fitting-stage{height:240px!important;min-height:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}html body[data-page] #view .ref-fitting-stage .chibi{width:170px!important;height:220px!important;position:relative!important;inset:auto!important;transform:none!important}
 html body[data-page] #view .ref-fitting-caption{position:static!important}html body[data-page] #view .ref-outfit-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;min-width:0!important}
 html body[data-page] #view .ref-outfit-card{min-width:0!important;min-height:0!important;height:auto!important;padding:12px!important;display:flex!important;flex-direction:column!important;align-items:center!important}
 html body[data-page] #view .ref-outfit-art{height:110px!important;min-height:0!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}html body[data-page] #view .ref-outfit-art .chibi{width:80px!important;height:100px!important}html body[data-page] #view .ref-outfit-card h3{font-size:17px!important;white-space:normal!important;margin:10px 0!important}html body[data-page] #view .ref-outfit-card p{font-size:13px!important;line-height:1.6!important}html body[data-page] #view .ref-outfit-action{position:static!important;width:100%!important;margin-top:auto!important}html body[data-page] #view .ref-outfit-action button{width:100%!important;padding:8px!important;font-size:13px!important}
}
html body.text-active{overflow:hidden!important;background:#fff!important}html body.text-active .sidebar,html body.text-active .topline,html body.text-active .page-foot{display:none!important}
html body.text-active #view .text-companion{position:fixed!important;z-index:46;top:var(--visual-top,0px)!important;left:0!important;width:100%!important;height:var(--phone-height,100dvh)!important;min-height:0!important;max-height:var(--phone-height,100dvh)!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;padding:0!important}
html body.text-active #view .text-companion>header{padding:10px 100px 8px 14px!important;flex:none!important}html body.text-active #view .text-thread{flex:1!important;min-height:0!important;max-height:none!important;overflow:auto!important}html body.text-active #view .text-compose{flex:none!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}html body.text-active #experience-controls{z-index:55;top:calc(var(--visual-top,0px) + 6px)!important}
@media(max-height:500px) and (orientation:landscape){html body.text-active #view .text-companion>header{padding-top:5px!important;padding-bottom:5px!important}html body.text-active #view .text-compose textarea{min-height:36px!important;height:36px!important}}
/* Scope to companion portraits; main-story staging and camera size stay intact. */
html body[data-page].immersive #view .vn-social .vn-reference-frame .story-portrait img{left:50%!important;transform:translateX(calc(-1 * var(--companion-center-x,50%)))!important}
html body[data-page].immersive #view .vn-social .vn-reference-frame .story-portrait{position:absolute!important;left:50%!important;right:auto!important;top:0!important;bottom:auto!important;transform:translateX(-50%)!important}