/* =====================================================================
   UkrFlix Чат «Загальний зал 2.0» — стилі (uf_chat 1.3.4)
   Дизайн погоджено 11.10.2026 (TZ_chat.md §15). Усе під .ufc / префікс ufc-.
   ===================================================================== */
.ufc{
  --ufc-bg:#0f1722; --ufc-surface:#16202e; --ufc-surface-2:#131c28; --ufc-ink:#0c141f;
  --ufc-fg:#ede7da; --ufc-fg-2:rgba(237,231,218,.84); --ufc-muted:#c9c2b3; --ufc-subtle:#8f887a; --ufc-hair:rgba(255,255,255,.06);
  --ufc-gold:#dbb43c; --ufc-gold-deep:#b8901f; --ufc-gold-hi:#e9c558; --ufc-on-gold:#0f1722;
  --ufc-ok:#34d399; --ufc-danger:#e2685b;
  --ufc-r1:#9aa4b2; --ufc-r2:#5fa8f0; --ufc-r3:#b26cf6; --ufc-r4:#f2b632;
  --ufc-sh:9px 9px 20px rgba(4,8,14,.7),-7px -7px 16px rgba(255,255,255,.035);
  --ufc-sh-sm:5px 5px 12px rgba(4,8,14,.6),-4px -4px 9px rgba(255,255,255,.04);
  --ufc-sh-in:inset 7px 7px 15px rgba(4,8,14,.7),inset -5px -5px 12px rgba(255,255,255,.03);
  --ufc-sh-in-sm:inset 3px 3px 7px rgba(4,8,14,.6),inset -2px -2px 6px rgba(255,255,255,.03);
  --ufc-sh-pop:12px 12px 28px rgba(4,8,14,.85),-6px -6px 16px rgba(255,255,255,.04);
  --ufc-font:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ufc-display:"Cormorant Garamond","Times New Roman",serif;
  --ufc-ease:cubic-bezier(.22,1,.36,1);
  color:var(--ufc-fg);font:400 14px/1.5 var(--ufc-font);
}
@property --ufc-ang{syntax:"<angle>";inherits:true;initial-value:0deg}
.ufc *,.ufc *::before,.ufc *::after{box-sizing:border-box}
.ufc button{font:inherit;color:inherit}
.ufc [hidden]{display:none!important}
.ufc :focus-visible{outline:2px solid var(--ufc-gold);outline-offset:2px}
.ufc-r1{--rar:var(--ufc-r1)}.ufc-r2{--rar:var(--ufc-r2)}.ufc-r3{--rar:var(--ufc-r3)}.ufc-r4{--rar:var(--ufc-r4)}

/* ---------- аватар з рамкою гри ---------- */
.ufc-ava{--s:40px;position:relative;display:inline-block;width:var(--s);height:var(--s);flex:none;border-radius:50%;isolation:isolate}
.ufc-ava__img{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 calc(var(--s)*.36)/1 var(--ufc-font);color:rgba(255,255,255,.92);background:var(--ava,linear-gradient(135deg,#3a4a63,#1d2838));overflow:hidden;box-shadow:var(--ufc-sh-in-sm)}
.ufc-ava__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;background:#1d2838} /* фото накриває ініціали; якщо не завантажиться — видно ініціали */
.ufc-ava__fx{position:absolute;inset:-25.76%;z-index:2;pointer-events:none}
.ufc-ava__fx svg,.ufc-ava__fx img{display:block;width:100%;height:100%;overflow:visible}
.ufc-ava__dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--ufc-surface);z-index:3;background:var(--ufc-ok)}
.ufc-ava__dot.is-typing{background:var(--ufc-gold);animation:ufc-blink 1s infinite}
.ufc-ava__dot.is-off{background:#565663}
@keyframes ufc-blink{50%{opacity:.35}}
.ufc-lvl{--rank:#9aa4b2;display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px 0 5px;border-radius:99px;background:color-mix(in srgb,var(--rank) 15%,var(--ufc-surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank) 45%,transparent);color:var(--rank);font:700 10.5px/1 var(--ufc-font);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
.ufc-lvl svg{width:11px;height:11px}
.ufc-ttl{font:italic 600 13px/1 var(--ufc-display);color:var(--rar,var(--ufc-muted));white-space:nowrap}
.ufc-ttl::before{content:"«"}.ufc-ttl::after{content:"»"}
.ufc-role{height:18px;display:inline-flex;align-items:center;padding:0 7px;border-radius:6px;font:700 9.5px/1 var(--ufc-font);letter-spacing:.08em;text-transform:uppercase;background:var(--ufc-gold);color:var(--ufc-on-gold)}
.ufc-role.is-mod{background:var(--ufc-danger);color:#fff}
.ufc-bdg{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.ufc-bdg svg{width:100%;height:100%}

/* ---------- сторінка: зала ---------- */
.ufc-hall{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start;max-width:1200px;margin:0 auto;padding:24px 16px 48px}
.ufc-hall.has-right{grid-template-columns:250px minmax(0,1fr) 290px;max-width:1360px}
.ufc-card{background:var(--ufc-surface);border-radius:22px;box-shadow:var(--ufc-sh)}
.ufc-card__h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px}
.ufc-card__t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ufc-muted);display:flex;align-items:center;gap:8px;margin:0}
.ufc-live{width:8px;height:8px;border-radius:50%;background:var(--ufc-ok);animation:ufc-pulse 2s infinite}
@keyframes ufc-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.ufc-count{font:700 11px/1 var(--ufc-font);padding:4px 9px;border-radius:99px;background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));color:var(--ufc-on-gold);font-variant-numeric:tabular-nums}
.ufc-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}

