.echo-page{--violet:#d6a6ff;--cyan:#7fe8ff;--ink:#050610;--panel:#0b0d18;--line:#2d3048;--muted:#8f93aa}
.echo-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}.echo-page h1{margin:8px 0 0;font-size:clamp(3.4rem,11vw,8.4rem);line-height:.8;letter-spacing:-.07em;color:#f4efff;text-shadow:0 0 54px rgba(214,166,255,.18)}.game-lead{max-width:820px;margin:24px 0 0;color:#a8a8bb}.echo-back{align-self:end;border:1px solid #393d59;border-radius:999px;padding:10px 14px;color:#c9c8d8;background:#0a0c16;text-decoration:none;font:800 .68rem/1 ui-monospace,monospace}
.echo-shell{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.62fr);margin-top:36px;overflow:hidden;border:1px solid #363954;border-radius:24px;background:#04050b;box-shadow:0 36px 100px rgba(0,0,0,.4),0 0 76px rgba(167,111,255,.07)}.echo-stage{min-width:0;background:radial-gradient(circle at 50% 42%,#18152a 0,#090a13 52%,#03040a 100%)}.echo-stage-head{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-bottom:1px solid var(--line);background:#24263a}.echo-stage-head div{padding:11px 14px;background:#090b14}.echo-stage-head span,.echo-readout span{display:block;color:#777c9a;font:800 .58rem/1.2 ui-monospace,monospace;letter-spacing:.14em}.echo-stage-head strong{display:block;margin-top:3px;color:#ecebff;font:900 .77rem/1.2 ui-monospace,monospace}.echo-canvas-wrap{display:grid;place-items:center;min-height:420px;padding:28px}.echo-canvas-wrap canvas{display:block;width:min(100%,960px);height:auto;aspect-ratio:16/5;border:1px solid #252842;border-radius:18px;background:#050711;box-shadow:inset 0 0 70px rgba(123,88,200,.06),0 20px 50px rgba(0,0,0,.2)}
.echo-legend{display:flex;flex-wrap:wrap;gap:16px;padding:12px 16px;border-top:1px solid var(--line);color:#6f748f;font:800 .58rem/1 ui-monospace,monospace;letter-spacing:.08em}.echo-legend span{display:flex;gap:6px;align-items:center}.echo-legend i{width:10px;height:10px;border-radius:50%;display:block}.legend-player{background:#f7f4ff;box-shadow:0 0 10px #fff}.legend-echo{background:#b985ff}.legend-plate{border-radius:2px!important;background:#7fe8ff}.legend-gate{border-radius:2px!important;background:#6b4d88}
.echo-console{padding:24px 22px;border-left:1px solid var(--line);background:linear-gradient(180deg,#0d0f1a,#080912)}.panel-kicker{margin:0;color:#c28cff;font:900 .64rem/1.3 ui-monospace,monospace;letter-spacing:.15em}.echo-console h2{margin:9px 0 8px;color:#faf7ff;font-size:1.5rem}.echo-console>p:not(.panel-kicker):not(.echo-status){color:#8f93aa;font-size:.84rem;line-height:1.55}.echo-readout{margin-top:22px;padding:14px;border:1px solid #30344f;border-radius:12px;background:#0b0d17}.echo-readout strong{display:block;margin-top:5px;color:#c9f6ff;font:900 1.05rem/1.2 ui-monospace,monospace;letter-spacing:.08em}.echo-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.echo-controls button,.echo-actions button{border:1px solid #383d5d;border-radius:10px;padding:11px;color:#e7e5f3;background:#111421;cursor:pointer;font:800 .72rem/1 ui-sans-serif,system-ui,sans-serif}.echo-controls button:hover,.echo-actions button:hover{border-color:#7b65a0;background:#18162a}.echo-controls #echo-action{grid-column:1/-1;border-color:#805aa8;color:#f3ddff;background:#241534}.echo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.echo-actions #next-button{border-color:#4c8a99;color:#dffbff;background:#10272d}.echo-status{min-height:4.5em;margin:16px 0 0;color:#b4b6c7;font-size:.8rem;line-height:1.55}.mono-note{margin-top:18px;padding-top:16px;border-top:1px solid #272b41}.mono-note strong{color:#d9b8ff;font:900 .63rem/1 ui-monospace,monospace;letter-spacing:.14em}.mono-note p{margin:7px 0 0;color:#7e829b;font-size:.76rem;line-height:1.55}
.echo-howto{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.echo-howto article{padding:18px;border:1px solid #282b42;border-radius:14px;background:#090b14}.echo-howto span{color:#b786eb;font:900 .65rem/1 ui-monospace,monospace}.echo-howto h2{margin:7px 0 5px;color:#eee9f8;font-size:.88rem}.echo-howto p{margin:0;color:#7f8398;font-size:.74rem;line-height:1.45}.back-link{margin:26px 0 0;color:var(--muted)}
@media(max-width:900px){.echo-shell{grid-template-columns:1fr}.echo-console{border-left:0;border-top:1px solid var(--line)}.echo-canvas-wrap{min-height:300px;padding:16px}.echo-howto{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.echo-header{grid-template-columns:1fr}.echo-back{justify-self:start}.echo-stage-head{grid-template-columns:1fr 1fr}.echo-stage-head div:nth-child(2){display:none}.echo-canvas-wrap{padding:8px;min-height:230px}.echo-howto{grid-template-columns:1fr 1fr}.echo-console{padding:20px 16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}