:root {
  --akcenat: #f0a850;
  --akcenat-svetli: #ffc078;
  --pozadina-1: #0d1729;
  --pozadina-2: #16243f;
  --pozadina-3: #1a1f3a;
}

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

/* ===== STRANICA ===== */
body {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #1e3358 0%, #111d33 50%, #0a1322 100%) fixed;
  min-height: 100vh;
  display: flex;
  /* KLJUČNO: flex-direction:column + align-items:center - bez ovoga je body
     bio flex red (default) sa samo jednim detetom (#app) pa je "radilo" slučajno.
     Kad je navbar dodat kao drugo dete pored #app, default red ih je stavljao
     JEDNO PORED DRUGOG i razvlačio oba na punu visinu ekrana (align-items:stretch
     je default) - otud "navbar zauzima ceo ekran". Sad se slažu jedno ispod
     drugog, svaki prirodne visine, centrirano horizontalno. */
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 48px;
  overflow-y: scroll; /* scrollbar uvek rezervisan - širina stranice nikad ne skače (fiksne dimenzije boksova) */
}

/* ===== AMBIJENTALNA POZADINA - spori "morphing" blobovi =====
   Dva velika, jako zamućena radijalna gradijenta koja lagano plutaju iza
   celog sadržaja (GPU-jeftino: samo transform animacija). Daje dubinu i
   "živost" pozadini bez ometanja sadržaja. */
/* ===== GRAD IZ VAZDUHA - tekstura pozadine =====
   Inline SVG tile: ulice, blokovi zgrada, kružni tok i krivudava reka,
   kao pogled na grad iz aviona nocu. Jedva vidljivo (niska opacity),
   daje "igracki" kartografski karakter bez ometanja sadrzaja. */
html::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cdefs%3E%3CradialGradient id='sf' cx='0.35' cy='0.3' r='0.75'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.14'/%3E%3Cstop offset='0.6' stop-color='%23ffffff' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='sfw' cx='0.4' cy='0.35' r='0.7'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Ccircle cx='100' cy='112' r='42' fill='url(%23sf)'/%3E%3Ccircle cx='412' cy='120' r='36' fill='url(%23sf)'/%3E%3Ccircle cx='252' cy='78' r='20' fill='url(%23sfw)'/%3E%3Ccircle cx='250' cy='250' r='9' fill='url(%23sfw)'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='.075' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='100' cy='112' r='42'/%3E%3Cellipse cx='100' cy='112' rx='16' ry='42'/%3E%3Cpath d='M60 96 H140 M58 112 H142 M60 128 H140'/%3E%3Ccircle cx='412' cy='120' r='36'/%3E%3Cpath d='M412 82 L421 111 L450 120 L421 129 L412 158 L403 129 L374 120 L403 111 Z'/%3E%3Ccircle cx='412' cy='120' r='4'/%3E%3Ccircle cx='252' cy='78' r='16'/%3E%3Cpath d='M252 52 V44 M252 112 V104 M226 78 H218 M286 78 H278 M234 60 L228 54 M270 60 L276 54 M234 96 L228 102'/%3E%3Cpath d='M232 104 a14 14 0 0 1 27 -5 a11 11 0 0 1 6 21 H236 a12 12 0 0 1 -4 -16 Z'/%3E%3Cpath d='M40 392 L104 300 L150 360 L196 292 L252 392 Z' fill='%23ffffff' fill-opacity='.02'/%3E%3Cpath d='M92 316 L104 300 L118 320 M182 306 L196 292 L210 312'/%3E%3Cpath d='M356 342 L406 326 L456 342 L456 398 L406 414 L356 398 Z'/%3E%3Cpath d='M406 326 V414 M356 370 L456 370'/%3E%3Cpath d='M366 356 C 386 366 426 350 446 362' stroke-dasharray='2 7' stroke-opacity='.07'/%3E%3Cpath d='M250 226 C235 226 224 238 224 252 C224 270 250 292 250 292 C250 292 276 270 276 252 C276 238 265 226 250 226 Z'/%3E%3Ccircle cx='250' cy='251' r='7'/%3E%3Cpath d='M120 486 L176 452' stroke-width='6' stroke-opacity='.06'/%3E%3Cpath d='M170 448 l14 -8 l6 10 l-14 8 Z'/%3E%3Cpath d='M150 470 V492 M140 492 H160'/%3E%3Cpath d='M40 244 h44 v34 h-44 Z'/%3E%3Cpath d='M62 244 V278 M48 252 H58 M48 260 H58 M66 252 H78 M66 260 H78'/%3E%3Cpath d='M292 186 L338 174 L318 190 L322 200 L314 196 L308 202 L306 192 Z'/%3E%3Cpath d='M472 268 L486 300 H458 Z M472 288 L490 322 H454 Z M472 322 V336'/%3E%3Cpath d='M150 30 C 200 46 250 46 300 30' stroke-opacity='.06'/%3E%3Cpath d='M170 37 l10 2 l-6 9 Z M210 43 l10 1 l-7 9 Z M250 43 l10 -1 l-4 10 Z M290 37 l9 -3 l-2 10 Z'/%3E%3Cpath d='M14 210 C 100 168 180 250 260 214 S 440 250 512 206' stroke-dasharray='2 8' stroke-opacity='.06'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Cpath d='M180 173 L182 178 L187 180 L182 182 L180 187 L178 182 L173 180 L178 178 Z'/%3E%3Cpath d='M330 143 L332 148 L337 150 L332 152 L330 157 L328 152 L323 150 L328 148 Z'/%3E%3Cpath d='M470 193 L472 198 L477 200 L472 202 L470 207 L468 202 L463 200 L468 198 Z'/%3E%3Cpath d='M70 323 L72 328 L77 330 L72 332 L70 337 L68 332 L63 330 L68 328 Z'/%3E%3Cpath d='M350 463 L352 468 L357 470 L352 472 L350 477 L348 472 L343 470 L348 468 Z'/%3E%3Cpath d='M190 463 L192 468 L197 470 L192 472 L190 477 L188 472 L183 470 L188 468 Z'/%3E%3Cpath d='M500 323 L502 328 L507 330 L502 332 L500 337 L498 332 L493 330 L498 328 Z'/%3E%3Cpath d='M40 143 L42 148 L47 150 L42 152 L40 157 L38 152 L33 150 L38 148 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
}

body::before, body::after {
  content: "";
  position: fixed;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
body::before {
  top: -18vw; left: -14vw;
  background: radial-gradient(circle, rgba(232,98,42,0.05), transparent 65%);
  animation: blobPlutanje1 26s ease-in-out infinite alternate;
}
body::after {
  bottom: -22vw; right: -16vw;
  background: radial-gradient(circle, rgba(76,140,220,0.06), transparent 65%);
  animation: blobPlutanje2 32s ease-in-out infinite alternate;
}
@keyframes blobPlutanje1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vw, 7vh) scale(1.15); }
}
@keyframes blobPlutanje2 {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vw, -6vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ===== GLAVNI RASPORED ===== */
#glavni-sadrzaj {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* ===== LEVA STRANA ===== */
#leva-strana {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 320px;
  height: 700px;
  overflow-x: hidden;
  /* overflow-y: hidden (ne auto) - sadržaj je sad tačno na ivici 700px, i hover
     nad opštinom na mapi upisuje tekst u okrug-ime/okrug-ime-2 što je znalo da
     gurne visinu par piksela preko praga i izazove treperenje skrola. Pošto je
     panel dovoljno kompaktan da normalno stane, sakrivamo overflow umesto da
     ga skrolujemo - nema više skrolbara koji se pojavljuje/nestaje na hover. */
  overflow-y: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: stretch;
  background: rgba(22,32,53,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(8px);
}

/* ===== REZIM PREKIDAC ===== */
#rezim-prekidac {
  display: flex; gap: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px; padding: 4px;
  margin-bottom: 4px;
}
.rezim-tab {
  flex: 1; padding: 9px; border: none; background: transparent;
  color: #8fb0d8; font-size: 13px; font-weight: 700;
  border-radius: 9px; cursor: pointer; transition: all 0.25s ease;
}
.rezim-tab:hover { color: #cdd9ea; }
.rezim-tab.aktivan { background: var(--akcenat); color: #1a1200; }

/* ===== ISTRAZI PANEL ===== */
#istrazi-panel {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 9px 10px;
}
/* Kompaktni filteri - manji razmaci, niži selektori (samo Istraživanje,
   kviz .mod-red ostaje netaknut) */
#istrazi-panel .mod-red { padding: 1px 0; gap: 6px; }
#istrazi-panel .mod-red label { font-size: 11px; }
#istrazi-panel .mod-red select {
  padding: 4px 8px; font-size: 12px; border-radius: 7px; padding-right: 24px;
}
#istrazi-panel #istrazi-pretraga { padding: 6px 10px; font-size: 12.5px; }
#istrazi-dugmici { display: flex; gap: 6px; margin-top: 2px; }
#istrazi-dugmici button {
  flex: 1; padding: 6px 4px; border-radius: 8px; border: none;
  cursor: pointer; font-weight: 700; transition: all 0.2s ease;
  font-family: inherit; font-size: 12px;
}
#istrazi-prikazi { background: var(--akcenat); color: #1a1200; }
#istrazi-prikazi:hover { background: var(--akcenat-svetli); }
#istrazi-obrisi {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #adc2e0;
}
#istrazi-obrisi:hover { background: rgba(255,255,255,0.1); }

