/* =========================================
   BẾP CỦA VY - GIAO DIỆN ĐIỆN THOẠI (MOBILE)
========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none; /* Chống bôi đen text khi bấm nhanh */
    -webkit-tap-highlight-color: transparent; /* Mất khung xanh khi chạm trên điện thoại */
}

body.center-layout {
    background-color: #333; /* Nền xám cho vùng thừa trên máy tính */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Cấm cuộn trang */
    touch-action: manipulation; /* Chống zoom khi bấm đúp trên điện thoại */
}

/* KHUNG GAME GIẢ LẬP ĐIỆN THOẠI */
#game-board, #start-screen {
    width: 100%;
    max-width: 420px; /* Chiều rộng tối đa chuẩn smartphone */
    height: 100%;
    max-height: 900px;
    background: #fffaf0;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* ================== THANH TRẠNG THÁI ================== */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffb6c1;
    padding: 8px 5px;
    font-size: 12px;
    border-bottom: 2px solid #ff69b4;
}

.level-box { color: #d2691e; font-weight: bold; }
.lives { color: red; }
.score { color: #008000; font-weight: bold; }
.high-score { color: #8a2be2; font-weight: bold; font-size: 11px; }

.btn-pause {
    background: #ff8c00; color: white; border: none; padding: 4px 6px; 
    border-radius: 5px; font-weight: bold; font-size: 10px; cursor: pointer;
}

#timer-container {
    width: 100%; height: 8px; background-color: #ddd;
}
#time-left {
    height: 100%; width: 100%; background-color: #32cd32; transition: width 0.1s linear;
}

/* ================== KHU VỰC KHÁCH HÀNG & CÔNG THỨC ================== */
#info-area {
    display: flex;
    flex-direction: row;
    height: 25%; /* Chiếm 25% màn hình */
    padding: 5px;
    gap: 5px;
    background: #fff0f5;
}

.customer-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px dashed #ffb6c1;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    position: relative; /* Để chứa chữ combo bay lên */
}

.recipe-book {
    flex: 1;
    font-size: 11px;
    line-height: 1.4;
    background: #fffacd;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #ffd700;
    overflow-y: auto;
}

/* ================== BÀN LÀM VIỆC (CHÍNH GIỮA) ================== */
#workspace {
    height: 15%; /* Chiếm 15% màn hình */
    background: #deb887; /* Màu bàn gỗ */
    border-top: 3px solid #8b4513;
    border-bottom: 3px solid #8b4513;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.1);
}

#workspace-items {
    display: flex;
    gap: 5px;
    flex: 1;
    overflow-x: auto;
}

.workspace-img {
    width: 40px; height: 40px; object-fit: contain;
    animation: popIn 0.2s ease-out;
}
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.trash-btn {
    background: #ff4c4c; color: white; border: none; font-size: 20px;
    width: 45px; height: 45px; border-radius: 50%; display: flex;
    justify-content: center; align-items: center; box-shadow: 0 3px 0 #cc0000;
}
.trash-btn:active { transform: translateY(3px); box-shadow: none; }

/* ================== KHU VỰC NGUYÊN LIỆU (DƯỚI CÙNG - VỪA TẦM TAY) ================== */
.kitchen-grid {
    flex: 1; /* Chiếm phần còn lại của màn hình */
    background: #ffe4e1;
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 5px;
    justify-content: center;
}

.ingredients-area, .tools-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* NÚT BẤM TO VÀ DỄ CHẠM */
.item-btn {
    width: 65px; 
    height: 65px;
    background: white; border: 2px solid #ffb6c1; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 0 #ffb6c1; transition: 0.1s; cursor: pointer;
}
.item-btn:active { transform: translateY(4px); box-shadow: none; }

.game-icon { width: 35px; height: 35px; object-fit: contain; }
.item-name { font-size: 10px; font-weight: bold; margin-top: 2px; color: #333; }
.tool-btn { border-color: #87cefa; box-shadow: 0 4px 0 #87cefa; background: #f0f8ff; }

/* ================== HIỆU ỨNG VÀ MÀN HÌNH CHỜ ================== */
.hidden { display: none !important; }

#start-screen {
    position: absolute; top: 0; left: 0; z-index: 2000;
    background: linear-gradient(135deg, #ffb6c1, #ffc0cb);
    justify-content: center; align-items: center;
}
.start-modal { text-align: center; border: 8px dashed #fff; background: rgba(255,255,255,0.9); padding: 20px; width: 90%; border-radius: 20px;}
.mascot-img { width: 120px; }
.game-title { font-size: 32px; color: #ff1493; margin: 10px 0; text-shadow: 2px 2px 0 #fff; }
.btn-play { background: #ff1493; color: white; border: none; padding: 15px 30px; font-size: 20px; font-weight: bold; border-radius: 30px; box-shadow: 0 6px 0 #c71585; animation: pulse 1s infinite alternate; }

#game-over-screen, #pause-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1500;
}
.modal { background: white; padding: 20px; border-radius: 20px; text-align: center; width: 85%; }
.btn-restart { background: #32cd32; color: white; border: none; padding: 10px 20px; font-size: 18px; border-radius: 10px; margin-top: 15px; box-shadow: 0 4px 0 #228b22; }

@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.shake { animation: shake 0.4s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } }

.floating-text { position: absolute; color: #32cd32; font-weight: bold; font-size: 24px; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; animation: floatUp 1s forwards ease-out; z-index: 100; pointer-events: none;}
.combo-text { position: absolute; color: #ff4500; font-weight: 900; font-size: 28px; text-shadow: 2px 2px 0 #fff; animation: zoomCombo 1s forwards ease-out; z-index: 105; transform: rotate(-10deg); pointer-events: none;}
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes zoomCombo { 0% { opacity: 0; transform: scale(0.5) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.1) rotate(-10deg) translateY(-10px); } 100% { opacity: 0; transform: scale(1.3) rotate(-10deg) translateY(-30px); } }
.vip-glow { filter: drop-shadow(0 0 8px #ffd700); animation: pulseVIP 0.5s infinite alternate; transform: scale(1.1); }
@keyframes pulseVIP { 0% { filter: drop-shadow(0 0 8px #ffd700); } 100% { filter: drop-shadow(0 0 15px #ff4500); } }
.result-img { width: 50px; height: 50px; object-fit: contain; }