/* ============================================================
   ARENA — night-arena visual world for cs2lis.com
   Violet carries panels/actions, cyan marks live signal,
   phosphor green is reserved for money, amber for warnings.
   Loaded after main.css on every page (see header.php).
   ============================================================ */

:root {
  --arena-ground: #060913;
  --arena-ground-2: #0a0f22;
  --arena-panel: #0d1430;
  --arena-panel-2: #131b40;
  --arena-overprint: #241a78;
  --arena-line: rgba(148, 163, 255, 0.14);
  --arena-line-strong: rgba(148, 163, 255, 0.28);
  --arena-ink: #edf0ff;
  --arena-muted: #a2abd0;
  --arena-faint: #7e88b0;
  --arena-violet: #7c5cff;
  --arena-violet-hi: #a48fff;
  --arena-violet-deep: #4728d8;
  --arena-cyan: #3ae2ff;
  --arena-green: #34d399;
  --arena-amber: #ffb224;
  --arena-red: #ff6b6b;
  --arena-radius: 16px;
  --arena-radius-sm: 10px;
  --arena-font-display: "Chakra Petch", "Heebo", system-ui, sans-serif;
  --arena-font-body: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arena-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --arena-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Ground ---------- */

body {
  font-family: var(--arena-font-body);
  background-color: var(--arena-ground);
  background-image:
    radial-gradient(1100px 520px at 12% -6%, rgba(124, 92, 255, 0.16), transparent 62%),
    radial-gradient(900px 480px at 96% 4%, rgba(58, 226, 255, 0.08), transparent 60%),
    radial-gradient(1400px 900px at 50% 115%, rgba(71, 40, 216, 0.12), transparent 65%),
    repeating-linear-gradient(0deg, rgba(148, 163, 255, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(148, 163, 255, 0.05) 0 1px, transparent 1px 56px);
  background-attachment: fixed;
  color: var(--arena-ink);
  caret-color: var(--arena-cyan);
}

::selection {
  background: var(--arena-violet);
  color: #fff;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--arena-ground);
}
::-webkit-scrollbar-thumb {
  background: #2a3568;
  border-radius: 8px;
  border: 3px solid var(--arena-ground);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--arena-violet);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--arena-cyan);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: #fff;
  color: #111827;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

a.underline {
  text-underline-offset: 3px;
}

/* ---------- Type voices ---------- */

.arena-display {
  font-family: var(--arena-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.mono,
.lookup-readout,
.inventory-summary-value,
.endpoint-chip,
.readout-tag,
.doc-table td:nth-child(2),
.doc-table td:last-child {
  font-family: var(--arena-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Header shell ---------- */

.arena-header {
  position: relative;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--arena-line);
}

.arena-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
}

.arena-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.arena-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex: none;
}

.arena-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}

.arena-brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.55));
}

.arena-brand-word {
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--arena-ink);
}

.arena-nav a {
  border: 1px solid transparent;
  transition: background-color 0.25s var(--arena-ease), border-color 0.25s var(--arena-ease), color 0.25s;
}

.arena-nav a:hover {
  background: rgba(124, 92, 255, 0.14);
}

.arena-nav a[aria-current="page"] {
  background: var(--arena-violet);
  border-color: var(--arena-violet-hi);
  color: #fff;
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.45);
}

/* ---------- Buttons ---------- */

.arena-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--arena-violet);
  border: 1px solid var(--arena-violet-hi);
  color: #fff;
  font-family: var(--arena-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--arena-radius-sm);
  box-shadow: 0 8px 28px rgba(124, 92, 255, 0.35);
  transition: background-color 0.25s var(--arena-ease), box-shadow 0.25s var(--arena-ease), transform 0.25s var(--arena-ease);
}

.arena-btn-primary:hover {
  background: var(--arena-violet-deep);
  box-shadow: 0 8px 34px rgba(124, 92, 255, 0.6), 0 0 0 1px var(--arena-cyan) inset;
}

.arena-btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.arena-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--arena-line-strong);
  color: var(--arena-ink);
  border-radius: var(--arena-radius-sm);
  transition: border-color 0.25s, background-color 0.25s;
}

.arena-btn-ghost:hover {
  border-color: var(--arena-cyan);
  background: rgba(58, 226, 255, 0.08);
}

/* ---------- Hero (home) ---------- */

