/* An original sticker-book illustration layer over the existing workbook layout. */
.cartoon-sticker { filter: drop-shadow(0 4px 0 #ffffffb3); }
.hero { background: linear-gradient(110deg, #edf3dc 35%, #e2f1e6 100%); border-color: #dbe6c9; }
.hero-scene::before { content: ''; position: absolute; width: 290px; height: 290px; border-radius: 50%; left: 20%; top: 37px; background: repeating-conic-gradient(from 20deg, #fff9 0deg 15deg, #fff0 15deg 36deg); opacity: .55; }
.hero-owl { width: 249px; height: 258px; bottom: 14px; left: 24%; filter: drop-shadow(0 6px 0 #fff9); }
.cartoon-hero { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-star-buddy { position: absolute; z-index: 3; right: 6%; top: 133px; width: 67px; height: 68px; transform: rotate(12deg); }
.hero-star-buddy img { width: 100%; height: 100%; }
.comic-pop { position: absolute; top: 195px; left: 6%; display: grid; align-content: center; width: 69px; height: 65px; background: #ffdc75; color: #325f55; border: 2px solid #789c68; border-radius: 16px 12px 20px 10px; transform: rotate(-11deg); font-size: 13px; font-weight: 900; line-height: 1.05; text-align: center; box-shadow: 3px 3px 0 #f7fff1; }
.hero-scene .speech-bubble { top: 14px; }
.hero-scene .scene-book { width: 70px; height: 55px; font-size: 0; bottom: 7px; left: 18%; }
.hero-scene .scene-sun { width: 62px; height: 60px; font-size: 0; top: 18px; right: 26px; }
.hero-scene .scene-flower { width: 47px; height: 65px; bottom: 0; left: 3%; font-size: 0; }
.hero-scene .flower-two { left: auto; right: 3%; width: 42px; height: 51px; }
.adventure-team { display: grid; grid-template-columns: .85fr repeat(4,1fr); align-items: center; gap: 12px; padding: 13px 17px; margin-top: 17px; border: 1px solid #e3e9d7; border-radius: 13px; background: #fffef9; }
.team-label { color: #6e7d62; font-size: 8px; font-weight: bold; line-height: 1.9; letter-spacing: 1.1px; }
.adventure-team > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adventure-team img { width: 44px; height: 52px; object-fit: contain; flex-shrink: 0; }
.adventure-team strong { font-size: 10px; display: block; color: #3d6553; white-space: nowrap; }
.adventure-team small { display: block; font-size: 8px; margin-top: 5px; color: #6e7d62; line-height: 1.5; }
.cartoon-lesson-card { border-color: #dfe6d5; }
.cartoon-lesson-card .lesson-art { height: 145px; padding: 0; overflow: hidden; }
.cartoon-lesson-card .lesson-art::before { display: none; }
.lesson-scene { display: block; width: 100%; height: 100%; }
.cartoon-lesson-card .lesson-scene { transition: transform .25s ease; }
.cartoon-lesson-card:hover .lesson-scene { transform: scale(1.035) translateY(-2px); }
.cartoon-lesson-card .lesson-card-body { border-top: 2px solid #ffffffa1; }
.cartoon-lesson-card .round-arrow { background: #eef4e5; color: #367b60; }
.header-character { position: relative; width: 88px; height: 91px; display: block; flex-shrink: 0; margin: -15px 10px -12px 16px; }
.header-character img { width: 100%; height: 100%; object-fit: contain; transform: rotate(5deg); }
.header-character i { position: absolute; left: -7px; top: 23px; font-style: normal; font-size: 20px; color: #d9ae42; }
.lesson-story-banner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 15px; height: 115px; padding: 0 28px 0 12px; border-radius: 16px; border: 1px solid #e5dec9; background: #fcf0dc; overflow: hidden; margin: -4px 0 23px; }
.story-scene { width: 249px; align-self: stretch; flex-shrink: 0; }
.story-message { display: flex; align-items: center; justify-content: end; gap: 12px; }
.story-helper { width: 75px; height: 95px; flex-shrink: 0; }
.story-message > span { position: relative; background: #fffdf7; border: 1px solid #e4dec8; border-radius: 13px; padding: 13px 18px; box-shadow: 0 3px 0 #e0d9c02a; }
.story-message > span::before { content: ''; position: absolute; width: 10px; height: 10px; background: #fffdf7; border-left: 1px solid #e4dec8; border-bottom: 1px solid #e4dec8; left: -6px; top: 20px; transform: rotate(45deg); }
.story-message strong { font-size: 14px; display: block; color: #436c56; }
.story-message small { display: block; font-size: 12px; color: #6b7d60; margin-top: 9px; }
.story-burst { color: #dbac43; font-size: 22px; }
.lesson-story-banner.letter-t,.lesson-story-banner.shapes { background: #f0eafa; border-color: #e3d9ef; }
.lesson-story-banner.classroom { background: #e6f1f7; border-color: #d8e6e9; }
.lesson-story-banner.garden { background: #e6f2df; border-color: #d6e6ca; }
.lesson-story-banner.letter-s { background: #f9e9ee; border-color: #efdae2; }
.illustrated-flashcard { position: relative; isolation: isolate; overflow: hidden; border: 2px solid #fffefa; box-shadow: 0 0 0 1px #e7ebdd; background-image: radial-gradient(#ffffff85 1.5px, transparent 1.5px); background-size: 18px 18px; }
.illustrated-flashcard::before,.illustrated-flashcard::after { content: ''; position: absolute; z-index: -1; background: #fff9; width: 105px; height: 47px; border-radius: 50%; left: -35px; top: 17px; transform: rotate(-13deg); }
.illustrated-flashcard::after { left: auto; top: auto; right: -30px; bottom: 10px; transform: rotate(13deg); }
.vocab-art .cartoon-sticker { max-width: 230px; max-height: 197px; }
.answer-choice .cartoon-sticker { transition: transform .18s ease; }
.answer-choice:not(:disabled):hover .cartoon-sticker { transform: translateY(-3px) rotate(-2deg); }
.question-card { position: relative; }
.question-buddy { position: absolute; top: 12px; right: 16px; width: 41px; height: 43px; transform: rotate(7deg); }
.question-buddy img { width: 100%; height: 100%; object-fit: contain; }
.cartoon-celebration { display: flex; align-items: end; justify-content: center; width: 252px; height: 183px; font-size: 0; margin: 0 auto 23px; }
.result-hero { width: 148px; height: 182px; }
.result-spark { width: 110px; height: 126px; margin-left: -12px; transform: rotate(9deg); }
.cartoon-celebration > span { font-size: 30px; }
.dashboard-stats .stat-mascot { display: block; height: 74px; }
.stat-mascot img { display: block; width: 77px; height: 74px; margin: auto; object-fit: contain; }
.dashboard-stats .note-card { border-bottom: 3px solid #dee6cc; }
.reward-mascot { display: block; width: 100px; height: 102px; object-fit: contain; margin: 0 auto; }
.exam-owl img { display: block; width: 100%; height: 250px; object-fit: contain; }
/* Heroic reactions are confined to the feedback card, leaving answer pictures unambiguous. */
.af-art { width: 214px; height: 180px; margin-bottom: 14px; }
.af-mascot { width: 161px; height: 177px; left: 22px; top: -2px; filter: drop-shadow(0 3px 0 #fff); }
.af-sidekick { position: absolute; width: 67px; height: 70px; right: -7px; top: 21px; transform: rotate(12deg); }
.af-badge { right: 25px; bottom: -3px; z-index: 1; }
.af-comic { position: absolute; top: 47px; left: -17px; padding: 7px 8px; color: #47725a; background: #ffdf86; box-shadow: 2px 3px 0 #fff; border: 1px solid #e2bf66; border-radius: 10px 8px 12px 6px; font-size: 12px; font-weight: 900; transform: rotate(-12deg); }
.af-incorrect .af-comic { background: #ede1fa; color: #776394; border-color: #d5c2eb; font-size: 10px; }
.af-incorrect .af-sidekick { width: 58px; height: 64px; top: 28px; right: 0; }
.af-orbit-one { top: 3px; left: 8px; font-size: 22px; }
.af-orbit-two { right: 0; top: -7px; font-size: 18px; }
@media(min-width:1500px) { .hero-owl { width: 290px; height: 300px; bottom: 14px; left: 24%; } .cartoon-lesson-card .lesson-art { height: 165px; } .adventure-team strong { font-size: 12px; } .adventure-team small { font-size: 10px; } .team-label { font-size: 10px; } .adventure-team img { width: 54px; height: 60px; } }
@media(max-width:1150px) { .adventure-team { grid-template-columns: repeat(4,1fr); padding: 12px; gap: 8px; } .team-label { display: none; } .adventure-team img { width: 38px; height: 48px; } .adventure-team small { font-size: 7px; } .adventure-team strong { font-size: 9px; } .hero-owl { width: 223px; height: 245px; left: 21%; } .hero-star-buddy { width: 56px; right: 2%; top: 132px; } .comic-pop { width: 57px; height: 56px; font-size: 11px; left: 2%; } .story-scene { width: 211px; } .story-helper { width: 65px; height: 84px; } .story-message strong { font-size: 12px; } .story-message small { font-size: 11px; } .story-burst { display: none; } .lesson-story-banner { padding-right: 18px; } .story-message > span { padding: 12px; } }
@media(max-width:900px) { .hero-owl { width: 185px; height: 218px; left: 16%; bottom: 15px; } .comic-pop { display: none; } .hero-star-buddy { width: 46px; right: 0; top: 133px; } .hero-scene .scene-sun { width: 44px; height: 43px; right: 14px; } .hero-scene .scene-book { left: 7%; width: 58px; height: 47px; } .adventure-team > div { flex-direction: column; gap: 5px; text-align: center; } .adventure-team small { display: none; } .adventure-team img { width: 42px; height: 48px; } .story-scene { width: 182px; } .lesson-story-banner { gap: 7px; height: 101px; padding-right: 12px; } .story-message { gap: 2px; } .story-helper { width: 54px; height: 77px; } .story-message > span { padding: 10px; } .story-message strong { font-size: 11px; } .story-message small { font-size: 10px; } .header-character { width: 70px; height: 78px; margin-right: 0; } }
@media(max-width:650px) { .hero-owl { width: 170px; height: 204px; left: 0; bottom: 7px; } .hero-star-buddy { width: 43px; height: 45px; right: 1%; top: 117px; } .hero-scene .scene-sun { width: 39px; height: 39px; top: 17px; right: 9px; } .hero-scene .scene-book { width: 46px; height: 39px; left: 5%; bottom: 1px; } .hero-scene .scene-flower { width: 32px; height: 42px; left: -2%; } .hero-scene .flower-two { left: auto; right: -2%; width: 30px; height: 37px; } .adventure-team { margin-top: 12px; padding: 8px; gap: 3px; border-radius: 12px; } .adventure-team img { height: 46px; width: 39px; } .adventure-team strong { font-size: 8px; } .quick-stats { margin-top: 12px; } .cartoon-lesson-card .lesson-art { height: 111px; } .header-character { width: 57px; height: 65px; margin: 0 0 0 5px; } .header-character i { font-size: 14px; top: 8px; left: -5px; } .lesson-story-banner { height: 92px; padding: 0 8px 0 0; gap: 0; margin: -5px 0 19px; border-radius: 12px; } .story-scene { width: 133px; height: 84px; align-self: center; } .story-helper { width: 46px; height: 70px; } .story-message > span { padding: 8px 9px; max-width: 145px; } .story-message strong { font-size: 10px; line-height: 1.5; } .story-message small { font-size: 9px; line-height: 1.6; margin-top: 4px; } .vocab-art .cartoon-sticker { max-width: 210px; max-height: 176px; } .question-buddy { display: none; } .cartoon-celebration { height: 160px; width: 226px; } .result-hero { width: 132px; height: 160px; } .result-spark { width: 97px; height: 112px; } .reward-mascot { width: 74px; height: 82px; } .dashboard-stats .stat-mascot { height: 68px; } .stat-mascot img { height: 68px; width: 68px; } }
@media(max-width:360px) { .header-character { display: none; } .story-scene { width: 112px; } .story-helper { width: 40px; } .story-message > span { max-width: 132px; padding: 7px; } .story-message strong { font-size: 9px; } .story-message small { font-size: 8px; } .hero-owl { width: 148px; height: 181px; bottom: 7px; } .hero-star-buddy { display: none; } }
@media(max-width:360px), (max-height:650px) { .af-art { width: 180px; height: 141px; } .af-mascot { width: 128px; height: 140px; left: 24px; } .af-sidekick { width: 55px; height: 57px; right: -2px; top: 10px; } .af-badge { right: 21px; bottom: -2px; } .af-comic { top: 35px; left: -2px; font-size: 10px; padding: 5px 7px; } .af-incorrect .af-sidekick { width: 45px; height: 52px; right: 0; top: 17px; } .af-incorrect .af-comic { font-size: 9px; } }
@media(prefers-reduced-motion:reduce) { .cartoon-sticker,.lesson-scene,.header-character img { transition: none !important; } .cartoon-lesson-card:hover .lesson-scene,.answer-choice:not(:disabled):hover .cartoon-sticker { transform: none; } }