/* =========================================================
   JEJAK HURUF — style.css
   Mobile-first (360–430px), responsif sampai desktop.
   ========================================================= */

:root{
  --bg:#FFF7E8;
  --bg2:#FFEFD3;
  --ink:#33291F;
  --ink-soft:#6B5B4A;
  --card:#FFFFFF;

  --yellow:#FFB703;
  --orange:#FB8500;
  --blue:#219EBC;
  --deep:#126782;
  --green:#57A773;
  --pink:#EF6F6C;
  --purple:#9B6BC9;

  --radius:26px;
  --radius-sm:18px;
  --shadow:0 6px 0 rgba(0,0,0,.10), 0 12px 24px rgba(0,0,0,.08);
  --shadow-sm:0 4px 0 rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.06);
  --tap:64px;
  --font: "Baloo 2", "Comic Sans MS", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -10%, #FFE7B8 0%, rgba(255,231,184,0) 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  font-size:17px;
  line-height:1.35;
}

button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:4px solid var(--deep); outline-offset:3px; border-radius:12px;
}

.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;z-index:99}
.skip-link:focus{left:8px;top:8px}

/* ---------------- TOPBAR ---------------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 8px;
  background:rgba(255,247,232,.92);
  backdrop-filter:blur(8px);
  border-bottom:3px solid rgba(0,0,0,.06);
}
.topbar-title{
  flex:1; margin:0; text-align:center;
  font-size:1.25rem; font-weight:800; letter-spacing:.5px;
}
.icon-btn{
  width:52px;height:52px;flex:0 0 52px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
  display:grid;place-items:center; color:var(--deep);
  transition:transform .12s ease;
}
.icon-btn svg{width:28px;height:28px}
.icon-btn:active{transform:scale(.92)}
.icon-btn[hidden]{display:none}

/* ---------------- SCREENS ---------------- */
main{ padding-bottom:150px; }
.screen{ display:none; padding:14px 14px 10px; animation:fadeUp .28s ease both }
.screen.is-active{ display:block }
.screen.no-pad{ padding:8px 10px }
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.instruction{
  margin:2px 0 14px; text-align:center;
  font-size:1.1rem; font-weight:700; color:var(--ink-soft);
}

