/* === ЭКРАН ROCKY === */
/* Палитра под главное меню: фиолет/магента неон вместо золота */
#screen-rocky {
  --gold:        #b070ff;
  --gold-bright: #ff9fe0;
  --gold-dim:    rgba(176, 112, 255, 0.42);
  --text-dim:    #b9a8d6;
}

.page-title {
  font-family: 'Metamorphous', 'Cinzel', serif; font-weight: 700;
  font-size: clamp(36px, 5vw, 56px); letter-spacing: 0.25em;
  background: linear-gradient(180deg, #f5d8ff 0%, #d36ab6 55%, #a060ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.fighter-card {
  display: grid; grid-template-columns: 320px 1fr; gap: 36px;
  background: linear-gradient(180deg, rgba(34,20,52,0.88), rgba(14,9,22,0.9));
  border: 1px solid var(--gold-dim);
  padding: 36px 40px; max-width: 880px; width: 100%;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6),
              0 0 26px rgba(160, 90, 230, 0.18),
              inset 0 1px 0 rgba(220,180,255,0.1);
}
.fighter-card::before, .fighter-card::after,
.fighter-card .corner-bl, .fighter-card .corner-br {
  content: ""; position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold) 40%, var(--gold-dim) 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(220,140,255,0.6);
}
.fighter-card::before { top: 14px; left: 14px; }
.fighter-card::after  { top: 14px; right: 14px; }
.fighter-card .corner-bl { bottom: 14px; left: 14px; }
.fighter-card .corner-br { bottom: 14px; right: 14px; }
@media (max-width: 760px) { .fighter-card { grid-template-columns: 1fr; padding: 28px 20px; } }

.left-col { display: flex; flex-direction: column; align-items: center; }
.portrait {
  width: 280px; height: 220px;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 55%, rgba(176,112,255,0.16), rgba(20,12,32,0.85) 70%),
    linear-gradient(180deg, rgba(28,17,44,0.9), rgba(14,9,22,0.92));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7), 0 0 22px rgba(160,90,230,0.18);
}
.portrait svg, .portrait img { width: 230px; height: 200px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7)); image-rendering: auto; }

.thin-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 8px 0 14px;
}
.fighter-name {
  font-family: 'Metamorphous', 'Cinzel', serif; font-weight: 700;
  font-size: 38px; letter-spacing: 0.15em;
  color: var(--gold-bright); margin-bottom: 4px;
}
.fighter-class {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.4em;
  color: var(--gold-dim); margin-bottom: 18px;
}

