/* --- RPG MAKER VARIABLES --- */
:root {
    /* Colors for placeholders and UI */
    --grass-color: #4c8c3e;
    --river-color: #4090c0;
    --dirt-color: #947450;
    --wood-color: #7c543c;
    --tree-color: #2d5e34;
    --rock-color: #6c747c;
    
    --rpg-blue-start: #000050;
    --rpg-blue-end: #0050a0;
    --rpg-border-white: #ffffff;
}

/* --- GLOBAL RESET & SETUP --- */
* { box-sizing: border-box; }

body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Full screen */
    overflow: hidden; /* No scrollbars on the window itself */
    font-family: 'Press Start 2P', cursive;
    background-color: #000;
    /* CRITICAL for pixel art */
    image-rendering: pixelated; 
    image-rendering: crisp-edges;
}


/* ================= WORLD VIEWPORT ================= */
/* This is the "camera" looking at your world */
.world-viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Crops sprites at screen edges */
}

/* --- LAYER STYLES (Backgrounds) --- */
.layer-ground {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--grass-color);
    /* background-image: url('your-grass-tile.png'); */
    background-repeat: repeat;
    z-index: 1;
}

.layer-river {
    position: absolute;
    top: 0; left: 100px; /* Position from left side */
    width: 120px; /* Width of river */
    height: 100%;
    background-color: var(--river-color);
    /* background-image: url('your-water-tile.png'); */
    background-repeat: repeat-y; /* Repeats vertically only */
    z-index: 2;
    border-left: 4px solid #307090; /* Simple bank effect */
    border-right: 4px solid #307090;
}

.layer-dirt-patch {
    position: absolute;
    background-color: var(--dirt-color);
    /* background-image: url('your-dirt-tile.png'); */
    background-repeat: repeat;
    z-index: 2;
    border-radius: 20px; /* Rounded corners for the patch */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

/* --- SPRITE OBJECTS (The Scenery) --- */
/* Base class for all placed objects */
.sprite {
    position: absolute;
    pointer-events: none; /* Clicks go through them to the ground */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
}

/* -- Defining Specific Objects (Sizes & Placeholders) -- */
.house {
    width: 240px; height: 200px;
    background-color: var(--wood-color); border: 4px solid #503020;
    /* background-image: url('house.png'); */
}
.tree-pine {
    width: 96px; height: 128px;
    background-color: var(--tree-color); border-radius: 50% 50% 0 0;
    /* background-image: url('pine-tree.png'); */
}
.tree-oak {
    width: 128px; height: 160px;
    background-color: #3d7e44; border-radius: 60% 60% 40% 40%;
    /* background-image: url('oak-tree.png'); */
}
.rock-small { width: 32px; height: 32px; background-color: var(--rock-color); border-radius: 50%; }
.rock-large { width: 64px; height: 48px; background-color: var(--rock-color); border-radius: 40%; }
.bush { width: 48px; height: 48px; background-color: #5c9c4e; border-radius: 50%; }

.fence-h { width: 64px; height: 32px; background-color: var(--wood-color); }
.fence-v { width: 32px; height: 64px; background-color: var(--wood-color); }
.bridge { width: 140px; height: 64px; background-color: #8c644c; border-top: 4px solid #6c442c; border-bottom: 4px solid #6c442c; }

.crop-turnip { width: 32px; height: 32px; background-color: #ffffff; border-radius: 50%; border: 2px solid #d0d0d0; }
.crop-carrot { width: 32px; height: 32px; background-color: #ff8000; border-radius: 50%; }


/* -- ACTORS -- */
.player-char {
    width: 48px; height: 64px;
    background-color: #f0c0a0; border: 2px solid #805030;
    /* background-image: url('player.png'); */
}
.snorlax-gardener {
    width: 80px; height: 80px;
    background-color: #46828d; border-radius: 50%; border: 3px solid #2a4f55;
    /* background-image: url('snorlax-creature.png'); */
}


/* --- DEPTH MANAGEMENT (Z-Index) --- */
/* Use these to make sure actors stand *in front* of trees, etc. */
.z-low { z-index: 10; }
.z-mid { z-index: 20; }
.z-actor { z-index: 50; } /* Actors are usually in the middle */
.z-high { z-index: 100; }


/* --- ANIMATIONS --- */
/* Idle breathing */
.anim-bob { animation: bob 1.5s infinite steps(2, start); }
@keyframes bob {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Simple 2-frame walking wiggle */
.anim-walk { animation: walk 0.8s infinite steps(2, start); }
@keyframes walk {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}


/* ================= EFFECTS LAYER ================= */
.effect-sunlight {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Creates diagonal light beams */
    background: linear-gradient(to bottom right, rgba(255,255,200,0.3) 0%, rgba(255,255,200,0) 50%);
    pointer-events: none;
    z-index: 200;
    mix-blend-mode: soft-light; /* Blends nicely with colors below */
}

.effect-scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.1) 3px,
        rgba(0,0,0,0.1) 4px
    );
    pointer-events: none;
    z-index: 201;
    opacity: 0.5;
}


/* ================= UI LAYER (Fixed) ================= */
.ui-container {
    position: fixed; /* Stays in place even if the world scrolls */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* Centers horizontally */
    width: 90%;
    max-width: 800px;
    z-index: 999; /* Always on top */
}

/* (The rest of the textbox CSS is the same as before) */
.rpg-textbox {
    min-height: 120px;
    background: linear-gradient(to bottom, var(--rpg-blue-start), var(--rpg-blue-end));
    border: 4px solid var(--rpg-border-white);
    outline: 4px solid var(--rpg-blue-start);
    box-shadow: inset 0 0 0 4px var(--rpg-blue-start), 0 10px 20px rgba(0,0,0,0.5);
    display: flex;
    padding: 15px;
    position: relative;
    border-radius: 4px;
    color: var(--rpg-text-color);
}

.portrait-box {
    width: 80px; height: 80px;
    background-color: rgba(0,0,0,0.3);
    border: 3px solid var(--rpg-border-white);
    margin-right: 20px;
    flex-shrink: 0;
}

.text-content {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.6;
    text-shadow: 2px 2px #000;
    align-self: center;
}

.typewriter {
  overflow: hidden; border-right: .15em solid orange; white-space: nowrap; margin: 0;
  animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }

.next-cursor {
    position: absolute; bottom: 10px; right: 15px;
    animation: blink 1s infinite step-end;
}
@keyframes blink { 50% { opacity: 0; } }