:root { 
    --bg: #0b0e14; 
    --panel: #161b22; 
    --blue: #00d4ff; 
    --green: #1faa00; 
    --red: #ff4757; 
    --border: #30363d; 
}

body { 
    margin: 0; 
    background: var(--bg); 
    color: #fff; 
    font-family: 'Orbitron', sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; /* Centriranje vertikalno */
    min-height: 100vh;
    padding: 0; 
    overflow-x: hidden; 
}

/* Animacija za zlatni sjaj */
@keyframes goldGlow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); border-color: rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); border-color: rgba(255, 215, 0, 1); }
    100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); border-color: rgba(255, 215, 0, 0.4); }
}

/* Klasa koju ćemo dodati preko JS-a ili je koristiti za isticanje */
.gold-active {
    animation: goldGlow 2s infinite ease-in-out;
    background: rgba(218, 165, 32, 0.15) !important;
}

#gameWrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh; /* Razvlači se preko cijelog ekrana */
    padding: 20px 0;
}

#iframeContainer {
    width: 95%;            /* Umjesto fiksne širine */
    max-width: 1400px;
    margin: 10px auto;
    background: #0b0e14; 
    padding: 10px;         /* Smanjen padding za mobilne */
    border: 2px solid #1c2128; 
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column; /* Na mobilnom ide sve u kolonu */
}

#topInfoWrapper {
    position: absolute !important;
    top: 75px !important;      /* Spušteno sa 50px da formira čist niz ispod Pota */
    left: 50% !important;
    transform: translateX(-50%) !important; 
    display: flex !important;
    gap: 15px !important;
    z-index: 1001 !important;
    pointer-events: none !important;
}

.info-block {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none;
    
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    justify-content: center !important;
    
    min-width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* style.css */
.balance-block {
    display: flex;
    align-items: center; /* Desktop: u istoj liniji */
    padding: 0 15px;
    border-right: 1px solid rgba(255,255,255,0.1);
    margin-right: 10px;
    gap: 8px;
}

#userBalance {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.balance-block small {
    font-size: 8px;
    color: #00d4ff;
    font-weight: 900;
    text-transform: uppercase;
}
.info-block small {
    display: block !important;
    text-align: center !important; 
    width: 100% !important;
    font-size: 10px !important;      /* Povećano sa 8px za bolju čitljivost */
    margin-bottom: 2px !important;
    text-transform: uppercase;       /* Apple-style minimalizam */
    letter-spacing: 1px;
}

.info-block span {
    display: block !important;
    text-align: center !important; 
    width: 100% !important;
    font-size: 20px !important;      /* Povećano sa 16px za blockbuster efekat */
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}/* Specijalni stil za Gold Round u HUD-u */
.info-block.gold-mode {
    background: rgba(184, 134, 11, 0.4) !important; /* Tamno zlatna prozirna */
    border: 1px solid #FFD700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
    animation: goldPulse 2s infinite ease-in-out !important;
}

.info-block.gold-mode small {
    color: #fff !important; /* Bijeli tekst na zlatnoj pozadini za bolji kontrast */
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.info-block.gold-mode span {
    color: #FFD700 !important; /* Zlatni brojevi */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

@keyframes goldPulse {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
}
.error-toast {
    position: absolute !important;
    top: 65% !important; /* Spušteno malo niže da ne siječe tajmer */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: #ff4757 !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 71, 87, 0.4) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    z-index: 1000 !important; /* Iznad Next Game Overlay-a */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 10px rgba(255, 71, 87, 0.2) !important;
    animation: glassPop 2.5s ease-in-out forwards !important;
}

@keyframes glassPop {
    0% { opacity: 0; scale: 0.8; }
    15% { opacity: 1; scale: 1; }
    85% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.9; transform: translate(-50%, -80%); }
}
#bountyCounter small {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: #00d4ff; /* Tirkizna boja teksta */
    letter-spacing: 2px;
    font-weight: 900;
    margin-bottom: 2px;
}

#bountyCounter span {
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}
#mainContainer {
    display: flex;
    flex-direction: column; /* Podrazumijevano kolona za mobilne */
    gap: 15px;
    width: 100%;
    /* Visina više nije fiksna da bi sadržaj mogao da diše na mobilnom */
}

