/* Content pages (rules, parents, privacy, terms, about, 404): one template on top of /site/shared/site.css.
   A hero strip with real art, an ice card for the text (max ~72ch) and, on wide screens, a side table of contents. */
.page { background: var(--ice-50); }

/* ------------------------------------------------------------------ hero strip */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: calc(var(--header-h) + env(safe-area-inset-top) + 34px) 0 44px;
  background: radial-gradient(90% 140% at 85% 20%, #3cc3f0 0%, var(--ocean-700) 48%, #073f86 100%); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: url(/site/home/art/ui/pattern-band.png) 0 0 / 220px auto; opacity: .14; mix-blend-mode: screen; pointer-events: none; }
/* the hero copy lines up with the body below it (table of contents + text column: 230 + 40 + 780) */
.page-hero .wrap, .page-body .wrap { width: min(1050px, 100% - 2 * var(--gutter)); }
.page-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; min-height: 150px; }
.page-hero__copy { max-width: 44rem; padding-bottom: 4px; }
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #cdeeff; }
.page-hero h1 { margin-top: 10px; font: 400 clamp(36px, 5vw, 60px)/1.02 var(--f-display); letter-spacing: .005em; text-shadow: 0 3px 0 rgba(0,40,100,.4); }
.page-hero__lede { margin-top: 12px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.92); }
.page-hero__art { position: relative; display: flex; align-items: end; gap: 10px; justify-self: end; margin-bottom: -44px; }
.page-hero__art img { height: auto; filter: drop-shadow(0 10px 16px rgba(0,20,60,.35)); }
.art-rules img { width: 64px; margin-bottom: 52px; }
.art-rules img:nth-child(2n) { margin-bottom: 70px; }
/* the shadow is cast by the wrapper, so it follows the clipped pair and its bubble (an img's own filter runs before its clip) */
.art-parents .a1 { position: relative; width: var(--pw, 210px); container-type: inline-size; filter: drop-shadow(0 10px 16px rgba(0,20,60,.35)); }
.art-parents .a1 img { display: block; width: 100%; }
/* The pair's raster carries a baked, broken bubble (its gold rim and white fill are offset), so it is clipped away and the
   pair speaks through the game's own bubble art, placed exactly as on the home page (tail tip over the yellow penguin).
   The bubble overhangs the pair's box by 14%; the puffles sit below it, except in short landscape (see there). */
.art-parents .a1 > img { filter: none; clip-path: polygon(0 43.4%, 60.3% 43.4%, 60.3% 48.4%, 73.7% 48.4%, 73.7% 43.4%, 100% 43.4%, 100% 100%, 0 100%); }
.art-parents .say { position: absolute; left: 44.4%; top: -10%; width: 70%; z-index: 2; container-type: inline-size; }
.art-parents .say img { display: block; width: 100%; height: auto; filter: none; }
.art-parents .say span { position: absolute; inset: 7% 8% 27% 8%; display: grid; place-items: center; text-align: center;
  font: 600 clamp(8px, 14cqi, 24px)/1.05 var(--f-ui); color: var(--ocean-900); text-wrap: balance; }
.art-parents .a2 { width: 84px; margin-bottom: 44px; }
.art-parents .a3 { width: 74px; margin-bottom: 48px; }
.art-privacy img { width: 150px; margin-bottom: -40px; }
.art-terms img { width: 240px; margin-bottom: 30px; }
.art-about img { width: 280px; margin-bottom: 36px; }
.art-404 img { width: 150px; margin-bottom: 40px; }

