/* ==========================================================================
   Školica šaha Tašić — glavni stil
   ========================================================================== */

:root {
  /* Osnovna paleta — inspirisana šahovskom tablom */
  --boja-krem: #faf6ee;
  --boja-krem-tamnija: #f0e8d8;
  --boja-tamna: #2b1d14;
  --boja-tamna-2: #3d2c1e;
  --boja-tekst: #2b1d14;
  --boja-tekst-svetliji: #5c4a3a;
  --boja-belo: #ffffff;

  /* Boje po uzrasnim grupama (kao "rangovi") */
  --boja-polaznici: #5a9e4c;
  --boja-polaznici-tamna: #3f7536;
  --boja-pioniri: #3a7ec7;
  --boja-pioniri-tamna: #2a5c92;
  --boja-kadeti: #8a52ad;
  --boja-kadeti-tamna: #6a3c87;
  --boja-omladinci: #b5453f;
  --boja-omladinci-tamna: #8c332e;

  --boja-akcenat: #d4a13d;
  --boja-akcenat-tamna: #b3841f;

  /* Brend boje (usklađeno sa zvaničnim logom/bannerom) */
  --boja-brend-navy: #0d1b3d;
  --boja-brend-navy-2: #16295e;
  --boja-brend-zlatna: #d4af37;
  --boja-brend-zlatna-tamna: #b8942a;

  /* Cyan — za "upaljena" dugmad u glavnom meniju */
  --boja-cyan-svetla: #a5f9ff;
  --boja-cyan: #22d3ee;
  --boja-cyan-tamna: #0e7490;

  --senka: 0 4px 14px rgba(43, 29, 20, 0.12);
  --senka-jaka: 0 10px 30px rgba(43, 29, 20, 0.18);
  --radijus: 16px;

  --font-naslov: "Poppins", "Segoe UI", sans-serif;
  --font-tekst: "Nunito", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--boja-tekst);
  background: var(--boja-krem);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-naslov);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Dugmad ---------- */

.dugme {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-naslov);
  font-size: 1rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: none;
  cursor: pointer;
  transform: translateY(0);
}

.dugme-primarno {
  background: linear-gradient(180deg, #e9c169 0%, var(--boja-akcenat) 55%, var(--boja-akcenat-tamna) 100%);
  color: var(--boja-tamna);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 5px 0 var(--boja-akcenat-tamna),
    0 8px 18px rgba(212,161,61,0.45);
}

.dugme-primarno:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 7px 0 var(--boja-akcenat-tamna),
    0 12px 24px rgba(212,161,61,0.55);
}
.dugme-primarno:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 0 var(--boja-akcenat-tamna),
    0 4px 10px rgba(212,161,61,0.4);
}

.dugme-sekundarno {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  color: var(--boja-belo);
  border: 2px solid var(--boja-belo);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 5px 0 rgba(255,255,255,0.3),
    0 8px 18px rgba(255,255,255,0.15);
}

.dugme-sekundarno:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.1));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 7px 0 rgba(255,255,255,0.35),
    0 12px 24px rgba(255,255,255,0.2);
}
.dugme-sekundarno:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 0 rgba(255,255,255,0.3),
    0 4px 10px rgba(255,255,255,0.12);
}

.dugme-obris {
  background: linear-gradient(180deg, rgba(43,29,20,0.08), rgba(43,29,20,0.02));
  border: 2px solid currentColor;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 5px 0 rgba(43,29,20,0.18),
    0 8px 16px rgba(43,29,20,0.12);
}

.dugme-obris:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 7px 0 rgba(43,29,20,0.22),
    0 12px 20px rgba(43,29,20,0.16);
}
.dugme-obris:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 2px 0 rgba(43,29,20,0.18),
    0 4px 8px rgba(43,29,20,0.1);
}

/* ---------- Zaglavlje / navigacija ---------- */

.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--boja-belo);
  box-shadow: 0 2px 10px rgba(43,29,20,0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--boja-tamna);
}

.logo-slika { height: 46px; width: auto; display: block; }

.logo-slika-footer { height: 40px; width: auto; display: inline-block; vertical-align: middle; margin-right: 4px; }

.nav-linkovi {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-linkovi a { white-space: nowrap; }

.nav-linkovi a:not(.nav-cta) {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-family: var(--font-naslov);
  font-size: 0.86rem;
  color: var(--boja-tekst-svetliji);
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(43,29,20,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.nav-linkovi a:not(.nav-cta):hover,
.nav-linkovi a.aktivan {
  color: #ffffff;
  background: linear-gradient(180deg, var(--boja-cyan-svetla) 0%, var(--boja-cyan) 45%, var(--boja-cyan-tamna) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 3px 0 var(--boja-cyan-tamna),
    0 6px 16px rgba(34,211,238,0.5);
}

/* ---------- Prekidač jezika / pisma ---------- */

.jezik-prekidac {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(43,29,20,0.07);
  box-shadow: inset 0 1px 2px rgba(43,29,20,0.12);
}

.jezik-prekidac button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--boja-tekst-svetliji);
  padding: 7px 9px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.jezik-prekidac button:hover { color: var(--boja-cyan-tamna); }

.jezik-prekidac button.aktivan-jezik {
  color: #ffffff;
  background: linear-gradient(180deg, var(--boja-cyan-svetla) 0%, var(--boja-cyan) 45%, var(--boja-cyan-tamna) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 2px 0 var(--boja-cyan-tamna),
    0 3px 10px rgba(34,211,238,0.45);
}

html.jezik-cir { --font-naslov: "Nunito", "Segoe UI", sans-serif; }

@media (min-width: 1361px) {
  html.jezik-cir .nav-linkovi a:not(.nav-cta) { padding: 9px 11px; font-size: 0.84rem; }
  html.jezik-cir .nav-logo { font-size: 1.12rem; }
}

.nav-linkovi a:not(.nav-cta):active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 var(--boja-cyan-tamna); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-naslov);
  font-weight: 700;
  font-size: 0.86rem;
  background: linear-gradient(180deg, #4a3728 0%, var(--boja-tamna) 55%, #1c120b 100%);
  color: var(--boja-belo) !important;
  padding: 9px 16px;
  border-radius: 999px;
  border-bottom: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 0 #150d08,
    0 6px 14px rgba(43,29,20,0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  transform: translateY(0);
}

.nav-cta:hover {
  background: linear-gradient(180deg, #e9c169 0%, var(--boja-akcenat) 55%, var(--boja-akcenat-tamna) 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 0 var(--boja-akcenat-tamna),
    0 10px 22px rgba(212,161,61,0.5);
}
.nav-cta:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 1px 0 var(--boja-akcenat-tamna),
    0 3px 10px rgba(212,161,61,0.4);
}

.meni-prekidac {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.meni-prekidac span {
  width: 26px;
  height: 3px;
  background: var(--boja-tamna);
  border-radius: 2px;
}

@media (max-width: 1360px) {
  .meni-prekidac { display: flex; }
  .jezik-prekidac { align-self: flex-start; margin-left: 0; }
  .nav-linkovi {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--boja-belo);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 16px;
    box-shadow: var(--senka);
    display: none;
  }
  .nav-linkovi.otvoren { display: flex; }
  .nav-cta { align-self: flex-start; }
}

/* ---------- Herojska sekcija ---------- */

.heroj {
  background: linear-gradient(135deg, var(--boja-tamna) 0%, var(--boja-tamna-2) 100%);
  color: var(--boja-belo);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.heroj::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, transparent 0% 50%) 0 0/80px 80px;
  border-radius: 40px;
  transform: rotate(12deg);
}

.heroj-sadrzaj { max-width: 640px; position: relative; z-index: 1; }

.heroj p.podnaslov {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
}

.heroj-dugmad { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }

.oznaka {
  display: inline-block;
  background: rgba(212, 161, 61, 0.18);
  color: var(--boja-akcenat);
  border: 1px solid rgba(212,161,61,0.4);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

/* ---------- Opšte sekcije ---------- */

.sekcija { padding: 80px 0; }
.sekcija-svetla { background: var(--boja-belo); }
.sekcija-krem { background: var(--boja-krem-tamnija); }

.sekcija-naslov { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.sekcija-naslov h2 { font-size: 2rem; }
.sekcija-naslov p { color: var(--boja-tekst-svetliji); font-size: 1.05rem; }

/* ---------- Kartice uzrasnih grupa ---------- */

.mreza-grupa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.karta-grupe {
  background: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 28px 24px;
  box-shadow: var(--senka);
  border-top: 6px solid var(--boja-grupe, var(--boja-akcenat));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.karta-grupe:hover { transform: translateY(-6px); box-shadow: var(--senka-jaka); }

.karta-grupe .uzrast {
  font-weight: 700;
  color: var(--boja-grupe, var(--boja-akcenat-tamna));
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.karta-grupe h3 { font-size: 1.35rem; margin-bottom: 10px; }

.karta-grupe p { color: var(--boja-tekst-svetliji); flex-grow: 1; }

.karta-grupe .strelica {
  font-weight: 700;
  color: var(--boja-grupe, var(--boja-akcenat-tamna));
  margin-top: 12px;
}

.karta-grupe.polaznici { --boja-grupe: var(--boja-polaznici); }
.karta-grupe.pioniri { --boja-grupe: var(--boja-pioniri); }
.karta-grupe.kadeti { --boja-grupe: var(--boja-kadeti); }
.karta-grupe.omladinci { --boja-grupe: var(--boja-omladinci); }

/* ---------- Naslovna traka grupe (na stranicama grupa) ---------- */

.traka-grupe {
  padding: 60px 0 50px;
  color: var(--boja-belo);
  background: linear-gradient(135deg, var(--boja-grupe-tamna, var(--boja-tamna)), var(--boja-grupe, var(--boja-tamna-2)));
}

.traka-grupe.polaznici { --boja-grupe: var(--boja-polaznici); --boja-grupe-tamna: var(--boja-polaznici-tamna); }
.traka-grupe.pioniri { --boja-grupe: var(--boja-pioniri); --boja-grupe-tamna: var(--boja-pioniri-tamna); }
.traka-grupe.kadeti { --boja-grupe: var(--boja-kadeti); --boja-grupe-tamna: var(--boja-kadeti-tamna); }
.traka-grupe.omladinci { --boja-grupe: var(--boja-omladinci); --boja-grupe-tamna: var(--boja-omladinci-tamna); }

.mrvice {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 16px;
}
.mrvice a { text-decoration: underline; }
.mrvice a:hover { color: var(--boja-belo); }

/* ---------- Teme/kategorije unutar grupe ---------- */

.mreza-teme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.karta-tema {
  background: var(--boja-belo);
  border: 1px solid var(--boja-krem-tamnija);
  border-radius: var(--radijus);
  padding: 22px;
  box-shadow: var(--senka);
  transition: transform 0.15s ease;
}

.karta-tema:hover { transform: translateY(-4px); }

.karta-tema .ikonica { font-size: 1.8rem; margin-bottom: 10px; }

.karta-tema h4 { font-size: 1.1rem; margin-bottom: 6px; }

.karta-tema p { color: var(--boja-tekst-svetliji); font-size: 0.95rem; margin-bottom: 0; }

.oznaka-napredno {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(212,161,61,0.2);
  color: var(--boja-akcenat-tamna);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Sadržaj lekcije (placeholder stranice) ---------- */

.okvir-lekcije {
  background: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 40px;
  box-shadow: var(--senka);
  max-width: 780px;
  margin: -40px auto 0;
  position: relative;
  z-index: 2;
}

.uskoro {
  border: 2px dashed var(--boja-krem-tamnija);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  color: var(--boja-tekst-svetliji);
  margin-top: 20px;
}

/* ---------- Zašto mi / prednosti ---------- */

.mreza-prednosti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.prednost { text-align: center; padding: 10px; }

.prednost .ikonica {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--boja-krem-tamnija);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
}

/* ---------- Cenovnik ---------- */

.mreza-cene {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.karta-cene {
  background: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 30px;
  box-shadow: var(--senka);
  text-align: center;
}

.karta-cene .cena {
  font-family: var(--font-naslov);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--boja-tamna);
  margin: 10px 0;
}

.karta-cene .cena span { font-size: 1rem; font-weight: 600; color: var(--boja-tekst-svetliji); }

.cena-podela {
  display: flex;
  align-items: stretch;
  margin: 16px 0 4px;
  border: 1px solid var(--boja-krem-tamnija);
  border-radius: 12px;
  overflow: hidden;
}

.cena-opcija {
  flex: 1;
  padding: 14px 8px;
  text-align: center;
  min-width: 0;
}

.cena-opcija-uzivo { background: rgba(90, 158, 76, 0.07); }
.cena-opcija-online { background: rgba(58, 126, 199, 0.07); }

.cena-opcija-oznaka {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--boja-tekst-svetliji);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.cena-opcija-broj {
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--boja-tamna);
}

.cena-opcija-broj small { font-size: 0.68rem; font-weight: 600; color: var(--boja-tekst-svetliji); }

.cena-opcija-razdelnik { width: 1px; background: var(--boja-krem-tamnija); }

.karta-cene ul { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.karta-cene li { padding: 8px 0; border-bottom: 1px solid var(--boja-krem-tamnija); color: var(--boja-tekst-svetliji); }
.karta-cene li:before { content: "\2713  "; color: var(--boja-polaznici); font-weight: 800; }

/* Otključavanje sajta: plaćanje (cenovnik.html#otkljucavanje) i unos ključa (otkljucavanje.html) */
.karta-cene-kljuc { border: 2px solid var(--boja-brend-navy); }
.placanje-koraci { max-width: 720px; margin: 0 auto 36px; padding-left: 1.4em; line-height: 1.7; }
.placanje-koraci li { margin-bottom: 6px; }
.placanje-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.placanje-karta { background: var(--boja-belo); border-radius: var(--radijus); padding: 26px; box-shadow: var(--senka); min-width: 0; }
.placanje-karta h3 { margin-bottom: 16px; }
.placanje-telo { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.placanje-qr { margin: 0; flex: 0 0 auto; text-align: center; max-width: 220px; }
.placanje-qr img { display: block; width: 220px; height: 220px; max-width: 100%; border: 1px solid var(--boja-krem-tamnija); border-radius: 10px; background: #fff; }
.placanje-qr figcaption { font-size: 0.82rem; color: var(--boja-tekst-svetliji); margin-top: 8px; }
.placanje-podaci { flex: 1 1 220px; margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.95rem; }
.placanje-podaci dt { font-weight: 700; color: var(--boja-tekst-svetliji); }
.placanje-podaci dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
@media (max-width: 480px) { .placanje-podaci { grid-template-columns: 1fr; gap: 2px; } .placanje-podaci dd { margin-bottom: 8px; } }
.kljuc-karta { max-width: 640px; margin: 0 auto; background: var(--boja-belo); border-radius: var(--radijus); padding: 28px; box-shadow: var(--senka); }
.kljuc-karta textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--boja-krem-tamnija); border-radius: 10px; font-family: Consolas, monospace; font-size: 0.85rem; resize: vertical; box-sizing: border-box; }
.kljuc-karta [hidden] { display: none !important; }
.kljuc-dugmad { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.kljuc-poruka { margin-top: 14px; font-weight: 700; }
.kljuc-poruka.greska { color: var(--boja-omladinci); }
.kljuc-otkljucano { padding: 16px; border-radius: 10px; background: rgba(90, 158, 76, 0.1); border: 1px solid rgba(90, 158, 76, 0.4); }

/* ---------- Kontakt ---------- */

.mreza-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 780px) {
  .mreza-kontakt { grid-template-columns: 1fr; }
}

.forma-kontakt { display: flex; flex-direction: column; gap: 16px; }

.forma-kontakt label { font-weight: 700; margin-bottom: 4px; display: block; }

.forma-kontakt input,
.forma-kontakt select,
.forma-kontakt textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--boja-krem-tamnija);
  font-family: var(--font-tekst);
  font-size: 1rem;
  background: var(--boja-belo);
}

.forma-kontakt input:focus,
.forma-kontakt select:focus,
.forma-kontakt textarea:focus {
  outline: 2px solid var(--boja-akcenat);
}

.info-kontakt-blok {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.info-kontakt-stavka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 28px;
  width: 100%;
  max-width: 320px;
}

.info-kontakt-stavka > div { text-align: center; min-width: 0; overflow-wrap: break-word; word-break: break-word; }

.info-kontakt-stavka .ikonica { font-size: 1.5rem; }

/* ---------- Podnožje ---------- */

.podnozje {
  background: var(--boja-tamna);
  color: rgba(255,255,255,0.75);
  padding: 50px 0 24px;
}

.podnozje-mreza {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

@media (max-width: 700px) {
  .podnozje-mreza { grid-template-columns: 1fr; gap: 28px; }
}

.podnozje h4 { color: var(--boja-belo); font-size: 1rem; margin-bottom: 14px; }

.podnozje ul { list-style: none; padding: 0; margin: 0; }
.podnozje li { margin-bottom: 8px; }
.podnozje a:hover { color: var(--boja-akcenat); }

.podnozje-drustvene {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ---------- Značke društvenih mreža ---------- */

.znacka-mreza {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #2a3347, #171e2e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 5px 20px 5px 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.znacka-mreza:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.3); }

.znacka-mreza-ikona {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.znacka-mreza-ikona svg { width: 18px; height: 18px; }

.znacka-yt { background: #ff0000; }
.znacka-ig { background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fe5d55 30%, #d62976 55%, #a52ad0 75%, #7d4de8 100%); }

.znacka-mreza-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.znacka-mreza-tekst strong {
  color: var(--boja-belo);
  font-family: var(--font-naslov);
  font-size: 0.85rem;
}

.znacka-mreza-tekst small {
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  font-weight: 600;
}

.podnozje-drustvene a:hover { background: rgba(255,255,255,0.18); color: var(--boja-akcenat); }

.podnozje-dno {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255,255,255,0.5);
}

/* ---------- Baner (glavna slika na početnoj) ---------- */

.sekcija-banera {
  background: linear-gradient(135deg, var(--boja-brend-navy) 0%, var(--boja-brend-navy-2) 100%);
  padding: 32px 0 48px;
}

.banner-slika {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--senka-jaka);
}

.banner-slika img { width: 100%; border-radius: 18px; }

.banner-dugmad {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.dugme-login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #ffe9a8 0%, var(--boja-brend-zlatna) 50%, var(--boja-brend-zlatna-tamna) 100%);
  color: var(--boja-brend-navy);
  font-family: var(--font-naslov);
  font-weight: 800;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 1.05rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 5px 0 #8c701f,
    0 10px 26px rgba(212, 175, 55, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transform: translateY(0);
}

.dugme-login:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 7px 0 #8c701f,
    0 14px 30px rgba(212, 175, 55, 0.6);
}
.dugme-login:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 0 #8c701f,
    0 5px 14px rgba(212, 175, 55, 0.4);
}

/* ---------- Istaknuti paneli (članarina / online) ---------- */

.isticanje-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.isticanje-panel {
  background: linear-gradient(135deg, var(--boja-brend-navy), var(--boja-brend-navy-2));
  color: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 30px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: var(--senka);
  transition: transform 0.15s ease;
}

.isticanje-panel:hover { transform: translateY(-4px); }

.isticanje-panel .ikonica-panela { font-size: 2rem; flex-shrink: 0; }

.isticanje-panel h4 { color: var(--boja-brend-zlatna); font-size: 1.1rem; }

.isticanje-panel p { color: rgba(255,255,255,0.82); margin-bottom: 12px; font-size: 0.95rem; }

.isticanje-panel a.veza {
  color: var(--boja-brend-zlatna);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(212,175,55,0.5);
}

/* ---------- Prijava / registracija ---------- */

.okvir-prijave {
  max-width: 440px;
  margin: -50px auto 0;
  background: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 40px 36px;
  box-shadow: var(--senka-jaka);
  position: relative;
  z-index: 2;
}

.okvir-prijave h1 { font-size: 1.5rem; text-align: center; }

.okvir-prijave p.opis { text-align: center; color: var(--boja-tekst-svetliji); margin-bottom: 24px; }

.forma-prijave { display: flex; flex-direction: column; gap: 16px; }

.forma-prijave label { font-weight: 700; margin-bottom: 4px; display: block; font-size: 0.92rem; }

.forma-prijave input, .forma-prijave select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--boja-krem-tamnija);
  font-family: var(--font-tekst);
  font-size: 1rem;
}

.forma-prijave input:focus, .forma-prijave select:focus { outline: 2px solid var(--boja-brend-zlatna); }

.dugme-navy {
  background: linear-gradient(180deg, #2a4478 0%, var(--boja-brend-navy) 55%, #060e21 100%);
  color: var(--boja-belo);
  font-family: var(--font-naslov);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 5px 0 #050c1f,
    0 10px 22px rgba(13, 27, 61, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  transform: translateY(0);
}

.dugme-navy:hover {
  background: linear-gradient(180deg, #35538f, var(--boja-brend-navy-2));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 7px 0 #050c1f,
    0 14px 26px rgba(13, 27, 61, 0.6);
}
.dugme-navy:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 0 #050c1f,
    0 5px 12px rgba(13, 27, 61, 0.4);
}

.napomena-demo {
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--boja-brend-navy-2);
  margin-top: 18px;
  text-align: center;
}

.veza-prebaci { text-align: center; margin-top: 18px; font-size: 0.92rem; color: var(--boja-tekst-svetliji); }
.veza-prebaci a { color: var(--boja-brend-navy); font-weight: 700; text-decoration: underline; }

/* ---------- Profil (demo) ---------- */

.profil-zaglavlje {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.profil-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--boja-brend-zlatna), var(--boja-brend-zlatna-tamna));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.napredak-stavka { margin-bottom: 22px; }

.napredak-vrh { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 700; }

.traka-napretka {
  height: 12px;
  border-radius: 999px;
  background: var(--boja-krem-tamnija);
  overflow: hidden;
}

.traka-napretka > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--boja-brend-zlatna-tamna), var(--boja-brend-zlatna));
}

/* ---------- Ilustracije ---------- */

.slika-kartica {
  border-radius: var(--radijus);
  overflow: hidden;
  box-shadow: var(--senka-jaka);
}

.slika-kartica img { width: 100%; display: block; }

/* ---------- Oznaka igre na karticama tema ---------- */

.oznaka-igra {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(34,211,238,0.16);
  color: var(--boja-cyan-tamna);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Trening igre (tabla, statistika) ---------- */

.trening-okvir {
  background: var(--boja-belo);
  border-radius: var(--radijus);
  padding: 30px;
  box-shadow: var(--senka-jaka);
  max-width: 760px;
  margin: -50px auto 0;
  position: relative;
  z-index: 2;
}

.trening-raspored {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.trening-tabla-omot { flex-shrink: 0; }

.trening-tabla {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(360px, 82vw);
  height: min(360px, 82vw);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--senka);
  border: 3px solid var(--boja-tamna);
}

.trening-polje {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(7vw, 28px);
  cursor: pointer;
  user-select: none;
  background: var(--boja-krem-tamnija);
  transition: background 0.12s ease;
  position: relative;
}

.trening-polje.svetlo { background: #f0e6d2; }
.trening-polje.tamno { background: #b08b5f; }

.trening-polje.oznaceno::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid var(--boja-cyan);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(34,211,238,0.7);
}

.trening-polje.tacno { background: rgba(90,158,76,0.55) !important; }
.trening-polje.netacno { background: rgba(181,69,63,0.55) !important; }
.trening-polje.promaseno::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px dashed var(--boja-omladinci);
  border-radius: 50%;
}

.trening-polje:not(.klik-iskljucen):hover { filter: brightness(1.08); }
.trening-polje.klik-iskljucen { cursor: default; }

.trening-info {
  flex: 1;
  min-width: 240px;
}

.trening-poruka {
  background: var(--boja-krem-tamnija);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-weight: 700;
  color: var(--boja-tekst);
}

.trening-poruka .malo {
  display: block;
  font-weight: 600;
  color: var(--boja-tekst-svetliji);
  font-size: 0.85rem;
  margin-top: 4px;
}

.trening-tajmer {
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--boja-cyan-tamna);
  margin-bottom: 14px;
}

.trening-dugmad { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.trening-statistika {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
  border-top: 1px solid var(--boja-krem-tamnija);
  padding-top: 18px;
}

.trening-stat { text-align: center; }
.trening-stat .broj {
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--boja-tamna);
  display: block;
}
.trening-stat .oznaka-stat {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--boja-tekst-svetliji);
  font-weight: 700;
}
.trening-stat .rank { color: var(--boja-cyan-tamna); }

.trening-resetuj {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--boja-tekst-svetliji);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

/* ---------- Spisak lekcija ("Upoznaj se sa ovom igrom") ---------- */

.lekcije-mreza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  align-items: start;
}

@media (max-width: 780px) {
  .lekcije-mreza { grid-template-columns: 1fr; }
}

.lekcije-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lekcija-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: var(--boja-belo);
  border: 1px solid var(--boja-krem-tamnija);
  border-left: 5px solid var(--boja-polaznici);
  border-radius: 12px;
  font-weight: 700;
  color: var(--boja-tekst);
  box-shadow: 0 2px 6px rgba(43, 29, 20, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.lekcija-red::after {
  content: "\203A";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--boja-polaznici);
  flex-shrink: 0;
}

.lekcija-red:hover {
  transform: translateX(3px);
  border-left-color: var(--boja-cyan);
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.28);
}

