/* Ilustracije (js/art.js): kutije fiksnog odnosa strana, slika se pojavi kad stigne. Klase počinju sa art-. */
.art-img{display:block;opacity:0}
.art-img.art-ok{opacity:1;transition:opacity .18s}
@media (prefers-reduced-motion:reduce){.art-img.art-ok{transition:none}}
.art-sl{position:relative;display:block;margin:0 0 10px;width:100%;max-height:38vh;overflow:hidden;background:#0a0d0c;border:1px solid var(--ivica)}
.art-sl>.art-img{width:100%;height:100%;object-fit:cover}
/* Široka slika gore u prozoru (događaj, nagrada; stil/prozori.css .pk-okv): uspravna i kvadratna slika (portret lika) se seče odozgo, ne po sredini,
   da ostanu oči (QA 5. okt: Luka bez očiju); široke slike ostaju po sredini */
.kutija .pk-okv>figure.art-sl:is(.art-p,.art-k)>.art-img,.ev-okv>figure.art-sl:is(.art-p,.art-k)>.art-img{object-position:50% 22%}
/* uspravna (4:5) i kvadratna: uz tekst, desno */
.art-sl.art-p,.art-sl.art-k{float:right;width:min(34%,150px);max-height:none;margin:2px 0 8px 12px}
/* slika preko starog crteža (platno ostaje ispod kao rezerva) */
.art-ov{position:relative;display:inline-block;line-height:0;flex:none;vertical-align:middle}
.art-ov>.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:inherit}
.art-ov.art-krug{border-radius:50%}
.art-ov.art-krug>.art-img{border:2px solid var(--ivica)}