/* istrazi pretraga red - ne preliva */
#istrazi-panel .mod-red:has(#istrazi-pretraga) input { flex: 1; min-width: 0; }

/* ===== ANTI-OVERFLOW: leva kolona ===== */
#prvi-box, #istrazi-panel, #brojac-panel, #mod-panel, #mod-meni,
#okrug-panel, #okrug-panel-2, #legenda-celina, #istrazi-uputstvo {
  box-sizing: border-box;
  max-width: 100%;
}
.mod-red { box-sizing: border-box; max-width: 100%; }
.mod-red select { max-width: 100%; box-sizing: border-box; }

#istrazi-pretraga-dugme {
  padding: 7px 12px; background: var(--akcenat); color: #1a1200;
  border: none; border-radius: 8px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-size: 13px;
}
#istrazi-pretraga-dugme:hover { background: var(--akcenat-svetli); }

#istrazi-uputstvo {
  font-size: 11.5px; color: #8fb0d8; line-height: 1.45;
  padding: 7px 10px;
  background: rgba(143,176,216,0.08);
  border-radius: 9px;
  border: 1px solid rgba(143,176,216,0.12);
}

/* ===== PRVI BOX ===== */
#prvi-box {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
}

#pretraga-forma {
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
#pretraga-forma input { flex: 1; min-width: 0; }
#pretraga-forma button { flex-shrink: 0; }

#polje-za-pretragu, #istrazi-pretraga {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #f0f6ff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#polje-za-pretragu::placeholder, #istrazi-pretraga::placeholder { color: #8fb0d8; }

#polje-za-pretragu:focus, #istrazi-pretraga:focus {
  outline: none;
  border-color: var(--akcenat);
  box-shadow: 0 0 0 3px rgba(240,168,80,0.15);
}

#dugme-pretraga {
  padding: 9px 13px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  background: var(--akcenat);
  color: #1a1200;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#dugme-pretraga:hover  { background: var(--akcenat-svetli); }
#dugme-pretraga:active { transform: scale(0.97); }

#dugme-obrisi {
  padding: 7px 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  background: transparent;
  color: #d06050;
  border: 1.5px solid rgba(208,96,80,0.40);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#dugme-obrisi:hover {
  background: rgba(208,96,80,0.13);
  border-color: #d06050;
}

#dugme-obrisi-filtere {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: #adc2e0; padding: 8px; border-radius: 8px; cursor: pointer;
  transition: all 0.2s ease; width: 100%;
}
#dugme-obrisi-filtere:hover { background: rgba(255,255,255,0.1); }

/* ===== DUGMAD ZA KRAJ IGRE ===== */
#red-prikazi-obrisi {
  display: flex;
  gap: 7px;
  width: 100%;
}
#red-prikazi-obrisi > button { flex: 1; }

#dugme-prikazi-sve {
  flex: 1;
  padding: 7px 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  background: transparent;
  color: #3dba78;
  border: 1.5px solid rgba(61,186,120,0.40);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#dugme-prikazi-sve:hover {
  background: rgba(61,186,120,0.11);
  border-color: #3dba78;
}

#dugme-zavrsi {
  flex: 1;
  padding: 7px 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  background: #3a6fd8;
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#dugme-zavrsi:hover { background: #2a57b8; }

button:hover:not(.nav-strelica)  { transform: translateY(-2px); }
button:active:not(.nav-strelica) { transform: translateY(0); }

/* ===== PORUKA ===== */
#poruka {
  font-size: 12px;
  min-height: 18px;
  padding: 0 2px;
  color: #4a6088;
  line-height: 1.4;
}

#poruka.uspeh      { color: #3dba78; }
#poruka.greska     { color: #d06050; }
#poruka.upozorenje { color: #c49020; }

/* ===== BROJAČ PANEL ===== */
#brojac-panel {
  padding: 8px 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  text-align: center;
}

#brojac {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--akcenat);
  letter-spacing: 1px;
}

#brojac-label {
  font-size: 9.5px;
  color: #8fb0d8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ===== OKRUG PANEL =====
   Kompaktni horizontalni redovi (labela levo, vrednost desno) - umesto visokih
   centriranih kutija; štede vertikalni prostor u levoj koloni. */
#okrug-panel,
#okrug-panel-2 {
  padding: 7px 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

#okrug-label,
#okrug-label-2 {
  font-size: 10px;
  color: #8fb0d8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

#okrug-ime,
#okrug-ime-2 {
  font-size: 12.5px;
  font-weight: 600;
  color: #8cc0ff;
  min-height: 1.3em;
  line-height: 1.3em;
  transition: opacity 0.15s;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== OKRUZI NA MAPI ===== */
#sloj-okruzi path {
  transition: opacity 0.35s ease, filter 0.35s ease;
}

#sloj-okruzi path:hover {
  filter: brightness(1.3);
}

#sloj-okruzi path.okrug-zatamnjen {
  opacity: 0.18;
  filter: grayscale(0.6);
}

#sloj-okruzi path.okrug-isticanje {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(240,168,80,0.6)) brightness(1.15);
}

#sloj-kruzici circle { transition: all 0.2s ease; cursor: pointer; }
#sloj-kruzici circle:hover { filter: brightness(1.3); }
#sloj-kruzici circle.pogodjen { fill: var(--akcenat); }

@keyframes puls-grad {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}
#sloj-kruzici circle.tek-pronadjen {
  animation: puls-grad 0.8s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* ===== TRAKA NAPRETKA ===== */
#napredak-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
#napredak-tekst { font-size: 13px; color: #adc2e0; margin-bottom: 6px; }
#napredak-traka { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
#napredak-popuna { height: 100%; width: 0%; background: linear-gradient(90deg, var(--akcenat), var(--akcenat-svetli)); border-radius: 99px; transition: width 0.4s ease; }

/* ===== LEGENDA CELINA ===== */
#legenda-celina {
  padding: 10px 12px;
  background: #162035;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}

