:root {       --bg: #f4f6f8;       --surface: #ffffff;       --surface-soft: #f8fafb;       --text: #1f2933;       --muted: #5f6c7b;       --accent: #d63d2a;       --accent-dark: #b92f1f;       --line: #dde4ea;       --shadow: 0 10px 25px rgba(31, 41, 51, 0.08);       --radius: 14px;       --container: 960px;     }      * {       box-sizing: border-box;     }      html {       scroll-behavior: smooth;     }      body {       margin: 0;       font-family: Arial, Helvetica, sans-serif;       color: var(--text);       background: var(--bg);       line-height: 1.65;       font-size: 16px;     }      img {       max-width: 100%;       height: auto;       display: block;     }      table {       width: 100%;       border-collapse: collapse;       border-spacing: 0;       margin: 20px 0;       background: #fff;       border: 1px solid var(--line);       border-radius: 12px;       overflow: hidden;        overflow-x: auto;       -webkit-overflow-scrolling: touch;     }      table thead,     table tbody,     table tr {       width: 100%;     }      th,     td {       padding: 12px 14px;       border-bottom: 1px solid var(--line);       text-align: left;       vertical-align: top;       font-size: 15px;       white-space: nowrap;     }      th {       background: var(--surface-soft);       font-weight: 700;       color: var(--text);     }      td {       color: #344150;       background: #fff;     }      tr:last-child td {       border-bottom: 0;     }      a {       color: inherit;       text-decoration: none;     }      a:hover {       color: var(--accent);     }      .container {       width: min(calc(100% - 32px), var(--container));       margin: 0 auto;     }      .site-header {       position: sticky;       top: 0;       z-index: 50;       background: rgba(27, 35, 42, 0.96);       backdrop-filter: blur(10px);       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);     }      .site-header__inner {       display: flex;       align-items: center;       justify-content: space-between;       gap: 20px;       min-height: 76px;     }      .logo {       font-size: 26px;       font-weight: 700;       color: #fff;       white-space: nowrap;     }      .logo span {       color: #8cc152;     }      .nav {       display: flex;       flex-wrap: wrap;       gap: 10px;       align-items: center;     }      .nav > a,     .nav-dropdown__toggle {       color: #f3f5f7;       padding: 10px 14px;       border-radius: 10px;       font-size: 14px;       font-weight: 700;       transition: background 0.2s ease, color 0.2s ease;     }      .nav > a:hover,     .nav-dropdown:hover .nav-dropdown__toggle,     .nav-dropdown:focus-within .nav-dropdown__toggle {       background: rgba(255, 255, 255, 0.1);       color: #fff;     }      .nav-dropdown {       position: relative;       padding-bottom: 12px;       margin-bottom: -12px;     }      .nav-dropdown__toggle {       display: inline-flex;       align-items: center;       gap: 8px;       cursor: pointer;     }      .nav-dropdown__toggle::after {       content: "▾";       font-size: 12px;       opacity: 0.9;     }      .nav-dropdown__menu {       position: absolute;       top: calc(100% + 2px);       left: 0;       min-width: 220px;       padding: 10px;       margin: 0;       list-style: none;       background: #ffffff;       border: 1px solid var(--line);       border-radius: 14px;       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);       display: none;       z-index: 30;     }      .nav-dropdown:hover .nav-dropdown__menu,     .nav-dropdown:focus-within .nav-dropdown__menu {       display: block;     }      .nav-dropdown__menu::before {       content: "";       position: absolute;       left: 0;       right: 0;       top: -12px;       height: 12px;     }      .nav-dropdown__menu li + li {       margin-top: 6px;     }      .nav-dropdown__menu a {       display: block;       padding: 10px 12px;       border-radius: 10px;       color: #2e3a45;       background: #f7fafc;       font-size: 14px;       font-weight: 700;     }      .nav-dropdown__menu a:hover {       background: #eef3f6;       color: var(--accent);     }      .hero {       padding: 32px 0 24px;     }      .hero__card {       background: linear-gradient(135deg, #2f3b46 0%, #42505d 100%);       color: #fff;       border-radius: 20px;       padding: 30px;       box-shadow: var(--shadow);     }      .hero h1 {       margin: 0 0 14px;       font-size: clamp(28px, 4vw, 40px);       line-height: 1.15;     }      .hero p {       margin: 0;       max-width: 760px;       color: rgba(255, 255, 255, 0.9);       font-size: 17px;     }      .layout {       display: block;       padding-bottom: 48px;     }      .panel,     .content-section {       background: var(--surface);       border: 1px solid var(--line);       border-radius: var(--radius);       box-shadow: var(--shadow);     }      .section-head {       padding: 18px 22px;       border-bottom: 1px solid var(--line);       background: var(--surface-soft);       border-radius: var(--radius) var(--radius) 0 0;     }      .section-head h2 {       margin: 0;       font-size: 22px;       line-height: 1.3;     }            .catalog-list {       padding: 18px 22px 22px;       display: grid;       gap: 16px;     }      .casino-item {       display: grid;       grid-template-columns: 138px minmax(0, 1fr) 118px;       gap: 18px;       align-items: center;       padding: 16px;       border: 1px solid var(--line);       border-radius: 16px;       background: #fff;       transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;     }      .casino-item:hover {       transform: translateY(-2px);       box-shadow: 0 14px 28px rgba(31, 41, 51, 0.1);       border-color: #cfd8df;     }      .casino-logo {       border: 1px solid var(--line);       border-radius: 12px;       background: #fff;       padding: 10px;     }      .casino-logo img {       width: 100%;       aspect-ratio: 129 / 84;       object-fit: contain;       margin: 0;     }      .casino-content h3 {       margin: 0 0 8px;       font-size: 20px;       line-height: 1.3;     }      .casino-content p {       margin: 0;       color: var(--muted);       font-size: 16px;     }      .bonus-badge {       display: flex;       align-items: center;       justify-content: center;       width: 100%;       margin: 12px 0 0;       padding: 10px 14px;       border-radius: 10px;       background: #eef7e8;       color: #3d6c1f;       font-size: 15px;       font-weight: 700;       text-align: center;     }      .bonus-badge strong {       margin-left: 6px;       color: #2f5b14;       font-size: 16px;     }      .casino-actions {       display: flex;       flex-direction: column;       gap: 8px;       align-items: flex-end;     }      .btn-review {       font-size: 13px;       font-weight: 700;       color: #4a5a68;     }      .btn-review:hover {       color: var(--accent);     }          .btn-play {       display: inline-flex;       align-items: center;       justify-content: center;       min-height: 46px;       padding: 0 20px;       border-radius: 12px;       background: var(--accent);       color: #fff;       font-weight: 700;       font-size: 16px;       transition: background 0.2s ease, transform 0.2s ease;     }      .btn-play:hover {       color: #fff;       background: var(--accent-dark);       transform: translateY(-1px);     }      .content-section {       margin-top: 24px;       overflow: hidden;     }      .content-section__body {       padding: 22px;     }      .content-section h3 {       margin: 0 0 10px;       font-size: 20px;       line-height: 1.35;     }      .content-section p + h3 {       margin-top: 24px;     }      .content-section p {       margin: 0 0 16px;       color: #344150;     }      .content-section a,     .casino-content a:not(.btn-play):not(.btn-review),     .text-link {       color: #1f4f8a;       text-decoration: underline;       text-decoration-thickness: 1px;       text-underline-offset: 2px;       transition: color 0.2s ease, text-decoration-color 0.2s ease;     }      .content-section a:hover,     .casino-content a:not(.btn-play):not(.btn-review):hover,     .text-link:hover {       color: var(--accent);       text-decoration-color: var(--accent);     }      .content-section ul,     .content-section ol,     .listing {       margin: 16px 0;       padding-left: 22px;       color: #344150;     }      .content-section li,     .listing li {       margin-bottom: 8px;       line-height: 1.6;     }      .listing {       list-style: none;       padding-left: 0;     }      .listing li {       position: relative;       padding-left: 18px;     }      .listing li::before {       content: "";       position: absolute;       left: 0;       top: 10px;       width: 7px;       height: 7px;       border-radius: 50%;       background: var(--accent);     }      .site-brand {       display: inline-flex;       align-items: center;       gap: 12px;     }      .site-brand img {       width: 42px;       height: 42px;       object-fit: contain;       flex: 0 0 42px;     }      .footer-brand {       display: inline-flex;       align-items: center;       gap: 12px;       margin-bottom: 12px;     }      .footer-brand img {       width: 38px;       height: 38px;       object-fit: contain;       flex: 0 0 38px;     }      .footer-brand strong {       color: #fff;       font-size: 20px;       line-height: 1.2;     }      .trust-row {       display: flex;       flex-wrap: wrap;       gap: 10px;       margin-top: 18px;     }      .trust-badge {       display: inline-flex;       align-items: center;       justify-content: center;       min-height: 40px;       padding: 8px 14px;      /* border-radius: 999px;       border: 1px solid rgba(255, 255, 255, 0.12);       background: rgba(255, 255, 255, 0.06);*/       color: #ffffff;       font-size: 13px;       font-weight: 700;     }      .country-links {       display: flex;       flex-wrap: wrap;       gap: 12px;       margin-top: 18px;     }      .country-link {       width: 52px;       height: 52px;       border-radius: 50%;       overflow: hidden;       display: inline-flex;       align-items: center;       justify-content: center;       border: 2px solid rgba(255, 255, 255, 0.14);       box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);       transition: transform 0.2s ease, border-color 0.2s ease;     }      .country-link:hover {       transform: translateY(-2px);       border-color: rgba(255, 255, 255, 0.32);     }      .country-link img {       width: 100%;       height: 100%;       object-fit: cover;     }      .site-footer {       padding: 28px 0 36px;       background: #202a32;       color: #d7dde3;     }      .site-footer__inner {       display: grid;       grid-template-columns: 1.4fr 1fr 1fr 1fr;       gap: 22px;     }      .site-footer h3 {       margin: 0 0 12px;       color: #8cc152;       font-size: 16px;     }      .site-footer p,     .site-footer li,     .site-footer a {       color: #d7dde3;       font-size: 14px;       line-height: 1.6;     }      .site-footer ul a {       text-decoration: none;       transition: color 0.2s ease;     }      .site-footer ul a:hover {       color: #ffffff;     }      .site-footer ul {       list-style: none;       padding: 0;       margin: 0;       display: grid;       gap: 8px;     }      .up-button {       position: fixed;       right: 18px;       bottom: 18px;       z-index: 40;       width: 48px;       height: 48px;       border-radius: 50%;       display: flex;       align-items: center;       justify-content: center;       background: var(--accent);       color: #fff;       font-size: 18px;       font-weight: 700;       box-shadow: 0 10px 24px rgba(214, 61, 42, 0.35);     }      .up-button:hover {       color: #fff;       background: var(--accent-dark);     }      @media (max-width: 980px) {       .site-footer__inner {         grid-template-columns: repeat(4, minmax(0, 1fr));       }     }      @media (max-width: 760px) {       .site-header__inner {         flex-direction: column;         align-items: flex-start;         padding: 12px 0;       }        .nav {         width: 100%;       }        .nav > a,       .nav-dropdown {         flex: 1 1 auto;       }        .nav > a,       .nav-dropdown__toggle {         display: flex;         justify-content: center;         text-align: center;       }        .nav-dropdown {         padding-bottom: 0;         margin-bottom: 0;       }        .nav-dropdown__menu {         position: static;         margin-top: 8px;       }        .hero__card {         padding: 24px 20px;       }        .catalog-list,       .content-section__body,       .section-head {         padding-left: 16px;         padding-right: 16px;       }        .casino-item {         grid-template-columns: 1fr;         text-align: center;       }        .casino-logo {         max-width: 160px;         margin: 0 auto;       }        .casino-action {         justify-content: center;       }        .site-footer__inner {         grid-template-columns: repeat(2, minmax(0, 1fr));       }     }      @media (max-width: 560px) {       table {         font-size: 14px;       }        th,       td {         padding: 10px 12px;       }        body {         font-size: 15px;       }        .container {         width: min(calc(100% - 24px), var(--container));       }        .site-footer__inner {         grid-template-columns: 1fr;       }        .hero h1 {         font-size: 28px;       }        .section-head h2 {         font-size: 20px;       }        .casino-content h3,       .content-section h3 {         font-size: 18px;       }     }