/* 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; scrollbar-width:none; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 50% 50%,#3c5a33,#1f3324 75%) fixed, #1f3324 }
.lv-map::-webkit-scrollbar { display:none }
/* the track: sizes scale with the map column (at most 560px wide, like the art pack's own layout) */
.lv-track { --pad:40px; --w:min(100vw,560px); --sh:calc(var(--w) * var(--z) * 3); --g:calc(var(--sh) * .1); position:relative; width:var(--w); margin:0 auto;
  height:calc(var(--cap) + var(--wn) * (var(--sh) + var(--g)) + var(--foot)); background:#819b58; box-shadow:0 0 0 1px #0003, 0 0 60px #0008 }
.lv-col { position:absolute; inset:0; width:100% }
.lv-top { pointer-events:none; z-index:5 } .lv-top > * { pointer-events:none }
/* one world: its painted section (fading into the meadow at both ends, as the pack intends), the road, the stops, the gate */
.lv-world { position:absolute; left:0; right:0; height:calc(var(--sh) + var(--g) + var(--pad)); content-visibility:auto; contain-intrinsic-size:auto 2600px; overflow:hidden }
.lv-wi { position:absolute; left:0; right:0; top:var(--pad); bottom:0 }   /* --pad: headroom so nothing at the top of a world is cut off */
.lv-terrain { position:absolute; left:50%; top:0; width:calc(var(--z) * 100%); max-width:none; height:var(--sh); transform:translateX(-50%); display:block; object-fit:fill; user-select:none; -webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent); transition:filter .6s }
.lv-world.locked .lv-terrain { filter:grayscale(.55) brightness(.78) }
.lv-road { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.lv-road path, .lv-cap path, .lv-foot path { fill:none; stroke-linecap:round; stroke-linejoin:round }
.lv-road path { vector-effect:non-scaling-stroke } .lv-road .r0 { stroke:#63724b; stroke-width:calc(var(--w) * .135) } .lv-road .r1 { stroke:#bca775; stroke-width:calc(var(--w) * .122) } .lv-road .r2 { stroke:#e2ce94; stroke-width:calc(var(--w) * .107) } .lv-road .r3 { stroke:#c5ad77; stroke-width:calc(var(--w) * .107); stroke-dasharray:1 12 }
.lv-cap, .lv-foot { position:absolute; left:0; right:0 }
.lv-cap { top:0; height:var(--cap); background:linear-gradient(#5d7a43,#819b58 70%) }
.lv-foot { bottom:0; height:var(--foot) }
.lv-cap::after, .lv-foot::after { content:""; position:absolute; left:50%; width:calc(var(--w) * .135); transform:translateX(-50%); background:linear-gradient(90deg,#63724b 0 5%,#bca775 5% 11%,#e2ce94 11% 89%,#bca775 89% 95%,#63724b 95%) }
.lv-cap::after { top:45%; bottom:0; border-radius:99px 99px 0 0 } .lv-foot::after { top:0; bottom:0 }
/* level stops: the stone platforms from the art pack (complete blue, current green, boss gold, locked grey) */
.lv-node { position:absolute; z-index:3; transform:translate(-50%,-50%); width:18.75%; height:calc(var(--w) * .139); min-width:54px; min-height:44px; padding:0; border:0; cursor:pointer;
  background:transparent no-repeat; font-family:var(--f-display); font-size:clamp(1rem,.7rem + 1.6vw,1.55rem); line-height:1; color:#fff; text-shadow:0 2px 0 #142d45, 0 0 4px #142d45; transition:transform .15s }
.lv-node.sk-complete { background-image:url("../img/kit/med/node-complete.webp"); background-size:106.9966% 153.6765%; background-position:53.6585% 59.8174% }
.lv-node.sk-current  { background-image:url("../img/kit/med/node-current.webp");  background-size:109.2334% 155.5831%; background-position:53.7736% 58.9286% }
.lv-node.sk-locked   { background-image:url("../img/kit/med/node-locked.webp");   background-size:107.3630% 154.8148%; background-position:52.3256% 59.2342%; color:#e6e8f6; cursor:default }
.lv-node.sk-boss     { background-image:url("../img/kit/med/node-boss.webp");     background-size:107.3630% 154.6239%; background-position:53.4884% 59.3679% }
.lv-node .lv-n { position:absolute; left:0; right:0; top:20% }
.lv-node:active { transform:translate(-50%,-46%) }
.lv-node:focus-visible { outline:4px solid #fff; outline-offset:4px; border-radius:40% }
.lv-node.now { z-index:4; animation:lvGlow 1.5s ease-in-out infinite }
@keyframes lvGlow { 50% { filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px #FFE58A) } }
.lv-nst { position:absolute; left:50%; top:66%; transform:translateX(-50%); pointer-events:none }
.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 i { width:14px; height:14px } .lv-nst i:nth-child(2) { transform:translateY(3px) }
/* boss stops: the boss's face sits on the gold stone */
.lv-bossface { position:absolute; left:50%; bottom:58%; width:62%; height:auto; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; object-fit:cover; background:#fff; border:3px solid #FFC93A; box-shadow:0 3px 0 #8A5A00, 0 6px 10px #0006 }
.lv-node.locked .lv-bossface { filter:grayscale(1) brightness(.75); border-color:#c9cde0; box-shadow:0 3px 0 #5b6080 }
/* the child's champion (whichever one they picked) stands beside their level */
.lv-me { position:absolute; z-index:5; width:clamp(64px,17%,92px); aspect-ratio:1; transform:translate(-50%,-88%); 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 }
.lv-me.flip img { transform:scaleX(-1) } .lv-me.flip img { animation-name:lvHopF }
@keyframes lvHop { 50% { transform:translateY(-9px) } } @keyframes lvHopF { 0%,100% { transform:scaleX(-1) } 50% { transform:scaleX(-1) translateY(-9px) } }
/* the gate under each world: the world's sign on a wooden board across the road */
.lv-gate { position:absolute; left:0; right:0; top:var(--sh); height:var(--g); display:grid; place-items:center; pointer-events:none }
.lv-sign { position:relative; z-index:2; width:min(84%,400px); display:grid; justify-items:center; gap:3px; text-align:center; color:#fff; pointer-events:auto;
  padding:14px 26px 16px; border:24px solid transparent; border-image:url("../img/kit/med/sign-wood.webp") 70 90 fill / 22px 26px stretch; margin:-24px -30px; filter:drop-shadow(0 8px 8px #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:2px solid #ffffffb0; border-radius:99px; padding:4px 10px; box-shadow:0 2px 0 #0005 }
.lv-sign strong { font-family:var(--f-display); font-weight:400; font-size:clamp(1.25rem,1rem + 1.2vw,1.6rem); line-height:1.1; text-shadow:0 2px 0 #2f211d, 0 0 6px #2f211d }
.lv-sign small { display:inline-flex; align-items:center; gap:5px; font:800 .9rem/1.2 var(--f-ui); color:#FFF3D6; text-shadow:0 1px 0 #2f211d }
.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 { filter:grayscale(.75) brightness(.85) drop-shadow(0 8px 8px #0006) } .lv-sign.locked .lv-wnum { background:#7b809e }
.lv-soon { position:absolute; z-index:2; left:50%; top:30%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:800 1rem/1 var(--f-ui); color:#fff; text-shadow:0 2px 0 #2f211d; padding:14px 26px; border:20px solid transparent; border-image:url("../img/kit/med/sign-wood.webp") 70 90 fill / 18px 22px stretch }
.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 40%/cover }
.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 }
/* 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-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 45%/cover no-repeat; background-image:var(--lvimg); 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) } }
.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) }
@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-node.unlock.now { animation:lvUnlock .6s cubic-bezier(.3,1.6,.5,1), lvGlow 1.5s .6s ease-in-out infinite }
.lv-me.land:not(.flip) 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-terrain { animation:lvLightUp 1.4s 1.2s ease-out backwards }
@keyframes lvLightUp { from { filter:grayscale(.55) brightness(.78) } }
.lv-sign.opened { animation:lvSignOpen .7s cubic-bezier(.3,1.6,.5,1) }
@keyframes lvSignOpen { 0% { transform:scale(.85) rotate(-4deg) } 50% { transform:scale(1.1) rotate(2deg) } 100% { transform:none } }
/* 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:translateY(16px) } }
@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-terrain, .lv-sign.opened, .lv-menu * { animation:none !important }
}
/* the HUD buttons in the art pack's style: green stone-framed Play, wooden Menu, blue "My level" */
.lv-play:not(.off) { border:20px solid transparent; border-image:url("../img/kit/med/button-green.webp") 60 120 fill / 16px 30px stretch; background:none; box-shadow:none; padding:4px 18px;
  min-height:76px; text-shadow:0 2px 0 #0b4a25, 0 0 6px #0b4a25; filter:drop-shadow(0 8px 10px #0007) }
.lv-play:not(.off):active { transform:translateY(3px); filter:drop-shadow(0 3px 4px #0007) }
.lv-menubtn { border:14px solid transparent; border-image:url("../img/kit/med/menu-square.webp") 45 fill / 13px stretch; background:none; box-shadow:none; color:#fff; text-shadow:0 2px 0 #2f211d; padding:2px 6px; min-height:56px; filter:drop-shadow(0 4px 4px #0006) }
.lv-menubtn:active { transform:translateY(2px); box-shadow:none }
.lv-tonow { border:12px solid transparent; border-image:url("../img/kit/med/button-blue.webp") 60 120 fill / 10px 18px stretch; background:none; padding:2px 6px; text-shadow:0 2px 0 #0d2a5c }
/* the level card on the art pack's parchment panel */
#lvlayer .lv-card { background:none; border:26px solid transparent; border-image:url("../img/kit/med/panel-parchment.webp") 120 fill / 28px stretch; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 16px 30px #000a); width:min(470px,calc(100% - 8px)); max-height:calc(100dvh - 8px) }
#lvlayer .lv-card .lv-cardtop { border-radius:14px; margin:-6px -6px 0; border:3px solid #6b4a2a; box-shadow:0 3px 0 #0003 }
#lvlayer .lv-card .lv-cardbody { padding:14px 4px 4px; color:#3A2A14 }
#lvlayer .lv-card .lv-cardbody p { color:#3A2A14 }
#lvlayer .lv-card .lv-goals > span { background:#F3E3BE; color:#5A3E1C; border:1px solid #D9BF8A }
#lvlayer .lv-card .lv-go { border:18px solid transparent; border-image:url("../img/kit/med/button-green.webp") 60 120 fill / 14px 26px stretch; background:none; box-shadow:none; color:#fff;
  text-shadow:0 2px 0 #0b4a25, 0 0 6px #0b4a25; padding:2px 14px; min-height:68px; filter:drop-shadow(0 5px 6px #0005) }
#lvlayer .lv-card .lv-go:active { transform:translateY(3px) }
#lvlayer .lv-card .btn.ghost, #lvlayer .lv-card .btn.ghost:hover { background:#FFF7E4; color:#4A3214; border:2px solid #8B6A3E; box-shadow:0 4px 0 #B9975F }
/* top bar badges in the art pack's navy-and-bolts style */
.lv-pill { border:10px solid transparent; border-image:url("../img/kit/med/hud-bar.webp") 50 100 fill / 10px 18px stretch; background:none; padding:0 4px; min-height:44px; filter:drop-shadow(0 3px 3px #0006) }
.lv-champ { border:3px solid #FFC93A; box-shadow:0 0 0 3px #6b4a2a, 0 4px 0 3px #0007 }

/* ---------- inside a level: the art pack's parchment, wood and stone, so the level screens match the map ----------
   (html[data-world] is set while a level or its result is on screen). Answer letters keep their colours. */
html[data-world] { --page-deep:#1d2f1c }
html[data-world] .qpanel, html[data-world] .lv-result.panel { background:none !important; border:28px solid transparent !important; border-image:url("../img/kit/med/panel-parchment.webp") 120 fill / 28px stretch !important;
  border-radius:0 !important; box-shadow:none !important; filter:drop-shadow(0 14px 24px #000a); --q-ink:#3A2A14; color:#3A2A14; padding:6px 6px 8px !important }
html[data-world] .question, html[data-world] .lv-result h1, html[data-world] .lv-result .lv-line, html[data-world] .lv-result p { color:#3A2A14 !important; text-shadow:none !important }
html[data-world] .qpanel .eyebrow { color:#8A4B12 !important }
html[data-world] .qpanel .chip, html[data-world] .quizbar .chip { background:#F3E3BE !important; color:#5A3E1C !important; border:1px solid #C9A86B !important }
html[data-world] .answers { gap:12px }
html[data-world] .ans { background:none !important; border:14px solid transparent !important; border-image:url("../img/kit/med/answer-tile.webp") 55 115 fill / 14px 30px stretch !important;
  border-radius:0 !important; box-shadow:none !important; color:#3A2A14 !important; padding:6px 2px; min-height:70px; filter:drop-shadow(0 4px 3px #0004) }
html[data-world] .ans:not(:disabled):hover { transform:translateY(-2px); filter:drop-shadow(0 7px 5px #0005) brightness(1.04) }
html[data-world] .ans:not(:disabled):active { transform:translateY(2px); filter:drop-shadow(0 2px 2px #0004) }
html[data-world] .ans.right { border-image:url("../img/kit/med/button-green.webp") 60 120 fill / 14px 30px stretch !important; color:#fff !important; text-shadow:0 2px 0 #0b4a25 }
html[data-world] .ans.wrong { border-image:url("../img/kit/med/button-red.webp") 60 120 fill / 14px 30px stretch !important; color:#fff !important; text-shadow:0 2px 0 #6a1208 }
html[data-world] .ans.dim { opacity:.6 }
html[data-world] .ans.right .tag, html[data-world] .ans.wrong .tag { background:#0006 }
html[data-world] .ans.right.just::after { inset:-14px -30px; border-radius:18px }
html[data-world] .feedback { background:#FFF6DF !important; border:3px solid #C9A86B !important; border-radius:14px; color:#3A2A14 }
html[data-world] .feedback.correct { background:#EEF7DC !important; border-color:#5E9B3B !important } html[data-world] .feedback.wrong { background:#FCEBDD !important; border-color:#C46A3C !important }
html[data-world] .feedback h2, html[data-world] .feedback p { color:#3A2A14 !important; text-shadow:none !important }
/* buttons: green stone-framed for going on, parchment for everything else */
html[data-world] main .btn:not(.ghost):not(.sm) { border:14px solid transparent !important; border-image:url("../img/kit/med/button-green.webp") 60 120 fill / 14px 26px stretch !important; background:none !important;
  box-shadow:none !important; color:#fff !important; text-shadow:0 2px 0 #0b4a25, 0 0 6px #0b4a25 !important; padding:4px 16px; min-height:66px; border-radius:0 !important; filter:drop-shadow(0 5px 5px #0005) }
html[data-world] main .btn:not(.ghost):not(.sm):active { transform:translateY(3px); filter:drop-shadow(0 2px 2px #0005) }
html[data-world] main .btn.ghost, html[data-world] .quizbar .btn { background:#FFF7E4 !important; color:#4A3214 !important; border:2px solid #8B6A3E !important; box-shadow:0 4px 0 #B9975F !important; text-shadow:none !important }
html[data-world] .say-btn, html[data-world] .qpanel .iconbtn { background:#FFF7E4 !important; color:#4A3214 !important; border:2px solid #8B6A3E !important; box-shadow:0 3px 0 #B9975F !important }
/* the bar above the question: wood-framed progress, navy boss bar */
html[data-world] .quizbar .qn { color:#fff; text-shadow:0 2px 0 #1d2f1c, 0 0 8px #1d2f1c }
html[data-world] .kbar { background:#3b2a17 !important; border:3px solid #C9A15A !important; box-shadow:inset 0 3px 0 #0006, 0 3px 0 #6b4a2a !important; height:18px }
html[data-world] .kbar i { background:linear-gradient(#FFE58A,#F2A21B) !important; box-shadow:inset 0 2px 0 #fff8 }
html[data-world] .lv-bossbar { background:none; border:12px solid transparent; border-image:url("../img/kit/med/hud-bar.webp") 50 100 fill / 12px 22px stretch; border-radius:0; padding:2px 6px 2px 0 }
/* the result: stats on darker parchment */
html[data-world] .lv-result .metric { background:#F3E3BE !important; border:2px solid #C9A86B !important; box-shadow:0 3px 0 #B9975F !important; color:#3A2A14 }
html[data-world] .lv-result .metric strong, html[data-world] .lv-result .metric span, html[data-world] .lv-result .helper { color:#3A2A14 !important; text-shadow:none !important }
html[data-world] .lv-result .lv-stars.big i:not(.on) { color:#E2D2AE } html[data-world] .lv-result .lv-stars.big svg { stroke:#8B6A3E }
html[data-world] .lv-result .levelup { background:#FFF0C2; border-color:#8B6A3E }
/* the top bar while in a level */
html[data-world] .bs-pill { border:9px solid transparent !important; border-image:url("../img/kit/med/hud-bar.webp") 50 100 fill / 9px 16px stretch !important; background:none !important; box-shadow:none !important; padding:0 2px !important }
/* the launch screen: the level name on a wooden sign */
.lvi-sign { display:grid; justify-items:center; gap:8px; padding:10px 22px 14px; border:24px solid transparent; border-image:url("../img/kit/med/sign-wood.webp") 70 90 fill / 22px 26px stretch; filter:drop-shadow(0 12px 18px #0009); animation:lviDrop .45s .15s cubic-bezier(.3,1.5,.5,1) backwards }
.lvi-topic { background:#FFF3D6; color:#4A3214 }
/* the map menu on parchment */
.lv-menu { background:radial-gradient(ellipse at 50% 30%,#FFF4D8,#EBD7A8) ; border-left:6px solid #8B5E34; box-shadow:-10px 0 40px #0007, inset 3px 0 0 #C99A5B }
.lv-menu .lv-mtile, .lv-menu .lv-switch { background:#FFF8E6; border-color:#C9A86B; box-shadow:0 4px 0 #B9975F; color:#3A2A14 }
.lv-menu .lv-mtile small, .lv-menu .lv-switch small { color:#6B5232 } .lv-mhead h2, .lv-mstats { color:#3A2A14 } .lv-mstats { background:#FFF8E6; border:2px solid #C9A86B }
.lv-menu .lv-x { background:#FFF8E6; border-color:#6B4A2A; color:#3A2A14 }