* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-container {
    display: none;
}

/* КОНТЕЙНЕР - 550x325 */
.card-container {
    position: relative;
    width: 550px;
    height: 325px;
}

/* Основная карточка */
.card {
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    height: 302px;
    background: linear-gradient(135deg, #424242 0%, #3a3a3a 50%, #2f2f2f 100%);
    border: 4px solid;
    border-radius: 28px;
    padding: 24px;
    padding-left: 75px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-container:hover .card {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
}

/* Логотип внутри карточки */
.logo-inside {
    width: 180px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-inside img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Тип бонуса */
.bonus-type {
    width: 220px;
    height: 28px;
    background-color: #3785BC;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(11px, 100%, 16px);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Описание бонуса */
.bonus-description {
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
    max-width: 280px;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Параметры казино */
.casino-params {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.params-row {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.param-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: fit-content;
}

.param-item.param-full {
    justify-content: center;
    margin-top: 8px;
}

.param-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Окраска иконок в основной цвет кота */
.card.blue .param-icon {
    filter: invert(26%) sepia(51%) saturate(1012%) hue-rotate(188deg) brightness(1.1);
}

.card.orange .param-icon {
    filter: invert(51%) sepia(82%) saturate(775%) hue-rotate(3deg) brightness(1.05);
}

.card.purple .param-icon {
    filter: invert(32%) sepia(74%) saturate(1282%) hue-rotate(236deg) brightness(1.15);
}

.card.turquoise .param-icon {
    filter: invert(43%) sepia(29%) saturate(710%) hue-rotate(173deg) brightness(1.12);
}

.card.indigo .param-icon {
    filter: invert(35%) sepia(45%) saturate(1001%) hue-rotate(218deg) brightness(1.1);
}

.card.emerald .param-icon {
    filter: invert(69%) sepia(46%) saturate(500%) hue-rotate(119deg) brightness(0.95);
}

.card.pink .param-icon {
    filter: invert(42%) sepia(43%) saturate(826%) hue-rotate(290deg) brightness(1.08);
}

.card.lime .param-icon {
    filter: invert(65%) sepia(71%) saturate(665%) hue-rotate(49deg) brightness(0.98);
}

.card.green .param-icon {
    filter: invert(45%) sepia(30%) saturate(625%) hue-rotate(116deg) brightness(1.08);
}

.card.red .param-icon {
    filter: invert(43%) sepia(79%) saturate(604%) hue-rotate(350deg) brightness(1.05);
}

.param-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.param-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.param-value {
    font-size: 12px;
    color: white;
    font-weight: bold;
}

/* КОТ - 210x300, слева внизу, ВПЕРЕДИ */
.cat-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 210px;
    height: 300px;
    transition: all 0.3s ease;
}

.card-container:hover .cat-container {
    transform: translateY(-4px) rotate(-1deg);
}

.cat-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Секция с кнопками */
.buttons-section {
    position: absolute;
    right: 50px;
    bottom: -20px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 15;
}

.btn {
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-review {
    width: 110px;
    height: 34px;
    font-size: 14px;
    border-radius: 18px;
    color: white;
    border: 0;
    
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 22%, transparent 23%),
        linear-gradient(180deg, var(--btn-main-light) 0%, var(--btn-main) 60%, var(--btn-main-dark) 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.16),
        0 5px 12px rgba(0,0,0,0.25);
}

.btn-review:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 8px 16px rgba(0,0,0,0.32);
}

.btn-bonus {
    width: 150px;
    height: 42px;
    font-size: 16px;
    border-radius: 18px;
    color: white;
    border: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 22%, transparent 23%),
        linear-gradient(180deg, var(--btn-main-light) 0%, var(--btn-main) 55%, var(--btn-main-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 8px 16px rgba(0,0,0,0.28);
}

.btn-bonus:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 10px 18px rgba(0,0,0,0.32);
}

/* ============ ЦВЕТОВЫЕ ВАРИАНТЫ ============ */

/* Blue */
.card.blue {
    border-color: #3785BC;
    box-shadow: 0 0 20px rgba(55, 133, 188, 0.4), inset 0 0 20px rgba(136, 187, 218, 0.1);
    --accent: #88BBDA;
}

.card.blue .bonus-title {
    color: #88BBDA;
}

.card.blue .btn-review,
.card.blue .btn-bonus {
    --btn-main-light: #4a95d0;
    --btn-main: #3785BC;
    --btn-main-dark: #1B5784;
}

.card.blue .btn-review:hover,
.card.blue .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #4a95d0 0%, #1B5784 55%, #0d2f45 100%);
}

.card.blue .bonus-type {
    background-color: #3785BC;
}

/* Orange */
.card.orange {
    border-color: #F28C38;
    box-shadow: 0 0 20px rgba(242, 140, 56, 0.4), inset 0 0 20px rgba(247, 192, 138, 0.1);
    --accent: #F7C08A;
}

.card.orange .btn-review,
.card.orange .btn-bonus {
    --btn-main-light: #f5a552;
    --btn-main: #F28C38;
    --btn-main-dark: #B55A14;
}

.card.orange .btn-review:hover,
.card.orange .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #f5a552 0%, #B55A14 55%, #7a3c0a 100%);
}

.card.orange .bonus-type {
    background-color: #F28C38;
}

/* Purple */
.card.purple {
    border-color: #7A5AF8;
    box-shadow: 0 0 20px rgba(122, 90, 248, 0.4), inset 0 0 20px rgba(184, 169, 255, 0.1);
    --accent: #B8A9FF;
}

.card.purple .btn-review,
.card.purple .btn-bonus {
    --btn-main-light: #8f73f8;
    --btn-main: #7A5AF8;
    --btn-main-dark: #4C2DBF;
}

.card.purple .btn-review:hover,
.card.purple .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #8f73f8 0%, #4C2DBF 55%, #2a165f 100%);
}

.card.purple .bonus-type {
    background-color: #7A5AF8;
}

/* Turquoise */
.card.turquoise {
    border-color: #2FA4A9;
    box-shadow: 0 0 20px rgba(47, 164, 169, 0.4), inset 0 0 20px rgba(126, 214, 218, 0.1);
    --accent: #7ED6DA;
}

.card.turquoise .btn-review,
.card.turquoise .btn-bonus {
    --btn-main-light: #48b5bc;
    --btn-main: #2FA4A9;
    --btn-main-dark: #1A6B6E;
}

.card.turquoise .btn-review:hover,
.card.turquoise .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #48b5bc 0%, #1A6B6E 55%, #0d3537 100%);
}

