:root {
    --primary-color: #FF9F1C;
    --secondary-color: #2EC4B6;
    --accent-color: #E71D36;
    --bg-color: #FDFFFC;
    --text-color: #011627;
    --font-main: 'M PLUS Rounded 1c', sans-serif;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-hard: 0 4px 0 rgba(0, 0, 0, 0.2);
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    /* touch-action: none; removed to allow scrolling in sidebars */
}

body {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    overscroll-behavior: none;
    /* Prevent bounce scroll */
}

#app {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Better for mobile browsers */
    position: relative;
    overflow: hidden;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    z-index: 10;
    pointer-events: auto;
    /* Ensure screens capture checks unless overridden */
}

.screen.active {
    display: flex;
}

/* Loading Screen */
#loading-screen {
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='loadGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff7eb3' /%3E%3Cstop offset='50%25' stop-color='%23ff9f1c' /%3E%3Cstop offset='100%25' stop-color='%23ffbf69' /%3E%3C/linearGradient%3E%3Cpattern id='stars' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 50 10 L 60 40 L 90 40 L 65 60 L 75 90 L 50 70 L 25 90 L 35 60 L 10 40 L 40 40 Z' fill='%23ffffff' opacity='0.3' /%3E%3Ccircle cx='80' cy='80' r='5' fill='%23ffffff' opacity='0.5' /%3E%3Ccircle cx='20' cy='20' r='8' fill='%23ffffff' opacity='0.2' /%3E%3C/pattern%3E%3Cfilter id='dropGlow'%3E%3CfeGaussianBlur stdDeviation='10' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23loadGrad)' /%3E%3Crect width='1440' height='900' fill='url(%23stars)' /%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FFD54F' opacity='0.4' filter='url(%23dropGlow)' /%3E%3Cpolygon points='1200,800 1250,700 1300,800' fill='%234FC3F7' opacity='0.4' filter='url(%23dropGlow)' transform='rotate(15 1250 750)' /%3E%3Crect x='100' y='700' width='80' height='80' rx='20' fill='%2381C784' opacity='0.4' filter='url(%23dropGlow)' transform='rotate(-20 140 740)' /%3E%3Ccircle cx='1300' cy='200' r='100' fill='%23CE93D8' opacity='0.3' filter='url(%23dropGlow)' /%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    color: white;
    cursor: pointer;
}

.logo h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}

/* Map Screen */
#map-screen {
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='mapGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a8edea' /%3E%3Cstop offset='100%25' stop-color='%23fed6e3' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23mapGrad)' /%3E%3Cpath d='M0 500 Q 200 450, 400 550 T 800 500 T 1200 600 T 1440 450 L1440 900 L0 900 Z' fill='%23ffffff' opacity='0.3' /%3E%3Cpath d='M0 600 Q 300 500, 600 650 T 1200 550 T 1440 700 L1440 900 L0 900 Z' fill='%23ffffff' opacity='0.5' /%3E%3Cpath d='M0 800 Q 400 650, 800 850 T 1440 750 L1440 900 L0 900 Z' fill='%23ffffff' opacity='0.7' /%3E%3Ccircle cx='100' cy='520' r='50' fill='%23b2dfdb' opacity='0.6' /%3E%3Crect x='90' y='550' width='20' height='60' fill='%23d7ccc8' opacity='0.6' /%3E%3Ccircle cx='1350' cy='620' r='70' fill='%23c8e6c9' opacity='0.6' /%3E%3Crect x='1340' y='650' width='20' height='80' fill='%23d7ccc8' opacity='0.6' /%3E%3Ccircle cx='1250' cy='650' r='40' fill='%23a5d6a7' opacity='0.6' /%3E%3Crect x='1242' y='680' width='15' height='50' fill='%23d7ccc8' opacity='0.6' /%3E%3Cpath d='M 150 750 Q 300 550, 500 700 T 900 600 T 1300 800' fill='none' stroke='%23ff8a65' stroke-width='8' stroke-dasharray='15,20' opacity='0.8' /%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.map-node {
    background: white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    touch-action: none;
    transition: transform 0.2s;
}

.map-node:active {
    transform: scale(0.95);
}

.map-node .icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.map-node.locked {
    opacity: 0.6;
    filter: grayscale(1);
}

/* Game Screen */
#game-screen {
    background: #333;
}

#scene-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    overflow: hidden;
    z-index: 1;
    pointer-events: auto;
    /* Ensure scene receives clicks */
    touch-action: none;
    /* Prevent scroll/zoom on game area */
}

