.home-page {
  overflow: clip;
}

.home-page .container {
  width: min(100% - 2rem, var(--container-max));
}

.home-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--color-night-navy);
}

.home-hero::before {
  position: absolute;
  inset: auto 0 0;
  height: 7rem;
  background: repeating-linear-gradient(90deg, transparent 0 4rem, rgba(56, 214, 195, 0.12) 4rem 4.5rem, transparent 4.5rem 8rem);
  content: "";
  pointer-events: none;
}

.home-hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--space-5);
}

.home-hero__copy {
  display: flex;
  grid-column: 1 / span 5;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-hero__copy h1,
.home-hero__copy p,
.home-hero__copy .eyebrow {
  margin: 0;
}

.home-hero__copy h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.home-hero__lead {
  max-width: 52ch;
  font-size: var(--font-size-18);
  line-height: 1.5;
}

.home-hero__action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.home-hero__micro {
  max-width: 45ch;
  color: var(--color-muted-blue);
  font-size: var(--font-size-14);
}

.home-hero__independence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: 58ch;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-dark);
  border-radius: var(--radius-control);
  background: rgba(23, 30, 67, 0.85);
}

.home-hero__independence p {
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-14);
}

.home-hero__info-label,
.home-worlds__label,
.home-challenges__notice-label,
.home-portal__label {
  align-self: start;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-pixel);
  background: var(--color-pixel-turquoise);
  color: var(--color-night-navy);
  font-family: var(--font-heading);
  font-size: var(--font-size-12);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-hero__media {
  grid-column: 7 / span 6;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.home-hero__media img {
  width: 100%;
  min-height: 24rem;
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  object-fit: cover;
  object-position: 68% center;
}

.home-paths,
.home-worlds,
.home-modes {
  padding-block: var(--section-space);
}

.home-paths__intro,
.home-characters__intro,
.home-challenges__intro,
.home-modes__intro,
.home-portal__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.home-paths__intro {
  width: min(100%, 60ch);
  margin-bottom: var(--space-7);
}

.home-paths__intro h2,
.home-paths__intro p,
.home-characters__intro h2,
.home-characters__intro p,
.home-challenges__intro h2,
.home-modes__intro h2,
.home-portal__intro h2 {
  margin: 0;
}

.home-paths__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-path-card {
  display: flex;
  grid-column: span 3;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
  color: var(--color-paper-light);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.home-path-card:hover,
.home-path-card:focus-visible {
  border-color: var(--color-neon-lime);
  box-shadow: var(--shadow-block);
  color: var(--color-paper-light);
  transform: translateY(-2px);
}

.home-path-card h3,
.home-path-card p,
.home-path-card .tag {
  margin: 0;
}

.home-path-card p {
  max-width: 36ch;
  font-size: var(--font-size-14);
}

.home-path-card__marker {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pixel);
  background: var(--color-neon-lime);
  color: var(--color-night-navy);
  font-family: var(--font-heading);
  font-size: var(--font-size-12);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-path-card__link {
  margin-top: auto;
  color: var(--color-pixel-turquoise);
  font-family: var(--font-heading);
  font-size: var(--font-size-14);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-path-card--wide {
  grid-column: span 6;
}

.home-path-card--wide p {
  max-width: 52ch;
}

.home-paths__pattern {
  display: grid;
  grid-column: span 6;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: var(--space-3);
  border: var(--border-light);
  border-radius: var(--radius-card);
  background: repeating-linear-gradient(90deg, rgba(23, 30, 67, 0.06) 0 2rem, transparent 2rem 4rem);
}

.home-paths__pattern > span {
  min-width: 0;
  align-self: center;
  height: 1rem;
  background: var(--color-pixel-turquoise);
}

.home-paths__pattern > span:nth-child(2) {
  background: var(--color-lavender-purple);
}

.home-paths__pattern > span:nth-child(3) {
  background: var(--color-neon-lime);
}

.home-observe {
  background: var(--color-night-navy);
}

.home-observe__heading {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.home-observe__heading > div,
.home-observe__heading > p {
  min-width: 0;
}

.home-observe__heading > div {
  grid-column: 1 / span 5;
}

.home-observe__heading > p {
  grid-column: 7 / span 5;
  max-width: 58ch;
  margin: 0;
  color: var(--color-muted-blue);
  font-size: var(--font-size-18);
}

.home-observe__heading .eyebrow,
.home-observe__heading h2 {
  margin: 0;
}

.home-observe__heading > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-observe__steps,
.home-challenges__steps,
.home-portal__rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-step,
.home-challenge-card,
.home-rule {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.home-step h3,
.home-step p,
.home-challenge-card h3,
.home-challenge-card p,
.home-rule h3,
.home-rule p {
  margin: 0;
}

.home-step p,
.home-challenge-card p,
.home-rule p {
  max-width: 40ch;
}

.home-step__number,
.home-tip__number {
  font-family: var(--font-heading);
  font-size: var(--font-size-32);
  font-weight: 800;
  line-height: 1;
}

.home-step--turquoise .home-step__number { color: var(--color-pixel-turquoise); }
.home-step--lime .home-step__number { color: var(--color-neon-lime); }
.home-step--coral .home-step__number { color: var(--color-coral-orange); }

.home-observe__more,
.home-challenges__more {
  margin: var(--space-6) 0 0;
}

.home-worlds__grid {
  display: grid;
  align-items: center;
  gap: var(--space-5);
}

.home-worlds__copy {
  display: flex;
  grid-column: 1 / span 5;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-worlds__copy > .eyebrow,
.home-worlds__copy > h2,
.home-worlds__observation h3,
.home-worlds__observation p,
.home-worlds__observation .home-worlds__label {
  margin: 0;
}

.home-worlds__observation {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.home-worlds__observation p {
  max-width: 48ch;
}

.home-worlds__observation--warning {
  padding: var(--space-4);
  border-inline-start: 4px solid var(--color-coral-orange);
  background: rgba(255, 118, 87, 0.08);
}

.home-worlds__label {
  background: var(--color-coral-orange);
}

.home-worlds__media {
  grid-column: 7 / span 6;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.home-worlds__media img,
.home-tips__media img {
  width: 100%;
  border: var(--border-light);
  border-radius: var(--radius-panel);
  object-fit: cover;
}

.home-worlds__media img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

.home-characters__intro {
  margin-bottom: var(--space-7);
}

.home-characters__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-character-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-light);
  border-radius: var(--radius-card);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
}

.home-character-card h3,
.home-character-card p,
.home-character-card .tag { margin: 0; }
.home-character-card--warning { border-inline-start: 4px solid var(--color-coral-orange); }

.home-characters__note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.home-characters__note h3,
.home-characters__note p { margin: 0; }

.home-challenges {
  background: var(--color-night-navy);
}

.home-challenges__intro {
  width: min(100%, 56ch);
  margin-bottom: var(--space-7);
}

.home-challenge-card__letter {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
}

.home-challenge-card--coral .home-challenge-card__letter { color: var(--color-coral-orange); }
.home-challenge-card--turquoise .home-challenge-card__letter { color: var(--color-pixel-turquoise); }
.home-challenge-card--lime .home-challenge-card__letter { color: var(--color-neon-lime); }

.home-challenges__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: min(100%, 58ch);
  min-width: 0;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-dark);
  border-inline-start: 4px solid var(--color-coral-orange);
  border-radius: var(--radius-control);
  background: var(--color-deep-navy);
}

.home-challenges__notice-label { background: var(--color-coral-orange); }
.home-challenges__notice p { min-width: 0; margin: 0; }

.home-modes__intro {
  width: min(100%, 60ch);
  margin-bottom: var(--space-7);
}

.home-modes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-mode-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
  color: var(--color-paper-light);
}

.home-mode-card h3,
.home-mode-card p,
.home-mode-card .tag { margin: 0; }
.home-mode-card p { max-width: 42ch; }
.home-mode-card--multiplayer { border-top: 4px solid var(--color-lavender-purple); }
.home-mode-card--offline { border-top: 4px solid var(--color-pixel-turquoise); }

.home-modes__note {
  display: flex;
  width: min(100%, 68ch);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-light);
  border-radius: var(--radius-card);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
}

.home-modes__note h3,
.home-modes__note p { margin: 0; }

.home-tips { background: var(--color-night-navy); }

.home-tips__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-6);
}

