/* Headora.ai — «Вместе веселее»: оцени работы (свайп), подарки энергии, игры, друзья. Только CSS-макеты экранов приложения
   на настоящих работах из assets/showcase; без JS. Плюс полоска «Нейросеть не ответила — предложим другую». */

.soc-sec{padding-block:var(--sec) 0}
.soc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.soc-card{display:grid;grid-template-rows:auto 1fr;gap:22px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden;min-width:0}
.soc-txt{display:grid;gap:8px;align-content:start}
.soc-txt h3{font:700 22px/1.2 var(--f-display);text-wrap:balance}
.soc-txt p{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:46ch}
.soc-tag{justify-self:start;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.soc-stage{position:relative;min-height:250px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(120% 90% at 50% 100%,rgba(59,130,246,.14),transparent 60%),rgba(0,0,0,.25);
  border:1px solid var(--line);padding:18px;overflow:hidden}
.soc-ic{width:18px;height:18px;flex:none}

/* 1 · Оцени работы — стопка карточек и две кнопки */
.swipe-deck{position:relative;width:min(190px,62%);aspect-ratio:3/4}
.swipe-deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}
.swipe-deck img:nth-child(1){transform:rotate(-7deg) translate(-14px,6px);filter:brightness(.55)}
.swipe-deck img:nth-child(2){transform:rotate(5deg) translate(12px,2px);filter:brightness(.7)}
.swipe-deck img:nth-child(3){animation:swipe 4.2s cubic-bezier(.5,0,.3,1) infinite}
.deck-like{position:absolute;top:12px;left:12px;padding:5px 9px;border-radius:8px;border:2px solid var(--success);color:var(--success);
  font:800 13px/1 var(--f-body);letter-spacing:.08em;transform:rotate(-10deg);opacity:0;animation:likeflash 4.2s infinite}
.deck-btns{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:18px}
.deck-btns span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#16161C;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.deck-btns .no{color:var(--danger)} .deck-btns .yes{color:#F472B6}
.deck-btns .soc-ic{width:20px;height:20px}
@keyframes swipe{0%,40%{transform:none;opacity:1}62%{transform:translate(160px,-10px) rotate(16deg);opacity:0}63%{transform:scale(.92);opacity:0}80%,100%{transform:none;opacity:1}}
@keyframes likeflash{0%,30%{opacity:0}42%,58%{opacity:1}62%,100%{opacity:0}}

/* 2 · Подари энергию */
.tip{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;width:min(380px,100%)}
.tip img{width:120px;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.tip-panel{display:grid;gap:10px}
.tip-who{font:600 13.5px/1.3 var(--f-body)}
.tip-who small{display:block;color:var(--dim);font-weight:500;margin-top:2px}
.tip-amts{display:flex;flex-wrap:wrap;gap:6px}
.tip-amts span{padding:7px 10px;border-radius:999px;border:1px solid var(--line-2);font:600 13px/1 var(--f-body);font-variant-numeric:tabular-nums}
.tip-amts .on{background:var(--accent);border-color:var(--accent)}
.tip-send{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:12px;background:linear-gradient(90deg,#3B82F6,#8B5CF6);font:700 14px/1 var(--f-body)}
.tip-link{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.tip-link b{color:var(--text);font-weight:600}

/* 3 · Игры — «Угадай промпт» */
.game{width:min(330px,100%);display:grid;gap:10px}
.game-top{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.game-top b{color:var(--gold);font-weight:600}
.game-pic{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.game-pic img{width:100%;height:100%;object-fit:cover}
.game-bar{position:absolute;left:0;bottom:0;height:4px;background:var(--gold);animation:timer 10s linear infinite}
@keyframes timer{from{width:100%}to{width:0}}
.game-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.game-opts span{padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);font:600 12.5px/1.25 var(--f-body)}
.game-opts .ok{border-color:var(--success);background:rgba(52,211,153,.12)}
.game-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.game-modes span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:#BFD5FF;font:600 12px/1 var(--f-body)}

/* 4 · Друзья */
.fr{width:min(340px,100%);display:grid;gap:10px}
.fr-invite{display:grid;gap:6px;padding:14px;border-radius:14px;background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.18));border:1px solid rgba(139,92,246,.35)}
.fr-invite b{font:700 18px/1.2 var(--f-display)}
.fr-invite small{color:rgba(255,255,255,.75);font-size:13px;line-height:1.4}
.fr-msg{display:flex;gap:10px;align-items:flex-end}
.fr-ava{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:#F59E0B;color:#1A1205;font:800 13px/1 var(--f-body)}
.fr-bub{display:grid;gap:8px;padding:8px;border-radius:14px 14px 14px 4px;background:#23232B;max-width:230px}
.fr-bub img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px}
.fr-bub span{font-size:13px;padding:0 4px}
.fr-same{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:10px;border:1px solid var(--line-2);font:600 12.5px/1 var(--f-body)}

/* Полоска надёжности */
.soc-safe{display:flex;align-items:center;gap:14px;margin-top:20px;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.soc-safe .soc-ic{width:22px;height:22px;color:var(--success)}
.soc-safe p{color:var(--muted);font-size:15px;line-height:1.5}
.soc-safe b{color:var(--text)}
.soc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:820px){.soc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.soc-card{padding:16px}.tip{grid-template-columns:96px minmax(0,1fr)}.tip img{width:96px}}
@media (prefers-reduced-motion:reduce){.swipe-deck img:nth-child(3),.deck-like,.game-bar{animation:none}.deck-like{opacity:1}}