/* Scene Backgrounds */
.scene-bg-home,
.scene-bg-school,
.scene-bg-hospital,
.scene-bg-convenience,
.scene-bg-aquarium,
.scene-bg-zoo {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* HOME */
.scene-bg-home {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='homeGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFFDF7' /%3E%3Cstop offset='100%25' stop-color='%23FFE0B2' /%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='30' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23homeGrad)' /%3E%3Ccircle cx='1200' cy='200' r='150' fill='%23FFCC80' opacity='0.4' filter='url(%23blur)' /%3E%3Crect x='100' y='400' width='400' height='500' rx='200' fill='%23FFAB91' opacity='0.3' /%3E%3Crect x='900' y='500' width='300' height='600' rx='150' fill='%23FFE082' opacity='0.4' /%3E%3Cpath d='M0 700 Q 300 650, 720 750 T 1440 600 L1440 900 L0 900 Z' fill='%23FFCC80' opacity='0.3' /%3E%3C/svg%3E");
}

/* SCHOOL */
.scene-bg-school {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='schoolGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23E0F7FA' /%3E%3Cstop offset='100%25' stop-color='%23B2EBF2' /%3E%3C/linearGradient%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23FFFFFF' stroke-width='1' opacity='0.5'/%3E%3C/pattern%3E%3Cfilter id='blur2'%3E%3CfeGaussianBlur stdDeviation='10' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23schoolGrad)' /%3E%3Crect width='1440' height='900' fill='url(%23grid)' /%3E%3Ccircle cx='200' cy='150' r='80' fill='%23FFCDD2' opacity='0.6' filter='url(%23blur2)' /%3E%3Cpolygon points='1200,100 1300,300 1100,300' fill='%23FFF9C4' opacity='0.6' /%3E%3Crect x='800' y='400' width='150' height='150' rx='30' fill='%23C8E6C9' opacity='0.6' transform='rotate(15 800 400)' /%3E%3Cpath d='M0 800 Q 400 700, 1440 850 L1440 900 L0 900 Z' fill='%2380DEEA' opacity='0.4' /%3E%3C/svg%3E");
}

/* HOSPITAL */
.scene-bg-hospital {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='hospGrad' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23F1FBFC' /%3E%3Cstop offset='100%25' stop-color='%23E0F2F1' /%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='20' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23hospGrad)' /%3E%3Ccircle cx='1100' cy='200' r='100' fill='%2380CBC4' opacity='0.4' filter='url(%23glow)' /%3E%3Ccircle cx='300' cy='700' r='150' fill='%23B2DFDB' opacity='0.4' filter='url(%23glow)' /%3E%3Cpath d='M 150 150 h 20 v -20 h 20 v 20 h 20 v 20 h -20 v 20 h -20 v -20 h -20 z' fill='%234DB6AC' opacity='0.2' transform='rotate(10 180 180)' /%3E%3Cpath d='M 1200 650 h 40 v -40 h 40 v 40 h 40 v 40 h -40 v 40 h -40 v -40 h -40 z' fill='%2380CBC4' opacity='0.25' transform='rotate(-15 1260 690)' /%3E%3Cpath d='M0 500 C 200 500, 300 400, 400 500 C 450 600, 500 300, 550 500 C 600 500, 800 500, 1440 500' fill='none' stroke='%2380CBC4' stroke-width='6' opacity='0.4' /%3E%3C/svg%3E");
}

/* CONVENIENCE */
.scene-bg-convenience {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='conviGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF8E1' /%3E%3Cstop offset='100%25' stop-color='%23FFE082' /%3E%3C/linearGradient%3E%3Cpattern id='awning' width='100' height='60' patternUnits='userSpaceOnUse'%3E%3Crect width='50' height='60' fill='%23FF9800' opacity='0.8' /%3E%3Crect x='50' width='50' height='60' fill='%23FFF3E0' opacity='0.8' /%3E%3Cpath d='M 0 60 Q 25 80, 50 60 Q 75 80, 100 60' fill='none' stroke='%23FF9800' stroke-width='4' opacity='0.8'/%3E%3C/pattern%3E%3Cfilter id='cblur'%3E%3CfeGaussianBlur stdDeviation='20' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23conviGrad)' /%3E%3Crect width='1440' height='60' fill='url(%23awning)' /%3E%3Crect x='100' y='200' width='300' height='600' rx='20' fill='%23FFB74D' opacity='0.3' /%3E%3Crect x='500' y='300' width='300' height='500' rx='20' fill='%23FFCC80' opacity='0.3' /%3E%3Crect x='900' y='200' width='400' height='600' rx='30' fill='%23FFD54F' opacity='0.3' /%3E%3Ccircle cx='1000' cy='450' r='100' fill='%23FFA726' opacity='0.4' filter='url(%23cblur)' /%3E%3Cpath d='M0 800 L 1440 700 L 1440 900 L 0 900 Z' fill='%23FF9800' opacity='0.15' /%3E%3C/svg%3E");
}

