/* ===================================================================
   ARC · счётчик игровых постов + подсказка
=================================================================== */

/* Три поля в блоке автора */
.post-author ul:has(> .pa-gameposts) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:
    "element element element"
    "author author author"
    "title title title"
    "avatar avatar avatar"
    "info info info"
    "posts respect gameposts" !important;
}

.post-author ul:has(> .pa-gameposts) > .pa-posts,
.post-author ul:has(> .pa-gameposts) > .pa-respect {
  width: auto !important;
  min-width: 0 !important;
}

.post-author .pa-posts.pa-gameposts {
  grid-area: gameposts !important;
  width: auto !important;
  order: 8 !important;
  cursor: pointer;
}

/* Перо */
.post-author .pa-posts.pa-gameposts .fld-name::before {
  content: "\f52d";
  display: block;
  font: 900 16px/1 var(--fa) !important;
  color: var(--accentcolor1);
}

/* Число в профиле */
#pa-gameposts .arc-gp-num {
  cursor: pointer;
}

/* Всплывающая подсказка */
.arc-gp-tip {
  position: absolute;
  z-index: 100002;
  display: none;
  width: max-content;
  width: 248px;
  max-width: calc(100vw - 10px);
  padding: 10px 14px;
  box-sizing: border-box;

  font: 400 11px/1.6 var(--fontosnovnoe);
  color: var(--textcolor);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;

  background: var(--telo);
  border: 1px solid color-mix(
    in srgb, var(--accentcolor2) 45%, transparent
  );
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);

  pointer-events: none;
}

/* Тонкая внутренняя рамка */
.arc-gp-tip::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(
    in srgb, var(--accentcolor2) 18%, transparent
  );
  border-radius: 2px;
  pointer-events: none;
}

/* Якорь только у счётчика, на который наведена мышь */
.post-author .pa-gameposts:hover {
  anchor-name: --gameposts-hover;
}

/* Подсказка в темах */
body:has(#pun-viewtopic) > .arc-gp-tip {
  position-anchor: --gameposts-hover;

  left: anchor(center) !important;
  top: calc(anchor(bottom) + 10px) !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-81%);
}

.arc-gp-tip.is-open {
  display: block;
}

/* Таблица периодов */
.arc-gp-tip table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  font: inherit;
  color: inherit;
}

.arc-gp-tip td {
  padding: 3px 0;
  border: 0;
  vertical-align: middle;
  background: transparent;
}

/* Названия периодов */
.arc-gp-tip .dgp-l {
  padding-right: 18px;
  color: var(--wordcolor);
  text-align: left;
  overflow-wrap: anywhere;
  opacity: 1;
}

/* Значения */
.arc-gp-tip .dgp-v {
  color: var(--accentcolor1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Итоговая строка */
.arc-gp-tip tr:first-child td {
  padding-top: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(
    in srgb, var(--accentcolor2) 25%, transparent
  );
}

.arc-gp-tip tr:first-child .dgp-l {
  color: var(--wordcolor1);
  font-weight: 600;
}

.arc-gp-tip tr:first-child .dgp-v {
  font-size: 13px;
}

.arc-gp-tip tr:nth-child(2) td {
  padding-top: 6px;
}

.arc-gp-tip tr:last-child td {
  padding-bottom: 0;
}

/* Якорь поля в профиле */
#viewprofile #pa-gameposts {
  anchor-name: --gameposts-field;
}

/* Центрирование подсказки под полем */
body:has(#viewprofile) > .arc-gp-tip {
  position-anchor: --gameposts-field;

  left: anchor(center) !important;
  top: calc(anchor(bottom) + 6px) !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%);
}