/* ===== EDITOR THEME TOKENS ===== */
:root {
  --ed-bg:         #252C18;
  --ed-panel:      #2E3520;
  --ed-surface:    #38402A;
  --ed-surface2:   #424A32;
  --ed-border:     #505C3C;
  --ed-gold:       #C8A951;
  --ed-gold-light: #E4C96E;
  --ed-gold-dim:   rgba(200, 169, 81, 0.22);
  --ed-text:       #EDE9D0;
  --ed-text-muted: #8A9070;
}

/* ===== EDITOR HEADER OVERRIDE ===== */
body.editor-page {
  background: var(--ed-bg);
  color: var(--ed-text);
}
body.editor-page .header {
  background: #1E2414;
  border-bottom: 1px solid var(--ed-border);
  box-shadow: none;
}
body.editor-page .header-logo { color: var(--ed-text); }
body.editor-page .header-logo span { color: var(--ed-gold); }
body.editor-page .header-nav a,
body.editor-page .header-nav button { color: var(--ed-text-muted); }
body.editor-page .header-nav a:hover,
body.editor-page .header-nav button:hover { background: var(--ed-surface); color: var(--ed-gold); }
body.editor-page .header-nav a.active { background: var(--ed-gold); color: #0A0B07; }
body.editor-page .btn-primary { background: var(--ed-gold); color: #0A0B07; box-shadow: 0 2px 10px rgba(200,169,81,.3); }
body.editor-page .btn-primary:hover { background: var(--ed-gold-light); }
body.editor-page .btn-outline { border-color: var(--ed-border); color: var(--ed-text-muted); }
body.editor-page .btn-outline:hover { border-color: var(--ed-gold); color: var(--ed-gold); }

/* ===== MAIN LAYOUT ===== */
.editor-container {
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
  background: var(--ed-bg);
}

/* ===== BLOCKLY PANEL ===== */
.blockly-panel {
  flex: 1;
  position: relative;
  min-width: 0;
}

#blocklyDiv {
  position: absolute;
  inset: 0;
}

/* ===== BLOCKLY TOOLBOX — native, minimal theming only ===== */
/* Let Blockly handle everything; we only nudge colors to match our palette */
.blocklyToolboxCategory:hover > .blocklyTreeRowContentContainer {
  background: rgba(200,169,81,0.14) !important;
  border-radius: 8px;
}
.blocklySelected > .blocklyTreeRowContentContainer {
  background: rgba(200,169,81,0.26) !important;
  border-radius: 8px;
}

/* ===== STAGE PANEL (Scratch Layout) ===== */
.stage-panel {
  width: 500px;
  min-width: 380px;
  background: var(--ed-panel);
  border-left: 1px solid var(--ed-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top bar: play/stop buttons ── */
.stage-top-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: var(--ed-surface);
  border-bottom: 1px solid var(--ed-border);
  height: 42px;
}

.stage-play-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-flag {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: #3C8A3C;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-flag:hover:not(:disabled) { background: #4DAF4D; transform: scale(1.1); }

.btn-stop-round {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: #8A3A3A;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-stop-round:hover:not(:disabled) { background: #AF4D4D; transform: scale(1.1); }
.btn-stop-round:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-flag:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-reset-sm {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--ed-border);
  background: var(--ed-surface2);
  color: var(--ed-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-reset-sm:hover { background: var(--ed-border); color: var(--ed-text); }

/* ── Canvas wrapper ── */
.stage-canvas-wrapper {
  flex: 1 1 0;
  min-height: 180px;
  max-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #1A1F10;
  position: relative;
  border-bottom: 1px solid var(--ed-border);
}

#stageCanvas {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,169,81,0.1);
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.coord-display {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.72);
  color: var(--ed-gold);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  pointer-events: none;
  border: 1px solid rgba(200,169,81,0.2);
}

/* ── Sprite properties bar (below canvas, like Scratch) ── */
.sprite-props-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 10px;
  background: var(--ed-surface);
  border-bottom: 1px solid var(--ed-border);
  flex-wrap: wrap;
  min-height: 56px;
}

.prop-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.prop-field > label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ed-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.prop-input {
  background: var(--ed-surface2);
  border: 1.5px solid var(--ed-border);
  border-radius: 6px;
  color: var(--ed-text);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  outline: none;
  text-align: center;
  padding: 3px 5px;
  transition: border-color 0.15s;
}
.prop-input:focus { border-color: var(--ed-gold); }
.prop-input-name { width: 88px; }
.prop-input-num  { width: 50px; }

.prop-show-btns {
  display: flex;
  gap: 4px;
}
.prop-show-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--ed-border);
  background: var(--ed-surface2);
  color: var(--ed-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.prop-show-btn.active-btn { border-color: var(--ed-gold); background: var(--ed-gold-dim); color: var(--ed-gold); }
.prop-show-btn:hover { border-color: var(--ed-gold); color: var(--ed-gold); }

/* ── Bottom area: sprites (left) + backdrop (right) ── */
.stage-bottom-area {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Sprite area (left, bigger) */
.sprite-area {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  position: relative;
  min-width: 0;
  background: var(--ed-panel);
}

.sprite-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 44px;
}

/* Sprite thumbnail card */
.sprite-item {
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
}

.sprite-item-thumb {
  width: 70px;
  height: 56px;
  background: var(--ed-surface);
  border: 2px solid var(--ed-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: all 0.15s;
  overflow: hidden;
}

.sprite-item:hover .sprite-item-thumb { border-color: var(--ed-gold-light); }
.sprite-item.active .sprite-item-thumb {
  border-color: var(--ed-gold);
  box-shadow: 0 0 0 2px var(--ed-gold-dim);
  background: var(--ed-surface2);
}

.sprite-item-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--ed-text);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.sprite-item-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(180, 40, 40, 0.9);
  border: none;
  color: white;
  font-size: 10px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}
.sprite-item:hover .sprite-item-del { display: flex; }

/* Add sprite button (gold circle, bottom-right) */
.add-sprite-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ed-gold);
  color: #0A0B07;
  border: none;
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(200,169,81,0.45);
  z-index: 3;
}
.add-sprite-btn:hover { background: var(--ed-gold-light); transform: scale(1.1); }

