/* Maatjie Arena website. House style from STYLE.md 2.3 (tokens), 10 (type)
   and 11 (spacing and the sticker lip). Light theme only, like the game.
   The fonts are WOFF2 subsets of the game's own (tools/site/subset_fonts.py). */

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: optional;
}

:root {
  --canvas: #FFF6E9;
  --canvas-deep: #FBE7CC;
  --surface: #FFFFFF;
  --sunk: #FDF0DE;
  --line: #EBDDCB;
  --lip: #E6CFAF;
  --ink: #2B2233;
  --ink-soft: #5A4E63;
  --sky: #6EC6E8;
  --sky-soft: #EEF8FA;
  --sky-line: #B5DDEB;
  --sky-deep: #2E86C1;
  --primary: #6C4BD8;
  --primary-deep: #4A2FA8;
  --primary-soft: #EDE7FF;
  --primary-line: #C9BBF5;
  --sun: #FFB938;
  --sun-deep: #D98A0B;
  --sun-soft: #FFF1D1;
  --sun-line: #F5D48A;
  --mint-soft: #DDF5E9;
  --mint-line: #A6E0C4;
  --mint-deep: #1A7049;
  --coral-soft: #FFE6E1;
  --coral-line: #F7B8AE;
  --spark: #F5C400;
  --tide: #2F8FD8;
  --leaf: #3FA34D;
  --stone: #9A8672;
  --ember: #E8552B;
  --radius: 24px;
  --gutter: 16px;
  --page: 1148px;
  --display: "Fredoka", "Nunito", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Nunito", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 600 1.0625rem/1.6 var(--body);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); margin-top: 40px; }
h3 { font-size: 1.2rem; margin-top: 24px; }
p, ul, ol { margin: 0 0 16px; }
li { margin: 4px 0; }
a { color: var(--primary-deep); font-weight: 800; text-underline-offset: 3px; }
a:hover { color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
strong { font-weight: 800; }

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 12px;
  z-index: 10;
}
.skip:focus { top: 8px; }

/* While a publisher fact in site.config.json is still a placeholder, every
   page says it is a preview (site/README.md, "Publisher facts"). */
.preview-ribbon {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  margin: 0;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font: 800 .8125rem/1.4 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---- buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 16px;
  font: 800 1.0625rem/1.2 var(--body);
  letter-spacing: .3px;
  text-decoration: none;
  text-align: center;
  border: 0;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.button-play {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--primary-deep);
}
.button-play:hover { color: #FFFFFF; background: #7A5BE0; }
.button-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-deep); }
.button-soft {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--lip);
}
.button-soft:hover { color: var(--ink); background: var(--sunk); }
.button-big { min-height: 60px; padding: 14px 28px; font-size: 1.15rem; border-radius: 20px; }
.button-note { display: block; font-size: .8rem; font-weight: 700; opacity: .9; }
.soon {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 18px;
  border: 2px dashed var(--lip);
  border-radius: 16px;
  color: var(--ink-soft);
  font-weight: 800;
}

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

.site-header {
  background: var(--sky);
  border-bottom: 3px solid var(--ink);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 10px var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
  font: 600 1.35rem/1 var(--display);
}
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.site-header .button-play { min-height: 48px; padding: 8px 18px; box-shadow: 0 3px 0 var(--primary-deep); }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}
.nav-list a:hover { background: rgba(255, 255, 255, .45); }
.nav-list a[aria-current="page"] { background: var(--surface); box-shadow: 0 3px 0 var(--sky-deep); }

.nav-wide { display: none; }
.nav-narrow { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 10px; }
.nav-narrow summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--ink);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.nav-narrow summary::-webkit-details-marker { display: none; }
.nav-narrow summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-radius: 2px;
  transform: translateY(-3px) rotate(45deg);
}
.nav-narrow[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-narrow .nav-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  padding: 8px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 20px;
}
.nav-narrow .nav-list a[aria-current="page"] { background: var(--sky-soft); box-shadow: none; }

