/* ─────────────────────────────────────────────────────────────
   duel-gods-art.css — портрети на боговете
   Квадратни аватари със заоблени ъгли, картинка-портрет и
   дискретни анимации. Зарежда се СЛЕД duel-gods.css и
   duel-mobile.css, за да бие старите кръгли правила.

   Картинките идват като inline `background-image` (JS слага
   style.backgroundImage = url(...)), затова тук само задаваме
   геометрията и поведението на фона.
   ───────────────────────────────────────────────────────────── */

/* ── 1. ОБЩА ГЕОМЕТРИЯ: КВАДРАТ СЪС ЗАОБЛЕНИ ЪГЛИ ─────────── */

/* Пантеон — портретът е първата колона на картата. */
.god-card {
  /* колоната се разширява заедно с портрета, за да не се
     застъпва с името и метриката */
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

.god-card .gface {
  display: block;
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 16px;              /* не 50% — квадрат със заоблени ъгли */
  border: 1px solid color-mix(in srgb, var(--god, #c9a227) 55%, transparent);
  background-color: color-mix(in srgb, var(--god, #c9a227) 16%, transparent);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  font-size: 34px;
  line-height: 1;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--ring-col, transparent),
    0 6px 16px -12px var(--god, #c9a227);
}

/* Scoreboard — аватарът на бога по време на мач.
   #screen-round в селектора е нужен, за да бие старите
   `.avatar.sm` размери от duel-mobile.css. */
#screen-round .scoreboard .p.bot-god .avatar {
  display: block;
  width: 76px;
  height: 76px;
  min-width: 76px;
  max-width: 76px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 16px;              /* не 50% */
  border: 1px solid color-mix(in srgb, var(--god, #c9a227) 60%, transparent);
  border-width: 2px;
  border-color: color-mix(in srgb, var(--god, #c9a227) 60%, transparent) !important;
  background-color: color-mix(in srgb, var(--god, #c9a227) 16%, transparent) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  font-size: 36px;
  line-height: 1;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(0, 0, 0, .45),
    0 10px 26px -18px var(--god, #c9a227);
}

/* ── 2. ЕМОДЖИ → СКРИТО, ЩОМ ИМА ПОРТРЕТ ──────────────────── */

/* JS слага inline background-image; атрибутният селектор хваща
   точно този случай. color:transparent е по-надеждно от
   font-size:0 (не чупи line-height и baseline).
   !important е нужен само в scoreboard — duel-visual.css вече
   налага `color:#0e1410 !important` на `.scoreboard .avatar.sm`. */
.god-card .gface[style*="background-image"] {
  color: transparent;
  text-shadow: none;
}

#screen-round .scoreboard .p.bot-god .avatar[style*="background-image"] {
  color: transparent !important;
  text-shadow: none !important;
}

/* ── 3. АНИМАЦИИ НА ПОРТРЕТА ──────────────────────────────── */

/* Бавно дишане + сияние в цвета на бога.
   inset сянката носи златната рамка на победените, затова е
   част от keyframes — иначе анимацията я затрива. */
@keyframes godArtBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 0 0 1px var(--ring-col, transparent),
      0 6px 16px -14px var(--god, #c9a227);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      inset 0 0 0 1px var(--ring-col, transparent),
      0 0 18px -2px var(--god, #c9a227),
      0 10px 24px -16px var(--god, #c9a227);
  }
}

/* Верен отговор — бърз пулс с яркост. */
@keyframes godArtOk {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.12); filter: brightness(1.35) saturate(1.12); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Грешен отговор — тресене ±5px / 2deg. */
@keyframes godArtBad {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20%      { transform: translate3d(-5px, 0, 0) rotate(-2deg); }
  40%      { transform: translate3d(5px, 0, 0) rotate(2deg); }
  60%      { transform: translate3d(-3px, 0, 0) rotate(-1.2deg); }
  80%      { transform: translate3d(3px, 0, 0) rotate(1.2deg); }
}

/* Пантеон: дишане (без пулс/тресене — там няма рундове). */
.god-card .gface {
  animation: godArtBreath 4.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Scoreboard: същото дишане, а .gok / .gbad го подменят за един
   кратък такт и после дишането се връща само. */
#screen-round .scoreboard .p.bot-god .avatar {
  animation: godArtBreath 4.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

#screen-round .scoreboard .p.bot-god.gok .avatar,
#screen-round .scoreboard .p.bot-god .avatar.gok {
  animation: godArtOk .55s cubic-bezier(.3, .8, .35, 1) 1;
}

#screen-round .scoreboard .p.bot-god.gbad .avatar,
#screen-round .scoreboard .p.bot-god .avatar.gbad {
  animation: godArtBad .42s ease-in-out 1;
}

/* Старият кръгъл ореол (::after от duel-gods.css) става
   заоблен квадрат, за да пасва на новата форма. */
/* Рамката се рисува с box-shadow на самия аватар (виж секция 6),
   за да не заема ::after — той носи значката на способността. */

/* ── 4. СЪСТОЯНИЯ В ПАНТЕОНА ──────────────────────────────── */

/* Заключен бог — портретът е приглушен, но картата остава четима. */
.god-card.locked .gface {
  filter: grayscale(.55) brightness(.7);
}

/* Победен бог — тънка златна рамка отвътре (не пипа размера).
   --ring-col се ползва и от keyframes, за да оцелее при дишането. */
.god-card.beaten .gface {
  --ring-col: rgba(201, 162, 39, .45);
  box-shadow:
    inset 0 0 0 1px var(--ring-col),
    0 6px 16px -12px var(--god, #c9a227);
}

/* ── 5. РАЗМЕРИ ЗА ТЕЛЕФОН ────────────────────────────────── */

@media (max-width: 700px) {
  .god-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .god-card .gface {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 27px;
  }

  #screen-round .scoreboard .p.bot-god .avatar {
    width: 58px;
    height: 58px;
    min-width: 58px;
    max-width: 58px;
    border-radius: 12px;
    font-size: 28px;
  }

  /* По-големият портрет не бива да избутва името на нов ред:
     meta-та получава нулева базова ширина, свива се и реже с … */
  #screen-round .scoreboard .p.bot-god .p-meta {
    flex: 1 1 0;
    min-width: 0;
  }
  #screen-round .scoreboard .p.bot-god .p-name,
  #screen-round .scoreboard .p.bot-god .p-score {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Много тясно (<341px) — портретът не бива да избутва scoreboard-а. */
@media (max-width: 340px) {
  #screen-round .scoreboard .p.bot-god .avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    border-radius: 10px;
    font-size: 24px;
  }
}

/* ── 6. БЕЗ ДВИЖЕНИЕ — САМО ЦВЕТОВЕ ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .god-card .gface,
  #screen-round .scoreboard .p.bot-god .avatar,
  #screen-round .scoreboard .p.bot-god .avatar::after,
  #screen-round .scoreboard .p.bot-god.gok .avatar,
  #screen-round .scoreboard .p.bot-god.gbad .avatar {
    animation: none;
    transform: none;
    filter: none;
    transition: none;
  }

  /* Състоянието остава разпознаваемо чрез цвят, не чрез движение. */
  .god-card.locked .gface {
    filter: grayscale(.55) brightness(.7);
  }
  #screen-round .scoreboard .p.bot-god.gok .avatar {
    filter: brightness(1.12);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .35),
      0 0 0 1px rgba(0, 0, 0, .45),
      0 0 22px -4px var(--god, #c9a227);
  }
  #screen-round .scoreboard .p.bot-god.gbad .avatar {
    filter: brightness(.86) saturate(.8);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .35),
      0 0 0 1px color-mix(in srgb, var(--god, #c9a227) 35%, transparent);
  }
}

/* ── 5. ВСИЧКИ АВАТАРИ В ДУЕЛА СА КВАДРАТИ СЪС ЗАОБЛЕНИ ЪГЛИ ── */
.scoreboard .p .avatar,
.vs .avatar,
.final .avatar,
.fs-card .avatar,
.duelwrap .avatar {
  border-radius: 16px !important;
  background-size: cover;
  background-position: center;
}
@media (max-width: 700px) {
  .scoreboard .p .avatar,
  .vs .avatar,
  .final .avatar,
  .fs-card .avatar,
  .duelwrap .avatar { border-radius: 12px !important; }
}

/* ── 6. СПОСОБНОСТТА „ГРЪМВА“ — значка върху портрета ────────── */
.power-on .avatar {
  position: relative;
  overflow: hidden;
}
/* пулсът на способността трябва да бие дишането (висока специфичност) */
#screen-round .scoreboard .p.bot-god.power-on .avatar,
#screen-round .scoreboard .p.power-on .avatar,
.scoreboard .p.bot-god.power-on .avatar,
.power-on .avatar {
  animation: ppulse 1.7s ease-out both;
}
#screen-round .scoreboard .p.bot-god.power-on .avatar::after,
#screen-round .scoreboard .p.power-on .avatar::after,
.power-on .avatar::after {
  content: attr(data-flash);
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid var(--god, #c9a227);
  background: rgba(12, 16, 13, .82);
  color: #f0e7d2;
  font: 700 8.5px/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: pflash 1.9s ease-out both;
}
@keyframes pflash {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.9); }
  16%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  72%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(1); }
}
@keyframes ppulse {
  0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); box-shadow: 0 0 0 0 rgba(201,162,39,0); }
  20%      { filter: brightness(1.32) saturate(1.2); transform: scale(1.05); box-shadow: 0 0 0 3px rgba(201, 162, 39, .45); }
  55%      { filter: brightness(1.12) saturate(1.06); transform: scale(1.02); box-shadow: 0 0 0 5px rgba(201, 162, 39, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .power-on .avatar, .power-on .avatar::after { animation: none; }
  .power-on .avatar::after { opacity: 1; }
}