/* Backdrop panel (right side, like Scratch's "Sahne") */
.backdrop-panel {
  width: 96px;
  flex-shrink: 0;
  background: var(--ed-surface);
  border-left: 1px solid var(--ed-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  gap: 6px;
  overflow-y: auto;
}

.backdrop-panel-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--ed-gold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
}

/* Background thumbnails */
.bg-item {
  width: 78px;
  height: 56px;
  border-radius: 7px;
  border: 2px solid var(--ed-border);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.bg-item:hover  { border-color: var(--ed-gold-light); transform: scale(1.03); }
.bg-item.active { border-color: var(--ed-gold); box-shadow: 0 0 0 2px var(--ed-gold-dim); }

.bg-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 8px; font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  padding: 4px 2px 3px;
}

/* ===== ASK OVERLAY ===== */
/* (inline styled in HTML) */

/* ===== MODALS ===== */
body.editor-page .modal-overlay { background: rgba(0,0,0,.88); }
body.editor-page .modal {
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  color: var(--ed-text);
}
body.editor-page .modal h2 { color: var(--ed-gold); }
body.editor-page .modal p  { color: var(--ed-text-muted); }

.sprite-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 0;
}
.sprite-picker-item {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  background: var(--ed-surface2);
  border: 2px solid var(--ed-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0 auto;
}
.sprite-picker-item:hover { border-color: var(--ed-gold); background: var(--ed-surface); transform: scale(1.1); }

/* ===== SAVE/LOAD DIALOGS ===== */
.dialog-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--ed-surface2);
  border: 2px solid var(--ed-border);
  border-radius: 10px;
  color: var(--ed-text);
  font-family: var(--font-family);
  font-size: 15px; font-weight: 600;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.dialog-input:focus { border-color: var(--ed-gold); box-shadow: 0 0 0 3px rgba(200,169,81,.12); }
.dialog-input::placeholder { color: var(--ed-text-muted); }
.dialog-buttons { display: flex; gap: 10px; justify-content: center; }

.project-list { max-height: 280px; overflow-y: auto; margin-bottom: 14px; }
.project-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--ed-surface2);
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.project-item:hover { border-color: var(--ed-gold); }
.project-item-name { font-weight: 700; font-size: 14px; color: var(--ed-text); }
.project-item-date { font-size: 11px; color: var(--ed-text-muted); }
.project-item-actions { display: flex; gap: 8px; }

body.editor-page .btn-danger { background: #5A1A1A; color: #FF9999; border: 1px solid #7A2A2A; }
body.editor-page .btn-danger:hover { background: #7A2020; }

/* ===== BLOCKLY WORKSPACE COLORS ===== */
.blocklyMainBackground { fill: #252C18 !important; }
.blocklyGridLine        { stroke: #303820 !important; }
.blocklyFlyoutBackground { fill: #38402A !important; fill-opacity: 1 !important; }
.blocklyScrollbarHandle  { fill: #505C3C !important; }
.blocklyScrollbarBackground { fill: transparent !important; }

/* ===== SPEECH BUBBLE (canvas overlay) ===== */
.speech-bubble {
  position: absolute;
  background: white; border: 2px solid #333;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px; font-weight: 600;
  max-width: 150px;
  animation: bubblePop .2s ease;
  z-index: 10; pointer-events: none;
}
@keyframes bubblePop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) { .stage-panel { width: 420px; } }

@media (max-width: 900px) {
  .editor-container { flex-direction: column; height: calc(100vh - 48px); }
  .blockly-panel    { flex: none; height: 50%; position: relative; }
  .stage-panel      { width: 100%; min-width: unset; height: 50%; border-left: none; border-top: 1px solid var(--ed-border); }
  .stage-canvas-wrapper { max-height: 200px; }
}