.waves-page {
  position: relative;
  padding-block: var(--space-6) var(--space-8);
  overflow: clip;
  background:
    radial-gradient(circle at 9% 7%, rgb(40 124 255 / 24%) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgb(124 222 88 / 20%) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 66%, rgb(255 248 221 / 14%) 0 1px, transparent 2px),
    var(--color-arcade-charcoal);
}

.waves-page::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 7px, rgb(255 248 221 / 2%) 8px);
  content: "";
}

.waves-page > * { position: relative; z-index: 1; }

.waves-hero { margin-bottom: var(--space-7); }

.waves-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(25rem, 46fr);
  gap: var(--space-6);
  align-items: center;
}

.waves-hero__grid > * { min-width: 0; width: 100%; }

.waves-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 37.5rem;
  padding: var(--panel-padding);
  border: var(--border-frame) solid var(--color-electric-blue);
  background-color: var(--color-cabinet-black);
  box-shadow: var(--shadow-hard);
}

.waves-hero__copy > * { min-width: 0; margin: 0; }
.waves-hero__eyebrow { color: var(--color-phosphor-green); }
.waves-hero__promise { max-width: 54ch; color: var(--color-warm-cream); font-size: var(--text-lead); }
.waves-hero__scope { max-width: 42ch; color: var(--color-cream-muted); font-size: var(--text-meta); line-height: var(--line-dense); }
.waves-hero__cta { align-self: flex-start; min-width: 17rem; }
.waves-hero__monitor { min-width: 0; margin: 0; box-shadow: var(--shadow-hard); }
.waves-hero__monitor img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-cabinet-black); }
.waves-hero__monitor figcaption { padding-inline: var(--space-3); }

.waves-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-6);
  align-items: start;
}

.waves-layout > * { min-width: 0; width: 100%; }
.waves-article { min-width: 0; }
.waves-section { margin-bottom: var(--space-7); scroll-margin-top: var(--space-7); }
.waves-section > h2 { color: var(--color-warm-cream); }

.waves-wave-section__lead { max-width: 52ch; color: var(--color-cream-muted); font-size: var(--text-lead); }
.waves-instruction-stack,
.waves-boss-stack,
.waves-prep-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.waves-instruction-stack > *, .waves-boss-stack > *, .waves-prep-stack > * { width: 100%; min-width: 0; }

.waves-instruction-card,
.waves-boss-card,
.waves-prep-card,
.waves-field-card,
.waves-route-card,
.waves-observation-note {
  background: var(--color-warm-cream);
  color: var(--color-arcade-charcoal);
  box-shadow: var(--shadow-hard);
}

.waves-instruction-card,
.waves-boss-card,
.waves-prep-card { padding: var(--panel-padding); }
.waves-instruction-card > :last-child,
.waves-boss-card > :last-child,
.waves-prep-card > :last-child,
.waves-field-card > :last-child,
.waves-route-card > :last-child,
.waves-observation-note > :last-child { margin-bottom: 0; }

.waves-instruction-card--blue, .waves-prep-card--blue { border-left: 4px solid var(--color-electric-blue); }
.waves-instruction-card--green, .waves-prep-card--green { border-left: 4px solid var(--color-phosphor-green); }
.waves-instruction-card--red { border-left: 4px solid var(--color-arcade-red); }
.waves-prep-card--lane { position: relative; overflow: hidden; border-left: 4px solid var(--color-phosphor-green); }
.waves-instruction-card__head { display: flex; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.waves-instruction-card__head > * { min-width: 0; }
.waves-instruction-card__head h3 { margin-bottom: 0; }
.waves-number { flex: 0 0 auto; color: var(--color-electric-blue); font-family: var(--font-heading); font-size: var(--text-section); line-height: 1.1; }
.waves-instruction-card p { max-width: 68ch; }
.waves-instruction-card strong { color: var(--color-arcade-red); }
.waves-lane-diagram { display: flex; gap: var(--space-2); align-items: center; min-width: 0; padding-top: var(--space-2); color: var(--color-arcade-charcoal); font-family: var(--font-heading); font-size: var(--text-micro); overflow-wrap: anywhere; }
.waves-lane-diagram span, .waves-lane-diagram b { min-width: 0; }
.waves-lane-diagram i { width: 1.2rem; height: 3px; flex: 0 1 2rem; background: var(--color-electric-blue); }

.waves-monitor-figure { margin: 0; box-shadow: var(--shadow-hard); }
.waves-monitor-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-cabinet-black); }
.waves-monitor-figure figcaption { padding-inline: var(--space-3); }
.waves-lightbox-trigger { position: absolute; z-index: 1; top: var(--space-3); right: var(--space-3); width: auto; min-height: auto; padding: var(--space-2) var(--space-3); border-color: var(--color-electric-blue); background: var(--color-cabinet-black); box-shadow: var(--shadow-hard-small); font-size: 0.62rem; }
.waves-observation-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.waves-observation-notes > * { min-width: 0; width: 100%; }
.waves-observation-note { padding: var(--compact-padding); }
.waves-observation-note--blue { border-top: 3px solid var(--color-electric-blue); }
.waves-observation-note--green { border-top: 3px solid var(--color-phosphor-green); }
.waves-observation-note p { max-width: 66ch; }

