/* SWORD SPACE WARRIOR — definitive mobile-only UI correction, 2026-09-23 */

@media (max-width:700px) and (orientation:portrait){
  body.menu-active #startScreen.exact-menu{
    background-color:#020914!important;
    background-image:url("menu-background-mobile.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:cover!important;
  }

  body.menu-active #startScreen nav,
  #startScreen.exact-menu .exact-visible-menu{
    top:35.5%!important;
    width:min(340px,82vw)!important;
    max-width:82vw!important;
    gap:8px!important;
  }

  body.menu-active #startScreen nav > button,
  #startScreen.exact-menu .exact-visible-menu button{
    height:48px!important;
    min-height:48px!important;
    border-radius:7px!important;
    font-size:11px!important;
  }

  body.menu-active #startScreen nav > button:first-child,
  #startScreen.exact-menu .exact-visible-menu .exact-start{
    height:52px!important;
    min-height:52px!important;
    font-size:12px!important;
  }

  body.attract-title-active #startScreen.exact-menu::before{
    inset:-1%!important;
    background-color:#020914!important;
    background-image:url("menu-background-mobile.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:cover!important;
    transform-origin:50% 52%!important;
    animation:sword-mobile-title-zoom 30s cubic-bezier(.22,.61,.36,1) forwards!important;
  }

  @keyframes sword-mobile-title-zoom{
    from{transform:scale(.985)}
    to{transform:scale(1.025)}
  }
}

@media (max-width:700px){
  .menu-dialog{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100vh!important;
    inset:0!important;
    padding:12px!important;
    place-items:center!important;
    overflow:hidden!important;
  }

  .menu-dialog-card{
    position:relative!important;
    box-sizing:border-box!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    margin:0 auto!important;
    padding:18px 14px 15px!important;
    overflow:hidden!important;
    transform:none!important;
    left:auto!important;
    right:auto!important;
  }

  .menu-dialog-close{
    right:10px!important;
    top:10px!important;
    width:38px!important;
    height:38px!important;
  }

  .menu-dialog-card h2{
    margin:8px 44px 17px!important;
    font-size:clamp(22px,7vw,31px)!important;
    line-height:1.08!important;
  }

  .menu-dialog-body{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:calc(100dvh - 150px)!important;
    padding:2px 4px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .menu-dialog-body>*{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  .space-top10{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }

  .space-top10 th,.space-top10 td{
    padding:8px 3px!important;
    font-size:10px!important;
  }

  .control-table,.sector-list,.pickup-list{
    min-width:0!important;
    max-width:100%!important;
  }

  .control-table>div,.sector-list>div,.pickup-list>div{
    grid-template-columns:minmax(82px,34%) minmax(0,1fr)!important;
    gap:8px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .attract-dialog-prompt{
    width:auto!important;
    max-width:calc(100vw - 56px)!important;
  }
}