/* ==========================================================================
   sections.css · homepage sections (03–14) and shared illustrated scenes
   ========================================================================== */

/* ---------- 03 · HERO — The Living Game-Night Library ---------- */
.hero { position: relative; padding: clamp(1rem, .5rem + 1vw, 1.6rem) 0 clamp(4.5rem, 3rem + 3.5vw, 6.5rem); overflow: clip; }
.hero::before {
  content: ''; position: absolute; inset: auto -10% -30% 40%; height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 177, 61, .22), rgba(244, 177, 61, 0)); pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: center; }
.hero__copy { position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: .9rem; }
.hero__eyebrow .icon { color: var(--red); }
.hero__title { margin-bottom: .32em; }
.hero__line { display: block; }
.hero__sub { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .55vw, 1.55rem); line-height: 1.3; color: var(--wood); margin: 0 0 .7rem; }
.hero__body { font-size: clamp(1.08rem, 1rem + .25vw, 1.18rem); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.hero__ctas { margin: 1.3rem 0 1.3rem; }
.hero__trust li { font-size: .97rem; }

.hero__visual { position: relative; z-index: 1; }
.hero-stage { position: relative; width: 100%; max-width: 690px; margin-left: auto; aspect-ratio: 640 / 720; }
.hero-arch {
  position: absolute; inset: 0 0 9% 0; overflow: hidden;
  border-radius: 50% 50% 34px 34px / 30% 30% 34px 34px;
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 9px #164A3F, inset 0 0 0 12px rgba(244, 177, 61, .35), 0 40px 70px -40px rgba(10, 43, 36, .8);
}
.hs { position: absolute; }
.hs > svg, .hs-pal__in > svg { width: 100%; height: auto; }
.hs-shelf--1 { left: -6%; right: -6%; top: 13%; opacity: .95; }
.hs-shelf--2 { left: -12%; right: -4%; top: 35%; opacity: .85; }
.hs-shelf > svg { width: 100%; }
.hs-lights { left: -2%; right: -2%; top: 4%; }
.hs-lights > svg { width: 100%; }
.hs-chalk { right: 7%; top: 12%; width: 23%; transform: rotate(3deg); }
.hs-lamp { left: 31%; top: -3%; width: 34%; }
.hs-glow { inset: 0; background: radial-gradient(48% 34% at 49% 22%, rgba(255, 231, 168, .28), rgba(255, 231, 168, 0) 70%); pointer-events: none; }

/* Animals behind the table edge (table top line = 63%) */
.hs-pals { position: absolute; left: 0; right: 0; top: 0; height: 64%; overflow: hidden; pointer-events: none; }
.hs-pal { pointer-events: auto; }
.hs-pals .hs-pal { bottom: 0; }
.hs-dog { left: 3%; width: 31%; }
.hs-dog .hs-pal__in { transform: translateY(27%); }
.hs-cat { left: 31%; width: 25%; }
.hs-cat .hs-pal__in { transform: translateY(19%); }
.hs-horse { right: 2%; width: 30%; }
.hs-horse .hs-pal__in { transform: translateY(11%); }
.hs-parrot { left: 56%; width: 19%; bottom: 33%; z-index: 4; }
.hs-perch-stack { left: 53%; width: 23%; bottom: 25.5%; z-index: 4; }

.hs-table { position: absolute; left: -2%; right: -2%; top: 63%; bottom: 0; z-index: 3; pointer-events: none; }
.hs-table__top { position: absolute; left: 0; right: 0; top: 0; height: 26%; border-top: 3px solid var(--line); box-shadow: inset 0 6px 0 rgba(255, 220, 170, .25); }
.hs-table__front { position: absolute; left: 0; right: 0; top: 26%; bottom: 0; border-top: 3px solid var(--line); filter: brightness(.72); }
.hs-paws { z-index: 4; }
.hs-paws--dog { left: 9%; width: 19%; top: 61%; }
.hs-paws--cat { left: 35%; width: 15%; top: 61.5%; }
.hs-blanket { left: -6%; width: 44%; top: 71%; z-index: 4; transform: rotate(-2deg); }
.hs-blanket > svg { width: 100%; }
.hs-prop { z-index: 5; }
.hs-mug { left: 3%; top: 59%; width: 13%; }
.hs-ball { left: 25%; top: 66%; width: 6.5%; }
.hs-yarn { left: 46%; top: 63%; width: 9%; }
.hs-dice { left: 74%; top: 69%; width: 6.5%; transform: rotate(-12deg); }
.hs-dice2 { left: 81%; top: 72%; width: 5.5%; transform: rotate(18deg); }
.hs-feather { left: 29%; top: 74%; width: 6.5%; transform: rotate(68deg); z-index: 6; }
.hs-carrot { right: 4%; top: 62%; width: 8%; transform: rotate(-70deg); }
.hs-score { right: 12%; top: 62%; width: 15%; transform: perspective(500px) rotateX(55deg) rotateZ(-12deg); transform-origin: 50% 100%; }

.hs-fan { position: absolute; left: 50%; bottom: 0; width: 70%; height: 36%; transform: translateX(-50%); z-index: 6; }
.hs-fan__book { position: absolute; left: 50%; bottom: 0; display: block; transform-origin: 50% 130%; transition: transform .45s var(--ease-spring); }
.hs-fan .book3d { --w: clamp(74px, 9.8vw, 146px); margin-left: calc(var(--w) / -2); }
.hs-fan__book:nth-child(1) { transform: translateX(-122%) translateY(10%) rotate(-19deg); z-index: 1; }
.hs-fan__book:nth-child(2) { transform: translateX(-44%) translateY(1%) rotate(-6deg); z-index: 2; }
.hs-fan__book:nth-child(3) { transform: translateX(42%) translateY(1%) rotate(6deg); z-index: 3; }
.hs-fan__book:nth-child(4) { transform: translateX(120%) translateY(10%) rotate(19deg); z-index: 4; }
.hs-fan__book:hover, .hs-fan__book:focus-visible { z-index: 10; }
.hs-fan__book:nth-child(1):hover, .hs-fan__book:nth-child(1):focus-visible { transform: translateX(-130%) translateY(-6%) rotate(-21deg) scale(1.05); }
.hs-fan__book:nth-child(2):hover, .hs-fan__book:nth-child(2):focus-visible { transform: translateX(-46%) translateY(-12%) rotate(-7deg) scale(1.05); }
.hs-fan__book:nth-child(3):hover, .hs-fan__book:nth-child(3):focus-visible { transform: translateX(44%) translateY(-12%) rotate(7deg) scale(1.05); }
.hs-fan__book:nth-child(4):hover, .hs-fan__book:nth-child(4):focus-visible { transform: translateX(128%) translateY(-6%) rotate(21deg) scale(1.05); }
.hs-fan__book:focus-visible { outline-offset: 6px; }

.hs-vine { z-index: 7; pointer-events: none; }
.hs-vine--l { left: -5%; top: -3%; width: 15%; }
.hs-vine--r { right: 4%; top: -1%; width: 11%; }
.hs-foliage { right: -9%; bottom: 3%; width: 25%; z-index: 5; pointer-events: none; }

.bridge-ball { position: absolute; left: 47%; bottom: 3.5rem; width: 34px; z-index: 8; pointer-events: none; opacity: 0; }
.bridge-ball svg { width: 100%; height: auto; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; width: 30px; height: 48px; margin-left: -15px; border: 2.5px solid var(--forest); border-radius: 20px; z-index: 3; }
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: var(--red); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__body { margin-inline: auto; }
  .hero__ctas, .hero__trust { justify-content: center; }
  .hero-stage { margin: 0 auto; max-width: 600px; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .hero__ctas .btn { width: 100%; }
  .hero__trust { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__trust li { justify-content: flex-start; font-size: .9rem; border-radius: 16px; }
  .hs-chalk { width: 26%; }
  .hs-lights { display: none; }
}

/* ---------- 04 · WELCOME + interactive game table ---------- */
.welcome { padding-top: calc(var(--section) * .9); }
.welcome__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.highlights { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.highlight { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: var(--r-md); box-shadow: 4px 5px 0 rgba(59, 36, 22, .1); }
.highlight strong { display: block; font-family: var(--font-serif); font-size: 1.12rem; color: var(--forest); }
.highlight span:last-child { line-height: 1.4; color: var(--ink-soft); }
.highlight__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--line); color: var(--forest); --icon-hole: var(--gold); }
.highlight__icon .icon { width: 26px; height: 26px; }

.gametable { position: relative; aspect-ratio: 1.08 / 1; max-width: 640px; margin-inline: auto; }
.gametable__peek { position: absolute; right: 9%; top: -9%; width: 27%; z-index: 0; }
.gametable__peek svg { width: 100%; height: auto; }
.gametable__surface {
  position: absolute; inset: 9% 0 0 0; z-index: 1;
  border: 3px solid var(--line); border-radius: 46px;
  box-shadow: inset 0 0 0 14px rgba(74, 45, 25, .38), inset 0 0 0 17px rgba(59, 36, 22, .5), 0 40px 70px -36px rgba(42, 32, 24, .75);
}
.gt { position: absolute; transform: rotate(var(--r, 0deg)); }
.gt > svg, .gt > img { width: 100%; height: auto; }
.gt-cover { box-shadow: 0 16px 24px -12px rgba(30, 18, 10, .7); border-radius: 2px 5px 5px 2px; overflow: hidden; }
.gt-cover--1 { left: 5%; top: 7%; width: 25%; --r: -11deg; }
.gt-cover--2 { right: 5%; bottom: 7%; width: 23%; --r: 9deg; }
.gt-open { left: 25%; top: 31%; width: 50%; --r: -3deg; filter: drop-shadow(0 14px 14px rgba(30, 18, 10, .45)); }
.gt-cards { right: 4%; top: 10%; width: 32%; height: 32%; }
.gt-card { position: absolute; width: 46%; top: 0; filter: drop-shadow(0 8px 8px rgba(30, 18, 10, .35)); }
.gt-card svg { width: 100%; height: auto; }
.gt-card--1 { left: 0; transform: rotate(-16deg); }
.gt-card--2 { left: 26%; top: -4%; transform: rotate(-2deg); }
.gt-card--3 { left: 52%; transform: rotate(14deg); }
.gt-score { left: 5%; bottom: 6%; width: 24%; --r: 7deg; filter: drop-shadow(0 10px 10px rgba(30, 18, 10, .4)); }
.gt-pencil { left: 31%; bottom: 13%; width: 30%; --r: -22deg; }
.gt-dice--1 { left: 63%; top: 56%; width: 9%; --r: 14deg; }
.gt-dice--2 { left: 73%; top: 64%; width: 8%; --r: -20deg; }
.gt-shoe { left: 37%; top: 11%; width: 12%; --r: 18deg; }
.gt-feather { left: 6%; top: 46%; width: 10%; --r: -28deg; }
.gt-yarn { left: 52%; bottom: 3%; width: 12%; }

@media (max-width: 960px) {
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__visual { order: -1; }
}

/* ---------- 05 · COLLECTION — Find Your Kind of Wild ---------- */
.collection { position: relative; padding-top: var(--section); }
.collection__head { position: relative; z-index: 2; }
.collection__tabs-wrap { position: relative; z-index: 5; }
.collection__tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.5rem; }
.ctab {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 60px; padding: .45rem 1.1rem .45rem .45rem;
  background: var(--paper-white); color: var(--forest); border: 2.5px solid var(--line); border-radius: 999px;
  cursor: pointer; text-align: left; box-shadow: 0 4px 0 var(--cream-300);
  transition: transform .3s var(--ease-spring), background-color .3s, color .3s, box-shadow .3s;
}
.ctab:hover { transform: translateY(-2px); }
.ctab__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cream-200); border: 2px solid var(--line); color: var(--red); --icon-hole: var(--cream-200); transition: background-color .3s, color .3s; }
.ctab__icon .icon { width: 24px; height: 24px; }
.ctab__text { display: grid; line-height: 1.15; }
.ctab__animal { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ctab__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; }
.ctab[aria-selected='true'] { background: var(--forest); color: var(--cream); box-shadow: 0 4px 0 var(--forest-900); }
.ctab[aria-selected='true'] .ctab__animal { color: var(--gold-300); }
.ctab[aria-selected='true'] .ctab__icon { background: var(--gold); color: var(--forest); --icon-hole: var(--gold); }

