/* Plain reading pages (about, how-to-play, color-games, and privacy): a white sticker sheet on the page
   background, in the game's type. Unlike the game (app.css), these pages scroll.
   Not drawn in Paper yet. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--spacing-4)) var(--spacing-4) calc(env(safe-area-inset-bottom) + var(--spacing-10));
}
.page-header { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.page-logo {
  width: 145px;
  height: 32px;
  flex-shrink: 0;
  background: url(../../design/logo-full.png) -5.5px -8.5px / 157px no-repeat;
}
.page-back { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; }
.sheet {
  margin-top: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sticker);
}
.sheet h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-display);
}
.sheet h2 {
  margin: var(--spacing-8) 0 var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--text-button);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
}
.sheet h3 {
  margin: var(--spacing-5) 0 var(--spacing-1);
  font-size: var(--text-body);
  font-weight: 800;
  line-height: var(--leading-snug);
}
.sheet p, .sheet ul, .sheet ol { margin: 0 0 var(--spacing-3); }
.sheet ul, .sheet ol { padding-left: var(--spacing-5); }
.sheet li { margin-bottom: var(--spacing-2); }
.sheet .updated { color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; }
.sheet .fine-print { margin-top: var(--spacing-6); color: var(--color-text-muted); font-size: var(--text-label); }
.sheet .lead { margin-top: var(--spacing-5); font-size: var(--text-body-lg); }
a { color: inherit; text-underline-offset: 2px; }

/* The score scale on How to play: one medal star per score, flat because it is under 40px,
   and the gray X for a miss. The shapes and shines are SVG defs in the page itself. */
.medal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sheet .scores { padding-left: 0; list-style: none; }
.scores li { display: flex; align-items: center; gap: var(--spacing-3); }
.score-star {
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.score-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.score-star b {
  position: relative;
  padding-top: 2px;
  color: var(--color-medal-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}
/* Tilted in turn, like the stars in the game header. */
.scores li:nth-child(1) .score-star { rotate: -6deg; }
.scores li:nth-child(2) .score-star { rotate: 7deg; }
.scores li:nth-child(3) .score-star { rotate: -2deg; }
.scores li:nth-child(4) .score-star { rotate: 5deg; }
/* The Day complete share card, drawn the way the game draws it: medal stars, padded with empty squares. */
.share-example {
  width: fit-content;
  margin: var(--spacing-2) 0 var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sticker);
  rotate: -2deg;
}
.share-example figcaption { margin-bottom: var(--spacing-3); font-weight: 800; }
.share-grid { display: flex; flex-direction: column; gap: 2px; }
.share-line { display: flex; align-items: center; gap: 4px; height: 24px; }
.share-line b { width: 14px; margin-right: 2px; color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-body); font-weight: 600; line-height: 1; text-align: center; }
.share-line i { width: 24px; height: 24px; }
/* The star runs a little past its slot, as it does in the game. */
.share-grid svg { display: block; width: 29px; height: 29px; margin: -2.5px; }
/* A comparison table that scrolls sideways inside the sheet on narrow screens, never the page. */
.table-wrap { margin: 0 0 var(--spacing-3); overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-label); line-height: var(--leading-snug); }
.compare th, .compare td { padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0; border-bottom: 1px solid var(--color-surface-sunken); text-align: left; vertical-align: top; }
.compare thead th { color: var(--color-text-muted); font-weight: 800; }
.compare tbody th { font-weight: 800; white-space: nowrap; }
/* The way back into the game, as the game's main button. */
.cta {
  display: inline-flex;
  align-items: center;
  height: 58px;
  margin-top: var(--spacing-6);
  padding-inline: var(--spacing-8);
  border-radius: var(--radius-full);
  background: var(--color-action);
  box-shadow: 0 5px 0 var(--color-action-lip);
  color: var(--color-action-text);
  font-family: var(--font-display);
  font-size: var(--text-button);
  font-weight: 700;
  text-decoration: none;
}
.page-foot {
  margin-top: var(--spacing-6);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.page-foot nav { display: flex; justify-content: center; flex-wrap: wrap; }
.page-foot a { padding: var(--spacing-2) var(--spacing-3); color: inherit; text-decoration: none; }
.page-foot p { margin: var(--spacing-2) 0 0; }
.page-foot a[aria-current] { color: var(--color-text); }
@media (hover: hover) { .page-foot a:hover { color: var(--color-text); text-decoration: underline; } }
:focus-visible { outline: 3px solid var(--color-selection); outline-offset: 3px; border-radius: var(--radius-xs); }

@media (min-width: 720px) {
  .page { padding-top: var(--spacing-8); }
  .sheet { padding: var(--spacing-10); }
}