/* Toot Dash. Palette: sunny sky, grass, outhouse brown, poop brown, gas green. */

body.game-page.tootdash { background: #2a9de8; }

#title {
  background:
    /* grassy hill the title scene sits on */
    radial-gradient(160% 22% at 50% 100%, #5cc84a 0 62%, #3e9e3a 63% 66%, transparent 67%),
    radial-gradient(circle at 50% 42%, #ffe873 0, #ffb81f 45%, #ff8a1f 85%);
  --ray1: rgba(255,255,255,.22);
}
#title .poster-logo { --c1: #8b5a2b; --c2: #c8f08a; --c3: #fff; line-height: .95; }
#title .poster-logo .dash .l { color: #8cf03c; }
#title .poster-logo .dash .l:nth-child(2n) { color: #fff; }
#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, #2a9de8 0 26px, #2591d8 26px 52px); }
#howto .card { background: #fff8e8; margin-top: 30px; }
#howto h2 { --c1: #8b5a2b; --c2: #8cf03c; --c3: #ff8a1f; }
#howto .steps { --step: #8b5a2b; --step2: #19c7ff; --step3: #8cf03c; --step4: #ff8a1f; }
#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: #2a9de8; }
#play .hud { --hud-bg: #6b4420; --hud-cell: #fff8e8; flex: none; }
#play .hud .cell.time .meter { height: 7px; }
.meter i#time-bar { background: repeating-linear-gradient(-45deg, #8cf03c 0 6px, #5cc84a 6px 12px); transition: none; }
.pips { display: flex; gap: 5px; margin-top: 3px; }
.pips i {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink);
  background: #c8f08a; box-shadow: inset -3px -3px 0 #9fd65a;
}
.pips i.empty { background: #ddd; box-shadow: none; opacity: .55; }
#track { 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.gassy { background: radial-gradient(circle at 50% 18%, #ffe873, #ffb81f 45%, #ff8a1f 85%); }
.end-screen.gassy .end-title { --c1: #8b5a2b; --c2: #8cf03c; --c3: #ff8a1f; }
.end-screen.gassy .end-card { background: #fff8e8; }
.end-screen.gassy .end-host { max-height: 360px; }   /* shorter card (2 buy buttons): the plush takes the spare height */
.end-screen.gassy .end-host .bubble { left: 6%; top: 30%; }   /* level with the plush, tail pointing at it */