:root{
  --purple: #6c4cff;
  --accent: #a68dff;
  --blue: #4c9dff;
  --nav-h: 64px;
  --max-w: 1100px;
}

/* Reset & page basics */
*{box-sizing:border-box}
html{
  height:100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h); /* keeps anchor jumps below navbar */
}
body{
    min-height: 100vh; /* ensures full viewport height */
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #3b0066 0%, #120014 50%, #000000 100%);
  background-attachment: fixed; /* keeps gradient covering whole screen */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h); /* pushes all content below fixed nav */
  overflow-y: auto;
}

.logo {
    height: 50px; /* adjust size */
    margin-right: 20px;
}
/* Top translucent nav */
nav{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.18);  /* reduced opacity for translucency */
  backdrop-filter: blur(6px);
  z-index:1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

nav ul{
  list-style:none;
  margin:0;
  padding:0 20px;
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:center;
}

nav a{
  color: #fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  transition: transform .16s ease, color .18s ease, background .18s ease;
}

nav a:hover{
  transform: translateY(-3px);
  color: var(--accent);
  background: rgba(255,255,255,0.03);
}

nav a.active{
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(166,141,255,0.06);
}

/* Main area: centered but not hidden behind nav */
main{
  /* removed margin-top: var(--nav-h); (no longer needed) */
  flex: 1;                       /* take remaining height and allow scrolling */
  display:flex;
  align-items:center;            /* vertical centering when content smaller than viewport */
  justify-content:center;        /* horizontal centering */
  padding: 40px 20px;
  text-align:center;
  width:100%;
  box-sizing:border-box;
  
}

/* central container */
.container{
  width:100%;
  max-width: var(--max-w);
  margin:0 auto;
}

/* Home / About fonts & button */
h1{
  margin:0 0 12px 0;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
}
.lead{
  color: rgba(255,255,255,0.88);
  line-height:1.5;
  font-size: 1.05rem;
  margin-bottom:18px;
}
.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  background: linear-gradient(135deg, #6a0dad, #000000); /* purple-black */
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 10px 26px rgba(60,24,120,0.24);
  transition: transform .16s ease;
}
.btn:hover{ transform: translateY(-5px); }

/* PLAYERS GRID - centered layout */
.players-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items:start;
  justify-items:center;
  padding: 8px;
}

/* Player card */
.player-card{
  width:220px;
  height:140px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  cursor:pointer;
  text-align:center;
}
.player-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.6);
}

/* name & role */
.player-name{ font-weight:700; font-size:1.03rem; margin-bottom:6px; }
.player-role{ font-size:0.88rem; color: rgba(255,255,255,0.88); }

/* handle: slide up animation */
.player-handle{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  padding:8px 0;
  transform: translateY(110%);   /* hidden below */
  opacity:0;
  transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s;
  font-weight:700;
  color: var(--accent);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
}
.player-card:hover .player-handle{
  transform: translateY(0);
  opacity:1;
}

/* MATCH HISTORY */
.match-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  width:100%;
  padding: 8px;
}

.match-card{
  width:100%;
  max-width:760px;
  background: rgba(255,255,255,0.03);
  border-radius:12px;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  transition: transform .18s ease;
}
.match-card:hover{ transform: translateY(-6px) }

/* text & result indicator */
.match-text{ font-weight:700; color: #fff; }
.result{
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  color:#fff;
  min-width:48px;
  text-align:center;
}
.result.win{ background: linear-gradient(90deg,var(--blue), rgba(76,157,255,0.9)); }
.result.loss{ background: linear-gradient(90deg,#ff4c4c, rgba(255,76,76,0.9)); }

/* Responsive tweaks */
@media (max-width:520px){
  .player-card{ width:100%; max-width:420px; height:120px; }
  nav ul{ gap:12px }
  .btn{ padding:10px 14px }
}