:root {
  --bg: #EAF4FF;
  --ink: #1D2B53;
  --muted: #64729A;
  --panel: #FFFFFF;
  --line: #DCE5F5;
  --primary: #4C7CF0;
  --primary-d: #3A63C9;
  --accent: #FF7A59;
  --green: #22B357;
  --green-d: #178A42;

  --c-sequence: #3B82F6;
  --c-debug: #EF4444;
  --c-loops: #F97316;
  --c-conditions: #8B5CF6;
  --c-drawing: #EC4899;
  --c-timing: #0EA5E9;
  --c-mines: #F59E0B;
  --c-functions: #D946EF;
  --c-colors: #6366F1;

  --b-motion: #3B6FE0;
  --b-motion-d: #2A55B8;
  --b-loop: #E0620D;
  --b-loop-d: #B04B08;
  --b-cond: #7C3AED;
  --b-cond-d: #5B21B6;
  --b-pen: #0E8A7A;
  --b-pen-d: #0A6559;

  --radius: 20px;
  --shadow: 0 6px 20px rgba(29, 43, 83, .08);
  --cell: 56px;
  --move-dur: 360ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, #FFF6D8 0, transparent 40%),
    radial-gradient(circle at 100% 20%, #E3F7EA 0, transparent 35%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.6;
}
button, select { font: inherit; color: inherit; }
svg { display: block; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(29, 43, 83, .07);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 4px;
  font-weight: 800; font-size: 20px;
}
.brand-face { width: 38px; height: 38px; }
.lvl-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lvl-title { font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.top-actions select, .speed select {
  border: 2px solid var(--line); border-radius: 12px; background: #fff;
  padding: 5px 10px; cursor: pointer; font-weight: 600;
}
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--line); background: #fff; border-radius: 12px;
  padding: 5px 10px; cursor: pointer; font-weight: 700;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn.muted { color: var(--muted); }
.icon-btn.danger:hover { border-color: var(--c-debug); color: var(--c-debug); }

.tag {
  display: inline-block; flex: none;
  padding: 2px 12px; border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 13px;
  background: var(--cc, var(--primary));
}
.c-sequence { --cc: var(--c-sequence); }
.c-debug { --cc: var(--c-debug); }
.c-loops { --cc: var(--c-loops); }
.c-conditions { --cc: var(--c-conditions); }
.c-drawing { --cc: var(--c-drawing); }
.c-timing { --cc: var(--c-timing); }
.c-mines { --cc: var(--c-mines); }
.c-functions { --cc: var(--c-functions); }
.c-colors { --cc: var(--c-colors); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 14px; padding: 10px 18px;
  font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn-run { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-d); min-width: 120px; font-size: 18px; }
.btn-run.stopping { background: var(--c-debug); box-shadow: 0 4px 0 #B91C1C; }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); }
.btn-soft { background: #F1F5FF; color: var(--ink); box-shadow: none; font-size: 14px; padding: 6px 14px; }
.btn-play { background: var(--accent); color: #fff; font-size: 22px; padding: 14px 40px; box-shadow: 0 5px 0 #D85A3B; border-radius: 18px; }
:focus-visible { outline: 3px solid #FFC53D; outline-offset: 2px; }

/* ---------- accounts ---------- */
.auth { display: grid; place-items: start center; padding: 24px 16px 48px; }
.auth-card {
  width: min(420px, 100%); background: #fff; border-radius: 26px;
  padding: 22px 22px 18px; box-shadow: var(--shadow); text-align: center;
}
.auth-card .hero-robot { width: 96px; height: 96px; }
.auth-card h1 { margin: 4px 0 0; font-size: 32px; }
.auth-card .tagline { font-size: 16px; margin-bottom: 14px; }
.auth-card .lang-chips { margin-bottom: 16px; }
.auth-tabs { display: flex; background: #F1F5FF; border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.auth-tab {
  flex: 1; border: 0; background: none; border-radius: 10px; padding: 8px;
  font-weight: 800; cursor: pointer; color: var(--muted);
}
.auth-tab.sel { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(29, 43, 83, .1); }
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.auth-form input {
  font: inherit; font-size: 17px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: #FBFCFF;
}
.auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(76, 124, 240, .2); }
.auth-error { min-height: 1.4em; margin: 0; color: #C81E1E; font-weight: 700; font-size: 14px; }
.auth-error:empty { min-height: 0; }
.auth-form .btn-play { font-size: 19px; padding: 12px; }
.auth-form .btn-play:disabled { opacity: .6; cursor: wait; }
.auth-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding-inline-start: 10px; font-weight: 800; font-size: 14px;
  border-inline-start: 2px solid var(--line);
}
.sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.sync-dot.saving { background: #F5B300; animation: blink 1s ease-in-out infinite; }
.sync-dot.error { background: var(--c-debug); }
body.booting main { visibility: hidden; }

/* ---------- home ---------- */
.home { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.hero { text-align: center; padding: 12px 0 28px; }
.hero-robot { width: 130px; height: 130px; margin: 0 auto; animation: float 3s ease-in-out infinite; }
.hero h1 { font-size: clamp(34px, 6vw, 52px); margin: 6px 0 0; letter-spacing: -.5px; }
.tagline { font-size: 18px; color: var(--muted); margin: 4px 0 18px; }
.lang-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.lang-chip {
  border: 2px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 18px; cursor: pointer; font-weight: 700;
}
.lang-chip.sel { background: var(--ink); border-color: var(--ink); color: #fff; }

.level-map { display: grid; gap: 22px; }
.group-title {
  display: inline-block; margin: 0 0 10px; padding: 3px 16px; border-radius: 999px;
  color: #fff; background: var(--cc); font-size: 16px;
}
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lvl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 0; border-radius: 18px; padding: 14px 10px 12px;
  box-shadow: var(--shadow); border-top: 6px solid var(--cc);
  cursor: pointer; transition: transform .15s;
}
.lvl:hover:not(.locked) { transform: translateY(-3px); }
.lvl-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cc); color: #fff; font-weight: 800; font-size: 20px;
}
.lvl-name { font-weight: 700; }
.lvl-stars { letter-spacing: 2px; color: #D7DEEC; font-size: 18px; }
.lvl-stars .on { color: #FFC53D; }
.lvl.locked { opacity: .55; cursor: not-allowed; }
.lvl.locked .lvl-num { background: #C9D2E6; }

/* ---------- game layout ---------- */
.game {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(170px, 220px) minmax(0, 1fr);
  gap: 16px; padding: 16px; max-width: 1440px; margin: 0 auto;
  align-items: start;
}
.panel { background: var(--panel); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.panel h2 { font-size: 17px; margin: 0 0 10px; }

.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bubble {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 18px; padding: 10px 14px;
  box-shadow: var(--shadow); min-height: 62px;
  border-inline-start: 6px solid var(--primary);
  font-weight: 600; font-size: 16px;
}
.bubble-face { width: 42px; height: 42px; flex: none; }
.bubble.pop { animation: pop .3s ease-out; }
.bubble.good { border-color: var(--green); background: #EAFBF0; }
.bubble.bad { border-color: var(--c-debug); background: #FFF0F0; }
.bubble.warn { border-color: #F5B300; background: #FFF8E1; }
.bubble.hint { border-color: var(--c-conditions); background: #F4F0FF; }
.bubble.run { border-color: var(--green); }

.board-wrap {
  background: #fff; border-radius: var(--radius); padding: 8px;
  box-shadow: var(--shadow); display: flex; justify-content: center;
}
#board {
  direction: ltr; position: relative;
  width: calc(var(--cell) * var(--cols));
  height: calc(var(--cell) * var(--rows));
  border-radius: 14px; overflow: hidden;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
}
.tile.grass {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, rgba(0, 80, 20, .12) 0 2px, transparent 3px),
    #84D48F;
}
.tile.grass:nth-child(2n) { background-color: #7FCE8A; }
.tile.bush::after {
  content: ''; display: block; width: 56%; height: 56%; margin: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #63C46B, #2F8A3E);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}
.tile.flower::after {
  content: ''; display: block; width: 22%; height: 22%; margin: 39%;
  border-radius: 50%; background: #FFD166;
  box-shadow: 0 -7px 0 #FF8FAB, 0 7px 0 #FF8FAB, 7px 0 0 #FF8FAB, -7px 0 0 #FF8FAB;
}
.tile.path {
  background: #F6E5B8;
  box-shadow: inset 0 0 0 1px rgba(170, 125, 50, .18);
}

.ent {
  position: absolute; left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));
  pointer-events: none;
}
.ent svg { width: 100%; height: 100%; }
.flag { z-index: 1; }
.flag-cloth { transform-origin: 40px 28px; animation: wave 1.4s ease-in-out infinite; }
.gem { z-index: 2; transition: opacity .35s, scale .35s, translate .35s; }
.gem .gem-g { animation: bob 1.6s ease-in-out infinite; transform-origin: center; }
.gem.taken { opacity: 0; scale: 1.6; translate: 0 -30%; }
.robot {
  z-index: 3;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) rotate(var(--rot, 0deg));
  transition: transform var(--move-dur) ease-in-out;
}
.robot.instant { transition: none; }
.robot-inner { width: 100%; height: 100%; padding: 6%; }

/* adventure tiles */
.tile.water {
  background:
    radial-gradient(ellipse 30% 12% at 30% 35%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 30% 12% at 70% 70%, rgba(255, 255, 255, .45), transparent 70%),
    #4FB6E8;
  background-size: 100% 100%;
  animation: ripple 2.4s ease-in-out infinite alternate;
}
.item { z-index: 2; transition: opacity .35s, scale .35s, translate .35s; }
.item > div { position: absolute; inset: 0; display: none; }
.item.mode-q .i-q, .item.mode-mine .i-mine, .item.mode-gem .i-gem { display: grid; }
.i-q {
  place-items: center; margin: 22%; border-radius: 50%;
  background: #E9D29A; color: #8A6420; font-weight: 800;
  font-size: calc(var(--cell) * .34); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.i-gem .gem-g { animation: bob 1.6s ease-in-out infinite; transform-origin: center; }
.mine-led { animation: blink 1s ease-in-out infinite; }
.item.mode-q { animation: pop .3s ease-out; }
.item.taken { opacity: 0; scale: 1.6; translate: 0 -30%; }
.item.boom .i-mine { animation: boom .7s ease-out forwards; }
.robot.shaken .robot-inner { animation: shake .3s 2; }
.door { z-index: 2; }
.door-bars {
  position: absolute; inset: 6% 14%; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #8B3A2E 0 14%, #C0563F 14% 28%);
  box-shadow: 0 0 0 3px #5C2A22 inset, 0 3px 0 rgba(0, 0, 0, .2);
  transform-origin: top; transition: transform .25s, opacity .25s;
}
.door.open .door-bars { transform: scaleY(.18); opacity: .55; }
.door-count {
  position: absolute; top: 3%; right: 3%; min-width: 1.6em; padding: 0 .3em;
  border-radius: 999px; background: #fff; color: #B42318; text-align: center;
  font-weight: 800; font-size: calc(var(--cell) * .24); line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.door.open .door-count { color: var(--green-d); }
.portal { z-index: 1; color: #8B5CF6; padding: calc(var(--cell) * .06); }
.portal.p1 { color: #F97316; }
.portal-spin { transform-box: fill-box; transform-origin: center; animation: spin 3s linear infinite; }
/* color flags, buttons, barriers */
.c-red { --col: #E11D48; --col-d: #9F1239; --col-l: #FFE4E6; }
.c-blue { --col: #2563EB; --col-d: #1E3A8A; --col-l: #DBEAFE; }
.cflag .flag-cloth { fill: var(--col); }
.flag-num {
  position: absolute; top: 4%; right: 6%; min-width: 1.5em; line-height: 1.5;
  border-radius: 999px; background: var(--col); color: #fff; text-align: center;
  font-weight: 800; font-size: calc(var(--cell) * .24); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.cflag.reached { filter: drop-shadow(0 0 6px var(--col)); }
.cflag.reached .flag-num { background: var(--green); }
.cflag.reached .flag-num::after { content: ' ✓'; }
.cflag.reached::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  border: 3px solid var(--col); opacity: .5; animation: pop .4s ease-out;
}
.cbutton { z-index: 1; display: grid; place-items: center; }
.cbutton span {
  width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--col);
  box-shadow: 0 0 0 4px var(--col-l), 0 5px 0 var(--col-d);
  transition: transform .15s, box-shadow .15s;
}
.cbutton.on span { transform: translateY(3px); box-shadow: 0 0 0 4px var(--col-l), 0 2px 0 var(--col-d), 0 0 12px var(--col); }
.gate { z-index: 2; }
.gate-bars {
  position: absolute; inset: 8%; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--col) 0 18%, var(--col-l) 18% 30%);
  box-shadow: inset 0 0 0 3px var(--col-d);
  transition: opacity .25s, transform .25s;
}
.gate.open .gate-bars { opacity: .18; transform: scale(.85); }
.robot[data-light="red"] .antenna { fill: #E11D48; }
.robot[data-light="blue"] .antenna { fill: #2563EB; }
.robot[data-light="unknown"] .antenna { fill: #94A3B8; }
.robot[data-light] .antenna { filter: drop-shadow(0 0 4px currentColor); }

.testbar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 14px; padding: 6px 14px;
  box-shadow: var(--shadow); font-weight: 700; font-size: 14px;
}
.testbar > span:first-child { margin-inline-end: 4px; }
.tdot { width: 14px; height: 14px; border-radius: 50%; background: #E2E8F0; }
.tdot.cur { box-shadow: 0 0 0 3px #C7D2FE; }
.tdot.ok { background: var(--green); }
.tdot.fail { background: var(--c-debug); }

/* drawing paper (turtle mode) */
#board.paper-board {
  width: var(--paper); height: var(--paper);
  background: #FFFDF7; box-shadow: inset 0 0 0 2px var(--line);
}
.paper { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper .target line { stroke: #CBD5E1; stroke-width: 10; stroke-linecap: round; opacity: .75; }
.paper .ink line { stroke-width: 4; stroke-linecap: round; }
.robot.turtle {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: calc(var(--paper) / 9); height: calc(var(--paper) / 9);
  transform: translate(calc(var(--x) * var(--unit)), calc(var(--y) * var(--unit))) translate(-50%, -50%) rotate(var(--rot, 0deg));
  opacity: .92;
}
.robot.turtle svg { width: 100%; height: 100%; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.speed { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-weight: 700; color: var(--muted); font-size: 14px; }
.stage-extra { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- toolbox ---------- */
.toolbox { position: sticky; top: 76px; transition: background .2s, box-shadow .2s; }
.toolbox.trash { background: #FFF0F0; box-shadow: 0 0 0 3px var(--c-debug); }
.tools { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.small-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
body.running .toolbox { opacity: .5; pointer-events: none; }

/* ---------- blocks ---------- */
.block {
  --bc: var(--b-motion); --bcd: var(--b-motion-d);
  color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 12px; user-select: none; -webkit-user-select: none;
}
.b-repeat, .b-until { --bc: var(--b-loop); --bcd: var(--b-loop-d); }
.b-if, .b-ifelse { --bc: var(--b-cond); --bcd: var(--b-cond-d); }
.b-penup, .b-pendown, .b-color { --bc: var(--b-pen); --bcd: var(--b-pen-d); }
.b-wait { --bc: #0E7490; --bcd: #155E75; }
.b-call { --bc: #C026D3; --bcd: #86198F; }

.bhead {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; min-height: 42px;
  background: var(--bc); border-radius: 12px;
  box-shadow: 0 3px 0 var(--bcd);
  cursor: pointer; position: relative;
}
.bicon { width: 22px; height: 22px; flex: none; }
.bicon svg { width: 100%; height: 100%; }
.blabel { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.4; }
.chip {
  display: inline-block; border: 0; border-radius: 999px;
  background: #fff; color: var(--bcd); font-weight: 800;
  padding: 1px 10px; font-size: 14px; line-height: 1.6;
}
button.chip { cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
button.chip:hover { background: #FFF7D6; }
.chip-c { padding: 3px 5px; line-height: 0; }
.swatch {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  vertical-align: middle; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15);
}
.badge { font-size: 12px; background: rgba(0, 0, 0, .22); border-radius: 999px; padding: 0 8px; }
.badge:empty { display: none; }
.del {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .18); color: #fff;
  font-size: 13px; cursor: pointer; display: grid; place-items: center;
  opacity: .75;
}
.del:hover { background: rgba(0, 0, 0, .35); opacity: 1; }

.container { background: var(--bc); box-shadow: 0 3px 0 var(--bcd); }
.container > .bhead { box-shadow: none; border-radius: 12px 12px 0 0; }
.container > .belse { border-radius: 0; min-height: 34px; padding-block: 4px; cursor: default; }
.bbody {
  margin-inline-start: 16px; background: #F7F9FE;
  border-start-start-radius: 10px; border-end-start-radius: 10px;
  padding: 4px 6px; min-height: 34px;
}
.bfoot { height: 14px; }

.tool { cursor: grab; }
.tool .bhead { cursor: grab; }
.tool.container .bbody { min-height: 12px; padding: 0; }
.tool:hover .bhead { filter: brightness(1.08); }
.tool:active { cursor: grabbing; }

.pop { animation: pop .3s ease-out; }
.drag-src { opacity: .35; }

/* run highlights */
.bhead.active { outline: 4px solid #FFC53D; outline-offset: 1px; z-index: 1; }
.bhead.yes { outline-color: #34D399; }
.bhead.no { outline-color: #CBD5E1; }
.bhead.error { outline: 4px solid #FF3B3B; outline-offset: 1px; animation: shake .4s; }

/* ---------- program ---------- */
.program-panel { display: flex; flex-direction: column; min-height: 360px; max-height: calc(100vh - 100px); }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.count { font-size: 13px; color: var(--muted); font-weight: 600; }
.panel-head .icon-btn { margin-inline-start: auto; font-size: 13px; }
.program {
  flex: 1; overflow: auto; display: flex; flex-direction: column;
  background: #F7F9FE; border-radius: 14px; padding: 8px 10px;
  border: 2px dashed var(--line);
}
.program > .blist { flex: 1; display: flex; flex-direction: column; }
.program > .blist > .slot.end { flex: 1; min-height: 60px; }
body.running .program { pointer-events: none; }
.fn-area { display: flex; flex-direction: column; margin-top: 12px; }
.fn-head { font-size: 16px; margin: 0 0 6px; color: #A21CAF; }
.fn-program { flex: none; min-height: 150px; max-height: 40vh; background: #FDF4FF; border-color: #F5D0FE; }
.unlock {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px; color: var(--muted); font-size: 14px; cursor: pointer;
}
.unlock input { width: 18px; height: 18px; accent-color: var(--primary); }

.slot { position: relative; height: 8px; border-radius: 6px; cursor: text; transition: height .12s, background .12s; }
.slot.end { min-height: 26px; height: auto; }
.slot .ph { display: block; padding: 4px 8px; font-size: 13px; color: var(--muted); font-weight: 600; pointer-events: none; }
.slot.cursor::before {
  content: ''; position: absolute; inset-inline: 0; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: var(--accent); border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 122, 89, .25);
  animation: blink 1.1s ease-in-out infinite;
}
.slot.end.cursor::before { top: 2px; transform: none; }
.slot.end.cursor .ph { padding-top: 10px; }
body.dragging .slot { height: 18px; background: rgba(76, 124, 240, .08); }
body.dragging .slot.end { min-height: 34px; }
.slot.over { background: rgba(255, 122, 89, .3) !important; }

/* ---------- picker ---------- */
.picker {
  position: absolute; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px;
  background: #fff; border-radius: 14px; padding: 8px;
  box-shadow: 0 10px 30px rgba(29, 43, 83, .2);
  animation: pop .15s ease-out;
}
.picker-opt {
  min-width: 42px; padding: 7px 12px; border: 0; border-radius: 10px;
  background: #F1F5FF; font-weight: 800; cursor: pointer;
}
.picker-opt:hover { background: #E1E9FF; }
.picker-opt.sel { background: var(--primary); color: #fff; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(29, 43, 83, .45);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  background: #fff; border-radius: 26px; padding: 26px 24px;
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  animation: pop .3s ease-out;
}
.modal h2 { margin: 6px 0 4px; font-size: 24px; }
.modal p { margin: 6px 0; font-size: 17px; }
.actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.card-tag { display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--cc); color: #fff; font-weight: 700; font-size: 13px; }
.card-robot { width: 90px; height: 90px; margin: 8px auto 0; animation: float 3s ease-in-out infinite; }
.card-example {
  margin: 14px auto 0; padding: 12px; background: #F7F9FE; border-radius: 14px;
  text-align: start; max-width: 330px;
}
.card-example .blist { display: flex; flex-direction: column; gap: 6px; }
.card-example .bhead { cursor: default; }
.stars { display: flex; justify-content: center; gap: 6px; font-size: 54px; line-height: 1; }
.star { color: #E2E8F0; animation: starIn .5s both; }
.star.on { color: #FFC53D; text-shadow: 0 3px 0 #E0A100; }
.win-note { color: var(--muted); }
.win-done { font-weight: 800; color: var(--green-d); }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; width: 100%; height: 100%; }

/* ---------- animations ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes wave { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { from { background-position: 0 0, 0 0; } to { background-position: 12px 4px, -10px -3px; } }
@keyframes boom {
  0% { transform: scale(1); filter: none; }
  30% { transform: scale(1.8); filter: drop-shadow(0 0 12px #FF9F1C) brightness(1.6); }
  100% { transform: scale(2.4); opacity: 0; filter: drop-shadow(0 0 20px #FF3B3B); }
}
@keyframes starIn { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .game { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); }
  .stage { grid-column: 1 / -1; }
  .toolbox { top: 70px; }
}
@media (max-width: 640px) {
  .topbar { padding: 6px 10px; gap: 8px; }
  .brand-name, #levelsBtn span, #logoutBtn span { display: none; }
  .user-chip { padding-inline-start: 6px; }
  #userName { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lvl-title { font-size: 15px; }
  .lvl-info .tag { display: none; }
  .game { grid-template-columns: 1fr; padding: 10px; gap: 12px; }
  .toolbox { position: static; }
  .tools { flex-direction: row; flex-wrap: wrap; }
  .tools .tool { flex: 1 1 140px; }
  .program-panel { max-height: none; }
  .btn-run { min-width: 0; }
  .speed { margin-inline-start: 0; }
}