.ranking-body { min-height: 100vh; }
.ranking-layout { width: min(1180px, calc(100% - 40px)); margin: 30px auto 80px; }
.ranking-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr); align-items: center; gap: 42px; margin: 28px 0 46px; }
.ranking-hero h1 { margin: 0; font-size: clamp(3.2rem, 8vw, 6.8rem); font-weight: 1000; letter-spacing: -.065em; line-height: .84; text-transform: uppercase; }
.ranking-hero h1 span { color: transparent; background: linear-gradient(90deg, var(--gold), #ff8d16, var(--red)); background-clip: text; -webkit-background-clip: text; }
.ranking-hero > div > p:last-child { max-width: 650px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.ranking-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ranking-rules article { display: grid; place-items: center; min-height: 180px; padding: 18px 10px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, rgba(26,15,74,.95), rgba(8,5,30,.97)); box-shadow: 0 18px 35px rgba(0,0,0,.28); text-align: center; }
.ranking-rules article:first-child { border-color: rgba(255,201,40,.65); }
.ranking-rules span { font-size: 2.2rem; }
.ranking-rules strong { margin-top: 8px; color: var(--gold); font-size: 2.2rem; }
.ranking-rules small { color: var(--muted); font-weight: 800; }
.ranking-panel { overflow: hidden; padding: clamp(18px, 4vw, 34px); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(160deg, rgba(21,12,64,.96), rgba(7,5,28,.98)); box-shadow: var(--shadow); }
.ranking-game-tabs { display: flex; gap: 9px; margin: 0 0 28px; padding: 4px 2px 12px; overflow-x: auto; scrollbar-color: #8d4dff #160c3e; }
.ranking-game-tabs button { flex: 0 0 auto; min-height: 42px; padding: 9px 15px; border: 1px solid rgba(141,77,255,.45); border-radius: 999px; color: #c9c1e2; background: rgba(23,13,63,.86); cursor: pointer; font-size: .75rem; font-weight: 900; }
.ranking-game-tabs button:hover { border-color: var(--cyan); color: #fff; }
.ranking-game-tabs button.is-active { border-color: var(--gold); color: #171027; background: linear-gradient(135deg, var(--gold), #ff9f24); box-shadow: 0 7px 22px rgba(255,174,35,.2); }
.ranking-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ranking-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); text-transform: uppercase; }
.ranking-summary { display: grid; max-width: 190px; text-align: right; }
.ranking-summary strong { color: var(--cyan); font-size: 2.4rem; line-height: 1; }
.ranking-summary span { margin-top: 6px; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.ranking-method { margin: 24px 0; padding: 14px 16px; border-left: 3px solid var(--gold); background: rgba(255,201,40,.09); color: #efe5b0; line-height: 1.5; }
.ranking-status { padding: 34px 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); text-align: center; }
.ranking-error { color: #ffb8c7; border-color: rgba(255,49,88,.55); background: rgba(255,49,88,.08); }
.ranking-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.ranking-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,.085); text-align: left; }
.ranking-table th { color: #9ee8ff; background: rgba(3,13,43,.65); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody tr:hover { background: rgba(64,216,255,.045); }
.ranking-top-1 { background: linear-gradient(90deg, rgba(255,201,40,.18), transparent 70%); }
.ranking-top-2 { background: linear-gradient(90deg, rgba(210,222,238,.12), transparent 65%); }
.ranking-top-3 { background: linear-gradient(90deg, rgba(205,120,56,.14), transparent 65%); }
.ranking-position { width: 66px; color: var(--gold); font-size: 1.45rem; font-weight: 1000; }
.ranking-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ranking-results span { padding: 4px 7px; border: 1px solid rgba(141,77,255,.38); border-radius: 999px; background: rgba(38,21,91,.75); color: #ddd8f5; font-size: .68rem; }
.ranking-number { width: 70px; color: #e8e4f8; font-weight: 800; text-align: center !important; }
.ranking-points { width: 100px; color: var(--gold); font-size: 1.3rem; font-weight: 1000; }
.ranking-updated { margin: 15px 0 0; color: var(--muted); font-size: .75rem; text-align: right; }
@media (max-width: 800px) {
  .ranking-hero { grid-template-columns: 1fr; }
  .ranking-rules article { min-height: 130px; }
  .ranking-heading { align-items: flex-start; }
}
@media (max-width: 540px) {
  .ranking-layout { width: min(100% - 24px, 1180px); margin-top: 12px; }
  .ranking-hero h1 { font-size: 3.25rem; }
  .ranking-rules { gap: 6px; }
  .ranking-rules article { min-height: 112px; padding: 12px 5px; }
  .ranking-rules span { font-size: 1.6rem; }
  .ranking-rules strong { font-size: 1.7rem; }
  .ranking-rules small { font-size: .68rem; }
  .ranking-heading { display: grid; }
  .ranking-summary { text-align: left; }
  .ranking-panel { padding: 15px; border-radius: 16px; }
  .ranking-game-tabs { margin-bottom: 20px; }
}