.arena-hero {
  position: relative;
  padding: clamp(3rem, 8vw, 7rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
  overflow: clip;
}

.arena-hero-grid {
  display: grid;
  gap: 2.25rem;
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}

@media (min-width: 1024px) {
  .arena-hero-grid {
    gap: 2.75rem;
  }
}

.arena-hero h1 {
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0 0 1rem;
  color: var(--arena-ink);
}

.arena-hero h1 .hot {
  color: var(--arena-cyan);
}

.arena-sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--arena-muted);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

/* Command bar: the lookup IS the hero */

.lookup-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .lookup-form {
    flex-direction: row;
  }
}

.lookup-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem;
  background: rgba(13, 20, 48, 0.9);
  border: 1px solid rgba(124, 92, 255, 0.5);
  border-radius: var(--arena-radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 46px rgba(124, 92, 255, 0.22);
  transition: border-color 0.25s, box-shadow 0.3s var(--arena-ease);
}

@media (min-width: 640px) {
  .lookup-bar {
    flex-direction: row;
    align-items: stretch;
  }
}

.lookup-bar:focus-within {
  border-color: var(--arena-violet);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--arena-violet), 0 0 32px rgba(124, 92, 255, 0.35);
}

.lookup-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(6, 9, 19, 0.7);
  border: 1px solid var(--arena-line);
  border-radius: var(--arena-radius-sm);
  padding: 1.05rem 1.3rem;
  font-size: 1.05rem;
  color: var(--arena-ink);
}

.lookup-input::placeholder {
  color: var(--arena-faint);
}

.lookup-input[aria-invalid="true"] {
  border-color: var(--arena-red);
}

.lookup-btn {
  padding: 1.05rem 2.6rem;
  font-size: 1.1rem;
  border-radius: var(--arena-radius-sm);
  white-space: nowrap;
}

.lookup-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 1.75rem;
  margin: 0.8rem 0.25rem 0;
  font-size: 0.875rem;
  color: var(--arena-cyan);
}

.lookup-readout .readout-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--arena-cyan);
  box-shadow: 0 0 10px var(--arena-cyan);
  flex: none;
}

.lookup-readout.is-idle {
  color: var(--arena-faint);
}

.lookup-readout.is-idle .readout-dot {
  background: var(--arena-faint);
  box-shadow: none;
}

.lookup-hint {
  margin: 0.6rem 0.25rem 0;
  font-size: 0.875rem;
  color: var(--arena-faint);
  text-align: center;
}

.lookup-error {
  margin: 0.6rem 0.25rem 0;
  color: var(--arena-red);
  font-weight: 600;
  text-align: center;
}

.trade-help {
  margin: 1rem auto 0;
  max-width: 38rem;
  text-align: left;
  border: 1px solid var(--arena-line);
  border-radius: var(--arena-radius-sm);
  background: rgba(13, 20, 48, 0.6);
  padding: 0.7rem 1rem;
  transition: border-color 0.25s;
}

.trade-help:hover {
  border-color: var(--arena-line-strong);
}

.trade-help summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--arena-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.trade-help summary::-webkit-details-marker {
  display: none;
}

.trade-help summary::before {
  content: "+";
  font-family: var(--arena-font-mono);
  font-weight: 700;
  color: var(--arena-cyan);
  transition: transform 0.25s var(--arena-ease);
}

.trade-help[open] > summary::before {
  transform: rotate(45deg);
}

.trade-help summary:hover {
  color: var(--arena-ink);
}

.trade-help ol {
  margin: 0.8rem 0 0.2rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0.6rem;
}

.trade-help li {
  counter-increment: step;
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--arena-muted);
}

.trade-help li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--arena-font-mono);
  font-size: 0.8rem;
  color: var(--arena-cyan);
  flex: none;
  padding-top: 0.2rem;
}

.trade-help li strong {
  color: var(--arena-ink);
}

.trade-help li a {
  color: var(--arena-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trade-help li a:hover {
  color: var(--arena-ink);
}

.ext-icon {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 2px;
}

/* Endpoint chips: real proof, links to /api/list */

.endpoint-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  align-items: center;
  justify-content: center;
}

.endpoint-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--arena-muted);
  border: 1px solid var(--arena-line);
  background: rgba(13, 20, 48, 0.7);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.endpoint-chip:hover {
  border-color: var(--arena-cyan);
  color: var(--arena-ink);
  box-shadow: 0 0 16px rgba(58, 226, 255, 0.25);
}

