/* Echo's Word Eggs — game styles. GameKit tokens loaded first. */

:root {
    --we-sky-top: #C9EED9;
    --we-sky-bot: #FDF6E0;
    --we-ink: #2E5E3E;
    --we-wood: #8A5A32;
    --we-cream: #FBF4E4;
    --we-coral: #E63946;
}

html, body { overflow: hidden; }
body { background: var(--we-sky-top); }

.screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* ═══════════ Backdrop — jungle hatchery ═══════════ */

#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bk-sky {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--we-sky-top) 0%, #E7F5E3 55%, var(--we-sky-bot) 100%);
}
.bk-glow {
    position: absolute;
    left: 50%; top: 42%;
    width: min(90vw, 760px); height: min(70vh, 520px);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 244, 200, .8), rgba(255, 244, 200, 0));
}
.bk-vines { position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 11vh, 130px); }
.bk-vines svg { width: 100%; height: 100%; }
.vine-leaf { transform-origin: center top; animation: we-sway 4.4s ease-in-out infinite; }
@keyframes we-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }

.bk-leaves-l, .bk-leaves-r { position: absolute; top: 10%; bottom: 0; width: clamp(90px, 13vw, 190px); opacity: .95; }
.bk-leaves-l { left: 0; }
.bk-leaves-r { right: 0; }
.bk-leaves-l svg, .bk-leaves-r svg { width: 100%; height: 100%; }

.bk-floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 16%;
    background: linear-gradient(to bottom, #9DBE55, #7FA83F);
    border-radius: 100% 100% 0 0 / 34px 34px 0 0;
}

.bk-fly {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #FFE08A;
    box-shadow: 0 0 12px 4px rgba(255, 224, 138, .65);
    animation: we-fly ease-in-out infinite alternate;
}
@keyframes we-fly {
    from { transform: translate(0, 0); opacity: .9; }
    33%  { opacity: .3; }
    66%  { opacity: 1; }
    to   { transform: translate(9vw, -14vh); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-fly, .vine-leaf { animation: none !important; }
}

/* ═══════════ Title screen ═══════════ */

#screen-title { align-items: center; justify-content: center; gap: 6px; padding: 16px; }

.game-title {
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    line-height: 1.02;
    text-align: center;
    color: var(--we-ink);
    text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(46, 94, 62, .3);
    margin: 0;
}
.tagline {
    margin: 6px 0 0;
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    color: #4E7A5A;
    font-weight: 700;
    text-align: center;
}

.t-row { display: flex; align-items: flex-end; gap: 6px; margin: 2px 0; }
.t-echo { width: clamp(120px, 20vh, 190px); }
.echo-svg { width: 100%; display: block; }
#title-echo .echo-svg { animation: we-bob 3s ease-in-out infinite; }
#title-echo .ec-wing { transform-origin: 140px 130px; animation: we-flap 2.6s ease-in-out infinite; }
@keyframes we-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes we-flap { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-14deg); } 96% { transform: rotate(4deg); } }
.t-eggs { display: flex; align-items: flex-end; gap: 2px; }
.t-eggs .egg-svg { width: clamp(40px, 7vh, 64px); }
.t-eggs .egg-svg:nth-child(1) { transform: rotate(-8deg); }
.t-eggs .egg-svg:nth-child(2) { width: clamp(52px, 9vh, 82px); animation: we-eggwob 2.8s ease-in-out infinite; }
.t-eggs .egg-svg:nth-child(3) { transform: rotate(9deg); }
@keyframes we-eggwob { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-5deg); } 70% { transform: rotate(5deg); } }

