/* style.css - Vyčištěná verze od duplicit */

/* === Základní proměnné a reset === */
:root {
     /* --- ÚPRAVA ZDE --- */
     --font-primary: "Roboto", "Helvetica Neue", Arial, sans-serif; /* Nahrazujeme Google Sans Text */
     --font-monospace: "Roboto Mono", "Courier New", monospace; /* Pro případný kód */
     
     /* Velikosti fontů - relativně k root font-size (typicky 16px) */
     --font-size-xs: 0.75rem;   /* 12px */
     --font-size-sm: 0.875rem;  /* 14px */
     --font-size-base: 1rem;    /* 16px */
     --font-size-md: 1.125rem;  /* 18px */
     --font-size-lg: 1.25rem;   /* 20px */
     --font-size-xl: 1.5rem;    /* 24px */
 
     /* Váhy fontu */
     --font-weight-regular: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
 
     /* Výšky řádků */
     --line-height-tight: 1.25;
     --line-height-normal: 1.5;
     --line-height-relaxed: 1.65; /* Upraveno pro lepší čitelnost delšího textu */

     /* --- KONEC ÚPRAVY ZDE --- */
    --font-family: "Google Sans Text", Roboto, Arial, sans-serif;
    --border-radius: 10px;
    --transition-speed: 0.2s;
    --bg-color: #121314;
    --content-bg: #1d1f21;
    --sidebar-bg: #1d1e21;
    /* --sidebar-menu-bg: #060606; /* Nepoužito? */
    --topbar-bg: #121314;
    --canvas-bg: #19191c;
    --text-color: #dcddde;
    --text-color-secondary: #b9bbbe;
    --text-color-header: #ffffff;
    --separator-color: #404247;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --button-bg: #2a2d31;
    --button-hover-bg: #35393e;
    --button-text-color: #c5c8cc;
    --button-active-bg: #005eff;
    --button-active-text-color: #ffffff;
    --button-success-bg: #28a745;
    --button-success-hover-bg: #218838;
    --button-danger-bg: #dc3545;
    --button-danger-hover-bg: #c82333;
    --input-bg: #121314;
    --input-border: #404247;
    --input-border-splash: #212225;
    --input-text-color: #dcddde;
    --input-focus-border: var(--button-active-bg);
    --input-focus-shadow: 0 0 0 2px rgba(0, 94, 255, 0.3);
    --frame-border: #353b3e00; /* transparent? */
    --scrollbar-thumb-bg: rgba(80, 80, 80, 0.7);
    --scrollbar-track-bg: rgba(0, 0, 0, 0);
    --locked-overlay: rgba(0, 0, 0, 0.4);
    --app-padding: 15px;
    --app-gap: 5px;
    --sidebar-left-width-value: 300px;
    --sidebar-left-total-offset: calc(-1 * (var(--sidebar-left-width-value) + var(--app-gap)));
    --sidebar-right-width-value: 300px;
    --header-height: 50px;
    --tile-editor-panel-height: 300px;
    --animation-editor-panel-height: 430px;
    --tile-thumbnail-size: 48px;
    --tile-editor-width: 350px;
    --default-level-bg-color: var(--content-bg);
    --bottom-panel-offset: 15px; /* Nová proměnná pro odsazení spodního panelu */
    --animation-management-width: 340px; /* Pevná šířka levého sloupce ve spodním panelu */
    --animation-playback-width: 340px; /* Pevná šířka pravého sloupce ve spodním panelu - zvětšeno pro obsah */
    --new-animation-panel-height: 300px; /* Nová výška spodního panelu, pokud ji chceš měnit */

    --content-bg: #1d1f21; /* Příklad tmavě šedé pro pozadí obsahu */
    --separator-color: #4a5568;
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.4); /* Světlejší jezdec, pokud je pozadí tmavé */
    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.6);
    --scrollbar-track-color: #cccccc; /* Světle šedá pro track scrollbaru - TUTO UPRAV! */
}

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

/* --- PŘIDAT NEBO UPRAVIT HTML A BODY --- */
html {
    font-size: 100%; /* Nastaví kořenovou velikost fontu, typicky 16px */
}

input[type="number"],
input[type="range"],
input[type="text"],
select,
textarea {
    padding: 7px 9px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text-color);
    width: 100%;
    font-size: 0.9em;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
    margin-bottom: 8px;
}
input[type="text"] {
    text-align: center;
}
textarea {
    text-align: center; /* Toto může vypadat divně pro víceřádkový text */
    resize: vertical;
    min-height: 40px;
    font-family: inherit;
}
input[type="number"] {
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary); /* Použít novou primární rodinu */
    margin: 0;
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    font-size: var(--font-size-sm); /* Výchozí velikost pro většinu UI textu (14px) */
    line-height: var(--line-height-normal); /* Výchozí výška řádku */
    user-select: none;
    -webkit-font-smoothing: antialiased; /* Pro lepší vykreslování fontů */
    -moz-osx-font-smoothing: grayscale;  /* Pro lepší vykreslování fontů */
}

::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg); border-radius: 5px; border: none; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 120, 120, 0.9); }

/* === Typografie === */
h1, h2, h3, h4, h5, h6 { 
    margin: 0 0 0.6em 0; 
    font-weight: var(--font-weight-medium); /* Váha pro nadpisy */
    color: var(--text-color-header); 
}
h2 { font-size: var(--font-size-xs);
     text-transform: uppercase; 
     letter-spacing: 0.9px; 
     margin-top: 1.8em; 
     margin-bottom: 1em; 
     border-bottom: 1px solid var(--separator-color); 
     padding-bottom: 0.5em; 
     color: var(--text-color-secondary); 
     font-weight: 500; 
     -webkit-font-smoothing: antialiased; /* Pro lepší vykreslování fontů */
     -moz-osx-font-smoothing: grayscale;
    }
h2:first-child { margin-top: 0; }
h3 { font-size: var(--font-size-xs); margin-top: 5px; margin-bottom: 5px; font-weight: 500; color: var(--text-color); }
h4 { font-size: 0.85em; margin-top: 0.8em; margin-bottom: 10px; font-weight: 600; color: var(--text-color); border-bottom: none; padding-bottom: 0; }
label { display: block; margin-bottom: 6px; font-size: var(--font-size-xs); color: var(--text-color-secondary); font-weight: var(--font-weight-medium); }
label.inline-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; padding: 4px 0; font-weight: normal; color: var(--text-color); }
label.inline-label input[type="checkbox"] { margin: 0; width: 14px; height: 14px; accent-color: var(--button-active-bg); cursor: pointer; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.separator { /* Používá se v .tile-palette-controls */
    color: var(--separator-color); 
    margin: 0 5px; 
    height: 20px; /* Pro vertikální oddělovač */
    width: 1px;   /* Pro vertikální oddělovač */
    background-color: var(--separator-color); /* Pro vertikální oddělovač */
    align-self: center; /* Pro vertikální oddělovač ve flex kontejneru */
}

/* === Struktura Layoutu === */
.app-wrapper {
    position: relative; width: 100vw; height: 100vh;
    overflow: hidden; display: flex; flex-direction: column;
}

.header-controls {
    width: 100%; flex-shrink: 0; z-index: 1001;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 var(--app-padding); background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--frame-border); height: var(--header-height);
    position: relative; top: 5px;  
}
.header-left, .header-right { display: flex; align-items: center; gap: 5px; }
.header-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    gap: 15px; display: flex; align-items: center;
    max-width: calc(100% - 300px); white-space: nowrap;
}
#currentLevelDisplay { overflow: hidden; text-overflow: ellipsis; margin-left: 15px; font-size: 0.9em; color: var(--text-color-secondary); }
.header-button-group { display: flex; align-items: center; gap: 5px; }
.header-controls .btn.btn-icon {
    min-width: 34px; height: 34px; background-color: transparent;
    border: 1px solid transparent; padding: 5px; font-size: 1.1em;
    color: var(--text-color-secondary);
}
.header-controls .btn.btn-icon:hover { background-color: var(--button-hover-bg); border-color: var(--input-border); color: var(--text-color); }
.header-controls .btn.btn-icon:active { transform: scale(0.95); }
.header-controls .btn.btn-icon:disabled { background-color: transparent !important; opacity: 0.4; }
.header-controls .btn.btn-icon.active { background-color: var(--button-active-bg); color: var(--button-active-text-color); border-color: transparent; }
.header-controls .btn.btn-icon.active:hover { background-color: #004ecc; }
.header-controls .btn.btn-success { background-color: var(--button-success-bg); color: white; border: none;}
.header-controls .btn.btn-success:hover { background-color: var(--button-success-hover-bg); }
.header-controls .btn.btn-danger { background-color: var(--button-danger-bg); color: white; border: none;}
.header-controls .btn.btn-danger:hover { background-color: var(--button-danger-hover-bg); }
.header-separator { width: 1px; height: 20px; background-color: var(--separator-color); margin: 0 15px 0 5px; } /* Oddělovač v headeru */
#projectNameDisplay {
    font-size: 1em; font-weight: 500; color: var(--text-color);
    padding: 10px 20px; border-radius: var(--border-radius); cursor: pointer;
    transition: background-color var(--transition-speed);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center; flex-shrink: 0;
}
#projectNameDisplay:hover { background-color: var(--button-hover-bg); }
.header-level-select {
    padding: 8px 20px; background-color: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: var(--border-radius); color: var(--text-color); font-size: 1em;
    margin-left: 10px; max-width: 200px; cursor: pointer; margin-top: 10px;
}
.header-level-select:hover { border-color: var(--button-hover-bg); }
.header-level-select:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); }

.app-container {
    display: flex; width: 100%; flex-grow: 1; position: relative;
    padding: var(--app-padding); gap: var(--app-gap); overflow: hidden;
}
.app-container.with-bottom-panel-open {
    padding-bottom: calc(var(--animation-editor-panel-height) + var(--app-gap) + var(--app-padding));
}

/* === Postranní panely - Společné styly === */
.sidebar {
    padding: var(--app-padding); height: 100%; overflow: hidden; flex-shrink: 0;
    background-color: var(--sidebar-bg); border-radius: var(--border-radius);
    box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
    transition-property: transform, width, min-width, padding, margin-left, margin-right;
    transition-duration: var(--transition-speed);
    transition-timing-function: ease-in-out;
}
.sidebar-content {
    flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding-right: 5px; /* Upraveno z 2px */
    scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
    padding-left: var(--app-padding);  /* Nebo menší, pokud chceš obsah blíže levému okraji */
    padding-right: calc(var(--app-padding) - 8px + 4px);
}
.sidebar-content::-webkit-scrollbar { width: 5px; }
.sidebar-content::-webkit-scrollbar-thumb { border: none; }

