/* Editor layout. Colours and buttons come from theme.css. */
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { display: flex; flex-direction: column; font-size: 14px; }

.toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.toolbar-nav { display: flex; gap: 2px; }
.toolbar-nav a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 4px; font-size: 13px; }
.toolbar-nav a:hover { color: var(--text); background: var(--raised); }
.toolbar-login { color: var(--link); font-size: 13px; }
.title-input[readonly] { cursor: default; }
.title-input[readonly]:hover { border-color: transparent; }
.example-banner {
    padding: 8px 14px; background: #1b3a59; border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--py-yellow); font-size: 13px; line-height: 1.5;
}
.example-banner strong { color: var(--py-yellow); }
.example-banner .example-hint { color: #c9d7e4; margin-left: 6px; }
.example-banner a { color: var(--py-yellow-light); }
.title-input {
    background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px;
    padding: 4px 6px; font: inherit; font-weight: 600; width: 16rem; max-width: 40vw;
}
.title-input:hover { border-color: var(--control-border); }
.title-input:focus { border-color: var(--py-blue); outline: none; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.toolbar .btn-primary, .stage-bar .btn-primary { min-width: 5.5rem; }
.save-state { color: var(--muted); font-size: 12px; }
.save-state[data-dirty="1"] { color: var(--warn); }
.status { margin-left: auto; color: var(--muted); font-size: 13px; }
.status[data-kind="running"] { color: var(--ok); font-weight: 600; }
.status[data-kind="busy"] { color: var(--warn); }
.status[data-kind="error"] { color: var(--error); }

.workspace {
    flex: 1; min-height: 0;
    --files: 200px;  /* file panel width */
    --stage: 42%;    /* game column width: set by the game size buttons */
    display: grid; grid-template-columns: var(--files) minmax(0, 1fr) minmax(320px, var(--stage));
}
.files {
    position: relative; display: flex; min-height: 0;
    background: var(--panel); border-right: 1px solid var(--border);
}
.files-panel { flex: 1; min-width: 0; overflow: auto; }
.panel-actions { display: flex; align-items: center; gap: 2px; }
.collapse-btn { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; }
.collapse-btn svg { width: 13px; height: 13px; }

/* Collapsed file panel: a narrow rail; the panel opens as a flyout over the code. */
.files-rail { display: none; }
.rail-btn {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer;
}
.rail-btn svg { width: 18px; height: 16px; }
.rail-btn:hover { color: var(--py-yellow); background: var(--raised); }
.rail-btn[aria-expanded="true"] { color: var(--py-yellow); background: var(--raised); border-color: var(--control-border); }
.rail-dock { margin-top: auto; }
.rail-dock svg { width: 13px; height: 13px; }
body[data-files="collapsed"] .workspace,
body[data-files="collapsed"][data-stage] .workspace { --files: 42px; }  /* beats the large-stage width */
body[data-files="collapsed"] .files-rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 42px; padding: 8px 0;
}
body[data-files="collapsed"] .files-panel { display: none; }
body[data-files="collapsed"] .files.flyout-open .files-panel {
    display: block; position: absolute; top: 0; bottom: 0; left: 41px; width: 250px; z-index: 30;
    background: var(--panel); border: 1px solid var(--border); border-left-color: var(--py-blue);
    box-shadow: 10px 0 28px rgba(0, 0, 0, .45);
    animation: flyout-in .12s ease-out;
}
@keyframes flyout-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body[data-files="collapsed"] .files.flyout-open .files-panel { animation: none; }
}
.panel-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--border);
}
.panel-title .hint { text-transform: none; letter-spacing: 0; }
.icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 13px; }
.icon-btn:hover { color: var(--py-yellow); }

