/* 手机适配：刘海安全区、竖屏 HUD 重排、触屏按键、小屏弹窗。放在 style.css 之后加载。 */
/* 老内核（微信 / QQ / UC / 手机自带浏览器常见 Chrome 57–72）：不认 env()、inset、min() 时的退路 */
:root { --sl: 0px; --sr: 0px; --st: 0px; --sb: 0px; }
@supports (padding: env(safe-area-inset-left)) {
  :root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
}
canvas#game, .screen, #hud { top: 0; right: 0; bottom: 0; left: 0; }
#touch { top: auto; right: 0; bottom: 0; left: 0; }
@supports not (width: min(1px, 2px)) {
  .hud-mid { width: 46vw; max-width: 520px; }
  .toast { width: 92vw; max-width: 640px; }
  .modal-box { max-width: 94vw; }
  .g-drawer { width: 42vw; max-width: 430px; }
  .boss-hud { width: 62vw; max-width: 560px; }
}
html, body { -webkit-touch-callout: none; overscroll-behavior: none; }

/* —— 安全区（横屏刘海、底部横条） —— */
.hud-left { left: calc(14px + var(--sl)); top: calc(12px + var(--st)); }
.hud-right { right: calc(14px + var(--sr)); top: calc(12px + var(--st)); }
.hud-mid { top: calc(10px + var(--st)); }
.t-left { left: calc(14px + var(--sl)); bottom: calc(16px + var(--sb)); }
.t-right { right: calc(14px + var(--sr)); bottom: calc(16px + var(--sb)); }
.tags { left: calc(14px + var(--sl)); }
.weather { left: calc(14px + var(--sl)); }
.combo { left: calc(18px + var(--sl)); }
.t-btn { touch-action: none; user-select: none; -webkit-user-select: none; }

/* —— 横屏矮屏（手机横着拿） —— */
@media (max-height: 500px) {
  .hud-left { width: 170px; }
  .bar { margin-bottom: 3px; }
  .bar-track { height: 12px; border-width: 2px; }
  .bar-ico { font-size: 14px; }
  .hud-sub { font-size: 12px; margin-left: 24px; }
  .build-meter { font-size: 10px; margin-top: 2px; }
  .hud-mid { width: min(40vw, 420px); }
  .hud-dist { margin-top: 12px; font-size: 16px; }
  .hud-right { font-size: 18px; } .hud-right .parts { font-size: 14px; }
  .hud-right button { padding: 3px 8px; }
  .weather { top: calc(96px + var(--st)); left: auto; right: calc(14px + var(--sr)); font-size: 13px; }
  .weather small { display: none; }
  .combo { top: 96px; font-size: 24px; }
  .boss-hud { top: 70px; } .boss-name { font-size: 14px; }
  .fork { top: 80px; font-size: 13px; } .fork button { padding: 4px 9px; font-size: 13px; }
  #h-cling { top: 120px; font-size: 17px; }
  .radar { top: 146px; font-size: 13px; }
  .toast div { font-size: 17px; }
  .tags { bottom: calc(84px + var(--sb)); max-width: 36vw; } .tag { font-size: 11px; padding: 2px 6px; }
  .t-btn { width: 58px; height: 58px; font-size: 20px; } .t-btn.t-gas { width: 82px; height: 82px; font-size: 18px; }
  .t-btn.t-small { width: 50px; height: 50px; }

  .modal-box { padding: 10px 14px; max-height: 96vh; border-radius: 14px; }
  .modal-box h2 { font-size: 20px; }
  .modal-box .sub { font-size: 12px; margin-bottom: 8px; }
  .cards { flex-wrap: nowrap; gap: 8px; }
  .card { width: min(31vw, 220px); min-width: 0; min-height: 0; padding: 7px 9px; gap: 3px; }
  .card .nm { font-size: 16px; } .card .ds { font-size: 12px; line-height: 1.4; } .card .lv, .card .key, .card .rar { font-size: 11px; }
  .row-btns { margin-top: 8px; } .row-btns .big-btn { font-size: 16px; padding: 6px 16px; }
  .shop { gap: 6px; margin: 6px 0; } .shop button { padding: 7px; font-size: 15px; }
  .res-table { font-size: 14px; } .res-table tr.total td { font-size: 18px; }
}

