:root {
  --bg: #e9f8ef;
  --panel: #ffffff;
  --ink: #193028;
  --muted: #61756d;
  --brand: #2eb872;
  --brand-dark: #188857;
  --accent: #ffcf4a;
  --danger: #e74c3c;
  --success: #31b66b;
  --shadow: 0 10px 24px rgba(16, 52, 39, .15);
  --soft-shadow: 0 6px 14px rgba(16, 52, 39, .10);
  --radius: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 18% 0%, #ffffff 0%, var(--bg) 48%, #d9f2e8 100%);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
  user-select: none;
}
button {
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled { opacity: .52; cursor: not-allowed; }

.game-shell {
  height: 100dvh;
  width: 100vw;
  max-width: 980px;
  margin: 0 auto;
  padding: 7px 7px calc(7px + var(--safe-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
}

.mission-card,
.algorithm-panel,
.map-card,
.bottom-hud,
.command-picker {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.mission-card {
  min-height: 54px;
  border-radius: var(--radius);
  padding: 7px 8px 7px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.mission-copy { min-width: 0; }
.mission-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 1px;
}
#levelKicker {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.world-badge {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45vw;
  background: color-mix(in srgb, var(--brand) 90%, white 10%);
  color: #fff;
  border-radius: 999px;
  padding: 3px 7px 3.5px;
  font-size: .64rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mission-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mission-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,207,74,.22);
  font-size: 1rem;
}
#levelTitle {
  min-width: 0;
  font-size: clamp(.86rem, 3.6vw, 1.12rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mini-btn {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  color: var(--ink);
  background: #eef8f2;
  font-size: .84rem;
  font-weight: 950;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}

.playfield {
  min-height: 0;
  display: flex;
  gap: 6px;
}
.algorithm-panel {
  flex: 0 0 clamp(72px, 20vw, 110px);
  min-width: 72px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.55);
  position: relative;
}
.algorithm-title {
  flex: 0 0 auto;
  padding: 7px 3px 5px;
  text-align: center;
  background: #193028;
  color: #fff;
  font-size: .67rem;
  font-weight: 1000;
  line-height: .98;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.algorithm-title span { font-size: .55rem; letter-spacing: .025em; opacity: .92; }
.algorithm-help {
  flex: 0 0 auto;
  padding: 4px 3px 5px;
  color: var(--muted);
  background: #f4fbf7;
  font-size: .50rem;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.algorithm-list {
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 4px 8px;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
}
.algorithm-list li { min-height: 32px; position: relative; }
.slot-btn {
  width: 100%;
  min-height: 32px;
  border-radius: 12px;
  background: rgba(237,247,241,.84);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 1000;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  position: relative;
  border: 1px solid rgba(25,48,40,.08);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.slot-btn::before {
  content: attr(data-step);
  position: absolute;
  left: 4px;
  top: 3px;
  color: rgba(25,48,40,.45);
  font-size: .48rem;
  font-weight: 1000;
}
.slot-btn.empty {
  background: rgba(255,255,255,.62);
  border-style: dashed;
  box-shadow: none;
}
.slot-btn.next-slot {
  background: rgba(255,207,74,.30);
  border: 2px solid rgba(255,207,74,.95);
  transform-origin: center;
}
@keyframes ctaPlus {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,185,20,.0)) brightness(1); }
  50% { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(255,185,20,.95)) brightness(1.14); }
}
.slot-btn.filled { background: #edf7f1; }
.slot-btn.active {
  background: var(--accent);
  color: #2c2300;
  transform: scale(1.045);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 0 0 4px rgba(255,207,74,.28);
}
.slot-btn.editing { outline: 3px solid rgba(46,184,114,.25); }
.slot-btn.just-written { animation: writePop .34s ease both; }
.slot-btn.error-line {
  background: #ffebe8;
  border-color: rgba(231,76,60,.72);
  animation: lineError .42s ease 0s 2;
}
.slot-placeholder {
  color: rgba(25,48,40,.42);
  font-size: 1rem;
  font-weight: 1000;
}
.slot-btn.next-slot .slot-placeholder { color: #7a5b00; font-size: 2rem; font-weight: 1000; }
.algorithm-list .cmd-icon { width: 22px; height: 22px; }
.cmd-text { letter-spacing: .02em; }

.map-card {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.55);
}
#gameCanvas { width: 100%; height: 100%; display: block; }
.toast {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(25,48,40,.90);
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  line-height: 1.15;
  text-align: center;
  transform: translateY(18px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }

.command-picker {
  position: fixed;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(2, 42px);
  grid-template-rows: repeat(2, 42px) 24px;
  gap: 6px;
  padding: 8px;
  border-radius: 17px;
  background: rgba(255,255,255,.97);
  border: 2px solid rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(16,52,39,.24);
  transform: translateY(-50%);
}
.command-picker::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,.97);
  transform: translateY(-50%) rotate(45deg);
  border-left: 2px solid rgba(255,255,255,.86);
  border-bottom: 2px solid rgba(255,255,255,.86);
}
.picker-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #eef8f2 100%);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 1000;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.09), 0 4px 9px rgba(0,0,0,.07);
}
.picker-close {
  grid-column: 1 / -1;
  width: 100%;
  height: 24px;
  border-radius: 10px;
  background: rgba(25,48,40,.07);
  color: rgba(25,48,40,.78);
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  font-weight: 1000;
  box-shadow: none;
}

.bottom-hud {
  border-radius: var(--radius);
  padding: 6px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
}
.feedback {
  min-height: 24px;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 850;
  font-size: .76rem;
  line-height: 1.12;
  padding: 0 2px;
}
.feedback[data-type="success"] { color: #0d6b3b; }
.feedback[data-type="error"] { color: #a43125; }
.control-bar {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto;
  gap: 7px;
  align-items: stretch;
}
.primary-btn {
  min-height: 46px;
  border-radius: 16px;
  font-size: .94rem;
  font-weight: 1000;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, white 22%) 0%, var(--brand) 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 8px 18px rgba(46,184,114,.26);
  animation: ctaBreath 2.2s ease-in-out infinite;
}
.next-action {
  background: linear-gradient(180deg, #ffe486 0%, var(--accent) 100%);
  color: #2b2100;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 8px 18px rgba(255,207,74,.28);
}
.secondary-actions {
  display: flex;
  gap: 5px;
}
.secondary-btn {
  min-height: 46px;
  min-width: 54px;
  border-radius: 14px;
  padding-inline: 9px;
  font-size: .72rem;
  font-weight: 900;
  color: rgba(25,48,40,.86);
  background: #edf7f1;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.09);
}

.cmd-label { font-size: 1.05rem; line-height: 1; }
.cmd-icon {
  width: 25px;
  height: 25px;
  display: inline-block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.cmd-a { mask-image: url('../assets/icons/command-a.svg'); -webkit-mask-image: url('../assets/icons/command-a.svg'); }
.cmd-m { mask-image: url('../assets/icons/command-m.svg'); -webkit-mask-image: url('../assets/icons/command-m.svg'); }
.cmd-i { mask-image: url('../assets/icons/command-i.svg'); -webkit-mask-image: url('../assets/icons/command-i.svg'); }
.cmd-d { mask-image: url('../assets/icons/command-d.svg'); -webkit-mask-image: url('../assets/icons/command-d.svg'); }

.hidden { display: none !important; }
body.icon-mode .cmd-label { display: none; }
body.text-mode .picker-btn .cmd-icon { display: none; }
body.icon-mode .picker-btn .cmd-icon { display: inline-block; }
body.icon-mode .picker-btn .cmd-label { display: none; }
body.text-mode .picker-btn .cmd-label { display: inline; }
body.icon-mode .algorithm-list .cmd-text { display: none; }
body.text-mode .algorithm-list .cmd-icon { display: none; }

body.is-running .algorithm-panel {
  box-shadow: 0 0 0 3px rgba(255,207,74,.22), var(--shadow);
}
body.is-success .map-card {
  box-shadow: 0 0 0 3px rgba(255,207,74,.30), var(--shadow);
}

.slot-btn:active,
.mini-btn:active,
.picker-btn:active,
.picker-close:active,
.primary-btn:active,
.secondary-btn:active {
  transform: translateY(1px) scale(.985);
}

@keyframes slotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,207,74,.46); }
  50% { box-shadow: 0 0 0 5px rgba(255,207,74,.10); }
}
@keyframes writePop {
  0% { transform: scale(.86); filter: brightness(1); }
  55% { transform: scale(1.10); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes lineError {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes ctaBreath {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@media (min-width: 720px) {
  .game-shell { padding: 12px; gap: 8px; }
  .mission-card { min-height: 64px; padding-inline: 16px 10px; }
  #levelTitle { font-size: 1.18rem; }
  .mission-icon { width: 30px; height: 30px; }
  .mini-btn { width: 42px; height: 42px; }
  .playfield { gap: 8px; }
  .algorithm-panel { flex-basis: 138px; }
  .algorithm-list li, .slot-btn { min-height: 40px; }
  .primary-btn { min-height: 52px; font-size: 1rem; }
  .secondary-btn { min-height: 52px; min-width: 72px; font-size: .86rem; }
  .feedback { font-size: .90rem; min-height: 28px; }
}

@media (max-width: 380px) {
  .algorithm-panel { flex-basis: 70px; }
  .secondary-btn { min-width: 48px; padding-inline: 6px; font-size: .66rem; }
  .top-actions { gap: 3px; }
  .mini-btn { width: 32px; height: 32px; }
}

@media (max-height: 670px) {
  .game-shell { gap: 4px; padding: 5px 6px calc(5px + var(--safe-bottom)); }
  .mission-card { min-height: 48px; padding-block: 5px; }
  .mission-icon { width: 22px; height: 22px; }
  #levelTitle { font-size: .84rem; }
  .world-badge { font-size: .58rem; }
  .algorithm-list { gap: 4px; padding-top: 5px; }
  .algorithm-list li, .slot-btn { min-height: 29px; }
  .primary-btn, .secondary-btn { min-height: 39px; }
  .bottom-hud { gap: 4px; padding: 5px; }
  .feedback { min-height: 20px; font-size: .70rem; }
}

/* v3.1: progreso visible y capa de logro con juice */
.world-progress {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 13px;
}
.progress-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .48rem;
  font-weight: 1000;
  background: rgba(25,48,40,.10);
  color: rgba(25,48,40,.48);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.progress-dot.done {
  background: var(--accent);
  color: #3a2b00;
}
.progress-dot.current {
  background: var(--brand);
  color: #fff;
  animation: progressBeat 1.2s ease-in-out infinite;
}
.progress-dot.locked { opacity: .58; }

.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
  padding: 12px 12px calc(12px + var(--safe-bottom));
  background: rgba(8, 24, 18, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.reward-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.reward-card {
  width: min(460px, 100%);
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 24px 18px 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,207,74,.36) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.98) 100%);
  box-shadow: 0 28px 70px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.75);
  transform: translateY(110%) scale(.96);
}
.reward-overlay.show .reward-card {
  animation: rewardEnter .46s cubic-bezier(.2, .95, .28, 1.08) forwards;
}
.reward-burst {
  position: absolute;
  inset: -70px -20px auto;
  height: 170px;
  background: conic-gradient(from 0deg, rgba(255,207,74,.0), rgba(255,207,74,.65), rgba(46,184,114,.28), rgba(116,192,252,.35), rgba(255,207,74,.0));
  opacity: .48;
  filter: blur(6px);
  animation: rewardSpin 5s linear infinite;
}
.reward-robbie {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #edf7f1);
  font-size: 2.4rem;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), 0 10px 22px rgba(0,0,0,.16);
  animation: robbyParty .82s ease-in-out .22s 2;
}
.reward-title {
  position: relative;
  margin: 4px 0 4px;
  font-size: clamp(1.55rem, 7vw, 2.15rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: #193028;
}
.reward-overlay.show .reward-title {
  animation: textPop .35s ease .32s both;
}
.reward-subtitle {
  position: relative;
  margin: 0 auto 10px;
  max-width: 92%;
  color: var(--muted);
  font-weight: 850;
  font-size: .95rem;
}
.reward-stars {
  position: relative;
  min-height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
}
.reward-star {
  font-size: 2.55rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 4px 0 rgba(0,0,0,.08), 0 10px 20px rgba(255,207,74,.24);
  transform: scale(.3) rotate(-18deg);
  opacity: 0;
}
.reward-overlay.show .reward-star {
  animation: starFill .42s cubic-bezier(.2, .95, .3, 1.3) var(--delay) forwards;
}
.reward-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 9px;
}
.reward-stat {
  border-radius: 15px;
  background: rgba(237,247,241,.94);
  padding: 8px 4px 7px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}
.reward-stat span {
  display: block;
  font-size: .62rem;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.reward-stat strong {
  display: block;
  margin-top: 1px;
  color: #193028;
  font-size: 1.18rem;
  line-height: 1;
}
.reward-meter {
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(25,48,40,.10);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.reward-meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .88s cubic-bezier(.25, .88, .22, 1.0);
}
.reward-bonus {
  margin: 9px auto 10px;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,207,74,.25);
  color: #624900;
  font-weight: 1000;
  font-size: .82rem;
  animation: bonusPop .36s ease .98s both;
}
.reward-progress-track {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 13px;
}
.reward-progress-dot {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  grid-template-rows: 14px 1fr;
  place-items: center;
  background: rgba(25,48,40,.08);
  color: rgba(25,48,40,.55);
  font-weight: 1000;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.07);
}
.reward-progress-dot small {
  font-size: .57rem;
  opacity: .78;
  line-height: 1;
  padding-top: 5px;
}
.reward-progress-dot b {
  font-size: .76rem;
  line-height: 1;
}
.reward-progress-dot.done {
  background: #fff0a8;
  color: #574000;
}
.reward-progress-dot.current {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.reward-next-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white 18%), var(--brand));
  font-size: 1.02rem;
  font-weight: 1000;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.15), 0 12px 24px rgba(46,184,114,.28);
  animation: ctaBreath 1.5s ease-in-out infinite;
}
body.reward-open .bottom-hud,
body.reward-open .mission-card,
body.reward-open .playfield {
  filter: saturate(.85) brightness(.95);
}

@media (min-width: 720px) {
  .reward-overlay { place-items: center; }
  .reward-card { width: min(500px, 92vw); }
  .world-progress { margin-top: 5px; }
  .progress-dot { width: 15px; height: 15px; font-size: .55rem; }
}

@media (max-height: 670px) {
  .reward-card { padding: 16px 14px 14px; border-radius: 22px; }
  .reward-robbie { width: 54px; height: 54px; font-size: 1.8rem; }
  .reward-stars { min-height: 39px; margin-bottom: 5px; }
  .reward-star { font-size: 2rem; }
  .reward-stats { margin: 6px 0; }
  .reward-stat { padding-block: 6px; }
  .reward-progress-dot { width: 34px; height: 34px; border-radius: 13px; }
  .reward-next-btn { min-height: 45px; }
}