.endpoint-chip .method {
  color: var(--arena-green);
  font-weight: 700;
}

.freshness {
  font-size: 0.8rem;
  color: var(--arena-faint);
}

/* Proof panel: the same data as API */

.proof-panel {
  background: linear-gradient(180deg, rgba(19, 27, 64, 0.92), rgba(10, 15, 34, 0.94));
  border: 1px solid var(--arena-line-strong);
  border-radius: var(--arena-radius);
  padding: 1.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.proof-title {
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
  color: var(--arena-ink);
}

.proof-sub {
  font-size: 0.9rem;
  color: var(--arena-muted);
  margin: 0 0 1.1rem;
}

.proof-band {
  width: 100%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem;
  align-items: center;
  justify-content: space-between;
}

.proof-band .proof-sub {
  margin-bottom: 0;
}

/* Supporting strip (kept copy, quieter frame) */

.arena-strip {
  border-top: 1px solid var(--arena-line);
  border-bottom: 1px solid var(--arena-line);
  background: rgba(10, 15, 34, 0.6);
}

.arena-strip-grid {
  display: grid;
  gap: 0;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .arena-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.arena-strip-cell {
  padding: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
  .arena-strip-cell + .arena-strip-cell {
    border-left: 1px solid var(--arena-line);
  }
}

.arena-strip-cell h2,
.arena-strip-cell h3 {
  font-family: var(--arena-font-display);
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--arena-ink);
}

.arena-strip-cell p {
  margin: 0;
  color: var(--arena-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Sections */

.arena-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
}

.arena-section-head h2 {
  font-family: var(--arena-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: 0 0 0.5rem;
  color: var(--arena-ink);
  text-wrap: balance;
}

.arena-section-head p {
  margin: 0 0 2rem;
  color: var(--arena-muted);
  max-width: 38rem;
  font-size: 1.05rem;
}

/* Endpoint rows (home proof of API) */

.endpoint-rows {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 768px) {
  .endpoint-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.endpoint-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(13, 20, 48, 0.75);
  border: 1px solid var(--arena-line);
  border-radius: var(--arena-radius);
  padding: 1.25rem 1.35rem;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.3s var(--arena-ease), box-shadow 0.3s var(--arena-ease);
}

.endpoint-row:hover {
  border-color: var(--arena-violet);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 24px rgba(124, 92, 255, 0.25);
}

.endpoint-row .glyph {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--arena-overprint);
  border: 1px solid var(--arena-line-strong);
  color: var(--arena-cyan);
}

.endpoint-row h3 {
  font-family: var(--arena-font-display);
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
  color: var(--arena-ink);
}

.endpoint-row code {
  display: block;
  font-family: var(--arena-font-mono);
  font-size: 0.8rem;
  color: var(--arena-green);
  margin-bottom: 0.3rem;
}

.endpoint-row p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--arena-muted);
}

/* Media frame for the artwork */

