/* CSS: หน้าตาและ Layout ทั้งหมด */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: #1a1a1a url('bg.webp') center center fixed; 
    background-size: cover;
    color: #f0e6d2; 
    text-align: center; 
    margin: 0; 
    padding: 20px; 
}

#game-container { 
    max-width: 900px; 
    margin: 0 auto; 
    background-color: rgba(30, 30, 30, 0.9); 
    backdrop-filter: blur(8px);
    border: 2px solid #d4af37; 
    border-radius: 10px; 
    padding: 20px; 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); 
    position: relative;
}

h1 { color: #d4af37; border-bottom: 1px solid #d4af37; padding-bottom: 10px; margin-top: 0; }
.dashboard { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel { flex: 1; background-color: rgba(51, 51, 51, 0.8); padding: 20px; border-radius: 8px; border-top: 3px solid; position: relative;}
.panel.cultivation { border-color: #4CAF50; }
.panel.reality { border-color: #FFC107; }
.panel h2 { margin-top: 0; font-size: 1.3em; }

.resource { font-weight: bold; font-size: 1.8em; display: block; margin: 10px 0; }
.text-qi { color: #4CAF50; }
.text-gold { color: #FFC107; }

/* ปุ่มต่างๆ */
button { width: 100%; color: white; border: 2px solid #555; padding: 12px; font-size: 1.1em; border-radius: 5px; cursor: pointer; transition: 0.2s; margin-bottom: 10px; font-weight: bold; }
button:hover { transform: scale(1.02); }
button:active { transform: scale(0.95); }
button:disabled { filter: grayscale(100%); cursor: not-allowed; opacity: 0.6; }

.btn-qi { background-color: #2E7D32; border-color: #4CAF50; }
.btn-qi:hover { background-color: #388E3C; }
.btn-upgrade { background-color: #8b0000; border-color: #d4af37; }
.btn-upgrade:hover { background-color: #a52a2a; }
.btn-gold { background-color: #F57F17; border-color: #FFC107; }
.btn-gold:hover { background-color: #F9A825; }
.btn-shop { background-color: #0277BD; border-color: #29B6F6; }
.btn-shop:hover { background-color: #0288D1; }
.btn-hire { background-color: #673AB7; border-color: #9575CD; } 
.btn-unlock { background-color: #E91E63; border-color: #F48FB1; }
.btn-unlock:hover { background-color: #C2185B; }
.btn-prestige { background-color: #4A148C; border-color: #9C27B0; }
.btn-prestige:hover { background-color: #6A1B9A; }

.waifu-container { display: none; margin: 15px 0; padding: 10px; background: rgba(0,0,0,0.5); border-radius: 10px; border: 1px dashed #E91E63; }
.waifu-image { width: 100%; max-width: 250px; height: auto; border-radius: 10px; background-color: #111; display: block; margin: 0 auto; box-shadow: 0 0 15px rgba(233, 30, 99, 0.5); }
.waifu-dialogue { color: #F48FB1; font-style: italic; font-size: 0.9em; margin-top: 10px; }
.prestige-panel { display: none; background: rgba(34, 34, 34, 0.9); border: 2px solid #9C27B0; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(156, 39, 176, 0.3); }

.buff-status { color: #00E676; font-size: 0.9em; min-height: 20px; margin-bottom: 10px; }
.idle-status { color: #8BC34A; font-size: 1em; margin-bottom: 15px; background: rgba(34, 34, 34, 0.8); padding: 5px; border-radius: 5px;}
.system-footer { margin-top: 30px; border-top: 1px solid #555; padding-top: 20px; }
.sys-btn { width: auto; background-color: #555; font-size: 0.9em; padding: 8px 20px; margin: 0 5px; }

/* โครงสร้าง Modal */
.modal-popup { display: none; position: absolute; top: 5%; left: 50%; transform: translate(-50%, 0); background-color: rgba(34, 34, 34, 0.95); border: 3px solid #555; padding: 25px; border-radius: 10px; z-index: 200; width: 85%; max-width: 400px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); }
#ncp-popup { border-color: #00E5FF; }
#ncp-popup h3 { border-bottom: 1px dashed #00E5FF; padding-bottom: 10px; margin-top: 0; }
.ncp-bar-container { width: 100%; height: 35px; background-color: #444; border-radius: 5px; position: relative; overflow: hidden; margin: 25px 0; border: 2px solid #777; }
.ncp-target-zone { position: absolute; left: 40%; width: 20%; height: 100%; background-color: rgba(76, 175, 80, 0.6); border-left: 2px solid #00E676; border-right: 2px solid #00E676; }
.ncp-indicator { position: absolute; left: 0%; top: -5px; width: 12px; height: 45px; background-color: #FFF; box-shadow: 0 0 10px #FFF; border-radius: 3px; }

/* สี Rarity กาชา */
.gacha-common { color: #9E9E9E; }
.gacha-rare { color: #29B6F6; text-shadow: 0 0 10px rgba(41,182,246,0.5); }
.gacha-epic { color: #AB47BC; text-shadow: 0 0 10px rgba(171,71,188,0.5); }
.gacha-legendary { color: #FFC107; text-shadow: 0 0 15px rgba(255,193,7,0.8); }

@media (max-width: 600px) { .dashboard { flex-direction: column; } }

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
.btn-ending { 
    display: none; /* ซ่อนไว้ก่อน */
    width: 100%;
    background: linear-gradient(45deg, #FFD700, #FF8C00); 
    color: #000; 
    font-size: 1.5em; 
    font-weight: bold; 
    border: 2px solid #FFF; 
    border-radius: 10px; 
    padding: 15px; 
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8); 
    animation: pulse-gold 2s infinite; 
    margin-bottom: 20px;
    cursor: pointer;
}
.btn-ending:hover { transform: scale(1.02); filter: brightness(1.2); }