/* =====================================================================
   TSUNAMI SURVIVOR — NOVI IZGLED (v2)
   Sve izmjene izgleda su u OVOM fajlu. Stari izgled: obriši red
   <link rel="stylesheet" href="style-v2.css"> u index.html.
   Pravila za iPhone: nad platnom nema backdrop-filter; beskonačne
   animacije mijenjaju samo transform i opacity.
   ===================================================================== */

:root {
    --gold: #FFD700;
    --gold-deep: #b8860b;
    --z0: #00d4ff;
    --z1: #b36bff;
    --z2: #ff9f43;
    --ui-font: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- 1. jedan font svuda ---------- */
.betBtn, .preDefBtn, .autoBtn, .betInput, .autoPayoutInput input,
.tab-btn, .player-row, #playersToggle { font-family: var(--ui-font) !important; }
.betBtn { letter-spacing: 1px; font-weight: 900 !important; }

/* ---------- 1. multiplikator mijenja boju sa rastom ---------- */
#multiplierOverlay { transition: color 0.3s; }
#multiplierOverlay.m1 { color: #ffffff !important; text-shadow: 0 4px 0 rgba(0,0,0,0.35); }
#multiplierOverlay.m2 { color: #5fe3ff !important; text-shadow: 0 0 24px rgba(0,212,255,0.45), 0 4px 0 rgba(0,0,0,0.35); }
#multiplierOverlay.m3 { color: var(--gold) !important; text-shadow: 0 0 28px rgba(255,215,0,0.5), 0 4px 0 rgba(0,0,0,0.35); }
#multiplierOverlay.m4 { color: #ff5a6a !important; text-shadow: 0 0 32px rgba(255,71,87,0.6), 0 4px 0 rgba(0,0,0,0.35); }

/* ---------- 1. lista igrača: ime + tačka zone ---------- */
.zdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.zdot.z0 { background: var(--z0); }
.zdot.z1 { background: var(--z1); }
.zdot.z2 { background: var(--z2); }

/* ---------- 1. auto kontrole: vidi se da su uključene ---------- */
.autoBtn { font-size: 10px !important; font-weight: 900; color: #c9d1d9 !important; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; }
.autoBtn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #484f58; margin-right: 5px; vertical-align: middle; }
.autoBtn.on { background: rgba(46, 213, 115, 0.18) !important; border-color: #2ed573 !important; color: #fff !important; }
.autoBtn.on::before { background: #2ed573; }
.autoPayoutInput.disabled { opacity: 0.35 !important; }

/* ---------- 2. JP metar (zlatna kapsula) — kompjuter; telefon zadržava svoj raspored na dnu platna ---------- */
@media (min-width: 1000px) {
#topInfoWrapper { gap: 10px !important; top: 46px !important; }
    #multiplierOverlay { top: 40% !important; }
    #topInfoWrapper .info-block {
        flex-direction: column !important; align-items: center !important;
        padding: 3px 14px 4px !important; border-radius: 14px !important;
        background: rgba(8, 12, 20, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        position: relative;
    }
    #topInfoWrapper .info-block:first-child { border-color: rgba(255, 215, 0, 0.55) !important; min-width: 150px; }
    #topInfoWrapper .info-block small { font-size: 9px !important; letter-spacing: 2px; color: #8b949e; }
    #potAmount { font-size: 21px !important; color: var(--gold) !important; line-height: 1.05; }
    #activePlayersCenter { font-size: 21px !important; line-height: 1.05; }
    #jpRule { display: block !important; font-size: 8px; letter-spacing: 1px; color: rgba(255, 215, 0, 0.65); font-family: var(--ui-font); }
    /* pulsiranje kad je JP velik: poseban sloj koji mijenja samo prozirnost */
    #topInfoWrapper .info-block:first-child::after {
        content: ""; position: absolute; inset: -3px; border-radius: 18px;
        border: 2px solid rgba(255, 215, 0, 0.8); opacity: 0; pointer-events: none;
    }
}
#topInfoWrapper.jp-hot .info-block:first-child::after { animation: jpPulse 1.4s ease-in-out infinite; }
@keyframes jpPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ---------- 2. preživjeli kao figurice ---------- */
#survivorIcons { display: flex !important; gap: 2px; margin-top: 3px; min-height: 10px; align-items: flex-end; justify-content: center; width: 130px; flex-wrap: wrap; }
.sv { display: inline-block; width: 5px; height: 9px; border-radius: 3px 3px 1px 1px; background: #00d4ff; opacity: 0.9; }
.sv.gone { background: #3a4452; }
.sv-more { font-size: 8px; color: #8b949e; margin-left: 3px; font-family: var(--ui-font); }

/* ---------- 2. napetost pred kraj ---------- */
#vignette {
    display: block !important; position: absolute; inset: 0; pointer-events: none; z-index: 900;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(120, 0, 10, 0.55) 100%);
    opacity: 0; transition: opacity 0.5s;
}
#vignette.on { opacity: 1; animation: vigBeat 0.9s ease-in-out infinite; }
@keyframes vigBeat { 0%, 100% { opacity: 0.65; } 15% { opacity: 1; } 30% { opacity: 0.75; } 45% { opacity: 0.95; } }
#tensionBar {
    display: block !important; position: absolute; left: 50%; bottom: 64px; z-index: 1002; pointer-events: none;
    transform: translate(-50%, -8px); opacity: 0; transition: opacity 0.3s, transform 0.3s;
    padding: 6px 14px; border-radius: 12px; background: rgba(40, 0, 6, 0.85); border: 1px solid rgba(255, 71, 87, 0.6);
    font-family: var(--ui-font); font-size: 12px; font-weight: 900; color: #fff; letter-spacing: 1px; white-space: nowrap;
}
#tensionBar.on { opacity: 1; transform: translate(-50%, 0); }
#tensionBar .lbl { color: #ff6b7a; font-size: 9px; letter-spacing: 2px; margin-right: 8px; }
#tensionBar .nm { margin: 0 4px; }
#tensionBar .nm.me { color: #00d4ff; }
#tensionBar .nm.gone { text-decoration: line-through; opacity: 0.45; }

/* ---------- 2. JP je pao (vide svi) ---------- */
#jpBanner {
    display: block !important; position: absolute; left: 50%; bottom: 18px; z-index: 1003; pointer-events: none;
    transform: translate(-50%, 30px); opacity: 0; transition: opacity 0.35s, transform 0.35s;
    padding: 9px 20px; border-radius: 22px; background: rgba(28, 20, 2, 0.92); border: 2px solid var(--gold);
    font-family: var(--ui-font); font-weight: 900; font-size: 14px; color: #fff; letter-spacing: 1px; white-space: nowrap;
}
#jpBanner.show { opacity: 1; transform: translate(-50%, 0); }
#jpBanner .amt { color: var(--gold); margin-left: 6px; }
#jpBanner.miss { border-color: #8b949e; background: rgba(20, 24, 32, 0.94); font-size: 12px; }
#jpBanner.miss .why { color: #ff9f43; }
#crashText .crash-jp-line { display: none !important; } /* u v2 to radi traka iznad */

/* ---------- 3. čekanje: veliko odbrojavanje ---------- */
#countdownNum { display: none !important; /* brojevi odbrojavanja izbačeni 02.10.2026 */ font-family: var(--ui-font); font-size: 64px; font-weight: 900; color: #fff; line-height: 1; margin-top: -6px; text-shadow: 0 4px 0 rgba(0,0,0,0.4); }
#lastRoundInfo { display: block !important; font-family: var(--ui-font); font-size: 10px; letter-spacing: 2px; color: #8b949e; margin-top: 6px; min-height: 12px; }
#lastRoundInfo b { color: #fff; }
#waitingLogo { width: 150px !important; margin-bottom: 8px !important; }

/* ---------- 4. telefon / iPhone: bez zamućenja nad igrom ---------- */
.personal-win-popup { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 40, 26, 0.94) !important; border: 1px solid rgba(46, 213, 115, 0.6) !important; }
.error-toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(20, 20, 20, 0.92) !important; }
#betsBox { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13, 17, 23, 0.96) !important; }

