/* BOM Games home (bom.games) — ported from the approved bom-brand mockup (commit d79c95d, brand guide v0.4.2).
   Layout + component patterns follow pbskids.org (bom-brand PBS-ANATOMY.md); colours, type, outlines and contrast are
   BOM tokens only (tokens.css, copied verbatim from bom-brand). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bom-paper);color:var(--bom-text);font:400 1.0625rem/1.5 var(--bom-font-body);min-height:100vh;overflow-x:hidden}
button{font:inherit;font-family:var(--bom-font-heading);cursor:pointer;color:inherit}
h2{font-family:var(--bom-font-heading)}
img,svg{display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:20;background:var(--bom-paper);padding:12px;border-radius:var(--bom-radius-sm)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* one focus style everywhere: yellow ring + navy halo (works on light, dark and accent surfaces) */
:focus{outline:none}
:focus-visible{outline:4px solid var(--bom-yellow);outline-offset:3px;box-shadow:0 0 0 10px var(--bom-navy-700) !important}

:root{
  --disc:clamp(100px,21.5vw,310px); --desi:clamp(112px,30vw,432px); --logo:clamp(56px,10.4vw,150px);
  --fw:clamp(260px,70vw,560px); --fb:clamp(5px,1vw,8px); --fh:calc(var(--fw)*.625 + var(--fb)*2);
  --peek:clamp(22px,5vw,72px); --cw:calc(var(--fw)*.52); --cr:-.5;
  --wrap:min(994px,100% - 40px); --bounce:cubic-bezier(.34,1.45,.64,1);
  --hex-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23CA6C35' stroke-opacity='.55' stroke-width='3'/%3E%3C/svg%3E");
  --hex-sage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23B5CF9D' stroke-width='3'/%3E%3C/svg%3E");
  --hex-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FDD67A' stroke-width='3'/%3E%3C/svg%3E");
}
@media (max-width:600px){ :root{--cw:calc(var(--fw)*.36);--cr:-.4} }

