@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Manrope-Regular.woff2') format('woff2'),
       url('/static/fonts/Manrope-Regular.ttf') format('truetype');
}

/* SemiBold (font-weight: 600) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Manrope-SemiBold.woff2') format('woff2'),
       url('/static/fonts/Manrope-SemiBold.ttf') format('truetype');
}

/* ExtraBold (font-weight: 800) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Manrope-ExtraBold.woff2') format('woff2'),
       url('/static/fonts/Manrope-ExtraBold.ttf') format('truetype');
}

:root {
    --font-display: swap;
    --bg-color: #1a1c1e;
    --surface-color: #2a2c2e;
    --block-bg-color: #1c1c1e;
    --border-color: #3b3b3b;
    --primary-color: #ffab60;
    --primary-hover-color: #ffc28a;
    --text-color: #ffffff;
    --text-muted-color: #8e8e93;
    --danger-color: #c94a4a;
    --success-color: #4CAF50;
    --font-size-base: clamp(14px, 2.5vw, 16px);
    --font-size-lg: clamp(18px, 4vw, 24px);
    --font-size-sm: clamp(12px, 2vw, 14px);
    --font-size-xs: clamp(10px, 1.8vw, 12px);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 80px 15px 90px 15px;
    overscroll-behavior-y: contain;
}

button, input {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.app-container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.top-app-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background-color: rgba(26, 28, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 15px;
    padding-top: calc(10px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 900;
}

.profile-section { display: flex; align-items: center; gap: 10px; }
.avatar-image { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border-color); background-color: var(--block-bg-color); }
.user-details b { font-size: var(--font-size-base); font-weight: 600; }
.app-bar-actions { display: flex; align-items: center; gap: 4px; }
.balance-section {
    padding: 8px 4px; /* Слегка увеличенные отступы */
    border-radius: 12px;
    border: none; /* Убрали рамку для более чистого вида */
    display: flex;
    align-items: center;
    justify-content: center; /* Добавили для идеального центрирования */
    gap: 2px;
    min-width: 90px; /* Минимальная ширина, чтобы виджет не сжимался */
    transition: background-color 0.2s;
    background-color: var(--surface-color);
    flex-direction: row-reverse;
    align-items: flex-start;
}
.header-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.header-btn:hover { color: var(--text-color); border-color: var(--primary-color); }

