/* ══════════════════════════════════════════════════════════════
   CLICKABLE ZONES - DEPRECATED
   Character clicks now handled via speech bubble indicators
   These large invisible zones are disabled
   ══════════════════════════════════════════════════════════════ */

.click-zone {
    position: absolute;
    pointer-events: none; /* Disabled - clicks handled by speech indicators */
    display: none; /* Hidden - no longer used */
    z-index: 10;
}

.click-zone:active {
    transform: scale(0.95);
}

/* ══════════════════════════════════════════════════════════════
   CLICK HINT INDICATORS - DISABLED
   (Replaced by white thought bubble speech indicators in dialogue.css)
   ══════════════════════════════════════════════════════════════ */

/* Yellow dot hints removed */
.click-zone::after {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   WORM ZONE - Left fence corner, peeking from soil
   Position: ~22% from left, ~52% from top
   ══════════════════════════════════════════════════════════════ */

.worm-zone {
    border-radius: 40%;
}

.stage-1 .worm-zone,
.stage-2 .worm-zone {
    top: 42%;
    left: 12%;
    width: 20%;
    height: 24%;
}

.stage-3 .worm-zone,
.stage-4 .worm-zone {
    top: 44%;
    left: 14%;
    width: 18%;
    height: 22%;
}

/* ══════════════════════════════════════════════════════════════
   SUNNY ZONE - Sunflower character, back-left of garden
   Position: ~35% from left, ~35% from top
   ══════════════════════════════════════════════════════════════ */

.sunny-zone {
    border-radius: 40%;
}

.stage-1 .sunny-zone,
.stage-2 .sunny-zone {
    top: 22%;
    left: 25%;
    width: 22%;
    height: 32%;
}

.stage-3 .sunny-zone,
.stage-4 .sunny-zone {
    top: 24%;
    left: 26%;
    width: 20%;
    height: 28%;
}

/* ══════════════════════════════════════════════════════════════
   CROW ZONE - Back-right area inside fence
   Position: ~55% from left, ~40% from top
   ══════════════════════════════════════════════════════════════ */

.crow-zone {
    border-radius: 40%;
}

.stage-1 .crow-zone,
.stage-2 .crow-zone {
    top: 28%;
    left: 48%;
    width: 20%;
    height: 26%;
}

.stage-3 .crow-zone,
.stage-4 .crow-zone {
    top: 30%;
    left: 50%;
    width: 18%;
    height: 24%;
}

/* ══════════════════════════════════════════════════════════════
   SUN ZONE - Sunbeam counter in top-right (UI element, not character)
   ══════════════════════════════════════════════════════════════ */

.sun-zone {
    border-radius: 50%;
    /* This zone is for the sunbeam counter UI, handled separately */
    display: none;
}