@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#04090b;
  --panel:#071013;
  --panel-soft:#0a1518;
  --line:rgba(127,184,187,.17);
  --line-strong:rgba(15,194,186,.35);
  --accent:#11c4bc;
  --accent-2:#087f7a;
  --text:#f2f7f7;
  --muted:#87979a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0%,rgba(15,194,186,.07),transparent 32%),
    var(--bg);
  font-family:Manrope,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
svg{
  display:block;
  width:1.25em;
  height:1.25em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.site-header{
  height:76px;
  padding:0 3.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:30;
  background:rgba(2,7,9,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.logo{
  font-family:Cinzel,serif;
  font-size:27px;
  font-weight:600;
  letter-spacing:1.6px;
}
.logo span,.hero h1 span{color:var(--accent)}
.main-nav{display:flex;gap:42px;align-items:center}
.main-nav a{
  position:relative;
  padding:29px 0 26px;
  color:#aab5b7;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  transition:.2s;
}
.main-nav a:hover,.main-nav a.active{color:var(--accent)}
.main-nav a.active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.menu-button{display:none;background:none;border:0;padding:8px}
.menu-button span{display:block;width:25px;height:2px;background:white;margin:5px}

.hero{
  min-height:560px;
  position:relative;
  overflow:hidden;
  padding:72px 4vw 58px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,#03090c 0%,rgba(3,9,12,.98) 34%,rgba(3,9,12,.72) 54%,rgba(3,9,12,.24) 78%,rgba(3,9,12,.34) 100%),
    radial-gradient(circle at 72% 44%,rgba(11,78,79,.10),transparent 35%),
    linear-gradient(0deg,#04090b 0%,transparent 32%);
}
.hero-art{
  position:absolute;
  z-index:1;
  top:0;
  right:4%;
  bottom:0;
  width:58%;
  background-image:url('warrior-bg.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  filter:saturate(.96) contrast(1.04) brightness(.88);
  opacity:.94;
}
.hero-vignette{
  position:absolute;
  z-index:2;
  inset:0;
  background:
    radial-gradient(circle at 72% 42%,transparent 0 25%,rgba(2,7,9,.06) 47%,rgba(2,7,9,.34) 84%),
    linear-gradient(0deg,rgba(4,9,11,.76),transparent 28%);
}
.hero-content{
  width:min(750px,58%);
  position:relative;
  z-index:5;
}
.server-type{
  margin:0 0 18px;
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:3.4px;
}
.hero h1{
  margin:0;
  font-family:Cinzel,serif;
  font-size:clamp(58px,6.4vw,96px);
  line-height:.95;
  letter-spacing:1px;
  font-weight:500;
}
.title-line{
  width:480px;
  max-width:85%;
  height:22px;
  display:flex;
  align-items:center;
  margin:15px 0 15px;
}
.title-line i{height:1px;background:var(--accent);flex:1}
.title-line b{
  width:10px;height:10px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
  margin:0 9px;
}
.hero h2{
  margin:0 0 11px;
  font-family:'Play',Manrope,Arial,sans-serif;
  text-transform:uppercase;
  font-size:27px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:1.6px;
  color:#f1f7f7;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero-subtitle{
  margin:0;
  color:#a7b3b5;
  font-size:16px;
  font-weight:500;
}
.hero-buttons{
  display:flex;
  gap:18px;
  margin-top:31px;
}
.button{
  min-width:250px;
  min-height:52px;
  padding:15px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-align:center;
  border:1px solid rgba(168,196,199,.28);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:1.35px;
  font-weight:700;
  transition:.22s;
}
.button svg{font-size:17px}
.button-primary{
  color:#001012;
  background:linear-gradient(180deg,#1bcac2,#0b9994);
  border-color:#20d4cb;
  box-shadow:inset 0 1px rgba(255,255,255,.15);
}
.button-dark{
  color:#eaf4f4;
  background:rgba(3,9,11,.75);
  backdrop-filter:blur(7px);
}
.button:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.button-primary:hover{
  box-shadow:0 12px 32px rgba(15,194,186,.18),inset 0 1px rgba(255,255,255,.18);
}

.server-status{
  width:93%;
  margin:22px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:1.35fr repeat(4,1fr);
  align-items:stretch;
  position:relative;
  z-index:8;
  background:
    linear-gradient(180deg,rgba(8,18,21,.98),rgba(5,12,15,.98));
  border:1px solid var(--line);
  box-shadow:0 16px 42px rgba(0,0,0,.18);
  backdrop-filter:blur(9px);
}
.status-title{
  min-height:82px;
  padding:0 28px;
  display:flex;
  align-items:center;
  color:var(--accent);
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  border-right:1px solid var(--line);
}
.online-dot{
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  background:#1ce775;
  margin-right:10px;
  box-shadow:0 0 14px #1ce775;
}
.status-row{
  min-height:82px;
  padding:16px 24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  border-right:1px solid var(--line);
  border-bottom:0;
}
.status-row:last-child{
  border-right:0;
}
.status-row span{
  color:#7f8e91;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.status-row strong{
  color:#f2f7f7;
  font-size:20px;
  font-weight:600;
  letter-spacing:.3px;
}

.action-grid{
  width:93%;
  margin:30px auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.action-card{
  min-height:245px;
  padding:40px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(12,31,34,.92),rgba(6,13,16,.98) 70%);
  border:1px solid var(--line);
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.action-card:before{
  content:"";
  position:absolute;
  left:0;
  top:36px;
  width:3px;
  height:74px;
  background:linear-gradient(180deg,var(--accent),rgba(15,194,186,.12));
  box-shadow:0 0 18px rgba(15,194,186,.22);
}
.action-card:after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-100px;
  width:260px;
  height:260px;
  border:1px solid rgba(15,194,186,.05);
  transform:rotate(45deg);
}
.action-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.action-card h2{
  margin:0;
  font-family:'Russo One','Play',Manrope,Arial,sans-serif;
  font-size:27px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:.35px;
  color:#f2f7f7;
  text-shadow:0 2px 18px rgba(0,0,0,.38);
  position:relative;
  z-index:2;
}
.action-description{
  max-width:620px;
  margin:17px 0 26px;
  color:#a8b7ba;
  font-family:Manrope,Arial,sans-serif;
  font-size:13px;
  line-height:1.8;
  font-weight:500;
  letter-spacing:.08px;
  position:relative;
  z-index:2;
}
.small-button{
  min-width:230px;
  margin:0;
  position:relative;
  z-index:2;
}

.rating-section{
  width:93%;
  margin:0 auto 34px;
  padding:30px;
  background:
    linear-gradient(180deg,rgba(11,22,25,.96),rgba(6,13,16,.96));
  border:1px solid var(--line);
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:25px;
}
.rating-all{
  padding:12px 16px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
  border:1px solid var(--line);
  text-transform:uppercase;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  transition:.2s;
}
.rating-all svg{width:14px;height:14px}
.rating-all:hover{border-color:var(--accent);background:rgba(15,194,186,.05)}
.rating-table{
  overflow:hidden;
  border:1px solid var(--line);
}
.rating-head,.rating-row{
  display:grid;
  grid-template-columns:80px 1.5fr 1fr 1fr 130px 115px;
  align-items:center;
  gap:15px;
}
.rating-head{
  min-height:48px;
  padding:0 22px;
  color:#758487;
  background:#050b0d;
  text-transform:uppercase;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
}
.rating-row{
  min-height:72px;
  padding:0 22px;
  border-top:1px solid var(--line);
  transition:.18s;
}
.rating-row:hover{background:rgba(15,194,186,.035)}
.place{font-size:19px;font-weight:600}
.gold{color:#d7b45e}
.silver{color:#bfc7ca}
.bronze{color:#b9784d}
.player{
  display:flex;
  align-items:center;
  gap:12px;
}
.player strong{
  font-size:12px;
  font-weight:700;
}
.avatar{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f1c776;
  background:radial-gradient(circle at 35% 30%,#68452b,#2b1a11);
  border:1px solid #aa7348;
  font-family:Cinzel,serif;
  font-weight:700;
}
.rating-row>span{
  color:#91a0a3;
  font-size:11px;
  font-weight:500;
}
.rating-row em{
  text-align:right;
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.3px;
}

.site-footer{
  width:93%;
  min-height:70px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#607073;
  font-size:10px;
  border-top:1px solid var(--line);
}

@media(max-width:1000px){
  .main-nav{gap:24px}
  .server-status{width:235px}
  .hero-content{width:62%}
  .button{min-width:210px}
}
@media(max-width:850px){
  .site-header{height:66px}
  .menu-button{display:block}
  .main-nav{
    display:none;
    position:absolute;
    left:0;right:0;top:66px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 20px;
    background:#050a0c;
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:13px}
  .main-nav a.active:after{display:none}
  .hero{
    min-height:760px;
    padding:55px 25px 35px;
    align-items:flex-start;
  }
  .hero-art{background-position:64% top;background-size:auto 100%;opacity:.72}
  .hero-content{width:100%}
  
  .action-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .rating-section{padding:18px}
  .rating-head{display:none}
  .rating-row{
    grid-template-columns:45px 1fr auto;
    gap:10px;
    padding:14px;
  }
  .rating-row>span:not(.elo-rank){display:none}
  .section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:560px){
  .logo{font-size:22px}
  .hero{min-height:820px}
  .server-type{font-size:10px;letter-spacing:2px}
  .hero h1{font-size:54px}
  .hero h2{font-size:20px}
  .hero-subtitle{font-size:14px}
  .hero-buttons{flex-direction:column}
  .button{width:100%;min-width:0}
  .action-card{padding:28px 26px}
  .action-footer{align-items:flex-start;flex-direction:column}
  .small-button{width:100%;min-width:0}
  .action-card h2,.section-heading h2{font-size:23px}
  .site-footer{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:5px;
  }
}


}
@media(max-width:850px){
  .action-grid{grid-template-columns:1fr}
  .hero-art{
    right:-13%;
    width:90%;
    background-size:auto 80%;
    background-position:center 20%;
  }
}

@media(max-width:850px){
  .action-grid{grid-template-columns:1fr}
  .hero-art{
    background-position:63% top;
    background-size:auto 100%;
  }
}
@media(max-width:560px){
  .action-card{padding:30px 26px}
  .action-card h2{font-size:24px}
  .small-button{width:100%;min-width:0}
}



@media(max-width:1100px){
  .hero-art{
    right:0;
    width:55%;
    background-size:contain;
    background-position:center center;
  }
}
@media(max-width:850px){
  .hero-art{
    top:20px;
    right:-12%;
    bottom:auto;
    width:92%;
    height:560px;
    background-size:contain;
    background-position:center top;
    opacity:.58;
  }
  .hero h2{
    font-size:22px;
    letter-spacing:1.1px;
  }
}
@media(max-width:560px){
  .hero-art{
    right:-24%;
    width:120%;
    height:500px;
    opacity:.48;
  }
  .hero h2{
    font-size:19px;
    letter-spacing:.8px;
  }
}

@media(max-width:900px){
  .server-status{
    grid-template-columns:repeat(2,1fr);
  }
  .status-title{
    grid-column:1 / -1;
    min-height:64px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .status-row{
    min-height:68px;
    border-bottom:1px solid var(--line);
  }
  .status-row:nth-of-type(2n){
    border-right:0;
  }
}
@media(max-width:560px){
  .server-status{
    grid-template-columns:1fr;
  }
  .status-title,
  .status-row{
    min-height:60px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .status-row:last-child{
    border-bottom:0;
  }
}

@media(max-width:560px){
  .action-card h2{
    font-size:23px;
    line-height:1.25;
  }
  .action-description{
    font-size:12px;
    line-height:1.75;
  }
}


/* ELO level badges — colors sampled from the supplied reference image. */
.elo-levels{
  display:grid;
  grid-template-columns:repeat(10,minmax(72px,1fr));
  gap:10px;
  margin:-4px 0 22px;
  padding:18px 16px;
  background:linear-gradient(180deg,#080e11,#050a0c);
  border:1px solid var(--line);
}
.elo-level-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}
.elo-level-item>span:last-child{
  color:var(--level-color);
  font-size:9px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

.level-badge{
  --level-color:#f5f5f5;
  --progress:10;
  width:58px;
  height:58px;
  display:inline-grid;
  place-items:center;
  position:relative;
  flex:0 0 58px;
  color:var(--level-color);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,#25262c 0 37%,#1c1d22 38% 100%);
  box-shadow:
    inset 0 0 0 7px #25262b,
    0 8px 18px rgba(0,0,0,.32);
}
.level-badge svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(135deg);
}
.level-badge circle{
  fill:none;
  stroke-width:7;
  stroke-linecap:butt;
}
.level-track{
  stroke:#303137;
  stroke-dasharray:113 38;
}
.level-progress{
  stroke:var(--level-color);
  stroke-dasharray:calc(var(--progress) * 1.13) 151;
}
.level-badge>b{
  position:relative;
  z-index:2;
  color:var(--level-color);
  font-family:'Russo One','Play',Manrope,sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:400;
  text-shadow:0 2px 6px rgba(0,0,0,.65);
}

.level-white{--level-color:#f5f5f5}
.level-green{--level-color:#1de300}
.level-yellow{--level-color:#ffc903}
.level-orange{--level-color:#ff620a}
.level-red{--level-color:#fe1f02}

.player-level{
  display:flex;
  align-items:center;
  gap:10px;
}
.player-level .level-badge{
  width:42px;
  height:42px;
  flex-basis:42px;
  box-shadow:
    inset 0 0 0 5px #25262b,
    0 5px 14px rgba(0,0,0,.28);
}
.player-level .level-badge circle{
  stroke-width:7;
}
.player-level .level-badge>b{
  font-size:15px;
}
.player-level>strong{
  color:#dce5e6;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.65px;
}

.elo-value{
  text-align:right;
  font-style:normal;
  font-size:15px;
  font-weight:800;
  color:#f3f8f8;
  letter-spacing:.5px;
}
.elo-value:after{
  content:" ELO";
  color:var(--accent);
  font-size:8px;
  font-weight:800;
  letter-spacing:.8px;
}

@media(max-width:1250px){
  .elo-levels{
    grid-template-columns:repeat(5,1fr);
    row-gap:17px;
  }
}
@media(max-width:950px){
  .rating-head{display:none}
  .rating-row{
    grid-template-columns:42px 1fr auto auto;
  }
  .rating-row>span{
    display:none;
  }
}
@media(max-width:680px){
  .elo-levels{
    grid-template-columns:repeat(2,1fr);
  }
  .elo-level-item{
    flex-direction:row;
    justify-content:center;
  }
  .elo-level-item>span:last-child{
    min-width:75px;
    text-align:left;
  }
  .rating-row{
    grid-template-columns:35px 1fr auto;
  }
  .player-level{
    display:none;
  }
  .level-badge{
    width:50px;
    height:50px;
    flex-basis:50px;
  }
  .level-badge>b{font-size:17px}
}

/* V15: only the circular badge and ELO remain in the rating table. */
.player-level{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.player-level>strong{
  display:none;
}

/* V16: ELO имеет тот же цвет, что и соответствующий значок. */
.rating-head > span:last-child{
  text-align:center;
}

.elo-value{
  width:100%;
  display:block;
  justify-self:stretch;
  text-align:center !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
  white-space:nowrap;
}

.elo-value:after{
  color:inherit !important;
  opacity:.82;
}

.elo-white{
  color:#f5f5f5 !important;
  text-shadow:0 0 12px rgba(245,245,245,.18);
}
.elo-green{
  color:#1de300 !important;
  text-shadow:0 0 12px rgba(29,227,0,.25);
}
.elo-yellow{
  color:#ffc903 !important;
  text-shadow:0 0 12px rgba(255,201,3,.23);
}
.elo-orange{
  color:#ff620a !important;
  text-shadow:0 0 12px rgba(255,98,10,.25);
}
.elo-red{
  color:#fe1f02 !important;
  text-shadow:0 0 14px rgba(254,31,2,.28);
}

@media(max-width:1100px){
  .rating-head,
  .rating-row{
    grid-template-columns:70px 1.4fr .9fr .9fr 110px 105px;
  }
}

@media(max-width:950px){
  .elo-value{
    min-width:78px;
    text-align:center !important;
  }
}

/* Dynamic rating: five columns without clan */
.rating-head,
.rating-row {
  grid-template-columns: 70px minmax(180px, 1.5fr) minmax(130px, 1fr) 90px 100px;
}

.level-white {
  --level-color: #ffffff;
}

.elo-white {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255,255,255,.35);
}

/* Иконка игрового класса возле ника */
.class-avatar{
  padding:0;
  overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
}

.class-avatar img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
  image-rendering:auto;
}

/* Увеличенная иконка класса без белого квадрата */
.player .class-avatar{
  width:38px !important;
  height:38px !important;
  min-width:38px;
  border-radius:50%;
  overflow:hidden;
  background:#071015 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 0 10px rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
}

.player .class-avatar img{
  width:48px !important;
  height:48px !important;
  max-width:none !important;
  object-fit:cover;
  border-radius:50%;
  transform:scale(1.18);
}

/* Новые игровые иконки классов */
.player .class-avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px;
  border-radius:50%;
  overflow:hidden;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.player .class-avatar img{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  object-fit:contain;
  transform:none !important;
  border-radius:50%;
}

.player .class-avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px;
  border-radius:50%;
  overflow:hidden;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.player .class-avatar img{
  width:34px !important;
  height:34px !important;
  object-fit:contain;
  border-radius:50%;
  display:block;
}

/* ===== Улучшенное оформление ELO-рейтинга ===== */

.rating-table{
  overflow:hidden;
  border:1px solid rgba(67,160,170,.22);
  background:
    linear-gradient(180deg,rgba(12,25,29,.38),rgba(3,12,15,.16));
}

.rating-head{
  background:rgba(4,15,18,.72);
  border-bottom:1px solid rgba(83,181,190,.20);
}

.rating-head span{
  color:#6e9ca5;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* Общая строка */
.rating-row{
  position:relative;
  min-height:72px;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.rating-row::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:transparent;
}

.rating-row:hover{
  background:rgba(23,108,114,.10);
  box-shadow:inset 0 0 24px rgba(31,174,180,.035);
}

/* Топовые строки */
.rating-row.rank-1{
  background:
    linear-gradient(90deg,rgba(255,190,37,.085),transparent 35%);
}

.rating-row.rank-1::before{
  background:#ffc642;
  box-shadow:0 0 14px rgba(255,198,66,.65);
}

.rating-row.rank-2{
  background:
    linear-gradient(90deg,rgba(180,215,235,.055),transparent 32%);
}

.rating-row.rank-2::before{
  background:#b9d8e7;
  box-shadow:0 0 12px rgba(185,216,231,.42);
}

.rating-row.rank-3{
  background:
    linear-gradient(90deg,rgba(205,122,67,.06),transparent 32%);
}

.rating-row.rank-3::before{
  background:#cb7c46;
  box-shadow:0 0 12px rgba(203,124,70,.42);
}

/* Место в рейтинге */
.place{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  border-radius:50%;
  color:#d7e8ec;
  font-size:18px;
  font-weight:800;
  line-height:1;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  text-shadow:0 0 10px rgba(255,255,255,.16);
}

.place.gold{
  color:#ffd65a;
  border-color:rgba(255,210,82,.60);
  background:
    radial-gradient(circle at 35% 30%,rgba(255,232,140,.22),rgba(89,55,7,.22));
  box-shadow:
    0 0 14px rgba(255,193,45,.24),
    inset 0 0 8px rgba(255,218,107,.10);
  text-shadow:0 0 10px rgba(255,200,48,.65);
}

.place.silver{
  color:#d9edf7;
  border-color:rgba(196,225,239,.46);
  background:
    radial-gradient(circle at 35% 30%,rgba(222,242,250,.16),rgba(45,65,73,.19));
  box-shadow:0 0 12px rgba(181,221,238,.14);
}

.place.bronze{
  color:#dc9564;
  border-color:rgba(211,132,81,.45);
  background:
    radial-gradient(circle at 35% 30%,rgba(228,153,103,.15),rgba(75,38,20,.20));
  box-shadow:0 0 12px rgba(200,116,61,.13);
}

/* Ник игрока */
.player{
  gap:13px;
}

.player strong{
  color:#f5fbfc;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 10px rgba(97,220,228,.10);
  transition:color .2s ease,text-shadow .2s ease;
}

.rating-row:hover .player strong{
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(83,220,229,.20),
    0 1px 0 rgba(0,0,0,.9);
}

/* Иконка класса возле ника */
.player .class-avatar{
  width:40px !important;
  height:40px !important;
  min-width:40px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(3,11,14,.76) !important;
  border:1px solid rgba(117,210,217,.16) !important;
  box-shadow:
    0 4px 13px rgba(0,0,0,.42),
    inset 0 0 8px rgba(72,207,215,.04) !important;
}

.player .class-avatar img{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  object-fit:contain;
  transform:none !important;
  border-radius:9px;
}

/* Название класса */
.rating-row > span{
  color:#8db7be;
  font-size:14px;
  font-weight:600;
}

/* Значок уровня */
.player-level .level-badge{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.09));
}

/* ELO */
.elo-value{
  min-width:76px;
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;
  font-size:19px !important;
  font-weight:900 !important;
  letter-spacing:.015em;
  text-shadow:
    0 0 10px currentColor,
    0 1px 0 rgba(0,0,0,.9);
}

.elo-value::after{
  content:" ELO";
  margin-left:4px;
  color:#9caeb2;
  font-family:inherit;
  font-size:9px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.05em;
  text-shadow:none;
  opacity:.8;
}

/* Усиление акцента топ-1 */
.rating-row.rank-1 .player strong{
  color:#fff7dc;
  text-shadow:
    0 0 12px rgba(255,204,74,.17),
    0 1px 0 #000;
}

.rating-row.rank-1 .elo-value{
  filter:brightness(1.12);
}

/* Более мягкие линии между игроками */
.rating-row + .rating-row{
  border-top:1px solid rgba(67,130,137,.18);
}

@media(max-width:760px){
  .rating-row{
    min-height:68px;
  }

  .player strong{
    font-size:15px;
  }

  .player .class-avatar{
    width:36px !important;
    height:36px !important;
    min-width:36px;
  }

  .player .class-avatar img{
    width:36px !important;
    height:36px !important;
    max-width:36px !important;
  }

  .elo-value{
    font-size:17px !important;
  }
}

/* Заголовок блока лучших игроков */
.rating-section .section-heading h2{
  margin-top:8px;
  font-family:"Russo One","Play",sans-serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:.025em;
  color:#f5fbfc;
  text-transform:none;
  text-shadow:
    0 0 18px rgba(41,211,218,.15),
    0 2px 0 rgba(0,0,0,.85);
}

.rating-section .section-heading h2::after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  margin-top:12px;
  background:linear-gradient(90deg,#11d9d0,rgba(17,217,208,0));
  box-shadow:0 0 10px rgba(17,217,208,.45);
}

/* Заголовок рейтинга без полоски */
.rating-section .section-heading h2::after{
  display:none !important;
  content:none !important;
}

.rating-section .section-heading h2{
  margin-bottom:18px;
}

/* TEMP rating test */
.rating-table,
#rating-rows {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}


.rating-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:30px 0 10px;
    flex-wrap:wrap;
}

.rating-pagination button{
    width:44px;
    height:44px;
    display:flex;
    justify-content:center;
    align-items:center;

    border:none;
    border-radius:50%;

    background:linear-gradient(180deg,#1b2429,#10171b);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 0 12px rgba(255,215,120,.08),
        0 0 10px rgba(0,0,0,.35);

    color:#9fc7d8;
    font-size:16px;
    font-weight:700;
    cursor:pointer;

    transition:.25s;
}

.rating-pagination button:hover{
    transform:translateY(-2px);
    color:#ffe3a2;
    box-shadow:
        inset 0 0 0 1px rgba(255,220,140,.45),
        0 0 18px rgba(255,210,120,.25);
}

.rating-pagination button.active{
    background:linear-gradient(180deg,#e0b454,#b67a21);
    color:#ffffff;
    box-shadow:
        0 0 20px rgba(255,204,90,.45),
        inset 0 1px 2px rgba(255,255,255,.35);
}


.rating-pagination button.nav-btn{
    width:auto;
    min-width:132px;
    padding:0 18px;
    border-radius:999px;
}

.rating-pagination button:disabled{
    opacity:.35;
    cursor:default;
    transform:none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 8px rgba(0,0,0,.25);
}