.room-switcher {
    display: flex;
    gap: 5px;
    background-color: var(--surface-color);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.room-tab {
    flex: 1; background: none; border: none; color: var(--text-muted-color);
    padding: 8px 5px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
    display: flex; flex-direction: column; align-items: center;
}
.room-tab span { font-size: var(--font-size-base); font-weight: 700; }
.room-tab small { font-size: var(--font-size-xs); }
.room-tab.active { background-color: var(--block-bg-color); color: var(--primary-color); }

.game-display { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.game-info-header { text-align: center; }
.pot-label { font-size: var(--font-size-sm); color: var(--text-muted-color); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.pot-value { font-size: clamp(32px, 8vw, 40px); font-weight: 700; color: var(--primary-color); line-height: 1.1; transition: transform 0.2s, 0.2s; }

.jackpot-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    overflow: hidden; /* <-- ГЛАВНОЕ ИЗМЕНЕНИЕ: Скрываем все, что выходит за пределы */
    border-radius: 50%; /* <-- РЕКОМЕНДАЦИЯ: Делаем контейнер круглым */
}
.jackpot-pointer {
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 10px solid transparent;
    border-right: 10px solid transparent; border-top: 15px solid var(--primary-color); z-index: 20;
}
.wheel-container {
    position: relative; width: 100%; height: 100%; border-radius: 50%;
    border: 3px solid var(--border-color); background-color: var(--block-bg-color);
}
#jackpot-wheel { width: 100%; height: 100%; border-radius: 50%; transition: transform 8s cubic-bezier(0.15, 0.9, 0.25, 1); }

.center-timer {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50%; height: 50%; background: var(--bg-color); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}
.timer-svg { position: absolute; top: 50%; left: 50%; width: 110%; height: 110%; transform: translate(-50%, -50%); }
.timer-bg, .timer-path { fill: none; stroke-width: 6; }
.timer-bg { stroke: var(--border-color); }
.timer-path {
    stroke: var(--primary-color); stroke-linecap: round;
    stroke-dasharray: 283; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.timer-content { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
#game-status-icon { font-size: 24px; }
#game-timer { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-color); }

.controls-block {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
}
.input-wrapper {
    display: flex; align-items: center; background-color: var(--block-bg-color);
    border: 1px solid var(--border-color); border-radius: 8px; padding: 0 12px; margin-bottom: 10px;
}
.input-wrapper:focus-within { border-color: var(--primary-color); }
.input-wrapper span { color: var(--text-muted-color); font-size: 12px; font-weight: 600; }
.input-wrapper input {
    flex: 1; background: transparent; border: none; color: var(--text-color);
    font-size: 18px; font-weight: 600; padding: 12px 10px; min-width: 0;
}
.input-wrapper input::placeholder { color: var(--text-muted-color); font-weight: 500; }
button:disabled {
    cursor: not-allowed !important;
    opacity: 0.6;
}
.battle-btn:disabled {
    background-color: #555;
    color: #999;
    /* Убираем эффект нажатия для заблокированной кнопки */
    transform: none !important;
}

/* Стили для заблокированных кнопок пресетов */
.presets-row button:disabled {
    background-color: var(--block-bg-color);
    color: var(--text-muted-color);
    transform: none !important;
}

/* Стили для заблокированного поля ввода */
input:disabled {
    background-color: var(--block-bg-color);
    opacity: 0.7;
}

/* Стили для заблокированных табов комнат */
.room-tab:disabled {
    color: var(--text-muted-color) !important;
    background-color: transparent !important; /* Убираем фон, даже если таб активен */
    opacity: 0.5;
}
.presets-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }
.presets-row button {
    padding: 8px 5px; background: var(--bg-color); border: 1px solid var(--border-color);
    color: var(--text-muted-color); border-radius: 8px; font-size: var(--font-size-sm);
    font-weight: 600; cursor: pointer; transition: background-color 0.2s;
}
.presets-row button:active { background-color: var(--block-bg-color); }
.battle-btn {
    width: 100%; padding: 15px; background-color: var(--danger-color); border: none;
    border-radius: 8px; color: white; font-size: var(--font-size-base); font-weight: 700;
    cursor: pointer; transition: background-color 0.2s, transform 0.1s;
}
.battle-btn:disabled { background-color: #555; color: #999; cursor: not-allowed; }
.battle-btn:active { transform: scale(0.98); }

.list-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5px 10px 5px; font-size: var(--font-size-sm); color: var(--text-muted-color);
}
.list-header .round-id { font-family: monospace; }
#players-counter-text { font-weight: 600; }

.battle-feed { display: flex; flex-direction: column; gap: 8px; }
.empty-list-msg {
    text-align: center; padding: 30px 15px; color: var(--text-muted-color);
    font-size: var(--font-size-sm); background-color: var(--surface-color);
    border: 1px dashed var(--border-color); border-radius: 12px;
}
.battle-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
    align-items: center; background-color: var(--surface-color); padding: 10px;
    border-radius: 12px; border: 1px solid var(--border-color);
    border-left: 4px solid transparent;
}
.battle-row img { width: 36px; height: 36px; border-radius: 50%; background-color: var(--bg-color); object-fit: cover; }
.player-info { line-height: 1.3; min-width: 0; }
.player-username { font-size: var(--font-size-base); font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-chance { font-size: var(--font-size-sm); color: var(--text-muted-color); }
.player-amount { font-size: var(--font-size-base); font-weight: 700; color: var(--text-color); font-family: monospace; }

.current-hash-block {
    text-align: center; font-size: var(--font-size-xs); color: var(--text-muted-color);
    font-family: monospace; background: var(--surface-color); padding: 8px; border-radius: 8px;
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.hash-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 1000; display: flex;
    justify-content: center; align-items: flex-end; backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
.modal-content {
    background: var(--bg-color); width: 100%; border-radius: 16px 16px 0 0;
    padding: 20px; max-height: 90vh; overflow-y: auto;
    transform: translateY(100%); transition: transform 0.3s ease-out;
}
.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-header h3 { font-size: var(--font-size-lg); color: var(--text-color); display: flex; align-items: center; gap: 12px; margin: 0;}
.modal-header h3 .bi { color: var(--primary-color); }
.close-btn { background: none; border: none; color: var(--text-muted-color); font-size: 28px; cursor: pointer; }

.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color);
    /* Добавляем легкий градиент для глубины */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    display: flex;
    justify-content: center; align-items: center; z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s;
}
.loader-content {
    text-align: center;
}

.loader-icon {
    font-size: 48px;
    color: var(--primary-color);
    display: block; /* Важно для правильной работы transform */
    animation: pulse-icon 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.loading-text {
    margin-top: 15px;
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
    letter-spacing: 0.5px;
    /* Добавляем анимацию "дыхания" тексту */
    animation: pulse-text 2s infinite linear;
}

/* Анимация для иконки (пульсация) */
@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Анимация для текста (плавное затухание) */
@keyframes pulse-text {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}


.history-list {
    max-height: 70vh; /* Ограничиваем высоту, чтобы появилась прокрутка */
    overflow-y: auto;
    padding-right: 5px; /* Небольшой отступ, чтобы скроллбар не прилипал */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Стили для индикатора загрузки в истории */
.history-loader {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.history-loader.hidden {
    display: none;
}
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spinner-anim 0.8s linear infinite;
}
@keyframes spinner-anim {
    to {
        transform: rotate(360deg);
    }
}
.history-item {
    display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center;
    background-color: var(--surface-color); padding: 10px 15px; border-radius: 12px;
    border: 1px solid var(--border-color); cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}
.history-item:active { transform: scale(0.98); background-color: #343638; }
.h-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.history-avatar, .history-avatar-placeholder {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background-color: var(--block-bg-color);
}
.history-avatar { object-fit: cover; }
.history-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-muted-color); }
.h-info { line-height: 1.3; overflow: hidden; display: flex; flex-direction: column; gap: 5px; }
.h-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-meta {
    display: flex;
    align-items: center;
    gap: 4px; /* Расстояние между тегом и текстом */
    line-height: 1;
}
.history-room-tag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    flex-shrink: 0;
}
.room-low {
    background-color: rgba(86, 122, 161, 0.2);
    color: #87a8c7;
}
.room-medium {
    background-color: rgba(181, 161, 95, 0.2);
    color: #e3d387;
}
.room-high {
    background-color: rgba(181, 95, 95, 0.2);
    color: #e38787;
}
.h-right { display: flex; align-items: center; gap: 10px; }
.h-win-amount { font-weight: 700; font-size: var(--font-size-xs); color: var(--success-color); }
.h-arrow { font-size: 18px; color: var(--text-muted-color); }

.legit-body { display: flex; flex-direction: column; gap: 15px; }
.legit-info-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    background-color: var(--surface-color); padding: 12px; border-radius: 12px;
}
.info-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.info-item .label { font-size: var(--font-size-sm); color: var(--text-muted-color); }
.info-item b { font-size: var(--font-size-base); font-weight: 600; }
.legit-proof-section { display: flex; flex-direction: column; gap: 8px; }
.copy-field { margin-bottom: 0; display: flex; align-items: center; gap: 5px; background-color: var(--block-bg-color); border: 1px solid var(--border-color); border-radius: 8px; font-family: monospace;}
.copy-field .label { font-size: var(--font-size-sm); padding: 0 10px; color: var(--text-muted-color); }
.copy-field input { padding: 8px 10px; font-size: 12px; background: none; border: none; color: var(--text-muted-color); flex: 1; min-width: 0; }
.verify-main-btn {
    margin: 0; padding: 12px; transition: all 0.3s; display: flex;
    align-items: center; justify-content: center; gap: 8px; border: none;
    border-radius: 8px; font-weight: 700; cursor: pointer; color: #000;
    background-color: var(--primary-color);
}
.verify-main-btn.checking { background-color: #555; color: white; cursor: default; }
.verify-main-btn.verified { background-color: var(--success-color); color: white; cursor: default; }
.verify-main-btn.mismatch { background-color: var(--danger-color); color: white; cursor: default; }
.verify-main-btn .spin-anim { display: inline-block; animation: spin 1.5s linear infinite; }

.legit-players-list-container {
    background-color: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.legit-header-row {
    display: grid; grid-template-columns: 1fr 70px 80px; gap: 15px;
    padding: 10px 15px; font-size: var(--font-size-sm); color: var(--text-muted-color);
    font-weight: 600; border-bottom: 1px solid var(--border-color);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.legit-players { max-height: 40vh; overflow-y: auto; }
.legit-player-row {
    display: grid; grid-template-columns: 1fr 70px 80px; gap: 15px;
    align-items: center; padding: 8px 15px; border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.legit-player-row:last-child { border-bottom: none; }
.legit-player-row:hover { background-color: rgba(255, 255, 255, 0.03); }
.player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.legit-avatar, .legit-avatar-placeholder {
    width: 32px; height: 32px; border-radius: 50%;
    flex-shrink: 0; background-color: var(--block-bg-color);
}
.legit-avatar { object-fit: cover; }
.legit-avatar-placeholder { display: flex; align-items: center; justify-content: center; }
.p-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-percent, .p-amount { text-align: right; font-weight: 500; font-family: monospace; }
.p-percent { color: var(--text-color); }
.p-amount { color: var(--text-muted-color); }

.legit-player-row.is-winner {
    background-color: rgba(255, 171, 96, 0.1);
    border-left: 3px solid var(--primary-color);
    padding-left: 12px;
}
.legit-player-row.is-winner .p-name,
.legit-player-row.is-winner .p-percent {
    color: var(--primary-color);
    font-weight: 700;
}

#toast-container {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    z-index: 2000; width: 90%; max-width: 400px; gap: 10px; display: flex; flex-direction: column;
}
.toast {
    padding: 12px 20px; border-radius: 8px; font-size: var(--font-size-sm);
    font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0; transform: translateY(-20px); transition: all 0.3s ease;
    width: 100%; text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background-color: var(--success-color); color: white; }
.toast.error { background-color: var(--danger-color); color: white; }
.toast.info { background-color: var(--surface-color); color: white; }

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--block-bg-color);
    color: var(--text-muted-color);
}

/* Аватар в шапке */
.avatar-wrapper {
    width: 38px;
    height: 38px;
    position: relative;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}
.avatar-image, #user-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
#user-avatar-placeholder {
    font-size: 20px;
}

/* Иконка в инпуте */
.input-wrapper i.bi-gem {
    color: var(--primary-color);
}

/* Аватар в списке ставок */
.bet-avatar, .bet-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bet-avatar-placeholder {
    font-size: 18px;
}

/* Иконки в таймере */
.timer-content i {
    font-size: 24px;
    line-height: 1;
}

/* Иконка кошелька в балансе */
.balance-section span {
    font-size: 10px;
    /* Убрали margin, так как теперь используем gap */
    color: var(--text-muted-color); /* Делаем иконку чуть менее яркой */
    transition: color 0.2s;
}

.balance-section:hover span {
    color: var(--primary-color); /* Иконка тоже становится активной */
}
.balance-section b {
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px; /* Небольшой разряд для читаемости */
    transition: color 1s ease;
}

/* ДОБАВЬТЕ ЭТИ НОВЫЕ КЛАССЫ */
.balance-up {
    /* Мгновенно становится зеленым */
    color: var(--success-color) !important;
    transition: none; /* Отключаем плавность для мгновенного появления */
}

.balance-down {
    /* Мгновенно становится красным */
    color: var(--danger-color) !important;
    transition: none;
}

.balance-normal {
    /* Этот класс нужен для JS, чтобы инициировать плавный возврат */
    color: var(--primary-color);
}
.modal-content.winner-modal {
    max-width: 350px; /* Делаем окно компактнее */
    width: 90%;
    border-radius: 16px; /* Скругляем все углы, так как оно по центру */
    text-align: center;
    padding: 20px;
    padding-top: 40px; /* Больше отступ сверху для ID раунда */
    position: relative;
    /* Убираем анимацию выезда снизу для этого окна */
    transform: none;
    transition: none;
}
/* Центрируем это конкретное модальное окно */
#modal-winner {
    align-items: center;
}

