/* Egg Pops. Palette: volcano sunset, jungle green, lava orange, fossil-shell cream, Shadow Dragon purple.
   No Easter cues: no pastels, baskets, bunnies or painted eggs. */

body.game-page.eggpops { background: #2f7a3a; }

#title {
  background:
    /* jungle floor the title scene sits on */
    radial-gradient(160% 22% at 50% 100%, #5aa83a 0 62%, #3d7f2a 63% 66%, transparent 67%),
    radial-gradient(circle at 50% 42%, #ffd25a 0, #ff9a2f 45%, #e8502a 85%);
  --ray1: rgba(255,255,255,.2);
}
#title .poster-logo { --c1: #ff5a1f; --c2: #ffe14d; --c3: #fff; line-height: .95; }
#title .poster-logo .pops .l { color: #8cf03c; }
#title .poster-logo .pops .l:nth-child(2n) { color: #ffe14d; }
#title .tagline { background: #fff; }
.poster .hero-hit {
  position: absolute; z-index: 3; padding: 0; background: none; border: 0; cursor: pointer;
  border-radius: 50%; touch-action: manipulation;
}
.poster .hero-hit:focus-visible { outline: 4px dashed var(--ink); outline-offset: -6px; }

#howto { background: repeating-linear-gradient(-45deg, #2f7a3a 0 26px, #2a6e34 26px 52px); }
#howto .card { background: #fff4dc; margin-top: 30px; }
#howto h2 { --c1: #e8502a; --c2: #8cf03c; --c3: #6b3fb0; }
#howto .steps { --step: #d9452b; --step2: #2f62b8; --step3: #6b3fb0; --step4: #f2b81f; }
#howto .steps li { padding-top: 6px; padding-bottom: 6px; }
.best { font: 400 14px var(--comic); letter-spacing: 1px; text-transform: uppercase; opacity: .8; margin: 6px 0 0; min-height: 1em; }

#play { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 520px; background: #2f7a3a; }
#play .hud { --hud-bg: #5a3a22; --hud-cell: #fff4dc; flex: none; }
#play .hud .cell.time .meter { height: 7px; }
.meter i#time-bar { background: repeating-linear-gradient(-45deg, #ff9a2f 0 6px, #e8502a 6px 12px); transition: none; }

/* collection: one chip per toy, filled once you've hatched it */
.dex-row { display: flex; gap: 4px; margin-top: 3px; }
.dex-row i {
  width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--ink);
  background: #ddd; opacity: .5; transition: transform .2s;
}
.dex-row i.got { opacity: 1; transform: scale(1.12); }
.dex-row i.got[data-k="trex"] { background: #d9452b; }
.dex-row i.got[data-k="trice"] { background: #2f62b8; }
.dex-row i.got[data-k="raptor"] { background: #f2b81f; }
.dex-row i.got[data-k="dragon"] { background: #6b3fb0; box-shadow: 0 0 0 2px #c9a0ff; }
#play .hud .cell.dex.all { background: #e9ffd0; }

#field { flex: 1 1 auto; min-height: 0; width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }

.end-screen.jungle { background: radial-gradient(circle at 50% 18%, #ffd25a, #ff9a2f 45%, #e8502a 85%); }
.end-screen.jungle .end-title { --c1: #e8502a; --c2: #8cf03c; --c3: #ffe14d; }
.end-screen.jungle .end-card { background: #fff4dc; }
.end-screen.jungle .end-host .bubble { left: 4%; top: 4px; }
.end-screen.jungle .coupon.bundle { background: #e9ffd0; }