/* Grotto Mercs public pages.
   One stylesheet for all pages. Kept deliberately small and dependency-free: these pages are
   read by store reviewers and by players on bad mobile connections, so nothing here should
   need a network round trip beyond the page itself. */

:root {
  --bg: #0f1117;
  --bg-raised: #171a23;
  --border: #272b38;
  --text: #e6e8ee;
  --text-dim: #a2a8b8;
  --accent: #d8a657;
  --accent-dim: #8a6a35;
  --max: 46rem;
  --display: "Special Elite", "Courier New", Courier, monospace;
}

/* The typewriter face from the game's title screen, for headings and the site name only; body
   text stays in the system font for readability. Served from this site rather than Google
   Fonts, so no visitor request goes to a third party. Apache 2.0, see fonts/LICENSE.txt.
   It has a single weight, so bold is switched off wherever it is used. */
@font-face {
  font-family: "Special Elite";
  src: url("fonts/special-elite.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* In-page links (privacy.html#crypto) land below the sticky header instead of under it. */
  scroll-padding-top: 6rem;
}

/* No image is ever wider than the column, whatever its own width attribute says. */
img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  /* 16px side gutter at phone width, never a horizontal scrollbar. */
  padding: 0 16px;
}

/* A full-height column, so the footer sits at the bottom of a short page. No top or bottom
   padding: the sticky header and footer carry that space, so they sit flush with the screen
   edges once stuck. */
.wrap {
  max-width: var(--max);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Header and footer stay on screen while the page scrolls between them. */
main {
  flex: 1;
  padding-bottom: 3rem;
}

/* ---------- masthead ---------- */

/* Sticky bars reach 1px past their screen edge (top: -1px, with 1px more padding to match),
   which closes the hairline gap a sticky bar can leave when it lands on a fraction of a pixel. */
header.site {
  position: sticky;
  top: -1px;
  z-index: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(2rem + 1px) 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

@media (max-width: 640px) {
  header.site {
    padding-top: calc(1rem + 1px);
  }
}

header.site a.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-size: 1.15rem;
}

header.site img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

nav.site {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

nav.site a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.94rem;
}

nav.site a:hover,
nav.site a:focus-visible {
  color: var(--accent);
}

/* ---------- type ---------- */

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.22rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 1.02rem;
  margin: 1.75rem 0 0.5rem;
  color: var(--accent);
}

/* Legal pages (body class "legal") keep plain headings: they are documents, not the game. */
header.site a.brand,
.stores-label,
body:not(.legal) :is(h1, h2, h3) {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The tagline under the banner reads as a sentence, so it keeps the body font. */
section.hero h1 {
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.85rem);
  letter-spacing: -0.01em;
}

p,
li {
  color: var(--text);
}

a {
  color: var(--accent);
}

.lede {
  font-size: 1.08rem;
  color: var(--text-dim);
  margin-top: 0;
}

.updated {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin: 0.4rem 0;
}

/* ---------- blocks ---------- */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}

.card h3 {
  margin-top: 0;
}

.card :last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  /* Long tables on a narrow screen scroll inside their own box rather than the page. */
  display: block;
  overflow-x: auto;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  word-break: break-word;
}

/* Content fades out as it reaches a sticky bar instead of being cut mid-letter. A hard cut can
   leave the top pixel of a list bullet or a letter showing beside the bar, which reads as a stray
   dot. */
header.site::after,
footer.site::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.25rem;
  pointer-events: none;
}

header.site::after {
  /* Past the 1px border, so the fade starts below the divider instead of painting over it. */
  top: calc(100% + 1px);
  background: linear-gradient(var(--bg), transparent);
}

footer.site::before {
  bottom: calc(100% + 1px);
  background: linear-gradient(transparent, var(--bg));
}

/* One compact row, links on the left and the copyright on the right, so the sticky footer takes
   little of the screen. It wraps only when the screen is too narrow. */
footer.site {
  position: sticky;
  bottom: -1px;
  z-index: 1;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Whole pixels only (line height, gap, padding): a bar whose height is fractional lands between
     pixels, and content scrolling under it shows through its blended edge as stray specks. */
  line-height: 24px;
  gap: 6px 24px;
  padding: 16px 0 17px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.88rem;
}

footer.site a {
  color: var(--text-dim);
}

footer.site nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

footer.site p {
  margin: 0;
}

/* ---------- landing page only ---------- */

.hero {
  padding: 1rem 0 0.5rem;
}

.banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 1.75rem;
}

/* Store badges. Same height for all three: Google requires its badge be no smaller than any
   other store's beside it, and Apple wants at least a quarter of the badge height clear around
   its own, which the gap provides. */
.stores-label {
  margin: 1.75rem 0 0.6rem;
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 1.75rem;
}

.stores a {
  display: block;
  line-height: 0;
}

.stores img {
  height: 48px;
  width: auto;
}

/* ---------- patch notes ---------- */

.note {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.release {
  padding: 0.25rem 0 1rem;
}

.release + .release {
  border-top: 1px solid var(--border);
}

.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

/* Version numbers stay in the plain font, a step grayer than body text, so the notes under them
   carry the weight. The extra .release outranks the display-font heading rule. */
.release .release-head h2 {
  margin: 1.5rem 0 0.25rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--text) 55%, var(--text-dim));
}

.release-date {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.release-platforms {
  color: var(--accent);
  font-size: 0.85rem;
  margin: 0;
}

/* Respect a light-mode preference rather than forcing dark on everyone. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfd;
    --bg-raised: #f2f3f7;
    --border: #dcdfe8;
    --text: #1a1d26;
    --text-dim: #5b6276;
    --accent: #8a6a1f;
    --accent-dim: #c4a35c;
  }
}