/* Four stable bell positions; feedback uses outline and symbols as well as sound. */
.echo-scene { display:grid; grid-template-rows:auto minmax(0,1fr) auto; align-items:center; gap:18px; max-width:850px; max-height:500px; margin:auto; }
.echo-top { display:flex; flex-direction:column; align-items:center; gap:14px; }
.echo-replay { display:flex; gap:9px; align-items:center; justify-content:center; min-height:52px; padding:7px 22px 7px 14px; border:1px solid var(--tf-control-border); border-radius:40px; color:var(--tf-text); background:var(--tf-surface); font:600 15px/1.2 var(--tf-font); touch-action:manipulation; }
.echo-replay-icon { width:34px; height:34px; flex:none; }
.echo-replay-icon svg { display:block; width:100%; height:100%; }
.echo-order { display:flex; gap:12px; min-height:38px; align-items:center; }
.echo-bead { display:inline-flex; position:relative; width:34px; height:34px; align-items:center; justify-content:center; border:2px dashed var(--tf-control-border); border-radius:50%; }
.echo-bead.is-filled { border:2px solid transparent; background:var(--bead); }
.echo-bead.is-model { border-style:solid; border-color:var(--bead); background:var(--tf-surface); }
.echo-bead.is-model svg { padding:3px; border-radius:50%; background:var(--bead); }
.echo-played-mark { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:var(--tf-surface); color:var(--tf-text); border:1px solid var(--tf-control-border); font:700 10px/1 var(--tf-font); }
.echo-bead.is-next::after { content:''; position:absolute; left:calc(50% - 5px); bottom:-9px; width:10px; height:3px; border-radius:2px; background:var(--tf-muted); }
.echo-order.echo-try-again .is-next { outline:2px solid var(--tf-link); outline-offset:4px; }
.echo-bead svg { width:27px; height:27px; }
.echo-bells { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:center; width:100%; position:relative; }
.echo-bells::before { content:''; position:absolute; left:5%; right:5%; height:12px; border-radius:12px; background:#977f68; top:10%; z-index:-1; }
.echo-bell { appearance:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-width:48px; min-height:100px; border:3px solid transparent; border-radius:30px; background:transparent; padding:8px 0; color:var(--tf-muted); touch-action:manipulation; }
.echo-bell-art { display:block; width:100%; max-width:175px; transform-origin:50% 8%; pointer-events:none; }
.echo-bell-art svg { width:100%; height:auto; display:block; }
.echo-bell.echo-ringing { border-color:var(--bell-color); background:var(--play-hover); }
.echo-bell.echo-different { border-color:var(--bell-color); border-style:dashed; }
.echo-name { font-size:14px; line-height:1.3; }
.echo-bell kbd { font:500 11px/1.3 var(--tf-font); color:var(--tf-subtle); margin-top:5px; }
.echo-bottom { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:62px; }
.echo-status { color:var(--tf-muted); font-size:13px; line-height:1.35; min-height:18px; margin:0; text-align:center; }
.echo-keepsakes { display:flex; align-items:center; gap:14px; min-height:24px; }
.echo-keepsake { display:flex; gap:3px; }
.echo-keepsake .echo-bead { width:14px; height:14px; border:0; }
.echo-keepsake svg { display:none; }
.echo-hint { outline:3px dashed var(--tf-link); outline-offset:5px; }
.echo-scene [aria-disabled=true] { cursor:default; }
@media (hover:hover) { .echo-bell:not([aria-disabled=true]):hover { background:var(--play-hover); } .echo-replay:not([aria-disabled=true]):hover { border-color:var(--tf-link); } }
@media (max-width:600px) { .echo-scene { gap:12px; max-height:450px; } .echo-bells { gap:5px; } .echo-bell { border-radius:18px; padding:5px 0; } .echo-bell-art { max-width:125px; } .echo-top { gap:12px; } .echo-name { font-size:12px; } .echo-keepsakes { gap:10px; } .echo-keepsake .echo-bead { width:10px; height:10px; } }
@media (max-width:370px) { .echo-scene { gap:8px; } .echo-bell { border-width:2px; } .echo-bells { gap:3px; } .echo-replay { min-height:48px; font-size:14px; } .echo-status { font-size:11px; } .echo-bottom { min-height:49px; } }
@media (max-height:520px) and (orientation:landscape) {
  body[data-game=echo] .play-topline { flex-basis:64px; }
  body[data-game=echo] .game-content { margin-top:0; }
  body[data-game=echo] .play-heading { top:12px; left:180px; right:12px; }
  body[data-game=echo] .play-heading h1 { font-size:20px; }
  body[data-game=echo] .play-heading p { font-size:11px; }
  .echo-scene { max-width:780px; max-height:230px; grid-template-columns:160px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 20px; gap:6px 22px; }
  .echo-top { gap:14px; }.echo-replay { padding:5px 12px 5px 7px; font-size:12px; min-height:48px; }.echo-replay-icon {width:30px;height:30px;}
  .echo-order {gap:7px;}.echo-bead {width:27px;height:27px;}.echo-bead svg {width:22px;height:22px;}
  .echo-bells {gap:4px;}.echo-bell {min-height:88px;padding:3px 0;border-radius:17px;}.echo-bell-art {max-width:100px;}.echo-name {font-size:11px;}.echo-bell kbd {margin-top:1px;font-size:10px;}
  .echo-bottom {grid-column:1/-1;flex-direction:row;justify-content:center;gap:12px;min-height:20px;}.echo-status {font-size:11px;min-height:0;}.echo-keepsakes {min-height:18px;gap:8px;}.echo-keepsake .echo-bead {width:8px;height:8px;}
}
@media (max-height:360px) and (orientation:landscape) { .echo-scene {grid-template-columns:140px minmax(0,1fr);column-gap:12px;}.echo-bell-art {max-width:78px;}.echo-replay {font-size:11px;}.echo-bell kbd {display:none;}.echo-name {font-size:10px;}.echo-top {gap:10px;} }