.chat-level-badge {
    display: inline-block;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    margin-right: 4px;
    vertical-align: middle;
    line-height: 16px;
    min-width: 16px;
    text-align: center;
    background: #555;
}

.chat-lvl-0   { background: linear-gradient(135deg, rgba(139,107,74,0.65), rgba(107,66,38,0.65)); color: #f0dbc4; }
.chat-lvl-10  { background: linear-gradient(135deg, rgba(67,160,71,0.65), rgba(46,125,50,0.65)); color: #c8e6c9; box-shadow: 0 0 2px rgba(67,160,71,0.3); }
.chat-lvl-20  { background: linear-gradient(135deg, rgba(0,172,193,0.65), rgba(0,131,143,0.65)); color: #b2ebf2; box-shadow: 0 0 3px rgba(0,172,193,0.35); }
.chat-lvl-30  { background: linear-gradient(135deg, rgba(30,136,229,0.65), rgba(21,101,192,0.65)); color: #bbdefb; box-shadow: 0 0 5px rgba(30,136,229,0.4); }
.chat-lvl-40  { background: linear-gradient(135deg, rgba(94,53,177,0.65), rgba(69,39,160,0.65)); color: #d1c4e9; box-shadow: 0 0 7px rgba(94,53,177,0.45); }
.chat-lvl-50  { background: linear-gradient(135deg, rgba(229,57,53,0.65), rgba(198,40,40,0.65)); color: #ffcdd2; box-shadow: 0 0 9px rgba(229,57,53,0.5); }
.chat-lvl-60  { background: linear-gradient(135deg, rgba(255,160,0,0.65), rgba(255,111,0,0.65)); color: #ffe0b2; box-shadow: 0 0 12px rgba(255,160,0,0.55); }
.chat-lvl-70  { background: linear-gradient(135deg, rgba(255,82,82,0.65), rgba(255,23,68,0.65)); color: #ffebee; box-shadow: 0 0 15px rgba(255,23,68,0.6); text-shadow: 0 0 6px rgba(255,23,68,0.5); }
.chat-lvl-80  { background: linear-gradient(135deg, rgba(24,255,255,0.65), rgba(0,229,255,0.65)); color: #cfffff; box-shadow: 0 0 18px rgba(0,229,255,0.65), 0 0 5px rgba(0,229,255,0.3); text-shadow: 0 0 8px rgba(0,229,255,0.5); }
.chat-lvl-90  { background: linear-gradient(135deg, rgba(255,23,68,0.65), rgba(213,0,249,0.65)); color: #f9d0ff; box-shadow: 0 0 22px rgba(213,0,249,0.7), 0 0 7px rgba(255,23,68,0.4); text-shadow: 0 0 8px rgba(213,0,249,0.6); }
.chat-lvl-100 { background: linear-gradient(135deg, rgba(255,215,0,0.65), rgba(255,107,53,0.65)); color: #fff9c4; box-shadow: 0 0 26px rgba(255,215,0,0.75), 0 0 10px rgba(255,107,53,0.5); text-shadow: 0 0 10px rgba(255,215,0,0.8); animation: lvl100-glow 2s ease-in-out infinite alternate; }

@keyframes lvl100-glow {
    0% { box-shadow: 0 0 4px rgba(255,215,0,0.4); }
    100% { box-shadow: 0 0 12px rgba(255,215,0,0.8), 0 0 20px rgba(255,107,53,0.4); }
}

.preloader__container {
    background: #0e0e0e !important;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
}

.preloader__loaded {
    opacity: 0;
    pointer-events: none;
}

.preloader__item {
    width: 160px; 
    height: 160px;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border: none !important;
}

.preloader__spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent !important;
    border-top: 4px solid #d9534f !important;
    animation: rotation 0.8s linear infinite;
    box-sizing: border-box;
}

.preloader__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px; 
    box-sizing: border-box;
    display: block;
    animation: logo-pulse 2s infinite ease-in-out;
    border: none !important;
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes logo-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.85);
        opacity: 0.7;
    }
}

@media (min-width: 768px) {
    .preloader__item { 
        width: 200px; 
        height: 200px; 
    }
    .preloader__spinner { 
        border-width: 5px !important;
        border-top-width: 5px !important;
    }
}


/* --- PODSTAWOWE KOLORY TŁA I TEKSTU --- */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #656565 !important;          /* Jasny tekst na ciemnym tle */
    background-color: #111 !important;   /* Bardzo ciemne tło */
    
    margin: 0 !important;
    padding-top: 50px !important;
    padding-bottom: 40px !important;
}

/* --- LINKI --- */
a { 
    color: #5491cf !important; 
    text-decoration: none; 
}
a:hover { 
    text-decoration: underline; 
}

.chat-link,
.chat-link:hover,
.chat-link:active {
    color: #4e7ba9 !important;
    font-weight: bold !important;  /* Pogrubienie nazwy gracza */
}

/* --- GLOBALNE OBRAMOWANIA --- */
* {
    border-color: #121212 !important;
}

/* --- PRZYCISKI --- */
.btn-default, 
.btn-primary, 
.btn-success, 
.btn-info, 
.btn-warning, 
.btn-danger, 
.btn-inverse {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    border: 1px solid transparent;
}

.btn-danger { 
    background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%) !important; 
    border-color: #c12e2a !important;
    color: #fff !important;
}

.btn-success { 
    background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%) !important; 
    border-color: #419641 !important;
    color: #fff !important;
}

.btn-default { 
    background-color: #111 !important;
    background-image: none !important;
    color: #5c5c5c !important;
    border-color: #121212 !important;
}

.btn-inverse {
    color: #fff !important; 
    background-color: #111 !important;
    border-color: #111111 !important;
    background-image: linear-gradient(to bottom, #444444 0%, #222222 100%) !important;
}

.btn-inverse:hover { 
    color: #fff !important; 
    background-color: #151515 !important; 
}

.betshort, 
.wbtn,
.btn-default.betshort {
    background-color: #111 !important;
    background-image: none !important;
    color: #656565 !important;              /* Kolor tekstu jak balance */
    font-weight: normal !important;
    text-shadow: none !important;
    transition: color 0.3s ease !important; /* Płynne przejście koloru */
}

/* Hover - płynna zmiana na lekko biały */
.betshort:hover:not(:disabled),
.wbtn:hover:not(:disabled),
.btn-default.betshort:hover:not(:disabled),
.btn-group > .btn.betshort:hover,
button.betshort:hover {
    color: #d0d0d0 !important;              /* Lekko biały kolor przy hover */
    background-color: #111 !important;      /* Zachowaj tło */
}

/* Styl dla zablokowanych przycisków */
.betButton:disabled,
.betButton.disabled-limit {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' stroke='%23FF0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' fill='white'></circle><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'></line></svg>") 16 16, not-allowed !important;
    pointer-events: auto !important;
    transform: none !important;
    opacity: 0.85 !important;
    filter: brightness(0.8);
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.2) !important;
    border-color: transparent !important;
}

/* Efekt hover dla przycisków zakładów (czerwony, zielony, czarny) */
.betButton.btn-danger:hover:not(:disabled):not(.disabled-limit) {
    filter: brightness(1.15) !important;           /* Delikatne rozjaśnienie */
    box-shadow: 0 0 15px rgba(217, 83, 79, 0.6) !important;  /* Czerwona poświata */
    transition: all 0.2s ease !important;
}

.betButton.btn-success:hover:not(:disabled):not(.disabled-limit) {
    filter: brightness(1.15) !important;           /* Delikatne rozjaśnienie */
    box-shadow: 0 0 15px rgba(92, 184, 92, 0.6) !important;  /* Zielona poświata */
    transition: all 0.2s ease !important;
}

.betButton.btn-inverse:hover:not(:disabled):not(.disabled-limit) {
    filter: brightness(1.25) !important;           /* Delikatne rozjaśnienie */
    box-shadow: 0 0 15px rgba(68, 68, 68, 0.6) !important;  /* Szara poświata */
    transition: all 0.2s ease !important;
}

/* Efekt hover dla przycisków kwot (btn-group) - zmiana koloru tekstu */
.btn-group > .btn:hover:not(:disabled),
.betshort:hover:not(:disabled) {
    color: #656565 !important;                     /* Kolor tekstu jak balance */
    transition: all 0.2s ease !important;
}

/* --- NAVBAR --- */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    min-height: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    
    border-radius: 0 !important;
    border-top: 0 !important;
    margin-bottom: 0 !important;
    z-index: 1030 !important;
}

.navbar-default {
    background-color: #151515 !important;
    border-color: #121212 !important;
}

.navbar-header, 
.navbar-nav > li > a, 
.navbar-brand {
    height: 50px !important;
    line-height: 20px !important;
}

.navbar-nav > li > a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.navbar-brand {
    padding: 15px 15px !important;
}

.navbar-brand > img {
    -webkit-filter: brightness(130%) !important;
    filter: brightness(130%) !important;
}

.navbar-nav > li > a > img, 
.navbar-nav .rounded {
    height: 30px !important;
    width: auto !important;
    margin-top: -5px !important;
    display: inline-block !important;
}

.navbar-nav .rounded, 
.navbar-nav img {
    max-height: 34px;
    margin-top: -7px;
}

.navbar-default .navbar-nav > li > a {
    color: #616161 !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    background-color: #151515 !important;
    color: #f8f8f8 !important;
}

/* --- SIDEBAR --- */
#sidebar {
    width: 50px;
    position: fixed;
    left: 0px; 
    top: 50px; 
    bottom: 0px;
    background-color: #151515 !important;
    border-right: none !important;
    text-align: center; 
    padding-top: 10px;
    z-index: 100;
}

.side-icon.active {
    background-color: #1e1e1e !important;
}

/* --- PULLOUT / CHAT CONTAINER --- */
#pullout {
    width: 400px;
    position: fixed;
    left: 50px;
    top: 50px !important;
    bottom: 0px;
    height: auto;
    background-color: #1e1e1e !important;
    border-right: 1px solid #121212 !important;
    z-index: 999;
    transition: left 0.3s ease;
}

/* Przycisk wyboru języka */
#tab1 > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    
    height: 50px !important;
    margin: 0 !important;
    padding-top: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    
    border-bottom: 1px solid #121212 !important;
    background-color: #1e1e1e !important;
    box-sizing: border-box !important;
}

