/* Lucky Line Defense mobile mode.
   Scope note: this file must never touch the lobby/menu screen. The lobby keeps
   lucky-line-lobby.css exactly as-is. Only the in-game combat screen is split
   into a mobile-specific portrait layout. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px){
  :root{
    --ll-mobile-x: max(7px, env(safe-area-inset-left));
    --ll-mobile-right: max(7px, env(safe-area-inset-right));
    --ll-mobile-top: 6px;
    --ll-mobile-controls: 132px;
    --ll-mobile-hud: 82px;
  }

  body:has(#gameScreen:not(.hidden)){
    overflow: hidden!important;
    overscroll-behavior: none!important;
    touch-action: manipulation;
    background: #102818!important;
  }

  body:has(#gameScreen:not(.hidden)) .app{
    width: 100%!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow: hidden!important;
  }

  #gameScreen.game-screen{
    width: 100%!important;
    height: 100dvh!important;
    min-height: 0!important;
    max-height: 100dvh!important;
    overflow: hidden!important;
    display: grid!important;
    grid-template-rows: auto minmax(0, 1fr)!important;
    gap: 5px!important;
    padding: var(--ll-mobile-top) var(--ll-mobile-right) calc(var(--ll-mobile-controls) + max(7px, env(safe-area-inset-bottom))) var(--ll-mobile-x)!important;
    background: radial-gradient(circle at 50% 34%, #74b837 0, #4f9429 42%, #183f20 78%, #0b2114 100%)!important;
  }

  #gameScreen .game-top{position: relative!important;z-index: 40!important;display: grid!important;grid-template-columns: 48px minmax(0, 1fr)!important;gap: 7px!important;align-items: stretch!important;padding: 0!important;}
  #gameScreen .pause-btn{width: 48px!important;height: var(--ll-mobile-hud)!important;border-radius: 16px!important;font-size: 27px!important;align-self: stretch!important;box-shadow: 0 7px 16px rgba(22, 14, 8, .22)!important;}

  #gameScreen .top-hud{
    width: 100%!important;
    height: var(--ll-mobile-hud)!important;
    min-height: var(--ll-mobile-hud)!important;
    max-height: var(--ll-mobile-hud)!important;
    display: grid!important;
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    grid-auto-rows: minmax(24px, 1fr)!important;
    align-content: center!important;
    gap: 1px 3px!important;
    padding: 5px 6px!important;
    border-radius: 16px!important;
    overflow: hidden!important;
    box-shadow: 0 8px 18px rgba(32, 19, 9, .22)!important;
  }

  #gameScreen .stat{height: auto!important;min-height: 0!important;display: grid!important;grid-template-columns: 15px minmax(0, 1fr)!important;grid-template-rows: 10px 14px!important;column-gap: 3px!important;align-items: center!important;padding: 0 1px!important;border-right: 0!important;}
  #gameScreen .stat-ico{grid-row: 1 / 3!important;font-size: 14px!important;line-height: 1!important;}
  #gameScreen .stat-label{font-size: 8px!important;line-height: 1!important;white-space: nowrap!important;overflow: hidden!important;text-overflow: ellipsis!important;}
  #gameScreen .stat strong{font-size: 13px!important;line-height: 1!important;white-space: nowrap!important;overflow: hidden!important;text-overflow: ellipsis!important;}

  #gameScreen .field-wrap{position: relative!important;z-index: 2!important;width: 100%!important;height: 100%!important;min-height: 0!important;margin: 0!important;display: flex!important;align-items: stretch!important;justify-content: center!important;overflow: visible!important;}
  #gameScreen .field{width: min(100%, 430px)!important;height: 100%!important;min-height: 0!important;max-height: 100%!important;margin: 0 auto!important;border-radius: 20px!important;overflow: hidden!important;aspect-ratio: auto!important;}

  #gameScreen .path-ring{left: 7.2%!important;right: 7.2%!important;top: 7.4%!important;bottom: 8.8%!important;border-width: clamp(24px, 6.7vw, 34px)!important;border-radius: clamp(30px, 8vw, 46px)!important;}
  #gameScreen .path-ring:before{inset: calc(clamp(24px, 6.7vw, 34px) * -0.88)!important;border-radius: clamp(26px, 7vw, 42px)!important;}
  #gameScreen .spawn-road{left: 0!important;bottom: 8.7%!important;width: 24%!important;height: clamp(27px, 7.4vw, 36px)!important;}
  #gameScreen .spawn-gate{left: 6.2%!important;bottom: 5.8%!important;width: clamp(46px, 12vw, 58px)!important;height: clamp(52px, 13.4vw, 66px)!important;border-radius: 24px 24px 9px 9px!important;}
  #gameScreen .spawn-gate:before{left: 28%!important;right: 20%!important;bottom: 9px!important;height: 56%!important;border-radius: 18px 18px 5px 5px!important;}
  #gameScreen .spawn-gate span{top: -28px!important;padding: 5px 9px!important;border-radius: 10px 10px 10px 4px!important;font-size: 13px!important;}

  #gameScreen .platform-shell{left: 22%!important;right: 14%!important;top: 13.5%!important;bottom: 13.5%!important;z-index: 3!important;}
  #gameScreen .board{width: 100%!important;height: 100%!important;display: grid!important;grid-template-columns: repeat(3, minmax(0, 1fr))!important;grid-template-rows: repeat(6, minmax(0, 1fr))!important;grid-auto-flow: row!important;gap: clamp(3px, 1.15vw, 6px)!important;padding: 0!important;}
  #gameScreen .slot{width: 100%!important;height: 100%!important;min-width: 0!important;min-height: 0!important;border-radius: clamp(9px, 2.7vw, 14px)!important;border-width: 2px!important;}
  #gameScreen .unit.sprite-card{width: 82%!important;height: 82%!important;}

  #gameScreen .sprite-bust{width: clamp(30px, 8.8vw, 42px)!important;height: clamp(30px, 8.8vw, 42px)!important;min-width: clamp(30px, 8.8vw, 42px)!important;min-height: clamp(30px, 8.8vw, 42px)!important;max-width: clamp(30px, 8.8vw, 42px)!important;max-height: clamp(30px, 8.8vw, 42px)!important;flex-basis: clamp(30px, 8.8vw, 42px)!important;}
  #gameScreen .unit.sprite-card:before{width: clamp(34px, 9.8vw, 46px)!important;height: clamp(16px, 4.8vw, 22px)!important;}
  #gameScreen .unit.sprite-card[data-stack="2"]::after,#gameScreen .unit.sprite-card[data-stack="3"]::after{right: -8px!important;top: -9px!important;min-width: 22px!important;height: 22px!important;font-size: 10px!important;}

  #gameScreen .bottom-hud{position: fixed!important;left: 0!important;right: 0!important;bottom: max(6px, env(safe-area-inset-bottom))!important;transform: none!important;z-index: 70!important;width: 100%!important;max-width: 100%!important;display: grid!important;grid-template-columns: 1fr!important;align-items: stretch!important;gap: 5px!important;padding: 0 7px!important;pointer-events: none!important;}
  #gameScreen .bottom-pill,#gameScreen .summon-wrap{pointer-events: auto!important;}
  #gameScreen .bottom-pill{order: 1!important;height: 47px!important;display: grid!important;grid-template-columns: repeat(3, minmax(0, 1fr))!important;border-radius: 15px!important;overflow: hidden!important;}
  #gameScreen .mini-action{font-size: 15px!important;gap: 4px!important;white-space: nowrap!important;}
  #gameScreen .mini-action span{font-size: 20px!important;}
  #gameScreen .summon-wrap{order: 2!important;width: 100%!important;display: grid!important;justify-items: stretch!important;gap: 2px!important;}
  #gameScreen .summon-main{width: 100%!important;height: 56px!important;border-radius: 18px!important;box-shadow: 0 5px 0 rgba(140,75,13,.35), 0 10px 18px rgba(73,43,12,.2)!important;}
  #gameScreen .summon-main .cost{font-size: 16px!important;}
  #gameScreen .summon-main strong{font-size: 23px!important;}
  #gameScreen .auto-toggle{justify-content: center!important;gap: 6px!important;height: 18px!important;font-size: 11px!important;line-height: 1!important;}
  #gameScreen .auto-toggle i{width: 32px!important;height: 17px!important;}
  #gameScreen .auto-toggle i:before{width: 13px!important;height: 13px!important;}
  #gameScreen .auto-toggle input:checked + i:before{left: 17px!important;}

  #gameScreen .notice-bar{position: fixed!important;left: 50%!important;bottom: calc(var(--ll-mobile-controls) + max(10px, env(safe-area-inset-bottom)))!important;transform: translateX(-50%)!important;z-index: 68!important;max-width: calc(100vw - 24px)!important;padding: 6px 11px!important;font-size: 11px!important;line-height: 1.2!important;white-space: nowrap!important;overflow: hidden!important;text-overflow: ellipsis!important;}

  #gameScreen .boss-quick{position: fixed!important;right: max(8px, env(safe-area-inset-right))!important;top: 55%!important;transform: translateY(-50%)!important;z-index: 45!important;opacity: .88!important;}
  #gameScreen .boss-quick .challenge{width: 52px!important;height: 52px!important;border-radius: 16px!important;font-size: 9px!important;gap: 0!important;padding: 3px!important;}
  #gameScreen .boss-quick .challenge span{font-size: 17px!important;}
  #gameScreen .boss-quick .challenge small{font-size: 9px!important;max-width: 44px!important;}

  #gameScreen #luckyAudioPanel{position: fixed!important;top: calc(var(--ll-mobile-top) + var(--ll-mobile-hud) + 7px)!important;right: max(8px, env(safe-area-inset-right))!important;left: auto!important;width: 40px!important;min-width: 40px!important;max-width: 40px!important;height: 40px!important;border-radius: 999px!important;overflow: hidden!important;z-index: 65!important;transform: none!important;}
  #gameScreen #luckyAudioPanel .head{width: 40px!important;height: 40px!important;min-height: 40px!important;padding: 0!important;display: grid!important;place-items: center!important;gap: 0!important;}
  #gameScreen #luckyAudioPanel .head span{font-size: 18px!important;}
  #gameScreen #luckyAudioPanel .head strong,#gameScreen #luckyAudioPanel .head small,#gameScreen #luckyAudioPanel .body{display: none!important;}

  #gameScreen .action-drawer{position: fixed!important;left: 7px!important;right: 7px!important;top: calc(var(--ll-mobile-top) + var(--ll-mobile-hud) + 10px)!important;bottom: calc(var(--ll-mobile-controls) + 10px + max(7px, env(safe-area-inset-bottom)))!important;width: auto!important;max-width: none!important;max-height: none!important;transform: none!important;z-index: 80!important;}
  #gameScreen .drawer-grid{grid-template-columns: 1fr!important;}
  #gameScreen .unit-popup.selected-actions{z-index: 72!important;}
  #gameScreen .unit-action-panel{grid-template-columns: 44px 82px!important;grid-template-rows: 44px 44px!important;gap: 5px!important;}
  #gameScreen .unit-delete-btn{width: 44px!important;height: 44px!important;font-size: 23px!important;}
  #gameScreen .unit-combine-btn{height: 42px!important;font-size: 14px!important;}
  #gameScreen .unit-mini-card{min-width: 82px!important;padding: 5px 6px!important;font-size: 9px!important;}
  #gameScreen .unit-mini-card b{font-size: 12px!important;}
  #gameScreen .boss-battle-hud{left: 7px!important;right: 7px!important;max-width: calc(100vw - 14px)!important;}
}

@media (max-width: 390px){
  :root{--ll-mobile-controls: 124px;--ll-mobile-hud: 76px;}
  #gameScreen .game-top{grid-template-columns: 44px minmax(0, 1fr)!important;gap: 5px!important;}
  #gameScreen .pause-btn{width: 44px!important;}
  #gameScreen .top-hud{padding: 4px 5px!important;gap: 1px 2px!important;}
  #gameScreen .stat{grid-template-columns: 14px minmax(0, 1fr)!important;grid-template-rows: 9px 13px!important;}
  #gameScreen .stat-ico{font-size: 13px!important;}
  #gameScreen .stat-label{font-size: 7.5px!important;}
  #gameScreen .stat strong{font-size: 12px!important;}
  #gameScreen .platform-shell{left: 21.5%!important;right: 13.5%!important;}
  #gameScreen .bottom-pill{height: 45px!important;}
  #gameScreen .summon-main{height: 53px!important;}
  #gameScreen .summon-main strong{font-size: 21px!important;}
  #gameScreen .mini-action{font-size: 14px!important;}
  #gameScreen .mini-action span{font-size: 19px!important;}
}

@media (max-height: 660px) and (max-width: 900px){
  :root{--ll-mobile-controls: 112px;--ll-mobile-hud: 70px;}
  #gameScreen.game-screen{gap: 4px!important;padding-top: 4px!important;}
  #gameScreen .game-top{grid-template-columns: 42px minmax(0, 1fr)!important;gap: 5px!important;}
  #gameScreen .pause-btn{width: 42px!important;font-size: 22px!important;}
  #gameScreen .top-hud{padding: 4px 5px!important;}
  #gameScreen .stat{grid-template-columns: 13px minmax(0, 1fr)!important;grid-template-rows: 8px 12px!important;}
  #gameScreen .stat-ico{font-size: 12px!important;}
  #gameScreen .stat-label{font-size: 7px!important;}
  #gameScreen .stat strong{font-size: 11px!important;}
  #gameScreen .bottom-pill{height: 42px!important;}
  #gameScreen .summon-main{height: 49px!important;}
  #gameScreen .auto-toggle{display: none!important;}
  #gameScreen .notice-bar{display: none!important;}
}