/* Chunnu Ji School – phone-first. Baloo 2 (Latin + Devanagari). */
@font-face { font-family: 'Baloo2'; src: url(../assets/baloo2.ttf) format('truetype'); font-weight: 400 800; font-display: swap; }
:root {
  --cream: #fff6e6; --card: #ffffff; --line: #f0d7ae; --wood: #b7773d; --wood2: #8c5527; --board: #2f6152; --board2: #24493e;
  --teal: #0f9a95; --teal2: #0b6f6c; --orange: #ff8a2a; --red: #e8473f; --ink: #3a2a1e; --muted: #8a6d55; --green: #1b9a5a;
  --emoji: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
  --safeT: env(safe-area-inset-top, 0px); --safeB: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; background: var(--cream); color: var(--ink); }
body { font-family: 'Baloo2', 'Nirmala UI', 'Noto Sans Devanagari', sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
a { color: var(--teal); }
img, video { -webkit-user-drag: none; user-select: none; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
.emo { font-family: var(--emoji); line-height: 1; }
.muted { color: var(--muted); font-weight: 600; }
.small { font-size: 14px; }
.center { text-align: center; }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: calc(6px + var(--safeT)) 16px calc(16px + var(--safeB)); display: flex; flex-direction: column; }
#view { flex: 1; display: flex; flex-direction: column; }
#view > section { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }

/* top bar */
.bar { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.bar-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.brand { display: flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 800; color: var(--wood2); line-height: 1; min-width: 0; }
.brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand.small { font-size: 17px; }
.brand .bell { font-size: 19px; }
.starpill { display: flex; align-items: center; gap: 4px; background: #fff; border: 3px solid #ffd35a; border-radius: 99px; padding: 4px 11px 2px; font-weight: 800; font-size: 19px; box-shadow: 0 3px 0 #f0b93a; }
.starpill .emo { font-size: 17px; transform: translateY(-1px); }
.starpill.pop { animation: pop .5s; }
.langbtn { display: flex; border-radius: 99px; background: #fff; border: 3px solid #e9cfa6; overflow: hidden; font-weight: 800; font-size: 15px; min-height: 44px; }
.langbtn span { padding: 8px 10px 4px; color: var(--muted); }
html[lang=hi] .langbtn [data-lang=hi], html[lang=en] .langbtn [data-lang=en] { background: var(--teal); color: #fff; }
.back { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 16px; background: #fff; border: 3px solid #e9cfa6; font-size: 36px; line-height: 34px; font-weight: 800; color: var(--wood2); box-shadow: 0 3px 0 #e9cfa6; }

/* shared */
.card { background: var(--card); border-radius: 24px; padding: 16px; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.bigbtn { display: block; width: 100%; text-align: center; text-decoration: none; color: #fff; font-weight: 800; font-size: 21px; line-height: 1.2; border-radius: 20px; padding: 14px 12px 10px; min-height: 58px; }
.bigbtn.go { background: linear-gradient(135deg, #18b3a8, #0d8b8a); box-shadow: 0 5px 0 var(--teal2); }
.bigbtn.pay { background: linear-gradient(135deg, #ff8a2a, #f05d3b); box-shadow: 0 5px 0 #b8432a; }
.bigbtn.alt { background: #fff; color: var(--wood2); border: 3px solid #e9cfa6; box-shadow: 0 4px 0 #e9cfa6; }
.bigbtn:active { transform: translateY(3px); box-shadow: none; }
.linkbtn { color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: underline; padding: 8px 12px; min-height: 44px; display: inline-block; }
.sylbtn { display: block; text-align: center; font-weight: 800; font-size: 17px; color: var(--teal2); background: #e6f6f4; border: 3px solid #9be0d4; border-radius: 18px; padding: 10px 12px 6px; text-decoration: none; }
.sec { font-size: 20px; font-weight: 800; color: var(--wood2); margin-top: 6px; }
.sec small { color: var(--muted); font-size: 15px; }
.note { background: #fff3cf; border-radius: 14px; padding: 8px 12px 5px; font-weight: 700; color: #7a5a1a; font-size: 15px; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: left; font-weight: 600; font-size: 16px; line-height: 1.3; }
.ticks li { padding-left: 2px; }
.chip { display: inline-block; border-radius: 99px; padding: 4px 12px 1px; font-weight: 800; font-size: 14px; }
.chip.free { background: #e6f6f4; color: var(--teal2); } .chip.trial { background: #fff0d6; color: #a0570f; } .chip.full { background: #e4f7e9; color: var(--green); }

/* hero classroom */
.hero { position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; box-shadow: 0 6px 0 #e7c08a, inset 0 0 0 4px #f4cf97;
  background: linear-gradient(180deg, transparent 74%, #d79a5c 74%), repeating-linear-gradient(90deg, #ffe3b8 0 28px, #ffdeae 28px 56px); }
.hero .board { position: absolute; left: 8%; right: 8%; top: 8%; height: 44%; border-radius: 8px; border: 6px solid var(--wood); box-shadow: 0 4px 0 var(--wood2);
  background: radial-gradient(ellipse at 40% 30%, #3d7564, var(--board) 60%, var(--board2)); display: flex; align-items: flex-start; justify-content: center; }
.hero .board span { color: rgba(255,255,255,.85); font-weight: 700; font-size: clamp(16px, 5vw, 26px); margin-top: 4%; letter-spacing: 1px; }
.hero .hosts { position: absolute; left: 50%; bottom: 0; height: 78%; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.hero .kid { position: absolute; bottom: 2%; height: 34%; animation: bob 3.2s ease-in-out infinite; }
.hero .kid.manu { left: 3%; }
.hero .kid.wifi { right: 3%; height: 30%; animation-delay: -1.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }

/* home */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hello h1 { font-size: 26px; font-weight: 800; color: var(--wood2); line-height: 1.1; }
.today { display: flex; flex-direction: column; gap: 6px; border-color: #9be0d4; box-shadow: 0 5px 0 #9be0d4; }
.today small { font-weight: 800; color: var(--teal2); font-size: 15px; }
.today h2 { font-size: 23px; line-height: 1.15; }
.buy { display: flex; flex-direction: column; gap: 8px; text-align: center; border-color: #ffc59a; box-shadow: 0 5px 0 #ffc59a; background: #fff8f1; }
.buy p { font-weight: 700; }
.lessons { display: flex; flex-direction: column; gap: 8px; }
.lrow, .part { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border-radius: 20px; padding: 10px 12px; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); min-height: 66px; }
.lrow .dnum { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; font-size: 22px; font-weight: 800; background: #fff0d6; color: #a0570f; padding-top: 4px; }
.lrow.open .dnum, .lrow.preview .dnum { background: #e6f6f4; color: var(--teal2); }
.lrow.isdone .dnum { background: #e4f7e9; color: var(--green); }
.dtx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.dtx b { font-size: 18px; } .dtx small { font-size: 15px; color: var(--muted); font-weight: 600; }
.tag { flex: 0 0 auto; border-radius: 99px; padding: 4px 10px 1px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tag.go { background: var(--teal); color: #fff; font-size: 16px; padding: 6px 12px 3px; }
.tag.done { background: #e4f7e9; color: var(--green); } .tag.free { background: #e6f6f4; color: var(--teal2); }
.tag.soon { background: #f3ecff; color: #6a4bd0; } .tag.lock { background: #f5eee3; color: var(--muted); }
.lrow.locked, .lrow.future, .part.locked { opacity: .8; }
.more { text-align: center; padding: 4px; }
.foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* day */
.dayhead { display: flex; flex-direction: column; gap: 6px; }
.dayhead small { font-weight: 800; color: var(--teal2); }
.dayhead h1 { font-size: 25px; line-height: 1.15; color: var(--wood2); }
.parts { display: flex; flex-direction: column; gap: 8px; }
.part .pic { width: 46px; height: 46px; border-radius: 14px; background: #fff3cf; display: grid; place-items: center; font-size: 26px; }

/* player */
.player { flex: 1; }
.phead { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--wood2); }
.phead b { white-space: nowrap; }
.pbar { flex: 1; height: 12px; border-radius: 99px; background: #f3ead9; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd35a, #ff8a2a); border-radius: 99px; }
.stage { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: flex-start; }
.vwrap { position: relative; align-self: center; width: min(100%, calc((100dvh - 250px) * 16 / 9)); min-width: 260px; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #f3e2c4; box-shadow: 0 6px 0 #e7c08a; }
.vwrap.wifi { box-shadow: 0 6px 0 #9fc9ff; }
.vwrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplay { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.92); font-size: 44px; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.subt { min-height: 54px; text-align: center; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--ink); background: #fff; border-radius: 18px; padding: 10px 12px 6px; border: 3px solid #ffe08a; opacity: 0; transition: opacity .2s; }
.subt.on { opacity: 1; }
.pn { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pn button { flex: 1; height: 62px; border-radius: 20px; color: #fff; font-size: 26px; background: var(--teal); box-shadow: 0 5px 0 var(--teal2); }
.pn .replay { flex: 0 0 70px; background: #fff; color: var(--wood2); border: 3px solid #e9cfa6; box-shadow: 0 4px 0 #e9cfa6; }
.pn .next { flex: 1.6; }
.pn button:disabled { opacity: .3; }
.pn .next.pulse { animation: pulse 1s ease-in-out infinite; background: var(--orange); box-shadow: 0 5px 0 #b8432a; }
@keyframes pulse { 50% { transform: scale(1.05); } }

.hostline { display: flex; justify-content: center; }
.hostline img { height: 180px; max-width: 100%; object-fit: contain; }
.hostline.small img { height: 120px; }
.wavebtn { align-self: center; width: 180px; height: 180px; border-radius: 50%; background: #fff3cf; border: 6px solid #ffd35a; box-shadow: 0 8px 0 #f0b93a; font-size: 96px; animation: pulse 1.4s ease-in-out infinite; }
.wavebtn.waving { animation: wave .5s ease-in-out 3; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-20deg); } 75% { transform: rotate(20deg); } }

.balls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.ball { aspect-ratio: 1; border-radius: 26px; background: #fff; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); padding: 8px; }
.ball svg { width: 100%; height: 100%; display: block; }
.ball.yes { animation: bounce .7s; border-color: #4fd18b; box-shadow: 0 5px 0 #4fd18b; }
.ball.no { animation: shake .4s; }
@keyframes bounce { 30% { transform: translateY(-22%) scale(1.08); } 60% { transform: translateY(0) scale(.96); } }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pips { display: flex; gap: 8px; justify-content: center; }
.pips i { width: 18px; height: 18px; border-radius: 50%; background: #f3ead9; border: 2px solid #e9cfa6; }
.pips i.on { background: #ffd35a; border-color: #f0b93a; }

.off { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; border-color: #b9e3a8; box-shadow: 0 5px 0 #b9e3a8; }
.off.brk { border-color: #a9d4ff; box-shadow: 0 5px 0 #a9d4ff; background: #f5fbff; }
.oicon { font-size: 76px; margin-top: 4px; }
.otag { font-weight: 800; color: var(--green); font-size: 15px; } .brk .otag { color: #2a6fb8; }
.off h2 { font-size: 25px; color: var(--wood2); line-height: 1.15; }
.otext { font-size: 19px; font-weight: 700; line-height: 1.3; }
.timer { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
.timer b { font-size: 40px; font-weight: 800; color: var(--teal2); min-width: 104px; font-variant-numeric: tabular-nums; }
.timer.end b { color: var(--green); animation: pop .6s 3; }
.tbtn { background: #e6f6f4; color: var(--teal2); font-weight: 800; border-radius: 16px; padding: 10px 16px 6px; font-size: 18px; min-height: 48px; border: 3px solid #9be0d4; }
.printable { display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; color: var(--ink); background: #fff8f1; border: 3px solid #ffc59a; border-radius: 18px; padding: 8px; width: 100%; }
.printable img { width: 72px; height: 92px; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.printable span { display: flex; flex-direction: column; } .printable b { font-size: 18px; } .printable small { color: var(--teal2); font-weight: 700; }

.colour { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 12px; }
#art { width: min(100%, 320px); aspect-ratio: 1; touch-action: none; border-radius: 16px; }
.pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: 100%; }
.sw { aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 0 0 2px #e9cfa6; min-height: 34px; }
.sw.on { box-shadow: 0 0 0 4px var(--ink); transform: scale(1.12); }
.ctools { display: flex; gap: 8px; width: 100%; }
.ctools button { flex: 1; background: #fff3cf; border-radius: 14px; font-weight: 800; font-size: 16px; padding: 8px 4px 4px; min-height: 48px; color: var(--wood2); }

.trace { position: relative; height: min(46dvh, 380px); border-radius: 26px; background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(45deg, #ffd35a 0 12px, #ffe9a8 12px 24px) border-box; border: 5px solid transparent; overflow: hidden; touch-action: none; }
#tc { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.meter { position: absolute; left: 12px; right: 64px; bottom: 12px; height: 12px; border-radius: 99px; background: #f3ead9; overflow: hidden; pointer-events: none; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd35a, #ff8a2a); border-radius: 99px; transition: width .2s; }
.trace.won .meter i { background: linear-gradient(90deg, #4fd18b, #18b3a8); }
.tclear { position: absolute; right: 8px; bottom: 4px; width: 48px; height: 48px; border-radius: 50%; background: #fff4dc; font-size: 26px; font-weight: 800; color: var(--wood2); }

.pcard, .pw, .donecard { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.pcard h2, .pw h2, .donecard h2 { font-size: 25px; color: var(--wood2); line-height: 1.2; }
.pcard p, .pw p { font-weight: 600; }
.pw .big { font-size: 56px; }
.gicon { font-size: 60px; }
.trophy { font-size: 100px; animation: pop 1s; }
.stars { font-size: 26px; font-weight: 800; }

/* gate */
.gate { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-top: 16px; }
.gate h2 { font-size: 25px; color: var(--wood2); }
.holdbtn { position: relative; overflow: hidden; width: 100%; max-width: 320px; min-height: 70px; border-radius: 22px; background: #fff3cf; border: 3px solid #ffd35a; font-weight: 800; font-size: 21px; color: var(--wood2); touch-action: none; }
.holdbtn i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffd35a; }
.holdbtn.on i { width: 100%; transition: width 2s linear; }
.holdbtn span { position: relative; }
.gnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.gnums button { aspect-ratio: 1; border-radius: 18px; background: #fff; border: 3px solid #e9cfa6; box-shadow: 0 4px 0 #e9cfa6; font-size: 32px; font-weight: 800; padding-top: 6px; }

/* welcome */
.welcome h1 { font-size: 27px; color: var(--wood2); line-height: 1.15; text-align: center; }
.welcome .lead { font-size: 18px; font-weight: 700; text-align: center; }
.welcome .ticks { background: #fff; border-radius: 20px; padding: 12px 14px; border: 3px solid var(--line); }
.namebox { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--muted); }
.namebox input, #codeForm input { width: 100%; font-size: 20px; padding: 10px 14px 6px; border-radius: 16px; border: 3px solid #e9cfa6; background: #fff; color: var(--ink); }

/* pay page */
.payhead { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.payhead h1 { font-size: 25px; color: var(--wood2); line-height: 1.15; }
.fam { font-weight: 800; color: var(--green); }
.plans { display: flex; flex-direction: column; gap: 14px; }
.plan { position: relative; background: #fff; border-radius: 24px; padding: 18px 16px 14px; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); display: flex; flex-direction: column; gap: 8px; }
.plan.best { border-color: #ff9c5a; box-shadow: 0 6px 0 #ff9c5a; background: #fff8f1; }
.plan h3 { font-size: 22px; color: var(--wood2); }
.ribbon { position: absolute; top: -14px; right: 16px; background: linear-gradient(135deg, #ff8a2a, #f05d3b); color: #fff; font-weight: 800; font-size: 14px; padding: 4px 12px 1px; border-radius: 99px; }
.price b { font-size: 36px; font-weight: 800; color: var(--ink); } .price span { font-size: 19px; font-weight: 700; color: var(--muted); }
.howpay { font-size: 14px; font-weight: 600; line-height: 1.35; background: #f6f1e8; border-radius: 12px; padding: 8px 10px 6px; color: #5b4636; }
.trust { background: #eef8f2; border: 3px solid #bfe6cd; border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.trust .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trust .chips span { background: #fff; border: 2px solid #bfe6cd; border-radius: 10px; padding: 2px 10px 0; font-size: 14px; }
.steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 10px 12px 7px; border: 3px solid var(--line); font-weight: 700; }
.steps b { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; padding-top: 3px; }
.codecard { display: flex; flex-direction: column; gap: 8px; }
.codecard h3 { color: var(--wood2); font-size: 21px; }
#codeForm { display: flex; flex-direction: column; gap: 8px; }
.codemsg { min-height: 24px; font-weight: 800; text-align: center; }
.codemsg.bad { color: var(--red); } .codemsg.ok { color: var(--green); }
.parent { display: flex; flex-direction: column; gap: 12px; }
.parent h2 { color: var(--wood2); }
.prow { display: flex; flex-direction: column; gap: 10px; }

/* fx */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.burst { position: absolute; left: 50%; top: 45%; font-size: 32px; animation: fly 1.1s ease-out forwards; }
@keyframes fly { from { transform: translate(0,0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(40deg); opacity: 0; } }
.bigstar { position: absolute; left: 50%; top: 40%; font-size: 110px; animation: bigstar 1.4s ease-out forwards; }
@keyframes bigstar { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-160%) scale(.5); opacity: 0; } }
.praise { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); background: #fff; border: 4px solid #ffd35a; border-radius: 22px; padding: 10px 20px 6px; font-size: 28px; font-weight: 800; color: var(--green); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 0 #f0b93a; animation: praise 1.9s ease-out forwards; }
@keyframes praise { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15%, 80% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; } }
.toast { position: absolute; left: 50%; bottom: calc(24px + var(--safeB)); transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 18px 6px; font-weight: 700; max-width: 90vw; text-align: center; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ov { position: fixed; inset: 0; z-index: 40; background: rgba(58, 42, 30, .55); display: grid; place-items: center; padding: 16px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* picture-choice taps (pick segment) */
.balls.pick .ball { display: flex; align-items: center; justify-content: center; font-size: 46px; line-height: 1; }
.balls.pick.n2, .balls.pick.n4 { grid-template-columns: repeat(2, 1fr); }
.balls.pick.n2 .ball { font-size: 52px; }
/* Hindi header brand: system Devanagari so "छुन्नू जी" reads clearly at small sizes (Baloo's ी curls like ों) */
html[lang="hi"] .brand b { font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Baloo2', sans-serif; }

/* lesson player: wide on tablets/desktops so 16:9 class videos fill the screen; other screens stay phone-width */
body.inplay #app { max-width: min(1180px, 100%); }
body.inplay .stage > :not(.vwrap), body.inplay .phead, body.inplay .pn { width: 100%; max-width: 640px; margin-inline: auto; }
body.inplay .stage > .subt { max-width: 900px; }
.vwrap.tall { width: min(100%, calc((100dvh - 290px) * 9 / 16)); aspect-ratio: 9 / 16; }
/* colouring */
.artbox { width: min(100%, 420px); margin: 0 auto; }
#art { width: 100%; height: auto; display: block; touch-action: none; border-radius: 16px; }
#art.brush { cursor: crosshair; }
.modes { display: flex; gap: 10px; justify-content: center; margin: 10px 0 4px; }
.mode { min-height: 52px; padding: 6px 18px; border-radius: 18px; border: 3px solid var(--line); background: #fff; font-weight: 800; font-size: 19px; color: var(--wood2); }
.mode.on { border-color: var(--teal); background: #e6fbf8; color: var(--teal2); }
/* drag to basket */
.dragzone { display: flex; flex-direction: column; gap: 22px; touch-action: none; user-select: none; }
.baskets { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; }
.basket { position: relative; aspect-ratio: 4 / 3; }
.basket svg { width: 100%; height: 100%; display: block; }
.basket.no { animation: shake .4s; }
.inbox { position: absolute; left: 18%; right: 18%; top: -18%; display: flex; justify-content: center; pointer-events: none; }
.inbox .dball { width: 56%; animation: bounce .7s; }
.dballs { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; min-height: 120px; }
.dball { width: 96px; aspect-ratio: 1; cursor: grab; touch-action: none; transition: transform .15s; }
.dball.lift { transition: none; z-index: 5; position: relative; filter: drop-shadow(0 10px 8px rgba(0,0,0,.18)); }
.dball svg { width: 100%; height: 100%; display: block; pointer-events: none; }

/* next-class teaser on the trophy card */
.teaser { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; padding: 10px; border-radius: 18px; background: #f2fbff; border: 3px solid #bfe6ff; text-align: left; }
.teaser img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; flex: none; }
.teaser p { margin: 0; font-size: 17px; line-height: 1.3; }
.note.rev { background: #fff4d6; }

/* per-lesson stars: ⭐ = finished on 1 day, ⭐⭐ = finished on 2 different days (opens the next lesson) */
.lstars { font-size: 18px; margin-right: 6px; white-space: nowrap; letter-spacing: 1px; }
.lstars i, .lessonstars i { font-style: normal; color: #c9c9c9; }
.lessonstars { font-size: 44px; letter-spacing: 6px; margin: 6px 0 0; }

/* why a lesson is still closed – full width under the title */
.dtx small.locknote { font-size: 13px; color: #a0570f; margin-top: 3px; line-height: 1.25; }

/* talking step without a clip in this language: a still 16:9 classroom frame, same size as a video */
.vwrap.still { background: linear-gradient(#ffe7bf 0 68%, #d99a5a 68%); }
.vwrap.still .board { position: absolute; left: 12%; right: 12%; top: 8%; height: 46%; border-radius: 8px; border: 6px solid var(--wood); background: linear-gradient(160deg, #3f7f6a, #285a4b); }
.vwrap.still img { position: absolute; left: 50%; bottom: 0; height: 84%; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.hcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* desktop / laptop (≥900 px): use the width – mobile stays exactly as it is */
@media (min-width: 900px) {
  #app { max-width: 1100px; }
  .welcome, .home { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px !important; align-items: start; }
  .welcome > .hcol:first-child, .home > .hcol:first-child { position: sticky; top: 12px; }
  .home .foot, .welcome .foot { grid-column: 1 / -1; }
  .welcome .hcol:last-child { padding-top: 8px; }
  .day, .parent, .gate { width: 100%; max-width: 760px; margin-inline: auto; }
  .paypage { width: 100%; max-width: 900px; margin-inline: auto; }
  body.inplay .stage { flex: 0 0 auto; }
  body.inplay .pn { margin-top: 18px; }
  body.inplay .vwrap:not(.tall) { width: min(100%, 1100px, calc((100dvh - 330px) * 16 / 9)); }
}

/* links inside tick lists (free books) */
.ticks a { color: var(--teal2); font-weight: 800; text-decoration: underline; }

/* Activity Pack */
.packcard { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border: 3px solid #ffd35a; box-shadow: 0 5px 0 #f0b93a; background: linear-gradient(#fffaf0, #fff3cf); }
.packcard img { height: 72px; width: auto; flex: none; }
.packcard .dtx b { font-size: 19px; }
.vwrap.still.chunnu img { height: 92%; animation: chunnubob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes chunnubob { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) translateY(-3%) scale(1.04); } }
.balls.shapes .ball svg, .balls.animals .ball img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.balls.animals .ball { padding: 6px; overflow: hidden; }
.donechunnu { height: 150px; animation: chunnubob2 1.6s ease-in-out infinite; }
@keyframes chunnubob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* pack welcome: big friendly subtitle under the Chunnu clip */
.subt.big { font-size: clamp(20px, 2.4vw + 12px, 30px); line-height: 1.35; padding: 14px 18px 10px; }

/* Razorpay Payment ID box (instant unlock) */
.payid { display: flex; flex-direction: column; gap: 10px; border: 3px solid #9fdcd2; background: #f2fbf9; text-align: left; }
.payid input { font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--line); font-family: ui-monospace, Consolas, monospace; }

.payidmore { margin: 4px 0; } .payidmore summary { cursor: pointer; color: var(--wood2); font-weight: 700; text-decoration: underline; text-align: center; padding: 6px; }

/* trial-end card: instant-unlock line + the coming-soon full year list */
.instant { margin: 4px 0 2px; font-weight: 800; color: var(--teal2); text-align: center; }
.fullsoon { margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: #fff3cf; border: 3px dashed #f0c14a; text-align: left; }
.fullsoon b { display: block; margin-bottom: 6px; color: var(--wood2); }
.fullsoon .ticks { font-size: 15px; }

/* ₹799 reward game */
.gamebtn { display: block; margin: 10px 0; background: linear-gradient(#7b5cff, #5a3fe0); color: #fff; box-shadow: 0 5px 0 #3d2a9e; text-decoration: none; }
.gamecard { text-decoration: none; color: inherit; border-color: #b9a8ff; box-shadow: 0 5px 0 #8f7bff; }
.gamecard.locked { opacity: .75; }
.gicon2 { font-size: 40px; width: 72px; text-align: center; flex: none; }

/* ₹799 offer */
.fullsoon.offer { position: relative; padding-top: 22px; }
.offerbadge { position: absolute; top: -12px; right: 12px; background: #ff7a2f; color: #fff; font-weight: 800; border-radius: 99px; padding: 4px 12px 2px; font-size: 14px; box-shadow: 0 3px 0 #c4501a; }
.ticks li.bonus { background: #e9fbe9; border: 2px solid #8fd99a; border-radius: 12px; padding: 6px 8px; font-weight: 800; color: #1d7a3a; }
.offervalue { margin: 8px 0 0; font-weight: 800; color: var(--wood2); font-size: 15px; }

/* landing intro: muted loop + big "with sound" button */
.soundon { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 12px 22px 10px; border-radius: 99px; background: #ff7a2f; color: #fff; font-weight: 800; font-size: 20px; white-space: nowrap; box-shadow: 0 5px 0 #c4501a; }
/* landing: the upright arrival clip (non-Hindi) stays small, so the start button is still near the top */
.welcome .vwrap.intro.tall { width: min(62%, calc(42dvh * 9 / 16)); min-width: 0; }