/* Levý panel (#mainMenu) */
#mainMenu {
    width: var(--sidebar-left-width-value); order: 1;
    transform: translateX(0); margin-left: 0;
    min-width: var(--sidebar-left-width-value);
}
#mainMenu.closed {
    transform: translateX(var(--sidebar-left-total-offset));
    width: 0 !important; min-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: calc(-1 * var(--app-gap)) !important;
    border: none; box-shadow: none;
}

/* Pravý panel (#toolsPanel) */
#toolsPanel {
    width: var(--sidebar-right-width-value); order: 3;
    transform: translateX(0); margin-right: 0;
    min-width: var(--sidebar-right-width-value);
}

#toggleToolsPanel.closed {
    right: var(--app-padding); /* Pozice, když je pravý panel zavřený */
}

#toolsPanel.closed {
    /* 1. Posunout panel doprava mimo obrazovku */
    transform: translateX(calc(var(--sidebar-right-width-value) + var(--app-gap))); /* Posun doprava o šířku + mezeru */

    /* 2. Kompenzovat jeho místo v layoutu negativním marginem */
    /* Tento margin by měl být stejný jako velikost posunu, ale negativní, */
    /* aby ostatní flex itemy mohly zaujmout jeho místo. */
    margin-right: calc(-1 * (var(--sidebar-right-width-value) + var(--app-gap)));

    /* 3. Odstranit width: 0 !important; a paddingy, pokud způsobují reflow obsahu. */
    /* Spoléháme se na transform a overflow:hidden na .sidebar. */
    /* Pokud je nutné, aby měl nulovou šířku pro layout: */
    /* width: 0 !important; */ /* Zkuste toto zakomentovat */
    /* min-width: 0 !important; */
    /* padding-left: 0 !important; */
    /* padding-right: 0 !important; */

    /* 4. Ostatní styly pro "neviditelný" panel */
    border: none;
    box-shadow: none;
    pointer-events: none;
}

/* === Tlačítka pro přepínání postranních panelů === */
.sidebar-toggle-btn {
    position: absolute; top: var(--app-padding); z-index: 1002;
    background-color: var(--sidebar-bg);
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--frame-border); border-radius: 50%;
    box-shadow: var(--shadow); font-size: 1em;
    display: inline-flex; justify-content: center; align-items: center;
    line-height: 1; cursor: pointer;
    transition-property: transform, background-color, color, left, right;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}
.sidebar-toggle-btn i {
    color: #ffffff; /* Ikony vždy bílé */
    transition: transform 0.3s ease;
}
.sidebar-toggle-btn:hover { background-color: var(--button-hover-bg); }

/* Levé tlačítko */
#toggleLeftPanelBtn {
    left: calc(var(--sidebar-left-width-value) + var(--app-gap) + var(--app-padding) + 5px);
}
#toggleLeftPanelBtn.closed { left: var(--app-padding); }
#toggleLeftPanelBtn i.fa-chevron-left { transform: rotate(0deg); }
#toggleLeftPanelBtn.closed i.fa-chevron-left { transform: rotate(180deg); }

/* Pravé tlačítko */
#toggleToolsPanel {
    right: calc(var(--sidebar-right-width-value) + var(--app-gap) + var(--app-padding) + 5px);
}
#toggleToolsPanel.closed { right: var(--app-padding); }
#toggleToolsPanel i.fa-chevron-right { transform: rotate(0deg); }
#toggleToolsPanel.closed i.fa-chevron-right { transform: rotate(180deg); }


/* Střední sloupec */
.center-column {
    order: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%; /* <<< ZKUS PŘIDAT TOTO */
    min-width: 0; 
    height: 100%;
    gap: var(--app-gap);
    overflow: hidden; 
}

.main-content {
    order: 1; flex-grow: 1; position: relative;
    background-color: var(--content-bg);
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* SCROLLBARY PRO OBSAH JSOU ZDE */
    padding: 0; border-radius: var(--border-radius);
    display: flex; justify-content: center; align-items: center;
    box-shadow: var(--shadow); min-height: 200px;
    transition: background-color 0.3s ease; z-index: 1;
}
.main-content.is-panning-map,
.main-content.panning { cursor: grabbing !important; }
.main-content:not(.is-panning-map):not(.panning) #levelMapCanvas { cursor: grab; }

/* Canvasy */
.canvas-wrapper {
    background-color: transparent; margin: 0; flex-shrink: 0;
    transform-origin: top left; position: relative;
    overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.1); z-index: 1;
}
#canvas {
    display: block; image-rendering: pixelated; image-rendering: crisp-edges;
    cursor: crosshair; background-color: transparent;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px; /* Upraveno pro přesnější šachovnici */
    position: relative; z-index: 2;
}
.overlay-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 3;
    image-rendering: pixelated; image-rendering: crisp-edges;
    background-color: transparent;
}
#overlayCanvas { pointer-events: auto; }

#levelMapCanvas {
    display: none; background-color: transparent; cursor: grab;
    image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
    transform-origin: 0 0;
}

/* === Ostatní ovládací prvky (Tlačítka, Inputy atd.) === */
.control-group { margin-bottom: 1.5em; }
.button-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; margin-bottom: 0.8em; }
.tool-buttons { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; }

.btn {
    padding: 8px 12px; background-color: var(--button-bg); border: none;
    border-radius: var(--border-radius); color: var(--button-text-color);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium); cursor: pointer;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.1s ease;
    text-align: center; font-size: 0.9em; line-height: 1.2;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn i { font-size: 1.1em; margin: 0; line-height: 1; flex-shrink: 0; }
.btn.btn-icon { padding: 6px; font-size: 1.1em; min-width: 36px; min-height: 36px; gap: 0; }
.btn:hover { background-color: var(--button-hover-bg); color: #ffffff; }
.btn:active { transform: scale(0.97); }
.btn.active { background-color: var(--button-active-bg); color: var(--button-active-text-color); font-weight: 600; }
.btn:disabled, .btn.disabled {
    opacity: 0.4; background-color: var(--button-bg) !important;
    color: var(--text-color-secondary) !important; pointer-events: none;
    transform: none; box-shadow: none !important; cursor: not-allowed;
}
.btn.btn-danger { background-color: var(--button-danger-bg); color: white; }
.btn.btn-danger:hover { background-color: var(--button-danger-hover-bg); }

.input-group { margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.input-group label { margin-bottom: 0; flex-shrink: 0; min-width: 60px; text-align: right; padding-right: 5px; font-size: 0.85em; }
.input-group input[type="number"] { flex-grow: 0; width: 70px; text-align: center; } /* Specifické pro input-group */
.input-group input[type="text"], .input-group select, .input-group textarea { flex-grow: 1; width: auto; }
select { cursor: pointer; }

input[type="range"] { cursor: pointer; padding: 0; height: 18px; margin-bottom: 0; vertical-align: middle; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--input-border); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--button-active-bg); border-radius: 50%; cursor: pointer; margin-top: -4px; }
input[type="range"]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background: var(--input-border); border-radius: 2px; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--button-active-bg); border-radius: 50%; cursor: pointer; border: none; }

input[type="color"] { /* Obecný styl pro VŠECHNY color inputy */
    min-height: 36px; /* Výška celého input prvku */
    padding: 0;       /* Vynulovat padding na samotném inputu, budeme ho řešit na swatchi */
    cursor: pointer;
    border-radius: var(--border-radius);
    background-color: var(--input-bg); /* Pozadí inputu, pokud by swatch nebyl 100% */
    border: 1px solid var(--input-border);
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box; /* Aby padding a border byly zahrnuty do width/height */
    appearance: none;         /* Skryje defaultní vzhled prohlížeče */
    -webkit-appearance: none;
    -moz-appearance: none;    /* Pro Firefox */
    display: block; /* Nebo inline-block, pokud je potřeba */
}

/* === Specifické pro #levelBackgroundColorPicker (a další podobné pickery) === */
/* Můžeš vytvořit obecnější třídu, např. .custom-color-picker, pokud máš více takových */

#levelBackgroundColorPicker::-webkit-color-swatch-wrapper,
#color-picker::-webkit-color-swatch-wrapper, /* Pro picker v pravém panelu */
#tileEditorColorPicker::-webkit-color-swatch-wrapper { /* Pro picker v editoru dlaždic */
    padding: 4px; /* Vnitřní odsazení KOLEM barevného vzorku */
    /* Toto odsazení vytvoří "rámeček" barvou pozadí inputu kolem samotné barvy */
    box-sizing: border-box; /* Aby padding neovlivnil celkovou velikost wrapperu */
    width: 100%;
    height: 100%;
}

#levelBackgroundColorPicker::-webkit-color-swatch,
#color-picker::-webkit-color-swatch,
#tileEditorColorPicker::-webkit-color-swatch {
    border: none; /* Žádný extra border kolem samotné barevné plochy */
    /* Zakulacení rohů barevné plochy tak, aby odpovídalo vnitřnímu paddingu wrapperu */
    border-radius: calc(var(--border-radius) - 4px); /* Příklad: pokud je --border-radius 10px a padding 4px, toto by dalo 6px */
    /* Nebo jednodušeji, pokud chceš menší zakulacení pro swatch: */
    /* border-radius: calc(var(--border-radius) / 1.8); */ /* Toto jsi měl, může fungovat */
    width: 100%;  /* Swatch by měl vyplnit wrapper */
    height: 100%;
}

/* Pro Firefox */
#levelBackgroundColorPicker::-moz-color-swatch,
#color-picker::-moz-color-swatch,
#tileEditorColorPicker::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--border-radius) - 4px); /* Stejné jako pro webkit */
    /* Firefox interpretuje padding na ::-moz-color-swatch jinak než Webkit na ::-webkit-color-swatch-wrapper. */
    /* Obvykle padding na ::-moz-color-swatch není potřeba, pokud je input[type=color] správně nastylován. */
    /* Pokud by barva vyplňovala celý input i s rámečkem, zkus přidat: */
    /* padding: 1px; */ /* Nebo jinou malou hodnotu */
    width: 100%;
    height: 100%;
}

/* Specifické pro color picker mřížky v levém panelu */
.grid-controls-wrapper #gridColorPicker {
    padding: 1px 2px; width: 30px; height: 30px; min-height: 30px;
    border: 1px solid var(--input-border); border-radius: var(--border-radius);
    background-color: var(--input-bg); cursor: pointer; margin-bottom: 0;
    flex-shrink: 0; appearance: none; -webkit-appearance: none;
}
.grid-controls-wrapper #gridColorPicker::-webkit-color-swatch-wrapper { padding: 2px; }
.grid-controls-wrapper #gridColorPicker::-webkit-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2.5); }
.grid-controls-wrapper #gridColorPicker::-moz-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2.5); padding: 2px; }

