.guide-page {
  --guide-panel: #17101f;
  --guide-panel-soft: #1d1428;
  --guide-purple: #aa42ff;
  background:
    radial-gradient(circle at 80% 18%, rgba(125, 49, 200, .12), transparent 30%),
    var(--ink);
}

.guide-shell {
  width: min(var(--max), calc(100% - 64px));
  margin-inline: auto;
}

.guide-header .brand { width: 104px; }

.guide-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(920px, 100svh);
  padding: 150px 0 86px;
  overflow: hidden;
  isolation: isolate;
}

.guide-hero__image {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: url("../assets/world/magic-sigil-drawing.png") 62% center / cover no-repeat;
  transform: scale(1.01);
}

.guide-hero__glow {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 6, 13, .98) 0%, rgba(8, 6, 13, .82) 34%, rgba(8, 6, 13, .12) 70%),
    linear-gradient(0deg, var(--ink) 0%, transparent 26%, rgba(8, 6, 13, .18) 100%);
}

.guide-hero__content { padding-bottom: 2vh; }

.guide-hero h1 {
  max-width: 920px;
  font-size: clamp(70px, 7.5vw, 112px);
  line-height: .92;
}

.guide-hero__copy {
  max-width: 570px;
  margin: 28px 0 0;
  color: #c9c0d2;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.52;
}

.guide-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
}

.guide-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .36);
}

.guide-arrow-link span { color: var(--lime); }

.guide-section { padding: 124px 0; }

.guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .56fr);
  column-gap: 72px;
  align-items: end;
}

.guide-heading .eyebrow { grid-column: 1 / -1; }

.guide-heading h2 {
  max-width: 820px;
  font-size: clamp(58px, 6.3vw, 90px);
  line-height: .96;
}

.guide-heading > p:last-child {
  max-width: 500px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.58;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0;
  margin: 64px 0 0;
  list-style: none;
}

.setup-card {
  position: relative;
  min-height: 390px;
  padding: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(125, 49, 200, .2), transparent 42%),
    var(--guide-panel);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.setup-card::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -88px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(211, 244, 0, .16);
  border-radius: 50%;
}

.setup-card--warning {
  background:
    linear-gradient(160deg, rgba(255, 79, 186, .13), transparent 48%),
    var(--guide-panel);
  border-color: rgba(255, 79, 186, .45);
}

.setup-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setup-card__number {
  color: var(--pink);
  font: 400 46px/1 Anton, sans-serif;
}

.setup-card__icon {
  display: grid;
  width: 58px;
  height: 58px;
  color: var(--lime);
  background: rgba(211, 244, 0, .08);
  border: 1px solid rgba(211, 244, 0, .2);
  border-radius: 50%;
  place-items: center;
}

.setup-card__icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.setup-card__icon--asset img {
  width: 29px;
  height: 29px;
}

.setup-card h3 {
  margin-top: 42px;
  font-size: 38px;
}

.setup-card > p {
  margin: 18px 0 0;
  color: #bdb3ca;
  font-size: 17px;
  line-height: 1.58;
}

.setup-card strong { color: #fff; }

.setup-card__note {
  display: block;
  margin-top: 24px;
  color: #fff;
  font-weight: 600;
  line-height: 1.45;
}

.kit-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.kit-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  color: #fff;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  font: 700 11px/1 "Space Mono", monospace;
  text-transform: uppercase;
}

.kit-list img { width: 22px; height: 22px; }

.guide-loop {
  position: relative;
  min-height: 920px;
  padding: 118px 0 102px;
  overflow: hidden;
  isolation: isolate;
}

.guide-loop__image {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: url("../assets/world/quest-sequence.png") center / cover no-repeat;
}

.guide-loop__shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 7, 14, .95) 0%, rgba(9, 7, 14, .62) 48%, rgba(9, 7, 14, .18)),
    linear-gradient(0deg, rgba(9, 7, 14, .98) 0%, rgba(9, 7, 14, .48) 42%, rgba(9, 7, 14, .2) 72%, rgba(9, 7, 14, .7) 100%);
}

.guide-heading--light { width: min(800px, 68%); display: block; }
.guide-heading--light > p:last-child { margin-top: 26px; }

.loop-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0;
  margin: 240px 0 0;
  list-style: none;
}

