/* ══════════════════════════════════════════════════════════════
   TUTORIAL & ZONE SELECTION
   Pulsing markers for placing items in the garden
   ══════════════════════════════════════════════════════════════ */

/* Zone markers container - positioned relative to garden-wrapper */
.zone-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

/* When inside garden-wrapper, fill it completely */
.garden-wrapper .zone-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual zone marker */
.zone-marker {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zone-marker-icon {
    width: 42px;
    height: 42px;
    /* Wobbly hand-drawn circle (Fleischer style) */
    border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
    background: radial-gradient(ellipse at 40% 35%, #fff8e1 0%, #f5d680 50%, #d4a843 100%);
    border: 3px solid #3a2e1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: #3a2e1a;
    font-family: 'Georgia', serif;
    text-shadow: 0 1px 0 rgba(255, 248, 225, 0.6);
    box-shadow:
        0 2px 6px rgba(58, 46, 26, 0.3),
        0 0 16px rgba(245, 214, 128, 0.4),
        inset 0 -2px 4px rgba(58, 46, 26, 0.15);
    transition: transform 0.2s ease;
}

/* Thumbnail image inside marker (shows actual item asset) */
.zone-marker-thumb {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(58, 46, 26, 0.3));
    pointer-events: none;
}

/* Larger thumbnail for multi-zone items */
.multi-zone-marker .zone-marker-icon {
    width: 56px;
    height: 56px;
}

.multi-zone-marker .zone-marker-thumb {
    width: 42px;
    height: 42px;
}

.zone-marker:hover .zone-marker-icon {
    transform: scale(1.12);
    box-shadow:
        0 3px 10px rgba(58, 46, 26, 0.4),
        0 0 24px rgba(245, 214, 128, 0.5),
        inset 0 -2px 4px rgba(58, 46, 26, 0.15);
}

.zone-marker:active .zone-marker-icon {
    transform: scale(0.93);
}

/* Pulsing animation for zone markers */
.zone-marker.pulse .zone-marker-icon {
    animation: zone-pulse 1.5s ease-in-out infinite;
}

@keyframes zone-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 2px 8px rgba(201, 162, 39, 0.4),
            0 0 20px rgba(255, 224, 102, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow:
            0 4px 12px rgba(201, 162, 39, 0.6),
            0 0 40px rgba(255, 224, 102, 0.6);
    }
}

/* ══════════════════════════════════════════════════════════════
   PLACED ITEMS
   Items that have been placed in the garden
   ══════════════════════════════════════════════════════════════ */

.placed-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.placed-item {
    position: absolute;
    transform: translate(-50%, -50%); /* Center item on zone position (same as markers) */
    pointer-events: auto;
}

/* Raised bed sizing - explicit dimensions create containing block for plant child */
/* NOTE: position:absolute (from .placed-item) DOES establish containing block for children */
.placed-item.placed-raised_bed {
    width: 60px;
    height: 44px; /* Match raised bed aspect ratio - needed for plant positioning */
}

