/* ============================================================
   Mandarin Kids — Design System
   Palette: biru porselin (青花) atas kertas hangat
   Signature: 田字格 (tian zi ge) grid
   ============================================================ */

:root {
  /* Warna */
  --paper:      #FBF9F4;   /* latar kertas hangat */
  --porcelain:  #2B5DA8;   /* biru porselin - primary */
  --porcelain-deep: #1D4480;
  --porcelain-mist: #E7EEF9; /* biru sangat cair utk surface */
  --ink:        #22304A;   /* teks */
  --ink-soft:   #6B7A94;
  --sun:        #FFC53D;   /* bintang / reward */
  --sun-deep:   #E8A800;
  --leaf:       #34A853;   /* betul */
  --leaf-mist:  #E3F4E8;
  --coral:      #F26D5B;   /* salah - lembut, bukan merah garang */
  --coral-mist: #FDECEA;
  --grid-line:  #C9D6EA;   /* garisan tian zi ge */

  /* Type */
  --font-display: 'Fredoka', sans-serif;
  --font-body:    'Nunito', sans-serif;
  --font-hanzi:   'Noto Sans SC', sans-serif;

  /* Saiz sentuhan */
  --tap-min:  48px;
  --tap-kid:  72px;   /* tadika */

  --radius:    20px;
  --radius-lg: 28px;
  --shadow-card: 0 4px 0 rgba(43, 93, 168, 0.12);
  --shadow-btn:  0 5px 0 var(--porcelain-deep);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  overscroll-behavior: none; /* elak pull-to-refresh masa game */
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; }