/* === Grid Controls (Levý panel) === */
.canvas-settings .grid-controls-wrapper,
.grid-controls .grid-controls-wrapper { /* Sjednoceno */
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; margin-bottom: 5px; flex-wrap: wrap;
}
.grid-controls-wrapper .inline-label { margin-bottom: 0; margin-right: 5px; }
/* Styly pro #gridColorPicker jsou již definovány výše */
.alpha-slider-group { display: flex; align-items: center; gap: 2px; flex-grow: 1; min-width: 100px; }
#gridAlphaSlider { flex-grow: 1; min-width: 60px; max-width: 100px; height: 18px; margin-bottom: 0; cursor: pointer; }
#gridAlphaValue { font-size: 0.85em; color: var(--text-color-secondary); min-width: 30px; text-align: right; line-height: 1; flex-shrink: 0; margin-left: 5px; }

/* === Vrstvy (Levý panel) === */
.layer-list { max-height: 200px; overflow-y: auto; margin-bottom: 10px; border: 1px solid var(--input-border); border-radius: var(--border-radius); padding: 5px; background-color: rgba(0,0,0,0.15); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) transparent; }
.layer-item { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 5px; padding: 4px 7px; margin-bottom: 3px; border-radius: calc(var(--border-radius) / 1.8); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; background-color: var(--button-bg); border: 1px solid transparent; position: relative; min-height: 34px; }
.layer-item:hover { background-color: var(--button-hover-bg); }
.layer-item.active { background-color: var(--button-active-bg); color: var(--button-active-text-color); font-weight: 600; border-color: rgba(255,255,255,0.5); }
.layer-item.active .layer-visibility-btn,
.layer-item.active .layer-lock-btn,
.layer-item.active .layer-opacity-control span,
.layer-item.active .layer-render-front-btn i { color: var(--button-active-text-color); }
.layer-item.active .layer-opacity-control input[type="range"]::-webkit-slider-thumb { background: var(--button-active-text-color); }
.layer-item.active .layer-opacity-control input[type="range"]::-moz-range-thumb { background: var(--button-active-text-color); }
.layer-visibility-btn { grid-column: 1; }
.layer-name { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; padding: 2px 4px; border-radius: 3px; transition: background-color 0.1s; font-size: 0.9em; }
.layer-name:hover { background-color: rgba(255, 255, 255, 0.05); }
.layer-opacity-control { grid-column: 3; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.layer-opacity-control input[type="range"] { width: 45px; height: 14px; margin: 0; vertical-align: middle; }
.layer-opacity-value { font-size: 0.75em; min-width: 25px; text-align: right; color: var(--text-color-secondary); font-variant-numeric: tabular-nums; }
.layer-lock-btn { grid-column: 4; }
.layer-render-front-btn { grid-column: 5; }
.layer-visibility-btn, .layer-lock-btn, .layer-render-front-btn {
    background: none; border: none; color: var(--text-color-secondary); cursor: pointer;
    padding: 2px; font-size: 1em; line-height: 1; border-radius: 3px;
    transition: color 0.1s, background-color 0.1s;
    width: 22px; height: 22px; display: inline-flex;
    justify-content: center; align-items: center; flex-shrink: 0;
}
.layer-visibility-btn:hover, .layer-lock-btn:hover, .layer-render-front-btn:hover { background-color: rgba(255,255,255,0.1); color: white; }
.layer-item.render-in-front .layer-render-front-btn i { color: #ffffff; } /* Ikona je bílá, když je renderInFront */
.layer-item.active.render-in-front .layer-render-front-btn i { color: var(--button-active-text-color); } /* Pokud je aktivní a renderInFront */
.layer-item.active:not(.render-in-front) .layer-render-front-btn i { color: var(--button-active-text-color); } /* Pokud je aktivní, ale NENÍ renderInFront */

.layer-item.hidden { opacity: 0.6; }
.layer-item.hidden .layer-name { text-decoration: line-through; }
.layer-item.locked .layer-name { font-style: italic; opacity: 0.8; }
.layer-item.locked::after {
    content: '\f023'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 1.4em;
    color: rgba(255,255,255,0.1); background-color: var(--locked-overlay);
    width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
    border-radius: inherit; pointer-events: none; z-index: 1; opacity: 1;
}
.layer-buttons { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }


/* === Volby Nástroje & Vlastnosti Dlaždice (Pravý panel) === */
.tool-options, #tile-properties-section {
    border: 1px solid var(--separator-color); border-radius: var(--border-radius);
    padding: 10px 12px; background-color: rgba(0,0,0,0.1); margin-top: 1em;
}
.tool-options h3, #tile-properties-section h2 {
    margin-bottom: 10px; font-size: 0.8em; color: var(--text-color-secondary);
    text-transform: none; border-bottom: none; padding-bottom: 0;
}
#tile-properties-section h2 { margin-top: 0; }
.tool-option, .property-option { margin-bottom: 10px; padding-left: 5px; }
.tool-option[data-tool], .property-option[data-property-type] { display: none; }
.tool-option .inline-label { margin-bottom: 0; }
#tile-properties-controls label[for="tilePropertyType"] { font-weight: 500; font-size: 0.85em; }
#tilePropertyType { margin-bottom: 12px; padding: 7px 9px; font-size: 0.9em; }
#tilePropertyOptions { padding-left: 12px; border-left: 2px solid var(--separator-color); margin-top: 12px; margin-left: 4px; }
#tilePropertyOptions select { /* Přesunuto sem pro sjednocení */
    display: block; width: 100%;
    /* padding, font-size, atd. zdědí z obecného select */
    /* Odstraněn !important a testovací border */
}
.property-option h4 { margin-top: 0; font-size: 0.9em; }
.property-option .input-group label { min-width: 100px; font-size: 0.85em; }

/* === Paleta barev (Pravý panel) === */
#palette-container label[for="color-picker"] { font-size: 0.85em; }
#color-picker {
    width: 100%; min-height: 36px; border-radius: var(--border-radius);
    appearance: none; -webkit-appearance: none; padding: 0;
    border: 1px solid var(--input-border); background-color: var(--input-bg);
    cursor: pointer; margin-bottom: 8px;
}
#color-picker::-webkit-color-swatch-wrapper { padding: 4px; }
#color-picker::-webkit-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2); }
#color-picker::-moz-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2); padding: 4px; }
.palette-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    gap: 3px; padding: 6px; background-color: rgba(0,0,0,0.2);
    border-radius: var(--border-radius); border: 1px solid var(--input-border); margin-top: 8px;
}
.color-swatch {
    width: 100%; padding-bottom: 100%; position: relative; border: none;
    border-radius: 4px; cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    overflow: hidden; background-color: transparent;
}
.color-swatch:hover { transform: scale(1.15); z-index: 1; }
.color-swatch.selected {
    box-shadow: 0 0 0 2px var(--button-active-bg), 0 0 0 4px var(--input-bg);
    transform: scale(1.05); z-index: 2;
}
.palette-buttons { margin-top: 8px; gap: 5px; display: grid; grid-template-columns: 1fr 1fr; }

/* === Panel Editoru Dlaždic (Spodní panel) === */
.tile-editor-panel {
    order: 2; flex-shrink: 0; height: var(--tile-editor-panel-height);
    background-color: var(--sidebar-bg); border-radius: var(--border-radius);
    box-shadow: var(--shadow); padding: var(--app-padding);
    display: none; gap: var(--app-gap); overflow: hidden;
    border-top: 1px solid var(--frame-border);
}
.tile-palette-section { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tile-palette-section h3 { margin: 0 0 8px 0; font-size: 0.85em; color: var(--text-color-secondary); text-transform: uppercase; flex-shrink: 0; }
.tile-palette-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-shrink: 0; flex-wrap: wrap; }
.tile-palette-controls .btn-icon { min-width: 34px;  height: 34px; padding: 4px; font-size: 0.9em; }
/* Specifický styl pro tlačítko Nová Dlaždice */
.tile-palette-controls #newTileBtn {
    min-width: 34px; /* Nebo jiná hodnota, např. 32px */
    width: 34px;     /* Nastaví pevnou šířku */
    height: 34px;    /* Nastaví pevnou výšku (stejnou jako šířka) */
    padding: 0;      /* Vynulovat padding, aby ikona mohla být vycentrovaná */
    font-size: 1.2em; /* Mírně větší ikona, aby lépe vyplnila čtverec */
    background-color: var(--button-active-bg); /* Modrá barva pozadí */
    color: var(--button-active-text-color);    /* Barva ikony (typicky bílá) */
    border: 1px solid transparent; /* Můžeš přidat, pokud chceš jiný rámeček */
}

/* Volitelně: Efekt při najetí myší, pokud chceš jiný než defaultní pro .btn-icon */
.tile-palette-controls #newTileBtn:hover {
    background-color: #004ecc; /* Tmavší modrá při hoveru (příklad) */
    border-color: var(--button-active-bg);
}
.tile-palette-controls .btn-tileset-action-long,
.tile-palette-controls .btn-tileset-action {
    min-width: 36px; /* Nebo jiná hodnota, např. stejná jako newTileBtn */
    width: 36px;
    height: 34px;
    padding: 0; /* Resetovat padding */
    gap: 0;     /* Resetovat mezeru, pokud by byla mezi ikonou a skrytým spanem */
}