.winner-modal-round-id {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
    font-family: monospace;
}

.winner-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#winner-modal-avatar-wrapper {
    margin-bottom: 8px;
}
.winner-modal-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid var(--surface-color);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    object-fit: cover;
    font-size: 40px; /* Размер иконки для плейсхолдера */
}

.winner-modal-username {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
}

.winner-modal-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
}
.is-winner-label {
    color: var(--success-color);
}
.is-spectator-label {
    color: var(--text-muted-color);
}
.winner-modal-amount {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    transition: color 0.3s;
}
.winner-modal-amount.win {
    color: var(--success-color);
}
/* Добавляем знак "+" только для победителя */
.winner-modal-amount.win::before {
    content: '+';
}

/* Цвет суммы для зрителей (стандартный оранжевый) */
.winner-modal-amount.neutral {
    color: var(--primary-color);
}
.winner-modal-chance {
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
}

.winner-modal-done-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.2s;
}
.winner-modal-done-btn:hover {
    background-color: var(--border-color);
}

/* Стили для таймера автозакрытия */
.modal-close-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}
.winner-modal-timer-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: visible;
}
.winner-modal-timer-bg, .winner-modal-timer-path {
    fill: none;
    stroke-width: 4;
}
.winner-modal-timer-bg {
    stroke: var(--surface-color);
}
.winner-modal-timer-path {
    stroke: var(--primary-color);
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    /* Анимация управляется через JS */
}

