/* lumibot.si Batch 9 (Oct 29 2026): Lens extras (Petal Door, Hearth Core, Focus Ring, Lamplighter, Quirks, Secret Room, Cutaway),
   Buddy Companion, Sparkling Hollow, Glow Garden. Kid look + Sleek (html.lx-pg, only darker). Mood from light, never fear. */

/* ---------- Petal Door ---------- */
.l9-door { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%, #ffe7a8 0, #ffb84a 18%, #2a1f5c 60%, #120d33); cursor:pointer; transition:opacity .45s; }
.l9-far { position:absolute; inset:0; background:radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #ffe27a, transparent); opacity:.7; }
.l9-iris { width:min(78vmin, 520px); height:auto; position:relative; }
.l9-petal { fill:#c9893a; stroke:#e8c766; stroke-width:2; transform-origin:100px 100px; transform:rotate(var(--r)); transition:transform 1.2s cubic-bezier(.5,0,.2,1) .25s; }
.l9-door.l9-open .l9-petal { transform:rotate(calc(var(--r) + 40deg)) translate(0,-120px) scale(.6); }
.l9-door.l9-out { opacity:0; pointer-events:none; }
.l9-skip { position:absolute; bottom:6vh; left:0; right:0; text-align:center; color:#fff; font-size:22px; font-weight:900; text-shadow:0 2px 6px #0008; }
.l9-door.l9-calm .l9-petal { transition-duration:.35s; transition-delay:0s; }
html.lx-pg .l9-door { background:radial-gradient(circle at 50% 50%, #8a6a3a 0, #4a3a20 18%, #0b0c12 62%, #06070a); }
html.lx-pg .l9-petal { fill:#3a2e1c; stroke:#b8a46a; }

/* ---------- Hearth Core + rooms in their own light ---------- */
.ln-hero { position:relative; }
.l9-core { position:absolute; left:50%; top:50%; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; background:radial-gradient(circle, rgba(255,214,120,.55), rgba(255,170,60,.18) 45%, transparent 70%); animation:l9-breathe 6s ease-in-out infinite; pointer-events:none; z-index:0; }
.ln-hero > *:not(.l9-core) { position:relative; z-index:1; }
@keyframes l9-breathe { 0%,100% { transform:scale(.92); opacity:.75 } 50% { transform:scale(1.08); opacity:1 } }
.l9-tools { margin:4px 0 14px; }
.ln-nook.l9-golden { background:linear-gradient(160deg, rgba(255,205,110,.22), rgba(120,70,20,.12)); box-shadow:inset 0 0 60px rgba(255,190,90,.28); }
.ln-plaza.l9-cool { position:relative; background:linear-gradient(160deg, rgba(110,170,255,.18), rgba(40,40,120,.12)); }
.l9-bulbs { display:flex; justify-content:space-between; padding:0 6px; margin:-4px 0 8px; height:16px; background:linear-gradient(transparent 6px, rgba(255,255,255,.25) 6px 8px, transparent 8px); }
.l9-bulbs i { width:12px; height:12px; border-radius:50%; background:#ffe27a; box-shadow:0 0 10px #ffe27a; animation:l9-tw 3s ease-in-out infinite; }
.l9-bulbs i:nth-child(3n) { background:#9de0ff; box-shadow:0 0 10px #9de0ff; animation-delay:.8s; } .l9-bulbs i:nth-child(3n+1) { background:#ff9de2; box-shadow:0 0 10px #ff9de2; animation-delay:1.6s; }
@keyframes l9-tw { 0%,100% { opacity:.6 } 50% { opacity:1 } }
html.lx-pg .l9-core { background:radial-gradient(circle, rgba(217,170,90,.4), rgba(140,90,40,.14) 45%, transparent 70%); }
html.lx-pg .ln-nook.l9-golden { background:linear-gradient(160deg, #1a150c, #0e0c09); box-shadow:inset 0 0 70px rgba(200,150,70,.22); }
html.lx-pg .ln-plaza.l9-cool { background:linear-gradient(160deg, #0d1220, #0a0c14); }
html.lx-pg .l9-bulbs i { background:#d9c38a; box-shadow:0 0 6px rgba(217,195,138,.7); }

/* ---------- Focus Ring ---------- */
.l9-fr-wrap { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; }
.l9-fr { width:min(300px, 78vw); aspect-ratio:1; touch-action:none; cursor:grab; border-radius:50%; position:relative; }
.l9-fr:focus-visible { outline:5px solid #9be8ff; outline-offset:4px; }
.l9-fr svg { width:100%; height:100%; display:block; }
.l9-fr-g { transform-origin:100px 100px; transform-box:view-box; transition:transform .25s; }
.l9-fr.l9-going { animation:l9-zoom .7s ease-in forwards; }
@keyframes l9-zoom { to { transform:scale(1.25); opacity:.4; filter:blur(3px) } }
.l9-fr-name { font-size:30px; font-weight:900; text-align:center; min-height:40px; transition:filter .15s; text-shadow:0 0 14px currentColor; }
.l9-fr-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
html.lx-pg .l9-fr-name { text-shadow:none; }

/* ---------- Lamplighter ---------- */
.l9-lamprow { position:relative; display:flex; justify-content:space-between; gap:6px; padding:12px 6px 86px; }
.l9-lamp { width:min(64px, 12vw); height:96px; border:none; background:linear-gradient(#2c2550,#2c2550) center bottom/6px 46px no-repeat; cursor:pointer; position:relative; border-radius:12px; padding:0; }
.l9-lamp i { position:absolute; left:50%; top:4px; width:40px; height:40px; margin-left:-20px; border-radius:40% 40% 50% 50%; background:radial-gradient(circle at 50% 60%, #fff3c4, #ffc94a 55%, #c9893a); box-shadow:0 0 26px 8px rgba(255,200,90,.6); border:3px solid #8a6418; transition:all .5s; }
.l9-lamp.unlit i, .l9-lamp.out i { background:#3b3550; box-shadow:none; }
.l9-lamp.out i::after { content:'✨'; position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-size:18px; }
.l9-lamp:focus-visible { outline:4px solid #9be8ff; }
.l9-lamp.l9-hic i { animation:l9-hic .6s steps(2) 2; }
@keyframes l9-hic { 50% { opacity:.3; transform:translateY(-3px) } }
.l9-ll { position:absolute; bottom:0; left:calc(50% - 30px); width:60px; transition:left 1s ease-in-out; pointer-events:none; }
.l9-starling { width:60px; height:76px; }
.l9-lamps.l9-dusk { background:linear-gradient(#3a2a60, #1b1440); }
html.lx-pg .l9-lamp i { background:radial-gradient(circle at 50% 60%, #e9d9a8, #b8923a 55%, #6a5020); box-shadow:0 0 18px 4px rgba(200,160,80,.4); border-color:#4a3a18; }
html.lx-pg .l9-lamp.unlit i, html.lx-pg .l9-lamp.out i { background:#1a1a22; box-shadow:none; }
html.lx-pg .l9-lamps.l9-dusk { background:linear-gradient(#14111e,#0a0a10); }

/* ---------- Quirks + Secret Room ---------- */
.l9-qgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.l9-q { min-height:104px; border-radius:22px; border:3px dashed rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; }
.l9-q span { font-size:40px; } .l9-q b { font-size:17px; }
.l9-q.seen { border-style:solid; border-color:#ffe27a; background:rgba(255,226,122,.14); }
.l9-q:focus-visible { outline:4px solid #9be8ff; outline-offset:2px; }
.l9-q.l9-wig span { animation:l9-wig .5s; }
@keyframes l9-wig { 25% { transform:rotate(-12deg) } 75% { transform:rotate(12deg) } }
.l9-shelf { display:flex; gap:6px; height:48px; align-items:flex-end; justify-content:center; margin:10px 0; transition:transform .8s; }
.l9-shelf i { width:18px; background:#c9893a; border-radius:3px 3px 0 0; height:70%; } .l9-shelf i:nth-child(2n) { height:90%; background:#6fa8ff; } .l9-shelf i:nth-child(3n) { background:#ff9de2; height:60%; }
.l9-shelf.open { transform:translateX(40px); } .l9-shelf.found { filter:drop-shadow(0 0 10px #ffd36b); }
.l9-hide { position:relative; display:flex; justify-content:center; gap:12px; font-size:48px; padding:22px; border-radius:26px; background:linear-gradient(#5a3a20,#2a1a10); overflow:hidden; }
.l9-hglow { position:absolute; inset:0; background:radial-gradient(circle at 50% 70%, rgba(255,210,120,.65), transparent 60%); animation:l9-breathe 5s infinite; }
.l9-hide span:not(.l9-hglow) { position:relative; }
html.lx-pg .l9-q { background:#11131a; border-color:rgba(255,255,255,.18); } html.lx-pg .l9-q.seen { border-color:#b8a46a; background:#1a1810; }
html.lx-pg .l9-hide { background:linear-gradient(#1e160e,#0c0906); } html.lx-pg .l9-hglow { background:radial-gradient(circle at 50% 70%, rgba(200,150,70,.45), transparent 60%); }

/* ---------- Cutaway ---------- */
.l9-cutscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.l9-cut { width:100%; min-width:560px; height:auto; display:block; }
.l9-cut a { cursor:pointer; } .l9-cut a:focus rect, .l9-cut a:hover rect { opacity:.6; }
.l9-cbreathe { animation:l9-breathe 6s infinite; transform-origin:270px 320px; transform-box:view-box; }
.l9-clife circle { animation:l9-tw 2s infinite; }
html.lx-pg .l9-cut > path:first-of-type { fill:#0b0c12; stroke:#b8a46a; }

/* ---------- Buddy Companion ---------- */
.cp { position:fixed; right:max(10px, env(safe-area-inset-right)); bottom:calc(172px + env(safe-area-inset-bottom, 0px)); z-index:800; display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:none; }
.cp > * { pointer-events:auto; }
.cp.cp-play { bottom:auto; top:84px; }
.cp-row { display:flex; gap:6px; align-items:flex-end; }
.cp-b, .cp-s { width:84px; height:84px; padding:0; border:none; background:radial-gradient(circle at 50% 70%, rgba(255,226,122,.35), transparent 65%); border-radius:50%; cursor:pointer; animation:cp-bob 3s ease-in-out infinite; }
.cp-b svg, .cp-svg { width:100%; height:100%; }
.cp-s { width:62px; height:62px; position:relative; background:radial-gradient(circle at 40% 35%, #fff, var(--c) 45%, var(--d)); box-shadow:0 0 18px var(--c); }
.cp-s i { position:absolute; left:18px; top:22px; width:7px; height:9px; border-radius:50%; background:#1a1530; box-shadow:16px 0 #1a1530; }
.cp-b:focus-visible, .cp-s:focus-visible { outline:4px solid #9be8ff; }
.cp.cp-walk .cp-b, .cp.cp-walk .cp-s { animation:cp-walk .35s ease-in-out infinite; }
.cp-hop { animation:cp-hop .6s ease-out !important; }
@keyframes cp-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes cp-walk { 0%,100% { transform:rotate(-6deg) } 50% { transform:rotate(6deg) translateY(-4px) } }
@keyframes cp-hop { 40% { transform:translateY(-26px) scale(1.08) } }
.cp.cp-peek { animation:cp-in .5s ease-out; }
@keyframes cp-in { from { transform:translateX(130px) } }
.cp-say { max-width:240px; margin:0; padding:10px 14px; border-radius:18px 18px 4px 18px; background:#fff; color:#2a1f5c; font-weight:800; font-size:18px; box-shadow:0 4px 14px #0005; opacity:0; transform:translateY(8px); transition:all .3s; pointer-events:none; }
.cp-say.on { opacity:1; transform:none; }
.cp-menu { display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:20px; background:#2a1f5c; border:3px solid #ffe27a; box-shadow:0 6px 20px #0007; }
.cp-menu[hidden] { display:none; }
.cp-menu b { color:#ffe27a; font-size:18px; text-align:center; }
.cp-menu button, .cp-menu a { min-height:56px; min-width:170px; font:inherit; font-size:18px; font-weight:800; color:#fff; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3); border-radius:16px; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; }
html.lx-pg .cp-say { background:#15171f; color:#e9e4d4; border:1px solid rgba(217,195,138,.4); }
html.lx-pg .cp-menu { background:#0b0c12; border-color:#b8a46a; } html.lx-pg .cp-menu b { color:#d9c38a; }
html.lx-pg .cp-b { background:radial-gradient(circle at 50% 70%, rgba(217,195,138,.18), transparent 65%); }
html.lx-pg .cp-s { box-shadow:0 0 8px var(--d); }
@media print { .cp { display:none; } }

/* ---------- Sparkling Hollow ---------- */
.hl-room { position:relative; border-radius:30px; padding:70px 14px 18px; margin:10px 0 16px; overflow:hidden; background:radial-gradient(ellipse at 50% 110%, #ffcf7a 0, #b0663a 22%, #3a2560 60%, #1d1640); border:3px solid #e8c766; }
.hl-glow { position:absolute; left:50%; bottom:-80px; width:420px; height:240px; margin-left:-210px; border-radius:50%; background:radial-gradient(rgba(255,220,140,.6), transparent 70%); animation:l9-breathe 7s infinite; pointer-events:none; }
.hl-mobile { position:absolute; top:0; left:50%; width:240px; margin-left:-120px; height:60px; border-top:3px solid #e8c766; display:flex; justify-content:space-around; animation:hl-sway 8s ease-in-out infinite; transform-origin:50% 0; }
.hl-mobile i { position:relative; width:2px; height:34px; background:#e8c766; } .hl-mobile i:nth-child(2n) { height:46px; }
.hl-mobile i::after { content:'★'; position:absolute; bottom:-18px; left:-8px; color:#ffe27a; font-size:20px; font-style:normal; text-shadow:0 0 8px #ffe27a; }
@keyframes hl-sway { 0%,100% { transform:rotate(-3deg) } 50% { transform:rotate(3deg) } }
.hl-nest { position:relative; margin:0 auto 14px; width:200px; height:60px; border-radius:0 0 100px 100px; background:repeating-linear-gradient(115deg, #8a5a2a 0 8px, #a8743a 8px 14px); display:grid; place-items:center; color:#fff3c4; font-weight:900; text-shadow:0 2px 4px #0008; }
.hl-nest.rainbow { background:linear-gradient(90deg, #ff9d9d, #ffd36b, #8dffc0, #9de0ff, #c9a2ff); color:#2a1f5c; text-shadow:none; box-shadow:0 0 24px rgba(255,255,255,.5); }
.hl-empty { position:relative; text-align:center; font-size:20px; color:#fff; max-width:560px; margin:6px auto 12px; }
.hl-cubbies { position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.hl-cubby { position:relative; min-height:160px; border-radius:24px 24px 14px 14px; border:3px solid rgba(255,226,122,.5); background:linear-gradient(#4a2f70, #2a1a48); color:#fff; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:10px 6px; gap:6px; }
.hl-cubby::after { content:''; position:absolute; left:12%; right:12%; bottom:44px; height:18px; border-radius:50%; background:radial-gradient(#ffe7f4, #ff9de2 70%); opacity:.55; z-index:0; }
.hl-cubby > * { position:relative; z-index:1; }
.hl-cubby.legend { border-color:#ffe27a; background:linear-gradient(#6a4a20, #3a2560); box-shadow:0 0 20px rgba(255,226,122,.45); }
.hl-cubby.on { outline:5px solid #ffe27a; outline-offset:2px; }
.hl-cubby:focus-visible { outline:5px solid #9be8ff; }
.hl-plate { font-size:16px; font-weight:900; background:rgba(0,0,0,.35); padding:3px 10px; border-radius:10px; }
.hl-tag { font-size:13px; color:#ffe27a; }
.hl-blob { --s:62px; width:var(--s); height:calc(var(--s) * .9); display:block; position:relative; border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 38% 32%, #fff, var(--c) 45%, var(--d)); box-shadow:0 0 18px var(--c); animation:hl-wander 7s ease-in-out infinite; animation-delay:calc(var(--w) * -1s); }
.hl-blob.egg { border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; width:calc(var(--s) * .78); height:var(--s); background:radial-gradient(circle at 40% 30%, #fff, var(--c) 60%, var(--d)); animation:hl-nap 4s ease-in-out infinite; }
.hl-blob.nap { animation:hl-nap 4s ease-in-out infinite; }
.hl-blob.nap .hl-eye { height:3px; top:40%; border-radius:3px; }
.hl-blob.big { --s:120px; margin:0 auto; }
.hl-eye { position:absolute; top:34%; width:12%; height:18%; border-radius:50%; background:#1a1530; } .hl-eye.l { left:28%; } .hl-eye.r { right:28%; }
.hl-smile { position:absolute; left:40%; top:58%; width:20%; height:10%; border-bottom:3px solid #1a1530; border-radius:0 0 50% 50%; }
.hl-blob.hop { animation:cp-hop .6s ease-out; }
@keyframes hl-wander { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-10px) rotate(-4deg) } 75% { transform:translateX(10px) rotate(4deg) } }
@keyframes hl-nap { 0%,100% { transform:scale(1) } 50% { transform:scale(1.04, .97) } }
.hl-panel { text-align:center; } .hl-panel h2 { margin:6px 0 0; font-size:30px; }
.hl-acts { justify-content:center; }
.hl-field { position:relative; height:180px; display:flex; align-items:flex-end; justify-content:center; }
.hl-ball { position:absolute; left:8%; bottom:10px; font-size:44px; }
.hl-ball.fly { animation:hl-fly .9s ease-in-out forwards; }
@keyframes hl-fly { 50% { transform:translate(30vw, -120px) rotate(360deg) } 100% { transform:translate(min(38vw, 220px), -40px) rotate(720deg); opacity:0 } }
html.lx-pg .hl-room { background:radial-gradient(ellipse at 50% 110%, #6a4a24 0, #2a1c12 26%, #0d0c12 64%, #08080c); border-color:#b8a46a; }
html.lx-pg .hl-glow { background:radial-gradient(rgba(200,150,70,.4), transparent 70%); }
html.lx-pg .hl-mobile, html.lx-pg .hl-mobile i { border-color:#b8a46a; background-color:transparent; } html.lx-pg .hl-mobile i { background:#b8a46a; } html.lx-pg .hl-mobile i::after { color:#d9c38a; text-shadow:none; }
html.lx-pg .hl-nest { background:repeating-linear-gradient(115deg, #3a2a16 0 8px, #4a3620 8px 14px); color:#d9c38a; }
html.lx-pg .hl-cubby { background:linear-gradient(#16141e, #0c0b12); border-color:rgba(217,195,138,.35); }
html.lx-pg .hl-cubby.legend { background:linear-gradient(#2a2214, #0c0b12); border-color:#b8a46a; box-shadow:none; }
html.lx-pg .hl-cubby::after { background:radial-gradient(#3a3040, #241e2c 70%); }
html.lx-pg .hl-blob { box-shadow:0 0 8px var(--d); }

/* ---------- Glow Garden ---------- */
.gg-dial { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.gg-dial .lg-tab { min-height:58px; font-size:19px; }
.gg-scene { position:relative; border-radius:30px; overflow:hidden; padding:18px 12px 12px; border:3px solid rgba(255,255,255,.3); transition:background .8s; }
.gg-scene.sky-day { background:radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 12%, #fff, transparent), linear-gradient(#4a5ad0, #6a5ac8 60%, #8a6ad0); }
.gg-scene.sky-dusk { background:radial-gradient(1.5px 1.5px at 30% 15%, #fff, transparent), linear-gradient(#3a2a70, #8a4a8a 55%, #e08a6a); }
.gg-scene.sky-night { background:radial-gradient(2px 2px at 10% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 30%, #ffe27a, transparent), linear-gradient(#0d0a2a, #1d1650); }
.gg-sun { width:84px; height:84px; margin:0 auto 6px; border-radius:50%; background:radial-gradient(circle, #fff7d0, #ffd36b 50%, rgba(255,180,60,0) 72%); box-shadow:0 0 50px 20px rgba(255,210,110,.45); animation:l9-breathe 6s infinite; }
.sky-dusk .gg-sun { background:radial-gradient(circle, #ffe0b0, #ff9a5a 50%, rgba(255,120,60,0) 72%); }
.gg-sun.rest { opacity:.35; box-shadow:0 0 18px 4px rgba(255,210,110,.25); }
.gg-meteors { position:absolute; inset:0; pointer-events:none; display:none; } .gg-meteors.on { display:block; }
.gg-meteors i { position:absolute; top:-10px; width:90px; height:2px; background:linear-gradient(90deg, #fff, transparent); transform:rotate(-30deg); animation:gg-met 2.6s linear infinite; } .gg-meteors i:nth-child(1) { left:20%; } .gg-meteors i:nth-child(2) { left:55%; animation-delay:.9s; } .gg-meteors i:nth-child(3) { left:80%; animation-delay:1.7s; }
@keyframes gg-met { to { transform:translate(-160px, 200px) rotate(-30deg); opacity:0 } }
.gg-island { position:relative; padding:14px 10px 56px; border-radius:40px 40px 50% 50% / 40px 40px 90px 90px; background:radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 50%, #ffe27a, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), linear-gradient(#7a5aa8, #4a3a80 40%, #2a2058); box-shadow:0 12px 40px rgba(180,150,255,.35), inset 0 6px 0 rgba(255,255,255,.18); }
.gg-orbit { position:absolute; right:16px; top:-6px; width:70px; height:70px; }
.gg-crys { position:absolute; left:26px; top:22px; width:18px; height:28px; background:linear-gradient(135deg, #e0f6ff, #8ad0ff); clip-path:polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter:drop-shadow(0 0 8px #8ad0ff); }
.gg-orbit i { position:absolute; left:31px; top:31px; width:9px; height:9px; border-radius:40%; background:#a89cc8; animation:gg-orb 6s linear infinite; } .gg-orbit i:nth-child(3) { animation-duration:9s; animation-direction:reverse; } .gg-orbit i:nth-child(4) { animation-duration:12s; width:6px; height:6px; }
@keyframes gg-orb { from { transform:rotate(0) translateX(30px) } to { transform:rotate(360deg) translateX(30px) } }
.gg-dial2 { position:absolute; left:16px; top:-4px; width:52px; height:52px; border-radius:50%; background:radial-gradient(#e9dcc0, #b8a07a); border:3px solid #8a6a3a; }
.gg-dial2 span { position:absolute; left:50%; top:50%; width:3px; height:22px; margin-left:-1.5px; background:#3a2a16; transform-origin:50% 0; border-radius:2px; }
.gg-crow { position:absolute; left:10px; bottom:6px; width:48px; } .gg-crow svg { width:100%; display:block; }
.gg-shrooms { position:absolute; right:14px; bottom:10px; display:flex; gap:6px; }
.gg-shrooms i { width:16px; height:18px; border-radius:50% 50% 10% 10%; background:radial-gradient(circle at 50% 30%, #c9ffef, #4ad6c0); box-shadow:0 0 12px #4ad6c0; animation:l9-tw 3s infinite; } .gg-shrooms i:nth-child(2n) { background:radial-gradient(circle at 50% 30%, #ffe0ff, #d06aff); box-shadow:0 0 12px #d06aff; height:13px; }
.gg-beds { display:flex; flex-direction:column; gap:10px; margin-top:44px; }
.gg-bed { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; padding:8px; border-radius:20px; background:radial-gradient(1px 1px at 30% 40%, #ffe27a, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), linear-gradient(#5a3a6a, #3a2450); border:3px solid #a88ad0; }
.gg-plot { position:relative; min-height:110px; border:none; border-radius:14px; background:rgba(255,255,255,.06); cursor:pointer; padding:0; color:#fff; font:inherit; display:flex; align-items:flex-end; justify-content:center; }
.gg-plot.empty span { font-size:34px; opacity:.55; align-self:center; }
.gg-plot.sel { outline:4px solid #ffe27a; } .gg-plot:focus-visible { outline:4px solid #9be8ff; }
.gg-plot small { position:absolute; top:3px; right:6px; font-size:13px; font-weight:900; opacity:.8; }
.gg-plant { width:100%; height:106px; display:block; }
.gg-pod { animation:gg-podb 1.4s ease-in-out infinite; transform-origin:44px 90px; transform-box:view-box; }
@keyframes gg-podb { 50% { transform:rotate(8deg) } }
.gg-drink .gg-plant { animation:hl-nap .6s 2; }
.gg-bugs { display:flex; flex-wrap:wrap; gap:6px; min-height:12px; margin-top:8px; padding-left:60px; font-size:26px; }
.gg-bug { animation:gg-crawl 9s ease-in-out infinite; animation-delay:calc(var(--i) * -1s); display:inline-block; }
@keyframes gg-crawl { 0%,100% { transform:translateX(0) } 50% { transform:translateX(14px) } }
.gg-pond { position:relative; margin:14px auto 0; height:150px; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, #7ad0ff, #2a6ad0 60%, #1a3a90); border:5px solid #8a7ac8; cursor:pointer; overflow:hidden; box-shadow:0 0 24px rgba(120,200,255,.4); }
.gg-pond:focus-visible { outline:5px solid #9be8ff; }
.gg-ripple { position:absolute; left:40%; top:40%; width:60px; height:20px; border:2px solid rgba(255,255,255,.5); border-radius:50%; animation:gg-rip 3s ease-out infinite; }
@keyframes gg-rip { to { transform:scale(3); opacity:0 } }
.gg-shadow { position:absolute; width:36px; height:14px; border-radius:50%; background:rgba(10,20,60,.4); animation:gg-swim 10s linear infinite; } .gg-shadow.a { top:55%; } .gg-shadow.b { top:30%; animation-duration:14s; animation-direction:reverse; }
@keyframes gg-swim { from { left:-40px } to { left:100% } }
.gg-frog { position:absolute; right:12%; top:30%; font-size:44px; width:80px; height:80px; border:none; border-radius:50%; background:radial-gradient(ellipse at 50% 70%, #4ac06a 0 40%, transparent 42%); cursor:pointer; }
.gg-frog.sing { animation:cp-hop .6s 2; }
.gg-frog:focus-visible { outline:4px solid #ffe27a; }
.gg-bob { position:absolute; left:30%; top:45%; width:18px; height:18px; border-radius:50%; background:linear-gradient(#ff6b6b 50%, #fff 50%); border:2px solid #fff; animation:hl-nap 1.5s infinite; }
.gg-bob.dip { animation:gg-dip .4s infinite; } @keyframes gg-dip { 50% { transform:translateY(8px) } }
.gg-fly { position:absolute; width:56px; height:56px; border:none; border-radius:50%; background:radial-gradient(circle, #fffbb0 0 5px, rgba(255,240,120,.6) 7px, transparent 18px); cursor:pointer; left:calc(8% + var(--i) * 14%); top:calc(10% + (var(--i) * 37 % 60) * 1%); animation:gg-fl 4s ease-in-out infinite; animation-delay:calc(var(--i) * -.7s); }
@keyframes gg-fl { 0%,100% { transform:translate(0,0); opacity:.7 } 50% { transform:translate(14px,-12px); opacity:1 } }
.gg-say { min-height:30px; }
.gg-tools .lg-btn { min-height:62px; font-size:19px; }
.gg-shelf { display:flex; flex-wrap:wrap; gap:8px; }
.gg-seed.none { opacity:.45; }
.gg-book { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.gg-fb { text-align:center; padding:8px; border-radius:16px; background:rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; } .gg-fb.unseen { opacity:.6; }
.gg-fb small { font-size:13px; opacity:.9; }
.gg-fishsvg { width:80px; height:50px; } .gg-fishsvg.big { width:200px; height:125px; }
.gg-catch { text-align:center; } .gg-shower { font-weight:900; color:#ffcf6b; font-size:20px; }
html.lx-pg .gg-scene.sky-day { background:linear-gradient(#1a1f3a, #22203a); }
html.lx-pg .gg-scene.sky-dusk { background:linear-gradient(#15101e, #2a1a22); }
html.lx-pg .gg-scene.sky-night { background:radial-gradient(1.5px 1.5px at 10% 15%, #ccc, transparent), radial-gradient(1px 1px at 60% 8%, #ccc, transparent), linear-gradient(#06070a, #0b0c12); }
html.lx-pg .gg-scene { border-color:rgba(255,255,255,.12); }
html.lx-pg .gg-sun { background:radial-gradient(circle, #e9d9a8, #b8923a 50%, rgba(180,140,60,0) 72%); box-shadow:0 0 30px 8px rgba(200,160,80,.25); }
html.lx-pg .gg-island { background:linear-gradient(#26203a, #16121f 50%, #0b0a10); box-shadow:0 10px 30px rgba(0,0,0,.6); }
html.lx-pg .gg-bed { background:linear-gradient(#1e1620, #120e16); border-color:rgba(217,195,138,.35); }
html.lx-pg .gg-pond { background:radial-gradient(ellipse at 50% 40%, #2a4a6a, #142438 60%, #0a1420); border-color:#3a3a4a; box-shadow:none; }
html.lx-pg .gg-fb { background:#11131a; }
html.lx-pg .gg-crys { filter:none; }

/* ---------- small screens ---------- */
@media (max-width:520px) {
  .l9-qgrid { grid-template-columns:repeat(2, 1fr); }
  .l9-lamp { height:84px; } .l9-lamp i { width:32px; height:32px; margin-left:-16px; }
  .hl-cubbies { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
  .hl-cubby { flex:0 0 140px; scroll-snap-align:start; }
  .gg-bed { grid-template-columns:repeat(3, 1fr); }
  .cp { right:8px; bottom:calc(166px + env(safe-area-inset-bottom, 0px)); } .cp-b { width:72px; height:72px; } .cp-s { width:54px; height:54px; }
  .gg-book { grid-template-columns:repeat(3, 1fr); }
}
/* ---------- calm + reduced motion: things hold still ---------- */
html.lx-calm .l9-core, html.lx-calm .l9-bulbs i, html.lx-calm .hl-glow, html.lx-calm .hl-mobile, html.lx-calm .hl-blob, html.lx-calm .cp-b, html.lx-calm .cp-s, html.lx-calm .gg-sun, html.lx-calm .gg-orbit i, html.lx-calm .gg-bug, html.lx-calm .gg-shadow, html.lx-calm .gg-ripple, html.lx-calm .gg-fly, html.lx-calm .gg-meteors i, html.lx-calm .gg-pod, html.lx-calm .l9-cbreathe, html.lx-calm .l9-clife circle, html.lx-calm .gg-shrooms i { animation:none !important; }
@media (prefers-reduced-motion: reduce) {
  .l9-core, .l9-bulbs i, .hl-glow, .hl-mobile, .hl-blob, .cp-b, .cp-s, .gg-sun, .gg-orbit i, .gg-bug, .gg-shadow, .gg-ripple, .gg-fly, .gg-meteors i, .gg-pod, .l9-cbreathe, .l9-clife circle, .gg-shrooms i, .l9-fr.l9-going, .hl-ball.fly { animation:none !important; }
  .l9-petal, .l9-ll, .l9-door { transition-duration:.01s !important; }
}