/* BIẾN MÀU SẮC CHỦ ĐẠO */
:root {
    /* Tông 1: Kẹo Ngọt (Mặc định) */
    --bg-main: #FDFBFB;
    --card-front-bg: #FFFFFF;
    --card-front-text: #5C4D7D;
    --card-front-border: #FFD1DC;
    --card-front-shadow: rgba(255, 182, 193, 0.15);
    --card-back-border: rgba(255, 255, 255, 0.6);
    --card-back-shadow: rgba(255, 158, 174, 0.2);
    --card-matched-text: #2B8A3E;

    --nav-bg-start: #FFF0F5;
    --nav-bg-end: #FFE4E1;
    --nav-border: #FFD1DC;
    --nav-shadow: rgba(255, 182, 193, 0.4);
    --game-title-color: #D81B60;

    --stat-match-bg: #E8F5E9;
    --stat-match-text: #2E7D32;
    --stat-match-border: #A5D6A7;
    --stat-move-bg: #FFF8E1;
    --stat-move-text: #F57F17;
    --stat-move-border: #FFE082;

    --timer-countdown-bg: #FF758C;
    --timer-warning-bg: #FFD54F;
    --timer-stopwatch-bg: #E1F5FE;
    --timer-stopwatch-text: #0288D1;
    --timer-none-bg: #F3E5F5;
    --timer-none-text: #7B1FA2;

    --btn-primary-start: #FF9EAE;
    --btn-primary-end: #FF758C;
    --modal-bg: #FFF0F5;
}

/* Tông 2: Đại Dương (Xanh Dương) */
[data-theme="blue"] {
    --bg-main: #F0F9FF;
    --card-front-text: #1E3A8A;
    --card-front-border: #BAE6FD;
    --card-front-shadow: rgba(186, 230, 253, 0.3);
    --card-matched-text: #059669;
    --nav-bg-start: #E0F2FE;
    --nav-bg-end: #F0FDFA;
    --nav-border: #7DD3FC;
    --nav-shadow: rgba(125, 211, 252, 0.3);
    --game-title-color: #0369A1;
    --btn-primary-start: #38BDF8;
    --btn-primary-end: #0EA5E9;
    --modal-bg: #F0F9FF;
}

/* Tông 3: Rừng Xanh (Xanh Lá) */
[data-theme="green"] {
    --bg-main: #F0FDF4;
    --card-front-text: #064E3B;
    --card-front-border: #BBF7D0;
    --card-front-shadow: rgba(187, 247, 208, 0.3);
    --card-matched-text: #15803D;
    --nav-bg-start: #DCFCE7;
    --nav-bg-end: #F0FDF4;
    --nav-border: #86EFAC;
    --nav-shadow: rgba(134, 239, 172, 0.3);
    --game-title-color: #166534;
    --btn-primary-start: #4ADE80;
    --btn-primary-end: #16A34A;
    --modal-bg: #F0FDF4;
}

/* Tông 4: Hoàng Hôn (Cam Đào) */
[data-theme="orange"] {
    --bg-main: #FFF7ED;
    --card-front-text: #7C2D12;
    --card-front-border: #FFEDD5;
    --card-front-shadow: rgba(255, 237, 213, 0.4);
    --card-matched-text: #C2410C;
    --nav-bg-start: #FFEDD5;
    --nav-bg-end: #FFF7ED;
    --nav-border: #FDBA74;
    --nav-shadow: rgba(253, 186, 116, 0.3);
    --game-title-color: #9A3412;
    --btn-primary-start: #FB923C;
    --btn-primary-end: #EA580C;
    --modal-bg: #FFF7ED;
}

/* Tông 5: Bóng Đêm (Dark Mode) */
[data-theme="dark"] {
    --bg-main: #0F172A;
    --card-front-bg: #1E293B;
    --card-front-text: #F1F5F9;
    --card-front-border: #334155;
    --card-front-shadow: rgba(0, 0, 0, 0.3);
    --card-back-border: rgba(255, 255, 255, 0.1);
    --card-back-shadow: rgba(0, 0, 0, 0.5);
    --card-matched-text: #4ADE80;
    --nav-bg-start: #1E293B;
    --nav-bg-end: #0F172A;
    --nav-border: #334155;
    --nav-shadow: rgba(0, 0, 0, 0.4);
    --game-title-color: #38BDF8;
    --btn-primary-start: #334155;
    --btn-primary-end: #475569;
    --modal-bg: #1E293B;
}

