/* Aseprite tarzı tema: sert 1px kenarlar, kabartma butonlar, piksel font, bej sekmeler. */
:root {
  --outline: #0b0a0e;
  --ws: #1b1a21;
  --face-dark: #24222c;
  --face: #2f2c39;
  --face-light: #3d3a4a;
  --face-hilite: #57526a;
  --text: #ece5d3;
  --text-dim: #9b95ab;
  --beige: #d8c9a3;
  --ink: #1b1a21;
  --accent: #f2c14e;
  --ok: #99e550;
  --checker: repeating-conic-gradient(#cfcac0 0 25%, #b3ada0 0 50%) 0 0 / 8px 8px;
  --font: 'Pixelify Sans', ui-monospace, Consolas, monospace;
  --mono: ui-monospace, Consolas, 'Courier New', monospace;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--ws);
  color: var(--text);
  font: 14px/1.3 var(--font);
  overflow: hidden;
  user-select: none;
}

button { font: inherit; color: inherit; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--face-dark);
  border: 1px solid var(--outline);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .45);
  padding: 2px 5px;
  outline: none;
  min-width: 0;
  user-select: text;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input:disabled, textarea:disabled { opacity: .5; }
input[type=number] { width: 100%; }
input[type=color] { width: 100%; height: 24px; padding: 1px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 80px; top: 120px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--face-dark); }
::-webkit-scrollbar-thumb { background: var(--face-light); border: 1px solid var(--outline); }
::-webkit-scrollbar-corner { background: var(--face-dark); }

#app {
  display: grid;
  grid-template-rows: 30px 26px 1fr 22px;
  height: 100vh;
  min-width: 960px;
}

/* ---------- Ortak parçalar ---------- */
.spacer { flex: 1; }
.sep { width: 1px; align-self: stretch; background: var(--outline); margin: 3px 4px; }
.dim { color: var(--text-dim); }
.num { min-width: 22px; text-align: center; }
.note { color: var(--text-dim); font-size: 13px; margin: 6px 2px; }

.btn {
  background: var(--face-light);
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 var(--face-hilite), inset -1px -1px 0 var(--face-dark);
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--face-hilite); }
.btn:active, .btn.on {
  background: var(--face-dark);
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--face-light);
}
.btn.on { color: var(--accent); }
.btn.small { padding: 0 7px; line-height: 20px; }
.btn.wide { width: 100%; }
.btn-accent {
  background: var(--accent);
  color: var(--ink);
  box-shadow: inset 1px 1px 0 #ffe7a6, inset -1px -1px 0 #b08425;
}
.btn-accent:hover { background: #ffd36a; }
.btn-play { color: var(--ok); }

.seg { display: flex; }
.seg-btn {
  background: var(--face);
  border: 1px solid var(--outline);
  padding: 0 8px;
  line-height: 20px;
  cursor: pointer;
  color: var(--text-dim);
}
.seg-btn + .seg-btn { border-left: 0; }
.seg-btn.active { background: var(--beige); color: var(--ink); }

.panel {
  background: var(--face);
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 var(--face-light);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 4px 2px 7px;
  background: var(--face-dark);
  border-bottom: 1px solid var(--outline);
  color: var(--text-dim);
  font-size: 13px;
}
.panel-head .title {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.panel-head .btn, .panel-head .seg-btn { color: var(--text); }
.panel-head .seg-btn { color: var(--text-dim); }
.panel-head .seg-btn.active { color: var(--ink); }
.panel-body { flex: 1; overflow: auto; padding: 5px; min-height: 0; }

.canvas-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ws); }
.canvas-wrap canvas { position: absolute; inset: 0; display: block; touch-action: none; }

.zoom-label { color: var(--text-dim); min-width: 48px; text-align: right; }

