/* Echo — DOM board of light/tone panels on the shared dark screen */
#echoStage { max-width: min(600px, calc(100vh - 150px)); min-width: min(100%, 280px); margin: 0 auto; }
#echoWrap { width: 100%; }
.echo-board{
  position:relative;aspect-ratio:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.4vw,16px);padding:clamp(14px,4vw,30px) clamp(14px,4vw,30px) clamp(22px,5vw,38px);
  background:
    linear-gradient(rgba(183,164,255,.045) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(90deg,rgba(183,164,255,.045) 1px,transparent 1px) 0 0/30px 30px,
    radial-gradient(60% 60% at 50% 45%,rgba(139,108,255,.12),rgba(139,108,255,0)),#0c0a14;
  touch-action:manipulation;user-select:none;-webkit-user-select:none
}
.echo-board[data-pads="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.echo-board[data-pads="6"] .echo-hub{display:none}
.echo-pad{
  --pad:#8b6cff;position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--pad) 46%,transparent);border-radius:var(--au-r-card);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pad) 15%,#14111f),color-mix(in srgb,var(--pad) 7%,#0c0a14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background-color .12s ease,transform .18s var(--au-ease-out),box-shadow .18s ease,filter .12s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.echo-pad svg{width:clamp(28px,8vw,52px);height:auto;fill:color-mix(in srgb,var(--pad) 78%,#0c0a14);transition:fill .12s ease,transform .18s var(--au-ease-out)}
.echo-key{position:absolute;top:10px;inset-inline-start:12px;color:rgba(244,243,248,.5);font:600 12px/1 var(--au-font-label);font-variant-numeric:tabular-nums}
.echo-pad:hover{border-color:color-mix(in srgb,var(--pad) 70%,transparent)}
.echo-pad:focus-visible{outline:2px solid var(--au-focus);outline-offset:3px}
.echo-pad.is-lit{background:var(--pad);border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 44px color-mix(in srgb,var(--pad) 70%,transparent);transform:scale(.975)}
.echo-pad.is-lit svg{fill:#fff;transform:scale(1.08)}
.echo-pad.is-lit .echo-key{color:rgba(12,10,20,.6)}
.echo-hub{position:absolute;left:50%;top:calc(50% - clamp(4px,.5vw,4px));width:clamp(64px,18%,104px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;border:1px solid rgba(183,164,255,.35);background:#0c0a14;box-shadow:0 0 0 clamp(6px,1.4vw,10px) #0c0a14,0 0 30px rgba(139,108,255,.25);pointer-events:none}
.echo-hub strong{color:#f4f3f8;font:650 clamp(22px,4.6vw,34px)/1 var(--au-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.echo-timer{position:absolute;left:clamp(14px,4vw,30px);right:clamp(14px,4vw,30px);bottom:clamp(9px,2vw,15px);height:4px;border-radius:2px;background:rgba(183,164,255,.12);overflow:hidden}
.echo-timer[hidden]{display:none}
.echo-timer i{position:absolute;inset:0;background:linear-gradient(90deg,#6d4ae0,#b7a4ff);transform-origin:left center}
html[dir="rtl"] .echo-timer i{transform-origin:right center}
.echo-board.is-error{box-shadow:inset 0 0 0 2px rgba(255,122,147,.75),inset 0 0 60px rgba(255,122,147,.18)}
.echo-sound{cursor:pointer}
.echo-sound input{width:18px;height:18px;margin:0;accent-color:var(--au-accent);cursor:pointer}
/* Echo reports its phase in the HUD and the centre hub, so the shared field hint stays hidden */
#echoStage .game-ready{display:none}
#echoStage:fullscreen{display:grid;place-items:center;width:100vw;height:100vh;background:var(--au-bg);padding:18px}
#echoStage:fullscreen .game-canvas-wrap{width:min(92vh,92vw)}
@media (prefers-reduced-motion:reduce){.echo-pad,.echo-pad svg{transition:none}.echo-pad.is-lit,.echo-pad.is-lit svg{transform:none}}

/* v3.7.3: width/height ratio used by the landscape layout in game-shell.css */
#echoStage { --game-aspect: 1; }