/* CSS cho Game Đào Vàng (Gold Miner) */
:root {
    --primary: #FFD700; /* Vàng rực */
    --primary-dark: #DAA520;
    --second: #8B4513; /* Nâu đất mỏ */
    --bg-color: #2F4F4F; /* Màu xanh đen hầm mỏ */
    --hud-bg: rgba(0, 0, 0, 0.6);
}

body {
    margin: 0; padding: 0;
    overflow: hidden;
    background-color: var(--bg-color);
    font-family: 'Fredoka', sans-serif;
    touch-action: none; /* Cấm mọi thao tác vuốt hệ thống (Vô cùng quan trọng cho Mobile) */
    user-select: none;
    -webkit-user-select: none;
}

/* THUỘC TÍNH 2D CANVAS */
#gameCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1; /* Nằm dưới UI */
    display: block;
}

/* LỚP VUE 3 CHỒNG CHÉO */
#vue-app {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none; /* Mặc định trong Game cho xuyên Click */
}

/* HIỆU ỨNG CHUYỂN CẢNH VUE3 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* BẢNG MENU HIỆN LÊN GIỮA CHỪNG */
.game-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto; /* Active Clicks khi có Menu */
    z-index: 20;
}

.modal-card {
    background: #FFFAF0;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%; max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 4px solid var(--second);
}

h1 { margin: 0; font-size: 32px; color: var(--second); text-transform: uppercase; }
.desc { color: #555; font-size: 16px; margin: 15px 0; }

.text-success { color: #2e7d32 !important; }
.text-danger { color: #c62828 !important; }
.text-warning { color: #f9a825 !important; }

/* THẺ STATS NẰM LÊN TRÊN NÚT PLAY */
.stats-board, .shop-board {
    display: flex; justify-content: space-around;
    background: #fdfaf3;
    border-radius: 10px;
    padding: 15px; margin-bottom: 20px;
    border: 2px dashed #ccc;
}
.stat-item { display: flex; flex-direction: column; }
.stat-item .label { font-size: 12px; color: #888; text-transform: uppercase; font-weight: bold; }
.stat-item .value { font-size: 26px; font-weight: bold; color: var(--second); }

/* SHOP ITEM */
.shop-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; padding: 10px; border-radius: 10px; border: 2px solid var(--primary); background: #fffcf0;
    transition: transform 0.2s, background 0.2s;
    width: 100%; max-width: 150px; margin: 0 auto;
}
.shop-item:hover { transform: scale(1.05); background: #fff8e1; }
.shop-item.disabled { border-color: #ccc; opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }
.shop-item i { font-size: 40px; margin-bottom: 5px; }
.shop-item .name { font-weight: bold; font-size: 14px; }
.shop-item .owned { font-size: 12px; color: #666; }

/* LEVEL SELECTOR */
.level-selector {
    display: flex; justify-content: space-between; align-items: center;
    background: #fdfaf3; border-radius: 10px; padding: 10px; margin-bottom: 20px;
    font-size: 16px; font-weight: bold; color: #444; border: 2px dashed #ccc;
}
.level-selector .btn-arrow {
    background: transparent; border: none; font-size: 24px; color: var(--primary-dark); cursor: pointer; transition: transform 0.2s, color 0.2s;
}
.level-selector .btn-arrow:active { transform: scale(0.9); }
.level-selector .btn-arrow:disabled { color: #ccc; cursor: not-allowed; }

/* NÚT BẤM */
.btn-play, .btn-quit {
    display: block; width: 100%; padding: 15px; border: none; border-radius: 10px;
    font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.2s, background 0.2s;
    text-decoration: none; color: white; margin-bottom: 10px;
}
.btn-play { background: var(--primary-dark); color: #fff;}
.btn-play:hover { background: #b8860b; transform: translateY(-2px); }
.btn-quit { background: #8B4513; }
.btn-quit:hover { background: #5c2e0b; }

/* NEW HUD V2 DÀNH CHO MOBILE & WEB (GỌN GÀNG - CHUYÊN NGHIỆP) */
.hud-container { height: 100%; width: 100%; pointer-events: none; position: relative; }

/* Các Cluster */
.hud-group-left {
    position: absolute; top: env(safe-area-inset-top, 15px); left: 15px;
    display: flex; gap: 8px; align-items: center;
}
.hud-group-center {
    position: absolute; top: env(safe-area-inset-top, 15px); left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.65); padding: 5px 25px; border-radius: 12px; border: 2px solid var(--primary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.hud-group-right {
    position: absolute; top: env(safe-area-inset-top, 15px); right: 15px;
    display: flex; gap: 10px; align-items: center;
}
.hud-bottom-right {
    position: absolute; bottom: env(safe-area-inset-bottom, 20px); right: 20px;
}

/* Các thành phần con */
.hud-pill {
    background: rgba(0,0,0,0.6); color: white; padding: 6px 15px; border-radius: 20px;
    font-size: 18px; font-weight: bold; border: 2px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 5px;
}
.level-pill { border-color: var(--primary); color: var(--primary); }
.timer-pill { background: var(--primary-dark); font-size: 22px; border-color: #fff; }
.timer-pill.warning { background: #d32f2f; animation: pulse 1s infinite; }

.money-target { font-size: 12px; color: #ccc; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.money-target .text-warning { font-size: 14px; font-weight: bold; color: var(--primary) !important; }
.money-current { font-size: 28px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.btn-icon {
    pointer-events: auto;
    background: rgba(0,0,0,0.6); color: white;
    border: 2px solid rgba(255,255,255,0.7); border-radius: 50%;
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; transition: all 0.2s; z-index: 100;
}
.btn-icon:hover { background: var(--primary); border-color: white; transform: scale(1.1); }

/* NÓ TÁC DỤNG VỚI CON CHUỘT/NGÓN TAY SAU KHI START GAME */
.btn-dynamite {
    pointer-events: auto;
    background: red; color: white; border: 3px solid #ffaaaa; width: 60px; height: 60px; border-radius: 50%;
    font-size: 24px; position: relative; box-shadow: 0 5px 15px rgba(255,0,0,0.5); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.1s;
}
.btn-dynamite:active { transform: scale(0.9); }
.btn-dynamite:disabled { background: #555; border-color: #333; color: #888; box-shadow: none; cursor: not-allowed; }
.btn-dynamite .badge {
    position: absolute; top: -5px; right: -5px; background: white; color: red; font-size: 12px; font-weight: bold; padding: 2px 6px; border-radius: 10px; border: 1px solid red;
}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* HIỆU ỨNG RUNG MÀN HÌNH NỔ BOM */
@keyframes shakeAnimation {
    0%   { transform: translate(2px, 2px) rotate(0deg); }
    10%  { transform: translate(-2px, -3px) rotate(-1deg); }
    20%  { transform: translate(-4px, 0px) rotate(1deg); }
    30%  { transform: translate(4px, 3px) rotate(0deg); }
    40%  { transform: translate(2px, -2px) rotate(1deg); }
    50%  { transform: translate(-2px, 3px) rotate(-1deg); }
    60%  { transform: translate(-4px, 2px) rotate(0deg); }
    70%  { transform: translate(4px, 2px) rotate(-1deg); }
    80%  { transform: translate(-2px, -2px) rotate(1deg); }
    90%  { transform: translate(2px, 3px) rotate(0deg); }
    100% { transform: translate(1px, -3px) rotate(-1deg); }
}

.shake-screen {
    animation: shakeAnimation 0.5s cubic-bezier(.36,.07,.19,.97) both;
}