/* Lớp nền mờ bao phủ toàn màn hình */
.pwa-modal {
    display: none; /* Mặc định ẩn, JS sẽ đổi thành flex */
    position: fixed; /* Cố định trên màn hình, không trôi khi cuộn */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* Làm tối nền game phía sau */
    z-index: 99999; /* Số cực lớn để đè lên cả game, login và loading screen */
    
    /* Căn giữa nội dung hướng dẫn */
    justify-content: center;
    align-items: center;
    
    /* Chống chạm xuyên xuống dưới game */
    pointer-events: auto;
}

/* Nội dung bảng hướng dẫn */
.pwa-content {
    background: #1a1a1a;
    border: 2px solid #D4AF37;
    border-radius: 15px;
    padding: 20px;
    width: 85%;
    max-width: 320px;
    
    /* QUAN TRỌNG: */
    height: auto !important; /* Cho phép bảng dài ra theo chữ */
    min-height: 200px;        /* Độ cao tối thiểu nếu ít chữ */
    max-height: 90vh;         /* Không vượt quá chiều cao màn hình */
    overflow-y: auto;         /* Nếu máy khách màn hình quá bé thì hiện thanh cuộn nội bộ */
    
    display: flex;
    flex-direction: column;
}

/* Hiệu ứng bung Popup */
@keyframes popupScale {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.shadow-gold {
    border: 2px solid #D4AF37;
}

/* Làm cho các bước hướng dẫn to và rõ hơn */
.pwa-steps-container ol li {
    color: #FFF !important;
    margin-bottom: 12px;
    font-size: 16px; /* Tăng size chữ */
    text-shadow: 1px 1px 2px #000;
}

.pwa-header { color: #ffff00; font-weight: bold; text-align: center; margin-bottom: 15px; }

.pwa-steps-container ol { padding-left: 18px; font-size: 14px; line-height: 1.8; }
.pwa-steps-container strong { color: #00ff00; }

/* Mũi tên chỉ hướng nhấp nháy */
.pwa-arrow-indicator {
    position: fixed; width: 0; height: 0;
    border-left: 15px solid transparent; border-right: 15px solid transparent;
    animation: bounce 1s infinite; z-index: 10001;
}

/* Kiểu cho iPhone (Chỉ xuống dưới) */
.arrow-ios {
    bottom: 10px; right: 10px; transform: translateX(-50%);
    border-top: 20px solid #ffff00;
}

/* Kiểu cho Android (Chỉ lên trên góc phải) */
.arrow-android {
    top: 10px; right: 10px;
    border-bottom: 20px solid #ffff00;
}

/* Mặc định ẩn trên PC */
.rainbow-notice {
    display: none !important;
}

/* Chỉ hiển thị khi là màn hình điện thoại hoặc máy tính bảng */
@media only screen and (max-width: 1024px) {
    .rainbow-notice {
        display: block !important; /* Hoặc flex tùy theo cấu trúc của tiền bối */
    }
}

.pwa-steps-container ol {
    padding-left: 20px;
    margin: 10px 0;
    color: #eee;
    font-size: 14px;
    line-height: 1.8;
}

.pwa-steps-container strong {
    color: #ffff00; /* Làm nổi bật các từ khóa quan trọng */
}

/* Đảm bảo Popup luôn nằm trên cùng của Canvas ????x600 */
.pwa-modal {
    z-index: 99999;
}

.rainbow-notice {
    margin-top: 15px;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #fff;
    
    /* Màu nền Gradient sặc sỡ */
    background: linear-gradient(270deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff00ff);
    background-size: 400% 400%;
    color: white;
    text-shadow: 1px 1px 2px #000;
    
    /* Hiệu ứng hoạt hình */
    animation: rainbowMove 5s ease infinite, glowPulse 1.5s infinite;
    cursor: pointer;
}

/* Hiệu ứng chạy màu */
@keyframes rainbowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hiệu ứng nhấp nháy phát sáng */
@keyframes glowPulse {
    0% { box-shadow: 0 0 5px #fff; transform: scale(1); }
    50% { box-shadow: 0 0 15px #ff0000, 0 0 20px #ff8000; transform: scale(1.02); }
    100% { box-shadow: 0 0 5px #fff; transform: scale(1); }
}