#betsBox {
    width: 270px; /* Malo širi sidebar za bolju čitljivost imena */
    min-width: 270px;
    height: 100%;
    background: rgba(13, 17, 23, 0.6) !important;
    backdrop-filter: blur(15px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

#canvasWrapper { 
    position: relative; 
    width: 100%;
    aspect-ratio: 1024 / 500; /* Ovo čuva proporciju igre */
    border: 1px solid var(--border); 
    border-radius: 12px; 
    overflow: hidden; 
    background: #000; 
}

#gameCanvas {
    width: 100% !important;
    height: auto !important;
}

/* SURVIVOR BROJAČ - Tvoja podešavanja */
#bountyCounter {
    position: absolute;
    top: 20px; /* Spušteno da ima lufta od history trake */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    color: var(--blue);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
    z-index: 101;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 25px;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    line-height: 1.1;
}

#bountyCounter small {
    display: block;
    font-size: 11px; /* Povećano sa 9px */
    text-transform: uppercase;
    color: #00d4ff;
    letter-spacing: 2px;
    font-weight: 900;
    margin-bottom: 2px;
}

#bountyCounter span {
    display: block;
    font-size: 30px; /* Povećano sa 24px */
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}

#multiplierOverlay { 
    position: absolute; 
    top: 35%; /* Malo spušteno jer je font veći */
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 110px; /* MASIVNA SLOVA */
    color: #ffffff;  /* ČISTA BIJELA */
    pointer-events: none; 
    z-index: 10; 
    font-weight: 900; 
    transition: transform 0.05s linear;
    /* Jača sjenka da se bijela slova bolje vide na svijetloj pozadini */
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3);
transition: color 0.3s ease, text-shadow 0.3s ease; /* Glatki prelaz na zlatnu boju */

}



/* ISTORIJA - Maksimalno zbijeno */
#historyOverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 35px; 
    background: rgba(0, 0, 0, 0.95); /* Skoro skroz tamno */
    /* GLAVNI FIX: Stavljamo ogroman z-index na samu traku */
    z-index: 9999 !important; 
    display: flex; 
    align-items: center; 
    padding: 0 5px; 
    overflow: visible; /* OVO JE KLJUČNO: Dozvoljava drop-downu da izađe van okvira trake */
}

#balanceContainer {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 10px;
    white-space: nowrap;
}

#userBalance {
    font-size: 18px !important;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Povećanje natpisa "BALANCE" */
#balanceContainer small {
    font-size: 10px !important; /* Povećano sa tvojih inline 8px */
    letter-spacing: 2px;
    color: var(--blue) !important;
}

#resultsStrip {
    display: flex !important;
    flex-direction: row !important; /* Standardni red */
    gap: 6px !important;
    flex: 1 !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Drži ih uz balans */
    transform: translateZ(0); /* Pali GPU ubrzanje za ovaj element */
    backface-visibility: hidden;
    will-change: transform;
} 
#historyDropdownBtn { background: none; border: none; color: #8b949e; cursor: pointer; font-size: 14px; }

/* Stil za padajući panel */
#historyDropdown {
    position: absolute;
    top: 35px; /* Odmah ispod history trake */
    left: 0;
    right: 0;
    background: rgba(11, 14, 20, 0.98) !important; /* Skroz tamno i neprozirno */
    display: none; /* Inicijalno sakriveno */
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    border-bottom: 2px solid var(--blue);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    z-index: 100000 !important; /* Mora biti ispred kanvasa */
    max-height: 250px;
    overflow-y: auto;
}

#historyDropdown.active {
    display: flex !important; /* Pali se preko JS-a */
}

/* Stil za kružiće unutar dropdowna */
#historyDropdown .hist-val {
    min-width: 55px;
    height: 28px;
    font-size: 12px;
}