.modal-close-wrapper .close-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 0;
    line-height: 1;
}
.user-details b,
.player-username,
#winner-modal-username,
.h-title,
.p-name {
    /* Обязательные свойства для сокращения текста с "..." */
    white-space: nowrap;     /* Запрещаем перенос текста на новую строку */
    overflow: hidden;        /* Скрываем все, что не помещается */
    text-overflow: ellipsis; /* Добавляем многоточие в конце */

    /* Указываем, что элемент может быть меньше своего контента.
       Это критически важно для работы overflow в flex/grid контейнерах. */
    min-width: 0;
}

/* Дополнительно для родительских контейнеров, чтобы они не растягивались */
.user-details,
.player-info,
.player-cell {
    min-width: 0;
}
.copy-field {
    position: relative;
    /* Убрали gap, так как кнопка теперь внутри */
}

.copy-field input {
    /* Добавляем отступ справа, чтобы текст не заезжал под кнопку */
    padding-right: 45px !important;
}

.copy-btn {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    border-radius: 8px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;

    transition: all 0.2s;
}

.copy-btn:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

.copy-btn:active {
    transform: translateY(-50%) scale(0.95);
    background-color: var(--block-bg-color);
}
.language-selector-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
#language-selector-btn {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}
#language-selector-btn:hover {
    background-color: var(--border-color);
}
#selected-lang-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
}
#selected-lang-code {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
}
#language-selector-btn .bi-chevron-down {
    color: var(--text-muted-color);
    transition: transform 0.2s;
}
#language-selector-btn.open .bi-chevron-down {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 5px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}
.language-option:hover {
    background-color: var(--block-bg-color);
}
.language-option img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.language-option span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.plaques-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.plaque {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plaque:active {
    transform: scale(0.97);
    background-color: #343638;
}

.plaque-top-row, .plaque-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2px;
}

