:root{--coral:#E8593C;--coral-light:#FAE9E4;--coral-dark:#B8391C;--amber:#F0A020;--amber-light:#FEF3DC;--teal:#1A9E78;--teal-light:#E0F5EE;--teal-dark:#0D6E54;--purple:#6B5DD3;--purple-light:#EEEDFE;--purple-dark:#3C3489;--cream:#FEF9F3;--cream-dark:#F5EDE0;--brown:#2C1A0E;--gray:#7A6F65;--gray-light:#EDE8E2;--shadow-sm:0 2px 8px rgba(44,26,14,.08);--shadow-md:0 6px 24px rgba(44,26,14,.12);--shadow-lg:0 16px 48px rgba(44,26,14,.16);--radius:16px;--radius-sm:10px;--pill:100px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;background:var(--cream);color:var(--brown);min-height:100vh;overflow-x:hidden}

/* HOW IT WORKS */
.how-it-works{background:linear-gradient(135deg,var(--teal-light),var(--amber-light));border-radius:20px;padding:28px 24px;margin-bottom:36px}
.hiw-title{font-family:'Baloo 2',cursive;font-size:18px;font-weight:800;color:var(--brown);text-align:center;margin-bottom:22px;letter-spacing:.2px}
.hiw-steps{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.hiw-step{background:#fff;border-radius:var(--radius);padding:16px 14px;text-align:center;flex:1;min-width:130px;max-width:180px;box-shadow:var(--shadow-sm)}
.hiw-step-unlock{background:linear-gradient(135deg,var(--coral-light),#fff)}
.hiw-icon{width:44px;height:44px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.hiw-icon svg{width:36px;height:36px}
.hiw-step-title{font-family:'Baloo 2',cursive;font-size:13px;font-weight:800;color:var(--brown);margin-bottom:5px;line-height:1.3}
.hiw-step-desc{font-size:11px;color:var(--gray);font-weight:600;line-height:1.5}
.hiw-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px}
@media(max-width:600px){.hiw-arrow{display:none}.hiw-step{min-width:calc(50% - 8px);max-width:none}}

/* NAV */
nav{background:#fff;border-bottom:2px solid var(--cream-dark);padding:0 28px;height:68px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.logo{font-family:'Baloo 2',cursive;font-size:26px;font-weight:800;color:var(--coral);display:flex;align-items:center;gap:8px;text-decoration:none}
.logo-dot{width:10px;height:10px;background:var(--amber);border-radius:50%;animation:bounce 1.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.nav-filters{display:flex;gap:8px}
.filter-btn{padding:8px 18px;border-radius:var(--pill);border:2px solid var(--gray-light);background:transparent;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;color:var(--gray);cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:var(--coral);color:var(--coral)}
.filter-btn.active{background:var(--coral);border-color:var(--coral);color:#fff}
.filter-btn.f-age.active{background:var(--teal);border-color:var(--teal)}
.nav-age-tag{font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--gray);padding:6px 14px;border-radius:var(--pill);border:2px solid var(--gray-light);white-space:nowrap}
/* ── Story Worlds ───────────────────────────── */
.worlds-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.world-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--pill);
  border:2px solid var(--gray-light);background:#fff;
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;
  color:var(--gray);cursor:pointer;transition:all .2s;
}
.world-btn:hover{border-color:var(--coral);color:var(--coral)}
.world-btn.active{color:#fff;border-color:transparent}
.world-btn.wb-all.active{background:var(--brown)}
.world-btn.wb-forest.active{background:var(--teal)}
.world-btn.wb-village.active{background:var(--amber);color:var(--brown)}
.world-btn.wb-heroes.active{background:var(--coral)}
.world-btn.wb-minds.active{background:var(--purple)}
.world-section{margin-bottom:40px;border-radius:20px;overflow:hidden;box-shadow:0 2px 12px rgba(44,26,14,.07)}
.world-header{
  display:flex;align-items:center;gap:14px;
  padding:16px 22px;
  cursor:pointer;user-select:none;
  transition:opacity .15s;
}
.world-header:hover{opacity:.92}
.world-header.wh-forest{background:linear-gradient(135deg,var(--teal-light),#fff)}
.world-header.wh-village{background:linear-gradient(135deg,var(--amber-light),#fff)}
.world-header.wh-heroes{background:linear-gradient(135deg,var(--coral-light),#fff)}
.world-header.wh-minds{background:linear-gradient(135deg,var(--purple-light),#fff)}
.world-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.world-icon.wi-forest{background:var(--teal)}
.world-icon.wi-village{background:var(--amber)}
.world-icon.wi-heroes{background:var(--coral)}
.world-icon.wi-minds{background:var(--purple)}
.world-header-text{flex:1}
.world-name{font-family:'Baloo 2',cursive;font-size:18px;font-weight:800;color:var(--brown);line-height:1.2}
.world-tagline{font-size:12px;color:var(--gray);font-weight:600;margin-top:2px}
.world-count{font-size:12px;font-weight:800;color:var(--gray);background:var(--gray-light);padding:4px 10px;border-radius:100px;flex-shrink:0}
.world-chevron{transition:transform .3s;flex-shrink:0}
.world-section.collapsed .world-chevron{transform:rotate(-90deg)}
.world-section.collapsed .world-grid{display:none}
.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;padding:20px 22px 24px;background:#fff}
@media(max-width:600px){.world-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.worlds-nav{gap:6px}.world-btn{padding:8px 12px;font-size:12px}}

.nav-now-playing{display:flex;align-items:center;gap:9px;background:var(--cream-dark);border:2px solid var(--coral);border-radius:100px;padding:4px 8px 4px 4px;transition:all .2s;max-width:260px}
.nav-np-cover-wrap{position:relative;flex-shrink:0}
.nav-np-cover{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;background:var(--gray-light)}
.nav-np-info{min-width:0;flex:1;cursor:pointer}
.nav-np-info:hover .nav-np-title{color:var(--coral)}
.nav-np-label{font-size:9px;font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:.6px;line-height:1;margin-bottom:2px}
.nav-np-title{font-family:'Baloo 2',cursive;font-size:12px;font-weight:800;color:var(--brown);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:4px;transition:color .15s}
.nav-np-bar{height:3px;background:var(--gray-light);border-radius:2px;overflow:hidden}
.nav-np-fill{height:100%;background:var(--coral);border-radius:2px;transition:width .4s}
.nav-np-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nav-np-btn{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.nav-np-btn-play{background:var(--coral)}
.nav-np-btn-play:hover{background:var(--brown);transform:scale(1.08)}
.nav-np-btn-open{background:transparent;border:1.5px solid var(--gray-light)!important;margin-left:2px}
.nav-np-btn-open:hover{border-color:var(--coral)!important;background:var(--coral-light)}
@media(max-width:600px){#navNowPlaying{display:none!important}}
/* ── MOBILE BOTTOM MINI-PLAYER ─────────────────────────────── */
#mobilePlayer{position:fixed;bottom:0;left:0;right:0;z-index:500;background:#fff;border-top:2px solid var(--coral);padding:10px 16px;display:none;align-items:center;gap:12px;box-shadow:0 -4px 20px rgba(44,26,14,.12);transition:transform .3s ease}
.mp-cover{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--gray-light)}
.mp-info{flex:1;min-width:0;cursor:pointer}
.mp-title{font-family:'Baloo 2',cursive;font-size:13px;font-weight:800;color:var(--brown);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-pct{font-size:11px;color:var(--gray);font-weight:700}
.mp-bar{height:2px;background:var(--gray-light);border-radius:2px;margin-top:4px;overflow:hidden}
.mp-bar-fill{height:100%;background:var(--coral);border-radius:2px;transition:width .4s}
.mp-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.mp-btn-play{background:var(--coral)}
.mp-btn-play:hover{background:var(--brown)}
.mp-btn-open{background:var(--cream-dark);border:1.5px solid var(--gray-light)!important}
.mp-btn-open:hover{background:var(--coral-light)}
@media(min-width:601px){#mobilePlayer{display:none!important}}

/* MAIN */
main{max-width:1200px;margin:0 auto;padding:36px 20px 80px}
.section-title{font-family:'Baloo 2',cursive;font-size:22px;font-weight:700;color:var(--brown);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.section-title::after{content:'';flex:1;height:2px;background:var(--gray-light);border-radius:2px}

/* ── CONTINUE LISTENING ROW ── */
.continue-row{margin-bottom:36px}
.continue-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.continue-scroll::-webkit-scrollbar{height:4px}
.continue-scroll::-webkit-scrollbar-track{background:var(--gray-light);border-radius:4px}
.continue-scroll::-webkit-scrollbar-thumb{background:var(--coral);border-radius:4px}
.continue-card{flex:0 0 160px;scroll-snap-align:start;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.continue-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.continue-card img{width:100%;height:110px;object-fit:cover;display:block}
.continue-card .c-progress-bar{height:4px;background:var(--gray-light)}
.continue-card .c-progress-fill{height:100%;background:var(--coral);border-radius:0 2px 2px 0;transition:width .3s}
.continue-card .c-info{padding:8px 10px 10px}
.continue-card .c-title{font-family:'Baloo 2',cursive;font-size:12px;font-weight:700;color:var(--brown);line-height:1.3;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-card .c-pct{font-size:10px;color:var(--gray);font-weight:700}
.continue-card .c-play{position:absolute;top:8px;right:8px;width:28px;height:28px;background:var(--coral);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;box-shadow:0 2px 8px rgba(232,89,60,.4)}
.continue-empty{color:var(--gray);font-size:14px;font-weight:600;padding:20px 0;font-style:italic}

/* ── XP / SCORING SYSTEM ── */
.xp-bar-wrap{background:var(--cream-dark);border-radius:var(--pill);padding:10px 20px;margin-bottom:28px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm)}
.xp-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--amber));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 3px 10px rgba(232,89,60,.3)}
.xp-details{flex:1;min-width:0}
.xp-level{font-family:'Baloo 2',cursive;font-size:13px;font-weight:800;color:var(--brown);margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.xp-level span{font-size:11px;color:var(--gray);font-weight:700}
.xp-track{height:10px;background:var(--gray-light);border-radius:var(--pill);overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--coral),var(--amber));border-radius:var(--pill);transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.xp-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.xp-badge{font-size:18px;cursor:default;transition:transform .2s}
.xp-badge:hover{transform:scale(1.3)}
.xp-pts{font-family:'Baloo 2',cursive;font-size:22px;font-weight:900;color:var(--coral);flex-shrink:0;text-align:right;line-height:1}
.xp-pts small{display:block;font-size:10px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* ── TOAST NOTIFICATION ── */
.hl-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#1a0a04;color:#fff;padding:12px 24px;border-radius:var(--pill);font-size:14px;font-weight:800;z-index:9999;box-shadow:var(--shadow-lg);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:0;white-space:nowrap;pointer-events:none}
.hl-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── QUIZ SCORE BADGE ── */
.quiz-score-badge{display:inline-flex;align-items:center;gap:6px;background:var(--amber-light);border-radius:var(--pill);padding:4px 12px;font-size:12px;font-weight:800;color:var(--brown);margin-bottom:8px}
.book-card .earned-badge{position:absolute;top:10px;right:10px;font-size:14px;background:var(--amber);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(240,160,32,.5)}

/* VIDEO */
.video-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:44px}
.video-header{padding:16px 22px 14px;border-bottom:2px solid var(--cream-dark);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.video-title{font-family:'Baloo 2',cursive;font-size:18px;font-weight:800;color:var(--brown)}
.video-body{padding:18px 22px 22px}
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.sub-row{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;background:var(--amber-light);border-radius:14px;flex-wrap:wrap}
.sub-text{flex:1;min-width:140px}
.sub-text strong{display:block;font-size:14px;font-weight:800;color:var(--brown);margin-bottom:2px}
.sub-text span{font-size:12px;color:var(--gray);font-weight:600}
.btn-sub{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:#FF0000;color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;transition:background .2s;flex-shrink:0}
.btn-sub:hover{background:#CC0000}
.btn-sub svg{width:16px;height:16px;fill:#fff}


/* ── CROSSWORD ── */
.xw-wrap{padding:4px 0 8px}
.xw-locked{text-align:center;padding:30px 20px;color:var(--gray)}
.xw-locked span{font-size:36px;display:block;margin-bottom:10px}
.xw-grid-wrap{display:flex;justify-content:center;margin:16px 0 14px;overflow-x:auto}
.xw-grid{display:inline-grid;gap:2px;background:var(--brown);border:2px solid var(--brown);border-radius:6px;padding:2px}
.xw-cell{width:34px;height:34px;background:#fff;position:relative;display:flex;align-items:center;justify-content:center}
.xw-cell.black{background:var(--brown)}
.xw-cell input{width:100%;height:100%;border:none;text-align:center;font-family:'Baloo 2',cursive;font-size:16px;font-weight:800;text-transform:uppercase;background:transparent;color:var(--brown);caret-color:var(--teal);outline:none;padding:0;cursor:pointer}
.xw-cell input:focus{background:rgba(26,158,120,.15)}
.xw-cell.correct input{background:rgba(26,158,120,.25);color:var(--teal)}
.xw-cell.wrong input{background:rgba(232,89,60,.15);color:var(--coral)}
.xw-cell.active-word input{background:rgba(240,160,32,.15)}
.xw-num{position:absolute;top:1px;left:2px;font-size:7px;font-weight:800;color:var(--gray);line-height:1;pointer-events:none}
.xw-clues{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0 0 14px}
.xw-clue-head{font-family:'Baloo 2',cursive;font-size:13px;font-weight:800;color:var(--brown);margin:10px 0 6px}
.xw-clue{font-size:12px;font-weight:700;color:var(--gray);margin-bottom:5px;cursor:pointer;padding:3px 6px;border-radius:5px;transition:background .15s;line-height:1.4}
.xw-clue:hover{background:var(--cream)}
.xw-clue.active-clue{background:rgba(240,160,32,.2);color:var(--brown)}
.xw-clue.done-clue{color:var(--teal)}
.xw-clue b{color:var(--brown);font-size:11px}
.xw-actions{display:flex;gap:8px;margin-top:10px}
.xw-btn{flex:1;padding:10px;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s}
.xw-btn-check{background:var(--teal);color:#fff}
.xw-btn-check:hover{background:var(--teal-dark)}
.xw-btn-reveal{background:var(--gray-light);color:var(--gray)}
.xw-btn-reveal:hover{background:#ddd}
.xw-btn-reset{background:var(--cream-dark);color:var(--brown)}
.xw-celebration{text-align:center;padding:18px 12px;animation:popIn .4s ease}
.xw-celebration .xw-stars{font-size:28px;margin-bottom:6px}
.xw-celebration p{font-family:'Baloo 2',cursive;font-size:17px;font-weight:800;color:var(--brown);margin-bottom:4px}
.xw-celebration small{font-size:12px;color:var(--gray);font-weight:600}

/* OTHER BOOKS */
.other-books-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:44px}
.other-books-body{padding:18px 22px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.other-books-img{width:200px;height:200px;border-radius:14px;object-fit:cover;flex-shrink:0}
.other-books-text{flex:1;min-width:220px}
.other-books-text h3{font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:var(--brown);margin-bottom:8px}
.other-books-text p{font-size:14px;color:var(--gray);font-weight:600;line-height:1.6;margin-bottom:16px}
.btn-amazon-big{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:var(--amber);color:var(--brown);border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;text-decoration:none;transition:background .2s}
.btn-amazon-big:hover{background:#D8900E}

/* CONTACT */
.contact-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:44px}
.contact-body{padding:22px;display:flex;gap:24px;flex-wrap:wrap}
.contact-item{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:200px}
.contact-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.contact-icon.email{background:var(--teal-light)}
.contact-icon.phone{background:var(--amber-light)}
.contact-icon.whatsapp{background:#E8F5E9}
.contact-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);margin-bottom:3px}
.contact-value{font-size:14px;font-weight:700;color:var(--brown);word-break:break-all}
.contact-value a{color:var(--brown);text-decoration:none}
.contact-value a:hover{color:var(--teal)}

/* MISSION/VISION */
.mv-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:44px}
.mv-body{padding:22px;display:flex;gap:20px;flex-wrap:wrap}
.mv-item{flex:1;min-width:220px;background:var(--cream);border-radius:var(--radius);padding:18px 20px}
.mv-item h3{font-family:'Baloo 2',cursive;font-size:17px;font-weight:800;color:var(--brown);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.mv-item p{font-size:13px;color:var(--gray);font-weight:600;line-height:1.7}

/* BOOK GRID */
.book-featured{box-shadow:0 0 0 2.5px var(--amber),var(--shadow-md)!important}
.book-featured .featured-badge{position:absolute;top:8px;left:8px;background:var(--amber);color:var(--brown);font-family:'Baloo 2',cursive;font-size:10px;font-weight:800;padding:2px 8px;border-radius:100px;z-index:3}
.featured-badge{position:absolute;top:10px;left:10px;background:var(--amber);color:var(--brown);font-family:'Baloo 2',cursive;font-size:11px;font-weight:800;padding:3px 10px;border-radius:100px;z-index:2}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin-bottom:52px}
.book-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;animation:fadeUp .4s ease both}
.book-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.book-cover{height:150px;position:relative;overflow:hidden;flex-shrink:0}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-cover .cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px}
.age-tag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:var(--pill);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:var(--teal);color:#fff}
.lock-overlay{position:absolute;inset:0;background:rgba(44,26,14,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;gap:4px}
.lock-overlay span{font-size:28px}
.book-info{padding:13px 13px 15px;flex:1;display:flex;flex-direction:column}
.book-title{font-family:'Baloo 2',cursive;font-size:14px;font-weight:700;color:var(--brown);margin-bottom:4px;line-height:1.3}
.book-meta{font-size:11px;color:var(--gray);font-weight:600;margin-bottom:10px;flex:1}
.btn-listen{width:100%;padding:9px 0;background:var(--teal);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s}
.btn-listen:hover{background:var(--teal-dark)}
.btn-listen.locked{background:var(--gray-light);color:var(--gray);cursor:not-allowed}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(44,26,14,.5);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);max-width:560px;width:100%;overflow:hidden;animation:slideUp .3s ease;max-height:90vh;overflow-y:auto}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.modal-header{padding:22px 22px 16px;display:flex;align-items:flex-start;gap:14px;border-bottom:2px solid var(--cream-dark);position:sticky;top:0;background:#fff;z-index:1}
.modal-cover{width:60px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0}
.modal-title{font-family:'Baloo 2',cursive;font-size:19px;font-weight:800;color:var(--brown);margin-bottom:4px}
.modal-desc{font-size:12px;color:var(--gray);font-weight:600;line-height:1.5;flex:1}
.modal-close{background:var(--gray-light);border:none;width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gray);flex-shrink:0;transition:background .2s}
.modal-close:hover{background:var(--coral-light);color:var(--coral)}
.modal-tabs-wrap{background:#fff;border-bottom:2px solid var(--cream-dark);padding:8px 12px 0;overflow:hidden}
.modal-tabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
.modal-tabs::-webkit-scrollbar{display:none}
.modal-tab{padding:7px 10px;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;border:2px solid var(--cream-dark);background:var(--cream);cursor:pointer;color:var(--gray);border-radius:100px;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:all .18s;flex-shrink:0}
.modal-tab svg{flex-shrink:0}
/* Hide tab text labels on very small screens, show icons only */
@media(max-width:400px){.modal-tab .tab-label{display:none}.modal-tab{padding:8px 10px;gap:0}}
.modal-tab:hover{border-color:var(--coral);color:var(--coral);background:#fff}
.modal-tab.active{color:#fff;background:var(--coral);border-color:var(--coral)}
/* ── PERSISTENT FLIPBOOK (sits between tabs bar and content) ── */
/* flipbook is inside tab-listen */

/* Tab panels */
.tab-panel{display:none;padding:20px 22px 24px}
.tab-panel.active{display:block}

/* REVIEWS */
.reviews-form{background:var(--cream);border:2px solid var(--cream-dark);border-radius:var(--radius-sm);padding:16px;margin-bottom:18px}
.reviews-form-title{font-family:'Baloo 2',cursive;font-size:15px;font-weight:800;color:var(--brown);margin-bottom:12px}
.star-picker{display:flex;gap:6px;margin-bottom:12px;font-size:28px;cursor:pointer}
.star-picker span{transition:transform .15s;line-height:1}
.star-picker span:hover,.star-picker span.active{transform:scale(1.2)}
.reviews-form input,.reviews-form textarea{width:100%;border:2px solid var(--gray-light);border-radius:8px;padding:9px 12px;font-family:'Nunito',sans-serif;font-size:14px;color:var(--brown);background:#fff;outline:none;transition:border .2s;display:block;margin-bottom:10px}
.reviews-form input:focus,.reviews-form textarea:focus{border-color:var(--coral)}
.reviews-form textarea{resize:vertical;min-height:72px}
.btn-submit-review{background:var(--coral);color:#fff;border:none;border-radius:var(--pill);padding:10px 22px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.btn-submit-review:hover{background:var(--coral-dark)}
.reviews-list{display:flex;flex-direction:column;gap:12px}
.review-card{background:#fff;border:2px solid var(--cream-dark);border-radius:var(--radius-sm);padding:14px 16px}
.review-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.review-name{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:var(--brown)}
.review-stars{font-size:15px;letter-spacing:1px}
.review-date{font-size:11px;color:var(--gray);font-weight:600;margin-bottom:6px}
.review-text{font-size:13px;color:var(--brown);line-height:1.55;font-weight:600}
.reviews-empty{text-align:center;padding:28px 16px;color:var(--gray);font-weight:700;font-size:14px}
.reviews-loading{text-align:center;padding:20px;color:var(--gray);font-size:13px;font-weight:600;opacity:.7}
.review-star-error{color:var(--coral);font-size:12px;font-weight:700;margin-bottom:8px;display:none}

/* AUDIO PLAYER */
.player-wrap{background:var(--cream);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.player-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.player-cover{width:46px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0}
.player-title{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:var(--brown);margin-bottom:3px}
.player-sub{font-size:12px;font-weight:700;color:var(--gray);display:flex;align-items:center;gap:5px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-light);flex-shrink:0;transition:background .3s}
.status-dot.loading{background:var(--amber);animation:pulse 1s infinite}
.status-dot.ready{background:var(--teal)}
.status-dot.error{background:var(--coral)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.progress-track{position:relative;height:8px;background:var(--gray-light);border-radius:4px;cursor:pointer;margin-bottom:6px}
.progress-fill{height:100%;background:var(--teal);border-radius:4px;width:0%;pointer-events:none}
.progress-thumb{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--teal);border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15);pointer-events:none}
.time-row{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--gray);margin-bottom:12px}
.player-ctrls{display:flex;align-items:center;justify-content:center;gap:10px}
.skip-btn{background:#fff;border:none;border-radius:var(--pill);padding:6px 12px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--brown);cursor:pointer;transition:background .2s}
.skip-btn:hover{background:var(--gray-light)}
.play-btn{width:50px;height:50px;border-radius:50%;background:var(--teal);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(26,158,120,.3);transition:background .2s,transform .15s}
.play-btn:hover{background:var(--teal-dark);transform:scale(1.06)}
.play-btn:disabled{background:var(--gray-light);cursor:not-allowed;box-shadow:none;transform:none}


/* QUIZ */
.quiz-progress{display:flex;gap:6px;margin-bottom:16px;align-items:center}
.quiz-dot{width:10px;height:10px;border-radius:50%;background:var(--gray-light);transition:background .3s}
.quiz-dot.done{background:var(--purple)}
.quiz-dot.current{background:var(--coral);transform:scale(1.3)}
.quiz-q-num{margin-left:auto;font-size:12px;font-weight:800;color:var(--gray)}
.quiz-question{font-family:'Baloo 2',cursive;font-size:17px;font-weight:700;color:var(--brown);margin-bottom:14px;line-height:1.35}
.quiz-options{display:flex;flex-direction:column;gap:9px}
.quiz-option{padding:12px 14px;background:var(--cream);border:2px solid var(--gray-light);border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;text-align:left;color:var(--brown);display:flex;align-items:center;gap:9px}
.quiz-option:hover:not(:disabled){border-color:var(--purple);background:var(--purple-light)}
.quiz-option.correct{background:var(--teal-light);border-color:var(--teal);color:var(--teal-dark)}
.quiz-option.wrong{background:#FDEAEA;border-color:#E05050;color:#8B2020}
.quiz-option:disabled{cursor:default}
.opt-letter{width:26px;height:26px;border-radius:50%;background:var(--gray-light);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;color:var(--gray)}
.quiz-option.correct .opt-letter{background:var(--teal);color:#fff}
.quiz-option.wrong .opt-letter{background:#E05050;color:#fff}
.quiz-fb{margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;display:none}
.quiz-fb.show{display:block}
.quiz-fb.correct{background:var(--teal-light);color:var(--teal-dark)}
.quiz-fb.wrong{background:#FDEAEA;color:#8B2020}
.btn-next{margin-top:12px;width:100%;padding:12px;background:var(--purple);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;display:none;transition:background .2s}
.btn-next:hover{background:var(--purple-dark)}
.btn-next.show{display:block}
.modal,.tab-panel,#quizArea{color:var(--brown)}
.quiz-result{text-align:center;padding:8px 0;display:none}
.quiz-result.show{display:block;background:linear-gradient(180deg,#fff 0%,#fffaf4 100%);border:2px solid var(--cream-dark);border-radius:18px;padding:18px 16px 16px;box-shadow:0 10px 26px rgba(44,26,14,.08);color:var(--brown)}
.share-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;padding:10px;background:var(--cream);border:2px solid var(--gray-light);border-radius:16px}
.btn-share{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:opacity .2s;text-decoration:none;white-space:nowrap;box-shadow:0 2px 0 rgba(44,26,14,.08)}
.btn-share:hover{opacity:.85}
.btn-share.twitter{background:#1DA1F2;color:#fff}
.btn-share.whatsapp{background:#25D366;color:#fff}
.btn-share.copy{background:#F4ECE4;color:var(--brown);border:1.5px solid #D9C8BA}
.share-copied{display:none;font-size:12px;color:var(--teal-dark);font-weight:800;margin-top:10px;background:var(--teal-light);border-radius:100px;padding:8px 12px}
.result-emoji{font-size:60px;margin-bottom:10px;display:block}
.result-score{font-family:'Baloo 2',cursive;font-size:40px;font-weight:800;color:var(--coral);margin-bottom:6px}
.result-msg{font-size:15px;font-weight:700;color:var(--brown);margin-bottom:18px}
.stars{font-size:26px;margin-bottom:8px}
.btn-retry{padding:11px 28px;background:var(--coral);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.btn-retry:hover{background:var(--coral-dark)}

/* BUY TAB */
.btn-amazon-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;background:var(--amber);color:var(--brown);border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.btn-amazon-full:hover{background:#D8900E}

/* SCHOOL VISIT */
.school-card{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);border-radius:20px;padding:28px 24px;margin-bottom:44px;color:#fff;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.school-text h3{font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;margin-bottom:6px}
.school-text p{font-size:13px;opacity:.88;font-weight:600;line-height:1.6}
.btn-school{padding:12px 24px;background:#fff;color:var(--purple-dark);border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;transition:opacity .2s;white-space:nowrap}
.btn-school:hover{opacity:.9}

/* FOOTER */
footer{background:var(--brown);color:rgba(255,255,255,.7);text-align:center;padding:20px;font-size:12px;font-weight:600}
footer a{color:rgba(255,255,255,.9);text-decoration:none}

@media(max-width:600px){
  .hero h1{font-size:28px}
  .nav-filters{display:none}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .modal{border-radius:20px 20px 0 0;position:fixed;bottom:0;max-width:100%;max-height:88vh}
  .modal-overlay{align-items:flex-end;padding:0}
  /* Give tab content bottom padding so nothing hides behind nav bar / browser chrome */
  .tab-panel.active{padding-bottom:32px}
  /* Main page needs bottom padding when mobile player is visible */
  body.mp-active main{padding-bottom:96px}
}
/* FEATURED STORY */
.featured-card{background:linear-gradient(135deg,var(--coral) 0%,var(--amber) 100%);border-radius:20px;box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:44px;position:relative}
.featured-inner{display:flex;align-items:stretch;flex-wrap:wrap;min-height:220px}
.featured-img-wrap{flex-shrink:0;width:190px;position:relative;overflow:hidden;min-height:220px}
.featured-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.featured-img-wrap{width:100%;height:220px;min-height:unset}}
.featured-content{flex:1;padding:22px 24px;color:#fff;display:flex;flex-direction:column;justify-content:center;min-width:220px}
.featured-eyebrow{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;opacity:.85;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.featured-eyebrow::before{content:'';}
.featured-title{font-family:'Baloo 2',cursive;font-size:22px;font-weight:800;line-height:1.2;margin-bottom:8px}
.featured-desc{font-size:13px;font-weight:600;opacity:.92;line-height:1.6;margin-bottom:16px;flex:1}
.featured-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-featured-listen{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:rgba(255,255,255,.25);backdrop-filter:blur(6px);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.btn-featured-listen:hover{background:rgba(255,255,255,.4)}
.btn-featured-buy{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:#fff;color:var(--brown);border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:opacity .2s;text-decoration:none}
.btn-featured-buy:hover{opacity:.85}
.featured-badge{display:inline-block;background:rgba(255,255,255,.25);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.5);border-radius:var(--pill);padding:4px 12px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.3px;margin-bottom:10px;align-self:flex-start}


.empty-state{text-align:center;padding:50px 20px;color:var(--gray);font-size:15px;font-weight:600}
.empty-state span{font-size:44px;display:block;margin-bottom:10px}
.hidden{display:none!important}
.star-pick-btn{background:none;border:none;cursor:pointer;padding:2px;transition:transform .15s}.star-pick-btn:hover{transform:scale(1.2)}.star-pick-btn.active svg,.star-pick-btn:hover svg{fill:var(--amber)}.result-emoji-svg{margin:10px auto;display:flex;justify-content:center}

/* ── WORD SCRAMBLE ─────────────────────────────────────────── */
.scramble-wrap{padding:4px 0}
.scramble-clue{font-size:13px;color:var(--gray);font-weight:700;text-align:center;margin-bottom:18px;line-height:1.5}
.scramble-counter{font-family:'Baloo 2',cursive;font-size:12px;font-weight:800;color:var(--coral);text-align:center;margin-bottom:10px;letter-spacing:.5px}
.scramble-answer-row{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.scramble-slot{width:38px;height:46px;border-bottom:3px solid var(--brown);display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:var(--brown);cursor:pointer;transition:all .15s;border-radius:4px 4px 0 0;background:transparent}
.scramble-slot.filled{border-bottom-color:var(--teal);background:var(--teal-light)}
.scramble-slot:hover.filled{background:#c8ede5}
.scramble-letters-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.scramble-letter{width:42px;height:48px;background:#fff;border:2.5px solid var(--gray-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:var(--brown);cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm)}
.scramble-letter:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.scramble-letter.used{opacity:.25;pointer-events:none;transform:none}
.scramble-actions{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.scramble-btn{padding:10px 22px;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s}
.scramble-btn-check{background:var(--teal);color:#fff}
.scramble-btn-check:hover{background:var(--teal-dark)}
.scramble-btn-clear{background:var(--gray-light);color:var(--gray)}
.scramble-btn-clear:hover{background:#d8d2cc}
.scramble-feedback{text-align:center;font-family:'Baloo 2',cursive;font-size:16px;font-weight:800;min-height:28px;transition:all .2s}
.scramble-feedback.correct{color:var(--teal)}
.scramble-feedback.wrong{color:var(--coral)}
.scramble-result{text-align:center;padding:24px 16px}
.scramble-result-score{font-family:'Baloo 2',cursive;font-size:44px;font-weight:900;color:var(--brown)}
.scramble-result-label{font-size:14px;color:var(--gray);font-weight:700;margin-top:4px;margin-bottom:20px}
.scramble-stars{display:flex;justify-content:center;gap:4px;margin-bottom:18px}

/* ── DAILY STREAK GAME ──────────────────────────────────────── */
.streak-section{margin-top:28px;margin-bottom:32px}
.streak-banner{background:linear-gradient(135deg,var(--brown) 0%,#4a2e1a 100%);border-radius:20px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-md)}
.streak-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.streak-fire-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.streak-flame{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.streak-count{font-family:'Baloo 2',cursive;font-size:28px;font-weight:900;color:var(--amber);line-height:1}
.streak-count-label{font-size:10px;color:rgba(255,255,255,.6);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.streak-info{flex:1}
.streak-title{font-family:'Baloo 2',cursive;font-size:18px;font-weight:800;color:#fff;margin-bottom:5px}
.streak-sub{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;line-height:1.5}
.streak-cta{background:var(--amber);color:var(--brown);border:none;border-radius:var(--pill);padding:10px 20px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0}
.streak-modal{background:#fff;border-radius:20px;padding:28px 24px;max-width:480px;width:100%;margin:auto;position:relative}
.streak-modal-header{text-align:center;margin-bottom:24px}
.streak-modal-title{font-family:'Baloo 2',cursive;font-size:22px;font-weight:900;color:var(--brown);margin-bottom:6px}
.streak-modal-sub{font-size:13px;color:var(--gray);font-weight:600}
.streak-q-progress{display:flex;gap:4px;justify-content:center;margin-bottom:20px}
.streak-q-dot{width:10px;height:10px;border-radius:50%;background:var(--gray-light);transition:background .2s}
.streak-q-dot.done{background:var(--teal)}
.streak-q-dot.current{background:var(--coral)}
.streak-question{font-family:'Baloo 2',cursive;font-size:17px;font-weight:800;color:var(--brown);text-align:center;margin-bottom:6px;line-height:1.4}
.streak-book-tag{font-size:11px;color:var(--gray);font-weight:700;text-align:center;margin-bottom:18px;font-style:italic}
.streak-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.streak-opt{padding:12px 16px;border:2.5px solid var(--gray-light);border-radius:12px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;color:var(--brown);cursor:pointer;text-align:left;background:#fff;transition:all .15s}
.streak-opt:hover{border-color:var(--coral);background:var(--coral-light)}
.streak-opt.correct{border-color:var(--teal);background:var(--teal-light);color:var(--teal-dark)}
.streak-opt.wrong{border-color:var(--coral);background:var(--coral-light)}
.streak-feedback{font-size:13px;font-weight:700;text-align:center;min-height:20px;margin-bottom:12px}
.streak-feedback.correct{color:var(--teal)}
.streak-feedback.wrong{color:var(--coral)}
.streak-next-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;display:none;transition:background .2s}
.streak-next-btn:hover{background:var(--coral-dark,#b8391c)}
.streak-result{text-align:center;padding:10px 0}
.streak-result-score{font-family:'Baloo 2',cursive;font-size:52px;font-weight:900;color:var(--brown);line-height:1}
.streak-result-label{font-size:15px;color:var(--gray);font-weight:700;margin:6px 0 16px}
.streak-fire-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
.streak-fire-big{width:44px;height:44px}
.streak-new-count{font-family:'Baloo 2',cursive;font-size:32px;font-weight:900;color:var(--amber)}
.streak-new-label{font-size:13px;color:var(--gray);font-weight:700}
@media(max-width:600px){.streak-banner{flex-wrap:wrap}.streak-cta{width:100%;text-align:center}}


@keyframes navNpPulse{0%{box-shadow:0 0 0 0 rgba(232,89,60,.35)}70%{box-shadow:0 0 0 8px rgba(232,89,60,0)}100%{box-shadow:0 0 0 0 rgba(232,89,60,0)}}
.nav-np-pulse .nav-now-playing{animation:navNpPulse .7s ease-out}

/* ── TAGLINE HERO BAND ───────────────────────── */
.tagline-band{background:linear-gradient(135deg,var(--brown) 0%,#3d2614 60%,var(--coral-dark,#b8391c) 100%);padding:52px 24px 48px;text-align:center}
.tagline-inner{max-width:720px;margin:0 auto}
.tagline-eyebrow{font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--amber);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px}
.tagline-headline{font-family:'Baloo 2',cursive;font-size:36px;font-weight:900;color:#fff;line-height:1.15;margin-bottom:16px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
@media(max-width:600px){.tagline-headline{font-size:24px}}
.tagline-sub{font-size:16px;color:rgba(255,255,255,.82);font-weight:600;line-height:1.6;margin-bottom:28px;max-width:560px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.tagline-sub{font-size:14px}}
.tagline-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.tagline-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--coral);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s,transform .15s;box-shadow:0 4px 20px rgba(232,89,60,.4)}
.tagline-btn-primary:hover{background:var(--coral-dark);transform:scale(1.04)}
.tagline-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:transparent;color:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.35);border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:all .2s}
.tagline-btn-secondary:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.1)}
.tagline-stats{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;background:rgba(255,255,255,.08);border-radius:16px;padding:14px 20px;gap:0}
.tagline-stat{text-align:center;padding:6px 20px}
.tagline-stat strong{display:block;font-family:'Baloo 2',cursive;font-size:22px;font-weight:900;color:#fff;line-height:1}
.tagline-stat span{font-size:11px;color:rgba(255,255,255,.65);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tagline-stat-div{width:1px;height:32px;background:rgba(255,255,255,.2);flex-shrink:0}
@media(max-width:500px){.tagline-stat-div{display:none}.tagline-stat{padding:4px 12px}}

/* ── ASEYE COMING SOON FEATURE ───────────────── */
.aseye-feature{background:linear-gradient(135deg,var(--purple-light) 0%,var(--amber-light) 100%);border-radius:24px;overflow:hidden;margin-bottom:44px;box-shadow:var(--shadow-md)}
.aseye-inner{display:flex;align-items:stretch;flex-wrap:wrap;min-height:320px}
.aseye-img-wrap{flex-shrink:0;width:260px;position:relative;overflow:hidden}
.aseye-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
@media(max-width:680px){.aseye-img-wrap{width:100%;height:260px}}
.aseye-coming-badge{position:absolute;top:14px;left:14px;background:var(--amber);color:var(--brown);font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;padding:5px 14px;border-radius:100px;letter-spacing:.4px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.aseye-content{flex:1;padding:32px 28px;display:flex;flex-direction:column;justify-content:center;min-width:220px}
@media(max-width:600px){.aseye-content{padding:22px 20px}}
.aseye-eyebrow{font-size:11px;font-weight:900;color:var(--purple);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.aseye-title{font-family:'Baloo 2',cursive;font-size:26px;font-weight:900;color:var(--brown);line-height:1.2;margin-bottom:12px}
@media(max-width:600px){.aseye-title{font-size:22px}}
.aseye-desc{font-size:14px;color:var(--gray);font-weight:600;line-height:1.65;margin-bottom:16px}
.aseye-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.aseye-tag{background:#fff;border-radius:100px;padding:5px 12px;font-size:12px;font-weight:800;color:var(--brown);box-shadow:var(--shadow-sm)}
.aseye-notify-label{font-size:13px;color:var(--gray);font-weight:700;margin-bottom:10px}
.aseye-notify-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--purple);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .15s;width:fit-content}
.aseye-notify-btn:hover{background:var(--purple-dark);transform:scale(1.03)}

/* ── MAIN NAV MENU ─────────────────────────────── */
.nav-menu{display:flex;align-items:center;gap:4px}
.nav-link{padding:7px 13px;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:var(--gray);text-decoration:none;border:none;background:transparent;cursor:pointer;transition:all .2s;white-space:nowrap}
.nav-link:hover{color:var(--coral);background:var(--coral-light)}
.nav-link.active{color:var(--coral);background:var(--coral-light)}
.nav-link.nav-cta{background:var(--coral);color:#fff;margin-left:4px}
.nav-link.nav-cta:hover{background:var(--coral-dark)}

/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:background .2s}
.nav-hamburger:hover{background:var(--cream-dark)}
.nav-hamburger span{display:block;width:22px;height:2.5px;background:var(--brown);border-radius:2px;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{position:fixed;top:68px;left:0;right:0;background:#fff;border-bottom:2px solid var(--cream-dark);z-index:99;box-shadow:var(--shadow-md);transform:translateY(-110%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:12px 20px 20px}
.nav-drawer.open{transform:translateY(0)}
.nav-drawer .nav-link{padding:13px 16px;border-radius:12px;font-size:15px;display:flex;align-items:center;gap:10px;color:var(--brown)}
.nav-drawer .nav-link:hover{background:var(--coral-light);color:var(--coral)}
.nav-drawer .nav-link.nav-cta{background:var(--coral);color:#fff;justify-content:center;margin-top:8px}
.nav-drawer-divider{height:1px;background:var(--cream-dark);margin:8px 0}

@media(max-width:820px){
  .nav-menu{display:none}
  .nav-hamburger{display:flex}
}
@media(min-width:821px){
  .nav-drawer{display:none!important}
}

/* ── HERO CAROUSEL ─────────────────────────────── */
.carousel{position:relative;width:100%;overflow:hidden;background:#1a0a04;user-select:none}
.carousel-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.carousel-slide{min-width:100%;position:relative;height:400px;flex-shrink:0;overflow:hidden}
@media(max-width:600px){.carousel-slide{height:280px}}

/* Slide image layer */
.carousel-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.65) saturate(1.15)}

/* Coming-soon gradient placeholder */
.carousel-slide.cs-slide{background:linear-gradient(135deg,var(--purple-dark) 0%,var(--coral) 60%,var(--amber) 100%)}
.cs-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding:24px}
.cs-lock-icon{font-size:48px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.cs-lock-title{font-family:'Baloo 2',cursive;font-size:24px;font-weight:900;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.cs-lock-sub{font-size:13px;font-weight:700;opacity:.85;letter-spacing:.5px}
.cs-badge{display:inline-flex;align-items:center;gap:6px;background:var(--amber);color:var(--brown);font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;padding:4px 14px;border-radius:100px;margin-top:4px;letter-spacing:.4px;text-transform:uppercase}

/* Slide overlay + text */
.carousel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,10,4,.82) 0%,rgba(26,10,4,.3) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:32px 36px}
@media(max-width:600px){.carousel-overlay{padding:20px 20px}}
.carousel-tag{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;padding:4px 12px;border-radius:100px;margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase;width:fit-content}
.carousel-title{font-family:'Baloo 2',cursive;font-size:30px;font-weight:900;color:#fff;line-height:1.15;margin-bottom:8px;text-shadow:0 2px 16px rgba(0,0,0,.4)}
@media(max-width:600px){.carousel-title{font-size:22px}}
.carousel-desc{font-size:14px;color:rgba(255,255,255,.85);font-weight:600;line-height:1.5;margin-bottom:16px;max-width:480px}
@media(max-width:600px){.carousel-desc{font-size:12px;margin-bottom:12px}}
.carousel-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:var(--coral);color:#fff;border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .15s;width:fit-content}
.carousel-btn:hover{background:var(--coral-dark);transform:scale(1.03)}

/* Dots */
.carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:all .3s}
.carousel-dot.active{background:#fff;width:22px;border-radius:4px}

/* Prev / Next arrows */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.3);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;font-size:18px}
.carousel-arrow:hover{background:rgba(255,255,255,.35);transform:translateY(-50%) scale(1.08)}
.carousel-arrow.prev{left:14px}
.carousel-arrow.next{right:14px}
@media(max-width:480px){.carousel-arrow{display:none}}

/* ── CAROUSEL BOOK-GRID COLLAGE BACKGROUND ──── */
.cs-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:3px;overflow:hidden}
.cs-collage img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.2)}
.cs-collage .cs-col-feat{grid-row:span 2;filter:brightness(.6) saturate(1.2)}
/* First cell spans 2 rows */
.cs-collage img:first-child{grid-row:span 2}

/* ════════════════════════════════════════════════
   VISUAL FLIPBOOK
   ════════════════════════════════════════════════ */
.flipbook-wrap{background:var(--brown);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;position:relative;user-select:none}
/* Stage: square ratio for the 1024x1024 artwork */
.flipbook-stage{position:relative;width:100%;height:260px;overflow:hidden;background:#1a0a04}
@media(max-width:600px){.flipbook-stage{height:200px}}
@media(max-width:380px){.flipbook-stage{height:160px}}
/* Panels */
.flipbook-panel{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;display:flex;align-items:center;justify-content:center}
.flipbook-panel.active{opacity:1;z-index:2}
.flipbook-panel.prev{opacity:0;z-index:1}
.flipbook-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Placeholder panel (no art yet) */
.flipbook-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#1a0a04 0%,#2c1a0e 100%)}
.flipbook-placeholder-icon{opacity:.25}
.flipbook-placeholder-text{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:rgba(255,255,255,.3);text-align:center;padding:0 20px}
/* Caption bar — always on top of image */
.flipbook-caption{position:absolute;bottom:0;left:0;right:0;z-index:5;background:linear-gradient(transparent,rgba(10,5,2,.92) 100%);padding:40px 18px 14px;pointer-events:none}
.flipbook-caption-text{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:#fff;line-height:1.5;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media(max-width:500px){.flipbook-caption-text{font-size:12px}}
/* Nav controls */
.flipbook-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.06)}
.flipbook-nav-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.flipbook-nav-btn:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4)}
.flipbook-nav-btn:disabled{opacity:.3;cursor:default}
/* Dot progress */
.flipbook-dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;flex:1;padding:0 10px}
.flipbook-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;padding:0;transition:all .25s;flex-shrink:0}
.flipbook-dot.active{background:var(--coral);width:18px;border-radius:4px}
.flipbook-dot.visited{background:rgba(255,255,255,.55)}
/* Panel counter */
.flipbook-counter{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:rgba(255,255,255,.5);white-space:nowrap}
/* Sync row */
.flipbook-sync{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.07)}
.flipbook-sync-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.45);flex:1}
.flipbook-sync-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.flipbook-sync-toggle input[type=checkbox]{width:14px;height:14px;accent-color:var(--coral);cursor:pointer}
.flipbook-sync-toggle span{font-size:11px;font-weight:700;color:rgba(255,255,255,.55)}
/* Animate in */
@keyframes fbSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.flipbook-wrap{animation:fbSlideUp .35s ease}

/* ══════════════════════════════════════════════════════════════
   HABIT CHALLENGE GAME
══════════════════════════════════════════════════════════════ */
.habit-card{background:linear-gradient(135deg,var(--teal) 0%,#0d7a6b 100%);border-radius:20px;padding:24px;color:#fff;margin-bottom:16px;text-align:center}
.habit-icon{font-size:52px;margin-bottom:8px;line-height:1}
.habit-lesson{font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin-bottom:6px}
.habit-title{font-family:"Baloo 2",cursive;font-size:20px;font-weight:800;margin-bottom:16px;line-height:1.3}
.habit-challenge-box{background:rgba(255,255,255,.15);border-radius:14px;padding:16px;text-align:left;margin-bottom:20px}
.habit-challenge-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:6px}
.habit-challenge-text{font-size:15px;font-weight:700;line-height:1.5}
.habit-streak-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px}
.habit-day{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .3s;cursor:default}
.habit-day.done{background:rgba(255,255,255,.25);border-color:#fff}
.habit-day.today{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);animation:habitPulse 2s infinite}
@keyframes habitPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.3)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.1)}}
.habit-btn{background:#fff;color:var(--teal);font-family:"Baloo 2",cursive;font-size:15px;font-weight:800;border:none;border-radius:100px;padding:12px 28px;cursor:pointer;transition:all .2s;width:100%}
.habit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.habit-btn.done-btn{background:rgba(255,255,255,.2);color:#fff;cursor:default}
.habit-badge{background:rgba(255,255,255,.15);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-top:16px}
.habit-badge-icon{font-size:28px;flex-shrink:0}
.habit-badge-text{font-size:13px;font-weight:700;opacity:.85}
.habit-badge-name{font-family:"Baloo 2",cursive;font-size:15px;font-weight:800}
.habit-empty{text-align:center;padding:40px 20px;color:var(--gray)}
.game-empty-icon{color:var(--cream-dark);margin-bottom:14px}
.game-empty-icon svg{display:block}
.habit-empty-text{font-size:15px;font-weight:700;color:var(--gray)}

/* ══════════════════════════════════════════════════════════════
   STORY SEQUENCE GAME
══════════════════════════════════════════════════════════════ */
.seq-intro{text-align:center;padding:16px 0 20px}
.seq-intro-title{font-family:"Baloo 2",cursive;font-size:18px;font-weight:800;color:var(--brown);margin-bottom:6px}
.seq-intro-sub{font-size:13px;color:var(--gray);font-weight:600}
.seq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:480px){.seq-grid{grid-template-columns:repeat(3,1fr)}}
.seq-panel{border-radius:12px;overflow:hidden;border:3px solid transparent;cursor:grab;transition:all .25s;position:relative;background:var(--brown);aspect-ratio:1;user-select:none}
.seq-panel:active{cursor:grabbing}
.seq-panel.dragging{opacity:.5;transform:scale(.96)}
.seq-panel.drag-over{border-color:var(--coral);transform:scale(1.04)}
.seq-panel.correct{border-color:#2ecc71!important;animation:seqCorrect .4s ease}
.seq-panel.wrong{border-color:var(--coral)!important;animation:seqWrong .4s ease}
@keyframes seqCorrect{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes seqWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.seq-panel img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.seq-panel-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);color:#fff;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.seq-panel-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:linear-gradient(135deg,#1a0a04,#2c1a0e);color:rgba(255,255,255,.4)}
.seq-panel-placeholder svg{opacity:.4}
.seq-panel-placeholder span{font-size:11px;font-weight:700;text-align:center;padding:0 8px}
.seq-result-bar{display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.seq-score{font-family:"Baloo 2",cursive;font-size:16px;font-weight:800;color:var(--brown)}
.seq-check-btn{background:var(--coral);color:#fff;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;border:none;border-radius:100px;padding:8px 18px;cursor:pointer;transition:all .2s}
.seq-check-btn:hover{background:#e05a2b}
.seq-shuffle-btn{background:var(--teal);color:#fff;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;border:none;border-radius:100px;padding:8px 18px;cursor:pointer;margin-left:8px}
.seq-caption-hint{text-align:center;font-size:12px;color:var(--gray);font-weight:600;margin-bottom:16px;min-height:18px}
.seq-no-art{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center}
.seq-no-art-text{font-size:15px;font-weight:700;color:var(--gray)}

/* ══════════════════════════════════════════════════════════════
   EMOTION METER GAME
══════════════════════════════════════════════════════════════ */
.emo-scene-img{width:100%;border-radius:16px;overflow:hidden;background:var(--brown);aspect-ratio:1;margin-bottom:14px;position:relative}
.emo-scene-img img{width:100%;height:100%;object-fit:cover;display:block}
.emo-scene-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1a0a04,#2c1a0e);padding:20px}
.emo-scene-desc{text-align:center;font-family:"Baloo 2",cursive;font-size:15px;font-weight:800;color:var(--brown);margin-bottom:6px;min-height:24px}
.emo-question{text-align:center;font-size:14px;color:var(--gray);font-weight:700;margin-bottom:16px}
.emo-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.emo-btn{background:#fff;border:3px solid var(--cream-dark);border-radius:16px;padding:14px 8px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:"Nunito",sans-serif}
.emo-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.emo-btn.selected{border-width:3px}
.emo-btn.selected.happy{border-color:#FFD700;background:#FFF9E6}
.emo-btn.selected.excited{border-color:#FF8C42;background:#FFF2E8}
.emo-btn.selected.scared{border-color:#7B68EE;background:#F0EEF9}
.emo-btn.selected.surprised{border-color:#00BCD4;background:#E8F9FB}
.emo-btn.selected.sad{border-color:#78909C;background:#F0F4F6}
.emo-btn.selected.proud{border-color:#4CAF50;background:#EBF7EC}
.emo-btn.selected.angry{border-color:#E53935;background:#FDEDEC}
.emo-btn.selected.curious{border-color:#FF69B4;background:#FDF0F6}
.emo-face{display:block;width:40px;height:40px;flex-shrink:0}
.emo-face svg{width:100%;height:100%}
.emo-label{font-size:12px;font-weight:800;color:var(--brown)}
.emo-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.emo-nav-btn{background:var(--cream);border:2px solid var(--cream-dark);border-radius:100px;padding:8px 18px;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;color:var(--brown);cursor:pointer;transition:all .2s;flex:1}
.emo-nav-btn:hover{background:var(--cream-dark)}
.emo-nav-btn:disabled{opacity:.4;cursor:default}
.emo-nav-btn.next-btn{background:var(--coral);color:#fff;border-color:var(--coral)}
.emo-nav-btn.next-btn:hover{background:#e05a2b}
.emo-progress-dots{display:flex;gap:5px;justify-content:center;margin-bottom:14px}
.emo-dot{width:7px;height:7px;border-radius:50%;background:var(--cream-dark);transition:all .3s}
.emo-dot.active{background:var(--coral);width:18px;border-radius:4px}
.emo-dot.done{background:var(--teal)}
.emo-summary{padding:16px;background:var(--cream);border-radius:16px;margin-bottom:12px}
.emo-summary-title{font-family:"Baloo 2",cursive;font-size:16px;font-weight:800;color:var(--brown);margin-bottom:12px;text-align:center}
.emo-summary-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--cream-dark)}
.emo-summary-row:last-child{border-bottom:none}
.emo-summary-face{width:32px;height:32px;flex-shrink:0}
.emo-summary-face svg{width:100%;height:100%}
.emo-summary-scene{font-size:12px;font-weight:700;color:var(--gray);flex:1}
.emo-summary-choice{font-size:13px;font-weight:800;color:var(--brown)}
.emo-replay-btn{width:100%;background:var(--teal);color:#fff;font-family:"Baloo 2",cursive;font-size:15px;font-weight:800;border:none;border-radius:100px;padding:12px;cursor:pointer}

/* ══════════════════════════════════════════════════════════════
   VOCABULARY GAME
══════════════════════════════════════════════════════════════ */
.vocab-progress{display:flex;gap:5px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.vocab-dot{width:8px;height:8px;border-radius:50%;background:var(--cream-dark);transition:all .3s;cursor:default}
.vocab-dot.active{background:var(--coral);width:20px;border-radius:4px}
.vocab-dot.done{background:var(--teal)}
.vocab-card{background:#fff;border:2.5px solid var(--cream-dark);border-radius:20px;padding:20px;margin-bottom:14px;transition:border-color .3s}
.vocab-card.correct-card{border-color:var(--teal)}
.vocab-card.wrong-card{border-color:var(--coral)}
.vocab-word{font-family:"Baloo 2",cursive;font-size:26px;font-weight:800;color:var(--brown);text-align:center;margin-bottom:4px}
.vocab-pos{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;text-align:center;margin-bottom:12px}
.vocab-meaning{font-size:14px;font-weight:700;color:var(--brown);line-height:1.6;background:var(--cream);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.vocab-example{font-size:13px;color:var(--gray);font-weight:600;font-style:italic;padding:0 4px;margin-bottom:16px;line-height:1.5}
.vocab-exercise-label{font-size:12px;font-weight:800;color:var(--brown);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.vocab-sentence{font-size:15px;font-weight:700;color:var(--brown);line-height:1.7;margin-bottom:10px;background:var(--cream);border-radius:10px;padding:10px 14px}
.vocab-sentence strong{color:var(--coral);border-bottom:2px dashed var(--coral)}
.vocab-input-row{display:flex;gap:8px;margin-bottom:10px}
.vocab-input{flex:1;border:2.5px solid var(--cream-dark);border-radius:12px;padding:10px 14px;font-family:"Nunito",sans-serif;font-size:15px;font-weight:700;color:var(--brown);outline:none;transition:border-color .2s}
.vocab-input:focus{border-color:var(--teal)}
.vocab-input.correct-input{border-color:var(--teal);background:#f0fdf8}
.vocab-input.wrong-input{border-color:var(--coral);background:#fff5f3}
.vocab-check-btn{background:var(--teal);color:#fff;font-family:"Baloo 2",cursive;font-size:14px;font-weight:800;border:none;border-radius:12px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:all .2s}
.vocab-check-btn:hover{background:#0d7a6b}
.vocab-check-btn:disabled{opacity:.4;cursor:default}
.vocab-feedback{font-size:13px;font-weight:700;min-height:18px;margin-bottom:10px;padding:0 4px}
.vocab-feedback.correct{color:var(--teal)}
.vocab-feedback.wrong{color:var(--coral)}
.vocab-nav{display:flex;gap:8px;margin-top:4px}
.vocab-nav-btn{flex:1;border-radius:100px;padding:10px;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;border:2px solid var(--cream-dark);background:#fff;color:var(--brown);cursor:pointer;transition:all .2s}
.vocab-nav-btn:hover{background:var(--cream)}
.vocab-nav-btn:disabled{opacity:.35;cursor:default}
.vocab-nav-btn.next-btn{background:var(--coral);color:#fff;border-color:var(--coral)}
.vocab-nav-btn.next-btn:hover{background:#e05a2b}
.vocab-summary{background:var(--cream);border-radius:16px;padding:16px;margin-bottom:14px}
.vocab-summary-title{font-family:"Baloo 2",cursive;font-size:16px;font-weight:800;color:var(--brown);margin-bottom:12px;text-align:center}
.vocab-summary-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--cream-dark)}
.vocab-summary-row:last-child{border-bottom:none}
.vocab-summary-word{font-family:"Baloo 2",cursive;font-size:15px;font-weight:800;color:var(--brown);min-width:90px}
.vocab-summary-result{font-size:12px;font-weight:700;flex:1}
.vocab-summary-result.ok{color:var(--teal)}
.vocab-summary-result.no{color:var(--coral)}
.vocab-replay-btn{width:100%;background:var(--teal);color:#fff;font-family:"Baloo 2",cursive;font-size:15px;font-weight:800;border:none;border-radius:100px;padding:12px;cursor:pointer}

/* ══════════════════════════════════════════════════════════════
   HABIT REMINDER CARD (main page)
══════════════════════════════════════════════════════════════ */
.habit-reminder-card{background:linear-gradient(135deg,#0d8a7a 0%,#096b5e 100%);border-radius:18px;padding:0;margin:0 20px 28px;overflow:hidden;box-shadow:0 4px 20px rgba(13,138,122,.25)}
.hr-top{padding:16px 18px 12px}
.hr-story{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:3px}
.hr-lesson{font-family:"Baloo 2",cursive;font-size:18px;font-weight:800;color:#fff;margin-bottom:6px;line-height:1.3}
.hr-challenge{font-size:13px;font-weight:600;line-height:1.6;color:rgba(255,255,255,.88);padding:10px 12px;background:rgba(0,0,0,.12);border-radius:10px;margin-bottom:0}
.hr-bottom{background:rgba(0,0,0,.15);padding:12px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hr-streak{display:flex;align-items:center;gap:4px;flex:1}
.hr-dot{width:9px;height:9px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;flex-shrink:0;transition:all .3s}
.hr-dot.done{background:#fff;border-color:#fff}
.hr-streak-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.65);margin-left:6px;white-space:nowrap}
.hr-btn{background:#fff;color:#0d8a7a;font-family:"Baloo 2",cursive;font-size:13px;font-weight:800;border:none;border-radius:100px;padding:8px 20px;cursor:pointer;flex-shrink:0;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.hr-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.hr-done-badge{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:100px;padding:7px 14px;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.hr-done-badge svg{flex-shrink:0}

/* ── TESTIMONIALS ── */
.testimonials-section{padding:0 0 44px}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.testi-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 20px 18px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s;overflow:hidden;min-width:0}
.testi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testi-quote{font-size:13px;font-weight:600;color:var(--brown);line-height:1.75;flex:1;position:relative;padding-left:18px}
.testi-quote::before{content:'\201C';position:absolute;left:0;top:-4px;font-size:32px;line-height:1;color:var(--coral);font-family:'Baloo 2',cursive;opacity:.7}
.testi-person{display:flex;align-items:center;gap:12px;min-width:0}
.testi-avatar{width:46px!important;height:46px!important;min-width:46px;min-height:46px;max-width:46px;max-height:46px;border-radius:50%;object-fit:cover;border:3px solid var(--cream-dark);flex-shrink:0;display:block;overflow:hidden}
.testi-name{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:var(--brown);line-height:1.2}
.testi-role{font-size:11px;font-weight:600;color:var(--gray);line-height:1.4;margin-top:2px}
.testi-stars{display:flex;gap:2px;margin-bottom:4px}
.testi-star{color:var(--amber);font-size:13px;line-height:1}

}

/* ══════════════════════════════════════════════════════
   HABIT & GOALS DASHBOARD
══════════════════════════════════════════════════════ */
.hgd-section{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:44px}
.hgd-header{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);padding:20px 24px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hgd-header-icon{width:44px;height:44px;background:rgba(255,255,255,.18);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hgd-header-text h2{font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:#fff;margin:0;line-height:1.2}
.hgd-header-text p{font-size:12px;color:rgba(255,255,255,.8);font-weight:600;margin:3px 0 0}
.hgd-user-pill{margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:var(--pill);padding:6px 14px;cursor:pointer;transition:background .2s}
.hgd-user-pill:hover{background:rgba(255,255,255,.28)}
.hgd-user-name{font-size:13px;font-weight:800;color:#fff}
.hgd-user-edit{font-size:11px;color:rgba(255,255,255,.7);font-weight:600}

/* Name Setup */
.hgd-setup{padding:32px 24px;text-align:center}
.hgd-setup,#hgdGuestMsg,#hgdNameSetup{color:var(--brown)}
.hgd-setup h3{font-family:'Baloo 2',cursive;font-size:22px;font-weight:800;color:var(--brown);margin-bottom:8px}
.hgd-setup p{font-size:13px;color:var(--gray);font-weight:600;margin-bottom:22px;line-height:1.7}
.hgd-name-row{display:flex;gap:10px;max-width:360px;margin:0 auto}
.hgd-name-input{flex:1;border:2px solid var(--gray-light);border-radius:var(--pill);padding:11px 18px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:700;color:var(--brown);background:var(--cream);outline:none;transition:border-color .2s}
.hgd-name-input:focus{border-color:var(--teal)}
.hgd-name-btn{background:var(--teal);color:#fff;border:none;border-radius:var(--pill);padding:11px 22px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s}
.hgd-name-btn:hover{background:var(--teal-dark)}

/* Dashboard body */
.hgd-body{padding:20px 24px 24px}
.hgd-summary-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:22px}
.hgd-stat-card{background:var(--cream);border-radius:var(--radius);padding:14px 16px;text-align:center}
.hgd-stat-num{font-family:'Baloo 2',cursive;font-size:28px;font-weight:800;color:var(--brown);line-height:1}
.hgd-stat-label{font-size:11px;color:var(--gray);font-weight:700;margin-top:4px}
.hgd-stat-card.coral .hgd-stat-num{color:var(--coral)}
.hgd-stat-card.teal .hgd-stat-num{color:var(--teal)}
.hgd-stat-card.amber .hgd-stat-num{color:var(--amber)}
.hgd-stat-card.purple .hgd-stat-num{color:var(--purple)}

/* Goals */
.hgd-goals-title{font-family:'Baloo 2',cursive;font-size:16px;font-weight:800;color:var(--brown);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hgd-goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:22px}
.hgd-goal-card{background:var(--cream);border-radius:var(--radius);padding:16px;border:2px solid var(--gray-light);transition:border-color .2s}
.hgd-goal-card.active{border-color:var(--teal-light)}
.hgd-goal-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hgd-goal-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hgd-goal-icon.reading{background:var(--coral-light)}
.hgd-goal-icon.exercise{background:var(--teal-light)}
.hgd-goal-icon.writing{background:var(--amber-light)}
.hgd-goal-icon.custom{background:var(--purple-light)}
.hgd-goal-label{font-family:'Baloo 2',cursive;font-size:14px;font-weight:800;color:var(--brown);flex:1}
.hgd-goal-freq{font-size:10px;font-weight:700;color:var(--gray);background:var(--gray-light);border-radius:var(--pill);padding:2px 8px}
.hgd-goal-target{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:10px}
.hgd-goal-progress{height:6px;background:var(--gray-light);border-radius:3px;overflow:hidden;margin-bottom:10px}
.hgd-goal-fill{height:100%;border-radius:3px;transition:width .4s;background:var(--teal)}
.hgd-goal-fill.coral{background:var(--coral)}
.hgd-goal-fill.amber{background:var(--amber)}
.hgd-goal-fill.purple{background:var(--purple)}
.hgd-goal-actions{display:flex;gap:8px;align-items:center}
.hgd-log-btn{background:var(--teal);color:#fff;border:none;border-radius:var(--pill);padding:7px 16px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:5px}
.hgd-log-btn:hover{background:var(--teal-dark)}
.hgd-log-btn.done{background:var(--gray-light);color:var(--gray);cursor:default}
.hgd-log-count{font-size:11px;color:var(--gray);font-weight:700;margin-left:auto}

/* Log entry form */
.hgd-log-form{background:var(--cream-dark);border-radius:var(--radius);padding:14px 16px;margin-top:10px;display:none}
.hgd-log-form.open{display:block}
.hgd-log-form textarea{width:100%;border:2px solid var(--gray-light);border-radius:10px;padding:10px 12px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--brown);background:#fff;resize:none;outline:none;transition:border-color .2s;box-sizing:border-box}
.hgd-log-form textarea:focus{border-color:var(--teal)}
.hgd-log-form-btns{display:flex;gap:8px;margin-top:8px}
.hgd-log-submit{background:var(--teal);color:#fff;border:none;border-radius:var(--pill);padding:8px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer}
.hgd-log-cancel{background:transparent;color:var(--gray);border:2px solid var(--gray-light);border-radius:var(--pill);padding:8px 14px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer}

/* Add custom goal */
.hgd-add-goal-btn{display:flex;align-items:center;gap:8px;background:transparent;border:2px dashed var(--gray-light);border-radius:var(--radius);padding:14px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--gray);cursor:pointer;width:100%;transition:all .2s;margin-bottom:22px}
.hgd-add-goal-btn:hover{border-color:var(--teal);color:var(--teal)}
.hgd-add-goal-form{background:var(--cream);border-radius:var(--radius);padding:18px;border:2px solid var(--teal-light);margin-bottom:22px;display:none}
.hgd-add-goal-form.open{display:block}
.hgd-add-goal-form h4{font-family:'Baloo 2',cursive;font-size:15px;font-weight:800;color:var(--brown);margin-bottom:14px}
.hgd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.hgd-form-field{display:flex;flex-direction:column;gap:4px}
.hgd-form-field label{font-size:11px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}
.hgd-form-field input,.hgd-form-field select{border:2px solid var(--gray-light);border-radius:10px;padding:9px 12px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--brown);background:#fff;outline:none;transition:border-color .2s}
.hgd-form-field input:focus,.hgd-form-field select:focus{border-color:var(--teal)}
.hgd-form-btns{display:flex;gap:8px;margin-top:12px}

/* Recent logs */
.hgd-logs-title{font-family:'Baloo 2',cursive;font-size:16px;font-weight:800;color:var(--brown);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.hgd-log-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.hgd-log-list::-webkit-scrollbar{width:3px}
.hgd-log-list::-webkit-scrollbar-thumb{background:var(--cream-dark);border-radius:2px}
.hgd-log-entry{background:var(--cream);border-radius:10px;padding:10px 14px;display:flex;gap:10px;align-items:flex-start}
.hgd-log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.hgd-log-meta{flex:1}
.hgd-log-goal-name{font-size:12px;font-weight:800;color:var(--brown)}
.hgd-log-note{font-size:12px;color:var(--gray);font-weight:600;margin-top:2px;line-height:1.5}
.hgd-log-date{font-size:10px;color:var(--gray);font-weight:600;flex-shrink:0;padding-top:3px}
.hgd-empty-logs{text-align:center;padding:24px;color:var(--gray);font-size:13px;font-weight:600}

/* Checklist */
.hgd-checklist{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.hgd-check-item{display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .2s;border:2px solid transparent}
.hgd-check-item:hover{background:var(--teal-light);border-color:var(--teal-light)}
.hgd-check-item.done{opacity:.65}
.hgd-check-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--gray-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;background:#fff}
.hgd-check-item.done .hgd-check-box{background:var(--teal);border-color:var(--teal)}
.hgd-check-text{font-size:13px;font-weight:700;color:var(--brown);flex:1}
.hgd-check-item.done .hgd-check-text{text-decoration:line-through;color:var(--gray)}
.hgd-check-time{font-size:10px;color:var(--gray);font-weight:600}

/* Parent share button */
.hgd-share-row{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px;border-top:2px solid var(--cream-dark);margin-top:4px}
.hgd-share-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:var(--amber);color:var(--brown);border:none;border-radius:var(--pill);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s}
.hgd-share-btn:hover{background:#d98c00}
.hgd-share-btn.whatsapp{background:#25D366;color:#fff}
.hgd-share-btn.whatsapp:hover{background:#1ebe57}

@media(max-width:600px){
  .hgd-form-row{grid-template-columns:1fr}
  .hgd-goals-grid{grid-template-columns:1fr}
  .hgd-summary-row{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){.testimonials-grid{grid-template-columns:1fr}.testi-card{padding:16px 16px 14px}}
/* ═══════════════════════════════════════════════════════════
   AUTH MODAL — Login / Sign-up
   ═══════════════════════════════════════════════════════════ */

/* Overlay */
#authOverlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(44,26,14,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
#authOverlay.auth-open {
  opacity: 1; pointer-events: all;
}

/* Card */
.auth-card {
  background: #fff;
  color: var(--brown);
  border: 1.5px solid rgba(217,200,186,.6);
  border-radius: 28px;
  width: 100%; max-width: 420px;
  box-shadow: 0 32px 80px rgba(44,26,14,.22), 0 0 0 1.5px rgba(232,89,60,.1);
  overflow: hidden;
  transform: translateY(24px) scale(.97);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
#authOverlay.auth-open .auth-card {
  transform: translateY(0) scale(1);
}

/* Header strip */
.auth-header {
  background: linear-gradient(135deg, #B8391C, #E8593C 55%, #F0A020);
  padding: 28px 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.auth-header::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 20px);
}
.auth-logo-mark {
  font-family: 'Baloo 2', cursive;
  font-size: 26px; font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  position: relative; z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.auth-logo-mark span { color: #FFD600; }
.auth-tagline {
  font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,.85);
  margin-top: 3px;
  position: relative; z-index: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Body */
.auth-body {
  padding: 28px 28px 24px;
  background: linear-gradient(180deg,#fff 0%,#fffaf5 100%);
}

/* Tab toggle (Login / Sign up) */
.auth-toggle {
  display: flex;
  background: var(--cream-dark);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 22px;
  gap: 4px;
}
.auth-toggle-btn {
  flex: 1;
  padding: 9px 0;
  border: none; border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: var(--brown);
  opacity: .75;
  transition: all .2s;
}
.auth-toggle-btn.active {
  background: #fffaf6;
  color: var(--brown);
  opacity: 1;
  border: 1.5px solid rgba(232,89,60,.22);
  box-shadow: 0 4px 12px rgba(232,89,60,.14);
}

/* Google button */
.auth-google-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px;
  border: 2px solid #DDCFC0;
  border-radius: 14px;
  background: #FFFCF8;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 800;
  color: var(--brown);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.auth-google-btn:hover {
  border-color: var(--coral);
  background: #FFF1EA;
  color: var(--brown);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232,89,60,.15);
}
.auth-google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700;
  color: var(--gray);
  text-transform: uppercase; letter-spacing: .5px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1;
  height: 1.5px; background: var(--gray-light);
}

/* Form fields */
.auth-field {
  margin-bottom: 14px;
  position: relative;
}
.auth-field label {
  display: block;
  font-size: 12px; font-weight: 800;
  color: var(--brown);
  margin-bottom: 5px;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.auth-field input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #DDCFC0;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--brown);
  background: #FFFCFB;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.auth-field input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(232,89,60,.12);
  background: #fff;
}
.auth-field input::placeholder { color: #9F8778; font-weight: 600; }

/* Password toggle eye */
.auth-eye {
  position: absolute; right: 14px; bottom: 13px;
  background: none; border: none; cursor: pointer;
  color: var(--brown); opacity: .75; display: flex; align-items: center;
  padding: 0;
}

/* Error message */
.auth-error {
  background: #FEE8E3;
  border: 1.5px solid #F5B3A5;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  color: #B8391C;
  margin-bottom: 14px;
  display: none;
  align-items: center; gap: 8px;
}
.auth-error.visible { display: flex; }

/* Submit button */
.auth-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #B8391C, var(--coral));
  border: none; border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px; font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #8B2E00;
  transition: transform .14s, box-shadow .14s, opacity .2s;
  letter-spacing: .2px;
  margin-bottom: 12px;
}
.auth-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #8B2E00; }
.auth-submit-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8B2E00; }
.auth-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Loading spinner in button */
.auth-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Forgot password link */
.auth-forgot {
  text-align: right; margin-top: -8px; margin-bottom: 14px;
}
.auth-forgot a {
  font-size: 12.5px; font-weight: 700;
  color: var(--coral); text-decoration: none;
}
.auth-forgot a:hover { text-decoration: underline; }

/* Close button */
.auth-close-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px;
  background: rgba(44,26,14,.18); border: none; border-radius: 50%;
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background .2s;
}
.auth-close-btn:hover { background: rgba(44,26,14,.32); }

/* Footer note */
.auth-footer-note {
  text-align: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.5;
}
.auth-footer-note a { color: var(--coral); text-decoration: none; }

/* Forgot password mini-panel */
.auth-forgot-panel { display: none; }
.auth-forgot-panel.visible { display: block; }
.auth-main-panel { display: block; }
.auth-main-panel.hidden { display: none; }

/* ── Nav Login Button ── */
.nav-login-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: var(--coral); color: #fff;
  border: none; border-radius: var(--pill);
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 #8B2E00;
  transition: transform .14s, box-shadow .14s;
  text-decoration: none;
}
.nav-login-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #8B2E00; }
.nav-login-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #8B2E00; }

/* Nav user avatar pill (when logged in) */
.nav-user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px;
  background: var(--cream-dark);
  border-radius: var(--pill);
  cursor: pointer;
  border: 1.5px solid var(--gray-light);
  transition: background .2s;
  position: relative;
}
.nav-user-pill:hover { background: #EDE8E2; }
.nav-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.nav-user-name {
  font-size: 13px; font-weight: 800; color: var(--brown);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nav user dropdown */
.nav-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(44,26,14,.16);
  border: 1.5px solid var(--gray-light);
  min-width: 200px;
  padding: 8px;
  z-index: 9990;
  display: none;
}
.nav-user-dropdown.open { display: block; }
.nav-user-dropdown-email {
  padding: 8px 12px 10px;
  font-size: 12px; font-weight: 700; color: var(--gray);
  border-bottom: 1.5px solid var(--gray-light);
  margin-bottom: 6px;
  word-break: break-all;
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 800; color: var(--brown);
  cursor: pointer;
  transition: background .15s;
  border: none; background: none; width: 100%; text-align: left;
  font-family: 'Nunito', sans-serif;
}
.nav-dropdown-item:hover { background: var(--cream-dark); }
.nav-dropdown-item.danger { color: #B8391C; }

/* ── Habit Dashboard — logged in header ── */
.hgd-auth-email-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--pill);
  padding: 4px 12px;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-top: 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Responsive */
@media (max-width: 480px) {
  .auth-card { border-radius: 20px; }
  .auth-header { padding: 22px 22px 18px; }
  .auth-body { padding: 20px 20px 18px; }
}

/* ── Auth nav element defaults & responsive ── */
/* Default: login button visible, user pill hidden */
#navAuthLoginBtn { display: flex; }
#navAuthUserPill { display: none; }

/* When logged in (body class set by authRefreshNav) */
body.hl-logged-in #navAuthLoginBtn { display: none; }
body.hl-logged-in #navAuthUserPill { display: flex; }

/* Mobile: hide BOTH desktop elements — drawer handles auth on mobile */
@media(max-width:820px){
  #navAuthLoginBtn { display: none !important; }
  #navAuthUserPill { display: none !important; }
}
@media(min-width:821px){
  /* Hide drawer auth row on desktop — nav handles it */
  #navDrawerAuthRow { display: none !important; }
}

/* Nav user pill — tighter on mid-sizes */
@media(max-width:1024px){
  .nav-user-name { max-width: 70px; }
}

/* Auth modal full-screen on very small phones */
@media(max-width:380px){
  #authOverlay { padding: 0; align-items: flex-end; }
  .auth-card { border-radius: 28px 28px 0 0; max-width: 100%; }
}

/* ── Notify overlay open state ── */
#notifyOverlay.notify-open {
  opacity: 1 !important;
  pointer-events: all !important;
}
#notifyOverlay.notify-open #notifyCard {
  transform: translateY(0) scale(1) !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE APP LANDING PAGE
   ═══════════════════════════════════════════════════════════ */
.app-landing-page{background:
  radial-gradient(circle at top left,rgba(232,89,60,.14),transparent 30%),
  radial-gradient(circle at top right,rgba(26,158,120,.12),transparent 28%),
  linear-gradient(180deg,#fff 0%,var(--cream) 38%,#fff 100%);
}
.app-landing-page main{padding:0 28px 72px}
.app-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(44,26,14,.08)}
.app-nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.app-nav-links a{text-decoration:none;color:var(--brown);font-size:14px;font-weight:800}
.app-nav-links a:hover{color:var(--coral)}
.app-nav-cta{padding:10px 18px;border-radius:var(--pill);background:var(--coral);color:#fff!important;box-shadow:0 10px 24px rgba(232,89,60,.22)}
.app-hero{max-width:1240px;margin:0 auto;padding:56px 0 34px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:38px;align-items:center}
.app-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--coral-light);border-radius:var(--pill);font-size:12px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:var(--coral-dark);margin-bottom:18px}
.app-hero-copy h1,.app-section-head h2,.app-cta-card h2{font-family:'Baloo 2',cursive;color:var(--brown);line-height:1.05}
.app-hero-copy h1{font-size:clamp(40px,6vw,72px);margin-bottom:18px;max-width:11ch}
.app-hero-copy p,.app-section-head p,.app-screen-card p,.app-feature-card p,.app-benefit-panel li,.app-faq-list p,.app-cta-card p,.app-metrics span{font-size:16px;line-height:1.7;color:var(--gray);font-weight:700}
.app-hero-actions,.app-cta-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.app-primary-btn,.app-secondary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border-radius:var(--pill);text-decoration:none;font-size:14px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.app-primary-btn{background:var(--coral);color:#fff;box-shadow:0 14px 28px rgba(232,89,60,.24)}
.app-primary-btn:hover{transform:translateY(-2px);background:var(--coral-dark)}
.app-secondary-btn{background:#fff;color:var(--brown);border:2px solid var(--gray-light)}
.app-secondary-btn:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal)}
.app-proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.app-proof-card,.app-feature-card,.app-screen-card,.app-benefit-panel,.app-faq-list details,.app-cta-card{background:rgba(255,255,255,.92);border:1px solid rgba(44,26,14,.08);border-radius:24px;box-shadow:var(--shadow-md)}
.app-proof-card{padding:18px}
.app-proof-card strong,.app-feature-card h3,.app-screen-card h3,.app-benefit-panel h3,.app-metrics strong{display:block;font-family:'Baloo 2',cursive;font-size:22px;line-height:1.1;color:var(--brown);margin-bottom:8px}
.app-proof-card span{display:block;font-size:13px;line-height:1.6;color:var(--gray);font-weight:700}
.app-hero-visual{display:flex;justify-content:center}
.app-phone-stack{position:relative;min-height:620px;width:min(100%,500px)}
.app-phone{position:absolute;background:#1e120a;border:10px solid #1e120a;border-radius:38px;box-shadow:0 26px 50px rgba(44,26,14,.25);overflow:hidden}
.app-phone-main{width:320px;right:62px;top:0;transform:rotate(-5deg)}
.app-phone-side{width:250px;left:20px;top:170px;transform:rotate(9deg)}
.app-phone-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#120904;color:#fff;font-size:11px;font-weight:800;letter-spacing:.4px}
.app-phone-screen{background:#fff;min-height:560px}
.app-screen-story img{width:100%;height:280px;object-fit:cover;display:block}
.app-screen-badge{display:inline-flex;margin:18px 18px 12px;padding:7px 12px;background:var(--amber-light);border-radius:100px;font-size:11px;font-weight:900;color:#8d5e04;text-transform:uppercase;letter-spacing:.4px}
.app-screen-content{padding:0 18px 22px}
.app-screen-content h2{font-family:'Baloo 2',cursive;font-size:34px;line-height:1;margin-bottom:10px;color:var(--brown)}
.app-screen-content p{font-size:15px;color:var(--gray);font-weight:700;margin-bottom:18px}
.app-mini-player{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--cream);border-radius:18px}
.app-play-dot{width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 8px rgba(232,89,60,.12)}
.app-mini-player span{font-size:12px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.4px}
.app-mini-player strong{margin-left:auto;font-size:13px;font-weight:900;color:var(--brown)}
.app-screen-progress{padding:22px}
.app-progress-ring{width:160px;height:160px;border-radius:50%;margin:10px auto 24px;background:conic-gradient(var(--teal) 0 73%,var(--teal-light) 73% 100%);display:grid;place-items:center}
.app-progress-ring>div{width:120px;height:120px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.app-progress-ring strong{display:block;font-family:'Baloo 2',cursive;font-size:24px;color:var(--brown)}
.app-progress-ring span{font-size:12px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.4px}
.app-task-list{display:grid;gap:12px}
.app-task-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:var(--cream)}
.app-task-item span{font-size:14px;font-weight:800;color:var(--brown)}
.app-task-item strong{font-size:12px;font-weight:900;color:var(--teal)}
.app-task-item.done{background:var(--teal-light)}
.app-metrics{max-width:1240px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-metrics>div{padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(254,249,243,.94));border-radius:22px;border:1px solid rgba(44,26,14,.08)}
.app-section{max-width:1240px;margin:0 auto;padding:58px 0}
.app-section-head{max-width:760px;margin-bottom:28px}
.app-section-head h2{font-size:clamp(30px,4vw,52px);margin-bottom:12px}
.app-feature-grid,.app-screens-grid,.app-benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.app-feature-card,.app-screen-card,.app-benefit-panel{padding:24px}
.app-feature-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;margin-bottom:18px}
.app-feature-icon.coral{background:var(--coral)}
.app-feature-icon.teal{background:var(--teal)}
.app-feature-icon.amber{background:var(--amber);color:var(--brown)}
.app-feature-icon.purple{background:var(--purple)}
.app-screen-frame{padding:12px;background:#140b07;border-radius:26px;margin-bottom:18px}
.app-screen-frame img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;display:block}
.app-benefit-panel ul{margin:0;padding-left:20px}
.app-benefit-panel li+li{margin-top:10px}
.app-faq-list{display:grid;gap:14px}
.app-faq-list details{padding:20px 22px}
.app-faq-list summary{cursor:pointer;list-style:none;font-family:'Baloo 2',cursive;font-size:24px;color:var(--brown)}
.app-faq-list summary::-webkit-details-marker{display:none}
.app-faq-list p{margin-top:12px}
.app-cta-section{max-width:1240px;margin:0 auto;padding:16px 0 0}
.app-cta-card{padding:28px;background:linear-gradient(135deg,var(--brown),#57321f);color:#fff}
.app-cta-card .app-eyebrow{background:rgba(255,255,255,.12);color:#fff}
.app-cta-card h2{font-size:clamp(30px,4vw,48px);color:#fff;max-width:14ch}
.app-cta-card p{color:rgba(255,255,255,.8);max-width:55ch}
.app-cta-actions .app-secondary-btn{background:transparent;border-color:rgba(255,255,255,.18);color:#fff}
.app-cta-actions .app-secondary-btn:hover{border-color:#fff;color:#fff}
@media(max-width:1080px){
  .app-hero{grid-template-columns:1fr}
  .app-hero-copy h1{max-width:none}
  .app-phone-stack{height:620px}
}
@media(max-width:820px){
  .app-nav{padding:16px 18px;align-items:flex-start}
  .app-nav-links{justify-content:flex-end}
  .app-landing-page main{padding:0 18px 56px}
  .app-proof-row,.app-metrics,.app-feature-grid,.app-screens-grid,.app-benefits-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .app-nav{flex-direction:column}
  .app-nav-links{width:100%;justify-content:flex-start;gap:12px}
  .app-hero{padding-top:36px}
  .app-phone-stack{min-height:520px;height:520px}
  .app-phone-main{width:240px;right:14px}
  .app-phone-side{width:180px;left:0;top:170px}
  .app-phone-screen{min-height:420px}
  .app-screen-story img{height:190px}
  .app-screen-content h2{font-size:28px}
  .app-progress-ring{width:120px;height:120px}
  .app-progress-ring>div{width:88px;height:88px}
  .app-faq-list summary{font-size:20px}
}

.app-simple-hero{max-width:1180px;margin:0 auto;padding:54px 0 34px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:30px;align-items:center}
.app-simple-copy h1{font-family:'Baloo 2',cursive;font-size:clamp(36px,5vw,62px);line-height:1.05;color:var(--brown);margin-bottom:16px;max-width:10ch}
.app-simple-copy p{font-size:17px;line-height:1.7;color:var(--gray);font-weight:700;max-width:58ch}
.app-fun-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.app-fun-badges span{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(44,26,14,.08);box-shadow:var(--shadow-sm);font-size:13px;font-weight:800;color:var(--brown)}
.app-simple-phone{display:flex;justify-content:center}
.app-simple-phone img{width:min(100%,340px);border-radius:32px;border:10px solid #1e120a;box-shadow:0 24px 50px rgba(44,26,14,.2);display:block;transform:rotate(-4deg)}
.app-simple-section{max-width:1180px;margin:0 auto;padding:42px 0}
.app-slider-wrap{position:relative}
.app-simple-gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 42px 8px}
.app-simple-gallery::-webkit-scrollbar{display:none}
.app-shot-card,.app-simple-feature{background:rgba(255,255,255,.94);border:1px solid rgba(44,26,14,.08);border-radius:24px;box-shadow:var(--shadow-md)}
.app-shot-card{padding:16px;min-width:min(290px,82vw);scroll-snap-align:center;transform:rotate(-1deg)}
.app-shot-card:nth-child(even){transform:rotate(1deg)}
.app-shot-card img{width:100%;aspect-ratio:9/18;object-fit:cover;border-radius:18px;display:block;background:#1e120a}
.app-shot-card h3,.app-simple-feature h3{font-family:'Baloo 2',cursive;font-size:24px;line-height:1.1;color:var(--brown);margin:14px 0 6px}
.app-shot-card p,.app-simple-feature p{font-size:14px;line-height:1.65;color:var(--gray);font-weight:700}
.app-slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:50%;background:var(--coral);color:#fff;font-size:24px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(232,89,60,.25);z-index:2}
.app-slider-btn.prev{left:0}
.app-slider-btn.next{right:0}
.app-slider-btn:hover{background:var(--coral-dark)}
.app-slider-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.app-slider-dots span{width:10px;height:10px;border-radius:50%;background:rgba(232,89,60,.25)}
.app-slider-dots span:nth-child(2){background:rgba(232,89,60,.5)}
.app-slider-dots span:nth-child(3){background:rgba(232,89,60,.8)}
.app-simple-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.app-simple-feature{padding:22px;background:linear-gradient(180deg,#fff,rgba(254,249,243,.96))}
@media(max-width:980px){
  .app-simple-hero{grid-template-columns:1fr}
  .app-simple-copy h1{max-width:none}
}
@media(max-width:640px){
  .app-simple-hero{padding-top:34px}
  .app-simple-features{grid-template-columns:1fr}
  .app-simple-copy p{font-size:16px}
  .app-simple-gallery{padding-left:10px;padding-right:10px}
  .app-slider-btn{display:none}
}

.app-landing-shell{background:
  radial-gradient(circle at 10% 10%,rgba(240,160,32,.12),transparent 22%),
  radial-gradient(circle at 90% 8%,rgba(232,89,60,.12),transparent 26%),
  linear-gradient(180deg,#fff 0%,#fff7ef 52%,#fff 100%);
}
.app-launch-hero{max-width:1220px;margin:0 auto;padding:60px 0 46px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);gap:36px;align-items:center}
.app-launch-copy h1{font-family:'Baloo 2',cursive;font-size:clamp(42px,6vw,76px);line-height:1.02;color:var(--brown);margin-bottom:18px;max-width:10ch}
.app-launch-copy p{font-size:18px;line-height:1.75;color:var(--gray);font-weight:700;max-width:60ch}
.app-store-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.app-store-btn{display:inline-flex;align-items:center;gap:12px;min-height:62px;padding:12px 18px;border-radius:20px;text-decoration:none;background:#1d120c;color:#fff;box-shadow:0 16px 34px rgba(44,26,14,.16);transition:transform .18s ease,box-shadow .18s ease}
.app-store-btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(44,26,14,.22)}
.app-store-btn.play{background:#fff;color:var(--brown);border:1.5px solid rgba(44,26,14,.08)}
.app-store-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.app-store-icon svg{width:100%;height:100%}
.app-store-text{display:flex;flex-direction:column;line-height:1.05}
.app-store-text small{font-size:11px;font-weight:700;opacity:.75}
.app-store-text strong{font-size:18px;font-weight:900}
.app-launch-stage{position:relative;min-height:620px}
.app-stage-kid{position:absolute;left:0;bottom:18px;width:min(72%,360px);background:#fff;border-radius:34px;padding:12px;box-shadow:0 22px 50px rgba(44,26,14,.16);transform:rotate(-5deg)}
.app-stage-kid img{width:100%;display:block;border-radius:24px;aspect-ratio:4/5;object-fit:cover}
.app-stage-phone{position:absolute;right:14px;top:8px;width:min(58%,310px);background:#1d120c;border:10px solid #1d120c;border-radius:38px;box-shadow:0 28px 60px rgba(44,26,14,.24);overflow:hidden;transform:rotate(6deg)}
.app-stage-phone img{width:100%;display:block;aspect-ratio:9/19;object-fit:cover}
.app-stage-bubble{position:absolute;padding:12px 16px;border-radius:999px;font-size:13px;font-weight:900;box-shadow:var(--shadow-md)}
.app-stage-bubble.bubble-one{right:0;bottom:70px;background:var(--amber);color:var(--brown)}
.app-stage-bubble.bubble-two{left:26px;top:32px;background:var(--teal);color:#fff}
.app-feature-split{max-width:1220px;margin:0 auto;padding:48px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:34px;align-items:center}
.app-feature-split.reverse{grid-template-columns:minmax(320px,.9fr) minmax(0,1fr)}
.app-feature-split.reverse .app-feature-copy{order:2}
.app-feature-split.reverse .app-feature-carousel-card{order:1}
.app-feature-tag{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--coral-light);color:var(--coral-dark);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;margin-bottom:14px}
.app-feature-copy h2{font-family:'Baloo 2',cursive;font-size:clamp(32px,4.6vw,56px);line-height:1.05;color:var(--brown);margin-bottom:14px;max-width:12ch}
.app-feature-copy p{font-size:17px;line-height:1.75;color:var(--gray);font-weight:700;margin-bottom:18px;max-width:58ch}
.app-feature-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.app-feature-list li{position:relative;padding-left:28px;font-size:15px;font-weight:800;color:var(--brown)}
.app-feature-list li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--amber));box-shadow:0 0 0 5px rgba(232,89,60,.1)}
.app-feature-visual,.app-feature-carousel-card{background:linear-gradient(180deg,#fff,rgba(254,249,243,.96));border:1px solid rgba(44,26,14,.08);border-radius:32px;padding:18px;box-shadow:var(--shadow-md)}
.app-feature-visual img{width:100%;display:block;border-radius:24px;aspect-ratio:9/18;object-fit:cover;max-width:320px;margin:0 auto}
.app-feature-carousel-card .app-simple-gallery{padding:4px 44px 8px}
.app-feature-carousel-card .app-shot-card{min-width:min(280px,76vw)}
.app-download-band{max-width:1220px;margin:0 auto;padding:26px 28px;background:linear-gradient(135deg,var(--teal-light),var(--amber-light));border-radius:36px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.app-download-copy h2{font-family:'Baloo 2',cursive;font-size:clamp(30px,4vw,48px);line-height:1.06;color:var(--brown);margin-bottom:10px;max-width:14ch}
.app-download-copy p{font-size:16px;line-height:1.7;color:var(--gray);font-weight:700;max-width:54ch}
@media(max-width:1080px){
  .app-launch-hero,.app-feature-split,.app-feature-split.reverse{grid-template-columns:1fr}
  .app-launch-copy h1,.app-feature-copy h2{max-width:none}
  .app-feature-split.reverse .app-feature-copy,.app-feature-split.reverse .app-feature-carousel-card{order:initial}
  .app-launch-stage{min-height:560px}
}
@media(max-width:680px){
  .app-launch-hero{padding-top:38px}
  .app-launch-copy p,.app-feature-copy p{font-size:16px}
  .app-store-btn{width:100%;justify-content:flex-start}
  .app-launch-stage{min-height:480px}
  .app-stage-kid{width:66%;left:0}
  .app-stage-phone{width:54%;right:0}
  .app-download-band{padding:22px 18px;border-radius:26px}
}