/* Spacious two-thumb layout. The hit regions follow the visible controls. */
@media (max-width:900px), (pointer:coarse) {
  #touch {
    --pad-left:calc(env(safe-area-inset-left) + clamp(24px,5vw,52px));
    --pad-right:calc(env(safe-area-inset-right) + clamp(24px,5vw,52px));
    --pad-bottom:calc(env(safe-area-inset-bottom) + 30px);
    height:250px;padding:0;display:block;
  }
  #touch .joystick-zone {position:absolute;left:var(--pad-left);bottom:calc(var(--pad-bottom) + 18px);width:112px;height:132px;transform:none;gap:8px;font-size:13px;color:#eff7e8;letter-spacing:2px;text-shadow:0 2px 5px #000;}
  #touch .joystick-ring {width:108px;height:108px;border-width:2px;border-color:#d9e9c491;}
  #touch .joystick-stick {width:52px;height:52px;}
  #touch .touch-actions {position:absolute;right:var(--pad-right);bottom:var(--pad-bottom);width:148px;height:218px;transform:none;pointer-events:none;}
  #touch .touch-action {pointer-events:auto;}
  #touch .attack-action {right:0;bottom:0;width:84px;height:84px;border-width:2px;}
  #touch .dash-action {right:0;bottom:102px;width:62px;height:62px;}
  #touch .loot-action {right:78px;bottom:162px;width:54px;height:54px;}
  #touch .heal-action {right:78px;bottom:86px;width:54px;height:54px;}
  #touch .touch-action b {font-size:24px;}
  #touch .attack-action b {font-size:32px;}
  #touch .touch-action small {font-size:11px;opacity:1;letter-spacing:0;color:#f1f5e9;}
  body.game-live header {padding:calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 22px) 0 calc(env(safe-area-inset-left) + 22px);}
  body.game-live header button {min-height:38px;font-size:13px;padding:8px 12px;}
  body.game-live .hud {top:calc(env(safe-area-inset-top) + 18px);left:calc(env(safe-area-inset-left) + 22px);right:calc(env(safe-area-inset-right) + 22px);}
  body.game-live .clock {margin-top:48px;}
  body.game-live .hud #run-kit {top:76px;font-size:13px;}
  body.game-live .place {left:calc(env(safe-area-inset-left) + 24px);bottom:calc(env(safe-area-inset-bottom) + 270px);max-width:calc(100vw - 48px);font-size:13px;}
  body.game-live #hint {bottom:calc(env(safe-area-inset-bottom) + 270px);max-width:calc(100vw - 48px);font-size:16px;line-height:1.45;white-space:normal;text-align:center;}
  body.game-live:has(#hint[style*="block"]) .place {visibility:hidden;}
  body.game-live #tutorial-guide {top:calc(env(safe-area-inset-top) + 122px);font-size:18px;line-height:1.55;max-width:calc(100vw - 40px);padding:12px 16px;}
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) #run-kit,
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) .place {visibility:hidden;}
  .rookie-actions {flex-wrap:wrap;gap:8px;}
  .rookie-actions:has(button:not([hidden])) {display:flex;}
  .rookie-actions:not(:has(button:not([hidden]))) {display:none;}
  #recruit-guide h3 {font-size:21px;line-height:1.45;}
  #recruit-guide .note {font-size:16px;line-height:1.65;}
  #recruit-guide>label {font-size:16px;}
}
@media (max-width:359px) {
  #touch .joystick-zone {width:100px;height:122px;}
  #touch .joystick-ring {width:96px;height:96px;}
  #touch .joystick-stick {width:48px;height:48px;}
  #touch .touch-actions {width:140px;}
  #touch .attack-action {width:80px;height:80px;}
  #touch .loot-action,#touch .heal-action {right:72px;width:52px;height:52px;}
  body.game-live .rookie-coach {width:calc(100vw - 36px);padding:12px 14px;}
  .rookie-coach>strong {font-size:21px;}
}
@media (max-height:520px) and (min-width:560px) {
  #touch {--pad-left:calc(env(safe-area-inset-left) + clamp(32px,5vw,58px));--pad-right:calc(env(safe-area-inset-right) + clamp(32px,5vw,58px));--pad-bottom:calc(env(safe-area-inset-bottom) + 24px);height:190px;}
  #touch .joystick-zone {bottom:var(--pad-bottom);width:116px;height:128px;}
  #touch .joystick-ring {width:108px;height:108px;}
  #touch .touch-actions {width:166px;height:172px;}
  #touch .attack-action {width:82px;height:82px;}
  #touch .dash-action {right:102px;bottom:0;width:58px;height:58px;}
  #touch .loot-action {right:0;bottom:104px;width:54px;height:54px;}
  #touch .heal-action {right:98px;bottom:90px;width:54px;height:54px;}
  body.game-live .clock {margin-top:46px;}
  body.game-live .hud #run-kit {top:90px;}
  body.game-live .place {display:none;}
  body.game-live #hint {bottom:calc(env(safe-area-inset-bottom) + 26px);max-width:calc(100vw - 420px);min-width:150px;}
  body.game-live .rookie-coach {top:calc(env(safe-area-inset-top) + 16px);width:min(560px,calc(100vw - 330px));padding:10px 14px;}
  .rookie-coach>strong {font-size:20px;margin:5px 0;line-height:1.35;}
  .rookie-coach>span {font-size:16px;line-height:1.4;}
  .rookie-coach>small {font-size:13px;line-height:1.4;}
  .rookie-actions button {font-size:15px;min-height:44px;padding:8px 10px;}
  body.game-live #tutorial-guide {top:calc(env(safe-area-inset-top) + 22px);max-width:calc(100vw - 340px);font-size:18px;}
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) #toast {bottom:10px;max-width:calc(100vw - 430px);font-size:14px;}
}
@media (max-height:380px) and (min-width:560px) {
  body.game-live .rookie-coach {top:12px;padding:8px 12px;}
  .rookie-coach>small {font-size:12px;}
  .rookie-coach>strong {font-size:20px;margin:4px 0;}
  .rookie-actions {margin-top:6px;gap:6px;}
  .rookie-progress {margin-top:6px;}
}
/* On a short landscape screen, keep the coach above the player and its two
   optional buttons in the empty strip between the thumb controls. */
@media (max-height:520px) and (min-width:560px) {
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) .rookie-coach {
    width:min(620px,calc(100vw - 230px));top:calc(env(safe-area-inset-top) + 12px);
  }
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) .hud>div:first-child {padding:5px;width:92px;}
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) .bar {width:80px;}
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) #sword-art-status {display:none;}
  body.game-live[data-recruit-lesson]:not([data-recruit-lesson='']) #back-camp {display:none;}
  body.game-live .rookie-coach .rookie-actions {
    position:absolute;left:50%;top:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 84px);
    transform:translateX(-50%);width:max-content;max-width:calc(100vw - 350px);margin:0;justify-content:center;
  }
  body.game-live .rookie-actions button {font-size:15px;padding:8px 10px;background:#243d35f5;box-shadow:0 3px 12px #0006;}
}