/* Tiny Tot Tree theme: the look of the books. ALL design choices live in the tokens below (:root); components use only tokens,
   so this file ports to a Shopify theme as settings (colours, fonts, radii) plus a few component rules.
   Colours sampled from the book covers (dev/marketing/brand/BRAND-SPEC.md). "Bright" colours are for stripes, borders and icons;
   the deeper colour of each section holds text (contrast 4.5:1 or better). Marketing's final theme (T-025) replaces the token values only.
   Fonts: no web fonts are loaded (the page allows only its own files); rounded system fonts give the same friendly feel. */
:root {
  /* colour */
  --wa: #25D366; --wa-ink: #0B3D1F;   /* T-414: WhatsApp share button */
  --cream: #FFF6E5; --paper: #FFFFFF; --white: #FFFFFF; --ink: #502A13; --ink-soft: #7A5A44; --line: #EBD9BC;
  --sun: #F8D828; --apple: #D92B1A; --apple-edge: #8F1A0E; --leaf: #58A820; --sky: #00B0F8; --royal: #0058B0; --royal-edge: #003B7A; --grape: #8236C0; --bubble: #C8246E;
  --hero-end: #FFE9A8; --ig-edge: #5A2384; --wa: #17804A; --wa-edge: #0E5A32; --sun-edge: #B59C00; --bubble-edge: #8F1A55; --black: #000000; --pill-shadow: #EBD9BC; --field-edge: #9C7B5E; --pink-a: #FFF4C2; --pink-b: #FFE0EE; --pink-edge: #C8246E; --pink-shadow: #8F1A55; --ok-bg: #E4F3D6; --ok-ink: #245A08; --no-bg: #FBE0DC;
  --refer-from: #FFF4C2; --refer-to: #FFE0EE; --sub-pink: #FFB5D3; --sub-blue: #B9E4FF;   /* T-350 Refer card, subscription page */
  --field-line: #9C7B5E;   /* T-403 a clear field border (3.9:1 on white) */
  --strip-ink: #222222; --g-ink: #1F1F1F; --g-edge: #747775; --g-hover: #F7F8F8; --forgot-bg: #FFF8DC;   /* T-355 test strip, Google button (Google's own colours), Forgot box */
  --tone-sun: #FFF4B8; --tone-sky: #DDF1FF; --tone-leaf: #DDF5DF; --tone-bubble: #FFE0EC; --tone-grape: #EDE3FF; --tone-royal: #E1E7FF;
  --dq-gold-ink: #6B5600; --dq-bark: #6B4A34; --dq-sand: #E6DCCB; --dq-sea: #003A57; --dq-sky-edge: #0078A8; --dq-leaf-edge: #3F7D14; --dq-navy: #00407F; --dq-amber: #FFB703; --dq-royal-edge: #003F80;   /* T-450 daily quiz */
  --leaf-deep: #2E6B0C;   /* T-447 the Fun zone's green cards (white text on it) */
  --scene-space-1: #2A3F9E; --scene-space-2: #16226A; --scene-space-3: #0B1240; --scene-sky: #9FDCFF; --scene-grass: #BFE89A; --scene-grass-deep: #8FCB5A; --scene-sea: #6CC6EE; --scene-sea-deep: #1E7FB8; --scene-field: #E9D38A; --puz-ink: #4A1E70; --puz-slot: #C9A8EC;   /* T-480 Find-it scenes, page puzzle */
  /* type */
  --head: ui-rounded, "SF Pro Rounded", "Fredoka", "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: ui-rounded, "Nunito", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* shape */
  --radius: 22px; --radius-sm: 14px; --gap: 16px; --gutter: 16px; --shadow: 0 6px 0 rgba(80, 42, 19, .12); --tap: 44px;
  /* motion (T-456 MotionKit, D-097): eight moves for the games. Calm mode (reduced motion) turns each into a short fade. */
  --fun-spring: cubic-bezier(.34, 1.56, .64, 1); --fun-pop: 400ms; --fun-pop-step: 80ms; --fun-press: 150ms; --fun-right: 600ms; --fun-wrong: 400ms;
  --fun-string: 500ms; --fun-fly: 600ms; --fun-peg: 300ms; --fun-book: 600ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.5 var(--body); overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 7vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); } h3 { font-size: 1.15rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.block { padding-top: 28px; padding-bottom: 28px; }   /* T-258: top and bottom only, so .wrap keeps its side gutter on phones */
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 50; }
.test-shop { background: var(--sun); color: var(--strip-ink); text-align: center; font-size: 13px; font-weight: 600; padding: 4px 12px; line-height: 1.3; }   /* T-355: staging only */
.muted { color: var(--ink-soft); } .small { font-size: .9rem; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }

/* top bar */
.bar { background: var(--paper); border-bottom: 4px solid var(--sun); position: sticky; top: 0; z-index: 10; }
.bar .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 6px; padding-bottom: 6px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.25rem var(--head); white-space: nowrap; }
.brand .logo { width: 44px; height: 44px; object-fit: contain; flex: none; }   /* square file shown square: never stretched */
.bar nav { order: 3; width: 100%; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { white-space: nowrap; text-decoration: none; font-weight: 800; padding: 0 12px; border-radius: 99px; min-height: var(--tap); display: inline-flex; align-items: center; }
.bar nav a:hover { background: var(--cream); } .bar nav a[aria-current="page"] { background: var(--sun); }
.bar .wa-top { margin-left: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 99px; border: 0; font: 800 1.1rem var(--head);
  text-decoration: none; cursor: pointer; color: var(--white); background: var(--apple); box-shadow: 0 5px 0 var(--apple-edge); transition: transform .12s; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--apple-edge); }
.btn.royal { background: var(--royal); box-shadow: 0 5px 0 var(--royal-edge); }
.btn.wa { background: var(--wa); box-shadow: 0 5px 0 var(--wa-edge); }
.btn.ghost { background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.btn.small { min-height: var(--tap); padding: 0 16px; font-size: 1rem; }

/* hero */
.hero { background: linear-gradient(180deg, var(--cream) 0%, var(--hero-end) 100%); border-bottom: 6px dotted var(--sun); overflow: hidden; }
.hero .wrap { display: grid; gap: 8px; align-items: end; padding-top: 24px; padding-bottom: 0; }
.hero .lead { font-size: 1.15rem; max-width: 34ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 22px; }
.hero .boy { justify-self: center; width: min(70vw, 320px); }
.hero .boy img, .hero .boy svg { width: 100%; height: auto; }
.bubble { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; padding: 10px 14px; font-weight: 800; max-width: 24ch; margin: 0 0 16px; }
.bubble::after { content: ""; position: absolute; left: 28px; bottom: -14px; width: 22px; height: 22px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.doodle { color: var(--bubble); }

/* section tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow); min-height: 150px; transition: transform .15s; }
.tile:hover { transform: translateY(-4px) rotate(-1deg); }
.tile .ic { font-size: 2.4rem; line-height: 1; } .tile b { font: 800 1.2rem/1.1 var(--head); } .tile span { font-size: .95rem; } .tile small { margin-top: auto; font-weight: 800; }
/* T-511: a magazine shelf's tile and books also link to the subscription */
.tilebox { display: flex; flex-direction: column; gap: 8px; } .tilebox .tile { flex: 1; }
.tilesub, .cardsub { display: flex; align-items: center; justify-content: center; min-height: 44px;   /* T-519: a finger-sized tap */
  box-sizing: border-box; text-align: center; font-weight: 800; font-size: .92rem; padding: 8px 10px; border-radius: var(--radius); border: 2px solid currentColor; text-decoration: none; }
.cardsub { margin-top: 6px; font-size: .85rem; padding: 6px 8px; }

/* book cards */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.card { background: var(--paper); border-radius: var(--radius-sm); border: 3px solid var(--line); padding: 6px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-width: 0; }
.card:hover { border-color: var(--sun); }
.card .cv { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--sun); display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font: 800 1rem var(--head); }
.card .cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.price { font-weight: 800; color: var(--royal); }
.chip { display: inline-block; font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 99px; background: var(--cream); border: 2px solid var(--line); }
.ribbon { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--bubble); color: var(--white); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.ribbon.out { left: auto; right: 8px; background: var(--ink); }
.cvtags { display: flex; flex-wrap: wrap; gap: 6px; }   /* T-497: the chips sit under the cover */
.cvtag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font: 800 .72rem/1 var(--body); }
.cvtag.out { background: var(--ink); color: var(--white); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.filters input, .filters select { font: inherit; padding: 0 14px; min-height: var(--tap); border: 2px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink); flex: 1 1 160px; min-width: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.chips button { font: 800 .95rem var(--body); min-height: var(--tap); padding: 0 16px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* section header */
.sechead { padding: 26px 0 22px; border-bottom: 6px dotted rgba(255, 255, 255, .55); }
.sechead .ic { font-size: 3rem; } .sechead p { max-width: 52ch; font-size: 1.1rem; margin: 0 0 8px; }


/* hero says, learning panel, ticks */
.says { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 3px dashed var(--sky); border-radius: var(--radius); padding: 14px; }
.says .face { flex: 0 0 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid var(--sun); background: var(--cream); }
.says .face img, .says .face svg { width: 100%; height: 100%; object-fit: cover; }
.learn { background: var(--royal); color: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.learn .btn { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); }
.ticks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li::before { content: "\2713"; flex: 0 0 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: var(--leaf); color: var(--white); font-weight: 800; }
.igstrip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--paper); border: 3px solid var(--grape); border-radius: var(--radius); padding: 14px; margin-top: 18px; }
.igstrip p { margin: 0; flex: 1 1 220px; } .igicon { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--grape); color: var(--white); }
/* T-449 (D-107): the one Instagram chip, always at the right end of its row */
.igchip { display: flex; width: max-content; max-width: 100%; margin-left: auto; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px 0 4px; border-radius: 99px; background: var(--white); border: 2px solid var(--tone-grape);
  color: var(--ig-edge); font: 700 .9rem var(--head); text-decoration: none; box-shadow: 0 3px 0 var(--tone-grape); white-space: nowrap; flex: none; }
.igchip .igi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--white); background: linear-gradient(45deg, var(--sun), var(--bubble) 55%, var(--grape)); }
.igchip.small { padding-right: 10px; font-size: .8rem; gap: 6px; } .igchip.small .igi { width: 24px; height: 24px; }
.igchip:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
footer .igfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; } footer .igchip { color: var(--ig-edge); }
.sheetstrip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sheetstrip p { margin: 0; flex: 1 1 220px; }

/* book page */
.crumbs { font-weight: 800; font-size: .95rem; padding: 14px 0 0; } .crumbs a { text-decoration: none; color: var(--royal); }
.book { display: grid; gap: 20px; padding-top: 12px; } .book > * { min-width: 0; }
.gallery { display: grid; gap: 10px; }
.gallery .main { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 3px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 1.3rem var(--head); text-align: center; padding: 14px; }
.gallery .main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.thumbs button { padding: 0; aspect-ratio: 3 / 4; border-radius: 10px; border: 3px solid var(--line); background: var(--paper); overflow: hidden; cursor: pointer; min-height: var(--tap); }
.thumbs button[aria-pressed="true"] { border-color: var(--royal); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.info h1 { font-size: clamp(1.7rem, 6vw, 2.6rem); overflow-wrap: anywhere; }
.info .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.info .price { font: 800 1.9rem var(--head); }
.pill { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 800; font-size: .85rem; } .pill.no { background: var(--no-bg); color: var(--apple-edge); }
.note { font-size: .92rem; color: var(--ink-soft); }
.buy { position: sticky; bottom: 0; z-index: 4; background: var(--paper); border-top: 4px solid var(--sun); padding: 10px var(--gutter); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.buy .price { font: 800 1.4rem var(--head); }

/* words page */
.prose { max-width: 62ch; } .prose h3 { margin-top: 1.2em; } .prose p { margin: 0 0 .9em; }
/* T-240 (D-063 rule 11): About Us and Bulk orders as cards and chips */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); margin: 16px 0 24px; }
.info-card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.info-card h2 { margin: 0; font-size: 1.25rem; } .info-card p { margin: 0; overflow-wrap: anywhere; } .info-card .btn { margin-top: auto; }
.contact-line a { min-height: var(--tap); display: inline-flex; align-items: center; }   /* T-324: privacy page contact links */
.info-card a.mail { min-height: var(--tap); display: inline-flex; align-items: center; }   /* T-324: a full-size tap area */
.info-card .ic { font: 800 1.6rem/1 var(--head); min-width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: inline-flex; align-items: center; justify-content: center; }
.info-card.wide { margin-top: 24px; align-items: stretch; }
.link-chips a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 800; text-decoration: none; }
.link-chips a:hover { border-color: var(--ink); }
.wrap.block > .lead { font-size: 1.15rem; max-width: 60ch; } .wrap.block > .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* help chat (a placeholder: a chatbot for families and Seeders comes later) */
.helpbox { border: 3px dashed var(--line); border-radius: var(--radius); padding: 14px; background: rgba(255, 255, 255, .06); color: var(--white); margin-top: 16px; }
.helpbox b { font-family: var(--head); } .helpbox .tight { margin: .3em 0 0; }

footer { background: var(--ink); color: var(--white); padding: 26px 0; margin-top: 30px; }
footer a { color: var(--sun); } footer .cols { display: grid; gap: 14px; }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.empty { text-align: center; padding: 30px 0; }
.gap-top { margin-top: 18px; } .boy-small { width: 140px; margin: 0 auto 10px; }

@media (min-width: 720px) {
  .bar nav { order: 0; width: auto; margin-left: auto; overflow: visible; } .bar .wa-top { margin-left: 0; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 24px; }
  .book { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .buy { position: static; border: 0; padding: 0; background: none; justify-content: flex-start; }
  footer .cols { grid-template-columns: 2fr 1fr; }
}
/* Instagram wall (T-027): the site's own copies; cards, reels, controls */
.igrow { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; }
.igrow::-webkit-scrollbar { display: none; }
.igrow .igcard { flex: 0 0 68vw; max-width: 260px; scroll-snap-align: start; }
.igwall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.igcard { background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.igcard.playing { border-color: var(--grape); }
.igmedia { position: relative; aspect-ratio: 4 / 5; background: var(--cream); overflow: hidden; }
.igmedia img, .igmedia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.igmedia .igopen { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }
.igvideo { z-index: 1; } .igposter.igfallback { z-index: 0; }
.igcard.playing .igposter { visibility: hidden; }
.igplay { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--grape); color: var(--white); font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 0 var(--ig-edge); }
.igcard.playing .igplay { opacity: 0; width: 100%; height: 100%; border-radius: 0; background: transparent; box-shadow: none; }
.igcard.playing .igplay:focus-visible { opacity: 1; outline: 3px solid var(--sun); }
.igsound { position: absolute; z-index: 3; right: 8px; bottom: 8px; min-width: var(--tap); min-height: var(--tap); border-radius: 50%; border: 0; background: var(--ink); color: var(--white); font-size: 1.1rem; cursor: pointer; opacity: .9; }
.igbadge { position: absolute; z-index: 3; top: 8px; right: 8px; background: var(--ink); color: var(--white); font-weight: 800; font-size: .72rem; padding: 3px 10px; border-radius: 99px; }
.igmedia .ribbon { z-index: 3; }
.igbody { padding: 8px 10px 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; flex: 1; }
.igcap { margin: 0; flex: 1 1 100%; min-width: 0; font-weight: 700; font-size: .85rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* T-449: the Instagram page head, the sign-in nudge, series rows with watched marks, and our player */
.ighead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ighead h1 { margin: 0; }
.ignudge { background: var(--tone-grape); color: var(--ig-edge); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: .85rem; } .ignudge a { color: var(--ig-edge); font-weight: 800; }
.igser { margin: 18px 0 6px; } .igserhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.igserhead h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; min-width: 0; }
.igser .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bubble); }
.igser.royal .dot { background: var(--royal); } .igser.grape .dot { background: var(--grape); } .igser.sun .dot { background: var(--sun-edge); } .igser.leaf .dot { background: var(--leaf); }
.igpill { flex: none; background: var(--tone-royal); color: var(--royal); font-weight: 800; font-size: .78rem; padding: 3px 10px; border-radius: 99px; } .igpill.all { background: var(--tone-leaf); color: var(--leaf-deep); }
.igthumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 2px 2px 8px; }
.igthumb { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 0; padding: 0; background: var(--cream); cursor: pointer; }
.igthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igplay2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; opacity: .92; }
.igw { position: absolute; z-index: 2; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 3px; background: var(--leaf); color: var(--white); font-weight: 800; font-size: .7rem; padding: 2px 8px 2px 6px; border-radius: 99px; }
.igbar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 5px; background: var(--line); } .igbar i { display: block; height: 100%; background: var(--bubble); } .igbar.done i { background: var(--leaf); }
.igthumb:focus-visible, .seritem:focus-visible, .igopen:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.igplayer { position: fixed; inset: 0; z-index: 50; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 12px; }
.igpcard { width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; background: var(--paper); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.igptop { display: flex; align-items: center; gap: 8px; } .igptop b { font: 600 1rem var(--head); }
.igback { width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--line); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.igpmedia { border-radius: 16px; overflow: hidden; background: var(--ink); } .igpv { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: var(--ink); }
.igtrack { position: relative; height: 26px; } .igtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 4px; background: var(--line); }
.igfill { position: absolute; left: 0; top: 10px; height: 8px; width: 0; border-radius: 4px; background: var(--bubble); } .igmark { position: absolute; top: 2px; width: 4px; height: 24px; border-radius: 2px; background: var(--leaf); }
.igprow { display: flex; justify-content: space-between; font-weight: 700; font-size: .8rem; color: var(--ink-soft); } .igat { color: var(--leaf-deep); }
.igline { display: flex; align-items: center; gap: 10px; } .serfoot { margin: 16px 0 0; flex-wrap: wrap; } .igptitle { margin: 0; flex: 1; min-width: 0; font: 600 1rem var(--head); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 720px) { .igwall, .igthumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .igrow .igcard { flex-basis: 240px; } }
@media (prefers-reduced-motion: reduce) { .igcard { transition: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Shopify additions */
.bar .cartlink { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border-radius: 99px; background: var(--sun); font-weight: 800; text-decoration: none; padding: 0 12px; }
.tile .stk { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; font: 800 1.6rem var(--head); }
.formrow { display: grid; gap: 6px; margin: 10px 0; } .formrow label { font-weight: 800; }
.formrow input, .formrow textarea, .formrow select { font: inherit; padding: 10px 14px; min-height: var(--tap); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); width: 100%; }
.cartline { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 12px; }
.cartline img { width: 72px; height: 96px; object-fit: cover; border-radius: 8px; }
.cartline .qty { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cartline input[type=number] { width: 76px; }
.linkbtn { background: none; border: 0; color: var(--royal); font: 800 .95rem var(--body); text-decoration: underline; cursor: pointer; min-height: var(--tap); }
.pagination { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 18px 0; }
.pagination a, .pagination span { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; border: 2px solid var(--line); text-decoration: none; font-weight: 800; padding: 0 12px; background: var(--paper); }
.pagination .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.announce { background: var(--royal); color: var(--white); text-align: center; font-weight: 800; padding: 6px var(--gutter); font-size: .95rem; }
.wa-float { position: fixed; right: 14px; bottom: 14px; z-index: 20; }
.variants select { max-width: 100%; }

/* picture buttons and full screen (T-061) */
.gallery .main .gbtn { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(80,42,19,.82); color: var(--white); font: 800 1.6rem/1 var(--head); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.gallery .gprev { left: 8px; top: 50%; transform: translateY(-50%); } .gallery .gnext { right: 8px; top: 50%; transform: translateY(-50%); } .gallery .gfull { right: 8px; top: 8px; font-size: 1.2rem; }
.gallery .gcount { position: absolute; z-index: 2; left: 8px; bottom: 8px; background: rgba(80,42,19,.82); color: var(--white); font: 800 .85rem var(--body); padding: 3px 10px; border-radius: 99px; }
.gallery .main img { cursor: zoom-in; } .gallery:focus-visible { outline: 3px solid var(--royal); outline-offset: 4px; border-radius: var(--radius); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20,10,4,.94); display: flex; flex-direction: column; }
.lightbox[hidden] { display: none; }
.lb-stage { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; -webkit-overflow-scrolling: touch; }
.lb-stage:not(.zoomed) { align-items: center; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; background: var(--white); }
.lb-stage.zoomed .lb-img { max-height: none; cursor: zoom-out; }
.lb-bar { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px; background: rgba(0,0,0,.4); }
.lb-bar .gbtn { position: static; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: transparent; color: var(--white); font: 800 1.5rem/1 var(--head); cursor: pointer; }
.lb-bar .gbtn:disabled { opacity: .35; cursor: default; }
.lb-bar .gcount { position: static; background: transparent; font-size: 1rem; min-width: 56px; text-align: center; color: var(--white); }
body.lb-open { overflow: hidden; }
address { font-style: normal; }

img, video, iframe, table { max-width: 100%; }

/* footer links are big enough to tap (T-063) */
footer .links { gap: 0 8px; } footer .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
footer address a { display: inline-block; padding: 12px 0; }


/* links on their own line are big enough to tap (T-063) */
a.chip { display: inline-flex; align-items: center; min-height: 44px; }
.small a, .crumbs a, .ticks a, .note a, .prose p > a:only-child { display: inline-block; padding: 12px 4px; }
.ticks li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }

/* placeholders (T-065) */
.ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font: 800 1.2rem var(--head); background: var(--sun); color: var(--ink); }
.price-ask { font-size: .95rem; color: var(--ink-soft); }
[hidden] { display: none !important; }

