/* Hunt 20 Guide — visual system derived from the official event artwork.
   Palette read from the official icon and thumbnails: bright sky blue, the
   lockup red of the ROBLOX 20 mark, and the warm gold of the reward items.
   White content surfaces are deliberate: twenty-row quest tables are not
   readable on a saturated ground. */

:root {
  --sky: #3aa5e8;
  --sky-deep: #0b2a4a;
  --sky-mid: #1b5f9c;
  --red: #e2231a;
  --gold: #f5a623;
  --ink: #12263d;
  --ink-soft: #4b6076;
  --line: #d6e3ef;
  --surface: #ffffff;
  --surface-alt: #f2f8fd;
  --radius: 14px;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface-alt);
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--sky-mid); }
a:hover { color: var(--red); }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px; z-index: 10; background: #fff;
  padding: 8px 12px; border-radius: 8px;
}

/* ---------- header ---------- */

.site-header {
  background: linear-gradient(180deg, var(--sky-deep), var(--sky-mid));
  color: #fff;
  position: relative;
}
.bar {
  max-width: var(--wrap); margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .04em;
}
.brand img { border-radius: 9px; }
.brand b { color: var(--gold); }
.game-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 12px;
  color: #fff; text-decoration: none; font-size: 13.5px;
  padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.game-chip img { border-radius: 6px; display: block; }
.game-chip:hover { background: rgba(255, 255, 255, .16); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.nav > div { display: contents; }
.nav a {
  color: #eaf4fd; text-decoration: none; padding: 7px 11px;
  border-radius: 9px; font-size: 15px;
}
.nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.desktop-header-actions { display: flex; align-items: center; }
.desktop-header-actions .cta {
  color: #0b2a4a; background: var(--gold); text-decoration: none;
  padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 15px;
}
.mobile-nav-toggle { display: none; }
.mobile-nav { display: none; }
.official-media {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 18px; padding: 10px 12px;
  background: #eef6fd; border: 1px solid #cfe3f5; border-radius: 12px;
}
.official-media img { border-radius: 10px; flex: 0 0 auto; }
.official-media figcaption { font-size: 13px; color: #4a5b6e; }
/* The three hero answer lines carry the success state, the value proposition and
   the core answer, so they sit on the light card surface in readable ink rather
   than in the light tone the dark header uses. */
.hero-line { margin: 6px 0 0; font-size: 15.5px; color: var(--ink-soft); }
.hero-line:first-of-type { color: var(--ink); font-weight: 600; }
.hero-cta { margin: 14px 0 4px; }
.hero-cta .cta {
  display: inline-block; color: #0b2a4a; background: var(--gold); text-decoration: none;
  padding: 10px 16px; border-radius: 9px; font-weight: 700; font-size: 16px;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.thumbs figure { margin: 0; }
.thumbs img { width: 100%; height: auto; border-radius: 10px; display: block; }
.first-answer { display: block; }

/* The hero artwork is capped so the first screen keeps the primary action and
   the answer text above the fold on a laptop viewport. */
.hero-visual img { width: 100%; height: auto; max-height: 430px; object-fit: cover; }

/* ---------- layout ---------- */

main {
  max-width: var(--wrap); margin: 0 auto; padding: 26px 20px 60px;
}

.crumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.crumbs a { text-decoration: none; }

h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.15; margin: 8px 0 14px; }
h2 { font-size: clamp(23px, 3.2vw, 28px); margin: 34px 0 12px; }
h3 { font-size: 19px; margin: 22px 0 8px; }

.lead { font-size: 19px; color: var(--ink-soft); }

section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin: 18px 0;
}

.note, .credit, .callout {
  font-size: 15px; color: var(--ink-soft);
}
.callout {
  background: #fff7e8; border-left: 4px solid var(--gold);
  padding: 12px 14px; border-radius: 8px;
}
.credit { font-size: 13px; opacity: .85; }

/* ---------- hero ---------- */

.hero { padding: 0; overflow: hidden; }
.hero img { width: 100%; height: auto; }
.hero-copy { padding: 20px 22px 24px; }
.eyebrow {
  letter-spacing: .06em; font-size: 12.5px;
  font-weight: 700; color: var(--red); margin: 0 0 6px;
}

/* ---------- facts ---------- */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 18px 0 6px; padding: 0;
}
.facts > div {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.facts dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-weight: 700; font-size: 17px; }

/* ---------- cards ---------- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-left: 4px solid var(--sky); border-radius: 12px; padding: 14px 16px;
}
.card:hover { border-left-color: var(--red); }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; margin: 14px 0; border-radius: 12px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 15.5px; }
caption { text-align: left; padding: 10px 12px; font-weight: 700; color: var(--ink-soft); font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line); }
thead th { background: var(--sky-deep); color: #fff; border-top: 0; white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--surface-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 14px 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 78px 1fr 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.timeline .year { font-weight: 700; color: var(--red); }
.timeline .exp { color: var(--ink-soft); }

/* ---------- boundary + sources ---------- */

.boundary { border-left: 4px solid var(--gold); background: #fffdf7; }
.boundary h2 { margin-top: 0; font-size: 22px; }
.boundary p { margin: 0; font-size: 15.5px; color: var(--ink); }

.sources { background: var(--surface-alt); }
.sources h2 { margin-top: 0; font-size: 22px; }
.sources ul { margin: 8px 0 0; padding-left: 20px; font-size: 15.5px; }

.official { border-left: 4px solid var(--sky); }

/* ---------- footer ---------- */

footer {
  background: var(--sky-deep); color: #cfe4f6; margin-top: 30px;
}
footer .bar { display: block; padding: 24px 20px 30px; }
footer p { margin: 0 0 8px; font-size: 14px; max-width: 70ch; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
footer nav a { color: #eaf4fd; font-size: 14px; }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  .nav, .desktop-header-actions { display: none; }
  .mobile-nav-toggle {
    display: inline-flex; margin-left: auto; cursor: pointer;
    padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 9px;
    background: transparent; color: #fff; font: inherit; font-size: 15px;
  }
  .mobile-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sky-deep); padding: 10px 20px 14px; z-index: 5;
  }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav nav { display: flex; flex-direction: column; padding-top: 8px; }
  .mobile-nav nav a { display: block; padding: 9px 11px; }
  .hero-visual img { max-height: 150px; object-fit: cover; }
  .timeline li { grid-template-columns: 64px 1fr; }
  .timeline .item, .timeline .num { grid-column: 2; }
  h1 { font-size: 30px; }
  section { padding: 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}