#lang {
    margin: 0 !important;
    width: 100%;
    cursor: pointer;
    background-color: #080808 !important;
    color: #b0b0b0 !important;
    border-color: #121212 !important;
}

/* --- OKIENKO EMOTEK --- */
.emote-popup {
    position: absolute;
    bottom: 45px;
    left: 0;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    background-color: #1e1e1e !important;
    border: 1px solid #121212 !important;
    border-radius: 4px;
    padding: 5px;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.emote-select {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
}

.emote-select:hover {
    background-color: #2a2a2a !important;
}

.emote-select img {
    height: 24px;
}

/* --- CZAT --- */
.divchat {
    background-color: #1e1e1e !important;
    border-color: #181818 !important;
    height: 500px !important;
    width: 399px !important;
    overflow-y: auto;
    word-wrap: break-word;
    padding: 0;
    border-bottom: 1px solid #121212 !important;
    position: relative;
}

/* Paski przewijania */
.divchat::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #111 !important;
}

.divchat::-webkit-scrollbar {
    width: 12px;
    background-color: #111 !important;
}

.divchat::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555 !important;
}

/* Naprzemienne tła wiadomości */
#chatArea > div:nth-child(odd) {
    background-color: #333333 !important;
    box-shadow: rgba(255,255,255,0.0392157) 0px 1px 0px 0px inset;
    border-bottom: 1px solid #000000 !important;
}

