/* Echo Breach: dark sector grid, orange/amber hazard, cyan probe, violet echoes */
:root {
  --echo-ground: #0B0D10;
  --echo-panel: #15181D;
  --echo-ink: #E9E6DF;
  --echo-dim: #8C9098;
  --echo-orange: #FF6B1A;
  --echo-amber: #FFC21F;
  --echo-probe: #2FD4E0;
  --echo-ghost: #8D6BFF;
}
body[data-room="echo"] { --bar-bg: var(--echo-ground); --bar-ink: var(--echo-ink); }

.room--echo {
  background: var(--echo-ground);
  color: var(--echo-ink);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  padding-bottom: 140px;
}
/* The hazard stripe is the game's own UI signature */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--echo-amber) 0 14px, var(--echo-ground) 14px 28px);
}
.echo-hero {
  position: relative;
  min-height: 100svh;
  padding: 110px var(--gutter) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--gutter);
  overflow: hidden;
  cursor: crosshair;
}
.echo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.echo-hero > :not(canvas) { position: relative; }
.room--echo .room-n { color: var(--echo-orange); opacity: 1; grid-column: 1; }
.echo-title {
  grid-column: 1; grid-row: 3;
  font-weight: 700; font-style: italic;
  text-transform: uppercase;
  font-size: clamp(64px, 12.5vw, 210px);
  line-height: .86;
  letter-spacing: .01em;
  pointer-events: none;
}
.echo-title span { display: block; }
.echo-title span:last-child { color: var(--echo-orange); }
.echo-tag {
  grid-column: 1; grid-row: 4;
  text-transform: uppercase;
  letter-spacing: .5em;
  font-size: clamp(13px, 1.3vw, 18px);
  margin: 24px 0 0;
}
.echo-hint {
  grid-column: 1; grid-row: 2;
  align-self: start;
  font: 12px var(--mono);
  color: var(--echo-dim);
  pointer-events: none;
}
.echo-hint-hit { display: none; color: var(--echo-orange); }
.echo-hero.is-hit .echo-hint-default { display: none; }
.echo-hero.is-hit .echo-hint-hit { display: inline; }
.echo-hero-phone {
  grid-column: 2; grid-row: 1 / -1;
  align-self: center;
  box-shadow: 0 0 0 1px rgb(255 107 26 / .5), 0 40px 80px -20px #000;
  pointer-events: none;
}

.echo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 120px);
  padding: 60px var(--gutter) 120px;
  max-width: 1400px;
}
.echo-label { font: 12px var(--mono); color: var(--echo-orange); letter-spacing: .1em; }
.echo-steps li {
  display: flex; gap: 20px; align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgb(233 230 223 / .12);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
}
.echo-num {
  flex: none;
  width: 34px; height: 38px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
  color: var(--echo-amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgb(255 194 31 / .15);
}
.echo-about { color: var(--echo-dim); font-size: 18px; align-self: end; }
.store--echo {
  margin-top: 20px;
  padding: 16px 32px;
  background: var(--echo-orange); color: #140A04;
  text-decoration: none; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.store--echo:hover { background: var(--echo-amber); }

.echo-reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 22vw, 300px);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--echo-orange) transparent;
}
.echo-reel figure { scroll-snap-align: start; }
.echo-reel figcaption { font-family: "Chakra Petch", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--echo-dim); opacity: 1; }
.echo-reel .phone { box-shadow: 0 0 0 1px rgb(233 230 223 / .12); }
@media (max-width: 1000px) {
  .echo-body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .echo-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 88px; }
  .echo-hint { display: none; }
  .echo-hero-phone { grid-column: 1; grid-row: 5; width: 62%; margin: 48px 0 0 auto; }
  .echo-reel { grid-auto-columns: 62%; }
}