/* Compact viewport safety layer.
   This file intentionally does not redesign the game. It only tightens spacing,
   reserves collision zones, and scales the existing board/path/buttons so the
   current UI survives small browser windows. */
:root{
  --ll-safe-x: clamp(6px, 1.4vw, 28px);
  --ll-safe-top: clamp(8px, 1.8vh, 18px);
  --ll-compact-bottom: clamp(80px, 14vh, 124px);
  --ll-compact-field-radius: clamp(16px, 3vw, 30px);
}

.game-screen{
  min-width: 0!important;
  container-type: inline-size;
}

.game-screen *{
  min-width: 0;
}

/* The sound panel is injected after stylesheet load, so important rules are used
   to beat the runtime style block without touching the audio controller logic. */
#gameScreen #luckyAudioPanel{
  max-width: min(178px, calc(100vw - 20px))!important;
  right: max(8px, env(safe-area-inset-right))!important;
  top: calc(var(--ll-safe-top) + 82px)!important;
  transform: none!important;
}

#gameScreen #luckyAudioPanel .head{
  min-height: 42px!important;
}

#gameScreen #luckyAudioPanel .body{
  max-height: min(210px, calc(100dvh - 190px))!important;
  overflow: auto!important;
}

@media (max-width: 980px), (max-height: 680px){
  :root{
    --ll-compact-bottom: clamp(76px, 13.5vh, 112px);
  }

  .game-screen{
    padding: var(--ll-safe-top) var(--ll-safe-x) var(--ll-compact-bottom)!important;
    grid-template-rows: auto minmax(0, 1fr)!important;
    gap: 6px!important;
  }

  .game-top{
    grid-template-columns: clamp(50px, 7vw, 62px) minmax(0,1fr)!important;
    gap: clamp(6px, 1.2vw, 10px)!important;
  }

  .pause-btn{
    width: clamp(50px, 7vw, 62px)!important;
    height: clamp(50px, 7vw, 62px)!important;
    border-radius: 16px!important;
    font-size: clamp(24px, 4.1vw, 31px)!important;
  }

  .top-hud{
    height: clamp(58px, 11vh, 68px)!important;
    min-height: clamp(58px, 11vh, 68px)!important;
    grid-template-columns: repeat(7,minmax(0,1fr))!important;
    padding: clamp(5px, .9vw, 8px) clamp(6px, 1.1vw, 10px)!important;
    border-radius: 16px!important;
  }

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

  .stat-ico{font-size: clamp(18px, 2.7vw, 24px)!important;}
  .stat-label{font-size: clamp(10px, 1.45vw, 12px)!important;}
  .stat strong{font-size: clamp(16px, 2.4vw, 20px)!important;}

  .field-wrap{
    height: auto!important;
    min-height: 0!important;
    margin-top: 4px!important;
    overflow: visible!important;
  }

  .field{
    width: 100%!important;
    height: 100%!important;
    max-height: 100%!important;
    border-radius: var(--ll-compact-field-radius)!important;
  }

  .path-ring{
    border-width: clamp(38px, 6.1vw, 56px)!important;
    border-radius: clamp(34px, 5vw, 48px)!important;
  }

  .path-ring:before{
    inset: calc(clamp(38px, 6.1vw, 56px) * -0.92)!important;
    border-radius: clamp(28px, 4.6vw, 44px)!important;
  }

  .spawn-road{
    height: clamp(38px, 6.1vw, 54px)!important;
  }

  .spawn-gate{
    width: clamp(58px, 8.6vw, 76px)!important;
    height: clamp(64px, 9.4vw, 84px)!important;
  }

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

  .spawn-gate span{
    top: clamp(-38px, -5.2vw, -30px)!important;
    font-size: clamp(14px, 2.3vw, 18px)!important;
    padding: 6px 11px!important;
  }

  .platform-shell{
    left: 18.25%!important;
    right: 18.25%!important;
    top: 29%!important;
    bottom: 28.5%!important;
  }

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

  .bottom-hud{
    bottom: max(8px, env(safe-area-inset-bottom))!important;
    width: min(720px, calc(100vw - 18px))!important;
    grid-template-columns: minmax(250px,.95fr) minmax(260px,1.05fr)!important;
    gap: clamp(8px, 1.6vw, 14px)!important;
  }

  .bottom-pill{
    height: clamp(58px, 10vh, 68px)!important;
    border-radius: 16px!important;
  }

  .mini-action{
    font-size: clamp(15px, 2.2vw, 18px)!important;
    gap: 5px!important;
  }

  .mini-action span{
    font-size: clamp(22px, 3.4vw, 28px)!important;
  }

  .summon-main{
    height: clamp(74px, 13vh, 88px)!important;
    border-radius: 22px!important;
  }

  .summon-main .cost{font-size: clamp(18px, 3vw, 23px)!important;}
  .summon-main strong{font-size: clamp(24px, 3.8vw, 30px)!important;}

  .auto-toggle{
    font-size: clamp(14px, 2vw, 18px)!important;
    gap: 6px!important;
  }

  .boss-quick{
    right: max(8px, env(safe-area-inset-right))!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
  }

  .boss-quick .challenge{
    width: clamp(70px, 10vw, 86px)!important;
    height: clamp(70px, 10vw, 86px)!important;
    border-radius: 18px!important;
    font-size: clamp(11px, 1.65vw, 13px)!important;
  }

  .boss-quick .challenge span{font-size: clamp(20px, 3vw, 24px)!important;}

  .game-screen .action-drawer{
    top: calc(var(--ll-safe-top) + 76px)!important;
    bottom: calc(var(--ll-compact-bottom) + 8px)!important;
    max-height: none!important;
  }
}

