/* Estilos del juego del Episodio 3 (todo vive dentro de .game) */
.game{
  --ink:#1f2937; --muted:#6b7280;
  --start:#e5e7eb; --start-b:#6b7280;
  --input:#bfdbfe; --input-b:#2563eb;
  --proc:#fde68a; --proc-b:#d97706;
  --out:#bbf7d0; --out-b:#16a34a;
  --bad:#ef4444;
  background:linear-gradient(160deg,#1e1b4b,#312e81 60%,#4c1d95);
  color:var(--ink);
  padding-bottom:130px;
}
.game *{box-sizing:border-box}

.game-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 20px;color:#fff;max-width:1400px;margin:0 auto}
.game-bar h1{margin:0;font-size:1.4rem;font-weight:700}
.game-bar h1 small{display:block;font-size:.8rem;font-weight:400;opacity:.8}
.tabs{display:flex;gap:8px}
.tab{border:0;border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:700;cursor:pointer;background:rgba(255,255,255,.15);color:#fff;font-family:inherit}
.tab.on{background:#fbbf24;color:#1f2937}
.stars{font-size:1.2rem}

.game-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"chart ctrl" "chart mon";align-items:start;gap:14px;padding:0 20px;max-width:1400px;margin:0 auto}
.col{display:flex;flex-direction:column;gap:14px}
#colLeft{grid-area:chart}
#colControls{grid-area:ctrl}
#colMonitor{grid-area:mon}
.card{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.game h2{margin:0 0 10px;font-size:1.05rem;font-weight:700}
.help{margin:0 0 10px;color:var(--muted);font-size:.95rem}

/* diagrama */
#chart{display:flex;flex-direction:column;align-items:center;padding:8px 0}
.blk{position:relative;min-width:280px;max-width:520px;width:92%;padding:18px 22px;text-align:center;font-weight:700;font-size:1.25rem;transition:filter .2s,transform .2s}
.blk span{position:relative;display:block}
.blk::before{content:"";position:absolute;inset:0;background:var(--c);border:3px solid var(--b);border-radius:10px;z-index:0}
.blk.start::before,.blk.end::before{border-radius:999px;--c:var(--start);--b:var(--start-b)}
.blk.input::before,.blk.output::before{transform:skewX(-18deg)}
.blk.input::before{--c:var(--input);--b:var(--input-b)}
.blk.output::before{--c:var(--out);--b:var(--out-b)}
.blk.process::before{--c:var(--proc);--b:var(--proc-b)}
.blk.slot{cursor:pointer}
.blk.slot.empty::before{border-style:dashed;background:#fff;--b:#9ca3af;animation:hint 1.6s ease-in-out infinite}
.blk.slot.empty span{color:var(--muted)}
.blk.slot.over{transform:scale(1.05)}
.picking .blk.slot::before{--b:#f59e0b;border-style:dashed;box-shadow:0 0 0 4px rgba(245,158,11,.35)}
.blk.wrong{animation:shake .4s}
.blk.wrong::before{border-color:var(--bad)!important}
.blk.active{filter:drop-shadow(0 0 12px #f59e0b);transform:scale(1.06)}
.blk.done::before{opacity:.75}
.arrow{width:4px;height:32px;background:#374151;position:relative;margin-bottom:8px}
.arrow::after{content:"";position:absolute;bottom:-8px;left:-5px;border:7px solid transparent;border-top:10px solid #374151;border-bottom:0}
@keyframes shake{25%{translate:-6px}75%{translate:6px}}
@keyframes hint{50%{border-color:#f59e0b}}

/* lateral */
#side{display:flex;flex-direction:column;gap:14px}
.bubble{flex:1;font-size:1.15rem;line-height:1.35;min-width:0}
#cBot{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(820px,calc(100% - 24px));z-index:55;display:flex;align-items:center;gap:14px;background:#fff;border:3px solid #fbbf24;border-radius:22px;padding:12px 18px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#cBot::before{content:"";position:absolute;left:34px;top:-14px;border:11px solid transparent;border-bottom:11px solid #fbbf24;border-top:0}
#cBot .bot{width:56px;height:56px;flex:none}
#cBot.talk{animation:talk .35s ease-out}
.bot-actions{display:flex;gap:8px;flex:none}
.bot-actions .btn{padding:10px 16px;font-size:1rem}
@keyframes talk{from{transform:translate(-50%,12px);opacity:.5}}
.mission{font-size:1rem}
.legend{margin-top:10px}
.mission b{color:#4338ca}
.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:.85rem}
.chip{padding:4px 10px;border-radius:8px;border:2px solid;font-weight:600}
.chip.i{background:var(--input);border-color:var(--input-b)}
.chip.p{background:var(--proc);border-color:var(--proc-b)}
.chip.o{background:var(--out);border-color:var(--out-b)}
#mem{display:flex;gap:12px;flex-wrap:wrap}
.var{width:104px;text-align:center}
.var .name{font-weight:800;font-size:1.1rem}
.var .val{width:100%;height:50px;border:3px solid;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;text-align:center;font-family:inherit}
.var .note{font-size:.72rem;line-height:1.1;margin-top:4px;color:var(--muted)}
.var.in .name{color:var(--input-b)}
.var.in .val{border-color:var(--input-b);background:var(--input)}
.var.calc .name{color:var(--proc-b)}
.var.calc .val{border-color:var(--proc-b);background:var(--proc);border-style:dashed}
input.val{background:#fff!important;outline:0}
input.val:focus{box-shadow:0 0 0 4px rgba(37,99,235,.3)}
.var .val.bad,input.val.bad{border-color:var(--bad)!important;animation:shake .4s}
.var .val.pop{animation:pop .5s}
.key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--muted)}
.key .k{width:14px;height:14px;border-radius:4px;border:2px solid;display:inline-block}
.key .k.in{background:var(--input);border-color:var(--input-b)}
.key .k.calc{background:var(--proc);border-color:var(--proc-b);margin-left:8px}
@keyframes pop{40%{transform:scale(1.3);background:#fde68a}}
#tray{display:flex;flex-wrap:wrap;gap:10px;min-height:52px}
.tc{border:3px solid #4338ca;background:#fff;border-radius:12px;padding:8px 14px;font-weight:700;font-size:1rem;cursor:grab;user-select:none}
.tc.op{font-size:1.8rem;padding:2px 18px;min-width:64px}
.tc.sel{background:#fde68a;transform:scale(1.08)}
.tc:hover{background:#eef2ff}
.screen{background:#111827;color:#4ade80;font-family:Consolas,monospace;border-radius:12px;padding:12px 16px;font-size:1.6rem;min-height:56px}
.screen.err{color:#f87171}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn.stop{background:#ef4444;box-shadow:0 4px 0 #b91c1c}
.switch{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-weight:700;cursor:pointer}
.switch input{width:22px;height:22px;margin-top:2px;accent-color:#6366f1;cursor:pointer;flex:none}
.switch small{display:block;font-weight:400;color:var(--muted)}
.stepno{display:inline-block;background:#4338ca;color:#fff;border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:700;margin-bottom:4px}
.btn{border:0;border-radius:14px;padding:12px 22px;font-size:1.15rem;font-weight:800;cursor:pointer;background:#22c55e;color:#fff;box-shadow:0 4px 0 #15803d;font-family:inherit}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.alt{background:#6366f1;box-shadow:0 4px 0 #4338ca}
.btn:disabled{opacity:.5;cursor:not-allowed}
.g-hidden{display:none!important}

/* celular: misión → piezas → diagrama → robot → memoria → pantalla */
@media(max-width:800px){
  .game-main{grid-template-columns:1fr;grid-template-areas:none}
  #colLeft,#colControls,#colMonitor{grid-area:auto}
  .col{display:contents}
  #cMission{order:1} #cTray{order:2} #chartCard{order:3}
  #cScreen{order:4} #cMem{order:5}
  #cBot{flex-wrap:wrap;gap:8px}
  .bubble{font-size:1rem}
  .blk{font-size:1.1rem;padding:14px 16px}
}

/* intro */
#intro{position:fixed;inset:0;background:rgba(15,10,50,.88);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
#intro .card{max-width:560px;text-align:center}
#intro.g-hidden{display:none!important}
.trio{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0;flex-wrap:wrap}
.trio .chip{font-size:1.1rem;padding:8px 14px}
.confetti{position:fixed;top:-20px;font-size:1.6rem;pointer-events:none;animation:fall 2s linear forwards;z-index:70}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}