.loop-step {
  min-height: 290px;
  padding: 28px;
  background: rgba(14, 10, 22, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  backdrop-filter: blur(14px);
}

.loop-step > span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  color: #121016;
  background: var(--lime);
  border-radius: 50%;
  font: 700 12px/1 "Space Mono", monospace;
  place-items: center;
}

.loop-step h3 {
  margin-top: 34px;
  font-size: 29px;
  line-height: 1;
}

.loop-step p {
  margin: 15px 0 0;
  color: #bfb6c9;
  line-height: 1.5;
}

.loop-step__image {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-top: 22px;
}

.guide-skills { background: var(--ink-deep); }
.guide-skills .guide-heading { display: block; }

.skill-guide {
  display: grid;
  grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr);
  gap: 66px;
  align-items: center;
  margin-top: 78px;
}

.skill-guide + .skill-guide { margin-top: 110px; }

.skill-guide--physical { grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr); }
.skill-guide--physical .skill-guide__image { grid-column: 2; }
.skill-guide--physical .skill-guide__content { grid-column: 1; grid-row: 1; }

.skill-guide__image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 79, 186, .17), transparent 44%),
    linear-gradient(145deg, #191120, #0d0a12);
  border: 1px solid var(--line);
  border-radius: 26px;
}

.skill-guide__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 6, 12, .78), transparent 45%);
}

.skill-guide__image > img {
  top: 50%;
  left: 50%;
  width: calc(100% - 64px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48);
  transform: translate(-50%, -55%);
}

.skill-guide__label {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 24px;
  font: 400 52px/1 Anton, sans-serif;
  text-transform: uppercase;
}

.skill-guide__content .eyebrow { margin-bottom: 16px; }

.skill-guide__content h3 {
  max-width: 650px;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
}

.skill-guide__content > p:not(.eyebrow) {
  max-width: 630px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
}

.skill-guide__steps {
  display: grid;
  gap: 13px;
  padding: 0;
  margin: 32px 0 0;
  list-style: none;
}

.skill-guide__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ddd6e5;
  line-height: 1.45;
}

.skill-guide__steps span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--ink);
  background: var(--pink);
  border-radius: 50%;
  font: 700 12px/1 "Space Mono", monospace;
  place-items: center;
}

.skill-guide--physical .skill-guide__steps span { background: var(--lime); }

.skill-cost {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.skill-cost small {
  color: var(--muted);
  font: 400 10px/1 "Space Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skill-cost strong { color: #fff; text-transform: uppercase; }

.combat-guide {
  background:
    radial-gradient(circle at 100% 20%, rgba(255, 79, 186, .11), transparent 34%),
    var(--ink);
}

.combat-intro {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .65fr);
  column-gap: 80px;
  align-items: end;
}

.combat-intro .eyebrow { grid-column: 1 / -1; }

.combat-intro h2 {
  font-size: clamp(62px, 7vw, 96px);
  line-height: .94;
}

.combat-intro > p:last-child {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.58;
}

.combat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 68px;
}

.combat-choice {
  display: grid;
  min-height: 210px;
  padding: 20px;
  background: var(--guide-panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  place-items: center;
}

.combat-choice--skip {
  background: rgba(255, 79, 186, .09);
  border-color: rgba(255, 79, 186, .52);
}

.combat-choice__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.combat-choice__visual img:first-child { width: 42px; height: 52px; }
.combat-choice__visual img:last-child { width: 42px; height: 56px; }

.combat-choice strong {
  font: 700 12px/1.2 "Space Mono", monospace;
  text-transform: uppercase;
}

.dodge-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: #d8d0e0;
}

.dodge-note__mark {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--lime);
  border: 1px solid rgba(211, 244, 0, .5);
  border-radius: 50%;
  font: 700 16px/1 "Space Mono", monospace;
  place-items: center;
}

.dodge-note h3 { color: #fff; font-size: 22px; }
.dodge-note p { margin: 5px 0 0; color: var(--muted); font-size: 15px; }

.practice-band {
  padding: 80px 0;
  background:
    linear-gradient(90deg, rgba(14, 10, 22, .98), rgba(14, 10, 22, .76)),
    url("../assets/world/friends-wills-adventure-wide.png") center 58% / cover no-repeat;
  border-top: 1px solid var(--line);
}

.practice-band__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}

