/* /css/screens/main-screen.css */
/* [PHIÊN BẢN 2.0 - HOLO-CARD GRID] */

/* 1. Lưới Game Chính */
.game-grid {
    display: grid;
    /* Hiển thị 2 cột trên tablet, 3 cột trên desktop */
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    width: 100%;
    max-width: 1400px;
}

@media (min-width: 768px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .game-grid {
        /* Hiển thị tối đa 4 cột, nếu không đủ 4 thì tự co lại */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* 2. Thẻ Game (Holo-Card) */
.game-card {
    position: relative;
    background-color: rgba(10, 20, 40, 0.7);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
    isolation: isolate;
}

/* 3. Viền Neon */
.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, 
        rgba(0, 229, 255, 0.4) 0%, 
        rgba(168, 85, 247, 0.3) 100%
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

/* 4. Banner Ảnh */
.game-card-banner {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.3); /* Màu nền nếu ảnh lỗi */
    filter: brightness(0.8) saturate(1.2);
    transition: all 0.4s ease;
}

/* 5. Nội dung Thẻ */
.game-card-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.game-card-icon {
    font-size: 3rem;
    color: var(--color-primary-cyan);
    text-shadow: 0 0 15px var(--color-primary-cyan);
    transition: color 0.4s ease;
}

.game-card-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-card-desc {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* 6. Hiệu ứng Scanline */
.card-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 229, 255, 0.1) 2px,
        rgba(0, 229, 255, 0.1) 4px
    );
    animation: scanlines-move 2s linear infinite;
    opacity: 0; /* Ẩn ban đầu */
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

@keyframes scanlines-move {
    to { background-position: 0 8px; }
}


/* 7. Hiệu ứng Hover */
.game-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 229, 255, 0.4);
}

.game-card:hover::after {
    background: linear-gradient(135deg, 
        rgba(0, 229, 255, 1) 0%, 
        rgba(168, 85, 247, 1) 100%
    );
}

.game-card:hover .game-card-banner {
    filter: brightness(1.1) saturate(1.3);
}

.game-card:hover .card-scanline {
    opacity: 1;
    animation-duration: 0.5s;
}

.game-card:hover .game-card-icon {
    color: #FFF;
}

/* 8. Thẻ Bị khóa */
.game-card.disabled {
    cursor: not-allowed;
    filter: grayscale(80%);
    opacity: 0.6;
}
.game-card.disabled:hover {
    transform: none;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
}
.game-card.disabled:hover::after {
    background: linear-gradient(135deg, 
        rgba(0, 229, 255, 0.4) 0%, 
        rgba(168, 85, 247, 0.3) 100%
    );
}

/* Nhóm chứa các icon mới */
.header-icon-group {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem; /* 20px */
}

/* Nút icon (Ví, Buff) */
.header-icon-btn {
    position: relative;
    font-size: 1.5rem; /* 24px */
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.header-icon-btn:hover {
    color: var(--color-text-primary);
}

/* [THÊM CÁI NÀY VÀO] */
@keyframes headerBuffPulse {
  0%, 100% {
    color: var(--color-primary-cyan);
    text-shadow: 0 0 5px var(--color-primary-cyan), 0 0 10px var(--color-primary-cyan);
  }
  50% {
    color: #fff;
    text-shadow: 0 0 5px #fff;
  }
}
.header-icon-btn.header-buff-icon-glowing {
    animation: headerBuffPulse 1.5s infinite;
}

/* Tooltip (Dropdown) chung */
.header-tooltip {
    display: none; /* Ẩn mặc định */
    position: absolute;
    top: 130%; /* Hiện bên dưới icon */
    right: -15px;
    width: 240px;
    background: rgba(10, 20, 35, 0.95);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem; /* 12px */
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease-out, top 0.2s ease-out;
}
#buffs-tooltip-list {
    display: flex;
    flex-direction: column; /* Quan trọng nhất: Buộc xếp chồng theo chiều dọc */
    gap: 0.5rem; /* Thêm khoảng cách giữa các buff */
}

/* Hiển thị tooltip khi rê chuột vào nút icon */
.header-icon-btn:hover .header-tooltip {
    display: block;
    opacity: 1;
    top: 110%;
}

/* Item bên trong tooltip (Ví) */
.header-tooltip-item {
    display: grid;
    grid-template-columns: 24px 1fr auto; /* icon | tên | số lượng */
    gap: 0.75rem; /* 12px */
    align-items: center;
    padding: 0.5rem 0.25rem;
    font-size: 1rem; /* 16px */
    color: var(--color-text-primary);
}