@keyframes progressBeat {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes rewardEnter {
  0% { transform: translateY(110%) scale(.96); }
  72% { transform: translateY(-2%) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes rewardSpin {
  to { transform: rotate(360deg); }
}
@keyframes robbyParty {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-8px) rotate(-7deg); }
  50% { transform: translateY(0) rotate(6deg); }
  75% { transform: translateY(-5px) rotate(-4deg); }
}
@keyframes textPop {
  0% { opacity: 0; transform: translateY(8px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes starFill {
  0% { opacity: 0; transform: scale(.3) rotate(-18deg); filter: brightness(1); }
  60% { opacity: 1; transform: scale(1.25) rotate(8deg); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
}
@keyframes bonusPop {
  0% { opacity: 0; transform: translateY(8px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* v3.2: capa de experiencia completa: intro, menú, mini IDE y logro cinematográfico */
:root {
  --terminal: #10231d;
  --terminal-glow: rgba(46, 184, 114, .34);
}

.game-shell {
  padding: 6px 6px calc(6px + var(--safe-bottom));
  gap: 5px;
}

.mission-card {
  min-height: 48px;
  padding: 6px 7px 6px 10px;
  border-radius: 17px;
  gap: 7px;
}
.mission-meta { margin-bottom: 1px; gap: 5px; }
#levelKicker { font-size: .61rem; }
.world-badge { font-size: .58rem; padding: 2px 7px 3px; max-width: 40vw; }
.mission-icon { width: 23px; height: 23px; font-size: .98rem; border-radius: 8px; }
#levelTitle {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.02;
  font-size: clamp(.76rem, 3.2vw, 1.02rem);
}
.menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #eaf7f0);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 1000;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.09), var(--soft-shadow);
}
.menu-btn:active { transform: translateY(1px) scale(.985); }

.playfield { gap: 5px; }
.algorithm-panel {
  flex-basis: clamp(74px, 20vw, 106px);
  border-radius: 17px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.55);
}
.algorithm-title { padding: 7px 3px 5px; font-size: .62rem; }
.algorithm-title span { font-size: .52rem; }
.algorithm-help { padding: 3px 2px 4px; font-size: .48rem; }
.algorithm-list { padding: 5px 4px 5px; gap: 4px; }
.algorithm-list li, .slot-btn { min-height: 31px; }
.slot-btn { border-radius: 12px; }
.slot-btn.next-slot::after {
  content: '_';
  position: absolute;
  right: 8px;
  bottom: 5px;
  color: #806000;
  animation: cursorBlink .82s steps(1,end) infinite;
}

.code-tools {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  background: rgba(25,48,40,.06);
  border-top: 1px solid rgba(25,48,40,.08);
}
.code-tool {
  min-height: 31px;
  border-radius: 11px;
  background: #eef8f2;
  color: rgba(25,48,40,.92);
  display: grid;
  place-items: center;
  grid-template-rows: 15px 10px;
  font-weight: 1000;
  font-size: .86rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.code-tool span { font-size: .44rem; line-height: 1; font-weight: 900; }
.code-tool:disabled { opacity: .45; }

.map-card { border-radius: 18px; }
.bottom-hud {
  padding: 5px;
  gap: 5px;
  border-radius: 18px;
}
.feedback {
  min-height: 18px;
  font-size: .70rem;
  line-height: 1.05;
  padding: 0 3px;
  justify-content: center;
  text-align: center;
}
.control-bar { display: block; }
.primary-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 17px;
  font-size: .98rem;
  letter-spacing: .01em;
  text-transform: none;
}
.secondary-actions, .secondary-btn { display: none !important; }

/* Menú de juego */
.menu-overlay,
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(8,24,18,.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.menu-overlay.show,
.intro-overlay.show { opacity: 1; pointer-events: auto; }
.menu-card {
  width: min(420px, 100%);
  border-radius: 24px;
  padding: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.7);
  transform: translateY(18px) scale(.96);
  animation: popPanel .22s ease forwards;
}
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.menu-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.menu-close {
  width: 38px; height: 38px; border-radius: 13px;
  background: #eef8f2; color: var(--ink); font-size: 1.45rem; font-weight: 1000;
}
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.menu-item {
  min-height: 74px;
  border-radius: 17px;
  background: linear-gradient(180deg, #ffffff, #edf7f1);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  padding: 7px;
}
.menu-item strong { font-size: 1.3rem; line-height: 1; }
.menu-item span { font-size: .72rem; font-weight: 900; color: var(--muted); }
.danger-menu-btn {
  width: 100%;
  margin-top: 10px;
  min-height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(180deg, #f06f61, #e74c3c);
  font-weight: 950;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.confirm-reset {
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff2ef;
  border: 1px solid rgba(231,76,60,.18);
}
.confirm-reset p { margin: 0 0 8px; font-size: .83rem; font-weight: 850; color: #6d2d25; }
.confirm-reset div { display: flex; gap: 7px; }
.confirm-reset button {
  flex: 1;
  min-height: 38px;
  border-radius: 13px;
  font-weight: 950;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.confirm-reset button:last-child { color: #fff; background: #e74c3c; }

/* Intro jugable */
.intro-card {
  position: relative;
  width: min(510px, 100%);
  overflow: hidden;
  border-radius: 28px;
  padding: 22px 16px 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,207,74,.34), transparent 35%),
    radial-gradient(circle at 100% 25%, rgba(46,184,114,.25), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,247,241,.97));
  box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.8);
  transform: translateY(18px) scale(.96);
  animation: popPanel .28s ease forwards;
}
.intro-skip {
  position: absolute;
  top: 10px; right: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(25,48,40,.08);
  color: rgba(25,48,40,.82);
  font-size: .72rem;
  font-weight: 900;
}
.intro-code-rain,
.reward-code-rain {
  position: absolute;
  inset: 0;
  color: rgba(46,184,114,.11);
  font: 900 16px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  white-space: nowrap;
  transform: rotate(-18deg) translate(-20%, -20%);
  animation: codeRain 6s linear infinite;
  pointer-events: none;
}
.intro-logo {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
}
.intro-logo h1 { margin: 0; font-size: clamp(2rem, 10vw, 3rem); line-height: .9; letter-spacing: -.06em; }
.intro-logo p { margin: 5px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.1; font-weight: 850; }
.robbie-portrait {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ff6a5d 0%, #ee3f35 100%);
  border: 4px solid #fff;
  border-radius: 24px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 12px 25px rgba(0,0,0,.18);
}
.intro-robbie { width: 74px; height: 92px; animation: robbyHello 1.6s ease-in-out infinite; }
.robbie-portrait::before {
  content: '';
  position: absolute;
  left: 16%; right: 16%; top: 20%; height: 35%;
  border-radius: 14px;
  background: linear-gradient(180deg, #8be6ff, #48bed4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65);
}
.robbie-eye {
  position: absolute;
  top: 32%;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #193028;
  animation: robbyBlink 3.6s steps(1,end) infinite;
}
.robbie-eye.left { left: 39%; }
.robbie-eye.right { right: 39%; }
.robbie-smile {
  position: absolute;
  top: 47%;
  width: 24%; height: 11%;
  border-bottom: 3px solid #193028;
  border-radius: 0 0 999px 999px;
  z-index: 2;
}
.intro-stage {
  position: relative;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: stretch;
}
.intro-mini-ide {
  min-height: 122px;
  border-radius: 18px;
  padding: 10px 9px;
  background: #10231d;
  color: #d9ffe9;
  font: 800 .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.14);
}
.intro-mini-ide b { display: block; margin-bottom: 8px; color: #fff; font: 950 .72rem/1 system-ui; text-transform: uppercase; }
.intro-mini-ide span { display: block; opacity: 0; animation: terminalAppear .36s ease forwards; }
.intro-mini-ide span:nth-child(3) { animation-delay: .8s; }
.intro-mini-ide em { color: var(--accent); font-style: normal; }
.intro-mini-ide i { font-style: normal; animation: cursorBlink .8s steps(1,end) infinite; }
.intro-mini-map {
  position: relative;
  min-height: 122px;
  border-radius: 18px;
  background: linear-gradient(180deg, #e8fff2, #caefcf);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 10px 22px rgba(0,0,0,.10);
  overflow: hidden;
}
.intro-mini-map::before,
.intro-mini-map::after {
  content: '';
  position: absolute;
  background: #81909a;
  border-radius: 999px;
}
.intro-mini-map::before { left: 48%; top: 7%; bottom: 7%; width: 22px; }
.intro-mini-map::after { left: 8%; right: 8%; top: 50%; height: 22px; }
.intro-path {
  position: absolute;
  left: 28%; top: 73%;
  width: 44%; height: 4px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px);
  transform: rotate(-42deg);
  transform-origin: left center;
  opacity: 0;
  animation: pathDraw .8s ease .65s forwards;
}
.intro-start, .intro-goal {
  position: absolute;
  z-index: 2;
  font-size: .68rem;
  font-weight: 1000;
}
.intro-start { left: 8%; bottom: 8%; color: #193028; }
.intro-goal { right: 9%; top: 9%; font-size: 1.8rem; filter: drop-shadow(0 4px 0 rgba(0,0,0,.08)); }
.intro-car {
  position: absolute;
  left: 12%; bottom: 18%;
  width: 40px; height: 52px;
  border-width: 3px;
  border-radius: 16px;
  animation: introDrive 2.4s ease-in-out .85s infinite;
}
.intro-car .robbie-eye { top: 32%; width: 4px; height: 4px; }
.intro-steps {
  position: relative;
  margin: 12px 0;
  display: grid;
  gap: 6px;
}
.intro-steps span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(8px);
  animation: stepIn .28s ease forwards;
}
.intro-steps span:nth-child(1) { animation-delay: .15s; }
.intro-steps span:nth-child(2) { animation-delay: .38s; }
.intro-steps span:nth-child(3) { animation-delay: .61s; }
.intro-start-btn {
  position: relative;
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white 18%), var(--brand));
  font-size: 1rem;
  font-weight: 1000;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 12px 28px rgba(46,184,114,.24);
  animation: ctaBreath 1.45s ease-in-out infinite;
}

/* Logro cinematográfico */
.reward-overlay {
  place-items: center;
  padding: 14px;
  background: rgba(8, 24, 18, .45);
}
.reward-card {
  width: min(510px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: hidden auto;
  border-radius: 30px;
  padding: 20px 16px 16px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,207,74,.48), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,247,241,.98));
  transform: translateY(26px) scale(.92);
}
.reward-overlay.show .reward-card { animation: rewardEnterCenter .48s cubic-bezier(.2,.95,.28,1.08) forwards; }
.reward-robbie {
  width: 74px;
  height: 94px;
  margin: 2px auto 4px;
  animation: robbyReward .85s ease-in-out .32s 2;
}
.reward-robbie .robbie-eye { top: 32%; }
.reward-title {
  margin-top: 4px;
  font-size: clamp(1.35rem, 6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -.04em;
}
.reward-subtitle { font-size: .86rem; margin-bottom: 8px; }
.reward-terminal {
  position: relative;
  margin: 8px auto 10px;
  padding: 10px;
  border-radius: 16px;
  text-align: left;
  background: var(--terminal);
  color: #c7ffd9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 22px var(--terminal-glow);
  font: 800 .70rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.terminal-line {
  opacity: 0;
  transform: translateY(5px);
  white-space: nowrap;
  overflow: hidden;
  animation: terminalAppear .22s ease var(--line-delay) forwards;
}
.terminal-line span { color: var(--accent); }
.terminal-cursor { opacity: 0; animation: cursorBlink .65s steps(1,end) infinite; }
.terminal-line:last-child .terminal-cursor { opacity: 1; }
.reward-meter-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0 6px;
  font-size: .70rem;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.reward-meter { height: 12px; }
.reward-meter-wrap strong { color: var(--ink); font-size: .84rem; }
.reward-stars { min-height: 42px; margin: 0 0 4px; }
.reward-star { font-size: 2.15rem; }
.reward-stats { margin: 7px 0 8px; }
.reward-stat { padding: 7px 4px 6px; }
.reward-stat span { font-size: .55rem; }
.reward-stat strong { font-size: .94rem; }
#rewardBonus { font-size: .76rem; }
.reward-progress-track { margin: 5px 0 10px; gap: 5px; }
.reward-progress-dot { width: 34px; height: 34px; border-radius: 13px; grid-template-rows: 12px 1fr; }
.reward-progress-dot small { font-size: .49rem; padding-top: 4px; }
.reward-progress-dot b { font-size: .64rem; }
.reward-next-btn { min-height: 48px; border-radius: 17px; }

body.menu-open .mission-card,
body.menu-open .playfield,
body.menu-open .bottom-hud,
body.intro-open .mission-card,
body.intro-open .playfield,
body.intro-open .bottom-hud,
body.reward-open .mission-card,
body.reward-open .playfield,
body.reward-open .bottom-hud {
  filter: saturate(.82) brightness(.93);
}

@media (min-width: 720px) {
  .game-shell { padding: 10px; gap: 7px; }
  .mission-card { min-height: 58px; padding-inline: 14px 10px; }
  .menu-btn { width: 46px; height: 46px; }
  .algorithm-panel { flex-basis: 126px; }
  .algorithm-list li, .slot-btn { min-height: 38px; }
  .code-tool { min-height: 38px; font-size: 1rem; }
  .code-tool span { font-size: .54rem; }
  .feedback { font-size: .86rem; min-height: 24px; }
  .primary-btn { min-height: 52px; font-size: 1.06rem; }
}

@media (max-height: 670px) {
  .mission-card { min-height: 42px; padding-block: 4px; }
  .mission-icon { width: 20px; height: 20px; font-size: .85rem; }
  #levelTitle { font-size: .74rem; -webkit-line-clamp: 1; }
  .world-progress { display: none; }
  .algorithm-title { padding-block: 5px 4px; }
  .algorithm-help { display: none; }
  .algorithm-list li, .slot-btn { min-height: 27px; }
  .code-tool { min-height: 27px; grid-template-rows: 14px 0; }
  .code-tool span { display: none; }
  .primary-btn { min-height: 40px; }
  .feedback { min-height: 18px; font-size: .66rem; }
  .reward-robbie { width: 56px; height: 70px; }
  .reward-terminal { font-size: .59rem; padding: 8px; }
  .reward-title { font-size: 1.20rem; }
}

@media (max-width: 380px) {
  .algorithm-panel { flex-basis: 72px; }
  .code-tool { min-height: 28px; font-size: .78rem; }
  .code-tool span { font-size: .40rem; }
  .intro-stage { grid-template-columns: 104px 1fr; gap: 8px; }
  .intro-mini-ide, .intro-mini-map { min-height: 112px; }
  .terminal-line { font-size: .57rem; }
}

@keyframes cursorBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes popPanel { to { transform: translateY(0) scale(1); } }
@keyframes codeRain { to { transform: rotate(-18deg) translate(-5%, 5%); } }
@keyframes robbyHello {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-5px) rotate(-3deg); }
  55% { transform: translateY(0) rotate(2deg); }
}
@keyframes robbyBlink { 0%,92%,100% { transform: scaleY(1); } 94%,97% { transform: scaleY(.12); } }
@keyframes pathDraw { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes introDrive {
  0%,35% { transform: translate(0,0) rotate(0); }
  70%,100% { transform: translate(118px, -66px) rotate(4deg); }
}
@keyframes stepIn { to { opacity: 1; transform: translateY(0); } }
@keyframes rewardEnterCenter {
  0% { opacity: 0; transform: translateY(28px) scale(.92); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.014); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes robbyReward {
  0%,100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-10px) rotate(-5deg); }
  48% { transform: translateY(0) rotate(5deg); }
  72% { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes terminalAppear { to { opacity: 1; transform: translateY(0); } }

/* =========================
   v3.3 · UX/gamefeel pass
   ========================= */
:root {
  --console-bg: #0e2d23;
  --console-fg: #dfffee;
  --hud-line: rgba(14, 45, 35, .10);
}

.game-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
}

/* HUD: less text, more game progress */
.mission-card {
  min-height: 50px;
  padding: 7px 8px 7px 11px;
  border-radius: 20px;
}
.mission-meta {
  display: grid;
  grid-template-columns: minmax(64px, 90px) auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px !important;
}
.global-progress {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(24, 60, 48, .10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
  overflow: hidden;
  position: relative;
}
.global-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: 0 0 10px rgba(46,184,114,.35);
  transition: width .36s ease;
}
.global-progress small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .50rem;
  font-weight: 1000;
  color: rgba(14, 45, 35, .74);
  line-height: 1;
}
.world-badge {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mission-line {
  min-width: 0;
  font-size: clamp(.86rem, 3.5vw, 1.06rem);
  gap: 7px;
}
.mission-line strong {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-btn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 17px;
  font-size: 1.72rem;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 4px 12px rgba(16,52,39,.10);
}

/* Code panel becomes the mini console/IDE. */
.algorithm-panel {
  flex-basis: 124px;
  border-radius: 22px;
  overflow: hidden;
}
.algorithm-title {
  padding-top: 10px;
  padding-bottom: 8px;
  line-height: .86;
}
.algorithm-title span { font-size: .56rem; }
.algorithm-help {
  font-size: .52rem;
  letter-spacing: .03em;
  color: rgba(25,48,40,.70);
  background: linear-gradient(180deg, #f7fff9, #eef9f2);
}
.algorithm-list {
  padding: 7px 6px 5px;
  gap: 6px;
}
.slot-btn {
  min-height: 38px;
  border-radius: 14px;
}
.slot-btn.next-slot::after {
  content: "_";
  position: absolute;
  right: 8px;
  bottom: 5px;
  font-size: .95rem;
  color: rgba(93, 68, 0, .66);
  animation: cursorBlink .86s steps(1) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

.code-actions {
  flex: 0 0 auto;
  padding: 6px 6px 4px;
  border-top: 1px solid rgba(14,45,35,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(14,45,35,.04));
}
.code-run-btn.primary-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 16px;
  font-size: .82rem;
  padding: 6px 5px;
  line-height: 1.05;
  box-shadow: 0 7px 0 var(--brand-dark), 0 10px 16px rgba(16,52,39,.14);
}
.code-run-btn.primary-btn:not(:disabled) {
  animation: runPulse 1.85s ease-in-out infinite;
}
@keyframes runPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.05); }
}
.code-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px 5px 7px;
  background: rgba(14,45,35,.05);
}
.code-tool {
  min-width: 0;
  border-radius: 12px;
  min-height: 31px;
  font-size: .86rem;
  background: rgba(255,255,255,.84);
  color: var(--muted);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.code-tool span {
  display: block;
  margin-top: 1px;
  font-size: .45rem;
  line-height: 1;
  font-weight: 900;
}

/* Bottom area is now a terminal console, not a control panel. */
.bottom-hud.console-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 10px;
  border-radius: 18px;
  background: var(--console-bg);
  color: var(--console-fg);
  box-shadow: 0 10px 24px rgba(16,52,39,.18), inset 0 0 0 1px rgba(255,255,255,.08);
}
.console-label {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(223,255,238,.70);
}
.feedback.terminal-feedback {
  min-height: 24px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  color: var(--console-fg);
  background: transparent;
  box-shadow: none;
  font-size: clamp(.78rem, 3vw, .98rem);
  font-weight: 850;
  line-height: 1.14;
}
.feedback.terminal-feedback::before {
  content: ">";
  margin-right: 6px;
  color: #65ffad;
  font-weight: 1000;
}
.feedback.terminal-feedback.typing::after {
  content: "_";
  margin-left: 2px;
  color: #65ffad;
  animation: cursorBlink .74s steps(1) infinite;
}
.feedback[data-type="success"] { color: #dfffee; }
.feedback[data-type="error"] { color: #ffd7cc; }
.control-bar { display: none !important; }

/* Command picker remains contextual but lighter. */
.command-picker {
  grid-template-columns: repeat(2, 44px);
  grid-template-rows: none;
  grid-auto-rows: 42px;
  width: auto;
  padding: 8px;
  gap: 7px;
  border-radius: 18px;
}
.command-picker::before { left: -6px; }
.picker-close {
  grid-column: 1 / -1;
  grid-row: auto;
  width: 100%;
  min-height: 24px;
  border-radius: 11px;
}
.picker-btn {
  min-width: 44px;
  min-height: 42px;
  border-radius: 13px;
}
body.text-mode .picker-btn .cmd-icon { display: none; }
body.icon-mode .picker-btn .cmd-icon { display: inline-block; }
body.icon-mode .picker-btn .cmd-label { display: none; }
body.text-mode .picker-btn .cmd-label { display: inline; }

/* Menú: dangerous action is quieter and icon-based. */
.menu-card {
  width: min(92vw, 430px);
  border-radius: 26px;
}
.danger-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 12px auto 0;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
  color: #9e3d31;
  background: rgba(231, 76, 60, .10);
  box-shadow: inset 0 0 0 1px rgba(231, 76, 60, .20);
  font-size: .82rem;
  font-weight: 900;
}
.danger-menu-btn strong { font-size: 1rem; }
.confirm-reset {
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255, 240, 235, .96);
}

/* Intro: a real presentation screen, not a noisy card over gameplay. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.92), transparent 28%),
    linear-gradient(145deg, #dff8eb 0%, #fff9e8 48%, #dff4ff 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.intro-overlay.show { opacity: 1; pointer-events: auto; }
.intro-card {
  width: min(96vw, 720px);
  min-height: min(92dvh, 760px);
  max-height: min(92dvh, 760px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: clamp(18px, 4vw, 28px);
  border-radius: 32px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 70px rgba(10,45,34,.25), inset 0 0 0 2px rgba(255,255,255,.70);
  overflow: hidden auto;
  position: relative;
  transform: translateY(16px) scale(.98);
}
.intro-overlay.show .intro-card { animation: introCardIn .45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes introCardIn { to { transform: translateY(0) scale(1); } }
.intro-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  font-weight: 950;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  box-shadow: var(--soft-shadow);
}
.intro-logo,
.intro-stage,
.intro-steps,
.intro-start-btn {
  opacity: 0;
  transform: translateY(12px);
}
.intro-overlay.show .intro-logo { animation: revealUp .55s .18s ease forwards; }
.intro-overlay.show .intro-stage { animation: revealUp .55s .78s ease forwards; }
.intro-overlay.show .intro-steps { animation: revealUp .55s 2.65s ease forwards; }
.intro-overlay.show .intro-start-btn { animation: revealUp .55s 3.55s ease forwards, runPulse 1.8s 4.1s ease-in-out infinite; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
.intro-logo h1 { font-size: clamp(2.1rem, 9vw, 4.6rem); line-height: .86; }
.intro-logo p { font-size: clamp(1rem, 4vw, 1.7rem); line-height: 1; max-width: 520px; }
.intro-stage {
  align-self: stretch;
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(130px, .84fr) minmax(0, 1.2fr);
  gap: 12px;
}
.intro-mini-ide {
  border-radius: 24px;
  background: #0c2e23;
  color: #effff6;
  padding: 18px 16px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), var(--soft-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 1000;
  font-size: clamp(1.05rem, 4vw, 1.55rem);
}
.intro-mini-ide b { text-transform: uppercase; font-size: .92rem; letter-spacing: .04em; }
.intro-line-one em {
  display: inline-block;
  color: #ffda5d;
  font-style: normal;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
}
.intro-overlay.show .intro-line-one em { animation: typeA .62s 1.45s steps(2) forwards; }
@keyframes typeA { to { width: 2ch; } }
.intro-mini-map-straight {
  position: relative;
  min-height: 290px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ecfff4, #ddf8e8);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.75), var(--soft-shadow);
  overflow: hidden;
}
.intro-mini-map-straight .intro-road-vertical {
  position: absolute;
  left: 50%;
  top: 25%;
  bottom: 14%;
  width: 58px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #8997a0;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.20);
}
.intro-mini-map-straight .intro-road-vertical::before {
  content: "↑";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.88);
  font-weight: 1000;
  font-size: 1.7rem;
}
.intro-mini-map-straight .intro-goal {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) scale(.8);
  font-size: 2.6rem;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.08));
  opacity: 0;
}
.intro-overlay.show .intro-mini-map-straight .intro-goal { animation: goalPop .45s 1.05s ease forwards; }
@keyframes goalPop { 65% { opacity: 1; transform: translateX(-50%) scale(1.12); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
.intro-mini-map-straight .intro-start {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: .86rem;
  font-weight: 1000;
  color: rgba(14,45,35,.72);
}
.intro-mini-map-straight .intro-car {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 76px;
  height: 88px;
  transform: translateX(-50%);
  z-index: 3;
}
.intro-overlay.show .intro-mini-map-straight .intro-car { animation: introRobbyStraight 1.45s 1.92s cubic-bezier(.3,.9,.25,1) forwards; }
@keyframes introRobbyStraight {
  0%, 22% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-94px); }
}
.intro-steps {
  display: grid;
  gap: 8px;
}
.intro-steps span {
  opacity: 0;
  transform: translateX(-8px);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  padding: 10px 16px;
  font-weight: 1000;
  box-shadow: var(--soft-shadow);
}
.intro-overlay.show .intro-steps span:nth-child(1) { animation: revealSide .45s 2.9s ease forwards; }
.intro-overlay.show .intro-steps span:nth-child(2) { animation: revealSide .45s 3.15s ease forwards; }
.intro-overlay.show .intro-steps span:nth-child(3) { animation: revealSide .45s 3.40s ease forwards; }
@keyframes revealSide { to { opacity: 1; transform: translateX(0); } }
.intro-start-btn {
  min-height: 58px;
  border-radius: 22px;
  font-size: clamp(1.05rem, 4vw, 1.5rem);
}

/* Reward: centered verification scene with more ceremonial pacing. */
.reward-overlay {
  place-items: center !important;
  background:
    radial-gradient(circle at center, rgba(8, 46, 35, .42), rgba(8, 46, 35, .72)),
    rgba(10,25,20,.58);
}
.reward-card {
  width: min(92vw, 560px);
  max-height: min(88dvh, 720px);
  overflow: hidden auto;
  border-radius: 30px;
  transform: scale(.88) translateY(18px);
}
.reward-overlay.show .reward-card { animation: rewardEnterCenter .48s cubic-bezier(.2,.95,.28,1.08) forwards; }
.reward-title { animation-delay: .42s !important; }
.reward-subtitle { opacity: 0; animation: revealUp .35s .70s ease forwards; }
.reward-terminal .terminal-line {
  opacity: 0;
  transform: translateY(4px);
  animation: terminalLineIn .28s var(--line-delay) ease forwards;
}
@keyframes terminalLineIn { to { opacity: 1; transform: translateY(0); } }
.reward-meter-wrap { opacity: 0; animation: revealUp .35s 1.55s ease forwards; }
.reward-stars { min-height: 44px; }
.reward-next-btn { opacity: 0; transform: translateY(8px); animation: revealUp .35s 2.25s ease forwards, runPulse 1.8s 2.8s ease-in-out infinite; }

@media (max-width: 520px) {
  .game-shell { padding: 6px 6px calc(6px + var(--safe-bottom)); }
  .mission-card { min-height: 50px; }
  .mission-meta { grid-template-columns: 76px minmax(0, auto); }
  .world-progress { display: flex !important; }
  .playfield { gap: 5px; }
  .algorithm-panel { flex-basis: 118px; }
  .slot-btn { min-height: 36px; }
  .code-run-btn.primary-btn { min-height: 42px; font-size: .76rem; }
  .code-tool { min-height: 28px; }
  .code-tool span { font-size: .40rem; }
  .bottom-hud.console-hud { min-height: 44px; padding: 6px 8px; }
  .console-label { display: none; }
  .feedback.terminal-feedback { font-size: .80rem; }
  .intro-card { min-height: 94dvh; max-height: 94dvh; border-radius: 26px; gap: 10px; }
  .intro-stage { grid-template-columns: 1fr; min-height: 360px; }
  .intro-mini-ide { min-height: 134px; }
  .intro-mini-map-straight { min-height: 210px; }
  .intro-logo { grid-template-columns: 78px 1fr; gap: 12px; }
  .intro-logo .intro-robbie { width: 78px; height: 92px; }
  .intro-logo h1 { font-size: 2.32rem; }
  .intro-logo p { font-size: 1.08rem; }
  .intro-steps span { padding: 9px 14px; font-size: .92rem; }
}

@media (max-height: 720px) {
  .mission-card { min-height: 43px; padding-block: 4px; }
  .mission-line { font-size: .80rem; }
  .world-progress { display: none !important; }
  .algorithm-help { display: none; }
  .slot-btn { min-height: 30px; }
  .code-run-btn.primary-btn { min-height: 36px; }
  .bottom-hud.console-hud { min-height: 38px; }
  .intro-card { min-height: 94dvh; max-height: 94dvh; gap: 7px; padding: 14px; }
  .intro-stage { min-height: 250px; }
  .intro-steps { gap: 5px; }
  .intro-steps span { padding: 7px 12px; }
}
.intro-mini-map-straight .intro-goal { right: auto !important; bottom: auto !important; }
.intro-mini-map-straight .intro-start { right: auto !important; top: auto !important; }
.intro-mini-map-straight .intro-car { right: auto !important; top: auto !important; }

/* =========================
   v3.4 · Gameplay HUD + Mini IDE refinement
   ========================= */
:root {
  --mini-ide-w: clamp(82px, 17vw, 98px);
}

.game-shell {
  gap: 5px;
  padding: 6px 6px calc(6px + var(--safe-bottom));
  overflow: hidden;
}

/* HUD superior: más videojuego, menos tarjeta informativa. */
.mission-card {
  min-height: 54px;
  padding: 7px 7px 7px 10px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.95), rgba(255,255,255,.72) 42%, rgba(255,255,255,.82) 100%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 20px rgba(16,52,39,.10), inset 0 0 0 1px rgba(255,255,255,.55);
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px;
}
.mission-copy { display: grid; gap: 2px; }
.mission-meta {
  display: grid !important;
  grid-template-columns: minmax(74px, 96px) minmax(0, max-content);
  align-items: center;
  gap: 7px;
  margin: 0 !important;
}
.global-progress {
  height: 13px;
  border-radius: 999px;
  background: rgba(14,45,35,.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.78);
}
.global-progress-fill { background: linear-gradient(90deg, #60d6ff, var(--brand), var(--accent)); }
.global-progress small {
  font-size: .48rem;
  font-weight: 1000;
  color: rgba(14,45,35,.78);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.world-badge {
  max-width: 42vw;
  border-radius: 999px;
  font-size: .58rem;
  padding: 3px 8px 3.5px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10);
}
.mission-line {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 25px;
}
.mission-icon {
  width: 25px;
  height: 25px;
  border-radius: 10px;
  background: rgba(255,207,74,.22);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
  font-size: 1rem;
}
#levelTitle,
.mission-line strong {
  font-size: clamp(.84rem, 3.35vw, 1.05rem);
  line-height: 1.05;
  font-weight: 1000;
  letter-spacing: -.02em;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-progress {
  display: flex !important;
  margin-top: 1px;
  gap: 5px;
  height: 11px;
  align-items: center;
}
.progress-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  font-size: 0;
  border-radius: 999px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.progress-dot.current { transform: scale(1.18); }
.menu-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 16px;
  font-size: 1.55rem;
  align-self: center;
}

/* Mini IDE: angosto, vertical y sin textos que no aportan. */
.playfield { gap: 5px; min-height: 0; overflow: hidden; }
.algorithm-panel {
  flex: 0 0 var(--mini-ide-w) !important;
  min-width: 0 !important;
  max-width: 98px;
  border-radius: 21px;
}
.algorithm-title {
  padding: 9px 3px 7px;
  font-size: .60rem;
  line-height: .88;
}
.algorithm-title span { font-size: .51rem; }
.algorithm-help { display: none !important; }
.algorithm-list {
  padding: 7px 5px 5px;
  gap: 5px;
}
.algorithm-list li { min-height: 34px; }
.slot-btn {
  min-height: 34px;
  border-radius: 14px;
  font-size: .96rem;
}
.slot-btn::before {
  left: 5px;
  top: 4px;
  font-size: .49rem;
}
.algorithm-list .cmd-icon { width: 20px; height: 20px; }

/* Herramientas de edición: pertenecen al código y van sobre ejecutar. */
.code-tools {
  order: 2;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: minmax(27px, auto);
  gap: 4px;
  padding: 5px 6px 4px;
  border-top: 1px solid rgba(14,45,35,.07);
  background: linear-gradient(180deg, rgba(14,45,35,.03), rgba(14,45,35,.06));
}
.code-tool {
  min-height: 27px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  gap: 2px;
  font-size: .82rem;
  padding: 2px 4px;
}
.code-tool span {
  display: block;
  margin: 0;
  font-size: .46rem;
  line-height: 1;
  justify-self: start;
}
.code-actions {
  order: 3;
  padding: 4px 6px 7px;
  border-top: 1px solid rgba(14,45,35,.07);
  background: rgba(255,255,255,.28);
}
.code-run-btn.primary-btn {
  min-height: 54px;
  border-radius: 16px;
  padding: 5px 3px 7px;
  display: grid;
  grid-template-rows: 18px auto;
  place-items: center;
  gap: 1px;
  font-size: .68rem;
  line-height: 1;
  text-align: center;
  white-space: normal;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 8px 13px rgba(16,52,39,.13);
}
.code-run-btn .run-icon {
  display: block;
  font-size: 1.02rem;
  line-height: 1;
}
.code-run-btn .run-text {
  display: block;
  max-width: 100%;
  font-size: .66rem;
  font-weight: 1000;
  line-height: 1.05;
}
.code-run-btn.next-action .run-text { font-size: .62rem; }

/* Consola: guía y pista viven juntas. */
.bottom-hud.console-hud {
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px 8px 7px 11px;
  border-radius: 19px;
  overflow: hidden;
}
.console-label { display: none !important; }
.feedback.terminal-feedback {
  min-width: 0;
  font-size: clamp(.76rem, 3.1vw, .92rem);
  line-height: 1.12;
  text-align: left;
}
.console-hint-btn {
  width: 45px;
  min-width: 45px;
  height: 35px;
  border-radius: 14px;
  display: grid;
  grid-template-rows: 18px 9px;
  place-items: center;
  color: #17352a;
  background: linear-gradient(180deg, #fff7bf, #ffd85d);
  font-size: 1rem;
  font-weight: 1000;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 5px 10px rgba(0,0,0,.08);
}
.console-hint-btn span { font-size: .48rem; line-height: 1; font-weight: 1000; }
.console-hint-btn:disabled { opacity: .46; filter: grayscale(.2); }

.map-card {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 520px) {
  :root { --mini-ide-w: clamp(80px, 15.8vw, 90px); }
  .mission-card {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 40px;
    padding: 7px 7px 7px 9px;
  }
  .mission-meta { grid-template-columns: 82px minmax(0, max-content) !important; gap: 6px; }
  .world-badge { max-width: 36vw; font-size: .54rem; }
  .menu-btn { width: 40px; min-width: 40px; height: 40px; }
  .algorithm-panel { flex-basis: var(--mini-ide-w) !important; max-width: 90px; }
  .algorithm-list { padding-inline: 5px; gap: 5px; }
  .slot-btn { min-height: 34px; }
  .code-tool { min-height: 27px; }
  .code-tool span { font-size: .43rem; }
  .code-run-btn.primary-btn { min-height: 50px; font-size: .62rem; }
  .code-run-btn .run-icon { font-size: .98rem; }
  .bottom-hud.console-hud { min-height: 46px; padding: 7px 8px; }
  .feedback.terminal-feedback { font-size: .78rem; }
}

@media (max-width: 380px) {
  :root { --mini-ide-w: 78px; }
  .world-badge { display: none; }
  .mission-meta { grid-template-columns: 82px !important; }
  .mission-card { grid-template-columns: minmax(0, 1fr) 38px; }
  .mission-icon { width: 23px; height: 23px; }
  #levelTitle { font-size: .79rem; }
  .console-hint-btn { width: 40px; min-width: 40px; }
}

@media (max-height: 720px) {
  .mission-card { min-height: 46px; padding-block: 5px; }
  .world-progress { display: none !important; }
  .algorithm-title { padding-block: 7px 6px; }
  .slot-btn { min-height: 30px; }
  .algorithm-list { gap: 4px; }
  .code-tool { min-height: 24px; }
  .code-actions { padding-bottom: 5px; }
  .code-run-btn.primary-btn { min-height: 42px; }
  .bottom-hud.console-hud { min-height: 40px; padding-block: 5px; }
}

/* =========================
   v3.5 · Gameplay hierarchy pass
   - Ejecutar vuelve al área del mapa.
   - La consola y la pista bajan de jerarquía visual.
   - HUD superior en una línea equilibrada.
   ========================= */
:root {
  --mini-ide-w: clamp(76px, 15vw, 92px);
  --hud-h: 44px;
}

.game-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 6px 6px calc(6px + var(--safe-bottom));
}

/* HUD superior: una línea, progreso + misión + menú. */
.mission-card {
  min-height: var(--hud-h) !important;
  padding: 5px 7px 5px 9px !important;
  border-radius: 18px !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 6px !important;
  align-items: center;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 5px 14px rgba(16,52,39,.08), inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
.mission-copy {
  min-width: 0;
  display: block !important;
}
.game-hud-row {
  display: grid;
  grid-template-columns: clamp(92px, 26vw, 145px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.mission-meta { display: none !important; }
.hud-world-hidden,
.world-badge { display: none !important; }
.world-progress { display: none !important; }
.global-progress {
  display: block !important;
  width: 100%;
  height: 16px !important;
  border-radius: 999px;
  background: rgba(14,45,35,.10) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.65) !important;
  overflow: hidden;
  position: relative;
}
.global-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ddcff, #47d889, #ffd765) !important;
  transition: width .35s ease;
}
.global-progress small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(14,45,35,.80);
  font-size: .50rem !important;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.mission-line {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.mission-icon {
  width: 23px !important;
  height: 23px !important;
  border-radius: 9px;
  font-size: .94rem !important;
  background: rgba(255,207,74,.18) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}
#levelTitle,
.mission-line strong {
  font-size: clamp(.78rem, 3.25vw, 1rem) !important;
  line-height: 1.02 !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.menu-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 15px !important;
  font-size: 1.42rem !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 10px rgba(16,52,39,.08) !important;
}

/* Mini IDE: solo código + herramientas de edición. */
.playfield {
  min-height: 0;
  gap: 5px;
  overflow: hidden;
}
.algorithm-panel {
  flex: 0 0 var(--mini-ide-w) !important;
  max-width: 92px !important;
  min-width: 74px !important;
  border-radius: 18px !important;
  box-shadow: 0 7px 16px rgba(16,52,39,.10) !important;
}
.algorithm-title {
  padding: 7px 2px 6px !important;
  font-size: .56rem !important;
  line-height: .86 !important;
}
.algorithm-title span { font-size: .48rem !important; }
.algorithm-list {
  padding: 6px 5px 5px !important;
  gap: 5px !important;
}
.algorithm-list li { min-height: 31px !important; }
.slot-btn {
  min-height: 31px !important;
  border-radius: 13px !important;
  font-size: .92rem !important;
}
.slot-btn::before {
  left: 5px !important;
  top: 4px !important;
  font-size: .46rem !important;
}
.slot-btn.next-slot::after {
  right: 6px !important;
  bottom: 3px !important;
  font-size: .78rem !important;
}
.code-tools {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  padding: 5px 6px 7px !important;
  border-top: 1px solid rgba(14,45,35,.07) !important;
  background: linear-gradient(180deg, rgba(14,45,35,.02), rgba(14,45,35,.055)) !important;
}
.code-tool {
  min-height: 27px !important;
  border-radius: 12px !important;
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 2px 4px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06) !important;
  color: rgba(25,48,40,.58) !important;
}
.code-tool span {
  justify-self: start !important;
  margin: 0 !important;
  font-size: .42rem !important;
  line-height: 1 !important;
}

/* El área del mapa ahora contiene el canvas + acción principal centrada. */
.map-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 5px;
  padding: 0 0 7px;
  min-width: 0;
  min-height: 0;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
.map-canvas-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#gameCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.map-actions {
  min-height: 43px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  pointer-events: auto;
}
.map-run-btn.primary-btn {
  width: min(230px, 78%);
  min-height: 40px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: .92rem;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.15), 0 8px 14px rgba(16,52,39,.14);
}
.map-run-btn.primary-btn:not(:disabled) {
  animation: runPulse 1.85s ease-in-out infinite;
}
.map-run-btn .run-icon { font-size: 1rem; }
.map-run-btn.next-action { width: min(250px, 82%); }
.map-run-btn.next-action .run-text { font-size: .92rem; }

/* Consola: guía discreta. La pista existe, pero no grita. */
.bottom-hud.console-hud {
  min-height: 36px !important;
  padding: 5px 6px 5px 10px !important;
  border-radius: 15px !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  gap: 5px !important;
  background: rgba(14,45,35,.84) !important;
  color: rgba(223,255,238,.92) !important;
  box-shadow: 0 5px 12px rgba(16,52,39,.12), inset 0 0 0 1px rgba(255,255,255,.055) !important;
}
.feedback.terminal-feedback {
  min-height: 20px !important;
  font-size: clamp(.67rem, 2.65vw, .84rem) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  color: rgba(223,255,238,.92) !important;
}
.feedback.terminal-feedback::before {
  margin-right: 5px !important;
  color: rgba(101,255,173,.76) !important;
}
.console-hint-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  grid-template-rows: 1fr !important;
  padding: 0 !important;
  background: rgba(255,255,255,.13) !important;
  color: rgba(223,255,238,.82) !important;
  font-size: .86rem !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  filter: none !important;
}
.console-hint-btn span { display: none !important; }
.console-hint-btn:not(:disabled):active { transform: scale(.96); }
.console-hint-btn:disabled { opacity: .32 !important; }

/* Toast queda dentro del área de mapa, por encima del canvas y sin tocar ejecutar. */
.toast { bottom: 8px !important; }

@media (max-width: 520px) {
  :root { --mini-ide-w: clamp(76px, 15.5vw, 86px); --hud-h: 42px; }
  .game-shell { padding: 5px 5px calc(5px + var(--safe-bottom)); gap: 4px; }
  .mission-card { grid-template-columns: minmax(0, 1fr) 36px !important; padding-inline: 8px 6px !important; }
  .game-hud-row { grid-template-columns: clamp(86px, 27vw, 112px) minmax(0, 1fr); gap: 7px; }
  .global-progress { height: 15px !important; }
  .mission-icon { width: 22px !important; height: 22px !important; font-size: .88rem !important; }
  #levelTitle { font-size: clamp(.74rem, 3.3vw, .92rem) !important; }
  .menu-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; font-size: 1.32rem !important; }
  .playfield { gap: 4px; }
  .algorithm-panel { max-width: 86px !important; }
  .algorithm-title { font-size: .52rem !important; }
  .algorithm-title span { font-size: .44rem !important; }
  .algorithm-list { padding-inline: 4px !important; gap: 4px !important; }
  .algorithm-list li { min-height: 30px !important; }
  .slot-btn { min-height: 30px !important; }
  .code-tools { padding: 4px 5px 6px !important; }
  .code-tool { min-height: 25px !important; }
  .code-tool span { font-size: .39rem !important; }
  .map-card { gap: 4px; padding-bottom: 6px; }
  .map-actions { min-height: 41px; padding-inline: 6px; }
  .map-run-btn.primary-btn { min-height: 38px; width: min(210px, 78%); font-size: .86rem; }
  .bottom-hud.console-hud { min-height: 34px !important; padding-block: 4px !important; }
  .feedback.terminal-feedback { font-size: .70rem !important; }
  .console-hint-btn { width: 27px !important; min-width: 27px !important; height: 27px !important; font-size: .80rem !important; }
}