.waves-boss-section__lead { max-width: 56ch; color: var(--color-cream-muted); font-size: var(--text-lead); }
.waves-boss-card { border-left: 4px solid var(--color-electric-blue); }
.waves-boss-card--red { border-left-color: var(--color-arcade-red); }
.waves-boss-card--yellow { border-left-color: var(--color-focus-yellow); }
.waves-boss-card--green { border-left-color: var(--color-phosphor-green); }
.waves-boss-card p:not(.pixel-label) { max-width: 64ch; }
.waves-boss-card--yellow .pixel-label { color: #725600; }
.waves-boss-card--green .pixel-label { color: #267d18; }
.waves-two-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.waves-two-step > * { min-width: 0; padding: var(--space-3); border-top: 2px solid var(--color-phosphor-green); background: var(--color-star-white); font-size: var(--text-meta); }
.waves-two-step b { margin-right: var(--space-2); color: var(--color-phosphor-green); font-family: var(--font-heading); }

.waves-prep-card p { max-width: 66ch; }
.waves-prep-card ul { display: flex; flex-direction: column; gap: var(--space-2); max-width: 58ch; }
.waves-prep-card--green .pixel-label { color: #267d18; }
.waves-lane-motif { width: 100%; height: 8px; margin-top: var(--space-4); background: repeating-linear-gradient(90deg, var(--color-electric-blue) 0 18px, transparent 18px 28px); opacity: 0.7; }
.waves-pro-tip { display: flex; flex-direction: column; gap: var(--space-3); max-width: 48ch; margin-top: var(--space-5); padding: var(--compact-padding); border-left: 4px solid var(--color-focus-yellow); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); box-shadow: var(--shadow-hard-small); }
.waves-pro-tip > * { margin: 0; min-width: 0; }

.waves-boss-monitor-pair { display: grid; grid-template-columns: minmax(15.625rem, 40fr) minmax(20rem, 60fr); gap: var(--space-5); align-items: start; }
.waves-boss-monitor-pair > * { min-width: 0; width: 100%; }
.waves-portrait-monitor { width: min(100%, 22.5rem); justify-self: start; margin: 0; box-shadow: var(--shadow-hard); }
.waves-portrait-monitor img { width: 100%; max-height: 40rem; aspect-ratio: 9 / 16; object-fit: contain; background: var(--color-cabinet-black); }
.waves-encounter-note { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--panel-padding); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); box-shadow: var(--shadow-hard); }
.waves-encounter-note > * { min-width: 0; margin: 0; }
.waves-encounter-note p:not(.pixel-label) { max-width: 48ch; }
.waves-action-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--border-thin); margin-top: var(--space-5); border: var(--border-pixel) solid var(--color-electric-blue); background: var(--color-electric-blue); }
.waves-action-strip > * { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); background: var(--color-cabinet-black); }
.waves-action-strip b { color: var(--color-phosphor-green); font-family: var(--font-heading); font-size: var(--text-micro); }
.waves-action-strip em { color: var(--color-warm-cream); font-size: var(--text-meta); font-style: normal; line-height: var(--line-dense); }

.waves-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.waves-field-grid > * { min-width: 0; width: 100%; }
.waves-field-card { padding: var(--compact-padding); border-left: 4px solid var(--color-electric-blue); }
.waves-field-card--green { border-left-color: var(--color-phosphor-green); }
.waves-field-card p:not(.pixel-label) { max-width: 46ch; }
.waves-field-card .pixel-label { color: var(--color-electric-blue); }
.waves-field-card--green .pixel-label { color: #267d18; }
.waves-caution { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: var(--space-5); padding: var(--compact-padding); border-left: 4px solid var(--color-arcade-red); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); box-shadow: var(--shadow-hard-small); }
.waves-caution > * { min-width: 0; margin: 0; }
.waves-caution .pixel-label, .waves-caution strong { color: var(--color-arcade-red); }
.waves-caution p:last-child { max-width: 62ch; }

.waves-rail { min-width: 0; }
.waves-rail__inner { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: sticky; top: var(--space-5); }
.waves-rail__inner > * { min-width: 0; width: 100%; margin: 0; }
.waves-status-board dl { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.waves-status-board dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; min-width: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-electric-blue); }
.waves-status-board dt, .waves-status-board dd { min-width: 0; margin: 0; }
.waves-status-board dt { color: var(--color-cream-muted); font-size: var(--text-meta); }
.waves-status-board dd { text-align: right; font-size: var(--text-micro); }
.waves-status-board__note { max-width: 34ch; color: var(--color-cream-muted); font-size: var(--text-meta); line-height: var(--line-dense); }
.waves-quick-jumps { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--compact-padding); border: var(--border-pixel) solid var(--color-electric-blue); background: var(--color-cabinet-black); }
.waves-quick-jumps > * { min-width: 0; margin: 0; }
.waves-quick-jumps a { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-electric-blue); font-size: var(--text-meta); }
.waves-rail-reminder { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--compact-padding); border-left: 4px solid var(--color-phosphor-green); box-shadow: var(--shadow-hard-small); }
.waves-rail-reminder > * { margin: 0; min-width: 0; }
.waves-rail-reminder p:last-child { max-width: 34ch; font-size: var(--text-meta); line-height: var(--line-dense); }