.collection__panels { position: relative; }
.cpanel { position: relative; overflow: hidden; color: var(--cream); isolation: isolate; }
.cpanel + .cpanel { margin-top: 0; }
.cpanel__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.world { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.world--dog { background: radial-gradient(70% 80% at 25% 55%, #1F5A4B, #0F3B32 60%, #0A2B24); }
.world--cat { background: radial-gradient(70% 80% at 25% 55%, #8F2616, #5E1B10 62%, #45130A); }
.world--parrot { background: radial-gradient(70% 80% at 25% 55%, #2F6B44, #1F4A2E 60%, #143521); }
.world--horse { background: radial-gradient(70% 80% at 25% 55%, #6B4226, #4A2D19 60%, #33200F); }
.world__shape { position: absolute; border-radius: 50%; }
.world__shape--a { width: 52vw; max-width: 760px; aspect-ratio: 1; left: -8%; top: 50%; transform: translateY(-50%); background: var(--accent); opacity: .16; }
.world__shape--b { width: 26vw; max-width: 380px; aspect-ratio: 1; right: -6%; top: -18%; border: 3px dashed rgba(247, 241, 227, .18); }
.world--cat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; opacity: .45; }
.world--cat::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='60'%3E%3Crect width='24' height='20' fill='%23B4311E'/%3E%3Crect y='20' width='24' height='20' fill='%23264A7A'/%3E%3Crect y='40' width='24' height='20' fill='%23F3E8D2'/%3E%3Cpath d='M2 2l4 8 4-8M14 2l4 8 4-8M2 22l4 8 4-8M14 22l4 8 4-8M2 42l4 8 4-8M14 42l4 8 4-8' stroke='%23000' stroke-opacity='.16' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.world__prop { position: absolute; opacity: .9; }
.world__prop svg { width: 100%; height: auto; }
.wp-1 { left: 4%; top: 12%; width: clamp(60px, 7vw, 110px); transform: rotate(-18deg); }
.wp-2 { left: 40%; bottom: 8%; width: clamp(48px, 5vw, 80px); transform: rotate(12deg); }
.wp-3 { right: 4%; top: 10%; width: clamp(90px, 11vw, 170px); transform: rotate(10deg); opacity: .75; }
.wp-4 { right: 10%; bottom: 10%; width: clamp(56px, 6vw, 96px); transform: rotate(-24deg); }
.world--parrot .wp-3 { width: clamp(150px, 18vw, 260px); right: -4%; top: -4%; }
.world__icons { position: absolute; inset: 0; color: rgba(247, 241, 227, .07); --icon-hole: transparent; }
.world__icons .icon { position: absolute; width: clamp(28px, 3vw, 46px); height: auto; }
.world__icons .icon:nth-child(1) { left: 14%; top: 70%; transform: rotate(-20deg); }
.world__icons .icon:nth-child(2) { left: 24%; top: 82%; transform: rotate(10deg); }
.world__icons .icon:nth-child(3) { left: 34%; top: 72%; transform: rotate(-12deg); }
.world__icons .icon:nth-child(4) { left: 58%; top: 18%; transform: rotate(16deg); }
.world__icons .icon:nth-child(5) { left: 66%; top: 8%; transform: rotate(-8deg); }
.world__icons .icon:nth-child(6) { left: 78%; top: 20%; transform: rotate(22deg); }
.world__icons .icon:nth-child(7) { left: 88%; top: 44%; transform: rotate(-16deg); }
.world__icons .icon:nth-child(8) { left: 54%; top: 88%; transform: rotate(12deg); }
.world__icons .icon:nth-child(9) { left: 6%; top: 40%; transform: rotate(-30deg); }
.world__icons .icon:nth-child(10) { left: 46%; top: 6%; transform: rotate(8deg); }

.cpanel__visual { position: relative; display: grid; place-items: center; min-height: clamp(360px, 30vw + 120px, 560px); }
.cpanel__book { --w: clamp(190px, 12vw + 110px, 320px); --ry: 20deg; z-index: 2; }
.cpanel__book .book3d__shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.book3d-link { display: block; border-radius: 6px; }
.cpanel__pal { position: absolute; z-index: 1; }
.cpanel__pal svg { width: 100%; height: auto; }
.cpanel--dog .cpanel__pal { width: 44%; left: -4%; bottom: 0; }
.cpanel--cat .cpanel__pal { width: 40%; right: -2%; bottom: 0; }
.cpanel--parrot .cpanel__pal { width: 34%; right: 0; top: 2%; }
.cpanel--horse .cpanel__pal { width: 40%; left: -4%; bottom: -8%; }
.cpanel__seal { position: absolute; z-index: 3; --size: clamp(104px, 4vw + 80px, 140px); right: 8%; top: 6%; transform: rotate(10deg); }
.cpanel--cat .cpanel__seal, .cpanel--parrot .cpanel__seal { right: auto; left: 6%; transform: rotate(-10deg); }
.cpanel--cat .cpanel__seal { background: var(--gold); color: var(--wood-900); box-shadow: inset 0 0 0 5px var(--gold), inset 0 0 0 7px rgba(255, 253, 247, .7), 0 10px 22px -10px rgba(0, 0, 0, .6); }

.cpanel__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .84rem; color: var(--gold-300); margin-bottom: .9rem; }
.cpanel__kicker .badge { letter-spacing: .02em; text-transform: none; }
.cpanel__title { font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5rem); color: var(--cream); margin-bottom: .1em; }
.cpanel--cat .cpanel__title, .cpanel--horse .cpanel__title { color: var(--paper-white); }
.cpanel__subtitle { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h4); color: var(--gold); margin-bottom: 1.2rem; }
.cpanel__headline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.4; color: var(--cream); margin-bottom: .9rem; }
.cpanel__teaser { color: #E6E0D2; max-width: 46ch; }
.cpanel__facts { list-style: none; padding: 0; margin: 1.3rem 0 1.7rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.cpanel__facts li { display: inline-flex; align-items: center; gap: .5em; padding: .45em .95em; border-radius: 999px; background: rgba(247, 241, 227, .1); border: 1.5px solid rgba(247, 241, 227, .28); font-size: .98rem; }
.cpanel__facts .icon { width: 1.2em; height: 1.2em; color: var(--gold); --icon-hole: var(--forest); }
.cpanel__ctas .buy-soon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
/* The kicker above already carries the "Coming soon" badge — don't repeat it beside the CTA. */
.cpanel__ctas .buy-soon .badge { display: none; }
.cpanel .link-arrow { color: var(--cream); }
.buy-soon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.collection__progress { display: none; }
.collection__all { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(2.5rem, 2rem + 2vw, 4rem); }

/* Enhanced (pinned) mode — desktop with motion.
   The stage is a size container: type, book and gaps scale with its height (cqh), and the panel
   is padded clear of the tab bar (top) and progress bar (bottom), so nothing collides on short laptop screens. */
.collection__stage.is-enhanced {
  --tabs-top: clamp(.75rem, 2.2vh, 1.5rem); --tabs-h: 64px; --bar-b: clamp(.9rem, 2.4vh, 1.4rem);
  height: calc(100vh - var(--header-h)); min-height: 560px; max-height: 960px; position: relative; overflow: hidden; border-block: 3px solid var(--line);
  container-type: size;
}
.collection__stage.is-enhanced .collection__tabs-wrap { position: absolute; left: 0; right: 0; top: var(--tabs-top); z-index: 6; }
.collection__stage.is-enhanced .collection__tabs { margin: 0; }
.collection__stage.is-enhanced .collection__panels { position: absolute; inset: 0; }
.collection__stage.is-enhanced .cpanel { position: absolute; inset: 0; display: flex; align-items: center; align-items: safe center; }
.collection__stage.is-enhanced .cpanel__grid {
  width: min(100% - 2 * var(--gutter), var(--container)); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding-block: calc(var(--tabs-top) + var(--tabs-h) + clamp(.5rem, 2.5cqh, 1.75rem)) calc(var(--bar-b) + 6px + clamp(.75rem, 3cqh, 2rem));
}
.collection__stage.is-enhanced .cpanel__visual { min-height: 0; height: min(560px, 100cqh - var(--tabs-top) - var(--tabs-h) - 5rem); }
.collection__stage.is-enhanced .cpanel__book { --w: clamp(160px, min(12vw + 110px, 42cqh), 320px); }
.collection__stage.is-enhanced .cpanel__seal { --size: clamp(90px, min(4vw + 80px, 19cqh), 140px); }
.collection__stage.is-enhanced .cpanel__kicker { margin-bottom: clamp(.4rem, 1.4cqh, .9rem); }
.collection__stage.is-enhanced .cpanel__title { font-size: clamp(2.4rem, min(1.8rem + 3.6vw, 8.5cqh), 5rem); }
.collection__stage.is-enhanced .cpanel__subtitle { margin-bottom: clamp(.5rem, 1.8cqh, 1.2rem); }
.collection__stage.is-enhanced .cpanel__headline { margin-bottom: clamp(.4rem, 1.4cqh, .9rem); }
.collection__stage.is-enhanced .cpanel__teaser { margin-bottom: 0; }
.collection__stage.is-enhanced .cpanel__facts { margin: clamp(.6rem, 2.2cqh, 1.3rem) 0 clamp(.8rem, 2.6cqh, 1.7rem); }
@container (max-height: 600px) { .cpanel__headline { display: none; } }
.collection__stage.is-enhanced .cpanel:not(.is-active) { visibility: hidden; }
.collection__stage.is-enhanced .collection__progress { display: block; position: absolute; left: 50%; bottom: var(--bar-b); width: min(360px, 60%); height: 6px; transform: translateX(-50%); border-radius: 6px; background: rgba(247, 241, 227, .2); z-index: 6; overflow: hidden; }
.collection__progress span { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(.25); border-radius: inherit; }

@media (max-width: 1023px) {
  .cpanel__grid { grid-template-columns: 1fr; text-align: center; }
  .cpanel__copy { display: grid; justify-items: center; }
  .cpanel__teaser { margin-inline: auto; }
  .cpanel__facts, .cpanel__ctas, .cpanel__kicker { justify-content: center; }
  .collection__tabs { display: none; }
  .cpanel { border-top: 3px solid var(--line); }
}
@media (max-width: 560px) {
  .cpanel__visual { min-height: 330px; }
  .cpanel__book { --w: 180px; }
  .cpanel__ctas .btn { width: 100%; }
}

/* ---------- 06 · WHY YOU'LL LOVE IT ---------- */
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); align-items: start; }
.why-card {
  position: relative; padding: 1rem 1rem 1.6rem; background: var(--paper-white);
  border: 2.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 6px 8px 0 rgba(59, 36, 22, .1), var(--shadow-card);
  transform: rotate(var(--tilt, -1.2deg)); transition: transform .5s var(--ease-spring);
}
.why-card:nth-child(even) { --tilt: 1.4deg; margin-top: 2.2rem; }
.why-card:hover { transform: rotate(0deg) translateY(-6px); }
.why-card__tape { position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; margin-left: -46px; background: rgba(244, 177, 61, .75); border: 1.5px solid rgba(59, 36, 22, .25); transform: rotate(-4deg); z-index: 3; }
.why-card:nth-child(even) .why-card__tape { background: rgba(90, 143, 90, .65); transform: rotate(5deg); }
.why-card__art { position: relative; aspect-ratio: 1 / .86; border-radius: calc(var(--r-lg) - 10px); overflow: hidden; border: 2px solid var(--line); margin-bottom: 1.2rem; }
.why-card--dog .why-card__art { background: radial-gradient(circle at 50% 70%, #FBE7BF, #F6D58C); }
.why-card--parrot .why-card__art { background: radial-gradient(circle at 50% 70%, #E5F0DC, #C7DDB8); }
.why-card--cat .why-card__art { background: radial-gradient(circle at 50% 70%, #F8E1D8, #EDBFAF); }
.why-card--horse .why-card__art { background: radial-gradient(circle at 50% 70%, #F2E6D6, #DDC5A6); }
.why-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem); color: var(--forest); padding-inline: .4rem; margin-bottom: .4rem; }
.why-card p { padding-inline: .4rem; margin: 0; color: var(--ink-soft); font-size: 1.04rem; }

.vig { position: absolute; inset: 0; }
.vig > div { position: absolute; }
.vig svg { width: 100%; height: auto; }
.vig__pal { bottom: -10%; left: 50%; width: 62%; transform: translateX(-50%); }
.vig--parrot .vig__pal { width: 48%; bottom: -16%; left: 44%; }
.vig--horse .vig__pal { width: 54%; bottom: -36%; }
.vig--cat .vig__pal { width: 56%; bottom: -14%; left: 46%; }
.vig__bubble { left: 4%; top: 6%; width: 36%; transform: rotate(-8deg); }
.vig__bubble2 { right: 3%; top: 16%; width: 30%; transform: rotate(10deg); }
.vig__ball { right: 8%; bottom: 8%; width: 13%; }
.vig__mag { right: 4%; top: 8%; width: 30%; transform: rotate(12deg); }
.vig__card { left: 6%; top: 10%; width: 22%; transform: rotate(-12deg); }
.vig__yarn { right: 4%; bottom: 6%; width: 26%; }
.vig__cards { left: 4%; top: 8%; width: 32%; transform: rotate(-8deg); }
.vig__pol1 { left: 5%; top: 8%; width: 28%; transform: rotate(-10deg); }
.vig__pol2 { right: 5%; top: 6%; width: 28%; transform: rotate(9deg); }
.vig__rosette { right: 8%; bottom: 6%; width: 18%; }

@media (max-width: 1100px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } .why-card:nth-child(even) { margin-top: 0; } }

/* ---------- 07 · WHAT'S INSIDE — the open book ---------- */
.inside { color: var(--cream); }
.inside .section-head .lead { color: #D6E2DB; }
.openbook {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  max-width: 1080px; margin: clamp(2rem, 1rem + 3vw, 4rem) auto 0; perspective: 2000px;
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .35));
}
.openbook__page {
  position: relative; padding: clamp(1.4rem, 1rem + 2vw, 3rem); color: var(--ink);
  background-color: var(--paper); background-image: url('../images/textures/grain.webp'), repeating-linear-gradient(0deg, transparent 0 33px, rgba(185, 211, 230, .45) 33px 34px);
  border: 3px solid var(--line);
}
.openbook__page--left { border-radius: 28px 6px 6px 28px; border-right: 0; box-shadow: inset -30px 0 40px -30px rgba(59, 36, 22, .45); }
.openbook__page--right { border-radius: 6px 28px 28px 6px; border-left: 0; box-shadow: inset 30px 0 40px -30px rgba(59, 36, 22, .45); transform-origin: left center; transform-style: preserve-3d; }
.openbook__gutter { background: linear-gradient(90deg, #E2D5BB, #C9B694 50%, #E2D5BB); border-block: 3px solid var(--line); }
.openbook__label { font-family: var(--font-display); font-size: 1.9rem; color: var(--red); margin: 0 0 1rem; }
.openbook__tabs { display: grid; gap: .5rem; }
.otab {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; width: 100%; padding: .7rem .8rem;
  text-align: left; background: transparent; border: 2px dashed transparent; border-radius: var(--r-md); cursor: pointer; color: var(--ink);
  transition: background-color .25s, border-color .25s, transform .3s var(--ease-spring);
}
.otab:hover { background: rgba(244, 177, 61, .14); }
.otab[aria-selected='true'] { background: var(--paper-white); border: 2px solid var(--line); box-shadow: 3px 4px 0 rgba(59, 36, 22, .12); transform: translateX(6px); }
.otab__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--forest); color: var(--gold); --icon-hole: var(--forest); }
.otab[aria-selected='true'] .otab__icon { background: var(--red); color: var(--paper-white); --icon-hole: var(--red); }
.otab__icon .icon { width: 24px; height: 24px; }
.otab__title { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: var(--forest); line-height: 1.2; }
.otab__desc { display: block; font-size: .93rem; color: var(--ink-soft); line-height: 1.4; margin-top: .15rem; }
.otab__num { font-family: var(--font-hand); font-size: 1.3rem; color: var(--wood-300); }
.opanel { outline-offset: 6px; }
.opanel__label { display: flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: var(--red); margin-bottom: 1rem; }
.opanel__label .icon { width: 1.3em; height: 1.3em; --icon-hole: var(--paper); }
.openbook__parrot { position: absolute; right: 6%; top: -14%; width: clamp(90px, 9vw, 140px); z-index: 4; }
.openbook__parrot svg { width: 100%; height: auto; }
.openbook__ribbon { position: absolute; left: calc(50% + 40px); bottom: -46px; width: 26px; height: 90px; background: var(--red); border: 2.5px solid var(--line); border-top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); z-index: 3; }
.openbook__corner { position: absolute; right: -3px; bottom: -3px; width: 54px; height: 54px; background: linear-gradient(135deg, transparent 50%, #E2D5BB 50%, #F6EEDD 70%); border-radius: 0 0 26px 0; border-left: 2px solid rgba(59, 36, 22, .35); border-top: 2px solid rgba(59, 36, 22, .35); }
.inside__cta { margin-top: clamp(3.25rem, 2.8rem + 1.2vw, 4rem); }

.activity-card { position: relative; padding: 1.4rem 1.4rem 1.2rem; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: var(--r-md); box-shadow: 5px 6px 0 rgba(59, 36, 22, .12); }
.activity-card__who { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--red); margin-bottom: .7rem; }
.activity-card__who .icon { width: 1.4rem; height: 1.4rem; flex: none; }
.activity-card__q { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.35; color: var(--forest); margin-bottom: 1rem; }
.activity-card__answer summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; color: var(--forest); padding: .55rem .95rem; border-radius: 999px; background: var(--gold-100); border: 2px solid var(--line); list-style: none; }
.activity-card__answer summary::-webkit-details-marker { display: none; }
.activity-card__answer summary .icon { width: 1.2rem; height: 1.2rem; --icon-hole: var(--gold-100); }
.activity-card__answer[open] summary { background: var(--leaf-100); }
.activity-card__answer p { margin: .9rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--leaf); background: rgba(90, 143, 90, .08); font-weight: 600; }
.activity-card__pts { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem 0 0; font-family: var(--font-hand); font-size: 1.3rem; color: var(--wood); }
.activity-card__pts .icon { width: 1.1rem; height: 1.1rem; color: var(--gold-700); }
.activity-card__source { margin: .9rem 0 0; font-size: .86rem; color: var(--ink-soft); font-style: italic; }

@media (max-width: 860px) {
  .openbook { grid-template-columns: minmax(0, 1fr); }
  .openbook__page { min-width: 0; }
  .otab { min-width: 0; grid-template-columns: auto auto; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; white-space: nowrap; }
  .otab__desc, .otab__num { display: none; }
  .otab__icon { width: 38px; height: 38px; border-radius: 50%; }
  .otab__title { font-size: 1rem; }
  .openbook__gutter { display: none; }
  .openbook__page--left { border-radius: 24px 24px 6px 6px; border: 3px solid var(--line); border-bottom: 0; }
  .openbook__page--right { border-radius: 6px 6px 24px 24px; border: 3px solid var(--line); border-top: 2px dashed var(--cream-300); }
  .openbook__tabs { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
  .otab { min-width: 220px; scroll-snap-align: start; }
  .otab[aria-selected='true'] { transform: none; }
  .openbook__ribbon { left: auto; right: 14%; }
}

/* ---------- 08 · HOW GAME NIGHT WORKS ---------- */
.how { background: var(--cream); }
.how__board { position: relative; margin-top: 1rem; }
.how__path { position: absolute; left: 0; right: 0; top: 70px; width: 100%; height: 200px; pointer-events: none; }
.how__path-bg { fill: none; stroke: var(--cream-300); stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; }
.how__path-draw { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.how__token { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--line); color: var(--forest); z-index: 3; box-shadow: 0 6px 12px -4px rgba(42, 32, 24, .5); opacity: 0; }
.how__token .icon { width: 24px; height: 24px; }
.how__steps { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 2vw, 2.5rem); }
.how-step { position: relative; text-align: center; }
.how-step__art { position: relative; aspect-ratio: 1; max-width: 260px; margin: 0 auto 1.1rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--line); background: radial-gradient(circle at 50% 65%, var(--paper-white), var(--cream-200)); box-shadow: 0 0 0 8px var(--cream), 0 0 0 10.5px var(--line), var(--shadow-soft); }
.how-step:nth-child(2) .how-step__art { margin-top: 3rem; }
.how-step:nth-child(4) .how-step__art { margin-top: 2rem; }
.how-step__num { position: absolute; top: 0; left: 50%; transform: translate(-130%, -10%) rotate(-8deg); z-index: 3; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--red); color: var(--paper-white); border: 3px solid var(--line); font-family: var(--font-serif); font-weight: 800; font-size: 1.35rem; box-shadow: 0 5px 0 var(--red-700); }
.how-step:nth-child(2) .how-step__num { top: 3rem; }
.how-step:nth-child(4) .how-step__num { top: 2rem; }
.how-step__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + .6vw, 1.65rem); margin-bottom: .4rem; }
.how-step p { color: var(--ink-soft); font-size: 1.04rem; max-width: 30ch; margin-inline: auto; }
.how__trust { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

.hv { position: absolute; inset: 0; }
.hv > div, .hv > span { position: absolute; }
.hv svg { width: 100%; height: auto; }
.hv__pal--parrot { width: 40%; right: 10%; top: 12%; }
.hv__shelf { left: 10%; right: 34%; bottom: 20%; height: 52%; display: flex; align-items: flex-end; gap: 3%; }
.hv__spine { position: relative; width: 17%; height: 100%; border-radius: 3px; overflow: hidden; border: 2px solid var(--line); }
.hv__spine:nth-child(2) { height: 92%; } .hv__spine:nth-child(3) { height: 96%; transform: rotate(-4deg); transform-origin: bottom; }
.hv__spine img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hv__plank { position: absolute; left: -10%; right: -55%; bottom: -10px; height: 12px; background: var(--wood-500); border: 2px solid var(--line); border-radius: 3px; }
.hv__bunting { left: -4%; right: -4%; top: 6%; }
.hv__bunting svg { width: 100%; }
.hv__pal--dog { width: 66%; left: 17%; bottom: -16%; }
.hv__mug { width: 24%; right: 6%; bottom: 8%; }
.hv__pal--cat { width: 62%; left: 22%; bottom: -14%; }
.hv__cards { width: 36%; left: 4%; top: 14%; transform: rotate(-10deg); }
.hv__dice { width: 16%; right: 10%; top: 18%; transform: rotate(14deg); }
.hv__q { right: 30%; top: 4%; font-family: var(--font-display); font-size: 3.2rem; color: var(--red); transform: rotate(10deg); }
.hv__pal--horse { width: 60%; left: 8%; bottom: -24%; }
.hv__trophy { width: 34%; right: 6%; bottom: 14%; }
.hv__confetti { inset: 0; }
.hv__confetti i { position: absolute; width: 10px; height: 16px; border-radius: 2px; left: calc(8% + var(--i) * 6.4%); top: calc(6% + (var(--i) * 37 % 30) * 1%); background: var(--gold); transform: rotate(calc(var(--i) * 47deg)); }
.hv__confetti i:nth-child(3n) { background: var(--red); }
.hv__confetti i:nth-child(3n+1) { background: var(--leaf); }

@media (max-width: 960px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .how__path, .how__token { display: none; }
  .how-step:nth-child(n) .how-step__art { margin-top: 0; }
  .how-step:nth-child(n) .how-step__num { top: 0; }
}
@media (max-width: 520px) { .how__steps { grid-template-columns: 1fr; } .how-step__art { max-width: 230px; } }

/* ---------- 09 · MEET THE AUTHOR ---------- */
.author__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
.author__portrait { position: relative; margin: 0; max-width: 470px; justify-self: center; width: 100%; }
.author__frame {
  position: relative; aspect-ratio: 1; padding: 18px; border-radius: 50%;
  background: conic-gradient(from 200deg, #A9764C, #6B4226, #8A5A36, #4A2D19, #A9764C);
  border: 3px solid var(--line); box-shadow: inset 0 0 0 5px rgba(255, 220, 170, .22), 0 0 0 10px var(--gold-100), 0 0 0 12.5px var(--line), 0 40px 60px -30px rgba(42, 32, 24, .75);
}
.author__frame::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: var(--forest); border: 3px solid var(--line); }
.author__photo { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--line); }
.author__vine { position: absolute; left: -8%; top: -6%; width: 22%; pointer-events: none; z-index: 2; }
.author__vine svg { width: 100%; height: auto; }
.author__pal { position: absolute; right: -14%; bottom: -10%; width: 42%; z-index: 3; }
.author__pal svg { width: 100%; height: auto; }
.author__caption { position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-60%) rotate(-2deg); z-index: 4; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; background: var(--gold); border: 2.5px solid var(--line); border-radius: 999px; font-family: var(--font-hand); font-size: 1.2rem; color: var(--forest-900); white-space: nowrap; box-shadow: 0 4px 0 var(--gold-700); }
.author__caption .icon { width: 1.1rem; height: 1.1rem; }
.author__sub { margin: -.4rem 0 1.2rem; }
.author__quote { position: relative; margin: 1.8rem 0; padding: 1.4rem 1.6rem 1.4rem 4.2rem; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: var(--r-md); box-shadow: 5px 6px 0 rgba(59, 36, 22, .1); }
.author__quote .icon { position: absolute; left: 1.2rem; top: 1.25rem; width: 2.1rem; height: 2.1rem; color: var(--red); }
.author__quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.22rem; line-height: 1.5; color: var(--forest); margin-bottom: .5rem; }
.author__quote cite { font-style: normal; font-weight: 700; font-size: .95rem; color: var(--wood); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.stat dd { margin: 0; display: grid; gap: .2rem; padding: 1rem; border-radius: var(--r-md); background: var(--forest); color: var(--cream); border: 2.5px solid var(--line); text-align: center; }
.stat__num { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; color: var(--gold); }
.stat__label { font-size: .95rem; line-height: 1.3; }
@media (max-width: 900px) { .author__grid { grid-template-columns: 1fr; } .author__portrait { max-width: 380px; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } .author__pal { right: -6%; } }

/* ---------- 10 · PLAY & EXPLORE — quiz ---------- */
.quiz { max-width: 1080px; margin-inline: auto; }
.quiz__animals { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-bottom: 1.6rem; }
.qtab { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .4rem 1.15rem .4rem .45rem; border: 2.5px solid var(--line); border-radius: 999px; background: var(--paper-white); color: var(--forest); font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 0 var(--cream-300); transition: transform .3s var(--ease-spring), background-color .25s, color .25s; }
.qtab:hover { transform: translateY(-2px); }
.qtab__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cream-200); color: var(--red); --icon-hole: var(--cream-200); }
.qtab__icon .icon { width: 22px; height: 22px; }
.qtab[aria-selected='true'] { background: var(--red); color: var(--paper-white); box-shadow: 0 4px 0 var(--red-700); }
.qtab[aria-selected='true'] .qtab__icon { background: var(--paper-white); }
.quiz__board { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 1rem + 2vw, 2.5rem); align-items: center; }
.quiz__stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--r-xl); border: 3px solid var(--line); overflow: hidden; background: var(--forest); background-image: radial-gradient(70% 60% at 50% 75%, rgba(244, 177, 61, .35), transparent 70%), url('../images/textures/grain.webp'); background-size: auto, 128px; }
.quiz__spot { position: absolute; left: 12%; right: 12%; bottom: 6%; height: 18%; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.quiz__pal { position: absolute; left: 50%; bottom: 4%; width: 74%; transform: translateX(-50%); }
.quiz__pal[data-quiz-pal='horse'] { width: 66%; bottom: -16%; }
.quiz__pal[data-quiz-pal='parrot'] { width: 56%; }
.quiz__pal svg { width: 100%; height: auto; }
.quiz__bubble { position: absolute; left: 6%; top: 6%; max-width: 64%; padding: .6rem 1rem; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: 18px 18px 18px 4px; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; color: var(--forest); box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.quiz__card { padding: clamp(1.3rem, 1rem + 1.5vw, 2.3rem); }
.quiz__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; font-size: .9rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .8rem; }
.quiz__src { font-weight: 600; font-style: italic; color: var(--wood); }
.quiz__q { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.35; margin-bottom: 1.2rem; }
.quiz__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.qopt { display: flex; align-items: center; gap: .7rem; min-height: 58px; padding: .6rem .9rem; text-align: left; font-weight: 600; font-size: 1.04rem; color: var(--ink); background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: transform .25s var(--ease-spring), background-color .2s, box-shadow .2s; box-shadow: 0 4px 0 var(--cream-300); }
.qopt:hover:not(:disabled) { transform: translateY(-2px); background: var(--gold-100); }
.qopt__key { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--forest); color: var(--cream); font-family: var(--font-serif); font-weight: 800; }
.qopt.is-correct { background: var(--leaf-100); border-color: var(--leaf-700); box-shadow: 0 4px 0 var(--leaf); }
.qopt.is-correct .qopt__key { background: var(--leaf-700); }
.qopt.is-wrong { background: #FBE5DF; border-color: var(--red); box-shadow: 0 4px 0 var(--red-100); }
.qopt.is-wrong .qopt__key { background: var(--red); }
.qopt:disabled { cursor: default; }
.quiz__feedback { min-height: 3.2em; margin: 1rem 0 .6rem; font-weight: 600; color: var(--forest); }
.quiz__feedback strong { color: var(--red); }
.quiz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: 1rem; border-top: 2px dashed var(--cream-300); }
.quiz__score { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700; color: var(--forest); font-size: 1.05rem; }
.quiz__score .icon { width: 1.4rem; height: 1.4rem; color: var(--gold-700); }
.quiz__score strong { font-family: var(--font-serif); font-size: 1.4rem; color: var(--red); }
.quiz__noscript { padding: 1.5rem; margin-top: 1rem; }
.play__ctas { margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
@media (max-width: 860px) { .quiz__board { grid-template-columns: 1fr; } .quiz__stage { max-width: 360px; margin-inline: auto; width: 100%; aspect-ratio: 1.3 / 1; } .quiz__pal { width: 52%; } .quiz__pal[data-quiz-pal='horse'] { width: 46%; } .quiz__pal[data-quiz-pal='parrot'] { width: 40%; } }
@media (max-width: 520px) { .quiz__options { grid-template-columns: 1fr; } }

/* ---------- 11 · OCCASIONS ---------- */
.occasions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.occasion {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch;
  background: var(--paper-white); border: 2.5px solid var(--line); border-radius: 8px 30px 30px 8px; overflow: hidden;
  box-shadow: -10px 0 0 -3px var(--cream-200), -10px 0 0 0 var(--line), 6px 8px 0 rgba(59, 36, 22, .1), var(--shadow-card);
}
.occasion::after { content: ''; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; background: linear-gradient(135deg, transparent 50%, #E6D8BB 50%, #F7EFDD 72%); border-left: 1.5px solid rgba(59, 36, 22, .3); border-top: 1.5px solid rgba(59, 36, 22, .3); border-radius: 0 0 26px 0; transition: width .35s var(--ease-out), height .35s var(--ease-out); }
.occasion:hover::after { width: 64px; height: 64px; }
.occasion__art { position: relative; min-height: 260px; border-right: 2.5px dashed var(--cream-300); overflow: hidden; }
.occasion--family .occasion__art { background: linear-gradient(180deg, #F6E2B3, #F1D08C); }
.occasion--party .occasion__art { background: linear-gradient(180deg, #E5F0DC, #C7DDB8); }
.occasion--classroom .occasion__art { background: linear-gradient(180deg, #EAD9C2, #D9BF9D); }
.occasion--gift .occasion__art { background: linear-gradient(180deg, #F8E1D8, #EDBFAF); }
.occasion__body { position: relative; padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }
.occasion__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.55rem, 1.25rem + .9vw, 2rem); }
.occasion__body p { color: var(--ink-soft); margin: 0; }
.occasion__page { position: absolute; top: 1rem; right: 1.2rem; font-family: var(--font-hand); color: var(--wood-300); font-size: 1.1rem; }
.occ { position: absolute; inset: 0; }
.occ > div { position: absolute; }
.occ svg { width: 100%; height: auto; }
.occ__lamp { left: 4%; top: -6%; width: 34%; }
.occ__pal--dog { left: 30%; bottom: 22%; width: 46%; }
.occ__sofa { left: 4%; right: 4%; bottom: 4%; }
.occ__cards { right: 6%; top: 10%; width: 16%; transform: rotate(12deg); }
.occ__mug { right: 4%; bottom: 3%; width: 20%; }
.occ__lights { left: -6%; right: -6%; top: 0; }
.occ__bunting { left: -4%; right: -4%; top: 14%; }
.occ__pal--parrot { left: 24%; bottom: 4%; width: 44%; }
.occ__hat { left: 30%; top: 23%; width: 16%; transform: rotate(-18deg); z-index: 3; }
.occ__gift { right: 6%; bottom: 5%; width: 30%; }
.occ__board { left: 6%; top: 8%; width: 44%; transform: rotate(-3deg); }
.occ__pal--horse { right: 0; bottom: -4%; width: 44%; }
.occ__desk { left: 0; right: 0; bottom: 0; height: 18%; background: var(--wood-500); border-top: 3px solid var(--line); }
.occ__apple { left: 10%; bottom: 12%; width: 15%; }
.occ__books { left: 30%; bottom: 12%; width: 32%; }
.occ__pal--cat { left: 16%; bottom: 30%; width: 56%; }
.occ__giftbox { left: 10%; bottom: -2%; width: 66%; z-index: 2; }
.occ__tag { right: 8%; top: 12%; padding: .4rem .9rem; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: 8px; font-family: var(--font-hand); font-size: 1.25rem; color: var(--red); transform: rotate(10deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.occ__yarn { right: 8%; bottom: 8%; width: 20%; }
.occasions__cta { margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
@media (max-width: 1100px) { .occasions__grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } }
@media (max-width: 600px) { .occasion { grid-template-columns: 1fr; } .occasion__art { border-right: 0; border-bottom: 2.5px dashed var(--cream-300); min-height: 240px; } }

/* ---------- 12 · GAME NIGHT INSPIRATION ---------- */
.ideas__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.idea-card { grid-column: span 4; }
.idea-card--feature { grid-column: span 5; }
.idea-card--post:not(.idea-card--feature) { grid-column: span 4; }
.ideas__press { grid-column: span 3; }
.idea-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--paper-white); border: 2.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 6px 8px 0 rgba(59, 36, 22, .1); transition: transform .4s var(--ease-spring), box-shadow .4s; }
.idea-card__link:hover { color: inherit; transform: translateY(-6px) rotate(-.5deg); box-shadow: 8px 14px 0 rgba(59, 36, 22, .12); }
.idea-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2.5px solid var(--line); }
.idea-card__body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.idea-card__body h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.25; }
.idea-card--feature .idea-card__body h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.idea-card__body p { color: var(--ink-soft); font-size: 1.02rem; }
.idea-card__body .link-arrow { margin-top: auto; align-self: flex-start; }
.idea-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; font-size: .92rem; color: var(--ink-soft); margin-bottom: .5rem; }
.ideas__press { padding: 1.4rem; background: var(--forest); color: var(--cream); border: 2.5px solid var(--line); border-radius: var(--r-lg); box-shadow: 6px 8px 0 rgba(59, 36, 22, .12); }
.ideas__press-title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-serif); color: var(--gold); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
.ideas__press-title .icon { width: 1.2rem; height: 1.2rem; }
.ideas__press ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ideas__press li a { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .9rem 0; border-bottom: 1px solid rgba(247, 241, 227, .16); color: var(--cream); text-decoration: none; }
.ideas__press li:last-child a { border-bottom: 0; }
.ideas__press li a:hover .ideas__press-headline { text-decoration: underline; color: var(--gold); }
.ideas__press-outlet { grid-column: 1; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.ideas__press-headline { grid-column: 1; font-family: var(--font-serif); font-weight: 600; line-height: 1.3; }
.ideas__press .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.2rem; height: 1.2rem; color: var(--gold-300); }
.ideas__cta { margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
@media (max-width: 1100px) { .idea-card--feature, .idea-card--post:not(.idea-card--feature) { grid-column: span 6; grid-row: auto; } .ideas__press { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 700px) { .idea-card--feature, .idea-card--post:not(.idea-card--feature) { grid-column: 1 / -1; } }

.pthumb { position: absolute; inset: 0; overflow: hidden; }
.pthumb > div { position: absolute; }
.pthumb svg { width: 100%; height: auto; }
.pthumb--book-howl { background: radial-gradient(80% 90% at 40% 70%, #1F5A4B, #0F3B32); }
.pthumb--book-howl .pthumb__cover { left: 14%; bottom: 10%; }
.pthumb--book-howl .pthumb__cover .book3d { --w: clamp(90px, 12vw, 170px); }
.pthumb--book-howl .pthumb__pal { right: 8%; bottom: -16%; width: 38%; }
.pthumb--book-howl .pthumb__bubble { right: 30%; top: 8%; width: 26%; transform: rotate(-6deg); }
.pthumb--host-table { background: radial-gradient(80% 90% at 50% 30%, #FBE7BF, #F1C979); }
.pthumb__table { left: -4%; right: -4%; bottom: -4%; height: 34%; border-top: 3px solid var(--line); }
.pthumb--host-table .pthumb__pal { left: 8%; bottom: 16%; width: 34%; }
.pthumb--host-table .pthumb__score { right: 12%; bottom: 6%; width: 22%; transform: rotate(8deg); }
.pthumb--host-table .pthumb__bone { left: 44%; bottom: 8%; width: 14%; transform: rotate(-10deg); }
.pthumb--host-table .pthumb__trophy { left: 48%; top: 10%; width: 18%; }

/* ---------- 13 · FINALE ---------- */
.finale { position: relative; margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding: clamp(3rem, 2rem + 3vw, 5rem) 0 0; overflow: hidden; text-align: center; }
.finale__top { position: absolute; left: 0; right: 0; top: -68px; height: 70px; }
.finale__top svg { width: 100%; height: 100%; }
.finale { overflow: visible; }
.finale__inner { position: relative; z-index: 3; }
.finale__title { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); color: var(--cream); margin-bottom: .4em; }
.finale__line { display: block; }
.finale__text { max-width: 50ch; margin: 0 auto 2rem; color: #DCE6DF; }
.finale-scene { position: relative; height: clamp(320px, 26vw + 140px, 520px); margin-top: clamp(2rem, 1rem + 3vw, 4rem); overflow: hidden; }
.fs-lights { position: absolute; left: -2%; right: -2%; top: 0; }
.fs-lights svg { width: 100%; }
.fs-row { position: absolute; left: 50%; bottom: 26%; width: min(1100px, 104%); height: 78%; transform: translateX(-50%); }
.fs-pal { position: absolute; bottom: 0; }
.fs-pal svg { width: 100%; height: auto; display: block; }
.fs-pal--dog { left: 6%; width: 22%; transform: translateY(18%); }
.fs-pal--cat { left: 27%; width: 18%; transform: translateY(14%); }
.fs-pal--parrot { left: 58%; width: 14%; transform: translateY(6%); }
.fs-pal--horse { left: 74%; width: 22%; transform: translateY(16%); }
.fs-table { position: absolute; left: -2%; right: -2%; bottom: 0; height: 28%; border-top: 3px solid var(--line); box-shadow: inset 0 8px 0 rgba(255, 220, 170, .2); }
.fs-books { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: clamp(.5rem, 1vw, 1.25rem); list-style: none; margin: 0; padding: 0; z-index: 3; }
.fs-books li { transform: translateY(calc(var(--i) * 0px)) rotate(calc((var(--i) - 1.5) * 4deg)); }
.fs-books .book3d { --w: clamp(72px, 8.5vw, 150px); }
@media (max-width: 700px) {
  .fs-pal--parrot { display: none; }
  .fs-pal--dog { left: 2%; width: 30%; } .fs-pal--cat { left: 34%; width: 26%; } .fs-pal--horse { left: 66%; width: 32%; }
}

/* ---------- 14 · NEWSLETTER ---------- */
.newsletter { padding-top: calc(var(--section) * 1.1); }
.newsletter__card { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(1.4rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; }
.newsletter__cat { position: absolute; left: 50%; top: 0; width: clamp(150px, 12vw + 60px, 220px); transform: translate(-50%, -66%); z-index: -1; }
.newsletter__cat svg { width: 100%; height: auto; }
.newsletter__paws { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); display: flex; gap: clamp(30px, 3vw, 48px); color: #EFE2CC; z-index: 2; }
.newsletter__paws .icon { width: 30px; height: 30px; stroke: var(--line); stroke-width: 1.2; }
.newsletter__card .section-head { margin-bottom: 1.8rem; }
.newsletter-form__row { display: flex; gap: .8rem; max-width: 620px; margin: 0 auto; }
.newsletter-form__row .input { flex: 1; min-height: 60px; font-size: 1.12rem; }
.newsletter-form__note { display: inline-flex; align-items: center; gap: .45rem; margin: 1rem 0 0; font-size: .97rem; color: var(--ink-soft); }
.newsletter-form__note .icon { width: 1.1rem; height: 1.1rem; color: var(--leaf-700); }
.newsletter-form .field-error { justify-content: center; margin-top: .7rem; }
.newsletter-form .form-status { max-width: 620px; margin-inline: auto; text-align: left; }
.newsletter__props .np { position: absolute; pointer-events: none; }
.newsletter__props svg { width: 100%; height: auto; }
.np--mug { left: -5%; bottom: -6%; width: clamp(80px, 9vw, 130px); transform: rotate(-6deg); }
.np--pencil { right: 4%; bottom: -14px; width: clamp(120px, 14vw, 190px); transform: rotate(-8deg); }
.np--feather { right: -4%; top: 18%; width: clamp(50px, 5vw, 76px); transform: rotate(24deg); }
@media (max-width: 600px) {
  .newsletter-form__row { flex-direction: column; }
  .newsletter-form__row .btn { width: 100%; }
  .np--feather { display: none; }
  .np--mug { left: -2%; bottom: -10%; width: 70px; }
}

/* ==========================================================================
   Eye-candy layer · hero backdrop, ribbons, big type, colour blocks
   ========================================================================== */

/* Hero backdrop: slow sunburst, leafy glow and drifting motifs */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__rays {
  position: absolute; left: 70%; top: 50%; width: 1700px; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244, 177, 61, .2) 0deg 6deg, rgba(244, 177, 61, 0) 6deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 60%); mask-image: radial-gradient(circle, #000 14%, transparent 60%);
  animation: rays-spin 140s linear infinite;
}
@keyframes rays-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero__blob { position: absolute; right: -10%; top: -4%; width: 62vw; max-width: 980px; aspect-ratio: 1; border-radius: 42% 58% 61% 39% / 45% 41% 59% 55%; background: radial-gradient(circle at 45% 45%, rgba(90, 143, 90, .22), rgba(90, 143, 90, .07) 55%, transparent 70%); }
.hero__motifs { left: 42%; }
.hero__motifs .motif { --icon-hole: var(--cream); }
.hero .container { position: relative; z-index: 1; }

.hero__title { position: relative; }
.hero__line--mark { width: fit-content; background: linear-gradient(transparent 60%, rgba(244, 177, 61, .5) 60%, rgba(244, 177, 61, .5) 90%, transparent 90%); padding-right: .1em; }
.hero__doodle { position: absolute; pointer-events: none; z-index: 1; }
.hero__doodle svg { width: 100%; height: auto; }
.hero__doodle--burst { left: -50px; top: -26px; width: 50px; transform: rotate(-24deg); }
.hero__doodle--spark { left: min(78%, 440px); top: 22%; width: 66px; }
@media (max-width: 1023px) {
  .hero__line--mark { margin-inline: auto; }
  .hero__doodle--burst { left: 2%; top: -34px; }
  .hero__doodle--spark { left: auto; right: 0; top: 18%; width: 50px; }
}

.hs-badge { left: -8%; top: 15%; width: 22%; z-index: 8; }
.hs-sticker {
  right: -7%; top: 47%; z-index: 8; width: 20%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; gap: .15rem;
  background: var(--red); color: var(--paper-white); border: 3px solid var(--line); border-radius: 50%;
  outline: 2px dashed rgba(255, 253, 247, .65); outline-offset: -9px; transform: rotate(12deg);
  box-shadow: 0 6px 0 var(--red-700), 0 18px 26px -12px rgba(42, 32, 24, .55);
}
.hs-sticker__num { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1rem, .55rem + 1.3vw, 1.85rem); line-height: 1; }
.hs-sticker__label { font-family: var(--font-hand); font-size: clamp(.72rem, .45rem + .65vw, 1.08rem); line-height: 1.05; }
.hs-spot { position: absolute; left: 50%; bottom: -4%; width: 92%; height: 34%; transform: translateX(-50%); z-index: 5; pointer-events: none; background: radial-gradient(50% 50% at 50% 55%, rgba(244, 177, 61, .6), rgba(244, 177, 61, 0) 72%); filter: blur(8px); }
@media (max-width: 560px) { .hs-badge { width: 24%; left: -3%; top: 12%; } .hs-sticker { right: -2%; width: 23%; } }

/* Ribbon marquees */
.ribbons { position: relative; z-index: 4; height: clamp(120px, 10vw, 170px); margin: clamp(-5rem, -4vw, -2.5rem) 0 clamp(-2.5rem, -1.5vw, -1rem); pointer-events: none; }
.ribbons--single { height: clamp(90px, 7vw, 120px); margin: clamp(1rem, 2vw, 2.5rem) 0 clamp(-3rem, -2vw, -1.5rem); }
.ribbon { position: absolute; left: -6%; right: -6%; top: 50%; padding: clamp(.6rem, .4rem + .6vw, 1.05rem) 0; border-block: 3px solid var(--line); white-space: nowrap; overflow: hidden; box-shadow: 0 14px 26px -16px rgba(42, 32, 24, .6); }
.ribbon--forest { background: var(--forest); color: var(--cream); transform: translateY(-50%) rotate(-2.6deg); z-index: 2; }
.ribbon--red { background: var(--red); color: var(--paper-white); transform: translateY(-50%) rotate(2deg); z-index: 1; }
.ribbon--gold { background: var(--gold); color: var(--forest-900); transform: translateY(-50%) rotate(-1.6deg); }
.ribbon__track { display: inline-flex; will-change: transform; }
.ribbon__group { display: inline-flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding-right: clamp(1rem, 2vw, 2rem); }
.ribbon__word { font-family: var(--font-display); font-size: clamp(1.45rem, 1rem + 1.6vw, 2.5rem); line-height: 1.1; }
.ribbon__sep .icon { width: clamp(1.3rem, 1rem + .8vw, 1.9rem); height: clamp(1.3rem, 1rem + .8vw, 1.9rem); display: block; }
.ribbon--forest .ribbon__sep { color: var(--gold); --icon-hole: var(--forest); }
.ribbon--red .ribbon__sep { color: var(--gold); --icon-hole: var(--red); }
.ribbon--gold .ribbon__sep { color: var(--red); --icon-hole: var(--gold); }

/* Oversized outline word drifting behind the welcome section */
.welcome { overflow: clip; }
.welcome .container { position: relative; z-index: 1; }
.bigword {
  position: absolute; left: 0; top: clamp(1.5rem, 3vw, 3.5rem); z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(6rem, 2rem + 15vw, 18rem); line-height: .9;
  color: transparent; -webkit-text-stroke: 2px rgba(15, 59, 50, .1);
}

/* Golden "Why you'll love it" */
.why--gold { background-color: var(--gold); background-image: radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .35), transparent 70%), url('../images/textures/grain.webp'); background-size: 100% 100%, 128px; }
.why--gold .container { position: relative; z-index: 1; }
.why--gold .accent { color: var(--red-700); }
.why--gold .swash > svg { color: var(--red); }
.why__motifs .motif { color: var(--forest); opacity: .13; }
.why--gold .why-card { box-shadow: 8px 10px 0 rgba(59, 36, 22, .22), var(--shadow-card); }
.why--gold .why-card--dog .why-card__art { background: radial-gradient(circle at 50% 75%, #2C6150, var(--forest) 70%); }
.why--gold .why-card--parrot .why-card__art { background: radial-gradient(circle at 50% 75%, #7FB07A, var(--leaf-700) 72%); }
.why--gold .why-card--cat .why-card__art { background: radial-gradient(circle at 50% 75%, #D9573E, var(--red) 72%); }
.why--gold .why-card--horse .why-card__art { background: radial-gradient(circle at 50% 75%, #A87A52, var(--wood) 72%); }

/* Warm-red "Play & Explore" */
.play--red { background-color: var(--red); background-image: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%), url('../images/textures/grain.webp'); background-size: 100% 100%, 128px; color: var(--cream); }
.play--red .container { position: relative; z-index: 1; }
.play--red .section-head .lead { color: #FCE6DF; }
.play__motifs .motif { color: var(--paper-white); opacity: .13; --icon-hole: transparent; }
.play--red .qtab { box-shadow: 0 4px 0 var(--red-700); }
.play--red .qtab[aria-selected='true'] { background: var(--forest); color: var(--cream); box-shadow: 0 4px 0 var(--forest-900); }
.play--red .quiz__card { box-shadow: 8px 10px 0 rgba(59, 36, 22, .3), var(--shadow-card); color: var(--ink); }
.play--red .quiz__stage { box-shadow: 8px 10px 0 rgba(59, 36, 22, .3); }
.play--red .play__ctas .btn--ghost { --btn-fg: var(--paper-white); }