/* filter: blur(0.17rem); */



.roulette-header {
padding: 0px;
}



.roulette-container {
    height: 282px;
    background: none;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* висота каруселі фішок: раніше 30px під плоскі прямокутники,
   тепер круглі фішки 48px + місце на hover-підйом і біле кільце вибраної */
.slick-track {
    max-height: 76px;
}
.slick-list
{
    max-height: 76px;
}
 .token-container .slick-slider {
    height: 76px !important;
max-height: 76px;
} 

/* .lBlock .line7 > div {

    display: none !important;

} */

.profile__link[aria-current="true"], .profile__link.mm_header_tab_active {
    
    color: var(--text-primary-color) !important;
}

.live:before {
  
    margin-right: 9px;

}

.modal__info-tag2 {
align-items: center;
    /* background-color: #1e1e1e; */
    /* border: 1px solid #2c2c2c; */
    border-radius: 6px;
    column-gap: 4px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 500;
    /* line-height: 1; */
    margin: 0px 5px;
    padding: 6px 9px;
    position: absolute;
}

html {
    scroll-behavior: smooth;
}

.notifications_icon {
    
    right: 21px;
   
    background-color: rgba(232, 28, 90, 0.45);
    border-radius: 8px;
    color: #F4405F !important;
    width: 26px;
    font-size: 0.7em;
    top: 15px;
    height: 26px;
  
}


.header_notifications_window {
 
    width: 298px;
    background: unset;

    margin-left: -196px;

    margin-top: 45px;

}

/* .withdraw-status-text.withdraw-denied, .withdraw-status-text.withdraw-completed
{
display: none;	
	
}
.withdraw-denied-str
{
	text-decoration: none !important;
} */

.icon_support-2 a {color: #300713;}

/* .line7 
{display: none;}  */

.info_i
{
	
width: 17px !important;
    top: 4px;
    left: 0px !important;
    height: 17px;
    background-image: url(../img/info.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.shield_i
{
	
width: 17px !important;
    top: 4px;
    left: 0px !important;
    height: 17px;
    background-image: url(../img/shield.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sound_i
{
	
width: 17px !important;
    top: 4px;
    left: 0px !important;
    height: 17px;
    background-image: url(../img/sound.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sound_i_off
{
	
width: 17px !important;
    top: 4px;
    left: 0px !important;
    height: 17px;
    background-image: url(../img/sound-off.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-anonim-text {
    text-align: center;
    margin-top: 10px;
}
.modal-anonim-h2 {
    text-align: center;
    padding: 0 50px;
    color: #ffffff;
    font-weight: 500;
    font-size: 26px;
}
.modal-anonim-wrap-btn {
    margin-top: 18px !important;
}
.btn_header-anonim-modal {
    width: 100% !important;
    padding: 16px !important;
}
.btn__text-modal-anonim {
    font-size: 14px !important;
}



/* -------------------------------------------- */

.stick-notifi {
    width: 100%;
    min-height: 66px;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.stick-notifi-inner {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}
.stick-notifi-icon {
    margin-left: 12px;
    margin-right: 12px;
}
.stick-notifi-title {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 10px;
}
.stick-notifi-text {
    margin-top: 6px;
    color: #fff;
    opacity: 0.5;
    font-size: 11px;
    line-height: 10px;
}
.stick-notifi-close {
    position: absolute;
    top: 8px;
    right: 4px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.stick-notifi-close:hover {
    opacity: 1;
}
.stick-notifi-close img {
    display: block;
    width: 16px;
    height: 16px;
}
.stick-notifi-attention {
    background: url('/assets/images2/attention.svg') center center / 100% 100% no-repeat;
}
.stick-notifi-green {
    background: url('/assets/images2/green.svg') center center / 100% 100% no-repeat;
	    background-size: cover;
}
.stick-notifi-yellow {
    background: url('/assets/images2/yellow.svg') center center / 100% 100% no-repeat;
	    background-size: cover;
}
.stick-notifi-blue {
    background: url('/assets/images2/blue.svg') center center / 100% 100% no-repeat;
	    background-size: cover;
}
.stick-notifi-red {
    background: url('/assets/images2/red.svg') center center / 100% 100% no-repeat;
	    background-size: cover; 
}


/* ===== Модалка зміни ніка (макет change-nickname-modal.html) =====
   Класи .nick-* рендерить public/js/helpers.js; .change-nickname-* лишились
   як оболонка, бо на них зав'язана розмітка в layout.blade.php. */

.change-nickname-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 999;
}

.change-nickname-modal-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #161618;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
    z-index: 1000;
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 26px 30px 30px;
    box-sizing: border-box;
    color: #fff;
}

.change-nickname-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.change-nickname-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}

.change-nickname-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9a9aa1;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.change-nickname-modal-close:hover {
    background: #222225;
    color: #fff;
}

.change-nickname-modal-body { padding: 0; }

/* поточний нік */
.nick-current {
    background: #1d1d20;
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.nick-current__l { font-size: 13px; color: #9a9aa1; }
.nick-current__v { font-size: 15px; font-weight: 500; word-break: break-all; }

/* смужки-підказки */
.nick-hint {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 12.5px;
    line-height: 1.45;
}
.nick-hint__i { flex: 0 0 auto; font-size: 14px; margin-top: 1px; }
.nick-hint_warn { background: rgba(245, 185, 66, .10); color: #f5b942; }
.nick-hint_info { background: rgba(255, 255, 255, .04); color: #9a9aa1; }

/* поле вводу */
.nick-field { position: relative; margin-bottom: 8px; }
.nick-input {
    width: 100%;
    background: #1d1d20;
    border: 1px solid #28282c;
    border-radius: 16px;
    padding: 15px 62px 15px 18px;
    font-size: 15px;
    color: #fff;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.nick-input::placeholder { color: #55555c; }
.nick-input:focus { border-color: #3f3f46; }
.nick-input.is-ok  { border-color: rgba(53, 212, 154, .45); }
.nick-input.is-err { border-color: rgba(255, 80, 87, .5); }

.nick-counter {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: #55555c;
}
.nick-counter.is-ok  { color: #35d49a; }
.nick-counter.is-err { color: #ff5057; }

.nick-msg {
    min-height: 20px;
    font-size: 12.5px;
    margin: 0 4px 16px;
    color: #55555c;
}
.nick-msg.is-err { color: #ff5057; }

/* кнопки */
.nick-btn {
    width: 100%;
    background: #222225;
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s, color .15s, transform .05s;
}
.nick-btn:hover  { background: #2b2b30; }
.nick-btn:active { background: #1c1c1f; transform: translateY(1px); }
.nick-btn:disabled {
    background: #1b1b1e;
    color: #55555c;
    cursor: not-allowed;
    transform: none;
}
.nick-btn.is-loading { pointer-events: none; color: #9a9aa1; }

.nick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: #9a9aa1;
    padding: 10px;
    border-radius: 12px;
    transition: color .15s, background .15s;
}
.nick-link:hover { color: #fff; background: rgba(255, 255, 255, .04); }

/* спінер */
.nick-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #3a3a40;
    border-top-color: #fff;
    animation: nick-rot .7s linear infinite;
    display: inline-block;
}
@keyframes nick-rot { to { transform: rotate(360deg); } }
.nick-loading { display: flex; justify-content: center; padding: 26px 0; }

/* екрани успіху і кулдауну */
.nick-result { text-align: center; padding: 8px 0 2px; }
.nick-ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.nick-ico_ok {
    background: rgba(53, 212, 154, .12);
    color: #35d49a;
    box-shadow: inset 0 0 0 1.5px rgba(53, 212, 154, .4);
}
.nick-ico_wait {
    background: rgba(245, 185, 66, .10);
    color: #f5b942;
    box-shadow: inset 0 0 0 1.5px rgba(245, 185, 66, .4);
}
.nick-result__t { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.nick-result__d {
    font-size: 13.5px;
    color: #9a9aa1;
    margin: 0 auto 8px;
    max-width: 360px;
    line-height: 1.5;
}
.nick-result__d b { color: #fff; font-weight: 500; word-break: break-all; }
.nick-result__sub { font-size: 12px; color: #55555c; margin-bottom: 22px; }

.nick-bar {
    background: #1d1d20;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 12px 12px 10px;
}
.nick-bar span { display: block; height: 100%; background: #f5b942; border-radius: 999px; }
.nick-days { font-size: 12.5px; color: #55555c; margin-bottom: 22px; }
.nick-days b { color: #f5b942; font-weight: 600; }

/* повідомлення-заглушка (гість / збій завантаження стану) */
.change-nickname-message { font-size: 13px; text-align: center; padding: 8px 0 4px; }
.change-nickname-message.error   { color: #ff5057; }
.change-nickname-message.success { color: #35d49a; }





.banner-win-chat-case {
    border-radius: 12px;
    max-width: 300px;
    padding: 20px 20px;
    position: relative;
}
.banner-win-chat-1 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #FB81FD 0%, #1B071B 100%);
}
.bfc-fs-22 {
    font-size: 22px !important;
}
.bfc-win-label-new {
    border-radius: 4px;
    padding: 6px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 7px;
    display: inline;
}
.bfc-win-label-new-bg-1 {
    background: rgba(251, 129, 253, 0.4);
    color: rgba(251, 129, 253, 1);
}
.bfc-bg {
    position: absolute;
}
.bfc-bg-1 {
    max-width: 180px;
    height: auto;
    bottom: 0;
    right: 0;
}

.banner-win-chat-2 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #9D41FF 0%, #170A26 100%);
}
.bfc-win-label-new-bg-2 {
    background: rgba(72, 30, 116, 0.4);
    color: #a14cf1;
}

.banner-win-chat-3 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #28BF66 0%, #0B2415 100%);
}
.bfc-win-label-new-bg-3 {
    background: rgba(54, 167, 100, 0.3);
    color: rgba(54, 167, 100, 1);
}

.banner-win-chat-4 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #FF8B59 0%, #2C1910 100%);
}
.bfc-win-label-new-bg-4 {
    background: rgba(255, 139, 89, 0.3);
    color: rgba(255, 139, 89, 1);
}
.bfc-bg-4 {
    right: -11px !important;
    bottom: -25px !important;
}

.banner-win-chat-5 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #FF4C64 0%, #2A0B0F 100%);
}
.bfc-win-label-new-bg-5 {
    background: rgba(255, 76, 100, 0.3);
    color: rgba(255, 76, 100, 1);
}

.banner-win-chat-6 {
    background: radial-gradient(154.26% 264.57% at 165.93% -26.03%, #FFBE74 0%, #262114 100%);
}
.bfc-win-label-new-bg-6 {
    background: rgba(255, 190, 116, 0.3);
    color: rgba(255, 190, 116, 1);
}



.bonus-tile-big {
    padding: 18px;
    border-radius: 14px;
    position: relative;
    height: 154px;
    border: 1px solid rgba(44, 44, 44, 1);
    overflow: hidden;
}
.bonus-tile-1 {
    background: linear-gradient(76.88deg, #F55384 40.2%, #E81C5A 105.52%);
}
.bonus-tile-2 {
    background: linear-gradient(254.82deg, #1C5CEE -2.71%, #5482EB 79.23%);
}
.bonus-tile-3 {
    background: linear-gradient(256.6deg, #E92A2D -14.42%, #F07072 99.69%);
}
.bonus-tile-4 {
    background: linear-gradient(76.44deg, #FF8E5D 0.53%, #F06427 99.47%);
}
.bonus-tiles-case {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.bonus-tiles-case > * {
    flex: 0 1 calc(50% - 10px);
}
.bonus-tile-title {
    position: relative;
    max-width: 140px;
    font-size: 18px;
    z-index: 1;
}
.bonus-tile-value {
    position: relative;
    margin-top: 10px;
    font-size: 28px;
    font-weight: 500;
    z-index: 1;
}
.bonus-tile-img {
/*     position: absolute;
    top: 17px;
    right: -40px;
    z-index: 0; */
}
.bonus-tile-img img {
    width: 80%;
    right: 0;
    position: absolute;
    bottom: 0px;
    
}
.input-error-msg {
    color: rgba(255, 0, 104, 0.85);
    font-size: 11px;
    margin: 4px 0 0;
    padding: 0;
}
.modal__cols .input-error-msg {
    grid-column: 1 / -1;
    margin-top: -12px;
}

/* Fix: section chips (1-12/13-24/25-36) overlap row-3 numbers */
#roulettePage .r-row-bottom {
    top: 0;
}

#roulettePage .chip-row {
    background: transparent;
}

/* Fix: chip-fix bottom:16px caused bottom bet row to overlap section chips after top:0 fix */
#roulettePage .chip-fix {
    bottom: 0;
}
/* app.css знімає позиціювання з .chip-fix у нижньому ряду (щоб прибрати
   bottom:14px), але разом із ним ламається й .bet-stack: він абсолютний і без
   позиційованої клітинки чіплявся за далекого предка — фішки на EVEN/ODD/
   1-18/19-36 малювались поза своєю зоною. Зсув уже знято правилом вище,
   тож повертаємо relative. */
#roulettePage .r-row-bottom-bottom .chip.chip-fix { position: relative; }

/* Global thin scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #2c2c2c transparent;
}
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: #2c2c2c;
    border-radius: 2px;
}

/* Profile page: natural page scroll — no viewport-height lock, menu shows fully.
   Data tables keep their own internal scroll via fixed-height -item-scroll (partners.css). */
.profile {
    margin-top: 26px;
    margin-bottom: 26px;
}
/* Профіль ширший — за правками клієнта в DevTools (дашборд комісій влазить
   у чотири картки в ряд). Контейнер лише цієї сторінки: 1270 → 1330px;
   зовнішній відступ контенту прибрано — вкладки .user_tab мають свої 35px. */
@media (min-width: 1360px) {
  .container:has(> .profile) { width: 1330px; }
}
@media (min-width: 1000px) {
  .profile__content { padding: 0; }
}
/* Sidebar nav must not scroll on its own — show all items */
.profile__col-nav {
    overflow: visible;
}
/* Affiliate tabs fill the content width (override the width:746px / max-width:300px
   base caps in partners.css now that the viewport flex-chain is gone). The table
   data still scrolls inside its own fixed-height -item-scroll (partners.css). */
#info_commiss {
    width: auto;
    max-width: none;
}
/* All Referrals: size the block to its table so the header's Campaigns filter
   sits proportionally over the table instead of hanging at the card's right edge. */
#all_refer {
    width: fit-content;
    max-width: none;
}
#list_comp .profile26__list-company {
    width: auto;
    max-width: none;
}
/* List of companies — the scroll area height is fitted by JS (fitCompaniesHeight
   in campaigns.js) to fill down to the card bottom, since the card height is
   driven by the sidebar (indefinite) and a pure-CSS flex chain can't resolve it.
   Drop the partners.css max-height cap so the JS-set inline height wins cleanly. */
#list_comp .profile26__list-item-scroll {
    max-height: none;
}
/* List of Companies на всю ширину: partners.css задає колонки в px (147/158/34/70/72),
   таблиця займала ліву половину, назви обрізались. Лише десктоп (мобілка — до 1200px).
   padding-right — місце під абсолютні «три крапки» (.cmp-row-dots, right:12px). */
@media (min-width: 1201px) {
    #list_comp .profile26__list-item {
        grid-template-columns: minmax(147px, 2fr) minmax(175px, 1.2fr) minmax(40px, .6fr) minmax(80px, 1fr) minmax(80px, 1fr);
        gap: 0 24px;
        padding-right: 48px;
    }
    #list_comp .profile26__list-header-title { white-space: nowrap; }
}
/* All Referrals: re-balance column widths + tighten the gap so wider values
   ($13500.00, 18.11.2025) fit and all 6 columns stay within the content area */
#all_refer .profile__referals-item {
    grid-template-columns: 130px 110px 50px 85px 95px 95px;
    gap: 0 8px;
    height: auto;
    min-height: 40px;
    padding: 8px 0;
}
/* All Referrals на всю ширину вкладки (partners.css фіксує 746px і колонки в px).
   Лише десктоп: до 1200px у partners.css своя мобільна розкладка зі скролом. */
@media (min-width: 1201px) {
    #all_refer.profile__referals { width: 100%; max-width: none; }
    #all_refer .profile__referals-item {
        grid-template-columns: minmax(130px, 1.5fr) minmax(110px, 1.3fr) minmax(50px, .6fr) minmax(85px, 1fr) minmax(95px, 1fr) minmax(95px, 1fr);
        gap: 0 16px;
    }
}
/* Wallet cell: the address is shortened (0x12ab...cd34), so keep it on one line,
   left-aligned under the "Wallet" header, with the copy icon right next to it. */
#all_refer .profile__referals-item > div:first-child {
    justify-self: start;
    padding-left: 5px;
    min-width: 0;
}
#all_refer .profile__referals-item .profile__referals-copy {
    justify-content: flex-start;
    white-space: nowrap;
}
#all_refer .profile__referals-item .profile__referals-copy > div:first-child {
    flex: 0 1 auto;
    min-width: 0;
}
#all_refer .profile__referals-item .profile__referals-copy > div:last-child {
    flex: 0 0 auto;
}
#all_refer .profile__referals-item .profile__referals-copy p {
    font-size: 13px;
    white-space: nowrap;
    line-height: 1.3;
}

/* Balance/Deposit dropdown menu — fix the broken blur.
   The container had no background and every item carried its own
   rgb(80 80 80 / 40%) + backdrop-filter: blur(10px), so the menu was
   semi-transparent and muddy (page bleeding through, items hard to read).
   Give the menu one solid dark surface and drop the per-item blur. */
.dropdown {
    background-color: #1a1a1a;
}
.dropdown__list {
    background-color: #1a1a1a;
}
.dropdown__link {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dropdown__link:not(.dropdown__link_danger):hover {
    background-color: #202020;
}

/* Roulette — outside/probability bets (dozens, columns 2:1, halves, EVEN/ODD,
   red/black) are wide cells. The chip token is absolutely centered inside a
   full-width .bet-stack, so on wide cells it floated in the MIDDLE and the edit
   pencil (right:2px) flew off to the far corner — looking like "no pencil".
   Anchor the token to the left and drop the pencil right next to it, so the
   chip + pencil stay grouped like on the number cells. */
.chip-row .bet-token,
#red .bet-token,
#black .bet-token {
    left: 22px;
}
.chip-row .bet-stack-edit,
#red .bet-stack-edit,
#black .bet-stack-edit {
    left: 40px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* ===== Header «Games» — меню ігор (задача 19) =====
   Еталон: html/roulfi-games-dropdown-component.html, блок «production CSS».
   Розмітка — resources/views/partials/games-dropdown.blade.php.
   Токени макета в білді на :root не визначені, тож тримаємо їх на самому
   дропдауні, щоб не зачепити решту сторінки. */
.menu__item--games { position: relative; }
.menu__item--games > .menu__link { display: inline-flex; align-items: center; gap: 6px; }
.gd-chev { width: 12px; height: 12px; opacity: .7; transition: transform .2s; }
.menu__item--games:hover .gd-chev, .menu__item--games.is-open .gd-chev { transform: rotate(180deg); }
.gd {
  --panel:#181818; --panel-2:#1f1f1f; --inset:#141414; --line:#262626; --line-soft:#1e1e1e;
  --text:#f2f2f2; --text-2:#bcbcbc; --muted:#8a8a8a; --muted-2:#5a5a5a;
  --pink:#ff2069; --green:#3ddc84; --gold:#f5b942; --mono:ui-monospace,'JetBrains Mono',Menlo,monospace;
  list-style: none; margin: 0; text-align: left; text-transform: none;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.gd ul { list-style: none; padding: 0; margin: 0; }
.gd a { color: inherit; text-decoration: none; }
.gt-name, .gd-title { font-family: 'Gotham', 'Montserrat', system-ui, sans-serif; }
@keyframes gdPulse { 50% { opacity: .45; } }
  /* ================= GAMES DROPDOWN — desktop ================= */
  .menu__dropdown{position:absolute;top:calc(100% + 14px);left:-12px;width:720px;
    background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:10px;
    box-shadow:0 24px 60px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02) inset;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
  .menu__dropdown::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}   /* hover bridge */
  .menu__item--games:hover>.menu__dropdown,.menu__item--games.is-open>.menu__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  /* accent line on top, like slot panels */
  .menu__dropdown::after{content:'';position:absolute;top:0;left:18%;right:18%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--pink),transparent);opacity:.55;pointer-events:none}

  .gd-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px}
  .gd-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .gd-sum{margin-left:auto;font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
  .gd-sum b{color:var(--green);font-weight:800}
  .gd-close{display:none}

  .gd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* ---- game tile ---- */
  .gt{--gc:var(--pink);position:relative}
  .gt-link{display:block;position:relative;height:118px;border-radius:14px;overflow:hidden;
    background:var(--inset);border:1px solid var(--line-soft);transition:transform .16s,border-color .16s,box-shadow .16s}
  .gt-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gc) 55%,transparent);
    box-shadow:0 12px 28px -12px color-mix(in srgb,var(--gc) 65%,transparent),0 0 0 1px color-mix(in srgb,var(--gc) 25%,transparent) inset}
  .gt-link:active{transform:translateY(-1px) scale(.99)}

  /* preview placeholder: full-bleed rectangle; later replaced with <img class="gt-img"> */
  .gt-art{position:absolute;inset:0;display:block;
    background:
      radial-gradient(120% 90% at 100% 100%,color-mix(in srgb,var(--gc) 26%,transparent),transparent 60%),
      repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 12px),
      var(--inset)}
  .gt-art::after{content:'';position:absolute;inset:6px;border:1px dashed color-mix(in srgb,var(--gc) 32%,transparent);border-radius:10px;pointer-events:none}
  .gt-wm{position:absolute;right:-8px;bottom:-14px;width:96px;height:96px;opacity:.08;color:var(--gc);transform:rotate(-8deg)}
  .gt-wm svg{width:100%;height:100%;display:block}
  .gt-ph{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);opacity:.8}
  .gt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* caption overlay: readable on top of any future art */
  .gt-cap{position:absolute;inset:0;display:flex;align-items:center;gap:13px;padding:14px 16px;
    background:linear-gradient(90deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.72) 55%,rgba(18,18,18,.15) 100%)}
  .gt-ic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
    background:color-mix(in srgb,var(--gc) 14%,transparent);border:1px solid color-mix(in srgb,var(--gc) 32%,transparent);transition:.16s}
  .gt-ic svg{width:26px;height:26px;overflow:visible}
  .gt-link:hover .gt-ic{box-shadow:0 0 18px -3px color-mix(in srgb,var(--gc) 70%,transparent);transform:scale(1.05)}
  .gt-txt{min-width:0;flex:1}
  .gt-name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.05;color:var(--text)}
  .gt-code{font-family:'Inter',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gc);
    background:color-mix(in srgb,var(--gc) 12%,transparent);border:1px solid color-mix(in srgb,var(--gc) 30%,transparent);border-radius:6px;padding:2px 6px;white-space:nowrap}
  .gt-tag{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.3}
  .gt-meta{position:absolute;left:16px;bottom:11px;display:flex;gap:12px;font-size:10.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;align-items:center}
  .gt-min{font-weight:700;color:var(--text-2)}
  .gt-min i{font-style:normal;color:var(--muted-2);font-weight:600;margin-right:4px}
  .gt-live{display:inline-flex;align-items:center;gap:5px;color:var(--muted-2)}
  .gt-live b{color:var(--text-2);font-weight:700}
  .gt-live b::after{content:' playing';color:var(--muted-2);font-weight:600}
  .ldot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:gdPulse 2s infinite}
  .gt-badge{position:absolute;top:10px;right:12px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    border-radius:6px;padding:3px 7px;color:#0c0c0c;background:var(--gc)}
  .gt-badge.b-hot{background:var(--pink);color:#fff}
  .gt-badge.b-new{background:var(--green)}
  .gt-badge.b-pot{background:var(--gold);text-transform:none;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .gt-link:hover .gt-ph{opacity:0}
  .gt-arw{position:absolute;right:12px;bottom:10px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--gc);
    background:color-mix(in srgb,var(--gc) 14%,transparent);opacity:0;transform:translateX(-4px);transition:.16s}
  .gt-arw svg{width:13px;height:13px}
  .gt-link:hover .gt-arw{opacity:1;transform:translateX(0)}

  /* accents per game (same palette as header/bet-history) */
  .g-roul{--gc:#ff2069}.g-plinko{--gc:#ff2069}.g-mines{--gc:#ff9d3d}.g-crash{--gc:#3ddc84}.g-pig{--gc:#f5b942}
  
  /* 5th game = full-width jackpot banner (fills the odd cell; its preview art is 6:1) */
  .gt--wide{grid-column:1/-1}
  .gt--wide .gt-link{height:104px}
  .gt--wide .gt-cap{background:linear-gradient(90deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.7) 40%,rgba(18,18,18,.1) 100%)}
  .gt--wide .gt-wm{width:120px;height:120px;right:110px;bottom:-30px;opacity:.1}
  .gt--wide .gt-badge{font-size:11px;padding:4px 9px}
  .gt--wide .gt-ph{right:110px}

  /* icon animations (from slot headers) */
  .an-roul{transform-origin:50% 50%;animation:roulSpin 9s linear infinite}
  .gt-link:hover .an-roul{animation-duration:2.5s}
  @keyframes roulSpin{to{transform:rotate(360deg)}}
  .an-crash{animation:crashCycle 3.2s ease-in-out infinite;transform-origin:20% 80%}
  @keyframes crashCycle{0%{transform:translateY(1.5px) scale(.96)}55%{transform:translateY(-1.5px) scale(1.04)}62%{transform:translateY(2px) scale(.94)}75%,100%{transform:translateY(0) scale(1)}}
  .an-bomb{transform-origin:50% 65%;animation:bombShake 3s ease-in-out infinite}
  .an-bomb .spark{animation:sparkFlick .9s ease-in-out infinite}
  @keyframes bombShake{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-3deg)}91%{transform:rotate(3deg)}94%{transform:rotate(-2deg)}97%{transform:rotate(2deg)}}
  @keyframes sparkFlick{0%,100%{opacity:1}50%{opacity:.35}}
  .an-block .btop{animation:blkTop 3s ease-in-out infinite}.an-block .bleft{animation:blkLeft 3s ease-in-out infinite}.an-block .bright{animation:blkRight 3s ease-in-out infinite}
  @keyframes blkTop{0%,38%,76%,100%{transform:translate(0,0)}52%{transform:translate(0,-2.6px)}64%{transform:translate(0,.35px)}70%{transform:translate(0,0)}}
  @keyframes blkLeft{0%,38%,76%,100%{transform:translate(0,0)}52%{transform:translate(-2.3px,1.5px)}64%{transform:translate(.3px,-.2px)}70%{transform:translate(0,0)}}
  @keyframes blkRight{0%,38%,76%,100%{transform:translate(0,0)}52%{transform:translate(2.3px,1.5px)}64%{transform:translate(-.3px,.2px)}70%{transform:translate(0,0)}}
  .an-pig{transform-origin:50% 62%}
  .gt-link:hover .an-pig{animation:oink 1.6s ease-in-out infinite}
  @keyframes oink{0%,100%{transform:rotate(0)}25%{transform:rotate(-3.5deg)}60%{transform:rotate(2.5deg)}}
  .gt-wm svg{animation:none!important}
  .gt-wm svg *{animation:none!important}



/* бургер клонує всю .menu у tippy — копія меню ігор там не потрібна:
   на мобілці тап по Games відкриває оригінал на весь екран */
[data-tippy-root] .menu__dropdown { display: none !important; }

/* ===== мобілка: список банерів на весь екран під шапкою =====
   Макет розраховував на нижній таб-бар; у білді його немає, тож список
   відкривається тапом по Games у бургер-меню і тягнеться до низу екрана.
   --gd-top (низ шапки) виставляє public/js/games-dropdown.js. */
@media screen and (width < 780px) {
  body.gd-open { overflow: hidden; }
  /* .header__menu на мобілці display:none — без цього fixed-список не відмалюється */
  body.gd-open .header__menu { display: block; height: 0; overflow: visible; }
  body.gd-open .header__menu .menu { background: none; }
  body.gd-open .header__menu .menu__item:not(.menu__item--games),
  body.gd-open .header__menu .menu__item--games > .menu__link { display: none; }
  body.gd-open .header__menu .menu__item--games { border: none; }

  .menu__dropdown {
    position: fixed; left: 0; right: 0; top: var(--gd-top, 70px); bottom: 0; width: auto; max-height: none; overflow-y: auto;
    background: rgba(0,0,0,.72); border: none; border-radius: 0; box-shadow: none; padding: 12px 12px 16px;
    transform: translateY(12px); transition: opacity .2s, transform .22s cubic-bezier(.2,.8,.2,1), visibility .2s; z-index: 1000;
  }
  .menu__dropdown::before, .menu__dropdown::after { display: none; }
  .menu__item--games:hover > .menu__dropdown { opacity: 0; visibility: hidden; transform: translateY(12px); }
  .menu__item--games.is-open > .menu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .menu__item--games { position: static; }

  .gd-head { display: none; }
  .gd-grid { grid-template-columns: 1fr; gap: 10px; }
  .gt-link { height: calc((100vw - 24px) / 3.1); min-height: 96px; max-height: 132px; border-radius: 14px; border-color: var(--line); }
  .gt--wide .gt-link { height: calc((100vw - 24px) / 3.1); }
  .gt-ph { display: none; }
  .gt-wm { width: 120px; height: 120px; right: -10px; bottom: -24px; opacity: .09; transform: rotate(-8deg); }
  .gt--wide .gt-wm { right: -10px; bottom: -24px; }
  .gt-cap { padding: 12px 16px; gap: 14px; background: linear-gradient(90deg,rgba(18,18,18,.9) 0%,rgba(18,18,18,.7) 55%,rgba(18,18,18,.25) 100%); }
  .gt-ic { width: 52px; height: 52px; border-radius: 14px; }
  .gt-ic svg { width: 30px; height: 30px; }
  .gt-name { font-size: 22px; letter-spacing: .06em; flex-wrap: wrap; row-gap: 4px; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
  .gt-tag { display: none; }
  .gt-meta { left: auto; right: 14px; bottom: 10px; gap: 10px; font-size: 10.5px; }
  .gt-badge { top: 10px; right: 12px; font-size: 10px; padding: 3px 8px; }
  .gt-arw { display: none; }
}
@media (max-width: 400px) { .gt-name { font-size: 19px; } .gt-ic { width: 46px; height: 46px; } .gt-live b::after { content: ''; } }

/* ===== Page loader (колесо рулетки + назва + прогрес) =====
   Стара розмітка .pageLoader стилізувалась у public/css/dark.css, який на
   фронтовому layout взагалі не підключений — тобто лоадера фактично не було. */
.pageLoader {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 999999; background: #121212;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease;
}
.pageLoader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pageLoader .loader-main {
  position: static; width: auto; height: auto; margin: 0;
  display: flex; flex-direction: column; align-items: center;
}

/* колесо */
.pageLoader .pl-wheel {
  position: relative; width: 96px; height: 96px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: #e81c5a;
}
/* м'яке рожеве світіння під колесом */
.pageLoader .pl-wheel::before {
  content: ""; position: absolute; left: -26px; right: -26px; top: -26px; bottom: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,28,90,.20) 0%, rgba(232,28,90,0) 70%);
}
.pageLoader .pl-wheel__svg {
  position: relative; width: 96px; height: 96px;
  transform-origin: 50% 50%;
  animation: plWheelSpin 3.2s linear infinite;
}
@keyframes plWheelSpin { to { transform: rotate(360deg); } }

/* назва сайту */
.pageLoader .pl-name {
  margin: 26px 0 0; padding: 0;
  max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Gotham', 'Gotham Bold', 'Montserrat', system-ui, sans-serif;
  /* clamp — щоб довга назва сайту не розʼїхалась на весь екран телефона */
  font-size: clamp(14px, 4.4vw, 20px); font-weight: 800; line-height: 1;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: #f2f2f2;
  animation: plNamePulse 2.4s ease-in-out infinite;
}
@keyframes plNamePulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* індетермінована смужка прогресу */
.pageLoader .pl-bar {
  position: relative; display: block; overflow: hidden;
  width: 180px; height: 3px; margin: 22px 0 0;
  border-radius: 3px; background: #1f1f1f;
}
.pageLoader .pl-bar i {
  position: absolute; left: 0; top: 0; width: 40%; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(232,28,90,0), #e81c5a, rgba(232,28,90,0));
  animation: plBarSlide 1.3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes plBarSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

@media (max-width: 575px) {
  .pageLoader .pl-wheel,
  .pageLoader .pl-wheel__svg { width: 72px; height: 72px; }
  .pageLoader .pl-name { margin-top: 20px; font-size: 16px; }
  .pageLoader .pl-bar { width: 140px; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pageLoader .pl-wheel__svg { animation-duration: 8s; }
  .pageLoader .pl-name { animation: none; opacity: .9; }
  .pageLoader .pl-bar i { animation-duration: 2.6s; }
}

/* ===== Таблиця ставок за макетом roulfi-bet-history =====
   Було: у кожному рядку сіра іконка й напис «Roulette», виплата завжди зелена
   (інлайновий style), без фільтра по іграх і без пагінації.
   Кольори й іконки ігор — з App\Game::VISUALS (див. public/js/game-visual.js),
   фільтр і сторінки — public/js/livefeed-table.js. */

/* --- гра --- */
.game-preview_colored {
  grid-template-columns: 34px auto;
  column-gap: 10px;
  align-items: center;
}
.game-preview_colored .game-tile {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid #262626;
  display: grid; place-items: center;
  color: var(--game-color, #8a8a8a);
}
/* підкладка кольору гри окремим шаром — щоб не тримати другий (rgba) варіант кольору */
.game-preview_colored .game-tile::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: var(--game-color, #8a8a8a);
  opacity: .12;
}
.game-preview_colored .game-tile svg {
  position: relative;
  width: 18px; height: 18px;
  display: block;
}
.game-preview_colored .game-preview__title { line-height: 1.15; font-weight: 700; }
.game-preview_colored .game-preview__subtitle { color: #ff2069; font-weight: 600; }

/* --- гравець --- */
.bet-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.bet-user__avatar {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #262626;
  background: #1f1f1f;
  color: #727272;
  display: grid; place-items: center;
}
.bet-user__avatar svg { width: 13px; height: 13px; display: block; }
.bet-user__name {
  color: #bcbcbc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bet-user_me .bet-user__avatar { background: rgba(255,32,105,.1); border-color: rgba(255,32,105,.3); color: #ff2069; }
.bet-user_me .bet-user__name { color: #f2f2f2; font-weight: 600; }
.bet-user_wallet .bet-user__name { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; }
.bet-user_anon .bet-user__name { color: #727272; font-style: italic; }
.bet-user_anon .bet-user__avatar { color: #484848; }
.bet-user__tag {
  flex: none;
  font-size: calc(var(--badge) * .52); font-weight: 800; letter-spacing: .04em;
  color: #ff2069;
  background: rgba(255,32,105,.1);
  border: 1px solid rgba(255,32,105,.3);
  border-radius: 5px;
  padding: 1px 5px;
}

/* --- коефіцієнт і виплата --- */
.table td.bet-coef {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.table td.bet-coef.is-win  { color: #3ddc84; }
.table td.bet-coef.is-big  { color: #ffc83d; }
.table td.bet-coef.is-lose { color: #727272; }

.table td.bet-payout {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.table th.ta-right,
.table td.ta-right { text-align: right; }
.table td.bet-payout.is-win  .bet-payout__sum { color: #3ddc84; }
.table td.bet-payout.is-big  .bet-payout__sum { color: #ffc83d; }
.table td.bet-payout.is-lose .bet-payout__sum { color: #ff3b46; }
.table td.bet-payout .bet-payout__result {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #727272;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* --- рядок --- */
.livefeed__table tbody tr { transition: background .12s; }
.livefeed__table tbody tr:hover { background: #1a1a1a; box-shadow: inset 3px 0 0 #ff2069; }

/* --- чипси фільтра по іграх --- */
/* чипси й пагінація вирівняні по тих самих 46px, що й крайні клітинки таблиці
   (.table --padding-inline), інакше блок «Game» тікав під лівий край */
.livefeed { --lf-pad: 46px; }
.livefeed__filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 14px var(--lf-pad);
  border-bottom: 1px solid #1e1e1e;
}
.livefeed__filters-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #484848;
  margin-right: 2px;
}
.fchip {
  font: inherit;
  font-size: 12px; font-weight: 600;
  color: #bcbcbc;
  background: #1f1f1f;
  border: 1px solid #262626;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.fchip:hover { color: #fff; }
.fchip.is-on { background: rgba(255,32,105,.1); border-color: #ff2069; color: #ff2069; }

/* --- пагінація --- */
.livefeed__pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 16px var(--lf-pad) 18px;
}
.livefeed__pager-info { font-size: 12px; color: #727272; }
.livefeed__pager-pages { display: flex; align-items: center; gap: 6px; }
.lf-pg {
  font: inherit;
  min-width: 34px; height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  background: #1f1f1f;
  border: 1px solid #262626;
  color: #bcbcbc;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: grid; place-items: center;
}
.lf-pg:hover:not(:disabled) { color: #fff; border-color: #484848; }
.lf-pg.is-on { background: #ff2069; border-color: #ff2069; color: #fff; cursor: default; }
.lf-pg:disabled { opacity: .4; cursor: default; }
.lf-pg.is-gap { background: none; border: none; min-width: auto; }

@media (max-width: 767px) {
  .livefeed { --lf-pad: 16px; }
  .livefeed__pager { justify-content: center; }
}

/* активна вкладка — рожеве підкреслення, як у макеті (базово був лише білий текст) */
.table__tabs .table__tab {
  position: relative;
  padding-bottom: 6px;
  letter-spacing: .04em;
}
.table__tabs .table__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #ff2069;
}

/* ===== Заголовок таблиці ставок (макет roulfi-bet-history) ===== */
.livefeed-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.livefeed-head__ic {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 13px;
  background: #191919;
  border: 1px solid #1e1e1e;
  display: grid; place-items: center;
  color: #ff2069;
}
.livefeed-head__ic svg { width: 38px; height: 38px; display: block; }
/* кардіограма «б'ється» — той самий ритм, що в макеті */
.livefeed-head__pulse { animation: lfPulseBeat 1.6s ease-in-out infinite; }
@keyframes lfPulseBeat {
  0%, 100% { opacity: .55; }
  45%      { opacity: 1; }
  55%      { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,32,105,.8)); }
}
.livefeed-head__title {
  margin: 0;
  font-family: 'Gotham', 'Gotham Bold', 'Montserrat', system-ui, sans-serif;
  font-size: 22px; font-weight: 800; line-height: 1;
  letter-spacing: .04em;
  color: #3a3a42;
}
.livefeed-head__title b { color: #f2f2f2; font-weight: 800; }

@media (max-width: 767px) {
  .livefeed-head { margin-bottom: 14px; }
  .livefeed-head__ic { width: 40px; height: 40px; border-radius: 11px; }
  .livefeed-head__ic svg { width: 30px; height: 30px; }
  .livefeed-head__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .livefeed-head__pulse { animation: none; opacity: .9; }
}

/* бейдж «live» прибрано з шапки таблиці (пульс тепер у заголовку LIVE BETS),
   тож вкладки більше не мають лівого сусіда для space-between — тримаємо їх справа */
.table-header .table__tabs { margin-left: auto; }

/* ===== Фішки рулетки (макет roulfi-roulette-panel) =====
   Було: плаский прямокутник 54.5×27 з кольором за порядком у списку.
   Стало: класична покерна фішка — конічний обід із білими секторами, внутрішній
   диск із пунктирним кільцем і номінал зверху. Той самий вигляд і в панелі
   (48px), і на полі, де фішка лягає на клітинку (26px).
   Колір номіналу тримається на --chip-c і працює для обох через data-атрибути. */

.token-container [data-value="25"],    .bet-token[data-token-value="25"], .r-bet-chip[data-token-value="25"]    { --chip-c: #8d99ae; }
.token-container [data-value="50"],    .bet-token[data-token-value="50"], .r-bet-chip[data-token-value="50"]    { --chip-c: #64748b; }
.token-container [data-value="100"],   .bet-token[data-token-value="100"], .r-bet-chip[data-token-value="100"]   { --chip-c: #8b5cf6; }
.token-container [data-value="250"],   .bet-token[data-token-value="250"], .r-bet-chip[data-token-value="250"]   { --chip-c: #3b82f6; }
.token-container [data-value="500"],   .bet-token[data-token-value="500"], .r-bet-chip[data-token-value="500"]   { --chip-c: #22c55e; }
.token-container [data-value="1000"],  .bet-token[data-token-value="1000"], .r-bet-chip[data-token-value="1000"]  { --chip-c: #f5a623; }
.token-container [data-value="2500"],  .bet-token[data-token-value="2500"], .r-bet-chip[data-token-value="2500"]  { --chip-c: #e8447a; }
.token-container [data-value="5000"],  .bet-token[data-token-value="5000"], .r-bet-chip[data-token-value="5000"]  { --chip-c: #ef4444; }
.token-container [data-value="10000"], .bet-token[data-token-value="10000"], .r-bet-chip[data-token-value="10000"] { --chip-c: #d4af37; }

/* спільна геометрія фішки */
/* без дефолтного --chip-c у цьому блоці: він має ту саму вагу, що й правила
   з [data-value], і, стоячи нижче, перебивав би колір кожного номіналу на сірий.
   Дефолт живе фолбеком у самих var(). */
.token-container .token,
.bet-token {
  position: relative;
  border-radius: 50%;
  border: 0;
  /* !important: у app.css лежать правила `.tc:nth-child(1) .token.token-active`
     (0,4,0) із суцільним кольором — вони перефарбовували першу фішку в зелений */
  background: repeating-conic-gradient(var(--chip-c, #8d99ae) 0 45deg, #fff 45deg 60deg) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* внутрішній диск із пунктирним кільцем */
.token-container .token::before,
.bet-token::before {
  content: "";
  position: absolute;
  left: 11%; top: 11%; right: 11%; bottom: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), transparent 52%),
    linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
    var(--chip-c, #8d99ae);
  border: 1.5px dashed rgba(255,255,255,.55);
}
/* номінал над диском (тому й винесений в окремий span) */
.token-v {
  position: relative;
  z-index: 1;
  line-height: 1;
}
/* Номінал фішки на полі — це span усередині .chip, тому його ловили правила
   номера клітинки з app.css: `.chip span` розтягує на height:30px, а на нулі
   `.chip-huge span` — аж на 98px, і `.chip span:hover` заливає білим. Звідси
   білий вертикальний прямокутник на клітинці під фішкою. Відрізаємо номінал
   від цих правил — селектор навмисно довший, щоб перебити і :hover. */
.chip .bet-token .token-v,
.chip .bet-token .token-v:hover {
  display: block;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* --- фішки в панелі --- */
.p-lab-chips {
  font-size: 12px;
  color: #8a8a8a;
  padding: 0 2px;
  margin: 10px 0 2px;
}
.token-container .token {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  flex: 0 0 44px;
  font-size: 12px;
  transition: transform .1s ease, box-shadow .13s;
}
.token-container .token .tokenT { display: none; }
.token-container .token:hover { transform: translateY(-2px); opacity: 1; }
.token-container .token:active { transform: scale(.9); }
/* обрана фішка — біле кільце, як у макеті (замість білої рамки) */
.token-container .token.token-active {
  border: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 0 4px #fff, 0 6px 16px rgba(0,0,0,.55);
  transform: translateY(-3px);
}
/* трек фішок — простий горизонтальний скролер (slick прибрано в roulette.js),
   рівно як .p-chips у макеті: стрілки по краях, приховані скролбари. */
.token-container {
  display: flex;
  align-items: center;
  gap: 9px;
}
.token-container .tokens {
  display: flex;
  /* 11px, а не 12: рівно з таким кроком у трек 265px влазить п'ять фішок по 44px,
     як у макеті */
  gap: 11px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  /* вертикальний запас під підйом на hover і біле кільце вибраної фішки */
  padding: 8px 4px;
  margin: -8px -4px;
  scrollbar-width: none;
}
.token-container .tokens::-webkit-scrollbar { display: none; }
.token-container .tc {
  width: auto;
  flex: 0 0 auto;
  float: none;
}
/* стрілки — квадратні кнопки .chip-arw з макета */
.token-container .chip-arw {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: #1f1f1f;
  border: 1px solid #262626;
  color: #bcbcbc;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease, color .13s, border-color .13s;
}
.token-container .chip-arw svg { width: 14px; height: 14px; display: block; }
.token-container .chip-arw:hover { color: #fff; border-color: #5a5a5a; }
.token-container .chip-arw:active { transform: scale(.88); }

/* --- фішки на полі рулетки --- */
.bet-token {
  /* position:absolute обовʼязково: спільне правило вище ставить `relative` заради
     фішок у панелі (.token-container .token), і воно перебивало `absolute` з
     app.css. Через це фішки на полі ставали в потік і стопка сповзала колонкою
     вниз повз клітинку замість того, щоб лягати одна на одну по центру. */
  position: absolute;
  width: 26px !important;
  height: 26px !important;
  font-size: 8px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.5);
}

/* Порожній стан смужок PREVIOUS GAMES (гість або перша гра) */
.fContentWrp .statiscticsGraph .graph-list-empty {
  font-size: 11px;
  line-height: 23px;
  color: #555555;
  list-style: none;
}

/* ===== Пресети суми ставки в іграх (макет roulfi-crash-panel) ===== */
.bet-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.bet-preset {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #bcbcbc;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 11px 0;
  text-align: center;
  cursor: pointer;
  transition: transform .1s ease, background .13s, border-color .13s, color .13s;
}
.bet-preset:hover { color: #fff; border-color: #5a5a5a; }
.bet-preset:active { transform: scale(.93); }
.bet-preset.is-on { color: #fff; border-color: rgba(255,32,105,.6); background: rgba(255,32,105,.1); }
.bet-preset_alt { color: #8a8a8a; letter-spacing: .04em; }

/* ===== Панель ставки рулетки (макет roulfi-roulette-panel) =====
   Було: великий зелений блок балансу, «Your Bet» з інпутом і текстовим Undo.
   Стало: темні inset-рядки балансу й On table + дві рівні кнопки Undo/Clear. */
.lBlock .line2 { margin: 0; }
.rp-bal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #141414;
  border: 1px solid #1e1e1e;
}
.rp-bal__tok {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: #26a17b;
  display: grid; place-items: center;
}
.rp-bal__tok img { width: 15px; height: 15px; display: block; }
.rp-bal__num {
  font-weight: 800;
  font-size: 16px;
  color: #f2f2f2;
  font-variant-numeric: tabular-nums;
}
.rp-bal__cur {
  font-size: 10px; font-weight: 700;
  color: #8a8a8a;
  background: #1f1f1f;
  border-radius: 6px;
  padding: 2px 6px;
}
.rp-bal__lab { margin-left: auto; font-size: 11px; color: #8a8a8a; }

.rp-betline {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px;
  border-radius: 13px;
  background: #141414;
  border: 1px solid #1e1e1e;
}
.rp-betline__lab { font-size: 12px; color: #8a8a8a; }
.rp-betline__val {
  font-weight: 800; font-size: 17px; color: #f2f2f2;
  font-variant-numeric: tabular-nums;
}
.rp-betline__val b { color: #e81c5a; }

.rp-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.rp-fbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 12px 0;
  color: #bcbcbc;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-transform: none;
  cursor: pointer;
  transition: transform .1s ease, color .13s, border-color .13s;
}
.rp-fbtn svg { width: 15px; height: 15px; }
.rp-fbtn:hover { color: #fff; border-color: #5a5a5a; }
.rp-fbtn:active { transform: scale(.95); }
/* roulette.js вішає .disabled, поки на столі немає ставок */
.rp-fbtn.disabled { opacity: .4; pointer-events: none; }

/* слоган під кнопкою гри, як у макеті */
.rp-slogan {
  text-align: center;
  /* .line7 задає uppercase усьому вмісту — у макеті слоган у звичайному регістрі */
  text-transform: none !important;
  font-size: 12px;
  color: #8a8a8a;
  margin-top: 12px;
}

/* ===== Панель ставки: оформлення з макета (акцентна лінія + водяний знак) ===== */
#roulettePage .lBlock {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* тонка рожева лінія по верхньому краю панелі */
#roulettePage .lBlock::before {
  content: "";
  position: absolute;
  top: 0; left: 16%; right: 16%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e81c5a, transparent);
  opacity: .55;
  pointer-events: none;
}
.rp-wm {
  position: absolute;
  right: -14px; bottom: -16px;
  width: 138px; height: 138px;
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
#roulettePage .lBlock > *:not(.rp-wm) { position: relative; z-index: 1; }

/* внутрішні відступи блоків тримає gap панелі — власні margin прибираємо */
#roulettePage .lBlock .line1 { padding-bottom: 14px; }
#roulettePage .lBlock .line3 { margin-top: 0; display: flex; flex-direction: column; gap: 10px; }
/* блок «Chip value» з фішками отримує додатковий повітряний запас зверху й знизу
   (панель уже дає 15px gap, тут ще по 8px) — інакше фішки тиснуться до балансу
   й до рядка On table */
#roulettePage .lBlock .line4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
#roulettePage .lBlock .line7 { display: flex; flex-direction: column; gap: 12px; }
#roulettePage .p-lab-chips { margin: 0; }
#roulettePage .rp-foot { margin-top: 0; }
#roulettePage .rp-slogan { margin-top: 0; }

/* фішки лежать прямо на панелі — коробки навколо треку в макеті немає */
#roulettePage .token-container {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/* шапки з логотипом у панелі більше немає — лишився лише перемикач Manual/Auto,
   тож прибираємо великий нижній відступ і роздільник під ним */
/* .line1 лишається в розмітці лише як обгортка прихованих вкладок Manual/Auto
   (їх ховає app.css: `.lBlock .line1 .game-sidebar-tab { display:none }`).
   display:contents прибирає її власний бокс, щоб порожній рядок не з'їдав
   15px gap панелі. Якщо вкладки колись повернуть — вони просто стануть
   елементами колонки. */
#roulettePage .lBlock .line1 {
  display: contents;
}
#roulettePage .lBlock .line1:after { display: none; }

/* слоган «Straight up pays ×36»: app.css `.lBlock .line7 > div` робить з кожного
   дочірнього діва кнопку (14px/500, висота 35px) — у макеті це дрібний сірий
   підпис 12px */
#roulettePage .lBlock .line7 > .rp-slogan {
  height: auto;
  margin-top: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* ===== Ширина панелі ставки (задача 9, повторно 2026-09-14) =====
   Клієнт просить ширшу панель за рахунок ігрової зони: у макеті панель 400px
   і в ряд видно 5 фішок, у штатній col-md-3 було 290px і 3 фішки. Сітку в
   розмітці не чіпаємо — мобільні col-sm-12 лишаються як були. Стіл рулетки
   у відсотках, тому звужується пропорційно; пробіли між його колонками
   прибирає font-size:0 нижче. */
@media (min-width: 992px) {
  #roulettePage .game__wrapper > .col-md-3 { width: 34%; }
  #roulettePage .game__wrapper #w_container.col-md-9 { width: 66%; }
  /* app.css тримає і панель, і ряд іконок під нею на max-width: 290px */
  #roulettePage .lBlock,
  #roulettePage .lBlockWrp .g_sidebar_footer { max-width: 100%; }

  /* Ігрова зона стала вужчою на 112px: колесо почало заходити під колонку FINAL
     (на 26px), а годинник і підказка таймера — на кільце (на 35px). Перебором на
     1366/1500/1920: FINAL 160px замість 188, колесо ×2.1 замість ×2.2, таймер на
     26px лівіше (до панелі лишається 12px) — кільце не торкається ні того, ні
     іншого. Сітка «6 rounds» у 1fr, тож просто стискається. */
  #roulettePage .fContentWrp { width: 160px; padding-left: 12px; padding-right: 12px; }
  #roulettePage .roulette-graph-container { transform: translateX(-50%) scale(2.1); }
  #roulettePage .faetLeftBlock.tm { margin-left: -44px; }
  /* «No data» в app.css має min-width: 121px — у вужчій колонці вилазив би за край */
  #roulettePage .roulette-result.roulette-no-data { min-width: 0; }
}

/* PREVIOUS GAMES: смужки товщі. Сервер віддає до 30 останніх раундів і roulette.js
   тримає до 30, а смужка в app.css — flex: 0 1 6px з min-width: 0: у колонці ~134px
   кожна стискалась до ~2.5px. Ширина тепер стала 6px, видно 16 найсвіжіших (нові
   додаються в кінець списку): 16×6 + 15×2 = 126px — влазить і в 160px, і в 188px. */
.fContentWrp .statiscticsGraph .graph-list .graph-list-elem {
  flex: 0 0 6px;
  border-radius: 3px;
}
.fContentWrp .statiscticsGraph .graph-list .graph-list-elem:nth-last-child(n+17) { display: none; }

/* ===== Стіл рулетки: прибрані пробіли між inline-block колонками =====
   Колонки столу (нуль | сітка чисел | 2:1) — inline-block, і між ними лічаться
   пробіли з розмітки (~4px кожен при font-size:16px). Сума 74+626+74 = 774 при
   контейнері 782 влазила лише поки колонка була ширшою; після розширення панелі
   ставки ці 8px пробілів переповнювали рядок і стовпчик «2:1» зривався під нуль,
   а нижні ставки (1-12 / EVEN / ODD) відлітали від сітки. */
#roulettePage .r-row-top,
#roulettePage .r-row-bottom {
  font-size: 0;
}
#roulettePage .r-row-top > *,
#roulettePage .r-row-bottom > * {
  font-size: 16px;
}

/* ===== Заголовки секцій (макет roulfi-section-headings) =====
   Було: плитка 33px з радіусом 6 і mask-іконкою одного кольору.
   Стало: плитка 48px, інлайнові svg акцентного кольору, у кожної секції своя
   анімація (пульс, геймпад, подарунок, годинник, ланцюг). */
.icon-wrapper_heading.heading-ic {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #191919;
  border: 1px solid #1e1e1e;
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  color: var(--accent-color, #e81c5a);
}
.heading-ic > svg { display: block; width: 26px; height: 26px; overflow: visible; }
.heading-ic_pulse > svg { width: 30px; height: 30px; }
.heading-ic_chain-clock > svg { width: 27px; height: 27px; }

.heading { display: flex; align-items: center; gap: 14px; }
.heading__title {
  font-family: 'Gotham', 'Gotham Bold', 'Montserrat', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  color: #3a3a42;
}
.heading__title b { color: #f2f2f2; font-weight: 800; }
/* Balance History у макеті — увесь заголовок одним кольором */
.heading__title_plain { color: #f2f2f2; }

/* пульс — лінія б'ється і спалахує на піку */
.hi-pulse { animation: hiPulseBeat 1.5s ease-in-out infinite; }
@keyframes hiPulseBeat {
  0%, 100% { opacity: .5; }
  40% { opacity: .6; }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(232,28,90,.9)); }
  60% { opacity: .7; }
}

/* геймпад — погойдування + натискання кнопок */
.hi-gp { transform-origin: center; animation: hiPadPlay 2.8s ease-in-out infinite; }
@keyframes hiPadPlay {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  25% { transform: rotate(2deg) translateY(-1px); }
  50% { transform: rotate(-2deg) translateY(0); }
  60% { transform: rotate(-2deg) translateY(1px); }
  70% { transform: rotate(3deg) translateY(0); }
}
.hi-gp-btn { fill: #7a1038; }
.hi-gp-btn1 { animation: hiBtnPress 2.8s ease-in-out infinite; }
.hi-gp-btn2 { animation: hiBtnPress 2.8s ease-in-out 1.1s infinite; }
@keyframes hiBtnPress {
  0%, 100% { fill: #7a1038; }
  12% { fill: #ffffff; }
  28% { fill: #7a1038; }
}

/* подарунок — трясеться, ніби всередині сюрприз */
.hi-gift { transform-origin: bottom center; animation: hiGiftShake 2.6s ease-in-out infinite; }
@keyframes hiGiftShake {
  0%, 100% { transform: rotate(0); }
  8% { transform: rotate(-8deg); }
  16% { transform: rotate(7deg); }
  24% { transform: rotate(-5deg); }
  32% { transform: rotate(4deg); }
  40% { transform: rotate(0); }
}

/* маленький годинник у куті плитки (історія ставок) */
.hi-clock {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #191919;
  border: 1.5px solid #2a2a2a;
  display: grid; place-items: center;
}
.hi-clock svg { width: 9px; height: 9px; display: block; }
.hi-clock-hand { transform-origin: 50% 50%; animation: hiTick 6s linear infinite; }
@keyframes hiTick { to { transform: rotate(360deg); } }

/* ланцюг — верхня ланка «клацає», стрілка годинника йде по хвилинах */
.hi-chain-ln1 {
  transform-origin: 50% 60%;
  transform-box: fill-box;
  animation: hiClink 4s ease-in-out infinite;
}
@keyframes hiClink {
  0%, 72%, 94%, 100% { transform: rotate(0) translate(0, 0); }
  78% { transform: rotate(-12deg) translate(-6px, 4px); }
  84% { transform: rotate(7deg) translate(3px, -2px); }
  89% { transform: rotate(-3deg) translate(-1px, 1px); }
}
.hi-chain-hand {
  transform-box: fill-box;
  transform-origin: 13.9% 6.6%;
  animation: hiMinTick 18s steps(60, end) infinite;
}
@keyframes hiMinTick { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hi-pulse, .hi-gp, .hi-gift, .hi-gp-btn1, .hi-gp-btn2,
  .hi-clock-hand, .hi-chain-ln1, .hi-chain-hand { animation: none; }
}


/* ═══ Bet Details — картка результату ставки (макет roulfi-bet-details_3) ═══
   Розмітка: resources/views/partials/bet-details-modal.blade.php
   Рендер:   public/js/bet-details.js                                        */

#bet-detail-modal .modal__wrapper.bd {
  width: 100%;
  max-width: 440px;
  padding: 0;
  /* базовий .modal__wrapper — flex column з align-items:center і row-gap:15px;
     картці потрібні блоки на всю ширину і власні відступи */
  align-items: stretch;
  row-gap: 0;
  /* базові стилі сайту центрують текст у модалках — картка вирівняна зліва,
     центрування лишається тільки там, де воно задане явно (.bd-hint) */
  text-align: left;
  background: #141419;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  overflow-y: auto;
  animation: bdPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes bdPop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.bd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
}
.bd__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f2f2f5;
  /* в app.css є глобальне h1…h6 { text-align: center } — заголовок картки лівий */
  text-align: left;
}
.bd__sub {
  margin-top: 3px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #8b8b96;
}
.bd__x {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #1c1c23;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #8b8b96;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.bd__x:hover { color: #f2f2f5; background: #24242c; }

.bd__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bd-loading {
  padding: 42px 20px;
  text-align: center;
  color: #8b8b96;
  font-size: 13px;
}

/* ── Підсумок раунду ─────────────────────────────────────────────── */
.bd-outcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 20px 0;
  padding: 16px;
  background: #1c1c23;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}
.bd-chip {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  color: #f2f2f5;
  background: #17171b;
  border: 3px solid #2c2c34;
  box-shadow: inset 0 0 0 2px #0d0d10;
}
.bd-chip_red { border-color: #c8314f; }
.bd-chip_zero { border-color: #2f9e5f; background: #0e1a12; color: #4fe08f; }
/* довгі нулі (00…000000) і множники Crash не влазять у 19px */
.bd-chip_long { font-size: 13px; letter-spacing: -0.02em; }
.bd-chip_xlong { font-size: 10px; letter-spacing: -0.04em; }
.bd-chip_icon { font-size: 0; }
.bd-chip__icon { display: block; width: 24px; height: 24px; color: #8b8b96; }
.bd-chip__icon svg { width: 100%; height: 100%; display: block; }

.bd-outcome__meta { flex: 1; min-width: 0; }
.bd-outcome__game {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8b96;
}
.bd-outcome__result {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: #f2f2f5;
}
.bd-outcome__amounts { text-align: right; }
.bd-outcome__payout {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bd-outcome__payout.is-loss { color: #ff5c5c; }
.bd-outcome__payout.is-win  { color: #3ddc84; }
.bd-outcome__payout.is-push { color: #f2f2f5; }
.bd-outcome__coef {
  margin-top: 2px;
  font-size: 12px;
  color: #8b8b96;
  font-variant-numeric: tabular-nums;
}

.bd-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  vertical-align: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bd-badge_loss { background: rgba(255, 92, 92, 0.12); color: #ff5c5c; }
.bd-badge_win  { background: rgba(61, 220, 132, 0.12); color: #3ddc84; }
.bd-badge_push { background: rgba(255, 255, 255, 0.08); color: #8b8b96; }

/* ── Числові рядки ───────────────────────────────────────────────── */
.bd-rows { padding: 14px 20px 4px; }
.bd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
  color: #f2f2f5;
}
.bd-row:last-child { border-bottom: none; }
.bd-row__label { color: #8b8b96; }
.bd-row__value { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Розбивка мульти-ставки ──────────────────────────────────────── */
.bd-split,
.bd-fair {
  margin: 6px 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.bd-split__head,
.bd-fair__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #1c1c23;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8b8b96;
}
.bd-split__head { justify-content: space-between; }
.bd-split__count {
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.bd-pos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  color: #f2f2f5;
}
.bd-pos__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
}
.bd-pos_lost .bd-pos__dot { background: #3a3a44; }
.bd-pos__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-pos_lost .bd-pos__name { color: #8b8b96; }
.bd-pos__stake {
  flex-shrink: 0;
  width: 78px;
  text-align: right;
  color: #8b8b96;
  font-variant-numeric: tabular-nums;
}
.bd-pos__mult {
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  font-size: 11px;
  color: #8b8b96;
}
.bd-pos__result {
  flex-shrink: 0;
  width: 88px;
  text-align: right;
  font-weight: 600;
  color: #3ddc84;
  font-variant-numeric: tabular-nums;
}
.bd-pos_lost .bd-pos__result { color: #8b8b96; font-weight: 400; }

/* ── Provably fair ───────────────────────────────────────────────── */
.bd-hash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.bd-hash__label {
  flex-shrink: 0;
  width: 58px;
  font-size: 12px;
  color: #8b8b96;
}
.bd-hash__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  color: #f2f2f5;
}
.bd-copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #8b8b96;
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bd-copy:hover { color: #f2f2f5; border-color: rgba(255, 255, 255, 0.2); }
.bd-copy.is-copied { color: #3ddc84; border-color: rgba(61, 220, 132, 0.35); }

/* ── Дія ─────────────────────────────────────────────────────────── */
.bd-actions { padding: 18px 20px 20px; }
.bd-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--accent-color, #e81c5a);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.bd-btn:hover { filter: brightness(1.12); }
.bd-btn:active { transform: scale(0.985); }
.bd-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #8b8b96;
}

@media (max-width: 480px) {
  .bd-pos__stake { width: 66px; }
  .bd-pos__result { width: 74px; }
  .bd-outcome { gap: 10px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #bet-detail-modal .modal__wrapper.bd { animation: none; }
}

/* стан «раунду вже немає»: фейкові ставки чистяться пачкою, а стрічка на
   /games і /roulette рендериться сервером один раз і не оновлюється */
.bd-gone {
  padding: 26px 20px 4px;
  text-align: center;
}
.bd-gone__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1c1c23;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #8b8b96;
}
.bd-gone__icon svg { width: 22px; height: 22px; display: block; }
.bd-gone__title {
  font-size: 15px;
  font-weight: 600;
  color: #f2f2f5;
}
.bd-gone__text {
  margin: 8px auto 0;
  max-width: 320px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b8b96;
}


/* ═══ Balance History — макети roulfi-transactions-history_1 / -empty_1 ═══
   Розмітка: resources/views/pages/transactions.blade.php
   Вкладки й пагінація: public/js/livefeed-table.js (спільний рушій)      */

.txp {
  background: #181818;
  border: 1px solid #262626;
  border-radius: 20px;
  overflow: hidden;
}

.txp__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid #1e1e1e;
}
.txp__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 11px;
}
.txp__tab {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #8a8a8a;
  font: 700 13px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.txp__tab:hover { color: #f2f2f2; }
.txp__tab.is-on { color: #fff; background: #1f1f1f; }
.txp__cnt {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #5a5a5a;
}
.txp__tab.is-on .txp__cnt { color: #8a8a8a; }

.txp__legend {
  display: flex;
  gap: 14px;
  margin-left: auto;
  font-size: 11px;
  color: #5a5a5a;
}
.txp__legend b { font-weight: 700; }
/* у макеті кольоровий увесь напис, а не тільки знак */
.txp__legend_in { color: #3ddc84; }
.txp__legend_out { color: #ff3b46; }

/* ── таблиця ─────────────────────────────────────────────────────── */
.txp__scroll { overflow-x: auto; }
.txp__table {
  width: 100%;
  border-collapse: collapse;
}
.txp__table thead th {
  padding: 13px 16px;
  border-bottom: 1px solid #1e1e1e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
  text-align: left;
  white-space: nowrap;
}
.txp__table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #1c1c1c;
  font-size: 13.5px;
  vertical-align: middle;
  white-space: nowrap;
  color: #f2f2f2;
}
.txp__table tbody tr:last-child td { border-bottom: none; }
.txp__table tbody tr:hover { background: rgba(255, 255, 255, 0.015); }
.txp__r { text-align: right; }
/* «.txp__table thead th» специфічніший за «.txp__r», тому заголовки Sum/Fee/
   Before лишались зліва, а значення під ними стояли справа */
.txp__table thead th.txp__r { text-align: right; }

.txp__id {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #5a5a5a;
}

.txp__type {
  display: flex;
  align-items: center;
  gap: 11px;
}
.txp__ic {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--tc, #8a8a8a);
}
/* підкладка кольору операції окремим шаром — той самий прийом, що й у .game-tile */
.txp__ic::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: var(--tc, #8a8a8a);
  opacity: 0.12;
}
.txp__ic svg { position: relative; width: 18px; height: 18px; display: block; }
.txp__name { font-weight: 600; color: #bcbcbc; }

.txp__data {
  display: block;
  font-size: 12.5px;
  color: #8a8a8a;
}
.txp__coin {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 5px;
}
.txp__coin svg { width: 100%; height: 100%; display: block; }
.txp__net {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #1f1f1f;
  font-size: 10px;
  font-weight: 700;
  color: #8a8a8a;
}
.txp__meta {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #5a5a5a;
}

.txp__time {
  font-size: 12.5px;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}

.txp__sum {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.txp__sum_in  { color: #3ddc84; }
.txp__sum_out { color: #ff3b46; }
.txp__sum_zero { color: #8a8a8a; }

.txp__fee {
  font-size: 12.5px;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}
.txp__pct {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 5px;
  background: #1f1f1f;
  font-size: 10px;
  font-weight: 700;
  color: #5a5a5a;
}
.txp__before {
  color: #bcbcbc;
  font-variant-numeric: tabular-nums;
}

/* ── пагінація ───────────────────────────────────────────────────── */
.txp__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.txp__pager .livefeed__pager-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── порожній стан (патерн переиспользуємий і для інших секцій) ───── */
.txp__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 24px 76px;
}
.txp__empty-ic {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #191919;
  border: 1px solid #1e1e1e;
  color: #8a8a8a;
}
.txp__empty-ic svg { width: 30px; height: 30px; opacity: 0.5; }
.txp__empty-title {
  font-size: 16px;
  font-weight: 800;
  color: #bcbcbc;
}
.txp__empty-sub {
  margin: 6px 0 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.5;
  color: #5a5a5a;
}
.txp__empty-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 11px;
  background: var(--accent-color, #e81c5a);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 22px -8px #ff2069;
  transition: filter 0.14s;
}
.txp__empty-cta:hover { filter: brightness(1.08); }
.txp__empty-cta svg { width: 15px; height: 15px; }

/* заголовок Balance History: стрілки обміну час від часу розходяться */
.hi-tr-top { animation: hiTrTop 3.4s ease-in-out infinite; }
.hi-tr-bot { animation: hiTrBot 3.4s ease-in-out infinite; }
@keyframes hiTrTop {
  0%, 58%, 88%, 100% { transform: translateX(0); }
  70% { transform: translateX(2.4px); }
  78% { transform: translateX(-0.4px); }
}
@keyframes hiTrBot {
  0%, 58%, 88%, 100% { transform: translateX(0); }
  70% { transform: translateX(-2.4px); }
  78% { transform: translateX(0.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hi-tr-top, .hi-tr-bot { animation: none; }
}

@media (max-width: 900px) {
  .txp__hide-m { display: none; }
  .txp__legend { display: none; }
}


/* ═══ Wallet modal — Deposit / Withdraw / Mixer / History ═══════════════
   Макет: html/roulfi-wallet-modal.html
   Розмітка: resources/views/layout.blade.php (#deposit-modal)
             + resources/views/layouts/paymentsHistory.blade.php
   Усе скоупом на #deposit-modal, щоб не зачепити решту модалок сайту.
   Кожна вкладка має свій акцент --ac; макет робить це через color-mix,
   але тут rgba-літерали — color-mix не всюди підтримується.             */

#deposit-modal .modal__wrapper {
  max-width: 720px;
  padding: 0;
  align-items: stretch;
  row-gap: 0;
  background: #181818;
  border: 1px solid #262626;
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

/* ── шапка з вкладками ───────────────────────────────────────────── */
/* new1712.css (підключений після my25) глобально дає .modal__header градієнт
   #202020→#282828, padding 15px, рамку й радіус — усе з !important, тож
   перебиваємо так само */
#deposit-modal .modal__header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 12px 14px !important;
  margin: 0;
  border: none;
  border-bottom: 1px solid #1e1e1e;
  border-radius: 0 !important;
  background: #141414 !important;
}
/* index-*.css задає .modal__tabs { height:24px; overflow:auto } — вкладки
   вищі за 24px, тож біля History вилазив скролбар зі стрілками; висоту
   знімаємо, горизонтальний скрол на вузьких екранах лишаємо без смуги */
#deposit-modal .modal__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: auto;
  min-width: 0;
  margin: 0;
  border: none;
  background: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#deposit-modal .modal__tabs::-webkit-scrollbar { display: none; }
#deposit-modal .modal__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #8a8a8a;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, transform 0.1s;
}
#deposit-modal .modal__tab svg { width: 15px; height: 15px; flex: none; }
#deposit-modal .modal__tab:hover { color: #f2f2f2; background: rgba(255, 255, 255, 0.04); text-decoration: none; }
#deposit-modal .modal__tab:active { transform: scale(0.97); }
#deposit-modal .modal__tab[aria-selected="true"] { color: var(--tc, #f2f2f2); background: var(--tc-soft, rgba(255,255,255,.08)); }
#deposit-modal .modal__tab_dep  { --tc: #3ddc84; --tc-soft: rgba(61, 220, 132, 0.1); }
#deposit-modal .modal__tab_wd   { --tc: #ff9d3d; --tc-soft: rgba(255, 157, 61, 0.1); }
#deposit-modal .modal__tab_mx   { --tc: #ff2069; --tc-soft: rgba(255, 32, 105, 0.1); }
#deposit-modal .modal__tab_hist { --tc: #bcbcbc; --tc-soft: rgba(255, 255, 255, 0.07); }

#deposit-modal .modal__header form { margin-left: auto; }
#deposit-modal .modal__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, transform 0.1s;
}
#deposit-modal .modal__close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
#deposit-modal .modal__close:active { transform: scale(0.94); }

/* ── тіло й панелі ───────────────────────────────────────────────── */
/* new1712.css вантажиться після my25 і має .modal__body{padding:0!important} */
#deposit-modal .modal__body {
  display: block;
  padding: 18px 20px 20px !important;
}
#deposit-modal .modal__tabpanel:not([hidden]) { animation: wmFade 0.16s ease; }
/* базовий row-gap:15px додавався до маржинів блоків з макета — відступи
   між блоками виходили вдвічі більші (над кнопкою 33px замість 18) */
#deposit-modal .modal__tabpanel:not([hidden]) { row-gap: 0; }
@keyframes wmFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
#deposit-modal #tabpanel-modal-deposit  { --ac: #3ddc84; --ac-soft: rgba(61, 220, 132, 0.08);  --ac-line: rgba(61, 220, 132, 0.35); }
#deposit-modal #tabpanel-modal-withdraw { --ac: #ff9d3d; --ac-soft: rgba(255, 157, 61, 0.08);  --ac-line: rgba(255, 157, 61, 0.35); }
#deposit-modal #tabpanel-modal-mixer    { --ac: #ff2069; --ac-soft: rgba(255, 32, 105, 0.08);  --ac-line: rgba(255, 32, 105, 0.35); }
#deposit-modal #tabpanel-modal-history  { --ac: #bcbcbc; --ac-soft: rgba(255, 255, 255, 0.06); --ac-line: rgba(255, 255, 255, 0.2); }

/* ── смужка балансу ──────────────────────────────────────────────── */
#deposit-modal .info-balance-on-modal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-left: 3px solid #3ddc84;
  border-radius: 12px;
  color: #f2f2f2;
}
/* «Total balance:» зліва дублює підпис праворуч — у макеті він один */
#deposit-modal .info-balance-on-modal > div:first-child { display: none; }
#deposit-modal .tb-icon-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
}
#deposit-modal .tb-icon-text > img { width: 34px; height: 34px; flex: none; }
#deposit-modal .tb-data-value { display: flex; flex-direction: column-reverse; }
#deposit-modal .tb-small { font-size: 12px; color: #5a5a5a; }
#deposit-modal .tb-value {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f2f2f2;
}
#deposit-modal .tb-text-usdt {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #8a8a8a;
  background: none;
  border: none;
  padding: 0;
  position: static;
}

/* ── монети ──────────────────────────────────────────────────────── */
#deposit-modal .modal__currencies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
#deposit-modal .modal__currency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid #1e1e1e;
  border-radius: 11px;
  background: #141414;
  color: #bcbcbc;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, color 0.13s, transform 0.13s;
}
#deposit-modal .modal__currency:hover {
  border-color: #262626;
  background: #1f1f1f;
  transform: translateY(-1px);
}
#deposit-modal .modal__currency:active { transform: scale(0.96); }
#deposit-modal .modal__currency:has(> input[type="radio"]:checked) {
  border-color: var(--ac-line, #3c3c3c);
  background: var(--ac-soft, #1e1e1e);
  color: #fff;
}
/* у макеті галочка лише на вибраній монеті — порожніх кружечків немає */
#deposit-modal .modal__currency::after {
  display: none;
  width: 15px;
  height: 15px;
  margin-left: 0;
  background-color: transparent;
  border: 1.5px solid #262626;
  box-sizing: border-box;
}
#deposit-modal .modal__currency:has(> input[type="radio"]:checked)::after {
  display: block;
  width: 15px;
  height: 15px;
  border-color: transparent;
  background-color: var(--ac, #3ddc84);
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── поля вводу ──────────────────────────────────────────────────── */
#deposit-modal .modal__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1px;
}
#deposit-modal .input { position: relative; margin-bottom: 13px; }
/* підпис секції над монетами — .sec-lbl з макета roulfi-wallet-modal */
#deposit-modal .wm-sec-lbl {
  margin: 0 0 9px 2px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
}
#deposit-modal .input__label {
  display: block;
  /* .input — flex-колонка з row-gap:8px, тож власний відступ не потрібен;
     базовий line-height ~1.8 додавав ще 10px порожнечі над полем */
  margin: 0 0 0 2px;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;
  color: #5a5a5a;
}
#deposit-modal .input__controll {
  width: 100%;
  padding: 13px 15px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  color: #f2f2f2;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}
#deposit-modal .input__controll::placeholder { color: #5a5a5a; }
#deposit-modal .input__controll:hover { border-color: #262626; }
#deposit-modal .input__controll:focus {
  border-color: var(--ac-line, #262626);
  box-shadow: 0 0 0 3px var(--ac-soft, transparent);
}
#deposit-modal select.input__controll { cursor: pointer; appearance: none; }
#deposit-modal .input__prepend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #8a8a8a;
  pointer-events: none;
}
#deposit-modal .input:has(.input__prepend) .input__controll { padding-left: 42px; }
#deposit-modal .input__append {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: #8a8a8a;
  pointer-events: none;
}
#deposit-modal .input__append_text {
  right: 10px;
  bottom: 9px;
  padding: 5px 10px;
  background: #1f1f1f;
  border: 1px solid #262626;
  border-radius: 8px;
  color: #8a8a8a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.13s, border-color 0.13s, transform 0.13s;
}
#deposit-modal .input__append_text:hover { color: #fff; border-color: #5a5a5a; }
#deposit-modal .input__append_text:active { transform: scale(0.95); }
/* повідомлення про помилку живе в тому ж грід-ряду, що й поля — на всю ширину */
#deposit-modal .input-error-msg {
  grid-column: 1 / -1;
  margin: -8px 0 10px 2px;
  font-size: 11.5px;
  color: #ff3b46;
}

/* ── головна кнопка ──────────────────────────────────────────────── */
#deposit-modal .btn_modal {
  width: 100%;
  margin-top: 4px;
  padding: 15px;
  border: none;
  border-radius: 13px;
  background: var(--ac, #3ddc84);
  color: #0c0c0c;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 0 26px -10px var(--ac, #3ddc84);
}
#deposit-modal .btn_modal .btn__text { color: inherit; font-weight: inherit; }
#deposit-modal .btn_modal:hover:not(:disabled) { filter: brightness(1.09); }
#deposit-modal .btn_modal:active:not(:disabled) { transform: scale(0.985); }
#deposit-modal .btn_modal:disabled {
  background: #1f1f1f;
  color: #5a5a5a;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── примітки під кнопкою ────────────────────────────────────────── */
#deposit-modal .dmodal-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
#deposit-modal .dmodal-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a8a8a;
}
#deposit-modal .dmodal-note .dicon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
#deposit-modal .dmodal-note b { color: #bcbcbc; }
#deposit-modal .dmodal-note-yellow { background: #141414; border-color: #1e1e1e; color: #8a8a8a; }
/* газ у примітці виводу: закреслена базова ціна + покриття рангом */
#deposit-modal .wm-strike { color: #5a5a5a; }
#deposit-modal .wm-ok { color: #3ddc84; font-weight: 700; }
/* «ви отримаєте» — акцентний блок, а не звичайна примітка */
#deposit-modal .dmodal-note-green {
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(61, 220, 132, 0.08);
  border-color: rgba(61, 220, 132, 0.22);
}
#deposit-modal .dmodal-text-green {
  color: #3ddc84;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── смужка рангу (Withdraw / Mixer) ─────────────────────────────── */
#deposit-modal .wm-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  font-size: 12.5px;
  color: #8a8a8a;
}
#deposit-modal .wm-rank svg { width: 20px; height: 22px; flex: none; color: #e9a443; }
#deposit-modal .wm-rank b { color: #e9a443; font-weight: 800; }
#deposit-modal .wm-rank .wm-sep { color: #5a5a5a; }
#deposit-modal .wm-rank .wm-next { margin-left: auto; font-size: 11.5px; color: #5a5a5a; }
#deposit-modal .wm-rank .wm-next em { font-style: normal; color: #bdb7ab; font-weight: 700; }

/* ── пояснення міксера ───────────────────────────────────────────── */
/* порівняльні картки під героєм міксера (.mx-vs у макеті) */
#deposit-modal .wm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 16px; }
#deposit-modal .wm-vs__card { padding: 12px 14px; background: #141414; border: 1px solid #1e1e1e; border-radius: 12px; }
#deposit-modal .wm-vs__card_hl { border-color: rgba(255, 32, 105, 0.35); }
#deposit-modal .wm-vs__card_link { cursor: pointer; transition: border-color 0.14s, background 0.14s, transform 0.1s; }
#deposit-modal .wm-vs__card_link:hover,
#deposit-modal .wm-vs__card_link:focus-visible { border-color: rgba(255, 157, 61, 0.45); background: #171411; outline: none; }
#deposit-modal .wm-vs__card_link:active { transform: scale(0.99); }
#deposit-modal .wm-vs__go { margin-left: 4px; color: #ff9d3d; opacity: 0; transition: opacity 0.14s; }
#deposit-modal .wm-vs__card_link:hover .wm-vs__go,
#deposit-modal .wm-vs__card_link:focus-visible .wm-vs__go { opacity: 1; }
#deposit-modal .wm-vs__t { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #5a5a5a; }
#deposit-modal .wm-vs__card_hl .wm-vs__t { color: #ff2069; }
#deposit-modal .wm-vs__v { font-size: 13px; line-height: 1.55; color: #bcbcbc; }
#deposit-modal .wm-vs__v b { color: #f2f2f2; font-weight: 700; }
@media (max-width: 600px) { #deposit-modal .wm-vs { grid-template-columns: 1fr; } }

#deposit-modal .wm-hero {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255, 32, 105, 0.09), transparent 60%);
  border: 1px solid rgba(255, 32, 105, 0.25);
  border-radius: 14px;
}
#deposit-modal .wm-hero__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  color: #f2f2f2;
}
#deposit-modal .wm-hero__title svg { width: 18px; height: 18px; color: #ff2069; }
#deposit-modal .wm-hero__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: #ff2069;
  color: #0c0c0c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#deposit-modal .wm-hero__sub { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: #8a8a8a; }
#deposit-modal .wm-hero__sub b { color: #bcbcbc; }
#deposit-modal .wm-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #5a5a5a;
}
#deposit-modal .wm-node {
  padding: 6px 11px;
  background: #1f1f1f;
  border: 1px solid #262626;
  border-radius: 8px;
  white-space: nowrap;
}
#deposit-modal .wm-node_pool { color: #ff2069; border-color: rgba(255, 32, 105, 0.4); }
#deposit-modal .wm-dots {
  flex: 1;
  min-width: 26px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #5a5a5a 0 5px, transparent 5px 11px);
  background-size: 200% 100%;
  animation: wmDots 1.6s linear infinite;
}
@keyframes wmDots { to { background-position: -22px 0; } }

/* ── історія ─────────────────────────────────────────────────────── */
#deposit-modal .paymentsHistoryCont .table-header {
  padding: 0 0 4px;
  border: none;
  background: none;
}
#deposit-modal .paymentsHistoryCont .live { display: none; }
#deposit-modal .paymentsHistoryCont .table__tabs { margin-left: 0; gap: 8px; }
#deposit-modal .paymentsHistoryCont .table__tab {
  padding: 7px 13px;
  border: 1px solid #1e1e1e;
  border-radius: 9px;
  background: #141414;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
}
#deposit-modal .paymentsHistoryCont .table__tab::after { display: none; }
#deposit-modal .paymentsHistoryCont .table__tab:hover { color: #f2f2f2; }
#deposit-modal .paymentsHistoryCont .table__tab[aria-selected="true"],
/* до першого кліку жоден чип не має aria-selected="true" — показуємо перший */
#deposit-modal .paymentsHistoryCont .table__tabs:not(:has([aria-selected="true"])) .table__tab:first-child {
  color: #fff;
  background: #1f1f1f;
  border-color: #262626;
}
#deposit-modal .paymentsHistoryCont .table {
  min-width: 0;
  background: none;
}
#deposit-modal .paymentsHistoryCont .table th {
  padding: 11px 10px;
  border-bottom: 1px solid #1e1e1e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a5a5a;
  background: none;
}
#deposit-modal .paymentsHistoryCont .table td {
  padding: 11px 10px;
  border-bottom: 1px solid #1c1c1c;
  font-size: 13px;
  vertical-align: middle;
  background: none;
}
#deposit-modal .paymentsHistoryCont .table tbody tr:last-child td { border-bottom: none; }
#deposit-modal .paymentsHistoryCont .table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
/* шрифт і дрібні розміри — як у макеті roulfi-wallet-modal (Inter-стек замість Gotham) */
#deposit-modal .paymentsHistoryCont,
#deposit-modal .paymentsHistoryCont .table__tab,
#deposit-modal .paymentsHistoryCont .table th,
#deposit-modal .paymentsHistoryCont .table td {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
#deposit-modal .paymentsHistoryCont .table td { color: #f2f2f2; font-weight: 400; }
#deposit-modal .paymentsHistoryCont .cell-date__day { font-size: 13px; }
#deposit-modal .paymentsHistoryCont .cell-date__time { font-size: 11px; color: #5a5a5a; }
/* рядок із платіжною сторінкою клікабельний цілком; розову смужку зліва з макета клієнт попросив прибрати */
#deposit-modal .paymentsHistoryCont .table tbody tr.h-row_link { cursor: pointer; transition: background 0.12s; }
#deposit-modal .paymentsHistoryCont .table tbody tr.h-row_link:hover .h-view { color: #ff2069; text-decoration: underline; }
#deposit-modal .paymentsHistoryCont .table tbody tr.h-row_link:hover .h-view svg { transform: translateX(2px); }
#deposit-modal .paymentsHistoryCont .withdraw-status-text {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
}
#deposit-modal .paymentsHistoryCont .withdraw-completed {
  color: #3ddc84 !important;
  background: rgba(61, 220, 132, 0.11);
}
#deposit-modal .paymentsHistoryCont .withdraw-waiting {
  color: #f5b942 !important;
  background: rgba(245, 185, 66, 0.11);
  animation: wmPulse 1.6s ease-in-out infinite;
}
@keyframes wmPulse { 50% { opacity: 0.55; } }
#deposit-modal .paymentsHistoryCont .withdraw-denied {
  color: #ff3b46 !important;
  background: rgba(255, 59, 70, 0.11);
}

@media (max-width: 600px) {
  #deposit-modal .modal__cols { grid-template-columns: 1fr; }
  #deposit-modal .modal__tab { padding: 9px 10px; font-size: 12.5px; }
  #deposit-modal .modal__body { padding: 14px 14px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #deposit-modal .wm-dots,
  #deposit-modal .paymentsHistoryCont .withdraw-waiting { animation: none; }
}

/* ── історія гаманця: рядки за довідником roulfi-wallet-modal ───────── */
#deposit-modal .h-sys {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bcbcbc;
  font-weight: 600;
}
#deposit-modal .h-sys__ic { width: 17px; height: 17px; flex: none; display: block; }
#deposit-modal .h-sys__ic svg { width: 100%; height: 100%; display: block; }

#deposit-modal .h-fee-pct { color: #5a5a5a; }

#deposit-modal .h-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
#deposit-modal .h-amt.pos { color: #3ddc84; }
#deposit-modal .h-amt.neg { color: #ff3b46; }

#deposit-modal .h-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
}
#deposit-modal .h-badge_ok   { color: #3ddc84; background: rgba(61, 220, 132, 0.11); }
#deposit-modal .h-badge_wait { color: #f5b942; background: rgba(245, 185, 66, 0.11); animation: wmPulse 1.6s ease-in-out infinite; }
#deposit-modal .h-badge_no   { color: #ff3b46; background: rgba(255, 59, 70, 0.11); }

#deposit-modal .h-view-cell { text-align: right; }
#deposit-modal .h-view {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #5a5a5a;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.13s;
}
#deposit-modal .h-view svg { width: 10px; height: 10px; transition: transform 0.13s; }
#deposit-modal .h-view:hover { color: #ff2069; text-decoration: underline; }
#deposit-modal .h-view:hover svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  #deposit-modal .h-badge_wait { animation: none; }
}


/* ═══ Нижня смужка лічильників (макет roulfi-stats-bar) ════════════════
   Розмітка: resources/views/partials/stats-bar.blade.php
   Значення пише JS у layout.blade.php — тут лише оформлення.
   Акцент кожної комірки задається через --sb-ac; кольори rgba-літералами,
   бо color-mix із макета підтримується не всюди.                        */

.preference__list.statbar {
  --sb-panel: #161616;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--sb-panel);
  border: 1px solid #242424;
  border-radius: 18px;
  overflow: hidden;
}

.statbar .statbar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  padding: 20px 24px;
  margin: 0;
  background: none;
  border: none;
  text-align: left;
}
/* розділювач між комірками — коротка вертикальна риска, як у макеті */
.statbar .statbar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: #1e1e1e;
}

.statbar__item_green { --sb-ac: 61, 220, 132; }
.statbar__item_pink  { --sb-ac: 255, 32, 105; }
.statbar__item_blue  { --sb-ac: 59, 167, 255; }
.statbar__item_gold  { --sb-ac: 245, 185, 66; }

.statbar__ic {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(var(--sb-ac, 138, 138, 138), 0.13);
  border: 1px solid rgba(var(--sb-ac, 138, 138, 138), 0.26);
  color: rgb(var(--sb-ac, 138, 138, 138));
}
.statbar__ic svg { width: 23px; height: 23px; display: block; }

.statbar__body { min-width: 0; display: block; }
.statbar .statbar__num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #f2f2f2;
  font-variant-numeric: tabular-nums;
}
.statbar .statbar__lbl {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5a5a5a;
}
/* сума ставок показується з доларом; JS пише лише число */
.statbar #totalWagered::before { content: "$"; }

/* спалах на кожній зміні значення */
.statbar .statbar__num.is-tick { animation: sbTick 0.5s ease; }
@keyframes sbTick {
  0%   { color: rgb(var(--sb-ac, 138, 138, 138)); text-shadow: 0 0 12px rgba(var(--sb-ac, 138, 138, 138), 0.6); }
  100% { color: #f2f2f5; text-shadow: none; }
}

@media (max-width: 820px) {
  .preference__list.statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar .statbar__item:nth-child(2)::after { display: none; }
}
@media (max-width: 480px) {
  .preference__list.statbar { grid-template-columns: 1fr; }
  .statbar .statbar__item::after { display: none !important; }
  .statbar .statbar__item { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .statbar .statbar__num.is-tick { animation: none; }
}


/* ═══ Меню користувача (макет roulfi-profile-dropdown_1) ═══════════════
   Розмітка: <template id="avatar-dropdowm"> у layout.blade.php.
   Клас .header-user-nickname-copy лишається — на ньому висить копіювання
   адреси в layout.blade.php.                                            */

.tippy-box .dropdown,
#avatar-dropdowm .dropdown {
  width: 260px;
  padding: 8px;
  background: #1d1d1d;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  box-shadow: 0 22px 55px -12px rgba(0, 0, 0, 0.75);
}

.dropdown .dropdown__header {
  padding: 12px 12px 13px;
  margin-bottom: 6px;
  /* базовий стиль давав шапці власний світліший фон (#252525) — у макеті вона
     того ж кольору, що й меню, і відділена лише лінією */
  background: none;
  border-bottom: 1px solid #232323;
}
.dropdown .header-user-nickname {
  /* базовий margin-top:10px розсовував шапку на 12px — відступ між ніком і
     адресою дає .dropdown__addr */
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: #f2f2f2;
}
/* без ніка заголовком стає сама адреса — тоді вона моноширинна й дрібніша */
.dropdown .header-user-nickname_addr {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 15px;
}
.dropdown .dropdown__addr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.dropdown .dropdown__addr_solo { margin-top: 0; }
.dropdown .header-user-wallet {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #9a9a9a;
}
.dropdown .header-user-nickname-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  line-height: 1;
  padding: 4px 9px;
  background: #252525;
  border: 1px solid #2a2a2a;
  border-radius: 7px;
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color 0.14s, border-color 0.14s;
}
.dropdown .header-user-nickname-copy:hover { color: #f2f2f2; border-color: #5f5f5f; }
.dropdown .header-user-nickname-copy svg { width: 12px; height: 12px; flex: none; }

.dropdown .dropdown__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  /* базовий стиль давав списку власну підкладку — у макеті він на фоні меню */
  background: none;
}
.dropdown .dropdown__list li { display: block; width: 100%; border: none; }
.dropdown .dropdown__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 11px;
  background: none;
  color: #9a9a9a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.dropdown .dropdown__link:hover { background: #252525; color: #f2f2f2; }
.dropdown .dropdown__list li:last-child .dropdown__link:hover { color: #e81c5a; }
.dropdown .dropdown__link .icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
}
/* скидаємо маску тільки там, де іконка інлайнова: у #deposit-dropdown і в
   бургер-меню ті самі класи, але іконки спрайтові — їм маска потрібна */
.dropdown .dropdown__link .icon_svg {
  background: none;
  mask: none;
  -webkit-mask: none;
}
.dropdown .dropdown__link .icon_svg svg { width: 19px; height: 19px; display: block; }


/* ═══ Модалка Ranks (макет roulfi-ranks-modal) ═════════════════════════
   Розмітка: #premium-modal у layout.blade.php.
   Стан кнопки рангу приходить класом: is-done / is-you / is-ahead.      */

#premium-modal .modal__wrapper {
  max-width: 780px;
  padding: 0;
  align-items: stretch;
  row-gap: 0;
  background: #181818;
  border: 1px solid #262626;
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

/* ── шапка ───────────────────────────────────────────────────────── */
#premium-modal .modal__header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  margin: 0;
  background: #141414;
  border-bottom: 1px solid #1e1e1e;
}
/* faet.css задає .modal-x-scrolled { height:10px } — вкладки обрізало по
   висоті; клас використовується тільки тут, тому знімаємо обмеження */
#premium-modal .modal__tabs {
  display: flex;
  gap: 4px;
  height: auto;
  padding-bottom: 0;
  margin: 0;
  border: none;
  background: none;
  overflow: visible;
}
#premium-modal .modal__tab {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #8a8a8a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, transform 0.1s;
}
#premium-modal .modal__tab:hover { color: #f2f2f2; background: rgba(255, 255, 255, 0.04); }
#premium-modal .modal__tab:active { transform: scale(0.97); }
#premium-modal .modal__tab[aria-selected="true"] { color: #fff; background: #1f1f1f; }
#premium-modal .modal__header form { margin-left: auto; }
#premium-modal .modal__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
#premium-modal .modal__close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

#premium-modal .modal__body { display: block; padding: 20px !important; }

/* ── підписи секцій ──────────────────────────────────────────────── */
#premium-modal .modal__subtitle {
  margin: 2px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a5a5a;
}

/* ── поточний ранг і прогрес ─────────────────────────────────────── */
#premium-modal .modal__level-title { font-size: 16px; font-weight: 800; color: #f2f2f2; }
#premium-modal .modal__level-title .faetRanksInfo { color: #e9a443; }
#premium-modal .modal__level-subtitle { margin-top: 3px; font-size: 12.5px; color: #5a5a5a; }

#premium-modal .lvl-rank-wrp {
  position: relative;
  height: 30px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
}
/* заливка прогресу — золотий градієнт із пробігаючим відблиском */
#premium-modal .lvl-rank-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #be8433, #e9a443 55%, #ede6d9);
  border-radius: 9px 0 0 9px;
  box-shadow: 0 0 18px -4px rgba(233, 164, 67, 0.55);
  overflow: hidden;
}
#premium-modal .lvl-rank-bg::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.32) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: rkSheen 3.8s ease-in-out infinite;
}
@keyframes rkSheen {
  0%, 55%   { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}
/* відсоток — поверх смуги, праворуч */
#premium-modal .modal__level-controll {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: none;
  border: none;
  outline: none;
  color: #f2f2f2;
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
  pointer-events: none;
}
#premium-modal .modal__level-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 9px 0 20px;
  font-size: 12.5px;
  font-weight: 700;
}
#premium-modal .modal__level-footer .faetRanksInfo { color: #e9a443; }

/* ── кнопки рангів ───────────────────────────────────────────────── */
#premium-modal .modal__privileges {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px 10px;
  margin-bottom: 16px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 16px;
}
#premium-modal .modal__privileges-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 4px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
#premium-modal .modal__privileges-btn:hover { background: rgba(255, 255, 255, 0.03); }
#premium-modal .modal__privileges-btn .icon { transition: transform 0.16s; }
#premium-modal .modal__privileges-btn:hover .icon { transform: translateY(-3px); }
#premium-modal .modal__privileges-text {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8a8a;
  transition: color 0.14s;
}
#premium-modal .modal__privileges-btn:hover .modal__privileges-text { color: #bcbcbc; }
#premium-modal .modal__privileges-btn[aria-selected="true"] {
  border-color: var(--color, #8a8a8a);
  background: rgba(255, 255, 255, 0.04);
}
#premium-modal .modal__privileges-btn[aria-selected="true"] .modal__privileges-text { color: var(--color, #f2f2f2); }

/* пройдені ранги — зелена галочка, майбутні притлумлені до наведення */
#premium-modal .modal__privileges-btn.is-done::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3ddc84 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230c0c0c" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>') center / 8px no-repeat;
}
#premium-modal .modal__privileges-btn.is-ahead .icon { opacity: 0.42; filter: saturate(0.6); }
#premium-modal .modal__privileges-btn.is-ahead:hover .icon,
#premium-modal .modal__privileges-btn.is-ahead[aria-selected="true"] .icon { opacity: 1; filter: none; }
/* бейдж поточного рангу — без правок розмітки */
#premium-modal .modal__privileges-btn.is-you .modal__privileges-text::after {
  content: "YOU";
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #ff2069;
  color: #0c0c0c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

/* ── панель обраного рангу ───────────────────────────────────────── */
#premium-modal .modal__info {
  padding: 16px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 16px;
}
#premium-modal .rank-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px 8px 8px;
  background: #1f1f1f;
  border-radius: 11px;
}
#premium-modal .modal__info-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: #141414;
  border-radius: 9px;
}
#premium-modal .modal__info-rank {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
#premium-modal .rank-progress-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #bcbcbc;
}
#premium-modal .modal__info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px 4px 2px;
  list-style: none;
}
#premium-modal .modal__info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #bcbcbc;
}
/* галочка замість маркера списку */
#premium-modal .modal__info-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23bcbcbc" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>') center / 11px no-repeat;
}

