.app-page-wrapper--arena,
.kp-page--arena,
.kp-page--arena-inspect,
.kp-page--arena-aux {
--arena-bg:      var(--n-bg,      #0a0b10);
--arena-panel:   var(--n-bg-2,    rgba(14,15,22,.95));
--arena-cell:    var(--n-bg-soft, rgba(255,255,255,.04));
--arena-cell-h:  var(--n-bg-hover,rgba(255,255,255,.07));
--arena-sunk:    var(--n-bg-sunk, rgba(8,9,14,.98));
--arena-text:    var(--n-text,      #ddd8d0);
--arena-muted:   var(--n-text-soft, #908a82);
--arena-dim:     var(--n-text-dim,  #5a5550);
--arena-border:  var(--n-line,        rgba(255,255,255,.06));
--arena-border-h:var(--n-line-strong, rgba(255,255,255,.13));
--arena-accent:  var(--n-accent,  #ef6443);
--arena-accent-hover: var(--n-accent-hover, #ff7a5c);
--arena-accent-light: var(--n-accent-light, #ff8a6a);
--arena-accent-g:var(--n-accent-glow, rgba(239,100,67,.38));
--arena-green:   var(--n-hp,      #22c55e);
--arena-gold:    var(--n-gold,    #f5c366);
--arena-silver:  var(--n-rank-silver, #c0c0c0);
--arena-bronze:  var(--n-rank-bronze, #cd7f32);
--arena-lav:     var(--n-lav,     #a78bfa);
--arena-cyan:    var(--n-cyan,    #22d3ee);
--arena-red:     var(--n-danger,  #ef4444);
--arena-red-light: #f87171;
--arena-blue:    var(--n-xp,      #3b82f6);
--arena-blue-light: #60a5fa;
--arena-muted-g: rgba(0,0,0,.6);
--arena-font:  var(--font, 'Chakra Petch', sans-serif);
--arena-mono:  var(--n-font-mono, 'JetBrains Mono', monospace);
--arena-ease: cubic-bezier(.16,1,.3,1);
--arena-r-sm: 8px;
--arena-r-md: 14px;
--arena-r-lg: 22px;
--arena-r-xl: 28px;

/* ─────────────────────────────────────────────────────────────────────────────
   v1.1.6.63 (A4.2): ПОРОЖНЯ ЧАСТИНА СМУГИ HP — ПЕРШИЙ ТОКЕН, ЩО ЗНАЄ ПРО СВІТЛУ ТЕМУ.

   Доріжка HP на всіх трьох екранах була залита `rgba(255,255,255,.05)` — білою плівкою
   у 5%. На темному тлі це ледь помітна канавка, заради якої її й робили. На світлому
   (`--n-bg: #f6f3ee`) біле по кремовому не видно взагалі: смуга втрачала порожню частину,
   і залишок HP переставав читатись.

   Це не «десь загубився токен»: перевірка показала, що ЖОДЕН із 23 платформних токенів,
   на які делегує Арена, не пропущений у світлій темі. Діра була саме тут — у сирому
   кольорі повз токени, тому її не бачив жоден токен-контроль.

   Темне значення лишається ДОСЛІВНО тим самим — цей реліз не міняє темну тему ні на біт.
   ───────────────────────────────────────────────────────────────────────────── */
--arena-track: rgba(0,0,0,.06);
}

/* Темна тема повертає доріжці рівно ту плівку, що була до v1.1.6.63. */
[data-theme="dark"] .app-page-wrapper--arena,
[data-theme="dark"] .kp-page--arena,
[data-theme="dark"] .kp-page--arena-inspect,
[data-theme="dark"] .kp-page--arena-aux {
--arena-track: rgba(255,255,255,.05);
}
.app-page-wrapper--arena { position: relative; z-index: var(--kp-z-content, 1); }
.container--arena {
width: 100%;
max-width: 1080px;
margin-inline: auto;
padding: 18px 14px;
}
@media (min-width: 720px) { .container--arena { padding: 24px 20px; } }
.kp-arena-bg {
position: fixed; inset: 0;
pointer-events: none; z-index: 0; overflow: hidden;
}
.kp-arena-bg__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 20%, transparent 70%);
}
.kp-arena-bg__glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 60% at 50% 30%,
rgba(239,100,67,.06), transparent 70%);
}
.kp-arena-bg__scan {
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(255,255,255,.004) 2px, rgba(255,255,255,.004) 4px
);
}

.arena-hp__fill.low {
background: linear-gradient(90deg, var(--arena-red), #f87171) !important;
box-shadow: 0 0 10px rgba(239,68,68,.3) !important;
animation: arenaHpPulse 1s ease-in-out infinite;
}
@keyframes arenaHpPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
@media (max-width: 860px) {
.arena-grid { grid-template-columns: 1fr; }
}
.arena-match-stage {
display: grid; grid-template-columns: 1fr 80px 1fr;
align-items: center; gap: 0;
padding: 20px;
}

body.kp-route-arena .app-page-wrapper--arena { padding-bottom: 20px; }
@media (max-width: 768px) {
body.kp-route-arena[data-kp-mobile-bottom-nav="1"] .app-page-wrapper--arena { padding-bottom: var(--kp-bottom-nav-h, 64px); }
.arena-summary-grid { grid-template-columns: 1fr 1fr; }
.arena-match-stage { grid-template-columns: 1fr 60px 1fr; }
}
[data-theme="light"] .arena-card { background: var(--arena-panel); border-color: rgba(0,0,0,.07); }
[data-theme="light"] .arena-row { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .arena-row:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .kp-arena-bg__grid,
[data-theme="light"] .kp-arena-bg__glow { opacity: .3; }