/* =====================================================
   ORACLE DUEL . cyan vs magenta esports terminal v2.
   palette  : arena black #0a0b14 + cyan #5cf2ff + magenta #ff4ad5 + bone #e6ecff
   type     : Saira Condensed display + DM Sans body + Roboto Mono numerics

   Structure: full-bleed Higgsfield banner HERO + interactive ARENA
   stage-machine + single INFO row (ladder + integrity side-by-side).
   No waitlist email modal. CTA leads to a playable preview duel.
   ===================================================== */

:root{
  --arena:      #0a0b14;
  --arena-2:    #0f1122;
  --arena-3:    #161a2e;
  --arena-4:    #21263d;
  --cyan:       #5cf2ff;
  --cyan-hi:    #a8f8ff;
  --cyan-lo:    #2bb0c8;
  --magenta:    #ff4ad5;
  --magenta-hi: #ffb8f0;
  --magenta-lo: #c4218e;
  --bone:       #e6ecff;
  --bone-dim:   rgba(230,236,255,0.66);
  --bone-fade:  rgba(230,236,255,0.32);

  --f-display:  'Saira Condensed', 'Arial Narrow', sans-serif;
  --f-body:     'DM Sans', -apple-system, sans-serif;
  --f-mono:     'Roboto Mono', 'Menlo', monospace;

  --pad-x:      clamp(20px, 4vw, 56px);
  --container:  1240px;
}

[hidden]{ display: none !important; }
*{ box-sizing: border-box; }

html, body{
  margin: 0; padding: 0;
  background: var(--arena);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-state="loading"]{ opacity: 0; }
body[data-state="ready"]{ opacity: 1; transition: opacity 320ms ease; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

/* ============ HERO: full-bleed Higgsfield banner ============ */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero-banner{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-banner-img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.62) saturate(1.15) contrast(1.05);
}
.hero-banner.is-fallback .hero-banner-img{ display: none; }
.hero-banner-fallback{
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 50%, rgba(92,242,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 78% 50%, rgba(255,74,213,0.4) 0%, transparent 50%),
    linear-gradient(180deg, var(--arena-2) 0%, var(--arena) 100%);
}
.hero-banner.is-fallback .hero-banner-fallback{ display: block; }
.hero-banner-fallback{ display: none; }
.hero-banner-veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,11,20,0.42) 0%, rgba(10,11,20,0.78) 80%, var(--arena) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(10,11,20,0.6) 100%);
}

/* HERO NAV (transparent over banner) */
.hero-nav{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
}
.hero-brand{
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--bone);
}
.hero-brand-orb{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(230,236,255,0.4);
  box-shadow: 0 0 18px rgba(92,242,255,0.36), 0 0 18px rgba(255,74,213,0.36);
  object-fit: cover;
}
.hero-brand-name{
  font-family: var(--f-display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-brand-tick{
  font-family: var(--f-mono); font-size: 12px;
  color: var(--cyan);
}
.hero-nav-status{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(10,11,20,0.62);
  border: 1px solid var(--arena-4);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.hero-nav-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.5; } }

/* HERO TEXT (positioned over banner) */
.hero-text{
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(40px, 8vw, 100px) var(--pad-x);
  max-width: 920px;
  margin: 0 auto;
}
.hero-title{
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(64px, 12vw, 168px);
  line-height: 0.92; letter-spacing: 0.02em;
  margin: 0 0 22px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan-hi) 0%, var(--bone) 50%, var(--magenta-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 64px rgba(92,242,255,0.4), 0 0 64px rgba(255,74,213,0.4);
}
.hero-sub{
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--bone-dim);
  margin: 0 0 36px;
  max-width: 680px;
}

