/* fun.css - FINAL RESPONSIVE & OPTIMIZED */

:root {
    --bg-dark: #050505;
    --bg-panel: #111;
    --neon-green: #00ff41;
    --neon-red: #ff3b30;
    --neon-blue: #00a8e8;
    --neon-gold: #ff9500;
    --border-dim: #333;
    --font-mono: 'JetBrains Mono', monospace;
}

body {
    margin: 0;
    overflow: hidden; /* Mencegah scroll browser saat main */
    background-color: var(--bg-dark);
    /* Grid Background */
    background-image: 
        radial-gradient(#222 1px, transparent 1px),
        radial-gradient(#151515 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    font-family: var(--font-mono);
    color: var(--neon-green);
    touch-action: none; /* PENTING: Mencegah refresh tarik turun di HP */
    height: 100vh;
    width: 100vw;
}

canvas {
    display: block;
    cursor: crosshair;
    touch-action: none; /* Mencegah scroll saat drawing */
}

/* --- UI ELEMENTS (DEFAULT / DESKTOP) --- */

/* Tombol Kembali (Pojok Kiri Atas) */
.back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.8);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    padding: 8px 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 100;
    backdrop-filter: blur(4px);
    transition: 0.2s;
}
.back-btn:hover {
    background: var(--neon-green);
    color: black;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
}

/* Info Posisi & Jump (Kiri Bawah Default) */
.coords-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 10, 10, 0.9);
    padding: 10px;
    border: 1px solid var(--border-dim);
    border-left: 3px solid var(--neon-blue);
    color: #888;
    font-size: 0.7rem;
    z-index: 90;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.coord-inputs { display: flex; gap: 5px; margin-top: 5px; }

.mini-input {
    width: 50px; background: #000; border: 1px solid #333; color: #fff;
    padding: 4px; font-family: inherit; font-size: 0.7rem; text-align: center;
}
.mini-input:focus { border-color: var(--neon-blue); outline: none; }

.mini-btn {
    background: var(--neon-blue); color: #000; border: none; font-weight: bold;
    cursor: pointer; font-family: inherit; font-size: 0.7rem; padding: 0 8px;
}

/* Player Stats (Kanan Atas) */
.player-stats {
    position: fixed;
    top: 20px; right: 20px; text-align: right; z-index: 90;
    background: rgba(0,0,0,0.8); padding: 8px 15px;
    border: 1px solid var(--border-dim); border-right: 3px solid var(--neon-gold);
    backdrop-filter: blur(4px);
}

/* --- TOOLBOX (DESKTOP STYLE) --- */
.toolbox {
    position: fixed;
    top: 80px; 
    right: 20px;
    width: 250px; 
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--border-dim);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    padding: 15px;
    border-radius: 4px;
    backdrop-filter: blur(5px);
    z-index: 100;
}

.tool-header {
    font-size: 0.7rem; color: var(--neon-gold); margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-dim); padding-bottom: 5px;
    text-align: center; font-weight: bold; letter-spacing: 1px;
}

/* Layout Tombol */
.tool-row {
    display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
}

.tool-btn {
    flex: 1;
    background: #111; border: 1px solid #444; color: #888;
    padding: 10px 0; font-family: inherit; font-size: 0.7rem;
    cursor: pointer; transition: 0.2s; border-radius: 2px;
    display: flex; justify-content: center; align-items: center; white-space: nowrap;
}