.arena-media {
  border: 1px solid var(--arena-line-strong);
  border-radius: var(--arena-radius);
  overflow: clip;
  background: var(--arena-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.arena-media img {
  display: block;
  width: 100%;
  height: auto;
}

.arena-media figcaption {
  padding: 0.8rem 1.2rem;
  font-size: 0.85rem;
  color: var(--arena-faint);
  border-top: 1px solid var(--arena-line);
}

/* ---------- Inventory (Operate) ---------- */

.inventory-main,
.inventory-main .bg-gray-900,
.inventory-main .bg-gray-800 {
  background-color: transparent;
}

.crest-lockup {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  background: linear-gradient(180deg, rgba(19, 27, 64, 0.92), rgba(10, 15, 34, 0.94));
  border: 1px solid var(--arena-line-strong);
  border-radius: var(--arena-radius);
  padding: 1.5rem;
  flex-wrap: wrap;
}

.crest-lockup img.avatar {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  border: 1px solid var(--arena-line-strong);
  flex: none;
}

.crest-lockup .who {
  min-width: 0;
}

.crest-lockup .who h1 {
  font-family: var(--arena-font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0 0 0.35rem;
  color: var(--arena-ink);
}

.crest-lockup .who h1 a {
  color: inherit;
}

.crest-lockup .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-size: 0.88rem;
  color: var(--arena-muted);
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 0.4rem;
  background: var(--arena-faint);
}

.status-dot.on {
  background: var(--arena-green);
  box-shadow: 0 0 10px var(--arena-green);
}

.inventory-summary {
  background: rgba(13, 20, 48, 0.75);
  border: 1px solid var(--arena-line);
}

.inventory-summary-value {
  color: var(--arena-green);
  text-shadow: 0 0 22px rgba(52, 211, 153, 0.35);
}

/* Rank heat: top results read hottest */

.rank-1 > .card {
  border: 1px solid var(--arena-violet);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(124, 92, 255, 0.3);
}

.rank-2 > .card {
  border: 1px solid rgba(58, 226, 255, 0.55);
}

.rank-3 > .card {
  border: 1px solid var(--arena-line-strong);
}

.color-percent {
  font-family: var(--arena-font-mono);
  font-size: 0.7rem;
  color: var(--arena-faint);
}

/* ---------- Inventory item cards ---------- */

.inv-item {
  width: 100%;
  padding: 0.5rem;
}

@media (min-width: 640px) {
  .inv-item {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .inv-item {
    width: 25%;
  }
}

.inv-card {
  height: 100%;
  overflow: clip;
  background: linear-gradient(180deg, rgba(19, 27, 64, 0.92), rgba(10, 15, 34, 0.96));
  border: 1px solid var(--arena-line);
  border-radius: var(--arena-radius);
  transition: transform 0.3s var(--arena-ease), border-color 0.25s, box-shadow 0.3s var(--arena-ease);
}

.inv-card:hover {
  transform: translateY(-4px);
  border-color: var(--arena-violet);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 255, 0.28);
}

.inv-card .inv-media {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0;
  background:
    radial-gradient(220px 120px at 50% 28%, rgba(124, 92, 255, 0.2), transparent 70%),
    rgba(6, 9, 19, 0.6);
  border-bottom: 1px solid var(--arena-line);
  overflow: hidden;
}

.inv-card .inv-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

.inv-card .inv-body {
  padding: 1rem 1.1rem 1.15rem;
  gap: 0.45rem;
}

.inv-card .inv-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.6em;
  margin: 0;
  color: var(--arena-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inv-card .inv-sub {
  margin: 0;
  font-family: var(--arena-font-mono);
  font-size: 0.75rem;
  color: var(--arena-faint);
}

.inv-card .inv-sub span {
  color: var(--arena-cyan);
}

.inv-card .inv-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.inv-card .inv-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--arena-green);
  text-shadow: 0 0 22px rgba(52, 211, 153, 0.35);
}

.inv-card .badge {
  flex: none;
}

/* ---------- Lookup loader: target acquisition ----------
   While the check runs, the command bar becomes a scanner: a comet
   orbits the button rim, a reticle spins where the icon was, a light
   blade sweeps the whole bar, and the readout types terminal lines. */

@property --comet-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.lookup-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lookup-btn.is-loading {
  opacity: 1;
  cursor: default;
  border-color: rgba(58, 226, 255, 0.7);
  background: linear-gradient(110deg, var(--arena-violet-deep) 10%, var(--arena-violet) 38%, #9d86ff 50%, var(--arena-violet) 62%, var(--arena-violet-deep) 90%);
  background-size: 220% 100%;
  animation: btn-sheen 1.4s linear infinite, btn-glow 1.6s ease-in-out infinite;
}

.lookup-btn.is-loading:hover {
  cursor: default;
  background: linear-gradient(110deg, var(--arena-violet-deep) 10%, var(--arena-violet) 38%, #9d86ff 50%, var(--arena-violet) 62%, var(--arena-violet-deep) 90%);
  background-size: 220% 100%;
}

/* Light sweep across the face */
.lookup-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.38) 50%, transparent 80%);
  transform: translateX(-130%) skewX(-18deg);
  animation: btn-sweep 1.25s ease-in-out infinite;
}

/* Comet running the rim: cyan head with a violet wing on the far side.
   The ring is a masked 2px frame; only the gradient angle animates. */
