/* Colour Echo. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-echo{--ec-frame:#0a1031}
.ec-stage{position:relative}

/* ---------- Mode and speed pickers ---------- */
.ec-modes{margin:0 0 18px;width:fit-content;max-width:100%;box-sizing:border-box}
.ec-age{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--k-violet,#a594ff);color:#170f3d;font:800 .72rem/1.5 "Manrope",Inter,sans-serif;vertical-align:1px}
.ec-modes button[aria-pressed="true"] .ec-age{background:#5b48d6;color:#fff}
.ec-stage .kg-levels button:focus-visible,.ec-stage .kp-button:focus-visible,.ec-sound:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}

/* ---------- Layout ---------- */
.ec-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(18px,3vw,34px);align-items:start}
.ec-board-col{min-width:0}
.ec-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ec-keys{text-align:center;margin:12px auto 0!important;max-width:520px}

/* ---------- Board: planets around Piko ---------- */
.ec-board{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto;border-radius:50%;
 background:radial-gradient(circle at 50% 50%,#1e2470 0,#121852 42%,var(--ec-frame) 70%);
 box-shadow:0 18px 44px rgba(2,4,20,.5),inset 0 0 0 2px #2c3889,inset 0 0 60px rgba(165,148,255,.18)}
.ec-orbit{position:absolute;inset:17%;border-radius:50%;border:2px dashed rgba(165,148,255,.35);pointer-events:none}
.ec-n6 .ec-orbit{inset:15%}

.ec-pad{position:absolute;width:31%;aspect-ratio:1/1;translate:-50% -50%;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font:inherit;
 transition:scale .16s ease,box-shadow .16s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:56px;min-height:56px}
.ec-pad[hidden]{display:none}
.ec-n6 .ec-pad{width:27%}
.ec-n4 .ec-pad-1{left:50%;top:17%}.ec-n4 .ec-pad-2{left:83%;top:50%}.ec-n4 .ec-pad-3{left:50%;top:83%}.ec-n4 .ec-pad-4{left:17%;top:50%}
.ec-n6 .ec-pad-1{left:50%;top:15%}.ec-n6 .ec-pad-2{left:80.3%;top:32.5%}.ec-n6 .ec-pad-3{left:80.3%;top:67.5%}
.ec-n6 .ec-pad-4{left:50%;top:85%}.ec-n6 .ec-pad-5{left:19.7%;top:67.5%}.ec-n6 .ec-pad-6{left:19.7%;top:32.5%}

.ec-pad-1{--pc:#ff5b5b;--pd:#b8283a}
.ec-pad-2{--pc:#4b8dff;--pd:#1f4cbf}
.ec-pad-3{--pc:#ffcf3d;--pd:#b98100}
.ec-pad-4{--pc:#36d48c;--pd:#0f7a4a}
.ec-pad-5{--pc:#a57bff;--pd:#5f37c7}
.ec-pad-6{--pc:#ff9640;--pd:#bb520a}

.ec-pad:before{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,var(--pc) 0,transparent 68%);opacity:0;transition:opacity .16s ease;pointer-events:none}
.ec-planet{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:saturate(.85) brightness(.88);transition:filter .16s ease}
.ec-pl-body{fill:var(--pc);stroke:var(--pd);stroke-width:3}
.ec-pl-tex{fill:var(--pd);opacity:.45}
.ec-pl-shade{fill:#000;opacity:.16}
.ec-pl-gloss{fill:#fff;opacity:.4}
.ec-sym{fill:#fff;stroke:var(--pd);stroke-width:3.5;stroke-linejoin:round}
.ec-num{position:absolute;top:-2%;left:-2%;display:grid;place-items:center;width:clamp(24px,26%,34px);aspect-ratio:1/1;border-radius:50%;background:#fff;color:#151b4a;
 font:900 clamp(13px,.8rem,18px)/1 "Manrope",Inter,sans-serif;box-shadow:0 0 0 3px var(--pd),0 3px 8px rgba(2,4,20,.4)}

.ec-pad:hover .ec-planet{filter:saturate(.9) brightness(.92)}
.ec-pad:focus{outline:none}
.ec-pad:focus-visible{box-shadow:0 0 0 5px var(--k-gold,#f6c96c),0 0 0 9px rgba(246,201,108,.35)}
.ec-pad:active{scale:.96}
.ec-waiting .ec-pad{cursor:default}
.ec-waiting .ec-pad:active{scale:1}

/* Lit: glow, full colour, white ring and a little grow. */
.ec-pad.ec-lit{scale:1.1;box-shadow:0 0 0 5px #fff,0 0 34px 10px var(--pc);z-index:2}
.ec-pad.ec-lit:before{opacity:.8}
.ec-pad.ec-lit .ec-planet{filter:saturate(1.1) brightness(1.18)}

/* Showing the right planet after a slip. */
@keyframes ec-ring{0%{box-shadow:0 0 0 4px var(--k-gold,#f6c96c),0 0 0 4px rgba(246,201,108,.6)}100%{box-shadow:0 0 0 4px var(--k-gold,#f6c96c),0 0 0 22px rgba(246,201,108,0)}}
.ec-pad.ec-show{z-index:2;box-shadow:0 0 0 4px var(--k-gold,#f6c96c);animation:ec-ring 1s ease-out infinite}
.ec-pad.ec-show .ec-planet{filter:none}
@keyframes ec-wobble{0%,100%{rotate:0deg}25%{rotate:-7deg}75%{rotate:7deg}}
.ec-pad.ec-miss{animation:ec-wobble .45s ease}

/* ---------- Piko ---------- */
.ec-piko{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1/1;translate:-50% -50%;pointer-events:none}
.ec-n6 .ec-piko{width:27%}
.ec-piko svg{display:block;width:100%;height:100%;overflow:visible}
.ec-piko-line{stroke:#d9dcff;stroke-width:3.5;stroke-linecap:round;fill:none}
.ec-ant{fill:var(--ant,#ff8f7f);stroke:#fff;stroke-width:2;transition:fill .15s}
.ec-piko-arm{fill:#7cbcff}
.ec-piko-belly{fill:#7f6fe0}
.ec-piko-btn{fill:#ffd23f}
.ec-piko-head{fill:#a594ff;stroke:#7a66e6;stroke-width:2}
.ec-piko-face{fill:#1d2350}
.ec-eyes circle{fill:#62e3ab}
.ec-mouth{fill:none;stroke:#62e3ab;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;display:none}
.ec-m-big{fill:#62e3ab}
.ec-board[data-mood="idle"] .ec-m-smile,.ec-board[data-mood="turn"] .ec-m-smile,.ec-board[data-mood="watch"] .ec-m-o,.ec-board[data-mood="happy"] .ec-m-big,.ec-board[data-mood="oops"] .ec-m-wobble{display:inline}
.ec-board[data-mood="watch"] .ec-eyes circle{r:5.6}
.ec-board[data-glow="1"]{--ant:#ff5b5b}.ec-board[data-glow="2"]{--ant:#4b8dff}.ec-board[data-glow="3"]{--ant:#ffcf3d}
.ec-board[data-glow="4"]{--ant:#36d48c}.ec-board[data-glow="5"]{--ant:#a57bff}.ec-board[data-glow="6"]{--ant:#ff9640}
@keyframes ec-hop{0%,100%{translate:-50% -50%}40%{translate:-50% -58%}}
.ec-board[data-mood="happy"] .ec-piko{animation:ec-hop .5s ease 2}

/* ---------- Side panel ---------- */
.ec-status{margin:0!important;padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.4em;position:relative;font-size:1.04rem!important;line-height:1.4}
.ec-status:before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--k-violet,#a594ff) 20%);box-shadow:0 0 12px rgba(165,148,255,.6)}
.ec-progress{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;min-height:20px}
.ec-progress li{width:18px;height:18px;margin:0;border-radius:50%;border:2px solid var(--k-line,#2a3678);background:var(--k-bg-2,#0c1234);box-sizing:border-box;transition:background .15s,border-color .15s}
.ec-progress li.ec-done{background:var(--k-mint,#62e3ab);border-color:var(--k-mint,#62e3ab)}
.ec-progress li.ec-next{border-color:var(--k-gold,#f6c96c);box-shadow:0 0 0 3px rgba(246,201,108,.25)}
.ec-actions{margin-top:0!important}
.ec-actions .kp-button{flex:1 1 100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;font-size:1.08rem}
.ec-start svg{width:22px;height:22px;fill:currentColor;flex:none}
.ec-retry svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ec-retry[hidden]{display:none}
.ec-settings{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--k-line-soft,#1f2a62)}
.ec-setting-label{margin:0 0 6px!important;font:800 .9rem/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important}
.ec-speeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4.4em),1fr));border-radius:18px}
.ec-speeds button{padding:6px 8px;border-radius:14px}
.ec-sound{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:8px 16px;border-radius:999px;border:2px solid var(--k-line,#2a3678);background:rgba(255,255,255,.04);color:var(--k-ink,#f4f6ff);font:800 1rem/1.2 "Manrope",Inter,sans-serif;cursor:pointer;touch-action:manipulation}
.ec-sound svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ec-sound svg path:first-child{fill:currentColor}
.ec-sound .ec-sound-on{display:none}
.ec-sound[aria-pressed="true"]{background:#efeaff;color:#2b1d7a;border-color:var(--k-violet,#a594ff)}
.ec-sound[aria-pressed="true"] .ec-sound-on{display:block}
.ec-sound[aria-pressed="true"] .ec-sound-off{display:none}
.ec-sound:hover{border-color:#3b4a9a}

/* ---------- Milestone panel ---------- */
.ec-win{position:relative;overflow:hidden;outline:none}
.ec-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.ec-win h3,.ec-win p{position:relative}
.ec-win p{max-width:520px}
.ec-win-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ec-win-actions .kp-button{flex:0 1 200px}
.ec-win-actions .kp-button[hidden]{display:none}
.ec-star{width:56px;height:56px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.ec-star-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes ec-star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.ec-win:not([hidden]) .ec-star{animation:ec-star .5s cubic-bezier(.2,.9,.3,1.3) both}
.ec-win:not([hidden]) .ec-star:nth-child(2){animation-delay:.15s}
.ec-win:not([hidden]) .ec-star:nth-child(3){animation-delay:.3s}
.ec-confetti{position:absolute;inset:0;pointer-events:none}
.ec-bit{position:absolute;top:-14px;width:12px;height:12px;border-radius:50%;opacity:0}
.ec-bit:nth-child(6n+1){background:#ff5b5b}.ec-bit:nth-child(6n+2){background:#4b8dff}.ec-bit:nth-child(6n+3){background:#ffcf3d}
.ec-bit:nth-child(6n+4){background:#36d48c;border-radius:3px}.ec-bit:nth-child(6n+5){background:#a57bff}.ec-bit:nth-child(6n){background:#ff9640;border-radius:3px}
.ec-bit-0{left:5%}.ec-bit-1{left:13%}.ec-bit-2{left:21%}.ec-bit-3{left:30%}.ec-bit-4{left:38%}.ec-bit-5{left:46%}.ec-bit-6{left:54%}.ec-bit-7{left:62%}.ec-bit-8{left:71%}.ec-bit-9{left:79%}.ec-bit-10{left:87%}.ec-bit-11{left:94%}
@keyframes ec-fall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(260px);opacity:0}}
.ec-win:not([hidden]) .ec-bit{animation:ec-fall 1.9s ease-in both}
.ec-win:not([hidden]) .ec-bit:nth-child(3n+1){animation-delay:.2s;animation-duration:2.2s}
.ec-win:not([hidden]) .ec-bit:nth-child(3n+2){animation-delay:.45s;animation-duration:1.7s}

/* ---------- How to play ---------- */
.ec-howto{margin-top:22px;padding:clamp(18px,3vw,30px);border-radius:28px;background:var(--k-surface,#111944);border:1px solid var(--k-line-soft,#1f2a62)}
.ec-howto h2{margin:0 0 16px!important;font-size:1.35rem!important}
.ec-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ec-steps li{margin:0;padding:16px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.ec-steps strong{color:var(--k-ink,#f4f6ff)}
.ec-step-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%}
.ec-step-icon svg{width:24px;height:24px;fill:none;stroke:#13183f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ec-step-watch{background:var(--k-violet,#a594ff)}
.ec-step-tap{background:var(--k-mint,#62e3ab)}
.ec-step-grow{background:var(--k-gold,#f6c96c)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .ec-play{grid-template-columns:1fr}
 .ec-side{max-width:560px;width:100%;margin:0 auto}
}
@media(max-width:700px){.ec-steps{grid-template-columns:1fr}}
@media(max-width:520px){
 .ec-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.6em),1fr));width:100%;border-radius:20px}
 .ec-modes button{border-radius:15px;padding:6px 8px}
 .ec-board-col{margin-inline:-6px}
}
@media(prefers-reduced-motion:reduce){
 .ec-pad,.ec-planet,.ec-pad:before,.ec-progress li,.ec-ant{transition:none!important}
 .ec-pad.ec-lit,.ec-pad:active{scale:1!important}
 .ec-pad.ec-lit{box-shadow:0 0 0 7px #fff,0 0 0 11px var(--pc)}
 .ec-pad.ec-show,.ec-pad.ec-miss,.ec-board[data-mood="happy"] .ec-piko,.ec-win:not([hidden]) .ec-star{animation:none!important}
 .ec-pad.ec-show{box-shadow:0 0 0 5px var(--k-gold,#f6c96c),0 0 0 10px rgba(246,201,108,.4)}
 .ec-confetti{display:none}
}
@media print{.ec-side,.ec-modes,.ec-win,.ec-keys{display:none!important}}