.gameplay-guide {
  position: relative;
  padding-block: var(--space-6) var(--space-8);
  overflow: hidden;
  background-color: var(--color-arcade-charcoal);
  background-image: radial-gradient(circle at 8% 14%, rgb(255 248 221 / 28%) 0 1px, transparent 1.5px), radial-gradient(circle at 87% 7%, rgb(40 124 255 / 35%) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 41%, rgb(124 222 88 / 18%) 0 1px, transparent 1.5px);
}

.gameplay-guide::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgb(255 248 221 / 4%) 4px);
  content: "";
}

.gameplay-guide > * { position: relative; z-index: 1; }

.gg-hero { margin-bottom: var(--space-7); }
.gg-hero__inner { display: flex; align-items: center; gap: var(--space-6); }
.gg-hero__copy { flex: 0 1 42%; width: 42%; min-width: 0; max-width: 31.25rem; }
.gg-hero__copy > .section-marker { margin-bottom: var(--space-4); }
.gg-hero__deck { display: flex; flex-direction: column; gap: var(--space-5); }
.gg-hero__deck > * { min-width: 0; margin: 0; }
.gg-hero__deck p { max-width: 58ch; }
.gg-hero__cta { align-self: flex-start; }
.gg-hero__monitor { flex: 1 1 58%; width: 58%; min-width: 0; max-width: 38.75rem; margin: 0; }
.gg-hero__monitor img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gg-hero__monitor figcaption { max-width: 58ch; padding: var(--space-3) var(--space-4); background: var(--color-cabinet-black); }

.gg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); align-items: start; }
.gg-primary { width: 100%; min-width: 0; max-width: 47.5rem; }
.gg-section { min-width: 0; margin-bottom: var(--space-7); }
.gg-section > .section-marker { margin-bottom: var(--space-4); }
.gg-section > h2 { margin-bottom: var(--space-4); }

.gg-run__lead { max-width: 62ch; }
.gg-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.gg-step-card { width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-arcade-charcoal); border-left: 3px solid var(--color-electric-blue); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); box-shadow: var(--shadow-hard-small); }
.gg-step-card--green { border-left-color: var(--color-phosphor-green); }
.gg-step-card--red { border-left-color: var(--color-arcade-red); }
.gg-step-card__number { margin: 0 0 var(--space-3); font-size: 1.35rem; }
.gg-step-card h3 { font-size: 1rem; }
.gg-step-card p:last-child { margin-bottom: 0; }

.gg-movement__feature { display: flex; align-items: stretch; gap: var(--space-5); }
.gg-movement__figure { flex: 0 1 46%; width: 46%; min-width: 0; margin: 0; }
.gg-movement__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gg-movement__copy { flex: 1 1 54%; width: 54%; min-width: 0; max-width: 22.5rem; }
.gg-movement__copy p { max-width: 55ch; }
.gg-tactical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.gg-tactical-card { width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-arcade-charcoal); border-top: 3px solid var(--color-electric-blue); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); }
.gg-tactical-card--read { border-top-color: var(--color-phosphor-green); }
.gg-tactical-card--caution { border-top-color: var(--color-arcade-red); }
.gg-tactical-card__label { margin-bottom: var(--space-3); color: var(--color-electric-blue); }
.gg-tactical-card--read .gg-tactical-card__label { color: #438f2e; }
.gg-tactical-card--caution .gg-tactical-card__label { color: var(--color-arcade-red); }
.gg-tactical-card h3 { font-size: 1rem; }
.gg-tactical-card p:last-child { margin-bottom: 0; }

.gg-threats__lead { max-width: 62ch; }
.gg-priority-board { display: flex; flex-direction: column; gap: var(--space-3); }
.gg-priority-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-electric-blue); border-top-width: 3px; background: var(--color-cabinet-black); color: var(--color-warm-cream); }
.gg-priority-row__rank { width: 4.5rem; min-width: 0; margin: 0; font-size: 1.75rem; text-align: center; }
.gg-priority-row__copy { width: 100%; min-width: 0; }
.gg-priority-row__copy h3 { font-size: 1rem; }
.gg-priority-row__copy p { max-width: 66ch; margin-bottom: 0; }

