/*
 * The Scavengers: public landing page + privacy policy (www.the-scavengers.com, docs/landing-page.md).
 * Brand: docs/brand/Scavengers_Brand_Guidelines_v1_1 (Comic Expedition). Navy canvas, parchment
 * reading surfaces, gold = the one main action, brass = decoration, Bangers 400 for headings
 * only, DM Sans for everything else. Self-hosted fonts and art only (the CSP allows 'self').
 * The title lockup and the torn paper are static copies of the game's own CSS
 * (client/src/index.css: "THE SCAVENGERS headline" and "PAPER SCROLL").
 */
@font-face { font-family: "Bangers"; src: url("/landing/fonts/Bangers-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/landing/fonts/dm-sans-latin-wght.woff2") format("woff2-variations"), url("/landing/fonts/dm-sans-latin-wght.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root {
  --sh-navy: #10232d;
  --sh-slate: #243744;
  --sh-paper: #f6e8c7;
  --sh-paper-light: #fff6e3;
  --sh-ink: #21190f;
  --sh-gold: #f2bc38;
  --sh-brass: #b9781e;
  --sh-red: #a63224;
  --sh-green: #2e6d47;
  --sh-blue: #2462bf;
  --sh-muted: #665b48;
  --sh-disabled-bg: #d7d2c6;
  --sh-disabled-ink: #514c42;
  --display: "Bangers", Impact, "Arial Narrow Bold", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M0 10 L0 2.3 L7 1.2 L14 4.3 L21 0.7 L28 3.6 L35 2.6 L42 0.7 L49 3.4 L56 0.5 L63 3.0 L70 0.7 L77 0.9 L84 2.9 L91 5.4 L98 1.1 L105 1.7 L112 4.2 L119 6.2 L126 3.9 L133 2.8 L140 2.3 L140 10Z'/%3E%3C/svg%3E");
  --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M0 0 L0 7.7 L7 7.2 L14 6.1 L21 3.8 L28 5.8 L35 8.3 L42 8.9 L49 4.6 L56 7.1 L63 9.1 L70 9.3 L77 7.0 L84 9.5 L91 6.6 L98 9.3 L105 7.4 L112 6.4 L119 9.3 L126 5.7 L133 8.8 L140 7.7 L140 0Z'/%3E%3C/svg%3E");
  --torn-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='140' viewBox='0 0 10 140'%3E%3Cpath d='M10 0 L6.4 0 L0.6 7 L5.6 14 L2.1 21 L1.2 28 L1.0 35 L2.2 42 L5.4 49 L1.4 56 L3.9 63 L4.3 70 L2.6 77 L3.7 84 L0.7 91 L0.7 98 L1.6 105 L4.5 112 L3.0 119 L2.2 126 L3.9 133 L6.4 140 L10 140Z'/%3E%3C/svg%3E");
  --torn-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='140' viewBox='0 0 10 140'%3E%3Cpath d='M0 0 L3.6 0 L6.1 7 L7.8 14 L7.0 21 L5.5 28 L8.4 35 L9.3 42 L9.3 49 L6.3 56 L7.4 63 L5.7 70 L6.1 77 L8.6 84 L4.6 91 L7.8 98 L9.0 105 L8.8 112 L7.9 119 L4.4 126 L9.4 133 L3.6 140 L0 140Z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sh-paper);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(242, 188, 56, 0.10), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 70%),
    var(--sh-navy);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus: 3px gold ring with a 2px ink separator, on light and dark surfaces alike */
:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sh-ink); border-radius: 4px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  padding: 12px 16px; background: var(--sh-paper); color: var(--sh-ink); font-weight: 700; border-radius: 10px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 48px 0; }
.section-head { text-align: center; margin: 0 auto 24px; max-width: 40rem; }
.section-head p { margin: 8px 0 0; color: #e9dcb9; font-size: 1.0625rem; }

/* Headings: Bangers 400, never bold or italic, short */
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-style: normal; letter-spacing: 0.02em; margin: 0; }
h2 { font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.1; color: var(--sh-gold); }
h2 .slash { position: relative; display: inline-block; padding: 0 0.3em; }
h2 .slash::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 52%; height: 0.42em;
  background: var(--sh-red); transform: skewX(-14deg) rotate(-2deg); border-radius: 2px; opacity: 0.9;
}
h3 { font-size: 1.5rem; line-height: 1.15; color: var(--sh-ink); }

