/* Harmony Hopz learning games (Learn tab). Original art made with CSS and SVG. © Harmony Hopz LLC */
.hh-stage.lg{background:linear-gradient(180deg,#8fdcff 0%,#c9f0ff 55%,#d8f7c8 100%)}
.lg-meadow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lg-meadow .cl{position:absolute;width:120px;height:38px;background:#fff;border-radius:40px;opacity:.85}
.lg-meadow .cl::before{content:"";position:absolute;width:56px;height:56px;border-radius:50%;background:#fff;left:22px;top:-26px}
.lg-meadow .c1{left:8%;top:22%}.lg-meadow .c2{right:10%;top:12%;transform:scale(.8)}
.lg-meadow .hill{position:absolute;left:-10%;right:-10%;bottom:-40%;height:62%;border-radius:50%;background:#7fd66a}
.lg-meadow .sun{position:absolute;right:6%;top:16%;width:70px;height:70px;border-radius:50%;background:#ffd84a;box-shadow:0 0 0 12px rgba(255,216,74,.35)}
.lg-meadow .water{position:absolute;left:-5%;right:-5%;bottom:-8%;height:46%;border-radius:50% 50% 0 0;background:linear-gradient(#7fd3f7,#3db8f5)}
.lg-chip{position:absolute;right:10px;top:8px;z-index:6;background:#fff;color:var(--ink);font-weight:700;font-size:16px;padding:6px 12px;border-radius:999px;box-shadow:0 3px 0 rgba(0,0,0,.12);pointer-events:none}

/* the Harmony Hopz bunny */
.lg-bunny{position:absolute;z-index:3;pointer-events:none;transition:left .2s ease-out,top .2s ease-out}
.lg-bunny img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 4px rgba(0,0,0,.18))}
.lg-bunny .lg-acc{position:absolute;left:50%;top:-6%;transform:translateX(-50%);font-style:normal;font-size:min(9vmin,44px);line-height:1}
.lg-hop{animation:lg-hop .55s ease-out}
@keyframes lg-hop{0%{translate:0 0}35%{translate:0 -38%}60%{translate:0 0}75%{translate:0 -8%}100%{translate:0 0}}
.lg-nod{animation:lg-nod .4s}
@keyframes lg-nod{50%{scale:1.08}}
.lg-pop{animation:lg-pop .35s ease-out}
@keyframes lg-pop{0%{scale:.6;opacity:.3}70%{scale:1.08}100%{scale:1;opacity:1}}
.lg-grow{animation:lg-grow .6s ease-out;transform-origin:50% 90%}
@keyframes lg-grow{0%{scale:.5}70%{scale:1.1}100%{scale:1}}

/* answer buttons */
.lg-choices{position:absolute;left:0;right:0;bottom:12px;z-index:7;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 10px}
.lg-choice{font-family:inherit;color:var(--ink);background:#fff;border:4px solid #fff;border-radius:22px;box-shadow:0 6px 0 rgba(0,0,0,.15);min-width:96px;min-height:88px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-weight:700;font-size:20px;line-height:1.1;flex:0 1 auto;max-width:240px;-webkit-tap-highlight-color:transparent}
.lg-choice:focus-visible{outline:5px solid var(--sun);outline-offset:2px}
.lg-choice:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.lg-choice .ce{font-size:40px;line-height:1}
.lg-choice .cl{font-size:18px;white-space:nowrap}
.lg-choice.ok{border-color:#3fae2f;background:#eaffd9}
.lg-choice.no{opacity:.45}
.lg-choice:disabled{cursor:default}

/* reward items (earned by playing) */
.hh-stage.lg.r-bow .lg-bunny .lg-acc::after{content:"🎀"}
.hh-stage.lg.r-crown .lg-bunny .lg-acc::after{content:"👑"}
.hh-stage.lg.r-bow.r-crown .lg-bunny .lg-acc::after{content:"👑"}
.hh-stage.lg.r-sunset{background:linear-gradient(180deg,#ffb36b 0%,#ffd2a1 50%,#ffe9c7 100%)}
.hh-stage.lg.r-night{background:linear-gradient(180deg,#26306b 0%,#4b4f9a 55%,#6c6fb8 100%)}
.hh-stage.lg.r-night .lg-meadow .cl{opacity:.25}
.hh-stage.lg.r-sparkle::after{content:"✨      ⭐        ✨     ⭐      ✨";position:absolute;left:0;right:0;top:30%;text-align:center;white-space:pre;font-size:26px;opacity:.7;pointer-events:none;animation:lg-twinkle 2.4s ease-in-out infinite}
@keyframes lg-twinkle{50%{opacity:.25}}

/* ---------- 1. Math Hoops ---------- */
.lg-gym{background:#ffe3b3}
.hoop-gym{position:absolute;inset:0;pointer-events:none}
.hg-wall{position:absolute;left:0;right:0;top:0;height:72%;background:repeating-linear-gradient(90deg,#ffd9a0 0 60px,#ffcf8a 60px 120px)}
.hg-floor{position:absolute;left:0;right:0;bottom:0;height:28%;background:repeating-linear-gradient(90deg,#e8a65a 0 46px,#dc9a4e 46px 92px);border-top:6px solid #c4803a}
.hg-floor i{position:absolute;left:50%;top:22%;width:46%;height:120%;transform:translateX(-50%);border:5px solid rgba(255,255,255,.7);border-bottom:0;border-radius:50% 50% 0 0}
.hg-banner{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);background:#ff6fa8;color:#fff;font-weight:700;font-size:clamp(14px,2.6vw,22px);padding:4px 18px;border-radius:10px;white-space:nowrap;opacity:.85}
.hh-stage.lg.r-sunset .hg-wall{background:repeating-linear-gradient(90deg,#ffc6a0 0 60px,#ffb98a 60px 120px)}
.hh-stage.lg.r-night .hg-wall{background:repeating-linear-gradient(90deg,#4b4f9a 0 60px,#434790 60px 120px)}
.hoop{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform}
.hp-board{width:100%;aspect-ratio:1.5/1;background:#fff;border:5px solid #24324a;border-radius:10px;position:relative;box-shadow:0 5px 0 rgba(0,0,0,.15)}
.hp-board i{position:absolute;left:30%;right:30%;bottom:10%;height:40%;border:4px solid #ff4f5e;border-radius:4px}
.hp-rim-back{display:none}
.hoop-front{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.hp-rim{height:12px;border-radius:8px;background:#ff6a1f;box-shadow:0 3px 0 #c74a0a}
.hp-net{margin:0 8%;height:46px;background:repeating-linear-gradient(60deg,transparent 0 7px,rgba(255,255,255,.95) 7px 10px),repeating-linear-gradient(-60deg,transparent 0 7px,rgba(255,255,255,.95) 7px 10px);clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);transform-origin:50% 0}
.hoop-front.swish .hp-net{animation:lg-swish .45s}
@keyframes lg-swish{40%{scale:.85 1.25}}
.bball{position:absolute;left:0;top:0;z-index:4;border-radius:50%;pointer-events:none;will-change:transform;background:radial-gradient(circle at 35% 30%,#ffb36b,#ff7a1a 55%,#d65a00);box-shadow:inset -4px -6px 0 rgba(0,0,0,.15)}
.bball::before,.bball::after{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid #5a2a00;clip-path:inset(0 47% 0 47%)}
.bball::after{clip-path:inset(47% 0 47% 0)}
.bball.dim{opacity:.35}
.aim-ring{position:absolute;left:0;top:0;z-index:6;border-radius:50%;border:5px dashed #fff;box-shadow:0 0 0 4px rgba(36,50,74,.35);pointer-events:none}
.aim-ring[hidden]{display:none}
.aim-arc{position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:visible}
.aim-arc path{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:4 12;stroke-linecap:round;opacity:.9}
.hoop-court{position:absolute;inset:0;z-index:4;cursor:crosshair;touch-action:none}
.hoop-bunny{z-index:3}
.hoop-panel{position:absolute;right:10px;bottom:10px;z-index:6;background:#fff;border-radius:18px;padding:8px 12px;box-shadow:0 4px 0 rgba(0,0,0,.14);font-size:15px;line-height:1.2;pointer-events:none;text-align:left}
.hpn-row{display:flex;align-items:center;gap:6px;justify-content:space-between}
.hpn-row b{font-size:14px}
.hpn-row i{font-style:normal;font-size:20px}
.hpn-shots i{opacity:.2}.hpn-shots i.on{opacity:1}
.hoop-panel small{display:block;text-align:center;font-weight:700;color:var(--ink2)}
.hoop-q{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:8;background:#fff;border-radius:28px;box-shadow:0 8px 0 rgba(0,0,0,.14);padding:14px 16px 16px;width:min(94%,520px);max-height:calc(100% - 100px);overflow:auto;text-align:center}
.hq-title{font-weight:700;color:var(--ink2);font-size:clamp(16px,3.2vw,20px)}
.hq-eq{font-weight:700;font-size:clamp(44px,10vw,72px);line-height:1.1;margin:4px 0;color:var(--ink);white-space:nowrap}
.hq-blank{display:inline-block;min-width:1.2em;color:#ff4f8b}
.hq-dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin:2px 0 10px}
.hq-dots i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb36b,#ff7a1a 60%);display:inline-block}
.hq-dots i.d2{background:radial-gradient(circle at 35% 30%,#8fdcff,#1e9be6 60%)}
.hq-dots i.gone{opacity:.25;position:relative}
.hq-dots i.gone::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:4px;margin-top:-2px;background:#ff4f5e;transform:rotate(-35deg);border-radius:2px}
.hq-dots b{font-size:24px;margin:0 4px}
.hoop-q .lg-choices{position:static;padding:0}
.hoop-q .lg-choices{flex-wrap:nowrap}
.hoop-q .lg-choice{min-width:0;flex:1 1 0;max-width:140px;padding:8px 4px;min-height:80px;font-size:clamp(34px,7vw,46px);background:#fff7e0;border-color:#ffd77a}

/* ---------- 2. Five Senses ---------- */
.sn-wrap{position:absolute;left:0;right:0;top:92px;bottom:200px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 10px}
.sn-item{background:#fff;border-radius:28px;box-shadow:0 8px 0 rgba(0,0,0,.12);padding:14px 20px;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:min(70%,360px);text-align:center}
.sn-emo{font-size:clamp(70px,16vh,130px);line-height:1}
.sn-name{font-weight:700;font-size:clamp(18px,3.6vw,26px);line-height:1.15}
.sn-bunny{position:relative;width:min(22vw,150px);flex:none}
.sn-tip{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:6;background:#fffbe8;border:3px solid #ffc93c;color:var(--ink);font-weight:700;font-size:clamp(15px,3.2vw,20px);padding:6px 14px;border-radius:18px;max-width:94%;width:max-content;text-align:center;line-height:1.2}
.sn-tip.yes{background:#eaffd9;border-color:#3fae2f}
.sn-choices .lg-choice{min-width:82px;padding:6px 10px}
@media (max-width:560px){.sn-choices{gap:7px}.sn-choices .lg-choice{min-width:62px;min-height:76px;padding:4px 6px}.sn-choices .lg-choice .ce{font-size:32px}.sn-choices .lg-choice .cl{font-size:15px}.sn-tip{bottom:120px}.sn-wrap{bottom:170px}}

/* ---------- 3. Clock Hop ---------- */
.ck-box{position:absolute;z-index:2}
.ck-face{width:100%;height:100%;border-radius:50%;box-shadow:0 8px 0 rgba(0,0,0,.12)}
.ck-svg{width:100%;height:100%;display:block}
.ck-bunny{z-index:3}
.ck-legend{position:absolute;left:0;right:0;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;font-weight:700;font-size:clamp(13px,2.6vw,16px);color:var(--ink);pointer-events:none}
.ck-legend span{background:rgba(255,255,255,.85);padding:2px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.ck-legend i{display:inline-block;width:22px;height:6px;border-radius:3px}
.ck-legend i.h{background:#1e9be6;width:16px;height:8px}.ck-legend i.m{background:#ff4f8b;width:28px}
.ck-choices .lg-choice{min-width:min(28vw,150px)}
.ck-choices .ct{font-size:clamp(30px,6.4vw,40px)}
.ck-choices .cl{font-size:clamp(13px,2.8vw,16px);color:var(--ink2)}

/* ---------- 4. A Seed Grows ---------- */
.sg-pot{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:min(36vh,44vw,230px);z-index:2;transition:width .4s,top .4s}
.sg-plant{width:100%;aspect-ratio:100/120;display:flex;align-items:flex-end}
.sg-plant .pl-svg{width:100%;height:100%;display:block}
.sg-pot-base{width:76%;margin:-14% auto 0;height:min(9vh,56px);background:linear-gradient(#e0794a,#c25a2c);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);border-radius:6px}
.sg-pot.small{width:min(18vh,22vw,110px);top:86px;left:auto;right:8px;transform:none}
.sg-bunny{left:4%;top:auto;bottom:150px;width:min(22vw,24vh,160px)}
@media (max-width:560px){.sg-bunny{width:min(18vw,90px);bottom:130px}}
.sg-can{position:absolute;left:calc(50% - min(18vh,22vw,115px) + 10px);top:120px;font-size:38px;z-index:3;opacity:0;pointer-events:none}
.sg-can.pour{animation:lg-pour 1s}
@keyframes lg-pour{0%{opacity:0;translate:0 -10px}20%,80%{opacity:1;translate:0 30px}100%{opacity:0;translate:0 60px}}
.pl-ico{display:block;width:62px;height:72px}
.pl-ico .pl-svg{width:100%;height:100%}
.sg-choices .lg-choice{min-width:100px}
.sg-choices.five{gap:5px;flex-wrap:nowrap}
.sg-choices.five .lg-choice{min-width:0;width:min(17vw,112px);padding:6px 2px;border-width:3px}
.sg-choices.five .lg-choice.used{visibility:hidden}
.sg-choices.five .pl-ico{width:min(12vw,56px);height:min(14vw,66px)}
.sg-choices.five .cl{font-size:clamp(13px,2.8vw,17px)}
.sg-slots{position:absolute;left:8px;right:8px;top:calc(50% - 70px);z-index:4;display:flex;justify-content:center;gap:6px}
.sg-slot{flex:0 1 112px;min-width:0;aspect-ratio:4/5;max-height:160px;background:rgba(255,255,255,.7);border:4px dashed #fff;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 2px;position:relative}
.sg-slot b{font-size:18px;color:var(--ink2);line-height:1}
.sg-slot .pl-svg{width:80%;flex:1;min-height:0}
.sg-slot span{font-weight:700;font-size:clamp(12px,2.6vw,16px);line-height:1.1}
.sg-slot.full{background:#fff;border-style:solid;border-color:#3fae2f}

/* ---------- 5. Pattern Hop ---------- */
.ph-path{position:absolute;left:0;right:0;top:56%;transform:translateY(-50%);z-index:2;display:flex;justify-content:center;align-items:center;gap:8px;padding:0 10px}
.ph-stone{width:var(--sz,80px);height:var(--sz,80px);flex:none;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9be27f,#4fb43a);box-shadow:0 6px 0 rgba(0,0,0,.15);display:grid;place-items:center}
.ph-stone.q{background:radial-gradient(circle at 40% 35%,#fff,#e8f4ff);border:4px dashed #1e9be6}
.pt-dot{display:block;width:62%;height:62%;border-radius:50%;background:var(--pc);border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.pt-e{font-size:calc(var(--sz,80px) * .55);line-height:1}
.pt-q{font-size:calc(var(--sz,80px) * .55);font-weight:700;color:#1e9be6;line-height:1}
.ph-bunny{z-index:3}
.ph-choices .lg-choice{min-width:min(26vw,130px);--sz:64px}
.ph-choices .pt-dot{width:52px;height:52px}
.ph-choices .pt-e{font-size:46px}
@media (prefers-reduced-motion:reduce){.lg-hop,.lg-pop,.lg-grow,.lg-bunny{animation:none!important;transition:none!important}.hh-stage.lg.r-sparkle::after{animation:none}}

/* ---------- Learn page and Games page cards ---------- */
.lgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));max-width:1100px;margin:0 auto}
.lcard{background:#fff;border-radius:30px;padding:14px;box-shadow:var(--shadow);border:4px solid var(--c3,#fff);display:flex;flex-direction:column;gap:10px;scroll-margin-top:100px}
.lcard:target{outline:5px solid var(--sun);outline-offset:3px}
.lc-art{position:relative;border-radius:22px;overflow:hidden;background:var(--c3,#eef6ff);display:flex;justify-content:center;align-items:center;padding:14px}
.lc-art img{display:block;width:min(70%,260px);height:auto;aspect-ratio:1;border-radius:50%;border:5px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.08);object-fit:cover}
.lc-emo{position:absolute;right:12px;bottom:10px;font-size:46px;line-height:1;background:#fff;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.lc-body{display:flex;flex-direction:column;gap:6px;flex:1}
.lc-topic{margin:0;font-weight:700;color:var(--c4,#1e9be6);font-size:15px;text-transform:uppercase;letter-spacing:.5px}
.lcard h3{margin:0;font-size:26px;line-height:1.1}
.lcard p{margin:0;color:var(--ink2)}
.lc-video{font-size:15px;background:#f6f8ff;border-radius:14px;padding:6px 10px}
.lc-video.lc-soon{background:#fffbe8}
.lcard .lbtns{margin-top:auto;padding-top:6px}
.lcard .lbtn.big{font-size:17px;padding:11px 16px}
.lghub{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));max-width:1100px;margin:10px auto 0}
.lghub-card{background:#fff;border-radius:24px;padding:14px;box-shadow:var(--shadow);border:4px solid var(--c3,#fff);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;transition:transform .15s}
.lghub-card:hover{transform:translateY(-3px)}
.lghub-emo{font-size:50px;line-height:1.1}
.lghub-pic{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.08);margin:2px 0 6px;background:#eef6ff}
.lghub-name{font-weight:700;font-size:22px}
.lghub-topic{font-size:15px;color:var(--ink2)}
.lghub-card .fplay{margin-top:6px;background:var(--c4,#3fae2f);color:#fff;font-weight:700;border-radius:999px;padding:6px 16px}
.learn-game .hh-ov .cover{border-radius:50%;width:min(34vh,58vw,280px)}
.hh-stage.lg .toast{bottom:auto;top:96px;z-index:9;max-width:92%;text-align:center;white-space:normal;width:max-content}