/* the BIG CTA . single button, distinct shape, leads into interactive arena */
.hero-cta{
  position: relative;
  display: inline-grid; gap: 4px;
  padding: 20px 48px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--magenta) 100%);
  color: var(--arena);
  font-family: var(--f-display); font-weight: 900;
  border-radius: 4px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 0 48px rgba(92,242,255,0.4), 0 0 48px rgba(255,74,213,0.4);
  overflow: hidden;
  transition: transform 200ms ease, filter 200ms ease, box-shadow 250ms ease;
}
.hero-cta::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: translateX(-200%);
  animation: ctaSwipe 3.6s ease-in-out infinite;
}
@keyframes ctaSwipe{
  0%, 50% { transform: translateX(-200%); }
  60%, 100% { transform: translateX(200%); }
}
.hero-cta:hover{
  transform: translateY(-3px);
  filter: brightness(1.12);
  box-shadow: 0 0 72px rgba(92,242,255,0.6), 0 0 72px rgba(255,74,213,0.6);
}
.hero-cta-label{
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-cta-sub{
  font-family: var(--f-mono); font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 600px){
  .hero-title{ font-size: 64px; }
  .hero-cta{ padding: 16px 32px; }
  .hero-brand-name{ font-size: 18px; }
}

/* ============ ARENA: stage-machine ============ */
.arena{
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
  text-align: center;
  min-height: 480px;
}
.stage{
  display: none;
  animation: stageIn 400ms ease-out;
}
body[data-stage="idle"]      .stage[data-show="idle"],
body[data-stage="searching"] .stage[data-show="searching"],
body[data-stage="pick"]      .stage[data-show="pick"],
body[data-stage="resolving"] .stage[data-show="resolving"],
body[data-stage="result"]    .stage[data-show="result"]{
  display: block;
}
@keyframes stageIn{
  0%{ opacity: 0; transform: translateY(12px); }
  100%{ opacity: 1; transform: translateY(0); }
}

/* STAGE 1: idle . CA badge + prompt + btc line */
.stage-idle .arena-tag{
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--cyan);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.arena-ca{
  display: inline-block;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--arena-3) 0%, var(--arena-2) 100%);
  border: 1px solid;
  border-image: linear-gradient(90deg, var(--cyan), var(--magenta)) 1;
  border-radius: 3px;
  font-family: var(--f-mono); font-size: 14px;
  color: var(--bone);
  word-break: break-all;
  box-shadow: 0 0 18px rgba(92,242,255,0.16), 0 0 18px rgba(255,74,213,0.16);
  transition: filter 160ms;
}
.arena-ca:hover{ filter: brightness(1.14); }
.arena-ca.is-copied{ color: var(--cyan); }
.arena-ca-hint{
  margin: 8px 0 0;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--bone-fade);
  letter-spacing: 0.08em;
}
.arena-prompt{
  margin: 36px auto 24px;
  max-width: 560px;
  font-size: 15px;
  color: var(--bone-dim);
}
.arena-prompt b{ color: var(--bone); }
.btcline{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(92,242,255,0.05);
  border: 1px solid rgba(92,242,255,0.3);
  border-radius: 3px;
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--bone-dim);
  letter-spacing: 0.08em;
}
.btcline-led{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.btcline b{ color: var(--cyan); font-weight: 600; }

/* STAGE 2: searching */
.search-orbs{
  position: relative;
  width: 280px; height: 140px;
  margin: 12px auto 28px;
}
.search-orb{
  position: absolute; top: 50%;
  width: 70px; height: 70px;
  border-radius: 50%;
  transform: translateY(-50%);
  filter: blur(4px);
  animation: orbConverge 1.8s ease-in-out infinite alternate;
}
.search-orb-l{
  left: 0;
  background: radial-gradient(circle, var(--cyan-hi), var(--cyan-lo) 70%, transparent);
}
.search-orb-r{
  right: 0;
  background: radial-gradient(circle, var(--magenta-hi), var(--magenta-lo) 70%, transparent);
  animation-delay: 0.4s;
}
.search-seam{
  position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--bone), transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 12px var(--bone);
  opacity: 0.6;
}
@keyframes orbConverge{
  0%{ transform: translateY(-50%) translateX(0) scale(1); opacity: 0.7; }
  100%{ transform: translateY(-50%) translateX(70px) scale(1.15); opacity: 1; }
}
.search-orb-r{ animation-name: orbConvergeR; }
@keyframes orbConvergeR{
  0%{ transform: translateY(-50%) translateX(0) scale(1); opacity: 0.7; }
  100%{ transform: translateY(-50%) translateX(-70px) scale(1.15); opacity: 1; }
}
.search-title{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--bone);
}
.search-sub{
  font-family: var(--f-mono); font-size: 13px;
  color: var(--bone-dim);
  letter-spacing: 0.06em;
  margin: 0 0 22px;
}
.search-sub b{ color: var(--cyan); font-weight: 500; }
.search-cancel{
  padding: 8px 18px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--bone-dim);
  border: 1px dashed var(--arena-4);
  border-radius: 3px;
  letter-spacing: 0.06em;
  transition: color 160ms, border-color 160ms;
}
.search-cancel:hover{ color: var(--magenta); border-color: var(--magenta); }

