/* Pip's Giant Garden — styles (layers on top of shared/gamekit.css) */

:root {
    --gg-sky-top: #C8E8FA;
    --gg-sky-mid: #E2F3FD;
    --gg-soil-lit: #A9713F;
    --gg-soil-dark: #8B5A2B;
    --gg-wood: #B07B45;
    --gg-wood-dark: #7A4E24;
    --gg-btn-w: clamp(200px, 25vw, 300px);
    --gg-btn-h: clamp(150px, 22vh, 212px);
}

html, body { overflow: hidden; }

#stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: linear-gradient(var(--gg-sky-top) 0%, var(--gg-sky-mid) 46%, var(--gk-cream) 62%);
}

/* ══ Garden scene ═══════════════════════════════════════════════════════ */

#scene { position: absolute; inset: 0; pointer-events: none; }

.cloud {
    position: absolute;
    z-index: 1;
    opacity: 0.92;
    filter: drop-shadow(0 6px 8px rgba(120, 160, 200, 0.18));
}
.cloud svg { width: 100%; display: block; }
.cloud-a { top: 5%;  left: -260px; width: clamp(150px, 19vw, 240px); animation: gg-drift 90s linear infinite; }
.cloud-b { top: 15%; left: -260px; width: clamp(105px, 13vw, 170px); animation: gg-drift 64s linear infinite; animation-delay: -28s; opacity: 0.8; }

@keyframes gg-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 300px)); }
}

#butterfly {
    position: absolute;
    top: 0; left: 0;
    width: clamp(40px, 5vw, 62px);
    z-index: 2;
    animation: gg-bf-fly 34s ease-in-out infinite;
}
#butterfly svg { width: 100%; display: block; }
.bf-wing { transform-box: fill-box; transform-origin: 100% 50%; animation: gg-flap 0.3s ease-in-out infinite alternate; }
.bf-wing-r { transform-origin: 0% 50%; animation-name: gg-flap-r; }
@keyframes gg-flap   { from { transform: scaleX(1); }  to { transform: scaleX(0.45); } }
@keyframes gg-flap-r { from { transform: scaleX(1); }  to { transform: scaleX(0.45); } }
@keyframes gg-bf-fly {
    0%   { transform: translate(14vw, 22vh) rotate(-6deg); }
    22%  { transform: translate(58vw, 12vh) rotate(5deg); }
    46%  { transform: translate(84vw, 26vh) rotate(-4deg); }
    60%  { transform: translate(60vw, 34vh) rotate(4deg); }
    82%  { transform: translate(28vw, 16vh) rotate(-5deg); }
    100% { transform: translate(14vw, 22vh) rotate(-6deg); }
}

#hills {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: min(48vh, 440px);
    z-index: 1;
}
#hills svg { width: 100%; height: 100%; display: block; }

#fence {
    position: absolute;
    left: 0; right: 0;
    bottom: min(29vh, 265px);
    height: clamp(44px, 7vh, 64px);
    z-index: 1;
    opacity: 0.96;
}
#fence svg { width: 100%; height: 100%; display: block; }

#meadow-front {
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: clamp(54px, 8.5vh, 90px);
    z-index: 2;
}
#meadow-front svg { width: 100%; height: 100%; display: block; }

/* ══ Screens ════════════════════════════════════════════════════════════ */

.screen {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px;
    overflow: hidden;
    animation: gk-fade-in 0.4s ease-out;
}

/* ── Title ── */

#screen-title { justify-content: center; gap: clamp(4px, 1.2vh, 12px); }

#wordmark {
    font-size: clamp(2.2rem, 7vw, 3.9rem);
    text-align: center;
    line-height: 1.04;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-shadow:
        0 3px 0 var(--gk-orange),
        0 7px 20px rgba(124, 181, 24, 0.65);
    margin-top: 1vh;
}

#tagline {
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    padding: 5px 20px;
    box-shadow: 0 3px 10px rgba(90, 60, 130, 0.12);
}

#title-scene {
    display: flex;
    align-items: flex-end;
    gap: clamp(6px, 3vw, 40px);
    margin: 0.5vh 0;
}

#pip-title { width: clamp(120px, 19vh, 175px); }

#title-carrot { width: clamp(140px, 24vh, 230px); }
#title-carrot svg { width: 100%; display: block; overflow: visible; }
#title-carrot .wobbler {
    transform-box: fill-box;
    transform-origin: 50% 92%;
    animation: gg-wobble 2.4s ease-in-out infinite;
}