/* CSS GIAO DIỆN CHÍNH */
body { font-family: 'Quicksand', sans-serif !important; height: 100vh; display: flex; flex-direction: column; margin: 0; overflow: hidden; background-color: var(--bg-main); transition: background-color 0.3s; }
#game-container { flex-grow: 1; padding: 12px; display: flex; justify-content: center; align-items: center; min-height: 0; }
#game-board { display: grid; gap: 10px; width: 100%; height: 100%; max-width: 1920px; }

.memory-card { width: 100%; height: 100%; cursor: pointer; perspective: 1000px; transition: transform 0.2s ease; }
.memory-card:not(.flipped):hover { transform: translateY(-4px); }
.memory-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
.memory-card.flipped .memory-card-inner { transform: rotateY(180deg); }
.memory-card.flipped .memory-card-back span, .memory-card.flipped .memory-card-back i { opacity: 0 }

.memory-card-front, .memory-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 0.8rem; padding: 5px; font-size: clamp(15px, 3.5vmin, 30px); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }

.memory-card-front { background-color: var(--card-front-bg); color: var(--card-front-text); border: 2px solid var(--card-front-border); font-weight: 700; transform: rotateY(180deg); box-shadow: 0 4px 6px var(--card-front-shadow); }
.memory-card-back { color: #FFFFFF; font-size: clamp(40px, 10vmin, 60px); font-weight: 800; border: 2px solid var(--card-back-border); box-shadow: 0 4px 0 var(--card-back-shadow); text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); }
.memory-card.matched .memory-card-front { color: var(--card-matched-text); }

/* NAVBAR KẸO NGỌT */
.candy-navbar { flex-shrink: 0; z-index: 10; background: linear-gradient(135deg, var(--nav-bg-start) 0%, var(--nav-bg-end) 100%) !important; border-bottom: 3px dashed var(--nav-border); box-shadow: 0 4px 15px var(--nav-shadow) !important; }
.game-title { font-weight: 900; color: var(--game-title-color) !important; text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.9); }
.stat-badge { font-weight: 800; border-width: 2px; border-style: solid; }

.candy-badge-match { background-color: var(--stat-match-bg); color: var(--stat-match-text); border-color: var(--stat-match-border); }
.candy-badge-move { background-color: var(--stat-move-bg); color: var(--stat-move-text); border-color: var(--stat-move-border); }

.candy-timer-countdown { background-color: var(--timer-countdown-bg); color: white; border-color: var(--timer-countdown-bg); }
.candy-timer-warning { background-color: var(--timer-warning-bg); color: var(--game-title-color); border-color: var(--timer-warning-bg); animation: heartBeat 0.8s infinite alternate; }
.candy-timer-stopwatch { background-color: var(--timer-stopwatch-bg); color: var(--timer-stopwatch-text); border-color: #81D4FA; }
.candy-timer-none { background-color: var(--timer-none-bg); color: var(--timer-none-text); border-color: #CE93D8; }

@keyframes heartBeat { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

.btn-settings { background-color: #FFFFFF; border: 2px solid var(--nav-border); color: var(--game-title-color) !important; }
#restart-btn { background: linear-gradient(135deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%); border: none; color: white; }

/* MODAL KẸO NGỌT */
.candy-modal { background-color: var(--modal-bg); border-radius: 1.5rem !important; border: 4px solid var(--nav-border); overflow: hidden; }
.candy-modal .modal-header { background: linear-gradient(135deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%); border-bottom: 2px dashed #FFF; }
.candy-modal .modal-title { color: #FFFFFF !important; font-weight: 900; }
.candy-modal .form-label { color: var(--game-title-color); font-weight: 800; }
.candy-modal .form-select, .candy-modal .form-control { border: 2px solid var(--nav-border); border-radius: 1rem; font-weight: 700; }
.candy-btn-save { background: linear-gradient(135deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%); border: none; color: white; font-weight: 700; }
.btn-reset-settings { color: #6c757d !important; font-weight: 600; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.btn-reset-settings:hover { color: #dc3545 !important; }

#resultIcon { font-size: 5rem; display: block; margin-bottom: 1rem; }
.result-text { font-weight: 800; color: var(--game-title-color); }