/* STAGE 3: pick side */
.stage-pick{ text-align: left; }
.pick-tag{
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--magenta);
  text-transform: uppercase;
  margin: 0 0 18px;
  text-align: center;
}
.pick-grid{
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 820px){
  .pick-grid{ grid-template-columns: 1fr 320px 1fr; }
}
.pick-card{
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(15,17,34,0.92), rgba(10,11,20,0.92));
  border-radius: 4px;
}
.pick-card-you{
  border: 1px solid rgba(92,242,255,0.42);
  box-shadow: 0 0 28px rgba(92,242,255,0.22);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.pick-card-opp{
  border: 1px solid rgba(255,74,213,0.42);
  box-shadow: 0 0 28px rgba(255,74,213,0.22);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 819px){
  .pick-card-you, .pick-card-opp{ clip-path: none; }
}
.pick-card-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.pick-card-head b{ color: var(--bone); font-weight: 700; }
.pick-card-head b#youElo, .pick-card-head b#oppElo{ color: var(--bone); }
.pick-card-body{ display: flex; align-items: center; gap: 14px; }
.pick-orb{
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  filter: blur(0.5px);
}
.pick-orb-cyan{ background: radial-gradient(circle, var(--cyan-hi), var(--cyan-lo) 70%, transparent); box-shadow: 0 0 24px var(--cyan); }
.pick-orb-magenta{ background: radial-gradient(circle, var(--magenta-hi), var(--magenta-lo) 70%, transparent); box-shadow: 0 0 24px var(--magenta); }
.pick-meta{ display: grid; gap: 3px; }
.pick-handle{
  font-family: var(--f-display); font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pick-winrate{
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--bone-dim);
}
.pick-winrate b{ color: var(--bone); }

.pick-center{
  padding: 18px 16px;
  background: var(--arena-2);
  border-top: 1px solid rgba(92,242,255,0.3);
  border-bottom: 1px solid rgba(255,74,213,0.3);
  display: grid; gap: 14px;
}
.pick-question-kind{
  display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  padding: 3px 8px;
  background: rgba(92,242,255,0.08);
  border: 1px solid rgba(92,242,255,0.32);
  border-radius: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pick-question-prompt{
  font-family: var(--f-display); font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.25;
  color: var(--bone);
}
.pick-stake{
  font-family: var(--f-mono); font-size: 12px;
  color: var(--bone-dim);
  text-align: center;
  letter-spacing: 0.04em;
}
.pick-stake b{ color: var(--cyan); }
.pick-actions{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pick-yes, .pick-no{
  padding: 14px 14px;
  font-family: var(--f-display); font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: filter 160ms, transform 160ms, box-shadow 200ms;
}
.pick-yes{
  background: linear-gradient(180deg, var(--cyan-hi), var(--cyan));
  color: var(--arena);
  box-shadow: 0 0 18px rgba(92,242,255,0.45);
}
.pick-yes:hover{ filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 0 28px rgba(92,242,255,0.65); }
.pick-no{
  background: linear-gradient(180deg, var(--magenta-hi), var(--magenta));
  color: var(--arena);
  box-shadow: 0 0 18px rgba(255,74,213,0.45);
}
.pick-no:hover{ filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 0 28px rgba(255,74,213,0.65); }

/* STAGE 4: resolving */
.resolve-tag{
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--magenta);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.resolve-q{
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0.02em;
  margin: 0 auto 24px;
  max-width: 580px;
  color: var(--bone);
  line-height: 1.3;
}
.resolve-bar{
  margin: 0 auto 22px;
  max-width: 480px;
  height: 14px;
  background: var(--arena-3);
  border: 1px solid var(--arena-4);
  border-radius: 100px;
  overflow: hidden;
}
.resolve-bar-fill{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(92,242,255,0.4), 0 0 12px rgba(255,74,213,0.4);
  transform-origin: right center;
  animation: resolveDrain linear forwards;
}
@keyframes resolveDrain{ 0%{ transform: scaleX(1); } 100%{ transform: scaleX(0); } }
.resolve-meta{
  font-family: var(--f-mono); font-size: 12px;
  color: var(--bone-dim);
  letter-spacing: 0.04em;
}
.resolve-meta b{ color: var(--bone); }

/* STAGE 5: result */
.result-banner{
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  text-transform: uppercase;
  animation: resultPulse 1s ease-out;
}
.result-banner[data-outcome="win"]{
  background: linear-gradient(90deg, var(--cyan-hi), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 32px rgba(92,242,255,0.5);
}
.result-banner[data-outcome="loss"]{
  background: linear-gradient(90deg, var(--magenta-hi), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 32px rgba(255,74,213,0.5);
}
@keyframes resultPulse{
  0%{ transform: scale(0.7); opacity: 0; }
  60%{ transform: scale(1.06); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}
.result-pair{
  display: grid; grid-template-columns: 1fr 50px 1fr;
  align-items: center;
  gap: 16px;
  max-width: 580px;
  margin: 0 auto 26px;
}
.result-side{
  display: grid; gap: 4px;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(15,17,34,0.92), rgba(10,11,20,0.92));
  border-radius: 4px;
}
.result-side-you{ border: 1px solid rgba(92,242,255,0.42); box-shadow: 0 0 18px rgba(92,242,255,0.22); }
.result-side-opp{ border: 1px solid rgba(255,74,213,0.42); box-shadow: 0 0 18px rgba(255,74,213,0.22); }
.result-side.is-winner{ animation: winnerGlow 700ms ease-out; }
@keyframes winnerGlow{
  0%{ filter: brightness(1); }
  30%{ filter: brightness(1.6); }
  100%{ filter: brightness(1); }
}
.result-side-label{
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.result-side-handle{
  font-family: var(--f-display); font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-transform: uppercase;
}
.result-side-elo{
  font-family: var(--f-mono); font-size: 12px;
  color: var(--bone-dim);
}
.result-side-elo b{ color: var(--bone); }
.result-side-elo i{
  font-style: normal; font-weight: 600;
  margin-left: 6px;
}
.result-side-elo i.is-up{ color: var(--cyan); }
.result-side-elo i.is-down{ color: var(--magenta); }
.result-vs{
  text-align: center;
  font-family: var(--f-display); font-weight: 800;
  font-size: 20px;
  color: var(--bone-fade);
}
.result-pot{
  font-family: var(--f-mono); font-size: 12.5px;
  color: var(--bone-dim);
  margin: 0 0 22px;
  letter-spacing: 0.04em;
}
.result-pot b{ color: var(--cyan); }
.result-again{
  padding: 14px 30px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  color: var(--arena);
  font-family: var(--f-display); font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 0 24px rgba(92,242,255,0.4), 0 0 24px rgba(255,74,213,0.4);
  transition: filter 160ms, transform 160ms;
}
.result-again:hover{ filter: brightness(1.1); transform: translateY(-2px); }

/* ============ INFO ROW (ladder + integrity side-by-side) ============ */
.info{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
  display: grid; gap: 28px;
}
@media (min-width: 920px){
  .info{ grid-template-columns: 1fr 1.2fr; gap: 36px; }
}
.info-h{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, var(--cyan), transparent 70%) 1;
}
.info-integrity .info-h{
  border-image: linear-gradient(90deg, var(--magenta), transparent 70%) 1;
}

.ladder-frame{
  background: linear-gradient(180deg, rgba(15,17,34,0.85), rgba(10,11,20,0.85));
  border: 1px solid var(--arena-4);
  border-radius: 4px;
  overflow: hidden;
}
.ladder-head, .ladder-row{
  display: grid;
  grid-template-columns: 40px 1.5fr 70px 60px;
  gap: 10px;
  padding: 10px 16px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
}
.ladder-head{
  background: rgba(92,242,255,0.05);
  border-bottom: 1px solid var(--arena-4);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.ladder-head span:nth-child(1), .ladder-head span:nth-child(3), .ladder-head span:nth-child(4){ text-align: right; }
.ladder-row{
  border-bottom: 1px dashed rgba(230,236,255,0.07);
}
.ladder-row:last-child{ border-bottom: 0; }
.lad-rank{
  text-align: right;
  font-family: var(--f-display); font-weight: 700;
  color: var(--bone-fade);
}
.ladder-row[data-rank="1"] .lad-rank{ color: var(--cyan-hi); text-shadow: 0 0 6px var(--cyan); }
.ladder-row[data-rank="2"] .lad-rank{ color: var(--bone); }
.ladder-row[data-rank="3"] .lad-rank{ color: var(--magenta-hi); }
.lad-handle{
  font-family: var(--f-display); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-transform: uppercase;
}
.lad-elo, .lad-winrate{ text-align: right; }
.lad-elo b{ color: var(--cyan); font-weight: 600; }
.lad-winrate b{ color: var(--magenta); font-weight: 600; }

.int-list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.int-list li{
  padding: 12px 14px;
  background: var(--arena-2);
  border-left: 2px solid var(--cyan);
  border-radius: 0 4px 4px 0;
  font-family: var(--f-body); font-size: 13.5px;
  color: var(--bone-dim);
  line-height: 1.55;
}
.int-list li:nth-child(2n){ border-left-color: var(--magenta); }
.int-list li b{ color: var(--bone); font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ============ FOOTER ============ */
.foot{
  max-width: var(--container);
  margin: clamp(20px, 4vw, 40px) auto 30px;
  padding: 24px var(--pad-x) 0;
  border-top: 1px solid var(--arena-4);
}
.foot-row{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
}
.foot-name b{ font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; color: var(--bone); text-transform: uppercase; }
.foot-comms{
  display: inline-flex; align-items: center; gap: 18px;
}
.foot-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--bone-dim);
  letter-spacing: 0.04em;
  transition: color 160ms;
}
.foot-link:hover{ color: var(--cyan); }
.foot-link svg{ width: 18px; height: 18px; }
.foot-disc{
  font-family: var(--f-body); font-size: 12px;
  color: var(--bone-fade);
  line-height: 1.6;
  margin: 0; max-width: 940px;
}

/* ============ TOAST ============ */
.toast{
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 24px);
  padding: 10px 18px;
  background: var(--arena-3);
  border: 1px solid var(--cyan);
  border-radius: 3px;
  color: var(--bone);
  font-family: var(--f-mono); font-size: 13px;
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
  z-index: 80;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(92,242,255,0.32);
}
.toast.is-on{ transform: translate(-50%, 0); opacity: 1; }