.card.turquoise .bonus-type {
    background-color: #2FA4A9;
}

/* Indigo */
.card.indigo {
    border-color: #4F6EDB;
    box-shadow: 0 0 20px rgba(79, 110, 219, 0.4), inset 0 0 20px rgba(165, 182, 243, 0.1);
    --accent: #A5B6F3;
}

.card.indigo .btn-review,
.card.indigo .btn-bonus {
    --btn-main-light: #6482e0;
    --btn-main: #4F6EDB;
    --btn-main-dark: #2B3E8F;
}

.card.indigo .btn-review:hover,
.card.indigo .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #6482e0 0%, #2B3E8F 55%, #151f47 100%);
}

.card.indigo .bonus-type {
    background-color: #4F6EDB;
}

/* Emerald */
.card.emerald {
    border-color: #8BE1CC;
    box-shadow: 0 0 20px rgba(139, 225, 204, 0.4), inset 0 0 20px rgba(122, 204, 204, 0.1);
    --accent: #7ACCCC;
}

.card.emerald .btn-review,
.card.emerald .btn-bonus {
    --btn-main-light: #a0e5d4;
    --btn-main: #8BE1CC;
    --btn-main-dark: #1C6E5B;
}

.card.emerald .btn-review:hover,
.card.emerald .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #a0e5d4 0%, #1C6E5B 55%, #0e372d 100%);
}

.card.emerald .bonus-type {
    background-color: #8BE1CC;
}

/* Pink */
.card.pink {
    border-color: #D95A9E;
    box-shadow: 0 0 20px rgba(217, 90, 158, 0.4), inset 0 0 20px rgba(240, 169, 206, 0.1);
    --accent: #F0A9CE;
}

.card.pink .btn-review,
.card.pink .btn-bonus {
    --btn-main-light: #e073ac;
    --btn-main: #D95A9E;
    --btn-main-dark: #8A2F63;
}

.card.pink .btn-review:hover,
.card.pink .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #e073ac 0%, #8A2F63 55%, #451731 100%);
}

.card.pink .bonus-type {
    background-color: #D95A9E;
}

/* Lime */
.card.lime {
    border-color: #7CBF3F;
    box-shadow: 0 0 20px rgba(124, 191, 63, 0.4), inset 0 0 20px rgba(189, 230, 143, 0.1);
    --accent: #BDE68F;
}

.card.lime .btn-review,
.card.lime .btn-bonus {
    --btn-main-light: #8dce52;
    --btn-main: #7CBF3F;
    --btn-main-dark: #4C7A1F;
}

.card.lime .btn-review:hover,
.card.lime .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #8dce52 0%, #4C7A1F 55%, #263d0f 100%);
}

.card.lime .bonus-type {
    background-color: #7CBF3F;
}

/* Green */
.card.green {
    border-color: #3FAF7A;
    box-shadow: 0 0 20px rgba(63, 175, 122, 0.4), inset 0 0 20px rgba(143, 224, 185, 0.1);
    --accent: #8FE0B9;
}

.card.green .btn-review,
.card.green .btn-bonus {
    --btn-main-light: #5bc08d;
    --btn-main: #3FAF7A;
    --btn-main-dark: #1F6B4A;
}

.card.green .btn-review:hover,
.card.green .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #5bc08d 0%, #1F6B4A 55%, #0f3525 100%);
}

.card.green .bonus-type {
    background-color: #3FAF7A;
}

/* Red */
.card.red {
    border-color: #E5533D;
    box-shadow: 0 0 20px rgba(229, 83, 61, 0.4), inset 0 0 20px rgba(242, 154, 142, 0.1);
    --accent: #F29A8E;
}

.card.red .btn-review,
.card.red .btn-bonus {
    --btn-main-light: #ed6e52;
    --btn-main: #E5533D;
    --btn-main-dark: #9E2C20;
}

.card.red .btn-review:hover,
.card.red .btn-bonus:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 22%, transparent 23%),
        linear-gradient(180deg, #ed6e52 0%, #9E2C20 55%, #4f1610 100%);
}

.card.red .bonus-type {
    background-color: #E5533D;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .casinos-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
    }

    .card-container {
        width: 550px;
        height: 325px;
        transform: scale(0.85);
        transform-origin: top center;
        margin: 0;
    }

    .card {
        width: 450px;
        height: 302px;
    }

    .btn-review,
    .btn-bonus {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .casinos-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 5px;
    }

    .card-container {
        width: 550px;
        height: 325px;
        transform: scale(0.7);
        transform-origin: top center;
        margin: 0;
    }

    .card {
        width: 450px;
        height: 302px;
    }

    .param-label {
        font-size: 10px;
    }

    .param-value {
        font-size: 12px;
    }

    .btn-review,
    .btn-bonus {
        padding: 6px 12px;
        font-size: 11px;
    }
}