.lekcija-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.lekcija-susedna { font-weight: 700; color: var(--boja-cyan-tamna); }
.lekcija-susedna:hover { text-decoration: underline; }

/* ---------- Šahovska bajka ---------- */

.okvir-lekcije.bajka { max-width: 940px; }

.bajka-tekst { max-width: 760px; margin: 0 auto; }

.bajka-tekst p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.1em; }

.bajka-tekst > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 3.8rem;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--boja-polaznici-tamna);
}

.bajka-tekst blockquote {
  margin: 1.4em 0;
  padding: 18px 22px;
  background: var(--boja-krem);
  border-left: 5px solid var(--boja-akcenat);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  line-height: 1.85;
  font-size: 1.05rem;
}

.bajka-naglasak {
  text-align: center;
  font-family: var(--font-naslov);
  font-weight: 800;
  font-size: 1.25rem !important;
  color: var(--boja-polaznici-tamna);
}

.bajka-slika {
  margin: 1.6em auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--senka);
  background: var(--boja-belo);
}

.bajka-slika img { width: 100%; display: block; }
.bajka-slika-uska { max-width: 440px; }
.bajka-slika-visoka { margin: 0; max-width: 340px; }

.bajka-razdelnik {
  height: 14px;
  margin: 1.8em auto;
  max-width: 320px;
  background: repeating-linear-gradient(90deg, var(--boja-akcenat) 0 6px, transparent 6px 14px);
  opacity: 0.55;
  border-radius: 999px;
}

.bajka-recnik {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 18px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 12px;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.bajka-recnik a { color: var(--boja-cyan-tamna); font-weight: 700; text-decoration: underline; }

.bajka-figure {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 28px;
  align-items: start;
  margin: 1.4em 0 0.6em;
}

@media (max-width: 780px) {
  .bajka-figure { grid-template-columns: 1fr; }
  .bajka-slika-visoka { margin: 0 auto; }
}

.bajka-figure-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.bajka-figure-lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--boja-krem);
  border-radius: 12px;
}

.bajka-figure-lista p { margin: 0; line-height: 1.65; font-size: 0.98rem; }
.bajka-figure-lista strong { color: var(--boja-cyan-tamna); }

.figura-znak {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--boja-tamna);
  flex-shrink: 0;
  width: 2.2rem;
  text-align: center;
}

/* ---------- Dijagrami šahovske table (lekcije) ---------- */

.govor {
  display: flex;
  gap: 22px;
  align-items: center;
  background: var(--boja-krem);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 1.2em 0;
}

.govor p { margin: 0; line-height: 1.75; font-size: 1.02rem; }
.govor-obrnut { flex-direction: row-reverse; }
.govor-slika { width: 130px; flex-shrink: 0; border-radius: 10px; display: block; }
.govor-slika-siroka { width: 250px; }

@media (max-width: 640px) {
  .govor, .govor-obrnut { flex-direction: column; text-align: left; }
  .govor-slika { width: 130px; margin: 0 auto; }
  .govor-slika-siroka { width: min(280px, 90%); }
}

.pojam { color: var(--boja-cyan-tamna); font-weight: 800; text-decoration: underline; }
.bajka-podnaslov { margin-top: 1.8em; }

