.home-page {
  background: var(--color-ink-950);
}

.home-page .section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.home-hero {
  padding-block-start: clamp(2rem, 4vw, 3rem) !important;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  gap: var(--space-6);
}

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

.home-hero__briefing {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-height: 32.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(24, 29, 43, .98), rgba(17, 21, 34, .95));
  box-shadow: inset 0 1px 0 rgba(242, 184, 75, .13);
}

.home-hero__briefing > * { min-width: 0; margin: 0; }
.home-hero__briefing h1 { max-width: 35rem; }
.home-hero__lead { max-width: 31.25rem; color: var(--color-moon-100); font-size: 1.125rem; font-weight: 600; line-height: 1.45; }
.home-hero__support { max-width: 32rem; color: var(--color-moon-300); }
.home-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-hero__actions > * { min-width: 0; width: min(100%, 11.875rem); }
.home-hero__play-meta { color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-hero__status { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 34rem; padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-hero__status span { color: var(--color-amber-400); }
.home-hero__media { align-self: stretch; margin: 0; }
.home-hero__media img { height: calc(100% - 2.5rem); min-height: 28rem; object-position: 72% center; filter: brightness(.8) saturate(.9); }
.home-hero__media figcaption { margin: 0; padding: var(--space-2) var(--space-3); }

.home-guides__intro { max-width: 32.5rem; }
.home-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-guides__grid > * { min-width: 0; width: 100%; }
.home-guide-card { display: flex; min-width: 0; gap: var(--space-3); min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.home-guide-card:hover { background: var(--color-ink-900); }
.home-guide-card__icon { flex: 0 0 1.35rem; color: var(--color-amber-400); font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.2; }
.home-guide-card__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: var(--space-3); }
.home-guide-card h3, .home-guide-card strong { margin: 0; }
.home-guide-card__body > span { color: var(--color-moon-300); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.home-guide-card strong { margin-top: auto; color: var(--color-amber-400); font-size: var(--font-size-small); }
.home-guide-card--shield .home-guide-card__icon { color: var(--color-teal-400); }
.home-guide-card--companions .home-guide-card__icon { color: var(--color-violet-300); }
.home-guide-card--shield:hover { border-color: var(--color-teal-400); }
.home-guide-card--companions:hover { border-color: var(--color-violet-300); }
.home-guide-card--gear:hover, .home-guide-card--potion:hover, .home-guide-card--route:hover { border-color: var(--color-amber-400); }

.home-route__intro { max-width: 38.75rem; }
.home-route__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-route__steps::before { position: absolute; z-index: 0; top: 1.25rem; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, var(--color-amber-400), var(--color-teal-400), var(--color-amber-400)); content: ""; transform-origin: left; }
.home-route__step { position: relative; z-index: 1; min-width: 0; width: 100%; padding-top: var(--space-6); }
.home-route__step > * { margin: 0; }
.home-route__step h3 { margin-top: var(--space-3); }
.home-route__step p { max-width: 19rem; color: var(--color-moon-300); }
.home-route__number { display: grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(242,184,75,.65); border-radius: 50%; background: var(--color-ink-950); color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }
.home-route__step--shield .home-route__number { border-color: rgba(56,197,178,.7); color: var(--color-teal-400); }
.home-route__tip { display: flex; max-width: 45rem; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--color-amber-400); background: var(--color-ink-900); }
.home-route__tip > * { min-width: 0; margin: 0; }
.home-route__tip p { color: var(--color-moon-300); }

.home-shield__intro { max-width: 38.75rem; }
.home-shield__panel { position: relative; display: grid; min-width: 0; width: 100%; min-height: 14rem; place-items: center; overflow: hidden; margin-top: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: radial-gradient(circle at center, rgba(56,197,178,.18), transparent 34%), linear-gradient(115deg, var(--color-ink-900), var(--color-ink-800)); }
.home-shield__panel > * { min-width: 0; }
.home-shield__core { z-index: 2; color: var(--color-teal-400); font-family: var(--font-heading); font-size: 5rem; line-height: 1; text-shadow: 0 0 22px rgba(56,197,178,.28); }
.home-shield__panel span { position: absolute; right: var(--space-5); bottom: var(--space-4); color: var(--color-moon-300); font-size: var(--font-size-meta); letter-spacing: .08em; text-transform: uppercase; }
.home-shield__arc { position: absolute; width: 14rem; height: 14rem; border: 2px solid transparent; border-top-color: var(--color-teal-400); border-right-color: rgba(56,197,178,.55); border-radius: 50%; }
.home-shield__arc--one { transform: rotate(-30deg); }
.home-shield__arc--two { width: 18rem; height: 18rem; border-top-color: rgba(56,197,178,.3); transform: rotate(110deg); }
.home-shield__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.home-shield__cards > * { min-width: 0; width: 100%; }
.home-shield__card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.home-shield__card > * { min-width: 0; margin: 0; }
.home-shield__card p { color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-shield__card a { margin-top: auto; font-size: var(--font-size-small); font-weight: 700; }
.home-shield__motif { color: var(--color-teal-400); font-family: var(--font-heading); font-size: 1.25rem; }
.home-shield__motif--amber { color: var(--color-amber-400); }

.home-potions__grid { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: var(--space-6); align-items: start; }
.home-potions__grid > * { min-width: 0; width: 100%; }
.home-potions__copy { grid-column: 2; grid-row: 1; max-width: 29.375rem; }
.home-potions__media { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.home-potions__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.84); }
.home-potions__media figcaption { padding-inline: var(--space-3); }
.home-potions__principles { display: grid; grid-column: 2; grid-row: 2; gap: var(--space-4); }
.home-potions__principles > * { min-width: 0; width: 100%; }
.home-potions__principles article { position: relative; padding-inline-start: 3.5rem; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.home-potions__principles article:last-child { padding-bottom: 0; border-bottom: 0; }
.home-potions__principles article > * { margin: 0; }
.home-potions__principles h3 { margin-bottom: var(--space-2); }
.home-potions__principles p { max-width: 27.5rem; color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-potions__principles span { position: absolute; top: 0; left: 0; color: var(--color-amber-400); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.home-potions__principles .home-potions__teal { color: var(--color-teal-400); }
.home-potions__principles em { color: var(--color-teal-400); font-style: normal; font-weight: 700; }

.home-gear__intro { max-width: 40rem; }
.home-gear__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-gear__grid > * { min-width: 0; width: 100%; }
.home-gear__card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.home-gear__card > * { min-width: 0; margin: 0; }
.home-gear__card p { color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-gear__card--weapon { border-top: 2px solid var(--color-amber-400); }
.home-gear__card--armor { border-top: 2px solid var(--color-teal-400); }
.home-gear__card--set { border-top: 2px solid var(--color-violet-300); }
.home-gear__warning { display: flex; max-width: 45rem; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--color-red-400); background: var(--color-ink-900); }
.home-gear__warning > * { min-width: 0; margin: 0; }
.home-gear__warning p { color: var(--color-moon-300); }

.home-sets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: center; }
.home-sets__grid > * { min-width: 0; width: 100%; }
.home-sets__copy { max-width: 29.375rem; }
.home-sets__synergy { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border-inline-start: 3px solid var(--color-teal-400); background: var(--color-ink-900); }
.home-sets__synergy > * { min-width: 0; margin: 0; }
.home-sets__synergy p { max-width: 26.875rem; color: var(--color-moon-300); font-size: var(--font-size-small); }
.home-sets__media { margin: 0; }
.home-sets__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 70% center; filter: brightness(.82); }
.home-sets__media figcaption { padding-inline: var(--space-3); }
.home-sets__media:hover img { filter: brightness(.95); }

.home-companions__intro { max-width: 35rem; }
.home-companions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-companions__grid > * { min-width: 0; width: 100%; }
.home-companions__card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.home-companions__card > * { min-width: 0; margin: 0; }
.home-companions__card p { max-width: 26.25rem; color: var(--color-moon-300); }
.home-companions__card a { margin-top: auto; font-size: var(--font-size-small); font-weight: 700; }
.home-companions__card--violet { border-inline-start: 3px solid var(--color-violet-300); }
.home-companions__card:hover { border-color: var(--color-violet-300); }
.home-companions__cta { margin-top: var(--space-5); }

.home-chooser__intro { max-width: 36.25rem; }
.home-chooser__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-chooser__grid > * { min-width: 0; width: 100%; }
.home-chooser__card { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.home-chooser__card > * { min-width: 0; margin: 0; }
.home-chooser__card > span { max-width: 17.5rem; color: var(--color-moon-300); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.home-chooser__card strong { margin-top: auto; color: var(--color-amber-400); font-size: var(--font-size-small); }
.home-chooser__card:hover { background: var(--color-ink-900); }
.home-chooser__card--route:hover, .home-chooser__card--potion:hover { border-color: var(--color-amber-400); }
.home-chooser__card--shield:hover { border-color: var(--color-teal-400); }
.home-chooser__card--gear:hover { border-color: var(--color-violet-300); }

.home-final__panel { display: flex; max-width: 73.75rem; flex-direction: column; gap: var(--space-4); padding: clamp(3rem, 6vw, 4rem); border: 1px solid rgba(242,184,75,.4); border-radius: var(--radius-lg); background: radial-gradient(circle at 90% 20%, rgba(242,184,75,.15), transparent 32%), linear-gradient(125deg, var(--color-ink-800), var(--color-ink-900)); box-shadow: inset 0 1px 0 rgba(255,210,122,.12); }
.home-final__panel > * { min-width: 0; margin: 0; }
.home-final__panel h2 { max-width: 37.5rem; }
.home-final__panel > p:not(.eyebrow):not(.home-final__more) { max-width: 37.5rem; color: var(--color-moon-300); }
.home-final__download { min-height: 3rem; width: fit-content; }
.home-final__more { color: var(--color-moon-300); font-size: var(--font-size-small); }

@media (max-width: 60rem) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__briefing { min-height: 0; }
  .home-hero__media img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-gear__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-gear__card--set { grid-column: 1 / 2; }
}

@media (max-width: 57.5rem) {
  .home-potions__grid { grid-template-columns: minmax(0, 1fr); }
  .home-potions__copy, .home-potions__media, .home-potions__principles { grid-column: 1; grid-row: auto; max-width: none; }
  .home-potions__copy { order: 1; }
  .home-potions__media { order: 2; }
  .home-potions__principles { order: 3; }
  .home-sets__grid { grid-template-columns: minmax(0, 1fr); }
  .home-sets__copy { max-width: none; }
}

@media (max-width: 56.25rem) {
  .home-route__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-route__steps::before { display: none; }
  .home-route__step { padding-top: 0; }
  .home-route__step:nth-child(3) { grid-column: 1 / 2; }
  .home-shield__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shield__card:nth-child(3) { grid-column: 1 / 2; }
}

@media (max-width: 51.25rem) {
  .home-companions__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.5rem) {
  .home-chooser__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .home-page .section { padding-block: 2.5rem; }
  .home-hero__briefing { padding: var(--space-5); }
  .home-hero__actions { flex-direction: column; }
  .home-hero__actions > * { width: 100%; }
  .home-hero__lead { font-size: 1rem; line-height: var(--line-height-body); }
  .home-guides__grid, .home-route__steps, .home-shield__cards, .home-gear__grid { grid-template-columns: minmax(0, 1fr); }
  .home-route__steps { gap: var(--space-5); padding-inline-start: var(--space-5); }
  .home-route__steps::after { position: absolute; top: 1.25rem; bottom: 1.25rem; left: .75rem; width: 1px; background: linear-gradient(var(--color-amber-400), var(--color-teal-400), var(--color-amber-400)); content: ""; }
  .home-route__step, .home-route__step:nth-child(3), .home-shield__card:nth-child(3), .home-gear__card--set { grid-column: 1; }
  .home-route__step { z-index: 1; }
  .home-route__tip, .home-gear__warning, .home-sets__synergy { flex-direction: column; }
  .home-shield__panel { min-height: 0; aspect-ratio: 16 / 7; }
  .home-shield__arc--two { width: 14rem; height: 14rem; }
  .home-sets__media img { aspect-ratio: 16 / 10; }
  .home-final__panel { padding: var(--space-5); }
  .home-final__download, .home-companions__cta { width: 100%; }
  .home-guide-card, .home-shield__card, .home-gear__card, .home-companions__card, .home-chooser__card { padding: var(--space-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-route__steps[data-route-drawn]::before { animation: home-route-draw 800ms ease-out both; }
  .home-shield__panel .home-shield__arc--one { animation: home-shield-pulse 2.4s ease-out both; }
}

@keyframes home-route-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes home-shield-pulse { from { opacity: .15; transform: rotate(-30deg) scale(.82); } to { opacity: 1; transform: rotate(-30deg) scale(1); } }
