/* 🧩 Eblankraft Blockly — темна тема в стилі гри */
/* --- 🖋 Шрифти: нормальна кирилиця + емодзі на будь-якій ОС --- */
:root {
    --eblan-font-ui: 'Segoe UI', 'Roboto', 'Ubuntu', 'Tahoma', 'Noto Sans',
        'DejaVu Sans', system-ui, Arial, sans-serif, 'Segoe UI Emoji', 'Noto Color Emoji';
    --eblan-font-mono: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Ubuntu Mono',
        'DejaVu Sans Mono', 'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; background: #141414; color: #eee;
    font-family: var(--eblan-font-ui);
    display: flex; flex-direction: column; overflow: hidden;
}
/* --- 🐞 fix: текст і контури блоків не зливаються з пастеллю блоків --- */
.blocklySvg {
    background-color: #f4f2ec !important; /* світле «креативне» тло, контрастує з чорним UI */
}
.blocklyMainBackground { stroke: #c9c4b4; stroke-width: 2px; }
/* темний текст на кольорових блоках: білий читабельний тільки на темних кольорах */
.blocklyText, .blocklyFlyoutLabelText { fill: #111 !important; font-weight: 600; }
.blocklyDropdownText,
.zelos-renderer .blocklyDropdownText,
.blocklySvg .blocklyDropdownText {
    fill: #111 !important;
    font-weight: 600 !important;
}

/* --- 🔽 ДРОПДАУНИ (випадаючі списки) та меню: контрастний темний текст --- */
.blocklyDropDownDiv,
.zelos-renderer.blocklyDropDownDiv,
.blocklyContextMenu,
.blocklyDropdownMenu {
    background: #ffffff !important;
    border: 1px solid #c0c0c0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

.blocklyDropDownArrow {
    background-color: #ffffff !important;
    border-color: #c0c0c0 !important;
}

/* Текст усіх пунктів меню у дропдаунах — ПРИМУСОВО темний */
.blocklyDropDownDiv .goog-menuitem,
.blocklyDropDownDiv .goog-menuitem-content,
.blocklyDropDownDiv .blocklyMenuItem,
.blocklyDropDownDiv .blocklyMenuItemContent,
.zelos-renderer.blocklyDropDownDiv .goog-menuitem,
.zelos-renderer.blocklyDropDownDiv .goog-menuitem-content,
.zelos-renderer.blocklyDropDownDiv .blocklyMenuItem,
.zelos-renderer.blocklyDropDownDiv .blocklyMenuItemContent,
.blocklyContextMenu .goog-menuitem,
.blocklyContextMenu .goog-menuitem-content,
.blocklyContextMenu .blocklyMenuItem,
.blocklyContextMenu .blocklyMenuItemContent,
.blocklyDropdownMenu .blocklyMenuItem,
.blocklyDropdownMenu .blocklyMenuItemContent {
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Підсвітка активного пункту при наведенні миші */
.blocklyDropDownDiv .goog-menuitem-highlight,
.blocklyDropDownDiv .blocklyMenuItemHighlight,
.zelos-renderer.blocklyDropDownDiv .goog-menuitem-highlight,
.zelos-renderer.blocklyDropDownDiv .blocklyMenuItemHighlight,
.blocklyContextMenu .goog-menuitem-highlight,
.blocklyContextMenu .blocklyMenuItemHighlight {
    background-color: #e8f5e9 !important;
}
.blocklyDropDownDiv .goog-menuitem-highlight .goog-menuitem-content,
.blocklyDropDownDiv .blocklyMenuItemHighlight .blocklyMenuItemContent,
.zelos-renderer.blocklyDropDownDiv .goog-menuitem-highlight .goog-menuitem-content,
.zelos-renderer.blocklyDropDownDiv .blocklyMenuItemHighlight .blocklyMenuItemContent,
.blocklyContextMenu .goog-menuitem-highlight .goog-menuitem-content,
.blocklyContextMenu .blocklyMenuItemHighlight .blocklyMenuItemContent {
    color: #1b5e20 !important;
    font-weight: 600 !important;
}

.blocklyDropDownDiv .blocklyDropDownButton { fill: #111; }
/* поля вводу: світлі, з темним текстом */
.blocklyHtmlInput {
    background: #fff !important; color: #111 !important;
    border: 2px solid #2e7d32; border-radius: 4px;
}
/* зчіпки й тіні — трохи темніші, щоб контур не «зникав» */
.blocklyPathLight { fill: none; }
/* --- 🖋 Єдиний шрифт для блоків, меню й полів (перебиває інлайн Blockly) --- */
.blocklySvg,
.blocklyWidgetDiv,
.blocklyDropDownDiv,
.blocklyContextMenu,
.blocklyToolboxDiv {
    font-family: var(--eblan-font-ui) !important;
}
.blocklySvg text,
.blocklyText,
.blocklyFlyoutLabelText,
.blocklyDropdownText,
.blocklyHtmlInput,
.blocklyDropDownDiv .goog-menuitem,
.blocklyDropDownDiv .goog-menuitem-content,
.blocklyDropDownDiv .blocklyMenuItem,
.blocklyDropDownDiv .blocklyMenuItemContent,
.blocklyContextMenu .goog-menuitem,
.blocklyContextMenu .blocklyMenuItem,
.blocklyToolboxCategory .label {
    font-family: var(--eblan-font-ui) !important;
}
/* багаторядкові поля вводу — моноширинний (як code) */
.blocklyMultilineText,
.blocklyHtmlTextAreaInput {
    font-family: var(--eblan-font-mono) !important;
}
/* --- 🧩 Scratch-стиль: світлий тулбокс і флай-аут, фірмові кольори --- */
.blocklyToolboxDiv {
    background: #fff; color: #333; border-right: 2px solid #4C97FF;
}
.blocklyToolboxCategory { padding: 4px 0; }
.blocklyToolboxCategory .label { color: #575E75; }
.blocklyFlyoutBackground { fill: #ffffff !important; stroke: #c9c4b4; }
.blocklyFlyoutButton { fill: #e6e9f0; }
.blocklyFlyoutButton .blocklyText { fill: #575E75 !important; }
.blocklyZoom > image { opacity: .75; }
.blocklyTrash { opacity: .8; }
/* скролбари */
.blocklyScrollbarHandle { fill: #666; }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; background: #1f1f1f; border-bottom: 2px solid #4caf50;
}
.brand { font-size: 18px; }
.brand .sub { color: #9e9e9e; font-size: 13px; margin-left: 8px; }
.top-links { display: flex; gap: 8px; }
.toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 14px; background: #1a1a1a; border-bottom: 1px solid #333;
}
.btn {
    background: #333; color: #fff; border: 1px solid #555; border-radius: 6px;
    padding: 7px 12px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #444; }
.btn.primary { background: #2e7d32; border-color: #4caf50; font-weight: bold; }
.btn.primary:hover { background: #388e3c; }
.btn.danger { background: #5d1a1a; border-color: #a33; }
.btn.ghost { text-decoration: none; display: inline-block; }
select.btn { background: #333; }
.status { color: #8f8; font-size: 13px; margin-left: 6px; }
.layout { flex: 1; display: flex; min-height: 0; }
.workspace { flex: 1; min-width: 0; }
.side { width: 400px; max-width: 42vw; display: flex; flex-direction: column; background: #1a1a1a; border-left: 1px solid #333; }
.panel { display: flex; flex-direction: column; padding: 10px; flex: 1; min-height: 0; }
.panel-title { font-weight: bold; margin-bottom: 6px; color: #ffd54f; }
#luaCode {
    flex: 1; min-height: 200px; resize: none; background: #0d1117; color: #d6ff9e;
    border: 1px solid #444; border-radius: 6px; padding: 10px;
    font-family: var(--eblan-font-mono); font-size: 13px; white-space: pre;
}
.check { margin-top: 6px; font-size: 13px; min-height: 20px; }
.check.ok { color: #8f8; }
.check.err { color: #f88; white-space: pre-wrap; }
.help { border-top: 1px solid #333; padding: 10px; font-size: 13px; max-height: 45%; overflow: auto; }
.help code { background: #333; padding: 1px 5px; border-radius: 4px; }
.muted { color: #999; }
@media (max-width: 900px) {
    .layout { flex-direction: column; }
    .workspace { min-height: 50vh; }
    .side { width: 100%; max-width: none; border-left: none; border-top: 1px solid #333; }
    body { overflow: auto; }
}