/* ==========================================================================
   Điều khiển cảm ứng (touch-controls.mjs) và giao diện gọn cho điện thoại / máy tính bảng (body.sw-touch).
   ========================================================================== */

#sw-canvas canvas { touch-action: none; } /* vuốt trên cảnh: xoay camera, không cuộn / phóng trang */
.sw-touch { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

.swt { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.swt.is-off { display: none; }
.swt > * { pointer-events: auto; touch-action: none; }

/* --- Cần điều khiển --- */
.swt-stick { position: absolute; left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; }
.swt.is-right .swt-stick { left: auto; right: calc(18px + env(safe-area-inset-right, 0px)); }
.swt-base { position: relative; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 23, 42, .18), rgba(15, 23, 42, .38));
  border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45), inset 0 0 18px rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px); transition: opacity .15s, transform .15s; opacity: .75; }
.swt-stick.is-on .swt-base { opacity: 1; transform: scale(1.04); }
.swt-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .28); }
.swt-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #dfe7f1 60%, #b9c6d6); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); transition: box-shadow .15s; }
.swt-stick:not(.is-on) .swt-knob { transition: transform .18s ease-out, box-shadow .15s; }
.swt-stick.is-run .swt-knob { box-shadow: 0 0 0 6px rgba(52, 211, 153, .45), 0 6px 14px rgba(0, 0, 0, .35); }
.swt-stick.is-run .swt-ring { border-color: rgba(52, 211, 153, .8); border-style: solid; }
.swt-run { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font: 700 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #ecfdf5; background: rgba(16, 185, 129, .9); padding: 4px 8px; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.swt-stick.is-run .swt-run { opacity: 1; }

/* --- Nút hành động (cụm cong quanh nút Nhảy) --- */
.swt-pad { position: absolute; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 190px; height: 190px; pointer-events: none !important; }
.swt.is-right .swt-pad { right: auto; left: calc(18px + env(safe-area-inset-left, 0px)); transform: scaleX(-1); }
.swt.is-right .swt-pad .swt-btn > * { transform: scaleX(-1); }
.swt-btn { pointer-events: auto; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); background: rgba(15, 23, 42, .45); color: #fff; backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); font: 700 10.5px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; touch-action: none;
  transition: transform .08s, background .12s; }
.swt-btn span { opacity: .9; letter-spacing: .2px; }
.swt-btn.is-press { transform: scale(.92); background: rgba(16, 185, 129, .6); }
.swt.is-right .swt-btn.is-press { transform: scale(.92); }
.swt-jump { right: 0; bottom: 0; width: 84px; height: 84px; background: rgba(16, 185, 129, .55); }
.swt-fly { right: 98px; bottom: 6px; width: 60px; height: 60px; }
.swt-fly.is-on { background: rgba(56, 189, 248, .65); border-color: #bae6fd; }
.swt-chat { right: 12px; bottom: 100px; width: 60px; height: 60px; }
.swt-down { right: 98px; bottom: 6px; width: 60px; height: 60px; display: none; }
.swt-up { display: none; }
/* Đang bay: Nhảy → giữ ▲ lên; Bay dời lên trên, chỗ cũ là giữ ▼ xuống */
.swt.is-flying .swt-jump:not(.swt-up) { display: none; }
.swt.is-flying .swt-up { display: flex; background: rgba(56, 189, 248, .55); }
.swt.is-flying .swt-down { display: flex; }
.swt.is-flying .swt-fly { right: 92px; bottom: 82px; }
.swt.is-flying .swt-chat { right: 6px; bottom: 104px; }
.swt-btn.is-hidden { display: none !important; }
.swt-dot { position: absolute; top: 4px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
.swt-dot.is-hidden { display: none; }

/* --- Giao diện gọn khi chơi bằng cảm ứng --- */
.sw-touch #sw-help, .sw-touch #sw-credit { display: none !important; }
.sw-touch #sw-prompt { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 420px); flex-wrap: wrap; justify-content: center; }
.sw-touch #sw-prompt button { padding: 11px 16px; font-size: 15px; border-radius: 14px; }
.sw-touch #sw-prompt kbd { display: none; }
@media (max-width: 760px) {
  .sw-touch .sw-news-label { display: none; }
  .sw-touch #sw-prompt { max-width: calc(100vw - 32px); bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 460px) {
  .sw-touch .sw-news-label { display: none; }
  .swt-stick { width: 148px; height: 148px; }
  .swt-base { width: 116px; height: 116px; }
}
/* Màn hình dọc: gợi ý xoay ngang (không chặn, vẫn chơi được) */
.sw-rotate { display: none; }
@media (orientation: portrait) {
  .sw-touch .sw-rotate { display: flex; position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 16;
    align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(15, 23, 42, .75); color: #fff; font: 600 12.5px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    white-space: nowrap; pointer-events: none; animation: sw-rotate-fade 6s forwards; }
}
@keyframes sw-rotate-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Khung chat / bảng nhóm khi chơi cảm ứng: đặt phía trên, chừa góc dưới cho cần điều khiển và nút */
.sw-touch #sw-chat { top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; right: 12px; height: min(320px, calc(100vh - 250px)); width: min(340px, calc(100vw - 24px)); }
.sw-touch #sw-group { top: calc(62px + env(safe-area-inset-top, 0px)); right: auto; left: 12px; }
.sw-touch #sw-social-menu { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
/* HUD (khung chat, gợi ý, menu) nằm trên lớp nút cảm ứng; lớp HUD không nhận chuột nên không chặn cần điều khiển */
.sw-touch #sw-hud { z-index: 16; }
/* Điện thoại dọc (hẹp): thanh trên gọn lại, bỏ nút kênh để không đè số FPS / nút Cài đặt */
@media (max-width: 520px) {
  .sw-touch #sw-net { display: none; }
  .sw-touch #sw-hud > .absolute.top-4 { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .sw-touch #sw-hud > .absolute.top-4.left-4 { left: 10px; gap: 6px; }
  .sw-touch #sw-hud > .absolute.top-4.right-4 { right: 10px; }
}