/* Lucky Line Defense small viewport rescue layer.
   Keep the existing art direction, but stop the combat UI from overflowing or
   covering the play field in embedded/detail-page landscape windows. */
:root{
  --ll-tight-top: clamp(6px, 1.3vh, 12px);
  --ll-tight-x: clamp(8px, 1.2vw, 18px);
  --ll-tight-bottom: clamp(104px, 15vh, 132px);
}

#gameScreen.game-screen{
  width: 100%!important;
  max-width: 100%!important;
  min-width: 0!important;
  overflow: hidden!important;
}

#gameScreen .top-hud,
#gameScreen .field,
#gameScreen .bottom-hud{
  max-width: 100%!important;
}

#gameScreen .stat,
#gameScreen .mini-action,
#gameScreen .summon-main,
#gameScreen .auto-toggle{
  min-width: 0!important;
}

@media (min-width: 901px) and (max-height: 820px){
  #gameScreen.game-screen{
    height: 100dvh!important;
    max-height: 100dvh!important;
    padding: var(--ll-tight-top) var(--ll-tight-x) var(--ll-tight-bottom)!important;
    grid-template-rows: auto minmax(0, 1fr)!important;
    gap: 6px!important;
  }

  #gameScreen .game-top{
    grid-template-columns: clamp(52px, 5.2vw, 66px) minmax(0, 1fr)!important;
    gap: clamp(8px, 1vw, 12px)!important;
    align-items: center!important;
  }

  #gameScreen .pause-btn{
    width: clamp(52px, 5.2vw, 66px)!important;
    height: clamp(52px, 5.2vw, 66px)!important;
    border-radius: 16px!important;
    font-size: clamp(25px, 2.7vw, 32px)!important;
  }

  /* The detail-page iframe already steals vertical space. Keep desktop-wide
     small-height views on one compact HUD row instead of a two-row slab. */
  #gameScreen .top-hud{
    height: clamp(56px, 8.2vh, 64px)!important;
    min-height: clamp(56px, 8.2vh, 64px)!important;
    grid-template-columns: repeat(7, minmax(0, 1fr))!important;
    align-content: center!important;
    padding: 5px clamp(7px, .9vw, 12px)!important;
    border-radius: 16px!important;
  }

  #gameScreen .stat{
    height: auto!important;
    min-height: 38px!important;
    padding: 0 clamp(4px, .55vw, 8px)!important;
    column-gap: clamp(4px, .6vw, 7px)!important;
    border-right: 1px solid rgba(93,62,42,.14)!important;
  }

  #gameScreen .stat:last-child{
    border-right: 0!important;
  }

  #gameScreen .stat-ico{font-size: clamp(17px, 1.9vw, 22px)!important;}
  #gameScreen .stat-label{font-size: clamp(9px, 1vw, 12px)!important;}
  #gameScreen .stat strong{font-size: clamp(15px, 1.65vw, 19px)!important;}

  #gameScreen .field-wrap{
    height: clamp(300px, calc(100dvh - 255px), 430px)!important;
    min-height: 0!important;
    margin: 6px 0 0!important;
    overflow: visible!important;
  }

  #gameScreen .field{
    height: 100%!important;
    min-height: 0!important;
    border-radius: clamp(18px, 2.2vw, 28px)!important;
  }

  #gameScreen .path-ring{
    left: 10.5%!important;
    right: 10.5%!important;
    top: 12.5%!important;
    bottom: 13.5%!important;
    border-width: clamp(38px, 4.4vw, 58px)!important;
    border-radius: clamp(34px, 3.8vw, 50px)!important;
  }

  #gameScreen .path-ring:before{
    inset: calc(clamp(38px, 4.4vw, 58px) * -0.9)!important;
    border-radius: clamp(30px, 3.4vw, 46px)!important;
  }

  #gameScreen .spawn-road{
    height: clamp(38px, 4.4vw, 56px)!important;
  }

  #gameScreen .spawn-gate{
    width: clamp(56px, 6.3vw, 78px)!important;
    height: clamp(62px, 7vw, 86px)!important;
    left: 7.8%!important;
  }

  #gameScreen .spawn-gate:before{
    left: 28%!important;
    right: 20%!important;
    height: 60%!important;
  }

  #gameScreen .spawn-gate span{
    top: clamp(-36px, -3.9vw, -28px)!important;
    padding: 6px 11px!important;
    font-size: clamp(13px, 1.45vw, 17px)!important;
  }

  #gameScreen .platform-shell{
    left: 15.5%!important;
    right: 15.5%!important;
    top: 29.5%!important;
    bottom: 29.5%!important;
  }

  #gameScreen .board{
    gap: clamp(5px, .7vw, 8px)!important;
  }

  #gameScreen .slot{
    border-radius: clamp(8px, .9vw, 12px)!important;
  }

  #gameScreen .bottom-hud{
    bottom: max(8px, env(safe-area-inset-bottom))!important;
    width: min(760px, calc(100vw - 28px))!important;
    grid-template-columns: minmax(250px, .92fr) minmax(270px, 1.08fr)!important;
    gap: clamp(8px, 1.1vw, 14px)!important;
    align-items: end!important;
  }

  #gameScreen .bottom-pill{
    height: clamp(54px, 7.6vh, 66px)!important;
    border-radius: 16px!important;
  }

  #gameScreen .mini-action{
    font-size: clamp(15px, 1.5vw, 18px)!important;
    gap: 5px!important;
    white-space: nowrap!important;
  }

  #gameScreen .mini-action span{
    font-size: clamp(21px, 2.2vw, 27px)!important;
  }

  #gameScreen .summon-main{
    height: clamp(70px, 10vh, 86px)!important;
    border-radius: 22px!important;
  }

  #gameScreen .summon-main .cost{font-size: clamp(17px, 2vw, 22px)!important;}
  #gameScreen .summon-main strong{font-size: clamp(23px, 2.7vw, 30px)!important;}
  #gameScreen .auto-toggle{font-size: clamp(13px, 1.45vw, 17px)!important;}

  #gameScreen .notice-bar{
    bottom: calc(var(--ll-tight-bottom) - 98px)!important;
    max-width: min(600px, 70vw)!important;
    padding: 8px 14px!important;
    font-size: clamp(12px, 1.2vw, 15px)!important;
  }

  #gameScreen .boss-quick{
    right: max(8px, env(safe-area-inset-right))!important;
  }

  #gameScreen .boss-quick .challenge{
    width: clamp(66px, 7.4vw, 84px)!important;
    height: clamp(66px, 7.4vw, 84px)!important;
    border-radius: 18px!important;
    font-size: clamp(10px, 1.15vw, 12px)!important;
  }

  #gameScreen .boss-quick .challenge span{
    font-size: clamp(19px, 2vw, 24px)!important;
  }

  /* In cramped windows the full audio drawer is the main field blocker. Keep a
     small sound pill visible and remove the saved-open drawer body. */
  #gameScreen #luckyAudioPanel{
    top: calc(var(--ll-tight-top) + clamp(58px, 8.2vh, 66px) + 8px)!important;
    right: max(8px, env(safe-area-inset-right))!important;
    width: 44px!important;
    max-width: 44px!important;
    min-width: 44px!important;
    border-radius: 999px!important;
    overflow: hidden!important;
  }

  #gameScreen #luckyAudioPanel .head{
    width: 44px!important;
    height: 44px!important;
    min-height: 44px!important;
    padding: 0!important;
    display: grid!important;
    place-items: center!important;
    gap: 0!important;
  }

  #gameScreen #luckyAudioPanel .head span{
    font-size: 19px!important;
  }

  #gameScreen #luckyAudioPanel .head strong,
  #gameScreen #luckyAudioPanel .head small,
  #gameScreen #luckyAudioPanel .body{
    display: none!important;
  }

  #gameScreen .action-drawer{
    top: calc(var(--ll-tight-top) + 70px)!important;
    bottom: calc(var(--ll-tight-bottom) + 8px)!important;
    max-height: none!important;
  }
}