@media (max-width: 380px) {
  :root { --mini-ide-w: 72px; --hud-h: 40px; }
  .game-hud-row { grid-template-columns: 82px minmax(0, 1fr); gap: 6px; }
  .global-progress { height: 14px !important; }
  .global-progress small { font-size: .45rem !important; }
  .mission-line { grid-template-columns: 21px minmax(0, 1fr); gap: 5px; }
  .mission-icon { width: 21px !important; height: 21px !important; }
  #levelTitle { font-size: .72rem !important; }
  .algorithm-panel { min-width: 70px !important; }
  .code-tool { grid-template-columns: 16px 1fr !important; }
  .code-tool span { font-size: .36rem !important; }
  .map-run-btn.primary-btn { width: min(190px, 82%); }
}

@media (max-height: 720px) {
  :root { --hud-h: 38px; }
  .mission-card { min-height: var(--hud-h) !important; padding-block: 4px !important; }
  .global-progress { height: 13px !important; }
  .menu-btn { height: 34px !important; width: 34px !important; min-width: 34px !important; }
  .algorithm-title { padding-block: 6px 5px !important; }
  .algorithm-list { gap: 4px !important; }
  .slot-btn { min-height: 28px !important; }
  .code-tool { min-height: 23px !important; }
  .map-actions { min-height: 38px; }
  .map-run-btn.primary-btn { min-height: 35px; font-size: .80rem; }
  .bottom-hud.console-hud { min-height: 32px !important; }
}

