/* Echo Says: only the additions on top of number.css (2026-10-29). */
.esg .stage{height:360px}
.esg .echo{left:4%; height:84%; bottom:2%}
.esg .says{left:50%; right:4%; bottom:auto; top:44px; font-size:1.35rem; line-height:1.2; padding:12px 16px}
.esg .says b{color:var(--pink)}
.esg .echo.listen .e-listen,.esg .echo.statue .e-statue,.esg .echo.move .e-move{visibility:visible}
.esg .echo.move.bob{animation:es-bob .45s ease-in-out infinite alternate}
@keyframes es-bob{from{transform:translateY(0)}to{transform:translateY(-3%)}}
.esg .echo.statue{animation:none}
/* the timer under the stage */
.esg .beat{margin:10px 2px 12px; visibility:hidden}
.esg .beat.on{visibility:visible}
.esg .beat i{width:100%}
/* the big button */
.esg .esgo{display:block; width:100%; min-height:92px; margin:4px 0 8px; border:0; border-radius:26px; cursor:pointer;
  font-family:var(--display); font-size:2.1rem; color:#14230a; background:var(--lime); box-shadow:0 8px 0 #5f8f0c; transition:transform .1s, box-shadow .1s, opacity .2s}
.esg .esgo:active{transform:translateY(5px); box-shadow:0 3px 0 #5f8f0c}
.esg .esgo[disabled]{opacity:.45; cursor:default}
.esg .esgo.freeze{background:var(--cyan); color:#082a33; box-shadow:0 8px 0 #0d7f8f}
.esg .esgo.right{box-shadow:0 0 0 5px #fff, 0 8px 0 #5f8f0c}
.esg .esgo.nope{animation:ns-nope .5s ease}
/* move pictures to tap */
.esg .choices{margin-bottom:8px}
.esg .choice.pose{position:relative; min-height:0; aspect-ratio:3/4; padding:4px; background:#1b0d3b}
.esg .choice.pose img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}
.esg .choice .order{position:absolute; top:6px; left:6px; width:30px; height:30px; border-radius:50%; background:var(--lime); color:#14230a;
  font-family:var(--display); font-size:1.2rem; line-height:30px; text-align:center}
/* freeze dance: the stage lights up while the music plays */
.esg .stage.music{box-shadow:0 0 0 3px var(--pink), 0 0 34px rgba(255,62,165,.55)}
.esg .stage.music .notes{opacity:1}
.esg .notes{position:absolute; right:8%; top:44%; font-size:2.6rem; opacity:0; transition:opacity .3s; animation:es-notes 1.2s ease-in-out infinite alternate; pointer-events:none}
@keyframes es-notes{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-14px) rotate(8deg)}}
@media (max-width:480px){
  .esg .stage{height:330px}
  .esg .says{left:48%; right:3%; top:40px; font-size:1.15rem}
  .esg .esgo{min-height:84px; font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){ .esg .echo.move.bob,.esg .notes{animation:none} }