:root {
  --bg: #1b1f25;
  --card: #242930;
  --card-hover: #2a3038;
  --line: #2f353e;
  --text: #e8ebee;
  --text-2: #aab3bd;
  --muted: #8b95a1;
  --dim: #6f7a86;
  --accent: #5ec4c0;
  --accent-hi: #8fe0dc;
  --head: #5ab8b8;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Onest', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a, button, [role=button] { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
[hidden] { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .45s ease-out backwards; }

.fx-bg, .fx-top {
  position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.fx-bg { z-index: 0; }

/* layout */
.page {
  position: relative; z-index: 1;
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
.side {
  flex: 1 1 300px; max-width: 360px;
  position: sticky; top: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.main {
  flex: 999 1 480px; min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 820px) {
  .side { position: static; max-width: none; }
}

/* profile */
.profile {
  border-radius: 20px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
}
.profile-head {
  background: var(--head);
  padding: 32px 20px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
}
.profile-head::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 60%);
}
#headFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.avatar-wrap { position: relative; width: 110px; height: 110px; outline: none; }
.avatar-wrap img {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); user-select: none;
}
.avatar-wrap.spin img { animation: spin .8s ease-in-out; }
.profile-head h1 {
  position: relative; margin: 0;
  font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.02em;
}
.bday-hat {
  position: absolute; left: 58px; top: -38px; width: 46px; height: 62px;
  transform: rotate(22deg); transform-origin: 50% 100%; pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
.bday-hat i { position: absolute; display: block; }
.bday-hat .cone {
  left: 0; right: 0; bottom: 0; height: 56px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(-35deg, #e27aa6 0 8px, #f5b829 8px 16px, #5ec4c0 16px 24px);
}
.bday-hat .brim { left: -2px; right: -2px; bottom: -3px; height: 7px; border-radius: 4px; background: #fff; }
.bday-hat .pom { left: 50%; top: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; }
.profile-row {
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 15px;
}
.profile-row .muted { font-size: 12px; }
.profile-row + .profile-row { border-top: 1px solid var(--line); }
.profile-row .accent { font-weight: 500; }
.clickable:hover { background: var(--card-hover); }

/* discord presence */
.presence {
  position: relative; margin-top: -4px;
  font-size: 13px; color: rgba(255,255,255,.85); text-align: center;
  display: flex; align-items: center; gap: 6px; max-width: 100%;
}
.presence span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence img { width: 16px; height: 16px; flex-shrink: 0; }
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }
.presence .ico { width: 16px; height: 16px; }
.dc-status .ico { width: 13px; height: 13px; margin-right: -2px; }
.hc-act-img .ico { width: 26px; height: 26px; color: #b5bac1; }
.toast { display: flex; align-items: center; gap: 8px; }

/* hover profile cards */
.hcard {
  position: fixed; z-index: 35; width: 300px;
  background: #111214; color: #f2f3f5; border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0; transform: translateX(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.hcard.on { opacity: 1; transform: none; pointer-events: auto; }
.hcard[data-kind=steam] { width: 330px; background: #171a21; color: #c7d5e0; }
.sp-head { position: relative; height: 130px; overflow: hidden; background: linear-gradient(135deg, #2a475e, #1b2838); }
.sp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover; }
.sp-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(23,26,33,.85)); }
.sp-player { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 14px; }
.sp-av { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.sp-av img:first-child {
  width: 64px; height: 64px; display: block; object-fit: cover;
  border: 2px solid #898989; background: #000;
}
.sp-av[data-s=online] img:first-child { border-color: #57cbde; }
.sp-av[data-s=ingame] img:first-child { border-color: #90ba3c; }
.sp-frame { position: absolute; left: -10px; top: -10px; width: 84px; height: 84px; pointer-events: none; }
.sp-av:has(.sp-frame) img:first-child { border-color: transparent; }
.sp-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.sp-names b { font-size: 18px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-names span { font-size: 12px; color: #b0b0b0; }
.sp-details { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-badge { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-badge > img { width: 40px; height: 40px; }
.sp-badge > div:not(.sp-level) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sp-badge b { font-size: 13px; color: #fff; font-weight: 500; }
.sp-badge span { font-size: 11px; color: #8f98a0; }
.sp-level { display: flex; align-items: center; gap: 8px; }
.sp-level i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #9b9b9b;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.sp-game {
  display: flex; gap: 10px; align-items: center;
  background: linear-gradient(90deg, rgba(144,186,60,.18), rgba(144,186,60,.04)); border-radius: 4px; padding: 6px;
}
.sp-game img { width: 92px; height: 35px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.sp-game div { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.sp-game span { color: #90ba3c; font-size: 11px; }
.sp-game b { color: #d2efa9; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-game em { font-style: normal; color: #8f98a0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-banner { height: 64px; }
.hc-banner.discord { background: linear-gradient(135deg, #5ab8b8, #5865F2); }
.hc-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.hc-body > p { margin: 12px 0 0; font-size: 13px; }
.hc-avatar { position: relative; width: 80px; height: 80px; margin-top: -40px; margin-bottom: 6px; }
.hc-avatar img:first-child {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block;
  border: 6px solid #111214; background: #111214;
}
.hc-deco { position: absolute; inset: -4px; width: 88px; height: 88px; pointer-events: none; }
.hc-dot {
  position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #80848e; border: 5px solid #111214;
}
.hc-dot[data-s=online] { background: #23a55a; }
.hc-dot[data-s=idle] { background: #f0b232; }
.hc-dot[data-s=dnd] { background: #f23f43; }
.hc-bubble {
  position: absolute; left: 104px; top: 10px; right: 16px;
  background: #232428; border-radius: 10px; padding: 6px 10px;
  font-size: 12px; display: flex; gap: 6px; align-items: center; min-width: 0;
}
.hc-bubble img { width: 16px; height: 16px; flex-shrink: 0; }
.hc-bubble span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-name { display: flex; align-items: center; gap: 8px; }
.hc-name b { font-size: 19px; font-weight: 700; }
.hc-body > .muted { font-size: 12px; color: #b5bac1; }
.hc-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: #2b2d31; border-radius: 4px; padding: 1px 5px;
  font-size: 11px; font-weight: 600; color: #dbdee1;
}
.hc-tag img { width: 12px; height: 12px; }
.steam-name[data-s=online] { color: #57cbde; }
.steam-name[data-s=ingame] { color: #a3cf06; }
.steam-name[data-s=offline] { color: #898989; }
.steam-state[data-s=online] { color: #57cbde; }
.steam-state[data-s=offline] { color: #898989; }
.steam-state[data-s=ingame] { color: #90ba3c; }
.hc-sep { height: 1px; background: rgba(255,255,255,.08); margin: 10px 0 6px; }
.hc-act { display: flex; flex-direction: column; gap: 6px; }
.hc-act + .hc-act { margin-top: 8px; }
.hc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #b5bac1; }
.hc-act-row { display: flex; gap: 10px; align-items: center; }
.hc-act-img {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px;
  background: #2b2d31 center / cover; display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.hc-act-img.wide { width: 110px; height: 51px; border-radius: 4px; }
.hc-act-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: #dbdee1; }
.hc-act-text b { font-size: 13px; color: #f2f3f5; font-weight: 600; }
.hc-act-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-time { font-family: var(--mono); font-size: 11px; color: #23a55a; margin-top: 2px; }
.hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hc-stats div { background: rgba(0,0,0,.2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.hc-stats b { font-size: 16px; color: #66c0f4; font-weight: 700; }
.hc-stats span { font-size: 11px; color: #8f98a0; }
.hc-foot { font-size: 11px; color: #8f98a0; margin-top: 6px; }
.hc-foot b { color: #c7d5e0; font-weight: 500; }
.hcard a { color: inherit; text-decoration: none; }

/* Discord — попап профиля с темой (как у Nitro) */
.hcard[data-kind=discord] { background: transparent; }
.dc {
  --ring: color-mix(in srgb, var(--dc1) 38%, #111214);
  padding: 4px; border-radius: 14px;
  background: linear-gradient(180deg, var(--dc1), var(--dc2));
}
.dc-banner { height: 104px; border-radius: 10px 10px 0 0; background: center / cover; }
.dc-body {
  position: relative; padding: 0 12px 12px; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--ring), color-mix(in srgb, var(--dc2) 38%, #111214));
  display: flex; flex-direction: column; gap: 10px;
}
.dc-avatar { position: relative; width: 92px; height: 92px; margin-top: -48px; }
.dc-avatar img:first-child {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block;
  border: 6px solid var(--ring); background: var(--ring);
}
.dc-avatar .hc-deco { inset: 0; width: 92px; height: 92px; }
.dc-dot {
  position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #80848e; border: 5px solid var(--ring);
}
.dc-dot[data-s=online] { background: #23a55a; }
.dc-dot[data-s=idle] { background: #f0b232; }
.dc-dot[data-s=dnd] { background: #f23f43; }
.dc-bubble {
  position: absolute; left: 110px; right: 12px; top: 10px;
  background: rgba(0,0,0,.45); border-radius: 12px; padding: 7px 10px;
  font-size: 12px; display: flex; gap: 6px; align-items: center; min-width: 0;
}
.dc-bubble::before, .dc-bubble::after { content: ''; position: absolute; border-radius: 50%; background: rgba(0,0,0,.45); }
.dc-bubble::before { width: 10px; height: 10px; left: -6px; bottom: -4px; }
.dc-bubble::after { width: 5px; height: 5px; left: -13px; bottom: -9px; }
.dc-bubble img { width: 16px; height: 16px; flex-shrink: 0; }
.dc-bubble span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-names { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.dc-names .hc-name b { font-size: 20px; }
.dc-names > span { font-size: 13px; color: #dbdee1; }
.dc-names .hc-tag { background: rgba(0,0,0,.35); }
.dc-status { display: flex; align-items: center; gap: 6px; font-size: 12px !important; color: #b5bac1 !important; }
.dc-status i { width: 8px; height: 8px; border-radius: 50%; background: #80848e; }
.dc-status[data-s=online] i { background: #23a55a; }
.dc-status[data-s=idle] i { background: #f0b232; }
.dc-status[data-s=dnd] i { background: #f23f43; }
.dc-panel { background: rgba(0,0,0,.4); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.dc-sec { display: flex; flex-direction: column; gap: 4px; }
.dc-sec p { margin: 0; font-size: 13px; color: #dbdee1; white-space: pre-line; }
.dc-acts { border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.dc-acts .hc-act-img { background-color: rgba(0,0,0,.3); }
.dc-msg {
  display: block; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: rgba(0,0,0,.35); color: #949ba4 !important;
  border: 1px solid rgba(255,255,255,.06); transition: background .15s, color .15s;
}
.dc-msg:hover { background: rgba(0,0,0,.5); color: #dbdee1 !important; }

/* Telegram */
.hcard[data-kind=telegram] { width: 290px; background: #17212b; color: #f5f5f5; }
.tg-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px 16px;
  background: linear-gradient(160deg, #2b5278, #1e3a57 60%, #17212b); text-align: center;
}
.tg-av { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.tg-head b { font-size: 18px; font-weight: 600; }
.tg-head span { font-size: 13px; color: #8fb4d9; }
.tg-info { padding: 6px 0 12px; display: flex; flex-direction: column; }
.tg-row { padding: 8px 18px; display: flex; flex-direction: column; gap: 1px; }
.tg-row b { font-size: 14px; font-weight: 400; color: #f5f5f5; }
.tg-row .tg-bio { white-space: pre-line; }
.tg-row span { font-size: 12px; color: #6d7f8f; }
.tg-btn {
  margin: 6px 14px 0; padding: 9px; border-radius: 8px; text-align: center;
  background: #2b5278; color: #fff !important; font-size: 14px; font-weight: 500; transition: background .15s;
}
.tg-btn:hover { background: #3a6d9e; }

/* GitHub */
.hcard[data-kind=github] { width: 320px; background: #0d1117; color: #e6edf3; box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px #30363d; }
.gh-top { display: flex; align-items: center; gap: 14px; padding: 16px 16px 10px; }
.gh-av { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 1px #30363d; }
.gh-names { display: flex; flex-direction: column; min-width: 0; }
.gh-names b { font-size: 18px; font-weight: 600; }
.gh-names span { font-size: 15px; color: #8b949e; font-weight: 300; }
.gh-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.gh-bio { margin: 0; font-size: 13px; }
.gh-counts { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b949e; }
.gh-counts span { display: flex; align-items: center; gap: 6px; }
.gh-counts b { color: #e6edf3; font-weight: 600; }
.gh-repos { display: flex; flex-direction: column; gap: 6px; }
.gh-repo {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  border: 1px solid #30363d; border-radius: 6px; transition: border-color .15s, background .15s;
}
.gh-repo:hover { border-color: #8b949e; background: #161b22; }
.gh-repo b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #4493f8; }
.gh-repo b svg { color: #8b949e; flex-shrink: 0; }
.gh-desc { font-size: 12px; color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-meta { display: flex; gap: 14px; font-size: 11px; color: #8b949e; }
.gh-meta:empty { display: none; }
.gh-meta span { display: flex; align-items: center; gap: 4px; }
.gh-meta i { width: 10px; height: 10px; border-radius: 50%; }
.gh-foot { font-size: 11px; color: #6e7681; }

/* TikTok */
.hcard[data-kind=tiktok] { width: 290px; background: #121212; color: #fff; padding: 18px 18px 16px; }
.tt-top { display: flex; align-items: center; gap: 14px; }
.tt-av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tt-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-names b { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tt-names span { font-size: 14px; color: rgba(255,255,255,.75); }
.tt-check { font-style: normal; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; background: #20d5ec; display: grid; place-items: center; }
.tt-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 8px; }
.tt-stats div { display: flex; align-items: baseline; gap: 4px; }
.tt-stats b { font-size: 15px; font-weight: 700; }
.tt-stats span { font-size: 13px; color: rgba(255,255,255,.6); }
.tt-bio { margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.85); white-space: pre-line; }
.tt-btn {
  display: block; padding: 9px; border-radius: 6px; text-align: center;
  background: #fe2c55; color: #fff !important; font-size: 15px; font-weight: 600; transition: background .15s;
}
.tt-btn:hover { background: #ef2950; }
.hcard[data-kind=tiktok]::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, #25f4ee, #fe2c55);
}

/* Spotify */
.hcard[data-kind=spotify] { width: 320px; background: #121212; color: #fff; }
.sf-head {
  display: flex; align-items: flex-end; gap: 14px; padding: 22px 16px 16px;
  background: linear-gradient(180deg, #1f7a45, #1a4d31 70%, #121212);
}
.sf-av { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 24px rgba(0,0,0,.5); flex-shrink: 0; }
.sf-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-names span { font-size: 11px; font-weight: 600; }
.sf-names b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-names em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.75); }
.sf-body { padding: 4px 8px 12px; display: flex; flex-direction: column; }
.sf-label { font-size: 13px; font-weight: 700; padding: 8px 8px 4px; }
.sf-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; transition: background .15s; }
.sf-row:hover { background: #2a2a2a; }
.sf-cover { width: 40px; height: 40px; border-radius: 4px; background: #282828 center / cover; flex-shrink: 0; }
.sf-text { display: flex; flex-direction: column; min-width: 0; }
.sf-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-text b { font-size: 14px; font-weight: 500; }
.sf-text b.on { color: #1ed760; }
.sf-text span { font-size: 12px; color: #b3b3b3; }
.sf-empty { margin: 8px; font-size: 13px; color: #b3b3b3; }

/* now playing */
.np {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; display: flex; gap: 12px; align-items: center; color: var(--text);
  animation: rise .4s ease-out backwards;
}
.np:hover { border-color: #1DB954; color: var(--text); }
.np-cover {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px;
  background: #1DB954 center / cover;
}
.np.idle .np-cover {
  background: #1b1f25 url('https://cdn.simpleicons.org/spotify/1DB954') center / 28px no-repeat;
}
.np-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-info b, .np-info > .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-info b { font-size: 14px; font-weight: 600; }
.np-info > .muted { font-size: 12px; }
.np-label { font-size: 11px; color: #1DB954; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.np.idle .np-label { color: var(--muted); }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.eq i { width: 2px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
.np.idle .eq { display: none; }
.np.paused .eq i { animation-play-state: paused; }
.np.paused .np-label { color: var(--muted); }
.np.paused .np-progress i { background: var(--muted); }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.np-progress { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 6px; }
.np-progress i { display: block; height: 100%; width: 0; background: #1DB954; }
.np-time { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.np.idle .np-progress, .np.idle .np-time { display: none; }

/* recently played */
.recent { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.recent a {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; color: var(--text-2);
}
.recent a:hover { border-color: var(--accent); color: var(--text); }
.recent a b { color: var(--accent); font-weight: 500; font-family: var(--mono); }

/* socials */
.socials { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.social {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  color: var(--text); min-width: 0;
}
.social:hover { border-color: var(--accent); background: var(--card-hover); color: var(--text); }
.social-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.social-icon img { width: 20px; height: 20px; display: block; }
.social-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.social-text b { font-size: 13px; font-weight: 500; }
.social-text span {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* birthday banner */
.bday-banner {
  background: var(--head); border-radius: 16px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: #10231f; animation: rise .5s ease-out backwards;
}
.bday-banner > div { display: flex; flex-direction: column; gap: 2px; }
.bday-banner strong { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.bday-banner span { font-size: 14px; opacity: .8; }
.bday-banner a { color: #10231f; text-decoration: underline; }
.bday-btn {
  font-size: 13px !important; font-weight: 600; opacity: 1 !important;
  background: rgba(255,255,255,.35); padding: 8px 12px; border-radius: 10px;
}

/* tabs */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
}
.tabs button {
  border: 0; font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 14px; border-radius: 10px;
  background: transparent; color: var(--muted);
}
.tabs button.quiet { color: #56606b; }
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--bg); color: var(--text); }
.tabs button.quiet.on { color: var(--text-2); }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease-out, border-color .2s;
}
.card:hover { border-color: var(--accent); }

/* projects */
.grid-projects {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.project { display: flex; flex-direction: column; }
.project-cover {
  aspect-ratio: 2 / 1; position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, #2a3038 0 10px, #262b33 10px 20px) center / cover;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.code {
  position: absolute; inset: 0; background: #12161b;
  padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-size: 11px; line-height: 1.45; text-align: left; overflow: hidden; white-space: nowrap;
  color: var(--text);
}
.code .dots { display: flex; gap: 6px; margin-bottom: 6px; }
.code .dots i { width: 8px; height: 8px; border-radius: 50%; }
.code .k { color: #c678dd; } .code .d { color: var(--accent); } .code .c { color: #e5c07b; }
.code .f { color: #61afef; } .code .s { color: #98c379; }
.project-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.project-body h3 { margin: 0; font-size: 17px; font-weight: 600; }
.project-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; flex: 1; }
.project-link { font-family: var(--mono); font-size: 12px; margin-top: 4px; }
.project-link.note { color: var(--muted); }

/* games */
.panel[data-panel=games] { display: flex; flex-direction: column; gap: 14px; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--text);
}
a.stat:hover { border-color: var(--accent); color: var(--text); }
.stat b { font-size: 20px; font-weight: 700; color: var(--accent); }
.stat span { font-size: 12px; color: var(--muted); }
.games { display: flex; flex-direction: column; gap: 14px; }
.game { display: flex; flex-wrap: wrap; color: var(--text); }
.game:hover { color: var(--text); }
.game img {
  width: 230px; max-width: 100%; aspect-ratio: 460 / 215; object-fit: cover;
  display: block; flex-shrink: 0;
}
.game-body {
  flex: 1 1 220px; padding: 14px 18px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.game-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.game-top b { font-size: 16px; font-weight: 600; }
.game-top span { font-family: var(--mono); font-size: 15px; color: var(--accent); white-space: nowrap; }
.bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.game-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }

/* comms */
.panel[data-panel=comms] { display: flex; flex-direction: column; gap: 16px; }
.lead { margin: 0; font-size: 14px; }
.grid-comms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.comm { display: flex; flex-direction: column; }
.comm-img { aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.comm-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: transform .3s;
}
.comm-img img:hover { transform: scale(1.04); }
.comm-foot { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comm-foot a { font-size: 14px; font-weight: 500; }
.price { font-family: var(--mono); font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 3px; }

/* viewer */
.viewer {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(8,10,13,.88); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; cursor: zoom-out;
}
.viewer img {
  max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.viewer-links { display: flex; gap: 14px; align-items: center; font-size: 14px; cursor: default; }
.viewer-links a:first-child { font-weight: 500; }
.viewer-links .muted { color: var(--text-2); font-size: 13px; }

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--accent); color: #10231f; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* пасхалки */
.gd {
  position: fixed; left: 0; bottom: 0; width: 100%; height: 200px; z-index: 50;
  cursor: pointer; touch-action: none; box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  animation: gd-in .35s ease-out;
}
@keyframes gd-in { from { transform: translateY(100%); } }
.gd-close {
  position: fixed; right: 12px; bottom: 166px; z-index: 51; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.gd-close:hover { background: rgba(0,0,0,.7); }
.lamb, .lamb-crown { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; will-change: transform; }
.lamb svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.lamb-leg1, .lamb-leg2 { transform-box: fill-box; transform-origin: 50% 0; }
.lamb.walk .lamb-leg1 { animation: lamb-step .32s ease-in-out infinite alternate; }
.lamb.walk .lamb-leg2 { animation: lamb-step .32s ease-in-out infinite alternate-reverse; }
@keyframes lamb-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.lamb-crown svg { display: block; animation: crown-float 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(230,40,70,.65)); }
@keyframes crown-float { to { transform: translateY(-4px) rotate(-4deg); } }
.mk { position: fixed; right: 0; top: 34%; z-index: 45; pointer-events: none; transform: translateX(110%); }
.mk svg { display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.mk-tint, .mm-tint { position: fixed; inset: 0; z-index: 44; pointer-events: none; }
.mk-tint { background: radial-gradient(ellipse at center, rgba(255,40,140,.38), rgba(90,0,45,.6)); }
.mm-tint { background: radial-gradient(ellipse at center, rgba(255,214,232,.35), rgba(247,120,175,.4)); }
.mm { position: fixed; left: 0; top: 30%; z-index: 45; pointer-events: none; transform: translateX(-110%); }
.mm svg { display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.lamb-crown.worn svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .bday-banner, .np, .eq i { animation: none; }
}

/* all games */
.game-noimg {
  width: 230px; max-width: 100%; aspect-ratio: 460 / 215; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center;
  background: linear-gradient(135deg, #2a475e, #1b2838); color: #c7d5e0; font-size: 13px; font-weight: 600;
}
.games-more {
  border: 1px solid var(--line); background: var(--card); color: var(--text-2);
  font-family: inherit; font-size: 14px; font-weight: 500; padding: 12px; border-radius: 12px;
}
.games-more:hover { border-color: var(--accent); color: var(--text); }