/* =================================================
TITLE
================================================= */

.ranking-title{
text-align:center;
margin-bottom:60px;
font-size:44px;
letter-spacing:3px;
background:linear-gradient(90deg,#fff,#caa65a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =================================================
SUBTITLE
================================================= */

.ranking-subtitle{
margin-top:70px;
margin-bottom:25px;
text-align:center;
font-size:28px;
color:#caa65a;
}

/* =================================================
PODIUM
================================================= */

.ranking-podium{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-bottom:70px;
}

.podium-player{
position:relative;
padding:40px 60px;
border-radius:18px;
text-align:center;
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 25px 70px rgba(0,0,0,.8);
animation:floatPodium 5s ease-in-out infinite;
}

.podium-player.top{
background:rgba(20,24,55,.9);
}

.podium-player.top::before{
content:"";
position:absolute;
inset:-3px;
border-radius:18px;
background:linear-gradient(45deg,#caa65a,#ffd700,#caa65a);
filter:blur(20px);
opacity:.7;
z-index:-1;
}

/* =================================================
TEXT
================================================= */

.player-name{
font-size:24px;
font-weight:bold;
letter-spacing:2px;
color:#fff;
}

.player-stat{
margin-top:8px;
color:#aaa;
}

/* =================================================
RANKING BOX
================================================= */

.ranking-wrapper{
background:rgba(18,20,40,.85);
border-radius:14px;
padding:30px;
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(10px);

max-height:600px;
overflow-y:auto;
overflow-x:auto;

margin-bottom:40px;
width:100%;

-webkit-overflow-scrolling: touch;
}

/* DESKTOP – NIE FULL WIDTH */
@media(min-width:900px){

.ranking-wrapper{
max-width:900px;
margin:0 auto 40px auto;
}

}

/* =================================================
TABLE
================================================= */

.ranking-wrapper table{
width:100% !important;
border-collapse:collapse;
}

.ranking-wrapper th,
.ranking-wrapper td{
padding:12px;
text-align:center;
}

/* =================================================
PLACEHOLDER
================================================= */

.ranking-placeholder{
text-align:center;
padding:40px;
color:#888;
font-size:16px;
border:2px dashed rgba(255,255,255,.15);
border-radius:10px;
background:rgba(0,0,0,.25);
}

/* =================================================
ANIMATIONS
================================================= */

@keyframes floatPodium{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

/* =================================================
MOBILE
================================================= */

@media(max-width:900px){

.ranking-title{
font-size:32px;
}

.podium-player{
padding:20px;
width:100%;
}

.ranking-wrapper{
padding:15px;
max-height:none;
}

/* KLUCZ – NIE ZA DUŻA SZEROKOŚĆ */
.ranking-wrapper table{
min-width:480px;
}

}

/* =================================================
SCROLLBAR
================================================= */

.ranking-wrapper::-webkit-scrollbar{
width:8px;
height:8px;
}

.ranking-wrapper::-webkit-scrollbar-thumb{
background:#caa65a;
border-radius:10px;
}

.ranking-wrapper::-webkit-scrollbar-track{
background:rgba(0,0,0,.3);
}

/* =================================================
GLOBAL
================================================= */

html, body{
max-width:100%;
width:100%;
/* brak overflow-x:hidden */
}

/* ===============================
MOBILE REAL FIX (NO ZOOM + SCROLL)
=============================== */

@media(max-width:900px){

/* wrapper musi pozwolić scrollować */
.ranking-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
}

/* KLUCZ: NIE zmuszamy tabeli do dużej szerokości */
.ranking-wrapper table{
    width:auto !important;
    min-width:100%;
}

/* tekst może się łamać */
.ranking-wrapper td,
.ranking-wrapper th{
    white-space:normal !important;
}

/* padding mniejszy */
.ranking-wrapper{
    padding:15px;
}

}

/* ===============================
GLOBAL FIX
=============================== */

/* USUŃ blokowanie scrolla */
html, body{
    max-width:100%;
}