/* BITRUTA — Diseño luminoso y responsive */
:root {
  --ink: #273256; --muted:#73809d; --purple:#6c55e9; --deep-purple:#523ccf;
  --lavender:#f1ecff; --pale-blue:#e9f4ff; --mint:#38be9b; --pale-mint:#e7fbf3;
  --coral:#fa7e91; --pale-coral:#fff0f2; --gold:#ffbc4d; --line:#e8eaf7;
  --white:#fff; --bg:#f9faff; --shadow:0 18px 55px rgba(64,69,130,.08);
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;min-height:100vh;background:linear-gradient(170deg,#f9f9ff,#fcfdff 52%,#f6f6ff);font-family:'Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);line-height:1.5;position:relative}
button,textarea {font:inherit} button {cursor:pointer} button:disabled{cursor:wait;opacity:.7}
button:focus-visible,textarea:focus-visible {outline:3px solid #947dff;outline-offset:3px}
.page-shape {position:fixed;border-radius:50%;z-index:-1;pointer-events:none;filter:blur(5px)}
.shape-one {width:600px;height:600px;top:-330px;right:-220px;background:radial-gradient(circle,#e9e3ff,transparent 72%)}
.shape-two {width:450px;height:450px;bottom:-260px;left:-230px;background:radial-gradient(circle,#def8f0,transparent 73%)}
.site-header {height:94px;border-bottom:1px solid #e9e9f8;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(5vw,20px);position:relative;z-index:10}
.logo {border:0;background:none;padding:0;display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:900;font-size:27px;letter-spacing:-1.2px;text-align:left}
.logo-mark {display:flex;align-items:center;justify-content:center;gap:1px;width:48px;height:48px;background:var(--purple);color:white;border-radius:16px;font-size:20px;font-weight:900;box-shadow:0 7px 17px #b7adf588}
.logo-mark span:nth-child(2){color:#ffdf81;font-size:12px;margin:0 1px}.logo-contrast{color:var(--purple)}.logo small{display:block;font-size:8px;letter-spacing:2.15px;color:#8992a7;margin-top:-4px;font-weight:800}
.header-right{display:flex;align-items:center;gap:30px}.mini-progress{width:162px;display:flex;flex-direction:column;gap:6px}.mini-progress-text{font-size:12px;color:var(--muted);font-weight:700}.mini-progress-text b{color:var(--ink)}.mini-progress-bar{width:100%;height:6px;border-radius:9px;background:#efedfb;overflow:hidden}.mini-progress-bar span{height:100%;width:0;display:block;border-radius:9px;background:linear-gradient(90deg,#48c8a5,#7870ed);transition:width .3s}
.nav-link{border:1px solid #e6e0ff;background:#f6f3ff;color:#6251ce;padding:11px 17px;border-radius:14px;font-weight:800;font-size:13px}.nav-link:hover{background:#ede7ff}
main{max-width:1340px;margin:auto;padding:0 5vw;min-height:calc(100vh - 178px)}.screen{animation:fade-slide .38s both}.is-hidden{display:none!important}
@keyframes fade-slide{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
.eyebrow-tag{display:inline-flex;align-items:center;gap:8px;background:#f0ebff;color:var(--purple);padding:9px 15px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:1.25px}.eyebrow-tag.small{font-size:10px;padding:7px 12px}.sparkle{font-size:18px;color:#ffac3d}.gradient-text{background:linear-gradient(110deg,#7656f0,#ab62cd);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{border:0;border-radius:14px;padding:13px 21px;font-size:14px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:14px;transition:transform .2s,background .2s,box-shadow .2s;text-decoration:none}.btn:not(:disabled):hover{transform:translateY(-2px)}
.btn-primary{color:white;background:linear-gradient(110deg,#7958ed,#5b55de);box-shadow:0 13px 29px #a89df35c}.btn-primary:hover{box-shadow:0 15px 31px #9486e37c}.btn-outline{background:white;border:1px solid #e2def7;color:#6359aa}.btn-outline:hover{background:#f9f7ff}.btn-large{padding:18px 26px;font-size:16px;border-radius:16px}.btn-large span{font-size:20px}
/* PORTADA */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:72px 0 52px;min-height:590px}.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(37px,4.3vw,63px);letter-spacing:-2.7px;line-height:1.14;margin:20px 0 23px;font-weight:900}.hero-copy>p{max-width:505px;color:#697795;font-size:17px;line-height:1.75;margin:0 0 26px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-perks{margin-top:30px;display:flex;flex-wrap:wrap;gap:11px 17px;font-size:12px;color:#657390;font-weight:760}
.hero-art{height:470px;max-width:510px;width:100%;margin:auto;position:relative;display:flex;align-items:center;justify-content:center}.hero-art:before{content:"";position:absolute;inset:45px 27px;background:#e9e4ff;transform:rotate(-11deg);border-radius:40% 60% 55% 45%;z-index:0}.hero-art:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;top:40px;left:20px;background:#fff0c9;z-index:0}
.hero-art-frame{position:relative;z-index:1;width:345px;max-width:82%;background:white;padding:23px 24px 25px;border:1px solid #f1effb;border-radius:27px;box-shadow:0 22px 70px #7266b63d;transform:rotate(-5deg)}
.art-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px;font-weight:900;color:#9b89e1}.art-heading span:last-child{font-size:9px;color:#ffa8b1}
.preview-board{margin:20px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.preview-cell{aspect-ratio:1;border:2px solid #aab6e9;box-shadow:inset 0 2px 0 #ffffffa8;border-radius:11px;background:linear-gradient(145deg,#dff4ff,#c9e6ff)}.preview-cell:nth-child(even){background:linear-gradient(145deg,#d0ebff,#baddff)}.preview-cell.hero-robot{background:#b8f6df;border-color:#52c4a3;display:grid;place-items:center;font-size:33px}.preview-cell.hero-star{display:grid;place-items:center;font-size:31px;background:#ffe7a9;border-color:#e6b84d}.hero-footprints{display:grid;place-items:center;font-weight:900;color:#9279e5;background:#e5dbff!important;border-color:#ac94e7;font-size:23px;letter-spacing:1px}
.preview-code{border-radius:11px;padding:12px;background:#f4f2ff;font-family:Consolas,'Courier New',monospace;font-weight:700;color:var(--purple);font-size:14px}.preview-code span:first-child{color:#a7a2c0;font-size:11px;margin-right:9px}.blinking-cursor{margin-left:3px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.float-pill{position:absolute;z-index:2;background:#fff;border-radius:13px;font-size:13px;font-weight:850;color:#56617f;padding:12px 16px;box-shadow:0 10px 23px #55548825}.pill-top{top:38px;right:2px;transform:rotate(8deg)}.pill-bottom{bottom:35px;left:0;transform:rotate(6deg)}.hero-confetti{position:absolute;z-index:2;color:#f7ad57;font-size:34px}.confetti-one{left:5%;top:13%}.confetti-two{right:3%;bottom:14%;color:#62c9aa}.confetti-three{right:6%;top:25%;color:#977bff}
.feature-strip{margin-bottom:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-strip article{border:1px solid #eeeaf9;background:#fff;box-shadow:0 10px 30px #6e6a9b0e;border-radius:20px;padding:18px 20px;display:flex;align-items:center;gap:14px}.feature-strip b{font-size:14px}.feature-strip p{font-size:12px;margin:4px 0 0;color:var(--muted)}.feature-icon{width:49px;height:49px;display:grid;place-items:center;font-size:22px;border-radius:15px;flex:0 0 auto}.feature-lilac{background:#f0ebff}.feature-peach{background:#fff1e1}.feature-mint{background:#e7fbf3}
/* MAPA */
#mapScreen{padding:43px 0 66px}.section-intro{display:flex;align-items:center;justify-content:space-between;gap:24px}.section-intro h1{font-size:clamp(29px,3.3vw,46px);letter-spacing:-1.8px;line-height:1.18;margin:15px 0 10px}.section-intro p{color:var(--muted);font-size:14px;margin:0}.map-summary{min-width:170px;background:white;border:1px solid #eeeaf8;box-shadow:var(--shadow);padding:16px 22px;text-align:center;border-radius:22px;display:flex;flex-direction:column;align-items:center}.map-summary-icon{font-size:23px}.map-summary b{font-size:23px;margin:2px 0}.map-summary small{color:var(--muted);font-size:11px}
.map-banner{margin:29px 0 20px;background:linear-gradient(115deg,#ede9ff,#ecf9ff 90%);border:1px solid #e9e4ff;border-radius:21px;padding:16px 21px;display:flex;gap:22px;align-items:center;justify-content:space-between}.map-banner b{font-size:15px}.map-banner p{margin:4px 0 0;font-size:12px;color:#747e9c}
.map-card{background:white;border:1px solid #eeedf8;border-radius:28px;padding:29px 34px 16px;box-shadow:var(--shadow)}.map-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.tiny-label{font-size:10px;font-weight:900;letter-spacing:1.65px;color:#8772d9}.map-card h2{font-size:20px;margin:3px 0 0;letter-spacing:-.5px}.map-card h2 span{color:#f8ae4d}.map-legend{display:flex;flex-wrap:wrap;gap:14px;color:#7c839c;font-size:11px;font-weight:730}.map-legend span{display:flex;align-items:center;gap:7px}.legend-dot{width:11px;height:11px;display:inline-block;border-radius:50%}.legend-dot.done{background:#39b994}.legend-dot.ready{background:#7657ee}.legend-dot.locked{background:#ff9aaa}
.map-journey{position:relative;margin:28px auto 3px;width:100%;max-width:990px}.map-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}.map-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}.map-lines #mapPathBase{stroke:#e4dcfa;stroke-width:11;stroke-dasharray:4 17}.map-lines #mapPathDone{stroke:#86dcc0;stroke-width:11;stroke-dasharray:4 17}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,151px);grid-auto-rows:151px;column-gap:4px;align-items:center;justify-items:center;position:relative;z-index:1}
.level-node{border:0;background:none;padding:0;width:126px;max-width:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;color:var(--muted);transform:translateY(var(--offset,0px));transition:transform .2s}.level-node:not([aria-disabled="true"]):hover{transform:translateY(calc(var(--offset,0px) - 4px))}.node-circle{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;font-size:28px;font-weight:900;color:white;background:#ffa5b1;border:6px solid white;box-shadow:0 9px 22px #f9b4c25e,0 0 0 1px #ffebed}.level-node .node-caption{font-size:11px;font-weight:900;color:#8c93a9}.level-node.is-done .node-circle{background:linear-gradient(150deg,#58d3ac,#2fb392);box-shadow:0 9px 22px #88dfc55e,0 0 0 1px #c3f3e5}.level-node.is-ready .node-circle{background:linear-gradient(140deg,#8263ff,#6553d8);box-shadow:0 10px 26px #9887ea74,0 0 0 5px #ebe6ff;animation:ready-glow 2.4s infinite}.level-node.is-ready .node-caption{color:var(--purple)}.level-node.is-done .node-caption{color:#2ca981}.level-node.is-locked{cursor:pointer}.level-node.is-locked:hover .node-circle{background:#fb879c}
.level-node svg{width:27px;height:27px;display:block;stroke:white;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.node-num{position:absolute;right:0;top:-8px;background:white;border-radius:12px;color:#a56c7e;font-size:10px;padding:3px 6px;box-shadow:0 2px 10px #ba95a73b;border:1px solid #fff0f1}.level-node.is-done .node-num{color:#299b7f}.level-node.is-ready .node-num{color:var(--purple)}
@keyframes ready-glow{50%{box-shadow:0 10px 25px #897aea7a,0 0 0 9px #e8e2ff}}
.map-message{margin:5px auto 0;text-align:center;font-weight:700;font-size:12px;color:#8a84ae;min-height:32px}
/* GAME */
#gameScreen{padding:25px 0 64px}.game-nav{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.back-btn{color:#7468ca;font-weight:800;background:none;border:0;padding:9px 0;font-size:13px}.back-btn:hover{text-decoration:underline}.game-world{font-size:10px;color:#a09cba;font-weight:900;letter-spacing:1.3px}.game-level-badge{background:#f1ecff;padding:9px 14px;border-radius:12px;color:var(--purple);font-size:11px;font-weight:900}.game-level-badge b{font-size:15px}
.mission-card{background:linear-gradient(112deg,#f2efff,#f3fbff);border:1px solid #e8e4fa;padding:23px 30px;border-radius:24px;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:19px}.mission-card h1{font-size:clamp(25px,2.5vw,34px);letter-spacing:-.9px;line-height:1.2;margin:12px 0 7px}.mission-card p{margin:0;color:#677490;max-width:760px;font-size:14px}.mission-emoji{font-size:50px;background:white;min-width:92px;height:92px;display:grid;place-items:center;border-radius:26px;transform:rotate(7deg)}.difficulty-text{margin-left:10px;letter-spacing:3px;color:#f1a640}.special-rule{display:inline-block!important;background:#fff9e8;border:1px solid #ffe3a5;border-radius:8px;color:#9c741c!important;font-size:11px!important;padding:5px 9px;margin-top:9px!important}.special-rule.is-hidden{display:none!important}
.workspace{display:grid;grid-template-columns:1.06fr .94fr;gap:20px}.card{background:white;border:1px solid #e9e9f5;border-radius:23px;padding:22px;box-shadow:var(--shadow);min-width:0}.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.card-header h2{font-size:19px;margin:5px 0 0;letter-spacing:-.5px}.chip{font-size:10px;font-weight:800;border-radius:99px;padding:8px 11px;white-space:nowrap}.chip-lilac{background:#f3efff;color:#775dcf}.chip-blue{background:#eaf5ff;color:#559ac5}
/* CIRCUITO PASTEL — tablero legible, colorido y con huellas de ejecución */
.board-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 389px;
  overflow: hidden;
  padding: 16px 18px 13px;
  border: 2px solid #cdc7f5;
  border-radius: 22px;
  background:
    radial-gradient(circle at 13% 13%, rgba(235,218,255,.93), transparent 38%),
    radial-gradient(circle at 88% 85%, rgba(187,246,236,.7), transparent 42%),
    linear-gradient(138deg, #f5f1ff 0%, #e9f7ff 52%, #e9ecff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 8px 25px rgba(108,85,233,.08);
}
.board-shell::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.52;
  background-image: radial-gradient(#aba9dd 1.3px, transparent 1.3px);
  background-size:20px 20px;
}
.board-shell::after {
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  top:50px;
  right:-93px;
  border:11px solid rgba(164,148,232,.13);
  border-radius:35px;
  transform:rotate(24deg);
  pointer-events:none;
}
.board-shell-header,.board-shell-footer {
  z-index:1;
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}
.board-mode {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6154c7;
  background:rgba(255,255,255,.9);
  border:1px solid #d9d1f8;
  box-shadow:0 2px 10px rgba(102,87,171,.07);
  border-radius:999px;
  padding:7px 12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.35px;
}
.board-mode-dot {width:9px;height:9px;border-radius:50%;background:#51caa2;box-shadow:0 0 0 3px #d9f9ef}
.board-decoration {color:#9c8ee5;letter-spacing:4px;font-size:15px}
.board-stage {
  position:relative;
  width:100%;
  flex:1;
  min-height:280px;
  display:grid;
  place-items:center;
  padding:12px 3px;
}
.board-stage::before {
  content:"";
  position:absolute;
  inset:11px 1px;
  border:2px dashed rgba(141,128,223,.16);
  border-radius:23px;
  pointer-events:none;
}
.board {
  position:relative;
  z-index:1;
  display:grid;
  width: min(100%, 790px);
  gap:8px;
  margin:auto;
  padding:12px;
  border:2px solid #c0b8ea;
  border-radius:23px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 24px rgba(89,91,169,.12), inset 0 1px 0 white;
}
.cell {
  position:relative;
  aspect-ratio:1;
  min-width:0;
  display:grid;
  place-items:center;
  border:2px solid #a5afe8;
  border-radius:14px;
  font-size:clamp(19px,2.55vw,36px);
  line-height:1;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8), 0 3px 0 rgba(105,126,200,.15);
  transition:background .17s,transform .17s,border-color .17s;
  user-select:none;
}
.cell.cell-cloud {background:linear-gradient(145deg,#e3f5ff,#d2eaff)}
.cell.cell-sky {background:linear-gradient(145deg,#d4edff,#bfe2ff)}
.cell.trail {
  color:#795bd3;
  font-size:clamp(17px,2vw,29px);
  background:linear-gradient(145deg,#eadfff,#d6caff);
  border-color:#9d87ea;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 #b8a0eb;
}
.cell.goal {
  background:linear-gradient(145deg,#fff6ce,#ffe29c);
  border-color:#e7ad38;
  box-shadow:inset 0 2px 0 #fff9ea,0 4px 0 #eec56a,0 0 0 2px #fff9e7;
}
.cell.obstacle {
  background:repeating-linear-gradient(135deg,#ffe2e7 0,#ffe2e7 12px,#ffd1dc 12px,#ffd1dc 24px);
  border-color:#eb8d9f;
  box-shadow:inset 0 2px 0 #fff0f2,0 3px 0 #e9a4b4;
}
.cell.robot {
  z-index:2;
  background:linear-gradient(145deg,#c4ffe5,#97efd2);
  border-color:#37b998;
  box-shadow:inset 0 2px 0 #eafff6,0 5px 0 #5ac9a8,0 0 0 3px #ffffff;
  transform:scale(1.035);
  animation:robot-bounce .26s ease-out;
}
@keyframes robot-bounce {from{transform:scale(.91)}to{transform:scale(1.035)}}
.board-shell-footer {font-size:10px;font-weight:770;color:#7373ae;letter-spacing:.1px}
.board-dimensions {color:#6d5ac0;background:rgba(255,255,255,.8);border:1px solid #dcd4f4;padding:5px 9px;border-radius:8px}
.board-legend {display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin:16px 0 0;font-size:11px;color:#737b97;font-weight:760}
.board-legend span {display:inline-flex;align-items:center;gap:5px}
.key-swatch {display:inline-block;width:11px;height:11px;border:1px solid #b6abd9;border-radius:4px;background:#d6eaff}
.key-robot {background:#aaf1d5;border-color:#3bc09c}
.key-goal {background:#ffe4a0;border-color:#dfb446}
.key-wall {background:#ffd2dc;border-color:#e38ea1}
.key-trail {background:#d8caff;border-color:#9a80e2}

.status-card{display:flex;align-items:center;gap:12px;border:1px solid #dfeee7;background:#effbf5;border-radius:15px;padding:13px 14px;margin-top:15px}.status-icon{font-size:25px}.status-card b{font-size:13px}.status-card p{font-size:11px;margin:2px 0 0;color:#697e80}.status-card.status-error{background:#fff3f2;border-color:#ffd8d6}.status-card.status-warning{background:#fff9ea;border-color:#ffe4ab}
.editor-guide{font-size:12px;color:#8290a8;margin:0 0 12px}.editor{display:flex;overflow:hidden;height:241px;border:1px solid #dfdef4;border-radius:15px;background:#f9f9ff}.line-numbers{width:44px;flex:0 0 auto;border-right:1px solid #e9e7f8;padding:14px 9px;white-space:pre;text-align:right;font:13px/1.7 Consolas,monospace;color:#a7a6c2}.editor textarea{width:100%;flex:1;background:transparent;color:#5b4fc7;font:14px/1.7 Consolas,'Courier New',monospace;padding:14px;border:0;outline:0;resize:none;white-space:pre;tab-size:2}.editor textarea::placeholder{color:#aba9c9}.button-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.button-row .btn{flex:1;padding:12px 10px;font-size:12px;white-space:nowrap}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.metrics>div{border:1px solid #efedf7;background:#faf9ff;border-radius:13px;padding:9px 11px}.metrics small{color:#838ca6;font-size:10px;display:block;line-height:1.35}.metrics strong{font-size:19px;color:#5145a7}
.hint-box{background:linear-gradient(128deg,#fffbec,#fff8e8);border:1px solid #ffe7ab;border-radius:16px;padding:16px;margin-top:16px}.hint-title{display:flex;justify-content:space-between;gap:10px;align-items:center}.hint-title span{font-size:14px;font-weight:900;color:#946f2d}.hint-title small{font-size:10px;color:#ae975e}.hint-box p{color:#937d52;font-size:12px;line-height:1.6;margin:10px 0}.hint-button{color:#8b661d;background:white;border:1px solid #ffdf91;border-radius:9px;padding:9px 12px;font-weight:800;font-size:11px}.hint-button:disabled{opacity:.58;cursor:default}
.reference-card{display:flex;gap:20px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #ecebfa;box-shadow:var(--shadow);border-radius:20px;padding:20px 24px;margin-top:19px}.reference-card h2{font-size:17px;margin:5px 0}.reference-card p{font-size:11px;color:#8490a6;margin:0}.reference-card p code{color:#705bc4}.command-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:660px}.command-list code{font:12px/1.2 Consolas,'Courier New',monospace;background:#f2efff;border:1px solid #e6dfff;color:#6f5dc6;padding:9px 10px;border-radius:9px}
/* FIN DE NIVEL */
.dialog-backdrop{position:fixed;inset:0;background:#302c6088;backdrop-filter:blur(7px);z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}.dialog-card{background:white;position:relative;border-radius:30px;max-width:440px;width:100%;padding:39px 29px 31px;text-align:center;box-shadow:0 25px 85px #322b685e}.success-confetti{letter-spacing:22px;color:#e4b44f;font-size:20px;position:absolute;top:24px;left:50%;transform:translateX(-45%);white-space:nowrap}.success-symbol{font-size:67px;margin:18px 0 13px}.dialog-card h2{font-size:31px;letter-spacing:-1.4px;margin:8px 0}.dialog-card p{color:#76839f;font-size:14px;line-height:1.65}.dialog-actions{display:flex;flex-direction:column;gap:9px;margin-top:22px}.site-footer{max-width:1340px;margin:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;color:#9da4b9;font-size:11px;border-top:1px solid #efeff9;padding:19px 5vw 28px}
@media(max-width:1020px){.hero{grid-template-columns:1fr 1fr;gap:14px}.hero-art{transform:scale(.89)}.workspace{grid-template-columns:1fr}.board-shell{min-height:365px}.reference-card{align-items:flex-start;flex-direction:column}.command-list{justify-content:flex-start}.level-grid{grid-template-rows:repeat(3,140px);grid-auto-rows:140px}.node-circle{width:80px;height:80px}}
@media(max-width:760px){.site-header{height:80px}.header-right{gap:10px}.mini-progress{width:112px}.mini-progress-text{font-size:10px}.nav-link{font-size:11px;padding:9px}.logo{font-size:24px}.logo-mark{width:43px;height:43px}.hero{padding:45px 0 22px;grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin:0 auto 23px}.hero-actions,.hero-perks{justify-content:center}.hero-art{margin-top:12px;height:345px;transform:scale(.83)}.hero-art:before{inset:10px 20px}.pill-top{top:0}.pill-bottom{bottom:0}.feature-strip{grid-template-columns:1fr 1fr}.feature-strip article:last-child{grid-column:1 / -1}.section-intro{align-items:flex-start}.map-summary{min-width:120px;padding:12px}.map-card{padding:20px 14px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,124px);grid-auto-rows:124px}.node-circle{width:71px;height:71px;font-size:23px}.level-node{width:105px}.level-node svg{width:24px;height:24px}.game-world{display:none}.mission-emoji{font-size:34px;min-width:65px;height:65px;border-radius:19px}}
@media(max-width:520px){main{padding:0 17px}.site-header{padding:0 16px}.header-right{gap:6px}.nav-link{font-size:0;padding:10px}.nav-link:before{content:'🗺️';font-size:17px}.mini-progress{width:96px}.hero-copy h1{font-size:39px;letter-spacing:-1.5px}.hero-copy>p{font-size:14px}.hero-art{margin-top:-12px;margin-bottom:-8px;transform:scale(.76);width:calc(100% + 60px);margin-left:-30px;height:320px}.hero-art-frame{width:325px}.feature-strip{grid-template-columns:1fr;gap:10px;margin-bottom:32px}.feature-strip article:last-child{grid-column:auto}.section-intro{display:block}.map-summary{margin-top:17px;flex-direction:row;justify-content:center;gap:9px;padding:9px}.map-summary small{font-size:10px}.map-banner{flex-direction:column;align-items:stretch;gap:12px}.map-banner .btn{width:100%}.map-card-top{display:block}.map-legend{margin-top:13px}.level-grid{grid-template-rows:repeat(5,111px);grid-auto-rows:111px}.node-circle{width:65px;height:65px;border-width:4px}.node-caption{font-size:10px!important}.level-node{width:93px}.level-node svg{width:22px;height:22px}.map-lines #mapPathBase,.map-lines #mapPathDone{stroke-width:8}.card{padding:16px}.card-header{align-items:flex-start;flex-wrap:wrap}.mission-card{padding:17px}.mission-card h1{font-size:24px}.mission-card p{font-size:12px}.board-shell{padding:11px 8px;min-height:300px;border-radius:17px}.board-stage{min-height:232px;padding:8px 0}.board{gap:4px;padding:7px;border-radius:14px;border-width:1px}.cell{border-width:1.5px;border-radius:8px;font-size:clamp(16px,4.9vw,27px)}.board-mode{font-size:9px;padding:6px 9px}.board-decoration{font-size:12px}.board-shell-footer{font-size:9px}.board-dimensions{font-size:9px;padding:4px 7px}.board-legend{gap:9px}.game-nav{flex-wrap:wrap}.game-level-badge{margin-left:auto}.editor{height:215px}.button-row .btn{min-width:135px}.reference-card{padding:16px}.site-footer{padding:18px 17px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* En pantallas muy estrechas, el encabezado no debe generar scroll lateral. */
@media (max-width:360px) {
  .site-header {padding:0 12px;gap:6px}
  .logo {font-size:21px;gap:7px;letter-spacing:-.9px}
  .logo-mark {width:39px;height:39px;flex:0 0 39px;font-size:17px}
  .logo small {font-size:7px;letter-spacing:1.25px}
  .header-right {gap:5px;flex:0 0 auto}
  .mini-progress {width:78px}
  .mini-progress-text {font-size:9px}
  .nav-link {padding:8px;width:36px;min-width:36px}
}

/* ==========================================
   NUEVOS AVISOS: ERROR DE MISIÓN Y FINAL (60)
   Se mantienen intactos los estilos previos.
   ========================================== */
.error-dialog {border:2px solid #ffccd6;max-width:465px}
.error-symbol {display:grid;place-items:center;margin:0 auto 8px;width:80px;height:80px;border-radius:25px;background:#fff0f2;font-size:44px}
.error-dialog .tiny-label {color:#d76f8d}
.error-dialog h2 {font-size:27px}
.error-dialog #errorMessage {color:#394267;font-size:15px;font-weight:650;overflow-wrap:anywhere}
.error-dialog .error-guidance {background:#fff8eb;border:1px solid #ffe6af;border-radius:12px;color:#816539;padding:10px 12px;font-size:12px;margin:15px 0 0}
.final-dialog {max-width:500px;border:2px solid #dfd8ff;background:linear-gradient(160deg,#fff 65%,#f4f1ff)}
.final-symbol {display:grid;place-items:center;margin:15px auto 5px;width:108px;height:108px;border-radius:32px;background:linear-gradient(140deg,#fff2c5,#e9dfff);font-size:66px;box-shadow:0 8px 25px rgba(136,112,219,.15)}
.final-badge {display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:9px 16px;border:1px solid #c7ecdf;border-radius:99px;background:#e8fbf3;color:#248c70;font-size:13px;font-weight:900}
.final-dialog h2 {font-size:clamp(26px,5vw,34px)}
.final-dialog p {margin:15px 0 0}
/* Ventanas nuevas desplazables en celulares de poca altura. */
#errorModal, #finalModal {overflow-y:auto}
#errorModal .dialog-card, #finalModal .dialog-card {margin:auto}
@media (max-width:520px) {
  .error-dialog, .final-dialog {padding:30px 20px 24px}
  .error-dialog h2 {font-size:24px}
  .final-symbol {width:90px;height:90px;font-size:56px}
}