/* ══════════════════════════════════════════════════════════════
   HUSHFUL GARDEN - Main Stylesheet
   Telegram Mini App - Cuphead 1930s Style
   ══════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    touch-action: none;
    font-family: 'Georgia', serif;
    background: #8B9A6B; /* Sage green fallback */
}

/* ══════════════════════════════════════════════════════════════
   GARDEN CONTAINER - Full viewport with sky/ground zones
   ══════════════════════════════════════════════════════════════ */

.garden-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 5; /* Above canvas (z-index: 1) but below film grain */
}

/* Sky zone - vintage paper/parchment sky */
.garden-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%; /* Taller to prevent body background showing through */
    background: linear-gradient(
        180deg,
        #d4c4a0 0%,
        #ddd0b0 30%,
        #e4d8bc 60%,
        #e8dcc4 100%
    );
    z-index: 0;
}

/* Distant mountains in sky - Cuphead style */
/*
 * Mountains fill the gap between viewport top and garden wrapper top.
 * Position and size are set dynamically by layout.js because:
 * - Garden wrapper is centered with variable size
 * - The gap varies based on viewport dimensions
 * - CSS alone can't reliably calculate this variable distance
 *
 * JS sets: position: fixed, top: 0, height: [calculated gap]
 */
.sky-mountains {
    /* CSS defaults - JS will override with precise measurements */
    position: fixed;
    top: 0;
    left: -10%;
    width: 120%;
    height: 20vh;  /* Default height, JS will calculate exact value */
    min-height: 60px; /* Ensure mountains are always visible even if JS fails */
    display: block;
    /* Use relative path from CSS location for reliable resolution */
    background: url('../../assets/ui/mountains.webp') bottom center/cover no-repeat;
    z-index: 2;           /* ABOVE garden-scene (z-index: 1) to ensure visibility */
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.3s ease, height 0.2s ease;
}

/* Ground zone - REMOVED (hill was getting in way of dialogue)
.garden-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22%;
    background: url('../../assets/ui/hill_path.png') bottom center/cover no-repeat;
    z-index: 50;
    pointer-events: none;
}
*/

.garden-scene {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;  /* Above canvas (z-index: 1) so DOM overlays are visible */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;    /* Allow children (mountains) to extend beyond bounds */
}

/* Garden wrapper - contains garden image and all position-relative elements
   CRITICAL: Must match getGardenRect() in garden-engine.js EXACTLY.

   Canvas calculation (getGardenRect):
   - gardenSize = window.innerWidth
   - availableHeight = window.innerHeight * 0.65  (65% after 20% sky + 15% HUD)
   - finalSize = min(width, availableHeight) = min(100vw, 65vh)
   - x = centered horizontally
   - y = 20% from top (skyZoneHeight)

   CSS must replicate this EXACTLY for zone markers to align with canvas garden. */
.garden-wrapper {
    position: absolute;
    /* Match canvas: size = min(100vw, 65vh), positioned at 20% from top, centered horizontally */
    --garden-size: min(100vw, 65vh);
    width: var(--garden-size);
    height: var(--garden-size);
    top: 20%;           /* Match canvas skyZoneHeight = height * 0.20 */
    left: 50%;
    transform: translateX(-50%);  /* Only horizontal centering, vertical is set by top */
    z-index: 1;
    overflow: visible;    /* Allow mountains to extend upward into sky zone */
}

/* Garden image - fills the wrapper */
.garden-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   CHARACTER SPRITES - Individual overlays for progressive unlock
   Positioned with bottom-center anchor (feet at zone coordinate)
   Hidden by default, shown via .unlocked class
   ══════════════════════════════════════════════════════════════ */

.character-sprite {
    position: absolute;
    z-index: 3;  /* Above garden-bg (1), below speech indicators */
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.5s ease;
    pointer-events: none;
    transform: translateX(-50%);  /* Center horizontally on position */
}

.character-sprite.unlocked {
    opacity: 1;
}

/* Locked characters: dimmed silhouette teasing their arrival */
.character-sprite.locked {
    opacity: 0.25;
    filter: brightness(0) saturate(0);  /* Black silhouette */
    pointer-events: none;
}

/* Sunny: zone 2, feet at (386, 445) on 1024x1024 = 37.7%, 43.5% */
/* Sprite: 216x496, scale 0.72 → 15.2% width, 34.9% height */
.sunny-sprite {
    left: 37.7%;
    top: 43.5%;
    width: 15.2%;
    transform: translateX(-50%) translateY(-100%);  /* Anchor at feet */
}

