:root {
  --brand: #178C85; --brand-light: #38C2B6; --brand-soft: #CDEDE7; --gold: #F2B33D; --cream: #F4F9F6; --ink: #1d3b37; --skin: #FFD6A9;
  --accent: #178C85;
  --p-bg: #F4F9F6; --p-card: #fff; --p-ink: #1d2b29; --p-mute: #566b66; --p-line: #d9e6e1; --p-accent: #0F766E;
  font-family: ui-rounded, "Nunito", "Avenir Next", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink); }
body[data-mode="child"] { user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none; }
body[data-mode="parent"] { overflow: auto; background: var(--p-bg); color: var(--p-ink); }
body[data-mode="parent"] html { overflow: auto; }
button { font: inherit; cursor: pointer; border: 0; }
#app, .screen { position: absolute; inset: 0; }
.screen.child { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fatal { padding: 24px; font-size: 1.2rem; }

/* ---- orientasi: area anak lanskap (NFR-10) ---- */
.rotate-hint { display: none; position: fixed; inset: 0; z-index: 100; background: var(--brand-soft); color: var(--brand); flex-direction: column; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; }
.rotate-hint span { font-size: 5rem; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) { body[data-mode="child"] .rotate-hint { display: flex; } }

/* ---- gear (gerbang orang tua) ---- */
.gear { position: absolute; top: 10px; right: 10px; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.08); color: rgba(0,0,0,.35); font-size: 1.8rem; z-index: 30; touch-action: none; }
.gear-ring { position: absolute; inset: -3px; border-radius: 50%; border: 5px solid transparent; pointer-events: none; }
.gear.holding .gear-ring { border-color: var(--p-accent); animation: ring 3s linear forwards; clip-path: inset(0 0 0 0); }
@keyframes ring { from { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); } 25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); } to { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } }

/* ---- maskot ---- */
.bird-svg { width: 100%; height: 100%; overflow: visible; }
.b-wing { transform-box: fill-box; transform-origin: 50% 20%; animation: flap .9s ease-in-out infinite; }
.b-wing.r { animation-direction: reverse; }
@keyframes flap { 50% { transform: rotate(-14deg); } }
.b-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
@keyframes blink { 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.bird-big { width: min(46vh, 60vw); aspect-ratio: 1; }
.splash { background: radial-gradient(circle at 50% 40%, #ffffff, #dff3ee 55%, var(--brand-soft)); flex-direction: column; }
.splash .bird-big { animation: bob 1.6s ease-in-out infinite; }
.splash.greeting .bird-big { animation: hello 1s ease-in-out 4; }
@keyframes bob { 50% { transform: translateY(-3vh); } }
@keyframes hello { 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
.splash-btn { position: absolute; bottom: 8vh; width: 110px; height: 110px; border-radius: 50%; background: #fff; color: var(--accent); font-size: 3.4rem; box-shadow: 0 8px 0 rgba(0,0,0,.12); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }

/* ---- beranda ---- */
.home { background: linear-gradient(#d6f0ea, var(--cream) 75%); gap: 2vw; padding: 0 2vw; }
.home-bird { position: absolute; left: 2vw; bottom: 1vh; width: 16vh; height: 16vh; animation: bob 2s ease-in-out infinite; }
.cards { display: flex; gap: 2.5vw; align-items: center; justify-content: center; }
.card { width: min(26vw, 52vh); aspect-ratio: 1; min-width: 160px; min-height: 160px; border-radius: 36px; background: var(--soft); border: 8px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 70%, #000 0%); transition: transform .12s; }
.card:active { transform: translateY(6px) scale(.97); box-shadow: 0 4px 0 var(--c); }
.card-emoji { font-size: min(14vw, 24vh); line-height: 1; }
.card-dots { color: var(--c); letter-spacing: .15em; font-size: 1.2rem; margin-top: 8px; }
.arrow { width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--accent); font-size: 2.2rem; box-shadow: 0 6px 0 rgba(0,0,0,.12); flex: none; }
.dots { position: absolute; bottom: 3vh; display: flex; gap: 12px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.15); }
.dots i.on { background: var(--accent); }

/* ---- pemutar / adegan ---- */
.play { background: #111; }
.stage { position: relative; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); container-type: size; overflow: hidden; background: #000; }
.scene { position: absolute; inset: 0; background: var(--soft); overflow: hidden; container-type: size; }
.scene > * { position: absolute; }
.wash { left: 50%; top: 50%; width: 120cqw; height: 120cqw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 65%); }
.sun { right: 6cqw; top: 5cqh; width: 12cqw; height: 12cqw; border-radius: 50%; background: radial-gradient(circle, #fff6a8 40%, #ffd23f 41%, #ffd23f 60%, transparent 62%); box-shadow: 0 0 0 2cqw rgba(255,210,63,.25); }
.hill { border-radius: 50% 50% 0 0; }
.h1 { left: -10cqw; bottom: -12cqh; width: 80cqw; height: 40cqh; background: color-mix(in srgb, var(--c) 45%, #fff); }
.h2 { right: -15cqw; bottom: -18cqh; width: 90cqw; height: 42cqh; background: color-mix(in srgb, var(--c) 70%, #fff); }
.parade { inset: 0; pointer-events: none; }
.p-item { position: absolute; font-size: 10cqw; line-height: 1; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.12)); }
.hero { left: 50%; bottom: 14cqh; font-size: 24cqw; line-height: 1; transform-origin: 50% 100%; filter: drop-shadow(0 1.4cqw 0 rgba(0,0,0,.14)); }
.bird-wrap { left: 6cqw; bottom: 6cqh; width: 24cqw; height: 24cqw; }
.caption { left: 4cqw; right: 4cqw; bottom: 3cqh; text-align: center; font-weight: 800; font-size: 3.6cqw; color: #fff; text-shadow: 0 .3cqw 0 rgba(0,0,0,.5), 0 0 1.2cqw rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
.caption.on { opacity: 1; }
.scene.paused .b-wing, .scene.paused .b-eyes { animation-play-state: paused; }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 3cqh; z-index: 10; }
.overlay.on { display: flex; }
.overlay.inter { background: rgba(255,255,255,.55); backdrop-filter: blur(3px); }
.targets { display: flex; gap: 3cqw; align-items: center; justify-content: center; }
.target { width: 24cqw; height: 24cqw; max-width: 260px; max-height: 260px; min-width: 120px; min-height: 120px; border-radius: 6cqw; background: #fff; border: .8cqw solid var(--c); box-shadow: 0 1.2cqw 0 rgba(0,0,0,.18); font-size: 13cqw; line-height: 1; display: flex; align-items: center; justify-content: center; animation: pop .4s backwards; }
.target:nth-child(2) { animation-delay: .1s; } .target:nth-child(3) { animation-delay: .2s; }
.target:active { transform: scale(.94); }
.target.pulse { animation: glow .8s ease-in-out infinite; border-color: #ffb400; }
@keyframes pop { from { transform: scale(0); } }
@keyframes glow { 50% { transform: scale(1.12); box-shadow: 0 0 0 2cqw rgba(255,180,0,.45), 0 1.2cqw 0 rgba(0,0,0,.18); } }
.replay { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 3cqw; border-radius: 99px; background: #fff; font-size: 4cqw; box-shadow: 0 .6cqw 0 rgba(0,0,0,.15); }
.swatch, .clip-swatch { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--c); }
.clip { background: color-mix(in srgb, var(--soft) 85%, transparent); }
.clip-emoji { font-size: 26cqw; line-height: 1; animation: bounce .8s ease-in-out infinite; }
.clip-swatch { width: 22cqw; height: 22cqw; animation: bounce .8s ease-in-out infinite; }
.clip-say { font-size: 4.4cqw; font-weight: 800; text-align: center; padding: 0 6cqw; color: var(--ink); }
@keyframes bounce { 50% { transform: translateY(-4cqh) scale(1.06); } }
.confetti span { position: absolute; top: 55%; left: calc(15% + var(--i) * 17%); font-size: 7cqw; animation: rise 2.2s ease-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40cqh) rotate(40deg); opacity: 0; } }
.mission { background: var(--soft); }
.mission-emoji { font-size: 30cqw; line-height: 1; animation: bob 2.2s ease-in-out infinite; }
.mission-text { font-size: 5cqw; font-weight: 800; text-align: center; padding: 0 6cqw; }
.mission-home { width: 16cqw; height: 16cqw; border-radius: 50%; background: #fff; font-size: 8cqw; box-shadow: 0 1cqw 0 rgba(0,0,0,.15); animation: pulse 1.4s infinite; }
.mission-home[hidden] { display: none; }

/* ---- jeda & tidur ---- */
.break { background: linear-gradient(var(--brand-soft), var(--cream)); flex-direction: column; gap: 2vh; }
.break .bird-big { width: min(30vh, 40vw); animation: dance 1s ease-in-out infinite; }
@keyframes dance { 25% { transform: rotate(-10deg) translateY(-2vh); } 75% { transform: rotate(10deg) translateY(-2vh); } }
.break-title { font-size: min(9vh, 8vw); font-weight: 900; }
.break-emoji { font-size: min(10vh, 9vw); }
.progress { width: min(60vw, 600px); height: 18px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 1s linear; }
.sleep { background: linear-gradient(#17204d, #2d3a7a); color: #fff; flex-direction: column; }
.sleep .gear { color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.moon { position: absolute; top: 6vh; left: 8vw; font-size: min(16vh, 14vw); animation: bob 5s ease-in-out infinite; }
.stars { position: absolute; top: 8vh; right: 14vw; font-size: 2rem; letter-spacing: 1.5rem; opacity: .7; animation: twinkle 3s infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.sleeping { width: min(36vh, 50vw); animation: breathe 3.5s ease-in-out infinite; }
.sleeping .b-wing, .sleeping .b-eyes { animation: none; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.zzz { position: absolute; top: 24vh; right: 26vw; font-size: min(9vh, 8vw); font-weight: 900; opacity: .8; animation: rise 3s ease-in-out infinite; }
.sleep-note { position: absolute; bottom: 3vh; font-size: .95rem; opacity: .55; }
.dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 6s ease; z-index: 20; }
.dim.on { opacity: .88; }
.sleep .gear { z-index: 30; }

/* ---- area orang tua ---- */
.screen.parent { position: static; min-height: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }
.parent header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.parent h1 { font-size: 1.25rem; margin: 8px 0; }
.parent h2 { font-size: 1.05rem; margin: 0 0 8px; }
.parent h3 { font-size: .9rem; margin: 16px 0 4px; color: var(--p-mute); text-transform: uppercase; letter-spacing: .04em; }
.tabs { display: flex; gap: 6px; margin: 8px 0 16px; border-bottom: 1px solid var(--p-line); }
.tabs a { padding: 10px 14px; color: var(--p-mute); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; }
.tabs a.on { color: var(--p-accent); border-color: var(--p-accent); }
.card-p { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.hint { color: var(--p-mute); font-size: .92rem; line-height: 1.5; margin: 4px 0 10px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--p-line); }
.field select, .qrow input { font: inherit; padding: 10px 12px; border: 1px solid #b9b1a3; border-radius: 10px; background: #fff; min-height: 44px; }
.qrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { padding: 12px 18px; min-height: 44px; border-radius: 10px; background: #e1efeb; color: var(--p-ink); font-weight: 700; }
.btn.primary { background: var(--p-accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--p-accent); }
.btn.danger { background: #fde8e6; color: #b3261e; }
.ok { color: #1b7a3a; font-weight: 700; }
.back { display: inline-block; margin-bottom: 10px; color: var(--p-accent); text-decoration: none; font-weight: 700; }
.eplist { list-style: none; margin: 0; padding: 0; }
.eplist a { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 8px; background: #fff; border: 1px solid var(--p-line); border-radius: 12px; text-decoration: none; color: inherit; }
.eplist a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.eplist small { color: var(--p-mute); }
.dot { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.bars { display: flex; gap: 8px; align-items: flex-end; height: 150px; padding-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.bar i { width: 100%; background: var(--p-accent); border-radius: 6px 6px 0 0; min-height: 3px; }
.bar small { color: var(--p-mute); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { border: 2px solid; border-radius: 99px; padding: 6px 12px; font-weight: 700; }
.metrics { padding-left: 18px; line-height: 1.7; }
.gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.gate-form { width: 100%; max-width: 340px; background: #fff; border: 1px solid var(--p-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.gate-form p { font-size: 1.6rem; font-weight: 800; margin: 0; }
.gate-form input { font: inherit; font-size: 1.6rem; text-align: center; padding: 12px; border: 2px solid #b9b1a3; border-radius: 12px; }
.msg { font-size: .95rem !important; font-weight: 600 !important; color: #b3261e; min-height: 1.3em; }
:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
body[data-mode="parent"] #app { overflow-y: auto; }

/* ===== Pustaka video lagu ===== */
.home { flex-direction: column; justify-content: center; padding: 0; }
.shelf-row { display: flex; align-items: center; gap: 1.5vw; width: 100%; padding: 0 1.5vw; }
.shelf { flex: 1; min-width: 0; display: flex; gap: 2.2vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 6px 22px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf .card { flex: none; scroll-snap-align: start; width: min(24vw, 46vh); min-width: 160px; aspect-ratio: 1; background: var(--bg); border: 6px solid #fff; border-radius: 34px; box-shadow: 0 9px 0 rgba(0,0,0,.14); }
.shelf .card:active { transform: translateY(6px) scale(.97); box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.card-title { font-size: clamp(.8rem, 1.7vw, 1.15rem); font-weight: 800; margin-top: 8px; padding: 0 8px; text-align: center; color: var(--ink); }
.timebar { position: absolute; top: 14px; left: 16px; width: min(34vw, 260px); height: 16px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; z-index: 5; }
.timebar i { display: block; height: 100%; background: var(--brand-light); border-radius: 99px; transition: width 1s linear, background .5s; }
.timebar.low i { background: var(--gold); }

/* adegan lagu */
.vscene { position: absolute; inset: 0; overflow: hidden; container-type: size; background: linear-gradient(var(--sky1), var(--sky2)); }
.vscene > * { position: absolute; }
.vscene.night { color: #fff; }
.v-celest { right: 7cqw; top: 6cqh; font-size: 11cqw; line-height: 1; animation: bob 5s ease-in-out infinite; }
.v-stars { inset: 0; pointer-events: none; }
.v-stars i { position: absolute; font-style: normal; color: #fff6a8; font-size: 2.4cqw; animation: twinkle 2.4s infinite; }
.v-props { inset: 0; pointer-events: none; }
.v-prop { position: absolute; font-size: 8cqw; line-height: 1; opacity: .9; }
.v-ground { left: -5cqw; right: -5cqw; bottom: 0; height: 30cqh; background: var(--ground); border-radius: 50% 50% 0 0 / 28% 28% 0 0; }
.v-water { left: 0; right: 0; bottom: 0; height: 42cqh; background: linear-gradient(color-mix(in srgb, var(--water) 70%, #fff), var(--water)); }
.v-water::before { content: '〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️'; position: absolute; top: -3cqw; left: -4cqw; font-size: 5cqw; opacity: .5; white-space: nowrap; animation: slide 6s linear infinite; }
@keyframes slide { to { transform: translateX(-9cqw); } }
.v-flash { inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.v-flash.on { animation: phaseflash 1.4s ease-out; }
@keyframes phaseflash { from { opacity: .75; } to { opacity: 0; } }
.v-hero { font-size: 24cqw; line-height: 1; filter: drop-shadow(0 1.2cqw 0 rgba(0,0,0,.14)); will-change: transform; }
.v-line { left: 6cqw; top: 8cqh; font-size: 14cqw; line-height: 1; transform-origin: 0 0; }
.v-bird { right: 4cqw; bottom: 3cqh; width: 17cqw; height: 17cqw; z-index: 2; }
.v-lyric { left: 4cqw; right: 4cqw; bottom: 3cqh; text-align: center; font-weight: 900; font-size: 4.4cqw; color: #fff; text-shadow: 0 .35cqw 0 rgba(0,0,0,.5), 0 0 1.4cqw rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; padding-right: 18cqw; z-index: 3; }
.v-lyric.on { opacity: 1; }
.vrow { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 8px; background: #fff; border: 1px solid var(--p-line); border-radius: 12px; }
.vrow > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.vrow small { color: var(--p-mute); }

/* ===== Merek BipBip (logo + maskot anak) ===== */
.logo-big { width: min(62vh, 78vw); aspect-ratio: 1; border-radius: 8%; box-shadow: 0 14px 40px rgba(23,140,133,.18); }
.splash .logo-big { animation: bob 2.4s ease-in-out infinite; }
.splash.greeting .logo-big { animation: hello 1s ease-in-out 4; }
.mascot-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 22%; }
.break .mascot-wrap { width: min(30vh, 40vw); aspect-ratio: 1; animation: dance 1s ease-in-out infinite; }
.brand-mini { width: 36px; height: 36px; border-radius: 10px; vertical-align: middle; margin-right: 8px; }
.splash-btn { box-shadow: 0 8px 0 rgba(23,140,133,.25); }
.splash .gear { display: none; }
/* splash: logo di atas, tombol di bawahnya (tanpa saling menutupi pada layar landscape pendek) */
.splash { gap: 2.5vh; }
.splash .logo-big { width: min(54vh, 70vw); }
.splash .splash-btn { position: static; width: min(15vh, 96px); height: min(15vh, 96px); font-size: min(6vh, 2.6rem); flex: none; }
.mascot-sleep { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.sleeping { transform-origin: 50% 80%; }

/* ===== Halaman awal / profil ===== */
.screen.welcome { max-width: 520px; }
.welcome-form { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.welcome-logo { width: min(240px, 60vw); align-self: center; border-radius: 22px; }
.welcome-form h1 { text-align: center; margin: 0; }
.welcome-form .hint { text-align: center; margin: 0; }
.f-field { display: flex; flex-direction: column; gap: 6px; }
.f-field > label { font-weight: 700; }
.f-field input[type=text], .f-field select { font: inherit; padding: 12px; border: 1px solid #9fb8b2; border-radius: 10px; background: #fff; min-height: 46px; width: 100%; }
.f-field .row input[type=text] { flex: 1; min-width: 0; }
.chipbox { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: inline-block; padding: 10px 16px; min-height: 44px; border-radius: 99px; border: 2px solid #b8cfc9; background: #fff; font-weight: 700; }
.pick input:checked + span { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.pick input:focus-visible + span { outline: 3px solid var(--p-accent); outline-offset: 2px; }
.btn.wide { width: 100%; font-size: 1.05rem; }
.import { margin-top: 18px; padding: 12px; background: #fff; border: 1px solid var(--p-line); border-radius: 12px; }
.import summary { cursor: pointer; font-weight: 700; color: var(--p-accent); }
.import .f-field { margin: 10px 0; }
.hint.small { font-size: .85rem; margin: -4px 0 0; }
.newkey { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: .05em; margin: 6px 0 10px; color: var(--p-accent); min-height: 1.6em; }

/* ===== Materi pengenalan (kartu pelajaran) ===== */
.vscene.lesson .v-hero { font-size: 11cqw; left: 12% !important; top: 74% !important; transform: translate(-50%, -50%) !important; opacity: .9; }
.v-lesson { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; padding-bottom: 14cqh; pointer-events: none; z-index: 1; }
.v-lesson > * { animation: pop .35s backwards; }
.lt-big { width: 30cqh; height: 30cqh; min-width: 24cqw; border-radius: 6cqw; background: #fff; color: #5b3a9e; font-weight: 900; font-size: 24cqh; line-height: 30cqh; text-align: center; box-shadow: 0 1.4cqw 0 rgba(0,0,0,.15); }
.lt-big.num { color: #178C85; }
.lt-name { font-size: 6cqh; font-weight: 900; color: #fff; text-shadow: 0 .4cqw 0 rgba(0,0,0,.4); letter-spacing: .05em; }
.lt-row { display: flex; gap: 1cqw; align-items: center; font-size: 6.5cqh; font-weight: 900; }
.lt-row i { font-style: normal; display: inline-block; min-width: 5cqw; text-align: center; padding: .6cqh 1cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.55); color: #5b3a9e; }
.lt-row i.done { background: #fff; }
.lt-row i.cur { background: #5b3a9e; color: #fff; transform: scale(1.2); }
.lt-row i.dash { background: none; min-width: 1.5cqw; padding: 0; color: #5b3a9e; }
.lt-bigword { font-size: 17cqh; font-weight: 900; color: #5b3a9e; background: #fff; padding: 1cqh 4cqw; border-radius: 4cqw; box-shadow: 0 1.2cqw 0 rgba(0,0,0,.15); letter-spacing: .04em; }
.lt-emoji { font-size: 12cqh; line-height: 1; } .lt-emoji.big { font-size: 26cqh; }
.lt-dots { display: flex; gap: 1cqw; font-size: 7cqh; } .lt-dots i { font-style: normal; opacity: .25; filter: grayscale(1); } .lt-dots i.on { opacity: 1; filter: none; }
.lt-wave { font-size: 6cqh; font-weight: 900; color: #5b3a9e; animation: twinkle 0.7s infinite; }
.vinfo { display: block; margin-top: 4px; line-height: 1.4; }
.vrow { align-items: flex-start; }

/* ===== Halaman awal: sapa nama + pilih satu pendamping ===== */
.start { background: radial-gradient(circle at 50% 30%, #ffffff, #dff3ee 55%, var(--brand-soft)); flex-direction: column; gap: 2.2vh; padding: 2vh 4vw; text-align: center; }
.start-logo { width: min(24vh, 34vw); aspect-ratio: 1; border-radius: 20%; box-shadow: 0 10px 28px rgba(23,140,133,.18); flex: none; }
.start-logo.greeting { animation: hello 1s ease-in-out 3; }
.start-q { margin: 0; font-size: clamp(1.25rem, 4.2vh, 2.1rem); font-weight: 900; color: var(--ink); max-width: 90vw; line-height: 1.25; }
.start-grid { display: flex; flex-wrap: wrap; gap: 1.6vh 1.6vw; justify-content: center; max-width: 92vw; }
.start-grid[hidden] { display: none; }
.start-pick { min-width: 64px; min-height: 64px; padding: 1.4vh 3vw; border-radius: 99px; border: 4px solid var(--brand-light); background: #fff; color: var(--brand); font-size: clamp(1.1rem, 3.6vh, 1.7rem); font-weight: 900; box-shadow: 0 6px 0 rgba(23,140,133,.22); animation: pop .35s backwards; }
.start-pick:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(23,140,133,.22); }
.start-pick.on { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(1.12); }
.start-pick:disabled:not(.on) { opacity: .35; }
.start-tap { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; background: rgba(244,249,246,.94); border: 0; }
.start-tap-name { font-size: clamp(1.8rem, 8vh, 3.4rem); font-weight: 900; color: var(--brand); }
.start-tap-go { width: min(18vh, 110px); height: min(18vh, 110px); border-radius: 50%; background: #fff; color: var(--accent); font-size: min(8vh, 3.2rem); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 rgba(23,140,133,.25); animation: pulse 1.4s infinite; }
@media (max-height: 420px) { .start-logo { width: 13vh; border-radius: 16px; } .start-q { font-size: clamp(1.1rem, 4vh, 1.6rem); } }
@media (max-height: 300px) { .start-logo { display: none; } }

/* ===== Jam di beranda ===== */
.clock { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 6px 22px 8px; border-radius: 22px; background: rgba(255,255,255,.85); box-shadow: 0 4px 0 rgba(23,140,133,.15); pointer-events: none; }
.clock b { font-size: clamp(1.6rem, 6.5vh, 2.8rem); color: var(--brand); font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.clock small { font-size: clamp(.7rem, 2.2vh, 1rem); color: var(--ink); font-weight: 700; text-transform: capitalize; }
@media (max-width: 640px) { .timebar { width: 20vw; } .clock { padding: 4px 14px 6px; } }
/* beri ruang untuk jam di atas rak video, terutama pada layar lanskap pendek */
.home { padding-top: max(64px, 16vh); }
.shelf .card { width: min(24vw, 38vh); }
.home-bird { bottom: 1vh; }

.test-badge { position: absolute; top: 44px; left: 16px; z-index: 5; padding: 3px 12px; border-radius: 99px; background: #F2B33D; color: #3b2a1a; font-size: .8rem; font-weight: 900; letter-spacing: .03em; pointer-events: none; }

/* ===== Tombol kembali di pemutar ===== */
.back-btn { position: absolute; top: 10px; left: 10px; z-index: 30; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand); font-size: 2rem; font-weight: 900; line-height: 1; box-shadow: 0 5px 0 rgba(23,140,133,.25); }
.back-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(23,140,133,.25); }