/* accent mapping: background + its AA-safe text colour */
.acc-orange{--acc:var(--bom-orange);--on:var(--bom-navy-700)}
.acc-yellow{--acc:var(--bom-yellow);--on:var(--bom-navy-700)}
.acc-sage{--acc:var(--bom-sage);--on:var(--bom-navy-700)}
.acc-teal{--acc:var(--bom-teal-700);--on:#fff}
.acc-navy{--acc:var(--bom-navy);--on:#fff}
.acc-apricot{--acc:var(--bom-orange-300);--on:var(--bom-navy-700)}
.acc-terracotta{--acc:var(--bom-orange-700);--on:#fff}

/* ============ 1. MASTHEAD ============ */
.mast{background:var(--bom-navy);color:#fff;padding-top:env(safe-area-inset-top);position:relative;z-index:3}
.mast-top{display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(12px,1.25vw,18px) max(clamp(20px,4.2vw,60px),env(safe-area-inset-right)) 0 max(clamp(20px,4.2vw,60px),env(safe-area-inset-left))}
.logo{width:var(--logo);height:var(--logo);border-radius:var(--bom-radius-round);background:var(--bom-orange);color:var(--bom-navy-700);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;flex:none;
  font-family:var(--bom-font-heading);font-weight:700;line-height:.86;transition:transform var(--bom-motion-base) var(--bounce)}
.logo-1{font-size:calc(var(--logo)*.155);letter-spacing:0}
.logo-2{font-size:calc(var(--logo)*.22);font-weight:600}
.logo:hover{transform:rotate(-6deg) scale(1.04)}
.grownups{display:flex;align-items:center;gap:10px;min-height:clamp(48px,4vw,60px);padding:0 clamp(16px,1.6vw,24px);border-radius:var(--bom-radius-md);
  background:transparent;border:3px solid var(--bom-navy-200);color:#fff;font-weight:600;font-size:clamp(1rem,.8rem + .5vw,1.3rem);flex:none;margin-top:calc(var(--logo)*.12)}
.grownups svg{width:22px;height:22px;fill:var(--bom-yellow);stroke:#fff;stroke-width:2.2}
.grownups{text-decoration:none;font-family:var(--bom-font-heading)} /* a link on the hub (-> /support/), was a button in the mockup */
@media (max-width:480px){.grownups span{position:absolute;left:-999px}.grownups{width:48px;padding:0;justify-content:center;margin-top:4px}}
/* Menu music toggle: the games' mute box (paper, 3px navy, radius sm, navy-700 lip), 48px, left of Grown-ups. Muted = speaker + cross. */
.mast-btns{display:flex;align-items:flex-start;gap:12px;flex:none}
.music-btn{width:48px;height:48px;min-width:48px;padding:0;margin:calc(var(--logo)*.12) 0 0;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  background:var(--bom-paper,#FFFDF7);color:var(--bom-navy);border:3px solid var(--bom-navy);border-radius:var(--bom-radius-sm);box-shadow:0 4px 0 var(--bom-navy-700)}
.music-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--bom-navy-700)}
.music-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.music-btn .spk{fill:currentColor}
.music-btn .cross,.music-btn[aria-pressed="true"] .waves{display:none}
.music-btn[aria-pressed="true"] .cross{display:inline}
.music-btn[aria-pressed="true"]{background:var(--bom-sand,#F3E6CF)}
@media (max-width:480px){.music-btn{margin-top:4px}}
/* Music volume (2026-10-08): same 48px box as the speaker, 1-4 filled bars = the level; tap = popover with 4 steps
   (64px, paper, navy; the chosen one yellow), under the buttons, above the age discs. */
.mast-btns{position:relative}.vol-wrap{flex:none} /* the popover hangs from the right edge of the button group */
.vol-btn svg{stroke-width:3}
.vol-btn .b{stroke:var(--bom-navy-200,#AAB4BB)}
.vol-btn[data-level="1"] .b1,.vol-btn[data-level="2"] :is(.b1,.b2),.vol-btn[data-level="3"] :is(.b1,.b2,.b3),.vol-btn[data-level="4"] .b{stroke:var(--bom-navy)}
.vol-pop{position:absolute;z-index:12;top:calc(100% + 10px);right:0;width:max-content;padding:10px 12px 14px;margin:0;text-align:center;
  background:var(--bom-paper,#FFFDF7);color:var(--bom-navy-700);border:3px solid var(--bom-navy);border-radius:var(--bom-radius-md);box-shadow:0 5px 0 var(--bom-navy-700)}
.vol-pop[hidden]{display:none}
.vol-label{margin:0 0 8px;font:700 1rem/1.2 var(--bom-font-heading);color:var(--bom-navy-700)}
.vol-steps{display:flex;gap:6px}
.vol-step{min-width:64px;min-height:64px;margin:0;padding:0 4px;cursor:pointer;font:700 1.125rem/1 var(--bom-font-heading);
  background:var(--bom-paper,#FFFDF7);color:var(--bom-navy);border:3px solid var(--bom-navy);border-radius:var(--bom-radius-sm);box-shadow:0 4px 0 var(--bom-navy-700)}
.vol-step:active{transform:translateY(3px);box-shadow:0 1px 0 var(--bom-navy-700)}
.vol-step[aria-pressed="true"]{background:var(--bom-yellow);color:var(--bom-navy-700)}

.ages{position:relative;display:flex;justify-content:center;align-items:center;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));margin:0}
.mast>.ages{margin-bottom:0}
.mast{padding-bottom:clamp(16px,1.6vw,24px)}
@media (max-width:600px){.ages{margin-top:6px}}
/* the two giant round buttons (PBS GAMES / VIDEOS -> our ages) */
.disc{width:var(--disc);aspect-ratio:1;border-radius:var(--bom-radius-round);flex:none;padding:0;background:var(--bom-yellow);color:var(--bom-navy-700);
  border:calc(var(--disc)*.075) solid var(--bom-orange);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--disc)*.035);
  transform:scale(1);transition:transform var(--bom-motion-slow) var(--bounce),background var(--bom-motion-base),border-color var(--bom-motion-base),box-shadow var(--bom-motion-base)}
.plate{width:calc(var(--disc)*.32);height:calc(var(--disc)*.21);border-radius:calc(var(--disc)*.055);background:var(--bom-navy);display:grid;place-items:center;transition:background var(--bom-motion-base)}
.plate svg{width:76%;height:76%;fill:none;stroke:var(--bom-yellow);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.plate svg .fill{fill:var(--bom-yellow)}
.dl{font:700 max(15px,calc(var(--disc)*.135))/1 var(--bom-font-heading);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.disc[aria-selected=true]{box-shadow:0 0 0 calc(var(--disc)*.03) var(--bom-paper)}
.disc[aria-selected=false]{background:var(--bom-yellow-200);border-color:var(--bom-orange-300);transform:scale(.88)}
.disc[aria-selected=false] .plate{background:var(--bom-navy-400)}
.disc:hover{transform:scale(1.04)} .disc[aria-selected=false]:hover{transform:scale(.93)}
.disc:active{transform:scale(.92)}
/* Desi sits between the buttons like the PBS cat (outside the tablist in the DOM, so Tab goes: age -> Desi) */
.tabs{display:flex;align-items:center;gap:calc(var(--desi) + var(--disc)*.32);min-height:var(--desi)}
.guide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}
.desi-btn{width:var(--desi);aspect-ratio:1;border:0;padding:0;background:none;border-radius:50%;display:block}
.desi{width:100%;height:100%;animation:bob 3.2s ease-in-out infinite;transform-origin:50% 85%}
.desi.hop{animation:hop .7s var(--bounce) 1, bob 3.2s ease-in-out .7s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6%) rotate(3deg)}}
@keyframes hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-14%) scale(1.06,.96)}60%{transform:translateY(0) scale(.96,1.05)}100%{transform:none}}
.bubble{display:none;position:absolute;left:50%;top:calc(100% - 6px);transform:translateX(-50%);z-index:9;width:max-content;max-width:min(78vw,340px);margin:0;
  background:var(--bom-paper);color:var(--bom-navy-700);border:3px solid var(--bom-navy);border-radius:var(--bom-radius-sm);padding:10px 14px;font:700 1.0625rem/1.35 var(--bom-font-early);text-align:center;box-shadow:var(--bom-shadow-2)}
.bubble.on{display:block}
/* the tip bubble hangs below the masthead over the collection buttons: it is read-only, so taps go through to what's under it */
.bubble{pointer-events:none}
.bubble::before{content:"";position:absolute;left:50%;top:-12px;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom:12px solid var(--bom-navy)}

/* ============ 2. HERO CAROUSEL ============ */
.hero{position:relative;overflow:hidden;padding:clamp(26px,3.4vw,48px) 0 clamp(18px,2.4vw,34px);isolation:isolate}
.scenes{position:absolute;inset:0;z-index:-1}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 450ms ease}
.scene.on{opacity:1}
.scene svg{width:100%;height:100%}
.stage{position:relative;height:calc(var(--fh) + var(--cw)*.18);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide{position:absolute;left:50%;bottom:0;width:var(--fw);transform-origin:50% 70%;
  transition:transform 480ms var(--bounce),opacity var(--bom-motion-slow) ease;cursor:pointer}
.slide[data-off="0"]{z-index:3;transform:translateX(-50%);cursor:default}
.slide[data-off="-1"]{z-index:2;transform:translateX(calc(-50% - var(--fw)*.08 - var(--peek))) scale(.84)}
.slide[data-off="1"]{z-index:2;transform:translateX(calc(-50% + var(--fw)*.08 + var(--peek))) scale(.84)}
.slide[data-off="far-l"]{z-index:1;opacity:0;pointer-events:none;transform:translateX(calc(-50% - var(--fw)*.3)) scale(.7)}
.slide[data-off="far-r"]{z-index:1;opacity:0;pointer-events:none;transform:translateX(calc(-50% + var(--fw)*.3)) scale(.7)}
.frame{position:relative;border:var(--fb) solid var(--bom-paper);border-radius:var(--bom-radius-frame);overflow:hidden;background:var(--bom-paper);box-shadow:0 0 0 3px var(--bom-navy)}
.frame .art{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;-webkit-user-drag:none}
.art.idea{position:relative;overflow:hidden}
.art.idea>svg{position:absolute;inset:0;width:100%;height:100%}
.ideacut{position:absolute;left:50%;bottom:-6%;width:34%;transform:translateX(-50%)}
.ptitle{position:absolute;z-index:2;top:calc(-1*clamp(12px,1.4vw,18px));left:clamp(10px,2vw,22px);background:var(--bom-paper);border:3px solid var(--bom-navy);border-radius:var(--bom-radius-sm);
  padding:clamp(4px,.5vw,8px) clamp(10px,1.2vw,16px);box-shadow:var(--bom-shadow-1);display:flex;flex-direction:column;max-width:78%;transition:opacity var(--bom-motion-base)}
.ptitle b{font:700 clamp(1.05rem,.7rem + 1.4vw,1.75rem)/1.05 var(--bom-font-heading);color:var(--bom-navy-700)}
.ptitle small{font:600 .9375rem/1.3 var(--bom-font-body);color:var(--bom-ink-muted)}
.cut{position:absolute;z-index:3;width:var(--cw);right:calc(var(--cw)*var(--cr));bottom:-5%;pointer-events:none;transition:opacity var(--bom-motion-base),transform 480ms var(--bounce)}
.cut svg,.scut svg,.rchar svg{width:100%;height:auto}
.slide:not([data-off="0"]) .cut,.slide:not([data-off="0"]) .ptitle{opacity:0}
.slide:not([data-off="0"]) .cut{transform:translateY(12%)}
/* hub fix (iPad PLAY clipped): the control row starts at the frame's left edge and reaches under the cut-out character
   (fw + cw*.5 wide), but each side keeps a gutter of at least 24px (or the safe-area inset), so PLAY never touches or
   leaves the screen edge. Was width:fw+cw*.5 + translateX(cw*.25): on 820px it ran ~15px past the right edge. */
.hero-ctrl{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;
  margin-top:clamp(16px,2vw,24px);margin-bottom:0;
  margin-left:max(24px,env(safe-area-inset-left),calc(50% - var(--fw)/2));
  margin-right:max(24px,env(safe-area-inset-right),calc(50% - var(--fw)/2 - var(--cw)*.5))}
.dots{display:flex;background:rgba(21,39,50,.86);border-radius:var(--bom-radius-pill);padding:0 6px}
.dot{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;padding:0}
.dot::before{content:"";width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bom-paper);transition:transform var(--bom-motion-base) var(--bounce),background var(--bom-motion-base)}
.dot[aria-current=true]::before{background:var(--bom-paper);transform:scale(1.15)}
/* 13+ slides (both ages since the Bible wave-1 games, 2026-10-14): one row of dots would push PLAY off the screen, so the dots sit in
   rows of 9 (every dot stays a 44x44 target) and PLAY keeps its size beside them. Phones (<=600px) use the rows-of-5 rule below. */
.hero-ctrl:has(.dot:nth-child(13)) .dots{display:grid;grid-template-columns:repeat(9,44px);border-radius:var(--bom-radius-md)}
.hero-ctrl:has(.dot:nth-child(13)) .play{flex:none}
.play{display:inline-flex;align-items:center;gap:10px;min-height:clamp(54px,4.2vw,62px);padding:0 clamp(26px,3vw,48px);border-radius:var(--bom-radius-md);
  background:var(--bom-orange);color:var(--bom-navy-700);border:4px solid var(--bom-navy);box-shadow:0 5px 0 var(--bom-navy-700);
  font:700 clamp(1.4rem,1rem + 1.2vw,2rem)/1 var(--bom-font-heading);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  transition:transform var(--bom-motion-fast) var(--bom-motion-ease),box-shadow var(--bom-motion-fast) var(--bom-motion-ease)}
.play svg{width:.8em;height:.8em;fill:var(--bom-navy-700)}
.play:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 7px 0 var(--bom-navy-700)}
.play:active{transform:translateY(4px);box-shadow:0 1px 0 var(--bom-navy-700)}
.play.soon{background:var(--bom-sand);border-style:dashed;box-shadow:none}
.play.soon svg{display:none}

/* arrow tabs (PBS: tall rounded rectangles on the screen edges; brand: navy + yellow chevron) */
.arrow{border:0;background:var(--bom-navy);color:var(--bom-yellow);display:grid;place-items:center;padding:0;transition:transform var(--bom-motion-fast) var(--bounce)}
.arrow svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.arrow:active{transform:scale(.92)}
.arrow[disabled]{opacity:.35;cursor:default}
.harrow{position:absolute;z-index:5;top:calc(clamp(26px,3.4vw,48px) + var(--cw)*.18 + var(--fh)/2 - 44px);width:56px;height:88px;border-radius:var(--bom-radius-md);box-shadow:0 0 0 3px var(--bom-paper)}
.harrow.prev{left:max(12px,env(safe-area-inset-left),calc(50% - var(--fw)/2 - var(--fw)*.08 - var(--peek) - 84px))}
.harrow.next{right:max(12px,env(safe-area-inset-right),calc(50% - var(--fw)/2 - var(--fw)*.08 - var(--peek) - 84px))}
@media (hover:none) and (max-width:700px){.harrow{display:none}}
@media (max-width:600px){
  .hero-ctrl{margin-left:max(16px,env(safe-area-inset-left));margin-right:max(16px,env(safe-area-inset-right));gap:8px}
  .dots{padding:0}
  .play{padding:0 18px;gap:8px}
  /* 6+ slides (Ages 8+ since Ammon: Defender): six 44px dots + PLAY don't fit one phone row, so the dots get their
     own centred row and PLAY sits centred under them (every dot stays a 44x44 target). */
  .hero-ctrl:has(.dot:nth-child(6)){flex-direction:column;align-items:center;gap:12px}
  /* 9+ slides (Ages 3–7 since the Old/New Testament games): nine 44px dots are wider than a phone, so they sit in rows of 5 */
  .hero-ctrl:has(.dot:nth-child(9)) .dots{display:grid;grid-template-columns:repeat(5,44px);border-radius:var(--bom-radius-md)}
}
/* landscape phones with 8+ slides: the dots + PLAY row is centred on the screen (24px gutters) instead of hanging off the frame */
@media (orientation:landscape) and (max-height:500px){
  .hero-ctrl:has(.dot:nth-child(8)){margin-left:max(24px,env(safe-area-inset-left));margin-right:max(24px,env(safe-area-inset-right));justify-content:center}
}

/* ============ 2b. COLLECTIONS (2026-10-10) ============
   Toggle buttons on the paper band between the masthead and the strip. Same box as the menu-music button (paper, 3px navy,
   radius sm, navy-700 lip); pressed = the collection's colour (Book of Mormon orange, Old Testament teal, New Testament sage;
   All = navy). The count box is always paper + navy-700 text, so it reads on every fill. */
.colls{background:var(--bom-paper);display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(10px,1.2vw,16px);padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,28px) 0}
.coll{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:4px 10px 4px 8px;background:var(--bom-paper);color:var(--bom-navy-700);border:3px solid var(--bom-navy);
  border-radius:var(--bom-radius-sm);box-shadow:0 4px 0 var(--bom-navy-700);font:700 clamp(.9375rem,.85rem + .3vw,1.125rem)/1.1 var(--bom-font-heading);text-align:left;
  transition:transform var(--bom-motion-base) var(--bounce)}
.coll:active{transform:translateY(3px);box-shadow:0 1px 0 var(--bom-navy-700)}
.coll[aria-pressed="true"]{background:var(--acc);color:var(--on)}
.coll-all[aria-pressed="true"]{background:var(--bom-navy);color:#fff}
.cicon svg{width:30px;height:auto}
.coll-all .cicon svg{width:26px}
.coll-all .cicon rect{fill:var(--bom-navy)}
.coll-all[aria-pressed="true"] .cicon rect{fill:var(--bom-paper)}
.ccount{flex:none;white-space:nowrap;min-width:26px;text-align:center;background:var(--bom-paper);color:var(--bom-navy-700);border:2px solid var(--bom-navy);border-radius:var(--bom-radius-xs);padding:0 5px;font:700 .875rem/1.4 var(--bom-font-heading)}
@media (max-width:560px){
  .colls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .coll{min-width:0}
  .cname{flex:1}
}
@media (orientation:landscape) and (max-height:500px){ .colls{padding-top:10px} .coll{min-height:44px} }

/* collection badge on each strip tile (BOM / OT / NT), bottom centre over the cut-out's feet */
.scol{position:absolute;z-index:2;bottom:6px;left:50%;transform:translateX(-50%);background:var(--bom-paper);color:var(--bom-navy-700);border:2px solid var(--bom-navy);
  border-radius:var(--bom-radius-xs);padding:0 6px;font:700 .8125rem/1.35 var(--bom-font-heading);letter-spacing:.04em}

/* ============ 3. CHARACTER STRIP ============ */
.strip{background:var(--bom-paper);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"prev tiles next";align-items:center;padding:clamp(14px,1.6vw,24px) 0}
/* Looping strip (LOCKED 2026-10-07): arrows always shown, never disabled; clones are aria-hidden + inert */
.stiles{grid-area:tiles;display:flex;gap:clamp(12px,1.7vw,24px);overflow-x:auto;scroll-snap-type:x proximity;padding:6px clamp(16px,2vw,28px) 10px;scroll-padding-inline:clamp(16px,2vw,28px);scrollbar-width:none;overscroll-behavior-x:contain}
.stiles::-webkit-scrollbar{display:none}
.sarrow.prev{grid-area:prev}.sarrow.next{grid-area:next}
.sarrow{width:60px;height:112px;border-radius:var(--bom-radius-md)}
.sarrow.prev{border-radius:0 var(--bom-radius-md) var(--bom-radius-md) 0;padding-left:max(0px,env(safe-area-inset-left))}
.sarrow.next{border-radius:var(--bom-radius-md) 0 0 var(--bom-radius-md);padding-right:max(0px,env(safe-area-inset-right))}
.stile{position:relative;flex:0 0 var(--tw,clamp(96px,11vw,160px));aspect-ratio:2/3;border-radius:var(--bom-radius-sm);border:3px solid var(--bom-navy);
  background:var(--acc);color:var(--on,#fff);overflow:hidden;text-decoration:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;
  transition:transform var(--bom-motion-base) var(--bounce)}
.stile:hover,.stile.clone.hov{transform:translateY(-4px) rotate(-1.5deg)}
.stile:active{transform:scale(.95)}
.stitle{position:relative;z-index:1;text-align:center;padding:clamp(6px,.8vw,12px) 6px 0;font:700 clamp(.9375rem,.75rem + .6vw,1.3rem)/1.05 var(--bom-font-heading)}
.schip{position:relative;z-index:1;margin-top:4px;background:var(--bom-yellow);color:var(--bom-navy-700);border:2px solid var(--bom-navy);border-radius:var(--bom-radius-pill);padding:0 8px;font:700 .9375rem/1.4 var(--bom-font-heading)}
.scut{position:absolute;left:0;right:0;bottom:-24%;}
.stile.soon{border-style:dashed}
/* All games tile = CREAM utility tile, never a game colour (Aaron 2026-10-07 16:01; replaces navy from v0.4.1). Same 3px navy outline as every tile
   + a navy-700 shadow-1 lip so it reads as a tile on the paper band (cream vs paper is only ~1.02:1). Navy-700 text 14.63:1, navy grid icon 10.84:1.
   No game tile is cream, so the "no two neighbouring tiles share a colour" rule holds in every age tab. */
.stile.all{background:var(--bom-cream);color:var(--bom-navy-700);box-shadow:var(--bom-shadow-1);justify-content:space-between;padding:clamp(10px,1.3vw,18px) 6px}
.sgrid svg{width:clamp(64px,7vw,100px);height:auto}
.sall{font:700 clamp(1.5rem,1rem + 1.6vw,2.6rem)/.9 var(--bom-font-heading);text-align:center;text-transform:uppercase}
.sall small{font-size:.62em}
.stile.all .sgrid rect{fill:var(--bom-navy)}
@media (max-width:700px){
  .strip{grid-template-columns:1fr 1fr;grid-template-areas:"tiles tiles" "prev next";gap:10px 22px;padding-bottom:20px}
  .sarrow{height:48px;width:88px;border-radius:var(--bom-radius-sm) !important;padding:0 !important}
  .sarrow.prev{justify-self:end}.sarrow.next{justify-self:start}
}

/* ============ bands (PBS: saturated full-bleed bands, hard straight edges, tone-on-tone pattern) ============ */
.band{position:relative}
.wrap{width:var(--wrap);margin:0 auto;position:relative;z-index:1}
.band h2{display:flex;align-items:center;gap:12px;margin:0 0 clamp(14px,1.6vw,20px);font-size:clamp(1.4rem,1rem + 1.4vw,2rem);font-weight:700;line-height:1.1}
.hicon{width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px);border-radius:50%;display:grid;place-items:center;flex:none;border:3px solid var(--bom-navy)}
.hicon svg{width:58%;height:58%;fill:var(--bom-navy-700);stroke:var(--bom-navy-700);stroke-width:1.5;stroke-linejoin:round}

/* 4. picks */
.picks{background:var(--bom-orange-700) var(--hex-orange) 0 0/56px 100px;color:#fff;padding:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,52px)}
.picks h2{color:#fff}
.picks .hicon{background:var(--bom-yellow)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
@media (max-width:640px){.pgrid{grid-template-columns:minmax(0,1fr);gap:30px}}
.pick{position:relative;display:block;color:inherit;text-decoration:none;transition:transform var(--bom-motion-base) var(--bounce)}
.pick:hover{transform:translateY(-4px) rotate(-.8deg)}
.pick:active{transform:scale(.97)}
.pframe{position:relative;display:block;border:4px solid var(--bom-paper);border-radius:var(--bom-radius-lg);overflow:hidden;background:var(--acc)}
.pframe .art{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.pframe .ideacut{width:28%}
.pick.soon .pframe{border-style:dashed}
.badge{position:absolute;top:-14px;left:-14px;z-index:2;width:clamp(48px,4vw,58px);height:clamp(48px,4vw,58px);border-radius:50%;background:var(--bom-yellow);
  border:4px solid var(--bom-orange-700);display:grid;place-items:center;color:var(--bom-navy-700);font:700 .9375rem/1 var(--bom-font-heading)}
.badge svg{width:55%;height:55%;fill:var(--bom-navy-700)}
.pill{position:absolute;bottom:10px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--bom-radius-pill);padding:4px 12px;font:600 .9375rem/1.3 var(--bom-font-heading);color:#fff;white-space:nowrap}
.pill svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.pl{left:10px;background:var(--bom-sage-800)}
.pr{right:10px;background:rgba(21,39,50,.88);border-radius:var(--bom-radius-sm)}
/* hub fix: on tablets the right pill is hidden, so the scripture pill may use the full width (was 62%, which cut "Moroni 1" to "Moroni") */
@media (min-width:641px) and (max-width:1000px){.pl{max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}.pr{display:none}}
/* hub fix: game titles are never cut off (wrap, balanced); the one-line description may use two lines before it ellipsises */
.pt{display:block;margin-top:12px;text-align:center;font:700 clamp(1.1rem,.9rem + .5vw,1.3rem)/1.2 var(--bom-font-heading);text-wrap:balance}
.ps{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-align:center;font-size:.9375rem;line-height:1.35;overflow:hidden}

/* 5. seasonal row (reading) */
.reading{background:var(--bom-sage) var(--hex-sage) 0 0/56px 100px;color:var(--bom-navy-700);padding:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,52px)}
.reading .hicon{background:var(--bom-paper)}
.sample{font:700 .9375rem/1 var(--bom-font-body);background:var(--bom-paper);color:var(--bom-navy);padding:5px 9px;border-radius:var(--bom-radius-xs);border:2px solid var(--bom-navy)}
.row-note{margin:-6px 0 18px;max-width:62ch;font-weight:600}
.bento{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,2.2vw,32px);align-items:start}
.bbig,.bcol>*{min-width:0}
.bcol{display:grid;min-width:0;gap:clamp(18px,2.2vw,28px)}
.reading .badge{border-color:var(--bom-sage)}
.readcard{background:var(--bom-paper);border:4px solid var(--bom-paper);box-shadow:0 0 0 3px var(--bom-navy);border-radius:var(--bom-radius-lg);padding:14px 16px}
.readcard b{font:700 1.3rem/1.15 var(--bom-font-heading);display:block;margin:6px 0 4px}
.readcard p{margin:0;max-width:44ch}
.rc-ic{width:44px;height:44px;border-radius:50%;background:var(--bom-sage-200);border:3px solid var(--bom-navy);display:grid;place-items:center}
.rc-ic svg{width:24px;height:24px;fill:none;stroke:var(--bom-navy-700);stroke-width:2.2;stroke-linejoin:round}
body[data-age="37"] .readcard p,body[data-age="37"] .row-note{font-family:var(--bom-font-early);font-size:1.125rem}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}}

/* 6. topic tiles */
.more{background:var(--bom-yellow) var(--hex-yellow) 0 0/56px 100px;color:var(--bom-navy-700);padding:clamp(24px,3vw,40px) 0 clamp(32px,3.6vw,52px)}
.more .hicon{background:var(--bom-navy)} .more .hicon svg{fill:var(--bom-yellow);stroke:var(--bom-yellow)}
.topics{display:grid;grid-template-columns:repeat(4,minmax(0,210px));justify-content:center;gap:clamp(14px,2.2vw,28px)}
@media (max-width:640px){.topics{grid-template-columns:repeat(2,1fr)}}
.topic{aspect-ratio:1;border-radius:var(--bom-radius-md);border:3px solid var(--bom-navy);background:var(--acc);color:var(--on);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;
  box-shadow:var(--bom-shadow-2);transition:transform var(--bom-motion-base) var(--bounce)}
.topic:hover{transform:translateY(-4px) rotate(1.5deg)} .topic:active{transform:scale(.95)}
.ticon svg{width:clamp(56px,6vw,84px);height:auto}
.topic b{font:700 clamp(1rem,.85rem + .5vw,1.25rem)/1.1 var(--bom-font-heading)}
.tchip{background:var(--bom-paper);color:var(--bom-navy-700);border-radius:var(--bom-radius-pill);padding:1px 10px;font:600 .9375rem/1.4 var(--bom-font-heading);border:2px solid var(--bom-navy)}

/* ============ 7. FOOTER ============ */
.foot{background:var(--bom-navy);color:#fff;text-align:center;border-top:3px solid var(--bom-navy-700);
  padding:clamp(20px,2.4vw,32px) max(20px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.flinks{display:flex;justify-content:center;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,32px)}
.flinks a{color:var(--bom-yellow);font:700 clamp(1.15rem,1rem + .4vw,1.4rem)/1 var(--bom-font-heading);text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 4px}
.promise{margin:10px 0 4px}
.fdesi{width:72px;height:72px;margin:10px auto}
.indep{max-width:60ch;margin:6px auto;color:var(--bom-navy-100);font-size:.9375rem}
.legal{display:flex;justify-content:center;gap:18px;margin:4px 0}
.legal a{color:#fff;font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center}
.contact{margin:6px 0;font-size:.9375rem}
.contact a{color:var(--bom-yellow);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.pub{color:var(--bom-navy-100);font-size:.9375rem;margin:4px 0 0}

/* Coming-soon items on the live hub: no href, aria-disabled, never a dead link; they don't lift or press like real links */
[aria-disabled="true"]{cursor:default}
.stile.soon:hover,.stile.soon:active,.pick.soon:hover,.pick.soon:active,.topic.soon:hover,.topic.soon:active{transform:none}
.topic.soon{border-style:dashed}
.play.soon:hover,.play.soon:active{transform:none}

/* ============ landscape phones: compact masthead row (PBS /games compact header pattern) ============ */
@media (orientation:landscape) and (max-height:500px){
  :root{--disc:92px;--desi:84px;--logo:52px;--fw:min(270px,36vw);--cw:calc(var(--fw)*.42);--cr:-.55}
  .mast{display:flex;align-items:center;gap:12px;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left)) !important}
  .mast-top{display:contents}
  .logo{order:0}
  .ages{order:1;flex:1;margin:0;padding:0}.tabs{gap:calc(var(--desi) + 36px);min-height:0}
  .grownups{order:2;width:48px;padding:0;justify-content:center;margin:0}.grownups span{position:absolute;left:-999px}
  .mast-btns{order:2}.music-btn{margin:0}
  .disc[aria-selected=false]{transform:scale(.9)}
  .hero{padding:12px 0 10px}
  .hero-ctrl{margin-top:12px}
  .play{min-height:50px}
}

@media (prefers-reduced-motion:reduce){
  .desi,.desi.hop{animation:none}
  *{transition:none !important}
}

/* FREE-NOTICE (temporary, 2026-10-14): the "free in full for a limited time" band above the masthead. Delete this block with the
   FREE-NOTICE block in index.html. While it shows, it takes the notch/status-bar inset instead of the masthead. */
.free-note{position:relative;z-index:4;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;
  background:var(--bom-yellow);color:var(--bom-navy-700);border-bottom:3px solid var(--bom-navy-700);
  padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
.free-note[hidden]{display:none}
.free-note:not([hidden])~.mast{padding-top:0}
.free-msg{grid-column:2;margin:0;text-align:center;font:600 clamp(1rem,.9rem + .45vw,1.3rem)/1.3 var(--bom-font-heading);letter-spacing:.01em;text-wrap:balance}
.free-sub{display:block;font:600 clamp(.95rem,.88rem + .2vw,1.05rem)/1.4 var(--bom-font-body)}
.free-x{grid-column:3;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:var(--bom-radius-sm);color:var(--bom-navy-700)}
.free-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.free-x:hover{background:rgba(21,39,50,.1)}
@media (min-width:900px),(orientation:landscape) and (max-height:500px){.free-sub{display:inline}}

/* ---------- device-only games (home.js DEVICE_ONLY + deviceKind()) ----------
   On the platform a game doesn't suit, its tile is muted (desaturated + a light wash) and its link is disabled. Hover, keyboard
   focus, or a tap (.tapped, 2 s) mutes it further (grey + dark scrim) and shows "Only on Mobile" / "Only on Desktop" on top. */
.stile.devoff,.pick.devoff .pframe,.slide.devoff .frame{filter:saturate(.3);transition:filter var(--bom-motion-base)}
.pick.devoff .pt,.pick.devoff .ps,.pick.devoff .badge,.slide.devoff .cut{opacity:.7}
.stile.devoff::after,.pick.devoff .pframe::after,.slide.devoff .frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:rgba(255,253,247,.3);transition:background var(--bom-motion-base)}
.donly{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;pointer-events:none;
  opacity:0;transition:opacity var(--bom-motion-base)}
.donly b{background:var(--bom-navy-700);color:#fff;border:2px solid #fff;border-radius:var(--bom-radius-sm);padding:6px 10px;
  font:700 clamp(.9375rem,.8rem + .5vw,1.25rem)/1.15 var(--bom-font-heading);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.stile.devoff.tapped,.stile.devoff:focus-visible,.pick.devoff.tapped .pframe,.pick.devoff:focus-visible .pframe,.slide.devoff.tapped .frame{filter:grayscale(1)}
.stile.devoff.tapped::after,.stile.devoff:focus-visible::after,.pick.devoff.tapped .pframe::after,.pick.devoff:focus-visible .pframe::after,
.slide.devoff.tapped .frame::after{background:rgba(23,38,48,.62)}
.devoff.tapped .donly,.devoff:focus-visible .donly{opacity:1}
@media (hover: hover){ /* touch screens keep :hover stuck after a tap, so hover only counts where there is a real hover */
  .stile.devoff:hover,.stile.devoff.hov,.pick.devoff:hover .pframe,.slide.devoff:hover .frame{filter:grayscale(1)}
  .stile.devoff:hover::after,.stile.devoff.hov::after,.pick.devoff:hover .pframe::after,.slide.devoff:hover .frame::after{background:rgba(23,38,48,.62)}
  .devoff:hover .donly,.devoff.hov .donly{opacity:1}
}
.stile.devoff:hover,.stile.devoff.hov,.stile.devoff:active,.pick.devoff:hover,.pick.devoff:active{transform:none}
[aria-disabled="true"].devoff{cursor:not-allowed}
.play.devoff{background:var(--bom-sand);color:var(--bom-navy-700);box-shadow:none;border-style:dashed;text-transform:none;letter-spacing:0}
.play.devoff svg{display:none}
.play.devoff:hover,.play.devoff:active{transform:none}
@media (prefers-reduced-motion: reduce){.devoff,.devoff *,.devoff::after{transition:none !important}}

/* "We've moved" note (old domain only; hidden attribute = off). Same shape as the free note, navy so it reads as different. */
.moved-note{position:relative;z-index:5;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:6px 8px;background:var(--bom-navy-700);color:#fff}
.moved-note[hidden]{display:none}
.moved-msg{grid-column:2;text-align:center;color:#fff;text-decoration:underline;text-underline-offset:3px;font:700 clamp(1rem,.9rem + .45vw,1.3rem)/1.3 var(--bom-font-heading);min-height:44px;display:flex;align-items:center;justify-content:center}
.moved-x{grid-column:3;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:var(--bom-radius-sm);color:#fff}
.moved-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}