/* Content pages (letters, animal sounds, printables): the game's toy-box look as a readable page.
   Tokens match src.html. */
:root {
  --ink: #23264A;
  --paper: #FFFDF7;
  --red: #D62839;
  --green: #138055;
  --blue: #2B5EC4;
  --yellow: #F4B400;
  --wood: #ECC793;
  --wood-edge: #B9824A;
  --tint: #FFE8A3;
  --kc: var(--red);
  --f-display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-text: "Andika", "Verdana", "Segoe UI", sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-text); -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
a { color: var(--blue); }
img { max-width: 100%; }

.sash {
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20' shape-rendering='crispEdges'%3E%3Crect width='28' height='20' fill='%23D62839'/%3E%3Crect width='28' height='2' fill='%23138055'/%3E%3Crect y='18' width='28' height='2' fill='%23138055'/%3E%3Cpath d='M12 3h4v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v-2h2v-2h2v-2h2z' fill='%23F4B400'/%3E%3Cpath d='M13 6h2v2h2v4h-2v2h-2v-2h-2v-4h2z' fill='%23D62839'/%3E%3Crect x='13' y='9' width='2' height='2' fill='%23FFFDF7'/%3E%3Cpath d='M0 8h2v4h-2zM26 8h2v4h-2z' fill='%23FFFDF7'/%3E%3C/svg%3E") repeat-x left top / 28px 20px;
}

/* Header and navigation */
.top { background: var(--tint); }
.top-in {
  max-width: 1040px; margin-inline: auto; padding-block: 12px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
}
.logo { font: 800 1.45rem/1 var(--f-display); color: var(--ink); text-decoration: none; }
.logo b { color: var(--red); font-weight: 800; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 700; }
.nav a { color: var(--ink); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); }
.play-cta {
  display: inline-block; padding: .6em 1em; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--red); color: var(--paper); font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--ink);
}
.play-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* Page body */
.page {
  max-width: 760px; margin-inline: auto; padding-block: 28px 56px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
}
.page.wide { max-width: 1040px; }
.crumbs { font-size: .95rem; margin: 0; }
.crumbs a { color: var(--ink); }
.page section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
h1 { margin: 0; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.05 var(--f-display); text-wrap: balance; }
h2 { margin: 0; font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--f-display); text-wrap: balance; }
p, li { font-size: 1.06rem; line-height: 1.62; }
p { margin: 0; max-width: 65ch; }
ul, ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; max-width: 65ch; }
.lead { font-size: 1.18rem; }
.small { font-size: .95rem; opacity: .8; }

/* Letter hero: the wooden block and its sound buttons */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.block {
  position: relative; flex: none; width: 180px; height: 180px; border-radius: 12%;
  background: repeating-linear-gradient(100deg, transparent 0 12px, rgb(150 100 50 / .09) 12px 15px), var(--wood);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 7px 0 var(--wood-edge), 0 12px 14px rgb(35 38 74 / .2);
}
.face {
  position: absolute; inset: 9%; display: flex; align-items: center; justify-content: center;
  border: 5px solid var(--kc); border-radius: 9%; background: var(--paper);
}
.glyphs { display: flex; align-items: baseline; gap: .06em; padding-top: 7%; font-family: var(--f-display); font-weight: 800; }
.glyphs .up { font-size: 94px; line-height: 1; color: var(--kc); }
.glyphs .low { font-size: 54px; line-height: 1; }
.sounds { display: flex; flex-wrap: wrap; gap: 12px; }
.say {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 0; border-radius: 14px;
  cursor: pointer; font: 700 1.1rem/1 var(--f-text); color: var(--ink);
  background: repeating-linear-gradient(98deg, transparent 0 9px, rgb(150 100 50 / .1) 9px 11px), var(--wood);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 4px 0 var(--wood-edge);
}
.say:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 1px 0 var(--wood-edge); }
.say img { width: 52px; height: 52px; }
.say .ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--paper);
  font: 800 1.6rem/1 var(--f-display); color: var(--kc);
}
.say.playing { box-shadow: inset 0 0 0 3px var(--kc), 0 4px 0 var(--wood-edge); }

.words { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.words li { padding: 4px 12px; border-radius: 999px; background: var(--tint); font-weight: 700; }
.rhyme {
  margin: 0; padding: 16px 20px; border-left: 6px solid var(--kc); background: var(--tint); border-radius: 0 12px 12px 0;
  font: 700 1.15rem/1.6 var(--f-text); max-width: 32rem;
}
.rhyme p { font: inherit; }

details { border-bottom: 1px solid rgb(35 38 74 / .15); padding-block: 10px; max-width: 65ch; }
summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; }
details p { margin-top: 8px; }

.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; }

/* Letters index: one wooden card per letter page */
.index { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 10px; max-width: none; }
.index li { --kc: var(--red); }
.index li:nth-child(3n+2) { --kc: var(--green); }
.index li:nth-child(3n) { --kc: var(--blue); }
.index a {
  display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none;
  background: repeating-linear-gradient(98deg, transparent 0 9px, rgb(150 100 50 / .1) 9px 11px), var(--wood);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 4px 0 var(--wood-edge);
}
.index b { flex: none; min-width: 2.3ch; padding-top: .12em; font: 800 1.9rem/1 var(--f-display); color: var(--kc); }
.index span { font-size: .98rem; line-height: 1.3; }

/* Animal sounds grid */
.animals { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; max-width: none; }
.animal {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; height: 100%; box-sizing: border-box;
  padding: 12px; border-radius: 14px; background: var(--tint);
}
.animal .say { grid-row: span 2; padding: 6px; }
.animal .say img { width: 64px; height: 64px; }
.animal b { font: 800 1.3rem/1.1 var(--f-display); }
.animal span { font-size: .98rem; line-height: 1.35; }

/* Footer: every letter, for crawlers and parents */
.foot { background: var(--tint); }
.foot-in {
  max-width: 1040px; margin-inline: auto; padding-block: 24px 32px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r); display: grid; gap: 14px;
}
.foot h2 { font-size: 1.3rem; }
.letter-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }
.letter-links a {
  display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 8px; text-decoration: none;
  font: 800 1.1rem/1 var(--f-display); color: var(--ink); background: var(--paper);
}
.letter-links a[aria-current="page"] { background: var(--red); color: var(--paper); }

/* Printable A4 sheet */
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sheet div { border: 2px solid var(--ink); border-radius: 10px; padding: 6px 4px; text-align: center; break-inside: avoid; }
.sheet b { display: block; font: 800 2.2rem/1 var(--f-display); color: var(--kc); }
.sheet img { width: 46px; height: 46px; display: block; margin: 2px auto; }
.sheet span { font-size: .85rem; font-weight: 700; }
.sheet div:nth-child(3n+2) { --kc: var(--green); }
.sheet div:nth-child(3n) { --kc: var(--blue); }
@media (max-width: 520px) { .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  body > :not(main), main > :not(.print-area), .print-area > :not(.sheet) { display: none !important; }
  main.page { padding: 0; max-width: none; display: block; }
  .sheet { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .sheet div { padding: 1.5mm; }
  .sheet b { font-size: 26pt; }
  .sheet img { width: 13mm; height: 13mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }