/* Echo */
.new-game[data-game=echo] .intro-art{background:#f1e2ef}
.new-game[data-game=echo] .game-message{text-align:center;min-height:42px}
.ec-counter{text-align:center;font-family:'Fredoka',sans-serif;font-size:15px;color:var(--muted);min-height:22px;margin:-6px 0 10px;font-variant-numeric:tabular-nums}
.ec-counter.is-input{color:var(--ink)}
.ec-board{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:340px;margin:0 auto;padding:14px;border-radius:26px;background:#f3f1ea;border:1px solid #e0ddd2;transition:background .3s,border-color .3s}
.ec-board.is-good{background:#e4f0e7;border-color:#bcd7c4}
.ec-pad{--pad:#ccc;--deep:#888;--glow:#fff;position:relative;aspect-ratio:1;min-height:44px;border-radius:20px;border:1.5px solid var(--deep);background:var(--pad);display:grid;place-items:center;padding:0;color:var(--deep);transition:background .12s,transform .12s,box-shadow .12s,filter .2s,opacity .2s;box-shadow:0 4px 0 color-mix(in srgb,var(--deep) 35%,transparent);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ec-pad:nth-child(1){border-top-left-radius:44px}.ec-pad:nth-child(2){border-top-right-radius:44px}.ec-pad:nth-child(3){border-bottom-left-radius:44px}.ec-pad:nth-child(4){border-bottom-right-radius:44px}
.ec-green{--pad:#bfdcc8;--deep:#3f7a5a;--glow:#7fd3a0}
.ec-yellow{--pad:#f4e2ad;--deep:#8a6d1e;--glow:#ffd75e}
.ec-pink{--pad:#f0cdd6;--deep:#9c4560;--glow:#ff8fb0}
.ec-blue{--pad:#cdd3f0;--deep:#4b508f;--glow:#8f98ff}
.ec-symbol{width:38%;height:38%}
.ec-glyph{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
.ec-num{position:absolute;font-size:12px;font-weight:600;opacity:.7}
.ec-pad:nth-child(1) .ec-num,.ec-pad:nth-child(3) .ec-num{left:14px}.ec-pad:nth-child(2) .ec-num,.ec-pad:nth-child(4) .ec-num{right:14px}
.ec-pad:nth-child(-n+2) .ec-num{bottom:10px}.ec-pad:nth-child(n+3) .ec-num{top:10px}
.ec-pad:hover:not(.is-locked){filter:brightness(1.03)}
.ec-pad:active:not(.is-locked){transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--deep) 35%,transparent)}
.ec-board.is-watching .ec-pad{cursor:default}
.ec-board.is-watching .ec-pad:not(.lit){opacity:.78}
.ec-pad.lit{background:var(--glow);transform:scale(1.03);box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 40%,transparent),0 4px 0 color-mix(in srgb,var(--deep) 35%,transparent);opacity:1!important;color:var(--ink)}
.ec-pad.lit .ec-glyph{fill:#fffefa}
.ec-pad.wrong{background:#dcdcd6;border:2.5px solid var(--ink);color:var(--ink);opacity:1!important;box-shadow:0 4px 0 #252b2833;animation:ec-shake .35s}.ec-pad.wrong .ec-symbol{visibility:hidden}.ec-pad.wrong::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,11vw,52px);font-weight:600;color:var(--ink);line-height:1}
.ec-pad.reveal{background:var(--glow);opacity:1!important;outline:3px dashed var(--ink);outline-offset:3px}
@keyframes ec-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ec-trail{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;max-width:330px;margin:20px auto 0}
.ec-trail i{aspect-ratio:1;border-radius:50%;background:#ebe9e1;border:1px solid #dad7cc}
.ec-trail i.ec-green{background:#9fcfb0;border-color:#3f7a5a}.ec-trail i.ec-yellow{background:#f1d47e;border-color:#8a6d1e}.ec-trail i.ec-pink{background:#eaa7b9;border-color:#9c4560}.ec-trail i.ec-blue{background:#aab2ec;border-color:#4b508f}
@media(max-width:450px){.ec-board{gap:10px;padding:10px;max-width:290px}.ec-trail{gap:4px}}
@media(prefers-reduced-motion:reduce){.ec-pad,.ec-board{transition:none}.ec-pad.lit{transform:none}.ec-pad.wrong{animation:none}}
.ec-board:focus{outline:none}