/* studio.css — Creator Studio (the Blockly + Monaco game editor inside the Account app). Loaded AFTER account.css and only ever ADDS to it: every colour, font, radius and shadow here comes from the account.css design tokens (--blue / --grad-blue / --grad-panel / --panel-1|2 / --fg / --muted / --green / --red / --f-ui / --f-display / --f-mono / --shadow-btn) and its rgba(43,140,255,0.NN) border idiom. Nothing new is invented palette-wise. Structure (matching #tab-studio in index.html): shell breakout ▸ first run ▸ toolbar ▸ studio primitives ▸ view tabs ▸ body/panes/divider ▸ blocks pane ▸ sprites manager ▸ code pane ▸ validation bar ▸ run overlay ▸ history drawer ▸ preview bar ▸ modals ▸ responsive ▸ motion + focus */ /* ============================ shell breakout ============================ The Studio is a focused workspace: it fills the viewport under the app bar and scrolls INSIDE its panes rather than scrolling the page. Driven purely by :has() so no JS class is needed on . (The app bar and section tabs are full width for every tab — see account.css — so only the height behaviour and the tighter padding are Studio-specific.) */ .workspace:has(> #tab-studio:not([hidden])) { padding:16px 18px 0; display:flex; flex-direction:column; min-height:0; } /* Panels are capped to a readable column by default; a workspace wants the whole width. */ .tab-panel.studio { max-width:none; margin:0; } /* …but the first-run and template screens are ordinary pages, not a workspace, so they sit in the same column as Creator Hub. Restoring the standard workspace padding while the editor is hidden means the two line up EXACTLY at every width, with no per-breakpoint fudge factor to keep in sync — the tighter 18px gutter above exists for the editor alone. */ .workspace:has(#tab-studio:not([hidden]) #studio-editor[hidden]) { padding:26px 22px 0; } .workspace:has(> #tab-studio:not([hidden])) .tabs { margin-bottom:14px; } /* the page footer would force the page to scroll; the Studio owns the full height instead */ main:has(#tab-studio:not([hidden])) .legal-footer { display:none; } .tab-panel.studio { position:relative; } /* run overlay + drawer anchor here */ .tab-panel.studio:not([hidden]) { display:flex; flex-direction:column; flex:1; min-height:0; padding-bottom:16px; } /* ============================ first run / templates ============================ */ /* Same column as every other .tab-panel, so "Creator Studio" starts at the same x as "Creator Hub". */ .studio-firstrun { max-width:1180px; margin:0 auto; width:100%; } .studio-firstrun[hidden] { display:none; } .studio-crumbs { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin-bottom:18px; } /* Keep each crumb on one line — without this the flex items shrink and "Creator Hub" wraps to two. */ .studio-crumbs > * { flex:none; white-space:nowrap; } .linkbtn { background:none; border:none; padding:4px 2px; margin:0; cursor:pointer; font-family:var(--f-ui); font-size:13px; font-weight:600; color:var(--blue); } .linkbtn:hover { text-decoration:underline; } /* Carries .page-head too, so the title/sub spacing is Creator Hub's, not a second variant. */ .studio-firstrun-head { margin-bottom:24px; } .starter-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; } .starter-grid-3 { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } .starter-card { position:relative; display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:22px; border-radius:20px; border:1px solid rgba(43,140,255,0.22); background:var(--grad-panel); box-shadow:0 12px 40px rgba(0,0,0,0.35); } .starter-card > button { margin-top:auto; } /* A template's cover art, full-bleed across the top of its card. Square and un-cropped on purpose: this is the exact picture the new game is created with, so the picker shows the whole of it. */ .starter-shot { align-self:stretch; width:calc(100% + 44px); margin:-22px -22px 0; display:block; aspect-ratio:1/1; object-fit:cover; border-radius:20px 20px 0 0; background:rgba(43,140,255,0.06); image-rendering:pixelated; } .starter-shot[hidden] { display:none; } .starter-icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(43,140,255,0.1); border:1px solid rgba(43,140,255,0.25); } /* A template card carries its cover instead of an emoji, and only falls back to one if that cover fails to load — so the badge has to actually disappear when hidden (display:flex ignores [hidden]). */ .starter-icon[hidden] { display:none; } .starter-title { font-family:var(--f-display); font-weight:700; font-size:19px; margin:0 0 6px; } .starter-desc { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; } /* "Continue working on" — the Creator Hub's own cards, made clickable end to end. */ .studio-recent { margin-top:34px; } .studio-recent[hidden] { display:none; } .studio-recent .section-title { margin-bottom:14px; } .studio-recent-card { position:relative; display:block; width:100%; padding:0; text-align:left; overflow:hidden; font-family:var(--f-ui); transition:border-color .15s, transform .15s; } .studio-recent-card:hover { border-color:rgba(43,140,255,0.55); transform:translateY(-2px); } /* The card is a div now (the bin can't live inside a button), so the opening half is its own button filling the card — the whole thing stays clickable and keyboard-reachable as before. */ .studio-recent-open { display:block; width:100%; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; } .studio-recent-open:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; border-radius:inherit; } /* Sits over the cover, top right. Always there rather than hover-only: it has to be reachable on a touchscreen, where there is no hover to reveal it. */ .studio-recent-del { position:absolute; top:10px; right:10px; z-index:1; background:rgba(8,8,24,0.72); backdrop-filter:blur(6px); } .studio-recent-card .game-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } /* ============================ studio primitives ============================ */ .iconbtn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border-radius:10px; background:transparent; border:1px solid rgba(43,140,255,0.22); color:var(--muted-2); font-family:var(--f-ui); font-size:15px; line-height:1; cursor:pointer; transition:border-color .15s, color .15s, background .15s; } .iconbtn:hover:not(:disabled) { color:var(--blue); border-color:rgba(43,140,255,0.6); background:rgba(43,140,255,0.08); } .iconbtn:disabled { opacity:.35; cursor:not-allowed; } .studio-toolbar-spacer { flex:1 1 auto; min-width:0; } .studio-toolbar-rule { flex:none; width:1px; height:22px; background:rgba(43,140,255,0.2); } .primary.sm { padding:8px 14px; border-radius:10px; font-size:13px; } .pill.is-running { color:var(--green); } .pill.is-running::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:wbpulsedot 1.4s ease-in-out infinite; } /* ============================ toolbar ============================ One row: back · name + save status · game code chip · spacer · actions. Hierarchy is load-bearing: Run = green primary, Save = outline, everything else ghost. */ .studio-toolbar { display:flex; align-items:center; gap:10px; flex:none; flex-wrap:nowrap; padding:10px 14px; margin-bottom:12px; border-radius:16px; border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel); box-shadow:0 10px 32px rgba(0,0,0,0.32); } /* Nowrap, so the toolbar never breaks into three ragged rows when the window narrows. Below the floor the whole editor scrolls sideways as one piece (see the small-screens section) — the toolbar goes with it rather than reflowing into something worse. The buttons hold their size so nothing gets crushed; only the spacer gives. */ .studio-toolbar > :not(.studio-toolbar-spacer) { flex:none; } .studio-back { font-size:17px; } .studio-identity { display:flex; flex-direction:column; gap:2px; min-width:0; } .studio-name { width:auto; min-width:0; max-width:280px; padding:5px 9px; border-radius:9px; background:transparent; border:1px solid transparent; font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--fg); } .studio-name:hover { border-color:rgba(43,140,255,0.25); background:rgba(5,3,15,0.4); } .studio-name:focus { border-color:rgba(43,140,255,0.7); background:rgba(5,3,15,0.7); box-shadow:0 0 0 3px rgba(43,140,255,0.15); } .studio-savestate { display:flex; align-items:center; gap:7px; margin:0; padding-left:9px; font-size:12px; color:var(--muted); } /* The state line is the retry affordance now that the Save button is gone, so its text is a real button — which means undoing everything a button looks like by default. */ .studio-savestate .txt { appearance:none; background:none; border:none; padding:0; font:inherit; color:inherit; text-align:left; cursor:default; } .studio-savestate.is-failed .txt, .studio-savestate.is-signedout .txt { cursor:pointer; text-decoration:underline; } .studio-savestate .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 7px rgba(70,224,138,0.7); } .studio-savestate.is-dirty .dot { background:var(--muted); box-shadow:none; } .studio-savestate.is-saving .dot { background:var(--blue); box-shadow:0 0 7px rgba(43,140,255,0.7); animation:wbpulsedot 1s ease-in-out infinite; } /* `is-failed`/`is-signedout` are what renderSaveState actually emits — an earlier draft styled `is-error`, which nothing sets, so a failed save wore the same green dot as a healthy one. */ .studio-savestate.is-failed, .studio-savestate.is-signedout { color:var(--red); } .studio-savestate.is-failed .dot, .studio-savestate.is-signedout .dot { background:var(--red); box-shadow:0 0 7px rgba(255,93,108,0.7); } /* A background version was kept. Deliberately understated — it appears, holds, and fades. */ .studio-autoversion { font-size:11px; font-weight:600; letter-spacing:.2px; color:var(--muted-2); padding:1px 7px; border-radius:999px; background:rgba(43,140,255,0.1); border:1px solid rgba(43,140,255,0.28); animation:studioBackedUp 4s ease-out forwards; } .studio-autoversion[hidden] { display:none; } @keyframes studioBackedUp { 0% { opacity:0; transform:translateY(2px); } 12%, 62% { opacity:1; transform:none; } 100% { opacity:0; transform:none; } } /* The label above the toolbar's status chip — "Game code", or "Not playable yet" while there is no code worth handing out. The chip itself is styled further down (.studio-statuschip). */ .studio-codechip { display:flex; flex-direction:column; gap:3px; flex:none; } .studio-codelabel { font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); padding-left:2px; } /* Run — the one green button on the page. Green analogue of account.css's .primary recipe. */ .studio-run { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:12px; border:1px solid rgba(70,224,138,0.6); background:linear-gradient(135deg,#5ceb9c,#1fb968); color:#04210f; font-family:var(--f-ui); font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 6px 18px rgba(31,185,104,0.35), inset 0 1px 0 rgba(255,255,255,0.28); transition:filter .15s, transform .05s; } .studio-run:hover:not(:disabled) { filter:brightness(1.07); } .studio-run:active:not(:disabled) { transform:translateY(1px); } .studio-run:disabled { background:rgba(138,147,173,0.12); border-color:transparent; color:#5a627a; box-shadow:none; cursor:not-allowed; filter:none; } /* Save — outline/secondary, deliberately quieter than Run but louder than the ghosts. */ .ghostbtn.studio-save { padding:11px 18px; border-color:rgba(43,140,255,0.5); color:var(--blue); font-size:14px; } .ghostbtn.studio-save:hover { background:rgba(43,140,255,0.1); border-color:rgba(43,140,255,0.8); } /* ============================ view tabs (narrow screens only) ============================ */ .studio-viewtabs { display:none; gap:8px; flex:none; padding:5px; margin-bottom:10px; border-radius:13px; background:rgba(12,18,48,0.5); border:1px solid rgba(43,140,255,0.16); } .studio-viewtab { flex:1; padding:10px 14px; border-radius:9px; background:transparent; border:none; color:var(--muted); font-family:var(--f-ui); font-size:13.5px; font-weight:600; cursor:pointer; } .studio-viewtab:hover { color:var(--fg); } .studio-viewtab.is-active { background:rgba(7,104,255,0.18); color:var(--blue); } /* ============================ editor body / panes / divider ============================ */ .studio-editor { display:flex; flex-direction:column; flex:1; min-height:0; } .studio-editor[hidden] { display:none; } .studio-body { display:flex; flex:1; min-height:0; min-width:0; } .studio-pane { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; border-radius:18px; border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel); box-shadow:0 12px 40px rgba(0,0,0,0.35); } /* An author `display` always beats the UA's [hidden] rule, so a class that sets one must restate it — without this, hiding the blocks pane at level 2 would do nothing at all. (Same trap as .field[hidden] in account.css, which once exposed the admin-only game-code field to everyone.) */ .studio-pane[hidden] { display:none; } /* Toolbar buttons share one height — a FIXED one, not a minimum. A colour emoji carries a taller line box than the text beside it, so a min-height still let one button grow past its neighbours; the clock is an SVG now, and the fixed height means no future glyph can do it again. */ .studio-toolbar .ghostbtn, .studio-toolbar .studio-run { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding-top:0; padding-bottom:0; line-height:1; } .btnicon { flex:none; } /* ---- the toolbar sheds its labels before it sheds the panel ---- The row is nowrap and every button is fixed-size, so its width is simply the sum of what is in it — and that sum outgrew the panel. At its longest it wanted about 1390px inside a panel whose floor is 1040, so on any ordinary laptop the buttons ran out past the rounded border. That was true before the Build Challenge button and it only became visible with it. Widening the floor would have been the wrong fix: it would put a horizontal scrollbar under a window that is perfectly big enough to work in. Instead the least important LABELS go, one band at a time, leaving the icon — each button keeps a title and an aria-label, so hiding the text costs a screen reader nothing and a mouse one hover. Run keeps its words at every width; it is the primary action and reading "▶" alone is a guess. */ .studio-toolbar .lbl { display:inline; } @media (max-width:1400px) { /* First to go: the two that are rarely pressed and whose icons are unambiguous. */ #studio-save-version .lbl, #studio-history-open .lbl, #studio-details-open .lbl { display:none; } } @media (max-width:1160px) { /* Then the competition button — the trophy carries it, and it is not an everyday action. */ #studio-enter-open .lbl { display:none; } } @media (max-width:1060px) { /* Last: mebo's name. His face is the most recognisable thing in the row, so this is the label that survives longest and still loses nothing when it goes. */ #studio-help-open .lbl { display:none; } } /* ============================ small screens ============================ Creator Studio has a FIXED minimum width rather than a fluid collapse. Two panes, a toolbar and a code surface have a size below which they stop being usable, and reflowing them into something narrower produces a worse answer than simply keeping the layout and letting the page scroll to it. 1040px is the floor: it is the width the toolbar needs on one row (its buttons are fixed-size and there are a lot of them), and the panes are comfortable there too. iPad landscape clears it; portrait scrolls sideways, which is a familiar gesture and costs nothing to learn. The scroll lives on the workspace, so the app bar and section tabs stay put and only the editor moves. The floor applies ONLY while the editor is open — the first-run and template screens are ordinary pages that stay responsive down to a phone, so scoping this to a visible #studio-editor keeps them out of it. */ .workspace:has(#tab-studio:not([hidden]) #studio-editor:not([hidden])) { overflow-x:auto; } .tab-panel.studio:not([hidden]):has(#studio-editor:not([hidden])) { min-width:1040px; } /* And the PAGE must not scroll vertically while the editor is open. Every box from body down is already `flex:1; min-height:0`, which is right — but body carried `min-height:100vh`, an "at least", so the panes' own minimum content pushed the document 115px past the window and the whole editor slid under the fold. Selecting a block near the bottom of the workspace then highlighted its lines in a part of Monaco that was off-screen: the feature worked and you could not see it work. `height` rather than `min-height` gives the flex chain a definite size to divide, so the panes shrink and scroll INSIDE themselves — which is what a two-pane editor is supposed to do, and what makes "click a block, see its code" true at any window size. Scoped to the open editor, so every ordinary page on the site keeps scrolling normally. The horizontal scroll above is unaffected. */ body.app:has(#tab-studio:not([hidden]) #studio-editor:not([hidden])) { height:100vh; overflow:hidden; } /* ---- new file / new folder ---- */ .studio-kinds { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:14px; } .studio-kind { display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; padding:10px 12px; border-radius:11px; text-align:left; background:rgba(5,3,15,0.4); border:1px solid var(--line-soft); color:var(--muted); transition:border-color .12s ease, background .12s ease; } .studio-kind:hover { border-color:var(--line); background:rgba(43,140,255,0.07); } .studio-kind.is-active { border-color:rgba(43,140,255,0.5); background:rgba(43,140,255,0.11); color:var(--fg); } .studio-kind-icon { display:flex; margin-bottom:2px; color:var(--muted-2); } .studio-kind.is-active .studio-kind-icon { color:var(--blue); } .studio-kind-name { font-size:13.5px; font-weight:600; color:var(--fg); } .studio-kind-what { font-size:11.5px; line-height:1.35; color:var(--muted); } /* The extension lives in the field, so the whole filename is visible as you type it. */ .studio-nameinput { display:flex; align-items:stretch; } .studio-nameinput input { border-top-right-radius:0; border-bottom-right-radius:0; } .studio-nameext { display:flex; align-items:center; flex:none; padding:0 12px; border-radius:0 11px 11px 0; border:1px solid rgba(43,140,255,0.3); border-left:none; background:rgba(43,140,255,0.09); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; color:var(--blue); } .studio-nameext[hidden] { display:none; } /* Download sits with the files rather than in the toolbar — it acts on them, and it is a rare thing to want next to Run, which is not. */ .studio-files-foot { flex:none; border-top:1px solid rgba(43,140,255,0.14); } .studio-files-foot .studio-filetree-note { border-top:none; } .studio-downloadlink { display:block; width:100%; padding:9px 12px; cursor:pointer; text-align:left; background:none; border:none; border-top:1px solid rgba(43,140,255,0.1); font-family:var(--f-ui); font-size:12px; color:var(--muted); transition:color .12s ease, background .12s ease; } .studio-downloadlink:hover { color:var(--blue); background:rgba(43,140,255,0.07); } /* ---- level 2: open tabs, and the preview surface ---- */ /* flex-direction is load-bearing: the base tab stacks a name over its caption for level 1, and without resetting it here the close button sat UNDER the filename instead of beside it. */ .studio-editor.is-code .studio-file { display:inline-flex; flex-direction:row; align-items:center; gap:7px; cursor:pointer; } .studio-file-x { appearance:none; border:none; background:none; cursor:pointer; padding:0 2px; line-height:1; font-size:11px; color:var(--muted); border-radius:4px; opacity:0; transition:opacity .12s, color .12s; } .studio-file:hover .studio-file-x, .studio-file.is-active .studio-file-x { opacity:.7; } .studio-file-x:hover { opacity:1; color:var(--red); background:rgba(239,68,68,0.12); } /* A picture or a sound opens as itself. Showing a PNG as bytes would be a worse answer than showing the PNG. */ .studio-preview { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:rgba(5,3,15,0.8); } .studio-preview[hidden] { display:none; } .studio-preview-stage { display:flex; align-items:center; justify-content:center; max-width:100%; max-height:70%; padding:18px; border-radius:14px; border:1px solid rgba(43,140,255,0.18); background:repeating-conic-gradient(rgba(255,255,255,0.045) 0% 25%, transparent 0% 50%) 50% / 18px 18px; } /* Pixel art must not be smoothed — a 16x16 sprite blown up should look like a 16x16 sprite. */ .studio-preview-stage img { max-width:min(420px, 60vw); max-height:46vh; image-rendering:pixelated; } .studio-preview-meta { margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--muted); } .studio-preview-none { margin:0; font-size:13px; color:var(--muted); } /* ---- level 2: the file tree ---- */ /* A starting width, not a fixed one — the divider overrides flex-grow to resize it. Using a flex-basis here (rather than 0 0 210px) is what lets that work. */ .studio-pane-files { flex:0.19 1 0; min-width:150px; } .studio-filetree { display:flex; flex-direction:column; gap:2px; padding:10px; overflow-y:auto; flex:1; } .studio-filetree-group { margin:10px 0 4px; padding:0 6px; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); } .studio-filetree-item { display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border-radius:8px; border:1px solid transparent; background:none; cursor:pointer; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:var(--muted); transition:background .12s ease, color .12s ease; } .studio-filetree-item:hover { background:rgba(43,140,255,0.08); color:var(--fg); } .studio-filetree-item.is-active { background:rgba(43,140,255,0.14); border-color:rgba(43,140,255,0.3); color:var(--fg); } /* Shipped with every game and not the creator's to edit — listed so they know it is there, but it does not pretend to be openable. */ .studio-filetree-item.is-provided { cursor:default; opacity:.55; } .studio-filetree-item.is-provided:hover { background:none; color:var(--muted); } /* Line glyphs, not emoji: they take the row's own colour, so an icon dims with a provided file and lifts with a selected one instead of shouting in full colour on every row. */ .studio-fileicon { flex:none; opacity:.75; } .studio-filetree-item.is-active .studio-fileicon { opacity:1; color:var(--blue); } .studio-filetree-folder .studio-fileicon { opacity:.6; } /* Folders are folders: nested, indented by depth, and each one a place things can be dropped. */ .studio-filetree-folder { display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px; width:100%; border:1px dashed transparent; background:none; cursor:pointer; text-align:left; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:var(--muted-2); } .studio-filetree-folder:hover { color:var(--fg); } /* A real chevron rather than a ▾ glyph: at the size this needs to be, a text arrow rendered as a couple of grey pixels and was easy to miss entirely. */ .studio-filetree-twist { flex:none; color:var(--muted-2); transition:transform .12s ease; } .studio-filetree-folder:hover .studio-filetree-twist { color:var(--blue); } .studio-filetree-folder.is-shut .studio-filetree-twist { transform:rotate(-90deg); } @media (prefers-reduced-motion:reduce) { .studio-filetree-twist { transition:none; } } .studio-filetree-folder, .studio-filetree-item { padding-left:calc(9px + var(--depth, 0) * 13px); } .studio-filetree-folder.is-dropping { border-color:rgba(70,224,138,0.6); background:rgba(70,224,138,0.1); color:#7ee08a; } /* One + per folder, so where a new thing lands is answered by which one you press. Revealed on hover so the tree stays quiet when you are only reading it. */ .studio-filetree-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .studio-filetree-plus { flex:none; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:auto; border-radius:5px; cursor:pointer; font-size:13px; line-height:1; color:var(--muted); opacity:0; transition:opacity .12s, color .12s; } .studio-filetree-folder:hover .studio-filetree-plus, .studio-filetree-group:hover .studio-filetree-plus, .studio-filetree-plus:focus-visible { opacity:1; } .studio-filetree-plus:hover { color:var(--blue); background:rgba(43,140,255,0.14); } .studio-filetree-group { display:flex; align-items:center; } .studio-newfile-kinds { margin-bottom:12px; } .studio-filetree-drophint { margin:6px 0 0; padding:0 9px; font-size:11px; line-height:1.4; color:var(--muted); opacity:.8; } .studio-filetree-note { flex:none; margin:0; padding:10px 12px; font-size:11.5px; line-height:1.45; color:var(--muted); border-top:1px solid rgba(43,140,255,0.14); } .studio-pane-blocks { flex:1.15 1 0; } .studio-pane-code { flex:1 1 0; } .studio-graduation[hidden] { display:none; } .studio-pane-head { display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid rgba(43,140,255,0.14); } .studio-pane-title { font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--fg); } .studio-pane-hint { font-size:12px; color:var(--muted); } .studio-pane-tools { display:flex; align-items:center; gap:6px; margin-left:auto; } .studio-pane-tools[hidden] { display:none; } .studio-modeswitch { flex:none; gap:6px; } .studio-modeswitch .seg-btn { flex:none; padding:8px 13px; font-size:13px; border-radius:10px; } .studio-gradswitch { flex:none; gap:6px; } .studio-gradswitch .seg-btn { flex:none; padding:6px 11px; font-size:12px; border-radius:9px; cursor:default; } .seg-btn.is-locked { color:#5a627a; border-color:rgba(138,147,173,0.25); background:rgba(138,147,173,0.06); } /* draggable divider: 6px of visible rail, a wider invisible hit area, a visible grip */ .studio-divider { position:relative; flex:none; width:6px; margin:0 5px; cursor:col-resize; display:flex; align-items:center; justify-content:center; border-radius:999px; background:transparent; transition:background .15s; } .studio-divider::before { content:""; position:absolute; top:0; bottom:0; left:-8px; right:-8px; } /* hit area */ .studio-divider span { width:4px; height:52px; border-radius:999px; background:rgba(43,140,255,0.3); transition:background .15s, height .15s; } .studio-divider:hover span, .studio-divider.is-dragging span { background:var(--blue); height:76px; } .studio-divider.is-dragging { background:rgba(43,140,255,0.08); } /* ============================ blocks pane ============================ */ .studio-workspace { flex:1; min-height:0; width:100%; position:relative; background: radial-gradient(circle at center, rgba(43,140,255,0.14) 1px, transparent 1.2px) 0 0/22px 22px, linear-gradient(180deg, rgba(5,3,15,0.55), rgba(5,3,15,0.8)); } .studio-workspace[hidden] { display:none; } .studio-workspace.is-readonly { opacity:.55; filter:grayscale(.35); } .studio-workspace-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; color:var(--muted); font-size:14px; text-align:center; padding:20px; } /* Toolbox category swatches. The Blockly workspace itself is themed in JS — these are the swatch colours (design doc §7) exposed both as tokens and as a ready-made dot class. */ .studio-pane-blocks { --cat-game:#b794ff; --cat-sprites:#78b4ff; --cat-input:#4fd6c4; --cat-collisions:#fb8ba0; --cat-world:#7ee08a; --cat-sound:#f79bd6; --cat-logic:#fbbf24; --cat-loops:#fb923c; --cat-variables:#818cf8; --cat-numbers:#38bdf8; } .studio-cat-swatch { display:inline-block; flex:none; width:12px; height:12px; border-radius:4px; background:var(--cat, var(--blue)); box-shadow:0 0 8px color-mix(in srgb, var(--cat, var(--blue)) 60%, transparent); } .studio-cat-swatch[data-cat="game"] { --cat:var(--cat-game); } .studio-cat-swatch[data-cat="sprites"] { --cat:var(--cat-sprites); } .studio-cat-swatch[data-cat="input"] { --cat:var(--cat-input); } .studio-cat-swatch[data-cat="collisions"] { --cat:var(--cat-collisions); } .studio-cat-swatch[data-cat="world"] { --cat:var(--cat-world); } .studio-cat-swatch[data-cat="sound"] { --cat:var(--cat-sound); } .studio-cat-swatch[data-cat="logic"] { --cat:var(--cat-logic); } .studio-cat-swatch[data-cat="loops"] { --cat:var(--cat-loops); } .studio-cat-swatch[data-cat="variables"] { --cat:var(--cat-variables); } .studio-cat-swatch[data-cat="numbers"] { --cat:var(--cat-numbers); } /* an invalid block: red ring + pulse (class applied to the block's SVG group by studio.js) */ @keyframes studio-invalid-pulse { 0%,100% { filter:drop-shadow(0 0 0 rgba(255,93,108,0.55)); } 50% { filter:drop-shadow(0 0 9px rgba(255,93,108,0.95)); } } .studio-invalid-block { animation:studio-invalid-pulse 1.3s ease-in-out infinite; } .studio-invalid-block .blocklyPath { stroke:var(--red); stroke-width:3px; } /* ============================ assets manager ============================ */ .studio-assets { flex:1; min-height:0; overflow-y:auto; padding:18px; } .studio-assets[hidden] { display:none; } .studio-assets-title { font-family:var(--f-display); font-weight:600; font-size:16px; margin:0 0 6px; } .studio-assets-help { font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 22px; max-width:560px; } .studio-assets-help strong { color:var(--fg); font-weight:600; } /* One section per kind, separated by a rule so the three don't run together. */ .asset-section + .asset-section { margin-top:26px; padding-top:22px; border-top:1px solid rgba(43,140,255,0.16); } .asset-section-title { display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:700; font-size:15px; margin:0 0 5px; } .asset-section-note { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 14px; max-width:560px; } .asset-section-note strong { color:var(--fg); font-weight:600; } /* Which files will be accepted — said before the picker opens, not after it's rejected. */ .asset-types { color:var(--muted-2); font-weight:600; } /* A sound or a picture: one file, one name, one row. */ .asset-row { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border-radius:13px; border:1px solid rgba(43,140,255,0.2); background:rgba(7,104,255,0.05); } .asset-row-icon { flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(43,140,255,0.1); border:1px solid rgba(43,140,255,0.25); } .asset-row-thumb { flex:none; width:38px; height:38px; border-radius:11px; overflow:hidden; background:rgba(43,140,255,0.06); border:1px solid rgba(43,140,255,0.25); } .asset-row-thumb img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; } .asset-row-id { display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; } .asset-row-name { font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--fg); } .asset-row-file { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* What kinds of file this dialog will take, sitting just above the picker button. */ .studio-asset-types { font-size:12px; color:var(--muted-2); font-weight:600; margin:0 0 4px; } .sprite-card { border-radius:16px; border:1px solid rgba(43,140,255,0.2); background:rgba(7,104,255,0.05); padding:14px 16px; margin-bottom:14px; } .sprite-card-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; } .sprite-name { width:auto; max-width:220px; padding:5px 9px; border-radius:9px; background:transparent; border:1px solid transparent; font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--fg); } .sprite-name:hover { border-color:rgba(43,140,255,0.25); } .sprite-count { font-size:12px; color:var(--muted); } .sprite-card-actions { display:flex; align-items:center; gap:6px; margin-left:auto; } .sprite-states { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; } .sprite-state, .sprite-state-add { flex:none; width:96px; border-radius:13px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px; text-align:center; } .sprite-state { border:1px solid rgba(43,140,255,0.22); background:rgba(5,3,15,0.6); } /* The thumbnail IS the swap button — clicking a picture to change it is the guess a child makes first, so it should be the thing that works. A real