/* ===============================
   RISE OF GLORY — STEEL & FROST THEME
   Ranking Page
   =============================== */

:root {
  --frost1:#a8d5ff;
  --frost2:#6cb3ff;
  --steel1:#4b647d;
  --bg-dark:#0b1015;
  --blue-light:#9fdcff;
  --red:#ff5a5a;
  --blue:#5dc2ff;
}

body {
  margin:0;
  font-family:'Cinzel',serif;
  color:#e0efff;
  background:
    linear-gradient(rgba(0,10,20,0.8),rgba(0,10,20,0.9)),
    url('/assets/body_bg.png') center/cover fixed no-repeat;
  min-height:100vh;
  overflow-x:hidden;
}

/* === WRAP === */
.rank-wrap {
  max-width:900px;
  width:90%;
  margin:120px auto 50px;
  background:rgba(15,25,35,0.75);
  border:1px solid rgba(150,200,255,0.25);
  border-radius:18px;
  backdrop-filter:blur(15px);
  box-shadow:0 0 30px rgba(120,170,255,0.2);
  padding:30px 40px;
  text-align:center;
}

/* === TITLE === */
.rank-wrap h1 {
  font-size:2em;
  font-weight:700;
  margin:0;
  background:linear-gradient(90deg,var(--frost1),var(--frost2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 25px rgba(150,210,255,0.5);
}
.rank-wrap h2 {
  font-size:1em;
  margin:5px 0 25px;
  letter-spacing:2px;
  color:#c7dbef;
}

/* === SELECT === */
select {
  background:rgba(20,25,35,0.85);
  color:#b9dcff;
  border:1px solid rgba(150,200,255,0.3);
  padding:8px 14px;
  border-radius:8px;
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:.9em;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><path fill='%23a8d5ff' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px;
}
select:hover {
  box-shadow:0 0 10px rgba(150,200,255,0.4);
}

/* === TABLE WRAPPER (SCROLL) === */
.rank-table {
  max-height:500px;
  overflow-y:auto;
  border-radius:10px;
  margin-top:15px;
  border:1px solid rgba(150,200,255,0.15);
}

/* === SCROLLBAR === */
.rank-table::-webkit-scrollbar { width:10px; }
.rank-table::-webkit-scrollbar-track {
  background:rgba(20,25,35,0.4);
  border-radius:10px;
}
.rank-table::-webkit-scrollbar-thumb {
  background:linear-gradient(to bottom,#9fdcff,#4a81b8);
  border-radius:10px;
}
.rank-table::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(to bottom,#c8eaff,#7cbcff);
}

/* === TABLE === */
.rank-table table {
  width:100%;
  border-collapse:collapse;
  color:#e0efff;
  font-family:'Cinzel',serif;
}
.rank-table th, .rank-table td {
  padding:12px 10px;
  border-bottom:1px solid rgba(150,200,255,0.1);
}
.rank-table th {
  color:#a8d5ff;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:1px;
}
.rank-table tr:hover {
  background:rgba(150,200,255,0.06);
}
td:first-child {
  font-weight:700;
  color:#9fdcff;
  text-align:center;
}

/* === BADGE === */
.rank-badge {
  display:inline-block;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:.85em;
  line-height:26px;
  background:rgba(150,200,255,0.2);
  border:1px solid rgba(150,200,255,0.4);
  color:#a8d5ff;
}
.rank-table tr:nth-child(1) .rank-badge {
  background:linear-gradient(90deg,#b7ecff,#66a6ff);
  color:#001;
  font-weight:800;
}
.rank-table tr:nth-child(2) .rank-badge {
  background:linear-gradient(90deg,#d2d8e0,#7a8b9a);
  color:#001;
  font-weight:800;
}
.rank-table tr:nth-child(3) .rank-badge {
  background:linear-gradient(90deg,#adcfff,#6a8fcf);
  color:#001;
  font-weight:800;
}

/* === RACE COLOR === */
.race-human{color:var(--blue);font-weight:600;}
.race-akkan{color:var(--red);font-weight:600;}

/* === FOOTER === */
.footer {
  margin-top:25px;
  font-size:.9em;
  color:#9fb9d6;
}
.footer a {
  color:#a8d5ff;
  text-decoration:none;
  font-weight:600;
}
.footer img {
  height:18px;
  vertical-align:middle;
  margin-right:4px;
}