.ranking-button{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #8a7a45;border-radius:10px;background:#3a3826;color:#f4e9c0;padding:10px 12px;flex-shrink:0;min-height:44px;font-weight:600;font-size:11px;cursor:pointer}
.ranking-button span{color:#f2cf6b;font-size:15px}
.ranking-dialog h2 span{color:#b4ec73}
.ranking-join{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:12px;background:#22403a;border:1px solid #456057;margin:14px 0 18px}
.ranking-join p{margin:4px 0 0;font-size:12px;line-height:1.5;color:#b6ccc6}
.ranking-join b{color:#e8f2dc}
.ranking-join button{width:auto;margin:0;flex-shrink:0;min-height:44px}
.ranking-error{color:#f3b58b!important}
.ranking-places{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ranking-places span{font-size:11px;padding:3px 8px;border-radius:999px;background:#10262e;color:#b6ccc6}.ranking-places b{color:#f2cf6b}
.ranking-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ranking-tabs button{width:auto;margin:0;padding:8px 12px;min-height:38px;border:1px solid #456057;border-radius:999px;background:#1d363f;color:#d5e6df;font-size:12px;font-weight:600;cursor:pointer}
.ranking-tabs button.active{border-color:#b4ec73;background:#294438;color:#e3f3c4}
.ranking-boards button{font-size:11px;padding:6px 10px;min-height:34px}
.ranking-detail{font-size:11px;color:#a5bdc5;margin:6px 0 12px}
.ranking-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ranking-list li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#1d363f}
.ranking-list li.mine{background:#2f4f33;outline:1px solid #b4ec73}
.ranking-list b{font-size:13px;color:#e8f2dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ranking-rank{text-align:center;font-weight:700;color:#a5bdc5;font-size:14px}
.ranking-value{font-variant-numeric:tabular-nums;font-weight:700;color:#cde9a6;font-size:13px;white-space:nowrap}
.ranking-empty{font-size:12px;color:#a5bdc5;text-align:center;padding:12px 0}
@media(max-width:900px){.ranking-button{padding:10px;font-size:0;gap:0}.ranking-button span{font-size:15px}}
@media(max-width:700px){.ranking-join{flex-direction:column;align-items:stretch}.ranking-join button{width:100%}.ranking-list li{grid-template-columns:32px 1fr auto;padding:9px 10px;gap:8px}}