.ufc-seats{padding:4px 16px 12px}
.ufc-seats__screen{height:6px;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(90deg,transparent,var(--ufc-gold-hi),transparent);opacity:.55;margin:0 10px 12px;box-shadow:0 6px 18px rgba(233,197,88,.25)}
.ufc-seats__rows{display:flex;flex-direction:column;gap:6px;align-items:center}
.ufc-seats__row{display:flex;gap:5px}
.ufc-seat{width:14px;height:12px;border-radius:4px 4px 3px 3px;background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:background .4s}
.ufc-seat.is-on{background:var(--c,var(--ufc-ok));box-shadow:0 0 8px color-mix(in srgb,var(--c,var(--ufc-ok)) 60%,transparent)}
.ufc-seats__cap{margin-top:10px;text-align:center;font-size:11.5px;color:var(--ufc-subtle)}
.ufc-ulist{padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.ufc-urow{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:14px;text-decoration:none;color:inherit}
.ufc-urow:hover{background:rgba(255,255,255,.03)}
.ufc-urow.is-off{opacity:.45}
.ufc-urow__m{min-width:0;display:flex;flex-direction:column;gap:2px}
.ufc-urow__n{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--rank,var(--ufc-fg));white-space:nowrap}
.ufc-urow__s{font-size:11.5px;color:var(--ufc-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ufc-empty-s{padding:6px 16px 16px;font-size:12.5px;color:var(--ufc-subtle)}
.ufc-tabs-mini{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm)}
.ufc-tabs-mini button{border:0;background:none;font-size:10.5px;font-weight:700;padding:4px 7px;border-radius:7px;color:var(--ufc-subtle);cursor:pointer}
.ufc-tabs-mini button[aria-pressed="true"]{color:var(--ufc-gold);background:var(--ufc-surface)}
.ufc-top{padding:2px 10px 12px}
.ufc-trow{display:grid;grid-template-columns:22px 32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:6px;border-radius:12px}
.ufc-rk{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--ufc-font);background:rgba(255,255,255,.07)}
.ufc-rk.is-1{background:linear-gradient(145deg,#dbb43c,#b8901f);color:var(--ufc-on-gold)}
.ufc-rk.is-2{background:linear-gradient(145deg,#c9cdd6,#8f95a0);color:#16202e}
.ufc-rk.is-3{background:linear-gradient(145deg,#c08b5c,#8a5a33);color:#16202e}
.ufc-trow__n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rank,var(--ufc-fg))}
.ufc-trow__v{font:700 12px/1 var(--ufc-font);color:var(--ufc-gold);font-variant-numeric:tabular-nums}

/* ---------- кімната ---------- */
.ufc-room{display:flex;flex-direction:column;height:min(860px,calc(100vh - 140px));min-height:560px;border-radius:26px;overflow:hidden;background:var(--ufc-surface);box-shadow:var(--ufc-sh);position:relative}
.ufc-room__head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px}
.ufc-room__ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--ufc-gold);box-shadow:var(--ufc-sh-sm);flex:none}
.ufc-room__ico svg{width:20px;height:20px}
.ufc-room__t{flex:1;min-width:0}
.ufc-room__t h1,.ufc-room__t h2{margin:0;font:italic 600 24px/1 var(--ufc-display);color:var(--ufc-fg)}
.ufc-room__sub{font-size:12px;color:var(--ufc-muted);margin-top:4px;display:flex;align-items:center;gap:6px;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ufc-dots{display:inline-flex;gap:3px}
.ufc-dots i{width:4px;height:4px;border-radius:50%;background:var(--ufc-gold);animation:ufc-td 1.2s infinite}
.ufc-dots i:nth-child(2){animation-delay:.15s}.ufc-dots i:nth-child(3){animation-delay:.3s}
@keyframes ufc-td{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.ufc-ibtn{position:relative;width:38px;height:38px;border:0;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ufc-muted);background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);flex:none;text-decoration:none}
.ufc-ibtn:hover,.ufc-ibtn[aria-pressed="true"]{color:var(--ufc-gold)}
.ufc-ibtn svg{width:17px;height:17px}
.ufc-ibtn .ufc-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--ufc-font);color:var(--ufc-on-gold);background:var(--ufc-gold)}
.ufc-online-btn{display:none}

/* екран закріплених */
.ufc-screen{margin:0 20px 6px;position:relative;border-radius:16px;padding:12px 16px 10px 46px;background:linear-gradient(180deg,rgba(233,197,88,.10),rgba(233,197,88,.03));box-shadow:inset 0 0 0 1px rgba(233,197,88,.18);overflow:hidden;cursor:pointer}
.ufc-screen::before{content:"";position:absolute;left:50%;top:-80px;width:140%;height:120px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,236,170,.16),transparent 65%);pointer-events:none;animation:ufc-flicker 6s infinite}
@keyframes ufc-flicker{0%,47%,50%,100%{opacity:1}48%{opacity:.75}}
.ufc-screen__pin{position:absolute;left:14px;top:13px;color:var(--ufc-gold)}
.ufc-screen__pin svg{width:18px;height:18px}
.ufc-screen__txt{font-size:13px;line-height:1.5;color:var(--ufc-fg-2);min-height:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ufc-screen__txt b{color:var(--ufc-gold-hi);margin-right:5px}
.ufc-screen__nav{display:flex;align-items:center;gap:8px;margin-top:6px}
.ufc-screen__dots{display:flex;gap:4px}
.ufc-screen__dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.ufc-screen__dots i.is-on{background:var(--ufc-gold)}
.ufc-screen__nav span{font-size:11px;color:var(--ufc-subtle)}
.ufc-screen__x{position:absolute;right:8px;top:8px;border:0;background:none;color:var(--ufc-subtle);cursor:pointer;font-size:16px;line-height:1;padding:4px}

.ufc-feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 14px 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;position:relative;overscroll-behavior:contain}
.ufc-more{display:flex;justify-content:center;padding:8px 0 4px;font-size:11.5px;color:var(--ufc-subtle)}
.ufc-more span{display:inline-flex;align-items:center;gap:8px}
.ufc-more span::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--ufc-gold);animation:ufc-spin 1s linear infinite}
@keyframes ufc-spin{to{transform:rotate(360deg)}}
.ufc-begin{text-align:center;padding:14px 0 6px;font:italic 600 15px/1.2 var(--ufc-display);color:var(--ufc-subtle)}
.ufc-placeholder{margin:auto;padding:40px 10px;text-align:center;color:var(--ufc-muted)}
.ufc-day{display:flex;align-items:center;gap:12px;margin:18px 6px 8px;font:italic 600 15px/1 var(--ufc-display);color:var(--ufc-muted)}
.ufc-day::before,.ufc-day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ufc-hair) 30%,var(--ufc-hair) 70%,transparent)}