.plaque-user {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0; /* Критически важно для работы text-overflow */
    flex: 1;
}

.plaque-avatar {
    width: var(--font-size-xs);
    height: var(--font-size-xs);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--block-bg-color);
}

.plaque-username {
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plaque-win-amount {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #49a9f2; /* Яркий синий цвет, как в примере */
    flex-shrink: 0; /* Чтобы сумма не сжималась */
}
/* Убираем валюту из этой плашки для минимализма */
.plaque-win-amount::after {
    content: ''; /* Можно добавить ' #TH', если нужно */
}


.plaque-type-label, .plaque-chance-label {
    font-size: clamp(8px, 1.6vw, 10px);
    font-weight: bold;
    color: var(--text-muted-color);
    text-transform: uppercase;
}

.plaque-chance-label {
    text-align: end;
}

.plaque-empty-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
    width: 100%;
    text-align: center;
}

/* Анимация загрузки для плашек */
.plaque.loading {
    background: linear-gradient(90deg, #2a2c2e 25%, #343638 50%, #2a2c2e 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}
/* Во время загрузки содержимое будет пустым, т.к. JS его очищает */

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
body.rtl {
    direction: rtl;
    text-align: right;
}

/* Отзеркаливаем отступы и порядок элементов */
body.rtl .top-app-bar,
body.rtl .plaque-top-row,
body.rtl .plaque-user,
body.rtl .plaque-details,
body.rtl .h-left {
    flex-direction: row-reverse;
}

body.rtl .app-bar-actions {
    margin-right: auto;
    margin-left: 0;
}

body.rtl .plaque-username {
    text-align: right;
}

body.rtl .plaque-win-amount {
    padding-right: 10px;
    padding-left: 0;
}

body.rtl .battle-row {
    border-right: 4px solid transparent;
    border-left: none;
}

body.rtl .h-arrow {
    transform: rotate(180deg);
}

body.rtl .legit-header-row,
body.rtl .legit-player-row {
    text-align: right;
}

body.rtl .legit-player-row.is-winner {
    border-right: 3px solid var(--primary-color);
    border-left: none;
    padding-right: 12px;
    padding-left: 15px;
}
.currency-switcher {
    display: flex;
    background-color: var(--block-bg-color);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color);
}
.currency-btn {
    background: none;
    border: none;
    color: var(--text-muted-color);
    padding: 4px 4px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.currency-btn.active {
    background-color: var(--surface-color);
    color: var(--primary-color);
}
#balance.fade-out {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.header-btn.hidden {
    display: none;
}

/* Стили тела модального окна */
.deposit-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.deposit-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.deposit-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deposit-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s, background-color 0.2s;
}

