:root{
  --yellow:#FFD94D;
  --purple:#8F63FF;
  --purple-dark:#5B43D4;
  --purple-deep:#3F3277;
  --teal:#22D3C5;
  --pink:#FF6EB6;
  --orange:#FF9F1C;
  --sky:#EAF8FF;
  --lav:#F4F0FF;
  --paper:#FFFDFB;
  --card:#FFFFFF;
  --ink:#382F5F;
  --ink-soft:#5F5686;
  --line:rgba(91,67,212,.11);
  --shadow:0 16px 40px rgba(76,62,139,.16);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, #fff9d8 0, transparent 18%),
    radial-gradient(circle at top right, #ffe7f3 0, transparent 20%),
    linear-gradient(#fbfdff,#f7f3ff 40%,#fffaf6 100%);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:999;border-radius:12px}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0}
.brand img{width:190px;height:auto}
.menu{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.menu a{font-weight:800;padding:10px 13px;border-radius:999px}
.menu a:hover,.menu a.active{background:#f0ebff;color:var(--purple-dark)}
.menu .parent-link{background:var(--purple-dark);color:#fff}
.mobile-toggle{display:none;border:0;background:#eee9ff;border-radius:14px;padding:10px 12px;font-size:1.2rem}

.hero{
  position:relative;
  min-height:720px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,.2) 68%, rgba(255,255,255,.08) 100%),
    url('../img/lumaloodle-land-real.png') center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.32) 74%, rgba(247,243,255,.94) 100%);
}
.hero-content{position:relative;z-index:2;max-width:630px;padding:85px 0 80px}
.hero-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  border-radius:36px;
  padding:30px;
}
.eyebrow{display:inline-block;background:#fff;padding:8px 14px;border-radius:999px;font-weight:900;color:var(--purple-dark);box-shadow:var(--shadow)}
h1,h2,h3{line-height:1.08;margin:.3em 0}
.hero h1{font-size:clamp(3rem,7vw,5.6rem);color:var(--purple-dark);text-shadow:0 3px 0 rgba(255,255,255,.7)}
.hero p{font-size:clamp(1.08rem,1.9vw,1.34rem);max-width:560px;color:#41386d}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn{border:0;border-radius:999px;padding:15px 22px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 0 rgba(76,62,139,.13);transition:.18s transform,.18s box-shadow,.18s opacity}
.btn:hover{transform:translateY(-2px);box-shadow:0 11px 0 rgba(76,62,139,.13)}
.btn.primary{background:var(--purple-dark);color:#fff}
.btn.secondary{background:var(--yellow);color:#4b3a76}
.btn.pink{background:var(--pink);color:#fff}
.btn.teal{background:var(--teal);color:#173d3a}

.friend-band{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  margin-top:28px;
}
.friend-bubble{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.56);
  border-radius:26px;
  padding:14px 12px 12px;
  text-align:center;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.friend-bubble img{height:110px;width:auto;margin:0 auto 8px;object-fit:contain}
.friend-bubble strong{display:block;font-size:1rem;line-height:1.15;margin-bottom:6px}
.friend-bubble span{display:inline-block;font-size:.83rem;color:var(--ink-soft);line-height:1.2;padding:4px 9px;border-radius:999px;background:#f3eeff}

.section{padding:82px 0}
.section.alt{background:linear-gradient(#f5f2ff,#efeaff)}
.section-title{text-align:center;max-width:850px;margin:0 auto 36px}
.section-title h2{font-size:clamp(2.2rem,5vw,3.7rem);color:var(--purple-dark)}
.section-title p{font-size:1.08rem;color:var(--ink-soft)}
.grid{display:grid;gap:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:2px solid var(--line)}
.card h3{font-size:1.45rem}
.feature-card{min-height:250px;display:flex;flex-direction:column}
.feature-icon{font-size:3rem}
.feature-card:nth-child(1){border-top:9px solid var(--yellow)}
.feature-card:nth-child(2){border-top:9px solid var(--pink)}
.feature-card:nth-child(3){border-top:9px solid var(--teal)}

.character-card{text-align:center;overflow:hidden;padding:20px}
.character-card img{height:220px;width:auto;margin:0 auto 12px;object-fit:contain}
.character-card h3{margin-top:8px}
.character-card .tag{display:inline-block;padding:6px 11px;border-radius:999px;font-weight:900;font-size:.85rem;background:#f1edff}
.character-card p{margin-top:12px;color:var(--ink-soft)}
.character-card.luma{background:#fffbea}
.character-card.loodle{background:#f4edff}
.character-card.pip{background:#eafffb}
.character-card.bloop{background:#fff0f8}
.character-card.twila{background:#f0edff}
.character-card.elvie{background:#fff5ed}

.spotlight-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch}
.spotlight-card{
  position:relative;
  min-height:330px;
  border-radius:36px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(120deg, rgba(91,67,212,.92), rgba(143,99,255,.87));
  color:#fff;
  padding:34px;
}
.spotlight-card h2{font-size:clamp(2.2rem,4.4vw,3.3rem)}
.spotlight-card p{max-width:520px}
.spotlight-card .accent-character{
  position:absolute;right:20px;bottom:0;height:290px;width:auto;
}
.info-stack{display:grid;gap:18px}
.info-pill-card{display:flex;gap:18px;align-items:center}
.info-pill-card img{height:120px;width:auto;flex:0 0 auto}
.info-pill-card p{margin:.35rem 0 0;color:var(--ink-soft)}


.banner{border-radius:40px;padding:42px;background:linear-gradient(120deg,var(--purple-dark),var(--purple));color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.banner h2{font-size:clamp(2rem,4vw,3.2rem)}
.video-placeholder{aspect-ratio:16/9;border-radius:24px;background:linear-gradient(135deg,#5f49cf,#a96dff);display:grid;place-items:center;color:#fff;text-align:center;padding:24px;overflow:hidden;position:relative}

.banner{border-radius:40px;padding:42px;background:linear-gradient(120deg,var(--purple-dark),var(--purple));color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.banner h2{font-size:clamp(2rem,4vw,3.2rem)}
.video-placeholder.soft{background:linear-gradient(135deg,#22d3c5,#66e7ff)}

.banner{border-radius:40px;padding:42px;background:linear-gradient(120deg,var(--purple-dark),var(--purple));color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.banner h2{font-size:clamp(2rem,4vw,3.2rem)}
.video-placeholder.pinkish{background:linear-gradient(135deg,#ff78b8,#ffb55f)}

.banner{border-radius:40px;padding:42px;background:linear-gradient(120deg,var(--purple-dark),var(--purple));color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.banner h2{font-size:clamp(2rem,4vw,3.2rem)}
.video-placeholder .play{font-size:4rem}
.note{font-size:.92rem;opacity:.84}
.pill{display:inline-block;border-radius:999px;padding:6px 12px;background:#f3eeff;font-weight:800;margin:4px}
.page-hero{padding:76px 0;background:linear-gradient(120deg,#edfaff,#fff0f8)}
.page-hero h1{font-size:clamp(2.7rem,6vw,5rem);color:var(--purple-dark)}
.page-hero-wrap{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.page-hero-art img{height:220px;width:auto}

.game-shell{max-width:900px;margin:auto;background:#fff;border-radius:36px;padding:28px;box-shadow:var(--shadow);text-align:center;border:2px solid var(--line)}
.game-prompt{font-size:clamp(1.6rem,4vw,2.7rem);font-weight:900}
.shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}
.shape-btn{min-height:180px;border:0;border-radius:28px;background:#f8f6ff;cursor:pointer;display:grid;place-items:center;transition:.15s transform,.15s background}
.shape-btn:hover{transform:scale(1.03);background:#efebff}
.shape{width:110px;height:110px}
.circle{border-radius:50%;background:var(--pink)}
.square{background:var(--teal);border-radius:12px}
.triangle{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:110px solid var(--yellow)}
.game-status{min-height:45px;font-size:1.3rem;font-weight:900}
.stars{font-size:1.8rem}
.game-banner{display:grid;grid-template-columns:.6fr 1fr .6fr;gap:10px;align-items:end;margin-bottom:12px}
.game-banner img{height:150px;width:auto;margin:auto}
.parent-box{background:#fff;border-left:8px solid var(--purple-dark);padding:24px;border-radius:20px;box-shadow:var(--shadow)}
.legal{max-width:900px;margin:auto}
.legal h2{margin-top:35px;color:var(--purple-dark)}

.footer{background:var(--purple-deep);color:white;padding:44px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.footer img{max-width:220px;height:auto;filter:none}
.footer a{opacity:.9}
.footer a:hover{opacity:1;text-decoration:underline}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;margin-top:28px;font-size:.9rem;opacity:.8}

.small-list{padding-left:18px;margin-top:10px}
.small-list li{margin-bottom:8px}
.inline-character{display:flex;gap:14px;align-items:center}
.inline-character img{height:86px;width:auto}

@media(max-width:1080px){
  .friend-band{grid-template-columns:repeat(3,1fr)}
  .spotlight-grid{grid-template-columns:1fr}
  .page-hero-wrap{grid-template-columns:1fr}
}
@media(max-width:900px){
  .grid.four,.grid.three,.grid.two{grid-template-columns:repeat(2,1fr)}
  .menu{display:none;position:absolute;left:4%;right:4%;top:82px;background:#fff;padding:14px;border-radius:24px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .menu.open{display:flex}
  .mobile-toggle{display:block}
  .brand img{width:170px}
  .footer-grid{grid-template-columns:1fr}
  .shape-options{grid-template-columns:1fr}
  .shape-btn{min-height:145px}
  .hero{min-height:unset}
  .hero-content{padding-top:52px;padding-bottom:52px}
  .game-banner{grid-template-columns:1fr 1fr;}
  .game-banner img:last-child{display:none}
}
@media(max-width:640px){
  .grid.four,.grid.three,.grid.two,.friend-band{grid-template-columns:1fr}
  .hero{background:
    linear-gradient(180deg,rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 38%, rgba(255,255,255,.22) 100%),
    url('../img/lumaloodle-land-real.png') center/cover no-repeat}
  .hero-card{padding:24px}
  .hero h1{font-size:clamp(2.8rem,14vw,4.2rem)}
  .section{padding:58px 0}
  .card{border-radius:24px}
  .site-header .container{width:95%}
  .brand img{width:155px}
  .character-card img{height:185px}
  .page-hero-art img{height:170px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ------------------------------
   Version 3: videos, game hub & sounds
   ------------------------------ */
.sound-toggle{
  border:2px solid rgba(91,67,212,.12);
  background:#fff9db;
  color:var(--purple-dark);
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(76,62,139,.10);
}
.sound-toggle:hover{transform:translateY(-1px)}
.nav-actions{display:flex;align-items:center;gap:9px}

.games-hero{
  background:
    linear-gradient(120deg,rgba(244,240,255,.94),rgba(234,248,255,.95)),
    url('../img/lumaloodle-land-real.png') center/cover;
}
.game-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.learning-game-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:390px;
  overflow:hidden;
  padding:24px;
  border-radius:32px;
  background:#fff;
  border:2px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.learning-game-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(76,62,139,.20)}
.learning-game-card .game-emoji{font-size:2.3rem;line-height:1}
.learning-game-card h3{font-size:1.6rem;margin:.45rem 0}
.learning-game-card p{color:var(--ink-soft);margin-top:.25rem}
.learning-game-card img{height:178px;width:auto;object-fit:contain;object-position:center bottom;margin:auto auto 0}
.learning-game-card .play-link{margin-top:16px;align-self:stretch}
.learning-game-card.shapes{border-top:9px solid #ff6178}
.learning-game-card.colors{border-top:9px solid #7d64ff}
.learning-game-card.counting{border-top:9px solid #ffd84e}
.learning-game-card.letters{border-top:9px solid #9873ff}
.learning-game-card.teeth{border-top:9px solid #26d3c4}
.learning-game-card.bubbles{border-top:9px solid #5bc6ff}
.learning-game-card.memory{border-top:9px solid #ff80bc}
.game-hub-note{margin-top:28px;text-align:center;color:var(--ink-soft)}

.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.video-card{padding:18px}
.video-embed{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#271e55}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card h3{margin-top:18px;font-size:1.45rem}
.video-card .video-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.video-card .video-meta span{font-size:.84rem;font-weight:900;padding:5px 10px;border-radius:999px;background:#f3eeff;color:var(--purple-dark)}
.feature-video{max-width:980px;margin:0 auto 32px}
.feature-video .video-embed{border-radius:32px;box-shadow:var(--shadow)}

.game-page{background:linear-gradient(#f8fbff,#f6f0ff 55%,#fff8f5)}
.game-page .site-header{position:relative}
.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.game-topbar .back-link{font-weight:900;color:var(--purple-dark)}
.game-score{display:inline-flex;align-items:center;gap:8px;background:#fff8d9;border-radius:999px;padding:9px 14px;font-weight:900;box-shadow:0 8px 22px rgba(76,62,139,.10)}
.learning-game-shell{
  max-width:960px;
  margin:32px auto 72px;
  background:rgba(255,255,255,.96);
  border:2px solid var(--line);
  border-radius:40px;
  box-shadow:var(--shadow);
  padding:28px;
  text-align:center;
  overflow:hidden;
}
.game-character-row{display:grid;grid-template-columns:150px 1fr 150px;align-items:end;gap:18px;margin-bottom:8px}
.game-character-row img{height:150px;width:auto;object-fit:contain;margin:auto}
.game-titleblock h1{font-size:clamp(2.2rem,5vw,3.9rem);color:var(--purple-dark);margin:.15em 0}
.game-titleblock p{margin:.3rem 0;color:var(--ink-soft)}
.game-instruction{font-size:clamp(1.55rem,4vw,2.5rem);font-weight:900;color:var(--ink);margin:24px 0 8px}
.game-status-v3{min-height:42px;font-size:1.1rem;font-weight:800;color:var(--ink-soft);margin:4px 0 16px}
.game-status-v3.good{color:#17866f}
.game-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.game-answer{touch-action:manipulation}

.shape-grid-v3{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}
.shape-choice{min-height:180px;border:0;border-radius:28px;background:#f8f6ff;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(91,67,212,.06);transition:transform .15s,background .15s}
.shape-choice:hover{transform:scale(1.025);background:#f0ebff}
.shape-icon{width:105px;height:105px;display:block}
.shape-icon.circle{border-radius:50%;background:#ff6178}
.shape-icon.square{background:#2ed0c1;border-radius:18px}
.shape-icon.triangle{width:0;height:0;border-left:58px solid transparent;border-right:58px solid transparent;border-bottom:108px solid #ffd84e}
.shape-icon.star{width:auto;height:auto;font-size:7rem;line-height:1;color:#46a7ff;text-shadow:0 5px 0 rgba(70,167,255,.16)}

.color-grid-v3{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.color-choice{aspect-ratio:1.15;border:0;border-radius:28px;background:var(--tile-color);cursor:pointer;position:relative;box-shadow:inset 0 -9px 0 rgba(0,0,0,.08),0 9px 20px rgba(76,62,139,.10);transition:transform .15s}
.color-choice:hover{transform:scale(1.04)}
.color-choice span{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(255,255,255,.88);padding:4px 9px;border-radius:999px;font-size:.78rem;font-weight:900;text-transform:capitalize}

.count-display{min-height:190px;display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin:20px auto;padding:20px;border-radius:30px;background:linear-gradient(135deg,#fffbea,#eefcff);border:2px dashed rgba(91,67,212,.16)}
.count-display span{font-size:4.2rem;filter:drop-shadow(0 5px 4px rgba(76,62,139,.10))}
.number-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:720px;margin:20px auto}
.number-choice{min-height:100px;border:0;border-radius:24px;background:#f0ebff;color:var(--purple-dark);font-size:2.8rem;font-weight:900;cursor:pointer;box-shadow:0 7px 0 rgba(91,67,212,.12)}
.number-choice:hover{transform:translateY(-2px)}

.letter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:700px;margin:26px auto}
.letter-choice{min-height:145px;border:0;border-radius:28px;background:linear-gradient(145deg,#fff,#f1ebff);color:var(--purple-dark);font-size:4rem;font-weight:900;cursor:pointer;border:2px solid rgba(91,67,212,.09);box-shadow:0 9px 24px rgba(76,62,139,.10)}
.letter-choice:hover{transform:rotate(-1deg) scale(1.025)}

.mouth-board{position:relative;min-height:410px;max-width:760px;margin:22px auto;background:radial-gradient(ellipse at center,#ff9bad 0 15%,#d9506d 16% 26%,#6d1735 27% 70%,#391028 71% 100%);border:14px solid #ffb5c5;border-radius:48% 48% 44% 44% / 42% 42% 55% 55%;box-shadow:inset 0 0 0 12px #fff7f5,0 15px 30px rgba(76,62,139,.12);overflow:hidden}
.mouth-board::before,.mouth-board::after{content:"";position:absolute;left:8%;right:8%;height:62px;background:repeating-linear-gradient(90deg,#fff 0 10.5%,#eef0f5 10.5% 11%);border-radius:18px;box-shadow:0 5px 0 rgba(0,0,0,.06)}
.mouth-board::before{top:18px}.mouth-board::after{bottom:18px}
.teeth-bug{position:absolute;width:76px;height:66px;border:0;border-radius:48% 52% 42% 58%;background:linear-gradient(145deg,#9e70ff,#6b4eff);cursor:pointer;z-index:2;box-shadow:0 7px 0 rgba(44,23,91,.24);transition:opacity .22s,scale .22s,filter .22s}
.teeth-bug::before,.teeth-bug::after{content:"";position:absolute;width:13px;height:26px;background:#7b59dc;border-radius:999px;top:-13px}
.teeth-bug::before{left:18px;transform:rotate(-25deg)}.teeth-bug::after{right:18px;transform:rotate(25deg)}
.bug-eye{position:absolute;width:11px;height:13px;background:#fff;border-radius:50%;top:20px}.bug-eye::after{content:"";position:absolute;width:5px;height:6px;background:#27203f;border-radius:50%;left:3px;top:4px}.bug-eye.left{left:20px}.bug-eye.right{right:20px}.bug-smile{position:absolute;width:25px;height:12px;border-bottom:4px solid #321446;border-radius:0 0 50% 50%;left:25px;top:39px}
.bug-leg{position:absolute;width:24px;height:5px;background:#6b4eff;border-radius:999px;top:38px}.bug-leg.l1{left:-17px;transform:rotate(25deg)}.bug-leg.l2{left:-16px;top:49px;transform:rotate(-18deg)}.bug-leg.r1{right:-17px;transform:rotate(-25deg)}.bug-leg.r2{right:-16px;top:49px;transform:rotate(18deg)}
.teeth-bug.gone{opacity:0;scale:.25;filter:blur(3px);pointer-events:none}

.bath-board{max-width:800px;min-height:430px;margin:22px auto;padding:24px;border-radius:42px;background:linear-gradient(#9eeaff 0 22%,#dffaff 22% 100%);border:12px solid #fff;box-shadow:inset 0 -45px 0 rgba(47,191,232,.18),0 16px 30px rgba(76,62,139,.12);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:13px;overflow:hidden}
.bath-bubble{border:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 8%,rgba(255,255,255,.74) 9% 18%,var(--bubble-color) 54%,rgba(255,255,255,.15) 100%);cursor:pointer;box-shadow:inset -8px -10px 16px rgba(255,255,255,.30),0 6px 10px rgba(60,76,130,.12);transition:transform .16s,opacity .18s}
.bath-bubble:hover{transform:translateY(-3px) scale(1.04)}
.bath-bubble.popped{transform:scale(1.8);opacity:0;pointer-events:none}
.bath-bubble.wobble{animation:bubbleWobble .35s ease}
@keyframes bubbleWobble{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}

.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:760px;margin:28px auto}
.memory-card{position:relative;aspect-ratio:.82;border:0;background:transparent;cursor:pointer;perspective:800px;padding:0}
.memory-back,.memory-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:24px;backface-visibility:hidden;transition:transform .38s;box-shadow:0 10px 22px rgba(76,62,139,.14);border:2px solid rgba(91,67,212,.08)}
.memory-back{background:linear-gradient(145deg,#6b4eff,#9e70ff);color:#ffd84e;font-size:4rem;transform:rotateY(0)}
.memory-face{background:#fff;transform:rotateY(180deg);flex-direction:column;padding:8px;gap:5px}
.memory-face img{height:100px;width:auto;object-fit:contain}.memory-face strong{font-size:.9rem;color:var(--purple-dark)}
.memory-card.flipped .memory-back,.memory-card.matched .memory-back{transform:rotateY(180deg)}
.memory-card.flipped .memory-face,.memory-card.matched .memory-face{transform:rotateY(360deg)}
.memory-card.matched .memory-face{box-shadow:0 0 0 5px #a7f3d0,0 10px 22px rgba(76,62,139,.14)}

.star-burst{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(3rem,9vw,7rem);z-index:999;pointer-events:none;animation:starPop .7s ease forwards;filter:drop-shadow(0 8px 8px rgba(76,62,139,.18))}
@keyframes starPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.35)}}

@media(max-width:1000px){
  .game-hub-grid{grid-template-columns:repeat(2,1fr)}
  .shape-grid-v3,.color-grid-v3{grid-template-columns:repeat(2,1fr)}
  .game-character-row{grid-template-columns:115px 1fr 115px}
  .game-character-row img{height:115px}
}
@media(max-width:760px){
  .video-grid{grid-template-columns:1fr}
  .game-character-row{grid-template-columns:82px 1fr 82px;gap:8px}
  .game-character-row img{height:90px}
  .learning-game-shell{padding:18px;border-radius:30px;margin-top:18px}
  .letter-grid{grid-template-columns:repeat(2,1fr)}
  .number-grid{grid-template-columns:repeat(5,1fr);gap:8px}.number-choice{min-height:72px;font-size:2rem}
  .mouth-board{min-height:360px;border-width:9px}
  .memory-grid{grid-template-columns:repeat(2,1fr);max-width:430px}
  .nav-actions{margin-left:auto}
  .sound-toggle{font-size:.82rem;padding:8px 10px}
}
@media(max-width:560px){
  .game-hub-grid{grid-template-columns:1fr}
  .shape-grid-v3,.color-grid-v3{grid-template-columns:repeat(2,1fr);gap:10px}
  .shape-choice{min-height:125px}.shape-icon{transform:scale(.75)}.shape-icon.star{font-size:5rem}
  .count-display span{font-size:3.25rem}
  .letter-choice{min-height:110px;font-size:3.1rem}
  .game-character-row img:last-child{display:none}.game-character-row{grid-template-columns:85px 1fr}
  .bath-board{min-height:360px;padding:15px}
  .mouth-board{min-height:330px}
}

/* ------------------------------
   Version 4: adventure, holiday & music games
   ------------------------------ */
.game-category-title{margin:52px 0 18px;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--purple-dark)}
.game-category-title:first-child{margin-top:0}
.voice-preview{display:flex;justify-content:center;margin:12px 0 8px}
.character-voice-btn{border:0;border-radius:999px;padding:10px 16px;background:#fff3c6;color:var(--purple-dark);font-weight:900;cursor:pointer;box-shadow:0 7px 18px rgba(76,62,139,.12)}
.character-voice-btn:hover{transform:translateY(-1px)}
.learning-game-card.fireflies{border-top:9px solid #ffe366}
.learning-game-card.halloween{border-top:9px solid #ff9b45}
.learning-game-card.thanksgiving{border-top:9px solid #d8893f}
.learning-game-card.christmas{border-top:9px solid #49b76e}
.learning-game-card.newyears{border-top:9px solid #5aa9ff}
.learning-game-card.birthday{border-top:9px solid #ff7eb7}
.learning-game-card.valentines{border-top:9px solid #ff5f8a}
.learning-game-card.hide{border-top:9px solid #70c96f}
.learning-game-card.instruments{border-top:9px solid #7a67ff}
.learning-game-card.snake{border-top:9px solid #a75df0}

.firefly-field{position:relative;min-height:470px;max-width:820px;margin:22px auto;border-radius:36px;overflow:hidden;background:linear-gradient(#17143d 0 45%,#23365d 45% 70%,#315c4e 70%);box-shadow:inset 0 0 70px rgba(0,0,0,.32),0 16px 34px rgba(76,62,139,.16)}
.firefly-field::before{content:"✦  ·  ✧      ·   ✦      ·     ✧";position:absolute;inset:18px 20px auto;color:rgba(255,255,255,.65);font-size:1.3rem;letter-spacing:14px;white-space:nowrap}
.firefly{position:absolute;width:52px;height:52px;border:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%);animation:fireflyFloat 2.6s ease-in-out infinite alternate}
.firefly-glow{position:absolute;inset:6px;border-radius:50%;background:#ffe96e;box-shadow:0 0 14px 7px rgba(255,233,110,.72),0 0 28px 12px rgba(255,233,110,.25)}
.firefly-body{position:relative;z-index:2;color:#765700;font-size:1.4rem;line-height:52px}
.firefly.caught{opacity:0;transform:translate(-50%,-50%) scale(1.9);pointer-events:none;transition:.25s}
@keyframes fireflyFloat{to{margin-top:-13px;margin-left:9px}}

.halloween-board,.harvest-board,.christmas-board{max-width:820px;margin:24px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px;border-radius:34px}
.halloween-board{background:linear-gradient(145deg,#2c184b,#5b2d73);box-shadow:0 16px 32px rgba(52,24,82,.24)}
.spooky-tile{min-height:125px;border:0;border-radius:24px;background:#fff3cf;font-size:3.6rem;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.12)}
.spooky-tile.found{opacity:.15;transform:scale(.75);pointer-events:none;transition:.22s}
.spooky-tile.wobble{animation:bubbleWobble .35s ease}
.harvest-board{background:linear-gradient(145deg,#fff2c7,#ffd5a0);border:3px dashed #c37b3b}
.harvest-tile{min-height:115px;border:0;border-radius:24px;background:rgba(255,255,255,.82);font-size:3.3rem;cursor:pointer;box-shadow:0 7px 16px rgba(147,89,43,.12)}
.harvest-tile.basketed{opacity:0;transform:translateY(50px) scale(.5);pointer-events:none;transition:.3s}
.christmas-board{background:linear-gradient(145deg,#163d2e,#235641);border:10px solid #fff;border-radius:50% 50% 18% 18% / 12% 12% 8% 8%;max-width:680px}
.christmas-light{aspect-ratio:1;border:0;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;position:relative;box-shadow:inset 0 0 0 3px rgba(255,255,255,.15)}
.christmas-light::after{content:"";position:absolute;inset:20%;border-radius:50%;background:var(--light-color);filter:saturate(.55) brightness(.5)}
.christmas-light.lit::after{filter:none;box-shadow:0 0 22px 8px var(--light-color)}
.christmas-light.wrong{animation:bubbleWobble .3s ease}

.countdown-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;max-width:760px;margin:24px auto;position:relative;z-index:2}
.countdown-number{min-height:105px;border:0;border-radius:24px;background:linear-gradient(145deg,#fff,#e9edff);font-size:2.8rem;font-weight:900;color:var(--purple-dark);cursor:pointer;box-shadow:0 8px 0 rgba(91,67,212,.14)}
.countdown-number.done{opacity:.25;transform:scale(.8);pointer-events:none}
.fireworks-sky{position:relative;min-height:260px;max-width:840px;margin:18px auto -10px;background:linear-gradient(#101330,#252b62);border-radius:32px;overflow:hidden}
.firework-pop{position:absolute;color:#ffe25e;font-size:3rem;animation:fireworkBurst 1.4s ease-out forwards;opacity:0}
@keyframes fireworkBurst{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.1) rotate(30deg)}}

.birthday-scene{max-width:680px;margin:22px auto;padding:24px;background:linear-gradient(#dff8ff,#fff0f8);border-radius:38px}
.cake{position:relative;width:min(430px,90%);height:230px;margin:65px auto 15px}
.cake-base{position:absolute;left:10%;right:10%;bottom:0;height:145px;border-radius:28px 28px 38px 38px;background:linear-gradient(#ffbdcf 0 18%,#ffe1a5 18% 55%,#ff91b6 55%);box-shadow:0 10px 0 #dd6e92}
.cake-base::before{content:"";position:absolute;left:0;right:0;top:-16px;height:38px;border-radius:50%;background:#fff4f6}
.candles{position:absolute;left:15%;right:15%;top:-42px;height:120px;display:flex;align-items:end;justify-content:center;gap:14px;z-index:2}
.cake-candle{position:relative;width:18px;height:75px;border-radius:8px;background:repeating-linear-gradient(45deg,#7d64ff 0 8px,#fff 8px 14px)}
.cake-candle i{position:absolute;width:18px;height:26px;left:0;top:-27px;background:#ffd84e;border-radius:55% 45% 60% 40%;box-shadow:0 0 15px #ffbf35}
.cake-candle.out i{background:#aaa;box-shadow:none;height:6px;top:-7px}
.cake-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.heart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:24px auto}
.heart-card{position:relative;aspect-ratio:1;border:0;background:transparent;cursor:pointer;perspective:700px}
.heart-back,.heart-face{position:absolute;inset:0;border-radius:28px;display:grid;place-items:center;backface-visibility:hidden;transition:transform .35s;box-shadow:0 9px 20px rgba(145,61,102,.15)}
.heart-back{background:linear-gradient(145deg,#ff75a6,#ff9fc1);color:#fff;font-size:4rem}
.heart-face{background:#fff3f7;font-size:4rem;transform:rotateY(180deg)}
.heart-card.flipped .heart-back,.heart-card.matched .heart-back{transform:rotateY(180deg)}
.heart-card.flipped .heart-face,.heart-card.matched .heart-face{transform:rotateY(360deg)}
.heart-card.matched .heart-face{box-shadow:0 0 0 5px #ffc6dc,0 9px 20px rgba(145,61,102,.15)}

.hide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:25px auto}
.hide-spot{position:relative;min-height:190px;border:0;border-radius:30px;background:linear-gradient(#dff8ff,#f1ffe8);cursor:pointer;overflow:hidden;box-shadow:0 9px 22px rgba(76,62,139,.12);font-size:1.1rem;color:var(--ink);font-weight:900}
.spot-emoji{font-size:5rem;display:block;margin-bottom:8px}.loodle-peek{position:absolute;inset:12px;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border-radius:23px}.loodle-peek img{height:145px;width:auto}
.hide-spot.found .loodle-peek{display:flex}.hide-spot.checked{opacity:.48}

.instrument-stage{max-width:900px;margin:22px auto;text-align:left}.instrument-section{background:#fff;border:2px solid var(--line);border-radius:28px;padding:20px;margin:18px 0;box-shadow:0 9px 22px rgba(76,62,139,.1)}
.instrument-section h3{text-align:center;color:var(--purple-dark)}
.piano{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:780px;margin:auto}.piano-key{height:190px;border:2px solid #dad7e8;border-radius:0 0 16px 16px;background:#fff;color:var(--purple-dark);font-weight:900;cursor:pointer;display:flex;align-items:end;justify-content:center;padding-bottom:15px;box-shadow:inset 0 -8px 0 #f1eff8}.piano-key.playing{background:#fff2aa;transform:translateY(5px)}
.drum-grid,.bell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.drum-pad,.bell-pad{min-height:120px;border:0;border-radius:50%;cursor:pointer;font-size:2.2rem;font-weight:900;box-shadow:0 9px 0 rgba(76,62,139,.16)}.drum-pad{background:linear-gradient(145deg,#ff8bbd,#8f63ff);color:#fff}.bell-pad{background:linear-gradient(145deg,#fff3a5,#ffd34d);color:#6d5211}.drum-pad.playing,.bell-pad.playing{transform:translateY(7px);box-shadow:0 2px 0 rgba(76,62,139,.16)}

.snake-wrap{max-width:720px;margin:20px auto}.snake-canvas{display:block;width:min(600px,100%);height:auto;margin:auto;border-radius:26px;border:8px solid #fff;box-shadow:0 12px 28px rgba(76,62,139,.2);touch-action:none}.snake-scoreline{text-align:center;font-size:1.3rem;font-weight:900;margin:12px}.snake-controls{display:grid;grid-template-columns:repeat(3,76px);grid-template-rows:repeat(2,64px);gap:8px;justify-content:center;margin:18px auto}.snake-control{border:0;border-radius:18px;background:#eee9ff;color:var(--purple-dark);font-size:1.8rem;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(91,67,212,.14)}.snake-control.up{grid-column:2}.snake-control.left{grid-column:1;grid-row:2}.snake-control.down{grid-column:2;grid-row:2}.snake-control.right{grid-column:3;grid-row:2}

@media(max-width:760px){
  .halloween-board,.harvest-board,.christmas-board{grid-template-columns:repeat(3,1fr);padding:14px}
  .countdown-grid{grid-template-columns:repeat(2,1fr)}
  .heart-grid{grid-template-columns:repeat(3,1fr)}
  .hide-grid{grid-template-columns:repeat(2,1fr)}
  .piano{overflow-x:auto;display:flex}.piano-key{min-width:72px}
  .drum-grid,.bell-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .halloween-board,.harvest-board{grid-template-columns:repeat(2,1fr)}
  .christmas-board{grid-template-columns:repeat(3,1fr)}
  .spooky-tile,.harvest-tile{min-height:95px;font-size:2.7rem}
  .heart-grid{grid-template-columns:repeat(2,1fr)}
  .hide-grid{grid-template-columns:1fr 1fr;gap:10px}.hide-spot{min-height:150px}.spot-emoji{font-size:3.7rem}.loodle-peek img{height:110px}
  .firefly-field{min-height:410px}
}

/* ===== Version 5: LumaLoodle Music Library ===== */
.music-page-hero{background:linear-gradient(120deg,#fff2fb 0%,#eefcff 45%,#fff8d9 100%)}
.music-hero-friends{display:flex;align-items:end;justify-content:center;gap:0;min-width:320px}
.music-hero-friends img{height:205px;width:auto;margin-left:-25px;filter:drop-shadow(0 10px 16px rgba(76,62,139,.14))}
.music-hero-friends img:first-child{margin-left:0}
.music-library{display:grid;gap:24px;max-width:980px;margin:0 auto}
.song-card{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:36px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.song-card:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(76,62,139,.18)}
.song-card.is-playing{border-color:#8f63ff;box-shadow:0 0 0 4px rgba(143,99,255,.10),0 20px 48px rgba(76,62,139,.18)}
.song-card::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;top:-85px;opacity:.16;background:var(--song-accent,#8f63ff)}
.song-art{position:relative;min-height:235px;border-radius:28px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f4efff,#fff7d7)}
.song-art img{height:205px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(76,62,139,.12));z-index:1}
.song-icon{position:absolute;right:15px;top:13px;font-size:2.1rem;background:rgba(255,255,255,.9);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 18px rgba(76,62,139,.12);z-index:2}
.song-copy{position:relative;z-index:1}.song-copy h2{font-size:clamp(1.8rem,3vw,2.7rem);color:var(--purple-dark);margin:.15em 0 .35em}.song-copy p{color:var(--ink-soft);font-size:1.04rem;max-width:590px}.song-kicker{display:inline-block;font-size:.84rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--purple-dark);background:#f1edff;padding:6px 10px;border-radius:999px}.song-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.song-tags span{font-size:.8rem;font-weight:900;padding:5px 9px;border-radius:999px;background:#f7f4ff;color:#5d507d}.song-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.song-actions .btn{padding:12px 18px}.song-watch{background:#f2effb;color:var(--purple-dark);box-shadow:0 6px 0 rgba(76,62,139,.09)}
.teeth-song{--song-accent:#22d3c5}.teeth-song .song-art{background:linear-gradient(145deg,#e9fffb,#fff6d4)}
.bat-song{--song-accent:#9873ff}.bat-song .song-art{background:linear-gradient(145deg,#eee8ff,#fff1f8)}
.bus-song-card{--song-accent:#ffd94d}.bus-song-card .song-art{background:linear-gradient(145deg,#fff8cf,#e7fbff)}
.mermaid-song{--song-accent:#56d9ef}.mermaid-song .song-art{background:linear-gradient(145deg,#dafbff,#eef0ff)}
.twila-song{--song-accent:#8068e8}.twila-song .song-art{background:linear-gradient(145deg,#e9e2ff,#dff4ff)}
.music-coming-soon{max-width:980px;margin:28px auto 0}.music-coming-soon img{height:110px}

.music-dock{position:fixed;left:0;right:0;bottom:0;z-index:100;background:rgba(54,42,103,.96);color:#fff;box-shadow:0 -10px 35px rgba(41,29,84,.2);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.14)}
.music-dock-inner{width:min(1240px,95%);margin:auto;display:grid;grid-template-columns:minmax(230px,.9fr) minmax(360px,1.5fr) minmax(160px,.55fr);gap:20px;align-items:center;padding:11px 0}
.now-playing{display:flex;align-items:center;gap:12px;min-width:0}.now-playing img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:18px;padding:3px;flex:0 0 auto}.now-playing>div{display:flex;flex-direction:column;min-width:0}.now-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;opacity:.72;font-weight:900}.now-playing strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing #playerSubtitle{font-size:.78rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-main{display:flex;flex-direction:column;gap:6px}.transport-controls{display:flex;align-items:center;justify-content:center;gap:10px}.transport-controls button{border:0;background:rgba(255,255,255,.12);color:#fff;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer}.transport-controls .main-play{width:48px;height:48px;background:#ffd94d;color:#4b3a76;font-size:1.25rem;box-shadow:0 5px 0 rgba(0,0,0,.16)}.transport-controls button:hover{transform:translateY(-1px)}
.timeline{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;font-size:.74rem;opacity:.95}.timeline input,.volume-box input{accent-color:#ffd94d;cursor:pointer;width:100%}.volume-box{display:flex;align-items:center;gap:8px}.volume-box span{font-size:1.1rem}.has-music-player .footer{padding-bottom:125px}

@media(max-width:900px){
  .music-hero-friends{min-width:0}.music-hero-friends img{height:165px}
  .song-card{grid-template-columns:190px 1fr}.song-art{min-height:190px}.song-art img{height:165px}
  .music-dock-inner{grid-template-columns:1fr 1.4fr}.volume-box{display:none}
}
@media(max-width:680px){
  .song-card{grid-template-columns:1fr;padding:16px;gap:15px}.song-art{min-height:190px}.song-art img{height:180px}.song-copy{text-align:center}.song-tags,.song-actions{justify-content:center}.song-kicker{margin:auto}
  .music-dock-inner{grid-template-columns:1fr;gap:6px;padding:8px 0}.now-playing{justify-content:center}.now-playing img{width:50px;height:50px}.now-playing>div{max-width:250px}.player-main{width:100%}.transport-controls button{width:36px;height:36px}.transport-controls .main-play{width:42px;height:42px}.timeline{grid-template-columns:36px 1fr 36px}.has-music-player .footer{padding-bottom:185px}
}

/* ===== Bloop's Music Room v6 ===== */
.music-room-shell{overflow:visible}
.music-control-panel{max-width:980px;margin:24px auto;background:linear-gradient(135deg,#f8f3ff,#edfaff);border:2px solid var(--line);border-radius:30px;padding:22px;box-shadow:0 12px 28px rgba(76,62,139,.12)}
.instrument-picker-wrap h2,.instrument-section h2{text-align:center;color:var(--purple-dark);margin:.2rem 0 .55rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.instrument-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.instrument-choice{border:2px solid rgba(91,67,212,.12);background:#fff;border-radius:22px;padding:14px 10px;min-height:132px;cursor:pointer;color:var(--ink);box-shadow:0 7px 14px rgba(76,62,139,.08);transition:.16s transform,.16s border-color,.16s background}
.instrument-choice:hover{transform:translateY(-2px)}
.instrument-choice.active{border-color:var(--purple);background:#f0ebff;box-shadow:0 0 0 3px rgba(143,99,255,.12),0 8px 18px rgba(76,62,139,.13)}
.instrument-choice span{display:block;font-size:2.15rem;margin-bottom:4px}.instrument-choice strong{display:block;font-size:1rem}.instrument-choice small{display:block;margin-top:4px;color:var(--ink-soft);font-weight:700;font-size:.76rem;line-height:1.2}
.music-options{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid rgba(91,67,212,.12)}
.music-option{border:0;border-radius:999px;padding:11px 16px;background:#fff;color:var(--purple-dark);font-weight:900;cursor:pointer;box-shadow:0 5px 14px rgba(76,62,139,.10)}.music-option.active{background:#fff6bf}
.music-volume{display:flex;align-items:center;gap:9px;background:#fff;padding:9px 14px;border-radius:999px;font-weight:900}.music-volume input{accent-color:var(--purple-dark);width:130px}
.sample-status{font-size:.9rem;font-weight:900;color:var(--ink-soft);background:rgba(255,255,255,.75);padding:9px 13px;border-radius:999px}
.keyboard-section{overflow-x:auto;padding-bottom:24px}.section-heading-row{text-align:center}.section-heading-row p,.instrument-help{text-align:center;color:var(--ink-soft);margin-top:5px}
.pro-piano{position:relative;display:grid;grid-template-columns:repeat(8,1fr);height:230px;max-width:900px;min-width:690px;margin:24px auto 4px;padding:0 3px;user-select:none;touch-action:manipulation}
.pro-key{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.08s transform,.08s background,.08s box-shadow;touch-action:manipulation}
.pro-key.white-key{grid-row:1;height:220px;background:linear-gradient(#fff,#fbfbff);border:2px solid #d9d5e6;border-right-width:1px;border-radius:0 0 16px 16px;color:var(--purple-dark);font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;box-shadow:inset 0 -12px 0 #f0eef8,0 6px 10px rgba(50,40,90,.07)}
.pro-key.white-key[data-note="C4"]{grid-column:1}.pro-key.white-key[data-note="D4"]{grid-column:2}.pro-key.white-key[data-note="E4"]{grid-column:3}.pro-key.white-key[data-note="F4"]{grid-column:4}.pro-key.white-key[data-note="G4"]{grid-column:5}.pro-key.white-key[data-note="A4"]{grid-column:6}.pro-key.white-key[data-note="B4"]{grid-column:7}.pro-key.white-key[data-note="C5"]{grid-column:8}
.pro-key.black-key{position:absolute;z-index:3;top:0;width:7.6%;height:137px;border:0;border-radius:0 0 11px 11px;background:linear-gradient(#3b3561,#17142e);color:#fff;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;box-shadow:0 8px 8px rgba(17,14,38,.26),inset 0 -8px 0 rgba(255,255,255,.05)}
.pro-key.black-1{left:8.7%}.pro-key.black-2{left:21.2%}.pro-key.black-4{left:46.2%}.pro-key.black-5{left:58.7%}.pro-key.black-6{left:71.2%}
.pro-key small{opacity:.66;font-size:.72rem;margin-top:5px}.note-name{font-size:1.15rem}
.pro-key.playing.white-key{transform:translateY(5px);background:#fff3a9;box-shadow:inset 0 -5px 0 #e5d269}.pro-key.playing.black-key{transform:translateY(5px);background:linear-gradient(#6957a8,#2b2350)}
.pro-key.melody-target{animation:keyGlow .75s ease-in-out infinite alternate;outline:4px solid #ffd84e;outline-offset:-4px}
@keyframes keyGlow{from{filter:brightness(1);box-shadow:0 0 5px rgba(255,216,78,.35)}to{filter:brightness(1.12);box-shadow:0 0 30px rgba(255,216,78,.95)}}
.pro-drum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:900px;margin:20px auto}.pro-drum-pad{min-height:150px;border:0;border-radius:28px;cursor:pointer;color:#fff;box-shadow:0 10px 0 rgba(70,54,128,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.08s transform,.08s box-shadow;font-weight:900}.pro-drum-pad span{font-size:2.35rem}.pro-drum-pad strong{font-size:1.05rem;margin-top:4px}.pro-drum-pad small{margin-top:4px;opacity:.78}.pro-drum-pad.kick{background:linear-gradient(145deg,#6552c9,#3d3279)}.pro-drum-pad.snare{background:linear-gradient(145deg,#ff6eb6,#c94f98)}.pro-drum-pad.hat{background:linear-gradient(145deg,#22d3c5,#168e88)}.pro-drum-pad.tom{background:linear-gradient(145deg,#ff9f1c,#dc6f1d)}.pro-drum-pad.cymbal{background:linear-gradient(145deg,#ffd84e,#e2a922);color:#5b4610}.pro-drum-pad.playing{transform:translateY(7px);box-shadow:0 3px 0 rgba(70,54,128,.16)}
.melody-section{background:linear-gradient(135deg,#fff8d5,#f4eeff)}.melody-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:860px;margin:auto}.melody-intro h2{text-align:left}.melody-intro p{margin:.3rem 0;color:var(--ink-soft)}.melody-progress{text-align:center;margin:20px auto 4px;background:#fff;border-radius:18px;padding:13px 16px;max-width:620px;font-weight:900;color:var(--purple-dark);box-shadow:0 6px 14px rgba(76,62,139,.09)}
.instrument-credit{text-align:center;max-width:760px;margin:20px auto 0;font-size:.78rem;color:var(--ink-soft)}
body[data-music-instrument="strings"] .keyboard-section{background:linear-gradient(180deg,#fff,#fff3fa)}body[data-music-instrument="xylophone"] .keyboard-section{background:linear-gradient(180deg,#fff,#f0fffc)}body[data-music-instrument="bells"] .keyboard-section{background:linear-gradient(180deg,#fff,#fffbea)}body[data-music-instrument="synth"] .keyboard-section{background:linear-gradient(180deg,#fff,#f2efff)}
@media(max-width:900px){.instrument-picker{grid-template-columns:repeat(3,1fr)}.pro-drum-grid{grid-template-columns:repeat(3,1fr)}.melody-intro{align-items:flex-start;flex-direction:column}.keyboard-section{padding-left:8px;padding-right:8px}}
@media(max-width:620px){.instrument-picker{grid-template-columns:repeat(2,1fr)}.instrument-choice{min-height:118px}.pro-drum-grid{grid-template-columns:repeat(2,1fr)}.pro-drum-pad{min-height:125px}.music-options{align-items:stretch}.music-volume{justify-content:center;width:100%}.sample-status{text-align:center;width:100%}}

/* ===== Music Room lessons + Connect v7 ===== */
.melody-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.melody-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:930px;margin:22px auto}
.melody-level{border:2px solid rgba(91,67,212,.12);background:#fff;border-radius:22px;padding:14px;cursor:pointer;text-align:left;color:var(--ink);box-shadow:0 7px 15px rgba(76,62,139,.08);transition:.16s transform,.16s border-color,.16s opacity}
.melody-level:hover:not(.locked){transform:translateY(-2px)}
.melody-level.active{border-color:var(--purple);background:#f1ecff;box-shadow:0 0 0 3px rgba(143,99,255,.10),0 8px 18px rgba(76,62,139,.11)}
.melody-level.locked{opacity:.48;cursor:not-allowed;filter:grayscale(.25)}
.melody-level>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffd94d;color:#4b3a76;font-weight:900;margin-bottom:8px}
.melody-level strong,.melody-level small{display:block}.melody-level small{margin-top:4px;color:var(--ink-soft);font-weight:800;font-size:.78rem}
.full-song-level{grid-column:1/-1;text-align:center;background:linear-gradient(135deg,#fff8c8,#efe8ff)}
.full-song-level>span{margin-left:auto;margin-right:auto;background:var(--purple);color:#fff}
.lesson-card{max-width:760px;margin:16px auto;background:#fff;border:2px solid rgba(91,67,212,.10);border-radius:26px;padding:20px;text-align:center;box-shadow:0 8px 18px rgba(76,62,139,.08)}
.lesson-card h3{color:var(--purple-dark);font-size:1.5rem}.lesson-card p{margin:.35rem 0;color:var(--ink-soft)}
.lesson-badge{display:inline-block;border-radius:999px;padding:7px 12px;background:#f0ebff;color:var(--purple-dark);font-weight:900;font-size:.85rem}
.melody-note-strip{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:16px;max-height:160px;overflow:auto;padding:4px}
.lesson-note{display:grid;place-items:center;min-width:40px;height:40px;border-radius:12px;background:#f5f2ff;border:2px solid transparent;color:var(--purple-dark);font-weight:900;transition:.15s transform,.15s background}
.lesson-note.current{background:#fff2a7;border-color:#f2c94c;transform:scale(1.08)}
.lesson-note.done{background:#ddfff7;color:#177b72}
.local-progress-note{text-align:center;max-width:700px;margin:12px auto 0;color:var(--ink-soft);font-size:.82rem}

.connect-hero{background:linear-gradient(135deg,#eefaff,#fff0f7 52%,#fff8d3)}
.connect-hero-grid{display:grid;grid-template-columns:1fr .72fr;gap:30px;align-items:center}
.connect-friends{display:flex;align-items:flex-end;justify-content:center;gap:0}.connect-friends img{height:200px;width:auto;margin:0 -10px;filter:drop-shadow(0 12px 16px rgba(76,62,139,.14))}
.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:auto}
.social-card{position:relative;overflow:hidden;background:#fff;border:2px solid var(--line);border-radius:32px;padding:28px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;min-height:300px}
.social-icon{display:grid;place-items:center;width:82px;height:82px;border-radius:24px;font-size:2.6rem;margin-bottom:12px;background:#f4f0ff}
.social-card h2{color:var(--purple-dark);font-size:1.8rem}.social-card p{color:var(--ink-soft);flex:1}.social-card .btn{margin-top:12px}
.social-card.youtube{border-top:9px solid #ff5252}.social-card.facebook{border-top:9px solid #5b7fe8}.social-card.tiktok{border-top:9px solid #22d3c5}
.external-note{max-width:840px;margin:28px auto 0;text-align:center;background:#fff8cf;border-radius:20px;padding:17px 20px;color:#594b78;font-weight:700}
.connect-strip{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(120deg,#fff3c6,#efe8ff,#e7fbff);border-radius:36px;padding:28px 34px;box-shadow:var(--shadow)}
.connect-strip-copy h2{color:var(--purple-dark);margin-top:0}.connect-strip-copy p{margin-bottom:0;color:var(--ink-soft)}
.connect-mini-links{display:flex;gap:10px;flex-wrap:wrap}.connect-mini-links a{background:#fff;border-radius:999px;padding:11px 15px;font-weight:900;box-shadow:0 5px 12px rgba(76,62,139,.08)}
@media(max-width:900px){.melody-levels{grid-template-columns:repeat(2,1fr)}.connect-hero-grid{grid-template-columns:1fr}.connect-grid{grid-template-columns:1fr}.connect-strip{flex-direction:column;align-items:flex-start}.connect-friends img{height:160px}}
@media(max-width:620px){.melody-levels{grid-template-columns:1fr}.melody-actions{justify-content:stretch}.melody-actions .btn{width:100%}.connect-friends img{height:125px}.connect-mini-links{width:100%}.connect-mini-links a{flex:1;text-align:center}}

/* ===== Bloop's Music Room 2.0 ===== */
.music-room-hero{padding:70px 0;background:radial-gradient(circle at 15% 15%,#fff1a8 0,transparent 22%),radial-gradient(circle at 84% 28%,#ffc8e7 0,transparent 22%),linear-gradient(135deg,#eefaff,#f4edff 58%,#fff8dc);overflow:hidden}.music-room-hero-grid{display:grid;grid-template-columns:1.1fr .55fr;gap:30px;align-items:center}.music-room-hero h1{font-size:clamp(3rem,6vw,5.7rem);color:var(--purple-dark);max-width:850px}.music-room-hero p{font-size:1.2rem;max-width:720px;color:var(--ink-soft)}.music-room-hero img{max-height:420px;margin:auto;filter:drop-shadow(0 18px 30px rgba(76,62,139,.2))}
.studio-transport{position:sticky;top:var(--studio-sticky-top,118px);z-index:25;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 20px;margin-bottom:14px;border:3px solid rgba(91,67,212,.11);background:rgba(255,255,255,.95);backdrop-filter:blur(14px)}.transport-left{display:flex;gap:8px;flex-wrap:wrap}.transport-left button{border:0;border-radius:16px;padding:12px 16px;font-weight:900;cursor:pointer}.transport-play{background:var(--teal);color:#163e3a}.transport-play.active{box-shadow:0 0 0 4px rgba(34,211,197,.22)}.transport-stop{background:#eee9ff;color:var(--purple-dark)}.transport-clear{background:#fff0f4;color:#9b315d}.transport-center{display:flex;align-items:center;gap:22px;justify-content:flex-end;flex-wrap:wrap}.transport-center label{display:flex;align-items:center;gap:10px;font-weight:900}.transport-center label>span{display:flex;align-items:center;gap:8px}.transport-center select,.transport-center input[type=text],.builder-card select,.builder-card input{border:2px solid rgba(91,67,212,.15);border-radius:13px;padding:9px 10px;background:#fff;color:var(--ink);font:inherit}.transport-right{grid-column:1/-1}.mini-meter{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;text-align:center;font-weight:900;font-size:.73rem;color:var(--ink-soft)}.mini-meter span:nth-child(4n+1){color:var(--purple-dark)}.studio-status{max-width:760px;margin:10px auto 28px;text-align:center;padding:12px 16px;border-radius:999px;background:#f0ebff;color:var(--purple-dark);font-weight:900}
.studio-lab{margin:28px 0 38px;padding:30px;border-radius:34px;box-shadow:var(--shadow);border:2px solid var(--line);background:#fff}.beat-lab{background:linear-gradient(145deg,#fff,#f2fbff)}.bass-lab{background:linear-gradient(145deg,#fff,#f0fff9)}.melody-lab{background:linear-gradient(145deg,#fff,#fff4fb)}.builder-lab{background:linear-gradient(145deg,#fff9d9,#f4edff)}.lab-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.lab-heading h2{font-size:clamp(2rem,4vw,3rem);color:var(--purple-dark)}.lab-heading p{max-width:720px;color:var(--ink-soft)}.lab-kicker{display:inline-block;font-weight:900;letter-spacing:.08em;color:var(--purple-dark);font-size:.82rem}.lab-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.small-studio-btn{border:2px solid rgba(91,67,212,.14);background:#fff;border-radius:999px;padding:10px 13px;font-weight:900;color:var(--purple-dark);cursor:pointer}.small-studio-btn.active,.small-studio-btn:hover{background:#efe9ff;border-color:#b29bff}
.drum-pad-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:15px 0 22px}.studio-drum-pad{min-height:105px;border:0;border-radius:22px;background:linear-gradient(145deg,#6552c9,#443680);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 7px 0 rgba(58,45,107,.14);display:flex;flex-direction:column;align-items:center;justify-content:center}.studio-drum-pad span{font-size:2rem}.studio-drum-pad:nth-child(2){background:linear-gradient(145deg,#ff6eb6,#c94f98)}.studio-drum-pad:nth-child(3){background:linear-gradient(145deg,#22d3c5,#168e88)}.studio-drum-pad:nth-child(4){background:linear-gradient(145deg,#56b7ff,#387ac7)}.studio-drum-pad:nth-child(5){background:linear-gradient(145deg,#ff9f1c,#dc6f1d)}.studio-drum-pad:nth-child(6){background:linear-gradient(145deg,#b97cff,#7d50cf)}.studio-drum-pad:nth-child(7){background:linear-gradient(145deg,#ffd84e,#dca81e);color:#594510}.studio-drum-pad.playing{transform:translateY(5px);box-shadow:0 2px 0 rgba(58,45,107,.14)}
.seq-scroll{overflow-x:auto;padding-bottom:8px}.step-grid,.note-step-grid{display:grid;grid-template-columns:110px repeat(16,minmax(32px,1fr));min-width:800px;gap:4px;align-items:center}.seq-corner,.seq-head,.seq-row-label{font-weight:900}.seq-corner,.seq-head{text-align:center;color:var(--ink-soft);font-size:.78rem}.seq-row-label{display:flex;align-items:center;gap:6px;padding-right:6px;font-size:.86rem}.seq-cell{aspect-ratio:1;border:2px solid rgba(91,67,212,.12);border-radius:8px;background:#f4f0ff;cursor:pointer;min-height:30px;transition:.1s transform,.1s background,.1s box-shadow}.seq-cell:hover{transform:scale(1.06)}.seq-cell.beat-start,.seq-head.beat-start{border-left:4px solid rgba(91,67,212,.35)}.seq-cell.on{background:linear-gradient(145deg,#22d3c5,#69e6dc);border-color:#15afa4;box-shadow:0 0 0 2px rgba(34,211,197,.12)}.drum-sequencer .seq-cell.on{background:linear-gradient(145deg,#ffcd4e,#ff8f4f);border-color:#f49a30}.seq-cell.playhead,.seq-head.playhead{box-shadow:0 0 0 3px #8f63ff inset,0 0 12px rgba(143,99,255,.3)}.note-cell.on{background:linear-gradient(145deg,#8f63ff,#ff6eb6);border-color:#7252db}.note-label{justify-content:flex-end;color:var(--purple-dark)}
.layer-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:16px;flex-wrap:wrap}.layer-controls label{font-weight:800;display:flex;gap:8px;align-items:center}.mute-btn{border:0;border-radius:999px;padding:10px 15px;background:#eee;color:#666;font-weight:900;cursor:pointer}.mute-btn.active{background:#dffbf7;color:#147c74}.scale-message{display:inline-block;margin:0 0 15px;padding:9px 13px;border-radius:999px;background:#eafff8;color:#26716b;font-weight:900}.compact-picker{grid-template-columns:repeat(5,1fr);max-width:820px;margin:12px auto 22px}.compact-picker .instrument-choice{min-height:104px}.compact-picker .instrument-choice span{font-size:1.8rem}
.full-keyboard-card{margin-top:30px;padding:22px;border-radius:26px;background:#f8f5ff;border:2px solid rgba(91,67,212,.10)}.full-keyboard-card h3{color:var(--purple-dark);font-size:1.55rem}.wide-piano-wrap{overflow-x:auto}.studio-piano{display:flex;gap:3px;min-width:980px;height:130px;align-items:flex-start;margin-top:16px}.free-key{border:0;cursor:pointer;font-weight:900;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;box-shadow:0 5px 0 rgba(52,43,95,.13)}.free-white{height:120px;flex:1;background:#fff;border:1px solid #d8d2e6;border-radius:0 0 10px 10px;color:var(--ink)}.free-black{height:78px;flex:.72;background:#33294f;color:#fff;border-radius:0 0 8px 8px;margin-left:-7px;margin-right:-7px;z-index:2}.free-key.playing{transform:translateY(4px);box-shadow:0 1px 0 rgba(52,43,95,.13)}
.song-builder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.builder-card{background:rgba(255,255,255,.82);border-radius:24px;padding:20px;border:2px solid rgba(91,67,212,.10)}.builder-card h3{color:var(--purple-dark);font-size:1.5rem}.builder-card label{display:block;margin:10px 0;font-weight:800}.builder-card select,.builder-card input[type=text]{width:100%;margin-top:6px}.tiny-note{font-size:.86rem;color:var(--ink-soft)}.export-btn{width:100%;border:0;border-radius:18px;padding:14px;font-weight:900;cursor:pointer;margin:6px 0}.kid-export{background:linear-gradient(135deg,#ffd84e,#ff9f1c);color:#543b12}.adult-export{background:#5b43d4;color:#fff}.export-status{min-height:28px;font-weight:900;color:var(--purple-dark);margin-top:9px}
.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.challenge-card{position:relative;background:#fff;border-radius:28px;padding:24px;box-shadow:var(--shadow);border:2px solid var(--line)}.challenge-star{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffd84e;color:#4f3b65;font-weight:900;font-size:1.2rem}.challenge-card h3{color:var(--purple-dark);font-size:1.45rem}.challenge-card button{border:0;border-radius:999px;padding:10px 13px;background:#8f63ff;color:#fff;font-weight:900;cursor:pointer}.challenge-result{min-height:28px;margin-top:10px;font-weight:900;color:#8b5a23}.challenge-result.success{color:#168a72}.lesson-zone{display:grid;grid-template-columns:1fr .5fr;align-items:center;gap:26px;padding:38px;border-radius:38px;background:linear-gradient(135deg,#efe9ff,#fff4d9);box-shadow:var(--shadow)}.lesson-zone h2{font-size:clamp(2.2rem,5vw,3.8rem);color:var(--purple-dark)}.lesson-zone img{max-height:270px;margin:auto}
@media(max-width:1050px){.music-room-hero-grid{grid-template-columns:1fr .42fr}.drum-pad-strip{grid-template-columns:repeat(4,1fr)}.song-builder-grid{grid-template-columns:1fr 1fr}.challenge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.music-room-hero-grid{grid-template-columns:1fr}.music-room-hero img{max-height:290px}.studio-transport{position:static;grid-template-columns:1fr}.transport-center{justify-content:flex-start}.lab-heading{flex-direction:column}.lab-actions{justify-content:flex-start}.compact-picker{grid-template-columns:repeat(3,1fr)}.song-builder-grid{grid-template-columns:1fr}.lesson-zone{grid-template-columns:1fr}.lesson-zone img{max-height:210px}}
@media(max-width:580px){.studio-lab{padding:19px 13px}.drum-pad-strip{grid-template-columns:repeat(2,1fr)}.studio-drum-pad{min-height:90px}.compact-picker{grid-template-columns:repeat(2,1fr)}.challenge-grid{grid-template-columns:1fr}.transport-left button{flex:1}.transport-center label{width:100%;justify-content:space-between}.layer-controls{justify-content:flex-start}.music-room-hero{padding:48px 0}.music-room-hero h1{font-size:clamp(2.7rem,13vw,4.2rem)}}
.music-room-promo{display:grid;grid-template-columns:1fr .38fr;gap:24px;align-items:center;background:linear-gradient(135deg,#3f3277,#8f63ff);color:#fff;border-radius:36px;padding:32px;margin:20px 0 42px;box-shadow:var(--shadow)}.music-room-promo h2{font-size:clamp(2.2rem,5vw,3.8rem)}.music-room-promo p{max-width:670px}.music-room-promo img{max-height:250px;margin:auto}@media(max-width:700px){.music-room-promo{grid-template-columns:1fr}.music-room-promo img{max-height:190px}}

/* ===== Bloop's Music Room 2.1: lane mutes + resizable notes ===== */
.step-grid,.note-step-grid{grid-template-columns:150px repeat(16,minmax(34px,1fr));min-width:880px}
.seq-layer-corner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:6px;text-align:left}
.drum-row-label{justify-content:flex-start}.drum-row-label .row-name{flex:1;min-width:0}.row-mute-btn{flex:0 0 auto;width:34px;height:30px;border:0;border-radius:10px;background:#e2fbf7;color:#15766e;cursor:pointer;font-size:.93rem;display:grid;place-items:center;box-shadow:0 2px 0 rgba(76,62,139,.08)}.row-mute-btn:hover{transform:translateY(-1px)}.row-mute-btn.muted{background:#f0edf4;color:#776f84;filter:grayscale(.45)}.layer-row-mute{margin-left:auto}
.note-cell{position:relative;overflow:visible}.note-cell.note-start{background:linear-gradient(145deg,#8f63ff,#ff6eb6);border-color:#7252db}.note-cell.note-tail{background:linear-gradient(145deg,#a487ff,#ff8dc7);border-color:#8c6ce2}.bass-lab .note-cell.note-start{background:linear-gradient(145deg,#22d3c5,#46b8ee);border-color:#159f98}.bass-lab .note-cell.note-tail{background:linear-gradient(145deg,#65ddd5,#78c9ef);border-color:#37afa7}.note-cell.note-start:not(.note-end){border-radius:8px 3px 3px 8px}.note-cell.note-tail:not(.note-end){border-radius:3px}.note-cell.note-end:not(.note-start){border-radius:3px 8px 8px 3px}.note-resize-handle{position:absolute;right:-5px;top:50%;transform:translateY(-50%);z-index:5;width:18px;height:24px;border-radius:8px;background:#fff;color:#5b43d4;border:2px solid rgba(91,67,212,.38);display:grid;place-items:center;font-size:.67rem;font-weight:900;line-height:1;cursor:ew-resize;box-shadow:0 3px 7px rgba(76,62,139,.16);touch-action:none}.bass-lab .note-resize-handle{color:#15847c;border-color:rgba(21,132,124,.38)}.seq-cell.resize-preview{box-shadow:0 0 0 4px rgba(255,216,78,.65) inset,0 0 12px rgba(255,159,28,.4)}
.intro-choice-row{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:4px 0}.intro-choice-row label{margin:0}.audio-preview-btn{border:2px solid rgba(91,67,212,.14);background:#fff;border-radius:999px;padding:8px 11px;font-weight:900;color:var(--purple-dark);cursor:pointer}.audio-preview-btn:hover,.audio-preview-btn.playing{background:#efe9ff;border-color:#b29bff}.outro-preview{width:100%;margin:5px 0 10px}
@media(max-width:580px){.step-grid,.note-step-grid{grid-template-columns:135px repeat(16,minmax(32px,1fr));min-width:820px}.row-mute-btn{width:31px;height:29px}.note-resize-handle{width:20px;height:26px}.intro-choice-row{grid-template-columns:1fr}.intro-choice-row .audio-preview-btn{justify-self:start}}

/* Music Room 2.2 transport/audio polish */
.studio-transport{scroll-margin-top:calc(var(--studio-sticky-top,118px) + 12px);box-shadow:0 14px 36px rgba(76,62,139,.16)}
@media(max-width:800px){.studio-transport{top:auto}}


/* Parent accounts + grown-up gates */
.parent-gate-backdrop{position:fixed;inset:0;background:rgba(37,25,77,.68);display:grid;place-items:center;padding:20px;z-index:9999}.parent-gate-backdrop[hidden]{display:none}.parent-gate-card{width:min(480px,94vw);background:#fff;border-radius:30px;padding:28px;box-shadow:0 30px 80px rgba(30,20,70,.35);text-align:center;position:relative}.parent-gate-close{position:absolute;right:16px;top:12px;border:0;background:#f0ebff;width:38px;height:38px;border-radius:50%;font-size:1.5rem;cursor:pointer}.parent-gate-icon{font-size:3rem}.gate-question{font-size:1.65rem;font-weight:900;color:var(--purple-dark)}.parent-gate-card form{display:flex;gap:10px;justify-content:center}.parent-gate-card input{font-size:1.25rem;width:125px;padding:12px;border:2px solid #ded6ff;border-radius:14px;text-align:center}.gate-error{min-height:25px;color:#a62d52;font-weight:800}
.account-shell{max-width:1050px}.account-form{display:grid;gap:14px}.account-form label,.account-shell>div label,.account-shell article>label{display:grid;gap:6px;font-weight:800}.account-form input:not([type=checkbox]),.account-shell input:not([type=checkbox]){padding:12px 14px;border:2px solid #e5ddff;border-radius:14px;font:inherit}.check-row{display:flex!important;align-items:flex-start;gap:9px;font-weight:600!important}.check-row input{margin-top:5px}.account-status{min-height:28px;margin:0 0 18px;font-weight:800}.account-status.error{color:#a62d52}.account-status.success{color:#117a67}.text-button{border:0;background:none;color:var(--purple-dark);font-weight:900;text-decoration:underline;cursor:pointer;margin-top:14px}.account-welcome{margin-bottom:22px}.account-stats,.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.account-stats div,.admin-stats .card{text-align:center}.account-stats strong,.admin-stats strong{display:block;font-size:2rem;color:var(--purple-dark)}.account-stats span,.admin-stats span{font-size:.9rem}.danger-btn{border:0;border-radius:999px;padding:13px 18px;background:#a52f4e;color:white;font-weight:900;cursor:pointer}.admin-table-wrap{overflow:auto;margin-top:22px}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;padding:10px;border-bottom:1px solid #eee}.cloud-save-card .export-btn{margin:6px 4px 6px 0}
@media(max-width:800px){.account-stats,.admin-stats{grid-template-columns:repeat(2,1fr)}.parent-gate-card form{flex-direction:column}.parent-gate-card input{width:100%}}


/* Parent account navigation */
.menu .account-link{
  background:#fff4c7;
  color:var(--purple-dark);
  border:2px solid rgba(91,67,212,.12);
  white-space:nowrap;
}
.menu .account-link:hover,
.menu .account-link.active{
  background:var(--yellow);
  color:#45356f;
}
@media(max-width:900px){
  .menu .account-link{
    text-align:center;
  }
}


/* v9.2: permanent parent account doorway in header */
.nav{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.menu{
  justify-content:center;
  min-width:0;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.header-account-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-weight:900;
  padding:10px 14px;
  border-radius:999px;
  background:#fff4c7;
  color:var(--purple-dark);
  border:2px solid rgba(91,67,212,.14);
  box-shadow:0 4px 12px rgba(66,50,130,.08);
}
.header-account-link:hover,
.header-account-link:focus{
  background:var(--yellow);
  transform:translateY(-1px);
}
@media(max-width:1180px) and (min-width:901px){
  .brand img{width:155px}
  .menu{gap:2px}
  .menu a{padding:8px 8px;font-size:.88rem}
  .header-account-link{padding:9px 10px;font-size:.86rem}
  .sound-toggle{padding:9px 9px;font-size:.80rem}
}
@media(max-width:900px){
  .nav{
    display:flex;
    justify-content:space-between;
  }
  .header-account-link{
    padding:9px 11px;
    font-size:.86rem;
  }
}
@media(max-width:560px){
  .brand img{width:135px}
  .header-account-link{
    padding:8px 9px;
    font-size:.78rem;
  }
  .sound-toggle{
    padding:8px 9px;
    font-size:.76rem;
  }
}


/* v9.3 homepage kid-first navigation */
.kid-first-section{
  padding-top:50px;
  padding-bottom:58px;
}
.kid-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.kid-action-card{
  min-height:230px;
  border-radius:30px;
  padding:25px 18px 20px;
  text-decoration:none;
  color:var(--ink);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:4px solid rgba(255,255,255,.95);
  box-shadow:0 12px 26px rgba(75,61,136,.13);
  transition:transform .16s ease, box-shadow .16s ease;
}
.kid-action-card:hover,
.kid-action-card:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 17px 34px rgba(75,61,136,.18);
}
.kid-action-card:active{transform:scale(.98)}
.kid-action-icon{
  font-size:3.2rem;
  line-height:1;
}
.kid-action-card strong{
  font-size:1.35rem;
  color:var(--purple-dark);
}
.kid-action-card span:not(.kid-action-icon){
  color:var(--ink-soft);
  font-weight:700;
}
.kid-action-card b{
  display:inline-block;
  margin-top:7px;
  padding:8px 13px;
  border-radius:999px;
  background:#fff;
  color:var(--purple-dark);
  font-size:.9rem;
}
.watch-action{background:linear-gradient(145deg,#fff4c6,#fff9e8)}
.play-action{background:linear-gradient(145deg,#dffbf5,#effffb)}
.music-action{background:linear-gradient(145deg,#ffe7f3,#fff3fa)}
.studio-action{background:linear-gradient(145deg,#eee7ff,#f7f3ff)}

/* Interactive homepage friends */
.interactive-friends-section{
  overflow:hidden;
}
.interactive-friend-band{
  margin-top:28px;
}
button.friend-bubble.interactive-friend{
  font:inherit;
  color:inherit;
  cursor:pointer;
  position:relative;
  border:2px solid rgba(102,80,190,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width:0;
}
button.friend-bubble.interactive-friend:hover,
button.friend-bubble.interactive-friend:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(102,80,190,.28);
  box-shadow:0 14px 30px rgba(75,61,136,.17);
  outline:none;
}
button.friend-bubble.interactive-friend:active{
  transform:scale(.97);
}
.interactive-friend em{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-weight:900;
  font-size:.78rem;
  color:var(--purple-dark);
  background:#fff6cc;
  border-radius:999px;
  padding:5px 8px;
}
.friend-sparkles{
  position:absolute;
  top:8px;
  right:10px;
  font-size:1.25rem;
  opacity:0;
  transform:scale(.3) rotate(-20deg);
  pointer-events:none;
}
.interactive-friend.is-speaking{
  animation:friendHelloBounce .55s ease-in-out 0s 2 alternate;
  border-color:rgba(105,75,255,.38);
  box-shadow:0 15px 35px rgba(87,64,178,.22);
}
.interactive-friend.is-speaking .friend-sparkles{
  animation:friendSparklePop .8s ease-in-out infinite alternate;
}
.luma-friend.is-speaking img{filter:drop-shadow(0 0 13px rgba(255,204,45,.8))}
.loodle-friend.is-speaking img{animation:friendWobble .35s ease-in-out 0s 3 alternate}
.pip-friend.is-speaking img{animation:friendHop .32s ease-in-out 0s 3 alternate}
.bloop-friend.is-speaking img{animation:friendGroove .38s ease-in-out 0s 3 alternate}
.twila-friend.is-speaking img{animation:friendFloat .48s ease-in-out 0s 3 alternate}
.elvie-friend.is-speaking img{animation:friendHop .38s ease-in-out 0s 2 alternate}
.friend-greeting-display{
  width:min(580px,92%);
  min-height:62px;
  margin:24px auto 18px;
  padding:13px 20px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 24px rgba(75,61,136,.11);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  color:var(--purple-dark);
  border:2px solid #eee8ff;
}
.friend-greeting-display.showing-greeting{
  animation:greetingPop .22s ease-out;
}
@keyframes friendHelloBounce{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-8px) scale(1.025)}
}
@keyframes friendSparklePop{
  from{opacity:.25;transform:scale(.65) rotate(-12deg)}
  to{opacity:1;transform:scale(1.25) rotate(10deg)}
}
@keyframes friendWobble{
  from{transform:rotate(-3deg)}
  to{transform:rotate(3deg)}
}
@keyframes friendHop{
  from{transform:translateY(0)}
  to{transform:translateY(-10px)}
}
@keyframes friendGroove{
  from{transform:rotate(-2deg) translateY(0)}
  to{transform:rotate(2deg) translateY(-5px)}
}
@keyframes friendFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-7px)}
}
@keyframes greetingPop{
  from{transform:scale(.97);opacity:.6}
  to{transform:scale(1);opacity:1}
}
@media(max-width:1050px){
  .kid-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .kid-action-grid{grid-template-columns:1fr;gap:14px}
  .kid-action-card{min-height:155px;padding:18px}
  .kid-action-icon{font-size:2.6rem}
  .kid-action-card strong{font-size:1.2rem}
}
@media (prefers-reduced-motion: reduce){
  .interactive-friend.is-speaking,
  .interactive-friend.is-speaking img,
  .interactive-friend.is-speaking .friend-sparkles{
    animation:none !important;
  }
}


/* v9.4: talking character cards on the full Characters page */
.character-greeting-grid .talking-character-card{
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:2px solid rgba(102,80,190,.10);
}
.character-greeting-grid .talking-character-card:hover,
.character-greeting-grid .talking-character-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(102,80,190,.30);
  box-shadow:0 15px 34px rgba(75,61,136,.17);
  outline:none;
}
.character-greeting-grid .talking-character-card:active{
  transform:scale(.985);
}
.character-greeting-grid .talking-character-card.is-speaking{
  animation:friendHelloBounce .55s ease-in-out 0s 2 alternate;
  border-color:rgba(105,75,255,.38);
  box-shadow:0 16px 36px rgba(87,64,178,.22);
}
.character-card-sparkle{
  position:absolute;
  right:14px;
  top:12px;
  font-size:1.4rem;
  opacity:0;
  pointer-events:none;
  transform:scale(.4) rotate(-15deg);
}
.talking-character-card.is-speaking .character-card-sparkle{
  animation:friendSparklePop .8s ease-in-out infinite alternate;
}
.talking-character-card.loodle.is-speaking img{animation:friendWobble .35s ease-in-out 0s 3 alternate}
.talking-character-card.pip.is-speaking img{animation:friendHop .32s ease-in-out 0s 3 alternate}
.talking-character-card.bloop.is-speaking img{animation:friendGroove .38s ease-in-out 0s 3 alternate}
.talking-character-card.twila.is-speaking img{animation:friendFloat .48s ease-in-out 0s 3 alternate}
.talking-character-card.elvie.is-speaking img{animation:friendHop .38s ease-in-out 0s 2 alternate}
.talking-character-card.luma.is-speaking img{filter:drop-shadow(0 0 13px rgba(255,204,45,.8))}
.character-tap-cue{
  display:inline-block;
  margin-top:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff6cc;
  color:var(--purple-dark);
  font-size:.82rem;
  font-weight:900;
}
.character-page-greeting-display{
  margin-top:30px;
}
@media (prefers-reduced-motion: reduce){
  .talking-character-card.is-speaking,
  .talking-character-card.is-speaking img,
  .talking-character-card.is-speaking .character-card-sparkle{
    animation:none !important;
  }
}


/* v9.5: better touch behavior across kid-facing controls */
button,
.btn,
.game-answer,
.talking-character-card,
.character-voice-btn,
.kid-action-card{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.talking-character-card,
.game-answer{
  -webkit-user-select:none;
  user-select:none;
}
.talking-character-card{
  min-height:44px;
}
.character-home-control{
  justify-content:center;
  margin-top:18px;
}

/* v9.5: spoken preschool Shapes game */
.shape-voice-controls{
  display:flex;
  justify-content:center;
  margin:12px 0 18px;
}
.shape-hear-btn{
  min-width:min(330px,92%);
  font-size:1.03rem;
}
.shape-choice{
  position:relative;
  grid-template-rows:1fr auto;
  gap:8px;
  padding:16px 10px 12px;
}
.shape-choice:disabled{
  opacity:.48;
  cursor:default;
  transform:none !important;
}
.shape-choice:not(:disabled):active{
  transform:scale(.96);
}
.shape-name{
  display:block;
  font-size:.82rem;
  font-weight:900;
  color:var(--purple-dark);
  background:#fff;
  border-radius:999px;
  padding:5px 9px;
}
@media(max-width:600px){
  .shape-hear-btn{
    width:100%;
    min-height:54px;
  }
  .shape-choice{
    min-height:145px;
  }
}


/* v9.6: Surprise Me button */
.surprise-me-btn{
  border:0;
  cursor:pointer;
  font:inherit;
  color:var(--purple-dark);
  box-shadow:0 8px 22px rgba(75,61,136,.10);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.surprise-me-btn:hover,
.surprise-me-btn:focus-visible{
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 12px 28px rgba(75,61,136,.16);
  outline:3px solid rgba(91,67,212,.15);
  outline-offset:3px;
}
.surprise-me-btn:active,
.surprise-me-btn.is-picking{
  transform:scale(.96);
  background:#fff3a9;
}

/* v9.6: spoken Colors game */
.color-voice-controls{
  display:flex;
  justify-content:center;
  margin:12px 0 18px;
}
.color-hear-btn{
  min-width:min(330px,92%);
  font-size:1.03rem;
}
.color-choice:disabled{
  opacity:.46;
  cursor:default;
  transform:none !important;
}
.color-choice:not(:disabled):active{
  transform:scale(.95);
}
@media(max-width:600px){
  .color-hear-btn{
    width:100%;
    min-height:54px;
  }
}


/* v10.0 — Explore Rooms + Pip's Science Lab */
.rooms-hero{background:linear-gradient(180deg,#fdf9ff,#f4fbff)}
.rooms-hero-friends{display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:250px}
.rooms-hero-friends img{width:min(31%,150px);max-height:225px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(70,60,120,.15))}
.rooms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.room-card{display:grid;grid-template-columns:45% 55%;min-height:300px;border-radius:32px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;box-shadow:0 16px 38px rgba(75,61,136,.13);border:3px solid rgba(255,255,255,.95);transition:.18s;touch-action:manipulation}
.room-card:hover,.room-card:focus-visible{transform:translateY(-6px);box-shadow:0 21px 44px rgba(75,61,136,.18);outline:none}
.room-card-scene{display:flex;align-items:center;justify-content:center;gap:4px;padding:22px 10px}
.room-card-scene img{width:min(58%,160px);max-height:220px;object-fit:contain}
.room-scene-icon{font-size:2.2rem}.music-room-scene{background:linear-gradient(145deg,#eee6ff,#fff0f8)}.science-room-scene{background:linear-gradient(145deg,#dcf8ff,#f5ffe9)}
.room-card-copy{padding:30px 26px;display:flex;flex-direction:column;justify-content:center}.room-card-copy h2{margin:.35rem 0 .5rem}.room-card-copy p{color:var(--ink-soft);font-weight:700}.room-card-copy strong{color:var(--purple-dark);margin-top:10px}
.room-status{align-self:flex-start;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:1000;background:#dffbed;color:#236c4d}
.coming-soon-heading{margin-top:60px}.future-rooms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.future-room-card{border:2px dashed rgba(91,67,212,.20);background:#fff;border-radius:26px;padding:18px;display:flex;align-items:center;gap:15px;text-align:left;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.future-room-card:hover,.future-room-card:focus-visible{transform:translateY(-4px);background:#fffaf0;outline:none}.future-room-card img{width:82px;height:100px;object-fit:contain}
.future-room-card h3{margin:0 0 5px}.future-room-card p{margin:0;color:var(--ink-soft);font-size:.88rem;font-weight:700}.future-room-card span{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:900;color:var(--purple-dark);background:#f3efff;padding:4px 7px;border-radius:999px}
.future-room-message{width:min(760px,96%);margin:25px auto 0;min-height:72px;background:#fff;border:2px solid #eee7ff;box-shadow:0 10px 24px rgba(75,61,136,.10);border-radius:22px;padding:15px 20px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--purple-dark)}

.science-lab-hero{background:linear-gradient(180deg,#f5fffc,#f7f6ff);padding:28px 0 42px}.science-lab-topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.science-room-shell{background:#fff;border-radius:34px;padding:26px;box-shadow:0 18px 44px rgba(75,61,136,.13)}.science-room-title{text-align:center;margin-bottom:22px}
.pip-lab-room{display:grid;grid-template-columns:1fr .8fr 1fr;grid-template-rows:220px 200px;gap:16px;min-height:440px}
.lab-zone{border:0;border-radius:28px;font:inherit;cursor:pointer;color:var(--ink);padding:20px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),0 10px 24px rgba(70,60,120,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;touch-action:manipulation}
.lab-zone:hover,.lab-zone:focus-visible{transform:translateY(-5px);outline:none}.lab-zone strong{font-size:1.15rem;color:var(--purple-dark)}.lab-zone em{font-style:normal;font-weight:800;font-size:.82rem}
.chalkboard-zone{grid-row:1/3;background:#315b50;color:#fff;border:12px solid #c78f53}.chalkboard-zone strong,.chalkboard-zone em{color:#fff}.chalk-mini{font-family:"Comic Sans MS","Trebuchet MS",sans-serif;font-size:2.2rem;color:#fff}
.pip-lab-center{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;position:relative;background:linear-gradient(180deg,#eefcff,#fff);border-radius:28px;overflow:hidden}.pip-lab-center img{width:88%;max-height:330px;object-fit:contain}
.pip-lab-bubble{position:absolute;top:15px;background:#fff6c8;color:var(--purple-dark);padding:9px 13px;border-radius:18px;font-weight:900}.space-zone{grid-column:3;grid-row:1;background:linear-gradient(145deg,#131941,#334786);color:#fff}.space-zone strong,.space-zone em{color:#fff}
.mini-orbit{position:relative;width:120px;height:70px;border:2px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center}.mini-orbit i{width:20px;height:20px;border-radius:50%;background:#46a7ff;position:absolute;left:2px;top:22px}.mini-orbit b{font-size:2.1rem}
.chemistry-zone{grid-column:3;grid-row:2;background:linear-gradient(145deg,#edffe9,#e8f8ff)}.beaker-row{font-size:2.5rem}.science-safety-note{margin-top:20px;border-radius:20px;padding:13px 18px;background:#fff7d7;display:flex;align-items:center;gap:10px}.science-safety-note p{margin:0}

.pip-activity-panel{border-radius:32px;background:#fff;padding:28px;box-shadow:0 15px 36px rgba(75,61,136,.12);margin-bottom:28px}.pip-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.math-mode-row,.volcano-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}.mini-mode{border:2px solid #e8e1ff;background:#fff;color:var(--purple-dark);border-radius:999px;padding:9px 14px;font:inherit;font-weight:900;cursor:pointer;touch-action:manipulation}.mini-mode.active{background:#fff2a9;border-color:#ffe16d}.mini-mode:disabled{opacity:.45}
.pip-chalkboard{background:#315b50;border:13px solid #c78f53;border-radius:24px;min-height:270px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}.chalk-question{font-size:1.55rem;font-weight:900}.chalk-dots{display:flex;gap:13px;flex-wrap:wrap;max-width:360px;justify-content:center;font-size:2.6rem}.chalk-equation{font-family:"Comic Sans MS","Trebuchet MS",sans-serif;font-size:3.5rem;font-weight:900}
.pip-answer-row{display:flex;justify-content:center;gap:14px;margin:20px 0 10px}.pip-number-answer{width:76px;height:76px;border-radius:24px;border:3px solid #e7e1ff;background:#fff7c6;color:var(--purple-dark);font:inherit;font-weight:1000;font-size:1.7rem;cursor:pointer;touch-action:manipulation}.pip-status{text-align:center;font-weight:900;color:var(--purple-dark);min-height:30px;margin:12px 0}.pip-status.success{color:#26734e}

.solar-system-model{background:radial-gradient(circle at center,#283968 0,#111735 60%,#090d23 100%);border-radius:28px;padding:24px 14px;display:grid;grid-template-columns:repeat(9,minmax(65px,1fr));align-items:end;gap:6px;overflow-x:auto;min-height:290px}.sun-orb{font-size:3.6rem;align-self:center;cursor:pointer;text-align:center}
.planet{border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:.73rem;font-weight:800;display:flex;flex-direction:column;gap:9px;align-items:center;touch-action:manipulation}.planet span{display:block;border-radius:50%}.mercury span{width:25px;height:25px;background:#b8aca0}.venus span{width:36px;height:36px;background:#e5b35f}.earth span{width:39px;height:39px;background:linear-gradient(135deg,#46a7ff 55%,#62c96b 56%)}.mars span{width:31px;height:31px;background:#c85c42}.jupiter span{width:70px;height:70px;background:repeating-linear-gradient(#e7c49b 0 9px,#bc8c6b 9px 16px)}.saturn span{width:58px;height:58px;background:#e8cf8d;outline:6px solid rgba(222,196,129,.55);outline-offset:4px}.uranus span{width:47px;height:47px;background:#9de2e9}.neptune span{width:46px;height:46px;background:#4c70db}
.space-fact-card{width:min(720px,95%);margin:20px auto;background:#f5f2ff;border-radius:22px;padding:17px 20px;text-align:center}.space-challenge{text-align:center}

.chemistry-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.chemistry-card{border:2px solid #eee8ff;border-radius:28px;padding:23px;text-align:center;background:#fcfbff}.color-vial-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0}
.color-vial{border:4px solid #fff;border-radius:18px 18px 28px 28px;width:82px;height:105px;font:inherit;color:#fff;font-weight:900;cursor:pointer;touch-action:manipulation}.red-vial{background:#ff5f74}.yellow-vial{background:#f0c728;color:#584600}.blue-vial{background:#46a7ff}.color-vial.selected{outline:5px solid #9c83ff;transform:translateY(-4px)}
.mix-beaker{min-height:115px;border-radius:22px;background:#eef9ff;margin:12px 0 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.mix-beaker span{font-size:2.6rem}.mix-beaker[data-result-color="orange"]{background:#ffd9a8}.mix-beaker[data-result-color="green"]{background:#c9f5c5}.mix-beaker[data-result-color="purple"]{background:#e1d0ff}
.volcano-scene{position:relative;min-height:185px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.volcano-mountain{font-size:7rem}.volcano-smoke{position:absolute;top:20px;font-size:2rem;opacity:.25}.volcano-bubbles{position:absolute;top:70px;font-size:1.7rem;color:#ff765f;opacity:0}.volcano-scene.erupting .volcano-bubbles{animation:volcanoFizz .42s ease-in-out infinite alternate}.volcano-scene.erupting .volcano-smoke{animation:volcanoSmoke .7s ease-out infinite alternate;opacity:1}
@keyframes volcanoFizz{from{transform:translateY(22px) scale(.8);opacity:.4}to{transform:translateY(-30px) scale(1.25);opacity:1}}@keyframes volcanoSmoke{from{transform:translateY(15px) scale(.8)}to{transform:translateY(-18px) scale(1.2)}}
.tiny-science-fact{margin-top:14px;background:#effbf5;padding:12px;border-radius:16px;font-size:.87rem}.science-home-controls{justify-content:center;gap:10px}

@media(max-width:1000px){.rooms-grid{grid-template-columns:1fr}.future-rooms-grid{grid-template-columns:1fr}.pip-lab-room{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.chalkboard-zone{grid-row:1;grid-column:1}.pip-lab-center{grid-row:1/3;grid-column:2}.space-zone{grid-row:2;grid-column:1}.chemistry-zone{grid-row:3;grid-column:1/3}}
@media(max-width:700px){.room-card{grid-template-columns:1fr}.pip-lab-room{display:flex;flex-direction:column}.pip-lab-center{order:-1;min-height:230px}.lab-zone{min-height:165px}.science-room-shell{padding:16px}.pip-activity-panel{padding:18px}.pip-panel-heading{flex-direction:column}.chemistry-grid{grid-template-columns:1fr}.solar-system-model{grid-template-columns:repeat(9,76px)}.pip-number-answer{width:66px;height:66px}}


/* v10.1 — Explore all characters + science lab room redesign */
.rooms-hero-friends.all-friends{
  gap: 10px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
}
.rooms-hero-friends.all-friends .hero-friend{
  width: min(18%, 115px);
  max-height: 185px;
  object-fit: contain;
}
.rooms-hero-friends.all-friends .luma-friend,
.rooms-hero-friends.all-friends .pip-friend{ transform: translateY(-4px); }
.rooms-hero-friends.all-friends .twila-friend{ transform: translateY(-6px); }

.science-hero-redesign{ background: linear-gradient(180deg,#f4fffd 0%,#f7f6ff 100%); }
.science-room-redesign{ overflow: hidden; }
.pip-science-scene{
  position: relative;
  min-height: 720px;
  border-radius: 34px;
  background:
    linear-gradient(180deg,#f5f2ea 0 62%, #dce8ef 62% 100%);
  box-shadow: inset 0 0 0 2px rgba(118,97,166,.07), inset 0 -30px 0 rgba(211,230,238,.28);
  overflow: hidden;
}
.scene-hotspot{ 
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  position: absolute;
  cursor: pointer;
  touch-action: manipulation;
}
.scene-hotspot:focus-visible{ outline: 4px solid #7a68ea; outline-offset: 6px; border-radius: 24px; }
.scene-hotspot::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius: 26px;
  background: transparent;
  transition: box-shadow .18s ease, background .18s ease, transform .18s ease;
  pointer-events:none;
}
.scene-hotspot:hover::after,
.scene-hotspot:focus-visible::after{ 
  box-shadow: 0 0 0 4px rgba(122,104,234,.18), 0 14px 28px rgba(77,56,139,.12); 
  background: rgba(255,255,255,.06);
}
.scene-hotspot:active::after{ transform: scale(.985); }

.scene-chalkboard{
  top: 28px;
  left: 26px;
  right: 26px;
  height: 300px;
}
.chalkboard-frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 18px solid #c7975e;
  background: #2b3f35;
  box-shadow: inset 0 0 38px rgba(0,0,0,.20), 0 14px 22px rgba(78,58,38,.12);
  overflow: hidden;
}
.chalkboard-frame::before{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height: 18px;
  background: linear-gradient(180deg,#b47c4b,#8e5a30);
}
.chalkboard-title{
  position: absolute;
  top: 22px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: clamp(1.8rem,3vw,3rem);
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chalkboard-title span:first-child{ color:#ff8b8b; text-shadow:0 1px 0 rgba(255,255,255,.08); }
.chalkboard-title span:last-child{ color:#87d8ff; }
.chalkboard-doodles{ position:absolute; inset:0; }
.formula{ position:absolute; color:rgba(255,255,255,.85); font-family:"Comic Sans MS","Trebuchet MS",sans-serif; font-weight:900; }
.formula-one{ left:22px; top:22px; font-size:1.15rem; transform:rotate(-10deg); }
.formula-two{ left:54px; top:160px; font-size:2rem; transform:rotate(-3deg); }
.formula-three{ right:290px; top:72px; font-size:1.2rem; transform:rotate(8deg); }
.orbit-ring{ position:absolute; border:2px solid rgba(158,205,255,.7); border-radius:50%; }
.orbit-one{ width:250px; height:110px; left:42px; top:45px; transform:rotate(-8deg); }
.orbit-two{ width:320px; height:150px; left:18px; top:24px; border-color:rgba(255,224,120,.6); transform:rotate(5deg); }
.orbit-three{ width:390px; height:190px; left:-12px; top:2px; border-color:rgba(244,163,255,.5); transform:rotate(8deg); }
.orbit-sun{ position:absolute; left:156px; top:104px; font-size:2.5rem; }
.orbit-planet{ position:absolute; font-size:1.55rem; }
.planet-a{ left:84px; top:80px; }
.planet-b{ left:245px; top:62px; }
.planet-c{ left:310px; top:138px; }
.scene-label{
  position: absolute;
  left: 22px;
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.96);
  color: var(--purple-dark);
  border-radius: 999px;
  font-weight: 1000;
  box-shadow: 0 10px 18px rgba(20,20,60,.12);
}
.scene-chalkboard .scene-label{ bottom: 38px; }
.scene-subhint{
  position:absolute;
  left: 26px;
  bottom: 9px;
  color: #f7f6ff;
  font-size: .85rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

.science-scene-table{
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 98px;
  height: 172px;
  border-radius: 12px 12px 20px 20px;
  background: linear-gradient(180deg,#deb983 0%,#c68c5a 16%,#c58a54 100%);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.18), 0 12px 24px rgba(94,69,42,.18);
}
.science-scene-table::before,
.science-scene-table::after{
  content:'';
  position:absolute;
  bottom:-106px;
  width: 36px;
  height: 110px;
  background: linear-gradient(180deg,#be8754,#9e673d);
  border-radius: 0 0 8px 8px;
}
.science-scene-table::before{ left: 66px; }
.science-scene-table::after{ right: 66px; }
.science-scene-table span{ display:none; }
.science-scene-stool{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 82px;
  height: 72px;
  background: linear-gradient(180deg,#9aa5af,#687483);
  border-radius: 50% 50% 14px 14px;
  opacity: .75;
}
.science-scene-stool::before{ content:''; position:absolute; top:-10px; left:6px; right:6px; height:20px; border-radius:50%; background:#8893a1; }

.pip-scene-character{
  position: absolute;
  left: 50%;
  bottom: 154px;
  transform: translateX(-50%);
  width: clamp(180px,26vw,250px);
  text-align: center;
  z-index: 4;
}
.pip-scene-character img{ width:100%; max-height:270px; object-fit:contain; filter: drop-shadow(0 10px 14px rgba(59,63,94,.18)); }
.pip-scene-character .pip-lab-bubble{ top:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; }

.scene-chemistry{
  left: 98px;
  bottom: 162px;
  width: 230px;
  height: 200px;
  z-index: 5;
}
.chem-glassware{
  position: relative;
  width: 100%;
  height: 100%;
}
.chem-glassware .glass{
  position:absolute;
  filter: drop-shadow(0 10px 12px rgba(69,87,123,.16));
}
.flask-blue{ left:12px; bottom:34px; font-size:4.4rem; }
.beaker-yellow{ left:86px; bottom:28px; font-size:4.1rem; }
.beaker-green{ left:146px; bottom:32px; font-size:3.7rem; }
.bubble{ position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(140,233,255,.75); border:2px solid rgba(255,255,255,.75); }
.bubble-one{ left:36px; bottom:130px; }
.bubble-two{ left:128px; bottom:148px; width:14px; height:14px; }
.bubble-three{ left:176px; bottom:122px; width:12px; height:12px; }
.scene-chemistry .scene-label{ left: 0; bottom: 18px; }
.scene-chemistry .scene-subhint{ left: 8px; bottom: -10px; color: var(--ink-soft); text-shadow:none; max-width: 240px; }

.scene-space{
  right: 92px;
  bottom: 154px;
  width: 245px;
  height: 214px;
  z-index: 5;
}
.solar-model-display{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #253c7a 0%, #171f4c 50%, #0b1332 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.08), 0 14px 22px rgba(28,31,78,.22);
}
.sun-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:radial-gradient(circle,#ffe985 0%,#ffb942 70%,#f68d00 100%);
  box-shadow:0 0 24px rgba(255,208,81,.48);
}
.orbit-line{ position:absolute; border:2px solid rgba(255,255,255,.28); border-radius:50%; }
.orbit-alpha{ inset:24px; }
.orbit-beta{ inset:44px; }
.orbit-gamma{ inset:64px; }
.tiny-planet{ position:absolute; display:block; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.tiny-planet-a{ width:16px; height:16px; left:28px; top:84px; background:#6fd6ff; }
.tiny-planet-b{ width:12px; height:12px; right:42px; top:56px; background:#ff9ccd; }
.tiny-planet-c{ width:18px; height:18px; right:62px; bottom:48px; background:#87f1a3; }
.tiny-planet-d{ width:24px; height:24px; left:64px; bottom:46px; background:#caa7ff; }
.planet-ring-main{ position:absolute; right:38px; bottom:86px; width:48px; height:48px; border-radius:50%; border:6px solid rgba(255,225,160,.9); border-left-color: transparent; border-right-color: transparent; transform:rotate(-18deg); }
.scene-space .scene-label{ left: 6px; bottom: 16px; }
.scene-space .scene-subhint{ left: 14px; bottom: -10px; color: var(--ink-soft); text-shadow:none; max-width: 235px; }

.scene-hotspot.is-sounding::after{
  box-shadow: 0 0 0 5px rgba(122,104,234,.22), 0 18px 32px rgba(77,56,139,.16);
  background: rgba(255,255,255,.08);
}

@media (max-width: 1000px){
  .rooms-hero-friends.all-friends{ flex-wrap: wrap; max-width: 360px; margin-inline:auto; }
  .rooms-hero-friends.all-friends .hero-friend{ width:min(30%,100px); }
  .pip-science-scene{ min-height: 880px; }
  .scene-chalkboard{ top:18px; left:18px; right:18px; height:280px; }
  .pip-scene-character{ width:220px; bottom:260px; }
  .science-scene-table{ left:28px; right:28px; bottom:120px; }
  .scene-chemistry{ left:34px; bottom:164px; width:210px; }
  .scene-space{ right:32px; bottom:162px; width:216px; }
}

@media (max-width: 760px){
  .pip-science-scene{
    min-height: auto;
    padding: 18px 14px 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: linear-gradient(180deg,#f5f2ea 0%, #eef6fa 100%);
  }
  .scene-hotspot,
  .science-scene-table,
  .science-scene-stool,
  .pip-scene-character{ position: relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; width:100%; }
  .scene-hotspot{ display:block; }
  .scene-chalkboard{ height: 260px; }
  .pip-scene-character{ order:2; width:min(70%,240px); margin:0 auto; }
  .science-scene-table{ order:3; height:110px; margin-top:-66px; }
  .science-scene-table::before{ left:24px; bottom:-76px; height:80px; }
  .science-scene-table::after{ right:24px; bottom:-76px; height:80px; }
  .science-scene-stool{ display:none; }
  .scene-chemistry{ order:4; height:200px; }
  .scene-space{ order:5; height:210px; }
  .scene-chemistry .scene-subhint,
  .scene-space .scene-subhint{ bottom: -4px; }
  .scene-label{ left: 14px; }
  .scene-subhint{ left: 18px; }
  .chalkboard-title{ top:18px; right:18px; font-size:2rem; }
  .orbit-one{ width:190px; height:92px; left:22px; top:56px; }
  .orbit-two{ width:250px; height:126px; left:8px; top:36px; }
  .orbit-three{ width:300px; height:164px; left:-8px; top:18px; }
  .orbit-sun{ left:114px; top:114px; }
  .planet-a{ left:58px; top:94px; }
  .planet-b{ left:188px; top:78px; }
  .planet-c{ left:232px; top:132px; }
}

/* v10.2 — Explore hero + Pip science room refresh */
.rooms-hero-friends.all-friends.six-friends{
  gap:10px;
  flex-wrap:wrap;
  max-width:640px;
  margin-inline:auto;
}
.rooms-hero-friends.all-friends.six-friends .hero-friend{
  width:min(28%,108px);
  max-height:180px;
}
.rooms-hero-friends.all-friends.six-friends .elvie-friend{ transform:translateY(-2px); }

.science-room-title.compact{ margin-bottom:18px; }
.science-room-title.compact h1{ margin-bottom:.45rem; }
.science-room-title.compact p{ max-width:760px; margin:0 auto; }
.pip-science-scene-v2{
  min-height:760px;
  border-radius:36px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 84% 14%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 18%),
    linear-gradient(180deg,#fbf6ef 0 68%, #d9eaf1 68% 100%);
  box-shadow: inset 0 0 0 2px rgba(118,97,166,.07), inset 0 -30px 0 rgba(255,255,255,.16);
}
.science-room-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.glow-left{ left:-20px; top:18px; }
.glow-right{ right:-20px; top:20px; }

.scene-chalkboard-v2{
  top: 28px;
  left: 30px;
  right: 30px;
  height: 314px;
}
.chalkboard-frame-v2{
  border-width:16px;
  border-color:#c99766;
  background:
    radial-gradient(circle at 65% 30%, rgba(255,255,255,.05) 0, rgba(255,255,255,0) 26%),
    linear-gradient(180deg,#303733 0%, #262d29 100%);
}
.chalkboard-frame-v2::before{
  height:20px;
  background:linear-gradient(180deg,#bb8656,#8d5b35);
}
.chalkboard-wordart{
  position:absolute;
  right:28px;
  top:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:.95;
  letter-spacing:.04em;
  font-weight:1000;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}
.chalkboard-wordart .wordart-top,
.chalkboard-wordart .wordart-bottom{ font-size:clamp(1.9rem,3vw,3.4rem); }
.chalkboard-wordart .wordart-top{ color:#ffb25c; }
.chalkboard-wordart .wordart-bottom{ color:#7fe2ff; }
.chalk-scribble{ position:absolute; color:rgba(251,251,251,.85); font-family:"Comic Sans MS","Trebuchet MS",sans-serif; font-weight:900; }
.chalk-scribble-1{ left:26px; top:24px; transform:rotate(-12deg); font-size:1.12rem; }
.chalk-scribble-2{ left:70px; top:178px; transform:rotate(-4deg); font-size:2rem; }
.chalk-scribble-3{ left:460px; top:42px; transform:rotate(12deg); font-size:1.15rem; }
.chalk-scribble-4{ right:242px; top:94px; transform:rotate(-7deg); font-size:1.8rem; }
.chalk-scribble-5{ left:472px; top:132px; transform:rotate(9deg); font-size:1.15rem; }
.chalk-scribble-6{ right:84px; top:154px; font-size:1.7rem; }
.chalk-orbit{ position:absolute; border:2px solid rgba(255,255,255,.42); border-radius:50%; }
.chalk-orbit-1{ left:38px; top:36px; width:300px; height:136px; border-color:rgba(122,208,255,.75); transform:rotate(-8deg); }
.chalk-orbit-2{ left:24px; top:24px; width:380px; height:180px; border-color:rgba(255,219,130,.7); transform:rotate(4deg); }
.chalk-orbit-3{ left:8px; top:12px; width:460px; height:220px; border-color:rgba(248,168,255,.58); transform:rotate(9deg); }
.chalk-sun{ position:absolute; left:158px; top:98px; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle,#ffe991 0%,#ffbe52 72%,#ffa11d 100%); box-shadow:0 0 24px rgba(255,213,92,.32); }
.chalk-planet{ position:absolute; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.chalk-planet-a{ left:72px; top:82px; width:22px; height:22px; background:#76c6ff; }
.chalk-planet-b{ left:250px; top:70px; width:16px; height:16px; background:#d4a0ff; }
.chalk-planet-c{ left:312px; top:132px; width:24px; height:24px; background:#85f3b4; }
.chalk-planet-d{ left:106px; top:154px; width:18px; height:18px; background:#ffa8a1; }
.chalk-molecule{ position:absolute; width:60px; height:36px; }
.chalk-molecule::before,
.chalk-molecule::after{ content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.82); }
.chalk-molecule::before{ width:16px; height:16px; left:0; top:10px; }
.chalk-molecule::after{ width:12px; height:12px; right:8px; top:0; }
.chalk-molecule-a{ right:126px; top:64px; }
.chalk-molecule-a span{ display:none; }
.chalk-molecule-a::after{ box-shadow:-18px 16px 0 2px rgba(255,255,255,.76); }
.chalk-molecule-b{ right:88px; top:194px; transform:scale(.9); }
.chalk-molecule-b::after{ box-shadow:-20px 14px 0 2px rgba(255,255,255,.76); }
.chalk-grid{
  position:absolute; right:52px; bottom:54px; width:180px; height:94px; opacity:.45;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.48) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.48) 0 2px, transparent 2px 22px);
  border:2px solid rgba(255,255,255,.45);
}

.science-scene-table-v2{
  left:56px;
  right:56px;
  bottom:88px;
  height:182px;
  border-radius:12px 12px 26px 26px;
  background:linear-gradient(180deg,#dfb986 0%, #d09b67 12%, #c48353 100%);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.2), 0 14px 26px rgba(94,69,42,.18);
}
.science-scene-table-v2::before,
.science-scene-table-v2::after{ display:none; }
.table-front-panel{ position:absolute; left:0; right:0; top:22px; bottom:0; border-radius:0 0 24px 24px; background:linear-gradient(180deg,rgba(147,89,50,.08),rgba(111,67,34,.13)); }
.table-leg{ position:absolute; bottom:-126px; width:30px; height:126px; background:linear-gradient(180deg,#b57f4d,#8f5c34); border-radius:0 0 8px 8px; }
.leg-left{ left:48px; }
.leg-right{ right:48px; }
.table-stretcher{ position:absolute; left:98px; right:98px; bottom:-98px; height:18px; border-radius:10px; background:linear-gradient(180deg,#ab7648,#8e5a32); }

.pip-scene-character-v2{
  width:clamp(190px,28vw,270px);
  bottom:138px;
  z-index:4;
}
.pip-scene-character-v2 img{ max-height:290px; }
.pip-scene-character-v2 .pip-lab-bubble{
  position:absolute;
  top:-18px;
  left:50%; transform:translateX(-50%);
  padding:11px 16px;
  border-radius:18px;
  background:#fff9cf;
  color:var(--purple-dark);
  font-weight:1000;
  box-shadow:0 10px 18px rgba(90,75,126,.12);
  white-space:nowrap;
}

.scene-chemistry-v2{
  left:88px;
  bottom:174px;
  width:248px;
  height:194px;
  z-index:6;
}
.chem-glassware{ position:relative; width:100%; height:100%; }
.counter-shadow{ position:absolute; left:0; right:0; bottom:38px; height:16px; border-radius:50%; background:rgba(45,63,89,.08); }
.chem-rack{ position:absolute; left:18px; right:18px; bottom:40px; height:6px; border-radius:6px; background:#95a4b4; box-shadow:0 -34px 0 -2px rgba(149,164,180,.55); }
.glass{ position:absolute; bottom:42px; display:block; border-radius:14px 14px 18px 18px; border:4px solid rgba(255,255,255,.76); background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.08)); box-shadow:0 12px 14px rgba(60,83,119,.12); }
.glass::after{ content:''; position:absolute; left:10%; right:10%; bottom:0; border-radius:0 0 12px 12px; }
.glass-flask-left{ left:4px; width:62px; height:86px; border-radius:18px 18px 22px 22px; }
.glass-flask-left::after{ top:42px; background:linear-gradient(180deg,#58b6ff,#2d8cff); }
.glass-flask-left::before{ content:''; position:absolute; left:24px; top:-22px; width:12px; height:24px; border-radius:8px 8px 0 0; background:rgba(255,255,255,.6); }
.glass-beaker-middle{ left:82px; width:66px; height:74px; border-radius:10px 10px 18px 18px; }
.glass-beaker-middle::after{ top:28px; background:linear-gradient(180deg,#ffeb86,#f2bf2c); }
.glass-flask-right{ right:16px; width:58px; height:92px; border-radius:18px 18px 22px 22px; }
.glass-flask-right::after{ top:36px; background:linear-gradient(180deg,#87ef9f,#40bf68); }
.glass-flask-right::before{ content:''; position:absolute; left:22px; top:-20px; width:12px; height:22px; border-radius:8px 8px 0 0; background:rgba(255,255,255,.6); }
.tube-stand{ position:absolute; left:156px; bottom:46px; width:34px; height:72px; border-left:4px solid #8695a6; border-right:4px solid #8695a6; border-bottom:4px solid #8695a6; border-radius:0 0 10px 10px; }
.tube-stand::before,
.tube-stand::after{ content:''; position:absolute; width:10px; height:30px; bottom:18px; border-radius:0 0 8px 8px; background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.08)); border:3px solid rgba(255,255,255,.76); }
.tube-stand::before{ left:2px; }
.tube-stand::after{ right:2px; }
.tube-stand{ box-shadow: inset 0 -16px 0 0 rgba(94,204,255,.35); }
.bubble-four{ left:196px; bottom:140px; width:20px; height:20px; }
.scene-chemistry-v2 .scene-label{ left:0; bottom:4px; }
.scene-chemistry-v2 .scene-subhint{ left:6px; bottom:-22px; max-width:260px; color:var(--ink-soft); text-shadow:none; }

.scene-space-v2{
  right:86px;
  bottom:166px;
  width:254px;
  height:212px;
  z-index:6;
}
.solar-model-display-v2{
  border-radius:34px;
  background:radial-gradient(circle at 50% 40%, #3853a5 0%, #1c2557 52%, #0d1330 100%);
}
.solar-stand{ position:absolute; left:50%; transform:translateX(-50%); bottom:-18px; width:70px; height:24px; border-radius:50%; background:#6d7c8f; box-shadow:0 6px 0 #556273; }
.solar-stand::before{ content:''; position:absolute; left:32px; bottom:16px; width:6px; height:42px; background:#708096; border-radius:999px; }
.scene-space-v2 .scene-label{ left:10px; bottom:8px; }
.scene-space-v2 .scene-subhint{ left:14px; bottom:-22px; max-width:250px; color:var(--ink-soft); text-shadow:none; }

@media (max-width: 1000px){
  .rooms-hero-friends.all-friends.six-friends .hero-friend{ width:min(30%,94px); }
  .pip-science-scene-v2{ min-height:860px; }
  .scene-chalkboard-v2{ left:18px; right:18px; height:294px; }
  .science-scene-table-v2{ left:28px; right:28px; bottom:112px; }
  .scene-chemistry-v2{ left:28px; bottom:182px; width:222px; }
  .scene-space-v2{ right:28px; bottom:176px; width:222px; }
  .pip-scene-character-v2{ bottom:248px; width:220px; }
  .chalkboard-wordart{ right:18px; }
  .chalk-grid{ right:24px; width:150px; }
}

@media (max-width: 760px){
  .rooms-hero-friends.all-friends.six-friends{ max-width:340px; gap:4px; }
  .rooms-hero-friends.all-friends.six-friends .hero-friend{ width:min(31%,92px); }
  .pip-science-scene-v2{
    min-height:auto;
    padding:16px 14px 24px;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    background:linear-gradient(180deg,#faf6ef 0%, #edf6fa 100%);
  }
  .science-room-glow{ display:none; }
  .scene-hotspot,
  .science-scene-table-v2,
  .science-scene-stool,
  .pip-scene-character-v2{
    position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; width:100%;
  }
  .scene-chalkboard-v2{ height:260px; }
  .chalkboard-wordart{ right:16px; top:16px; }
  .chalkboard-wordart .wordart-top,
  .chalkboard-wordart .wordart-bottom{ font-size:1.95rem; }
  .chalk-orbit-1{ width:210px; height:100px; left:22px; top:58px; }
  .chalk-orbit-2{ width:272px; height:136px; left:10px; top:40px; }
  .chalk-orbit-3{ width:320px; height:168px; left:-8px; top:26px; }
  .chalk-sun{ left:116px; top:104px; width:44px; height:44px; }
  .chalk-planet-a{ left:56px; top:92px; }
  .chalk-planet-b{ left:190px; top:82px; }
  .chalk-planet-c{ left:228px; top:130px; }
  .chalk-planet-d{ left:88px; top:152px; }
  .chalk-scribble-3,
  .chalk-scribble-4,
  .chalk-scribble-5,
  .chalk-grid,
  .chalk-molecule-b{ display:none; }
  .pip-scene-character-v2{ order:2; width:min(70%,240px); margin:0 auto; }
  .science-scene-table-v2{ order:3; height:118px; margin-top:-70px; }
  .table-leg{ bottom:-80px; height:80px; }
  .table-stretcher{ bottom:-64px; left:52px; right:52px; }
  .science-scene-stool{ display:none; }
  .scene-chemistry-v2{ order:4; height:212px; }
  .scene-space-v2{ order:5; height:220px; }
  .scene-chemistry-v2 .scene-subhint,
  .scene-space-v2 .scene-subhint{ bottom:-6px; }
}

/* v10.3 — Pip's Science Lab made more game-like */
.science-room-v103{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
}
.science-helper-bar{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:16px;
  align-items:stretch;
  margin:10px 0 18px;
}
.science-helper-bubble,
.science-mini-mission{
  background:linear-gradient(180deg,#fff9d6 0%,#fff3bf 100%);
  border:2px solid rgba(236,210,121,.5);
  border-radius:24px;
  padding:16px 18px;
  box-shadow:0 12px 26px rgba(93,73,28,.08);
}
.science-helper-bubble{
  display:flex; flex-direction:column; gap:4px;
  font-weight:800; color:var(--purple-dark);
}
.science-helper-bubble strong{ font-size:1.05rem; }
.science-helper-bubble span{ color:var(--ink-soft); font-weight:700; }
.science-mini-mission{
  background:linear-gradient(180deg,#f1efff 0%,#eae6ff 100%);
  border-color:rgba(122,104,234,.15);
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.science-mini-mission .mission-title{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:1000; color:#6e57db;
}
.science-mini-mission strong{ font-size:1.1rem; color:var(--purple-dark); }
.science-mini-mission span:last-child{ color:var(--ink-soft); font-weight:800; }

.science-quick-picks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.science-quick-btn,
.science-progress-chip{
  appearance:none; border:0; cursor:pointer; touch-action:manipulation;
  border-radius:24px; padding:14px 16px; text-align:left; position:relative;
  box-shadow:0 14px 28px rgba(75,61,136,.10);
  transition:transform .16s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.science-quick-btn:hover,
.science-quick-btn:focus-visible,
.science-progress-chip:hover,
.science-progress-chip:focus-visible{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 20px 34px rgba(75,61,136,.15);
}
.science-quick-btn:active,
.science-progress-chip:active{ transform:translateY(-1px) scale(.99); }
.science-quick-btn{ display:flex; gap:12px; align-items:center; min-height:86px; }
.science-quick-btn .quick-emoji{ width:54px; height:54px; border-radius:18px; display:grid; place-items:center; font-size:1.8rem; background:rgba(255,255,255,.55); flex:0 0 auto; }
.science-quick-btn .quick-copy{ display:flex; flex-direction:column; }
.science-quick-btn .quick-copy strong{ color:var(--purple-dark); font-size:1rem; }
.science-quick-btn .quick-copy small{ color:var(--ink-soft); font-size:.84rem; font-weight:800; }
.science-quick-btn.chalk{ background:linear-gradient(180deg,#dcf5ff 0%,#c6ecff 100%); }
.science-quick-btn.chemistry{ background:linear-gradient(180deg,#dffff0 0%,#c9f4df 100%); }
.science-quick-btn.space{ background:linear-gradient(180deg,#efe4ff 0%,#e3d5ff 100%); }
.science-quick-btn.surprise{ background:linear-gradient(180deg,#ffe9c6 0%,#ffdf9f 100%); }
.science-quick-btn.done::after,
.science-progress-chip.done::after{
  content:'✓'; position:absolute; top:10px; right:12px; width:26px; height:26px; border-radius:50%;
  background:#63c678; color:#fff; display:grid; place-items:center; font-weight:1000; box-shadow:0 8px 16px rgba(62,145,84,.24);
}
.science-room-tipline{
  margin:0 0 18px;
  text-align:center;
  font-weight:900;
  color:#6e57db;
}

.pip-science-scene-v103{
  border:3px solid rgba(122,104,234,.10);
  box-shadow:inset 0 0 0 2px rgba(118,97,166,.06), 0 18px 40px rgba(75,61,136,.10);
}
.floating-star{
  position:absolute; z-index:1; font-size:1.4rem; opacity:.8; pointer-events:none;
  animation:scienceFloat 3.8s ease-in-out infinite;
}
.float-star-a{ left:24px; top:328px; animation-delay:0s; }
.float-star-b{ right:42px; top:352px; animation-delay:.8s; }
.float-star-c{ left:50%; margin-left:-14px; bottom:356px; animation-delay:1.6s; }
@keyframes scienceFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(7deg);} }

.scene-hotspot-v103::after{
  inset:-12px;
  border-radius:30px;
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
.scene-hotspot-v103:hover::after,
.scene-hotspot-v103:focus-visible::after{
  box-shadow:0 0 0 5px rgba(122,104,234,.22), 0 0 0 12px rgba(255,255,255,.10), 0 18px 32px rgba(77,56,139,.14);
  background:rgba(255,255,255,.08);
}
.scene-hotspot-v103.is-sounding::after{
  box-shadow:0 0 0 6px rgba(122,104,234,.24), 0 0 0 14px rgba(255,255,255,.14), 0 20px 36px rgba(77,56,139,.18);
}
.scene-hotspot-v103{ animation:hotspotBob 2.6s ease-in-out infinite; }
.scene-hotspot-v103.scene-chalkboard{ animation-delay:0s; }
.scene-hotspot-v103.scene-chemistry{ animation-delay:.4s; }
.scene-hotspot-v103.scene-space{ animation-delay:.8s; }
@keyframes hotspotBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.tap-me-badge{
  position:absolute;
  z-index:8;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:84px; padding:10px 14px; border-radius:999px;
  background:linear-gradient(180deg,#fff7b9 0%,#ffe36e 100%);
  color:#6a52dc; font-weight:1000; font-size:.88rem; letter-spacing:.01em;
  box-shadow:0 12px 18px rgba(96,73,24,.16);
  animation:tapPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
.tap-left{ left:18px; top:14px; }
.tap-bottom{ left:50%; transform:translateX(-50%); top:-12px; }
@keyframes tapPulse{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-4px) scale(1.04); }
}
.scene-space-v103 .tap-bottom,
.scene-chemistry-v103 .tap-bottom{ transform:translateX(-50%); }
.pip-scene-character-v103 .pip-lab-bubble{
  background:linear-gradient(180deg,#fff6c3 0%,#ffe98e 100%);
  border:2px solid rgba(237,197,87,.42);
}

.science-progress-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:20px 0 6px;
}
.science-progress-chip{
  display:flex; flex-direction:column; gap:3px;
  align-items:flex-start;
  min-height:92px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f3ff 100%);
  border:2px solid rgba(122,104,234,.10);
}
.science-progress-chip span{ font-size:1.55rem; }
.science-progress-chip strong{ color:var(--purple-dark); font-size:1rem; }
.science-progress-chip small{ color:var(--ink-soft); font-weight:800; }
.surprise-chip{ background:linear-gradient(180deg,#fff3cf 0%,#ffe3aa 100%); }

.game-score.star-flash{
  transform:scale(1.06);
  box-shadow:0 0 0 6px rgba(255,235,112,.18), 0 18px 30px rgba(75,61,136,.14);
  transition:transform .15s ease, box-shadow .18s ease;
}

@media (max-width: 1024px){
  .science-quick-picks,
  .science-progress-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px){
  .science-helper-bar{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .science-quick-picks,
  .science-progress-row{ grid-template-columns:1fr; }
  .science-quick-btn,
  .science-progress-chip{ min-height:auto; }
  .science-room-tipline{ font-size:.95rem; }
  .pip-science-scene-v103{ padding-top:22px; }
  .tap-left{ left:12px; top:10px; }
  .tap-bottom{ top:8px; }
  .floating-star{ display:none; }
  .scene-hotspot-v103{ animation:none; }
  .tap-me-badge{ min-width:76px; padding:8px 12px; font-size:.82rem; }
}
/* v10.3 bugfix tweaks */
.tap-bottom{ left:calc(50% - 42px); transform:none; }
@media (max-width:760px){ .tap-bottom{ left:calc(50% - 38px); } }

/* ==========================================================
   v10.4 — Explore Rooms becomes a kid-friendly game hub
   ========================================================== */
.rooms-page-v104 .rooms-hero-v104{
  background:
    radial-gradient(circle at 14% 20%,rgba(255,226,113,.26),transparent 27%),
    radial-gradient(circle at 83% 20%,rgba(108,213,255,.22),transparent 28%),
    linear-gradient(180deg,#fbf8ff 0%,#f1fbff 100%);
}
.rooms-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.room-surprise-btn,.big-surprise-room{touch-action:manipulation;animation:roomButtonPulse 2.6s ease-in-out infinite}
@keyframes roomButtonPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.rooms-friend-stage{display:flex;flex-direction:column;align-items:center;gap:8px}
.rooms-hero-friends.six-friends{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(82px,1fr));
  gap:10px!important;
  width:min(520px,100%);
  max-width:none!important;
  min-height:0;
}
.rooms-friend-button{
  appearance:none;border:0;background:rgba(255,255,255,.72);border-radius:24px;
  padding:7px 7px 5px;cursor:pointer;touch-action:manipulation;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  box-shadow:0 10px 22px rgba(75,61,136,.09);transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.rooms-friend-button:hover,.rooms-friend-button:focus-visible{transform:translateY(-5px) scale(1.02);box-shadow:0 16px 28px rgba(75,61,136,.14);background:#fff;outline:none}
.rooms-friend-button:active{transform:scale(.98)}
.rooms-friend-button .hero-friend{width:100%!important;height:115px;max-height:115px!important;object-fit:contain;transform:none!important}
.rooms-friend-button span{font-weight:1000;color:var(--purple-dark);font-size:.82rem;padding:2px 0 5px}
.rooms-friend-button.is-speaking{animation:friendHelloBounce .48s ease-in-out 0s 2 alternate;background:#fff8c9}
.rooms-greeting-display{margin:8px auto 0;width:min(520px,100%);min-height:56px}

.rooms-game-section{padding-top:42px}
.room-passport-card{
  display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;
  border-radius:32px;padding:25px 28px;background:linear-gradient(145deg,#fff8d4,#f5efff);
  border:3px solid rgba(255,255,255,.9);box-shadow:0 15px 34px rgba(75,61,136,.11);margin-bottom:52px;
}
.passport-copy h2{margin:.35rem 0}.passport-copy p{margin:0;color:var(--ink-soft);font-weight:700}
.passport-progress{text-align:center;background:rgba(255,255,255,.76);border-radius:24px;padding:16px 20px}
.passport-count{display:flex;flex-direction:column;gap:1px}.passport-count strong{font-size:1.45rem;color:var(--purple-dark)}.passport-count span{font-size:.78rem;font-weight:900;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.passport-stars{display:flex;justify-content:center;gap:12px;margin:9px 0}.passport-star{font-size:2.3rem;color:#c6bddf;line-height:1;transition:transform .2s ease,color .2s ease,text-shadow .2s ease}.passport-star.earned{color:#ffc94b;text-shadow:0 5px 14px rgba(255,190,38,.38);transform:scale(1.08)}
.passport-message{font-weight:900;color:var(--purple-dark);font-size:.86rem}

.room-door-heading{margin-bottom:25px}
.rooms-grid-v104{gap:26px}
.room-door-card{position:relative;overflow:visible!important;border:4px solid rgba(255,255,255,.96);box-shadow:0 18px 40px rgba(75,61,136,.14);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.room-door-card:hover,.room-door-card:focus-visible{transform:translateY(-8px) scale(1.012);box-shadow:0 27px 48px rgba(75,61,136,.20);filter:saturate(1.04)}
.room-door-card:active{transform:translateY(-3px) scale(.995)}
.room-tap-badge{position:absolute;z-index:8;top:-13px;left:20px;border-radius:999px;padding:8px 13px;background:linear-gradient(180deg,#fff7ad,#ffdc50);color:#6147cf;font-weight:1000;font-size:.76rem;letter-spacing:.05em;box-shadow:0 9px 16px rgba(93,68,18,.16);animation:roomTapWiggle 2.2s ease-in-out infinite}
@keyframes roomTapWiggle{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-3px)}}
.door-stars{position:absolute;right:20px;top:-18px;z-index:8;display:flex;gap:7px;align-items:center;color:#8e6fff;font-weight:1000;pointer-events:none}.door-stars i{font-style:normal;animation:doorStarFloat 2.5s ease-in-out infinite}.door-stars i:nth-child(2){animation-delay:.45s}.door-stars i:nth-child(3){animation-delay:.9s}.science-stars{color:#4fa8e9}
@keyframes doorStarFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(8deg)}}
.room-card-scene{min-height:260px}.room-card-scene img{transition:transform .18s ease;filter:drop-shadow(0 10px 16px rgba(60,50,110,.15))}.room-door-card:hover .room-card-scene img{transform:translateY(-5px) scale(1.03)}
.bounce-note,.lab-float{animation:doorIconBounce 2.25s ease-in-out infinite}.bounce-note.two,.lab-float.two{animation-delay:.65s}@keyframes doorIconBounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.room-mini-features{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 13px}.room-mini-features span{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.76);font-size:.76rem;font-weight:900;color:var(--purple-dark);border:1px solid rgba(106,80,191,.08)}
.room-enter-button{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:10px 14px;border-radius:999px;background:#fff4ae;color:#5d46c9!important;box-shadow:0 7px 15px rgba(75,61,136,.09)}
.room-door-card.room-explored::after{content:'⭐ EXPLORED';position:absolute;right:18px;bottom:-14px;z-index:9;background:#fff;color:#6a4fd6;border:2px solid #f2e9ff;border-radius:999px;padding:7px 11px;font-size:.73rem;font-weight:1000;box-shadow:0 8px 16px rgba(75,61,136,.12)}

.room-random-zone{margin:46px 0 58px;border-radius:30px;padding:24px 28px;background:linear-gradient(120deg,#e6f8ff,#fff5c9,#f0e7ff);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 13px 28px rgba(75,61,136,.10)}
.room-random-zone h2{margin:.25rem 0}.room-random-zone p{margin:0;color:var(--ink-soft);font-weight:700}.big-surprise-room{min-width:235px}

.future-rooms-grid-v104{gap:20px}.future-room-door{position:relative;overflow:hidden;min-height:190px;border:3px dashed rgba(91,67,212,.18);box-shadow:0 12px 26px rgba(75,61,136,.08);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.future-room-door:hover,.future-room-door:focus-visible{transform:translateY(-6px);box-shadow:0 19px 34px rgba(75,61,136,.14);outline:none}.future-room-door.peek-active{animation:futurePeek .38s ease-out;background:#fff9d9}@keyframes futurePeek{0%{transform:scale(.98)}65%{transform:scale(1.025)}100%{transform:scale(1)}}
.future-door-lock{position:absolute!important;right:13px;top:12px!important;margin:0!important;font-size:1.2rem!important;padding:7px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 7px 14px rgba(75,61,136,.12);z-index:4}
.future-tap{position:absolute!important;left:12px;top:10px!important;margin:0!important;background:#fff3a9!important;color:#6b50d2!important;padding:6px 9px!important;border-radius:999px!important;font-size:.67rem!important;letter-spacing:.04em;z-index:4;box-shadow:0 7px 14px rgba(75,61,136,.08)}
.future-room-door img{transition:transform .18s ease}.future-room-door:hover img{transform:translateY(-4px) rotate(-2deg)}
.luma-future{background:linear-gradient(145deg,#fffaf1,#fff1cf)}.loodle-future{background:linear-gradient(145deg,#f1fff2,#e5f8e7)}.twila-future{background:linear-gradient(145deg,#f5f0ff,#eee6ff)}

.future-room-preview{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:16px;margin-top:28px;padding:20px 23px;min-height:100px}.preview-room-icon{font-size:2.35rem;width:64px;height:64px;border-radius:20px;background:#fff6c4;display:grid;place-items:center}.future-preview-copy strong{font-size:1.15rem;color:var(--purple-dark)}.future-preview-copy p{margin:.35rem 0 .65rem;color:var(--ink-soft);font-weight:700}.future-preview-copy small{display:block;margin-top:8px;font-weight:800;color:#766693}.future-preview-chips{display:flex;gap:7px;flex-wrap:wrap}.future-preview-chip{padding:6px 9px;border-radius:999px;background:#f1ecff;color:var(--purple-dark);font-size:.78rem;font-weight:900}
.rooms-home-controls{justify-content:center;margin-top:30px}.room-travel-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(42,32,85,0);opacity:0;pointer-events:none;transition:opacity .18s ease,background .18s ease}.room-travel-overlay.show{opacity:1;background:rgba(42,32,85,.28)}.room-travel-card{min-width:250px;border-radius:28px;padding:26px;background:#fff;text-align:center;box-shadow:0 25px 55px rgba(42,32,85,.25);transform:scale(.88);animation:travelPop .35s ease-out forwards}.room-travel-card span{display:block;font-size:3.2rem}.room-travel-card strong{display:block;margin:5px 0;color:var(--purple-dark);font-size:1.25rem}.room-travel-card small{font-weight:800;color:var(--ink-soft)}@keyframes travelPop{to{transform:scale(1)}}

@media(max-width:1000px){.room-passport-card{grid-template-columns:1fr}.room-random-zone{flex-direction:column;text-align:center}.rooms-hero-friends.six-friends{grid-template-columns:repeat(3,minmax(75px,1fr))}}
@media(max-width:700px){.rooms-hero-friends.six-friends{grid-template-columns:repeat(3,minmax(65px,1fr));gap:6px!important}.rooms-friend-button .hero-friend{height:92px}.rooms-friend-button{border-radius:18px;padding:5px}.rooms-greeting-display{font-size:.9rem}.room-passport-card{padding:20px}.rooms-grid-v104{gap:34px}.room-door-card{overflow:visible!important}.room-card-scene{min-height:220px}.room-random-zone{padding:22px 18px}.big-surprise-room{min-width:0;width:100%}.future-room-preview{grid-template-columns:1fr;text-align:center}.preview-room-icon{margin:auto}.future-preview-chips{justify-content:center}.rooms-hero-actions .btn{width:100%;justify-content:center}.room-tap-badge{font-size:.68rem}.door-stars{right:10px}}
@media(prefers-reduced-motion:reduce){.room-surprise-btn,.big-surprise-room,.room-tap-badge,.door-stars i,.bounce-note,.lab-float,.rooms-friend-button.is-speaking{animation:none!important}.room-door-card,.future-room-door,.rooms-friend-button{transition:none!important}}

/* v10.5 — Pip math games use countable objects instead of dots */
.math-object-board{
  width:100%;
  max-width:640px;
  justify-content:center;
}
.math-object-collection{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:4px;
}
.math-object{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.math-object span{
  font-size:2rem;
  line-height:1;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
.obj-strawberry,.obj-star,.obj-shape{ background:rgba(255,255,255,.16); }
.obj-pencil{ background:rgba(255,248,200,.18); }
.obj-tree{ background:rgba(216,255,220,.12); }
.obj-puppy{ background:rgba(255,242,220,.14); }
.obj-chair,.obj-car,.obj-house,.obj-toy{ background:rgba(236,242,255,.14); }

.math-add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  width:100%;
}
.math-group{
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:10px 12px 14px;
}
.math-group-label{
  text-align:center;
  font-weight:900;
  font-size:1rem;
  margin-bottom:8px;
}
.math-symbol{
  font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
  font-size:2.5rem;
  font-weight:1000;
  line-height:1;
}
.math-symbol.question{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
}

@media(max-width:700px){
  .math-object{ width:50px;height:50px;border-radius:14px; }
  .math-object span{ font-size:1.7rem; }
  .math-add-row{ grid-template-columns:1fr; gap:8px; }
  .math-symbol{ justify-self:center; }
}

/* v10.6 — Bigger math art, tracing activity, richer chemistry, and bigger volcano */
.math-object-board{
  width:100%;
  max-width:720px;
  justify-content:center;
}
.math-object-collection{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:6px;
}
.math-object{
  width:76px;
  height:76px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), 0 8px 20px rgba(47,26,89,.08);
}
.math-object span{font-size:2.45rem;line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));}
.math-group{background:rgba(255,255,255,.08);border-radius:22px;padding:12px 14px 16px;}
.math-group-label{text-align:center;font-weight:900;font-size:1.05rem;margin-bottom:10px;}
.removed-group .math-object{opacity:.55;filter:grayscale(.12);}
.removed-group .math-object span{text-decoration:line-through 3px rgba(255,120,120,.9);}
.math-symbol{font-family:"Comic Sans MS","Trebuchet MS",sans-serif;font-size:2.8rem;font-weight:1000;line-height:1;}
.math-symbol.question{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);}
.math-subhint{margin-top:10px;text-align:center;font-weight:800;opacity:.95;}

.trace-number-card{margin-top:22px;border:2px solid #eee3ff;border-radius:28px;background:#fffdf1;padding:18px;box-shadow:0 10px 30px rgba(113,86,189,.08);}
.trace-card-heading h3{margin-bottom:4px;}
.trace-card-heading p{margin:0 0 10px;}
.trace-board-wrap{display:flex;justify-content:center;}
.trace-board{position:relative;width:min(100%,620px);height:300px;border-radius:28px;background:linear-gradient(180deg,#355c46,#274936);box-shadow:inset 0 0 0 5px #6c4b2a,inset 0 0 0 12px #9a6c3a;overflow:hidden;}
.trace-guide-number{position:absolute;inset:0;display:grid;place-items:center;font-size:11rem;font-weight:1000;color:rgba(255,255,255,.16);pointer-events:none;user-select:none;font-family:"Comic Sans MS","Trebuchet MS",sans-serif;}
.trace-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.trace-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;}

.orange-vial{background:#ff9e45;}.green-vial{background:#48c774;}.purple-vial{background:#8f69ff;}
.mix-beaker[data-result-color="gold"]{background:#ffe38e;}
.mix-beaker[data-result-color="teal"]{background:#baf6ef;}
.mix-beaker[data-result-color="magenta"]{background:#ffc6ea;}
.mix-beaker[data-result-color="coral"]{background:#ffd0be;}
.mix-beaker[data-result-color="indigo"]{background:#cfd0ff;}
.mix-beaker[data-result-color="lime"]{background:#ddffb5;}

.volcano-scene{position:relative;min-height:240px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#fff8e8,#fff2c6);border-radius:26px;}
.volcano-mountain{font-size:8.8rem;position:relative;z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));}
.volcano-smoke{position:absolute;top:16px;font-size:2.2rem;opacity:.32;z-index:1;letter-spacing:6px;}
.volcano-bubbles{position:absolute;top:78px;font-size:2.1rem;color:#ff765f;opacity:0;z-index:4;letter-spacing:4px;}
.volcano-lava{position:absolute;bottom:108px;left:50%;width:36px;height:28px;transform:translateX(-50%) scale(.6);border-radius:50% 50% 30% 30%;background:radial-gradient(circle at 50% 30%, #fff4a0 0 22%, #ffb347 23% 54%, #ff6a3d 55% 78%, rgba(255,106,61,0) 79%);opacity:0;z-index:3;filter:drop-shadow(0 0 10px rgba(255,120,0,.4));}
.volcano-sparks{position:absolute;bottom:136px;left:50%;transform:translateX(-50%);font-size:1.25rem;opacity:0;z-index:5;letter-spacing:8px;}
.volcano-scene.erupting .volcano-bubbles{animation:volcanoFizzBig .45s ease-in-out infinite alternate;opacity:1;}
.volcano-scene.erupting .volcano-smoke{animation:volcanoSmokeBig .9s ease-out infinite alternate;opacity:1;}
.volcano-scene.erupting .volcano-lava{animation:volcanoBlast 1s ease-out infinite;opacity:1;}
.volcano-scene.erupting .volcano-sparks{animation:volcanoSparkle .8s ease-out infinite;opacity:1;}
@keyframes volcanoFizzBig{from{transform:translateY(22px) scale(.8);opacity:.35}to{transform:translateY(-68px) scale(1.4);opacity:1}}
@keyframes volcanoSmokeBig{from{transform:translateY(16px) scale(.8)}to{transform:translateY(-34px) scale(1.28)}}
@keyframes volcanoBlast{0%{transform:translateX(-50%) translateY(0) scale(.6);height:28px;opacity:.2}40%{transform:translateX(-50%) translateY(-56px) scale(1.25);height:110px;opacity:1}100%{transform:translateX(-50%) translateY(-88px) scale(1.45);height:146px;opacity:0}}
@keyframes volcanoSparkle{0%{transform:translateX(-50%) translateY(0) scale(.8);opacity:0}35%{transform:translateX(-50%) translateY(-28px) scale(1.1);opacity:1}100%{transform:translateX(-50%) translateY(-72px) scale(1.2);opacity:0}}

@media(max-width:700px){
  .math-object{width:58px;height:58px;border-radius:16px;}
  .math-object span{font-size:1.9rem;}
  .trace-board{height:250px;}
  .trace-guide-number{font-size:8.5rem;}
}

/* ==========================================================
   v10.7 — Luma's Library
   ========================================================== */
.rooms-grid-v104{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.library-room-scene{
  padding:0!important;
  background:#2e1e62;
  overflow:hidden;
}
.library-room-card-image{
  width:100%!important;
  height:100%!important;
  min-height:260px;
  object-fit:cover!important;
  object-position:center 46%;
  filter:none!important;
}
.luma-room:hover .library-room-card-image{transform:scale(1.025)!important;}
.library-stars i:nth-child(1){color:#ffd84c}.library-stars i:nth-child(2){font-style:normal}.library-stars i:nth-child(3){font-size:.8rem;color:#fff0a8}

.library-hero-section{
  padding:28px 0 42px;
  background:linear-gradient(180deg,#fff9e8 0%,#f9f4ff 100%);
}
.library-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;
}
.library-intro{text-align:center;margin:0 auto 20px;max-width:850px}
.library-intro h1{margin:.45rem 0}.library-intro p{margin:0 auto;max-width:700px}
.luma-library-scene{
  position:relative;
  width:min(100%,980px);
  margin:0 auto;
  border-radius:34px;
  overflow:hidden;
  background:#3d236e;
  box-shadow:0 24px 52px rgba(69,43,123,.20);
  border:5px solid #fff;
}
.luma-library-scene>img{display:block;width:100%;height:auto}
.library-hotspot{
  appearance:none;border:0;background:transparent;position:absolute;cursor:pointer;touch-action:manipulation;
  border-radius:28px;color:#fff;font:inherit;font-weight:1000;text-shadow:0 2px 3px rgba(35,21,73,.35);
  transition:transform .16s ease,box-shadow .18s ease,background .18s ease;
}
.library-hotspot::after{
  content:'';position:absolute;inset:-6px;border:4px solid rgba(255,231,95,.66);border-radius:28px;
  box-shadow:0 0 0 6px rgba(255,255,255,.10),0 0 30px rgba(255,224,91,.25);
  animation:libraryHotspotPulse 2s ease-in-out infinite;pointer-events:none;
}
.library-hotspot:hover,.library-hotspot:focus-visible{transform:scale(1.025);outline:none;background:rgba(255,255,255,.06)}
.library-hotspot:hover::after,.library-hotspot:focus-visible::after{border-color:#fff58b;box-shadow:0 0 0 7px rgba(255,255,255,.18),0 0 40px rgba(255,228,89,.48)}
.library-hotspot strong{
  position:absolute;left:50%;transform:translateX(-50%);bottom:8px;white-space:nowrap;
  background:rgba(73,47,155,.93);padding:8px 12px;border-radius:999px;box-shadow:0 8px 16px rgba(36,20,84,.25);
}
.hotspot-story{left:6.8%;top:18%;width:30%;height:35%}
.hotspot-letters{left:7.2%;top:53%;width:27%;height:25%}
.hotspot-reading{right:6.5%;top:46%;width:27%;height:29%}
.library-hotspot-pulse{position:absolute;inset:0;border-radius:inherit}
@keyframes libraryHotspotPulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}

.library-room-buttons{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(980px,100%);margin:18px auto 0;
}
.library-room-button{
  appearance:none;border:0;border-radius:24px;padding:15px 16px;cursor:pointer;touch-action:manipulation;text-align:left;
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;box-shadow:0 12px 28px rgba(81,62,139,.10);font:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.library-room-button:hover,.library-room-button:focus-visible{transform:translateY(-4px);box-shadow:0 18px 32px rgba(81,62,139,.16);outline:none}
.library-room-button>span{grid-row:1/3;font-size:1.8rem}.library-room-button strong{color:var(--purple-dark)}.library-room-button small{color:var(--ink-soft);font-weight:800}
.library-room-button.letters{background:#efffd7}.library-room-button.story{background:#e4f5ff}.library-room-button.reading{background:#ede7ff}

.library-panel{
  background:#fff;border-radius:32px;padding:28px;margin-bottom:28px;box-shadow:0 15px 38px rgba(75,61,136,.12);
}
.library-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.letter-learning-card{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:stretch}
.big-letter-display{
  min-height:290px;border-radius:28px;background:linear-gradient(180deg,#fff3a9,#ffe36b);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.52);
}
.big-letter-display strong{font-size:5.8rem;line-height:.95;color:#5c45c7}.big-letter-display span{font-size:1.2rem;font-weight:1000;color:#4d3b99}
.alphabet-grid{display:grid;grid-template-columns:repeat(7,minmax(48px,1fr));gap:9px;align-content:center}
.alphabet-letter,.letter-answer,.reading-answer{
  appearance:none;border:2px solid #ece5ff;background:#fff;border-radius:18px;font:inherit;font-weight:1000;color:var(--purple-dark);cursor:pointer;touch-action:manipulation;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.alphabet-letter{min-height:58px;font-size:1.35rem}
.alphabet-letter:hover,.alphabet-letter:focus-visible,.alphabet-letter.active{background:#fff2a9;transform:translateY(-2px);box-shadow:0 8px 14px rgba(88,67,160,.10);outline:none}
.letter-challenge-card{margin-top:24px;background:#f9f7ff;border-radius:26px;padding:22px;text-align:center}
.letter-challenge-prompt{font-size:1.25rem;font-weight:900;color:var(--purple-dark)}
.letter-challenge-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:16px 0}
.letter-answer{width:82px;height:82px;font-size:2rem;background:#fff7c6}
.letter-answer:active,.reading-answer:active{transform:scale(.96)}

.story-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.story-pick{
  appearance:none;border:2px solid #ece5ff;border-radius:22px;background:#fff;padding:14px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;touch-action:manipulation;font:inherit;color:var(--purple-dark);font-weight:900;
}
.story-pick span{font-size:1.8rem}.story-pick.active{background:#fff2b5;border-color:#ffd85e}.story-pick:hover,.story-pick:focus-visible{outline:none;transform:translateY(-2px)}
.story-reader-card{display:grid;grid-template-columns:180px 1fr;gap:22px;background:linear-gradient(180deg,#f5f1ff,#fff);border-radius:28px;padding:22px}
.story-cover{min-height:240px;border-radius:26px;background:linear-gradient(155deg,#492b91,#724dd2);display:grid;place-items:center;font-size:5rem;box-shadow:inset 0 0 0 5px rgba(255,255,255,.12)}
.story-page{font-size:1.05rem;line-height:1.75;color:var(--ink);background:#fffdf6;border-radius:20px;padding:18px;max-height:340px;overflow:auto;border:1px solid #f0e5cf}
.story-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.story-voice-note{font-size:.8rem;color:var(--ink-soft);margin-bottom:0}

.reading-mode-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.reading-practice-card{background:linear-gradient(180deg,#f7fbff,#f5f1ff);border-radius:28px;padding:24px;text-align:center}
.reading-picture{font-size:6rem;line-height:1.15}.reading-question{font-size:1.4rem;font-weight:1000;color:var(--purple-dark);margin:8px 0 18px}
.reading-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(760px,100%);margin:0 auto}
.reading-answer{min-height:74px;padding:10px;font-size:1.1rem;background:#fff}
.reading-answer:hover,.reading-answer:focus-visible{background:#fff2b5;outline:none}

@media(max-width:1100px){
  .rooms-grid-v104{grid-template-columns:1fr 1fr}.luma-room{grid-column:1/-1}
}
@media(max-width:820px){
  .library-room-buttons{grid-template-columns:1fr}.letter-learning-card{grid-template-columns:1fr}.big-letter-display{min-height:210px}.alphabet-grid{grid-template-columns:repeat(6,minmax(44px,1fr))}.story-picker{grid-template-columns:1fr}.story-reader-card{grid-template-columns:1fr}.story-cover{min-height:150px}.reading-options{grid-template-columns:1fr}
}
@media(max-width:700px){
  .rooms-grid-v104{grid-template-columns:1fr}.luma-room{grid-column:auto}.library-topbar{align-items:flex-start;flex-direction:column}.library-panel{padding:18px}.library-panel-heading{flex-direction:column}.alphabet-grid{grid-template-columns:repeat(5,minmax(42px,1fr))}.alphabet-letter{min-height:52px}.big-letter-display strong{font-size:4.7rem}.luma-library-scene{border-width:3px;border-radius:24px}.library-hotspot strong{font-size:.66rem;padding:6px 8px}.library-hotspot::after{border-width:3px;inset:-3px}.hotspot-story{left:4%;top:17%;width:34%;height:36%}.hotspot-letters{left:5%;top:52%;width:31%;height:28%}.hotspot-reading{right:4%;top:45%;width:31%;height:31%}
}
@media(prefers-reduced-motion:reduce){.library-hotspot::after{animation:none!important}.library-hotspot,.library-room-button,.alphabet-letter,.story-pick,.reading-answer{transition:none!important}}
/* v10.7 open-room card layout: three rooms stay roomy and readable. */
.rooms-grid-v104 .room-door-card{grid-template-columns:1fr}
.rooms-grid-v104 .room-card-copy{padding:24px}


/* =============================
   v10.8 - Loodle Adventure Yard
   ============================= */
.rooms-grid-v108{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.loodle-room .room-card-scene{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;background:linear-gradient(180deg,#e9fff1 0%,#def7ff 58%,#f7ecff 100%);overflow:hidden;}
.loodle-room .room-card-scene img{max-height:150px;position:relative;z-index:2;filter:drop-shadow(0 18px 22px rgba(86,55,143,.18));}
.adventure-float{position:absolute;top:18px;left:28px;font-size:1.9rem;animation:floaty 2.6s ease-in-out infinite;}
.adventure-float.two{top:auto;left:auto;right:24px;bottom:20px;animation-delay:.6s;}

.adventure-yard-page{background:linear-gradient(180deg,#f8f5ff 0%,#eefaf0 60%,#fff9ef 100%);}
.adventure-hero-section{padding:2rem 0 1rem;}
.adventure-intro{text-align:center;max-width:760px;margin:0 auto 1.5rem;}
.adventure-intro h1{margin:.35rem 0 .65rem;}
.adventure-room-shell{background:#fff; border-radius:32px; padding:1.3rem; box-shadow:0 24px 50px rgba(84,56,170,.10); border:1px solid rgba(108,87,190,.10);}
.adventure-helper-bar{display:flex;gap:1rem;align-items:stretch;justify-content:space-between;flex-wrap:wrap;margin-bottom:1rem;}
.adventure-helper-bubble,.adventure-mini-mission{flex:1 1 280px;}
.adventure-quick-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin-bottom:1rem;}
.adventure-tipline{text-align:center;margin-bottom:1rem;}
.adventure-scene{position:relative;min-height:560px;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#aee4ff 0%,#dffff2 48%,#e7ffd5 48%,#c9f0a4 100%);border:6px solid #fff;box-shadow:inset 0 0 0 1px rgba(92,67,160,.10);}
.adventure-background.sky{position:absolute;inset:0 0 46% 0;background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.9), rgba(255,255,255,0) 20%), radial-gradient(circle at 80% 14%, rgba(255,255,255,.86), rgba(255,255,255,0) 18%), linear-gradient(180deg,#bde9ff 0%,#d7fff4 100%);}
.adventure-background.ground{position:absolute;left:-2%;right:-2%;bottom:-10px;height:54%;background:linear-gradient(180deg,#bfe593 0%,#87cb58 100%);border-top-left-radius:55% 18%;border-top-right-radius:55% 18%;}
.adventure-center-stage{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:34%;min-width:250px;text-align:center;z-index:3;}
.zoo-arch{margin:0 auto 1rem;width:min(300px,86%);background:linear-gradient(180deg,#ffe8b7,#ffd175);border-radius:22px 22px 16px 16px;padding:.9rem .8rem;border:6px solid #9b6a36;box-shadow:0 14px 22px rgba(123,89,50,.18);}
.zoo-arch .zoo-top{display:block;font-size:.9rem;letter-spacing:.08em;color:#6a461d;font-weight:800;}
.zoo-arch strong{display:block;font-size:2rem;color:#68431c;}
.adventure-loodle{max-height:210px;filter:drop-shadow(0 20px 20px rgba(74,49,136,.18));}
.adventure-speech{display:inline-block;margin-top:.65rem;background:#fff;border-radius:999px;padding:.6rem 1rem;font-weight:800;color:#5a3bb6;box-shadow:0 10px 18px rgba(107,84,181,.12);}
.yard-hotspot{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.45rem;background:transparent;border:none;cursor:pointer;z-index:4;transition:transform .2s ease, filter .2s ease;}
.yard-hotspot:hover,.yard-hotspot:focus-visible,.yard-hotspot.is-sounding{transform:translateY(-4px) scale(1.02);filter:drop-shadow(0 12px 20px rgba(86,55,143,.18));}
.hotspot-nature{left:4%;top:20%;width:26%;min-width:170px;}
.hotspot-animals{left:34%;top:8%;width:32%;min-width:200px;}
.hotspot-build{right:4%;top:18%;width:24%;min-width:170px;}
.nature-sign{position:relative;background:linear-gradient(180deg,#66d27a,#43a95a);padding:1rem .9rem 1rem 1.1rem;border-radius:18px;border:6px solid #845533;box-shadow:0 16px 22px rgba(68,123,62,.18);color:#fff;text-align:left;width:100%;}
.nature-sign strong{display:block;font-size:1.8rem;line-height:1;}
.nature-sign small{display:block;margin-top:.3rem;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.95);}
.nature-tree{position:absolute;left:-22px;bottom:-18px;width:46px;height:66px;background:linear-gradient(180deg,#805329,#6a421a);border-radius:20px;}
.nature-sign::after,.nature-sign::before{content:'';position:absolute;border-radius:50%;background:linear-gradient(180deg,#96ea79,#64bf52);} 
.nature-sign::before{width:74px;height:52px;left:-16px;top:-30px;}
.nature-sign::after{width:92px;height:58px;left:34px;top:-36px;}
.animal-friends{display:flex;gap:.5rem;font-size:2rem;background:rgba(255,255,255,.88);padding:.45rem .7rem;border-radius:999px;box-shadow:0 10px 18px rgba(102,79,161,.12);}
.build-cabin{position:relative;width:170px;height:145px;background:linear-gradient(180deg,#e9f6ff,#fff);border-radius:24px;padding-top:18px;box-shadow:0 16px 22px rgba(111,87,171,.16);}
.build-cabin .roof{position:absolute;left:28px;top:12px;width:0;height:0;border-left:58px solid transparent;border-right:58px solid transparent;border-bottom:50px solid #9a65e2;}
.build-cabin .body{position:absolute;left:35px;bottom:20px;width:100px;height:70px;background:#cc9a62;border-radius:12px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.05);} 
.build-cabin .door{position:absolute;left:72px;bottom:20px;width:24px;height:36px;background:#7f5230;border-radius:8px 8px 4px 4px;}
.build-cabin .window{position:absolute;left:47px;bottom:48px;width:22px;height:20px;background:#c7efff;border:4px solid #fff;border-radius:6px;}
.scene-label-animals,.scene-label-build{margin-top:.25rem;}
.adventure-decor{position:absolute;z-index:2;pointer-events:none;}
.decor-bush{left:8%;bottom:16%;font-size:2.4rem;}
.decor-flowers{left:38%;bottom:11%;font-size:1.6rem;}
.decor-stump{right:10%;bottom:14%;font-size:2rem;}
.decor-cloud{right:18%;top:9%;font-size:2rem;opacity:.8;}

.adventure-progress-row{margin-top:1rem;}
.adventure-note{margin-top:1rem;}
.adventure-activity-section .yard-panel{background:#fff;border-radius:28px;padding:1.35rem;box-shadow:0 20px 40px rgba(89,63,165,.08);border:1px solid rgba(108,87,190,.08);margin-bottom:1rem;}
.yard-mode-row{margin-bottom:1rem;}
.yard-card{background:linear-gradient(180deg,#fbfbff,#f2fff4);border-radius:24px;padding:1.1rem;box-shadow:inset 0 0 0 1px rgba(107,84,181,.08);}
.yard-big-prompt{font-size:1.3rem;font-weight:800;color:#4f38a6;margin-bottom:1rem;}
.yard-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;margin-bottom:1rem;}
.yard-option-card{border:none;border-radius:20px;padding:1rem .7rem;background:#fff;box-shadow:0 10px 18px rgba(107,84,181,.10);font:inherit;color:#3a2e70;font-weight:700;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;}
.yard-option-card:hover,.yard-option-card:focus-visible{transform:translateY(-3px);box-shadow:0 18px 26px rgba(107,84,181,.16);}
.yard-option-card:disabled{opacity:.78;cursor:default;}
.yard-option-emoji{font-size:2.15rem;line-height:1;}
.animal-option-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.nature-option-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.tool-option-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.pack-option.packed{background:linear-gradient(180deg,#ecfff1,#d8ffe0);box-shadow:inset 0 0 0 3px #7ad889;}
.pack-option.wrong{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 0 0 3px #ff88a9;}
.yard-action-row{display:flex;flex-wrap:wrap;gap:.75rem;}

.build-grid-panels{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;align-items:start;}
.cabin-stage{position:relative;min-height:280px;background:linear-gradient(180deg,#dff7ff 0%,#f0ffe6 54%,#d2f2a5 54%,#b4e181 100%);border-radius:22px;overflow:hidden;margin-bottom:1rem;box-shadow:inset 0 0 0 1px rgba(107,84,181,.08);}
.cabin-stage::after{content:'';position:absolute;left:-8%;right:-8%;bottom:-28px;height:120px;background:linear-gradient(180deg,#b6e07b,#83c75e);border-top-left-radius:55% 60%;border-top-right-radius:55% 60%;}
.cabin-piece{position:absolute;opacity:0;transform:translateY(12px) scale(.96);transition:all .24s ease;z-index:2;}
.cabin-piece.show{opacity:1;transform:translateY(0) scale(1);} 
.piece-floor{left:50%;bottom:42px;transform:translateX(-50%) translateY(12px) scale(.96);width:210px;height:22px;background:#9c6c3e;border-radius:14px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);} 
.piece-floor.show{transform:translateX(-50%) translateY(0) scale(1);} 
.piece-walls{left:50%;bottom:64px;transform:translateX(-50%) translateY(12px) scale(.96);width:176px;height:116px;background:#d9aa72;border-radius:16px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.05);} 
.piece-walls.show{transform:translateX(-50%) translateY(0) scale(1);} 
.piece-roof{left:50%;bottom:166px;transform:translateX(-50%) translateY(12px) scale(.96);width:0;height:0;border-left:108px solid transparent;border-right:108px solid transparent;border-bottom:84px solid #955fe0;filter:drop-shadow(0 6px 0 rgba(90,61,156,.18));}
.piece-roof.show{transform:translateX(-50%) translateY(0) scale(1);} 
.piece-door{left:50%;bottom:64px;transform:translateX(-14px) translateY(12px) scale(.96);width:40px;height:64px;background:#795134;border-radius:12px 12px 6px 6px;box-shadow:inset -4px 0 0 rgba(255,255,255,.14);} 
.piece-door.show{transform:translateX(-14px) translateY(0) scale(1);} 
.piece-window{left:calc(50% - 58px);bottom:112px;transform:translateY(12px) scale(.96);width:38px;height:34px;background:#d8f7ff;border:5px solid #fff;border-radius:10px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.05);} 
.piece-window.show{transform:translateY(0) scale(1);} 
.cabin-buttons{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem;}
.cabin-step-btn.active{box-shadow:0 0 0 3px rgba(108,87,190,.18);}

@media (max-width: 900px){
  .adventure-scene{min-height:720px;}
  .adventure-center-stage{width:72%;top:34%;}
  .hotspot-animals{left:50%;transform:translateX(-50%);top:6%;width:66%;}
  .hotspot-nature{left:4%;top:48%;width:44%;}
  .hotspot-build{right:4%;top:48%;width:42%;}
  .build-grid-panels{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .adventure-room-shell{padding:.9rem;}
  .adventure-scene{min-height:760px;}
  .adventure-center-stage{top:30%;width:86%;}
  .hotspot-animals{width:84%;}
  .hotspot-nature,.hotspot-build{top:54%;width:44%;}
  .zoo-arch strong{font-size:1.55rem;}
  .adventure-loodle{max-height:180px;}
  .yard-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ==========================================================
   v10.9 — Restore wide Explore cards + artwork-based Loodle room
   ========================================================== */

/* Explore page: four rooms remain large, readable cards instead of
   squeezing into four narrow vertical columns. */
.rooms-grid-v109{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:30px!important;
  width:min(1120px,100%);
  margin-inline:auto;
}
.rooms-grid-v109 .room-door-card{
  grid-template-columns:1fr!important;
  min-width:0;
  border-radius:30px;
  overflow:visible!important;
}
.rooms-grid-v109 .room-card-scene{
  min-height:270px;
  border-radius:26px 26px 0 0;
  overflow:hidden;
}
.rooms-grid-v109 .room-card-copy{
  padding:26px 28px 28px;
}
.rooms-grid-v109 .room-card-copy h2{
  font-size:1.55rem;
  line-height:1.1;
}
.rooms-grid-v109 .room-card-copy p{
  min-height:3.9em;
}
.rooms-grid-v109 .room-enter-button{
  margin-top:auto;
}
.loodle-room-card-scene{
  padding:0!important;
  background:#dff6ff!important;
}
.loodle-room-card-image{
  display:block;
  width:100%!important;
  height:270px!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 48%;
  filter:none!important;
  transform:none!important;
}
.loodle-room:hover .loodle-room-card-image,
.loodle-room:focus-visible .loodle-room-card-image{
  transform:scale(1.025)!important;
}

/* Loodle's actual Adventure Yard uses the approved artwork as the room. */
.adventure-photo-scene{
  position:relative;
  width:min(1180px,100%);
  min-height:0!important;
  margin:0 auto;
  aspect-ratio:4 / 3;
  border-radius:30px;
  overflow:hidden;
  background:#8edaff;
  border:5px solid #fff;
  box-shadow:0 24px 52px rgba(69,43,123,.18);
}
.adventure-room-art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  pointer-events:none;
}
.yard-photo-hotspot{
  appearance:none;
  position:absolute;
  z-index:5;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  border-radius:26px;
  color:#fff;
  font:inherit;
  transition:transform .16s ease,filter .18s ease;
}
.yard-photo-hotspot::after{
  content:'';
  position:absolute;
  inset:3px;
  border:4px solid rgba(255,240,113,.15);
  border-radius:24px;
  box-shadow:0 0 0 0 rgba(255,224,91,0), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  pointer-events:none;
}
.yard-photo-hotspot:hover,
.yard-photo-hotspot:focus-visible,
.yard-photo-hotspot.is-sounding{
  transform:scale(1.018);
  filter:brightness(1.04) saturate(1.05);
  outline:none;
}
.yard-photo-hotspot:hover::after,
.yard-photo-hotspot:focus-visible::after,
.yard-photo-hotspot.is-sounding::after{
  border-color:rgba(255,241,116,.94);
  box-shadow:0 0 0 7px rgba(255,255,255,.13),0 0 34px rgba(255,221,70,.55),inset 0 0 30px rgba(255,248,170,.07);
  background:rgba(255,255,255,.025);
}
.photo-hotspot-glow{
  position:absolute;
  inset:4px;
  border-radius:22px;
  box-shadow:0 0 26px rgba(255,231,92,.12);
  animation:yardHotspotGlow 2.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes yardHotspotGlow{
  0%,100%{box-shadow:0 0 18px rgba(255,231,92,.08)}
  50%{box-shadow:0 0 34px rgba(255,231,92,.28)}
}
.photo-hotspot-label,
.photo-hotspot-tap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  pointer-events:none;
  font-weight:1000;
  text-shadow:0 2px 4px rgba(42,24,76,.32);
}
.photo-hotspot-label{
  bottom:12px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(77,50,157,.90);
  box-shadow:0 8px 18px rgba(49,31,104,.23);
  font-size:.9rem;
}
.photo-hotspot-tap{
  top:10px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8af,#ffdf57);
  color:#654bd1;
  text-shadow:none;
  box-shadow:0 7px 14px rgba(98,70,19,.16);
  font-size:.68rem;
  letter-spacing:.035em;
  animation:yardTapBadge 1.9s ease-in-out infinite;
}
@keyframes yardTapBadge{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}

/* Hotspots follow the three large visual zones in the approved art. */
.photo-hotspot-nature{
  left:1.5%;
  top:4%;
  width:32%;
  height:55%;
}
.photo-hotspot-animals{
  left:32.5%;
  top:1.5%;
  width:35%;
  height:51%;
}
.photo-hotspot-build{
  right:1.5%;
  top:2.5%;
  width:32%;
  height:58%;
}
.adventure-room-hint{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:2.2%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.94);
  color:#5f47c6;
  padding:9px 15px;
  border-radius:999px;
  font-weight:1000;
  box-shadow:0 10px 24px rgba(72,48,129,.18);
  pointer-events:none;
}

@media(max-width:900px){
  .rooms-grid-v109{
    grid-template-columns:1fr!important;
    width:min(680px,100%);
  }
  .rooms-grid-v109 .room-card-copy p{min-height:0;}
  .adventure-photo-scene{border-width:4px;border-radius:24px;}
  .photo-hotspot-label{font-size:.78rem;padding:6px 9px;}
  .photo-hotspot-tap{font-size:.6rem;padding:5px 8px;}
  .adventure-room-hint{font-size:.78rem;padding:7px 10px;}
}

@media(max-width:620px){
  .rooms-grid-v109 .room-card-scene{min-height:220px;}
  .loodle-room-card-image{height:220px!important;}
  .adventure-photo-scene{border-radius:20px;border-width:3px;}
  .photo-hotspot-label{bottom:6px;font-size:.68rem;padding:5px 7px;}
  .photo-hotspot-tap{top:5px;font-size:.54rem;padding:4px 6px;}
  .adventure-room-hint{bottom:1.4%;font-size:.66rem;padding:6px 8px;}
}

@media(prefers-reduced-motion:reduce){
  .photo-hotspot-glow,.photo-hotspot-tap{animation:none!important;}
  .yard-photo-hotspot{transition:none!important;}
}


/* v11.0 — Pip's Math Run entry cards */
.pip-math-run-promo{margin-top:22px;display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;text-decoration:none;color:inherit;background:linear-gradient(135deg,#e8fbff,#f4edff 58%,#fff6c8);border:2px solid rgba(109,88,217,.14);border-radius:28px;padding:18px;box-shadow:0 12px 28px rgba(75,61,136,.08);transition:transform .18s ease,box-shadow .18s ease;touch-action:manipulation}.pip-math-run-promo:hover,.pip-math-run-promo:focus-visible{transform:translateY(-3px);box-shadow:0 18px 32px rgba(75,61,136,.14);outline:none}.pip-math-run-promo-art{height:130px;border-radius:22px;background:linear-gradient(180deg,#a8e7ff,#b8eda2);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.pip-math-run-promo-art img{height:120px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(50,52,90,.18))}.pip-math-run-promo h3{margin:.2rem 0 .35rem;color:var(--purple-dark)}.pip-math-run-promo p{margin:0 0 .45rem;color:var(--ink-soft);font-weight:700}.pip-math-run-promo strong{color:#5b46c9}.learning-game-card.pip-run{background:linear-gradient(180deg,#edfbff,#f3efff)}.learning-game-card.pip-run img{object-fit:contain}
@media(max-width:650px){.pip-math-run-promo{grid-template-columns:100px 1fr;padding:14px}.pip-math-run-promo-art{height:110px}.pip-math-run-promo-art img{height:100px}}


/* v11.1 — Pip's Math Run lives directly in Pip's Science Lab */
.pip-room-runner-banner{
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(0,1.35fr);
  gap:20px;
  align-items:center;
  margin:16px 0 20px;
  padding:18px;
  border-radius:28px;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(135deg,#e7f8ff 0%,#eef1ff 48%,#fff5c9 100%);
  border:3px solid rgba(112,91,220,.10);
  box-shadow:0 18px 34px rgba(75,61,136,.11);
  overflow:hidden;
  touch-action:manipulation;
  transition:transform .16s ease,box-shadow .18s ease;
}
.pip-room-runner-banner:hover,.pip-room-runner-banner:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 40px rgba(75,61,136,.16);
  outline:none;
}
.pip-room-runner-art{
  position:relative;
  min-height:190px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#94dcff 0 46%,#a8e37e 46% 60%,#d6b37d 60% 100%);
}
.pip-room-runner-art::after{
  content:'';position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  width:52%;height:140px;background:#87878c;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
}
.pip-room-runner-art img{
  position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%);
  width:112px;max-height:150px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(51,54,100,.18));
}
.runner-mini-road{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);width:52%;height:140px;pointer-events:none;}
.runner-mini-road i{position:absolute;left:50%;width:5px;height:22px;background:#fff8d7;border-radius:999px;transform:translateX(-50%);}
.runner-mini-road i:nth-child(1){bottom:18px}.runner-mini-road i:nth-child(2){bottom:56px}.runner-mini-road i:nth-child(3){bottom:94px}
.runner-mini-gate{
  position:absolute;z-index:4;top:22px;min-width:64px;padding:10px 12px;border-radius:16px;
  text-align:center;font-size:1.35rem;font-weight:1000;color:#fff;box-shadow:0 10px 18px rgba(56,45,111,.17);
}
.runner-mini-gate.left{left:18px;background:#52bf78}.runner-mini-gate.right{right:18px;background:#7a65e8}
.pip-room-runner-copy h2{margin:.35rem 0 .45rem;color:var(--purple-dark);font-size:clamp(1.6rem,3vw,2.25rem)}
.pip-room-runner-copy p{margin:0 0 14px;color:var(--ink-soft);font-weight:750;line-height:1.55}
.pip-runner-enter{display:inline-flex;pointer-events:none}
@media(max-width:760px){
  .pip-room-runner-banner{grid-template-columns:1fr;padding:14px}
  .pip-room-runner-art{min-height:175px}
  .pip-room-runner-copy{text-align:center}
}

/* v11.6 — Get Ready game card */
.learning-game-card.get-ready{border-top:9px solid #ff8bc7}
.learning-game-card.get-ready img{width:100%;max-width:250px;height:178px;object-fit:cover;border-radius:18px}


/* v12.6 additions: Lolliquack + start-button helper hand */
.start-help-hand{position:fixed;left:0;top:0;width:74px;height:74px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:rgba(255,255,255,.96);border:3px solid #ffd65c;border-radius:999px;box-shadow:0 14px 30px rgba(76,60,140,.18);opacity:0;transform:translate3d(-36px,-16px,0) scale(.84) rotate(-10deg);pointer-events:none;z-index:3000;}
.start-help-hand.show{opacity:1;animation:lumaHandGlide 1.6s ease-in-out forwards;}
.start-help-hand.hide{opacity:0;transition:opacity .24s ease;}
.start-help-hand-emoji{filter:drop-shadow(0 3px 3px rgba(0,0,0,.12));}
@keyframes lumaHandGlide{0%{transform:translate3d(-36px,-16px,0) scale(.84) rotate(-10deg);}40%{transform:translate3d(-6px,-6px,0) scale(1.04) rotate(-2deg);}70%{transform:translate3d(10px,-1px,0) scale(1) rotate(2deg);}100%{transform:translate3d(2px,-6px,0) scale(.98) rotate(-2deg);}}
.accent-character-sheet{width:min(100%,520px)!important;max-width:100%;object-fit:contain;border-radius:24px;}
.character-card.lolliquack .tag,.lolliquack-friend strong{color:inherit;}
@media (max-width: 700px){.start-help-hand{width:64px;height:64px;font-size:2.1rem;}.accent-character-sheet{width:100%!important;}}


/* v13.0 character introduction video */
.character-video-open{overflow:hidden;}
.character-video-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;}
.character-video-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.character-video-backdrop{position:absolute;inset:0;background:rgba(38,27,69,.66);backdrop-filter:blur(5px);}
.character-video-dialog{position:relative;z-index:1;width:min(92vw,760px);border-radius:30px;padding:14px;background:#fff;box-shadow:0 28px 80px rgba(30,20,60,.34);transform:translateY(18px) scale(.97);transition:transform .24s ease;}
.character-video-modal.is-open .character-video-dialog{transform:translateY(0) scale(1);}
.character-video-dialog video{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:20px;background:#111;}
.character-video-close{position:absolute;right:-12px;top:-12px;z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:#ffdf59;color:#4f3a88;font:900 2rem/1 Arial,sans-serif;box-shadow:0 8px 18px rgba(42,29,81,.22);cursor:pointer;}
.character-video-close:hover,.character-video-close:focus-visible{transform:scale(1.06);outline:3px solid rgba(102,77,214,.28);}
@media (max-width:600px){.character-video-modal{padding:12px}.character-video-dialog{width:96vw;padding:9px;border-radius:22px}.character-video-dialog video{border-radius:15px}.character-video-close{right:-4px;top:-14px;width:44px;height:44px;font-size:1.8rem}}

/* ===== Bloop's Music Room 3.0: interactive room scene + rack sequencers + touch piano ===== */
.bloop-room-scene-section{padding-top:34px;background:linear-gradient(180deg,#fffafc 0,#f7f2ff 100%)}
.bloop-room-scene-heading{text-align:center;max-width:900px;margin:0 auto 20px}.bloop-room-scene-heading h2{color:var(--purple-dark);font-size:clamp(2.2rem,5vw,3.7rem)}
.bloop-room-scene{position:relative;width:min(1120px,100%);margin:0 auto;border-radius:34px;overflow:hidden;border:5px solid #fff;box-shadow:0 24px 60px rgba(69,50,124,.22);background:#efe9ff}
.bloop-room-scene>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.bloop-scene-hotspot{position:absolute;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,#5b43d4,#8f63ff);color:#fff;font-weight:900;text-decoration:none;border:3px solid rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(64,43,132,.28),0 0 0 8px rgba(255,216,78,.16),0 0 28px rgba(255,216,78,.72);transform:translate(-50%,-50%);transition:transform .15s ease,box-shadow .15s ease;z-index:3;touch-action:manipulation}
.bloop-scene-hotspot:hover,.bloop-scene-hotspot:focus-visible{transform:translate(-50%,-54%) scale(1.05);box-shadow:0 8px 0 rgba(64,43,132,.28),0 0 0 10px rgba(255,216,78,.24),0 0 34px rgba(255,216,78,.95)}
.bloop-scene-hotspot span{font-size:1.35rem}.bloop-beats-hotspot{left:22%;top:31%}.bloop-melody-hotspot{left:79%;top:31%}.bloop-bass-hotspot{left:80%;top:61%}.bloop-keys-hotspot{left:50%;top:87%}
.bloop-scene-tip{position:absolute;left:50%;bottom:2.4%;transform:translateX(-50%);background:#fff;color:#5b43d4;font-weight:900;border-radius:999px;padding:10px 16px;box-shadow:0 8px 20px rgba(50,35,100,.18);white-space:nowrap;z-index:2}

/* A playful hardware-rack shell around every sequencer. */
.sequencer-rack{position:relative;overflow-x:auto;padding:48px 20px 22px;margin:18px 0 4px;border:8px solid #3f3464;border-radius:24px;background:
  radial-gradient(circle at 14px 14px,#d7d0e4 0 3px,#6e6482 4px 6px,transparent 7px),
  radial-gradient(circle at calc(100% - 14px) 14px,#d7d0e4 0 3px,#6e6482 4px 6px,transparent 7px),
  radial-gradient(circle at 14px calc(100% - 14px),#d7d0e4 0 3px,#6e6482 4px 6px,transparent 7px),
  radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#d7d0e4 0 3px,#6e6482 4px 6px,transparent 7px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.025) 2px 4px),
  linear-gradient(145deg,#231d39,#4c416d 52%,#2b2344);
box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),0 14px 28px rgba(48,35,92,.22)}
.sequencer-rack::before{content:attr(data-rack-label);position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:10px;background:#171226;color:#fff6c7;font-weight:900;letter-spacing:.12em;font-size:.76rem;border:2px solid #71659a;box-shadow:inset 0 0 12px rgba(255,255,255,.08)}
.sequencer-rack::after{content:"●  ●  ●";position:absolute;top:12px;right:22px;color:#55e5d5;text-shadow:-34px 0 #ffcf4d,34px 0 #ff6eb6;font-size:.8rem;letter-spacing:7px}
.sequencer-rack .step-grid,.sequencer-rack .note-step-grid{background:linear-gradient(180deg,#fbfaff,#f1edfa);padding:15px;border-radius:16px;box-shadow:inset 0 3px 10px rgba(54,42,92,.12)}
.drum-rack{border-color:#54456f}.melody-rack{border-color:#71436f}.bass-rack{border-color:#376b70}

/* Chord controls for the melody sequencer. */
.chord-builder{margin:18px 0 16px;padding:16px 18px;border:2px solid rgba(91,67,212,.13);border-radius:20px;background:linear-gradient(135deg,#fff7d6,#f2eaff);display:grid;grid-template-columns:minmax(210px,1fr) auto;gap:14px 20px;align-items:center}
.chord-builder-copy{display:grid;gap:3px}.chord-builder-copy strong{color:var(--purple-dark);font-size:1.12rem}.chord-builder-copy span{color:var(--ink-soft);font-size:.9rem}
.chord-choice-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chord-choice{border:2px solid rgba(91,67,212,.16);background:#fff;color:var(--purple-dark);font-weight:900;border-radius:999px;padding:10px 14px;cursor:pointer;touch-action:manipulation}.chord-choice.active{background:linear-gradient(135deg,#8f63ff,#ff6eb6);color:#fff;border-color:transparent;box-shadow:0 4px 10px rgba(91,67,212,.22)}.chord-choice.chord-clear{background:#fff8c9}.chord-status{grid-column:1/-1;font-size:.86rem;font-weight:900;color:#7355c5;min-height:20px}
.chord-badge{position:absolute;left:3px;bottom:3px;z-index:4;pointer-events:none;background:rgba(255,255,255,.92);color:#5b43d4;border-radius:7px;padding:1px 4px;font-size:.58rem;font-weight:900;line-height:1.25;box-shadow:0 1px 3px rgba(44,31,87,.15)}

/* Bigger piano keys for touch screens. */
.full-keyboard-card{scroll-margin-top:calc(var(--studio-sticky-top,118px) + 18px);padding:28px}.wide-piano-wrap{padding:4px 2px 12px;overflow-x:auto;overscroll-behavior-inline:contain}.studio-piano{min-width:1600px;height:205px;gap:4px;margin-top:20px;padding:0 4px}.free-key{font-size:1.04rem;touch-action:none;user-select:none;-webkit-user-select:none}.free-white{height:190px;min-width:86px;border-radius:0 0 14px 14px;padding-bottom:16px}.free-black{height:122px;min-width:58px;flex:.68;margin-left:-11px;margin-right:-11px;border-radius:0 0 11px 11px;padding-bottom:13px}.free-key span{pointer-events:none}

/* MIDI export */
.midi-export{background:linear-gradient(135deg,#22c8b6,#4a85ff);color:#fff}.midi-export-note{font-size:.86rem;color:var(--ink-soft);margin:2px 0 10px}

/* Explore card now uses the full Bloop room artwork. */
.bloop-room .room-card-scene{padding:0;overflow:hidden;background:#f7eaff}.bloop-room-card-image{width:100%;height:100%;object-fit:cover;display:block}

#beat-lab,#melody-lab,#bass-lab,#song-builder{scroll-margin-top:calc(var(--studio-sticky-top,118px) + 16px)}

@media(max-width:800px){
  .bloop-scene-hotspot{padding:9px 11px;font-size:.82rem;border-width:2px}.bloop-scene-hotspot span{font-size:1rem}.bloop-scene-tip{font-size:.78rem;padding:8px 11px}
  .sequencer-rack{padding:45px 12px 16px;border-width:6px}.chord-builder{grid-template-columns:1fr}.chord-choice-row{justify-content:flex-start}.studio-piano{min-width:1460px;height:200px}.free-white{height:185px;min-width:82px}.free-black{height:120px;min-width:56px}
}
@media(max-width:520px){
  .bloop-scene-hotspot strong{display:none}.bloop-scene-hotspot{width:46px;height:46px;padding:0;justify-content:center}.bloop-scene-hotspot span{font-size:1.25rem}.bloop-scene-tip{bottom:1.4%;max-width:92%;white-space:normal;text-align:center}
  .sequencer-rack::before{font-size:.65rem;padding:6px 10px}.sequencer-rack::after{display:none}
}


/* ===== v13.8.1: fit full keyboard to the screen without side-scrolling ===== */
.full-keyboard-card{overflow:hidden}
.wide-piano-wrap{width:100%;max-width:100%;overflow:hidden;padding:4px 0 12px}
.wide-piano-wrap .studio-piano{transform-origin:top left;will-change:transform}
@media (max-width:800px){
  .full-keyboard-card{padding:22px}
}


/* v13.17 - automatic YouTube Watch feed status */
.youtube-sync-status{margin:.6rem 0 0;font-weight:800;color:var(--purple-dark);}
.youtube-sync-status[hidden]{display:none!important;}