#file-list { list-style: none; margin: 0; padding: 4px 0; }
#file-list li { display: flex; align-items: center; }
#file-list li:hover { background: var(--panel-2); }
#file-list li.active { background: var(--raised); box-shadow: inset 3px 0 0 var(--py-blue); }
.file-open {
    flex: 1; text-align: left; background: none; border: 0; color: var(--text);
    padding: 4px 12px; cursor: pointer; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-delete { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 10px; visibility: hidden; }
#file-list li:hover .file-delete { visibility: visible; }
.file-delete:hover { color: var(--error); }

.code { min-width: 0; min-height: 0; }
#code { width: 100%; height: 100%; }

.output {
    display: grid; grid-template-rows: auto minmax(200px, 1fr) auto minmax(120px, 38%);
    border-left: 1px solid var(--border); min-height: 0;
}
/* Game size: small / normal / large (body[data-stage]) and full screen. */
body[data-stage="small"] .workspace { --stage: 30%; }
body[data-stage="large"] .workspace { --stage: 64%; --files: 160px; }
body[data-stage="large"] .output { grid-template-rows: auto minmax(200px, 1fr) auto minmax(90px, 22%); }
.stage-controls { display: flex; gap: 2px; }
.stage-btn {
    display: grid; place-items: center; width: 28px; height: 22px; padding: 0;
    background: none; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer;
}
.stage-btn svg { width: 18px; height: 13px; }
.stage-btn:hover { color: var(--text); background: var(--raised); }
.stage-btn[aria-pressed="true"] { color: var(--py-yellow); border-color: var(--control-border); background: var(--raised); }

.preview { position: relative; background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 0; }
.stage-bar { display: none; }
.preview:fullscreen { background: var(--panel-2); }
.preview:fullscreen .stage-bar {
    display: flex; align-items: center; gap: 10px; padding: 6px 12px;
    background: var(--panel); border-bottom: 1px solid var(--border);
}
.preview:fullscreen .stage-bar .status { margin-left: 0; }
.stage-title { font-weight: 700; margin-right: 6px; color: var(--py-yellow); }
.stage-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.preview-placeholder {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--muted); text-align: center; padding: 1rem;
}
/* All player iframes share the preview box. Inactive ones (the warm spare)
   stay in place but invisible: off-screen iframes get throttled. */
.player-frame {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; opacity: 0; pointer-events: none; z-index: 0;
}
.player-frame.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

.console {
    margin: 0; padding: 8px 10px; overflow: auto; background: var(--panel-2);
    font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.console-stderr { color: var(--error); }
.console-info { color: var(--muted); font-style: italic; }
.console-error {
    display: block; color: var(--error); border-left: 3px solid var(--error);
    padding: 4px 8px; margin: 4px 0; background: rgba(255, 143, 143, .08);
}
.console-location {
    display: block; margin-bottom: 4px; background: none; border: 0; padding: 0;
    color: var(--py-yellow-light); cursor: pointer; text-decoration: underline; font: inherit;
}

/* --- Images ------------------------------------------------------------ */
.panel-title-sub { border-top: 1px solid var(--border); margin-top: 8px; }
.files.drop-target { outline: 2px dashed var(--py-yellow); outline-offset: -4px; background: rgba(75, 139, 190, .12); }
.asset-list { list-style: none; margin: 0; padding: 4px 0; }
.asset-list li { display: flex; align-items: center; }
.asset-list li:hover { background: var(--panel-2); }
.asset-list li.active { background: var(--raised); box-shadow: inset 3px 0 0 var(--py-blue); }
.asset-open { display: flex; align-items: center; gap: 8px; }
.asset-thumb {
    width: 20px; height: 20px; object-fit: contain; flex: none; image-rendering: pixelated;
    background: repeating-conic-gradient(#2c4763 0% 25%, #1c3550 0% 50%) 50% / 8px 8px;
}
.files-hint { color: var(--muted); font-size: 12px; padding: 4px 12px; }

.code { position: relative; }
.asset-view { height: 100%; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.asset-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.asset-title { margin: 0; font-size: 16px; font-family: ui-monospace, Consolas, monospace; }
.asset-meta { color: var(--muted); font-size: 13px; }
.asset-stage {
    display: grid; place-items: center; min-height: 200px; padding: 16px; border-radius: 6px;
    background: repeating-conic-gradient(#22405e 0% 25%, #183049 0% 50%) 50% / 20px 20px;
}
.asset-stage img { max-width: 100%; image-rendering: pixelated; }
.asset-help p { margin: 0 0 8px; }
.asset-snippet {
    margin: 0 0 10px; padding: 8px 10px; background: var(--panel-2); border-radius: 4px;
    border-left: 3px solid var(--py-yellow); color: var(--py-yellow-light);
    font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-x: auto;
}
.asset-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.asset-note { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
    .workspace { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto; overflow: auto; }
    .files { border-right: 0; border-bottom: 1px solid var(--border); }
    /* Narrow screens stack everything, so the panel is never collapsed there. */
    body[data-files="collapsed"] .files-rail, .collapse-btn { display: none; }
    body[data-files="collapsed"] .files-panel { display: block; }
    .output { border-left: 0; grid-template-rows: auto 360px auto 200px; }
}