/* Puzzle owns its product palette; shared navigation remains in site-nav.css. */
@font-face { font-family: PuzzleTitle; src: url('../fonts/puzzle/tibumo-title-font.otf') format('opentype'); font-display: swap; }
@font-face { font-family: PuzzleNunito; src: url('../fonts/puzzle/nunito-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: PuzzleNunito; src: url('../fonts/puzzle/nunito-bold.ttf') format('truetype'); font-weight: 700 900; font-display: swap; }
html:has(.puzzle-page), html[data-theme='light']:has(.puzzle-page) { --bg: #E8F5FF; --text: #344259; --text-secondary: #344259; --surface: #FFFFFF; --puzzle-fifth: #FF69B4; --font: PuzzleNunito, Nunito, sans-serif; --display-font: PuzzleTitle, PuzzleNunito, sans-serif; --brand-font: PuzzleTitle, PuzzleNunito, sans-serif; --primary: #8D2AD2; --border: rgba(52,66,89,.18); }
html[data-theme='dark']:has(.puzzle-page) { --bg: #111F32; --text: #EEF6FF; --text-secondary: #EEF6FF; --surface: #20334B; --puzzle-fifth: #FEBB02; --border: rgba(238,246,255,.2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):has(.puzzle-page) { --bg: #111F32; --text: #EEF6FF; --text-secondary: #EEF6FF; --surface: #20334B; --puzzle-fifth: #FEBB02; --border: rgba(238,246,255,.2); }
}
.puzzle-page { overflow-x: visible; font-family: var(--font); font-size: 17px; background: var(--bg); color: var(--text); }
html:has(.puzzle-page) body.puzzle-page { background: var(--bg); color: var(--text); }
.puzzle-page :is(p,li) { line-height: 1.65; }
.puzzle-page h1, .puzzle-page h2 { font-family: PuzzleTitle, PuzzleNunito, sans-serif; font-size: 48px; font-weight: 400; line-height: 1.13; text-wrap: balance; }
.puzzle-page:lang(zh) { font-family: PuzzleNunito, 'PingFang SC', sans-serif; }
.puzzle-page:lang(zh) :is(h1,h2) { font-family: 'PingFang SC', PuzzleNunito, sans-serif; font-size: 36px; font-weight: 700; }
.puzzle-page h3 { font-size: 24px; line-height: 1.3; }
.puzzle-page h4 { margin: 20px 0 8px; font-size: 18px; }
.puzzle-container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.puzzle-section { padding: 62px 0 50px; }
.puzzle-section h2 { max-width: 1000px; margin: 0 0 20px; }
.puzzle-section > .puzzle-container > p { max-width: 820px; margin-bottom: 24px; }
.puzzle-page :is(section,details,[id]) { scroll-margin-top: 105px; }
.puzzle-skip { position: fixed; z-index: 500; top: -80px; left: 8px; padding: 12px; background: var(--surface); }
.puzzle-skip:focus { top: 8px; }
.puzzle-hero { padding: 100px 0 36px; }
.puzzle-breadcrumb { display: flex; gap: 12px; margin: 10px 0 22px; font-size: 14px; }
.puzzle-breadcrumb a { text-decoration: underline; }
.puzzle-hero-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 40px; align-items: center; }
/* LibraryBrand in the app: logo height = 1.65 × title size; word follows iBUMO. */
.puzzle-identity { --puzzle-brand-size: 48px; display: flex; align-items: flex-end; gap: calc(var(--puzzle-brand-size) * .3); margin-bottom: 24px; }
.puzzle-identity picture { flex: 0 0 calc(var(--puzzle-brand-size) * 1.65 * 1916 / 838); min-width: 0; }
.puzzle-identity img { width: 100%; height: auto; }
.puzzle-logo-dark { display: none; }
html[data-theme='dark'] .puzzle-logo-light { display: none; }
html[data-theme='dark'] .puzzle-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .puzzle-logo-light { display: none; }
  html:not([data-theme='light']) .puzzle-logo-dark { display: block; }
}
.puzzle-word { font: 400 var(--puzzle-brand-size)/1.3 PuzzleTitle, sans-serif; flex-shrink: 0; transform: translateY(calc(var(--puzzle-brand-size) * .25)); }
.puzzle-word span:nth-child(5n+1) { color: #009BFD; }
.puzzle-word span:nth-child(5n+2) { color: #54A901; }
.puzzle-word span:nth-child(5n+3) { color: #FD6C02; }
.puzzle-word span:nth-child(5n+4) { color: #8D2AD2; }
.puzzle-word span:nth-child(5n+5) { color: var(--puzzle-fifth); }
.puzzle-eyebrow { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.puzzle-hero h1 { margin: 0 0 18px; }
.puzzle-lead { max-width: 520px; margin-bottom: 20px; }
.puzzle-note { font-size: 14px; margin-top: 18px; }
.puzzle-store-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.puzzle-page figure { margin: 0; }
.puzzle-page figure img { width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
.puzzle-hero-visual img { box-shadow: 0 5px 12px rgba(17,31,50,.12); }
.puzzle-page figcaption { font-size: 14px; margin-top: 10px; }
.puzzle-action { font-size: 17px; padding: 12px 16px; }
.puzzle-facts { display: flex; gap: 44px; flex-wrap: wrap; }
.puzzle-facts span { display: flex; gap: 10px; align-items: baseline; }
.puzzle-facts strong { font-size: 32px; }
.puzzle-catalogue { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.puzzle-game-card { flex: 0 0 calc((100% - 96px)/7); min-width: 0; }
.puzzle-game-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 16px 16px 20px 12px; transition: transform .18s ease; }
.puzzle-game-card:hover img { transform: translateY(-3px); }
.puzzle-game-card h3 { font-size: 18px; margin: 10px 0 6px; }
.puzzle-game-card p { font-size: 14px; }
.puzzle-age-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.puzzle-age-grid article { background: var(--surface); border-radius: var(--card-radii); padding: 24px; }
.puzzle-age-label { display: inline-block; font-weight: 700; padding-bottom: 12px; }
.puzzle-age-grid h3 { margin-bottom: 10px; }
.puzzle-age-grid img { width: min(100%,220px); margin: 24px auto 8px; height: auto; object-fit: contain; border-radius: 10px; }
.puzzle-age-grid small { display: block; text-align: center; }
.puzzle-game-details { margin-top: 28px; }
.puzzle-game-detail { position: relative; isolation: isolate; padding: 0 24px; margin-inline: -24px; border-top: 1px solid var(--border); }
.puzzle-game-detail summary { display: grid; grid-template-columns: 28px minmax(180px,.42fr) minmax(0,1fr) 24px; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 20px 0; }
.puzzle-game-detail summary > :not(.puzzle-game-backdrop) { position: relative; z-index: 1; }
.puzzle-game-detail summary h3 { margin: 0; }
.puzzle-game-detail summary::-webkit-details-marker { display: none; }
.puzzle-game-detail summary::after { position: relative; z-index: 1; content: '+'; font-size: 28px; text-align: center; }
.puzzle-game-detail[open] summary::after { content: '−'; }
.puzzle-detail-number { font-size: 14px; }
.puzzle-detail-hook { font-size: 15px; }
.puzzle-detail-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 32px; align-items: start; padding: 4px 0 28px; }
.puzzle-description { margin: 0 0 16px; }
.puzzle-detail-body ol { padding-left: 24px; list-style: decimal; }
.puzzle-detail-body li { padding-left: 4px; margin: 6px 0; }
.puzzle-explores { margin: 16px 0 0; font-size: 14px; }
.puzzle-game-backdrop { position: absolute; inset: 0; z-index: 0; display: grid; pointer-events: none; opacity: .18; }
.puzzle-game-backdrop img { grid-area: 1/1; place-self: center start; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.puzzle-game-detail:not([open]) .puzzle-game-backdrop { inset: 8px 52px 8px auto; width: 96px; opacity: .45; }
.puzzle-game-detail:not([open]) .puzzle-game-backdrop img { place-self: center; }
html[data-theme='dark'] .puzzle-game-backdrop { opacity: .25; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .puzzle-game-backdrop { opacity: .25; }
}
.puzzle-path-grid { width: min(960px, 100% - 48px); display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 64px; align-items: center; }
.puzzle-path-grid > div { max-width: 530px; }
.puzzle-path-grid h2 { margin-bottom: 28px; }
.puzzle-path-grid figure { width: min(100%,300px); justify-self: end; }
.puzzle-path-steps { display: grid; gap: 16px; }
.puzzle-path-steps p { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; align-items: center; font-size: 18px; font-weight: 700; margin: 0; }
.puzzle-path-number { font-family: PuzzleTitle, PuzzleNunito, sans-serif; font-size: 32px; line-height: 1; color: var(--tibumo-blue); }
.puzzle-path-steps p:nth-child(2) .puzzle-path-number { color: var(--tibumo-green); }
.puzzle-path-steps p:nth-child(3) .puzzle-path-number { color: var(--tibumo-purple); }
.puzzle-offer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 50px; }
.puzzle-offer-grid h3 { margin-bottom: 18px; }
.puzzle-price { font-size: 15px; margin-top: 22px; }
.puzzle-offer-numbers { display: grid; gap: 22px; align-content: center; }
.puzzle-offer-numbers strong { font-size: 44px; display: block; line-height: 1.2; }
.puzzle-offer-numbers span { font-size: 17px; }
.puzzle-parent { margin-top: 30px; padding: 24px; background: var(--surface); border-radius: var(--card-radii); }
.puzzle-parent h3 { margin-bottom: 10px; }
.puzzle-faq { max-width: 920px; }
.puzzle-faq details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.puzzle-faq summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.puzzle-faq p { padding: 16px 0 0; }
.puzzle-help { margin-top: 40px; }
.puzzle-help h3 { margin-bottom: 20px; }
.puzzle-help p { margin: 24px 0 12px; }
.puzzle-final { text-align: center; padding-bottom: 70px; }
.puzzle-final h2, .puzzle-final > .puzzle-container > p { margin-inline: auto; }
.puzzle-legal dt { font-weight: 700; margin-top: 20px; }
.puzzle-legal dd { margin-top: 8px; }
.puzzle-page .puzzle-section:first-child { padding-top: 125px; }
@media (max-width: 1099px) {
  .puzzle-game-card { flex-basis: calc((100% - 48px)/4); }
  .puzzle-hero-grid { gap: 24px; }
  .puzzle-identity { --puzzle-brand-size: 40px; }
}
@media (max-width: 899px) {
  .puzzle-hero-grid { grid-template-columns: 1fr; }
  .puzzle-hero-visual { max-width: 760px; }
  .puzzle-hero h1 { max-width: 650px; }
  .puzzle-detail-body { grid-template-columns: 1fr; gap: 24px; }
  .puzzle-detail-body figure { max-width: 640px; }
  .puzzle-game-detail summary { grid-template-columns: 24px minmax(180px,.6fr) minmax(0,1fr) 24px; gap: 12px; }
  .puzzle-path-grid { grid-template-columns: 1fr; gap: 24px; }
  .puzzle-path-grid > div { max-width: 530px; justify-self: center; }
  .puzzle-path-grid figure { width: min(100%,260px); justify-self: center; }
  .puzzle-offer-grid { gap: 24px; }
}
@media (max-width: 599px) {
  .puzzle-container { width: calc(100% - 32px); }
  .puzzle-section { padding: 48px 0 36px; }
  .puzzle-hero { padding-top: 90px; }
  .puzzle-identity { max-width: 330px; }
  .puzzle-page h2 { overflow-wrap: anywhere; }
  .puzzle-facts { gap: 18px; }
  .puzzle-facts span { gap: 6px; font-size: 14px; }
  .puzzle-game-card { flex-basis: calc((100% - 16px)/2); }
  .puzzle-age-grid { grid-template-columns: 1fr; gap: 18px; }
  .puzzle-age-grid img { width: min(100%,240px); }
  .puzzle-detail-hook { display: none; }
  .puzzle-game-detail { padding-inline: 16px; margin-inline: -16px; }
  .puzzle-game-detail summary { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 12px; padding-block: 16px; }
  .puzzle-game-detail:not([open]) .puzzle-game-backdrop { width: 64px; right: 48px; opacity: .15; }
  .puzzle-offer-grid { grid-template-columns: 1fr; }
  .puzzle-offer-numbers { grid-template-columns: 1fr 1fr; }
  .puzzle-offer-numbers strong { font-size: 36px; }
  .puzzle-help .puzzle-action { margin-bottom: 12px; }
}
@media (max-width: 359px) {
  .puzzle-identity { --puzzle-brand-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .puzzle-game-card img { transition: none; }
}
@media (max-width: 899px) {
  .puzzle-hero-grid { gap: 12px; }
  .puzzle-hero-grid > div { display: contents; }
  .puzzle-hero-grid .puzzle-identity { order: 1; margin-bottom: 4px; }
  .puzzle-hero-grid .puzzle-eyebrow { order: 2; margin: 0; }
  .puzzle-hero-grid h1 { order: 3; margin: 4px 0 8px; }
  .puzzle-hero-grid .puzzle-hero-visual { order: 4; }
  .puzzle-hero-grid .puzzle-lead { order: 5; margin: 8px 0; }
  .puzzle-hero-grid .puzzle-action { order: 6; justify-self: start; }
  .puzzle-hero-grid .puzzle-store-buttons { order: 7; margin: 8px 0; }
}

.puzzle-card-gesture { display: block; font-size: 13px; font-weight: 700; margin-top: 8px; }

/* Same lettering treatment and section vocabulary as the shared Tibumo site.
   Puzzle retains the native sky/navy palette supplied with its official logo. */
.puzzle-page .rainbow-title span:nth-child(5n+1) { color: #009BFD; }
.puzzle-page .rainbow-title span:nth-child(5n+2) { color: #54A901; }
.puzzle-page .rainbow-title span:nth-child(5n+3) { color: #FD6C02; }
.puzzle-page .rainbow-title span:nth-child(5n+4) { color: #8D2AD2; }
.puzzle-page .rainbow-title span:nth-child(5n+5) { color: var(--puzzle-fifth); }
.puzzle-decorated { position: relative; isolation: isolate; background: var(--bg); }
.puzzle-decorated > .puzzle-container { position: relative; z-index: 1; }
.puzzle-scene { position: absolute; inset: 38px 16px 28px; max-height: 940px; z-index: 0; display: grid; pointer-events: none; opacity: .26; mix-blend-mode: multiply; }
.puzzle-scene img { grid-area: 1/1; place-self: center; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.puzzle-scene-dark { display: none; }
.puzzle-hero .puzzle-scene { top: 110px; opacity: .18; }
.puzzle-divider { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1120px, 100% - 48px); height: 9px; display: flex; overflow: hidden; border-radius: 6px; }
.puzzle-divider img { width: 100%; height: 100%; }
.puzzle-divider span { flex: 1; }
.puzzle-band-blue { background: var(--tibumo-blue); }
.puzzle-band-green { background: var(--tibumo-green); }
.puzzle-band-orange { background: var(--tibumo-orange); }
.puzzle-band-purple { background: var(--tibumo-purple); }
.puzzle-band-yellow { background: var(--tibumo-yellow); }
html[data-theme='dark'] .puzzle-scene { mix-blend-mode: screen; opacity: .36; }
html[data-theme='dark'] .puzzle-scene-light { display: none; }
html[data-theme='dark'] .puzzle-scene-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .puzzle-scene { mix-blend-mode: screen; opacity: .36; }
  html:not([data-theme='light']) .puzzle-scene-light { display: none; }
  html:not([data-theme='light']) .puzzle-scene-dark { display: block; }
}
@media (max-width: 599px) {
  .puzzle-divider { width: calc(100% - 32px); height: 7px; }
  .puzzle-scene { inset-inline: 12px; }
}