.arcade-library-page {
  padding-block-end: var(--space-10);
}

.arcade-library-page section[id] {
  scroll-margin-top: 7rem;
}

.library-hero {
  padding-block: var(--space-10) var(--space-9);
}

.library-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 4.3fr);
  align-items: center;
  gap: var(--space-8);
}

.library-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 40rem;
  gap: var(--space-4);
}

.library-hero__copy > * {
  margin: 0;
}

.library-hero__lead {
  max-width: 40rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.library-hero__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: min(100%, 32.5rem);
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-electric-blue);
  background: var(--color-graphite-800);
  color: var(--color-cream-200);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.library-hero__notice strong {
  color: var(--color-electric-blue);
  font-family: var(--font-heading);
}

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

.library-hero__actions > * { margin: 0; }

.library-hero__microcopy {
  max-width: 34rem;
  color: var(--color-cream-400);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.library-hero__art {
  width: 100%;
  min-width: 0;
  max-width: 26.875rem;
  justify-self: end;
  margin: 0;
}

.library-hero__art img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.library-hero__art figcaption { margin: var(--space-2) var(--space-2) 0; }

.library-glance { background: var(--color-graphite-900); }

.library-glance__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.library-glance__heading > * { margin: 0; }

.library-glance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.library-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-3);
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-line-dark);
}

.library-fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
.library-fact > * { margin: 0; }
.library-fact h3 { font-size: var(--text-xl); }
.library-fact p { color: var(--color-cream-400); }
.library-fact__score { color: var(--color-arcade-yellow); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; text-transform: uppercase; }

.genre-hall__intro,
.label-workshop__intro,
.first-route__intro,
.library-paths__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-3);
  max-width: 41.25rem;
  margin-block-end: var(--space-6);
}

.genre-hall__intro > *,
.label-workshop__intro > *,
.first-route__intro > *,
.library-paths__intro > * { margin: 0; }

.genre-hall__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.genre-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border: 2px solid var(--genre-accent);
  background: var(--color-graphite-900);
  box-shadow: var(--shadow-cabinet);
}

.genre-card--platformer { --genre-accent: var(--color-electric-blue); }
.genre-card--shooter { --genre-accent: var(--color-cherry-red); }
.genre-card--puzzle { --genre-accent: var(--color-restrained-magenta); }

.genre-card__media { width: 100%; min-width: 0; margin: 0; padding: var(--space-2); border-block-end: 1px solid var(--color-line-dark); }
.genre-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.genre-card__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-3); padding: var(--space-5); }
.genre-card__body > * { margin: 0; }
.genre-card__body h3 { font-size: var(--text-xl); }
.genre-card__guide { color: var(--color-cream-400); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.genre-card__link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block-start: auto; color: var(--color-cream-200); font-weight: 700; }
.genre-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-graphite-950); }

.variation-section { background: var(--color-graphite-800); }
.variation-panel { padding: var(--space-8); border: 2px solid var(--color-line-light); box-shadow: var(--shadow-offset); }
.variation-panel__intro { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 45rem; gap: var(--space-3); margin-block-end: var(--space-7); }
.variation-panel__intro > * { margin: 0; }
.variation-panel__intro .eyebrow { color: var(--text-muted-on-light); }
.variation-panel__notes { display: grid; grid-template-columns: 6rem minmax(0, 45rem); min-width: 0; row-gap: var(--space-5); }
.variation-note { display: grid; grid-column: 1 / -1; grid-template-columns: 6rem minmax(0, 1fr); min-width: 0; gap: var(--space-4); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-line-light); }
.variation-note:last-child { padding-block-end: 0; border-block-end: 0; }
.variation-note__number { color: var(--color-graphite-800); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.variation-note div { min-width: 0; }
.variation-note h3 { margin-block-end: var(--space-3); font-size: var(--text-xl); }
.variation-note p { margin: 0; }

.label-workshop { background: var(--color-graphite-900); }
.label-workshop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.label-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-3); padding: var(--space-5); border: var(--border-light); border-radius: var(--radius-md); }
.label-card > * { margin: 0; }
.label-card h3 { font-size: var(--text-xl); }
.label-card__swatches { display: flex; gap: var(--space-2); min-height: 2rem; align-items: center; }
.label-card__swatches i { width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-graphite-950); }
.label-card__swatches i:nth-child(1) { background: var(--color-electric-blue); }
.label-card__swatches i:nth-child(2) { background: var(--color-restrained-magenta); }
.label-card__swatches i:nth-child(3) { background: var(--color-retro-green); }
.label-card__scale { min-height: 2rem; color: var(--color-graphite-950); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; line-height: 2rem; text-transform: uppercase; }
.label-card__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; min-height: 2rem; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); }
.label-card__split b { display: flex; align-items: center; min-width: 0; padding: var(--space-1); border-block-end: 2px solid var(--color-arcade-yellow); }
.label-workshop__next { max-width: 40.625rem; margin: var(--space-6) 0 0; color: var(--color-cream-400); }

