:root {
  --bg-1: #eaf6ff;
  --bg-2: #fef6e4;
  --ink: #3a3a5a;
  --muted: #7c7c9c;
  --card: #ffffff;
  --border: #e3ddf5;
  --purple: #8b7bd8;
  --purple-dark: #6a58c9;
  --green: #7fd6a3;
  --green-dark: #4fb87d;
  --pink: #f7a8c4;
  --yellow: #ffd873;
  --blue: #8ec9f0;
  --red: #f28b8b;
  --shadow: 0 10px 28px rgba(107, 92, 197, 0.16);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 10px;
}

.screen { display: none; width: 100%; max-width: 720px; flex: 1; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

.app-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--purple-dark);
  text-align: center;
  margin: 6px 0 22px;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.7);
}

/* --- Spinwheel --- */
.wheel-card {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 30px; width: 100%; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 30px;
}

.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.wheel-wrap {
  position: relative; width: min(280px, 68vw); height: min(280px, 68vw);
  filter: drop-shadow(0 14px 20px rgba(107, 92, 197, 0.18));
}

.wheel-pointer {
  position: absolute; top: -14px; left: 50%; width: 36px; height: 46px;
  background: var(--red); clip-path: polygon(50% 100%, 6% 0, 94% 0);
  border-radius: 6px 6px 0 0;
  transform: translateX(-50%); z-index: 5;
}

.wheel-disc {
  width: 100%; height: 100%; border-radius: 50%;
  border: 12px solid #fff; outline: 4px solid var(--purple);
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
  transition: transform 6.5s cubic-bezier(0.1, 0.85, 0.15, 1);
}

.wheel-slice {
  position: absolute; width: 50%; height: 50%; top: 0; right: 0;
  transform-origin: 0% 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 20%;
}
.wheel-slice span { transform: rotate(45deg); font-size: 40px; }