/* галочка кольору рангу панелі (--ct у макеті roulfi-ranks-modal): фон 14% + штрих.
   У data-URI змінну не підставиш, тож по правилу на ранг */
#premium-tabpanel-0 .modal__info-list li::before { /* No Rank */
  background-color: rgba(232, 232, 232, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e8e8e8" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-1 .modal__info-list li::before { /* Bronze */
  background-color: rgba(194, 127, 90, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c27f5a" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-2 .modal__info-list li::before { /* Silver */
  background-color: rgba(232, 232, 232, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e8e8e8" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-3 .modal__info-list li::before { /* Gold */
  background-color: rgba(233, 164, 67, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e9a443" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-4 .modal__info-list li::before { /* Platinum */
  background-color: rgba(237, 230, 217, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ede6d9" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-5 .modal__info-list li::before { /* Diamond */
  background-color: rgba(46, 224, 209, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232ee0d1" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}
#premium-tabpanel-6 .modal__info-list li::before { /* Elite */
  background-color: rgba(249, 47, 50, 0.14);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f92f32" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4L18.5 8"/></svg>');
}

/* цифри на плитках і рамка при наведенні — теж кольору рангу (.st-v / .st:hover у макеті) */
#premium-modal #premium-tabpanel-0 .rk-st__v { color: #e8e8e8; } /* No Rank */
#premium-modal #premium-tabpanel-0 .rk-st:hover { border-color: rgba(232, 232, 232, 0.4); }
#premium-modal #premium-tabpanel-1 .rk-st__v { color: #c27f5a; } /* Bronze */
#premium-modal #premium-tabpanel-1 .rk-st:hover { border-color: rgba(194, 127, 90, 0.4); }
#premium-modal #premium-tabpanel-2 .rk-st__v { color: #e8e8e8; } /* Silver */
#premium-modal #premium-tabpanel-2 .rk-st:hover { border-color: rgba(232, 232, 232, 0.4); }
#premium-modal #premium-tabpanel-3 .rk-st__v { color: #e9a443; } /* Gold */
#premium-modal #premium-tabpanel-3 .rk-st:hover { border-color: rgba(233, 164, 67, 0.4); }
#premium-modal #premium-tabpanel-4 .rk-st__v { color: #ede6d9; } /* Platinum */
#premium-modal #premium-tabpanel-4 .rk-st:hover { border-color: rgba(237, 230, 217, 0.4); }
#premium-modal #premium-tabpanel-5 .rk-st__v { color: #2ee0d1; } /* Diamond */
#premium-modal #premium-tabpanel-5 .rk-st:hover { border-color: rgba(46, 224, 209, 0.4); }
#premium-modal #premium-tabpanel-6 .rk-st__v { color: #f92f32; } /* Elite */
#premium-modal #premium-tabpanel-6 .rk-st:hover { border-color: rgba(249, 47, 50, 0.4); }

@media (max-width: 700px) {
  #premium-modal .modal__privileges { grid-template-columns: repeat(4, 1fr); }
  #premium-modal .modal__body { padding: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #premium-modal .lvl-rank-bg::after { animation: none; }
}

/* ── шкала прогресу з фішками й підсумками ───────────────────────── */
#premium-modal .rk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
#premium-modal .rk-bar .lvl-rank-wrp { flex: 1; }
#premium-modal .rk-bar__chip { flex: none; width: 26px; height: 28px; }
#premium-modal .rk-bar__chip_next { opacity: 0.5; }

#premium-modal .modal__level-footer {
  align-items: flex-start;
  margin: 9px 36px 20px;
  flex-wrap: wrap;
}
#premium-modal .rk-foot__cur { color: #e9a443; }
#premium-modal .rk-foot__next { color: #bdb7ab; text-align: right; }
#premium-modal .modal__level-footer i {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: #5a5a5a;
}
#premium-modal .rk-foot__wag {
  font-size: 11.5px;
  font-weight: 600;
  color: #5a5a5a;
}
#premium-modal .rk-foot__wag b { color: #bcbcbc; }

/* ── плитки зі ставками рангу ────────────────────────────────────── */
#premium-modal .rk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
#premium-modal .rk-st {
  padding: 11px 12px;
  background: #1f1f1f;
  border: 1px solid #1e1e1e;
  border-radius: 11px;
  transition: border-color 0.14s, transform 0.14s;
}
#premium-modal .rk-st:hover { border-color: #333; transform: translateY(-1px); }
#premium-modal .rk-st__v {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #e9a443;
}
#premium-modal .rk-st__l {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #8a8a8a;
}