@keyframes gg-wobble {
    0%, 100% { transform: rotate(-2.4deg); }
    50%      { transform: rotate(2.4deg); }
}

#btn-play { font-size: clamp(1.4rem, 4.5vw, 1.9rem); padding: 16px 60px; animation: gg-breathe 1.6s ease-in-out infinite; }

@keyframes gg-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

#title-stars { display: flex; gap: 10px; margin-top: 0.6vh; }
.star-chip {
    background: linear-gradient(#C89B6A, var(--gg-soil-lit));
    border: 2px solid var(--gg-wood-dark);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.85rem;
    color: #FFF3DC;
    box-shadow: 0 3px 8px rgba(90, 60, 30, 0.3);
}
.star-chip .dim { filter: grayscale(1) opacity(0.4); }

/* ── Mode select ── */

#screen-mode { justify-content: center; gap: clamp(8px, 1.8vh, 20px); }

#mode-heading {
    font-size: clamp(1.5rem, 4.4vw, 2.3rem);
    color: #FFFFFF;
    text-shadow: 0 2px 0 var(--gk-purple), 0 6px 16px rgba(90, 60, 130, 0.4);
    text-align: center;
}

#pip-mode { width: clamp(84px, 12vh, 120px); }

.pip-wrap svg { width: 100%; display: block; overflow: visible; }

#mode-cards { display: flex; gap: clamp(14px, 4vw, 48px); }

.mode-card {
    width: clamp(200px, 33vw, 330px);
    padding: clamp(10px, 2vh, 20px) 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.94);
    border: 5px solid var(--gk-green);
    border-radius: 28px;
    box-shadow: var(--gk-shadow);
    cursor: pointer;
    transition: transform 0.18s;
}
.mode-card:hover  { transform: translateY(-4px) scale(1.03); }
.mode-card:active { transform: scale(0.96); }
#mode-duo { border-color: var(--gk-pink); }

.mode-art { width: 100%; height: clamp(88px, 15vh, 150px); display: flex; justify-content: center; }
.mode-art svg { height: 100%; overflow: visible; }

.mode-label {
    font-size: clamp(1.3rem, 3.4vw, 1.8rem);
    font-weight: bold;
    color: var(--gk-text);
}

#mode-bottom {
    display: flex;
    align-items: center;
    gap: clamp(16px, 4vw, 50px);
    margin-top: 0.4vh;
}

#btn-wall {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    min-height: 72px;
    background: linear-gradient(#C89B6A, var(--gg-soil-lit));
    border: 3px solid var(--gg-wood-dark);
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(90, 60, 30, 0.35), inset 0 2px 0 rgba(255,255,255,0.35);
    cursor: pointer;
    color: #FFF3DC;
    font-weight: bold;
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    line-height: 1.15;
    transition: transform 0.18s;
}
#btn-wall:hover  { transform: scale(1.05) rotate(-1deg); }
#btn-wall:active { transform: scale(0.95); }

#wall-sign-photo {
    width: 44px; height: 52px;
    background: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: rotate(-7deg);
    display: block;
    padding: 4px 4px 12px;
}
#wall-sign-photo::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    border-radius: 2px;
    background: linear-gradient(#C8E8FA 55%, #7CB518 56%);
}

#level-row { display: flex; gap: clamp(10px, 2vw, 20px); }

.level-bug {
    width: clamp(64px, 9.5vh, 84px);
    height: clamp(64px, 9.5vh, 84px);
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
    border-radius: 50%;
}
.level-bug svg { width: 100%; height: 100%; display: block; overflow: visible; }
.level-bug.locked { filter: grayscale(0.95) opacity(0.55); }
.level-bug.selected {
    transform: scale(1.16);
}
.level-bug.selected::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 4px solid var(--gk-yellow);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(252, 191, 73, 0.8);
}
.level-bug:active { transform: scale(0.92); }
.level-bug.selected:active { transform: scale(1.05); }
.level-bug.wiggle { animation: gk-wiggle 0.4s ease-in-out 2; }

/* ══ Play screen ════════════════════════════════════════════════════════ */

#screen-play { padding: 0; }

/* polaroid tray */
#tray {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(var(--gg-wood), var(--gg-soil-lit));
    border: 3px solid var(--gg-wood-dark);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(90, 60, 30, 0.35), inset 0 2px 0 rgba(255,255,255,0.3);
    z-index: 8;
}

