/* Theme overlay — overrides /css/app.css. Load after app.css. */

@font-face {
    font-family: Geologica;
    src: url("../fonts/geologica/Geologica-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: Geologica;
    src: url("../fonts/geologica/Geologica-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Geologica;
    src: url("../fonts/geologica/Geologica-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Geologica;
    src: url("../fonts/geologica/Geologica-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Geologica;
    src: url("../fonts/geologica/Geologica-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --vv-bg: #171722;
    --vv-bg-deep: #101019;
    --vv-surface: #252536;
    --vv-surface-2: #33334a;
    --vv-surface-3: #484868;
    --vv-border: rgba(255, 255, 255, .08);
    --vv-border-strong: rgba(255, 255, 255, .14);
    --vv-text: #fff;
    --vv-muted: #8b90a3;
    --vv-muted-dim: #6b7080;
    --vv-red: #fe284a;
    --vv-red-hover: #ff4462;
    --vv-green: #21c25c;
    --vv-green-hover: #2bd668;
    --vv-radius: 10px;
    --vv-radius-sm: 8px;
    --vv-shell: 1240px;
}

body {
    background-color: var(--vv-bg);
    color: var(--vv-text);
    font-family: Geologica, Muller, sans-serif;
}

@media (min-width: 1200px) {
    .o-box:not(.o-box_fluid) {
        max-width: 1270px;
    }
}

/* consolidated from the per-page inline <style> blocks */
.swiper {
    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    position: relative;
}

.swiper-initialized .swiper-slide {
    flex-shrink: 0;
}

.swiper-button-lock {
    display: none !important;
}

@media (max-width: 992px) {
    .warning-item img {
        width: 40px;
    }
}

/* Bulgarian Cyrillic needs default (non-localised) glyph forms */
html[lang="bg"] * {
    -webkit-font-feature-settings: "locl" 0;
}

/* ---------------------------------------------------------------- header */

.c-begin {
    padding: 0;
    background-color: #252536;
    border-bottom: 0;
    backdrop-filter: none;
}

.c-begin .o-box_fluid {
    max-width: var(--vv-shell);
}

.c-begin__content {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 64px;
    min-height: 64px;
}

.c-begin__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.c-begin__logo img {
    width: 184px;
    height: 28px;
    max-width: 184px;
    margin: 0;
}

.c-begin__buttons {
    padding: 0;
    gap: 20px;
    flex: 0 0 auto;
}

.c-begin__buttons > a:not(:last-child) {
    margin-right: 0;
}

/* reference order: Register, Log in, Help */
.c-begin__buttons .o-btn_pink { order: 1; }
.c-begin__buttons .o-link { order: 2; }
.c-begin .btn_help { order: 3; }

/* Register / Log in / Help share one flat button shape */
.c-begin__buttons .o-btn,
.c-begin__buttons .o-link,
.c-begin .btn_help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 47px;
    padding: 15px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.c-begin__buttons .o-btn_pink {
    min-width: 157px;
    background: radial-gradient(100% 100% at 50% 0, #fe284a 0, #cc203b 100%);
    color: #fff;
}

.c-begin__buttons .o-btn_pink:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
}

.c-begin__buttons .o-link {
    min-width: 108px;
}

.c-begin .btn_help {
    position: relative;
    min-width: 87px;
    margin-left: 20px;
}

/* 1px gradient rule separating Help from Log in, sitting midway in the
   40px gap (20px flex gap + 20px margin) like the reference header. */
.c-begin .btn_help::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 82, .08) 0, #3a3a52 55.73%, rgba(58, 58, 82, .08) 100%);
}

.c-begin__buttons .o-link,
.c-begin .btn_help {
    border-bottom: none;
    background: radial-gradient(100% 100% at 50% 0, #484868 0, #33334a 100%);
    color: var(--vv-text);
}

.c-begin__buttons .o-link:hover,
.c-begin .btn_help:hover {
    filter: brightness(1.08);
}

.c-begin .btn_help .img_box {
    width: 16px;
    padding-right: 0;
}

.c-begin .btn_help .img_box svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.c-begin .btn_help-span {
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 575px) {
    .c-begin {
        padding: 0 10px;
    }

    .c-begin__content {
        gap: 8px;
    }

    .c-begin__buttons {
        gap: 6px;
    }

    .c-begin .btn_help-span {
        display: none;
    }

    .c-begin .btn_help {
        min-width: 40px;
        height: 40px;
        margin-left: 0;
        padding: 0 12px;
    }

    .c-begin .btn_help::before {
        display: none;
    }

    .c-begin__buttons .o-btn,
    .c-begin__buttons .o-link {
        min-width: 0;
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    .c-begin__logo img {
        width: 132px;
        height: auto;
        max-width: 132px;
    }
}

/* ------------------------------------------------------------------ main */

.c-main {
    background: var(--vv-bg);
    padding-top: 64px;
}

.c-main h1,
.c-main h2,
.c-main h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* -------------------------------------------------------------- hero banner
   The banner is full-bleed and its height is fluid between 600px and 960px
   viewports, so a wider window reveals more of the artwork instead of
   scaling it down. Heights mirror the reference breakpoints. */
.c-poster {
    position: relative;
    width: 100%;
    max-width: none;
    height: 110px;
    margin: 0 0 4px;
    border-radius: 0;
    overflow: hidden;
}

.c-poster .swiper-wrapper,
.c-poster .swiper-wrapper > a,
.c-poster picture {
    display: block;
    width: 100%;
    height: 100%;
}

.c-poster img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 600px) {
    .c-poster {
        height: 26.1437908497vw;
    }
}

@media (min-width: 960px) {
    .c-poster {
        height: 320px;
    }
}

/* -------------------------------------------------------- category tabs */

.c-variation__box {
    position: relative;
    left: 0;
    width: 100%;
    background: #252536;
    background-image: none !important;
    border: 0;
    box-shadow: none;
}

.c-variation {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: visible;
}

@media (min-width: 1280px) {
    .c-variation {
        padding: 0 28px;
    }
}

.c-variation__item {
    display: flex;
    position: relative;
    flex: 1 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    gap: 0;
    padding: 12px 0;
    border-radius: 0;
    text-decoration: none;
}

@media (min-width: 600px) {
    .c-variation__item {
        padding: 20px 0;
    }
}

@media (min-width: 760px) {
    .c-variation__item {
        flex-direction: row;
    }
}

/* 1px gradient rules between the tabs, plus a leading one on desktop.
   Selectors are deliberately deep: app.css draws a shorter, solid 2px
   divider at .o-lines__bg .c-variation__item specificity. */
.c-variation__box .c-variation .c-variation__item:not(:last-child)::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #3a3a52 55.73%, rgba(58, 58, 82, .08));
}

@media (min-width: 1140px) {
    .c-variation__box .c-variation .c-variation__item::after,
    .c-variation__box .c-variation .c-variation__item:first-child::before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(180deg, #3a3a52 55.73%, rgba(58, 58, 82, .08));
    }

    .c-variation__box .c-variation .c-variation__item::after {
        right: 0;
    }

    .c-variation__box .c-variation .c-variation__item:first-child::before {
        left: 0;
    }
}

.c-variation__item img,
.c-variation__item svg {
    display: block;
    flex-shrink: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    margin: 0;
    border: 0;
    overflow: hidden;
    object-fit: contain;
}

@media (min-width: 600px) {
    .c-variation__item img,
    .c-variation__item svg {
        width: 32px;
        height: 32px;
        max-width: 32px;
        max-height: 32px;
    }
}

.c-variation__item span {
    z-index: 1;
    margin: 4px 0 0;
    color: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

@media (min-width: 600px) {
    .c-variation__item span {
        margin-top: 12px;
        font-size: 16px;
    }
}

@media (min-width: 760px) {
    .c-variation__item span {
        margin-top: 0;
        margin-left: 8px;
    }
}

/* the old dotted rule under the tabs is replaced by the tab bar border */
.navigation-underline {
    display: none !important;
}

/* reference colour-codes both the icon and the label per category */
.c-variation__item_slots { color: #07bcf7; }
.c-variation__item_live { color: #fb7903; }
.c-variation__item_desks { color: #a975ff; }
.c-variation__item_tour { color: #ffde26; }

.c-variation__item_slots:hover {
    background: radial-gradient(48.61% 48.61% at 50% 100%, rgba(8, 193, 250, .1) 0, rgba(10, 194, 250, 0) 100%);
}

.c-variation__item_live:hover {
    background: radial-gradient(48.61% 48.61% at 50% 100%, rgba(251, 121, 3, .1) 0, rgba(251, 121, 3, 0) 100%);
}

.c-variation__item_desks:hover {
    background: radial-gradient(48.61% 48.61% at 50% 100%, rgba(151, 71, 255, .1) 0, rgba(151, 71, 255, 0) 100%);
}

.c-variation__item_tour:hover {
    background: radial-gradient(48.61% 48.61% at 50% 100%, rgba(255, 161, 74, .1) 0, rgba(255, 161, 74, 0) 100%);
}

/* ------------------------------------------------- game catalog toolbar */

.game-catalog-header {
    gap: 12px;
    margin-bottom: 20px;
}

/* the reference controls are 48px tall with a 4px corner and a flat #101018
   fill lit from below by a 1px gradient border */
.game-catalog-header__select,
.vv-providers__trigger,
.game-catalog-header__input {
    height: 48px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(var(--vv-bg-deep), var(--vv-bg-deep)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)) border-box;
    color: var(--vv-text);
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
}

.game-catalog-header__select {
    padding: 0 12px;
}

/* app.css paints the dropdown entries #191929, which is unreadable in the
   dark popup; the background is set too so the popup matches the control.
   Only no-JS visitors see the native list — otherwise .vv-providers takes over */
.game-catalog-header__select option,
.game-catalog-header__select optgroup {
    background-color: var(--vv-surface-2);
    color: #fff;
}

/* ---- providers dropdown, built from the native select by script.js --- */

.game-catalog-header__filter.is-enhanced .game-catalog-header__select {
    display: none;
}

.vv-providers {
    position: relative;
}

.vv-providers__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 208px;
    padding: 0 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* the reference rings the trigger gold while its list is open */
.vv-providers.is-open .vv-providers__trigger {
    border-color: #ffde26;
}

.vv-providers__chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform .18s ease;
}

.vv-providers.is-open .vv-providers__chevron {
    transform: rotate(180deg);
}

/* Three columns filled top-to-bottom, as on the reference. The height is
   left free on purpose: a capped multi-column box fragments into extra
   columns sideways instead of scrolling. */
.vv-providers__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 576px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    border: 1px solid var(--vv-border-strong);
    border-radius: 4px;
    background: #1e1e2c;
    column-count: 3;
    column-gap: 0;
}

.vv-providers:not(.is-open) .vv-providers__panel {
    display: none;
}

.vv-providers__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px 0 40px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--vv-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    break-inside: avoid;
}

.vv-providers__item:hover,
.vv-providers__item:focus-visible {
    background: var(--vv-surface-2);
}

/* the initial of each alphabetical run sits in the 40px left gutter */
.vv-providers__item[data-letter]::before {
    content: attr(data-letter);
    position: absolute;
    left: 12px;
    color: #8a8aae;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

/* the active "all providers" entry needs no gutter and stays highlighted */
.vv-providers__item_all {
    padding-left: 12px;
    background: var(--vv-surface-2);
}

/* too narrow for columns: drop to a single scrollable list, which needs the
   multi-column layout switched off so the overflow runs vertically */
@media (max-width: 640px) {
    .vv-providers__panel {
        columns: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Hit / New / favourites filter pills, matching the reference buttons.
   app.css sized the old pennant graphics at 25px wide; these are text
   buttons sharing the header button metrics instead. */
.game-catalog-header__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.game-catalog-header__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 47px;
    padding: 15px 16px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
    text-decoration: none;
}

.game-catalog-header__pill_hit {
    background: linear-gradient(1deg, #a771ff 1.73%, #7b29e4 100.44%);
}

.game-catalog-header__pill_new,
.game-catalog-header__pill_fav {
    background: radial-gradient(100.01% 100% at 50% 0, #3a3a54 0, #252536 100%);
}

.game-catalog-header__pill svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.game-catalog-header__search {
    height: 48px;
    flex: 0 1 480px;
}

/* app.css rounds the search field to a 25px pill; the reference keeps the
   same flat 4px corner as the providers trigger */
.game-catalog-header__input {
    padding-left: 16px;
    padding-right: 56px;
}

.game-catalog-header__input::placeholder {
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    color: #8a8aae;
}

.game-catalog-header__btn {
    right: 16px;
    width: 24px;
    height: 48px;
}

.game-catalog-header__hit,
.game-catalog-header__new {
    width: 22px;
}

@media (max-width: 768px) {
    .game-catalog-header__search {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ------------------------------------------------------------ game grid */

.c-games {
    gap: 16px;
    margin: 0 0 24px;
    justify-content: flex-start;
}

.c-game__wrapper {
    width: calc((100% - 16px) / 2);
    padding: 0;
}

/* a card is one square tile: the artwork fills it while the labels and the
   name sit on top of the artwork behind gradient scrims */
.c-game {
    position: relative;
    display: block;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
    background: var(--vv-bg);
    overflow: hidden;
}

.c-game:hover {
    transform: none;
}

.c-game:hover .c-game__icon img,
.c-game:focus-within .c-game__icon img {
    transform: scale(1.0205);
    filter: blur(1.15px);
}

.c-game__icon {
    height: auto;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 0;
    background: var(--vv-surface-2);
    overflow: hidden;
}

/* the grid sits inside .c-text, whose generic `img { margin: 2rem auto }`
   would otherwise push the artwork down and clip it against the box */
.c-game__icon img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    object-fit: cover;
    transition: transform .25s, filter .25s;
}

/* provider pill, optionally preceded by an Exclusive or Hot badge */
/* no z-index: like the reference, the hover overlay covers the badges while the
   game name (z-index 2) stays legible above it */
.c-game__labels {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    padding: 8px;
    overflow: hidden;
    transition: opacity .25s;
}

/* the badges clear out as the overlay comes in, so Play and Demo are the only
   things competing for attention */
.c-game:hover .c-game__labels,
.c-game:focus-within .c-game__labels {
    opacity: 0;
}

.c-game__label {
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 4px 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
}

.c-game__label + .c-game__label {
    margin-left: 4px;
}

.c-game__label_exclusive {
    background: linear-gradient(270deg, #ffd800, #ff7a00);
}

.c-game__label_hot {
    background: linear-gradient(270deg, #fe284a, #cc203b);
}

.c-game__label_provider {
    min-width: 0;
    background: rgba(16, 16, 24, .24);
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-game__label-icon {
    margin-right: 3px;
}

/* name rides the bottom of the artwork; ellipsis instead of the reference's
   clipping so long titles stay readable on narrow cards */
.c-game__name {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0 8px 8px;
    background: linear-gradient(0deg, rgba(16, 16, 24, .88) 0, rgba(16, 16, 24, .616) 32.5%, rgba(16, 16, 24, .25) 78%, rgba(16, 16, 24, 0) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* hover state: dimmed artwork, rounded play button over a glass Demo pill.
   The bottom padding keeps the pair clear of the game name. */
.c-game__overflow {
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    gap: 16px;
    padding: 0 0 26px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 8px;
    background-color: rgba(9, 9, 14, .72);
    transition: opacity .25s;
}

/* app.css only reveals the overlay on hover, which would leave the Play and
   Demo links focusable while invisible */
.c-game:focus-within .c-game__overflow {
    opacity: 1;
}

.c-game__overflow .o-btn_green {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
    background: radial-gradient(74.4% 100% at 50% 0, #96e000 0, #529900 100%);
    transition: background .25s ease, box-shadow .1s ease;
}

.c-game__overflow .o-btn_green svg {
    display: block;
    margin: 0;
}

/* the green brightens and throws a lime glow; pressing inverts the gradient */
.c-game__overflow .o-btn_green:hover,
.c-game__overflow .o-btn_green:focus-visible {
    background: radial-gradient(105.21% 141.42% at 0 0, #ccff00 0, #529900 100%);
    box-shadow: 0 0 24px rgba(204, 255, 0, .32);
}

.c-game__overflow .o-btn_green:active {
    background: radial-gradient(233.53% 141.42% at 0 0, #529900 0, #ccff00 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
}

.c-game__overflow__demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 157, 0, .4);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
    background: linear-gradient(287deg, rgba(173, 74, 4, .78) 3.2%, rgba(255, 217, 194, .16) 98.73%);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-transform: none;
    transition: background .25s ease, border-color .25s ease, border-radius .25s ease;
}

/* warms up and the amber border firms; app.css would otherwise scale it */
.c-game__overflow__demo:hover,
.c-game__overflow__demo:focus-visible {
    transform: none;
    border-color: rgba(255, 157, 0, .62);
    background: linear-gradient(287deg, rgba(192, 82, 4, .81) 3.2%, rgba(255, 217, 194, .41) 98.73%);
}

.c-game__overflow__demo:active {
    transform: none;
    border-color: rgba(255, 157, 0, .4);
    background: radial-gradient(121.84% 100% at 50% 0, rgba(173, 74, 4, .78) 0, rgba(255, 217, 194, .16) 100%);
}

/* centred under the grid, sharing the dark button style of the New pill */
.c-games__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 47px;
    margin: 24px auto 0;
    padding: 0 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
    background: radial-gradient(100.01% 100% at 50% 0, #3a3a54 0, #252536 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
}

.c-games__more:hover {
    filter: brightness(1.12);
}

@media screen and (min-width: 600px) {
    .c-game__wrapper {
        width: calc((100% - 32px) / 3);
    }
}

@media screen and (min-width: 992px) {
    .c-game__wrapper {
        width: calc((100% - 48px) / 4);
    }
}

@media screen and (min-width: 1200px) {
    .c-game__wrapper {
        width: 232px;
    }
}

/* promo strip + primary CTA (rules moved out of the per-page <style>) */
.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 0 28px;
    text-align: center;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-left: 0;
    padding: 0 26px;
    border: none;
    border-radius: var(--vv-radius-sm);
    background-color: var(--vv-red);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .18s ease;
}

.cta:hover {
    background-color: var(--vv-red-hover);
}

/* ------------------------------------------------------ article content */

/* the legacy diagonal-hatch texture is dropped for flat surfaces */
.o-lines__bg,
.o-lines__bg.is-load {
    background-image: none !important;
}

.c-text {
    max-width: var(--vv-shell);
    margin-left: auto;
    margin-right: auto;
}

/* On most pages the "New Players Get..." promo block sits above the catalogue
   and its 28px bottom padding keeps the filter buttons clear of the tab bar.
   A handful of pages ship without that block, which left the buttons flush
   against the tabs, so match the same gap when the article leads. */
.o-wrapper > .c-text:first-child {
    padding-top: 28px;
}

.c-text p,
.c-text ul,
.c-text ol {
    color: #c9ccd8;
    font-size: 15px;
    line-height: 1.65;
}

.c-text li {
    margin-bottom: 6px;
}

.c-text a:not([class]) {
    color: #5aa9ff;
    text-decoration: none;
}

.c-text a:not([class]):hover {
    text-decoration: underline;
}

.c-main h1 {
    font-size: 30px;
    margin-bottom: 16px;
}

.c-main h2 {
    font-size: 23px;
    margin-top: 28px;
    margin-bottom: 12px;
}

.c-main h3 {
    font-size: 18px;
    margin-top: 22px;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .c-main h1 { font-size: 24px; }
    .c-main h2 { font-size: 20px; }
    .c-main h3 { font-size: 17px; }
}

/* tables: flat, subtle grid instead of solid white rules */
table {
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius);
    border-collapse: collapse;
    overflow: hidden;
    font-size: 14px;
}

table tr {
    border-left: none;
    border-top: none;
}

table tr:not(:last-child) td {
    border-bottom: 1px solid var(--vv-border);
}

table td {
    border-right: none;
    border-bottom: none;
    padding: 12px 14px;
    color: #c9ccd8;
}

table td:not(:last-child) {
    border-right: 1px solid var(--vv-border);
}

table tr:first-child td {
    background-color: var(--vv-surface-2);
    color: var(--vv-text);
    font-weight: 600;
}

/* FAQ accordions */
details {
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius);
    background-color: var(--vv-surface);
    box-shadow: none;
    padding: 0;
    margin-bottom: 10px;
}

summary {
    padding: 16px 48px 16px 18px;
    border-bottom: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
}

details[open] summary {
    border-color: var(--vv-border);
}

summary::before {
    right: 18px;
    width: 14px;
    height: 2px;
    background-color: var(--vv-muted);
}

summary::after {
    right: 24px;
    width: 2px;
    height: 14px;
    top: calc(50% - 7px);
    background-color: var(--vv-muted);
}

details > div {
    padding: 14px 18px 18px;
}

details > div,
details > div * {
    color: #c9ccd8;
    font-size: 15px;
    line-height: 1.65;
}

/* table of contents */
.c-toc__btn {
    font-size: 15px;
    font-weight: 600;
}

.c-toc {
    border-left: 2px solid var(--vv-border-strong);
    padding-left: 16px;
}

.c-toc li a {
    color: #5aa9ff;
    font-size: 15px;
}

/* --------------------------------------------------------------- footer */

.footer {
    background-color: var(--vv-bg);
    border-top: 1px solid #1e1e2c;
}

.footer__block {
    max-width: var(--vv-shell);
}

.footer__inner-container {
    flex-direction: column;
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 24px;
}

.footer__help {
    justify-content: center;
    gap: 20px;
}

.footer__help > li {
    margin-right: 0;
}

.footer__help > li:hover {
    background-color: transparent;
}

.footer__help a {
    height: 40px;
    padding: 12px 4px;
    border-radius: 0;
    color: #bcbcd1;
    font-size: 16px;
    font-weight: 300;
}

.footer__help a:hover {
    background-color: var(--vv-surface-2);
}

.footer__links-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.footer__navigation-social {
    justify-content: center;
    gap: 10px;
}

.footer__navigation-social li {
    margin-right: 0;
}

.footer__navigation-social a {
    height: 40px;
    width: 40px;
    border-radius: 0;
    box-shadow: none !important;
    transition: opacity .18s ease;
}

.footer__navigation-social a:hover {
    opacity: .85;
}

.footer__navigation-social a img,
.footer__navigation-social a svg {
    height: 40px;
    width: 40px;
}

.social-telegram { background-color: #2ca3df; }
.social-vkontakte { background-color: #3a6aa3; }
.social-youtube { background-color: #f40000; }
.social-instagram { background-color: #c1338c; }
.social-facebook { background-color: #0b84ee; }
.social-x { background-color: #282828; }

/* app download buttons */
.footer__apps {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer__app-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 15px;
    border-radius: 4px;
    background: radial-gradient(100.01% 100% at 50% 0, #484851 0, #303036 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    transition: opacity .18s ease;
}

.footer__app-btn:hover {
    opacity: .88;
}

.footer__app-btn_android {
    background: radial-gradient(100.01% 100% at 50% 0, #3cc360 0, #2b8c45 100%);
}

.footer__app-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* bottom bar */
.footer__second {
    border-top: 1px solid var(--vv-border);
}

.footer__copyright-lang-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 24px;
}

/* app.css re-orders these below 1280px, which put the language switcher to
   the left of the 18+ warning instead of opposite it. */
.footer__second .footer__copyright-lang-container,
.footer__second .copyright-age-warning,
.footer__second .choose-lang {
    order: 0;
}

.footer__second .copyright-age-warning {
    gap: 14px;
}

.warning-item {
    margin-right: 0;
    gap: 14px;
}

.footer__second .age-18 {
    height: 40px;
    width: 40px;
    flex: 0 0 auto;
}

.footer__second .p-copyright,
.footer__second .p-warning {
    margin-left: 0;
    color: #8a8aae;
    font-size: 12px;
    line-height: 1.5;
}

.p-copyright:empty {
    display: none;
}

.warning-item.copyright-licence-warning-item:has(.p-copyright:empty) {
    display: none;
}

/* ------------------------------------------------- language switcher UI */

.choose-lang {
    position: relative;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    min-width: 187px;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--vv-text);
    font-size: 13.3333px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .18s ease;
}

.lang-switch__toggle:hover {
    background-color: rgba(255, 255, 255, .04);
}

.lang-switch__flag {
    width: 35px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
}

.lang-switch__chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
    transform: rotate(180deg);
}

/* Pinned to the viewport rather than the footer, so the whole list is on
   screen in one piece instead of scrolling inside a 340px box. JS sets top
   and left; the viewport clamp only bites on screens shorter than the list. */
.lang-switch__menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100; /* clears the fixed header, which sits at 1000 */
    display: none;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 4px;
    max-height: calc(100vh - 24px);
    padding: 12px;
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius);
    background-color: var(--vv-surface-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.lang-switch.is-open .lang-switch__menu {
    display: grid;
}

.lang-switch__menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--vv-text);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.lang-switch__menu a:hover {
    background-color: var(--vv-surface-3);
}

.lang-switch__menu a[aria-current="true"] {
    background-color: var(--vv-surface-3);
}

/* legacy flat list stays usable if JS is unavailable */
.bottom-footer__right {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: flex-end;
}

.bottom-footer__right a {
    color: var(--vv-muted);
    font-size: 13px;
}

.bottom-footer__right a:hover {
    color: var(--vv-text);
}

/* the flat list is the no-JS fallback; JS marks the switcher as enhanced */
.lang-switch.is-enhanced .bottom-footer__right {
    display: none;
}

.lang-switch:not(.is-enhanced) .lang-switch__toggle {
    display: none;
}

@media (max-width: 900px) {
    .footer__copyright-lang-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer__second .copyright-age-warning {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .choose-lang {
        justify-content: center;
    }

    .lang-switch__menu {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 520px) {
    .lang-switch__menu {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}