.placed-item-icon {
    font-size: 36px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: item-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.placed-item-img {
    width: 60px;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: item-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes item-appear {
    0% {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Raised bed specific styling */
.placed-raised_bed .placed-item-icon {
    font-size: 42px;
}

/* ══════════════════════════════════════════════════════════════
   PLANT SPRITES (tulips and other growable plants)
   ══════════════════════════════════════════════════════════════ */

.placed-plant {
    position: absolute;
    /* Position plant in CENTER of the raised bed's SOIL area */
    /* Using bottom-based positioning avoids height dependency issues where */
    /* transform: translate(-50%, -100%) fails if image hasn't loaded yet */
    left: 50%;      /* Center horizontally in raised bed */
    bottom: 65%;    /* Distance from bottom (100% - 35% = 65%) */
    transform: translateX(-50%); /* Only horizontal centering, no vertical transform */
    pointer-events: none;
    z-index: 1;
}

.plant-img {
    width: 35px; /* Smaller to fit inside raised bed */
    height: auto;
    max-height: 50px; /* Constrain height for early stages */
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.plant-icon {
    font-size: 28px;
    display: block;
}

/* Plant growth stage animations */
.placed-plant.stage-3,
.placed-plant.stage-4,
.placed-plant.stage-5 {
    animation: plant-blink 4s ease-in-out infinite;
}

@keyframes plant-blink {
    0%, 45%, 55%, 100% { transform: translateX(-50%); }
    48%, 52% { transform: translateX(-50%) scaleY(0.95); }
}

/* Full bloom celebration */
.placed-plant.stage-5 {
    animation: plant-happy 3s ease-in-out infinite;
}

@keyframes plant-happy {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(-2deg); }
    75% { transform: translateX(-50%) rotate(2deg); }
}

/* Earlier growth stages - smaller plants deeper in soil */
.placed-plant.stage-1 .plant-img,
.placed-plant.stage-2 .plant-img {
    width: 20px;
    max-height: 25px;
}

.placed-plant.stage-2 {
    left: calc(50% - var(--garden-size) * 0.01);
    bottom: calc(65% - var(--garden-size) * 0.03);
}

.placed-plant.stage-3 .plant-img {
    width: 30px;
    max-height: 40px;
}

.placed-plant.stage-4 .plant-img {
    width: 35px;
    max-height: 50px;
}

.placed-plant.stage-4 {
    left: calc(50% + var(--garden-size) * 0.02);
}

/* Greenhouse multi-zone styling - spans 4 zones (4,5,6,9 center) */
.placed-greenhouse {
    /* Positioned at center of zones 4,5,6,9 by JS */
    /* CRITICAL: Set explicit dimensions so transform works before image loads */
    /* (Same fix as tulips - transform percentages need element dimensions) */
    width: 180px;
    height: 140px;  /* Approximate aspect ratio of greenhouse sprite */
    /* Rotation: 1deg clockwise */
    /* Position: 17% up (-67%), 6% left (-56%) */
    transform: translate(-56%, -67%) rotate(1deg);
}

.placed-greenhouse .placed-item-img {
    width: 180px; /* Much larger for 4-zone item */
    max-width: none; /* Override any max-width constraints */
}

/* Item-specific sizing for Fleischer-style assets */
.placed-stepping_stones .placed-item-img {
    width: 55px; /* Low profile, wider than tall */
}

.placed-garden_sign .placed-item-img {
    width: 30px; /* Narrow post */
}

.placed-herb_planter .placed-item-img {
    width: 50px;
}

.placed-garden_gnome .placed-item-img {
    width: 35px;
}

.placed-bird_feeder .placed-item-img {
    width: 30px; /* Narrow pole */
}

.placed-windchime .placed-item-img {
    width: 28px; /* Narrow pole */
}

.placed-lantern .placed-item-img {
    width: 30px;
}

.placed-sunflower_seeds .placed-item-img {
    width: 45px;
}

.placed-daisy_patch .placed-item-img {
    width: 40px;
}

/* ══════════════════════════════════════════════════════════════
   ZONE MARKER VARIANTS
   ══════════════════════════════════════════════════════════════ */

.zone-marker.bed-marker {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4caf50;
}

.zone-marker.grow-marker {
    background: rgba(255, 193, 7, 0.3);
    border-color: #ffc107;
}

.zone-marker.multi-zone-marker {
    width: 70px;
    height: 70px;
}

/* Highlight for zones in a multi-zone pair */
.zone-highlight {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(156, 39, 176, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: zone-highlight-pulse 1.5s ease-in-out infinite;
}

@keyframes zone-highlight-pulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   TUTORIAL DIALOGUE
   Special styling for tutorial dialogue boxes
   ══════════════════════════════════════════════════════════════ */

.dialogue-box.tutorial {
    border-color: #c9a227;
    background: linear-gradient(180deg, #fffbe6 0%, #fff8dc 100%);
}

.dialogue-box.tutorial::after {
    content: 'Tap to continue';
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 13px;
    color: #a08030;
    opacity: 0.8;
    animation: tap-hint 1.5s ease-in-out infinite;
}

@keyframes tap-hint {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   GREENHOUSE INTERIOR OVERLAY
   Full-screen view when clicking the greenhouse
   ══════════════════════════════════════════════════════════════ */

.greenhouse-interior-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.greenhouse-interior-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Hide mountains and biplane when greenhouse interior is shown */
body:has(.greenhouse-interior-overlay.visible) .sky-mountains,
body:has(.greenhouse-interior-overlay.visible) .biplane-banner {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Standalone img styling removed - now in .greenhouse-interior-scene */

@keyframes greenhouse-appear {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Back button for greenhouse interior */
.greenhouse-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(180deg, #f8f0e0 0%, #ece0c8 100%);
    border: 3px solid #4a3728;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #4a3728;
    cursor: pointer;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 4px 12px rgba(40, 30, 20, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 210;
}

.greenhouse-back-btn:hover {
    transform: scale(1.05);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 6px 16px rgba(40, 30, 20, 0.5);
}

.greenhouse-back-btn:active {
    transform: scale(0.95);
}

.greenhouse-tap-hint {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    animation: tap-hint 1.5s ease-in-out infinite;
}

/* Make greenhouse clickable in garden */
.placed-greenhouse {
    cursor: pointer;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   TAPPABLE HINT - Gentle golden glow for discoverable elements
   Applied by JS when user hasn't yet tapped the element.
   Removed after first interaction.
   ══════════════════════════════════════════════════════════════ */

.tappable-hint {
    animation: tappable-glow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 224, 102, 0.6));
}

@keyframes tappable-glow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 224, 102, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 224, 102, 0.8))
               drop-shadow(0 0 30px rgba(201, 162, 39, 0.3));
    }
}

/* Greenhouse-specific: stronger glow since it's the FTUE target */
.placed-greenhouse.tappable-hint {
    animation: greenhouse-glow 2s ease-in-out infinite;
}

@keyframes greenhouse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 224, 102, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 224, 102, 0.9))
               drop-shadow(0 0 40px rgba(201, 162, 39, 0.4));
    }
}

/* ══════════════════════════════════════════════════════════════
   GREENHOUSE INTERIOR DIALOGUE
   Speech bubble and dialogue box inside the greenhouse
   ══════════════════════════════════════════════════════════════ */

/* Container for interior image + speech bubble positioning */
.greenhouse-interior-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 95%;
    max-height: 70%;
}