/* header (T-075): the chip row is always visible and the bar stays on top; no hidden menu */
.bar { position: sticky; top: 0; z-index: 30; }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-top: 4px; padding-bottom: 2px; min-height: 0; }
.bar .brand { font-size: 1.1rem; flex: 1 1 auto; min-width: 0; min-height: 44px; } .bar .brand .logo { width: 40px; height: 40px; }
.bar .cartlink { flex: none; margin-left: auto; }
.bar .langpick { flex: none; min-height: var(--tap); max-width: 9.5em; border-radius: 99px; padding: 0 10px; font: inherit; font-weight: 700; }   /* T-277: shown only with the languages switch on */
.bar nav { order: 9; width: 100%; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { flex: none; white-space: nowrap; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); font-weight: 800; display: inline-flex; align-items: center; text-decoration: none; scroll-margin: 0; }
.bar nav a:hover { background: var(--cream); }
.bar nav a[aria-current="page"] { background: var(--sun); border-color: var(--sun-edge); }
/* T-682 part 3: a chip's look and glow come from Platform's site-nav (look-<name>, chip-glow); rainbow is chip-sub below. */
.bar nav a.look-bubble { background: var(--bubble); border-color: var(--bubble); color: var(--white); box-shadow: 0 3px 0 var(--bubble-edge); }
.bar nav a.look-sun { background: var(--sun); border-color: var(--sun-edge); color: var(--ink); }
.bar nav a.look-leaf-deep { background: var(--leaf-deep); border-color: var(--leaf-deep); color: var(--white); }
.bar nav a.look-royal { background: var(--royal); border-color: var(--royal-edge); color: var(--white); }
.bar nav a.look-grape { background: var(--grape); border-color: var(--grape); color: var(--white); }
.bar nav a.look-apple { background: var(--apple); border-color: var(--apple-edge); color: var(--white); }
.bar nav a[class*="look-"][aria-current="page"] { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun); }
@media (min-width: 1200px) {
  .bar .wrap { flex-wrap: nowrap; }
  .bar nav { order: 0; width: auto; flex: 1 1 auto; margin-left: 12px; }
}
@media (prefers-reduced-motion: no-preference) { .bar nav a.chip-glow { animation: ttt-glow 2.6s ease-in-out infinite; } }
@keyframes ttt-glow { 0%, 100% { box-shadow: 0 3px 0 var(--bubble-edge), 0 0 0 0 rgba(200,36,110,.0); } 50% { box-shadow: 0 3px 0 var(--bubble-edge), 0 0 0 6px rgba(200,36,110,.25); } }

/* home book tiles: 3, 5 or 7 by screen width, the last one is All books */
/* T-497: big cards, the cover first: 2 a row on a phone (3 books and All books), 4 on a wide screen (6 books, All books takes two) */
.hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.hb-grid .chip, .hb-grid .muted { display: none; }
.hb-grid > .cardwrap:nth-of-type(n+4) { display: none; }
.hb-all .cv { background: var(--royal); color: var(--white); font-size: 1rem; aspect-ratio: auto; flex: 1; min-height: 6rem; }   /* owner 10 Oct: as tall as the book cards beside it, never taller */
.hb-all h3 { display: none; }
@media (min-width: 720px) { .hb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hb-grid > .cardwrap:nth-of-type(n+4) { display: flex; } .hb-grid > .cardwrap:nth-of-type(6) + .hb-all { grid-column: span 2; } }

/* pages use the full width like the home page and the header */
/* T-199: reading text stops at about 70 characters on wide screens; forms stop at 560px */
.prose { max-width: none; } .prose p, .prose li { max-width: 70ch; }
.prose .formrow, #app form > .formrow, .sdsignin .formrow { max-width: 560px; }
.guide .formrow { max-width: none; }
#n-name, #n-email, #n-message { max-width: 560px; }   /* T-515, T-521: the note form's fields (and its message box) stay short on wide screens */

/* floating buttons: one Ask on WhatsApp on every page */
.wa-float { position: fixed; right: 12px; bottom: 12px; z-index: 40; box-shadow: 0 4px 0 var(--wa-edge), 0 6px 14px rgba(0,0,0,.25); }
.float-stack { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.float-row { display: flex; gap: 8px; align-items: center; }
.float-ic { width: 52px; height: 52px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: var(--royal); box-shadow: 0 4px 0 var(--royal-edge), 0 6px 14px rgba(0,0,0,.25); cursor: pointer; text-decoration: none; }
.float-ic.share { background: var(--wa); box-shadow: 0 4px 0 var(--wa-edge), 0 6px 14px rgba(0,0,0,.25); }
.float-txt { min-height: 48px; padding: 0 18px; border-radius: 99px; border: 0; font: 800 1rem var(--head); color: var(--white); background: var(--apple); box-shadow: 0 4px 0 var(--apple-edge), 0 6px 14px rgba(0,0,0,.25); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.float-txt.alt { background: var(--ink); box-shadow: 0 4px 0 var(--black), 0 6px 14px rgba(0,0,0,.25); }
.float-ic svg { width: 26px; height: 26px; }
body.has-floats main { padding-bottom: 150px; }

/* Fill form */
.fill { position: fixed; inset: 0; z-index: 100; background: rgba(20,10,4,.7); display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow: auto; }
.fill-card { background: var(--paper); width: 100%; max-width: 560px; border-radius: var(--radius) var(--radius) 0 0; padding: 18px 16px 24px; max-height: 100%; overflow: auto; }
@media (min-width: 720px) { .fill { align-items: center; } .fill-card { border-radius: var(--radius); } }
.fill-card h2 { margin-top: 0; } .fill .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fill .err { color: var(--apple-edge); font-weight: 800; }


/* Help choose Books */
.guide { display: grid; gap: 12px; background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.guide .formrow { margin: 0; } @media (min-width: 720px) { .guide { grid-template-columns: repeat(4, minmax(0, 1fr)); } .guide .span { grid-column: 1 / -1; } }
.guide-pool { display: none; } .recs { margin-top: 18px; }

.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.push-right { margin-left: auto; }

/* the Seeder page: how a Seeder helps comes first, in big friendly tiles */
.sdhero { background: linear-gradient(180deg, var(--cream) 0%, var(--hero-end) 100%); border: 3px solid var(--sun); border-radius: var(--radius); padding: 22px 18px; margin-bottom: 18px; }
.sdhero h1 { margin: 0 0 .2em; } .sdhero h1 em { color: var(--bubble); font-style: normal; }
.sdgives { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); margin: 16px 0; }
.sdgive { border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); color: var(--white); }
.sdgive b { display: block; font: 800 1.4rem/1.1 var(--head); } .sdgive span { display: block; font-weight: 800; margin-top: 4px; }
.sdgive.earn { background: var(--bubble); } .sdgive.save { background: var(--royal); } .sdgive.pay { background: var(--leaf); } .sdgive.see { background: var(--grape); }

/* quantity plus and minus (D-052) */
.qtyctl { display: inline-flex; align-items: center; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--line); background: var(--paper); font: 800 1.3rem var(--head); color: var(--ink); cursor: pointer; }
.stepper button:hover { border-color: var(--sun); }
.stepper .q { min-width: 1.6em; text-align: center; font-weight: 800; }
.cardwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cardwrap > .card { flex: 1; }

.gifttile { background: var(--hero-end); border: 2px dashed var(--sun-edge); border-radius: var(--radius); padding: 22px; color: var(--ink); } .gifttile h2 { margin-top: 0; }

/* T-131: tick boxes stay normal size and sit level with their text (the form rules above made them full width) */
input[type=checkbox], input[type=radio], .formrow input[type=checkbox], .fld input[type=checkbox], .check input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; display: inline-block; accent-color: var(--royal); }
.formrow label:has(> input[type=checkbox]), label.check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; min-height: var(--tap); }   /* T-324: the whole row is the tap area */

/* T-131: the WhatsApp button never covers content. Laptop: small and in the corner, with room left at the page end. Phone: it sits at the very end of the page, not over it. */
@media (max-width: 719px) {
  .wa-float { position: static; display: flex; width: max-content; margin: 14px auto 0; }   /* T-154: the button lives inside the footer, so no cream strip is left under it */
}

/* T-168: phone bottom bar, icons only. The top row drops the cart pill, the Home chip and the floating WhatsApp button. Laptop: no bar. */
.mbar { display: none; }
@media (max-width: 719px) {
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 4px solid var(--sun); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mbar a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; border-radius: 99px; color: var(--ink); text-decoration: none; }
  .mbar a[aria-current="page"] { background: var(--sun); }
  .mbar .mb-wa { color: var(--white); background: var(--wa); min-width: 56px; }
  .mbar .mb-count { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--royal); color: var(--white); font: 800 .72rem/18px var(--head); text-align: center; }
  .mbar .mb-count[hidden] { display: none; }
  body.has-mbar { padding-bottom: 64px; }
  body.has-mbar .wa-float { display: none; }
}

/* T-168: our covers in an arc over the boy's head; his raised finger (right) points at it. Headroom only when covers exist. */
.boy-wrap { position: relative; container-type: inline-size; }
.boy-wrap.has-arc { padding-top: 50%; }
.hero .boy .boy-arc { position: absolute; top: 0; left: 0; right: 0; height: 60cqw; display: block; }
.hero .boy .boy-arc .bk { position: absolute; width: 33.6cqw; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; box-shadow: 0 3px 6px rgba(80, 42, 19, .35);
  left: calc(50cqw + var(--x) * 1cqw - 16.8cqw); top: calc(var(--y) * 1cqw); transition: transform .15s; }
.hero .boy .boy-arc:hover .bk, .hero .boy .boy-arc:focus-visible .bk { transform: translateY(-4px); }
@media (max-width: 719px) {
  .hero .actions { flex-wrap: nowrap; gap: 8px; }
  .hero .actions .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: .92rem; text-align: center; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
}
@media (max-width: 719px) {
  .boy-wrap.has-arc { padding-top: 61%; }
  .hero .boy .boy-arc .bk { width: 42cqw; left: calc(50cqw + var(--mx) * 1cqw - 21cqw); top: calc(var(--my) * 1cqw); transform: rotate(var(--mr)); }
  .hero .boy .boy-arc .bk.no-m { display: none; }
}

/* T-167: hidden-text box with an eye button */
.fld .pw { position: relative; display: block; margin-top: 4px; } .fld .pw input { margin-top: 0; padding-right: 52px; }
.fld .pw .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; color: var(--ink); }
.fld .pw .eye:focus-visible { outline: 3px solid var(--sun); border-radius: var(--radius-sm); }

/* T-172/T-179: while the page is still being drawn, hide the footer (it cannot shift if it is not shown); no reserved blank space */
main#site:has(#boot) ~ footer { visibility: hidden; }
.bar:empty { min-height: 108px; } @media (min-width: 1200px) { .bar:empty { min-height: 62px; } }

/* T-177: Marketing's one-line hook under the book title */
.book .hook { font-size: 1.05rem; color: var(--ink); margin: 4px 0 8px; }

/* account chip (T-185): sits beside the cart; both stay put while the chips below scroll */
.bar .acctlink { margin-left: 0; white-space: nowrap; background: var(--paper); border: 2px solid var(--line); }
.bar .cartlink + .acctlink { margin-left: 0; }
.welcome { max-width: 520px; margin: 0 auto; text-align: center; }
.welcome-btns { display: grid; gap: 10px; margin: 16px 0 22px; }
.benefits { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 10px; }
.benefits li { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.benefits .bicon { font-size: 1.5rem; line-height: 1.2; flex: none; }

/* Refer & Earn chip (T-186): a gentle buzz every few seconds on top of the glow; nothing moves for people who ask for less motion */
@media (prefers-reduced-motion: no-preference) { .bar nav a.chip-glow { animation: ttt-glow 2.6s ease-in-out infinite, ttt-buzz 6s ease-in-out infinite; } }
@keyframes ttt-buzz { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-3deg); } 91% { transform: rotate(3deg); } 94% { transform: rotate(-2deg); } 97% { transform: rotate(1.5deg); } }

@media (min-width: 1400px) { header.bar .wrap { max-width: 1400px; } }
/* T-148: MRP struck through when a global coupon is on; coupon lines and the coupon list */
.price s.mrp { font-weight: 400; color: var(--ink-soft); font-size: .85em; }
tr.dline td { font-size: .95rem; }
.couponlist { display: grid; gap: .4rem; margin-top: .4rem; }
.couponitem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem .6rem; border: 1px dashed var(--royal); border-radius: 10px; }
.couponitem small { flex-basis: 100%; }
ul.couponlist { list-style: none; padding-left: 0; }   /* T-737: the offers popup list (no bullets, no indent) */

/* T-236 (D-063 rules 6-8): the account button. Signed in it is three lines; its short list opens in place under it and never runs past the window. */
.bar .acctwrap { position: relative; flex: none; display: inline-flex; }
.bar .menubtn { background: var(--paper); border: 2px solid var(--line); cursor: pointer; padding: 0 10px; }
.bar .menubtn .burger { display: inline-grid; gap: 4px; width: 22px; } .bar .menubtn .burger i { display: block; height: 3px; border-radius: 2px; background: var(--ink); }
.bar .menubtn[aria-expanded="true"] { background: var(--sun); }
.acctmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 200px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 90px); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border: 3px solid var(--sun); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.acctmenu[hidden] { display: none; }
.acctmenu a, .acctmenu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.acctmenu a:hover, .acctmenu button:hover, .acctmenu a:focus-visible, .acctmenu button:focus-visible { background: var(--cream); outline: none; }
.acctmenu li + li:last-child { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 4px; }
/* T-350: on every size the bar is logo, Books, Refer & Earn, cart and the three-line menu. A phone puts the two chips on a second row; from 560px it is one row. */
.bar .cartlink + .acctwrap { margin-left: 0; }
@media (min-width: 560px) { .bar .wrap, header.bar .wrap { flex-wrap: nowrap; } .bar .brand { flex: none; } .bar nav, header.bar nav { order: 0; width: auto; flex: 1 1 auto; margin-left: 8px; overflow: visible; } }
.acctmenu .m-page + li:not(.m-page) { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 4px; }
.acctmenu a[aria-current="page"] { background: var(--sun); }