.slice-0 { background: #ffe1ea; transform: rotate(270deg); }
.slice-1 { background: #dff3ff; transform: rotate(0deg); }
.slice-2 { background: #e6f8ea; transform: rotate(90deg); }
.slice-3 { background: #fff3d6; transform: rotate(180deg); }

.wheel-center-pin {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
  background: var(--yellow); border: 5px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.spin-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff; font-weight: 800; font-size: 22px;
  padding: 16px 44px; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(107, 92, 197, 0.35);
  transition: transform 0.15s;
}
.spin-btn:disabled { background: #cfd3e4; box-shadow: none; cursor: not-allowed; }
.spin-btn:not(:disabled):active { transform: scale(0.96); }

.wheel-legend { display: flex; flex-direction: column; gap: 10px; min-width: 240px; flex: 1; max-width: 320px; }
.legend-item {
  display: flex; align-items: center; gap: 12px; background: #f8f8fd;
  border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px;
  font-weight: 700; font-size: 14px; color: var(--ink); transition: all 0.25s;
}
.legend-item.active {
  background: #f1eeff; border-color: var(--purple); transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(107, 92, 197, 0.18);
}
.legend-badge {
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  flex-shrink: 0;
}
.legend-badge-0 { background: #e0699c; }
.legend-badge-1 { background: #3f9ec2; }
.legend-badge-2 { background: #5fa864; }
.legend-badge-3 { background: #cf9a2c; }

/* --- Generic cards / buttons used across modules --- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 26px; width: 100%;
}

.kid-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 20px; border-radius: var(--radius-md);
  padding: 16px 20px; transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.kid-btn:active { transform: scale(0.95); }
.kid-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.kid-btn.primary { background: var(--purple); color: #fff; }
.kid-btn.success { background: var(--green); color: #185a35; }
.kid-btn.neutral { background: #eef0fb; color: var(--ink); }
.kid-btn.warn { background: var(--yellow); color: #6b4d05; }

/* --- Module controls (Selesai / Kembali) --- */
.module-controls {
  position: fixed; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; z-index: 40;
  pointer-events: none;
}
.module-controls .kid-btn { pointer-events: auto; font-size: 14px; padding: 10px 16px; }

/* --- Module 1: Penjumlahan Benda --- */
.m1-progress {
  font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 10px;
}
.m1-question-box {
  width: 100%; background: #f7f5ff; border: 3px dashed var(--border);
  border-radius: var(--radius-md); padding: 26px 14px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; min-height: 130px; font-size: 40px;
}
.m1-obj-group { display: flex; flex-wrap: wrap; gap: 4px; max-width: 210px; justify-content: center; }
.m1-op { font-size: 34px; font-weight: 800; color: var(--muted); }

.m1-options { display: flex; gap: 14px; justify-content: center; margin-bottom: 16px; }
.m1-options .kid-btn { min-width: 76px; font-size: 26px; background: #eef0fb; color: var(--purple-dark); }
.m1-options .kid-btn.correct { background: var(--green); color: #185a35; }
.m1-options .kid-btn.wrong { background: var(--red); color: #6b1111; }

.m1-feedback { min-height: 34px; font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 10px; }
.m1-feedback.good { color: var(--green-dark); }
.m1-feedback.bad { color: #c65454; }

/* --- Module 2: Coco Train --- */
.m2-track-wrap { position: relative; width: 300px; height: 225px; margin: 0 auto 18px; }
.m2-track-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m2-station { position: absolute; font-size: 30px; z-index: 2; }
.m2-train-group {
  position: absolute; display: flex; align-items: center; gap: 4px; z-index: 3;
}
.m2-loco-wrap { position: relative; }
.m2-loco-svg { width: 54px; height: 36px; display: block; }
.m2-headlight { transition: fill 0.2s; }
.m2-loco-wrap.lit .m2-headlight { fill: #fde047; filter: drop-shadow(0 0 4px #fde047); }
.m2-smoke { position: absolute; top: -8px; left: 26px; font-size: 13px; opacity: 0; }
.m2-loco-wrap.lit .m2-smoke { animation: m2-puff 0.7s ease-in-out infinite; }
@keyframes m2-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  50% { opacity: 0.85; transform: translate(-6px, -12px) scale(1.1); }
  100% { opacity: 0; transform: translate(-12px, -20px) scale(0.6); }
}
.m2-wagons-group {
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity 0.45s ease;
}
.m2-wagons-group.visible { opacity: 1; }
.m2-wagon {
  min-width: 30px; height: 26px; background: #6d5bd0; color: #fff;
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; padding: 0 6px;
}
.m2-wagon-op { background: transparent; color: var(--muted); min-width: 14px; }
.m2-lap-loco { position: absolute; z-index: 5; }

/* --- Module 3: Tarik Tambang --- */
.m3-stage {
  width: 100%; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 4px; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 4px solid #f0c987;
}
.m3-team { display: flex; gap: 4px; transition: transform 0.15s; }
.m3-team-left.m3-pulling { transform: scale(1.08) translateX(-4px); }
.m3-avatar { width: 30px; }
.m3-avatar-head {
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto;
  border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.m3-team-left .m3-avatar-head { background: #2dd4bf; }
.m3-team-right .m3-avatar-head { background: #f87171; }
.m3-avatar-base {
  width: 22px; height: 18px; margin: 2px auto 0; background: #1e293b;
  border-radius: 0 0 10px 10px;
}
.m3-rope-track { position: relative; flex: 1; height: 12px; margin: 0 6px 8px; }
.m3-rope-bar { position: absolute; inset: 0; background: #b08b57; border-radius: 6px; }
.m3-rope-marker {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 34px;
  background: #e11d48; border-radius: 3px;
  transform: translate(-50%, -50%); transition: left 0.6s ease-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.m3-center-line {
  position: absolute; left: 50%; bottom: -22px; width: 4px; height: 18px;
  background: #e11d48; border-radius: 2px; transform: translateX(-50%);
}
.m3-question-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 26px; width: 100%; text-align: center;
}
.m3-question-text { font-size: 32px; font-weight: 800; color: var(--purple-dark); margin-bottom: 18px; }
.m3-answer-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.m3-answer-btn {
  border: none; cursor: pointer; font-family: inherit; min-width: 84px;
  background: #f5a623; color: #fff; font-weight: 800; font-size: 30px;
  border-radius: 16px; padding: 20px 18px; transition: transform 0.12s;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.m3-answer-btn:active { transform: scale(0.95); }
.m3-answer-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.m3-answer-btn.correct { background: var(--green); color: #185a35; }
.m3-answer-btn.wrong { background: var(--red); color: #6b1111; }

/* --- Module 4: Fonetik A-Z --- */
.m4-progress { font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 10px; text-align: center; }
.m4-card {
  background: #f7f5ff; border: 3px dashed var(--border); border-radius: var(--radius-md);
  padding: 28px 16px; text-align: center; cursor: pointer; margin-bottom: 16px;
  transition: transform 0.12s;
}
.m4-card:active { transform: scale(0.98); }
.m4-letter { font-size: 64px; font-weight: 800; color: var(--purple-dark); letter-spacing: 4px; }
.m4-emoji { font-size: 60px; margin: 6px 0; }
.m4-word { font-size: 26px; font-weight: 800; color: var(--ink); }
.m4-hint { font-size: 13px; color: var(--muted); margin-top: 8px; }
.m4-nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.m4-nav .kid-btn { font-size: 16px; padding: 12px 16px; }

/* --- Results screen --- */
.result-emoji { font-size: 64px; margin-bottom: 8px; }
.result-score { font-size: 26px; font-weight: 800; color: var(--purple-dark); margin-bottom: 18px; }
.result-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* --- Parent PIN + multiplication gate --- */
.gate-card { text-align: center; margin-top: 60px; max-width: 380px; }
.gate-lock-emoji { font-size: 50px; }
.gate-title { color: var(--purple-dark); margin: 4px 0 10px; }
.gate-desc { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.gate-question {
  font-size: 34px; font-weight: 800; color: var(--ink); margin-bottom: 16px;
}
.gate-input {
  width: 100%; padding: 12px; border-radius: 12px; border: 2px solid var(--border);
  font-size: 18px; text-align: center; margin-bottom: 10px; font-family: inherit;
}
.gate-msg { min-height: 20px; font-size: 13px; color: #c65454; margin-bottom: 10px; }

/* --- Lock overlay (time's up) --- */
#lock-overlay {
  position: fixed; inset: 0; background: rgba(40, 34, 70, 0.92);
  display: none; align-items: center; justify-content: center; z-index: 9999;
  padding: 20px;
}
#lock-overlay.active { display: flex; }
.lock-card {
  background: #fff; border-radius: var(--radius-lg); padding: 30px;
  max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.lock-card h2 { color: #c2447c; margin: 0 0 8px; }
.lock-card p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.lock-card input {
  width: 100%; padding: 12px; border-radius: 12px; border: 2px solid var(--border);
  font-size: 18px; text-align: center; margin-bottom: 12px; font-family: inherit;
}
.lock-msg { min-height: 20px; font-size: 13px; color: #c65454; margin-bottom: 8px; }

/* --- Global timer chip --- */
#timer-chip {
  position: fixed; top: 14px; right: 14px; z-index: 40;
  background: var(--purple-dark); color: #fff; font-weight: 800; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px;
}
#timer-chip.warn { background: var(--red); }

/* --- ADHD mode toggle --- */
#adhd-toggle-btn {
  position: fixed; top: 14px; left: 14px; z-index: 40;
  border: none; cursor: pointer; font-family: inherit;
  background: #eef0fb; color: var(--purple-dark); font-weight: 800; font-size: 13px;
  padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow);
}
#adhd-toggle-btn.on { background: var(--green); color: #185a35; }

/* --- Per-question countdown bar (Modul 1/2/3) --- */
.qtimer-bar-wrap {
  width: 100%; height: 8px; background: #eef0fb; border-radius: 999px;
  overflow: hidden; margin-bottom: 12px;
}
.qtimer-bar { height: 100%; width: 100%; background: var(--blue); border-radius: 999px; }

footer.app-footer {
  text-align: center; font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 18px 0 6px; letter-spacing: 0.3px;
}

@media (max-width: 420px) {
  .app-title { font-size: 24px; }
  .m1-question-box { font-size: 30px; }
}
/* Child photo ID login */
.profile-card{max-width:520px;text-align:center}.profile-card .kid-btn{width:100%;margin-top:10px}.profile-photo{width:190px;height:190px;margin:18px auto;border:7px solid #f4c542;border-radius:50%;background-color:#e8e4ff;background-position:center;background-size:cover;box-shadow:0 14px 30px rgba(40,35,90,.2)}
.brand-signature{width:max-content;margin:-12px auto 18px;padding:6px 14px;border-radius:999px;background:#f2efff;color:#6251c7;font-size:14px;letter-spacing:.02em}.brand-signature strong{color:#3f327e}
.profile-placeholder{display:grid;place-items:center;font-size:64px}.profile-tap{display:block;cursor:pointer;transition:transform .2s}.profile-tap:hover{transform:scale(1.04)}.profile-file-label{display:block;cursor:pointer}.profile-hint{font-weight:800;color:#7466d8}.profile-change{border:0;background:transparent;color:#777;cursor:pointer;text-decoration:underline}
#profile-door-transition{position:fixed;inset:0;z-index:99999;display:none;place-items:center;background:linear-gradient(#29244f,#53469a);color:#fff;font-size:28px;text-align:center;perspective:900px}#profile-door-transition.active{display:grid}.profile-door-frame{width:230px;height:340px;padding:12px;background:#6b3518;border:8px solid #3b1b0c}.profile-door{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(90deg,#a94f16,#ed9c32);font-size:70px;transform-origin:left;animation:profileOpenDoor 1.05s ease forwards}@keyframes profileOpenDoor{0%{transform:rotateY(0)}100%{transform:rotateY(-105deg)}}
/* Tutorial and parent-only report */
.menu-extra-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px auto}.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:20px}.tutorial-card{text-align:center}.tutorial-card .kid-btn{margin:6px}#tutorial-name-canvas{display:block;width:100%;height:260px;margin:14px 0;border:4px dashed #9b8be7;border-radius:20px;background:#fff;touch-action:none}.tutorial-question{margin:24px;font-size:52px;font-weight:800;color:#3a3568}
.database-btn{background:linear-gradient(135deg,#176b87,#2ba9a1)!important;color:#fff!important}.database-btn:hover{filter:brightness(1.08)}#database-overlay,#database-image-overlay{position:fixed;inset:0;z-index:99999;display:none;place-items:center;padding:16px;background:rgba(35,29,75,.82)}#database-overlay.active,#database-image-overlay.active{display:grid}.database-modal{position:relative;width:min(100%,680px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px}.database-modal>h2,.database-modal>p{text-align:center}.database-close,.database-image-close{position:absolute;top:12px;right:14px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#eeeafc;color:#3a3568;font-size:29px;line-height:1;cursor:pointer}.database-status{margin:12px 0;padding:11px;border-radius:13px;background:#eefaf5;text-align:center;font-weight:700;color:#26705d}.database-error{background:#fff0f0;color:#a33c3c}.database-loading{background:#eef7ff;color:#286888}.database-records{display:grid;gap:16px}.database-record{padding:18px;border:2px solid #e2dcf8;border-radius:20px;background:#fff}.database-record h3{margin:0;text-align:center}.database-record>p{margin:5px 0}.database-time{text-align:center;color:#6e6886;font-weight:800}.database-section{margin-top:12px;padding:13px;border-radius:15px;background:#f6f4fd}.database-section h4,.database-section p{margin:0 0 7px}.database-section-exam{border:2px solid #f1b735;background:#fff6d9}.database-section-exam h4{color:#b04c27}.database-copy{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}.database-photo-btn{width:100%;margin-top:8px;padding:10px 12px;font-size:14px}#database-image-overlay{z-index:100000}#database-image-overlay img{display:block;max-width:min(94vw,1100px);max-height:88vh;object-fit:contain;border-radius:15px;background:#fff}.database-image-close{position:fixed;background:#fff}@media(max-width:520px){.database-modal{padding:20px 14px}.database-record{padding:14px}}
.tutorial-choice-card{width:min(100%,760px);margin:20px auto 0;text-align:center}.tutorial-flow-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px auto}.tutorial-flow-actions .kid-btn{min-width:230px}.database-input-open{display:block;width:100%;margin:10px 0 16px;background:#fff0c9;color:#754f00}.database-input-form{margin:14px 0 20px;padding:18px;border:2px solid #cfc6f2;border-radius:18px;background:#faf9ff}.database-input-form h3{text-align:center;margin-top:0}.database-input-form label{display:grid;gap:5px;margin:10px 0;font-weight:800}.database-input-form input,.database-input-form textarea{width:100%;padding:11px 12px;border:2px solid #d9d2f5;border-radius:12px;background:#fff;color:#302b50;font:inherit}.database-input-form textarea{resize:vertical}.database-form-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:14px}.database-form-actions .kid-btn{padding:10px;font-size:14px}@media(max-width:520px){.tutorial-flow-actions .kid-btn{width:100%;min-width:0}.database-form-actions{grid-template-columns:1fr}}
.database-input-form .database-reminder-toggle{display:flex;align-items:center;gap:9px;padding:11px;border-radius:12px;background:#eefaf5}.database-reminder-toggle input{width:22px;height:22px;margin:0;accent-color:#2ba97f}
.database-local-note{padding:11px 13px;border-radius:12px;background:#eaf8f3;color:#276e5a;font-weight:800;line-height:1.4}.database-remove-btn{width:100%;margin-top:12px;padding:9px;font-size:13px}
.database-manual-btn{display:block;width:100%;margin:10px 0;text-align:center;text-decoration:none;font-size:14px}
.database-backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}.database-backup-actions .kid-btn{padding:10px;font-size:13px}@media(max-width:520px){.database-backup-actions{grid-template-columns:1fr}}
.color-learning-card{background:linear-gradient(145deg,#f9f7ff,#fff)}.color-learning-heading{display:flex;align-items:center;justify-content:center;gap:14px}.color-learning-heading>span{font-size:36px}.color-learning-heading h2,.color-learning-heading p{margin:0}.color-learning-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}.color-learning-tile{min-height:76px;padding:10px 6px;border:3px solid rgba(48,43,80,.18);border-radius:18px;box-shadow:0 5px 12px rgba(53,43,105,.14);font:800 18px "Baloo 2",sans-serif;cursor:pointer;transition:transform .16s,box-shadow .16s}.color-learning-tile:hover,.color-learning-tile:focus-visible,.color-learning-tile.speaking{transform:translateY(-4px) scale(1.04);box-shadow:0 9px 18px rgba(53,43,105,.28);outline:4px solid #f4c542;outline-offset:2px}.color-learning-status{min-height:30px;margin:14px 0 0;color:#5546a5;font-size:21px;font-weight:800;text-align:center}@media(max-width:700px){.color-learning-grid{grid-template-columns:repeat(2,1fr)}}
.learning-choice-intro{text-align:center;margin:-8px 0 20px;color:#6e6886;font-weight:700}.learning-choice-grid{width:min(100%,900px);display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.learning-choice{display:grid;place-items:center;gap:7px;min-height:190px;border:3px solid transparent;font-family:inherit;text-align:center;cursor:pointer;transition:transform .18s,box-shadow .18s}.learning-choice:hover,.learning-choice:focus-visible{transform:translateY(-5px);box-shadow:0 15px 28px rgba(53,43,105,.22);outline:4px solid #f4c542}.learning-choice>span{font-size:52px}.learning-choice strong{font-size:23px;color:#3a3568}.learning-choice small{font-size:15px;color:#6e6886}.learning-choice-alpha{background:#f1edff;border-color:#b9acef}.learning-choice-color{background:#fff4d9;border-color:#f2c44e}.learning-choice-number{background:#e8f7ff;border-color:#80cceb}.learning-choice-play{background:#e7f8ec;border-color:#76c88f}#color-tutorial-screen{max-width:900px}.color-learning-card{width:100%}@media(max-width:620px){.learning-choice-grid{grid-template-columns:1fr}.learning-choice{min-height:150px}.learning-choice>span{font-size:42px}}
#license-expired-overlay{position:fixed;inset:0;z-index:200000;display:none;place-items:center;padding:20px;background:linear-gradient(145deg,rgba(35,29,75,.96),rgba(75,55,125,.96))}#license-expired-overlay.active{display:grid}.license-expired-card{width:min(100%,520px);padding:30px;text-align:center}.license-expired-icon{font-size:64px}.license-expired-card h2{margin:8px 0;color:#a43838}.license-expired-card p{line-height:1.55}.license-brand{margin-top:20px!important;color:#6251c7;font-weight:800;letter-spacing:.04em}
#parent-report-overlay{position:fixed;inset:0;z-index:99998;display:none;place-items:center;padding:20px;background:rgba(35,29,75,.82)}#parent-report-overlay.active{display:grid}.parent-report-card{width:min(100%,560px);display:grid;gap:12px;text-align:center}.parent-report-card input{width:100%;padding:14px;border:2px solid #d9d2f5;border-radius:14px;font:inherit}.report-score{font-size:38px;font-weight:800;color:#6756cc}.report-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Keep every parent-report action reachable on short laptop/mobile screens. */
#parent-report-overlay{padding:12px;overflow:hidden}.parent-report-card{width:min(100%,520px);max-width:520px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:22px;gap:8px}.parent-report-card h2{font-size:clamp(22px,4vw,30px);margin-bottom:2px}.parent-report-card p{margin:0 0 6px;font-size:13px;line-height:1.35}.parent-report-card input{min-height:48px;padding:10px 12px;margin-bottom:2px;font-size:16px}.parent-report-card .kid-btn{min-height:46px;padding:9px 12px;font-size:15px;line-height:1.15}.parent-report-card .profile-change{padding:7px;font-size:14px}.report-score{font-size:clamp(28px,6vw,38px);line-height:1.15}.report-actions{gap:8px}@media(max-width:480px),(max-height:720px){.parent-report-card{padding:16px;gap:6px}.parent-report-card .kid-btn{font-size:14px}.report-actions{grid-template-columns:1fr 1fr}}
/* Poster penjumlahan 1-5 */
.addition-poster-card{grid-column:1/-1;background:linear-gradient(145deg,#fff4f8,#fffbe9)}.addition-poster-heading{display:flex;align-items:center;justify-content:center;gap:18px}.addition-poster-heading>span{font-size:34px}.addition-poster-heading h2{margin-bottom:2px;color:#ef4f83}.addition-poster-heading p{margin-top:0}.addition-poster{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:14px;margin-top:22px}.addition-column{position:relative;padding:42px 10px 12px;border-radius:24px;background:#fff;box-shadow:0 10px 22px rgba(61,50,115,.12)}.addition-number{position:absolute;top:-8px;left:50%;display:grid;place-items:center;width:58px;height:58px;transform:translateX(-50%);border:5px solid #fff;border-radius:50%;color:#fff;font-size:30px;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.16)}.addition-list{display:grid;gap:7px}.addition-row{display:flex;justify-content:space-between;padding:10px 9px;border:0;border-radius:12px;background:#f8f7ff;color:#302b5a;font:800 18px 'Baloo 2',sans-serif;cursor:pointer;transition:.2s}.addition-row:hover,.addition-row.speaking{transform:scale(1.05);background:#fff0a8;box-shadow:0 5px 12px rgba(0,0,0,.12)}.addition-pink .addition-number{background:#e85f91}.addition-blue .addition-number{background:#36a2c8}.addition-green .addition-number{background:#54ad67}.addition-orange .addition-number{background:#e1a21e}.addition-purple .addition-number{background:#866bd8}.addition-limit-note{margin:20px 0 0;font-size:20px;font-weight:800;color:#6756cc}@media(max-width:850px){.addition-poster{grid-template-columns:repeat(2,1fr)}.addition-column:last-child{grid-column:1/-1}}@media(max-width:480px){.addition-poster{grid-template-columns:1fr}}
/* Name tracing celebration */
#tutorial-name-canvas.trace-success{animation:traceCelebrate .7s ease both;box-shadow:0 0 0 6px #fff,0 0 28px rgba(103,86,204,.42);border-color:#f3bf3b}@keyframes traceCelebrate{0%{transform:scale(.96)}45%{transform:scale(1.025) rotate(-1deg)}75%{transform:scale(1.015) rotate(1deg)}100%{transform:scale(1)}}
/* Split writing/addition tutorial pages */
.writing-page,.addition-page{width:min(100%,1180px);margin:0 auto;display:grid;gap:20px}#writing-tutorial-screen,#addition-tutorial-screen{max-width:1180px}.writing-page{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.writing-practice-card{width:100%;margin:0}.alphabet-poster-card{text-align:center;background:linear-gradient(145deg,#fff7d9,#fff)}.alphabet-poster{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}.alphabet-tile{min-width:0;padding:8px 3px;border:0;border-radius:13px;background:#fff;box-shadow:0 4px 10px rgba(53,43,105,.12);color:#5546a5;cursor:pointer;font-family:inherit;transition:.18s}.alphabet-tile:nth-child(5n+1){background:#ffe3ed}.alphabet-tile:nth-child(5n+2){background:#dff4ff}.alphabet-tile:nth-child(5n+3){background:#e5f8e7}.alphabet-tile:nth-child(5n+4){background:#fff0c9}.alphabet-tile:nth-child(5n){background:#eee8ff}.alphabet-tile:hover,.alphabet-tile:focus-visible{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 16px rgba(53,43,105,.2)}.alphabet-tile strong{display:block;font-size:25px}.alphabet-tile span{font-size:17px}.custom-word-box{margin:14px 0;padding:14px;border-radius:18px;background:#f5f2ff;text-align:left}.custom-word-box label{display:block;margin-bottom:7px;font-weight:800}.custom-word-box>div{display:grid;grid-template-columns:1fr auto;gap:8px}.custom-word-box input{min-width:0;padding:11px 14px;border:2px solid #cfc6f2;border-radius:13px;font-size:18px;font-weight:700;font-family:inherit;text-transform:uppercase}.custom-word-box .kid-btn{margin:0;padding:10px 16px;font-size:15px}.custom-word-box small{display:block;margin-top:6px;color:#746f8f}.number-sequence-box{margin:0 0 20px;padding:16px;border-radius:20px;background:#eefaff}.number-sequence-box h3,.number-sequence-box p{text-align:center;margin:0 0 7px}.number-sequence{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.number-sequence-tile{min-width:0;min-height:56px;border:3px solid #79caed;border-radius:15px;background:#fff;color:#226182;font:800 24px "Baloo 2",sans-serif;cursor:pointer;transition:.16s}.number-sequence-tile:hover,.number-sequence-tile:focus-visible,.number-sequence-tile.speaking{transform:translateY(-3px);border-color:#35aa6f;background:#dff8e8;color:#17633d}.number-sequence-status{min-height:24px!important;margin:8px 0 0!important;color:#5546a5;font-weight:800}@media(max-width:900px){.writing-page{grid-template-columns:1fr}.alphabet-poster{grid-template-columns:repeat(7,1fr)}.number-sequence{grid-template-columns:repeat(5,1fr)}}@media(max-width:520px){.alphabet-poster{grid-template-columns:repeat(5,1fr)}.custom-word-box>div{grid-template-columns:1fr}.menu-extra-actions .kid-btn{font-size:14px;padding:10px 12px}.number-sequence{grid-template-columns:repeat(2,1fr)}}