/* The game's palette (LetThemCook/Art/Palette.swift) and fonts (PaperFont). Futura and Avenir Next ship
   with Apple devices; everywhere else falls back to similar system fonts. Nothing is loaded from elsewhere. */
:root {
  color-scheme: light;
  --paper: #F4EAD5;
  --cream: #FFF7E6;
  --ink: #2B2A3D;
  --ink-soft: rgba(43, 42, 61, 0.68);
  --shadow: rgba(43, 42, 61, 0.24);
  --tomato: #E4572E;
  --mustard: #F3B23B;
  --teal: #2A9D8F;
  --pink: #F29CB4;
  --leaf: #7BAE5A;
  --purple: #7A5C99;
  --title: "Futura-CondensedExtraBold", "Futura Condensed ExtraBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

a { color: var(--teal); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--tomato); }

h1, h2 { font-family: var(--title); font-weight: 800; font-stretch: condensed; line-height: 1.05; margin: 0; }
h2 { font-size: 30px; margin: 36px 0 10px; }
h3 { font-size: 18px; font-weight: 700; margin: 24px 0 4px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }

/* A sheet of cut paper: slightly uneven corners and a hard, offset shadow, like paperCard in the game. */
.card {
  background: var(--cream);
  border-radius: 26px 20px 24px 18px / 20px 26px 18px 24px;
  box-shadow: 4px 7px 0 var(--shadow);
  padding: 26px 24px;
  margin: 20px 0;
}

.muted { color: var(--ink-soft); }
.small { font-size: 14px; }

/* The title as paper tiles, like the title screen. */
.tiles { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 8px 0 14px; }
.word { display: flex; gap: 5px; }
.tile {
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.25em;
  font-family: var(--title);
  font-weight: 800;
  font-stretch: condensed;
  font-size: clamp(38px, 11vw, 64px);
  line-height: 1;
  color: #fff;
  border-radius: 7px 5px 8px 6px / 6px 8px 5px 7px;
  box-shadow: 2px 4px 0 var(--shadow);
}
.tile.dark { color: var(--ink); }
.tile:nth-child(odd) { transform: rotate(-3deg); }
.tile:nth-child(even) { transform: rotate(2.5deg); }
.tile:nth-child(3n) { transform: rotate(-1deg) translateY(2px); }
.pink { background: var(--pink); }
.mustard { background: var(--mustard); }
.leaf { background: var(--leaf); }
.teal { background: var(--teal); }
.tomato { background: var(--tomato); }
.purple { background: var(--purple); }

.hero { text-align: center; }
.icon { width: 132px; height: 132px; border-radius: 29px; box-shadow: 4px 7px 0 var(--shadow); }
.tagline { font-size: 22px; font-weight: 700; color: var(--ink-soft); margin: 0 0 18px; }

/* The four kitchens, coloured by time of day. Ink text on the light papers, white on the dark ones. */
.kitchens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.kitchens li { margin: 0; padding: 14px 16px; border-radius: 18px 14px 20px 16px / 14px 20px 16px 18px; color: var(--ink); box-shadow: 3px 5px 0 var(--shadow); }
.kitchens strong { display: block; font-family: var(--title); font-weight: 800; font-stretch: condensed; font-size: 22px; line-height: 1.1; }
.kitchens span { font-size: 15px; font-weight: 600; }
.kitchens .purple, .kitchens .night { color: #fff; }
.night { background: var(--ink); }

/* A sticker rather than a button, since there's nothing to tap yet. */
.badge {
  display: inline-block;
  font-family: var(--title);
  font-weight: 800;
  font-stretch: condensed;
  font-size: 22px;
  color: var(--ink);
  background: var(--mustard);
  padding: 8px 20px 10px;
  border-radius: 16px 12px 18px 10px / 12px 18px 10px 16px;
  box-shadow: 3px 5px 0 var(--shadow);
  transform: rotate(-2deg);
}

/* Header on the inner pages: icon and name linking home. */
.top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.top img { width: 48px; height: 48px; border-radius: 11px; box-shadow: 2px 4px 0 var(--shadow); }
.top span { font-family: var(--title); font-weight: 800; font-stretch: condensed; font-size: 28px; }
.page-title { font-size: clamp(40px, 10vw, 56px); margin: 28px 0 4px; }

footer { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 36px; }
footer a { margin: 0 8px; }