:root {
    --color-bg: #0c1118;
    --color-text: #cad3f5;
    --color-header-bg: #24273a;
    --color-border: #18202a;
    --color-tab-bg: #494d64;
    --color-active-tab-bg: #8aadf4;
    --gold: #EFBF04;
    --silver: #C4C4C4;
    --bronze: #CE8946;
}


body {
    font-family: Arial, sans-serif;
    margin:0;
    padding-top:100px;
    background-color: var(--color-bg);
    color: var(--color-text);
}


.header {
    position: fixed;
    top:0;
    left:50%;
    transform: translateX(-50%);
    display:flex;
    justify-content:space-between;
    align-items:center;
    width: calc(100% - 80px);
    max-width: 1100px;
    background-color: var(--color-header-bg);
    border: 3px solid var(--color-border);
    border-radius: 15px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index:1000;
}


.header img.eaglercraft-image { height:60px; }


.discord-button {
    display:flex;
    align-items:center;
    gap:8px;
    background-color: #7289da;
    border:none;
    border-radius:8px;
    padding:6px 12px;
    cursor:pointer;
}


.discord-button img { width:24px; height:24px; }
.discord-text { color:#fff; font-size:16px; }


.container {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    padding:20px;
}


#buttons { display:flex; gap:5px; overflow-x:auto; margin-bottom:20px; }
.button {
    display:flex; align-items:center; gap:6px;
    padding:6px 12px; background-color:var(--color-tab-bg);
    color:var(--color-text); border:2px solid var(--color-border);
    border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; white-space:nowrap;
}
.button.active { background-color: var(--color-active-tab-bg); color:#1e1e2f; font-weight:bold; }


.tier-container {
    display:flex; flex-direction:column; gap:10px;
    width:100%; max-width:1050px; background-color:#0f141c;
    padding:20px; border:3px solid var(--color-border); border-radius:10px; margin-bottom:20px;
}


.player {
    display: grid;
    grid-template-columns: 60px 250px 110px auto; /* Rank | Name+Platform | Points | Tiers */
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #1e1e2f;
    border-radius: 8px;
    transition: all 0.2s ease; /* smooth animation */
    cursor: pointer;
}


.player:hover {
    transform: translateX(-5px); /* moves left slightly */
    background-color: #2a2e42;   /* slightly lighter background */
}


.rank-wrapper { position:relative; width:60px; height:40px; flex-shrink:0; }
.player-rank {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:bold; color:#1e1e2f; z-index:2;
}
.rank-bg { position:absolute; inset:0; clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); }
.rank-bg.gold { background-color: var(--gold); }
.rank-bg.silver { background-color: var(--silver); }
.rank-bg.bronze { background-color: var(--bronze); }


.player-info { flex:1; display:flex; justify-content:space-between; align-items:center; }
.player-points { width:110px; text-align:center; font-weight:bold; }


.game-info { display:flex; gap:6px; flex-wrap:wrap; }
.tier-text { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; border-radius:6px; background-color:#373a4c; min-width:46px; }
.tier-text img { width:20px; height:20px; }
.tier-label { font-size:0.7rem; font-weight:bold; padding:2px 4px; border-radius:4px; }


.overall-header { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:10px; }
.info-container { position:relative; }


.info-button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-right: 3rem;
    display: inline-block;
    -webkit-mask: url('images/info.png') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('images/info.png') no-repeat center;
    mask-size: contain;
    background-color: var(--color-text);
}


.info-box {
    position: absolute;
    top: 30px;
    right: 75px;
    width: 300px;
    background: #24273a;
    border: 2px solid #18202a;
    border-radius: 8px;
    padding: 10px;
    display: none;
    flex-direction: column;
    color: var(--color-text);
    z-index: 1000;
}


.info-tabs { display:flex; margin-bottom:8px; gap:4px; }
.info-tab { flex:1; padding:4px; background:var(--color-tab-bg); border:none; border-radius:4px; cursor:pointer; color:var(--color-text); }
.info-tab.active { background:var(--color-active-tab-bg); color:#1e1e2f; }
.info-content { display:flex; flex-direction:column; gap:6px; }
.info-row { display:flex; align-items:center; gap:6px; }
.info-row img { width:20px; height:20px; }


.player-search {
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 2px solid var(--color-border);
    background-color: #1e1e2f;
    color: var(--color-text);
    outline: none;
    font-size: 14px;
    width: 180px;
}


.player-search::placeholder {
    color: #8a8fa8;
}


.player-search:focus {
    border-color: var(--color-active-tab-bg);
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subtiers-button {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0px 4px;
    height: 36px;

    border: 2px solid #ffffff;
    border-radius: 8px;
    background: transparent;

    color: #ffffff;
    font-size: 16px;
    text-decoration: none;

    cursor: pointer;
    transition: all 0.2s ease;
}

.subtiers-button:hover {
    background-color: #ffffff;
    color: #1e1e2f;
    transform: translateY(-1px);
}

/* Player row smoothness */
.player {
    transition: background-color 0.25s ease, transform 0.18s ease;
}

/* Slight lift + highlight on hover */
.player:hover {
    background-color: #24243a;
    transform: translateY(-1px);
}

/* Player name default */
.player-name {
    color: #cad3f5;
    transition: color 0.25s ease, filter 0.25s ease;
}

/* Gradient appears ONLY when hovering the player box */
.player:hover .player-name.has-gradient {
    background: var(--name-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: brightness(1.05);
}

/* Optional subtle glow (very tasteful) */
.player:hover .player-name.has-gradient {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
}