/* Introduction to JavaScript: extra pieces on top of pygames.css (same bright cartoon theme, no dark panels, no timers). */
.pg-stack{display:grid;gap:12px;min-width:0}
.pg-msg.ok{padding:8px 12px;border:var(--bd);border-radius:12px;background:#BBF7D0}.pg-msg.bad{padding:8px 12px;border:var(--bd);border-radius:12px;background:#FEE2E2}
.pg-btn.big{font-size:clamp(18px,1.2vw + 10px,22px);padding:12px 22px}
.pg-card.purple{background:#EDE9FE}
.pg-code.big{font-size:clamp(20px,1.6vw + 8px,26px)}
.pg-code .ln.ghost{opacity:.55;font-style:italic;color:#64748B}.pg-code .ln.gone{text-decoration:line-through;opacity:.3}
.pg-code .ln.ghost .ji-tag{margin-left:10px;font:900 11px var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border:2px solid var(--ink);border-radius:99px;background:var(--sun);color:var(--ink);text-decoration:none;display:inline-block}
.pg-tok,.tok{font-family:ui-monospace,Consolas,monospace}
/* module 1: the Puppeteer stage */
.ji-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:center;min-height:300px;padding:14px;border:var(--bd);border-radius:20px;overflow:hidden;background:#fff}
.ji-strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s}
.ji-puppet{position:relative;justify-self:center;display:grid;gap:4px;justify-items:center;width:120px;transform-origin:50% 100%}
.ji-head{display:flex;gap:14px;align-items:center;justify-content:center;width:88px;height:70px;border:3px solid var(--ink);border-radius:18px 18px 12px 12px;background:#F1F5F9}.ji-head i{width:16px;height:16px;border:3px solid var(--ink);border-radius:50%;background:#fff}
.ji-body{display:grid;place-items:center;width:100px;height:92px;border:3px solid var(--ink);border-radius:14px;background:#F1F5F9}.ji-body span{width:30px;height:30px;border:3px solid var(--ink);border-radius:50%}
.ji-arms{display:flex;gap:80px;position:absolute;top:80px;left:-16px;right:-16px;justify-content:space-between}.ji-arms b{width:16px;height:70px;border:3px solid var(--ink);border-radius:10px;background:#F1F5F9}
.ji-page{display:grid;gap:8px;padding:14px;border:3px dashed #94A3B8;border-radius:6px;background:#fff;font-family:Georgia,serif}.ji-page h4{margin:0;font:700 22px Georgia,serif}.ji-page p{margin:0;font-size:18px}
.ji-pb{justify-self:start;font:400 18px Arial,sans-serif;padding:4px 10px;border:2px outset #CBD5E1;background:#E5E7EB;color:#000;cursor:pointer}.ji-sc{font-weight:700;display:none}
.ji-bubble{position:absolute;right:14px;top:10px;max-width:60%;padding:8px 14px;border:var(--bd);border-radius:18px;background:#fff;font-weight:900;opacity:0}.ji-bubble.on{opacity:1}
.ji-stage.l2,.ji-stage.l3{background:linear-gradient(180deg,#E0F2FE,#FEF9C3)}
.ji-stage.l2 .ji-head,.ji-stage.l3 .ji-head{background:var(--sun)}.ji-stage.l2 .ji-body,.ji-stage.l3 .ji-body{background:var(--coral)}.ji-stage.l2 .ji-body span,.ji-stage.l3 .ji-body span{background:#fff}.ji-stage.l2 .ji-arms b,.ji-stage.l3 .ji-arms b{background:var(--purple)}
.ji-stage.l2 .ji-page,.ji-stage.l3 .ji-page{border:var(--bd);border-radius:18px;background:#fff;box-shadow:var(--sh);font-family:var(--sans)}.ji-stage.l2 .ji-page h4,.ji-stage.l3 .ji-page h4{font:700 26px var(--serif);color:var(--coral)}
.ji-stage.l2 .ji-pb,.ji-stage.l3 .ji-pb{font:900 19px var(--sans);padding:10px 18px;border:var(--bd);border-radius:14px;background:var(--green);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.ji-stage.l3 .ji-strings{opacity:1}.ji-stage.l3 .ji-sc{display:inline-block;padding:2px 12px;border:var(--bd);border-radius:99px;background:var(--sun)}
.ji-puppet.dance{animation:ji-dance .8s ease-in-out 1}@keyframes ji-dance{20%{transform:rotate(-12deg) translateY(-14px)}50%{transform:rotate(12deg) translateY(-8px)}80%{transform:rotate(-6deg)}}
.ji-place{display:grid;gap:8px}.ji-place h4,.pg-card h4{margin:0;font-size:20px}.ji-check{display:grid;gap:8px;margin:0;padding-left:0;list-style:none}.ji-check li{display:grid;gap:2px}.ji-check small{font-size:15px;color:#475569}
/* module 2: the DOM Laser */
.ji-boxes{display:grid;gap:10px}.ji-boxcard{position:relative;display:grid;gap:4px;padding:10px 14px;border:var(--bd);border-radius:14px;background:#fff;overflow:hidden}.ji-boxcard code{justify-self:start}
.ji-box{margin:0;font:800 clamp(20px,2vw + 8px,26px) var(--sans);min-height:1.4em;word-break:break-word}
.ji-beam{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,transparent,var(--coral));opacity:0;pointer-events:none}.ji-boxcard.zap{animation:ji-glow .9s}.ji-boxcard.zap .ji-beam{animation:ji-beam .7s ease-out}
@keyframes ji-beam{0%{width:0;opacity:.9}100%{width:100%;opacity:0}}@keyframes ji-glow{0%,60%{background:#FEF08A}100%{background:#fff}}
.ji-codeview{display:grid;padding:10px 4px;border:var(--bd);border-radius:14px;background:#FFFDF7;font:700 var(--code)/1.6 ui-monospace,Consolas,monospace;overflow-x:auto;min-width:0}.ji-codeview .ln{display:block;padding:0 12px;white-space:pre}.ji-codeview .ln.ghost{opacity:.55;font-style:italic;color:#64748B}.ji-codeview .ln.gone{text-decoration:line-through;opacity:.3}
.ji-codeview .ji-tag{margin-left:10px;font:900 11px var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border:2px solid var(--ink);border-radius:99px;background:var(--sun);color:var(--ink);display:inline-block}
/* builder: live preview */
.ji-browser{border:var(--bd);border-radius:14px;overflow:hidden;background:#fff}.ji-bar{display:flex;gap:6px;align-items:center;padding:8px 12px;background:#E2E8F0;border-bottom:var(--bd)}.ji-bar i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--coral)}.ji-bar i:nth-child(2){background:var(--sun)}.ji-bar i:nth-child(3){background:var(--green)}
.ji-tab{margin-left:8px;padding:2px 12px;border:2px solid var(--ink);border-radius:8px 8px 0 0;background:#fff;font:800 14px var(--sans);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ji-view{padding:16px;min-height:160px;font:18px/1.5 Georgia,serif;color:#000;overflow:auto}.ji-view h1{font:700 30px Georgia,serif;margin:0 0 8px}.ji-view h2{font:700 25px Georgia,serif;margin:0 0 8px}.ji-view p{margin:0 0 10px;font-size:19px}.ji-empty{color:#64748B;font-family:var(--sans)}
.ji-problems{margin-top:8px;font-weight:700;font-size:16px;min-height:1.4em}.ji-problems.bad{padding:8px 12px;border:var(--bd);border-radius:12px;background:#FEE2E2}.ji-problems.ok{color:#047857}
.ji-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}.ji-slider input{width:100%;accent-color:var(--purple);height:28px}.ji-slider b{font:900 24px ui-monospace,Consolas,monospace;min-width:2ch}
/* module 4: memory boxes and the bouncer */
.ji-memory{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ji-op{font:900 30px var(--sans)}
.ji-mbox{display:grid;gap:4px;justify-items:center;padding:12px 16px;min-width:120px;border:var(--bd);border-radius:14px;background:#fff;box-shadow:4px 4px 0 var(--ink);cursor:pointer;font:inherit;color:var(--ink)}.ji-mbox b{font:900 36px ui-monospace,Consolas,monospace}.ji-mbox.full{background:var(--sun)}.ji-mbox.sum{cursor:default;background:#fff}.ji-mbox.sum.full{background:#BBF7D0}
.ji-bouncer{display:grid;gap:10px}.ji-cand{display:grid;gap:8px;padding:10px 14px;border:var(--bd);border-radius:14px;background:#fff}.ji-cand.done{background:#D1FAE5}.ji-cand>code{justify-self:start;font-size:1.15em}.ji-fb{margin:0;font-weight:800;min-height:1.2em}.ji-fb.ok{color:#047857}.ji-fb.bad{color:#B91C1C}
.ji-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}.ji-rule{display:flex;gap:10px;align-items:center;padding:8px 12px;border:var(--bd);border-radius:12px;background:#fff}.ji-rule>b{display:grid;place-items:center;flex:0 0 36px;height:36px;border:var(--bd);border-radius:50%;background:var(--sun);font-size:19px}.ji-rule small{display:block;font-family:ui-monospace,Consolas,monospace;font-weight:700}
/* module 6: statements and sorting */
.ji-prog{display:grid;gap:6px}.ji-stmt{display:flex;gap:10px;align-items:center;padding:8px 12px;border:var(--bd);border-radius:12px;background:#fff;font:800 var(--code) ui-monospace,Consolas,monospace}.ji-stmt code{border:0;background:none;padding:0;font-size:inherit}.ji-no{display:grid;place-items:center;width:32px;height:32px;border:var(--bd);border-radius:50%;background:#fff;font:900 16px var(--sans)}.ji-stmt.run{background:#FEF08A}.ji-stmt.past{background:#D1FAE5}.ji-stmt .semi{font-style:normal;color:var(--coral);font-weight:900}.ji-stmt.run .semi{background:var(--coral);color:#fff;border-radius:6px;padding:0 6px}
.ji-slots{display:flex;gap:10px;flex-wrap:wrap}.ji-slot{display:grid;justify-items:center;min-width:90px;padding:8px 14px;border:var(--bd);border-radius:14px;background:#fff;box-shadow:3px 3px 0 var(--ink)}.ji-slot small{font:900 14px ui-monospace,Consolas,monospace}.ji-slot b{font:900 30px ui-monospace,Consolas,monospace}.ji-slot.full{background:var(--sun)}
.ji-anat{display:flex;gap:8px;flex-wrap:wrap}.pg-btn[aria-pressed=true].tok.val{background:var(--sun)}
.ji-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}.ji-bucket{display:grid;gap:6px;align-content:start;min-height:130px;padding:10px;border:var(--bd);border-radius:16px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);text-align:left}.ji-bucket>b{font:900 20px var(--sans)}.ji-in{display:grid;gap:4px}.ji-bucket.b0{background:#DBEAFE}.ji-bucket.b1{background:#FBCFE8}.ji-bucket.b2{background:#BBF7D0}.ji-bucket.b3{background:#FEF08A}
/* module 8: operators */
.ji-calc{min-width:0}.ji-cookies{display:flex;gap:10px;flex-wrap:wrap}.ji-group{display:flex;gap:2px;padding:6px 10px;border:var(--bd);border-radius:14px;background:#fff;font-size:26px}.ji-group.rest{background:#FECACA;border-style:dashed}.ji-cookie.left{filter:none}
.ji-scorebox{display:grid;justify-items:center;padding:8px 20px;border:var(--bd);border-radius:14px;background:#fff;box-shadow:4px 4px 0 var(--ink)}.ji-scorebox small{font:900 13px ui-monospace,Consolas,monospace}.ji-score{font:900 44px ui-monospace,Consolas,monospace;color:var(--purple)}
@media(max-width:700px){.ji-stage{grid-template-columns:minmax(0,1fr)}.ji-bubble{position:static;max-width:100%}.pg-btn.big{width:100%}}
@media(prefers-reduced-motion:reduce){.ji-puppet.dance,.ji-boxcard.zap,.ji-boxcard.zap .ji-beam{animation:none}}
.ji .pg-widget>*,.ji .pg-stack>*{min-width:0}