.legenda-stavka {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.legenda-boja {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}

.legenda-naziv {
  font-size: 10.5px;
  font-weight: 500;
  color: #b3cdea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== SVG MAPA ===== */
#mapa-kontejner {
  position: relative;
  flex-shrink: 0;
  height: 700px;
  box-sizing: border-box;
  overflow: hidden;
  /* Suptilna senka u boji umesto neonskog pulsa - mirnije, manje "AI" */
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 16px rgba(232,98,42,0.09);
  border: 1px solid rgba(232,98,42,0.18);
  border-radius: 16px;
  isolation: isolate;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
#mapa-kontejner:hover {
  border-color: rgba(232,98,42,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 22px rgba(232,98,42,0.14);
}

#mapa {
  display: block;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: none;
}
#mapa.glatko-centriranje { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ===== ANIMACIJA KRUŽIĆA ===== */
@keyframes kruzicPojava {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.krug-pojava {
  animation: kruzicPojava 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}

/* ===== ČINJENICA BOX ===== */
@keyframes cinjenicaPojava {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

#cinjenica-box {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 190px;
  background: rgba(6, 12, 26, 0.90);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #d8e6f8;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  pointer-events: none;
}

#cinjenica-box.cinjenica-pojava {
  animation: cinjenicaPojava 0.3s ease-out both;
}

.cinjenica-grad {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5a9ee8;
  margin-bottom: 6px;
}

/* ===== TOOLTIP ===== */
#tooltip {
  position: absolute;
  display: none;
  background: rgba(6, 12, 26, 0.96);
  color: #d8e6f8;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.09);
  z-index: 10;
}

/* ===== BOČNI PANEL ===== */
#bocni-panel {
  width: 218px;
  flex-shrink: 0;
  background: #162035;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  padding: 16px;
  height: 700px;
  max-height: none;
  overflow-y: auto;
}

#bocni-panel::-webkit-scrollbar { width: 3px; }
#bocni-panel::-webkit-scrollbar-track { background: transparent; }
#bocni-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
}

#bocni-panel h2 {
  font-size: 10px;
  font-weight: 700;
  color: #4a6a90;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ===== LISTA GRADOVA ===== */
#lista-gradova {
  list-style: none;
  padding: 0;
}

#lista-gradova li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  font-size: 12px;
  min-height: 26px;
  transition: all 0.2s ease;
}

#lista-gradova li:last-child { border-bottom: none; }

#lista-gradova li:hover {
  background: rgba(240,168,80,0.08);
  border-radius: 6px;
}

/* Napomena: raniji "listaFadeIn" (klizanje+fade) je uklonjen - pošto
   azurirajPanel() ponovo iscrta CELU listu pri svakoj promeni, ta animacija se
   okidala na SVIM već pronađenim naseljima iznova (ne samo na novom), što je
   izgledalo kao čudno "treperenje" cele liste. Skrol + bljesak ispod sad
   preuzima ulogu vizuelne potvrde, samo na stavci koja je stvarno nova. */
#lista-gradova li.pogodjen {
  border-left: 3px solid var(--akcenat);
  padding-left: 8px;
}

/* Kratak "bljesak" kad se lista automatski skroluje do naselja
   (posle pretrage ili 🎲 Nasumično) - potvrđuje gde je stavka sletela. */
@keyframes istaknutoBljesak {
  0%   { background: rgba(232, 98, 42, 0.35); border-radius: 6px; }
  100% { background: transparent; }
}
#lista-gradova li.istaknuto-skrol {
  animation: istaknutoBljesak 1.5s ease-out;
}

.p-rang {
  font-size: 10px;
  color: #7e9bc0;
  font-weight: 600;
  min-width: 20px;
  flex-shrink: 0;
  text-align: right;
}

.p-ime {
  flex: 1;
  font-weight: 600;
  color: #aac4e4;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-broj {
  font-size: 10px;
  color: #7e9bc0;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

#lista-gradova li.pogodjen .p-ime  { color: #8cc0ff; }
#lista-gradova li.pogodjen .p-rang { color: #6ba8f0; }
#lista-gradova li.pogodjen .p-broj { color: #6f93c4; }

#lista-gradova li.propusten .p-ime {
  color: #8aa6cc;
  font-weight: 400;
}
#lista-gradova li.propusten .p-rang { color: #7892b6; }

/* ===== REZULTAT OVERLAY ===== */
#rezultat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.82);
  backdrop-filter: blur(6px);
  z-index: 200;
  justify-content: center;
  align-items: center;
}

#rezultat-panel {
  background: #162035;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 40px 48px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.75);
  min-width: 300px;
  max-width: 380px;
  text-align: center;
}

#rezultat-panel h2 {
  font-size: 11px;
  font-weight: 600;
  color: #3a5070;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: none;
  padding-bottom: 0;
}

#rezultat-score {
  font-size: 22px;
  font-weight: 700;
  color: #c8d8f0;
  margin-bottom: 4px;
}

#rezultat-postotak {
  font-size: 60px;
  font-weight: 800;
  color: #4a82e0;
  line-height: 1;
  margin-bottom: 24px;
}

#rezultat-razdelnik {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 0 16px;
}

#rezultat-detalji {
  font-size: 12px;
  color: #3a5070;
  margin-bottom: 6px;
}

#rezultat-vs-prosek {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 28px;
}

#rezultat-vs-prosek.iznad-proseka { color: #3dba78; }
#rezultat-vs-prosek.ispod-proseka { color: #d06050; }
#rezultat-vs-prosek.na-proseku    { color: #c49020; }

#rezultat-promasaji { display: none; text-align: left; margin: 0 0 18px; }
#rezultat-promasaji h3 { font-size: 10.5px; font-weight: 700; color: #3a5070; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
.rp-red { font-size: 12px; color: #b9cbe8; background: rgba(255,255,255,0.05); border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; line-height: 1.4; }
.rp-red b { color: var(--akcenat); }

#rezultat-dugmici { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
#rezultat-dugmici button { padding: 11px 18px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; transition: all 0.2s ease; font-family: inherit; font-size: 14px; }
#dugme-pogledaj-rezultat { background: rgba(255,255,255,0.08); color: #cdd9ea; }
#dugme-pogledaj-rezultat:hover { background: rgba(255,255,255,0.15); }
#dugme-ponovi { background: var(--akcenat); color: #1a1200; }
#dugme-ponovi:hover { background: var(--akcenat-svetli); }
#dugme-ponovi:active { transform: scale(0.97); }

/* ===== RESPONSIVE ===== */
@media (max-width: 920px) {
  #glavni-sadrzaj {
    flex-direction: column;
    align-items: center;
  }

  #leva-strana {
    width: 100%;
    max-width: none;
    height: auto;
  }

  #bocni-panel {
    width: 100%;
    max-width: 600px;
    max-height: 360px;
  }

  #bedzevi-kolona {
    width: 100%;
    max-width: 600px;
    height: auto;
  }
}

h1 {
  color: #f0f6ff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
#podnaslov {
  color: #7f9ed0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
#opis-igre {
  color: #c4d6f0;
  font-size: 15px;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}
#opis-igre .opis-savet {
  display: block;
  margin-top: 8px;
  color: #8fb0d8;
  font-size: 14px;
  font-style: italic;
}

/* Samo-stojeći, suptilan savet na igra-istrazi.html/igra-nabroj.html - h1,
   podnaslov i glavni opis su uklonjeni sa tih stranica (ostaju samo na
   početnoj), pa ovaj hint sad stoji sam, stišan i manje upadljiv. */
/* Savet živi u header redu (#app-header-red), u ravni sa "← Početna" (levo)
   i bedž brojačem (desno) - centriran između njih, iznad mape. */
#samo-savet {
  margin: 0;
  color: #7e97ba;
  font-size: 12.5px;
  font-style: italic;
  white-space: nowrap;
  opacity: 0.85;
}
@media (max-width: 700px) {
  #samo-savet { white-space: normal; text-align: center; font-size: 12px; }
}

/* =======================================================
   PROZORČIĆ SA DETALJIMA O GRADU
   Dodati na KRAJ postojećeg stil.css
   ======================================================= */

#detalji-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 14, 28, 0.72);
  display: none; align-items: flex-start; justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
  box-sizing: border-box;
  z-index: 1000; backdrop-filter: blur(3px);
  transition: opacity 0.25s ease;
}
#detalji-overlay.vidljiv { display: flex; }

#detalji-overlay:not(.vidljiv) #detalji-modal { transform: scale(0.96); opacity: 0; }
#detalji-overlay.vidljiv #detalji-modal { transform: scale(1); opacity: 1; }

