@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('../public/fonts/baloo-2-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../public/fonts/comic-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 700; font-display: swap; src: url('../public/fonts/comic-neue-latin-700-normal.woff2') format('woff2'); }

:root {
  --blue: #2563eb;
  --blue-dark: #1e40af;
  --ink: #0f172a;
  --muted: #475569;
  --sky: #eff6ff;
  --card: #ffffff;
  --border: #dbe7fb;
  --yellow: #f59e0b;
  --yellow-soft: #fff6d6;
  --pink: #ec4899;
  --pink-soft: #fff0f8;
  --green: #0f9f72;
  --green-soft: #e5faf2;
  --purple: #7856d6;
  --purple-soft: #f1edff;
  --shadow: 0 12px 0 rgba(35, 82, 166, .08), 0 18px 36px rgba(40, 72, 130, .08);
  --shadow-small: 0 5px 0 rgba(35, 82, 166, .08), 0 9px 20px rgba(40, 72, 130, .08);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--sky); }
body { margin: 0; color: var(--ink); background: var(--sky); font-family: 'Comic Neue', 'Trebuchet MS', sans-serif; font-size: 17px; line-height: 1.42; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(236, 72, 153, .45); outline-offset: 3px; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 10% 15%, rgba(255,255,255,.8) 0 2px, transparent 3px) 0 0 / 28px 28px, linear-gradient(180deg, #eff6ff 0%, #f7fbff 55%, #fffaf5 100%); }
.topbar, main, .footer { width: min(1340px, calc(100% - 40px)); margin: 0 auto; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--blue); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transform: rotate(-5deg); }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 23px/1 'Baloo 2', sans-serif; letter-spacing: -.3px; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.topbar-progress { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 14px; }
.topbar-progress strong { color: var(--blue-dark); font-family: 'Baloo 2', sans-serif; font-size: 18px; }
.progress-track { width: 128px; height: 9px; padding: 2px; overflow: hidden; border-radius: 99px; background: #d7e6fb; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .35s ease; }

.hero-row { display: grid; grid-template-columns: 1.4fr .85fr; align-items: center; min-height: 300px; padding: 28px 48px 24px; overflow: hidden; border: 3px solid var(--ink); border-radius: 32px; background: #fff; box-shadow: var(--shadow); position: relative; }
.hero-row::after { content: ''; position: absolute; width: 210px; height: 210px; right: -65px; top: -85px; border-radius: 50%; background: var(--yellow-soft); z-index: 0; }
.hero-copy, .robot-hero { position: relative; z-index: 1; }
.eyebrow, .overline { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font: 700 12px/1.2 'Baloo 2', sans-serif; letter-spacing: 1.1px; }
.eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin: 13px 0 9px; font: 700 clamp(44px, 6vw, 72px)/.92 'Baloo 2', sans-serif; letter-spacing: -1.5px; }
h1 em { color: var(--pink); font-style: normal; }
.hero-copy > p { max-width: 560px; margin-bottom: 18px; color: var(--muted); font-size: 18px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-pills span, .concept-chip, .direction-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid var(--border); border-radius: 99px; background: #f8fbff; color: var(--muted); font-weight: 700; font-size: 13px; }
.robot-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 245px; }
.robot-art { width: min(245px, 70%); height: auto; overflow: visible; animation: float 3.6s ease-in-out infinite; }
.robot-body { fill: #6a9eff; stroke: var(--ink); stroke-width: 4; }
.robot-screen { fill: #d9f8ff; stroke: var(--ink); stroke-width: 3; }
.robot-eye, .robot-dot { fill: var(--pink); stroke: var(--ink); stroke-width: 2; }
.robot-smile, .robot-antenna, .robot-arm, .robot-wheel-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.robot-wheel { fill: var(--yellow); stroke: var(--ink); stroke-width: 4; }
.robot-shadow { fill: none; stroke: #cadcf4; stroke-width: 9; stroke-linecap: round; }
.robot-label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: #eefaf5; color: var(--green); font-size: 13px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #d4f7e9; }
.spark { position: absolute; color: var(--yellow); font-size: 24px; font-family: sans-serif; animation: twinkle 2.1s ease-in-out infinite; }
.spark-one { top: 23%; left: 18%; }
.spark-two { right: 17%; bottom: 28%; color: var(--pink); animation-delay: .65s; }

.learning-strip { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 860px; min-height: 76px; margin: 18px auto 26px; padding: 12px 20px; border: 3px solid var(--ink); border-radius: 22px; background: var(--yellow-soft); box-shadow: 0 6px 0 rgba(137, 95, 13, .16); }
.strip-step { display: flex; align-items: center; gap: 9px; min-width: 145px; }
.step-badge { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: var(--blue); font: 700 19px 'Baloo 2', sans-serif; }
.strip-step strong, .strip-step small { display: block; }
.strip-step strong { font-family: 'Baloo 2', sans-serif; font-size: 17px; }
.strip-step small { color: var(--muted); font-size: 13px; }
.strip-line { width: 34px; height: 2px; background: #e6c975; }

.workspace-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; padding-bottom: 40px; }
.panel { border: 3px solid var(--ink); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-small); }
.mission-sidebar { padding: 20px 15px 15px; position: sticky; top: 18px; }
.panel-heading, .simulation-top, .builder-top, .mission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h2, .mission-heading h2 { margin: 3px 0 0; font: 700 30px/1.05 'Baloo 2', sans-serif; }
.case-count { padding: 5px 10px; border-radius: 10px; background: var(--blue); color: #fff; font: 700 15px 'Baloo 2', sans-serif; }
.mission-list { display: grid; gap: 9px; margin-top: 18px; }
.mission-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 9px; text-align: left; border: 2px solid transparent; border-radius: 15px; background: #f7faff; color: var(--ink); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.mission-item:hover:not(:disabled) { transform: translateX(3px); border-color: #b8ccf5; }
.mission-item:disabled { cursor: not-allowed; opacity: .56; }
.mission-item.is-active { border-color: var(--blue); background: #eaf2ff; box-shadow: inset 4px 0 0 var(--blue); }
.mission-number { width: 31px; height: 31px; display: grid; place-items: center; flex: none; border-radius: 10px; background: #d9e7ff; color: var(--blue-dark); font: 700 16px 'Baloo 2', sans-serif; }
.is-done .mission-number { background: var(--green); color: #fff; }
.mission-item-copy { min-width: 0; flex: 1; }
.mission-item-copy strong, .mission-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-item-copy strong { font: 700 16px/1.05 'Baloo 2', sans-serif; }
.mission-item-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mission-item-state { color: var(--muted); font-size: 12px; font-weight: 700; }
.is-done .mission-item-state { color: var(--green); }
.sidebar-note { display: flex; gap: 9px; margin-top: 17px; padding: 13px 12px; border-radius: 14px; background: var(--yellow-soft); color: #604300; }
.note-icon { color: #a26900; }
.sidebar-note p { margin: 0; font-size: 13px; line-height: 1.28; }

.mission-main { min-width: 0; }
.mission-heading { margin: 0 2px 16px; align-items: center; }
.mission-heading h2 { font-size: 36px; }
.mission-heading p { max-width: 610px; margin: 5px 0 0; color: var(--muted); font-size: 16px; }
.concept-chip { flex: none; border-color: #ecc3de; background: var(--pink-soft); color: #a12668; }
.simulation-card { padding: 22px; }
.simulation-top h3, .builder-top h3 { margin: 3px 0 0; font: 700 23px/1.05 'Baloo 2', sans-serif; }
.direction-badge { background: var(--purple-soft); border-color: #d8cef9; color: var(--purple); }
.map-wrap { margin-top: 18px; padding: 17px; border: 3px solid #b9d2fa; border-radius: 20px; background: #f3f8ff; }
.map-grid { display: grid; grid-template-columns: repeat(var(--map-columns, 5), minmax(0, 1fr)); grid-template-rows: repeat(var(--map-rows, 4), minmax(48px, 1fr)); gap: 7px; max-width: 760px; margin: 0 auto; }
.map-cell { position: relative; display: grid; place-items: center; min-height: 53px; border: 2px solid #d1e2fb; border-radius: 13px; background: #fff; }
.map-cell:nth-child(odd) { background: #fbfdff; }
.map-cell.has-book { border-color: #f6d06d; background: #fffdf4; }
.map-cell.has-target { border-color: #e6acd0; background: #fff8fc; }
.cell-object { display: flex; align-items: center; flex-direction: column; gap: 0; font-size: 10px; font-weight: 700; }
.book-object { color: #ba7a00; }
.target-object { color: #c23b84; }
.robot-token { width: 36px; height: 36px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: #77adff; color: var(--ink); font: 700 24px/1 'Baloo 2', sans-serif; box-shadow: 0 4px 0 var(--ink); animation: robot-pop .3s ease both; }
.map-legend { display: flex; justify-content: center; gap: 16px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.dot-robot { background: #77adff; border: 2px solid var(--ink); }
.dot-book { background: var(--yellow); }.dot-target { background: var(--pink); }
.step-readout { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--blue-dark); font-size: 14px; }
.step-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.step-caption { margin-left: auto; color: var(--muted); font-size: 13px; }

.builder-card { margin-top: 18px; padding: 22px; }
.builder-tip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: 10px; background: #f5f8ff; color: var(--muted); font-size: 12px; }
.program-list { display: grid; gap: 8px; margin-top: 18px; }
.command-card { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 9px 8px 11px; border: 2px solid transparent; border-radius: 15px; color: var(--ink); }
.command-card.tone-blue, .palette-button.tone-blue { background: #edf4ff; border-color: #c8dcfd; }
.command-card.tone-purple, .palette-button.tone-purple { background: var(--purple-soft); border-color: #ddd3ff; }
.command-card.tone-yellow, .palette-button.tone-yellow { background: var(--yellow-soft); border-color: #f2d888; }
.command-card.tone-pink, .palette-button.tone-pink { background: var(--pink-soft); border-color: #f2c3df; }
.command-card.tone-green, .palette-button.tone-green { background: var(--green-soft); border-color: #b8ead8; }
.command-index { width: 24px; color: var(--muted); font: 700 14px 'Baloo 2', sans-serif; text-align: center; }
.command-glyph { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.68); color: var(--blue-dark); font: 700 23px/1 'Baloo 2', sans-serif; }
.command-copy { flex: 1; min-width: 0; }.command-copy strong, .command-copy small { display: block; }.command-copy strong { font: 700 17px/1.05 'Baloo 2', sans-serif; }.command-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.command-controls { display: flex; gap: 4px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #ccdaef; border-radius: 9px; background: rgba(255,255,255,.82); color: var(--blue-dark); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.icon-button:hover:not(:disabled) { background: #fff; transform: translateY(-2px); }.icon-button.danger { color: #bf2e66; }.icon-button:disabled { cursor: not-allowed; opacity: .35; }
.empty-program { padding: 20px; border: 2px dashed #b9cdec; border-radius: 15px; color: var(--muted); text-align: center; }
.palette { margin-top: 18px; padding-top: 16px; border-top: 2px dashed #d9e5f5; }.palette-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 13px; font-weight: 700; }.palette-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.palette-button { min-height: 51px; padding: 6px 4px; border: 2px solid; border-radius: 12px; color: var(--ink); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }.palette-button span, .palette-button small { display: block; }.palette-button span { font: 700 13px/1 'Baloo 2', sans-serif; }.palette-button small { margin-top: 5px; color: var(--muted); font-size: 11px; }.palette-button:hover { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(15,23,42,.12); }
.builder-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 2px solid transparent; border-radius: 13px; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }.button:hover:not(:disabled) { transform: translateY(-2px); }.button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }.button:disabled { cursor: not-allowed; opacity: .5; }.button-primary { border-color: var(--ink); background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--ink); }.button-primary:hover:not(:disabled) { background: var(--blue-dark); }.button-secondary { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }.button-ghost { border-color: #cbdaf0; background: #fff; color: var(--blue-dark); }.button-large { min-height: 52px; padding-inline: 19px; font-size: 17px; }.button-ghost:hover:not(:disabled) { background: #f0f6ff; }
.hint-box { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding: 13px 15px; border: 2px solid #efd27d; border-radius: 15px; background: var(--yellow-soft); color: #624500; }.hint-symbol { color: #a46d00; }.hint-box strong { font: 700 17px 'Baloo 2', sans-serif; }.hint-box p { margin: 2px 0 0; font-size: 15px; }
.result-card { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 13px 15px; border: 2px solid; border-radius: 15px; }.result-card > div:nth-child(2) { flex: 1; }.result-card strong { font: 700 17px 'Baloo 2', sans-serif; }.result-card p { margin: 1px 0 0; font-size: 14px; }.result-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: none; border-radius: 11px; font: 700 22px 'Baloo 2', sans-serif; }.result-success { border-color: #9cdec7; background: var(--green-soft); color: #075d46; }.result-success .result-icon { background: var(--green); color: #fff; }.result-error { border-color: #f1c4d9; background: #fff4f8; color: #8b2559; }.result-error .result-icon { border: 2px solid #d95991; color: #c03375; }.result-idle { border-color: #ccdcef; background: #f7faff; color: var(--blue-dark); }.result-idle .result-icon { background: #dce9ff; color: var(--blue); }.result-running { border-color: #cdddf7; background: #f4f8ff; color: var(--blue-dark); }.spinner { width: 24px; height: 24px; flex: none; border: 3px solid #c6d9fa; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.footer { display: flex; justify-content: space-between; gap: 12px; padding: 17px 0 28px; color: var(--muted); font-size: 13px; }.footer-meta { color: #6680a7; }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(12deg); } }
@keyframes robot-pop { from { transform: scale(.8); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Feedback is optional; every animation also has a written step explanation. */
[hidden] { display: none !important; }
.play-settings { display: grid; grid-template-columns: .8fr 1.6fr; align-items: center; gap: 20px; padding: 20px 24px; margin-bottom: 28px; background: #fffef8; }
.settings-title h2 { margin: 3px 0 4px; font: 700 23px/1.1 'Baloo 2', sans-serif; }
.settings-title p { margin: 0; max-width: 360px; font-size: 14px; color: var(--muted); }
.settings-toggles, .settings-sliders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.setting-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 9px 12px; color: var(--blue-dark); border: 2px solid #cbdaf0; border-radius: 13px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.setting-button:hover:not(:disabled) { background: #eaf2ff; transform: translateY(-2px); }
.setting-button.is-on { border-color: #13826d; color: #075d46; background: var(--green-soft); }
.setting-button:disabled { cursor: default; }
.settings-sliders { gap: 18px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.volume-control, .pace-control { display: inline-flex; align-items: center; gap: 8px; }
.volume-control input { width: 108px; min-height: 44px; accent-color: var(--blue); cursor: pointer; }
.volume-control output { width: 35px; color: var(--blue-dark); }
.pace-control select { min-height: 44px; border: 2px solid #cbdaf0; border-radius: 10px; padding: 6px 10px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.map-grid { --map-gap: 7px; position: relative; gap: var(--map-gap); grid-template-rows: repeat(var(--map-rows, 4), minmax(64px, 1fr)); isolation: isolate; }
.map-cell { min-width: 0; transition: background .25s ease, border-color .25s ease; }
.map-cell.is-visited { background: #eaf3ff; border-color: #b9d2fa; }
.map-cell.is-visited::after { content: ''; position: absolute; width: 7px; height: 7px; left: 6px; bottom: 6px; border-radius: 50%; background: #6e9cdf; opacity: .65; }
.map-cell.has-book { background: #fff6d6; }
.map-cell.has-target { background: #fde6f3; }
.map-cell.is-delivered { border-color: var(--green); background: #d4f7e9; }
.map-cell.is-delivered .target-object { color: #075d46; }
.book-object { color: #805400; }
.target-object { color: #a12668; }
.robot-position { position: absolute; left: 0; top: 0; width: calc((100% - (var(--map-columns, 5) - 1) * var(--map-gap)) / var(--map-columns, 5)); height: calc((100% - (var(--map-rows, 4) - 1) * var(--map-gap)) / var(--map-rows, 4)); display: grid; place-items: center; z-index: 3; pointer-events: none; transform: translate(calc(var(--robot-x) * (100% + var(--map-gap))), calc(var(--robot-y) * (100% + var(--map-gap)))); transition: transform .42s cubic-bezier(.25,.65,.3,1); }
.robot-token { position: relative; width: 44px; height: 44px; border: 0; background: transparent; box-shadow: none; animation: none; filter: drop-shadow(0 3px 0 rgba(15,23,42,.2)); }
.mini-robot { width: 44px; height: 44px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.robot-direction { position: absolute; right: -8px; top: -9px; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); transition: transform .25s ease; }
.carried-book { position: absolute; right: -8px; bottom: 0; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid var(--ink); border-radius: 7px; color: #805400; background: #fef3c7; transform: rotate(-8deg); }
.robot-token.is-picking { animation: book-hop .4s ease; }
.robot-token.is-bumping { animation: gentle-bump .35s ease; }
.robot-token.is-delivering { animation: book-hop .4s ease; }
.simulation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 2px dashed #d9e5f5; }
.simulation-controls .button { font-size: 14px; }
.playback-count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.step-readout strong { line-height: 1.35; }
.step-dot { transition: background .2s ease; }
.command-card { min-height: 68px; transition: border-color .2s ease, box-shadow .2s ease; }
.command-card.is-current { border-color: var(--blue); box-shadow: inset 4px 0 var(--blue), 0 0 0 3px #dbeafe; }
.command-progress { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 6px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 700; }
.icon-button { width: 44px; height: 44px; flex: none; }
.palette-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.hint-box { animation: feedback-in .25s ease both; }
.result-success { animation: feedback-in .32s ease both; }
.celebration-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: 14px; }
.confetti { position: absolute; left: 50%; top: 58%; width: 9px; height: 14px; border-radius: 3px; background: var(--confetti-color); animation: confetti-burst 1.2s var(--delay) ease-out both; }
.confetti-star { width: 16px; height: 16px; background: none; color: var(--confetti-color); }
@keyframes book-hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-8px) rotate(-5deg); } }
@keyframes gentle-bump { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }
@keyframes feedback-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes confetti-burst { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 60% { opacity: 1; transform: translate(var(--scatter), var(--rise)) rotate(var(--spin)); } 100% { opacity: 0; transform: translate(var(--scatter), 65px) rotate(var(--spin)); } }
.calm-motion *, .calm-motion *::before, .calm-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.calm-motion .celebration-layer { display: none; }

@media (max-width: 980px) { .workspace-grid { grid-template-columns: 1fr; }.mission-sidebar { position: static; }.mission-list { grid-template-columns: repeat(3, 1fr); }.sidebar-note { display: none; }.hero-row { grid-template-columns: 1fr .65fr; padding-inline: 32px; } }
@media (max-width: 720px) { .topbar, main, .footer { width: min(100% - 24px, 600px); }.topbar { min-height: 70px; }.topbar-progress .progress-label { display: none; }.progress-track { width: 86px; }.hero-row { grid-template-columns: 1fr; padding: 25px 20px 0; border-radius: 25px; }.hero-copy > p { font-size: 16px; }.robot-hero { min-height: 175px; }.robot-art { width: 160px; }.spark-one { left: 18%; top: 15%; }.spark-two { right: 15%; bottom: 22%; }.learning-strip { gap: 8px; justify-content: space-between; padding-inline: 11px; }.strip-line { width: 15px; }.strip-step { min-width: 0; gap: 5px; }.strip-step small { font-size: 11px; }.strip-step strong { font-size: 15px; }.step-badge { width: 29px; height: 29px; font-size: 16px; }.mission-list { grid-template-columns: repeat(2, 1fr); }.mission-item { min-height: 56px; }.mission-heading { display: block; }.concept-chip { margin-top: 12px; }.simulation-card, .builder-card { padding: 15px; border-radius: 22px; }.simulation-top h3, .builder-top h3 { font-size: 20px; }.direction-badge { font-size: 11px; }.map-wrap { padding: 9px; }.map-grid { gap: 4px; grid-template-rows: repeat(var(--map-rows, 4), minmax(42px, 1fr)); }.map-cell { min-height: 43px; border-radius: 9px; }.robot-token { width: 30px; height: 30px; border-radius: 9px; font-size: 20px; }.step-readout { flex-wrap: wrap; }.step-caption { width: 100%; margin-left: 19px; }.palette-list { grid-template-columns: repeat(4, 1fr); }.palette-button { min-height: 47px; }.palette-button span { font-size: 12px; }.builder-actions .button-primary { width: 100%; }.footer { flex-direction: column; padding-bottom: 20px; } }
@media (max-width: 440px) { body { font-size: 16px; }.brand strong { font-size: 20px; }.brand small { font-size: 11px; }.brand-mark { width: 40px; height: 40px; }.hero-row { padding-top: 21px; }.hero-copy > p { font-size: 15px; }.hero-pills span { font-size: 12px; padding: 6px 9px; }.learning-strip { margin-top: 12px; }.strip-step small { display: none; }.mission-list { gap: 6px; }.mission-item { padding: 7px; }.mission-item-copy strong { font-size: 14px; }.mission-item-copy small { font-size: 11px; }.mission-item-state { display: none; }.mission-number { width: 27px; height: 27px; }.simulation-top { display: block; }.direction-badge { margin-top: 8px; }.command-card { gap: 6px; padding-inline: 6px; }.command-glyph { width: 29px; height: 29px; }.command-copy strong { font-size: 15px; }.command-copy small { font-size: 11px; }.command-controls { gap: 2px; }.icon-button { width: 30px; height: 30px; }.builder-tip { font-size: 11px; }.result-card { align-items: flex-start; flex-wrap: wrap; }.result-card .button { margin-left: 47px; } }
@media (max-width: 980px) { .workspace-grid { grid-template-columns: minmax(0, 1fr); } .mission-sidebar { min-width: 0; } .mission-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .play-settings { grid-template-columns: 1fr; gap: 14px; } .settings-title p { max-width: none; } }
@media (max-width: 720px) { .play-settings { padding: 17px 15px; margin-bottom: 22px; border-radius: 22px; } .map-grid { --map-gap: 4px; grid-template-rows: repeat(var(--map-rows, 4), minmax(53px, 1fr)); } .robot-token, .mini-robot { width: 35px; height: 35px; } .robot-direction { width: 20px; height: 20px; right: -5px; top: -6px; } .robot-direction .icon { width: 14px; height: 14px; } .carried-book { right: -5px; width: 20px; height: 20px; } .simulation-controls { gap: 6px; } .simulation-controls .button { padding-inline: 10px; } .playback-count { width: 100%; margin: 2px 0 0; } .read-mission { margin-left: 0; } }
@media (max-width: 720px) { .mission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .settings-toggles { display: grid; grid-template-columns: 1fr 1fr; } .setting-button { font-size: 13px; padding-inline: 8px; } .setting-button:last-child { grid-column: 1 / -1; } .settings-sliders { gap: 8px; } .volume-control { width: 100%; } .volume-control input { flex: 1; } .icon-button { width: 44px; height: 44px; } .command-index { width: 17px; flex: none; } .command-glyph { width: 25px; flex: none; } .command-copy strong { font-size: 14px; line-height: 1.2; } .command-card { gap: 4px; } .command-controls { gap: 2px; } .builder-top { flex-wrap: wrap; gap: 8px; } .map-legend { gap: 10px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } .celebration-layer { display: none; } }

/* Peta petualangan, pertanyaan konsep, dan catatan lokal. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding-bottom: 6px; }
.stage-map { margin: 28px 0; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-intro h2 { margin: 3px 0 0; font: 700 32px/1.1 'Baloo 2', sans-serif; }
.section-intro > p { margin: 0 0 3px; color: var(--muted); font-size: 15px; }
.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stage-card { --stage-color: #1e40af; --stage-soft: #eaf2ff; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 3px solid #bccce6; border-radius: 24px; background: #fff; box-shadow: var(--shadow-small); }
.stage-2 { --stage-color: #6a3ab1; --stage-soft: #f1edff; }
.stage-3 { --stage-color: #9b306e; --stage-soft: #fff0f8; }
.stage-card.is-current-stage { border-color: var(--stage-color); }
.stage-card.is-complete { border-color: #13826d; }
.stage-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-tag { display: inline-flex; padding: 4px 10px; border-radius: 8px; background: var(--stage-soft); color: var(--stage-color); font: 700 13px 'Baloo 2', sans-serif; letter-spacing: .6px; }
.stage-state { color: var(--muted); font-size: 13px; font-weight: 700; }
.is-complete .stage-state { color: #075d46; }
.stage-card h3 { margin: 13px 0 5px; font: 700 25px/1.12 'Baloo 2', sans-serif; }
.stage-card > p { flex: 1; margin-bottom: 16px; font-size: 15px; color: var(--muted); }
.stage-path { position: relative; display: flex; justify-content: space-between; gap: 8px; margin: 1px 0 18px; }
.stage-path::before { position: absolute; content: ''; top: 23px; left: 20px; right: 20px; height: 3px; background: #dbe7fb; }
.stage-node { position: relative; flex: none; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0; border: 2px solid #cbdaf0; border-radius: 50%; background: #f7faff; color: var(--stage-color); font: 700 20px 'Baloo 2', sans-serif; cursor: pointer; }
.stage-node.is-active { border-color: var(--stage-color); background: var(--stage-soft); box-shadow: 0 0 0 4px var(--stage-soft); }
.stage-node.is-done { border-color: #13826d; background: var(--green-soft); color: #075d46; }
.stage-node:disabled { color: #64748b; background: #f1f5f9; cursor: not-allowed; }
.stage-node:hover:not(:disabled) { transform: translateY(-2px); }
.stage-reward { display: flex; align-items: center; gap: 7px; min-height: 42px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.stage-reward .icon { flex: none; }
.is-complete .stage-reward { color: #075d46; }
.stage-launch { width: 100%; border-color: var(--stage-color); color: var(--stage-color); background: var(--stage-soft); }
.stage-launch:disabled { color: var(--muted); border-color: #cbdaf0; background: #f1f5f9; opacity: 1; font-size: 14px; }
.mission-sidebar { max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin; }
.mission-list { display: block; }
.mission-group + .mission-group { margin-top: 18px; }
.mission-group h3 { display: flex; justify-content: space-between; align-items: start; gap: 7px; margin: 0 2px 8px; color: var(--muted); font: 700 14px/1.25 'Baloo 2', sans-serif; }
.mission-group h3 small { flex: none; color: var(--blue-dark); font-size: 13px; }
.mission-group-list { display: grid; gap: 7px; }
.mission-objective { display: flex; align-items: start; gap: 7px; margin-top: 10px; color: var(--blue-dark); font-size: 14px; }
.mission-objective .icon { flex: none; margin-top: 2px; }
.map-cell.has-wall { background: #e7e9f2; border-color: #b6bbce; }
.wall-object { color: #535c79; }
.dot-wall { border-radius: 2px; background: #67718e; }
.map-legend { flex-wrap: wrap; }
.reflection-panel { margin-top: 18px; padding: 18px; border: 2px solid #d8cef9; border-radius: 18px; background: #faf8ff; }
.reflection-heading { display: flex; align-items: start; gap: 10px; }
.reflection-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--purple-soft); color: #6a3ab1; }
.reflection-heading .overline { color: #6a3ab1; font-size: 11px; }
.reflection-heading h3 { margin: 4px 0 0; font: 700 21px/1.25 'Baloo 2', sans-serif; }
.reflection-choices { display: grid; gap: 9px; margin-top: 16px; }
.reflection-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 12px; border: 2px solid #d8d6e9; border-radius: 13px; color: var(--ink); background: #fff; font-size: 16px; text-align: left; cursor: pointer; }
.reflection-choice > span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #6a3ab1; background: var(--purple-soft); font-weight: 700; }
.reflection-choice:hover:not(:disabled), .reflection-choice.is-selected { border-color: #7856d6; background: var(--purple-soft); }
.reflection-choice.is-correct { border-color: #13826d; background: var(--green-soft); color: #075d46; }
.reflection-choice.is-correct > span { background: #13826d; color: #fff; }
.reflection-choice:disabled { cursor: default; }
.reflection-feedback { display: flex; align-items: start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.reflection-feedback .icon { flex: none; margin-top: 2px; }
.reflection-feedback p { margin: 0; }
.reflection-feedback.is-correct { color: #075d46; }
.learning-journal { margin-bottom: 28px; overflow: hidden; }
.learning-journal > summary { display: flex; align-items: center; gap: 12px; min-height: 83px; padding: 20px 24px; color: var(--blue-dark); background: #f6faff; cursor: pointer; list-style: none; }
.learning-journal > summary::-webkit-details-marker { display: none; }
.learning-journal > summary:focus-visible { outline: 4px solid #d958a0; outline-offset: -5px; }
.learning-journal > summary > .icon { flex: none; }
.learning-journal summary strong, .learning-journal summary small { display: block; }
.learning-journal summary strong { font: 700 24px/1.2 'Baloo 2', sans-serif; }
.learning-journal summary small { margin-top: 3px; font-size: 14px; color: var(--muted); }
.summary-chevron { margin-left: auto; }
.learning-journal[open] .summary-chevron { transform: rotate(180deg); }
.journal-body { padding: 24px; border-top: 2px solid var(--border); }
.learning-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.learning-stats > div { padding: 16px; border: 2px solid var(--border); border-radius: 16px; background: #f8fbff; }
.learning-stats strong { display: block; color: var(--blue-dark); font: 700 30px/1.1 'Baloo 2', sans-serif; }
.learning-stats span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.journal-body > h3 { margin: 24px 0 12px; font: 700 23px/1.1 'Baloo 2', sans-serif; }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.badge-item { display: flex; flex-wrap: wrap; align-items: start; gap: 10px; min-width: 0; padding: 16px; border: 2px dashed #cbd5e1; border-radius: 18px; background: #f8fafc; }
.badge-item.is-earned { border-style: solid; border-color: #e8c56f; background: #fff8e3; }
.badge-symbol { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--muted); background: #e2e8f0; }
.is-earned .badge-symbol { color: #845500; background: #ffe5a2; }
.badge-item > div { flex: 1; min-width: 100px; }
.badge-item strong { font: 700 19px/1.15 'Baloo 2', sans-serif; }
.badge-item p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.badge-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px; color: var(--muted); background: #e2e8f0; font-size: 12px; font-weight: 700; }
.is-earned .badge-status { color: #755000; background: #ffe5a2; }
.concept-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.concept-notes li { display: flex; align-items: start; gap: 10px; padding: 15px; border: 2px solid var(--border); border-radius: 15px; }
.concept-notes li > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); color: #075d46; }
.concept-notes strong { font: 700 18px/1.2 'Baloo 2', sans-serif; }
.concept-notes p { margin: 5px 0; font-size: 15px; color: var(--muted); }
.concept-notes small { font-size: 13px; color: #6a3ab1; }
.journal-empty { padding: 16px; border-radius: 14px; background: var(--yellow-soft); color: #624500; }
.journal-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--green-soft); }
.journal-next p { flex: 1; min-width: 180px; margin: 0; color: #075d46; }
.journal-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
#help-dialog { width: min(620px, calc(100% - 30px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 25px; border: 3px solid var(--ink); border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 20px 60px #0f172a40; }
#help-dialog::backdrop { background: #182f5e99; }
.help-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.help-heading h2 { margin: 0; font: 700 29px/1.1 'Baloo 2', sans-serif; }
.help-heading button { flex: none; }
.help-steps { margin: 20px 0; padding-left: 26px; }
.help-steps li { margin-bottom: 13px; padding-left: 3px; }
.help-steps li::marker { color: var(--blue-dark); font-weight: 700; }
.help-example { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 18px; padding: 16px; border: 2px solid #e8c56f; border-radius: 15px; background: var(--yellow-soft); }
.help-example strong { width: 100%; font: 700 20px 'Baloo 2', sans-serif; }
.help-example span { padding: 8px 10px; border-radius: 9px; background: #fff; font-weight: 700; }
.help-example p { width: 100%; margin: 0; font-size: 14px; color: #624500; }
@media (max-width: 1100px) { .stage-card { padding: 17px; } .stage-card h3 { font-size: 23px; } .mission-heading { display: block; } .mission-heading .concept-chip { margin-top: 10px; } }
@media (max-width: 980px) { .mission-sidebar { position: static; max-height: none; overflow: visible; } .mission-group-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mission-item-state { display: none; } .stage-card { padding: 15px; } .stage-node { min-width: 44px; height: 44px; } .stage-path { gap: 5px; } .stage-path::before { top: 22px; } .stage-card > p { font-size: 14px; } .stage-reward { font-size: 12px; } .badge-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .section-intro { display: block; } .section-intro > p { margin-top: 6px; } .stage-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .stage-card { padding: 19px; } .stage-card h3 { font-size: 25px; } .stage-card > p { font-size: 15px; } .stage-path { max-width: 330px; width: 100%; } .stage-reward { min-height: 30px; font-size: 13px; } .stage-node { min-width: 48px; height: 48px; } .stage-path::before { top: 24px; } .mission-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mission-group h3 { font-size: 15px; } .hero-actions { align-items: stretch; } .hero-actions .button { flex: 1 1 auto; } .reflection-panel { padding: 14px; } .reflection-heading h3 { font-size: 19px; } .reflection-choice { font-size: 15px; } .learning-journal > summary { padding: 18px 15px; } .learning-journal summary strong { font-size: 22px; } .journal-body { padding: 16px; } .concept-notes { grid-template-columns: 1fr; } .learning-stats { gap: 7px; } .learning-stats > div { padding: 11px 8px; } .learning-stats strong { font-size: 26px; } .learning-stats span { font-size: 12px; } #help-dialog { padding: 20px 16px; } .help-heading h2 { font-size: 25px; } }