/* BalkanLoop - kamera (snimanje i slikanje), prenos uživo i namještanje slike profila.
   Osnova (boje, dugmad) je u style.css, a prozorčići i ekrani u screens.css. */

/* ------------------------------------------------------------ prozorčić preko cijelog ekrana (selfi, namještanje slike) */
.sheet.full { top: 0; height: 100%; max-height: none; border-radius: 0; border-top: 0; box-shadow: none; overflow: hidden; background: #000; }
.sheet.full::before { display: none; }

/* ------------------------------------------------------------ kamera */
.screen.cam, .screen.live, .sheet.cam { color: #fff; }
.screen.cam, .screen.live { background: #000; overflow: hidden; }
/* 4.10. (Emin: "kamera preko cijelog ekrana kao na TikToku"): slika kamere je preko CIJELOG ekrana (cover) - pri
   snimanju, slikanju i uživo, isto kao i objave u toku (.media video u style.css), pa se vidi tačno ono što će ljudi
   vidjeti. Ranije (do 0.6.53) je ovdje bio "contain", jer je kamera davala odsječen KVADRAT pa je "cover" izgledao jako
   uvećano - pravi uzrok je popravljen u js/camera.js (slika 16:9 bez odsijecanja). --dz (js/camera.js, cam.attachZoom)
   je DIGITALNI zum kad kamera/preglednik ne zna za pravi zum; --mx je ogledalo (prednja kamera). */
.cam-prev, .lv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; touch-action: none; transform: scaleX(var(--mx, 1)) scale(var(--dz, 1)); }
.cam-prev.mirror, .lv-video.mirror { --mx: -1; }
.cam-shade, .lv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(10, 7, 5, .6), transparent 22%, transparent 56%, rgba(10, 7, 5, .74)); }
/* oznaka zuma (dodirni da promijeniš, ili raširi/skupi dva prsta preko slike) - uvijek se prikazuje dok god je kamera
   otvorena (vidi cam.attachZoom u js/camera.js): pravi zum kad ga uređaj/preglednik javi, inače digitalni (CSS) zum
   koji radi svuda, ali samo uvećava - "1×" (normalno) je već cijela slika sa kamere, nema kud dalje "nazad"/šire. */
.cam-zoom { position: absolute; left: 50%; top: calc(64px + var(--sat)); transform: translateX(-50%); z-index: 4; min-width: 44px; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font: 800 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; touch-action: none; }
.cam-zoom:active { transform: translateX(-50%) scale(.94); }
/* 4.10.: izbor sočiva (js/camera.js cam.attachLens) - lijevo od oznake zuma, vidi se samo kad telefon na toj strani
   ima 2 ili više sočiva. Broj "2/3" = koje je sočivo sad upaljeno. */
