:root{--navy:#18356d;--blue:#2467d9;--teal:#00a6b2;--purple:#6541c8;--pink:#ee3f83;--orange:#ff9f1c;--green:#38a852;--ink:#24334a;--muted:#66758b;--line:#dfe8f3;--white:#fff;--shadow:0 15px 35px rgba(24,53,109,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(#edf9ff,#fff7ee);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid #dbe7f1;backdrop-filter:blur(12px)}.top-inner{width:min(1450px,calc(100% - 26px));min-height:84px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand img{width:125px;height:66px;object-fit:contain}.brand strong{display:block;color:var(--purple);font-size:1.35rem}.brand small{display:block;color:var(--muted);font-weight:800}.top-actions{display:flex;gap:10px;align-items:center}.coin,.profile{background:#fff;border:2px solid #e6eafa;border-radius:999px;padding:10px 15px;font-weight:900;color:var(--navy);box-shadow:0 5px 16px rgba(25,53,109,.08)}.profile{background:#f2eaff;color:var(--purple)}main{width:min(1450px,calc(100% - 26px));margin:20px auto 70px}.zone-hero{min-height:390px;border-radius:34px;overflow:hidden;position:relative;background:#dff6ff;box-shadow:var(--shadow);display:grid;grid-template-columns:1.05fr .95fr}.hero-copy{padding:45px 48px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(125deg,rgba(255,255,255,.97),rgba(255,255,255,.83))}.eyebrow{align-self:flex-start;background:#fff2a8;color:#6b5200;border:2px solid #ffd94d;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:1000;letter-spacing:.08em}.zone-hero h1{font-size:clamp(2.8rem,6vw,5.5rem);line-height:.92;margin:16px 0;color:var(--purple);letter-spacing:-.055em}.zone-hero p{max-width:650px;font-size:1.08rem;line-height:1.6;color:#53657b;margin:0 0 20px}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}.hero-art{min-height:390px;background:url('assets/layouts/home.png') center/cover no-repeat;position:relative}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.45),transparent 32%)}.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:30px 4px 14px}.section-title h2{margin:0;color:var(--navy);font-size:1.75rem}.section-title p{margin:4px 0 0;color:var(--muted)}.filters{display:grid;grid-template-columns:1fr 270px auto;gap:10px;background:#fff;padding:14px;border:1px solid var(--line);border-radius:19px;box-shadow:0 8px 24px rgba(24,53,109,.08)}.filters input,.filters select{width:100%;padding:14px 15px;border:2px solid #e2e9f3;border-radius:13px;background:#fff}.count{color:var(--muted);font-weight:900;margin:12px 4px}.category-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:18px 0 25px}.cat-tile{border:0;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(24,53,109,.1);padding:0;text-align:left;transition:.2s}.cat-tile:hover{transform:translateY(-4px)}.cat-tile img{width:100%;height:100px;object-fit:cover;display:block}.cat-tile span{display:block;padding:10px 12px;color:var(--navy);font-weight:1000}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.tool{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 10px 28px rgba(24,53,109,.1);display:flex;flex-direction:column;min-height:345px;transition:.22s}.tool:hover{transform:translateY(-6px);box-shadow:0 19px 42px rgba(24,53,109,.17)}.tool-image{height:155px;position:relative;overflow:hidden;background:#eef7ff}.tool-image img{width:100%;height:100%;object-fit:cover;transition:.3s}.tool:hover .tool-image img{transform:scale(1.04)}.tool-icon{position:absolute;left:14px;bottom:12px;width:55px;height:55px;border-radius:17px;background:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 6px 18px rgba(0,0,0,.17)}.tool-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}.tool h2{font-size:1.18rem;color:var(--navy);margin:10px 0 7px}.tool p{color:var(--muted);line-height:1.48;flex:1;margin:0 0 15px}.pill{display:inline-block;align-self:flex-start;border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:1000;background:#edf0ff;color:var(--purple)}.btn{border:0;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border-radius:13px;padding:12px 15px;font-weight:1000;box-shadow:0 7px 15px rgba(36,103,217,.18)}.btn.alt{background:#fff;color:var(--navy);border:2px solid var(--line);box-shadow:none}.btn.danger{background:#fff0f0;color:#8e1f26;border:1px solid #e3b5b8}.back{margin-bottom:14px}.hero.kids{min-height:300px;border-radius:30px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:#fff;box-shadow:var(--shadow);margin-bottom:18px}.activity-hero-copy{padding:38px;display:flex;flex-direction:column;justify-content:center}.activity-hero-copy h1{color:var(--purple);font-size:clamp(2.3rem,5vw,4.3rem);line-height:.98;margin:10px 0}.activity-hero-copy p{color:var(--muted);font-size:1.08rem;line-height:1.55}.activity-hero-image img{width:100%;height:100%;min-height:300px;object-fit:cover}.activity,.card,.editor,.preview{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 9px 25px rgba(18,59,93,.08)}.activity h2,.card h3{color:var(--navy)}.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.choice{border:2px solid var(--line);background:#fff;padding:17px;border-radius:15px;color:var(--navy);font-weight:900}.choice.selected{border-color:var(--teal);background:#e9faf9}.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field.full,.form .full{grid-column:1/-1}.field label{display:block;font-size:.8rem;font-weight:900;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}.field textarea{min-height:90px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.steps{display:grid;gap:9px}.step{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px}.step.done{opacity:.45;text-decoration:line-through}.step .symbol{font-size:30px}.step button{margin-left:auto}.builder-layout{display:grid;grid-template-columns:370px 1fr;gap:14px}.edit-step{display:grid;grid-template-columns:48px 1fr auto;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px;margin:7px 0}.edit-step .symbol{font-size:30px;text-align:center}.edit-step input,.edit-step textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:9px}.sheet{width:720px;min-height:850px;margin:auto;background:#fff;border:7px solid var(--teal);border-radius:20px;padding:20px}.sheet.story{border-color:var(--purple)}.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.sheet-card{border:2px solid var(--line);border-radius:15px;text-align:center;padding:14px}.sheet-card .symbol{font-size:55px}.canvas{width:100%;height:360px;border:2px solid var(--line);border-radius:15px;background:#fff;touch-action:none}.sticker-area{min-height:360px;border:2px dashed var(--line);border-radius:15px;position:relative;background:linear-gradient(#dff5ff 0 55%,#dff2d4 55%)}.sticker{position:absolute;font-size:52px;cursor:move;user-select:none}.timer{font-size:72px;text-align:center;font-weight:bold;margin:25px}.progress{height:13px;background:#e5edf1;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--purple))}.footer{width:min(1450px,calc(100% - 26px));margin:0 auto 25px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px 20px;display:flex;align-items:center;justify-content:center;gap:15px;color:var(--muted);font-weight:800}.footer img{width:90px;height:45px;object-fit:contain}@media(max-width:1150px){.tool-grid{grid-template-columns:repeat(3,1fr)}.category-strip{grid-template-columns:repeat(3,1fr)}.builder-layout{grid-template-columns:1fr}}@media(max-width:850px){.zone-hero,.hero.kids{grid-template-columns:1fr}.hero-art{min-height:260px}.tool-grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.filters button{grid-column:1/-1}.sheet{width:100%}.activity-hero-image{order:-1}.activity-hero-image img{min-height:220px;height:220px}}@media(max-width:580px){.brand img{width:90px}.brand small,.top-actions .profile{display:none}.hero-copy{padding:32px 23px}.zone-hero h1{font-size:3.2rem}.tool-grid,.choice-grid,.form,.sheet-grid,.filters,.category-strip{grid-template-columns:1fr}.tool-image{height:180px}.footer{flex-direction:column;text-align:center}}


/* ===== Compass Kids Zone V2 — premium rainbow game hub ===== */
body{background:
 radial-gradient(circle at 8% 8%,rgba(74,214,255,.20),transparent 26%),
 radial-gradient(circle at 92% 12%,rgba(255,89,165,.16),transparent 24%),
 linear-gradient(180deg,#effbff 0%,#fff7fd 48%,#fffaf0 100%);background-attachment:fixed}
.top{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#00b8d9,#7357d9,#f23f83,#ff9d00,#65bf36) 1}
.brand strong{background:linear-gradient(90deg,#1356a8,#7143c4,#e93c87);-webkit-background-clip:text;color:transparent}
.premium-hero{min-height:520px;border:5px solid transparent;background:
 linear-gradient(#fff,#fff) padding-box,
 linear-gradient(120deg,#13b9dc,#7049d3,#f03d88,#ff9d16,#62bd3b) border-box;box-shadow:0 24px 65px rgba(55,45,140,.24)}
.premium-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.8) 34%,transparent 49%);transform:translateX(-120%);animation:heroShine 7s infinite}
@keyframes heroShine{0%,65%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.hero-company-logo{width:min(330px,85%);height:130px;object-fit:contain;object-position:left center;margin:-10px 0 2px;filter:drop-shadow(0 8px 12px rgba(17,96,118,.14))}
.premium-hero .hero-copy{padding:32px 48px;position:relative;z-index:2}
.premium-hero .hero-art{min-height:520px;background-image:linear-gradient(90deg,rgba(255,255,255,.35),transparent 32%),url('assets/layouts/home.png')}
.hero-glow{position:absolute;inset:10% 12%;border-radius:50%;box-shadow:0 0 80px 40px rgba(255,255,255,.48);animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow{50%{transform:scale(1.08);opacity:.65}}
.floating-spark{position:absolute;font-size:42px;color:#fff;text-shadow:0 0 18px #ffcf31;animation:floatSpark 3s ease-in-out infinite}
.floating-spark.s1{left:14%;top:18%}.floating-spark.s2{right:13%;top:24%;animation-delay:.7s}.floating-spark.s3{left:35%;bottom:16%;animation-delay:1.3s}
@keyframes floatSpark{50%{transform:translateY(-14px) rotate(12deg)}}
.rainbow-btn,.play-btn{background:linear-gradient(100deg,#08aeca,#266de1,#7245ce,#ec3f88,#ff9c18);background-size:220% 100%;animation:rainbowMove 5s linear infinite}
@keyframes rainbowMove{to{background-position:220% 0}}
.hero-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.hero-stats span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid #e5dfff;font-weight:900;color:#513399;box-shadow:0 5px 16px rgba(83,50,150,.1)}
.dashboard-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin:22px 0}
.dash-card{min-height:145px;border-radius:24px;padding:19px;display:flex;gap:15px;align-items:center;position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(32,60,119,.12);border:1px solid rgba(255,255,255,.8)}
.dash-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.22);right:-30px;top:-35px}
.dash-card.daily{background:linear-gradient(135deg,#fff0b5,#ffd354)}.dash-card.progress-card{background:linear-gradient(135deg,#dff7ff,#87ddf0)}.dash-card.reward-card{background:linear-gradient(135deg,#f0e7ff,#c8a9ff)}
.dash-icon{font-size:48px;filter:drop-shadow(0 5px 4px rgba(0,0,0,.12))}.dash-card small{font-weight:1000;letter-spacing:.08em;color:#4d4b78}.dash-card h3{margin:4px 0;color:#17356e}.dash-card p{margin:3px 0;color:#536179}.mini-play{margin-left:auto;border:0;border-radius:999px;padding:11px 17px;background:#fff;color:#17356e;font-weight:1000;box-shadow:0 8px 20px rgba(46,51,100,.13);z-index:2}.mini-progress{height:12px;background:rgba(255,255,255,.65);border-radius:999px;overflow:hidden;margin-top:10px;min-width:180px}.mini-progress span{display:block;height:100%;background:linear-gradient(90deg,#00a5b6,#6644c8,#f03c84);border-radius:inherit}
.featured-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.featured-strip .tool{min-height:370px}
.premium-categories{grid-template-columns:repeat(4,1fr)}
.premium-categories .cat-tile{position:relative;min-height:180px;border:4px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#1ec8e5,#7550d3,#f24189,#ffab1d) border-box}
.premium-categories .cat-tile img{height:112px}.premium-categories .cat-tile strong{display:block;padding:8px 12px 0;color:#17356e;font-size:1.06rem}.premium-categories .cat-tile small{display:block;padding:2px 12px 12px;color:#68758b;font-weight:800}.cat-number{position:absolute!important;left:10px;top:10px;width:32px;height:32px;border-radius:50%!important;background:#fff!important;color:#5536a3!important;padding:0!important;display:grid!important;place-items:center;font-weight:1000;box-shadow:0 5px 15px rgba(0,0,0,.18)}
.rainbow-card{position:relative;border:4px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#16c5df,#356ee0,#7545ce,#ed4088,#ff9d17,#62bd3d) border-box;overflow:visible}
.rainbow-card:before{content:"";position:absolute;inset:2px;border-radius:18px;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.65),transparent 32%);z-index:2}
.rainbow-card:hover{transform:translateY(-9px) scale(1.015);box-shadow:0 24px 50px rgba(73,47,152,.24)}
.card-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.65) 45%,transparent 61%);transform:translateX(-125%);transition:.7s}.rainbow-card:hover .card-shine{transform:translateX(125%)}
.new-ribbon{position:absolute;z-index:5;left:-7px;top:15px;background:linear-gradient(90deg,#ff9d16,#f13e83);color:#fff;font-size:.72rem;font-weight:1000;padding:7px 14px 7px 12px;border-radius:0 10px 10px 0;box-shadow:0 5px 13px rgba(171,42,94,.25)}
.favourite{position:absolute;z-index:6;right:12px;top:12px;width:39px;height:39px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#c7cbd6;font-size:20px;box-shadow:0 5px 15px rgba(0,0,0,.14)}.favourite.liked{color:#ffb000;transform:scale(1.12)}
.game-meta{display:flex;gap:6px;flex-wrap:wrap}.game-meta span{font-size:.69rem;font-weight:900;background:#f2f5fb;color:#59677d;padding:5px 7px;border-radius:999px}
.card-bottom{display:flex;align-items:center;justify-content:space-between;margin:11px 0 10px}.difficulty{font-size:.72rem;font-weight:1000;color:#fff;background:linear-gradient(90deg,#00aebc,#3e74dd);padding:6px 9px;border-radius:999px}.card-stars{font-size:.83rem;color:#ffb000;letter-spacing:1px}.play-btn{width:100%;font-size:.98rem}.play-btn span{margin-right:5px}
.game-stage{text-align:center;min-height:420px;background:linear-gradient(180deg,#fff,#f9fbff)}
.game-instruction{color:#68758a;font-weight:800}.center{justify-content:center}
.light-grid{width:min(560px,100%);margin:25px auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}.light-pad{height:135px;border:8px solid #fff;border-radius:31px;box-shadow:0 12px 25px rgba(35,44,93,.16);opacity:.55;transition:.16s}.lp0{background:#ec3e86}.lp1{background:#25bddd}.lp2{background:#7650d4}.lp3{background:#ffc129}.light-pad.lit{opacity:1;transform:scale(1.07);box-shadow:0 0 35px 15px currentColor}
.touch-arena{width:min(760px,100%);height:390px;margin:18px auto;position:relative;border-radius:28px;overflow:hidden;background:radial-gradient(circle,#173c80 0,#111d52 75%);border:7px solid #fff;box-shadow:0 15px 35px rgba(16,30,81,.28)}.moving-target{position:absolute;left:8%;top:8%;width:82px;height:82px;border:0;border-radius:50%;font-size:45px;background:radial-gradient(circle,#fff 0,#fff5a9 35%,#ffb20d 70%);box-shadow:0 0 35px 16px rgba(255,211,65,.72);transition:.25s}.moving-target.pulse{transform:scale(1.18)}.score-board{font-size:1.35rem;font-weight:1000;color:#5732a1;margin:10px}
.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px auto;max-width:760px}.sound-pad{min-height:145px;border:5px solid #fff;border-radius:25px;color:#fff;box-shadow:0 12px 25px rgba(44,42,100,.18);font-weight:1000;background:linear-gradient(145deg,#17bcd4,#5853d6)}.sound-pad:nth-child(2n){background:linear-gradient(145deg,#f0448a,#ff9824)}.sound-pad:nth-child(3n){background:linear-gradient(145deg,#6cc33c,#16b6b7)}.sound-pad span{display:block;font-size:52px}.sound-pad.playing{transform:scale(.94);filter:brightness(1.25)}
.pattern-display,.sequence-track{max-width:760px;min-height:85px;margin:20px auto;padding:22px;border-radius:20px;background:#f0ecff;border:3px dashed #8b6add;color:#4d3397;font-size:1.5rem;font-weight:1000;display:grid;place-items:center}.pattern-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:20px}.pattern-buttons button{width:90px;height:90px;border:0;border-radius:24px;background:#fff;font-size:46px;box-shadow:0 10px 25px rgba(35,49,92,.16)}
.sequence-pool{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px}.sequence-tile{width:145px;min-height:130px;border:4px solid #fff;border-radius:23px;background:linear-gradient(160deg,#eafaff,#fff0fa);box-shadow:0 10px 24px rgba(43,57,107,.14);color:#17356e}.sequence-tile span{display:block;font-size:47px}.sequence-tile strong{font-size:.9rem}.sequence-tile.chosen{opacity:.45;transform:scale(.94)}
.memory-shelf{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;max-width:720px;margin:25px auto;padding:26px;border-radius:22px;background:linear-gradient(#fff7d0,#ffd983);border-bottom:12px solid #ad6a25}.memory-shelf span{font-size:72px}.missing-choices{max-width:600px;margin:auto}.match-picture{font-size:120px;margin:20px}.word-choice{font-size:1.15rem}
.game-message,.celebration{max-width:650px;margin:18px auto;padding:19px;border-radius:20px;font-weight:1000}.game-message.good{background:#dcf8e2;color:#216c36}.game-message.try{background:#fff0d4;color:#8c5900}.celebration{background:linear-gradient(135deg,#fff2a9,#ffe2fa,#dffaff);border:4px solid #fff;box-shadow:0 14px 32px rgba(76,52,139,.16)}.celebration-stars{font-size:45px}
.maze-board{height:430px;max-width:740px;margin:20px auto;position:relative;border:9px solid #1d4f9b;border-radius:25px;background:linear-gradient(135deg,#e2fbff,#fff1cf);overflow:hidden}.maze-board #mazePlayer{position:absolute;left:8%;top:8%;font-size:46px;transition:.18s}.maze-goal{position:absolute;right:5%;bottom:5%;font-size:58px}.maze-wall{position:absolute;background:#5c43a8;border-radius:12px}.maze-wall.w1{left:25%;top:0;width:25px;height:70%}.maze-wall.w2{left:50%;bottom:0;width:25px;height:70%}.maze-wall.w3{left:25%;top:55%;width:45%;height:25px}.maze-controls button{width:65px;height:55px;margin:3px;border:0;border-radius:15px;background:#2467d9;color:#fff;font-size:25px;font-weight:1000}
@media(max-width:1200px){.featured-strip{grid-template-columns:repeat(3,1fr)}.dashboard-row{grid-template-columns:1fr 1fr}.reward-card{grid-column:1/-1}}
@media(max-width:850px){.premium-categories{grid-template-columns:repeat(2,1fr)}.featured-strip{grid-template-columns:repeat(2,1fr)}.dashboard-row{grid-template-columns:1fr}.reward-card{grid-column:auto}.premium-hero .hero-copy{padding:28px 25px}.hero-company-logo{height:105px}.sound-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.featured-strip,.premium-categories,.sound-grid{grid-template-columns:1fr}.dashboard-row{grid-template-columns:1fr}.hero-company-logo{height:90px;width:100%}.light-pad{height:105px}.touch-arena{height:330px}.match-picture{font-size:90px}.memory-shelf span{font-size:55px}}


/* ===== Matched visual update: no unrelated artwork on game cards ===== */
.rainbow-card .tool-image{display:none!important}
.tool-visual{
 position:relative;
 height:185px;
 overflow:hidden;
 border-radius:18px 18px 0 0;
 display:grid;
 place-items:center;
 isolation:isolate;
 background:
 radial-gradient(circle at 50% 45%,rgba(255,255,255,.98) 0 10%,rgba(255,255,255,.32) 11% 27%,transparent 28%),
 linear-gradient(145deg,#20c8df 0%,#3470e2 27%,#7449d0 55%,#ef4489 78%,#ffad24 100%);
}
.tool-visual:before{
 content:"";
 position:absolute;
 inset:0;
 background:
 radial-gradient(circle at 14% 22%,rgba(255,255,255,.9) 0 2px,transparent 3px),
 radial-gradient(circle at 84% 18%,rgba(255,255,255,.9) 0 3px,transparent 4px),
 radial-gradient(circle at 76% 72%,rgba(255,255,255,.7) 0 2px,transparent 3px),
 radial-gradient(circle at 22% 78%,rgba(255,255,255,.8) 0 2px,transparent 3px);
 opacity:.95;
}
.tool-icon-large{
 position:relative;
 z-index:4;
 width:104px;
 height:104px;
 display:grid;
 place-items:center;
 border-radius:32px;
 background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.72));
 border:4px solid rgba(255,255,255,.9);
 box-shadow:0 16px 30px rgba(28,29,87,.28),inset 0 2px 0 rgba(255,255,255,1);
 font-size:58px;
 filter:drop-shadow(0 7px 6px rgba(0,0,0,.16));
 transition:transform .3s ease;
}
.rainbow-card:hover .tool-icon-large{transform:translateY(-5px) scale(1.08) rotate(-2deg)}
.visual-orbit{
 position:absolute;
 z-index:2;
 border:3px solid rgba(255,255,255,.55);
 border-radius:50%;
 animation:visualSpin 10s linear infinite;
}
.orbit-one{width:145px;height:145px}
.orbit-two{width:185px;height:84px;animation-direction:reverse;animation-duration:8s}
.visual-spark{position:absolute;z-index:3;color:#fff;text-shadow:0 0 15px rgba(255,255,255,.95);animation:cardSpark 2.8s ease-in-out infinite}
.vs1{left:15%;top:24%;font-size:24px}.vs2{right:14%;top:20%;font-size:30px;animation-delay:.7s}.vs3{right:18%;bottom:16%;font-size:19px;animation-delay:1.25s}
@keyframes visualSpin{to{transform:rotate(360deg)}}
@keyframes cardSpark{50%{transform:translateY(-9px) scale(1.18);opacity:.62}}

/* Category-specific colour atmospheres, while preserving the same polished visual language */
.theme-attention .tool-visual{background:linear-gradient(145deg,#0fc8dd,#316fe0,#6f49ce)}
.theme-memory .tool-visual{background:linear-gradient(145deg,#613bd0,#a345d2,#ef4a98)}
.theme-matching .tool-visual{background:linear-gradient(145deg,#16b8a4,#3ac75e,#d2d83d)}
.theme-life-cycles .tool-visual{background:linear-gradient(145deg,#2db56d,#8fca39,#ffd64a)}
.theme-sounds .tool-visual{background:linear-gradient(145deg,#5d45d4,#d843c5,#ff6990)}
.theme-sequencing .tool-visual{background:linear-gradient(145deg,#ff9d19,#f15f3c,#e53c87)}
.theme-emotions .tool-visual{background:linear-gradient(145deg,#ffbd2f,#ff7c54,#ef4a91)}
.theme-communication .tool-visual{background:linear-gradient(145deg,#10b9cd,#2c80dd,#5a59d0)}
.theme-creative .tool-visual{background:linear-gradient(145deg,#783ed1,#ef3fa0,#ff9a2c)}
.theme-arcade .tool-visual,.theme-games .tool-visual{background:linear-gradient(145deg,#1452b6,#6638c9,#f03f85,#ff9c17)}
.theme-life-skills .tool-visual,.theme-learning .tool-visual{background:linear-gradient(145deg,#16aebb,#45b95f,#ffc531)}
.theme-calm .tool-visual{background:linear-gradient(145deg,#3bbbd5,#6688df,#8568d6)}

.featured-strip .tool-visual{height:170px}
.rainbow-card .tool-body{padding-top:17px}
@media(max-width:580px){.tool-visual{height:165px}.tool-icon-large{width:92px;height:92px;font-size:51px}}


/* ===== Original Kids Zone structure + new rainbow cards + no images ===== */
img{display:none!important}
[style*="background-image"],.hero-art,.cat-tile img,.tool-image{background-image:none!important;display:none!important}

body{
 background:
 radial-gradient(circle at 10% 8%,rgba(26,190,220,.13),transparent 25%),
 radial-gradient(circle at 90% 10%,rgba(236,64,139,.11),transparent 24%),
 linear-gradient(180deg,#f2fcff 0%,#fff8fd 55%,#fffdf5 100%);
}

.original-zone-hero{
 min-height:330px;
 display:grid;
 grid-template-columns:1.35fr .65fr;
 align-items:center;
 position:relative;
 overflow:hidden;
 padding:38px 44px;
 border:5px solid transparent;
 border-radius:28px;
 background:
   linear-gradient(135deg,#ffffff,#f8f5ff) padding-box,
   linear-gradient(110deg,#16bed9,#3475e1,#7447d0,#ec4389,#ffac23,#6ec540) border-box;
 box-shadow:0 22px 54px rgba(65,47,145,.18);
}
.original-zone-hero:before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.9) 40%,transparent 58%);
 transform:translateX(-120%);
 animation:originalHeroShine 7s infinite;
}
@keyframes originalHeroShine{
 0%,66%{transform:translateX(-120%)}
 88%,100%{transform:translateX(120%)}
}
.original-hero-content{position:relative;z-index:2;max-width:720px}
.original-hero-content h1{
 margin:8px 0 12px;
 font-size:clamp(2.2rem,5vw,4.6rem);
 line-height:.98;
 background:linear-gradient(90deg,#1359a9,#7043c8,#e93e88,#ff981a);
 -webkit-background-clip:text;
 color:transparent;
}
.original-hero-content p{max-width:680px;font-size:1.08rem;color:#58677e;line-height:1.65}
.original-hero-effects{position:relative;min-height:230px}
.hero-symbol{
 position:absolute;
 display:grid;
 place-items:center;
 border-radius:50%;
 color:#fff;
 font-weight:1000;
 box-shadow:0 15px 34px rgba(58,43,128,.22),inset 0 3px 0 rgba(255,255,255,.45);
 animation:heroSymbolFloat 3.5s ease-in-out infinite;
}
.hs1{width:108px;height:108px;left:26%;top:20%;font-size:48px;background:linear-gradient(145deg,#19bfd8,#4271df)}
.hs2{width:75px;height:75px;right:8%;top:6%;font-size:35px;background:linear-gradient(145deg,#7247d0,#ef408a);animation-delay:.6s}
.hs3{width:56px;height:56px;left:8%;bottom:4%;background:linear-gradient(145deg,#ff9b1b,#ffc733);animation-delay:1.1s}
.hs4{width:82px;height:82px;right:18%;bottom:5%;font-size:34px;background:linear-gradient(145deg,#42bb68,#1bb8bb);animation-delay:1.6s}
.hs5{width:45px;height:45px;left:2%;top:4%;background:linear-gradient(145deg,#f4438f,#9b49d1);animation-delay:2s}
@keyframes heroSymbolFloat{50%{transform:translateY(-14px) rotate(8deg)}}

.simple-summary{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:14px;
 margin:20px 0 28px;
}
.simple-summary div{
 padding:18px;
 border-radius:20px;
 background:rgba(255,255,255,.9);
 border:1px solid #e8e6f4;
 box-shadow:0 10px 24px rgba(43,55,111,.09);
 text-align:center;
}
.simple-summary strong{
 display:block;
 font-size:1.9rem;
 background:linear-gradient(90deg,#1aa9cc,#7045cb,#ed4188);
 -webkit-background-clip:text;
 color:transparent;
}
.simple-summary span{font-weight:900;color:#637086}

/* Keep the polished card design but use only icons, shapes and light effects. */
.tool-grid{align-items:stretch}
.rainbow-card{
 min-height:430px;
 display:flex;
 flex-direction:column;
 border:4px solid transparent;
 background:
   linear-gradient(#fff,#fff) padding-box,
   linear-gradient(145deg,#16c4dc,#3872df,#7548cf,#ed4389,#ff9e18,#63bf3d) border-box;
 box-shadow:0 13px 30px rgba(53,47,123,.13);
}
.rainbow-card:hover{
 transform:translateY(-8px);
 box-shadow:0 24px 48px rgba(67,48,145,.22);
}
.tool-visual{
 height:170px;
 position:relative;
 overflow:hidden;
 display:grid;
 place-items:center;
 border-radius:18px 18px 0 0;
 background:
   radial-gradient(circle at 50% 44%,rgba(255,255,255,.95) 0 11%,rgba(255,255,255,.27) 12% 29%,transparent 30%),
   linear-gradient(145deg,#20c7de,#3a70df 32%,#7447cf 58%,#ed438a 80%,#ffa51e);
}
.tool-visual:after{
 content:"";
 position:absolute;
 inset:0;
 background:
  radial-gradient(circle at 16% 22%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 84% 18%,#fff 0 3px,transparent 4px),
  radial-gradient(circle at 78% 76%,rgba(255,255,255,.85) 0 2px,transparent 3px),
  radial-gradient(circle at 20% 78%,rgba(255,255,255,.85) 0 2px,transparent 3px);
}
.tool-icon-large{
 width:102px;
 height:102px;
 font-size:56px;
 position:relative;
 z-index:4;
 display:grid;
 place-items:center;
 border-radius:30px;
 background:linear-gradient(145deg,#fff,rgba(255,255,255,.72));
 border:4px solid rgba(255,255,255,.95);
 box-shadow:0 15px 30px rgba(34,28,94,.26),inset 0 2px 0 #fff;
}
.visual-orbit{display:block!important}
.tool-body{flex:1;display:flex;flex-direction:column}
.tool-body p{flex:1}
.play-btn{margin-top:auto}

@media(max-width:820px){
 .original-zone-hero{grid-template-columns:1fr;padding:30px 24px}
 .original-hero-effects{min-height:165px}
 .simple-summary{grid-template-columns:1fr}
}
@media(max-width:560px){
 .original-zone-hero{padding:25px 18px}
 .original-hero-content h1{font-size:2.45rem}
 .tool-visual{height:155px}
 .tool-icon-large{width:88px;height:88px;font-size:49px}
}


/* ===== V3 rainbow logo hero and matched card visuals ===== */
.original-zone-hero{
 background:
  linear-gradient(118deg,rgba(255,255,255,.96),rgba(244,250,255,.90)) padding-box,
  linear-gradient(105deg,#08b9d0,#197dd7,#7448cf,#ec3f88,#ff9d18,#6ac33e) border-box;
}
.original-zone-hero:after{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
  radial-gradient(circle at 84% 15%,rgba(255,64,141,.20),transparent 26%),
  radial-gradient(circle at 78% 86%,rgba(255,169,28,.23),transparent 28%),
  radial-gradient(circle at 52% 20%,rgba(28,191,217,.18),transparent 25%),
  linear-gradient(110deg,transparent 35%,rgba(115,67,204,.10),rgba(255,255,255,.08));
}
.hero-main-logo{
 display:block!important;
 width:min(390px,84%);
 height:148px;
 object-fit:contain;
 object-position:left center;
 margin:-18px 0 -5px;
 mix-blend-mode:multiply;
 filter:drop-shadow(0 10px 15px rgba(29,89,123,.13));
 position:relative;
 z-index:3;
}
.original-hero-effects{z-index:2}
.hero-watermark-logo{
 display:block!important;
 position:absolute;
 width:390px;
 height:390px;
 right:-30px;
 top:-75px;
 object-fit:contain;
 opacity:.25;
 mix-blend-mode:multiply;
 filter:saturate(1.35) contrast(1.08) drop-shadow(0 18px 25px rgba(58,38,132,.16));
 animation:watermarkFloat 5s ease-in-out infinite;
}
@keyframes watermarkFloat{50%{transform:translateY(-10px) rotate(2deg)}}
.hero-symbol{z-index:3}
.hs1{left:10%;top:22%}.hs2{right:4%;top:8%}.hs3{left:5%;bottom:0}.hs4{right:5%;bottom:0}.hs5{left:36%;top:0}

.tool-visual{
 min-height:185px;
 isolation:isolate;
 background:
  radial-gradient(circle at 70% 20%,rgba(255,255,255,.35),transparent 28%),
  linear-gradient(145deg,#1fc5dc,#4170df 34%,#7447cf 61%,#ed4389 82%,#ff9f1d);
}
.scene-backdrop{position:absolute;inset:0;overflow:hidden;z-index:1}
.scene-backdrop:before{
 content:"";
 position:absolute;
 width:170px;height:170px;border-radius:50%;
 left:-38px;bottom:-76px;background:rgba(255,255,255,.16);
 box-shadow:150px -62px 0 -34px rgba(255,255,255,.14),260px 18px 0 -42px rgba(255,255,255,.18);
}
.scene-symbol{
 position:absolute;display:grid;place-items:center;border-radius:18px;
 background:rgba(255,255,255,.91);border:2px solid rgba(255,255,255,.98);
 box-shadow:0 10px 24px rgba(25,26,83,.18);font-size:26px;
 animation:sceneFloat 3.3s ease-in-out infinite;
}
.scene-a{width:58px;height:58px;left:9%;top:18%;transform:rotate(-8deg)}
.scene-b{width:48px;height:48px;right:10%;top:14%;animation-delay:.7s;transform:rotate(7deg)}
.scene-c{width:52px;height:52px;right:13%;bottom:15%;animation-delay:1.3s;transform:rotate(-5deg)}
@keyframes sceneFloat{50%{transform:translateY(-8px) rotate(4deg)}}
.tool-icon-large{z-index:4;width:105px;height:105px;border-radius:33px}
.theme-attention .tool-visual{background:linear-gradient(145deg,#12c7dc,#2478df,#5a4bd4)}
.theme-memory .tool-visual{background:linear-gradient(145deg,#5b42d2,#9347d6,#ed4d9a)}
.theme-matching .tool-visual{background:linear-gradient(145deg,#16b89d,#3fc969,#d0d842)}
.theme-life-cycles .tool-visual{background:linear-gradient(145deg,#2daf67,#73c742,#ffd14a)}
.theme-sounds .tool-visual{background:linear-gradient(145deg,#6043d2,#c445cf,#ff6c9b)}
.theme-sequencing .tool-visual{background:linear-gradient(145deg,#ff9c18,#ef653b,#e54286)}
.theme-emotions .tool-visual{background:linear-gradient(145deg,#ffc034,#ff8054,#ed4c93)}
.theme-communication .tool-visual{background:linear-gradient(145deg,#12b8ca,#2f7edc,#5d57d1)}
.theme-arcade .tool-visual{background:linear-gradient(145deg,#164fb2,#6139c7,#ee4188,#ff9a17)}

@media(max-width:820px){
 .hero-main-logo{height:125px;width:min(350px,100%)}
 .hero-watermark-logo{width:285px;height:285px;right:0;top:-30px}
}


/* =====================================================
   V5 — brighter sectioned game-card experience
   ===================================================== */

body{
 background:
  radial-gradient(circle at 8% 16%,rgba(54,210,235,.18),transparent 22%),
  radial-gradient(circle at 88% 24%,rgba(126,72,225,.13),transparent 24%),
  linear-gradient(180deg,#fbfdff 0,#eef8ff 42%,#f8f4ff 100%);
}

.playful-summary{
 border:2px solid rgba(255,255,255,.9);
 box-shadow:0 14px 38px rgba(50,51,121,.12);
}

.section-strip{
 display:grid;
 grid-template-columns:repeat(7,minmax(120px,1fr));
 gap:12px;
 margin:26px 0 22px;
 padding:14px;
 border-radius:26px;
 background:rgba(255,255,255,.84);
 backdrop-filter:blur(16px);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:0 15px 38px rgba(47,55,119,.12);
 position:sticky;
 top:78px;
 z-index:20;
}
.section-chip{
 border:2px solid transparent;
 min-height:92px;
 border-radius:20px;
 padding:10px 8px;
 background:#f5f7ff;
 color:#263c74;
 cursor:pointer;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:3px;
 transition:.22s ease;
 font-family:inherit;
}
.section-chip>span{font-size:28px;filter:drop-shadow(0 5px 5px rgba(42,48,105,.18))}
.section-chip strong{font-size:.78rem;line-height:1.12;text-align:center}
.section-chip small{
 min-width:25px;height:25px;padding:0 6px;border-radius:99px;
 display:grid;place-items:center;background:#fff;color:#6042bd;font-weight:1000;
 box-shadow:0 4px 10px rgba(50,44,112,.12);
}
.section-chip:hover{transform:translateY(-5px) rotate(-1deg);background:#fff}
.section-chip.active{
 color:#fff;
 background:linear-gradient(135deg,#18bdd7,#3e73df 35%,#7448d0 67%,#ed448c);
 box-shadow:0 12px 25px rgba(92,62,196,.28);
 border-color:#fff;
 transform:translateY(-4px);
}
.section-chip.active small{color:#7542c9}

.active-section-banner{
 display:flex;
 align-items:center;
 gap:22px;
 min-height:150px;
 margin:0 0 18px;
 padding:24px 28px;
 border-radius:30px;
 color:#18356d;
 background:
  linear-gradient(120deg,rgba(255,255,255,.95),rgba(246,242,255,.88)) padding-box,
  linear-gradient(120deg,#18bed7,#3f76df,#7948d1,#eb458f,#ff9d1f) border-box;
 border:4px solid transparent;
 box-shadow:0 15px 38px rgba(56,52,127,.14);
 overflow:hidden;
 position:relative;
}
.active-section-banner:after{
 content:"";
 width:240px;height:240px;position:absolute;right:-75px;top:-100px;border-radius:50%;
 background:conic-gradient(from 30deg,rgba(24,190,215,.24),rgba(121,72,209,.18),rgba(237,69,143,.20),rgba(255,157,31,.18),rgba(24,190,215,.24));
 animation:sectionSpin 16s linear infinite;
}
.active-section-icon{
 flex:0 0 92px;height:92px;border-radius:28px;
 display:grid;place-items:center;font-size:52px;
 background:linear-gradient(145deg,#fff,#edf1ff);
 box-shadow:0 13px 28px rgba(54,47,125,.18),inset 0 2px 0 #fff;
 position:relative;z-index:2;
 animation:softBounce 2.8s ease-in-out infinite;
}
.active-section-banner>div:nth-child(2){position:relative;z-index:2}
.active-section-banner h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:3px 0}
.active-section-banner p{margin:0;color:#64718a}
.section-total{
 margin-left:auto;position:relative;z-index:2;
 min-width:115px;text-align:center;padding:15px;border-radius:22px;
 background:rgba(255,255,255,.89);box-shadow:0 10px 25px rgba(44,46,112,.12);
}
.section-total strong{display:block;font-size:2rem;color:#6c43ca}
.section-total span{font-size:.78rem;color:#6d7789;font-weight:900}

.fun-filters{grid-template-columns:1fr auto}
.search-wrap{
 display:flex;align-items:center;gap:9px;background:#f6f8ff;border-radius:16px;padding:0 13px;
}
.search-wrap input{width:100%;background:transparent!important;border:0!important}
.search-wrap>span{font-size:20px}

.playful-grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:22px;
 align-items:stretch;
}

.fun-game-card{
 border:4px solid transparent!important;
 border-radius:27px!important;
 background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(145deg,#16bad5,#5662d8 35%,#a446ce 62%,#ef4385 82%,#ff9d1d) border-box!important;
 box-shadow:0 15px 34px rgba(44,53,119,.15)!important;
 overflow:hidden;
 cursor:pointer;
 display:flex;
 flex-direction:column;
 min-height:445px;
 transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
 position:relative;
 isolation:isolate;
}
.fun-game-card:hover,.fun-game-card:focus-visible{
 transform:translateY(-11px) scale(1.018);
 box-shadow:0 27px 52px rgba(56,47,139,.26)!important;
 outline:none;
}
.fun-game-card:nth-child(3n+2):hover{transform:translateY(-11px) rotate(.7deg) scale(1.018)}
.fun-game-card:nth-child(3n+3):hover{transform:translateY(-11px) rotate(-.7deg) scale(1.018)}

.fun-visual{
 height:190px!important;
 min-height:190px;
 position:relative;
 overflow:hidden;
 display:grid;
 place-items:center;
 background:
  radial-gradient(circle at 20% 20%,rgba(255,255,255,.58),transparent 28%),
  radial-gradient(circle at 83% 75%,rgba(255,190,40,.33),transparent 29%),
  linear-gradient(135deg,#18c1d9 0%,#3c78df 33%,#704bd4 63%,#e34299 83%,#ff8d27 100%)!important;
}
.theme-stories .fun-visual{background:linear-gradient(135deg,#6d54dc,#ad47d1,#f24791,#ff9a31)!important}
.theme-communication .fun-visual{background:linear-gradient(135deg,#10c5ce,#2c8add,#5661d9,#8b4ccd)!important}
.theme-feelings .fun-visual{background:linear-gradient(135deg,#ffcc38,#ff8b3d,#f44f88,#b94bd2)!important}
.theme-life .fun-visual{background:linear-gradient(135deg,#28c5a5,#45c973,#9ccb3e,#ffd23d)!important}
.theme-learning .fun-visual{background:linear-gradient(135deg,#24bcd6,#397bdf,#5457d8,#a047cd)!important}
.theme-creative .fun-visual{background:linear-gradient(135deg,#8551dc,#cc47c2,#ef4886,#ff9b30)!important}

.game-art-frame{
 width:102px;height:102px;border-radius:29px;
 display:grid;place-items:center;
 background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,244,255,.88));
 border:5px solid rgba(255,255,255,.72);
 box-shadow:
  0 16px 24px rgba(39,31,100,.24),
  inset 0 3px 0 #fff,
  0 0 0 9px rgba(255,255,255,.18);
 transform:rotate(-2deg);
 position:relative;z-index:5;
 animation:artFloat 3.1s ease-in-out infinite;
}
.fun-game-card:nth-child(even) .game-art-frame{animation-delay:-1.3s;transform:rotate(2deg)}
.game-art-emoji{
 font-size:58px;
 line-height:1;
 filter:drop-shadow(0 8px 6px rgba(48,35,93,.22));
 animation:emojiPulse 2.2s ease-in-out infinite;
}
.visual-orbit{
 position:absolute!important;z-index:3!important;
 width:150px!important;height:80px!important;
 border:3px solid rgba(255,255,255,.48)!important;
 border-radius:50%!important;
 inset:auto!important;
 animation:orbitSpin 6s linear infinite!important;
}
.orbit-two{transform:rotate(62deg);animation-direction:reverse!important;animation-duration:8s!important}
.visual-spark{z-index:6!important;color:#fff!important;text-shadow:0 0 12px #fff;animation:sparkFlash 1.65s ease-in-out infinite!important}
.vs1{left:24px!important;top:35px!important}.vs2{right:31px!important;top:56px!important}.vs3{right:52px!important;bottom:24px!important}
.visual-dot{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:sparkFlash 1.3s infinite alternate}
.dot-one{width:7px;height:7px;left:38px;bottom:37px}.dot-two{width:5px;height:5px;right:25px;top:24px}
.mini-cloud{position:absolute;color:rgba(255,255,255,.34);font-size:43px;filter:blur(.1px);animation:cloudDrift 7s ease-in-out infinite}
.cloud-one{left:-8px;bottom:7px}.cloud-two{right:-10px;top:8px;animation-delay:-3s}
.corner-prize{
 position:absolute;right:15px;top:13px;width:42px;height:42px;border-radius:50%;
 display:grid;place-items:center;background:rgba(255,255,255,.88);z-index:8;
 box-shadow:0 7px 17px rgba(36,34,98,.18);
 animation:prizeFlash 1.4s ease-in-out infinite;
}
.card-shine{
 position:absolute;inset:-25%;z-index:9;pointer-events:none;
 background:linear-gradient(105deg,transparent 37%,rgba(255,255,255,.52) 49%,transparent 61%);
 transform:translateX(-85%) rotate(8deg);
 animation:cardSweep 4.3s ease-in-out infinite;
}

.fun-game-card .tool-body{
 padding:17px 16px 16px!important;
 flex:1;display:flex;flex-direction:column;
}
.fun-game-card h2{font-size:1.08rem!important;margin:9px 0 6px!important;color:#17366e!important;line-height:1.23}
.fun-game-card p{font-size:.86rem!important;line-height:1.45!important;color:#6b778c!important;min-height:50px}
.fun-game-card .pill{
 align-self:flex-start;
 font-size:.7rem!important;
 border-radius:999px!important;
 padding:6px 9px!important;
 background:#f1edff!important;color:#6845c5!important;
}
.fun-game-card .game-meta{font-size:.72rem!important;gap:6px!important;flex-wrap:wrap}
.fun-game-card .game-meta span{background:#f5f6fb;padding:5px 7px;border-radius:10px}
.fun-game-card .card-bottom{margin-top:auto;padding-top:9px}
.fun-game-card .card-stars{color:#ff9d00;letter-spacing:1px;font-size:.75rem}
.fun-game-card .difficulty{background:#14abc5!important;color:#fff!important}
.fun-game-card .play-btn{
 width:100%;margin-top:10px;
 min-height:43px;
 border-radius:13px!important;
 color:#fff!important;
 background:linear-gradient(90deg,#179ddd,#3b6cdf,#7650d1,#9944c6)!important;
 box-shadow:0 9px 18px rgba(78,63,180,.22);
 font-size:.91rem!important;
}
.fun-game-card .play-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.play-triangle{display:inline-block;animation:playNudge 1.2s ease-in-out infinite}
.fun-game-card .favourite{
 z-index:20!important;right:13px!important;top:12px!important;
 border:0!important;width:39px!important;height:39px!important;
 color:#b9c0d3!important;background:rgba(255,255,255,.9)!important;
 box-shadow:0 7px 17px rgba(36,34,98,.17)!important;
}
.fun-game-card .favourite.liked{color:#ffb400!important;transform:scale(1.14) rotate(12deg)}

.activity-fun-hero{
 background:
  radial-gradient(circle at 83% 28%,rgba(255,255,255,.30),transparent 25%),
  linear-gradient(120deg,#18bfd8,#3e79df,#7150d3,#e64893,#ff9a29)!important;
 border-radius:30px!important;
 box-shadow:0 18px 42px rgba(55,47,135,.22)!important;
}

.floating-balloon,.floating-star,.floating-rainbow{position:absolute;font-size:44px;filter:drop-shadow(0 9px 8px rgba(54,34,108,.18))}
.floating-balloon{right:18%;top:15%;animation:softBounce 3s ease-in-out infinite}
.floating-star{right:8%;bottom:18%;animation:prizeFlash 1.5s ease-in-out infinite}
.floating-rainbow{right:34%;bottom:8%;animation:artFloat 3.6s ease-in-out infinite}

@keyframes artFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes emojiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.11) rotate(2deg)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes sparkFlash{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.28)}}
@keyframes cardSweep{0%,55%{transform:translateX(-90%) rotate(8deg)}75%,100%{transform:translateX(90%) rotate(8deg)}}
@keyframes prizeFlash{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15) rotate(8deg);filter:brightness(1.25)}}
@keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(24px)}}
@keyframes softBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes playNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes sectionSpin{to{transform:rotate(360deg)}}

@media(max-width:1180px){
 .section-strip{grid-template-columns:repeat(4,1fr);position:relative;top:auto}
 .playful-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
 .playful-grid{grid-template-columns:repeat(2,1fr)}
 .active-section-banner{align-items:flex-start}
 .section-total{display:none}
}
@media(max-width:580px){
 .section-strip{grid-template-columns:repeat(2,1fr)}
 .playful-grid{grid-template-columns:1fr}
 .active-section-banner{padding:20px;flex-direction:column}
 .fun-filters{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* ===== V6 complete hierarchy + richer visual upgrade ===== */
.theme-storiesroutines .fun-visual{
 background:linear-gradient(135deg,#7561e6,#b64bd7,#ef4d91,#ff9e36)!important;
}
.theme-lifeskills .fun-visual{
 background:linear-gradient(135deg,#17bea7,#32c67c,#88cd45,#ffd044)!important;
}
.theme-rewards .fun-visual{
 background:linear-gradient(135deg,#ffbd22,#ff8a32,#f44d84,#9e47cf)!important;
}
.theme-support .fun-visual{
 background:linear-gradient(135deg,#2dbbc4,#367ed2,#5a59c8,#7f4bc1)!important;
}

/* Real games are larger and more energetic than utility cards */
.theme-games{
 min-height:470px;
}
.theme-games .fun-visual{
 height:215px!important;
 min-height:215px;
}
.theme-games .game-art-frame{
 width:116px;height:116px;border-radius:34px;
}
.theme-games .game-art-emoji{font-size:66px}
.theme-games:after{
 content:"PLAY!";
 position:absolute;
 left:14px;top:14px;
 z-index:18;
 padding:6px 10px;
 border-radius:999px;
 background:linear-gradient(90deg,#fff,#fff8ce);
 color:#6c43c6;
 font-size:.68rem;
 font-weight:1000;
 letter-spacing:.08em;
 box-shadow:0 7px 15px rgba(43,37,102,.17);
 animation:gameBadgePulse 1.55s ease-in-out infinite;
}
.theme-games:hover .fun-visual{
 filter:saturate(1.16) brightness(1.04);
}
.theme-games .play-btn{
 min-height:49px;
 font-size:1rem!important;
 background:linear-gradient(90deg,#0aaed3,#397be2,#734fd4,#e34296)!important;
}

/* Non-game activity cards look polished but calmer and clearly purposeful */
.fun-game-card:not(.theme-games) .card-shine{animation-duration:7s}
.fun-game-card:not(.theme-games) .game-art-frame{animation-duration:4.4s}
.theme-support .play-btn,
.theme-lifeskills .play-btn,
.theme-storiesroutines .play-btn,
.theme-communication .play-btn,
.theme-feelings .play-btn,
.theme-learning .play-btn,
.theme-creative .play-btn,
.theme-rewards .play-btn{
 background:linear-gradient(90deg,#277fcf,#6452ca)!important;
}

/* Tiny floating visual props make covers look illustrated rather than empty */
.fun-visual:after{
 position:absolute;
 left:17px;
 bottom:10px;
 z-index:4;
 font-size:30px;
 opacity:.92;
 filter:drop-shadow(0 6px 5px rgba(34,31,88,.18));
 animation:propWiggle 3.2s ease-in-out infinite;
}
.theme-games .fun-visual:after{content:"🎮";}
.theme-storiesroutines .fun-visual:after{content:"📚";}
.theme-communication .fun-visual:after{content:"💭";}
.theme-feelings .fun-visual:after{content:"💛";}
.theme-lifeskills .fun-visual:after{content:"🌟";}
.theme-learning .fun-visual:after{content:"✏️";}
.theme-creative .fun-visual:after{content:"🖍️";}
.theme-rewards .fun-visual:after{content:"🏅";}
.theme-support .fun-visual:after{content:"🧩";}

.active-section-banner .eyebrow:after{
 content:" • EVERYTHING IN THE RIGHT PLACE";
 color:#8151ca;
}

@keyframes gameBadgePulse{
 0%,100%{transform:scale(1) rotate(-3deg)}
 50%{transform:scale(1.09) rotate(2deg);box-shadow:0 0 20px rgba(255,255,255,.9)}
}
@keyframes propWiggle{
 0%,100%{transform:rotate(-7deg) translateY(0)}
 50%{transform:rotate(7deg) translateY(-6px)}
}

/* More attractive section switcher for the added areas */
.section-strip{
 grid-template-columns:repeat(9,minmax(105px,1fr));
}
.section-chip{
 background:
  radial-gradient(circle at 50% 0,rgba(255,255,255,.9),transparent 48%),
  linear-gradient(145deg,#f9fbff,#f0f1ff);
}
.section-chip:hover>span{animation:emojiPulse .8s ease-in-out infinite}
.section-chip.active:after{
 content:"";
 position:absolute;
 width:7px;height:7px;
 border-radius:50%;
 background:#fff;
 box-shadow:-25px 12px 0 rgba(255,255,255,.75),28px 16px 0 rgba(255,255,255,.65);
 animation:sparkFlash 1.4s infinite;
}
.section-chip{position:relative;overflow:hidden}

@media(max-width:1380px){
 .section-strip{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:850px){
 .section-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
 .section-strip{grid-template-columns:repeat(2,1fr)}
}

/* ===== V7 page wiring and navigation ===== */
.activity-wiring-bar{
 display:flex;align-items:center;gap:9px;flex-wrap:wrap;
 margin:0 0 15px;padding:11px 14px;border-radius:17px;
 background:rgba(255,255,255,.92);border:1px solid #e5e8f4;
 box-shadow:0 8px 22px rgba(44,52,111,.09);color:#758096;
}
.activity-wiring-bar button{
 border:0;background:transparent;color:#315aa2;font:inherit;font-weight:900;
 padding:7px 9px;border-radius:10px;cursor:pointer;
}
.activity-wiring-bar button:hover,.activity-wiring-bar button:focus-visible{background:#edf2ff;outline:3px solid rgba(70,105,218,.18)}
.activity-wiring-bar strong{color:#273b70}
.activity-hero-image{
 min-width:170px;min-height:150px;display:grid;place-items:center;
 border-radius:32px;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.35);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 16px 35px rgba(45,34,109,.16)
}
.activity-hero-image span{font-size:86px;filter:drop-shadow(0 12px 10px rgba(41,29,100,.2));animation:artFloat 3s ease-in-out infinite}
.activity-footer-nav{
 display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
 margin:20px 0 35px;padding:15px;border-radius:19px;background:#fff;
 border:1px solid #e5e8f2;box-shadow:0 9px 25px rgba(42,49,105,.09)
}
.missing-activity{text-align:center;padding:38px}
@media(max-width:650px){.activity-hero-image{width:100%;min-width:0}.activity-footer-nav .btn{width:100%}}

/* Consistent controls on every Kids Zone game. */
.universal-game-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0;padding:16px;background:#fff;border:2px solid rgba(15,151,166,.18);border-radius:18px}
.level-btn{border:2px solid #159bb4;background:#fff;color:#164a83;border-radius:999px;padding:10px 20px;font-weight:900;cursor:pointer}
.level-btn.active{background:#159bb4;color:#fff;box-shadow:0 6px 16px rgba(21,155,180,.25)}
.next-game-btn{margin-left:auto!important;min-width:130px}
@media(max-width:620px){.next-game-btn{margin-left:0!important;width:100%}}