/* рядок повідомлення */
.ufc-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:2px 6px;border-radius:14px;position:relative}
.ufc-row.is-start{margin-top:10px}
.ufc-row.is-flash{animation:ufc-flash 1.6s var(--ufc-ease)}
@keyframes ufc-flash{0%,30%{background:rgba(219,180,60,.14)}100%{background:transparent}}
.ufc-row__ava .ufc-ava{--s:40px;margin-top:4px}
.ufc-row__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ufc-head{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;min-width:0}
.ufc-name{font-weight:700;font-size:13.5px;color:var(--rank,var(--ufc-gold));cursor:pointer;text-decoration:none}
.ufc-time{font-size:11px;color:var(--ufc-subtle);font-variant-numeric:tabular-nums}
.ufc-msg{position:relative;max-width:min(580px,100%);min-width:0}
.ufc-bub{position:relative;padding:9px 13px;border-radius:4px 16px 16px 16px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);font-size:13.8px;line-height:1.55;color:var(--ufc-fg-2);overflow-wrap:anywhere;word-break:break-word}
.ufc-row:not(.is-start) .ufc-bub{border-radius:16px}
.ufc-bub.ufc-r2{box-shadow:var(--ufc-sh-in-sm),inset 0 0 0 1px color-mix(in srgb,var(--ufc-r2) 40%,transparent)}
.ufc-bub.ufc-r3{background:linear-gradient(160deg,color-mix(in srgb,var(--ufc-r3) 10%,var(--ufc-surface-2)),var(--ufc-surface-2) 60%);box-shadow:var(--ufc-sh-in-sm),inset 0 0 0 1px color-mix(in srgb,var(--ufc-r3) 45%,transparent),0 0 18px -6px color-mix(in srgb,var(--ufc-r3) 70%,transparent)}
.ufc-bub.ufc-r4{background:linear-gradient(160deg,color-mix(in srgb,var(--ufc-r4) 11%,var(--ufc-surface-2)),var(--ufc-surface-2) 65%);box-shadow:var(--ufc-sh-in-sm),0 0 22px -8px color-mix(in srgb,var(--ufc-r4) 80%,transparent)}
.ufc-bub.ufc-r4::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ufc-ang),transparent 0 60%,#fbe39a 72%,var(--ufc-gold) 80%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ufc-rot 6s linear infinite;pointer-events:none}
@keyframes ufc-rot{to{--ufc-ang:360deg}}
.ufc-row.is-me .ufc-bub{box-shadow:var(--ufc-sh-in-sm),inset 3px 0 0 var(--ufc-gold);background:linear-gradient(90deg,rgba(219,180,60,.12),var(--ufc-surface-2) 70%)}
.ufc-ed{font-size:10.5px;color:var(--ufc-subtle);margin-left:6px}
.ufc-mention{color:var(--ufc-gold-hi);background:rgba(219,180,60,.13);padding:0 5px;border-radius:5px;font-weight:600;text-decoration:none;cursor:pointer}
.ufc-mention.is-me{background:var(--ufc-gold);color:var(--ufc-on-gold)}
.ufc-spoiler{border-radius:5px;padding:0 4px;background:rgba(255,255,255,.08);cursor:pointer;color:transparent;text-shadow:0 0 7px rgba(237,231,218,.65);transition:all .25s;user-select:none}
.ufc-spoiler::before{content:"спойлер ";font:700 9.5px/1 var(--ufc-font);letter-spacing:.08em;text-transform:uppercase;color:var(--ufc-muted);text-shadow:none;vertical-align:1px}
.ufc-spoiler.is-open{color:inherit;text-shadow:none;background:rgba(255,255,255,.05);user-select:text}
.ufc-spoiler.is-open::before{content:none}
.ufc-quote{display:block;margin:0 0 7px;padding:5px 10px;border:0;border-left:2px solid var(--ufc-gold);border-radius:0 9px 9px 0;background:rgba(12,20,31,.5);font-size:12.3px;color:var(--ufc-muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:left;width:100%}
.ufc-quote b{color:var(--ufc-gold-hi);margin-right:5px}
.ufc-shot{display:block;margin-top:6px;max-width:min(340px,100%);border-radius:12px;overflow:hidden;box-shadow:var(--ufc-sh-sm)}
.ufc-shot img{display:block;max-width:100%;max-height:280px;object-fit:cover}
.ufc-msg.is-gone .ufc-bub{font-style:italic;color:var(--ufc-subtle);background:transparent;box-shadow:inset 0 0 0 1px var(--ufc-hair)}
.ufc-msg.is-hidden .ufc-bub{box-shadow:inset 0 0 0 1px rgba(226,104,91,.35)}
.ufc-modbar{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;font-size:11px;color:var(--ufc-danger)}
.ufc-modbar button{border:0;background:rgba(255,255,255,.06);border-radius:8px;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--ufc-fg)}