#chatArea > div:nth-child(even) {
    background-color: #2B2B2B !important;
    box-shadow: rgba(255,255,255,0.0392157) 0px 1px 0px 0px inset;
    border-bottom: 1px solid #000000 !important;
}

/* Układ wiadomości */
#chatArea > div > div {
    display: flex !important;
    align-items: flex-start !important;
    padding: 5px 5px 5px 8px;
    border-left: 3px solid #333333;  /* Ciemny pasek dla zwykłych graczy */
}

#chatArea > div > div.rank {
    border-left: 3px solid;
}

/* Kolory rang - NICK MA KOLOR TAKI SAM JAK PASEK (tylko 5 rang) */

/* Admin - Czerwony #FF2A00 */
#chatArea > div > div.chat-mod {
    border-color: #FF2A00 !important;
}
#chatArea > div > div.chat-mod a.chat-link {
    color: #FF2A00 !important;
    font-weight: bold !important;
}

/* Moderator - Cyjan #00C0FF */
#chatArea > div > div.chat-pmod {
    border-color: #00C0FF !important;
}
#chatArea > div > div.chat-pmod a.chat-link {
    color: #00C0FF !important;
    font-weight: bold !important;
}

/* Streamer - Fioletowy #9B66FF */
#chatArea > div > div.chat-streamer {
    border-color: #9B66FF !important;
}
#chatArea > div > div.chat-streamer a.chat-link {
    color: #9B66FF !important;
    font-weight: bold !important;
}

