/* "/public/alpha/Dungeon/Editor/css/editor.css" */

html,
body {
	box-sizing: border-box;
	margin: 0;
	min-height: 100%;
	background: #060606;
	color: #e6e6e6;
	font-family: Consolas, "Courier New", monospace;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Wider editor scrollbars for map panes, palettes, sprite lists, and form panels. */
* {
	scrollbar-width: auto;
	scrollbar-color: #777 #111;
}

*::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

*::-webkit-scrollbar-track {
	background: #111;
	border: 1px solid #222;
}

*::-webkit-scrollbar-thumb {
	min-height: 34px;
	border: 3px solid #111;
	background: #777;
}

*::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}

*::-webkit-scrollbar-corner {
	background: #111;
}

button,
input,
select,
textarea,
a.button,
.editor-topbar a {
	border: 1px solid #555;
	border-radius: 0;
	background: #000;
	color: #eee;
	font: inherit;
}

button,
a.button,
.editor-topbar a {
	cursor: pointer;
	padding: 4px 8px;
	text-decoration: none;
}

button:hover,
a.button:hover,
.editor-topbar a:hover,
input:focus,
select:focus,
textarea:focus {
	border-color: #aaa;
	outline: none;
}

input,
select,
textarea {
	width: 100%;
	min-width: 0;
	padding: 3px 5px;
}

textarea {
	min-height: 54px;
	resize: vertical;
}

code {
	color: #fff;
}

.editor-topbar {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #222;
	background: #0c0c0c;
}

.editor-topbar h1,
.editor-topbar p {
	margin: 0;
}

.editor-topbar h1 {
	font-size: 20px;
}

.editor-topbar p {
	margin-top: 2px;
	color: #aaa;
	font-size: 12px;
}

.editor-topbar nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.locked-panel {
	max-width: 760px;
	margin: 24px auto;
	padding: 16px;
	border: 1px solid #633;
	background: #160808;
	color: #f5cccc;
}

.editor-shell {
	display: grid;
	grid-template-columns: minmax(240px, 320px) minmax(460px, 1fr) minmax(320px, 420px);
	grid-template-areas:
		"controls controls controls"
		"source map tile"
		"legend map tile"
		"actor map tile";
	gap: 8px;
	padding: 8px;
}

.panel {
	min-width: 0;
	border: 1px solid #242424;
	background: #0d0d0d;
	padding: 8px;
	animation: panel-pop-in 120ms ease-out;
}

.panel.panel-hidden {
	display: none;
}

