/* --- RESET & VARIABLES --- */
:root {
    --primary: #FFCA28; --accent: #FF7043; --success: #66BB6A;
    --bg-light: #E0F7FA; --text: #37474F; --white: #FFFFFF;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Nunito', sans-serif; margin: 0; padding: 0;
    color: var(--text); 
    /* Ubah height jadi min-height agar aman di mobile browser */
    min-height: 100vh; width: 100vw;
    overflow: hidden; /* Mencegah scroll body utama, kita scroll per screen */
    background-color: var(--bg-light);
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}

/* Custom Scrollbar agar lebih rapi */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }

input { user-select: text; -webkit-user-select: text; }
h1, h2, h3, button, .level-node { font-family: 'Fredoka One', cursive; }

/* --- SCREEN --- */
.screen { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    display: none; flex-direction: column; 
    overflow-y: auto; padding: 15px; transition: opacity 0.3s; 
    /* Smooth scrolling untuk iOS */
    -webkit-overflow-scrolling: touch; 
}
.active-screen { display: flex; z-index: 10; }
.center-content { align-items: center; justify-content: center; gap: 10px; }

/* --- KHUSUS FIX SCROLLING PAGE STAGE (PENTING) --- */
/* --- FIX SCROLLING PAGE STAGE (FINAL) --- */
#stage-screen {
    /* 1. PENTING: Paksa konten mulai dari ATAS (Vertikal), jangan Center! */
    justify-content: flex-start !important; 
    
    /* 2. Pastikan kartu tetap di TENGAH (Horizontal) */
    align-items: center !important; 
    
    /* 3. Aktifkan scroll vertikal */
    overflow-y: auto !important; 
    
    /* 4. Beri ruang napas yang cukup */
    padding-top: 60px;   /* Jarak atas biar tidak ketabrak poni HP */
    padding-bottom: 100px; /* Jarak bawah biar tombol tidak kepotong */
    
    /* Smooth scrolling untuk iPhone */
    -webkit-overflow-scrolling: touch; 
}

/* Pastikan kartu stage memiliki margin yang benar */
#stage-screen .card {
    margin: 0 auto 25px auto; /* Tengah horizontal, ada jarak bawah */
    flex-shrink: 0; /* Mencegah kartu gepeng */
    width: 90%; /* Lebar responsif di HP */
    max-width: 350px; /* Batas lebar di Komputer */
}