/* ------------------------------------------------------------------ body */
.page-body { padding: 44px 0 88px; }
.page-grid { display: grid; grid-template-columns: 230px minmax(0, 780px); justify-content: center; gap: 40px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top) + 20px); padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(6,33,63,.06), inset 0 0 0 1.5px #dcecf8; }
.toc h2 { margin: 0 0 8px; font: 600 13px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #5a7896; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 8px 10px; border-radius: 10px; font: 600 15px/1.25 var(--f-ui); color: var(--ocean-700); text-decoration: none; }
.toc a:hover { background: var(--ice-50); }

.prose { min-width: 0; max-width: 780px; padding: 36px 44px 40px; border-radius: 28px; background: #fff; box-shadow: 0 18px 40px rgba(6,33,63,.08), inset 0 0 0 1.5px #dcecf8; color: #1d3a57; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 36px; font: 400 clamp(26px, 2.6vw, 32px)/1.1 var(--f-display); color: var(--ocean-900); letter-spacing: .005em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 24px; font: 600 19px/1.3 var(--f-ui); color: var(--ocean-900); }
.prose p, .prose li { font-size: 17px; line-height: 1.62; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose a:not(.btn) { color: var(--ocean-700); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose strong { color: var(--ocean-900); }
.prose .note { padding: 14px 16px; border-radius: 16px; background: #fff8d6; box-shadow: inset 0 0 0 1.5px #f3df86; color: #5a4200; font-size: 16px; }
.prose .updated { font: 600 14px/1.3 var(--f-ui); color: #5a7896; }
.table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1.5px #dcecf8; }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3eef8; }
.prose th { font: 600 14px/1.2 var(--f-ui); letter-spacing: .04em; color: var(--ocean-700); background: #f3f9ff; }
.prose tr:last-child td { border-bottom: 0; }

/* the four rules, as tiles (the 2017 icons) */
.rule-tiles { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rule-tiles li { margin: 0 !important; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.rule-tiles img { grid-row: span 2; width: 52px; height: 52px; object-fit: contain; }
.rule-tiles b { font: 400 21px/1.1 var(--f-display); color: var(--ocean-900); }
.rule-tiles span { font-size: 15px; line-height: 1.4; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px !important; }

/* ------------------------------------------------------------------ layout modes */
@media (max-width: 1023px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .toc a { padding: 7px 12px; background: var(--ice-50); border-radius: var(--r-pill); font-size: 14px; }
  .prose { max-width: none; }
}
@media (max-width: 719px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-hero__art { justify-self: start; margin-bottom: -44px; }
  .art-rules img { width: 46px; margin-bottom: 18px; } .art-rules img:nth-child(2n) { margin-bottom: 30px; }
  .art-parents .a1 { --pw: 150px; } .art-parents .a2 { width: 60px; margin-bottom: 20px; } .art-parents .a3 { width: 54px; margin-bottom: 22px; }
  .art-privacy { display: none !important; }
  .art-terms img { width: 170px; margin-bottom: 20px; }
  .art-about img { width: 200px; margin-bottom: 24px; }
  .art-404 img { width: 110px; margin-bottom: 24px; }
}
@media (max-width: 599px) {
  .page-hero { padding: calc(var(--header-h) + env(safe-area-inset-top) + 22px) 0 40px; }
  .page-hero__lede { font-size: 16.5px; }
  .page-body { padding: 24px 0 64px; }
  .prose { padding: 24px 20px 28px; border-radius: 22px; }
  .prose p, .prose li { font-size: 16px; }
  .rule-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (orientation: landscape) and (max-height: 499px) {
  .page-hero { padding: calc(var(--header-h) + 18px) 0 32px; }
  .page-hero .wrap { min-height: 0; }
  .page-hero h1 { font-size: 34px; }
  .page-hero__art { margin-bottom: -32px; }
  .art-privacy img { width: 90px; margin-bottom: -20px; }
  .art-terms img, .art-about img { width: 160px; margin-bottom: 14px; }
  .art-parents .a1 { --pw: 130px; margin-right: 13px; }
  .toc { display: none; }
}

/* guide pages: faq, how-to-play, history, games */
/* ------------------------------------------------------------------ hero art */
/* a yellow puffle saying "Good question!" through the game's own bubble, placed like the parents page's pair */
.art-faq .a1 { position: relative; width: var(--fw, 128px); margin: 0 92px 46px 0; container-type: inline-size; }
.art-faq .puffle { display: block; width: 100%; }
.art-faq .say { position: absolute; left: 58%; bottom: 76%; width: 118%; z-index: 2; container-type: inline-size; filter: drop-shadow(0 10px 16px rgba(0,20,60,.3)); }
.art-faq .say img { display: block; width: 100%; filter: none; }
.art-faq .say span { position: absolute; inset: 7% 8% 27% 8%; display: grid; place-items: center; text-align: center;
  font: 600 clamp(8px, 15cqi, 24px)/1.05 var(--f-ui); color: var(--ocean-900); text-wrap: balance; }
.art-how img { width: 250px; margin-bottom: 64px; transform: rotate(8deg); }
.art-history img { width: 132px; margin-bottom: 0; }
.art-games img { width: 320px; margin-bottom: 40px; }

/* ------------------------------------------------------------------ text pieces */
.prose .cta-lead { margin-top: 30px; font-weight: 700; color: var(--ocean-900); }
.prose .cta-lead + .cta-row { margin-top: 14px !important; }

/* questions and answers: group headings (h2), then each question (h3) with its answer */
.faq > * + * { margin-top: 12px; }
.faq h3 { margin-top: 22px; padding-top: 20px; border-top: 1.5px solid #e3eef8; }
.faq h2 + h3 { margin-top: 16px; padding-top: 0; border-top: 0; }
.faq h3 + .faq__a { margin-top: 8px; }
.faq__a > * + * { margin-top: 10px; }

/* numbered steps with big gold numerals (the 2017 play-button gradient) */
.prose ol.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-content: start;
  margin: 0 !important; padding: 16px 18px; border-radius: var(--r-tile); background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.steps > li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font: 400 28px/1 var(--f-display); color: #5a2e00; text-shadow: 0 1px 0 rgba(255,255,255,.6);
  background: linear-gradient(180deg, #FFF3A6 0%, var(--gold-400) 18%, #FFD83A 50%, var(--gold-600) 51%, #F4B42A 100%);
  box-shadow: inset 0 0 0 2px #E8A21C, inset 0 3px 0 rgba(255,255,255,.75), 0 3px 0 #C47F0E; }
.prose .steps h3 { margin: 2px 0 0; font: 400 21px/1.15 var(--f-display); letter-spacing: .005em; }
.steps p { margin-top: 4px; }

/* a timeline: a vertical rule, a dot and a date chip per event */
.prose ol.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #cfe4f6; }
.timeline > li { position: relative; margin: 0 !important; padding-left: 34px; }
.timeline > li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3.5px var(--ocean-700); }
.timeline time { display: block; width: fit-content; margin-bottom: 3px; padding: 2px 11px; border-radius: var(--r-pill); background: var(--ocean-700); color: #fff;
  font: 600 14px/1.4 var(--f-ui); letter-spacing: .02em; }

/* famous faces: 64 px friend icons with a name and a line each */
.prose .mascots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mascots > li { margin: 0 !important; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-content: center;
  padding: 14px; border-radius: var(--r-tile); background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.mascots img { grid-row: span 2; align-self: center; width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 3px 8px rgba(6,33,63,.18); }
.mascots b { align-self: end; font: 400 20px/1.1 var(--f-display); color: var(--ocean-900); }
.prose .mascots span { align-self: start; margin-top: 3px; font-size: 15px; line-height: 1.4; }

/* the games: title art, then name, a small Where / Controls / Since table and how to play */
.game-cards { display: grid; gap: 16px; }
.game-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "art name" "art facts" "text text"; column-gap: 22px;
  padding: 20px 22px; border-radius: 22px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; scroll-margin-top: calc(var(--header-h) + 12px); }
.prose .game-card h3 { grid-area: name; align-self: end; margin: 0; font: 400 26px/1.1 var(--f-display); letter-spacing: .005em; }
.game-card__art { grid-area: art; display: grid; place-items: center; min-height: 118px; }
.game-card__art img { width: auto; max-width: 100%; height: auto; max-height: 118px; filter: drop-shadow(0 4px 6px rgba(6,33,63,.18)); }
.game-card dl { grid-area: facts; margin: 10px 0 0; display: grid; gap: 5px; }
.game-card dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.game-card dt { font: 600 12.5px/1.6 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #4a6682; }
.game-card dd { margin: 0; font-size: 15.5px; line-height: 1.45; }
.game-card dd img { display: inline-block; width: auto; height: 26px; margin: -4px 6px -6px 0; vertical-align: baseline; }
.prose .game-card p { grid-area: text; margin-top: 14px; }

/* a real capture or 2017 illustration with a caption */
.prose figure.shot { margin: 22px 0 0; }
.shot img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 24px rgba(6,33,63,.12); }
.shot figcaption { margin-top: 8px; font: 600 14px/1.35 var(--f-ui); color: #5a7896; }
.prose figure.shot.inset { float: right; width: 210px; margin: 4px 0 10px 22px; }
/* the room captures end in a 2 px strip of the player's sky-blue stage colour on the right: their frame trims it off */
.shot__trim { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px rgba(6,33,63,.12); }
.shot__trim img { width: 100.6%; max-width: none; border-radius: 0; box-shadow: none; }

/* sources in small print */
.prose .sources { padding-left: 1.1em; color: #4a6682; }
.prose .sources li { font-size: 14px; line-height: 1.55; }
.prose .sources li + li { margin-top: 5px; }

@media (max-width: 719px) {
  .art-faq .a1 { --fw: 96px; margin: 48px 0 22px 0; }
  .art-how img { width: 180px; margin-bottom: 30px; }
  .art-history img { width: 96px; }
  .art-games img { width: 230px; margin-bottom: 26px; }
}
@media (max-width: 599px) {
  .prose .mascots { grid-template-columns: minmax(0, 1fr); }
  .game-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "name" "facts" "text"; padding: 18px; }
  .game-card__art { justify-items: start; min-height: 0; margin-bottom: 12px; }
  .game-card__art img { max-width: min(100%, 200px); max-height: 84px; }
  .game-card dl > div { grid-template-columns: 84px minmax(0, 1fr); }
  .prose figure.shot.inset { float: none; width: min(260px, 100%); margin: 18px 0 0; }
  .steps > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  .steps > li::before { width: 44px; height: 44px; font-size: 24px; }
}
@media (orientation: landscape) and (max-height: 499px) {
  .art-faq .a1 { --fw: 84px; margin-right: 60px; margin-bottom: 16px; }
  .art-how img { width: 150px; margin-bottom: 20px; }
  .art-history img { width: 80px; }
  .art-games img { width: 190px; margin-bottom: 16px; }
}