.start-btn {
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 900;
    padding: 18px 54px;
    border: none;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient(180deg, #F2727C, #E63946);
    box-shadow: 0 8px 0 #B22633, 0 14px 26px rgba(178, 38, 51, .35);
    cursor: pointer;
    margin-top: 6px;
}
.start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #B22633; }
.btn-pulse { display: inline-block; animation: we-pulse 1.6s ease-in-out infinite; }
@keyframes we-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.title-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.star-pill, .album-btn {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--we-ink);
    background: rgba(255, 255, 255, .88);
    border: 3px solid #7FA83F;
    border-radius: 40px;
    padding: 10px 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.album-btn { cursor: pointer; }
.album-btn:active { transform: scale(.95); }

#level-row { display: flex; gap: 16px; margin-top: 14px; }
.lvl-btn {
    position: relative;
    font-family: inherit;
    width: clamp(108px, 13vw, 138px);
    padding: 12px 8px 10px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 0 rgba(46, 94, 62, .3), 0 10px 18px rgba(46, 94, 62, .16);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lvl-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(46, 94, 62, .3); }
.lvl-num {
    font-size: 1.5rem; font-weight: 900; color: #fff;
    background: linear-gradient(180deg, #8FCB5E, #5B8A3C);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lvl-name { font-size: .86rem; font-weight: 800; color: var(--we-ink); }
.lvl-found { font-size: .8rem; font-weight: 700; color: #7A5A38; }
.lvl-stars { font-size: .9rem; letter-spacing: 1px; }
.lvl-stars .dim { opacity: .25; filter: grayscale(1); }
.lvl-lock { display: none; position: absolute; top: -10px; right: -6px; font-size: 1.5rem; }
.lvl-btn.locked { opacity: .68; filter: saturate(.5); }
.lvl-btn.locked .lvl-lock { display: block; }
.lvl-btn.shake { animation: we-shake .45s ease-in-out; }
.lvl-btn.just-unlocked { animation: we-unlock 1s ease-in-out; }
@keyframes we-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes we-unlock { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.16) rotate(-3deg); } 70% { transform: scale(1.08) rotate(2deg); } }

.info-btn {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(46, 94, 62, .25);
    z-index: 40;
}
.info-btn:active { transform: scale(.92); }

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

#play-top {
    display: flex;
    justify-content: flex-start;
    padding: 12px 12px 0;
    min-height: 64px;
}
#tracker {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, .8);
    border: 3px solid rgba(127, 168, 63, .6);
    border-radius: 40px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(46, 94, 62, .15);
}
.trk-egg { width: clamp(30px, 4.4vw, 42px); display: flex; align-items: center; justify-content: center; }
.trk-egg svg { width: 100%; display: block; opacity: .8; }
.trk-egg.done { font-size: clamp(1.4rem, 3vw, 1.9rem); animation: we-jarpop .6s cubic-bezier(.5, 1.6, .5, 1); }
@keyframes we-jarpop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }

#nest-area {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#echo-side {
    position: absolute;
    left: max(10px, 4%);
    bottom: 6%;
    width: clamp(84px, 12vw, 140px);
    pointer-events: none;
    z-index: 3;
}
#echo-side.cheer { animation: we-hop .7s ease-out; }
#echo-side.peek { animation: we-peek 1s ease-in-out; }
@keyframes we-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-24px); } }
@keyframes we-peek { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(5deg); } }

#nest {
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%);
    width: clamp(280px, 42vw, 420px);
    z-index: 1;
}
#nest svg { width: 100%; display: block; }

#egg-btn {
    position: absolute;
    left: 50%;
    bottom: calc(3% + clamp(26px, 4vh, 44px));
    transform: translateX(-50%);
    z-index: 2;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#egg-wrap { position: relative; width: clamp(170px, 30vh, 260px); }
#egg-shell svg.egg-svg { width: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(94, 56, 26, .25)); }
#egg-wrap.drop { animation: we-eggdrop .75s cubic-bezier(.34, 1.4, .5, 1); }
@keyframes we-eggdrop {
    0% { transform: translateY(-90vh) rotate(-14deg); }
    70% { transform: translateY(0) rotate(3deg); }
    85% { transform: translateY(-4%) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0); }
}
#egg-wrap.wob .egg-svg { animation: we-eggwob 1.6s ease-in-out infinite; transform-origin: 50% 88%; }
#egg-wrap.crackpop { animation: we-crackpop .3s ease-out; }
@keyframes we-crackpop { 0% { transform: scale(1); } 40% { transform: scale(1.07) rotate(2deg); } 100% { transform: scale(1); } }
#egg-wrap.burst .egg-svg { animation: we-burst .5s ease-in forwards; }
@keyframes we-burst { 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
#egg-wrap.burst #egg-word { opacity: 0; transition: opacity .3s; }
.egg-sparkles text { animation: we-pulse 1.4s ease-in-out infinite; }

#egg-word {
    position: absolute;
    left: 6%; right: 6%;
    top: 38%;
    display: flex;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}