@media (min-width: 900px) {
  :root { --gutter: 24px; }
  .nav-narrow { display: none; }
  .nav-wide { display: block; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 10px; }
  .nav-wide .nav-list { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -14px; }
}

/* ---- main column -------------------------------------------------------- */

main { display: block; max-width: var(--page); margin: 0 auto; padding: 8px var(--gutter) 56px; }
.article { max-width: 760px; margin: 0 auto; }
.wide { max-width: 1100px; margin: 0 auto; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }

.trail { max-width: 760px; margin: 8px auto 4px; font-size: .9rem; }
.trail.wide-trail { max-width: 1100px; }
.section-intro .ad { margin-left: 0; }
.trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.trail li { margin: 0; display: flex; align-items: center; }
.trail li + li::before { content: "\203A"; margin: 0 8px; color: var(--ink-soft); }
.trail a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-soft); }
.trail span { color: var(--ink-soft); font-weight: 700; }

.page-head { margin: 16px 0 24px; }

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--lip);
  padding: 20px;
  margin: 0 0 20px;
}
.card > :last-child { margin-bottom: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.tone-sun { background: var(--sun-soft); border-color: var(--sun-line); box-shadow: 0 4px 0 var(--sun-line); }
.tone-mint { background: var(--mint-soft); border-color: var(--mint-line); box-shadow: 0 4px 0 var(--mint-line); }
.tone-sky { background: var(--sky-soft); border-color: var(--sky-line); box-shadow: 0 4px 0 var(--sky-line); }
.tone-primary { background: var(--primary-soft); border-color: var(--primary-line); box-shadow: 0 4px 0 var(--primary-line); }

figure { margin: 24px 0; }
figure img { display: block; margin: 0 auto; }
figcaption { margin-top: 8px; text-align: center; font-size: .92rem; color: var(--ink-soft); }
.frame {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sky-soft);
}
.frame img { width: 100%; }
.stage-strip { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 16px 0 24px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 16px 0 24px; }
.grid-arenas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 160px), 1fr)); margin: 16px 0 24px; }
.grid-arenas .tile { margin: 0; padding: 8px 8px 10px; }
.grid-arenas img { border-radius: 12px; }
.grid-arenas figcaption { margin-top: 6px; font-weight: 800; color: var(--ink); }
/* an arena shown by name only, until its picture is redrawn in the house style */
.grid-arenas .tile-text {
  justify-content: center;
  text-align: center;
  background: var(--sky-soft);
  border-color: var(--sky-line);
  box-shadow: 0 4px 0 var(--sky-line);
}
.grid-arenas .tile-text p { margin: 4px 0 0; font-size: .9rem; }
.grid-gear { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); margin: 16px 0 24px; }

.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--lip);
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
}
a.tile:hover { border-color: var(--primary-line); box-shadow: 0 4px 0 var(--primary-line); color: var(--ink); }
a.tile:hover h3 { color: var(--primary-deep); }
.tile h3 { margin: 4px 0 6px; }
.tile p { margin: 0; font-weight: 600; color: var(--ink-soft); }
.tile img { align-self: center; }
.tile .icon { width: 48px; height: 48px; align-self: flex-start; }
.h3 { font-size: 1.2rem; margin-top: 4px; }

/* a list whose items are each one link: every link a 48 px target */
.link-list { list-style: none; padding: 0; }
.link-list li { margin: 0; }
.link-list li > a { display: inline-flex; align-items: center; min-height: 48px; }
.tile .more { margin-top: auto; padding-top: 10px; color: var(--primary-deep); font-weight: 800; }

.gear-card { text-align: center; padding: 12px; }
.gear-card img { width: 100%; max-width: 200px; }
.gear-card .gear-name { margin: 6px 0 2px; font: 600 1.05rem/1.2 var(--display); color: var(--ink); }
.gear-card p { font-size: .9rem; }