/* AQUARIUM */
.scene-bg-aquarium {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='aquaGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230077B6' /%3E%3Cstop offset='100%25' stop-color='%2303045E' /%3E%3C/linearGradient%3E%3ClinearGradient id='rays' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2348CAE4' stop-opacity='0.4' /%3E%3Cstop offset='100%25' stop-color='%2300B4D8' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23aquaGrad)' /%3E%3Cpolygon points='100,0 400,0 600,900 0,900' fill='url(%23rays)' /%3E%3Cpolygon points='800,0 1200,0 1400,900 600,900' fill='url(%23rays)' /%3E%3Ccircle cx='200' cy='700' r='15' fill='%2390E0EF' opacity='0.5' /%3E%3Ccircle cx='230' cy='650' r='8' fill='%2390E0EF' opacity='0.6' /%3E%3Ccircle cx='1100' cy='500' r='25' fill='%2390E0EF' opacity='0.3' /%3E%3Ccircle cx='1150' cy='400' r='15' fill='%2390E0EF' opacity='0.4' /%3E%3Ccircle cx='1050' cy='300' r='12' fill='%2390E0EF' opacity='0.5' /%3E%3Ccircle cx='700' cy='800' r='20' fill='%2390E0EF' opacity='0.4' /%3E%3Ccircle cx='750' cy='750' r='10' fill='%2390E0EF' opacity='0.5' /%3E%3Cpath d='M0 750 Q 360 650, 720 750 T 1440 700 L1440 900 L0 900 Z' fill='%23023E8A' opacity='0.8' /%3E%3Cpath d='M0 800 Q 360 850, 720 800 T 1440 850 L1440 900 L0 900 Z' fill='%23001C55' opacity='0.9' /%3E%3C/svg%3E");
}

/* ZOO */
.scene-bg-zoo {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='zooGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23E8F5E9' /%3E%3Cstop offset='100%25' stop-color='%23C8E6C9' /%3E%3C/linearGradient%3E%3Cfilter id='light'%3E%3CfeGaussianBlur stdDeviation='40' /%3E%3C/filter%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23zooGrad)' /%3E%3Ccircle cx='1200' cy='-100' r='500' fill='%23FFF9C4' opacity='0.6' filter='url(%23light)' /%3E%3Cpath d='M0 600 Q 400 400, 800 600 T 1440 500 L1440 900 L0 900 Z' fill='%23A5D6A7' opacity='0.6' /%3E%3Cpath d='M0 750 Q 300 650, 900 800 T 1440 700 L1440 900 L0 900 Z' fill='%2381C784' opacity='0.7' /%3E%3Cpath d='M 0 0 C 200 0, 250 200, 0 300 Z' fill='%234CAF50' opacity='0.5' /%3E%3Cpath d='M 0 0 C 400 0, 450 150, 250 0 Z' fill='%23388E3C' opacity='0.5' /%3E%3Crect x='1200' y='300' width='80' height='600' rx='20' fill='%238D6E63' opacity='0.6' /%3E%3Ccircle cx='1240' cy='250' r='180' fill='%234CAF50' opacity='0.5' /%3E%3Ccircle cx='1150' cy='300' r='120' fill='%2366BB6A' opacity='0.5' /%3E%3Ccircle cx='1320' cy='180' r='140' fill='%2381C784' opacity='0.5' /%3E%3C/svg%3E");
}

/* UI Layer */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    pointer-events: none;
    /* Crucial: let clicks pass through transparent areas */
}

.ui-btn {
    pointer-events: auto;
    /* Buttons must be clickable */
    background: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

/* Sidebars */
.sidebar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 90;
    max-height: 80vh;
    overflow-y: auto;
    pointer-events: auto;
    /* Ensure Sidebar is clickable */
}

.sidebar.left {
    left: 10px;
}

.sidebar.right {
    right: 10px;
}

.spawn-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

/* Game Entities */
.entity {
    position: absolute;
    cursor: grab;
    transition: transform 0.1s;
    touch-action: none;
    z-index: 50;
}

.entity:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.character {
    width: 80px;
    height: 110px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
    z-index: 130;
}

.vehicle-entity {
    z-index: 120;
}

.item {
    width: 50px;
    height: 50px;
    z-index: 60;
}

.item.held {
    pointer-events: none;
    transition: none;
}

.furniture,
.furniture-entity {
    display: none !important;
}

.pop-anim {
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}