.ufc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ufc-rx{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border:0;border-radius:99px;background:rgba(255,255,255,.05);font-size:12px;cursor:pointer}
.ufc-rx b{font:700 11px/1 var(--ufc-font);font-variant-numeric:tabular-nums}
.ufc-rx.is-mine{background:rgba(219,180,60,.16);box-shadow:inset 0 0 0 1px rgba(219,180,60,.45)}
.ufc-rx.is-pop{animation:ufc-pop .35s var(--ufc-ease)}
@keyframes ufc-pop{40%{transform:scale(1.25)}}

.ufc-acts{position:absolute;top:-14px;right:-6px;display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);opacity:0;pointer-events:none;transition:opacity .15s;z-index:4}
.ufc-msg:hover .ufc-acts,.ufc-msg:focus-within .ufc-acts{opacity:1;pointer-events:auto}
.ufc-acts button{width:28px;height:26px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--ufc-muted);font-size:13px;display:flex;align-items:center;justify-content:center}
.ufc-acts button:hover{background:rgba(219,180,60,.12);color:var(--ufc-gold)}
@media (hover:none){.ufc-acts{display:none}}

.ufc-menu{position:absolute;z-index:20;min-width:210px;padding:6px;border-radius:14px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-pop)}
.ufc-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:9px;font-size:13px;text-align:left;cursor:pointer}
.ufc-menu button:hover{background:rgba(255,255,255,.05)}
.ufc-menu button.is-danger{color:var(--ufc-danger)}
.ufc-menu hr{border:0;height:1px;background:var(--ufc-hair);margin:4px 2px}
.ufc-menu .ufc-rxrow{display:flex;gap:2px;padding:2px 2px 6px}
.ufc-menu .ufc-rxrow button{width:auto;padding:6px;font-size:19px;justify-content:center;transition:transform .12s}
.ufc-menu .ufc-rxrow button:hover{transform:scale(1.2)}

.ufc-newpill{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);border:0;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ufc-on-gold);background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:6;display:flex;gap:8px;align-items:center}
.ufc-newpill i{font-style:normal;background:var(--ufc-on-gold);color:var(--ufc-gold);border-radius:99px;padding:1px 6px;font-size:10.5px}

/* поле введення */
.ufc-compose{padding:10px 16px 16px;border-top:1px solid var(--ufc-hair);position:relative}
.ufc-ctx{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:8px 12px;border-radius:12px;background:rgba(219,180,60,.08);border-left:3px solid var(--ufc-gold);font-size:12.5px}
.ufc-ctx div{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ufc-ctx b{color:var(--ufc-gold-hi)}
.ufc-ctx img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.ufc-ctx button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ufc-muted)}
.ufc-cbox{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 8px;border-radius:18px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-in)}
.ufc-tools{display:flex;gap:2px;align-self:center}
.ufc-tool{width:34px;height:34px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--ufc-muted);display:flex;align-items:center;justify-content:center}
.ufc-tool:hover,.ufc-tool[aria-pressed="true"]{color:var(--ufc-gold);background:rgba(219,180,60,.08)}
.ufc-tool svg{width:18px;height:18px}
.ufc-cbox textarea{flex:1;min-width:0;resize:none;border:0;outline:0;background:none;color:var(--ufc-fg);font:400 14px/1.45 var(--ufc-font);padding:8px 2px;max-height:120px;height:38px;box-shadow:none}
.ufc-cbox textarea::placeholder{color:var(--ufc-subtle)}
.ufc-send{flex:none;height:40px;border:0;border-radius:13px;padding:0 18px;cursor:pointer;font-weight:700;font-size:13px;color:var(--ufc-on-gold)!important;background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));box-shadow:var(--ufc-sh-sm);display:flex;align-items:center;gap:8px}
.ufc-send[disabled]{opacity:.55;cursor:default}
.ufc-send svg{width:16px;height:16px}
.ufc-hint{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:11px;color:var(--ufc-subtle);flex-wrap:wrap}
.ufc-hint kbd{font:600 10.5px/1 var(--ufc-font);padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.06);color:var(--ufc-muted)}
.ufc-pop{position:absolute;left:16px;right:16px;bottom:calc(100% - 4px);z-index:15;padding:6px;border-radius:16px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-pop)}
.ufc-emojis{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:2px;padding:6px;max-height:200px;overflow:auto}
.ufc-emojis button{border:0;background:none;font-size:20px;padding:4px;border-radius:8px;cursor:pointer}
.ufc-emojis button:hover{background:rgba(255,255,255,.06)}
.ufc-muted{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:rgba(226,104,91,.08);box-shadow:inset 0 0 0 1px rgba(226,104,91,.3);font-size:13px}
.ufc-muted svg{width:22px;height:22px;color:var(--ufc-danger);flex:none}
.ufc-muted small{display:block;color:var(--ufc-subtle);font-size:11.5px}
.ufc-guest{text-align:center;padding:10px 0 4px}
.ufc-guest p{margin:0 0 4px;font:italic 600 18px/1.2 var(--ufc-display);color:var(--ufc-muted)}
.ufc-guest strong{display:block;font-size:16px;margin-bottom:12px}
.ufc-guest a.ufc-btn-gold{display:inline-flex;padding:12px 26px;border-radius:30px;font-weight:700;font-size:13px;color:var(--ufc-on-gold);background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));text-decoration:none;box-shadow:var(--ufc-sh-sm)}
.ufc-guest small{display:block;margin-top:10px;font-size:12px;color:var(--ufc-subtle)}
.ufc-guest small a{color:var(--ufc-gold)}

