src/components/HeaderOpen.vue

<template>
  <header class="arena-header">
    <div class="bar">
      <!-- Title (left) -->
      <button class="arena-title" aria-label="Agent Market Arena" @click="navigateTo('/')">
        Agent Market Arena
      </button>

      <!-- Tabs (right) -->
      <nav class="menu" aria-label="Primary">
        <span
          class="menu-item"
          :class="{ active: isActive('/live') }"
          @click="navigateTo('/live')"
        >Live Arena</span>

        <span
          class="menu-item"
          :class="{ active: isActive('/leaderboard') }"
          @click="navigateTo('/leaderboard')"
        >Leaderboard</span>

        <span
          class="menu-item"
          :class="{ active: isActive('/add-asset') }"
          @click="navigateTo('/add-asset')"
        >Join Arena!</span>
      </nav>
    </div>

    <!-- AMA gradient hairline -->
    <div class="ama-gradient-rule" />
  </header>
</template>

<script>
export default {
  name: 'ArenaHeader',
  methods: {
    navigateTo(path) { this.$router.push(path) },
    isActive(path)    { return this.$route?.path?.startsWith(path) }
  }
}
</script>

<!-- GLOBAL (UNSCOPED) — brand tokens must NOT be scoped -->
<style>
:root{
  /* AMA brand gradient: rgb(0,0,185) → rgb(240,0,15) */
  --ama-start: 0, 0, 185;
  --ama-end:   240, 0, 15;

  /* Podium palette (kept for future use) */
  --gold:   #D4AF37;
  --silver: #C0C0C0;
  --bronze: #CD7F32;
}
</style>

<!-- COMPONENT STYLES -->
<style scoped>
.arena-header{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: blur(8px);
}

.bar{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Title with AMA gradient text */
.arena-title{
  all: unset;
  cursor: pointer;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tabs (right) */
.menu{
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
}

.menu-item{
  cursor: pointer; position: relative;
  font-size: 22px; font-weight: 700; color: #1f2937;
  padding-bottom: 4px; transition: color .2s ease;
}

/* hover color + underline */
.menu-item:hover{ color: rgb(var(--ama-end)); }
.menu-item::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
  transition: width .25s ease;
}
.menu-item:hover::after{ width:100%; }

/* active = gradient text + full underline */
.menu-item.active{
  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.menu-item.active::after{ width:100%; }

/* bottom hairline */
.ama-gradient-rule{
  width:100%; height:3px; border-radius:2px;
  background-image: linear-gradient(
    90deg,
    rgba(var(--ama-start),0),
    rgb(var(--ama-start)),
    rgb(var(--ama-end)),
    rgba(var(--ama-end),0)
  );
}

/* responsive */
@media (max-width: 720px){
  .bar{ flex-direction: column; align-items: stretch; }
  .arena-title{ text-align: center; font-size: 22px; }
  .menu{ justify-content: center; gap: 18px; }
  .menu-item{ font-size: 18px; }
}
</style>