.home-tips__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-tips__copy > .eyebrow,
.home-tips__copy > h2 { margin: 0; }

.home-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-dark);
}

.home-tip > div { min-width: 0; }
.home-tip h3,
.home-tip p { margin: 0; }
.home-tip > div { display: flex; flex-direction: column; gap: var(--space-3); }
.home-tip p { max-width: 42ch; }
.home-tip:nth-of-type(3) .home-tip__number { color: var(--color-pixel-turquoise); }
.home-tip:nth-of-type(4) .home-tip__number { color: var(--color-lavender-purple); }

.home-tips__action { min-width: 0; }
.home-tips__media { width: 100%; min-width: 0; margin: 0; }
.home-tips__media img { min-height: 28rem; aspect-ratio: 4 / 3; object-position: center; }

.home-portal__intro {
  width: min(100%, 56ch);
  margin-bottom: var(--space-7);
}

.home-rule {
  background: var(--color-ink-blue);
}

.home-rule--lime { border-top: 4px solid var(--color-neon-lime); }
.home-rule--turquoise { border-top: 4px solid var(--color-pixel-turquoise); }
.home-rule--purple { border-top: 4px solid var(--color-lavender-purple); }

.home-portal__independence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: min(100%, 60ch);
  min-width: 0;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-night-navy);
}

.home-portal__independence p { min-width: 0; margin: 0; }
.home-portal__label { background: var(--color-lavender-purple); }

.home-final {
  padding-block: var(--section-space);
  background: var(--color-night-navy);
}

