/* Shared mobile rules for the homepage, menu and information pages. */
:root{--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:980px){
  body{padding-bottom:calc(76px + var(--mobile-safe-bottom,0px))}
  h1,h2,h3{overflow-wrap:anywhere}
  .site-header .nav-toggle{display:block;min-height:44px;margin-left:auto}
  .site-header .main-nav{
    display:none;position:absolute;top:100%;left:14px;right:14px;width:auto;
    padding:10px;background:#fffdf4;border:1px solid var(--line);border-radius:14px;
    max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow:auto;
  }
  .site-header .main-nav.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .site-header .main-nav a{min-width:0;min-height:44px;padding:10px 6px;white-space:normal;overflow-wrap:anywhere;align-content:center}
  .site-header .main-nav a em{display:none}
  .site-footer{grid-template-columns:minmax(0,1fr);gap:18px}
  .footer-links{justify-content:flex-start;flex-wrap:wrap}
  .footer-credit{text-align:left}
  .site-footer>*{min-width:0;overflow-wrap:anywhere}
  .mobile-bar,.mobile-actions{
    position:fixed;left:0;right:0;bottom:0;width:auto;z-index:80;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    padding-bottom:var(--mobile-safe-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);background:#fff;border-top:1px solid var(--line);
  }
  .mobile-bar a,.mobile-bar button,.mobile-actions a{
    min-width:0;min-height:58px;height:auto;padding:10px 4px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:12px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;
  }
  .mobile-bar a,.mobile-bar button{padding:10px 2px;font-size:clamp(11px,3vw,12px);border:0;border-right:1px solid var(--line);font-weight:850;background:#fff;color:var(--ink)}
  .mobile-bar button:nth-child(2){background:var(--primary);color:#fff}
  .mobile-bar button:nth-child(3){background:var(--mint-strong);color:#fff}
  .mobile-bar button:nth-child(4){background:var(--wood);color:#fff}
  .mobile-actions a{flex-direction:column;gap:4px;color:var(--ink)}
  .mobile-actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3}
  .cookie-banner,.notice-banner{bottom:calc(76px + var(--mobile-safe-bottom,0px))}
  .visit-actions{display:flex;flex-wrap:wrap;gap:8px}
  .visit-actions .arcade-btn{flex:1 1 90px;min-width:0;min-height:44px;padding:12px 8px;white-space:normal;overflow-wrap:anywhere}
  .category>summary{min-width:0;gap:12px}
  .category>summary h2{min-width:0;flex:1;overflow-wrap:anywhere}
  .category>summary>span{flex:0 0 24px;height:24px;line-height:24px;text-align:center;font-size:0}
  .category>summary>span:after{content:'+';font-size:24px}
  .category[open]>summary>span{transform:none}
  .category[open]>summary>span:after{content:'\2212'}
  .filters input,.filters select{font-size:16px}
  .dish>div,.prose{min-width:0;overflow-wrap:anywhere}
  .modal-panel{
    inset:12px;top:max(12px,env(safe-area-inset-top,0px));
    bottom:max(12px,var(--mobile-safe-bottom,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
    max-height:calc(100dvh - 24px);border-radius:16px;
  }
  .modal-panel header{flex:0 0 auto;position:static;min-height:0;padding:12px;gap:10px;flex-wrap:wrap}
  .modal-panel h2{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
  .modal-panel header .mini-btn{min-height:44px;white-space:normal}
  .modal-panel iframe{min-height:0;width:100%}
  #service-dialog[open]{display:flex;flex-direction:column;width:calc(100% - 24px);height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0}
  #service-dialog .service-bar{flex:0 0 auto;flex-wrap:wrap;min-width:0}
  #service-dialog .service-note{flex:0 0 auto}
  #service-frame{flex:1;min-height:0;height:auto}
  .manga-modal__panel,.ambiance-panel{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
  .manga-modal__close,.manga-modal__nav,.ambiance-panel__close{min-width:44px;min-height:44px}
}
@media(max-width:620px){
  .ramen-focus__copy{padding-right:0}
  .ramen-focus__copy h2{width:auto}
}
@media(max-width:980px) and (orientation:landscape){
  .site-header,body>header,.section,.hero,.site-footer,body>footer{
    padding-left:max(22px,env(safe-area-inset-left,0px));
    padding-right:max(22px,env(safe-area-inset-right,0px));
  }
}
@media(max-width:980px) and (max-height:500px){
  .modal-panel header{flex-direction:row;align-items:center}
  .modal-panel header div{width:auto}
  .service-fallback-card{display:none}
  .manga-modal__media img{max-height:42vh;max-height:42dvh}
}