/* =========================================================================
   移动端适配样式（覆盖 style.css，加载在最后）
   ========================================================================= */

/* ---------------- 全局：禁掉手机上的手势干扰 ---------------- */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
body.is-mobile #game { touch-action: none; }

/* 安全区（刘海 / 挖孔 / 手势条） */
body.is-mobile .battle-top-actions {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}
body.is-mobile .touch-controls {
  bottom: max(4px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* =========================================================================
   关键：手机横屏这一档
   手机横过来大致是 700~960 宽 × 320~480 高。
   这个区间落在 style.css 的「桌面布局」里（min-width:821），
   菜单卡固定 300px 宽、内容高 480px，直接撑破 306px 高的舞台 →
   上下各被裁 24/32px，看起来就是「菜单跑出屏幕」。
   这里把它改成两栏自适应 + 压缩纵向间距，保证整块装得下。
   ========================================================================= */
@media (pointer: coarse) and (max-height: 560px) and (max-width: 1000px) {

  /* --- 顶栏压薄 --- */
  .topbar {
    padding: max(6px, env(safe-area-inset-top)) 14px 6px;
    min-height: 0;
  }
  .brand-mini { gap: 8px; font-size: 10px; }
  .brand-mini b { font-size: 12px; }
  .brand-mini span:last-child { display: none; }
  .topbar-right { gap: 7px; }
  .icon-btn { width: 34px; height: 34px; }
  .net-pill {
    padding: 5px 9px;
    font-size: 9px;
    white-space: nowrap;
  }
  /* 手机上一堆药丸挤在一起，只留联机状态和延迟 */
  .topbar-right .online-pill,
  .topbar-right .gamepad-pill { display: none !important; }

  /* --- 主舞台：不再用 justify-content: space-between 把菜单挤到屏幕外 --- */
  .title-stage {
    padding: 4px 14px 4px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    overflow: hidden;
  }

  /* 文案区收窄 */
  .title-copy {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 52%;
  }
  .title-copy::before { inset: -16px -28px -18px -20px; }
  .sticker { font-size: 9px; padding: 5px 8px 4px; letter-spacing: .1em; }
  .title-kicker { margin: 7px 0 3px; font-size: 8px; letter-spacing: .18em; }
  .game-logo {
    font-size: clamp(34px, 7.4vh, 58px);
    line-height: .92;
    letter-spacing: -.04em;
  }
  .game-logo::after { display: none; }
  .title-ribbon { margin-top: 9px; font-size: 8px; gap: 6px; }
  .title-desc {
    margin-top: 7px;
    font-size: 9px;
    line-height: 1.55;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .title-desc br { display: none; }
  .title-tags { display: none; }
  .game-jam-note,
  .title-credit { display: none; }

  /* --- 菜单卡：关键修复，改成能缩的高度 --- */
  .menu-card {
    flex: 0 0 clamp(212px, 30vw, 274px);
    padding: 12px 14px 8px;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .menu-card::-webkit-scrollbar { width: 0; height: 0; }
  .menu-head { padding-bottom: 8px; margin-bottom: 3px; gap: 7px; }
  .menu-head span { font-size: 8px; letter-spacing: .14em; }
  .menu-head b { font-size: 11px; }
  .menu-btn { padding: 7px 2px; gap: 9px; border-bottom-color: rgba(255,255,255,.05); }
  .menu-btn:hover, .menu-btn:focus-visible { padding-left: 6px; padding-right: 6px; }
  .menu-index { flex: 0 0 16px; font-size: 8px; }
  .menu-label { gap: 0; }
  .menu-label b { font-size: 14px; line-height: 1.25; }
  .menu-label small { font-size: 8px; line-height: 1.3; }
  .menu-arrow { font-size: 12px; }
  .menu-foot { padding-top: 6px; font-size: 8px; gap: 6px; }

  /* 底部滚动条 / 角标在横屏手机上纯浪费高度 */
  .title-foot { padding: 0 14px 4px; }
  .ticker { display: none; }
  .title-credit { display: none; }

  /* 装饰元素会盖住文字，小屏直接减到很淡 */
  .hero-fighters { opacity: .18; }
  .big-word { font-size: clamp(110px, 26vh, 190px); opacity: .6; }
  .big-word.w4 { display: none; }
}

/* 更矮的一档（320~390 高，老机型 / 开了手势条）再压一次 */
@media (pointer: coarse) and (max-height: 400px) {
  .title-stage { padding: 2px 10px; gap: 8px; }
  .game-logo { font-size: clamp(28px, 7vh, 42px); }
  .title-ribbon { margin-top: 6px; }
  .title-desc { -webkit-line-clamp: 1; font-size: 8px; }
  .menu-card { flex-basis: clamp(196px, 27vw, 232px); padding: 9px 11px 6px; }
  .menu-btn { padding: 5px 2px; }
  .menu-label b { font-size: 12.5px; }
  .menu-label small { display: none; }
  .menu-head { padding-bottom: 6px; }
  .menu-foot span:last-child { display: none; }
}

/* =========================================================================
   联机页：手机上必须一屏装下（不进滚动，滚动条会抢触摸）
   ========================================================================= */
@media (pointer: coarse) and (max-height: 560px) {
  /* 整页变成 flex 列：subbar / 面板 / 底栏 三段，面板自己吃掉剩余空间。
     原来 online-layout 是 flex:1 + 面板高度 auto，内容一多就顶到 online-bottom
     后面去，房号那三个按钮就被压住了。 */
  .online-screen {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }
  .online-layout {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 12px 4px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* 手机上那块插画纯占地方，收掉 */
  .online-art { display: none; }
  .online-panel {
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 12px 16px 12px;
  }
  .online-panel .panel-kicker { display: none; }
  .online-panel h2 { margin: 0 0 4px; font-size: clamp(20px, 4.6vh, 27px); }
  /* 说明文字在手机上没人读，压成一行 */
  .panel-desc {
    font-size: 9px;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .field-label { margin-bottom: 3px; font-size: 9px; }
  .nick-row { margin-bottom: 8px; }
  .text-input { height: 38px; font-size: 12px; padding: 0 11px; }
  .dice-btn { flex-basis: 38px; height: 38px; }
  .mode-tabs { margin-bottom: 8px; }
  .mode-tab { min-height: 32px; font-size: 11px; }
  .cta-btn.big { min-height: 46px; font-size: 14px; padding: 0 16px; }
  .cta-btn.big small { font-size: 9px; }
  .quick-status { padding: 8px 12px; }
  .lobby-rooms-wrap { margin-top: 7px; padding-top: 6px; }
  .lobby-rooms { max-height: 78px; overflow-y: auto; }
  .lobby-empty { font-size: 10px; }
  .lobby-room { padding: 5px 7px; }
  .lobby-room b { font-size: 11px; }
  .lobby-room small { font-size: 8px; }
  .lobby-code { font-size: 11px; padding: 3px 6px; }
  /* 底栏固定在最后一段，不再浮在内容上 */
  .online-bottom {
    flex: 0 0 auto;
    padding: 4px 12px max(4px, env(safe-area-inset-bottom));
    font-size: 9px;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--line);
  }
  .online-bottom .foot-note { font-size: 8px; }
  .online-bottom .text-link { font-size: 10px; white-space: nowrap; }
  .subbar { padding: 7px 12px; min-height: 0; flex: 0 0 auto; }
  .subbar-title b { font-size: 14px; }
  .subbar-title span { font-size: 8px; }
  .back-btn { padding: 6px 10px; font-size: 10px; }
  .subbar-right { gap: 6px; }
  .subbar-right .net-pill { font-size: 8px; padding: 4px 7px; }
  .lan-banner { padding: 8px 10px; margin-bottom: 8px; }
  .lan-banner b { font-size: 10px; }
  .lan-banner p { font-size: 8px; }
  .rank-card { padding: 8px 10px; margin-bottom: 8px; }
  .p2p-option { padding: 7px 10px; margin-bottom: 8px; }

  /* --- 候场（房间已开好）：房号 + 三个操作键 + 对战位，必须一屏放下 --- */
  .online-waiting { margin-top: 2px; }
  .wait-head { margin-bottom: 6px; font-size: 11px; gap: 7px; }
  .room-code-xl {
    font-size: clamp(34px, 11vh, 64px);
    line-height: 1;
    margin: 2px 0 8px;
    letter-spacing: .04em;
  }
  .room-actions {
    margin-bottom: 8px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .room-actions .ghost-btn {
    min-height: 40px;
    flex: 1 1 0;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .waiting-players { gap: 7px; }
  .wait-player { padding: 8px 9px; min-height: 52px; }
  .wait-player b { font-size: 12px; }
  .wait-player small { font-size: 8px; }
  .wait-avatar { width: 26px; height: 26px; font-size: 9px; right: 8px; top: 8px; }
  .wait-vs { font-size: 11px; }
  .online-waiting .field-hint { font-size: 8px; margin-top: 6px; }

  /* --- 候场独占屏：把和「等对手」无关的东西全收掉，只留房号 + 三个键 + 对战位 --- */
  body.is-waiting-room .online-panel > .panel-kicker,
  body.is-waiting-room .online-panel > h2,
  body.is-waiting-room .online-panel > .panel-desc,
  body.is-waiting-room .online-panel > .field-label,
  body.is-waiting-room .online-panel > .nick-row,
  body.is-waiting-room .online-panel > .lan-banner,
  body.is-waiting-room .online-panel > .p2p-option,
  body.is-waiting-room .online-panel > .count-option,
  body.is-waiting-room .online-panel > .rank-card,
  body.is-waiting-room .online-panel > .quick-status,
  body.is-waiting-room .online-panel > .lobby-rooms-wrap,
  body.is-waiting-room .online-panel > #online-error {
    display: none !important;
  }
  body.is-waiting-room .online-panel { padding: 8px 14px 10px; }
  body.is-waiting-room .online-layout { padding: 4px 10px 2px; }
  body.is-waiting-room .wait-head { font-size: 11px; margin-bottom: 4px; }
  body.is-waiting-room .room-code-xl {
    font-size: clamp(40px, 15vh, 92px);
    margin: 2px 0 8px;
  }
  body.is-waiting-room .room-actions { margin-bottom: 10px; }
  body.is-waiting-room .waiting-players { margin-top: 2px; }
}
}

/* 更矮一档（320~400 高）：候场页和联机页再压一遍 */
@media (pointer: coarse) and (max-height: 400px) {
  .online-layout { padding: 4px 10px 3px; }
  .online-panel { padding: 9px 13px 9px; }
  .online-panel h2 { font-size: clamp(17px, 4vh, 22px); margin-bottom: 3px; }
  .panel-desc { display: none; }
  .field-label { display: none; }
  .nick-row { margin-bottom: 6px; }
  .text-input { height: 34px; font-size: 11px; }
  .dice-btn { flex-basis: 34px; height: 34px; font-size: 14px; }
  .mode-tabs { margin-bottom: 6px; padding: 2px; }
  .mode-tab { min-height: 30px; font-size: 10px; }
  .cta-btn.big { min-height: 40px; font-size: 13px; }
  .cta-btn.big small { display: none; }
  .lobby-rooms-wrap { margin-top: 5px; padding-top: 5px; }
  .lobby-rooms { max-height: 56px; }
  .lobby-head { margin-bottom: 3px; }
  .lobby-head b { font-size: 13px; }
  #room-refresh { min-height: 30px; font-size: 10px; padding: 0 9px; }
  /* 360 高时「大厅房间 + 刷新」那行会被挤到可视区外 9px。
     把 lobby 区块的上下留白再挤掉，让刷新按钮留在屏内。 */
  .lobby-head { margin-top: 0; }
  .lobby-rooms-wrap { margin-top: 3px; padding-top: 4px; }
  .lobby-rooms { max-height: 48px; }
  .online-panel { padding-bottom: 6px; }
  .quick-status { padding: 6px 10px; }

  /* 候场：房号 + 操作键 + 对战位，全部压到最小可行 */
  .wait-head { margin-bottom: 3px; font-size: 10px; }
  .wait-head .spinner { display: none; }
  .room-code-xl { font-size: clamp(26px, 9vh, 44px); margin: 0 0 5px; }
  .room-actions { margin-bottom: 5px; gap: 4px; }
  .room-actions .ghost-btn { min-height: 34px; font-size: 10px; padding: 0 6px; }
  .wait-player { padding: 6px 8px; min-height: 44px; }
  .wait-player b { font-size: 11px; }
  .wait-avatar { width: 22px; height: 22px; font-size: 8px; right: 6px; top: 6px; }
  .wait-vs { font-size: 10px; }
  .online-waiting .field-hint { display: none; }

  /* 选人页在 360 高下：卡片再矮，但保证三张都能点 */
  .select-head { margin-bottom: 4px; }
  .select-head h2 { font-size: clamp(15px, 3.8vh, 19px); margin: 2px 0 0; }
  .select-head .eyebrow { font-size: 8px; }
  .roster { gap: 5px; }
  .card-info { padding: 4px 6px 3px !important; }
  .card-info b { font-size: 12px !important; }
  .card-info small { display: none !important; }
  .card-index { font-size: 7px !important; padding: 2px 4px !important; }
  .select-bottom { margin-top: 4px; }
  .select-actions .ghost-btn { min-height: 38px; font-size: 10px; padding: 0 8px; }
  .ready-btn, .select-bottom .cta-btn { min-height: 38px; min-width: 88px; font-size: 12px; }
  .select-status { font-size: 8px; }
}

/* =========================================================================
   选人页 / 战报：横屏手机上重排
   原版是「左 P1 面板 | 中间角色卡 | 右 P2 面板」三列网格，
   手机宽度下中间只剩一条缝 → 卡片被压成 0 高度，根本点不到。
   这里改成：顶部一条极简 P1/P2 状态 → 角色卡占满 → 底部准备键。
   ========================================================================= */
@media (pointer: coarse) and (max-height: 560px) {
  .select-screen { overflow-y: auto; overflow-x: hidden; }

  .select-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    min-height: 0;
    height: auto;
    align-items: stretch;
  }

  /* 左右两个详情面板：手机上信息密度太低，直接收掉。
     角色卡本身已经写了名字和定位。 */
  .fighter-panel { display: none; }

  /* 中间的选人区变成主轴 */
  .select-center {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding-top: 0;
    flex: 1 1 auto;
  }

  .select-head { margin-bottom: 6px; padding-left: 8px; }
  .select-head h2 { margin: 3px 0 2px; font-size: clamp(18px, 4.4vh, 26px); }
  .select-head p { font-size: 9px; }
  .select-head .panel-kicker { font-size: 8px; letter-spacing: .16em; }

  /* 角色卡：三张横排，按可用高度算，保证能点到 */
  .roster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .char-card {
    /* 关键修复：原版 min-height:285px + height:min(39vh,420px) 在 360 高屏幕上
       会被父级压成 0，卡片塌成一条线。手机上改成按视口高度算，并给死下限。 */
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    flex: 1 1 auto;
    contain: layout paint;
  }
  /* 卡片内部元素缩一档，别把卡片撑破。
     真实结构：.card-info > b(名字) small(英文名) em(定位) */
  .card-art { transform: none !important; }
  .char-card:hover .card-art { transform: none !important; }
  .card-info { padding: 6px 8px 4px !important; }
  .card-info b   { font-size: clamp(13px, 3.4vh, 17px) !important; }
  .card-info small { font-size: 7px !important; }
  .card-info em  { font-size: 8px !important; }
  .card-index { font-size: 8px !important; padding: 3px 5px !important; }
  .card-soon { font-size: 8px !important; padding: 2px 5px !important; }
  .card-pick-card { font-size: 9px !important; padding: 2px 5px !important; }
  .card-stats { display: none !important; }

  /* 底部：状态 + 随机/重选/准备。手机上状态条没空间，收进一行 */
  .select-bottom {
    margin-top: 6px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .select-status { font-size: 9px; flex: 1 1 auto; min-width: 0; }
  .select-status span:last-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .select-actions { flex: 0 0 auto; gap: 6px; }
  .select-actions .ghost-btn {
    min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 11px;
  }
  .select-bottom .cta-btn,
  .ready-btn {
    min-height: 44px;
    font-size: 14px;
    min-width: 108px;
  }
  /* 键位表在手机上没意义，收起（键盘本来也没有） */
  .select-controls-details { display: none !important; }
  .select-controls-strip { display: none !important; }
  .select-bg-word { display: none; }
}

/* 更矮一档：卡片再压，但保证能点 */
@media (pointer: coarse) and (max-height: 400px) {
  .select-head h2 { font-size: clamp(16px, 4vh, 21px); }
  .select-head p { display: none; }
  .roster { gap: 6px; }
  .card-name { font-size: 12px !important; }
  .card-kind, .card-role { display: none !important; }
  .ready-btn { min-height: 40px; font-size: 13px; }
}

/* =========================================================================
   战报页
   ========================================================================= */
@media (pointer: coarse) and (max-height: 560px) {
  .result-screen { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .result-layout {
    display: block;
    padding: 6px 12px 10px;
    height: auto;
    min-height: 0;
    overflow: visible;
    width: 100%;
  }
  .winner-img-wrap { width: 104px; height: 128px; margin: 0 auto 6px; }
  .result-vs { margin: 6px 0; }
  .result-panel h2 { font-size: clamp(18px, 4.2vh, 24px); margin-bottom: 6px; line-height: 1.2; }
  .result-panel .panel-kicker { font-size: 8px; }
  .result-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 8px 0;
  }
  .result-stats > div { min-height: 0; padding: 7px 8px; gap: 3px; }
  .result-stats b { font-size: 15px; }
  .result-stats small { font-size: 8px; }
  .result-actions { flex-wrap: nowrap; gap: 8px; margin-top: 8px; }
  .result-actions > * { flex: 1 1 0; min-height: 44px; font-size: 13px; }
  .result-social, .result-chat-row { display: none; }
  .result-bg-word { display: none; }
}

/* ---------------- 战斗中：HUD 别压住手指 ---------------- */
body.in-battle .battle-hint { display: none; }
body.is-mobile .battle-top-actions .battle-fps { display: none; }

/* ---------------- 竖屏提示 ---------------- */
#rotate-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  padding: 8vw 9vw;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,235,150,.14), transparent 42%),
    linear-gradient(160deg, #150f1c 0%, #0b0810 60%, #08060b 100%);
  color: #f4eee2;
}
#rotate-gate .rg-cat {
  font: 34px/1 var(--font-display, monospace);
  color: var(--yellow, #ffd23f);
  transform: rotate(90deg);
  margin-bottom: 22px;
}
#rotate-gate .rg-kicker {
  margin: 0 0 10px;
  font: 9px/1 var(--font-display, monospace);
  letter-spacing: .22em;
  color: var(--yellow, #ffd23f);
}
#rotate-gate h2 { margin: 0; font-size: clamp(30px, 9vw, 46px); font-weight: 500; }
#rotate-gate p { margin: 14px 0 0; color: rgba(244,238,226,.62); font-size: 13px; line-height: 1.9; }
#rotate-gate button {
  margin-top: 26px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow, #ffd23f);
  color: #17131b;
  font-size: 14px;
  font-weight: 800;
}
/* 只在触屏竖屏时出现；APK 里被 Java 强制横屏接管，不会显示 */
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-gate { display: grid; }
}

/* ---------------- 服务器设置面板 ---------------- */
#srv-panel {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(5, 4, 8, .78);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}
#srv-panel[hidden] { display: none; }
.srv-card {
  width: min(430px, 100%);
  padding: 22px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, #1a1522, #100d15 70%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  color: #f2ece0;
}
.srv-kicker { font: 9px/1 var(--font-display, monospace); letter-spacing: .2em; color: var(--yellow, #ffd23f); }
.srv-card h3 { margin: 8px 0 10px; font-size: 20px; }
.srv-desc { margin: 0 0 14px; font-size: 11px; line-height: 1.8; color: rgba(242,236,224,.6); }
.srv-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  font-family: var(--font-display, monospace);
  font-size: 10px;
  color: #ffe9a8;
  word-break: break-all;
}
.srv-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.4);
  color: #fff;
  font-family: var(--font-display, monospace);
  font-size: 12px;
  outline: none;
}
.srv-input:focus { border-color: var(--yellow, #ffd23f); }
.srv-state { margin: 9px 2px 14px; font-size: 11px; color: rgba(242,236,224,.5); }
.srv-state[data-s="ok"] { color: #8ef7c0; }
.srv-state[data-s="bad"] { color: #ff8e9a; }
.srv-state[data-s="wait"] { color: #ffe08a; }
.srv-row { display: flex; gap: 9px; }
.srv-btn {
  flex: 1;
  height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #f2ece0;
  font-size: 13px;
  font-weight: 700;
}
.srv-btn.primary { background: var(--yellow, #ffd23f); border-color: transparent; color: #1a1420; }
.srv-close {
  width: 100%;
  margin-top: 8px;
  height: 36px;
  border: 0;
  background: transparent;
  color: rgba(242,236,224,.45);
  font-size: 12px;
}

/* =========================================================================
   触屏控件
   ========================================================================= */
@media (pointer: coarse) {
  .touch-controls { display: block; height: 200px; }
  .touch-dpad { width: 172px; height: 172px; left: max(14px, env(safe-area-inset-left)); }
  .touch-dpad .tbtn { width: 56px; height: 56px; font-size: 14px; }
  .touch-dpad .up    { left: 58px; top: 0; }
  .touch-dpad .left  { left: 0;    top: 58px; }
  .touch-dpad .right { left: 116px; top: 58px; }
  .touch-dpad .down  { left: 58px; top: 116px; }

  .touch-actions {
    width: 268px; height: 186px;
    right: max(12px, env(safe-area-inset-right));
  }
  .touch-actions .attack { width: 68px; height: 68px; font-size: 17px; }
  .touch-actions .attack small { font-size: 8px; }
  .touch-actions .guard  { left: 0;   top: 0;  width: 58px; height: 58px; font-size: 15px; }
  .touch-actions .super  { right: 0;  top: 0;  width: 58px; height: 58px; }
  .touch-actions .light  { left: 6px;   top: 96px; }
  .touch-actions .heavy  { left: 82px;  top: 40px; }
  .touch-actions .kick   { left: 176px; top: 62px; }
  .touch-actions .special{ left: 92px;  top: 118px; }
  .touch-actions .step   { left: 186px; top: 138px; width: 58px; height: 58px; font-size: 13px;
                           border-color: rgba(150,200,255,.45); background: rgba(20,34,60,.55); color:#dbe9ff; }
  .touch-actions .step small { font-size: 7px; }
}

/* 小屏横屏（大多数手机横过来就是 360~430 高）
   最小可点面积按 56px 走，不要再小了 —— 44px 在格斗游戏里根本按不准。 */
@media (pointer: coarse) and (max-height: 500px) {
  .touch-controls { height: 176px; bottom: 2px; }
  .touch-dpad { width: 172px; height: 172px; }
  .touch-dpad .tbtn { width: 56px; height: 56px; }
  .touch-dpad .up    { left: 58px; top: 0; }
  .touch-dpad .left  { left: 0;    top: 58px; }
  .touch-dpad .right { left: 116px; top: 58px; }
  .touch-dpad .down  { left: 58px; top: 116px; }
  .touch-actions { width: 262px; height: 176px; }
  .touch-actions .attack { width: 62px; height: 62px; font-size: 16px; }
  .touch-actions .guard { width: 56px; height: 56px; }
  .touch-actions .super { width: 56px; height: 56px; }
  .touch-actions .light   { left: 2px;   top: 96px; }
  .touch-actions .heavy   { left: 76px;  top: 40px; }
  .touch-actions .kick    { left: 172px; top: 58px; }
  .touch-actions .special { left: 88px;  top: 112px; }
  .touch-actions .step    { left: 186px; top: 118px; width: 56px; height: 56px; }
}

/* 极窄横屏（老机型 320 高）：整体等比缩一点，但按钮不低于 54px */
@media (pointer: coarse) and (max-height: 380px) {
  .touch-controls { height: 150px; transform: scale(.92); transform-origin: bottom center; }
  .touch-actions { width: 236px; height: 158px; }
  .touch-actions .attack { width: 56px; height: 56px; font-size: 15px; }
  .touch-actions .guard, .touch-actions .super,
  .touch-actions .step { width: 54px; height: 54px; }
  .touch-actions .light   { left: 0;   top: 88px; }
  .touch-actions .heavy   { left: 70px; top: 34px; }
  .touch-actions .kick    { left: 158px; top: 52px; }
  .touch-actions .special { left: 80px; top: 100px; }
  .touch-actions .step    { left: 168px; top: 106px; }
}