.tray-slot {
    width: clamp(48px, 6vw, 66px);
    aspect-ratio: 0.84;
    background: rgba(255, 248, 236, 0.25);
    border: 2px dashed rgba(255, 248, 236, 0.75);
    border-radius: 6px;
    position: relative;
}
.tray-slot.filled { border-style: solid; background: rgba(255,248,236,0.1); }
.tray-slot .polaroid { position: absolute; inset: 1px; animation: gk-pop-in 0.4s cubic-bezier(0.2,1.4,0.4,1); }
.tray-slot .polaroid .chin { visibility: hidden; } /* too small to read at tray size */

/* soil bed + plant */
#garden-bed {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(4px, 2vh, 22px);
    width: clamp(250px, 36vw, 420px);
    z-index: 3;
    pointer-events: none;
}
#mound svg { width: 100%; display: block; overflow: visible; }

#plant-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(44px, 8.5vh, 100px);
    width: clamp(220px, 32vw, 400px);
    height: clamp(250px, 46vh, 460px);
    z-index: 4;
    pointer-events: none;
}
#plant { position: absolute; inset: 0; }
#plant.boing { animation: gg-boing 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }

@keyframes gg-boing {
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.09, 0.88); }
    62%  { transform: scale(0.94, 1.08); }
    100% { transform: scale(1, 1); }
}
#plant.giggle { animation: gg-giggle 0.5s ease-in-out; }
@keyframes gg-giggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3.5deg); }
    50% { transform: rotate(3.5deg); }
    75% { transform: rotate(-2deg); }
}

#p-seed, #p-sprout, #p-veggie {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#p-seed svg    { height: 13%; overflow: visible; margin-bottom: -1%; }
#p-sprout svg  { height: 40%; overflow: visible; }
#p-veggie svg  { height: 100%; overflow: visible; }

#p-seed   { transform-origin: 50% 100%; }
#p-seed.pop { animation: gg-seed-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes gg-seed-pop {
    from { transform: scale(0) translateY(-40px); }
    to   { transform: scale(1) translateY(0); }
}

#p-sprout {
    transform: scale(var(--ss, 0));
    transform-origin: 50% 100%;
    transition: transform 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
#p-sprout .leaf-pair-2 { opacity: 0; transition: opacity 0.4s; }
#p-sprout.full .leaf-pair-2 { opacity: 1; }

#p-veggie {
    transform: scale(var(--vs, 0));
    transform-origin: 50% 100%;
    transition: transform 0.65s cubic-bezier(0.2, 1.6, 0.4, 1);
}
#p-veggie.giant svg { animation: gg-wobble 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 94%; }
#p-veggie.bright svg { filter: brightness(1.18) saturate(1.15); }
#p-veggie svg { transition: filter 0.3s; }

/* screen shake on eruption */
#stage.shake #scene,
#stage.shake #screen-play { animation: gg-shake 0.45s ease-in-out; }
@keyframes gg-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); }
}

