/* ══════════════════════════════════════════════════════════════════════ studio.css — chrome for the two authoring tools. Every colour here comes from themes.js via applyThemeVars(), so the tools are painted out of the same palette as the room the characters stand in. Switching the theme repaints the tool and the preview together. Everything is scoped under .tool rather than bare element selectors, so this stylesheet can sit in the same document as the game without the two fighting over . ══════════════════════════════════════════════════════════════════════ */ .tool{ --line:#ffffff1f; --dim:#ffffff0a; --sunk:#00000047; --ui: ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif: Georgia,"Iowan Old Style","Times New Roman",serif; min-height:100vh; color:var(--cream); font-family:var(--ui); padding:28px 20px 60px; /* Flat near-black read as dead space. This is the game's own floor lattice — 2:1, the isometric ratio, so it's the grid the building is drawn on — under a wash of light off the top edge. All of it comes from the active palette, so it moves with the theme. */ background: radial-gradient(120% 62% at 50% -12%, var(--halo) 0%, transparent 62%), repeating-linear-gradient(26.565deg, var(--grid) 0 1px, transparent 1px 34px), repeating-linear-gradient(-26.565deg, var(--grid2) 0 1px, transparent 1px 34px), var(--bg); background-attachment:fixed; } .tool *{box-sizing:border-box} .tool a{color:var(--accent)} .tool code{font-family:var(--ui); color:var(--glow)} .tool header{max-width:1080px; margin:0 auto 24px; text-align:center} .tool h1{margin:0; font:600 clamp(15px,3.4vw,20px)/1.2 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--cream)} .tool header p{margin:12px auto 0; max-width:56ch; font:400 12px/1.7 var(--ui); color:var(--muted)} .tool nav{margin-top:14px; font:500 10px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase} .tool nav a{margin:0 8px} .wrap{max-width:1080px; margin:0 auto; display:grid; gap:20px; align-items:start} .wrap.two{grid-template-columns:minmax(320px,430px) 1fr} @media (max-width:860px){ .wrap.two{grid-template-columns:1fr} } .panel{background:var(--panel); border:1px solid var(--line); padding:20px; box-shadow:inset 0 1px 0 #ffffff0f, 0 2px 20px #00000038} .panel + .panel{margin-top:20px} .panel h2{margin:0 0 16px; font:600 10px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)} .panel h2 .count{color:var(--muted); letter-spacing:.06em} /* ── theme picker ────────────────────────────────────────────────── */ .themes{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:16px} .themes button{display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--sunk); border:1px solid var(--line); cursor:pointer; font:600 9px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .themes button em{width:24px; height:10px; display:block; font-style:normal; border:1px solid #0006} .themes button.on{border-color:var(--accent); color:var(--cream)} /* ── the preview screen ────────────────────────────────────────────── A bezel around the canvases so the character reads as being inside the same machine as the game, rather than floating on a form. */ .screen{position:relative; background:var(--sunk); border:1px solid var(--line); padding:20px 16px 16px; overflow:hidden} .screen::after{ /* scanlines, same trick the cabinet uses */ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(#0000 0 2px, #00000024 2px 3px);} .hero{display:flex; justify-content:center; align-items:flex-end} .strip{display:flex; gap:10px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)} .avCell{text-align:center} .avCell canvas{image-rendering:pixelated; display:block} .avCell span{display:block; margin-top:7px; font:500 8px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)} .avCell.walk span{color:var(--accent)} /* ── avatar control rows ─────────────────────────────────────────── */ .avRows{display:grid; gap:1px} .avRow{display:grid; grid-template-columns:16px 104px 1fr 26px; gap:9px; align-items:center; padding:6px 7px; border:1px solid transparent} .avRow:hover{border-color:var(--line); background:#ffffff07} .avRow.off > *:not(.tick){opacity:.28} .avRow label.name{font:500 10px/1.3 var(--ui); color:var(--cream); letter-spacing:.03em} .avRow .req{color:var(--muted); font-size:8px; letter-spacing:.1em} /* swatch strip — picking from the game's own ranges, so a character comes out looking like it belongs in the building */ .sw{display:flex; gap:3px; flex-wrap:wrap} .sw button{width:16px; height:16px; padding:0; border:1px solid #0006; cursor:pointer; background-clip:padding-box} .sw button:hover{transform:scale(1.18)} .sw button.on{box-shadow:0 0 0 1px var(--bg), 0 0 0 2px var(--accent)} /* ── form furniture ──────────────────────────────────────────────── */ .tool label.f{display:block; margin:0 0 6px; font:500 9px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)} .field{margin-bottom:16px} .field .hint{margin-top:6px; font:400 10px/1.5 var(--ui); color:var(--muted)} .tool input[type=checkbox]{accent-color:var(--accent); width:13px; height:13px; cursor:pointer; margin:0} .tool input[type=color]{width:26px; height:20px; padding:0; border:1px solid var(--line); background:none; cursor:pointer} .tool input[type=text],.tool select,.tool textarea{width:100%; background:var(--sunk); color:var(--cream); border:1px solid var(--line); padding:8px 10px; font:500 12px/1.6 var(--ui); outline:0} .avRow select{padding:3px 5px; font-size:10px; line-height:1.2} .tool textarea{resize:vertical; font-family:var(--serif); font-size:14px; line-height:1.7} .tool input:focus,.tool select:focus,.tool textarea:focus{border-color:var(--accent)} .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px} .tool button{font:600 10px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; background:var(--sunk); color:var(--cream); border:1px solid var(--line); padding:10px 14px; cursor:pointer} .tool button:hover{border-color:var(--accent); color:#fff} .tool button.primary{background:var(--accent); border-color:var(--accent); color:#fff} .tool button.primary:hover{filter:brightness(1.15)} .tool button.tiny{padding:5px 8px; font-size:9px} .tool button:disabled{opacity:.4; cursor:not-allowed} .tool button:disabled:hover{border-color:var(--line); color:var(--cream)} .btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px} .tool pre{margin:16px 0 0; background:var(--sunk); border:1px solid var(--line); padding:14px; overflow-x:auto; font:500 11px/1.7 var(--ui); color:var(--cream)} .hint{font:400 10px/1.6 var(--ui); color:var(--muted)} .said{color:var(--accent)} .warn{color:#ffc247}