.eg-letter {
    font-size: clamp(2.2rem, 5.6vh, 3.4rem);
    font-weight: 900;
    color: #5E3A1A;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
    opacity: 0;
    transform: translateY(12px) scale(.4);
    transition: all .28s cubic-bezier(.34, 1.5, .5, 1);
}
.eg-letter.in { opacity: 1; transform: none; }
.eg-letter.hot { color: var(--we-coral); transform: scale(1.35) translateY(-6px); }
.eg-letter.magic { opacity: 1; transform: none; color: #B565D8; }

#hatch-spot {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.hatched {
    width: clamp(150px, 26vh, 230px);
    transform: scale(0);
    transition: transform .5s cubic-bezier(.3, 1.6, .4, 1);
}
.hatched.in { transform: scale(1); animation: we-dance 1.2s ease-in-out .6s 2; }
.hatched.golden { filter: drop-shadow(0 0 18px rgba(252, 191, 73, .9)); }
.hatched svg { width: 100%; display: block; }
@keyframes we-dance {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.05) rotate(-5deg) translateY(-8px); }
    75% { transform: scale(1.05) rotate(5deg) translateY(-8px); }
}
.hatch-word { display: flex; gap: 4px; margin-top: 2px; }
.hatch-word span {
    font-size: clamp(1.8rem, 4.4vh, 2.6rem);
    font-weight: 900;
    color: var(--we-ink);
    background: rgba(255, 255, 255, .92);
    border-radius: 12px;
    padding: 2px 10px;
    box-shadow: 0 3px 0 rgba(46, 94, 62, .25);
    transition: all .2s;
}
.hatch-word span.hot { background: #FCBF49; color: #5E3A1A; transform: translateY(-8px) scale(1.12); }

.eg-bit {
    position: fixed;
    z-index: 60;
    width: 14px; height: 14px;
    border-radius: 4px;
    pointer-events: none;
    animation: we-bit .9s ease-out forwards;
}
@keyframes we-bit {
    from { transform: translate(0, 0) rotate(0); opacity: 1; }
    to { transform: translate(var(--dx), var(--dy)) rotate(300deg); opacity: 0; }
}

.fly-critter { position: fixed; z-index: 70; pointer-events: none; }
.fly-critter svg { width: 100%; display: block; }

/* animal choice cards */
#card-rack {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 3vw, 28px);
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    min-height: clamp(120px, 19vh, 168px);
    z-index: 20;
}
.animal-card {
    font-family: inherit;
    width: clamp(104px, 16vh, 148px);
    height: clamp(104px, 16vh, 148px);
    border: none;
    border-radius: 26px;
    background: var(--we-cream);
    box-shadow: 0 6px 0 #D9C9A8, 0 12px 20px rgba(94, 56, 26, .22);
    cursor: pointer;
    padding: 10px;
    animation: we-cardin .5s cubic-bezier(.3, 1.5, .5, 1) both;
    animation-delay: calc(var(--i) * .12s);
    transition: transform .12s;
}
@keyframes we-cardin { from { transform: translateY(120px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.animal-card svg { width: 100%; height: 100%; }
.animal-card:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #D9C9A8; }
.animal-card.shake { animation: we-shake .45s ease-in-out; }
.animal-card.glow { animation: we-glowcard 1s ease-in-out infinite; }
@keyframes we-glowcard {
    0%, 100% { box-shadow: 0 6px 0 #D9C9A8, 0 0 0 4px rgba(252, 191, 73, 0); }
    50% { box-shadow: 0 6px 0 #D9C9A8, 0 0 0 10px rgba(252, 191, 73, .6); transform: scale(1.06); }
}
.animal-card.chosen { animation: we-chosen .5s ease-out forwards; }
@keyframes we-chosen { 40% { transform: scale(1.15); } 100% { transform: scale(0); opacity: 0; } }
.animal-card.bye { animation: we-bye .4s ease-in forwards; }
@keyframes we-bye { to { transform: translateY(140px) scale(.6); opacity: 0; } }

/* ═══════════ Overlays ═══════════ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(30, 58, 40, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.overlay-card {
    position: relative;
    max-width: 620px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
}
.overlay-card h3 { margin: 0 0 6px; font-size: 1.5rem; color: var(--we-ink); }
.overlay-card p { line-height: 1.55; color: #4A5E42; margin: 0 0 12px; }
.zoo-hint { font-size: .95rem; font-weight: 700; }
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #E2EED2;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--we-ink);
    cursor: pointer;
    z-index: 2;
}
.close-btn:active { transform: scale(.92); }

.zoo-sec h4 { margin: 12px 0 8px; color: #7A5A38; font-size: 1.05rem; }
.zoo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
}
.zoo-cell {
    font-family: inherit;
    border: none;
    background: #F3F8E8;
    border-radius: 16px;
    padding: 8px 4px 6px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 96px;
}
.zoo-cell svg { width: 58px; height: 58px; }
.zoo-cell.dim { cursor: default; }
.zoo-cell.dim svg { opacity: .55; filter: grayscale(.4); width: 44px; height: 54px; margin-top: 4px; }
.zoo-cell.bonus { background: linear-gradient(160deg, #FDF3D8, #F7E1F2); }
.zoo-word { font-size: .95rem; font-weight: 900; color: var(--we-ink); margin-top: 2px; }
.zoo-cell.dim .zoo-word { color: #9AA88E; font-size: .78rem; }
.zoo-cell.bounce { animation: we-jarpop .5s cubic-bezier(.5, 1.6, .5, 1); }

.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #F3F8E8; border-radius: 14px; padding: 12px; }
.tip-icons { font-size: 1.6rem; }
.tip-row p { margin: 0; font-size: .95rem; }

/* ═══════════ Small screens ═══════════ */

@media (max-height: 760px) {
    .t-echo { width: clamp(100px, 17vh, 150px); }
    #level-row { margin-top: 8px; }
    #egg-wrap { width: clamp(150px, 26vh, 220px); }
}
@media (max-width: 900px) {
    #echo-side { display: none; }
}