/* Лента голов всех игроков + страница /stats. Спрайт heads/sprite.png
   собирает /opt/lunify/scripts/heads-sync.py: ряд клеток 8x8. */
.heads-wall { --s: 44px; position: relative; padding: 34px 0 6px; margin-top: -28px; }
.heads-box { position: relative; overflow: hidden; touch-action: pan-y; contain: strict;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 min(7%, 90px), #000 calc(100% - min(7%, 90px)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 min(7%, 90px), #000 calc(100% - min(7%, 90px)), transparent); }
.heads-box canvas { position: absolute; left: 0; display: block; will-change: transform; }
.heads-tip { position: absolute; z-index: 3; translate: -50% -100%; white-space: nowrap; padding: 4px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text);
  font: 600 12px/1.2 var(--font-body); pointer-events: none; }
.heads-tip[hidden] { display: none; }

/* Одиночная голова (подсказки поиска, карточка): фон из спрайта. */
.head { position: relative; display: inline-block; flex: none; width: var(--s, 44px); height: var(--s, 44px); border-radius: 6px;
  background-image: var(--sprite); background-repeat: no-repeat;
  background-size: calc(var(--n) * var(--s, 44px)) var(--s, 44px);
  background-position: calc(var(--i) * var(--s, 44px) * -1) 0;
  image-rendering: pixelated; }
.heads-caption { text-align: center; color: var(--text-dim); margin: 14px auto 0; padding: 0 16px; max-width: none; }
.heads-caption b { color: var(--amber); font-family: var(--font-display); }

/* На главной лента стоит прямо на горах героя. */
.hero-heads { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; }
/* Место под 2 ряда заранее (heads.js ставит высоту 2·(s+12) только после загрузки
   спрайта — без резерва блок вырастал вверх и давал сдвиг вёрстки). 40px = padding. */
.hero-heads .heads-wall { --s: 40px; min-height: calc(2 * (var(--s) + 12px) + 40px); }
.hero-heads .heads-caption { margin-top: 6px; font-size: 14px; }
.heads-caption a { color: var(--silver-2); }
@media (max-width: 720px) { .hero-heads .heads-wall { --s: 32px; } .hero-heads .heads-caption { font-size: 12px; } }

/* /stats: стена голов на весь экран, поверх — счётчик */
.heads-page { position: relative; padding-top: 96px; }
.heads-full { --s: 52px; height: calc(100dvh - 96px); min-height: 420px; padding-top: 0; margin-top: 0; }
.heads-over { position: absolute; left: 50%; top: calc(50% + 48px); transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px)); padding: 26px 24px; border-radius: var(--radius); text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.heads-over h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(30px, 6vw, 46px); }
.heads-over h1 b { color: var(--amber); }
.heads-over p { margin: 0; color: var(--text-dim); }
@media (max-width: 720px) { .heads-full { --s: 40px; } .heads-page { padding-top: 80px; } .heads-full { height: calc(100dvh - 80px); } }

/* Поиск по нику на /stats */
.heads-over { overflow: visible; }
.hs-main[hidden], .hs-found[hidden] { display: none; }
.hs-found .head { --s: 88px; display: block; margin: 0 auto 12px; border-radius: 10px; cursor: default;
  box-shadow: 0 0 0 3px var(--amber), 0 12px 40px rgba(242, 166, 90, .35); }
.hs-found.pop .head { animation: hs-pop .6s var(--ease); }
@keyframes hs-pop { 0% { scale: .2; rotate: -25deg; opacity: 0; } 60% { scale: 1.12; rotate: 6deg; } }
.hs-title { margin: 0; color: var(--amber); font: 400 11px/1.4 var(--font-pixel); letter-spacing: .05em; }
.hs-found h2 { margin: 6px 0 4px; font: 700 clamp(24px, 5vw, 34px)/1.15 var(--font-display); white-space: nowrap; overflow: hidden; }
.hs-found p:last-child { margin: 0; color: var(--text-dim); }
.hs-search { position: relative; margin-top: 18px; }
.hs-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--text-dim); pointer-events: none; }
.hs-search input { width: 100%; padding: 13px 14px 13px 42px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--inset); color: var(--text); font: 500 16px var(--font-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.hs-search input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242, 112, 30, .18); }
.hs-search input::-webkit-search-cancel-button { filter: grayscale(1); }
#hs-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
#hs-list[hidden] { display: none; }
#hs-list li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
#hs-list li:hover, #hs-list li[aria-selected="true"] { background: var(--inset); }
#hs-list .head { --s: 30px; border-radius: 5px; box-shadow: none; cursor: inherit; }
#hs-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hs-list mark { background: none; color: var(--amber); }
#hs-list small { color: var(--text-dim); }
#hs-list .hs-empty { display: block; color: var(--text-dim); cursor: default; padding: 10px; }
.hs-wrapped { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: 999px; background: var(--orange); color: #fff;
  font-weight: 700; text-decoration: none; }
.hs-wrapped:hover { filter: brightness(1.1); }
.hs-found p:last-of-type { margin: 0; color: var(--text-dim); }