/* Star Switch. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-lights{
 --lt-gold:#ffd36e;--lt-gold-d:#d9a23a;--lt-dim:#4f5a9a;--lt-sky:#0a0f2e;--lt-sky-2:#141b4d;--lt-cyan:var(--k-cyan,#3dd5f3);
 --lt-gap:8px;--lt-pad:12px
}
.lt-stage{position:relative}
.lt-sheet{display:none}
.lt-score-star{width:18px;height:18px;fill:var(--k-gold,#f6c96c)}

/* ---------- Sky picker and progress ---------- */
.lt-modebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.lt-meter{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.lt-meter-star{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.lt-meter-star svg{width:20px;height:20px;fill:none;stroke:#46519a;stroke-width:1.6;stroke-linejoin:round}
.lt-meter-star.is-done svg{fill:#8f7a4a;stroke:#c9a75c}
.lt-meter-star.is-gold svg{fill:var(--k-gold,#f6c96c);stroke:#c79a3a}
.lt-meter-star.is-current{box-shadow:0 0 0 2px var(--k-violet,#a594ff)}

/* ---------- Layout ---------- */
.lt-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(18px,3vw,34px);align-items:start}
.lt-board-col{min-width:0}
.lt-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.lt-keys{text-align:center;margin:12px auto 0!important;max-width:520px}

/* ---------- Sky board ---------- */
.lt-board-wrap{position:relative;width:100%;max-width:540px;margin:0 auto;border-radius:28px;background:radial-gradient(120% 90% at 30% 10%,var(--lt-sky-2),var(--lt-sky) 70%);border:2px solid #34428f;box-shadow:0 18px 40px rgba(2,4,20,.5),inset 0 0 0 1px rgba(255,255,255,.04);box-sizing:border-box}
.lt-board-wrap:has(.lt-n3){max-width:420px}
.lt-board-wrap:has(.lt-n4){max-width:480px}
.lt-board{display:grid;gap:var(--lt-gap);padding:var(--lt-pad);aspect-ratio:1/1;box-sizing:border-box}
.lt-n3{grid-template-columns:repeat(3,minmax(0,1fr));--lt-gap:14px;--lt-pad:18px}
.lt-n4{grid-template-columns:repeat(4,minmax(0,1fr));--lt-gap:10px;--lt-pad:14px}
.lt-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lt-row{display:contents}
.lt-cell{display:flex;min-width:0;min-height:0}
.lt-btn{position:relative;flex:1;display:grid;place-items:center;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease}
.lt-btn:active{transform:scale(.94)}
.lt-art{width:100%;height:100%;display:block;overflow:visible}

/* Dark stars: dim outlines. Lit stars: glowing gold. */
.lt-glow{fill:#ffe6a0;opacity:0;transition:opacity .2s ease}
.lt-goal,.lt-ring{fill:none;opacity:0}
.lt-star{fill:rgba(120,132,200,.08);stroke:var(--lt-dim);stroke-width:3.2;stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.lt-shine{fill:none;stroke:#fff8e1;stroke-width:4.5;stroke-linecap:round;opacity:0}
.lt-btn:hover .lt-star{stroke:#7480c4}
.is-on .lt-glow{opacity:.13}
.is-on .lt-star{fill:var(--lt-gold);stroke:var(--lt-gold-d);filter:drop-shadow(0 0 6px rgba(255,211,110,.75))}
.is-on .lt-shine{opacity:.85}
.is-on:hover .lt-star{stroke:var(--lt-gold-d)}

/* Star pictures: a gold dotted ring marks where the picture's stars go. */
.is-goal .lt-goal{opacity:1;stroke:var(--k-gold,#f6c96c);stroke-width:2.6;stroke-dasharray:3 6;stroke-linecap:round}
.lt-pattern .lt-btn:not(.is-goal).is-on .lt-star{fill:#f0b7a6;stroke:#c97a66;filter:none}

/* Ghost preview: dashed cyan rings on the stars a tap would flip. */
.will-flip .lt-ring{opacity:1;stroke:var(--lt-cyan);stroke-width:3.5;stroke-dasharray:7 6;stroke-linecap:round}
.will-light .lt-star{fill:rgba(255,211,110,.28);stroke:#f2c766}
.will-dim .lt-star{fill:rgba(255,211,110,.55)}

/* Hint: a pulsing violet ring. */
.is-hint .lt-ring{opacity:1;stroke:var(--k-violet,#a594ff);stroke-width:5;stroke-dasharray:none}
.is-hint{animation:lt-hint 1.1s ease-in-out infinite}
@keyframes lt-hint{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Clouds */
.is-cloud{cursor:not-allowed}
.lt-cloud{fill:#5f6aa6;opacity:.9}
.is-cloud:hover .lt-cloud{fill:#6b77b5}
.is-cloud:active{transform:none}

.lt-btn:focus{outline:none}
.lt-btn:focus-visible{box-shadow:0 0 0 4px var(--k-gold,#f6c96c),0 0 0 7px #0a0f2e;border-radius:50%}

@keyframes lt-flip{0%{transform:scale(1)}40%{transform:scale(1.16) rotate(12deg)}100%{transform:scale(1) rotate(0)}}
.is-flip .lt-art{animation:lt-flip .45s cubic-bezier(.2,.9,.3,1.3)}

/* Constellation lines over the board (the overlay is half a gap larger than the cells on each side, so centres line up). */
.lt-lines{position:absolute;inset:calc(var(--lt-pad,12px) - var(--lt-gap,8px)/2);pointer-events:none;overflow:visible}
.lt-board-wrap:has(.lt-n3){--lt-gap:14px;--lt-pad:18px}
.lt-board-wrap:has(.lt-n4){--lt-gap:10px;--lt-pad:14px}
.lt-line{stroke:#bfe9ff;stroke-width:3;stroke-linecap:round;opacity:.85;stroke-dasharray:1;stroke-dashoffset:1;animation:lt-draw .5s ease-out forwards;filter:drop-shadow(0 0 4px rgba(61,213,243,.8))}
@keyframes lt-draw{to{stroke-dashoffset:0}}
.lt-won .lt-btn{cursor:default}
.lt-won .lt-btn.is-on:not(.is-picture) .lt-star{opacity:.55}
.lt-won .is-picture .lt-glow{opacity:.35}
.lt-won .is-picture .lt-star{fill:#fff1c2;stroke:var(--lt-gold)}

/* ---------- Side panel ---------- */
.lt-goal-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic label" "pic counts";gap:6px 14px;align-items:center;padding:14px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.lt-goal-label{grid-area:label;overflow-wrap:anywhere;margin:0!important;font:800 1rem/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important;align-self:end}
.lt-goal-pic{grid-area:pic;width:96px;height:96px;padding:6px;border-radius:14px;background:var(--lt-sky);border:1px solid #2b3780;box-sizing:border-box}
.lt-counts{grid-area:counts;display:flex;flex-wrap:wrap;gap:8px;margin:0!important;align-self:start}
.lt-count{display:inline-flex;flex-wrap:wrap;max-width:100%;box-sizing:border-box;align-items:baseline;gap:6px;font-weight:800;font-size:.9rem;color:var(--k-ink-2,#d5dbf5);background:var(--k-surface-2,#172154);border-radius:999px;padding:4px 12px}
.lt-count b{font:800 1.25rem/1 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)}
.lt-count-par b{color:var(--k-gold,#f6c96c)}
.lt-over .lt-count:first-child b{color:var(--k-coral,#ff8f7f)}

/* Mini boards (goal, how-to, print) */
.lt-mini{display:block;width:100%;height:auto;overflow:visible}
.lt-mini-cell{fill:none;stroke:#56609e;stroke-width:.9}
.lt-mini-cell.is-on{fill:rgba(255,211,110,.22);stroke:var(--lt-gold,#ffd36e)}
.lt-mini-star{fill:var(--lt-gold,#ffd36e)}
.lt-mini-cell.is-mark{stroke:var(--k-cyan,#3dd5f3);stroke-width:1.4;stroke-dasharray:1.6 1.2}
.lt-mini-cloud{fill:#5f6aa6}
.lt-mini-line{stroke:#bfe9ff;stroke-width:.6}

.lt-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lt-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;min-width:44px;padding:8px 4px;border-radius:16px;border:2px solid var(--k-line,#2a3678);background:rgba(255,255,255,.04);color:var(--k-ink,#f4f6ff);font:800 clamp(12px,.86rem,16px)/1.15 "Manrope",Inter,sans-serif;cursor:pointer;transition:background .14s,border-color .14s;overflow-wrap:anywhere;text-align:center;touch-action:manipulation}
.lt-tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lt-tool:not(:disabled):hover{background:var(--k-surface-2,#172154);border-color:#3b4a9a}
.lt-tool:disabled{opacity:.4;cursor:default}
#lt-hint svg{color:var(--k-violet,#a594ff)}
#lt-undo svg{color:var(--k-cyan,#3dd5f3)}
#lt-restart svg{color:var(--k-mint,#62e3ab)}
.lt-tool:focus-visible,.lt-stage .kp-button:focus-visible,.lt-stage .kg-levels button:focus-visible,.lt-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}

.lt-status{margin:0!important;padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.4em;position:relative;font-size:1rem!important;line-height:1.4}
.lt-status:before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--k-gold,#f6c96c) 20%);box-shadow:0 0 12px rgba(246,201,108,.6)}
.lt-actions{margin-top:0!important}
.lt-actions .kp-button{flex:1 1 160px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lt-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Win ---------- */
.lt-win{position:relative;outline:none}
.lt-win p{max-width:560px}
.lt-medal{width:56px;height:56px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.lt-medal.is-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes lt-medal{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.lt-win:not([hidden]) .lt-medal{animation:lt-medal .5s cubic-bezier(.2,.9,.3,1.3) both}
.lt-win:not([hidden]) .lt-medal:nth-child(2){animation-delay:.15s}
.lt-win:not([hidden]) .lt-medal:nth-child(3){animation-delay:.3s}
.lt-win-picture{max-width:560px;margin:0 auto 16px;padding:14px 18px;border-radius:18px;background:rgba(7,11,33,.55);border:1px solid #3a4588;text-align:left}
.lt-win-picture p{margin:0!important}
.lt-win-intro{color:var(--k-ink-2,#d5dbf5)}
.lt-win-intro strong{display:block;font:800 1.3rem/1.25 "Manrope",Inter,sans-serif;color:var(--k-cyan,#3dd5f3);margin-top:2px}
.lt-win-fact{margin-top:6px!important;font-size:.95rem}
.lt-win-done{font-weight:800;color:var(--k-gold,#f6c96c)!important}
.lt-win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lt-win-actions .kp-button{flex:0 1 240px}

/* ---------- How to play ---------- */
.lt-howto{margin-top:22px;padding:clamp(18px,3vw,30px);border-radius:28px;background:var(--k-surface,#111944);border:1px solid var(--k-line-soft,#1f2a62)}
.lt-howto h2{margin:0 0 16px!important;font-size:1.35rem!important}
.lt-howto-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center}
.lt-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:lt}
.lt-steps li{position:relative;padding-left:50px;min-height:38px;margin:0}
.lt-steps li:before{counter-increment:lt;content:counter(lt);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--k-violet,#a594ff),var(--k-cyan,#3dd5f3));color:#0b1030;font:800 1rem/1 "Manrope",Inter,sans-serif}
.lt-steps strong{color:var(--k-ink,#f4f6ff)}
.lt-example{margin:0;padding:clamp(10px,3vw,18px);min-width:0;border-radius:22px;background:var(--k-bg-2,#0c1234);border:1px dashed #3a4588;text-align:center}
.lt-example-row{display:flex;align-items:center;justify-content:center;gap:12px}
.lt-example-board{width:min(120px,30vw);min-width:0;flex:0 1 auto;padding:8px;border-radius:14px;background:var(--lt-sky);box-sizing:border-box}
.lt-example-arrow{width:32px;height:32px;color:var(--k-muted,#aab3da);flex:none}
.lt-example-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lt-example figcaption{margin-top:12px;color:var(--k-ink-2,#d5dbf5);font-size:.95rem}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .lt-play{grid-template-columns:1fr}
 .lt-side{max-width:540px;width:100%;margin:0 auto}
}
@media(max-width:800px){.lt-howto-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .lt-stage .kg-levels{display:flex;flex-wrap:wrap;width:100%;border-radius:20px;box-sizing:border-box}
 .lt-stage .kg-levels button{flex:1 1 auto;border-radius:15px;padding:6px 10px;overflow-wrap:break-word}
 .lt-meter{width:100%;justify-content:center}
 #kids-lights{--lt-gap:5px;--lt-pad:8px}
 .lt-n3,.lt-board-wrap:has(.lt-n3){--lt-gap:10px;--lt-pad:12px}
 .lt-n4,.lt-board-wrap:has(.lt-n4){--lt-gap:7px;--lt-pad:10px}
 .lt-board-wrap{border-radius:22px}
}
@media(max-width:400px){
 .lt-board-col{margin-inline:-8px}
 #kids-lights{--lt-gap:3px;--lt-pad:6px}
 .lt-n4,.lt-board-wrap:has(.lt-n4){--lt-gap:5px;--lt-pad:8px}
}
@media(prefers-reduced-motion:reduce){
 .lt-btn,.lt-tool,.lt-glow,.lt-star{transition:none!important}
 .lt-btn:active{transform:none!important}
 .is-hint,.is-flip .lt-art,.lt-win:not([hidden]) .lt-medal{animation:none!important}
 .lt-line{animation:none!important;stroke-dashoffset:0}
}

/* ---------- Print: four puzzles of circles to colour in, black and white on A4 ---------- */
@media print{
 @page{size:A4;margin:14mm}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-toolbar,.lt-modebar,.lt-play,.lt-win,.lt-howto,.kg-grownups{display:none!important}
 .kg-stage.lt-stage{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .lt-sheet{display:block;color:#000}
 .lt-sheet p{color:#000!important;margin:0 0 2mm!important}
 .lt-sheet-title{font:800 22pt/1.2 "Manrope",Inter,sans-serif;text-align:center}
 .lt-sheet-title span{font-weight:600;font-size:14pt}
 .lt-sheet-help{text-align:center;font-size:12pt}
 .lt-sheet-meta{display:flex;justify-content:space-between;gap:8mm;font-size:11pt;margin-bottom:5mm!important}
 .lt-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8mm 10mm;list-style:none;margin:0;padding:0;counter-reset:sheet}
 .lt-sheet-grid>li{break-inside:avoid;border:.4mm solid #000;border-radius:4mm;padding:4mm;position:relative}
 .lt-sheet-grid>li:before{counter-increment:sheet;content:counter(sheet);position:absolute;top:2mm;left:3mm;font:800 13pt/1 "Manrope",Inter,sans-serif}
 .lt-sheet-boards{display:flex;align-items:center;justify-content:center;gap:4mm}
 .lt-sheet-board{width:62mm}
 .lt-sheet-goal{display:flex;flex-direction:column;align-items:center;gap:1mm;font-size:9pt}
 .lt-sheet-target{width:24mm}
 .lt-sheet-line{display:flex;justify-content:space-between;font-size:11pt;margin-top:3mm!important}
 .lt-sheet-answers{margin-top:8mm;font-size:9pt}
 .lt-sheet-answers ol{display:flex;gap:6mm;list-style:decimal;padding-left:5mm;margin:0}
 .lt-sheet-answers li{width:18mm}
 .lt-mini-cell,.lt-mini-cell.is-on{fill:#fff;stroke:#000;stroke-width:.5;stroke-dasharray:none}
 .lt-mini-star{fill:none;stroke:#000;stroke-width:.35}
 .lt-mini-cell.is-mark{fill:#000;stroke:#000;stroke-dasharray:none}
 .lt-mini-cloud{fill:#bbb}
}

/* Large text settings: let pills and buttons wrap instead of pushing the page sideways. */
.lt-count{min-width:0;overflow-wrap:anywhere;font-size:clamp(12px,.9rem,17px)}
.lt-count b{font-size:clamp(16px,1.25rem,24px)}
.lt-actions .kp-button{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
.lt-win-actions .kp-button{min-width:0;white-space:normal;overflow-wrap:anywhere}
#kids-lights .kg-grownups li,.lt-howto p,.lt-steps li,.lt-win p{overflow-wrap:anywhere}