/* Fun Bible Sunday School: hub + lesson. Lantern night colours; each age has its own accent and feel. */
:root{--night:#120828;--deep:#0b0420;--surf:#1d0f42;--surf2:#28165c;--line:#3a2482;--ink:#f6f1ff;--mute:#c4b5ef;
  --neon:#eeff41;--violet:#b14bff;--pink:#ff4fb8;--cyan:#3ee6ff;--mint:#4dffb0;--on:#1a0b33;
  --acc:var(--neon);--acc2:var(--mint);--r:24px;--fs:1.12rem}
/* Kids 6–9: bright, bouncy, bigger */
body[data-age=kids]{--acc:#eeff41;--acc2:#4dffb0;--r:28px;--fs:1.22rem}
/* Juniors 10–14: cooler, sharper */
body[data-age=jun]{--acc:#3ee6ff;--acc2:#b14bff;--r:14px;--fs:1.1rem}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px;background:var(--night)}
body{margin:0;min-height:100vh;color:var(--ink);font:600 var(--fs)/1.6 'Nunito',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(1100px 560px at 50% -180px,#2a1260 0%,var(--night) 62%) fixed,var(--night)}
body[data-age=kids]{background:radial-gradient(900px 500px at 15% -120px,rgba(77,255,176,.18),transparent 60%),radial-gradient(900px 500px at 90% -80px,rgba(238,255,65,.14),transparent 60%),var(--night) fixed}
body[data-age=jun]{background:radial-gradient(900px 500px at 85% -120px,rgba(62,230,255,.16),transparent 60%),radial-gradient(900px 500px at 10% -80px,rgba(177,75,255,.2),transparent 60%),var(--night) fixed}
button{font:inherit;color:inherit}
a{color:var(--acc)}
h1,h2,h3{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;line-height:1.2;margin:.1em 0 .45em}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* top bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;
  background:rgba(18,8,40,.93);backdrop-filter:blur(10px);border-bottom:1px solid rgba(58,36,130,.7)}
.ibtn{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:var(--surf);color:var(--ink);text-decoration:none;cursor:pointer}
.bar__title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.bar__title b{font:600 1.3rem 'Fredoka',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__title span{font-size:.85rem;color:var(--mute)}
.agepill{display:flex;gap:4px;padding:4px;border-radius:99px;background:var(--deep);border:1px solid var(--line)}
.agepill button{border:0;background:transparent;color:var(--mute);padding:8px 14px;border-radius:99px;font:700 .92rem 'Fredoka',sans-serif;cursor:pointer;white-space:nowrap}
.agepill button[aria-pressed=true]{background:var(--acc);color:var(--on)}

main{max-width:980px;margin:0 auto;padding:20px 16px 120px}

/* hub */
.hubhero{text-align:center;padding:26px 10px 10px}
.hubhero h1{font-size:clamp(2rem,6vw,3rem);margin:0}
.hubhero p{color:var(--mute);max-width:44ch;margin:8px auto 0;font-size:1.15rem}
.agepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0}
.agecard{position:relative;text-align:left;cursor:pointer;border-radius:26px;padding:22px;border:3px solid var(--line);background:var(--surf);color:var(--ink);transition:transform .15s}
.agecard:hover{transform:translateY(-3px)}
.agecard .em{font-size:3rem;line-height:1}
.agecard h2{font-size:1.7rem;margin:10px 0 4px}
.agecard p{margin:0;color:var(--mute);font-size:1rem}
.agecard--kids{border-color:#4dffb0;background:linear-gradient(160deg,#173d3a,#1d0f42)}
.agecard--jun{border-color:#3ee6ff;background:linear-gradient(160deg,#10304a,#1d0f42)}
.agecard--lead{border-color:#eeff41;background:linear-gradient(160deg,#36381a,#1d0f42)}
.agecard[aria-pressed=true]::after{content:'✓ Selected';position:absolute;top:16px;right:16px;background:var(--acc);color:var(--on);font:700 .85rem 'Fredoka';padding:4px 10px;border-radius:99px}
.theme{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:18px 0}
.theme__head{display:flex;gap:14px;align-items:center}
.theme__head .em{font-size:2.6rem}
.theme__head p{margin:0;color:var(--mute)}
.sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:16px}
.sess{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:18px;background:var(--deep);border:2px solid var(--line);text-decoration:none;color:var(--ink);min-height:118px}
.sess .num{font:700 .85rem 'Fredoka';color:var(--mute)}
.sess b{font:600 1.15rem 'Fredoka',sans-serif}
.sess small{color:var(--mute)}
.sess--ready{border-color:var(--acc);box-shadow:0 0 24px color-mix(in srgb,var(--acc) 25%,transparent)}
.sess--ready .num{color:var(--acc)}
.sess--soon{opacity:.55}
.sess .done{margin-top:auto;font:700 .9rem 'Fredoka';color:var(--acc2)}
.coming{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.coming span{padding:8px 14px;border-radius:99px;background:var(--surf);border:1px dashed var(--line);color:var(--mute);font-weight:700}
.leaderbox{margin-top:24px;padding:18px 20px;border-radius:var(--r);border:2px dashed var(--neon);background:rgba(238,255,65,.06)}

/* lesson hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center;background:var(--surf);border:2px solid var(--line);border-radius:var(--r);padding:22px}
body[data-age=kids] .hero{border-color:rgba(77,255,176,.6)}
body[data-age=jun] .hero{border-color:rgba(62,230,255,.55)}
.hero h1{font-size:clamp(1.9rem,5vw,2.7rem);margin:4px 0}
.hero .sub{font:600 1.25rem 'Fredoka';color:var(--acc);margin:0 0 10px}
.agebadge{display:inline-flex;gap:8px;align-items:center;padding:6px 14px;border-radius:99px;background:var(--acc);color:var(--on);font:700 .95rem 'Fredoka'}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--deep);border:1px solid var(--line);padding:4px 12px;border-radius:99px;font-weight:700;font-size:.88rem}
.bigidea{padding:14px 16px;border-radius:calc(var(--r) - 6px);font-weight:800;color:var(--on);background:linear-gradient(135deg,var(--acc),var(--acc2))}
.hero__art{width:100%;border-radius:calc(var(--r) - 6px);background:#fff;display:block}

/* tabs */
.tabs{position:sticky;top:69px;z-index:15;display:flex;gap:8px;flex-wrap:wrap;padding:12px 0;margin:14px 0 6px;background:rgba(18,8,40,.93);backdrop-filter:blur(10px)}
.tab{border:2px solid var(--line);background:var(--surf);color:var(--ink);padding:10px 18px;border-radius:99px;font:700 1.02rem 'Fredoka';cursor:pointer}
.tab[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:var(--on)}
.panel[hidden]{display:none}

/* steps */
.dots{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--surf2);font:700 1rem 'Fredoka';cursor:pointer;color:var(--ink)}
body[data-age=jun] .dot{border-radius:12px}
.dot.on{background:var(--acc);border-color:var(--acc);color:var(--on)}
.dot.done{background:var(--acc2);border-color:var(--acc2);color:var(--on)}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:18px}
.card h2{font-size:1.65rem;display:flex;align-items:center;gap:10px}
.card h2 .n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--acc);color:var(--on);font-size:1.1rem}
body[data-age=jun] .card h2 .n{border-radius:10px}
.card p{max-width:66ch}
.vid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.vid video{width:100%;border-radius:18px;border:3px solid var(--line);background:#000;display:block}
.verse{font:500 1.12rem/1.65 'Lora',serif;background:var(--deep);border-left:5px solid var(--acc);padding:12px 16px;border-radius:12px}
.verse sup{color:var(--acc);font:700 .75rem 'Fredoka';margin-right:2px}
.note{color:var(--mute);font-size:.92rem;font-style:italic}
.btn{display:inline-flex;gap:8px;align-items:center;border:0;cursor:pointer;text-decoration:none;font:700 1.05rem 'Fredoka';background:var(--acc);color:var(--on);padding:12px 22px;border-radius:99px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn svg{width:20px;height:20px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.play{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:10px 12px 10px 10px;border-radius:99px;background:var(--deep);border:2px solid var(--acc);max-width:520px}
.play button{width:50px;height:50px;flex:none;border-radius:50%;border:0;background:var(--acc);color:var(--on);display:grid;place-items:center;cursor:pointer}
.play button svg{fill:currentColor;stroke:none}
.play .meta{flex:1;min-width:0}
.play .meta b{display:block;font:600 1rem 'Fredoka'}
.play .bar2{height:8px;border-radius:9px;background:var(--surf2);overflow:hidden;margin-top:4px}
.play .bar2 i{display:block;height:100%;width:0;background:var(--acc)}
.play time{font-size:.85rem;color:var(--mute);white-space:nowrap}
.read p{font-size:calc(var(--fs) * 1.02);transition:background .3s,color .3s;border-radius:10px;padding:2px 6px;margin:0 -6px .8em}
.read p.now{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.q{margin:0 0 18px}
.q > p{font-weight:800;margin:0 0 8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:12px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surf2);color:var(--ink);font:700 1rem 'Nunito';cursor:pointer;text-align:left}
body[data-age=kids] .opt{font-size:1.15rem;padding:14px 20px;border-radius:22px}
body[data-age=jun] .opts{flex-direction:column}
.opt.right{background:var(--mint);border-color:var(--mint);color:var(--on)}
.opt.wrong{background:#5a1a3a;border-color:var(--pink)}
.score{font:700 1.2rem 'Fredoka';color:var(--acc)}
.colour{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:center}
.colour img{width:100%;background:#fff;border-radius:16px;display:block}
.ws{display:grid;gap:4px;user-select:none;max-width:560px;touch-action:manipulation}
.ws b{display:grid;place-items:center;aspect-ratio:1;background:var(--deep);border-radius:10px;font:600 clamp(1rem,3.4vw,1.45rem) 'Fredoka';cursor:pointer;border:2px solid transparent}
.ws b.sel{border-color:var(--acc);background:var(--surf2)}
.ws b.found{background:var(--acc2);color:var(--on)}
.wlist{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.wlist span{padding:5px 14px;border-radius:99px;background:var(--surf2);font:700 1rem 'Fredoka'}
.wlist span.got{background:var(--acc2);color:var(--on);text-decoration:line-through}
.clue{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.clue input{width:13ch;font:700 1.05rem 'Fredoka';text-transform:uppercase;letter-spacing:.12em;padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:var(--deep);color:var(--ink)}
.clue input.ok{border-color:var(--mint);color:var(--mint)}
.det{display:grid;gap:10px}
.det div{padding:12px 14px;border-radius:12px;background:var(--deep);border:1px solid var(--line)}
.det b{color:var(--acc);font-family:'Fredoka'}
.det details summary{cursor:pointer;color:var(--mute);font-size:.95rem;margin-top:4px}
.det details[open] summary{color:var(--mint)}
textarea{width:100%;min-height:100px;border-radius:14px;background:var(--deep);color:var(--ink);border:2px solid var(--line);padding:12px;font:600 1rem 'Nunito'}
.mv{display:flex;gap:8px;flex-wrap:wrap;min-height:60px;padding:10px;border:2px dashed var(--line);border-radius:16px;margin:10px 0}
.mv--in{border-style:solid}
.mv button{padding:9px 14px;border-radius:12px;border:0;background:var(--acc);color:var(--on);font:700 1.05rem 'Nunito';cursor:pointer}
.mv--out button{background:var(--acc2)}
.blank{display:inline-block;min-width:4ch;border-bottom:3px solid var(--acc);text-align:center;color:var(--acc)}
.sticker{text-align:center;padding:20px 10px 4px}
.sticker .s{font-size:5rem;line-height:1;filter:drop-shadow(0 0 22px var(--acc))}
.sticker.got .s{animation:pop .6s ease}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
ul.tick{padding-left:1.2em}ul.tick li{margin:4px 0}
ol.steps li{margin:6px 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:'Fredoka';color:var(--acc)}
td:first-child{white-space:nowrap;font-weight:800;color:var(--acc)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* printouts: A4 sheets */
.pickbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.pickbar label{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:99px;background:var(--surf);border:1px solid var(--line);font-weight:700;font-size:.95rem;cursor:pointer}
.sheets{display:grid;gap:30px;justify-items:center;overflow-x:auto}
.sheet{width:210mm;min-height:297mm;background:#fff;color:#111;padding:13mm 14mm 24mm;position:relative;box-shadow:0 10px 40px #0009;
  font:500 11.5pt/1.45 'Nunito',sans-serif}
.sheet h1{font:600 22pt 'Fredoka';color:#2a0f63;margin:1mm 0}
.sheet h2{font:600 14pt 'Fredoka';color:#2a0f63;margin:5mm 0 2mm}
.sheet h3{font:600 12pt 'Fredoka';color:#2a0f63;margin:3mm 0 1mm}
.sheet p{margin:1.5mm 0}
.sheet ul,.sheet ol{margin:1mm 0;padding-left:6mm}
.shead{display:flex;justify-content:space-between;gap:6mm;align-items:flex-start;border-bottom:3px solid #2a0f63;padding-bottom:3mm;margin-bottom:4mm}
.brand{font:700 10pt 'Fredoka';color:#6d1fc0;text-align:right;white-space:nowrap}
.tag{display:inline-block;font:700 9pt 'Fredoka';padding:1mm 3mm;border-radius:99px;background:#eeff41;color:#1a0b33}
.sheet--kids .tag{background:#4dffb0}
.sheet--jun .tag{background:#3ee6ff}
.findit{border:2px solid #2a0f63;border-radius:4mm;padding:3mm 4mm;margin:3mm 0;background:#f6f1ff}
.findit b{color:#2a0f63}
.sheet .verse{background:#f6f1ff;color:#111;border-left-color:#6d1fc0;font-size:11pt;border-radius:2mm}
.sheet .verse sup{color:#6d1fc0}
.sheet table th{color:#2a0f63;border-bottom:2px solid #2a0f63;padding:1.6mm 2mm}
.sheet table td{color:#111;border-bottom:1px solid #ccc;padding:1.2mm 2mm;font-size:9.8pt;line-height:1.35}
.sheet td:first-child{color:#2a0f63}
.foot{position:absolute;left:14mm;right:14mm;bottom:8mm;font-size:7.3pt;color:#555;border-top:1px solid #ccc;padding-top:2mm;display:flex;justify-content:space-between;gap:6mm}
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4mm}
.strip figure{margin:0;border:2px solid #2a0f63;border-radius:3mm;overflow:hidden;break-inside:avoid}
.strip img{width:100%;display:block;aspect-ratio:540/430;object-fit:cover}
.strip figcaption{padding:2mm 3mm;font:500 11pt/1.4 'Lora',serif;min-height:24mm}
.strip figcaption i{font:700 10pt 'Fredoka';font-style:normal;color:#6d1fc0;margin-right:1mm}
.colsheet img{width:100%;display:block;margin-top:2mm}
.wsp{display:grid;border:2px solid #111;width:112mm}
.wsp b{display:grid;place-items:center;aspect-ratio:1;font:600 14pt 'Fredoka';border:.5px solid #ddd}
.ws2{display:grid;grid-template-columns:auto 1fr;gap:7mm;align-items:start}
.wordsp{font:700 12pt 'Fredoka';line-height:1.9}
.circleq p{margin:2mm 0}
.circleq span{display:inline-block;border:1.5px solid #999;border-radius:99px;padding:0 3mm;margin:1mm 2mm 0 0;font-size:10.5pt}
.boxes{display:inline-flex;gap:1mm}
.boxes i{width:6.5mm;height:6.5mm;border:1.5px solid #111;display:inline-block}
.pclue{display:flex;justify-content:space-between;align-items:center;gap:4mm;margin:2mm 0;font-size:10.5pt}
.lines div{border-bottom:1px solid #999;height:8.5mm}
.drawbox{border:2px dashed #6d1fc0;border-radius:4mm;padding:3mm 4mm;margin-top:3mm;min-height:40mm}
.qr{display:flex;gap:5mm;align-items:center;margin-top:5mm}
.qr img{width:26mm;height:26mm}
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-top:4mm}
.mark{border:2px dashed #888;border-radius:3mm;height:200mm;padding:4mm 3mm;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3mm}
.mark .seed{width:16mm;height:16mm;border-radius:50%;border:2px solid #2a0f63;display:grid;place-items:center;font-size:7pt;color:#666}
.mark p{font:500 10pt/1.4 'Lora',serif;margin:0}
.mark b{font:700 9pt 'Fredoka';color:#2a0f63}
.mark .t{font:600 13pt 'Fredoka';color:#2a0f63}
.script p{font-size:11pt;margin:2mm 0}

@media screen and (max-width:820px){
  .hero,.vid,.colour,.two{grid-template-columns:1fr}
  .tabs{top:69px}
  .bar__title span{display:none}
  .sheet{width:100%;min-height:0;padding:16px 16px 70px;font-size:10.5pt}
  .wsp{width:100%}.ws2{grid-template-columns:1fr}
  .marks{grid-template-columns:1fr 1fr}.mark{height:auto}
}
@media print{
  html,body{background:#fff!important}
  .bar,.hero,.tabs,.pickbar,#online,#leader,.noprint,#printouts>.note{display:none!important}
  main{padding:0;max-width:none}
  #printouts{display:block!important}
  .sheets{display:block}
  .sheet{box-shadow:none;margin:0;width:210mm;min-height:297mm;break-after:page}
  .sheet.skip{display:none}
  @page{size:A4;margin:0}
}
/* print fit: every sheet = one A4 page */
.sheet{font-size:10.8pt}
.sheet h2{margin:3.5mm 0 1.5mm}
.sheet .verse{font-size:10pt;line-height:1.5;padding:2.5mm 3.5mm}
.sheet .findit{padding:2.5mm 3.5mm;margin:2.5mm 0;font-size:10pt}
.script p{font-size:9.7pt;line-height:1.4;margin:1.4mm 0}
.wsp{width:98mm}.wsp b{font-size:12.5pt}
.circleq p{margin:1.2mm 0;font-size:10.3pt}
.drawbox{min-height:30mm}

.sheet .reading{font-size:11.5pt;line-height:1.6;padding:4mm 5mm}
.sheet .reading--cols{columns:2;column-gap:7mm;font-size:10.6pt;line-height:1.5}