* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #e8e8e8;
    background-color: #121212;
    overflow-x: hidden;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ==========================================
   HERO SEKCIJA (JOŠ MALO POVEĆANO)
   ========================================== */
.hero {
    background: radial-gradient(circle at center, #0f2e13 0%, #081207 70%, #121212 100%);
    padding-top: 85px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #1c3d18;
}

.hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero-avatar {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-avatar::before,
.hero-avatar::after {

    content: "";

    position: absolute;

    width: 115%;
    height: 115%;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(83,252,24,0.45) 0%,
        rgba(83,252,24,0.15) 45%,
        rgba(83,252,24,0) 75%
    );

    animation: heroPulse 3s infinite ease-out;

    z-index: 0;
}

.hero-avatar::after {

    animation-delay: 1.5s;

}

.hero-avatar img {

    position: relative;
    z-index: 5;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:3px solid #53FC18;

    box-shadow:
        0 0 20px rgba(83,252,24,.45),
        0 0 50px rgba(83,252,24,.25);

}

.hero-title {
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 900;
    color: #53FC18;
    text-transform: uppercase;
    letter-spacing: 2px;
     margin-bottom: 3px;
    text-shadow: 0 0 22px rgba(83, 252, 24, 0.6);
    word-break: break-word;
}

/* ==========================================
   BREWING / LEADERBOARD SEKCIJA
   ========================================== */
.brewing-wrapper {
    margin:0 auto;
    padding:0 10px;
}
.brewing-top-label {
    font-size: clamp(14.5px, 2.3vw, 18px);
    font-weight: 800;
    color: #53FC18;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.brewing-main-heading {
    font-size: clamp(34px, 7vw, 65px);
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2.9px;
    margin-bottom: 6px;
    text-shadow: 0 0 30px rgba(83, 252, 24, 0.5);
    line-height: 1.08;
    word-break: break-word;
}

.brewing-desc {
    color: #aaaaaa;
    font-size: clamp(13.5px, 1.8vw, 15.5px);
    font-weight: 500;
    max-width: 515px;
    margin: 0 auto 14px auto;
    line-height: 1.5;
}

.btn-discord-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #53FC18;
    color: #000000;
    padding: 12px 26px;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 900;
    font-size: clamp(13.5px, 1.48vw, 15.5px);
    text-transform: uppercase;
    box-shadow: 0 4px 19px rgba(83, 252, 24, 0.33);
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.btn-discord-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 23px rgba(83, 252, 24, 0.6);
}

.brewing-note {
    color: #777777;
    font-size: clamp(11px, 1.18vw, 12.8px);
    letter-spacing: 0.5px;
}

/* ==========================================
   EKSKLUZIVNI BONUSI
   ========================================== */
.bonuses-section {
    padding: 28px 15px;
    max-width: 1100px;
    margin: 0 auto;
}