@media (max-width: 760px), (max-height: 600px){
  :root{
    --ll-compact-bottom: clamp(76px, 15vh, 106px);
  }

  .top-hud{
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    height: auto!important;
    min-height: clamp(86px, 17vh, 104px)!important;
    align-content: center!important;
  }

  .stat{
    min-height: clamp(34px, 7vh, 43px)!important;
    border-right: 0!important;
  }

  .stat-ico{font-size: clamp(16px, 2.7vw, 20px)!important;}
  .stat-label{font-size: clamp(9px, 1.6vw, 11px)!important;}
  .stat strong{font-size: clamp(14px, 2.4vw, 17px)!important;}

  .field-wrap{
    margin-top: 5px!important;
  }

  .path-ring{
    left: 9.5%!important;
    right: 9.5%!important;
    top: 13%!important;
    bottom: 13.5%!important;
    border-width: clamp(30px, 5.9vw, 42px)!important;
    border-radius: clamp(26px, 4.8vw, 36px)!important;
  }

  .spawn-road{height: clamp(30px, 5.6vw, 42px)!important;}

  .spawn-gate{
    width: clamp(48px, 8vw, 62px)!important;
    height: clamp(52px, 8.8vw, 70px)!important;
  }

  .platform-shell{
    left: 16.75%!important;
    right: 16.75%!important;
    top: 30%!important;
    bottom: 30%!important;
  }

  .board{gap: clamp(4px, .8vw, 6px)!important;}

  .bottom-hud{
    width: min(620px, calc(100vw - 14px))!important;
    grid-template-columns: minmax(226px,.9fr) minmax(230px,1fr)!important;
    gap: 7px!important;
  }

  .bottom-pill{height: clamp(54px, 10vh, 62px)!important;}
  .summon-main{height: clamp(68px, 13vh, 78px)!important;}

  #gameScreen #luckyAudioPanel{
    width: auto!important;
    max-width: 150px!important;
    top: calc(var(--ll-safe-top) + 110px)!important;
  }

  #gameScreen #luckyAudioPanel:not(.open){
    width: 138px!important;
  }

  #gameScreen #luckyAudioPanel .head{
    padding: 7px 8px!important;
  }

  #gameScreen #luckyAudioPanel .head strong{font-size: 13px!important;}
  #gameScreen #luckyAudioPanel .head small{display:none!important;}
}

/* Extremely narrow browser windows cannot preserve the entire desktop toolbar in
   one row. In this case the actions keep the same visual language but stack into
   a safe two-line control dock rather than overlapping the field. */
@media (max-width: 520px){
  :root{--ll-compact-bottom: 148px;}

  .game-screen{
    padding-bottom: var(--ll-compact-bottom)!important;
  }

  .game-top{
    grid-template-columns: 50px minmax(0,1fr)!important;
  }

  .pause-btn{width:50px!important;height:50px!important;}

  .top-hud{
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    min-height: 132px!important;
  }

  .bottom-hud{
    grid-template-columns: 1fr!important;
    gap: 6px!important;
  }

  .bottom-pill{height: 52px!important;}
  .summon-main{height: 66px!important;}
  .auto-toggle{font-size: 14px!important;}

  .game-screen .action-drawer{
    top: 74px!important;
    bottom: 154px!important;
  }

  .boss-quick .challenge{
    width: 64px!important;
    height: 64px!important;
  }
}

@media (max-height: 520px){
  :root{--ll-compact-bottom: 82px;}

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

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

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

  .top-hud{
    grid-template-columns: repeat(7,minmax(0,1fr))!important;
    min-height: 48px!important;
    height: 48px!important;
    padding: 3px 5px!important;
  }

  .stat{min-height: 36px!important;padding:0 4px!important;}
  .stat-ico{font-size:16px!important;}
  .stat-label{font-size:9px!important;}
  .stat strong{font-size:14px!important;}

  .bottom-hud{
    width: min(650px, calc(100vw - 12px))!important;
    grid-template-columns: minmax(220px,.9fr) minmax(230px,1fr)!important;
    bottom: 6px!important;
  }

  .bottom-pill{height:50px!important;}
  .mini-action{font-size:14px!important;}
  .mini-action span{font-size:20px!important;}
  .summon-main{height:60px!important;}
  .summon-main .cost{font-size:16px!important;}
  .summon-main strong{font-size:22px!important;}
  .auto-toggle{display:none!important;}

  #gameScreen #luckyAudioPanel{
    top: 60px!important;
    max-width: 142px!important;
  }

  .game-screen .action-drawer{
    top: 60px!important;
    bottom: 88px!important;
  }
}