/* --- UI COMPONENTS --- */
.card { background: var(--white); padding: 25px; border-radius: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); width: 100%; max-width: 350px; text-align: center; border: 4px solid #fff; margin: 0 auto; }
.btn { border: none; border-radius: 15px; font-size: 1.1rem; padding: 12px; cursor: pointer; width: 100%; margin-top: 10px; box-shadow: 0 5px 0 rgba(0,0,0,0.2); transition: transform 0.1s; font-weight: bold; }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-small { padding: 8px 15px; font-size: 0.9rem; margin: 0; width: auto; }
.btn-text { background: none; box-shadow: none; color: #999; margin-top: 5px; font-size: 0.9rem; text-decoration: underline; }

/* Warna Umum */
.btn-primary { background: var(--primary); color: #5D4037; }
.btn-secondary { background: #B2EBF2; color: #006064; box-shadow: 0 4px 0 #80DEEA; }
.btn-danger { background: #EF5350; color: white; box-shadow: 0 4px 0 #C62828; }
.btn-success { background: var(--success); color: white; box-shadow: 0 4px 0 #2E7D32; }
.btn-info-small { background: #ECEFF1; color: #546E7A; font-size: 0.9rem; padding: 12px; box-shadow: 0 4px 0 #CFD8DC; margin-top: 10px; }

/* --- TAMBAHAN STYLE UNTUK LEADERBOARD & ADMIN --- */
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #0277BD; color: white; border-radius: 4px; }
tr:last-child td { border-bottom: none; }

/* Badges Juara */
.badge { padding: 4px 8px; border-radius: 12px; font-size: 0.85rem; font-weight: bold; display: inline-block; }
.bg-gold { background: #FFF9C4; color: #FBC02D; border: 1px solid #FFF176; }
.bg-silver { background: #F5F5F5; color: #757575; border: 1px solid #E0E0E0; }
.bg-bronze { background: #FFCCBC; color: #D84315; border: 1px solid #FFAB91; }
.score-box { background: #FFF3E0; color: #E65100; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.time-box { color: #2E7D32; font-weight: bold; }

/* --- TOMBOL GAME CONTROL (MODULAR) --- */
.btn-base {
    border: none; border-radius: 10px; font-size: 1.5rem; padding: 0; cursor: pointer;
    width: 100%; height: 50px; margin: 0; transition: transform 0.1s;
    font-family: 'Fredoka One', cursive; display: flex; align-items: center; justify-content: center;
}
.btn-base:active { transform: translateY(4px); box-shadow: none !important; }

/* Warna Tombol */
.btn-arrow { background-color: #FFCC80; color: #E65100; box-shadow: 0 4px 0 #FB8C00; }
.btn-reset { background-color: #EF5350; color: white; box-shadow: 0 4px 0 #C62828; }
.btn-delete { background-color: #EEEEEE; color: #37474F; box-shadow: 0 4px 0 #BDBDBD; }
.btn-action-purple { background-color: #9C27B0; color: white; box-shadow: 0 4px 0 #7B1FA2; }
.btn-run { background-color: #66BB6A; color: white; box-shadow: 0 4px 0 #2E7D32; font-size: 1.2rem; }

/* Help Button */
.btn-help { position: fixed; bottom: 20px; right: 20px; z-index: 900; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: white; border: 4px solid white; font-size: 1.5rem; font-weight: bold; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-family: 'Fredoka One', cursive; }
.btn-help:active { transform: scale(0.9); }

/* --- TAMBAHAN UNTUK STAGE 5 --- */
.btn-loop { background-color: #29B6F6; color: white; box-shadow: 0 4px 0 #0288D1; }
.btn-loop:active { transform: translateY(4px); box-shadow: none; }

.btn-loop-selector { background-color: #1565C0; color: #FFEB3B; box-shadow: 0 4px 0 #0D47A1; font-size: 1.3rem; }
.btn-loop-selector:active { transform: translateY(4px); box-shadow: none; }

/* Inputs */
input { width: 100%; padding: 15px; margin: 8px 0; border: 3px solid #B0BEC5; border-radius: 15px; font-size: 1rem; outline: none; background: #FAFAFA; text-align: center; }
input:focus { border-color: var(--accent); background: #FFF3E0; }
.privacy-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; text-align: left; background:#f5f5f5; padding:8px; border-radius:8px; }
.privacy-row input { width: 20px; height: 20px; margin: 0; }
.privacy-row label { font-size: 0.8rem; color:#666; line-height:1.2; }
.row { display: flex; gap: 10px; width: 100%; }

/* --- STAGES --- */
.stage-grid { display: flex; gap: 10px; width: 100%; margin-top: 10px; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.stage-card { flex: 1; min-width: 140px; background: #E0F7FA; border: 3px solid #B2EBF2; border-radius: 15px; padding: 10px; cursor: pointer; position: relative; transition: 0.2s; overflow: hidden; font-size: 0.9rem;}
.stage-card:active { transform: scale(0.95); }
.stage-icon { font-size: 2.5rem; margin-bottom: 5px; display: block;}
.stage-lock { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 12px; }

/* --- GAME & MAP --- */
.auth-bg { background: linear-gradient(135deg, #26C6DA, #00BCD4); }
.game-title { color: white; font-size: 3rem; text-shadow: 0 4px 0 rgba(0,0,0,0.2); margin: 0 0 10px 0; text-align: center; line-height: 1.2; }
.map-bg { padding: 0; background-image: url('assets/map-bg.webp'); background-size: cover; background-position: center; }
.map-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: rgba(255,255,255,0.95); display: flex; justify-content: space-between; align-items: center; padding: 0 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 50; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
#stage-title { font-size: 1.2rem; margin-left: 10px; }
.map-overlay { width: 100%; height: 100vh; position: relative; pointer-events: auto !important; padding-bottom: 100px; }
.level-node { position: absolute; width: 65px; height: 65px; border-radius: 50%; background: #CFD8DC; border: 4px solid white; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; box-shadow: 0 5px 0 rgba(0,0,0,0.3); transform: translate(-50%, -50%); transition: 0.2s; cursor: pointer !important; z-index: 100 !important; }
.lvl-active { background: var(--primary); border-color: #FFF8E1; color: #E65100; animation: pulse 1.5s infinite; z-index: 101 !important; }
.lvl-done { background: var(--success); border-color: #E8F5E9; }
.lvl-done::after { content: '✓'; position: absolute; top: -10px; right: -10px; font-size: 1.5rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
.lvl-locked { opacity: 0.8; background: #90A4AE; cursor: not-allowed !important; }

.story-bg { background: #FFF9C4; }
.story-box { width: 100%; aspect-ratio: 4/3; border-radius: 15px; overflow: hidden; border: 4px solid var(--primary); margin-bottom: 10px; background: #eee;}
#story-img { width: 100%; height: 100%; object-fit: cover; }
#story-txt { font-size: 1.1rem; font-weight: bold; min-height: 50px; margin-bottom: 10px; }

.game-bg { background: #E0F7FA; align-items: center; }
.game-header { width: 100%; max-width: 450px; background: white; padding: 10px 15px; border-radius: 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; box-shadow: 0 4px 0 rgba(0,0,0,0.05); flex-shrink: 0; }
.level-info { display: flex; align-items: center; gap: 15px; }
.level-title { font-size: 1.3rem; color: var(--accent); font-weight: bold; }

.star-wrapper { display: flex; gap: 3px; }
.star-icon { font-size: 1.4rem; filter: grayscale(100%); opacity: 0.3; transition: all 0.3s; }
.star-filled { filter: grayscale(0%); opacity: 1; transform: scale(1.3); text-shadow: 0 0 10px rgba(255,215,0,0.5); }

#grid-wrapper { width: 90vmin; height: 90vmin; max-width: 380px; max-height: 380px; background: #81C784; border-radius: 15px; padding: 8px; border: 4px solid #66BB6A; box-shadow: 0 10px 0 #558B2F; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
#grid-container { width: 100%; height: 100%; }
#grid { display: grid; gap: 4px; width: 100%; height: 100%; }
.cell { background: rgba(255,255,255,0.6); border-radius: 6px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cell svg { width: 85%; height: 85%; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1)); }

#ui-controls { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; flex-shrink: 0; }
#code-display { background: white; height: 50px; border-radius: 12px; border: 2px dashed #B0BEC5; display: flex; align-items: center; padding: 0 10px; gap: 5px; overflow-x: auto; white-space: nowrap; }
.cmd-block { flex-shrink: 0; width: 35px; height: 35px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border-bottom: 3px solid #FF8F00; color: #5D4037; }

#btn-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: white; padding: 12px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* --- MODALS (Universal, Tutorial, Leaderboard) --- */
/* Z-Index ditingkatkan agar menutupi elemen map */
#modal, #modal-tutorial, #modal-data-info, #universal-modal, #modal-profile, #modal-leaderboard, #modal-lb-help { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; 
    z-index: 1000; backdrop-filter: blur(3px); 
}
.modal-content { background: white; padding: 30px; border-radius: 30px; text-align: center; border: 5px solid var(--primary); animation: popIn 0.4s; width: 90%; max-width: 400px; max-height: 90vh; overflow-y: auto; }
#mod-icon, #uni-icon { font-size: 4rem; margin: 10px 0; }
#mod-title, #uni-title { margin: 0; font-size: 2rem; color: var(--text); }
#mod-msg, #uni-msg { font-size: 1.2rem; margin-bottom: 20px; }

@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 20px rgba(255, 202, 40, 0.6); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

@media (max-width: 600px) {
    .stage-grid { flex-direction: column; }
    .stage-card { width: 100%; margin-bottom: 10px; }
    .map-overlay { height: 100vh; }
    .game-title { font-size: 2.5rem; margin-top: 40px; }
}