#detalji-modal {
  position: relative;
  background: #0f1d33; color: #dce8f8;
  width: min(1040px, 94vw);
  margin: auto; /* centrira kad stane; kad ne stane, overlay iznad skroluje ceo prozorčić */
  flex-shrink: 0;
  border-radius: 16px; border: 1px solid #2c4569;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: detaljiUlaz 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
@keyframes detaljiUlaz {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* X za zatvaranje - u uglu CELOG prozorčića, van slike, uvek na istom mestu bez obzira na sadržaj headera */
#detalji-zatvori {
  position: absolute; top: 10px; right: 14px; z-index: 20;
  background: none; border: none; color: #9fb6d6; cursor: pointer; line-height: 1;
  font-size: 28px;
}
#detalji-zatvori:hover { color: #fff; }

/* ---- Header sa slikom, naslovom i grbom ---- */
#detalji-header {
  position: relative;
  display: grid; grid-template-columns: 130px 1fr 260px;
  gap: 20px; align-items: center;
  padding: 17px 26px;
  background: linear-gradient(180deg, #1c2f52 0%, #16243f 100%);
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid #2c4569;
}
#detalji-slika-wrap {
  position: relative;
  width: 260px; height: 150px;
  order: 1;
  margin-right: 20px; /* razmak od ivice modala - estetski, X više nije nad slikom */
}
#detalji-slika {
  width: 100%; height: 100%; border-radius: 10px;
  object-fit: cover; background: #0c1830;
  display: flex; align-items: center; justify-content: center;
  color: #5a7299; font-size: 12px; overflow: hidden;
  border: 1px solid #2c4569;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#detalji-slika .ph { color: #5a7299; font-size: 12px; text-align: center; padding: 8px; }

/* Zvezdica (omiljeno) - direktno u uglu SLIKE, ne headera */
#detalji-omiljeni {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  background: rgba(8, 14, 28, 0.45); border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #dce8f8; cursor: pointer; line-height: 1; font-size: 18px;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, color 0.2s ease;
}
#detalji-omiljeni:hover { background: rgba(8, 14, 28, 0.7); color: #f0a850; }

