/*
 * BITRUTA — DISEÑO DE REFERENCIA: PROFESIONAL GEOMÉTRICO + MOVIMIENTO SUTIL
 * Capa visual sobre css/styles.css. No contiene ni modifica reglas del juego.
 * Colores: blanco, azul índigo, cian y violeta. Accesible y responsive.
 */
:root {
  --ink:#14275f;
  --muted:#64759a;
  --purple:#5948ea;
  --deep-purple:#4636ca;
  --lavender:#eeeefe;
  --pale-blue:#eff7ff;
  --mint:#26b898;
  --pale-mint:#e5f8f4;
  --coral:#f15d77;
  --pale-coral:#fff0f4;
  --gold:#f5b72d;
  --line:#e1e8f7;
  --white:#fff;
  --bg:#f8fbff;
  --shadow:0 12px 40px rgba(45,76,144,.075);
}
body {
  background:radial-gradient(ellipse 76% 34% at 85% 0%,rgba(224,237,255,.55),transparent 100%),linear-gradient(180deg,#fbfdff,#f7faff 82%,#fff);
  color:var(--ink);font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
}
.page-shape {display:none}
.site-header {
  max-width:1440px;height:78px;margin:auto;padding:0 4.2%;
  background:rgba(255,255,255,.94);border-bottom:1px solid #e4eafb;
  box-shadow:0 1px 8px rgba(32,59,121,.025);position:relative;
}
main {max-width:1440px;padding:0 4.2%}
.logo {color:#0a205c;font-size:24px;gap:9px;letter-spacing:-1.2px}
.logo-contrast{color:#0a205c}
.logo small{font-size:7.5px;color:#8796b8;letter-spacing:1.55px;margin-top:-1px}
.logo-mark{background:none;border:0;border-radius:0;box-shadow:none;width:47px;height:47px;flex:0 0 47px}
.logo-mark svg{width:100%;height:100%;filter:drop-shadow(0 3px 4px #6d88d34b)}
.header-right{display:flex;flex-direction:row;align-items:center;gap:22px}
.header-tabs {display:flex;align-items:center;gap:4px;padding:5px;background:#f2f5ff;border:1px solid #e7ebfa;border-radius:11px}
.header-tab,.nav-link.header-tab{border:0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:8px;background:transparent;color:#53658d;font-size:12px;font-weight:760;white-space:nowrap;transition:background .2s,box-shadow .2s,color .2s,transform .2s}
.header-tab:hover,.nav-link.header-tab:hover{background:#e6ebff;color:#293e8b}
body:has(#welcomeScreen:not(.is-hidden)) #navHomeBtn,
body:has(#mapScreen:not(.is-hidden)) #navMapBtn {background:linear-gradient(135deg,#7970fa,#5445e6);color:#fff;box-shadow:0 4px 10px #9b99ea55}
/* El motor oculta el acceso al mapa estando allí: mantenerlo visible como pestaña activa sin modificar esa lógica. */
#navMapBtn{visibility:visible!important}
.mini-progress{width:auto;min-width:108px;display:flex;flex-direction:column;gap:4px;padding:8px 12px;border:1px solid #e4e9f7;background:#fff;border-radius:11px}
.mini-progress-text{font-size:12px;color:#21376e;font-weight:850;white-space:nowrap}
.mini-progress-text b{color:var(--ink)}
.mini-progress-bar{height:4px;background:#e7ebfd}
.mini-progress-bar span{background:linear-gradient(90deg,#4fb8ff,#5c4ce6)}
.btn{border-radius:11px;font-weight:770}
.btn-primary{background:linear-gradient(125deg,#7066fa,#5142ed);color:white;box-shadow:0 8px 20px #6a60e138}
.btn-primary:hover{box-shadow:0 12px 27px #6a60e155}
.btn-outline{border:1px solid #c9d2fb;color:#433dd3;background:#fff}
.btn-outline:hover{background:#f3f5ff}
.eyebrow-tag{background:transparent;padding:0;color:#6a70db;letter-spacing:1.8px;font-size:10px}
.gradient-text{background:linear-gradient(115deg,#6f5cf9,#3c6fee);-webkit-background-clip:text;background-clip:text;color:transparent}
.tiny-label{color:#5768c4;font-weight:850}
/* COVER — Same welcome content, new isometric circuit composition. */
#welcomeScreen{padding-top:12px}
.hero {
  grid-template-columns:minmax(0, .82fr) minmax(0,1.18fr);gap:10px;
  padding:36px 0 14px;min-height:485px;position:relative;
  align-items:center;
}
.hero-copy{padding-left:14px}
.hero-copy h1{font-size:clamp(36px,4.05vw,62px);line-height:1.16;letter-spacing:-2.7px;margin:15px 0 20px;max-width:585px;color:#12235c}
.hero-copy>p{font-size:16px;line-height:1.7;max-width:430px;color:#54688e;margin:0 0 26px}
.hero .btn-large{padding:16px 28px;font-size:15px;min-height:54px}
.hero-perks{margin-top:27px;font-size:11px;color:#6980a6;gap:12px 20px}
.hero-perks span{display:inline-flex;align-items:center;gap:3px}
.hero-art {width:100%;max-width:680px;height:auto;min-height:450px;display:grid;place-items:center;position:relative;margin:0 auto}
.hero-art:before,.hero-art:after{display:none}
.hero-isometric{display:block;width:100%;max-height:495px;overflow:visible;filter:drop-shadow(0 17px 20px #7d9fdf10)}
.scene-caption{position:absolute;right:5%;top:8%;border:1px solid #dbe6fd;background:#ffffffed;padding:8px 12px;border-radius:7px;box-shadow:0 4px 15px #6e91df20;display:flex;gap:9px;align-items:center;font-size:10px;font-weight:800;letter-spacing:1.2px;color:#4767a0}
.caption-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#35bca8;box-shadow:0 0 0 4px #e3f7f3;animation:calmPulse 3.6s infinite}
.scene-block-back{animation:towerFloat 6.5s ease-in-out infinite}
.scene-block-tower,.scene-flag{animation:towerFloat 6.5s ease-in-out infinite;animation-delay:-.15s}
.scene-block-small{animation:smallFloat 5s ease-in-out infinite}
.scene-block-front{animation:subtleFloat 7s ease-in-out infinite}
.scene-dash{animation:routeFlow 9s linear infinite}
.flag-cloth{transform-origin:532px 46px;animation:flagFlutter 4s ease-in-out infinite}
@keyframes towerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes smallFloat{0%,100%{transform:translateY(-1px)}50%{transform:translateY(-9px)}}
@keyframes routeFlow{to{stroke-dashoffset:-160}}
@keyframes flagFlutter{0%,100%{transform:skewY(0)}50%{transform:skewY(-2deg)}}
@keyframes calmPulse{50%{box-shadow:0 0 0 7px #dff6f3;opacity:.7}}
.feature-strip{gap:15px;margin:0 0 40px}
.feature-strip article {border-radius:13px;padding:19px 20px;box-shadow:0 9px 24px #6684bd0a;border-color:#e3e8f7}
.feature-strip b{font-size:13px}
.feature-strip p{color:#7887a5}
.feature-icon{border-radius:10px;width:43px;height:43px;font-size:19px}
.feature-lilac{background:#e8e9ff}.feature-peach{background:#fff2da}.feature-mint{background:#def7f3}
/* MAP — 10 columns desktop / 5 mid / 3 mobile. Level access and order intact. */
#mapScreen{padding-top:31px}
.section-intro h1{font-size:clamp(29px,3.15vw,40px);letter-spacing:-1.3px;margin:11px 0}
.section-intro p{color:#5d6d90}
.map-summary {border-radius:13px;min-width:153px;padding:14px 17px;border-color:#e3e8f5;box-shadow:var(--shadow)}
.map-summary b{font-size:22px}
.map-banner {background:linear-gradient(100deg,#f0f0ff,#ecf5ff);border:1px solid #e0e4fa;border-radius:13px;margin:24px 0 17px;padding:15px 19px}
.map-banner b{font-size:14px}
.map-card {border-radius:18px;padding:27px 28px 18px;border-color:#e1e7f6;box-shadow:var(--shadow)}
.map-card h2{font-size:18px}
.map-legend{font-size:11px}
.legend-dot.done{background:#2db992}
.legend-dot.ready{background:#4487ee}
.legend-dot.locked{background:#a7afc0}
.map-journey{margin:25px auto 10px;max-width:1200px}
.map-lines #mapPathBase{stroke:#c7d9f2;stroke-width:3;stroke-dasharray:3 8;opacity:.88}
.map-lines #mapPathDone{stroke:#51adfc;stroke-width:3;stroke-dasharray:3 8}
.level-grid{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(6,88px);grid-auto-rows:88px;gap:3px}
.level-node,.level-node:not([aria-disabled="true"]):hover {width:100%;max-width:95px;gap:0;transform:translateY(0)}
.level-node:not([aria-disabled="true"]):hover .node-circle{transform:scale(1.06)}
.node-circle{width:53px;height:53px;font-size:15px;border:2px solid #fff;background:linear-gradient(135deg,#cfd5df,#afb8c6);box-shadow:0 5px 9px #7488a41e,0 0 0 1px #dfe6f0;transition:transform .2s,box-shadow .2s}
.level-node.is-locked .node-circle{background:linear-gradient(145deg,#d9dee7,#b6bfce);color:#54617a}
.level-node.is-locked:hover .node-circle{background:linear-gradient(135deg,#c7d0dd,#aeb9ca)}
.level-node .node-caption{display:none}
/* Show numbered nodes rather than cartoon padlocks, keeping the 'locked' semantic state. */
.level-node.is-locked svg,.level-node.is-done svg{display:none}
.level-node .node-num{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;box-shadow:none;background:transparent;color:#5e6c80;font-size:14px;border-radius:50%}
.level-node.is-locked .node-num{color:#4d5870}
.level-node.is-done .node-circle{background:linear-gradient(145deg,#45cfb9,#20a891);box-shadow:0 6px 13px #2db69935,0 0 0 1px #cdf7ed}
.level-node.is-done .node-num{color:#fff}
.level-node.is-ready .node-circle{background:linear-gradient(135deg,#6860f7,#5143da);box-shadow:0 7px 17px #7566e160,0 0 0 4px #eceaff;font-size:18px;animation:activeRing 3s ease-in-out infinite}
.level-node.is-ready .node-num{display:none}
@keyframes activeRing{50%{box-shadow:0 7px 18px #7566e140,0 0 0 7px #f0efff}}
.map-message{margin-top:14px;color:#6b7eaa;font-size:11px}
/* GAME — retain board, editor, status and help controls. */
#gameScreen{padding-top:18px}
.game-nav{margin-bottom:13px;min-height:32px}
.back-btn{color:#473ce0}
.game-world{color:#64749b}
.game-level-badge{background:#eef0ff;color:#4b49d9;border:1px solid #e1e3ff;border-radius:8px}
.mission-card{background:linear-gradient(111deg,#fff 62%,#f4f8ff);border:1px solid #e1e8f8;padding:22px 27px;border-radius:15px;margin-bottom:15px;box-shadow:0 5px 17px #5279bc0b}
.mission-card h1{font-size:clamp(24px,2.4vw,29px);margin:6px 0}
.mission-card p{font-size:13px}
.mission-card .eyebrow-tag{font-size:10px}
.mission-emoji{background:linear-gradient(145deg,#e6f1ff,#d1e3ff);color:#5575e3;border:1px solid #ccdcfc;font-size:55px;border-radius:12px;height:66px;min-width:66px;transform:none;text-shadow:0 2px 1px #fff;box-shadow:inset 0 2px 0 #fff}
.workspace{grid-template-columns:1fr 1fr;gap:16px}
.card{border-radius:15px;border-color:#e1e8f7;padding:20px;box-shadow:0 10px 30px rgba(40,71,137,.052)}
.card-header{margin-bottom:13px}
.card-header h2{font-size:17px;color:#14275f}
.chip{border-radius:7px;font-size:10px}
.chip-lilac{background:#e9eeff;color:#4557bb}
.chip-blue{background:linear-gradient(120deg,#e3edff,#e5f8ff);color:#366ad8}
.board-shell{min-height:330px;border-radius:11px;border:1px solid #d9e4f6;background:linear-gradient(145deg,#f5f9ff,#eef5ff);box-shadow:inset 0 0 24px #bfdaff1a;padding:13px 13px 12px}
.board-shell::before{opacity:.13;background-size:22px 22px}
.board-shell::after{display:none}
.board-shell-header{margin-bottom:4px}
.board-mode{border-color:#dce5fa;background:#fff;color:#5a68aa;border-radius:7px;letter-spacing:1.1px}
.board-decoration{font-size:12px;color:#8ca8dc}
.board-stage{min-height:242px;padding:8px 0}
.board-stage::before{border:0}
.board{padding:6px;gap:3px;background:#d5e3f8;border:1px solid #a8bfe9;border-radius:9px;box-shadow:0 6px 17px #749ac23a;width:min(100%,700px)}
.cell{border:1px solid #c1d6fa;border-radius:3px;box-shadow:inset 0 1px 0 #fff;color:#223669;min-width:0;transition:background .2s ease,transform .2s ease}
.cell.cell-cloud{background:linear-gradient(145deg,#f0f7ff,#e2efff)}
.cell.cell-sky{background:linear-gradient(145deg,#e5f2ff,#d5eaff)}
.cell.goal{background:linear-gradient(130deg,#fff6dc,#ffe2a0);border:1px solid #f5b83c;box-shadow:inset 0 1px 0 #fff5dc}
.cell.obstacle{background:repeating-linear-gradient(135deg,#fbdde4,#fbdde4 12px,#f3c6d2 12px,#f3c6d2 24px);border:1px solid #eaa3b5;box-shadow:none}
.cell.trail{background:linear-gradient(150deg,#dcd6ff,#c9befa);border:1px solid #aba3ef;box-shadow:inset 0 1px 0 #fff9}
.cell.robot{font-size:0!important;background:linear-gradient(145deg,#d3e5ff,#b5d3ff);border:2px solid #448ef6;box-shadow:inset 0 0 0 2px #fff9,0 0 0 1px #70aaff;transform:none}
.cell.robot::after{content:'';display:block;width:36%;height:36%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#71b7ff,#3473ed 70%,#224cba);border:1px solid #2c67d3;box-shadow:0 2px 6px #3a65cd55;animation:tokenIn .27s ease-out}
@keyframes tokenIn{from{transform:scale(.7)}to{transform:scale(1)}}
.cell.robot.goal::after{background:radial-gradient(circle at 30% 25%,#83dfc1,#25b49b 72%);border-color:#299b88}
.board-shell-footer{color:#5774a4}
.board-dimensions{color:#5d76b2;border-color:#d7e3fb}
.board-legend{justify-content:flex-start;color:#60769e;font-size:10px}
.key-robot{background:#477ef1;border-color:#3266d1}
.key-goal{background:#ffc95b;border-color:#e6a72f}
.key-wall{background:#df9cbd;border-color:#ca7e9d}
.status-card{border-radius:11px;padding:12px 13px;margin-top:12px;background:#edf9f6;border-color:#d5f1eb}
.editor-guide{margin-bottom:10px;color:#7587ab}
.editor{border-radius:10px;background:#f7faff;border-color:#cfdcf4;height:258px}
.line-numbers{border-color:#e0e9fa;color:#8897be}
.editor textarea{color:#203e98;font-size:14px}
.button-row{margin-top:12px}
.metrics{gap:8px;margin-top:12px}
.metrics>div{background:#fafcff;border-color:#e3eafb;border-radius:9px;text-align:center;padding:10px 5px}
.metrics small{font-size:10px;color:#6d7e9f}
.metrics strong{color:#312cbb}
.hint-box{background:linear-gradient(128deg,#fffaf0,#fff9e8);border-color:#ffeabf;border-radius:11px;padding:15px;margin-top:13px}
.hint-title span{color:#674a15}
.hint-box p{color:#827054}
.hint-button{border-radius:7px;color:#4c4aab;border-color:#d7d4fa;background:white}
.reference-card{border-radius:14px;border-color:#e1e9f6;padding:16px 20px;box-shadow:var(--shadow)}
.command-list code{border-radius:6px;background:#f0f4ff;color:#4054ab;border-color:#dce5fb}
/* dialogs — original functions, contemporary icon treatments */
.dialog-backdrop{background:rgba(22,41,85,.43);backdrop-filter:blur(6px)}
.dialog-card{border:1px solid #e1e8f9;border-radius:19px;box-shadow:0 27px 80px rgba(29,48,99,.22);padding:35px 32px 30px;max-width:470px;animation:dialogAppear .32s both}
@keyframes dialogAppear{from{opacity:0;transform:translateY(13px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.dialog-card h2{color:#13245b;font-size:27px;letter-spacing:-.9px}
.dialog-actions{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:10px}
.dialog-actions .btn{font-size:12px;min-height:45px;white-space:normal}
.success-symbol,.error-symbol{font-size:0!important;display:grid;place-items:center;margin:8px auto 16px;width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#50d8ac,#20a985);box-shadow:0 8px 19px #3ec09b38}
.success-symbol::after{content:'✓';font-size:35px;font-weight:900;color:#fff;line-height:1}
.error-symbol{background:linear-gradient(140deg,#ff658c,#f13765);box-shadow:0 7px 17px #f8618c40}
.error-symbol::after{content:'×';font-size:41px;font-weight:850;color:#fff;line-height:1}
.error-dialog{border:1px solid #f2dae4;max-width:500px}
.error-dialog .tiny-label{color:#d54e76}
.error-dialog #errorMessage{font-size:14px}
.error-dialog .error-guidance{border-color:#f6e9d7;background:#fffaf2}
.error-dialog .dialog-actions #retryBtn{order:2;background:linear-gradient(120deg,#f96685,#ec416d)}
.error-dialog .dialog-actions #errorHintBtn{order:1;border-color:#f4aec7;color:#cd4274}
.success-confetti{color:#9fc5ff;letter-spacing:17px;animation:confettiBlink 4.6s ease-in-out infinite}
@keyframes confettiBlink{50%{opacity:.4;transform:translateX(-45%) translateY(-5px)}}
.final-dialog{max-width:720px;padding:45px 40px 35px;background:linear-gradient(160deg,#fff 55%,#eef5ff);border-color:#dfe8fa}
.final-symbol{background:linear-gradient(145deg,#fff4cf,#ffe4a1);border:1px solid #ffe1a7;border-radius:24px;font-size:64px;box-shadow:0 10px 24px #ffc9692b}
.final-badge{background:#ebf8f4;color:#148b71}
.final-achievements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:19px}
.final-achievements>div{padding:14px 7px;border:1px solid #e0e8f8;border-radius:11px;background:#fff;box-shadow:0 3px 12px #7398d014}
.final-achievements b{display:block;font-size:17px;color:#263b8f}
.final-achievements small{display:block;font-size:10px;color:#7184a5;margin-top:4px}
.final-dialog .dialog-actions{margin-top:22px}
.site-footer{max-width:1440px;border-color:#e7ecfa;color:#8190ac}
/* Medium desktop and tablets */
@media(max-width:1100px){
  .level-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(12,86px);grid-auto-rows:86px}
  .hero{grid-template-columns:.88fr 1.12fr}.hero-copy h1{font-size:clamp(35px,4.5vw,49px)}
}
@media(max-width:760px){
  .site-header{height:73px;padding:0 4%}
  .header-right{gap:8px}.header-tabs{padding:4px}
  .header-tab,.nav-link.header-tab{padding:7px 9px;font-size:11px}
  .logo{font-size:21px}.logo-mark{width:39px;height:39px;flex-basis:39px}
  .mini-progress{min-width:84px;padding:7px}.mini-progress-text{font-size:10px}
  .hero{grid-template-columns:1fr;min-height:0;padding:34px 0 10px}
  .hero-copy{padding:0;text-align:left}.hero-copy h1{font-size:clamp(34px,7vw,47px)}
  .hero-copy>p{margin:0 0 23px}.hero-actions,.hero-perks{justify-content:flex-start}
  .hero-art{height:340px;min-height:340px;max-width:590px;transform:none;margin:0 auto}
  .hero-isometric{max-height:340px}.scene-caption{top:5%}
  .feature-strip{grid-template-columns:repeat(3,1fr)}.feature-strip article:last-child{grid-column:auto}
  .level-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(20,85px);grid-auto-rows:85px}
  .workspace{grid-template-columns:1fr}
  .board-shell{min-height:310px}
  .mission-emoji{min-width:58px;height:58px;font-size:46px}
}
@media(max-width:520px){
  main{padding:0 16px}
  .site-header{padding:0 11px;gap:8px}
  .logo{font-size:19px;gap:3px}.logo-mark{width:34px;height:34px;flex-basis:34px}
  .logo small{font-size:6.5px;letter-spacing:1px}
  .header-right{gap:5px}.header-tabs{gap:0;padding:3px}
  .header-tab,.nav-link.header-tab{padding:7px 6px;font-size:10px}
  .nav-link.header-tab:before{display:none}
  .mini-progress{min-width:70px;padding:6px}.mini-progress-text{font-size:9px}
  .hero-copy h1{font-size:38px;letter-spacing:-1.7px}
  .hero-art{width:100%;margin:0 auto;height:auto;min-height:275px;transform:none}
  .hero-isometric{max-height:300px}.scene-caption{font-size:8px;padding:6px}
  .feature-strip{grid-template-columns:1fr}.feature-strip article:last-child{grid-column:auto}
  .map-card{padding:19px 10px 15px}
  .node-circle{width:50px;height:50px}
  .level-grid{grid-template-rows:repeat(20,79px);grid-auto-rows:79px}
  .section-intro h1{font-size:30px}
  .card{padding:15px}.board-shell{padding:10px 8px;min-height:278px}
  .board{border-width:1px;gap:2px}
  .cell{border-width:1px;border-radius:2px}
  .cell.robot{border-width:2px}
  .editor{height:210px}
  .dialog-card{padding:30px 21px 25px}.dialog-actions{flex-direction:column}
  .dialog-actions .btn{width:100%}
  .final-achievements{gap:5px}.final-achievements b{font-size:13px}.final-achievements small{font-size:9px}
  .final-dialog{padding:30px 16px 22px}
}
@media(max-width:360px){
  .logo small{display:none}.logo{font-size:18px}
  .header-tab,.nav-link.header-tab{font-size:9px;padding:7px 5px}
  .mini-progress{min-width:64px}.mini-progress-text{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .scene-block,.scene-flag,.scene-dash,.flag-cloth,.caption-dot,.node-circle,.success-confetti,.dialog-card,.cell.robot::after{animation:none!important}
  .level-node:not([aria-disabled="true"]):hover .node-circle{transform:none}
}
/* Ajuste final: la ficha debe verse redonda independientemente del tamaño de casilla. */
.cell.robot::after{width:min(36%,28px);height:auto;aspect-ratio:1/1;align-self:center;justify-self:center}
/* Ilustración protagónica un poco más amplia, sin alterar su posición en el documento. */
@media(min-width:761px){.hero-isometric{transform:scale(1.1);transform-origin:center}}


/* ================================================================
   ACABADO BITRUTA — REFERENCIA ELEGIDA
   Esta hoja es exclusivamente visual: no modifica Flask, JS o niveles.
   ================================================================ */
:root{
 --ink:#12265e;--muted:#5e7096;--line:#dce6fa;
 --shadow:0 14px 35px rgba(36,71,149,.095)
}
body{background:linear-gradient(175deg,#fcfdff,#f7faff 66%,#f4f8ff)}
.site-header{border-bottom-color:#d6e3fc;box-shadow:0 3px 19px #8dabda14}
.logo-mark svg{display:block}
.header-tabs{background:#f2f5ff}
.header-tab{min-height:40px}
.hero{min-height:495px}
.hero-copy h1{max-width:590px}
.hero-isometric{filter:drop-shadow(0 16px 20px rgba(79,117,214,.12))}
.hero-art{display:flex;align-items:center;justify-content:center}
.scene-block-back,.scene-block-small,.scene-block-front,.scene-block-tower{will-change:transform}
.feature-strip article{border:1px solid #dce5f9;box-shadow:0 9px 23px #7b99cf16}
.feature-strip article:nth-child(1){border-top:3px solid #6e61fa}
.feature-strip article:nth-child(2){border-top:3px solid #4aadee}
.feature-strip article:nth-child(3){border-top:3px solid #30bc9d}
/* Ruta ordenada en 10 columnas con CSS, preservando juego.js INTACTO. */
.map-card{border:1.5px solid #dce6fb;background:#fff;box-shadow:0 13px 38px #7795d221}
.map-banner{border:1.5px solid #cfdafc;background:linear-gradient(100deg,#f1f0ff,#eaf5ff);box-shadow:0 6px 18px #b5c3ef24}
.map-summary{border:1.5px solid #dce5fa}
.map-lines #mapPathBase{stroke:#c5d8f5;stroke-width:4;stroke-dasharray:3 8}
.map-lines #mapPathDone{stroke:#5bbaee;stroke-width:4;stroke-dasharray:3 8}
.level-grid{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(6,88px);grid-auto-rows:88px}
.node-circle{box-sizing:border-box}
.level-node.is-locked .node-circle{background:linear-gradient(145deg,#e4e8ef,#b8c1d0);border-color:#fff}
.level-node.is-ready .node-circle{background:linear-gradient(155deg,#7771f9,#5245e8);border-color:#fff}
.level-node.is-done .node-circle{background:linear-gradient(155deg,#3fd1b7,#1baf92)}
/* Las casillas y contenedores reciben bordes vivos y nítidos sin perder blanco. */
.mission-card{border:1.5px solid #ccd9fc;background:linear-gradient(120deg,#ffffff 40%,#f0f5ff)}
.mission-emoji{font-size:0!important;overflow:hidden;transform:none}
.mission-star{color:#517df5;display:grid;place-items:center;font-size:44px;line-height:1;filter:drop-shadow(0 4px 5px #789ded73);animation:starBreathe 4.2s ease-in-out infinite}
@keyframes starBreathe{50%{filter:drop-shadow(0 7px 9px #789ded60);transform:scale(1.045)}}
.board-panel{border:2px solid #7298f1;background:linear-gradient(#fff,#fcfdff);box-shadow:0 12px 30px #6286d82a}
.coding-panel{border:2px solid #9f8af5;background:#fff;box-shadow:0 12px 30px #9586dc21}
.board-shell{border:2px solid #528bf0;background:linear-gradient(145deg,#eff6ff,#eaf2ff 65%,#f0f1ff);min-height:348px;box-shadow:inset 0 0 0 2px #ffffffb8,0 8px 22px #4d84dc27}
.board-shell::before{opacity:.24}
.board-stage{min-height:260px;display:grid;place-items:center;align-content:center;justify-items:center}
.board-stage::before{border:1px dashed #b6cef480}
.board{margin:auto!important;justify-self:center;align-self:center;gap:4px;padding:8px;border:2px solid #3c85ed;border-radius:12px;background:linear-gradient(145deg,#a7ccfb,#7caaf2);box-shadow:0 8px 23px #477bca51,inset 0 0 0 2px #ffffffba}
.cell{display:grid;place-items:center;border:1.5px solid #9fbbef;border-radius:5px;aspect-ratio:1;box-shadow:inset 0 2px 0 #ffffffb0}
.cell.cell-cloud{background:linear-gradient(150deg,#f0f7ff,#dfeeff)}
.cell.cell-sky{background:linear-gradient(150deg,#e0eeff,#cfe5ff)}
.cell.goal{border:2px solid #edae30;background:linear-gradient(145deg,#fff5d4,#ffe1a0)}
.cell.obstacle{border:2px solid #e37791;background:repeating-linear-gradient(135deg,#ffecf1,#ffecf1 10px,#fbd5df 10px,#fbd5df 20px)}
.cell.trail{background:linear-gradient(140deg,#e8e2ff,#cfc4ff);border-color:#9785f3}
/* La ficha se dibuja centrada por coordenadas, no por el emoji original. */
.cell.robot{
 position:relative;transform:none!important;animation:none!important;
 font-size:0!important;color:transparent!important;
 background:linear-gradient(145deg,#e0edff,#b5d7ff);
 border:2px solid #287afa;
 box-shadow:inset 0 0 0 2px #ffffffbf,0 0 0 1px #62a2ff;
 display:block!important;
}
.cell.robot::after{
 content:"";position:absolute;top:50%;left:50%;
 width:38%;max-width:29px;min-width:9px;aspect-ratio:1 / 1;height:auto;
 border-radius:50%;display:block;
 background:radial-gradient(circle at 32% 26%,#87c1ff 0%,#3e80f2 52%,#1658d8 95%);
 border:1px solid #2461ca;box-shadow:0 2px 7px #285bba66, inset 0 1px 1px #e9f4ff;
 transform:translate(-50%,-50%);margin:0!important;
 animation:tokenGlow 3.2s ease-in-out infinite;
 pointer-events:none;
}
.cell.robot.goal::after{background:radial-gradient(circle at 30% 23%,#b3f9db,#35c7a0 64%,#13876f);border-color:#189a7b}
@keyframes tokenGlow{50%{box-shadow:0 2px 9px #3a74de7d,0 0 0 3px #ffffff70}}
.board-mode{border:1px solid #9bbcf7;color:#3562c0;background:#fff}
.board-mode-dot{background:#36bc9b}
.board-dimensions{border:1px solid #a9bff9;color:#3e62af}
.board-legend{justify-content:center}
.editor{border:1.5px solid #9ab9f3;background:#f9fbff;box-shadow:inset 0 0 0 1px #fff}
.line-numbers{background:#edf3ff;border-right:1px solid #c8d8f9}
.editor textarea{color:#193c8b}
.button-row .btn-primary{background:linear-gradient(120deg,#6f63ff,#4d4ae3)}
.metrics>div:nth-child(1){border-top:3px solid #4b9be9}
.metrics>div:nth-child(2){border-top:3px solid #8b6df0}
.metrics>div:nth-child(3){border-top:3px solid #f3b44b}
.hint-box{border:1.5px solid #ffc85d;background:linear-gradient(145deg,#fffdf6,#fff4da)}
.reference-card{border:1.5px solid #dce6fb}
.command-list code{border:1px solid #bcccff;background:#f1f4ff;color:#4658bd}
.dialog-card{border:1.5px solid #dce5fa;box-shadow:0 32px 85px #2038674f}
.dialog-backdrop{background:rgba(17,39,94,.42)}
.dialog-card .success-symbol,.dialog-card .error-symbol{margin-left:auto;margin-right:auto}
.final-dialog{border-color:#c7d9fb}
.final-achievements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:19px}
.final-achievements>div{padding:13px 6px;border:1px solid #dce5f6;border-radius:11px;background:#fff}
.final-achievements b{display:block;font-size:17px;color:#203b91}
.final-achievements small{display:block;font-size:10px;color:#7083aa;margin-top:4px}
/* Responsive: paneles centrados en desktop, tablet y móvil. */
@media (max-width:1100px){
 .level-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(12,89px);grid-auto-rows:89px}
}
@media (max-width:900px){
 .workspace{grid-template-columns:minmax(0,1fr)}
 .board-panel,.coding-panel{max-width:100%}
}
@media (max-width:760px){
 .level-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(20,84px);grid-auto-rows:84px}
 .hero-art{justify-content:center;min-height:310px}
 .board{gap:3px;padding:5px}
}
@media (max-width:520px){
 .hero{min-height:0}
 .hero-isometric{transform:none!important}
 .hero-art{min-height:245px}
 .board-shell{min-height:275px;padding:11px 8px}
 .board-stage{min-height:215px;padding:7px 1px}
 .board{gap:2px;border-width:1.5px;padding:5px}
 .cell{border-width:1px;border-radius:3px}
 .cell.robot{border-width:2px}
 .mission-star{font-size:36px}
 .final-achievements{gap:5px}
 .final-achievements b{font-size:13px}
 .final-achievements small{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
 .mission-star,.cell.robot::after{animation:none!important}
}

/* Posiciones visuales de la ruta tipo serpiente; no alteran desbloqueo ni niveles. */
#levelGrid>.level-node:nth-child(1){grid-row:1!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(2){grid-row:1!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(3){grid-row:1!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(4){grid-row:1!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(5){grid-row:1!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(6){grid-row:1!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(7){grid-row:1!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(8){grid-row:1!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(9){grid-row:1!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(10){grid-row:1!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(11){grid-row:2!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(12){grid-row:2!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(13){grid-row:2!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(14){grid-row:2!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(15){grid-row:2!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(16){grid-row:2!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(17){grid-row:2!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(18){grid-row:2!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(19){grid-row:2!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(20){grid-row:2!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(21){grid-row:3!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(22){grid-row:3!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(23){grid-row:3!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(24){grid-row:3!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(25){grid-row:3!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(26){grid-row:3!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(27){grid-row:3!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(28){grid-row:3!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(29){grid-row:3!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(30){grid-row:3!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(31){grid-row:4!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(32){grid-row:4!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(33){grid-row:4!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(34){grid-row:4!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(35){grid-row:4!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(36){grid-row:4!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(37){grid-row:4!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(38){grid-row:4!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(39){grid-row:4!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(40){grid-row:4!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(41){grid-row:5!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(42){grid-row:5!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(43){grid-row:5!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(44){grid-row:5!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(45){grid-row:5!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(46){grid-row:5!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(47){grid-row:5!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(48){grid-row:5!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(49){grid-row:5!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(50){grid-row:5!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(51){grid-row:6!important;grid-column:10!important}
#levelGrid>.level-node:nth-child(52){grid-row:6!important;grid-column:9!important}
#levelGrid>.level-node:nth-child(53){grid-row:6!important;grid-column:8!important}
#levelGrid>.level-node:nth-child(54){grid-row:6!important;grid-column:7!important}
#levelGrid>.level-node:nth-child(55){grid-row:6!important;grid-column:6!important}
#levelGrid>.level-node:nth-child(56){grid-row:6!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(57){grid-row:6!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(58){grid-row:6!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(59){grid-row:6!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(60){grid-row:6!important;grid-column:1!important}
@media (min-width:761px) and (max-width:1100px) {
#levelGrid>.level-node:nth-child(1){grid-row:1!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(2){grid-row:1!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(3){grid-row:1!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(4){grid-row:1!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(5){grid-row:1!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(6){grid-row:2!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(7){grid-row:2!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(8){grid-row:2!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(9){grid-row:2!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(10){grid-row:2!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(11){grid-row:3!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(12){grid-row:3!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(13){grid-row:3!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(14){grid-row:3!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(15){grid-row:3!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(16){grid-row:4!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(17){grid-row:4!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(18){grid-row:4!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(19){grid-row:4!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(20){grid-row:4!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(21){grid-row:5!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(22){grid-row:5!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(23){grid-row:5!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(24){grid-row:5!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(25){grid-row:5!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(26){grid-row:6!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(27){grid-row:6!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(28){grid-row:6!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(29){grid-row:6!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(30){grid-row:6!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(31){grid-row:7!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(32){grid-row:7!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(33){grid-row:7!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(34){grid-row:7!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(35){grid-row:7!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(36){grid-row:8!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(37){grid-row:8!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(38){grid-row:8!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(39){grid-row:8!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(40){grid-row:8!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(41){grid-row:9!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(42){grid-row:9!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(43){grid-row:9!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(44){grid-row:9!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(45){grid-row:9!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(46){grid-row:10!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(47){grid-row:10!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(48){grid-row:10!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(49){grid-row:10!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(50){grid-row:10!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(51){grid-row:11!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(52){grid-row:11!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(53){grid-row:11!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(54){grid-row:11!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(55){grid-row:11!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(56){grid-row:12!important;grid-column:5!important}
#levelGrid>.level-node:nth-child(57){grid-row:12!important;grid-column:4!important}
#levelGrid>.level-node:nth-child(58){grid-row:12!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(59){grid-row:12!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(60){grid-row:12!important;grid-column:1!important}
}
@media (max-width:760px) {
#levelGrid>.level-node:nth-child(1){grid-row:1!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(2){grid-row:1!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(3){grid-row:1!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(4){grid-row:2!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(5){grid-row:2!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(6){grid-row:2!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(7){grid-row:3!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(8){grid-row:3!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(9){grid-row:3!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(10){grid-row:4!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(11){grid-row:4!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(12){grid-row:4!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(13){grid-row:5!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(14){grid-row:5!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(15){grid-row:5!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(16){grid-row:6!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(17){grid-row:6!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(18){grid-row:6!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(19){grid-row:7!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(20){grid-row:7!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(21){grid-row:7!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(22){grid-row:8!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(23){grid-row:8!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(24){grid-row:8!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(25){grid-row:9!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(26){grid-row:9!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(27){grid-row:9!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(28){grid-row:10!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(29){grid-row:10!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(30){grid-row:10!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(31){grid-row:11!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(32){grid-row:11!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(33){grid-row:11!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(34){grid-row:12!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(35){grid-row:12!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(36){grid-row:12!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(37){grid-row:13!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(38){grid-row:13!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(39){grid-row:13!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(40){grid-row:14!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(41){grid-row:14!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(42){grid-row:14!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(43){grid-row:15!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(44){grid-row:15!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(45){grid-row:15!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(46){grid-row:16!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(47){grid-row:16!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(48){grid-row:16!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(49){grid-row:17!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(50){grid-row:17!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(51){grid-row:17!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(52){grid-row:18!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(53){grid-row:18!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(54){grid-row:18!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(55){grid-row:19!important;grid-column:1!important}
#levelGrid>.level-node:nth-child(56){grid-row:19!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(57){grid-row:19!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(58){grid-row:20!important;grid-column:3!important}
#levelGrid>.level-node:nth-child(59){grid-row:20!important;grid-column:2!important}
#levelGrid>.level-node:nth-child(60){grid-row:20!important;grid-column:1!important}
}
/* =======================================================================
   BITRUTA · EDICIÓN VISUAL V5 — INTERACCIÓN Y COLOR
   Solo presentación: sin modificar niveles, intérpretes, Flask ni HTML.
   El blanco sigue siendo el color principal.
   ======================================================================= */
:root {
  --v5-electric:#476df6;
  --v5-violet:#7454f5;
  --v5-cyan:#12aed9;
  --v5-mint:#13af92;
  --v5-amber:#f4a72d;
  --v5-rose:#ed648d;
  --v5-ease:cubic-bezier(.2,.75,.22,1);
}

/* Base clara, con profundidad cromática contenida. */
body {
  background:
    radial-gradient(ellipse 40% 22% at 1% 15%,rgba(124,111,255,.085),transparent 95%),
    radial-gradient(ellipse 36% 24% at 98% 48%,rgba(39,187,232,.10),transparent 90%),
    linear-gradient(180deg,#fff 0%,#f8faff 58%,#f6faff 100%);
}
.site-header {
  border-bottom:2px solid #d8e5ff;
  box-shadow:0 7px 25px rgba(52,98,179,.08);
}
.logo-mark svg {transition:transform .45s var(--v5-ease),filter .45s ease}
.header-tabs {background:#f1f4ff;border-color:#dce3fa}
.header-tab,.nav-link.header-tab {position:relative;transition:transform .24s var(--v5-ease),color .24s,background .24s,box-shadow .24s}
.mini-progress {border:1.5px solid #d3e1ff;box-shadow:0 5px 15px #b6c9fa24}
.mini-progress-bar {height:6px;border-radius:30px;overflow:hidden}
.mini-progress-bar span {background:linear-gradient(90deg,#13c7bd,#4085ff,#7757f2);box-shadow:0 0 8px #61a6ff50}

/* Portada: misma ilustración y posición, con luz de fondo y color más presente. */
.hero-copy .eyebrow-tag {background:#eeecff;color:#5c48d9;border:1px solid #ddd8ff;border-radius:50px;padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
.hero-copy h1 {text-wrap:balance}
.gradient-text {background:linear-gradient(120deg,#7d4af2 4%,#4a6ff0 51%,#13a8cf 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-art {isolation:isolate}
.hero-art::before {
  content:"";display:block;position:absolute;z-index:-1;
  width:86%;height:67%;border-radius:50%;left:7%;top:19%;pointer-events:none;
  background:radial-gradient(ellipse at 48% 50%,rgba(100,144,255,.19),rgba(185,167,255,.14) 52%,transparent 74%);
  animation:v5Halo 9s ease-in-out infinite;
}
.hero-isometric {filter:drop-shadow(0 20px 27px #698de02e)}
.scene-caption {color:#395bb7;border-color:#b6ceff;background:#ffffffee;box-shadow:0 8px 25px #6390e42a}
.hero-perks span {font-weight:740;color:#425c91}

/* Pasos: bloques con números 01, 02 y 03; conserva el texto y HTML existentes. */
.feature-strip {gap:17px}
.feature-strip article {
  position:relative;overflow:hidden;isolation:isolate;
  border:1.5px solid #dce5f9;
  box-shadow:0 9px 24px #416ab218;
  transition:transform .32s var(--v5-ease),box-shadow .32s ease,border-color .32s ease;
}
.feature-strip article::before {
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:var(--v5-strip,#7961f6);
}
.feature-strip article:nth-child(1){--v5-strip:linear-gradient(90deg,#8054fc,#ac85ff)}
.feature-strip article:nth-child(2){--v5-strip:linear-gradient(90deg,#168ee8,#2cced8)}
.feature-strip article:nth-child(3){--v5-strip:linear-gradient(90deg,#17b99b,#5adaad)}
.feature-strip .feature-icon {
  position:relative;flex:none;width:51px;height:51px;border-radius:13px;
  display:grid;place-items:center;font-size:0!important;color:transparent!important;
  box-shadow:0 7px 15px rgba(63,78,158,.17);
  transition:transform .35s var(--v5-ease),box-shadow .35s ease;
}
.feature-strip .feature-icon::after {
  font-size:20px;font-weight:900;letter-spacing:-.8px;color:#fff;line-height:1;
  text-shadow:0 1px 2px rgba(15,40,104,.2)
}
.feature-strip .feature-lilac {background:linear-gradient(140deg,#9d77fd,#6346e9)}
.feature-strip .feature-lilac::after {content:"01"}
.feature-strip .feature-peach {background:linear-gradient(140deg,#51cdf6,#087dcf)}
.feature-strip .feature-peach::after {content:"02"}
.feature-strip .feature-mint {background:linear-gradient(140deg,#51dcc0,#109e81)}
.feature-strip .feature-mint::after {content:"03"}
.feature-strip article b {color:#1e356e;font-size:14px}
.feature-strip article p {color:#657b9e}

/* Mapa: colores más definidos y niveles que reaccionan al cursor. */
.map-banner {
  border:2px solid #bdcdfc;
  background:linear-gradient(107deg,#eae9ff 0%,#e2efff 58%,#e0fbf7 100%);
  box-shadow:0 8px 23px rgba(87,114,211,.12);
}
.map-banner b {color:#293b91}
.map-summary {border:1.5px solid #cbd9ff;background:linear-gradient(155deg,#fff,#f3f7ff);box-shadow:0 8px 21px #809ce62d}
.map-summary b {color:#3c4dcc}
.map-card {border:2px solid #d4e0fa;box-shadow:0 15px 42px #6685c323}
.map-card-top {border-bottom:1px solid #edf0ff;padding-bottom:14px}
.map-lines #mapPathBase {stroke:#cbdcf5;stroke-width:4.5}
.map-lines #mapPathDone {stroke:#2fc4c3;stroke-width:4.5}
.level-node {position:relative;isolation:isolate}
.node-circle {border:2px solid #fff;box-shadow:0 7px 16px #7291c934,0 0 0 1px #d6e2f8;transition:transform .28s var(--v5-ease),box-shadow .28s ease,filter .28s ease}
.level-node.is-ready .node-circle {background:linear-gradient(145deg,#9077ff,#533de3);border:2px solid white;box-shadow:0 7px 20px #7160e354,0 0 0 4px #ece8ff}
.level-node.is-done .node-circle {background:linear-gradient(145deg,#45dbc0,#109f8b);box-shadow:0 7px 17px #21ba9e46,0 0 0 1px #b7f1e5}
.level-node.is-locked .node-circle {background:linear-gradient(145deg,#e8edf6,#b7c5da);border-color:#fff;color:#485a77}
/* tooltip usa el title original del juego: nada de JavaScript nuevo */
@media (hover:hover) and (pointer:fine) {
  .logo:hover .logo-mark svg{transform:rotate(-8deg) scale(1.09);filter:drop-shadow(0 5px 7px #788eef88)}
  .header-tab:hover {transform:translateY(-2px);box-shadow:0 4px 12px #94aaf83a}
  .hero-art:hover .scene-block-center {transform:translateY(-7px)}
  .feature-strip article:hover {transform:translateY(-5px);border-color:#b9cafa;box-shadow:0 17px 34px #6181c12b}
  .feature-strip article:hover .feature-icon {transform:scale(1.1) rotate(-5deg);box-shadow:0 10px 22px #6b66a342}
  .level-node:hover {z-index:20}
  .level-node:hover .node-circle {transform:translateY(-3px) scale(1.1)!important;filter:saturate(1.14);box-shadow:0 11px 22px #6287c044,0 0 0 4px #e6eeff}
  .level-node::after {
    content:attr(title);position:absolute;z-index:25;bottom:calc(100% + 2px);left:50%;
    width:max-content;max-width:210px;padding:8px 11px;border-radius:9px;
    color:#fff;background:#263f88;box-shadow:0 9px 20px #253e8845;
    font:700 11px/1.35 Inter,'Segoe UI',sans-serif;letter-spacing:.1px;text-align:center;
    transform:translate(-50%,5px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s,transform .18s,visibility .18s;
  }
  .level-node:hover::after,.level-node:focus-visible::after {opacity:1;visibility:visible;transform:translate(-50%,-1px)}
}

/* El lienzo y el editor se distinguen mejor, pero no se altera el tablero real. */
.mission-card {
  border:2px solid #c9d8fc;
  background:linear-gradient(110deg,#fff 20%,#f5f3ff 69%,#eaf8ff);
  box-shadow:0 9px 26px rgba(67,102,192,.10);
}
.mission-card .mission-emoji {border-color:#b3caff;background:linear-gradient(145deg,#f2f7ff,#dce9ff)}
.mission-star {color:#476cf0;filter:drop-shadow(0 6px 9px #759aff70)}
.board-panel,.coding-panel {position:relative;transition:box-shadow .35s ease,border-color .35s ease}
.board-panel {border:2.5px solid #4a85ec;box-shadow:0 12px 32px #4682d528,inset 0 4px 0 #b3d7ff}
.coding-panel {border:2.5px solid #8b70e9;box-shadow:0 12px 32px #7e6bd52a,inset 0 4px 0 #d9ccff}
.board-shell {
  border:2.5px solid #3893ec;
  background:linear-gradient(125deg,#eaf5ff 0%,#e7efff 65%,#edf1ff 100%);
  box-shadow:0 9px 25px #3c90df2e,inset 0 0 0 2px #fff;
}
.board {border:3px solid #3d70e9;background:linear-gradient(140deg,#75b9fa,#8b9ff6);box-shadow:0 10px 22px #467ed44b,inset 0 0 0 2px #ffffffc7}
.cell.cell-cloud{background:linear-gradient(135deg,#f0f9ff,#deefff);border-color:#92b8f0}
.cell.cell-sky{background:linear-gradient(135deg,#e2f3ff,#c6e5ff);border-color:#92b8f0}
.cell.goal {border:2px solid #eea728;background:linear-gradient(140deg,#fff9dd,#ffdda0);box-shadow:inset 0 0 0 1px #fff6da,0 0 8px #f9c85c2b}
.cell.robot {background:linear-gradient(140deg,#deeeff,#b1d1ff);border-color:#2678f0}
.cell.trail {background:linear-gradient(140deg,#e7dfff,#c8bcff);border-color:#937ce9}
.cell.obstacle {border-color:#dc7593}
.board-mode {border:1.5px solid #8fb4fa;background:#fff;color:#3558b4}
.board-mode-dot{background:#1ec5b2;box-shadow:0 0 0 4px #d6f9f4;animation:v5StatusPulse 3s ease-in-out infinite}
.board-dimensions {border-color:#9fb7f5;background:white;color:#405dd1}
.editor {border:2px solid #a2affc;background:#fafdff;transition:border-color .25s ease,box-shadow .25s ease}
.editor:focus-within {border-color:#7762ee;box-shadow:0 0 0 4px #9b87ff28,0 9px 20px #7663e725}
.line-numbers {background:#edf1ff;border-color:#d0d8fc}
.editor textarea{caret-color:#5941db}
.editor textarea::placeholder{color:#8f9dc5}
.chip-lilac{border:1px solid #d1c9ff;background:#eeeaff;color:#543ec0}
.chip-blue{border:1px solid #b8e3f9;background:#e6f6ff;color:#086bad}
.metrics>div {background:#fff;border:1.5px solid #dde7fa;box-shadow:0 3px 9px #638bd115;transition:transform .24s ease,box-shadow .24s ease}
.metrics>div:nth-child(1){background:linear-gradient(145deg,#fff,#eaf5ff);border-color:#a9d4fa;border-top:3px solid #2c94ec}
.metrics>div:nth-child(2){background:linear-gradient(145deg,#fff,#f1ebff);border-color:#c9b8ff;border-top:3px solid #8960e8}
.metrics>div:nth-child(3){background:linear-gradient(145deg,#fff,#fff4df);border-color:#ffe0a9;border-top:3px solid #f3aa30}
.metrics>div:nth-child(1) strong{color:#2473de}
.metrics>div:nth-child(2) strong{color:#7050df}
.metrics>div:nth-child(3) strong{color:#ad771d}
.hint-box {border:2px solid #efbd59;background:linear-gradient(145deg,#fffefa,#fff4d9);box-shadow:0 8px 20px #f2bc4520;transition:box-shadow .3s,border-color .3s}
.hint-button{border:1.5px solid #dfbb77;color:#806016;font-weight:800;background:white;transition:transform .23s,background .23s,box-shadow .23s}
.reference-card{border:2px solid #cbdaf7;background:linear-gradient(110deg,#fff,#f8faff);box-shadow:0 8px 25px #7897d91b}
.command-list code {border:1.5px solid #bdc9fc;background:#eef1ff;color:#3e4cbc;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.status-card {border:1.5px solid #a9e2d5;background:linear-gradient(110deg,#eefcf9,#f5fffc)}
.status-card.status-error {border-color:#f2a5b7;background:#fff2f5}
.status-card.status-warning {border-color:#f2ca68;background:#fff9e8}

/* Botones con un reflejo breve al pasar el ratón. */
.btn-primary {position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#795bfd,#484eea);box-shadow:0 9px 22px #6a5be441}
.btn-primary::after {
  content:"";position:absolute;inset:-70% -40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.23) 50%,transparent 58%);
  transform:translateX(-90%) rotate(9deg);pointer-events:none;transition:transform .6s ease;
}
.btn-outline {border:1.5px solid #b9c4fa}
.hint-button:focus-visible,.header-tab:focus-visible,.level-node:focus-visible,.btn:focus-visible,.back-btn:focus-visible,.logo:focus-visible {
  outline:3px solid #18abdf;outline-offset:3px;
}
@media(hover:hover) and (pointer:fine) {
  .btn-primary:not(:disabled):hover::after {transform:translateX(90%) rotate(9deg)}
  .btn-primary:not(:disabled):hover {box-shadow:0 14px 28px #6957e656}
  .btn-outline:not(:disabled):hover{transform:translateY(-2px);border-color:#7f8bea;background:#f3f5ff}
  .board-panel:hover {border-color:#276ee4;box-shadow:0 18px 37px #3676db35,inset 0 4px 0 #8bbefa}
  .coding-panel:hover {border-color:#7659e1;box-shadow:0 18px 37px #6f59da34,inset 0 4px 0 #c4b5ff}
  .board-shell:hover {border-color:#2871de;box-shadow:0 12px 30px #2f75d93b,inset 0 0 0 2px #fff}
  .cell:not(.robot):not(.obstacle):hover {filter:brightness(1.035) saturate(1.13);box-shadow:inset 0 0 0 1px #5b8fea,0 3px 8px #74a5e140}
  .metrics>div:hover {transform:translateY(-3px);box-shadow:0 9px 18px #6a8dd129}
  .hint-box:hover {border-color:#e7a83f;box-shadow:0 11px 27px #efba4930}
  .hint-button:hover {transform:translateY(-2px);background:#fff8e7;box-shadow:0 5px 13px #e4ba612a}
  .command-list code:hover {transform:translateY(-3px);background:#e5ebff;box-shadow:0 6px 14px #829be635}
}

/* La interfaz de error y la celebración siguen siendo las mismas: más contraste visual. */
.dialog-card {border:2px solid #d0dcfa;box-shadow:0 30px 82px #142a5e58}
.success-symbol,.error-symbol {transition:transform .3s var(--v5-ease)}
.final-dialog {border-color:#baccff;background:linear-gradient(165deg,#fff 55%,#eef4ff)}
.final-badge {border:1.5px solid #b6ebd8;background:#e8faf5}
.final-achievements>div {border:1.5px solid #d4e0f8}
@media(hover:hover) and (pointer:fine){
  .dialog-card:hover .success-symbol,.dialog-card:hover .error-symbol {transform:scale(1.075)}
  .final-achievements>div:hover {border-color:#99bcfa;box-shadow:0 7px 15px #729ae72b}
}

@keyframes v5Halo {50%{transform:scale(1.06);opacity:.74}}
@keyframes v5StatusPulse {50%{box-shadow:0 0 0 7px #d6f9f47a}}
/* Interfaz usable con el movimiento reducido del sistema. */
@media(prefers-reduced-motion:reduce){
  .hero-art::before,.board-mode-dot{animation:none!important}
  .feature-strip article,.feature-strip .feature-icon,.level-node,.node-circle,
  .btn-primary::after,.metrics>div,.command-list code,.hint-box,.board-panel,.coding-panel {
    transition:none!important;
  }
}
@media(max-width:760px){
  .hero-art::before {width:85%;left:7%;height:60%}
  .feature-strip {gap:11px}
  .map-card-top {padding-bottom:10px}
  .board,.board-shell {box-shadow:0 7px 17px #417ed030,inset 0 0 0 1px #fff}
}
@media(max-width:520px){
  .feature-strip .feature-icon {width:46px;height:46px}
  .map-card {border-width:1.5px}
  .board-panel,.coding-panel {border-width:2px}
  .board-shell {border-width:2px}
  .board {border-width:2px}
}


/* ==============================================================
   BITRUTA V6 — MEJORA PEDAGÓGICA Y SÍMBOLOS CENTRADOS
   Los colores y el diseño del proyecto V5 permanecen intactos.
   ============================================================== */
.dialog-card .success-symbol,.dialog-card .error-symbol{
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:78px!important;height:78px!important;
  padding:0!important;line-height:0!important;
  margin:10px auto 20px!important;
  border-radius:50%!important;
}
.dialog-card .success-symbol::after,.dialog-card .error-symbol::after{content:none!important;display:none!important}
.dialog-card .success-symbol svg,.dialog-card .error-symbol svg{
  display:block!important;width:40px!important;height:40px!important;
  padding:0!important;margin:0!important;
  color:white!important;fill:none!important;
  overflow:visible!important;
  flex:none!important;transform:none!important;
}
.dialog-card .error-symbol{background:linear-gradient(140deg,#ff658c,#f13765)!important}
.dialog-card .success-symbol{background:linear-gradient(135deg,#50d8ac,#20a985)!important}
.learning-requirement{
  --learn-border:#b1c6ff;
  margin:0 0 14px;padding:15px 17px 14px;
  border:2px solid var(--learn-border);border-radius:14px;
  background:linear-gradient(115deg,#f4f8ff 0%,#fff 55%,#f4f0ff 100%);
  box-shadow:0 8px 22px rgba(70,105,218,.085);
  transition:border-color .24s,box-shadow .24s;
}
.learning-requirement:hover{border-color:#7b83fa;box-shadow:0 11px 27px rgba(94,93,230,.14)}
.requirement-heading{display:flex;align-items:center;gap:10px;color:#243c8a}
.requirement-light{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:11px;color:white;font-size:17px;
  background:linear-gradient(145deg,#538ffb,#7455ef);box-shadow:0 4px 11px #6b75f437}
.requirement-heading>div{flex:1;min-width:0}
.requirement-heading b{display:block;font-size:13px;font-weight:900;line-height:1.3}
.requirement-heading small{display:block;font-size:11px;font-weight:750;color:#6877a8;margin-top:3px}
.requirement-tag{padding:6px 8px;border-radius:7px;border:1px solid #d4d8ff;
  background:#edefff;color:#5b55c7;font-size:9px;font-weight:900;letter-spacing:.6px;white-space:nowrap}
.learning-requirement>p#requirementDescription{margin:11px 0;color:#53678f;line-height:1.55;font-size:12px}
.required-skills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.skill-chip{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;
  border-radius:8px;border:1px solid #b9caff;color:#365dc3;
  background:#eaf1ff;font-size:11px;font-weight:850;letter-spacing:.05px;
  transition:background .18s,transform .18s}
.skill-chip:nth-child(even){background:#f1ebff;color:#6849b5;border-color:#d6c6ff}
.skill-chip:nth-child(3n){background:#e8f9f5;color:#158b78;border-color:#a1e6d5}
.learning-requirement .requirement-feedback{margin:0;padding:9px 10px;
  border-radius:8px;background:#fff;border:1px solid #e0e9ff;color:#556993;
  font-size:11px;font-weight:750;line-height:1.4}
.learning-requirement .requirement-feedback.requirement-pending{background:#fff7e6;border-color:#ffd992;color:#955d16}
.learning-requirement .requirement-feedback.requirement-ok{background:#e9faf3;border-color:#9bdec4;color:#137c60}
@media(hover:hover) and (pointer:fine){.skill-chip:hover{transform:translateY(-2px);background:#dbe9ff}}
@media(max-width:520px){.learning-requirement{padding:12px}.requirement-heading{flex-wrap:wrap}.requirement-tag{font-size:8px}}
@media(prefers-reduced-motion:reduce){.learning-requirement,.skill-chip{transition:none!important}}