/* ============================================================
   Bingo49 — klasicni panel (preslikan sa develop grane)
   Bar sa sekcijama + Klađenje / Moji Tiketi / Statistike
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overscroll-behavior: none; }
body {
	background: #0d0406;
	color: #e8e0d8;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	overflow: hidden;
}
button { font-family: inherit; }

/* ---------- MAKS 3:2 ŠIRINA ----------
   Maksimalna širina aplikacije ograničena je na 3:2 omjer (širina : visina
   = 3 : 2). Ako je ekran/prozor ŠIRI od 3:2, aplikacija se ograniči na tu
   širinu i centrira (trake sa strane) — igra i sekcije ispod uvijek ostanu
   vidljive. Sve širine MANJE od te maksimalne ponašaju se kao do sada
   (puna širina; max-width se ne aktivira). */
/* ---------- iOS SAFE AREA ----------
   Na iPhone-u igra poštuje sigurne zone (notch / prednja kamera + home
   indicator / browser toolbar): 100dvh prati trenutno vidljivi viewport
   (skuplja se kad se Safari toolbar pojavi/sakrije), a padding preko
   env(safe-area-inset-top/bottom) postavlja sadržaj TAČNO ispod kamere
   gore i TAČNO iznad browser dijela dole. Na desktopu/Androidu env() je 0
   pa nema uticaja. */
#app {
	height: 100vh; /* fallback za starije browsere */
	height: 100dvh; /* iOS: dinamički viewport — prati browser toolbar */
	max-width: calc(100vh * 3 / 2);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Gornji deo: canvas igra (16:9) ----------
   Area je tačno 16:9 od širine (cap na 50% visine ekrana), pa dno
   izvlačenja uvek dodiruje vrh bara sa sekcijama — nema crnog razmaka. */
#gameArea {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 50vh;
	min-height: 0;
	position: relative;
	background: #000;
	overflow: hidden;
}

/* Kontrolisani zoom CIJELE aplikacije: touch-action BEZ pinch-zoom keyworda
   (pan-y dozvoljava native vertikalni scroll sekcija, a pinch prelazi u JS u
   panel.js). Native pinch-zoom je time isključen svuda → canvas igre se ne
   re-rasterizuje i ne ruši Chrome renderer. */
html, body, #app {
	touch-action: pan-y;
}
.tab-pane, .bk-scroll, .tab-inner, .panel-content {
	touch-action: pan-y;
}
/* Dok je aplikacija zumirana (body.app-zoomed) native scroll/pinch se
   prebacuje na JS kontrolu (pan) → bez dvostrukog ponašanja i treperenja. */
body.app-zoomed #app,
body.app-zoomed .tab-pane,
body.app-zoomed .bk-scroll,
body.app-zoomed .tab-inner,
body.app-zoomed .panel-content {
	touch-action: none;
}

