/* =============== CSS VARIABLES =============== */
:root {
    /* PALETTE WARNA PREMIUM - CERAH & MENYENANGKAN */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --danger-gradient: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
    --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    /* COLOR TOKENS */
    --primary-purple: #667eea;
    --primary-pink: #f093fb;
    --success-green: #43e97b;
    --warning-orange: #fa709a;
    --danger-red: #ff0844;
    --info-blue: #4facfe;
    --light-blue: #a8edea;
    --light-pink: #fbc2eb;
    --light-yellow: #f6d365;
    --light-green: #84fab0;
    
    --dark-text: #2d3748;
    --medium-text: #4a5568;
    --light-text: #718096;
    --white: #ffffff;
    --light-bg: #f7fafc;
    --card-bg: rgba(255, 255, 255, 0.95);
    --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.15);
    --border-radius-sm: 12px;
    --border-radius-md: 20px;
    --border-radius-lg: 30px;
    --border-radius-xl: 40px;
}

/* =============== RESET & BASE STYLES =============== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    background: var(--primary-gradient);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Background Decoration */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* =============== GAME CONTAINER =============== */
.game-container {
    width: 100%;
    max-width: 500px;
    height: 95vh;
    min-height: 700px;
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-heavy);
    overflow: hidden;
    position: relative;
    border: 12px solid white;
    backdrop-filter: blur(20px);
}

/* Container Glow Effect */
.game-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, 
        var(--primary-purple), 
        var(--primary-pink), 
        var(--info-blue), 
        var(--success-green));
    border-radius: var(--border-radius-lg);
    z-index: -1;
    filter: blur(20px);
    opacity: 0.6;
}

/* =============== SCREEN SYSTEM =============== */
.screen {
    display: none !important;;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.screen.active {
    display: flex !important;;
}

/* =============== UTILITY CLASSES =============== */
.gradient-text {
    background: var(--warning-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============== ANIMATIONS =============== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.slide-up {
    animation: slideUp 0.4s ease forwards;
}

/* =============== RESPONSIVE BASE =============== */
@media (max-height: 750px) {
    .game-container {
        height: 90vh;
        min-height: 600px;
    }
}

@media (max-width: 500px) {
    .game-container {
        border-radius: var(--border-radius-md);
        height: 90vh;
        min-height: 600px;
    }
}

@media (max-width: 400px) {
    body {
        padding: 10px;
    }
    
    .game-container {
        border: 8px solid white;
    }
}