.practice-band__copy {
  display: flex;
  align-items: center;
  gap: 26px;
}

.practice-band__icon {
  display: grid;
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  margin-top: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  place-items: center;
}

.practice-band__icon img { width: 58px; height: auto; }

.practice-band h2 { font-size: clamp(48px, 5vw, 70px); }

.practice-band p:not(.eyebrow) {
  max-width: 650px;
  margin: 18px 0 0;
  color: #c7bdcf;
  font-size: 18px;
  line-height: 1.55;
}

.practice-band .button { flex: 0 0 auto; }
.guide-footer { border-top: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 1040px) {
  .guide-heading { column-gap: 48px; }
  .setup-card { min-height: 430px; padding: 25px; }
  .loop-steps { margin-top: 180px; }
  .skill-guide, .skill-guide--physical { gap: 44px; }
  .combat-grid { grid-template-columns: repeat(3, 1fr); }
  .combat-choice--skip { grid-column: 2; }
}

@media (max-width: 760px) {
  .guide-shell { width: min(100% - 40px, var(--max)); }
  .guide-header .brand { width: 82px; }

  .guide-hero {
    min-height: max(720px, 100svh);
    padding: 112px 0 48px;
  }

  .guide-hero__image { background-position: 68% center; }
  .guide-hero__glow {
    background:
      linear-gradient(0deg, var(--ink) 0%, rgba(9, 7, 14, .92) 33%, rgba(9, 7, 14, .22) 73%, rgba(9, 7, 14, .5) 100%),
      linear-gradient(90deg, rgba(9, 7, 14, .68), transparent 75%);
  }

  .guide-hero h1 { max-width: none; font-size: clamp(48px, 13vw, 62px); }
  .guide-hero__copy { max-width: 32ch; margin-top: 22px; font-size: 16px; }
  .guide-hero__actions { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 28px; }

  .guide-section { padding: 82px 0; }
  .guide-heading, .combat-intro { display: block; }
  .guide-heading h2, .combat-intro h2 { font-size: clamp(48px, 13vw, 62px); }
  .guide-heading > p:last-child, .combat-intro > p:last-child { margin-top: 22px; font-size: 17px; }

  .setup-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 42px; }
  .setup-card { min-height: 0; padding: 24px; }
  .setup-card h3 { margin-top: 30px; font-size: 34px; }
  .setup-card__number { font-size: 40px; }

  .guide-loop { min-height: 0; padding: 82px 0; }
  .guide-loop__image { background-position: 33% center; }
  .guide-heading--light { width: 100%; }
  .loop-steps { grid-template-columns: 1fr; gap: 10px; margin-top: 180px; }
  .loop-step { min-height: 0; padding: 23px; }
  .loop-step h3 { margin-top: 24px; }

  .skill-guide, .skill-guide--physical {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 52px;
  }

  .skill-guide + .skill-guide { margin-top: 84px; }
  .skill-guide--physical .skill-guide__image { grid-column: 1; }
  .skill-guide--physical .skill-guide__content { grid-column: 1; grid-row: 2; }
  .skill-guide__image { min-height: 480px; }
  .skill-guide__content h3 { font-size: clamp(42px, 12vw, 56px); }
  .skill-guide__content > p:not(.eyebrow) { font-size: 17px; }
  .skill-cost { align-items: flex-start; flex-direction: column; }

  .combat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 42px; }
  .combat-choice { min-height: 170px; padding: 16px; }
  .combat-choice--skip { grid-column: 1 / -1; }
  .combat-choice__visual { width: auto; height: auto; border-radius: 0; }
  .dodge-note { align-items: flex-start; padding: 22px; }

  .practice-band { padding: 70px 0; }
  .practice-band__inner { align-items: flex-start; flex-direction: column; }
  .practice-band__copy { gap: 16px; }
  .practice-band__icon { flex-basis: 62px; width: 62px; height: 62px; }
  .practice-band__icon img { width: 46px; }
  .practice-band h2 { font-size: clamp(44px, 12vw, 58px); }
}

@media (max-width: 370px) {
  .guide-shell { width: min(100% - 32px, var(--max)); }
  .guide-hero h1 { font-size: 44px; }
  .combat-grid { grid-template-columns: 1fr; }
  .combat-choice--skip { grid-column: auto; }
}