:root {
  --paper: #f8f3eb;
  --white: #fffdf7;
  --ink: #2e2631;
  --muted: #645663;
  --purple: #633f70;
  --purple-dark: #48304e;
  --lavender: #f0e7ef;
  --line: #e5d9d9;
  --gilt: #bd935f;
}

body { background: radial-gradient(ellipse at top, #fffaf1 0, var(--paper) 690px); }
.site-header, .site-footer { border-color: #e7d7c6; }
.site-header { background: #fffaf3; }
.site-header .wordmark img { border: 1px solid #d9ba8a; border-radius: 13px; }
nav a[aria-current]:not(.nav-club) { box-shadow: 0 2px 0 var(--gilt); }
nav .nav-club { background: #eee2eb; border: 1px solid #e6d0db; }

.hero, .shelf-hero, .club-hero {
  isolation: isolate;
  position: relative;
  border-color: #876078;
  background: radial-gradient(ellipse at 76% 20%, #624259 0, #442a45 45%, #342238 100%);
  color: #fff8ec;
  box-shadow: 0 11px 28px #48274522;
}
.hero::before, .shelf-hero::before, .club-hero::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #d8b37c71;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.hero h1 em { color: #e5c38f; }
.hero .eyebrow, .shelf-hero .eyebrow, .club-hero .eyebrow { color: #efd1a1; }
.hero .hero-lead, .shelf-hero p:not(.eyebrow), .club-hero p:not(.eyebrow) { color: #f1e1eb; }
.hero .hero-spark { background: #efd1a129; color: #f1d39c; }
.hero .button.primary, .shelf-hero .button.primary, .club-hero .button.primary {
  color: #362534;
  background: #edcd98;
  border-color: #f1d6ad;
}
.hero .button.primary:hover, .shelf-hero .button.primary:hover, .club-hero .button.primary:hover { background: #ffe5b3; }
.hero .text-link { color: #f4e2ed; text-decoration-color: #d1ae7b; }
.hero .text-link:hover { color: #fff5dd; }
.hero-art { filter: drop-shadow(0 10px 18px #2818285e); }
.hero :focus-visible, .shelf-hero :focus-visible, .club-hero :focus-visible { outline-color: #f3ce91; }

.section-label span { background: #efe4d4; color: #60442e; }
.section-heading h2 { color: #362739; }
.task-card, .home-shelf, .detail-head, .game-panel { box-shadow: 0 3px 10px #5f39440a; }
.task-card:hover, .task-card:focus-within, .home-shelf:hover { border-color: #b99a75; }
.task-card .card-art { border-bottom: 1px solid #53304917; }
.shelf-card h3 { font: 700 clamp(17px,2vw,23px)/1.18 var(--serif); }
.shelf-catalog .shelf-count { color: #6d5a64; }
.shelf-hero-art { padding: 3px; }
.club-hero .info-chip { color: #fff0dd; background: #87637e; }
.parent-note { background: #f2e9f0; border-color: #e7d8e5; }

.visual-help {
  color: #385644;
  background: #edf3e9;
  border: 1px solid #d7e4d6;
  border-radius: 11px;
  padding: 10px 13px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
}
.visual-help summary { cursor: pointer; width: fit-content; font-weight: 750; }
.visual-help p { margin-top: 6px; }
.visual-guide { margin: 18px 0 36px; padding: 18px; }
.visual-guide h2 { font-size: 24px; }
.visual-guide .text-link { display: inline-block; margin-top: 6px; }

.print-thumb { background: radial-gradient(ellipse at 45% 5%, #fffbf2b8 0, transparent 65%), var(--shelf-bg); }
.print-variants { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.print-variant { border: 1px solid #e7d9cf; overflow: hidden; border-radius: 12px; background: #fffcf5; }
.variant-art { height: 155px; border-bottom: 1px solid #e7d9cf; }
.variant-body { padding: 12px; }
.variant-body h3 { font: 700 19px/1.12 var(--serif); margin-bottom: 7px; }
.variant-body > p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.pdf-actions { margin-top: 13px; }
.pdf-actions .button { padding: 9px 11px; min-height: 38px; }
.pdf-actions .text-link { padding: 5px 1px; }
@media (max-width: 720px) {
  .hero::before, .shelf-hero::before, .club-hero::before { inset: 6px; }
  .print-variants { gap: 8px; }
  .variant-art { height: 116px; }
  .variant-body { padding: 9px; }
  .variant-body h3 { font-size: 16px; }
}
@media (max-width: 350px) {
  .print-variants { grid-template-columns: 1fr; }
  .variant-art { height: 150px; }
}

/* Illustrated edition */
.hero-art { border: 1px solid #b98c5f; border-radius: 19px; object-fit: cover; }
.storybook-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.painted-card { height: clamp(166px,16vw,210px); background: #4b3541; }
.shelf-card .painted-card { height: clamp(166px,16vw,210px); }
.painted-card .badge { font-size: 13px; box-shadow: 0 2px 8px #28222945; padding: 5px 9px; }
.painted-detail { height: clamp(176px,22vw,268px) !important; background: #483340; }
.shelf-hero-art.painted-detail { padding: 0; border: 1px solid #d8b37c80; }
.shelf-hero-art .storybook-art { object-position: center 65%; }
.card-body h3 { font-size: clamp(18px,1.8vw,23px); }
.card-body p { font-size: 14px; line-height: 1.5; }
.card-meta, .tags span { font-size: 12px; }
.game-option { min-height: 105px; font-size: 14px; border-color: #e1cfbb; background: #f9eee5; }
.game-option:nth-child(3n+2) { background: #eef1e4; }
.game-option:nth-child(3n) { background: #ede6f2; }
.game-option[aria-pressed="true"] { background: #f4ddaa; border-color: #a8783a; box-shadow: inset 0 0 0 1px #a8783a; }
.story-copy p { font-size: 18px; line-height: 1.68; }
.story-copy > p:first-child::first-letter { float: left; margin: 4px 5px 0 0; font: 700 3.25em/.77 Georgia,serif; color: #825c3e; }
.reading-pause, .story-method, .ending-question { padding: 11px 15px; border-radius: 10px; border: 1px solid #e4d6bf; background: #fbf0dc; color: #4b3728; }
.reading-pause { margin: 18px 0; }
.reading-pause summary, .story-method summary { cursor: pointer; font-weight: 750; }
.reading-pause p, .story-method p { margin: 7px 0 0; font-size: 15px; }
.story-method { margin: 0 0 32px; }
.story-ending h3 { font: 700 27px/1.15 var(--serif); margin-bottom: 15px; }
#story-activity ul { padding-left: 19px; color: var(--muted); line-height: 1.6; }
.ending-question { margin-top: 15px !important; font-size: 15px !important; }
@media (max-width: 720px) {
  .hero-art { margin: 13px auto 16px; }
  .painted-card, .shelf-card .painted-card { height: 132px; }
  .painted-card .badge { font-size: 11px; }
  .card-body p { font-size: 13px; }
  .story-copy p { font-size: 17px; }
}
.shelf-card .storybook-art { object-position: center 42%; }
.shelf-filters { align-items: center; }
.shelf-topic { display: flex; gap: 8px; align-items: center; padding: 0 7px; color: var(--muted); font-size: 14px; font-weight: 700; }
.shelf-topic select { width: auto; max-width: min(265px,63vw); min-height: 38px; font-size: 14px; }

.print-sample { padding: 12px 14px; margin-top: 14px; border: 1px solid #e8dacc; border-radius: 11px; background: #fcf5e9; }
.print-sample summary { font-weight: 750; color: var(--purple-dark); cursor: pointer; }
.sample-layout { display: grid; grid-template-columns: minmax(112px,1fr) 1.35fr; gap: 14px; align-items: center; margin-top: 10px; }
.sample-layout .variant-art { height: 147px; overflow: hidden; border: 1px solid #e8dacc; border-radius: 8px; }
.sample-layout p { font-size: 14px; line-height: 1.48; }
.shelf-hero-art.painted-detail, .shelf-detail .painted-detail { background: radial-gradient(ellipse at center,#73474e,#38263c 78%); }
.shelf-hero-art.painted-detail { height: clamp(225px,26vw,314px) !important; }
.shelf-hero-art.painted-detail .storybook-art,
.shelf-detail .painted-detail .storybook-art { object-fit: contain; object-position: center; }
.shelf-detail .painted-detail { height: clamp(235px,30vw,340px) !important; }
@media(max-width: 430px) { .sample-layout { grid-template-columns: 1fr; } }
.shelf-card .painted-card {
  height: clamp(220px,24vw,298px);
  background: radial-gradient(ellipse at center,#80535a,#3e2d42 86%);
}
.shelf-card .painted-card .storybook-art { object-fit: contain; object-position: center; }
@media (max-width: 720px) {
  .shelf-card .painted-card { height: clamp(145px,36vw,235px); }
}

.screen-note details { margin: .6rem 0 .85rem; }
.screen-note summary { cursor: pointer; }
.screen-note details p { margin: .55rem 0; }
.little-card { min-width: 0; }
.little-card h2 { font-size: 1.4rem; }
@media (min-width: 920px) {
  .home-shelves { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .home-shelves > :last-child { grid-column: 1 / -1; }
}

.edition {
  margin: 0 0 3rem;
  border: 1px solid #9d7a48;
  border-radius: 1.5rem;
  background: radial-gradient(ellipse at 85% 5%,#34594d 0,#17372f 57%,#122b26 100%);
  padding: clamp(1.15rem,4vw,2.7rem);
  color: #fff4de;
  box-shadow: 0 14px 36px #233e2b21;
}
.edition-head h2 { font: 600 clamp(1.75rem,4vw,2.9rem)/1.04 Georgia,serif; margin: .45rem 0; }
.edition-head p:last-child { color: #f4e7d5; margin: .7rem 0 1.35rem; }
.edition .eyebrow { color: #ebcd96; letter-spacing: .15em; }
.edition-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.65rem,1.8vw,1.2rem); }
.edition-card {
  color: #fff8eb;
  background: #142c27;
  overflow: hidden;
  border: 1px solid #ad8e5b;
  border-radius: .85rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.edition-card:hover, .edition-card:focus-visible { border-color: #f0d394; background: #25473c; }
.edition-card .storybook-art { width: 100%; height: clamp(7.5rem,14vw,10rem); object-fit: cover; border-bottom: 1px solid #a68c57; }
.edition-card > div { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.edition-card h3 { color: #fff5e0; font-family: Georgia,serif; font-size: clamp(1.15rem,2.2vw,1.6rem); margin: .38rem 0; }
.edition-card p { color: #f3e8d8; font-size: .93rem; margin: 0 0 .8rem; }
.edition-link { display: flex; align-items: center; gap: .5rem; margin-top: auto; font-size: .87rem; color: #ebcd96; }
.format-label { display: block; font-size: .75rem; color: #47634e; margin-top: .5rem; letter-spacing: .05em; }
.catalog-card h3 { margin-top: .25rem; }
.catalog-more { display: flex; justify-content: center; margin: 1.4rem 0 0; }
.catalog-more button[hidden], .round-progress[hidden] { display: none; }
.folio-hero { background: #1b3b31; border: 1px solid #b28f54; color: #fff4dc; }
.folio-hero :is(h1,p) { color: inherit; }
.folio-hero .eyebrow { color: #e9cc9a; }
.folio-hero .button { background: #f1d6a6; color: #263626; }
.folio-hero .folio-art { padding: 0; height: clamp(195px,28vw,325px); border: 1px solid #bd9a65; }
.folio-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mission-box {
  margin-top: 1.65rem;
  background: #edf1e8;
  color: #233b2e;
  border: 1px solid #b7bca1;
  border-radius: 1rem;
  padding: 1.2rem;
}
.mission-box h3 { font-family: Georgia,serif; font-size: 1.4rem; margin: .4rem 0; }
.mission-box .eyebrow { color: #4e694f; }
.round-progress { display: flex; gap: .3rem; margin: 0 0 1.15rem; }
.round-progress span { height: .33rem; flex: 1; background: #e9dfd3; border-radius: 1rem; }
.round-progress .done { background: #56765e; }
.round-progress .current { background: #a36e2d; }
.round-board, .order-board {
  padding: .65rem .75rem .75rem;
  margin: .65rem 0;
  background: #f8f4eb;
  border: 1px solid #ddcdb6;
  border-radius: .7rem;
}
.round-board h3, .order-board > span { display: block; color: #3b5544; font-size: .84rem; margin: 0 0 .45rem; font-weight: 700; }
.board-tiles { display: flex; flex-wrap: wrap; gap: .3rem; }
.board-tiles :is(.game-shape,.unknown), .order-board li {
  display: grid;
  place-items: center;
  width: clamp(2.4rem,6vw,3rem);
  height: clamp(2.5rem,6vw,3rem);
  margin: 0;
  border: 1px solid #d4c2a7;
  background: #fffbf3;
  border-radius: .44rem;
}
.board-tiles svg, .order-board svg { width: 2rem; height: 2rem; }
.board-tiles .emoji, .order-board .emoji { font-size: 1.35rem; }
.order-board ol { display: flex; flex-wrap: wrap; list-style: none; gap: .35rem; padding: 0; margin: 0 0 .35rem; }
.order-board li .letter-glyph { font-size: 1.45rem; line-height: 1; }
.order-board button:disabled { opacity: .5; cursor: default; }
.round-legend { padding: .7rem .85rem; background: #eef1e6; border-left: 3px solid #7b8f66; border-radius: .2rem .5rem .5rem .2rem; }
.round-legend strong, .round-legend span { display: block; }
.tile-mark { position: absolute; top: .22rem; right: .3rem; color: #785324; font-weight: 750; line-height: 1; }
.game-option, .game-shape { position: relative; }
@media (max-width: 640px) {
  .edition-grid { grid-template-columns: 1fr; }
  .edition-card { display: grid; grid-template-columns: minmax(90px,32%) 1fr; }
  .edition-card .storybook-art { height: 100%; border-bottom: 0; }
  .folio-hero .folio-art { min-height: 170px; }
}
.mission-card-art .print-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

/* The matching surface uses the same illustration at every size. */
.game-option .artwork,
.game-shape .artwork {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.artwork .picture-art {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.game-option {
  min-width: 0;
  min-height: 130px;
  padding: .6rem .42rem .55rem;
  border-color: #d7c1a1;
  border-radius: .85rem;
  background: #fff8eb;
  color: #342f26;
  box-shadow: 0 2px 5px #50402610;
  font-size: .84rem;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
}
.game-option:nth-child(3n+2), .game-option:nth-child(3n) { background: #fff8eb; }
.game-option .artwork { width: min(100%,6.4rem); height: clamp(4.3rem,13vw,6.1rem); }
.game-option .artwork svg { width: 78%; height: 78%; }
.game-option .letter-glyph { color: #34594d; font-family: Georgia,serif; font-size: clamp(2.7rem,8vw,4rem); }
.game-option:hover:not([aria-pressed="true"]) { background: #f2ead8; border-color: #b28d55; }
.game-option[aria-pressed="true"] {
  border-color: #7c743e;
  background: #eaf0df;
  box-shadow: inset 0 0 0 2px #7c743e;
}
.game-option:focus-visible { outline: 3px solid #385a45; outline-offset: 3px; }
.memory-row { gap: .75rem; margin: .8rem 0 1rem; }
.memory-row > div {
  width: clamp(5.6rem,18vw,7.5rem);
  min-width: 0;
  text-align: center;
  padding: .38rem;
  background: #fff8eb;
  border: 1px solid #dfcaaa;
  border-radius: .75rem;
  color: #352e25;
  gap: .18rem;
}
.memory-row .game-shape {
  width: 100%;
  height: clamp(4.55rem,15vw,6.2rem);
  border: 0;
  background: transparent;
}
.example-box .game-shape { width: clamp(6rem,16vw,8.25rem); height: clamp(6rem,16vw,8.25rem); }
.example-box .artwork svg { width: 85%; height: 85%; }
.board-tiles { gap: .36rem; }
.board-tiles :is(.game-shape,.unknown) {
  width: clamp(2.48rem,10.7vw,4rem);
  height: clamp(2.48rem,10.7vw,4rem);
}
.order-board li .game-shape { width: 100%; height: 100%; }
.tile-mark {
  min-width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #a78653;
  background: #fffbf1;
  color: #574127;
  top: .35rem;
  right: .35rem;
  z-index: 1;
}
.catalog-card .storybook-art, .edition-card .storybook-art { object-position: center; }
@media (max-width: 520px) {
  .game-options:has(.picture-art) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-option { min-height: 110px; }
}

.telegram-setup { max-width: 760px; padding-bottom: 2rem; }
.telegram-setup h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.telegram-setup form { display: grid; gap: .5rem; margin: 1rem 0; }
.telegram-setup input { font: inherit; padding: .65rem .75rem; border: 1px solid #98836b; border-radius: .45rem; }
.telegram-setup form button { justify-self: start; }
.telegram-setup li { margin: .45rem 0; }
.telegram-setup #telegram-error { color: #852f2f; }

.workshop-shortcuts { display: flex; flex-wrap: wrap; gap: 9px; }

.little-hero .shelf-hero-art { background: #e6eadc; }
.little-hero .storybook-art { object-fit: cover; }
.little-catalog .segmented { margin-bottom: 1.2rem; }
.little-grid { align-items: start; }
.little-card[hidden] { display: none; }
.little-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e0cf; }
.little-copy { padding: clamp(1rem,2.3vw,1.55rem); }
.little-copy h3 { margin: .4rem 0; }
.little-copy .little-goal { color: #5e514e; }
.little-steps { border-top: 1px solid #e7d9cf; margin-top: 1rem; padding-top: .75rem; }
.little-steps summary { cursor: pointer; font-weight: 700; color: #593d55; }
.little-steps ol { padding-left: 1.4rem; }
.little-steps li + li { margin-top: .45rem; }
.little-steps .button { margin-top: .4rem; }
@media print {
  .little-printing :is(header,footer,.little-hide-print,.little-card:not(.little-print-target)) { display:none !important; }
  .little-printing :is(main,.little-catalog,.little-grid) { display:block; margin:0; padding:0; width:100%; max-width:none; }
  .little-printing .little-print-target { max-width: 16cm; margin: 0 auto; box-shadow:none; break-inside:avoid; }
  .little-printing .little-art { max-height: 8cm; object-fit:contain; print-color-adjust:exact; }
}

.telegram-compose { margin-top: 1.5rem; }
.telegram-compose form { display: grid; gap: .6rem; }
.telegram-compose :is(form,section,a)[hidden] { display: none; }
.telegram-compose :is(select,textarea) { width:100%; font:inherit; color:inherit; background:#fffdf8; border:1px solid #ddcbbc; border-radius:10px; padding:.7rem .85rem; }
.telegram-compose textarea { resize:vertical; min-height:7rem; }
.telegram-compose .telegram-check { display:flex; align-items:baseline; gap:.55rem; cursor:pointer; }
.telegram-compose .telegram-hint { color:#63544c; }
.telegram-compose .telegram-preview { background:#f3ede4; border:1px solid #e1d2c4; border-radius:14px; margin-top:1rem; padding:1.1rem; }
.telegram-cover { display:grid; grid-template-columns:minmax(76px,144px) minmax(0,1fr); gap:.9rem; align-items:start; padding:1rem; margin-top:.5rem; background:#f8f2e8; border:1px solid #e6d8c9; border-radius:14px; }
.telegram-cover img { width:100%; height:auto; border-radius:9px; }
.telegram-cover p { margin:0 0 .35rem; overflow-wrap:anywhere; }
.telegram-cover input { display:block; max-width:100%; margin:.25rem 0; }
.telegram-cover .text-link { display:block; margin-top:.4rem; padding:0; border:0; background:none; font:inherit; cursor:pointer; }
.telegram-cover .text-link[hidden], #telegram-cover-error:empty { display:none; }
#telegram-cover-error, #telegram-caption-size[data-over-limit="true"] { color:#9b3c37; }
.telegram-post { max-width:440px; margin:0 0 1rem; background:#fffdf8; border:1px solid #e1d2c4; border-radius:12px; overflow:hidden; }
.telegram-post img { display:block; width:100%; max-height:460px; object-fit:contain; background:#f9f4ec; }
.telegram-post figcaption { padding:.85rem 1rem; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:520px) { .telegram-cover { grid-template-columns:76px minmax(0,1fr); gap:.65rem; padding:.75rem; } }
.telegram-compose button { justify-self:start; }

.listening-hero .shelf-hero-art { background:#e7eadb; }
.listening-hero .storybook-art { object-fit:cover; }
.listening-shortcuts, .noise-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:1.1rem; }
.song-grid { align-items:start; }
.song-cover { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background:#eee3d5; }
.song-copy { padding:clamp(.95rem,2vw,1.45rem); }
.song-copy h3 { margin:.45rem 0; }
.song-copy audio { display:block; width:100%; max-width:100%; margin:.8rem 0; }
.song-cue { margin:.5rem 0; min-height:2.5em; color:#5a3b52; font-weight:650; line-height:1.35; }
.song-lyrics { border-top:1px solid #e7d9cf; padding:.75rem 0; margin:.7rem 0 .1rem; }
.song-lyrics summary { cursor:pointer; font-weight:700; color:#5a3b52; }
.song-lyrics p { margin:.55rem 0 .25rem; line-height:1.65; }
.song-lyrics small { color:#65564e; }
.noise-panel { display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,3vw,2.7rem); background:#f2ece3; padding:clamp(1.2rem,4vw,2.65rem); border:1px solid #e5d6c6; border-radius:20px; margin:2.5rem 0; }
.noise-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; margin:1.2rem 0; max-width:640px; }
.noise-controls label { display:grid; gap:.35rem; font-weight:650; }
.noise-controls input { width:100%; accent-color:#63485a; }
.noise-controls select { width:fit-content; border:1px solid #cab7a8; border-radius:7px; padding:.4rem .7rem; background:#fffaf4; font:inherit; color:inherit; }
.noise-status { min-height:1.55em; }
.noise-guide { border-top:1px solid #e1d2c4; padding-top:1.15rem; }
.noise-guide h3 { margin:.5rem 0; }
.noise-guide dt { font-weight:750; margin-top:.8rem; }
.noise-guide dd { margin:.2rem 0 0; line-height:1.55; }
.noise-sources { padding-left:1.1rem; font-size:.92rem; }
#white-noise, #song-library, .song-card { scroll-margin-top:6rem; }
@media(max-width:500px) { .noise-controls { grid-template-columns:1fr; } }