:root {
  --ink: #15231f;
  --muted: #5d6965;
  --bg: #f4efe5;
  --paper: #fffaf0;
  --forest: #04110f;
  --forest-2: #0a2420;
  --teal: #35d4d7;
  --copper: #c67a36;
  --ember: #f0a04b;
  --line: rgba(16, 32, 29, 0.16);
  --shadow: 0 20px 50px rgba(6, 19, 17, 0.2);
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(53, 212, 215, .13), transparent 32rem),
    linear-gradient(180deg, #081715 0, var(--bg) 540px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--teal);
  color: #001614;
  padding: 10px 14px;
  z-index: 20;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 62px;
  padding: 9px clamp(18px, 4vw, 56px);
  background: rgba(3, 14, 12, 0.94);
  color: #fffdf7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: Georgia, serif;
  font-size: 23px;
}
.brand strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}
.brand small {
  display: block;
  color: #b7c9c4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-top: 2px;
}
.main-nav {
  display: flex;
  gap: clamp(10px, 1.8vw, 22px);
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav a {
  color: #e8f2ef;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--teal); }

.hero {
  position: relative;
  min-height: 650px;
  color: #fff;
  overflow: hidden;
  background: var(--forest);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 11, 0.95) 0%, rgba(3, 12, 11, 0.65) 38%, rgba(3, 12, 11, 0.12) 100%),
    linear-gradient(180deg, rgba(6, 19, 17, 0) 62%, #071916 100%),
    url("assets/farever-hero.jpg") center / cover;
  transform: scale(1.01);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: end;
  min-height: 650px;
  padding: clamp(76px, 10vw, 126px) clamp(20px, 5vw, 72px) 88px;
}
.source-note,
.section-label {
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 {
  max-width: min(760px, calc(100vw - 48px));
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 8.2vw, 108px);
  line-height: 0.96;
  overflow-wrap: break-word;
}
.hero-copy { min-width: 0; }
.hero-copy p:not(.source-note) {
  max-width: min(650px, calc(100vw - 48px));
  margin: 22px 0 0;
  color: #eef8f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.32;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
}
.button.primary {
  background: linear-gradient(180deg, #d99245, var(--copper));
  color: #fffdf7;
  box-shadow: 0 10px 28px rgba(198, 122, 54, .28);
}
.button.secondary { border: 1px solid rgba(255,255,255,.32); color: #fffdf7; background: rgba(0,0,0,.16); }
.button:hover { transform: translateY(-1px); }
.route-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 780px;
  margin-top: 30px;
}
.route-strip a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background: rgba(3, 14, 12, .58);
  color: #eaf7f4;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.route-strip span {
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 20px;
}
.facts-panel {
  padding: 20px;
  border: 1px solid rgba(53, 212, 215, 0.32);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(6, 25, 22, 0.82), rgba(2, 10, 9, 0.82));
  box-shadow: var(--shadow);
}
.facts-panel h2 { font-family: Georgia, serif; font-size: 24px; margin-bottom: 14px; }
.facts-panel dl { margin: 0; display: grid; gap: 12px; }
.facts-panel div { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.facts-panel div:last-child { border-bottom: 0; padding-bottom: 0; }
dt { color: var(--teal); font-size: 11px; font-weight: 850; text-transform: uppercase; }
dd { margin: 2px 0 0; color: #f6fbf9; font-size: 15px; }

.guide-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 440px) 1fr;
  gap: 18px;
  align-items: end;
  margin: -56px auto 0;
  width: min(1180px, calc(100% - 36px));
  position: relative;
  z-index: 2;
  padding: 14px;
  border: 1px solid rgba(53, 212, 215, 0.28);
  border-radius: var(--radius);
  background: #061613;
  box-shadow: var(--shadow);
}
.guide-toolbar label { display: grid; gap: 7px; color: #b7c9c4; font-size: 12px; font-weight: 800; }
input[type="search"] {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: #02100f;
  color: #fff;
  padding: 0 14px;
  font: inherit;
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.filter {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: transparent;
  color: #d7e7e3;
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.filter.active { background: var(--teal); color: #001614; border-color: var(--teal); }

.section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 64px 0;
  scroll-margin-top: 86px;
}
.intro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 34px;
}
.guide-card,
.section article,
.tip-box,
.checklist {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf6, var(--paper));
  box-shadow: 0 12px 30px rgba(6, 19, 17, .08);
}
.guide-card {
  position: relative;
  padding: 22px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.guide-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--ember));
}
.card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid rgba(21,35,31,.2);
  border-radius: 6px;
  color: #075d60;
  font-family: Georgia, serif;
  font-weight: 900;
}
.guide-card h2, .section h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
}
.guide-card h2 { font-size: 25px; }
.guide-card p, .section p, li, td, th { color: var(--muted); }
.guide-card a, .text-link, .source-links a {
  margin-top: auto;
  color: #096d70;
  font-weight: 850;
  text-decoration: none;
}
.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 34px;
  align-items: start;
}
.section-copy {
  position: sticky;
  top: 92px;
}
.mini-panel {
  margin-top: 24px;
  padding: 18px;
  border-left: 4px solid var(--copper);
  background: #efe3ce;
}
.mini-panel strong,
.mini-panel span {
  display: block;
}
.mini-panel strong { margin-bottom: 4px; }
.mini-panel span { color: #59645f; }
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) .85fr;
  gap: 18px;
  align-items: stretch;
}
.world-map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(53, 212, 215, .22);
  border-radius: var(--radius);
  background: #081b18;
  box-shadow: var(--shadow);
}
.world-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(53,212,215,.14), transparent 35rem);
  pointer-events: none;
}
.game-map {
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr) auto;
  min-height: 540px;
}
.map-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(3, 14, 12, .9);
  color: #fffdf7;
}
.map-topbar strong {
  font-family: Georgia, serif;
  font-size: 24px;
}
.map-topbar span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.map-canvas {
  position: absolute;
  inset: 52px 0 112px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.08), transparent 16rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, #0f2b25, #071513);
}
.siagarta-map {
  position: absolute;
  inset: 5% 4% 2%;
  width: 92%;
  height: 94%;
}
.region-main { fill: #d4c28f; stroke: #f5e7b8; stroke-width: 3; }
.region-water { fill: rgba(42, 154, 171, .58); stroke: rgba(126, 230, 231, .5); stroke-width: 2; }
.region-highlands { fill: #8fa36a; stroke: rgba(255,255,255,.38); stroke-width: 2; }
.route-line {
  fill: none;
  stroke: #35d4d7;
  stroke-width: 5;
  stroke-dasharray: 10 12;
  stroke-linecap: round;
}
.route-alt { stroke: #f0a04b; stroke-width: 4; }
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  transform: translate(-50%, -50%);
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 6px;
  background: rgba(2, 11, 10, .86);
  color: #fffdf7;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(3,14,12,.35), 0 12px 26px rgba(0,0,0,.35);
}
.map-pin.question {
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  color: #0a2420;
  background: #d9dde0;
  font-size: 22px;
  font-family: Georgia, serif;
}
.map-pin.obelisk { border-color: var(--teal); color: var(--teal); }
.map-pin.dungeon { border-color: var(--ember); color: var(--ember); }
.map-pin.water { border-color: #78e6e7; color: #78e6e7; }
.map-objectives {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(3, 14, 12, .9);
}
.map-objectives h3 {
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 20px;
}
.map-objectives ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.map-objectives li {
  color: #c7d8d3;
  font-size: 13px;
}
.map-objectives span {
  color: var(--teal);
  font-weight: 900;
  margin-right: 4px;
}
.map-guide {
  display: grid;
  gap: 12px;
}
.map-guide article {
  padding: 18px;
  background: #10211d;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
}
.map-guide strong,
.boss-grid strong,
.timeline strong {
  display: block;
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 21px;
  line-height: 1.1;
}
.map-guide span,
.boss-grid span {
  display: block;
  margin-top: 8px;
  color: #c7d8d3;
}
.section > div > p:not(.section-label), .section-heading > p { font-size: 17px; max-width: 760px; }
.checklist { margin: 0; padding: 16px 18px 16px 42px; }
.checklist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background: #f4efe3; }
tr:last-child td { border-bottom: 0; }
.class-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.class-spotlight {
  position: relative;
  overflow: hidden;
  min-height: 355px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fffdf7;
  background:
    linear-gradient(180deg, rgba(4,17,15,.24), rgba(4,17,15,.96)),
    var(--class-image) center / cover;
  border-color: rgba(53,212,215,.25);
}
.class-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, var(--glow), transparent 15rem);
  opacity: .46;
}
.class-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 14%, rgba(4,17,15,.62) 58%, rgba(4,17,15,.98));
}
.class-spotlight > * { position: relative; z-index: 2; }
.class-spotlight.cleric { --glow: rgba(53, 212, 215, .28); --class-image: url("assets/farever-ss-02.jpg"); }
.class-spotlight.warrior { --glow: rgba(240, 160, 75, .3); --class-image: url("assets/farever-ss-01.jpg"); }
.class-spotlight.rogue { --glow: rgba(140, 108, 255, .24); --class-image: url("assets/farever-ss-06.jpg"); }
.class-spotlight.mage { --glow: rgba(95, 190, 255, .26); --class-image: url("assets/farever-ss-04.jpg"); }
.class-emblem {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px;
  color: var(--teal);
  background: rgba(0,0,0,.24);
  font-size: 25px;
}
.class-spotlight p {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.class-spotlight h3 {
  font-family: Georgia, serif;
  font-size: 27px;
  line-height: 1;
}
.class-spotlight ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.class-spotlight li {
  margin: 8px 0;
  color: #d7e7e3;
  font-size: 13px;
}
.class-spotlight li strong { color: #fffdf7; }
.class-table { margin-top: 14px; }
.class-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.class-cards article {
  padding: 16px;
  background: #10211d;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
}
.class-cards strong {
  display: block;
  color: var(--teal);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.class-cards span {
  display: block;
  margin-top: 6px;
  font-family: Georgia, serif;
  font-size: 22px;
}
.build-planner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.build-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
}
.build-art {
  height: 170px;
  background:
    linear-gradient(180deg, rgba(4,17,15,.05), rgba(4,17,15,.62)),
    var(--build-image) center / cover;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.build-card.support { --build-image: url("assets/farever-ss-02.jpg"); }
.build-card.bruiser { --build-image: url("assets/farever-ss-01.jpg"); }
.build-card.skirmisher { --build-image: url("assets/farever-ss-06.jpg"); }
.build-card.caster { --build-image: url("assets/farever-ss-04.jpg"); }
.build-card .build-role,
.build-card h3,
.build-card p,
.build-card dl {
  margin-left: 20px;
  margin-right: 20px;
}
.build-card h3 {
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.05;
}
.build-card p {
  color: #c7d8d3;
  font-size: 14px;
}
.build-card dl {
  margin-top: auto;
  margin-bottom: 20px;
  display: grid;
  gap: 10px;
}
.build-card dl div {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.build-card dd {
  color: #fffdf7;
  font-size: 13px;
}
.systems-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.systems-strip article {
  padding: 18px;
  background: rgba(0,0,0,.22);
  border-color: rgba(53,212,215,.2);
}
.systems-strip strong {
  display: block;
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 24px;
}
.systems-strip span {
  display: block;
  margin-top: 8px;
  color: #c7d8d3;
  font-size: 13px;
}
.boss-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.boss-grid article {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(4,17,15,.88), rgba(4,17,15,.78)),
    url("assets/farever-ss-03.jpg") center / cover;
  border-color: rgba(53,212,215,.24);
}
.boss-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 16px;
}
.section .boss-guide-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 690px;
  background: #091714;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}
.section .boss-guide-card.featured {
  transform: translateY(-10px);
  border-color: rgba(238,168,75,.42);
}
.boss-art {
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(5,18,15,0) 0%, rgba(5,18,15,.86) 100%),
    var(--boss-image) center / cover;
}
.boss-guide-card.reblochonk { --boss-image: url("assets/farever-ss-03.jpg"); }
.boss-guide-card.crabgantua { --boss-image: url("assets/farever-ss-04.jpg"); }
.boss-guide-card.ratsar { --boss-image: url("assets/farever-ss-06.jpg"); }
.boss-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: #091714;
}
.boss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.boss-meta span {
  padding: 6px 8px;
  border: 1px solid rgba(53,212,215,.28);
  border-radius: 6px;
  color: var(--teal);
  background: rgba(53,212,215,.08);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.boss-guide-card h3 {
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: .95;
}
.boss-guide-card p {
  margin: 0;
  color: #c7d8d3;
  font-size: 14px;
}
.boss-loadout {
  padding: 13px 14px;
  border: 1px solid rgba(238,168,75,.24);
  border-radius: 8px;
  background: rgba(238,168,75,.08);
}
.boss-loadout strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ember);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.boss-loadout span {
  color: #fff5dd;
  font-size: 13px;
}
.move-board {
  display: grid;
  gap: 9px;
}
.move-board div {
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.move-board strong {
  display: block;
  color: #fffdf7;
  font-size: 14px;
}
.move-board span {
  display: block;
  margin-top: 4px;
  color: #c7d8d3;
  font-size: 13px;
  line-height: 1.45;
}
.phase-note {
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid rgba(53,212,215,.2);
  border-radius: 8px;
  color: #d7e7e3;
  background: rgba(53,212,215,.06);
  font-size: 13px;
}
.phase-note strong { color: var(--teal); }
.boss-source {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.boss-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.boss-rules article {
  padding: 18px;
  background: #10211d;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
}
.boss-rules strong {
  display: block;
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 22px;
}
.boss-rules span {
  display: block;
  margin-top: 7px;
  color: #c7d8d3;
  font-size: 13px;
}
.roadmap-section {
  width: 100%;
  max-width: none;
  padding-inline: max(18px, calc((100vw - 1180px) / 2));
  background: #10211d;
  color: #fffdf7;
}
.roadmap-section p { color: #c7d8d3; }
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.timeline article {
  position: relative;
  padding: 22px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.15);
}
.timeline article::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--ember));
}
.timeline span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.service-grid article {
  display: flex;
  flex-direction: column;
}
.mini-list {
  margin: 16px 0 20px;
  padding-left: 18px;
}
.mini-list li {
  margin: 8px 0;
  color: var(--muted);
}
.dark {
  width: 100%;
  max-width: none;
  padding-inline: max(18px, calc((100vw - 1180px) / 2));
  background:
    linear-gradient(135deg, rgba(53, 212, 215, .1), transparent 34%),
    linear-gradient(180deg, #05100f, #09231f);
  color: #fffdf7;
}
.dark p, .dark li, .dark span { color: #c9d8d4; }
.dungeon-section {
  display: block;
}
.dungeon-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
}
.dungeon-art {
  min-height: 430px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(4,17,15,.18), rgba(4,17,15,.8)),
    url("assets/farever-ss-03.jpg") center / cover;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.dungeon-brief {
  padding: 24px;
  border: 1px solid rgba(53,212,215,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
}
.dungeon-brief > span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dungeon-brief h3,
.dungeon-planner h3 {
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1;
}
.dungeon-brief p {
  margin: 14px 0 18px;
}
.dungeon-brief dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.dungeon-brief dl div {
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.dungeon-brief dd {
  color: #fffdf7;
}
.instance-roster {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid rgba(53,212,215,.22);
  border-radius: var(--radius);
  background: rgba(2,12,10,.34);
}
.roster-heading {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: end;
  margin-bottom: 14px;
}
.roster-heading h3 {
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
}
.roster-heading p:not(.section-label) {
  max-width: 640px;
  margin: 0;
  color: #c9d8d4;
}
.dungeon-roster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.dark .dungeon-roster-grid article {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fffdf7;
  background:
    linear-gradient(180deg, rgba(4,17,15,.18), rgba(4,17,15,.94)),
    var(--dungeon-image) center / cover;
  border-color: rgba(255,255,255,.16);
}
.dark .dungeon-roster-grid .kobold-route { --dungeon-image: url("assets/farever-ss-03.jpg"); }
.dark .dungeon-roster-grid .mire-route { --dungeon-image: url("assets/farever-exploration-poster.avif"); }
.dark .dungeon-roster-grid .abyss-route { --dungeon-image: url("assets/farever-ss-06.jpg"); }
.dark .dungeon-roster-grid .hivetree-route { --dungeon-image: url("assets/farever-ss-05.jpg"); }
.dark .dungeon-roster-grid .sunken-route { --dungeon-image: url("assets/farever-ss-04.jpg"); }
.dungeon-roster-grid .game-icon {
  width: 38px;
  height: 38px;
  color: var(--teal);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
}
.dungeon-roster-grid strong {
  display: block;
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1;
}
.dungeon-roster-grid p {
  margin: 8px 0 12px;
  color: #d7e7e3;
  font-size: 13px;
}
.dungeon-roster-grid .roster-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(53,212,215,.34);
  border-radius: 6px;
  color: var(--teal);
  background: rgba(53,212,215,.09);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-decoration: none;
  text-transform: uppercase;
}
.dungeon-roster-grid .roster-link:hover,
.boss-roster-strip a:hover {
  border-color: var(--teal);
  background: rgba(53,212,215,.18);
  color: #fffdf7;
}
.dungeon-roster-grid .roster-link:focus-visible,
.boss-roster-strip a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.boss-roster-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.boss-roster-strip strong,
.boss-roster-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.055);
  color: #d7e7e3;
  font-size: 12px;
  text-decoration: none;
}
.boss-roster-strip strong {
  color: var(--teal);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.dungeon-guide-library,
.boss-run-library {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid rgba(53,212,215,.22);
  border-radius: var(--radius);
  background: rgba(2,12,10,.28);
}
.dungeon-detail-card {
  display: grid;
  grid-template-columns: minmax(240px, .78fr) 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 12px;
  padding: 22px;
  scroll-margin-top: 92px;
  color: #fffdf7;
  background:
    linear-gradient(90deg, rgba(4,17,15,.9), rgba(4,17,15,.58)),
    var(--dungeon-image) center / cover;
  border-color: rgba(255,255,255,.16);
}
.dungeon-detail-card h3 {
  color: #fffdf7;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
}
.dungeon-detail-card p {
  color: #d7e7e3;
}
.dungeon-detail-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}
.dungeon-detail-card li {
  color: #e9f4f0;
}
.guide-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 8px;
  border: 1px solid rgba(53,212,215,.35);
  border-radius: 6px;
  color: var(--teal);
  background: rgba(53,212,215,.1);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.guide-status.ready {
  color: #fff4d6;
  border-color: rgba(240,160,75,.55);
  background: rgba(240,160,75,.16);
}
.boss-run-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.boss-run-grid article {
  padding: 16px;
  scroll-margin-top: 92px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.15);
}
.boss-run-grid strong {
  display: block;
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 22px;
}
.boss-run-grid span {
  display: block;
  margin-top: 8px;
  color: #c9d8d4;
  font-size: 13px;
}
.boss-run-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 12px;
  padding: 0 8px;
  border: 1px solid rgba(53,212,215,.34);
  border-radius: 6px;
  color: var(--teal);
  text-decoration: none;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.dungeon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dungeon-grid article,
