/* Oddmallow Studio: one narrow, phone-width column on every screen. */
:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #e5e5ea;
  --link: #0a7d6e;
  --accent: #e2457b;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* Header */
header { padding: 32px 0 8px; text-align: center; }
.logo { display: inline-block; position: relative; line-height: 0; }
.logo img { width: 303px; max-width: 100%; height: auto; image-rendering: pixelated; }
.logo .wink { position: absolute; inset: 0; opacity: 0; }
.logo:hover .wink, .logo:focus-visible .wink { opacity: 1; }
.logo:hover .rest, .logo:focus-visible .rest { opacity: 0; }

/* Sections */
h1 { font-size: 24px; line-height: 1.3; margin: 24px 0 8px; }
h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 36px 0 12px; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p { margin: 0 0 14px; }
.muted { color: var(--muted); }

/* Game list */
.games { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.games li { border-bottom: 1px solid var(--line); }
.game { display: flex; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; color: var(--text); }
.game:hover { color: var(--text); }
.game:hover strong { color: var(--accent); }
.game img { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.game strong { display: block; font-size: 17px; }
.game span { color: var(--muted); font-size: 15px; }

/* Facts list */
dl.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 140px; color: var(--muted); }
.facts dd { margin: 0; }

/* Section titles drawn as pixel art (2x) */
.pixel-title { margin: 36px 0 14px; line-height: 0; }
.pixel-title img { image-rendering: pixelated; }
/* DOWNLOAD: the arrow drops into the tray, the tray lights up, the arrow comes back (7 frames, 2x). */
.title-download {
  display: inline-block; width: 156px; height: 30px; image-rendering: pixelated;
  background: url("/assets/title-download.png") 0 0 / 1092px 30px no-repeat;
  animation: download 1.4s infinite;
}
@keyframes download {
  0%     { background-position: 0 0; animation-timing-function: steps(1, end); }
  17.86% { background-position: 16.6667% 0; animation-timing-function: steps(1, end); }
  25%    { background-position: 33.3333% 0; animation-timing-function: steps(1, end); }
  32.14% { background-position: 50% 0; animation-timing-function: steps(1, end); }
  39.29% { background-position: 66.6667% 0; animation-timing-function: steps(1, end); }
  50%    { background-position: 83.3333% 0; animation-timing-function: steps(1, end); }
  71.43% { background-position: 100% 0; animation-timing-function: steps(1, end); }
  100%   { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { .title-download { animation: none; } }

/* Game page: the same row as the game list, then everything else centred */
.detail { text-align: center; }
.hero { display: flex; gap: 16px; align-items: center; text-align: left; margin-top: 16px; }
.hero img { width: 96px; height: 96px; border-radius: 22px; flex: none; }
.hero h1 { margin: 0 0 4px; }
.hero p { margin: 0; color: var(--muted); }
.detail dl.facts { text-align: left; margin-top: 24px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 20px; }
.shots img { width: 100%; height: auto; border-radius: 12px; image-rendering: pixelated; }
.store {
  display: inline-block; margin: 4px 0 8px; padding: 10px 18px; border-radius: 10px;
  background: var(--text); color: #fff; text-decoration: none; font-weight: 600;
}
.store[aria-disabled="true"] { background: var(--line); color: var(--muted); pointer-events: none; }
.thanks { margin-top: 32px; font-weight: 700; letter-spacing: .04em; display: flex; gap: 6px; align-items: center; justify-content: center; }
/* The mascot plays the splash logo's loop, then winks: same frames and times as studio.json. */
.mascot {
  width: 20px; height: 24px; flex: none;
  background: url("/assets/mascot-sheet.png") 0 0 / 140px 24px no-repeat;
  image-rendering: pixelated;
  /* Capitals sit high in their line box and the mascot's frames carry two empty rows on top:
     lift it so its body lines up with the middle of the capitals. */
  position: relative; top: -3px;
  animation: mascot 2s infinite;
}
@keyframes mascot {
  0%    { background-position: 0 0; animation-timing-function: steps(1, end); }
  10%   { background-position: 16.6667% 0; animation-timing-function: steps(1, end); }
  14.5% { background-position: 33.3333% 0; animation-timing-function: steps(1, end); }
  24.5% { background-position: 16.6667% 0; animation-timing-function: steps(1, end); }
  29%   { background-position: 0 0; animation-timing-function: steps(1, end); }
  34%   { background-position: 50.0000% 0; animation-timing-function: steps(1, end); }
  38.5% { background-position: 66.6667% 0; animation-timing-function: steps(1, end); }
  48.5% { background-position: 50.0000% 0; animation-timing-function: steps(1, end); }
  53%   { background-position: 0 0; animation-timing-function: steps(1, end); }
  66%   { background-position: 83.3333% 0; animation-timing-function: steps(1, end); }
  70%   { background-position: 100.0000% 0; animation-timing-function: steps(1, end); }
  100%  { background-position: 100.0000% 0; }
}
@media (prefers-reduced-motion: reduce) { .mascot { animation: none; } }

/* Legal text */
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0 16px; }
th, td { text-align: left; vertical-align: top; padding: 8px; border: 1px solid var(--line); }
th { background: #f5f5f7; }

/* Footer */
footer { margin-top: 48px; padding: 20px 0 40px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; color: var(--muted); }
footer nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
footer p { margin: 4px 0; }

/* Apple's official badge (Apple Marketing Tools): never redraw or recolour it; at least 40px tall. */
.badge { display: inline-block; line-height: 0; margin: 4px 0 8px; }
.badge img { height: 40px; width: auto; }

/* HOME: the studio bar (2x pixel art) with a tall little house standing on its left end, rising above it. */
.home-button { position: relative; display: inline-block; width: 280px; height: 34px; margin-top: 74px; }
.home-button .bar { position: absolute; left: 0; bottom: 0; width: 280px; height: 34px; image-rendering: pixelated; }
.home-button .house {
  position: absolute; left: 6px; bottom: 2px; width: 72px; height: 96px;
  background: url("/assets/home-house.png") 0 0 / 288px 96px no-repeat; image-rendering: pixelated;
  animation: smoke 1.2s steps(1, end) infinite;
}
@keyframes smoke {
  0%   { background-position: 0 0; }
  25%  { background-position: 33.3333% 0; }
  50%  { background-position: 66.6667% 0; }
  75%  { background-position: 100% 0; }
}
.home-button:hover .bar, .home-button:focus-visible .bar { filter: brightness(1.08); }
.home-button:hover .house { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .home-button .house { animation: none; } .home-button:hover .house { transform: none; } }

/* PREV / NEXT between games */
.pager { display: flex; justify-content: space-between; margin: 24px 0 0; padding: 8px 16px; background: #f5f5f7; border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.pager a { text-decoration: none; }
.pager span { color: #c7c7cc; }