/* =========================
   v3.6 · HUD tripartito + consola discreta
   ========================= */
.mission-card.hud-v36 {
  min-height: 46px !important;
  padding: 6px 7px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: clamp(62px, 18vw, 106px) minmax(0, 1fr) clamp(64px, 18vw, 112px) 36px !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,255,252,.78)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 5px 14px rgba(16,52,39,.08), inset 0 0 0 1px rgba(255,255,255,.55) !important;
}
.mission-card.hud-v36 .hud-global {
  min-width: 0;
  display: grid;
  align-items: center;
}
.mission-card.hud-v36 .global-progress {
  width: 100% !important;
  height: 22px !important;
  border-radius: 9px !important;
  background: rgba(25,48,40,.10) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.85) !important;
}
.mission-card.hud-v36 .global-progress-fill {
  border-radius: 9px !important;
  background: linear-gradient(90deg, #61d6ff 0%, #32c279 55%, #ffd45d 100%) !important;
}
.mission-card.hud-v36 .global-progress small {
  font-size: .55rem !important;
  font-weight: 1000 !important;
  color: rgba(14,45,35,.78) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.56) !important;
}
.mission-card.hud-v36 .hud-mission-panel {
  min-width: 0;
  height: 36px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(240,250,245,.96) 100%);
  border: 1px solid rgba(14,45,35,.07);
  box-shadow: inset 0 -2px 0 rgba(14,45,35,.045), 0 4px 10px rgba(16,52,39,.07);
}
.mission-card.hud-v36 .mission-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  background: linear-gradient(180deg, #fff7c4, #f7d24f) !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10) !important;
}
.mission-card.hud-v36 .hud-mission-panel strong,
.mission-card.hud-v36 #levelTitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.78rem, 3.45vw, 1.02rem) !important;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.03em;
}
.mission-card.hud-v36 .world-progress {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.mission-card.hud-v36 .progress-dot {
  width: 17px !important;
  height: 17px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: .48rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  background: rgba(25,48,40,.08) !important;
  color: rgba(25,48,40,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(25,48,40,.06) !important;
}
.mission-card.hud-v36 .progress-dot.done {
  background: linear-gradient(180deg, #ffe988, #ffca3a) !important;
  color: #533f00 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 2px 5px rgba(255,202,58,.20) !important;
}
.mission-card.hud-v36 .progress-dot.current {
  transform: scale(1.12) !important;
  background: linear-gradient(180deg, #67dfff, #35a6e8) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 8px rgba(53,166,232,.22) !important;
}
.mission-card.hud-v36 .menu-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  font-size: 1.28rem !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06), 0 3px 9px rgba(16,52,39,.08) !important;
}

/* Consola: salida de sistema, no protagonista visual. */
.bottom-hud.console-hud {
  min-height: 34px !important;
  padding: 5px 7px 5px 10px !important;
  border-radius: 14px !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  gap: 5px !important;
  background: linear-gradient(180deg, #f5faf7, #e9f0ec) !important;
  color: rgba(25,48,40,.84) !important;
  border: 1px solid rgba(25,48,40,.07) !important;
  box-shadow: 0 4px 10px rgba(16,52,39,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.feedback.terminal-feedback {
  min-height: 18px !important;
  color: rgba(25,48,40,.84) !important;
  font-size: clamp(.66rem, 2.55vw, .82rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}
.feedback.terminal-feedback::before {
  margin-right: 5px !important;
  color: rgba(46,134,90,.62) !important;
}
.feedback.terminal-feedback.typing::after {
  color: rgba(46,134,90,.66) !important;
}
.console-hint-btn {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(25,48,40,.42) !important;
  font-size: .84rem !important;
  box-shadow: none !important;
  opacity: .75 !important;
  padding: 0 !important;
  filter: grayscale(.25) !important;
}
.console-hint-btn span { display: none !important; }
.console-hint-btn:not(:disabled):hover,
.console-hint-btn:not(:disabled):focus-visible { color: rgba(25,48,40,.72) !important; opacity: .95 !important; }
.console-hint-btn:not(:disabled):active { transform: scale(.92); }
.console-hint-btn:disabled { opacity: .22 !important; }

@media (max-width: 520px) {
  .mission-card.hud-v36 {
    grid-template-columns: clamp(58px, 17vw, 82px) minmax(0, 1fr) clamp(62px, 19vw, 76px) 34px !important;
    gap: 5px !important;
    min-height: 44px !important;
    padding: 5px 6px !important;
    border-radius: 17px !important;
  }
  .mission-card.hud-v36 .global-progress { height: 20px !important; border-radius: 8px !important; }
  .mission-card.hud-v36 .global-progress small { font-size: .50rem !important; }
  .mission-card.hud-v36 .hud-mission-panel {
    height: 34px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 8px 4px 5px;
    border-radius: 14px;
  }
  .mission-card.hud-v36 .mission-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    font-size: .90rem !important;
  }
  .mission-card.hud-v36 #levelTitle { font-size: clamp(.72rem, 3.15vw, .90rem) !important; }
  .mission-card.hud-v36 .world-progress { gap: 3px; }
  .mission-card.hud-v36 .progress-dot { width: 14px !important; height: 14px !important; font-size: .40rem !important; }
  .mission-card.hud-v36 .menu-btn { width: 34px !important; min-width: 34px !important; height: 34px !important; font-size: 1.20rem !important; }
  .bottom-hud.console-hud { min-height: 32px !important; grid-template-columns: minmax(0, 1fr) 20px !important; padding-block: 4px !important; }
  .feedback.terminal-feedback { font-size: .67rem !important; }
  .console-hint-btn { width: 20px !important; min-width: 20px !important; height: 20px !important; font-size: .78rem !important; }
}

@media (max-width: 380px) {
  .mission-card.hud-v36 {
    grid-template-columns: 56px minmax(0, 1fr) 58px 32px !important;
    gap: 4px !important;
  }
  .mission-card.hud-v36 .global-progress { height: 18px !important; }
  .mission-card.hud-v36 .global-progress small { font-size: .45rem !important; }
  .mission-card.hud-v36 .hud-mission-panel { grid-template-columns: 22px minmax(0,1fr); padding-inline: 4px 6px; height: 32px; }
  .mission-card.hud-v36 .mission-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: .82rem !important; }
  .mission-card.hud-v36 #levelTitle { font-size: .66rem !important; }
  .mission-card.hud-v36 .progress-dot { width: 12px !important; height: 12px !important; font-size: .35rem !important; }
}

@media (max-height: 720px) {
  .mission-card.hud-v36 { min-height: 40px !important; padding-block: 4px !important; }
  .mission-card.hud-v36 .global-progress { height: 18px !important; }
  .mission-card.hud-v36 .hud-mission-panel { height: 31px; }
  .mission-card.hud-v36 .mission-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; }
  .mission-card.hud-v36 .progress-dot { width: 13px !important; height: 13px !important; }
  .mission-card.hud-v36 .menu-btn { height: 32px !important; width: 32px !important; min-width: 32px !important; }
  .bottom-hud.console-hud { min-height: 30px !important; }
}

/* =========================
   v3.7 · HUD en dos secciones + foco en escribir código
   ========================= */
:root {
  --mini-ide-w: clamp(76px, 15vw, 90px);
}

/* HUD: dos bloques principales: progreso general + misión/progreso de ronda. */
.mission-card.hud-v37 {
  min-height: 48px !important;
  padding: 6px 7px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: clamp(56px, 14vw, 84px) minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 7px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,255,251,.82)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 5px 14px rgba(16,52,39,.075), inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
.mission-card.hud-v37 .hud-global {
  min-width: 0;
  height: 34px;
  display: grid;
  align-items: stretch;
}
.mission-card.hud-v37 .global-progress {
  width: 100% !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: rgba(25,48,40,.09) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.85) !important;
  overflow: hidden;
}
.mission-card.hud-v37 .global-progress-fill {
  border-radius: 12px !important;
  background: linear-gradient(90deg, #61d6ff 0%, #34d28a 55%, #ffd45d 100%) !important;
  box-shadow: 0 0 12px rgba(52,210,138,.18) !important;
}
.mission-card.hud-v37 .global-progress small {
  font-size: .55rem !important;
  font-weight: 1000 !important;
  color: rgba(14,45,35,.75) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
}
.mission-card.hud-v37 .hud-mission-panel {
  min-width: 0;
  height: 34px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto minmax(54px, max-content);
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(240,250,245,.96) 100%);
  border: 1px solid rgba(14,45,35,.07);
  box-shadow: inset 0 -2px 0 rgba(14,45,35,.045), 0 4px 10px rgba(16,52,39,.07);
}
.mission-card.hud-v37 .mission-icon {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  border-radius: 10px !important;
  font-size: .98rem !important;
  background: linear-gradient(180deg, #fff7c4, #f7d24f) !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10) !important;
}
.mission-card.hud-v37 .hud-mission-panel strong,
.mission-card.hud-v37 #levelTitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.78rem, 3.35vw, 1rem) !important;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.03em;
}
.mission-card.hud-v37 .hud-divider {
  color: rgba(25,48,40,.22);
  font-weight: 1000;
  font-size: 1rem;
  transform: translateY(-1px);
}
.mission-card.hud-v37 .world-progress {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}
.mission-card.hud-v37 .progress-dot {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: .43rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  background: rgba(25,48,40,.075) !important;
  color: rgba(25,48,40,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(25,48,40,.055) !important;
}
.mission-card.hud-v37 .progress-dot.done {
  background: linear-gradient(180deg, #ffe988, #ffca3a) !important;
  color: #533f00 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 2px 5px rgba(255,202,58,.18) !important;
}
.mission-card.hud-v37 .progress-dot.current {
  transform: scale(1.12) !important;
  background: linear-gradient(180deg, #67dfff, #35a6e8) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 8px rgba(53,166,232,.18) !important;
}
.mission-card.hud-v37 .menu-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  font-size: 1.18rem !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.055), 0 3px 8px rgba(16,52,39,.07) !important;
}

/* El + es la acción primaria durante la escritura. */
.slot-btn.next-slot {
  background: linear-gradient(180deg, #fff6ae 0%, #ffd650 100%) !important;
  border: 2px solid rgba(255,190,31,.96) !important;
  box-shadow: inset 0 -3px 0 rgba(130,88,0,.15), 0 5px 11px rgba(255,190,31,.18) !important;
  transform-origin: center;
}
.slot-btn.next-slot .slot-placeholder {
  color: #6b4d00 !important;
  font-size: 1.85rem !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.slot-btn.next-slot::before {
  color: rgba(82,57,0,.62) !important;
}
.slot-btn.next-slot::after {
  color: rgba(91,64,0,.72) !important;
}

/* El "+" SOLO late durante el onboarding guiado; terminado el onboarding queda quieto.
   Y si el foco pasó al menú o a "Ejecutar", tampoco late. */
body.onb-guided:not(.cta-busy) .slot-btn.next-slot { animation: ctaPlus .82s ease-in-out infinite !important; }
body:not(.onb-guided) .slot-btn.next-slot, body.cta-busy .slot-btn.next-slot { animation: none !important; transform: none !important; filter: none !important; }
@keyframes slotPulseStrong {
  0%,100% { box-shadow: inset 0 -3px 0 rgba(130,88,0,.15), 0 0 0 2px rgba(255,207,74,.18), 0 5px 11px rgba(255,190,31,.12); }
  50% { box-shadow: inset 0 -3px 0 rgba(130,88,0,.15), 0 0 0 6px rgba(255,207,74,.09), 0 7px 16px rgba(255,190,31,.18); }
}

/* Mapa + ejecutar como una unidad vertical. */
.map-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 0 6px !important;
}
.map-canvas-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.map-actions {
  min-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
}
.map-run-btn.primary-btn {
  width: min(224px, 76%) !important;
  min-height: 39px !important;
  border-radius: 17px !important;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.15), 0 7px 13px rgba(16,52,39,.13) !important;
}

/* Consola: legible, de aire terminal, pero subordinada. */
.bottom-hud.console-hud {
  min-height: 35px !important;
  padding: 5px 7px 5px 10px !important;
  border-radius: 14px !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  gap: 5px !important;
  background: linear-gradient(180deg, #f4f8f6, #e8eeeb) !important;
  color: rgba(36,65,55,.66) !important;
  border: 1px solid rgba(25,48,40,.065) !important;
  box-shadow: 0 4px 9px rgba(16,52,39,.065), inset 0 1px 0 rgba(255,255,255,.74) !important;
}
.feedback.terminal-feedback {
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 20px !important;
  color: rgba(36,65,55,.66) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: clamp(.74rem, 2.9vw, .90rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
}
.feedback.terminal-feedback::before {
  margin-right: 5px !important;
  color: rgba(46,134,90,.50) !important;
}
.feedback.terminal-feedback.typing::after {
  color: rgba(46,134,90,.52) !important;
}
.feedback[data-type="success"],
.feedback[data-type="error"] {
  color: rgba(36,65,55,.76) !important;
}
.console-hint-btn {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(36,65,55,.36) !important;
  font-size: .82rem !important;
  box-shadow: none !important;
  opacity: .68 !important;
  padding: 0 !important;
  filter: grayscale(.32) !important;
}
.console-hint-btn:hover,
.console-hint-btn:focus-visible { color: rgba(36,65,55,.58) !important; opacity: .9 !important; }
.console-hint-btn span { display: none !important; }

@media (max-width: 520px) {
  .mission-card.hud-v37 {
    grid-template-columns: clamp(52px, 14.5vw, 70px) minmax(0, 1fr) 32px !important;
    min-height: 44px !important;
    gap: 5px !important;
    padding: 5px 6px !important;
  }
  .mission-card.hud-v37 .hud-global,
  .mission-card.hud-v37 .global-progress { height: 31px !important; border-radius: 11px !important; }
  .mission-card.hud-v37 .global-progress small { font-size: .48rem !important; }
  .mission-card.hud-v37 .hud-mission-panel {
    height: 31px !important;
    grid-template-columns: 24px minmax(0, 1fr) auto minmax(50px, max-content);
    gap: 5px;
    padding: 3px 7px 3px 4px;
    border-radius: 14px;
  }
  .mission-card.hud-v37 .mission-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: .88rem !important;
  }
  .mission-card.hud-v37 #levelTitle { font-size: clamp(.70rem, 3.05vw, .88rem) !important; }
  .mission-card.hud-v37 .world-progress { gap: 2px; }
  .mission-card.hud-v37 .progress-dot { width: 12px !important; height: 12px !important; min-width: 12px !important; font-size: .34rem !important; }
  .mission-card.hud-v37 .menu-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; font-size: 1.10rem !important; }
  .slot-btn.next-slot .slot-placeholder { font-size: 1.7rem !important; }
  .map-card { gap: 3px !important; padding-bottom: 5px !important; }
  .map-actions { min-height: 38px !important; }
  .map-run-btn.primary-btn { min-height: 37px !important; width: min(204px, 78%) !important; }
  .bottom-hud.console-hud { min-height: 34px !important; padding-block: 4px !important; }
  .feedback.terminal-feedback { font-size: .74rem !important; }
}

@media (max-width: 380px) {
  .mission-card.hud-v37 { grid-template-columns: 50px minmax(0, 1fr) 30px !important; gap: 4px !important; }
  .mission-card.hud-v37 .hud-global,
  .mission-card.hud-v37 .global-progress { height: 29px !important; }
  .mission-card.hud-v37 .global-progress small { font-size: .43rem !important; }
  .mission-card.hud-v37 .hud-mission-panel { grid-template-columns: 22px minmax(0, 1fr) auto minmax(43px, max-content); height: 29px !important; padding-inline: 4px 5px; }
  .mission-card.hud-v37 .mission-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: .80rem !important; }
  .mission-card.hud-v37 #levelTitle { font-size: .64rem !important; }
  .mission-card.hud-v37 .progress-dot { width: 10px !important; height: 10px !important; min-width: 10px !important; font-size: 0 !important; }
  .mission-card.hud-v37 .hud-divider { font-size: .82rem; }
}

@media (max-height: 720px) {
  .mission-card.hud-v37 { min-height: 39px !important; padding-block: 4px !important; }
  .mission-card.hud-v37 .hud-global,
  .mission-card.hud-v37 .global-progress { height: 28px !important; }
  .mission-card.hud-v37 .hud-mission-panel { height: 28px !important; }
  .mission-card.hud-v37 .mission-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: .80rem !important; }
  .mission-card.hud-v37 .progress-dot { width: 11px !important; height: 11px !important; min-width: 11px !important; font-size: 0 !important; }
  .mission-card.hud-v37 .menu-btn { height: 29px !important; width: 29px !important; min-width: 29px !important; }
  .map-actions { min-height: 36px !important; }
  .map-run-btn.primary-btn { min-height: 34px !important; }
  .bottom-hud.console-hud { min-height: 31px !important; }
}

/* =========================
   v3.8 · Mantenimiento seguro
   ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* ------------------------------------------------------------
   v3.9 · Ajustes de ronda y flechas
   - La lógica visual de flechas queda resuelta en renderer.js para evitar superposición en cruces.
------------------------------------------------------------ */


/*
   v3.10 · Íconos de instrucciones y selector
   - El selector contextual respeta modo texto / modo íconos.
   - Los íconos se mantienen visibles en el picker cuando el modo íconos está activo.
   - Las flechas de giro usan SVG abiertos, tipo L suavemente curvada.
*/
body.icon-mode .picker-btn .cmd-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
}
body.icon-mode .picker-btn .cmd-label { display: none; }
body.text-mode .picker-btn .cmd-icon { display: none; }
body.text-mode .picker-btn .cmd-label { display: inline; }

