/* predict the output */
.po-play{display:grid;gap:14px;max-width:640px;margin-inline:auto;width:100%;position:relative}.po-play[hidden]{display:none}
.po-q{margin:0;font:500 clamp(22px,4.5vw,28px) var(--serif);text-align:center}
.po-code{margin:0;padding:14px 4px;border-radius:18px;background:#14122b;color:#e8e4ff;font:600 clamp(13px,3.2vw,17px)/1.7 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.po-line{display:block;white-space:pre}.po-no{display:inline-block;width:2.6ch;margin-right:1.2ch;text-align:right;color:#8a85b8;user-select:none}
.po-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.po-opt{padding:14px 12px;border-radius:16px;border:2px solid var(--line-2);background:#fff;font:700 18px ui-monospace,Menlo,Consolas,monospace;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s,transform .15s;word-break:break-all}
.po-opt:hover:not(:disabled){border-color:var(--c);background:var(--c-soft);transform:translateY(-2px)}.po-opt.ok{border-color:#17753A;background:#e6f6ec}.po-opt.no{border-color:#B3261E;background:#fdeceb}
.po-out{display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#0b0a1c;color:#9ff0b5;font:700 18px ui-monospace,Menlo,Consolas,monospace}.po-out small{color:#8a85b8;font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase}.po-out.bad b{color:#ffb4a8}
.po-next{display:flex;justify-content:center}

/* ---------- Code Jungle ---------- */
.cj{display:grid}
.cj-map[hidden],.cj-play[hidden]{display:none}
.cj-play{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,1fr);gap:16px;align-items:start}
.cj-world{position:relative;border-radius:22px;overflow:hidden;background:#0e1a3a;box-shadow:0 0 0 2px color-mix(in srgb,var(--tc,#8b5cf6) 55%,transparent),0 30px 60px -36px var(--tc,#000)}
.cj-canvas{display:block;width:100%;touch-action:manipulation}
.cj-hud{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;pointer-events:none;z-index:2}
.cj-hud>*{pointer-events:auto}
.cj-variants,.cj-hud-r{display:flex;gap:6px;flex-wrap:wrap}
.cj-var[aria-pressed=true]{background:#fff;color:#1d2856}
.cj-var.ok::after{content:" ✓";color:#2fb344}.cj-var.bad::after{content:" ✗";color:#e03131}
.cj-side{display:grid;gap:10px;min-width:0}
.cj-mission{padding:14px 16px;border-radius:18px;background:linear-gradient(140deg,#151a45,color-mix(in srgb,var(--tc,#8b5cf6) 45%,#151a45));color:#fff;box-shadow:0 16px 30px -22px var(--tc,#000)}
.cj-kicker{margin:0;font:800 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--tc,#8b5cf6) 35%,#fff)}
.cj-title{margin:3px 0 6px;font:500 26px/1.1 var(--serif)}
.cj-goal{margin:0 0 6px;font-weight:700}
.cj-concept{margin:0;font-size:14px;line-height:1.5;color:#d5dcfb}
.cj-mission code,.cj-msg code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.14);font-size:.92em}
.cj-ed{height:clamp(190px,32vh,290px)}
.cj-palette{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.cj-palette small{font-weight:800;color:var(--c-ink);margin-right:2px}
.cj-pal{padding:6px 10px;border-radius:10px;border:1px solid #c9d5ff;background:#eef2ff;color:#2a3a8f;font:600 13px ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer;transition:transform .12s,background .12s}
.cj-pal:hover{transform:translateY(-2px);background:#dfe6ff}
.cj-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cj-run{min-width:120px}
.cj-msg{margin:0;min-height:1.5em;padding:10px 12px;border-radius:12px;background:var(--c-soft);color:var(--c-ink);font-weight:700;line-height:1.45}
.cj-msg.is-bad{background:#fde8e8;color:#9b1c1c}.cj-msg.is-good{background:#e3f9e5;color:#1b5e20}.cj-msg.is-hint{background:#fff6d6;color:#6b4e00}
.cj-msg:empty{display:none}
@media(max-width:900px){.cj-play{grid-template-columns:1fr}}
/* Bug Hunter, Code Builder */
.bh-play,.cb-play{display:grid;gap:14px;max-width:680px;margin-inline:auto;width:100%}
.bh-play[hidden],.cb-play[hidden]{display:none}
.bh-goal{margin:0;padding:10px 14px;border-radius:14px;background:var(--c-soft);font-weight:600;line-height:1.5}.bh-bad{color:#B3261E}
.bh-code{display:grid;gap:4px;padding:10px;border-radius:16px;background:#1d2433}
.bh-line{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:8px 12px;border-radius:10px;border:2px solid transparent;background:transparent;cursor:pointer;color:#e8ecf5;transition:background .12s,border-color .12s}
.bh-line i{font:600 12px ui-monospace,Consolas,monospace;color:#8b95ad;min-width:1.4em;font-style:normal}.bh-line code{font:600 15px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow-x:auto}
.bh-line:hover:not(:disabled){background:#2a3550;border-color:#4b5b85}.bh-line.no{background:#4a2227;border-color:#B3261E;opacity:.75}.bh-line.ok{background:#173d27;border-color:#2fbf6b}.bh-line:disabled{cursor:default}
.bh-info{min-height:1.4em;font-weight:600;line-height:1.5}.bh-info.good{padding:12px 14px;border-radius:14px;background:#e3f9e5;color:#1b5e20}.bh-info small{font-weight:500}
.bh-tray,.cb-tray{display:flex;gap:10px;flex-wrap:wrap}
.cb-title{margin:0;font:600 clamp(20px,4vw,26px)/1.25 var(--serif)}.cb-goal{margin:0;padding:10px 14px;border-radius:14px;background:var(--c-soft);font-weight:600}
.cb-lb{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink)}
.cb-built,.cb-pile{display:grid;gap:6px;padding:10px;border-radius:16px;min-height:56px}.cb-built{background:#1d2433}.cb-pile{background:var(--c-soft);border:2px dashed var(--c)}
.cb-built.empty::before{content:"Tap lines below to build the program here";color:#8b95ad;font-size:14px;padding:6px}
.cb-chip{text-align:left;padding:9px 12px;border-radius:10px;border:2px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink);box-shadow:0 3px 0 var(--line-2);transition:transform .1s}.cb-chip:hover:not(:disabled){transform:translateY(-1px);border-color:var(--c)}
.cb-built .cb-chip{background:#2a3550;border-color:#4b5b85;color:#e8ecf5;box-shadow:none}.cb-chip code{font:600 15px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}
.cb-chip:disabled{cursor:default;opacity:.9}
.cb-out{min-height:1.4em;font-weight:600;line-height:1.5}.cb-out.good{padding:12px 14px;border-radius:14px;background:#e3f9e5;color:#1b5e20}.cb-out.bad{color:#9b1c1c}