.boja-linija { color: #2f9e44; }
.boja-red { color: #e03131; }
.boja-dijagonala { color: #c99a0b; }

.dijagrami {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
  margin: 1.2em 0 1.8em;
  justify-items: center;
}

@media (max-width: 640px) {
  .okvir-lekcije { padding: 26px 18px; }
}

.dijagrami-jedan { grid-template-columns: 1fr; }
.dijagram-okvir { margin: 0; text-align: center; width: 100%; }

.dijagram {
  display: grid;
  grid-template-columns: 1.3em 1fr 1.3em;
  grid-template-rows: 1.3em auto 1.3em;
  width: min(340px, 100%);
  margin: 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--boja-tekst-svetliji);
}

.dd-slova { display: flex; align-items: center; }
.dd-slova span { flex: 1; text-align: center; }
.dd-brojevi { display: flex; flex-direction: column; align-items: center; }
.dd-brojevi span { flex: 1; display: flex; align-items: center; }
.dd-gore { grid-column: 2; grid-row: 1; }
.dd-levo { grid-column: 1; grid-row: 2; }
.dd-desno { grid-column: 3; grid-row: 2; }
.dd-dole { grid-column: 2; grid-row: 3; }

.dd-tabla {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  border: 2px solid var(--boja-akcenat-tamna);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--senka);
}

.dp {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 5.4vw, 26px);
  line-height: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dp.svetlo { background: #ffffff; }
.dp.tamno { background: #c9cdcf; }
.dp.centar { background: #3fa34d; }
.dp.siri { background: #d9e97a; }
.dp.krilo-d { background: #e2ee86; }
.dp.krilo-k { background: #7cc36b; }

.fig { display: block; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif; }
.fig.bela {
  color: #ffffff;
  -webkit-text-stroke: 1.2px #222;
  paint-order: stroke fill;
}
.fig.crna { color: #14110f; }

.dd-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.dd-natpis {
  position: absolute;
  top: 75%;
  height: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1d3b1f;
  text-align: center;
  background: rgba(255, 255, 255, 0.35);
}

.dd-legenda { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

.cip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid transparent;
}

.cip-centar { background: #3fa34d; color: #fff; }
.cip-siri { background: #d9e97a; color: #33430a; }
.cip-linija { background: #d3f0da; color: #1e6b2f; border-color: #2f9e44; }
.cip-red { background: #fde0e0; color: #a11a1a; border-color: #e03131; }
.cip-dijagonala { background: #fbf0c4; color: #7a5b00; border-color: #e8b923; }

/* ---------- Lekcija "Top" (pesmice, naglasci) ---------- */

.dp.meta { background: #f28b82; }
.dp.kontrola { background: #7fcf7a; }

.resenje {
  margin: 1.2em auto 0;
  max-width: 460px;
  background: #e9f7e6;
  border: 2px solid #7fcf7a;
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
}
.resenje summary { cursor: pointer; font-weight: 800; color: #2b7a2b; }
.resenje p { margin-top: 0.6em; }

.ikona-figura {
  display: inline-block;
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: -0.12em;
  margin-right: 2px;
  color: var(--boja-tamna);
}

.naglasak-okvir {
  margin: 1.4em 0;
  padding: 16px 22px;
  background: #fdeaf1;
  border: 3px dotted #7fd6dc;
  border-radius: 14px;
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 600;
}

.naglasak-plavi {
  margin: 1.6em 0;
  text-align: center;
  color: #2a8fd0;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.9;
}

.naglasak-plavi .ikona-figura { color: #2a8fd0; }

.dijagram-sam { flex: 1; min-width: 0; }

.pesme {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 220px) 1fr;
  gap: 18px;
  align-items: center;
  margin: 1.6em 0;
}

.pesma {
  background: #eef0fb;
  border: 3px solid #7b83c4;
  border-radius: 18px;
  padding: 16px 20px;
  text-align: center;
}

.pesma p { margin: 0; font-weight: 700; line-height: 1.75; color: #2f3560; }
.pesme-slika { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }

@media (max-width: 860px) {
  .pesme { grid-template-columns: 1fr; }
  .pesme-slika { width: min(220px, 70%); margin: 0 auto; }
}

.pesma-red {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.6em 0;
}

.pesma-red .pesma { max-width: 420px; flex: 1 1 260px; }
.pas-slika { width: 110px; border-radius: 12px; display: block; }

.dd-opis {
  max-width: 340px;
  margin: 12px auto 0;
  font-weight: 600;
  line-height: 1.6;
  font-size: 0.98rem;
}

.pojam-crn { font-weight: 800; color: var(--boja-tamna); }

.govor-zuta { background: #ffe9a8; }
.govor-topla { background: #fad8a4; }

/* ---------- Lekcija "Formular i Rešenja testova" ---------- */

.okvir-lekcije.fm { background: #fbd9b8; }
.fm h2 { text-align: center; }
.fm-uvod { text-align: center; line-height: 1.7; margin: 0 auto 12px; max-width: 620px; }
.fm-dugmad { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.fm-forma { max-width: 640px; margin: 0 auto 2.4em; background: #fff; border: 3px solid #222; color: #1c1c1c; }
.fm-polje { display: block; border-top: 2px solid #222; padding: 2px 8px 4px; min-width: 0; }
.fm-forma > .fm-polje:first-child { border-top: 0; }
.fm-l { display: block; font-size: 0.95rem; line-height: 1.5; }
.fm-polje input, .fm-rezultat input, .fm-p input {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px dotted #999; background: transparent;
  font: inherit; font-size: 1rem; padding: 2px 4px; color: #1c1c1c; min-width: 0;
}
.fm-polje input:focus, .fm-rezultat input:focus, .fm-p input:focus { outline: 2px solid #f5a34a; outline-offset: -2px; background: #fff8e8; }
.fm-igraci { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid #222; }
.fm-strana .fm-polje { border-top: 2px solid #222; }
.fm-strana .fm-polje.fm-visoko { padding-bottom: 28px; }
.fm-naslov { padding: 2px 8px; font-size: 1rem; }
.fm-crni { background: #b8babc; border-left: 2px solid #222; }
.fm-sto { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid #222; }
.fm-sto > .fm-polje { border-top: 0; text-transform: uppercase; }
.fm-rezultat { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; border-left: 2px solid #222; }
.fm-rezultat .fm-l { padding: 0 8px; text-transform: uppercase; }
.fm-rezultat input { border: 0; border-left: 2px solid #222; height: 100%; text-align: center; }
.fm-potezi-naslov { border-top: 2px solid #222; border-bottom: 2px solid #222; text-align: center; text-transform: uppercase; padding: 2px 8px; }
.fm-potezi { display: grid; grid-template-columns: 1fr 1fr; }
.fm-blok + .fm-blok { border-left: 2px solid #222; }
.fm-p { display: grid; grid-template-columns: 2.2em 1fr 1fr; border-bottom: 1px solid #222; }
.fm-p:last-child { border-bottom: 0; }
.fm-n { padding: 2px 4px; font-size: 0.95rem; line-height: 1.7; }
.fm-p input { border-bottom: 0; border-left: 1px solid #222; padding: 2px 6px; }
.fm-p input.fm-siv { background: #b8babc; }
.fm-p input.fm-siv:focus { background: #d4d6d8; }
.fm-h2-res { margin-top: 1.6em; }
.fm-res { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 760px; margin: 0 auto 1.6em; }
.fm-res h3 { text-transform: uppercase; font-size: 1rem; margin: 0 0 12px; }
.fm-res-red { margin: 0 0 6px; line-height: 1.7; font-size: 1.05rem; }
.fm-rb { font-weight: 700; }
@media (max-width: 700px) {
  .okvir-lekcije.fm { padding: 22px 12px; }
  .fm-potezi { grid-template-columns: 1fr; }
  .fm-blok + .fm-blok { border-left: 0; border-top: 2px solid #222; }
  .fm-res { grid-template-columns: 1fr; }
}
@media print {
  body * { visibility: hidden !important; }
  .fm-forma, .fm-forma * { visibility: visible !important; }
  .fm-forma { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; }
}

/* ---------- Lekcija "Rečnik" ---------- */

.okvir-lekcije.rc { background: #e9f0d8; }
.rc h2 { text-align: center; }
.rc-slova { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 auto 1.6em; max-width: 760px; }
.rc-slova a, .rc-slova .rc-prazno { min-width: 2.3em; text-align: center; padding: 4px 8px; border-radius: 999px; font-weight: 800; }
.rc-slova a { background: #fff; color: #1f6f3a; border: 2px solid #b9d58a; }
.rc-slova a:hover { background: #b9d58a; }
.rc-slova .rc-prazno { color: #9aa88a; }
.rc-lista { max-width: 760px; margin: 0 auto; }
.rc-slovo { margin: 0 0 1.6em; scroll-margin-top: 90px; }
.rc-h { margin: 0 0 8px; font-size: 1.6rem; color: #1f6f3a; }
.rc-red { margin: 0 0 8px; line-height: 1.7; font-size: 1.05rem; }
.rc-red strong { font-weight: 800; }
@media (max-width: 860px) {
  .okvir-lekcije.rc { padding: 22px 14px; }
  .rc-slova { gap: 4px; }
  .rc-slova a, .rc-slova .rc-prazno { min-width: 1.9em; padding: 2px 4px; font-size: 0.95rem; }
}

/* ---------- Lekcija "Šah je više od igre" ---------- */

.okvir-lekcije.od { background: #fdd9ae; }
.od h2 { text-align: center; background: #ee6664; color: #fff; border-radius: 22px; padding: 12px 18px; }
.od-plavo { color: #3fb2e6; }
.od h2 .od-plavo { color: #4cc0f0; }
.od-red1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 1.4em; }
.od-veliko { text-transform: uppercase; font-size: 1.15rem; line-height: 1.6; margin: 0 0 12px; font-weight: 500; }
.od-balon { margin: 0 0 12px; line-height: 1.6; font-size: 1.05rem; }
.od-balon-devojcica { background: #fff; border-radius: 22px; padding: 14px 20px; max-width: 420px; }
.od-otac, .od-devojcica, .od-prelaz, .od-portret, .od-igrac figure { margin: 0; }
.od-otac img { width: 100%; display: block; }
.od-kartica { margin: 0; position: relative; }
.od-natpis { margin: 0 0 8px; line-height: 1.6; font-size: 1.05rem; text-align: right; }
.od-kartica img { width: 100%; display: block; border-radius: 26px; }
.od-red2 { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 20px; align-items: end; margin: 1.4em 0 0; }
.od-devojcica img { width: 100%; display: block; border-radius: 22px; }
.od-tekst p { margin: 0 0 12px; line-height: 1.8; font-size: 1.05rem; }
.od-tekst { margin: 1.4em 0; }
.od-plava-linija { color: #2b90d0; font-weight: 500; }
.od-traka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px) minmax(0, 1fr); align-items: center; margin: 2em 0; }
.od-traka p { margin: 0; padding: 22px 20px; line-height: 1.6; font-size: 1.05rem; align-self: center; }
.od-traka-l { background: #e07474; text-align: right; border-radius: 22px 0 0 22px; }
.od-traka-d { background: #f2833f; border-radius: 0 22px 22px 0; }
.od-prelaz img { width: 100%; display: block; border-radius: 22px; }
.od-kraj { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: end; margin-top: 1.6em; }
.od-portret img { width: 100%; display: block; }
.od-zelimo { margin: 0 0 40px; line-height: 1.7; font-size: 1.05rem; text-align: center; }
.od-igrac img { width: 100%; display: block; border-radius: 26px; }
.od-uzivaj { margin: 10px 0 0; text-transform: uppercase; color: #2b90d0; font-weight: 800; font-size: 1.6rem; text-align: center; }
@media (max-width: 860px) {
  .od-red1, .od-red2, .od-traka, .od-kraj { grid-template-columns: 1fr; }
  .od-traka-l, .od-traka-d { border-radius: 22px; text-align: center; }
  .od-traka p { margin: 8px 0; }
  .od-prelaz { max-width: 290px; margin: 0 auto; }
  .od-devojcica { max-width: 300px; margin: 0 auto; }
  .od-portret { max-width: 200px; margin: 0 auto; }
  .od-zelimo { margin: 0; }
  .od-natpis { text-align: left; }
  .okvir-lekcije.od { padding: 22px 14px; }
}

/* ---------- Lekcija "Miniature sa žrtvama" ---------- */

.okvir-lekcije.mz { background: #e6e3c6; }
.mz h2 { text-align: center; background: #ee6f9f; border-radius: 22px; padding: 10px 18px; color: #1c1c1c; }
.mz-plavo { color: #2b90d0; }
.mz-ram { border-radius: 4px; padding: 8px 10px 10px; width: 300px; max-width: 100%; box-sizing: border-box; }
.mz-ram .dijagram { color: #1c1c1c; }
.mz-zuta { background: #d9df52; }
.mz-roze-ram { background: #f4b6c8; }
.mz p { line-height: 1.75; }
.mz-uvod p { margin: 0 0 10px; font-size: 1.05rem; }
.mz-red1 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin: 1.2em 0; }
.mz-sredina { text-align: center; padding-top: 30px; }
.mz-sredina p { margin: 0 0 12px; font-size: 1.05rem; }
.mz-kartica { background: #f4f3e6; border-radius: 4px; padding: 12px 14px; margin: 0; text-align: center; font-size: 1.02rem; }
.mz-desno-kolona { background: #f4f3e6; border-radius: 4px; }
.mz-red2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 18px; align-items: start; margin: 1.6em 0; }
.mz-levo-tekst p, .mz-desno-tekst p { margin: 0 0 10px; font-size: 1.05rem; }
.mz-roze { background: #ee6f9f; border-radius: 16px; padding: 14px 18px; text-align: center; }
.mz-kostic { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 2em; }
.mz-pitanje { background: #f6f4e8; border-radius: 999px; padding: 8px 18px; margin: 0 0 12px; color: #2a3f9e; font-weight: 600; text-align: center; }
.mz-pesma { background: #f2f1e2; border-radius: 22px; padding: 22px 16px; text-align: center; color: #2a3f9e; }
.mz-pesma p { margin: 0; line-height: 1.9; font-size: 1.05rem; }
.mz-zamka-naslov { background: #ee6f9f; border-radius: 999px; padding: 10px 18px; text-align: center; margin: 0 0 14px; font-size: 1.1rem; }
.mz-par { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.mz-par-tekst p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.7; }
.mz-roze-traka { background: #f9d3df; border-radius: 22px; padding: 14px; margin: 16px 0 34px; }
.mz-roze-traka .mz-par { display: block; }
.mz-roze-traka .mz-par::after { content: ""; display: table; clear: both; }
.mz-roze-traka .mz-ram { float: left; margin: 0 16px 8px 0; }
.mz-cent { text-align: center; margin: 0 0 8px; font-size: 1.1rem; }
.mz-ugusen { align-items: center; margin-bottom: 34px; }
@media (max-width: 1000px) {
  .mz-red1, .mz-red2, .mz-kostic, .mz-par { grid-template-columns: 1fr; }
  .mz-roze-traka .mz-par { display: grid; }
  .mz-roze-traka .mz-ram { float: none; margin: 0 auto; }
  .mz-ram { margin: 0 auto; }
  .mz-red2 .mz-ram { order: 0; }
  .mz-sredina { padding-top: 0; }
  .mz-desno-kolona .mz-ram { margin: 0 auto; }
  .okvir-lekcije.mz { padding: 22px 12px; }
}

/* ---------- Lekcija "Minijature" ---------- */

.okvir-lekcije.mn { background: #f0d6b3; }
.mn-ram { border-radius: 4px; padding: 8px 10px 10px; width: 300px; max-width: 100%; box-sizing: border-box; }
.mn-ram .dijagram { color: #1c1c1c; }
.mn-zel { background: #a8d96e; }
.mn-lj { background: #8b3a5b; }
.mn-lj .dijagram { color: #fff; }
.mn-ljub-ram { background: #8b3a5b; }
.mn-ljub-ram .dijagram { color: #fff; }
.mn-plavo { color: #2b90d0; }
.mn-znak { display: inline-block; background: #f7e42a; color: #1c1c1c; border-radius: 999px; padding: 2px 9px; font-weight: 800; min-width: 1.6em; text-align: center; }
.mn-red-znak { line-height: 2; }
.mn-top { background: #8b3a5b; color: #fff; border-radius: 22px; padding: 18px 26px 26px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 26px; align-items: center; margin-bottom: 1.4em; }
.mn-top h2 { grid-column: 1 / -1; text-align: center; margin: 0; color: #ff9d5c; font-size: 2.6rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mn-top-tekst p { margin: 0 0 12px; line-height: 1.8; font-size: 1.05rem; }
.mn-krevet { margin: 0; }
.mn-krevet img { width: 100%; display: block; border-radius: 14px; }
.mn-ljub { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px 26px; align-items: start; }
.mn-narandzasta { background: #f7b46b; border-radius: 6px; padding: 12px 14px 14px; }
.mn-zapis { margin: 0 0 8px; font-size: 1.1rem; }
.mn-par { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.mn-par-tekst p { margin: 0 0 10px; line-height: 1.7; font-size: 1.02rem; }
.mn-ljub-dole { grid-template-columns: minmax(0, 1fr) 300px; grid-column: 1; }
.mn-desno { grid-column: 2; grid-row: 1 / span 2; }
.mn-sheh { text-align: right; line-height: 1.7; margin: 0 0 12px; font-size: 1.02rem; }
.mn-dama { margin: 0 0 8px; }
.mn-dama img { width: 100%; display: block; border-radius: 16px; }
.mn-desno .mn-sheh:last-child { text-align: left; }
.mn-red { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: center; margin: 1.6em 0; }
.mn-kartica { border-radius: 0 22px 22px 0; padding: 18px 24px; line-height: 1.7; font-size: 1.05rem; }
.mn-kartica p { margin: 0 0 8px; }
.mn-kz { background: #c9dc72; }
.mn-kl { background: #8b3a5b; color: #fff; border-radius: 22px 0 0 22px; }
.mn-kl .mn-plavo { color: #7ccbf5; }
.mn-ljubicasta { grid-template-columns: minmax(0, 1fr) 300px; }
.mn-ljubicasta .mn-ram { justify-self: end; }
.mn-pesma { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; margin-top: 2em; }
.mn-stub p { margin: 0; line-height: 1.85; font-size: 1.05rem; }
.mn-deda, .mn-obucar { margin: 0 0 14px; }
.mn-obucar { margin: 14px 0 0; }
.mn-deda img, .mn-obucar img { width: 100%; display: block; }
.mn-obucar img { max-width: 220px; margin-left: auto; }
@media (max-width: 860px) {
  .mn-top, .mn-ljub, .mn-par, .mn-ljub-dole, .mn-red, .mn-ljubicasta, .mn-pesma { grid-template-columns: 1fr; }
  .mn-desno { grid-column: 1; grid-row: auto; }
  .mn-ram { margin: 0 auto; }
  .mn-ljubicasta .mn-ram { justify-self: center; order: -1; }
  .mn-ljubicasta .mn-kl { order: 2; }
  .mn-kartica, .mn-kl { border-radius: 22px; margin-top: 10px; }
  .mn-top { padding: 16px; }
  .mn-top h2 { font-size: 2rem; }
  .okvir-lekcije.mn { padding: 22px 12px; }
  .mn-obucar img { margin: 0 auto; }
}

/* ---------- Lekcija "Saveti za početak partije" ---------- */

.okvir-lekcije.sv { background: #94b7df; }
.dp.oko { background: #e3ee78; }
.sv-ram { border-radius: 4px; padding: 8px 10px 10px; min-width: 0; width: 300px; max-width: 100%; box-sizing: border-box; }
.sv-zut { background: #f7e42a; }
.sv-nar { background: #f5a34a; }
.sv-ram .dijagram { color: #1c1c1c; }
.sv-br { display: inline-block; background: #f7e42a; border-radius: 999px; padding: 0 8px; font-weight: 800; }
.sv-uvod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.sv-uvod p { margin: 0; line-height: 1.8; font-size: 1.05rem; }
.sv-filip { margin: 0; }
.sv-filip img, .sv-magarac img, .sv-ruke img, .sv-kralj img, .sv-igra img { width: 100%; display: block; border-radius: 14px; }
.sv-red { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 300px; gap: 20px; align-items: center; margin: 1.6em 0; }
.sv-magarac { margin: 0; }
.sv-pesma { margin: 0; text-align: center; line-height: 1.8; font-size: 1.05rem; }
.sv-dva { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin: 1.6em 0; }
.sv-tekst p, .sv-kralj-tekst p { margin: 0 0 12px; line-height: 1.8; font-size: 1.05rem; }
.sv-zuta-kartica { background: #f7e42a; border-radius: 22px; padding: 14px 20px; text-align: center; }
.sv-zapis { text-align: center; line-height: 1.8; margin: 0 0 8px; font-size: 1.05rem; }
.sv-pesaci { grid-template-columns: 300px minmax(0, 1fr); }
.sv-ruke { margin: 8px 0 12px; }
.sv-narandzasta { background: #f5a34a; border-radius: 22px; padding: 14px 20px; }
.sv-kralj-red { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; margin: 1.6em 0; }
.sv-kralj { margin: 0; }
.sv-kraj { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: end; margin-top: 1.4em; }
.sv-vidimo { line-height: 1.75; margin: 0 0 8px; font-size: 1.05rem; }
.sv-okvir { border: 3px double #e2c98a; padding: 14px 20px; text-align: center; line-height: 1.8; margin: 0 0 8px; max-width: 320px; margin-left: auto; }
.sv-igra { margin: 0; }
@media (max-width: 860px) {
  .sv-uvod, .sv-red, .sv-dva, .sv-pesaci, .sv-kralj-red, .sv-kraj { grid-template-columns: 1fr; }
  .sv-magarac { max-width: 160px; margin: 0 auto; }
  .sv-okvir { margin-left: 0; max-width: none; }
  .okvir-lekcije.sv { padding: 22px 14px; }
}

/* ---------- Lekcija "Pravila ponašanja" ---------- */

.okvir-lekcije.pp { background: #f5dcbf; }
.pp-plavo { color: #3aa1dd; }
.pp-uvod { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 22px; align-items: start; }
.pp-gospodin { width: 100%; display: block; }
.pp-uvod-tekst p { margin: 0 0 12px; line-height: 1.8; font-size: 1.05rem; }
.pp-rukovanje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 16px; align-items: center; border: 4px dotted #e0322f; border-radius: 6px; padding: 14px 16px; margin-top: 1em; }
.pp-rukovanje p { margin: 0; }
.pp-rukovanje figure { margin: 0; text-align: center; }
.pp-rukovanje img { width: 100%; display: block; }
.pp-rukovanje figcaption { color: #e0322f; font-weight: 900; font-size: 1.2rem; margin-top: 4px; }
.pp-zeleno { background: #b8d66a; border-radius: 22px; padding: 18px 22px; margin: 1.4em 0 0.8em; max-width: 620px; }
.pp-zeleno p { margin: 0 0 8px; line-height: 1.7; }
.pp-lista { margin: 0; padding-left: 1.4em; color: #3aa1dd; font-weight: 800; line-height: 1.75; }
.pp-belo { background: #fff5e8; border-radius: 22px; padding: 14px 22px; text-align: center; line-height: 1.75; max-width: 520px; margin: 0 0 1.6em auto; }
.pp-zelena-traka { background: #b8d66a; border-radius: 22px; padding: 14px 22px; line-height: 1.75; margin: 1.6em 0 1em; }
.pp-red { line-height: 1.8; margin: 0 0 0.8em; font-size: 1.05rem; }
.pp-remi-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: center; margin-bottom: 1em; }
.pp-remi-red p { margin: 0; font-size: 1.05rem; }
.pp-remi { margin: 0; border: 4px dotted #e0322f; padding: 8px; }
.pp-remi img, .pp-slika img { width: 100%; display: block; border-radius: 10px; }
.pp-slika { margin: 8px 0 12px; }
.pp-buka-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px; align-items: center; margin-bottom: 1.4em; }
.pp-tiho { border: 4px dotted #fff; border-radius: 6px; padding: 12px 16px; }
.pp-tiho p { margin: 0; line-height: 1.75; font-size: 1.05rem; }
.pp-telefon-red { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 22px; align-items: start; }
.pp-telefon-red p { margin: 0; line-height: 1.75; font-size: 1.05rem; }
.pp-zavrsna { background: #b8d66a; border-radius: 22px; padding: 14px 20px; text-align: center; margin-top: 12px !important; }
@media (max-width: 760px) {
  .pp-uvod, .pp-rukovanje, .pp-remi-red, .pp-buka-red, .pp-telefon-red { grid-template-columns: 1fr; }
  .pp-gospodin { max-width: 150px; margin: 0 auto; }
  .pp-belo { margin-left: 0; max-width: none; }
  .pp-zeleno { max-width: none; }
  .okvir-lekcije.pp { padding: 22px 14px; }
}

/* ---------- Lekcija "Veliki turnir" ---------- */

.tur-kralj { max-width: 260px; float: right; margin: 0.2em 0 1em 1.2em; }
.tur-strip { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; clear: both; margin: 1.4em 0; border-top: 6px solid #e2c98a; border-bottom: 6px solid #e2c98a; padding: 8px 0; }
.tur-strip img { width: 100%; display: block; height: 100%; object-fit: cover; }
.tur-filip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 1.4em 0; }
.tur-filip .bajka-slika { margin: 0; }
.tur-filip p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 1em; }
.tur-kraj { background: #fbf6e5; border-radius: 18px; padding: 20px 22px; }
.tur-kraj-natpis { text-align: center; font-weight: 600; line-height: 1.8; margin: 0 0 12px; }
.tur-kraj-polje { display: block; }
.tur-sakriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tur-kraj textarea { width: 100%; box-sizing: border-box; border: 2px dashed #b3841f; border-radius: 10px; padding: 12px 14px; font: inherit; line-height: 2; background: repeating-linear-gradient(transparent, transparent 31px, #d9c79a 31px, #d9c79a 32px); background-attachment: local; resize: vertical; }
.tur-kraj-napomena { text-align: center; font-size: 0.9rem; color: #7a6a3a; margin: 6px 0 14px; }
.tur-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tur-par img { width: 100%; display: block; border-radius: 12px; }
@media (max-width: 760px) {
  .tur-kralj { float: none; margin: 1em auto; }
  .tur-strip, .tur-filip, .tur-par { grid-template-columns: 1fr; }
  .tur-strip img { height: auto; }
}

/* ---------- Lekcija "Kralj i pešak protiv kralja" ---------- */

.okvir-lekcije.kp { background: #ead9b4; }
.kp h2 { text-align: center; color: #1c1c1c; }
.kp-fig { color: #9aa92f; }
.kp-protiv { color: #9aa92f; font-size: 0.55em; }
.kp-ram { border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.kp-zel { background: #a8d96e; }
.kp-crv { background: #ef7e7e; }
.kp-zut { background: #f7e04a; }
.kp-roze { background: #ee6f9f; }
.kp-ram .dijagram { color: #1c1c1c; }
.kp-plavo { color: #2b90d0; }
.kp-podnatpis { text-align: center; line-height: 1.6; margin: 8px 0 0; font-size: 1.05rem; }
.kp-zapis { line-height: 1.9; font-size: 1.05rem; margin: 0 0 8px; }
.kp-gore { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.kp-kraljevi { margin: 0; }
.kp-kraljevi img { width: 100%; display: block; border-radius: 16px; }
.kp-uvodni { margin: 0; line-height: 1.75; font-weight: 500; }
.kp-kvadrat-tekst p { margin: 0 0 10px; line-height: 1.75; }
.kp-opozicija { text-align: center; margin: 1.6em 0 0.8em; line-height: 1.75; font-size: 1.1rem; }
.kp-opozicija p { margin: 0; }
.kp-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin: 12px auto 0; max-width: 620px; }
.kp-dva { grid-template-rows: auto auto auto; }
.kp-dva > figure, .kp-dva > div { margin: 0; min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.kp-dva figcaption { text-align: center; margin-top: 6px; font-size: 1.05rem; }
.kp-sedamdeset { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: end; margin: 2em 0 1em; }
.kp-natpis { text-align: center; line-height: 1.6; margin: 0 0 8px; font-size: 1.05rem; }
.kp-princeze { margin: 0; }
.kp-princeze img { width: min(420px, 100%); display: block; margin-left: auto; }
.kp-zuta-traka { background: #fbe470; border-radius: 22px; padding: 18px; margin: 2em 0; }
.kp-zuta-gore { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.kp-tekst-l p, .kp-tekst-d p { margin: 0 0 10px; line-height: 1.7; }
.kp-sa-devojkom { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: end; }
.kp-devojka img { width: 60%; display: block; margin: 0 0 6px auto; }
.kp-devojka p { margin: 0; text-align: right; line-height: 1.7; }
.kp-crvena-traka { background: #ec7f84; border-radius: 22px; padding: 18px; margin: 1.4em 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 0; align-items: start; }
.kp-crvena-traka > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; min-width: 0; }
.kp-crvena-traka p { margin: 0 0 10px; line-height: 1.7; }
.kp-crv-a p { text-align: center; }
.kp-bela { color: #fff; }
.kp-ivicni { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr); gap: 0; align-items: center; margin: 2em 0 1em; }
.kp-boginja { margin: 0; z-index: 1; }
.kp-boginja img { width: 100%; display: block; border-radius: 22px; }
.kp-ivicni-tekst { background: #f19bc0; border-radius: 0 22px 22px 0; padding: 16px 22px 16px 34px; line-height: 1.7; }
.kp-ivicni-tekst p { margin: 0 0 6px; }
.kp-ivicni-tekst ul { margin: 0; padding-left: 18px; }
@media (max-width: 860px) {
  .kp-gore, .kp-sedamdeset, .kp-zuta-gore, .kp-sa-devojkom, .kp-crvena-traka, .kp-ivicni { grid-template-columns: 1fr; }
  .kp-crvena-traka { grid-template-rows: none; row-gap: 16px; }
  .kp-crvena-traka > div { display: block; grid-row: auto; }
  .kp-dva { grid-template-rows: none; }
  .kp-dva > figure, .kp-dva > div { display: block; grid-row: auto; }
  .kp-dva { grid-template-columns: 1fr; }
  .kp-princeze img { margin: 0 auto; width: min(320px, 100%); }
  .kp-ivicni-tekst { border-radius: 22px; padding: 16px; }
  .kp-boginja { max-width: 260px; margin: 0 auto -10px; }
  .okvir-lekcije.kp { padding: 22px 12px; }
}

/* ---------- Lekcija "Lavirint sa matiranjem" ---------- */

.okvir-lekcije.lm { background: #dcd8ee; }
.lm-naslov { text-align: center; color: #d8437f; }
.lm-ram { background: #a68bbd; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.lm-ram .dijagram { color: #1c1c1c; }
.lm-gore { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; margin-bottom: 1.4em; }
.lm-san { background: #a58bcb; border-radius: 22px; padding: 20px 22px; text-align: center; line-height: 1.75; font-weight: 500; }
.lm-san p { margin: 0; }
.lm-slika { margin: 0; border-radius: 12px; overflow: hidden; }
.lm-slika img { width: 100%; display: block; }
.lm-dole { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: center; }
.lm-tekst { margin: 0; line-height: 1.8; font-size: 1.05rem; }
.lm-plavo { color: #2b90d0; }
.lm-red { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 1.6em; }
.lm-kolona { min-width: 0; }
.lm-roze { color: #e2337f; font-size: 1.1rem; line-height: 1.55; margin: 0 0 8px; min-height: 112px; }
.lm-vodic { line-height: 1.6; margin: 0 0 8px; font-size: 1.02rem; min-height: 112px; }
.lm-cap { margin-top: 8px; min-height: 0; }
.lm-red2 { align-items: start; }
.lm-kraljevi { margin: 0; text-align: center; }
.lm-kraljevi img { width: 100%; display: block; border-radius: 14px; }
.lm-kraljevi figcaption { line-height: 1.6; margin-top: 8px; }
.lm-mat { text-align: right; min-height: 112px; }
@media (max-width: 860px) {
  .lm-gore, .lm-dole, .lm-red { grid-template-columns: 1fr; }
  .lm-roze, .lm-mat, .lm-vodic { min-height: 0; text-align: left; }
  .okvir-lekcije.lm { padding: 22px 12px; }
}

/* ---------- Lekcija "Matiranje topom i kraljem" ---------- */

.okvir-lekcije.tk { background: #8bc0e8; }
.tk h2 { text-align: center; color: #ffd75e; text-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.tk-fig { color: #1c1c1c; text-shadow: none; }
.tk-protiv { color: #1c1c1c; font-size: 0.55em; text-shadow: none; }
.tk-ram { border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.tk-losos { background: #f2a58c; }
.tk-nar { background: #f2ac5a; }
.tk-zut { background: #f7e04a; }
.tk-ram .dijagram { color: #1c1c1c; }
.tk-nat { margin: 0 0 4px; text-align: right; font-size: 0.95rem; min-height: 1.4em; }
.tk-skriven { visibility: hidden; }
.tk-gore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.9fr); gap: 0; align-items: center; margin: 0.6em 0 1.4em; }
.tk-bubble { background: #fff; border-radius: 18px; padding: 16px 18px; line-height: 1.7; font-weight: 500; }
.tk-bubble p { margin: 0; }
.tk-bl { text-align: right; }
.tk-br .tk-plava { background: #c9e6f6; border-radius: 18px; padding: 8px 12px; margin-top: 8px; }
.tk-filip { margin: 0; z-index: 1; }
.tk-filip img { width: 100%; display: block; border-radius: 20px; }
.tk-zuti { background: #f6de55; border-radius: 22px; padding: 18px; margin: 1.2em 0; }
.tk-opozicija { color: #2b90d0; font-weight: 800; font-size: 1.15rem; line-height: 1.6; margin: 0 0 12px; }
.tk-pojam { color: inherit; text-decoration: underline; }
.tk-op-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tk-kraljevi { width: 100%; display: block; border-radius: 22px; }
.tk-op-red figure { margin: 0; text-align: center; }
.tk-op-red figcaption { font-size: 1.05rem; line-height: 1.5; margin-top: 6px; }
.tk-centar { text-align: center; font-size: 1.1rem; line-height: 1.7; margin: 1.6em 0 0.8em; }
.tk-traka { border-radius: 22px; padding: 14px 22px; margin: 1em auto; max-width: 780px; text-align: center; }
.tk-traka p { margin: 0; line-height: 1.6; font-size: 1.1rem; }
.tk-tamna { background: #5b93c2; color: #fff; }
.tk-narandzasta { background: #f2ac5a; max-width: none; text-align: left; display: inline-block; font-weight: 500; }
.tk-levo { margin: 1.6em 0 0.6em; }
.tk-zuta { background: #f9de52; }
.tk-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tk-tri > div { min-width: 0; }
@media (max-width: 860px) { .tk-tri { grid-template-columns: 1fr; } .tk-skriven { display: none; } }
.tk-nisko { align-items: end; }
.tk-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 16px auto 0; max-width: calc((100% - 32px) / 3 * 2 + 16px); }
@media (max-width: 860px) { .tk-dva { grid-template-columns: 1fr; max-width: none; } }
.tk-razvuci { text-align: center; line-height: 1.6; margin: 0 0 8px; font-size: 1.05rem; }
.tk-finesa { background: #dcecf5; margin: 1.6em -22px; padding: 14px 22px; text-align: center; }
.tk-fin-natpis { display: inline-block; background: #f2ac5a; border-radius: 14px; padding: 6px 22px; font-weight: 800; font-size: 1.2rem; margin: 0 0 6px; }
.tk-fin-tekst { color: #2b90d0; font-size: 1.1rem; line-height: 1.6; margin: 0; }
.tk-onovo { background: #d9edf6; color: #2b3a9a; border-radius: 999px; padding: 8px 26px; text-align: center; display: table; margin: 1.6em auto 1em; }
.tk-imat { display: flex; align-items: flex-end; gap: 12px; }
.tk-imat .tk-ram { flex: 1; }
@media (max-width: 860px) {
  .tk-gore, .tk-op-red { grid-template-columns: 1fr; }
  .tk-bl { text-align: left; }
  .tk-filip { max-width: 360px; margin: 0 auto; }
  .tk-finesa { margin: 1.4em -12px; }
  .tk-imat { flex-direction: column; align-items: stretch; }
  .okvir-lekcije.tk { padding: 22px 12px; }
}

/* ---------- Lekcija "Matiranje sa dva topa" ---------- */

.okvir-lekcije.dt { background: #f7d9b6; }
.dt h2 { text-align: center; color: #d62b2b; }
.dt-figure { color: #2a2a2a; }
.dt-protiv { color: #2a2a2a; font-size: 0.6em; font-weight: 700; }
.dt-ram { background: #f19a7e; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.dt-ram .dijagram { color: #1c1c1c; }
.dt-nat { margin: 0 0 4px; text-align: right; font-size: 0.95rem; }
.dt-gore { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.dt-vitez { width: 100%; display: block; border-radius: 12px; }
.dt-desno { display: flex; flex-direction: column; gap: 18px; }
.dt-kartica { background: #f8bfa5; border-radius: 18px; padding: 16px 20px; }
.dt-kartica p { margin: 0; line-height: 1.75; font-weight: 500; }
.dt-mat { align-self: flex-end; width: min(360px, 100%); }
.dt-sredina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: end; margin-top: 1em; }
.dt-sah { min-width: 0; }
.dt-sah-levo { max-width: 360px; margin-top: 1em; }
.dt-stepenice { margin: 0; background: #f8bfa5; border-radius: 18px; padding: 12px; }
.dt-stepenice img { width: 100%; display: block; border-radius: 10px; }
.dt-traka { background: #f4a48f; border-radius: 22px; padding: 16px 22px; margin: 1.6em 0; text-align: center; font-size: 1.1rem; line-height: 1.7; }
.dt-traka p { margin: 0; }
.dt-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.dt-dva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 340px)); gap: 16px; justify-content: center; margin-top: 16px; }
@media (max-width: 860px) {
  .dt-gore, .dt-sredina { grid-template-columns: 1fr; }
  .dt-vitez { max-width: 220px; margin: 0 auto; }
  .dt-sah-levo { max-width: none; }
  .okvir-lekcije.dt { padding: 22px 12px; }
}

.dt-druga { max-width: 640px; margin: 2em auto 1em; background: #fbe4d5; text-align: center; }
.dt-zuta { max-width: 640px; margin: 1.6em auto; background: #fbf3b8; border-radius: 22px; padding: 16px 22px; text-align: center; line-height: 1.75; }
.dt-zuta p { margin: 0; font-size: 1.05rem; }
.dt-poslednja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: center; margin-top: 1em; }
.dt-plavo-veliko { color: #48a0dc; text-align: right; font-size: 1.25rem; line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .dt-poslednja { grid-template-columns: 1fr; }
  .dt-plavo-veliko { text-align: left; }
}

/* ---------- Lekcija "Matiranje damom i kraljem" ---------- */

.okvir-lekcije.dk { background: #f2ddf0; }
.dk h2 { text-align: center; color: #7a9d63; }
.dk-podnaslov { color: #7d55b8; }
.dk-protiv { color: #7d55b8; font-size: 0.7em; font-weight: 700; }
.dk-ram { background: #a8d96e; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.dk-ram .dijagram { color: #1c1c1c; }
.dk-gore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; align-items: center; margin-bottom: 1em; border-radius: 18px; overflow: hidden; background: #b6c9ec; }
.dk-tekst-levo { padding: 18px 22px; text-align: center; line-height: 1.75; font-weight: 500; }
.dk-tekst-levo p { margin: 0; }
.dk-plavo { color: #3a58a8; }
.dk-boginja { margin: 0; }
.dk-boginja img { width: 100%; display: block; }
.dk-mreza { display: flex; flex-direction: column; gap: 14px; }
.dk-red { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.7fr); gap: 14px; align-items: center; }
.dk-red .dk-t { margin: 0; line-height: 1.7; font-weight: 500; }
.dk-t-levo { text-align: right; }
.dk-t-desno { text-align: left; }
.dk-zelen .dk-t { background: #a8d96e; border-radius: 18px; padding: 12px 14px; }
.dk-onda { text-align: center; font-size: 1.1rem; margin: 1.6em 0 0.8em; }
.dk-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; align-items: start; }
.dk-pat { background: rgba(255,255,255,0.6); border-radius: 18px; padding: 10px; }
.dk-plavo-veliko { color: #2a8fd0; text-align: center; font-weight: 800; font-size: 1.15rem; line-height: 1.5; margin: 0 0 8px; }
.dk-dole { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: end; margin: 1.6em 0; }
.dk-kraljevi { margin: 0; text-align: center; }
.dk-kraljevi img { width: 100%; display: block; border-radius: 16px; }
.dk-kraljevi figcaption { font-size: 1.15rem; line-height: 1.6; margin-top: 8px; }
.dk-mat-natpis { text-align: center; font-size: 1.15rem; margin: 0 0 6px; }
@media (max-width: 860px) {
  .dk-gore, .dk-red, .dk-dole { grid-template-columns: 1fr; }
  .dk-t-levo, .dk-t-desno { text-align: left; }
  .okvir-lekcije.dk { padding: 22px 12px; }
}

/* ---------- Lekcija "Matne i patne slike" ---------- */

.okvir-lekcije.mp { background: #dcebee; }
.mp-ram { border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.mp-zut { background: #f7e04a; }
.mp-plav { background: #a8c1e6; }
.mp-ram .dijagram { color: #1c1c1c; }
.mp-gore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: end; }
.mp-vitez { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 12px; align-items: center; }
.mp-vitez img { width: 100%; display: block; }
.mp-balon { background: #b88fb4; border-radius: 16px; padding: 16px 18px; margin: 0; text-align: center; font-weight: 500; line-height: 1.6; }
.mp-gospodin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 160px); gap: 12px; align-items: start; }
.mp-gospodin img { align-self: end; }
.mp-gospodin .mp-plavo { padding-top: 6px; }
.mp-gospodin img { width: 100%; display: block; }
.mp-plavo { color: #2b3a9a; font-size: 1.15rem; line-height: 1.6; margin: 0; }
.mp-dva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin: 1.4em 0; }
.mp-ljub { background: #8f8dbb; border-radius: 22px; padding: 18px; }
.mp-ljub p { color: #fff; text-align: center; line-height: 1.7; margin: 0 0 12px; font-weight: 500; }
.mp-vezba { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 14px; align-items: center; background: #8fb2df; padding: 12px; margin: 1.4em 0 0; }
.mp-filip { width: 100%; display: block; }
.mp-vezba-tabla { min-width: 0; }
.mp-tekst { line-height: 1.7; text-align: center; font-weight: 500; margin: 0; }
.mp-tekst-plav { color: #1c1c1c; }
.mp-roze { background: #f26d95; color: #1c1c1c; padding: 12px 18px; margin: 0 0 1.4em; text-align: center; font-weight: 500; }
.mp-uvod { line-height: 1.75; font-size: 1.1rem; margin: 1.4em 0 1em; }
.mp-matovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; align-items: start; }
.mp-matovi figure, .mp-patovi figure { margin: 0; text-align: center; }
.mp-matovi figcaption, .mp-patovi figcaption { font-weight: 600; font-size: 1.1rem; margin: 6px 0; }
.mp-patovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; align-items: start; }
.mp-kaspar { background: #f5e78d; border-radius: 6px; padding: 18px; margin: 1.6em 0; max-width: 460px; }
.mp-kaspar-naslov { text-align: center; font-weight: 600; line-height: 1.6; margin: 0 0 10px; }
.mp-kaspar .mp-tekst { margin-top: 12px; font-size: 1.1rem; }
@media (max-width: 860px) {
  .mp-gore, .mp-vezba { grid-template-columns: 1fr; }
  .mp-vitez { grid-template-columns: 130px minmax(0, 1fr); }
  .mp-gospodin { grid-template-columns: minmax(0, 1fr) 120px; }
  .mp-filip { max-width: 140px; margin: 0 auto; }
  .okvir-lekcije.mp { padding: 22px 12px; }
}

/* ---------- Lekcija "Nerešeno!" ---------- */

.ner-ram { border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.ner-zelen { background: #3fae43; }
.ner-crven { background: #d62b2b; }
.ner-zelen .dijagram, .ner-crven .dijagram { color: #fff; }
.ner-plavi { background: #4f8fd0; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.ner-plavi .dijagram { color: #fff; }
.ner-gore { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.ner-filip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: #fff; border-radius: 22px; overflow: hidden; }
.ner-filip img { width: 100%; display: block; }
.ner-filip p { margin: 0; padding: 12px 18px 12px 0; font-weight: 800; line-height: 1.6; text-align: right; }
.ner-mat { display: flex; align-items: center; gap: 16px; }
.ner-mat .ner-ram { flex: 1; }
.ner-nat { margin: 0; color: #42a5e9; font-size: 2rem; font-weight: 500; }
.ner-pat-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; margin: 1.6em 0; }
.ner-plavo { color: #2a8fd0; font-weight: 800; text-align: center; line-height: 1.6; margin: 0 0 10px; }
.ner-posebno { background: #fff; border-radius: 22px; padding: 16px 20px; text-align: center; line-height: 1.7; font-size: 1.05rem; margin: 0 0 14px; }
.ner-pat-tabla { display: flex; align-items: center; gap: 16px; }
.ner-pat-tabla .ner-ram { flex: 1; max-width: 300px; }
.ner-vecni { text-align: center; font-size: 1.1rem; line-height: 1.7; margin: 1.4em 0; }
.ner-vecni-mreza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ner-a { grid-column: 1; grid-row: 1; }
.ner-b { grid-column: 3; grid-row: 1; }
.ner-c { grid-column: 1; grid-row: 2; }
.ner-d { grid-column: 3; grid-row: 2; }
.ner-kralj-blok { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; }
.ner-kralj-blok img { width: min(240px, 100%); display: block; }
.ner-trostruko { background: #bfdcf4; margin: 0; padding: 14px 16px; text-align: center; line-height: 1.7; font-weight: 500; }
.ner-trostruko strong { color: #2a8fd0; }
@media (max-width: 860px) {
  .ner-gore, .ner-pat-red, .ner-filip { grid-template-columns: 1fr; }
  .ner-filip p { padding: 12px 16px; text-align: left; }
  .ner-vecni-mreza { grid-template-columns: 1fr; }
  .ner-a, .ner-b, .ner-c, .ner-d, .ner-kralj-blok { grid-column: 1; grid-row: auto; }
  .ner-mat, .ner-pat-tabla { flex-direction: column; align-items: stretch; }
  .ner-pat-tabla .ner-ram { max-width: none; }
}

.ner-remi { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: center; margin: 2em 0 1em; }
.ner-macevaoci { margin: 0; }
.ner-macevaoci img { width: 100%; display: block; border-radius: 0 0 8px 8px; }
.ner-kartica { background: #f4f2ea; border-radius: 22px; padding: 16px 20px; margin: 0; text-align: center; line-height: 1.75; font-size: 1.05rem; }
.ner-kartica strong { color: #2a8fd0; }
.ner-nekada { line-height: 1.75; font-size: 1.1rem; margin: 1.2em 0 0.8em; }
.ner-nekada strong { color: #2a8fd0; }
.ner-remi-tabla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 1.4em; }
.ner-remi-tabla .ner-plavi { background: #86aede; }
@media (max-width: 860px) {
  .ner-remi, .ner-remi-tabla { grid-template-columns: 1fr; }
}

/* ---------- Lekcija "Šahovski lavirint" ---------- */

.lav-strip { display: flex; flex-direction: column; gap: 6px; }
.lav-rad { display: flex; gap: 6px; }
.lav-rad .lav-p { min-width: 0; height: auto; display: block; }
.lav-tekst { max-width: 760px; }
.lav-tekst p { margin: 0.5em 0; line-height: 1.7; text-align: left; }
.lav-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: center; margin: 1.6em 0; }
.lav-par:has(> .lav-ram:first-child) { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.lav-desno { grid-template-columns: minmax(0, 1fr) minmax(0, 340px) !important; }
.lav-desno .lav-siroko { grid-column: 1 / -1; text-align: right; }
.lav-t { margin: 0; font-size: 1.1rem; line-height: 1.75; font-weight: 500; }
.lav-t strong { font-weight: 800; }
.lav-roze { color: #e2588d; font-weight: 600; text-align: center; }
.lav-ram { background: #f4ea2c; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.lav-ram .dijagram { color: #1c1c1c; }
.lav-znaci { font-size: 1.1rem; line-height: 1.8; margin: 1.6em 0; }
.lav-kraj { position: relative; margin: 1.4em 0 0; }
.lav-devojke { width: 100%; display: block; }
.lav-kraj-tabla { position: absolute; left: 0; bottom: 0; width: min(340px, 50%); }
.lav-zvezda { position: absolute; left: 100%; bottom: 8%; margin: 0; width: 200px; background: rgba(60,60,60,0.85); color: #fff; padding: 22px 26px; font-weight: 600; text-align: center; clip-path: polygon(50% 0, 60% 22%, 86% 14%, 80% 40%, 100% 50%, 78% 62%, 86% 88%, 60% 78%, 50% 100%, 40% 78%, 14% 88%, 22% 62%, 0 50%, 20% 40%, 14% 14%, 40% 22%); }
@media (max-width: 860px) {
  .lav-rad { flex-direction: column; }
  .lav-rad .lav-p { flex: none !important; width: 100%; }
  .lav-par, .lav-par:has(> .lav-ram:first-child), .lav-desno { grid-template-columns: 1fr !important; }
  .lav-desno .lav-siroko { text-align: left; }
  .lav-kraj-tabla { position: static; width: 100%; margin-top: 10px; }
  .lav-zvezda { position: static; width: auto; clip-path: none; border-radius: 12px; margin-top: 10px; }
}

/* ---------- Lekcija "Otkriveni i dvostruki šah" ---------- */

.okvir-lekcije.otk { background: #d7e4ec; }
.otk-ram { background: #c5e8e2; border-radius: 4px; padding: 8px 10px 10px; min-width: 0; }
.otk-ram .dijagram { color: #1c1c1c; }
.otk-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; align-items: start; margin: 1.2em 0; }
.otk-donji figure { margin: 0; }
.otk-donji figcaption { text-align: center; font-weight: 700; margin-top: 8px; line-height: 1.5; }
.otk-sredina { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: center; margin: 1.4em 0; }
.otk-strelac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #a8dcf3; border-radius: 4px; align-items: center; }
.otk-strelac img { width: 100%; display: block; }
.otk-strelac p { margin: 0; padding: 12px 16px; text-align: center; font-weight: 800; font-size: 1.1rem; line-height: 1.6; color: #1c1c1c; }
.otk-glava { display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; gap: 8px; }
.otk-glava img { width: min(240px, 100%); display: block; margin: 0 auto; }
.otk-glava p { margin: 0; font-weight: 600; line-height: 1.6; color: #24567a; }
.otk-zaglavlje { background: #16a3e0; color: #1c1c1c; border-radius: 0 0 22px 22px; text-align: center; padding: 22px 20px; margin: 2.2em auto 1em; max-width: 620px; }
.otk-zaglavlje p { margin: 0; font-size: 1.15rem; font-weight: 500; line-height: 1.6; }
.otk-uglavnom { text-align: right; font-size: 1.1rem; margin: 0.6em 0; }
.otk-odbrana { background: #eaf1f6; color: #2b90d0; text-align: center; font-weight: 600; font-size: 1.1rem; line-height: 1.7; padding: 14px 18px; margin: 1.2em 0; }
.otk-dno { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) minmax(0, 0.7fr); gap: 16px; align-items: end; }
.otk-vitez, .otk-konj { width: 100%; display: block; }
.otk-cetvrta { margin: 0; }
.otk-cetvrta figcaption { text-align: center; font-weight: 700; font-size: 1.15rem; margin-top: 8px; line-height: 1.6; }
@media (max-width: 860px) {
  .otk-sredina, .otk-strelac { grid-template-columns: 1fr; }
  .otk-dno { grid-template-columns: 1fr; }
  .otk-vitez, .otk-konj { max-width: 200px; margin: 0 auto; }
  .otk-uglavnom { text-align: center; }
  .okvir-lekcije.otk { padding: 22px 12px; }
}

/* ---------- Lekcija "Zapisivanje šahovske partije" ---------- */

.nt-en { display: none; }
.jezik-eng .nt-sr { display: none; }
.jezik-eng .nt-en { display: inline; }
.jezik-eng .zap-napomena { display: none; }
.nt { font-weight: 700; white-space: nowrap; }
mark { background: #fff34d; padding: 0 4px; border-radius: 3px; }

.zap-gore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.zap-zadatak { border: 3px dashed #2b2b2b; border-radius: 6px; padding: 12px; }
.zap-zadatak > p { color: #47a742; font-weight: 600; line-height: 1.6; margin: 0 0 10px; }
.zap-zelena, .zap-oranz { background: #5bbf3a; border-radius: 4px; padding: 8px 10px 10px; }
.zap-zelena .dijagram, .zap-oranz .dijagram { color: #1c1c1c; }
.zap-oranz { background: #f7a531; }
.zap-vitez { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px); gap: 10px; align-items: center; background: #fff; border-radius: 20px; padding: 16px 16px 8px 20px; }
.zap-vitez img { width: 100%; display: block; order: 2; }
.zap-balon { margin: 0; font-weight: 600; line-height: 1.7; text-align: center; }
.zap-zuto { background: #fbc74d; border-radius: 22px; padding: 18px 20px; margin: 1.6em 0; }
.zap-zuto > p { margin: 0 0 12px; line-height: 1.7; font-weight: 600; }
.zap-polozaj { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: center; }
.zap-tabla { min-width: 0; }
.zap-spisak { margin: 0; font-weight: 600; line-height: 2; }
.zap-slova { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: #fff; border-radius: 18px; padding: 16px 22px; box-shadow: var(--senka); }
.zap-slova p { margin: 0; font-size: 1.1rem; line-height: 1.7; }
.zap-lista { list-style: none; margin: 0; padding: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.7; }
.zap-lista .ikona-figura { font-size: 1.3em; }
.zap-napomena { text-align: center; font-size: 0.95rem; margin: 0.8em 0 0; color: #555; }
.zap-filip { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 22px; align-items: center; margin: 2em 0 1em; }
.zap-filip-slika img { width: 100%; display: block; }
.zap-balon2 { background: #fff; border: 3px solid #f2d68a; border-radius: 12px; padding: 14px 18px; margin: 0 0 12px; font-weight: 600; line-height: 1.7; }
.zap-filip-tekst p { line-height: 1.75; font-weight: 600; }
.zap-tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; align-items: center; }
.zap-tri figure, .zap-tri-b figure { margin: 0; text-align: center; }
.zap-tri figcaption { font-weight: 700; margin-bottom: 6px; }
.zap-boj { text-align: center; font-weight: 600; line-height: 1.75; margin: 0; }
.zap-pamti { color: #2f3f9e; background: #c3d4ea; padding: 8px 16px; margin: 2em 0 1em; font-size: 1.05rem; text-transform: uppercase; }
.zap-pravilo { display: grid; gap: 10px 20px; margin: 1.6em 0; }
.zap-pravilo p { margin: 0; line-height: 1.75; font-size: 1.05rem; }
.zap-br { display: inline-block; background: #c3d4ea; color: #2f3f9e; font-weight: 800; border-radius: 999px; padding: 0 8px; }
.zap-plavo { color: #2a8fd0; }
.zap-pravilo:not(.zap-jedan) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: #fff; border-radius: 18px; padding: 10px; }
.zap-nule { width: 100%; display: block; border-radius: 14px; }
.zap-dva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 340px)); gap: 20px; justify-content: center; }
.zap-jedna-tabla { grid-template-columns: minmax(0, 340px); }
.zap-tri-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; align-items: start; }
.zap-prazan { visibility: hidden; }
.zap-tri-b figcaption { margin-bottom: 6px; }
.zap-cita { text-align: center; margin: 8px 0 0 !important; font-size: 1rem !important; }
.zap-pot { font-weight: 700; }
.zap-jedan .zap-tabla, .zap-tri-b .zap-tabla { background: #f7a531; border-radius: 4px; padding: 6px 8px 8px; }
.zap-jedan .dijagram, .zap-tri .dijagram { color: #1c1c1c; }
@media (max-width: 860px) {
  .zap-gore, .zap-filip, .zap-polozaj, .zap-slova { grid-template-columns: 1fr; }
  .zap-pravilo:not(.zap-jedan) { grid-template-columns: 1fr; }
  .zap-vitez { grid-template-columns: minmax(0, 1fr) 120px; padding: 12px; }
  .zap-zuto, .zap-slova { padding: 14px; }
}

/* ---------- Lekcija "Zanimljivosti" ---------- */

.zan-uvod { text-align: center; font-weight: 700; font-size: 1.1rem; line-height: 1.7; margin: 0.4em 0 1.4em; }
.zan-ikona { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.45); color: var(--c, #1c1c1c); font-size: 2.4rem; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif; flex-shrink: 0; }
.zan-kartica { display: grid; align-items: center; gap: 20px; border-radius: 20px; padding: 20px 22px; margin: 1.2em 0; }
.zan-kartica p { margin: 0; line-height: 1.75; font-size: 1.05rem; }
.zan-kartica img { width: 100%; display: block; border-radius: 12px; }
.zan-pesak { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 280px); background: #a4c85a; color: #fff; }
.zan-pesak .zan-ikona { background: rgba(255,255,255,0.35); }
.zan-skakac { grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr); border: 4px dotted #f28a3d; background: #fff; }
.zan-lovac { grid-template-columns: 64px minmax(0, 1fr); background: #4bc3ef; }
.zan-lovac img { grid-column: 1 / -1; border-radius: 16px; }
.zan-lovac .zan-ikona { background: #d4eefb; }
.zan-pojam { font-weight: 800; text-decoration: underline; color: inherit; }
.zan-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: center; background: #f5ab91; border-radius: 20px; padding: 18px; margin: 1.2em 0; }
.zan-top p { margin: 0; text-align: center; color: #2f3e9e; font-weight: 600; line-height: 1.75; }
.zan-brod { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.zan-brod img { width: 100%; display: block; }
.zan-brod figcaption { position: absolute; left: 39%; top: 14%; width: 30%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #2f3e9e; font-weight: 600; line-height: 1.4; font-size: clamp(0.7rem, 1.5vw, 1rem); }
.zan-brod .zan-ikona { width: 44px; height: 44px; font-size: 1.7rem; background: transparent; }
.zan-dole { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 0; border-radius: 20px; overflow: hidden; margin: 1.2em 0; }
.zan-dama { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; align-items: center; background: #fff; padding: 20px; border: 2px solid #eee; }
.zan-dama .zan-ikona { grid-column: 1 / 2; margin: 0 auto; background: transparent; }
.zan-dama p { grid-column: 1 / 2; text-align: center; color: #9a6ab7; font-weight: 600; line-height: 1.8; }
.zan-dama img { grid-column: 2 / 3; grid-row: 1 / 3; }
.zan-kralj { background: #e0563f; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.zan-kralj .zan-ikona { background: transparent; align-self: flex-start; }
.zan-kralj p { text-align: right; color: #1c1c1c; font-weight: 600; line-height: 1.7; margin: 0; }
.zan-kralj img { width: 100%; display: block; border: 4px solid #f9e3a5; border-radius: 6px; }
@media (max-width: 860px) {
  .zan-pesak, .zan-skakac { grid-template-columns: 56px minmax(0, 1fr); }
  .zan-pesak img, .zan-skakac img { grid-column: 1 / -1; }
  .zan-skakac img { order: 3; }
  .zan-skakac p { order: 2; }
  .zan-top { grid-template-columns: 1fr; }
  .zan-dole { grid-template-columns: 1fr; }
  .zan-dama { grid-template-columns: 1fr; }
  .zan-dama .zan-ikona, .zan-dama p, .zan-dama img { grid-column: 1; grid-row: auto; }
  .zan-kartica { padding: 14px; }
  .zan-brod figcaption { font-size: 0.7rem; }
}

/* ---------- Lekcija "Zabavne strane" ---------- */

.zab-uvod { display: flex; align-items: center; gap: 22px; background: #2b8fd6; border-radius: 18px; padding: 18px 24px; color: #fff; margin-bottom: 1.6em; }
.zab-uvod p { margin: 0; line-height: 1.7; font-weight: 600; font-size: 1.08rem; }
.zab-zuca { width: 150px; flex-shrink: 0; display: block; }
.zab-naslov { margin: 1.8em 0 0.6em; color: #d5468a; }
.zab-krst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px; align-items: start; background: #2b8fd6; border-radius: 18px; padding: 20px; color: #fff; }
.kr-tragovi { list-style: none; margin: 0; padding: 0; line-height: 1.6; font-weight: 600; }
.kr-tragovi li { margin-bottom: 0.7em; }
.kr-tbr { color: #ffe27a; font-weight: 800; }
.kr-mreza { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 380px; margin: 0 auto; }
.kr-polje, .kr-prazno { aspect-ratio: 1; position: relative; min-width: 0; }
.kr-polje { background: #fff; border-radius: 6px; box-shadow: 0 0 0 3px #f39a3d; }
.kr-zuto { background: #f7ef86; }
.kr-broj { position: absolute; left: 3px; top: 1px; font-size: 0.62rem; font-weight: 800; color: #b5651d; pointer-events: none; z-index: 1; }
.kr-unos { width: 100%; height: 100%; border: 0; background: transparent; text-align: center; font: 800 clamp(0.9rem, 3.6vw, 1.3rem) var(--font-naslov); color: #1c1c1c; text-transform: uppercase; padding: 0; border-radius: 6px; }
.kr-unos:focus { outline: 3px solid #d5468a; outline-offset: -2px; }
.kr-tacno { background: #a8e6a1; }
.kr-greska { background: #f5a3a3; }
.kr-dugmad { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px 0 6px; }
.kr-poruka { min-height: 1.5em; text-align: center; font-weight: 700; margin: 0.4em 0 0; }
.zab-jedan { text-align: center; font-weight: 600; margin: 1em 0; }
.zab-crte { letter-spacing: 0.15em; }
.zab-rebus { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: 20px; align-items: center; background: #b8d8f2; border-radius: 18px; padding: 18px; }
.zab-rebus-slika { width: 100%; display: block; border-radius: 14px; }
.zab-rebus-tekst p { line-height: 1.7; font-weight: 600; margin: 0 0 0.8em; }
.zab-zuca-igra { width: 100%; display: block; }
.zab-igra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-bottom: 1.4em; }
.zab-govor { background: #fbe9a8; border-radius: 22px; padding: 16px 20px; }
.zab-govor p { margin: 0; line-height: 1.7; font-weight: 600; text-align: center; }
.zab-put { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; background: #2b8fd6; border-radius: 18px; padding: 18px; }
.zab-okvir { background: #f5a01f; border-radius: 6px; padding: 8px 10px 10px; }
.zab-tabla .dp.posecen { box-shadow: inset 0 0 0 3px #f5a01f; }
.zab-trag { color: #fff; font-weight: 700; margin: 0 0 8px; }
.kartica { background: var(--boja-kartice, #eee); border-radius: 22px; padding: 16px 18px 18px; position: relative; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.kartica[hidden] { display: none; }
.kartica-polje { display: inline-block; background: #6a3d9a; color: #fff; border-radius: 999px; padding: 2px 12px; font-weight: 800; margin-bottom: 8px; }
.kartica-tekst { margin: 0 0 12px; line-height: 1.7; font-weight: 600; }
.kartica-opcije { display: flex; flex-direction: column; gap: 8px; }
.kartica-opcija { border: 2px solid #4a3a90; background: rgba(255,255,255,0.75); color: #1c1c1c; border-radius: 12px; padding: 10px 12px; font: 600 1rem var(--font-tekst, inherit); text-align: left; cursor: pointer; line-height: 1.5; }
.kartica-opcija:hover, .kartica-opcija:focus-visible { background: #fff; box-shadow: 0 0 0 3px #f5a01f; outline: none; }
.kartica-iznova { margin-top: 10px; background: #f5a01f; }
.kartica-pobeda { width: 120px; display: block; margin: 12px auto 0; }
@media (max-width: 860px) {
  .zab-krst, .zab-put { grid-template-columns: 1fr; padding: 14px; }
  .zab-rebus { grid-template-columns: 130px minmax(0, 1fr); }
  .zab-zuca-igra { grid-column: 1 / -1; width: 110px; margin: 0 auto; }
  .zab-uvod { flex-direction: column; text-align: center; padding: 16px; }
  .zab-zuca { width: 120px; }
}

/* ---------- Lekcija "Vrednost figura i njihova razmena" ---------- */

.vr-uvod { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vr-boginja { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--senka); }
.vr-boginja img { width: 100%; display: block; }
.vr-boginja p { position: absolute; left: 49%; top: 33.5%; width: 50%; height: 21%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; line-height: 1.4; font-size: clamp(0.7rem, 1.3vw, 0.95rem); color: #2a2450; }
.vr-tri { display: flex; flex-direction: column; gap: 14px; }
.vr-ram { background: #e46fa0; border-radius: 6px; padding: 8px 10px 10px; min-width: 0; }
.vr-ram .dijagram { color: #1c1c1c; }
.vr-ram-crv { background: #d62b2b; }
.vr-ram-crv .dijagram { color: #fff; }
.vr-ram-zut { background: #f7c331; }
.vr-vazno { text-align: center; color: #4b3aa0; font-weight: 600; font-size: 1.1rem; border: 3px dotted #7b83c4; border-radius: 10px; padding: 12px 16px; max-width: 460px; margin: 1.4em auto; }
.vr-naslov { color: #2f3f9e; margin: 1.6em 0 0.6em; }
.vr-razmena { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; background: #dbe9f6; border-radius: 22px; padding: 20px; }
.vr-dva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.vr-stavka { line-height: 1.75; margin: 0.8em 0; font-size: 1.05rem; }
.vr-br { color: #3b7bd0; font-weight: 800; }
.vr-kralj label { font-weight: 600; }
.vr-odgovor { width: min(260px, 100%); border: 0; border-bottom: 2px solid #333; background: transparent; font: inherit; padding: 4px; }
.vr-desna { display: flex; flex-direction: column; gap: 14px; }
.vr-komp { text-align: center; font-weight: 600; line-height: 1.7; margin: 0; }
.vr-dama { text-align: center; color: #4b3aa0; font-weight: 600; border: 3px dotted #7b83c4; border-radius: 10px; padding: 10px 14px; margin: 0; background: #eef0fb; }
.vr-zapamti h4 { color: #48b0e3; font-size: 1.3rem; margin: 0 0 0.4em; }
.vr-vrednosti { list-style: none; margin: 0 0 12px; padding: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.9; }
.vr-konopac { width: 100%; display: block; border-radius: 10px; }
.vr-teske { line-height: 1.8; margin: 0; }
.vr-vaga { width: min(320px, 100%); display: block; margin: 0 auto; border-radius: 10px; }
.vr-dve-kolone { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; margin: 2em 0; }
.vr-crveno { color: #d62b2b; font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.vr-crno { color: #1c1c1c; }
.vr-topovi { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 1.6em 0; }
.vr-topovi img { width: 100%; display: block; border-radius: 22px; }
.vr-topovi p { margin: 0; text-align: center; font-size: 1.05rem; line-height: 1.75; font-weight: 600; }
.vr-dno { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; background: #aec7e6; border-radius: 22px; padding: 18px; }
.vr-dno-levo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.vr-dno-tekst p { margin: 0 0 0.9em; line-height: 1.7; text-align: center; font-weight: 500; }
.vr-plavo { color: #2a6fbd; font-weight: 800 !important; }
.vr-dno-desno { background: #b9d4ee; border-radius: 16px; padding: 12px; }
.vr-kraj { text-align: center; font-weight: 700; margin: 0 0 8px; }
.vr-devojka { margin: 1.4em auto 0; max-width: 220px; }
.vr-devojka img { width: 100%; display: block; border-radius: 14px; }
@media (max-width: 860px) {
  .vr-uvod, .vr-razmena, .vr-topovi, .vr-dno, .vr-dno-levo { grid-template-columns: 1fr; }
  .vr-razmena { padding: 8px; }
  .vr-dno { padding: 8px; }
  .vr-boginja p { font-size: 0.85rem; }
}

/* ---------- Lekcija "Šahovska notacija" ---------- */

.not-uvod { background: #f5a01f; border-radius: 16px; padding: 14px 20px; margin: 0.4em 0 1em; text-align: center; }
.not-uvod p { margin: 0; font-weight: 600; line-height: 1.6; }
.not-red { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; background: #a9a2c4; border-radius: 18px; padding: 16px; }
.not-zadatak { margin: 0; }
.not-zadatak img { width: 100%; display: block; border-radius: 10px; }
.not-desno { display: flex; flex-direction: column; gap: 12px; }
.not-filip { width: 100%; display: block; border-radius: 12px; }
.not-balon { background: #c3b3e0; border: 4px solid #f5a01f; border-radius: 8px; padding: 12px 14px; margin: 0; text-align: center; line-height: 1.6; font-weight: 600; }
.not-tekst-okvir { background: #c3b3e0; border: 4px solid #f5a01f; border-radius: 8px; padding: 14px 20px; margin: 1.6em 0 1em; line-height: 1.75; font-weight: 600; }
.not-tekst-okvir p { margin: 0; }
.not-dve { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; align-items: center; margin: 1.2em 0; }
.not-okvir { background: #f5a01f; border-radius: 6px; padding: 8px 10px 10px; min-width: 0; }
.not-traka { background: #f5a01f; color: #3d2aa0; text-align: center; font-weight: 600; line-height: 1.6; padding: 12px 14px; margin: 0; border-radius: 8px; }
.not-vau { text-align: center; font-weight: 700; margin: 1.6em 0 0; }
.not-imena .dp { font-size: clamp(0.62rem, 2.3vw, 0.85rem); font-weight: 600; color: #1c1c1c; overflow: hidden; }
.not-imena .dp span { pointer-events: none; }
.not-podmornice { background: #e2a6cf; border-radius: 22px; padding: 18px; margin: 2em 0 1.2em; }
.not-podm-gore { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: center; margin-bottom: 14px; }
.not-filip-glava { width: 100%; display: block; }
.not-podm-gore p, .not-podm-dole { margin: 0; line-height: 1.7; font-weight: 600; }
.not-oblici { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #e8e6f0; border-radius: 16px; padding: 12px; }
.not-oblik { display: flex; justify-content: center; }
.not-podmornica { width: 100%; max-width: 64px; }
.not-podmornica rect { fill: #fff6d0; stroke: #8a7a45; stroke-width: 0.05; }
.not-alat { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff6d8; border-radius: 14px; padding: 14px 18px; margin: 1.4em 0; }
.not-alat p { margin: 0; flex: 1 1 260px; line-height: 1.6; font-weight: 600; }
.not-igra > div { min-width: 0; }
.not-izgovor { display: flex; padding: 4px 1.4em; font-size: clamp(0.7rem, 2.6vw, 1.05rem); font-weight: 600; }
.not-izgovor span { flex: 1; text-align: center; }
.not-igra .test-dijagram { background: #f5a01f; border-radius: 6px; }
@media (max-width: 760px) {
  .not-red { grid-template-columns: 1fr; }
  .not-podm-gore { grid-template-columns: 90px minmax(0, 1fr); }
  .not-oblici { grid-column: 1 / -1; }
  .not-podmornice { padding: 14px; }
}

/* ---------- Lekcija "Uslovi za rokadu" ---------- */

.usl-glavni { color: #e23c3c; text-align: center; font-size: 1.5rem; margin: 0.2em 0 0.8em; }
.usl-tekst { font-weight: 800; font-size: 1.12rem; line-height: 1.6; margin: 0 0 0.7em; }
.usl-centar { text-align: center; }
.usl-br { color: #e23c3c; }
.usl-opis { font-weight: 600; line-height: 1.7; margin: 0.6em 0 0; text-align: center; }
.usl-stavka { background: #a8d365; border-radius: 6px; padding: 8px 10px 10px; min-width: 0; }
.usl-stavka .dijagram { color: #1c1c1c; }
.usl-stavka .usl-tekst { margin: 10px 4px 2px; }

.usl-prvi { position: relative; max-width: 640px; margin: 0 auto 2em; aspect-ratio: 1155 / 1170; }
.usl-prvi > img { width: 100%; display: block; }
.usl-prvi > .usl-stavka { position: absolute; left: 27.5%; top: 0; width: 61.7%; }

.usl-drugi { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 28px; align-items: center; background: #fdd9a0; border-radius: 22px; padding: 22px; margin: 1.6em 0; }
.usl-luk { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.usl-drugi .usl-tekst { text-align: center; }

.usl-treci { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; align-items: start; background: #e6ecb4; border-radius: 22px; padding: 22px; margin: 1.6em 0; }
.usl-skakavac { margin: 0; }
.usl-skakavac img { width: 100%; max-width: 360px; display: block; margin: 0 auto; border-radius: 10px; }
.usl-cetvrti { margin-top: 1.6em; }
.usl-cetvrta-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; align-items: start; }
.usl-nakovanj { width: 100%; max-width: 380px; display: block; margin: 0 auto; border-radius: 10px; }
.usl-kraj { font-size: 1.1rem; margin: 1.4em 0 0.6em; }

@media (max-width: 760px) {
  .usl-prvi { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; }
  .usl-prvi > img { max-height: 260px; width: auto; max-width: 100%; align-self: flex-start; }
  .usl-prvi > .usl-stavka { position: static; width: auto; }
  .usl-drugi { grid-template-columns: 1fr; padding: 16px; }
  .usl-treci { padding: 14px; }
}

/* ---------- Lekcija "Rokada" ---------- */

.rokada-gore { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 1.6em; }
.rokada-akvarel { margin: 0; position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--senka); background: #fff; }
.rokada-akvarel img { width: 100%; display: block; }
.rokada-akvarel p { position: absolute; margin: 0; line-height: 1.5; font-weight: 600; font-size: clamp(0.8rem, 1.25vw, 0.95rem); }
.rokada-t1 { left: 4%; top: 5%; width: 34%; }
.rokada-t2 { right: 3%; bottom: 3%; width: 46%; text-align: center; }
.rokada-pravilo p { line-height: 1.8; margin: 0 0 1em; font-size: 1.05rem; }
.rokada-pravilo .rokada-zapamti { color: #2a8fd0; font-weight: 700; }
.rokada-podnaslov { text-align: center; margin: 1.4em 0 0; font-weight: 600; }
.rokada-tabla .dijagram { color: #fff; }
.rokada-tabla { background: #b184c9; border-radius: 6px; padding: 8px 10px 10px; }
.rokada-jedan-potez { margin: 1.6em auto; max-width: 520px; border-radius: 16px; overflow: hidden; background: #e6dcb8; }
.rokada-jedan-potez img { width: 100%; display: block; }
.rokada-jedan-potez figcaption { background: #8fd3e4; text-align: center; font-weight: 700; font-size: 1.15rem; padding: 8px 12px; }
.rokada-pesme { background: #d8cfae; border-radius: 22px; padding: 22px; margin: 1.8em 0; display: flex; flex-direction: column; gap: 22px; }
.rokada-pesma-red { display: flex; gap: 20px; align-items: center; }
.rokada-pesma-red img { width: 150px; flex-shrink: 0; border-radius: 18px; display: block; }
.rokada-pesma-red p { margin: 0; line-height: 1.75; font-weight: 600; }
.rokada-dvorac { background: #e6dfb8; border-radius: 22px; padding: 22px; display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; overflow: hidden; }
.rokada-dvorac p { flex: 1 1 260px; margin: 0; line-height: 1.8; font-size: 1.08rem; }
.rokada-dvorac img { flex: 1 1 320px; max-width: 460px; width: 100%; display: block; margin: 0 auto -22px; }
@media (max-width: 760px) {
  .rokada-gore { grid-template-columns: 1fr; }
  .rokada-akvarel { display: flex; flex-direction: column; background: #fff; }
  .rokada-akvarel p { position: static; width: auto; padding: 12px 16px 0; text-align: left; font-size: 1rem; line-height: 1.6; }
  .rokada-akvarel img { order: 2; }
  .rokada-t1 { order: 1; }
  .rokada-t2 { order: 3; padding-bottom: 14px; }
  .rokada-pesma-red { flex-direction: column; text-align: left; }
  .rokada-pesme { padding: 16px; }
  .rokada-dvorac { padding: 16px 16px 0; }
  .rokada-dvorac img { margin-bottom: 0; }
}

.test-donji { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.test-upis { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; }
.test-upis input { width: 7.5em; border: 0; border-bottom: 2px solid #333; background: transparent; font: inherit; padding: 2px 4px; }
.test-danene { display: inline-flex; gap: 10px; }
.test-dn { border: 2px solid transparent; background: transparent; font: inherit; font-weight: 700; padding: 2px 14px; border-radius: 999px; cursor: pointer; }
.test-dn[aria-pressed="true"] { border-color: #e02f2f; }
.test2-pravila { display: flex; flex-direction: column; gap: 2px; color: #2a8fd0; font-size: 1.05rem; }
.test2-bonus { text-align: center; font-weight: 800; font-size: 1.1rem; line-height: 1.6; margin: 2em auto 0; max-width: 620px; }

/* ---------- Lekcija "Tvoj prvi šahovski test" ---------- */

.test-figure { text-align: center; font-size: clamp(1.6rem, 8vw, 2.6rem); line-height: 1.1; margin: 0.2em 0 0.4em; letter-spacing: 0.12em; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif; }
.test-uvod { background: #eef4ef; border-radius: 16px; padding: 20px 24px; margin: 1em 0 1.4em; }
.test-uvod p { line-height: 1.8; margin: 0 0 0.9em; }
.test-uvod p:last-child { margin-bottom: 0; }
.test-srecno { font-size: 1.15rem; }
.test-alat { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff6d8; border-radius: 14px; padding: 14px 18px; margin-bottom: 1.6em; }
.test-alat p { margin: 0; flex: 1 1 260px; line-height: 1.6; font-weight: 600; }
.dugme-manje { padding: 10px 20px; font-size: 0.92rem; }

.test-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px 24px; }
.test-zadatak { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.test-tekst { background: #ffcb52; border-radius: 22px; padding: 12px 16px; display: flex; gap: 8px; align-items: flex-start; min-height: 88px; }
.test-tekst p { margin: 0; line-height: 1.55; font-weight: 600; font-size: 0.98rem; }
.test-broj { flex: 0 0 auto; font-weight: 900; border-radius: 999px; min-width: 1.9em; text-align: center; padding: 0.05em 0.3em; }
.test-poeni { align-self: flex-start; font-weight: 700; border-radius: 999px; padding: 2px 14px; }
.tb-zel { background: #9ccc4f; }
.tb-plav { background: #4fb4ec; }
.tb-nar { background: #f5972a; }
.tb-ljub { background: #d79ad0; }
.tb-crv { background: #e23c3c; color: #fff; }
.test-dijagram { background: #ffcb52; border-radius: 6px; padding: 8px 10px 10px; }
.test-dijagram .dp { cursor: pointer; position: relative; }
.test-dijagram .dp.m-zeleno { background: #62c15b; }
.test-dijagram .dp.m-crveno { background: #f06a63; }
.test-dijagram .dp.m-plavo { background: #5aaaf0; }
.test-dijagram .dp.m-krug::after { content: ""; position: absolute; inset: 6%; border: 3px solid #e02f2f; border-radius: 50%; pointer-events: none; }

.test-rezultat { display: flex; gap: 22px; align-items: center; background: #e8e9bc; border-radius: 22px; padding: 18px 24px; margin: 2em 0 1em; }
.test-rezultat img { width: 120px; flex-shrink: 0; border-radius: 10px; display: block; }
.test-rezultat p { margin: 0 0 0.6em; line-height: 1.6; padding: 4px 10px; border-radius: 10px; }
.test-rez-red.aktivno { background: #fff; box-shadow: 0 0 0 3px #62c15b; }
.test-unos { display: block; margin-top: 0.8em; font-weight: 700; }
.test-unos input { width: 5em; padding: 6px 10px; border-radius: 8px; border: 2px solid #b3841f; font: inherit; margin-left: 6px; }
@media (max-width: 640px) {
  .test-rezultat { flex-direction: column; text-align: left; padding: 16px; }
  .test-uvod { padding: 16px; }
}

/* ---------- Lekcija "Pozicije za razigravanje" ---------- */

.pozicije-uvod { text-align: center; font-weight: 600; line-height: 1.8; max-width: 760px; margin: 0 auto 1.8em; }
.pozicije-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px;
  justify-items: center;
}
.pozicija { margin: 0; width: 100%; max-width: 380px; background: var(--boja-poz); border-radius: 14px; padding: 10px 12px 12px; position: relative; }
.pozicija-broj { display: block; font-weight: 900; font-size: 1.3rem; color: #fff; margin: 0 0 4px 4px; }
.pozicija .dijagram { color: #fff; }

/* ---------- Lekcija "Kralj" ---------- */

.govor-siva { background: #e9e9f2; }
.govor-crvena { background: #f4a48b; }
.kralj-kraljevi {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 28px;
  align-items: center;
  background: #b8b0d8;
  border-radius: 18px;
  padding: 22px;
  margin: 1.8em 0;
}
.kralj-kraljevi > div { text-align: center; }
.kralj-crven { color: #e23c3c; font-weight: 900; font-size: 1.35rem; line-height: 1.4; margin: 0 0 0.6em; }
.kralj-slika { width: min(230px, 80%); display: block; margin: 0 auto 0.8em; border-radius: 10px; }
.kralj-pitanje { line-height: 1.75; margin: 0; }
@media (max-width: 760px) {
  .kralj-kraljevi { grid-template-columns: 1fr; padding: 18px 14px; }
}

/* ---------- Lekcija "Skakač" ---------- */

.govor-plava { background: #e3f1fb; }
.skakac-uvod { text-align: center; font-weight: 700; font-size: 1.1rem; line-height: 1.8; margin: 0.6em 0 0; }
.slovo-g { color: #e8527a; font-weight: 900; font-size: 1.35em; }
.bajka-slika-bez-okvira { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.pesma + .bajka-slika-bez-okvira, .bajka-slika-bez-okvira + .pesma { margin-top: 1.2em; }

/* ---------- Lekcija "Šahovski sat" ---------- */

.govor-sat { background: #f7cc7e; }
.govor-slika-sat { width: 150px; border-radius: 0; }
.dd-opis-gore { margin: 0 auto 10px; }
.sat-tekst { max-width: 760px; margin: 0 auto; }
.sat-tekst p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.1em; }
.sat-uvod { text-align: center; font-weight: 700; font-size: 1.08rem; margin: 1.8em 0 1em; }

.sat-okvir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #aadaea;
  border-radius: 18px;
  padding: 24px 0;
  margin: 1.8em 0;
}
.sat-kolona { padding: 0 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.sat-kolona + .sat-kolona { border-left: 2px solid var(--boja-tamna); }
.sat-kolona p { margin: 0; line-height: 1.75; }
.sat-kolona img { width: 100%; max-width: 420px; display: block; margin: 0 auto; }

.sat-koraci { display: flex; gap: 26px; align-items: center; justify-content: space-between; margin: 1.8em 0; flex-wrap: wrap; }
.sat-koraci-tekst { flex: 1 1 280px; }
.sat-naslov { font-weight: 800; font-size: 1.08rem; margin-bottom: 0.8em; }
.sat-lista { list-style: none; padding: 0; margin: 0; counter-reset: korak; }
.sat-lista li {
  counter-increment: korak;
  color: var(--boja-cyan-tamna);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1em;
}
.sat-lista li::before { content: counter(korak) ". "; }
.sat-policajka { width: min(300px, 100%); border-radius: 0; display: block; margin: 0 auto; }

.sat-igra {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px) 1fr;
  gap: 24px;
  align-items: center;
  margin: 1.8em 0;
}
.sat-igra p { line-height: 1.75; margin: 0 0 1em; }
.sat-igra > p { text-align: right; }

@media (max-width: 760px) {
  .sat-okvir { grid-template-columns: 1fr; gap: 24px; padding: 20px 0; }
  .sat-kolona + .sat-kolona { border-left: 0; border-top: 2px solid var(--boja-tamna); padding-top: 24px; }
  .sat-kolona { padding-left: 16px; padding-right: 16px; }
  .sat-igra { grid-template-columns: 1fr; }
  .sat-igra > p { text-align: left; }
}

/* ---------- Lekcija "Pešak" ---------- */

.dijagrami-tri { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: center; }
.promocija-okvir {
  background: #f9c3a3;
  border-radius: 18px;
  padding: 22px 22px 26px;
  margin: 1.8em 0;
}
.promocija-okvir > p { line-height: 1.75; margin: 0; }
.promocija-okvir .dijagrami { margin: 1.2em 0; }
.promocija-slika { width: min(200px, 80%); border-radius: 12px; display: block; }
.pojam-plav { color: var(--boja-cyan-tamna); font-weight: 800; }
.straza-slika { width: 190px; max-width: 45%; border-radius: 12px; display: block; }
@media (max-width: 640px) {
  .promocija-okvir { padding: 18px 14px 22px; }
  .straza-slika { max-width: 70%; }
}
.govor-zuta p + p { margin-top: 0.8em; }

/* ---------- Pomoćne klase ---------- */

.tekst-centar { text-align: center; }
.razmak-gore { margin-top: 40px; }

/* Skakačev skok */
.trening-polje.zabranjeno { background: #59493a !important; cursor: not-allowed; }
.trening-polje.zabranjeno .pf { opacity: 0.5; }
.trening-polje.skakac-tu { box-shadow: inset 0 0 0 4px #22b3cc; }
.skok-tabla .trening-polje { cursor: pointer; }
.skok-tabla .trening-polje.skakac-tu { cursor: default; }
.skok-tabla .trening-polje.broj::after { inset: 24%; font-size: 0.75rem; opacity: 0.85; }
.skok-status { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.7; color: var(--boja-tekst-svetliji); }
.skok-status strong { color: var(--boja-tekst); }
.skok-nivo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.skok-nivo-tekst { font-weight: 600; }
.skok-strelica { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--boja-krem-tamnija); background: #fff; cursor: pointer; font-size: 0.9rem; color: var(--boja-tekst); }
.skok-strelica:hover:not(:disabled) { border-color: var(--boja-cyan-tamna); }
.skok-strelica:disabled { opacity: 0.4; cursor: default; }
.skok-lista { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.8; word-break: break-word; }
.skok-lista-naslov { font-weight: 700; }
.skok-zvezdice { color: #f2b705; letter-spacing: 0.1em; }
.skok-rezultat strong { color: var(--boja-tekst); }
.skok-modovi { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
.skok-traka { height: 10px; border-radius: 999px; background: #e6e0cf; overflow: hidden; margin: 0 0 14px; }
.skok-traka > div { height: 100%; width: 0; background: linear-gradient(90deg, #2f9e44, #8bd06b); transition: width 0.2s ease; }
.trening-polje.savet { box-shadow: inset 0 0 0 4px #f2b705, 0 0 12px rgba(242,183,5,0.8); }
.skok-lista { max-height: 130px; overflow-y: auto; }
.skok-modovi { margin-bottom: 12px; }
.skok-omot { position: relative; }
.skok-bravo { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255, 252, 240, 0.72); border-radius: 8px; cursor: pointer; }
.skok-bravo[hidden] { display: none; }
.skok-bravo span { font-size: clamp(2.6rem, 12vw, 5rem); font-weight: 900; letter-spacing: 0.06em; color: #2f9e44; text-shadow: 0 3px 0 #fff, 0 6px 18px rgba(0, 0, 0, 0.25); }
.skok-bravo small { font-size: clamp(2rem, 9vw, 3.5rem); }
.skok-bravo.pokazi span, .skok-bravo.pokazi small { animation: skok-bravo-ulaz 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes skok-bravo-ulaz { from { transform: scale(0.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
/* Pešački rat */
.pesaci-boje { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }

.trening-polje.izabrano { box-shadow: inset 0 0 0 4px #22b3cc; }
.trening-polje.poslednji { box-shadow: inset 0 0 0 3px #f2b705; }
.pesaci-tabla .trening-polje { cursor: pointer; }
.pesaci-napredak { margin: 0 0 14px; font-size: 0.9rem; color: var(--boja-tekst-svetliji); line-height: 1.6; }
.pesaci-napredak strong { color: var(--boja-tekst); }
.pesaci-pravila { margin-top: 26px; background: #f7f3e8; border-radius: 16px; padding: 18px 22px; }
.pesaci-pravila h3 { margin: 0 0 10px; }
.pesaci-pravila ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.75; }
.pesaci-savet { margin: 0; background: #fff6d8; border-radius: 12px; padding: 10px 14px; line-height: 1.7; }
.pesaci-novi-nivo { color: #1f6f3a !important; font-weight: 700 !important; }
/* Ocena računara, remi i predaja (Pešački rat, Klopa) */
.dugme-igra { padding: 10px 16px; border-radius: 999px; border: 2px solid var(--boja-krem-tamnija); background: #fff; color: var(--boja-tekst); font-family: var(--font-naslov); font-weight: 600; cursor: pointer; }
.dugme-igra:hover:not(:disabled) { border-color: var(--boja-cyan-tamna); }
.dugme-igra:disabled { opacity: 0.45; cursor: default; }
.ocena-traka { width: 0; min-width: 100%; margin-top: 12px; background: #f7f3e8; border-radius: 12px; padding: 10px 12px; box-sizing: border-box; }
.ocena-red { display: flex; align-items: center; gap: 8px; }
.ocena-naslov { font-weight: 700; font-size: 0.92rem; }
.ocena-broj { font-variant-numeric: tabular-nums; min-width: 3.2em; }
.ocena-prekidac { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--boja-krem-tamnija); background: #fff; cursor: pointer; font-size: 0.8rem; color: var(--boja-tekst); }
.ocena-bar { height: 12px; margin-top: 8px; border-radius: 999px; background: #3b2f25; overflow: hidden; border: 1px solid #3b2f25; }
.ocena-belo { width: 50%; height: 100%; background: #fffdf7; transition: width 0.35s ease; }
.ocena-opis { margin-top: 6px; font-size: 0.88rem; color: var(--boja-tekst-svetliji); }
.ocena-telo[hidden], #ocena-telo[hidden] { display: none; }

/* Trener (assets/js/ai-trener) */
.trener { margin: 0 0 16px; background: #eef7fb; border: 2px solid #bfe3ef; border-radius: 14px; padding: 10px 12px; }
.trener-glava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trener-naslov { font-family: var(--font-naslov); font-weight: 700; margin-right: auto; }
.trener-pomoc { padding: 6px 12px; font-size: 0.85rem; }
.trener-poruke { margin-top: 8px; }
.trener-poruke[hidden] { display: none; }
.trener-poruka { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff; border-left: 4px solid #8fd3e8; line-height: 1.5; font-size: 0.93rem; }
.trener-poruka:first-child { margin-top: 0; }
.trener-greska { border-left-color: #d9534f; background: #fff3f2; }
.trener-upozorenje { border-left-color: #f0a500; background: #fff8e6; }
.trener-pohvala { border-left-color: #3f9a3f; background: #f0faef; }
.trener-savet { border-left-color: #22b3cc; }
.trener-iskljucen { background: #f4f4f4; border-color: #e2e2e2; }
.trener-iskljucen .trener-poruke { display: none; }
.trening-polje.istaknuto { box-shadow: inset 0 0 0 4px #22b3cc, 0 0 12px rgba(34,179,204,0.8); }

/* Klopa (antišah) */
.klopa-broj { margin: 0 0 14px; font-weight: 600; }
.klopa-unapredi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; background: #fff6d8; border-radius: 12px; }
.klopa-unapredi[hidden] { display: none; }
.klopa-unapredi-tekst { flex-basis: 100%; font-weight: 700; }
.klopa-unap-dugme { width: 48px; height: 48px; padding: 4px; border-radius: 10px; border: 2px solid var(--boja-krem-tamnija); background: #f0e6d2; cursor: pointer; font-size: 1.6rem; }
.klopa-unap-dugme:hover { border-color: var(--boja-cyan-tamna); }
/* Memorija: mat na slepo */
.mem-slepi { width: min(404px, 100%); box-sizing: border-box; background: #fff6d8; border-radius: 16px; padding: 22px 20px; text-align: center; }
.mem-slepi-red { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.6; }
.mem-slepi-red strong { color: var(--boja-cyan-tamna); }
.mem-slepi-red span { font-weight: 800; }
.mem-slepi-pitanje { margin: 14px 0 4px; font-weight: 800; font-size: 1.1rem; color: var(--boja-cyan-tamna); }
.mem-slepi-napomena { margin: 0 0 14px; font-size: 0.85rem; color: var(--boja-tekst-svetliji); }
.mem-slepi-forma label { display: block; font-weight: 700; margin-bottom: 6px; }
.mem-slepi-unos { display: flex; gap: 8px; }
.mem-slepi-unos input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 1.1rem; border: 2px solid var(--boja-krem-tamnija); border-radius: 10px; }
.mem-slepi-unos input:focus { outline: 2px solid var(--boja-cyan); border-color: var(--boja-cyan-tamna); }
.mem-slepi-primer { margin: 12px 0 0; font-size: 0.85rem; color: var(--boja-tekst-svetliji); }
/* Memorija: izbor vežbe */
.mem-modovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 22px; }
.mem-mod { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--boja-krem-tamnija); background: #fff; color: var(--boja-tekst); font: inherit; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.mem-mod:hover { border-color: var(--boja-cyan); }
.mem-mod.aktivan { border-color: var(--boja-cyan-tamna); background: #e9f9fc; box-shadow: 0 0 0 2px rgba(34,211,238,0.35); }
.mem-mod-ime { font-weight: 800; font-size: 1rem; }
.mem-mod-opis { font-size: 0.82rem; color: var(--boja-tekst-svetliji); line-height: 1.35; }
.trening-polje.cilj::after { content: ""; position: absolute; inset: 4px; border: 3px solid #f2b705; border-radius: 50%; box-shadow: 0 0 10px rgba(242,183,5,0.7); pointer-events: none; }
.trening-polje.tacka::before { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(47,158,68,0.85); pointer-events: none; }
.trening-polje.broj::after { content: attr(data-n); position: absolute; inset: 14%; border-radius: 50%; background: #fbe27a; border: 2px solid #d9a800; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; line-height: 1; color: #1c1c1c; box-shadow: 0 1px 4px rgba(0,0,0,0.35); pointer-events: none; }
.trening-polje.broj.oznaceno-broj::after { background: #8be0f0; border-color: #22b3cc; }
.trening-polje.broj.tacno::after { background: #a6e3a1; border-color: #3f9a3f; }
.trening-polje.broj.netacno::after { background: #f3a6a1; border-color: #c0453f; }
/* Memorija: notacija oko table */
.tt-okvir { display: grid; grid-template-columns: 1.4rem auto 1.4rem; grid-template-rows: 1.4rem auto 1.4rem; }
.tt-gore { grid-column: 2; grid-row: 1; }
.tt-levo { grid-column: 1; grid-row: 2; }
.tt-okvir .trening-tabla { grid-column: 2; grid-row: 2; }
.tt-desno { grid-column: 3; grid-row: 2; }
.tt-dole { grid-column: 2; grid-row: 3; }
.tt-slova, .tt-brojevi { display: flex; font-weight: 800; font-size: 0.85rem; color: var(--boja-tekst-svetliji); line-height: 1; }
.tt-slova span { flex: 1; text-align: center; align-self: center; }
.tt-brojevi { flex-direction: column; }
.tt-brojevi span { flex: 1; display: flex; align-items: center; justify-content: center; }
.trening-savet { background: #fff6d8; border-radius: 12px; padding: 12px 16px; margin: 0 0 22px; line-height: 1.7; font-size: 0.98rem; }
.trening-poruka .trening-lista { line-height: 1.9; }
.trening-poruka .trening-lista .ikona-figura { font-size: 1.3em; }
@media (max-width: 480px) {
  .trening-okvir { padding: 16px 12px; }
  .mem-modovi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mem-mod { padding: 8px 10px; }
  .mem-mod-ime { font-size: 0.92rem; }
  .mem-mod-opis { display: none; }
  .mem-slepi { width: calc(100vw - 72px); padding: 16px 12px; }
  .mem-slepi-red { font-size: 1.1rem; }
  .tt-okvir { grid-template-columns: 1rem auto 1rem; grid-template-rows: 1rem auto 1rem; }
  .tt-slova, .tt-brojevi { font-size: 0.75rem; }
  .tt-okvir .trening-tabla { width: min(360px, calc(100vw - 104px)); height: min(360px, calc(100vw - 104px)); }
}

/* ---------- SVG figure (assets/pieces) ---------- */
/* Znak (Unicode) ostaje u HTML-u zbog teksta i prevoda, ali je providan; figuru crta SVG.
   Set figura: fajlovi *2.svg u assets/pieces (drugi set); za prvi set ukloniti "2" iz putanja ispod. */

.pf {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  user-select: none;
}
.pf.pf-wK { background-image: url("../pieces/wK2.svg"); }
.pf.pf-wQ { background-image: url("../pieces/wQ2.svg"); }
.pf.pf-wR { background-image: url("../pieces/wR2.svg"); }
.pf.pf-wB { background-image: url("../pieces/wB2.svg"); }
.pf.pf-wN { background-image: url("../pieces/wN2.svg"); }
.pf.pf-wP { background-image: url("../pieces/wP2.svg"); }
.pf.pf-bK { background-image: url("../pieces/bK2.svg"); }
.pf.pf-bQ { background-image: url("../pieces/bQ2.svg"); }
.pf.pf-bR { background-image: url("../pieces/bR2.svg"); }
.pf.pf-bB { background-image: url("../pieces/bB2.svg"); }
.pf.pf-bN { background-image: url("../pieces/bN2.svg"); }
.pf.pf-bP { background-image: url("../pieces/bP2.svg"); }
.pf[class*="pf-"] { background-repeat: no-repeat; background-position: center; }
.fig.pf { width: 100%; height: 100%; background-size: 100%; }
.ikona-figura.pf { display: inline-block; width: 0.95em; height: 0.95em; overflow: hidden; white-space: nowrap; vertical-align: -0.12em; margin-right: -0.1em; }
/* u tekstu lekcija su sve figurice bele (i za belog i za crnog), kao u štampanim knjigama */
.okvir-lekcije .ikona-figura.pf-bK { background-image: url("../pieces/wK2.svg"); }
.okvir-lekcije .ikona-figura.pf-bQ { background-image: url("../pieces/wQ2.svg"); }
.okvir-lekcije .ikona-figura.pf-bR { background-image: url("../pieces/wR2.svg"); }
.okvir-lekcije .ikona-figura.pf-bB { background-image: url("../pieces/wB2.svg"); }
.okvir-lekcije .ikona-figura.pf-bN { background-image: url("../pieces/wN2.svg"); }
.okvir-lekcije .ikona-figura.pf-bP { background-image: url("../pieces/wP2.svg"); }
/* tekst lekcija (pasusi, liste, opisi dijagrama) u fontu Times New Roman; naslovi, dugmad i meni ostaju isti */
.okvir-lekcije p, .okvir-lekcije li, .okvir-lekcije figcaption, .okvir-lekcije td, .okvir-lekcije th, .okvir-lekcije dd, .okvir-lekcije dt, .okvir-lekcije blockquote { font-family: "Times New Roman", Times, serif; font-variant-numeric: lining-nums; }
.figura-znak.pf { height: 2.2rem; overflow: hidden; }
.zan-ikona.pf { background-size: 68%; }
.test-figure .pf { display: inline-block; width: 1.1em; height: 1.1em; overflow: hidden; vertical-align: middle; letter-spacing: 0; }
.profil-avatar .pf-avatar { display: block; width: 46px; height: 46px; overflow: hidden; }

/* ---------- Ilustracija teme na stranicama oblasti (otvaranja, završnice) ---------- */
.slika-tema { max-width: 720px; margin: 24px auto; }