@keyframes panel-pop-in {
	from {
		opacity: 0;
		transform: scale(0.985);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.panel h2 {
	margin: 0 0 8px;
	font-size: 16px;
}

.panel h3 {
	margin: 0;
	font-size: 14px;
}

.panel-title-row,
.row-buttons,
.paint-controls {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: space-between;
}

.panel-controls {
	grid-area: controls;
}

.panel-toggle-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.panel-toggle-btn[aria-pressed="true"] {
	border-color: #ffff55;
	background: #24210a;
	color: #ffffcc;
}

.panel-toggle-btn[aria-pressed="false"] {
	border-style: dashed;
	color: #aaa;
}

.panel-popout-btn {
	margin-left: auto;
	white-space: nowrap;
}

.visually-hidden-file {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.tile-image-actions {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tile-png-drop-zone {
	display: grid;
	gap: 3px;
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px dashed #666;
	border-radius: 8px;
	background: #111;
	color: #ddd;
	cursor: copy;
}

.tile-png-drop-zone strong {
	color: #ffffaa;
}

.tile-png-drop-zone span {
	color: #aaa;
	font-size: 12px;
}

.tile-png-drop-zone.drag-over {
	border-color: #ffff55;
	background: #24210a;
	box-shadow: 0 0 0 2px rgba(255, 255, 85, 0.18) inset;
}

.row-buttons {
	justify-content: flex-start;
}

.panel-title-row {
	margin-bottom: 8px;
}

.panel-title-row.compact {
	margin-top: 8px;
	margin-bottom: 5px;
}

.source-panel {
	grid-area: source;
}

.map-panel {
	grid-area: map;
}

.legend-panel {
	grid-area: legend;
}

.actor-panel {
	grid-area: actor;
}

.tile-transform-tools {
	display: grid;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.color-reassign-tools label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.color-reassign-tools input {
	width: 5.5rem;
}

.tile-panel {
	grid-area: tile;
}

.source-panel label,
.fields label,
.paint-controls label,
.bulk-convert label {
	display: grid;
	gap: 3px;
	color: #aaa;
	font-size: 12px;
}

.source-panel label + label,
.source-panel .row-buttons,
.status {
	margin-top: 8px;
}

.save-slot-row input {
	flex: 1 1 12rem;
}

.publish-row {
	align-items: center;
	flex-wrap: wrap;
}

.publish-row button {
	border-color: #ffff55;
	background: #24210a;
	color: #ffffcc;
}

.publish-row .mini-status {
	flex: 1 1 14rem;
}

.fields {
	display: grid;
	gap: 6px;
	margin-bottom: 8px;
}

.fields.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fields .wide {
	grid-column: 1 / -1;
}

.status,
.mini-status {
	min-height: 18px;
	color: #aaa;
	font-size: 12px;
	white-space: pre-wrap;
}

.status.good,
.mini-status.good {
	color: #bdf5bd;
}

.status.bad,
.mini-status.bad {
	color: #ffb3b3;
}

.canvas-wrap {
	position: relative;
	width: 100%;
	overflow: auto;
	border: 1px solid #333;
	background:
		linear-gradient(45deg, #101010 25%, transparent 25%),
		linear-gradient(-45deg, #101010 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #101010 75%),
		linear-gradient(-45deg, transparent 75%, #101010 75%);
	background-color: #080808;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	background-size: 16px 16px;
}

.map-wrap {
	height: calc(100vh - 300px);
	min-height: 300px;
}

.bulk-convert {
	margin: 8px 0;
	padding: 6px;
	border: 1px solid #242424;
	background: #090909;
}

.bulk-convert-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	align-items: end;
}

.bulk-convert-grid button {
	min-height: 40px;
}

.map-tooltip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	padding: 3px 6px;
	border: 1px solid #666;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
	opacity: 0;
	transform: translateZ(0);
	transition: opacity 80ms linear;
}

.map-tooltip.visible {
	opacity: 1;
}

.tile-wrap {
	height: 420px;
}

canvas {
	display: block;
	image-rendering: pixelated;
}

#map-canvas,
#tile-canvas {
	cursor: crosshair;
}

.legend-list {
	display: grid;
	gap: 5px;
	max-height: 330px;
	overflow: auto;
}

.legend-row {
	display: grid;
	grid-template-columns: 48px repeat(4, minmax(74px, 1fr)) 64px minmax(78px, 100px) minmax(90px, 120px) 64px minmax(100px, 1fr) 32px;
	gap: 4px;
	align-items: center;
	padding: 4px;
	border: 1px solid #242424;
	background: #070707;
}

.legend-row.selected {
	border-color: #aaa;
}

.legend-frame-field.target,
.spawn-frame-field.target,
.actor-frame-field.target {
	border-color: #ffff55;
	background: #24210a;
}

.legend-frame-field.target .legend-frame-preview,
.spawn-frame-field.target .spawn-frame-preview,
.actor-frame-field.target .actor-frame-preview {
	border-color: #ffff55;
}

.actor-flags {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0.65rem 0.75rem 0.75rem;
}

.actor-flags legend {
	color: var(--muted);
	font-size: 0.82rem;
	padding: 0 0.35rem;
}

.actor-flags label {
	align-items: center;
	display: inline-flex;
	gap: 0.35rem;
	margin: 0;
}


.sprite-assignment {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #242424;
}

.legend-sprite-list,
.spawn-sprite-list,
.actor-sprite-list,
.sprite-picker-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 5px;
	max-height: 260px;
	overflow: auto;
	margin-top: 6px;
}

.sprite-choice {
	display: grid;
	grid-template-rows: 34px auto;
	gap: 3px;
	align-items: center;
	justify-items: center;
	min-height: 58px;
	padding: 4px;
	overflow: hidden;
}

.sprite-choice.selected {
	border-color: #ffff55;
	background: #24210a;
}

.sprite-choice.empty-frame-choice {
	border-style: dashed;
}

.sprite-choice.empty-frame-choice span {
	color: #ffffaa;
}

.sprite-choice span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
}

.sprite-choice-preview {
	width: 32px;
	height: 32px;
	border: 1px solid #333;
}

.sprite-picker-modal.hidden {
	display: none;
}

.sprite-picker-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	align-items: center;
	justify-items: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.72);
}

.sprite-picker-card {
	display: grid;
	gap: 8px;
	width: min(820px, 96vw);
	max-height: 88vh;
	padding: 10px;
	border: 1px solid #777;
	background: #080808;
	box-shadow: 0 0 0 2px #111, 0 18px 64px #000;
}

.sprite-picker-card .panel-title-row {
	margin: 0;
}

.sprite-picker-card h2 {
	margin: 0;
	font-size: 16px;
}

.sprite-picker-list {
	max-height: min(560px, 62vh);
}

.legend-row label {
	display: grid;
	gap: 2px;
	font-size: 10px;
	color: #999;
}

.legend-frame-field,
.spawn-frame-field,
.actor-frame-field {
	align-items: center;
	padding: 2px;
	border: 1px solid transparent;
}

.legend-frame-preview,
.spawn-frame-preview,
.actor-frame-preview {
	width: 32px;
	height: 32px;
	border: 1px solid #555;
	background: #080808;
	image-rendering: pixelated;
}

.legend-row input[type="checkbox"] {
	width: auto;
}

.spawn-frame-field {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 2px 6px;
	align-items: center;
}

.spawn-frame-field input {
	grid-column: 1 / -1;
}

.spawn-sprite-assignment {
	margin-bottom: 10px;
}

#actor-select,
.actor-palette {
	width: 100%;
	margin-bottom: 8px;
}

.actor-palette {
	display: grid;
	gap: 6px;
	max-height: 360px;
	overflow: auto;
	padding: 4px;
	border: 1px solid #242424;
	background: #070707;
}

.actor-palette-group {
	border: 1px solid #242424;
	background: #090909;
}

.actor-palette-group.selected {
	border-color: #ffff55;
}

.actor-palette-header {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	grid-template-areas:
		"preview name"
		"preview meta";
	gap: 2px 6px;
	align-items: center;
	width: 100%;
	padding: 4px;
	text-align: left;
}

.actor-palette-preview {
	grid-area: preview;
	width: 32px;
	height: 32px;
	border: 1px solid #555;
	background: #080808;
	image-rendering: pixelated;
}

.actor-palette-name {
	grid-area: name;
	overflow: hidden;
	color: #fff;
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.actor-palette-meta {
	grid-area: meta;
	overflow: hidden;
	color: #aaa;
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.actor-palette-instances {
	display: grid;
	gap: 2px;
	padding: 4px;
	border-top: 1px solid #1d1d1d;
}

.actor-palette-instance {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	width: 100%;
	padding: 3px 5px;
	text-align: left;
}

.actor-palette-instance.selected {
	border-color: #ffff55;
	background: #24210a;
}

.actor-instance-rowcol {
	color: #ddd;
	font-size: 11px;
	white-space: nowrap;
}

.actor-instance-message {
	overflow: hidden;
	color: #aaa;
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.actor-drop-help {
	margin: -2px 0 10px;
}

.actor-frame-fields .actor-frame-field {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 2px 6px;
	align-items: center;
}

.actor-frame-fields .actor-frame-field input {
	grid-column: 1 / -1;
}

.actor-sprite-assignment {
	margin-bottom: 10px;
}

.actor-title-row {
	margin-top: 14px;
}

.color-palette {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
	margin: 8px 0;
}

.color-cell {
	min-height: 24px;
	border: 1px solid #333;
	color: #fff;
	font-size: 10px;
	text-shadow: 0 1px 2px #000;
}

.color-cell.selected {
	border-color: #fff;
	outline: 1px solid #fff;
}
.color-cell.transparent-pulse {
	animation: transparent-pulse 720ms ease-in-out infinite alternate;
}

@keyframes transparent-pulse {
	from {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 85, 0.25);
	}

	to {
		box-shadow: inset 0 0 0 3px rgba(255, 255, 85, 0.95);
	}
}


@media (max-width: 1180px) {
	.editor-shell {
		grid-template-columns: minmax(250px, 340px) minmax(420px, 1fr);
		grid-template-areas:
			"controls controls"
			"source map"
			"legend map"
			"actor tile";
	}
}

@media (max-width: 820px) {
	.editor-topbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.editor-shell {
		grid-template-columns: 1fr;
		grid-template-areas:
			"controls"
			"source"
			"map"
			"legend"
			"actor"
			"tile";
	}

	.bulk-convert-grid {
		grid-template-columns: 1fr;
	}

	.map-wrap {
		height: 420px;
	}
}

.actor-group-create {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	margin-bottom: 6px;
}

.actor-palette-group.draft {
	border-style: dashed;
}

.actor-empty-instances {
	margin: 4px 6px 6px;
}

.actor-message-actions {
	display: flex;
	grid-column: 1 / -1;
	gap: 8px;
	align-items: end;
}

.actor-message-actions button {
	flex: 1;
}

#actor-message-status.good {
	color: #96ff96;
}

#actor-message-status.bad {
	color: #ff9a9a;
}

.tile-save-fields {
	margin-bottom: 8px;
}

.tile-gallery-panel,
.tile-clear-tools,
.tile-transform-tools,
.tile-overwrite-panel {
	margin: 8px 0;
	padding: 6px;
	border: 1px solid #242424;
	background: #090909;
}

.tile-gallery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 7px;
	max-height: 320px;
	overflow: auto;
	margin-top: 6px;
}