/* T-268, CR-marketing-020: quiz page, Home's try-it quiz and the offer strip */
.quiz-opts { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.quiz-opt:has(input:checked) { border-color: var(--leaf); background: var(--ok-bg); }
.quiz-opt input { width: 22px; height: 22px; flex: 0 0 auto; }
#quiz-prize { margin-bottom: 16px; } #quiz-prize .formrow { width: 100%; }
.tryquiz .btn.right { background: var(--leaf); border-color: var(--leaf); color: var(--white); } .tryquiz .btn.wrong { background: var(--no-bg); color: var(--apple-edge); }
.offer-strip { background: var(--sun); color: var(--ink); } .offer-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.offer-strip p { margin: 0; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* T-281 (D-081): kids quizzes. Big picture tiles, one column on a phone, instant right or wrong. */
.kidlist { list-style: none; padding: 0; margin: var(--gap) 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kidcard { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 16px; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.kidcard strong { display: block; font-family: var(--head); font-size: 1.15rem; } .kidcard .chip { margin-top: 4px; display: inline-block; }
.kidpic { font-size: 2.6rem; line-height: 1; }
.kidwrap { max-width: 640px; } .kidtitle { margin: 0 0 8px; }
.kidplay { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); text-align: center; }
.kiddots { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.kiddots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); } .kiddots .done { background: var(--leaf); } .kiddots .now { background: var(--sun-edge); transform: scale(1.3); }
.kidq { font-family: var(--head); font-size: 1.4rem; margin: 4px 0 8px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.kidsound { min-width: var(--tap); min-height: var(--tap); border-radius: 50%; border: 2px solid var(--line); background: var(--cream); font-size: 1.3rem; cursor: pointer; }
.kidshow { font-size: 2.6rem; letter-spacing: 4px; margin: 4px 0 10px; }
.kidtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.kidtiles.letters { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.kidtile { min-height: 96px; border-radius: var(--radius-sm); border: 3px solid var(--line); background: var(--cream); color: var(--ink); font-family: var(--head); font-size: 1.6rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; transition: transform .15s; }
.kidtile:active { transform: scale(.95); }
.kidemoji { font-size: 3rem; line-height: 1; } .kidlabel { font-size: 1rem; font-family: var(--body); font-weight: 700; }
.kidtile.right { background: var(--ok-bg); border-color: var(--leaf); color: var(--ok-ink); transform: scale(1.05); }
.kidtile.nope { background: var(--no-bg); border-color: var(--apple); animation: kidshake .35s; }
@keyframes kidshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kidslots { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.kidslots span { width: 48px; height: 56px; border-bottom: 4px solid var(--royal); font-family: var(--head); font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.kidsay { min-height: 1.6em; font-weight: 700; font-size: 1.15rem; margin: 12px 0 0; color: var(--ok-ink); }
.kidend h2 { font-family: var(--head); font-size: 1.8rem; margin: 6px 0; }
.kidconfetti { font-size: 2.4rem; animation: kidpop .6s ease-out; } .kidstars { font-size: 2rem; letter-spacing: 4px; margin: 4px 0 14px; }
@keyframes kidpop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kidend .actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
@media (min-width: 521px) { .kidend .actions { flex-direction: row; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .kidtile, .kidtile.nope, .kidconfetti { animation: none; transition: none; } }

/* T-308: nothing pushes the phone page sideways. The plus/minus row and "View cart" wrap inside a book card; the book page buy row wraps and sits in the page (the bottom bar is fixed). */
.qtyctl { max-width: 100%; }
.qtyctl .stepper { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
.cardwrap .qtyctl, .cardwrap .qtyctl .stepper { display: flex; justify-content: space-between; width: 100%; }
.cardwrap .qtyctl .btn { flex: 1 1 100%; text-align: center; }
@media (max-width: 719px) {
  .buy { position: static; border: 0; padding: 12px 0 0; background: none; flex-wrap: wrap; justify-content: flex-start; }
  .buy > .qtyctl { flex: 1 1 auto; }
  .buy > .btn.wa { flex: 1 1 100%; text-align: center; justify-content: center; }
}
/* T-308: app-like bottom bar: icon over a short label, taller, clear of the iPhone home strip; WhatsApp is a green WhatsApp button. No floating WhatsApp button on phones. */
@media (max-width: 719px) {
  .wa-float { display: none !important; }
  .mbar { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 8px; align-items: stretch; box-shadow: 0 -4px 14px rgba(80, 42, 19, .08); }
  .mbar a { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 56px; border-radius: 16px; }
  .mbar .mb-l { font: 800 .75rem/1 var(--head); }
  .mbar .mb-wa { flex: 1.3 1 0; background: var(--wa); color: var(--white); box-shadow: 0 3px 0 var(--wa-edge); }
  .mbar .mb-count { top: 4px; right: calc(50% - 26px); }
  body.has-mbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* T-308: the big book picture swipes sideways; the page still scrolls up and down. */
.gallery .main { touch-action: pan-y; user-select: none; }

/* T-350: the Refer & Earn card. Bright and small, bottom left (above the phone bar), easy to close; it slides in only for people who allow motion. */
.refer-pop { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(340px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--refer-from) 0%, var(--refer-to) 100%); border: 3px solid var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge), var(--shadow); color: var(--ink); }
body.has-mbar .refer-pop { bottom: 76px; }
.fun-pop { background: linear-gradient(135deg, var(--hero-end) 0%, var(--ok-bg) 100%); border-color: var(--ok-ink); box-shadow: 0 6px 0 var(--ok-ink), var(--shadow); }   /* T-403 the Fun invite */
.fun-pop .rp-chip { background: var(--ok-ink); }
.refer-pop p { margin: 0; }
.refer-pop .rp-chip { display: inline-block; background: var(--bubble); color: var(--white); font: 800 .85rem var(--head); padding: 4px 12px; border-radius: 99px; }
.refer-pop .rp-title { font: 800 1.1rem var(--head); margin: 8px 30px 4px 0; }
.refer-pop .rp-text { font-size: .95rem; }
.refer-pop .rp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.refer-pop .rp-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--sun); border: 2px solid var(--sun-edge); font-weight: 800; color: var(--ink); text-decoration: none; }
.refer-pop .rp-later { min-height: 44px; padding: 0 14px; border-radius: 99px; background: var(--paper); border: 2px solid var(--line); font: inherit; font-weight: 700; cursor: pointer; }
.refer-pop .rp-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; border-radius: 99px; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); }
.refer-pop .rp-x:hover, .refer-pop .rp-later:hover { background: var(--cream); }
@media (prefers-reduced-motion: no-preference) { .refer-pop { animation: rp-in .35s ease-out; } }
@keyframes rp-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* T-355: sign-in box. Google first (white button, Google's G, full width up to 400px), an "or" line, then the email form. */
.gbox { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 12px 0 4px; min-height: 44px; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 400px; min-height: 44px; padding: 0 12px;
  background: var(--white); color: var(--g-ink); border: 1px solid var(--g-edge); border-radius: 99px; min-height: 48px; font: 500 1rem/1 Roboto, Arial, sans-serif; cursor: pointer; }
.gbtn:hover { background: var(--g-hover); } .gbtn:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.gmark { display: inline-flex; } .gbox input { width: 100%; max-width: 400px; } .gbox .hint { margin: 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: var(--ink-soft); font-size: .9rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid currentColor; opacity: .4; }
.forgot { background: var(--forgot-bg); border-radius: 10px; padding: 8px 12px; margin: 4px 0 8px; } .forgot p { margin: 4px 0; }
/* T-375: book page as chips and cards; the buy box in the subscription page's gradient; the full-screen picture viewer (fits the screen, no scroll). */
.factchips { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; } .factchips .chip { font-size: .9rem; padding: 6px 12px; }
.factchips .chip a { padding: 0; }
.buybox { background: linear-gradient(135deg, var(--sun) 0%, var(--sub-pink) 55%, var(--sub-blue) 100%); border: 3px solid var(--bubble); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; }
.bb-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-save { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--apple); color: var(--white); font-weight: 800; font-size: .85rem; }
.bb-gift { margin: 8px 0 0; font-weight: 800; }
.buybox .buy { position: static; border: 0; padding: 10px 0 0; background: none; flex-wrap: wrap; justify-content: flex-start; }
.perks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.perk { display: flex; gap: 10px; align-items: center; background: var(--paper); border-radius: 12px; padding: 8px 12px; border: 2px dashed var(--bubble); }
.perk .ic, .subnudge .ic, .docard .ic { font-size: 1.4rem; line-height: 1; }
.subnudge { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); background: var(--tone-sky); border: 2px solid var(--sub-blue); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; }
.subnudge .go { margin-left: auto; font: 800 1.6rem/1 var(--head); } .subnudge:hover { border-color: var(--royal); }
.docards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.docard { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 10px 12px; font-weight: 700; min-width: 0; }
.docard > span:last-child { min-width: 0; overflow-wrap: anywhere; }   /* CR-platform-036: "(comprehension)" pushed a phone page sideways */
.tone-sun { background: var(--tone-sun); } .tone-sky { background: var(--tone-sky); } .tone-leaf { background: var(--tone-leaf); } .tone-bubble { background: var(--tone-bubble); } .tone-grape { background: var(--tone-grape); } .tone-royal { background: var(--tone-royal); }
.nopic { font: 800 1.2rem var(--head); text-align: center; } .nopic span { font-size: 3rem; }
body.pv-open { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 200; background: rgba(20,10,4,.95); }
.pv-stage { position: absolute; inset: 56px 8px 48px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--white); border-radius: 8px; user-select: none; }
.pv-btn { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(80,42,19,.7); color: var(--white); font: 800 1.6rem/1 var(--head); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pv-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pv-prev { left: 10px; top: 50%; transform: translateY(-50%); } .pv-next { right: 10px; top: 50%; transform: translateY(-50%); } .pv-close { right: 10px; top: 4px; font-size: 1.3rem; }
.pv-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--white); font-weight: 800; }
/* T-375: the bar shows as many chips as fit (chrome.js fit()); the hidden ones are in the menu. Subscription gets the subscription page's colours. */
.bar nav { min-width: 0; } .bar nav a[hidden], .acctmenu li[hidden] { display: none; }
/* T-455: the bar is clipped at its edge so a chip can never sit under the cart or menu (T-539 #4: no More button; the three-line menu has the rest). */
@media (min-width: 560px) { .bar nav, header.bar nav { flex: 0 1 auto; overflow-x: clip; overflow-clip-margin: 8px; } }   /* the chips take only their own width */
.bar nav a.chip-sub { background: linear-gradient(135deg, var(--sun) 0%, var(--sub-pink) 55%, var(--sub-blue) 100%); border-color: var(--bubble); }

/* T-375: 3-5 best sellers fanned in the arc; same headroom as one book, so the hero keeps its height. The middle book sits on top. */
.boy-wrap.many .boy-arc .bk { width: 25cqw; left: calc(50cqw + var(--x) * 1cqw - 12.5cqw); top: calc(var(--y) * 1cqw + 6cqw); transform: rotate(calc(var(--x) * .3deg)); }
.boy-wrap.many .boy-arc:hover .bk, .boy-wrap.many .boy-arc:focus-visible .bk { transform: rotate(calc(var(--x) * .3deg)) translateY(-4px); }
@media (max-width: 719px) {
  .boy-wrap.many .boy-arc .bk { width: 30cqw; left: calc(50cqw + var(--mx) * 1cqw - 15cqw); top: calc(var(--my) * 1cqw + 8cqw); transform: rotate(var(--mr)); }
}

/* T-375: Home subscription banner, the subscription page's gradient */
.subband { display: flex; gap: 16px; align-items: center; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, var(--sun) 0%, var(--sub-pink) 55%, var(--sub-blue) 100%);
  border: 3px solid var(--bubble); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 4px 0 rgba(80, 42, 19, .12); }
.subband .sb-ic { font-size: 2.6rem; line-height: 1; }
.subband .sb-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.subband .sb-txt b { font-size: 1.25rem; }
.subband .sb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.subband .sb-chips .chip { background: rgba(255, 255, 255, .75); }
.subband .sb-chips .chip[hidden] { display: none; }
.subband:hover .sb-go, .subband:focus-visible .sb-go { transform: translateY(-2px); }
@media (max-width: 719px) { .subband { flex-wrap: wrap; padding: 14px; } .subband .sb-go { width: 100%; text-align: center; } }

/* T-376: the daily Fun quiz, played by hand. Cards drag (pointer events, after a small move) or tap; one question on screen at a time;
   cards never select text, open a long-press menu or scroll the page; book pages show once they load (emoji till then); matched pairs share a colour. */