/* Veteran - Pomarańczowy #FF9000 */
#chatArea > div > div.chat-veteran {
    border-color: #FF9000 !important;
}
#chatArea > div > div.chat-veteran a.chat-link {
    color: #FF9000 !important;
    font-weight: bold !important;
}

/* YouTuber - Czerwony YT #CC181E */
#chatArea > div > div.chat-youtuber {
    border-color: #CC181E !important;
}
#chatArea > div > div.chat-youtuber a.chat-link {
    color: #CC181E !important;
    font-weight: bold !important;
}

/* Zwykły gracz (chat-pro) - Bardzo ciemny pasek #101010 */
#chatArea > div > div.chat-pro {
    border-color: #101010 !important;
}
#chatArea > div > div.chat-pro a.chat-link {
    color: #4e7ba9 !important;     /* Niebieski kolor nicku */
    font-weight: bold !important;
}

/* Avatar w czacie */
#chatArea .chat-img {
    flex-shrink: 0 !important;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    margin-top: 2px;
}

/* Wrapper treści wiadomości */
.chat-content-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    word-break: break-word !important;
    line-height: 1.35;
    margin-top: 3px !important;
}

/* Tekst wiadomości */
.chat-message-text { 
    color: #d0d0d0 !important; 
    margin-left: 3px; 
}

.chat-message-text img { 
    max-height: 19px; 
    vertical-align: middle; 
}

/* Odsunięcie wiadomości systemowych od krawędzi okna */
.chat-message.system-msg,
.chat-message.italic {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Wiadomości błędów */
.divchat .error {
    color: #d9534f !important;
    font-weight: bold;
}

.divchat .error {
    color: #d9534f !important;
    font-weight: bold;
}

/* Emotki w czacie */
.divchat img {
    max-height: 24px;
    vertical-align: middle;
    margin-top: -2px;
}

/* Aktywna wiadomość */
#chatArea > div.active_msg {
    border: 1px solid #FFA500 !important;
}

#chatArea > div.active_msg > div {
    padding: 4px 4px 5px 7px;
}

/* Formularz czatu */
#chatForm {
    width: 100%;
    padding: 5px;
    position: relative;
    background-color: #1e1e1e !important;
}