@media (max-width: 700px) {
  #premium-modal .modal__level-footer { margin: 9px 0 20px; }
}

/* ===== Fair Game — стани порожньо/активно (макет fair-game-modals-rework) =====
   Класи .fg-* доповнюють наявні .fair-game__*, а не замінюють їх. */

/* підказка під полем Server hash — друга половина плейсхолдера, який різався */
.fair-game__form .fg-field-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5c5c63;
  margin-top: 8px;
}
.fair-game__form .fg-field-hint b { color: #ff0068; font-weight: 600; }

/* порожній стан сітки хеша: приглушені плитки замість голого прочерку */
.fair-game__right .fg-hash-empty {
  border: 1.5px dashed #2b2b2e;
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  color: #5c5c63;
  font-size: 13px;
  grid-column: 1 / -1;
}
.fair-game__right .fg-hash-empty .dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 14px;
}
.fair-game__right .fg-hash-empty .dots span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #202022;
  opacity: .55;
}

/* число: рожевий пілюль лише коли є що показувати */
.fair-game__right .fair-game__number-value.is-empty {
  background-color: #202022;
  color: #5c5c63;
  font-weight: 500;
}

/* формула: тиха пунктирна заглушка замість гучного рожевого блоку */
.fair-game__right .fg-formula-empty {
  border: 1.5px dashed #2b2b2e;
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
}
.fair-game__right .fg-formula-empty .t {
  font-size: 15px;
  font-weight: 600;
  color: #c7c7cd;
  margin-bottom: 6px;
}
.fair-game__right .fg-formula-empty .d { font-size: 13px; color: #5c5c63; line-height: 1.5; }
.fair-game__right .fg-formula-empty .d b { color: #ff0068; font-weight: 600; }

/* записаний результат — нейтральний, без рожевого */
.fair-game__right .fg-rec {
  background: #202022;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
  word-break: break-word;
}
/* нечислові результати: сирі сітки легасі-ігор — дрібним моношрифтом, а не 22px */
.fair-game__right .fg-rec.is-plain {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #bcbcbc;
  line-height: 1.6;
}
/* Mines: записана карта 5×5 замість «0, 1, 0, 1…» */
.fair-game__right .fg-rec.is-board { padding: 16px 14px 12px; }
.fg-mines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  max-width: 170px;
  margin: 0 auto;
}
.fg-mines__c {
  aspect-ratio: 1;
  border-radius: 6px;
  background: #2c2c30;
}
.fg-mines__c.is-bomb {
  background: radial-gradient(circle, #ff5057 0 30%, transparent 32%), #3a1d22;
}
.fg-mines__cap {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fg-mines__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5057;
  flex: none;
}

/* вердикт — власний семантичний банер */
.fair-game__right .fg-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
}
.fair-game__right .fg-verdict .ico {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.fair-game__right .fg-verdict.ok {
  background: rgba(53, 212, 154, .12);
  color: #35d49a;
  box-shadow: inset 0 0 0 1px rgba(53, 212, 154, .35);
}
.fair-game__right .fg-verdict.ok .ico { background: #35d49a; color: #0b0b0b; }
.fair-game__right .fg-verdict.fail {
  background: rgba(255, 80, 87, .12);
  color: #ff5057;
  box-shadow: inset 0 0 0 1px rgba(255, 80, 87, .35);
}
.fair-game__right .fg-verdict.fail .ico { background: #ff5057; color: #0b0b0b; }
.fair-game__right .fg-verdict-sub {
  font-size: 12.5px;
  color: #5c5c63;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* ===== Fair Game — кнопка копіювання хеша (макет «Fair game copy block») =====
   Кнопка живе всередині правого краю поля; поле отримує запас справа, щоб текст
   не заповзав під неї. Три іконки лежать в одній комірці гріда і перемикаються
   прозорістю — DOM не перебудовується, тому нічого не «стрибає». */

.fair-game .fg-copy-host { position: relative; }
.fair-game .fg-copy-host > .input__controll { padding-right: 54px; }

.fair-game .fg-copy {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8f8f96;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fair-game .fg-copy:hover  { background: #202022; color: #fff; }
.fair-game .fg-copy:active { transform: translateY(-50%) scale(.92); }
.fair-game .fg-copy:focus-visible { outline: 2px solid #ff0068; outline-offset: 2px; }

/* варіант у потоці — поруч зі значенням, а не всередині поля */
.fair-game .fg-copy.fg-copy-inline {
  position: static;
  transform: none;
  border: 1px solid #2b2b2e;
  background: #161616;
}
.fair-game .fg-copy.fg-copy-inline:hover  { background: #202022; }
.fair-game .fg-copy.fg-copy-inline:active { transform: scale(.92); }

/* три іконки в одній комірці — перемикаємо прозорістю */
.fair-game .fg-copy__ic {
  grid-area: 1 / 1;
  display: inline-flex;
  opacity: 0;
  transition: opacity .15s;
}
.fair-game .fg-copy__ic svg { width: 16px; height: 16px; display: block; }
/* display:grid вище перебиває дефолтний display:none від [hidden] */
.fair-game .fg-copy[hidden] { display: none; }

/* Випадне меню GAMES ховалось під заголовком «FAIR GAME»: у new1712.css
   .fair-game-title / .fair-game-subtitle мають z-index: 10, а вони flex-елементи —
   z-index спрацьовує і без position, тож заголовок ставав шаром 10 у корені
   сторінки, вище за .header__inner (z-index: 2), де живе меню. isolation замикає
   ці z-index усередині банера: заголовок так само над замками, банер — під шапкою. */
.fair-game-banner { isolation: isolate; }
.fair-game .fg-copy .fg-copy__ic_copy { opacity: 1; }

.fair-game .fg-copy.is-copied { background: rgba(53, 212, 154, .14); color: #35d49a; border-color: rgba(53, 212, 154, .35); }
.fair-game .fg-copy.is-copied .fg-copy__ic_copy { opacity: 0; }
.fair-game .fg-copy.is-copied .fg-copy__ic_ok   { opacity: 1; }

.fair-game .fg-copy.is-failed { background: rgba(255, 80, 87, .14); color: #ff5057; border-color: rgba(255, 80, 87, .35); }
.fair-game .fg-copy.is-failed .fg-copy__ic_copy { opacity: 0; }
.fair-game .fg-copy.is-failed .fg-copy__ic_fail { opacity: 1; }

/* повідомлення про невдале копіювання (єдиний випадок, коли потрібен текст) */
.fair-game .fg-copy-msg {
  font-size: 12.5px;
  line-height: 1.45;
  color: #ff5057;
  margin-top: 8px;
  display: none;
}
.fair-game .fg-copy-msg.is-on { display: block; }

/* число + кнопка поруч */
.fair-game .fg-num-row { display: flex; align-items: center; gap: 10px; }

/* ===== Фішки: поле, селектор, попап (макети chips-asset / selector-clipping) =====
   Один ассет у трьох місцях. Кругла фішка вже була з задачі 9 — тут закриті
   решта пунктів: бейдж-олівець замість «фломастера» поверх фішки, лічильник
   стопки ×N, обрізка в селекторі і квадратні фішки в попапі. */

/* --- бейдж-олівець: круглий, на краю фішки, не поверх номіналу ---
   Розмір рахується від діаметра фішки (--sz), як у макеті v2. Нижня межа 13px,
   а не 18px: на полі клітинка 30px і фішка 26px, тому 18px бейдж накривав би
   половину номіналу. --- */
.chip .bet-token { --sz: 26px; }
.chip .bet-stack-edit,
.chip .bet-stack-count { --badge: clamp(13px, calc(var(--sz, 26px) * .34), 24px); }

.chip .bet-stack-edit {
  position: absolute;
  width: var(--badge);
  height: var(--badge);
  right: auto;
  border-radius: 50%;
  background: #17171a;
  border: 1.5px solid #3a3a40;
  color: #b9b9c0;
  display: grid;
  place-items: center;
  z-index: 3;
  cursor: pointer;
  transition: background .13s, color .13s, transform .13s, border-color .13s;
  /* по колу фішки: правий-нижній край */
  left: calc(50% + 12px);
  top: calc(50% - 11px);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}
.chip .bet-stack-edit i { font-size: calc(var(--badge) * .55); line-height: 1; }
.chip .bet-stack-edit:hover {
  background: #fff;
  border-color: #fff;
  color: #17171a;
  transform: translate(-50%, -50%) scale(1.18);
}

/* --- лічильник стопки: скільки фішок лежить у зоні --- */
.chip .bet-stack-count {
  position: absolute;
  z-index: 3;
  min-width: var(--badge);
  height: calc(var(--badge) - 1px);
  padding: 0 3px;
  border-radius: 999px;
  background: #17171a;
  border: 1.5px solid #3a3a40;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  left: calc(50% - 12px);
  top: calc(50% + 11px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* широкі зони: фішка притиснута до лівого краю, бейджі їдуть за нею */
.chip-row .bet-stack-edit,
#red .bet-stack-edit,
#black .bet-stack-edit  { left: 34px; }
.chip-row .bet-stack-count,
#red .bet-stack-count,
#black .bet-stack-count { left: 10px; }

/* --- селектор: край має розчинятись, а не рубати фішку --- */
.token-container .tokens {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  scroll-snap-type: x mandatory;
}
.token-container .tc { scroll-snap-align: center; }

/* --- попап ставки: та сама кругла фішка, що на полі й у селекторі --- */
.r-bet-chip {
  min-width: 0 !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0;
  position: relative;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: repeating-conic-gradient(var(--chip-c, #8d99ae) 0 45deg, #fff 45deg 60deg) !important;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .5);
}
.r-bet-chip::before {
  content: "";
  position: absolute;
  left: 11%; top: 11%; right: 11%; bottom: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), transparent 52%),
    linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
    var(--chip-c, #8d99ae);
  border: 1.5px dashed rgba(255,255,255,.55);
}
.r-bet-chip > span { position: relative; z-index: 1; }

/* мінус на ×1 нічого не робить — має бути видно, що він вимкнений */
.r-bet-step[disabled] {
  opacity: .35;
  cursor: not-allowed;
  background: #222;
}
.r-bet-step[disabled]:hover { background: #222; }

/* суми табличними цифрами, щоб колонка не «дихала» */
.r-bet-sum,
.r-bets-modal-total,
.r-bet-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* видалення ставки не має плутатись із закриттям вікна */
.r-bet-remove {
  border-radius: 8px;
  color: #8a8a90;
  transition: background .13s, color .13s;
}
.r-bet-remove:hover { background: rgba(255, 80, 87, .14); color: #ff5057; }

/* ===== Фішки v2: селектор і заблоковані номінали ===== */

/* Невибрані приглушені одразу в розмітці — після першого кліку більше не
   «стрибає» вся смужка. */
.token-container .token { --sz: 44px; }
.token-container .token:not(.token-active):not(.is-locked) { filter: saturate(.35) brightness(.78); }
.token-container .token:not(.token-active):hover { filter: none; }

/* Номінал більший за баланс: клік нічого не робить, замок замість номіналу. */
.token-container .tc.is-locked .token,
.token-container .token.is-locked {
  filter: saturate(.12) brightness(.5);
  cursor: not-allowed;
}
.token-container .token.is-locked .token-v { opacity: .35; }
.token-container .token.is-locked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: currentColor;
  color: #fff;
  opacity: .9;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}
.token-container .token:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Видалення ставки — кошик: форма іконки розрізняється без ховера, що важливо
   на тачі, де другий хрестик плутався з закриттям вікна. */
.r-bet-remove svg { width: 15px; height: 15px; display: block; margin: auto; }
.r-bet-chip { --sz: 38px; }

/* ===== Таймер до старту — чотири стани (макет roulette-timer-states) =====
   Стан задається на .tm[data-state]: idle / countdown / paused / closing.
   «--:--» замість порожнечі резервує місце — лейаут не стрибає, коли відлік
   з'явиться, і сам прочерк уже каже «таймер існує, але не йде». */

/* Блок таймера стоїть у клині між панеллю ставок і колесом. Колесо — коло, тож
   вільна ширина залежить від висоти: на рівні цифр її вистачає, а нижче, де
   смуга прогресу й підказка, коло підходить ближче. Тому блок зсунуто вліво в
   зазор біля панелі, а смузі й підказці задано власну ширину. */
.faetLeftBlock.tm {
  min-height: 150px;
  position: relative;
  z-index: 5;
  width: 200px;
  margin-left: -18px;
}

.tm .tm__lbl {
  color: #7c7c85;   /* був --txt-3 (#55555c): лейбл стану — єдиний текст поруч, мусить читатись */
  transition: color .3s;
}
.tm[data-state="closing"] .tm__lbl { color: #ff0068; }
.tm .tm__clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: color .3s, opacity .3s;
}
.tm[data-state="idle"]   .tm__clock { color: #2a2a2e; }
.tm[data-state="paused"] .tm__clock { color: #55555c; }
.tm[data-state="closing"] .tm__clock { color: #ff0068; animation: tm-pulse 1s ease infinite; }
@keyframes tm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* прогрес раунду під цифрами */
.tm .tm__bar {
  width: 140px;
  max-width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #222225;
  margin-top: 8px;
  overflow: hidden;
  transition: opacity .3s;
}
.tm .tm__bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #ff0068;
  transition: width 1s linear;
}
.tm[data-state="idle"] .tm__bar { opacity: 0; }
/* у паузі час не зникає, а прогрес сіріє: видно, що він збережений */
.tm[data-state="paused"] .tm__bar > span { background: #55555c; transition: none; }

/* підказка під таймером */
.tm .tm__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 132px;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9a9aa1;
  min-height: 22px;
  transition: color .3s;
}
.tm .tm__dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #35d49a;
  animation: tm-pulse 1.6s ease infinite;
  flex: 0 0 auto;
}
/* м'який call-to-action замість банера */
.tm[data-state="countdown"] .tm__hint,
.tm[data-state="closing"]   .tm__hint { visibility: hidden; }
.tm[data-state="paused"]    .tm__hint { color: #f5b942; }
.tm[data-state="paused"]    .tm__dot  { background: #f5b942; }

/* ===== Таймер v2: фази раунду ===== */

/* ставки заблоковано */
.tm[data-state="closed"] .tm__clock { color: #55555c; }
.tm[data-state="closed"] .tm__bar > span { background: #55555c; transition: none; }
.tm[data-state="closed"] .tm__dot { background: #55555c; animation: none; }

/* спін: відліку немає, є три крапки */
.tm .tm__dots { display: none; gap: 9px; padding: 18px 0 14px; }
.tm .tm__dots > span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff0068; opacity: .35;
  animation: tm-dots 1.2s ease-in-out infinite;
}
.tm .tm__dots > span:nth-child(2) { animation-delay: .18s; }
.tm .tm__dots > span:nth-child(3) { animation-delay: .36s; }
@keyframes tm-dots { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

.tm[data-state="spinning"] .tm__clock,
.tm[data-state="result"]   .tm__clock { display: none; }
.tm[data-state="spinning"] .tm__dots  { display: flex; }
.tm[data-state="spinning"] .tm__bar,
.tm[data-state="result"]   .tm__bar   { opacity: 0; }
.tm[data-state="spinning"] .tm__dot   { background: #55555c; animation: none; }

/* результат раунду */
.tm .tm__res {
  display: none;
  width: 62px; height: 62px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.tm[data-state="result"] .tm__res { display: flex; }
.tm[data-state="result"][data-result="win"]  .tm__res { background: #ff0068; color: #fff; }
.tm[data-state="result"][data-result="lose"] .tm__res { background: transparent; color: #9a9aa1; box-shadow: inset 0 0 0 2px #2b2b2e; }
.tm[data-state="result"][data-result="win"]  .tm__hint { color: #35d49a; }
.tm[data-state="result"][data-result="win"]  .tm__dot  { background: #35d49a; }
.tm[data-state="result"][data-result="lose"] .tm__dot  { background: #55555c; animation: none; }

/* анімації — не всім */
@media (prefers-reduced-motion: reduce) {
  .tm .tm__clock,
  .tm .tm__dot,
  .tm .tm__dots > span { animation: none !important; }
  .tm .tm__bar > span { transition: none !important; }
}

/* заглушка відліку в idle */
.tm .tm__ph { display: none; align-items: flex-end; gap: 7px; height: 58px; padding-bottom: 10px; }
.tm[data-state="idle"] .tm__ph { display: flex; }
.tm[data-state="idle"] .tm__clock { display: none; }
.tm .tm__ph i {
  width: 24px; height: 8px;
  border-radius: 4px;
  background: #2a2a2e;
}
/* риски вирівняні по низу (як базова лінія цифр), тому двокрапку
   опускаємо на половину її висоти, щоб вона лягла по центру рисок */
.tm .tm__ph em { position: relative; width: 8px; height: 24px; margin: 0 1px -8px; }
.tm .tm__ph em::before,
.tm .tm__ph em::after {
  content: "";
  position: absolute;
  left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a2a2e;
}
.tm .tm__ph em::before { top: 0; }
.tm .tm__ph em::after  { bottom: 0; }

/* ===== Створення кампанії: генерація ID (макет company-creation-generate) =====
   Поле ID не вводиться руками, тому замість вводу — кнопка «згенерувати новий».
   Стоїть усередині поля ліворуч від копії: місця під себе не просить, і це той
   самий патерн, що вже є в копіюванні. */
.profile__creation-content-cell .profile__creation-regen {
  position: absolute;
  right: 52px;
  top: 40px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8a90;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 6px;
  transition: color .13s, background .13s;
}
.profile__creation-content-cell .profile__creation-regen svg { width: 17px; height: 17px; display: block; }
.profile__creation-content-cell .profile__creation-regen:hover { color: #fff; background: rgba(255,255,255,.06); }
.profile__creation-content-cell .profile__creation-regen:focus-visible { outline: 2px solid #ff0068; outline-offset: 2px; }
/* короткий оберт, щоб зміна значення була помітною */
.profile__creation-content-cell .profile__creation-regen.is-spin svg { animation: cmp-regen .45s ease; }
@keyframes cmp-regen { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .profile__creation-content-cell .profile__creation-regen.is-spin svg { animation: none; }
}

/* статуси під полями форми створення */
.profile__creation-content-cell .profile__creation-cellmsg {
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 8px;
  min-height: 18px;
  color: #7c7c85;
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile__creation-cellmsg.is-ok   { color: #35d49a; }
.profile__creation-cellmsg.is-warn { color: #f5b942; }
.profile__creation-cellmsg.is-err  { color: #ff5057; }
.profile__creation-cellmsg .spin {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #3a3a40;
  border-top-color: #9a9aa1;
  animation: cmp-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes cmp-spin { to { transform: rotate(360deg) } }

.profile__creation-cellhint {
  font-size: 12.5px;
  color: #7c7c85;
  text-align: center;
  margin-top: 10px;
  min-height: 18px;
}

/* Create вимкнено атрибутом — має і виглядати вимкненим */
.profile__creation-item-btn-send[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}

/* стан кнопки копіювання: тільки після реального успіху */
.profile__creation-copy-bufer.is-copied img,
.profile__creation-copy-bufer.is-failed img { display: none; }
.profile__creation-copy-bufer.is-copied::after,
.profile__creation-copy-bufer.is-failed::after {
  content: "";
  display: block;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / 15px;
          mask: no-repeat center / 15px;
}
.profile__creation-copy-bufer.is-copied {
  color: #35d49a;
}
.profile__creation-copy-bufer.is-copied::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.profile__creation-copy-bufer.is-failed { color: #ff5057; }
.profile__creation-copy-bufer.is-failed::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}