.funwrap { max-width: 760px; }
.funwrap [hidden] { display: none !important; }
.funtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.funtop h1 { margin: 0; }
.funmute, .funread { min-height: var(--tap); padding: 6px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--white); color: var(--ink); font: 700 .95rem var(--body); cursor: pointer; }
.funquiz { background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-top: 14px; overscroll-behavior: contain; }
.funhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.funhead h2 { margin: 0; font-family: var(--head); font-size: 1.4rem; }
.funplay { overscroll-behavior: contain; }
.funq { margin-top: 10px; text-align: center; }
.funstep { margin: 0; font-weight: 800; font-size: .85rem; color: var(--ink-soft); }
.funask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.funprompt { font-family: var(--head); font-size: 1.3rem; margin: 4px 0; }
.funhint { margin: 2px 0 10px; }
.funopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .funopts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.funopt { position: relative; min-height: 88px; min-width: 0; border-radius: var(--radius-sm); border: 3px solid var(--line); background: var(--cream); color: var(--ink); font: 700 1rem var(--body); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.funopt, .funchip, .funjigslot, .funjigpiece { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.funopt:disabled, .funchip:disabled { cursor: default; color: var(--ink); }
.funcard { cursor: grab; }
.funcard.dragging { position: relative; z-index: 30; cursor: grabbing; box-shadow: 0 12px 24px rgba(0, 0, 0, .25); }
.funcard.back { transition: transform .25s ease-out; }
.funopt.over, .funslot.over, .funjigslot.over { outline: 4px dashed var(--royal); outline-offset: 2px; }
.funopt.sel, .funchip.sel, .funjigpiece.sel, .funjigslot.sel { border-color: var(--royal); box-shadow: 0 0 0 4px var(--tone-royal); }
.funopt.right, .funchip.right { background: var(--ok-bg); border-color: var(--leaf); color: var(--ok-ink); }
.funopt.wrong, .funchip.wrong { background: var(--no-bg); border-color: var(--apple); color: var(--apple-edge); }
.funopt.matched.c0 { background: var(--tone-sky); border-color: var(--sky); } .funopt.matched.c1 { background: var(--tone-sun); border-color: var(--sun-edge); }
.funopt.matched.c2 { background: var(--tone-bubble); border-color: var(--bubble); } .funopt.matched.c3 { background: var(--tone-grape); border-color: var(--grape); }
.funopt.matched.c4 { background: var(--tone-leaf); border-color: var(--leaf); }
.funlabel { overflow-wrap: anywhere; }
.funpic { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 110px; aspect-ratio: 1; font-size: 3rem; line-height: 1; border-radius: var(--radius-sm); background-repeat: no-repeat; pointer-events: none; }
.funpic.big { max-width: min(300px, 34vh); font-size: 5rem; margin: 0 auto 8px; }
.funpic.plain { max-width: 48px; background-color: var(--line); }
.funpic.funmany { flex-wrap: wrap; align-content: center; gap: 2px; aspect-ratio: auto; min-height: 2.6rem; font-size: 1.6rem; }   /* T-497: a count's pictures, wrapped */
.funpic.big.funmany { justify-content: center; font-size: 2.8rem; min-height: 5rem; gap: 6px; }   /* T-497: the things to count, up top */
.funpic.page { background-color: var(--white); border: 2px solid var(--line); }
.funcut { display: block; width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain; pointer-events: none; }   /* T-580: a book cut-out (quiz-art 0.2.0) */
.funcut.big { max-width: min(300px, 34vh); margin: 0 auto 8px; }
.funpic[hidden], .funcut[hidden] { display: none; }   /* T-580: an after picture waits for the explain */
.funpageno { margin: 0 0 4px; }
.funstatement, .funsentence { font: 800 1.2rem/1.5 var(--head); margin: 6px 0 12px; overflow-wrap: anywhere; }
.funslot { display: inline-block; min-width: 3.5em; padding: 0 8px; margin: 0 4px; border-bottom: 4px solid var(--royal); color: var(--royal); border-radius: 8px 8px 0 0; }
.funslot.right { border-color: var(--leaf); color: var(--ok-ink); background: var(--ok-bg); }
.funchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.funchip { min-height: var(--tap); padding: 8px 20px; border-radius: 99px; border: 3px solid var(--line); background: var(--cream); color: var(--ink); font: 800 1.1rem var(--body); cursor: pointer; }
.funchip.used { visibility: hidden; }
.funtfic { font-size: 2.6rem; line-height: 1; }
.funmatch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 36px; }
.funlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.funlines path { fill: none; stroke-width: 6; stroke-linecap: round; }
.funlines .funtrail { stroke-dasharray: 4 14; opacity: .8; }
.funlines .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fundraw var(--fun-string) ease-out forwards; }
@keyframes fundraw { to { stroke-dashoffset: 0; } }
.funcol .funopt { position: relative; } .funcol .funopt::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 3px solid var(--white); background: var(--line); box-sizing: border-box; }
.funcol:first-of-type .funopt::after { right: -9px; } .funcol:last-of-type .funopt::after { left: -9px; }
.funlines .c0 { stroke: var(--sky); } .funlines .c1 { stroke: var(--sun-edge); } .funlines .c2 { stroke: var(--bubble); } .funlines .c3 { stroke: var(--grape); } .funlines .c4 { stroke: var(--leaf); }
.funcol { display: flex; flex-direction: column; gap: 10px; }
.funcol .funopt { flex-direction: row; min-height: 64px; padding: 6px; } .funcol .funpic { max-width: 48px; font-size: 2rem; flex: none; }
.funcol .funcut { width: 48px; flex: none; }   /* T-557: a cut-out as small as the emoji, so the word keeps its room */
.funsay { min-height: 1.6em; margin: 10px 0 0; font-weight: 700; }
.funsay strong { color: var(--ok-ink); }
.funq[data-done="wrong"] .funsay strong { color: var(--royal); }   /* got there after a second try: kind words, not green, never red */
.funopt.tried { opacity: .42; transform: scale(.96); transition: opacity var(--fun-wrong), transform var(--fun-wrong); }
.funopt.tried:not(.right) { background: var(--white); border-color: var(--line); }
.funpagetap.tried .funtap { background: var(--sun-edge); }
.funnowords .funlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* bug e: the word would give the answer away */
.funerr { color: var(--apple-edge); }
.funnav { text-align: center; margin-top: 12px; }
.fundone { text-align: center; }
.fundone h3 { font-family: var(--head); font-size: 1.4rem; margin: 6px 0; }
.funsticker { font-size: 5rem; line-height: 1.1; animation: kidpop .5s ease-out; }
.funstreak { font: 800 1.15rem var(--head); color: var(--royal); margin: 8px 0; }
.funshelf ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 6px 0 0; }
.funstk { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 1.9rem; border-radius: 50%; background: var(--cream); border: 2px solid var(--line); }
.funbonus { margin: 16px 0; }
.funjig { margin-top: 8px; padding: 12px; border-radius: var(--radius); background: var(--tone-grape); }   /* T-480 (GameScreen 1): its own purple play mat */
.funjighud { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; text-align: left; }
.funjighud h3 { margin: 0; font: 600 1.15rem var(--head); color: var(--puz-ink); }
.funjigico { font-size: 1.6rem; }
.funjigcount { margin: 0; font: 800 .8rem var(--body); color: var(--ig-edge); }
.funjigframe { width: min(100%, 264px); margin: 0 auto; padding: 10px; border-radius: 26px; background: var(--grape); box-shadow: 0 8px 0 var(--ig-edge); }
@media (min-width: 600px) { .funjigframe { width: 324px; } }
.funjigboard { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; width: 100%; aspect-ratio: var(--ar); margin: 0; padding: 4px; border-radius: 16px; overflow: hidden; background: var(--ig-edge); }
.funjigboard.whole { gap: 0; }
.funjigslot { min-width: 0; min-height: 0; padding: 0; border: 3px dashed var(--puz-slot); border-radius: 10px; background-color: transparent; background-repeat: no-repeat; cursor: pointer; }
.funjigslot.filled { border: 0; border-radius: 0; cursor: default; }
.funjigslot.glow { border-style: solid; border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun), 0 0 18px 6px var(--sun); }
.funjiglabel { margin: 16px 0 6px; font: 800 .8rem var(--body); color: var(--ig-edge); text-transform: uppercase; letter-spacing: .06em; text-align: left; }
.funjigtray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 40px; padding: 12px; border-radius: 20px; background: var(--white); }
.funjigtray:empty { display: none; }
.funjigpiece { width: calc(200px / var(--n)); aspect-ratio: var(--ar); padding: 0; border: 2px solid var(--white); border-radius: 6px; background-color: var(--cream); background-repeat: no-repeat; box-shadow: var(--shadow); }
.funjigpiece:nth-child(4n+1) { rotate: -6deg; } .funjigpiece:nth-child(4n+2) { rotate: 5deg; } .funjigpiece:nth-child(4n+3) { rotate: -3deg; } .funjigpiece:nth-child(4n) { rotate: 7deg; }
.funjigpiece.sel, .funjigpiece.dragging { rotate: 0deg; }
.funjighelp { display: flex; gap: 10px; margin-top: 12px; }
.funjighelp .btn { flex: 1; min-height: 52px; border: 0; border-radius: 99px; font: 600 1.1rem var(--head); }
.funjighelp .funjighint { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-edge); }
.funjighelp .funjigshuffle { background: var(--sky); color: var(--dq-sea); box-shadow: 0 4px 0 var(--dq-sky-edge); }
.funbookcard { max-width: 240px; margin: 0 auto; }
/* T-467 (D-113): the price stays on one line (the age goes below it); Add to cart, plus/minus and View cart stay on one row */
.funbookcard .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; white-space: nowrap; }
.funbookcard .pricesep { display: none; } .funbookcard .priceage { flex-basis: 100%; font-size: .85rem; color: var(--ink-soft); }
.funbookcard .qtyctl .stepper { flex-wrap: nowrap; gap: 6px; } .funbookcard .qtyctl .btn { white-space: nowrap; padding: 0 12px; }
.info-card.funbook { text-align: center; }
.info-card.funlocked { border-style: dashed; border-width: 3px; }
.funend { font-weight: 800; color: var(--ok-ink); margin: 14px 0 0; }
.funmore { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.funconfetti { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.funconfetti .bit { position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 2px; animation: funfall 2.6s ease-in forwards; }
.funconfetti .c0 { background: var(--sky); } .funconfetti .c1 { background: var(--sun); } .funconfetti .c2 { background: var(--bubble); } .funconfetti .c3 { background: var(--grape); } .funconfetti .c4 { background: var(--leaf); }
@keyframes funfall { to { transform: translateY(105vh) rotate(var(--spin, 360deg)); } }
@keyframes funwiggle { 20% { transform: translateX(-6px) rotate(-2deg); } 45% { transform: translateX(6px) rotate(2deg); } 70% { transform: translateX(-3px); } }   /* soft, never a shake */
@keyframes funbounce { 35% { transform: translateY(-8px) scale(1.12); } 70% { transform: scale(.98); } }
@keyframes funsnap { 40% { transform: scale(1.08); } }
@keyframes funpop { from { opacity: 0; transform: scale(.6); } }
@keyframes funfade { from { opacity: .3; } }
.funwrap .wiggle { animation: funwiggle var(--fun-wrong) ease-in-out; } .funwrap .bounce { animation: funbounce var(--fun-right) var(--fun-spring); } .funwrap .snap { animation: funsnap var(--fun-peg) var(--fun-spring); }
.funwrap .funopt:not(:disabled):active { transform: scale(.96); transition: transform var(--fun-press); }
.funstage .funq:not([hidden]) .funopts > .funopt { animation: funpop var(--fun-pop) var(--fun-spring) backwards; }
.funstage .funq .funopts > .funopt:nth-child(2) { animation-delay: var(--fun-pop-step); } .funstage .funq .funopts > .funopt:nth-child(3) { animation-delay: calc(2 * var(--fun-pop-step)); }
.funstage .funq .funopts > .funopt:nth-child(4) { animation-delay: calc(3 * var(--fun-pop-step)); }
@media (prefers-reduced-motion: reduce) { .funwrap .wiggle, .funwrap .bounce, .funwrap .snap, .funsticker, .funstage .funq:not([hidden]) .funopts > .funopt { animation: funfade 200ms ease-out; animation-delay: 0s; } .funcard.back, .funopt.tried, .funwrap .funopt:active { transition: none; transform: none; } .funlines .draw { animation: none; stroke-dashoffset: 0; } .funpageframe.whole { animation: none; } .funconfetti { display: none; } }
/* T-396 play mode: the quiz over the whole screen. The page behind is hidden and cannot scroll; only the end screen scrolls, inside the view. */
html.funplaying, html.funplaying body { overflow: hidden; overscroll-behavior: none; height: 100%; }
html.funplaying body > :not(.funstage):not(.funpeek) { display: none !important; }
.funstart { min-height: 56px; padding: 0 28px; font-size: 1.25rem; }
.funstartrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.funbig { font-size: 3.2rem; line-height: 1; }
.funcount { flex: 1 1 160px; margin: 0; font-weight: 800; }
.funquiz .funbook { margin-top: 14px; }
.funstage.funwrap { max-width: none; }
/* T-419: age first, that age's quizzes for the day, glimpses of the books. Phone first; nothing wider than the screen. */
.funages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.funagebtn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 120px; padding: 14px 10px; border-radius: var(--radius); border: 3px solid var(--line); background: var(--white); color: var(--ink); font: 700 1rem var(--body); cursor: pointer; box-shadow: var(--shadow); }
.funagebtn:hover, .funagebtn:focus-visible { border-color: var(--royal); }
.funageemoji { font-size: 2.6rem; line-height: 1; }
.funagebtn strong { font-family: var(--head); font-size: 1.25rem; overflow-wrap: anywhere; }
.funagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.funagehead h2 { margin: 0; font-family: var(--head); }
.funsetlead { margin: 8px 0 0; font-weight: 700; }
.funset { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .funset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.funsetcard { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 72px; padding: 10px 14px; text-align: left; border-radius: var(--radius); border: 3px solid var(--line); background: var(--paper); color: var(--ink); font: 700 1rem var(--body); cursor: pointer; box-shadow: var(--shadow); }
.funsetcard:hover, .funsetcard:focus-visible { border-color: var(--royal); }
.funsetcard.done { border-color: var(--leaf); background: var(--ok-bg); }
.funsettext { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.funsetgo { font-size: 1.5rem; flex: none; }
.funjoin { margin-top: 12px; }
.funshowwrap { margin-top: 28px; }
.funshowwrap h2 { font-family: var(--head); }
.funshow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .funshow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funshowcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.funshowcard img, .funshowemoji { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); background: var(--cream); }
.funshowemoji { display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.funshowcard h3 { margin: 0; font-family: var(--head); font-size: 1.05rem; overflow-wrap: anywhere; }
.funshowcard p { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.funshowcard .btn { margin-top: auto; padding-left: 8px; padding-right: 8px; text-align: center; }
.funstage { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--cream); color: var(--ink);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.funbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--paper); border-bottom: 3px solid var(--line); }
.funback { flex: none; min-height: 52px; min-width: 52px; padding: 0 18px; border-radius: 99px; border: 3px solid var(--ink); background: var(--sun); color: var(--ink); font: 800 1.15rem var(--body); cursor: pointer; }
.fundots { flex: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; min-width: 0; }   /* T-456 bug d: one row; the dashes shrink */
.fundot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 2px solid transparent; }
.fundot.now { border-color: var(--royal); transform: scale(1.3); }
.fundot.right { background: var(--leaf); } .fundot.wrong { background: var(--sun-edge); }
.funstage .funmute { flex: none; }
.funstagebody { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 20px 12px; }
.funrun { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; }
/* A question fills the room between the top bar and Next and its cards shrink to fit, so a question never scrolls (checked in a real browser: test/fun-fit.test.js). */
.funstage .funrun:has(> .fundoneslot:empty) { flex: 1 1 0; min-height: 0; }
.funstage .funplay { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; touch-action: none; }
.funstage .funq { margin: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.funstage .funq > * { flex: none; }
.funstage .funprompt { font-size: clamp(1.1rem, 3.2vh, 1.5rem); margin: 2px 0; }
.funstage .funhint { margin: 0 0 8px; }
.funstage .funread { min-height: 40px; padding: 4px 12px; }
.funstage .funpic.big { max-width: min(220px, 22vh); margin-bottom: 4px; }
.funstage .funstatement, .funstage .funsentence { margin: 4px 0 8px; }
.funstage .funq > .funopts { flex: 1 1 0; min-height: 88px; max-height: 180px; grid-auto-rows: minmax(0, 1fr); }
.funstage .funq > .funopts:has(> :nth-child(3)) { max-height: 340px; }
.funstage .funopts > .funopt { min-height: 0; container-type: size; padding: 4px; gap: 2px; }
.funstage .funopts .funpic { width: auto; height: min(110px, 100cqh - 1.9rem); max-width: 100%; font-size: min(3rem, 55cqh - 1rem); }
.funstage .funopts .funtfic { font-size: min(2.6rem, 50cqh); }
.funstage .funq > .funmatch { flex: 1 1 0; min-height: 0; max-height: 420px; grid-template-rows: minmax(0, 1fr); gap: 0 clamp(44px, 14%, 50%); }   /* bug d: a lane wide enough for the strings */
.funstage .funcol { min-height: 0; justify-content: center; gap: 8px; }
.funstage .funcol .funopt { flex: 1 1 0; min-height: 0; max-height: 72px; container-type: size; }
.funstage .funcol .funpic { width: auto; height: min(48px, 100cqh); font-size: min(2rem, 70cqh); }
.funstage .funcol .funcut { width: auto; height: min(48px, 100cqh); }
.funstage .funcol .funlabel { white-space: nowrap; font-size: min(1rem, 40cqh); }   /* bug d: "Steam train" on one line */
.funstage .funcol .funlong { white-space: normal; overflow-wrap: normal; line-height: 1.1; }   /* T-557: "garbage collector" on two lines, never cut */
@media (max-width: 420px) { .funstage .funcol .funopt { gap: 2px; padding: 4px 6px; } .funstage .funcol .funpic { height: min(32px, 100cqh); font-size: min(1.5rem, 60cqh); } .funstage .funcol .funcut { height: min(32px, 100cqh); } }
.funstage .funsay { margin-top: 6px; }
.funstage .funstep { display: none; }   /* bug b: the dashes in the bar already count the questions */
.funstage .funq > .funsay { min-height: 2.9em; line-height: 1.45; }   /* bug c: room for the answer before it shows, so nothing jumps */
.funstage .funnav { flex: none; margin-top: 8px; }
.funstage .funrun:has(> .fundoneslot:empty) > .funnav { min-height: 56px; }   /* the place Next will take */
.funstage .funnext { min-width: min(100%, 260px); min-height: 56px; font-size: 1.2rem; }
.funstage .fundoneslot:empty { display: none; }
.funacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; }
/* T-414: the book on the end card, more quizzes, sharing the score as a picture. */
.funfrom { margin: 0 0 8px; font-size: .9rem; text-align: center; color: var(--ink-soft); overflow-wrap: anywhere; }
.funpitch { font-size: 1.05rem; max-width: 34em; margin: 6px auto 12px; overflow-wrap: anywhere; }
.fundone .funbook { margin-top: 18px; text-align: center; }
.funrelated h3 { font-family: var(--head); margin: 16px 0 8px; }
.funrelated ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.funrelated li { flex: 1 1 140px; max-width: 220px; min-width: 0; }
.funrel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; text-align: left; overflow-wrap: anywhere; }
.funrel:hover, .funrel:focus-visible { border-color: var(--royal); }
.funrel img { width: 48px; height: 60px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.funrelemoji { font-size: 2rem; flex: 0 0 auto; }
.funsetbook { font-size: .85rem; font-weight: 600; color: var(--royal); overflow-wrap: anywhere; }
.funmorequiz { margin-top: 22px; }
.funmorequiz h3 { font-family: var(--head); margin: 0 0 4px; }
.funmorequiz #fun-more-open { margin-top: 12px; }
/* T-439: Instagram series pages */
.serlist { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sercard { display: flex; flex-direction: column; height: 100%; background: var(--paper); color: var(--ink); text-decoration: none; border: 3px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.sercover, .seritem img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--cream); }
.serinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px 12px; overflow-wrap: anywhere; }
.serhead { display: grid; gap: var(--gap); align-items: center; margin-bottom: 16px; }
.serhead .sercover { max-width: 200px; border: 3px solid var(--line); border-radius: var(--radius-sm); }
.serhead h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
.serhave { font-weight: 800; margin: 0 0 6px; }
.sergrid { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seritem { position: relative; display: block; width: 100%; padding: 0; cursor: pointer; font: inherit; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); }
.sernum { position: absolute; z-index: 2; left: 6px; top: 6px; min-width: 26px; padding: 2px 7px; border-radius: 99px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: .8rem; text-align: center; box-shadow: var(--shadow); }
.seritem .igbadge { top: auto; bottom: 6px; right: 6px; }
@media (min-width: 720px) { .serlist { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sergrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .serhead { grid-template-columns: 200px 1fr; } }
.funsharebox { margin: 14px 0 0; }
.funshare { background: var(--wa); border-color: var(--wa); color: var(--white); box-shadow: 0 5px 0 var(--wa-edge); }   /* white on the deep WhatsApp green: about 5:1 (dark ink was 2.5:1) */
.funsharenote:empty { display: none; }
.funsharenote { margin: 8px 0 0; }
.kidbooks { margin-top: 26px; }
.kidbooks h2 { font-family: var(--head); }
.kidbook { display: block; font-size: .85rem; font-weight: 600; color: var(--royal); overflow-wrap: anywhere; }
/* T-394: sort into baskets, put in order, find it on the page, count, memory flip. Cards still move by transform only. */
.funbasket, .funthing, .funflip, .funpagetap { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.funbaskets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.funbasket { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 92px; padding: 6px; border-radius: var(--radius-sm); border: 3px dashed var(--line); background: var(--paper); color: var(--ink); font: 800 1rem var(--body); cursor: pointer; }
.funbasket.c0 { border-color: var(--sky); } .funbasket.c1 { border-color: var(--sun-edge); } .funbasket.c2 { border-color: var(--bubble); }
.funbasket.over { outline: 4px dashed var(--royal); outline-offset: 2px; } .funbasket:disabled { cursor: default; color: var(--ink); }
.funbaskethead { display: flex; align-items: center; gap: 6px; } .funbaskethead .funpic { max-width: 36px; font-size: 1.7rem; }
.funbasketin { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.funbasketin .funitem { display: flex; align-items: center; border: 2px solid var(--leaf); border-radius: var(--radius-sm); background: var(--white); flex-direction: row; min-height: 0; padding: 2px 6px; gap: 2px; border-width: 2px; font-size: .8rem; }
.funbasketin .funitem .funpic { max-width: 24px; font-size: 1.2rem; }
.funtray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; min-height: 40px; }
.funtray .funitem { width: calc(25% - 6px); min-width: 68px; min-height: 72px; padding: 4px; gap: 2px; font-size: .9rem; }
.funtray .funitem .funpic { max-width: 40px; font-size: 1.9rem; }
.funorder { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.funstepcard { flex: 1 1 0; min-width: 64px; max-width: 150px; min-height: 92px; padding: 4px; gap: 2px; font-size: .9rem; }
.funstepcard .funpic { max-width: 56px; font-size: 2.2rem; }
.funnum { position: absolute; top: 2px; left: 6px; font: 800 .9rem var(--head); color: var(--royal); }
.funcheckrow { margin-top: 10px; } .funcheck { min-width: min(100%, 200px); min-height: 52px; font-size: 1.15rem; }
.funpagetap { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: crosshair; }
.funpageframe { position: relative; display: block; width: min(100%, 300px, 40vh); margin: 0 auto; }
.funwrap .funpageframe .funpic.big { width: 100%; max-width: none; margin: 0; }
.funring { position: absolute; border: 4px solid var(--leaf); border-radius: 50%; box-shadow: 0 0 0 3px var(--white); pointer-events: none; }
.funtap { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--royal); border: 3px solid var(--white); pointer-events: none; }
.funpagetap.wrong .funtap { background: var(--sun-edge); }
/* T-456 find it: the part of the page round the spot, as big as the screen allows; then the whole page slides in */
.funpageframe.zoom, .funpageframe.whole { width: min(100%, 720px, calc((100dvh - 400px) * .75)); }   /* the question, the answer line and Next stay on screen */
.funpageframe.zoom .funpic.big { border-radius: 20px; box-shadow: 0 6px 0 var(--line); }
.funpageframe.whole { animation: funslidein var(--fun-book) ease-out; }
@keyframes funslidein { from { transform: translateX(40%); opacity: 0; } }
/* T-480 (FindSpace, FindGarden): the page's cut-outs in their scene, each moving its own way; none of it moves in calm mode */
.funscene { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 70vh; margin: 4px 0; border-radius: var(--radius); overflow: hidden; background: radial-gradient(var(--line) 1.5px, transparent 2px) 0 0 / 28px 28px, var(--cream); box-shadow: 0 6px 0 var(--line); }
.funstage .funq > .funscene { flex: 1 1 0; min-height: 240px; aspect-ratio: auto; max-height: none; }
.funscene.scene-space { background: radial-gradient(circle at 12% 20%, var(--white) 0 1.5px, transparent 2.5px) 0 0 / 90px 90px, radial-gradient(circle at 60% 70%, var(--white) 0 1px, transparent 2px) 0 0 / 60px 60px, radial-gradient(ellipse at 70% 40%, var(--scene-space-1) 0, var(--scene-space-2) 45%, var(--scene-space-3) 100%); box-shadow: 0 6px 0 var(--scene-space-3); }
.funscene.scene-garden { background: linear-gradient(180deg, var(--scene-sky) 0, var(--tone-sky) 52%, var(--scene-grass) 52%, var(--scene-grass-deep) 100%); box-shadow: 0 6px 0 var(--dq-leaf-edge); }
.funscene.scene-farm { background: linear-gradient(180deg, var(--scene-sky) 0, var(--tone-sky) 45%, var(--scene-field) 45%, var(--scene-grass-deep) 100%); box-shadow: 0 6px 0 var(--dq-leaf-edge); }
.funscene.scene-sea { background: linear-gradient(180deg, var(--tone-sky) 0, var(--tone-sky) 20%, var(--scene-sea) 20%, var(--scene-sea-deep) 100%); box-shadow: 0 6px 0 var(--dq-sea); }
.funscene.scene-town { background: linear-gradient(180deg, var(--scene-sky) 0, var(--tone-sky) 62%, var(--dq-sand) 62%, var(--dq-sand) 100%); box-shadow: 0 6px 0 var(--line); }
.funart { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: left var(--fun-fly) ease-out, top var(--fun-fly) ease-out, scale var(--fun-fly) var(--fun-spring), opacity .3s ease-out; }
.funart > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .18)); pointer-events: none; }
.funart.box > img { padding: 6px; border-radius: 16px; background: var(--white); box-shadow: 0 4px 0 var(--line); filter: none; }
.funart:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.funart.fly > img { animation: funartfly 7s ease-in-out infinite; }
.funart.crawl > img { animation: funartcrawl 6s ease-in-out infinite; }
.funart.drift > img { animation: funartdrift 9s ease-in-out infinite; }
.funart.bob > img { animation: funartbob 4s ease-in-out infinite; }
@keyframes funartfly { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 25% { transform: translate(16%, -12%) rotate(4deg); } 50% { transform: translate(-6%, -18%) rotate(-2deg); } 75% { transform: translate(-14%, -5%) rotate(5deg); } }
@keyframes funartcrawl { 0%, 100% { transform: translateX(-10%) rotate(-2deg); } 50% { transform: translateX(10%) rotate(2deg); } }
@keyframes funartdrift { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(6%, -5%) rotate(3deg); } 66% { transform: translate(-5%, 4%) rotate(-3deg); } }
@keyframes funartbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
.funart.glow::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(248, 216, 40, .65) 0, rgba(248, 216, 40, .2) 50%, transparent 70%); animation: funglow 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes funglow { 50% { transform: scale(1.12); opacity: .7; } }
.funscene.done .funart:not(.found) { opacity: .3; }
.funart.found { z-index: 2; }
.funart.found > img { animation: none; }
.funpagecap { display: block; margin-top: 8px; font: 800 1.1rem var(--head); color: var(--leaf-deep); text-align: center; }
@media (prefers-reduced-motion: reduce) { .funart > img, .funart.glow::before { animation: none; } .funart { transition: none; } }
.funthings { display: grid; grid-template-columns: repeat(5, minmax(0, 52px)); justify-content: center; gap: 8px; margin: 4px 0 10px; }
.funthing { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 50%; border: 3px solid var(--line); background: var(--white); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.funthing.counted { border-color: var(--leaf); background: var(--ok-bg); } .funthing:disabled { cursor: default; color: var(--ink); }
.funthingno { position: absolute; right: -6px; bottom: -6px; min-width: 22px; border-radius: 99px; background: var(--royal); color: var(--white); font: 800 .8rem/22px var(--body); }
.funthingno:empty { display: none; }
.funnums .funlabel { font: 800 2rem var(--head); }
.funplain .funpic { margin: 0 auto 8px; }
.funmemory { margin-top: 8px; }
.funflipgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 0 auto 8px; }
.funflip { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; min-width: 0; padding: 4px; border-radius: var(--radius-sm); border: 3px solid var(--royal); background: var(--tone-royal); color: var(--ink); font: 700 .85rem var(--body); cursor: pointer; }
.funflipback { font-size: 2rem; } .funflipface { display: none; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.funflip.up { background: var(--cream); border-color: var(--line); } .funflip.up .funflipback { display: none; } .funflip.up .funflipface { display: flex; }
.funflip.found { background: var(--ok-bg); border-color: var(--leaf); cursor: default; } .funflip .funpic { max-width: 44px; font-size: 1.9rem; }
.funstage .funq > .funorder, .funstage .funq > .funtray { flex: none; }
@media (orientation: landscape) and (max-height: 520px) {
  /* On its side a phone is short: the words after an answer and Next sit in a column on the right. */
  .funstage { --side: clamp(150px, 28vw, 240px); }
  .funbar { padding: 4px 12px; } .funback { min-height: 44px; }
  .funstage .funstep, .funstage .funhint, .funstage .funfrom { display: none; }   /* the book shows again at the end */
  .funstage .funrun:has(> .fundoneslot:empty) { position: relative; }
  .funstage .funrun:has(> .fundoneslot:empty) > .funnav { position: absolute; right: 0; bottom: 0; width: var(--side); margin: 0; }
  .funstage .funnext { min-width: 0; width: 100%; }
  .funstage .funq { position: relative; padding-right: calc(var(--side) + 16px); }
  .funstage .funq > .funsay { position: absolute; top: 0; right: 0; bottom: 64px; width: var(--side); margin: 0; overflow: hidden; align-content: center; }
  .funstage .funopts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .funstage .funq > .funopts:has(> :nth-child(3)) { max-height: 180px; }
  .funstage .funcol { gap: 6px; }
  .funstage .funq:has(.funpic.big) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-content: center; align-items: center; }
  .funstage .funq:has(.funpic.big) > :not(.funpic) { grid-column: 2; }
  .funstage .funq:has(.funpic.big) > .funpic.big { grid-column: 1; grid-row: 1 / span 4; max-width: 34vh; margin: 0; }
  .funstage .funq:has(.funpic.big) > .funopts { height: min(110px, 28vh); min-height: 0; }
  .funbasket { min-height: 76px; } .funtray { margin-top: 6px; gap: 6px; }   /* 3 baskets and 8 things fit 640 x 360 */
  .funtray .funitem { flex-direction: row; min-height: 48px; padding: 2px 4px; } .funtray .funitem .funpic { max-width: 28px; font-size: 1.4rem; } .funtray .funitem .funlabel { font-size: .8rem; }
  .funstage .funnext { min-height: 48px; font-size: 1.05rem; }
}