.c-white { color: #ffffff; }
.c-orange { color: #ffa500; }
.c-purple { color: #a020f0; }
.c-red { color: #ff4757; }

/* BET ZONE I OSTALO */
#betZonesContainer { display: flex; gap: 10px; margin-top: 20px; }

.betZone { 
    display: flex; 
    width: 330px; 
    background: var(--panel); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 12px; 
    gap: 8px; 
}

.betLeft { flex: 2; display: flex; flex-direction: column; gap: 6px; }

.betControl { 
    display: flex; 
    background: #0d1117; 
    border-radius: 4px; 
    border: 1px solid var(--border); 
}

.betControl button { background: none; border: none; color: #fff; padding: 5px 10px; cursor: pointer; }

.betInput { 
    background: none; 
    border: none; 
    color: #fff; 
    text-align: center; 
    width: 100%; 
    font-family: 'Orbitron'; 
    font-size: 14px; /* Vraćeno na original */
}

.predefinedValues { display: flex; gap: 4px; }

.preDefBtn { flex: 1; background: #21262d; border: 1px solid var(--border); color: #fff; font-size: 10px; padding: 5px; cursor: pointer; }

.autoControls { display: flex; gap: 4px; }

.autoBtn { flex: 1; background: #21262d; border: 1px solid var(--border); color: #8b949e; font-size: 9px; padding: 6px; cursor: pointer; }

.betRight { flex: 1; display: flex; }

.betBtn { 
    width: 100%; 
    border: none; 
    border-radius: 8px; 
    color: #fff; 
    font-weight: bold; 
    cursor: pointer; 
    font-family: 'Orbitron'; 
    font-size: 14px; 
    text-transform: uppercase; 
    transition: background 0.2s; 
}

/* Iznos u dugmetu (Cashout) - bez dodatnih razmaka koji šire dugme */
.betBtn br + span {
    font-size: 14px !important;
    display: block;
}

.autoPayoutInput { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #0d1117; 
    border: 1px solid var(--blue); 
    border-radius: 4px; 
    margin-top: 4px; 
}

.autoPayoutInput input { width: 40px; border: none; background: none; color: #fff; text-align: center; font-size: 12px; font-family: 'Orbitron'; }

.autoPayoutInput button { border: none; background: none; color: var(--blue); font-weight: bold; cursor: pointer; padding: 2px 8px; }

.autoPayoutInput.disabled { opacity: 0.2; pointer-events: none; border-color: var(--border); }

#nextGameOverlay { 
    display: none; 
    position: absolute !important; 
    inset: 0 !important; 
    z-index: 50 !important; 
    background: rgba(0,0,0,0.95) !important;
    align-items: center;
    justify-content: center;
    pointer-events: none !important; 
}

#nextGameLoader { width: 200px; height: 4px; background: #333; margin: 10px 0; }

#nextGameLoaderProgress {
    height: 100%;
    width: 0%;
    background: var(--blue);
    box-shadow: 0 0 15px var(--blue);
    /* Transition sa 0.1s je bolji za sinhronizaciju sa JS tick-om */
    transition: width 0.1s linear !important; 
}

.pot-grow {
    transform: translateX(-50%) scale(1.1);
    color: #fff;
    text-shadow: 0 0 20px #00d4ff;
}



/* Osiguraj da desni stub drži elemente uspravno */
#gameRegion {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px !important;
    height: 100%;
}

/* Gornji dio panela - stakleni efekat i plava boja */
.stats-bar { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px; 
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.stat-item small { 
    display: block; 
    font-size: 8px; 
    color: #00d4ff; 
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 900;
}

.stat-item span { 
    font-size: 18px; 
    font-weight: 900; 
    color: #fff;
    font-family: 'Orbitron';
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}

/* LISTA IGRAČA */
#playersList {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 400px; /* Prilagodi visinu */
}

/* MODERNI REDOVI - Minimalizam */
.player-row {
    display: flex;
    align-items: center;
    height: 32px; /* FIKSNA VISINA: Sprečava debljanje reda */
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Orbitron', sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap; /* SPREČAVA DUPLIRANJE REDOVA zbog dugih imena */
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Smanjujemo i veličinu avatara/kruga ako ga koristiš */
.player-avatar {
    width: 18px !important;
    height: 18px !important;
}

.player-row:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.02);
}
.player-row:has(span:contains("USER")) {
    border-left: 3px solid #00d4ff !important;
    background: rgba(0, 212, 255, 0.1) !important;
    box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1);
}

/* STANJA: Boje za Cashout i Crash */
.player-row.crashed {
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.15) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border-left: 3px solid #ff4757 !important;
    opacity: 0.8;
}

.player-row.crashed span {
    color: #ff4757 !important;
}

.player-row[style*="border-left: 3px solid #00d4ff"] {
    background: rgba(0, 212, 255, 0.15) !important;
    box-shadow: inset 0 0 15px rgba(0, 212, 255, 0.1);
}

/* WIN ZNAČKA */
.win-badge {
    background: var(--green);
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 10px;
    box-shadow: 0 0 15px rgba(31, 170, 0, 0.5);
}
/* Sređivanje skrolbara da ne bude ružan */
#playersList::-webkit-scrollbar { width: 3px; }
#playersList::-webkit-scrollbar-track { background: transparent; }
#playersList::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.3); border-radius: 10px; }




/* --- MODERNIZACIJA TABOVA (Dugmad za opklade i istoriju) --- */

/* Ovaj dio pravi prozirni okvir oko dugmadi */
.bets-tabs {
    display: flex;
    gap: 5px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
}

/* Stil za oba dugmeta */
.tab-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: #8b949e;
    padding: 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s;
}

.tab-btn.active {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Efekat kad mišem prođeš iznad dugmeta */
.tab-btn:hover:not(.active) {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}
#historyDropdownBtn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff; /* Tirkizna boja kao množitelj */
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.3s ease;
    margin-left: 8px;
}

#historyDropdownBtn:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
} /* OVDJE JE FALILA ZAGRADA */

