/* Igra u društvu (js/mreza.js): predvorje, status, tost, ogledalo i video kod gosta */ #mp-panel{position:fixed;inset:0;z-index:90;background:rgba(4,5,5,.86);display:flex;align-items:center;justify-content:center;padding:16px} #mp-panel[hidden]{display:none} #mp-panel .mp-kutija{background:var(--panel,#151816);border:1px solid var(--zut,#d9a441);max-width:620px;width:100%;max-height:92vh;overflow:auto;padding:18px 20px;text-align:left} #mp-panel h2{font-size:28px;color:var(--crv,#c0281f);margin-bottom:10px} #mp-panel p{margin:0 0 10px} .mp-dugmad{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .mp-polje{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-weight:700} .mp-polje input{background:var(--panel2,#1f2421);color:var(--tekst,#ddd);border:1px solid var(--ivica,#303631);font:700 20px var(--kucano,monospace);padding:8px 10px;text-transform:none} #mp-kod{text-transform:uppercase;letter-spacing:.3em} .mp-kod{font:400 64px/1 var(--naslov,Impact);letter-spacing:.2em;color:var(--zlato,#ffd24a);text-align:center;margin:6px 0 10px} .mp-sitno{font-size:13px;color:var(--tih,#8d9187)} .mp-sitno code{color:var(--tekst,#ddd);word-break:break-all} .mp-spisak{display:flex;flex-direction:column;gap:6px;margin:10px 0} .mp-igrac{display:flex;align-items:center;gap:10px;background:#101311;border:1px solid var(--ivica,#303631);padding:5px 8px} .mp-igrac img,.mp-lik img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#0d0f0e} .mp-igrac span{flex:1;color:var(--tih,#8d9187)} .mp-igrac i{font-style:normal;font-size:13px} .mp-likovi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px} .mp-lik{display:flex;flex-direction:column;align-items:center;gap:4px;background:#101311;border:1px solid var(--ivica,#303631);color:var(--tekst,#ddd);padding:10px 6px;cursor:pointer;font:700 13px var(--kucano,monospace)} .mp-lik img{width:64px;height:64px} .mp-lik small{color:var(--tih,#8d9187);font-weight:400} .mp-lik:hover:not(:disabled){border-color:var(--zlato,#ffd24a)} .mp-lik:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed} .mp-zel{color:var(--zel,#86b35c)}.mp-crv{color:var(--crv2,#e2493e)} #mp-traka{position:fixed;left:6px;bottom:6px;z-index:80;background:rgba(10,11,10,.82);border:1px solid var(--ivica,#303631);color:var(--tekst,#ddd);font:13px var(--kucano,monospace);padding:4px 8px;border-radius:5px;cursor:pointer;opacity:.85} #mp-traka:hover{opacity:1} /* tostovi: dole levo iznad trake veze, najviše 3 (js/mreza.js tost); dok je otvoren prozor ne pokrivaju ga (QA 5. okt) */ #mp-tost{position:fixed;left:8px;bottom:30px;z-index:85;display:flex;flex-direction:column;gap:4px;align-items:flex-start;pointer-events:none;max-width:min(460px,40vw)} body:has(#modal.on) #mp-tost,body:has(#noc-sloj.on) #mp-tost{visibility:hidden} body.mq-noc #mp-tost{bottom:94px} /* noću iznad municije i oružja dole levo (QA 5. okt: pokrivao je „[1] CZ 99“) */ #mp-tost .mp-t{background:var(--panel2,#1f2421);border:1px solid var(--zel,#86b35c);color:var(--tekst,#ddd);font:700 13px var(--kucano,monospace);padding:6px 12px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.6)} /* gost */ body.mp-gost{background:#000} #mp-ogledalo{position:fixed;inset:0;z-index:2} #mp-ogledalo .mp-cekaj{position:absolute;inset:0;display:grid;place-items:center;font:400 28px var(--naslov,Impact);color:var(--zut,#d9a441)} #mp-ogledalo #e-noc{background:transparent} .mp-video{position:fixed;z-index:3;pointer-events:none;object-fit:fill;background:#000;display:none} .mp-video.mp-ispod{z-index:1} #mp-noc-dugmad{position:fixed;right:8px;bottom:8px;z-index:60;display:flex;gap:6px} #mp-noc-dugmad[hidden]{display:none} #mp-noc-dugmad button{background:rgba(20,24,21,.8);color:var(--tekst,#ddd);border:1px solid rgba(255,255,255,.35);font:14px var(--naslov,Impact);letter-spacing:.04em;padding:8px 12px;cursor:pointer} #mp-noc-dugmad button:active{background:var(--crv,#c0281f)} /* domaćin: upozorenje kad skloni tab */ #mp-upozorenje{position:fixed;left:0;right:0;top:0;z-index:95;background:var(--crv,#c0281f);color:#fff;font:700 16px var(--kucano,monospace);text-align:center;padding:10px 12px;pointer-events:none} #mp-upozorenje[hidden]{display:none} /* gost noću: moj lik u uglu i moj nišan */ #mp-ja{position:fixed;left:50%;transform:translateX(-50%);top:6px;z-index:60;display:flex;gap:8px;align-items:center;background:rgba(10,11,10,.82);border:2px solid;border-radius:8px;padding:5px 10px 5px 5px;pointer-events:none;font:13px var(--kucano,monospace);color:var(--tekst,#ddd)} #mp-ja[hidden],#mp-nisan[hidden]{display:none} #mp-zasto{position:fixed;left:50%;transform:translateX(-50%);top:58px;z-index:61;max-width:min(560px,calc(100vw - 32px));background:rgba(10,11,10,.88);border:2px solid;border-radius:8px;padding:8px 14px;pointer-events:none;font:bold 14px var(--kucano,monospace);color:#ffd24a;text-align:center} #mp-zasto[hidden]{display:none} /* QA 5. okt: pokrivao je naslov prozora („Čeka se Kadija“, karte), gazdinu traku i red barikade. Dok je prozor otvoren ne vidi se (kao #mp-tost), a noću stoji ispod gornjeg reda (barikada, zdravlje) */ body:has(#modal.on) #mp-zasto,body:has(#noc-sloj.on) #mp-zasto,body:has(#srv-sloj:not([hidden])) #mp-zasto{visibility:hidden} body.mq-noc #mp-zasto{top:100px} .d.mp-oziv{outline:3px solid #ffd24a;outline-offset:2px}.d.mp-oziv:not([disabled]){animation:mpOziv 1.2s ease-in-out infinite} @keyframes mpOziv{50%{outline-color:transparent}} #mp-ja img{width:38px;height:38px;border-radius:50%;object-fit:cover} #mp-ja div{display:flex;flex-direction:column;gap:2px} #mp-ja b{font:400 16px var(--naslov,Impact);letter-spacing:.05em} #mp-ja-or b{color:var(--zlato,#ffd24a)} #mp-nisan{position:fixed;z-index:61;pointer-events:none;width:0;height:0} #mp-nisan i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 0 1px #000} #mp-nisan i::before,#mp-nisan i::after{content:"";position:absolute;background:currentColor} #mp-nisan i::before{left:11px;top:-8px;width:2px;height:38px} #mp-nisan i::after{top:11px;left:-8px;height:2px;width:38px} #mp-nisan.pali i{background:rgba(255,80,60,.35)} #mp-nisan span{position:absolute;left:16px;top:10px;font:700 13px var(--kucano,monospace);text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap} #mp-ogledalo #platno{cursor:none} /* glasanje (js/mreza.js) */ [data-glas]{position:relative} .mp-glas-zag{font:700 14px var(--kucano,monospace);color:var(--zlato,#ffd24a);text-align:center;padding:4px 0 8px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px} /* najava noći: red o tri dela barikade (js/noc2.js .kn-n2) je bio 11.5px, težak za čitanje (QA 5. okt); 14px staje u dva reda */ .kn-intro .kn-n2{font-size:14px;line-height:1.4} .mp-glas-on>button{position:relative} .mp-glasovi{position:absolute;right:4px;top:4px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;max-width:calc(100% - 8px);pointer-events:none} .mp-glasovi span{display:inline-flex;background:rgba(10,11,10,.88);padding:1px 6px 1px 1px;border-radius:11px;align-items:center;gap:4px;font:700 13px var(--kucano,monospace);color:var(--zel,#86b35c);text-transform:none;letter-spacing:0} .mp-glasovi img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--zel,#86b35c)} #mp-presudi{position:fixed;right:10px;top:10px;z-index:96;font-size:16px;padding:8px 12px} #mp-presudi[hidden]{display:none} /* Gost bez animacija (html:not(.an), js/anim-dan.js): ogledalo zameni ceo prozor pri svakoj promeni (i tik glasanja), pa bi ulazne animacije krenule iz početka i karte treptale. Sa animacijama (html.an) nastavi() u js/anim-dan.js drži fazu preko zamene, pa gost vidi nat 20, nat 1, pečat i nagrade jednom (5. okt uveče). */ html:not(.an) body.mp-gost #mp-ogledalo .kutija .dno .d:not(.potvrda-pob):not(:has(.mp-glasovi)):not(:has(.mp-lebdi)),html:not(.an) body.mp-gost #mp-ogledalo .pk-banner,html:not(.an) body.mp-gost #mp-ogledalo .pk-ef,html:not(.an) body.mp-gost #mp-ogledalo .pk-presuda{animation:none!important} /* zvuk od domaćina (gost) */ #mp-zvuk-k{position:fixed;left:6px;bottom:44px;z-index:80;display:flex;align-items:center;gap:6px;background:rgba(10,11,10,.82);border:1px solid var(--ivica,#303631);border-radius:5px;padding:3px 6px;font:13px var(--kucano,monospace);color:var(--tekst,#ddd)} #mp-zvuk-k button{background:none;border:0;color:inherit;font:16px/1 "Noto Color Emoji",sans-serif;cursor:pointer;padding:2px} #mp-zvuk-k input{width:90px} #mp-zvuk-pusti{font:700 13px var(--kucano,monospace)!important;border:1px solid var(--zlato,#ffd24a)!important;border-radius:4px;padding:3px 6px!important;color:var(--zlato,#ffd24a)!important} #mp-zvuk-pusti[hidden]{display:none} /* dijagnostika veze (gost) */ .mp-dijag{margin-top:10px;font:13px var(--kucano,monospace)} .mp-dijag summary{cursor:pointer;color:var(--tih,#8d9187)} .mp-dijag pre{white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;background:#0e100f;border:1px solid var(--ivica,#303631);padding:8px;margin:6px 0;font:13px/1.4 "Courier New",Courier,monospace;color:var(--tekst,#ddd)} /* potvrda izbora (js/jezgro.js potvrdiTreptanjem): pobednik trepne 3 puta, ostali se zatamne */ .potvrda-tece>button{transition:opacity .2s,filter .2s} .potvrda-tece>button.potvrda-gubi{opacity:.35;filter:grayscale(.6)} .potvrda-tece>button.potvrda-pob{animation:potvrdaTrep .3s ease-in-out 3!important;border-color:var(--zlato,#ffd24a)!important;box-shadow:0 0 18px rgba(255,210,74,.55)} @keyframes potvrdaTrep{0%,100%{box-shadow:0 0 6px rgba(255,210,74,.3);background-color:inherit}50%{box-shadow:0 0 26px rgba(255,210,74,.95),inset 0 0 18px rgba(255,210,74,.35);border-color:#fff}} /* glasanje: dugme sa glasom ili pokazivačem blago pulsira; lica onih koji pokazuju su providna */ .mp-glas-on>button:has(.mp-glasovi),[data-glas]>button:has(.mp-lebdi){animation:mpPuls 1s ease-in-out infinite!important} @keyframes mpPuls{0%,100%{box-shadow:0 0 0 rgba(255,210,74,0)}50%{box-shadow:0 0 14px rgba(255,210,74,.45)}} [data-glas]>button{position:relative} .mp-lebdi{position:absolute;left:4px;top:auto;bottom:-16px;z-index:2;pointer-events:none} /* lice ispod donje ivice: ne pokriva prva slova izbora */ .mp-lebdi+.mp-lebdi{left:28px}.mp-lebdi+.mp-lebdi+.mp-lebdi{left:52px} /* QA 5. okt: sa -12px i 24px lice je seklo donji deo slova jednorednog izbora („Da, kupujemo“) */ .mp-lebdi img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid var(--zlato,#ffd24a);opacity:.7} /* plan dana u društvu (js/mp-igra.js) */ #plan-mp h3{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:0 0 4px} .pl-sitno{font:13px var(--kucano,monospace);color:var(--tih,#8d9187)} .pl-lice{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--ivica,#303631);flex:none} .pl-red{display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"l i d" "l c d";gap:0 8px;align-items:center;padding:5px 0;border-top:1px solid var(--ivica,#303631)} .pl-red .pl-lice{grid-area:l}.pl-ime{grid-area:i;display:flex;gap:6px;align-items:baseline;min-width:0}.pl-ime small{color:var(--tih,#8d9187);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-cilj{grid-area:c;font-size:13px;color:var(--zut,#d9a441)} .pl-dug{grid-area:d;display:flex;gap:3px;align-items:center} .pl-dug .d{min-height:30px;padding:2px 6px;font-size:14px} .pl-red.sp .pl-lice{border-color:var(--zel,#86b35c);box-shadow:0 0 0 2px var(--zel,#86b35c)} .pl-kreni{display:flex;gap:8px;align-items:center;margin-top:6px} .pl-glad{margin:0 0 2px;padding:1px 6px;border-left:3px solid #e2493e;background:rgba(226,73,62,.12);color:#ffb3aa;font-size:13px;line-height:1.25} /* hrane nema za večeras (js/mp-igra.js mpGladTxt); zauzima mesto objašnjenja roka (ispod), pa se ništa ne pomera */ .pl-izv ul{margin:4px 0 0;padding-left:16px;font-size:13px} .pl-noc{display:flex;gap:6px;margin-top:8px}.pl-noc .d{flex:1;min-height:38px} .pl-mesta{margin:6px 0} .pl-mesto{border:1px solid var(--ivica,#303631);border-radius:6px;padding:6px 8px;margin:6px 0} .pl-mesto-n{font-weight:700;margin-bottom:4px} .pl-lica{display:flex;gap:4px;align-items:center;min-height:28px} .pl-ai{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .pl-ai-b{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--kucano,sans-serif);text-transform:none;padding:4px 10px;min-height:32px} /* „☐ Nik ide“ / „☑ Nik ide“: prekidač, ne oznaka */ .pl-ai-b .pl-lice{width:20px;height:20px}.pl-ai-b.u{border-color:var(--zel,#86b35c);color:var(--zel,#86b35c)} .pl-mesto-n .pl-mn-d{text-transform:none;letter-spacing:0}.pl-mn-dod{margin:2px 0 4px} /* lica iznad markera: ko šta radi */ .pl-mk{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);display:flex;gap:2px;pointer-events:none;z-index:4} .pl-mk-l{position:relative;display:block} .pl-mk-l .pl-lice{width:24px;height:24px;border:2px solid var(--zut,#d9a441);background:#111} .pl-mk-l.sp .pl-lice{border-color:var(--zel,#86b35c)} .pl-mk-l i{position:absolute;right:-6px;bottom:-4px;font:13px/1 "Noto Color Emoji",sans-serif;font-style:normal} /* oznake i uzvici (js/mp-ping.js): traka uzvika noću, oznaka na mapi danju */ #mp-uzvici{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:62;display:flex;flex-direction:column;gap:6px;align-items:stretch;background:rgba(10,11,10,.7);border:1px solid var(--ivica,#303631);border-radius:8px;padding:6px;max-width:150px} #mp-uzvici[hidden]{display:none} #mp-uzvici button{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(32,37,33,.95);color:var(--tekst,#ddd);border:1px solid rgba(255,255,255,.35);border-radius:6px;font:700 16px var(--kucano,monospace);padding:6px 9px;cursor:pointer} #mp-uzvici button:active{background:var(--crv,#c0281f)} #mp-uzvici span{font:700 13px/1.3 var(--kucano,monospace);color:var(--tih,#8d9187);text-align:center} #mp-uzvici kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid currentColor;border-radius:4px;font:700 13px var(--kucano,monospace);color:var(--zlato,#ffd24a);text-align:center} .mp-pin{position:absolute;z-index:6;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:mpPin .35s ease-out} .mp-pin img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--b,#ffd24a);background:#111;box-shadow:0 4px 12px rgba(0,0,0,.7)} .mp-pin b{order:-1;font:700 15px var(--kucano,monospace);color:var(--b,#ffd24a);text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap} .mp-pin i{position:absolute;left:50%;bottom:-10px;width:22px;height:22px;margin-left:-11px;border:3px solid var(--b,#ffd24a);border-radius:50%;animation:mpPinTalas .9s ease-out infinite} @keyframes mpPin{from{transform:translate(-50%,-140%);opacity:0}} @keyframes mpPinTalas{from{transform:scale(.4);opacity:1}to{transform:scale(2.4);opacity:0}} body.mp-gost #mp-ogledalo .mp-pin,body.mp-gost #mp-ogledalo .mp-pin i{animation:none} /* rok plana dana (js/mp-plan-rok.js): kutija se ne vidi, isto odbrojavanje je u traci gore levo („Plan, čekamo“, js/mp-qol.js), koja broj čita baš iz ovog elementa (i kod gostiju, kroz ogledalo), pa element ostaje u panelu (QA 5. okt: dupli sat) */ #pl-rok{display:none} /* kratka partija „Jedan grad“ (js/jedan-grad.js): rok do Beograda se ne prikazuje */ #e-dan.jg .rok.camac{display:none} /* Uspon u predvorju: domaćin bira (isti izbor kao na „Nova igra“), gost vidi izbor */ #mp-panel .kt-uh{font-size:16px} #mp-panel .kt-ul{font-size:14px} #mp-uspon-g{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;max-width:min(720px,calc(100vw - 32px));background:rgba(10,11,10,.9);border:1px solid var(--zut,#d9a441);border-radius:8px;padding:8px 14px;font:16px var(--kucano,monospace);color:var(--tekst,#ddd);text-align:center;pointer-events:none} #mp-uspon-g b{color:var(--zlato,#ffd24a)} #mp-uspon-g[hidden]{display:none} #mp-panel .mp-kutija:has(.mp-domacin){max-width:860px} .mp-domacin .mp-spisak{display:grid;grid-template-columns:1fr 1fr} /* Plan dana u društvu na računaru: igrači, „Kreni“ i glasanje za noć staju u bočnu traku bez skrolovanja (do 4 igrača na 1440×900). Crtež barikade se tada ne prikazuje (brojevi ostaju), rok je jedan red, izveštaj pokazuje poslednju stavku (dva reda). */ @media (min-width:861px){ #bok .skrol:has(#plan-mp) #bar-crtez-w{display:none!important} #bok .skrol:has(#plan-mp) .blok:has(#v-bar){padding:8px 13px} #bok .skrol:has(#plan-mp) .traka{margin-bottom:5px} #bok .skrol:has(#plan-mp) #d-popravi,#bok .skrol:has(#plan-mp) #d-lek,#bok .skrol:has(#plan-mp) #d-bleja{flex-direction:row;flex-wrap:wrap;min-height:0;padding:4px 6px;gap:2px 6px} #plan-mp{padding-top:8px;padding-bottom:8px} .pl-red{padding:3px 0} .pl-kreni{margin-top:3px}.pl-kreni .d{padding-top:6px;padding-bottom:6px} .pl-izv li:nth-child(n+2){display:none} .pl-izv li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* Otvoreno mesto u planu (kartica sa .pl-mesta; QA 5. okt, 1366x768): stub se ne skroluje. Gore dugmad baze (Lek), pa plan sa rokom na vrhu, pa kartica do dna; plan i kartica se po potrebi skroluju sami. „Idem“ je na dnu kartice (margin-top:auto + lepljivo), pa ne beži kad se iznad nešto promeni (šansa tima, red plana). Trake barikade, zdravlja i morala su tada samo gore (#vrh-stanje). Slika mesta: niža kutija, ista od početka. */ #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta){overflow:hidden} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta)>.blok{flex:0 0 auto} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta)>.blok:not(#kartica):not(#plan-mp):not(#mp-lek):not(:has(#v-bar)){display:none} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) .blok:has(#v-bar){padding:6px 13px} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) .blok:has(#v-bar)>.red,#bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) .blok:has(#v-bar)>.traka{display:none} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) .blok:has(#v-bar)>.dugmad{margin:0} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) :is(#d-popravi,#d-lek,#d-bleja){font-size:13px;line-height:1.15;padding:3px 5px;gap:0 5px} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) :is(#d-popravi,#d-lek,#d-bleja) .cip{display:none} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta)>#plan-mp{flex:0 1 auto;min-height:118px;overflow-y:auto} #bok .skrol:has(#plan-mp) #kartica .pl-mesta .km-zbir{font-size:15px;padding:4px 10px;margin:4px 0} #bok .skrol:has(#plan-mp) #kartica .pl-mesta .km-zbir b{font-size:16px} #bok .skrol:has(#plan-mp) #kartica .pl-mesta .dugmad .d{padding-top:6px;padding-bottom:6px} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta) .pl-sadrzaj>p.pl-sitno{display:none} #bok .skrol:has(#plan-mp):has(#kartica .pl-mesta)>#kartica{flex:1 1 0;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;padding-bottom:6px} #bok .skrol:has(#plan-mp) #kartica:has(.pl-mesta)>*{flex-shrink:0} #bok .skrol:has(#plan-mp) #kartica .pl-mesta{margin-top:auto} #bok .skrol:has(#plan-mp) #kartica .pl-mesta>h3.km-ko{display:none} #bok .skrol:has(#plan-mp) #kartica:has(.pl-mesta) .km-hero .art-sl{max-height:128px !important} #bok .skrol:has(#plan-mp) #kartica .pl-mesto-n{font-size:14px} } /* Plan sa 4 igrača (QA 5. okt, 1366x768): lepljivi „Kreni“ je pokrivao redove 2. do 4. igrača. Sada ništa nije lepljivo: plan uzima koliko mu treba (kartica ostatak, sa svojim skrolom; plan se skroluje sam tek kad kartici ostane 200px). Plan je jedna mreža (.pl-sadrzaj se rastvara): naslov (rok je u traci gore levo), jedan red po igraču, izveštaj u jednom redu, pa „Kreni“ i oba glasanja u istom redu. Dugmad baze gore: dva tanka reda. */ @media (min-width:861px){ #plan-mp{position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:6px} #plan-mp>.pl-sadrzaj{display:contents} #plan-mp::before{content:"";order:1;flex:0 0 100%;height:0} /* prelom: „Kreni“ nikad ne staje u red sa licima */ #plan-mp>*,#plan-mp>.pl-sadrzaj>*{flex:0 0 100%;min-width:0} #plan-mp .pl-red{grid-template-columns:26px 64px minmax(0,1fr) auto;grid-template-areas:"l i c d";align-items:baseline} /* vlasnik 5. okt („dugmad razne veličine“): stalne kolone u svakom redu. Ime je stalne širine (najduže ime lika je 6 slova), pa „u bazi“ počinje na istom mestu; ime i cilj na istoj liniji slova; 🏠 🛠 🍻 i „Spreman?“ u stalnim kolonama, a Nik (bez igrača) ima prazno mesto za „Spreman?“ */ #plan-mp .pl-red>:is(.pl-lice,.pl-dug){align-self:center} #plan-mp .pl-red>:is(.pl-ime,.pl-cilj){line-height:26px} #plan-mp .pl-dug{display:grid;grid-template-columns:repeat(3,32px) 86px;gap:3px} #plan-mp .pl-dug .pl-sp{padding-left:3px;padding-right:3px;white-space:nowrap} #plan-mp .pl-ime small{display:none} #plan-mp .pl-cilj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #plan-mp .pl-izv{order:1;display:flex;gap:8px;align-items:baseline;font-size:13px} #plan-mp .pl-izv summary{flex:none;font-size:14px} #plan-mp .pl-izv ul{margin:0;padding:0;list-style:none;min-width:0} #plan-mp .pl-izv li{-webkit-line-clamp:1} #plan-mp .pl-sadrzaj>.pl-kreni,#plan-mp>.pl-noc{order:2;margin:4px 0 9px;height:44px;align-items:stretch} /* donji red 44px; 9px ispod je mesto za lica glasova (vise ispod dugmeta) */ #plan-mp .pl-sadrzaj>.pl-kreni{flex:0 0 auto} #plan-mp .pl-sadrzaj>.pl-kreni>.pl-sitno{display:none} /* zaglavlje glasanja za noć/dalje (js/mreza.js) bi gurnulo „Kreni“ van ekrana: tekst se ne vidi (isto piše traka „Glasanje, čekamo“ gore levo, lica su na dugmadi), ostaje samo „Presudi odmah“ servera (js/mp-server.js #srv-presudi), samo kod vođe, gore desno pored naslova (sat plana ionako stoji dok traje glasanje) pa ne troši visinu */ #plan-mp>.mp-glas-zag{position:absolute;top:8px;right:18px;z-index:2;padding:0;margin:0} #plan-mp>.mp-glas-zag>.mp-glas-t,#plan-mp>.mp-glas-zag:not(:has(#srv-presudi)),body:not(.mq-ja-vodja) #plan-mp>.mp-glas-zag{display:none} body.mq-ja-vodja #plan-mp:has(>.mp-glas-zag #srv-presudi) .pl-sadrzaj>h3{padding-right:165px;min-height:34px} #plan-mp>.mp-glas-zag #srv-presudi{margin:0;font-size:0;padding:4px 12px;min-height:34px} #plan-mp>.mp-glas-zag #srv-presudi::before{content:"Presudi odmah";font-size:16px} #plan-mp>.pl-noc{flex:1 1 0;padding:0} /* „Kreni“, „Neka padne noć“ i „Planiramo dalje“: ista visina, ista slova (14px, inače „Planiramo dalje“ ne staje u jedan red na 1366), jedan red, sredina */ #plan-mp .pl-kreni>.d,#plan-mp>.pl-noc>.d{display:flex;align-items:center;justify-content:center;height:44px;min-height:0;margin:0;font-size:14px;line-height:1;letter-spacing:.01em;white-space:nowrap} #plan-mp .pl-kreni>.d{min-width:104px;padding:0 8px} #plan-mp>.pl-noc>.d{flex:1 1 0;min-width:0;padding:0 4px} #bok .skrol:has(#plan-mp) .blok:has(#v-bar)>.dugmad:not(#maj-red){display:flex;gap:4px;margin:0} #bok .skrol:has(#plan-mp) :is(#d-popravi,#d-lek,#d-bleja){flex:1 1 auto;flex-wrap:nowrap;white-space:nowrap;font-size:13px;line-height:1.15;padding:3px 5px} #bok .skrol:has(#plan-mp) .blok:has(#v-bar)>#maj-red{margin-top:4px;gap:4px} #bok .skrol:has(#plan-mp) #maj-red .maj-d{min-height:0;padding:2px 4px;gap:1px;font-size:14px;line-height:1.1} #plan-mp .pl-noc .mp-glasovi{top:auto;bottom:-13px} /* glasovi za noć/dalje: samo lica, ispod dugmeta (uska dugmad, ime je pokrivalo „Neka padne noć“; QA 5. okt) */ #plan-mp .pl-noc .mp-glasovi span{font-size:0;gap:0;padding:1px} } @media (min-width:861px) and (max-height:820px){ #bok .skrol:has(#plan-mp) #kartica:has(.pl-mesta) .km-hero .art-sl{max-height:60px !important} /* QA 5. okt: sa 84px je lepljivi blok „Idem“ prekrivao ime mesta */ #bok .skrol:has(#plan-mp) #kartica:has(.pl-mesta) .km-hero h2{padding-top:10px;padding-bottom:8px;font-size:26px} #plan-mp .pl-red{padding:1px 0} #plan-mp .pl-dug .d{min-height:26px} /* otvoreno mesto: red igrača je samo lice i „Spreman?“ (ko gde ide pišu lica na mapi i kartica), dva reda; 4 igrača + Nik + kartica staju bez skrola */ #bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-red{display:flex;flex:0 0 auto;gap:3px;align-items:center;margin:0 0 6px;padding:2px 3px 2px 2px;border:1px solid var(--ivica,#303631);border-radius:16px} #bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-red>:is(.pl-ime,.pl-cilj),#bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-red .pl-b,#bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-izv{display:none} /* izveštaj runde: prozor posle runde i karta bez mesta */ /* čipovi (vlasnik 5. okt): svaki čip sa „Spreman?“ je trećina reda, razmak 6px i vodoravno i uspravno; lik bez igrača (Nik) je samo lice */ #bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-red:has([data-sp]){flex:0 0 calc((100% - 12px) / 3)} #bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-dug{display:flex;flex:1 1 0;min-width:0} #bok .skrol:has(#plan-mp):has(#kartica :is(.pl-mesta,.km-hero)) #plan-mp .pl-dug .pl-sp{flex:1 1 0;height:26px;min-height:0} } /* Kartica baze u planu (proba 5. okt, 1366x768): bila je ispod plana, van ekrana. Isti raspored kao otvoreno mesto: plan gore, kartica do dna sa sopstvenim skrolom; „Krećemo sutra“, pa radnja (Spile) odmah ispod naslova, slika baze se tada ne prikazuje. */ @media (min-width:861px){ #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac){overflow:hidden} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac)>.blok{flex:0 0 auto} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac)>.blok:not(#kartica):not(#plan-mp):not(#mp-lek):not(:has(#v-bar)){display:none} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) .blok:has(#v-bar){padding:6px 13px} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) .blok:has(#v-bar)>.red,#bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) .blok:has(#v-bar)>.traka{display:none} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) .blok:has(#v-bar)>.dugmad{margin:0} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) :is(#d-popravi,#d-lek,#d-bleja){font-size:13px;line-height:1.15;padding:3px 5px;gap:0 5px} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) :is(#d-popravi,#d-lek,#d-bleja) .cip{display:none} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac) .pl-sadrzaj>p.pl-sitno{display:none} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac)>#plan-mp{flex:0 1 auto;min-height:172px;overflow-y:auto} #bok .skrol:has(#plan-mp):has(#kartica #k-trgovac)>#kartica{flex:1 1 0;min-height:170px;overflow-y:auto;display:flex;flex-direction:column} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac)>*{flex-shrink:0;order:3} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac)>h2{order:0;margin:0 0 4px;font-size:20px} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac)>.dugmad:has(#k-trgovac){order:2;margin:0 0 6px} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac)>.dugmad:has(#k-polazak){order:1;margin:0 0 6px} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac) .dugmad>#k-trgovac{order:-1} /* Spile (jedino dugme baze koje je skoro uvek aktivno) ide prvi u svom redu: bio je napola ispod ivice (QA 5. okt) */ #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac) :is(#k-droga,#k-popij,#k-polazak){font-size:13px;line-height:1.2;padding-top:4px;padding-bottom:4px} #bok .skrol:has(#plan-mp) #kartica:has(#k-trgovac)>:is(figure.art-sl,.km-hint){display:none} } /* Kartica mesta bez „Idem“ (pretraženo mesto: Osiguraj ispostavu) u planu: isti raspored kao otvoreno mesto, inače je dugme bilo ispod ekrana (proba 5. okt). */ @media (min-width:861px){ #bok .skrol:has(#plan-mp):has(#kartica .km-hero){overflow:hidden} #bok .skrol:has(#plan-mp):has(#kartica .km-hero)>.blok{flex:0 0 auto} #bok .skrol:has(#plan-mp):has(#kartica .km-hero)>.blok:not(#kartica):not(#plan-mp):not(#mp-lek):not(:has(#v-bar)){display:none} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) .blok:has(#v-bar){padding:6px 13px} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) .blok:has(#v-bar)>.red,#bok .skrol:has(#plan-mp):has(#kartica .km-hero) .blok:has(#v-bar)>.traka{display:none} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) .blok:has(#v-bar)>.dugmad{margin:0} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) :is(#d-popravi,#d-lek,#d-bleja){font-size:13px;line-height:1.15;padding:3px 5px;gap:0 5px} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) :is(#d-popravi,#d-lek,#d-bleja) .cip{display:none} #bok .skrol:has(#plan-mp):has(#kartica .km-hero)>#plan-mp{flex:0 1 auto;min-height:118px;overflow-y:auto} #bok .skrol:has(#plan-mp):has(#kartica .km-hero) .pl-sadrzaj>p.pl-sitno{display:none} #bok .skrol:has(#plan-mp):has(#kartica .km-hero)>#kartica{flex:1 1 0;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;padding-bottom:6px} } /* Dugo ime mesta („Idem: Sulijin magacin (dvorac u Jarkovcima)“) je izlazilo desno van ekrana: dugme se lomi u dva reda (proba 5. okt). #bok ispred: inače pobeđuje „#bok #kartica .dugmad .d{white-space:nowrap}“ i druga kolona (❓ Istraži) izlazi van ekrana. */ #bok #kartica .pl-mesta .dugmad .pl-ja,#kartica .pl-mesta .dugmad .pl-ja{white-space:normal;flex:1 1 auto;min-width:0;line-height:1.15} /* Posle noći u društvu (js/mp-tabla.js): „Svanulo je“ levo, tabla noći desno, dugme ispod; na računaru bez skrolovanja */ @media (min-width:1100px){ #noc-sloj .sloj-unutra:has(.tb-tabla){display:grid;grid-template-columns:minmax(0,540px) minmax(0,700px);gap:10px 18px;align-items:start;justify-content:center;max-width:none} #noc-sloj .sloj-unutra:has(.tb-tabla)>*:not(.tb-tabla){grid-column:1} #noc-sloj .sloj-unutra:has(.tb-tabla)>.kn-nagrada{grid-row:1/span 2} #noc-sloj .sloj-unutra:has(.tb-tabla)>.tb-tabla{grid-column:2;grid-row:1;margin:0} #noc-sloj .sloj-unutra:has(.tb-tabla)>.kn-put{grid-column:2;grid-row:2} #noc-sloj .sloj-unutra:has(.tb-tabla) .kn-red{padding-top:2px;padding-bottom:2px;row-gap:1px} #noc-sloj .sloj-unutra:has(.tb-tabla) .kn-red canvas{width:34px;height:34px} #noc-sloj .tb-tabla th,#noc-sloj .tb-tabla td{padding:3px 4px} #noc-sloj .tb-tabla th{font-size:13px} /* sa „Spasavanja“, „Popravke“ i imenom moći tabla je bila 655 do 707 px u koloni od 600: „Moć“ je izlazila van okvira (proba 5. okt, 1366x768); zato i kolone 540 + 700 */ #noc-sloj .tb-tabla td.tb-lik small{white-space:nowrap} #noc-sloj .tb-tabla td.tb-lik b{white-space:nowrap} /* „👑 Kadija“ u jednom redu: kruna je lomila red MVP-a i pravila ga višim od ostalih (QA 5. okt) */ #noc-sloj .tb-tabla .tb-lice{width:32px;height:32px} #noc-sloj .tb-tabla h2{margin-bottom:4px} #noc-sloj .sloj-unutra:has(.tb-tabla)>#s-ok{grid-column:1/-1;justify-self:center;position:static;box-shadow:none} } /* Najava noći u društvu (opklade, js/mp-tabla.js): na računaru u dve kolone, da „Na barikadu“ i opklade staju bez skrolovanja */ @media (min-width:1100px){ #noc-sloj .sloj-unutra:has(#ok-oklade){display:block;column-count:2;column-gap:28px;max-width:1240px;width:100%} #noc-sloj .sloj-unutra:has(#ok-oklade)>.kn-intro{display:contents} #noc-sloj .sloj-unutra:has(#ok-oklade) .kn-intro>*,#noc-sloj .sloj-unutra:has(#ok-oklade)>#ok-oklade{break-inside:avoid;margin-bottom:8px} #noc-sloj .sloj-unutra:has(#ok-oklade)>#ok-oklade{margin-top:0} #noc-sloj .sloj-unutra:has(#ok-oklade)>#s-ok{display:block;margin:6px auto 0;position:static;box-shadow:none;break-inside:avoid} body.mp-gost #noc-sloj .sloj-unutra:has(#ok-oklade){box-sizing:border-box;padding-left:72px} /* traka uzvika levo (#mp-uzvici) ne pokriva „Noćas:“ */ } /* Pojednostavljenje 5. okt (vlasnik): Uspon u jednom redu (js/karte.js ktUsponRed), u predvorju servera i na „Nova igra“ za jednog igrača. Klik na red (samo kad je nešto otključano) otvara stari blok sa dugmićima 0..8; gost koji nije vođa vidi samo red. */ .kt-usp-red{margin:8px 0} .kt-usp-l{display:inline-block;padding:4px 12px;border:1px solid var(--ivica,#3a3f3c);border-radius:8px;background:#121513} .kt-usp-k{cursor:pointer;border-color:var(--zut,#ffd24a)} .kt-usp-k::after{content:" ▾"} .kt-usp-red.otv .kt-usp-k::after{content:" ▴"} .kt-usp-red:not(.otv)>.kt-uspon{display:none} .kt-usp-red>.kt-uspon{text-align:left} .kt-usp-red .kt-uh>b{display:none} body.mq-nije-vodja #mp-ogledalo .kt-usp-red>.kt-uspon{display:none} body.mq-nije-vodja #mp-ogledalo .kt-usp-k{pointer-events:none;cursor:default;border-color:var(--ivica,#3a3f3c)} body.mq-nije-vodja #mp-ogledalo .kt-usp-k::after{content:none} /* Majstorija (js/majstorija.js mjDugmad) u kartici baze: dugmad su obični redovi baze, kao „Popij rakiju“ */ #kartica #maj-red{display:contents} #kartica #maj-red .maj-sp{opacity:.6} /* Zapovesti čedologije u pauzi (js/mp-qol.js pauzaZap) */ #mq-pauza .mq-pz-zap-d{margin-top:6px} #mq-pauza .mq-pz-zap{max-height:42vh;overflow:auto;text-align:left;margin-top:8px;border-top:1px solid #3a3f3c;padding-top:6px} #mq-pauza .mq-pz-zap h3{margin:0 0 2px} #mq-pauza .mq-pz-zap p{margin:4px 0} /* Runda 3 (vlasnik 5. okt): u planu „Spreman?“ samo u mom redu, tuđi red pokazuje ✔ (spreman) ili ⏳ (još ne). Koji je red moj, kaže svaki pregledač sam (js/mp-igra.js mpJaStil,