/* T-402: the payment result pages (paid, failed, checking, sign in) use the site's card and gradient */
#paydone .pdcard { background: linear-gradient(180deg, var(--cream) 0%, var(--hero-end) 100%); border: 3px solid var(--sun); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; margin: 18px auto; max-width: 560px; text-align: center; color: var(--ink); font-size: 1rem; }
#paydone #pd-paid { background: linear-gradient(135deg, var(--refer-from) 0%, var(--refer-to) 100%); border-color: var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge), var(--shadow); }
#paydone .pdcard h1 { font-size: 1.45rem; margin: 0 0 8px; }
#paydone .pdicon { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
#paydone .pdcard .btn { margin-top: 4px; }
/* T-402: the order page's Razorpay popup card (calm dots, amount, timer) and the paid view (celebration, gentle cards) */
#done .pop { text-align: center; padding: 6px 0 2px; }
#done .popwait { display: flex; justify-content: center; gap: 10px; height: 22px; margin: 6px 0 12px; }
#done .popwait span { width: 14px; height: 14px; border-radius: 50%; background: var(--leaf); opacity: .35; }
#done .pop.still .popwait { display: none; }
@media (prefers-reduced-motion: no-preference) { #done .popwait span { animation: ttt-pop 1.4s ease-in-out infinite; } #done .popwait span:nth-child(2) { animation-delay: .2s; background: var(--sun); } #done .popwait span:nth-child(3) { animation-delay: .4s; background: var(--sky); } }
@keyframes ttt-pop { 0%, 80%, 100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1.15); opacity: 1; } }
#done .popamt { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 8px; }
#done .popamt strong { font-size: 2rem; line-height: 1.1; }
#done .poptimer { font-variant-numeric: tabular-nums; font-weight: 700; display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--cream); border: 2px solid var(--line); }
#done #pop-act .btn.big { font-size: 1.2rem; padding: 14px 34px; min-width: 220px; max-width: 100%; }
#done #pop-qr { margin-top: 10px; }
#done #pop-qr .payqr { margin: 8px auto; }
#done .party { position: relative; overflow: hidden; text-align: center; background: linear-gradient(135deg, var(--refer-from) 0%, var(--refer-to) 100%); border: 3px solid var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge), var(--shadow); }
#done .party h2 { margin: 4px 0; font-size: 1.5rem; }
#done .party .pdicon { font-size: 2.8rem; line-height: 1; }
#done .confetti { position: absolute; inset: 0; pointer-events: none; }
#done .confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: var(--sun); opacity: 0; }
#done .confetti i:nth-child(3n) { background: var(--bubble); } #done .confetti i:nth-child(3n+1) { background: var(--sky); } #done .confetti i:nth-child(4n) { background: var(--leaf); }
#done .confetti i:nth-child(1) { left: 4%; animation-delay: 0.00s; }
#done .confetti i:nth-child(2) { left: 11%; animation-delay: 0.17s; }
#done .confetti i:nth-child(3) { left: 18%; animation-delay: 0.34s; }
#done .confetti i:nth-child(4) { left: 25%; animation-delay: 0.51s; }
#done .confetti i:nth-child(5) { left: 32%; animation-delay: 0.68s; }
#done .confetti i:nth-child(6) { left: 39%; animation-delay: 0.85s; }
#done .confetti i:nth-child(7) { left: 46%; animation-delay: 1.02s; }
#done .confetti i:nth-child(8) { left: 53%; animation-delay: 1.19s; }
#done .confetti i:nth-child(9) { left: 60%; animation-delay: 0.16s; }
#done .confetti i:nth-child(10) { left: 67%; animation-delay: 0.33s; }
#done .confetti i:nth-child(11) { left: 74%; animation-delay: 0.50s; }
#done .confetti i:nth-child(12) { left: 81%; animation-delay: 0.67s; }
#done .confetti i:nth-child(13) { left: 88%; animation-delay: 0.84s; }
#done .confetti i:nth-child(14) { left: 95%; animation-delay: 1.01s; }
@media (prefers-reduced-motion: no-preference) { #done .confetti i { animation: ttt-fall 2.4s ease-in 2 forwards; } }
@keyframes ttt-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(260px) rotate(540deg); opacity: 0; } }
#done .donecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
#done .morecard, #paydone .morecard { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); margin: 0; }
#done .morecard:hover, #done .morecard:focus-visible, #paydone .morecard:hover, #paydone .morecard:focus-visible { border-color: var(--leaf); }
#paydone .morecard { margin-top: 14px; text-align: left; }
.morecard .morelabel, .morecard .morego { font-weight: 700; } .morecard .morego { color: var(--royal); } .morecard .dqask { overflow-wrap: anywhere; }   /* T-724 R4 */
#done .moreicon, #paydone .moreicon { font-size: 1.8rem; line-height: 1; }

/* T-403: form fields (sign in, register and all forms): taller, larger darker text, a clear border, a clear focus ring */
.fld input, .fld select, .fld textarea { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 1.05rem; font-weight: 400; padding: 12px 14px; min-height: 50px; border: 2px solid var(--field-line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.formrow input:not([type=checkbox]):not([type=radio]), .formrow select, .formrow textarea { font-size: 1.05rem; min-height: 50px; border-color: var(--field-line); }
.fld input::placeholder, .fld textarea::placeholder, .formrow input::placeholder { color: var(--ink-soft); opacity: 1; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible, .formrow input:focus-visible, .formrow select:focus-visible, .formrow textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; border-color: var(--ink); }

/* T-403: the Seeder card: book covers first, one line for what you earn, one for what they save, one button */
.seedcard { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; margin: 18px 0; padding: 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--refer-from), var(--refer-to)); box-shadow: var(--shadow); }
.seedcard .sp-pic { display: flex; justify-content: center; align-items: flex-end; min-height: 110px; padding: 6px 10px 0; }
.seedcard .sp-pic img { width: 82px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 3px solid var(--white); box-shadow: var(--shadow); margin: 0 -10px; background: var(--paper); }
.seedcard .sp-pic img:nth-child(1) { transform: rotate(-8deg); } .seedcard .sp-pic img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px); } .seedcard .sp-pic img:nth-child(3) { transform: rotate(8deg); }
.seedcard .sp-sprout { font-size: 4rem; line-height: 1; }
.seedcard h2 { margin: 0 0 10px; font-size: 1.3rem; }
.seedcard .sp-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.seedcard .sp-lines li { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--white); }
.seedcard .sp-earn { background: var(--bubble); } .seedcard .sp-save { background: var(--royal); }
#done .donecards > .seedcard { grid-column: 1 / -1; margin: 0; }
@media (min-width: 600px) { .seedcard { grid-template-columns: 220px 1fr; padding: 22px; } }

/* T-403: big screens: the fun page uses the width */
@media (min-width: 1024px) { #fun.funwrap { max-width: 1080px; } }
/* T-447 (D-107): the Fun zone, a kids game frame on its own colours. Icons are drawn lines (SVG). Phone first; nothing wider than the screen. */
.funico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.funico.funfill { fill: currentColor; stroke-width: 1.2; }
.btn .funico, .funback .funico { margin: 0 4px; }
#fun.funzone { max-width: 820px; margin-top: 12px; margin-bottom: 12px; padding: 14px; background: var(--tone-sky); border-radius: 28px; }
.funhud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--royal); color: var(--white); box-shadow: 0 5px 0 var(--royal-edge); }
.funme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 800 1rem var(--head); flex: none; }
.funhudtitle { flex: 1 1 120px; min-width: 0; margin: 0; font: 800 1.35rem var(--head); color: var(--white); overflow-wrap: anywhere; }
.funpill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 99px; background: var(--white); color: var(--ink); font: 800 1rem var(--body); }
.funpill.star .funico { color: var(--sun-edge); } .funpill.stk .funico { color: var(--bubble); }
.funzone .funfree h3, .funzone .funpick h2, .funzone .funagehead h2, .funzone .funmorequiz h3, .funzone .funbooks h2, .funzone .funshowwrap h2 { color: var(--royal-edge); }
.funzone .funpick { margin-top: 14px; }
.funagebtn.tone-royal, .funagebtn.tone-grape, .funagebtn.tone-bubble, .funagebtn.tone-leaf { color: var(--white); border-color: transparent; }
.funagebtn.tone-royal { background: var(--royal); box-shadow: 0 6px 0 var(--royal-edge); } .funagebtn.tone-grape { background: var(--grape); box-shadow: 0 6px 0 var(--ig-edge); }
.funagebtn.tone-bubble { background: var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge); } .funagebtn.tone-leaf { background: var(--leaf-deep); box-shadow: 0 6px 0 var(--ok-ink); }
.funagebtn:focus-visible, .funsetcard:focus-visible, .funtile:focus-visible, .funbookchip:focus-visible, .funshowbtn:focus-visible, .funplaybtn:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.funageico .funico { width: 2.6rem; height: 2.6rem; }
.funagesub { font-size: .9rem; opacity: .95; }
.funtoday { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--grape) 0%, var(--bubble) 100%); color: var(--white); box-shadow: 0 6px 0 var(--ig-edge); }
.funtodaytext { flex: 1 1 auto; min-width: 0; }
.funtodaylabel { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 .8rem var(--body); text-transform: uppercase; letter-spacing: .04em; }
.funtoday h2 { margin: 6px 0 2px; font: 800 1.3rem var(--head); color: var(--white); overflow-wrap: anywhere; }
.funtoday p { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.funplaybtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-edge); cursor: pointer; }
.funplaybtn .funico { width: 28px; height: 28px; }
.funzone .funset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funzone .funsetcard { flex-direction: column; align-items: stretch; gap: 8px; min-height: 132px; padding: 12px; border: 0; color: var(--white); }
.funzone .funsetcard.tone-royal { background: var(--royal); box-shadow: 0 6px 0 var(--royal-edge); } .funzone .funsetcard.tone-grape { background: var(--grape); box-shadow: 0 6px 0 var(--ig-edge); }
.funzone .funsetcard.tone-bubble { background: var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge); } .funzone .funsetcard.tone-leaf { background: var(--leaf-deep); box-shadow: 0 6px 0 var(--ok-ink); }
.funzone .funsetcard strong { font: 800 1.05rem var(--head); }
.funzone .funsetcard .funsetbook, .funupcard .funsetbook { color: var(--white); }   /* T-467: never blue on a coloured card */
.funsetcover { display: none; }
/* T-467 (D-113): the book cover peeks from every game card, phones too; one card a row below 600 px so the name has room */
.funzone .funsetcard { position: relative; overflow: hidden; }
.funzone .funsetcard:has(.funsetcover) .funsettext { max-width: 62%; }
.funzone .funsetcover { display: block; position: absolute; right: 14px; bottom: -22px; width: 76px; height: 102px; object-fit: cover; border-radius: 3px 7px 7px 3px; transform: rotate(8deg); box-shadow: 2px 2px 0 var(--white), 4px 4px 0 var(--line), -4px 8px 12px rgba(0, 0, 0, .28); pointer-events: none; }
@media (max-width: 599px) { .funzone .funset { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) {   /* T-456 FunHubWide: the full width, 4 big game cards in a row, each with its book's cover */
  #fun.funzone { max-width: min(1360px, calc(100% - 48px)); padding: 24px 32px; }   /* a gutter each side, like the header */
  .funzone .funset { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .funzone .funsetcard { position: relative; overflow: hidden; justify-content: flex-start; gap: 14px; height: 100%; min-height: 212px; padding: 20px; border-radius: 24px; }
  .funzone .funsetcard strong { font-size: 1.375rem; line-height: 1.15; }
  .funzone .funsetcard .funsetico { width: 48px; height: 48px; border-radius: 14px; }
  .funzone .funsettext { display: flex; flex-direction: column; gap: 6px; }
  .funzone .funsetcard:has(.funsetcover) .funsettext { max-width: 58%; }
  .funzone .funsetcover { display: block; position: absolute; right: 16px; bottom: -34px; width: 84px; height: 114px; object-fit: cover; border-radius: 3px 9px 9px 3px; transform: rotate(8deg); box-shadow: 3px 3px 0 var(--white), 5px 5px 0 var(--line), -6px 12px 16px rgba(0, 0, 0, .28); pointer-events: none; }
}
@media (min-width: 1000px) and (max-width: 1100px) { .funzone .funset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.funsettop { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.funsetico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .22); flex: none; }
.funsetico .funico { width: 24px; height: 24px; }
.funsetsub, .funsetbook { font-size: .85rem; font-weight: 700; }
.funtag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 8px; border-radius: 99px; background: var(--white); color: var(--ink); font: 800 .75rem var(--body); }
.funtag.free { background: var(--sun); } .funtag.own { background: var(--ok-bg); color: var(--ok-ink); }
.funbooks { margin-top: 18px; }
.funbooks h2 { margin: 0 0 8px; font-family: var(--head); }
.funbookchips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: thin; }
.funbookchip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 6px; border: 3px solid transparent; border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: 700 .8rem var(--body); cursor: pointer; opacity: .55; }
.funbookchip.owned { opacity: 1; box-shadow: 0 0 0 4px var(--sun); }
.funbookchip[aria-pressed="true"] { border-color: var(--royal); }
.funbookchip img, .funchipcover { width: 62px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--cream); }
.funchipcover { display: flex; align-items: center; justify-content: center; color: var(--royal); }
.funbookchipname { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.funbooks h3 { margin: 10px 0 6px; font-family: var(--head); color: var(--royal-edge); }
.funtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.funtile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; min-height: 88px; padding: 10px; border: 0; border-radius: var(--radius-sm); color: var(--white); text-align: left; font: 700 .9rem var(--body); cursor: pointer; overflow-wrap: anywhere; }
.funtile.tone-royal { background: var(--royal); } .funtile.tone-grape { background: var(--grape); } .funtile.tone-bubble { background: var(--bubble); } .funtile.tone-leaf { background: var(--leaf-deep); }
.funtilestars { color: var(--sun); } .funtilenew { align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: var(--sun); color: var(--ink); font-size: .75rem; font-weight: 800; }
.funzone .funmorequiz { margin-top: 18px; }
.funzone .funjoin { color: var(--ink); }
.funshowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.funshowhead a { font-weight: 800; color: var(--royal); }
.funshowbtn { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.funshowtitle { font: 800 1.05rem var(--head); overflow-wrap: anywhere; }
.funshowtext { font-size: .9rem; overflow-wrap: anywhere; }
.funshowemoji .funico { width: 3rem; height: 3rem; color: var(--royal); }
/* T-467 (D-113): Peek inside our books: small cards in the fun colours, never a wall of big pages */
.funzone .funshow { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
@media (min-width: 1000px) { .funzone .funshow { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; } }
.funzone .funshowcard { padding: 8px; border: 0; border-radius: 20px; background: var(--white); box-shadow: 0 6px 0 var(--royal); }
.funzone .funshowcard:nth-child(4n+2) { box-shadow: 0 6px 0 var(--grape); } .funzone .funshowcard:nth-child(4n+3) { box-shadow: 0 6px 0 var(--bubble); } .funzone .funshowcard:nth-child(4n+4) { box-shadow: 0 6px 0 var(--leaf-deep); }
.funzone .funshowcard img, .funzone .funshowemoji { border-radius: 14px; }
.funzone .funshowtitle { font-size: .95rem; line-height: 1.2; } .funzone .funshowtext { font-size: .8rem; }
/* T-467: the free games box and the book page glimpse's lock card */
.funfree { margin-top: 18px; } .funfree h3 { margin: 0; font: 800 1.3rem var(--head); }
.funlockico .funico { width: 56px; height: 56px; color: var(--grape); }
.funglimpsebuy { display: flex; justify-content: center; margin: 12px 0 0; }
.funglimpsein { margin: 0; font-weight: 800; color: var(--ok-ink); }
/* T-448 (D-107): the book page's online fun: the badge, what comes with the book, and the band where one game plays on the page. Phone first. */
.funbadge { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 4px 12px; border-radius: 99px; border: 2px solid var(--tone-grape); background: linear-gradient(90deg, var(--refer-from), var(--refer-to), var(--sub-blue)); color: var(--ig-edge); font: 800 .85rem var(--body); }
.funbadge .funico { color: var(--sun-edge); }
.funincs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.funinc { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); font: 800 .85rem var(--body); overflow-wrap: anywhere; }
.funinc.tone-royal { background: var(--tone-royal); } .funinc.tone-bubble { background: var(--tone-bubble); } .funinc.tone-grape { background: var(--tone-grape); } .funinc.tone-sun { background: var(--tone-sun); }
.funincico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: var(--white); }
.tone-royal > .funincico { background: var(--royal); } .tone-bubble > .funincico { background: var(--bubble); } .tone-grape > .funincico { background: var(--grape); } .tone-sun > .funincico { background: var(--sun-edge); }
.funpeekbtn { margin-top: 10px; }
.funbookband { margin: 22px 0 6px; }
.funband { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 28px; background: linear-gradient(110deg, var(--refer-from), var(--refer-to) 50%, var(--sub-blue)); }
.funbandside { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.funbandeyebrow { margin: 0; color: var(--bubble-edge); font: 800 .78rem var(--body); letter-spacing: .06em; text-transform: uppercase; }
.funbandside h2 { margin: 0; font-size: 1.6rem; }
.funbandlead { margin: 0; color: var(--ink-soft); font-weight: 700; overflow-wrap: anywhere; }
.funbandside .funpill { align-self: flex-start; min-height: 30px; color: var(--leaf-deep); font-size: .85rem; }
.funbandgame { min-width: 0; padding: 12px; border-radius: 24px; background: var(--white); box-shadow: 0 8px 0 var(--tone-grape); }
.funbandbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.funbandbar h3 { flex: 1 1 140px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.funbandgame .funrun { max-width: none; }
.funbandstart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; text-align: center; }
.funbandstart h3 { margin: 0; overflow-wrap: anywhere; }
.btn.funbandgo { min-height: 48px; padding: 0 28px; font-size: 1.1rem; background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); }
.funbandsmall { margin: 8px 0 0; color: var(--ink-soft); font-size: .85rem; font-weight: 700; }
.funbooklist { margin-top: 18px; }
.funbooklisthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.funbooklisthead h2 { flex: 1 1 200px; margin: 0; font-size: 1.4rem; }
.funbooklisthead .funpill { min-height: 30px; font-size: .85rem; }
.funpill.leaf { background: var(--tone-leaf); color: var(--leaf-deep); } .funpill.grape { background: var(--tone-grape); color: var(--ig-edge); }
.funbooktiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.funbooktile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 96px; padding: 8px 6px; border: 3px solid transparent; border-radius: var(--radius-sm); color: var(--ink); font: 700 .85rem var(--body); text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.funbooktile.tone-sun { background: var(--sun); } .funbooktile.tone-sky { background: var(--tone-sky); } .funbooktile.tone-bubble { background: var(--tone-bubble); }
.funbooktile.tone-grape { background: var(--tone-grape); } .funbooktile.tone-leaf { background: var(--tone-leaf); } .funbooktile.tone-royal { background: var(--tone-royal); }
.funbooktile.locked { background: var(--white); border-color: var(--line); color: var(--ink-soft); }
.funbooktile[aria-pressed="true"] { border-color: var(--royal); }
.funbooktile:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.funbooktileico .funico { width: 1.6rem; height: 1.6rem; }
.funbooktilename { font: 800 .9rem var(--head); }
.funbooktilepic { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--white); }
.funbooktilepages { font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.funbooktile[data-state="ask"] { border-color: var(--royal); border-style: dashed; }
.funbooktiletag { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; }
.funbookstars { display: inline-flex; align-items: center; gap: 2px; color: var(--sun-edge); }
.funbandnote { margin: 8px 0 0; font-weight: 700; }
.funbandnote:empty { display: none; }
@media (min-width: 700px) {
  .funincs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .funband { flex-direction: row; align-items: stretch; gap: 24px; padding: 22px 26px; }
  .funbandside { width: 280px; flex: none; }
  .funbandside .funpill { margin-top: auto; }
  .funbandgame { flex: 1 1 0; padding: 18px 22px; }
  .funbooktiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The look inside a book: a sheet over the page or the play view (never the book page loading behind). */
.funpeek { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.funpeekdim { position: absolute; inset: 0; background: rgba(0, 40, 80, .45); }
.funpeeksheet { position: relative; width: min(100%, 560px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--cream); color: var(--ink); box-shadow: 0 -6px 24px rgba(0, 0, 0, .2); }
.funpeekhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.funpeekhead h2 { margin: 0; min-width: 0; font: 800 1.25rem var(--head); overflow-wrap: anywhere; }
.funround { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 3px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.funround.sun { background: var(--sun); }
.funround:disabled { opacity: .4; cursor: default; }
.funpeekpage { position: relative; margin-top: 12px; }
.funpeekpage img { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--white); border: 3px solid var(--line); }
.funpeeknav { display: flex; justify-content: space-between; margin-top: 8px; }
.funpeekcount { margin: 8px 0 0; text-align: center; font-weight: 800; }
.funpeekhow { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--tone-sun); font-weight: 700; }
.funpeekacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.funpeekacts .btn { flex: 1 1 150px; text-align: center; }
.btn.funpeekbook { background: var(--white); color: var(--ink); border: 3px solid var(--line); box-shadow: none; }   /* T-456: was white on white */
.btn.funpeekplay { background: var(--bubble); color: var(--white); }
/* T-456 FunLockedWide: a locked game's book: Buy first, then Log in, then a free game */
.funpeekhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.funpeekgame { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 12px; border-radius: 99px; background: var(--tone-grape); color: var(--ig-edge); font: 800 .9rem var(--body); overflow-wrap: anywhere; }
.funpeekabout { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.funpeekcover { flex: none; width: 72px; height: 98px; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 3px 3px 0 var(--white), 5px 5px 0 var(--line); }
.funpeekname { margin: 0; font: 800 1.1rem var(--head); overflow-wrap: anywhere; }
.funpeekprice { margin: 4px 0 0; font: 800 1.2rem var(--head); }
.funpeek.locked .funpeekacts { flex-direction: column; }
.funpeek.locked .funpeekacts .btn { flex: none; width: 100%; }
.btn.funpeekbuy { background: var(--bubble); color: var(--white); box-shadow: 0 5px 0 var(--bubble-edge); }
.btn.funpeeklogin { background: var(--white); color: var(--ink); border: 3px solid var(--line); box-shadow: none; }
.funpeek.locked .btn.funpeekplay { background: none; color: var(--royal); box-shadow: none; min-height: var(--tap); text-decoration: underline; }
.funpeek.locked .btn.funpeekbook { min-height: var(--tap); }
@media (min-width: 1000px) {   /* the pages left, the book right; one screen, never scrolls */
  .funpeek { align-items: center; }
  .funpeeksheet { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "view head" "view side";
    width: min(1040px, calc(100% - 32px)); height: min(620px, calc(100dvh - 32px)); max-height: none; overflow: hidden; padding: 0; border-radius: 32px; }
  .funpeekhead { grid-area: head; align-items: flex-start; padding: 28px 28px 0 40px; }
  .funpeekbody { grid-area: view; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; padding: 24px 84px; background: var(--tone-sun); }
  .funpeekpage { position: static; margin: 0; min-height: 0; }
  .funpeekpage img { width: auto; max-width: 100%; max-height: min(470px, calc(100dvh - 160px)); box-shadow: 6px 6px 0 var(--line); }
  .funpeeknav { margin: 0; }
  .funpeeknav .funround { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; }
  #fun-peek-prev { left: 16px; } #fun-peek-next { right: 16px; }
  .funpeekcount { margin: 0; padding: 2px 14px; border-radius: 99px; background: var(--white); }
  .funpeekside { grid-area: side; min-height: 0; overflow: hidden; padding: 0 40px 32px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
}
html.funpeeking, html.funpeeking body { overflow: hidden; }
/* The play screens on the frame's colours. */
.funstage { background: var(--tone-sky); }
.funstage .funbar { background: var(--royal); border-bottom-color: var(--royal-edge); }
.fundot { flex: 0 1 26px; min-width: 6px; width: 26px; height: 10px; border-radius: 99px; background: var(--white); border: 0; }
.fundot.now { background: var(--sun); transform: none; } .fundot.right { background: var(--leaf); } .fundot.wrong { background: var(--sun-edge); }
.funstage .funopts > .funopt:nth-child(3n+1):not(.right):not(.wrong):not(.matched):not(.sel) { background: var(--tone-sun); border-color: var(--sun-edge); }
.funstage .funopts > .funopt:nth-child(3n+2):not(.right):not(.wrong):not(.matched):not(.sel) { background: var(--tone-bubble); border-color: var(--bubble); }
.funstage .funopts > .funopt:nth-child(3n):not(.right):not(.wrong):not(.matched):not(.sel) { background: var(--tone-grape); border-color: var(--grape); }
.funstage .funsticker { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; border: 5px solid var(--bubble); background: repeating-conic-gradient(var(--tone-sun) 0 15deg, var(--hero-end) 15deg 30deg); }
.funstars { display: flex; justify-content: center; gap: 6px; margin: 6px 0; color: var(--line); }
.funstars .funico { width: 36px; height: 36px; } .funstars .funico.on { color: var(--sun-edge); }
.btn.funnextgame { background: var(--leaf-deep); color: var(--white); }
/* T-456 FunResultWide: the celebration, the book, then up to 3 games to play next (one under the other on a phone) */
.funstage .funrun:has(> .fundoneslot:not(:empty)) > .funplay { display: none; }   /* the end card starts at the top */
.funcel { padding: 16px; border-radius: 28px; background: var(--tone-sun); box-shadow: 0 6px 0 var(--sun-edge); }
.funup { margin: 22px 0 0; text-align: left; }
.funup h3 { margin: 0 0 10px; font: 800 1.3rem var(--head); }
.funup ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.funupcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 120px; padding: 12px; border: 0; border-radius: var(--radius); color: var(--white); text-align: left; cursor: pointer; }
.funupcard strong { font: 800 1.05rem var(--head); overflow-wrap: anywhere; }
.funupcard.tone-royal { background: var(--royal); box-shadow: 0 6px 0 var(--royal-edge); } .funupcard.tone-grape { background: var(--grape); box-shadow: 0 6px 0 var(--ig-edge); }
.funupcard.tone-bubble { background: var(--bubble); box-shadow: 0 6px 0 var(--bubble-edge); } .funupcard.tone-leaf { background: var(--leaf-deep); box-shadow: 0 6px 0 var(--ok-ink); }
/* T-456 FunQuizWide: from 1000 px the bar, the prompt, the cards and Next grow, and the book sits in a rail beside the questions. */
.funrail { display: none; }
@media (min-width: 1000px) {
  .funstage .funbar { gap: 16px; min-height: 76px; padding: 0 max(32px, calc(50% - 648px)); border-bottom-width: 4px; }
  .funstage .funback { min-height: 50px; font: 600 1.25rem var(--body); }
  .funstage .fundots { gap: 10px; }
  .funstage .fundot { flex-basis: 40px; width: 40px; height: 12px; border-radius: 6px; }
  .funstagebody:has(> .funrail:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); gap: 32px; width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 40px; }
  .funstage .funrun { max-width: 1296px; }   /* the match board and the end card use the width; with the rail the grid sets it */
  .funstagebody:has(> .funrail:not([hidden])) > .funrun { max-width: none; min-height: 0; }
  .funstagebody:has(> .funrail:not([hidden])) .funfrom { display: none; }   /* the rail names the book */
  .funstage .funprompt { font-size: clamp(1.5rem, 4vh, 2.25rem); }
  .funstage .funread { min-height: 46px; padding: 0 18px; }
  .funstage .funq > .funopts, .funstage .funq > .funopts:has(> :nth-child(3)) { max-height: 390px; gap: 24px; margin-top: 22px; }
  .funstage .funopts > .funopt { position: relative; overflow: visible; border-radius: 28px; border-width: 4px; padding: 12px; gap: 12px; }
  .funstage .funopts .funpic { height: min(260px, 100cqh - 3rem); font-size: min(8rem, 60cqh - 1rem); border-radius: 20px; }
  .funstage .funopts .funlabel { font: 600 min(1.625rem, 12cqh) var(--body); }
  .funstage .funopts > .funopt.right { border-width: 7px; border-color: var(--leaf); transform: translateY(-12px); box-shadow: 0 14px 0 var(--leaf-deep), 0 0 0 8px rgba(88,168,32,.18); }
  .funstage .funopts:has(> .funopt.right) > .funopt:not(.right) { opacity: .42; transform: scale(.96); }
  .funstage .funopts > .funopt.right::after { content: '✓'; position: absolute; top: 16px; right: 16px; width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--white); background: var(--leaf); color: var(--white); font: 800 1.9rem/50px var(--body); text-align: center; }
  .funstage .funopts > .funopt.right::before { content: 'Yes!'; position: absolute; top: 26px; left: 50%; transform: translateX(-50%) rotate(-4deg); padding: 4px 18px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 700 1.5rem var(--body); box-shadow: 0 4px 0 var(--sun-edge); z-index: 1; }
  .funstage .funnav { text-align: right; margin-top: 24px; }
  .funstage .funrun:has(> .fundoneslot:empty) > .funnav { min-height: 66px; }
  .funstage .funnext { min-width: 0; min-height: 60px; padding: 0 32px; border-radius: 99px; background: var(--leaf); border-color: var(--leaf-deep); color: var(--white); font: 600 1.375rem var(--body); box-shadow: 0 5px 0 var(--leaf-deep); }
  .funstage .funq > .funmatch { width: min(1200px, 100%); max-height: 600px; margin: 22px auto 0; column-gap: 50%; }
  .funstage .funcol { gap: 18px; }
  .funstage .funcol .funopt { max-height: 130px; border-radius: 26px; border-width: 4px; gap: 16px; padding: 9px 18px 9px 9px; box-shadow: 0 6px 0 var(--line); }
  .funstage .funcol:last-of-type .funopt { flex-direction: row-reverse; padding: 9px 9px 9px 18px; }
  .funstage .funcol .funpic { height: min(110px, 100cqh); font-size: min(4rem, 70cqh); border-radius: 19px; }
  .funstage .funcol .funcut { height: min(110px, 100cqh); max-width: 110px; }
  .funstage .funcol .funlabel { font: 700 min(1.75rem, 46cqh, 11cqw) var(--body); }   /* T-467: readable from the sofa */
  .funstage .funcol .funlong { font-size: min(1.75rem, 38cqh, 11cqw); line-height: 1.1; }
  .funlines path { stroke-width: 8; }
  .funcol .funopt::after { width: 20px; height: 20px; margin-top: -10px; }
  .funcol:first-of-type .funopt::after { right: -12px; } .funcol:last-of-type .funopt::after { left: -12px; }
  .funrail { display: flex; flex-direction: column; gap: 16px; align-self: start; max-height: 100%; min-height: 0; overflow: hidden; padding: 22px; border-radius: 28px; background: var(--white); box-shadow: 0 6px 0 var(--sky); }
  .funrail[hidden] { display: none; }
  .funrailhead { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .funrailhead img, .funrailcover { flex: none; width: 56px; height: 74px; object-fit: cover; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
  .funrailown { display: block; font: 700 1.375rem var(--head); color: var(--leaf-deep); }
  .funrailtitle { display: block; font: 700 .875rem var(--body); color: var(--ink-soft); overflow-wrap: anywhere; }
  .funrailpage { min-height: 0; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 6px 6px 0 var(--cream); transform: rotate(-1.5deg); }
  .funrailpage[hidden] { display: none; }
  .funrailpage img { display: block; width: 100%; max-height: min(440px, 100dvh - 400px); object-fit: contain; }
  .funrailacts { display: flex; gap: 12px; }
  .funrailacts .btn { flex: 1; min-height: 48px; text-align: center; }
  .btn.funrailpeek { background: var(--white); color: var(--ink); border: 3px solid var(--line); }
  .btn.funrailget { background: var(--bubble); color: var(--white); box-shadow: 0 4px 0 var(--bubble-edge); }
  /* T-456 FunResultWide: the celebration left, the book right, the next games in a row below, all on one screen */
  .funstage .fundone { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px 28px; align-items: stretch; text-align: left; }
  .funstage .fundone > :not(.funcel):not(.funbook) { grid-column: 1 / -1; }
  .funstage .funcel { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 22px; align-content: center; padding: 24px; }
  .funstage .funcel > * { grid-column: 2; }
  .funstage .funcel > .funsticker { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: 150px; height: 150px; }
  .funstage .funcel > .funend, .funstage .funcel > .funsharebox, .funstage .funcel > .funacts { grid-column: 1 / -1; }
  .funstage .funcel .funstars, .funstage .funcel .funacts { justify-content: flex-start; }
  .funstage .funcel h3, .funstage .funcel p, .funstage .funcel .funstars { margin: 0; }
  .funstage .funcel > .funsharebox, .funstage .funcel > .funacts { margin: 10px 0 0; }
  .funstage .fundone .funbook { display: grid; grid-template-columns: clamp(140px, 100dvh - 620px, 200px) minmax(0, 1fr);   /* a smaller cover on a short screen */
    gap: 4px 20px; align-content: center; margin: 0; padding: 22px; text-align: left; }
  .funstage .fundone .funbook > * { grid-column: 2; }
  .funstage .fundone .funbookcard { display: contents; }   /* T-467: the cover left, the cart row right */
  .funstage .fundone .funbookcard > .card { grid-column: 1; grid-row: 1 / span 4; }
  .funstage .fundone .funbookcard > .qtyctl, .funstage .fundone .funbookcard > .qtyctl .stepper { grid-column: 2; width: auto; justify-content: flex-start; }
  .funstage .fundone .funbookcard > .qtyctl .btn { flex: 0 0 auto; }
  .funstage .fundone .funbookcard h3, .funstage .fundone .funbookcard .chip { display: none; }   /* the heading names the book */
  .funstage .fundone .funrelated { display: none; }   /* Play next lists the games */
  .funstage .funup { margin: 0; }
  .funstage .fundone > .funbonus:has(> .btn) { grid-column: auto; margin: 0; }   /* T-467: the match game's two bonus buttons side by side; an open bonus game takes the full row */
  .funstage .funup ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .funstage .funupcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 2px 12px; min-height: 84px; }
  .funstage .funupcard > .funsetico { grid-row: 1 / span 3; }
  .funstage .funupcard > .funtag { justify-self: start; }
  .funstage .funrun:has(> .fundoneslot:not(:empty)) > .funfrom { display: none; }   /* the book panel names the book */
}
@media (min-width: 1000px) and (max-width: 1100px) { .funstage .fundone { grid-template-columns: minmax(0, 1fr); } }

/* T-450: the daily quiz (home promo and shout-out, /daily play, ticket, rules) */
.dqhome { display: grid; gap: 18px; } @media (min-width: 900px) { .dqhome.two { grid-template-columns: 1fr 1fr; align-items: start; } }
.dqico { width: 22px; height: 22px; flex: none; }
.dqpill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font: 800 .8rem var(--head); background: rgba(255,255,255,.18); color: var(--white); }
.dqpill.sun { background: var(--sun); color: var(--ink); } .dqpill.pink { background: var(--bubble); color: var(--white); } .dqpill.ok { background: var(--tone-leaf); color: var(--leaf-deep); }
.dqbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 99px; border: 0; font: 800 1.1rem var(--head); text-decoration: none; cursor: pointer; margin-top: 14px; }
.dqbtn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); } .dqbtn.grape { background: var(--grape); color: var(--white); box-shadow: 0 5px 0 var(--ig-edge); }
.dqbtn.royal { background: var(--royal); color: var(--white); box-shadow: 0 5px 0 var(--dq-royal-edge); } .dqbtn.ghost { background: var(--white); color: var(--royal); border: 3px solid var(--royal); min-height: 46px; }
.dqpromo { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--grape), var(--bubble)); color: var(--white); border-radius: 26px; padding: 18px; box-shadow: 0 8px 0 var(--ig-edge); }
.dqpromo h2 { font-size: 26px; margin: 10px 0 6px; color: var(--white); max-width: 15em; }
.dqpromo .dqlead { font: 700 14px var(--head); color: var(--tone-bubble); margin: 0 0 10px; max-width: 30em; }
.dqpills { display: flex; flex-wrap: wrap; gap: 6px; }
.dqbig { position: absolute; top: -8px; right: -10px; width: 120px; height: 120px; color: rgba(255,255,255,.16); }
.dqstrip { display: flex; align-items: center; gap: 12px; background: var(--tone-sun); color: var(--ink); border-radius: 18px; padding: 10px 12px; margin-top: 16px; }
.dqstrip small { display: block; font: 800 11px var(--head); color: var(--dq-gold-ink); text-transform: uppercase; letter-spacing: .04em; } .dqstrip b { font: 800 16px var(--head); }
.dqcoin { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--ink); flex: none; }
.dqrules { display: block; margin-top: 12px; color: var(--white); font-weight: 800; font-size: .9rem; }
.dqshout { position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, var(--tone-sun), var(--tone-bubble) 60%, var(--tone-sky)); border-radius: 26px; padding: 18px; color: var(--ink); }
.dqshout h2 { font-size: 24px; margin: 8px 0 2px; } .dqwho { font: 800 13px var(--head); color: var(--dq-bark); margin: 0 0 12px; }
.dqconf { position: absolute; width: 12px; height: 6px; border-radius: 2px; }
.dqconf.sun { background: var(--sun); } .dqconf.sky { background: var(--sky); } .dqconf.pink { background: var(--bubble); } .dqconf.leaf { background: var(--leaf); } .dqconf.grape { background: var(--grape); }
.dqconf.c0 { top: 14px; left: 18px; transform: rotate(25deg); } .dqconf.c1 { top: 40px; right: 26px; transform: rotate(-30deg); } .dqconf.c2 { top: 90px; left: 34px; transform: rotate(60deg); }
.dqconf.c3 { top: 20px; right: 70px; transform: rotate(10deg); } .dqconf.c4 { top: 120px; right: 16px; transform: rotate(45deg); } .dqconf.c5 { top: 64px; left: 10px; transform: rotate(-50deg); }
.dqtroph { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); margin: 12px auto 0; }
.dqtroph .dqico { width: 38px; height: 38px; }
.dqqcard { background: var(--white); border-radius: 18px; padding: 12px; text-align: left; max-width: 360px; margin: 0 auto; }
.dqqcard p { margin: 8px 0 0; font-weight: 800; } .dqqtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dqmarks { display: flex; gap: 6px; margin-top: 10px; } .dqmark { flex: 1; height: 34px; border-radius: 10px; }
.dqmark.m0 { background: var(--sun); } .dqmark.m1 { background: var(--sky); } .dqmark.m2 { background: var(--bubble); } .dqmark.m3 { background: var(--leaf); } .dqmark.m4 { background: var(--grape); } .dqmark.miss { background: var(--dq-sand); }
.dqsmall { font-size: .85rem; color: var(--dq-bark); margin: 10px 0 0; }
.dqwrap { max-width: 640px; }
.dqplay { background: var(--tone-grape); border-radius: 26px; padding: 14px; text-align: center; }
.dqbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 1.05rem var(--head); color: var(--ig-edge); }
.dqx { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--ig-edge); }
.dqring { --p: 100%; width: 92px; height: 92px; border-radius: 50%; margin: 14px auto; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--bubble) 0 var(--p), var(--white) var(--p) 100%); }
.dqring > span { width: 70px; height: 70px; border-radius: 50%; background: var(--tone-grape); display: flex; align-items: center; justify-content: center; }
.dqnum { font: 800 26px var(--head); color: var(--bubble-edge); }
.dqq { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--white); border-radius: 24px; padding: 14px; box-shadow: 0 6px 0 rgba(90,35,132,.2); }
.dqsay { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--royal); color: var(--white); cursor: pointer; }
.dqask { font: 700 20px/1.25 var(--head); margin: 0; color: var(--ink); } .dqline { font-size: 1.05rem; margin: 6px 0 0; } .dqqemo { font-size: 2.4rem; display: block; line-height: 1.1; }
.dqchips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.dqchip { min-height: 72px; border-radius: 20px; border: 0; font: 600 20px var(--head); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.dqchip.c0 { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); } .dqchip.c1 { background: var(--sky); color: var(--dq-sea); box-shadow: 0 5px 0 var(--dq-sky-edge); }
.dqchip.c2 { background: var(--bubble); color: var(--white); box-shadow: 0 5px 0 var(--bubble-edge); } .dqchip.c3 { background: var(--leaf); color: var(--white); box-shadow: 0 5px 0 var(--dq-leaf-edge); }
.dqchip:disabled { cursor: default; opacity: .55; } .dqchip.right { opacity: 1; outline: 4px solid var(--leaf-deep); outline-offset: 3px; } .dqchip.wrong { opacity: 1; outline: 4px dashed var(--apple-edge); outline-offset: 3px; }
.dqemo { font-size: 1.6rem; } .dqnote { min-height: 1.4em; font-weight: 800; color: var(--ig-edge); margin: 14px 0 0; }
.dqfoot { font: 700 12px var(--head); color: var(--ig-edge); margin: 10px 0 0; }
.dqdone { background: var(--tone-sky); border-radius: 26px; padding: 18px; text-align: center; }
.dqdone h1 { font-size: 26px; margin: 12px 0 4px; } .dqsub { font: 800 14px var(--head); color: var(--dq-navy); margin: 0 0 14px; }
.dqtick { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--leaf); color: var(--white); box-shadow: 0 5px 0 var(--dq-leaf-edge); }
.dqtick.sky { background: var(--royal); box-shadow: 0 5px 0 var(--dq-royal-edge); } .dqtick .dqico { width: 44px; height: 44px; }
.dqticket { display: flex; background: var(--white); border-radius: 18px; overflow: hidden; text-align: left; margin: 0 auto; max-width: 420px; }
.dqstub { width: 92px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sun), var(--dq-amber)); border-right: 3px dashed var(--white); color: var(--ink); }
.dqstub .dqico { width: 40px; height: 40px; } .dqticket > div { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.dqticket small { font: 800 11px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--dq-gold-ink); } .dqticket b { font: 800 16px var(--head); } .dqticket span { font-size: .9rem; color: var(--dq-navy); }
.dqform { background: var(--white); border-radius: 18px; padding: 14px; margin: 16px auto 0; max-width: 420px; text-align: left; display: grid; gap: 8px; }
.dqform h2 { font-size: 1.1rem; margin: 0; } .dqform label { display: grid; gap: 4px; font-weight: 700; } .dqform input[type=text] { min-height: 44px; border: 2px solid var(--line); border-radius: 12px; padding: 0 10px; font: inherit; }
.dqform .dqcheck { display: flex; align-items: center; gap: 8px; } .dqform .dqcheck input { width: 22px; height: 22px; } .dqform .dqbtn { margin-top: 4px; justify-self: start; } .dqsaved { margin: 0; font-weight: 800; color: var(--leaf-deep); min-height: 1.2em; }
.dqclock { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 16px; padding: 10px 12px; margin: 16px auto 0; max-width: 420px; text-align: left; font-weight: 700; color: var(--dq-navy); }
.dqdone .dqshout { margin-top: 16px; }
/* T-468 (D-113): fun sells the books. Home fun band, the daily quiz card, the book badge and filter, the How our books help band. */
.fsband { position: relative; overflow: hidden; display: grid; grid-template-areas: "top" "games" "rest"; gap: 16px; padding: 22px 18px; border-radius: 26px; background: linear-gradient(150deg, var(--grape), var(--bubble)); color: var(--white); box-shadow: 0 8px 0 var(--ig-edge); }
.fstop { grid-area: top; position: relative; } .fsgames { grid-area: games; position: relative; } .fsrest { grid-area: rest; position: relative; display: grid; gap: 12px; }
.fsnew { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 .8rem var(--body); }
.fstop h2 { margin: 10px 0 6px; color: var(--white); font-size: 1.7rem; line-height: 1.15; }
.fslead { margin: 0; color: var(--tone-bubble); font-weight: 700; } .fswide { display: none; }
.fsspark { position: absolute; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); opacity: .8; }
.fsspark.a { top: 14px; right: 22px; background: var(--sun); } .fsspark.b { top: 46%; right: 10px; width: 7px; height: 7px; background: var(--tone-sky); }
.fsspark.c { bottom: 18px; left: 12px; width: 8px; height: 8px; background: var(--tone-bubble); } .fsspark.d { top: 10px; left: 46%; width: 6px; height: 6px; background: var(--tone-leaf); }
.fsgames { display: flex; gap: 10px; padding-bottom: 6px; }
.fsgame { flex: 1 1 0; min-width: 0; max-width: 190px; border-radius: 18px; background: var(--paper); color: var(--ink); overflow: hidden; text-decoration: none; box-shadow: 0 5px 0 rgba(0,0,0,.18); display: flex; flex-direction: column; }
.fspic { position: relative; height: 84px; display: grid; place-items: center; background: var(--tone-sun); }
.fspic img { width: 100%; height: 100%; object-fit: cover; } .fsemoji { font-size: 2.2rem; }
.fsfree { position: absolute; left: 6px; top: 6px; padding: 2px 9px; border-radius: 99px; background: var(--leaf-deep); color: var(--white); font: 800 .72rem var(--body); }
.fslock { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--dq-bark); color: var(--white); display: grid; place-items: center; }
.fsgame b { padding: 7px 9px 9px; font: 600 .85rem/1.2 var(--head); }
.fsfeats { display: grid; gap: 8px; }
.fsfeat { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.14); border-radius: 16px; padding: 9px 11px; }
.fsfeat b { display: block; font: 600 .95rem/1.2 var(--head); } .fsfeat span { font: 700 .78rem/1.3 var(--body); color: var(--tone-bubble); }
.fsfi { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); } .fsfi.sun { background: var(--sun); } .fsfi.sky { background: var(--tone-sky); }
.fsfi.sky svg { fill: currentColor; stroke: none; }
.fsacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fsplay { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 1.05rem var(--head); text-decoration: none; box-shadow: 0 5px 0 var(--sun-edge); }
.fsbooks { color: var(--white); font-weight: 800; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .fsband { grid-template-columns: 1fr 1.15fr; grid-template-areas: "top games" "rest games"; align-items: center; gap: 18px 36px; padding: 32px 40px; }
  .fstop h2 { font-size: 2.5rem; } .fswide { display: inline; }
  .fsgames { justify-content: flex-end; } .fsgame { flex: 0 1 190px; } .fspic { height: 140px; }
}
.dqhome2 { display: grid; gap: 14px; }
.dqtoday { display: grid; grid-template-areas: "top" "q" "chips" "act"; gap: 12px; padding: 16px; border-radius: 26px; background: var(--paper); border: 3px solid var(--tone-sky); box-shadow: 0 6px 0 rgba(0,88,176,.18); }
.dqttop { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dqtq { grid-area: q; } .dqtchips { grid-area: chips; } .dqtact { grid-area: act; }
.dqpill.royal { background: var(--royal); color: var(--white); }
.dqwig { width: 40px; height: 40px; color: var(--sun-edge); display: grid; place-items: center; } .dqwig .dqico { width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) { .dqwig { animation: dqwig 2.6s ease-in-out infinite; } }
@keyframes dqwig { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
.dqtask { margin: 0; font: 600 1.3rem/1.25 var(--head); color: var(--ink); } .dqtsent { margin: 6px 0 0; font-weight: 700; color: var(--ink-soft); }
.dqtchips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dqtchips li { min-height: 46px; padding: 4px 8px; border-radius: 14px; display: grid; place-items: center; text-align: center; font: 600 1.05rem/1.15 var(--head); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.dqtchips .c0 { background: var(--sun); color: var(--ink); } .dqtchips .c1 { background: var(--sky); color: var(--dq-sea); }
.dqtchips .c2 { background: var(--bubble); color: var(--white); } .dqtchips .c3 { background: var(--dq-leaf-edge); color: var(--white); }
.dqtact .dqbtn { display: flex; width: 100%; margin-top: 4px; }
.dqtoday .dqnote { margin: 12px 0 0; min-height: 0; color: var(--ink-soft); font-weight: 700; font-size: .85rem; }
.dqtoday .dqrules { color: var(--royal); margin-top: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.dqside { display: grid; gap: 12px; align-content: start; }
.dqnews { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--tone-sun); border-radius: 16px; padding: 10px 12px; }
.dqmail { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; } .dqmail .dqico { width: 22px; height: 22px; }
.dqnewsw { flex: 1 1 150px; min-width: 0; } .dqnewsw b { display: block; font: 600 1rem/1.2 var(--head); } .dqnewsw span { font: 700 .8rem/1.3 var(--body); color: var(--ink-soft); }
.dqerr { margin: 4px 0 0; color: var(--bubble); font-weight: 800; font-size: .85rem; } .dqerr:empty { display: none; }
.dqsignup, .dqstop { flex: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; font: 800 .95rem var(--head); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.dqsignup { background: var(--leaf-deep); color: var(--white); box-shadow: 0 4px 0 var(--dq-leaf-edge); } .dqstop { background: var(--white); color: var(--ink); border: 2px solid var(--line); }
.dqwin { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--paper); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 0 var(--line); }
.dqwin b { font: 600 1rem var(--head); } .dqwd { display: none; }
@media (min-width: 900px) {
  .dqhome2 { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .dqtoday { grid-template-columns: 1fr 220px; grid-template-areas: "top chips" "q chips" "act chips"; column-gap: 20px; padding: 22px; }
  .dqtchips { grid-template-columns: 1fr; align-self: center; } .dqtact .dqbtn { width: auto; }
  .dqnw { display: none; } .dqwd { display: inline; }
}
.fb { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 6px; border-radius: 99px; background: var(--grape); color: var(--white); font: 800 .7rem/1 var(--body); white-space: nowrap; box-shadow: 0 3px 0 var(--ig-edge); }
.fb svg { fill: currentColor; stroke: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 800 .9rem var(--body); cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--grape); border-color: var(--grape); color: var(--white); } .fchip svg { fill: currentColor; stroke: none; }
.ticks li.fsplayit { background: var(--tone-grape); border-left: 6px solid var(--grape); border-radius: 14px; padding: 10px 12px; }
.fslearn { margin: 24px 0; padding: 22px 18px; border-radius: 26px; background: linear-gradient(150deg, var(--grape), var(--bubble)); color: var(--white); box-shadow: 0 8px 0 var(--ig-edge); }
.fslearn h3 { margin: 0 0 6px; color: var(--white); } .fslearn p { color: var(--tone-bubble); font-weight: 700; }
.fspills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .fspills span { padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.18); font: 800 .85rem var(--body); }

/* T-452 (D-107) phonics practice: the level path, a level's sounds, and the play screen (mockups-2026-10-09/Phonics.html screens 1-3). */
.funphonics { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--white); border: 2px solid var(--tone-bubble); box-shadow: var(--shadow); text-decoration: none; min-height: var(--tap); }
.funphonics svg { width: 30px; height: 30px; flex: none; color: var(--bubble); } .funphonics strong { display: block; font: 800 1.05rem var(--head); color: var(--bubble-edge); } .funphonics span span { color: var(--ink-soft); font-size: .92rem; }
.phwrap { max-width: 640px; }
.phico { width: 22px; height: 22px; flex: none; } .phico.small { width: 15px; height: 15px; vertical-align: -2px; }
.phhud { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.phhud h1 { margin: 0; flex: 1; font-size: 1.6rem; }
.phhead { flex: 1; min-width: 0; } .phhead h1 { font-size: 1.3rem; line-height: 1.2; }
.phkicker { display: block; font: 800 .78rem var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.phstars { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; background: var(--tone-sun); color: var(--dq-gold-ink); font: 800 1rem var(--body); }
.phstars .phico { width: 18px; height: 18px; color: var(--sun-edge); }
.phback { width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.phlead { margin: 0 0 12px; color: var(--ink-soft); }
.phguest { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--tone-sky); font-size: .92rem; } .phguest a { font-weight: 800; color: var(--royal); }
.phtrack { margin: 0 0 18px; }
.phtname { margin: 0 0 8px; font: 800 .82rem var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--leaf-deep); }
.phtrack.pink .phtname { color: var(--bubble-edge); } .phtrack.royal .phtname { color: var(--dq-navy); } .phtrack.grape .phtname { color: var(--ig-edge); }
.phlevel { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 12px 14px; border-radius: 20px; border: 2px solid transparent; background: var(--white); box-shadow: var(--shadow); color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-height: 64px; }
.phnode { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-deep); color: var(--white); font: 800 1.1rem var(--head); }
.phlevel.pink .phnode { background: var(--bubble); } .phlevel.royal .phnode { background: var(--royal); } .phlevel.grape .phnode { background: var(--grape); }
.phlevel.done .phnode { background: var(--leaf-deep); }
.phltext { flex: 1; min-width: 0; display: flex; flex-direction: column; } .phltext b { font: 800 1.02rem var(--head); }
.phbook { font-size: .86rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phsub { font-size: .82rem; font-weight: 700; color: var(--dq-gold-ink); } .phsub .phico { color: var(--sun-edge); }
.phlevel.now { border-color: var(--sun); box-shadow: 0 0 0 4px var(--tone-sun), var(--shadow); }
.phnow { padding: 4px 10px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 800 .8rem var(--body); }
.phfree { padding: 3px 9px; border-radius: 99px; background: var(--tone-leaf); color: var(--leaf-deep); font: 800 .76rem var(--body); }
.phlevel.locked, .phlevel.soon { opacity: .75; } .phlevel.soon { cursor: default; } .phlk { color: var(--ink-soft); }
.phgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.phsnd { min-height: 76px; border-radius: 18px; border: 2px solid var(--sun); background: var(--white); color: var(--dq-gold-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; font: inherit; cursor: pointer; }
.phsnd b { font: 800 1.25rem var(--head); line-height: 1.1; word-break: break-word; text-align: center; } .phsnd span { font-size: .74rem; font-weight: 700; text-align: center; }
.phsnd.sky { border-color: var(--sky); color: var(--dq-sky-edge); } .phsnd.grape { border-color: var(--grape); color: var(--grape); } .phsnd.royal { border-color: var(--royal); color: var(--royal); } .phsnd.pink { border-color: var(--bubble); color: var(--bubble); }
.phsnd.done { background: var(--leaf-deep); border-color: var(--leaf-deep); color: var(--white); }
.phsnd.now { background: var(--bubble); border-color: var(--bubble); color: var(--white); box-shadow: 0 0 0 4px var(--sun); }
.phsnd.locked { opacity: .7; border-style: dashed; }
.phsnd.sel { outline: 3px solid var(--ink); outline-offset: 2px; }
.phpanel { padding: 16px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.phpanel h2 { margin: 0 0 10px; font-size: 1.15rem; }
.phsteps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.phsteps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border: 2px solid var(--line); }
.phsteps li > span:last-child { display: flex; flex-direction: column; font-size: .86rem; color: var(--ink-soft); } .phsteps b { color: var(--ink); font-size: .98rem; }
.phnum { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cream); font: 800 .95rem var(--head); }
.phnum .phico { width: 16px; height: 16px; }
.phsteps li.done { background: var(--tone-leaf); border-color: var(--tone-leaf); } .phsteps li.done .phnum { background: var(--leaf-deep); color: var(--white); }
.phsteps li.now { background: var(--tone-bubble); border-color: var(--bubble); } .phsteps li.now .phnum { background: var(--bubble); color: var(--white); }
.phgo, .phnext { width: 100%; }
.phlock { text-align: center; padding: 8px 0 0; } .phlock > .phico { width: 34px; height: 34px; color: var(--ink-soft); }
.phacts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.phplay { padding: 14px; border-radius: 26px; background: var(--tone-bubble); }
.phdots { flex: 1; display: flex; justify-content: center; gap: 8px; }
.phdots span { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); } .phdots span.done { background: var(--leaf); border-color: var(--leaf-deep); } .phdots span.now { background: var(--bubble); border-color: var(--bubble-edge); }
.phsoundpill { padding: 6px 12px; border-radius: 99px; background: var(--white); color: var(--bubble-edge); font: 800 1rem var(--head); }
.phstep { margin: 4px 0 2px; font-size: 1.3rem; text-align: center; } .phhint { margin: 0 0 12px; text-align: center; color: var(--ink-soft); }
.phnote { grid-column: 1 / -1; margin: 0 0 4px; text-align: center; font-weight: 700; min-height: 1.5em; }
.phcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.phcard { min-height: 92px; border-radius: 18px; border: 2px solid var(--line); background: var(--white); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.phcard b { font: 800 1.1rem var(--head); } .phemoji { font-size: 2rem; line-height: 1; } .phemoji.big { font-size: 4.5rem; }
.phcard.right { border-color: var(--leaf-deep); background: var(--tone-leaf); }
.phbuild { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phpic { width: 190px; height: 170px; max-width: 100%; border-radius: var(--radius); background: var(--white); display: grid; place-items: center; box-shadow: var(--shadow); }
.phq { font: 800 4rem var(--head); color: var(--line); }
.phhear { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 18px; border-radius: 99px; border: 0; background: var(--royal); color: var(--white); font: 800 1rem var(--body); box-shadow: 0 4px 0 var(--royal-edge); cursor: pointer; }
.phslots, .phpool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.phslot { width: 74px; height: 74px; border-radius: 18px; border: 3px dashed var(--leaf); background: rgba(255,255,255,.6); display: grid; place-items: center; font: 800 1.6rem var(--head); }
.phslot.over { background: var(--tone-leaf); }
.phslot.full { border-style: solid; border-color: transparent; color: var(--ink); box-shadow: 0 4px 0 rgba(80, 42, 19, .25); }
.phslot.full.sun { background: var(--sun); } .phslot.full.sky { background: var(--sky); } .phslot.full.grape { background: var(--grape); color: var(--white); }
.phlabel { margin: 4px 0 0; font: 800 .8rem var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.phtile { width: 74px; height: 74px; border-radius: 18px; border: 0; background: var(--sun); color: var(--ink); font: 800 1.6rem var(--head); box-shadow: 0 5px 0 var(--sun-edge); cursor: grab; touch-action: none; user-select: none; }
.phtile.sky { background: var(--sky); box-shadow: 0 5px 0 var(--dq-sky-edge); } .phtile.grape { background: var(--grape); color: var(--white); box-shadow: 0 5px 0 var(--ig-edge); }
.phtile.dragging { position: relative; z-index: 5; cursor: grabbing; box-shadow: 0 10px 18px rgba(80, 42, 19, .3); }
.phtile.back { transition: transform 300ms var(--fun-spring); }
.phtile.used { visibility: hidden; }
.phcheer { font: 800 1.6rem var(--head); color: var(--leaf-deep); margin: 30px 0; }
.phread { display: grid; gap: 10px; }
.phline { display: block; width: 100%; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--white); color: var(--ink); text-align: left; font: 700 1.25rem/1.6 var(--body); cursor: pointer; }
.phline .phico { margin-left: 6px; color: var(--royal); }
.phmark { color: var(--bubble-edge); text-decoration: underline dotted var(--bubble); text-decoration-thickness: 3px; text-underline-offset: 6px; font-weight: 800; }
.phflash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.phfc { position: relative; min-height: 84px; border-radius: 18px; border: 0; color: var(--ink); font: 800 1.15rem var(--head); cursor: pointer; box-shadow: var(--shadow); }
.phfc.sun { background: var(--tone-sun); } .phfc.sky { background: var(--tone-sky); } .phfc.grape { background: var(--tone-grape); } .phfc.royal { background: var(--tone-royal); } .phfc.pink { background: var(--tone-bubble); }
.phfc .phbackface { display: none; } .phfc.flipped .phfront { display: none; } .phfc.flipped .phbackface { display: inline; } .phfc.flipped { background: var(--white); outline: 2px solid var(--line); }
.phfront { color: var(--ink-soft); }
.phfoot { margin-top: 16px; }
.phend { text-align: center; padding: 24px 12px; border-radius: 26px; background: var(--tone-sun); }
.phbig .phico { width: 72px; height: 72px; color: var(--sun-edge); }
.phpop { animation: funbounce var(--fun-right) var(--fun-spring); } .phwobble { animation: funwiggle var(--fun-wrong) ease-in-out; }
@media (min-width: 700px) { .phcards { grid-template-columns: repeat(3, 1fr); } .phflash { grid-template-columns: repeat(4, 1fr); } .phgrid { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .phpop, .phwobble { animation: none; } .phtile.back { transition: none; } }

/* T-491 quiz contests (/contest, and the offer line on /fun) */
.qcwrap { padding-top: 16px; padding-bottom: 48px; }
.qchead { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .qchead h1 { margin: 0; } .qclead { margin: 4px 0 0; color: var(--ink-soft); }
.qctroph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-edge); } .qctroph .dqico { width: 34px; height: 34px; }
.qcruns { display: grid; gap: 16px; } .qcnone { font-weight: 700; color: var(--ink-soft); }
.qccard { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.qccard.live { border-color: var(--leaf); } .qccard h2 { margin: 10px 0 2px; font-size: 1.3rem; } .qctop { display: flex; flex-wrap: wrap; gap: 8px; }
.qccard .dqpill.ok { background: var(--tone-leaf); color: var(--leaf-deep); }
.qctime { margin: 0; color: var(--ink-soft); font-weight: 700; }
.qcoffer { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 800; color: var(--grape); } .qcoffer .dqico { flex: none; width: 22px; height: 22px; }
.qcshout { margin-top: 12px; background: var(--tone-bubble); border-radius: var(--radius-sm); padding: 10px 14px; } .qcshout ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font: 800 1.05rem var(--head); }
.qcmine { display: grid; gap: 2px; margin-top: 12px; background: var(--tone-sky); border-radius: var(--radius-sm); padding: 10px 14px; } .qcmine span { color: var(--dq-navy); font-weight: 700; }
.qcjoin .dqform select { min-height: 44px; border: 2px solid var(--line); border-radius: 12px; padding: 0 10px; font: inherit; background: var(--white); }
.qcpic { display: block; max-width: 100%; max-height: 180px; border-radius: var(--radius-sm); margin: 0 auto 8px; }
.dqchip .qcpic { max-height: 64px; margin: 0; } .dqchip .dqqemo { font-size: 1.8rem; }
.qcline { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; background: var(--tone-grape); border-radius: var(--radius); padding: 12px 16px; }
.qcline .qcoffer { margin: 0; }
.qcgo { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: 99px; background: var(--grape); color: var(--white); font: 800 1rem var(--head); text-decoration: none; box-shadow: 0 4px 0 var(--ig-edge); }
.qcgo .dqico { width: 20px; height: 20px; }

/* T-594: WhatsApp green pill with its white glyph; code box and new-person card per the approved look. */
.btn.waicon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border-radius: 99px; }
.wmark { display: inline-flex; } .gmark svg { width: 20px; height: 20px; }
.signin #use-wa { margin: 8px 0; }
#wa-code { letter-spacing: .5em; text-align: center; font-size: 1.3rem; min-height: 44px; border: 2px solid var(--field-edge); border-radius: 12px; }
#wa-more { background: linear-gradient(135deg, var(--pink-a), var(--pink-b)); border: 3px solid var(--pink-edge); border-radius: 22px; box-shadow: 0 6px 0 var(--pink-shadow); padding: 16px; margin-top: 8px; }

/* T-596: choosing WhatsApp fades the other ways away; a small welcome / goodbye card (reduced motion: no movement, same end state). */
.signin > * { transition: opacity .3s ease, transform .3s ease, max-height .3s ease, margin .3s ease; max-height: 900px; }
.signin.wa-focus > :not(#wa-sec) { opacity: 0; transform: translateY(-10px); max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
.toast.greet { background: linear-gradient(180deg, var(--cream), var(--sun)); color: var(--ink); border: 3px solid var(--sun-edge); border-radius: 22px; box-shadow: 0 6px 0 var(--sun-edge); font-weight: 800; padding: 12px 20px; }
.toast.greet::before { content: '
F44B  '; } .toast.greet.hello::before { content: '
F389  '; }
@media (prefers-reduced-motion: no-preference) { .toast.greet.show { animation: greet-in .35s ease-out; } }
@keyframes greet-in { from { transform: translateX(-50%) translateY(16px) scale(.9); } to { transform: translateX(-50%); } }

.signin.wa-focus #wa-sec > .or-line { display: none; }
#other-ways { display: block; margin: 8px auto 0; }

/* T-625 (D-144): offers row uses .docards/.docard/.tone-*; the sticky buy bar shows on phones only. */
.offercard a { color: inherit; text-decoration: underline; }
.stickybuy { display: none; }
@media (max-width: 719px) {
  .stickybuy { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; z-index: 20; padding: 10px 16px; background: var(--cream); border-top: 3px solid var(--sun); }
}
.offers-title { margin: 14px 0 6px; font-size: 1.1rem; }

/* T-661 (D-149): prize bar, home carousel (hero always slide 1) and the live quizzes row. Theme tokens only (CR-cc-001 F1-F7). */
.prizebar { background: linear-gradient(90deg, var(--sun), var(--sub-pink) 55%, var(--sub-blue)); color: var(--ink); border-bottom: 2px solid var(--line); font-weight: 800; }
.prizebar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; text-align: center; }
.prizebar a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: 99px; background: var(--ink); color: var(--white); text-decoration: none; font: 800 1rem var(--head); }
.car { display: grid; }
.car > .slide { grid-area: 1 / 1; transition: opacity .5s, visibility .5s; }
.car > .slide:not(.on) { opacity: 0; visibility: hidden; }
.s-quiz { display: flex; align-items: center; background: linear-gradient(135deg, var(--tone-grape) 0%, var(--tone-bubble) 55%, var(--sub-blue) 100%); border-bottom: 6px dotted var(--sun); }
.s-offer { display: flex; align-items: center; background: linear-gradient(135deg, var(--tone-sun) 0%, var(--sub-pink) 60%, var(--tone-bubble) 100%); border-bottom: 6px dotted var(--sun); }   /* T-676 (D-149 v4) */
.s-offer .dates { font-weight: 800; margin: 0; }
.s-quiz .wrap, .s-offer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding-top: 24px; padding-bottom: 24px; }
.s-quiz .txt, .s-offer .txt { display: grid; gap: 8px; justify-items: start; max-width: 60%; }
.s-quiz .kind, .s-offer .kind { background: var(--ink); color: var(--white); border-radius: 99px; padding: 2px 12px; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.s-quiz h2, .s-offer h2 { font-size: 2rem; margin: 0; }
.s-quiz .art, .s-offer .art { flex: none; width: 150px; height: 150px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-size: 76px; box-shadow: var(--shadow); }
.car-dots { grid-area: 2 / 1; display: flex; justify-content: center; }
.car-dots button { width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.car-dots button::before { content: ""; width: 12px; height: 12px; border-radius: 99px; background: var(--line); transition: width .2s; }
.car-dots button.on::before { width: 24px; background: var(--ink); }
.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: var(--tap); height: var(--tap); border-radius: 99px; border: 3px solid var(--line); background: var(--paper); color: var(--ink); font: 800 1.3rem var(--head); cursor: pointer; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.track > * { scroll-snap-align: start; }
.qcard { background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.qcard .qart { height: 112px; display: grid; place-items: center; font-size: 58px; background: linear-gradient(160deg, var(--tone-grape), var(--tone-bubble)); }
.qcard .qbody { display: grid; gap: 8px; justify-items: start; padding: 14px 16px 18px; }
.qcard h3 { margin: 0; }
@media (min-width: 860px) { .track { grid-auto-columns: calc((100% - 28px) / 3); } }
@media (max-width: 560px) {
  .s-quiz .wrap, .s-offer .wrap { flex-direction: column-reverse; align-items: flex-start; }
  .s-quiz .txt, .s-offer .txt { max-width: 100%; }
  .s-quiz .art, .s-offer .art { width: 96px; height: 96px; font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .car > .slide, .car-dots button::before { transition: none; } }
/* T-661: the quiz page parts (gallery/quiz-v4.html): parts with headings, the coming-soon date tile, the podium, Before you play, A-D answers, the clock. */
.qcsec { display: grid; gap: 12px; } .qcsec > h2 { margin: 0; font-size: 1.3rem; }
.qcgrid { display: grid; gap: 16px; } @media (min-width: 760px) { .qcgrid { grid-template-columns: 1fr 1fr; } }
.qccal .qccard { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; } .qccal .qccard > :not(.qcday) { grid-column: 2; }
.qcday { grid-row: 1 / span 4; width: 60px; border-radius: var(--radius-sm); background: var(--tone-sky); color: var(--ink); text-align: center; padding: 6px 0; font-family: var(--head); }
.qcday b { display: block; font-size: 1.6rem; line-height: 1.1; } .qcday span { font-size: .85rem; font-weight: 800; text-transform: uppercase; }
.qcshout { background: var(--white); border: 2px solid var(--line); }
.podium { list-style: none; margin: 8px 0 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px; text-align: center; }
.podium li { width: 96px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 8px 4px; font-size: .875rem; display: grid; align-content: start; gap: 2px; color: var(--ink); }
.podium li b { font: 800 1rem var(--head); overflow-wrap: anywhere; } .podium li > span:first-child { font-size: 1.5rem; }
.podium .p1 { background: var(--tone-sun); min-height: 120px; } .podium .p2 { background: var(--tone-sky); min-height: 96px; } .podium .p3 { background: var(--tone-bubble); min-height: 80px; }
.qcbefore { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 16px auto 0; max-width: 420px; text-align: left; color: var(--ink); }
.qcbefore h2 { font-size: 1.1rem; margin: 0 0 6px; } .qcbefore ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.qopts { display: grid; gap: 10px; max-width: 520px; margin: 16px auto 0; }
.opt { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--white); font: 700 1rem var(--body); color: var(--ink); text-align: left; cursor: pointer; }
.opt .ol { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-sky); font-family: var(--head); }
.opt .qcpic { max-height: 48px; margin: 0; } .opt .dqqemo, .opt .dqemo { font-size: 1.6rem; } .opt .omark { margin-left: auto; font-weight: 800; }
.opt:disabled { cursor: default; } .opt.right { background: var(--ok-bg); border-color: var(--leaf-deep); color: var(--ok-ink); } .opt.wrong { background: var(--no-bg); border-color: var(--apple-edge); color: var(--apple-edge); }
.qcclock { background: var(--white); color: var(--ink); font-variant-numeric: tabular-nums; }

/* T-682 part 5: the quiz look v5 (mockup T-681, D-153 points 5-7). Theme tokens only. */
.q-h1 { font: 800 1.9rem/1.15 var(--head); margin: 0; }
.q-h2 { font: 800 1.3rem/1.2 var(--head); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.q-sub { color: var(--ink-soft); margin: 4px 0 0; }
.q-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.q-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: 99px; background: var(--paper); border: 2px solid var(--line); font-weight: 800; font-size: .9rem; }
.q-chip.live { background: var(--apple); border-color: var(--apple); color: var(--white); }
.q-card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .q-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q-grid.two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.q-btn-full { width: 100%; }
.q-note { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 700; }
.q-note .e { font-size: 1.4rem; line-height: 1; }
.q-note.sun { background: var(--tone-sun); border: 2px solid var(--sun-edge); }
.q-note.sky { background: var(--tone-sky); border: 2px solid var(--line); }
.q-dates { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 800; font-size: .95rem; }
/* hero */
.q-hero { background: var(--tone-grape); border-radius: var(--radius); padding: 18px 16px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.q-hero img { width: 92px; height: auto; flex: none; }
@media (min-width: 900px) { .q-hero { padding: 26px 30px; } .q-hero img { width: 140px; } .q-h1 { font-size: 2.5rem; } }
/* live quiz cards */
/* T-682 part 6: one card grid, full width. 1 card across on a phone, 2 from 720px, 3 from 1024px; cards in a row share a height. */
.q-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (min-width: 720px) { .q-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .q-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.q-band { margin-bottom: 14px; }
/* part 7: Quizzes / My quizzes tabs, a tick on each card, Select all and one share bar */
.q-tabs { display: flex; gap: 8px; margin: 4px 0 6px; border-bottom: 2px solid var(--line); }
.q-tab { min-height: var(--tap); padding: 0 16px; border: 2px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; color: var(--ink-soft); font: 800 1rem var(--head); cursor: pointer; margin-bottom: -2px; }
.q-tab[aria-selected="true"] { background: var(--paper); border-color: var(--line); color: var(--ink); border-bottom: 2px solid var(--paper); }
/* CR-website-117 Q2: the picked tab also shows by a sun line on top and heavier type, not by fill only. */
.q-tab[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--sun); font-weight: 900; }
.q-tab:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.q-tick { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); cursor: pointer; }
.q-tick input { width: 26px; height: 26px; accent-color: var(--royal); }
.q-pickall { margin: 0 0 10px; }
.q-sharebar { position: sticky; bottom: 0; z-index: 4; margin-top: 14px; background: var(--paper); border-top: 4px solid var(--sun); padding: 10px var(--gutter); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-weight: 800; }
.q-sharebar[hidden] { display: none; }
/* CR-website-117 Q1: on a phone the bar sits above the bottom nav so Share can be tapped. */
@media (max-width: 719px) { body.has-mbar .q-sharebar { bottom: calc(76px + env(safe-area-inset-bottom)); } body.has-mbar #qc-mine { padding-bottom: 8px; } }
.q-sharebar .qc-share-out { width: 100%; }
.qc-won { display: grid; gap: 6px; font-weight: 800; }
.qc-won p { margin: 0; }
.q-qc { border-radius: var(--radius); border: 2px solid var(--line); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.q-qc.sun { background: var(--tone-sun); } .q-qc.sky { background: var(--tone-sky); } .q-qc.bubble { background: var(--tone-bubble); } .q-qc.leaf { background: var(--tone-leaf); }
.q-qc .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.q-art { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 2rem; border: 2px solid var(--line); flex: none; }
.q-qc h3 { font: 800 1.35rem/1.2 var(--head); margin: 0; }
.q-meta { display: grid; gap: 4px; font-weight: 700; }
.q-meta span { display: flex; gap: 8px; align-items: center; }
.q-joined b { font-family: var(--head); font-size: 1.1rem; }
.q-qc .q-foot { margin-top: auto; display: grid; gap: 8px; }
.q-qc .q-foot:empty { display: none; }
.q-qc.over { background: var(--paper); }
/* coming soon */
.q-soon { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.q-day { flex: none; min-width: 120px; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.q-day b { display: block; font-family: var(--head); }
/* podium */
.q-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; text-align: center; }
.q-pod .p { border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 10px 4px 12px; font-weight: 800; }
.q-pod .p .m { font-size: 1.8rem; display: block; }
.q-pod .p small { display: block; font-weight: 700; color: var(--ink-soft); }
.q-pod .p1 { background: var(--sun); min-height: 150px; } .q-pod .p2 { background: var(--tone-sky); min-height: 120px; } .q-pod .p3 { background: var(--tone-bubble); min-height: 100px; }
/* rules */
.q-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-rule { text-align: center; border-radius: var(--radius-sm); padding: 12px 6px; font-weight: 800; }
.q-rule .e { font-size: 1.8rem; display: block; }
.q-rule b { display: block; font: 800 1.3rem var(--head); }
.q-rule.a { background: var(--tone-sun); } .q-rule.b { background: var(--tone-sky); } .q-rule.c { background: var(--tone-leaf); }
.q-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-weight: 700; }
.q-list li { display: flex; gap: 10px; align-items: flex-start; }
details.q-more { border-top: 2px dashed var(--line); padding-top: 8px; }
details.q-more summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; color: var(--royal); }
/* playing */
.q-play { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; }
.q-top { display: flex; align-items: center; gap: 12px; }
.q-prog { flex: 1; height: 14px; border-radius: 99px; background: var(--paper); border: 2px solid var(--line); overflow: hidden; }
.q-prog i { display: block; height: 100%; background: var(--leaf); border-radius: 99px; }
.q-clock { flex: none; min-width: 64px; min-height: var(--tap); display: grid; place-items: center; border-radius: 99px; background: var(--apple); color: var(--white); font: 800 1.1rem var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-timer] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-qbox { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px; text-align: center; }
.q-qbox .pic { font-size: 3.4rem; line-height: 1.1; }
.q-qbox p { font: 800 1.4rem/1.3 var(--head); margin: 8px 0 0; }
.q-ans { display: grid; gap: 10px; }
@media (min-width: 600px) { .q-ans { grid-template-columns: 1fr 1fr; } }
.q-a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 8px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); box-shadow: 0 4px 0 var(--line); font: 800 1.15rem var(--body); color: var(--ink); cursor: pointer; text-align: left; }
.q-a .l { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-family: var(--head); flex: none; }
.q-a:nth-child(1) .l { background: var(--royal); } .q-a:nth-child(2) .l { background: var(--bubble); } .q-a:nth-child(3) .l { background: var(--leaf-deep); } .q-a:nth-child(4) .l { background: var(--grape); }
.q-a.pick { border-color: var(--royal); background: var(--tone-royal); box-shadow: 0 4px 0 var(--royal-edge); }
/* you're in */
.q-yay { text-align: center; display: grid; gap: 12px; justify-items: center; }
.q-big { font-size: 4rem; line-height: 1; }
.q-score { display: inline-flex; align-items: baseline; gap: 6px; font: 800 2.6rem var(--head); }
.q-score small { font-size: 1.1rem; color: var(--ink-soft); }
/* T-699 you're in: one wide card (cheer | prize and share), then shop tiles across the page */
.qc-done { display: grid; gap: calc(var(--gap) * 1.5); }
.qc-hero { display: grid; gap: var(--gap); text-align: left; justify-items: stretch; border: 2px solid var(--line); box-shadow: var(--shadow); }
.qc-hero.sun { background: var(--tone-sun); } .qc-hero.sky { background: var(--tone-sky); } .qc-hero.bubble { background: var(--tone-bubble); } .qc-hero.leaf { background: var(--tone-leaf); }
.qc-hero-a { display: grid; gap: 8px; justify-items: center; text-align: center; }
.qc-hero-b { display: grid; gap: 12px; align-content: start; min-width: 0; }
.q-note.qc-prizeline { background: var(--paper); } .qc-prizeline b { font-family: var(--head); font-size: 1.15rem; }
@media (min-width: 900px) { .qc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; padding: calc(var(--gap) * 1.5); } }
.qc-wait .q-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* capture */
.q-catch { background: var(--tone-leaf); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.q-catch label { font-weight: 800; display: grid; gap: 6px; }
.q-catch input { min-height: 52px; border-radius: var(--radius-sm); border: 2px solid var(--field-line); background: var(--paper); padding: 0 14px; font: 700 16px var(--body); color: var(--ink); }
.q-catch .row { display: grid; gap: 10px; }
@media (min-width: 600px) { .q-catch .row { grid-template-columns: 1fr auto; } }
.q-over { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--ink); color: var(--white); border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
.q-big { animation: q-pop var(--fun-pop) var(--fun-spring) both; }
@keyframes q-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
.qcwrap .q-hero h1 { margin: 0; }
.q-a.ok { border-color: var(--leaf-deep); background: var(--tone-leaf); box-shadow: 0 4px 0 var(--leaf-deep); }
.q-a.no { border-color: var(--apple); background: var(--tone-bubble); box-shadow: 0 4px 0 var(--apple); }
.q-a:disabled { cursor: default; }
.q-titlerow { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.q-card > * + * { margin-top: 12px; } .q-yay > * + * { margin-top: 0; }
.q-prize .q-h2 { margin-top: 0; } .q-big-line { font: 800 1.3rem/1.3 var(--head); margin: 0; }
.q-playhead { display: flex; align-items: center; gap: 10px; }
.q-sub.small { font-size: .9rem; } .q-shout { margin-top: 4px; } .q-shout .q-list { margin-top: 10px; }
.q-over .btn { background: var(--sun); color: var(--ink); }
.qc-share { display: grid; gap: 6px; width: 100%; }
.qc-share .row { display: flex; flex-wrap: wrap; gap: 8px; }
/* CR-website-117 Q3-Q5: steady numbers, the time stays on one line, share buttons stack on a phone. */
.qcmine, .q-score, [data-timer] { font-variant-numeric: tabular-nums; }
.qcend { white-space: nowrap; }
@media (max-width: 479px) { .qc-share .row { flex-direction: column; } .qc-share .row > * { width: 100%; } }
.qc-coming { margin: 0; }
#qc-back { margin-bottom: 12px; } #qc-fun { margin-top: 18px; }