/* ---- THE SCAVENGERS lockup (static copy of the game's GameTitle) ---- */
.scav-title-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; font-family: var(--display); line-height: 0.9; margin: 0; letter-spacing: 0; }
.scav-word { position: relative; display: flex; font-size: clamp(3rem, 15.5vw, 6.4rem); letter-spacing: 0.01em; padding: 0 0.12em; }
.scav-letter { position: relative; display: inline-block; }
.scav-letter-back {
  position: absolute; inset: 0; color: #2a1204;
  -webkit-text-stroke: 0.14em #140802; paint-order: stroke fill;
  text-shadow:
    0.02em 0.02em 0 #3b1a06, 0.04em 0.04em 0 #3b1a06, 0.06em 0.06em 0 #3b1a06,
    0.08em 0.08em 0 #2f1404, 0.10em 0.10em 0 #2f1404, 0.12em 0.12em 0 #241003,
    0.14em 0.16em 0.05em rgba(0, 0, 0, 0.55), 0.1em 0.24em 0.35em rgba(0, 0, 0, 0.6);
}
.scav-letter-front {
  position: relative; color: transparent;
  background-image: linear-gradient(180deg, #fff7c8 0%, #ffd84a 30%, #ffad1f 55%, #e8641a 78%, #a8320c 100%);
  -webkit-background-clip: text; background-clip: text;
}
.scav-the {
  align-self: flex-start; position: relative; z-index: 2;
  margin: 0 0 -0.15em 6%; padding: 0.05em 0.45em 0.02em;
  font-size: clamp(1.3rem, 6vw, 2.4rem); letter-spacing: 0.12em;
  color: #ffe9a6; background: #120a05; border: 3px solid #e2a63a; box-shadow: 4px 4px 0 #6b2b0b;
  transform: rotate(-8deg);
}
.scav-ribbon {
  position: relative; z-index: 2; margin-top: 0.35em; padding: 0.18em 1.1em 0.12em;
  font-size: clamp(1.05rem, 5vw, 1.9rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff3d4; text-shadow: 2px 2px 0 #4a0f05;
  background: linear-gradient(180deg, #c8321e, #8e1c10); border: 3px solid #1a0b04;
  box-shadow: 0 5px 0 #1a0b04, 0 10px 18px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  transform: rotate(-2deg);
}

/* ---- Torn paper (static copy of the game's PAPER SCROLL) ---- */
.paper { --tear: 10px; position: relative; isolation: isolate; color: var(--sh-ink); padding: 24px 20px; }
.paper-card { --tear: 7px; }
.paper::before, .paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: var(--torn-top), var(--torn-bottom), var(--torn-left), var(--torn-right), linear-gradient(#000, #000);
  mask-image: var(--torn-top), var(--torn-bottom), var(--torn-left), var(--torn-right), linear-gradient(#000, #000);
  -webkit-mask-position: left top, left bottom, left top, right top, center;
  mask-position: left top, left bottom, left top, right top, center;
  -webkit-mask-size: calc(var(--tear) * 14) var(--tear), calc(var(--tear) * 14) var(--tear), var(--tear) calc(var(--tear) * 14), var(--tear) calc(var(--tear) * 14), calc(100% - var(--tear) * 1.8) calc(100% - var(--tear) * 1.8);
  mask-size: calc(var(--tear) * 14) var(--tear), calc(var(--tear) * 14) var(--tear), var(--tear) calc(var(--tear) * 14), var(--tear) calc(var(--tear) * 14), calc(100% - var(--tear) * 1.8) calc(100% - var(--tear) * 1.8);
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
}
.paper::before {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(122, 72, 24, 0.26) 100%),
    radial-gradient(circle at 84% 22%, rgba(160, 105, 40, 0.13) 0 7%, rgba(160, 105, 40, 0.05) 11%, transparent 15%),
    radial-gradient(circle at 10% 80%, rgba(160, 105, 40, 0.11) 0 6%, transparent 12%),
    radial-gradient(ellipse at 14% 4%, rgba(255, 255, 255, 0.55), transparent 42%),
    var(--sh-paper);
}
.paper::after { z-index: -2; background: rgba(3, 8, 18, 0.6); transform: translate(3px, 5px); }
.paper-card::after { transform: translate(2px, 3px); }
.paper p { margin: 8px 0 0; }
.paper .muted { color: var(--sh-muted); }
.paper a:not(.steam-btn) { color: var(--sh-blue); font-weight: 600; text-underline-offset: 2px; }

/* ---- Buttons: the steam plates (gold = the one main action) ---- */
.steam-btn {
  --st-hi: #ffe7a1; --st-top: #f6c955; --st-mid: var(--sh-gold); --st-low: #d39a2c; --st-lip: var(--sh-brass); --st-rivet: #8a5a17;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 34px;
  border: 2px solid var(--sh-ink); border-radius: 10px;
  background:
    radial-gradient(circle at 13px 50%, #fff4cf 0 1.1px, var(--st-rivet) 1.5px 2.6px, transparent 3.1px),
    radial-gradient(circle at calc(100% - 13px) 50%, #fff4cf 0 1.1px, var(--st-rivet) 1.5px 2.6px, transparent 3.1px),
    linear-gradient(180deg, var(--st-hi) 0%, var(--st-top) 16%, var(--st-mid) 52%, var(--st-low) 100%);
  color: var(--sh-ink); font-family: var(--body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: 0.01em;
  text-decoration: none; text-shadow: 0 1px 0 rgba(255, 246, 227, 0.55);
  box-shadow: inset 0 2px 0 rgba(255, 248, 220, 0.8), inset 0 -3px 0 rgba(40, 20, 4, 0.4), 0 4px 0 var(--st-lip), 0 7px 12px rgba(0, 0, 0, 0.45);
  transition: transform 100ms ease, box-shadow 100ms ease, filter 120ms ease;
}
@media (hover: hover) { .steam-btn:hover { filter: brightness(1.06); } }
.steam-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 248, 220, 0.55), inset 0 -2px 0 rgba(40, 20, 4, 0.35), 0 1px 0 var(--st-lip), 0 2px 4px rgba(0, 0, 0, 0.4); }
.steam-btn:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 3px; box-shadow: 0 0 0 2px var(--sh-ink), 0 4px 0 var(--st-lip); }
.steam-btn svg { width: 22px; height: 22px; flex: none; }

/* "Coming soon to Google Play": not a link, deliberately inactive (inactive paper + ink) */
.store-soon {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 8px 18px 8px 14px;
  border: 2px dashed var(--sh-disabled-ink); border-radius: 10px;
  background: var(--sh-disabled-bg); color: var(--sh-disabled-ink); line-height: 1.15; text-align: left;
}
.store-soon svg { width: 26px; height: 26px; flex: none; }
.store-soon small { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.store-soon strong { display: block; font-size: 1.125rem; font-weight: 700; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cta-note { margin: 12px 0 0; font-size: 0.9375rem; color: #e9dcb9; }

/* ---- Hero ---- */
.hero { padding: 20px 0 40px; overflow-x: clip; }
.hero-emblem { width: 112px; height: 112px; margin-bottom: 12px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pitch { margin: 28px 0 0; max-width: 34rem; font-size: clamp(1.125rem, 4.4vw, 1.3125rem); line-height: 1.45; font-weight: 500; color: var(--sh-paper); }
.pitch strong { color: var(--sh-gold); font-weight: 700; }
.hero .cta-row { justify-content: center; margin-top: 24px; }
.hero .cta-note { text-align: center; }

.fan { --card: min(190px, 41vw); position: relative; height: calc(var(--card) * 1.78 + 56px); max-width: 420px; width: 100%; margin: 0 auto; }
.fan img {
  position: absolute; top: 18px; left: 50%; width: var(--card); height: auto; aspect-ratio: 440 / 782; object-fit: cover;
  border: 4px solid #1a0b04; border-radius: 10px; outline: 2px solid var(--sh-brass); outline-offset: -8px;
  box-shadow: 0 10px 0 rgba(3, 8, 18, 0.45), 0 18px 30px rgba(0, 0, 0, 0.5);
  background: var(--sh-slate);
}
.fan img:nth-child(1) { transform: translateX(-118%) rotate(-11deg); }
.fan img:nth-child(2) { transform: translateX(-50%) translateY(-10px); z-index: 2; }
.fan img:nth-child(3) { transform: translateX(18%) rotate(10deg); }

@media (min-width: 900px) {
  .hero { padding: 48px 0 64px; }
  .hero-emblem { width: 136px; height: 136px; margin-bottom: 16px; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero .cta-row { justify-content: flex-start; }
  .hero .cta-note { text-align: left; }
  .fan { --card: 250px; height: 500px; max-width: 520px; }
  .fan img { top: 24px; }
}

/* ---- What you do ---- */
.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.do-card { padding: 16px 16px 22px; }
.do-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 2px solid var(--sh-ink); margin-bottom: 14px; background: var(--sh-slate); }

/* ---- Look out (hazards) ---- */
.hazards { display: grid; gap: 20px; }
.hazard { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.hazard img { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid #1a0b04; border-radius: 8px; box-shadow: 0 6px 0 rgba(3, 8, 18, 0.5); background: var(--sh-slate); }
.hazard h3 { color: var(--sh-gold); }
.hazard p { margin: 6px 0 0; color: #e9dcb9; }
@media (min-width: 760px) {
  .hazards { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .hazard { grid-template-columns: 1fr; text-align: center; }
  .hazard img { width: 100%; max-width: 300px; margin: 0 auto 4px; }
}
.small-print { margin: 24px auto 0; max-width: 40rem; text-align: center; font-size: 0.9375rem; color: #cfc3a3; }

/* ---- How it works ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 24px 20px 24px 84px; min-height: 120px; }
.step::marker { content: none; }
.step-num {
  position: absolute; left: 18px; top: 22px; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--sh-ink);
  background: radial-gradient(circle at 35% 30%, #ffe7a1, var(--sh-gold) 45%, #b9781e 100%);
  border: 2px solid var(--sh-ink); box-shadow: 0 3px 0 var(--sh-brass);
}

/* ---- The cast ---- */
.cast-card { padding: 0 0 22px; overflow: visible; }
.cast-art { height: 240px; margin: 10px 10px 16px; border-radius: 8px; overflow: hidden; display: grid; place-items: end center; background: radial-gradient(ellipse at 50% 70%, #36505f, var(--sh-slate) 55%, #1a2a35 100%); border: 2px solid var(--sh-ink); }
.cast-art img { height: 100%; width: auto; object-fit: contain; }
.cast-art.photo { place-items: center; }
.cast-art.photo img { height: 210px; width: 210px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sh-brass); }
.cast-art.cover img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.cast-card h3, .cast-card p { padding: 0 20px; }
.role { display: block; margin-top: 2px; font-family: var(--body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted); }

/* ---- Where to hunt ---- */
.where { position: relative; isolation: isolate; }
.where::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sh-navy) 0%, rgba(16, 35, 45, 0.72) 22%, rgba(16, 35, 45, 0.72) 78%, var(--sh-navy) 100%), url("/landing/img/map.webp") center / cover no-repeat;
  opacity: 0.9;
}
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.city-tag { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--sh-green); color: var(--sh-paper-light); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.city-card ul { margin: 10px 0 0; padding-left: 1.2em; }
.city-card li { margin-top: 4px; }

/* ---- Get the game ---- */
.get { text-align: center; max-width: 44rem; margin: 0 auto; padding: 36px 24px; }
.get h2 { color: var(--sh-ink); }
.get .cta-row { justify-content: center; margin-top: 22px; }
.get .note { margin: 16px auto 0; max-width: 32rem; color: var(--sh-muted); font-size: 0.9375rem; }

/* ---- Footer ---- */
.footer { margin-top: 24px; padding: 28px 0 40px; border-top: 2px solid rgba(185, 120, 30, 0.45); color: #d9cca8; font-size: 0.9375rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; }
.footer a { display: inline-flex; align-items: center; min-height: 48px; color: var(--sh-paper); font-weight: 600; text-underline-offset: 3px; }
.footer p { margin: 4px 0; }
.todo { background: #fff0b3; color: var(--sh-ink); padding: 0 6px; border: 1px dashed var(--sh-red); border-radius: 4px; font-weight: 600; }

/* ---- Document pages (privacy policy) ---- */
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.brand-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.03em; color: var(--sh-gold); }
.brand-link img { width: 44px; height: 44px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }
.back-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--sh-paper); font-weight: 600; }
.doc { max-width: 780px; margin: 8px auto 32px; padding: 32px 24px 36px; }
.doc h1 { font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.05; color: var(--sh-ink); }
.doc h2 { font-size: 1.75rem; color: var(--sh-ink); margin-top: 32px; }
.doc ul { padding-left: 1.25em; }
.doc li { margin-top: 8px; }
.doc .updated { color: var(--sh-muted); font-weight: 600; }
.doc .note-box { margin: 16px 0 0; padding: 12px 14px; border: 2px dashed var(--sh-brass); border-radius: 8px; background: rgba(255, 246, 227, 0.7); }
@media (min-width: 640px) { .doc { padding: 44px 48px 48px; } }

@media (prefers-reduced-motion: reduce) {
  .steam-btn { transition: none; }
}