.dungeon-status-row article {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.15);
  padding: 20px;
}
.dungeon-grid strong,
.dungeon-status-row strong {
  display: block;
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1.1;
}
.dungeon-grid span,
.dungeon-status-row span {
  display: block;
  margin-top: 8px;
  color: #c9d8d4;
  font-size: 13px;
}
.dungeon-planner {
  display: grid;
  grid-template-columns: 1fr 1fr .85fr;
  gap: 16px;
  margin-top: 16px;
}
.dungeon-planner > div {
  padding: 24px;
  border: 1px solid rgba(53,212,215,.2);
  border-radius: var(--radius);
  background: rgba(2,12,10,.34);
}
.dungeon-planner p:not(.section-label) {
  margin-top: 16px;
}
.dungeon-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.build-grid, .job-grid, .three-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.build-grid article,
.dark article {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.15);
  padding: 22px;
}
.build-grid h3, .job-grid h3, .tip-box h3 { font-size: 20px; margin-bottom: 10px; }
.build-role {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ember);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.build-grid strong { display: block; margin-top: 18px; color: var(--teal); font-size: 13px; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.plain-list { margin: 22px 0 0; padding-left: 20px; }
.plain-list li { margin: 12px 0; }
.tip-box { padding: 24px; }
.weapons-section {
  padding-bottom: 44px;
}
.weapon-command {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.weapon-screen {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(16,32,29,.16);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(4,17,15,.12), rgba(4,17,15,.9)),
    url("assets/farever-ss-05.jpg") center / cover;
  color: #fffdf7;
  box-shadow: var(--shadow);
}
.weapon-screen h3 {
  position: relative;
  z-index: 2;
  max-width: 420px;
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1;
}
.weapon-screen p {
  position: relative;
  z-index: 2;
  max-width: 430px;
  margin: 12px 0 0;
  color: #d7e7e3;
}
.weapon-plus {
  position: absolute;
  top: 22px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(53,212,215,.45);
  border-radius: 8px;
  background: rgba(53,212,215,.14);
  color: var(--teal);
  font-size: 36px;
  font-weight: 900;
  box-shadow: 0 0 30px rgba(53,212,215,.22);
}
.weapon-rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.weapon-rules article,
.weapon-grid article,
.upgrade-flow article,
.crafting-steps article,
.crafting-warning {
  padding: 18px;
}
.game-icon {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: var(--teal);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.sword-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 3h6.5v6.5l-9.2 9.2-2.5-2.5L18 7.5h-3.5V3ZM4 17.2l2.8-2.8 2.8 2.8-2.8 2.8L4 17.2Zm-1 3.6 2.2-2.2 1.2 1.2L4.2 22H3v-1.2Z'/%3E%3C/svg%3E"); }
.axe-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 20 10-10-2-2L3 18v2h2Zm8.6-15.7C16.7 2.7 20 3.7 22 6c-2.3.3-4.1 1.3-5.4 3L15 7.4l-2.1 2.1-2.4-2.4 3.1-2.8Z'/%3E%3C/svg%3E"); }
.arsenal-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Zm-7 2v3h3v-3H6Zm9 0v3h3v-3h-3ZM6 6v3h3V6H6Zm9 0v3h3V6h-3Z'/%3E%3C/svg%3E"); }
.rune-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 10-9 10L3 12 12 2Zm0 4.2L7.2 12 12 17.8 16.8 12 12 6.2Zm0 3.3 2.1 2.5-2.1 2.5L9.9 12 12 9.5Z'/%3E%3C/svg%3E"); }
.bow-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2c6 4 6 16 0 20 9-1 14-6 14-10S14 3 5 2Zm1.7 4.2C11 7.4 15 9.5 16.6 12 15 14.5 11 16.6 6.7 17.8c2.6-3.3 2.6-8.3 0-11.6ZM2 11h14v2H2v-2Z'/%3E%3C/svg%3E"); }
.hammer-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14 3 7 7-3 3-2-2-9 9H4v-3l9-9-2-2 3-3Zm-8 15.2 7.6-7.6-.2-.2L5.8 18H6v.2Z'/%3E%3C/svg%3E"); }
.staff-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2a5 5 0 0 1 4 8l3 3-2 2-3-3-8 10H5l9-11a5 5 0 0 1 0-9Zm4 5a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z'/%3E%3C/svg%3E"); }
.dagger-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2h7v7L9.5 21.5 6 18 18.5 5H15V2ZM3 17l4 4-2 2-4-4 2-2Z'/%3E%3C/svg%3E"); }
.flask-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2h6v3l-1 1v4.5l5 7.5c1.3 2-.1 4-2.5 4h-9C5.1 22 3.7 20 5 18l5-7.5V6L9 5V2Zm3 9.1L7.5 18c-.4.7 0 1 .7 1h7.6c.7 0 1.1-.3.7-1L12 11.1Z'/%3E%3C/svg%3E"); }
.recycler-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h8l-2-2h3l4 4-4 4h-3l2-2H8a4 4 0 0 0-4 4H1a7 7 0 0 1 6-8Zm10 16H9l2 2H8l-4-4 4-4h3l-2 2h7a4 4 0 0 0 4-4h3a7 7 0 0 1-6 8Z'/%3E%3C/svg%3E"); }
.pouch-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2h8l-1 5h3l3 5v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8l3-5h3L8 2Zm2.4 3 .4 2h2.4l.4-2h-3.2ZM6 12v7h12v-7l-1.2-2H7.2L6 12Zm3 1h6v2H9v-2Z'/%3E%3C/svg%3E"); }
.chest-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8V6a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2h1v13H3V8h1Zm3 0h10V6a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v2Zm-1 3v7h12v-7h-4v3h-4v-3H6Z'/%3E%3C/svg%3E"); }
.package-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 3.4L7.4 8 12 10.6 16.6 8 12 5.4ZM6 10.6v4.7l4.5 2.5v-4.7L6 10.6Zm12 0-4.5 2.5v4.7l4.5-2.5v-4.7Z'/%3E%3C/svg%3E"); }
.anvil-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v4h-5c-.4 2-2.2 3.5-4.3 3.5H9v2h5v3H6v-5H3V9h10V8H3V5Zm2 15h14v2H5v-2Z'/%3E%3C/svg%3E"); }
.shield-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 21 5v6c0 5.7-3.7 9.2-9 11-5.3-1.8-9-5.3-9-11V5l9-3Zm0 3.2L6 7v4c0 3.8 2.2 6.1 6 7.6 3.8-1.5 6-3.8 6-7.6V7l-6-1.8Z'/%3E%3C/svg%3E"); }
.cooking-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8h12v8a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5V8Zm-3 2h3v3H3v-3Zm15 0h3v3h-3v-3ZM8 2h2v4H8V2Zm6 0h2v4h-2V2Zm-3 2h2v3h-2V4Z'/%3E%3C/svg%3E"); }
.enchant-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 2.2 6.4L21 10l-6.8 1.6L12 18l-2.2-6.4L3 10l6.8-1.6L12 2Zm6 13 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3ZM5 14l.8 2.2L8 17l-2.2.8L5 20l-.8-2.2L2 17l2.2-.8L5 14Z'/%3E%3C/svg%3E"); }
.herb-icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22h-2c0-4.7 1.5-8.5 4.4-11.4C12 10.4 9.7 9.3 8 7.3 5.7 4.6 4 2 4 2s4.7.2 7.2 2.1c1.4 1.1 2.2 2.5 2.5 4.1 1.3-1.7 3.2-2.8 5.6-3.2 1.5-.3 2.7-.2 2.7-.2s-.3 4.1-2.7 6.5c-1.7 1.7-3.8 2.3-6.2 1.8-.8 1.3-1.1 3.3-1.1 8.9Z'/%3E%3C/svg%3E"); }
.weapon-rules article {
  background: #10211d;
  color: #fffdf7;
  border-color: rgba(53,212,215,.2);
}
.weapon-rules strong,
.weapon-grid h3,
.upgrade-flow span,
.crafting-priority h3,
.crafting-steps strong,
.crafting-warning strong {
  display: block;
  font-family: Georgia, serif;
  line-height: 1.1;
}
.weapon-rules strong {
  color: var(--teal);
  font-size: 23px;
}
.weapon-rules span {
  display: block;
  margin-top: 8px;
  color: #c7d8d3;
  font-size: 13px;
}
.weapon-rules .game-icon {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--teal);
}
.weapon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.weapon-grid article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf6, var(--paper));
  padding-top: 120px;
}
.weapon-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 94px;
  background:
    linear-gradient(180deg, rgba(4,17,15,.08), rgba(4,17,15,.78)),
    var(--weapon-image) center / cover;
}
.weapon-grid .range-card { --weapon-image: url("assets/farever-ss-05.jpg"); }
.weapon-grid .melee-card { --weapon-image: url("assets/farever-ss-01.jpg"); }
.weapon-grid .magic-card { --weapon-image: url("assets/farever-ss-04.jpg"); }
.weapon-grid .blade-card { --weapon-image: url("assets/farever-ss-06.jpg"); }
.weapon-grid .game-icon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0;
  color: #fffdf7;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
}
.weapon-grid span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.weapon-grid h3 {
  margin-top: 10px;
  color: var(--ink);
  font-size: 25px;
}
.weapon-grid p {
  color: var(--muted);
}
.weapon-grid strong {
  display: block;
  margin-top: 16px;
  color: var(--ink);
  font-size: 13px;
}
.upgrade-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.upgrade-flow article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px 12px;
  align-items: start;
  background: #10211d;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
}
.upgrade-flow strong {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(53,212,215,.35);
  border-radius: 8px;
  color: var(--teal);
  font-family: Georgia, serif;
  font-size: 24px;
}
.upgrade-flow span {
  color: #fffdf7;
  font-size: 20px;
}
.upgrade-flow p {
  margin: 0;
  color: #c7d8d3;
  font-size: 13px;
}
.crafting-loop {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 16px;
  margin-bottom: 16px;
}
.section .crafting-priority {
  padding: 26px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(4,17,15,.1), rgba(4,17,15,.92)),
    url("assets/farever-crafting-poster.avif") center / cover;
  color: #fffdf7;
  border-color: rgba(53,212,215,.22);
}
.section .crafting-priority > .game-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: #fffdf7;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
}
.section .crafting-priority > span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.section .crafting-priority > .game-icon {
  display: inline-block;
  color: #fffdf7;
}
.section .crafting-priority h3 {
  margin-top: 10px;
  color: #fffdf7;
  font-size: 40px;
}
.section .crafting-priority p {
  color: #d7e7e3;
}
.crafting-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.crafting-steps article {
  position: relative;
  background: linear-gradient(180deg, #fffdf6, var(--paper));
  min-height: 150px;
  padding-left: 78px;
}
.crafting-steps .game-icon,
.job-grid .game-icon {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 38px;
  height: 38px;
  color: var(--teal);
}
.crafting-steps strong {
  color: var(--ink);
  font-size: 22px;
}
.crafting-steps span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.crafting-warning {
  margin-top: 16px;
  border: 1px solid rgba(198,122,54,.32);
  border-radius: var(--radius);
  background: #f2e4c7;
}
.crafting-warning strong {
  color: var(--ink);
  font-size: 24px;
}
.crafting-warning span {
  display: block;
  margin-top: 6px;
  color: #5d4d3f;
}
.job-grid { grid-template-columns: repeat(3, 1fr); }
.job-grid article {
  position: relative;
  padding: 24px 22px 22px 74px;
}
.job-grid article:hover,
.guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 212, 215, .42);
}
.three-col { grid-template-columns: repeat(3, 1fr); }
.three-col article { padding: 24px; }
.sources {
  border-top: 1px solid var(--line);
}
.source-links { display: flex; gap: 10px; flex-wrap: wrap; }
.source-links span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255,255,255,.34);
  font-size: 12px;
  font-weight: 800;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px clamp(18px, 5vw, 72px);
  background: #020b0a;
  color: #d7e7e3;
}
.site-footer p { margin: 0; color: #9fb4ae; }
.site-footer a { color: var(--teal); text-decoration: none; font-weight: 850; }
.hidden { display: none !important; }

@media (max-width: 980px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .main-nav { width: 100%; padding-bottom: 4px; }
  .hero-inner, .split, .two-col, .guide-toolbar, .map-layout, .dungeon-hero, .dungeon-planner, .weapon-command, .crafting-loop { grid-template-columns: 1fr; }
  .hero-inner { align-items: end; }
  .facts-panel { max-width: 520px; }
  .filter-row { justify-content: flex-start; }
  .intro-grid, .build-grid, .class-cards, .boss-grid, .timeline, .class-showcase, .build-planner, .systems-strip, .boss-guide-grid, .boss-rules, .dungeon-grid, .dungeon-status-row, .weapon-grid, .upgrade-flow, .dungeon-roster-grid, .boss-run-grid { grid-template-columns: repeat(2, 1fr); }
  .dungeon-detail-card { grid-template-columns: 1fr; }
  .roster-heading { display: block; }
  .roster-heading p:not(.section-label) { margin-top: 10px; }
  .section .boss-guide-card.featured { transform: none; }
  .section-copy { position: static; }
  .route-strip { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 720px) {
  .hero { min-height: 790px; }
  .hero-inner { min-height: 790px; padding-top: 86px; padding-bottom: 86px; }
  h1 { font-size: 44px; line-height: 1.02; }
  .hero-copy p:not(.source-note) { font-size: 20px; max-width: 330px; }
  .source-note { max-width: 330px; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 320px; }
  .intro-grid, .build-grid, .job-grid, .three-col, .class-cards, .boss-grid, .timeline, .class-showcase, .build-planner, .systems-strip, .boss-guide-grid, .boss-rules, .dungeon-grid, .dungeon-status-row, .weapon-grid, .upgrade-flow, .weapon-rules, .crafting-steps, .dungeon-roster-grid, .boss-run-grid { grid-template-columns: 1fr; }
  .dungeon-art { min-height: 260px; }
  .game-map { min-height: 600px; }
  .map-topbar { align-items: flex-start; flex-direction: column; padding: 10px 14px; }
  .map-canvas { top: 74px; bottom: 190px; }
  .map-objectives ul { grid-template-columns: 1fr; }
  .map-pin { font-size: 9px; min-width: 31px; min-height: 31px; padding: 0 7px; }
  .section-heading { display: block; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}