.field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.field > span:first-child { color: var(--text-dim); font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.check { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; cursor: pointer; }
.row-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.group { margin-bottom: 6px; }
.group-title {
  color: var(--beige);
  font-size: 13px;
  border-bottom: 1px solid var(--face-light);
  padding-bottom: 2px;
  margin: 2px 0 6px;
}
label.inline { display: flex; align-items: center; gap: 5px; color: var(--text-dim); }
label.inline input { width: 56px; }

/* ---------- Menü çubuğu ---------- */
.menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: var(--face-dark);
  border-bottom: 1px solid var(--outline);
}
.logo {
  width: 11px;
  height: 11px;
  margin: 0 10px 0 6px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: inset -3px -3px 0 #b08425, 0 0 0 1px var(--outline);
}
.menu { position: relative; }
.menu-title { background: none; border: 0; padding: 4px 9px; cursor: pointer; }
.menu-title:hover, .menu.open .menu-title { background: var(--beige); color: var(--ink); }
.menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 220px;
  padding: 2px;
  background: var(--face);
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 var(--face-hilite), 3px 3px 0 rgba(0, 0, 0, .45);
}
.menu.open .menu-list { display: block; }
.menu-list button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 4px 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.menu-list button:hover { background: var(--beige); color: var(--ink); }
.menu-list hr { border: 0; border-top: 1px solid var(--outline); margin: 2px 0; }
kbd { font: inherit; color: var(--text-dim); }
.menu-list button:hover kbd { color: #5b5240; }

.project-name {
  width: 240px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.project-name:hover { border-color: var(--face-light); }
.project-name:focus { background: var(--face-dark); border-color: var(--accent); }
.menubar .btn { margin-left: 4px; }

/* ---------- Sekmeler ---------- */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 6px;
  background: var(--face-dark);
  border-bottom: 2px solid var(--beige);
}
.tab {
  background: var(--face);
  border: 1px solid var(--outline);
  border-bottom: 0;
  padding: 2px 16px;
  cursor: pointer;
  color: var(--text-dim);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--beige); color: var(--ink); }

/* ---------- Çalışma alanları ---------- */
.workspace { display: grid; gap: 2px; padding: 2px; min-height: 0; }

#ws-scene {
  grid-template-columns: 210px 1fr 250px;
  grid-template-rows: 1fr 4px var(--bottom-h, 300px);
  grid-template-areas: "objects stage props" "split split split" "bottom bottom bottom";
  row-gap: 0;
}
.area-objects { grid-area: objects; }
.area-stage { grid-area: stage; }
.area-props { grid-area: props; }
.area-split { grid-area: split; }
.area-bottom { grid-area: bottom; display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 2px; min-height: 0; }

.hsplit { cursor: row-resize; background: var(--ws); }
.hsplit:hover, .hsplit.dragging { background: var(--accent); }

.canvas-wrap #sceneGL { pointer-events: none; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--face-dark);
  border-bottom: 1px solid var(--outline);
}

