/* Colours are the game's (src/game/game.cpp: INK, CREAM, MUTED, GOLD, STONE, CORAL, TEAL). */
@font-face { font-family: "Jersey 25"; src: url(fonts/Jersey25-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Jersey 15"; src: url(fonts/Jersey15-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --ink: #100d12;
  --ink-2: #1b1520;
  --cream: #ffeecc;
  --muted: #b8ada8;
  --gold: #ffcc54;
  --gold-dark: #8a5a12;
  --stone: #784f87;
  --coral: #f27360;
  --teal: #33a8bd;
  --rule: #3a2e40;
  --display: "Jersey 25", "Jersey 15", monospace;
  --body: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 18px/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
}
img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--cream); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* header */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 14px; flex-wrap: wrap; }
.mark { font: 34px/1 var(--display); color: var(--gold); text-decoration: none; letter-spacing: 1px;
        text-shadow: 2px 2px 0 var(--gold-dark); }
.mark:hover { color: var(--gold); }
nav { display: flex; gap: 24px; font: 24px/1 var(--display); }
nav a { color: var(--muted); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--cream); }
nav a[aria-current] { color: var(--cream); border-bottom-color: var(--gold); }

/* placeholder copy the user still has to write */
.ph { color: var(--muted); font-style: italic; }

/* home */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; align-items: center; padding: 64px 0 72px; }
/* the tagline stays on one line and shrinks to fit its column instead of wrapping */
.hero > div { container-type: inline-size; }
.hero h1 { font: min(84px, 13.4cqi)/0.95 var(--display); white-space: nowrap; color: var(--cream); margin: 0 0 20px; letter-spacing: 1px;
           text-shadow: 3px 3px 0 var(--ink-2); }
.hero h1 span { display: inline-block; color: var(--gold); text-shadow: 3px 3px 0 var(--gold-dark);
                animation: hop 4s steps(1) infinite; }
@keyframes hop { 0%, 82%, 100% { transform: none; } 85%, 91% { transform: translateY(-8%); } 88% { transform: translateY(-14%); } }
.stores { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 36px; }
.stores img { display: block; height: 60px; width: auto; }
.stores a { display: block; transition: transform .08s steps(2); }
.stores a:hover { transform: translate(-2px, -3px); }
.shot { margin: 0; justify-self: center; }
.shot img { display: block; width: 100%; max-width: 360px; height: auto; border: 2px solid var(--stone);
            box-shadow: 10px 10px 0 var(--ink-2), 10px 10px 0 2px var(--rule); }


/* feature cards */
.cards { border-top: 1px solid var(--rule); padding: 48px 0 64px; }
.cards ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards li { background: var(--ink-2); border: 2px solid var(--stone); box-shadow: 6px 6px 0 var(--rule);
            transition: transform .1s steps(2), box-shadow .1s steps(2); }
.cards li:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--rule); border-color: var(--gold); }
.cards img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--stone); }
.cards h2 { font: 30px/1.05 var(--display); color: var(--gold); margin: 16px 16px 6px; }
.cards p { margin: 0 16px 18px; font-size: 16px; color: var(--cream); }

/* text pages */
.page { max-width: 680px; padding: 56px 16px 80px; margin: 0 auto; }
.page h1 { font: 56px/1 var(--display); margin: 0 0 8px; color: var(--cream); }
.page h2 { font: 30px/1.1 var(--display); margin: 44px 0 10px; color: var(--gold); }
.page h3 { font: 18px/1.3 var(--body); font-weight: bold; margin: 24px 0 6px; }
.page .date { color: var(--muted); margin: 0 0 32px; font-size: 16px; }
.page ul, .page ol { padding-left: 1.3em; }
.page li { margin: 4px 0; }
.page table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 12px 0; }
.page th, .page td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
.page th { color: var(--muted); font-weight: normal; }
.rules li::marker { color: var(--gold); font-family: var(--display); }
.pieces { padding-left: 0 !important; list-style: none; }
.pieces li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.pieces b { font: 26px/1 var(--display); font-weight: normal; color: var(--gold); margin-right: 10px; }

footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px; }
footer .wrap { padding-top: 20px; padding-bottom: 32px; }
footer p { margin: 14px 0 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--cream); }
.legal { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 15px/1.5 var(--body); }

/* support FAQ */
.faq details { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: bold; }
.faq summary::marker { color: var(--gold); }
.faq details p { margin: 8px 0 4px; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 span { animation: none; }
  .cards li, .stores a { transition: none; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .mark { font-size: 28px; }
  nav { gap: 18px; font-size: 22px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 48px; }
  .shot img { max-width: 300px; }
  .cards ul { grid-template-columns: 1fr; }
  .page { padding-top: 40px; }
  .page h1 { font-size: 44px; }
}