/* Виджет живых результатов.
   Построен на токенах сайта (--je-*), а не на своих цветах: тема переключается
   между тёмной (:root) и светлой ([data-theme="light"]), и виджет едет следом.
   Акцент сайта зелёный (#00d4aa / #007d66) — своих цветов не вводим.
   Селекторы вложены в .je-lr: тема красит голые table/th/td, и без этого
   таблица получала чужой фон. */

.je-lr {
    margin: 1.75rem 0;
    padding: 1.25rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: var(--je-radius-sm, 8px);
    background: var(--je-card-bg, #1a1e27);
    color: var(--je-text-secondary, #8a8f98);
}

.je-lr__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.je-lr .je-lr__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--je-text, #fff);
}

.je-lr__meta {
    margin: 0;
    font-size: .8125rem;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--je-accent, #00d4aa);
}

.je-lr__label,
.je-lr .je-lr__subtitle {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr .je-lr__subtitle {
    margin-top: 1.5rem;
}

.je-lr__last {
    padding: 1rem;
    border-radius: var(--je-radius-sm, 8px);
    background: var(--je-input-bg, #1e222b);
}

.je-lr__balls {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.je-lr .je-lr-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .3rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: 50%;
    background: var(--je-card-bg, #1a1e27);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--je-text, #fff);
}

.je-lr .je-lr-ball--hot {
    border-color: var(--je-accent, #00d4aa);
    background: var(--je-accent-glow, rgba(0, 212, 170, .2));
    color: var(--je-accent, #00d4aa);
}

.je-lr__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1rem 0 0;
}

.je-lr__facts dt {
    font-size: .75rem;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr__facts dd {
    margin: .15rem 0 0;
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--je-text, #fff);
}

.je-lr__facts-balls {
    display: flex;
    gap: .25rem;
}

.je-lr .je-lr__facts-balls .je-lr-ball,
.je-lr .je-lr__cell-balls .je-lr-ball {
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: .75rem;
}

.je-lr__pending {
    font-weight: 400;
    color: var(--je-text-muted, #5a5f68);
}

/* Кнопка-якорь к таблице результатов. */
.je-lr-jump {
    margin: 1.25rem 0;
}

/* Все состояния ссылки перечислены вместе — как в je-brand-card__cta плагина
   juegos-banners. Иначе тема перебивает: a:hover красит текст в акцент (текст
   сливался с фоном), а link-style подчёркивает ссылки в контенте. */
.je-lr-jump__btn,
.je-lr-jump__btn:hover,
.je-lr-jump__btn:focus,
.je-lr-jump__btn:active,
.je-lr-jump__btn:visited,
.entry-content p.je-lr-jump a.je-lr-jump__btn,
.entry-content p.je-lr-jump a.je-lr-jump__btn:hover,
.entry-content p.je-lr-jump a.je-lr-jump__btn:focus,
.entry-content p.je-lr-jump a.je-lr-jump__btn:active,
.entry-content p.je-lr-jump a.je-lr-jump__btn:visited {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: var(--je-radius-sm, 8px);
    background: var(--je-accent, #00d4aa);
    /* Тёмная тема — дефолт, акцент яркий, поэтому текст тёмный. */
    color: #04231d;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
}

/* В светлой теме акцент тёмно-зелёный — текст белый. */
[data-theme="light"] .je-lr-jump__btn,
[data-theme="light"] .je-lr-jump__btn:hover,
[data-theme="light"] .je-lr-jump__btn:focus,
[data-theme="light"] .je-lr-jump__btn:active,
[data-theme="light"] .je-lr-jump__btn:visited,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn:hover,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn:focus,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn:active,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn:visited {
    color: #fff;
    text-decoration: none;
}

/* На наведении меняем только фон — цвет текста уже зафиксирован выше. */
.je-lr-jump__btn:hover,
.entry-content p.je-lr-jump a.je-lr-jump__btn:hover {
    background: var(--je-accent-hover, #33f0d8);
}

[data-theme="light"] .je-lr-jump__btn:hover,
[data-theme="light"] .entry-content p.je-lr-jump a.je-lr-jump__btn:hover {
    background: #00614f;
}

/* Сколько прошло с последнего бонуса — то, ради чего возвращаются на страницу. */
.je-lr__gaps {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.je-lr__gap {
    flex: 1 1 14rem;
    padding: .7rem .9rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: var(--je-radius-sm, 8px);
}

.je-lr__gap-label {
    display: block;
    font-size: .75rem;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr__gap-value {
    display: block;
    margin-top: .15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--je-text, #fff);
}

/* Переключатель периода. */
/* Отступы блоков задаются с префиксом .je-lr: тема бьёт по голому классу
   своими правилами для контента и обнуляет margin-top. Тот же приём, что уже
   применён к таблице (.je-lr .je-lr__table td). Шаг ритма — 1.5rem, как между
   остальными секциями виджета. */
.je-lr .je-lr__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1.5rem;
}

.je-lr__periods {
    display: flex;
    gap: .25rem;
}

/* Все состояния перечислены в одном правиле: тема даёт кнопкам свою заливку
   на :focus и :active, и после клика активный период уходил в тёмно-синий
   с нечитаемым текстом. */
.je-lr__period,
.je-lr__period:hover,
.je-lr__period:focus,
.je-lr__period:focus-visible,
.je-lr__period:active {
    padding: .3rem .7rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: .8125rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--je-text-secondary, #8a8f98);
    cursor: pointer;
}

.je-lr__period.is-active,
.je-lr__period.is-active:hover,
.je-lr__period.is-active:focus,
.je-lr__period.is-active:focus-visible,
.je-lr__period.is-active:active {
    border-color: var(--je-accent, #00d4aa);
    background: transparent;
    color: var(--je-accent, #00d4aa);
}

.je-lr__period:hover:not(:disabled),
.je-lr__period:focus-visible:not(:disabled) {
    border-color: var(--je-accent, #00d4aa);
    color: var(--je-accent, #00d4aa);
}

/* Окно без дополнительных раундов: нажатие ничего не изменит, поэтому
   кнопка гаснет и объясняет себя подсказкой, а не молчит. */
.je-lr__period:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Крупнейшие выплаты периода. */
.je-lr__top {
    margin: 0;
    padding: 0;
    list-style: none;
}

.je-lr__top li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--je-border, #2a2e37);
}

.je-lr__top li:last-child {
    border-bottom: 0;
}

.je-lr__top-time {
    min-width: 7rem;
    font-size: .8125rem;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr__top-payout {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--je-text, #fff);
}

.je-lr__top-mult {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--je-accent-glow, rgba(0, 212, 170, .2));
    font-size: .8125rem;
    font-weight: 600;
    color: var(--je-accent, #00d4aa);
}

/* Таблица прокручивается внутри себя — страница по горизонтали не едет. */
.je-lr__scroll {
    overflow-x: auto;
}

.je-lr .je-lr__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: transparent;
    font-size: .875rem;
}

/* Шапка и ячейки повторяют wp-block-table темы: заливка шапки, тёмный текст,
   паддинги 12/16 и двойная нижняя граница — чтобы таблица виджета читалась
   так же, как таблицы в тексте страницы. */
.je-lr .je-lr__table th {
    padding: .75rem 1rem;
    border-bottom: 2px solid var(--je-border, #2a2e37);
    background: var(--je-input-bg, #1e222b);
    font-size: .8125rem;
    font-weight: 600;
    text-align: left;
    color: var(--je-text, #fff);
    white-space: nowrap;
}

.je-lr .je-lr__table td {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--je-border, #2a2e37);
    background: transparent;
    color: var(--je-text-secondary, #8a8f98);
    vertical-align: middle;
}

.je-lr .je-lr__table tr:last-child td {
    border-bottom: 0;
}

.je-lr__time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.je-lr__cell-balls {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    min-width: 18rem;
}

.je-lr__freq {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.je-lr__freq-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.je-lr__freq-count {
    font-size: .8125rem;
    color: var(--je-text-muted, #5a5f68);
}

.je-lr .je-lr__note {
    margin: 1.5rem 0 0;
    font-size: .875rem;
}

.je-lr__note strong {
    color: var(--je-text, #fff);
}

.je-lr .je-lr__source {
    margin: 1.5rem 0 0;
    padding-top: .875rem;
    border-top: 1px solid var(--je-border, #2a2e37);
    font-size: .8125rem;
    color: var(--je-text-muted, #5a5f68);
}

/* Новая ронда коротко подсвечивается, чтобы смена была заметна. */
@keyframes je-lr-fresh {
    from { background: var(--je-accent-glow, rgba(0, 212, 170, .2)); }
    to   { background: transparent; }
}

.je-lr .je-lr__table tr.is-fresh td {
    animation: je-lr-fresh 2s ease-out;
}

@media (max-width: 600px) {
    .je-lr {
        padding: 1rem;
    }

    .je-lr__facts {
        gap: 1rem;
    }
}

/* Игры с колесом: сектор вместо шаров. */
.je-lr__result {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.je-lr .je-lr__sector {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: .35rem .7rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: var(--je-radius-sm, 8px);
    background: var(--je-card-bg, #1a1e27);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--je-text, #fff);
    white-space: nowrap;
}

.je-lr .je-lr__sector--sm {
    min-width: 2.2rem;
    padding: .2rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
}

.je-lr__mult {
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--je-accent-glow, rgba(0, 212, 170, .2));
    font-weight: 700;
    color: var(--je-accent, #00d4aa);
}

.je-lr__tag {
    padding: .25rem .6rem;
    border: 1px solid var(--je-border, #2a2e37);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--je-text-secondary, #8a8f98);
}

.je-lr__period-note {
    margin: .1rem 0 0;
    font-size: .75rem;
    color: var(--je-text-muted, #5a5f68);
}