.tile-palette-controls .btn-tileset-action-long i,
.tile-palette-controls .btn-tileset-action i {
    margin-right: 0; /* Ikona už nepotřebuje margin od textu */
    font-size: 1.1em; /* Můžeš upravit velikost ikony */
}
.import-options { display: flex; align-items: center; gap: 8px; }
#importStrategySelect { margin-bottom: 0; min-width: 140px; }
.import-grid-options { display: inline-flex; align-items: center; gap: 5px; }
.import-grid-options .compact-label { margin-bottom: 0; padding-right: 3px; font-size: 0.85em; color: var(--text-color-secondary); }
.import-grid-options .tile-import-size { width: 45px; padding: 3px 5px; font-size: 0.85em; margin-bottom: 0; text-align: center; }
/* .tile-palette-controls .separator již definováno výše */
.tile-palette-view { flex-grow: 1; overflow-x: auto; overflow-y: hidden; background-color: rgba(0,0,0,0.2); border: 1px solid var(--input-border); border-radius: var(--border-radius); padding: 5px; white-space: nowrap; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg); }
.tile-palette-container { display: inline-flex; gap: 4px; height: 100%; align-items: flex-start; padding-bottom: 5px; }
.tile-thumbnail {
    width: var(--tile-thumbnail-size); height: var(--tile-thumbnail-size);
    border: 2px solid var(--input-border); border-radius: 6px; cursor: pointer; position: relative;
    background-color: #555;
    background-image: linear-gradient(45deg, #888 25%, transparent 25%), linear-gradient(-45deg, #888 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%);
    background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    image-rendering: pixelated; image-rendering: crisp-edges;
    transition: border-color 0.1s, box-shadow 0.1s; overflow: hidden; flex-shrink: 0;
}
.tile-thumbnail canvas { display: block; width: 100%; height: 100%; }
.tile-thumbnail:hover { border-color: var(--button-hover-bg); }
.tile-thumbnail.selected { border-color: var(--button-active-bg); box-shadow: 0 0 0 2px var(--button-active-bg); }
.tile-thumbnail::after {
    content: attr(data-tile-id); position: absolute; bottom: 1px; right: 2px; font-size: 8px;
    color: white; background-color: rgba(0,0,0,0.7); padding: 0 2px; border-radius: 2px;
    pointer-events: none; opacity: 0.7;
}
.tile-thumbnail:hover::after { opacity: 1; }
.tile-editor-section {
    min-width: var(--tile-editor-width); flex-shrink: 0; display: flex; flex-direction: column;
    border-left: 1px solid var(--separator-color); padding-left: var(--app-gap); overflow: hidden;
}
.tile-editor-section h3 {
    margin: 0 0 8px 0; font-size: 0.85em; color: var(--text-color-secondary);
    text-transform: uppercase; flex-shrink: 0; white-space: nowrap;
    display: flex; justify-content: space-between; align-items: center;
}
.tile-editor-controls.unified { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; flex-shrink: 0; }
.tile-editor-name-group { display: flex; width: 100%; align-items: center; gap: 5px; }
.tile-editor-name-group input[type="text"] { flex-grow: 1; padding: 5px 7px; font-size: 0.85em; margin-bottom: 0; text-align: left; }
.tile-editor-name-group .btn-icon { flex-shrink: 0; }
.tile-editor-tools-dimensions-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tile-editor-tools-dimensions-group .btn-icon { min-width: 28px; height: 28px; padding: 4px; font-size: 0.9em; flex-shrink: 0; }
.tile-editor-tools-dimensions-group input[type="color"] {
    min-height: 28px; width: 30px; height: 28px; padding: 1px; margin-bottom: 0; flex-shrink: 0;
    border-radius: var(--border-radius); background-color: var(--input-bg);
    border: 1px solid var(--input-border); cursor: pointer;
    appearance: none; -webkit-appearance: none;
}
.tile-editor-tools-dimensions-group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tile-editor-tools-dimensions-group input[type="color"]::-webkit-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2); }
.tile-editor-tools-dimensions-group input[type="color"]::-moz-color-swatch { border: none; border-radius: calc(var(--border-radius) / 2); }
.tile-editor-tools-dimensions-group .btn-icon.active { background-color: var(--button-active-bg); color: var(--button-active-text-color); }
.tile-editor-tools-dimensions-group .group-separator { /* Specifický group-separator */
     width: 1px; height: 20px; background-color: var(--separator-color); margin: 0 5px; 
}
.tile-editor-tools-dimensions-group label.compact-label { font-size: 0.8em; color: var(--text-color-secondary); margin: 0 0 0 5px; padding: 0; min-width: auto; text-align: left; }
.tile-editor-tools-dimensions-group input.dimension-input { width: 45px; padding: 3px 5px; font-size: 0.85em; margin-bottom: 0; text-align: center; flex-grow: 0; flex-shrink: 0; }
.tile-editor-tools-dimensions-group #resizeTileBtn { margin-left: auto; }
.tile-editor-canvas-wrapper {
    flex-grow: 1; display: flex; justify-content: center; align-items: center;
    background-color: rgba(0,0,0,0.2); border: 1px solid var(--input-border);
    border-radius: var(--border-radius); position: relative; min-height: 80px;
    overflow: hidden; padding: 0px;
}
#tileEditorCanvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background-color: transparent; position: absolute; }
#tileEditorOverlayCanvas { /* Canvas pro mřížku editoru dlaždic */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none; /* Overlay pro mřížku je pasivní */
    /* width a height se nastavují z JS nebo relativně k #tileEditorCanvas */
}
.tile-editor-zoom { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-shrink: 0; }
.tile-editor-zoom label { font-size: 0.8em; margin-bottom: 0; }
.tile-editor-zoom input[type="range"] { flex-grow: 1; margin-bottom: 0; height: 14px; }
.tile-editor-zoom span { font-size: 0.75em; min-width: 30px; text-align: right; }


/* === Spodní Panel pro Editor Animací === */
.bottom-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    left: var(--app-padding); /* Odsazení zleva */
    right: var(--app-padding); /* Odsazení zprava */
    width: auto;
    height: var(--animation-editor-panel-height); max-height: 60vh; /* Omezení výšky */
    background-color: var(--sidebar-bg); border-top: 0px solid var(--separator-color); /* Silnější horní border */
    box-shadow: 0 -3px 10px rgba(0,0,0,0.25); z-index: 1000;
    display: none; flex-direction: column;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%); /* Skrytý dole */
    border-radius: var(--border-radius);
}
.bottom-panel.open { display: flex; transform: translateY(0%); }
.bottom-panel .panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px var(--app-padding); background-color: var(--bg-color); /* Tmavší header */
    border-bottom: 1px solid var(--separator-color); flex-shrink: 0;
}
.bottom-panel .panel-header h3 { margin: 0; font-size: 0.9em; }
.panel-toggle-btn { /* Tlačítko pro otevření/zavření spodního panelu */
    background: none; border: none; color: var(--text-color-secondary);
    font-size: 1.1em; cursor: pointer; padding: 4px;
    border-radius: var(--border-radius); line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.panel-toggle-btn:hover { background-color: var(--button-hover-bg); color: white; }
.bottom-panel .panel-toggle-btn i { transition: transform 0.3s ease; }
.bottom-panel:not(.open) .panel-toggle-btn i.fa-chevron-up { transform: rotate(180deg); }
.bottom-panel.open .panel-toggle-btn i.fa-chevron-up { transform: rotate(0deg); }
.bottom-panel .panel-content {
    flex-grow: 1; padding: calc(var(--app-padding) / 1.5);
    overflow: hidden; /* Hlavní obsah neumožňuje scroll, scroll je na sekcích */
    display: grid;
    grid-template-columns: minmax(240px, 1.8fr) 3fr minmax(220px, 1.2fr); /* Levý, Střední, Pravý */
    gap: calc(var(--app-gap) / 1.5);
}
.character-list-section,
.animation-and-frames-column, /* Nový wrapper pro animace a snímky */
.animation-playback-controls {
    padding: 10px; background-color: rgba(0,0,0,0.1);
    border-radius: var(--border-radius);
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: hidden; /* Každá tato sekce má vlastní scrollbar */
    scrollbar-width: thin;
}
.animation-and-frames-column { overflow: hidden; } /* Zabraňuje dvojitému scrollbaru */
.animation-list-section, .frame-editor-section { overflow-y: hidden; } /* Dovolí obsahu přetékat, rodič ořízne */
.frame-editor-section { flex-grow: 1; min-height: 0; }

.character-list-section h4, .animation-list-section h4, .frame-editor-section h4, .animation-playback-controls h4 {
    margin-top: 8; margin-bottom: 6px; font-size: 0.85em; color: var(--text-color);
    border-bottom: 1px solid var(--separator-color); padding-bottom: 4px;
}
.character-list-section select, .animation-list-section select { margin-bottom: 8px; }
.frame-list-wrapper {
    flex-grow: 1; overflow-x: auto; overflow-y: hidden;
    background-color: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: var(--border-radius); padding: 5px; min-height: 70px; /* Minimální výška pro zobrazení */
    display: flex; align-items: flex-start; /* Zarovnání snímků nahoru */
}
.frame-list { display: inline-flex; gap: 5px; height: 100%; padding-bottom: 0px; } /* padding pro scrollbar */
.frame-item {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* Horizontální centrování pro canvas a číslo snímku */
    
    border: 2px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 4px; 
    background-color: var(--button-bg);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative; /* << DŮLEŽITÉ: Pro absolutní pozicování potomka */
    min-width: 68px; 
    min-height: 90px; /* Příklad výšky, uprav dle potřeby, aby se tam vše vešlo */
                      /* Výška by měla být dostatečná pro canvas, číslo a duration span dole */
    box-sizing: border-box; /* Aby padding neovlivnil celkovou výšku/šířku */
}

.frame-duration-input-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 4px; }
.frame-item-duration-input {
    width: 45px; padding: 2px 4px; font-size: 0.75em; text-align: center;
    border: 1px solid var(--input-border); background-color: var(--input-bg);
    color: var(--text-color); border-radius: 4px;
}
.frame-item-duration-input::-webkit-outer-spin-button,
.frame-item-duration-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.frame-duration-unit { font-size: 0.7em; color: var(--text-color-secondary); margin-left: 2px; }
.frame-item:hover { border-color: var(--button-hover-bg); }
.frame-item.active { border-color: var(--button-active-bg); box-shadow: 0 0 5px var(--button-active-bg); }
.frame-item canvas {
    display: block;
    background-color: var(--canvas-bg);
    image-rendering: pixelated;
    max-width: 56px;
    max-height: 56px;
    border: 1px solid var(--separator-color);
    flex-shrink: 0; 
    margin-bottom: 2px; /* Malá mezera pod canvasem, než začne číslo */
}
.frame-item-info {
    /* margin-top: auto; Tento řádek už není potřeba, pokud canvas má margin-bottom: auto */
    text-align: center;
    width: 100%;
    margin-top: 2px; /* Malá mezera mezi canvasem a textem */
}