.header-tooltip-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.header-tooltip-item i {
    text-align: center;
}

.header-tooltip-item span:last-child {
    font-weight: 700;
    font-family: monospace; /* Cho số đẹp */
}

/* Item bên trong tooltip (Buffs) */
.active-buff-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
    border-left: 4px solid var(--color-primary-cyan);
}
.active-buff-item:not(:last-child) {
    margin-bottom: 0.5rem;
}
.active-buff-item i {
    color: var(--color-primary-cyan);
    font-size: 1rem;
}
.active-buff-item span {
    font-weight: 600;
    flex-grow: 1;
    color: var(--color-text-primary);
}
.buff-status {
    flex-shrink: 0;
    text-align: right;
    color: var(--color-text-secondary);
    font-mono: monospace;
}
/* css/screens/main-screen.css */

/* === [MỚI] DAILY BUFF LIMIT INDICATOR === */

.buff-limit-circle {
    position: relative;
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Mono', monospace; /* Font số kỹ thuật */
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid transparent; /* Viền nền */
    transition: all 0.4s ease-in-out;
    cursor: help;
    background: rgba(0, 0, 0, 0.4); /* Nền tối nhẹ */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

/* Vòng xoay trang trí (tùy chọn) */
.buff-limit-ring {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.1);
    animation: spin-slow 10s linear infinite;
    pointer-events: none;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* === CÁC TRẠNG THÁI MÀU SẮC (States) === */

/* > 5 hoặc 5: Vàng Rực (Gold) - Sáng nhất */
.buff-limit-circle.state-gold {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 10px var(--color-accent-gold), inset 0 0 5px var(--color-accent-gold);
    text-shadow: 0 0 5px var(--color-accent-gold);
}

/* 4: Tím (Purple) - Sáng vừa */
.buff-limit-circle.state-purple {
    color: var(--color-secondary-purple);
    border-color: var(--color-secondary-purple);
    box-shadow: 0 0 8px var(--color-secondary-purple);
    text-shadow: 0 0 3px var(--color-secondary-purple);
}

/* 3: Xanh Dương (Cyan) - Màu chủ đạo */
.buff-limit-circle.state-blue {
    color: var(--color-primary-cyan);
    border-color: var(--color-primary-cyan);
    box-shadow: 0 0 6px var(--color-primary-cyan);
    text-shadow: 0 0 2px var(--color-primary-cyan);
}

/* 2: Xanh Lá (Green) - An toàn nhưng yếu dần */
.buff-limit-circle.state-green {
    color: #4ade80; /* Green-400 Tailwind */
    border-color: #4ade80;
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

/* 1: Bạc (Silver) - Sắp hết */
.buff-limit-circle.state-silver {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    box-shadow: 0 0 2px rgba(148, 163, 184, 0.3);
}

/* 0: Tắt (Off/Dark) - Vẫn hiện khung nhưng tối thui */
.buff-limit-circle.state-off {
    color: #334155; /* Slate-700: Màu xám tối */
    border-color: #1e293b; /* Slate-800: Màu viền rất tối */
    box-shadow: none;
    background: rgba(0, 0, 0, 0.8);
}
/* [THÊM VÀO CUỐI FILE css/screens/main-screen.css] */

/* === SMART QUEST HUD (Thanh Nhiệm vụ Thông minh) === */
#smart-quest-container {
    margin-bottom: 1rem;
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.smart-quest-hud {
    background: linear-gradient(90deg, 
        rgba(0,0,0,0) 0%, 
        rgba(0, 229, 255, 0.15) 20%, 
        rgba(0, 229, 255, 0.15) 80%, 
        rgba(0,0,0,0) 100%
    );
    border-top: 1px solid rgba(0, 229, 255, 0.3);
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    padding: 12px 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.smart-quest-hud:hover {
    background: linear-gradient(90deg, 
        rgba(0,0,0,0) 0%, 
        rgba(0, 229, 255, 0.25) 20%, 
        rgba(0, 229, 255, 0.25) 80%, 
        rgba(0,0,0,0) 100%
    );
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}

.quest-label {
    font-family: 'Roboto', sans-serif; /* Hoặc font tiêu đề của bạn */
    color: var(--color-primary-cyan);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    opacity: 0.9;
}

.quest-instruction {
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}