.cam-lens { position: absolute; top: calc(64px + var(--sat)); right: calc(50% + 30px); z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font: 800 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: manipulation; }
.cam-lens[hidden] { display: none; }
.cam-lens svg { width: 17px; height: 17px; flex: none; }
.cam-lens:active { transform: scale(.94); }
.sheet.snap .cam-lens { right: auto; left: 50%; transform: translateX(-50%); }
.sheet.snap .cam-lens:active { transform: translateX(-50%) scale(.94); }
.cam-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--sat)) 12px 0; }
.cam-x { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; transition: transform .1s; }
.cam-x svg { width: 22px; height: 22px; }
.cam-x:active { transform: scale(.94); }
.cam-time { padding: 7px 12px; border-radius: 999px; background: var(--paprika); color: #fff; font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
.cam-title { font: 700 17px/1 var(--display); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }

.cam-msg, .lv-msg { position: absolute; left: 20px; right: 20px; top: 50%; z-index: 6; transform: translateY(-50%); display: grid; gap: 8px; padding: 22px 18px 18px; text-align: center; border-radius: 26px; background: rgba(23, 17, 14, .95); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.cam-msg b, .lv-msg b { font: 700 20px/1.2 var(--display); }
.cam-msg p, .lv-msg p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.45; }
.cam-msgbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

.cam-count, .lv-count { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; font: 800 132px/1 var(--display); color: #fff; text-shadow: 0 8px 50px rgba(0, 0, 0, .65); }
.cam-count.pop, .lv-count.pop { animation: camPop .9s ease both; }
@keyframes camPop { 0% { transform: scale(1.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(.86); opacity: 0; } }

.cam-hint { position: absolute; left: 20px; right: 20px; bottom: calc(142px + var(--safe-b)); z-index: 2; margin: 0; text-align: center; font-weight: 700; font-size: 13.5px; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); pointer-events: none; }
.cam-hint:empty { display: none; }
.cam-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: 0 22px calc(28px + var(--safe-b)); }
.cam-side { display: grid; justify-items: center; gap: 4px; width: 60px; color: #fff; font-size: 11.5px; font-weight: 800; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.cam-side svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .6)); }
.cam-side.on { color: var(--amber2); }
.cam-side.ghost { visibility: hidden; }
.cam-rec { position: relative; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; }
.cam-rec:disabled { opacity: .45; }
.cam-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cam-ring circle { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 5; }
.cam-ring .cam-prog { stroke: var(--paprika); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.cam-rec i { width: 64px; height: 64px; border-radius: 50%; background: var(--paprika); transition: width .18s, height .18s, border-radius .18s, transform .1s; }
.cam-rec:active i { transform: scale(.94); }
.cam-rec.snapbtn i { background: #fff; }
.screen.cam[data-mode="rec"] .cam-rec i { width: 32px; height: 32px; border-radius: 10px; }
.screen.cam[data-mode="boot"] .cam-rec, .screen.cam[data-mode="error"] .cam-rec { opacity: .4; }
.screen.cam[data-mode="rec"] [data-flip], .screen.cam[data-mode="rec"] [data-timer], .screen.cam[data-mode="rec"] [data-lens],
.screen.cam[data-mode="saving"] [data-flip], .screen.cam[data-mode="saving"] [data-timer], .screen.cam[data-mode="saving"] [data-lens],
.screen.cam[data-mode="count"] [data-timer] { visibility: hidden; }

.cam-review { position: absolute; inset: 0; z-index: 5; background: #000; }
.cam-rv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }   /* 4.10.: preko cijelog ekrana, kao u toku */
.cam-x.rx { position: absolute; top: calc(10px + var(--sat)); left: 12px; z-index: 2; }
.cam-ract { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 40px 18px calc(22px + var(--safe-b)); background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }

/* vodič za slikanje (selfi): kvadrat sa zaobljenim uglovima kao na profilu, oko njega je slika zatamnjena */
.cam-frame { position: absolute; left: 50%; top: 44%; width: min(74%, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 34%; border: 2px solid rgba(255, 255, 255, .82); box-shadow: 0 0 0 100vmax rgba(10, 7, 5, .5); pointer-events: none; }

/* ------------------------------------------------------------ namještanje slike profila */
.sheet.crop { background: var(--page); color: var(--text); }
.crop-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 18px; }
.crop-box { position: relative; width: min(100%, 320px, calc(100vh - 330px)); width: min(100%, 320px, calc(100dvh - 330px)); aspect-ratio: 1; border-radius: 34%; overflow: hidden; background: #000; touch-action: none; cursor: grab; box-shadow: 0 0 0 2px rgba(251, 241, 227, .55), 0 18px 50px rgba(0, 0, 0, .55); }
.crop-box:active { cursor: grabbing; }
.crop-cv { width: 100%; height: 100%; display: block; touch-action: none; }
.crop-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 14px; background: #000; }
.crop-ctl { display: flex; align-items: center; gap: 12px; padding: 4px 30px; color: var(--dim); }
.crop-ctl span { width: 18px; text-align: center; font: 700 22px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.crop-zoom { flex: 1; min-width: 0; height: 32px; accent-color: var(--amber); }
.crop-hint { margin: 0; padding: 4px 24px 8px; text-align: center; font-size: 12.5px; color: var(--dim); }
.crop-act { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 8px 18px calc(18px + var(--safe-b)); }
.sgrid.pgr { display: flex; justify-content: center; gap: 18px; }
.sgrid.pgr button { flex: 0 1 96px; }

/* ------------------------------------------------------------ prenos uživo: priprema */
.lv-setup { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; }
.lv-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--sat)) 12px 0; }
.lv-h { font: 700 18px/1 var(--display); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.lv-panel { margin-top: auto; display: grid; gap: 12px; max-height: calc(100% - 64px - var(--sat)); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(18px + var(--safe-b)); border-radius: 28px 28px 0 0; background: rgba(23, 17, 14, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--glass-line); }
.lv-panel .lbl { margin: 0; }
.lv-title { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); color: var(--text); outline: none; }
.lv-title:focus { border-color: var(--amber); }
.lv-panel .chips.sug { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; }
.lv-panel .chip { flex: none; white-space: nowrap; }
.lv-note { display: flex; gap: 8px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.lv-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--amber); }
.lv-go { height: 52px; font-size: 16px; }
.lv-go svg { width: 21px; height: 21px; }

/* ------------------------------------------------------------ prenos uživo: traje */
.lv-live { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; pointer-events: none; }
.lv-live > * { pointer-events: auto; }
.lv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + var(--sat)) 12px 0; }
.lv-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-r { display: flex; align-items: center; gap: 8px; flex: none; }
.lv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--paprika); color: #fff; font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .06em; }
.lv-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lvPulse 1.3s ease-in-out infinite; }
.lv-badge.sm { padding: 4px 7px; gap: 5px; border-radius: 8px; font-size: 10px; }
.lv-badge.sm i { width: 5px; height: 5px; }
@keyframes lvPulse { 50% { opacity: .25; transform: scale(.7); } }
.lv-time { padding: 7px 10px; border-radius: 10px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
.lv-stat { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 800 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lv-stat svg { width: 15px; height: 15px; }
.lv-stat b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-demo { align-self: center; margin: 10px 16px 0; padding: 5px 12px; border-radius: 999px; background: rgba(244, 166, 42, .94); color: var(--ink); font: 800 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; }
.lv-tchip { align-self: flex-start; max-width: 80%; margin: 8px 12px 0; padding: 6px 12px; border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.lv-tchip:empty { display: none; }
.lv-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }

/* ćejfovi koji lebde uz desni rub */
.lv-cups { position: absolute; right: 8px; bottom: calc(76px + var(--safe-b)); width: 64px; height: 240px; pointer-events: none; }
.lcup { position: absolute; bottom: 0; left: 50%; width: 36px; height: 36px; margin-left: -18px; color: var(--amber2); animation: lcupUp 2.6s ease-out both; }
.lcup svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.lcup .cpb, .lcc .cpb { fill: var(--amber); stroke: var(--amber); }
@keyframes lcupUp {
  0% { transform: translate(0, 0) rotate(0deg) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(var(--dx, 0px) * 2), -220px) rotate(calc(var(--rot, 0deg) * 2)) scale(1.15); opacity: 0; }
}

/* pokloni koji lebde uz desni rub - isto lebdenje (lcupUp) kao .lcup iznad, ali veća kutija + IZRIČITA veličina
   fonta: pokloni su najčešće običan emoji (ne SVG kao šolja/srce), pa se bez ovoga prikažu sitno (Eminova
   primjedba 24.9. - "da budu malo veći da se vide"). Namjerno posebna klasa, .lcup iznad ostaje netaknut. */
.lgift { position: absolute; bottom: 0; left: 50%; width: 48px; height: 48px; margin-left: -24px; font-size: 38px; line-height: 48px; text-align: center; color: var(--amber2); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); animation: lcupUp 2.6s ease-out both; }
.lgift svg { width: 100%; height: 100%; }