body.icon-mode .picker-btn {
  color: #102a22;
}
body.icon-mode .slot-btn.filled .cmd-icon {
  width: 22px;
  height: 22px;
}


/* v4.0 · Mecánica de pieza + rompecabezas */
.puzzle-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(11,19,37,.62);backdrop-filter:blur(9px)}
.puzzle-overlay.hidden{display:none}.puzzle-card{width:min(94vw,520px);max-height:min(94vh,780px);overflow:auto;border-radius:30px;padding:18px;color:#10213f;background:linear-gradient(180deg,#fffdf5,#f5fbff);border:3px solid rgba(255,213,94,.95);box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.85);transform:translateY(14px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}.puzzle-overlay.show .puzzle-card{transform:translateY(0) scale(1);opacity:1}.puzzle-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.puzzle-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:#fff2bd;color:#8a5b00;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.puzzle-card h2{margin:6px 0 0;font-size:clamp(1.55rem,6vw,2.2rem);line-height:1;color:#11386f}.puzzle-mini-piece{width:82px;height:82px;flex:0 0 82px;border-radius:22px;background:#fff center/76% 76% no-repeat;box-shadow:inset 0 0 0 2px rgba(17,56,111,.08),0 10px 20px rgba(17,56,111,.12)}.puzzle-description,.puzzle-hint{display:none}.puzzle-stage{position:relative;display:grid;place-items:center;padding:14px;border-radius:28px;background:radial-gradient(circle at 50% 15%,#fff,#eaf7ff);box-shadow:inset 0 0 0 2px rgba(46,184,114,.16)}.puzzle-board{width:min(78vw,336px);aspect-ratio:1;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:0;padding:0;overflow:hidden;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 4px rgba(255,255,255,.92),0 16px 35px rgba(17,56,111,.14);touch-action:manipulation}.puzzle-tile{position:relative;border:0;border-radius:0;background-color:#fff;background-repeat:no-repeat;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:none;transition:box-shadow .14s ease,filter .14s ease,opacity .14s ease,transform .12s ease}.puzzle-tile:hover,.puzzle-tile:focus-visible{outline:none;filter:brightness(1.04)}.puzzle-tile.pressed{filter:brightness(1.06)}.puzzle-tile.dragging{cursor:grabbing;box-shadow:0 20px 38px rgba(17,56,111,.32),0 0 0 5px rgba(46,184,114,.32);opacity:.97;transition:none}.puzzle-tile.drop-target{filter:brightness(1.14);box-shadow:inset 0 0 0 8px #ffd55e}.puzzle-tile.selected{z-index:2;filter:saturate(1.15) brightness(1.03);box-shadow:inset 0 0 0 5px #2eb872}.puzzle-tile.solved{animation:puzzleSnap .38s ease both}@keyframes puzzleSnap{0%{filter:brightness(1)}55%{filter:brightness(1.18)}100%{filter:brightness(1)}}.puzzle-solved-badge{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:9px 14px;border-radius:999px;background:#2eb872;color:#fff;font-weight:1000;box-shadow:0 10px 22px rgba(46,184,114,.34);animation:puzzleBadge .48s ease both}.puzzle-solved-badge.hidden{display:none}@keyframes puzzleBadge{from{opacity:0;transform:translate(-50%,8px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}.puzzle-piece-info{display:grid;gap:4px;margin:14px 0;padding:13px 14px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 2px rgba(17,56,111,.08)}.puzzle-piece-info strong{color:#11386f;font-size:1.15rem}.puzzle-piece-info span{color:#4a5a73;font-weight:700}.puzzle-actions{display:flex;gap:10px}.puzzle-secondary-btn,.puzzle-continue-btn{flex:1;border:0;border-radius:18px;padding:13px 14px;font-weight:1000;cursor:pointer}.puzzle-secondary-btn{background:#e8eef7;color:#18345f}.puzzle-continue-btn{background:linear-gradient(135deg,#2eb872,#22a4df);color:#fff;box-shadow:0 12px 24px rgba(46,184,114,.26)}.puzzle-continue-btn:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed;box-shadow:none}body.puzzle-open .map-actions .next-action{display:none!important}@media (max-height:720px){.puzzle-card{padding:14px;border-radius:24px}.puzzle-board{width:min(64vw,264px)}.puzzle-mini-piece{width:62px;height:62px;flex-basis:62px}.puzzle-description{margin-bottom:6px}.puzzle-hint{margin-bottom:10px;padding:8px 10px;font-size:.95rem}}@media (prefers-reduced-motion:reduce){.puzzle-card,.puzzle-tile,.puzzle-solved-badge{transition:none!important;animation:none!important}}

/* v4.0.6 - Puzzle robusto: pieza fantasma + cálculo matemático de casillero */
.puzzle-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  touch-action:none;
}
.puzzle-slot{
  position:relative;
  overflow:hidden;
  background:#fff;
  touch-action:none;
}
.puzzle-slot::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(30,50,70,.07);
  pointer-events:none;
}
.puzzle-slot.source{opacity:.32}
.puzzle-slot.target::after{
  box-shadow:inset 0 0 0 8px #ffd55e;
  background:rgba(255,213,94,.16);
}
.puzzle-slot.selected::after{
  box-shadow:inset 0 0 0 6px #2eb872;
  background:rgba(46,184,114,.12);
}
.puzzle-piece{
  width:100%;
  height:100%;
  background-color:#fff;
  background-repeat:no-repeat;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.puzzle-piece:active{cursor:grabbing}
.puzzle-piece.solved{animation:puzzleSnap .38s ease both}
.puzzle-ghost{
  position:fixed;
  z-index:9999;
  width:var(--puzzle-ghost-size);
  height:var(--puzzle-ghost-size);
  background-repeat:no-repeat;
  pointer-events:none;
  box-shadow:0 18px 35px rgba(17,56,111,.34),0 0 0 5px rgba(255,213,94,.84);
  transform:scale(1.04);
  will-change:left,top;
}
body.puzzle-dragging{
  cursor:grabbing;
  overflow:hidden;
}

/* ============================================================
   v5 — Laboratorio, inventario, graduación y montaje
   ============================================================ */

/* Comando R (recoger) */
.cmd-r { mask-image: url('../assets/icons/command-r.svg'); -webkit-mask-image: url('../assets/icons/command-r.svg'); }

/* Acento de laboratorio: el motor setea --brand a turquesa; reforzamos algunos detalles */
body.lab-mode .map-card { box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--brand) 30%, white 70%); }