/* Lista igrača na telefonu: sklopljena iza dugmeta, da talas i dugmad ostanu na ekranu */
@media (max-width: 999px) {
    #playersToggle {
        display: block !important; width: 100%; padding: 10px; border: none; cursor: pointer;
        background: #161b22; color: #c9d1d9; font-size: 11px; font-weight: 900; letter-spacing: 2px;
    }
    #betsBox:not(.open) .stats-bar,
    #betsBox:not(.open) .bets-tabs,
    #betsBox:not(.open) .list-header,
    #betsBox:not(.open) #playersList,
    #betsBox:not(.open) #historyTabContent { display: none !important; }
    #betsBox { height: auto !important; }
    #tensionBar { bottom: auto; top: 36px; font-size: 9px; padding: 4px 10px; }
    #tensionBar .lbl { font-size: 7px; }
    #jpRule, #survivorIcons { display: none !important; }
    #potAmount { color: var(--gold) !important; }
    #crashText > div:first-child { font-size: 22px !important; }
    #countdownNum { font-size: 40px; }
    #jpBanner { font-size: 11px; bottom: 10px; }
}

/* Široki ekran (02.10.2026): kad raspored stisne okvir scene po visini, platno se UKLAPA cijelo
   (prilagođeno visini, centrirano) umjesto da prelije okvir i izgubi dno (more). Samo računar. */
