/* Noć: slojevi preko platna (najava noći, kraj noći sa nagradama). Klase počinju sa kn-. */

/* zajedničko */
.kn-intro, .kn-nagrada { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:600px; }
.kn-chip { display:inline-flex; align-items:center; gap:5px; background:var(--panel2); border:1px solid var(--ivica); border-radius:999px; padding:5px 11px; font:13px/1.25 var(--kucano); color:var(--tekst); }
.kn-chip.ok { border-color:var(--zel); }
.kn-chip.los { border-color:var(--crv2); color:var(--crv2); }

/* ---- najava noći ---- */
.kn-h { display:flex; flex-direction:column; align-items:center; gap:2px; }
.kn-noclabel { font:400 clamp(30px,6vw,52px)/1 var(--naslov); color:var(--crv); letter-spacing:.04em; text-shadow:0 3px 0 #000; }
.kn-mesto { color:var(--zut); font-size:13px; }
.kn-upoz { background:rgba(192,40,31,.16); border:1px solid var(--crv2); color:#f0c9c5; padding:8px 12px; font-size:13px; text-align:center; max-width:100%; }
.kn-dog { display:flex; flex-direction:column; gap:7px; width:100%; }
.kn-dogk { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--zut); border-left-width:4px; padding:8px 11px; text-align:left; }
.kn-ik { font-size:24px; line-height:1; flex:none; width:30px; text-align:center; }
.kn-dogt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kn-dogt b { font:400 16px var(--naslov); letter-spacing:.03em; color:var(--zut); }
.kn-dogt span { font-size:13px; color:var(--tekst); }
.kn-tiho { color:var(--tih); font-size:14px; }
.kn-nocas { font:700 18px/1.3 var(--kucano); color:var(--tekst); text-align:center; }
.kn-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.kn-nik { color:var(--zut); font-size:13px; text-align:center; margin:0; }
.kn-leg { color:var(--tih); font-size:13px; text-align:center; line-height:1.65; }
.kn-leg b { color:var(--tekst); }
.kn-dodir { display:none; }
@media (hover:none),(pointer:coarse) { .kn-tast { display:none; } .kn-dodir { display:block; } }

/* ---- kraj noći: nagradni ekran sa svitanjem ---- */
.kn-nagrada { padding:18px 16px; border-radius:14px;
  background:radial-gradient(130% 115% at 50% 128%, #e9a85a 0%, #b35c30 24%, #553049 50%, #15131b 78%);
  box-shadow:0 0 40px rgba(0,0,0,.5) inset; }
.kn-nagrada h1 { text-shadow:0 3px 0 #000; }
.kn-tiles { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.kn-tile { display:flex; flex-direction:column; align-items:center; gap:1px; background:rgba(14,14,18,.66); border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:8px 12px; min-width:72px; }
.kn-tile.ok { border-color:var(--zel); }
.kn-tile.los { border-color:var(--crv2); }
.kn-tik { font-size:20px; line-height:1; }
.kn-tv { font:400 26px var(--naslov); color:var(--zlato); font-variant-numeric:tabular-nums; line-height:1.05; }
.kn-tl { font-size:13px; color:#d8d2c2; text-transform:uppercase; letter-spacing:.04em; }
.kn-mvp { display:flex; align-items:center; gap:12px; background:rgba(217,164,65,.16); border:1px solid var(--zlato); border-radius:10px; padding:8px 16px 8px 8px; }
.kn-mvp canvas { width:60px; height:60px; border-radius:50%; background:#0d0f0e; border:2px solid var(--zlato); flex:none; }
.kn-mvpt { display:flex; flex-direction:column; text-align:left; }
.kn-mvpl { font-size:13px; color:var(--zlato); letter-spacing:.1em; }
.kn-mvpt b { font:400 22px var(--naslov); color:#fff; }
.kn-mvpt span:last-child { font-size:13px; color:#e7ddc8; }
.kn-dsum { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.kn-redovi { display:flex; flex-direction:column; gap:6px; width:100%; }
.kn-red { display:grid; grid-template-columns:44px 1fr auto; grid-template-areas:"glava ime xpd" "glava xp niv"; align-items:center; gap:3px 10px; background:rgba(12,13,14,.72); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 10px; }
.kn-red canvas { grid-area:glava; width:44px; height:44px; border-radius:50%; background:#0d0f0e; border:2px solid var(--ivica); }
.kn-red.lvl canvas { border-color:var(--zlato); }
.kn-ime { grid-area:ime; font:700 13px var(--kucano); color:var(--tekst); text-align:left; }
.kn-xpd { grid-area:xpd; font:700 13px var(--kucano); color:var(--zel); text-align:right; white-space:nowrap; }
.kn-xp { grid-area:xp; height:8px; background:#0a0b0a; border:1px solid var(--ivica); border-radius:4px; overflow:hidden; }
.kn-xp i { display:block; height:100%; width:0; background:linear-gradient(90deg,#c9a13b,var(--zlato)); transition:width .09s linear; }
.kn-niv { grid-area:niv; font:400 13px var(--naslov); letter-spacing:.03em; color:var(--tih); text-align:right; white-space:nowrap; }
.kn-red.lvl .kn-niv { color:var(--zlato); }
.kn-red.blic { animation:kn-blic .55s ease-out; }
.kn-red.puni { border-color:var(--zlato); background:rgba(40,32,14,.78); }
.kn-red.puni .kn-xpd { color:var(--zlato); }
@keyframes kn-blic { 0% { box-shadow:0 0 0 0 rgba(255,210,74,.75); } 100% { box-shadow:0 0 0 11px rgba(255,210,74,0); } }
/* skok nivoa: zlatni blesak na licu i „NIVO N“ iskoči iznad glave */
.kn-red { position:relative; }
.kn-red.blic canvas { animation:kn-lice .7s ease-out; }
.kn-red.blic[data-pop]::after { content:attr(data-pop); position:absolute; left:2px; top:-6px; width:60px; text-align:center; font:700 13px Anton, Impact, sans-serif; letter-spacing:1px; color:var(--zlato); text-shadow:0 0 6px rgba(255,210,74,.8), 0 1px 2px #000; pointer-events:none; opacity:0; animation:kn-pop 1.4s ease-out; }
@keyframes kn-lice { 0% { box-shadow:0 0 0 0 rgba(255,210,74,.9); filter:brightness(1.9) sepia(.6); } 100% { box-shadow:0 0 0 12px rgba(255,210,74,0); filter:none; } }
@keyframes kn-pop { 0% { opacity:0; transform:translateY(8px) scale(.7); } 20% { opacity:1; transform:translateY(-6px) scale(1.15); } 70% { opacity:1; transform:translateY(-12px) scale(1); } 100% { opacity:0; transform:translateY(-18px); } }
@media (prefers-reduced-motion:reduce) { .kn-red.blic canvas, .kn-red.blic[data-pop]::after { animation:none; } }
.kn-lvlmsg { color:var(--zlato); font-size:13px; text-align:center; }

@media (max-width:860px) {
  .kn-ik { font-size:20px; width:26px; }
  .kn-tile { min-width:62px; padding:6px 9px; }
  .kn-tv { font-size:22px; }
  .kn-mvpt b { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .kn-xp i { transition:none; }
  .kn-red.blic { animation:none; }
}

/* ---- Frenki: prozor posle žrtve na barikadi (js/frenki.js) ---- */
.fr-prozor { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:560px; background:var(--panel); border:1px solid var(--crv2); border-radius:12px; padding:14px 16px; }
.fr-vrh { display:flex; align-items:center; gap:12px; }
.fr-prozor canvas { width:120px; height:84px; flex:none; }
.fr-prozor p { font-size:13.5px; line-height:1.5; }

/* ---- dugme prozora uvek vidljivo; telefon položen: zbijenije da sve stane ---- */
#s-ok { position:sticky; bottom:0; flex:none; z-index:2; box-shadow:0 -8px 16px rgba(5,6,8,.85); }
body.dodir .kn-tast { display:none; }
body.dodir .kn-dodir { display:block; }
@media (orientation:landscape) and (max-height:520px) {
  #noc-sloj { padding:8px 12px; }
  .sloj-unutra { gap:6px; }
  .kn-intro, .kn-nagrada { gap:7px; }
  .kn-noclabel, #noc-sloj h1 { font-size:30px; }
  .kn-dogk { padding:5px 9px; }
  .kn-nagrada { padding:10px 12px; }
  .kn-tile { padding:4px 8px; }
  .kn-red { padding:4px 8px; }
  .kn-red canvas { width:36px; height:36px; }
  #s-ok { font-size:17px; padding:8px 16px; }
}
/* Izazovi hordu (js/akt.js izazovHTML): ulog u najavi noći, nagrada na kraju noći */
.kn-izazov { width:100%; margin:6px 0 2px; border:1px solid var(--crv2); border-radius:8px; padding:8px; background:rgba(120,30,20,.18); }
.kn-izh { font:15px var(--naslov); letter-spacing:.03em; color:#ffb070; margin-bottom:6px; }
.kn-izd { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
@media (max-width:520px) { .kn-izd { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kn-izb { min-height:44px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:2px; padding:5px 7px; font-size:13px; }
.kn-izb small { text-transform:none; font-family:var(--kucano); letter-spacing:0; font-size:13px; color:var(--tih); line-height:1.25; }
.kn-izb.u { border-color:#ffb070; background:rgba(255,140,60,.22); }
.kn-izn { margin:8px 0; padding:7px 10px; border:1px solid #ffb070; border-radius:8px; font-size:13px; }
/* Najava i kraj noći kao pravi ekran (vlasnik, 4. okt: „very bad“): stalna pozadina koja ne zavisi od videa
   (gost dok slika noći ne stigne vidi crno), sadržaj najave u okviru kao ostali prozori (kraj noći već ima svoje kartice). */
body #noc-sloj { position:fixed; inset:0; background:linear-gradient(180deg,rgba(6,7,9,.78) 0%,rgba(6,7,9,.86) 55%,rgba(6,7,9,.94) 100%),url(../slike/art/kljuc-naslov.jpg) 50% 35%/cover no-repeat #060709; }
body #noc-sloj > .sloj-unutra:has(.kn-intro) { background:rgba(22,25,23,.94); border:1px solid var(--zut); padding:18px 24px 20px; box-sizing:border-box; box-shadow:0 14px 44px rgba(0,0,0,.65); }
html body.mp-gost #noc-sloj .sloj-unutra:has(#ok-oklade) { padding-left:24px; }   /* traka uzvika se na najavi ne vidi (stil/mp-qol.css) */
@media (orientation:landscape) and (max-height:520px) { body #noc-sloj > .sloj-unutra:has(.kn-intro) { padding:10px 14px; } }
/* Najava u društvu: opklada je sada u malom izboru (js/pred-noc.js), pa nema potrebe za dve kolone (stil/mreza.css). Kolone su na
   velikom ekranu prelivale red „Izazovi hordu / Opklada / Droga“ i „Na barikadu“ van okvira desno. Jedan centriran okvir, sve u njemu. */
html body #noc-sloj .sloj-unutra:has(#ok-oklade, .kn-pred) { display:flex; flex-direction:column; align-items:center; column-count:auto; width:100%; max-width:680px; margin:auto; }
html body #noc-sloj .sloj-unutra:has(#ok-oklade, .kn-pred) > .kn-intro { display:flex; max-width:none; }
html body #noc-sloj .sloj-unutra:has(#ok-oklade, .kn-pred) > #s-ok { position:static; margin:8px auto 0; box-shadow:none; }
body #noc-sloj .kn-pred-pan { max-height:min(60vh,420px); overflow-y:auto; box-sizing:border-box; }
/* Najava noći na 1366x768 (QA 5. okt): sa mega hordom, vremenom i događajem grada (tri kartice) okvir je bio ~35 px viši od ekrana
   i „Na barikadu“ je bilo odsečeno dole. Gušće razmaci, isti tekst i slike. Telefon položen ima svoja pravila gore. */
@media (min-height:521px) and (max-height:800px) {
  body #noc-sloj > .sloj-unutra:has(.kn-intro) { padding-top:12px; padding-bottom:14px; }
  .kn-intro { gap:6px; }
  .kn-intro .kn-noclabel { font-size:44px; }
  .kn-intro .kn-chip { padding:4px 10px; }
  .kn-dog { gap:5px; }
  .kn-dogk { padding-top:5px; padding-bottom:5px; }
  /* najduža najava (tri kartice i pet redova stanja ekipe) i dalje ne staje: dugme bar ostaje vidljivo dole */
  html body #noc-sloj .sloj-unutra:has(#ok-oklade, .kn-pred) > #s-ok { position:sticky; bottom:6px; box-shadow:0 -8px 16px rgba(5,6,8,.85); }
}