/* lumibot.si Batch 12: Sky Drift, Forever Sky, Egg Hunt + Mystery hunts, Lens Night-Light, Trail of Lights, Time Capsules.
   Kid look = bright and rounded. Sleek look (html.lx-pg) = darker, one accent, no emoji. */
.b12-h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 900; margin: 6px 0 4px; }
.b12-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.b12-jump .lg-btn { min-height: 48px; font-size: 18px; }
.b12-sec { margin: 16px 0; }
.b12-sec h3 { margin: 14px 0 6px; font-size: 20px; }
.b12-list { margin: 8px 0 8px 22px; font-size: 18px; }
.b12-list li { margin: 4px 0; }
.b12-det { margin: 10px 0; font-size: 18px; }
.b12-det summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.b12-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.b12-chip { min-height: 52px; padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.b12-chip[aria-pressed="true"] { background: #ffe27a; color: #2a1a00; border-color: #ffe27a; }
.b12-seg { flex-wrap: wrap; }
.b12-in { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: inherit; width: 100%; max-width: 420px; display: block; margin-top: 4px; min-height: 52px; }
.b12-err { color: #ffb3b3; font-weight: 700; min-height: 1em; }
.b12-big { font-size: 64px; display: block; text-align: center; line-height: 1.1; }
.b12-reveal { text-align: center; }
.b12-reveal .b3-row { justify-content: center; }
.b12-baby { width: 180px; max-width: 60vw; border-radius: 14px; margin: 10px auto; display: block; box-shadow: 0 0 30px rgba(255,226,122,.5); }
.b12-stamp { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #ffe27a; color: #2a1a00; font-weight: 800; font-size: 14px; }
.b12-capmsg { font-size: 24px; font-weight: 800; margin: 10px 0; }
.b12-wig { animation: b12wig .45s ease; }
@keyframes b12wig { 0%,100% { transform: none; } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
/* egg hunt */
.b12-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.b12-spot { min-height: 96px; border-radius: 18px; border: 2px solid rgba(255,255,255,.2); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 35%, transparent), rgba(10,14,40,.85)); color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.b12-spi { font-size: 32px; }
.b12-spot.b12-glow { box-shadow: 0 0 0 4px #ffe27a, 0 0 30px #ffe27a; }
.b12-hot { font-size: 22px; font-weight: 800; min-height: 1.4em; }
.b12-eggbtn { background: none; border: 0; cursor: pointer; padding: 10px; display: block; margin: 8px auto; }
.b12-wdots { display: flex; gap: 10px; justify-content: center; margin: 6px 0; }
.b12-wdots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.2); }
.b12-wdots i.on { background: #ffe27a; box-shadow: 0 0 10px #ffe27a; }
.b12-eggs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.b12-egc { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px; border-radius: 16px; background: rgba(255,255,255,.06); color: inherit; text-decoration: none; opacity: .65; min-height: 120px; }
.b12-egc.got { opacity: 1; background: rgba(255,226,122,.12); }
.b12-egc small { font-size: 13px; line-height: 1.25; }
.b12-mlist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.b12-mlist li { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); display: flex; flex-direction: column; }
.b12-mlist li span { font-size: 28px; }
/* drift page */
.b12-skysvg { width: 100%; max-width: 640px; display: block; border-radius: 14px; box-shadow: 0 0 40px color-mix(in srgb, var(--c) 40%, transparent); }
.b12-chart { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.b12-chart a { display: flex; flex-direction: column; padding: 10px 12px; min-height: 64px; border-radius: 14px; background: rgba(255,255,255,.06); border-left: 6px solid var(--c); color: inherit; text-decoration: none; }
.b12-chart span { font-size: 15px; opacity: .85; }
.b12-shards { display: flex; flex-wrap: wrap; gap: 10px; }
.b12-shard { width: 96px; min-height: 96px; border-radius: 16px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.b12-shard svg { width: 44px; height: 44px; }
.b12-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px; margin: 6px 0; }
.b12-ccard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 96px; }
.b12-ccard img { width: 72px; height: 72px; object-fit: contain; }
.b12-ccard[aria-pressed="true"] { border-color: #ffe27a; box-shadow: 0 0 0 3px #ffe27a; }
.b12-ccard small { font-size: 12px; opacity: .8; }
.b12-lv1 { box-shadow: 0 0 10px rgba(255,226,122,.35); } .b12-lv2 { box-shadow: 0 0 16px rgba(255,226,122,.5); } .b12-lv3, .b12-lv4 { box-shadow: 0 0 22px rgba(255,200,120,.7); background: rgba(255,226,122,.12); }
.b12-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.b12-good { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); }
.b12-gi { font-size: 40px; }
.b12-field { position: relative; height: 240px; border-radius: 16px; background: radial-gradient(ellipse at 30% 30%, #1d2a6b, #0b1030 70%); overflow: hidden; }
.b12-drift { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle, #fff 0 10%, var(--c) 30%, transparent 70%); animation: b12pulse 2.4s ease-in-out infinite; }
@keyframes b12pulse { 50% { transform: scale(1.15); } }
.b12-comet { position: absolute; right: 6%; top: 8%; width: 120px; height: 56px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, transparent, rgba(255,226,122,.7)); font-size: 34px; text-align: right; padding-right: 6px; animation: b12comet 6s ease-in-out infinite alternate; }
@keyframes b12comet { to { transform: translate(-40vw, 120px); } }
.b12-cpz { width: 100%; max-width: 560px; display: block; touch-action: manipulation; }
.b12-cst { cursor: pointer; }
.b12-cst.hint circle { stroke: #ffe27a; stroke-width: 5; }
.b12-wander { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.b12-wc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.06); }
.b12-wc img { width: 110px; height: 110px; object-fit: contain; }
.b12-p-twirling img { transform: rotate(-12deg); } .b12-p-peeking img { clip-path: inset(30% 0 0 0); } .b12-p-napping img { transform: rotate(80deg) scale(.85); filter: saturate(.8); } .b12-p-waving img { transform: rotate(8deg); } .b12-p-stretching img { transform: scaleY(1.12); }
.b12-deep { padding: 14px; border-radius: 16px; background: radial-gradient(ellipse at 50% 30%, rgba(159,232,255,.15), rgba(10,14,40,.7)); transition: background .6s; }
.b12-d3 { background: radial-gradient(ellipse at 50% 30%, rgba(255,226,122,.25), rgba(10,14,40,.7)); }
.b12-lsky { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 10px; border-radius: 14px; background: linear-gradient(#0b1030, #1d2a6b); max-height: 220px; overflow-y: auto; }
.b12-lsky i { width: 14px; height: 18px; border-radius: 6px 6px 8px 8px; background: radial-gradient(circle at 50% 40%, #fff3c4, #ffb347); box-shadow: 0 0 8px #ffb347; }
.b12-csvg { width: 100%; max-width: 560px; display: block; border-radius: 12px; }
.b12-cgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.b12-cgal figcaption { font-size: 13px; text-align: center; }
/* legacy page */
.b12-neb { width: 100%; max-width: 420px; display: block; border-radius: 14px; }
.b12-flist { list-style: none; display: grid; gap: 8px; }
.b12-flist li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.b12-flist small { grid-column: 1; font-size: 15px; }
.b12-flist .lg-btn { grid-row: 1 / span 2; grid-column: 2; }
.b12-paths { list-style: none; display: grid; gap: 8px; }
.b12-paths li { display: grid; gap: 4px; }
.b12-paths a { font-weight: 800; font-size: 18px; color: inherit; }
.b12-pbar { display: block; height: 12px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, rgba(255,226,122,.3), #ffe27a); box-shadow: 0 0 10px rgba(255,226,122,.5); }
.b12-tree { display: grid; gap: 10px; }
.b12-branch { padding: 10px 12px; border-left: 4px solid #a8ffcf; border-radius: 0 14px 14px 0; background: rgba(255,255,255,.05); }
.b12-twigs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.b12-sprout { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 700; }
.b12-sprout i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* viewer: well-loved */
.b12-since { text-align: center; font-weight: 800; font-size: 16px; margin: 6px 0; color: #ffe9a8; }
.pc.b12-loved { box-shadow: 0 0 22px rgba(255,214,140,.55); }
.pc.b12-loved[data-b12-love="3"], .pc.b12-loved[data-b12-love="4"] { box-shadow: 0 0 34px rgba(255,200,120,.8); }
/* guide star chip */
.b12-guide { display: flex; gap: 10px; align-items: center; margin: 10px auto; max-width: 900px; padding: 10px 14px; border-radius: 16px; background: rgba(255,226,122,.14); border: 2px solid rgba(255,226,122,.5); font-size: 17px; }
.b12-guide > span:first-child { font-size: 26px; }
/* Lens: trail, capsules, night-light */
.b12-trail { width: 100%; max-width: 640px; display: block; }
.b12-trail circle { filter: drop-shadow(0 0 4px currentColor); }
.b12-spark { animation: b12pulse 2.4s ease-in-out infinite; }
.b12-offer { font-size: 18px; font-weight: 700; }
html.b12-nl body > *:not(.b12-nlov):not(.lg-modal):not(.lx-modal) { filter: brightness(.35) saturate(.6); transition: filter 2s; }
.b12-nlov { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: radial-gradient(circle at 50% 45%, rgba(255,226,170,.18), rgba(5,6,14,.55) 60%); }
.b12-nlstar { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0 18%, rgba(255,214,140,.55) 40%, transparent 70%); animation: b12glow 9s ease-in-out infinite; }
@keyframes b12glow { 50% { transform: scale(1.12); opacity: .8; } }
.b12-nlov .lg-btn { pointer-events: auto; }
html.lx-calm .b12-nlstar, html.lx-calm .b12-drift, html.lx-calm .b12-comet, html.lx-calm .b12-spark { animation: none; }
@media (prefers-reduced-motion: reduce) { .b12-nlstar, .b12-drift, .b12-comet, .b12-spark, .b12-wig { animation: none !important; } }
@media (max-width: 600px) { .b12-spots { grid-template-columns: repeat(2, 1fr); } .b12-field { height: 220px; } .b12-comet { animation-name: b12combs; } @keyframes b12combs { to { transform: translate(-50vw, 100px); } } }
/* Sleek look */
html.lx-pg .b12-chip { border-color: #3a4256; background: #12161f; font-weight: 600; }
html.lx-pg .b12-chip[aria-pressed="true"] { background: #1c2a3a; color: #7fe3ff; border-color: #7fe3ff; }
html.lx-pg .b12-spot { background: linear-gradient(160deg, #141a26, #0b0e16); border-color: #2f3850; font-weight: 700; }
html.lx-pg .b12-spi { display: none; }
html.lx-pg .b12-spot.b12-glow { box-shadow: 0 0 0 3px #7fe3ff, 0 0 22px rgba(127,227,255,.6); }
html.lx-pg .b12-egc, html.lx-pg .b12-mlist li, html.lx-pg .b12-chart a, html.lx-pg .b12-good, html.lx-pg .b12-wc, html.lx-pg .b12-ccard, html.lx-pg .b12-shard, html.lx-pg .b12-flist li, html.lx-pg .b12-branch, html.lx-pg .b12-sprout { background: #10141d; border-color: #2a3246; }
html.lx-pg .b12-egc.got { background: #142030; }
html.lx-pg .b12-chart a { border-left-color: #7fe3ff; }
html.lx-pg .b12-gi, html.lx-pg .b12-mlist li span { display: none; }
html.lx-pg .b12-pbar { background: linear-gradient(90deg, rgba(127,227,255,.2), #7fe3ff); box-shadow: none; }
html.lx-pg .b12-stamp { background: transparent; color: #7fe3ff; border: 1px solid #7fe3ff; }
html.lx-pg .b12-guide { background: #10141d; border-color: #7fe3ff; }
html.lx-pg .b12-since { color: #7fe3ff; font-weight: 600; }
html.lx-pg .b12-field, html.lx-pg .b12-lsky { background: linear-gradient(#07090f, #111827); }
html.lx-pg .b12-drift { background: radial-gradient(circle, #fff 0 8%, #7fe3ff 28%, transparent 68%); }
html.lx-pg .b12-wdots i.on { background: #7fe3ff; box-shadow: 0 0 10px #7fe3ff; }
html.lx-pg .b12-h1 { font-weight: 800; letter-spacing: .5px; }
html.lx-pg .b12-deep { background: #0d1119; }