@font-face{font-family:'Press Start 2P';src:url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/nunito-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/nunito-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

*{-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#150f2e;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(#2c1d57,#150f2e)}
#stage{position:absolute;left:0;top:0;width:960px;height:540px;overflow:hidden;background:#2c1d57;transform-origin:0 0;touch-action:none}
#stage.fade>.scr{animation:fin .28s ease-out}
@keyframes fin{from{opacity:0}to{opacity:1}}
.scr{position:absolute;left:0;top:0;width:960px;height:540px;overflow:hidden}

.ps{font-family:'Press Start 2P',monospace}
.nu{font-family:'Nunito',sans-serif;font-weight:800}
.ab{position:absolute}
.pn{position:absolute;box-sizing:border-box;background:linear-gradient(#fffaf0,#fff0cb);border:4px solid #241a45;border-radius:10px;box-shadow:0 6px 0 #241a45,inset 0 3px 0 rgba(255,255,255,.9),inset 0 -4px 0 rgba(36,26,69,.07);color:#241a45}
.dk{background:linear-gradient(#372670,#2a1b55);border-color:#150f2e;box-shadow:0 6px 0 #150f2e,inset 0 3px 0 rgba(255,255,255,.14),inset 0 -4px 0 rgba(0,0,0,.18);color:#fff}
.pa{position:absolute;box-sizing:border-box;background:linear-gradient(#3d2a75,#34236a);border:3px solid #150f2e;border-radius:10px;color:#fff;box-shadow:inset 0 3px 0 rgba(255,255,255,.1)}
.bt{display:inline-block;box-sizing:border-box;font-family:'Press Start 2P',monospace;line-height:1;background:linear-gradient(#f4ffb8,#c9f04f);color:#241a45;border:4px solid #241a45;border-radius:10px;box-shadow:0 5px 0 #241a45,inset 0 3px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(36,26,69,.14);text-align:center;cursor:pointer;transition:transform .06s,box-shadow .06s,filter .1s}
.bt:hover{filter:brightness(1.07)}
.bt:active,.bt.press{transform:translateY(4px);box-shadow:0 1px 0 #241a45,inset 0 3px 0 rgba(255,255,255,.75)}
.bt2{background:linear-gradient(#fffdf4,#f1e5c3)}
.bt.off{opacity:.45;pointer-events:none;filter:grayscale(.5)}
.btc{background:linear-gradient(#4a3790,#3a2a78);color:#dffc7f;border-color:#150f2e;box-shadow:0 5px 0 #150f2e,inset 0 3px 0 rgba(255,255,255,.18)}
.btc:active{box-shadow:0 1px 0 #150f2e}
.blk{position:relative;box-sizing:border-box;height:28px;line-height:28px;padding:0 14px;border-radius:7px;background:var(--c);color:#fff;font-family:'Nunito',sans-serif;font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--d),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.1);white-space:nowrap;width:210px}
.blk.dkt{color:#241a45}
.nt::after{display:none}
.cap{position:absolute;font-family:'Press Start 2P',monospace;font-size:10px;line-height:1;color:#dffc7f}
.ksl{width:30px;height:34px;background:#3d2a75;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(0,0,0,.25)}
.slot{display:inline-block;min-width:22px;height:20px;line-height:20px;padding:0 8px;margin:0 4px;border-radius:10px;background:#fff;color:#241a45;font-size:13px;vertical-align:middle;text-align:center}
.slot.ed{cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.0);transition:box-shadow .1s}
.slot.ed:hover{box-shadow:0 0 0 3px #ffe45e}
.ob{display:flex;align-items:center;gap:10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;line-height:1.1;margin-top:9px}
.cb{flex:none;width:16px;height:16px;border:3px solid #dffc7f;box-sizing:border-box;border-radius:4px}
.kc{display:inline-block;box-sizing:border-box;min-width:28px;height:28px;line-height:22px;text-align:center;padding:0 6px;border:3px solid #fff;border-radius:6px;font-family:'Press Start 2P',monospace;font-size:10px;margin:0 3px;vertical-align:middle;box-shadow:0 3px 0 rgba(255,255,255,.35)}
.it{position:absolute;left:36px;display:flex;align-items:center;gap:12px;font-family:'Nunito',sans-serif;font-weight:900;font-size:20px;line-height:1}
svg{display:block}

/* editor de blocos */
.zone{position:absolute;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#7a62c4 transparent}
.zone::-webkit-scrollbar{width:6px}.zone::-webkit-scrollbar-thumb{background:#7a62c4;border-radius:3px}
.node{position:relative;margin-bottom:3px;touch-action:none}
.node>.blk,.pi>.blk{width:100%;cursor:grab}
.node>.blk .x{position:absolute;right:6px;top:4px;width:20px;height:20px;line-height:19px;text-align:center;border-radius:10px;background:rgba(0,0,0,.28);color:#fff;font-size:12px;cursor:pointer;opacity:.0;transition:opacity .12s}
.node:hover>.blk .x,.node.sel>.blk .x{opacity:1}
.locked .node>.blk .x{display:none}
.node>.blk{transition:outline-color .1s,opacity .2s}
.cb-body{display:flex;min-height:26px}
.cb-bar{width:16px;flex:none;background:var(--c)}
.cb-in{flex:1;padding:4px 0 1px 0;min-height:24px}
.cb-foot{height:10px;background:var(--c);border-radius:0 0 7px 7px;box-shadow:0 3px 0 var(--d)}
.cb-head{border-radius:7px 7px 0 0!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)!important}
.drop.empty{min-height:22px}
.drop.empty:empty::before{content:'';display:block;height:20px;margin:2px 4px 2px 0;border:2px dashed rgba(255,255,255,.55);border-radius:6px}
.ins{height:0;margin:0;position:relative;z-index:3;pointer-events:none}
.ins::after{content:'';position:absolute;left:0;right:0;top:-5px;height:6px;background:#dffc7f;border-radius:3px;box-shadow:0 0 6px #dffc7f}
.hat{border-radius:14px 14px 5px 5px!important;margin-bottom:4px;width:100%}
.ghost{position:fixed;z-index:50;pointer-events:none;opacity:.92;transform:rotate(-3deg);box-shadow:0 10px 0 rgba(0,0,0,.3);transform-origin:0 0}
.run-now>.blk{outline:3px solid #fff;outline-offset:1px}
.run-ok>.blk{outline:3px solid #4cc06a;outline-offset:1px}
.run-bad>.blk{outline:3px solid #ff2d6f;outline-offset:1px}
.dim>.blk{opacity:.4}
.pi{margin-bottom:6px;touch-action:none}
.pi.dis{opacity:.45;pointer-events:none}
.newt{position:absolute;right:6px;top:-9px;padding:3px 5px;font-family:'Press Start 2P',monospace;font-size:7px;line-height:1;background:#ff2d6f;color:#fff;border-radius:3px;border:2px solid #241a45;z-index:2}
.agora{position:absolute;right:30px;top:9px;font-family:'Press Start 2P',monospace;font-size:7px;line-height:1;background:#241a45;color:#ffe45e;padding:3px 4px;border-radius:3px}
.numpad{position:absolute;z-index:40;background:#fff0cb;border:4px solid #241a45;border-radius:10px;padding:6px;display:grid;grid-template-columns:repeat(5,34px);gap:5px;box-shadow:0 5px 0 #241a45}
.numpad div{height:34px;line-height:34px;text-align:center;background:linear-gradient(#f4ffb8,#c9f04f);border:3px solid #241a45;border-radius:7px;font-family:'Press Start 2P',monospace;font-size:11px;cursor:pointer;color:#241a45}
.numpad div:hover{filter:brightness(1.08)}

/* mapa explorável */
.dpad{position:absolute;z-index:6;width:150px;height:150px}
.dpad div{position:absolute;width:48px;height:48px;border-radius:10px;background:rgba(36,26,69,.78);border:3px solid #dffc7f;color:#dffc7f;font-size:20px;line-height:42px;text-align:center;font-family:'Press Start 2P',monospace}

/* visualizador de código */
.cv-row{position:absolute}
.pulse{animation:pls 1s ease-in-out infinite}
@keyframes pls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.bob{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.shake{animation:shk .35s linear}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.pop{animation:popin .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.btnrow{cursor:pointer}
.hit{cursor:pointer}
#rot{position:fixed;inset:0;display:none;z-index:99;background:#150f2e;color:#ffc933;font-family:'Press Start 2P',monospace;font-size:14px;line-height:1.8;text-align:center;align-items:center;justify-content:center;padding:30px}
@media (orientation:portrait) and (max-width:700px){#rot{display:flex}}

.pulseop{animation:po 1s ease-in-out infinite}
@keyframes po{0%,100%{opacity:1}50%{opacity:.25}}
.run-bad>.blk::before,.run-ok>.blk::before{position:absolute;right:6px;top:4px;width:20px;height:20px;line-height:19px;text-align:center;border-radius:10px;font-size:12px;font-weight:900;font-family:'Nunito',sans-serif}
.run-bad>.blk::before{content:'✕';background:#fff;color:#ff2d6f}
.run-ok>.blk::before{content:'✓';background:rgba(255,255,255,.9);color:#1c7f4b}
.run-bad .x,.run-ok>.blk .x{display:none}

/* paleta mais compacta e demo em colunas */
.pi .cb-body{min-height:14px}
.pi .cb-in{min-height:12px;padding:0}
.pi .drop.empty{min-height:12px}
.pi .drop.empty:empty::before{height:8px;margin:2px 4px 2px 0}
.compact .pi{margin-bottom:4px}
.compact .pi .blk{height:25px;line-height:25px}
.compact .pi .cb-head{height:25px;line-height:25px}
.compact div[style*="position:relative"]{margin-bottom:4px!important}
.cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:8px;align-content:start}
.cols .hat{grid-column:1/-1}
.cols .node{margin-bottom:4px}
.cols .blk{font-size:12px;padding:0 8px}