.tile-gallery-choice {
	display: grid;
	grid-template-rows: 66px auto;
	gap: 4px;
	align-items: center;
	justify-items: center;
	min-height: 92px;
	padding: 5px;
	overflow: hidden;
}

.tile-gallery-choice.loading .tile-gallery-preview {
	opacity: 0.62;
}

.tile-gallery-choice.selected {
	border-color: #ffff55;
	background: #24210a;
}

.tile-gallery-choice span,
.tile-gallery-name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
	line-height: 1.15;
}

.tile-gallery-preview,
#tile-overwrite-current,
#tile-overwrite-existing {
	border: 1px solid #555;
	background: #080808;
	image-rendering: pixelated;
}

.tile-gallery-preview {
	width: 64px;
	height: 64px;
}



.ability-picker-modal.hidden {
	display: none;
}

.ability-picker-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.72);
}

.ability-picker-card {
	display: grid;
	gap: 8px;
	width: min(720px, calc(100vw - 36px));
	max-height: calc(100vh - 36px);
	padding: 12px;
	border: 1px solid #555;
	background: #111;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
	overflow: hidden;
}

.ability-picker-card .panel-title-row {
	margin: 0;
}

.ability-picker-card h2 {
	margin: 0;
}

.ability-picker-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
	max-height: min(560px, calc(100vh - 190px));
	overflow: auto;
	padding-right: 2px;
}

