/* Immersive landscape screen: Fullscreen API first, CSS rotation fallback. */
.screen-mode-btn{flex:0 0 auto;background:#252b30;color:#fff;border:1px solid #41484d;
  border-radius:8px;min-height:39px;padding:7px 12px;font:700 12px Inter,system-ui,sans-serif;white-space:nowrap}
.screen-mode-btn:hover{background:#41494f}
.orientation-gate .start-immersive{min-height:48px;padding:13px 20px;font-size:14px}
.orientation-gate small{max-width:340px;font-size:11px;line-height:1.5;color:#687176}
html.immersive-mode .orientation-gate{display:none!important}
html.immersive-mode.force-landscape,html.immersive-mode.force-landscape body{
  width:var(--immersive-width,100vw);height:var(--immersive-height,100dvh);
  margin:0;min-height:0;overflow:hidden!important}
html.immersive-mode.force-landscape #app{width:100%;height:100%;overflow:hidden}
html.immersive-mode.force-landscape .app-shell{
  position:fixed!important;top:0!important;left:var(--immersive-width,100vw)!important;
  width:var(--immersive-height,100dvh)!important;height:var(--immersive-width,100vw)!important;
  max-height:none!important;min-height:0!important;
  transform:rotate(90deg);transform-origin:top left;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
html.immersive-mode.force-landscape .main-shell{min-height:100%;width:100%}
html.immersive-mode.force-landscape .content{max-width:none}
:fullscreen{background:#e5e7e8}
@media(max-width:750px){
  .screen-mode-btn{font-size:10px;min-height:34px;min-width:60px;padding:5px 6px}
  .topbar{gap:4px}
  .top-nav .nav-link{padding:5px 5px}
}
@media(max-width:420px){.screen-mode-btn{font-size:9px;padding:4px;min-width:57px}}
@media(max-width:950px) and (orientation:portrait){
  .orientation-gate{gap:12px}
  .orientation-gate p{margin:2px auto}
}