/* ============================================================================================================================
   365 theme - header, search bar, category ribbon (2026-10-30).
   New files for the "365" frontend theme (resources/views/frontend/365, public/frontend/365). The "Original 888" theme (Default)
   is not touched. Layout, sizes, colours and behaviour follow the saved bet365.nl casino page; the logo and the name are our own.
   Breakpoints as the model: 950px (product nav + 70px header), 768px, 1024px. Own class names (t365-*), no dependency on site-header.css.
   ============================================================================================================================ */
:root {
    --t365-primary: #28ffbb;
    --t365-primary-40: rgba(40, 255, 187, .4);
    --t365-yellow: #ffdf1b;
    --t365-bg: #111;
    --t365-bg-3: #1b1b1b;
    --t365-text: #ccc;
    --t365-white: #fff;
    --t365-grey-dd: #ddd;
    --t365-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", sans-serif;
    --t365-nav-h: 48px;
}
@media (min-width: 950px) { :root { --t365-nav-h: 70px; } }

.t365, .t365 * { box-sizing: border-box; font-family: var(--t365-font); letter-spacing: normal; }
.t365 a { text-decoration: none; }
.t365 button { font-family: inherit; }

/* ---- the header --------------------------------------------------------------------------------------------------- */
.t365-header {
    position: relative; z-index: 1000; width: 100%; height: var(--t365-nav-h); font-size: 0; user-select: none; -webkit-tap-highlight-color: transparent;
    background-color: #062117;
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 30px, #062117 calc(100% - 45px), var(--t365-bg)),
        radial-gradient(75% 61% at left 30px top 165px, #157656 0, #062117 160px);
    background-position: 0 bottom -68px, 0 bottom -68px; background-repeat: no-repeat; background-size: 100% 230px, max(600px, 100vw) 230px;
}
.t365-header__in {
    display: grid; grid-auto-flow: column; grid-template-columns: 1fr min-content 1fr; align-items: center; flex-wrap: nowrap;
    width: 100%; max-width: 1450px; height: 100%; margin: 0 auto; padding: 0 8px 0 12px;
}
.t365-header__left, .t365-header__mid, .t365-header__right { display: flex; align-items: center; height: 100%; }
.t365-header__left { gap: 8px; justify-content: flex-start; }
.t365-header__mid { justify-content: center; text-align: center; }
.t365-header__right { gap: 8px; justify-content: flex-end; }

/* the logo (our own wordmark) */
.t365-logo { display: flex; align-items: center; height: 100%; padding: 0 2px; color: var(--t365-white); outline: none; }
.t365-logo__txt { font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: -.8px !important; color: var(--t365-white); white-space: nowrap; }
.t365-logo__txt b { font-weight: 800; color: var(--t365-yellow); }   /* white name + yellow number, as the model's logo */
.t365-logo img { display: block; height: 28px; width: auto; max-width: 140px; }

/* the product nav: only from 950px */
.t365-nav { display: none; height: 100%; grid-auto-flow: column; grid-auto-columns: min-content; white-space: nowrap; gap: 55px; align-items: center; justify-content: center; }
.t365-nav__a {
    display: flex; align-items: center; height: 100%; position: relative; margin: 0; border: 0 solid transparent; border-bottom-width: 2px;
    color: var(--t365-white); font-size: 13px; font-weight: 700;
}
.t365-nav__a.is-on { border-color: var(--t365-primary); color: var(--t365-primary); }
.t365-nav__a:hover, .t365-nav__a:focus { color: var(--t365-primary); }
.t365-nav__a.is-off { opacity: .45; pointer-events: none; }

/* the pills on the right */
.t365-pill {
    display: flex; flex: 0 1 max-content; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 18px;
    background-color: #ffffff12; border: 1px solid var(--t365-primary-40); color: var(--t365-white); font-size: 12px; font-weight: 700; line-height: 30px;
    text-align: center; white-space: nowrap; cursor: pointer; outline: none; transition: border-color .25s ease, color .25s ease;
}
.t365-pill:hover, .t365-pill:focus { color: var(--t365-primary); border-color: var(--t365-primary); background-color: transparent; }
.t365-pill--yellow { color: var(--t365-yellow); border-color: var(--t365-yellow); }
.t365-pill--yellow:hover, .t365-pill--yellow:focus { color: var(--t365-primary); border-color: var(--t365-primary); }
.t365-pill svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.t365-pill svg.t365-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; margin-left: 1px; transition: transform .2s ease; }
.t365-drop.open .t365-pill svg.t365-chev { transform: rotate(180deg); }
.t365-pill__badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ffde00; color: #000; font-size: 11px; font-weight: 700; line-height: 16px; }
.t365-pill--bal { cursor: default; color: var(--t365-yellow); border-color: var(--t365-yellow); }
.t365-pill--bal:hover, .t365-pill--bal:focus { color: var(--t365-yellow); border-color: var(--t365-yellow); background-color: #ffffff12; }
.t365-pill--bal b { font-weight: 700; color: var(--t365-yellow); }
.t365-pill--hide-s { display: none; }
/* the balance ("0 EUR" + a round plus, green outline) and the round account button - the bet365 phone header */
.t365-bal {
    display: flex; flex: 0 1 max-content; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 4px 0 11px; border-radius: 15px;
    background-color: #00000040; border: 1px solid var(--t365-primary-40); color: var(--t365-white); font-size: 11px; font-weight: 700; line-height: 26px;
    white-space: nowrap; cursor: default;
}
.t365-bal__amt { min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.t365-bal__plus { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--t365-primary); stroke-width: 1.6; stroke-linecap: round; }
.t365-avatar {
    position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: #7b7e7d; color: #ececec; cursor: pointer; outline: none; overflow: visible; transition: background-color .25s ease;
}
.t365-avatar svg { display: block; width: 100%; height: 100%; fill: currentColor; }   /* the figure fills the circle, cut by its edge */
.t365-avatar:hover, .t365-avatar:focus, .t365-drop.open .t365-avatar { background: #8e9190; }
.t365-avatar .t365-pill__badge { position: absolute; top: -5px; right: -7px; }
.t365-drop__list .t365-drop__user { cursor: default; }
@media (min-width: 950px) {
    .t365-bal { height: 32px; font-size: 12px; line-height: 30px; padding-left: 13px; }
    .t365-bal__plus { width: 20px; height: 20px; }
    .t365-avatar { width: 32px; height: 32px; }
}

/* drop-down menus (language, account) */
.t365-drop { position: relative; display: flex; align-items: center; }
.t365-drop__list {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1100; min-width: 190px; padding: 6px 0; border-radius: 12px;
    background: var(--t365-bg-3); border: 1px solid #383838; box-shadow: 0 10px 28px rgba(0, 0, 0, .6);
}
.t365-drop.open .t365-drop__list { display: block; }
.t365-drop__list a, .t365-drop__list button, .t365-drop__list .t365-drop__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 16px; background: none; border: 0; text-align: left;
    color: var(--t365-grey-dd); font-size: 13px; font-weight: 700; cursor: pointer;
}
.t365-drop__list a:hover, .t365-drop__list button:hover { background: #ffffff10; color: var(--t365-primary); }
.t365-drop__list .is-sel { color: var(--t365-primary); }
.t365-drop__sep { height: 1px; margin: 6px 0; background: #383838; }
.t365-drop__row b { color: var(--t365-white); }

/* the menu button and the drawer (phones and tablets) */
.t365-burger { display: flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; background: none; border: 0; color: var(--t365-white); cursor: pointer; }
.t365-burger svg { width: 22px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.t365-drawer__backdrop { position: fixed; inset: 0; z-index: 1999; display: none; background: rgba(0, 0, 0, .6); }
.t365-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2000; width: min(86vw, 320px); padding: 14px 0 24px; overflow-y: auto; background: var(--t365-bg-3);
    transform: translateX(-102%); transition: transform .25s ease; box-shadow: 8px 0 28px rgba(0, 0, 0, .6);
}
body.t365-drawer-open .t365-drawer { transform: none; }
body.t365-drawer-open .t365-drawer__backdrop { display: block; }
.t365-drawer__brand { display: block; padding: 6px 18px 14px; }
.t365-drawer a, .t365-drawer .t365-drawer__row, .t365-drawer button.t365-drawer__row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 18px; background: none; border: 0; border-bottom: 1px solid #262626;
    color: var(--t365-grey-dd); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
}
.t365-drawer a.is-on { color: var(--t365-primary); }
.t365-drawer a.is-off { opacity: .45; pointer-events: none; }
.t365-drawer__title { padding: 16px 18px 6px; color: #999; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px !important; }
.t365-drawer__row b { color: var(--t365-white); }

/* ---- wider screens ------------------------------------------------------------------------------------------------ */
@media (min-width: 950px) {
    .t365-header {
        background-image: radial-gradient(ellipse at center top, #116e51, var(--t365-bg) 55%);
        background-size: 200% 200px; background-position: 50% 0;
    }
    .t365-header__in { padding: 0 20px; }
    .t365-nav { display: grid; }
    .t365-burger { display: none; }
    .t365-logo__txt { font-size: 28px; }
    .t365-pill--hide-s { display: flex; }
}

/* ---- the search bar (lobby) ---------------------------------------------------------------------------------------- */
.t365-search {
    position: sticky; top: 0; z-index: 10; width: 100%; height: 60px; padding: 10px 22px; line-height: 40px; will-change: transform;   /* 22px = 12px + the 10px the model keeps for its scroll bar */
    background-color: var(--t365-bg);
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 30px, #062117 calc(100% - 45px), var(--t365-bg)),
        radial-gradient(75% 61% at left 30px top 165px, #157656 0, #062117 160px);
    background-position: 0 bottom -22px, 0 bottom -22px; background-repeat: no-repeat; background-size: 100% 230px, max(600px, 100vw) 230px;
}
@media (min-width: 950px) { .t365-search { background-image: none; } }
.t365-search__pill { display: flex; height: 100%; width: 100%; max-width: 1450px; margin: 0 auto; border-radius: 25px; background: #d8d8d826; }
@media (min-width: 950px) { .t365-search__pill { max-width: 1390px; } }
.t365-search__btn {
    display: flex; flex: 1 0 45px; align-items: center; justify-content: center; margin-left: 6px; padding: 0; background: none; border: 0; cursor: pointer; color: #fff;
    max-width: 45px;
}
.t365-search__btn svg { width: 16px; height: 18px; fill: #fff; }
@media (min-width: 768px) { .t365-search__btn svg { width: 18px; height: 18px; } }
.t365-search__input {
    display: block; width: 100%; padding-left: 5px; background: transparent; border: none; outline: none; line-height: inherit; font-size: 16px; font-weight: 700;
    color: var(--t365-white); caret-color: var(--t365-primary); cursor: pointer;
}
.t365-search__input:focus { cursor: text; }
.t365-search__input::placeholder { font-size: 14px; color: #fff; opacity: .95; }
.t365-search__x { display: none; align-items: center; justify-content: center; width: 44px; height: 100%; padding: 0; background: none; border: 0; color: var(--t365-white); font-size: 22px; cursor: pointer; }
.t365-search.has-text .t365-search__x { display: flex; }
/* the lists of the sort + filter pill */
.t365-filter__list {
    display: none; position: absolute; top: calc(100% + 10px); right: -12px; z-index: 30; width: min(230px, 70vw); max-height: 60vh; overflow-y: auto; padding: 6px 0; border-radius: 12px;
    background: var(--t365-bg-3); border: 1px solid #383838; box-shadow: 0 10px 28px rgba(0, 0, 0, .6); line-height: 1.2;
}
.t365-tools__item.open .t365-filter__list { display: block; }
.t365-filter__list a, .t365-filter__list button { display: block; width: 100%; padding: 10px 16px; background: none; border: 0; color: var(--t365-grey-dd); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.t365-filter__list a:hover, .t365-filter__list a.selected, .t365-filter__list button:hover, .t365-filter__list button.selected { background: #ffffff10; color: var(--t365-primary); }

/* ---- the category ribbon ------------------------------------------------------------------------------------------- */
.t365-ribbon { position: relative; z-index: 1; width: 100%; margin: 0 auto; background-color: var(--t365-bg); text-align: center; user-select: none; }
.t365-ribbon__scroll { width: 100%; max-width: 1450px; margin: 0 auto; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t365-ribbon__scroll::-webkit-scrollbar { display: none; }
.t365-ribbon__list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 20px; width: max-content; min-height: 81px; margin: 0 auto; padding: 15px 10px; list-style: none; }
.t365-ribbon__item { margin: 0; padding: 0; list-style: none; }
.t365-ribbon__a {
    position: relative; display: inline-block; min-width: 45px; max-width: 95px; padding: 0; background: none; border: 0; text-align: center; cursor: pointer; color: var(--t365-grey-dd);
    -webkit-tap-highlight-color: transparent;
}
.t365-ribbon__a:hover, .t365-ribbon__a:focus, .t365-ribbon__item.active .t365-ribbon__a { color: var(--t365-primary); }
.t365-ribbon__a:hover { filter: brightness(120%); }
.t365-ribbon__ico { display: block; width: 100%; height: 36px; margin: 0; padding-bottom: 4px; }
.t365-ribbon__ico svg { display: block; width: 37px; height: 32px; margin: 0 auto; }
.t365-ribbon__txt { margin: 0; overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 15px; font-weight: 700; }

/* ---- the provider tiles under the ribbon (the games pages): grey logo tiles in two rows, scrolling sideways, the picked one lighter ---- */
.t365-prov { position: relative; display: block; width: 100%; max-width: 1450px; margin: 0 auto; padding: 16px 25px 0; overflow: hidden; background: var(--t365-bg); }
.t365-prov .cal-days-cont { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t365-prov .cal-days-cont::-webkit-scrollbar { display: none; }
.t365-prov .providers-inline { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 62px); grid-auto-columns: 160px; gap: 4px; width: max-content; margin: 0; padding: 0; list-style: none; }
.t365-prov .provider-item-subtab { margin: 0; padding: 0; border: 0; background: none; list-style: none; }
.t365-prov .provider-item-subtab a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 62px; padding: 6px 8px; overflow: hidden; border-radius: 6px; background: #303030;
    color: var(--t365-grey-dd); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color .2s ease, color .2s ease;
}
.t365-prov .provider-item-subtab a:hover, .t365-prov .provider-item-subtab a:focus { background: #404040; color: var(--t365-white); }
.t365-prov .provider-item-subtab.selected a { background: #555; color: var(--t365-white); }
.t365-prov .provider-logo { flex: 0 0 auto; width: 118px; height: 26px; background: center / contain no-repeat; }
.t365-prov .provider-name-subtab { max-width: 100%; overflow: hidden; color: var(--t365-text); font-size: 11px; font-weight: 700; line-height: 13px; text-overflow: ellipsis; text-transform: none; letter-spacing: .2px; }
.t365-prov .provider-item-subtab.selected .provider-name-subtab, .t365-prov .provider-item-subtab a:hover .provider-name-subtab { color: var(--t365-white); }
/* a logo that carries the provider's name: the logo alone, bigger, in the middle of the tile */
.t365-prov .provider-item-subtab.is-logo-only .provider-logo { width: 132px; height: 36px; }
@media (max-width: 767px) { .t365-prov .provider-item-subtab.is-logo-only .provider-logo { width: 116px; height: 32px; } }
.t365-prov .cal-swiper {
    position: absolute; top: calc(50% + 8px); z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #2a2a2a;
    border: 1px solid #444; color: var(--t365-white); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, border-color .2s ease;
}
.t365-prov .cal-swiper[data-lobby-slide="-1"] { left: 10px; }
.t365-prov .cal-swiper[data-lobby-slide="1"] { right: 10px; }
.t365-prov:hover .cal-swiper { opacity: 1; pointer-events: auto; }
.t365-prov.at-start .cal-swiper[data-lobby-slide="-1"], .t365-prov.at-end .cal-swiper[data-lobby-slide="1"] { opacity: 0; pointer-events: none; }
.t365-prov .cal-swiper:hover { border-color: var(--t365-primary); color: var(--t365-primary); }
@media (hover: none) { .t365-prov .cal-swiper { display: none; } }
@media (max-width: 767px) {
    .t365-prov { padding: 16px 0 0 18px; }
    .t365-prov .providers-inline { grid-auto-columns: 140px; padding-right: 18px; }
}
/* the sort + filter pill, on the right under the tiles */
.t365-tools { position: relative; z-index: 20; display: flex; justify-content: flex-end; width: 100%; max-width: 1450px; margin: 0 auto; padding: 16px 20px 10px; background: var(--t365-bg); }
.t365-tools__pill { display: flex; align-items: center; gap: 18px; height: 29px; padding: 0 12px; border-radius: 20px; }
.t365-tools__item { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; color: var(--t365-white); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; user-select: none; }
.t365-tools__item > svg { width: 22px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t365-tools__item:hover, .t365-tools__item.open { color: var(--t365-primary); }
/* searching: the results alone */
#lobbyBar:has(.t365-search.has-text) .t365-prov, #lobbyBar:has(.t365-search.has-text) .t365-tools { display: none; }

/* the old header blocks stay in the page (scripts look for them) but are not shown; the games menu strip of the Original 888 phones is replaced by the ribbon */
#woocasino > header.header, #woocasino .sticky-games-menu-mob, .t365-legacy { display: none !important; }

/* the phones' own tab row of the Original 888 is replaced by the ribbon */
html body ul#casino-tabs { display: none !important; }

/* ---- the footer (laid out like the model's: back-to-top, responsible-gaming row, legal block + link grid, cookie notice, products row) ---- */
.t365-footer { display: block; position: relative; left: 50%; width: 100vw; margin: 40px 0 0 -50vw; padding: 0; overflow: hidden; background: #1b1b1b; color: #999; font-size: 0; text-align: left; }
.t365-footer a { text-decoration: none; }
/* the back-to-top button sits in the warning row (.t365-footer__warn), on its right: icon over a small label, so the footer stays short */
.t365-footer__top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; margin: 0; padding: 0 0 0 8px; border: 0; background: none; color: #fff; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; }
html body .t365-footer .t365-footer__top span { color: inherit; font-size: 10px; line-height: 12px; }
.t365-footer__top svg { flex: 0 0 auto; width: 28px; height: 28px; }
/* the site's link colours (purple on hover / visited) must not reach it: white, the accent on hover */
html body .t365-footer a.t365-footer__top, html body .t365-footer a.t365-footer__top:visited, html body .t365-footer a.t365-footer__top:active { color: #fff; background: none; }
html body .t365-footer a.t365-footer__top:hover, html body .t365-footer a.t365-footer__top:focus { color: var(--t365-primary); background: none; }
@media (min-width: 768px) { .t365-footer__top { display: none; } }
.t365-footer__rg { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; max-width: 1450px; margin: 30px auto; padding: 0 15px; }
.t365-footer__box { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 1px solid #444; border-radius: 4px; color: #ccc; font-size: 12px; font-weight: 700; }
.t365-footer__box--icon { padding: 0 6px; }
.t365-footer__age { display: block; width: 24px; height: 24px; }
.t365-footer__warn { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1450px; margin: 30px auto; padding: 0 15px; }
.t365-footer__warn div { width: 100%; min-width: 0; margin: 0 auto 0 0; font-size: 13px; line-height: 20px; color: #999; }
.t365-footer__warn span { color: #999; font-size: 13px; }
@media (min-width: 768px) { .t365-footer__warn div { width: 75%; } }
@media (min-width: 1024px) { .t365-footer__warn div { width: 50%; } }
.t365-footer__main { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 30px 50px; align-items: start; width: 100%; max-width: 1450px; margin: 30px auto; padding: 0 15px; }
@media (min-width: 768px) { .t365-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* the model: legal text left, link grid in the right half */
.t365-footer__brand { padding-bottom: 20px; }
.t365-footer__brand .t365-logo__txt { font-size: 21px; }
.t365-footer__legal { box-sizing: border-box; width: 100%; padding-right: 20px; color: #999; font-size: 10px; line-height: 17px; }
.t365-footer__legal p { margin: 0; color: #999; font-size: 10px; }
@media (min-width: 768px) { .t365-footer__legal { padding-right: 100px; } }
.t365-footer__links { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); grid-auto-rows: 40px; text-align: left; }
@media (min-width: 1024px) { .t365-footer__links { grid-template-columns: repeat(3, 1fr); } }
.t365-footer__links a { display: inline-block; height: 40px; color: #999; font-size: 11px; line-height: 40px; }
.t365-footer__links a span { font-size: 11px; }
.t365-footer__links a:hover, .t365-footer__links a:focus { color: var(--t365-primary); }
.t365-footer__cookie { grid-column: 1 / -1; color: #999; font-size: 10px; line-height: 17px; }
.t365-footer__cookie p { margin: 0; color: #999; font-size: 10px; }
.t365-footer__cookie a { color: #999; font-weight: 700; }
.t365-footer__cookie a:hover { color: var(--t365-primary); }
.t365-footer__bottom { width: 100%; margin-top: 10px; border-top: 1px solid #383838; }
.t365-footer__bottom-in { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px 20px; width: 100%; max-width: 1450px; margin: 20px auto 0; padding: 0 15px 20px; }
@media (min-width: 768px) { .t365-footer__bottom-in { justify-content: space-between; min-height: 60px; } }
.t365-footer__prod { display: flex; flex-wrap: wrap; }
.t365-footer__prod a { height: 40px; padding: 0 25px 0 0; color: #999; font-size: 14px; line-height: 40px; }
.t365-footer__prod a:hover, .t365-footer__prod a:focus { color: var(--t365-primary); }
.t365-footer__copy { color: #999; font-size: 10px; line-height: 17px; font-weight: 700; }
.t365-footer__note { position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translateX(-50%); padding: 10px 18px; border-radius: 20px; background: #333; color: #fff; font-size: 13px; }
.t365-footer__note[hidden] { display: none; }

/* ---- one font for the whole page: the header's (the model's own text font = the system UI font stack; its Futura headings are a paid font and are not used) ---- */
html body,
html body :where(div, span, p, a, li, ul, ol, button, input, select, textarea, label, h1, h2, h3, h4, h5, h6, td, th, b, strong, small, em, nav, header, footer, section, article, aside, main, dl, dt, dd):not([class*="icon"]):not([class^="fa"]):not(.fa):not(i):not([class*="glyph"]) {
    font-family: var(--t365-font) !important;
}

/* ---- the games: pods like the model's game pods (rounded corners, the picture cropped to the card, darker on hover) in the shape of the Joker Strong cover
        (3:4); 8 in a row on a desktop, 5 on a tablet, 3 on a phone. The home page shows them in rows that scroll sideways. ---- */
/* the page's section is a flex item with auto side margins: without a width it takes its content's width (1450px on a phone, the ribbon's width on the home page) */
html body section.section_main { width: 100%; max-width: 100%; min-width: 0; }
html body .is-home-hidden, html body .is-search-hidden { display: none !important; }
html body .games-list { padding: 0 !important; background: transparent !important; }
html body .games-list .games-list__title-wrp { display: none !important; }
html body .games-list .games-list__wrap,
html body .games-list #gamesListWrap, html body .games-list #gamesFeaturedWrap, html body .games-list #gamesFavWrap {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px !important;
    width: 100% !important; max-width: 1450px !important; margin: 0 auto !important; padding: 0 18px 24px !important; background: transparent !important; box-sizing: border-box !important; overflow: visible !important;
}
@media (min-width: 768px) { html body .games-list .games-list__wrap, html body .games-list #gamesListWrap, html body .games-list #gamesFeaturedWrap, html body .games-list #gamesFavWrap { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 15px 24px !important; } }
@media (min-width: 1100px) { html body .games-list .games-list__wrap, html body .games-list #gamesListWrap, html body .games-list #gamesFeaturedWrap, html body .games-list #gamesFavWrap { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
html body .games-list .games-list__wrap[hidden], html body .games-list #gamesListWrap[hidden], html body .games-list #gamesFeaturedWrap[hidden], html body .games-list #gamesFavWrap[hidden] { display: none !important; }
html body .games-list .games-search-empty, html body .games-list .games-empty { grid-column: 1 / -1; margin: 0 !important; padding: 40px 10px !important; background: transparent !important; color: var(--t365-text) !important; font-size: 14px !important; text-align: center !important; }
html body .games-list .games-empty[hidden], html body .games-list__more[hidden] { display: none !important; }
html body .games-list__more { margin: 0 !important; padding: 8px 15px 30px !important; background: transparent !important; text-align: center !important; }
html body .games-list__more .games-list__more-btn {
    display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 32px !important; min-width: 0 !important; margin: 0 !important; padding: 0 18px !important;
    background: #ffffff12 !important; border: 1px solid var(--t365-primary-40) !important; border-radius: 18px !important; box-shadow: none !important;
    color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 30px !important; text-transform: none !important; text-decoration: none !important; transition: border-color .25s ease, color .25s ease;
}
html body .games-list__more .games-list__more-btn:hover { color: var(--t365-primary) !important; border-color: var(--t365-primary) !important; background: transparent !important; }

/* the pod */
.t365-pod {
    position: relative; display: block; box-sizing: border-box; width: 100%; min-width: 0; aspect-ratio: 3 / 4; overflow: clip; border-radius: 12px; cursor: pointer; background: #333;
    transition: transform .14s ease-out;
}
.t365-pod:active { transform: scale(.97); }
.t365-pod__link { position: absolute; inset: 0; z-index: 3; pointer-events: auto; }
.t365-pod__img { position: absolute; inset: 0; overflow: clip; background-color: #333; }
.t365-pod__img img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; transition: filter .16s ease-out; }
/* a game without a portrait cover: its square picture whole, over a darkened, blurred copy of itself */
.t365-pod--wide .t365-pod__img { background: #111; }
.t365-pod--wide .t365-pod__img::before { content: ''; position: absolute; inset: -16px; z-index: 0; background: var(--wide-bg) center / cover no-repeat; filter: blur(14px) brightness(.55); }
.t365-pod--wide .t365-pod__img img { object-fit: contain; }
/* the white edge in the bottom-left and top-right corners: off (user 2026-11-01) */
.t365-pod__edge { display: none; }
/* the play button first, then the name, then the smallest and the biggest bet: on hover (on a touch screen a tap on the card opens the game) */
.t365-pod__hover {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; text-align: center;
    opacity: 0; transition: opacity .16s ease-out; pointer-events: none;
}
.t365-pod__play { display: block; flex: 0 0 auto; width: 54px; height: 54px; transition: transform .16s ease-out; }
.t365-pod__play svg { display: block; width: 100%; height: 100%; }
.t365-pod__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; width: 100%; margin: 0; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; line-height: 17px; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.t365-pod__bets { display: flex; flex-direction: column; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center; }
.t365-pod__bets span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t365-pod.is-open .t365-pod__hover { opacity: 1; }
.t365-pod.is-open .t365-pod__img img { filter: brightness(.4); }
/* phones and tablets: the cards on the provider tiles' grey (the submenu's), not black - behind the picture, the open card's veil, the bets */
@media (max-width: 949px), (hover: none) {
    .t365-pod, .t365-pod__img, .t365-pod--wide .t365-pod__img { background-color: #303030; }
    .t365-pod--wide .t365-pod__img::before { filter: blur(14px) brightness(.8); }
    .t365-pod__hover { background: rgba(48, 48, 48, .82); }
    .t365-pod.is-open .t365-pod__img img { filter: none; }
    .t365-pod__bets { padding: 3px 5px; background: #303030; border: 1px solid #444; font-size: 10px; line-height: 13px; letter-spacing: -.1px; }
    .t365-pod__hover { gap: 5px; padding: 6px 4px; }
    .t365-pod__play { width: 38px; height: 38px; }
    .t365-pod__title { font-size: 10px; line-height: 13px; }
}
@media (hover: none) {
    .t365-pod__hover { gap: 5px; padding: 6px 5px; }
    .t365-pod__play { width: 38px; height: 38px; }
    .t365-pod__title { font-size: 10px; line-height: 13px; }
    .t365-pod__bets { padding: 3px 6px; font-size: 10px; line-height: 13px; }
}
@media (hover: hover) {
    .t365-pod:hover .t365-pod__img img { filter: brightness(.4); }
    .t365-pod:hover .t365-pod__hover, .t365-pod:focus-within .t365-pod__hover { opacity: 1; }
    .t365-pod:hover .t365-pod__play { transform: scale(1.07); }
}

/* the home page: rows of pods, each scrolling sideways */
.t365-home { display: block; width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 0 20px; }
/* the banners: four in a row on a desktop, a sideways swipe with the next one peeking on a phone */
.t365-offers { margin: 0 0 14px; padding: 12px 0 0 18px; }
.t365-offers__track { display: grid; grid-auto-flow: column; grid-auto-columns: 342px; gap: 10px; padding-right: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t365-offers__track::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .t365-offers { padding: 12px 18px 0; } .t365-offers__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-right: 0; overflow: visible; } }
.t365-offer { position: relative; display: block; height: 148px; overflow: hidden; border-radius: 10px; color: #fff; scroll-snap-align: start; box-shadow: inset 0 0 0 1px #ffffff1f; transition: filter .16s ease-out; }
.t365-offer:hover { filter: brightness(1.12); }
.t365-offer--1 { background: radial-gradient(120% 140% at 85% 20%, #1c9f77 0, #07432f 55%, #062117 100%); }
.t365-offer--2 { background: radial-gradient(120% 140% at 85% 20%, #7a3df0 0, #33167c 55%, #150a36 100%); }
.t365-offer--3 { background: radial-gradient(120% 140% at 85% 20%, #2f8fe0 0, #123f80 55%, #081a38 100%); }
.t365-offer--4 { background: radial-gradient(120% 140% at 85% 20%, #e2591f 0, #7d2410 55%, #2c0d06 100%); }
.t365-offer__txt { position: absolute; left: 15px; top: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 170px; }
.t365-offer__eye { color: var(--t365-primary); font-size: 12px; font-weight: 700; line-height: 14px; text-transform: uppercase; }
.t365-offer__head { color: #fff; font-size: 24px; font-weight: 700; line-height: 26px; text-transform: uppercase; overflow-wrap: anywhere; }
.t365-offer__pics { position: absolute; right: 2px; top: 0; bottom: 0; z-index: 1; width: 176px; }
.t365-offer__pics img { position: absolute; top: 26px; width: 74px; height: 99px; object-fit: cover; border-radius: 7px; box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }
.t365-offer__pics img:nth-child(1) { left: 2px; transform: rotate(-8deg); }
.t365-offer__pics img:nth-child(2) { left: 50px; top: 13px; z-index: 2; }
.t365-offer__pics img:nth-child(3) { right: 2px; transform: rotate(8deg); }
.t365-offer__cta { position: absolute; left: 15px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 8px; background: var(--t365-yellow); color: #111; font-size: 13px; font-weight: 700; }
.t365-row { margin: 0 0 14px; }
.t365-row__head { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 18px; margin: 0 0 8px; }
.t365-row__title { margin: 0; padding: 0; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.t365-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t365-row__title > span { overflow: hidden; text-overflow: ellipsis; }
.t365-row__logo { display: block; flex: 0 0 auto; width: auto; height: 22px; max-width: 150px; object-fit: contain; object-position: left center; }
.t365-row__more { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid #ffffff59; border-radius: 4px; background: #ffffff0d; color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; white-space: nowrap; transition: border-color .25s ease, color .25s ease; }
.t365-row__more:hover, .t365-row__more:focus { color: var(--t365-primary); border-color: var(--t365-primary); background: transparent; }
.t365-row__body { position: relative; padding: 0 15px; }
.t365-row__track { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.t365-row__track::-webkit-scrollbar { display: none; }
.t365-row__track > .t365-pod { flex: 0 0 calc((100% - 56px) / 8); scroll-snap-align: start; }
@media (max-width: 1099px) { .t365-row__track > .t365-pod { flex-basis: calc((100% - 32px) / 5); } }
@media (max-width: 767px) { .t365-row__track > .t365-pod { flex-basis: 108px; } .t365-row__body { padding: 0 0 0 18px; } .t365-row__track { padding-right: 18px; } }
.t365-row__arrow {
    position: absolute; top: 50%; z-index: 4; display: none; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid #444; border-radius: 50%; background: rgba(17, 17, 17, .9); cursor: pointer;
    opacity: 0; transition: opacity .2s ease, border-color .2s ease;
}
.t365-row__arrow::before { content: ''; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--chev) center / 8px 13px no-repeat; mask: var(--chev) center / 8px 13px no-repeat; }
.t365-row__arrow--prev { left: 4px; --chev: url("data:image/svg+xml;charset=utf-8,%3Csvg height='12' width='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.216 12 7 11.243 1.569 6 7 .757 6.216 0 .784 5.243 0 6l.784.757z' fill='%23000'/%3E%3C/svg%3E"); }
.t365-row__arrow--next { right: 4px; --chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath fill='%23000' d='M.784 12 0 11.242 5.43 6 0 .758.784 0l5.432 5.242L7 6l-.784.758z'/%3E%3C/svg%3E"); }
@media (hover: hover) { .t365-row__arrow { display: block; } .t365-row__body:hover .t365-row__arrow { opacity: 1; } .t365-row__arrow:hover { border-color: var(--t365-primary); } .t365-row__arrow[hidden] { display: none; } }

/* ---- the sign-in page (guests): the Original 888's form and fields, in the theme's look: green glow, pill fields like the search bar, one layout on every screen ---- */
html body .one-login { background: var(--t365-bg) radial-gradient(90% 380px at 50% -80px, #157656 0, #062117 60%, transparent 100%) no-repeat; }
html body .one-login, html body .one-login * { font-family: var(--t365-font) !important; }
html body .one-login .privateHeader { padding: 46px 0 8px; background: transparent; }
html body .one-login .privateHeader a { text-decoration: none; }
html body .one-login .privateHeader .t365-logo__txt { font-size: 34px; }
html body .one-login #oneLoginForm { margin: 26px 0 40px; padding: 0 16px; }
html body .one-login #login_notLG { width: 100%; max-width: 360px; margin: 0 auto; padding: 0; text-align: left; }
html body .one-login .ol-field { display: flex; align-items: center; height: 48px; margin-bottom: 14px; padding: 0 6px; border: 1px solid transparent; border-radius: 25px; background: #d8d8d826; transition: border-color .2s ease; }
html body .one-login .ol-field:focus-within { border-color: var(--t365-primary); }
html body .one-login .ol-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; color: #fff; opacity: .8; }
html body .one-login .ol-ico svg { max-width: 20px; }
html body .one-login .ol-act { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 100%; padding: 0; background: none; border: 0; color: #fff; opacity: .75; cursor: pointer; }
html body .one-login .input_grey { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; padding: 0 4px; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #fff; font-size: 16px; font-weight: 700; }
html body .one-login .input_grey::placeholder { color: #fff; font-size: 14px; font-weight: 700; opacity: .85; }
html body .one-login .input_grey:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: 0 0 0 40px #24332d inset; border-radius: 0; }
html body .one-login .modal__error { margin: 0 0 12px 6px; }
html body .one-login .login { align-items: stretch; }
html body .one-login .ol-remember { order: -1; display: inline-flex; gap: 10px; margin: 2px 0 16px 6px; color: var(--t365-grey-dd); font-size: 13px; }
html body .one-login .ol-remember input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid #ffffff80; border-radius: 4px; background: transparent; box-shadow: none; cursor: pointer; }
html body .one-login .ol-remember input:checked { background: var(--t365-primary); border-color: var(--t365-primary); box-shadow: inset 0 0 0 3px var(--t365-bg); }
html body .one-login .button_grey { height: 46px; padding: 0; border: 0; border-radius: 25px; background: var(--t365-primary); box-shadow: none; color: #062117; font-size: 15px; font-weight: 700; transition: filter .16s ease-out; }
html body .one-login .button_grey:hover { background: var(--t365-primary); filter: brightness(1.1); }
html body .one-login .button_grey .ol-desk { display: inline; }
html body .one-login .button_grey .ol-mob { display: none; }
html body .one-login .langHere { display: flex; justify-content: center; margin-top: 22px; }
html body .one-login .customSelect { display: block; width: 160px; }
html body .one-login .ol-native { display: none; }
html body .one-login .selectValueWrap { height: 36px; padding: 0 12px; border: 1px solid var(--t365-primary-40); border-radius: 18px; background: #ffffff12; box-shadow: none; color: #fff; font-weight: 700; }
html body .one-login .selectList { top: calc(100% + 6px); border: 1px solid #383838; border-radius: 12px; background: var(--t365-bg-3); overflow: hidden; }
html body .one-login .selectList dd.selected { color: var(--t365-primary); }
html body .one-login .caret { border-top-color: #fff; }

/* ---- the bottom menu (phones and tablets, where the header has no product nav); it leaves the screen to an open game ---- */
.t365-tabs { display: none; }
/* phones and tablets: no product nav in the middle, so the right block takes the rest of the row and sits at its right end; smaller pills */
@media (max-width: 949px) {
    .t365-header__in { grid-template-columns: auto minmax(0, 1fr); }
    .t365-header__right { justify-self: end; justify-content: flex-end; gap: 5px; min-width: 0; margin-left: auto; }
    .t365-header__right .t365-pill { height: 26px; padding: 0 8px; gap: 4px; font-size: 11px; line-height: 24px; }
    .t365-header__right .t365-pill svg { width: 12px; height: 12px; }
    .t365-header__right .t365-pill svg.t365-chev { width: 10px; height: 10px; }
    .t365-header__right .t365-pill--bal b { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 949px) {
    .t365-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--t365-bg-3); border-top: 1px solid #333; }
    .t365-tabs__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0 2px; color: var(--t365-grey-dd); font-size: 10px; font-weight: 700; line-height: 12px; -webkit-tap-highlight-color: transparent; }
    .t365-tabs__a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .t365-tabs__a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .t365-tabs__a.is-on { color: var(--t365-primary); }
    .t365-tabs__a.is-off { opacity: .45; pointer-events: none; }
    html body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
    html body:has(.game-frame:not([style*="display:none"]):not([style*="display: none"])) .t365-tabs { display: none; }
}

/* the ribbon: bet365 casino's icons (b365/); the home icon smaller */
html body .t365-ribbon__ico img { display: block; width: auto; height: 32px; margin: 0 auto; }
/* (moved down by position, not by a margin: a top margin left the span and pushed the whole Home item - its label too - 6px lower) */
html body .t365-ribbon__item:first-child .t365-ribbon__ico img { height: 22px; position: relative; top: 5px; }
/* the games' area: the page's dark grey, not the site's black (phones too) */
html body .games-list, html body .games-list__wrap, html body .games-list__wrap.ng-scope, html body .games-list .games-list__wrap, html body .games-list #gamesListWrap { background: var(--t365-bg) !important; }
/* the phones' bottom menu: tiptime's bottom bar icons (white; the open tab the gradient one) - platform/tabs-icons.mjs */
html body #t365 .t365-tabs__a svg { display: none; }
html body #t365 .t365-tabs__a { background-repeat: no-repeat; background-position: top 7px center; background-size: 28px; justify-content: flex-end; padding-bottom: 7px; }
html body #t365 .t365-tabs__a:nth-child(1) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='color(display-p3 1.000 1.000 1.000)' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpath d='M24.089 10.421V25.25h-5.88v-5.758c0-.686-.556-1.242-1.242-1.242h-3.935c-.686 0-1.242.556-1.242 1.242v5.758H5.91V10.421L15 4.878Z'/%3E%3Cpath stroke-linecap='round' d='m3.5 11.88 11.5-7 11.5 7'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a.is-on:nth-child(1) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='0%25' y1='9.684%25' x2='115%25' y2='86.693%25' id='c'%3E%3Cstop stop-color='color(display-p3 1.000 0.875 0.106)' offset='0%25'/%3E%3Cstop stop-color='color(display-p3 0.157 1.000 0.733)' offset='100%25'/%3E%3C/linearGradient%3E%3Cfilter x='-12.2%25' y='-13.6%25' width='124.5%25' height='127.3%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.282352941 0 0 0 0 0.858823529 0 0 0 0 0.674509804 0 0 0 0.499535621 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='m11.84.12 1.432.874 10.457 6.365a.75.75 0 1 1-.779 1.281l-1.272-.774.001 14.254h-7.38v-6.508a.492.492 0 0 0-.492-.492H9.872a.492.492 0 0 0-.492.492v6.508H2V7.867l-1.27.774a.75.75 0 0 1-.972-.168l-.06-.083A.75.75 0 0 1-.05 7.36l10.372-6.315L11.839.12Zm-.001 1.756-.632.385-7.707 4.7V20.62h4.379v-5.008c0-1.05.813-1.91 1.844-1.987l.149-.005h3.935c1.1 0 1.992.892 1.992 1.992v5.008h4.379V6.961l-8.339-5.085Z' id='b'/%3E%3C/defs%3E%3Cg transform='translate(3.16 3.88)' fill-rule='nonzero' fill='none'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a:nth-child(2) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3c5.523 0 10 4.477 10 10a9.964 9.964 0 0 1-2.536 6.655l5.822 5.82a.75.75 0 0 1-1.061 1.06l-5.84-5.839A9.956 9.956 0 0 1 13 23C7.477 23 3 18.523 3 13S7.477 3 13 3Zm0 1.5a8.5 8.5 0 1 0 .001 17.001A8.5 8.5 0 0 0 13 4.5Z' fill='%23FFF'/%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a.is-on:nth-child(2) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CradialGradient cx='0%25' cy='0%25' fx='0%25' fy='0%25' r='157.709%25' gradientTransform='scale(1 .82) rotate(50.648)' id='d'%3E%3Cstop stop-color='%23FFDF1B' offset='0%25'/%3E%3Cstop stop-color='%2328FFBB' offset='100%25'/%3E%3C/radialGradient%3E%3ClinearGradient x1='16.38%25' y1='0%25' x2='93.706%25' y2='95.506%25' id='c'%3E%3Cstop stop-color='%23FFDF1B' offset='0%25'/%3E%3Cstop stop-color='%2328FFBB' offset='100%25'/%3E%3C/linearGradient%3E%3Cfilter x='-14.6%25' y='-12%25' width='143.9%25' height='119%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.282352941 0 0 0 0 0.858823529 0 0 0 0 0.674509804 0 0 0 0.499535621 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M13 3c5.523 0 10 4.477 10 10a9.964 9.964 0 0 1-2.536 6.655l5.822 5.82a.75.75 0 0 1-1.061 1.06l-5.84-5.839A9.956 9.956 0 0 1 13 23C7.477 23 3 18.523 3 13S7.477 3 13 3Zm0 1.5a8.5 8.5 0 1 0 .001 17.001A8.5 8.5 0 0 0 13 4.5Z' id='b'/%3E%3C/defs%3E%3Cg fill='none'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23FFF' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3Cuse fill='url(%23d)' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a:nth-child(3) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='34' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(4 5.808)' stroke='color(display-p3 1.000 1.000 1.000)' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3.808 0A12.96 12.96 0 0 0 0 9.193c0 3.59 1.455 6.84 3.808 9.192m18.384 0A12.96 12.96 0 0 0 26 9.192c0-3.59-1.455-6.84-3.808-9.192M7.343 3.536A7.971 7.971 0 0 0 5 9.193c0 2.209.895 4.209 2.343 5.657m11.314 0A7.975 7.975 0 0 0 21 9.193c0-2.21-.895-4.21-2.343-5.657' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='9.192' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a.is-on:nth-child(3) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='34' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CradialGradient cx='0%25' cy='0%25' fx='0%25' fy='0%25' r='170.663%25' gradientTransform='scale(.7231 1) rotate(35.87)' id='c'%3E%3Cstop stop-color='color(display-p3 1.000 0.875 0.106)' offset='0%25'/%3E%3Cstop stop-color='color(display-p3 0.157 1.000 0.733)' offset='100%25'/%3E%3C/radialGradient%3E%3Cfilter x='-10.9%25' y='-15.1%25' width='121.8%25' height='130.2%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.282352941 0 0 0 0 0.858823529 0 0 0 0 0.674509804 0 0 0 0.499535621 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M5.088.22a.749.749 0 0 1 0 1.06A12.208 12.208 0 0 0 1.5 9.942c0 3.294 1.305 6.38 3.588 8.662a.75.75 0 0 1-1.06 1.061A13.705 13.705 0 0 1 0 9.942C0 6.247 1.466 2.782 4.027.22a.749.749 0 0 1 1.06 0Zm18.385 0A13.707 13.707 0 0 1 27.5 9.942c0 3.696-1.466 7.162-4.027 9.723a.749.749 0 1 1-1.06-1.06A12.214 12.214 0 0 0 26 9.942c0-3.293-1.305-6.379-3.588-8.662a.749.749 0 1 1 1.06-1.06ZM8.623 3.755a.749.749 0 0 1 0 1.06A7.232 7.232 0 0 0 6.5 9.942c0 1.95.772 3.776 2.123 5.127a.749.749 0 1 1-1.06 1.06A8.722 8.722 0 0 1 5 9.942c0-2.351.933-4.557 2.563-6.187a.749.749 0 0 1 1.06 0Zm11.314 0A8.724 8.724 0 0 1 22.5 9.942a8.724 8.724 0 0 1-2.563 6.188.75.75 0 0 1-1.06-1.061A7.229 7.229 0 0 0 21 9.942c0-1.95-.772-3.775-2.123-5.126a.749.749 0 1 1 1.06-1.06ZM13.75 6.192a3.75 3.75 0 1 1-.001 7.501 3.75 3.75 0 0 1 .001-7.501Z' id='b'/%3E%3C/defs%3E%3Cg transform='translate(3.25 5.058)' fill-rule='nonzero' fill='none'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a:nth-child(4) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(4.5 4.5)' stroke='color(display-p3 1.000 1.000 1.000)' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10.5' cy='10.5' r='10.5'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.192 7.828 8.83 14.192 6 11.364'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a.is-on:nth-child(4) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CradialGradient cx='0%25' cy='0%25' fx='0%25' fy='0%25' r='141.421%25' id='c'%3E%3Cstop stop-color='color(display-p3 1.000 0.875 0.106)' offset='0%25'/%3E%3Cstop stop-color='color(display-p3 0.157 1.000 0.733)' offset='100%25'/%3E%3C/radialGradient%3E%3Cfilter x='-13.3%25' y='-13.3%25' width='126.7%25' height='126.7%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.282352941 0 0 0 0 0.858823529 0 0 0 0 0.674509804 0 0 0 0.499535621 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M10-1.25c6.213 0 11.25 5.037 11.25 11.25S16.213 21.25 10 21.25-1.25 16.213-1.25 10 3.787-1.25 10-1.25Zm0 1.5A9.75 9.75 0 0 0 .25 10 9.75 9.75 0 0 0 10 19.75 9.75 9.75 0 0 0 19.75 10 9.75 9.75 0 0 0 10 .25Zm5.146 6.481.077.067a.749.749 0 0 1 0 1.06l-6.364 6.365a.749.749 0 0 1-1.06 0l-2.83-2.829a.75.75 0 0 1 1.061-1.06l2.298 2.298 5.834-5.834a.752.752 0 0 1 .984-.067Z' id='b'/%3E%3C/defs%3E%3Cg transform='translate(5 5)' fill-rule='nonzero' fill='none'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='color(display-p3 1.000 1.000 1.000)' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a:nth-child(5) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='translate(1 7.25)' fill='none' fill-rule='evenodd'%3E%3Crect width='28' height='16' stroke='%23fff' stroke-width='1.5' rx='1'/%3E%3Cpath stroke='%23fff' d='M9.333 0h9.333v16H9.333z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M3-4h21.5M3 20h21.5'/%3E%3Cpath d='M2.305 4.836 2.25 7.249h.925q.202-.788.357-.725c.047.019.152-.034.403.077.133.06.392.316.737.512q.166.095.626.201-1.242.838-1.766 1.61-.523.77-.357 1.826h2.417q.075-1.564.325-2.115c.342-.754.947-1.596 1.061-2.034q.272-1.044.272-1.678h-.806l-.421.55q-.315-.07-.431-.185c-.367-.365-.815-.538-1.125-.538q-.606 0-1.1.41v-.324zm9.25 0L11.5 7.249h.925q.202-.788.357-.725c.047.019.152-.034.403.077.133.06.392.316.737.512q.166.095.626.201-1.241.838-1.766 1.61-.523.77-.357 1.826h2.417q.075-1.564.325-2.115c.342-.754.947-1.596 1.061-2.034q.272-1.044.272-1.678h-.806l-.421.55q-.315-.07-.431-.185c-.367-.365-.815-.538-1.125-.538q-.606 0-1.1.41v-.324zm9.25 0-.055 2.413h.925q.203-.788.357-.725c.047.019.152-.034.403.077.133.06.392.316.738.512q.165.095.625.201-1.241.838-1.766 1.61-.523.77-.357 1.826h2.417q.075-1.564.325-2.115c.342-.754.947-1.596 1.061-2.034q.272-1.044.272-1.678h-.806l-.421.55q-.315-.07-.431-.185c-.367-.365-.815-.538-1.125-.538q-.605 0-1.1.41v-.324z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
html body #t365 .t365-tabs__a.is-on:nth-child(5) { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cdefs%3E%3CradialGradient id='c' cx='0%25' cy='0%25' r='162.637%25' fx='0%25' fy='0%25' gradientTransform='matrix(.6149 .61487 -.47941 .78863 0 0)'%3E%3Cstop offset='0%25' stop-color='%23ffdf1b'/%3E%3Cstop offset='100%25' stop-color='%2328ffbb'/%3E%3C/radialGradient%3E%3Cfilter id='a' width='120.3%25' height='134.8%25' x='-10.2%25' y='-17.4%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' values='0 0 0 0 0.282352941 0 0 0 0 0.858823529 0 0 0 0 0.674509804 0 0 0 0.499535621 0'/%3E%3C/filter%3E%3Cpath id='b' d='M27-.75c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 27 16.75H1A1.75 1.75 0 0 1-.75 15V1C-.75.034.034-.75 1-.75ZM8.833.75H1A.25.25 0 0 0 .75 1v14c0 .138.112.25.25.25h7.833zm9.333 0H9.833v14.5h8.333zM27 .75h-7.834v14.5H27a.25.25 0 0 0 .25-.25V1A.25.25 0 0 0 27 .75m-22.533 4c.31 0 .758.173 1.125.538q.116.116.43.185l.422-.55h.806q0 .634-.272 1.678c-.114.438-.719 1.28-1.061 2.034q-.25.55-.325 2.115H3.175q-.166-1.056.357-1.826.524-.772 1.766-1.61-.46-.107-.625-.201c-.346-.196-.605-.452-.738-.512-.25-.111-.356-.058-.403-.077q-.155-.063-.357.725H2.25l.055-2.413h1.062v.324q.495-.41 1.1-.41m9.25 0c.31 0 .758.173 1.125.538q.116.116.43.185l.422-.55h.806q0 .634-.272 1.678c-.114.438-.719 1.28-1.061 2.034q-.25.55-.325 2.115h-2.417q-.166-1.056.357-1.826.524-.772 1.766-1.61-.46-.107-.626-.201c-.345-.196-.604-.452-.737-.512-.25-.111-.356-.058-.403-.077q-.155-.063-.357.725H11.5l.055-2.413h1.062v.324q.494-.41 1.1-.41m9.25 0c.31 0 .758.173 1.125.538q.116.116.43.185l.422-.55h.806q0 .634-.272 1.678c-.114.438-.719 1.28-1.061 2.034q-.25.55-.325 2.115h-2.417q-.166-1.056.357-1.826.524-.772 1.766-1.61-.46-.107-.625-.201c-.346-.196-.605-.452-.738-.512-.25-.111-.356-.058-.403-.077q-.155-.063-.357.725h-.925l.055-2.413h1.062v.324q.495-.41 1.1-.41M24.5-4.5a.5.5 0 1 1 0 1H3a.5.5 0 0 1 0-1zm0 24a.5.5 0 1 1 0 1H3a.5.5 0 1 1 0-1z'/%3E%3C/defs%3E%3Cg fill-rule='nonzero' transform='translate(1 7.25)' fill='none'%3E%3Cuse fill='%23000' filter='url(%23a)' href='%23b'/%3E%3Cuse fill='%23fff' href='%23b'/%3E%3Cuse fill='url(%23c)' href='%23b'/%3E%3C/g%3E%3C/svg%3E"); }
/* the responsible-gaming boxes inside the footer's brand block, under the legal text */
html body .t365-footer__block .t365-footer__rg { gap: 16px; max-width: none; margin: 16px 0 0; padding: 0; }

/* a category page's heading, left of the Sort / Filter pill: the provider's logo (or the ribbon's icon) and the category's name */
html body .t365-tools { align-items: center; gap: 12px; margin-top: 18px; }
html body .t365-tools__pill { margin-left: auto; flex: none; }
html body .t365-cathead { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body .t365-cathead__ico { display: flex; align-items: center; flex: none; height: 24px; }
html body .t365-cathead__ico img { display: block; width: auto; height: 24px; max-width: 130px; object-fit: contain; }
html body .t365-cathead__name { margin: 0; overflow: hidden; color: var(--t365-white); font-size: 20px; line-height: 1.2; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
/* a provider's page: its logo alone, a little bigger */
html body .t365-cathead.is-logo .t365-cathead__ico, html body .t365-cathead.is-logo .t365-cathead__ico img { height: 34px; }
html body .t365-cathead.is-logo .t365-cathead__ico img { max-width: 200px; }
@media (max-width: 600px) {
    html body .t365-cathead { gap: 8px; }
    html body .t365-tools { margin-top: 12px; }
    html body .t365-cathead__ico, html body .t365-cathead__ico img { height: 18px; }
    html body .t365-cathead__ico img { max-width: 90px; }
    html body .t365-cathead__name { font-size: 15px; }
    html body .t365-cathead.is-logo .t365-cathead__ico, html body .t365-cathead.is-logo .t365-cathead__ico img { height: 26px; }
    html body .t365-cathead.is-logo .t365-cathead__ico img { max-width: 140px; }
}

/* 2026-11-02: the phones' bottom menu bigger, with more room inside (66px, icons 32px, labels 11px) */
@media (max-width: 949px) {
    html body .t365-tabs { height: calc(74px + env(safe-area-inset-bottom)); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
    html body #t365 .t365-tabs__a { gap: 4px; padding: 0 0 7px; font-size: 10.5px; line-height: 13px; background-size: 32px; background-position: top 8px center; }
    html body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}
/* 2026-11-02: provider logos at one visual size. Each logo's width x height (px, --lw / --lh) comes from its own shape - equal area, width <= 124, height <= 40 - so a wide
   wordmark (Kajot) and a squarer mark (Pragmatic) weigh the same; --k scales the set per place. Used by the provider tiles, a provider page's heading and the home rows. */
.plg-pragmatic { --lw: 87.2; --lh: 40; }
.plg-kajot { --lw: 124; --lh: 14.5; }
.plg-lightwonder { --lw: 100.2; --lh: 40; }
.plg-hacksaw { --lw: 121.9; --lh: 34.2; }
.plg-arcade { --lw: 56; --lh: 28; }
.plg-merkur { --lw: 106.8; --lh: 39.1; }
.plg-apex { --lw: 124; --lh: 32.1; }
.plg-greentube { --lw: 124; --lh: 28.2; }
.plg-egt-digital { --lw: 109.3; --lh: 38.2; }
.plg-blueprint { --lw: 124; --lh: 30; }
.plg-amatic { --lw: 40; --lh: 40; }
html body .plg { --k: 1; flex: 0 0 auto !important; width: calc(var(--lw, 100) * var(--k) * 1px) !important; height: calc(var(--lh, 30) * var(--k) * 1px) !important; max-width: none !important; }
html body .t365-prov .provider-item-subtab:not(.is-logo-only) .plg { --k: .8; }   /* tiles that also show a name (Arcade, Hacksaw / Hacksaw 2) */
html body .t365-cathead__ico img.plg, html body .t365-row__logo.plg { object-fit: contain; object-position: left center; }
@media (max-width: 600px) { html body .t365-cathead .plg { --k: .75; } }
/* the header's right block: room on the right, and the profile circle in a dark green (it sits on the header's green glow) */
html body .t365-header__right { padding-right: 10px; }
html body .t365-avatar { background: #146b4f; color: #e6fff5; }
html body .t365-avatar:hover, html body .t365-avatar:focus, html body .t365-drop.open .t365-avatar { background: #1b8a66; }
/* 2026-11-02: more room between the home page's rows of games */
html body .t365-row { margin: 0 0 32px; }
@media (max-width: 767px) { html body .t365-row { margin-bottom: 28px; } }
/* 2026-11-02: the phones' bottom menu in two states (markup .t365-tabs--v2 in site_header): casino = Home | Menu | Virtuale or New | football button (to betting);
   betting = Home | Sports | Live | My bets | chips button (back to the casino). Plain line icons that follow the text colour; the button on the right is a round
   icon without a border. */
@media (max-width: 949px) {
    html body .t365-tabs.t365-tabs--v2 { display: flex; align-items: stretch; grid-template-columns: none; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
    html body #t365 .t365-tabs--v2 .t365-tabs__a, html body #t365 .t365-tabs--v2 .t365-tabs__a.is-on { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 6px 0; background-image: none !important; background-color: transparent; border: 0; font-family: inherit; cursor: pointer; }
    html body #t365 .t365-tabs--v2 .t365-tabs__a svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    html body #t365 .t365-tabs--v2 .t365-tabs__a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* the round button on the right: a small icon, no background; its icons take turns every 3 s (sports balls / casino) with a little flip */
    html body .t365-tabs--v2 .t365-tabs__switch { display: flex; flex: 0 0 64px; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
    html body .t365-tabs--v2 .t365-tabs__switch.is-off { opacity: 1; pointer-events: none; }   /* switched off (no betting site here): not tappable, but shown in full colour with its turning icons */
    html body .t365-tabs--v2 .t365-tabs__ball { position: relative; display: block; width: 38px; height: 38px; border-radius: 0; background: none; transition: transform .14s ease-out; }
    html body .t365-tabs--v2 .t365-tabs__ball svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transform-origin: 50% 50%; animation: t365-sw3 18s infinite backwards; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
    html body .t365-tabs--v2 .t365-tabs__ball svg:nth-child(2) { animation-delay: 6s; }
    html body .t365-tabs--v2 .t365-tabs__ball svg:nth-child(3) { animation-delay: 12s; }
    html body .t365-tabs--v2 .t365-tabs__ball svg:nth-child(4) { animation-delay: 18s; }
    html body .t365-tabs--bet .t365-tabs__ball svg { animation-name: t365-sw4; animation-duration: 24s; }
    html body .t365-tabs--v2 .t365-tabs__switch:hover .t365-tabs__ball { transform: scale(1.08); }
    html body .t365-tabs--v2 .t365-tabs__switch:active .t365-tabs__ball { transform: scale(.92); }
    /* "reduce motion" (also what a PC with Windows animations off reports): the icons still take turns, as a plain cross-fade without the turning / growing */
    @media (prefers-reduced-motion: reduce) { html body .t365-tabs--v2 .t365-tabs__ball svg { animation-name: t365-sw3f; } html body .t365-tabs--bet .t365-tabs__ball svg { animation-name: t365-sw4f; } }
}
@keyframes t365-sw3f { 0% { opacity: 0; } 3%, 30.500% { opacity: 1; } 33.300%, 100% { opacity: 0; } }
@keyframes t365-sw4f { 0% { opacity: 0; } 2.200%, 22.900% { opacity: 1; } 25%, 100% { opacity: 0; } }
/* the switch button's icons: in with a small turn, 6 s on screen, out with a turn the other way */
@keyframes t365-sw3 { 0% { opacity: 0; transform: scale(.5) rotate(-35deg); } 3%, 30.500% { opacity: 1; transform: none; } 33.300%, 100% { opacity: 0; transform: scale(.5) rotate(35deg); } }
@keyframes t365-sw4 { 0% { opacity: 0; transform: scale(.5) rotate(-35deg); } 2.200%, 22.900% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.5) rotate(35deg); } }
/* 2026-11-02: a visited / pressed link of the bottom menu and the ribbon keeps the theme's colours (the site's own link rule turned it purple) */
html body .t365-tabs a.t365-tabs__a, html body .t365-tabs a.t365-tabs__a:visited, html body .t365-tabs a.t365-tabs__a:hover, html body .t365-tabs a.t365-tabs__a:active, html body .t365-tabs a.t365-tabs__a:focus { color: var(--t365-grey-dd); text-decoration: none; }
html body .t365-tabs a.t365-tabs__a.is-on, html body .t365-tabs a.t365-tabs__a.is-on:visited, html body .t365-tabs a.t365-tabs__a.is-on:hover, html body .t365-tabs a.t365-tabs__a.is-on:active, html body .t365-tabs a.t365-tabs__a.is-on:focus { color: var(--t365-primary); }
html body .t365-ribbon a.t365-ribbon__a:visited, html body .t365-ribbon a.t365-ribbon__a:active { color: var(--t365-grey-dd); }
html body .t365-ribbon a.t365-ribbon__a:hover, html body .t365-ribbon a.t365-ribbon__a:focus, html body .t365-ribbon .t365-ribbon__item.active a.t365-ribbon__a, html body .t365-ribbon .t365-ribbon__item.active a.t365-ribbon__a:visited, html body .t365-ribbon .t365-ribbon__item.active a.t365-ribbon__a:active { color: var(--t365-primary); }
/* phones: the Home icon of the ribbon only a touch wider than drawn (1.35 looked too wide, 2026-11-03; the label stays where it is) */
@media (max-width: 767px) { html body .t365-ribbon__item:first-child .t365-ribbon__ico img { transform: scaleX(1.1); } }
/* 2026-11-02: the lobby's own background (the page's grey, as the ribbon, the tiles and the games), the open Sort / Filter list above the games, a smaller ribbon on phones */
html body .lobby-bar, html body .t365-home, html body #homeSections { background: var(--t365-bg); }
html body .lobby-bar { position: relative; z-index: 800; }
/* no black anywhere: the layout's phone rule paints the body #000 (html body, !important); the page is always the theme's grey */
html:root body, html:root body #main-loading { background: var(--t365-bg) !important; }
html:root body .carcass, html:root body .carcass__body, html:root body .main-content, html:root body .main-content__first-screen { background-color: transparent !important; }
/* the open Sort / Filter list hangs below the pill, over the games: the boxes around the lobby bar (.main-content: overflow hidden auto) cut it off - they must not clip downwards */
html body .main-content:has(#lobbyBar), html body .contain:has(#lobbyBar), html body .ng-scope:has(> #lobbyBar) { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
html body .t365-tools { z-index: 60; }
html body .t365-tools__item.open { z-index: 70; }
html body .t365-tools__item.open .t365-filter__list { z-index: 80; }
@media (max-width: 767px) {
    html body .t365-ribbon__list { gap: 22px; min-height: 72px; padding: 20px 14px 10px; }
    html body .t365-ribbon__a { min-width: 40px; max-width: 76px; }
    html body .t365-ribbon__ico { height: 26px; padding-bottom: 3px; }
    html body .t365-ribbon__ico img { height: 24px; }
    html body .t365-ribbon__item:first-child .t365-ribbon__ico img { height: 17px; top: 4px; }
    html body .t365-ribbon__txt { font-size: 10px; line-height: 13px; }
}
/* 2026-11-02: no gap above the footer, on every page. The page section is only as tall as what it holds (it was a full screen tall on a desktop) and the footer
   fills the rest of a short screen; no margin above the footer; the last row / grid / "more" button keeps 16px. */
html body .t365-footer { margin-top: 0 !important; }
html body section.section.section_main, html body section.section_main { min-height: 0 !important; flex: 0 0 auto !important; }
html body #woocasino.carcass { display: flex !important; flex-direction: column !important; min-height: 100vh !important; }
html body #woocasino.carcass > .t365-footer { flex: 1 0 auto; }
html body .games-list .games-list__wrap, html body .games-list #gamesListWrap, html body .games-list #gamesFeaturedWrap, html body .games-list #gamesFavWrap { padding-bottom: 16px !important; }
html body .games-list__more { padding-bottom: 16px !important; }
html body .t365-home { padding-bottom: 0; }
html body .t365-home .t365-row:last-child { margin-bottom: 16px; }

/* ---- 2026-11-03: the language button and lists - flag (flagcdn.com) + the language's full name ---------------------- */
.t365-flag { width: 20px; height: 15px; flex: 0 0 auto; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px #00000055; }
.t365-pill .t365-flag { width: 18px; height: 13.5px; }
.t365-drop__list .t365-lang, .t365-drawer button.t365-lang { justify-content: flex-start; gap: 10px; }
.t365-drop__list .t365-lang .t365-lang__name, .t365-drawer .t365-lang .t365-lang__name { flex: 1 1 auto; }
.t365-drop__list .t365-lang.is-sel::after, .t365-drawer .t365-lang.is-on::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t365-primary); }

/* pillfix: no border on the tools pill */
html body .t365-tools__pill { border: 0; }

/* logofix: provider logos in the filter list, no border/background on the row "more" button */
html body .t365-filter__list.providers-filter .t365-filter__logo { display: inline-block; vertical-align: middle; width: 112px; height: 22px; margin-right: 6px; background: left center / contain no-repeat; }
html body .t365-row__more, html body .t365-row__more:hover, html body .t365-row__more:focus { border: 0; background: none; }

/* outlinefix: no focus ring / tap highlight on the ribbon items, the pods and the phone tabs */
html body .t365-ribbon, html body .t365-ribbon *, html body .t365-pod, html body .t365-pod *, html body .t365-tabs, html body .t365-tabs * { -webkit-tap-highlight-color: transparent; }
html body .t365-ribbon a, html body .t365-ribbon button, html body .t365-ribbon li, html body .t365-pod, html body .t365-pod a, html body .t365-pod__link, html body .t365-tabs, html body .t365-tabs a,
html body .t365-ribbon a:focus, html body .t365-ribbon button:focus, html body .t365-pod:focus, html body .t365-pod a:focus, html body .t365-pod__link:focus, html body .t365-tabs a:focus,
html body .t365-ribbon a:focus-visible, html body .t365-ribbon button:focus-visible, html body .t365-pod:focus-visible, html body .t365-pod a:focus-visible, html body .t365-pod__link:focus-visible, html body .t365-tabs a:focus-visible,
html body .t365-ribbon a:active, html body .t365-pod:active, html body .t365-tabs a:active { outline: none !important; box-shadow: none; }

/* shadowfix: no shadow on the provider filter list */
html body .t365-filter__list.providers-filter { box-shadow: none !important; }

/* morefix: show-more-games button without border and background */
html body .games-list__more .games-list__more-btn, html body .games-list__more .games-list__more-btn:hover, html body .games-list__more .games-list__more-btn:focus, html body .games-list__more .games-list__more-btn:active { border: 0 !important; background: none !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; }

/* morefix2: bigger text on the show-more-games button */
html body .games-list__more .games-list__more-btn { font-size: 16px !important; height: 40px !important; line-height: 38px !important; padding: 0 22px !important; }

/* footerfix: responsible-gaming row - the 18+ badge and the shield pill */
html body .t365-footer__rg { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
html body .t365-footer__age18 { display: block; flex: none; width: 46px; height: 46px; }
html body .t365-footer__age18 svg { display: block; width: 100%; height: 100%; }
html body .t365-footer__resp { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 14px; border: 1px solid #3a3a3a; border-radius: 23px; background: linear-gradient(180deg, #282828, #202020); color: #e8e8e8; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
html body .t365-footer__resp svg { flex: none; width: 22px; height: 22px; color: #28ffbb; }
html body .t365-footer__resp span { color: inherit; font-size: 13px; }

/* footerfix2: the 18+ sign = a pill like the Responsible gaming one */
html body .t365-footer__resp--age { padding: 0 20px; }

/* nooutline: no focus ring / white border and no tap highlight on any link or button of the theme (inputs keep their own green border) */
html body * { -webkit-tap-highlight-color: transparent; }
html body a, html body a:focus, html body a:focus-visible, html body a:active,
html body button, html body button:focus, html body button:focus-visible, html body button:active,
html body [role="button"], html body [role="button"]:focus, html body [role="button"]:focus-visible,
html body [role="menuitem"]:focus, html body [role="option"]:focus, html body summary:focus, html body [tabindex]:focus, html body [tabindex]:focus-visible { outline: none !important; }
html body .t365-drop__list a:focus, html body .t365-drop__list button:focus, html body .t365-drop__list a:active, html body .t365-drop__list button:active { box-shadow: none !important; }
html body button::-moz-focus-inner { border: 0; }


/* jpfoot: the card's footer = one bar along the bottom of every card (same height on all 3, frames stay level): games count left, Boost right */
.t365-jp__track .t365-jp__card{padding-bottom:30px}
.t365-jp__card .t365-jp__foot{position:absolute;left:10px;right:10px;bottom:8px;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;line-height:1;pointer-events:none}
.t365-jp__card .t365-jp__games,.t365-jp__card .t365-jp__boost{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:4px;background:rgba(0,0,0,.4);font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.t365-jp__card .t365-jp__games{order:0;color:rgba(255,255,255,.8)}
.t365-jp__card .t365-jp__boost{order:1;color:#ffd84a;font-weight:700}
.t365-jp__card .t365-jp__games::before,.t365-jp__card .t365-jp__boost::before{content:"";flex:none;width:10px;height:10px;background:currentColor}
.t365-jp__card .t365-jp__games::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect width='4' height='4' rx='1'/%3E%3Crect x='6' width='4' height='4' rx='1'/%3E%3Crect y='6' width='4' height='4' rx='1'/%3E%3Crect x='6' y='6' width='4' height='4' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect width='4' height='4' rx='1'/%3E%3Crect x='6' width='4' height='4' rx='1'/%3E%3Crect y='6' width='4' height='4' rx='1'/%3E%3Crect x='6' y='6' width='4' height='4' rx='1'/%3E%3C/svg%3E") center/contain no-repeat}
.t365-jp__card .t365-jp__boost::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6 0 1 6h3.200L3.500 10 9 3.800H5.700z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6 0 1 6h3.200L3.500 10 9 3.800H5.700z'/%3E%3C/svg%3E") center/contain no-repeat}

/* dropfix: (1) the drop-down menus (language, account): smaller, line icons, rounded rows  (2) the provider filter list: every logo at its
   balanced size (the provider tiles' .plg sizes), names right after the icon  (3) the footer's back-to-top button in the brand row */
html body .t365-drop__list { min-width: 0; width: max-content; max-width: 240px; padding: 5px; border-radius: 10px; border: 1px solid #333; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
html body .t365-drop__list a, html body .t365-drop__list button, html body .t365-drop__list .t365-drop__row { justify-content: flex-start; gap: 10px; min-height: 34px; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
html body .t365-drop__list a:hover, html body .t365-drop__list button:hover { background: #ffffff0f; color: var(--t365-white); }
html body .t365-drop__list a:hover .t365-drop__ico, html body .t365-drop__list button:hover .t365-drop__ico { color: var(--t365-primary); }
html body .t365-drop__ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #9a9a9a; transition: color .15s; }
html body .t365-drop__list .t365-pill__badge { position: static; margin-left: auto; }
html body .t365-drop__sep { margin: 4px 6px; background: #333; }
html body .t365-drop__list .t365-drop__user { gap: 10px; padding: 6px 10px 8px; }
html body .t365-drop__av { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #1b8a66; color: #fff; font-size: 13px; font-weight: 700; }
html body .t365-drop__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--t365-white); font-size: 13px; font-weight: 700; }
html body .t365-drop__who span { overflow: hidden; text-overflow: ellipsis; }
html body .t365-drop__who b { color: var(--t365-primary); font-size: 12px; font-weight: 600; }
html body .t365-drop__list .t365-drop__out:hover, html body .t365-drop__list .t365-drop__out:hover .t365-drop__ico { color: #ff6b6b; }
html body .t365-drop__list .t365-lang { gap: 10px; }
html body .t365-drop__list .t365-lang.is-sel { color: var(--t365-white); background: #ffffff0a; }
html body .t365-drop__list .t365-lang .t365-lang__name { padding-right: 8px; }
html body .t365-filter__list.providers-filter a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px; }
html body .t365-filter__list.providers-filter .t365-filter__logo.plg { --k: .72; margin: 0; background: left center / contain no-repeat; }
html body .t365-filter__list.providers-filter .t365-filter__logo.plg-kajot { --k: .9; }   /* (a very wide, flat logo) */
html body .t365-filter__list.providers-filter .t365-filter__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .t365-footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body .t365-footer__brand .t365-footer__top { padding: 0; }
html body .t365-filter__list.providers-filter .plg-arcade + .t365-filter__name { margin-left: -6px; }

/* jpcat: the jackpot pages - the jackpots' logos as tiles (Bell Link / Bell Link Boost / Clover Chance), a jackpot card opens its games */
.plg-jp-bell-link { --lw: 61; --lh: 50; }
.plg-jp-bell-link-boost { --lw: 44; --lh: 50; }
.plg-jp-clover-chance { --lw: 49; --lh: 50; }
html body .t365-cathead .plg-jp-bell-link, html body .t365-cathead .plg-jp-bell-link-boost, html body .t365-cathead .plg-jp-clover-chance { --k: .72; }
html body .t365-jp__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
html body .t365-jp__card:has(.t365-jp__link) { cursor: pointer; }
html body .t365-jp__card:has(.t365-jp__link):hover { filter: brightness(1.08); }

/* brandfix: the Joker777 mask in front of the wordmark everywhere it is shown (header, menu, footer, sign-in page, popups) */
html body .t365-logo__txt { display: inline-flex; align-items: center; }
html body .t365-logo__txt::before { content: ""; flex: none; width: 1.5em; height: 1.5em; margin-right: .2em; background: url(/frontend/365/brand/mask-192.webp?v=1) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* loginlogo: the sign-in page shows only the Joker777 mask, big (no "Joker777" text) */
html body .one-login .privateHeader .t365-logo__txt { font-size: 0 !important; letter-spacing: 0 !important; }
html body .one-login .privateHeader .t365-logo__txt b { display: none; }
html body .one-login .privateHeader .t365-logo__txt::before { width: 112px; height: 112px; margin: 0; background-image: url(/frontend/365/brand/mask-320.webp?v=1); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
@media (max-width: 720px) { html body .one-login .privateHeader .t365-logo__txt::before { width: 94px; height: 94px; } }