.home-final__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-width: 0;
  gap: var(--space-5);
  padding: clamp(1.5rem, 5vw, 4rem);
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  background: var(--color-deep-navy);
}

.home-final__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.home-final__copy h2,
.home-final__copy p,
.home-final__copy .eyebrow { margin: 0; }
.home-final__copy h2 { max-width: 18ch; }
.home-final__copy p { max-width: 50ch; }

.home-final__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.home-final__links {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-final__marker {
  position: relative;
  min-width: 0;
  min-height: 13rem;
  overflow: hidden;
  border: 1px dashed var(--color-pixel-turquoise);
  background: repeating-linear-gradient(90deg, transparent 0 2.5rem, rgba(199, 243, 74, 0.14) 2.5rem 3rem, transparent 3rem 5rem);
}

.home-final__marker span,
.home-final__marker i,
.home-final__marker b {
  position: absolute;
  display: block;
  width: 3rem;
  height: 3rem;
  background: var(--color-neon-lime);
}

.home-final__marker span { top: 22%; left: 32%; }
.home-final__marker i { right: 14%; bottom: 17%; background: var(--color-pixel-turquoise); }
.home-final__marker b { top: 47%; right: 38%; width: 1rem; height: 1rem; background: var(--color-paper-light); }

@media (max-width: 67.5rem) {
  .home-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-path-card,
  .home-path-card--wide { grid-column: span 1; }
  .home-paths__pattern { display: none; }
}

@media (max-width: 62.5rem) {
  .home-hero__grid,
  .home-worlds__grid,
  .home-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero__copy,
  .home-worlds__copy { grid-column: 1; }
  .home-hero__media,
  .home-worlds__media { grid-column: 2; }
  .home-tips__copy,
  .home-tips__media { grid-column: span 2; }
  .home-tips__media img { min-height: 20rem; }
  .home-observe__steps,
  .home-challenges__steps,
  .home-portal__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-observe__steps > :last-child,
  .home-challenges__steps > :last-child,
  .home-portal__rules > :last-child { grid-column: span 2; }
}

@media (max-width: 53.75rem) {
  .home-final__panel { grid-template-columns: minmax(0, 1fr); }
  .home-final__marker { min-height: 5rem; }
}

@media (max-width: 47.5rem) {
  .home-hero__grid,
  .home-worlds__grid,
  .home-tips__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__copy,
  .home-hero__media,
  .home-worlds__copy,
  .home-worlds__media,
  .home-tips__copy,
  .home-tips__media { grid-column: 1; }
  .home-hero__media { order: 2; }
  .home-hero__media img { min-height: 13rem; aspect-ratio: 16 / 10; }
  .home-worlds__media { order: 2; }
  .home-worlds__copy { order: 1; }
  .home-tips__media { order: 2; }
  .home-tips__media img { min-height: 13.75rem; }
  .home-observe__heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .home-observe__heading > div,
  .home-observe__heading > p { grid-column: 1; }
  .home-observe__steps,
  .home-challenges__steps,
  .home-portal__rules,
  .home-modes__grid,
  .home-characters__cards { grid-template-columns: minmax(0, 1fr); }
  .home-observe__steps > :last-child,
  .home-challenges__steps > :last-child,
  .home-portal__rules > :last-child { grid-column: 1; }
  .home-characters__cards,
  .home-characters__note { width: 100%; max-width: none; }
  .home-paths__grid { grid-template-columns: minmax(0, 1fr); }
  .home-path-card,
  .home-path-card--wide { grid-column: 1; }
}

@media (max-width: 42.5rem) {
  .home-page .container { width: min(100% - 2rem, var(--container-max)); }
  .home-hero { padding-block: var(--space-7); }
  .home-hero__copy h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .home-hero__lead { font-size: var(--font-size-18); }
  .home-hero__independence,
  .home-challenges__notice,
  .home-portal__independence { grid-template-columns: minmax(0, 1fr); }
  .home-step,
  .home-challenge-card,
  .home-rule,
  .home-mode-card,
  .home-character-card { padding: var(--space-5); }
  .home-modes__note { padding: var(--space-5); }
  .home-tip { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .home-final__panel { padding: var(--space-5); }
  .home-final__actions,
  .home-final__actions .button { width: 100%; }
  .home-final__links { flex-direction: column; align-items: flex-start; }
  .home-final__marker { position: absolute; top: 1rem; right: 1rem; width: 2rem; min-height: 2rem; border: 0; background: transparent; }
  .home-final__marker span { top: 0; left: 0; width: 1rem; height: 1rem; }
  .home-final__marker i { right: 0; bottom: 0; width: 0.75rem; height: 0.75rem; }
  .home-final__marker b { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__media img { animation: home-pixel-drift 5s ease-in-out infinite alternate; }
  .home-final__marker span { animation: home-marker-pulse 1.8s ease-in-out infinite alternate; }
}

@keyframes home-pixel-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes home-marker-pulse {
  from { transform: translate(0, 0); }
  to { transform: translate(3px, -2px); }
}