.bonuses-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-title {
    font-size: clamp(26px, 5vw, 36px);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-subtitle {
    color: #92b88b;
    font-size: clamp(11px, 2vw, 13px);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bonuses-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 30px;
}

.bonus-card {
    background-color: #121212;
    border: 2px solid #53FC18;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 20px rgba(83, 252, 24, 0.15);
    width: 100%;
    max-width: 460px;
}

.bonus-logo {
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bonus-logo img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.bonus-logo span {
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.bonus-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0;
}

.feature-item {
    background-color: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    padding: 14px 16px;
    color: #e8e8e8;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    word-break: break-word;
}

.check-icon {
    background-color: #53FC18;
    color: #000000;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.bonus-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bonus-code-box {
    background-color: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    color: #53FC18;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    word-break: break-all;
}

.btn-play {
    background-color: #53FC18;
    color: #000000;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(83, 252, 24, 0.4);
    display: block;
}

.btn-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(83, 252, 24, 0.8);
}

.responsible-gaming {
    text-align: center;
    font-size: 12px;
    color: #777777;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ==========================================
   FOOTER I ODGOVORNO IGRANJE
   ========================================== */
.footer {
    background-color: #1a1a1a;
    color: #888;
    text-align: center;
    padding: 20px 15px;
    margin-top: 40px;
    border-top: 1px solid #2c2c2c;
    font-size: 14px;
}

.global-responsible-gaming {
    text-align: center;
    width: 100%;
    padding: 20px 15px;
    font-size: 13px;
    color: #888888;
    background-color: #161616;
    border-top: 1px solid #252525;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.global-responsible-gaming a {
    color: #53FC18;
    text-decoration: none;
    transition: color 0.2s;
}

.global-responsible-gaming a:hover {
    color: #6dff3d;
    text-decoration: underline;
}

/* ==========================================
   RESPONSIVE (PRILAGOĐAVANJE ZA MOBILNE UREĐAJE)
   ========================================== */


.watch-icon {
    display: inline-block;
    margin-right: 5px;
    animation: rotateClock 2s linear infinite;
}


@keyframes rotateClock {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}
/* ==========================================
   KICK CONNECT KONTEJNER
   ========================================== */

.kick-connect-card {

    width:100%;
    background:linear-gradient(135deg,#16241a 0%,#0d150f 60%,#121212 100%);
    border:1px solid #2c4a2c;
    border-radius:20px;
    padding:20px 26px;
    display:grid;
    align-items:center;

    gap:25px;

}

.kick-connect-avatar {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 2px solid #53FC18;
    color: #53FC18;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 26px;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(83, 252, 24, 0.35);
}

.kick-connect-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.kick-connect-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
}

.kick-stats-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    align-self: center;
}

.kick-connect-right {

    width:120px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.kick-connect-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.kick-connect-heading {
    color: #ffffff;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.5px;
}

.kick-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #53FC18;
    color: #0a0a0a;
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.kick-connect-btn-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.kick-connect-btn:hover {
    background-color: #6dff3d;
    transform: translateY(-1px);
}

.kick-connect-btn.connected {
    background-color: #1a1a1a;
    color: #ff5b5b;
    border: 1px solid #ff5b5b;
}

.kick-connect-btn.connected:hover {
    background-color: #2a1a1a;
}

.kick-stat-divider {
    width: 1px;
    align-self: stretch;
    background-color: #2c4a2c;
    flex-shrink: 0;
}

.kick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 140px;
}

.kick-stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #92b88b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.kick-stat-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #53FC18;
}

.kick-stat-value {
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.kick-stat-note {
    color: #777777;
    font-size: 12px;
    font-weight: 600;
}

/* Desni panel — progress ka tiketu */
.ticket-progress {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(83, 252, 24, 0.15);
    border-radius: 12px;
    padding: 12px 14px;
}

.ticket-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ticket-progress-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #92b88b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ticket-progress-icon {
    width: 14px;
    height: 14px;
    color: #53FC18;
    flex-shrink: 0;
}

.ticket-progress-hours {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.ticket-progress-bar {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 7px;
}

.ticket-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #53FC18, #3dd10f);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.ticket-progress-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #777;
    font-size: 11px;
    font-weight: 600;
}

.ticket-progress-footer span:first-child {
    color: #53FC18;
    font-weight: 700;
}

.ticket-steps {
    margin: 0;
    padding-left: 18px;
    color: #b8b8b8;
    font-size: 12px;
    line-height: 1.55;
}

.ticket-steps li {
    margin-bottom: 2px;
}

.ticket-steps strong {
    color: #53FC18;
}

/* Steam URL unutar Kick kartice */
.steam-inline {
    margin-top: 18px;
    width: 100%;
    min-width: 280px;
}

.steam-inline-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.steam-inline-desc {
    color: #9c9c9c;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.steam-inline-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.steam-inline-input {
    flex: 1;
    height: 42px;
    background: #171717;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 0 14px;
    outline: none;
    transition: 0.25s;
}

.steam-inline-input:focus {
    border-color: #53FC18;
    box-shadow: 0 0 0 3px rgba(83, 252, 24, 0.15);
}

.steam-inline-save {
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    background: #53FC18;
    color: #111;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.steam-inline-save:hover {
    transform: translateY(-2px);
}