#chatMessage {
    color: #ededed !important;
    background-color: #262626 !important;
    border-color: #121212 !important;
    height: 34px !important;           /* Standardowa wysokość Bootstrap */
    width: 100% !important;            /* Pełna szerokość */
}

/* Przycisk emotek - ta sama wysokość co input */
#emoteToggle {
    height: 34px !important;           /* Dokładnie taka sama wysokość jak input */
    padding: 6px 12px !important;      /* Standardowy padding Bootstrap */
    line-height: 1.42857143 !important;
}

/* Input group - zapewnia przyklejenie */
.input-group {
    display: table !important;
    border-collapse: separate !important;
}

.input-group .form-control {
    display: table-cell !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-btn {
    display: table-cell !important;
    vertical-align: middle !important;
}

.input-group-btn > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- SMILES/EMOTKI --- */
#Smiles {
    background-color: #111 !important;
    border-color: #111 !important;
    color: #656565 !important;
    padding: 9px 10px;
    z-index: 4;
}

/* --- MAIN PAGE --- */
#mainpage {
    margin-left: 450px;
    padding: 15px;
    position: relative;
    min-height: calc(100vh - 150px);
    transition: margin-left 0.3s ease;
}

/* --- PANELE I KONTENERY --- */
.panel-default > .panel-heading,
.panel {
    background-color: #1e1e1e !important;
    border-color: #121212 !important;
}

.panel {
    margin-bottom: 20px;
    border: 1px solid #121212 !important;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-heading {
    padding: 10px 15px;
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #121212 !important;
}

.panel-body {
    padding: 0px;
    background-color: #1e1e1e !important;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #1e1e1e !important;
    border: 1px solid #121212 !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

/* --- PROGRESS BAR --- */
.progress {
    height: 50px; 
    margin-bottom: 5px; 
    margin-top: 5px;
    background-color: #2d2d2d !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
    position: relative;
}

.progress-bar {
    background-color: #ce4441 !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

#counter {
    transition: none !important;
    -webkit-transition: none !important;
}

#banner {
    font-weight: 700; 
    font-size: 18px; 
    position: absolute;
    left: 0; 
    width: 100%; 
    text-align: center; 
    line-height: 50px;
    z-index: 5; 
    color: #e2e2e2 !important;
}

/* --- CASE ROULETTE --- */
#case {
    border: 1px solid #121212 !important;
    border-radius: 4px;
    max-width: 1125px; 
    height: 75px;
    background-image: url("/template/img/cases.png");
    background-repeat: repeat-x;
    background-position: 0px 0px;
    position: relative; 
    margin: 0px auto 5px auto;
}

#pointer {
    width: 3px; 
    background: #ff0;
    position: absolute; 
    left: 50%; 
    top: 0; 
    height: 100%; 
    z-index: 10;
}

/* --- SLOTY/PRZEDMIOTY --- */
.slot {
    width: 110px;
    height: 110px;
    background-position: 0px 15px;
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    background-color: #282828 !important;
}

.name {
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #282828 !important;
    color: #7c7c7c !important;
}

.bot {
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 2px;
    border-bottom-right-radius: 4px;
    color: #7c7c7c !important;
}

.placeholder {
    width: 110px;
    height: 110px;
    background-color: #282828 !important;
    display: inline-block;
    margin: 1px;
}

/* --- ZAKŁADY (BET LIST) --- */
.betlist,
.betlist .list-group-item {
    background-color: #1e1e1e !important;
    border-color: #121212 !important;
}

.betlist {
    margin: 0 !important; 
    padding: 0 !important; 
    list-style: none;
    margin-bottom: 0 !important;
    border-bottom: none;
}

.betlist .list-group-item {
    border: 0;
    border-bottom: 1px solid #121212 !important;   
    color: #b0b0b0 !important;
    padding: 5px 10px !important;                   
    font-size: 14px;
    line-height: 22px !important;                   
    border-radius: 0;
    margin: 0 !important;
}

