#pyjama-editor { color:#f2ead7; background:#222a3b; border:2px solid #a99875; border-radius:12px; padding:0; width:min(820px,96vw); max-width:96vw; max-height:94dvh; overflow:auto; z-index:10000; }
#pyjama-editor::backdrop { background:#101320b8; }
.pj-card { padding:18px; margin:0; }
.pj-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pj-card h2 { margin:0; }
.pj-lock { font-size:13px; line-height:1.4; color:#d5cdbd; }
.pj-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.pj-preview { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0; }
.pj-preview canvas { width:100%; height:300px; image-rendering:pixelated; touch-action:none; border-radius:8px; background:#30394b; }
.pj-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; min-width:0; }
.pj-card label { display:flex; flex-direction:column; gap:5px; font-size:13px; min-width:0; }
.pj-card select,.pj-card input { font:inherit; width:100%; min-width:0; color:#f2ead7; background:#30394b; border:1px solid #9e9480; border-radius:5px; padding:9px; box-sizing:border-box; min-height:40px; }
.pj-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 10px; }
.pj-card .btn { min-height:40px; }
#pj-status { min-height:1.5em; margin-bottom:0; font-size:14px; }
#pj-status[data-error="true"] { color:#ffb8a5; }
#pyjama-open { margin:0; }
@media(max-width:560px) { .pj-card { padding:12px; }.pj-layout { grid-template-columns:1fr; gap:12px; }.pj-preview canvas { height:240px; }.pj-options { gap:8px; } }
@media(max-height:500px) and (min-width:561px) { .pj-preview canvas { height:220px; }.pj-card { padding:12px; }.pj-lock { margin:7px 0; }.pj-options { gap:6px; } }

/* Keep the compact retro menu height: pyjamas shares the final settings row. */
body.ps-ui #lobby #pyjama-open { min-height:var(--row); height:var(--row); margin:0; padding:0 var(--s5); font-size:inherit; }
body.ps-ui #lobby #pyjama-open::before { display:none; }

.lobby-customise { display:flex; gap:8px; flex-shrink:0; }
body.ps-ui #lobby .lobby-customise { order:20; display:flex; gap:var(--s8); }
body.ps-ui #lobby .lobby-customise > .btn { flex:1; min-width:0; margin:0; }
@media(max-width:560px) { body:not(.ps-ui) .lobby-head { flex-wrap:wrap; } body:not(.ps-ui) .lobby-customise { flex-basis:100%; justify-content:flex-end; } }

/* Retro looks: the editor speaks the game's own pixel type (PS Win on its 12u em, one hard shadow pixel), like Settings. */
body.ps-ui #pyjama-editor { font-family:var(--f-ui); font-size:var(--em); line-height:var(--lh); text-shadow:var(--tsh); border-radius:0; }
body.ps-ui #pyjama-editor :is(.pj-lock, label, #pj-status, select, input, button, small) { font-family:var(--f-ui); font-size:var(--em); }
body.ps-ui #pyjama-editor h2 { font-size:var(--em2); text-shadow:var(--tsh2); }
body.ps-ui #pyjama-editor :is(select, input) { border-radius:0; text-shadow:none; }