/* ---------------- HERO ---------------- */
.hero{ text-align:center; padding:10px 0 18px }
.hero-logo{ display:flex; justify-content:center; gap:4px; flex-wrap:wrap }
.hl{
  display:inline-grid; place-items:center;
  width:52px;height:60px; border-radius:16px;
  font-size:2.1rem; font-weight:900; color:#fff;
  box-shadow:var(--shadow-sm);
  animation:bob 2.4s ease-in-out infinite;
}
.hl.a{background:var(--pink)}   .hl.b{background:var(--yellow);animation-delay:.1s}
.hl.c{background:var(--blue);animation-delay:.2s} .hl.d{background:var(--green);animation-delay:.3s}
.hl.e{background:var(--purple);animation-delay:.4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.hero-sub{ margin:12px 0 0; font-size:1.05rem; font-weight:700; color:var(--orange) }

/* ---------------- MENU ---------------- */
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.menu-card{
  background:var(--card); border-radius:var(--radius); padding:16px 10px 14px;
  box-shadow:var(--shadow); display:grid; gap:8px; justify-items:center;
  min-height:132px; transition:transform .12s ease;
  border:3px solid transparent;
}
.menu-card.wide{ grid-column:1 / -1; grid-template-columns:auto auto; align-items:center; min-height:96px }
.menu-card:active{ transform:translateY(3px) scale(.98) }
.menu-ico{ width:56px;height:56px; display:grid;place-items:center; border-radius:20px }
.menu-ico svg{width:38px;height:38px}
.menu-label{ font-size:1.05rem; font-weight:800; text-align:center }
.menu-sub{ margin-top:-5px; font-size:.76rem; font-weight:800; color:var(--ink-soft); text-align:center }
.menu-card.c1{border-color:#FFE0A3} .menu-card.c1 .menu-ico{background:#FFF1D0;color:var(--orange)}
.menu-card.c2{border-color:#BFE6EF} .menu-card.c2 .menu-ico{background:#E1F4F9;color:var(--deep)}
.menu-card.c3{border-color:#F7C9C8} .menu-card.c3 .menu-ico{background:#FDE6E5;color:var(--pink)}
.menu-card.c4{border-color:#C6E7CF} .menu-card.c4 .menu-ico{background:#E3F5E9;color:var(--green)}
.menu-card.c5{border-color:#DDCCF0} .menu-card.c5 .menu-ico{background:#F0E7FA;color:var(--purple)}

.ghost-btn{
  display:block; margin:20px auto 4px; padding:10px 20px;
  border-radius:999px; background:rgba(0,0,0,.05);
  font-size:.92rem; font-weight:700; color:var(--ink-soft);
}
.ghost-btn:active{ background:rgba(0,0,0,.1) }

/* ---------------- ALPHABET GRID ---------------- */
.alphabet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.letter-btn{
  aspect-ratio:1/1; border-radius:22px; background:var(--card);
  box-shadow:var(--shadow-sm); font-size:2.1rem; font-weight:900;
  display:grid; place-items:center; position:relative;
  transition:transform .12s ease, background .2s ease;
  min-height:var(--tap);
}
.letter-btn:active{ transform:translateY(3px) scale(.95) }
.letter-btn.pop{ animation:pop .4s ease }
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.letter-btn .badge{
  position:absolute; top:5px; right:6px; font-size:.8rem; line-height:1;
}
.letter-btn.c0{color:var(--pink)} .letter-btn.c1{color:var(--orange)}
.letter-btn.c2{color:var(--blue)} .letter-btn.c3{color:var(--green)}
.letter-btn.c4{color:var(--purple)} .letter-btn.c5{color:var(--deep)}

/* ---------------- LETTER DETAIL ---------------- */
.letter-stage{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; text-align:center; margin-bottom:16px;
}
.big-letter{
  font-size:6.5rem; font-weight:900; line-height:1;
  color:var(--orange); animation:pop .5s ease;
}
.letter-pic{ width:150px;height:150px;margin:6px auto 2px }
.letter-pic svg{width:100%;height:100%}
.letter-word{ font-size:2rem; font-weight:900; margin:4px 0 0; letter-spacing:2px }

.row-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.row-btns.small{ margin-top:10px }
.big-btn{
  min-height:var(--tap); border-radius:20px; padding:12px;
  font-size:1.05rem; font-weight:800; box-shadow:var(--shadow-sm);
  background:#fff; transition:transform .12s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.big-btn:active{ transform:translateY(3px) }
.big-btn.primary{ background:var(--yellow); color:#4A3200 }
.big-btn.accent{ background:var(--blue); color:#fff }
.big-btn.soft{ background:#fff; color:var(--ink-soft) }
.big-btn.wide{ grid-column:1/-1 }
.pill-btn{
  min-height:52px; border-radius:999px; background:#fff;
  box-shadow:var(--shadow-sm); font-weight:700; font-size:.95rem;
}
.pill-btn:active{ transform:translateY(2px) }

/* ---------------- TRACING ---------------- */
.case-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:6px;
  margin:0 auto 14px; max-width:560px; border-radius:18px; background:rgba(0,0,0,.06)
}
.case-btn{
  min-height:46px; padding:8px 10px; border-radius:13px; background:transparent;
  color:var(--ink-soft); font-weight:900; font-size:.92rem
}
.case-btn[aria-pressed="true"]{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm) }
.trace-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 4px 8px }
.trace-case-label{ flex:1 0 100%; color:var(--ink); font-size:.92rem; text-align:center; white-space:nowrap }
.level-switch{ display:flex; gap:6px; background:rgba(0,0,0,.05); padding:5px; border-radius:999px }
.lvl{
  width:44px;height:44px;border-radius:50%; font-weight:900; font-size:1.05rem;
  background:transparent; color:var(--ink-soft);
}
.lvl[aria-pressed="true"]{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm) }
.trace-progress{ flex:1; height:16px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden }
.trace-progress span{ display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--green),#8FD5A6); transition:width .18s ease }

.canvas-wrap{
  position:relative; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; touch-action:none;
  aspect-ratio:1/1; max-height:58vh; margin:0 auto; width:100%;
}
#trace-canvas{ display:block; width:100%; height:100%; touch-action:none; }
.fx-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.fx-global{ position:fixed; inset:0; z-index:45; pointer-events:none }
.spark{ position:absolute; font-size:22px; animation:sparkUp .9s ease forwards }
@keyframes sparkUp{ from{opacity:1;transform:translateY(0) scale(.6)} to{opacity:0;transform:translateY(-70px) scale(1.4)} }
.confetti{ position:absolute; width:10px;height:14px; border-radius:3px; animation:fall 1.5s linear forwards }
@keyframes fall{ from{transform:translateY(-20px) rotate(0)} to{transform:translateY(105%) rotate(540deg); opacity:.2} }
.trace-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px }

/* ---------------- PLAY CARDS ---------------- */
.play-list{ display:grid; gap:12px }
.play-card{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--card); border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); min-height:88px; border:3px solid transparent;
  transition:transform .12s ease;
}
.play-card:active{ transform:translateY(3px) scale(.99) }
.play-emoji{ font-size:2.2rem; width:58px;height:58px; border-radius:18px; display:grid;place-items:center; background:#FFF1D0 }
.play-card strong{ display:block; font-size:1.15rem }
.play-card small{ display:block; color:var(--ink-soft); font-size:.9rem; font-weight:600 }
.play-card.p1{border-color:#FFE0A3} .play-card.p2{border-color:#BFE6EF} .play-card.p2 .play-emoji{background:#E1F4F9}
.play-card.p3{border-color:#F7C9C8} .play-card.p3 .play-emoji{background:#FDE6E5}
.play-card.p4{border-color:#C6E7CF} .play-card.p4 .play-emoji{background:#E3F5E9}
.play-card.p5{border-color:#DDCCF0} .play-card.p5 .play-emoji{background:#F0E7FA}
.play-card.p6{border-color:#FFD6B0} .play-card.p6 .play-emoji{background:#FFEBD8}

/* ---------------- GAME ---------------- */
.game-stage{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; text-align:center; margin-bottom:14px;
}
.game-pic{ width:170px;height:170px;margin:0 auto }
.game-pic svg{width:100%;height:100%}
.game-q{ font-size:1.2rem; font-weight:800; margin:10px 0 0 }
.opt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.opt-grid.three{ grid-template-columns:repeat(3,1fr) }
.opt-btn{
  min-height:96px; border-radius:24px; background:#fff; box-shadow:var(--shadow);
  font-size:2.6rem; font-weight:900; color:var(--deep);
  display:grid; place-items:center; transition:transform .12s ease;
}
.opt-btn:active{ transform:translateY(3px) scale(.96) }
.opt-btn.correct{ background:var(--green); color:#fff; animation:pop .45s ease }
.opt-btn.wrong{ background:#FFE1E0; color:var(--pink); animation:shake .4s ease }
.opt-btn[disabled]{ opacity:.55 }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

.score-chip{
  display:inline-flex; gap:6px; align-items:center; margin:0 auto 10px;
  background:#fff; border-radius:999px; padding:8px 16px; font-weight:800;
  box-shadow:var(--shadow-sm);
}
.center{ text-align:center }

/* drag & drop pasangan */
.match-wrap{ display:grid; gap:14px }
.match-targets{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.match-target{
  background:#fff; border-radius:22px; box-shadow:var(--shadow-sm);
  padding:8px; display:grid; justify-items:center; gap:4px; min-height:120px;
  border:4px dashed rgba(0,0,0,.10);
}
.match-target.over{ border-color:var(--green); background:#EAF7EE }
.match-target.done{ border-style:solid; border-color:var(--green) }
.match-target svg{ width:74px;height:74px }
.match-target span{ font-weight:800; font-size:.85rem; letter-spacing:1px }
.match-source{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; min-height:86px }
.drag-letter{
  width:76px;height:76px;border-radius:22px; background:var(--yellow); color:#4A3200;
  font-size:2.2rem; font-weight:900; display:grid;place-items:center;
  box-shadow:var(--shadow); touch-action:none; user-select:none;
}
.drag-letter.dragging{ position:fixed; z-index:60; pointer-events:none; transform:scale(1.15) }
.drag-letter.used{ visibility:hidden }

/* ---------------- SUKU KATA / KATA / KALIMAT ---------------- */
.syl-tabs{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:thin }
.syl-tab{
  flex:0 0 auto; min-width:56px; height:56px; border-radius:18px; background:#fff;
  box-shadow:var(--shadow-sm); font-size:1.5rem; font-weight:900; color:var(--deep);
}
.syl-tab[aria-pressed="true"]{ background:var(--blue); color:#fff }
.syl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.syl-btn{
  min-height:92px; border-radius:24px; background:#fff; box-shadow:var(--shadow);
  font-size:2rem; font-weight:900; color:var(--orange); display:grid;place-items:center;
  transition:transform .12s ease; position:relative;
}
.syl-btn:active{ transform:translateY(3px) scale(.96) }
.syl-btn.mastered::after{ content:"⭐"; position:absolute; top:6px; right:8px; font-size:.9rem }
.syl-btn .merge{ display:inline-block }
.syl-btn.merging .merge{ animation:merge .9s ease }
@keyframes merge{ 0%{letter-spacing:22px} 60%{letter-spacing:0} 100%{letter-spacing:0} }

.word-slots{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:12px 0 }
.slot{
  width:66px;height:78px; border-radius:18px; background:rgba(0,0,0,.05);
  border:4px dashed rgba(0,0,0,.15); display:grid; place-items:center;
  font-size:2.1rem; font-weight:900; color:var(--deep);
}
.slot.filled{ background:#fff; border-style:solid; border-color:var(--green) }
.slot.over{ border-color:var(--green); background:#EAF7EE }

.sentence-list{ display:grid; gap:12px }
.sentence-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.word-chip{
  font-size:1.6rem; font-weight:900; letter-spacing:2px; padding:6px 12px;
  border-radius:14px; background:#FFF3D6; color:var(--ink);
}
.word-chip.on{ background:var(--yellow); animation:pop .35s ease }
.sentence-play{
  width:100%; margin-top:6px; min-height:52px; border-radius:16px;
  background:var(--blue); color:#fff; font-weight:800;
}

/* ---------------- KAMPUNG ---------------- */
.village{
  background:linear-gradient(180deg,#BFE9F5 0%, #DFF4E4 46%, #CDEBBC 100%);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; min-height:60vh;
  position:relative; overflow:hidden;
}
.village::before{
  content:""; position:absolute; left:0; right:0; top:0; height:78px;
  background:radial-gradient(60px 60px at 84% 26%, #FFE08A 0 55%, transparent 56%);
}
.village-item{
  position:relative; z-index:1; background:rgba(255,255,255,.75); border-radius:20px;
  padding:8px 6px; display:grid; justify-items:center; gap:4px; min-height:104px;
}
.village-item svg{ width:60px;height:60px }
.village-item span{ font-size:.78rem; font-weight:800; text-align:center; letter-spacing:.3px }
.village-item.locked{ background:rgba(255,255,255,.4); }
.village-item.locked svg{ filter:grayscale(1); opacity:.35 }
.village-item.locked span{ color:var(--ink-soft) }
.village-item.new{ animation:pop .6s ease }

/* ---------------- ORANG TUA ---------------- */
.stat-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:12px }
.stat-row{ display:flex; justify-content:space-between; align-items:baseline; font-weight:800; margin-bottom:6px }
.stat-row small{ color:var(--ink-soft); font-weight:700 }
.bar{ height:14px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; margin-bottom:14px }
.bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--yellow)) }
.bar.blue i{ background:linear-gradient(90deg,var(--deep),var(--blue)) }
.bar.green i{ background:linear-gradient(90deg,#3F8F5A,var(--green)) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ background:#FFE6E5; color:#B3403D; border-radius:12px; padding:6px 12px; font-weight:900; letter-spacing:1px }
.chip.ok{ background:#E3F5E9; color:#2F7A4C }
.danger-btn{
  width:100%; min-height:56px; border-radius:20px; background:#FFE1E0; color:#B3403D;
  font-weight:800; box-shadow:var(--shadow-sm);
}
.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-weight:700 }
.switch{ width:64px;height:36px;border-radius:999px;background:rgba(0,0,0,.15); position:relative; flex:0 0 64px }
.switch::after{ content:""; position:absolute; top:4px; left:4px; width:28px;height:28px;border-radius:50%;
  background:#fff; transition:transform .18s ease; box-shadow:0 2px 4px rgba(0,0,0,.2) }
.switch[aria-checked="true"]{ background:var(--green) }
.switch[aria-checked="true"]::after{ transform:translateX(28px) }
.note{ font-size:.85rem; color:var(--ink-soft); line-height:1.5 }

/* ---------------- MASKOT ---------------- */
.kiko-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:flex-end; gap:10px;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:linear-gradient(180deg,rgba(255,247,232,0),rgba(255,239,211,.96) 45%);
  pointer-events:none;
}
.kiko{ width:72px;height:72px;flex:0 0 72px; pointer-events:auto; animation:bob 3s ease-in-out infinite }
.kiko svg{ width:100%;height:100% }
.bubble{
  pointer-events:none; background:#fff; border-radius:20px 20px 20px 6px;
  box-shadow:var(--shadow-sm); padding:12px 16px; font-weight:700; font-size:1rem;
  max-width:min(78vw,520px); margin-bottom:6px;
}

/* ---------------- TOAST ---------------- */
.toast{
  position:fixed; left:50%; bottom:110px; transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px;
  font-weight:800; opacity:0; transition:.25s ease; z-index:50; pointer-events:none;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0) }
.toast.good{ background:var(--green) }
.toast.info{ background:var(--deep) }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width:520px){
  .alphabet-grid{ grid-template-columns:repeat(5,1fr) }
  .opt-grid{ grid-template-columns:repeat(4,1fr) }
  .village{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:768px){
  body{ font-size:18px }
  main{ max-width:840px; margin:0 auto }
  .alphabet-grid{ grid-template-columns:repeat(6,1fr) }
  .menu-grid{ grid-template-columns:repeat(3,1fr) }
  .menu-card.wide{ grid-column:auto; grid-template-columns:none; justify-items:center }
  .village{ grid-template-columns:repeat(6,1fr) }
  .canvas-wrap{ max-width:560px; max-height:none }
  .trace-actions,.row-btns{ max-width:560px; margin-left:auto; margin-right:auto }
  .trace-head{ max-width:560px; margin-left:auto; margin-right:auto }
}
@media (min-width:1024px){
  main{ max-width:960px }
  .alphabet-grid{ grid-template-columns:repeat(7,1fr) }
}

/* ---------------- KURANGI ANIMASI ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation:none !important; transition:none !important;
}