.frame-item .frame-number {
    font-size: 0.75em; /* Mírně větší pro lepší čitelnost */
    color: var(--text-color-secondary);
    /* margin-top: 3px; Odstraněno, řeší margin-bottom canvasu */
    line-height: 1.2; /* Trochu více místa pro číslo */
    font-weight: 600; /* Mírně tučnější */
    text-align: center; /* Pro jistotu, i když align-items na rodiči by to měl řešit */
    flex-shrink: 0; 
    /* Tento prvek bude normálně pod canvasem */
}
/* Nový styl pro zobrazení délky snímku */
.frame-item .frame-duration-display {
    position: absolute; /* << Absolutní pozicování vůči .frame-item */
    bottom: 8px;        /* Odsazení od spodního okraje .frame-item (stejné jako padding .frame-item) */
    left: 50%;
    transform: translateX(-50%);         /* Odsazení od levého okraje .frame-item (stejné jako padding .frame-item) */
    text-align: center;
    font-size: 0.75em;
    color: var(--text-color-secondary);
    background-color: rgba(0, 0, 0, 0.2); /* Trochu tmavší pozadí */
    padding: 6px 6px; /* Padding pro text uvnitř */
    border-radius: 5px;
    white-space: nowrap;
    line-height: 1;
}
/* Styly pro aktivní snímek */
.frame-item.active .frame-number {
    color: var(--button-active-text-color);
}
.frame-item.active .frame-duration-display {
    font-weight: normal; /* Číslo snímku má bold, délka nemusí */
    color: var(--button-active-text-color); /* Můžeš ponechat sekundární barvu, pokud je kontrast dostatečný */
    background-color: rgba(0, 0, 0, 0.6); /* Tmavší pozadí pro aktivní */
}
.frame-item.active .frame-number { color: var(--button-active-text-color); font-weight: bold; }
.frame-controls .btn-icon, .animation-playback-controls .button-group .btn-icon { min-width: 32px; height: 32px; font-size: 1em; }
.frame-editor-section .frame-controls {margin-top: 8px; /* Nebo jinou hodnotu, např. var(--app-gap) nebo calc(var(--app-gap) / 1.5) */}
.playback-options-inline-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.playback-options-inline-group .group-separator { color: var(--separator-color); height: 20px; width: 1px; background-color: var(--separator-color); align-self: center; }
.playback-options-inline-group .compact-input-group { display: flex; align-items: center; gap: 5px; margin-bottom: 0; }
.playback-options-inline-group .compact-input-group .compact-label { min-width: auto; margin-bottom: 0; padding-right: 3px; font-size: 0.85em; }
.playback-options-inline-group .compact-input-group input[type="number"] { width: 60px; font-size: 0.9em; padding: 5px 8px; /* Menší padding */ margin-bottom: 0; }
#animationPreviewCanvas {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 140px;
    background-color: var(--canvas-bg); border: 1px solid var(--frame-border);
    image-rendering: pixelated; margin-top: auto; /* Posune dolů v flex kontejneru */
    background-image: linear-gradient(45deg, #555 25%, transparent 25%), linear-gradient(-45deg, #555 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
    background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
/* NPC dialog a další možnosti pro playback controls */
#npcDialogPlaceOptions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--separator-color); }
#npcDialogPlaceOptions label { margin-bottom: 4px; font-size: 0.85em; }
#npcDialogPlaceOptions textarea { font-size: 0.85em; padding: 5px 7px; text-align: left; /* Pro dialog je lepší zarovnání doleva */ }

/* === Modální okna === */
.modal {
    display: none; position: fixed; z-index: 1050;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.6);
    align-items: center; justify-content: center;
}
.modal.show { display: flex; }
.modal-content {
    background-color: var(--sidebar-bg); margin: auto; padding: 20px 25px;
    border: 1px solid var(--frame-border); border-radius: var(--border-radius);
    width: 90%; max-width: 480px; box-shadow: var(--shadow);
    position: relative; color: var(--text-color);
    display: flex; flex-direction: column;
}
.modal-content h3 {
    margin-top: 0; margin-bottom: 1.2em; font-size: 1.3em; color: var(--text-color-header);
    border-bottom: 1px solid var(--separator-color); padding-bottom: 0.6em; text-align: center;
}
.modal-close-btn {
    color: var(--text-color-secondary); font-size: 28px; font-weight: bold;
    position: absolute; top: 10px; right: 15px; line-height: 1;
    padding: 0; background: none; border: none; cursor: pointer;
}
.modal-close-btn:hover, .modal-close-btn:focus { color: var(--text-color); text-decoration: none; }
#newLevelForm { display: flex; flex-direction: column; gap: 15px; }
#newLevelForm .input-group label { text-align: center; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-secondary); min-width: auto; }
#newLevelForm .input-group input[type="text"],
#newLevelForm .input-group input[type="number"] { width: 100%; text-align: center; } /* Inputy v modálu centrovány */
.dimensions-group { display: flex; gap: 10px; }
.dimensions-group .input-group.compact-group { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
.dimensions-group .input-group.compact-group label { text-align: left; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-secondary); min-width: auto; }
.dimensions-group .input-group.compact-group input[type="number"] { width: 100%; text-align: center; }
.modal-buttons { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
.modal-buttons .btn { min-width: 150px; padding-top: 10px; padding-bottom: 10px; }
/* Uvítací modál specifické styly */
.modal.welcome-modal .modal-content { max-width: 520px; }
.welcome-modal .modal-buttons #submitNewLevelModalBtn:only-child { min-width: 250px; }
.welcome-modal-header { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--separator-color); }
.welcome-modal-header h2 { font-size: 1.5em; margin-bottom: 10px; }
.welcome-modal-header p { font-size: 0.95em; color: var(--text-color-secondary); margin-bottom: 8px; }
.welcome-modal-header p.help-text { font-size: 0.85em; font-style: italic; }
.welcome-modal-header p.help-text i { margin-right: 4px; color: var(--button-active-bg); }
.modal .hidden-for-first-level { display: none !important; }


/* === Level Map - Ovládací prvky pro změnu rozměrů a kotvy === */
.map-dimension-interactive-control { /* Toto je v levém panelu pro mapu levelů */
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.map-dimension-interactive-control label { margin-bottom: 0; min-width: 90px; text-align: right; padding-right: 5px; font-size: 0.85em; flex-shrink: 0; }
.map-dimension-interactive-control .btn-icon { min-width: 28px; height: 28px; padding: 4px; font-size: 0.9em; flex-shrink: 0; }
.map-dimension-interactive-control .dimension-input-control { width: 55px; text-align: center; padding: 5px 6px; font-size: 0.85em; margin: 0; }
/* Pro kotvy v dialogu změny velikosti mapy */
.map-dimension-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.map-dimension-target-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.map-dimension-target-control label { margin-bottom: 0; min-width: 60px; text-align: right; padding-right: 10px; font-size: 0.85em; flex-shrink: 0;}
.map-dimension-target-control .dimension-input-control { width: 60px; text-align: center; font-size: 0.9em; margin: 0; }
.anchor-button-group { display: flex; gap: 4px; }
.anchor-button-group .btn-icon.anchor-btn {
    min-width: 32px; height: 32px; padding: 5px; font-size: 0.9em;
    background-color: var(--button-bg); color: var(--text-color-secondary);
    border: 1px solid var(--input-border);
}
.anchor-button-group .btn-icon.anchor-btn:hover { background-color: var(--button-hover-bg); color: var(--text-color); }
.anchor-button-group .btn-icon.anchor-btn.active {
    background-color: var(--button-active-bg); color: var(--button-active-text-color);
    border-color: var(--button-active-bg); box-shadow: 0 0 3px var(--button-active-bg);
}
.anchor-button-group .btn-icon.anchor-btn.active i { color: var(--button-active-text-color); }


/* === Herní Režim - Styly === */
.app-wrapper.game-active .app-container,
.app-wrapper.game-active .bottom-panel,
.app-wrapper.game-active #canvasWrapper { display: none !important; }
.app-wrapper.game-active #gameView { display: flex !important; }
.game-active .header-controls .header-left,
.game-active .header-controls .header-center,
.game-active .header-controls .header-right .history-ops,
.game-active .header-controls .header-right .header-separator { display: none !important; }
.game-active .header-controls {
    justify-content: flex-end; background-color: transparent; border-bottom: none;
}
.game-active .header-controls .header-right .game-ops { display: flex !important; }
#gameView {
    display: none; position: absolute;
    top: var(--header-height); left: 0; right: 0; bottom: 0;
    background-color: var(--default-level-bg-color);
    justify-content: center; align-items: center;
    z-index: 1500; transition: background-color 0.3s ease; top: calc(var(--header-height) + 15px);
}
#gameCanvas {
    border: none; background-color: transparent;
    image-rendering: pixelated; image-rendering: crisp-edges;
}
#gameUI {
    position: absolute; top: 10px; left: 10px; color: white;
    font-size: 16px; text-shadow: 1px 1px 2px black;
    pointer-events: none; z-index: 1501;
}
#subtitleArea {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    background-color: rgba(0,0,0,0.75); color: #fff; padding: 10px 20px;
    border-radius: var(--border-radius); font-size: 1.1em; max-width: 70%;
    text-align: center; z-index: 1600; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Změna transition pro visibility */
    font-family: 'PixelFont', monospace; /* Placeholder pro pixel font */
     -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never;
    pointer-events: none;
}
#subtitleArea.show { opacity: 1; visibility: visible; transition-delay: 0s; }
#subtitleArea p { margin: 0; line-height: 1.4; }


/* === Informační box a Donate sekce v levém (kontextovém) menu === */
.info-box-main-menu {
    padding: 15px; margin-bottom: 15px; background-color: var(--content-bg);
    border: 1px solid var(--separator-color); border-radius: var(--border-radius);
    text-align: left; display: none; /* JS ovládá přes .visible */
}
.info-box-main-menu.visible { display: block; }
.info-box-main-menu h4 {
    color: var(--text-color-header); font-size: 1.1em; margin-top: 0; margin-bottom: 10px;
    border-bottom: 1px solid var(--separator-color); padding-bottom: 8px;
}
.info-box-main-menu p { font-size: 0.88em; line-height: 1.45; margin-bottom: 8px; color: var(--text-color-secondary); }
.info-box-main-menu p.help-text { font-size: 0.8em; font-style: normal; margin-top: 12px; }
.info-box-main-menu p i { margin-right: 5px; color: var(--button-active-bg); width: 16px; text-align: center; }
.donate-section-main-menu {
    padding: 15px; text-align: center; border-top: 1px solid var(--separator-color);
    margin-top: auto; flex-shrink: 0;
}
.donate-section-main-menu p { font-size: 0.85em; color: var(--text-color-secondary); margin-bottom: 10px; line-height: 1.4; }
.donate-button { /* Společné pro obě donate sekce */
    display: inline-flex; justify-content: center; align-items: center;
    width: 100%; margin-top: 5px; padding: 8px 10px; font-size: 0.9em;
    text-decoration: none;
}
.donate-button i { margin-right: 8px; }
.btn.btn-patreon { background-color: #f96854; color: white; } /* Příklad */
.btn.btn-patreon:hover { background-color: #e6523e; }

/* === Globální Menu === */
.global-main-menu {
    position: fixed; top: 0; left: 0; width: 320px; height: 100vh;
    background-color: var(--sidebar-bg); z-index: 2000;
    transform: translateX(-100%); transition: transform 0.3s ease-in-out;
    box-shadow: 3px 0 15px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
}
.global-main-menu.open { transform: translateX(0); }
.global-menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(var(--app-padding) / 1.5) var(--app-padding);
    border-bottom: 1px solid var(--separator-color); flex-shrink: 0;
}
.global-menu-header h2 { margin: 0; font-size: 1.1em; color: var(--text-color-header); }
.global-menu-header #closeGlobalMainMenuBtn {
    background: transparent; border: none; color: var(--text-color-secondary);
    font-size: 1.5em; padding: 5px; line-height: 0; cursor: pointer;
}
.global-menu-header #closeGlobalMainMenuBtn:hover { color: var(--text-color-header); }
.global-main-menu nav { flex-grow: 1; overflow-y: auto; padding: var(--app-padding) 0; }
.global-main-menu nav ul { list-style: none; padding: 0; margin: 0; }
.global-main-menu nav li a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--app-padding); text-decoration: none;
    color: var(--text-color-secondary);
    transition: background-color 0.2s, color 0.2s;
    border-left: 4px solid transparent; margin-bottom: 2px;
}
.global-main-menu nav li a:hover { background-color: var(--button-hover-bg); color: var(--text-color-header); }
.global-main-menu nav li a.active-menu-item {
    background-color: var(--button-active-bg); color: var(--button-active-text-color);
    border-left-color: var(--button-active-text-color); font-weight: 600;
}
.global-main-menu nav li a i { width: 22px; text-align: center; font-size: 0.95em; margin-right: 5px; }
.global-main-menu nav hr { border: none; border-top: 1px solid var(--separator-color); margin: 12px var(--app-padding); }
.donate-section-global-menu { /* Donate v globálním menu */
    padding: var(--app-padding); text-align: center;
    border-top: 1px solid var(--separator-color);
    margin-top: auto; flex-shrink: 0; background-color: var(--bg-color);
}
.donate-section-global-menu p { font-size: 0.85em; color: var(--text-color-secondary); margin-bottom: 10px; line-height: 1.4; }
.donate-section-global-menu .donate-button { width: auto; padding: 10px 25px; /* Užší, pokud je auto width */ }
.global-menu-footer {
     padding: 10px var(--app-padding); text-align: center; font-size: 0.75em;
     color: var(--text-color-secondary); border-top: 1px solid var(--separator-color);
     flex-shrink: 0; margin-top: auto; /* Přilepí dolů, pokud není donate sekce */
}