/* Pip on the play field */
#pip-play {
    position: absolute;
    width: clamp(92px, 14vh, 132px);
    left: calc(50% - clamp(150px, 19vw, 238px));
    bottom: clamp(26px, 6vh, 68px);
    z-index: 5;
    pointer-events: none;
    transition: left 0.55s ease-in-out, bottom 0.55s ease-in-out;
}
#pip-play .pip-svg { animation: gk-bob 2.6s ease-in-out infinite; }
.pip-wrap.hop .pip-svg { animation: gg-hop 0.55s ease-in-out; }
@keyframes gg-hop {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-26px) scale(1.03, 0.97); }
    70% { transform: translateY(0) scale(0.97, 1.03); }
}
.pip-wrap.pose-cheer .pip-svg { animation: gg-cheer 0.55s ease-in-out infinite; }
@keyframes gg-cheer {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Pip pose machinery (shared parts, three poses) */
.pip-arm { transform-box: fill-box; transform-origin: 50% 14%; transition: transform 0.3s ease; }
.pip-arm-l { transform: rotate(16deg); }
.pip-arm-r { transform: rotate(-16deg); }
.pose-point-l .pip-arm-l { transform: rotate(102deg); }
.pose-point-r .pip-arm-r { transform: rotate(-102deg); }
.pose-cheer .pip-arm-l { transform: rotate(148deg); }
.pose-cheer .pip-arm-r { transform: rotate(-148deg); }
.pip-pupil { transform-box: fill-box; transition: transform 0.25s; }
.pose-point-l .pip-pupil { transform: translateX(-3.5px); }
.pose-point-r .pip-pupil { transform: translateX(3.5px); }
.pip-mouth-cheer { display: none; }
.pose-cheer .pip-mouth-idle  { display: none; }
.pose-cheer .pip-mouth-cheer { display: block; }

/* thought bubble — hovers just above the growing plant */
#bubble {
    position: absolute;
    left: 50%;
    bottom: clamp(300px, 57vh, 580px);
    width: clamp(140px, 19vw, 210px);
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    animation: gg-bubble-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
    filter: drop-shadow(0 6px 12px rgba(90, 60, 130, 0.18));
}
#bubble-shell svg { width: 100%; display: block; overflow: visible; }
#bubble-icon {
    position: absolute;
    inset: 8% 12% 30% 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
}
#bubble-icon svg { height: 88%; max-width: 100%; overflow: visible; }
#bubble-icon.trio svg { height: 52%; }
#bubble-icon .mini { height: 46%; }
#bubble.bounce { animation: gg-bounce 0.7s cubic-bezier(0.3, 1.5, 0.4, 1); }
@keyframes gg-bubble-pop {
    from { transform: translateX(-50%) scale(0); }
    to   { transform: translateX(-50%) scale(1); }
}
@keyframes gg-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    30% { transform: translateX(-50%) translateY(-22px) scale(1.06); }
    60% { transform: translateX(-50%) translateY(4px) scale(0.97); }
}
#bubble-icon .icon-dim { opacity: 0.32; filter: grayscale(0.6); }

/* golden helper arrow */
#point-arrow {
    position: absolute;
    width: 54px;
    z-index: 12;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(90, 60, 30, 0.4));
    animation: gg-arrow-bob 0.7s ease-in-out infinite;
}
#point-arrow svg { width: 100%; display: block; }
@keyframes gg-arrow-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* the two big player buttons */
#btn-water, #btn-sun {
    position: absolute;
    bottom: clamp(10px, 2.5vh, 24px);
    width: var(--gg-btn-w);
    height: var(--gg-btn-h);
    border: 5px solid;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(90, 60, 130, 0.28), inset 0 3px 0 rgba(255,255,255,0.9);
    cursor: pointer;
    z-index: 10;
    padding: 6px;
    transition: box-shadow 0.25s;
}
#btn-water { left: clamp(8px, 1.6vw, 26px); border-color: var(--gk-blue); }
#btn-sun   { right: clamp(8px, 1.6vw, 26px); border-color: var(--gk-yellow); }

.btn-art { display: block; width: 100%; height: 100%; }
.btn-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
#btn-water .btn-art { transform: rotate(-2deg); }
#btn-sun   .btn-art { transform: rotate(2deg); }

#btn-water.glow, #btn-sun.glow { animation: gg-glow 0.85s ease-in-out infinite; }
@keyframes gg-glow {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(252, 191, 73, 0.9), 0 8px 22px rgba(90, 60, 130, 0.28); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(252, 191, 73, 0), 0 10px 26px rgba(90, 60, 130, 0.33); }
}
#btn-water.glow-rainbow, #btn-sun.glow-rainbow { animation: gg-glow-rainbow 1.1s linear infinite; }
@keyframes gg-glow-rainbow {
    0%   { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.55); }
    25%  { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(252, 191, 73, 0.55); }
    50%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(124, 181, 24, 0.55); }
    75%  { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(0, 180, 216, 0.55); }
    100% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(181, 101, 216, 0.55); }
}
#btn-water.squish .btn-art, #btn-sun.squish .btn-art { animation: gg-squish 0.25s ease-out; }
@keyframes gg-squish {
    0%   { transform: scale(1, 1); }
    45%  { transform: scale(1.06, 0.9); }
    100% { transform: scale(1, 1); }
}

