/* lumibot.si Batch 7 (Oct 29 2026): read-along highlight, Constellation Book, Starlight Observatory, puzzle links. Sleek = only darker. */
.ra-w { border-radius:6px; padding:0 1px; transition:background .12s, color .12s; }
.ra-w.ra-on { background:#ffe27a; color:#1a1440; box-shadow:0 0 0 2px #ffe27a; }
html.lx-pg .ra-w.ra-on { background:#b8a46a; color:#0b0c12; box-shadow:0 0 0 2px #b8a46a; }
@media (prefers-reduced-motion: reduce) { .ra-w { transition:none; } }

.cz-links { margin-top:14px; } .cz-links > .lg-btn { flex:1 1 220px; padding:0 16px; font-size:19px; text-align:center; justify-content:center; }
.cz-tile { position:relative; }
.cz-tonight, .sb-tn { position:absolute; top:6px; right:6px; font-style:normal; font-size:13px; font-weight:800; padding:2px 8px; border-radius:999px; background:#9de0ff; color:#0a1630; }
html.lx-pg .cz-tonight, html.lx-pg .sb-tn { background:#5d7590; color:#eef2f7; }

.sb-nav { margin-bottom:6px; } .sb-nav > .lg-btn { flex:1 1 150px; padding:0 12px; font-size:18px; min-height:60px; justify-content:center; text-align:center; }
.sb-count { font-size:20px; margin:4px 0 12px; }
.sb-meter { height:22px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; border:2px solid rgba(255,255,255,.16); }
.sb-meter span { display:block; height:100%; background:linear-gradient(90deg,#9de0ff,#ffe27a,#ff9de2); border-radius:999px; min-width:10px; }
.sb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.sb-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 10px; border-radius:20px; border:2px dashed rgba(255,255,255,.22); background:linear-gradient(#090d26,#151d4d); color:#fff; font:inherit; cursor:pointer; min-height:150px; }
.sb-card svg { width:100%; max-width:120px; aspect-ratio:1; opacity:.75; }
.sb-card.lit { border:2px solid #ffd84a; background:linear-gradient(#11183f,#26306f); box-shadow:0 0 18px rgba(255,216,74,.25); }
.sb-card.lit svg { opacity:1; }
.sb-card b { font-size:18px; text-align:center; } .sb-card small { font-size:14px; opacity:.85; }
.sb-st { fill:#b9c2e6; } .sb-st.lit { fill:#fff8d0; filter:drop-shadow(0 0 2px #fff); }
.sb-ln { stroke:#ffe27a; stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 2px #ffe27a); }
.sb-chips { display:flex; flex-wrap:wrap; gap:10px; }
.sb-chip { font:inherit; font-size:19px; font-weight:800; min-height:56px; padding:0 18px; border-radius:999px; border:2px solid #9de0ff; background:rgba(157,224,255,.14); color:#fff; cursor:pointer; }
.sb-sheet { text-align:center; }
.sb-big { width:min(260px,70vw); margin:0 auto; border-radius:22px; padding:8px; background:linear-gradient(#070b24,#16204f); }
.sb-big svg { width:100%; display:block; }
.sb-fact { font-size:18px; margin:10px 0 6px; padding:10px 14px; border-radius:14px; background:rgba(155,232,255,.12); text-align:left; }
.sb-when { font-size:17px; margin:4px 0 8px; text-align:left; }
.sb-tale { font-size:19px; line-height:1.65; text-align:left; }
.sb-lock { font-size:18px; margin:10px 0; }
.sb-sheet .lg-btn { padding:0 16px; font-size:20px; min-height:64px; flex:1 1 200px; justify-content:center; }
.ob-box { padding:8px; }
.ob-sky { display:block; width:100%; height:auto; border-radius:20px; background:radial-gradient(ellipse at 30% 20%,#1d2a6e,#070a1f 70%); user-select:none; }
.ob-dot { fill:#dfe8ff; opacity:.75; }
.ob-dot.tw { animation:obtw 3.2s ease-in-out infinite alternate; }
@keyframes obtw { from { opacity:.25; } to { opacity:1; } }
.ob-g { cursor:pointer; outline:none; }
.ob-hit { fill:transparent; stroke:transparent; }
.ob-g:hover .ob-hit, .ob-g:focus-visible .ob-hit { fill:rgba(255,255,255,.06); stroke:rgba(157,224,255,.6); stroke-width:1.5; }
.ob-st { fill:#8f9bd0; } .ob-st.lit { fill:#fffbe0; filter:drop-shadow(0 0 3px #fff6a0); }
.ob-ln { stroke:#ffe27a; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 3px #ffd84a); }
.ob-g.lit .ob-ln { animation:obglow 2.6s ease-in-out infinite alternate; }
@keyframes obglow { from { opacity:.75; } to { opacity:1; } }
.ob-tn { fill:none; stroke:#9de0ff; stroke-width:1.6; stroke-dasharray:4 5; opacity:.8; }
.ob-name { fill:#fff; font-size:12px; font-weight:800; text-anchor:middle; paint-order:stroke; stroke:#070a1f; stroke-width:3px; font-family:Nunito,sans-serif; }
.ob-g:not(.lit) .ob-name { fill:#b9c2e6; }
.ob-tools { margin-top:12px; } .ob-tools > .lg-btn { flex:1 1 200px; padding:0 14px; font-size:20px; min-height:68px; justify-content:center; text-align:center; }
.ob-foot { margin-top:10px; }
@media (prefers-reduced-motion: reduce) { .ob-dot.tw, .ob-g.lit .ob-ln { animation:none; } }
@media (max-width:520px) { .sb-grid { grid-template-columns:repeat(2,1fr); } .ob-name { font-size:13px; } .ob-tools > .lg-btn, .sb-sheet .lg-btn { font-size:18px; min-height:60px; } }

/* Sleek (PG): same layout, darker and calmer */
html.lx-pg .sb-card { background:linear-gradient(#0b0c12,#15171f); border-color:rgba(255,255,255,.14); }
html.lx-pg .sb-card.lit { border-color:rgba(217,195,138,.75); background:linear-gradient(#10121a,#1b1e29); box-shadow:none; }
html.lx-pg .sb-ln, html.lx-pg .ob-ln { stroke:#d9c38a; filter:none; }
html.lx-pg .sb-st.lit, html.lx-pg .ob-st.lit { fill:#eef0f4; filter:none; }
html.lx-pg .sb-meter span { background:linear-gradient(90deg,#5d7590,#b8a46a); }
html.lx-pg .sb-chip { border-color:#5d7590; background:rgba(93,117,144,.18); }
html.lx-pg .sb-big, html.lx-pg .ob-sky { background:linear-gradient(#07080d,#12141c); }
html.lx-pg .ob-tn { stroke:#5d7590; }
html.lx-pg .sb-fact { background:rgba(255,255,255,.06); }
/* Batch 7: keep the whole puzzle sky on screen on big screens (no scrolling mid-drag) */
.cz-sky { max-width:max(320px, 72vh); margin-left:auto; margin-right:auto; }

/* Card Garden */
.gd-styles > .lg-btn { flex:1 1 200px; padding:0 14px; font-size:19px; justify-content:center; }
.gd-style[aria-pressed="true"] { outline:4px solid #ffe27a; outline-offset:2px; }
.gd-sum { font-size:20px; margin:10px 0; }
.gd-tabs { flex-wrap:wrap; margin:8px 0; } .gd-tabs .lg-tab { min-height:52px; font-size:17px; }
.gd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.gd-card { border-radius:20px; padding:12px; border:2px solid rgba(255,255,255,.16); background:linear-gradient(#0d1a33,#16284a); display:flex; flex-direction:column; gap:6px; }
.gd-card.full { border-color:#ffb3e6; box-shadow:0 0 18px rgba(255,179,230,.3); }
.gd-top { display:flex; gap:10px; align-items:center; } .gd-top b { display:block; font-size:17px; line-height:1.2; } .gd-top small { font-size:14px; opacity:.85; }
.gd-art { width:46px; height:64px; object-fit:cover; border-radius:6px; flex:none; }
.gd-svg { width:100%; height:auto; display:block; }
.gd-soil { fill:#3a2a4f; } .gd-seed { fill:#8a7aa6; }
.gd-prog { font-size:16px; font-weight:800; margin:0; text-align:center; }
.gd-bloom { min-height:58px; font-size:19px; justify-content:center; }
html.lx-pg .gd-card { background:linear-gradient(#0b0c12,#15171f); border-color:rgba(255,255,255,.12); }
html.lx-pg .gd-card.full { border-color:rgba(217,195,138,.75); box-shadow:none; }
html.lx-pg .gd-soil { fill:#22202a; } html.lx-pg .gd-style[aria-pressed="true"] { outline-color:#b8a46a; }
@media (max-width:520px) { .gd-grid { grid-template-columns:1fr; } .gd-styles > .lg-btn { flex:1 1 140px; font-size:17px; min-height:64px; } }