.app-overlay-for-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10,10,11,0.8); z-index: 1999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.app-overlay-for-menu.open { opacity: 1; pointer-events: auto; }

/* Skrytí panelů a tlačítek v určitých pohledech */
.app-container.view-levelMap-fullscreen #toggleLeftPanelBtn,
.app-container.view-levelMap-fullscreen #mainMenu {
    display: none !important;
    /* Pokud bys chtěl animované skrytí: */
    /* transform: translateX(var(--sidebar-left-total-offset)) !important;
    width: 0 !important; min-width: 0 !important; padding: 0 !important;
    margin-left: calc(-1 * var(--app-gap)) !important;
    border: none !important; box-shadow: none !important; overflow: hidden !important; */
}

/* === Splash Screen === */
.splash-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--bg-color);
    background-image: url('img/pixid_bg.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; justify-content: center; align-items: center;
    z-index: 3000; color: var(--text-color-header); text-align: center;
    opacity: 1; visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Visibility až po opacity */
}
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content {
    background-color: rgba(0, 0, 0, 0.75); /* var(--content-bg) s alpha */
    padding: 30px 40px; border-radius: var(--border-radius);
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    max-width: 550px; width: 90%;
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--input-border-splash);
}
.splash-logo { max-width: 150px; height: auto; margin-bottom: 25px; /* Zvětšeno z 20px */ }
.splash-content h1 { font-size: 2em; margin-bottom: 15px; /* Zmenšeno z 2.2em */ }
.splash-intro { 
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular); /* Běžná váha pro delší text */
    line-height: var(--line-height-relaxed); /* Větší výška řádku pro čitelnost */
    color: var(--text-color-secondary); 
    line-height: 1.6; 
    margin-bottom: 30px; /* Zmenšeno z 1.1em */
}
.splash-actions {
    display: grid;
    grid-template-columns: 1fr; /* Každý potomek se pokusí zabrat plnou šířku */
    gap: 15px;
    margin-bottom: 30px;
    /* Volitelně: Omez maximální šířku tohoto kontejneru,
       aby tlačítka nebyla příliš široká na velkých obrazovkách.
       Například: */
    max-width: 220px; /* Nebo šířka, která odpovídá Google tlačítku */
    margin-left: auto;  /* Vycentruje kontejner .splash-actions uvnitř .splash-content */
    margin-right: auto; /* Vycentruje kontejner .splash-actions uvnitř .splash-content */
}
.splash-btn { 
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);   /* 14px */
    font-weight: var(--font-weight-medium); /* Tlačítka jsou často medium */
    padding: 12px 20px;
}
/* Kontejner Google tlačítka */
.splash-actions .g_id_signin {
    width: 100%; /* Kontejner Google tlačítka se roztáhne */
    display: flex;
    justify-content: center; /* Pro případ, že by se vnitřní Google tlačítko samo neroztáhlo */
    border-radius: var(--border-radius);
    overflow: hidden; /* Aby vnitřní Google tlačítko respektovalo zakulacení kontejneru */
    box-sizing: border-box;
}

splash-actions #continueAsGuestBtn {
    width: 200px; /* Roztáhne se na šířku gridové buňky */
    box-sizing: border-box; /* Padding a border se započítají do šířky */
    /* Zde ponech/uprav padding a další styly, aby vizuálně ladilo s výškou Google tlačítka */
    /* padding: 12px 20px;  <-- Už máš v .splash-btn */
    /* font-size: var(--font-size-sm); <-- Už máš v .splash-btn */
    /* Výška se přizpůsobí, ale můžeš experimentovat s min-height nebo line-height,
       pokud by se výšky lišily. Google tlačítko s data-size="large" má cca 40px. */
}
.splash-btn.btn-google { background-color: #4285F4; color: white; }
.splash-btn.btn-google:hover { background-color: #3578E5; }
.splash-btn.btn-google i { margin-right: 10px; }
.splash-btn.btn-guest { background-color: var(--button-bg); color: var(--button-text-color); border: 1px solid var(--input-border); }
.splash-btn.btn-guest:hover { background-color: var(--button-hover-bg); color: var(--text-color-header); }
.guest-note { 
    font-size: var(--font-size-xs); /* 12px, menší text */
    font-weight: var(--font-weight-regular);
    opacity: 0.8;
    display: block;
    margin-top: 3px; 
}
.splash-support { 
    margin-top: 25px; 
    padding-top: 25px; 
    border-top: 1px solid var(--separator-color); 
}
.splash-support p {
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-regular);
    color: var(--text-color-secondary);
    margin-bottom: 15px; 
}
.splash-btn.btn-coffee {
    background-color: #FFDD00; color: #000000;
    display: inline-flex; width: auto; padding: 10px 25px;
    text-decoration: none; /* Odstranění podtržení */
}
.splash-btn.btn-coffee:hover { background-color: #fbc531; }
.splash-btn.btn-coffee i { margin-right: 8px; }
.splash-version { 
    font-size: var(--font-size-xs); /* 12px */
    font-weight: var(--font-weight-regular);
    color: var(--text-color-secondary);
    opacity: 0.7; /* Ještě méně výrazné */
    margin-top: 20px; 
}
/* === Level Map Zoom Overlay (Plovoucí Lupa/Ovládání Zoomu) === */
.level-map-zoom-overlay {
    position: absolute;
    bottom: 20px; /* Odsazení od spodního okraje #mainContent */
    left: 50%;
    transform: translateX(-50%); /* Vycentrování horizontálně */
    z-index: 100; /* Nad canvasem mapy, ale pod modály apod. */

    background-color: rgba(0, 0, 0, 0.25); /* Tmavší a méně průhledné pro lepší čitelnost, např. var(--bg-color) s alpha */
    backdrop-filter: blur(6px); /* Rozmazání pozadí pod lištou */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px; /* Plně zakulacené konce pro výšku 50px */
    box-shadow: var(--shadow); /* Použití globálního stínu */

    display: flex;
    align-items: center;
    /* Padding a width se mění pro collapsed/expanded stav */
    padding: 5px; /* Výchozí padding pro sbalený stav */
    
    /* Přechody pro plynulé rozbalení/sbalení */
    transition-property: width, padding, background-color; /* Přidáno vše, co se animuje */
    transition-duration: 0.3s; /* Rychlost animace */
    transition-timing-function: ease-in-out;
    
    overflow: hidden; /* Důležité pro animaci šířky a skrytí obsahu */
    height: 50px;     /* Pevná výška lišty */
    box-sizing: border-box; /* Aby padding neovlivnil celkovou výšku/šířku */
}

/* Sbalený stav - jen ikona lupy */
.level-map-zoom-overlay.collapsed {
    width: 50px; /* Šířka jen pro toggle tlačítko */
    padding: 5px; /* Padding pro sbalený stav */
    justify-content: center; /* Vycentruje toggle tlačítko (pokud je viditelné) */
}

.level-map-zoom-overlay.collapsed .lm-zoom-controls-panel {
    display: none !important; /* Ovládací prvky jsou důležitě skryté */
}

.level-map-zoom-overlay.collapsed .lm-zoom-toggle-btn {
    display: inline-flex !important; /* Toggle tlačítko je viditelné, když je sbaleno */
}


/* Rozbalený stav (když NENÍ .collapsed NEBO při :hover na sbalenou) */
.level-map-zoom-overlay:not(.collapsed),
.level-map-zoom-overlay:hover:not(.game-active .level-map-zoom-overlay) { /* Roztáhne se i při hoveru, pokud není hra aktivní */
    width: 420px; /* Cílová šířka rozbalené lišty */
    padding: 5px 5px; /* Větší padding pro rozbalený stav */
    justify-content: space-between; /* Rozmístí prvky v rozbalené liště */
}

.level-map-zoom-overlay:not(.collapsed) .lm-zoom-controls-panel,
.level-map-zoom-overlay:hover:not(.game-active .level-map-zoom-overlay) .lm-zoom-controls-panel {
    display: flex !important; /* Ovládací prvky jsou viditelné */
    align-items: center;
    gap: 10px;
    width: 100%; /* Panel s kontrolami zabere celou šířku rozbalené lišty */
}

/* Toggle tlačítko (malá lupa, která může být viditelná ve sbaleném stavu) */
.lm-zoom-toggle-btn { 
    background-color: transparent;
    border: none;
    color: var(--text-color); /* Použít globální barvu textu */
    font-size: 1.3em; /* Velikost ikony */
    padding: 8px;     /* Klikací plocha */
    min-width: 38px;  /* Stejné jako výška pro kruhový vzhled */
    height: 38px;
    border-radius: 50%; /* Kulaté */
    display: inline-flex; /* Výchozí stav, pokud není .collapsed */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.lm-zoom-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0);
}

/* Skrýt samostatné toggle tlačítko, když je panel rozbalený (protože už jsou vidět hlavní ovládací prvky) */
.level-map-zoom-overlay:not(.collapsed) .lm-zoom-toggle-btn,
.level-map-zoom-overlay:hover:not(.game-active .level-map-zoom-overlay) .lm-zoom-toggle-btn {
    display: none !important; 
}

/* Styly pro ovládací prvky uvnitř .lm-zoom-controls-panel */
.lm-zoom-controls-panel .btn-icon { /* Tlačítka +,-,reset */
    background-color: rgba(255, 255, 255, 0); /* Lehce viditelné pozadí - MÍRNĚ JINÉ NEŽ JSI POSLAL MINULE */
    color: var(--text-color); /* Barva ikony/textu */
    border: 1px solid rgba(255, 255, 255, 0); /* Jemný rámeček - MÍRNĚ JINÉ */
    min-width: 36px; 
    height: 36px;
    border-radius: 18px; 
    padding: 6px; 
}

.lm-zoom-controls-panel .btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.1); 
    border-color: rgba(255, 255, 255, 0); /* MÍRNĚ JINÉ */
}