/* watering-can pour + sun burst */
.can-g { transform-box: fill-box; transform-origin: 62% 78%; transition: transform 0.28s ease; }
#btn-water.pour .can-g { transform: rotate(26deg); }
#btn-water.hold .can-g { transform: rotate(16deg); animation: gg-hold-bob 0.5s ease-in-out infinite; }
@keyframes gg-hold-bob {
    0%, 100% { transform: rotate(16deg) translateY(0); }
    50% { transform: rotate(20deg) translateY(-4px); }
}
.sun-rays-g { transform-box: fill-box; transform-origin: center; animation: gg-sun-spin 26s linear infinite; }
@keyframes gg-sun-spin { to { transform: rotate(1turn); } }
#btn-sun.pour .sun-core, #btn-sun.hold .sun-core { animation: gg-sun-pump 0.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gg-sun-pump {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ══ FX layers ══════════════════════════════════════════════════════════ */

#fx-svg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 920; }
#fx     { position: fixed; inset: 0; pointer-events: none; z-index: 921; overflow: hidden; }

.fx-bit { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

.fx-droplet {
    width: 20px; height: 20px;
    background: radial-gradient(circle at 34% 30%, #9BE4F5, var(--gk-blue) 62%, #0090B0);
    border-radius: 52% 48% 62% 38% / 40% 40% 60% 60%;
}
.fx-splash {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #C9F0FA, var(--gk-blue));
}
.fx-petal {
    width: 16px; height: 22px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}
.fx-spark {
    width: 16px; height: 16px;
    border-radius: 50%;
}
.fx-ring {
    border-radius: 50%;
    border-style: solid;
    background: transparent;
}

#flash {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    opacity: 0;
    pointer-events: none;
    z-index: 930;
}
#flash.go { animation: gg-flash 0.55s ease-out; }
@keyframes gg-flash {
    0% { opacity: 0; }
    18% { opacity: 0.96; }
    100% { opacity: 0; }
}

/* ══ Polaroids ══════════════════════════════════════════════════════════ */

/* NOTE: the photo uses MARGINS (not padding on .polaroid) so the white frame
   scales with the polaroid's own width — % padding on .polaroid would resolve
   against the containing block (the viewport for #photo-zoom / #photo-dev). */
.polaroid {
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(60, 40, 20, 0.35);
    position: relative;
    display: flow-root; /* stop the photo's top margin collapsing out */
}
.polaroid .photo {
    margin: 5% 5% 16%;
    aspect-ratio: 0.92;
    border-radius: 2px;
    background: linear-gradient(#C8E8FA 0%, #E2F3FD 52%, #96C93E 53%, #7CB518 100%);
    position: relative;
    overflow: hidden;
}
.polaroid .photo .ph-veg {
    position: absolute;
    left: 50%; bottom: 4%;
    height: 78%;
    transform: translateX(-50%);
}
.polaroid .photo .ph-veg svg { height: 100%; display: block; }
.polaroid .photo .ph-pip {
    position: absolute;
    left: 10%; bottom: 4%;
    height: 30%;
}
.polaroid .photo .ph-pip svg { height: 100%; display: block; }
.polaroid .chin {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.5rem, 1.3vw, 0.78rem);
    color: #9C8AA8;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
}

/* the big "develops in the middle of the screen" polaroid */
#photo-dev {
    position: fixed;
    z-index: 925;
    width: clamp(170px, 24vh, 240px);
    left: 50%; top: 44%;
    transform: translate(-50%, -50%) rotate(-4deg);
    pointer-events: none;
}
#photo-dev .photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    animation: gg-develop 0.9s ease-out forwards;
}
@keyframes gg-develop {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ══ Harvest Wall ═══════════════════════════════════════════════════════ */

#screen-wall { justify-content: center; gap: 14px; }

#wall-board {
    width: min(94vw, 900px);
    height: min(72vh, 640px);
    background:
        radial-gradient(rgba(120, 80, 40, 0.25) 12%, transparent 13%) 0 0 / 26px 26px,
        linear-gradient(#CDA06E, #BC8C58);
    border: 12px solid;
    border-image: linear-gradient(#9A6633, var(--gg-wood-dark)) 1;
    border-radius: 6px;
    box-shadow: 0 16px 44px rgba(60, 40, 20, 0.4), inset 0 0 30px rgba(90, 55, 25, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#wall-title {
    text-align: center;
    font-size: clamp(1.3rem, 3.6vw, 1.9rem);
    font-weight: bold;
    color: #FFF3DC;
    background: linear-gradient(var(--gg-wood), var(--gg-soil-lit));
    border-bottom: 4px solid var(--gg-wood-dark);
    padding: 10px;
    text-shadow: 0 2px 0 rgba(90, 55, 25, 0.6);
    flex: 0 0 auto;
}

#wall-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 18px; }

#wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 15vw, 150px), 1fr));
    gap: 18px;
    justify-items: center;
}

.wall-photo {
    width: 100%;
    max-width: 170px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
    transform: rotate(var(--tilt, 0deg));
}
.wall-photo:hover  { transform: rotate(0deg) scale(1.07); }
.wall-photo:active { transform: scale(0.95); }
.wall-photo .pushpin {
    position: absolute;
    top: -8px; left: 50%;
    width: 18px; height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FF9FAE, var(--gk-red) 70%);
    box-shadow: 0 3px 4px rgba(60, 30, 20, 0.4);
    z-index: 2;
}
.wall-photo.wiggle-in { animation: gg-wiggle-in 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
@keyframes gg-wiggle-in {
    0%   { transform: scale(0) rotate(-30deg); }
    70%  { transform: scale(1.1) rotate(6deg); }
    100% { transform: scale(1) rotate(var(--tilt, 0deg)); }
}

.wall-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: #FFF3DC;
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    text-align: center;
    text-shadow: 0 2px 0 rgba(90, 55, 25, 0.5);
}
.wall-empty .ghost-frame {
    width: 120px; height: 140px;
    border: 4px dashed rgba(255, 243, 220, 0.7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 243, 220, 0.8);
}

#wall-footer { display: flex; gap: 18px; }

/* zoomed polaroid */
#photo-zoom {
    position: fixed;
    inset: 0;
    z-index: 945;
    background: rgba(74, 59, 92, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    animation: gk-fade-in 0.25s ease-out;
    cursor: pointer;
}
#photo-zoom .polaroid {
    width: min(64vw, 340px);
    animation: gk-pop-in 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
    transform: rotate(-2deg);
}
#photo-zoom .zoom-fact {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 12px 24px;
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    box-shadow: var(--gk-shadow);
    max-width: 86vw;
    text-align: center;
    animation: gk-pop-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

