:root {
  --blue: #007aff;
  --ink: #1c1c1e;
  --muted: #6e6e73;
  --line: #e5e5ea;
  --chip: #e9e9ee;
  --purple: #7c4dff;
  --code-kw: #ad3da4;
  --code-num: #272ad8;
  --code-fn: #326d74;
  --code-q: #7c3aed;
  --panel-w: 46%;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f2f2f7; color: var(--ink);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.hidden { display: none !important; }

#app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr) 64px; height: 100vh; height: 100dvh; background: #fff; }

/* ---------- barra superior ---------- */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; min-width: 0; align-items: center; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: #f9f9fb; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 6px; }
.tb-right { justify-content: flex-end; }
.tb-center { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; min-width: 0; }
#page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-arrow { flex-shrink: 0; }
.icon-btn { color: var(--blue); width: 36px; height: 36px; border-radius: 10px; font-size: 20px; display: grid; place-items: center; }
.icon-btn:hover { background: #eaf2ff; }
.chapter-btn { font-weight: 800; font-size: 16px; padding: 6px 10px; border-radius: 10px; }
.chapter-btn:hover { background: #eee; }
.chev { color: var(--muted); font-size: 13px; }
.nav-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1.6px solid var(--blue); color: var(--blue);
  font-size: 18px; line-height: 1; display: grid; place-items: center; padding-bottom: 2px; }
.nav-arrow:disabled { opacity: .3; cursor: default; }

main { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); min-height: 0; min-width: 0; }

/* ---------- panel izquierdo ---------- */
.left-pane { overflow-y: auto; padding: 18px 26px 40px; border-right: 1px solid var(--line); background: #fff; }
.instructions { font-size: 16.5px; line-height: 1.5; }
.instructions p { margin: 0 0 12px; }
.instructions .intro { color: #3a3a3c; }
.instructions ol { list-style: none; counter-reset: s; padding: 0; margin: 14px 0 6px; }
.instructions li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; margin-bottom: 9px; }
.instructions li::before { content: counter(s); font-weight: 800; color: var(--muted); }
.instructions code, .gloss-pop code, .toast code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .9em; color: #6e6e73;
  background: #f2f2f7; padding: 1px 5px; border-radius: 5px; }
.gloss { color: var(--blue); cursor: pointer; font-weight: 700; border-bottom: 1.5px dotted rgba(0,122,255,.4); }
.chapter-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--purple); background: #f1ebff; padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; }
.divider { height: 1px; background: #c7c7cc; margin: 18px 0 14px; }

/* ---------- código ---------- */
.code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 16.5px; line-height: 1.85; min-height: 220px; outline: none;
  padding-bottom: 80px; cursor: text; }
.code .line { border-radius: 6px; padding-right: 8px; transition: background .15s; white-space: pre; }
.code .line:hover { background: #f4f4f8; }
.code .line.running { background: #fff2b3; box-shadow: inset 3px 0 0 #ffc400; }
.code .kw { color: var(--code-kw); font-weight: 700; }
.code .num { color: var(--code-num); }
.code .num.tap { background: #e8ecff; border-radius: 6px; padding: 0 7px; cursor: pointer; font-weight: 700; }
.code .num.tap:hover { background: #d3dbff; }
.code .fn { color: var(--code-fn); }
.code .qfn { color: var(--code-q); font-weight: 700; }
.code .caret { height: 3px; width: 140px; border-radius: 2px; background: var(--blue); margin: -1px 0; animation: blink 1s steps(2) infinite; }
.code.locked .caret { visibility: hidden; }
.code .placeholder { color: #aeaeb2; font-family: 'Nunito', sans-serif; font-size: 15px; padding: 10px 0; }
@keyframes blink { 50% { opacity: .15; } }

/* ---------- escenario 3D ---------- */
.stage { position: relative; overflow: hidden; background: linear-gradient(#7cc4f2, #eaf7ff); min-width: 0; }
#canvas-host, #canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.fish-sign { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 6px;
  background: linear-gradient(#b8763d, #95582a); color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px;
  padding: 6px 14px 6px 10px; border-radius: 8px; box-shadow: 0 3px 0 #6d3f1c, 0 6px 14px rgba(0,0,0,.2);
  border: 2px solid #c98c52; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.fish-sign.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.25) rotate(-4deg); } }

.qmeter { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); border-radius: 16px; padding: 8px 14px; box-shadow: 0 6px 20px rgba(30,60,120,.15);
  font-size: 13px; min-width: 300px; }
.qrow { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.qname { font-weight: 800; width: 58px; color: #3a3a3c; }
.qend { font-size: 16px; }
.qbar { flex: 1; height: 12px; border-radius: 99px; background: #5b7cfa; overflow: hidden; min-width: 90px; position: relative; }
.qfill { position: absolute; right: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #ffb347, #ffcc33); transition: width .45s; }
.qfill.twin { background: linear-gradient(90deg, #2dd4bf, #13c4a3); }
.qpct { font-weight: 800; width: 76px; text-align: right; color: #3a3a3c; font-variant-numeric: tabular-nums; }
.ket { text-align: center; margin-top: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 13px; color: #4b3a8a; }
.ent { font-family: 'Nunito'; font-weight: 800; color: #d6339a; margin-left: 6px; }
.history { margin-top: 4px; font-size: 13px; text-align: center; color: var(--muted); }

.round-btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92);
  color: var(--blue); display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
#btn-sound { top: 16px; right: 16px; }
.round-btn.speed { left: 18px; bottom: 22px; }
.tutor-btn { position: absolute; top: 70px; right: 16px; background: #fff; color: #5b3fd0; font-weight: 800; padding: 8px 14px;
  border-radius: 99px; box-shadow: 0 4px 14px rgba(0,0,0,.14); font-size: 15px; display: flex; gap: 6px; align-items: center; }
.tutor-btn:hover { transform: translateY(-1px); }

.speed-menu { position: absolute; left: 18px; bottom: 74px; background: rgba(255,255,255,.97); border-radius: 14px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; flex-direction: column; min-width: 230px; z-index: 5; }
.speed-menu button { text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 15px; }
.speed-menu button:hover { background: #f2f2f7; }
.speed-menu button.sel { color: var(--blue); font-weight: 800; }

.run-btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.95);
  color: var(--blue); font-weight: 800; font-size: 17px; padding: 12px 26px; border-radius: 99px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.run-btn:hover { background: #fff; }
.run-btn.stop { color: #ff3b30; }
.run-btn .play { font-size: 15px; }
.hint-btn { position: absolute; right: 18px; bottom: 22px; background: rgba(255,255,255,.95); color: var(--blue); font-weight: 800;
  padding: 10px 20px; border-radius: 99px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }

.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(460px, 90%); background: #fff;
  border-radius: 18px; padding: 16px 18px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.25); z-index: 6; animation: pop .3s; }
.toast-msg { font-size: 16px; line-height: 1.45; }
.toast-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.toast-actions button { padding: 8px 14px; border-radius: 99px; font-weight: 800; color: #5b3fd0; background: #f1ebff; }
.toast-actions .primary { background: var(--blue); color: #fff; }
@keyframes pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }

/* ---------- tutor ---------- */
.tutor { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); background: #fff;
  border-radius: 20px; box-shadow: 0 20px 50px rgba(30,20,80,.3); display: flex; flex-direction: column; z-index: 8; overflow: hidden;
  animation: slide .25s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.tutor header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; background: linear-gradient(135deg, #7c4dff, #b06cff); color: #fff; }
.tutor header small { display: block; opacity: .85; font-size: 12px; }
.tutor header .icon-btn { color: #fff; margin-left: auto; }
.tutor header .icon-btn:hover { background: rgba(255,255,255,.2); }
.owl { font-size: 30px; background: #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #faf8ff; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { background: #fff; border: 1px solid #ece6ff; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg pre { background: #f4f1ff; color: #4b2aa8; padding: 8px 10px; border-radius: 10px; overflow-x: auto; margin: 6px 0; font-size: 13.5px; white-space: pre; }
.msg code { font-family: 'SF Mono', Menlo, monospace; font-size: .9em; }
.msg.typing::after { content: '▍'; animation: blink 1s steps(2) infinite; color: #7c4dff; }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; background: #faf8ff; }
.suggest button { font-size: 13px; background: #f1ebff; color: #5b3fd0; padding: 6px 10px; border-radius: 99px; font-weight: 700; }
.tutor form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #faf8ff; }
.tutor input { flex: 1; border: 1.5px solid #ddd5ff; border-radius: 99px; padding: 10px 14px; font: inherit; font-size: 15px; outline: none; }
.tutor input:focus { border-color: #7c4dff; }
.tutor form button { width: 42px; height: 42px; border-radius: 50%; background: #7c4dff; color: #fff; font-size: 16px; }

/* ---------- barra de comandos ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-top: 1px solid var(--line); background: #f9f9fb; }
.tb-group { display: flex; gap: 4px; }
.tool { width: 40px; height: 40px; border-radius: 10px; font-size: 22px; color: #3a3a3c; }
.tool:hover { background: #ececf1; }
.chips { flex: 1; min-width: 0; display: flex; gap: 8px; justify-content: center; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.chip { font-family: 'SF Mono', Menlo, monospace; font-size: 15px; background: var(--chip); padding: 9px 13px; border-radius: 9px;
  white-space: nowrap; color: #1c1c1e; transition: transform .1s, background .15s; }
.chip:hover { background: #dcdce3; }
.chip:active { transform: scale(.94); }
.chip.q { background: #efe7ff; color: #5b21b6; font-weight: 700; }
.chip.q:hover { background: #e2d4ff; }
.chip.kw { color: var(--code-kw); font-weight: 700; }
.chip[disabled] { opacity: .4; pointer-events: none; }

/* ---------- glosario ---------- */
.gloss-pop { position: fixed; z-index: 45; max-width: 320px; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 15px;
  line-height: 1.45; box-shadow: 0 14px 40px rgba(0,0,0,.22); border: 1px solid #ece6ff; animation: fade .15s; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* ---------- modales ---------- */
.modal { position: fixed; inset: 0; background: rgba(20,16,50,.45); z-index: 40; display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-card { background: #fff; border-radius: 26px; padding: 28px 30px 24px; width: min(520px, 100%); text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: card .35s cubic-bezier(.2,1.4,.4,1); max-height: 90vh; overflow-y: auto; }
@keyframes card { from { transform: scale(.8); opacity: 0; } }
.modal-card .big { font-size: 64px; line-height: 1; }
.modal-card h1 { font-family: 'Fredoka'; margin: 10px 0 6px; font-size: 30px; color: #2b1f6b; }
.modal-card p { font-size: 16.5px; line-height: 1.5; color: #3a3a3c; }
.modal-card .learned { background: #f6f2ff; border-radius: 16px; padding: 14px 16px; text-align: left; margin: 14px 0; font-size: 15.5px; }
.modal-card .learned b:first-child { color: var(--purple); }
.modal-card .btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.modal-card .btns button { padding: 12px 22px; border-radius: 99px; font-weight: 800; font-size: 16px; background: #f2f2f7; }
.modal-card .btns .primary { background: var(--blue); color: #fff; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; margin: 14px 0; font-size: 14.5px; }
.legend div { background: #f7f7fa; border-radius: 12px; padding: 8px 10px; }

.loading { position: fixed; inset: 0; background: #fff; display: grid; place-content: center; text-align: center; z-index: 50;
  font-weight: 800; color: #2b4a7a; transition: opacity .4s; }
.spinner { width: 180px; height: 180px; object-fit: contain; margin: 0 auto 6px; animation: spin 1.2s ease-in-out infinite; }
@keyframes spin { 50% { transform: translateY(-14px) rotate(10deg); } }

.confetti { position: fixed; top: -20px; width: 10px; height: 16px; z-index: 45; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- pantallas pequeñas ---------- */
@media (max-width: 860px) {
  main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 50% 50%; }
  .chips { justify-content: flex-start; }
  .toolbar { gap: 4px; padding: 0 6px; }
  .tb-group .tool { width: 34px; }
  .left-pane { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: 14px 18px; }
  .stage { order: 1; }
  .tb-center { font-size: 15px; }
  .chapter-btn { display: none; }
  .qmeter { min-width: 0; width: auto; left: 104px; right: 68px; transform: none; padding: 5px 10px; font-size: 12px; }
  .qbar { min-width: 40px; height: 9px; }
  .qpct { width: 62px; }
  .tutor-btn { top: auto; bottom: 74px; right: 14px; }
  .run-btn { font-size: 15px; padding: 10px 18px; bottom: 16px; }
  .hint-btn { bottom: 18px; padding: 8px 14px; }
  .round-btn.speed { bottom: 16px; }
  .tb-center { gap: 8px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 0 8px; }
  .tb-center { justify-content: center; }
  .top-logo, #btn-more { display: none; }
  .tutor { position: fixed; top: 58px; bottom: 70px; left: 8px; right: 8px; width: auto; }
  .qname { display: none; }
  .tutor-btn span { display: none; }
  .instructions { font-size: 15px; }
}

.top-logo { width: 30px; height: 30px; object-fit: contain; }
.modal-card .logo { width: 150px; height: 150px; object-fit: contain; margin: -10px auto 0; display: block; }

/* ---------- gamificación: contadores ---------- */
.stat-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 15px; padding: 4px 10px; border-radius: 99px; color: #afafaf; }
.stat-chip.fire.on { color: #ff9600; }
.stat-chip.xp { color: #e5a800; }
.replay-onb { margin-top: 6px; color: var(--blue); font-weight: 800; font-size: 14.5px; padding: 6px 0; }
.nav-arrow:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- ruta tipo Duolingo ---------- */
.path { position: fixed; inset: 0; z-index: 30; background: #fff; display: flex; flex-direction: column; }
.path-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 2px solid #e5e5e5; }
.path-brand { display: flex; align-items: center; gap: 10px; font-family: 'Fredoka'; font-weight: 700; font-size: 20px; color: #3c3c3c; }
.path-brand img { width: 40px; height: 40px; object-fit: contain; }
.path-stats { display: flex; gap: 6px; }
.path-stats .st { font-weight: 900; font-size: 16px; padding: 6px 12px; border-radius: 12px; border: 2px solid #e5e5e5; color: #afafaf; white-space: nowrap; }
.path-stats .fire.on { color: #ff9600; border-color: #ffd8a8; background: #fff6eb; }
.path-stats .xp { color: #e5a800; }
.path-stats .star { color: #e5a800; }
.path-close { justify-self: end; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; color: #afafaf; }
.path-close:hover { background: #f2f2f2; }
.path-scroll { flex: 1; overflow-y: auto; }
.path-col { max-width: 600px; margin: 0 auto; padding: 24px 18px 80px; }
.unit { margin-bottom: 30px; }
.unit-banner { display: flex; justify-content: space-between; align-items: center; background: var(--unit); color: #fff; border-radius: 16px;
  padding: 16px 20px; box-shadow: 0 4px 0 var(--unit-dark); position: sticky; top: 8px; z-index: 3; }
.unit-banner small { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-size: 13px; }
.unit-banner h2 { margin: 2px 0; font-family: 'Fredoka'; font-size: 24px; }
.unit-banner p { margin: 0; font-weight: 700; opacity: .9; }
.unit-count { font-weight: 900; font-size: 15px; background: rgba(255,255,255,.22); padding: 6px 12px; border-radius: 12px; }
.unit-nodes { position: relative; display: flex; flex-direction: column; align-items: center; gap: 34px; padding: 70px 0 10px; }
.unit-decor { position: absolute; top: 50%; transform: translateY(-50%); font-size: 64px; opacity: .95; pointer-events: none; }
.unit-decor img { width: 130px; height: 130px; object-fit: contain; }
.unit-decor.right { right: 4%; } .unit-decor.left { left: 2%; }
.node-wrap { position: relative; transform: translateX(var(--x)); display: flex; flex-direction: column; align-items: center; }
.node { width: 72px; height: 66px; border-radius: 50%; font-size: 30px; font-weight: 900; color: #fff; display: grid; place-items: center;
  background: var(--unit); box-shadow: 0 7px 0 var(--unit-dark); transition: transform .1s, box-shadow .1s; position: relative; }
.node:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--unit-dark); }
.node.done { background: #ffc800; box-shadow: 0 7px 0 #e5a800; }
.node.locked { background: #e5e5e5; box-shadow: 0 7px 0 #b7b7b7; font-size: 24px; filter: grayscale(1); }
.node.current { outline: 6px solid color-mix(in srgb, var(--unit) 25%, transparent); outline-offset: 5px; animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { outline-offset: 9px; } }
.node.shake { animation: nshake .4s; }
@keyframes nshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.node-stars { margin-top: 10px; color: #ffc800; font-size: 15px; letter-spacing: 1px; text-shadow: 0 1px 0 #e5a800; }
.node-stars i { color: #e5e5e5; font-style: normal; text-shadow: none; }
.start-bubble { position: absolute; bottom: calc(100% + 12px); background: #fff; color: var(--unit); border: 2px solid #e5e5e5; font-weight: 900;
  font-size: 15px; letter-spacing: .04em; padding: 8px 14px; border-radius: 12px; white-space: nowrap; animation: bounce 1.2s ease-in-out infinite; }
.start-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; }
@keyframes bounce { 50% { transform: translateY(-6px); } }
.node-wrap.unlocking .node { animation: unlock .8s cubic-bezier(.2,1.6,.4,1) .4s both; }
@keyframes unlock { 0% { transform: scale(.4); filter: grayscale(1); } 100% { transform: scale(1); filter: none; } }
.node-pop { position: absolute; top: calc(100% + 14px); z-index: 5; width: 270px; background: var(--unit); color: #fff; border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: fade .15s; text-align: left; }
.node-pop::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); border: 10px solid transparent; border-bottom-color: var(--unit); }
.node-pop b { font-size: 18px; }
.node-pop span { font-weight: 700; opacity: .92; }
.node-pop button { margin-top: 10px; background: #fff; color: var(--unit); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  padding: 12px; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.node-pop button small { opacity: .75; margin-left: 4px; }
.node-pop.locked { background: #f7f7f7; color: #777; border: 2px solid #e5e5e5; }
.node-pop.locked::before { border-bottom-color: #e5e5e5; }
.trophy { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 10px; color: #afafaf; text-align: center; }
.trophy-icon { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; background: #e5e5e5; box-shadow: 0 8px 0 #b7b7b7; margin-bottom: 10px; }
.trophy b { font-size: 18px; }
.trophy.won { color: #e5a800; }
.trophy.won .trophy-icon { background: #ffc800; box-shadow: 0 8px 0 #e5a800; animation: bounce 1.6s ease-in-out infinite; }

/* ---------- introducción de nivel ---------- */
.onb { position: fixed; inset: 0; z-index: 36; background: #fff; display: flex; flex-direction: column; }
.onb-top { display: flex; align-items: center; gap: 16px; padding: 18px 24px; max-width: 1000px; width: 100%; margin: 0 auto; }
.onb-x { font-size: 22px; color: #afafaf; width: 36px; height: 36px; border-radius: 10px; }
.onb-x:hover { background: #f2f2f2; }
.onb-bar { flex: 1; height: 16px; background: #e5e5e5; border-radius: 99px; overflow: hidden; }
.onb-bar i { display: block; height: 100%; width: 0; background: var(--unit); border-radius: 99px; transition: width .4s;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.3); }
.onb-lvl { font-weight: 900; color: #afafaf; white-space: nowrap; }
.onb-body { flex: 1; overflow-y: auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 24px; animation: fade .3s; }
.onb-talk { display: flex; align-items: flex-end; gap: 16px; }
.onb-owl { font-size: 64px; line-height: 1; flex-shrink: 0; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.onb-bubble { position: relative; border: 2px solid #e5e5e5; border-radius: 18px; padding: 16px 18px; font-size: 19px; line-height: 1.5; color: #3c3c3c; }
.onb-bubble::before { content: ''; position: absolute; left: -12px; bottom: 18px; border: 10px solid transparent; border-right-color: #e5e5e5; border-left: 0; }
.onb-art { font-size: 54px; text-align: center; letter-spacing: 4px; padding: 10px 0; }
.onb-h { font-family: 'Fredoka'; font-size: 30px; color: #3c3c3c; margin: 0; }
.onb-p { font-size: 18.5px; line-height: 1.55; color: #4b4b4b; margin: 0; }
.onb-cmds { display: flex; flex-wrap: wrap; gap: 12px; }
.onb-cmd { font-family: 'SF Mono', Menlo, monospace; font-size: 22px; font-weight: 700; color: #5b21b6; background: #efe7ff; border: 2px solid #ddd0ff;
  border-bottom-width: 5px; padding: 12px 18px; border-radius: 14px; }
.onb-q { font-size: 21px; font-weight: 800; color: #3c3c3c; margin: 0; line-height: 1.45; font-family: 'SF Mono', Menlo, 'Nunito', monospace; }
.onb-opts { display: grid; gap: 12px; }
.onb-opt { display: flex; align-items: center; gap: 14px; text-align: left; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 16px; padding: 14px 16px;
  font-size: 18px; font-weight: 700; color: #4b4b4b; background: #fff; transition: background .1s; }
.onb-opt:hover { background: #f7f7f7; }
.onb-opt .onb-key { width: 30px; height: 30px; border: 2px solid #e5e5e5; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: #afafaf; flex-shrink: 0; }
.onb-opt .onb-ot { font-family: 'SF Mono', Menlo, 'Nunito', monospace; font-size: 16.5px; }
.onb-opt.sel { border-color: #84d8ff; background: #ddf4ff; color: #1899d6; }
.onb-opt.sel .onb-key { border-color: #84d8ff; color: #1899d6; }
.onb-opt.ok { border-color: #58cc02; background: #d7ffb8; color: #46a302; }
.onb-opt.bad { border-color: #ff4b4b; background: #ffdfe0; color: #ea2b2b; }
.onb-final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.onb-icon { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 54px; background: var(--unit); box-shadow: 0 8px 0 var(--unit-dark); }
.onb-foot { border-top: 2px solid #e5e5e5; padding: 18px 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background .2s; }
.onb-foot > * { max-width: 1000px; }
.onb-fb { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.onb-fb b { font-size: 20px; }
.onb-foot.good { background: #d7ffb8; border-top-color: transparent; color: #46a302; }
.onb-foot.bad { background: #ffdfe0; border-top-color: transparent; color: #ea2b2b; }
.onb-btn { margin-left: auto; min-width: 170px; background: #58cc02; color: #fff; font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 26px; border-radius: 16px; box-shadow: 0 5px 0 #46a302; }
.onb-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #46a302; }
.onb-btn:disabled { background: #e5e5e5; color: #afafaf; box-shadow: 0 5px 0 #c9c9c9; cursor: default; }
.onb-foot.bad .onb-btn { background: #ff4b4b; box-shadow: 0 5px 0 #ea2b2b; }

/* ---------- victoria ---------- */
.win-stars { display: flex; justify-content: center; gap: 10px; font-size: 64px; line-height: 1; color: #e5e5e5; }
.win-stars span.on { color: #ffc800; text-shadow: 0 4px 0 #e5a800; animation: star .5s cubic-bezier(.2,1.8,.4,1) both; }
.win-stars span:nth-child(2) { transform: translateY(-14px); font-size: 1.2em; }
.win-stars span.on:nth-child(2) { animation-name: star2; }
@keyframes star { from { transform: scale(0) rotate(-40deg); } }
@keyframes star2 { from { transform: translateY(-14px) scale(0) rotate(-40deg); } to { transform: translateY(-14px); } }
.win-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 6px; }
.wc { border: 2px solid; border-radius: 14px; overflow: hidden; }
.wc small { display: block; color: #fff; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 4px; }
.wc b { display: block; padding: 10px 4px; font-size: 18px; }
.wc.xp { border-color: #ffc800; } .wc.xp small { background: #ffc800; } .wc.xp b { color: #e5a800; }
.wc.tries { border-color: #1cb0f6; } .wc.tries small { background: #1cb0f6; } .wc.tries b { color: #1899d6; }
.wc.fire { border-color: #ff9600; } .wc.fire small { background: #ff9600; } .wc.fire b { color: #ff9600; }
.win-unlock { background: #ddf4ff; color: #1899d6; border-radius: 14px; padding: 10px 14px; font-weight: 700; margin-top: 10px; }
.win-unlock.gold { background: #fff5d6; color: #b58500; }

@media (max-width: 860px) {
  .stat-chip { display: none; }
  .path-brand span { display: none; }
  .path-stats .st { font-size: 14px; padding: 5px 8px; }
  .unit-decor { display: none; }
  .onb-owl { font-size: 48px; }
  .onb-bubble { font-size: 17px; }
  .onb-art { font-size: 40px; }
  .onb-foot { flex-direction: column; align-items: stretch; }
  .onb-btn { margin-left: 0; width: 100%; }
}
.node-wrap:has(.start-bubble) { margin-top: 40px; }

/* ---------- Python · Qiskit ---------- */
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.seg { display: inline-flex; background: #f2f2f7; border-radius: 10px; padding: 3px; }
.seg button { padding: 6px 12px; border-radius: 8px; font-weight: 800; font-size: 13.5px; color: #6e6e73; }
.seg button.on { background: #fff; color: #1c1c1e; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.qk-btn { font-weight: 800; font-size: 13.5px; color: #6929c4; background: #f1ebff; padding: 7px 12px; border-radius: 10px; }
.qk-btn:hover { background: #e6dcff; }
.code .pre { color: #8e8e93; white-space: pre; padding-left: 4px; cursor: default; }
.code .pre.gap { height: 10px; }
.code .cm { color: #8e8e93; font-style: italic; }
.code .bi { color: #3900a1; }
.code .obj { color: #0b4f79; }
.code .qobj { color: #6929c4; font-weight: 700; }
.qk-code { text-align: left; background: #1e1b2e; color: #e8e3ff; border-radius: 14px; padding: 14px 16px; font-family: 'SF Mono', Menlo, monospace;
  font-size: 13.5px; line-height: 1.6; overflow-x: auto; white-space: pre; margin: 12px 0 4px; }

/* ---------- desafíos ---------- */
.path-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.chal-open { font-weight: 900; font-size: 15px; color: #fff; background: #ff9600; padding: 8px 14px; border-radius: 12px; box-shadow: 0 4px 0 #d97f00; }
.chal-open:active { transform: translateY(3px); box-shadow: 0 1px 0 #d97f00; }
.chal-promo { width: 100%; margin: 10px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; border-radius: 18px;
  border: 2px solid #e5e5e5; border-bottom-width: 6px; color: #4b4b4b; text-align: center; }
.chal-promo:hover { background: #fafafa; }
.chal-promo .cp-icons { font-size: 34px; letter-spacing: 6px; }
.chal-promo b { font-size: 20px; font-family: 'Fredoka'; }
.chal-promo span:last-child { color: #777; font-weight: 700; }
.chal-back { font-weight: 900; font-size: 16px; color: #1cb0f6; padding: 8px 10px; border-radius: 10px; justify-self: start; }
.chal-back:hover { background: #f2f2f2; }
.chal-col { max-width: 760px; margin: 0 auto; padding: 22px 18px 80px; }
.chal-h { font-family: 'Fredoka'; font-size: 32px; margin: 0; color: #3c3c3c; }
.chal-sub { color: #777; font-weight: 700; margin: 4px 0 18px; }
.chal-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.chal-tabs button { font-weight: 900; font-size: 16px; padding: 10px 16px; border-radius: 14px; border: 2px solid #e5e5e5; border-bottom-width: 5px; color: #777; }
.chal-tabs button small { font-size: 13px; opacity: .8; margin-left: 4px; }
.chal-tabs button.on { background: var(--c); border-color: var(--d); color: #fff; }
.chal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.chal-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border-radius: 16px;
  border: 2px solid #e5e5e5; border-bottom-width: 6px; min-height: 130px; color: #4b4b4b; transition: transform .1s; }
.chal-card:active { transform: translateY(3px); }
.chal-card .cc-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px;
  background: var(--c); color: #fff; box-shadow: 0 3px 0 var(--d); }
.chal-card b { font-size: 16px; line-height: 1.25; }
.chal-card small { margin-top: auto; font-weight: 800; color: var(--c); font-size: 13.5px; }
.chal-card.done { border-color: #ffd96b; background: #fffbea; }
.chal-card.done .cc-num { background: #ffc800; box-shadow: 0 3px 0 #e5a800; }
.chal-card.done small { color: #e5a800; letter-spacing: 1px; }
.chal-card.locked { background: #f7f7f7; color: #afafaf; }
.chal-card.locked .cc-num { background: #e5e5e5; box-shadow: 0 3px 0 #c9c9c9; font-size: 16px; }
.chal-card.locked small { color: #afafaf; }
.chal-card.shake { animation: nshake .4s; }

.chal-tag { font-weight: 900; color: #fff; background: var(--unit); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.chal-title { font-size: 19px; color: #3c3c3c; }
.chal-body { max-width: 980px; justify-content: flex-start; }
.chal-body.won { pointer-events: none; }
.chal-goal { font-size: 20px; font-weight: 800; color: #3c3c3c; margin: 0; }
.chal-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
.chal-states { display: flex; flex-direction: column; gap: 14px; }
.chal-states h4, .blk-h { margin: 0 0 8px; color: #777; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.blk-h small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.chal-rule { color: #777; font-weight: 700; font-size: 14.5px; line-height: 1.6; }
.chal-rule code { font-family: 'SF Mono', Menlo, monospace; color: #6929c4; background: #f1ebff; padding: 1px 6px; border-radius: 6px; }
.chal-hint { color: #1cb0f6; font-weight: 900; margin-left: 6px; }

.pycode { font-family: 'SF Mono', Menlo, monospace; font-size: 16px; line-height: 1.9; border: 2px solid #e5e5e5; border-radius: 16px; padding: 12px 14px; min-height: 160px; }
.pycode .pre { color: #8e8e93; white-space: pre; }
.pycode .kw { color: #ad3da4; font-weight: 700; } .pycode .num { color: #272ad8; } .pycode .cm { color: #8e8e93; font-style: italic; }
.pycode .qobj { color: #6929c4; font-weight: 700; } .pycode .qfn { color: #6929c4; }
.pyline { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: 0 4px; }
.pyline:hover { background: #f7f7fa; }
.pyline button { color: #c9c9c9; font-size: 14px; width: 26px; height: 26px; border-radius: 6px; }
.pyline button:hover { color: #ff4b4b; background: #ffdfe0; }
.pyline .caret { display: inline-block; width: 120px; height: 3px; background: #1cb0f6; border-radius: 2px; animation: blink 1s steps(2) infinite; }
.pychips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.qbars { display: flex; gap: 10px; align-items: flex-end; border: 2px solid #e5e5e5; border-radius: 16px; padding: 12px 14px 10px; }
.qbars.target { background: #f7fbff; border-color: #cfe9fb; }
.qb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qb-col { width: 100%; max-width: 54px; height: 90px; background: #f0f0f3; border-radius: 10px; display: flex; align-items: flex-end; overflow: hidden; }
.qb-col i { display: block; width: 100%; background: linear-gradient(#a986ff, #7c4dff); border-radius: 10px 10px 0 0; transition: height .4s; }
.qb-col i.neg { background: linear-gradient(#ff9bb0, #ff4b6e); }
.qb b { font-size: 15px; color: #3c3c3c; } .qb small { font-family: 'SF Mono', Menlo, monospace; color: #8e8e93; font-size: 12px; } .qb span { font-size: 18px; }

.blk-prog { display: flex; flex-direction: column; gap: 4px; min-height: 90px; border: 2px dashed #d7d7e0; border-radius: 16px; padding: 10px; margin-bottom: 16px; }
.blk-empty { color: #afafaf; font-weight: 700; margin: auto; text-align: center; }
.blk-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.blk { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 15px; padding: 9px 14px 9px 10px; border-radius: 8px 8px 8px 8px;
  position: relative; text-align: left; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .1s; }
.blk::before { content: ''; position: absolute; left: 16px; top: -5px; width: 18px; height: 6px; border-radius: 4px 4px 0 0; background: inherit; }
.blk span { font-size: 17px; }
.blk code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; opacity: .8; margin-left: 4px; background: rgba(0,0,0,.15); padding: 1px 6px; border-radius: 5px; }
.blk:hover { transform: translateX(3px); }
.blk.move { background: #4c97ff; } .blk.act { background: #ffab19; } .blk.q { background: #9966ff; }
.blk.active { outline: 3px solid #ffd23f; outline-offset: 2px; }
.blk-prog .blk { align-self: flex-start; }
.mini-map { display: grid; grid-template-columns: repeat(var(--cols), 54px); gap: 4px; justify-content: center; padding: 14px; background: linear-gradient(#bfe3fb, #eaf7ff); border-radius: 16px; }
.mm { width: 54px; height: 54px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; position: relative; }
.mm.path { background: #f0d9a8; box-shadow: inset 0 -4px 0 #d6b97c; }
.mm.tree { background: #7cc75b; box-shadow: inset 0 -4px 0 #5fae45; }
.mm.void { background: transparent; }
.mm-cat { font-size: 30px; position: relative; transition: all .3s; }
.mm-cat i { position: absolute; right: -10px; bottom: -6px; font-size: 14px; font-style: normal; background: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; color: #1cb0f6; font-weight: 900; }
.mm-cat.fall { opacity: .3; transform: scale(.5); }
.mm-state { text-align: center; font-weight: 800; color: #777; margin: 8px 0 0; }

@media (max-width: 860px) {
  .chal-open span { display: none; }
  .chal-split { grid-template-columns: 1fr; }
  .chal-title { font-size: 16px; }
  .mini-map { grid-template-columns: repeat(var(--cols), 44px); }
  .mm { width: 44px; height: 44px; font-size: 22px; }
}