.first-route { background: var(--color-graphite-800); }
.first-route__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.route-step { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; gap: var(--space-4); padding: var(--space-5); border: var(--border-light); border-radius: var(--radius-md); background: var(--color-cream-50); color: var(--color-graphite-950); }
.route-step__number { color: var(--color-graphite-800); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; }
.route-step div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-3); }
.route-step div > * { margin: 0; }
.route-step h3 { font-size: var(--text-xl); }
.route-step__instruction { padding: var(--space-2); border: 1px dashed var(--color-line-light); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
.first-route__callout { width: min(100%, 47.5rem); margin: var(--space-6) 0 0; }
.first-route__callout h3 { margin-block-end: var(--space-3); }

.verification-panel { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--space-7); padding: var(--space-7); }
.verification-panel__copy,
.verification-panel__check { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-4); }
.verification-panel__copy > *,
.verification-panel__check > * { margin: 0; }
.verification-panel__copy { max-width: 32.5rem; }
.verification-panel__check { max-width: 26.25rem; }
.verification-panel__check h3 { font-size: var(--text-xl); }
.verification-panel__check ul { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.verification-panel__check li { position: relative; min-width: 0; padding-inline-start: var(--space-5); }
.verification-panel__check li::before { position: absolute; inset-inline-start: 0; color: var(--color-retro-green); content: "✓"; font-weight: 700; }

.library-paths { background: var(--color-graphite-900); }
.library-paths__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.path-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-3); padding: var(--space-5); border: var(--border-light); border-radius: var(--radius-md); }
.path-card > * { margin: 0; }
.path-card h3 { font-size: var(--text-xl); }
.path-card a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block-start: auto; font-weight: 700; }
.path-card--dark { background: var(--color-graphite-800); color: var(--color-cream-200); border-color: var(--color-line-dark); }
.path-card--dark a { color: var(--color-cream-200); }
.library-paths__clarification { margin: var(--space-6) 0 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line-dark); color: var(--color-cream-400); font-size: var(--text-sm); line-height: var(--leading-sm); }

@media (max-width: 67.49rem) {
  .label-workshop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 59.99rem) {
  .library-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .library-hero__copy { max-width: 43.75rem; }
  .library-hero__art { max-width: 42.5rem; justify-self: start; }
  .genre-hall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-card--puzzle { grid-column: 1 / -1; }
}

@media (max-width: 53.74rem) {
  .first-route__grid { grid-template-columns: minmax(0, 1fr); }
  .verification-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .verification-panel__copy,
  .verification-panel__check { max-width: none; }
}

@media (max-width: 47.49rem) {
  .library-glance__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .library-fact,
  .library-fact:first-child { padding: var(--space-4) 0; border-block-end: 1px solid var(--color-line-dark); border-inline-start: 0; }
  .library-fact:last-child { border-block-end: 0; }
  .variation-panel { padding: var(--space-5); }
  .variation-panel__notes { grid-template-columns: minmax(0, 1fr); }
  .variation-note { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

@media (max-width: 39.99rem) {
  .library-hero { padding-block-start: var(--space-8); }
  .library-hero__copy { gap: var(--space-3); }
  .library-hero__notice { grid-template-columns: minmax(0, 1fr); }
  .library-hero__actions .button,
  .verification-panel__check .button { width: min(100%, 22.5rem); }
  .library-hero__art { padding: var(--space-1); }
  .library-hero__art img { aspect-ratio: 4 / 3; }
  .genre-hall__grid,
  .label-workshop__grid,
  .library-paths__grid { grid-template-columns: minmax(0, 1fr); }
  .genre-card--puzzle { grid-column: auto; }
  .genre-card__body,
  .label-card,
  .route-step,
  .path-card { padding: var(--space-4); }
  .variation-panel__intro { margin-block-end: var(--space-5); }
  .verification-panel { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .genre-card:hover { transform: none; box-shadow: var(--shadow-cabinet); }
}