:root {
  --bg:#f6f3ff; --fg:#231f3d; --card:#fff; --line:#e3dcf6; --muted:#6d6a80; --accent:#7c4dff;
  --good:#1fa971; --good-bg:#dff7ea; --soft:#fff3d6; --soft-fg:#7a5400; --hint-bg:#e7f0ff; --bad:#e5484d;
  --c:#7c4dff; --c-soft:#ece6ff; --paper:#fffdf5; --ink:#2b2b45; --shadow:0 6px 0 rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#14122a; --fg:#f3f0ff; --card:#211e42; --line:#37336a; --muted:#a9a5c4; --accent:#a58bff;
    --good-bg:#12382a; --soft:#3b2f10; --soft-fg:#ffd98a; --hint-bg:#1a2a52; --paper:#2a2748; --ink:#f0eeff;
    --shadow:0 6px 0 rgba(0,0,0,.35);
  }
}
.s-mat { --c:#2f6bff; --c-soft:#dce7ff; } .s-ipa { --c:#1fa971; --c-soft:#d8f5e8; }
.s-ips { --c:#ff8a00; --c-soft:#ffe9cc; } .s-eng { --c:#ff4d8d; --c-soft:#ffdbe8; }
.s-ara { --c:#8a4dff; --c-soft:#eadfff; } .s-hidup { --c:#0fb5ae; --c-soft:#d3f5f3; }
.s-hati { --c:#f2b01e; --c-soft:#fff0c9; }
@media (prefers-color-scheme: dark) {
  .s-mat { --c-soft:#1d2c5c; } .s-ipa { --c-soft:#143a2c; } .s-ips { --c-soft:#4a2f0a; }
  .s-eng { --c-soft:#4a1a30; } .s-ara { --c-soft:#2c1f55; } .s-hidup { --c-soft:#0f3b39; } .s-hati { --c-soft:#4a3a0a; }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; overscroll-behavior:none; }
body { font:20px/1.4 system-ui,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg);
  touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#app { min-height:100dvh; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
h1,h2,h3,h4 { margin:0; }
.muted { color:var(--muted); }
.loading { text-align:center; padding:40vh 0; color:var(--muted); }
.ar { font-family:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",serif; font-size:1.5em; direction:rtl; }
hr { border:0; border-top:1px solid var(--line); width:100%; }

/* tombol */
.btn { min-height:64px; padding:0 22px; border:2px solid var(--line); border-radius:18px; background:var(--card); font-weight:700; box-shadow:var(--shadow); transition:transform .08s; }
.btn:active { transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.12); }
.btn.round { width:64px; padding:0; border-radius:50%; font-size:1.4rem; }
.btn.ghost { background:transparent; box-shadow:none; border-color:transparent; }
.btn.big { min-height:72px; font-size:1.15rem; }
.btn.go { background:var(--c, var(--accent)); border-color:transparent; color:#fff; }
.btn.go:disabled { opacity:.45; box-shadow:none; }
.btn.danger { color:var(--bad); border-color:var(--bad); }
.card { background:var(--card); border:2px solid var(--line); border-radius:24px; padding:20px; }
.pill { display:inline-flex; align-items:center; padding:6px 14px; border-radius:99px; background:var(--card); border:2px solid var(--line); font-weight:700; }
.pill.pop { animation:pop .6s; }
.bar { height:14px; background:var(--line); border-radius:99px; overflow:hidden; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb300,#ff6d00); border-radius:99px; transition:width .5s; }
.bar.sm { height:10px; width:100%; }
.bar.sm i { background:#fff; }

/* beranda */
.home { display:grid; grid-template-columns:320px 1fr; gap:20px; padding:20px; min-height:100dvh; }
.side { display:flex; flex-direction:column; gap:14px; align-self:start; position:sticky; top:20px; }
.mascot { font-size:84px; text-align:center; line-height:1; animation:bob 3s ease-in-out infinite; }
.mascot.big { font-size:120px; }
.side h1 { font-size:1.6rem; text-align:center; }
.lvl { display:flex; justify-content:space-between; font-weight:700; }
.chips { display:flex; gap:8px; justify-content:space-between; }
.chip { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:14px; background:var(--bg); border:2px solid var(--line); font-size:1.1rem; }
#app .holding { outline:4px solid var(--accent); }
.subjects { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; align-content:start; }
.subj { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:20px; min-height:200px; text-align:left; border:0; border-radius:28px;
  background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 70%,#000)); color:#fff; box-shadow:0 8px 0 color-mix(in srgb,var(--c) 55%,#000); transition:transform .1s; }
.subj:active { transform:translateY(5px); box-shadow:0 3px 0 color-mix(in srgb,var(--c) 55%,#000); }
.subj b { font-size:1.5rem; } .subj small { opacity:.92; font-size:.95rem; }
.subj-e { font-size:3.2rem; line-height:1; }
.subj .bar.sm { margin-top:auto; background:rgba(255,255,255,.3); }

/* layar umum */
.screen { display:flex; flex-direction:column; min-height:100dvh; }
.top { display:flex; align-items:center; gap:14px; padding:14px 20px; background:var(--c-soft); border-bottom:2px solid var(--line); position:sticky; top:0; z-index:5; }
.top h2 { flex:1; font-size:1.4rem; }
.scroll { padding:20px; max-width:1100px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* peta level */
.pathscreen { height:100dvh; overflow:hidden; }
.mapscroll { flex:1; min-height:0; overflow-y:auto; background:linear-gradient(180deg,var(--c-soft),var(--bg)); }
.map { position:relative; max-width:640px; margin:0 auto; }
.trail-wrap { position:absolute; inset:0; pointer-events:none; }
.trail-wrap svg { width:100%; height:100%; }
.trail-bg { fill:none; stroke:var(--card); stroke-width:34; stroke-linecap:round; opacity:.9; }
.trail { fill:none; stroke:var(--c); stroke-width:6; stroke-dasharray:2 14; stroke-linecap:round; opacity:.7; }
.banner { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:10px 20px; border-radius:99px;
  background:var(--card); border:3px solid var(--c); white-space:nowrap; z-index:2; box-shadow:var(--shadow); font-size:1.05rem; }
.banner span { font-size:1.6rem; }
.node { position:absolute; width:88px; height:88px; border-radius:50%; border:5px solid #fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; z-index:3;
  font-weight:800; font-size:1.7rem; color:#fff; background:var(--c); box-shadow:0 7px 0 color-mix(in srgb,var(--c) 55%,#000); }
.node .st { font-size:.7rem; letter-spacing:-1px; position:absolute; bottom:-22px; white-space:nowrap; color:var(--fg); }
.node.locked { background:#9a98a8; box-shadow:0 7px 0 #6b6978; }
.node.done { background:var(--good); box-shadow:0 7px 0 #137a52; }
.node.current { animation:pulse 1.6s infinite; }
.node:active { transform:translateY(4px); }

/* soal */
.qscreen { height:100dvh; }
.dots { flex:1; display:flex; gap:6px; justify-content:center; }
.dots i { width:14px; height:14px; border-radius:50%; background:var(--line); }
.dots i.done { background:var(--good); } .dots i.now { background:var(--c); transform:scale(1.3); }
.badges { display:flex; gap:8px; }
.qbody { flex:1; overflow-y:auto; padding:18px 24px 150px; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:980px; width:100%; margin:0 auto; }
.warm { background:var(--soft); color:var(--soft-fg); padding:6px 14px; border-radius:99px; font-size:.9rem; }
.prompt { display:flex; align-items:center; gap:10px; text-align:center; }
.prompt p { margin:0; font-size:1.7rem; font-weight:800; }
.visual { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; min-height:90px; font-size:2.2rem; background:var(--card); border:2px solid var(--line); border-radius:24px; padding:16px 22px; max-width:100%; }
.visual .row { display:inline-flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.visual .grid { display:flex; flex-direction:column; gap:2px; }
.obj { font-size:2.1rem; line-height:1.1; } .obj.gone { opacity:.25; filter:grayscale(1); text-decoration:line-through; }
.obj.dot { font-size:1rem; color:var(--c); }
.obj.num { position:relative; } .obj.num i { position:absolute; top:-8px; left:-2px; font-size:.7rem; font-style:normal; background:var(--c); color:#fff; border-radius:50%; width:20px; height:20px; display:grid; place-items:center; }
.hintrow { gap:10px !important; padding-top:10px; }
.op { font-size:2.4rem; font-weight:800; color:var(--c); padding:0 6px; }
.big { font-size:6rem; line-height:1; }
.cap { width:100%; text-align:center; font-size:1rem; color:var(--muted); }
.flag { width:min(320px,70vw); height:auto; border:2px solid var(--line); border-radius:8px; }
.swatch { width:160px; height:110px; border-radius:20px; border:3px solid var(--line); }
.bills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.bill { display:inline-flex; align-items:baseline; gap:3px; padding:14px 18px; border-radius:10px; font-size:1.3rem; font-weight:800; color:#fff; border:3px solid rgba(255,255,255,.55); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.bill i { font-size:.8rem; font-style:normal; opacity:.9; }
.b1000 { background:#8f8f8f; } .b2000 { background:#7a7f8c; } .b5000 { background:#a0722a; } .b10000 { background:#7e57c2; }
.b20000 { background:#2e9e5b; } .b50000 { background:#2b7bd1; }
.pie { --fill:var(--c); width:150px; height:150px; border-radius:50%; position:relative; background:conic-gradient(var(--fill) 0 var(--p), var(--line) 0); border:3px solid var(--fg); }
.pie::after { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg, transparent 0 calc(360deg / var(--n) - 1.6deg), var(--fg) 0 calc(360deg / var(--n))); }
.frac { display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; font-size:1.7rem; }
.frac b:first-child { border-bottom:3px solid currentColor; padding:0 8px 2px; }
.emo { font-size:1.6rem; }
.answer { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.answer.locked { pointer-events:none; }
.opts { display:grid; gap:14px; width:100%; }
.opts.c2 { grid-template-columns:repeat(2,1fr); } .opts.c3 { grid-template-columns:repeat(3,1fr); }
.opt { min-height:84px; padding:10px 16px; font-size:1.5rem; font-weight:700; background:var(--card); border:3px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; }
.opt small { font-size:.9rem; color:var(--muted); font-weight:600; }
.opt:active { transform:translateY(3px); }
.opt.sel { border-color:var(--c); background:var(--c-soft); }
.opt.right { border-color:var(--good); background:var(--good-bg); }
.opt.wrong { border-color:var(--bad); opacity:.5; }
.padshow { min-width:240px; text-align:center; font-size:3rem; font-weight:800; padding:8px 24px; border:3px solid var(--c); border-radius:20px; background:var(--card); }
.padshow.empty { color:var(--muted); }
.pad { display:grid; grid-template-columns:repeat(3,92px); gap:10px; }
.key { height:76px; font-size:2rem; font-weight:800; background:var(--card); border:3px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.key:active { transform:translateY(3px); }
.key.go { background:var(--good); color:#fff; border-color:transparent; }

/* hitung bersusun */
.vbox { flex-direction:row !important; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:24px; }
.vbox .pad { grid-template-columns:repeat(5,76px); }
.vbox .key { height:68px; }
.paper { background:var(--paper); border:3px solid var(--line); border-radius:14px; padding:18px 22px; min-width:300px;
  background-image:repeating-linear-gradient(transparent 0 35px, rgba(124,77,255,.12) 35px 36px); }
.vgrid { display:grid; grid-template-columns:repeat(var(--cols), 68px); gap:2px; justify-content:center; color:var(--ink); }
.vc { height:74px; display:grid; place-items:center; font-size:3rem; font-weight:700; font-family:"Segoe Print","Comic Sans MS","Chalkboard SE",system-ui,sans-serif; }
.vc.scratch { height:34px; font-size:1.4rem; color:var(--bad); }
.vc.sign { color:var(--c); }
.vc.top.struck { text-decoration:line-through; text-decoration-color:var(--bad); text-decoration-thickness:4px; }
.vc.active { background:color-mix(in srgb,var(--c) 14%,transparent); border-radius:12px; }
.vc.res.input { border:3px dashed var(--line); border-radius:12px; }
.vc.res.input.active { border:3px solid var(--c); background:var(--c-soft); }
.vc.res.locked { color:var(--good); border:3px solid var(--good); border-radius:12px; }
.vc.res.shown { color:var(--soft-fg); border:3px solid #f2b01e; border-radius:12px; }
.vline { height:5px; background:var(--ink); border-radius:3px; margin:2px 0; }
.vguide { margin-top:12px; font-size:1.2rem; min-height:3.2em; max-width:420px; }

/* ejaan */
.slots, .tiles { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.slot { width:70px; height:80px; font-size:2.4rem; font-weight:800; background:var(--card); border:3px dashed var(--c); border-radius:16px; }
.slot.lock { border-style:solid; background:var(--c-soft); } .slot.right { border:3px solid var(--good); background:var(--good-bg); }
.tile { width:74px; height:80px; font-size:2.3rem; font-weight:800; background:var(--c); color:#fff; border:0; border-radius:16px; box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#000); }
.tile.used { opacity:.25; }

/* umpan balik */
.fb { position:fixed; left:0; right:0; bottom:0; padding:16px 24px calc(16px + env(safe-area-inset-bottom)); display:flex; gap:16px; align-items:center; justify-content:space-between; z-index:9;
  border-top:4px solid; animation:rise .25s; }
.fb.hidden { display:none; }
.fb.good { background:var(--good-bg); border-color:var(--good); } .fb.soft { background:var(--soft); border-color:#f2b01e; }
.fb.hint { background:var(--hint-bg); border-color:#4c8dff; }
.fbtxt { flex:1; display:flex; flex-direction:column; gap:4px; }
.fbtxt b { font-size:1.3rem; }
.gain { font-weight:700; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fastchip { background:#ffb300; color:#3a2600; padding:2px 12px; border-radius:99px; animation:pop .6s; }
.expl { font-size:1.1rem; opacity:.9; }
.fb .btn { min-width:200px; flex:none; }

/* hasil */
.result { align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:linear-gradient(180deg,var(--c-soft),var(--bg)); }
.bigstars { display:flex; gap:10px; font-size:5rem; }
.bigstar { opacity:0; animation:starin .6s forwards; }
.sum { display:flex; flex-direction:column; gap:6px; text-align:left; min-width:320px; }
.newbest { color:var(--good); font-weight:800; }
.row-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* statistik & koleksi */
.cards4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.stat .si { font-size:2rem; } .stat b { font-size:1.8rem; } .stat small { color:var(--muted); }
.group h3 { margin:10px 0; }
.squares { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.sq { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; border-radius:16px; min-height:104px; color:#1b1b2f; }
.sq span { font-size:1.6rem; } .sq b { font-size:.95rem; line-height:1.15; } .sq small { font-size:.8rem; opacity:.8; }
.h0 { background:#e1dfeb; } .h1 { background:#ffb4a8; } .h2 { background:#ffd29a; } .h3 { background:#fff0a0; } .h4 { background:#bfeab0; } .h5 { background:#6fd49a; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:.85rem; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:6px; } .sq-dot { width:16px; height:16px; border-radius:5px; display:inline-block; }
.quad { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.q { padding:14px 18px; border-radius:18px; min-height:130px; color:#1b1b2f; }
.q ul { margin:6px 0 0; padding-left:20px; font-size:.95rem; }
.q1 { background:#6fd49a; } .q2 { background:#bfeab0; } .q3 { background:#ffb4a8; } .q4 { background:#ffd29a; }
.coll { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.tile-c { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:16px; background:var(--card); border:2px solid var(--line); opacity:.55; }
.tile-c.got { opacity:1; border-color:var(--good); }
.tile-c small { font-size:.75rem; text-align:center; }
.ce { font-size:2.6rem; line-height:1.1; } .cf { width:64px; height:auto; border-radius:4px; border:1px solid var(--line); }

/* modal & umum */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:30; padding:16px; }
.sheet { width:min(94vw,520px); display:flex; flex-direction:column; gap:12px; }
.toggle { min-height:64px; border:2px solid var(--line); border-radius:16px; background:var(--card); text-align:left; padding:0 18px; font-weight:600; }
.toggle.on { border-color:var(--good); background:var(--good-bg); }
.toggle::after { content:" — mati"; color:var(--muted); font-weight:400; }
.toggle.on::after { content:" — nyala"; color:var(--good); }
.toast { position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:12px 22px; border-radius:99px; z-index:40; font-weight:600; animation:rise .25s; }

.shake { animation:shake .4s; }
@keyframes shake { 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@keyframes bob { 50% { transform:translateY(-6px); } }
@keyframes rise { from { transform:translateY(30px); opacity:0; } }
@keyframes starin { 0% { transform:scale(.2) rotate(-40deg); opacity:0; } 70% { transform:scale(1.3) rotate(8deg); opacity:1; } 100% { transform:scale(1); opacity:1; } }
body.calm *, body.calm *::before, body.calm *::after { animation:none !important; transition:none !important; }
body.calm .bigstar { opacity:1; }
@media (prefers-reduced-motion: reduce) { .mascot, .node.current { animation:none; } }

/* tablet potret / layar sempit */
@media (max-width: 900px) {
  .home { grid-template-columns:1fr; } .side { position:static; }
  .quad { grid-template-columns:1fr; }
  .opts.c3 { grid-template-columns:repeat(2,1fr); }
  .prompt p { font-size:1.4rem; }
}