/* Specijalni efekt za tvoje oklade */
.player-row[style*="border-left: 2px solid #00d4ff"] {
    background: rgba(0, 212, 255, 0.15) !important;
    box-shadow: inset 0 0 15px rgba(0, 212, 255, 0.2);
    border-left: 4px solid #00d4ff !important;
}

/* Efekat kada se dostigne limit u polju za unos */
.betInput:focus:invalid {
    color: var(--red);
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.4);
}

/* --- MEDIA QUERY ZA DESKTOP (Kompjuter) --- */
@media (min-width: 1000px) {
    #iframeContainer {
        padding: 30px;
    }
    #mainContainer {
        flex-direction: row; /* Na kompjuteru vrati tabelu desno */
        height: 710px;
    }
    #betsBox {
        width: 270px;
        min-width: 270px;
    }
    #betZonesContainer {
        flex-direction: row; /* Oklade u redu na desktopu */
    }
}

.player-row.escaped { 
    background: linear-gradient(90deg, rgba(31, 170, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border-left: 3px solid #2ed573 !important;
    opacity: 1 !important;
}
.player-row.escaped span {
    color: #2ed573 !important;
}



/* Stil za kvadratni logo 450x450 */
#waitingLogo {
    width: 200px !important;  /* Desktop veličina */
    height: auto !important;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.6));
    animation: logoPulse 3s infinite ease-in-out;
}

/* Animacija da logo lagano "diše" */
@keyframes logoPulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Kontejner linije */
#nextGameLoader {
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 15px auto;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.3);
}


.c-blue { color: var(--blue) !important; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); }
.c-white { color: #ffffff !important; }



.hist-val {
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    white-space: nowrap !important;
}
#multiplierOverlay, #nextGameOverlay, #topInfoWrapper {
    pointer-events: none !important;
}
/* Osiguravamo da bet zone uvek budu iznad svega ostalog za klikove */
#betZonesContainer {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}





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