/* ══ Grown-ups note ═════════════════════════════════════════════════════ */

#info-btn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
    font-size: 1.7rem;
    cursor: pointer;
    z-index: 60;
    transition: transform 0.15s;
}
#info-btn:hover  { transform: scale(1.1); }
#info-btn:active { transform: scale(0.9); }
#stage[data-screen="play"] #info-btn,
#stage[data-screen="wall"] #info-btn { display: none; }

#info-overlay { position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center; }
#info-scrim { position: absolute; inset: 0; background: rgba(74, 59, 92, 0.5); animation: gk-fade-in 0.25s; }
#info-card {
    position: relative;
    max-width: min(92vw, 560px);
    max-height: 84vh;
    overflow-y: auto;
    animation: gk-pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
    padding: 24px 28px;
}
#info-card h3 { color: var(--gk-orange); margin-bottom: 10px; font-size: 1.35rem; padding-right: 64px; }
#info-card p { margin-bottom: 10px; line-height: 1.45; font-size: clamp(0.95rem, 2.4vw, 1.05rem); }
#info-card .info-small { font-size: 0.85rem; color: #9C8AA8; margin-bottom: 0; }
#info-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 64px; height: 64px;
    border: none;
    border-radius: 50%;
    background: #F6EFFA;
    color: var(--gk-purple);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s;
}
#info-close:hover { transform: scale(1.1); }

/* ══ Small screens / portrait tuning ════════════════════════════════════ */

@media (max-width: 850px) {
    #mode-cards { gap: 14px; }
    .mode-card { width: clamp(190px, 40vw, 300px); }
    #title-scene { gap: 4px; }
}

@media (max-height: 700px) {
    #pip-mode { display: none; }
    #screen-mode { gap: 10px; }
}

/* ══ Reduced motion ═════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .cloud, #butterfly, #btn-play,
    #point-arrow, .bf-wing,
    #title-carrot .wobbler,
    #p-veggie.giant svg,
    .sun-rays-g,
    #pip-play .pip-svg { animation: none !important; }
    #p-veggie, #p-sprout, #pip-play { transition: none; }
    #btn-water.glow, #btn-sun.glow {
        animation: none !important;
        box-shadow: 0 0 0 8px rgba(252, 191, 73, 0.85), 0 8px 22px rgba(90, 60, 130, 0.28);
        transform: scale(1.06);
    }
}