/* Obje listesi */
.list .row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  cursor: pointer;
}
.list .row:hover { background: var(--face-light); }
.list .row.selected { background: var(--beige); color: var(--ink); }
.row .eye { width: 16px; padding: 0; background: none; border: 0; cursor: pointer; }
.row .eye.off { opacity: .35; }
.row .icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border: 1px solid var(--outline);
  image-rendering: pixelated;
  object-fit: contain;
}
.row canvas.icon { background: var(--checker); }
.row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.logic-dot { font-size: 11px; color: var(--accent); }
.selected .logic-dot { color: #8a5f00; }
.selected .tag { color: #6b604a; }
.empty { color: var(--text-dim); padding: 10px; text-align: center; }

/* Varlıklar */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 4px;
  align-content: start;
}
.asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 3px;
  background: var(--face-dark);
  border: 1px solid var(--outline);
  cursor: grab;
}
.asset:hover { border-color: var(--face-hilite); }
.asset.selected { border-color: var(--accent); }
.asset canvas { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; background: var(--checker); }
.asset .name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asset { position: relative; }
.asset .del {
  position: absolute;
  top: 1px;
  right: 1px;
  display: none;
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 14px;
  font-size: 11px;
  background: var(--face-light);
  border: 1px solid var(--outline);
  cursor: pointer;
}
.asset:hover .del { display: block; }
.asset .del:hover { background: #ac3232; }
.asset .sound-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--ink);
  background: #cf63cf;
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
}
.asset .sound-icon:hover { background: #e07ce0; }
.asset.sound { cursor: default; }
.asset .tag { font-size: 11px; line-height: 1; }

#assetsPanel { position: relative; }
#assetsPanel .panel-head .title { flex: 1; }
.drop-hint {
  display: none;
  position: absolute;
  inset: 26px 2px 2px;
  place-items: center;
  border: 2px dashed var(--accent);
  background: rgba(27, 26, 33, .85);
  color: var(--accent);
  pointer-events: none;
}
#assetsPanel.dropping .drop-hint { display: grid; }

/* Mantık */
.logic-body { position: relative; flex: 1; min-height: 0; }
.logic-view { position: absolute; inset: 0; }
.blockly-host { position: absolute; inset: 0; }
.logic-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  background: rgba(27, 26, 33, .9);
}
.logic-overlay .btn { margin-top: 8px; }
.logic-code { display: flex; flex-direction: column; }
.code-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--face-dark);
  border-bottom: 1px solid var(--outline);
}
.code-banner:empty { display: none; }
.code-banner .spacer { flex: 1; }
.logic-code textarea {
  flex: 1;
  resize: none;
  border: 0;
  box-shadow: none;
  padding: 8px 10px;
  font: 13px/1.5 var(--mono);
  background: var(--ws);
  tab-size: 2;
  white-space: pre;
}
.logic-code textarea[readonly] { color: #b9b2c8; }
.code-status { padding: 3px 8px; font: 12px/1.4 var(--mono); border-top: 1px solid var(--outline); background: var(--face-dark); color: var(--ok); }
.code-status.error { color: #ff7b7b; }
.code-status:empty { display: none; }
.logic-help {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 280px;
  overflow: auto;
  padding: 8px 10px;
  background: var(--face);
  border-left: 1px solid var(--outline);
  box-shadow: -3px 0 0 rgba(0, 0, 0, .3);
}
.logic-help pre { margin: 0 0 8px; font: 12px/1.45 var(--mono); color: var(--text); white-space: pre-wrap; user-select: text; }

/* Blockly'yi temaya uydur */
.blocklyToolboxDiv { border-right: 1px solid var(--outline); }
.blocklyTreeLabel, .blocklyToolboxCategoryLabel { font-family: var(--font) !important; font-size: 13px !important; }
.blocklyTreeRow, .blocklyToolboxCategory { margin-bottom: 1px; }
.blocklyWidgetDiv .blocklyMenu, .blocklyDropDownDiv { font-family: var(--font); }

/* ---------- Çizim çalışma alanı ---------- */
#ws-paint {
  grid-template-columns: 76px 42px 1fr 230px;
  grid-template-rows: 30px 1fr 124px;
  grid-template-areas:
    "ctx ctx ctx ctx"
    "colors tools canvas side"
    "timeline timeline timeline timeline";
}
.area-ctx { grid-area: ctx; }
.area-colors { grid-area: colors; }
.area-tools { grid-area: tools; }
.area-canvas { grid-area: canvas; }
.area-side { grid-area: side; }
.area-timeline { grid-area: timeline; }

.contextbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: var(--face);
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 var(--face-light);
  overflow: hidden;
}
.tool-name { color: var(--accent); min-width: 92px; }