.lookup-btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--comet-a, 0deg),
    transparent 0deg 40deg,
    rgba(164, 143, 255, 0) 55deg,
    rgba(164, 143, 255, 0.42) 80deg,
    rgba(164, 143, 255, 0) 105deg,
    transparent 120deg 290deg,
    rgba(58, 226, 255, 0) 305deg,
    rgba(58, 226, 255, 0.6) 335deg,
    #eaffff 357deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(58, 226, 255, 0.75));
  animation: comet-orbit 1.6s linear infinite;
}

.lookup-btn.is-loading > * {
  position: relative;
  z-index: 2;
}

.load-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Reticle: rotating dial, two counter-rotating comet rings, pulsing core */

.reticle {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
}

.reticle .rt-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(58, 226, 255, 0.38);
  animation: rt-dial 5.6s linear infinite;
}

.reticle .rt-orbit {
  position: absolute;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
}

.reticle .rt-orbit-a {
  inset: 2px;
  background: conic-gradient(from 0deg,
    transparent 0deg 300deg,
    rgba(58, 226, 255, 0.8) 342deg,
    #eaffff 358deg,
    transparent 360deg);
  filter: drop-shadow(0 0 5px rgba(58, 226, 255, 0.85));
  animation: rt-spin 0.85s linear infinite;
}

.reticle .rt-orbit-b {
  inset: 6px;
  background: conic-gradient(from 180deg,
    transparent 0deg 295deg,
    rgba(164, 143, 255, 0.9) 340deg,
    #fff 358deg,
    transparent 360deg);
  filter: drop-shadow(0 0 5px rgba(124, 92, 255, 0.9));
  animation: rt-spin-rev 1.35s linear infinite;
}

.reticle .rt-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 13px rgba(58, 226, 255, 0.95);
  animation: rt-core 0.85s ease-in-out infinite;
}

/* Legacy fallbacks: cached scanner.js may still inject these */
.load-spinner {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 8%, var(--arena-cyan) 55%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: rt-spin 0.7s linear infinite;
  filter: drop-shadow(0 0 8px rgba(58, 226, 255, 0.9));
}

.load-dots {
  display: inline-flex;
  margin-left: 0.1em;
}

.load-dots span {
  display: inline-block;
  animation: dot-blink 1.2s ease-in-out infinite;
  min-width: 0.32em;
}

.load-dots span:nth-child(2) { animation-delay: 0.15s; }
.load-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes comet-orbit {
  to { --comet-a: 360deg; }
}

@keyframes rt-spin {
  to { transform: rotate(360deg); }
}

@keyframes rt-spin-rev {
  to { transform: rotate(-360deg); }
}

@keyframes rt-dial {
  to { transform: rotate(360deg); }
}

@keyframes rt-core {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.55); }
}

@keyframes btn-sheen {
  to { background-position: -220% 0; }
}

@keyframes btn-sweep {
  0% { transform: translateX(-130%) skewX(-18deg); }
  60%, 100% { transform: translateX(230%) skewX(-18deg); }
}

@keyframes btn-glow {
  0%, 100% { box-shadow: 0 8px 28px rgba(124, 92, 255, 0.45), 0 0 14px rgba(58, 226, 255, 0.25); }
  50% { box-shadow: 0 8px 38px rgba(124, 92, 255, 0.8), 0 0 34px rgba(58, 226, 255, 0.55); }
}

@keyframes dot-blink {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Thin indeterminate run-line across the command bar while checking */

.lookup-bar {
  position: relative;
}

.lookup-bar.is-checking {
  border-color: rgba(58, 226, 255, 0.55);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(58, 226, 255, 0.55), 0 0 38px rgba(58, 226, 255, 0.3);
}

/* Track for the run-line */
.lookup-bar.is-checking::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 999px;
  background: rgba(58, 226, 255, 0.18);
  overflow: hidden;
  pointer-events: none;
}

/* Runner with a hot head: quick dashes chase the comet on the button */
.lookup-bar.is-checking::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  width: 32%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124, 92, 255, 0.55) 25%,
    var(--arena-cyan) 70%,
    #eaffff);
  box-shadow: 0 0 12px rgba(58, 226, 255, 0.9), 0 0 26px rgba(58, 226, 255, 0.45);
  animation: bar-slide 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite alternate;
  pointer-events: none;
}

/* The input becomes part of the scanner: a light blade passes through it
   (layered into the input's own background — inputs take no pseudo
   elements), and the value glows cyan. */