/* Crow: zone 3, feet at (512, 370) = 50%, 36.1% */
/* Sprite: 188x364, scale 0.504 → 9.3% width */
.crow-sprite {
    left: 50%;
    top: 36.1%;
    width: 9.3%;
    transform: translateX(-50%) translateY(-100%);
}

/* Worm: zone 1, feet at (260, 520) = 25.4%, 50.8% */
/* Sprite: 216x340, scale 0.4 → 8.4% width */
.worm-sprite {
    left: 25.4%;
    top: 50.8%;
    width: 8.4%;
    transform: translateX(-50%) translateY(-100%);
}

/* ══════════════════════════════════════════════════════════════
   STAGE 3-4 ZOOM-OUT SCALING
   Large fence background simulates camera pulling back.
   Characters, placed items, and greenhouse all scale down ~75%.
   ══════════════════════════════════════════════════════════════ */

.stage-3 .character-sprite,
.stage-4 .character-sprite {
    transform: translateX(-50%) translateY(-100%) scale(0.72);
}

.stage-3 .placed-item,
.stage-4 .placed-item {
    transform: translate(-50%, -100%) scale(0.72);
}

.stage-3 .placed-item .placed-item-img,
.stage-4 .placed-item .placed-item-img {
    /* Already scaled by parent, no extra needed */
}

.stage-3 .purchased-items,
.stage-4 .purchased-items {
    transform-origin: center center;
}

/* ══════════════════════════════════════════════════════════════
   BIPLANE BANNER - Positioned in sky area at top of screen
   ══════════════════════════════════════════════════════════════ */

.biplane-banner {
    /* Position and top are set by layout.js for consistent sky placement */
    position: absolute; /* JS overrides to fixed */
    top: 5%;            /* JS overrides with calculated value */
    right: 5%;
    left: auto;
    width: 54%;
    max-width: 270px;
    z-index: 20; /* Above garden but below overlays */
    pointer-events: none;
    animation: biplane-float 4s ease-in-out infinite;
    opacity: 0;           /* Hidden initially - JS shows when ready */
    transition: opacity 0.3s ease, top 0.2s ease;
}

/* Show biplane once image is loaded (class added by JS) */
.biplane-banner.ready {
    opacity: 1;
}

.biplane-banner img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Garden name text overlay - positioned on the flat banner ribbon */
.biplane-banner .garden-name-text {
    position: absolute;
    top: 50%;
    left: 68%; /* Centered on the flat rectangular banner area */
    transform: translate(-50%, -50%);
    font-family: 'Luckiest Guy', 'Impact', sans-serif;
    font-size: clamp(12px, 3.5vw, 20px); /* 20% smaller for smaller banner */
    font-weight: 400;
    color: #3d2914;
    white-space: nowrap;
    pointer-events: none;
    text-shadow:
        2px 2px 0 rgba(255, 255, 255, 0.5),
        -1px -1px 0 rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

@keyframes biplane-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS GAUGE - REMOVED for redesign
   ══════════════════════════════════════════════════════════════ */

.progress-gauge {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   FILM GRAIN OVERLAY
   ══════════════════════════════════════════════════════════════ */

.film-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.04;
    z-index: 200;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════════════════════
   LITTLEJS CANVAS - Game engine rendering layer
   Positioned behind all DOM elements, handles sky/garden/sprites
   ══════════════════════════════════════════════════════════════ */

#gardenCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Allow clicks through to DOM elements */
}

/* Canvas inside the container */
#gardenCanvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* When canvas is active, hide DOM-based visual elements */
body.canvas-mode .sky-mountains,
body.canvas-mode .garden-bg,
body.canvas-mode .garden-container::before,
body.canvas-mode .biplane-banner {
    display: none !important;
}

/* Stage test mode indicator badge */
.garden-scene.stage-test::after {
    content: 'STAGE 2 TEST';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 100, 0, 0.8);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 999;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   TELEGRAM DESKTOP BLOCK
   ══════════════════════════════════════════════════════════════ */

.desktop-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #f8f0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    z-index: 10000;
}

.desktop-block-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 24px;
    object-fit: cover;
}

.desktop-block h2 {
    font-family: 'Georgia', serif;
    color: #4a3728;
    font-size: 22px;
    margin-bottom: 12px;
}

.desktop-block p {
    font-family: 'Georgia', serif;
    color: #8b7355;
    font-size: 16px;
    line-height: 1.5;
}