.greenhouse-interior-scene .greenhouse-interior-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    border: 4px solid #4a3728;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 248, 220, 0.3);
    animation: greenhouse-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Speech bubble indicator above Sunny in greenhouse */
.greenhouse-speech-indicator {
    position: absolute;
    width: 120px !important;
    max-width: 120px !important;
    height: auto;
    /* Position above and to the right of Sunny (who is on the left side of the image) */
    /* Sunny is roughly at 15-25% from left, 30-50% from top */
    left: 28%;
    top: 18%;
    z-index: 25;
    opacity: 1;
    transform: scale(1);
    animation: thought-pulse-gentle 2.5s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.greenhouse-speech-indicator:hover {
    transform: scale(1.1);
}

/* Clickable hotspots for interactive items in greenhouse
   All hotspots are CENTER-ANCHORED: left/top = center of object.
   To adjust: left/top = position, width/height = size, rotate() = tilt angle. */
.greenhouse-hotspot {
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    z-index: 26;
    border-radius: 6px;
    transition: background 0.2s ease;
}

/* Visible shimmer pulse to hint at interactivity */
.greenhouse-hotspot {
    animation: hotspotShimmer 2.5s ease-in-out infinite;
    border: 1.5px solid rgba(255, 248, 220, 0.15);
}

/* Stagger animations so they don't all pulse together */
#hotspotNotebook { animation-delay: 0s; }
#hotspotScroll { animation-delay: 0.6s; }
#hotspotMagnifyingGlass { animation-delay: 1.2s; }
#hotspotPinBoard { animation-delay: 1.8s; }

@keyframes hotspotShimmer {
    0%, 100% {
        background: rgba(255, 248, 220, 0.05);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        background: rgba(255, 248, 220, 0.25);
        filter: drop-shadow(0 0 12px rgba(255, 248, 220, 0.5));
    }
}

.greenhouse-hotspot:hover {
    animation: none;
    background: rgba(255, 248, 220, 0.35);
    filter: drop-shadow(0 0 14px rgba(255, 248, 220, 0.6));
}

.greenhouse-hotspot:active {
    animation: none;
    background: rgba(255, 248, 220, 0.5);
    filter: drop-shadow(0 0 8px rgba(255, 248, 220, 0.7));
}

/* Notebook - open garden journal, front-center on table (primary CTA) */
#hotspotNotebook {
    left: 42%;
    top: 62%;
    width: 33%;
    height: 20%;
    clip-path: polygon(42.4% 0%, 100% 30%, 66.7% 100%, 0% 45%);
    z-index: 27;
    animation-delay: 0s;
}

