html,body,.game-shell,canvas{width:100%;height:100%;min-height:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
button,a{touch-action:manipulation}

@supports(height:100dvh){
  html,body,.game-shell,canvas{height:100dvh}
}

@media (pointer:coarse),(max-width:780px){
  .hud{
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    top:max(8px,env(safe-area-inset-top));
    gap:8px;
    align-items:flex-start
  }

  .hud__cluster{
    min-width:0;
    max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 104px);
    gap:7px;
    padding:8px 9px;
    border-radius:13px
  }

  .metric{min-width:44px}
  .metric span{font-size:.48rem;letter-spacing:.08em}
  .metric strong{font-size:.78rem}
  .metric--zone{min-width:94px}
  .metric--zone strong{gap:4px}
  .metric--zone strong b{min-width:23px;height:19px;padding:0 4px;font-size:.62rem}
  .metric--zone strong em{max-width:62px;font-size:.59rem}

  .hud__actions{display:flex;gap:6px;flex:0 0 auto;pointer-events:auto}
  .icon-button{width:40px;height:40px;border-radius:12px}

  .player-bars{
    left:max(12px,env(safe-area-inset-left));
    top:calc(max(8px,env(safe-area-inset-top)) + 58px);
    width:min(260px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
    gap:6px
  }

  .bar-row{grid-template-columns:24px minmax(0,1fr) 58px;gap:6px;font-size:.58rem}
  .bar{height:6px}

  .boss-hud{
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + 112px);
    width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px)
  }
  .boss-hud span{font-size:.56rem;letter-spacing:.18em}
  .boss-hp-text{font-size:.72rem}
  .boss-bar{height:9px;margin-top:6px}

  .joystick{
    left:calc(env(safe-area-inset-left) + 14px);
    bottom:calc(env(safe-area-inset-bottom) + 16px);
    width:96px;
    height:96px
  }
  .joystick i{width:42px;height:42px;left:27px;top:27px}

  .dash-button{
    right:calc(env(safe-area-inset-right) + 16px);
    bottom:calc(env(safe-area-inset-bottom) + 18px);
    width:80px;
    height:80px
  }

  .overlay{
    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch
  }

  .panel{
    width:100%;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    padding:22px;
    border-radius:22px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch
  }
  .panel--hero{padding:24px}
  .panel--small{width:min(460px,100%)}
  .panel--upgrade{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}

  .kicker{margin-top:18px;font-size:.62rem}
  .panel h1{font-size:clamp(3.35rem,18vw,4.7rem);line-height:.76;margin:16px 0 20px}
  .panel h2{font-size:clamp(1.9rem,9vw,3rem);margin:10px 0 18px}
  .panel p{font-size:.86rem;line-height:1.5;margin-top:0}

  .controls{margin:16px 0;gap:8px}
  .controls span:not(:last-child){display:none}
  .controls span{padding:7px 9px}

  .primary-button,.secondary-button{min-height:46px;padding:13px 16px}
  .results{margin:18px 0;gap:9px}
  .results div{padding:14px}
  .results strong{font-size:1.4rem}

  .upgrade-grid{grid-template-columns:1fr;gap:10px}
  .upgrade-card{min-height:0;padding:16px;border-radius:16px}
  .upgrade-card .upgrade-symbol{font-size:2rem}
  .upgrade-card h3{margin:12px 0 6px;font-size:.98rem}
  .upgrade-card p{font-size:.78rem;line-height:1.38}

  .zone-banner{
    top:38%;
    min-width:0;
    width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px);
    padding:18px 20px
  }
}

@media (max-width:420px){
  .hud__cluster{gap:5px;padding:7px 8px;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 96px)}
  .metric{min-width:40px}
  .metric span{font-size:.45rem}
  .metric strong{font-size:.72rem}
  .metric--zone{min-width:82px}
  .metric--zone strong em{max-width:52px;font-size:.55rem}
  .icon-button{width:38px;height:38px}

  .player-bars{top:calc(max(8px,env(safe-area-inset-top)) + 54px);width:min(238px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px))}
  .bar-row{grid-template-columns:22px minmax(0,1fr) 54px;font-size:.54rem}

  .panel--hero{padding:20px}
  .panel h1{font-size:clamp(3rem,17vw,4rem);margin:14px 0 18px}
  .difficulty-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .difficulty-option{min-height:60px;padding:8px 5px}
  .difficulty-option strong{font-size:.66rem}
  .difficulty-option small{font-size:.48rem}

  .joystick{width:90px;height:90px}
  .joystick i{width:40px;height:40px;left:25px;top:25px}
  .dash-button{width:74px;height:74px}
  .boss-hud{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 104px)}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .hud{top:max(6px,env(safe-area-inset-top));left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px)}
  .hud__cluster{padding:6px 8px;gap:6px}
  .icon-button{width:36px;height:36px}

  .player-bars{top:calc(env(safe-area-inset-top) + 48px);left:calc(env(safe-area-inset-left) + 10px);width:220px;gap:4px}
  .bar-row{font-size:.52rem}

  .joystick{left:calc(env(safe-area-inset-left) + 12px);bottom:calc(env(safe-area-inset-bottom) + 10px);width:80px;height:80px}
  .joystick i{width:36px;height:36px;left:22px;top:22px}
  .dash-button{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);width:68px;height:68px;font-size:.7rem}
  .boss-hud{bottom:calc(env(safe-area-inset-bottom) + 88px);width:min(520px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 150px))}

  .overlay{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .panel{max-height:calc(100dvh - 16px);padding:14px 18px;border-radius:18px}
  .panel--hero{padding:14px 18px}
  .kicker{margin-top:7px;font-size:.56rem}
  .panel h1{font-size:3rem;line-height:.72;margin:8px 0 10px}
  .panel h2{font-size:1.8rem;margin:6px 0 10px}
  .panel--hero p,.controls{display:none}
  .difficulty-picker{margin:8px 0 6px}
  .difficulty-picker__label{margin-bottom:6px}
  .difficulty-option{min-height:48px;padding:5px 7px}
  .difficulty-option small{display:none}
  .primary-button,.secondary-button{min-height:40px;padding:9px 14px}
  .best{margin-top:7px}

  .panel--upgrade{max-height:calc(100dvh - 16px)}
  .panel--upgrade .kicker{margin-top:0}
  .upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .upgrade-card{padding:11px;min-height:0}
  .upgrade-card .upgrade-symbol{font-size:1.65rem}
  .upgrade-card h3{margin:7px 0 4px;font-size:.82rem}
  .upgrade-card p{font-size:.66rem;line-height:1.28}

  .zone-banner{top:45%;padding:12px 18px;width:min(420px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px))}
  .zone-banner strong{font-size:2rem;margin:5px 0}
}