#detalji-naslovblok { min-width: 0; }
#detalji-naslov { font-size: 30px; font-weight: 700; color: #fff; margin: 0; }
#detalji-podnaslov { font-size: 14px; color: #8fb0d8; margin-top: 4px; }
#detalji-zaglavlje-info {
  display: flex; gap: 28px; margin-top: 16px; flex-wrap: wrap;
}
.zaglavlje-stavka { font-size: 13px; }
.zaglavlje-stavka .z-k { color: #8fb0d8; display: block; margin-bottom: 2px; }
.zaglavlje-stavka .z-v { color: #fff; font-size: 20px; font-weight: 700; }
.zaglavlje-stavka .z-napomena { color: #6b86ad; font-size: 11px; }

/* Kompaktna jednoredna verzija zaglavlja - samo mobilni (uključena u
   @media ispod), na desktopu skrivena. */
#detalji-zaglavlje-kratko { display: none; }
.zk-stavka {
  font-size: 11.5px; font-weight: 700; color: #dce8f8;
  background: rgba(255,255,255,0.06); border-radius: 999px;
  padding: 4px 7px; white-space: nowrap;
}
/* Pravilo: grbovi gradova se prikazuju BEZ pozadine (transparentan PNG/WebP) -
   svaki novi grb koji se dodaje treba da bude transparentan, kao i ostali. */
#detalji-grb {
  width: 130px; height: 150px; object-fit: contain;
  display: flex; align-items: center; justify-content: center;
  background: none;
  order: -1;
}
#detalji-grb img { width: 100%; height: 100%; object-fit: contain; background: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)); }
#detalji-grb .ph {
  color: #3f5a82; font-size: 11px; text-align: center;
  border: 1px dashed #2c4569; border-radius: 8px; padding: 10px; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Tabovi ---- */
#detalji-tabovi {
  position: relative;
  display: flex; gap: 2px; padding: 0 22px;
  background: #16243f; border-bottom: 1px solid #2c4569;
  overflow-x: auto;
}
#tab-pilula {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: calc(100% - 8px);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.detalji-tab {
  position: relative; z-index: 1;
  background: none; border: none; color: #8fb0d8;
  padding: 11px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.detalji-tab:hover { color: #cdd9ea; }
.detalji-tab.aktivan { color: #fff; }

/* ---- Telo / paneli ---- */
/* Bilo je height:56vh + overflow-y:auto ovde, što je teralo skrol i kad je
   sadržaj lako stao - sad se kartica prirodno prilagođava visini sadržaja,
   a #detalji-modal iznad je jedina (retko potrebna) skrol-granica. */
/* Fiksna visina - ISTA na svim tabovima (Osnovno/Istorija/Sport/itd.), umesto da
   se kartica skače u visini kad menjaš tab. 60vh je dovoljno velikodušno da
   stane najveći sadržaj na standardnom ekranu bez skrola; overflow-y je čisto
   bezbednosna mreža za retke, izuzetno duge kartice. */
#detalji-telo { padding: 16px 26px 22px; height: 60vh; overflow-y: auto; }
.detalji-panel { display: none; opacity: 0; transition: opacity 0.2s ease; }
.detalji-panel.aktivan { display: block; opacity: 1; }

/* mreža kartica unutar panela */
.detalji-mreza {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
@media (max-width: 820px) { .detalji-mreza { grid-template-columns: 1fr; } }

.detalji-kartica {
  background: #16243f; border: 1px solid #24395c;
  border-radius: 12px; padding: 13px 16px;
}
.detalji-kartica h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #6fa3e0; margin: 0 0 8px;
}
.detalji-par { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 14px; padding: 5px 0; border-bottom: 1px solid #1d3151; }
.detalji-par:last-child { border-bottom: none; }
.detalji-par .k { color: #8fb0d8; flex-shrink: 0; }
.detalji-par .v { color: #fff; font-weight: 600; text-align: right; word-break: normal; max-width: 60%; }
.detalji-par.par-centar { align-items: center; }
.detalji-par .v.tablica {
  border: 1px solid #4a6fa5; border-radius: 4px; padding: 1px 7px; font-size: 13px;
}
.detalji-cek { color: #4ec98a; font-weight: 700; }

.detalji-lista { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.detalji-opis { font-size: 14px; line-height: 1.6; color: #cdd9ea; margin: 0 0 16px; }

/* Skrol unutar "Kratak opis" (i Hronologija fallback) kutije - ranije je ovo
   postojalo SAMO u detalji_stil.css, koji se uopšte ne učitava na ovoj strani
   (samo stil.css je linkovan), pa se prikazivao neistilizovan, deblji default
   skrol umesto ovog tankog. Sad je ovde, gde se stvarno primenjuje. */
.opis-omot {
  scrollbar-width: thin;
  scrollbar-color: #3a5a8f transparent;
}
.opis-omot::-webkit-scrollbar { width: 5px; }
.opis-omot::-webkit-scrollbar-track { background: transparent; margin: 2px 0; }
.opis-omot::-webkit-scrollbar-thumb {
  background: #3a5a8f;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.opis-omot::-webkit-scrollbar-thumb:hover { background: #e8622a; }

/* red sa ikonicom (geografija) */
.geo-red { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #1d3151; }
.geo-red:last-child { border-bottom: none; }
.geo-red .k { color: #8fb0d8; flex: 0 0 42%; }
.geo-red .v { color: #fff; font-weight: 600; flex: 1; }
.geo-fauna { padding: 8px 0 2px; text-align: center; }
.geo-fauna .k { color: #8fb0d8; font-size: 14px; display: block; margin-bottom: 6px; }
.geo-fauna p { color: #cdd9ea; font-size: 13px; line-height: 1.8; margin: 0; }


/* sport: klub */
.klub-blok { margin-bottom: 14px; }
.klub-ime { font-size: 15px; font-weight: 700; color: #fff; }
.klub-info { font-size: 13px; color: #8fb0d8; margin-top: 2px; }

/* "Da li si znao" + rekord + susedna (donja traka) */
.detalji-traka { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 14px; }
@media (max-width: 820px) { .detalji-traka { grid-template-columns: 1fr; } }
.traka-kartica {
  background: rgba(255,255,255,0.02);
  border: 1px solid #24395c;
  border-left: 3px solid var(--akcenat);
  border-radius: 12px;
  padding: 13px 16px;
}
.traka-kartica h4 { margin: 0 0 8px; font-size: 14px; color: var(--akcenat-svetli); }
.traka-kartica p { margin: 0; font-size: 13px; line-height: 1.5; color: #cdd9ea; font-weight: 500; }

/* Susedna naselja - klikabilni linkovi */
.susedna-lista { margin: 0; font-size: 13px; line-height: 1.8; color: #cdd9ea; }
.sused-link {
  color: var(--akcenat);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(240,168,80,0.4);
  transition: color 0.15s ease;
}
.sused-link:hover { color: var(--akcenat-svetli); text-decoration-color: var(--akcenat-svetli); }
.sused-link.nedostupan {
  color: #6a7a92;
  cursor: default;
  text-decoration-style: dashed;
  text-decoration-color: rgba(106,122,146,0.4);
}
.sused-link.nedostupan:hover { color: #6a7a92; }
.sused-dodatak { color: #6a7a92; font-size: 0.92em; }

/* galerija placeholder */
.galerija-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.galerija-ph {
  aspect-ratio: 4/3; border-radius: 10px; background: #0c1830;
  border: 1px dashed #2c4569; display: flex; align-items: center; justify-content: center;
  color: #5a7299; font-size: 12px; text-align: center; padding: 8px;
}

/* statistika: promena stanovništva */
.stat-red { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1d3151; font-size: 14px; }
.stat-red:last-child { border-bottom: none; }
.stat-godina { color: #8fb0d8; }
.stat-broj { color: #fff; font-weight: 600; }
.stat-promena { font-size: 12px; padding: 1px 7px; border-radius: 10px; margin-left: 8px; }
.stat-rast { background: rgba(78,201,138,0.15); color: #4ec98a; }
.stat-pad  { background: rgba(232,98,42,0.15); color: #ff9166; }

/* klik na listu desno */
.lista-klik { cursor: pointer; }
.lista-klik:hover .p-ime { text-decoration: underline; }

/* ===== DODATNE KLASE (v2: bratski gradovi, klubovi, osobe, landmarks) ===== */

/* Opština: vrednost ispod ključa, centrirano */
.detalji-par-blok {
  padding: 6px 0; border-bottom: 1px solid #1d3151; text-align: center;
}
.detalji-par-blok .k { color: #8fb0d8; font-size: 14px; display: block; margin-bottom: 3px; }
.detalji-par-blok .v { color: #fff; font-weight: 600; font-size: 14px; display: block; }

/* Sport - fudbalski klubovi po horizontali, mesto za logo */
.klub-mreza { display: flex; flex-wrap: wrap; gap: 12px; }
.klub-kartica {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #1c2f52; border: 1px solid #2c4569; border-radius: 10px;
  padding: 14px 10px; width: 120px; flex: 0 0 120px; min-height: 140px;
  justify-content: flex-start; box-sizing: border-box;
}
.klub-logo, .klub-logo-ph {
  width: 64px; height: 64px; margin-bottom: 10px; border-radius: 8px; flex-shrink: 0;
}
.klub-logo { object-fit: contain; }
.klub-logo-ph {
  background: #0c1830; border: 1px dashed #345182;
  display: flex; align-items: center; justify-content: center;
}
.klub-kartica .klub-ime {
  font-size: 12px; font-weight: 600; color: #fff;
  line-height: 1.3; word-break: break-word; hyphens: auto;
}

/* Poznati ljudi - horizontalno: ime gore, slika, opis dole */
.osobe-mreza { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.osoba-kartica {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #1c2f52; border: 1px solid #2c4569; border-radius: 10px;
  padding: 12px; width: 150px; flex: 0 0 auto;
}
.osoba-ime { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.osoba-slika, .osoba-slika-ph {
  width: 96px; height: 96px; border-radius: 10px; margin-bottom: 8px;
}
.osoba-slika { object-fit: cover; }
.osoba-slika-ph {
  background: #0c1830; border: 1px dashed #345182;
  display: flex; align-items: center; justify-content: center; font-size: 32px; color: #3f5a82;
}
.osoba-opis { font-size: 12px; line-height: 1.4; color: #8fb0d8; }

/* Znamenitosti (landmarks) - horizontalno, zbijenije */
.landmark-mreza { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.landmark-kartica {
  display: flex; flex-direction: column; text-align: center;
  background: #1c2f52; border: 1px solid #2c4569; border-radius: 10px;
  padding: 10px; width: 160px; flex: 0 0 auto;
}
.landmark-slika, .landmark-slika-ph {
  width: 100%; height: 90px; border-radius: 8px; margin-bottom: 8px;
}
.landmark-slika { object-fit: cover; }
.landmark-slika-ph {
  background: #0c1830; border: 1px dashed #345182;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #3f5a82;
}
.landmark-ime { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.landmark-opis { font-size: 12px; line-height: 1.4; color: #8fb0d8; }

/* Statistika - strelica levo od broja */
.stat-desno { display: inline-flex; align-items: center; gap: 8px; }
.stat-desno .stat-promena { margin-left: 0; }

/* Lepši horizontalni scroll-bar za osobe i landmarks */
.osobe-mreza::-webkit-scrollbar, .landmark-mreza::-webkit-scrollbar { height: 8px; }
.osobe-mreza::-webkit-scrollbar-track, .landmark-mreza::-webkit-scrollbar-track { background: #0c1830; border-radius: 4px; }
.osobe-mreza::-webkit-scrollbar-thumb, .landmark-mreza::-webkit-scrollbar-thumb { background: #345182; border-radius: 4px; }
.osobe-mreza::-webkit-scrollbar-thumb:hover, .landmark-mreza::-webkit-scrollbar-thumb:hover { background: #4a6fa5; }

/* Mini-mapa (preko cele širine kartice) + koordinate u Osnovno.
   Placeholder svedena na 80px (bila 200px) - dok funkcija nije aktivna,
   nema smisla da praznina "mapa uskoro" gura ostatak kartice/skrol. */
.minimapa, .minimapa-ph {
  width: 100%; height: 80px; border-radius: 10px; margin-top: 10px;
  display: block;
}
.minimapa { object-fit: cover; border: 1px solid #2c4569; }
.minimapa-ph {
  background: #0c1830; border: 1px dashed #345182;
  display: flex; align-items: center; justify-content: center;
  color: #5a7299; font-size: 13px;
}
.minimapa-koord {
  margin-top: 8px; font-size: 13px; color: #8fb0d8;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  letter-spacing: 0.3px; text-align: center;
}

/* ===== BEDŽEVI ===== */
#bedzevi-kolona { width: 300px; flex-shrink: 0; background: #162035; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 12px 40px rgba(0,0,0,0.4); padding: 16px; height: 700px; overflow-y: auto; }
#bedzevi-kolona h2 { font-size: 16px; margin: 0 0 14px; color: #f0f6ff; }
#bedzevi-lista { display: flex; flex-direction: column; gap: 10px; }
#bedz-status-tekst { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; color: #adc2e0; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#bedz-status-broj { color: var(--akcenat); font-weight: 700; }
.bedz-kartica { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); transition: all 0.25s ease; }
.bedz-kartica:hover { transform: translateX(3px); background: rgba(255,255,255,0.06); }
.bedz-kartica .bedz-ikona { font-size: 26px; filter: grayscale(1) opacity(0.4); transition: all 0.3s ease; flex-shrink: 0; }
.bedz-info { flex: 1; min-width: 0; }
.bedz-naziv { font-size: 13px; font-weight: 600; color: #cdd9ea; }
.bedz-opis { font-size: 11px; color: #6a7a92; margin: 1px 0 5px; }
.bedz-mini-traka { height: 5px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.bedz-mini-popuna { height: 100%; background: linear-gradient(90deg, var(--akcenat), var(--akcenat-svetli)); border-radius: 99px; transition: width 0.4s ease; }
.bedz-status { font-size: 12px; color: #6a7a92; font-weight: 700; flex-shrink: 0; }
.bedz-kartica.osvojen { background: rgba(240,168,80,0.12); border-color: var(--akcenat); box-shadow: 0 4px 16px rgba(240,168,80,0.15); }
.bedz-kartica.osvojen .bedz-ikona { filter: none; transform: scale(1.1); }
.bedz-kartica.osvojen .bedz-naziv { color: var(--akcenat-svetli); }
.bedz-kartica.osvojen .bedz-status { color: var(--akcenat); }

/* ===== MOD PANEL ===== */
#mod-panel { position: relative; width: 100%; box-sizing: border-box; }
#dugme-mod-meni {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, rgba(240,168,80,0.18), rgba(240,168,80,0.08));
  border: 1.5px solid rgba(240,168,80,0.4);
  border-radius: 10px;
  color: var(--akcenat-svetli);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
#dugme-mod-meni:hover {
  background: linear-gradient(135deg, rgba(240,168,80,0.28), rgba(240,168,80,0.14));
  border-color: var(--akcenat);
  transform: translateY(-1px);
}
#mod-meni {
  margin-top: 8px; padding: 14px; background: linear-gradient(145deg, rgba(28,47,82,0.9), rgba(18,28,48,0.9));
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); width: 100%; box-sizing: border-box;
}
#mod-meni.sakriven { display: none; }
.mod-red { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; width: 100%; box-sizing: border-box; }
.mod-red label { font-size: 12px; color: #8fb0d8; font-weight: 600; }
.mod-red select {
  flex: 1; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 10px; font-size: 13px;
  background: #1c2f52; color: #f0f6ff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 9px;
  cursor: pointer; transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23f0a850' d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.mod-red select:hover { border-color: var(--akcenat); background-color: #233a5e; }
.mod-red select:focus { outline: none; border-color: var(--akcenat); box-shadow: 0 0 0 3px rgba(240,168,80,0.15); }
.mod-red select option { background: #1c2f52; color: #f0f6ff; padding: 8px; }
#dugme-pokreni-mod {
  width: 100%; padding: 10px; font-size: 13px; font-family: inherit; background: var(--akcenat); color: #1a1200;
  border: none; border-radius: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.2s ease; letter-spacing: 0.3px;
}
#dugme-pokreni-mod:hover { background: var(--akcenat-svetli); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(240,168,80,0.3); }
#dugme-pokreni-mod:active { transform: translateY(0); }
#tajmer-prikaz {
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; background: linear-gradient(145deg, rgba(240,168,80,0.12), rgba(240,168,80,0.04));
  border: 1px solid rgba(240,168,80,0.25); border-radius: 14px;
  font-size: 26px; font-weight: 800; color: var(--akcenat);
  font-family: ui-monospace, "Cascadia Code", monospace;
  transition: all 0.3s ease;
}
#tajmer-prikaz.sakriven { display: none; }
#tajmer-prikaz.upozorenje {
  color: #ff6b6b; border-color: rgba(255,107,107,0.4); background: linear-gradient(145deg, rgba(255,107,107,0.15), rgba(255,107,107,0.04));
  animation: tajmer-puls 0.6s ease infinite;
}
@keyframes tajmer-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

#dugme-zvuk {
  position: absolute !important;
  bottom: 12px;
  left: 12px;
  top: auto;
  right: auto;
  width: 30px;
  height: 30px;
  background: rgba(10,18,32,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  font-size: 14px;
  color: #8fb0d8;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#dugme-zvuk:hover { opacity: 1; background: rgba(10,18,32,0.9); }

/* ===== ODBROJAVANJE OVERLAY ===== */
#odbrojavanje-overlay {
  position: absolute; inset: 0; border-radius: 16px;
  background: rgba(10,19,34,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 45; pointer-events: none; transition: opacity 0.3s ease;
}
#odbrojavanje-overlay.sakriven { display: none; }
#odbrojavanje-overlay.nevidljiv { opacity: 0; }
#odbrojavanje-broj {
  font-size: 58px; font-weight: 900; color: #fff;
  font-family: "Satoshi", -apple-system, sans-serif;
  text-align: center; padding: 0 18px; line-height: 1.1;
  text-shadow: 0 3px 22px rgba(0,0,0,0.55);
}
@keyframes odbrojavanje-puls {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.odbrojavanje-anim { animation: odbrojavanje-puls 0.5s ease; }

.mod-red.sakriven { display: none; }

#oblast-info {
  position: absolute;
  transform: translateX(-50%);
  z-index: 6;
  background: rgba(28,47,82,0.92);
  border: 1px solid rgba(240,168,80,0.3);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  color: #f0f6ff;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: top 0.3s ease, left 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
#oblast-info.sakriven { display: none; }
#oblast-info-tekst::before { content: "📍 "; }
#oblast-info-x {
  background: rgba(255,255,255,0.1); border: none; color: #f0f6ff;
  width: 18px; height: 18px; border-radius: 50%; font-size: 13px;
  line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background 0.2s ease;
}
#oblast-info-x:hover { background: rgba(255,255,255,0.25); }

.zakljucano-dugme {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
.zakljucano-dugme:hover::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1c2f52;
  color: #f0f6ff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  width: 180px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 999;
  pointer-events: none;
}

/* ===== POZDRAVNI MODAL ===== */
#pozdrav-overlay { position: fixed; inset: 0; background: rgba(5,10,20,0.85); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
#pozdrav-overlay.vidljiv { display: flex; }
@keyframes pozdravUlaz { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
#pozdrav-modal {
  background: linear-gradient(160deg, rgba(40,60,100,0.55), rgba(15,26,46,0.55));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px; padding: 38px 42px; text-align: center; max-width: 500px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  animation: pozdravUlaz 0.5s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
}
#pozdrav-modal::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}
#pozdrav-ikona { font-size: 50px; margin-bottom: 10px; position: relative; }
#pozdrav-naslov { font-size: 23px; font-weight: 800; color: #fff; margin: 6px 0 14px; line-height: 1.3; letter-spacing: -0.3px; position: relative; }
#pozdrav-podnaslov { font-size: 15px; color: #cdd9ea; line-height: 1.55; margin-bottom: 26px; position: relative; }
#pozdrav-modovi { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; position: relative; }
.pozdrav-mod-red { display: flex; align-items: center; gap: 14px; text-align: left; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px 16px; transition: all 0.25s ease; }
.pozdrav-mod-red:hover { background: rgba(255,255,255,0.1); border-color: rgba(240,168,80,0.3); }
.pozdrav-mod-ikona { font-size: 26px; flex-shrink: 0; }
.pozdrav-mod-tekst { font-size: 13.5px; color: #e0e8f4; line-height: 1.5; }
.pozdrav-mod-tekst b { color: var(--akcenat-svetli); font-weight: 800; }
#pozdrav-kreni { background: linear-gradient(135deg, var(--akcenat), var(--akcenat-svetli)); color: #1a1200; border: none; border-radius: 14px; padding: 15px 32px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.25s ease; position: relative; box-shadow: 0 6px 24px rgba(240,168,80,0.35); }
#pozdrav-kreni:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(240,168,80,0.5); }
/* ===== TUTORIJAL - IZBOR MODA ===== */
.tut-overlay { position: fixed; inset: 0; background: rgba(5,10,20,0.85); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.tut-overlay.vidljiv { display: flex; }
.tut-modal { background: linear-gradient(160deg, #1c2f52, #0f1a2e); border: 1px solid rgba(240,168,80,0.3); border-radius: 20px; padding: 32px 36px; text-align: center; max-width: 540px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); animation: pozdravUlaz 0.4s cubic-bezier(0.22,1,0.36,1); }
.tut-modal h2 { color: #f0f6ff; font-size: 22px; margin: 0 0 22px; }
#izbor-moda-kartice { display: flex; gap: 16px; }
.izbor-mod-kartica { flex: 1; background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 18px; cursor: pointer; transition: all 0.25s ease; }
.izbor-mod-kartica:hover { border-color: var(--akcenat); background: rgba(240,168,80,0.1); transform: translateY(-3px); }
.izbor-mod-ikona { font-size: 40px; margin-bottom: 10px; }
.izbor-mod-naslov { font-size: 18px; font-weight: 800; color: #f0f6ff; margin-bottom: 8px; }
.izbor-mod-opis { font-size: 13px; color: #adc2e0; line-height: 1.5; }

/* ===== SPOTLIGHT TUR ===== */
#spotlight-overlay { position: fixed; inset: 0; z-index: 1001; display: none; pointer-events: none; }
#spotlight-overlay.vidljiv { display: block; }
#spotlight-rupa { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(5,10,20,0.82); border: 2px solid var(--akcenat); transition: all 0.4s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
#spotlight-balon { position: absolute; background: #1c2f52; border: 1px solid rgba(240,168,80,0.3); border-radius: 14px; padding: 16px 18px; max-width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); pointer-events: auto; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); }
#spotlight-tekst { font-size: 14px; color: #f0f6ff; line-height: 1.5; margin-bottom: 14px; }
#spotlight-dugmici { display: flex; gap: 8px; justify-content: flex-end; }
#spotlight-dugmici button { padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; font-size: 13px; transition: all 0.2s ease; }
#spotlight-preskoci { background: rgba(255,255,255,0.08); color: #adc2e0; }
#spotlight-preskoci:hover { background: rgba(255,255,255,0.15); }
#spotlight-dalje { background: var(--akcenat); color: #1a1200; }
#spotlight-dalje:hover { background: var(--akcenat-svetli); }

/* ===== HOVER NATPIS NA MAPI (okrug/oblast) ===== */
#okrug-hover-natpis {
  position: fixed;
  font-size: 13px;
  color: rgba(240,246,255,0.9);
  background: rgba(10,18,32,0.75);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 500;
  pointer-events: none;
  display: none;
  z-index: 50;
  transform: translate(-50%, -130%);
}

/* ===== NAVIGACIJSKE STRELICE U DETALJI MODALU ===== */
.nav-strelica {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  z-index: 10;
}
/* Sve četiri strelice su KRUGOVI (ikona je krug, ime stoji van njega) */
.nav-ikona {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #1c2f52;
  border: 1px solid rgba(240,168,80,0.3);
  border-radius: 50%;
  font-size: 15px; color: var(--akcenat); line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-strelica:hover .nav-ikona {
  background: rgba(240,168,80,0.2);
  border-color: var(--akcenat);
}
/* Ime naselja - malim slovima kakvo jeste (prvo veliko, bez transformacije) */
/* Ime naselja je APSOLUTNO pozicionirano => ne utiče na veličinu dugmeta, pa
   ikona (krug) uvek stoji na istom mestu bez obzira na dužinu naziva.
   pointer-events:none da naziv ne hvata hover ni klik. */
.nav-naziv {
  position: absolute;
  font-size: 10.5px;
  font-weight: 600;
  color: #b9cbe8;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Dugme = samo krug (36px). Naziv lebdi pored/ispod i ne pomera krug. */
/* GORE/DOLE: krug fiksno centriran; ime DESNO od kruga */
.nav-gore  { top: -44px;    left: 50%; transform: translateX(-50%); }
.nav-dole  { bottom: -44px; left: 50%; transform: translateX(-50%); }
.nav-gore .nav-naziv, .nav-dole .nav-naziv {
  left: calc(100% + 7px); top: 50%; transform: translateY(-50%);
}

/* LEVO/DESNO: krug fiksno centriran vertikalno; ime ISPOD kruga, centrirano */
.nav-levo  { right: 100%; margin-right: 8px; top: 50%; transform: translateY(-50%); }
.nav-desno { left: 100%;  margin-left: 8px;  top: 50%; transform: translateY(-50%); }
.nav-levo .nav-naziv, .nav-desno .nav-naziv {
  top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  text-align: center;
}

/* Na uskim ekranima nema prostora sa strane - sakrij levo/desno (gore/dole i
   tastatura rade i dalje). JS upisuje inline style="display:flex" na ove
   strelice pri svakom renderu, pa samo !important ovde pobeđuje. */
@media (max-width: 900px) {
  .nav-levo, .nav-desno { display: none !important; }
}

#mali-rezime-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--akcenat), var(--akcenat-svetli));
  color: #1a1200;
  padding: 14px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 30px rgba(240,168,80,0.4);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  z-index: 500;
}
#mali-rezime-toast.vidljiv {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === AUTOCOMPLETE PADAJUĆI MENI === */
#istrazi-pretraga-wrap { position: relative; flex: 1; min-width: 0; }
#istrazi-autokompletiranje {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #16243f; border: 1px solid rgba(240,168,80,0.25);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  max-height: 280px; overflow-y: auto; z-index: 60; display: none;
}
#istrazi-autokompletiranje.vidljiv { display: block; }
.ac-stavka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px;
  color: #dce8f8; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ac-stavka:last-child { border-bottom: none; }
.ac-stavka:hover, .ac-stavka.ac-istaknuto { background: rgba(240,168,80,0.14); }
.ac-stavka.ac-vec-otkriveno { opacity: 0.55; }
.ac-ime mark { background: none; color: #f0a850; font-weight: 800; padding: 0; }
.ac-detalj { font-size: 11.5px; color: #6a86ac; flex-shrink: 0; white-space: nowrap; }
.ac-otkriveno-znak { font-size: 12px; color: #4ec98a; }
.ac-prazno { padding: 14px; font-size: 13px; color: #6a86ac; text-align: center; }

/* ===================================================================
   GLAVNA NAVIGACIJA - glassmorphism navbar, deljen na index.html,
   igra-istrazi.html i igra-nabroj.html. Plutajuća, zaobljena, providna
   (backdrop-filter blur) traka pri vrhu, sa brendom levo i linkovima
   ka svim opcijama sa početne stranice desno. "Uskoro" modovi su
   prikazani ali neaktivni (siva, bez klika) - dosledno karticama na
   landing stranici, umesto da ih navigacija sakrije.
   =================================================================== */
#glavna-navigacija {
  position: sticky;
  top: 6px;
  z-index: 900;
  margin: 0 auto 8px;
  max-width: 560px;
  width: calc(100% - 28px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 6px 10px;
  /* Znatno providnije - cilj je da se sadržaj ispod navbara vidi kroz njega
     dok se skroluje (efekat "stakla"), ne solidna pozadina. */
  background: rgba(20, 32, 56, 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  box-sizing: border-box;
  /* overflow + translateZ: bez ovoga backdrop-filter pri zumu ume da iscrta
     kvadratne ivice ispod zaobljenih linkova/pilule */
  overflow: hidden;
  transform: translateZ(0);
}

.nav-brend {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
.nav-brend:hover .nav-brend-ikona { transform: scale(1.06); }
/* Samo logo (bez teksta "Srbopedija") - kompaktnije, manje razmaka do linkova */
.nav-brend .nav-brend-ikona {
  width: 26px; height: 26px;
  display: block;
  object-fit: contain;
  background: none;
  border-radius: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: transform 0.15s ease;
}

.nav-linkovi {
  position: relative;
  display: flex; align-items: center; gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}
.nav-linkovi::-webkit-scrollbar { display: none; }

/* Klizeći "pill" koji prati hover od linka do linka - glatki prelaz,
   isti princip kao tab-pilula u detalji karticama. */
.nav-pilula {
  position: absolute;
  top: 2px; bottom: 2px; left: 0; width: 0;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  transition: left 0.28s cubic-bezier(.22, 1, .36, 1), width 0.28s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 0;
}

.nav-link {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: #b9cbe8;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(.3,1.4,.5,1);
  flex-shrink: 0;
  transform: translate(var(--mx, 0), var(--my, 0));
  will-change: transform;
}
a.nav-link:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-link.nav-aktivna {
  background: var(--akcenat);
  color: #fff;
  box-shadow: 0 4px 14px rgba(232, 98, 42, 0.4);
}
.nav-link.nav-uskoro {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 780px) {
  #glavna-navigacija { border-radius: 20px; top: 8px; margin: 8px auto 14px; padding: 8px; }
  .nav-brend span:not(.nav-brend-ikona) { display: none; }
  .nav-link { padding: 7px 11px; font-size: 12px; }
}

/* ===== RANG LISTA (igra-nabroj, desna kolona) ===== */
#rang-podnaslov {
  margin: -4px 0 10px;
  font-size: 11.5px;
  color: #6d87ab;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
#rang-lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
#rang-lista li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12.5px;
}
#rang-lista li:nth-child(odd) { background: rgba(255,255,255,0.025); }
.rang-poz  { flex: 0 0 26px; font-weight: 800; color: #8fb0d8; font-size: 12px; }
.rang-rez  { flex: 1 1 auto; color: #dce8f8; font-weight: 700; }
.rang-rez em { font-style: normal; font-weight: 600; color: #6d87ab; font-size: 11.5px; }
.rang-datum { flex: 0 0 auto; font-size: 10.5px; color: #5a7299; font-variant-numeric: tabular-nums; }
/* Najnovija partija - narandžast obrub + kratak bljesak da igrač vidi gde je sleteo */
@keyframes rangBljesak {
  0%   { background: rgba(232,98,42,0.28); }
  100% { background: rgba(232,98,42,0.07); }
}
#rang-lista li.rang-nova {
  border-color: rgba(232,98,42,0.45);
  background: rgba(232,98,42,0.07);
  animation: rangBljesak 1.6s ease-out;
}
#rang-prazno { font-size: 12.5px; color: #5a7299; line-height: 1.5; }

/* ===== BEDŽ POP-UP (toast pri dnu ekrana) ===== */
#bedz-popup {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 11000;
  display: flex; align-items: center; gap: 14px;
  max-width: min(430px, 92vw);
  padding: 14px 20px;
  background: linear-gradient(145deg, #1c2f52, #16243f);
  border: 1px solid rgba(232,98,42,0.55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 30px rgba(232,98,42,0.25);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
#bedz-popup.vidljiv { transform: translateX(-50%) translateY(0); }
#bedz-popup .bp-ikona {
  font-size: 34px; flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(232,98,42,0.5));
  animation: bpSkok 0.6s cubic-bezier(.22,1.6,.36,1);
}
@keyframes bpSkok { from { transform: scale(0.3) rotate(-14deg); } to { transform: scale(1) rotate(0); } }
#bedz-popup .bp-naslov { font-size: 14px; font-weight: 800; color: #fff; margin: 0 0 3px; }
#bedz-popup .bp-naslov em { font-style: normal; color: var(--akcenat); }
#bedz-popup .bp-poruka { font-size: 12.5px; color: #b9cbe8; line-height: 1.45; margin: 0; }

/* ===================================================================
   MOBILNI PRIKAZ - deljena pravila za sve stranice (samo @media,
   desktop izgled ostaje netaknut). Pokriva: navigaciju, SVG mapu
   (skalira na širinu ekrana bez sečenja/horizontalnog skrola),
   dodirne ciljeve za glavne kontrole i opšti raspored.
   =================================================================== */
@media (max-width: 760px) {
  body { padding: 8px 12px 40px; }

  /* ---- Navigacija: veći dodirni ciljevi; ostaje horizontalno skrolabilna
     kad ne stane sve (9 linkova), ali sa "fade" nagoveštajem na desnoj ivici
     da ima još sadržaja za skrol - bez toga korisnik ne zna da gura. Aktivna
     stranica se automatski skroluje u vidokrug (vidi JS ispod, po stranici). ---- */
  #glavna-navigacija { width: calc(100% - 12px); padding: 6px 8px; gap: 8px; }
  .nav-linkovi {
    gap: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .nav-link { padding: 11px 13px; font-size: 12.5px; min-height: 20px; box-sizing: border-box; }
  .nav-brend .nav-brend-ikona { width: 24px; height: 24px; }

  /* ---- SVG mapa: skalira na širinu kontejnera, visina prati viewBox
     razmeru (600:700) preko intrinsic aspect ratio-a, bez fiksnih px ---- */
  #mapa-kontejner {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  #mapa {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- Glavni dvokolonski raspored (Istraži/Nabroj/Opštine) - već se
     slaže u kolonu na 920px (vidi gore), ovde samo fino podešavanje ---- */
  #leva-strana { padding: 12px; gap: 6px; }

  /* ---- Veći dodirni ciljevi (min ~44px) za glavne kontrole pretrage/filtera ---- */
  #istrazi-pretraga, #polje-za-pretragu,
  .mod-red select,
  #istrazi-pretraga-dugme, #dugme-pretraga,
  #istrazi-dugmici button,
  .rezim-tab, .op-mod-tab {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ---- Header red (← Početna / savet / bedž) - dozvoli prelom umesto
     sečenja teksta ili guranja u horizontalni skrol. #app-header-red se
     ponavlja (nepromenjen) u <style> svake stranice POSLE stil.css, pa
     justify-content mora sa !important da bi ovde pobedio. ---- */
  #app-header-red { flex-wrap: wrap !important; justify-content: center !important; gap: 6px; text-align: center; }
  #app-header-red #pocetna-link { order: 1; }
  #app-header-red #samo-savet { order: 3; width: 100%; }
  #app-header-red > *:nth-child(2):not(#samo-savet) { order: 2; }

  /* ---- Detalji modal (klik na naselje) - header ima 3 fiksne/skoro-fiksne
     kolone (130px grb + 1fr naslov + 260px slika) koje ne staju na uskom
     ekranu - slažemo u jednu kolonu: grb centriran, pa naslov/info (manje
     slovo), pa slika, pa tabovi (već horizontalni skrol ispod headera).
     Osnovne info (stanovnici/površina/gustina/rang) su na desktopu veliki
     stubići koji na mobilnom oduzimaju previše visine - zamenjuju se jednim
     kompaktnim redom sa skraćenim brojevima (#detalji-zaglavlje-kratko,
     popunjava JS u otvoriDetalje(), .zk-stavka stil ispod). ---- */
  #detalji-overlay { padding: 10px; }
  #detalji-modal { width: 100%; }
  #detalji-header {
    grid-template-columns: 1fr;
    padding: 16px 16px 14px;
    gap: 8px;
  }
  #detalji-slika-wrap { width: 100%; height: 180px; margin-right: 0; }
  #detalji-grb { width: 76px; height: 88px; justify-self: center; }
  #detalji-naslovblok { text-align: center; }
  #detalji-naslov { font-size: 21px; }
  #detalji-podnaslov { font-size: 12.5px; }
  #detalji-zaglavlje-info { display: none; }
  #detalji-zaglavlje-kratko {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px; margin-top: 8px;
  }
  #detalji-tabovi { padding: 0 12px; }
  .detalji-tab { padding: 10px 12px; font-size: 12.5px; }
  #detalji-telo { padding: 14px 16px 18px; height: 62vh; }

  /* Strelice ka susednim naseljima - na desktopu levo/desno "vire" van
     modala (nema mesta za to na mobilnom, zato su ranije bile display:none).
     Ovde umesto toga postaju kompaktan red od 4 dugmeta u gornjem levom
     uglu (simetrično sa X dugmetom za zatvaranje u gornjem desnom uglu),
     uvek vidljive, bez obzira na visinu/skrol modala. */
  .nav-strelica {
    position: absolute !important;
    top: 10px !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 15;
  }
  #nav-sever  { left: 12px !important; }
  #nav-jug    { left: 46px !important; }
  #nav-zapad  { left: 80px !important; display: flex !important; }
  #nav-istok  { left: 114px !important; display: flex !important; }
  .nav-naziv { display: none; }
  .nav-ikona { width: 28px; height: 28px; font-size: 12px; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  #opis-igre { font-size: 13.5px; }
}