.echo-cell.hint-player:not(.blocked){background:linear-gradient(145deg,rgba(145,127,255,.15),#11182a);box-shadow:inset 0 0 0 2px rgba(145,127,255,.28),0 0 15px rgba(145,127,255,.08)}
.echo-cell.hint-echo:not(.blocked){box-shadow:inset 0 0 0 2px rgba(93,225,255,.22),0 0 14px rgba(93,225,255,.07)}
.echo-cell.hint-player.hint-echo:not(.blocked){background:linear-gradient(145deg,rgba(145,127,255,.13),rgba(93,225,255,.06));box-shadow:inset 0 0 0 2px rgba(145,127,255,.22),inset 0 0 0 4px rgba(93,225,255,.10)}
.echo-hint-arrow{position:absolute;z-index:5;display:grid;place-items:center;pointer-events:none;font-weight:950;line-height:1}.echo-hint-arrow-player{left:50%;top:50%;transform:translate(-50%,-50%);color:#e1dcff;font-size:clamp(16px,2.25vw,23px);text-shadow:0 0 12px rgba(145,127,255,.52)}.echo-hint-arrow-echo{left:8px;bottom:7px;color:#aeefff;font-size:11px;text-shadow:0 0 9px rgba(93,225,255,.38)}
.echo-hint-step{position:absolute;z-index:7;min-width:19px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;font-size:7px;font-weight:950;line-height:1;pointer-events:none}.echo-hint-step-player{right:5px;top:5px;background:rgba(145,127,255,.25);border:1px solid rgba(200,191,255,.55);color:#f0edff}.echo-hint-step-echo{left:5px;bottom:4px;background:rgba(93,225,255,.12);border:1px solid rgba(93,225,255,.42);color:#c8f5ff}
.echo-hint-sequence-player,.echo-hint-sequence-echo{font-weight:850;letter-spacing:.02em}.echo-hint-sequence-player{background:rgba(145,127,255,.13);color:#e0daff}.echo-hint-sequence-echo{background:rgba(93,225,255,.075);color:#c2f1ff}
.echo-stage{position:relative;gap:8px}.echo-stage .echo-timeline{box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.echo-stage .echo-agent-player{isolation:isolate}.echo-stage .echo-agent-player:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(145,127,255,.18);pointer-events:none}.echo-stage .echo-agent-ghost{filter:saturate(.9)}
.echo-state-banner{width:min(100%,560px);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(13,20,36,.96);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(10px)}.echo-state-banner[hidden]{display:none!important}.echo-state-banner>div{display:flex;align-items:center;gap:7px;min-width:0;flex:1}.echo-state-banner strong{font-size:11px;letter-spacing:.02em;white-space:nowrap}.echo-state-banner span{font-size:10px;line-height:1.25;color:var(--muted);min-width:0}.echo-state-banner button{appearance:none;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:#fff;border-radius:9px;padding:7px 11px;font:inherit;font-size:9px;font-weight:850;white-space:nowrap;cursor:pointer}.echo-state-banner.is-failed{border-color:rgba(255,113,138,.52);background:linear-gradient(135deg,rgba(255,92,122,.13),rgba(13,20,36,.97))}.echo-state-banner.is-failed strong{color:#ffd5dc}.echo-state-banner.is-failed button{border-color:rgba(255,113,138,.42);background:rgba(255,113,138,.10)}.echo-state-banner.is-waiting-player{border-color:rgba(145,127,255,.46);background:linear-gradient(135deg,rgba(145,127,255,.12),rgba(13,20,36,.97))}.echo-state-banner.is-waiting-player strong{color:#e6e1ff}.echo-state-banner.is-waiting-echo{border-color:rgba(93,225,255,.40);background:linear-gradient(135deg,rgba(93,225,255,.08),rgba(13,20,36,.97))}.echo-state-banner.is-waiting-echo strong{color:#c9f5ff}.echo-state-banner.is-practice{border-color:rgba(145,127,255,.45);background:rgba(21,20,48,.96)}.echo-state-banner.is-practice strong{color:#e7e1ff}
.echo-stage>.echo-state-banner{position:absolute;left:0;right:0;top:0;z-index:80;width:100%;min-height:44px;margin:0}
.echo-board-shell{position:relative;width:min(100%,560px)}.echo-board-shell>.echo-grid{width:100%}
.echo-cell.practice-next-player:not(.blocked){outline:3px solid rgba(145,127,255,.92);outline-offset:-3px;box-shadow:inset 0 0 0 2px rgba(145,127,255,.12),0 0 18px rgba(145,127,255,.20);animation:echo-practice-pulse .7s ease-in-out infinite alternate}.echo-cell.practice-next-echo:not(.blocked){box-shadow:inset 0 0 0 2px rgba(93,225,255,.34),0 0 14px rgba(93,225,255,.12)}.echo-cell.practice-next-player.practice-next-echo:not(.blocked){outline-color:rgba(194,174,255,.96);box-shadow:inset 0 0 0 2px rgba(145,127,255,.18),inset 0 0 0 5px rgba(93,225,255,.10),0 0 18px rgba(145,127,255,.18)}
.echo-practice-marker{position:absolute;z-index:8;display:grid;place-items:center;pointer-events:none;border-radius:999px;font-size:6px;font-weight:950;letter-spacing:.06em;line-height:1}.echo-practice-marker-you{left:50%;top:5px;transform:translateX(-50%);min-width:28px;height:15px;padding:0 5px;background:rgba(75,57,139,.94);border:1px solid rgba(190,180,255,.70);color:#f2efff}.echo-practice-marker-echo{right:4px;bottom:4px;min-width:27px;height:14px;padding:0 4px;background:rgba(10,54,69,.94);border:1px solid rgba(93,225,255,.55);color:#c8f4ff}@keyframes echo-practice-pulse{from{filter:brightness(.97)}to{filter:brightness(1.14)}}
.echo-compact-bar{min-height:32px;font-size:11px;font-weight:800;gap:8px}.echo-compact-you,.echo-compact-echo{display:flex;align-items:center;gap:5px;white-space:nowrap}.echo-compact-you b,.echo-compact-echo b{font-size:12px;letter-spacing:.025em}.echo-compact-you b{color:#eeeaff}.echo-compact-echo b{color:#c8f4ff}.echo-compact-echo small{font-size:10px;font-weight:750;color:#a7b2ca}.echo-compact-you>i,.echo-compact-echo>i{width:8px;height:8px;border-radius:50%;display:block}.echo-compact-you>i{background:#917fff;box-shadow:0 0 8px rgba(145,127,255,.5)}.echo-compact-echo>i{border:2px solid #5de1ff;background:transparent}.echo-copy-mark{font-size:13px;opacity:.45;font-weight:900}
.wall-swatch{width:24px;height:24px;display:block;border-radius:7px}.wall-swatch-you{border:1px solid rgba(145,127,255,.42);background:repeating-linear-gradient(135deg,rgba(145,127,255,.25) 0,rgba(145,127,255,.25) 5px,rgba(33,27,68,.30) 5px,rgba(33,27,68,.30) 9px)}.wall-swatch-echo{border:1px solid rgba(93,225,255,.34);background:repeating-linear-gradient(45deg,rgba(93,225,255,.14) 0,rgba(93,225,255,.14) 5px,rgba(16,47,61,.20) 5px,rgba(16,47,61,.20) 9px)}.wall-swatch-both{border:1px solid #252e43;background:repeating-linear-gradient(135deg,#080c15 0,#080c15 6px,#151c2d 6px,#151c2d 10px)}
.echo-agent-ghost{font-size:clamp(10px,1.45vw,13px)}.echo-goal-mark:after{font-size:10px}.echo-next-marker{min-width:30px;height:16px;font-size:6px}.echo-cell.just-moved-you .echo-agent-player{animation:echo-you-pop .24s cubic-bezier(.2,.8,.2,1)}.echo-cell.just-moved-echo .echo-agent-ghost{animation:echo-ghost-pop .24s cubic-bezier(.2,.8,.2,1)}
@keyframes echo-you-pop{0%{transform:translate(-50%,-50%) scale(.82);filter:brightness(1.3)}65%{transform:translate(-50%,-50%) scale(1.10)}100%{transform:translate(-50%,-50%) scale(1)}}@keyframes echo-ghost-pop{0%{transform:translate(-50%,-50%) scale(.72);opacity:.45}65%{transform:translate(-50%,-50%) scale(1.12);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:.72}}.echo-cell.echo-next-danger{animation:echo-danger-pulse .48s ease-in-out infinite alternate}
@media(max-width:640px){.echo-hint-arrow-player{font-size:14px}.echo-hint-arrow-echo{left:5px;bottom:4px;font-size:9px}.echo-hint-step{min-width:15px;height:14px;padding:0 3px;font-size:6px}.echo-hint-step-player{right:3px;top:3px}.echo-hint-step-echo{left:3px;bottom:3px}.echo-stage>.echo-state-banner{min-height:54px;padding:7px 9px}.echo-state-banner>div{display:grid;gap:2px}.echo-state-banner strong{font-size:10px;white-space:normal}.echo-state-banner span{font-size:9px}.echo-state-banner button{padding:7px 9px}.echo-compact-you b,.echo-compact-echo b{font-size:11px}.echo-compact-echo small{font-size:9px}.wall-swatch{width:22px;height:22px}.echo-practice-marker-you{min-width:23px;height:13px;font-size:5px}.echo-practice-marker-echo{min-width:22px;height:12px;font-size:5px}}
@media(prefers-reduced-motion:reduce){.echo-cell.just-moved-you .echo-agent-player,.echo-cell.just-moved-echo .echo-agent-ghost,.echo-cell.echo-next-danger,.echo-cell.practice-next-player:not(.blocked){animation:none!important}}