.pill {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: .85rem;
  font-weight: 800;
}
.pill-spark { background: #FFF3B8; color: #5C4600; }
.pill-tide { background: #DCEEFB; color: #154A73; }
.pill-leaf { background: #DFF2E2; color: #1E5A28; }
.pill-stone { background: #EFE9E3; color: #4A3E33; }
.pill-ember { background: #FFE3D9; color: #8A2A0F; }

.facts { display: grid; gap: 8px 16px; grid-template-columns: max-content 1fr; margin: 0 0 16px; }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; }
address { font-style: normal; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 16px; }
.card > .steps:last-child > li:last-child { margin-bottom: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 52px;
  margin: 0 0 16px;
  min-height: 40px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
  font: 600 1.1rem/34px var(--display);
  text-align: center;
}

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 34px; margin: 0 0 10px; }
.checks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 9px;
  border-left: 4px solid var(--mint-deep);
  border-bottom: 4px solid var(--mint-deep);
  border-radius: 2px;
  transform: rotate(-45deg);
}

.table-wrap { overflow-x: auto; margin: 0 0 20px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-family: var(--display); font-weight: 600; background: var(--sunk); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
/* a link that is a cell's whole content is a target of its own: 48 px tall,
   taking the cell's padding so the row does not grow */
td > a:only-child { display: inline-flex; align-items: center; min-height: 48px; margin-block: -10px; }

/* the published drop tables (docs/drop-tables.html) */
.drop-tables .note, .drop-tables .how { color: var(--ink-soft); }

/* ---- home --------------------------------------------------------------- */

.hero { display: grid; gap: 24px; align-items: center; margin: 16px 0 32px; }
.hero-text { text-align: center; }
.hero-text .wordmark { width: 240px; margin: 0 auto 8px; display: block; }
.hero-text h1 { margin-bottom: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; margin: 20px 0 12px; }
.hero-art { border: 3px solid var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 6px 0 var(--lip); background: #BFE2F8; }
.hero-art img { display: block; width: 100%; }
.trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.trust li { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); font-size: .9rem; font-weight: 800; }
/* the FAQ's topic pills are links: the link is the whole pill, 48 px tall */
.topics li { padding: 0; }
.topics a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 999px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 5fr 6fr; gap: 40px; }
  .hero-text { text-align: left; }
  .hero-text .wordmark { margin: 0 0 8px; }
  .hero-actions, .trust { justify-content: flex-start; }
}

.species-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); margin: 16px 0 24px; }
.species-card { align-items: center; text-align: center; padding: 12px 12px 16px; }
.species-card img { width: 100%; max-width: 180px; }
.species-card h3 { margin: 2px 0 2px; }

.section-intro { max-width: 760px; }
.cta {
  display: grid;
  gap: 16px;
  align-items: center;
  background: var(--primary-soft);
  border: 3px solid var(--ink);
  border-radius: 28px;
  padding: 24px;
  margin: 40px 0 0;
}
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0; }
.cta .hero-actions { margin: 0; justify-content: flex-start; }
@media (min-width: 900px) { .wide .cta { grid-template-columns: 1fr auto; } }

/* ---- ads: a fixed 300 x 250 box, so nothing ever shifts ------------------- */

.ad { margin: 32px auto; width: 300px; max-width: 100%; text-align: center; }
.ad-label { margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); }
.ad-unit { display: inline-block; width: 300px; height: 250px; background: var(--sunk); border-radius: 12px; overflow: hidden; }
.ad-unit-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--lip);
  color: var(--ink-soft);
  font-size: .9rem;
}
/* On a phone narrower than the unit plus its gutters (320 px is common on
   small, older phones), the box takes the gutters too, so the 300 px unit
   still fits with no sideways scroll. */
@media (max-width: 335px) {
  .ad, .section-intro .ad { width: auto; max-width: none; margin-inline: calc(var(--gutter) * -1); }
}

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

.site-footer { background: var(--surface); border-top: 3px solid var(--ink); }
.footer-inner {
  display: grid;
  gap: 24px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 32px var(--gutter) 8px;
  grid-template-columns: 1fr;
}
.footer-inner { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand img { display: block; margin-bottom: 8px; }
.footer-heading { font-size: 1.1rem; margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 48px; }
.footer-note { max-width: var(--page); margin: 0 auto; padding: 8px var(--gutter) 32px; font-size: .9rem; color: var(--ink-soft); }

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