:root {
  --np-social-accent: #b57a35;
  --np-social-accent-bright: #e4b866;
  --np-social-panel: #2a180f;
  --np-social-card: #3b2315;
  --np-social-text: #f1d9a8;
  --np-social-muted: #b99c75;
  --np-social-line: #8b5d2e;
}

html[data-home-theme="mrak"] { --np-social-accent:#9b3029; --np-social-accent-bright:#e36a57; --np-social-panel:#11100f; --np-social-card:#201a18; --np-social-text:#eadfd5; --np-social-muted:#a99b91; --np-social-line:#654239; }
html[data-home-theme="worlds"] { --np-social-accent:#54b9bf; --np-social-accent-bright:#9be7df; --np-social-panel:#09242a; --np-social-card:#12363d; --np-social-text:#e6f6f2; --np-social-muted:#9ab9b7; --np-social-line:#397b7d; }
html[data-home-theme="kids"] { --np-social-accent:#8b66d2; --np-social-accent-bright:#f0bf58; --np-social-panel:#251837; --np-social-card:#3b2755; --np-social-text:#fff4dc; --np-social-muted:#d2bddf; --np-social-line:#805fb2; }

/*
 * Классическая тема продолжает язык исходной панели друзей: светлый
 * пергамент, тонкие разделители и тёмно-коричневые кнопки. Карточка
 * недавнего игрока намеренно не выглядит отдельным тёмным виджетом.
 */
html:not([data-home-theme]),
html[data-home-theme="classic"] {
  --np-social-accent: #9a6735;
  --np-social-accent-bright: #6d4528;
  --np-social-panel: #c4935d;
  --np-social-card: #ddb77d;
  --np-social-text: #4b301f;
  --np-social-muted: #765238;
  --np-social-line: #805735;
}

html:not([data-home-theme]) .friends-panel > .np-social-layer,
html[data-home-theme="classic"] .friends-panel > .np-social-layer { padding-right:0; padding-left:0; }
html:not([data-home-theme]) .np-social-section,
html[data-home-theme="classic"] .np-social-section { border-top-color:#78523742; }
html:not([data-home-theme]) .np-social-section > header span,
html[data-home-theme="classic"] .np-social-section > header span { color:#9a673b; }
html:not([data-home-theme]) .np-social-section > header h3,
html[data-home-theme="classic"] .np-social-section > header h3 { color:#4a3020; }
html:not([data-home-theme]) .np-recent-player,
html[data-home-theme="classic"] .np-recent-player {
  border:0;
  border-top:1px solid #78523742;
  border-radius:0;
  padding:.55rem .2rem;
  background:transparent;
  box-shadow:none;
}
html:not([data-home-theme]) .np-social-avatar,
html[data-home-theme="classic"] .np-social-avatar { border-color:#8a5c34; color:#ead3a4; background:#382319; }
html:not([data-home-theme]) :is(.np-social-action,.np-profile-friend),
html[data-home-theme="classic"] :is(.np-social-action,.np-profile-friend) {
  border-color:#9a713e;
  color:#f0d9aa;
  background:linear-gradient(#533c2c,#30221a);
  box-shadow:none;
}
html:not([data-home-theme]) :is(.np-social-action,.np-profile-friend).is-ghost,
html[data-home-theme="classic"] :is(.np-social-action,.np-profile-friend).is-ghost { color:#f0d9aa; background:#493126; }
html:not([data-home-theme]) .np-rival-card,
html[data-home-theme="classic"] .np-rival-card {
  border-color:#9a6b39;
  color:#4b301f;
  background:radial-gradient(circle at 8% 50%,#b9783424,transparent 42%),linear-gradient(135deg,#e0bd84,#c99a62);
  box-shadow:inset 0 1px #fff4;
}

.friends-panel > .np-social-layer { display:grid; gap:14px; padding:0 22px 24px; }
.np-social-section { border-top:1px solid color-mix(in srgb,var(--np-social-line) 55%,transparent); padding-top:14px; }
.np-social-section > header { display:flex; margin-bottom:9px; align-items:flex-end; justify-content:space-between; }
.np-social-section > header span { color:var(--np-social-accent); font-size:10px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.np-social-section > header h3 { margin:0; color:inherit; font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.np-social-section > div { display:grid; gap:7px; }
.np-recent-player,.np-rival-card { display:grid; min-width:0; border:1px solid color-mix(in srgb,var(--np-social-line) 65%,transparent); border-radius:3px; padding:9px; align-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--np-social-card) 92%,transparent),color-mix(in srgb,var(--np-social-panel) 88%,#000)); box-shadow:inset 0 1px #fff1; }
.np-recent-player { grid-template-columns:42px minmax(0,1fr) auto; gap:9px; }
.np-social-avatar { display:grid; width:42px; height:42px; overflow:hidden; border:1px solid var(--np-social-accent); border-radius:50%; padding:0; place-items:center; color:var(--np-social-text); background:#140b08; }
.np-social-avatar img { width:100%; height:100%; object-fit:cover; }
.np-social-copy { display:flex; min-width:0; flex-direction:column; }
.np-social-copy > strong { overflow:hidden; color:var(--np-social-text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.np-social-copy > small,.np-social-copy > em { color:var(--np-social-muted); font-size:10px; font-style:normal; line-height:1.35; }
.np-social-actions { display:flex; gap:5px; }
.np-social-action,.np-profile-friend { min-height:31px; border:1px solid var(--np-social-line); border-radius:2px; padding:6px 9px; color:var(--np-social-text); background:linear-gradient(180deg,color-mix(in srgb,var(--np-social-accent) 45%,var(--np-social-card)),var(--np-social-card)); font:800 10px/1.15 Literata,Georgia,serif; letter-spacing:.03em; text-transform:uppercase; }
.np-social-action:hover:not(:disabled),.np-profile-friend:hover:not(:disabled) { border-color:var(--np-social-accent-bright); filter:brightness(1.12); }
.np-social-action.is-ghost { background:#0002; }
.np-social-action.is-muted,.np-profile-friend:disabled { opacity:.65; cursor:default; }
.np-rival-card { grid-template-columns:34px minmax(0,1fr) auto; gap:10px; border-color:color-mix(in srgb,var(--np-social-accent) 80%,var(--np-social-line)); background:radial-gradient(circle at 8% 50%,color-mix(in srgb,var(--np-social-accent) 18%,transparent),transparent 42%),linear-gradient(135deg,var(--np-social-card),var(--np-social-panel)); }
.np-rival-mark { font-size:22px; filter:drop-shadow(0 0 7px var(--np-social-accent)); }
.np-rival-card .np-social-copy > small { color:var(--np-social-accent-bright); font-size:9px; font-weight:900; letter-spacing:.08em; }
.np-rival-card .np-social-copy > strong b,.np-profile-rivalry b { color:var(--np-social-accent-bright); font-size:18px; }
.np-rival-card .np-social-copy > strong i,.np-profile-rivalry i { margin:0 4px; color:var(--np-social-muted); font-style:normal; }

.profile-view-header .np-profile-friend { margin-left:auto; }
.profile-view-header .leader-link-button + .np-profile-friend { margin-left:8px; }
.np-profile-rivalry { display:grid; margin:14px 0; border:1px solid color-mix(in srgb,var(--np-social-accent) 72%,var(--np-social-line)); padding:15px 18px; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; color:var(--np-social-text); background:radial-gradient(circle at left,color-mix(in srgb,var(--np-social-accent) 24%,transparent),transparent 45%),linear-gradient(110deg,var(--np-social-card),var(--np-social-panel)); box-shadow:0 8px 20px #0005,inset 0 1px #fff1; }
.np-profile-rivalry > span { color:var(--np-social-accent-bright); font-size:11px; font-weight:900; letter-spacing:.12em; }
.np-profile-rivalry > strong { text-align:center; }
.np-profile-rivalry > small { color:var(--np-social-muted); font-size:11px; }

.np-invite-toast { position:fixed; z-index:2147483500; right:18px; bottom:78px; display:grid; width:min(390px,calc(100vw - 28px)); border:1px solid var(--np-social-accent); border-radius:5px; padding:17px 18px; gap:5px; color:var(--np-social-text); background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--np-social-accent) 20%,transparent),transparent 45%),linear-gradient(145deg,var(--np-social-card),var(--np-social-panel)); box-shadow:0 18px 60px #000d,0 0 24px color-mix(in srgb,var(--np-social-accent) 22%,transparent); animation:np-social-in .28s ease-out; font-family:Literata,Georgia,serif; }
.np-invite-toast > span { color:var(--np-social-accent-bright); font-size:10px; font-weight:900; letter-spacing:.16em; }
.np-invite-toast > strong { padding-right:24px; font-size:15px; }
.np-invite-toast > small { color:var(--np-social-muted); }
.np-invite-toast > div { display:flex; margin-top:8px; gap:7px; }
.np-invite-toast > div button { flex:1; min-height:36px; border:1px solid var(--np-social-line); color:var(--np-social-text); background:var(--np-social-accent); font:800 11px Literata,Georgia,serif; text-transform:uppercase; }
.np-invite-toast > div button.ghost { background:#0003; }
.np-invite-close { position:absolute; top:7px; right:8px; border:0; color:var(--np-social-muted); background:transparent; font-size:18px; }

.np-rival-match-banner { position:fixed; z-index:2147483400; top:92px; left:50%; display:grid; min-width:360px; border:1px solid var(--np-social-accent); padding:12px 28px; place-items:center; color:var(--np-social-text); background:radial-gradient(circle,color-mix(in srgb,var(--np-social-accent) 22%,transparent),transparent 70%),linear-gradient(90deg,transparent,var(--np-social-panel) 15% 85%,transparent); box-shadow:0 12px 38px #000c; opacity:0; transform:translate(-50%,-22px) scale(.96); transition:opacity .35s,transform .35s; pointer-events:none; font-family:Literata,Georgia,serif; }
.np-rival-match-banner.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }
.np-rival-match-banner > small { color:var(--np-social-accent-bright); font-size:9px; font-weight:900; letter-spacing:.18em; }
.np-rival-match-banner > strong { font-size:24px; letter-spacing:.12em; text-shadow:0 2px 12px #000; }
.np-rival-match-banner > span { font-size:12px; }
.np-rival-match-banner > span b { color:var(--np-social-accent-bright); font-size:17px; }
.np-rival-match-banner > span i { margin:0 4px; font-style:normal; }
.np-rival-match-banner > em { color:var(--np-social-muted); font-size:9px; font-style:normal; text-transform:uppercase; }

.np-social-message { position:fixed; z-index:2147483600; left:50%; bottom:85px; border:1px solid var(--np-social-accent); border-radius:3px; padding:10px 16px; color:var(--np-social-text); background:var(--np-social-panel); box-shadow:0 12px 30px #000b; opacity:0; transform:translate(-50%,12px); transition:.2s; pointer-events:none; font:700 12px Literata,Georgia,serif; }
.np-social-message.show { opacity:1; transform:translate(-50%,0); }
.np-social-message.error { border-color:#a64232; color:#ffd3c7; }
@keyframes np-social-in { from { opacity:0; transform:translateY(14px); } }

@media (max-width:700px) {
  .friends-panel > .np-social-layer { padding:0 12px 18px; }
  .np-recent-player { grid-template-columns:38px minmax(0,1fr); }
  .np-social-avatar { width:38px; height:38px; }
  .np-recent-player .np-social-actions { grid-column:1/-1; }
  .np-social-actions .np-social-action { flex:1; }
  .np-rival-card { grid-template-columns:28px minmax(0,1fr); }
  .np-rival-card > .np-social-action { grid-column:1/-1; }
  .np-profile-rivalry { grid-template-columns:1fr; gap:6px; text-align:center; }
  .profile-view-header { flex-wrap:wrap; }
  .profile-view-header .np-profile-friend { width:100%; margin:7px 0 0; }
  .np-rival-match-banner { top:72px; min-width:0; width:calc(100vw - 24px); }
}