:root {
  --bg: #fff6e0;
  --ink: #2d3436;
  --muted: #6b6f72;
  --purple: #6c5ce7;
  --up: #00b894;
  --right: #0984e3;
  --down: #e17055;
  --left: #a55eea;
  --loop: #f9b928;
  --loop-bg: #fff4cf;
  --grass: #9be58a;
  --grass-alt: #8ad97a;
  --wall: #4f9a4a;
  --card: #ffffff;
  --radius: 18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  overflow: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

.screen {
  display: none;
  height: 100dvh;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.screen.active { display: flex; flex-direction: column; }

/* ---------- Inicio ---------- */
#home {
  align-items: center;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #ffe9a8 0%, var(--bg) 60%);
}
.home-head { text-align: center; margin: 2vh 0 3vh; }
.logo { font-size: clamp(64px, 16vw, 120px); animation: float 2.4s ease-in-out infinite; }
.home-head h1 { margin: 0; font-size: clamp(32px, 7vw, 56px); color: var(--purple); letter-spacing: 0.5px; }
.home-head p { margin: 8px auto 0; max-width: 34ch; font-size: clamp(16px, 3.6vw, 22px); color: var(--muted); }

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 16px;
  width: min(100%, 640px);
}
.level-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: 24px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 0 #4b3fbf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.1s;
}
.level-btn.with-loops { background: #f39c12; box-shadow: 0 6px 0 #c47d0e; }
.level-btn .num { font-size: 36px; font-weight: 800; }
.level-btn .st { font-size: 18px; color: #ffe66d; letter-spacing: 2px; }
.level-btn.locked { background: #d5d2e8; box-shadow: 0 6px 0 #b3afcf; cursor: default; }
.level-btn:not(.locked):active { transform: translateY(4px); box-shadow: 0 2px 0 #4b3fbf; }

.link {
  margin: 28px 0 8px;
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  font-size: 14px;
}

/* ---------- Juego ---------- */
.topbar { display: flex; align-items: center; gap: 12px; }
.topbar h2 { flex: 1; margin: 0; font-size: clamp(18px, 4vw, 26px); text-align: center; color: var(--purple); }

.icon-btn {
  width: 52px;
  height: 52px;
  flex: none;
  border: none;
  border-radius: 16px;
  background: var(--card);
  font-size: 26px;
  box-shadow: 0 4px 0 #e6dcc4;
}
.icon-btn.small { width: 44px; height: 44px; font-size: 22px; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6dcc4; }

.hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 8px 14px 8px 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 #efe4c9;
}
.hint p { margin: 0; font-size: clamp(15px, 3.4vw, 19px); line-height: 1.3; }

.play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

.board-wrap {
  flex: 1 1 auto;
  min-height: 30vh;
  container-type: size;
  display: grid;
  place-items: center;
}
.board {
  --size: min(100cqw, calc(100cqh * var(--cols) / var(--rows)));
  width: var(--size);
  aspect-ratio: var(--cols) / var(--rows);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  border-radius: var(--radius);
  overflow: hidden;
  border: 5px solid #6fbf5f;
  font-size: calc(var(--size) / var(--cols) * 0.55);
  box-shadow: 0 6px 0 #5aa84b;
}
.cell { background: var(--grass); display: grid; place-items: center; line-height: 1; }
.cell.alt { background: var(--grass-alt); }
.cell.wall { background: var(--wall); }

.star { display: inline-block; animation: twinkle 1.6s ease-in-out infinite; }
.star.got { animation: collect 0.5s ease-out forwards; }

.robot {
  position: absolute;
  left: calc(var(--x) * 100% / var(--cols));
  top: calc(var(--y) * 100% / var(--rows));
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 1.15em;
  transition: left var(--move-ms, 360ms) ease-in-out, top var(--move-ms, 360ms) ease-in-out;
  z-index: 2;
}
.robot .bot { display: inline-block; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25)); }
.robot .bot.bump { animation: bump 0.5s ease-out; }

.coding { display: flex; flex-direction: column; gap: 10px; flex: none; }

.palette {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  background: #ffffffa8;
  border-radius: var(--radius);
}

.block {
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.1s;
  flex: none;
}
.block:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22); }
.block.up { background: var(--up); }
.block.right { background: var(--right); }
.block.down { background: var(--down); }
.block.left { background: var(--left); }
.block.loop { background: var(--loop); font-size: 34px; }
.block.small { width: 52px; height: 52px; border-radius: 14px; }