.waves-routes { margin-top: var(--space-7); }
.waves-routes h2 { color: var(--color-warm-cream); }
.waves-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.waves-route-grid > * { min-width: 0; width: 100%; }
.waves-route-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--compact-padding); border-top: 4px solid var(--color-electric-blue); }
.waves-route-card--green { border-top-color: var(--color-phosphor-green); }
.waves-route-card--yellow { border-top-color: var(--color-focus-yellow); }
.waves-route-card > * { min-width: 0; margin: 0; }
.waves-route-card p:not(.pixel-label) { max-width: 42ch; }
.waves-route-card .pixel-label { color: #725600; }
.waves-route-card a { align-self: flex-start; font-weight: 700; }

.waves-closing { margin-top: var(--space-7); }
.waves-closing__container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-6); }
.waves-closing__container > * { min-width: 0; }
.waves-closing__panel { display: flex; flex-direction: column; grid-column: 1; gap: var(--space-4); border-width: 4px; }
.waves-closing__panel > * { min-width: 0; margin: 0; }
.waves-closing__panel p:not(.pixel-label) { max-width: 48ch; }
.waves-closing__cta { align-self: flex-start; min-width: 15.625rem; }

.waves-lightbox[hidden] { display: none; }
.waves-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: var(--space-4); }
.waves-lightbox__backdrop { position: absolute; inset: 0; background: rgb(11 13 18 / 88%); }
.waves-lightbox__dialog { position: relative; display: flex; flex-direction: column; gap: var(--space-4); width: min(100%, 70rem); max-height: calc(100vh - var(--space-6)); padding: var(--compact-padding); overflow: auto; border: 3px solid var(--color-electric-blue); background: var(--color-cabinet-black); box-shadow: var(--shadow-hard); }
.waves-lightbox__topline { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-width: 0; }
.waves-lightbox__topline > * { min-width: 0; margin: 0; }
.waves-lightbox__close { width: auto; min-height: auto; padding: var(--space-2) var(--space-3); font-size: 0.62rem; box-shadow: var(--shadow-hard-small); }
.waves-lightbox__image { width: 100%; max-height: 72vh; object-fit: contain; background: var(--color-cabinet-black); }
.waves-lightbox__caption { max-width: 66ch; margin: 0; color: var(--color-cream-muted); }

@media (max-width: 980px) {
  .waves-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .waves-hero__copy { max-width: 37.5rem; }
  .waves-hero__monitor { max-width: 48rem; }
}

@media (max-width: 860px) {
  .waves-layout { grid-template-columns: minmax(0, 1fr); }
  .waves-rail { grid-row: 1; }
  .waves-article { grid-row: 2; }
  .waves-rail__inner { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .waves-rail__inner > * { min-width: 0; width: 100%; }
  .waves-status-board { grid-column: 1; }
  .waves-quick-jumps { grid-column: 2; }
  .waves-rail-reminder { grid-column: 1; }
  .waves-rail-cta { grid-column: 2; align-self: start; }
  .waves-route-grid { grid-template-columns: minmax(0, 1fr); }
  .waves-closing__container { grid-template-columns: minmax(0, 1fr); }
  .waves-closing__panel { grid-column: 1; }
}

@media (max-width: 720px) {
  .waves-boss-monitor-pair { grid-template-columns: minmax(0, 1fr); }
  .waves-portrait-monitor { justify-self: center; }
  .waves-encounter-note p:not(.pixel-label) { max-width: none; }
}

@media (max-width: 680px) {
  .waves-field-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .waves-observation-notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .waves-page { padding-top: var(--space-5); }
  .waves-hero { margin-bottom: var(--space-6); }
  .waves-hero__copy { padding: var(--space-5); }
  .waves-hero__cta, .waves-closing__cta { align-self: stretch; min-width: 0; }
  .waves-instruction-card, .waves-boss-card, .waves-prep-card { padding: var(--space-5); }
  .waves-instruction-card__head { flex-direction: column; gap: var(--space-2); }
  .waves-two-step { grid-template-columns: minmax(0, 1fr); }
  .waves-action-strip { grid-template-columns: minmax(0, 1fr); }
  .waves-rail__inner { grid-template-columns: minmax(0, 1fr); }
  .waves-status-board, .waves-quick-jumps, .waves-rail-reminder, .waves-rail-cta { grid-column: 1; }
  .waves-status-board dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .waves-status-board dd { text-align: left; }
  .waves-lane-motif { width: 5rem; }
  .waves-lightbox { padding: var(--space-2); }
  .waves-lightbox__topline { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .waves-lightbox__close { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .waves-page { background-image: none; }
}