:root{
  --noc:#241a4a;        /* pozadina: "gejm najt" indigo */
  --noc2:#2e2263;
  --papir:#fdf8ec;      /* ceduljica iz šešira */
  --mastilo:#241a4a;
  --reflektor:#ffc53d;  /* žuti reflektor */
  --koral:#ff6b6b;
  --sivkasto:#b7aede;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',sans-serif;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(255,197,61,.16), transparent 60%),
    var(--noc);
  color:#efeaff;
  line-height:1.6;
  min-height:100vh;
}
.omotac{max-width:760px;margin:0 auto;padding:0 20px}

/* ---------- zaglavlje ---------- */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;gap:12px;flex-wrap:wrap;
}
.logo{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.05rem;
  color:#fff;letter-spacing:.02em;
}
.logo span{color:var(--reflektor)}

.prekidac{
  display:flex;background:var(--noc2);border-radius:999px;padding:4px;
  border:1px solid rgba(255,255,255,.12);
}
.prekidac a{
  font-family:'Sora',sans-serif;font-weight:600;font-size:.85rem;
  text-decoration:none;background:transparent;color:var(--sivkasto);
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:.2s;
}
.prekidac a.aktivan{background:var(--reflektor);color:var(--mastilo)}
.prekidac a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:26px 0 10px}
h1{
  font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(1.35rem,4.5vw,2rem);
  line-height:1.25;color:#fff;
}
h1 em{font-style:normal;color:var(--reflektor)}
.podnaslov{color:var(--sivkasto);font-size:.95rem;margin-top:10px}

/* ---------- kategorije ---------- */
.kategorije{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:24px 0 8px;
}
.kategorije button{
  font-family:'Sora',sans-serif;font-weight:600;font-size:.83rem;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.2s;
  background:var(--noc2);color:var(--sivkasto);
  border:1px solid rgba(255,255,255,.14);
}
.kategorije button:hover{border-color:var(--reflektor);color:#fff}
.kategorije button.aktivan{
  background:var(--reflektor);color:var(--mastilo);border-color:var(--reflektor);
}
.kategorije button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- ceduljica (kartica sa rečju) ---------- */
.scena{perspective:900px;margin:26px auto 0;max-width:520px}
.ceduljica{
  background:var(--papir);color:var(--mastilo);
  border-radius:6px;
  padding:52px 28px;
  transform:rotate(-1.6deg);
  box-shadow:0 18px 45px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.15);
  position:relative;
  min-height:170px;
  display:flex;align-items:center;justify-content:center;
}
/* "otcepljena" ivica ceduljice */
.ceduljica::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background-image:linear-gradient(135deg,var(--papir) 6px,transparent 0),
                   linear-gradient(225deg,var(--papir) 6px,transparent 0);
  background-size:12px 12px;background-position:top;
  transform:translateY(-9px);background-repeat:repeat-x;
}
.rec{
  font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,6.5vw,2.6rem);
  text-align:center;word-break:break-word;line-height:1.2;
}
.kategorija-oznaka{
  position:absolute;bottom:12px;right:16px;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#9b90c9;
}
@keyframes izvuci{
  0%{transform:rotate(-1.6deg) translateY(26px) rotateX(55deg);opacity:0}
  100%{transform:rotate(-1.6deg) translateY(0) rotateX(0);opacity:1}
}
.ceduljica.nova{animation:izvuci .38s cubic-bezier(.2,.9,.3,1.2)}
@media (prefers-reduced-motion:reduce){
  .ceduljica.nova{animation:none}
}

/* ---------- glavno dugme ---------- */
.akcija{text-align:center;margin:30px 0 8px}
#dugmeNova{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.05rem;
  background:var(--koral);color:#fff;border:none;cursor:pointer;
  padding:16px 42px;border-radius:999px;
  box-shadow:0 8px 24px rgba(255,107,107,.35);
  transition:transform .12s, box-shadow .12s;
}
#dugmeNova:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,107,107,.45)}
#dugmeNova:active{transform:translateY(1px)}
#dugmeNova:focus-visible{outline:3px solid #fff;outline-offset:3px}
.precica{color:#8f84c2;font-size:.8rem;margin-top:10px}
.precica kbd{
  background:var(--noc2);border:1px solid rgba(255,255,255,.2);
  border-radius:5px;padding:1px 7px;font-family:inherit;
}

/* ---------- tajmer ---------- */
.tajmer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:22px 0 10px;flex-wrap:wrap;
}
.tajmer .vreme{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.5rem;
  color:#fff;min-width:92px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.tajmer .vreme.istice{color:var(--koral)}
.tajmer button{
  font-family:'Sora',sans-serif;font-weight:600;font-size:.85rem;
  background:var(--noc2);color:#efeaff;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px 14px;
  transition:.2s;
}
.tajmer button:hover{border-color:var(--reflektor)}
.tajmer button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- oglasi ---------- */
.oglas{
  margin:36px auto;max-width:728px;min-height:100px;
  border:2px dashed rgba(255,255,255,.18);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:#7c72ab;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- tekstualni deo (SEO) ---------- */
.sadrzaj{
  background:var(--noc2);border-radius:var(--radius);
  padding:30px 26px;margin:14px 0;
  border:1px solid rgba(255,255,255,.08);
}
.sadrzaj h2{
  font-family:'Unbounded',sans-serif;font-weight:500;font-size:1.15rem;
  color:var(--reflektor);margin-bottom:12px;
}
.sadrzaj p{color:#d9d2f2;font-size:.95rem;margin-bottom:12px}
.sadrzaj p:last-child{margin-bottom:0}
.sadrzaj ol{margin:0 0 12px 22px;color:#d9d2f2;font-size:.95rem}
.sadrzaj ol li{margin-bottom:6px}

footer{
  text-align:center;color:#7c72ab;font-size:.82rem;
  padding:30px 0 40px;
}