:root{
  --hijau:#28b99a; --hijau-tua:#1c8b74; --kuning:#ffd166; --merah:#ef476f;
  --biru:#118ab2; --gelap:#0f3d34; --bg:#f3fbf8; --kartu:#ffffff;
  --teks:#123a33; --teks-lembut:#5b7d76; --bayang:0 6px 0 rgba(0,0,0,.12);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(160deg,#e9fbf5 0%,#f7fffd 45%,#eaf6ff 100%);
  color:var(--teks); min-height:100vh; font-size:18px;
}
.layar{display:none;max-width:820px;margin:0 auto;padding:18px 16px 110px}
.layar.aktif{display:block;animation:masuk .25s ease}
@keyframes masuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.hero{text-align:center;margin:10px 0 18px}
.hero h1{font-size:2.1rem;margin:0;letter-spacing:-.5px}
.hero .sub{margin:6px 0 0;color:var(--teks-lembut);font-size:1rem}
.hero.kecil{margin:4px 0 14px}
.hero.kecil h1{font-size:1.5rem}

/* ---------- profil bar ---------- */
.profil-bar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--kartu);border-radius:var(--radius);padding:12px 16px;
  box-shadow:0 2px 10px rgba(16,60,50,.07);margin-bottom:14px;font-size:1.05rem;
}
.mini{
  background:#e7f6f1;border:none;color:var(--hijau-tua);font-weight:700;
  padding:8px 14px;border-radius:999px;font-size:.85rem;cursor:pointer;
}
.mini:active{transform:scale(.96)}

/* ---------- statistik ringkas ---------- */
.stat-row,.stat-game{display:grid;gap:10px;margin-bottom:14px}
.stat-row{grid-template-columns:repeat(3,1fr)}
.stat-game{grid-template-columns:repeat(4,1fr)}
.kotak{
  background:var(--kartu);border-radius:18px;padding:12px 8px;text-align:center;
  box-shadow:0 2px 10px rgba(16,60,50,.07);
}
.kotak b{display:block;font-size:1.5rem;color:var(--hijau-tua);line-height:1.15}
.stat-game .kotak b{font-size:1.35rem}
.kotak small{color:var(--teks-lembut);font-size:.72rem;display:block;margin-top:2px}

/* ---------- judul bagian ---------- */
.judul-bagian{font-size:1.05rem;margin:20px 0 10px;color:var(--teks-lembut);font-weight:700}

/* ---------- grid level ---------- */
.grid-level{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.level-kartu{
  background:var(--kartu);border:3px solid #e2f2ec;border-radius:var(--radius);
  padding:16px;cursor:pointer;text-align:left;transition:.15s;box-shadow:0 3px 0 #dceae5;
}
.level-kartu:hover{border-color:var(--hijau);transform:translateY(-2px)}
.level-kartu:active{transform:translateY(0)}
.level-kartu .ikon{font-size:2rem}
.level-kartu .nama{font-weight:800;font-size:1.15rem;margin:6px 0 2px}
.level-kartu .ket{color:var(--teks-lembut);font-size:.85rem}
.level-kartu .bintangnya{font-size:1.1rem;margin-top:8px;letter-spacing:2px}
.level-kartu .target-wpm{font-size:.75rem;color:var(--biru);font-weight:700}

/* ---------- game ---------- */
.game-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.level-tag{
  background:var(--hijau);color:#fff;font-weight:800;padding:7px 16px;
  border-radius:999px;font-size:.9rem;
}
.hint-ulang{color:var(--teks-lembut);font-size:.8rem;margin-left:auto;text-align:right}

.timer-wrap{position:relative;background:#e3f3ee;border-radius:999px;height:34px;overflow:hidden;margin-bottom:16px}
.timer-bar{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,var(--hijau),var(--kuning));transition:width .25s linear}
.timer-wrap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gelap)}

