/* The reference artwork supplies the landscape; every control is native HTML. */
:root{--ref-navy:#092b58;--ref-cream:#fff9eb;--ref-footer:clamp(76px,10.5vh,96px)}
.reference-topbar{height:80px;margin:0 4.8%;width:90.4%;padding:0 3.8%;gap:22px;background:#fff9edfa;color:var(--ref-navy);border:0;border-radius:0 0 38px 38px;box-shadow:0 4px 15px #567b6c0c;z-index:5}
.reference-brand{display:flex;align-items:center;gap:13px;white-space:nowrap;font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(18px,1.65vw,29px);font-weight:800;letter-spacing:-.6px}
.reference-book{display:flex;align-items:center;justify-content:center;width:48px;height:45px;color:#5ca0ad;filter:drop-shadow(0 3px 0 #d6c3a1)}
.reference-book svg{width:47px;height:43px;fill:#fff6d5;stroke-width:1.4}
.grade-tabs{display:flex;align-items:center;gap:6px;margin:auto;flex-shrink:0}
.grade-tab{min-width:77px;height:45px;padding:9px 15px;background:#f1e9df;border-radius:25px;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2','Nunito',sans-serif;font-size:20px;font-weight:700;color:var(--ref-navy);white-space:nowrap;transition:transform .2s,background .2s}
.grade-tab:hover{transform:translateY(-2px);background:#efe0ce}.grade-tab.selected{background:linear-gradient(#ff762d,#ff6026);color:white;box-shadow:0 2px 0 #ffede0}
.reference-tools{display:flex;gap:22px;align-items:center;flex-shrink:0}.reference-sound{background:transparent;color:#113d73;padding:7px;display:flex;align-items:center;justify-content:center}.reference-sound svg{width:31px;height:31px;stroke-width:2.8}
.reference-parent{display:flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid #d6e0ee;background:#e3edf9;border-radius:28px;font-size:16px;font-family:'Baloo 2','Nunito',sans-serif;font-weight:700;white-space:nowrap}.reference-parent svg{width:27px;height:27px;stroke-width:2.4}
body.home-screen{background:#c8eafa}.home-screen .reference-topbar{position:absolute;top:0;left:0}
.reference-home{height:100vh;height:100dvh;min-height:670px;position:relative;isolation:isolate;overflow:hidden;background:#c0e6f7;color:var(--ref-navy)}
.reference-scenery{position:absolute;inset:0;z-index:-2;background:url('assets/three-subjects-world.webp') center center/cover no-repeat}
.reference-heading{position:absolute;top:12.3%;left:21%;right:14%;text-align:center;font-size:clamp(32px,3.45vw,58px);font-weight:800;letter-spacing:-1.6px;white-space:nowrap;text-shadow:0 3px 0 #d1effb;font-family:'Baloo 2','Nunito',sans-serif;line-height:1.2}
.heading-rays{position:absolute;width:35px;height:40px;top:4px;background:linear-gradient(25deg,transparent 40%,#ffd64e 43%,#ffde62 56%,transparent 59%);border-radius:8px;filter:drop-shadow(0 2px #f5c149)}
.heading-rays:before,.heading-rays:after{content:'';position:absolute;left:5px;height:8px;width:26px;border-radius:8px;background:linear-gradient(#ffe672,#ffd040);transform:rotate(45deg);top:-4px}.heading-rays:after{transform:rotate(-10deg);top:34px;width:20px}
.rays-left{left:1%;transform:rotate(5deg)}.rays-right{right:0;transform:scaleX(-1) rotate(5deg)}
.house-entry{position:absolute;top:55.8%;left:29.1%;width:15.9%;height:8.7%;min-height:60px;max-height:83px;background:linear-gradient(#ffdf42 0%,#ffbd0a 60%,#ffac00 100%);border:2px solid #ffe581;border-radius:40px;box-shadow:inset 0 3px 8px #fff7a47a,0 5px 0 #db8e0e,0 9px 15px #6641173a;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:clamp(25px,2.55vw,40px);font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;text-shadow:0 3px 1px #d5832580;transition:transform .17s,filter .17s}
.house-entry svg{width:28px;height:28px;stroke-width:3.4}.house-entry:hover{transform:translateY(-4px);filter:brightness(1.06)}.house-entry:active{transform:translateY(3px)}
.english-entry{left:68.8%;top:57.3%;background:linear-gradient(#57d9ff 0%,#1ab8ff 55%,#0095ed 100%);border-color:#89e8ff;box-shadow:inset 0 3px 8px #beffff99,0 5px 0 #0076c2,0 9px 15px #164b6b3a;text-shadow:0 3px 1px #0471b480}
.reference-daily{position:absolute;left:25%;top:72.8%;width:51.8%;height:13.7%;min-height:100px;max-height:139px;background:#fff8e8;border:1px solid #fffef5;border-radius:35px;box-shadow:0 8px 22px #a88b4d22;display:flex;align-items:center;gap:2%;padding:9px 3% 9px 10px}
.reference-daily-art{display:block;width:27%;height:100%;flex-shrink:0;background-image:url('assets/reference-original.webp');background-size:731.43% 830.77%;background-position:30.92% 83.95%;background-repeat:no-repeat;mix-blend-mode:multiply;border-radius:14px}
.reference-daily h2{font-size:clamp(24px,2.2vw,38px);font-weight:800;white-space:nowrap;letter-spacing:-.7px;flex:1}
.daily-start{height:78%;min-height:63px;padding:5px 26px;border-radius:40px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(21px,1.95vw,32px);font-weight:800;color:white;white-space:nowrap;background:linear-gradient(#ff8b7c,#ff6a5b 58%,#ff6556);border:2px solid #ffaaa0;box-shadow:inset 0 2px 7px #ffc9b775,0 4px 0 #e75c4c,0 6px 10px #c76e5129;text-shadow:0 2px #df6550;transition:transform .17s,filter .17s}.daily-start:hover{transform:translateY(-3px);filter:brightness(1.04)}.daily-start svg{width:25px;height:25px;stroke-width:3.2}
.reference-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--ref-footer);z-index:7;background:#fff9edfc;backdrop-filter:blur(10px);border:0;justify-content:center;align-items:stretch;gap:0;padding:7px max(15px,calc((100vw - 920px)/2)) 0;color:#7e9eab}
.reference-nav a{flex:1;max-width:310px;min-width:90px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-family:'Baloo 2','Nunito',sans-serif;font-size:20px;font-weight:600;color:#7d9eaf;padding:6px 10px 11px}
.reference-nav svg{width:35px;height:35px;stroke-width:2}.reference-nav a.active{color:#ff742b}.reference-nav a.active:after{content:'';position:absolute;bottom:0;height:7px;width:145px;max-width:85%;border-radius:8px;background:#ff772d}.reference-nav a.active:first-child svg{fill:#ff742b;stroke:#ff742b}
body:not(.home-screen):not(.playing) .container{padding-bottom:125px}.reference-topbar+.success-wrap{margin-bottom:120px}.reference-home .garden-sparkle{position:absolute;left:78%;top:83%;width:6px;height:6px;pointer-events:none;border-radius:50%;background:#e1faff;box-shadow:0 0 8px 3px #c5f6ff8a;animation:stream-twinkle 3s ease-in-out infinite}.reference-home .sparkle-two{left:89%;top:79%;animation-delay:1.3s}
@keyframes stream-twinkle{0%,100%{opacity:.1;transform:translate(0,0) scale(.5)}50%{opacity:.9;transform:translate(-15px,10px) scale(1.1)}}
@media(min-aspect-ratio:19/10){.reference-home{min-height:600px}.reference-scenery{background-size:100% 100%}.reference-heading{top:13%}}
@media(max-width:1200px){.reference-topbar{margin:0 3%;width:94%;padding:0 2.5%;gap:15px}.reference-brand{font-size:21px;gap:9px}.reference-book{width:40px}.reference-book svg{width:39px}.grade-tab{min-width:62px;font-size:18px;padding:8px 11px}.reference-tools{gap:10px}.reference-parent{font-size:14px;padding:8px 13px}.reference-heading{font-size:3.65vw;left:24%;right:10%}.heading-rays{display:none}.reference-daily{left:24%;width:55%;padding-right:2%}.reference-daily h2{font-size:2.4vw}.daily-start{padding:5px 21px;font-size:2.1vw}}
@media(max-width:900px) and (min-width:701px){.reference-topbar{height:71px;padding:0 18px;margin:0 2%;width:96%;gap:8px}.reference-brand{font-size:17px;gap:5px}.reference-book{width:32px}.reference-book svg{width:32px}.grade-tabs{gap:4px}.grade-tab{min-width:51px;height:39px;font-size:16px;padding:6px 9px}.reference-tools{gap:4px}.reference-parent{font-size:0;padding:8px}.reference-parent svg{width:23px}.reference-sound svg{width:26px}.reference-heading{top:14%;left:21%;right:8%;font-size:4vw}.reference-daily{left:20%;width:64%}.reference-daily h2{font-size:3vw}.daily-start{font-size:2.5vw;padding:5px 22px}.house-entry{font-size:29px;width:19%;left:28%}.english-entry{left:67%}}
@media(max-width:700px) and (orientation:portrait){
 :root{--ref-footer:78px}.reference-topbar{height:116px;margin:0 12px;width:calc(100% - 24px);padding:10px 13px 12px;border-radius:0 0 26px 26px;display:grid;grid-template-columns:1fr auto;grid-template-rows:42px 43px;gap:6px 7px;align-content:center}.reference-brand{font-size:18px;gap:7px;letter-spacing:-.5px}.reference-book,.reference-book svg{width:29px;height:32px}.reference-tools{gap:2px}.reference-sound{padding:4px}.reference-sound svg{width:23px;height:23px}.reference-parent{font-size:0;padding:6px;border-radius:50%;gap:0}.reference-parent svg{width:22px;height:22px}.grade-tabs{grid-row:2;grid-column:1/3;margin:0;justify-content:space-between;gap:5px}.grade-tab{height:38px;min-width:0;width:20%;font-size:17px;padding:6px 9px}.reference-home{height:820px;min-height:100dvh;background:linear-gradient(#c7e9fa 0%,#d9f1fb 30%,#c9e6c7 76%,#f1edcf 100%)}.reference-scenery{top:235px;bottom:auto;height:calc(100vw * .72);background-size:110% auto;background-position:center center;mask-image:linear-gradient(transparent,black 12%,black 88%,transparent);-webkit-mask-image:linear-gradient(transparent,black 12%,black 88%,transparent)}.reference-heading{top:143px;left:12px;right:12px;font-size:32px;line-height:1.1;white-space:normal;letter-spacing:-1px;padding:0 12px}.house-entry{top:calc(235px + 100vw * .56);bottom:auto;left:14%;width:33%;height:60px;min-height:60px;font-size:26px;gap:6px;border-radius:29px}.house-entry svg{width:20px;height:20px}.english-entry{left:auto;right:7%;top:calc(235px + 100vw * .56);bottom:auto}.reference-daily{left:5%;top:auto;bottom:105px;width:90%;height:99px;min-height:99px;padding:9px 12px 9px 5px;border-radius:25px;gap:7px}.reference-daily-art{width:24%;height:79px}.reference-daily h2{font-size:22px;white-space:normal;line-height:1.12;letter-spacing:-.5px}.daily-start{font-size:17px;min-height:56px;height:61px;padding:5px 14px;gap:3px;border-radius:28px}.daily-start svg{width:16px;height:16px}.reference-nav{height:78px;padding:6px 7px calc(5px + env(safe-area-inset-bottom));gap:0}.reference-nav a{font-size:15px;min-width:0;gap:3px;padding:3px 5px 8px}.reference-nav svg{width:28px;height:28px}.reference-nav a.active:after{width:90px;height:5px}.reference-home .garden-sparkle{top:72%}.reference-topbar~.container{padding-top:20px}.course-title-row h1{font-size:29px}
}
@media(max-height:600px) and (orientation:landscape){:root{--ref-footer:60px}.reference-home{height:100dvh;min-height:375px}.reference-topbar{height:51px;border-radius:0 0 25px 25px;gap:8px;padding:0 3%;margin:0 4%;width:92%}.reference-brand{font-size:17px;gap:7px}.reference-book,.reference-book svg{width:29px;height:28px}.grade-tab{height:31px;min-width:48px;font-size:15px;padding:4px 9px}.grade-tabs{gap:4px}.reference-tools{gap:5px}.reference-sound svg{width:25px;height:25px}.reference-parent{font-size:12px;padding:4px 10px;gap:5px}.reference-parent svg{width:22px;height:22px}.reference-heading{top:15%;font-size:4vw;left:25%;right:10%;letter-spacing:-.7px}.house-entry{min-height:42px;max-height:54px;height:10%;font-size:25px;border-radius:28px;gap:7px;top:54%;width:17%;left:28.7%}.house-entry svg{width:19px;height:19px}.english-entry{left:68%;top:55.3%}.reference-daily{top:71.5%;height:13.8%;min-height:56px;border-radius:23px;left:25%;width:54%;padding:4px 2% 4px 5px}.reference-daily-art{width:26%;height:100%}.reference-daily h2{font-size:2.5vw}.daily-start{font-size:2.2vw;min-height:39px;padding:4px 15px;height:85%;gap:6px}.daily-start svg{width:17px;height:17px}.reference-nav{height:60px;padding:3px 20% 0}.reference-nav a{font-size:14px;gap:0;padding:3px 10px 6px}.reference-nav svg{width:25px;height:25px}.reference-nav a.active:after{height:5px;width:95px}.reference-topbar~.container{padding-top:20px}}
@media(max-width:365px) and (orientation:portrait){.reference-brand{font-size:16px;gap:5px}.reference-book,.reference-book svg{width:26px}.reference-topbar{margin:0 9px;width:calc(100% - 18px);padding-left:10px;padding-right:10px}.reference-daily-art{width:21%}.reference-daily h2{font-size:20px}.daily-start{font-size:16px;padding:5px 10px}.reference-heading{font-size:30px}}
@media(prefers-reduced-motion:reduce){.garden-sparkle{animation:none!important}}

/* Three subjects share equal access on the home page. */
.reference-brand-copy{display:flex;flex-direction:column;gap:0;line-height:1.1}
.reference-brand-copy strong{font-size:23px;font-weight:800;letter-spacing:-.4px}
.reference-brand-copy small{font-size:13px;letter-spacing:0;font-weight:700;margin-top:5px}
.reference-scenery{background-size:100% 100%}
.reference-heading{left:16%;right:10%;top:13%}
.house-subject{display:none}
.house-entry{left:23%;top:62%;width:16.5%;font-size:clamp(23px,2.4vw,38px)}
.viet-entry{left:47.8%;background:linear-gradient(#ffb1ca,#f776a2 55%,#eb5f93);border-color:#ffd0df;box-shadow:inset 0 3px 8px #fff0f499,0 5px 0 #c3477b,0 9px 15px #7d2e543a;text-shadow:0 3px 1px #ae426d80}
.english-entry{left:72.7%;top:62%}
@media(max-width:1200px){.reference-brand-copy strong{font-size:21px}.reference-brand-copy small{font-size:12px}.reference-heading{left:16%;right:10%}}
@media(max-width:900px) and (min-width:701px){.reference-brand-copy strong{font-size:19px}.reference-brand-copy small{font-size:10px}.reference-heading{top:15%;left:16%;right:8%}.house-entry{left:22%;width:18%;font-size:25px}.viet-entry{left:47%}.english-entry{left:72%}}
@media(max-width:700px) and (orientation:portrait){
 .reference-brand-copy strong{font-size:20px}.reference-brand-copy small{font-size:11px;margin-top:4px}
 .reference-heading{top:143px;left:12px;right:12px}
 .reference-scenery{background-size:100% auto}
 .house-entry{top:calc(235px + 100vw * .53);left:3%;right:auto;width:30%;height:76px;min-height:76px;max-height:none;border-radius:26px;font-size:21px;padding-top:21px;gap:4px}
 .house-subject{display:block;position:absolute;top:7px;left:2px;right:2px;text-align:center;font-size:16px;line-height:1.2;font-weight:800;text-shadow:0 1px 1px #6e375326}
 .house-entry svg{width:17px;height:17px}
 .viet-entry{left:35%}.english-entry{left:67%;top:calc(235px + 100vw * .53)}
}
@media(max-height:600px) and (orientation:landscape){.reference-brand-copy strong{font-size:18px}.reference-brand-copy small{font-size:10px;margin-top:2px}.house-entry{top:60.5%;left:23%;width:16.5%;font-size:23px}.viet-entry{left:47.8%}.english-entry{left:72.7%;top:60.5%}.reference-heading{top:15%}}
@media(max-width:365px) and (orientation:portrait){.reference-brand-copy strong{font-size:18px}.reference-brand-copy small{font-size:10px}.house-entry{font-size:18px;gap:2px}.house-subject{font-size:15px}.house-entry svg{width:15px;height:15px}}
/* Leave clear sky between the header and the tallest book roof. */
.reference-heading{top:10%;font-size:clamp(30px,3vw,46px);line-height:1.1}
@media(max-width:900px) and (min-width:701px){.reference-heading{top:75px;font-size:28px}}
@media(max-width:700px) and (orientation:portrait){.reference-heading{top:143px;font-size:32px}}
@media(max-height:600px) and (orientation:landscape){.reference-heading{top:54px;font-size:clamp(21px,2.6vw,29px)}}
@media(max-width:365px) and (orientation:portrait){.reference-heading{font-size:30px}}

/* Keep navigation content above the phone's gesture area. */
@media(max-width:700px) and (orientation:portrait){
 :root{--ref-footer:calc(78px + env(safe-area-inset-bottom,0px))}
 .reference-nav{height:var(--ref-footer)}
 .reference-home{height:max(820px,calc(540px + 53vw + env(safe-area-inset-bottom,0px)))}
 .reference-daily{bottom:calc(105px + env(safe-area-inset-bottom,0px))}
 .reference-sound,.reference-parent{min-width:44px;min-height:44px}
 body:not(.home-screen):not(.playing) .container{padding-bottom:calc(125px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:600px) and (orientation:landscape){
 :root{--ref-footer:calc(60px + env(safe-area-inset-bottom,0px))}
 .reference-nav{height:var(--ref-footer);padding-bottom:env(safe-area-inset-bottom,0px)}
 body.home-screen #app{padding-bottom:var(--ref-footer)}
 body:not(.home-screen):not(.playing) .container{padding-bottom:calc(125px + env(safe-area-inset-bottom,0px))}
}
/* Compact controls fit a narrow landscape screen, including its side cutouts. */
@media(max-width:700px) and (orientation:landscape){
 .reference-topbar{margin-left:max(12px,env(safe-area-inset-left,0px));margin-right:max(12px,env(safe-area-inset-right,0px));width:calc(100% - max(12px,env(safe-area-inset-left,0px)) - max(12px,env(safe-area-inset-right,0px)));padding:0 10px;gap:6px}
 .reference-brand{min-width:0;gap:5px}
 .reference-book,.reference-book svg{width:26px;flex-shrink:0}
 .reference-brand-copy{min-width:0}
 .reference-brand-copy strong{font-size:16px;overflow:hidden;text-overflow:ellipsis}
 .reference-brand-copy small{font-size:9px;overflow:hidden;text-overflow:ellipsis}
 .grade-tabs{gap:3px}
 .grade-tab{min-width:38px;height:44px;font-size:14px;padding:4px 5px}
 .reference-tools{gap:2px}
 .reference-sound,.reference-parent{min-width:44px;min-height:44px}
 .reference-parent{font-size:0;padding:6px;gap:0}
}

/* Phone screenshots: keep the daily card in the page flow, directly after
   the three subject buttons, instead of below a fixed-height landscape. */
@media(max-width:700px) and (orientation:portrait){
 .reference-home{height:auto;min-height:100dvh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);align-content:start;column-gap:8px;row-gap:12px;padding:132px 12px calc(96px + env(safe-area-inset-bottom,0px))}
 .reference-heading{position:relative;inset:auto;grid-row:1;grid-column:1/-1;margin:0;padding:0 8px;max-width:100%;font-size:clamp(25px,7vw,28px);line-height:1.12}
 .reference-title-line{display:block}
 .reference-scenery{position:relative;inset:auto;grid-row:2;grid-column:1/-1;z-index:0;width:calc(100% + 24px);height:auto;aspect-ratio:1672/941;margin-left:-12px;background-size:cover;background-position:center;mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent)}
 .house-entry{position:relative;inset:auto;grid-row:3;width:100%;height:68px;min-height:68px;max-height:none;margin-top:-22px;padding-top:20px;z-index:1;border-radius:22px;font-size:clamp(17px,5vw,20px);gap:3px}
 .math-entry{grid-column:1}.viet-entry{grid-column:2}.english-entry{grid-column:3}
 .house-subject{top:7px;font-size:clamp(13px,3.8vw,16px)}
 .house-entry svg{width:16px;height:16px}
 .reference-daily{position:relative;inset:auto;grid-row:4;grid-column:1/-1;z-index:1;width:100%;height:auto;min-height:92px;max-height:none;margin:3px 0 0;padding:8px 12px 8px 8px;gap:8px;border-radius:22px}
 .reference-daily-art{width:21%;height:68px}
 .reference-daily h2{min-width:0;font-size:20px;line-height:1.15}
 .daily-start{height:52px;min-height:52px;flex-shrink:0;padding:5px 10px;font-size:16px;gap:3px}
 .reference-home .garden-sparkle{display:none}
}