@keyframes moneyGrow {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.betZone { position: relative !important; }
.personal-win-popup {
    position: absolute;
    top: -70px; 
    left: 50%;
    transform: translateX(-50%);
    
    /* STAKLENI IZGLED BEZ BLURA NA KRAJU */
    background: rgba(46, 213, 115, 0.15) !important; 
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    color: #fff;
    padding: 10px 20px;
    border-radius: 14px;
    z-index: 99999; 
    min-width: 140px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    
    /* ANIMACIJA KOJA SAMO BLEDI */
    animation: cleanFadeUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.personal-win-popup .win-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2ed573;
    margin-bottom: 2px;
    font-weight: 900;
}

.personal-win-popup .win-amt {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

/* ANIMACIJA: Samo kretanje i postepeni nestanak */
@keyframes cleanFadeUp {
    0% { 
        opacity: 0; 
        transform: translate(-50%, 15px) scale(0.9);
    }
    15% { 
        opacity: 1; 
        transform: translate(-50%, 0px) scale(1);
    }
    70% { 
        opacity: 1; 
        transform: translate(-50%, -15px);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -35px);
    }
}

/* --- EVOLUTION GLASSMORPHISM 2.0 MODAL --- */
#verifyModal {
    display: none;
    position: fixed !important;
    z-index: 2147483647 !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 5, 15, 0.7); /* Ultra tamna prozirna baza */
    backdrop-filter: blur(15px) saturate(180%); /* Jači blur i zasićenje boja pozadine */
    justify-content: center;
    align-items: center;
    display: none; /* JS menja u flex */
}

.modal-content {
    position: relative;
    background: rgba(20, 25, 35, 0.85); /* Staklena površina */
    padding: 40px;
    border-radius: 24px;
    width: 95%;
    max-width: 550px;
    color: #fff;
    text-align: center;
    
    /* Neonska ivica koja pulsira */
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 212, 255, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    
    font-family: 'Orbitron', sans-serif;
}

/* Naslov sa gradijentom */
.modal-content h2 {
    background: linear-gradient(90deg, #00d4ff, #00edff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    letter-spacing: 4px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Mono-box kao 'Cyberpunk' terminal */
.mono-box {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important; /* Tirkizna slova za 'hakerski' izgled */
    font-family: 'Courier New', monospace;
    padding: 15px;
    border-radius: 12px;
    font-size: 11px;
    margin: 10px 0 20px 0;
    position: relative;
    overflow: hidden;
}

/* Dodajemo 'skenirajuću liniju' efekt preko boxova */
.mono-box::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.verification-item label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
}

/* X Dugme kao lebdeći krug */
.close-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background: #ff4757;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
    transition: 0.3s;
}

.close-modal:hover { transform: rotate(90deg) scale(1.1); }
@media screen and (max-width: 768px) {
    .close-modal {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: #ff4757; /* Koristimo tvoju varijablu --red */
        border-radius: 50%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: white;
        box-shadow: 0 0 15px rgba(255, 71, 87, 0.5);
        z-index: 100001;
        -webkit-tap-highlight-color: transparent;
    }

    .modal-content {
        padding-top: 60px !important; /* Dajemo prostora za X dugme */
        width: 95% !important;
        max-height: 90vh; /* Da ne iscuri van ekrana na malim mobitelima */
        overflow-y: auto;
    }
}

/* --- KRAJ PROVABLY FAIR STILOVA --- */
@media (max-width: 999px) {
    #iframeContainer {
        width: 96vw !important;
        margin: 10px auto !important;
        padding: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        border: 2px solid #1c2128 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;
    }

    #mainContainer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 5px !important;
    }
.balance-block {
        flex-direction: row !important; /* Mobilni: jedno ispod drugog */
        align-items: flex-start !important; /* Poravnanje lijevo */
        justify-content: center !important;
        padding: 0 10px !important;
        gap: 0px !important; /* Maksimalno zbijeno */
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }

    #userBalance {
        font-size: 15px !important; /* Malo manji broj za mobitel */
    }

    .balance-block small {
        font-size: 1px !important; /* Minijaturni natpis ispod broja */
        opacity: 0.6;
        margin-top: 1px;
display: none !important;
    }

    #canvasWrapper {
        width: 100% !important;
        aspect-ratio: 1024 / 630 !important; 
        background: #001a33 !important; /* Duboko more */
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
    }

    canvas {
        width: 100% !important;
        height: auto !important;
        display: block;
touch-action: pan-y !important;
    }

    /* POZICIONIRANJE HUD-A (Pot & Players) NA DNO */
    #topInfoWrapper {
        width: 92% !important;
        top: auto !important;
        bottom: 5px !important; /* Maksimalno spušteno na dno */
        display: flex !important;
        justify-content: space-between !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1002 !important;
        pointer-events: none !important;
    }

    .info-block {
        display: flex !important;
        flex-direction: column-reverse !important; 
        align-items: flex-start !important;
    }

    .info-block:last-child {
        align-items: flex-end !important;
    }

    .info-block span {
        font-size: 19px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }

    .info-block small {
        font-size: 8px !important;
        color: var(--blue) !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
    }

    /* MULTIPLIKATOR: Sredina */
    #multiplierOverlay {
        font-size: 65px !important;
        top: 42% !important;
    }

    /* TSUNAMI CRASHED: SPUŠTENO ISPOD MULTIPLIKATORA */
   

    #betZonesContainer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 10px 15px 10px !important;
        gap: 10px !important;
    }

    .betZone {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .betBtn {
        width: 100% !important;
        flex-grow: 1 !important;
        min-height: 80px !important;
    }

    #betsBox {
        width: 100% !important;
        height: 250px !important;
        order: 3 !important;
    }
