/* Šumadija — sajt. Boje su iz igre (traka, zlatna, trava, reka). */
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/PTSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bar: #1b1a14;
  --panel: #24211a;
  --panel-2: #2d2920;
  --line: #3d372b;
  --text: #f5f0e0;
  --muted: #b9b09c;
  --gold: #ffd659;
  --gold-dark: #c9a53a;
  --warn: #ff7359;
  --grass: #6dbb4f;
  --grass-dark: #3f7a33;
  --river: #3f78c4;
  --snow: #e6ecf2;
  --autumn: #c8692b;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: "PT Sans", "Trebuchet MS", system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bar);
  color: var(--text);
  font: 400 1.125rem/1.6 var(--serif);
}
img { max-width: 100%; height: auto; display: block; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff1b8; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--bar); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* --- Gornja traka, kao u igri --- */
.top {
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 700;
}
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-size: 1.3rem; margin-right: auto; }
.brand img { width: 24px; height: 48px; margin: -6px 0; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--text); text-decoration: none; padding: 8px 12px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav a.play { background: var(--gold); color: var(--bar); box-shadow: inset 0 -3px 0 var(--gold-dark); }
.nav a.play:hover { background: #ffe58f; }

/* --- Dugmad: ravni pravougaonici kao u igri --- */
.btn {
  display: inline-block;
  font: 700 1.15rem/1 var(--sans);
  padding: 16px 22px;
  text-decoration: none;
  border: 0;
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35);
}
.btn:hover { background: #3a3428; color: var(--text); }
.btn.gold { background: var(--gold); color: var(--bar); box-shadow: inset 0 -4px 0 var(--gold-dark); }
.btn.gold:hover { background: #ffe58f; color: var(--bar); }
.btn.big { font-size: 1.35rem; padding: 20px 28px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Naslovna: snimak igre preko celog ekrana --- */
.hero {
  position: relative;
  min-height: min(calc(100svh - 61px), 760px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: #5c9c45 url("/img/pozadina-prolece.png") 20% 40% / cover no-repeat;
  image-rendering: pixelated;
}
.hero .card {
  position: relative;
  margin: 0 var(--gutter) clamp(20px, 5vh, 56px);
  max-width: 620px;
  background: rgba(20, 18, 14, .93);
  border-left: 6px solid var(--gold);
  padding: clamp(20px, 3vw, 32px);
  image-rendering: auto;
}
.hero h1 { color: var(--gold); margin-bottom: .2em; }
.hero p.lead { font-size: 1.2rem; }
.hero .small { color: var(--muted); font-size: .95rem; margin: 14px 0 0; }

/* Red borova kao granica između delova. */
/* Ivica šume: dva reda borova na travi, kao na mapi. */
.forest {
  height: 64px;
  background:
    url("/img/s-bor.png") 20px 22px / 40px 40px repeat-x,
    url("/img/s-bor.png") 0 0 / 40px 40px repeat-x,
    #5c9c45;
  image-rendering: pixelated;
}
.forest.autumn {
  background:
    url("/img/s-bor-jesen.png") 20px 22px / 40px 40px repeat-x,
    url("/img/s-bor.png") 0 0 / 40px 40px repeat-x,
    #5c9c45;
}

section { padding: clamp(48px, 8vw, 96px) 0; }
.intro { max-width: 46rem; font-size: 1.2rem; }

/* --- Godišnja doba --- */
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; }
.season { padding: 22px 20px 26px; color: var(--bar); }
.season h3 { margin-bottom: .3em; }
.season p { font-size: 1rem; margin: 0; }
.season .days { font: 700 .95rem var(--sans); opacity: .75; margin-bottom: 10px; display: block; }
.s-spring { background: #8fd16a; }
.s-summer { background: #f0c64a; }
.s-autumn { background: #d9813e; }
.s-winter { background: var(--snow); }

/* --- Slika i tekst naizmenično --- */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.row + .row { margin-top: clamp(48px, 7vw, 88px); }
.row.flip .media { order: 2; }
.media img { width: 100%; border: 4px solid var(--panel-2); }
figure { margin: 0; }
figcaption { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* --- Nivoi sela --- */
.levels { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 4px solid var(--gold); }
.levels li { padding: 20px 18px 0 0; position: relative; }
.levels li::before { content: ""; position: absolute; top: -12px; left: 0; width: 20px; height: 20px; background: var(--gold); }
.levels .houses { display: flex; gap: 2px; height: 48px; align-items: flex-end; margin: 6px 0 12px; }
.levels .houses img { width: 24px; height: 48px; }
.levels h3 { margin: 0; }
.levels p { color: var(--muted); font-size: 1rem; margin: 4px 0 0; }

/* --- Karta krajeva --- */
.regions { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 32px; }
.map { position: relative; aspect-ratio: 4 / 5; background: #4f8f3c; border: 4px solid var(--panel-2); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .pin { position: absolute; transform: translate(-50%, -50%); font: 700 .95rem var(--sans); color: var(--bar); background: var(--gold); padding: 3px 8px; white-space: nowrap; text-decoration: none; }
.map .pin:hover { background: #fff; color: var(--bar); }
.region-list { list-style: none; margin: 0; padding: 0; }
.region-list li { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.region-list li:target { background: var(--panel); outline: 0; }
.region-list h3 { margin: 0 0 4px; }
.region-list .where { color: var(--muted); font: 700 .95rem var(--sans); }
.region-list .pro { margin: 6px 0 0; }
.region-list .con { margin: 2px 0 0; color: var(--muted); }
.region-list .pro::before { content: "+ "; color: var(--grass); font-weight: 700; }
.region-list .con::before { content: "− "; color: var(--warn); font-weight: 700; }

/* --- Platforme --- */
.platforms { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.platforms .phone img { max-height: 620px; width: auto; margin: 0 auto; border: 4px solid var(--panel-2); }
.plat { border-top: 1px solid var(--line); padding: 18px 0; }
.plat:last-child { border-bottom: 1px solid var(--line); }
.plat h3 { margin-bottom: 4px; }
.plat p { margin: 0 0 10px; color: var(--muted); font-size: 1rem; }
.soon { font: 700 .9rem var(--sans); color: var(--bar); background: var(--muted); padding: 2px 8px; vertical-align: middle; }

/* --- Blog --- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.posts li { border-top: 1px solid var(--line); }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts a.post { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; text-decoration: none; color: var(--text); align-items: center; }
.posts a.post:hover h3 { color: var(--gold); }
.posts img { width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--panel-2); }
.posts h3 { margin: 0 0 6px; }
.posts p { margin: 0; color: var(--muted); font-size: 1rem; }
.meta { font: 700 .95rem var(--sans); color: var(--muted); }
.meta .cat { color: var(--grass); }

.article { max-width: 42rem; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--gutter); }
.article h1 { font-size: clamp(2.1rem, 5.5vw, 3.3rem); color: var(--gold); }
.article h2 { font-size: 1.7rem; margin-top: 1.6em; }
.article h3 { margin-top: 1.4em; }
.article figure { margin: 1.6em 0; }
.article figure img { width: 100%; border: 4px solid var(--panel-2); }
.article blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 6px solid var(--gold); color: var(--text); font-style: italic; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1em; }
.article li { margin-bottom: .35em; }
.article .meta { margin-bottom: 28px; display: block; }
.article .back { font: 700 1rem var(--sans); }
.cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; }
.cats span { font: 700 .95rem var(--sans); border: 1px solid var(--line); padding: 4px 10px; color: var(--muted); }

/* --- Strana za reklame --- */
.lp { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.lp-main { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 64px); }
.lp-main h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); color: var(--gold); }
.lp-main ul { padding: 0; list-style: none; margin: 0 0 28px; }
.lp-main li { padding-left: 34px; position: relative; margin-bottom: 10px; }
.lp-main li img { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; padding-left: 40px; position: relative; margin-bottom: 12px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--gold); color: var(--bar); font: 700 1rem/28px var(--sans); text-align: center; }

/* --- Donja traka --- */
.foot { border-top: 1px solid var(--line); background: #15140f; color: var(--muted); font-size: 1rem; padding: 32px 0 40px; }
.foot .wrap { display: flex; gap: 16px 32px; flex-wrap: wrap; justify-content: space-between; }
.foot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; font-family: var(--sans); font-weight: 700; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot p { margin: 0; }

.page { padding-block: clamp(40px, 7vw, 80px); }
.page h1 { color: var(--gold); font-size: clamp(2.2rem, 6vw, 3.6rem); }
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.3em; }
.note { background: var(--panel); border-left: 6px solid var(--gold); padding: 16px 20px; margin: 0 0 1.4em; }

.guide { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.guide nav { position: sticky; top: 16px; font: 700 1rem/1.4 var(--sans); }
.guide nav a { display: block; color: var(--muted); text-decoration: none; padding: 6px 0; }
.guide nav a:hover { color: var(--gold); }
.guide section { padding: 0 0 8px; }
.guide h2 { font-size: 1.7rem; margin-top: 1em; scroll-margin-top: 16px; }

@media (max-width: 860px) {
  .seasons { grid-template-columns: 1fr 1fr; }
  .row, .platforms, .regions, .lp-main { grid-template-columns: 1fr; }
  .row.flip .media { order: 0; }
  .levels { grid-template-columns: 1fr 1fr; row-gap: 28px; border-top: 0; }
  .levels li { border-top: 4px solid var(--gold); }
  .map { max-width: 420px; }
  .guide { grid-template-columns: 1fr; }
  .guide nav { position: static; display: flex; flex-wrap: wrap; gap: 0 16px; }
}
@media (max-width: 520px) {
  body { font-size: 1.06rem; }
  .seasons { grid-template-columns: 1fr; }
  .hero .card { margin: 0 0 0; max-width: none; border-left: 0; border-top: 6px solid var(--gold); }
  .hero { min-height: calc(100svh - 61px); }
  .posts a.post { grid-template-columns: 1fr; gap: 12px; }
  .posts img { width: 100%; }
  .nav a { padding: 8px 8px; }
  .btns .btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}