/* =========================================================
   Manabi With Us — identitas visual
   Warna brand: navy #202D50 · sage #A2B6B4 · coklat #835F38 · krem #E9D2B3 · slate #4F5E71
   Huruf: Mali (judul, pengganti "Playtime With Hot Toddies"), Nunito (teks), Zen Maru Gothic (Jepang),
          Klee One (kanji & kana besar, bentuk tulisan tangan buku pelajaran)
   Tiga gaya (data-skin di <html>): pagi · mega · stiker
   ========================================================= */
:root{
  --paper:#FBF7F0; --surface:#FFFFFF; --sunk:#F2ECE2; --ink:#202D50; --muted:#4F5E71; --line:#E1D8CA;
  --ai:#202D50; --ai-soft:#E3EBEA; --shu:#835F38; --shu-soft:#F5EADB; --ok:#2E7656; --ok-soft:#E1F1E8; --warn:#9A5E14;
  --bad:#B04A33; --bad-soft:#FBE7E2; --stk:#202D50; --sage:#A2B6B4; --cream:#E9D2B3; --navy:#202D50;
  --rail:#FFFFFF; --rail-fg:#4F5E71; --rail-active:#202D50; --rail-on:#E3EBEA;
  --f-ui:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-head:"Mali","Nunito","Segoe UI",system-ui,sans-serif;
  --f-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-brush:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
  --r:16px; --r-sm:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#141B30; --surface:#1C2540; --sunk:#243052; --ink:#F3ECE0; --muted:#B5C2C4; --line:#33405F;
  --ai:#A2B6B4; --ai-soft:#283A45; --shu:#DDB98C; --shu-soft:#3A2E22; --ok:#6CCB9E; --ok-soft:#173729; --warn:#E3A957;
  --bad:#F08C74; --bad-soft:#40211B; --stk:#A2B6B4; --sage:#A2B6B4; --cream:#E9D2B3; --navy:#0E1427;
  --rail:#1C2540; --rail-fg:#B5C2C4; --rail-active:#F3ECE0; --rail-on:#283A45; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#141B30; --surface:#1C2540; --sunk:#243052; --ink:#F3ECE0; --muted:#B5C2C4; --line:#33405F;
  --ai:#A2B6B4; --ai-soft:#283A45; --shu:#DDB98C; --shu-soft:#3A2E22; --ok:#6CCB9E; --ok-soft:#173729; --warn:#E3A957;
  --bad:#F08C74; --bad-soft:#40211B; --stk:#A2B6B4; --sage:#A2B6B4; --cream:#E9D2B3; --navy:#0E1427;
  --rail:#1C2540; --rail-fg:#B5C2C4; --rail-active:#F3ECE0; --rail-on:#283A45; color-scheme:dark}

/* ---------- dasar: lebih besar & lega, nyaman untuk anak 5 tahun ke atas ---------- */
body{font-size:16px;line-height:1.6}
h1,h2,h3,.score,.ring .v b{font-family:var(--f-head);font-weight:600;letter-spacing:0}
h1{font-size:1.9rem}
h2{font-size:1.25rem}
h3{font-size:1.08rem}
.eyebrow{color:var(--shu);letter-spacing:.08em}
.btn{min-height:44px;border-radius:999px;padding:10px 18px;font-weight:700;border-width:1.5px}
.btn.sm{min-height:38px;padding:7px 14px}
.btn.pri{color:var(--paper)}
.pill{border-radius:999px;font-size:12px}
.pill.lv{background:var(--shu-soft);color:var(--shu)}
.spk{width:40px;height:40px;border-radius:12px}
.opt{min-height:52px;border-radius:var(--r-sm);font-size:17px;border-width:2px}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.explain{border-radius:var(--r-sm);font-size:14.5px;display:flex;gap:12px;align-items:flex-start}
.explain .owl-mini{width:54px;height:auto;flex:none;margin-top:-4px}
.card{border-radius:var(--r)}
.qtext{font-size:23px}
.l-jp,.qtext,.pattern,.reading{font-family:var(--f-jp)}
.kcell .g,.bigk,.kana b{font-family:var(--f-brush);font-weight:600}
.kcell{border-radius:var(--r-sm)}
.hanko{border-color:var(--shu);color:var(--shu);font-family:var(--f-jp);font-weight:700}
.who{background:var(--navy);color:#fff}
.who.b{background:var(--shu)}
.ring circle:nth-child(2){stroke:var(--shu)}
.playbtn{background:var(--navy);width:64px;height:64px}
:root[data-theme="dark"] .playbtn{background:var(--sage);color:#141B30}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .playbtn{background:var(--sage);color:#141B30}}
.bar{height:10px}
.bar i{background:linear-gradient(90deg,var(--sage),var(--ai))}
.toast{border-radius:999px}

/* ---------- logo & maskot ---------- */
.brand-logo{display:block;width:150px;height:auto;margin:0 auto}
.brand{padding:0 4px;justify-content:center}
.gate-logo{width:min(260px,70%);height:auto;display:block;margin:0 auto}
.gate-owl{width:96px;height:auto;flex:none}
.hero-band{position:relative;overflow:hidden;border-radius:var(--r);padding:24px 24px 24px 24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.hero-band .owl{width:150px;height:auto;margin:-8px -6px -28px 0;align-self:end}
.hero-band h1{font-size:1.75rem}
.speech{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font-size:14.5px;color:var(--ink)}
.owl-empty{width:110px;height:auto;display:block;margin:0 auto 8px}
.linkcard{position:relative}
.rec-owl{position:absolute;top:12px;right:12px;width:68px;height:auto}
.rec-owl~.eyebrow,.rec-owl~h3{padding-right:72px}
.result-owl{width:130px;height:auto}

/* rail */
.rail{background:var(--rail);color:var(--rail-fg);border-right:1.5px solid var(--line)}
.nav a{color:var(--rail-fg);border-radius:12px;font-size:15px;min-height:46px}
.nav a:hover{background:var(--rail-on);color:var(--rail-active)}
.nav a.on{background:var(--rail-on);color:var(--rail-active)}
.nav a .k{font-family:var(--f-brush);font-weight:600}
.nav a.on .k{color:var(--shu)}
.rail-foot a{color:inherit}

/* =========== GAYA 1: PAGI — terang, krem, lapang =========== */
:root[data-skin="pagi"] .hero-band{background:var(--cream);color:#202D50}
:root[data-skin="pagi"] .hero-band .sub{color:#4F5E71}
:root[data-skin="pagi"] .hero-band .eyebrow{color:#835F38}

/* =========== GAYA 2: MEGA MENDUNG — navy dengan motif awan =========== */
:root[data-skin="mega"]{--paper:#EEF2F1;--sunk:#E3EAE9;--line:#D3DDDB;--rail:#202D50;--rail-fg:#C9D5D4;--rail-active:#FFFFFF;--rail-on:rgba(162,182,180,.22)}
@media (prefers-color-scheme: dark){:root[data-skin="mega"]:not([data-theme="light"]){--paper:#141B30;--sunk:#243052;--line:#33405F;--rail:#0E1427;--rail-fg:#B5C2C4;--rail-active:#F3ECE0;--rail-on:#283A45}}
:root[data-skin="mega"][data-theme="dark"]{--paper:#141B30;--sunk:#243052;--line:#33405F;--rail:#0E1427;--rail-fg:#B5C2C4;--rail-active:#F3ECE0;--rail-on:#283A45}
:root[data-skin="mega"] .hero-band{background-color:var(--navy);background-image:var(--mega);background-size:180px 90px}
/* menu samping: navy polos di area menu, motif awan hanya di bagian bawah supaya tulisan tetap jelas */
:root[data-skin="mega"] .rail{background-color:var(--navy);border-right:0;isolation:isolate}
:root[data-skin="mega"] .rail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background-image:var(--mega);background-size:180px 90px;-webkit-mask-image:linear-gradient(to top,#000 35%,transparent);mask-image:linear-gradient(to top,#000 35%,transparent);z-index:-1;pointer-events:none}
:root[data-skin="mega"] .nav a{color:#E8EEED;font-size:15.5px;font-weight:700}
:root[data-skin="mega"] .nav a .k{color:#E9D2B3}
:root[data-skin="mega"] .nav a:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
:root[data-skin="mega"] .nav a.on{background:#A2B6B4;color:#202D50}
:root[data-skin="mega"] .nav a.on .k{color:#835F38}
:root[data-skin="mega"] .rail-foot{color:#C9D5D4;position:relative}
:root[data-skin="mega"] .brand{background:#FBF7F0;border-radius:16px;padding:10px 8px;margin:0 4px}
:root[data-skin="mega"] .hero-band{color:#FFFFFF}
:root[data-skin="mega"] .hero-band .sub{color:#D8E2E1}
:root[data-skin="mega"] .hero-band .eyebrow{color:#E9D2B3}
:root[data-skin="mega"] .hero-band .pill{background:rgba(255,255,255,.14);color:#fff}
:root[data-skin="mega"] .levelbar button.on{border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}
:root{--mega:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90'%3E%3Cg fill='none' stroke='%23A2B6B4' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 34c6-10 18-10 22-2 4-10 18-12 24-3 6-8 20-6 22 4 10-2 14 8 6 13H14c-8 0-12-6-6-12z'/%3E%3Cpath d='M16 40c4-6 12-6 15 0M40 38c4-7 13-7 16 0M64 40c3-5 10-5 12 1'/%3E%3Cpath d='M70 52c4 4 10 2 10-3s-6-6-8-3'/%3E%3Cpath d='M98 78c6-10 18-10 22-2 4-10 18-12 24-3 6-8 20-6 22 4 10-2 14 8 6 13h-68c-8 0-12-6-6-12z'/%3E%3Cpath d='M106 84c4-6 12-6 15 0M130 82c4-7 13-7 16 0'/%3E%3Cpath d='M10 72c3 4 9 3 9-2s-5-6-7-3M150 30c3 4 9 3 9-2s-5-6-7-3'/%3E%3C/g%3E%3C/svg%3E")}

/* =========== GAYA 3: STIKER — garis tegas & ceria seperti logo =========== */
:root[data-skin="stiker"]{--paper:#E6EDEC;--sunk:#F4EEE4;--line:#202D50;--rail:#FBF7F0;--rail-on:#A2B6B4;--rail-active:#202D50;--rail-fg:#202D50}
@media (prefers-color-scheme: dark){:root[data-skin="stiker"]:not([data-theme="light"]){--paper:#141B30;--sunk:#243052;--line:#A2B6B4;--rail:#1C2540;--rail-on:#283A45;--rail-active:#F3ECE0;--rail-fg:#F3ECE0}}
:root[data-skin="stiker"][data-theme="dark"]{--paper:#141B30;--sunk:#243052;--line:#A2B6B4;--rail:#1C2540;--rail-on:#283A45;--rail-active:#F3ECE0;--rail-fg:#F3ECE0}
:root[data-skin="stiker"] .card,:root[data-skin="stiker"] .hero-band,:root[data-skin="stiker"] .kcell,:root[data-skin="stiker"] .kana,:root[data-skin="stiker"] .scen,:root[data-skin="stiker"] .player{border:2px solid var(--line);box-shadow:4px 4px 0 var(--line)}
:root[data-skin="stiker"] .btn{border:2px solid var(--line);box-shadow:3px 3px 0 var(--line)}
:root[data-skin="stiker"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
:root[data-skin="stiker"] .btn.pri{background:var(--sage);color:#202D50}
:root[data-skin="stiker"] .opt{border-color:var(--line)}
:root[data-skin="stiker"] .hero-band{background:var(--sage);color:#202D50}
:root[data-skin="stiker"] .hero-band .sub{color:#202D50}
:root[data-skin="stiker"] .hero-band .eyebrow{color:#835F38}
:root[data-skin="stiker"] .rail{border-right:2px solid var(--line)}
:root[data-skin="stiker"] .nav a.on{box-shadow:inset 0 0 0 2px var(--line)}
:root[data-skin="stiker"] .stat,:root[data-skin="stiker"] .read,:root[data-skin="stiker"] .vocab,:root[data-skin="stiker"] .line{border:2px solid var(--line)}
:root[data-skin="stiker"] .mod .no{border:2px solid var(--line)}

@media (max-width:720px){
  .rail{border-right:0;border-top:1.5px solid var(--line)}
  :root[data-skin="mega"] .rail{border-top:0}
  :root[data-skin="mega"] .rail::after{display:none}
  :root[data-skin="mega"] .nav a{font-size:10.5px}
  .nav a{font-size:10.5px;min-height:52px}
  .nav a .k{font-size:20px}
  .hero-band{grid-template-columns:1fr;padding:20px}
  .hero-band .owl{position:absolute;right:-6px;bottom:-12px;width:118px;margin:0}
  .hero-band>div:first-child{padding-right:92px}
  h1{font-size:1.55rem}
  .hero-band h1{font-size:1.4rem}
}

/* =========== MEGA MENDUNG + STIKER (tampilan utama) =========== */
:root[data-skin="mega"] .card,:root[data-skin="mega"] .kcell,:root[data-skin="mega"] .kana,:root[data-skin="mega"] .scen,:root[data-skin="mega"] .player,:root[data-skin="mega"] .gate-card{border:2px solid var(--stk);box-shadow:4px 4px 0 var(--stk)}
:root[data-skin="mega"] .hero-band{border:2px solid var(--stk);box-shadow:4px 4px 0 var(--sage)}
:root[data-skin="mega"] .btn{border:2px solid var(--stk);box-shadow:3px 3px 0 var(--stk)}
:root[data-skin="mega"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--stk)}
:root[data-skin="mega"] .btn:disabled{box-shadow:none}
:root[data-skin="mega"] .opt{border-color:var(--stk)}
:root[data-skin="mega"] .opt.right{border-color:var(--ok)}
:root[data-skin="mega"] .opt.wrong{border-color:var(--bad)}
:root[data-skin="mega"] .stat,:root[data-skin="mega"] .read,:root[data-skin="mega"] .vocab,:root[data-skin="mega"] .line,:root[data-skin="mega"] .mod .no,:root[data-skin="mega"] .tile{border:2px solid var(--stk);border-radius:12px}
:root[data-skin="mega"] .mission{border-top-color:var(--stk);border-top-style:dashed}
:root[data-skin="mega"] .chk{border-color:var(--stk)}
:root[data-skin="mega"] .levelbar button,:root[data-skin="mega"] .chips button,:root[data-skin="mega"] .choice button{border:2px solid var(--stk)}
:root[data-skin="mega"] .levelbar button.on,:root[data-skin="mega"] .chips button.on,:root[data-skin="mega"] .choice button.on{background:var(--sage);color:#202D50;border-color:var(--stk)}
:root[data-skin="mega"] .field input,:root[data-skin="mega"] .field select,:root[data-skin="mega"] .composer input,:root[data-skin="mega"] .filters select,:root[data-skin="mega"] .filters input{border:2px solid var(--stk);border-radius:12px}
:root[data-skin="mega"] .tbl-wrap{border:2px solid var(--stk);box-shadow:4px 4px 0 var(--stk)}
:root[data-skin="mega"] .speech{border:2px solid var(--stk)}
:root[data-skin="mega"] .ring circle:first-child{stroke:var(--ai-soft)}

/* kotak Streak / Latihan / Terbaik tidak terpotong di layar sedang */
.stats{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.stat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{white-space:nowrap}
@media (min-width:721px) and (max-width:1180px){.g2 .hero{grid-template-columns:1fr;justify-items:start}}