@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap");

:root {
  --navy: #0b1b31;
  --navy-deep: #071423;
  --parchment: #fff6e6;
  --parchment-deep: #f8e8ce;
  --ink: #18304a;
  --muted: #5d6d7d;
  --gold: #f2a629;
  --ember: #e87532;
  --ember-deep: #a84c1b;
  --teal: #159e9b;
  --teal-deep: #0b6f6c;
  --pink: #d9579b;
  --sky: #7cc9e8;
  --line: rgba(11, 27, 49, .14);
  --line-dark: rgba(255, 246, 230, .2);
  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --max: 1180px;
  --reading: 72ch;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--parchment);
  background: var(--navy-deep);
  font: 500 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 4% 0%, rgba(242,166,41,.14), transparent 27rem), radial-gradient(circle at 96% 72%, rgba(21,158,155,.12), transparent 25rem), radial-gradient(circle at 72% 15%, rgba(217,87,155,.06), transparent 18rem);
  content: "";
  pointer-events: none;
}
body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(255,246,230,.11) .7px, transparent .7px);
  background-size: 22px 22px;
  content: "";
  opacity: .18;
  pointer-events: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a { font-family: inherit; }
section[id], main[id] { scroll-margin-top: 92px; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); }
h1, h2, h3, p, ul, ol, dl { margin-top: 0; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .65rem .9rem;
  color: var(--navy-deep);
  background: var(--gold);
  border-radius: 10px;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  padding: .85rem max(1.25rem, calc((100vw - var(--max)) / 2));
  background: rgba(7,20,35,.9);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px);
  transition: border-color .2s ease, background .2s ease;
}
.site-nav.is-scrolled { background: rgba(7,20,35,.97); border-bottom-color: var(--line-dark); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  width: fit-content;
  color: var(--parchment);
  font: 700 1.08rem/1 var(--display);
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; }
.brand span { min-width: 0; }
.nav-links { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.6rem); }
.nav-links a, .nav-action { color: rgba(255,246,230,.78); font-weight: 800; text-decoration: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"], .nav-action:hover, .nav-action:focus-visible { color: var(--gold); }
.nav-action {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: .7rem 1rem;
  color: var(--navy-deep);
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(176,102,20,.7);
  transition: transform .16s var(--ease), box-shadow .16s ease, background .16s ease;
}
.nav-action:hover { color: var(--navy-deep); background: #ffc65a; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(176,102,20,.7); }

.eyebrow, .overline, .card-kicker, .stage-label, .legal-meta {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 1rem; }
.eyebrow::before { display: inline-block; width: 24px; height: 2px; margin: 0 .65rem .2rem 0; background: var(--ember); border-radius: 2px; content: ""; }
.overline { margin-bottom: .85rem; color: var(--ember); }

.hero {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  align-items: center;
  gap: clamp(2.5rem,6vw,6rem);
  max-width: calc(var(--max) + 80px);
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: clamp(4rem,8vw,7rem) 1.25rem;
}
.hero-copy { min-width: 0; }
.hero h1 {
  max-width: 11ch;
  margin-bottom: 1.2rem;
  color: var(--parchment);
  font-size: clamp(3.1rem,6.8vw,6.4rem);
  line-height: .93;
  letter-spacing: -.045em;
}
.hero h1 em, .page-hero h1 span, .game-hero h1 span { color: var(--gold); font-style: normal; }
.hero-lead { max-width: 37rem; margin-bottom: 0; color: #d7e0e5; font-size: clamp(1.05rem,1.5vw,1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s var(--ease), background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.button-primary { color: var(--navy-deep); background: var(--gold); box-shadow: 0 4px 0 rgba(176,102,20,.75); }
.button-primary:hover { color: var(--navy-deep); background: #ffc65a; box-shadow: 0 6px 0 rgba(176,102,20,.75); }
.button-secondary { color: var(--parchment); border-color: rgba(255,246,230,.35); background: rgba(255,246,230,.08); }
.button-secondary:hover { border-color: var(--sky); background: rgba(124,201,232,.14); }
.button-disabled, .button-disabled:hover {
  cursor: not-allowed;
  color: #4d5964;
  background: #d8cebe;
  border-color: #b9ad99;
  opacity: 1;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  max-width: 42rem;
  margin: 3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}
.hero-facts li { display: grid; gap: .15rem; }
.hero-facts strong { color: var(--gold); font: 700 1rem/1.2 var(--display); }
.hero-facts span { color: #b9c9d1; font-size: .86rem; }

.quest-card {
  display: block;
  overflow: hidden;
  color: var(--navy);
  background: var(--parchment);
  border: 1px solid rgba(255,246,230,.5);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.quest-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,.32); }
.quest-art { width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; }
.quest-card-body { padding: 1.45rem 1.5rem 1.6rem; }
.quest-card .stage-label, .quest-card .card-kicker { color: var(--teal-deep); }
.quest-card h2 { max-width: 15ch; margin: .4rem 0 .5rem; color: var(--navy); font-size: clamp(1.7rem,3vw,2.7rem); line-height: 1; letter-spacing: -.035em; }
.quest-card p { max-width: 38rem; margin-bottom: 0; color: #405368; }
.quest-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip, .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .7rem;
  color: var(--navy);
  background: var(--parchment-deep);
  border: 1px solid rgba(11,27,49,.14);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
}
.status-pill { color: var(--navy-deep); background: var(--gold); border-color: transparent; }
.quest-icon {
  display: block;
  position: relative;
  width: 74px;
  height: 74px;
  margin: -37px 1.5rem 0 auto;
  overflow: hidden;
  background: var(--parchment);
  border: 4px solid var(--parchment);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(11,27,49,.2);
}
.quest-icon img { width: 100%; height: 100%; object-fit: cover; }

.section { padding: clamp(4.5rem,8vw,7.5rem) max(1.25rem,calc((100vw - var(--max)) / 2)); }
.section-light { color: var(--ink); background: var(--parchment); }
.section-light .overline { color: var(--ember-deep); }
.section-heading { display: grid; grid-template-columns: minmax(170px,.55fr) minmax(0,1.45fr); gap: 2rem 5rem; align-items: start; }
.section-heading .overline { grid-row: 1 / span 2; }
.section-heading h2, .process-copy h2 { max-width: 17ch; margin-bottom: .8rem; font-size: clamp(2.25rem,4.7vw,4.5rem); line-height: .98; letter-spacing: -.045em; }
.section-heading > div > p, .process-copy > p:not(.overline) { max-width: 52rem; margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }
.section:not(.section-light) .section-heading > div > p, .section:not(.section-light) .process-copy > p:not(.overline) { color: #b9c9d1; }
.roster-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(240px,.8fr); gap: 1rem; margin-top: 3rem; }
.roster-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  padding: 1.4rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(11,27,49,.08);
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s ease;
}
.roster-card:hover { border-color: var(--teal); transform: translateY(-4px); }
.roster-card.featured { color: var(--parchment); background: linear-gradient(135deg,var(--navy),#123f56); border-color: transparent; }
.roster-card.featured .roster-number, .roster-card.featured .status { color: var(--gold); }
.roster-card .roster-number { color: var(--teal-deep); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.roster-card h3 { margin: auto 0 .4rem; font-size: 1.8rem; line-height: 1; letter-spacing: -.035em; }
.roster-card p { margin-bottom: 0; color: var(--muted); }
.roster-card.featured p { color: #c8d8de; }
.roster-card .status { margin-top: 1rem; color: var(--teal-deep); font-weight: 800; }
.roster-card.more { background: #f5dfc0; }
.roster-card.more h3 { color: var(--navy); }
.process-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,9vw,8rem); background: #102b43; }
.process-copy h2 { color: var(--parchment); }
.process-flow { margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.process-flow li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-dark); }
.process-flow li > span { color: var(--gold); font: 700 1.25rem/1 var(--display); }
.process-flow strong { color: var(--parchment); font: 700 1.35rem/1.2 var(--display); }
.process-flow p { margin: .25rem 0 0; color: #b9c9d1; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 2.5rem max(1.25rem,calc((100vw - var(--max)) / 2));
  color: #b9c9d1;
  background: #06111f;
  border-top: 1px solid var(--line-dark);
  font-size: .9rem;
}
.site-footer .brand { color: var(--parchment); }
.site-footer p { margin-bottom: 0; }
.site-footer > div { display: flex; justify-self: end; gap: 1rem; flex-wrap: wrap; }
.site-footer > div a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a { text-underline-offset: 3px; }
.site-footer a:hover { color: var(--gold); }

/* Game detail */
.game-hero { padding: clamp(4rem,8vw,7rem) max(1.25rem,calc((100vw - var(--max)) / 2)); color: var(--ink); background: var(--parchment); }
.game-hero-inner { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: clamp(2.5rem,6vw,5rem); max-width: var(--max); margin: 0 auto; }
.game-hero .eyebrow { color: var(--ember-deep); }
.game-hero h1 { max-width: 14ch; margin-bottom: 1rem; color: var(--navy); font-size: clamp(3rem,6vw,5.8rem); line-height: .94; letter-spacing: -.05em; }
.game-hero p.lead { max-width: 40rem; margin-bottom: 0; color: #405368; font-size: 1.1rem; }
.game-hero .legal-meta { color: var(--teal-deep); }
.game-art-panel {
  position: relative;
  margin-bottom: 43px;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(11,27,49,.16);
}
.game-art-panel > picture:first-child {
  display: block;
  overflow: hidden;
  border-radius: 24px;
}
.game-art-panel > picture:first-child img {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 500;
  object-fit: cover;
}
.game-icon-wrap {
  display: block;
  position: absolute;
  right: 1.25rem;
  bottom: -43px;
  z-index: 2;
  width: 86px;
  height: 86px;
  overflow: hidden;
  background: var(--parchment);
  border: 4px solid var(--parchment);
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(11,27,49,.16);
}
.game-icon-wrap .game-icon { width: 100%; height: 100%; object-fit: cover; }
.game-facts { display: grid; grid-template-columns: repeat(4,1fr); max-width: 44rem; margin: 2.2rem 0 0; border-top: 1px solid var(--line); }
.game-facts div { padding: .9rem .9rem .1rem 0; }
.game-facts dt { color: var(--ember-deep); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.game-facts dd { margin: .2rem 0 0; color: var(--navy); font-weight: 800; overflow-wrap: anywhere; }
.game-section { max-width: none; margin: 0 auto; }
.game-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; margin-top: 3rem; }
.game-panel { padding: clamp(1.35rem,3vw,2rem); background: #102b43; border: 1px solid var(--line-dark); border-radius: 20px; }
.game-panel h2 { margin-bottom: 1rem; color: var(--gold); font-size: 1.55rem; line-height: 1; }
.game-panel p { color: #c8d8de; }
.level-list, .token-list, .booster-list { display: grid; gap: .65rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.level-list li, .token-list li, .booster-list li { display: flex; align-items: center; gap: .7rem; padding: .65rem .7rem; color: var(--parchment); background: rgba(255,246,230,.06); border: 1px solid var(--line-dark); border-radius: 10px; }
.level-list li::before { color: var(--teal); font-weight: 800; content: "✓"; }
.token-list { grid-template-columns: repeat(2,1fr); }
.token-list li::before { width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid var(--parchment); border-radius: 50%; background: var(--pink); content: ""; }
.token-list li:nth-child(2n)::before { background: var(--teal); }
.booster-list li { color: var(--parchment); font-weight: 800; }
.booster-list li::before { color: var(--gold); content: "✦"; }
.pillar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3rem; }
.pillar-card { padding: 1.35rem; background: rgba(255,246,230,.07); border: 1px solid var(--line-dark); border-radius: 18px; }
.pillar-card h3 { margin-bottom: .35rem; color: var(--parchment); font-size: 1.3rem; }
.pillar-card p { margin-bottom: 0; color: #b9c9d1; font-size: .95rem; }
.screenshot-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  outline-offset: 5px;
  scrollbar-width: thin;
}
.screenshot-row:focus-visible { outline: 3px solid var(--sky); }
.shot-frame { margin: 0; padding: .5rem; background: var(--navy); border: 1px solid rgba(11,27,49,.2); border-radius: 16px; box-shadow: 0 12px 25px rgba(11,27,49,.12); }
.shot-frame img { width: 100%; height: auto; border-radius: 11px; }
.shot-frame figcaption { padding: .6rem .2rem .15rem; color: var(--parchment); font-weight: 800; text-align: center; }
.callout { margin: 1.5rem 0 0; padding: 1rem 1.15rem; color: var(--ink); background: #d8f1ed; border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; }
.game-legal { margin-top: 2.5rem; color: #b9c9d1; font-size: .95rem; }
.game-legal a { color: var(--gold); }

/* Long-form, support and index pages */
.page-shell { width: min(calc(100% - 2.5rem),var(--reading)); margin: 0 auto; padding: clamp(3.75rem,8vw,6.5rem) 0; }
.page-shell.wide { width: min(calc(100% - 2.5rem),var(--max)); }
.page-hero { padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark); }
.page-hero h1 { max-width: 15ch; margin-bottom: 1rem; color: var(--parchment); font-size: clamp(3rem,6vw,5.6rem); line-height: .94; letter-spacing: -.05em; }
.page-hero p:not(.eyebrow):not(.legal-meta) { max-width: 58rem; margin-bottom: .8rem; color: #c8d8de; font-size: 1.1rem; }
.legal-meta { margin-bottom: 0; color: var(--sky); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1.3rem; color: #b9c9d1; font-size: .9rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); }
.legal-content { padding-top: 2rem; }
.legal-content h2 { margin: 2.7rem 0 .65rem; color: var(--gold); font-size: 1.65rem; line-height: 1.1; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 1.5rem 0 .35rem; color: var(--parchment); font-size: 1.1rem; }
.legal-content p, .legal-content li { color: #c8d8de; }
.legal-content ul, .legal-content ol { padding-left: 1.4rem; }
.legal-content li + li { margin-top: .55rem; }
.legal-content a { color: var(--sky); }
.legal-content code { padding: .1rem .3rem; color: var(--parchment); background: rgba(255,246,230,.1); border-radius: 4px; }
.notice { margin: 2rem 0; padding: 1rem 1.2rem; color: #e4f5f2; background: rgba(21,158,155,.16); border: 1px solid rgba(21,158,155,.55); border-radius: 12px; }
.contact-card { display: grid; gap: .5rem; margin: 2rem 0; padding: 1.5rem; background: #102b43; border: 1px solid var(--line-dark); border-radius: 18px; }
.contact-card strong { color: var(--gold); font: 700 1.2rem var(--display); }
.contact-card a { color: var(--sky); font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.link-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 2rem; }
.link-card { display: flex; min-height: 145px; flex-direction: column; justify-content: space-between; padding: 1.2rem; color: inherit; background: #102b43; border: 1px solid var(--line-dark); border-radius: 16px; text-decoration: none; transition: transform .2s var(--ease), border-color .2s ease; }
.link-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.link-card strong { color: var(--gold); font: 700 1.2rem var(--display); }
.link-card span { color: #b9c9d1; font-size: .95rem; }
.catalog-card { display: grid; grid-template-columns: minmax(160px,.72fr) 1.28fr; gap: 1.5rem; align-items: center; margin-top: 3rem; padding: 1.2rem; color: var(--ink); background: var(--parchment); border-radius: 22px; box-shadow: 0 16px 35px rgba(0,0,0,.18); }
.catalog-card .art { overflow: hidden; border-radius: 16px; }
.catalog-card .art img { width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; }
.catalog-card h2 { margin-bottom: .45rem; color: var(--navy); font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1; }
.catalog-card p { margin-bottom: 0; color: #405368; }
.catalog-card .button { margin-top: 1rem; }
.catalog-card .card-kicker { color: var(--teal-deep); }
.not-found { display: grid; min-height: calc(100vh - 76px); place-items: center; padding: 4rem 1.25rem; text-align: center; }
.not-found h1 { margin-bottom: .4rem; color: var(--gold); font-size: clamp(5rem,17vw,11rem); line-height: .8; letter-spacing: -.07em; }
.not-found h2 { margin-bottom: .7rem; color: var(--parchment); font-size: clamp(2rem,5vw,3.5rem); }
.not-found p { color: #c8d8de; }
.not-found .hero-actions { justify-content: center; }
.hero-copy, .game-hero-inner > div, .section-heading > div, .process-copy, .catalog-card > div { min-width: 0; }
.contact-card, .legal-content { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 52rem; }
  .quest-card { max-width: 720px; }
  .game-hero-inner, .game-grid, .process-section { grid-template-columns: 1fr; }
  .game-art-panel { order: -1; }
}
@media (max-width: 720px) {
  .site-nav { grid-template-columns: minmax(0,1fr) auto; gap: .5rem 1rem; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; width: 100%; padding-top: .55rem; border-top: 1px solid var(--line-dark); }
  .nav-links a { font-size: .9rem; }
  .nav-action { max-width: 9.5rem; padding: .65rem .85rem; font-size: .9rem; line-height: 1.15; text-align: center; }
  .hero { padding-top: 3.5rem; }
  .hero h1 { max-width: none; font-size: clamp(3rem,14vw,4.8rem); }
  .hero-facts, .game-facts { grid-template-columns: 1fr; gap: .8rem; }
  .hero-facts li { grid-template-columns: 9rem 1fr; }
  .section-heading, .process-section { display: block; }
  .section-heading .overline { margin-bottom: 1rem; }
  .process-flow { margin-top: 3rem; }
  .roster-grid, .pillar-grid { grid-template-columns: 1fr; }
  .screenshot-row { display: flex; overflow-x: auto; margin-right: -1.25rem; padding: .1rem 1.25rem .9rem 0; scroll-snap-type: x mandatory; }
  .shot-frame { min-width: min(72vw,270px); scroll-snap-align: start; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div { justify-self: start; }
  .link-grid { grid-template-columns: 1fr; }
}
@media (max-width: 450px) {
  .brand { font-size: .98rem; }
  .brand img { width: 27px; height: 27px; }
  .nav-links { gap: .65rem; }
  .nav-links a { font-size: .82rem; }
  .nav-action { font-size: .82rem; }
  .hero-actions .button { width: 100%; }
  .quest-card-body { padding: 1.2rem; }
  .quest-icon { margin-right: 1.2rem; }
  .catalog-card { grid-template-columns: 1fr; }
  .token-list { grid-template-columns: 1fr; }
}
@media (max-width: 350px) {
  .site-nav { padding-inline: 1rem; }
  .brand { gap: .4rem; font-size: .92rem; }
  .brand img { width: 24px; height: 24px; }
  .nav-action { max-width: none; padding-inline: .75rem; font-size: 0; }
  .nav-action::before { content: attr(data-mobile-label); font-size: .78rem; }
  .nav-action > span { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}