/* Udobnost (js/qol.js): podešavanja, poređenje karata, red „Noćas“, tačkice težine na mapi, Brzo. Klase počinju sa qol-, qp-, qk-, qn-. */

/* ---------- zupčanik ---------- */
.qol-zup{min-width:44px;min-height:44px;padding:0 8px;font:22px/1 "Noto Color Emoji",system-ui,sans-serif;cursor:pointer;background:var(--panel2,#222);color:var(--tekst,#ddd);border:1px solid var(--ivica,#444);border-radius:6px;touch-action:manipulation}
.qol-zup:hover{border-color:var(--zut,#d9a441)}
.qol-zup:focus-visible{outline:2px solid var(--zlato,#ffd24a);outline-offset:2px}
.qol-zup-noc{position:absolute;right:6px;top:calc(8% + 56px);z-index:5;background:rgba(10,10,14,.55);border-color:rgba(255,255,255,.22)}
#mp-pod-zup{position:fixed;right:12px;top:12px;z-index:88;background:rgba(10,11,10,.82)}
body:has(#e-dan.on) #mp-pod-zup,body:has(#e-noc.on) #mp-pod-zup,body.mp-gost #mp-pod-zup{display:none}
#mp-zvuk-k .qol-zup-g{min-width:30px;min-height:28px;font-size:18px;padding:0 4px;margin-left:2px}

/* ---------- panel ---------- */
#mp-pod{position:fixed;inset:0;z-index:99;background:rgba(4,5,5,.72);display:flex;align-items:center;justify-content:center;padding:16px}
#mp-pod[hidden]{display:none}
.qp-kutija{width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--panel,#151816);border:1px solid var(--zut,#d9a441);border-radius:10px;padding:18px 22px;color:var(--tekst,#ddd);font:17px/1.4 var(--kucano,monospace);box-shadow:0 10px 40px rgba(0,0,0,.7)}
.qp-glava{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.qp-glava h2{font:400 30px var(--naslov,Impact,sans-serif);letter-spacing:.04em;margin:0}
.qp-kutija h3{font:400 19px var(--naslov,Impact,sans-serif);letter-spacing:.06em;color:var(--zut,#d9a441);margin:14px 0 6px}
.qp-red{display:flex;align-items:center;gap:12px;min-height:40px}
.qp-red>span:first-child{flex:0 0 96px}
.qp-red input[type=range]{flex:1;min-width:0;accent-color:var(--zut,#d9a441);height:28px}
.qp-red b{flex:0 0 54px;text-align:right;font-variant-numeric:tabular-nums}
.qp-ck{cursor:pointer}
.qp-ck input{width:22px;height:22px;accent-color:var(--zut,#d9a441);flex:none}
.qp-ck span{flex:1 !important}
.qp-nap{margin:4px 0 2px;font-size:14px;color:var(--tih,#8d9187)}
.qp-boje{display:flex;gap:8px;flex-wrap:wrap}
.qp-boja{width:40px;height:40px;border-radius:50%;border:3px solid #333;background:var(--b);cursor:pointer;font:700 13px var(--kucano,monospace);color:#111;padding:0}
.qp-boja.on{border-color:#fff;box-shadow:0 0 0 2px var(--zut,#d9a441)}
.qp-nisan{flex:none;position:relative;width:40px;height:40px;color:var(--qol-nb,#fff)}
.qp-nisan::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-11px 0 0 -11px;border:2px solid currentColor;border-radius:50%;transform:scale(var(--qol-nv,1))}

/* ---------- nišan gosta (js/mreza.js #mp-nisan): veličina i boja ---------- */
#mp-nisan i{transform:scale(var(--qol-nv,1))}
html.qol-nb #mp-nisan{color:var(--qol-nb) !important}

/* ---------- 2. izbor karte ---------- */
.kt-karta.qk .kt-hint{display:none}
.qk-info{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.qk-c{font:700 15px/1.2 var(--kucano);padding:4px 9px;border-radius:12px;border:1px solid var(--tb,#5d625a);color:var(--tekst);background:rgba(0,0,0,.25)}
.qk-c.qk-ima{border-color:var(--zel);color:var(--zel)}
.qk-c.qk-da{border-color:#ffd24a;background:#ffd24a;color:#1a1405}
.kt-karta.qk-zavrsava{box-shadow:0 0 0 3px #ffd24a,0 0 22px rgba(255,210,74,.45)}
#mp-pod-ruka{position:fixed;z-index:97;width:300px;max-height:70vh;overflow:hidden;background:rgba(14,16,15,.97);border:2px solid var(--zut,#d9a441);border-radius:10px;padding:12px 14px;font:16px/1.35 var(--kucano,monospace);color:var(--tekst,#ddd);pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.7)}
#mp-pod-ruka[hidden]{display:none}
#mp-pod-ruka b{display:block;font-size:17px;margin-bottom:6px;color:var(--zut,#d9a441)}
#mp-pod-ruka ul{list-style:none;margin:0;padding:0}
#mp-pod-ruka li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-top:1px solid rgba(255,255,255,.08)}
#mp-pod-ruka li small{color:var(--tih,#8d9187);white-space:nowrap}
#mp-pod-ruka .qr-prazno{color:var(--tih,#8d9187)}

/* ---------- 3. red „Noćas“ ---------- */
.qol-nocas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin:4px 0}
.qn-l{font:700 18px var(--kucano);color:var(--tekst)}
.qn-c{display:inline-flex;align-items:center;gap:5px;font:700 16px/1.2 var(--kucano);padding:4px 10px;border-radius:14px;border:1px solid var(--ivica);background:rgba(0,0,0,.35);color:var(--tekst);white-space:nowrap}
.qn-c i{font-style:normal;font-family:"Noto Color Emoji",sans-serif}
.qn-c.los{border-color:var(--crv2);color:#ffb3ab}
.qn-c.ok{border-color:var(--zel);color:#c6e6a6}
.qn-c.dog{border-color:var(--zut);color:var(--zlato)}
.qn-c.tih{color:var(--tih)}

/* ---------- 4. mapa: tačkice težine (1 do 4), dole desno uz krug; ne povećava marker ---------- */
.mk .qol-pip{position:absolute;right:-6px;bottom:-5px;z-index:3}
.qol-pip{display:inline-flex;gap:2px;padding:2px 3px;border-radius:7px;background:#0b0c0b;border:1px solid rgba(255,255,255,.75);pointer-events:none;line-height:0}
.qol-pip i{display:block;width:6px;height:6px;border-radius:50%;background:var(--tez,#ffd24a)}
#mapa.velike .mk .qol-pip{right:-4px;bottom:-3px;padding:3px 4px;gap:3px}
#mapa.velike .mk .qol-pip i{width:8px;height:8px}
.mk.izabran .qol-pip,.mk:hover .qol-pip{border-color:#fff}
#legenda .qol-pipl{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;margin-left:6px}
#legenda .qol-pipl .qol-pip i{width:6px;height:6px}
.qol-sraf{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px dashed #9a9a9a;background:repeating-linear-gradient(45deg,rgba(226,73,62,.85) 0 2px,transparent 2px 5px)}
#mapa .mk.blok .ik,html.an #mapa .mk.blok .ik{background:repeating-linear-gradient(45deg,rgba(226,73,62,.6) 0 4px,rgba(20,22,21,.85) 4px 9px)}

/* ---------- 5. Brzo (dugme na mapi, samo jedan igrač) ---------- */
#qol-brzo{position:absolute;left:10px;top:10px;z-index:9;font:700 15px var(--kucano);text-transform:none;letter-spacing:0;min-height:40px;background:rgba(10,11,10,.86);border-color:var(--ivica)}
#qol-brzo.on{border-color:var(--zlato);color:var(--zlato)}
.qol-odbr{font-variant-numeric:tabular-nums}