@font-face {
    font-family: 'Expansiva';
    src: 
     url('../_incl/fonts/Expansiva-Bold.otf') format('truetype');
    font-style: normal;
  }

  @font-face {
    font-family: 'Lemon Milk';
    src: 
     url('../_incl/fonts/LemonMilk-Regular.otf') format('truetype');
    font-style: normal;
  }
 


/* reset and full-screen */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Lemon Milk";
    background: url('../_incl/bg.jpg');
    background-size: cover;
    color: aqua;
    user-select: none;
}

/* scrollable area */
.scroll-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

h1 {
    font-family: 'Expansiva', sans-serif;
    text-align: center;
    margin: 0px;
    font-size: 1.5em;
    text-transform: uppercase;
    z-index:5;
}

.title {
    font-family: 'Expansiva', sans-serif !important;
    color: greenyellow;
}

/* 5-column grid */
.grid {
    display: grid;
    align-items: start; 
    grid-auto-rows: 140px; /* each row is exactly 80px high */
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
    margin:0px 5px;
    width:auto;
    padding:0 30px;
    
}

/* each leaderboard “cell” */
.cell {
    border:4px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 3px 30px rgba(0, 0, 0, 0.7);
    margin:5px;
    overflow:visible;
    backdrop-filter: blur(10px);
    min-width:100px;
    max-width:200px;
    height: 100px;
    cursor: pointer;
}

.cell:hover {
    border:4px solid rgba(255, 255, 255, 0.3);
}

.cell .rank {
    font-family: 'Expansiva', sans-serif;
    font-size: 1.7em;
    font-weight: bold;
    margin:5px;
}

.cell .name {
    margin: 4px 0;
    font-size: 0.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:white;
}

.cell.current {
    border:4px solid aqua;
    box-shadow: 0px 0px 15px aqua;
}

.cell .xp {
    font-size: 18px;
    margin: 2px 0;
    color:rgb(255, 0, 174);
}
.xp img {    vertical-align: middle;}

.cell .level {
    font-size: 22px;
    margin: 2px 0;
    color: white;
    position: absolute;
    margin-left: 12px;
    text-shadow:0px 0px 11px black;
}

h1.title {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align:left;
    padding: 5px 40px;
}

.cell.selected {
    border:4px solid coral;
    box-shadow: 0px 0px 15px coral inset;
    box-shadow: 0px 0px 100px 50px black;
    transform:scale(1.2);
    z-index: 10;
}

.info {position:relative;float:right;margin-top:-25px;margin-right:30px;
    height:0px;color:aqua;opacity:0.8; text-transform: uppercase;}
.btn {padding:5px; border-radius:15px; font-size:12px;
    background:coral;color:black;box-shadow:0px 0px 11px coral;
    text-decoration: none;width: 100px; margin: auto; letter-spacing: 1px;}
.btn:hover {color:white;box-shadow:0px 0px 11px white;}
.cell .visit {display:none; text-align:center; margin-top:5px;}
.cell.selected .visit {display:block;}