/* Javni dio natjecanja — zajednička navigacija.
 *
 * Na mobitelu je traka pri dnu, gdje je palac, i uvijek je vidljiva.
 * Na računalu su to kartice ispod naslova. Isti su to elementi, samo
 * drukčije smješteni, pa se ne uči dvaput.
 */

/* naslov natjecanja */
.jn-vrh {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 14px;
}
.jn-natrag {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; text-decoration: none;
  color: var(--tinta-blijeda); border: 1px solid var(--rub);
  border-radius: 10px; background: #fff;
}
.jn-natrag:hover { color: var(--tinta); border-color: var(--tinta-blijeda); }
.jn-naslov { min-width: 0; }
.jn-naslov h1 {
  margin: 0; font-size: 20px; font-weight: 650; line-height: 1.25;
}
.jn-podnaslov { font-size: 13px; color: var(--tinta-blijeda); margin-top: 3px; }
.jn-uzivo {
  color: var(--crvena); font-weight: 650;
  padding-left: 14px; position: relative;
}
.jn-uzivo::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3px; border-radius: 50%;
  background: var(--crvena); animation: jn-kuca 1.6s ease-in-out infinite;
}
@keyframes jn-kuca { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* kartice */
.jn-kartice { display: flex; gap: 6px; margin-bottom: 18px; }
.jn-kartica {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 12px;
  border: 1px solid var(--rub); border-radius: 10px; background: #fff;
  color: var(--tinta); text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.jn-kartica svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.jn-kartica:hover { border-color: var(--tinta-blijeda); }
.jn-kartica.tu {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}
.jn-tocka {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crvena);
  animation: jn-kuca 1.6s ease-in-out infinite;
}
.jn-kartica.tu .jn-tocka { background: #ff6b6b; }
.jn-znak {
  font-style: normal; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--zelena); color: #fff;
}

/* ---------- mobitel: traka pri dnu ---------- */
@media (max-width: 700px) {
  body.javno { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  .jn-naslov h1 { font-size: 17px; }

  .jn-kartice {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    margin: 0; gap: 0;
    background: #fff;
    border-top: 1px solid var(--rub);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .jn-kartica {
    flex-direction: column; gap: 3px;
    min-height: 54px; padding: 6px 4px;
    border: 0; border-radius: 10px; background: transparent;
    font-size: 11px; font-weight: 600; color: var(--tinta-blijeda);
  }
  .jn-kartica svg { width: 22px; height: 22px; }
  .jn-kartica.tu { background: #f3f4f6; color: var(--tinta); }
  .jn-tocka, .jn-znak {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
  }
  .jn-znak { margin-left: 4px; }
}