.steam-inline-status {
    margin-top: 8px;
    font-size: 13px;
    color: #9d9d9d;
}

.steam-inline-status.success {
    color: #53FC18;
}

.steam-inline-status.error {
    color: #ff5b5b;
}



/* =====================================
   WATCHTIME REWARD TUBE
===================================== */


.reward-tube-container{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;

}


.reward-tube-label{

    color:#92b88b;

    font-size:12px;

    font-weight:900;

    letter-spacing:1px;

    margin-bottom:14px;

}




/* STAKLENA CEV */
.reward-tube{

    position:relative;

    width:45px;

    height:220px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.25)
    );

    border:4px solid #53FC18;

    border-radius:25px;

    overflow:hidden;

    box-shadow:
    inset 0 0 20px rgba(83,252,24,0.7),
    0 0 30px rgba(83,252,24,0.8);

}


/* ZELENA TEČNOST */
.reward-liquid{

    position:absolute;
    bottom:0;
    left:0;

    width:100%;
    height:0%;

    background:
    linear-gradient(
        180deg,
        #c8ff99,
        #53FC18,
        #18a000
    );

    box-shadow:
    0 0 25px rgba(83,252,24,0.9);

    transition:height 0.5s ease;
}


/* TALAS NA VRHU */
.reward-liquid::before{


    content:"";


    position:absolute;


    top:-7px;


    left:-20%;


    width:140%;


    height:14px;


    background:#53FC18;


    border-radius:50%;


    animation:tubeWave 2s infinite linear;


}



@keyframes tubeWave{


    0%{

        transform:translateX(-10px);

    }


    50%{

        transform:translateX(10px);

    }


    100%{

        transform:translateX(-10px);

    }

}



.reward-status{


    margin-top:12px;


    color:#53FC18;


    font-size:14px;


    font-weight:900;

}

/* ==========================================
   CONNECT PAGE - NOVI DIZAJN (SAMO ZA KONEKT)
   ========================================== */

/* Dodaj bottom padding da sadržaj ne "seče" na dnu */
.connect-wrapper {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px 20px 60px; /* dodat bottom padding */
}
/* Gornja oznaka iznad grid-a (Stay connected) */
.connect-wrapper::before {
    content: "● Stay connected";
    display: block;
    text-align: center;

    color:#a0a0a0;
    font-size:12px;
    font-weight:700;

    letter-spacing:.5px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    padding:6px 16px;
    border-radius:20px;

    width:max-content;
    margin:0 auto 25px;
}

.connect-grid {

    display:grid;

    grid-template-columns:
    repeat(2, minmax(280px,1fr));

    gap:20px;

}

/* UNUTRAŠNJE KARTICE */
.connect-card {

    position:relative;

    overflow:hidden;

    background:#16161c;

    border:1px solid #282835;

    border-radius:16px;

    padding:22px;

    display:flex;

    align-items:center;

    text-decoration:none;

    transition:.25s ease;

    min-height:110px;

}

.connect-card:hover {

    transform:translateY(-4px);

    border-color:#53FC18;

    background:#1c1c24;

}

/* IKONA LEVO */
/* KONTEJNER ZA SVE CONNECT IKONE */
.connect-icon {

    width:70px;
    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#111;

    border:1px solid #2c2c35;

    border-radius:14px;

    overflow:hidden;

}