/* BalkanKing (trenutno najskuplji poklon, vidi g.big u js/coins.js) - posebna, upadljivija animacija na sredini
   CIJELOG ekrana prenosa (ne uz ivicu kao .lgift iznad) - malo duže traje i vidljivija je, dolikuje najskupljem
   poklonu u katalogu (Eminov zahtjev 24.9. - "malo animaciju"). Vidi floatKing u js/live.js. */
.lv-king { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 5; animation: lkingPop 2.6s cubic-bezier(.2, .9, .25, 1) both; }
.lv-king .lk-ic { font-size: 84px; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .55)); }
.lv-king .lk-name { padding: 4px 14px; border-radius: 999px; background: linear-gradient(135deg, #ffd76b, #f4a62a); color: #2a1a05; font: 800 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; }
@keyframes lkingPop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
  22% { transform: translate(-50%, -50%) scale(1); }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -52%) scale(.92); opacity: 0; }
}

/* razgovor */
.lv-chat { margin-top: auto; max-height: 36%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 26px 64px 8px 12px; -webkit-mask-image: linear-gradient(transparent, #000 26px); mask-image: linear-gradient(transparent, #000 26px); }
.lc { flex: none; align-self: flex-start; max-width: 100%; display: flex; align-items: flex-start; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 18px; background: rgba(16, 12, 10, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13.5px; line-height: 1.35; text-align: left; }
.lc[data-h] { cursor: pointer; }
.lc[data-h]:active { background: rgba(16, 12, 10, .72); }
.lt { min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.lt b { font-weight: 800; }
.lt b.me { color: var(--amber2); }
.lt em { font-style: normal; color: rgba(251, 241, 227, .72); }
.lc.join, .lc.cup { background: rgba(16, 12, 10, .34); font-size: 12.5px; }
.lc.host { background: rgba(244, 166, 42, .26); }
/* 4.10. (Eminov zahtjev): zakačen komentar iznad razgovora, najbolji darivaoci gore desno, @nadimak u poruci */
.screen.live:not(.viewer):not(.liveguest) .lc.msg { cursor: pointer; }
.lc .men { color: var(--amber2); font-weight: 700; }
.lv-live > .lv-pin { align-self: flex-start; box-sizing: border-box; max-width: calc(100% - 76px); margin: auto 12px 6px; display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px 7px 9px; border-radius: 16px; background: rgba(16, 12, 10, .8); border: 1px solid rgba(244, 166, 42, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13.5px; line-height: 1.35; text-align: left; }
.lv-live > .lv-pin[hidden] { display: none; }
.lv-live > .lv-pin:not([hidden]) + .lv-chat { margin-top: 0; }
.lv-pin-ic { flex: none; color: var(--amber); line-height: 0; margin-top: 5px; }
.lv-pin-ic svg { width: 15px; height: 15px; }
.lv-pin-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lv-pin-t > b { color: var(--amber2); }
.lv-pin-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.lv-pin-x svg { width: 14px; height: 14px; }
.lv-live > .lv-top3 { position: absolute; right: 12px; top: calc(104px + var(--sat)); z-index: 2; display: flex; align-items: center; gap: 0; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.lv-live > .lv-top3[hidden] { display: none; }
.lv-top-ic { font-size: 16px; line-height: 1; margin-right: 6px; }
.lv-top-a { position: relative; display: block; line-height: 0; margin-left: -3px; border-radius: 34%; box-shadow: 0 0 0 2px #cd7f32; }
.lv-top-a.r1 { margin-left: 0; box-shadow: 0 0 0 2px #f4c430; z-index: 3; }
.lv-top-a.r2 { box-shadow: 0 0 0 2px #c3cad3; z-index: 2; }
.lv-top-a i { position: absolute; right: -5px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: #cd7f32; color: #17110e; font: 800 10px/15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; text-align: center; }
.lv-top-a.r1 i { background: #f4c430; }
.lv-top-a.r2 i { background: #c3cad3; }
.lv-top-rank { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #cd7f32; color: #17110e; font: 800 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lv-top-rank.r1 { background: #f4c430; }
.lv-top-rank.r2 { background: #c3cad3; }
.lcc { display: inline-block; vertical-align: -3px; }
.lcc svg { width: 16px; height: 16px; }

.lv-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px calc(12px + var(--safe-b)); }
.lv-form { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.lv-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--glass-line); background: rgba(16, 12, 10, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; outline: none; }
.lv-form input::placeholder { color: rgba(251, 241, 227, .6); }
.lv-form input:focus { border-color: var(--amber); }
.lv-tool { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; transition: transform .1s; }
.lv-tool svg { width: 22px; height: 22px; }
.lv-tool:active { transform: scale(.92); }
.lv-tool.off { background: var(--paprika); border-color: transparent; }
.lv-tool.cupb { background: var(--amber); color: var(--ink); border-color: transparent; }
.lv-tool.cupb .cpb { fill: var(--ink); stroke: var(--ink); }

/* ------------------------------------------------------------ prenos uživo: kraj i pregled */
.lv-end { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: calc(20px + var(--sat)) 20px calc(20px + var(--safe-b)); overflow-y: auto; background: rgba(16, 12, 10, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lv-endcard { width: 100%; max-width: 360px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.lv-endcard .wico { margin: 0 0 4px; }
.lv-endcard h2 { margin: 0; font: 700 27px/1.15 var(--display); }
.lv-etitle { margin: 0; color: var(--amber2); font-weight: 700; overflow-wrap: anywhere; }
.lv-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 4px 0; }
.lv-sum > div { padding: 12px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.lv-sum b { display: block; font: 700 24px/1.2 var(--display); }
.lv-sum span { font-size: 12px; color: var(--dim); }
.lv-snote { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.lv-endcard .btn { width: 100%; }

/* gledanje tuđeg prenosa */
.lv-av { flex: none; border-radius: 34%; }
.lv-name { display: grid; min-width: 0; line-height: 1.2; }
.lv-name b { font: 700 italic 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-name small { font-size: 11.5px; color: rgba(251, 241, 227, .78); }
.lv-me .fol { margin-left: 4px; }
.lv-me .fol.on { background: rgba(251, 241, 227, .18); color: var(--text); font-weight: 700; }

/* ------------------------------------------------------------ #103+: pravi gosti uživo (zvijezda, vidi js/live-webrtc.js) */
.lv-guests { display: flex; gap: 8px; padding: 10px 12px 0; }
.lv-guests:empty { display: none; }
.lv-gtile { position: relative; width: 84px; height: 112px; flex: none; border-radius: 16px; overflow: hidden; background: rgba(16, 12, 10, .7); border: 1px solid var(--glass-line); }
.lv-gtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-gwait { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: rgba(251, 241, 227, .82); }

/* prozorčić "Pozovi u uživo" (dugme + u lv-foot) */
.livinv-b { display: grid; gap: 10px; }
.livinv-search input { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); color: var(--text); outline: none; }
.livinv-search input:focus { border-color: var(--amber); }
.livinv-cap { margin: 0; font-size: 12px; color: var(--dim); }
.livinv-empty { margin: 4px 0; font-size: 13px; color: var(--dim); text-align: center; }
.livinv-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.livinv-row .av { flex: none; }
.livinv-who { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.livinv-who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livinv-who small { font-size: 12px; color: var(--dim); }
.livinv-st { flex: none; font-size: 12px; font-weight: 700; color: var(--amber2); }
.livinv-guests { display: grid; gap: 2px; }
.livinv-guests:not(:empty) { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.livinv-row .x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.livinv-row .x svg { width: 16px; height: 16px; }
.livinv-row .x:active { background: var(--card2); }

/* prozorčić: dolazni poziv (bilo gdje u aplikaciji) */
.lic-b { display: grid; justify-items: center; gap: 6px; padding-top: 6px; text-align: center; }
.lic-b h3 { margin: 6px 0 0; font: 700 20px/1.2 var(--display); }
.lic-b p { margin: 0; color: var(--dim); }
.lic-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 14px; }

/* ekran: gost u tuđem prenosu uživo (BT.openLiveGuest) */
.lvg-self { position: absolute; right: 12px; bottom: calc(90px + var(--safe-b)); z-index: 4; width: 92px; height: 122px; border-radius: 16px; object-fit: cover; background: #000; border: 2px solid rgba(251, 241, 227, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transform: scaleX(-1); }
.lvg-status { padding: 7px 10px; border-radius: 10px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* 4.10.: animacije poklona u prenosu uživo (js/pokloni.js) - platno preko ekrana prenosa, trake sa pošiljaocem
   (lijevo, iznad poruka), kartica pošiljaoca za velike poklone i veliki natpisi. Ništa od ovoga ne prima dodir. */
.gfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 4; pointer-events: none !important; }
.gfx-bn { position: absolute; left: 10px; bottom: calc(74px + var(--safe-b, 0px) + 34%); z-index: 5; max-width: calc(100% - 90px); display: flex; flex-direction: column; gap: 7px; pointer-events: none !important; }
.gfx-b { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(28, 16, 6, .86), rgba(28, 16, 6, .56)); border: 1px solid rgba(255, 210, 122, .45); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); animation: gfxIn .35s cubic-bezier(.2, .9, .3, 1.2) both; transition: opacity .35s, transform .35s; }
.gfx-b.out { opacity: 0; transform: translateX(-30px); }
.gfx-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; background: linear-gradient(135deg, #7c5cff, #ff4d6d); }
.gfx-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gfx-tx b { font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfx-tx span { font-size: 11px; color: var(--amber2, #ffd27a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfx-gi { flex: none; font-size: 26px; line-height: 1; }
.gfx-cb { flex: none; font: italic 900 22px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #ffe08a; text-shadow: 0 2px 0 #9a4f06, 0 0 12px rgba(255, 180, 60, .85); }
.gfx-cb:empty { display: none; }
.gfx-cb.bump { animation: gfxBump .35s ease-out; }
@keyframes gfxIn { from { transform: translateX(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gfxBump { 0% { transform: scale(1.9); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.gfx-card { position: absolute; left: 50%; bottom: calc(84px + var(--safe-b, 0px)); z-index: 6; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; background: linear-gradient(90deg, rgba(42, 26, 8, .94), rgba(66, 40, 14, .94)); border: 1.5px solid #ffd27a; box-shadow: 0 0 34px rgba(255, 200, 90, .45); white-space: nowrap; transform: translateX(-50%); pointer-events: none !important; }
.gfx-card .gfx-av { width: 42px; height: 42px; font-size: 15px; }
.gfx-card > div:nth-child(2) { min-width: 0; }
.gfx-from { font-weight: 800; font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.gfx-what { font-size: 13px; color: var(--amber2, #ffd27a); overflow: hidden; text-overflow: ellipsis; }
.gfx-ic { flex: none; margin-left: 4px; font-size: 32px; line-height: 1; }
.gfx-cap { position: absolute; left: 0; right: 0; top: 22%; z-index: 6; padding: 0 12px; text-align: center; font: 900 calc(var(--gw, 360px) * .085)/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; pointer-events: none !important; background: linear-gradient(180deg, #fff9e0, #ffd27a 55%, #f5a524); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(110, 55, 0, .95)) drop-shadow(0 0 16px rgba(255, 180, 60, .55)); }
.gfx-cap.long { font-size: calc(var(--gw, 360px) * .072); }
.gfx-cap .e { color: #111; }
.gfx-cap.blue { background-image: linear-gradient(180deg, #ffffff, #a8dcff 55%, #3b82f6); filter: drop-shadow(0 3px 0 rgba(10, 40, 110, .95)) drop-shadow(0 0 16px rgba(90, 160, 255, .6)); }
.gfx-cap.fire { background-image: linear-gradient(180deg, #fff6cc, #ffb347 50%, #ff4d1a); filter: drop-shadow(0 3px 0 rgba(110, 20, 0, .95)) drop-shadow(0 0 18px rgba(255, 110, 40, .7)); }
.gfx-cap.pink { background-image: linear-gradient(180deg, #fff, #ffc2d1 55%, #ff4d8d); filter: drop-shadow(0 3px 0 rgba(110, 0, 40, .9)) drop-shadow(0 0 16px rgba(255, 90, 150, .55)); }
.gfx-cap.green { background-image: linear-gradient(180deg, #ffffff, #86efac 55%, #16a34a); filter: drop-shadow(0 3px 0 rgba(0, 70, 20, .95)) drop-shadow(0 0 16px rgba(60, 220, 120, .6)); }
.gfx-title { position: absolute; left: 0; right: 0; top: 13%; z-index: 6; text-align: center; white-space: nowrap; font: 900 calc(var(--gw, 360px) * .1)/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em; pointer-events: none !important; background: linear-gradient(100deg, #b8860b 0%, #ffd27a 30%, #fffbe6 45%, #ffd27a 60%, #b8860b 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(80, 40, 0, .95)) drop-shadow(0 0 22px rgba(255, 200, 80, .7)); animation: gfxShine 1.6s linear infinite; }
.gfx-title small { display: block; margin-top: 2px; font-size: .34em; letter-spacing: .2em; }
@keyframes gfxShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.lc.gift { background: linear-gradient(90deg, rgba(245, 165, 36, .42), rgba(245, 165, 36, .12)); border: 1px solid rgba(255, 210, 122, .4); font-size: 12.5px; }
.lc .lcg { font-size: 16px; line-height: 1; }
.lc .lcgn { color: var(--amber2, #ffd27a); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .gfx-title { animation: none; } }