.tool-btn:hover { border-color: #666; color: #fff; }
.tool-btn.active { 
    background: var(--neon-green); color: #000; 
    border-color: var(--neon-green); font-weight: bold; 
    box-shadow: 0 0 10px rgba(0,255,65,0.3);
}

.upload-btn { width: 100%; border-color: var(--neon-blue); color: var(--neon-blue); }

/* Inputs Slider & Color */
input[type="color"] {
    -webkit-appearance: none; border: none; width: 40px; height: 35px; 
    background: none; cursor: pointer; padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #444; border-radius: 2px; }

input[type="range"] {
    flex: 1; width: 100%; accent-color: var(--neon-green); height: 4px;
    background: #333; border-radius: 2px; outline: none;
}

.instructions {
    font-size: 0.55rem; color: #555; margin-top: 10px; text-align: center;
    border-top: 1px solid #222; padding-top: 8px; line-height: 1.4;
}

/* --- FLOATING TEXT INPUT --- */
#floatingInput {
    position: fixed;
    display: none;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 12px;
    z-index: 200;
    min-width: 200px;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
    outline: none; border-radius: 4px;
}

/* --- AUTH OVERLAY --- */
.auth-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(8px); padding: 20px;
}

.auth-box {
    background: #0a0a0a; border: 1px solid var(--neon-green);
    padding: 30px; width: 100%; max-width: 400px;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.15);
    display: flex; flex-direction: column; gap: 15px;
}
.term-input {
    width: 100%; background: #000; border: 1px solid #333; color: #fff;
    padding: 12px 15px; font-family: var(--font-mono); font-size: 0.9rem;
    box-sizing: border-box; 
}
.term-input:focus { border-color: var(--neon-green); outline: none; }


/* ==================================================
   MOBILE RESPONSIVE OVERRIDES (MAX-WIDTH 768px)
   ================================================== */
@media (max-width: 768px) {
    
    /* 1. TOOLBOX: Fixed di Bawah Layar */
    .toolbox {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important; /* Full width */
        max-width: none !important;
        
        border-radius: 20px 20px 0 0;
        border: none;
        border-top: 2px solid var(--neon-green);
        
        /* Layout Tumpuk (Stack) */
        display: flex !important;
        flex-direction: column !important; 
        gap: 12px !important;
        
        /* Padding extra di bawah untuk iPhone home bar */
        padding: 20px 20px 35px 20px !important;
        background: #0f0f0f !important;
        box-shadow: 0 -5px 30px rgba(0,0,0,0.9) !important;
    }

    /* 2. BARIS TOMBOL: Flex melebar penuh */
    .tool-row {
        width: 100% !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    /* 3. TOMBOL TOOLS (PENCIL, TEXT, MOVE) */
    .tool-btn {
        height: 45px !important; /* Touch target besar */
        font-size: 0.85rem !important;
        flex: 1 !important;
    }

    /* 4. SETTING WARNA & SIZE */
    /* Baris slider dibuat lebih tinggi */
    input[type="color"] {
        height: 45px !important;
        width: 60px !important;
    }
    input[type="range"] {
        height: 45px !important; /* Area touch slider besar */
    }

    /* 5. UPLOAD BUTTON */
    .upload-btn {
        padding: 12px !important;
    }

    /* 6. SEMBUNYIKAN ELEMEN TIDAK PENTING DI HP */
    .tool-header, 
    .instructions {
        display: none !important;
    }

    /* 7. PEMINDAHAN POSISI STATS & COORDS (Agar area tengah kosong) */
    
    /* Stats: Tetap di Kanan Atas tapi kecil */
    .player-stats {
        top: 15px !important;
        right: 15px !important;
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
        background: rgba(0,0,0,0.6) !important;
    }

    /* Coords: PINDAH KE KIRI ATAS (Di bawah tombol Back) */
    /* Ini solusi terbaik agar tidak tertutup toolbox di bawah */
    .coords-panel {
        top: 60px !important; /* Di bawah tombol Back */
        left: 20px !important;
        bottom: auto !important; /* Lepaskan dari bawah */
        border-left: 2px solid var(--neon-blue) !important;
        background: rgba(0,0,0,0.6) !important;
    }
    
    .mini-input { width: 40px !important; }

    /* 8. INPUT TEXT FLOATING */
    #floatingInput {
        width: 80% !important;
        left: 10% !important; /* Selalu di tengah secara horizontal */
        font-size: 1rem !important;
    }
}