/* ---------- Tian Zi Ge (田字格) — signature ---------- */
.tzg {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 3px solid var(--porcelain);
  border-radius: 12px;
  overflow: hidden;
}
.tzg::before, .tzg::after {
  content: '';
  position: absolute;
  background: transparent;
}
.tzg::before { /* garisan pancung + dan X guna gradient */
  inset: 0;
  background:
    linear-gradient(to right,  transparent calc(50% - 1px), var(--grid-line) calc(50% - 1px), var(--grid-line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--grid-line) calc(50% - 1px), var(--grid-line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg,  transparent calc(50% - 1px), var(--grid-line) calc(50% - 1px), var(--grid-line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--grid-line) calc(50% - 1px), var(--grid-line) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: .7;
}
.tzg .hanzi {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-hanzi);
  font-weight: 500;
  line-height: 1;
  z-index: 1;
}

/* Pattern latar halus guna tzg mini (untuk header/hero) */
.tzg-pattern {
  background-image:
    linear-gradient(var(--porcelain-mist) 1px, transparent 1px),
    linear-gradient(90deg, var(--porcelain-mist) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- Layout ---------- */
.shell {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* ---------- Butang ---------- */
.btn {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  min-height: var(--tap-min);
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius);
  background: var(--porcelain);
  color: #fff;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--porcelain-deep); }
.btn-sun  { background: var(--sun);  color: var(--ink); box-shadow: 0 5px 0 var(--sun-deep); }
.btn-sun:active { box-shadow: 0 1px 0 var(--sun-deep); }
.btn-ghost { background: transparent; color: var(--porcelain); box-shadow: none; }

.btn-kid { min-height: var(--tap-kid); font-size: 1.5rem; border-radius: var(--radius-lg); }

/* Butang audio (speaker) */
.btn-audio {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: none;
  background: var(--porcelain);
  color: #fff;
  font-size: 2.2rem;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  display: grid; place-items: center;
  margin: 0 auto;
}
.btn-audio:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--porcelain-deep); }
.btn-audio.playing { animation: pulse 1s ease infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- Kad pilihan jawapan ---------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.option-card {
  min-height: var(--tap-kid);
  border: 3px solid var(--porcelain-mist);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-hanzi);
  font-size: 2.4rem;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 14px;
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
  touch-action: manipulation;
}
.option-card:active { transform: scale(.96); }
.option-card.correct  { border-color: var(--leaf);  background: var(--leaf-mist); }
.option-card.wrong    { border-color: var(--coral); background: var(--coral-mist); animation: shake .35s ease; }
.option-card.dim      { opacity: .4; pointer-events: none; }
@keyframes shake {
  20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

.option-card .tone-pinyin { font-family: var(--font-body); font-weight: 800; font-size: 1.9rem; }

/* ---------- Progress bar lesson ---------- */
.progress-track {
  height: 14px;
  background: var(--porcelain-mist);
  border-radius: 999px;
  overflow: hidden;
  flex: 1;
}
.progress-fill {
  height: 100%;
  background: var(--sun);
  border-radius: 999px;
  width: 0;
  transition: width .4s cubic-bezier(.34,1.4,.64,1);
}
.player-topbar {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
}
.player-topbar .close {
  font-size: 1.6rem; color: var(--ink-soft);
  background: none; border: none; cursor: pointer;
  min-width: var(--tap-min); min-height: var(--tap-min);
}

/* ---------- Stage (kawasan aktiviti) ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 24px;
}
.stage .prompt {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 22px;
}

/* Feedback banner bawah */
.feedback {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .25s ease;
  border-radius: 24px 24px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 0 auto;
}
.feedback.show { transform: translateY(0); }
.feedback.good { background: var(--leaf-mist); color: var(--leaf); }
.feedback.bad  { background: var(--coral-mist); color: var(--coral); }
.feedback .msg { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }

/* ---------- Skrin habis lesson ---------- */
.finish {
  text-align: center;
  padding: 40px 0;
}
.finish .stars { font-size: 3.4rem; letter-spacing: .1em; }
.finish .stars .off { opacity: .25; filter: grayscale(1); }
.finish h2 { font-size: 1.8rem; margin: 14px 0 4px; }
.finish .score { color: var(--ink-soft); margin-bottom: 28px; }

/* ---------- Senarai modul/lesson (home) ---------- */
.module-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.module-card h3 { margin: 0 0 2px; font-size: 1.25rem; }
.module-card .zh { color: var(--ink-soft); font-family: var(--font-hanzi); font-size: .95rem; }
.lesson-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min);
  padding: 10px 0;
  border-top: 1.5px dashed var(--porcelain-mist);
  text-decoration: none; color: var(--ink);
  gap: 10px;
}
.lesson-row .stars-mini { color: var(--sun-deep); font-size: .95rem; white-space: nowrap; }
.lesson-row.locked { opacity: .45; }

/* Tracing canvas */
#trace-target { width: min(78vw, 340px); margin: 0 auto; touch-action: none; }

/* ---------- A11y & motion ---------- */
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Borang auth & pemilih profil ---------- */
.auth-card {
  max-width: 460px;
  margin: 40px auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 14px 40px rgba(43, 93, 168, .12);
  padding: 34px 30px 30px;
}

/* Avatar panda di kepala borang auth */
.auth-ava {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8FB8F6, #6E9EF0);
  display: grid;
  place-items: center;
  font-size: 3rem;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(91, 141, 239, .34);
}

.auth-title {
  font-family: var(--font-display);
  color: var(--porcelain);
  text-align: center;
  margin: 0;
  font-size: clamp(2rem, 7vw, 2.7rem);
  line-height: 1.1;
}
.auth-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 6px 0 26px;
}
.auth-alt {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 18px 0 0;
}
.auth-alt a { color: var(--porcelain); font-weight: 800; text-decoration: underline; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.input {
  width: 100%;
  min-height: 58px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: #F8FAFF;
  border: 2px solid #DFE8F7;
  border-radius: 16px;
  box-sizing: border-box;
}
.input::placeholder { color: #97A6BF; }
.input:focus {
  outline: none;
  border-color: var(--porcelain);
  background: #fff;
}

/* Butang utama borang auth — sepadan butang bergradien di seluruh app */
.btn-auth {
  width: 100%;
  min-height: 64px;
  margin-top: 8px;
  border: none;
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(180deg, #7FA9F5, #5B8DEF);
  box-shadow: 0 5px 0 #4574CE;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}
.btn-auth:active { transform: translateY(4px); box-shadow: 0 1px 0 #4574CE; }

/* Nota bawah borang */
.auth-nota {
  background: #EAF1FD;
  border-radius: 16px;
  padding: 14px 18px;
  margin-top: 16px;
  color: #4A5B78;
  font-size: .97rem;
  line-height: 1.5;
}
.field-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: .95rem;
}
.form-error {
  color: var(--coral);
  background: var(--coral-mist);
  border-radius: 12px;
  padding: 8px 12px;
  margin: -8px 0 14px;
  font-size: .9rem;
}
.form-note {
  color: var(--ink-soft);
  background: var(--porcelain-mist);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .9rem;
}



/* ============================================================
   Saiz kad aksara (田字格)
   Dikawal di sini, bukan inline dalam game-engine.js, supaya
   breakpoint di bawah boleh mengubahnya. Setiap saiz dihadkan oleh
   LEBAR dan TINGGI sekali gus — terma vh itulah yang menjadikannya
   muat dalam landscape, di mana tinggi skrin jauh lebih ketat.
   ============================================================ */
.tzg-intro {
  width: min(260px, 70vw, 46vh);
  margin: 0 auto;
}
.tzg-intro .hanzi { font-size: min(160px, 43vw, 28vh); }

.tzg-trace {
  width: min(420px, 88vw, 62vh);
  margin: 0 auto;
}

/* ============================================================
   Tablet & landscape
   ============================================================ */

/* Tablet ke atas: lebarkan lajur dan besarkan sasaran sentuh.
   Tanpa ini semua kandungan tersepit dalam lajur 560px di tengah
   skrin tablet — itu sebabnya paparan nampak kecil terapung. */
@media (min-width: 768px) {
  :root {
    --tap-min: 56px;
    --tap-kid: 88px;
  }

  html, body { font-size: 18px; }

  .shell { max-width: 720px; padding: 24px; }

  .btn      { font-size: 1.3rem; padding: 14px 32px; }
  .btn-kid  { font-size: 1.7rem; }
  .btn-audio { width: 104px; height: 104px; font-size: 2.6rem; }

  .stage .prompt { font-size: 1.6rem; }

  .option-grid { gap: 18px; }
  .option-card { font-size: 3rem; }
  .option-card .tone-pinyin { font-size: 2.3rem; }

  .tzg-intro { width: min(360px, 60vw, 52vh); }
  .tzg-intro .hanzi { font-size: min(222px, 37vw, 32vh); }
  .tzg-trace { width: min(520px, 70vw, 64vh); }

  .auth-card  { max-width: 480px; padding: 36px 32px; margin: 64px auto; }
  .auth-title { font-size: 2.4rem; }

}

/* Tablet besar / desktop */
@media (min-width: 1024px) {
  .shell { max-width: 880px; }
  .option-grid { gap: 22px; }
}

/* Landscape rendah — tablet kecil dan telefon dipusing.
   Di sini tinggi skrin yang menjadi kekangan, bukan lebar: susun
   pilihan jawapan dalam 4 lajur dan rapatkan jarak menegak supaya
   satu lesson muat tanpa perlu skrol. */
@media (orientation: landscape) and (max-height: 600px) {
  .shell { padding: 10px 18px; }

  .stage { padding: 4px 0 12px; }
  .stage .prompt { font-size: 1.15rem; margin-bottom: 12px; }

  .btn-audio { width: 64px; height: 64px; font-size: 1.7rem; }
  .btn-kid   { min-height: 56px; font-size: 1.25rem; }

  .option-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
  .option-card { font-size: 2rem; min-height: 56px; padding: 8px; }
  .option-card .tone-pinyin { font-size: 1.6rem; }

  .auth-card { margin: 16px auto; padding: 22px 24px; }

  .player-topbar { margin-bottom: 8px; }
}

/* ============================================================
   Skrin pilih profil anak
   Latar biru muda dikhaskan pada skrin ni sahaja (kelas .picker
   pada body) supaya skrin belajar kekal dengan latar kertas hangat.
   ============================================================ */
body.sky {
  background: #EDF2FE;
}

.picker-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  text-align: center;
  color: var(--ink);
  margin: 8px 0 28px;
  line-height: 1.25;
}
.picker-title .zh { color: #5B8DEF; }

.picker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-bottom: 30px;
}

/* Jubin profil — butang hantar borang, digayakan sebagai kad */
.tile {
  width: 140px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 10px;
  transition: transform .1s ease;
  touch-action: manipulation;
}
.tile:active { transform: translateY(3px); }

.tile-face {
  width: 132px;
  height: 132px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  font-size: 4rem;
  line-height: 1;
  background: linear-gradient(180deg, #8FB8F6, #6E9EF0);
  box-shadow: 0 8px 18px rgba(91, 141, 239, .32);
}
.tile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
}
.tile-level {
  font-size: .95rem;
  color: var(--ink-soft);
  margin-top: -6px;
}

/* Jubin "Tambah profil" — bersempadan putus-putus, bukan bergradien,
   supaya jelas ia satu tindakan dan bukan profil anak. Label diletak DALAM
   kotak, sejajar dengan nama anak pada jubin profil di sebelahnya. */
.tile-add .tile-face {
  background: transparent;
  border: 3px dashed #B9C9E6;
  box-shadow: none;
  gap: 12px;
  align-content: center;
}
.tile-add .plus {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  color: #5B8DEF;
  font-size: 2.4rem;
  font-weight: 300;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(91, 141, 239, .18);
}
.tile-add .tile-face { padding: 0 10px; }
.tile-add .tile-name {
  font-size: .9rem;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
}

/* Kad borang profil baharu */
.newprofile {
  background: #fff;
  border-radius: 30px;
  padding: 28px 26px;
  box-shadow: 0 10px 30px rgba(43, 93, 168, .10);
  max-width: 620px;
  margin: 0 auto;
}
.newprofile h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 18px;
  color: var(--ink);
}
.newprofile h2 .zh { color: #5B8DEF; }

.input-pill {
  width: 100%;
  min-height: 62px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid #DCE5F5;
  border-radius: 999px;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.input-pill:focus { outline: none; border-color: #5B8DEF; }

/* Pemilih avatar: radio sebenar yang disembunyikan, label sebagai jubin.
   Kekal berfungsi tanpa JavaScript dan boleh dilayari papan kekunci. */
.avatar-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.avatar-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.avatar-opt {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 18px;
  background: #F4F7FD;
  border: 3px solid transparent;
  font-size: 2rem;
  cursor: pointer;
  transition: border-color .12s ease, transform .1s ease;
  touch-action: manipulation;
}
.avatar-opt:active { transform: scale(.94); }
.avatar-row input:checked + .avatar-opt {
  border-color: var(--sun-deep);
  background: #FFF7E4;
}
.avatar-row input:focus-visible + .avatar-opt {
  outline: 3px solid #5B8DEF;
  outline-offset: 2px;
}

.select-pill {
  width: 100%;
  min-height: 62px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: #F4F7FD;
  border: 2px solid #DCE5F5;
  border-radius: 20px;
  box-sizing: border-box;
  margin-bottom: 18px;
}
.select-pill:focus { outline: none; border-color: #5B8DEF; }

.btn-grad {
  width: 100%;
  min-height: 72px;
  border: none;
  border-radius: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  color: #fff;
  background: linear-gradient(180deg, #7FA9F5, #5B8DEF);
  box-shadow: 0 6px 0 #4574CE;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}
.btn-grad:active { transform: translateY(4px); box-shadow: 0 2px 0 #4574CE; }
.btn-grad .zh { font-weight: 600; }

@media (max-width: 420px) {
  .tile, .tile-face { width: 116px; }
  .tile-face { height: 116px; font-size: 3.2rem; border-radius: 26px; }
}

/* Teks untuk pembaca skrin sahaja — label avatar perlu nama yang boleh
   dibaca, tetapi emoji itu sendiri sudah cukup secara visual. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Skrin utama anak — header, jalur XP, grid modul, nav bawah
   ============================================================ */

.kid-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0 18px;
}
.kid-avatar {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  box-shadow: 0 4px 12px rgba(43, 93, 168, .12);
}
.kid-greet {
  flex: 1;
  min-width: 0;
}
.kid-greet h1 {
  margin: 0;
  font-size: clamp(1.3rem, 4.2vw, 1.9rem);
  color: var(--ink);
  line-height: 1.2;
}
.kid-greet h1 .zh { color: #5B8DEF; }
.kid-greet .sub {
  color: var(--ink-soft);
  font-size: .95rem;
}
.kid-streak {
  flex: none;
  text-align: center;
  line-height: 1.1;
}
.kid-streak .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
}
.kid-streak .lbl { font-size: .8rem; color: var(--ink-soft); }

/* Jalur XP */
.xp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 26px;
  padding: 14px 20px;
  box-shadow: 0 6px 18px rgba(43, 93, 168, .08);
  margin-bottom: 24px;
}
.xp-pill {
  flex: none;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 8px 20px;
  border-radius: 999px;
}
.xp-track {
  flex: 1;
  height: 14px;
  background: #E4EAF6;
  border-radius: 999px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: #57C4A3;
  border-radius: 999px;
  transition: width .4s ease;
}
.xp-count {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Grid modul */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

/* Kad berwarna dengan kad putih di dalamnya — itu yang memberi kesan
   palang warna berlapis di bahagian atas. */
.mod-card {
  /* Grid, bukan block: kad dalam grid diregang mengikut jiran tertinggi,
     jadi .mod-inner mesti meregang sama. Kalau tidak, warna kad luar
     terkeluar di bahagian bawah kad yang kandungannya lebih pendek. */
  display: grid;
  text-decoration: none;
  border-radius: 24px;
  padding-top: 7px;
  background: var(--porcelain);
  box-shadow: 0 6px 16px rgba(43, 93, 168, .10);
  transition: transform .1s ease;
  touch-action: manipulation;
}
.mod-card:active { transform: translateY(3px); }
.mod-inner {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 21px;
  padding: 26px 16px 22px;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 168px;
  align-content: center;
}
.mod-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.mod-zh {
  font-family: var(--font-hanzi);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
}
.mod-ms { color: var(--ink-soft); font-size: 1rem; text-align: center; }
.mod-done {
  font-size: .8rem;
  color: var(--leaf);
  font-weight: 800;
}

/* Modul "Akan Datang" — dipudarkan dan tidak boleh ditekan */
.mod-card.soon { opacity: .7; pointer-events: none; }
.mod-card.soon .mod-badge {
  background: var(--sun);
  color: #5C4300;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .75rem;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Nav bawah — melayang, jadi kandungan perlu ruang di bawahnya */
.has-kidnav { padding-bottom: 118px; }

.kidnav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 12px 10px 10px;
  background: linear-gradient(180deg, #7FA9F5, #5B8DEF);
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(91, 141, 239, .35);
  z-index: 20;
}
.kidnav a {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: #EAF1FF;
  font-size: .82rem;
  padding: 2px 0 6px;
  border-radius: 18px;
  touch-action: manipulation;
}
.kidnav .ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, .16);
}
.kidnav a.on { color: #fff; font-weight: 800; }
.kidnav a.on .ico { background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.kidnav a.on::after {
  content: '';
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--sun);
}

/* ============================================================
   Kawasan admin
   Layout sendiri, bukan guna semula .auth-card — kad itu dihadkan
   480px untuk skrin kanak-kanak dan tidak sesuai untuk jadual data.
   ============================================================ */
.admin-body { background: #F4F6FB; }

.admin-wrap { display: flex; min-height: 100dvh; }

.admin-side {
  width: 236px;
  flex: none;
  background: #fff;
  border-right: 1px solid #E4E9F2;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.admin-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--porcelain);
  text-decoration: none;
  line-height: 1.2;
}
.admin-brand span { display: block; font-size: .8rem; color: var(--ink-soft); font-family: var(--font-body); }

.admin-side nav { display: grid; gap: 4px; }
.admin-side nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .98rem;
}
.admin-side nav a:hover { background: #F1F5FC; }
.admin-side nav a.on { background: var(--porcelain); color: #fff; }

.admin-side-foot {
  margin-top: auto;
  display: grid;
  gap: 8px;
  font-size: .9rem;
}
.admin-side-foot a { color: var(--ink-soft); text-decoration: none; }
.admin-side-foot button {
  background: none; border: none; padding: 0;
  color: var(--coral); font-family: var(--font-body);
  font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left;
}

.admin-main { flex: 1; min-width: 0; padding: 26px 30px 60px; }

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.admin-head h1 { margin: 0; font-size: 1.6rem; color: var(--ink); }
.admin-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: .95rem; }
.admin-who {
  background: #E7EEF9; color: var(--porcelain);
  padding: 6px 14px; border-radius: 999px;
  font-size: .85rem; font-weight: 800; white-space: nowrap;
}

.admin-flash {
  background: var(--leaf-mist); color: #1E6B33;
  padding: 12px 16px; border-radius: 12px; font-size: .92rem; margin: 0 0 18px;
}
.admin-flash.bad { background: var(--coral-mist); color: #A8321F; }

/* Kad metrik */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 16px;
  padding: 18px 20px;
}
.stat .lbl { color: var(--ink-soft); font-size: .88rem; }
.stat .val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 4px;
}
.stat .val.warn { color: var(--sun-deep); }
.stat .val.good { color: var(--leaf); }
.stat .note { color: var(--ink-soft); font-size: .78rem; margin-top: 2px; }

/* Panel + jadual */
.panel {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.panel h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--ink); }
.panel .hint { color: var(--ink-soft); font-size: .88rem; margin: 0 0 16px; }

.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.tbl th {
  text-align: left;
  color: var(--ink-soft);
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 0 12px 10px;
  white-space: nowrap;
}
table.tbl td { padding: 13px 12px; border-top: 1px solid #EEF2F8; vertical-align: top; }
table.tbl td .sub { color: var(--ink-soft); font-size: .84rem; }
table.tbl tr:hover td { background: #FAFCFF; }

.tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.tag.ok   { background: var(--leaf-mist);   color: #1E6B33; }
.tag.wait { background: #FFF4DA;            color: #8A6100; }
.tag.off  { background: #EEF2F8;            color: var(--ink-soft); }
.tag.adm  { background: var(--sun);         color: #5C4300; }

/* Carta pendaftaran — div sahaja, tiada pustaka luar */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 90px;
  margin-top: 6px;
}
.spark div {
  flex: 1;
  background: var(--porcelain-mist);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.spark div.has { background: var(--porcelain); }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.pager a {
  color: var(--porcelain); text-decoration: none; font-weight: 800; font-size: .92rem;
}

.empty { color: var(--ink-soft); text-align: center; padding: 34px 10px; }

@media (max-width: 760px) {
  .admin-wrap { flex-direction: column; }
  .admin-side {
    width: auto; flex-direction: row; align-items: center;
    gap: 14px; overflow-x: auto; padding: 12px 14px;
    border-right: none; border-bottom: 1px solid #E4E9F2;
  }
  .admin-side nav { grid-auto-flow: column; gap: 4px; }
  .admin-side-foot { margin-top: 0; grid-auto-flow: column; align-items: center; }
  .admin-main { padding: 18px 16px 50px; }
}

/* ============================================================
   Laman jualan
   ============================================================ */
.mk-body { background: #fff; }

.mk-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 18px 22px;
}
.mk-logo {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: var(--porcelain); text-decoration: none;
}
.mk-logo span { font-family: var(--font-hanzi); color: var(--ink-soft); font-size: 1.1rem; }
.mk-nav nav { display: flex; align-items: center; gap: 18px; }
.mk-nav nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; }
.mk-cta-sm {
  background: var(--porcelain); color: #fff !important;
  padding: 9px 18px; border-radius: 999px;
}

.mk-hero {
  max-width: 1080px; margin: 0 auto; padding: 30px 22px 60px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
}
.mk-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.15;
  color: var(--ink); margin: 0 0 18px;
}
.mk-hero .lede { font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 26px; }
.mk-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-cta-row .btn { text-decoration: none; display: inline-block; }
.mk-note { color: var(--ink-soft); font-size: .9rem; margin-top: 18px; }

/* Mockup telefon dilukis dengan CSS — tiada fail imej, jadi tiada
   permintaan rangkaian tambahan dan tiada anjakan layout. */
.mk-phone {
  justify-self: center;
  width: 288px; padding: 12px; background: #22304A;
  border-radius: 38px; box-shadow: 0 20px 44px rgba(34,48,74,.24);
}
.mk-phone-in { background: #EDF2FE; border-radius: 28px; padding: 18px 14px; }
.mk-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .82rem; }
.mk-mock-ava {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 1.3rem;
}
.mk-mock-head small { color: var(--ink-soft); }
.mk-mock-xp { height: 12px; background: #fff; border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.mk-mock-xp span { display: block; width: 34%; height: 100%; background: #57C4A3; border-radius: 999px; }
.mk-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-mock-grid div {
  background: #fff; border-radius: 14px; border-top: 5px solid var(--porcelain);
  padding: 14px 8px; display: grid; justify-items: center; gap: 4px; font-size: 1.5rem;
}
.mk-mock-grid b { font-family: var(--font-hanzi); font-size: .95rem; color: var(--ink); }

.mk-band { max-width: 1080px; margin: 0 auto; padding: 56px 22px; }
.mk-band.alt { max-width: none; background: #F7F9FD; }
.mk-band.alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.mk-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--ink); margin: 0 0 8px; }
.mk-sub { color: var(--ink-soft); margin: 0 0 28px; }

.mk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 24px; }
.mk-col h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--ink); }
.mk-col p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

.mk-ciri { list-style: none; padding: 0; margin: 24px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mk-ciri li {
  background: #F7F9FD; border-radius: 14px; padding: 14px 18px;
  color: var(--ink); font-weight: 600;
}
.mk-ciri li::before { content: '✓ '; color: var(--leaf); font-weight: 800; }

.mk-harga { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.mk-plan {
  background: #fff; border: 2px solid #E4E9F2; border-radius: 22px;
  padding: 26px 24px; position: relative;
}
.mk-plan.top { border-color: var(--porcelain); box-shadow: 0 10px 26px rgba(43,93,168,.12); }
.mk-badge {
  position: absolute; top: -13px; left: 24px;
  background: var(--sun); color: #5C4300; font-weight: 800;
  font-size: .76rem; padding: 5px 14px; border-radius: 999px;
}
.mk-plan h3 { margin: 0 0 6px; font-size: 1.25rem; }
.mk-price { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem;
  color: var(--porcelain); margin: 0 0 6px; line-height: 1.1; }
.mk-price span { font-size: 1.2rem; vertical-align: super; margin-right: 3px; }
.mk-price small { font-size: 1rem; color: var(--ink-soft); font-family: var(--font-body); }
.mk-plan-note { color: var(--ink-soft); margin: 0 0 20px; font-size: .95rem; }
.mk-plan .btn { display: inline-block; text-decoration: none; width: 100%; text-align: center; }

.mk-faq { display: grid; gap: 10px; margin-top: 22px; }
.mk-faq details { background: #F7F9FD; border-radius: 14px; padding: 16px 20px; }
.mk-faq summary { font-weight: 800; cursor: pointer; color: var(--ink); }
.mk-faq p { margin: 10px 0 0; color: var(--ink-soft); line-height: 1.6; }

.mk-akhir { text-align: center; padding: 66px 22px; background: var(--porcelain-mist); }
.mk-akhir h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.mk-akhir p { color: var(--ink-soft); margin: 0 0 24px; }
.mk-akhir .btn { display: inline-block; text-decoration: none; }

.mk-foot { text-align: center; padding: 40px 22px 56px; color: var(--ink-soft); }
.mk-foot p { margin: 0 0 6px; }
.mk-foot .small { font-size: .88rem; }

@media (max-width: 860px) {
  .mk-hero { grid-template-columns: 1fr; padding-bottom: 40px; }
  .mk-phone { order: -1; width: 244px; }
}

/* ============================================================
   Versi Dewasa 成人版
   ============================================================ */
.dw-back {
  width: 54px; height: 54px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #7FA9F5, #5B8DEF);
  color: #fff; font-size: 2rem; line-height: 1; text-decoration: none;
  box-shadow: 0 5px 0 #4574CE;
}

.dw-grid { display: grid; gap: 16px; }
.dw-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 22px;
  text-decoration: none; color: #fff;
  box-shadow: 0 8px 20px rgba(43, 93, 168, .22);
  transition: transform .1s ease;
  touch-action: manipulation;
}
.dw-card:active { transform: translateY(3px); }
.dw-card.biru  { background: linear-gradient(135deg, #8CB4F7, #4F7FE0); }
.dw-card.hijau { background: linear-gradient(135deg, #7ED0B0, #4FAE8C); }
.dw-ico {
  width: 62px; height: 62px; flex: none;
  border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 1.9rem;
}
.dw-txt { flex: 1; min-width: 0; }
.dw-txt b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; line-height: 1.25;
}
.dw-txt .zh { font-family: var(--font-hanzi); }
.dw-txt small { display: block; opacity: .9; font-size: .95rem; margin-top: 2px; }
.dw-arrow { font-size: 1.8rem; opacity: .85; flex: none; }

/* ---------- Pad nombor ---------- */
.pad-papar {
  background: linear-gradient(180deg, #3A5075, #2A3A57);
  border-radius: 24px;
  padding: 26px 20px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(34, 48, 74, .25);
}
.pad-n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 3.4rem); color: #fff; line-height: 1.1;
}
.pad-zh {
  font-family: var(--font-hanzi); font-size: clamp(1.6rem, 6vw, 2.2rem);
  color: #9FC2F5; margin-top: 6px;
}
.pad-py { color: var(--sun); font-weight: 800; margin-top: 6px; }

.pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pad-grid button {
  min-height: 78px;
  border: none; border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #E8EFFA);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.9rem;
  cursor: pointer; box-shadow: 0 4px 0 #C7D5EC;
  transition: transform .07s ease, box-shadow .07s ease;
  touch-action: manipulation;
}
.pad-grid button:active { transform: translateY(3px); box-shadow: 0 1px 0 #C7D5EC; }
.pad-grid button.merah  { background: linear-gradient(180deg, #FFF0EE, #FBDBD6); color: var(--coral); box-shadow: 0 4px 0 #EBBDB5; }
.pad-grid button.kuning { background: linear-gradient(180deg, #FFF8E8, #FBEBC9); color: #8A6100; box-shadow: 0 4px 0 #E9CE94; }

.pad-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.pad-btn {
  min-height: 62px; border: none; border-radius: 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: #fff; cursor: pointer; touch-action: manipulation;
  transition: transform .07s ease, box-shadow .07s ease;
}
.pad-btn:active { transform: translateY(3px); }
.pad-btn.hijau  { background: #4FB79A; box-shadow: 0 4px 0 #3B9880; }
.pad-btn.hijau:active  { box-shadow: 0 1px 0 #3B9880; }
.pad-btn.kuning { background: #E2A02F; box-shadow: 0 4px 0 #BE8420; }
.pad-btn.kuning:active { box-shadow: 0 1px 0 #BE8420; }

.pad-nota {
  background: #FDF6E3; border: 1px solid #F0E0B8;
  border-radius: 14px; padding: 14px 16px; margin-top: 16px;
  color: #6B5A2E; font-size: .95rem; line-height: 1.55;
}

/* ---------- Frasa harian ---------- */
.fr-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; }
.fr-tabs a {
  flex: none; padding: 8px 16px; border-radius: 999px;
  background: #fff; color: var(--ink-soft);
  text-decoration: none; font-weight: 800; font-size: .9rem;
  box-shadow: 0 2px 6px rgba(43,93,168,.08);
}
.fr-tabs a.on { background: var(--porcelain); color: #fff; }

.fr-sek { margin-bottom: 24px; }
.fr-sek h2 {
  font-size: 1.15rem; color: var(--ink-soft);
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 600;
}
.fr-sek h2 .zh { font-family: var(--font-hanzi); color: #9BB2D4; }

.fr-baris {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: #fff; border: none; border-radius: 18px;
  padding: 14px 18px; margin-bottom: 10px; text-align: left;
  cursor: pointer; box-shadow: 0 3px 10px rgba(43,93,168,.07);
  font-family: var(--font-body);
  transition: transform .08s ease;
  touch-action: manipulation;
}
.fr-baris:active { transform: translateY(2px); }
.fr-kiri { flex: 1; min-width: 0; }
.fr-zh {
  display: block; font-family: var(--font-hanzi);
  font-size: 1.5rem; color: var(--ink); line-height: 1.3;
}
.fr-py { display: block; color: var(--porcelain); font-weight: 800; font-size: .95rem; }
.fr-bm { display: block; color: var(--ink-soft); font-size: .95rem; margin-top: 2px; }
.fr-spk { font-size: 1.5rem; flex: none; opacity: .55; }

/* Seksyen Versi Dewasa pada skrin pilih profil */
.dw-sek {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid #D8E3F6;
}
.dw-sek h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; color: var(--ink); margin: 0 0 14px;
}
.dw-sek h2 .zh { color: #5B8DEF; }

@media (min-width: 700px) {
  .dw-grid { grid-template-columns: 1fr 1fr; }
}

/* Butang tukar mod dewasa dalam header anak */
.mode-btn {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--porcelain);
  text-decoration: none;
  font-size: 1.25rem;
  box-shadow: 0 3px 8px rgba(43, 93, 168, .12);
}
.mode-btn .lbl { font-size: .7rem; font-weight: 800; color: var(--ink-soft); }

/* Titik PIN */
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 20px;
}
.pin-dots span {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--grid-line);
  transition: background .12s ease, border-color .12s ease;
}
.pin-dots span.isi { background: var(--porcelain); border-color: var(--porcelain); }

/* ============================================================
   Permainan tema
   ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.game-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 18px 22px;
  background: #fff;
  border-radius: 22px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(43, 93, 168, .10);
  transition: transform .1s ease;
  touch-action: manipulation;
}
.game-card:active { transform: translateY(3px); }
.game-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.game-card b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; color: var(--ink);
}
.game-card b .zh { font-family: var(--font-hanzi); }
.game-card small { color: var(--ink-soft); font-size: .95rem; text-align: center; }
.game-stars { font-size: .95rem; margin-top: 4px; }
.game-card.mati { opacity: .5; }

/* ---- Kad Imbas ---- */
.kad-besar {
  background: #fff; border-radius: 26px; padding: 30px 20px;
  text-align: center; box-shadow: 0 8px 22px rgba(43, 93, 168, .12);
  margin-bottom: 18px;
}
.kad-em { font-size: clamp(3.4rem, 16vw, 5.4rem); line-height: 1; }
.kad-zh {
  font-family: var(--font-hanzi); font-weight: 500;
  font-size: clamp(2.6rem, 13vw, 4rem); color: var(--ink); margin-top: 10px;
}
.kad-py { color: var(--porcelain); font-weight: 800; font-size: 1.25rem; margin-top: 4px; }
.kad-bm { color: var(--ink-soft); font-size: 1.1rem; margin-top: 2px; }
.kad-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 20px;
}
.kad-nav .btn { text-decoration: none; }
.kad-kira { color: var(--ink-soft); font-weight: 800; }

/* ---- Kuiz ---- */
.soal-zh { font-family: var(--font-hanzi); font-size: 1.6em; }
.soal-py {
  text-align: center; color: var(--porcelain);
  font-weight: 800; margin-bottom: 14px;
}
.opt-bm { display: block; font-family: var(--font-body); font-size: .95rem; color: var(--ink-soft); }

/* ---- Padan ---- */
.padan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.padan-kad {
  aspect-ratio: 1;
  border: none; border-radius: 16px;
  background: linear-gradient(180deg, #8FB8F6, #6E9EF0);
  color: #fff; font-size: 1.8rem;
  display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 4px 0 #4F7FE0;
  transition: transform .1s ease;
  touch-action: manipulation;
}
.padan-kad:active { transform: translateY(3px); }
.padan-kad.padan-buka { background: #fff; box-shadow: 0 4px 0 #D5E0F3; }
.padan-kad.padan-siap { background: var(--leaf-mist); box-shadow: 0 4px 0 #BCE3C8; }
.padan-kad .muka-zh { font-family: var(--font-hanzi); color: var(--ink); font-size: 1.5rem; }
.padan-kad .muka-em { font-size: 2rem; }

/* ---- Susun ---- */
.susun-sasaran {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin: 18px 0 22px;
}
.susun-kotak {
  background: #fff; border: 3px solid transparent; border-radius: 20px;
  padding: 16px 10px; display: grid; justify-items: center; gap: 8px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(43,93,168,.08);
  touch-action: manipulation;
}
.susun-em { font-size: 2.8rem; line-height: 1; }
.susun-slot {
  min-height: 34px; min-width: 76px;
  border-radius: 12px; background: var(--porcelain-mist);
  display: grid; place-items: center;
  font-family: var(--font-hanzi); font-size: 1.2rem; color: var(--ink);
}
.susun-kotak.betul { border-color: var(--leaf); }
.susun-kotak.betul .susun-slot { background: var(--leaf-mist); }
.susun-kotak.salah { border-color: var(--coral); animation: shake .35s ease; }

.susun-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.susun-chip {
  border: 3px solid var(--porcelain-mist); border-radius: 999px;
  background: #fff; padding: 12px 22px;
  font-family: var(--font-hanzi); font-size: 1.35rem; color: var(--ink);
  cursor: pointer; touch-action: manipulation;
}
.susun-chip.pilih { border-color: var(--sun-deep); background: #FFF7E4; }
.susun-chip.guna { opacity: .35; pointer-events: none; }

/* ---- Menulis ---- */
.tulis-hint { text-align: center; color: var(--ink-soft); margin-top: 14px; }

/* ---- Skrin tamat ---- */
.finish-stars { font-size: 3rem; line-height: 1; }

@media (max-width: 420px) {
  .padan-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Prompt dalam permainan tema.
   Gaya sedia ada .stage .prompt terikat pada .stage, yang hanya digunakan
   pemain lesson — enjin permainan melekat pada #game, jadi ia perlu
   peraturannya sendiri. */
#game .prompt {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  color: var(--ink);
  margin-bottom: 6px;
}
#game .btn-audio { margin: 10px auto 4px; }
#game .option-grid { margin-top: 16px; }

/* .progress-track ada flex:1 kerana ia direka duduk dalam .player-topbar.
   Di skrin permainan ia anak langsung .shell (yang display:flex column),
   jadi flex:1 menjadikannya mengembang mengisi ruang kosong. */
.game-bar { flex: none; margin-bottom: 18px; }

/* Kotak surih pada skrin permainan mesti muat DI ATAS nav bawah yang
   melayang. Nav itu position:fixed, jadi ia tidak menolak kandungan —
   strok yang berakhir di bahagian bawah aksara akan dipintas olehnya dan
   anak tidak dapat menyiapkan tulisan.
   
   Saiz asal .tzg-trace (sehingga 64vh) direka untuk pemain lesson, yang
   tiada nav. */
#game .tzg-trace { width: min(430px, 82vw, 44vh); }

/* Kawasan surih mesti mengambil alih gerak isyarat sentuh sepenuhnya.
   
   Dengan touch-action: auto (lalai), pelayar menganggap seretan jari pada
   kanvas sebagai cubaan menatal. Sebaik ia memutuskan begitu, ia MEMBATALKAN
   aliran sentuhan — Hanzi Writer tidak pernah menerima strok penuh, dan
   aksara tidak boleh disiapkan pada telefon.
   
   Pepijat ini tidak kelihatan dengan pointer event sintetik, kerana event
   yang dihantar terus memintas timbang tara gerak isyarat pelayar. */
.tzg-trace,
.tzg-trace svg,
.tzg-trace svg * {
  touch-action: none;
}

/* Butang bawah kanvas surih */
.tulis-act {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tulis-act .btn { padding: 10px 18px; font-size: 1rem; }