.lookup-bar.is-checking {
  background:
    repeating-linear-gradient(0deg, rgba(58, 226, 255, 0.05) 0 1px, transparent 1px 7px),
    rgba(13, 20, 48, 0.9);
  animation: bar-scanlines 1s steps(7) infinite;
}

.lookup-bar.is-checking .lookup-input {
  border-color: rgba(58, 226, 255, 0.4);
  color: var(--arena-cyan);
  caret-color: var(--arena-cyan);
  text-shadow: 0 0 10px rgba(58, 226, 255, 0.35);
  background:
    linear-gradient(115deg,
      transparent 15%,
      rgba(58, 226, 255, 0.13) 42%,
      rgba(234, 255, 255, 0.18) 50%,
      rgba(124, 92, 255, 0.13) 58%,
      transparent 85%),
    rgba(6, 9, 19, 0.7);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: input-blade 1.9s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.lookup-bar.is-checking .lookup-input::selection {
  background: rgba(58, 226, 255, 0.3);
}

.lookup-bar.is-checking .lookup-input::placeholder {
  color: rgba(58, 226, 255, 0.4);
}

@keyframes input-blade {
  0% { background-position: 0% 0; }
  60%, 100% { background-position: 100% 0; }
}

@keyframes bar-scanlines {
  to { background-position: 0 7px; }
}

@keyframes bar-slide {
  from { transform: translateX(0); opacity: 0.7; }
  to { transform: translateX(calc(212%)); opacity: 1; }
}

/* Readout becomes a terminal feed while the check runs */

.lookup-readout .readout-eq,
.lookup-readout .readout-caret {
  display: none;
}

.lookup-readout.is-checking {
  color: var(--arena-cyan);
}

.lookup-readout.is-checking .readout-eq,
.lookup-readout.is-checking .readout-caret {
  display: inline-flex;
}

.lookup-readout.is-checking .readout-dot {
  position: relative;
  background: var(--arena-cyan);
  box-shadow: 0 0 10px var(--arena-cyan);
  animation: dot-ping 1s ease-out infinite;
}

.lookup-readout.is-checking .readout-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid var(--arena-cyan);
  opacity: 0;
  animation: dot-ring 1s ease-out infinite;
}

/* Typed-line caret: a chunky block cursor that blinks while "typing"
   and stays solid once the line is complete. */
.readout-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.28em;
  vertical-align: -0.15em;
  background: var(--arena-cyan);
  box-shadow: 0 0 8px rgba(58, 226, 255, 0.8);
  animation: caret-blink 0.7s steps(1) infinite;
}

/* Signal equalizer: five needles reading telemetry */
.readout-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.85em;
  margin-right: 0.55em;
  flex: none;
  vertical-align: -0.08em;
}

.readout-eq i {
  width: 2px;
  height: 100%;
  background: var(--arena-cyan);
  box-shadow: 0 0 4px rgba(58, 226, 255, 0.8);
  transform-origin: bottom;
  animation: eq-bounce 0.75s ease-in-out infinite;
}

.readout-eq i:nth-child(2) { animation-delay: 0.12s; }
.readout-eq i:nth-child(3) { animation-delay: 0.24s; }
.readout-eq i:nth-child(4) { animation-delay: 0.36s; }
.readout-eq i:nth-child(5) { animation-delay: 0.48s; }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes dot-ping {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes dot-ring {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Lookup button spinner (legacy fallback) ---------- */

.spin {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: arena-spin 0.7s linear infinite;
  vertical-align: -3px;
}

@keyframes arena-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lookup-btn.is-loading,
  .lookup-btn.is-loading::after,
  .lookup-btn.is-loading::before,
  .lookup-bar.is-checking,
  .lookup-bar.is-checking .lookup-input,
  .lookup-bar.is-checking::after,
  .load-spinner,
  .reticle .rt-dial,
  .reticle .rt-orbit-a,
  .reticle .rt-orbit-b,
  .reticle .rt-core,
  .readout-caret,
  .readout-eq i,
  .load-dots span,
  .lookup-readout.is-checking .readout-dot,
  .lookup-readout.is-checking .readout-dot::after,
  .spin {
    animation: none;
  }
  .lookup-btn.is-loading::after,
  .lookup-btn.is-loading::before,
  .lookup-bar.is-checking::before,
  .lookup-bar.is-checking::after {
    display: none;
  }
}

/* ---------- Login ---------- */

.arena-auth-card {
  max-width: 34rem;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(19, 27, 64, 0.94), rgba(10, 15, 34, 0.96));
  border: 1px solid var(--arena-line-strong);
  border-radius: var(--arena-radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.arena-auth-card h1 {
  font-family: var(--arena-font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 0.75rem;
  color: var(--arena-ink);
}

.arena-auth-card p {
  color: var(--arena-muted);
  line-height: 1.65;
}

/* ---------- Docs tables (Read) ---------- */

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: rgba(13, 20, 48, 0.7);
  border: 1px solid var(--arena-line);
  border-radius: var(--arena-radius-sm);
  overflow: hidden;
}

.doc-table thead th {
  font-family: var(--arena-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arena-cyan);
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--arena-line-strong);
  background: rgba(36, 26, 120, 0.35);
}

.doc-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--arena-line);
  color: var(--arena-muted);
  vertical-align: top;
}