@media (min-width: 901px) and (max-height: 620px){
  :root{--ll-tight-bottom: 102px;}

  #gameScreen.game-screen{
    padding-top: 6px!important;
    padding-bottom: var(--ll-tight-bottom)!important;
  }

  #gameScreen .game-top{
    grid-template-columns: 48px minmax(0, 1fr)!important;
    gap: 6px!important;
  }

  #gameScreen .pause-btn{
    width: 48px!important;
    height: 48px!important;
    font-size: 24px!important;
  }

  #gameScreen .top-hud{
    height: 48px!important;
    min-height: 48px!important;
    padding: 3px 6px!important;
  }

  #gameScreen .stat{
    min-height: 34px!important;
    padding: 0 4px!important;
  }

  #gameScreen .stat-ico{font-size: 16px!important;}
  #gameScreen .stat-label{font-size: 9px!important;}
  #gameScreen .stat strong{font-size: 14px!important;}

  #gameScreen .field-wrap{
    height: clamp(260px, calc(100dvh - 210px), 350px)!important;
    margin-top: 4px!important;
  }

  #gameScreen .path-ring{
    border-width: clamp(30px, 4vw, 44px)!important;
  }

  #gameScreen .bottom-hud{
    bottom: 6px!important;
  }

  #gameScreen .bottom-pill{height: 50px!important;}
  #gameScreen .summon-main{height: 62px!important;}
  #gameScreen .summon-main .cost{font-size: 16px!important;}
  #gameScreen .summon-main strong{font-size: 22px!important;}
  #gameScreen .auto-toggle{display: none!important;}

  #gameScreen #luckyAudioPanel{
    top: 60px!important;
  }
}

@media (max-width: 900px){
  #gameScreen.game-screen{
    padding-left: max(8px, env(safe-area-inset-left))!important;
    padding-right: max(8px, env(safe-area-inset-right))!important;
  }

  #gameScreen .top-hud{
    max-height: 34vh!important;
    overflow: hidden!important;
  }

  #gameScreen #luckyAudioPanel .body{
    max-height: min(180px, 34vh)!important;
  }
}