.ufc-toast{position:absolute;right:18px;bottom:96px;z-index:30;display:flex;align-items:center;gap:12px;max-width:calc(100% - 36px);padding:10px 14px;border-radius:16px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-pop),inset 0 0 0 1px rgba(219,180,60,.3);font-size:13px;animation:ufc-tin .4s var(--ufc-ease)}
.ufc-toast.is-err{box-shadow:var(--ufc-sh-pop),inset 0 0 0 1px rgba(226,104,91,.45)}
@keyframes ufc-tin{from{transform:translateY(12px);opacity:0}}

/* висувна панель (телефон) */
.ufc-drawer{position:absolute;inset:0;z-index:30;background:rgba(6,10,16,.55);display:flex;align-items:flex-end}
.ufc-drawer__p{width:100%;max-height:80%;overflow:auto;border-radius:26px 26px 0 0;background:var(--ufc-surface);padding:8px 6px 20px;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.ufc-drawer__grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:4px auto 8px}
.ufc-drawer .ufc-card{box-shadow:none}

/* ---------- віджет ---------- */
.ufc-fab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:9990;width:58px;height:58px;border:0;border-radius:20px;cursor:pointer;color:#0f1722;background:linear-gradient(145deg,#dbb43c,#b8901f);box-shadow:9px 9px 20px rgba(4,8,14,.7),-7px -7px 16px rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center}
.ufc-fab svg{width:24px;height:24px}
.ufc-fab .ufc-fab__n{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e2685b;color:#fff;font:700 11px/22px "DM Sans",system-ui,sans-serif;text-align:center;box-shadow:0 0 0 3px #0f1722}
.ufc-fab .ufc-fab__at{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:11px;background:#16202e;color:#dbb43c;font:700 12px/22px "DM Sans",system-ui,sans-serif;text-align:center;box-shadow:0 0 0 3px #0f1722}
.ufc-wid{position:fixed;right:16px;bottom:calc(152px + env(safe-area-inset-bottom,0px));z-index:9991;width:min(390px,calc(100vw - 32px));height:min(560px,calc(100vh - 192px));height:min(560px,calc(100dvh - 192px))}
/* на екранах до 1280 px унизу є меню сайту (.uf-bottomnav, 72 px) — кнопка й панель стоять над ним, як старий віджет */
@media (min-width:1280px){.ufc-fab{right:24px;bottom:24px}.ufc-wid{right:24px;bottom:96px;height:min(600px,calc(100vh - 124px))}}
.ufc-wid .ufc-room{height:100%;min-height:0;border-radius:24px}
.ufc-wid .ufc-room__t h2{font-size:20px}
.ufc-wid .ufc-hint{display:none}
.ufc-wid .ufc-room__head{padding:12px 12px 10px;gap:8px}
.ufc-wid .ufc-room__ico{width:36px;height:36px;border-radius:12px}
.ufc-wid .ufc-room__t h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ufc-wid .ufc-ibtn{width:32px;height:32px;border-radius:10px}
.ufc-wid .ufc-ibtn svg{width:15px;height:15px}
.ufc-wid .ufc-screen{margin:0 14px 6px}
.ufc-wid .ufc-feed{padding:6px 8px 14px}
.ufc-wid .ufc-row{grid-template-columns:36px minmax(0,1fr);column-gap:10px}
.ufc-wid .ufc-row__ava .ufc-ava{--s:32px}
.ufc-wid .ufc-compose{padding:8px 10px 12px}
.ufc-wid .ufc-tool.is-extra{display:none}

/* ---------- етап 2: картки тайтлів, підказки, налаштування, «дивиться» ---------- */
.ufc-poster{position:relative;display:block;width:62px;aspect-ratio:2/3;flex:none;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,#2a3a52,#131c28);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.ufc-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ufc-tcard{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;margin-top:6px;padding:10px;border-radius:16px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);width:min(380px,100%)}
.ufc-tcard__b{min-width:0;display:flex;flex-direction:column;gap:4px}
.ufc-tcard__t{font:600 14px/1.25 var(--ufc-font);color:var(--ufc-fg);text-decoration:none}
.ufc-tcard__t:hover{color:var(--ufc-gold-hi)}
.ufc-tcard__o{font-size:11.5px;color:var(--ufc-subtle)}
.ufc-tcard__meta{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--ufc-muted)}
.ufc-tcard__meta span{padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.05)}
.ufc-tcard__meta .ufc-imdb{background:#f5c518;color:#111;font-weight:700}
.ufc-tcard__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:700;color:var(--ufc-on-gold)!important;background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));text-decoration:none}
.ufc-pop__h{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ufc-subtle);padding:6px 10px 4px}
.ufc-sug{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:6px 10px;border-radius:10px;cursor:pointer;text-align:left}
.ufc-sug.is-on,.ufc-sug:hover{background:rgba(219,180,60,.1)}
.ufc-sug .ufc-ava{--s:28px}
.ufc-sug__n{font-size:13px;font-weight:600;color:var(--rank,var(--ufc-fg))}
.ufc-sug__s{margin-left:auto;font-size:11px;color:var(--ufc-subtle);white-space:nowrap}
.ufc-sug__tt{display:flex;flex-direction:column;min-width:0}
.ufc-sug__tt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ufc-sug__tt small{font-size:11px;color:var(--ufc-subtle)}
.ufc-pop [data-res]{max-height:300px;overflow:auto}
.ufc-fld{display:block;width:calc(100% - 12px);margin:4px 6px 6px;padding:9px 12px;border:0;border-radius:12px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);color:var(--ufc-fg);font:400 13.5px/1.3 var(--ufc-font);outline:0}
.ufc-sheet{position:absolute;top:64px;right:16px;z-index:25;width:min(320px,calc(100% - 32px));padding:14px;border-radius:18px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-pop)}
.ufc-sheet h3{margin:0 0 10px;font:italic 600 18px/1 var(--ufc-display);color:var(--ufc-fg)}
.ufc-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;font-size:13px;border-top:1px solid var(--ufc-hair)}
.ufc-sw small{display:block;color:var(--ufc-subtle);font-size:11px}
.ufc-tg{width:40px;height:22px;border-radius:99px;border:0;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);position:relative;cursor:pointer;flex:none}
.ufc-tg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ufc-subtle);transition:all .2s var(--ufc-ease)}
.ufc-tg[aria-pressed="true"]{background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep))}
.ufc-tg[aria-pressed="true"]::after{left:21px;background:var(--ufc-on-gold)}
.ufc-urow>a{display:flex;text-decoration:none}
a.ufc-urow__n{text-decoration:none}
.ufc-urow__s a{color:var(--ufc-gold-hi);text-decoration:none}
.ufc-urow__p{display:inline-block;width:12px;height:16px;border-radius:2px;vertical-align:-3px;margin-right:5px;overflow:hidden;background:#2a3a52}
.ufc-urow__p img{width:100%;height:100%;object-fit:cover;display:block}
.ufc-ava__dot.is-watch{background:#8b5cf6}
.ufc-wid .ufc-ttl{display:none}
.ufc-wid .ufc-tcard{grid-template-columns:48px minmax(0,1fr)}
.ufc-wid .ufc-tcard .ufc-poster{width:48px}

/* компактне поле введення: віджет і вузькі екрани — інструменти під «+», «Надіслати» — іконка */
.ufc-plus{display:none}
.ufc-pop--menu{left:10px;right:auto;width:200px;padding:6px}
.ufc-pop--menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:10px;font-size:13px;cursor:pointer;color:var(--ufc-fg);text-align:left}
.ufc-pop--menu button:hover{background:rgba(219,180,60,.1);color:var(--ufc-gold-hi)}
.ufc-pop--menu svg{width:18px;height:18px;color:var(--ufc-gold);flex:none}
.ufc-wid .ufc-tools .ufc-tool:not(.ufc-plus){display:none}
.ufc-wid .ufc-plus{display:flex}
.ufc-wid .ufc-cbox{gap:4px;padding:5px 5px 5px 5px;border-radius:16px}
.ufc-wid .ufc-send{width:38px;height:38px;padding:0;justify-content:center;border-radius:12px}
.ufc-wid .ufc-send span{display:none}
.ufc-wid .ufc-cbox textarea{padding:8px 4px}
@media (max-width:820px){
  .ufc-tools .ufc-tool:not(.ufc-plus){display:none}
  .ufc-plus{display:flex}
  .ufc-cbox{gap:4px;padding:5px}
  .ufc-send{width:38px;height:38px;padding:0;justify-content:center;border-radius:12px}
  .ufc-send span{display:none}
}

/* шкала рівня (XP) */
.ufc-bar{display:block;flex:1;height:7px;border-radius:9px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);overflow:hidden}
.ufc-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--rank,var(--ufc-gold)) 70%,#000),var(--rank,var(--ufc-gold-hi)));transition:width .6s var(--ufc-ease)}
.ufc-bar--lg{height:10px}
.ufc-lvlcard__b{display:flex;align-items:center;gap:14px;padding:6px 16px 4px}
.ufc-lvlcard__b .ufc-ava{margin:8px}
.ufc-lvlcard__lvl{display:flex;align-items:center;gap:6px;color:var(--rank);font-size:13px}
.ufc-lvlcard__lvl svg{width:16px;height:16px}
.ufc-lvlcard__lvl b{font:700 22px/1 var(--ufc-font);font-variant-numeric:tabular-nums}
.ufc-lvlcard__r{font:italic 600 15px/1.2 var(--ufc-display);color:var(--ufc-muted);margin-top:3px}
.ufc-lvlcard__bar{padding:10px 16px 6px}
.ufc-lvlcard__nums{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:11.5px;color:var(--ufc-subtle);font-variant-numeric:tabular-nums}
.ufc-lvlcard__nums span:first-child{color:var(--ufc-fg-2);font-weight:600}
.ufc-lvlcard__links{display:flex;gap:6px;padding:8px 12px 14px;flex-wrap:wrap}
.ufc-lvlcard__links a{flex:1;text-align:center;padding:7px 8px;border-radius:10px;font-size:12px;font-weight:600;color:var(--ufc-muted);text-decoration:none;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm)}
.ufc-lvlcard__links a:hover{color:var(--ufc-gold)}
.ufc-coins{font:700 12px/1 var(--ufc-font);color:var(--ufc-gold);font-variant-numeric:tabular-nums}
.ufc-xpstrip{display:flex;align-items:center;gap:8px;margin:0 14px 8px;padding:6px 10px;border-radius:12px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);text-decoration:none;color:var(--ufc-subtle);font-size:11px}
.ufc-xpstrip__l{display:inline-flex;align-items:center;gap:4px;color:var(--rank);font:700 11.5px/1 var(--ufc-font)}
.ufc-xpstrip__l svg{width:12px;height:12px}
.ufc-xpstrip__n{font-variant-numeric:tabular-nums;white-space:nowrap}
.ufc-xpstrip .ufc-bar{height:6px}

/* ---------- етап 3: опитування, події гри, системні, прогрес ---------- */
.ufc-poll{margin-top:2px;padding:14px;border-radius:18px;background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);width:min(440px,100%)}
.ufc-poll__h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ufc-gold)}
.ufc-poll__h svg{width:15px;height:15px}
.ufc-poll__q{margin:6px 0 10px;font:italic 600 19px/1.2 var(--ufc-display);color:var(--ufc-fg)}
.ufc-opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:8px 12px;border:0;border-radius:12px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);cursor:pointer;text-align:left;overflow:hidden;min-height:40px}
.ufc-opt[disabled]{cursor:default}
.ufc-opt__fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(219,180,60,.24),rgba(219,180,60,.08));transition:width .6s var(--ufc-ease)}
.ufc-opt>*:not(.ufc-opt__fill){position:relative}
.ufc-opt .ufc-poster{width:28px;border-radius:5px}
.ufc-opt__t{flex:1;min-width:0;font-size:13px;font-weight:600}
.ufc-opt__p{font:700 12px/1 var(--ufc-font);color:var(--ufc-gold);font-variant-numeric:tabular-nums}
.ufc-opt.is-mine{box-shadow:var(--ufc-sh-in-sm),inset 0 0 0 1px rgba(219,180,60,.6)}
.ufc-opt.is-win .ufc-opt__fill{background:linear-gradient(90deg,rgba(219,180,60,.38),rgba(219,180,60,.14))}
.ufc-poll__f{margin-top:10px;font-size:11.5px;color:var(--ufc-subtle)}
.ufc-gevrow,.ufc-sysrow{padding:4px 6px}
.ufc-gev{display:flex;align-items:center;gap:12px;margin:8px auto;padding:10px 14px;max-width:540px;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--c) 14%,var(--ufc-surface-2)),var(--ufc-surface-2) 70%);box-shadow:var(--ufc-sh-in-sm),inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.ufc-gev.is-gone{justify-content:center;color:var(--ufc-subtle);font-style:italic;font-size:12px;--c:#565663}
.ufc-gev__a{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.ufc-gev__art,.ufc-gev__art svg{width:40px;height:40px;display:block}
.ufc-gev__em{font-size:24px}
.ufc-gev__t{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--ufc-fg-2)}
.ufc-gev__t b{color:var(--ufc-fg)}
.ufc-gev__t small{display:block;font-size:11px;color:var(--ufc-subtle)}
.ufc-gev__t small a{color:var(--ufc-gold-hi);text-decoration:none}
.ufc-cheer{flex:none;border:0;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);color:var(--ufc-muted);white-space:nowrap}
.ufc-cheer:hover{color:var(--ufc-gold)}
.ufc-cheer.is-done,.ufc-cheer[disabled]{color:var(--ufc-gold);cursor:default}
.ufc-sysmsg{text-align:center;margin:10px auto;max-width:540px;font-size:12.5px;color:var(--ufc-muted)}
.ufc-sysmsg b{color:var(--ufc-gold-hi)}
.ufc-sysmsg__card{display:flex;justify-content:center}
.ufc-modal-bg{position:absolute;inset:0;z-index:40;background:rgba(6,10,16,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.ufc-modal{width:min(440px,100%);max-height:100%;overflow:auto;padding:18px;border-radius:22px;background:var(--ufc-surface);box-shadow:var(--ufc-sh)}
.ufc-modal h3{margin:0 0 4px;font:italic 600 22px/1.1 var(--ufc-display);color:var(--ufc-fg)}
.ufc-modal p{margin:0 0 10px;font-size:12.5px;color:var(--ufc-muted)}
.ufc-modal .ufc-fld{width:100%;margin:6px 0}
.ufc-lab{display:block;font-size:11.5px;color:var(--ufc-subtle);margin-top:4px}
.ufc-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.ufc-chip{border:0;border-radius:99px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);color:var(--ufc-muted)}
.ufc-chip[aria-pressed="true"]{color:var(--ufc-on-gold);background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep));box-shadow:none}
.ufc-mrow{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ufc-btn{border:0;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;background:var(--ufc-surface);box-shadow:var(--ufc-sh-sm);color:var(--ufc-fg)}
.ufc-btn--gold{color:var(--ufc-on-gold);background:linear-gradient(145deg,var(--ufc-gold),var(--ufc-gold-deep))}
.ufc-btn[disabled]{opacity:.55}
.ufc-prog{padding:4px 16px 4px;display:flex;flex-direction:column;gap:12px}
.ufc-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}
.ufc-q__n{font-size:13px;font-weight:600}
.ufc-q__n small{display:block;font-size:11px;font-weight:500;color:var(--ufc-subtle)}
.ufc-q__n small a{color:var(--ufc-gold-hi)}
.ufc-q__v{font:700 12px/1 var(--ufc-font);color:var(--ufc-gold);font-variant-numeric:tabular-nums}
.ufc-q .ufc-bar{grid-column:1/-1;--rank:var(--ufc-gold)}
.ufc-q.is-done .ufc-q__v{color:var(--ufc-ok)}
.ufc-bar--so i{background:linear-gradient(90deg,#c2410c,#f59e0b)}
.ufc-nextb{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--ufc-surface-2);box-shadow:var(--ufc-sh-in-sm);font-size:12.5px}
.ufc-nextb__a{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px}
.ufc-nextb__a svg{width:100%;height:100%}
.ufc-nextb small{display:block;color:var(--ufc-subtle);font-size:11px}

/* ---------- етап 4: модерація ---------- */
.ufc-btn--red{color:#fff;background:linear-gradient(145deg,#e2685b,#b8483d)}
.ufc-chk{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--ufc-muted);cursor:pointer}
.ufc-chk input{width:16px;height:16px;accent-color:var(--ufc-gold)}

/* ---------- 1.3.4: гості на сайті, превʼю картки ---------- */
.ufc-guests{padding:0 16px 14px;font-size:11.5px;color:var(--ufc-subtle)}
.ufc-cardprev{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(219,180,60,.06);box-shadow:inset 0 0 0 1px rgba(219,180,60,.25);font-size:12.5px}
.ufc-cardprev div{flex:1;min-width:0}
.ufc-cardprev b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ufc-fg)}
.ufc-cardprev small{color:var(--ufc-subtle);font-size:11px}
.ufc-cardprev button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ufc-muted)}

/* до 1280 px унизу меню сайту (.uf-bottomnav, 72 px): кімната не повинна заходити під нього */
@media (max-width:1279px){.ufc-room{height:min(860px,calc(100vh - 200px));height:min(860px,calc(100dvh - 200px))}}
@media (max-width:1180px){.ufc-hall.has-right{grid-template-columns:250px minmax(0,1fr)}.ufc-hall>.ufc-side-r{display:none}}
@media (max-width:820px){
  .ufc-hall,.ufc-hall.has-right{grid-template-columns:1fr;padding:12px 8px 24px}
  .ufc-hall>.ufc-side{display:none}
  .ufc-online-btn{display:flex}
  .ufc-room{height:calc(100vh - 180px);height:calc(100dvh - 180px);min-height:380px} /* шапка ~86 px + нижнє меню сайту 72 px + відступ */
  .ufc-room__head{padding:12px 12px 10px}.ufc-room__t h1{font-size:20px}
  .ufc-screen{margin:0 12px 6px}
  .ufc-feed{padding:6px 8px 14px}
  .ufc-row{grid-template-columns:34px minmax(0,1fr);column-gap:9px}
  .ufc-row__ava .ufc-ava{--s:32px}
  .ufc-compose{padding:8px 10px 12px}
  .ufc-hint{display:none}
  .ufc-tool.is-extra{display:none}
}
@media (max-width:560px){
  .ufc-wid{inset:0;width:auto;height:auto;z-index:9995}
  .ufc-wid .ufc-room{border-radius:0}
  .ufc-wid.is-open~.ufc-fab,.ufc-fab.is-open{display:none}
}
@media (prefers-reduced-motion:reduce){.ufc *,.ufc *::before,.ufc *::after{animation:none!important;transition:none!important}}