#waitingLogo {
        width: 80px !important;    /* Smanjeno sa originalnih 150px */
        height: 80px !important;   /* Održava kvadratni oblik */
        margin-bottom: 10px !important; /* Smanjen razmak ispod loga */
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); /* Nešto suptilniji sjaj */
    }

    /* Opciono: Ako želiš da i tajmer bude bliže logu jer je logo manji */
    #nextGameOverlay {
        gap: 5px !important;
    }
:fullscreen, :-webkit-full-screen {
    overflow-y: auto !important;
    height: auto !important;
    background: var(--bg) !important;
}

/* 2. Forsiramo iframeContainer da postane skrolabilna površina */
#iframeContainer:fullscreen,
#iframeContainer:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow-y: auto !important; /* Omogućava vertikalni skrol */
    overflow-x: hidden !important;
    display: block !important; /* Block je bolji za skrol od flex-a */
    -webkit-overflow-scrolling: touch !important; /* Smooth scroll za iPhone */
}

/* 3. MainContainer mora biti duži od ekrana da bi skrol proradio */
#iframeContainer:fullscreen #mainContainer,
#iframeContainer:-webkit-full-screen #mainContainer {
    min-height: 110vh !important; /* Forsira postojanje sadržaja ispod ivice ekrana */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 80px !important; /* Prostor za prst na dnu */
}
/* Fix za iPhone (iOS Safari) */
#iframeContainer:-webkit-full-screen {
    width: 100%;
    height: 100%;
}
} 

/* KRAJ MEDIA QUERY-JA */
/* style.css */

/* Specijalni fiks za mobilni fullscreen */
#iframeContainer:fullscreen #verifyModal,
#iframeContainer:-webkit-full-screen #verifyModal {
    display: none; /* JS menja u flex */
    position: absolute !important; /* Promena sa fixed na absolute */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important; /* Maksimalni prioritet */
    background: rgba(11, 14, 20, 1) !important; /* Na mobilnom bolje skroz tamno */
}

/* Osiguraj da se modal-content vidi na malim ekranima */
#iframeContainer:fullscreen .modal-content {
    margin: auto !important;
    max-width: 90% !important;
    max-height: 85% !important;
    overflow-y: auto !important;
}
/* 1. Osiguraj da kanvas wrapper ne guši sadržaj */
#canvasWrapper {
    z-index: 1; /* Dajemo mu bazni nivo */
}



/* 3. FIX ZA Z-INDEX KANVASA */
/* Ako Big Win panel crtaš na kanvasu, ništa ne smije imati 
   veći z-index u tom centralnom dijelu ekrana */
#gameCanvas {
    position: relative;
    z-index: 5; /* Podignuto iznad osnovnog wrappera */
}

/* Forsiramo kanvas da bude vidljiv */
#gameCanvas {
    position: relative !important;
    z-index: 1 !important;
}


/* style_10.css - Dodaj na dno fajla */
#crashText {
    position: absolute !important;
    left: 50% !important;
    top: 20% !important; /* Centrirano u visini multiplikatora */
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important; /* Iznad kanvasa i multiplikatora */
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 50px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3) !important;
    display: none !important;
}