.doc-table tbody tr:last-child td {
  border-bottom: none;
}

.doc-table tbody tr:hover td {
  background: rgba(124, 92, 255, 0.07);
}

/* ---------- Blog cards ---------- */

.blog-index article {
  background: rgba(13, 20, 48, 0.75);
  border: 1px solid var(--arena-line);
  transition: border-color 0.25s, transform 0.3s var(--arena-ease), box-shadow 0.3s var(--arena-ease);
}

.blog-index article:hover {
  border-color: var(--arena-violet);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 24px rgba(124, 92, 255, 0.22);
}

/* ---------- Footer ---------- */

.arena-footer {
  margin-top: 5rem;
  border-top: 1px solid var(--arena-line);
  background: linear-gradient(180deg, rgba(10, 15, 34, 0) 0%, rgba(5, 8, 18, 0.92) 30%);
}

.arena-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 2.25rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .arena-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.arena-footer-brand p {
  color: var(--arena-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 1rem 0 1.5rem;
  max-width: 24rem;
}

.arena-footer-title {
  font-family: var(--arena-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena-faint);
  margin: 0 0 1rem;
}

.arena-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.arena-footer ul a {
  color: var(--arena-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.arena-footer ul a:hover {
  color: var(--arena-cyan);
}

.arena-footer .trust-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--arena-faint);
}

.arena-footer .trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--arena-green);
  box-shadow: 0 0 10px var(--arena-green);
  flex: none;
}

.arena-footer-giant {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 255, 0.22);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.arena-footer-bar {
  border-top: 1px solid var(--arena-line);
}

.arena-footer-bar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--arena-faint);
}

.arena-footer-bar a {
  color: var(--arena-muted);
}

.arena-footer-bar a:hover {
  color: var(--arena-cyan);
}

/* ---------- Motion: one authored moment ---------- */

@keyframes arena-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
    clip-path: inset(0 0 12% 0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0);
  }
}

.arena-hero .rise {
  animation: arena-rise 0.9s var(--arena-ease) both;
}

.arena-hero .rise-1 { animation-delay: 0.05s; }
.arena-hero .rise-2 { animation-delay: 0.16s; }
.arena-hero .rise-3 { animation-delay: 0.28s; }
.arena-hero .rise-4 { animation-delay: 0.4s; }

.discord-btn {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}

.discord-btn svg {
  flex: none;
}

.arena-btn-steam {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--arena-violet);
  border: 1px solid var(--arena-violet-hi);
  color: #fff;
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(124, 92, 255, 0.35);
  transition: background-color 0.25s var(--arena-ease), box-shadow 0.25s var(--arena-ease);
}

.arena-btn-steam:hover {
  background: var(--arena-violet-deep);
  color: #fff;
  box-shadow: 0 8px 34px rgba(124, 92, 255, 0.6), 0 0 0 1px var(--arena-cyan) inset;
}

.arena-btn-steam img {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ---------- Responsive shell ---------- */

@media (max-width: 900px) {
  .arena-header-inner {
    flex-wrap: wrap;
  }
  .arena-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.6rem;
  }
  .arena-actions .discord-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-hero .rise {
    animation: none;
  }
  .endpoint-row:hover,
  .blog-index article:hover,
  .inv-card:hover {
    transform: none;
  }
}