@font-face {
    font-family: "Silkscreen";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("assets/fonts/silkscreen-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Silkscreen";
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url("assets/fonts/silkscreen-bold.woff2") format("woff2");
}

:root {
    --fighter-bg: #07090d;
    --fighter-panel: #0d1118;
    --fighter-panel-2: #111722;
    --fighter-line: #28303c;
    --fighter-text: #eef2f5;
    --fighter-muted: #929dab;
    --fighter-alpha: #50e3c2;
    --fighter-beta: #ff5964;
    --fighter-amber: #f2c14e;
    --fighter-hurt: #51d88a;
    --fighter-font: "Silkscreen", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
    width: 100%;
    min-width: 320px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--fighter-bg);
    color: var(--fighter-text);
}

body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    font-family: var(--fighter-font);
    font-kerning: none;
    font-synthesis: none;
    font-variant-ligatures: none;
    letter-spacing: 0;
    text-rendering: optimizeSpeed;
}

body nav a,
body .dropbtn {
    font-family: var(--fighter-font);
    letter-spacing: 0;
}

body header *,
.fighter-app * { letter-spacing: 0; }

header {
    position: relative;
    z-index: 30;
    background: #080a0e;
}

.fighter-app {
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--fighter-bg);
}

.app-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-width: 0;
    padding: 0 18px;
    border-bottom: 1px solid var(--fighter-line);
    background: #0a0d12;
}

.app-title,
.connection-summary,
.connection-state,
.netcode-summary,
.view-tabs,
.room-actions,
.frame-controls,
.editor-actions,
.editor-palette,
.box-legend {
    display: flex;
    align-items: center;
}

.app-title { gap: 10px; }
.app-title h1 { margin: 0; font-size: 18px; line-height: 1; }
#build-label { color: var(--fighter-muted); font-size: 11px; }

.connection-summary {
    justify-self: center;
    gap: 12px;
    color: var(--fighter-muted);
    font-size: 11px;
    font-weight: 700;
}

.connection-state {
    min-width: 0;
    gap: 7px;
}

#room-label {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.netcode-summary {
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--fighter-line);
}

.netcode-summary > span {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.netcode-summary small {
    color: #667281;
    font-size: 8px;
}

.netcode-summary strong {
    min-width: 25px;
    color: var(--fighter-text);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#rollback-frames-label.active { color: var(--fighter-amber); }

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fighter-amber);
}

.status-dot.connected { background: var(--fighter-alpha); box-shadow: 0 0 10px rgba(80, 227, 194, 0.6); }

.view-tabs {
    justify-self: end;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--fighter-line);
    border-radius: 4px;
    background: #080b10;
}

.view-tabs button {
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--fighter-muted);
    font: 700 11px/1 var(--fighter-font);
}

.view-tabs button.active { background: var(--fighter-panel-2); color: var(--fighter-text); }

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    min-height: 0;
}

.fighter-app.editor-mode .workspace {
    grid-template-columns: minmax(340px, 1fr) minmax(560px, 680px);
}

.stage-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 83px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.stage-column.rhythm-active { grid-template-rows: minmax(0, 1fr) 83px 68px; }

.stage-viewport {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: auto;
    background: #05070a;
}

#game-canvas {
    display: block;
    width: 384px;
    height: 224px;
    flex: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #0b1018;
}

.input-rack {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-rows: auto 16px;
    align-items: center;
    gap: 5px 15px;
    min-width: 0;
    padding: 9px 18px;
    border-top: 1px solid var(--fighter-line);
    background: #0a0d12;
}

.joystick-keys { display: grid; justify-items: center; gap: 3px; }
.joystick-keys > div { display: flex; gap: 3px; }

kbd {
    display: inline-grid;
    min-width: 25px;
    height: 25px;
    place-items: center;
    padding: 0 6px;
    border: 1px solid #36404e;
    border-radius: 3px;
    background: #0b0f15;
    color: #778392;
    font: 700 10px/1 var(--fighter-font);
}