/* Fix za mobilni prikaz da ne prekrije HUD na dnu */
@media (max-width: 999px) {
    #crashText {
        font-size: 20px !important;
        top: 20% !important;
    }
}


#bigWinPanel {
    position: fixed !important; /* Čupa element iz normalnog toka i eliminiše kvarenje margina */
    inset: 0 !important; /* Širi panel preko celog ekrana (0px sa svih strana) */
    background: rgba(7, 10, 15, 0.95) !important; /* Duboki mrak za maksimalan fokus na dobitak */
    display: none; /* Sakriven dok ga JS ne upali */
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important; /* Maksimalni mogući 32-bitni z-index u browseru. Iznad svega! */
    backdrop-filter: blur(20px) saturate(180%) !important; /* Vrhunski stakleni blockbuster efekat */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    pointer-events: auto !important; /* Blokira klikove na dugmad ispod dok traje slavlje */
}

/* Kada je klasa aktivna, panel puca na celom ekranu */
.big-win-active #bigWinPanel {
    display: flex !important;
}

/* Kontejner sadržaja u centru */
.big-win-content {
    text-align: center !important;
    width: 90% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    animation: blockbusterZoom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

#bigWinTitle {
    font-family: 'Orbitron', sans-serif !important;
    color: #FFD700 !important; /* Zlatna boja */
    font-size: clamp(22px, 4vw, 36px) !important; /* Responzivno za mobilne i desktop */
    letter-spacing: 8px !important;
    margin: 0 0 15px 0 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6) !important;
    animation: goldPulseText 2s infinite alternate ease-in-out !important;
}

#bigWinAmount {
    font-family: 'Orbitron', sans-serif !important;
    color: #ffffff !important;
    font-size: clamp(55px, 10vw, 95px) !important; /* Masivne blockbuster cifre */
    font-weight: 900 !important;
    line-height: 1 !important;
    display: block !important;
    margin: 20px 0 !important;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 15px rgba(0, 212, 255, 0.3) !important;
}

.big-win-footer {
    font-family: 'Orbitron', sans-serif !important;
    color: #00d4ff !important; /* Tirkizna */
    letter-spacing: 12px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    opacity: 0.9 !important;
}

/* --- HOLLYWOOD ANIMACIJE --- */
@keyframes blockbusterZoom {
    0% { transform: scale(0.7); opacity: 0; filter: blur(10px); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes goldPulseText {
    from { text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
    to { text-shadow: 0 0 45px rgba(255, 215, 0, 0.9), 0 0 10px #fff; }
}

/* Sakrivanje ostalih HUD slojeva na mobilnom tokom panela da se izbegne flicker */
.big-win-active #multiplierOverlay,
.big-win-active #topInfoWrapper,
.big-win-active #crashText {
    display: none !important;
    opacity: 0 !important;
}

/* --- HUD POZICIONIRANJE (ZA OBA) --- */
#leftHUD, #rightHUD {
    position: absolute !important;
    top: 40px !important;
    z-index: 999999 !important;
    display: flex !important;
    gap: 10px;
}

#leftHUD { left: 20px !important; }
#rightHUD { right: 20px !important; }

/* OSNOVNI STIL ZA SVA HUD DUGMAD */
.hud-btn {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--blue) !important;
    color: var(--blue) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.hud-btn:hover {
    background: rgba(0, 212, 255, 0.2) !important;
}

/* AUDIO PODMENI */
.mute-group { position: relative; }
/* 1. Sakrij kontejner menija dok se ne pređe mišem */
.mute-submenu {
    display: none !important; /* OVO JE KLJUČNO: Ovim će nestati sa ekrana */
    position: absolute !important;
    top: 40px !important;
    right: 0 !important;
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    padding: 5px !important;
    border-radius: 6px !important;
    z-index: 999999 !important;
}

/* 2. Pokaži meni samo kad je kursor iznad zvučnika */
.mute-group:hover .mute-submenu {
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Popravi dugme zvučnika (da ne bude "kvadrat") */
#muteMainBtn {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #00d4ff !important;
    color: #00d4ff !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer;
    border-radius: 4px;
}