.lm-zoom-controls-panel .btn-icon i {
    font-size: 1em; /* Velikost ikon v tlačítkách */
}

/* Kontejner pro slider a jeho textovou hodnotu */
.lm-zoom-slider-container {
    flex-grow: 1; /* Aby zabral co nejvíce místa */
    display: flex;
    align-items: center;
    gap: 8px; /* Mezera mezi sliderem a textem */
    margin: 0 5px; /* Malý margin po stranách */
}

#lmZoomSlider { /* Samotný range input */
    flex-grow: 1;
    height: 4px; /* Mírně tlustší pro lepší interakci */
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.5); /* Tmavší pozadí pro lepší kontrast thumbu */
    border-radius: 2px; /* Zakulacení tracku */
    outline: none;
    cursor: pointer;
}

#lmZoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;   /* Velikost thumbu */
    height: 16px;
    background: var(--button-active-bg); /* Aktivní barva */
    border-radius: 50%; /* Kulatý thumb */
    cursor: pointer;
    border: 2px solid var(--input-bg); /* Rámeček kolem thumbu pro kontrast */
    margin-top: -6px; /* Vertikální zarovnání thumbu na tracku (výška thumbu - výška tracku) / 2 */
}

#lmZoomSlider::-moz-range-thumb { /* Pro Firefox */
    width: 16px;
    height: 16px;
    background: var(--button-active-bg);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--input-bg);
}
#lmZoomSlider::-moz-range-track { /* Pro Firefox - pro konzistenci vzhledu tracku */
    background: rgba(0, 0, 0, 0.5);
    height: 4px;
    border-radius: 2px;
}


/* Zobrazení hodnoty zoomu v procentech */
.lm-zoom-value-display {
    color: var(--text-color-secondary);
    font-size: 0.85em; /* Mírně větší */
    min-width: 40px;  /* Aby se vešlo "100%" */
    text-align: right;
    font-variant-numeric: tabular-nums; /* Pro konzistentní šířku čísel */
}

/* Notifikace */
#notification { position: fixed; top: var(--app-padding); left: 50%; transform: translateX(-50%); background-color: var(--button-success-bg); color: #ffffff; padding: 10px 20px; border-radius: var(--border-radius); z-index: 2000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease; pointer-events: none; box-shadow: var(--shadow); font-size: 0.95em; max-width: 80%; text-align: center; white-space: normal; }
#notification.show { opacity: 1; transform: translateX(-50%) translateY(0); /* Posun z výchozí pozice, která je skrytá */ }
#notification.error { background-color: var(--button-danger-bg); }

.bottom-panel { /* Cílíme na #animationEditorPanel přes jeho třídu */
    position: fixed; 
    bottom: var(--bottom-panel-offset); /* Použijeme novou proměnnou, např. 10px */
    left: var(--app-padding);  /* Odsazení jako boční panely */
    right: var(--app-padding); /* Odsazení jako boční panely */
    width: auto; /* Šířka se přizpůsobí mezi left a right paddingy */
    
    height: var(--new-animation-panel-height); /* Použijeme novou proměnnou pro výšku */
    max-height: 45vh; /* Můžeš ponechat nebo upravit */

    background-color: var(--sidebar-bg); 
    border: 0px solid var(--separator-color); 
    box-shadow: var(--shadow); 
    z-index: 1000;
    display: none; 
    flex-direction: column;
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out, bottom 0.3s ease-in-out;
    /* Transformace pro skrytí musí zohlednit nové odsazení 'bottom' */
    transform: translateY(calc(100% + var(--bottom-panel-offset) + 5px)); /* Přidáno 5px pro jistotu, aby se skryl i border */
    border-radius: var(--border-radius); 
}

.bottom-panel.open {
    transform: translateY(0%);
    display: flex;
}

/* Header spodního panelu - pokud ho chceš zachovat */
.bottom-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px var(--app-gap); /* Menší padding pro header */
    background-color: var(--bg-color);
    border-bottom: 0px solid var(--separator-color);
    flex-shrink: 0;
    border-top-left-radius: var(--border-radius); /* Aby ladil s panelem */
    border-top-right-radius: var(--border-radius);
}
.bottom-panel .panel-header h3 {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color-header);
}

/* Obsah spodního panelu */
.bottom-panel .panel-content {
    flex-grow: 1; 
    padding: calc(var(--app-gap) / 2); /* Menší padding uvnitř .panel-content, např. 5px */
    overflow: hidden; 
    display: grid;
    /* Tři sloupce s pevnými šířkami pro krajní a flexibilní střed */
    grid-template-columns: 
        var(--animation-management-width) /* Pevná šířka pro levý sloupec */
        1fr                             /* Střední sloupec zabere zbytek */
        var(--animation-playback-width);  /* Pevná šířka pro pravý sloupec */
    gap: var(--app-gap); 
}

/* Styly pro jednotlivé sloupce, pokud jsou potřeba další úpravy */
.animation-management-column,
.frame-timeline-column,
.animation-playback-controls {
    display: flex;
    flex-direction: column;
    /* gap už je nastaven v HTML mezi podsekcemi (margin-top) nebo není potřeba */
    overflow-y: hidden;   
    scrollbar-width: thin;
    background-color: rgba(0, 0, 0, 0); 
    border-radius: var(--border-radius);
    padding: calc(var(--app-padding) / 2.5); /* Vnitřní padding sloupců */
}

/* Nadpisy uvnitř sloupců - menší horní margin */
.animation-management-column h4,
.frame-timeline-column h4,
.animation-playback-controls h4 {
    margin-top: 0; /* Vynulovat horní margin nadpisu */
    margin-bottom: 8px; /* Mezera pod nadpisem */
    font-size: 0.85em; 
    color: var(--text-color);
    border-bottom: 1px solid var(--separator-color); 
    padding-bottom: 0px;
}
.animation-management-column .animation-list-section h4,
.frame-timeline-column .frame-editor-section h4,
.animation-playback-controls h4 {
    margin-top: 0; /* Už je pokryto obecnějším pravidlem výše */
}


/* Zajistíme, aby se timeline správně roztahovala */
.frame-timeline-column { /* Sloupec obsahující timeline */
    min-width: 0; /* Důležité pro flexibilní grid itemy */
}
.frame-timeline-column .frame-editor-section {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    min-height: 0; 
}
.frame-timeline-column .frame-list-wrapper {
    flex-grow: 1; 
    min-height: 100px; /* Uprav dle potřeby */
}

/* Levý sloupec pro animace */
.animation-management-column {
    flex-shrink: 0; /* Aby se nesmrskl pod --animation-management-width */
}

/* Pravý sloupec pro přehrávání */
.animation-playback-controls {
    flex-shrink: 0; /* Aby se nesmrskl pod --animation-playback-width */
}

/* Odsazení tlačítek pod timeline, pokud je potřeba */
.frame-editor-section .frame-controls {
    margin-top: var(--app-gap); 
}
.character-frame-dimensions-group.input-group {
    display: flex;
    align-items: center;
    gap: var(--app-gap); /* Mezera mezi párem Šířka a párem Výška */
    flex-wrap: nowrap; /* Zabrání zalomení, pokud by nebylo místo (raději ať se přizpůsobí šířka inputů) */
}

.dimension-input-pair {
    display: flex;
    align-items: center;
    gap: 5px; /* Mezera mezi labelem a inputem */
}

.dimension-input-pair label.compact-label {
    margin-bottom: 0; /* Odstraní výchozí margin labelu */
    min-width: auto; /* Povolí labelu být užší */
    text-align: left; /* Pokud byl text-align: right z .input-group label */
    padding-right: 0; /* Pokud měl padding */
}

.dimension-input-pair input[type="number"] {
    margin-bottom: 0; /* Odstraní výchozí margin inputu */
    width: 55px;      /* Pevná šířka pro inputy rozměrů, uprav podle potřeby */
    flex-grow: 0;     /* Zabrání roztahování inputu */
    flex-shrink: 0;   /* Zabrání smrsknutí inputu */
}

/* === DELETE LEVEL ACTION OVERLAY === */
.delete-level-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    
    display: flex;
    align-items: center;
    height: 48px; /* Výška pro sbalený i rozbalený stav */
    box-sizing: border-box;
    
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    border-radius: 24px; /* Půlka výšky */
    
    overflow: hidden; /* Důležité pro animaci šířky */

    /* Výchozí stav pro skrytí (JavaScript přidá .visible) */
    opacity: 0;
    transform: translateY(15px) scale(0.9);
    pointer-events: none;
    
    /* Přechody pro zobrazení a pro změnu šířky při hoveru */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.delete-level-overlay.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Sbalený stav (jen ikona) */
.delete-level-overlay.collapsed {
    width: 48px; /* Šířka se rovná výšce pro kruh */
    padding: 0;  /* Žádný padding, ikona se centruje uvnitř svého kontejneru */
    justify-content: center; /* Centruje delete-level-icon-container */
}

.delete-level-overlay.collapsed .delete-level-confirm-button {
    display: none; /* Textové tlačítko je úplně skryté */
}

