/* Tvoj lik (js/tvoj-lik.js): forma za pravljenje lika i blok u predvorju. Sve stane na 1440×900 bez skrolovanja. */
#mp-tl { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 10, 9, .93); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #e8ebe2; }
#mp-tl[hidden] { display: none; }
#mp-tl .tl-k { width: min(1360px, 96vw); max-height: 96vh; overflow: auto; background: #1b1f1c; border: 2px solid #3c443d; border-radius: 10px; padding: 14px 22px 16px; box-sizing: border-box; }
#mp-tl h2 { margin: 0 0 8px; font: 34px var(--naslov, Anton, Impact, sans-serif); letter-spacing: .02em; color: #ffd24a; }
#mp-tl h3 { margin: 10px 0 5px; font: 21px var(--naslov, Anton, Impact, sans-serif); letter-spacing: .03em; color: #ffd24a; }
#mp-tl h3 small { font: 15px system-ui, sans-serif; color: #aeb4a8; letter-spacing: 0; margin-left: 8px; }
#mp-tl .tl-kol { display: grid; grid-template-columns: 420px 1fr; gap: 24px; }
#mp-tl .tl-foto { position: relative; width: 400px; height: 400px; }
#mp-tl #tl-izvor { width: 400px; height: 400px; border-radius: 8px; border: 2px solid #3c443d; cursor: grab; touch-action: none; display: block; }
#mp-tl #tl-uputstvo { position: absolute; left: 20px; right: 20px; top: 150px; text-align: center; color: #cfd3c8; font-size: 18px; pointer-events: none; }
#mp-tl #tl-uputstvo[hidden] { display: none; }
#mp-tl .tl-red { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
#mp-tl .tl-fajl { cursor: pointer; }
#mp-tl .tl-vel { display: flex; align-items: center; gap: 8px; font-size: 17px; }
#mp-tl .tl-vel input { width: 130px; }
#mp-tl .tl-crtez[hidden] { display: none; }
#mp-tl .tl-crtez > div { display: flex; align-items: center; gap: 7px; margin: 6px 0; flex-wrap: wrap; }
#mp-tl .tl-crtez span { width: 70px; font-size: 17px; color: #cfd3c8; }
#mp-tl .tl-boja { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #2a2f2b; cursor: pointer; padding: 0; }
#mp-tl .tl-boja.on { border-color: #ffd24a; }
#mp-tl .tl-mali { min-height: 38px; padding: 4px 12px; font: 17px system-ui, sans-serif; background: #262b27; color: #e8ebe2; border: 2px solid #3c443d; border-radius: 6px; cursor: pointer; }
#mp-tl .tl-mali.on { border-color: #ffd24a; background: #3d3518; }
#mp-tl .tl-vrh { display: flex; align-items: center; gap: 20px; }
#mp-tl .tl-preg { display: flex; align-items: flex-end; gap: 10px; background: #2c332d; border-radius: 8px; padding: 6px 10px; }
#mp-tl .tl-ime { display: flex; flex-direction: column; gap: 5px; font-size: 17px; flex: 1; }
#mp-tl input:not([type=range]) { font: 21px system-ui, sans-serif; padding: 7px 10px; background: #0f1210; color: #f2f4ee; border: 2px solid #3c443d; border-radius: 6px; box-sizing: border-box; }
#mp-tl input:focus { border-color: #ffd24a; outline: none; }
#mp-tl .tl-klase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#mp-tl .tl-klasa { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 12px; background: #262b27; color: #e8ebe2; border: 2px solid #3c443d; border-radius: 8px; cursor: pointer; text-align: left; font: 15px system-ui, sans-serif; }
#mp-tl .tl-klasa b { font: 22px var(--naslov, Anton, Impact, sans-serif); letter-spacing: .03em; }
#mp-tl .tl-klasa.on { border-color: #ffd24a; background: #3d3518; }
#mp-tl .tl-poeni { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#mp-tl .tl-st { display: flex; align-items: center; gap: 8px; font-size: 19px; }
#mp-tl .tl-st b { min-width: 24px; text-align: center; font-size: 24px; }
#mp-tl .tl-pm { width: 38px; height: 38px; font-size: 24px; line-height: 1; background: #262b27; color: #ffd24a; border: 2px solid #3c443d; border-radius: 6px; cursor: pointer; }
#mp-tl .tl-ost { font-size: 17px; color: #86b35c; }
#mp-tl .tl-ost.mp-crv { color: #e2493e; }
#mp-tl .tl-slab { display: flex; flex-wrap: wrap; gap: 7px; }
#mp-tl .tl-rep { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
#mp-tl .tl-rep input { font-size: 18px; padding: 6px 9px; }
#mp-tl #tl-greska { margin: 8px 0 0; font-size: 18px; }
#mp-tl #tl-greska[hidden] { display: none; }
#mp-tl .tl-dugmad { display: flex; gap: 10px; margin-top: 12px; }
#mp-tl .tl-dugmad .d, #mp-tl .tl-red .d { font-size: 19px; }
/* blok u predvorju, ispod izbora lika */
#tl-blok { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 8px 12px; background: rgba(255, 210, 74, .08); border: 1px solid rgba(255, 210, 74, .4); border-radius: 8px; flex-wrap: wrap; }
#tl-blok img { width: 56px; height: 56px; }
#tl-blok img[hidden] { display: none; }
#tl-blok .tl-bt { display: flex; flex-direction: column; flex: 1; min-width: 160px; }
#tl-blok .tl-bt b { font-size: 20px; }
#tl-blok .tl-bt small { font-size: 15px; opacity: .8; }
/* sačuvani likovi sa servera u izboru lika: žuti okvir; šira kutija da 8 ekipe + do 12 sačuvanih stane bez skrolovanja na 1366×768 */
#mp-panel .mp-kutija:has(.tl-sac) { max-width: 980px; }
#mp-panel .mp-lik.tl-sac { border: 2px solid rgba(255, 210, 74, .75); }
#mp-panel .mp-lik.tl-sac small { color: #e8d48a; }
/* noću: svoja rečenica (gost sa napravljenim likom) */
#mp-tl-uzvik { position: fixed; left: 10px; bottom: 26%; z-index: 60; padding: 6px 12px; font: 16px system-ui, sans-serif; background: rgba(20, 24, 21, .85); color: #fff; border: 2px solid #ffd24a; border-radius: 8px; cursor: pointer; }
#mp-tl-uzvik[hidden] { display: none; }
body:has(#modal.on) #mp-tl-uzvik, body:has(#noc-sloj.on) #mp-tl-uzvik { display: none; }   /* ne pokriva prozor (karte, najava noći) */
#mp-tl-uzvik kbd { font-size: 13px; background: #333; padding: 0 5px; border-radius: 3px; margin-left: 4px; }
/* niži prozor (laptop 1280×720): sve i dalje stane bez skrolovanja, dugmad se vide */
@media (max-height: 820px) {
  #mp-tl .tl-k { max-height: 98vh; padding: 8px 18px 10px; }
  #mp-tl h2 { font-size: 28px; margin-bottom: 4px; }
  #mp-tl h3 { margin: 4px 0 3px; font-size: 19px; }
  #mp-tl .tl-kol { grid-template-columns: 330px 1fr; gap: 20px; }
  #mp-tl .tl-foto, #mp-tl #tl-izvor { width: 280px; height: 280px; }
  #mp-tl .tl-crtez span { width: 62px; flex: none; font-size: 15px; letter-spacing: -0.5px; }   /* „Frizura“ staje u 62px, ne gura dugme */
  #mp-tl #tl-uputstvo { top: 90px; font-size: 16px; }
  #mp-tl .tl-red { margin: 6px 0; }
  #mp-tl .tl-crtez > div { margin: 4px 0; }
  #mp-tl .tl-preg { padding: 4px 8px; }
  #mp-tl #tl-glava { width: 96px; height: 96px; }
  #mp-tl .tl-klasa { padding: 6px 10px; }
  #mp-tl .tl-rep { gap: 5px 10px; }
  #mp-tl .tl-rep input { padding: 4px 9px; font-size: 17px; }
  #mp-tl .tl-dugmad { margin-top: 8px; }
}