/*
Theme Name: Jelajah Tradisi Theme
Author: Developer
*/

:root {
    --jp-bg: #fffaf0; --jp-text: #333333; --jp-title: #d32f2f; --jp-divider: #eeeeee;
    --jp-primary: #d32f2f; --jp-primary-text: #ffffff; --jp-accent: #c88f15; --jp-accent-text: #ffffff;
}

body, html { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; background-color: var(--jp-bg); color: var(--jp-text); touch-action: auto; }

.auth-page-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.brand-logo { width: 100%; max-width: 280px; height: 120px; margin: 0 auto 20px auto; background-size: contain; background-repeat: no-repeat; background-position: center; }
.auth-card { background: white; width: 90%; max-width: 400px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; }
.auth-tabs { display: flex; background: var(--jp-accent); }
.auth-tab { flex: 1; padding: 18px 0; text-align: center; font-weight: bold; font-size: 18px; cursor: pointer; color: var(--jp-accent-text); opacity: 0.8; transition: 0.3s; }
.auth-tab.active { background: white; color: var(--jp-accent); border-top-left-radius: 20px; border-top-right-radius: 20px; opacity: 1;}
.auth-body { padding: 30px; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-size: 14px; margin-bottom: 8px; font-weight: bold; }
.input-group input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; box-sizing: border-box; outline: none; font-family: inherit; }
.input-group input:focus { border-color: var(--jp-accent); }
.btn-submit { width: 100%; background: var(--jp-accent); color: var(--jp-accent-text); border: none; padding: 15px; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-submit:hover { opacity: 0.9; }
.error-message { background: #ffebee; color: #c62828; padding: 10px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; text-align: center; font-weight: bold; }

.dashboard-body { overflow-y: auto; padding-bottom: 40px;}
.dash-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.brand-logo-small { width: 120px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: left center; }
.btn-profil { background: #f4f4f4; color: #333; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: bold; border: 1px solid #ddd; }
.btn-kembali { background: #fff0f0; color: var(--jp-primary); padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: bold; }
.dash-container { max-width: 500px; margin: 0 auto; padding: 20px; }

.user-greeting-wrapper { display: flex; align-items: center; margin-bottom: 25px; gap: 15px; }
.user-avatar { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; border: 3px solid var(--jp-accent); box-shadow: 0 4px 8px rgba(0,0,0,0.1); background: white;}
.greeting { font-size: 24px; margin: 0; line-height: 1.2; }
.greeting span { font-size: 15px; opacity: 0.7; font-weight: normal; }

.dash-section { background: white; padding: 20px; border-radius: 20px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.dash-section h3 { display: flex; align-items: center; gap: 8px; margin-top: 0; font-size: 18px; border-bottom: 2px dashed var(--jp-divider); padding-bottom: 10px; color: var(--jp-title); }
.dash-title-icon { width: 24px; height: 24px; object-fit: contain; }

.coin-balance { background: #fff0f0; color: var(--jp-primary); padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: bold; }

.custom-file-upload input[type="file"] { display: none; }
.btn-upload { display: inline-block; background: #fff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; cursor: pointer; border: 1px solid; transition: 0.3s; }
.btn-upload:hover { opacity: 0.7; }

.badge-card { display: flex; align-items: center; background: #fef8e3; padding: 15px; border-radius: 15px; }
.badge-icon { margin-right: 15px; display:flex; align-items:center; justify-content:center; }
.badge-card p { margin: 5px 0 0 0; font-size: 13px; color: #666; }

/* Grid Game & Toko Resep */
.level-title { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #777; margin: 0 0 10px 0; font-weight: bold; }
.level-icon { width: 24px; height: 24px; object-fit: contain; }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;}
.game-card { display: block; border-radius: 15px; overflow: hidden; text-decoration: none; background: #f9f9f9; border: 1px solid #eee; transition: transform 0.2s; position:relative; }
.game-card:active { transform: scale(0.95); }
.game-card-img { aspect-ratio: 16 / 9; width: 100%; background-size: cover; background-position: center; position:relative; }
.game-card-title { padding: 10px; font-size: 14px; font-weight: bold; text-align: center; }

/* Status Terkunci */
.locked-card { cursor: pointer; }
.locked-bg { filter: grayscale(80%) brightness(0.6); }
.lock-overlay { position: absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index: 2; }
.lock-icon { font-size: 24px; margin-bottom: 2px; }
.lock-cost { background: rgba(0,0,0,0.7); color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }

/* Pop Up Beli */
.modal-overlay { position: fixed; top:0; left:0; width:100vw; height:100vh; height: 100dvh; background: rgba(0,0,0,0.7); z-index: 9999; display:flex; align-items:center; justify-content:center; }
.modal-content { background: white; padding: 25px; border-radius: 20px; text-align: center; width: 90%; max-width: 320px; }
.modal-content h3 { margin-top:0; color: var(--jp-title); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel { flex:1; padding: 12px; border-radius: 30px; border: 1px solid #ccc; background: #fff; font-weight: bold; cursor: pointer; color: #555;}
.btn-confirm { flex:1; padding: 12px; border-radius: 30px; border: none; background: var(--jp-accent); color: white; font-weight: bold; cursor: pointer; }

.lb-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f4f4f4; font-size: 15px; gap: 12px;}
.lb-item:last-child { border-bottom: none; }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--jp-accent); }
.lb-badge { width: 30px; height: 30px; object-fit: contain; }
.lb-info { flex: 1; display: flex; align-items: center; gap: 8px; }
.lb-name { font-weight: bold; }
.btn-logout { text-decoration: none; font-size: 14px; display: inline-block; margin-top: 10px; opacity: 0.6; }
.success-message { background: #e8f5e9; color: #2e7d32; padding: 10px; border-radius: 8px; margin-bottom: 15px; text-align: center; font-weight: bold; }

/* =========================================
   4. LAYAR PERMAINAN & EDUKASI
   ========================================= */
.game-body { overflow: hidden; touch-action: none; background-color: var(--jp-bg); }
#game-container { width: 100vw; height: 100vh; height: 100dvh; position: relative; max-width: 500px; margin: 0 auto; overflow: hidden; }
#timer { position: absolute; top: 20px; right: 20px; font-size: 24px; font-weight: bold; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 20; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
#basket-container { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 70%; max-width: 300px; z-index: 10; }
#basket { width: 100%; height: auto; display: block; }
.game-item { position: absolute; width: 70px; height: 70px; object-fit: contain; z-index: 15; cursor: grab; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
.game-item:active { cursor: grabbing; }

#start-overlay, #result-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; z-index: 100; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; }
#start-overlay { background: rgba(0,0,0,0.7); z-index: 200; }
#result-overlay { background: rgba(0,0,0,0.85); }
.start-content, .result-content { background: #fff; color: #333; padding: 30px 20px 40px 20px; border-radius: 20px; width: 100%; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 75vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.start-content h2 { margin-top: 0; }

#btn-start, .btn-retry { background: var(--jp-primary) !important; color: var(--jp-primary-text) !important; border: none; padding: 15px 40px; border-radius: 50px; font-weight: bold; font-size: 18px; cursor: pointer; margin-top: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.3s;}
#btn-start:hover, .btn-retry:hover { transform: scale(1.05); }
.btn-kembali-dasbor { color: #777; text-decoration: none; font-size: 14px; display: inline-block; margin-top: 15px; padding-bottom: 20px; font-weight: bold;}

.summary-box { background: #fef8e3; padding: 15px; border-radius: 15px; margin-top: 15px; }
.summary-box h4 { margin: 15px 0 10px 0; font-size: 14px; color: var(--jp-text); text-align: left; border-bottom: 1px solid var(--jp-divider); padding-bottom: 4px;}
.caught-list { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; justify-content: center; }
.caught-item { display: flex; flex-direction: column; align-items: center; width: 65px; text-align: center; }
.caught-item img { width: 45px; height: 45px; object-fit: contain; border: 1px solid var(--jp-divider); border-radius: 10px; padding: 4px; background: #fff; margin-bottom: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.caught-item span { font-size: 11px; line-height: 1.2; font-weight: bold; color: var(--jp-text); }
.caught-item small { color: #d32f2f; font-weight: bold; font-size: 10px;}
.warning-text { color: #d32f2f; font-size: 12px; font-weight: bold; margin-top: -5px; margin-bottom: 10px; text-align: left; }
#edu-text { font-size: 14px; line-height: 1.6; text-align: left; margin-bottom: 20px; border-top: 2px dashed #eee; padding-top:15px;}