/* kartica mesta i kartica lika (dan) */
#kartica .art-sl.art-mesto{max-height:min(36vh,230px)}
.art-zag{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.art-zag .art-sl{float:none;width:92px;flex:none;margin:0;border-radius:8px}
.art-zag h2{margin:0}
/* prozor kocke: slika mesta u sceni, ishod (baner) preko nje */
.pk-scena.art-ima{aspect-ratio:16/9;max-height:38vh}
.pk-scena.art-ima .pk-platno{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-scena>.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-scena.art-ima .pk-banner{padding-top:18px;background:linear-gradient(0deg,rgba(6,7,6,.94),rgba(6,7,6,.6) 65%,rgba(6,7,6,0));text-shadow:0 2px 4px #000}
/* Spile: pozadina + portret */
.art-zp{position:relative;display:flex;align-items:flex-end;gap:10px;min-height:118px;padding:8px;margin-bottom:10px;overflow:hidden;border:1px solid var(--ivica);background:#0a0d0c}
.art-zp>.art-zp-poz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-zp>.art-zp-poz.art-ok{opacity:.5}
.art-zp-lik{width:88px;height:110px;border:1px solid var(--ivica);background:#0d0f0e}
.art-zp-lik canvas{width:100% !important;height:100% !important}
.art-zp-t{position:relative;flex:1;min-width:0;font-size:13px;line-height:1.45;text-shadow:0 1px 2px #000,0 0 6px #000}
/* nova igra: ekipa */
.art-ekipa{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;margin:0 0 10px}
.art-cl{margin:0;text-align:center;font:700 13px/1.2 var(--kucano);color:var(--tih)}
.art-cl .art-sl{float:none;width:100%;margin:0 0 2px;border-radius:50%}
.art-cl figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* akt: slika grada u zaglavlju, traka sledećeg grada na mapi puta */
.ak-akt>.art-sl{max-height:30vh}
.ak-cilj.art-cilj{position:relative;align-self:stretch;min-height:56px;border-radius:8px;font-size:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.art-cilj>.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.art-cilj>.art-img.art-ok{opacity:.55}
.art-cilj>span{position:relative;text-shadow:0 1px 3px #000}
/* noć: gazda u najavi, vreme i mehanika na kartici */
.kn-upoz.art-red{display:flex;gap:10px;align-items:center;text-align:left}
.kn-upoz .art-sl{float:none;width:76px;flex:none;margin:0}
.kn-ik.kn-art{position:relative;width:96px;height:54px;display:grid;place-items:center;border:1px solid var(--ivica);background:#0a0d0c;overflow:hidden}
.kn-art>.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Frenki */
.art-fr{width:64px;height:48px;border-radius:8px;overflow:hidden}
.art-fr.art-siv>.art-img{filter:grayscale(1);opacity:.6}
.fr-vrh .art-ov{width:120px;height:120px;border-radius:10px;overflow:hidden;border:1px solid var(--crv2)}
/* kraj: gazda uz najbolji momenat */
.kr-momenat.art-red{display:flow-root}
.kr-momenat .art-ov{float:left;width:42px;height:42px;margin:0 8px 0 0;border-radius:6px;overflow:hidden;background:#0d0f0e}
/* Zid slave: Zombiji */
.art-zombiji{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:8px}
.art-zk{margin:0;text-align:center;font:700 13px/1.25 var(--kucano);color:var(--zut)}
.art-zk .art-sl{float:none;width:100%;margin:0 0 3px;max-height:none}
.art-zk.art-ne{color:var(--tih);letter-spacing:.1em}
.art-senka{aspect-ratio:4/5;display:grid;place-items:center;margin:0 0 3px;background:#0a0d0c;border:1px dashed var(--ivica);font-size:52px;line-height:1}
.art-senka>span{filter:brightness(0) invert(.3)}

/* Pozadine ekrana (artPoz u js/art.js): slika iza sadržaja, providna preko tamne podloge, tekst se ne menja.
   Dok slika ne stigne ili ako fali (img se skloni): ekran je tačno kao pre. Roditelj je sloj (position:fixed) ili .art-pozi. */
img.art-poz{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1;pointer-events:none;margin:0;border:0}
#noc-sloj>img.art-poz,#mp-panel>img.art-poz,#srv-sloj>img.art-poz{position:fixed}
#noc-sloj:has(>img.art-poz.art-ok){background:#060709}
#noc-sloj>img.art-poz.art-ok{opacity:.42;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.45) 100%)}
#mp-panel:has(>img.art-poz.art-ok){background:#040505}
#mp-panel>img.art-poz.art-ok,#srv-sloj>img.art-poz.art-ok{opacity:.4}
#srv-sloj:has(>img.art-poz.art-ok){background:#0c0e0d}
.art-pozi{position:relative;isolation:isolate}
.ak-dolazak>img.art-poz.art-ok{opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.15) 100%)}
.kr-karta>img.art-poz.art-ok{opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.3) 100%)}

/* telefon položen: slika je leva kolona, tekst i dugmad desno; prozor i dalje skroluje */
@media (orientation:landscape) and (max-height:520px){
  .kutija .art-sl,.kutija .art-sl.art-p,.kutija .art-sl.art-k{float:left;width:min(36%,250px);max-height:none;margin:2px 14px 8px 0}
  .kutija .art-sl.art-p,.kutija .art-sl.art-k{width:min(24%,150px)}
  .kutija .pk-scena.art-ima{float:left;width:min(40%,270px);max-height:none;margin:0 14px 8px 0}
  .kutija .pk-scena.art-ima .pk-platno{max-height:none}
  .kutija .ak-akt>.art-sl{max-height:none}
  .art-ekipa{grid-template-columns:repeat(8,minmax(0,1fr))}
  .kutija .art-cl .art-sl,.kutija .art-zag .art-sl,.kutija .art-zk .art-sl{float:none;width:100%;margin:0 0 2px}
  .kn-ik.kn-art{width:64px;height:36px}
  .kn-upoz .art-sl{width:46px}
  .fr-vrh .art-ov{width:96px;height:96px}
}
/* Male ikone umesto emodžija (js/art.js artIkona): stalna kutija, emodži ispod dok slika ne stigne ili ako je nema */
.art-ik{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;flex:none;vertical-align:middle;line-height:1}
.art-ik>.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px}
.art-ik:has(>.art-img.art-ok)>.art-ik-e{visibility:hidden}
.res .rik .art-ik{width:24px;height:24px;font-size:16px}
.rd-ik .art-ik{width:44px;height:44px;font-size:22px}
.rd-ik .art-ik>.art-img{border-radius:6px;box-shadow:0 0 0 1px var(--ivica)}
#moc-dugme .art-ik{width:24px;height:24px;margin:0 6px 0 -4px;font-size:16px}