.ability-picker-choice {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 2px 6px;
	align-items: center;
	justify-items: start;
	padding: 6px;
	border: 1px solid #242424;
	background: #080808;
	text-align: left;
}

.ability-picker-choice.selected {
	border-color: #ffff55;
	background: #24210a;
}

.ability-picker-preview {
	grid-row: 1 / span 2;
	border: 1px solid #555;
	background: #080808;
	image-rendering: pixelated;
}

.ability-picker-choice strong,
.ability-picker-choice span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ability-picker-choice span {
	color: #aaa;
	font-size: 10px;
}

.tile-overwrite-panel.hidden {
	display: none;
}

.tile-overwrite-previews {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.tile-overwrite-previews figure {
	display: grid;
	gap: 4px;
	justify-items: center;
	margin: 0;
	padding: 6px;
	border: 1px solid #242424;
	background: #050505;
}

.tile-overwrite-previews figcaption {
	color: #aaa;
	font-size: 11px;
}

.actor-flags,
.actor-inventory {
	align-items: start;
}

.actor-flags label {
	min-width: 88px;
}

.actor-slot-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	max-height: 260px;
	overflow: auto;
	padding-right: 2px;
}

.actor-slot-row {
	display: grid;
	grid-template-columns: 32px minmax(120px, 1fr) 88px;
	gap: 6px;
	align-items: center;
}

