/* V3: fluid layouts shared by standalone pages and the persistent shell.
   Higher specificity deliberately wins over shell embedding rules. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body :focus-visible { outline:3px solid #9260cc; outline-offset:3px; }
body .shell-menu-toggle, body .shell-menu-close, body .shell-menu-backdrop { display:none; }
body .shell-main, body .shell-sidebar, body .mil-shell { height:100dvh; }
body .shell-sidebar { overflow-y:auto; overscroll-behavior:contain; }
body .shell-sidebar .side-nav { flex-shrink:0; }
body .shell-main { min-width:0; }
body .shell-viewport { min-height:0; }
html body .settings-content, html body .character-detail, html body .browser-grid { overflow-y:auto!important; }
@media (max-width:1000px), (max-height:600px) {
  html:not(:has(.mil-shell)), html:not(:has(.mil-shell)) body { height:auto!important; min-height:100%!important; overflow-x:clip!important; overflow-y:auto!important; }
  html body .panel-shell { height:auto!important; min-height:100dvh!important; overflow:visible!important; }
  html body :is(.dashboard,.episodes-stage,.wardrobe-stage,.shop-stage,.bank-stage,.gallery-stage,.characters-stage,.settings-stage,.hypeline-stage,.boutique-stage) { position:relative!important; height:auto!important; min-height:100dvh!important; overflow:visible!important; padding:14px!important; box-sizing:border-box!important; }
  html body :is(.content-stack,.episodes-content,.wardrobe-shell,.bank-shell,.gallery-shell,.characters-wrap,.settings-wrap,.hypeline-layout,.boutique-shell) { position:relative!important; inset:auto!important; width:100%!important; height:auto!important; max-height:none!important; min-height:0!important; margin:0!important; overflow:visible!important; box-sizing:border-box!important; }
  html body :is(.content-stack,.bank-currency-layout,.gallery-layout,.characters-layout,.settings-layout,.hypeline-layout,.boutique-shell) { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto!important; height:auto!important; gap:16px!important; }
  html body .content-stack { display:grid!important; }
  html body .content-stack>* { min-height:160px!important; }
  html body .story-banner { min-height:250px!important; }
  html body .story-copy { max-width:90%!important; padding:24px!important; }
  html body .story-copy p { font-size:13px!important; }
  html body .story-progress-row { grid-template-columns:minmax(80px,165px) minmax(40px,1fr) 32px!important; padding:8px 12px!important; }
  html body .community-card { grid-template-columns:minmax(0,1fr) 40%!important; }
  html body .community-copy { padding:20px!important; }
  html body .community-copy p { font-size:12px!important; }
  html body .community-links { flex-wrap:wrap!important; }
  html body .community-links a { width:auto!important; min-width:44px!important; min-height:40px!important; padding:8px!important; }
  html body .community-links a span { display:inline!important; }
  html body :is(.avatar-zone,.wardrobe-avatar-stage) { position:relative!important; inset:auto!important; width:100%!important; height:480px!important; max-height:70dvh!important; margin:16px auto 0!important; overflow:hidden!important; }
  html body .wardrobe-avatar-stage { translate:none!important; transform:none!important; }
  html body :is(.main-avatar,.wardrobe-avatar) { height:100%!important; max-height:100%!important; bottom:0!important; left:50%!important; }
  html body .wardrobe-stage.genetics-mode .wardrobe-avatar { height:177%!important; max-height:177%!important; bottom:-77%!important; }
  html body .wardrobe-shell { max-width:none!important; }
  html body .wardrobe-panel { flex:none!important; min-height:440px!important; }
  html body .wardrobe-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr))!important; overflow-y:auto!important; max-height:65dvh!important; }
  html body .wardrobe-mode-switch { position:relative!important; top:auto!important; justify-content:center!important; margin:8px 0!important; }
  html body .shop-side-tools, html body .wardrobe-side-tools { position:relative!important; inset:auto!important; display:flex!important; flex-wrap:wrap!important; justify-content:center!important; width:auto!important; margin:12px!important; }
  html body .valentine-outdoor { position:relative!important; inset:auto!important; width:100%!important; margin:12px 0!important; }
  html body .bank-currency-layout { display:grid!important; }
  html body .currency-hub { height:auto!important; grid-template-rows:auto auto auto!important; overflow:visible!important; }
  html body .currency-hub-info { height:auto!important; min-height:82px!important; overflow:visible!important; }
  html body .currency-pack-section { overflow:visible!important; }
  html body .combo-feature-card { height:auto!important; min-height:150px!important; grid-template-columns:64px minmax(0,1fr)!important; overflow:visible!important; }
  html body .combo-feature-values { grid-column:1/-1!important; }
  html body .combo-feature-card button { min-height:44px!important; }
  html body :is(.bank-currency-panel,.bank-currency-card,.gallery-albums,.gallery-browser,.gallery-detail,.characters-browser,.character-detail,.settings-menu,.settings-content,.settings-tab.active,.hypeline-profile-column,.hypeline-feed-column,.hypeline-right-column) { position:relative!important; inset:auto!important; height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; }
  html body .gallery-grid { overflow:visible!important; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))!important; }
  html body .gallery-tabs, html body .feed-tabs, html body .episode-filter, html body .character-filters { flex-wrap:wrap!important; height:auto!important; flex-basis:auto!important; min-height:44px!important; }
  html body .browser-grid { grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))!important; overflow:visible!important; }
  html body .settings-menu { display:flex!important; flex-wrap:wrap!important; gap:6px!important; }
  html body .settings-menu button { flex:1 1 130px!important; min-height:44px!important; }
  html body .settings-content { padding:18px!important; }
  html body .settings-tab.active { max-height:none!important; }
  html body .hypeline-layout { display:grid!important; }
  html body .hypeline-right-column { display:grid!important; grid-template-rows:auto!important; }
  html body .hypeline-feed-column { padding:0 0 72px!important; }
  html body .post-look-shell { max-width:100%!important; }
  html body .post-look-visual { height:400px!important; min-height:0!important; }
  html body .boutique-main-card { min-width:0!important; }
  html body .boutique-create-stage { grid-template-columns:minmax(0,1fr)!important; }
  html body .episode-feature { grid-template-columns:minmax(0,1fr)!important; height:auto!important; }
  html body .episode-grid { grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important; height:auto!important; overflow:visible!important; }
  html body .story-stage { height:100dvh!important; min-height:360px!important; }
  html body .dialogue-wrap { position:absolute!important; inset:auto 12px 16px!important; width:auto!important; margin:0!important; transform:none!important; max-width:calc(100% - 24px)!important; }
  html body .dialogue-box { min-height:100px!important; max-height:45dvh!important; overflow-y:auto!important; padding:28px 45px 24px 24px!important; }
  html body .dialogue-wrap.has-choices .choice-panel { max-height:40dvh!important; overflow-y:auto!important; }
  html body :is(.shop-cart-drawer,.hypeline-modal,.message-phone) { max-width:calc(100vw - 24px)!important; max-height:calc(100dvh - 24px)!important; overflow-y:auto!important; }
  html body .dev-stage { min-width:0!important; width:100%!important; padding:16px!important; box-sizing:border-box!important; }
}
@media (max-width:760px) {
  html:has(.mil-shell), html:has(.mil-shell) body { height:100%!important; overflow:hidden!important; }
  html body .mil-shell { display:block!important; height:100dvh!important; min-height:0!important; }
  html body .shell-main { height:100dvh!important; min-height:0!important; padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important; grid-template-rows:auto 62px minmax(0,1fr)!important; gap:8px!important; }
  html body .shell-header { min-height:62px!important; height:auto!important; padding:8px 10px!important; gap:8px!important; overflow:visible!important; }
  html body .shell-page-identity { flex:1; min-width:0; gap:6px; }
  html body .shell-page-icon, html body #shellPageKicker { display:none; }
  html body #shellPageTitle { font-size:20px; overflow-wrap:anywhere; }
  html body .shell-viewport { height:100%!important; min-height:0!important; }
  html body .shell-menu-toggle, html body .shell-menu-close { display:grid!important; place-items:center; flex:none; width:44px; height:44px; border:1px solid #dfceef; border-radius:14px; background:#f6efff; color:#765491; font:800 22px Nunito,sans-serif; cursor:pointer; }
  html body .shell-menu-close { margin-left:auto; }
  html body .shell-sidebar { display:none!important; position:fixed!important; inset:0 auto 0 0!important; width:min(300px,88vw)!important; height:100dvh!important; z-index:1001!important; padding-top:max(12px,env(safe-area-inset-top)); box-sizing:border-box; overflow-y:auto!important; }
  html body .shell-sidebar .nav-item { min-height:44px; }
  html body .shell-sidebar .side-nav { display:flex!important; flex-direction:column!important; height:auto!important; overflow:visible!important; padding:0!important; gap:4px!important; }
  html body .shell-sidebar .nav-item, html body .shell-sidebar .nav-item:nth-child(n+8) { display:flex!important; height:auto!important; min-height:44px!important; font-size:12px; }
  html body .shell-sidebar .nav-item { justify-content:flex-start!important; gap:12px!important; padding:10px 16px!important; }
  html body .shell-sidebar .nav-item>span { display:inline!important; font-size:13px!important; }
  html body .shell-sidebar .nav-item[hidden] { display:none!important; }
  html body .shell-sidebar .brand, html body .shell-sidebar .profile-card { display:block!important; }
  html body .shell-sidebar .profile-text, html body .shell-sidebar .profile-open, html body .shell-sidebar .level-line, html body .shell-sidebar .xp-track, html body .shell-sidebar .logout-button span { display:revert!important; }
  html body .shell-sidebar .profile-head { display:grid!important; grid-template-columns:40px minmax(0,1fr) 26px!important; gap:8px!important; }
  html body .shell-sidebar .profile-text { display:flex!important; flex-direction:column!important; }
  html body .shell-sidebar .level-line { display:flex!important; justify-content:space-between!important; }
  body:has(.mil-shell.menu-open) .mil-ve-launch { display:none!important; }
  html body .shell-sidebar .profile-card { flex-shrink:0; }
  html body .mil-shell.menu-open .shell-sidebar { display:flex!important; transform:none; visibility:visible; }
  html body .shell-menu-backdrop:not([hidden]) { display:block; position:fixed; inset:0; border:0; background:#30244480; z-index:1000; }
  html body .shell-wallet { display:none!important; }
}
@media (max-width:520px) {
  html body .bottom-grid, html body .community-card, html body .settings-grid.two { grid-template-columns:minmax(0,1fr)!important; }
  html body .community-card { height:auto!important; min-height:230px!important; }
  html body .community-art { min-height:150px; }
  html body .story-copy { max-width:100%!important; padding:18px!important; }
  html body .story-copy h1 { font-size:26px!important; }
  html body .story-progress-row { gap:6px!important; }
  html body .bank-tabs, html body .boutique-tabs { flex-wrap:wrap!important; }
  html body .currency-pack-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html body :is(.bank-title,.bank-heading,.gallery-browser-head,.tab-heading,.setting-row,.field-card) { min-width:0; flex-wrap:wrap; }
  html body .login-page { padding:8px; }
  html body .topbar-nav { flex-wrap:wrap; }
  html body .account-modal { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
  html body .story-tools { gap:4px; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  body .shell-sidebar { transition:none!important; }
}