:root{
    --kertas:#FFFDF6;
    --garis:#DCE7F2;
    --tinta:#1E2140;
    --tinta-muda:#6B7095;
    --kuning:#FFC93C;
    --biru:#3B6FE0;
    --benar:#12996E;
    --benar-bg:#E3F6EE;
    --salah:#E2493A;
    --salah-bg:#FCE9E6;
    --radius:18px;
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  body{
    background-color:var(--kertas);
    background-image:
      linear-gradient(var(--garis) 1px, transparent 1px),
      linear-gradient(90deg, var(--garis) 1px, transparent 1px);
    background-size:28px 28px;
    font-family:"Plus Jakarta Sans", system-ui, sans-serif;
    color:var(--tinta);
    min-height:100vh;
    padding:20px 16px 48px;
    -webkit-text-size-adjust:100%;
  }

  .wrap{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}

  /* ---------- kepala ---------- */
  .kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .judul{
    font-family:"Baloo 2", cursive;
    font-weight:800;
    font-size:clamp(1.7rem,6vw,2.4rem);
    line-height:1.1;
    letter-spacing:-.02em;
  }
  .judul span{
    background:var(--kuning);
    padding:0 .25em;
    border-radius:6px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .atur-ulang{
    font-family:inherit;font-weight:700;font-size:.95rem;
    color:var(--tinta-muda);background:transparent;
    border:2px solid var(--garis);border-radius:999px;
    padding:10px 16px;cursor:pointer;
  }
  .atur-ulang:hover{border-color:var(--tinta);color:var(--tinta);}

  /* ---------- menu operasi ---------- */
  .menu-operasi{
    display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;
    background:#fff;border:3px solid var(--tinta);border-radius:20px;
    box-shadow:4px 4px 0 var(--tinta);padding:10px;
  }
  .ops{
    font-family:"Plus Jakarta Sans", sans-serif;font-weight:800;font-size:.8rem;
    background:#F4F6FB;color:var(--tinta-muda);border:2px solid var(--garis);
    border-radius:12px;padding:10px 8px;cursor:pointer;transition:all .15s ease;
    min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;
    white-space:nowrap;
  }
  .ops:hover{border-color:var(--tinta);color:var(--tinta);transform:translateY(-1px);}
  .ops.aktif{
    border-color:var(--tinta);color:var(--tinta);
    box-shadow:inset 0 -2px 0 rgba(30,33,64,.15);
  }

  .ops[data-operasi="tambah"]{--op-color:var(--benar);--op-soft:#E3F6EE;}
  .ops[data-operasi="kurang"]{--op-color:var(--salah);--op-soft:#FCE9E6;}
  .ops[data-operasi="kali"]{--op-color:var(--biru);--op-soft:#EAF1FF;}
  .ops[data-operasi="bagi"]{--op-color:#A85BFF;--op-soft:#F1E9FF;}

  .ops[data-operasi="tambah"],
  .ops[data-operasi="kurang"],
  .ops[data-operasi="kali"],
  .ops[data-operasi="bagi"]{
    background:var(--op-soft);border-color:color-mix(in srgb, var(--op-color) 30%, #dfe7f1);
    color:var(--op-color);
  }

  .ops.aktif[data-operasi="tambah"]{background:linear-gradient(180deg, #E3F6EE 0%, #C9F0D9 100%);box-shadow:0 5px 0 var(--benar), inset 0 -2px 0 rgba(18,153,110,.2);}
  .ops.aktif[data-operasi="kurang"]{background:linear-gradient(180deg, #FCE9E6 0%, #F8C9C1 100%);box-shadow:0 5px 0 var(--salah), inset 0 -2px 0 rgba(226,73,58,.2);}
  .ops.aktif[data-operasi="kali"]{background:linear-gradient(180deg, #EAF1FF 0%, #CFE0FF 100%);box-shadow:0 5px 0 var(--biru), inset 0 -2px 0 rgba(59,111,224,.2);}
  .ops.aktif[data-operasi="bagi"]{background:linear-gradient(180deg, #F1E9FF 0%, #E3D1FF 100%);box-shadow:0 5px 0 #A85BFF, inset 0 -2px 0 rgba(168,91,255,.2);}

  /* ---------- papan skor ---------- */
  .papan-skor{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .skor{
    background:#fff;border:3px solid var(--tinta);border-radius:var(--radius);
    box-shadow:4px 4px 0 var(--tinta);
    padding:12px 8px;text-align:center;
  }
  .skor .cap{
    display:block;font-size:.78rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tinta-muda);margin-bottom:2px;
  }
  .skor .angka{
    font-family:"Baloo 2", cursive;font-weight:800;
    font-size:clamp(2rem,9vw,2.8rem);line-height:1.05;display:block;
  }
  .skor.benar{border-color:var(--benar);box-shadow:4px 4px 0 var(--benar);}
  .skor.benar .angka{color:var(--benar);}
  .skor.salah{border-color:var(--salah);box-shadow:4px 4px 0 var(--salah);}
  .skor.salah .angka{color:var(--salah);}
  .skor.runtun{border-color:var(--biru);box-shadow:4px 4px 0 var(--biru);}
  .skor.runtun .angka{color:var(--biru);}
  .berdetak{animation:detak .35s ease;}
  @keyframes detak{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

  /* ---------- pilih tabel ---------- */
  .baris-pilihan{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:4px;}
  .baris-pilihan::-webkit-scrollbar{height:0;}
  .cap-pilihan{
    font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--tinta-muda);white-space:nowrap;padding-right:2px;
  }
  .pil{
    flex:0 0 auto;font-family:"Baloo 2", cursive;font-weight:700;font-size:1.15rem;
    background:#fff;color:var(--tinta);border:2px solid var(--garis);
    border-radius:999px;padding:8px 16px;cursor:pointer;
  }
  .pil:hover{border-color:var(--tinta);}
  .pil[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta);}

  /* ---------- kartu soal ---------- */
  .kartu{
    background:#fff;border:3px solid var(--tinta);border-radius:24px;
    box-shadow:6px 6px 0 var(--tinta);
    padding:28px 18px 22px;text-align:center;
  }
  .soal{
    font-family:"Baloo 2", cursive;font-weight:800;
    font-size:clamp(2.6rem,13vw,4.6rem);line-height:1;
    display:flex;align-items:center;justify-content:center;gap:.12em;flex-wrap:nowrap;
  }
  .op,.sama{color:var(--tinta-muda);}
  .kotak-jawab{
    min-width:2.1em;padding:0 .12em;
    border-bottom:6px solid var(--kuning);
    color:var(--tinta);
  }
  .kotak-jawab.kosong{color:#C6CBDD;}
  .kotak-jawab.pas{border-bottom-color:var(--benar);color:var(--benar);}
  .kotak-jawab.keliru{border-bottom-color:var(--salah);color:var(--salah);}
  .kotak-jawab.pop{animation:pop .4s ease;}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

  .kabar{
    margin-top:20px;font-weight:700;font-size:clamp(1rem,4vw,1.25rem);
    padding:12px 14px;border-radius:12px;background:#F4F6FB;color:var(--tinta-muda);
    min-height:52px;display:flex;align-items:center;justify-content:center;
  }
  .kabar.pas{background:var(--benar-bg);color:var(--benar);}
  .kabar.keliru{background:var(--salah-bg);color:var(--salah);}

  /* ---------- tombol angka ---------- */
  .papan-tombol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .tombol{
    font-family:"Baloo 2", cursive;font-weight:700;
    font-size:clamp(1.9rem,7vw,2.6rem);
    min-height:76px;background:#fff;color:var(--tinta);
    border:3px solid var(--tinta);border-radius:var(--radius);
    box-shadow:0 5px 0 var(--tinta);
    cursor:pointer;transition:transform .06s ease, box-shadow .06s ease;
    display:flex;align-items:center;justify-content:center;
  }
  .tombol:active{transform:translateY(5px);box-shadow:0 0 0 var(--tinta);}
  .tombol.bantu{font-size:clamp(1rem,4.2vw,1.35rem);font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:var(--tinta-muda);}
  .tombol[disabled]{opacity:.35;cursor:not-allowed;box-shadow:0 5px 0 var(--tinta);transform:none;}

  .tombol-utama{
    grid-column:1 / -1;font-family:"Baloo 2", cursive;font-weight:800;
    font-size:clamp(1.4rem,5.5vw,1.9rem);min-height:76px;
    background:var(--kuning);color:var(--tinta);
    border:3px solid var(--tinta);border-radius:var(--radius);
    box-shadow:0 5px 0 var(--tinta);cursor:pointer;
    transition:transform .06s ease, box-shadow .06s ease;
  }
  .tombol-utama:active{transform:translateY(5px);box-shadow:0 0 0 var(--tinta);}
  .tombol-utama.lanjut{background:var(--benar);color:#fff;}

  .petunjuk{text-align:center;font-size:.85rem;color:var(--tinta-muda);font-weight:500;}

  :focus-visible{outline:3px solid var(--biru);outline-offset:3px;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
  }