.arrow { display: grid; width: 62%; height: 62%; transform: rotate(var(--rot)); }
.arrow svg { width: 100%; height: 100%; fill: #fff; }

.program-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-weight: 700; }
.counter { font-size: 15px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--muted); }
.counter.full { background: #ffe0d6; color: #c0392b; }

.program {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px 0;
  padding: 10px 6px;
  min-height: 76px;
  max-height: 26dvh;
  overflow-y: auto;
  background: var(--card);
  border: 3px dashed #e3d6b4;
  border-radius: var(--radius);
}
.empty { margin: auto; color: var(--muted); font-size: 16px; text-align: center; }

.loopbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: var(--loop-bg);
  border: 4px solid var(--loop);
  max-width: 100%;
  cursor: pointer;
}
.loopbox.selected { border-style: dashed; box-shadow: 0 0 0 4px #ffe58a; animation: breathe 1.4s ease-in-out infinite; }
.loop-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.loop-head .label { flex: 1; white-space: nowrap; }
.loop-head { cursor: grab; }
.times, .del {
  border: none;
  border-radius: 10px;
  min-height: 36px;
  padding: 0 10px;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.times { background: var(--loop); color: #5a3d00; font-size: 16px; }
.del { background: #fff; color: #c0392b; }
.loop-body { display: flex; flex-wrap: wrap; gap: 6px 0; min-height: 52px; align-items: center; }
.drop { font-size: 14px; color: #a07d1c; padding: 0 6px; }

.block.active, .loopbox.active { outline: 5px solid #ffd32a; outline-offset: 2px; transform: scale(1.08); }
.block.bad { outline: 5px solid #e74c3c; outline-offset: 2px; animation: wiggle 0.4s 2; }
.pop { animation: pop 0.25s ease-out; }
.wiggle { animation: wiggle 0.4s; }

.controls { display: flex; gap: 10px; }
.btn {
  border: none;
  border-radius: 18px;
  min-height: 60px;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.btn.go { flex: 1; background: #20bf6b; color: #fff; }
.btn.warn { background: #ff7675; color: #fff; }
.btn.ghost { background: #fff; }

.btn.step { background: #74b9ff; color: #fff; padding: 0 16px; }
.btn:disabled { opacity: 0.35; pointer-events: none; }

.run-only { display: none; }
body.running .run-only { display: block; }
body.running .edit-only { display: none; }
body.running:not(.stepping) #run { opacity: 0.4; pointer-events: none; }
body.running.stepping #step { outline: 4px solid #ffd32a; outline-offset: 2px; }
body.running .palette, body.busy .palette, body.busy .controls, body.busy #help { opacity: 0.4; pointer-events: none; }

/* Huecos entre bloques: tocar uno mueve el cursor de inserción ahí */
.slot {
  align-self: stretch;
  width: 14px;
  min-height: 52px;
  margin: 0 -3px;
  border-radius: 6px;
  position: relative;
  flex: none;
  cursor: pointer;
}
.slot::after {
  content: '';
  position: absolute;
  inset: 6px 5px;
  border-radius: 3px;
}
.slot.caret::after { background: var(--purple); animation: blink 1s steps(1) infinite; }
.slot.drop-target::after { background: #20bf6b; inset: 2px 3px; animation: none; }
body.running .slot.caret::after { display: none; }

.block.small, .loop-head { touch-action: none; }
.block.dragging, .loopbox.dragging { opacity: 0.3; }
.drag-ghost {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  transform: translate(-50%, -60%) scale(1.1) rotate(-4deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
body.is-dragging { cursor: grabbing; }
.grip { color: #c49a1d; font-size: 18px; flex: none !important; }

#help { margin-left: auto; }
#help.pulse { background: #ffe66d; animation: glow 1.2s ease-in-out infinite; }
#mText { white-space: pre-line; }

/* Teléfonos angostos: que la paleta quepa en una fila y los controles no se corten */
@media (max-width: 480px) {
  .screen { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .hint { margin: 8px 0; }
  .play, .coding { gap: 8px; }
  .board-wrap { min-height: 22vh; }
  .palette { gap: 8px; padding: 8px; }
  .block { width: 56px; height: 56px; border-radius: 16px; }
  .block.loop { font-size: 28px; }
  .block.small { width: 46px; height: 46px; }
  .slot { min-height: 46px; }
  .loop-body { min-height: 46px; }
  .program { max-height: 22dvh; min-height: 66px; }
  .btn { min-height: 54px; font-size: 20px; padding: 0 14px; }
  .icon-btn { width: 46px; height: 46px; font-size: 23px; }
}

/* Tablet / horizontal: tablero a la izquierda, código a la derecha */
@media (orientation: landscape) and (min-width: 700px) {
  .play { flex-direction: row; }
  .board-wrap { flex: 1.15 1 0; min-height: 0; }
  .coding { flex: 1 1 0; min-height: 0; }
  .program { flex: 1; max-height: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hint { display: none; }
  .block { width: 56px; height: 56px; }
  .block.small { width: 46px; height: 46px; }
  .btn { min-height: 50px; }
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(45, 52, 54, 0.45);
  z-index: 10;
}
.modal.hidden { display: none; }
.card {
  width: min(100%, 420px);
  padding: 24px;
  border-radius: 28px;
  background: var(--card);
  text-align: center;
  animation: pop 0.3s ease-out;
}
.m-emoji { font-size: 72px; line-height: 1; }
.card h3 { margin: 10px 0 4px; font-size: 28px; color: var(--purple); }
.card p { margin: 8px 0 18px; font-size: 18px; line-height: 1.35; }
.m-stars { font-size: 52px; letter-spacing: 6px; color: #dcdde1; }
.m-stars .on { color: #ffc312; display: inline-block; animation: pop 0.4s ease-out backwards; animation-delay: var(--d); }
.m-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.m-btns .btn { flex: 1; font-size: 19px; }

.confetti {
  position: fixed;
  top: -40px;
  font-size: 28px;
  z-index: 20;
  pointer-events: none;
  animation: fall 2s linear forwards;
}

/* ---------- Animaciones ---------- */
@keyframes float { 50% { transform: translateY(-10px) rotate(-4deg); } }
@keyframes twinkle { 50% { transform: scale(0.85) rotate(10deg); } }
@keyframes collect { to { transform: scale(2) translateY(-30%); opacity: 0; } }
@keyframes bump {
  40% { transform: translate(calc(var(--bx) * 30%), calc(var(--by) * 30%)) rotate(-12deg); }
  70% { transform: translate(0, 0) rotate(8deg); }
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes wiggle { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes breathe { 50% { box-shadow: 0 0 0 8px #ffe58a88; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes glow { 50% { box-shadow: 0 0 0 8px #ffe66d88; } }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

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