/* ══════════════════════════════════════════════════════════════════════════
   THE HALL OF LEGENDS
   ══════════════════════════════════════════════════════════════════════════
   The register is obsidian and gold with a holographic edge — the crypto and
   NFT vocabulary — and it is unlike the ember-and-brass of the rest of the
   Arena on purpose. This is the vault at the end of the floor.

   The layout is built around one question, top to bottom: how much is in the
   pot, who is winning it, where is the line, where am I.
   ────────────────────────────────────────────────────────────────────────── */

.arena-glory { display: none !important; }   /* the old Hall of Fame */

.arena-legends { margin: var(--space-8, 2rem) 0 0; }

/* The throne beams/pools are deliberately wider than their cards (160%/150%
   glow spill). Clip the spill at the page edge so it never grows a horizontal
   scrollbar — clip, not hidden, so no new scrollport is created. */
.arena-page { overflow-x: clip; }

.lg-shell {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.6rem 1.8rem;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background:
    linear-gradient(180deg, hsl(45 100% 60% / .08), transparent 22%),
    radial-gradient(1200px 500px at 50% -10%, hsl(280 60% 30% / .35), transparent 60%),
    linear-gradient(180deg, hsl(250 40% 7%), hsl(250 45% 4%));
  border: 1px solid hsl(45 100% 60% / .35);
  box-shadow: 0 40px 100px hsl(0 0% 0% / .7), inset 0 1px 0 hsl(45 100% 80% / .25), inset 0 0 120px hsl(45 100% 55% / .05);
}
/* A slow holographic sweep across the whole hall. */
.lg-glow {
  position: absolute; inset: -40% -20%;
  pointer-events: none;
  background: conic-gradient(from 200deg at 50% 50%,
    transparent 0 40%, hsl(160 100% 60% / .06) 45%, hsl(280 100% 70% / .09) 50%, hsl(45 100% 60% / .08) 55%, transparent 60% 100%);
  animation: lgSweep 14s linear infinite;
  mix-blend-mode: screen;
}
@keyframes lgSweep { to { transform: rotate(360deg); } }
.lg-shell > *:not(.lg-glow) { position: relative; z-index: 1; }

/* ── head ─────────────────────────────────────────────────────────────────── */
.lg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lg-eyebrow {
  display: inline-block; margin-bottom: .5rem;
  font: 900 .6rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .34em; text-transform: uppercase;
  color: hsl(45 100% 70%);
}
.lg-eyebrow::before { content: '♛ '; }
.lg-head h2 {
  margin: 0;
  font: 900 clamp(1.6rem, 3.2vw, 2.4rem)/1.05 var(--font-display, Inter), sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(100deg, #fff 0%, hsl(45 100% 78%) 40%, hsl(45 100% 60%) 70%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px hsl(45 100% 55% / .35));
}
.lg-head p { margin: .5rem 0 0; max-width: 56ch; font-size: .82rem; line-height: 1.5; color: hsl(0 0% 66%); }
.lg-head-r { text-align: right; }
.lg-clock-k { display: block; font: 800 .56rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .24em; text-transform: uppercase; color: hsl(0 0% 50%); margin-bottom: .3rem; }
.lg-clock {
  display: block;
  font: 900 1.6rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 20px hsl(45 100% 60% / .45);
}
.lg-clock.is-urgent { color: hsl(0 85% 68%); animation: arenaClockPulse 1s ease-in-out infinite; }
.lg-clock.is-closing { color: hsl(0 0% 60%); }
.lg-entrants { display: block; margin-top: .35rem; font-size: .68rem; color: hsl(0 0% 56%); }

/* ── the pot ──────────────────────────────────────────────────────────────── */
.lg-pool {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4rem 1.4rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background: linear-gradient(90deg, hsl(45 100% 55% / .16), hsl(45 100% 55% / .04) 60%, transparent);
  border-left: 3px solid hsl(45 100% 60%);
}
.lg-pool-k { grid-row: span 2; font: 900 .62rem/1.2 var(--font-display, Inter), sans-serif; letter-spacing: .28em; text-transform: uppercase; color: hsl(45 100% 72%); writing-mode: vertical-rl; transform: rotate(180deg); }
.lg-pool-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.lg-pool-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .55rem .9rem;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, hsl(var(--hue) / .22), hsl(var(--hue) / .06));
  border: 1px solid hsl(var(--hue) / .55);
  box-shadow: 0 0 24px hsl(var(--hue) / .25), inset 0 1px 0 hsl(0 0% 100% / .2);
}
.lg-pool-chip em { font-style: normal; font-size: .95rem; color: hsl(var(--hue)); }
.lg-pool-chip b { font: 900 1.7rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px hsl(var(--hue) / .6); }
.lg-pool-chip small { font: 900 .62rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .16em; color: hsl(var(--hue)); }
.lg-pool-empty { font-size: .8rem; color: hsl(0 0% 56%); }
.lg-pool-rule { grid-column: 2; font-size: .68rem; line-height: 1.5; color: hsl(0 0% 58%); max-width: 92ch; }