.target-box{
  background:var(--kartu);border-radius:var(--radius);padding:26px 18px;min-height:190px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 4px 16px rgba(16,60,50,.08);margin-bottom:14px;
}
.target{font-size:2rem;font-weight:800;line-height:1.5;letter-spacing:.5px;word-break:break-word}
.target .ok{color:var(--hijau-tua)}
.target .salah{color:#fff;background:var(--merah);border-radius:8px;padding:0 4px}
.target .kini{background:var(--kuning);border-radius:8px;padding:0 4px;animation:pulse .9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.target .belum{color:#9fb8b2}

#input-ketik{
  position:absolute;opacity:0;pointer-events:none;height:1px;width:1px;
}
.kunci-hint{text-align:center;color:var(--teks-lembut);font-size:.85rem;margin-top:2px}

/* ---------- popup sesi ---------- */
.popup{
  position:fixed;inset:0;background:rgba(10,40,34,.55);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:50;backdrop-filter:blur(3px);
}
.popup.buka{display:flex;animation:masuk .2s ease}
.popup-kartu{
  background:var(--kartu);border-radius:26px;padding:24px 20px;max-width:420px;width:100%;
  text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.bintang-besar{font-size:2.6rem;letter-spacing:6px;line-height:1}
.popup-kartu h2{margin:8px 0 14px;font-size:1.4rem}
.popup-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.popup-stat b{display:block;font-size:1.25rem;color:var(--hijau-tua)}
.popup-stat small{font-size:.68rem;color:var(--teks-lembut)}
.pb-badge{font-size:.9rem;color:var(--gelap);background:#fff6da;border-radius:14px;padding:8px;margin-bottom:14px;display:none}
.pb-badge.ada{display:block}
.popup-aksi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tombol{
  border:none;border-radius:16px;padding:14px;font-size:1rem;font-weight:800;
  cursor:pointer;background:#e7f6f1;color:var(--hijau-tua);box-shadow:0 3px 0 #cfe8e1;
}
.tombol.utama{background:var(--hijau);color:#fff;box-shadow:0 3px 0 var(--hijau-tua)}
.tombol.bahaya{background:#ffe6ec;color:#b3123f;box-shadow:0 3px 0 #f6c9d4}
.tombol:active{transform:translateY(2px);box-shadow:none}

/* ---------- hasil / progres ---------- */
.grafik-wrap{background:var(--kartu);border-radius:var(--radius);padding:14px;box-shadow:0 2px 10px rgba(16,60,50,.07)}
#grafik{width:100%;height:auto;display:block}
.grafik-info{text-align:center;color:var(--teks-lembut);font-size:.85rem;margin:8px 0 0}

.bintang-level{display:grid;gap:10px}
.bl-baris{
  background:var(--kartu);border-radius:16px;padding:12px 14px;display:flex;
  justify-content:space-between;align-items:center;box-shadow:0 2px 8px rgba(16,60,50,.06);font-size:.95rem;
}
.bl-baris b{color:var(--hijau-tua)}
.bl-baris .bintangnya{font-size:1.1rem;letter-spacing:2px}

.badge-wrap{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  background:var(--kartu);border-radius:14px;padding:10px 12px;font-size:.82rem;
  box-shadow:0 2px 8px rgba(16,60,50,.06);display:flex;gap:6px;align-items:center;
}
.badge.mati{opacity:.4;filter:grayscale(1)}

.riwayat{display:grid;gap:8px}
.ri-baris{
  background:var(--kartu);border-radius:14px;padding:10px 14px;font-size:.85rem;
  display:flex;justify-content:space-between;gap:8px;box-shadow:0 2px 8px rgba(16,60,50,.05);
}
.ri-baris span:last-child{color:var(--teks-lembut)}

/* ---------- setelan ---------- */
.kartu-setelan{
  background:var(--kartu);border-radius:var(--radius);padding:16px;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(16,60,50,.07);
}
.kartu-setelan label{display:block;font-weight:700;margin-bottom:8px;color:var(--teks-lembut);font-size:.9rem}
.kartu-setelan label.baris{display:flex;justify-content:space-between;align-items:center;margin:0;padding:8px 0;color:var(--teks);font-size:1rem}
.input-teks{
  width:100%;padding:14px;border-radius:14px;border:2px solid #d9ece6;font-size:1rem;
  margin-bottom:10px;font-family:inherit;
}
.input-teks:focus{outline:none;border-color:var(--hijau)}
input[type=checkbox]{width:26px;height:26px;accent-color:var(--hijau)}
.peringatan{color:#b3123f;font-size:.85rem;margin:0 0 10px}
.kredit{text-align:center;color:var(--teks-lembut);font-size:.9rem;margin:26px 0 10px}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px;
  background:rgba(255,255,255,.96);border-top:2px solid #e2f2ec;padding:8px 10px;
  backdrop-filter:blur(8px);z-index:40;
}
.tabbar button{
  flex:1;max-width:160px;border:none;background:transparent;font-size:.85rem;font-weight:700;
  color:var(--teks-lembut);padding:10px 4px;border-radius:14px;cursor:pointer;font-family:inherit;
}
.tabbar button.aktif{background:#e7f6f1;color:var(--hijau-tua)}

/* ---------- responsif ---------- */
@media (max-width:520px){
  .target{font-size:1.5rem}
  .stat-game{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:1.7rem}
  .popup-stat{grid-template-columns:repeat(2,1fr)}
}