/* —— 竖屏（手机竖着拿） —— */
@media (max-aspect-ratio: 20/21) {
  .hud-mid { left: calc(10px + var(--sl)); right: 64px; width: auto; transform: none; }
  .hud-dist { margin-top: 12px; font-size: 16px; }
  .hud-right { top: calc(8px + var(--st)); font-size: 18px; } .hud-right .parts { font-size: 14px; }
  .hud-left { top: calc(78px + var(--st)); width: 46vw; }
  .bar { margin-bottom: 3px; }
  .bar-track { height: 12px; border-width: 2px; }
  .hud-sub { font-size: 13px; }
  .weather { top: calc(78px + var(--st)); left: auto; right: calc(10px + var(--sr)); font-size: 14px; max-width: 44vw; white-space: normal; text-align: right; }
  .weather small { font-size: 10px; }
  .boss-hud { top: calc(176px + var(--st)); width: 90vw; }
  .boss-name { font-size: 15px; }
  .combo { top: calc(220px + var(--st)); font-size: 26px; }
  .fork { top: calc(176px + var(--st)); font-size: 13px; gap: 6px; } .fork button { padding: 5px 9px; font-size: 14px; }
  #h-cling { top: calc(250px + var(--st)); font-size: 18px; }
  .radar { top: calc(276px + var(--st)); font-size: 13px; }
  .toast div { font-size: 17px; }
  .tags { bottom: calc(100px + var(--sb)); max-width: 60vw; } .tag { font-size: 11px; padding: 2px 6px; }
  /* 左手三个键横排，右手油门在最下、氮气 / 跳在上面竖排 */
  .t-left { gap: 8px; }
  .t-btn { width: 62px; height: 62px; font-size: 20px; }
  .t-right { flex-direction: column-reverse; align-items: center; gap: 10px; }
  .t-right .t-gas { order: -1; } .t-right #t-jump { order: 1; }
  .t-btn.t-gas { width: 92px; height: 92px; }
  .t-btn.t-small { width: 60px; height: 60px; }

  .modal-box { padding: 12px 12px; max-width: 96vw; max-height: 94vh; }
  .modal-box h2 { font-size: 21px; }
  .cards { flex-direction: column; align-items: stretch; gap: 8px; }
  .card { width: auto; min-width: 0; min-height: 0; padding: 8px 10px; gap: 3px; }
  .card .nm { font-size: 17px; } .card .ds { font-size: 13px; line-height: 1.45; }
  .card.mini { width: 140px; }
  .row-btns { flex-wrap: wrap; } .row-btns .big-btn { font-size: 17px; padding: 7px 16px; }
  .res-table { min-width: 0; font-size: 15px; }
}

/* 触屏没有键盘：去掉“按 1 选择”这类按键提示 */
@media (pointer: coarse) { .card .key, .fork kbd { display: none; } }
@media (max-height: 500px), (max-aspect-ratio: 20/21) {
  .draft-guide, .draft-note { display: none; }
  .card .lv { display: none; }
  .modal-box .draft-focus { margin: 4px 0 6px; }
  .draft-progress { margin-top: 4px; padding-top: 4px; font-size: 11px; line-height: 1.35; }
}

/* 竖屏提示：第一次进局时显示，可点掉 */
.rotate-tip { position: fixed; left: 50%; bottom: calc(240px + var(--sb)); transform: translateX(-50%); z-index: 7; background: #000c; color: #fff; border: 2px solid var(--yellow); border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: auto; animation: pop .25s; }
@media (min-aspect-ratio: 20/21) { .rotate-tip { display: none; } }