kbd.active { border-color: var(--fighter-alpha); background: #17312f; color: var(--fighter-text); }

.attack-key { display: grid; justify-items: center; gap: 3px; color: var(--fighter-muted); font-size: 9px; }
.attack-key kbd { min-width: 30px; }
.attack-grid { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px 5px; }
.macro-key { padding-left: 7px; border-left: 1px solid var(--fighter-line); }

.input-history {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.input-token {
    display: grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border-bottom: 2px solid var(--fighter-amber);
    color: var(--fighter-text);
    font-size: 12px;
    font-weight: 700;
}

.move-debug {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    border-top: 1px solid var(--fighter-line);
    color: var(--fighter-amber);
    font: 700 10px/16px var(--fighter-font);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.rhythm-panel {
    display: grid;
    grid-template-columns: 122px minmax(160px, 1fr) 72px 92px;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 8px 18px;
    border-top: 1px solid var(--fighter-line);
    background: #080b10;
}

.rhythm-track-label { display: grid; gap: 3px; }
.rhythm-track-label strong { color: var(--fighter-text); font-size: 10px; }
.rhythm-track-label span { color: var(--fighter-muted); font-size: 9px; }
.rhythm-rail { position: relative; height: 34px; overflow: hidden; }
.rhythm-line {
    position: absolute;
    top: 16px;
    right: 0;
    left: 0;
    height: 1px;
    background: #35404e;
}
.rhythm-marker,
.rhythm-core {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 13px;
    height: 13px;
    border: 2px solid var(--fighter-amber);
    background: #15130c;
    transform: translateX(-50%) rotate(45deg);
}
.rhythm-marker { transition: none; }
.rhythm-core { border-color: var(--fighter-alpha); background: #17312f; }
.rhythm-rail.on-beat .rhythm-core { box-shadow: 0 0 0 5px rgba(80, 227, 194, 0.12), 0 0 16px rgba(80, 227, 194, 0.65); }
.rhythm-judgment { color: var(--fighter-muted); font: 700 9px/1 var(--fighter-font); text-align: center; }
.rhythm-judgment.queued { color: var(--fighter-amber); }
.rhythm-judgment.good { color: var(--fighter-alpha); }
.rhythm-judgment.great { color: #a5ffe9; text-shadow: 0 0 5px rgba(80, 227, 194, 0.55); }
.rhythm-judgment.perfect { color: #eef2f5; text-shadow: 0 0 8px var(--fighter-alpha); }
.rhythm-judgment.early { color: var(--fighter-amber); }
.rhythm-judgment.miss { color: var(--fighter-beta); text-shadow: 0 0 8px var(--fighter-beta); }
.rhythm-panel button { min-height: 30px; padding: 0 8px; font-size: 9px; }

.control-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid var(--fighter-line);
    background: var(--fighter-panel);
}

.panel-view {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.panel-view.active { display: block; }
.panel-section { padding: 20px; border-bottom: 1px solid var(--fighter-line); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; font-size: 14px; }
.section-heading > span { color: var(--fighter-muted); font-size: 10px; font-weight: 700; }

.room-form { display: grid; gap: 12px; margin-top: 16px; }
.room-form label,
.editor-header label,
.duration-input { display: grid; gap: 5px; }
.room-form label span,
.editor-header label span,
.duration-input span { color: var(--fighter-muted); font-size: 10px; font-weight: 700; }
.rhythm-bpm-field > span { display: flex; justify-content: space-between; }
.rhythm-bpm-field output { color: var(--fighter-amber); font: inherit; }
.rhythm-bpm-field input { min-height: 22px; padding: 0; accent-color: var(--fighter-alpha); cursor: pointer; }

input,
select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--fighter-line);
    border-radius: 3px;
    outline: 0;
    background: #090c11;
    color: var(--fighter-text);
    padding: 0 10px;
    font: 700 12px/1 var(--fighter-font);
}

input:focus,
select:focus { border-color: var(--fighter-alpha); }

button {
    min-height: 34px;
    border: 1px solid var(--fighter-line);
    border-radius: 3px;
    background: #0c1118;
    color: var(--fighter-text);
    padding: 0 11px;
    font: 700 11px/1 var(--fighter-font);
    cursor: pointer;
}

button:hover { border-color: #536074; background: #121a24; }
button.primary { border-color: var(--fighter-alpha); color: var(--fighter-alpha); }
button.active { border-color: var(--fighter-amber); background: #2a2414; color: var(--fighter-amber); }

.room-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.roster-section { display: grid; gap: 12px; }
.player-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; }
.player-row strong { font-size: 12px; }
.player-row > span:last-child { color: var(--fighter-muted); font-size: 9px; }
.player-marker { width: 7px; height: 7px; }
.player-marker.alpha { background: var(--fighter-alpha); }
.player-marker.beta { background: var(--fighter-beta); }
.training-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #1d2430;
    color: var(--fighter-muted);
    font-size: 10px;
    font-weight: 700;
}
.training-option[hidden] { display: none; }
.training-option input { width: 14px; min-height: 14px; accent-color: var(--fighter-alpha); }

.box-toggle { display: flex; align-items: center; gap: 6px; color: var(--fighter-muted); font-size: 10px; }
.box-toggle input { width: 14px; min-height: 14px; accent-color: var(--fighter-alpha); }
.command-list { display: grid; margin-top: 13px; }
.command-list > div { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-top: 1px solid #1d2430; font-size: 11px; }
.command-list kbd { min-width: 55px; }
.notation { color: var(--fighter-amber); font-weight: 700; }

.editor-panel {
    display: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding-bottom: 0;
    overflow: hidden;
}
.editor-panel.active { display: grid; }
.stage-editor-panel {
    display: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}
.stage-editor-panel.active { display: grid; }
.stage-editor-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fighter-line);
}
.stage-editor-header label { display: grid; gap: 5px; }
.stage-editor-header label span,
.stage-palette-edit span { color: var(--fighter-muted); font-size: 10px; font-weight: 700; }
.stage-history { display: grid; grid-template-columns: repeat(2, 70px); gap: 5px; }
.stage-history button:disabled, .stage-tools button:disabled { opacity: 0.28; cursor: not-allowed; }
.stage-editor-body { min-height: 0; overflow-y: auto; padding: 14px 16px; }
.stage-editor-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: start; gap: 10px; }
#stage-editor-canvas {
    display: block;
    width: min(100%, 576px);
    height: auto;
    justify-self: center;
    border: 1px solid var(--fighter-line);
    image-rendering: pixelated;
    touch-action: none;
    cursor: crosshair;
}
.stage-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.stage-tools button { min-width: 0; padding: 0; font-size: 9px; }
.stage-palette { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 10px; }
.stage-palette-edit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage-palette-edit input { width: 52px; min-height: 30px; padding: 2px; cursor: pointer; }
.stage-guide-legend { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; color: var(--fighter-muted); font-size: 9px; }
.stage-guide-legend span::before { display: inline-block; width: 9px; height: 9px; margin-right: 5px; content: ""; }
.floor-guide::before { background: var(--fighter-amber); }
.alpha-guide::before { background: var(--fighter-alpha); }
.beta-guide::before { background: var(--fighter-beta); }
.stage-editor-actions { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 5px; padding: 10px 14px; border-top: 1px solid var(--fighter-line); }
.editor-header {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(82px, 110px) minmax(105px, 140px) minmax(105px, 140px) 34px 34px;
    align-items: end;
    gap: 7px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fighter-line);
}
.editor-header button { min-width: 34px; padding: 0; font-size: 16px; }
.editor-header button:disabled { opacity: 0.3; cursor: not-allowed; }
.author-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: 5px;
    border-bottom: 1px solid var(--fighter-line);
    background: #080b10;
}
.author-tabs button { min-height: 30px; border-color: transparent; background: transparent; color: var(--fighter-muted); }
.author-tabs button.active { border-color: var(--fighter-line); background: var(--fighter-panel-2); color: var(--fighter-text); }
.author-pane { min-height: 0; overflow: auto; }
.frame-controls { flex-wrap: wrap; gap: 5px; padding: 10px 16px; border-bottom: 1px solid var(--fighter-line); }
.frame-controls button { min-width: 31px; padding: 0 8px; }
#frame-label { min-width: 48px; text-align: center; color: var(--fighter-muted); font-size: 10px; }
.frame-setting, .duration-input { display: grid; grid-template-columns: auto minmax(48px, auto); align-items: center; gap: 5px; }
.frame-setting { margin-left: 8px; }
.frame-setting span, .duration-input span { color: var(--fighter-muted); font-size: 8px; text-transform: uppercase; }
.frame-setting select, .frame-setting input, .duration-input input { min-height: 32px; padding: 0 5px; }
.frame-setting select { min-width: 86px; }
.offset-input { margin-left: 0; }
.offset-input input { width: 48px; }
.duration-input { margin-left: auto; }

