/* ==========================================
   RESPONSIVE CSS для casinos.fm
   Делает старый табличный сайт адаптивным
   ========================================== */

/* === БАЗОВЫЕ СБРОСЫ И НАСТРОЙКИ === */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 10px;
    min-width: 320px;
}

/* === АДАПТИВНЫЕ ТАБЛИЦЫ === */
table {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    table-layout: fixed;
}

/* Переопределяем фиксированные ширины таблиц */
table[width] {
    max-width: 100% !important;
    width: 100% !important;
}

td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ячейки с фиксированной шириной делаем гибкими */
td[width], th[width] {
    width: auto !important;
}

/* === АДАПТИВНЫЕ ИЗОБРАЖЕНИЯ === */
img {
    max-width: 100%;
    height: auto !important;
}

/* Изображения с фиксированными атрибутами */
img[width] {
    max-width: 100%;
    width: auto;
    height: auto !important;
}

/* Большие баннеры - ограничиваем максимальную ширину */
img[width="468"],
img[width="400"],
img[width="300"],
img[width="255"] {
    max-width: 100%;
    width: 100%;
    max-width: 468px;
    height: auto !important;
}

/* Маленькие иконки и декоративные изображения - сохраняем размер */
img[width="2"],
img[width="60"],
img[width="16"] {
    width: auto;
    max-width: none;
}

/* === ШРИФТЫ И ТЕКСТ === */
body, td, p, font {
    font-size: 16px;
    line-height: 1.5;
}

h1 {
    font-size: 1.8em;
    word-wrap: break-word;
}

/* Ссылки - удобнее для тапа на мобильных */
a {
    display: inline-block;
    padding: 2px 0;
}

/* === ЦЕНТРИРОВАНИЕ КОНТЕНТА === */
div[align="center"],
p[align="center"],
center {
    text-align: center;
    padding: 0 10px;
}

/* === МОБИЛЬНЫЕ УСТРОЙСТВА (до 768px) === */
@media screen and (max-width: 768px) {
    body {
        padding: 5px;
    }

    /* Таблицы - превращаем в вертикальную компоновку */
    table {
        display: block !important;
        width: 100% !important;
    }

    tbody, thead, tfoot {
        display: block !important;
        width: 100% !important;
    }

    tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    td, th {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 5px !important;
    }

    /* Убираем фоновые изображения в таблицах на мобильных */
    table[background],
    td[background] {
        background-size: cover !important;
        background-position: center !important;
    }

    /* Заголовки */
    h1 {
        font-size: 1.5em;
        padding: 0 10px;
    }

    /* Изображения баннеров */
    img[width="468"],
    img[width="400"],
    img[width="300"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Текст */
    font[size="1"],
    font[size="2"] {
        font-size: 14px !important;
    }

    font[size="3"],
    font[size="4"] {
        font-size: 16px !important;
    }

    /* Навигация */
    .nav, a.nav {
        font-size: 14px !important;
        padding: 8px 5px;
        display: block;
    }

    /* Отступы для параграфов */
    p {
        padding: 0 10px;
        margin: 10px 0;
    }

    /* Награды/иконки - в ряд с переносом */
    h1 img {
        margin: 5px;
        max-width: 80px;
        height: auto !important;
    }
}

/* === ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 480px) === */
@media screen and (max-width: 480px) {
    body {
        padding: 3px;
    }

    h1 {
        font-size: 1.3em;
    }

    /* Все изображения максимально адаптивные */
    img {
        max-width: 100% !important;
    }

    /* Текст ещё крупнее для удобства чтения */
    body, td, p, font {
        font-size: 15px;
    }

    font[size="1"],
    font[size="2"] {
        font-size: 13px !important;
    }

    /* Ссылки крупнее для тапа */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Навигационные ссылки внизу страницы */
    p a {
        display: inline;
        min-height: auto;
    }
}

/* === ПЛАНШЕТЫ И СРЕДНИЕ ЭКРАНЫ (769px - 1024px) === */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    table {
        max-width: 95% !important;
        margin: 0 auto;
    }

    img[width="468"] {
        max-width: 468px;
    }
}

/* === ДЕСКТОП (больше 1024px) === */
@media screen and (min-width: 1025px) {
    /* Ограничиваем максимальную ширину контента */
    body > table,
    body > div,
    body > center {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Сохраняем оригинальную ширину таблиц но центрируем */
    table[width="600"],
    table[width="550"],
    table[width="548"] {
        width: auto !important;
        max-width: 100%;
    }
}

/* === УЛУЧШЕНИЯ ЮЗАБИЛИТИ === */

/* Плавные переходы для интерактивных элементов */
a, img {
    transition: opacity 0.2s ease;
}

a:hover img {
    opacity: 0.85;
}

/* Улучшаем видимость ссылок */
a:focus {
    outline: 2px solid #FF0000;
    outline-offset: 2px;
}

/* Предотвращаем горизонтальный скролл */
html, body {
    overflow-x: hidden;
}

/* === ФУТЕР === */
.site-footer {
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

/* === ПЕЧАТЬ === */
@media print {
    body {
        background: white !important;
    }

    img {
        max-width: 300px !important;
    }

    a {
        color: black !important;
        text-decoration: underline !important;
    }
}