/* CSS: หน้าตาและ Layout ทั้งหมด */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #1a1a1a; color: #f0e6d2; text-align: center; margin: 0; padding: 20px; }
#game-container { max-width: 900px; margin: 0 auto; background-color: #2a2a2a; border: 2px solid #d4af37; border-radius: 10px; padding: 20px; box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); 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: #333; 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.3); 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: #222; 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: #222; 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: 15%; left: 50%; transform: translate(-50%, 0); background-color: #222; 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; } }