.gg-formations__figure { width: 100%; min-width: 0; margin: 0 var(--space-0, 0) var(--space-5); }
.gg-formations__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gg-formations__figure figcaption { max-width: 66ch; }
.gg-formations__lead { width: 100%; min-width: 0; margin-bottom: var(--space-5); }
.gg-formations__lead p { max-width: 66ch; }
.gg-observation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.gg-observation-card { width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-arcade-charcoal); border-left: 3px solid var(--color-phosphor-green); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); }
.gg-observation-card:last-child { border-left-color: var(--color-electric-blue); }
.gg-observation-card > .pixel-label { margin-bottom: var(--space-3); color: #438f2e; }
.gg-observation-card:last-child > .pixel-label { color: var(--color-electric-blue); }
.gg-observation-card h3 { font-size: 1rem; }
.gg-observation-card p:last-child { margin-bottom: 0; }

.gg-upgrades__lead { margin-bottom: var(--space-5); }
.gg-upgrades__lead > .pixel-label { margin-bottom: var(--space-3); color: #438f2e; }
.gg-upgrades__lead p:last-child { max-width: 60ch; margin-bottom: 0; }
.gg-upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.gg-upgrade-card { width: 100%; min-width: 0; }
.gg-upgrade-card h3 { font-size: 1rem; }
.gg-upgrade-card p:last-child { margin-bottom: 0; }
.gg-upgrade-card__caution { color: var(--color-arcade-red); }

.gg-waves__feature { display: flex; align-items: stretch; gap: var(--space-5); }
.gg-waves__figure { flex: 0 1 54%; width: 54%; min-width: 0; margin: 0; }
.gg-waves__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gg-waves__copy { flex: 1 1 46%; width: 46%; min-width: 0; max-width: 21.25rem; }
.gg-waves__copy p { max-width: 52ch; }
.gg-wave-callouts { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.gg-boss-callout { width: 100%; min-width: 0; }
.gg-boss-callout > .pixel-label { margin-bottom: var(--space-3); color: var(--color-arcade-red); }
.gg-boss-callout h3, .gg-deep-callout h3 { font-size: 1rem; }
.gg-boss-callout p:last-child, .gg-deep-callout p:last-child { max-width: 56ch; margin-bottom: 0; }
.gg-deep-callout { width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-electric-blue); background: var(--color-cabinet-black); color: var(--color-warm-cream); }

.gg-checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.gg-check-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--space-4); width: 100%; min-width: 0; padding: var(--space-4); border: 2px solid var(--color-arcade-charcoal); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); }
.gg-check-row__number { width: 5.25rem; min-width: 0; margin: 0; font-size: 1.4rem; text-align: center; }
.gg-check-row__copy { width: 100%; min-width: 0; }
.gg-check-row__copy h3 { font-size: 1rem; }
.gg-check-row__copy p { max-width: 64ch; margin-bottom: 0; }

.gg-closing { margin-bottom: 0; }
.gg-closing__panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; min-width: 0; }
.gg-closing__panel > * { min-width: 0; margin: 0; }
.gg-closing__panel > .section-marker { margin: 0; }
.gg-closing__panel > p { max-width: 62ch; }
.gg-closing__cta { align-self: flex-start; }
.gg-closing__next { max-width: 48ch; }
.gg-closing__next a::before { content: "→ "; }

.gg-rail { width: 20rem; min-width: 0; }
.gg-rail__sticky { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; min-width: 0; position: sticky; top: 7rem; }
.gg-rail__sticky > .section-marker { margin: 0; }
.gg-rail__panel { width: 100%; min-width: 0; }
.gg-rail__panel > .pixel-label { margin-bottom: var(--space-3); }
.gg-rail__panel > .score-text { margin-bottom: var(--space-3); font-size: 1rem; }
.gg-rail__panel p:last-child { margin-bottom: 0; }
.gg-rail__caution { color: var(--color-arcade-red); }
.gg-route-card { width: 100%; min-width: 0; padding: var(--compact-padding); border: 2px solid var(--color-arcade-charcoal); border-left: 3px solid var(--color-electric-blue); background: var(--color-warm-cream); color: var(--color-arcade-charcoal); box-shadow: var(--shadow-hard-small); }
.gg-route-card h3 { font-size: 1rem; }
.gg-route-card p { margin-bottom: var(--space-3); }
.gg-route-card nav { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; min-width: 0; }
.gg-route-card nav a { width: 100%; min-width: 0; }

@media (max-width: 1040px) {
  .gg-hero__inner { align-items: flex-start; }
  .gg-hero__monitor { max-width: none; }
}

@media (max-width: 900px) {
  .gg-hero__inner { flex-direction: column; gap: var(--space-5); }
  .gg-hero__copy, .gg-hero__monitor { width: 100%; max-width: none; }
  .gg-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-5); }
  .gg-step-grid, .gg-tactical-grid, .gg-upgrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-step-card:last-child, .gg-tactical-card:last-child, .gg-upgrade-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .gg-layout { display: flex; flex-direction: column; gap: var(--space-6); }
  .gg-primary, .gg-rail { width: 100%; max-width: none; }
  .gg-rail { order: 0; }
  .gg-primary { order: 1; }
  .gg-rail__sticky { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .gg-rail__sticky > .section-marker { grid-column: 1 / -1; }
  .gg-rail__panel, .gg-route-card { height: 100%; }
}

@media (max-width: 700px) {
  .gg-movement__feature, .gg-waves__feature { flex-direction: column; gap: var(--space-4); }
  .gg-movement__figure, .gg-movement__copy, .gg-waves__figure, .gg-waves__copy { width: 100%; max-width: none; }
  .gg-observation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .gameplay-guide { padding-block: var(--space-5) var(--space-7); }
  .gameplay-guide::after { opacity: 0.55; }
  .gg-step-grid, .gg-tactical-grid, .gg-upgrade-grid, .gg-rail__sticky { grid-template-columns: 1fr; }
  .gg-step-card:last-child, .gg-tactical-card:last-child, .gg-upgrade-card:last-child, .gg-rail__sticky > .section-marker { grid-column: auto; }
  .gg-rail__sticky > .section-marker { margin-bottom: 0; }
  .gg-hero__deck, .gg-closing__panel { padding: var(--space-5); }
}

@media (max-width: 460px) {
  .gg-priority-row, .gg-check-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .gg-priority-row__rank, .gg-check-row__number { width: 100%; text-align: left; }
  .gg-priority-row { padding: var(--space-4); }
}

@media (max-width: 520px) {
  .gg-hero__cta, .gg-closing__cta { width: 100%; }
  .gg-hero__monitor figcaption { padding: var(--space-3); }
  .gg-section { margin-bottom: var(--space-6); }
}