/* ZAHODY — живі люди: підписи, кнопки, панелі. Усе велике — під палець. */
#lv-tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lv-tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:auto;cursor:pointer;transform-origin:50% 100%;will-change:transform;white-space:nowrap}
.lv-tag.me{pointer-events:none;opacity:.92}
.lv-name{display:flex;align-items:center;gap:5px;background:rgba(31,42,51,.88);color:#fff;font-weight:700;font-size:14px;line-height:1;padding:6px 10px 6px 8px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.lv-name em{font-style:normal;font-size:17px;line-height:14px}
.lv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#38c7a4;box-shadow:0 0 0 3px rgba(56,199,164,.28);flex:none}
.lv-tag.me .lv-name{background:rgba(31,42,51,.62)}
.lv-sign{background:#fffdf4;color:#1f2a33;font-size:13px;font-weight:600;padding:5px 9px;border-radius:9px;border:2px solid #e9dcae;box-shadow:0 2px 6px rgba(0,0,0,.14);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.lv-bub{position:relative;background:#fff;color:#1f2a33;font-size:15px;font-weight:700;padding:7px 12px;border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.2);margin-bottom:4px;animation:lvpop .18s ease-out}
.lv-bub:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fff}
@keyframes lvpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

#lv-me{left:12px;top:60px;font-size:22px;padding:0} /* праворуч місця немає: Карта, Стиль, Тут, Якість, Біг */
#lv-me .lv-ic{display:block;line-height:52px}
#lv-me .lv-cnt{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;border-radius:10px;background:#38c7a4;color:#fff;font-size:12px;line-height:20px;font-weight:800;padding:0 4px;box-sizing:border-box}
#lv-me .lv-cnt:empty{display:none}
#lv-me.lv-off .lv-ic{opacity:.45}
#lv-emote{position:fixed;right:20px;bottom:max(40px,calc(var(--eb,0px) + 6px));width:64px;height:64px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:30px;cursor:pointer;z-index:3}
#lv-emote.on{background:#1f2a33}
@media (pointer:coarse){#lv-emote{bottom:44px;right:18px;width:68px;height:68px}}
body.map #lv-me,body.map #lv-emote,body.map #lv-tags,body.styling #lv-me,body.styling #lv-emote,body.styling #lv-tags,body.styling #lv-card,body.styling .lv-sheet{display:none!important}

.lv-sheet{position:fixed;right:12px;bottom:118px;width:min(380px,calc(100% - 24px));max-height:calc(100% - 140px);background:rgba(255,255,255,.98);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:none;flex-direction:column;z-index:20}
.lv-sheet.show{display:flex}
/* компʼютер: низ панелі — над плашкою хостингу справа внизу (--eb), інакше вона закриває праву половину «Готово» */
#lv-panel{top:12px;bottom:auto;max-height:calc(100% - 12px - max(12px,var(--eb,0px)))}
@media (max-width:700px){.lv-sheet,#lv-panel{left:0;right:0;bottom:0;top:auto;width:100%;max-height:72%;border-radius:20px 20px 0 0}}
/* панелі біля нижнього краю (телефон): «Готово» — над плашкою хостингу справа внизу (--eb рахує screen.js), інакше дотик
   по правій половині кнопки відкриває рекламу хостингу замість закрити панель */
@media (max-width:700px),(max-height:520px){.lv-sheet .lv-foot,#lv-panel .lv-foot{padding-bottom:max(16px,calc(var(--eb,0px) + 4px))}}
.lv-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;font-size:18px}
.lv-x{border:0;background:none;font-size:28px;line-height:28px;width:44px;height:44px;color:#8a949c;cursor:pointer}
.lv-body{overflow:auto;padding:4px 16px 12px;flex:1}
.lv-row{margin:10px 0 6px}
.lv-label{font-size:12px;font-weight:700;color:#5b6670;text-transform:uppercase;letter-spacing:.04em;margin:4px 0 8px}
.lv-opts{display:flex;flex-wrap:wrap;gap:8px}
.lv-chip{border:1.5px solid #cfd4d8;background:#fff;border-radius:22px;min-height:44px;padding:9px 14px;font-size:15px;font-weight:600;color:#1f2a33;cursor:pointer}
.lv-chip.on{background:#1f2a33;color:#fff;border-color:#1f2a33}
.lv-more{border-style:dashed}
.lv-status{font-size:13px;color:#3d4a55;background:#f2f5f6;border-radius:10px;padding:8px 10px;margin:2px 0 6px}
.lv-small{font-size:12px;color:#6b7680;margin:10px 0 2px}
.lv-link{border:0;background:none;color:#2d5d8a;text-decoration:underline;font-size:13px;cursor:pointer;padding:8px 4px;min-height:36px}
.lv-foot{padding:8px 16px 16px}
.lv-big{display:block;width:100%;border:0;border-radius:14px;min-height:52px;padding:12px;font-size:16px;font-weight:700;background:#1f2a33;color:#fff;cursor:pointer;margin:8px 0 0}
.lv-big.lv-alt{background:#eef0f2;color:#1f2a33}
.lv-big.lv-warn{background:#fff1ec;color:#b2401f}
.lv-big:disabled{opacity:.5}
.lv-gests{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.lv-gest{border:0;background:#f2f5f6;border-radius:16px;min-height:78px;font-size:30px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1f2a33}
.lv-gest small{font-size:13px;font-weight:700}
.lv-phr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lv-phr .lv-chip{border-radius:14px;min-height:48px}

#lv-card{position:fixed;left:50%;bottom:max(20px,var(--eb,0px));transform:translate(-50%,160%);visibility:hidden;width:min(380px,calc(100% - 32px));background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:16px 18px 18px;transition:transform .25s ease;z-index:15;box-sizing:border-box}
#lv-card.show{transform:translate(-50%,0);visibility:visible}
#lv-card .lv-x{position:absolute;right:6px;top:6px}
.lv-cname{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;padding-right:40px}
.lv-csign{font-size:15px;margin:8px 0 2px}
.lv-acts{margin-top:6px}

#lv-age{position:fixed;inset:0;background:rgba(31,42,51,.72);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;box-sizing:border-box}
.lv-age-box{background:#fff;border-radius:20px;padding:22px 20px 16px;width:min(400px,100%);box-shadow:0 14px 40px rgba(0,0,0,.35);box-sizing:border-box}
.lv-age-box .lv-h{font-size:20px;font-weight:800;margin-bottom:8px}
.lv-age-box p{font-size:15px;line-height:1.45;margin:0 0 8px}
.lv-age-box .lv-small{font-size:12px;margin-top:12px}
.lv-tag.me .lv-name{background:none;box-shadow:none;padding:0}
.lv-tag.me .lv-name em{font-size:26px;line-height:26px}
/* низький екран (телефон горизонтально): панелі на всю висоту праворуч, фрази в три стовпці, кнопки картки в ряд */
@media (max-height:520px){
  .lv-sheet,#lv-panel{top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));left:auto;width:min(560px,calc(100% - 16px));max-height:none;border-radius:18px}
  .lv-head{padding:8px 14px 2px}
  .lv-gests{margin:4px 0 10px}.lv-gest{min-height:58px;font-size:26px}
  .lv-phr{grid-template-columns:1fr 1fr 1fr}
  #lv-card{bottom:max(8px,var(--eb,0px));width:min(560px,calc(100% - 32px));padding:12px 16px 14px}
  #lv-card .lv-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  #lv-card .lv-acts .lv-big{margin:0;font-size:15px;padding:10px 8px}
  #lv-card .lv-acts .lv-label,#lv-card .lv-acts .lv-link{grid-column:1/-1}
}

/* ---------- крок 2: друзі в грі й обмін контактами ---------- */
#lv-fr{left:12px;top:122px;font-size:22px;padding:0}
#lv-fr .lv-ic{display:block;line-height:52px}
#lv-fr .lv-cnt{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;border-radius:10px;background:#e0773a;color:#fff;font-size:12px;line-height:20px;font-weight:800;padding:0 4px;box-sizing:border-box}
#lv-fr .lv-cnt:empty{display:none}
#lv-fr.lv-ask{box-shadow:0 0 0 4px rgba(224,119,58,.35),0 3px 10px rgba(0,0,0,.2)}
body.map #lv-fr,body.map #lv-ask,body.styling #lv-fr,body.styling #lv-ask,body.styling #lv-friends{display:none!important}
#lv-friends{top:12px;bottom:auto;max-height:calc(100% - 24px)}
@media (max-width:700px){#lv-friends{top:auto;bottom:0;max-height:78%}}
#lv-ask{position:fixed;left:50%;bottom:20px;transform:translate(-50%,160%);visibility:hidden;width:min(380px,calc(100% - 32px));background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:16px 18px 14px;transition:transform .25s ease;z-index:26;box-sizing:border-box;border-top:5px solid #38c7a4}
#lv-ask.show{transform:translate(-50%,0);visibility:visible}
.lv-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lv-two .lv-big{margin-top:10px}
.lv-links{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:4px}
.lv-note{font-size:14px;font-weight:600;color:#1f5c4d;background:#e8f7f2;border-radius:10px;padding:9px 11px;margin:8px 0 4px}
.lv-frow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eef0f2;flex-wrap:wrap}
.lv-fname{font-weight:700;font-size:15px}
.lv-fst{font-size:13px;color:#5b6670;flex:1;min-width:90px}
.lv-fdot{width:10px;height:10px;border-radius:50%;background:#c3c9ce;flex:none}
.lv-fdot.on{background:#38c7a4;box-shadow:0 0 0 3px rgba(56,199,164,.25)}
.lv-fdot.wait{background:#f2c14e}
.lv-chip.lv-sm{min-height:40px;padding:7px 12px;font-size:14px}
.lv-chip.lv-danger{background:#b2401f;border-color:#b2401f;color:#fff}
.lv-crow{padding:8px 0;border-bottom:1px solid #eef0f2}
.lv-contact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f2f5f6;border-radius:12px;padding:10px 12px;margin:8px 0 4px;font-size:15px;user-select:text;-webkit-user-select:text}
.lv-contact b{word-break:break-all;flex:1}
.lv-ct{font-size:13px;color:#5b6670;font-weight:700}
.lv-open{background:#1f2a33;color:#fff;text-decoration:none;border-radius:10px;padding:9px 14px;font-weight:700;font-size:14px;min-height:22px}
.lv-cform{margin-top:14px;padding-top:6px;border-top:2px solid #eef0f2}
.lv-inrow{display:flex;gap:8px;margin:10px 0 2px}
.lv-in{flex:1;min-width:0;border:1.5px solid #cfd4d8;border-radius:12px;min-height:44px;padding:8px 12px;font-size:16px;color:#1f2a33;user-select:text;-webkit-user-select:text;touch-action:auto;box-sizing:border-box}
.lv-in:focus{outline:none;border-color:#1f2a33}
.lv-err{font-size:13px;color:#b2401f;min-height:4px;margin:4px 0}