.betlist .rounded {
    margin: 0px 10px;
    border-radius: 4px;
}

/* LEWA STRONA (Nick + Avatar) - kolor #656565 */
.betlist .list-group-item .pull-left {
    font-weight: bold !important;
    color: #e0e0e0 !important;
}

/* Nick gracza - specjalny kolor #656565 */
.betlist .list-group-item .pull-left span {
    color: #656565 !important;
}

/* PRAWA STRONA (Kwota) - POGRUBIONA */
.betlist .list-group-item .pull-right {
    font-weight: bold !important;    
    color: #656565 !important;
    font-size: 13px;
}
/* Podsumowanie zakładów - POPRAWIONA WERSJA */
.total-row {
    font-size: 18px; 
    font-weight: bold; 
    padding: 10px;           
    overflow: hidden;
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #121212 !important;
}

/* Tekst "Total bet" - kolor #656565 */
.total-row .pull-left {
    color: #656565 !important;
}

/* Liczby total - kontrolowane przez JavaScript */
.total-row .pull-right,
.total-row .total {
    color: #656565;  
}

.total-row .total {
    padding: 0;                      
    background-color: transparent !important;
    border-radius: 4px;
    min-width: 60px;
}

.my-row {
    font-size: 18px; 
    font-weight: bold; 
    border-bottom: 1px solid #121212 !important;
    padding: 10px; 
    text-align: center;
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* KLUCZOWE: Bazowy kolor bez !important, żeby JavaScript mógł go nadpisać */
.mytotal,
.total {
    color: #656565;  /* Kolor bazowy */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Animacja wygranej - zielony kolor */
.mytotal.win-flash,
.total.win-flash {
    color: #5cb85c !important;
    text-shadow: 0 0 10px #5cb85c;
    animation: winPulse 1s ease-out;
}

/* Animacja przegranej - czerwony kolor */
.mytotal.loss-flash,
.total.loss-flash {
    color: #d9534f !important;
    text-shadow: 0 0 10px #d9534f;
    animation: lossPulse 1s ease-out;
}

@keyframes winPulse {
    0% { 
        color: #656565;
        text-shadow: none;
    }
    50% { 
        color: #5cb85c;
        text-shadow: 0 0 15px #5cb85c, 0 0 25px #5cb85c;
    }
    100% { 
        color: #5cb85c;
        text-shadow: 0 0 10px #5cb85c;
    }
}

@keyframes lossPulse {
    0% { 
        color: #656565;
        text-shadow: none;
    }
    50% { 
        color: #d9534f;
        text-shadow: 0 0 15px #d9534f, 0 0 25px #d9534f;
    }
    100% { 
        color: #d9534f;
        text-shadow: 0 0 10px #d9534f;
    }
}

.mybet {
    color: #eb5348 !important;
}

.mybet .amount {
    font-weight: 700;
}

/* --- TABELE --- */
table {
    background-color: #1e1e1e !important;
    border-color: #121212 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #0f0f0f !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #1e1e1e !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-color: #373737 !important;
    color: #b0b0b0 !important;
}

.td-val {
    text-align: center;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid #1e1e1e !important;
}

/* --- ALERTY --- */
.alert {
    padding: 15px !important;
    margin-bottom: 20px !important;
    border: 2px solid transparent;
    border-radius: 4px !important;
}

.alert-info {
    color: #31708f !important;
    background-color: transparent !important;
    border-color: #31708f !important;
}

.alert-danger {
    color: #c9302c !important;
    background-color: transparent !important;
    border-color: #c9302c !important;
}

.alert-warning {
    color: #c9302c !important;
    background-color: transparent !important;
    border-color: #c9302c !important;
}

.alert-success {
    color: #449d44 !important;
    background-color: transparent !important;
    border-color: #449d44 !important;
}

/* --- KOLORY TEKSTU --- */
.text-danger {
    color: #c9302c !important;
}

.text-success {
    color: #449d44 !important;
}

/* --- DROPDOWN MENU --- */
.dropdown-menu {
    background-color: #282828 !important;
    border-color: #121212 !important;
}

.dropdown-menu > li > a {
    color: #f5f5f5 !important;
}

.dropdown-menu > li > a:hover {
    background-color: #1d1d1d !important;
    color: #f9f9f9 !important;
}

.dropdown-menu .divider {
    background-color: #1f1f1f !important;
}

/* --- FORMULARZ --- */
.form-control {
    background-color: #080808 !important;
    color: #b0b0b0 !important;
    border-color: #121212 !important;
}

input[type=checkbox] {
    cursor: pointer;
    opacity: 1 !important;
    position: 1 !important;
    margin-top: 1px;
}

.checkbox label {
    display: flex;
    align-items: center;
    color: #b0b0b0 !important;
}

/* --- MODAL --- */
.modal-content {
    background-color: #1a1a1a !important;
    border-color: #121212 !important;
    color: #b0b0b0 !important;
}

.modal-header,
.modal-footer {
    border-color: #252525 !important;
}

/* --- PRE / CODE --- */
pre {
    color: #f5f5f5 !important;
    background-color: #151515 !important;
    border-color: #121212 !important;
}

/* --- KULKI (BALL) --- */
.ball {
    color: #fff; 
    border-radius: 45px; 
    width: 45px; 
    height: 45px;
    font-size: 20px; 
    line-height: 45px; 
    font-weight: 700;
    text-align: center; 
    display: inline-block; 
    margin: 1px;
    cursor: default;
    border: 1px solid transparent;
    background-color: #000;
}

.ball-1 { 
    background-color: #c9302c; 
}

.ball-0 { 
    background-color: #449d44; 
}

.ball-8 { 
    background-color: #383838; 
}

/* --- STOPKA --- */
.footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    
    background-color: #111 !important;
    border-top: 1px solid #121212 !important;
    z-index: 2000 !important;
    
    text-align: center !important;
    line-height: 40px !important;
    padding: 0 !important;
    
    box-sizing: border-box !important;
    overflow: hidden !important;
    
    color: #656565 !important;
}

.footer ul {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
}

.footer li {
    display: inline;
    padding: 0 10px;
}

.footer img {
    height: 32px;
    margin-top: 6px;
}

/* --- MENU KONTEKSTOWE GRACZA --- */
#playerContextMenu {
    min-width: 140px;
    padding: 5px 0;
    margin: 0;
    font-size: 13px;
    text-align: left;
    background-color: #282828 !important;
    border: 1px solid #121212 !important;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.3);
}