.delete-level-overlay.collapsed .delete-level-icon-container {
    display: flex; /* Zobrazit kontejner s ikonou */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Kontejner pro ikonu (když je overlay sbalený) */
.delete-level-icon-container {
    font-size: 1.2rem; /* Velikost ikony */
    color: #ffffff; /* Červená barva ikony */
    transition: color 0.2s;
}
.delete-level-overlay.collapsed:hover .delete-level-icon-container {
    color: white; /* Změna barvy ikony při najetí na sbalený overlay */
}


/* Rozbalený stav (při hover na sbalený a viditelný overlay) */
.delete-level-overlay.visible.collapsed:hover {
    width: auto; /* Šířka se přizpůsobí obsahu (tlačítku) */
    min-width: 48px; /* Alespoň šířka ikony */
    padding: 6px;    /* Padding pro rozbalený stav */
    justify-content: flex-start; /* Obsah zarovnat doleva */
}

.delete-level-overlay.visible.collapsed:hover .delete-level-icon-container {
    display: none; /* Skrýt samostatnou ikonu, když se zobrazí celé tlačítko */
}

.delete-level-overlay.visible.collapsed:hover .delete-level-confirm-button {
    display: inline-flex !important; /* Zobrazit celé tlačítko */
    opacity: 0; /* Pro animaci */
    transform: translateX(5px); /* Pro animaci */
    animation: revealConfirmButton 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards; /* Zpožděná animace */
}

@keyframes revealConfirmButton {
    from { opacity: 0; transform: translateX(5px); } /* Začíná mírně vpravo */
    to { opacity: 1; transform: translateX(0); }
}

/* Potvrzovací tlačítko (celý rozbalený panel je nyní klikatelný) */
.delete-level-confirm-button {
    /* Reset vzhledu prohlížeče pro <button> */
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    text-decoration: none; box-shadow: none;
    margin: 0; /* Odstranit výchozí margin tlačítka */

    /* Layout a rozměry */
    display: inline-flex; 
    align-items: center;
    justify-content: center; 
    flex-grow: 1; /* Vyplní dostupný prostor v overlayi */
    height: 100%; /* Vyplní výšku overlaye (po odečtení paddingu overlaye) */
    padding: 0 12px 0 10px; /* Vertikální padding 0, horizontální pro text a ikonu */
    border-radius: calc(24px - 6px); /* (radius overlaye - padding overlaye) */
    white-space: nowrap;   
    text-indent: 0; 
    overflow: hidden; /* Text se ořízne, pokud by byl příliš dlouhý (měl by se vejít) */
    cursor: pointer;
    
    /* Písmo */
    font-family: var(--font-primary, "Roboto", sans-serif); 
    font-size: 0.875rem;  /* cca 14px */
    font-weight: var(--font-weight-medium, 500);
    
    /* Barvy */
    color: white; 
    background-color: var(--button-danger-bg, #D32F2F); 
    border: 1px solid transparent; /* Může být i border-color: var(--button-danger-bg); */

    transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}

.delete-level-confirm-button:hover {
    background-color: var(--button-danger-hover-bg, #B71C1C);
    border-color: var(--button-danger-hover-bg, #B71C1C); /* Pokud má border */
    /* transform: scale(1.02);  Volitelné, může kolidovat s transformací rodiče */
}

.delete-level-confirm-button .fa-trash-alt { /* Ikona uvnitř tlačítka */
    margin-right: 8px;
    font-size: 0.95em; /* Mírně větší než u předchozí verze */
    color: white; /* Ikona bude vždy bílá */
}


.character-editor-menu .input-group { /* Nebo obecně .input-group, pokud to chceš všude */
    display: flex;
    align-items: center; /* Vertikální zarovnání */
    gap: 8px; /* Mezera mezi labelem a inputem */
    margin-bottom: 12px; /* Větší mezera pod skupinou */
}

.character-editor-menu .input-group label {
    flex-basis: 140px; /* Pevná šířka pro label, uprav podle potřeby */
    flex-shrink: 0;
    text-align: right; /* Zarovnání textu labelu doprava */
    margin-bottom: 0; /* Odebrat výchozí margin, pokud ho label má */
    font-size: 0.85em; /* Menší font pro popisky */
}

.character-editor-menu .input-group input[type="number"] {
    flex-grow: 1; /* Input zabere zbytek místa */
    width: auto; /* Přepsat případnou fixní šířku z obecných stylů */
    max-width: 100px; /* Omezit maximální šířku inputu */
    text-align: center;
}
.splash-privacy-link {
    font-size: var(--font-size-xs); /* 12px, menší text */
    color: var(--text-color-secondary);
    margin-top: 20px; /* Mezera nad odkazem */
    margin-bottom: 5px; /* Menší mezera pod odkazem, před .splash-support */
    text-align: center;
    opacity: 0.9;
}

.splash-privacy-link a {
    color: yellow; /* Použij barvu aktivního tlačítka pro odkaz */
    text-decoration: underline;
    transition: color var(--transition-speed);
}

.splash-privacy-link a:hover {
    color: var(--text-color-header); /* Barva při najetí */
    text-decoration: none;
}

/* === Nápověda Modál === */
.modal.help-modal .modal-content {
    max-width: 90vw;
    width: 800px;
    height: 85vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    border-radius: 12px; /* Například 12px, nebo použij CSS proměnnou */
    overflow: hidden;    /* Důležité, aby vnitřní obsah respektoval zaoblení */
    /* Můžeš také zvážit zaoblení jen horních rohů hlavičky a dolních rohů těla,
       ale overflow: hidden na .modal-content je často jednodušší. */
}

.modal.help-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--separator-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal.help-modal .modal-header h3 {
    margin: 0;
    border-bottom: 0px solid var(--separator-color);
    font-size: 1.6em;
}

.modal.help-modal .modal-body.help-modal-body {
    padding: 0;
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

.help-sidebar {
    width: 200px;
    flex-shrink: 0;
    background-color: var(--content-bg); /* Pozadí sidebar */
    border-right: 1px solid var(--separator-color);
    padding: 15px;
    overflow-y: auto;

    /* Scrollbar pro Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) transparent; /* Jezdec a průhledné pozadí tracku */
}

/* Scrollbar pro WebKit (Chrome, Safari, Edge, Opera) pro .help-sidebar */
.help-sidebar::-webkit-scrollbar {
    width: 8px;
}

.help-sidebar::-webkit-scrollbar-track {
    background: transparent; /* Průhledné pozadí tracku */
}

.help-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid transparent; /* Vytvoří malý "padding" kolem jezdce */
    background-clip: content-box;  /* Zajistí, že border je vně barvy jezdce */
}

.help-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}

.help-sidebar h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.9em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.help-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-sidebar ul li a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--text-color-secondary);
    border-radius: var(--border-radius);
    margin-bottom: 3px;
    font-size: 0.95em;
    transition: background-color 0.2s, color 0.2s;
}

.help-sidebar ul li a:hover {
    background-color: var(--button-hover-bg);
    color: var(--text-color-header);
}

.help-sidebar ul li a.active-help-topic {
    background-color: var(--button-active-bg);
    color: var(--button-active-text-color);
    font-weight: 500;
}

.help-content-area {
    flex-grow: 1;
    padding: 20px 25px;
    overflow-y: auto;
    background-color: var(--content-bg); /* Pozadí hlavní obsahové části - důležité pro vzhled průhledného tracku */

    /* Scrollbar pro Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) transparent; /* Jezdec a průhledné pozadí tracku */
}

/* Scrollbar pro WebKit (Chrome, Safari, Edge, Opera) pro .help-content-area */
.help-content-area::-webkit-scrollbar {
    width: 8px;
}

.help-content-area::-webkit-scrollbar-track {
    background: transparent; /* Průhledné pozadí tracku */
}

.help-content-area::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid transparent; /* Vytvoří malý "padding" kolem jezdce */
    background-clip: content-box;  /* Zajistí, že border je vně barvy jezdce */
}

.help-content-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--button-hover-bg);
}

.help-topic-content {
    display: none;
}

.help-topic-content.active {
    display: block;
}

.help-topic-content h2 {
    font-size: 1.4em;
    color: var(--text-color-header);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--separator-color);
}
.help-topic-content h4 {
    font-size: 1.05em;
    color: var(--text-color);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
.help-topic-content p,
.help-topic-content ul,
.help-topic-content ol {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: 1em;
    color: var(--text-color-secondary);
}
.help-topic-content ul, .help-topic-content ol {
    padding-left: 20px;
}
.help-topic-content ul li, .help-topic-content ol li {
    margin-bottom: 0.5em;
}
.help-topic-content code,
.help-topic-content kbd {
    background-color: var(--input-bg);
    padding: 5px 8px;
    border-radius: 5px;
    font-family: var(--font-monospace);
    font-size: 0.9em;
    color: var(--text-color);
    border: 1px solid var(--input-border);
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Společný styl pro všechny ikonky, které mají mít rámeček */
.help-topic-content .fas,
.help-topic-content .far {
    background-color: var(--input-bg);
    padding: 6px; /* Mírně jiný padding, pokud je ikona čtvercová */
    border-radius: 5px;
    font-size: 1em; /* Mírně větší ikona */
    color: var(--text-color);
    border: 1px solid var(--input-border);
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: auto; /* Automatická šířka podle obsahu + paddingu */
    min-width: 1.2em; /* Minimální šířka pro konzistenci, pokud některé ikony jsou úzké */
    text-align: center; /* Vycentrování ikony, pokud by padding byl nerovnoměrný */
    margin-top: 2px;
    margin-bottom: 2px;
}

.help-topic-content .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 3px;
}

#helpModal {
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

#helpModal.show { /* .modal.show by bylo obecnější, pokud to tak používáš i jinde */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
/* Specifické pravidlo pro seznamy v sekci klávesových zkratek */
#help-content-shortcuts ul li {
    line-height: 2;       /* Zvyš výšku řádku (např. na 2, 2.2, nebo 1.8em - experimentuj) */
    margin-bottom: 0.8em; /* Můžeš také mírně zvětšit spodní okraj, pokud samotný line-height nestačí */
}

/* Větší a modré tlačítko POUZE pro první level */
#newLevelModal .modal-buttons .btn-first-level {
    background-color: var(--button-active-bg);
    color: var(--button-active-text-color);
    padding: 12px 24px;
    font-size: 1em;
    min-width: 180px;
}
#newLevelModal .modal-buttons .btn-first-level:hover {
    background-color: #004ecc;
}

/* === STYLY PRO NOVÉ USPOŘÁDÁNÍ OVLÁDÁNÍ ČASOVÉ OSY === */

/* Hlavní kontejner pro ovládání snímků - nastavíme ho jako flexbox */
.frame-controls.button-group.horizontal {
    display: flex;       /* Použít flexbox pro zarovnání do řádku */
    align-items: center; /* Vertikálně vycentrovat všechny prvky */
    flex-wrap: wrap;     /* Pokud se nevejdou, zalomí se na další řádek */
    gap: 5px;            /* Mezera mezi jednotlivými tlačítky a skupinami */
}

/* "Neviditelný" prvek, který se roztáhne a vyplní volné místo */
.timeline-spacer {
    flex-grow: 1; /* Toto je klíčové - prvek zabere veškeré dostupné místo */
}

/* Skupina pro import na konci řádku */
.timeline-import-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Mezera mezi tlačítkem "Načíst" a inputy pro mřížku */
}

/* Úprava stávajícího stylu pro inputy mřížky, aby se správně zobrazily */
.timeline-import-group .import-grid-options {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Zajistí, že inputy nebudou příliš široké a tlačítka se vejdou */
.timeline-import-group .tile-import-size {
    width: 60px; /* Můžete upravit podle potřeby */
    padding: 4px;
}
.frame-controls .btn.btn-icon {
    width: 70px;         /* Nastavíme pevnou šířku, která je zhruba dvojnásobná oproti původní. Můžete si hodnotu upravit. */
    border-radius: 8px;  /* Změníme tvar z kruhu (pravděpodobně border-radius: 50%) na zaoblený obdélník. */
    
    /* Následující vlastnosti nejsou nutně potřeba, pokud již jsou definovány, 
       ale zajistí, že ikona zůstane vycentrovaná. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }