/* Gatotkoco vs Buto Coding — kartun cerah, wayang ramah anak */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700&display=swap');

:root {
  --bg: #fff8e7;
  --sky: #a5d8ff;
  --gold: #ffd43b;
  --gold-dark: #fab005;
  --red: #ff6b6b;
  --green: #51cf66;
  --purple: #9775fa;
  --brown: #5c4033;
  --wall: #868e96;
  --tile: #e9ecef;
  --shadow: rgba(92, 64, 51, 0.2);
}

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

html, body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(160deg, #ffe8cc 0%, var(--sky) 50%, #d0ebff 100%);
  min-height: 100vh;
  color: var(--brown);
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.top-left { flex: 1; text-align: center; }

.lang-switch { display: flex; gap: 4px; flex-shrink: 0; }

.lang-btn {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--brown);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}

.lang-btn.active { background: var(--gold); }

.logo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: var(--gold-dark);
  text-shadow: 1px 1px 0 #fff;
}

.tagline { font-size: 0.75rem; font-weight: 700; color: var(--purple); }

.screen { display: none; }
.screen.active { display: block; }

.card {
  background: var(--bg);
  border: 4px solid var(--gold);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 8px 24px var(--shadow);
}

.menu-card { text-align: center; max-width: 360px; margin: 0 auto; }
.hero-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.menu-card h2 { font-family: 'Fredoka', sans-serif; color: var(--gold-dark); }
.subtitle { font-size: 0.85rem; margin: 0.5rem 0 1rem; }
.progress-text { margin-top: 1rem; font-size: 0.8rem; font-weight: 700; color: var(--purple); }

.scroll-card { max-height: 80vh; overflow-y: auto; }

.btn {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0.35rem auto;
  padding: 0.7rem 1rem;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  border: 3px solid var(--brown);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(180deg, var(--green), #37b24d); color: #fff; }
.btn.secondary { background: #fff; color: var(--brown); }
.btn.tiny { font-size: 0.8rem; padding: 0.4rem 0.8rem; max-width: none; display: inline-block; width: auto; margin: 0; }

.help-list { text-align: left; padding-left: 1.2rem; margin: 1rem 0; line-height: 1.6; font-size: 0.9rem; }
.small { font-size: 0.75rem; opacity: 0.8; }
.small code { color: var(--purple); }

/* Level select */
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 1rem 0;
}

.level-btn {
  padding: 1rem 0.5rem;
  border: 3px solid var(--brown);
  border-radius: 14px;
  background: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
}
.level-btn.done { background: #d3f9d8; border-color: var(--green); }
.level-btn.locked { opacity: 0.45; pointer-events: none; }
.level-btn .lv-stars { display: block; font-size: 0.75rem; margin-top: 4px; }

/* Game layout */
.game-layout { display: flex; flex-direction: column; gap: 8px; }

.game-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.level-info { flex: 1; min-width: 140px; }
.level-info h2 { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; color: var(--gold-dark); }
.objective { font-size: 0.78rem; line-height: 1.35; }
.stars-display { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

.board-wrap {
  display: flex;
  justify-content: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  border: 3px solid var(--gold);
}

.board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  width: min(96vw, 360px);
  aspect-ratio: 1;
}

.cell {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  border: 2px solid rgba(92, 64, 51, 0.15);
  position: relative;
  min-height: 0;
  transition: background 0.15s;
}

.cell.path { background: var(--tile); }
.cell.wall { background: var(--wall); border-color: #495057; }
.cell.start { background: #b2f2bb; }
.cell.goal { background: #ffec99; }
.cell.pusaka { background: #fff3bf; }
.cell.buto { background: #ffc9c9; }
.cell.obstacle { background: #dee2e6; border-style: dashed; }

.cell .entity {
  position: absolute;
  font-size: 1.5rem;
  z-index: 2;
  transition: transform 0.25s ease;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.2));
}

.cell.highlight { box-shadow: inset 0 0 0 3px var(--purple); }

.feedback {
  min-height: 2.2rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.feedback.ok { color: #2b8a3e; }
.feedback.warn { color: #e67700; }
.feedback.err { color: #c92a2a; }

.panel-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 6px;
}
.hint { font-weight: 600; opacity: 0.7; }

.palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.block-btn {
  padding: 10px 12px;
  min-height: 48px;
  min-width: 48px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  border: 3px solid var(--brown);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
  line-height: 1.2;
}
.block-btn:active { background: var(--gold); transform: scale(0.96); }
.block-btn.move { border-color: #339af0; background: #e7f5ff; }
.block-btn.turn { border-color: #9775fa; background: #f3f0ff; }
.block-btn.action { border-color: var(--red); background: #fff5f5; }
.block-btn.loop { border-color: var(--green); background: #ebfbee; }
.block-btn.if { border-color: #f59f00; background: #fff9db; }

.queue {
  min-height: 56px;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 3px dashed var(--gold-dark);
  border-radius: 12px;
}

.queue-empty {
  font-size: 0.8rem;
  opacity: 0.6;
  width: 100%;
  text-align: center;
}

.queue-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #e7f5ff;
  border: 2px solid #339af0;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}
.queue-chip .remove {
  border: none;
  background: var(--red);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1;
}

.run-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.run-row .btn { margin: 0; flex: 1; min-width: 100px; max-width: 160px; }

.educator-panel {
  margin-top: 4px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 8px 12px;
  border: 2px solid var(--purple);
}
.educator-panel summary { font-weight: 700; cursor: pointer; color: var(--purple); }
.edu-notes { margin-top: 8px; line-height: 1.5; }

/* Win overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(91, 163, 217, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.overlay.hidden { display: none; }
.win-card { text-align: center; max-width: 340px; }
.win-card h2 { font-family: 'Fredoka', sans-serif; color: var(--green); margin-bottom: 0.5rem; }
.win-stars { font-size: 1.2rem; font-weight: 700; margin: 0.5rem 0; }
.badge-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 1rem 0; }
.badge-pill {
  padding: 6px 10px;
  background: var(--gold);
  border: 2px solid var(--brown);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (min-width: 600px) {
  .game-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top top"
      "board board"
      "feed feed"
      "blocks queue"
      "edu edu";
  }
  .game-top { grid-area: top; }
  .board-wrap { grid-area: board; }
  .feedback { grid-area: feed; }
  .blocks-panel { grid-area: blocks; }
  .queue-panel { grid-area: queue; }
  .educator-panel { grid-area: edu; }
}