/* Neku Studio — pixel UI. Hard edges, chunky borders, offset shadows. Themes are CSS variable sets switched via . */ :root, body[data-theme='neku-dark'] { --bg: #16121f; /* app background */ --bg2: #1e1930; /* panel background */ --bg3: #2a2342; /* controls */ --line: #3d3560; /* borders */ --ink: #e6e1f5; /* text */ --dim: #8d84ad; /* secondary text */ --accent: #29e6c4; /* primary accent (cyan) */ --accent2: #ff5c9e; /* secondary accent (pink) */ --warn: #ffcb47; --err: #ff5c5c; --ok: #4ade80; --shadow: #0a0812; --vpbg: #0e0b16; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } body[data-theme='crt-green'] { --bg: #050a06; --bg2: #081108; --bg3: #0e1f0f; --line: #1d4021; --ink: #b7f5c0; --dim: #4f7a55; --accent: #34ff6d; --accent2: #baff34; --warn: #e6ff47; --err: #ff6d34; --ok: #34ff6d; --shadow: #010301; --vpbg: #030503; } body[data-theme='famicom'] { --bg: #241418; --bg2: #2e1a1f; --bg3: #43242c; --line: #63343f; --ink: #f5e6d8; --dim: #a98a80; --accent: #e6413c; --accent2: #f5c542; --warn: #f5c542; --err: #ff7059; --ok: #7fd457; --shadow: #12080a; --vpbg: #1a0e11; } body[data-theme='paper'] { --bg: #e8e4da; --bg2: #f4f1e9; --bg3: #ffffff; --line: #b8b2a2; --ink: #2a2620; --dim: #857e6e; --accent: #d95525; --accent2: #2568d9; --warn: #b8860b; --err: #c0332b; --ok: #2e7d43; --shadow: #c9c4b6; --vpbg: #dcd8cc; } body[data-theme='cwat'] { --bg: #1b1230; --bg2: #241943; --bg3: #322459; --line: #4a3778; --ink: #efe9ff; --dim: #9c8cc4; --accent: #b18cff; --accent2: #ff5c9e; --warn: #ffcb47; --err: #ff6d7a; --ok: #6dffb8; --shadow: #0d081c; --vpbg: #130c24; } body[data-theme='gameboy'] { --bg: #0f380f; --bg2: #1a4a1a; --bg3: #2c632c; --line: #4a7d4a; --ink: #9bbc0f; --dim: #6a8f3c; --accent: #9bbc0f; --accent2: #d9ef62; --warn: #d9ef62; --err: #e0a030; --ok: #9bbc0f; --shadow: #071f07; --vpbg: #0a2c0a; } body[data-theme='synthwave'] { --bg: #16102e; --bg2: #1e1440; --bg3: #2c1c5c; --line: #4a2c8c; --ink: #f2e6ff; --dim: #8c7ab0; --accent: #00e5ff; --accent2: #ff2ba6; --warn: #ffd319; --err: #ff4d6d; --ok: #3dffa2; --shadow: #0a0620; --vpbg: #100b26; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 12px/1.5 var(--mono); overflow: hidden; image-rendering: pixelated; } #app { display: flex; flex-direction: column; height: 100vh; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg2); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* --- Toolbar --- */ #toolbar { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--bg2); border-bottom: 2px solid var(--line); flex: none; } #logo { user-select: none; display: flex; align-items: center; cursor: pointer; padding: 2px; } #logoCat { width: 22px; height: 22px; image-rendering: pixelated; transition: transform 0.15s; } #logo:hover #logoCat { transform: translateY(-2px); } /* --- Menu bar --- */ #menubar { display: flex; gap: 1px; } .menu-top { background: none; border: 2px solid transparent; box-shadow: none; padding: 2px 9px; color: var(--ink); letter-spacing: 0.5px; } .menu-top:hover, .menu-top.open { background: var(--bg3); border-color: var(--line); color: var(--accent); } .menu-top:active { transform: none; } .menu-pop { position: fixed; z-index: 3000; min-width: 210px; background: var(--bg2); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); padding: 3px; animation: menu-in 0.08s ease-out; } @keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } } .menu-item { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; background: none; border: 0; box-shadow: none; padding: 4px 8px 4px 2px; white-space: nowrap; } .menu-item:hover { background: var(--bg3); color: var(--accent); } .menu-item:active { transform: none; } .menu-item.off { opacity: 0.35; pointer-events: none; } .menu-item .mi-check { width: 14px; text-align: center; color: var(--accent); font-size: 9px; } .menu-item .mi-key { color: var(--dim); font-size: 10px; margin-left: 18px; } .menu-item .mi-sub { color: var(--dim); } .menu-sep { height: 2px; background: var(--line); margin: 3px 6px; opacity: 0.6; } .sep { width: 2px; height: 20px; background: var(--line); } .flex { flex: 1; } .dim-note { color: var(--dim); font-size: 11px; } button, select, input[type='text'], input[type='number'], #projectName { background: var(--bg3); color: var(--ink); border: 2px solid var(--line); border-radius: 0; padding: 3px 10px; font: inherit; box-shadow: 2px 2px 0 var(--shadow); transition: border-color 0.1s, color 0.1s, background 0.1s; } button { cursor: pointer; } button:hover { border-color: var(--accent); color: var(--accent); } button.danger-btn { color: var(--err); } button.danger-btn:hover { border-color: var(--err); } button:active { transform: translate(2px, 2px); box-shadow: none; } button.accent { background: var(--accent); color: var(--bg); font-weight: 700; border-color: var(--accent); letter-spacing: 1px; } button.accent:hover { color: var(--bg); filter: brightness(1.12); } button.accent.playing { background: var(--err); border-color: var(--err); } button.on { background: var(--accent2); color: var(--bg); border-color: var(--accent2); } #projectName { width: 170px; font-weight: 700; } select { max-width: 150px; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #peers { display: flex; gap: 4px; align-items: center; } .peer-chip { width: 14px; height: 14px; border: 2px solid var(--shadow); box-shadow: 1px 1px 0 var(--shadow); display: inline-block; } /* --- Dock layout --- */ #dockRoot { flex: 1; display: grid; min-height: 0; grid-template-columns: var(--zw-left, 230px) 6px 1fr 6px var(--zw-right, 270px); grid-template-rows: 1fr 6px var(--zh-bottom, 240px); grid-template-areas: 'left ls center rs right' 'left ls bs rs right' 'left ls bottom rs right'; } .zone { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg2); } .zone[data-zone='left'] { grid-area: left; border-right: 0; } .zone[data-zone='center'] { grid-area: center; background: var(--vpbg); } .zone[data-zone='right'] { grid-area: right; } .zone[data-zone='bottom'] { grid-area: bottom; } .splitter { background: var(--bg); position: relative; } .splitter::after { content: ''; position: absolute; inset: 2px; background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 5px); opacity: 0.5; } .splitter:hover::after { background: var(--accent); opacity: 0.8; } .splitter[data-dir='v'] { grid-area: ls; cursor: col-resize; } .splitter[data-dir='v2'] { grid-area: rs; cursor: col-resize; } .splitter[data-dir='h'] { grid-area: bs; cursor: row-resize; } .zone-tabs { display: flex; gap: 2px; padding: 4px 4px 0; background: var(--bg); border-bottom: 2px solid var(--line); flex: none; min-height: 28px; } .zone-tab { padding: 3px 12px 2px; background: var(--bg2); border: 2px solid var(--line); border-bottom: 0; color: var(--dim); cursor: pointer; user-select: none; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: none; } .zone-tab.active { background: var(--bg2); color: var(--accent); border-color: var(--accent); text-shadow: 1px 1px 0 var(--shadow); } .zone-tab.dragging { opacity: 0.4; } .zone.drop-ok .zone-tabs { background: var(--bg3); outline: 2px dashed var(--accent); outline-offset: -2px; } .zone-body { flex: 1; min-height: 0; position: relative; } .dock-panel { position: absolute; inset: 0; display: none; flex-direction: column; } .dock-panel.active { display: flex; } .panel-tools { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-bottom: 2px solid var(--line); flex: none; } .panel-tools button { padding: 1px 8px; } .fill-scroll { flex: 1; overflow-y: auto; min-height: 0; } /* --- Viewport (center) --- */ #vpTabs { display: flex; gap: 2px; padding: 4px 4px 0; background: var(--bg); border-bottom: 2px solid var(--line); } #vpBody { flex: 1; position: relative; min-height: 0; } .vp-pane { position: absolute; inset: 0; display: none; } .vp-pane.active { display: block; } #vpHint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); color: var(--dim); font-size: 10px; background: var(--bg2); border: 2px solid var(--line); padding: 1px 10px; pointer-events: none; white-space: nowrap; z-index: 5; } #playMount { position: absolute; inset: 0; display: grid; place-items: center; background: var(--vpbg); } #playMount .stage { position: relative; box-shadow: 6px 6px 0 var(--shadow); border: 2px solid var(--line); } /* --- Hierarchy tree --- */ .tree-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap; user-select: none; } .tree-row:hover { background: var(--bg3); } .tree-row.selected { background: var(--bg3); box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); } .tree-row .type { color: var(--dim); font-size: 10px; } .tree-row .badge3d { color: var(--accent2); font-size: 9px; font-weight: 700; border: 1px solid var(--accent2); padding: 0 3px; } .tree-row .badge-script { color: var(--ok); font-size: 10px; } .tree-row .peer-mark { width: 8px; height: 8px; flex: none; } .tree-row .hide-btn { margin-left: auto; opacity: 0.5; padding: 0 4px; border: 0; background: none; box-shadow: none; } /* --- Inspector --- */ #props { padding: 8px; } .prop-row { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; margin-bottom: 4px; } .prop-row label { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .prop-row input, .prop-row select { width: 100%; padding: 2px 6px; box-shadow: none; } .prop-row input[type='color'] { height: 24px; padding: 0 2px; } .prop-row input[type='checkbox'] { justify-self: start; width: 16px; height: 16px; accent-color: var(--accent); } .prop-section { margin: 12px 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); border-bottom: 2px solid var(--line); padding-bottom: 2px; text-shadow: 1px 1px 0 var(--shadow); } .prop-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .prop-actions button { flex: 1; } .danger { color: var(--err); } #props .empty { color: var(--dim); padding: 20px 10px; text-align: center; } /* tile palette */ #tilePalette { border: 2px solid var(--line); margin-top: 4px; image-rendering: pixelated; cursor: crosshair; max-width: 100%; } .paint-hint { color: var(--accent2); font-size: 10px; margin-top: 4px; } /* --- Assets --- */ #assetGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 8px; align-content: start; } .asset-card { border: 2px solid var(--line); background: var(--bg3); box-shadow: 3px 3px 0 var(--shadow); padding: 4px; cursor: grab; position: relative; } .asset-card:hover { border-color: var(--accent); } .asset-card img, .asset-card .asset-icon { width: 100%; height: 56px; object-fit: contain; display: grid; place-items: center; font-size: 26px; background: var(--vpbg); image-rendering: pixelated; } .asset-card .asset-name { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--dim); } .asset-card .asset-del { position: absolute; top: -2px; right: -2px; padding: 0 5px; font-size: 10px; background: var(--err); color: #fff; border-color: var(--err); display: none; } .asset-card:hover .asset-del { display: block; } #assetGrid.drop-ok { outline: 3px dashed var(--accent); outline-offset: -6px; } /* --- Console --- */ #consolePane { font-family: var(--mono); font-size: 11px; padding: 6px 10px; } .con-line { padding: 1px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; } .con-line.warn { color: var(--warn); } .con-line.error { color: var(--err); } /* --- CodeMirror host --- */ #codePane { flex: 1; min-height: 0; } #codePane .cm-editor { height: 100%; font-size: 12px; background: var(--vpbg); } #codePane .cm-editor.cm-focused { outline: none; } #codePane .cm-gutters { background: var(--bg2); color: var(--dim); border-right: 2px solid var(--line); } #codePane .cm-activeLine { background: color-mix(in srgb, var(--accent) 6%, transparent); } #codePane .cm-activeLineGutter { background: var(--bg3); color: var(--accent); } #codePane .cm-cursor { border-left: 2px solid var(--accent); } #codePane .cm-selectionBackground, #codePane ::selection { background: color-mix(in srgb, var(--accent2) 30%, transparent) !important; } #codePane .cm-content { caret-color: var(--accent); } #codePane .cm-tooltip { background: var(--bg2); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); color: var(--ink); } #codePane .cm-tooltip-autocomplete ul li[aria-selected] { background: var(--bg3); color: var(--accent); } .tk-kw { color: var(--accent2); } .tk-str { color: var(--ok); } .tk-num { color: var(--warn); } .tk-com { color: var(--dim); font-style: italic; } .tk-fn { color: var(--accent); } .tk-prop { color: var(--warn); } .tk-var { color: var(--ink); } /* --- Timeline --- */ .tl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px 1fr; } .tl-tracks { border-right: 2px solid var(--line); overflow-y: auto; padding-top: 20px; } .tl-trackrow { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 6px; font-size: 11px; white-space: nowrap; overflow: hidden; color: var(--dim); } .tl-trackrow b { color: var(--accent); font-weight: 700; } .tl-trackrow button { padding: 0 5px; font-size: 10px; box-shadow: none; border: 0; background: none; opacity: 0.5; } .tl-trackrow button:hover { opacity: 1; color: var(--err); } .tl-canvas { width: 100%; height: 100%; cursor: crosshair; } .tl-keyedit { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-top: 2px solid var(--line); flex: none; } .tl-keyedit label { color: var(--dim); font-size: 11px; } .tl-keyedit input, .tl-keyedit select { padding: 1px 5px; box-shadow: none; } /* --- Popup menus --- */ .popup-menu { position: fixed; z-index: 1000; background: var(--bg2); border: 2px solid var(--accent); box-shadow: 4px 4px 0 var(--shadow); display: flex; flex-direction: column; min-width: 300px; } .popup-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 0; box-shadow: none; padding: 8px 12px; border-bottom: 1px solid var(--line); } .popup-menu button:last-child { border-bottom: 0; } .popup-menu button:active { transform: none; } .popup-menu button b { color: var(--ink); } .popup-menu button:hover b { color: var(--accent); } .popup-menu button span { color: var(--dim); font-size: 10px; } /* --- Help overlay --- */ #helpOverlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; } #helpOverlay[hidden] { display: none !important; pointer-events: none; } #helpBox { width: min(680px, 92vw); max-height: 84vh; background: var(--bg2); border: 2px solid var(--accent); box-shadow: 6px 6px 0 var(--shadow); display: flex; flex-direction: column; } #helpBox .panel-tools { position: sticky; top: 0; z-index: 1; background: var(--bg3); } #helpContent { padding: 4px 14px 14px; } #helpContent h4 { color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; margin: 14px 0 4px; border-bottom: 2px solid var(--line); } #helpContent pre { background: var(--vpbg); border: 2px solid var(--line); padding: 8px 10px; font-size: 11px; overflow-x: auto; margin: 4px 0; color: var(--ink); } .help-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 10px 0 0; background: linear-gradient(transparent, var(--bg2) 30%); } /* --- Floating windows --- */ .nwin { position: fixed; background: var(--bg2); border: 2px solid var(--accent); box-shadow: 6px 6px 0 var(--shadow); display: flex; flex-direction: column; max-height: 86vh; } .nwin-title { display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: var(--bg3); border-bottom: 2px solid var(--line); cursor: grab; user-select: none; font-weight: 700; letter-spacing: 1px; font-size: 11px; } .nwin-title:active { cursor: grabbing; } .nwin-cat { width: 16px; height: 16px; image-rendering: pixelated; } .nwin-close { padding: 0 7px; } .nwin-body { overflow-y: auto; padding: 10px; } /* --- Paint --- */ .paint-tools { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } .paint-tools button { padding: 2px 9px; } .paint-tools button.on { border-color: var(--accent); color: var(--accent); } .paint-palette { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 8px; } .swatch { height: 22px; border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--shadow); padding: 0; } .swatch.on { border-color: var(--ink); outline: 2px solid var(--accent); } .swatch-custom { height: 22px; width: 100%; border: 2px solid var(--line); background: var(--bg3); padding: 0 2px; } .paint-canvas-wrap { display: grid; place-items: center; background: var(--vpbg); border: 2px solid var(--line); margin-bottom: 8px; } .paint-canvas { image-rendering: pixelated; cursor: crosshair; max-width: 100%; } .paint-name { flex: 1; } /* --- Settings --- */ .set-section { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); border-bottom: 2px solid var(--line); margin: 12px 0 6px; padding-bottom: 2px; } .set-section:first-child { margin-top: 0; } .set-help { color: var(--dim); font-size: 10px; margin-bottom: 6px; } .set-row { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; } .set-presetgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 4px; } .set-presetgrid button.on { border-color: var(--accent); color: var(--accent); } .set-themegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; } .set-swatchrow { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--dim); } .set-swatchrow input { width: 46px; height: 20px; border: 2px solid var(--line); background: var(--bg3); padding: 0 1px; } .set-pluginrow { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); } .set-pluginrow button { padding: 0 6px; } /* --- Main menu --- */ #mainMenu { position: fixed; inset: 0; z-index: 5000; background: color-mix(in srgb, var(--bg) 88%, transparent); display: grid; place-items: center; } #mmBox { display: grid; grid-template-columns: 240px 1fr; width: min(860px, 94vw); max-height: 90vh; background: var(--bg2); border: 2px solid var(--accent); box-shadow: 8px 8px 0 var(--shadow); } #mmLeft { background: var(--vpbg); border-right: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 12px; text-align: center; } #mmCat { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 var(--shadow)); } #mmTitle { font-size: 26px; font-weight: 700; letter-spacing: 4px; color: var(--accent); text-shadow: 3px 3px 0 var(--shadow); line-height: 1.2; } #mmVer { color: var(--dim); font-size: 10px; } #mmLinks { color: var(--dim); font-size: 10px; } #mmLinks a { color: var(--accent2); } #mmRight { padding: 14px 18px; overflow-y: auto; } .mm-section { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); border-bottom: 2px solid var(--line); margin: 10px 0 8px; padding-bottom: 2px; } .mm-section:first-child { margin-top: 0; } .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .mm-grid button, .mm-recents button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; } .mm-grid button span, .mm-recents button span { color: var(--dim); font-size: 10px; } .mm-recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .mm-row { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; } /* --- Explorer / Errors / Output --- */ .xp-section { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); padding: 6px 8px 2px; border-bottom: 1px solid var(--line); } .xp-add { padding: 0 6px; font-size: 10px; } .xp-row { display: flex; align-items: center; gap: 4px; padding: 2px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; } .xp-row:hover { background: var(--bg3); } .xp-row.on { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .xp-row button { padding: 0 4px; font-size: 10px; border: 0; box-shadow: none; background: none; opacity: 0.6; } .xp-row button:hover { opacity: 1; } .xp-star.main { color: var(--warn); opacity: 1; } .err-row { display: flex; gap: 8px; padding: 3px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 11px; align-items: baseline; } .err-row b { color: var(--err); font-size: 9px; letter-spacing: 1px; } .err-row.rt b { color: var(--warn); } .err-row .err-file { color: var(--accent); } .err-row:hover { background: var(--bg3); } .err-empty { display: flex; align-items: center; gap: 8px; color: var(--dim); padding: 16px; } .err-empty img { width: 24px; height: 24px; image-rendering: pixelated; opacity: 0.7; } .out-line { padding: 2px 10px; font-size: 11px; border-bottom: 1px solid var(--line); } .out-time { color: var(--dim); font-size: 9px; margin-right: 6px; } #debugBar { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--bg2) 92%, transparent); border: 2px solid var(--line); padding: 3px 8px; font-size: 10px; color: var(--dim); z-index: 10; } #debugBar button { padding: 0 7px; } /* peer selection outlines drawn by viewport code use these colors */ .peer-colors { display: none; } /* --- Status bar --- */ #statusbar { display: flex; align-items: center; gap: 12px; padding: 2px 10px; background: var(--bg2); border-top: 2px solid var(--line); flex: none; font-size: 10px; color: var(--dim); min-height: 22px; user-select: none; } #statusMsg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #statusVer { color: var(--dim); letter-spacing: 1px; } #statusCoop { display: flex; align-items: center; gap: 5px; color: var(--ok); } .coop-dot { width: 8px; height: 8px; background: var(--dim); display: inline-block; } .coop-dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); } /* --- Dialogs --- */ .dlg-overlay { position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; animation: dlg-fade 0.1s ease-out; } .dlg-overlay.closing { opacity: 0; transition: opacity 0.09s; } @keyframes dlg-fade { from { opacity: 0; } } .dlg { min-width: 320px; max-width: min(480px, 92vw); background: var(--bg2); border: 2px solid var(--accent); box-shadow: 6px 6px 0 var(--shadow); animation: dlg-pop 0.12s ease-out; } @keyframes dlg-pop { from { transform: translateY(6px); opacity: 0; } } .dlg-title { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--bg3); border-bottom: 2px solid var(--line); font-weight: 700; font-size: 11px; letter-spacing: 1px; } .dlg-cat { width: 16px; height: 16px; image-rendering: pixelated; } .dlg-body { padding: 14px 14px 4px; } .dlg-msg { color: var(--ink); margin-bottom: 10px; white-space: pre-wrap; } .dlg-input { width: 100%; padding: 5px 8px; } .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px 14px; } /* --- Toasts --- */ #toasts { position: fixed; right: 14px; bottom: 34px; z-index: 8500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); padding: 6px 12px; max-width: 360px; animation: toast-in 0.15s ease-out; } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } } .toast.bye { opacity: 0; transform: translateX(12px); transition: all 0.22s; } .toast.ok { border-color: var(--ok); } .toast.ok .toast-ico { color: var(--ok); } .toast.warn { border-color: var(--warn); } .toast.warn .toast-ico { color: var(--warn); } .toast.err { border-color: var(--err); } .toast.err .toast-ico { color: var(--err); } .toast.info .toast-ico { color: var(--accent); } /* --- Co-op window --- */ .coop-live { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; } .coop-live .coop-dot { width: 12px; height: 12px; } .coop-code-row { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11px; } .coop-code { background: var(--vpbg); border: 2px solid var(--accent); color: var(--accent); font-weight: 700; letter-spacing: 3px; padding: 1px 8px; font-size: 13px; } .coop-copy { padding: 0 6px; } .coop-peers { display: flex; flex-direction: column; gap: 2px; } .coop-peer { display: flex; align-items: center; gap: 8px; padding: 3px 2px; border-bottom: 1px solid var(--line); font-size: 11px; } .coop-sel { color: var(--dim); font-size: 10px; } .coop-join-row { display: flex; gap: 6px; } .coop-code-in { flex: 1; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; } .coop-adv { margin-top: 14px; } .coop-adv summary { color: var(--dim); font-size: 10px; cursor: pointer; letter-spacing: 1px; } .coop-adv summary:hover { color: var(--accent); } .coop-adv[open] summary { margin-bottom: 8px; } .coop-adv code { color: var(--accent2); } /* --- 3D viewport toolbar --- */ .vp3d-tools { position: absolute; top: 8px; left: 8px; z-index: 6; display: flex; gap: 4px; align-items: center; background: color-mix(in srgb, var(--bg2) 90%, transparent); border: 2px solid var(--line); padding: 3px 5px; } .vp3d-tools button { padding: 1px 8px; font-size: 11px; box-shadow: none; } .vp3d-tools button.on { background: var(--accent); border-color: var(--accent); color: var(--bg); } .vp3d-tools .sep { height: 14px; } /* --- Paint 2.0 --- */ .paint-wrap { display: grid; grid-template-columns: 1fr 128px; gap: 10px; } .paint-main { min-width: 0; } .paint-side { display: flex; flex-direction: column; gap: 6px; } .paint-layers { border: 2px solid var(--line); background: var(--vpbg); max-height: 180px; overflow-y: auto; } .paint-layer { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 10px; user-select: none; } .paint-layer.on { background: var(--bg3); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .paint-layer .pl-eye { border: 0; background: none; box-shadow: none; padding: 0 2px; opacity: 0.6; } .paint-layer .pl-eye:hover { opacity: 1; } .paint-layer-btns { display: flex; gap: 3px; flex-wrap: wrap; } .paint-layer-btns button { padding: 0 6px; font-size: 11px; flex: 1; } .paint-frames { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); } .paint-frames button { padding: 0 7px; } .paint-preview { border: 2px solid var(--line); background: var(--vpbg); image-rendering: pixelated; width: 96px; height: 96px; object-fit: contain; align-self: center; } .paint-status { font-size: 10px; color: var(--dim); min-height: 14px; } /* --- Inspector extras --- */ .prop-row input[type='range'] { padding: 0; box-shadow: none; accent-color: var(--accent); border: 0; background: none; } .prop-row .range-wrap { display: flex; align-items: center; gap: 6px; } .prop-row .range-wrap input[type='range'] { flex: 1; min-width: 0; } .prop-row .range-val { color: var(--dim); font-size: 10px; width: 34px; text-align: right; } .prop-row .asset-edit { padding: 0 6px; flex: none; } .prop-row .with-btn { display: flex; gap: 4px; } .prop-row .with-btn select { flex: 1; min-width: 0; } #props .empty-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 12px; color: var(--dim); text-align: center; } #props .empty-box img { width: 40px; height: 40px; image-rendering: pixelated; opacity: 0.55; }