/* Brain Stars level map (js/levels.js): a Candy Crush-style road of 1,000 levels in 50 topic worlds. Level 1 is at the bottom.
   Each world's scene fills the screen behind its part of the road (it stays put while you scroll through that world),
   the HUD floats on top, and the Menu holds everything else. */
html.lv-on, html.lv-on body { overflow:hidden; overscroll-behavior:none }
html.lv-on body::before { display:none }
html.lv-on .toast { bottom:calc(112px + env(safe-area-inset-bottom,0px)) }
.lv-map { position:fixed; inset:0; z-index:2; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; background:#0B1036; scrollbar-width:none; -webkit-tap-highlight-color:transparent }
.lv-map::-webkit-scrollbar { display:none }
.lv-track { position:relative; width:100% }
/* world scenes */
.lv-world { position:absolute; left:0; right:0; content-visibility:auto; contain-intrinsic-size:auto 2600px }   /* worlds off screen are skipped when drawing */
.lv-bg { position:sticky; top:0; height:100vh; height:100dvh; max-height:100%; background:#0B1036 center 45%/cover no-repeat; filter:var(--f,none) }
.lv-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0B103680 0%,#0B103600 22%,#0B103600 70%,#0B103659 100%) }
.lv-world::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:56px; background:linear-gradient(#0B103600,#0B1036aa); pointer-events:none }
.lv-world.locked .lv-bg { filter:var(--f,) grayscale(.8) brightness(.5) }
.w-blocks .lv-bg   { background-image:url("../img/bg/blocks.webp") }
.w-candy .lv-bg    { background-image:url("../img/bg/candy.webp") }
.w-jungle .lv-bg   { background-image:url("../img/bg/jungle.webp") }
.w-undersea .lv-bg { background-image:url("../img/bg/undersea.webp") }
.w-space .lv-bg    { background-image:url("../img/bg/space.webp") }
.w-clouds .lv-bg   { background-image:url("../img/bg/clouds.webp") }
.w-islands .lv-bg  { background-image:url("../img/bg/islands.webp") }
/* road column */
.lv-col { position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(100%,560px) }
.lv-world .lv-col { height:100% }
.lv-top { pointer-events:none } .lv-top > * { pointer-events:none }
.lv-road { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.lv-road path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.lv-road .r0 { stroke:#0B103670; stroke-width:48px; transform:translateY(7px) }
.lv-road .r1 { stroke:#FFF4DC; stroke-width:40px }
.lv-road .r2 { stroke:#EBC77B; stroke-width:5px; stroke-dasharray:2 18 }
/* level stops */
.lv-node { position:absolute; z-index:3; transform:translate(-50%,-50%); width:70px; height:70px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; cursor:pointer;
  font-family:var(--f-display); font-size:1.6rem; line-height:1; color:#fff; text-shadow:0 2px 0 #0007;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--wc) 50%,#fff), var(--wc) 58%, color-mix(in srgb,var(--wc) 70%,#000));
  box-shadow:0 6px 0 color-mix(in srgb,var(--wc) 55%,#000), 0 0 0 4px #fff, 0 10px 18px #0006; transition:transform .15s }
.lv-node:active { transform:translate(-50%,-46%) }
.lv-node:focus-visible { outline:4px solid #FFDA54; outline-offset:6px }
.lv-node.locked { cursor:default; color:#e6e8f6; background:radial-gradient(circle at 35% 30%,#a2a7c2,#6e7493 60%,#4d5272); box-shadow:0 6px 0 #343852, 0 0 0 4px #ffffffb0, 0 10px 18px #0005 }
.lv-node.now { width:80px; height:80px; font-size:1.85rem; animation:lvPulse 1.5s ease-in-out infinite }
@keyframes lvPulse { 50% { box-shadow:0 6px 0 color-mix(in srgb,var(--wc) 55%,#000), 0 0 0 4px #fff, 0 0 0 16px #ffffff55, 0 10px 18px #0006 } }
.lv-node.boss { width:92px; height:92px; box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 55%,#000), 0 0 0 5px #FFC93A, 0 12px 22px #0007 }
.lv-node.boss img { width:100%; height:100%; border-radius:50%; object-fit:cover; background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--wc) 35%,#fff), var(--wc)) }
.lv-node.boss.locked img { filter:grayscale(1) brightness(.6) }
.lv-node.boss.now { animation:lvPulseB 1.5s ease-in-out infinite }
@keyframes lvPulseB { 50% { box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 55%,#000), 0 0 0 5px #FFC93A, 0 0 0 18px #FFC93A55, 0 12px 22px #0007 } }
.lv-bosstag { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); font:900 .8rem/1 var(--f-ui); background:#FFC93A; color:#3A2500; border:2px solid #fff; border-radius:99px; padding:3px 9px; text-shadow:none; white-space:nowrap }
.lv-bosstag::before { content:"BOSS "; }
.lv-stars { display:inline-flex; gap:1px; align-items:flex-start }
.lv-stars i { width:20px; height:20px; color:#5d6385 } .lv-stars i.on { color:#FFC93A }
.lv-stars svg { width:100%; height:100%; fill:currentColor; stroke:#3A2500; stroke-width:1.4; paint-order:stroke; filter:drop-shadow(0 2px 0 #0007) }
.lv-stars i:nth-child(2) { transform:translateY(5px) }
.lv-nst { position:absolute; z-index:4; transform:translateX(-50%); pointer-events:none }
.lv-me { position:absolute; z-index:5; width:88px; height:88px; transform:translate(-50%,calc(-100% - 26px)); pointer-events:none }
.lv-me.walk { transition:left 1s cubic-bezier(.4,0,.3,1), top 1s cubic-bezier(.4,0,.3,1) }
.lv-me img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 4px #0007); animation:lvHop 1.1s ease-in-out infinite }
@keyframes lvHop { 50% { transform:translateY(-9px) } }
.lv-sign { position:absolute; z-index:2; left:50%; transform:translate(-50%,-50%); width:min(86%,340px); display:grid; justify-items:center; gap:2px; text-align:center;
  background:#fff; color:#14194A; border:4px solid var(--wc); border-radius:22px; padding:10px 14px 12px; box-shadow:0 7px 0 color-mix(in srgb,var(--wc) 60%,#000), 0 14px 26px #0006 }
.lv-wnum .lv-wico { width:22px; height:22px; margin:-4px 4px -4px -6px; vertical-align:middle }
.lv-wnum { display:inline-flex; align-items:center; font:900 .75rem/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--wc); border-radius:99px; padding:4px 10px }
.lv-sign strong { font-family:var(--f-display); font-weight:400; font-size:1.5rem; line-height:1.1 }
.lv-sign small { display:inline-flex; align-items:center; gap:5px; font:800 .95rem/1.2 var(--f-ui); color:#59618E }
.lv-sign small svg { width:18px; height:18px; fill:#FFC93A; stroke:#B87800; stroke-width:1.2 }
.lv-sign small .gi { width:18px; height:18px }
.lv-sign.locked { background:#E7E9F3; border-color:#9aa0bd; box-shadow:0 7px 0 #5b6080, 0 14px 26px #0006 } .lv-sign.locked .lv-wnum { background:#7b809e }
.lv-soon { position:absolute; z-index:2; left:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:800 1rem/1 var(--f-ui); color:#fff; background:#0B1036c0; border:2px solid #ffffff40; border-radius:99px; padding:12px 18px }
.lv-soon .gi { width:22px; height:22px }
/* HUD */
.lv-hud { position:fixed; z-index:6; top:0; left:0; right:0; display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 18px max(12px,env(safe-area-inset-left,0px));
  background:linear-gradient(#0B1036e6,#0B103600); pointer-events:none }
.lv-hud > * { pointer-events:auto }
.lv-champ { position:relative; flex:none; width:58px; height:58px; padding:0; border-radius:50%; border:3px solid #fff; background:#2a2f6e; box-shadow:0 4px 0 #0007; cursor:pointer }
.lv-champ img { width:100%; height:100%; border-radius:50%; object-fit:cover }
.lv-lvl { position:absolute; right:-6px; bottom:-6px; min-width:26px; height:26px; display:grid; place-items:center; padding:0 5px; border-radius:99px; background:#FFC93A; color:#3A2500; border:2px solid #fff; font:900 .85rem/1 var(--f-ui) }
.lv-hudmid { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.lv-pill { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 12px; border-radius:99px; border:2px solid #ffffff30; background:#0B1036d9; color:#FFDA54; font:900 1rem/1 var(--f-ui); font-variant-numeric:tabular-nums; white-space:nowrap }
.lv-pill .st { width:20px; height:20px } .lv-pill .st path { fill:#FFDA54; stroke:#FFDA54 }
.lv-daily { color:#fff; font-weight:800; font-size:.875rem; cursor:pointer } .lv-daily b { color:#7DF5A9 }
.lv-daily .gi { width:20px; height:20px }
.lv-daily.done { color:#7DF5A9 } .lv-daily.off { color:#FFB3C1 }
.lv-menubtn { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 14px; border-radius:16px; border:2px solid #3A2500; cursor:pointer;
  background:linear-gradient(#FFE58A,#FFC93A); color:#3A2500; font:900 1rem/1 var(--f-ui); box-shadow:0 4px 0 #B87800 }
.lv-menubtn:active { transform:translateY(3px); box-shadow:0 1px 0 #B87800 }
.lv-burger { display:grid; gap:3px } .lv-burger i { display:block; width:18px; height:3px; border-radius:2px; background:currentColor }
.lv-champ:focus-visible, .lv-menubtn:focus-visible, .lv-pill:focus-visible, .lv-play:focus-visible, .lv-tonow:focus-visible { outline:3px solid #fff; outline-offset:3px }
/* bottom: play the next level */
.lv-bottom { position:fixed; z-index:6; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:24px 16px calc(16px + env(safe-area-inset-bottom,0px)); background:linear-gradient(#0B103600,#0B1036c0); pointer-events:none }
.lv-play { pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; min-width:min(300px,100%); padding:10px 26px; border-radius:22px; cursor:pointer;
  border:3px solid #0d5a33; background:linear-gradient(#5EE89A,#22B865); color:#fff; font-family:var(--f-display); font-size:1.45rem; text-shadow:0 2px 0 #0b5a31; box-shadow:0 6px 0 #0d5a33, 0 12px 24px #0006 }
.lv-play .gi { width:30px; height:30px }
.lv-play:active { transform:translateY(4px); box-shadow:0 2px 0 #0d5a33 }
.lv-play.off { background:linear-gradient(#c4c8de,#8f95b3); border-color:#4d5272; text-shadow:0 2px 0 #4d5272; box-shadow:0 6px 0 #4d5272 }
.lv-tonow { position:fixed; z-index:6; right:max(14px,env(safe-area-inset-right,0px)); bottom:calc(100px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:8px 14px; border-radius:99px; border:2px solid #fff; background:#0B1036e6; color:#fff; font:800 .95rem/1 var(--f-ui); cursor:pointer }
.lv-tonow .gi { width:20px; height:20px } .lv-tonow[hidden] { display:none }
/* level card and menu */
#lvlayer .lv-scrim { position:fixed; inset:0; z-index:46; background:#050820a8; animation:fade .2s }
.lv-card { position:fixed; z-index:47; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto;
  background:#fff; color:#14194A; border-radius:28px; border:4px solid #fff; box-shadow:0 8px 0 #0007, 0 20px 50px #0008; animation:lvCardIn .32s cubic-bezier(.3,1.4,.5,1) }
@keyframes lvCardIn { from { transform:translate(-50%,-44%) scale(.9); opacity:0 } }
.lv-cardtop { position:relative; min-height:118px; display:grid; align-content:end; justify-items:center; padding:16px 16px 14px; border-radius:24px 24px 0 0; color:#fff; text-align:center;
  background:linear-gradient(#0B103626,#0B1036b3), var(--lvimg,#0B1036) center/cover }
.lv-cardtop.w-blocks { --lvimg:url("../img/bg/blocks.webp") } .lv-cardtop.w-candy { --lvimg:url("../img/bg/candy.webp") } .lv-cardtop.w-jungle { --lvimg:url("../img/bg/jungle.webp") }
.lv-cardtop.w-undersea { --lvimg:url("../img/bg/undersea.webp") } .lv-cardtop.w-space { --lvimg:url("../img/bg/space.webp") } .lv-cardtop.w-clouds { --lvimg:url("../img/bg/clouds.webp") }
.lv-cardtop.w-islands { --lvimg:url("../img/bg/islands.webp") }
.lv-kick { font:900 .78rem/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase }
.lv-cardtop .lv-kick { background:var(--wc); border-radius:99px; padding:4px 10px; box-shadow:0 2px 0 #0004 }
.lv-cardtop h2 { margin:6px 0 0; font-family:var(--f-display); font-weight:400; font-size:2.1rem; line-height:1.05; color:#fff; text-shadow:0 3px 0 #0008 }
.lv-card.boss .lv-cardtop { min-height:210px; align-content:end }
.lv-cboss { width:150px; height:150px; object-fit:contain; order:-1; filter:drop-shadow(0 6px 6px #0008); transform:scaleX(-1) }
.lv-cardbody { display:grid; gap:12px; justify-items:center; text-align:center; padding:16px 18px 18px }
.lv-cardbody p { margin:0; font-size:1.05rem; line-height:1.4; color:#14194A }
.lv-stars.big i { width:46px; height:46px } .lv-stars.big i:nth-child(2) { width:58px; height:58px; transform:translateY(-6px) } .lv-stars.big { align-items:flex-end; gap:6px }
.lv-stars.big i:not(.on) { color:#D9DDF0 } .lv-stars.big svg { stroke:#9aa0bd } .lv-stars.big i.on svg { stroke:#B87800 }
.lv-stars.pop i.on { animation:lvStarPop .5s cubic-bezier(.3,1.6,.5,1) backwards } .lv-stars.pop i.on:nth-child(2) { animation-delay:.3s } .lv-stars.pop i.on:nth-child(3) { animation-delay:.6s }
@keyframes lvStarPop { from { transform:scale(0) rotate(-40deg) } }
.lv-goals { display:flex; flex-wrap:wrap; gap:6px; justify-content:center } .lv-goals > span { display:inline-flex; align-items:center; gap:6px; background:#F1F3FC; border-radius:12px; padding:7px 11px; font-weight:800; font-size:.875rem; color:#38407A }
.lv-cardbody .btns, .lv-result .btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100% }
.lv-go { min-width:200px } .lv-go .gi { width:24px; height:24px }
.lv-stop { font-weight:800; color:#C2410C !important }
.lv-menu { position:fixed; z-index:47; top:0; right:0; bottom:0; width:min(430px,100%); overflow-y:auto; overscroll-behavior:contain; background:#F4F5FC; color:#14194A;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 16px; box-shadow:-10px 0 40px #0007; animation:lvMenuIn .28s cubic-bezier(.2,1,.3,1); display:grid; gap:12px; align-content:start }
@keyframes lvMenuIn { from { transform:translateX(100%) } }
.lv-mhead { display:flex; align-items:center; justify-content:space-between }
.lv-mhead h2 { margin:0; font-family:var(--f-display); font-weight:400; font-size:2rem; color:#14194A }
.lv-x { width:48px; height:48px; border-radius:50%; border:2px solid #14194A; background:#fff; display:grid; place-items:center; cursor:pointer; color:#14194A }
.lv-x .gi { width:22px; height:22px }
.lv-mstats { display:flex; align-items:center; gap:8px; margin:0; font-weight:700; color:#38407A; background:#fff; border-radius:14px; padding:10px 12px }
.lv-mstats svg { width:22px; height:22px; flex:none; fill:#FFC93A; stroke:#B87800; stroke-width:1.2 }
.lv-mgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.lv-mtile { position:relative; display:flex; align-items:center; gap:10px; min-height:76px; padding:10px; text-align:left; cursor:pointer; border-radius:18px; border:2px solid #D9DDF0; background:#fff; color:#14194A; box-shadow:0 4px 0 #D9DDF0 }
.lv-mtile:active { transform:translateY(3px); box-shadow:0 1px 0 #D9DDF0 }
.lv-mtile .gi { width:44px; height:44px; flex:none }
.lv-mtile strong { display:block; font:800 1.02rem/1.15 var(--f-ui) } .lv-mtile small { display:block; font-size:.8rem; line-height:1.25; color:#59618E; margin-top:2px }
.lv-mtile .grow { min-width:0 }
.lv-badge { position:absolute; top:-6px; right:-6px; min-width:24px; height:24px; display:grid; place-items:center; padding:0 6px; border-radius:99px; background:#F2559E; color:#fff; border:2px solid #fff; font:900 .8rem/1 var(--f-ui) }
.lv-switches { display:grid; gap:8px }
.lv-switch { display:flex; align-items:center; gap:12px; min-height:62px; padding:8px 14px; text-align:left; cursor:pointer; border-radius:18px; border:2px solid #D9DDF0; background:#fff; color:#14194A }
.lv-switch .gi, .lv-note { width:32px; height:32px; flex:none; display:grid; place-items:center; color:#7C4DFF; font-size:1.5rem; font-weight:900 }
.lv-switch strong { display:block; font:800 1rem/1.2 var(--f-ui) } .lv-switch small { display:block; font-size:.8rem; color:#59618E }
.lv-switch b { min-width:52px; text-align:center; border-radius:99px; padding:6px 10px; background:#E7E9F3; color:#59618E; font:900 .85rem/1 var(--f-ui) }
.lv-switch.on b { background:#22B865; color:#fff }
.lv-mtile:focus-visible, .lv-switch:focus-visible, .lv-x:focus-visible { outline:3px solid #7C4DFF; outline-offset:3px }
@media (max-width:360px) { .lv-mgrid { grid-template-columns:1fr } .lv-daily span { display:none } .lv-menubtn span:last-child { display:none } }
@media (max-width:420px) { .lv-menubtn { padding:8px 11px } .lv-pill { padding:6px 10px } }
/* in a level: the boss and the world's scene */
.lv-bossbar { display:flex; align-items:center; gap:12px; background:#0B1036d9; color:#fff; border:2px solid #ffffff2a; border-radius:20px; padding:8px 14px 8px 8px }
.lv-bossbar img { width:68px; height:68px; flex:none; border-radius:50%; object-fit:cover; background:#ffffff1f; border:3px solid #FFC93A }
.lv-bossbar.hit img { animation:lvHit .5s linear }
@keyframes lvHit { 20% { transform:translateX(-7px) rotate(-6deg); filter:brightness(1.8) } 45% { transform:translateX(6px) rotate(5deg) } 70% { transform:translateX(-3px) } }
.lv-bossbar.beaten img { filter:grayscale(.4) } .lv-bossbar strong { font:800 1.05rem/1.2 var(--f-ui) } .lv-bossbar strong small { color:#FFC93A; font-weight:800 }
.lv-bossbar > .grow > small { display:block; color:#cfd3f5; font-weight:700; font-size:.875rem }
.lv-hp { display:block; height:14px; margin:6px 0 4px; border-radius:99px; background:#ffffff26; overflow:hidden } .lv-hp i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FF8A9F,#FF4D6D); transition:width .5s }
html[data-world="blocks"][data-world]   { --bg-img:url("../img/bg/blocks.webp");   --bg-img-m:url("../img/bg/blocks-m.webp") }
html[data-world="candy"][data-world]    { --bg-img:url("../img/bg/candy.webp");    --bg-img-m:url("../img/bg/candy-m.webp") }
html[data-world="jungle"][data-world]   { --bg-img:url("../img/bg/jungle.webp");   --bg-img-m:url("../img/bg/jungle-m.webp") }
html[data-world="undersea"][data-world] { --bg-img:url("../img/bg/undersea.webp"); --bg-img-m:url("../img/bg/undersea-m.webp") }
html[data-world="space"][data-world]    { --bg-img:url("../img/bg/space.webp");    --bg-img-m:url("../img/bg/space-m.webp") }
html[data-world="clouds"][data-world]   { --bg-img:url("../img/bg/clouds.webp");   --bg-img-m:url("../img/bg/clouds-m.webp") }
html[data-world="islands"][data-world]  { --bg-img:url("../img/bg/islands.webp");  --bg-img-m:url("../img/bg/islands-m.webp") }
/* level result */
.lv-result { width:min(560px,100%); margin:12px auto 0; display:grid; justify-items:center; gap:12px; text-align:center }
.lv-result .lv-kick { color:#fff; background:var(--wc); border-radius:99px; padding:5px 12px }
.lv-result h1 { margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,1.6rem + 2vw,2.8rem); line-height:1.05 }
.lv-rboss { width:140px; height:140px; object-fit:contain; transform:scaleX(-1) rotate(-8deg); filter:grayscale(.2) drop-shadow(0 6px 6px #0006); margin:-6px 0 -10px }
.lv-result .lv-stars.big i { width:60px; height:60px } .lv-result .lv-stars.big i:nth-child(2) { width:76px; height:76px }
.lv-line { margin:0; font-size:1.1rem; font-weight:700 }
.lv-newworld { display:inline-flex; align-items:center; gap:8px; margin:0; padding:10px 16px; border-radius:16px; background:#FFF3C4; color:#3A2500; font-weight:700 } .lv-newworld .gi { width:24px; height:24px }
.lv-result .metrics { width:100% }
@media (prefers-reduced-motion:reduce) { .lv-node.now, .lv-node.boss.now, .lv-me img, .lv-stars.pop i.on, .lv-card, .lv-menu, .lv-bossbar.hit img { animation:none !important } .lv-me.walk { transition:none } }
.lv-result .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.lv-result .metric { padding:12px 10px }
html.kid .lv-result .metric strong { font-size:2rem }
.lv-result .btn .gi { width:24px; height:24px }
.lv-newworld, .lv-newworld b { color:#3A2500 !important; text-shadow:none !important }
#lvlayer .lv-card .btn.ghost, #lvlayer .lv-card .btn.ghost:hover { background:#EEF0F8; color:#14194A; border:2px solid #14194A; box-shadow:0 4px 0 #C9CDE3 }
.lv-card .btn .gi { width:24px; height:24px }
/* demo mode: the banner sits under the map's HUD bar instead of covering it */
html.lv-on .demo-banner { position:fixed; z-index:7; left:0; right:0; bottom:0; padding:4px 12px calc(4px + env(safe-area-inset-bottom,0px)); font-size:.75rem }
html.lv-on body:has(.demo-banner) .lv-bottom { padding-bottom:calc(36px + env(safe-area-inset-bottom,0px)) }
html.lv-on body:has(.demo-banner) .lv-tonow { bottom:calc(120px + env(safe-area-inset-bottom,0px)) }
.lv-goals .gi { width:22px; height:22px; margin:-4px 0 }

/* ---------- animations: starting a level, answering, finishing, and back on the map ----------
   Everything here is switched off by "reduce motion" (the settings switch or the device setting); see the end. */
/* the Play buttons breathe and shine so they're the obvious next tap */
.lv-play:not(.off), .lv-go { position:relative; overflow:hidden; isolation:isolate }
.lv-play:not(.off)::after, .lv-go::after { content:""; position:absolute; z-index:-1; top:-20%; bottom:-20%; left:-60%; width:40%; transform:skewX(-20deg);
  background:linear-gradient(90deg,#fff0,#ffffff8c,#fff0); animation:lvShine 2.8s 1s ease-in-out infinite; pointer-events:none }
@keyframes lvShine { 0% { left:-60% } 35%,100% { left:130% } }
.lv-play:not(.off) { animation:lvBreathe 3s 1.2s ease-in-out infinite }
@keyframes lvBreathe { 0%,72%,100% { transform:none } 80% { transform:translateY(-5px) scale(1.04) } 88% { transform:translateY(1px) scale(.99,1.01) } 94% { transform:translateY(-2px) } }
.lv-play:not(.off):active { animation:none }
.lv-go:active { transform:translateY(4px) scale(.97) }
/* level card: the stars pop in, the boss bobs */
.lv-card .lv-stars.pop i.on { animation-duration:.45s } .lv-card .lv-stars.pop i.on:nth-child(1) { animation-delay:.15s } .lv-card .lv-stars.pop i.on:nth-child(2) { animation-delay:.27s } .lv-card .lv-stars.pop i.on:nth-child(3) { animation-delay:.39s }
.lv-cboss { animation:lvBob 1.6s ease-in-out infinite }
@keyframes lvBob { 50% { transform:scaleX(-1) translateY(-8px) rotate(-3deg) } }
/* the launch: the world's scene sweeps out from the Play button, then the level name, the champion and "Go!" */
.lv-intro { position:fixed; inset:0; z-index:60; display:grid; place-items:center; overflow:hidden; cursor:pointer; color:#fff; -webkit-tap-highlight-color:transparent;
  clip-path:circle(0 at var(--x) var(--y)); animation:lviWipe .42s cubic-bezier(.5,0,.2,1) forwards }
@keyframes lviWipe { to { clip-path:circle(150vmax at var(--x) var(--y)) } }
.lv-intro.out { pointer-events:none; animation:lviOut .38s ease-in forwards; clip-path:none }
@keyframes lviOut { to { opacity:0; transform:scale(1.12) } }
.lvi-bg { position:absolute; inset:-4%; background:#0B1036 center/cover no-repeat; background-image:var(--lvimg); filter:var(--f,none); animation:lviZoom 1.8s ease-out both }
.lvi-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--wc) 35%,transparent), #0B1036cc 75%) }
@keyframes lviZoom { from { transform:scale(1.25) } }
.lv-intro.w-blocks { --lvimg:url("../img/bg/blocks.webp") } .lv-intro.w-candy { --lvimg:url("../img/bg/candy.webp") } .lv-intro.w-jungle { --lvimg:url("../img/bg/jungle.webp") }
.lv-intro.w-undersea { --lvimg:url("../img/bg/undersea.webp") } .lv-intro.w-space { --lvimg:url("../img/bg/space.webp") } .lv-intro.w-clouds { --lvimg:url("../img/bg/clouds.webp") }
.lv-intro.w-islands { --lvimg:url("../img/bg/islands.webp") }
.lvi-rays { position:absolute; left:50%; top:46%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax; opacity:.22; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#fff 0 7deg,#fff0 7deg 22deg); -webkit-mask:radial-gradient(circle,#000 0,#0000 45%); mask:radial-gradient(circle,#000 0,#0000 45%); animation:lviSpin 9s linear infinite }
@keyframes lviSpin { to { transform:rotate(360deg) } }
.lvi-in { position:relative; display:grid; justify-items:center; gap:10px; text-align:center; padding:20px }
.lvi-in .lv-kick { background:var(--wc); border-radius:99px; padding:6px 14px; box-shadow:0 3px 0 #0005; animation:lviDrop .4s .22s cubic-bezier(.3,1.5,.5,1) backwards }
.lvi-in h2 { margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(3rem,2.2rem + 5vw,4.6rem); line-height:1; color:#fff; text-shadow:0 5px 0 color-mix(in srgb,var(--wc) 55%,#000), 0 10px 30px #0008;
  animation:lviSlam .5s .3s cubic-bezier(.3,1.6,.5,1) backwards }
.lvi-topic { display:inline-flex; align-items:center; gap:8px; background:#fff; color:#14194A; border-radius:99px; padding:6px 16px 6px 8px; font:900 1.05rem/1 var(--f-ui); box-shadow:0 4px 0 #0005;
  animation:lviDrop .4s .42s cubic-bezier(.3,1.5,.5,1) backwards }
.lvi-topic .gi { width:30px; height:30px }
.lvi-stage { display:flex; align-items:center; justify-content:center; gap:4px; height:170px; margin-top:4px }
.lvi-stage img { width:160px; height:160px; object-fit:contain; filter:drop-shadow(0 8px 6px #0008) }
.lvi-me { animation:lviJumpIn .55s .36s cubic-bezier(.3,1.3,.5,1) backwards }
@keyframes lviJumpIn { 0% { transform:translate(-60vw,30px) rotate(-20deg) } 60% { transform:translate(0,-40px) rotate(6deg) } 80% { transform:translate(0,4px) scale(1.05,.95) } }
.lvi-boss { transform:scaleX(-1); animation:lviBossIn .5s .5s cubic-bezier(.3,1.3,.5,1) backwards }
@keyframes lviBossIn { from { transform:scaleX(-1) translateX(-60vw) } }
.lvi-vs { font-family:var(--f-display); font-weight:400; font-size:3rem; color:#FFC93A; text-shadow:0 4px 0 #8A3B00, 0 0 24px #FF8A00; animation:lviStamp .4s .68s cubic-bezier(.3,1.8,.5,1) backwards }
.lv-intro.boss .lvi-stage img { width:130px; height:130px }
.lv-intro.boss .lvi-in h2 { color:#FFE58A }
.lvi-go { position:absolute; left:50%; top:50%; font-family:var(--f-display); font-weight:400; font-size:clamp(5rem,4rem + 8vw,8rem); line-height:1; color:#FFE14A;
  text-shadow:0 6px 0 #B85A00, 0 0 40px #FFB800aa; transform:translate(-50%,-50%) scale(0) rotate(-12deg); animation:lviGo .5s .8s cubic-bezier(.3,1.7,.5,1) forwards }
.lv-intro.boss .lvi-go { animation-delay:1.08s }
@keyframes lviGo { to { transform:translate(-50%,-50%) scale(1) rotate(-6deg) } }
@keyframes lviDrop { from { opacity:0; transform:translateY(-24px) scale(.8) } }
@keyframes lviSlam { from { opacity:0; transform:scale(2.4) } }
@keyframes lviStamp { from { opacity:0; transform:scale(3) rotate(-25deg) } }
/* in a level: each question swings in, the answer you picked pops (or shakes) */
html[data-view="quiz"] .qpanel.enter { animation:lvQIn .45s cubic-bezier(.2,1.1,.3,1) backwards }
html[data-view="quiz"] .qpanel.enter .question { animation:lvQPop .45s .08s cubic-bezier(.3,1.5,.5,1) backwards }
@keyframes lvQIn { from { opacity:0; transform:translateX(48px) rotate(1.5deg) } }
@keyframes lvQPop { from { opacity:0; transform:scale(.85) } }
.ans.right.just { animation:lvRight .55s cubic-bezier(.3,1.6,.5,1) }
@keyframes lvRight { 0% { transform:scale(1) } 40% { transform:scale(1.07) } 100% { transform:scale(1) } }
.ans.right.just::after { content:""; position:absolute; inset:-3px; border-radius:inherit; box-shadow:0 0 0 0 #16A673aa; animation:lvRing .7s ease-out forwards; pointer-events:none }
@keyframes lvRing { to { box-shadow:0 0 0 18px #16A67300 } }
.ans.wrong.just { animation:lvShake .45s cubic-bezier(.36,.07,.19,.97) }
@keyframes lvShake { 15%,55% { transform:translateX(-8px) } 35%,75% { transform:translateX(8px) } 90% { transform:translateX(-3px) } }
.ans { position:relative }
.shout { position:fixed; z-index:50; left:50%; top:28%; display:inline-flex; align-items:center; gap:10px; pointer-events:none; white-space:nowrap;
  font-family:var(--f-display); font-size:2rem; line-height:1.05; color:#fff; padding:12px 22px; border-radius:22px; text-shadow:0 3px 0 #0006;
  background:linear-gradient(#FF9F43,#F2551B); border:3px solid #fff; box-shadow:0 6px 0 #9A2F00, 0 16px 36px #0007; animation:shoutIn 1.5s cubic-bezier(.3,1.6,.5,1) forwards }
.shout .gi { width:40px; height:40px; color:#FFE14A }
.shout.world { top:36%; background:linear-gradient(#8B6BFF,#5B3FE0); box-shadow:0 6px 0 #2F1F8A, 0 16px 36px #0007; white-space:normal; text-align:left }
.shout.world small { display:block; font:900 .8rem/1.2 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:#FFE14A }
@keyframes shoutIn { 0% { transform:translate(-50%,0) scale(0) rotate(-10deg); opacity:0 } 18% { transform:translate(-50%,0) scale(1) rotate(-3deg); opacity:1 } 75% { transform:translate(-50%,-10px) scale(1) rotate(-3deg); opacity:1 } 100% { transform:translate(-50%,-40px) scale(.9); opacity:0 } }
/* level result: the title bounces in, stars land one by one, a beaten boss spins away, the next button nudges */
.lv-result .lv-stars.pop i.on:nth-child(1) { animation-delay:.2s } .lv-result .lv-stars.pop i.on:nth-child(2) { animation-delay:.5s } .lv-result .lv-stars.pop i.on:nth-child(3) { animation-delay:.8s }
.lv-result .lv-stars.pop i.on { animation:lvStarLand .55s cubic-bezier(.3,1.6,.5,1) backwards }
@keyframes lvStarLand { 0% { transform:translateY(-120px) scale(2.2) rotate(-90deg); opacity:0 } 60% { opacity:1 } }
.lv-result .lv-stars.big i:nth-child(2).on { animation-name:lvStarLand2 } @keyframes lvStarLand2 { 0% { transform:translateY(-130px) scale(2.2) rotate(-90deg); opacity:0 } 60% { opacity:1 } 100% { transform:translateY(-6px) } }
.lv-result h1 { animation:lvTitle .6s .05s cubic-bezier(.3,1.6,.5,1) backwards }
@keyframes lvTitle { from { opacity:0; transform:scale(.4) rotate(-6deg) } }
.lv-result:not(.pass) .lv-stars.big { animation:lvShake .6s .5s }
.lv-result.pass .lv-rboss { animation:lvKO 1s .15s cubic-bezier(.3,1.2,.5,1) backwards, lvDizzy 1.4s 1.2s ease-in-out infinite }
@keyframes lvKO { 0% { transform:scaleX(-1) translateY(-40px) rotate(0) } 50% { transform:scaleX(-1) translateY(-60px) rotate(-200deg) } 100% { transform:scaleX(-1) rotate(-8deg) } }
@keyframes lvDizzy { 50% { transform:scaleX(-1) rotate(4deg) translateY(-4px) } }
.lv-newworld { animation:popIn .5s 1.25s cubic-bezier(.3,1.6,.5,1) backwards }
.lv-result.pass .lv-go { animation:lvNudge 2.4s 1.6s ease-in-out infinite }
@keyframes lvNudge { 0%,70%,100% { transform:none } 78% { transform:translateY(-6px) scale(1.03) } 86% { transform:translateY(0) } 92% { transform:translateY(-3px) } }
/* back on the map: the new stars pop, the champion lands, the next stop bursts open, a new world lights up */
.lv-nst.pop i.on { animation:lvStarPop .5s cubic-bezier(.3,1.6,.5,1) backwards } .lv-nst.pop i.on:nth-child(1) { animation-delay:.15s } .lv-nst.pop i.on:nth-child(2) { animation-delay:.3s } .lv-nst.pop i.on:nth-child(3) { animation-delay:.45s }
.lv-node.unlock { animation:lvUnlock .6s cubic-bezier(.3,1.6,.5,1), lvPulse 1.5s .6s ease-in-out infinite }
.lv-node.boss.unlock { animation:lvUnlock .6s cubic-bezier(.3,1.6,.5,1), lvPulseB 1.5s .6s ease-in-out infinite }
@keyframes lvUnlock { 0% { transform:translate(-50%,-50%) scale(.6) } 50% { transform:translate(-50%,-50%) scale(1.25) } 100% { transform:translate(-50%,-50%) scale(1) } }
.lv-me.land img { animation:lvLand .45s ease-out, lvHop 1.1s .45s ease-in-out infinite }
@keyframes lvLand { 0% { transform:translateY(-30px) } 60% { transform:translateY(0) scale(1.1,.88) } 100% { transform:none } }
.lv-world.opening .lv-bg { animation:lvLightUp 1.4s 1.2s ease-out backwards }
@keyframes lvLightUp { from { filter:var(--f,) grayscale(.8) brightness(.5) } }
.lv-sign.opened { animation:lvSignOpen .7s cubic-bezier(.3,1.6,.5,1) }
@keyframes lvSignOpen { 0% { transform:translate(-50%,-50%) scale(.85) rotate(-4deg) } 50% { transform:translate(-50%,-50%) scale(1.1) rotate(2deg) } 100% { transform:translate(-50%,-50%) } }
/* menu tiles slide in one after another */
.lv-menu .lv-mtile, .lv-menu .lv-switch { animation:lvTileIn .4s cubic-bezier(.2,1.2,.3,1) backwards }
.lv-menu .lv-mtile:nth-child(1) { animation-delay:.08s } .lv-menu .lv-mtile:nth-child(2) { animation-delay:.11s } .lv-menu .lv-mtile:nth-child(3) { animation-delay:.14s } .lv-menu .lv-mtile:nth-child(4) { animation-delay:.17s }
.lv-menu .lv-mtile:nth-child(5) { animation-delay:.2s } .lv-menu .lv-mtile:nth-child(6) { animation-delay:.23s } .lv-menu .lv-mtile:nth-child(7) { animation-delay:.26s } .lv-menu .lv-mtile:nth-child(8) { animation-delay:.29s }
.lv-menu .lv-switch { animation-delay:.32s }
@keyframes lvTileIn { from { opacity:0; transform:translateX(40px) } }
@media (prefers-reduced-motion:reduce) {
  .lv-play, .lv-play::after, .lv-go, .lv-go::after, .lv-cboss, .lv-intro, .lv-intro *, .qpanel, .question, .ans.just, .ans.just::after, .shout, .lv-result *, .lv-nst i, .lv-node.unlock, .lv-me.land img, .lv-world.opening .lv-bg, .lv-sign.opened, .lv-menu * { animation:none !important }
}