/* Друзья, сообщения, уведомления, лента активности */
.ic14{width:14px;height:14px;flex:none}
.ava.xs{width:20px;height:20px;font-size:9px}

/* кнопки дружбы */
.fr-box{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.fr-box.busy{opacity:.55;pointer-events:none}
.fr-f{display:inline}
.fr-sent{color:var(--muted)}
.fr-menu{position:relative}
.fr-menu>summary{list-style:none;cursor:pointer}
.fr-menu>summary::-webkit-details-marker{display:none}
.fr-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;z-index:40;display:flex;flex-direction:column}
.fr-pop a,.fr-pop button,.fr-pop .btn{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:500;background:none;height:auto;color:var(--fg)}
.fr-pop a:hover,.fr-pop button:hover{background:var(--surface-2)}
.fr-actions .fr-cnt b{font-weight:700}
.fr-badge{display:inline-block;margin-left:6px;font:700 11px var(--body);background:var(--red);color:#fff;border-radius:99px;padding:2px 7px}
.ptabs .fr-badge{margin-left:0}
.fr-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:2147483001;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .4s;max-width:calc(100vw - 32px)}
.fr-toast.off{opacity:0}
@media (max-width:760px){.fr-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* списки людей */
.page-h.act-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-h.act-top h1{margin:0}
.page-h.act-top>.btn{margin-left:auto}
.act-who{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.act-who small{display:block}
.fr-search{display:flex;gap:8px;align-items:center;position:relative}
.fr-search svg{position:absolute;left:28px;width:16px;height:16px;color:var(--muted)}
.fr-search input{flex:1;min-width:0;height:38px;border-radius:10px;border:1px solid transparent;background:var(--surface-2);padding:0 12px 0 36px}
.fr-search input:focus{outline:none;border-color:var(--red);background:var(--surface)}
.fr-tabs{overflow-x:auto}
.fr-list{display:flex;flex-direction:column;gap:2px}
.fr-cap{font-family:var(--display);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.01em;margin:2px 0 8px}
.fr-cap small{font-family:var(--body);text-transform:none;font-size:12.5px;font-weight:500;letter-spacing:0}
.fr-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.fr-cap+.fr-row,.fr-list>.fr-row:first-child,.fr-list>p+.fr-row{border-top:0}
.fr-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none}
.fr-who>span{min-width:0}
.fr-who b{font-weight:600}
.fr-who small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fr-acts .btn{height:32px;padding:0 12px}
.fr-note{margin:4px 2px 0}
.fr-opt{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.fr-opt input{margin-top:3px;accent-color:var(--red)}
.fr-opt small{display:block;color:var(--muted);font-size:12.5px}
.fr-opt b{font-weight:600}
@media (max-width:560px){
  .fr-row{flex-wrap:wrap}
  .fr-acts{width:100%;justify-content:flex-start;padding-left:46px}
}

/* лента активности */
.act-f{display:flex;gap:6px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.act-f::-webkit-scrollbar{display:none}
.act-f .pill{flex:none;color:var(--fg)}
.act-f .pill.on{color:var(--red-ink)}
.act{display:flex;flex-direction:column;gap:12px}
.act-h{display:flex;gap:10px;align-items:flex-start}
.act-t{min-width:0;line-height:1.45;padding-top:1px}
.act-n{font-weight:700;color:var(--fg)}
.act-l{color:var(--fg)}
.act-l a{color:inherit;font-weight:600}
.act-k{width:15px;height:15px;vertical-align:-2px;margin:0 4px 0 6px;color:var(--muted)}
.ak-own .act-k{color:#1c8a4a}.ak-preordered .act-k{color:#d98a00}.ak-want .act-k{color:#e0211b}.ak-played .act-k{color:#2f5bd1}
.ak-play .act-k,.ak-rating .act-k{color:var(--red)}
.ak-like_photo .act-k,.ak-like_review .act-k,.ak-like_list .act-k{color:#e0211b}
.act-time{display:block;font-size:12px;color:var(--faint)}
.act-b:empty{display:none}
.act-game{display:flex;gap:12px;align-items:flex-start;color:inherit;text-decoration:none;padding:8px;margin:0 -8px;border-radius:10px}
.act-game:hover{background:var(--surface-2)}
.act-game>span:not(.act-r):not(.act-lock):not(.gl){min-width:0;flex:1}
.act-game b{display:block;font-weight:600}
.act-game small{display:block;color:var(--muted);font-size:12.5px}
.act-game .gl.lg{width:48px;height:48px;overflow:hidden}
.act-game .gl img,.act-cv .gl img{width:100%;height:100%;object-fit:cover;display:block}
.act-r{flex:none;min-width:32px;height:32px;padding:0 6px;border-radius:8px;display:grid;place-items:center;font:600 17px var(--display);background:var(--surface-2);color:var(--fg)}
.act-r.good{background:var(--ok);color:#fff}.act-r.mid{background:#d98a00;color:#fff}.act-r.low{background:var(--red);color:#fff}
.act-covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.act-cv{position:relative;display:flex;flex-direction:column;gap:5px;color:inherit;text-decoration:none;min-width:0}
.act-cv .gl{width:100%;height:auto;aspect-ratio:1;border-radius:9px;overflow:hidden;font-size:30px}
.act-cv-t{font-size:12px;line-height:1.3;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.act-cv .act-r{position:absolute;top:6px;right:6px;min-width:26px;height:26px;font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.act-more{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:var(--surface-2);font:600 20px var(--display);color:var(--muted);text-decoration:none}
.act-pl{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:12.5px;color:var(--muted)}
.act-pl .win{color:var(--fg);font-weight:600}
.act-pl svg{width:13px;height:13px;color:#d98a00;vertical-align:-2px;margin-right:2px}
.act-pl b{color:var(--fg);font-weight:600}
.act-lock svg{width:15px;height:15px;color:var(--faint)}
.act-q{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--fg)}
.act-phs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.act-phs a{display:block;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--surface-2)}
.act-phs img{width:100%;height:100%;object-fit:cover;display:block}
.act-phs .act-more{aspect-ratio:4/3}
.act-list,.act-post{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.act-list b,.act-post b{font-weight:600;font-size:15px}
.act-list small,.act-post small{color:var(--muted);font-size:12.5px}
.act-lm{display:flex;gap:6px;margin-top:6px}
.act-lm .lcv{width:44px;height:44px;border-radius:7px}
.act-post{flex-direction:row;gap:12px;align-items:center}
.act-post img{width:96px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.act-post>span{min-width:0;display:flex;flex-direction:column;gap:3px}
.act-fr{display:flex;align-items:center;gap:10px}
.act-fr .ava.lg{width:52px;height:52px;font-size:22px}
.act-fr-x svg{width:20px;height:20px;color:var(--muted)}
.act-empty h2{margin-bottom:6px}
.act-empty .fr-cap{margin-top:14px}
@media (max-width:560px){
  .act-covers{grid-template-columns:repeat(3,1fr);gap:8px}
  .act-phs{grid-template-columns:repeat(2,1fr)}
  .act-post img{width:72px;height:54px}
}

/* уведомления */
.nt-list{padding:6px}
.nt{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px}
.nt+.nt{border-top:1px solid var(--line);border-radius:0}
.nt.new{background:var(--red-soft);border-radius:10px}
.nt.new+.nt{border-top-color:transparent}
.nt-ic{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;flex:none}
.nt.new .nt-ic{background:var(--surface)}
.nt-k{width:17px;height:17px;color:var(--red)}
.nt-main{flex:1;min-width:0;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:2px}
.nt-tx{line-height:1.45}
.nt-tx b{font-weight:600}
.nt-q{display:block;color:var(--muted);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt time{font-size:12px}
.nt-pic{flex:none}
.nt-pic .gl{width:44px;height:44px;overflow:hidden}
.nt-pic .gl img{width:100%;height:100%;object-fit:cover}
.nt-ph{width:56px;height:44px;object-fit:cover;border-radius:7px;display:block}
.nt-acts .btn{height:32px;padding:0 12px}
@media (max-width:560px){.nt{flex-wrap:wrap}.nt-acts{width:100%;padding-left:46px}}

/* сообщения */
.dm{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
.dm-side{padding:10px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 74px);max-height:calc(100vh - 100px);overflow:auto}
.dm-side-h{padding:4px 6px 8px}
.dm-side-h h1{font-size:20px}
.dm-none{padding:0 6px;font-size:13.5px}
.dm-cap{padding:10px 6px 0;font-size:13px}
.dm-list{display:flex;flex-direction:column;gap:2px}
.dm-it{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;color:inherit;text-decoration:none;min-width:0}
.dm-it:hover{background:var(--surface-2)}
.dm-it.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--red)}
.dm-it-b{min-width:0;flex:1}
.dm-it-b b{display:block;font-weight:600;font-size:13.5px}
.dm-it-b small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-it.unread .dm-it-b small{color:var(--fg);font-weight:600}
.dm-it-m{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.dm-it-m time{font-size:11px;color:var(--faint)}
.dm-it-m .tb-n{position:static;border:0}
.dm-main{display:flex;flex-direction:column;padding:0;height:calc(100vh - 110px);min-height:420px;overflow:hidden}
.dm-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.dm-back{display:none;font-size:18px;color:inherit;text-decoration:none}
.dm-who{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0;flex:1}
.dm-who b{font-weight:700}
.dm-who small{display:block;color:var(--muted);font-size:12px}
.dm-more summary{font-size:18px;line-height:1}
.dm-feed{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain}
.dm-older{align-self:center;font-size:13px;margin-bottom:6px}
.dm-hello{margin:auto;text-align:center;max-width:36ch}
.dm-day{align-self:center;margin:10px 0 6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.dm-day span{background:var(--surface-2);padding:3px 10px;border-radius:99px}
.dm-m{display:flex}
.dm-m.me{justify-content:flex-end}
.dm-b{max-width:min(78%,560px);background:var(--surface-2);border-radius:14px 14px 14px 4px;padding:8px 12px 6px;line-height:1.45;overflow-wrap:anywhere}
.dm-m.me .dm-b{background:var(--red);color:#fff;border-radius:14px 14px 4px 14px}
.dm-m.me .dm-b a{color:#fff;text-decoration:underline}
.dm-b p{margin:0}
.dm-b p+p{margin-top:6px}
.dm-t{float:right;margin:6px 0 -2px 10px;font-size:10.5px;opacity:.65;display:inline-flex;align-items:center;gap:3px}
.dm-r svg{width:14px;height:14px;opacity:.5}
.dm-m.me.read .dm-r svg{opacity:1}
.dm-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.dm-form textarea{flex:1;min-height:40px;max-height:180px;resize:none;border-radius:12px;padding:9px 12px;line-height:1.4;border:1px solid var(--line);background:var(--surface-2);font:inherit;color:inherit}
.dm-form textarea:focus{outline:none;border-color:var(--red);background:var(--surface)}
.dm-form .btn{height:40px}
.dm-block{padding:12px 14px;border-top:1px solid var(--line);margin:0;font-size:13.5px}
.dm-empty{display:grid;place-items:center;text-align:center}
.dm-big{width:44px;height:44px;color:var(--faint)}
@media (max-width:900px){.dm{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:760px){
  .dm{grid-template-columns:minmax(0,1fr)}
  .dm-side{position:static;max-height:none}
  .dm-open .dm-side{display:none}
  .dm:not(.dm-open) .dm-main{display:none}
  .dm-back{display:grid}
  .dm-main{height:calc(100dvh - 150px - env(safe-area-inset-bottom,0px));min-height:360px;margin:0 -6px}
  .dm-b{max-width:86%}
}

/* форма партии: друзья */
.pl-friends{align-items:center}
.pl-friends button{display:inline-flex;align-items:center;gap:6px}
.pl-fr-cap{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.pl-fr-hint{margin:6px 0 0}
.nt-msgs{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:12px 16px}
.nt-msgs b{font-weight:600}
.nt-go{margin-left:auto;color:var(--red-ink);font-weight:600;font-size:13px}
@media (min-width:401px){.nt-msgs{display:none}}

/* сообщения: картинки и игры */
.dm-form{flex-direction:column;align-items:stretch;position:relative}
.dm-row{display:flex;gap:8px;align-items:flex-end}
.dm-att{flex:none;width:40px;height:40px;cursor:pointer;color:var(--muted)}
.dm-att:hover{color:var(--fg)}
.dm-att svg{width:19px;height:19px}
.dm-atts{display:flex;gap:8px;flex-wrap:wrap}
.dm-atts[hidden]{display:none}
.dm-att-i{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--surface-2)}
.dm-att-i img{width:100%;height:100%;object-fit:cover;display:block}
.dm-att-i.loading img{opacity:.45}
.dm-att-i.loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:dmspin .8s linear infinite}
@keyframes dmspin{to{transform:rotate(360deg)}}
.dm-att-i button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:20px;text-align:center}
.dm-sug{position:absolute;left:60px;right:12px;bottom:calc(100% - 4px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 -8px 28px rgba(0,0,0,.14);padding:6px;z-index:20;max-height:300px;overflow:auto}
.dm-sug[hidden]{display:none}
.dm-sug button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:8px;color:var(--fg)}
.dm-sug button.on,.dm-sug button:hover{background:var(--surface-2)}
.dm-sug b{font-weight:600;font-size:13.5px}
.dm-sug small{display:block;color:var(--muted);font-size:12px}
.dm-main.drop{box-shadow:inset 0 0 0 3px var(--red)}
.dm-game{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;max-width:100%;padding:1px 8px 1px 2px;border-radius:7px;background:var(--surface);color:var(--fg);font-weight:600;text-decoration:none;line-height:1.5}
.dm-game .gl.sm{width:20px;height:20px;font-size:11px;border-radius:5px;overflow:hidden}
.dm-game .gl img{width:100%;height:100%;object-fit:cover;display:block}
.dm-game span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-m.me .dm-b a.dm-game{color:var(--fg);text-decoration:none}
.dm-imgs{display:grid;gap:4px;margin:6px -6px 0;border-radius:10px;overflow:hidden}
.dm-imgs.n2,.dm-imgs.n4{grid-template-columns:1fr 1fr}
.dm-imgs.n3{grid-template-columns:1fr 1fr 1fr}
.dm-imgs a{display:block;background:rgba(0,0,0,.1)}
.dm-imgs img{display:block;width:100%;max-height:320px;object-fit:cover}
.dm-imgs.n2 img,.dm-imgs.n3 img,.dm-imgs.n4 img{height:150px}
.dm-b:has(.dm-imgs){min-width:min(260px,70vw)}
.act-ov{position:relative}
.act-ov>span.num{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font:600 24px var(--display);border-radius:inherit}
.act-cv.act-ov>.gl{position:relative}
.act-cv.act-ov>span.num{bottom:auto;aspect-ratio:1;border-radius:9px}