:root{--bg:#f6f3ff;--panel:#fff;--ink:#2b2140;--muted:#7a7091;--accent:#6c4cf5;--accent-2:#ff7ab6;--ok:#2e9e44;--radius:14px;color:var(--ink);background:var(--bg);font-family:Nunito,Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app>.home{overflow-y:auto}.topbar{background:var(--accent);color:#fff;align-items:center;gap:12px;padding:10px 18px;display:flex}.logo{color:#fff;background:0 0;border:0;font-size:1.3rem;font-weight:800}.badge{color:#4a3500;background:#ffd166;border-radius:99px;padding:3px 10px;font-size:.8rem;font-weight:700}.btn{color:var(--ink);background:#fff;border:2px solid #d9d2f5;border-radius:10px;padding:7px 14px;font-weight:700}.btn:hover:not(:disabled){border-color:var(--accent)}.btn-play{background:var(--ok);border-color:var(--ok);color:#fff}.btn-big{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:14px;padding:12px 24px;font-size:1.15rem;box-shadow:0 4px #4b2fc4}.btn-big:active{transform:translateY(2px);box-shadow:0 2px #4b2fc4}.btn-ghost{background:0 0;border-color:#0000}.btn-send{background:var(--accent);border-color:var(--accent);color:#fff}.home{text-align:center;max-width:760px;margin:40px auto;padding:0 20px}.home h1{font-size:2rem}.home-sub{color:var(--muted);margin-bottom:26px;font-size:1.1rem}.project-list{text-align:left;margin-top:36px}.project-list ul{gap:8px;padding:0;list-style:none;display:grid}.project-list li{gap:6px;display:flex}.project-open{text-align:left;background:#fff;border:2px solid #e4def9;border-radius:12px;flex:1;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:700;display:flex}.project-open small{color:var(--muted);font-weight:400}.error{color:#c0392b}.code-form{justify-content:center;gap:10px;display:flex}.code-form input{font:inherit;text-align:center;border:2px solid #d9d2f5;border-radius:12px;padding:10px 14px;font-size:1.1rem}.muted{color:var(--muted)}.workshop{flex:1;grid-template-columns:minmax(320px,40%) 1fr;gap:16px;min-height:0;padding:16px;display:grid}.pane-chat,.pane-game{background:var(--panel);border-radius:var(--radius);min-height:0;box-shadow:0 2px 12px #3c287814}.pane-chat{flex-direction:column;display:flex;overflow:hidden}.pane-game{flex-direction:column;gap:10px;padding:14px;display:flex;overflow-y:auto}.game-title{margin:0;font-size:1.25rem}@media (width<=820px){.app{height:auto;overflow:visible}.workshop{grid-template-columns:1fr}.pane-chat{height:70vh}}.chat{flex-direction:column;height:100%;display:flex}.chat-log{flex-direction:column;flex:1;gap:10px;padding:16px;display:flex;overflow-y:auto}.bubble{white-space:pre-wrap;border-radius:16px;max-width:88%;padding:10px 14px;font-size:1.02rem;line-height:1.4}.bubble-pixel{background:#efeaff;border-bottom-left-radius:4px;align-self:flex-start}.bubble-child{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}.bubble-error{color:#a12;background:#ffe5e5;align-self:center}.chip{color:#2f6b22;background:#f3fbef;border:1px solid #cdeac3;border-radius:99px;align-self:flex-start;padding:3px 12px;font-size:.85rem;font-weight:600}.typing{color:var(--muted);font-style:italic}.typing span{animation:1.2s infinite blink}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,to{opacity:.2}50%{opacity:1}}.chat-input{border-top:1px solid #eee8fb;gap:8px;padding:12px;display:flex}.chat-input input{font:inherit;border:2px solid #d9d2f5;border-radius:12px;flex:1;padding:10px 14px;font-size:1rem}.chat-input input:focus{border-color:var(--accent);outline:none}.privacy-note{color:var(--muted);margin:0;padding:0 12px 10px;font-size:.78rem}.chat-welcome{flex-direction:column;gap:12px;display:flex}.starters{flex-wrap:wrap;gap:8px;display:flex}.card{border:2px solid;border-radius:14px;align-self:stretch;padding:12px 14px}.card p{margin:6px 0}.card-ask{background:#faf8ff;border-color:#d6ccff}.card-question{font-size:1.05rem;font-weight:800}.card-hint{color:var(--muted);font-size:.85rem}.choices{flex-direction:column;gap:8px;display:flex}.choice{text-align:left;background:#fff;border:2px solid #d6ccff;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;font-weight:700;display:flex}.choice:hover:not(:disabled){border-color:var(--accent);background:#f1edff}.choice-emoji{font-size:1.4rem}.card-playtest{text-align:center;background:#f1fbf3;border-color:#bfe8c6}.card-playtest .btn-big{background:var(--ok);border-color:var(--ok);box-shadow:0 4px #1f7a33}.card-explain{background:#fffaf0;border-color:#ffe0a3}.card-challenge{background:#fff5fa;border-color:#ffc2de}.card-title{font-weight:800}.game{flex-direction:column;gap:8px;display:flex}.game-toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@media (width<=480px){.game-toolbar .btn{padding:8px 12px;font-size:1.15rem}.game-toolbar .btn-label{display:none}.canvas-wrap.portrait{height:min(58vh,720px)}}.spacer{flex:1}.canvas-wrap{background:#000;border-radius:10px;align-self:center;width:100%;max-width:960px;position:relative;overflow:hidden}.canvas-wrap.portrait{width:auto;height:min(68vh,720px)}.canvas-wrap canvas{width:100%;height:100%;image-rendering:pixelated;outline:none;display:block}.canvas-wrap canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--accent-2)}.play-overlay{color:#fff;background:#140a3259;border:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:3rem;display:flex;position:absolute;inset:0}.play-overlay span{font-size:1.1rem;font-weight:800}.game-help{color:var(--muted);margin:0;font-size:.85rem}.game,.game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.canvas-wrap canvas{touch-action:none}.touch-pad{touch-action:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;display:none}@media (pointer:coarse),(hover:none){.touch-pad{display:flex}.game-help{display:none}}.pad-btn{touch-action:none;color:var(--ink);background:#fff;border:3px solid #cfc5f7;border-radius:18px;min-width:clamp(52px,15vw,76px);height:clamp(56px,16vw,76px);padding:0 8px;font-size:1.6rem;font-weight:800;box-shadow:0 4px #cfc5f7}.pad-btn.pressed{background:#ece6ff;transform:translateY(3px);box-shadow:0 1px #cfc5f7}.pad-row{gap:10px;display:flex}.pad-actions{gap:8px;margin-left:auto;display:flex}.pad-actions-many .pad-action{min-width:clamp(64px,19vw,100px);font-size:1rem}.pad-jump,.pad-action{background:var(--ok);color:#fff;border-color:#1f7a33;min-width:clamp(84px,26vw,120px);font-size:1.2rem;box-shadow:0 4px #1f7a33}.pad-jump.pressed,.pad-action.pressed{background:#258a3b;box-shadow:0 1px #1f7a33}.pad-dpad{grid-template-rows:repeat(2,64px);grid-template-columns:repeat(3,68px);gap:6px;display:grid}.pad-dpad .pad-btn{min-width:0;height:64px}.pad-up{grid-area:1/2}.pad-left{grid-area:2/1}.pad-down{grid-area:2/2}.pad-right{grid-area:2/3}.tabs{border-bottom:2px solid #eee8fb;gap:6px;display:flex}.tab{color:var(--muted);background:0 0;border:0;border-bottom:3px solid #0000;margin-bottom:-2px;padding:8px 14px;font-weight:700}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-body{flex:1;min-height:160px}.rules-panel h3{margin:14px 0 6px;font-size:1rem}.rules-panel ol{margin:0;padding-left:22px;line-height:1.6}.pill-list{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.pill{background:#f1edff;border-radius:99px;padding:3px 10px;font-size:.88rem}.kind-player{background:#dbe8ff}.kind-enemy{background:#ffdede}.kind-item{background:#fff3c4}.kind-platform{background:#ecdccd}.code-panel{flex-direction:column;gap:8px;display:flex}.code-note{color:var(--muted);margin:4px 0;font-size:.85rem}.code-explain{background:#fffaf0;border:2px solid #ffe0a3;border-radius:12px;padding:10px 12px;font-weight:600}.code-block{color:#e8e6f0;background:#1e1b2e;border:3px solid #0000;border-radius:10px;margin:0;padding:10px 12px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.85rem;line-height:1.45;overflow-x:auto}.code-target{border-color:var(--accent-2);box-shadow:0 0 0 4px #ff7ab640}.tok-comment{color:#8bd49c}.tok-string{color:#ffcb6b}.tok-keyword{color:#c792ea}.tok-number{color:#f78c6c}