.deposit-option:active {
    transform: scale(0.98);
    background-color: #343638;
}

.deposit-option-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--block-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary-color);
}

.deposit-option-info {
    line-height: 1.3;
    display: flex;
    flex-direction: column;
}

.deposit-option-title {
    font-weight: 700;
    font-size: var(--font-size-base);
}

.deposit-option-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
}

.deposit-option .bi-box-arrow-up-right {
    font-size: 18px;
    color: var(--text-muted-color);
}
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(26, 28, 30, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    /* Учитываем безопасную зону снизу для iPhone X+ */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 900;
}

.nav-item {
    background: none;
    border: none;
    color: var(--text-muted-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    width: 100%; /* Расширяем область клика */
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item:active {
    transform: scale(0.95);
}

/* Утилита для скрытия экранов */
.hidden {
    display: none !important;
}
.roulette-header-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface-color);
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.r-status-row {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.r-timer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

/* 2. Wheel Wrapper */
.roulette-wheel-wrapper {
    position: relative;
    width: 80%; /* Уменьшите ширину, если колесо слишком огромное */
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    /* border: 4px solid var(--border-color); <--- Уберите border, если он обрезает */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Важно, чтобы углы не торчали */
}

#roulette-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Вращение будет через transform в JS */
    transition: transform 5s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.roulette-pointer-top {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #fff; /* Белая стрелка */
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

/* 3. History Strip */
.roulette-history-block {
    background-color: var(--surface-color);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.r-hist-header {
    font-size: 10px;
    color: var(--text-muted-color);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.r-hist-list {
    display: flex;
    gap: 6px;
    overflow-x: auto; /* Скролл если не влезает */
    padding-bottom: 2px;
    /* Скрываем скроллбар */
    scrollbar-width: none;
}
.r-hist-list::-webkit-scrollbar { display: none; }

.hist-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    border: 2px solid rgba(255,255,255,0.1);
}

.hist-bubble-placeholder {
    color: var(--text-muted-color);
    font-size: 12px;
}

/* Цвета для рулетки */
.bg-red { background-color: #ff4444; }
.bg-black { background-color: #2b2b2b; }
.bg-green { background-color: #00c853; color: white; border-color: #ffd700; } /* Зеленый с золотой обводкой */

.roulette-controls {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.r-bet-buttons-row {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr; /* Зеленая кнопка чуть уже */
    gap: 8px;
    margin-top: 10px;
}

.r-btn {
    border: none;
    border-radius: 8px;
    padding: 5px 5px;
    cursor: pointer;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.1s, filter 0.2s;
    position: relative;
    overflow: hidden;
}

.r-btn:active {
    transform: scale(0.96);
}

/* Цвета кнопок */
.btn-red {
    background: linear-gradient(145deg, #ff5e5e, #d32f2f);
    box-shadow: 0 4px 0 #b71c1c;
}
.btn-green {
    background: linear-gradient(145deg, #00e676, #00c853);
    box-shadow: 0 4px 0 #009624;
    color: #003300; /* Темный текст для контраста */
}
.btn-black {
    background: linear-gradient(145deg, #424242, #212121);
    box-shadow: 0 4px 0 #000000;
}

/* При нажатии "вдавливаем" кнопку (уменьшаем тень) */
.r-btn:active {
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
    transform: translateY(2px);
}

.r-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.r-mult {
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.r-range {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.r-btn-pot {
    font-size: var(--font-size-xs);
    background-color: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    min-width: 40px;
}
/* Для зеленой кнопки подложка пота темнее */
.btn-green .r-btn-pot {
    background-color: rgba(0,50,0,0.2);
    color: #003300;
    font-weight: 700;
}

/* --- СПИСОК СТАВОК РУЛЕТКИ --- */
.roulette-bets-feed {
    padding-bottom: 20px;
}

.r-feed-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-muted-color);
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0 5px;
}

.r-bet-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    background-color: var(--surface-color);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 6px;
    border-left: 4px solid transparent;
}

/* Индикатор цвета ставки слева */
.r-bet-row.bet-red { border-left-color: #ff4444; }
.r-bet-row.bet-green { border-left-color: #00c853; }
.r-bet-row.bet-black { border-left-color: #2b2b2b; }

.r-bet-avatar {
    width: 24px; height: 24px; border-radius: 50%;
}
.btn-sun {
    background: linear-gradient(145deg, #ffc94d, #ff9800);
    box-shadow: 0 4px 0 #c66900;
    color: #432c00; /* Темно-коричневый для контраста */
}
.btn-moon {
    background: linear-gradient(145deg, #8e99f3, #3f51b5);
    box-shadow: 0 4px 0 #002984;
    color: #e8eaf6;
}
.btn-star {
    background: linear-gradient(145deg, #4db6ac, #00897b);
    box-shadow: 0 4px 0 #005b4f;
    color: #e0f2f1;
}

/* 2. Подложка для сумм ставок на кнопках */
.btn-sun .r-btn-pot {
    background-color: rgba(67, 44, 0, 0.2);
    color: #432c00;
    font-weight: 700;
}
.btn-moon .r-btn-pot, .btn-star .r-btn-pot {
    background-color: rgba(0, 0, 0, 0.2);
}

/* 3. Бейджи в истории и списке ставок (вместо bg-red, bg-black) */
.badge-sun { background-color: #ff9800; }
.badge-moon { background-color: #3f51b5; }
.badge-star { background-color: #00897b; border: 2px solid #ffeb3b; } /* Звезда с золотой обводкой */

/* 4. Левая граница в списке ставок (вместо bet-red, bet-black) */
.bet-sun { border-left-color: #ff9800; }
.bet-moon { border-left-color: #3f51b5; }
.bet-star { border-left-color: #00897b; }