:root {

  --color-contrast-a: #f0f0f0;   
  --color-contrast-b: #0a0a0a;   
  --color-active: #dd2211;
  --surface: #0a0a0a44;   
  --dim: #0a0a0a99; 

  --font-heading: "DM Serif Text";
  --font-body: -apple-system, monospace;

  --t-screen:  400ms;
  --t-panel:   500ms;
  --t-fade:    350ms;
  --t-hover:   1120ms;
  --t-row:     450ms;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-contrast-a);
  color: var(--color-contrast-b);
  font-family: var(--font-body);
  overflow: hidden;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
}

button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 28px;
  border: none;
  background: var(--color-contrast-b);
  color: var(--color-contrast-a);
  cursor: pointer;
  transition: opacity var(--t-hover) ease;
}
button:hover  { opacity: 0.85; }
button:active { opacity: 0.7;  }


.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px); 
  transition:
    opacity var(--t-screen) ease,
    transform var(--t-screen) ease;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* -- NAV ------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-screen) ease;
}

.nav.visible { opacity: 1; pointer-events: all; }

.nav__logo { font-size: 15px; font-weight: 700; letter-spacing: -0.5px; }

.nav__links { display: flex; gap: 4px; }

.nav__link {
  font-size: 12px;
  color: var(--dim);
  background: none;
  border: 1px solid transparent;
  padding: 5px 12px;
  transition: border-color var(--t-hover) ease;
  border-color: var(--surface);
}

.nav__link:hover { color: var(--color-contrast-b); }


/* -- INTRO SCREEN ------------------------- */
.intro {
  max-width: 520px;
  margin: auto;
  padding: 16px;
}

.intro__title {
  font-size: clamp(60px, 8vw, 70px);
}


/* -- BATTLE SCREEN ------------------------- */
.battle {
  overflow: hidden;
}

.battle__arena {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
}
.battle__arena.is-portrait {
  flex-direction: column;
}

/* VS badge */
.battle__vs {
  position: relative;
  z-index: 1;
  pointer-events: none;
  background: var(--color-contrast-a);
  border-left: 1px solid currentColor;
  border-top: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-contrast-b);
  flex: 0;
  transition: .2s all;
}
.battle__vs-circle {
  position: absolute;
  border: 1px solid currentColor;
  color: var(--color-contrast-b);
  background-color: var(--color-contrast-a);
  margin-bottom: 10vh;
  width: 22ch;
  text-align: center;
  padding: 4px 8px;
}
.battle__arena.animating .battle__vs  {
  display: none;
}
.battle__arena.is-portrait {
  .battle__vs {
    align-items: center;
    border-left: none;
    border-top: 1px solid var(--color-contrast-b);
  }
  .battle__vs-circle {
    margin-bottom: 0;
  }
}

                           .battle__card { max-width: 30vw; }
.battle__arena.is-portrait .battle__card { max-width: 90vw; }


.battle__panel {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--color-contrast-b);
  background-color: var(--color-contrast-a);
  transition:
    flex var(--t-panel) ease;
}
.battle__arena.is-portrait .battle__panel--left  { border-right: none; }
.battle__arena.is-portrait .battle__panel--right { border-left:  none; }

@media (hover: hover) and (pointer: fine) {
  .battle__panel:hover { flex: 5;}
}

/* Card content */
.battle__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
}

.battle__name     { font-size: clamp(20px, 12vw, 76px); font-family: var(--font-heading); font-weight: 700; line-height: 0.85;}
.battle__description { font-size: 10px; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; }

.battle__arena.animating .battle__panel { pointer-events: none; }

.battle__panel.winner { flex: 10; background-color: var(--color-active); color: var(--color-contrast-a); border-color: var(--color-active);}
.battle__panel.loser  { flex: 0;  filter: brightness(0.15); }

.battle__fadeout {
  position: fixed;
  inset: 0;
  background: var(--color-contrast-a);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity var(--t-fade) ease var(--t-fade);               /* ANIM: black fade */
}

.battle__fadeout.visible { opacity: 1; }


/* -- RANKINGS SCREEN ------------------------- */
.rankings {
  padding: 20px max(20px, calc((100vw - 760px) / 2));
  overflow-y: auto;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
}

.rankings__header { margin-bottom: 24px; text-align: center; }

.rankings__title { font-size: clamp(28px, 5vw, 48px); font-weight: 700; letter-spacing: -1px; }
.rankings__subtitle { font-size: 11px; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.rankings__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4rem; }

.rankings__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  animation: row-in var(--t-row) ease both;
  border-bottom: 1px solid var(--surface);
}

/* ANIM: stagger — edit ms or remove for simultaneous load */
.rankings__row:nth-child(1)  { animation-delay:  0ms; }
.rankings__row:nth-child(2)  { animation-delay: 25ms; }
.rankings__row:nth-child(3)  { animation-delay: 50ms; }
.rankings__row:nth-child(4)  { animation-delay: 75ms; }
.rankings__row:nth-child(5)  { animation-delay:100ms; }
.rankings__row:nth-child(n+6){ animation-delay:125ms; }

/* ANIM: row slide-in keyframe */
@keyframes row-in {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.rankings__rank { font-size: 14px; color: var(--dim); width: 28px; text-align: right; flex-shrink: 0; }

.rankings__info  { flex: 1; min-width: 0; }
.rankings__name  { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -0.3px;line-height: 1.4;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loading { font-size: 11px; color: var(--dim); letter-spacing: 2px; display: flex; gap: 6px; align-items: center; }


/* -- RESPONSIVE ------------------------- */
@media (max-width: 500px) {
  .rankings__stats { gap: 10px; }
  .rankings__bar-wrap { display: none; }
}