/* ---------- Unified section bar (edge-to-edge) ---------- */
.app-tabs {
	flex-shrink: 0;
	display: flex;
	width: 100%;
	background: #E3E5E7;
	position: relative;
	z-index: 15;
	border-top: 1px solid #000;
}
.app-tabs::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.5px;
	background: rgba(128,128,128,0.5);
	pointer-events: none;
}
.app-tabs .tab-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	/* donji padding = gornji + 2px (kompenzacija za 2px gornji border) → tekst centriran */
	padding: 9px 4px 11px;
	color: #555555;
	font-weight: 700;
	cursor: pointer;
	border-top: 2px solid transparent;
	white-space: nowrap;
	user-select: none;
	background: #E3E5E7;
	border-left: none; border-right: none; border-bottom: none;
}
.app-tabs .tab-btn .tab-ic { width: 22px; height: 22px; flex-shrink: 0; display: none; }
.app-tabs .tab-btn span { font-size: 14px; letter-spacing: 0.3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.app-tabs .tab-btn.active { color: #fff; border-top-color: #000; background: #000; font-weight: 700; }
@media (max-width: 520px) {
	.app-tabs .tab-btn { gap: 2px; padding: 7px 2px 9px; }
	.app-tabs .tab-btn .tab-ic { width: 18px; height: 18px; display: none; }
	.app-tabs .tab-btn span { font-size: 12px; letter-spacing: 0; }
}

/* ---------- Sekcije ---------- */
.panel-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tab-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; background: linear-gradient(to bottom, #1a0e12 0%, #581005 100%); scrollbar-width: thin; scrollbar-color: #555555 rgba(0,0,0,0.06); }
.tab-pane.active { display: flex; flex-direction: column; }
.tab-pane::-webkit-scrollbar { width: 6px; }
.tab-pane::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 3px; }
.tab-pane::-webkit-scrollbar-thumb { background: #555555; border-radius: 3px; }
.tab-pane::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

.tab-inner { flex: 1; min-height: 0; padding: 10px 12px 14px; }

/* ---------- KLAĐENJE (sivkasta pozadina; tamni burgundy dropdowni) ---------- */
#tab-kladjenje { background: #FFFFFF; color: #3B0A0E; padding: 0; overflow: hidden; }
/* Skrolujuća oblast — Dodaj/Uplati su fiksni na dnu, van skrola */
.bk-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: #555555 rgba(0,0,0,0.06);
}
.bk-scroll::-webkit-scrollbar { width: 6px; }
.bk-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 3px; }
.bk-scroll::-webkit-scrollbar-thumb { background: #555555; border-radius: 3px; }
.bk-scroll::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Odabrani brojevi */
.bk-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 3px; }
.bk-title { font-size: 14px; font-weight: 500; color: #3B0A0E; }
.bk-tools { display: flex; gap: 6px; }
.bk-tool { width: 28px; height: 28px; border: 1px solid #c4c7cc; border-radius: 6px; background: #fff; color: #5a5f66; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bk-tool:hover { background: #f0f1f3; }
/* Dugme "preko cijelog ekrana" (Klađenje) — prikazano samo na mobile (sakriveno na desktopu) */
#app.desktop-layout .bk-tool-full { display: none; }
/* Ikona fullscreen: kosa dvosmjerna strelica — neselektovano tamno siva (ističe se od okvira), aktivno zelena kao okvir */
.bk-tool-full { color: #5a5f66; }
.bk-tool-full.active { border-color: #2e9e4f; background: #ffffff; color: #2e9e4f; }
/* U selektovanom (zelenom) stanju strelica je "u ogledalu" (horizontalni flip) */
.bk-tool-full.active .bk-full-ic { transform: scaleX(-1); }
.bk-full-ic { display: block; width: 20px; height: 20px; }
/* Fullscreen Klađenje: sakrij igru i traku sekcija → sekcija zauzima ceo ekran */
#app.bet-fullscreen #gameArea { display: none; }
#app.bet-fullscreen #appTabs { display: none; }

/* Odabrani brojevi — 10 polja UVEK u jednom redu, skaliraju se na osnovu
   širine ekrana (flex rasteže/skuplja), nema scroll-a — sve je uvek vidljivo. */
/* Odabrani brojevi — fiksan razmak od zaglavlja (↶/✕ dugmad) iznad, u svim
   dimenzijama, da se odabrane loptice nikada ne preklapaju sa dugmadima. */
/* Deca .bk-scroll nikada ne smeju da se stisnu (flex-shrink:0) — kada je visina
   panela tijesna (visina ≈ širina), sadržaj zadrži punu prirodnu visinu, a
   .bk-scroll se skroluje. Bez ovoga .bk-slots bi se sveo na min-height i odsjekao
   odabrane loptice. */
.bk-scroll > * { flex-shrink: 0; }
.bk-slots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(2px, 1.2vw, 6px); margin-top: 8px; padding: 6px 14px 12px; min-height: 44px; }
.bk-slot { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #c4c7cc; background: #f2f3f5; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; overflow: hidden; }
.bk-slot.filled { border: 2px solid transparent; box-shadow: none; }
.bk-slot.filled::before { display: none; }
.bk-slot .slot-num { position: relative; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); font-size: 15px; line-height: 1; }
@media (max-width: 520px) {
	.bk-slots { padding-left: 10px; padding-right: 10px; }
	.bk-slot .slot-num { font-size: 12px; }
}

/* Kontrole — fiksan razmak od prostora za odabrane loptice (iznad), u svim
   dimenzijama, da se dugmad nikada ne preklapaju sa odabranim lopticama. */
.bk-controls { display: flex; gap: 10px; margin-top: 14px; padding: 0 14px 12px; }
.bk-dropdown { flex: 1; min-width: 0; height: 38px; border: none; border-radius: 6px; background: #3B0A0E; color: #E3E5E7; font-size: 13px; font-weight: 700; padding: 0 10px; padding-right: 30px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23E3E5E7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; }

/* Ulog / Slučajni odabir — custom dropdown (bar + panel).
   Bar je iste tamno sive boje kao popup panel (#2b2f36) koji se otvara. */
.bk-stake-drop { flex: 1; min-width: 0; position: relative; }
.bk-stake-bar {
	width: 100%; height: 38px; border: none; border-radius: 6px;
	background: #2b2f36; color: #E3E5E7; font-size: 13px; font-weight: 700;
	padding: 0 10px; display: flex; align-items: center; justify-content: space-between;
	cursor: pointer;
}
.bk-caret { font-size: 10px; opacity: .85; }
.bk-stake-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: auto;
	width: 230px;
	z-index: 30;
	padding: 10px;
	border-radius: 8px;
	background: #2b2f36;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.bk-stake-drop.open .bk-stake-panel { display: block; }
.bk-amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk-amt {
	height: 36px; border: none; border-radius: 7px; background: #3a3f47; color: #ffffff;
	font-size: 13px; font-weight: 700; cursor: pointer;
}
.bk-amt:hover { background: #454b54; }
.bk-amt.active { background: #2e9e4f; color: #fff; }
.bk-max-stake { margin-top: 8px; color: #8f99a3; font-size: 11px; }
.bk-max-stake-val { color: #ffffff; font-weight: 700; }
.bk-iznos-row { display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; gap: 4px; }
.bk-iznos-lbl { color: #8f99a3; font-size: 11px; font-weight: 700; }
/* Bijelo polje za unos (puna širina) + vertikalne strelice desno */
.bk-iznos-ctl { flex: 1; min-width: 0; display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; background: #fff; overflow: hidden; height: 34px; }
.bk-iznos-field { flex: 1; min-width: 0; width: 70px; text-align: center; background: #fff; border: none; color: #1a1d22; font-size: 15px; font-weight: 900; outline: none; }
.bk-iznos-spin { display: flex; flex-direction: column; border-left: 1px solid rgba(0,0,0,0.12); }
.bk-iznos-step { width: 26px; height: 17px; box-sizing: border-box; border: none; background: #eef0f3; color: #5a6572; font-size: 9px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.bk-iznos-step:hover { background: #dde1e6; }
.bk-iznos-step.up { border-bottom: 1px solid rgba(0,0,0,0.12); }
.bk-confirm {
	width: 100%; height: 40px; margin-top: 10px; border: none; border-radius: 6px;
	background: #16b3a4; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.bk-confirm:hover { background: #129e90; }

/* Slučajni odabir — custom dropdown (bar + panel, kao na slici) */
.bk-rand-drop { flex: 1; min-width: 0; position: relative; }
.bk-rand-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: auto;
	width: 230px;
	z-index: 30;
	padding: 10px;
	border-radius: 8px;
	background: #2b2f36;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.bk-rand-drop.open .bk-rand-panel { display: block; }
/* Sve opcije — jedna ispod druge, lijevo poravnate, isti font/format.
   Hover / izabrana opcija pozeleni (background). */
.bk-rand-options { display: flex; flex-direction: column; }
.bk-rand-opt {
	width: 100%; height: 36px; border: none; border-radius: 0;
	background: transparent; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
	text-align: left; padding-left: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* "Sve boje" — zelena boja teksta (ista nijansa kao pozadina izabrane opcije). */
.bk-rand-opt[data-count="all"] { color: #2e9e4f; }
.bk-rand-opt:last-child { border-bottom: none; }
.bk-rand-opt:hover { background: #2e9e4f; color: #fff; }
.bk-rand-opt.active { background: #2e9e4f; color: #fff; }

/* Mreža brojeva */
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 14px; }
.number-cell {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid #fff;   /* bijeli okvir oko loptice */
	padding: 0;
	max-width: 46px;
	justify-self: center;
	background: transparent;
	/* shade iza bijelog okvira — odvaja okvir od bijele pozadine sekcije */
	box-shadow: 0 1px 3px rgba(0,0,0,0.28);
	color: #fff;
	font-weight: 700;
}
/* Loptice su PNG iz ekrana igre: chosen-balls (svetli unutrašnji deo) za
   neselektovano; pri selekciji se menja na "solidnu" tamnu lopticu
   (bingo-49/img/*-ball.png) gde unutrašnji svetliji deo postaje iste
   (tamnije) boje kao okružujući prsten. */
.number-cell .nc-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.number-cell .nc-img-sel { display: none; }
.number-cell .nc-num { position: relative; line-height: 1; font-size: 17px; color: #000; font-weight: 700; text-shadow: 0 0 2px rgba(255,255,255,0.7); }
.number-cell.sel .nc-img-normal { display: none; }
.number-cell.sel .nc-img-sel { display: block; }
.number-cell.sel .nc-num { color: #fff; font-weight: 900; text-shadow: 0 0 2px rgba(0,0,0,0.5); }
@media (max-width: 520px) {
	.number-cell .nc-num { font-size: 14px; }
	.bk-grid { gap: 4px; padding: 0 10px; }
}

/* Poslednji red — obojene loptice bez brojeva (odabir cele boje).
   Koristi ISTU grid definiciju kao mreža brojeva (7 kolona, isti gap/padding)
   da se loptice centriraju tačno u istim kolonama ispod loptica iznad njih. */
.bk-color-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px 14px 0; }
.bk-color-ball {
	width: 100%; max-width: 46px; justify-self: center; aspect-ratio: 1;
	position: relative;
	border-radius: 50%; border: 1px solid #fff; cursor: pointer; padding: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	/* loptica = PNG iz igre (chosen-balls / solidna tamna pri selekciji) */
}
.bk-color-ball .nc-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.bk-color-ball .nc-img-sel { display: none; }
.bk-color-ball.sel { box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25); }
.bk-color-ball.sel .nc-img-normal { display: none; }
.bk-color-ball.sel .nc-img-sel { display: block; }
@media (max-width: 520px) {
	.bk-color-row { gap: 4px; padding: 8px 10px 0; }
}

/* Listič */
.bk-ticket { margin: 12px 12px 0; border: none; border-radius: 0; background: transparent; padding: 0; }
.bk-ticket-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk-ticket-title { font-size: 14px; font-weight: 800; color: #3B0A0E; text-transform: none; letter-spacing: 0; }
.bk-ticket-links { display: flex; gap: 14px; }
.bk-ticket-link { font-size: 13px; font-weight: 700; color: #1E8A80; cursor: pointer; user-select: none; }
.bk-ticket-link:hover { color: #14706A; text-decoration: underline; }
#clearAllBtn { color: #C93636; }
#clearAllBtn:hover { color: #AC2F2F; }
.bk-ticket-body { min-height: 44px; display: flex; flex-direction: column; color: #9aa0a6; font-size: 13px; }
.bk-ticket-empty { text-align: center; padding: 12px 0; }
.bk-ticket-body .ticket-ball { width: 24px; height: 24px; }
.bk-ticket-body .ticket-ball .tb-num { font-size: 11px; }
.ticket-ball.tb-sel .tb-num { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.45); }
/* Kartice kombinacija na listiću */
.combo-card { border: 1px solid #e3e5e7; border-radius: 8px; background: #FBFCFD; padding: 8px 10px; margin-bottom: 8px; }
.combo-balls { display: flex; flex-wrap: wrap; gap: 2px; }
.combo-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.combo-stake {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: #E0F2F1;          /* svetlo teal pill */
	color: #1E8A80;               /* teal tekst */
	border: 1px solid #1E8A80;    /* tanak okvir u boji labele */
	font-size: 11px;
	font-weight: 700;
}
.combo-del { background: none; border: none; cursor: pointer; font-size: 15px; color: #a0a0a0; padding: 0 2px; line-height: 1; }
.combo-del:hover { color: #d32f2f; }
.combo-total { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; color: #3B0A0E; padding-top: 8px; border-top: 1px solid #ececec; }

/* Akcije — fiksni footer; uvek iznad skrolovanog sadržaja da se dugmad
   (Dodaj/Uplati) nikada ne preklapaju sa sadržajem (npr. mrežom brojeva). */
.bk-actions { display: flex; gap: 10px; padding: 12px 14px 16px; border-top: 1px solid #C9C9C9; flex-shrink: 0; background: #FFFFFF; position: relative; z-index: 2; }
.bk-btn { flex: 1; height: 42px; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bk-btn-add { background: #26A69A; color: #fff; }
.bk-btn-pay { background: #2e9e4f; color: #fff; }
.bk-btn-pay:disabled { opacity: .5; cursor: not-allowed; }
/* Popup: Minimalni ulog kombinacije */
.minbet-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 60;
}
.minbet-popup-overlay.open { display: flex; }
.minbet-popup {
	background: #fff;
	border-radius: 12px;
	padding: 22px 24px;
	width: max-content;
	min-width: 300px;
	max-width: 92vw;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	text-align: center;
}
.minbet-popup-title { font-size: 16px; font-weight: 800; color: #1c1f23; margin-bottom: 10px; }
.minbet-popup-msg { font-size: 13px; color: #555; line-height: 1.45; margin-bottom: 18px; white-space: nowrap; }
.minbet-popup-ok {
	width: 100%; height: 42px; border: none; border-radius: 6px;
	background: #2e9e4f; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.minbet-popup-ok:hover { background: #2a8f47; }

/* Popup: Potvrda čišćenja listića */
.confirm-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 55;
}
.confirm-popup-overlay.open { display: flex; }
.confirm-popup {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	width: min(340px, 86%);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	text-align: center;
}
.confirm-popup-title { font-size: 16px; font-weight: 800; color: #1c1f23; margin-bottom: 10px; }
.confirm-popup-msg { font-size: 13px; color: #555; line-height: 1.4; margin-bottom: 18px; }
.confirm-popup-actions { display: flex; gap: 10px; }
.confirm-popup-cancel {
	flex: 1; height: 40px; border: none; border-radius: 6px;
	background: #e5e5e5; color: #333; font-size: 14px; font-weight: 700; cursor: pointer;
}
.confirm-popup-cancel:hover { background: #d8d8d8; }
.confirm-popup-ok {
	flex: 1; height: 40px; border: none; border-radius: 6px;
	background: #C93636; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.confirm-popup-ok:hover { background: #AC2F2F; }

/* Popup: Ulog za sve kombinacije */
.stakeall-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 65;
}
.stakeall-popup-overlay.open { display: flex; }
.stakeall-popup {
	background: #fff;
	border-radius: 12px;
	padding: 20px 22px 18px;
	width: min(340px, 86%);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	text-align: center;
}
.stakeall-popup-title { font-size: 16px; font-weight: 800; color: #1c1f23; margin-bottom: 8px; }
.stakeall-popup-msg { font-size: 13px; color: #555; line-height: 1.45; margin-bottom: 14px; }
.stakeall-amount-grid { margin-top: 2px; }
.stakeall-amt {
	height: 40px; border: none; border-radius: 8px;
	background: #eef0f3; color: #1c1f23; font-size: 14px; font-weight: 700; cursor: pointer;
}
.stakeall-amt:hover { background: #dfe3e8; }
.stakeall-amt.active { background: #2e9e4f; color: #fff; }
.stakeall-iznos-row { margin-top: 12px; }
/* Labela "Iznos uloga" — veći font, lijevo poravnata (samo u ovom popupu). */
.stakeall-popup .bk-iznos-lbl { display: block; text-align: left; font-size: 13px; }
/* Tanka tamnosiva ivica oko polja za unos iznosa (umjesto svijetle za dark dropdown). */
.stakeall-popup .bk-iznos-ctl { border: 1px solid #9aa0a8; }
.stakeall-popup-actions { display: flex; gap: 10px; margin-top: 16px; }
.stakeall-popup-cancel {
	flex: 1; height: 42px; border: none; border-radius: 6px;
	background: #e5e5e5; color: #333; font-size: 14px; font-weight: 700; cursor: pointer;
}
.stakeall-popup-cancel:hover { background: #d8d8d8; }
.stakeall-popup-ok {
	flex: 1; height: 42px; border: none; border-radius: 6px;
	background: #2e9e4f; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.stakeall-popup-ok:hover { background: #2a8f47; }

/* Popup: Broj kola (dvostepena uplata) */
.draws-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 65;
}
.draws-popup-overlay.open { display: flex; }
.draws-popup {
	background: #fff;
	border-radius: 12px;
	padding: 20px 22px 18px;
	width: min(340px, 86%);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	text-align: center;
}
/* Naslov "Izaberi broj kola" — veći font, boldovan, kao ostali naslovi popupa. */
.draws-popup-title { font-size: 18px; font-weight: 900; color: #1c1f23; margin-bottom: 10px; }
.draws-popup-msg { font-size: 13px; color: #555; line-height: 1.45; margin-bottom: 10px; }
.draws-popup-max { font-size: 13px; color: #1c1f23; margin-bottom: 12px; }
.draws-popup-max span { font-weight: 800; }
.draws-quick { display: flex; gap: 8px; margin-bottom: 12px; }
.draws-q {
	flex: 1; height: 40px; border: none; border-radius: 8px;
	background: #eef0f3; color: #1c1f23; font-size: 15px; font-weight: 700; cursor: pointer;
}
.draws-q:hover { background: #dfe3e8; }
.draws-q.active { background: #2e9e4f; color: #fff; }
.draws-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.draws-field-lbl { font-size: 13px; font-weight: 700; color: #555; }
.draws-stepper { display: inline-flex; align-items: center; border: 1px solid #9aa0a8; border-radius: 8px; overflow: hidden; }
.draws-step {
	width: 38px; height: 38px; border: none; background: #eef0f3;
	color: #1c1f23; font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
}
.draws-step:hover { background: #dfe3e8; }
.draws-val { min-width: 52px; text-align: center; font-size: 17px; font-weight: 900; color: #1c1f23; }
.draws-total { font-size: 14px; font-weight: 800; color: #1c1f23; margin-bottom: 16px; }
.draws-actions { display: flex; gap: 10px; }
.draws-cancel {
	flex: 1; height: 42px; border: none; border-radius: 6px;
	background: #e5e5e5; color: #333; font-size: 14px; font-weight: 700; cursor: pointer;
}
.draws-cancel:hover { background: #d8d8d8; }
.draws-ok {
	flex: 1; height: 42px; border: none; border-radius: 6px;
	background: #2e9e4f; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.draws-ok:hover { background: #2a8f47; }

/* ---------- TIKETI ---------- */
/* Sekcija = ista pozadina kao Klađenje (bijela). Tiketi providni, okvir po
   statusu (zeleno = dobitni, crveno = gubitni, sivo = nezavršeni), zaglavlje
   kao poluprozirna zavjesa preko glavne pozadine. */
#tab-tiketi { background: #FFFFFF; color: #3B0A0E; }
#tab-tiketi .tab-inner { padding-bottom: 12px; }
.tbl-title { color: #FFF0D0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px; }
.tiketi-title { color: #3B0A0E !important; font-size: 10px !important; }
@media (min-width: 1200px) { .tiketi-title { font-size: 13px !important; } }
.tickets-grid { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {
	.tickets-grid { columns: 2; column-gap: 10px; }
	.tickets-grid > .ticket-card { break-inside: avoid; width: 100%; margin-bottom: 8px; }
}
.ticket-card { background: transparent; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.ticket-card.tk-won { border: 2px solid #43a047; }
.ticket-card.tk-lost { border: 2px solid #e53935; }
.ticket-card.tk-other { border: 1px solid #9e9e9e; }
.ticket-hdr { padding: 8px 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ticket-card.tk-won .ticket-hdr { background: rgba(67,160,71,0.18); color: #1b5e20; }
.ticket-card.tk-lost .ticket-hdr { background: rgba(229,57,53,0.18); color: #b71c1c; }
.ticket-card.tk-other .ticket-hdr { background: rgba(0,0,0,0.06); color: #555; }
.ticket-hdr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-hdr-stake { margin-left: auto; white-space: nowrap; flex-shrink: 0; font-weight: 800; }
.ticket-body { padding: 8px 10px; }
.tk-balls { display: flex; flex-wrap: nowrap; gap: 2px; margin: 4px 0 6px; }
/* Loptice uvijek u jednom redu — skaliraju se (flex 1 1 0, max 36px) da sve stanu */
#tab-tiketi .tk-balls .ticket-ball { flex: 1 1 0; min-width: 0; max-width: 36px; height: auto; aspect-ratio: 1 / 1; margin: 0; container-type: size; }
#tab-tiketi .tk-balls .ticket-ball .tb-num { font-size: 40cqw; }
.ticket-ball { position: relative; display: inline-flex; width: 36px; height: 36px; margin: 2px; flex-shrink: 0; }
.ticket-ball img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ticket-ball .tb-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 800; color: #000; text-shadow: 0 0 2px rgba(255,255,255,.6); font-size: 16px; line-height: 1; pointer-events: none; }
.ticket-ball.tb-dim { opacity: .35; }
.ticket-ball.tb-drawn { opacity: 1; filter: drop-shadow(0 0 4px rgba(110,255,120,.95)) drop-shadow(0 0 8px rgba(110,255,120,.6)); }
.tbl-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.tbl-lbl { color: #777; font-size: 11px; flex-shrink: 0; }
.tbl-val { color: #3B0A0E; font-size: 12px; font-weight: 700; text-align: right; }
/* Podnožje tiketa: zadnji red — koristi istu separator liniju kao i ostali redovi */
.ticket-foot { border-bottom: none; }

/* ---- Tiketi: jedna karta = jedan tiket, više sekcija (svaki item = sekcija) ---- */
.tk-sections { margin: 0 0 2px; }
.tk-section { padding: 2px 0 4px; }
.tk-section + .tk-section { border-top: 1px dashed rgba(0,0,0,0.14); margin-top: 4px; padding-top: 6px; }
.tk-section .tk-balls { margin: 0 0 2px; }
.tk-empty { color: #888; font-size: 9px; }
.tk-section-meta { font-size: 11px; line-height: 1.4; color: #555; }
.tk-section-meta.meta-won { color: #2e7d32; font-weight: 700; }
.tk-section-meta.meta-lost { color: #c62828; font-weight: 700; }
.tk-section-meta.meta-pending { color: #888; }
.tk-result-summary { font-size: 13px; font-weight: 800; margin: 6px 0 4px; }
.tk-result-summary.tk-sum-won { color: #2e7d32; }
.tk-result-summary.tk-sum-lost { color: #c62828; }

/* ---------- FILTAR PO DATUMU ---------- */
/* Dugme "Dodaj novi" (plavo/zeleno) — prebaci na Klađenje. Samo mobilna
   varijanta: na desktopu je Klađenje uvijek vidljivo lijevo, pa se sakrije. */
.ticket-add-new { background: #17a2b8; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; width: 100%; margin-bottom: 8px; }
.ticket-add-new:hover { background: #148a9e; }
#app.desktop-layout .ticket-add-new { display: none; }
/* Zaglavlje sekcije: naslov + dugme za filtar. Mobilni: naslov ispod punog
   dugmeta; desktop: dugme u istom redu sa naslovom, krajnje desno. */
.ticket-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ticket-head .ticket-filter-bar { margin-bottom: 0; }
.ticket-head .tiketi-title { margin-bottom: 0; }
#app.desktop-layout .ticket-head { flex-direction: row; align-items: center; justify-content: space-between; }
/* Naslov lijevo, dugme za filtar desno (DOM je filter pa naslov → order) */
#app.desktop-layout .ticket-head .tiketi-title { order: 1; }
#app.desktop-layout .ticket-head .ticket-filter-bar { order: 2; }
#app.desktop-layout .ticket-filter-btn { flex: 0 0 auto; box-sizing: border-box; }
.ticket-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ticket-filter-btn { background: #e6e6e6; color: #1c1c1c; border: 1px solid #d0d0d0; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex: 1; min-width: 0; box-sizing: border-box; }
.ticket-filter-btn:hover { background: #dcdcdc; }
.ticket-filter-clear { background: transparent; border: 1px solid #9e9e9e; color: #424242; border-radius: 6px; width: 28px; height: 28px; font-size: 12px; cursor: pointer; line-height: 1; flex-shrink: 0; }
.ticket-filter-clear:hover { background: rgba(0,0,0,0.06); }
.datefilter-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 16px; }
.datefilter-overlay.open { display: flex; }
.datefilter-popup { background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); padding: 14px; width: 100%; max-width: 340px; }
.datefilter-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.datefilter-month { font-weight: 700; font-size: 14px; color: #222; text-transform: capitalize; }
.datefilter-nav { background: transparent; border: 1px solid #ddd; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: #222; font-size: 12px; }
.datefilter-nav:disabled { opacity: .3; cursor: default; }
.datefilter-days, .datefilter-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datefilter-days { margin-bottom: 4px; }
.datefilter-days span { text-align: center; font-size: 10px; color: #999; padding: 4px 0; }
.datefilter-cell { text-align: center; padding: 5px 0; border: 2px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; color: #333; background: transparent; cursor: pointer; }
.datefilter-other { color: #cfcfcf; font-weight: 400; cursor: default; }
.datefilter-disabled { color: #ccc; opacity: .45; cursor: default; }
.datefilter-today { border-color: #43a047; }
.datefilter-sel { background: rgba(67,160,71,0.22); }
.datefilter-has { color: #2e7d32; }
.datefilter-has::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #43a047; margin: 2px auto 0; }
.datefilter-foot { margin-top: 12px; display: flex; justify-content: center; }
.datefilter-showall { background: #e6e6e6; color: #1c1c1c; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; width: 100%; }
.datefilter-showall:hover { background: #dcdcdc; }

/* ---------- STATISTIKE ---------- */
/* Ista bijela pozadina kao Klađenje/Tiketi; tamni tekst */
#tab-statistika { background: #FFFFFF; color: #3B0A0E; }
#tab-statistika .tab-inner { padding-bottom: 12px; }
.stats-hot-cold-box { margin-bottom: 14px; }
/* Mobilni: paneli jedan ispod drugog; desktop: pored */
.stat-hc-row { display: flex; flex-direction: column; gap: 10px; }
#app.desktop-layout .stat-hc-row { flex-direction: row; }
.stat-hc-col { flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 10px 8px; background: #f7f7f7; }
.stat-hc-title { color: #3B0A0E; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.stat-balls-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stat-balls-row .ticket-ball { width: 30px; height: 30px; }
.stat-balls-row .ticket-ball .tb-num { font-size: 12px; }
.stat-color-block { display: inline-block; border-radius: 4px; padding: 3px 8px; color: #000; font-size: 10px; font-weight: 700; margin: 2px; }
/* Graf frekventnosti boja (TopColor iz MainStats — 7 boja) */
.stats-color-chart {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 10px 8px;
  background: #f7f7f7;
}
.stats-cc-title {
  color: #3B0A0E;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  margin-bottom: 8px;
}
.stats-cc-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.stats-cc-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
  display: inline-block;
}
.stats-cc-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.stats-cc-bar {
  height: 100%;
  border-radius: 5px;
}
.stats-cc-pct {
  font-size: 11px;
  font-weight: 700;
  color: #3B0A0E;
  min-width: 36px;
  text-align: right;
}
.stats-wins-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,240,208,0.12); }
.stats-wins-lbl { color: #FFF0D0; font-size: 12px; font-weight: 600; }
.stats-wins-val { color: #f5a623; font-size: 12px; }
.stats-wins-count { font-weight: 700; }
.stats-wins-money { color: #FFF0D0; font-weight: 700; }

/* ---------- Toast ---------- */
.app-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 99999; pointer-events: none; padding: 13px 24px; border-radius: 14px; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: .5px; max-width: 90vw; opacity: 0; transition: opacity .28s ease, transform .28s ease; }
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast.ok { background: linear-gradient(135deg, rgba(245,166,35,.95), rgba(190,120,25,.95)); border: 1px solid rgba(255,240,208,.45); color: #1a0e12; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
/* Zeleni toast — bijeli tekst (npr. "Ulog primijenjen na sve kombinacije") */
.app-toast.success { background: linear-gradient(135deg, rgba(46,158,79,.96), rgba(38,130,66,.96)); border: 1px solid rgba(255,255,255,.45); color: #ffffff; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.app-toast.err { background: linear-gradient(135deg, rgba(150,22,10,.95), rgba(80,14,5,.95)); border: 1px solid rgba(255,110,80,.6); color: #FFF0D0; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 18px rgba(255,110,80,.18); }

/* ---------- DESKTOP REORGANIZACIJA SEKCIJA ----------
   Čim širina ekrana postane veća od širine ekrana za izvlačenje
   (gameArea je 16:9, ograničen na 50vh visine → max širina = 50vh * 16/9),
   sekcije se reorganizuju (klasa .desktop-layout na #app koju postavlja JS):
     - ekran izvlačenja ide KRAJNJE DESNO, uvek 65% širine ekrana
     - levo, od vrha do dna ekrana (35% širine): sekcija Klađenje
       (njen tab na samom vrhu)
     - ispod ekrana za izvlačenje, u njegovoj širini: preostale dve sekcije
       (Tiketi / Statistika) sa postojećom trakom za klik na sekciju.
   Na uskom ekranu (bez .desktop-layout) ostaje postojeći izgled. */

/* Leva traka (tab Klađenje) se prikazuje SAMO na desktopu */
#appTabsSide { display: none; }

/* ---- Uski ekran (podrazumevano) ----
   colLeft / colRight / panel-content su "display: contents" — njihova deca
   se ponašaju kao direktna deca #app (flex kolona), pa redosled ostaje kao
   do sada: igra → traka → aktivna sekcija. Redosled kontrolišemo preko order. */
#colLeft, #colRight, .panel-content { display: contents; }
#gameArea { order: 1; flex-shrink: 0; }
#appTabs { order: 2; flex-shrink: 0; }
#tab-kladjenje { order: 3; }
#tab-tiketi, #tab-statistika { order: 4; }
#appTabsSide { order: 5; }

/* ---- Desktop (širina > max širina ekrana za izvlačenje) ----
   #app postaje grid od dve nezavisne kolone (svaka je flex kolona):
     kolona 1 (levo) = tab Klađenje + sekcija Klađenje od vrha do dna
     kolona 2 (desno) = ekran izvlačenja + traka + Tiketi/Statistika */
#app.desktop-layout {
	display: grid;
	/* Kolone: Klađenje 35% (levo, od vrha do dna) / izvlačenje 65% (desno) */
	grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
	grid-template-rows: minmax(0, 1fr);
}
#app.desktop-layout #colLeft  { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; border-right: 0.5px solid #666; }
#app.desktop-layout #colRight { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }

/* Resetuj order na desktopu (svaka kolona reda po DOM redosledu) */
#app.desktop-layout #gameArea,
#app.desktop-layout #appTabs,
#app.desktop-layout #appTabsSide,
#app.desktop-layout #tab-kladjenje,
#app.desktop-layout .panel-content,
#app.desktop-layout #tab-tiketi,
#app.desktop-layout #tab-statistika { order: 0; }

/* Leva kolona: tab Klađenje na samom vrhu (uvek "aktivan" izgled) + sekcija */
#app.desktop-layout #appTabsSide { display: flex; flex-shrink: 0; }
#app.desktop-layout #appTabsSide .tab-btn { cursor: default; color: #fff; border-top-color: #000; background: #000; font-weight: 700; }
/* Klađenje uvek prikazano (display:flex !important) i UVIJEK u koloni — isti
   raspored kao u mobile verziji (bk-scroll + fiksni Dodaj/Uplati na dnu). */
#app.desktop-layout #tab-kladjenje { flex: 1; min-height: 0; display: flex !important; flex-direction: column; }

/* Desktop: loptice u Klađenju se skaliraju da popune kolonu → matrica 7×7
   uvijek vizuelno zauzme KVADRATAN oblik (bez fiksnog max-width 46px).
   Ćelije su aspect-ratio:1 i stretch po koloni, pa je matrica širina=visina.
   Broj u loptici skalira se proporcionalno širini mreže (container query). */
#app.desktop-layout .bk-grid,
#app.desktop-layout .bk-color-row {
	container-type: inline-size;
}
#app.desktop-layout .bk-grid .number-cell,
#app.desktop-layout .bk-color-row .bk-color-ball {
	max-width: none;
	justify-self: stretch;
}
#app.desktop-layout .number-cell .nc-num {
	font-size: clamp(16px, 5cqw, 40px);
}

/* Desna kolona: igra gore (16:9, uvek 65% širine — bez 50vh cap da nema
   crnih traka sa strane), traka ispod, sekcije ispod */
#app.desktop-layout #gameArea { flex-shrink: 0; width: 100%; max-height: none; }
#app.desktop-layout #appTabs { flex-shrink: 0; }
/* Klađenje tab iz glavne trake se sakriva na desktopu (preseljen je levo) */
#app.desktop-layout #appTabs .tab-btn[data-tab="tab-kladjenje"] { display: none; }
#app.desktop-layout .panel-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }