/* ===================================================
   iOS SAFE AREA & UX FIX – PHIÊN BẢN CUỐI (CHỐT THEO YÊU CẦU)

   HÀNH VI MONG MUỐN:
   1. Safari iOS (duyệt web thường):
      - Header SÁT TOP (KHÔNG padding, KHÔNG safe-area)

   2. PWA iOS (Add to Home Screen):
      - Header HẠ XUỐNG để tránh tai thỏ

   3. Fullscreen iOS:
      - 2 nút Sound / Thoát fullscreen CAO HƠN MỘT TÝ
      - Không dùng max(), không tụt sâu

   4. Android & PC:
      - KHÔNG BỊ ẢNH HƯỞNG
=================================================== */

/* ================== CHUNG ================== */

* {
    -webkit-tap-highlight-color: transparent;
}

.spin-btn,
button,
#wheelCanvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#wheelCanvas {
    transform: translateZ(0);
    will-change: transform;
}

.spin-btn {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ================== iOS ================== */
@supports (-webkit-touch-callout: none) {

    /* ===== Safari iOS – CHẾ ĐỘ THƯỜNG ===== */
    /* KHÔNG đụng header – để iOS tự xử lý tai thỏ */
    body {
        padding-top: 0 !important;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== FULLSCREEN iOS ===== */
    .fullscreen-mode,
    .ios-fullscreen-active {
        padding: env(safe-area-inset-top)
                 env(safe-area-inset-right)
                 env(safe-area-inset-bottom)
                 env(safe-area-inset-left);
        touch-action: none !important;
    }

    /* 2 nút Sound & Fullscreen – CAO HƠN MỘT TÝ */
    #soundToggleBtn[style*="position: fixed"],
    #fullscreenBtn[style*="position: fixed"] {
        top: calc(env(safe-area-inset-top) + 10px) !important;
    }

    /* ===== PWA iOS (Add to Home Screen) ===== */
    @media (display-mode: standalone) {
        header {
            padding-top: 25px !important; /* tránh tai thỏ trong PWA */
        }
    }
}

/* ================== ANDROID / PC ================== */
@supports not (-webkit-touch-callout: none) {
    body {
        overscroll-behavior: auto;
        overflow-y: auto;
    }

    .fullscreen-mode,
    .ios-fullscreen-active {
        touch-action: auto !important;
        padding: 0 !important;
    }
}

/* ================== MOBILE ================== */
@media (max-width: 767px) {
    .ios-fullscreen-active #spinBtn,
    .fullscreen-mode #spinBtn {
        bottom: max(60px, calc(env(safe-area-inset-bottom) + 30px)) !important;
    }
}

/* ================== LANDSCAPE iOS ================== */
@media (orientation: landscape) and (max-width: 1023px) {
    .ios-fullscreen-active #wheelContainer,
    .fullscreen-mode #wheelContainer {
        max-width: 80vmin !important;
        max-height: 80vmin !important;
    }
}

/* ================== INPUT FIX ================== */
input,
textarea {
    font-size: 16px !important;
}