/* SLIKE UNUTAR KONTEJNERA */
.connect-icon img {

    width:100%;
    height:100%;

    object-fit:cover;

}
.connect-content {
    margin-left: 18px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* NASLOV I TEKST KARTICE */
.connect-card h2 {

    color:white;

    font-size:18px;

    font-weight:800;

    margin-bottom:5px;

}

.connect-card p {

    color:#8c8c9e;

    font-size:13.5px;

    line-height:1.4;

}

main {
padding-top:90px;
}
/* BADGE (npr. Community / Main / LIVE) */
.connect-badge {
    background: #252533;
    color: #b0b0c2;
    border: none;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
}

.connect-badge.live {
    color: #53FC18;
    background: rgba(83, 252, 24, 0.1);
}

/* STRELICA U GORNJEM DESNOM UGLU KARTICE */
.connect-card::after {

    content:"↗";

    position:absolute;

    right:20px;
    top:20px;

    color:#6b6b80;

    font-size:16px;

}

.connect-card:hover::after {

    color:#53FC18;

}



/* RESPONSIVE */

@media (max-width:550px){

    .connect-wrapper {
        padding: 20px 15px 50px;
        margin-top: 0;
    }

    .connect-wrapper::before {
        margin-bottom: 20px;
    }

    .connect-card {
        padding: 18px 15px;
        min-height: 90px;
    }

    .connect-card h2 {
        font-size: 16px;
    }

    .connect-card p {
        font-size: 12.5px;
    }

    .connect-icon {
        width: 55px;
        height: 55px;
        margin-right: 12px;
    }
}
html, body {
    width:100%;

}


img {
    max-width:100%;
}





/* ==========================================
   WATCHTIME PAGE RESPONSIVE FIX
   ========================================== */


/* glavni watchtime container */
.kick-connect-section {
    width:100%;
    padding:10px 15px;
}


/* glavna kartica */
.kick-connect-card {

    width:100%;
    max-width:1400px;
    margin:0 auto;

    background:linear-gradient(135deg,#16241a 0%,#0d150f 60%,#121212 100%);
    border:1px solid #2c4a2c;
    border-radius:20px;

    padding:20px 26px;

    display:grid;

    grid-template-columns:
    minmax(250px,1fr)
    minmax(300px,1fr)
    90px;

    gap:25px;

    align-items:center;

}


/* LEVA STRANA */
.kick-connect-left {

    display:flex;
    align-items:center;
    gap:15px;

    min-width:0;

}


.kick-connect-info {

    min-width:0;

}


.kick-connect-heading {

    font-size:clamp(16px,2vw,20px);

}



/* STATISTIKA */
.kick-stats-group {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:nowrap;

}


.kick-stat {

    min-width:120px;

}



/* CEVKA */

.kick-connect-right {

    width:100%;

    display:flex;

    justify-content:center;

}



/* STEAM URL */
.steam-inline {

    min-width:0;

}


.steam-inline-row {

    width:100%;

}


.steam-inline-input {

    min-width:0;

}




/* ==========================================
   TABLET
   ========================================== */

@media(max-width:1100px){


.kick-connect-card {

    grid-template-columns:1fr 1fr;

}


.kick-connect-right {

    grid-column:1 / -1;

    margin-top:10px;

}


.reward-tube {

    height:160px;

}


}




/* ==========================================
   TELEFON
   ========================================== */

@media (max-width:700px){

    .connect-grid {
        grid-template-columns: 1fr; /* jedna kolona umesto dve fiksne 280px */
    }

}


.kick-connect-card {


    display:flex;

    flex-direction:column;

    width:100%;

    padding:20px 15px;

    gap:25px;

}



/* avatar + connect */

.kick-connect-left {

    width:100%;

    justify-content:center;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.kick-connect-info {

    width:100%;

    align-items:center;

}



/* statistika */

.kick-stats-group {

    width:100%;

    flex-direction:column;

    gap:18px;

}



.kick-stat {

    width:100%;

}



.kick-stat-divider {

    display:none;

}



/* cevka */

.kick-connect-right {

    width:100%;

}


.reward-tube {

    width:35px;

    height:140px;

}


.reward-tube-label {

    font-size:11px;

}


/* steam */

.steam-inline {

    width:100%;

}


.steam-inline-row {

    flex-direction:column;

}


.steam-inline-input {

    width:100%;

}


.steam-inline-save {

    width:100%;

}



}



/* ==========================================
   LEADERBOARD MOBILE FIX
   ========================================== */


.brewing-main-heading {

    max-width:100%;

    overflow-wrap:break-word;

    word-break:break-word;

    text-align:center;

}


/* TABLET */
@media(max-width:900px){

    .brewing-main-heading {

        font-size:clamp(28px, 8vw, 45px);

        letter-spacing:1.5px;

        line-height:1.1;

        padding:0 10px;

    }

}


/* TELEFON */
@media(max-width:550px){

    .hero {

        padding-left:10px;
        padding-right:10px;

    }


    .hero-container {

        width:100%;

    }


    .brewing-wrapper {

        width:100%;

        padding:0 5px;

    }


    .brewing-main-heading {


        font-size:clamp(24px, 9vw, 34px);

        letter-spacing:0.5px;

        line-height:1.15;

        white-space:normal;

        max-width:100%;


    }


}



/* =====================================
   FINAL HEADER SIZE FIX
===================================== */



.header-inner {

    height:auto !important;
    min-height:0;

    display:flex;
    flex-wrap:wrap;

    padding:10px 15px 12px;

    gap:8px;
}


.live-popup {

    position:fixed;

    bottom:30px;
    left:30px;

    display:none;

    align-items:center;

    gap:18px;

    background:#161616;

    border:2px solid #53FC18;

    border-radius:18px;

    padding:18px 26px;

    min-width:320px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
    0 0 35px rgba(83,252,24,0.45);

    animation:liveAppear .35s ease;

}


.live-popup.show {

    display:flex;

}


.live-popup-icon {

    background:#53FC18;

    color:#000;

    font-size:15px;

    font-weight:900;

    padding:10px 14px;

    border-radius:10px;

}


.live-popup-text {

    display:flex;

    flex-direction:column;

}


.live-popup-text strong {

    color:white;

    font-size:18px;

    font-weight:900;

}


.live-popup-text span {

    color:#aaa;

    font-size:14px;

}



@keyframes liveAppear {

from {

    transform:translateY(20px);

    opacity:0;

}

to {

    transform:translateY(0);

    opacity:1;

}

}


/* mobilni */

@media(max-width:600px){

.live-popup {

    left:12px;
    bottom:15px;

    padding:10px 14px;

}

}
/* ==========================================
   HEADER WRAP MOBILE - PRELOM U NOVI RED
========================================== */

@media(max-width:900px){

    .header-inner {

        position:relative;
        height:auto !important;
        min-height:62px;

        display:flex;
        flex-wrap:wrap;

        padding:10px 15px;

        gap:10px;

    }


    .header-left {

        position:static;

        flex:1;

        min-width:max-content;

    }


    .header-center {

        position:static;

        transform:none;

        order:3;

        width:100%;

        display:flex;

        justify-content:center;

    }


    .header-right {

        margin-left:auto;

        min-width:max-content;

    }


    .nav-pill-container {

        flex-wrap:wrap;

        justify-content:center;

    }
}
@keyframes heroPulse {

    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}

@media(max-width:900px){

.header{
    position:fixed;
}

.header-left,
.header-right{
    height:42px;
}

.header-center{
    margin-top:5px;
}

}
@media (min-width: 901px) {
    .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-container {
        width: 100%;
    }
}

/* ==========================================
   WINOVO LEADERBOARD
   ========================================== */

.lb-wrap {
    width: 100%;
    max-width: 1050px;
    margin: 35px auto 0;
    padding: 0 15px;

    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* ==========================================
   TOP 5
   ========================================== */

.lb-top5 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.lb-coming-soon {
    text-align: center;
    color: #53FC18;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 25px 0;
    text-shadow: 0 0 12px rgba(83, 252, 24, 0.3);
}
/* ==========================================
   TOP PLAYER KARTICA
   ========================================== */

.lb-card {
    position: relative;

    min-width: 0;

    background:
        linear-gradient(
            145deg,
            #18241a 0%,
            #121212 55%,
            #101010 100%
        );

    border: 1px solid #2d472d;
    border-radius: 16px;

    padding: 20px 12px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.lb-card:hover {
    transform: translateY(-5px);

    border-color: #53FC18;

    box-shadow:
        0 8px 30px rgba(83,252,24,.18);
}


/* ==========================================
   RANG
   ========================================== */

.lb-rank {
    color: #53FC18;

    font-size: 15px;
    font-weight: 900;

    margin-bottom: 10px;

    letter-spacing: 1px;
}


/* ==========================================
   TOP 3 VEĆI RANG
   ========================================== */

.lb-card.rank-1 {
    border: 2px solid #53FC18;

    background:
        radial-gradient(
            circle at top,
            rgba(83,252,24,.18),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #18241a,
            #101010
        );

    box-shadow:
        0 0 25px rgba(83,252,24,.20);
}


.lb-card.rank-1 .lb-rank {
    font-size: 19px;
}


.lb-card.rank-2 .lb-rank,
.lb-card.rank-3 .lb-rank {
    color: #b7d6b1;
}


/* ==========================================
   AVATAR
   ========================================== */

.lb-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #2c2c2c;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}
.lb-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.lb-card.rank-1 .lb-avatar {
    width: 78px;
    height: 78px;

    border-color: #53FC18;

    box-shadow:
        0 0 18px rgba(83,252,24,.35);
}


.lb-avatar-letter {
    display: flex;

    align-items: center;
    justify-content: center;

    color: #53FC18;

    font-size: 24px;
    font-weight: 900;

    border-color: #53FC18;
}


/* ==========================================
   IME
   ========================================== */

.lb-name {
    width: 100%;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-bottom: 7px;
}


/* ==========================================
   WAGER
   ========================================== */

.lb-wagered {
    color: #92b88b;

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 12px;

    white-space: nowrap;
}


/* ==========================================
   NAGRADA
   ========================================== */

.lb-reward {
    width: 100%;

    padding: 8px 5px;

    border-radius: 8px;

    background: rgba(83,252,24,.09);

    border: 1px solid rgba(83,252,24,.20);

    color: #53FC18;

    font-size: 13px;
    font-weight: 900;

    white-space: nowrap;
}


.lb-no-reward {
    color: #555555;

    background: rgba(255,255,255,.02);

    border-color: #252525;
}


/* ==========================================
   OSTALI KORISNICI
   ========================================== */

.lb-rest {
    width: 100%;

    background: #151515;

    border: 1px solid #292929;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0,0,0,.20);
}


/* NASLOV OSTALIH */

.lb-rest-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 16px 20px;

    background: #1a1a1a;

    border-bottom: 1px solid #292929;
}


.lb-rest-title {
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.lb-rest-subtitle {
    color: #666666;

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================
   REDOVI OSTALIH KORISNIKA
   ========================================== */

.lb-rest .lb-card {
    width: 100%;

    display: grid;

    grid-template-columns:
        55px
        48px
        minmax(0, 1fr)
        150px;

    align-items: center;

    gap: 15px;

    border: none;

    border-radius: 0;

    padding: 12px 20px;

    background: #151515;

    text-align: left;
}


.lb-rest .lb-card:not(:last-child) {
    border-bottom: 1px solid #242424;
}


.lb-rest .lb-card:hover {
    transform: none;

    background: #1b1b1b;

    border-color: transparent;

    box-shadow: none;
}


/* RANG OSTALIH */

.lb-rest .lb-rank {
    margin: 0;

    color: #666666;

    font-size: 14px;

    text-align: center;
}


/* AVATAR OSTALIH */

.lb-rest .lb-avatar {
    width: 42px;
    height: 42px;

    margin: 0;

    border-width: 1px;
}


/* IME OSTALIH */

.lb-rest .lb-name {
    margin: 0;

    font-size: 14px;
}


/* WAGER OSTALIH */

.lb-rest .lb-wagered {
    margin: 0;

    text-align: right;

    font-size: 13px;
}


/* NEMA NAGRADE ZA OSTALE */

.lb-rest .lb-reward {
    display: none;
}


/* ==========================================
   LOADING / ERROR
   ========================================== */

.lb-wrap .loading,
.lb-wrap .error {
    width: 100%;

    text-align: center;

    color: #aaaaaa;

    font-size: 14px;
    font-weight: 700;

    padding: 40px 0;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

    .lb-top5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lb-card.rank-1 {
        grid-column: 1 / -1;

        max-width: 260px;

        justify-self: center;

        width: 100%;
    }

    .lb-rest .lb-card {
        grid-template-columns:
            45px
            44px
            minmax(0, 1fr)
            120px;
    }

}


/* ==========================================
   TELEFON
   ========================================== */

@media (max-width: 600px) {

    .lb-wrap {
        padding: 0 10px;

        margin-top: 25px;

        gap: 20px;
    }


    .lb-top5 {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }


    .lb-card.rank-1 {
        grid-column: 1 / -1;

        max-width: 100%;
    }


    .lb-card {
        padding: 16px 10px 13px;
    }


    .lb-avatar {
        width: 55px;
        height: 55px;
    }


    .lb-card.rank-1 .lb-avatar {
        width: 68px;
        height: 68px;
    }


    .lb-name {
        font-size: 13px;
    }


    .lb-wagered {
        font-size: 12px;
    }


    .lb-reward {
        font-size: 12px;

        padding: 7px 3px;
    }


    /* OSTALI */

    .lb-rest-header {
        padding: 13px 15px;
    }


    .lb-rest-title {
        font-size: 12px;
    }


    .lb-rest-subtitle {
        font-size: 10px;
    }


    .lb-rest .lb-card {
        grid-template-columns:
            35px
            40px
            minmax(0, 1fr)
            85px;

        gap: 8px;

        padding: 10px 12px;
    }


    .lb-rest .lb-avatar {
        width: 38px;
        height: 38px;
    }


    .lb-rest .lb-name {
        font-size: 12px;
    }


    .lb-rest .lb-wagered {
        font-size: 11px;
    }

}


/* ==========================================
   VEOMA MALI TELEFON
   ========================================== */

@media (max-width: 400px) {

    .lb-top5 {
        grid-template-columns: 1fr 1fr;
    }


    .lb-rest .lb-card {
        grid-template-columns:
            28px
            36px
            minmax(0, 1fr)
            70px;

        gap: 6px;

        padding: 9px 8px;
    }


    .lb-rest .lb-avatar {
        width: 34px;
        height: 34px;
    }


    .lb-rest .lb-wagered {
        font-size: 10px;
    }

}
/* ==========================================
   TEST / FIX ZA LEADERBOARD AVATARE
   ========================================== */

.lb-avatar {
    position: relative;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    min-height: 46px;

    border-radius: 50%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1a1a1a;
    border: 2px solid #53FC18;
}

.lb-avatar img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;
    border-radius: 50%;
}
/* ==========================================
   WINOVO BUTTON - LEADERBOARD
   ========================================== */

.btn-winovo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 4px;

    padding: 11px 22px;

    background: #53FC18;
    color: #050505;

    border: 1px solid #53FC18;
    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.8px;
    text-transform: uppercase;

    box-shadow:
        0 0 15px rgba(83,252,24,0.30);

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        background-color 0.2s ease;
}

.btn-winovo span {
    font-size: 15px;
}

.btn-winovo:hover {
    background: #6dff3d;

    transform: translateY(-2px);

    box-shadow:
        0 5px 22px rgba(83,252,24,0.55);
}

@media (max-width: 550px) {

    .btn-winovo {
        width: auto;
        padding: 10px 19px;
        font-size: 12px;
    }

}
/* ==========================================
   WINOVO COUNTDOWN
   ========================================== */

.winovo-countdown {
    width: min(700px, 92%);
    margin: 30px auto 35px;
    padding: 22px 25px;
    text-align: center;

    background: rgba(83, 252, 24, 0.06);
    border: 1px solid rgba(83, 252, 24, 0.35);
    border-radius: 14px;

    box-shadow:
        0 0 25px rgba(83, 252, 24, 0.08),
        inset 0 0 20px rgba(83, 252, 24, 0.03);
}

.winovo-countdown-label {
    display: block;

    color: #53FC18;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;

    margin-bottom: 10px;
    text-transform: uppercase;
}

#winovo-countdown {
    display: block;

    color: #ffffff;
    font-size: clamp(24px, 5vw, 38px);
    font-weight: 900;
    letter-spacing: 2px;

    text-shadow:
        0 0 12px rgba(83, 252, 24, 0.25);
}