@media (min-width: 1000px) {
  #canvasWrapper { display: flex; align-items: center; justify-content: center; }
  #canvasWrapper > #gameCanvas { width: auto !important; height: 100% !important; max-width: 100%; aspect-ratio: 1024 / 500; flex: 0 0 auto; }
}

/* Multiplikator u jednom redu, uvijek (02.10.2026): na telefonu se „x" lomio u drugi red i natpis ga je prekrivao.
   Smanjenje kad broj ne stane radi fitMultiplier() (uimanager.js) preko --mfit. */
#multiplierOverlay { white-space: nowrap !important; transform: translate(-50%, -50%) scale(var(--mfit, 1)) !important; }
@media (max-width: 999px) {
    #multiplierOverlay { font-size: 56px !important; }
    /* natpis na dnu, između SURVIVOR POT i PLAYERS, u dva reda (gore bi bio ispod trake sa stanjem ili preko multiplikatora) */
    #tensionBar { top: auto !important; bottom: 7px !important; font-size: 9px !important; padding: 3px 8px !important;
        white-space: normal !important; box-sizing: border-box !important; text-align: center !important; line-height: 1.35 !important; }
    #tensionBar .lbl { display: block !important; font-size: 6.5px !important; letter-spacing: 1px !important; margin: 0 0 1px 0 !important; }
}

/* Dok traje slavlje JP-a (02.10.2026): sakriveni natpisi preko scene. Pravilo sa !important — natpis kraha
   na krahu prepisuje svoje inline stilove, pa sakrivanje inline stilom nije bilo pouzdano. */
#canvasWrapper.jp-celebrating #multiplierOverlay,
#canvasWrapper.jp-celebrating #crashText,
#canvasWrapper.jp-celebrating #nextGameOverlay,
#canvasWrapper.jp-celebrating #topInfoWrapper,
#canvasWrapper.jp-celebrating #historyOverlay,
#canvasWrapper.jp-celebrating #tensionBar,
#canvasWrapper.jp-celebrating #jpBanner { visibility: hidden !important; }

/* GOLDEN ROUND (02.10.2026): zlatni okvir scene + oznaka; vidi se i na ekranu čekanja. Bez zraka i linija. */
#goldenBadge { display: none; position: absolute; z-index: 1003; top: 40px; left: 14px; pointer-events: none;
    padding: 5px 12px; border-radius: 12px; font: 900 12px var(--ui-font, Orbitron, sans-serif); letter-spacing: 1.5px;
    color: #2a1700; background: linear-gradient(#ffe38a, #ffb52e); border: 1px solid #fff2b8; box-shadow: 0 0 14px rgba(255, 190, 60, 0.55); }
#canvasWrapper.golden #goldenBadge { display: block; }
#canvasWrapper.golden { border-color: #ffc94a !important; box-shadow: 0 0 0 1px rgba(255, 201, 74, 0.5), 0 0 26px rgba(255, 190, 60, 0.35) !important; }
#canvasWrapper.jp-celebrating #goldenBadge { visibility: hidden !important; }
#jpBanner.gold { border-color: #ffc94a !important; color: #ffe9a8 !important; box-shadow: 0 0 18px rgba(255, 190, 60, 0.45) !important; }
@media (max-width: 999px) {
    #goldenBadge { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 4px 10px; letter-spacing: 1px; }
}
@media (max-width: 999px) { #jpBanner.show ~ #goldenBadge { visibility: hidden !important; } }   /* telefon: isto mjesto na dnu */
/* Golden = dan: multiplikator na svijetlom nebu treba tamni obrub i sjenku da bi se čitao */
#canvasWrapper.golden #multiplierOverlay { -webkit-text-stroke: 3px rgba(0, 32, 64, 0.75); paint-order: stroke fill;
    text-shadow: 0 4px 0 rgba(0, 40, 80, 0.45), 0 0 18px rgba(0, 30, 60, 0.35) !important; }