.kp-arena-nav {
display: flex;
gap: 2px;
padding: 5px;
margin-bottom: 18px;
background: var(--arena-panel, rgba(14,15,22,.94));
border-radius: 14px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
position: sticky;
top: 8px;
z-index: 20;
}
.kp-arena-nav::-webkit-scrollbar { display: none; }
.kp-arena-nav__item {
position: relative;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 10px;
color: var(--arena-muted, var(--n-text-dim));
text-decoration: none;
font-family: var(--arena-mono, monospace);
font-size: .74rem;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
scroll-snap-align: start;
flex-shrink: 0;
border: 1px solid transparent;
transition: color .12s, background .12s, border-color .12s;
-webkit-tap-highlight-color: transparent;
}
.kp-arena-nav__item:hover {
color: var(--arena-text, var(--n-text));
background: var(--arena-cell, rgba(255,255,255,.04));
}
.kp-arena-nav__item.is-active {
color: var(--arena-accent, var(--n-accent));
background: color-mix(in srgb, var(--arena-accent) 12%, transparent);
border-color: color-mix(in srgb, var(--arena-accent) 22%, transparent);
}
.kp-arena-nav__item.has-badge {
color: var(--arena-gold, var(--n-warn));
background: color-mix(in srgb, var(--arena-gold) 10%, transparent);
border-color: color-mix(in srgb, var(--arena-gold) 22%, transparent);
}
.kp-arena-nav__icon  { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.kp-arena-nav__label { font-size: .74rem; }
.kp-arena-nav__dot {
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
border-radius: 50%;
background: var(--arena-accent, var(--n-accent));
box-shadow: 0 0 6px var(--arena-accent, var(--n-accent));
}
.kp-arena-nav__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--arena-gold, var(--n-warn));
color: #1a1a14;
font-size: .58rem;
font-weight: 800;
margin-left: 2px;
}
@media (max-width: 560px) {
.kp-arena-nav__label { display: none; }
.kp-arena-nav__item  { padding: 8px 10px; }
.kp-arena-nav__item.is-active .kp-arena-nav__label { display: inline; }
.kp-arena-nav__icon  { font-size: 1.05rem; }
}
[data-theme="light"] .kp-arena-nav {
background: var(--n-bg-2);
}
[data-theme="light"] .kp-arena-nav__item:hover {
background: rgba(0,0,0,.04);
}
[data-theme="light"] .kp-arena-nav__item.is-active {
background: color-mix(in srgb, var(--arena-accent) 10%, transparent);
border-color: color-mix(in srgb, var(--arena-accent) 22%, transparent);
}