/*
  JetRichPlay-like визуал (skin)
  Всё сделано через переопределение CSS-переменных + лёгкие оверрайды компонентов,
  чтобы не ломать существующую верстку/JS.
*/

:root {
    /* Base */
    --body-bg: #0b0f26;
    --body-color: rgba(255,255,255,.92);
    --text: rgba(255,255,255,.92);
    --text-subdued: rgba(255,255,255,.68);
    --text-pale: rgba(255,255,255,.55);

    /* Brand accents (неон/градиенты как на jetrichplay) */
    --interactive: #b35cff;
    --interactive-hovered: #c978ff;
    --interactive-pressed: #9b44e6;
    --focused: rgba(179, 92, 255, .55);

    --action-primary: #b35cff;
    --action-primary-hovered: #c978ff;
    --action-primary-pressed: #9b44e6;
    --text-on-primary: #ffffff;
    --icon-on-primary: #ffffff;

    --action-secondary: #19d3ff;
    --action-secondary-hovered: #43dcff;
    --action-secondary-pressed: #10bfe8;
    --text-on-secondary: #07101a;
    --icon-on-secondary: #07101a;

    /* Surfaces */
    --header-background: rgba(12, 16, 40, .55);
    --card-background: rgba(16, 22, 52, .72);
    --casino-background: rgba(16, 22, 52, .72);
    --casino-providers-background: rgba(16, 22, 52, .72);
    --input-background: rgba(255,255,255,.06);
    --modal-background: rgba(16, 22, 52, .92);

    /* Borders / shadows */
    --card-border: rgba(255,255,255,.10);
    --border-subdued: rgba(255,255,255,.12);
    --border-neutral-subdued: rgba(255,255,255,.12);
    --header-shadow: 0 10px 40px rgba(0,0,0,.35);
    --shadow-card: 0 16px 60px rgba(0,0,0,.35);
    --shadow-button: 0 12px 30px rgba(179,92,255,.20);

    /* Nav */
    --navigation-link: rgba(255,255,255,.9);
    --navigation-link-hover: #ffffff;
    --mobile-menu-background: rgba(12, 16, 40, .92);
}

body {
    /* много-слойный фон (как у casino/landing) */
    background-color: var(--body-bg);
    background-image:
            radial-gradient(1100px 700px at 12% 10%, rgba(179, 92, 255, .35), transparent 55%),
            radial-gradient(900px 600px at 88% 18%, rgba(25, 211, 255, .22), transparent 60%),
            radial-gradient(1000px 700px at 50% 110%, rgba(255, 66, 185, .18), transparent 55%);
    background-attachment: fixed;
}

.header {
    background: var(--header-background);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.navigation {
    background: transparent;
}

.navigation__link {
    border-radius: 1rem;
    color: #fff;
    padding: .5rem .75rem;
    transition: background-color .15s ease, transform .15s ease;
}

.navigation__link--active {
    background: rgba(255, 255, 255, .05);
}

.navigation__link:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-1px);
}

.logo__img {
    filter: drop-shadow(0 10px 18px rgba(179,92,255,.22));
}

.header .lang-selector__text {
    color: #fff;
}

.mobile-menu__link {
    color: #fff;
}

.burger__line, .burger__line::after, .burger__line::before {
    background: #fff;
}

.mobile-menu__wrapper {
    background-color: rgba(12, 16, 40, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Buttons: делаем более «гладкими» и неоновыми */
.button {
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
}

.button--primary {
    border: 0;
    background:
            linear-gradient(135deg, rgba(179, 92, 255, 1), rgba(255, 66, 185, .95));
    box-shadow:
            0 16px 42px rgba(179,92,255,.22),
            0 10px 26px rgba(255,66,185,.12);
}

.button--primary:hover,
.button--primary:focus {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.button--primary:active {
    transform: translateY(0);
    filter: brightness(.98);
}

/* Cards / blocks */
.card,
.casino,
.casino-providers,
.article__card,
.modal {
    background: var(--card-background);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Inputs */
input,
textarea,
select {
    background: var(--input-background);
    color: rgba(255,255,255,.92);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(179,92,255,.35);
    border-radius: 999px;
    border: 2px solid rgba(11,15,38,1);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(179,92,255,.55);
}

.video {
    border-radius: 1.25rem;
    overflow: hidden;
    height: 9.75rem;
    position: relative;
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

@media (min-width: 768px){
    .video {
        height: 28.8125rem;
    }
}

.video__link {
    position: relative;
    display: block;
    height: 100%;
}

.video__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 3;
    margin: 0 !important;
}