/* ── your row / your call ─────────────────────────────────────────────────── */
.lg-me {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; margin-bottom: 1.2rem;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: 1px solid hsl(0 0% 100% / .12);
  background: hsl(0 0% 100% / .04);
}
.lg-me-out { border-color: hsl(45 100% 60% / .5); background: linear-gradient(90deg, hsl(45 100% 55% / .12), transparent 70%); }
.lg-me-out > span { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.45; color: hsl(0 0% 80%); }
.lg-me-in { border-color: hsl(150 80% 55% / .55); background: linear-gradient(90deg, hsl(150 80% 45% / .14), transparent 70%); }
.lg-me-chasing { border-color: hsl(0 80% 60% / .5); background: linear-gradient(90deg, hsl(0 80% 55% / .12), transparent 70%); }
.lg-me-rank { font: 900 1.6rem/1 ui-monospace, Menlo, monospace; color: #fff; }
.lg-me-text { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.4; color: hsl(0 0% 82%); }
.lg-me-in .lg-me-text b { color: hsl(150 80% 66%); }
.lg-me-chasing .lg-me-text b { color: hsl(0 85% 70%); font-family: ui-monospace, Menlo, monospace; }
.lg-me-xp { text-align: right; font: 900 1.1rem/1 ui-monospace, Menlo, monospace; color: #fff; }
.lg-me-xp small { display: block; margin-top: .2rem; font: 800 .5rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .18em; text-transform: uppercase; color: hsl(0 0% 50%); }

.lg-cta {
  flex: none;
  padding: .85rem 1.4rem;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: none;
  background: linear-gradient(100deg, hsl(45 100% 62%), hsl(35 100% 50%));
  color: hsl(40 60% 8%);
  font: 900 .72rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px hsl(45 100% 50% / .35), inset 0 1px 0 hsl(0 0% 100% / .35);
  transition: filter .15s, transform .12s;
}
.lg-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lg-cta:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; }
.lg-cta-enter { animation: lgPulse 2.2s ease-in-out infinite; }
@keyframes lgPulse { 0%,100% { box-shadow: 0 10px 30px hsl(45 100% 50% / .35), inset 0 1px 0 hsl(0 0% 100% / .35); } 50% { box-shadow: 0 10px 44px hsl(45 100% 55% / .7), inset 0 1px 0 hsl(0 0% 100% / .35); } }

/* ── the podium ───────────────────────────────────────────────────────────── */
.lg-podium { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: .8rem; align-items: end; margin: .4rem 0 1rem; }
.lg-plinth {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.1rem .8rem 1rem;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  border-top: 2px solid var(--pc, hsl(0 0% 60%));
  background: linear-gradient(180deg, hsl(var(--ph, 0 0% 60%) / .18), hsl(var(--ph, 0 0% 60%) / .03) 60%, transparent), hsl(0 0% 100% / .03);
  box-shadow: 0 0 40px hsl(var(--ph, 0 0% 60%) / .18);
  min-height: 190px; justify-content: flex-end;
}
.lg-plinth-1 { --ph: 45 100% 60%; --pc: hsl(45 100% 62%); min-height: 240px; }
.lg-plinth-2 { --ph: 210 20% 78%; --pc: hsl(210 20% 80%); }
.lg-plinth-3 { --ph: 25 80% 55%; --pc: hsl(25 80% 58%); }
.lg-plinth.is-empty { opacity: .5; justify-content: center; }
.lg-plinth-empty { font: 800 .6rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .24em; text-transform: uppercase; color: hsl(0 0% 60%); }
.lg-crown { position: absolute; top: -.6rem; font-size: 1.5rem; filter: drop-shadow(0 0 12px hsl(45 100% 60% / .9)); }
.lg-plinth-pfp {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  font: 900 1.4rem/1 var(--font-display, Inter), sans-serif; color: #fff;
  background: linear-gradient(180deg, hsl(var(--ph) / .6), hsl(var(--ph) / .2));
  border: 3px solid var(--pc); box-shadow: 0 0 26px hsl(var(--ph) / .55);
}
.lg-plinth-1 .lg-plinth-pfp { width: 80px; height: 80px; font-size: 1.8rem; }
.lg-plinth-pfp img.av-img { border-radius: 50%; }
.lg-plinth-name { font: 900 .86rem/1.1 var(--font-display, Inter), sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-plinth-1 .lg-plinth-name { font-size: 1rem; }
.lg-plinth-xp { font: 700 .66rem/1 ui-monospace, Menlo, monospace; font-style: normal; color: hsl(0 0% 70%); }
.lg-plinth-prize { margin-top: .3rem; padding: .3rem .6rem; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); background: hsl(var(--ph) / .22); border: 1px solid hsl(var(--ph) / .5); font: 900 .6rem/1.3 ui-monospace, Menlo, monospace; color: #fff; text-align: center; }
.lg-plinth-place { position: absolute; bottom: .35rem; right: .6rem; font: 900 2.2rem/1 var(--font-display, Inter), sans-serif; color: hsl(var(--ph) / .22); }

/* ── the table + the money line ───────────────────────────────────────────── */
.lg-table { display: flex; flex-direction: column; gap: .3rem; }
.lg-row {
  display: grid; grid-template-columns: 44px 30px minmax(0, 1fr) auto auto; align-items: center; gap: .7rem;
  padding: .55rem .8rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: hsl(0 0% 100% / .03); border: 1px solid hsl(0 0% 100% / .06);
}
.lg-row.in-money { border-color: hsl(45 100% 60% / .3); background: linear-gradient(90deg, hsl(45 100% 55% / .09), hsl(0 0% 100% / .03) 50%); }
.lg-row.is-me { border-color: hsl(190 90% 55% / .6); box-shadow: 0 0 0 1px hsl(190 90% 55% / .3), inset 0 0 26px hsl(190 90% 55% / .1); }
.lg-row-rank { font: 900 .9rem/1 ui-monospace, Menlo, monospace; color: hsl(0 0% 70%); }
.lg-row.in-money .lg-row-rank { color: hsl(45 100% 68%); }
.lg-row-pfp { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; font: 900 .7rem/1 var(--font-display, Inter), sans-serif; color: #fff; background: hsl(0 0% 100% / .12); border: 1px solid hsl(0 0% 100% / .18); }
.lg-row-pfp img.av-img { border-radius: 50%; }
.lg-row-who { min-width: 0; }
.lg-row-who b { display: block; font: 800 .84rem/1.2 var(--font-body, Inter), sans-serif; color: hsl(0 0% 94%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row-who small { display: block; font-size: .6rem; color: hsl(280 60% 74%); }
.lg-row.is-me .lg-row-who b::after { content: 'you'; margin-left: .45rem; padding: .1rem .32rem; border-radius: 3px; background: hsl(190 90% 55% / .22); color: hsl(190 90% 78%); font: 800 .52rem/1.4 var(--font-display, Inter), sans-serif; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.lg-row-prize { font: 800 .64rem/1 ui-monospace, Menlo, monospace; color: hsl(45 100% 70%); white-space: nowrap; }
.lg-row-xp { font: 900 .95rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: #fff; }
.lg-row-xp small { margin-left: .25rem; font-size: .55rem; opacity: .6; }

.lg-money-line {
  position: relative; height: 2px; margin: .7rem 0;
  background: linear-gradient(90deg, transparent, hsl(45 100% 60%), hsl(45 100% 60%), transparent);
  box-shadow: 0 0 16px hsl(45 100% 60% / .8);
}
.lg-money-line span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .28rem .7rem; white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: hsl(45 100% 60%); color: hsl(40 60% 8%);
  font: 900 .54rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .2em; text-transform: uppercase;
}

/* ── NFT rewards ──────────────────────────────────────────────────────────── */
.lg-nfts { margin-top: 1.4rem; }
.lg-nfts-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.lg-nfts-head span { font: 900 .62rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .28em; text-transform: uppercase; color: hsl(280 90% 78%); }
.lg-nfts-head small { font-size: .66rem; color: hsl(0 0% 56%); }
.lg-nft-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.lg-nft {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: .6rem;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  border: 1px solid hsl(280 90% 70% / .45);
  background: linear-gradient(180deg, hsl(280 60% 30% / .3), hsl(250 40% 8%));
  box-shadow: 0 0 30px hsl(280 90% 60% / .18);
}
.lg-nft-art { aspect-ratio: 1; overflow: hidden; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); background: hsl(0 0% 0% / .4); }
.lg-nft-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No art yet: a holographic plate, which is honest and still looks like something. */
.lg-nft-holo { display: block; width: 100%; height: 100%; background: conic-gradient(from 0deg, hsl(160 100% 60% / .5), hsl(280 100% 70% / .5), hsl(45 100% 60% / .5), hsl(190 100% 60% / .5), hsl(160 100% 60% / .5)); filter: blur(10px) saturate(1.4); animation: lgSweep 9s linear infinite; }
.lg-nft b { font: 800 .74rem/1.15 var(--font-display, Inter), sans-serif; color: #fff; }
.lg-nft small { font-size: .6rem; color: hsl(0 0% 60%); }
.lg-nft-place { position: absolute; top: .5rem; right: .5rem; padding: .2rem .45rem; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); background: hsl(280 90% 70%); color: hsl(280 60% 8%); font: 900 .5rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.lg-empty { padding: 1.6rem 1rem; text-align: center; }
.lg-empty b { display: block; font: 900 1rem/1.2 var(--font-display, Inter), sans-serif; color: #fff; margin-bottom: .3rem; }
.lg-empty span { font-size: .78rem; color: hsl(0 0% 60%); }
.lg-shell-quiet { padding: 2rem; text-align: center; }
.lg-shell-quiet h2 { margin: .3rem 0; }

@media (prefers-reduced-motion: reduce) { .lg-glow, .lg-cta-enter, .lg-nft-holo, .lg-clock { animation: none !important; } }
@media (max-width: 760px) {
  .lg-shell { padding: 1.1rem .9rem 1.2rem; }
  .lg-head-r { text-align: left; }
  .lg-pool { grid-template-columns: 1fr; }
  .lg-pool-k { grid-row: auto; writing-mode: horizontal-tb; transform: none; }
  .lg-pool-rule { grid-column: 1; }
  .lg-podium { grid-template-columns: 1fr; }
  .lg-plinth, .lg-plinth-1 { min-height: 0; }
  .lg-row { grid-template-columns: 34px 26px minmax(0, 1fr) auto; }
  .lg-row-prize { display: none; }
  .lg-me { flex-direction: column; align-items: stretch; }
  .lg-cta { text-align: center; }
}

/* An NFT with no art file yet gets a SIGIL derived from its own name — hue,
   glyph and facets are a hash of the string, so each reward is a distinct
   object and the same reward always looks the same. A placeholder that is
   clearly a placeholder, and still worth looking at. */
.lg-nft-sigil {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, hsl(var(--sig) 90% 62% / .55), transparent 60%),
    conic-gradient(from calc(var(--sig) * 1deg) at 50% 50%,
      hsl(var(--sig) 90% 55% / .5), hsl(calc(var(--sig) + 70) 90% 60% / .45),
      hsl(calc(var(--sig) + 180) 90% 58% / .5), hsl(var(--sig) 90% 55% / .5));
}
/* Facets: a cut-gem lattice over the field. */
.lg-nft-sigil i {
  position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(calc(var(--sig) * 1deg), transparent 0 14px, hsl(0 0% 0% / .28) 14px 15px),
    repeating-linear-gradient(calc(var(--sig) * -1deg + 60deg), transparent 0 22px, hsl(0 0% 100% / .1) 22px 23px);
  mix-blend-mode: overlay;
}
.lg-nft-sigil b {
  position: relative; z-index: 1;
  font-size: 2.4rem; line-height: 1;
  color: hsl(0 0% 100% / .95);
  text-shadow: 0 0 18px hsl(var(--sig) 100% 60%), 0 2px 6px hsl(0 0% 0% / .7);
}
/* The next place up, under your standing — the move you can make tonight. */
.lg-me-next { display: block; margin-top: .3rem; font-size: .74rem; color: hsl(0 0% 62%); }
.lg-me-next b { color: hsl(45 100% 70%); font-family: ui-monospace, Menlo, monospace; }
.lg-me-next-top { color: hsl(150 70% 66%); }


/* CLS: the register renders only after the season fetch. Reserve roughly the
   settled height of the shell (head, pool, podium, table) so everything below
   does not jump when it lands; the section still grows past this. */
.arena-legends { min-height: 560px; }
@media (max-width: 760px) { .arena-legends { min-height: 680px; } }