#playerContextMenu li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #f5f5f5 !important;
    text-decoration: none;
    white-space: nowrap;
}

#playerContextMenu li a:hover {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
}

/* --- ANIMACJE --- */
@keyframes pulse-white {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.1); color: #fff; text-shadow: 0 0 5px #fff; }
    100% { transform: scale(1); color: inherit; }
}

.flash-update {
    animation: pulse-white 0.3s ease-out;
}

/* --- FAQ ITEM --- */
.faq-item {
    background-color: #151515 !important;
    border-color: #121212 !important;
}

/* --- HELPER CLASSES --- */
.noselect { 
    user-select: none; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.rounded { 
    border-radius: 4px; 
}

.pull-left { 
    float: left; 
}

.pull-right { 
    float: right; 
}

/* --- MEDIA QUERIES --- */
@media screen and (max-width: 991px) {
    .navbar-brand > img {
        width: 150px;
    }
    #sidebar {
        top: 101px !important;
    }
}

@media screen and (max-width: 768px) {
    .navbar-brand > img {
        width: 210px;
    }
    .footer {
        height: 100px !important;
    }
}

@media screen and (min-width: 768px) {
    #pullout {
        margin-top: -5px !important;
    }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(92, 184, 92, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 6px 2px rgba(92, 184, 92, 0.4); }
}