/* uf_game: картинкові рамки (PNG/WebP, отвір 40 %) — рамка = 2,5 × аватар */
.ufa__fx:has(>img),.ufg-side-frame:has(>img),.ufc-fx:has(>img),.ufh-fx:has(>img),.ufc-ava__fx:has(>img){inset:-75%}
.ufa__fx>img,.ufg-side-frame>img,.ufc-fx>img,.ufh-fx>img,.ufc-ava__fx>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
/* uf_game: картинкові рамки — компактніше там, де мало місця */
.ufg-it .ufa:has(>.ufa__fx>img){--s:60px!important}
.ufh-fx:has(>img){inset:-50%}
/* uf_game: картинкові рамки — виправлення місць (13.10) */
.ufa__fx>img,.ufg-side-frame>img,.ufc-fx>img,.ufh-fx>img,.ufc-ava__fx>img{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important}
.uf-pcard__ava .ufg-side-frame:has(>img){inset:-50%}
.uf-disc__ava:has(>.ufc-fx>img){width:32px;height:32px;flex:none;margin:4px 16px 0 12px}
.uf-disc__ava:has(>.ufc-fx>img)>img{width:32px;height:32px}
.uf-comment__ava:has(>.ufc-fx>img){margin:6px 10px 0 6px}
.ufc-row:has(>.ufc-row__ava .ufc-ava__fx>img){grid-template-columns:62px minmax(0,1fr)}
.ufc-row__ava:has(.ufc-ava__fx>img){padding:8px 16px 0 14px}
.ufc-row__ava .ufc-ava:has(>.ufc-ava__fx>img){--s:32px!important}
.ufg-pod .ufa__fx:has(>img),.ufg-trow2 .ufa__fx:has(>img),.ufa[style*="--s:110px"] .ufa__fx:has(>img){inset:-50%}
.ufg-pod>.ufa:has(>.ufa__fx>img){margin-bottom:16px}
.ufg-trow2>.ufa:has(>.ufa__fx>img){--s:32px!important;margin-inline:16px 12px}
/* uf_game: картинкові рамки на сторінці чату (13.10) */
.ufc-urow .ufc-ava__fx:has(>img),.ufc-trow .ufc-ava__fx:has(>img),.ufc-lvlcard__b .ufc-ava__fx:has(>img){inset:-50%}
.ufc-urow .ufc-ava:has(>.ufc-ava__fx>img){margin:8px 14px 8px 10px}
.ufc-trow:has(>.ufc-ava>.ufc-ava__fx>img){grid-template-columns:22px 56px minmax(0,1fr) auto}
.ufc-trow .ufc-ava:has(>.ufc-ava__fx>img){margin:8px 0 8px 12px}
.ufc-lvlcard__b .ufc-ava:has(>.ufc-ava__fx>img){margin:14px 16px 14px 12px}