.editor-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 94px; gap: 10px; padding: 14px 16px 10px; }
#sprite-editor {
    display: block;
    width: min(100%, 224px);
    height: auto;
    justify-self: center;
    border: 1px solid var(--fighter-line);
    image-rendering: pixelated;
    touch-action: none;
    cursor: crosshair;
}
#sprite-editor[data-tool="move"], #sprite-editor[data-tool="select"] { cursor: grab; }
#sprite-editor[data-dragging="true"] { cursor: grabbing; }
.editor-tools { display: grid; align-content: start; gap: 9px; }
.tool-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.editor-tools button { min-width: 0; padding: 0 3px; font-size: 8px; }
.editor-tools button:disabled, .pixel-actions button:disabled { opacity: 0.28; cursor: not-allowed; }
.box-tool-group button:last-child { grid-column: span 2; }
.pixel-actions {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
    padding: 8px 16px 0;
}
.pixel-actions button { min-width: 0; min-height: 29px; padding: 0 4px; font-size: 8px; }
#pixel-selection-label {
    grid-column: span 8;
    min-height: 16px;
    color: var(--fighter-muted);
    font-size: 8px;
    text-align: right;
}
.editor-palette { gap: 7px; padding: 2px 16px 12px; }
.color-swatch { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; }
.color-swatch.active { outline: 2px solid var(--fighter-text); outline-offset: 2px; }
.palette-edit { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; color: var(--fighter-muted); font-size: 9px; font-weight: 700; }
.palette-edit input { width: 44px; min-height: 28px; padding: 2px; cursor: pointer; }
.box-legend { flex-wrap: wrap; gap: 7px 15px; padding: 0 16px 12px; color: var(--fighter-muted); font-size: 9px; }
.box-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; content: ""; }
.hurt-color::before { background: var(--fighter-hurt); }
.high-color::before { background: var(--fighter-beta); }
.low-color::before { background: #75a7ff; }
.grab-color::before { background: #f2c14e; }
.editor-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px 14px; border-top: 1px solid var(--fighter-line); background: var(--fighter-panel); }
.editor-actions #apply-character { grid-column: span 4; }
.preset-load { display: grid; grid-template-columns: 1fr auto; grid-column: span 4; gap: 5px; }
.preset-load select { min-height: 32px; }

.logic-author {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    min-height: 100%;
}
.asset-sidebar {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    border-right: 1px solid var(--fighter-line);
    background: #090c11;
}
.asset-list { display: grid; align-content: start; gap: 3px; padding: 8px; overflow: auto; }
.asset-list button {
    min-width: 0;
    min-height: 32px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.asset-list button.active { border-color: var(--fighter-alpha); background: #132421; color: var(--fighter-alpha); }
.asset-actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 3px; padding: 8px; border-top: 1px solid var(--fighter-line); }
.asset-actions button { min-width: 0; padding: 0 4px; font-size: 9px; }
.logic-inspector { min-width: 0; padding: 12px 14px 24px; overflow: auto; }
.logic-heading {
    margin: 0 0 8px;
    color: var(--fighter-muted);
    font-size: 10px;
    text-transform: uppercase;
}
.logic-inspector .logic-heading:not(:first-child) { margin-top: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.field { display: grid; min-width: 0; gap: 4px; }
.field.wide { grid-column: 1 / -1; }
.field > span { overflow: hidden; color: var(--fighter-muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.field input,
.field select { min-width: 0; min-height: 31px; padding: 0 7px; font-size: 10px; }
.field input[type="checkbox"] { width: 14px; min-height: 14px; padding: 0; }
.check-field { grid-template-columns: 1fr auto; align-items: center; }
.button-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button-field > span { width: 100%; }
.inline-check { display: flex; align-items: center; gap: 5px; color: var(--fighter-text); font-size: 10px; }
.inline-check input { width: 14px; min-height: 14px; accent-color: var(--fighter-alpha); }
.timeline-author { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fighter-line); }
.timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.timeline-heading .logic-heading { margin: 0; }
.timeline-heading select { width: auto; min-width: 105px; min-height: 30px; margin-left: auto; font-size: 9px; }
.timeline-heading button { min-height: 30px; padding: 0 8px; font-size: 9px; }
.event-track { display: flex; gap: 6px; margin-top: 9px; padding-bottom: 8px; overflow-x: auto; }
.event-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    flex: 0 0 132px;
    min-width: 132px;
    min-height: 58px;
    padding: 7px;
    text-align: left;
}
.event-card strong { justify-self: end; color: var(--fighter-amber); font-size: 10px; }
.event-card small { grid-column: 1 / -1; overflow: hidden; color: var(--fighter-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.event-type { font-size: 8px; }
.event-hitbox { color: var(--fighter-beta); }
.event-spawn { color: var(--fighter-amber); }
.event-velocity,
.event-teleport { color: #75a7ff; }
.event-resource { color: var(--fighter-alpha); }
.event-inspector { padding: 10px; border: 1px solid var(--fighter-line); background: #090c11; }
.event-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.event-toolbar strong { font-size: 10px; }
.event-toolbar button { min-height: 28px; color: var(--fighter-beta); font-size: 8px; }
.event-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attribute-author { padding: 14px; }
.attribute-section + .attribute-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fighter-line); }
.attribute-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 9px; padding: 10px; border: 1px solid var(--fighter-line); background: #090c11; }
.resource-card > button { align-self: end; min-height: 31px; color: var(--fighter-beta); font-size: 8px; }

.toast {
    position: fixed;
    z-index: 50;
    right: 18px;
    left: 18px;
    bottom: 18px;
    width: max-content;
    max-width: calc(100% - 36px);
    margin: 0 auto;
    border: 1px solid var(--fighter-line);
    border-radius: 3px;
    background: #111722;
    color: var(--fighter-text);
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 900px) {
    html,
    body { height: auto; min-height: 100%; overflow: auto; }
    .fighter-app { display: block; overflow: visible; }
    .app-bar { grid-template-columns: 1fr auto; min-height: 58px; }
    .connection-summary { display: none; }
    .workspace { display: block; }
    .fighter-app.editor-mode .workspace { display: block; }
    .stage-column { height: 520px; }
    .stage-column.rhythm-active { height: 588px; }
    .control-panel { min-height: 620px; border-top: 1px solid var(--fighter-line); border-left: 0; }
    .fighter-app.editor-mode .control-panel { height: 860px; }
}

@media (max-width: 520px) {
    .app-title h1 { font-size: 14px; }
    .app-bar { padding: 0 9px; }
    .view-tabs button { padding: 0 7px; }
    .stage-column { height: 410px; }
    .input-rack { gap: 5px 8px; padding: 8px; }
    .input-history { display: none; }
    .rhythm-panel { grid-template-columns: 1fr 72px; gap: 6px 10px; padding: 7px 9px; }
    .rhythm-track-label { display: none; }
    .rhythm-rail { grid-column: 1; grid-row: 1; }
    .rhythm-judgment { grid-column: 1; grid-row: 2; }
    .rhythm-panel button { grid-column: 2; grid-row: 1 / 3; }
    .control-panel { min-height: 650px; }
    .editor-header { grid-template-columns: 1fr 1fr 34px 34px; }
    .editor-header > label:nth-child(3) { grid-column: 1; grid-row: 2; }
    .editor-header > label:nth-child(4) { grid-column: 2; grid-row: 2; }
    .pixel-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #pixel-selection-label { grid-column: span 4; }
    .logic-author { grid-template-columns: 105px minmax(0, 1fr); }
    .event-fields,
    .attribute-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}