.echo-stage{width:min(100%,560px);display:grid;gap:12px;justify-items:center}
.echo-grid{width:min(100%,560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--grid-size),1fr);gap:5px;padding:7px;border:1px solid rgba(113,132,181,.32);border-radius:16px;background:linear-gradient(145deg,#090e1a,#0d1425);box-shadow:inset 0 0 28px rgba(0,0,0,.18)}.echo-cell{position:relative;min-width:0;border:1px solid #27314c;border-radius:9px;background:#11182a;cursor:pointer;overflow:hidden;transition:transform .1s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.echo-cell:not(.blocked):not(.barrier-player):hover{border-color:#44547c;background:#141e34}.echo-cell:not(.blocked):not(.barrier-player):active{transform:scale(.96)}.echo-cell.blocked{cursor:not-allowed;border-color:#1c2437;background:repeating-linear-gradient(135deg,#080c15 0,#080c15 7px,#111727 7px,#111727 10px);opacity:.82}.echo-cell.blocked:after{content:"";position:absolute;inset:27%;border-radius:6px;background:rgba(118,132,163,.14);box-shadow:inset 0 0 0 1px rgba(142,157,190,.10)}
.echo-cell.barrier-player{cursor:not-allowed;border-color:rgba(145,127,255,.38);background:repeating-linear-gradient(135deg,rgba(145,127,255,.18) 0,rgba(145,127,255,.18) 6px,rgba(33,27,68,.26) 6px,rgba(33,27,68,.26) 10px),#11182a;box-shadow:inset 0 0 0 1px rgba(145,127,255,.08)}.echo-cell.barrier-echo{border-color:rgba(93,225,255,.28);background:repeating-linear-gradient(45deg,rgba(93,225,255,.09) 0,rgba(93,225,255,.09) 5px,rgba(16,47,61,.15) 5px,rgba(16,47,61,.15) 9px),#11182a;box-shadow:inset 0 0 0 1px rgba(93,225,255,.05)}
.echo-cell.echo-next-target{outline:2px solid rgba(93,225,255,.72);outline-offset:-3px;box-shadow:inset 0 0 0 2px rgba(93,225,255,.08),0 0 17px rgba(93,225,255,.16);animation:echo-next-pulse .8s ease-in-out infinite alternate}.echo-cell.echo-next-danger{outline-color:rgba(255,120,142,.92);box-shadow:inset 0 0 0 2px rgba(255,120,142,.10),0 0 18px rgba(255,120,142,.20);animation:echo-danger-pulse .6s ease-in-out infinite alternate}.echo-next-marker{position:absolute;left:50%;top:5px;transform:translateX(-50%);z-index:7;min-width:22px;height:15px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:rgba(12,45,58,.88);border:1px solid rgba(93,225,255,.58);color:#c9f5ff;font-size:6px;font-weight:950;letter-spacing:.04em;pointer-events:none}.echo-next-danger .echo-next-marker{background:rgba(67,23,33,.92);border-color:rgba(255,120,142,.72);color:#ffd4dc}@keyframes echo-next-pulse{from{filter:brightness(.96)}to{filter:brightness(1.13)}}@keyframes echo-danger-pulse{from{filter:brightness(.94)}to{filter:brightness(1.18)}}
.echo-goal-mark{position:absolute;left:50%;top:50%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3}.echo-goal-mark:after{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:900;letter-spacing:.04em}.echo-goal-player{width:58%;border:3px dashed #917fff;box-shadow:0 0 0 5px rgba(145,127,255,.07),0 0 18px rgba(145,127,255,.22)}.echo-goal-player:after{content:"P";color:#bfb5ff}.echo-goal-ghost{width:46%;border:2px dashed rgba(93,225,255,.65);box-shadow:0 0 12px rgba(93,225,255,.10);opacity:.7}.echo-goal-ghost:after{content:"E";color:rgba(157,239,255,.74)}.echo-cell.player-goal.goal-waiting{border-color:rgba(145,127,255,.72);box-shadow:inset 0 0 0 2px rgba(145,127,255,.14),0 0 18px rgba(145,127,255,.16)}.echo-cell.echo-goal.goal-waiting{border-color:rgba(93,225,255,.62);box-shadow:inset 0 0 0 2px rgba(93,225,255,.10),0 0 16px rgba(93,225,255,.12)}
.echo-agent{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;aspect-ratio:1;border-radius:50%;z-index:6;pointer-events:none;font-family:system-ui,sans-serif;font-weight:950;line-height:1}.echo-agent-player{width:62%;background:#917fff;color:#fff;font-size:clamp(8px,1.2vw,11px);letter-spacing:-.02em;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 5px rgba(145,127,255,.12),0 0 22px rgba(145,127,255,.62)}.echo-agent-ghost{width:45%;background:rgba(93,225,255,.08);color:#9defff;font-size:clamp(9px,1.3vw,12px);border:3px solid rgba(93,225,255,.82);box-shadow:0 0 14px rgba(93,225,255,.20);opacity:.72}.echo-cell.has-player.has-echo .echo-agent-player{transform:translate(-69%,-50%) scale(.82)}.echo-cell.has-player.has-echo .echo-agent-ghost{transform:translate(-22%,-50%) scale(.78)}
.echo-timeline{width:min(100%,560px);min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border:1px solid var(--border-soft);border-radius:12px;background:#0d1322}.echo-timeline>span{color:var(--muted-2);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.echo-queue{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:30px}.echo-queue b{position:relative;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(85,220,255,.22);background:rgba(85,220,255,.06);color:#9cecff;font-size:15px;font-style:normal;transition:transform .12s ease,border-color .12s ease,background .12s ease}.echo-queue b span{display:block}.echo-queue b.is-next{transform:translateY(-1px);border-color:rgba(93,225,255,.78);background:rgba(93,225,255,.15);box-shadow:0 0 14px rgba(93,225,255,.16)}.echo-queue b.is-next.is-danger{border-color:rgba(255,120,142,.88);background:rgba(255,120,142,.12);color:#ffd2da;box-shadow:0 0 14px rgba(255,120,142,.18)}.echo-queue b.is-next em{position:absolute;left:50%;top:-7px;transform:translateX(-50%);padding:1px 4px;border-radius:999px;background:#102335;color:#a8efff;font-size:6px;font-style:normal;font-weight:950;letter-spacing:.08em;line-height:1.3}.echo-queue b.is-next.is-danger em{background:#3d1b26;color:#ffd4dd}.echo-queue small{color:var(--muted);font-size:10px}
.echo-sequence{width:min(100%,560px);padding:10px 11px;border-radius:11px;border:1px solid rgba(113,132,181,.28);background:#0d1424;color:#d9e3f8;font-size:10px;line-height:1.45;text-align:left;display:grid;grid-template-columns:auto 1fr 1fr;gap:5px 10px;align-items:center}.echo-sequence>b{grid-row:1 / span 2;color:#fff;font-size:10px;letter-spacing:.04em}.echo-sequence span{padding:5px 8px;border-radius:8px}.echo-sequence small{grid-column:1 / -1;color:var(--muted);font-size:9px;text-align:center}
@media(max-width:640px){.echo-stage{gap:9px}.echo-grid{gap:4px;padding:5px;border-radius:13px}.echo-cell{border-radius:7px}.echo-next-marker{top:3px;min-width:18px;height:13px;font-size:5px}.echo-timeline{min-height:45px}.echo-queue b{width:27px;height:27px;font-size:14px}.echo-sequence{grid-template-columns:1fr;gap:5px}.echo-sequence>b{grid-row:auto}.echo-sequence small{grid-column:auto;text-align:left}}