.stat-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.25em;
  margin-bottom: 4px;
}
.stat-row .label { color: var(--gold); }
.stat-row .value { color: var(--text-dim); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 0.1em; }
.hp-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.15em; margin-bottom: 14px; text-transform: uppercase;
}
.stat-bar {
  width: 100%; height: 6px;
  background: rgba(0,0,0,0.5); border: 1px solid var(--gold-dim);
  margin-bottom: 14px; position: relative; overflow: hidden;
}
.stat-bar .fill { height: 100%; transition: width 0.4s ease; width: 10%; }
.fill.energy  { background: linear-gradient(90deg, #2a4a8c, var(--blue)); }
.fill.stamina { background: linear-gradient(90deg, #2a6a3a, var(--green)); }

.tags { display: flex; gap: 10px; margin-top: 8px; width: 100%; }
.tag {
  flex: 1; border: 1px solid var(--gold-dim);
  background: rgba(0,0,0,0.3); padding: 8px 12px;
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em;
  color: var(--gold); text-align: center;
}

/* ── ЯРКИЕ ПЛАШКИ: HP / GOLD / LEVEL ── */
.key-badges {
  display: flex; gap: 10px; width: 100%;
  margin: 6px 0 6px;
}
.kb {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px 9px;
  border: 1.5px solid;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(30,18,44,0.9), rgba(14,8,20,0.95));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.kb-icon { font-size: 17px; line-height: 1; filter: drop-shadow(0 0 6px currentColor); }
.kb-label {
  font-family: 'Cinzel', serif; font-size: 8px;
  letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0.7;
}
.kb-val {
  font-family: 'Metamorphous', serif; font-size: 20px; line-height: 1;
  color: #fff; text-shadow: 0 0 8px currentColor;
}
/* HP — алый */
.kb-hp { border-color: rgba(255,90,110,0.7); color: #ff6a82;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(255,80,110,0.22); }
.kb-hp .kb-val { color: #ffd4dc; text-shadow: 0 0 10px rgba(255,90,110,0.8); }
/* GOLD — золото */
.kb-gold { border-color: rgba(240,200,90,0.75); color: #f0c85a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(240,200,90,0.22); }
.kb-gold .kb-val { color: #fff0c0; text-shadow: 0 0 10px rgba(240,200,90,0.8); }
/* LEVEL — пурпур */
.kb-level { border-color: rgba(200,130,255,0.75); color: #c285ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(180,100,255,0.25); }
.kb-level .kb-val { color: #ecd6ff; text-shadow: 0 0 10px rgba(200,130,255,0.85); }

.right-col { display: flex; flex-direction: column; }
.flavor {
  border: 1px solid var(--gold-dim);
  background: rgba(0,0,0,0.3);
  padding: 18px 20px; font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; letter-spacing: 0.08em;
  color: var(--gold); line-height: 1.5;
  margin-bottom: 22px; text-transform: uppercase; font-weight: 500;
}

.points-banner {
  display: none;
  background: linear-gradient(90deg, rgba(176,112,255,0.18), rgba(255,95,168,0.08));
  border: 1px solid var(--gold);
  padding: 10px 16px; margin-bottom: 18px;
  font-family: 'Metamorphous', 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.25em;
  color: var(--gold-bright); text-align: center; text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}
.points-banner.show { display: block; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(190,120,255,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(190,120,255,0); }
}

.big-stat { margin-bottom: 16px; position: relative; padding-right: 40px; }
.big-stat-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Cinzel', serif; margin-bottom: 4px;
}
.big-stat-name { font-family: 'Metamorphous', 'Cinzel', serif; font-size: 13px; letter-spacing: 0.3em; color: var(--gold-bright); }
.big-stat-name .icon { color: var(--gold); margin-right: 8px; }
.big-stat-value { font-size: 16px; color: var(--gold-bright); font-weight: 600; }
.big-stat-value .extra { color: var(--text-dim); font-size: 12px; font-weight: 400; margin-left: 8px; }
.big-stat-desc {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase;
  margin-bottom: 6px;
}
.big-stat-bar {
  height: 4px; background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold-dim); position: relative; overflow: hidden;
}
.big-stat-bar > .bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  width: 10%; transition: width 0.4s ease;
}

.upgrade-btn {
  position: absolute; top: 50%; right: 0;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #2a1840, #160c24);
  color: var(--gold-bright);
  font-family: 'Metamorphous', 'Cinzel', serif;
  font-size: 18px; font-weight: 700;
  cursor: pointer; display: none;
  align-items: center; justify-content: center;
  transition: all 0.2s ease; border-radius: 2px;
}
.upgrade-btn:hover { background: var(--gold); color: var(--bg-dark); transform: translateY(-50%) scale(1.1); }
.upgrade-btn.show { display: flex; }

.abilities-header {
  font-family: 'Metamorphous', 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--gold-bright); margin: 18px 0 14px;
}
.abilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ability {
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(44,26,64,0.6), rgba(18,11,28,0.6));
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--gold-dim);
  position: relative; cursor: not-allowed;
}
.ability.unlocked { color: var(--gold-bright); cursor: pointer; border-color: var(--gold); }
.ability img { width: 100%; height: 100%; object-fit: contain; }
.ability-meta {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-style: italic;
  color: var(--text-dim); text-align: center;
  letter-spacing: 0.15em; margin-top: 4px; text-transform: uppercase;
}
.ability-cell { display: flex; flex-direction: column; position: relative; }

/* ── Тултип способности (что делает и зачем) ── */
.ability-tip {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 216px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(28,18,42,0.99), rgba(12,7,20,0.99));
  border: 1px solid rgba(200,140,255,0.45);
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.8), 0 0 22px rgba(160,80,255,0.2);
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity 0.16s ease, transform 0.16s ease;
  text-align: left;
}
.ability-cell:hover .ability-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.ability-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: rgba(200,140,255,0.45);
}
.atip-head {
  font-family: 'Metamorphous', serif; font-size: 12px;
  letter-spacing: 0.1em; margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.atip-type {
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.16em;
  padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.85;
}
.atip-body {
  font-family: 'Cormorant Garamond', serif; font-size: 13px;
  line-height: 1.42; color: #e6d8c4; letter-spacing: 0.02em;
}
/* крайние ячейки — смещаем тултип внутрь, чтобы не обрезался */
.ability-cell:first-child .ability-tip { left: 0; transform: translateX(0) translateY(6px); }
.ability-cell:first-child:hover .ability-tip { transform: translateX(0) translateY(0); }
.ability-cell:first-child .ability-tip::after { left: 28px; }
.ability-cell:last-child .ability-tip { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.ability-cell:last-child:hover .ability-tip { transform: translateX(0) translateY(0); }
.ability-cell:last-child .ability-tip::after { left: auto; right: 28px; }

.btn-row { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; align-items: center; }

/* ── Кнопки экрана бойца — каменные плиты (генерёнки) ── */
.btn-frame[data-action="equipment"],
.btn-frame[data-action="customize"],
.btn-frame[data-action="begin"] {
  width: 100%; max-width: 320px;
  height: 56px;
  padding: 0; border: none; border-radius: 0; box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  font-size: 0; color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-frame.large[data-action="begin"] { height: 76px; max-width: 360px; }
.btn-frame[data-action="equipment"] { background-image: url('../img/auth_btn/btn_equipment.png?v=1'); }
.btn-frame[data-action="customize"] { background-image: url('../img/auth_btn/btn_customize.png?v=1'); }
.btn-frame[data-action="begin"]     { background-image: url('../img/auth_btn/btn_begin.png?v=1'); }
.btn-frame[data-action="equipment"]:hover,
.btn-frame[data-action="customize"]:hover,
.btn-frame[data-action="begin"]:hover {
  transform: translateY(-2px);
  border: none; box-shadow: none; background-color: transparent;
  filter: brightness(1.18) saturate(1.1) drop-shadow(0 0 14px rgba(220, 80, 200, 0.5));
}
/* убрать угловые точки у большой кнопки (теперь это картинка) */
.btn-frame.large::before, .btn-frame.large::after { display: none; }

/* запас снизу, чтобы XP-бар не перекрывался фиксированным футером */
#screen-rocky { padding-bottom: 150px; }

.xp-bar {
  margin-top: 28px; margin-bottom: 24px; width: 100%; max-width: 880px;
  background: linear-gradient(180deg, rgba(40,26,60,0.85), rgba(16,10,26,0.88));
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 3;
  box-shadow: 0 0 26px rgba(212,175,90,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: xp-attn 3.2s ease-in-out infinite;
}
@keyframes xp-attn {
  0%, 100% { box-shadow: 0 0 22px rgba(212,175,90,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%      { box-shadow: 0 0 34px rgba(212,175,90,0.40), inset 0 1px 0 rgba(255,255,255,0.06); }
}
.xp-label {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.34em; color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(212,175,90,0.5);
}
.xp-label .icon { color: var(--gold-bright); margin-right: 8px; font-size: 16px; }
.xp-bar-fill {
  width: 100%; height: 22px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid var(--gold-dim);
  border-radius: 6px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
.xp-bar-fill > .inner {
  height: 100%;
  background: linear-gradient(90deg, #8a6d2a, var(--gold-bright) 70%, #fff3c8);
  width: 0%; transition: width 0.6s cubic-bezier(.4,1.3,.5,1);
  box-shadow: 0 0 14px rgba(212,175,90,0.7);
  position: relative;
}
/* бегущий блик по заполненной части */
.xp-bar-fill > .inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  background-size: 60% 100%;
  animation: xp-shine 2.4s linear infinite;
}
@keyframes xp-shine {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
.xp-text {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; letter-spacing: 0.12em;
  color: #e9d6a8; text-transform: uppercase;
  text-align: center;
}

/* ── ROCKY PNG SPRITE SYSTEM ── */
.rocky-sprite {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: bottom center;
}

/* battle fighter img mirrors the old .fighter svg rule */
.fighter img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.85)); }

/* equipment char-figure img mirrors the old .char-figure svg rule */
.char-figure img { width: 75%; max-height: 85%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7)); }

@keyframes _rocky-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40%       { transform: translateY(-4px) scaleY(1.02); }
  70%       { transform: translateY(-2px) scaleY(1.01); }
}
@keyframes _rocky-walk {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%       { transform: translateX(2px) translateY(-4px); }
}
@keyframes _rocky-punch {
  0%   { transform: translateX(0) scaleX(1); }
  20%  { transform: translateX(-3px) scaleX(0.94); }
  55%  { transform: translateX(10px) scaleX(1.07); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes _rocky-block {
  0%, 100% { transform: scaleX(0.97); }
  50%       { transform: scaleX(1); }
}
@keyframes _rocky-hit {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-10px) scaleX(0.91); }
  60%  { transform: translateX(-14px) scaleX(0.89); }
  100% { transform: translateX(0) scaleX(1); }
}

.rocky-anim-idle      { animation: _rocky-idle 1.9s ease-in-out infinite; }
.rocky-anim-walk      { animation: _rocky-walk 0.45s ease-in-out infinite; }
.rocky-anim-punch     { animation: _rocky-punch 0.28s ease-out forwards; }
.rocky-anim-heavy     { animation: _rocky-punch 0.42s ease-out forwards; }
.rocky-anim-kick      { animation: _rocky-walk 0.35s ease-out forwards; }
.rocky-anim-block     { animation: _rocky-block 0.65s ease-in-out infinite; }
.rocky-anim-hit       { animation: _rocky-hit 0.3s ease-out forwards; }
.rocky-anim-knockdown { animation: _rocky-hit 0.55s ease-out forwards; }