.area-colors { padding: 4px; gap: 6px; overflow-y: auto; }
.swatches { position: relative; height: 54px; flex: none; }
.swatch {
  position: absolute;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--outline);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  cursor: pointer;
}
.swatch.primary { left: 2px; top: 2px; z-index: 1; }
.swatch.secondary { left: 20px; top: 18px; }
.swatch.transparent { background: var(--checker) !important; }
.swap { position: absolute; right: 0; top: -2px; padding: 0; background: none; border: 0; color: var(--text-dim); cursor: pointer; }
.swap:hover { color: var(--text); }
.palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--outline);
  border: 1px solid var(--outline);
}
.palette button { position: relative; height: 15px; padding: 0; border: 0; cursor: pointer; }
.palette button:hover { outline: 1px solid #fff; z-index: 1; }
.palette button.is-primary::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid #fff;
  outline: 1px solid #000;
}
.palette button.is-secondary::before {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 5px;
  height: 5px;
  background: #fff;
  border: 1px solid #000;
}

.area-tools { align-items: center; gap: 2px; padding: 4px 0; }
.tool-btn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.tool-btn img { width: 24px; height: 24px; image-rendering: pixelated; pointer-events: none; }
.tool-btn.on { background: var(--beige); box-shadow: inset 1px 1px 0 #8d7f5c; }
.tool-btn.on img { filter: brightness(.12); }

.sprite-list { display: flex; flex-direction: column; gap: 1px; }
.sprite-item { display: flex; align-items: center; gap: 6px; padding: 2px 4px; cursor: pointer; }
.sprite-item:hover { background: var(--face-light); }
.sprite-item.selected { background: var(--beige); color: var(--ink); }
.sprite-item canvas {
  width: 24px;
  height: 24px;
  flex: none;
  image-rendering: pixelated;
  object-fit: contain;
  background: var(--checker);
  border: 1px solid var(--outline);
}
.sprite-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-actions { display: flex; gap: 4px; padding: 4px; border-top: 1px solid var(--outline); background: var(--face-dark); }
.side-actions select { flex: 1; }
.side-props { padding: 6px; }
.preview-box {
  display: grid;
  place-items: center;
  padding: 6px;
  margin-bottom: 8px;
  background: var(--checker);
  border: 1px solid var(--outline);
}
.preview-box canvas { width: 128px; height: 128px; image-rendering: pixelated; }

.frames { display: flex; gap: 4px; padding: 6px; overflow-x: auto; flex: 1; align-items: flex-start; }
.frame {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--face-dark);
  border: 1px solid var(--outline);
  cursor: pointer;
}
.frame:hover { border-color: var(--face-hilite); }
.frame canvas { width: 52px; height: 52px; image-rendering: pixelated; object-fit: contain; background: var(--checker); }
.frame span { font-size: 12px; }
.frame.active { background: var(--beige); color: var(--ink); }

/* ---------- Durum çubuğu ---------- */
.statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  background: var(--face-dark);
  border-top: 1px solid var(--outline);
  color: var(--text-dim);
  font-size: 13px;
}

/* ---------- Pencereler ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .6);
}
.modal {
  width: min(440px, calc(100vw - 32px));
  background: var(--face);
  border: 1px solid var(--outline);
  box-shadow: inset 1px 1px 0 var(--face-light), 5px 5px 0 rgba(0, 0, 0, .5);
}
.modal-body { padding: 10px; }
.modal-body textarea { resize: vertical; }
.modal-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--outline); }
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 10px; image-rendering: pixelated; border: 1px solid var(--outline); background: #000; }

.play-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #0a090e;
}
.play-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 10px;
  background: var(--face-dark);
  border-bottom: 1px solid var(--outline);
}
.play-title { color: var(--ok); }
.play-bar .hint { flex: 1; color: var(--text-dim); }
.play-stage { position: relative; flex: 1; min-height: 0; }
.play-stage canvas { position: absolute; inset: 0; display: block; }
.play-console-wrap { height: 120px; display: flex; flex-direction: column; background: var(--face); border-top: 1px solid var(--outline); }
.play-console { flex: 1; overflow: auto; padding: 4px 8px; font: 12px/1.45 var(--mono); user-select: text; }
.play-console .line.error { color: #ff7b7b; }
.play-console .line.info { color: var(--text-dim); }