/* Use the real remaining viewport, never a second full-screen height inside it. */
body.v2-layout #app,body.v2-layout #m6App,body.v2-layout #onlineBattle,body.v2-layout #onlineOverlay,body.v2-layout .v40-overlay,body.v2-layout .v39-overlay,body.v2-layout .nw-flow{height:calc(var(--v2-viewport-height,100dvh) - var(--v2-bar-height))}
body.v2-layout .m6-screen{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding:12px;touch-action:pan-y}
body.v2-layout .m6-stack{min-height:calc(var(--v2-viewport-height,100dvh) - var(--v2-bar-height) - env(safe-area-inset-bottom) - 32px)}
body.v2-layout .m6-role-screen{display:flex;flex-direction:column;overflow-y:auto}
body.v2-layout .m6-role-screen>.m6-page-head{flex-shrink:0}
body.v2-layout .m6-role-stage-layout{height:auto;min-height:0;flex:1;display:grid;grid-template-rows:minmax(170px,1fr) auto;gap:16px;margin:10px auto 0}
body.v2-layout .m6-role-stage-grid{position:relative;top:auto;left:auto;right:auto;align-self:center;padding:18px 0}
body.v2-layout .m6-role-footer{position:relative;left:auto;right:auto;bottom:auto;align-self:end;margin-bottom:5px}
body.v2-layout .m6-role-countdown{top:0}
body.v2-layout .m6-role-stage-layout:has(.m6-role-countdown){padding-top:84px}
body.v2-layout .m6-stage-role img{height:clamp(105px,24dvh,200px)}
body.v2-layout .m6-main-panel,body.v2-layout .m6-top{flex-shrink:0}
body.v2-layout .m6-gesture-guide,body.v2-layout .m6-modal-layer{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
body.v2-layout .m6-guide-card,body.v2-layout .m6-modal{max-height:calc(var(--v2-viewport-height,100dvh) - var(--v2-bar-height) - 28px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
body.v2-layout .m6-modal .m6-ranking{max-height:178px;overflow:auto}
body.v2-layout .v40-overlay{overflow-y:auto;align-items:safe center}
body.v2-layout .v40-card{max-height:100%;overflow-y:auto}
body.v2-layout #naiwaEconomyPanel,body.v2-layout #naiwaReleaseV2{height:var(--v2-viewport-height,100dvh);bottom:auto;min-height:0;grid-template-rows:minmax(0,1fr)}
body.v2-layout #skinWardrobe{height:var(--v2-viewport-height,100dvh);bottom:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));grid-template-rows:minmax(0,1fr)}
body.v2-layout .sk-shell{height:min(760px,100%);max-height:100%;min-height:0}
body.v2-layout .sk-library{min-height:0}
body.v2-layout .sk-list,body.v2-layout #skSounds{min-height:0;overscroll-behavior:contain;touch-action:pan-y}
body.v2-layout .sk-stage-character{position:absolute;inset:6%;height:88%;max-height:88%;width:88%;max-width:88%;object-fit:contain}
body.v2-layout .v2-release-card{overflow-y:auto;overscroll-behavior:contain}
body.v2-layout #naiwaFeedbackLayer{height:var(--v2-viewport-height,100dvh);bottom:auto;overflow-y:auto;grid-template-rows:minmax(0,1fr)}
body.v2-layout #naiwaFeedbackCard{max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
/* The announcement and image viewer must use the same keyboard/browser-bar viewport. */
body.v2-layout .ndl-announcement,body.v2-layout .ndl-lightbox{height:var(--v2-viewport-height,100dvh);bottom:auto;min-height:0;box-sizing:border-box}
body.v2-layout .ndl-announcement__card{max-height:calc(var(--v2-viewport-height,100dvh) - max(28px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))}
body.v2-layout .ndl-announcement.is-intro .ndl-announcement__card{height:var(--v2-viewport-height,100dvh);max-height:var(--v2-viewport-height,100dvh)}
body.v2-layout .ndl-announcement.is-intro .ndl-carousel{height:var(--v2-viewport-height,100dvh);min-height:0}
@media(orientation:landscape) and (max-height:500px){
  body.v2-layout .m6-role-stage-layout{max-width:620px;grid-template-columns:minmax(0,1fr) minmax(180px,.9fr);grid-template-rows:minmax(170px,1fr);align-items:center;gap:16px}
  body.v2-layout .m6-role-stage-layout:has(.m6-role-countdown){grid-template-columns:1fr;grid-template-rows:minmax(155px,1fr) auto;padding-top:82px}
  body.v2-layout .m6-role-countdown{top:2px;bottom:auto;left:50%}
  body.v2-layout .m6-role-footer{align-self:center;padding:12px}
  body.v2-layout .m6-role-footer h2{font-size:18px}
  body.v2-layout .m6-stage-role img{height:115px}
}
@media(max-width:820px){
  body.v2-layout .sk-shell{height:100%;grid-template-rows:minmax(150px,40%) minmax(0,60%)}
  body.v2-layout .sk-preview{padding:12px 14px 10px}
  body.v2-layout .sk-preview-head{gap:8px;padding-right:40px}
  body.v2-layout .sk-preview-head h2{font-size:20px;line-height:1.2}
  body.v2-layout .sk-preview-actions{flex-wrap:wrap;gap:5px}
  body.v2-layout .sk-preview-actions button{min-height:34px;font-size:11px;padding:6px 8px}
  body.v2-layout .sk-library{padding:13px 12px 14px}
  body.v2-layout .sk-section-nav,body.v2-layout .sk-tabs{margin-right:0}
  body.v2-layout .sk-detail-actions{flex-shrink:0}
}
/* Mobile confirmations use the utility-bar gap, never cover page footers. */
@media(max-width:700px){body.v2-layout .sk-toast{top:calc(env(safe-area-inset-top) + 6px);bottom:auto;max-width:calc(100vw - 192px);padding:6px 9px;font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translate(-50%,-6px)}body.v2-layout .sk-toast.show{transform:translate(-50%,0)}}
@media(max-height:600px) and (max-width:700px){
  body.v2-layout .m6-role-stage-layout{grid-template-rows:minmax(150px,1fr) auto;gap:8px}
  body.v2-layout .m6-stage-role img{height:105px}
  body.v2-layout .m6-role-stage-grid{padding:12px 0}
  body.v2-layout .m6-role-footer{padding:11px}
  body.v2-layout .sk-shell{grid-template-rows:minmax(150px,36%) minmax(0,64%)}
  body.v2-layout .sk-preview-head h2{font-size:17px}
  body.v2-layout .sk-preview-head p{font-size:9px}
  body.v2-layout .sk-balance{padding:5px 7px}
  body.v2-layout .sk-preview-actions button{font-size:10px;padding:5px 6px;min-height:30px}
}
@media(max-height:450px) and (min-width:701px){
  body.v2-layout .sk-shell{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr)}
  body.v2-layout .sk-preview{padding:12px}
  body.v2-layout .sk-library{padding:12px}
  body.v2-layout .sk-library-head{display:none}
  body.v2-layout .sk-library:not(.show-sounds){grid-template-rows:auto auto minmax(0,1fr) auto!important}
  body.v2-layout .sk-detail-copy p{display:none}
}