/* styles.css */
/* Import a clean system font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
:root {
  /* Color palette */
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-primary: #4f46e5;
  --color-text: #111827;
  --color-muted: #6b7280;
  --radius-normal: 0.5rem;
  --spacing-base: 1rem;
  --shadow-light: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background-color: var(--color-bg); color: var(--color-text); font-family: 'Inter', sans-serif; line-height: 1.5; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* Layout */
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: var(--spacing-base); }

/* Navigation */
nav { background-color: var(--color-surface); box-shadow: var(--shadow-light); border-radius: var(--radius-normal); padding: var(--spacing-base); margin-bottom: var(--spacing-base); }
nav ul { display: flex; justify-content: center; gap: calc(var(--spacing-base) * 1.5); list-style: none; align-items: center; }
nav a { color: var(--color-muted); text-decoration: none; font-weight: 500; position: relative; padding-bottom: 0.25rem; transition: color 0.2s; }
nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width 0.3s; }
nav a:hover { color: var(--color-primary); }
nav a:hover::after, nav a.active::after { width: 100%; }

/* Headings */
h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: calc(var(--spacing-base) / 2); position: relative; padding-bottom: 0.5rem; text-align: center; }
h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4rem; height: 4px; background-color: var(--color-primary); border-radius: 2px; }
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: calc(var(--spacing-base) / 2); color: var(--color-primary); }

/* Link list */
ul.link-list { list-style: none; margin-top: var(--spacing-base); }
ul.link-list li { margin-bottom: calc(var(--spacing-base) / 2); }
ul.link-list a { display: block; padding: calc(var(--spacing-base) * 0.75); background-color: var(--color-surface); border-radius: var(--radius-normal); box-shadow: var(--shadow-light); text-decoration: none; color: var(--color-text); transition: transform 0.1s, box-shadow 0.1s; }
ul.link-list a:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

/* Chart container */
.chart-container { background-color: var(--color-surface); border-radius: var(--radius-normal); box-shadow: var(--shadow-light); padding: var(--spacing-base); margin-top: var(--spacing-base); }

/* Back link */
a.back-link { display: inline-block; margin-bottom: var(--spacing-base); color: var(--color-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.2s; }
a.back-link:hover { color: var(--color-primary); }

/* Latest News */
.latest-news { background-color: var(--color-surface); padding: var(--spacing-base); border-radius: var(--radius-normal); box-shadow: var(--shadow-light); margin-bottom: var(--spacing-base); }
.latest-news h2 { margin-bottom: calc(var(--spacing-base) / 2); }
.news-image { width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: var(--radius-normal); margin-bottom: calc(var(--spacing-base) / 2); }

/* Player Card */
.player-card { background-color: var(--color-surface); border-radius: var(--radius-normal); box-shadow: var(--shadow-light); padding: var(--spacing-base); margin-top: var(--spacing-base); }
.player-card__header { display: flex; gap: var(--spacing-base); align-items: center; margin-bottom: var(--spacing-base); }
/* ↑ Updated to match Compare‑popup sizing ↓ */
.player-card__avatar {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-normal);
}
.player-card__info .player-name { font-size: 2rem; margin-bottom: calc(var(--spacing-base) / 4); }
.player-details { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.player-details li { font-size: 0.875rem; }
.player-card__stats { display: flex; gap: var(--spacing-base); justify-content: space-around; margin-bottom: var(--spacing-base); }
.stat { text-align: center; }
.stat-label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; }
.player-card__attributes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--spacing-base); }
.attribute { text-align: center; }
.attr-label { display: block; font-size: 0.75rem; margin-bottom: 0.25rem; }
.attr-value { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--radius-normal); background-color: var(--color-bg); font-weight: 600; }

/* … rest of your CSS unchanged … */