#hotspotNotebook:hover {
    background: rgba(255, 220, 140, 0.35);
    filter: drop-shadow(0 0 14px rgba(255, 220, 140, 0.6));
}

/* Scroll - parchment behind notebook, left side of table */
#hotspotScroll {
    left: 30%;
    top: 50%;
    width: 28%;
    height: 18%;
    clip-path: polygon(53.6% 0%, 100% 16.7%, 35.7% 100%, 0% 55.6%);
    animation-delay: 0.75s;
}

/* Magnifying glass - right side of table */
#hotspotMagnifyingGlass {
    left: 63%;
    top: 58%;
    width: 19%;
    height: 10%;
    clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 70%);
    animation-delay: 1.5s;
}

/* Pin board - bulletin board on back right wall */
#hotspotPinBoard {
    left: 66%;
    top: 32%;
    width: 20%;
    height: 18%;
    clip-path: polygon(0% 0%, 100% 22.2%, 95% 100%, 0% 77.8%);
    animation-delay: 2.25s;
}

/* === Debug overlay for hotspot calibration (?debug=1) === */
.debug-hotspots .greenhouse-hotspot {
    animation: none !important;
    background: rgba(255, 0, 0, 0.25) !important;
    border: 2px dashed rgba(255, 0, 0, 0.8) !important;
}

.debug-hotspots .greenhouse-hotspot::after {
    content: attr(data-item);
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 11px;
    font-family: monospace;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999;
}

.debug-hotspots #hotspotNotebook {
    background: rgba(0, 120, 255, 0.25) !important;
    border-color: rgba(0, 120, 255, 0.8) !important;
}

.debug-hotspots #hotspotScroll {
    background: rgba(0, 200, 80, 0.25) !important;
    border-color: rgba(0, 200, 80, 0.8) !important;
}

.debug-hotspots #hotspotMagnifyingGlass {
    background: rgba(255, 160, 0, 0.25) !important;
    border-color: rgba(255, 160, 0, 0.8) !important;
}

.debug-hotspots #hotspotPinBoard {
    background: rgba(200, 0, 255, 0.25) !important;
    border-color: rgba(200, 0, 255, 0.8) !important;
}

/* Dialogue box at bottom of greenhouse interior */
.greenhouse-dialogue-box {
    position: absolute;
    bottom: 8%;
    left: 5%;
    right: 5%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(180deg, #f8f0e0 0%, #ece0c8 100%);
    border: 4px solid #4a3728;
    border-radius: 16px;
    padding: 14px 16px 14px 70px;
    margin-left: 55px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 6px 20px rgba(40, 30, 20, 0.4);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
    overflow: visible;
    z-index: 220;
}

.greenhouse-dialogue-box.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Portrait in greenhouse dialogue */
.greenhouse-dialogue-box .dialogue-portrait {
    position: absolute;
    left: -55px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #4a3728;
    background: linear-gradient(180deg, #fffbe6 0%, #f0e4c8 100%);
    overflow: hidden;
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,0.4),
        0 6px 16px rgba(40, 30, 20, 0.4),
        0 0 0 3px rgba(255,248,220,0.5);
    z-index: 15;
}

.greenhouse-dialogue-box .dialogue-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

/* Text styling matches garden dialogue */
.greenhouse-dialogue-box .dialogue-content {
    flex: 1;
    min-width: 0;
}

.greenhouse-dialogue-box .dialogue-speaker {
    font-weight: bold;
    font-size: 13px;
    color: #4a3728;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.greenhouse-dialogue-box .dialogue-text {
    font-size: 13px;
    color: #5a4738;
    line-height: 1.45;
    font-style: italic;
}

.greenhouse-dialogue-box .tap-hint {
    text-align: right;
    font-size: 13px;
    color: #a08060;
    margin-top: 6px;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   FTUE HIGHLIGHT (Phase 23D)
   Pulsing golden glow on the Notebook toolbar button during FTUE
   ══════════════════════════════════════════════════════════════ */

.ftue-highlight {
    animation: ftue-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px var(--sunbeam-gold, #c9a227);
    border-radius: 8px;
}

@keyframes ftue-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(201, 162, 39, 0.8), 0 0 40px rgba(255, 224, 102, 0.4);
    }
}

/* First bloom micro-animation — plays once on garden after first log */
.first-bloom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 224, 102, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: first-bloom-burst 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 50;
}

@keyframes first-bloom-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}