/* =============================================================
   TASK 1 (Primary/Secondary/Tertiary glass buttons) đã được thay
   thế bởi css/glassmorphism-unified.css — xem file đó.
   ============================================================= */

/* =============================================================
   TASK 2: TACTILE FEEDBACK — Native + JS (nút unify xem file
   glassmorphism-unified.css; đây chỉ còn phần dùng chung cho
   các nút khác ngoài phạm vi unify, ví dụ #target-box, #vip-promo)
   ============================================================= */
.is-pressed {
    animation: none !important;
    transition: none !important;
    transform: scale(0.85) !important;
    filter: brightness(1.4) !important;
}

/* =============================================================
   TASK 3: MODAL ACTIONS — chuẩn hóa bố cục nút đáy Modal
   ============================================================= */
.modal-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    margin-top: 12px; /* FIX LỖI 2: giảm từ 24px → 12px */
    box-sizing: border-box;
}

.modal-actions button {
    flex: 1;
    min-height: 52px !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unified-btn-ghost {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* FIX LỖI 3: hiệu ứng lún cho ghost button */
.unified-btn-ghost.is-pressed,
.unified-btn-ghost:active {
    transform: scale(0.95) !important;
    opacity: 0.7 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.1s ease;
}

/* FIX LỖI 1: cắt hiệu ứng tràn viền cho nút CTA chính */
.unified-btn-primary {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* =============================================================
   TASK 4: FAT FINGER SYNDROME — tối ưu vùng chạm màn hình nhỏ
   ============================================================= */
@media (max-width: 360px) {
    .degen-action-board,
    .action-zone,
    .action-zone-2,
    .action-zone-3 {
        gap: 14px !important;
    }

    .degen-action-board button,
    .action-zone button,
    .action-zone-2 button,
    .action-zone-3 button {
        padding: 0 8px !important;
        min-height: 56px !important;
        font-size: 13px !important;
    }
}

/* =============================================================
   SỬA LỖI HIỆU ỨNG KÍNH MỜ (GLASSMORPHISM FIX)
   ============================================================= */

/* 1. Đúng ID #overlay — gradient bắt sáng để backdrop-filter hoạt động */
#overlay.show {
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.15) 0%, rgba(6, 9, 15, 0.95) 80%) !important;
}

/* 2. Đúng ID #pnl-card — kích hoạt kính cường lực */
#pnl-card {
    background: rgba(13, 17, 28, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0, 242, 254, 0.1) !important;
}

/* 3. Đảm bảo các khu vực nút không bị phủ nền đen */
.degen-action-board,
.action-zone-1,
.action-zone-2,
.action-zone-3 {
    background: transparent !important;
}

/* Staking modal — ép sát khoảng cách nút Đóng */
#staking-modal .unified-btn-primary {
    margin-bottom: 0 !important;
}
#staking-modal .modal-actions {
    margin-top: 8px !important;
}

/* ============================================================ */
/* GLASSMORPHISM TELEGRAM STYLE — GAME OVER BUTTONS             */
/* ============================================================ */
#overlay .btn-play,
#overlay .btn-margin,
#overlay .btn-more,
#overlay .btn-claim,
#overlay .btn-share-tg,
#overlay .btn-share-x {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

#overlay .btn-play:hover,
#overlay .btn-margin:hover,
#overlay .btn-more:hover,
#overlay .btn-claim:hover,
#overlay .btn-share-tg:hover,
#overlay .btn-share-x:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}