/* 通常画面は現在の横幅とレイアウトを保ち、内容を縦にスクロールする。 */
html,body{width:100%;min-height:100%;max-width:100%;margin:0;overflow-x:hidden;background:var(--paper)}
img,canvas{max-width:100%}
.app-shell{width:100%;max-width:none;min-width:0;min-height:100dvh;margin:0;box-shadow:none}
.screen{min-width:0}
.app-shell,.topbar,.bottom-nav,.viewer-sheet{border-radius:0!important}
.bottom-nav{left:0;bottom:0;width:100%;max-width:none;transform:none}
.topbar{position:fixed;top:0;left:0;right:0;width:100%;height:calc(68px + env(safe-area-inset-top));padding-top:calc(10px + env(safe-area-inset-top))}
#app-main{padding-top:calc(68px + env(safe-area-inset-top))}
.bottom-nav{height:calc(78px + env(safe-area-inset-bottom));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.screen{min-height:calc(100dvh - 68px - env(safe-area-inset-top));padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* 写真は常にビューアの横幅いっぱい。端末差は縦の可変余白だけで吸収する。 */
.viewer-sheet{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;background:#0d1c22;overflow-x:hidden;overflow-y:auto}
.photo-stage{width:100%;max-width:none;justify-self:stretch;flex:none}
.viewer-info{padding:12px 18px 7px;flex:none;min-height:0}
.viewer-ranks{margin:9px 0 0}
.viewer-spacer{min-height:0;background:#0d1c22}
.viewer-controls{padding:8px 18px calc(14px + env(safe-area-inset-bottom));background:#0d1c22}
.viewer-sort{justify-content:center}

/* 縦幅が小さい場合も写真の横幅は変えず、縦方向の余白とUI間隔だけを縮める。 */
@media(max-height:600px){
  .viewer-header{height:56px;padding-top:7px;padding-bottom:7px}
  .viewer-info{padding-top:7px;padding-bottom:4px}
  .viewer-ranks{margin-top:5px}
  .viewer-ranks>span{padding-top:5px;padding-bottom:5px}
  .viewer-controls{padding-top:5px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
}

@media(min-width:760px){
  .app-shell{margin:0;min-height:100dvh}
  .bottom-nav{bottom:0}
}
.compact-screen-title{padding:2px 2px 16px}.compact-screen-title p{margin:0 0 5px;color:var(--red);font:700 9px 'DM Sans';letter-spacing:.14em}.compact-screen-title h1{margin:0;font-size:23px;line-height:1.3;letter-spacing:-.045em}