/* v1.1.5.991: правила `.w-arena-damage-chart__empty*` прибрано разом із розміткою —
   порожній стан графіка малює примітив `ui/empty_state` зі своїм CSS (HB-011). */
.w-arena-damage-chart {
display: block;
padding: 16px;
background: var(--n-bg-2);
border-radius: 16px;
width: 100%;
}
.w-arena-damage-chart__head {
margin-bottom: 12px;
}
.w-arena-damage-chart__title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.95rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--n-text);
}
.w-arena-damage-chart__title-icon {
font-size: 1.1rem;
color: var(--n-accent);
}
.w-arena-damage-chart__canvas-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 100%;
max-width: 240px;
aspect-ratio: 1 / 1;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.w-arena-damage-chart__svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.w-arena-damage-chart__trinity {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 0 auto;
}
.w-arena-damage-chart__trinity .w-arena-damage-chart__canvas-wrap {
flex: 1 1 auto;
margin: 0;
min-width: 0;
}
.w-arena-damage-chart__hp-donut {
position: relative;
width: 80px;
height: 80px;
flex: 0 0 80px;
display: flex;
align-items: center;
justify-content: center;
}
.w-arena-damage-chart__hp-donut-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.w-arena-damage-chart__hp-donut-bg {
stroke: var(--n-bg-soft, rgba(0, 0, 0, 0.06));
}
[data-theme="dark"] .w-arena-damage-chart__hp-donut-bg {
stroke: rgba(255, 255, 255, 0.05);
}
.w-arena-damage-chart__hp-donut-arc {
transition: stroke-dasharray 0.5s cubic-bezier(.4, 0, .2, 1);
}
.w-arena-damage-chart__hp-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--n-font-mono, monospace);
pointer-events: none;
}
.w-arena-damage-chart__hp-donut-current {
font-size: 0.92rem;
font-weight: 800;
line-height: 1;
}
.w-arena-damage-chart__hp-donut--attacker .w-arena-damage-chart__hp-donut-current {
color: var(--n-danger);
}
.w-arena-damage-chart__hp-donut--defender .w-arena-damage-chart__hp-donut-current {
color: #3b82f6;
}
.w-arena-damage-chart__hp-donut-sep {
font-size: 0.65rem;
color: var(--n-text-mute, #888);
opacity: 0.6;
line-height: 1;
margin: 1px 0;
}
.w-arena-damage-chart__hp-donut-max {
font-size: 0.62rem;
color: var(--n-text-mute, #888);
line-height: 1;
}
.w-arena-damage-chart__hp-donut-lost {
font-size: 0.78rem;
font-weight: 800;
line-height: 1;
color: #f97316;
display: none;
}
.w-arena-damage-chart__hp-donut-center.is-percent-mode .w-arena-damage-chart__hp-donut-sep,
.w-arena-damage-chart__hp-donut-center.is-percent-mode .w-arena-damage-chart__hp-donut-max {
display: none;
}
.w-arena-damage-chart__hp-donut-center.is-percent-mode .w-arena-damage-chart__hp-donut-current {
font-size: 0.95rem;
}
.w-arena-damage-chart__hp-donut-center.is-percent-mode .w-arena-damage-chart__hp-donut-lost {
display: block;
margin-top: 1px;
}
@media (max-width: 480px) {
.w-arena-damage-chart__trinity {
gap: 4px;
}
.w-arena-damage-chart__hp-donut {
width: 64px;
height: 64px;
flex: 0 0 64px;
}
.w-arena-damage-chart__hp-donut-current {
font-size: 0.78rem;
}
.w-arena-damage-chart__hp-donut-sep,
.w-arena-damage-chart__hp-donut-max {
font-size: 0.55rem;
}
}
.w-arena-damage-chart__bg {
stroke: var(--n-bg-soft, rgba(0, 0, 0, 0.06));
}
[data-theme="dark"] .w-arena-damage-chart__bg {
stroke: rgba(255, 255, 255, 0.05);
}
.w-arena-damage-chart__arc {
transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1),
stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="dark"] .w-arena-damage-chart__arc--attacker {
stroke: var(--n-danger);
}
[data-theme="dark"] .w-arena-damage-chart__arc--defender {
stroke: #60a5fa;
}
.w-arena-damage-chart__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
text-align: center;
}
.w-arena-damage-chart__value {
font-size: 1.6rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1.1;
transition: color .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
.w-arena-damage-chart__value--attacker {
color: var(--n-danger);
}
.w-arena-damage-chart__value--defender {
color: #3b82f6;
}
[data-theme="dark"] .w-arena-damage-chart__value--attacker {
color: var(--n-danger);
}
[data-theme="dark"] .w-arena-damage-chart__value--defender {
color: #60a5fa;
}
.w-arena-damage-chart__divider {
width: 36px;
height: 1px;
background: var(--n-line);
margin: 2px 0;
}
.w-arena-damage-chart__value.is-changing {
transform: scale(1.15);
}
.w-arena-damage-chart__legend {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 14px;
flex-wrap: wrap;
}
.w-arena-damage-chart__legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--n-text);
}
.w-arena-damage-chart__legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.w-arena-damage-chart__legend-item--attacker .w-arena-damage-chart__legend-dot {
background: var(--n-danger);
}
.w-arena-damage-chart__legend-item--defender .w-arena-damage-chart__legend-dot {
background: #3b82f6;
}
[data-theme="dark"] .w-arena-damage-chart__legend-item--attacker .w-arena-damage-chart__legend-dot {
background: var(--n-danger);
}
[data-theme="dark"] .w-arena-damage-chart__legend-item--defender .w-arena-damage-chart__legend-dot {
background: #60a5fa;
}
.w-arena-damage-chart__modes {
display: inline-flex;
margin: 14px auto 0;
padding: 4px;
background: var(--n-bg-soft, rgba(0, 0, 0, 0.04));
border-radius: 999px;
gap: 2px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.w-arena-damage-chart__mode {
appearance: none;
border: none;
background: transparent;
color: var(--n-text-mute);
padding: 6px 16px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .15s ease;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.w-arena-damage-chart__mode:hover {
color: var(--n-text);
}
.w-arena-damage-chart__mode.is-active {
background: var(--n-bg-2);
color: var(--n-text);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .w-arena-damage-chart__mode.is-active {
background: rgba(255, 255, 255, 0.1);
color: var(--n-text-on-accent);
box-shadow: none;
}
@media (max-width: 480px) {
.w-arena-damage-chart__canvas-wrap {
max-width: 200px;
}
.w-arena-damage-chart__value {
font-size: 1.4rem;
}
.w-arena-damage-chart__legend-item {
font-size: 0.8rem;
}
}