/* Spiros collection: cinematic blue, clear hierarchy and tactile game covers. */
:root { --nav-h:80px; --text-secondary:#b5c0d3; --text-tertiary:#929eb3; --accent:#00bfff; }
body { background:#070a10; }
[hidden] { display:none !important; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:200; background:#fff; color:#000; padding:12px 20px; }
.skip-link:focus { top:12px; }
.nav { padding-inline:max(32px,calc((100vw - 1312px)/2)); background:rgba(7,10,16,.9); border-color:#ffffff12; gap:24px; }
.brand { gap:10px; }
.brand .mark { width:36px; height:36px; }
.brand span { font-size:14px; letter-spacing:.12em; }
.nav .links { gap:8px; margin-left:16px; }
.nav .links a { min-height:44px; display:flex; align-items:center; padding:10px 16px; font-size:14px; }
.nav .count { text-transform:none; letter-spacing:0; font-size:12px; }
.motion-btn { border:1px solid #ffffff26; border-radius:30px; padding:10px 14px; min-height:44px; color:#b5c0d3; background:#ffffff05; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.motion-btn:hover { border-color:#82c6ff; color:#fff; }
.hero { height:auto; min-height:730px; padding:calc(var(--nav-h) + 38px) max(32px,calc((100vw - 1312px)/2)) 28px; display:grid; grid-template-columns:minmax(0, .87fr) minmax(0,1.13fr); grid-template-rows:auto minmax(420px,auto) auto; column-gap:24px; background:radial-gradient(ellipse at 77% 42%,#072d55 0%,#081626 36%,#070a10 72%); overflow:hidden; border-bottom:1px solid #ffffff12; }
.hero-heading { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid #ffffff12; }
.eyebrow { font-size:10px; font-weight:650; letter-spacing:.18em; color:#94a6bf; text-transform:uppercase; }
.edition { color:#7c90ac; font:10px ui-monospace,monospace; letter-spacing:.1em; }
.edition span { margin:0 15px; color:#4baaff; }
.stage { grid-column:2; grid-row:2; width:100%; height:460px; min-height:0; background:none; align-self:center; }
.stage canvas { mix-blend-mode:normal; }
.stage-label { position:absolute; top:22px; left:24px; right:24px; display:flex; justify-content:space-between; color:#748fac; font:9px ui-monospace,monospace; letter-spacing:.12em; z-index:1; pointer-events:none; }
.detail { grid-column:1; grid-row:2; margin:0; padding:44px 0 40px; width:100%; background:none; display:block; align-self:center; }
.feature-label { font-size:11px; letter-spacing:.19em; color:#9ecaf7; margin-bottom:30px; display:flex; align-items:center; gap:10px; }
.feature-label::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 18px var(--accent); }
.kind { padding:0; background:none; border:0; font-size:12px; font-weight:500; color:var(--accent); margin-bottom:12px; letter-spacing:.06em; }
.detail h1 { font-size:clamp(46px,5.7vw,82px); line-height:1.02; letter-spacing:-.06em; font-weight:750; margin-bottom:22px; text-wrap:balance; }
.detail .blurb { font-size:16px; line-height:1.8; max-width:470px; margin-bottom:22px; }
.tags { gap:0; margin-bottom:30px; }
.tags span { padding:0; background:none; color:#97a9c0; font-size:11px; border:0; letter-spacing:0; }
.tags span + span::before { content:'·'; padding:0 10px; color:#5c718b; }
.tags .mine { background:none; border:0; color:#a9dcff; }
.btn-primary { min-height:52px; border-radius:8px; background:#eaf4ff; color:#072343; box-shadow:0 0 28px #168cff19; padding:14px 28px; font-size:14px; }
.btn-primary::after { content:'↗'; font-size:20px; margin-left:16px; }
.btn-primary:hover { background:#fff; box-shadow:0 6px 30px #168cff35; }
.btn-secondary { min-height:52px; border-radius:8px; border:1px solid #ffffff2b; font-size:13px; padding-inline:20px; background:#ffffff03; }
.hero-picker { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; border-top:1px solid #ffffff12; }
.picker { gap:14px; min-width:0; }
.picker .arrow { background:transparent; border:1px solid #ffffff24; flex-shrink:0; }
.dots { gap:8px; }
.dots button { width:auto; min-height:64px; height:auto; border-radius:8px; border:1px solid transparent; display:flex; gap:12px; padding:8px 14px 8px 8px; font:inherit; font-size:12px; text-align:left; color:#94a6bd; transition:background .25s,border-color .25s; }
.dots button img { width:44px; height:44px; border-radius:4px; }
.dots button:hover { background:#ffffff09; }
.dots button[aria-current="true"] { background:#19344d80; border-color:#85b8e66b; color:#fff; }
.hint { font-size:11px; max-width:180px; line-height:1.8; text-align:right; }
.hint kbd { font-size:10px; }
.poster { padding:0; perspective:900px; }
.poster > img { position:relative; z-index:2; width:42%; max-width:280px; border:8px solid #132235; border-bottom-width:30px; border-radius:12px; transform:rotateY(-8deg) rotateX(3deg); box-shadow:12px 24px 70px #000a,0 0 55px #0070d126; }
.fallback-side { position:absolute; width:31%; background:#172336; border:5px solid #172336; border-bottom-width:22px; border-radius:10px; opacity:.58; cursor:pointer; top:50%; box-shadow:0 20px 45px #0008; }
.fallback-side img { width:100%; display:block; border-radius:3px; }
.fallback-side.left { left:2%; transform:translateY(-50%) rotateY(26deg) scale(.88); }
.fallback-side.right { right:2%; transform:translateY(-50%) rotateY(-26deg) scale(.88); }
.fallback-side:hover { opacity:1; }
html.has3d .poster { visibility:hidden; }
.gameplay { max-width:1312px; margin:0 auto; padding:38px 0; display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid #ffffff12; }
.gameplay h2 { font-size:28px; letter-spacing:-.04em; font-weight:600; margin:6px 0; }
.gameplay p { font-size:13px; color:#8c9eb7; }
.screens { gap:16px; margin:0; padding:0; overflow:visible; }
.screens button { width:92px; border-radius:8px; box-shadow:0 8px 24px #0006,0 0 0 1px #ffffff20; }
.library { max-width:1376px; padding:64px 32px 72px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-heading h2 { font-size:36px; letter-spacing:-.04em; margin:8px 0 0; }
.section-heading p { font-size:12px; color:#8c9eb7; padding-bottom:5px; }
.grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card { background:#101620; border:1px solid #ffffff0e; border-radius:12px; }
.card:hover { transform:translateY(-6px); box-shadow:0 18px 48px #0005; border-color:#8ecaff55; }
.card .cover { aspect-ratio:1.5; display:grid; place-items:center; background:radial-gradient(ellipse at center,#133858,#0b1829); }
.card[data-slug="little-lanes"] .cover { background:radial-gradient(ellipse at center,#5f5640,#25241f); }
.card[data-slug="family-worship-quest"] .cover { background:radial-gradient(ellipse at center,#544765,#282135); }
.card .body { padding:22px; }
.card .title { font-size:22px; letter-spacing:-.025em; margin-bottom:4px; }
.card .meta { font-size:11px; color:#9caec4; }
.card-description { font-size:13px; line-height:1.7; color:#9caec4; margin-top:18px; min-height:44px; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff10; margin-top:20px; padding-top:16px; }
.card-bottom > span:first-child { color:#8d9eb4; font-size:9px; letter-spacing:.12em; }
.card-play { font-size:13px; font-weight:600; }
.card-play span { margin-left:16px; font-size:18px; color:#a9d7ff; }
.boards { max-width:1376px; padding-inline:32px; scroll-margin-top:104px; }
.bgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.board { background:#101620; }
.seg button { min-height:40px; }
footer { max-width:1312px; margin:auto; padding:30px 0 44px; text-align:left; font-size:12px; line-height:1.8; }
.footer-brand { display:flex; justify-content:space-between; font-size:14px; font-weight:700; letter-spacing:.13em; color:#c9d6e7; margin-bottom:20px; }
.footer-brand span { font-size:28px; color:#6ba4d8; line-height:1; }
html.motion-off *,html.motion-off *::before,html.motion-off *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media(min-width:768px) { .detail .copy { animation:arrive .6s ease both; } @keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }
@media(max-width:1400px) { .gameplay,footer { margin-inline:32px; } }
@media(max-width:1100px) { .nav .count { display:none; } .motion-btn { margin-left:auto; } .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .detail h1 { font-size:58px; } .hint { display:none; } .hero-picker { justify-content:center; } .stage-label { left:0; right:0; } }
@media(max-width:767px) {
 :root { --nav-h:68px; }
 .nav { padding-inline:20px; gap:10px; } .brand span { font-size:11px; letter-spacing:.08em; } .brand .mark { width:28px; height:28px; }
 .nav .links { display:flex; margin:0 0 0 auto; } .nav .links a { padding:8px; font-size:12px; } #navBoards { display:none; }
 .motion-btn { margin-left:0; font-size:10px; padding:8px 10px; }
 .hero { padding:calc(var(--nav-h) + 24px) 20px 24px; grid-template-columns:1fr; grid-template-rows:auto auto auto auto; gap:0; min-height:0; background:radial-gradient(ellipse at 70% 25%,#0a2b49,#070a10 70%); }
 .hero-heading { padding-bottom:16px; } .hero-heading .eyebrow { font-size:9px; letter-spacing:.11em; } .edition { display:none; }
 .stage { grid-row:2; grid-column:1; height:280px; min-height:0; }
 .stage-label { top:14px; font-size:8px; }
 .detail { grid-row:3; grid-column:1; padding:0 0 28px; }
 .feature-label { display:none; } .kind { font-size:11px; margin-bottom:10px; }
 .detail h1 { font-size:52px; margin-bottom:16px; max-width:560px; }
 .detail .blurb { font-size:14px; line-height:1.75; margin-bottom:18px; }
 .tags { margin-bottom:24px; } .tags span { font-size:10px; }
 .hero-picker { grid-row:4; padding-top:18px; }
 .picker { width:100%; gap:6px; justify-content:space-between; }
 .picker .arrow { width:36px; height:44px; border:none; }
 .dots { flex:1; justify-content:center; gap:8px; }
 .dots button { min-height:54px; padding:5px; } .dots button img { width:44px; height:44px; } .dots button span { display:none; }
 .gameplay { margin:0 20px; padding:28px 0; gap:20px; flex-direction:column; align-items:stretch; }
 .gameplay-copy { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px; }
 .gameplay-copy .eyebrow { grid-column:1/-1; font-size:9px; }
 .gameplay h2 { font-size:24px; } .gameplay p { font-size:10px; max-width:145px; text-align:right; }
 .screens { justify-content:space-between; gap:14px; } .screens button { width:calc((100% - 28px)/3); max-width:150px; }
 .library { padding:40px 20px 48px; }
 .section-heading { display:block; margin-bottom:24px; } .section-heading h2 { font-size:30px; } .section-heading p { margin-top:10px; }
 .grid { grid-template-columns:1fr; gap:20px; }
 .card .cover { aspect-ratio:1.65; } .card .body { padding:20px; } .card .title { font-size:23px; } .card-description { min-height:0; margin-top:12px; }
 .boards { padding:0 20px 48px; } .bgrid { grid-template-columns:minmax(0,1fr); }
 footer { margin-inline:20px; padding-top:28px; }
}
@media(max-width:360px) { .nav { padding-inline:14px; } .brand span { font-size:10px; } .nav .links { display:none; } .motion-btn { margin-left:auto; } .detail h1 { font-size:46px; } .gameplay p { max-width:110px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
/* Blend the renderer into the page without sacrificing the physical cover edges. */
.stage canvas { mask-image:radial-gradient(ellipse 70% 65% at 50% 52%,#000 48%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 52%,#000 48%,transparent 100%); }
.detail .copy { animation:none; }

/* Rounded app artwork, matching the Worship icon throughout the collection. */
.card .cover img { width:60%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:22%; background:none; }
.dots button img,.board header img,.fallback-side img { border-radius:22%; }
.poster > img { border-radius:22%; }