/* Для таблицы Info 5x2 */
table 
    {
    width: 1400px;
    /* Высота всей таблицы для наглядности отображения картинок */
    height: 100px; 
    /* Разрешаем раздельные границы (ОБЯЗАТЕЛЬНО, иначе отступы не сработают) */
    border-collapse: separate; 
    /* Задаем расстояние между ячейками (например, 10 пикселей) */
    border-spacing: 10px; 	
    }
td  {
    /* Убеждаемся, что сами рамки у ячеек отключены */
    border: none;
    /* Задаем жесткие размеры ячейки под размер картинки */
    width: 254px;
    height: 52px;
	/* 2. СБРОС ОТСТУПОВ (чтобы ячейка не раздувалась) */
    padding: 0;
    /* Масштабирует картинку так, чтобы она полностью влезла в ячейку */
    /* background-size: contain; 	 */
    /* Настройки фона, чтобы картинка заполняла всю ячейку и не дублировалась */
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: 100% 100%; */
    /* background-size: cover; */
    /* Стили для текста внутри ячеек */
    color: #00ff66;
    text-align: center;
    font-family: "Arial", cursive, sans-serif;
    font-weight: bold;
	font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
.text-red {color: #ff3355 !important;}
.text-yellow {color: #ffcc00 !important;}
.bg-1 { background-image: url('taba.png'); }
.bg-2 { background-image: url('taby.png'); }
.bg-3 { background-image: url('tabg.png'); }
.bg-4 { background-image: url('tabr.png'); }
.bg-5 { background-image: url('tabv.png'); }
.image-button 
    {
    /* 1. Задаем свойства фона раздельно */
    background-image: url('button1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; /* Гарантирует точную посадку пиксель в пиксель */
    background-color: transparent; /* Убирает стандартный серый фон кнопки, если он проглядывает */
    /* 2. Ваши размеры и шрифт */
    width: 254px; 
    height: 52px;
    color: #ffcc00; 
    font-weight: bold;
    font-size: 16px; 
    font-family: "Arial", cursive, sans-serif;
    cursor: pointer;
    /* 3. Центрирование текста (Flexbox) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 4. Рамки и скругления */
    border: none; 
    border-radius: 12px; /* !!! МАГИЯ 2: задаем точный радиус скругления под вашу картинку */
    overflow: hidden;    /* !!! МАГИЯ 3: обрезаем углы элемента, чтобы тень не делала их белыми */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);    
	}
/* Эффект наведения срабатывает ТОЛЬКО если кнопка НЕ заблокирована */
.image-button:not(:disabled):hover
    {
    /* Меняем только саму картинку, все остальные свойства железно наследуются */
    background-image: url('button2.png');
    }
/* Эффект при клике */
.image-button:not(:disabled):active
    {
  transform: scale(0.98); /* Кнопка визуально слегка вдавится */
  }
/* Стили для заблокированной кнопки */
.image-button:disabled 
    {
    color: #a0a0a0;          /* Серый цвет шрифта */
    box-shadow: none;        /* Убираем тень */
    cursor: not-allowed;     /* Курсор "запрещено" (или default для обычной стрелки) */
    }