/* ---------- Inventario (kit de Robby) ---------- */
.inventory-strip {
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--brand) 10%, white 90%);
  border: 1.5px solid color-mix(in srgb, var(--brand) 28%, white 72%);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}
body.show-inventory .inventory-strip { display: flex; flex-wrap: wrap; }
.inv-slot {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: #ffffff;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 35%, #c9d6dd 65%);
  display: grid; place-items: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inv-slot.filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 55%, white 45%);
  background: color-mix(in srgb, var(--brand) 8%, white 92%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent), var(--soft-shadow);
}
.inv-img { width: 34px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.inv-ghost { width: 20px; height: 20px; border-radius: 6px; background: repeating-linear-gradient(45deg, #e6eef2, #e6eef2 4px, #f4f8fa 4px, #f4f8fa 8px); opacity: .8; }
.inv-slot.just-filled { animation: invPop .55s cubic-bezier(.3,1.4,.5,1); }
@keyframes invPop { 0%{ transform: scale(.6); } 60%{ transform: scale(1.18); } 100%{ transform: scale(1); } }

/* Pieza que vuela al inventario */
.piece-flyer {
  position: fixed; z-index: 1200; pointer-events: none;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 6px 12px rgba(16,52,39,.3));
}

/* ---------- Overlay de graduación ---------- */
.grad-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 30%, rgba(22,177,201,.35), rgba(10,30,38,.78));
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.grad-overlay.show { opacity: 1; pointer-events: auto; }
.grad-card {
  position: relative; width: min(440px, 94vw);
  background: var(--panel); border-radius: 22px;
  padding: 26px 24px 24px; text-align: center;
  box-shadow: var(--shadow); overflow: hidden;
  transform: translateY(16px) scale(.96); transition: transform .3s cubic-bezier(.3,1.3,.5,1);
}
.grad-overlay.show .grad-card { transform: none; }
.grad-burst {
  position: absolute; inset: -40% -10% auto -10%; height: 60%;
  background: conic-gradient(from 0deg, transparent, rgba(22,177,201,.18), transparent 40%);
  animation: gradSpin 6s linear infinite;
}
@keyframes gradSpin { to { transform: rotate(360deg); } }
.grad-robbie { margin: 0 auto 6px; position: relative; }
.grad-robbie .grad-arm {
  position: absolute; right: -6px; top: 40%;
  width: 26px; height: 6px; border-radius: 4px;
  background: #3a4654;
  transform-origin: left center; animation: armWave 1.6s ease-in-out infinite;
}
.grad-robbie .grad-arm::after { content: ''; position: absolute; right: -7px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ffcf4a; }
@keyframes armWave { 0%,100%{ transform: rotate(-8deg); } 50%{ transform: rotate(18deg); } }
.grad-kicker { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--brand); }
.grad-title { margin: 4px 0 8px; font-size: 1.4rem; color: var(--ink); }
.grad-text { margin: 0 0 14px; color: color-mix(in srgb, var(--ink) 78%, white 22%); font-size: .98rem; }
.grad-command {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: color-mix(in srgb, var(--brand) 10%, white 90%);
  border: 1.5px solid color-mix(in srgb, var(--brand) 30%, white 70%);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 18px;
}
.grad-command .cmd-icon { width: 32px; height: 32px; color: var(--brand); flex: none; }
.grad-command strong { font-size: 1.15rem; color: var(--ink); }
.grad-command span { display: block; font-size: .85rem; color: color-mix(in srgb, var(--ink) 70%, white 30%); }
.grad-start-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white 18%), var(--brand));
  color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--soft-shadow); transition: transform .12s ease;
}
.grad-start-btn:active { transform: scale(.97); }

/* ---------- Overlay de montaje del sistema ---------- */
.assembly-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 20%, rgba(22,177,201,.28), rgba(10,30,38,.82));
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.assembly-overlay.show { opacity: 1; pointer-events: auto; }
.assembly-card {
  width: min(520px, 96vw); max-height: 94vh; overflow: auto;
  background: var(--panel); border-radius: 22px; padding: 18px 18px 20px;
  box-shadow: var(--shadow); text-align: center;
  transform: translateY(16px) scale(.97); transition: transform .3s cubic-bezier(.3,1.3,.5,1);
}
.assembly-overlay.show .assembly-card { transform: none; }
.assembly-head h2 { margin: 2px 0 4px; font-size: 1.25rem; color: var(--ink); }
.assembly-message { margin: 0 0 12px; font-size: .92rem; color: color-mix(in srgb, var(--ink) 75%, white 25%); min-height: 1.2em; }
.assembly-overlay.alive .assembly-message { color: var(--brand); font-weight: 800; }
.assembly-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 380px; margin: 0 auto 14px;
  background: color-mix(in srgb, var(--brand) 6%, white 94%);
  border: 1.5px solid color-mix(in srgb, var(--brand) 22%, white 78%);
  border-radius: 18px; touch-action: none;
}
.assembly-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire-base { fill: none; stroke: #c2d2da; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wire-flow {
  fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 7; stroke-dashoffset: 0; opacity: 0; transition: opacity .4s ease;
}
.assembly-overlay.alive .wire-flow { opacity: 1; animation: wireFlow 1s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -24; } }
.asm-slot {
  position: absolute; width: 58px; height: 58px; transform: translate(-50%, -50%);
  border-radius: 14px; background: #fff;
  border: 2px dashed color-mix(in srgb, var(--brand) 40%, #c2d2da 60%);
  display: grid; place-items: center; touch-action: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.asm-slot.hot { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); transform: translate(-50%,-50%) scale(1.08); }
.asm-slot.filled { border-style: solid; border-color: color-mix(in srgb, var(--brand) 55%, white 45%); background: color-mix(in srgb, var(--brand) 8%, white 92%); }
.asm-slot-label {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; font-weight: 700; white-space: nowrap; color: color-mix(in srgb, var(--ink) 65%, white 35%);
}
.asm-slot.filled .asm-slot-label { color: var(--brand); }
.asm-piece-img { width: 44px; height: 44px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.assembly-overlay.alive[data-lab="circuito"] .asm-slot[data-piece="led"] { box-shadow: 0 0 0 4px rgba(255,207,74,.5), 0 0 24px 6px rgba(255,207,74,.7); animation: ledGlow 1.1s ease-in-out infinite; }
@keyframes ledGlow { 0%,100%{ box-shadow: 0 0 0 4px rgba(255,207,74,.4), 0 0 18px 4px rgba(255,207,74,.55);} 50%{ box-shadow: 0 0 0 5px rgba(255,207,74,.6), 0 0 30px 10px rgba(255,207,74,.85);} }
.assembly-tray {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.asm-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px;
  background: #fff; border: 1.5px solid #dbe6ec; border-radius: 12px;
  box-shadow: var(--soft-shadow); cursor: grab; touch-action: none; user-select: none;
  transition: opacity .2s ease, transform .12s ease;
}
.asm-chip:active { transform: scale(.96); }
.asm-chip b { font-size: .8rem; color: var(--ink); }
.asm-chip-img { width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.asm-chip.used { opacity: .25; pointer-events: none; filter: grayscale(.6); }
.asm-ghost {
  position: fixed; z-index: 1200; width: 52px; height: 52px; pointer-events: none;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 8px 14px rgba(16,52,39,.35)); transform: scale(1.1);
}
body.asm-dragging { cursor: grabbing; user-select: none; }
.assembly-done-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white 18%), var(--brand));
  color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--soft-shadow); transition: transform .12s ease;
}
.assembly-done-btn:active { transform: scale(.97); }

/* La caja se "abre" al iniciar el unboxing */
.puzzle-overlay.box-opening .puzzle-board { animation: boxOpen .55s cubic-bezier(.3,1.2,.5,1); }
@keyframes boxOpen { 0%{ transform: scale(.4) rotate(-6deg); opacity: 0; } 60%{ transform: scale(1.06); opacity: 1; } 100%{ transform: scale(1); } }

/* ============================================================
   v6 — HUB multilaboratorio + glow del semáforo
   ============================================================ */

/* Botón "volver al hub" en el header (solo visible en fase lab) */
.hub-btn {
  width: 40px; height: 40px; flex: 0 0 auto; margin-right: 6px;
  border: none; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--brand) 16%, white 84%);
  color: var(--brand-dark, var(--brand)); font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--brand) 30%, transparent);
  transition: transform .12s ease, background .2s ease;
}
.hub-btn:hover { transform: translateY(-1px); }
.hub-btn:active { transform: translateY(1px); }
.hub-btn.hidden { display: none; }

/* Overlay del hub */
.hub-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 28px); opacity: 0; pointer-events: none;
  transition: opacity .22s ease; overflow-y: auto;
}
.hub-overlay.show { opacity: 1; pointer-events: auto; }
.hub-overlay.hidden { display: none; }
.hub-sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #bdeaff 0%, #8fd4f5 38%, #6fb9e8 70%, #5aa6dd 100%);
}
.hub-sky::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.05)),
    repeating-linear-gradient(90deg, #d9c39a 0 38px, #cdb589 38px 76px);
  border-top: 5px solid #b79f73;
}
.hub-sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: #5b5f66;
  box-shadow: inset 0 6px 0 rgba(255,255,255,.08);
}

.hub-card {
  position: relative; z-index: 1; width: min(640px, 100%);
  background: rgba(255,255,255,.94); border-radius: 26px;
  padding: clamp(18px, 4vw, 30px) clamp(16px, 4vw, 30px) clamp(22px, 5vw, 34px);
  box-shadow: 0 24px 60px rgba(20,40,70,.32); text-align: center;
  border: 3px solid #fff;
}
.hub-robbie { margin: 0 auto 8px; transform: scale(.92); }
.hub-heading { margin: 6px 0 2px; font-size: clamp(20px, 5vw, 28px); color: #1f2b3a; font-weight: 900; letter-spacing: -.01em; }
.hub-sub { margin: 0 0 16px; color: #56657a; font-size: clamp(13px, 3.4vw, 15px); }

.hub-labs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

/* Tarjeta-edificio de cada laboratorio (son <button class="hub-card"> dentro de #hubLabs;
   el reset all:unset neutraliza los estilos del contenedor .hub-card) */
.hub-labs > button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px 14px; border-radius: 18px; overflow: hidden;
  background: #fff; border: 2px solid #e6ecf3;
  box-shadow: 0 6px 0 #e3e9f0; transition: transform .14s ease, box-shadow .14s ease, border-color .2s ease;
}
.hub-labs > button .hub-building {
  position: relative; width: 100%; height: 54px; margin-bottom: 8px;
  display: block; border-radius: 10px 10px 6px 6px;
  background:
    linear-gradient(180deg, var(--lab-body) 0%, color-mix(in srgb, var(--lab-body) 80%, black 20%) 100%);
}
.hub-labs > button .hub-roof {
  position: absolute; left: -4%; right: -4%; top: -10px; height: 16px;
  background: var(--lab-roof); border-radius: 6px 6px 0 0;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--lab-roof) 70%, black 30%);
}
.hub-labs > button .hub-windows {
  position: absolute; inset: 14px 12px 8px; border-radius: 4px;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 35%, rgba(255,255,255,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 75%, rgba(255,255,255,.7) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.7) 0 3px, transparent 4px);
}
.hub-labs > button .hub-emoji {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.hub-kicker { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lab-accent); margin-top: 4px; }
.hub-name { font-size: clamp(15px, 4vw, 17px); font-weight: 900; color: #1f2b3a; margin-top: 2px; line-height: 1.15; }
.hub-tagline { font-size: 12px; color: #6b7990; margin-top: 4px; min-height: 30px; }
.hub-status { margin-top: 10px; font-size: 12.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.hub-status.go { background: var(--lab-accent); color: #fff; }
.hub-status.done { background: color-mix(in srgb, var(--lab-accent) 16%, white 84%); color: var(--lab-accent); }
.hub-status.locked { background: #eef1f5; color: #9aa6b6; }

.hub-labs > button.is-available { border-color: color-mix(in srgb, var(--lab-accent) 40%, #e6ecf3); box-shadow: 0 6px 0 color-mix(in srgb, var(--lab-accent) 30%, #e3e9f0); }
.hub-labs > button.is-available:hover { transform: translateY(-3px); box-shadow: 0 9px 0 color-mix(in srgb, var(--lab-accent) 35%, #e3e9f0); }
.hub-labs > button.is-available:active { transform: translateY(0); box-shadow: 0 3px 0 color-mix(in srgb, var(--lab-accent) 35%, #e3e9f0); }
.hub-labs > button.is-completed { border-color: color-mix(in srgb, var(--lab-accent) 45%, white); }
.hub-labs > button.is-completed::after {
  content: "✓"; position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; background: var(--lab-accent); color: #fff;
  font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.hub-labs > button.is-completed:hover { transform: translateY(-2px); }
.hub-labs > button.is-locked { cursor: not-allowed; filter: grayscale(.7) opacity(.85); }
.hub-labs > button.is-locked .hub-building { background: #c7cdd6; }
.hub-labs > button.is-locked .hub-roof { background: #aab2bd; box-shadow: 0 3px 0 #97a0ac; }
.hub-labs > button.is-locked::after {
  content: "🔒"; position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 16px;
}

/* Glow del semáforo: las tres luces se encienden en secuencia */
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-rojo"],
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-amarillo"],
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-verde"] {
  animation: semGlow 3s ease-in-out infinite;
}
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-rojo"] { --sem-color: 255,80,80; animation-delay: 0s; }
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-amarillo"] { --sem-color: 255,200,60; animation-delay: 1s; }
.assembly-overlay.alive[data-lab="semaforo"] .asm-slot[data-piece="led-verde"] { --sem-color: 70,210,110; animation-delay: 2s; }
@keyframes semGlow {
  0%, 22%   { box-shadow: 0 0 0 5px rgba(var(--sem-color), .65), 0 0 30px 10px rgba(var(--sem-color), .9); }
  33%, 100% { box-shadow: 0 0 0 3px rgba(var(--sem-color), .12); }
}

/* ============================================================
   v7 — Logro celebración (#4), interruptor (#9), jigsaw N×N (#13)
   ============================================================ */

/* ---- Pantalla de logro: celebración (oculta el lenguaje de "app") ---- */
.reward-card.celebrate .reward-terminal,
.reward-card.celebrate .reward-meter-wrap,
.reward-card.celebrate .reward-code-rain,
.reward-card.celebrate .reward-stats { display: none !important; }

.reward-card.celebrate { text-align: center; padding-top: 30px; }
.reward-card.celebrate .reward-stars { display: flex; justify-content: center; gap: 10px; margin: 2px 0 6px; }
.reward-card.celebrate .reward-star {
  font-size: clamp(40px, 13vw, 60px); line-height: 1; color: #e3e8ee;
  transform: scale(0) rotate(-30deg); animation: starPop .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: var(--delay, .2s);
}
.reward-card.celebrate .reward-star.on { color: #ffc62e; text-shadow: 0 4px 0 #e8a200, 0 0 22px rgba(255,198,46,.6); }
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

.reward-card.celebrate .reward-robbie.cheer { margin: 0 auto 4px; animation: robbieCheer 1.1s ease-in-out infinite; }
@keyframes robbieCheer { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }

.reward-card.celebrate .reward-title { font-size: clamp(22px, 6vw, 30px); font-weight: 900; color: #1f2b3a; margin: 6px 0 2px; letter-spacing: -.01em; }
.reward-card.celebrate .reward-subtitle { color: #5a6b80; margin: 0 0 12px; font-size: clamp(13px, 3.6vw, 15px); }

.reward-steps { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; background: #f3f6fa; border-radius: 999px; padding: 8px 16px; color: #44515f; font-size: 14px; font-weight: 700; }
.reward-steps strong { font-size: 22px; color: var(--brand); font-weight: 900; }
.reward-steps .reward-opt { font-style: normal; font-weight: 700; color: #9aa6b6; font-size: 12.5px; }
.reward-steps .reward-opt b { color: #6b7888; }

.reward-seal {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: linear-gradient(135deg, #ffd23f, #ff9d2e); color: #6a3b00;
  font-weight: 900; font-size: 13px; letter-spacing: .04em; padding: 8px 12px; border-radius: 12px;
  transform: rotate(9deg) scale(0); transform-origin: center; box-shadow: 0 6px 16px rgba(255,140,0,.4);
  border: 2px solid #fff; animation: sealPop .5s cubic-bezier(.2,1.5,.4,1) .9s forwards;
}
.reward-seal.hidden { display: none; }
@keyframes sealPop { 0% { transform: rotate(9deg) scale(0); } 70% { transform: rotate(6deg) scale(1.18); } 100% { transform: rotate(9deg) scale(1); } }

.reward-progress-track { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.reward-progress-track .rp-dot { width: 9px; height: 9px; border-radius: 50%; background: #dde3ea; }
.reward-progress-track .rp-dot.done { background: #ffc62e; }
.reward-progress-track .rp-dot.current { background: var(--brand); transform: scale(1.3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---- Interruptor funcional del circuito (#9) ---- */
.circuit-switch {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: #fff; border: 2px solid #e3e9f0; border-radius: 999px; padding: 8px 16px 8px 8px;
  box-shadow: 0 8px 22px rgba(20,40,70,.18); font-weight: 800; color: #1f8a52; font-size: 14px;
}
.circuit-switch.hidden { display: none; }
.circuit-switch .cs-track { width: 46px; height: 26px; border-radius: 999px; background: #37c66f; position: relative; transition: background .2s ease; }
.circuit-switch .cs-knob { position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.circuit-switch.is-off { color: #94a1b2; }
.circuit-switch.is-off .cs-track { background: #c4ccd6; }
.circuit-switch.is-off .cs-knob { left: 3px; }

/* Circuito apagado: se corta el flujo y el LED no brilla */
.assembly-overlay.alive.circuit-off .wire-flow { animation: none !important; opacity: .18; }
.assembly-overlay.alive.circuit-off .asm-slot[data-piece="led"] { animation: none !important; box-shadow: none !important; }
.assembly-overlay.alive.circuit-off .asm-slot[data-piece="led"] .asm-piece-img { filter: grayscale(.7) brightness(.8); }

/* ---- Jigsaw N×N: piezas PEGADAS (sin gap) para que el hit-testing sea exacto;
   el "corte" entre piezas se sugiere con una línea muy tenue (.puzzle-slot::after). ---- */
#puzzleBoard { gap: 0 !important; padding: 0 !important; }
#puzzleBoard .puzzle-piece { border-radius: 0; }

/* ============================================================
   v7.1 — HITO 1: hub como ciudad navegable en el canvas
   En fase hub es solo una pantalla de selección: sin panel de
   código, sin botón ejecutar, sin inventario. El mapa ocupa todo.
   ============================================================ */
body.phase-hub #algorithmPanel,
body.phase-hub .map-actions,
body.phase-hub #inventoryStrip,
body.phase-hub #commandPicker { display: none !important; }
body.phase-hub .map-card { flex: 1 1 auto; width: 100%; max-width: none; }
body.phase-hub .playfield { display: flex; }
body.phase-hub #gameCanvas { cursor: pointer; }
/* el hub viejo de tarjetas queda inactivo (ahora vive en el canvas) */
body.phase-hub .hub-overlay { display: none !important; }

/* ============================================================
   v7.2 — HITO 2: instrucción de LAZO (bucle) — iconos, sangría, selector
   ============================================================ */
/* Iconos de las instrucciones de lazo (en picker y en el código) */
.cmd-l { mask-image: url('../assets/icons/command-l.svg'); -webkit-mask-image: url('../assets/icons/command-l.svg'); }
.cmd-f { mask-image: url('../assets/icons/command-f.svg'); -webkit-mask-image: url('../assets/icons/command-f.svg'); }
.picker-btn[data-picker-command="L"], .picker-btn[data-picker-command="F"] { color: #7a5cff; }
.picker-btn.disabled, .picker-btn:disabled { opacity: .32; pointer-events: none; filter: grayscale(.5); }

/* El cuerpo del lazo se muestra sangrado, con un corchete de color a la izquierda */
.slot-btn.loop-open { background: linear-gradient(90deg, rgba(122,92,255,.16), transparent); border-left: 3px solid #7a5cff; }
.slot-btn.loop-close { background: linear-gradient(90deg, rgba(122,92,255,.16), transparent); border-left: 3px solid #7a5cff; }
.slot-btn.in-loop { margin-left: 16px; border-left: 3px solid rgba(122,92,255,.4); background: rgba(122,92,255,.05); }
.slot-btn.loop-open .cmd-text, .slot-btn.loop-close .cmd-text { color: #5a3fd6; font-weight: 900; }

/* Selector "¿cuántas veces repetir?" */
.loop-count {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80;
  background: #fff; border-radius: 18px; padding: 14px 16px 16px;
  box-shadow: 0 16px 40px rgba(20,30,60,.3); border: 2px solid #efe9ff; text-align: center;
  width: min(92vw, 360px);
}
.loop-count-title { font-weight: 800; color: #4a3aa0; font-size: 14px; margin-bottom: 10px; }
.loop-count-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.loop-count-btn {
  border: 2px solid #e6e0ff; background: #f5f2ff; color: #5a3fd6; font-weight: 900; font-size: 17px;
  border-radius: 12px; padding: 12px 0; cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.loop-count-btn:hover { background: #7a5cff; color: #fff; transform: translateY(-2px); }
.loop-count-btn:active { transform: translateY(0); }

/* ============================================================
   v7.3 — #5: el interruptor se acciona tocando su PROPIA pieza
   en el esquema (ya no hay botón flotante que tape "continuar")
   ============================================================ */
.asm-slot.switchable {
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(46,204,113,.5), 0 0 14px rgba(46,204,113,.4);
  animation: switchPulse 1.6s ease-in-out infinite;
}
@keyframes switchPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(46,204,113,.45), 0 0 12px rgba(46,204,113,.32); }
  50%     { box-shadow: 0 0 0 5px rgba(46,204,113,.6), 0 0 22px rgba(46,204,113,.55); }
}
.asm-slot.switchable::after {
  content: "ENCENDIDO ⏻";
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  background: #2ecc71; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.22);
}
#assemblyOverlay.circuit-off .asm-slot.switchable::after { content: "APAGADO ⏻"; background: #b0563f; }
#assemblyOverlay.circuit-off .asm-slot.switchable { box-shadow: 0 0 0 3px rgba(176,86,63,.45); animation: none; }
/* el viejo botón flotante queda sin uso */
.circuit-switch { display: none !important; }

/* ============================================================
   v7.3 — #2: onboarding guiado (Call To Action)
   La instrucción que toca ingresar titila; al terminar, titila "Ejecutar".
   ============================================================ */
.picker-btn.cta-pulse { position: relative; z-index: 2; animation: ctaPulse 1s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(46,184,114,.5), 0 6px 16px rgba(46,184,114,.4); }
  50%      { transform: scale(1.13); box-shadow: 0 0 0 9px rgba(46,184,114,0), 0 8px 20px rgba(46,184,114,.5); }
}
#runBtn.cta-strong { animation: ctaStrong .54s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes ctaStrong {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(46,184,114,.5); }
  50%      { transform: scale(1.13); box-shadow: 0 0 0 16px rgba(46,184,114,.14), 0 18px 40px rgba(46,184,114,.85); }
}
/* En el onboarding el selector es una guía permanente: sin botón de cerrar y
   con las instrucciones aún no necesarias claramente deshabilitadas. */
/* (El selector del onboarding usa el MISMO menú emergente que el juego real;
   ver .command-picker, que ahora ajusta sus botones a dos líneas si hace falta.) */

/* ==================================================================
   v7.8 — MODO BLOQUES = el IDE de texto vestido de piezas encastrables.
   Mismo panel (es el contenedor), mismo selector lateral, misma mecánica.
   Sólo cambia el aspecto de las instrucciones: pieza con forma de encastre,
   sólo ícono (sin palabra), color por comando, pegadas entre sí.
   ================================================================== */

/* Selector lateral: en bloques muestra el ÍCONO (como en texto muestra la letra) */
body.blocks-mode .picker-btn .cmd-icon { display: inline-block; }
body.blocks-mode .picker-btn .cmd-label { display: none; }

/* En la lista: sólo ícono; ocultamos el texto "A;" (pero mantenemos ×n del lazo) */
body.blocks-mode .algorithm-list .cmd-text { display: none; }
body.blocks-mode .algorithm-list .slot-btn.loop-open .cmd-text { display: block; font-size: .66rem; margin-top: 1px; }
body.blocks-mode .algorithm-list .cmd-icon { display: inline-block; width: 23px; height: 23px; }
body.blocks-mode .slot-btn::before { display: none; }            /* sin número de paso */
body.blocks-mode .slot-btn.next-slot::after { display: none; }   /* sin cursor titilante en bloques */
body.blocks-mode .slot-btn.empty:not(.next-slot) { display: none; } /* sin ranuras vacías sueltas */

/* Piezas pegadas (encastre): el solapamiento va en el <li> para que se vean continuas */
body.blocks-mode .algorithm-list { gap: 0 !important; padding: 7px 5px 14px; }
body.blocks-mode .algorithm-list li { min-height: 0 !important; margin: 0; padding: 0; flex: 0 0 auto; position: relative; }
body.blocks-mode .algorithm-list li:not(:first-child) { margin-top: -8px !important; }
body.blocks-mode .algorithm-list li:nth-child(n) { z-index: 1; }

/* Forma de pieza encastrable (muesca arriba + lengüeta abajo) y solapamiento */
body.blocks-mode .slot-btn {
  --tx: 15px; --tw: 22px; --th: 8px;
  min-height: 58px; padding: 11px 4px; border: none; border-radius: 0; box-shadow: none; margin: 0;
  clip-path: polygon(
    0 0, var(--tx) 0, calc(var(--tx) + 4px) var(--th), calc(var(--tx) + var(--tw) - 4px) var(--th), calc(var(--tx) + var(--tw)) 0,
    100% 0, 100% calc(100% - var(--th)),
    calc(var(--tx) + var(--tw)) calc(100% - var(--th)), calc(var(--tx) + var(--tw) - 4px) 100%,
    calc(var(--tx) + 4px) 100%, var(--tx) calc(100% - var(--th)), 0 calc(100% - var(--th))
  );
}
body.blocks-mode .slot-btn.filled {
  --bc: #1fcf86;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 80%, #fff 20%), color-mix(in srgb, var(--bc) 94%, #000 6%));
  color: #fff;
}
/* Paleta de colores por comando (vivos, de juguete) */
body.blocks-mode .slot-btn.b-move  { --bc: #1fcf86; }
body.blocks-mode .slot-btn.b-left  { --bc: #2f9bf0; }
body.blocks-mode .slot-btn.b-right { --bc: #ff8a3d; }
body.blocks-mode .slot-btn.b-pick  { --bc: #ffc62e; color: #5a4600; }
body.blocks-mode .slot-btn.b-loop  { --bc: #9b5cf0; }

/* El "+" inicial / siguiente: también con forma de pieza (molde a llenar) */
body.blocks-mode .slot-btn.next-slot { background: rgba(255,207,74,.34); border: none; }
body.blocks-mode .slot-btn.next-slot .slot-placeholder { color: #6b4d00 !important; font-size: 1.95rem !important; line-height: 1; }

/* Estados, adaptados a la silueta recortada (filter en vez de box-shadow/outline) */
body.blocks-mode .slot-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 80%, #fff 20%), var(--bc)); color: #fff;
  box-shadow: none; transform: scale(1.05); filter: drop-shadow(0 0 6px #ffd23f) brightness(1.16); z-index: 3;
}
body.blocks-mode .slot-btn.editing { outline: none; filter: drop-shadow(0 0 4px var(--accent)); z-index: 3; }
body.blocks-mode .slot-btn.error-line { background: #ff6b6b; filter: drop-shadow(0 0 5px rgba(231,76,60,.8)); }

/* El selector lateral muestra cada instrucción como el bloque que se va a colocar */
body.blocks-mode .picker-btn {
  --tx: 14px; --tw: 22px; --th: 6px; --bc: #1fcf86;
  min-height: 50px; border: none; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 80%, #fff 20%), color-mix(in srgb, var(--bc) 94%, #000 6%));
  color: #fff;
  clip-path: polygon(
    0 0, var(--tx) 0, calc(var(--tx) + 4px) var(--th), calc(var(--tx) + var(--tw) - 4px) var(--th), calc(var(--tx) + var(--tw)) 0,
    100% 0, 100% calc(100% - var(--th)),
    calc(var(--tx) + var(--tw)) calc(100% - var(--th)), calc(var(--tx) + var(--tw) - 4px) 100%,
    calc(var(--tx) + 4px) 100%, var(--tx) calc(100% - var(--th)), 0 calc(100% - var(--th))
  );
}
body.blocks-mode .picker-btn[data-picker-command="A"] { --bc: #1fcf86; }
body.blocks-mode .picker-btn[data-picker-command="I"] { --bc: #2f9bf0; }
body.blocks-mode .picker-btn[data-picker-command="D"] { --bc: #ff8a3d; }
body.blocks-mode .picker-btn[data-picker-command="R"] { --bc: #ffc62e; color: #5a4600; }
body.blocks-mode .picker-btn[data-picker-command="L"] { --bc: #9b5cf0; }
body.blocks-mode .picker-btn[data-picker-command="F"] { --bc: #9b5cf0; }
body.blocks-mode .picker-btn .cmd-icon { display: inline-block; width: 24px; height: 24px; }
body.blocks-mode .picker-btn.disabled, body.blocks-mode .picker-btn:disabled { opacity: .34; filter: grayscale(.55); }

/* ===== Pantalla de selección de modo (tras la bienvenida) ===== */
.mode-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(18,34,26,.52); }
.mode-overlay.hidden { display: none; }
.mode-overlay.show .mode-card { animation: modeCardIn .26s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes modeCardIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.mode-card { background: #fff; border-radius: 26px; padding: 24px 18px 22px; max-width: 430px; width: 100%; text-align: center; box-shadow: 0 20px 54px rgba(0,0,0,.32); }
.mode-card h2 { margin: 0 0 5px; font-size: 1.24rem; color: var(--ink); font-weight: 1000; }
.mode-sub { margin: 0 0 20px; font-size: .82rem; color: rgba(25,48,40,.6); }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-opt { position: relative; border: 3px solid rgba(25,48,40,.12); border-radius: 18px; padding: 18px 10px 14px; background: #f6fbf8; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .12s ease, border-color .12s ease; }
.mode-opt:active { transform: scale(.97); }
.mode-opt strong { font-size: 1.06rem; color: var(--ink); }
.mode-opt small { font-size: .69rem; color: rgba(25,48,40,.6); line-height: 1.25; }
.mode-opt.recommended { border-color: #1fcf86; background: #eafff4; box-shadow: 0 6px 16px rgba(31,207,134,.22); }
.mode-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #1fcf86; color: #fff; font-size: .6rem; font-weight: 1000; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mode-preview { height: 58px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.mode-blocks-preview .mp { width: 60px; height: 21px; margin-bottom: -3px; clip-path: polygon(0 0, 11px 0, 14px 4px, 25px 4px, 28px 0, 100% 0, 100% calc(100% - 4px), 28px calc(100% - 4px), 25px 100%, 14px 100%, 11px calc(100% - 4px), 0 calc(100% - 4px)); }
.mode-blocks-preview .mp.b-move { background: #1fcf86; }
.mode-blocks-preview .mp.b-right { background: #ff8a3d; }
.mode-blocks-preview .mp.b-loop { background: #9b5cf0; }
.mode-text-preview { font-family: ui-monospace, monospace; font-weight: 900; color: var(--ink); line-height: 1.22; font-size: 1rem; }
.mode-text-preview i { display: block; font-style: normal; }

/* ============================================================
   v7.9.0 — Estado final del juego + Modo desarrollador
   ============================================================ */

/* ---- Estado final (más grande y gratificante que los premios intermedios) ---- */
.finale-overlay{
  position:fixed; inset:0; z-index:1400; display:grid; place-items:center;
  padding:18px 14px calc(18px + var(--safe-bottom));
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,207,74,.34) 0%, rgba(255,207,74,.10) 32%, rgba(8,34,26,.78) 72%, rgba(6,26,20,.92) 100%);
  opacity:0; pointer-events:none; transition:opacity .26s ease; overflow:hidden;
}
.finale-overlay.show{ opacity:1; pointer-events:auto; }
.finale-rays{
  position:absolute; top:-30%; left:50%; width:160vmax; height:160vmax; transform:translateX(-50%);
  background:conic-gradient(from 0deg,
    rgba(255,207,74,0) 0deg, rgba(255,207,74,.16) 20deg, rgba(255,207,74,0) 40deg,
    rgba(96,214,255,.12) 90deg, rgba(255,207,74,0) 130deg, rgba(46,184,114,.14) 200deg,
    rgba(255,207,74,0) 250deg, rgba(255,140,61,.12) 310deg, rgba(255,207,74,0) 360deg);
  filter:blur(2px); opacity:.0; animation:finaleSpin 24s linear infinite, finaleRaysIn .8s ease .1s forwards;
}
@keyframes finaleSpin{ to{ transform:translateX(-50%) rotate(360deg); } }
@keyframes finaleRaysIn{ to{ opacity:.85; } }
.finale-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti-bit{
  position:absolute; top:-6vh; width:11px; height:14px; border-radius:2px; opacity:0;
  animation-name:confettiFall; animation-timing-function:cubic-bezier(.25,.6,.5,1); animation-iteration-count:infinite;
}
@keyframes confettiFall{
  0%{ transform:translateY(-10vh) rotate(0); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translateY(118vh) translateX(var(--dx,0)) rotate(var(--rot,360deg)); opacity:.95; }
}
.finale-card{
  position:relative; width:min(560px,96vw); max-height:92vh; overflow-y:auto; overflow-x:hidden;
  border-radius:30px; padding:34px 20px 20px; text-align:center;
  background:radial-gradient(circle at 50% 0%, rgba(255,207,74,.40) 0%, #ffffff 44%, #ffffff 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 6px rgba(255,207,74,.18);
  transform:translateY(34px) scale(.9); opacity:0;
  animation:finalePop .6s cubic-bezier(.2,.95,.28,1.1) .08s forwards;
}
@keyframes finalePop{ to{ transform:translateY(0) scale(1); opacity:1; } }
.finale-ribbon{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  padding:5px 18px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(90deg,#ff8a3d,var(--accent),#ff8a3d); color:#5a2a00;
  font-weight:900; font-size:.78rem; letter-spacing:.08em;
  box-shadow:0 6px 14px rgba(255,138,61,.4), inset 0 0 0 2px rgba(255,255,255,.6);
  animation:textPop .4s ease .2s both;
}
.finale-trophy{ position:relative; display:grid; place-items:center; height:96px; margin:2px auto -2px; }
.finale-trophy-emoji{ position:relative; font-size:4.2rem; line-height:1; filter:drop-shadow(0 8px 12px rgba(180,120,0,.35)); animation:crownBob 2.4s ease-in-out infinite; }
.finale-trophy-glow{
  position:absolute; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,207,74,.6) 0%, rgba(255,207,74,.18) 45%, transparent 70%);
  animation:trophyPulse 2.4s ease-in-out infinite;
}
@keyframes crownBob{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-7px) rotate(3deg);} }
@keyframes trophyPulse{ 0%,100%{ transform:scale(.92); opacity:.7;} 50%{ transform:scale(1.06); opacity:1;} }
.finale-robbie{
  position:relative; width:70px; height:70px; margin:2px auto 4px; display:grid; place-items:center;
  border-radius:22px; background:linear-gradient(180deg,#ffffff,#edf7f1);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.08), 0 10px 22px rgba(0,0,0,.16);
  animation:robbyParty .9s ease-in-out .3s 3;
}
.finale-kicker{
  display:inline-block; margin:2px 0 2px; padding:3px 14px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); color:#0c2b20;
  font-weight:900; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase;
}
.finale-title{
  margin:6px 0 4px; font-size:clamp(1.7rem,7.4vw,2.4rem); line-height:1.02; letter-spacing:-.03em; color:#16302a;
  animation:textPop .4s ease .34s both;
}
.finale-subtitle{ margin:0 auto 12px; max-width:94%; color:var(--muted); font-weight:800; font-size:.98rem; }
.finale-gallery{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0 12px; }
.finale-system{
  flex:1 1 130px; max-width:170px; min-width:120px; padding:13px 10px 11px; border-radius:20px; text-align:center;
  background:color-mix(in srgb, var(--lab-accent,#2eb872) 12%, #ffffff 88%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--lab-accent,#2eb872) 42%, #ffffff 58%),
             0 10px 22px color-mix(in srgb, var(--lab-accent,#2eb872) 24%, transparent 76%);
  transform:scale(.6); opacity:0; animation:finaleTilePop .5s cubic-bezier(.2,.95,.3,1.25) var(--delay,.3s) forwards;
}
@keyframes finaleTilePop{ to{ transform:scale(1); opacity:1; } }
.finale-system-emoji{ display:block; font-size:2.1rem; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.finale-system-name{ display:block; margin-top:5px; font-weight:900; font-size:.96rem; color:#16302a; }
.finale-system-stars{ display:block; margin-top:2px; color:var(--accent); font-size:1.05rem; letter-spacing:.06em; text-shadow:0 2px 4px rgba(0,0,0,.12); }
.finale-system-built{ display:block; margin-top:3px; font-size:.72rem; font-weight:800; color:color-mix(in srgb, var(--lab-accent,#2eb872) 70%, #355 30%); }
.finale-total{
  display:flex; flex-direction:column; align-items:center; gap:1px; margin:2px auto 14px;
  color:var(--muted); font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
}
.finale-total strong{ font-size:1.5rem; color:#16302a; letter-spacing:0; }
.finale-thanks{ margin:0 auto 12px; color:var(--brand-dark); font-weight:900; font-size:1rem; }
.finale-done-btn{
  width:100%; border:0; cursor:pointer; border-radius:18px; padding:15px 18px;
  font-size:1.08rem; font-weight:900; color:#0c2b20;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white 18%), var(--brand));
  box-shadow:0 7px 0 var(--brand-dark), 0 12px 22px rgba(16,52,39,.2);
  transition:transform .08s ease, box-shadow .08s ease;
}
.finale-done-btn:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--brand-dark), 0 6px 12px rgba(16,52,39,.2); }
@media (max-width:380px){
  .finale-card{ padding:18px 14px 16px; border-radius:24px; }
  .finale-system{ flex-basis:46%; min-width:0; }
}

/* ---- Modo desarrollador (gesto secreto) ---- */
#devHotspot{
  position:fixed; top:0; left:0; width:46px; height:46px; z-index:60;
  background:transparent; pointer-events:auto; -webkit-tap-highlight-color:transparent;
}
.dev-overlay{
  position:fixed; inset:0; z-index:1600; display:grid; place-items:center;
  padding:16px calc(14px + var(--safe-bottom)); background:rgba(6,16,24,.62);
  opacity:0; pointer-events:none; transition:opacity .14s ease;
}
.dev-overlay.show{ opacity:1; pointer-events:auto; }
.dev-card{
  width:min(420px,96vw); max-height:88vh; overflow-y:auto;
  border-radius:18px; padding:14px; color:#e7eef5;
  background:linear-gradient(180deg,#1d2733,#141c25);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.dev-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.dev-head strong{ font-size:1.02rem; color:#ffd86b; }
.dev-close{ width:32px; height:32px; border:0; border-radius:10px; cursor:pointer; font-size:1.2rem; line-height:1; color:#e7eef5; background:rgba(255,255,255,.08); }
.dev-note{ margin:0 0 10px; font-size:.74rem; color:#8da0b4; }
.dev-section-title{ margin:12px 0 6px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#7f93a8; }
.dev-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.dev-lab-name{ flex:1 1 auto; font-size:.82rem; color:#cfdae6; }
.dev-btn{
  border:0; cursor:pointer; border-radius:10px; padding:9px 11px; font-size:.82rem; font-weight:800;
  color:#0c1620; background:#5fd0a0; box-shadow:0 3px 0 rgba(0,0,0,.25); white-space:nowrap;
  font-family:inherit;
}
.dev-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.dev-row .dev-btn{ flex:0 0 auto; padding:8px 10px; }
.dev-body > .dev-btn{ width:100%; margin-bottom:6px; }
.dev-btn.dev-accent{ background:#ffd86b; }
.dev-btn.dev-danger{ background:#ff7a86; color:#2a0c10; margin-top:10px; }