.actor-slot-index {
	color: #aaa;
	font: 11px/1.2 Consolas, Monaco, monospace;
	text-align: right;
}

.actor-slot-name,
.actor-slot-amount,
.actor-slot-pick {
	min-width: 0;
}

#actor-props {
	min-height: 54px;
	font-family: Consolas, Monaco, monospace;
}

.ability-gallery-panel {
	align-items: start;
}

.ability-gallery-actions {
	grid-template-columns: minmax(160px, 1fr) auto auto auto;
}

.ability-gallery-actions input {
	min-width: 160px;
}

#ability-editor-status.good {
	color: #96ff96;
}

#ability-editor-status.bad {
	color: #ff9a9a;
}

.ability-gallery-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	max-height: 520px;
	overflow: auto;
	padding-right: 2px;
}

.ability-gallery-card {
	display: grid;
	gap: 6px;
	padding: 6px;
	border: 1px solid #242424;
	background: #080808;
}

.ability-gallery-card.selected {
	border-color: #ffff55;
	background: #181604;
}

.ability-gallery-card-header {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 6px;
	align-items: center;
}

.ability-gallery-preview,
.ability-frame-preview,
.actor-slot-preview {
	border: 1px solid #555;
	background: #080808;
	image-rendering: pixelated;
}

.ability-gallery-select {
	display: grid;
	gap: 2px;
	justify-items: start;
	min-width: 0;
	text-align: left;
}

.ability-gallery-select strong,
.ability-gallery-select span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ability-gallery-select span {
	color: #aaa;
	font-size: 10px;
}


.ability-edit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.ability-edit-grid label {
	display: grid;
	gap: 2px;
	font-size: 11px;
}

.ability-edit-grid .wide {
	grid-column: 1 / -1;
}

.ability-edit-grid textarea {
	min-height: 42px;
}

.ability-frame-field {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 4px;
	align-items: center;
}

.actor-slot-row {
	grid-template-columns: 32px 32px minmax(100px, 1fr) 76px 52px;
	padding: 2px;
	border: 1px solid transparent;
}

.actor-slot-row.target {
	border-color: #ffff55;
	background: #24210a;
}

.actor-slot-preview {
	width: 32px;
	height: 32px;
}

@media (max-width: 760px) {
	.ability-gallery-actions,
	.ability-gallery-card-header,
	.ability-edit-grid {
		grid-template-columns: 1fr;
	}

	.ability-gallery-assign {
		white-space: normal;
	}
}