.ranking-page{margin:0;background:radial-gradient(ellipse at 45% 0,#333324 0,#141c17 60%);color:#f2ecdb;font:15px system-ui,sans-serif;min-height:100vh}
.ranking-page *,.ranking-dialog *{box-sizing:border-box}
.ranking-main{max-width:1480px;margin:auto;padding:42px 28px}
.ranking-header{display:flex;align-items:center;gap:22px;padding-bottom:32px;border-bottom:1px solid #67704f}
.ranking-brand img{object-fit:contain}.ranking-eyebrow{color:#d4b876;font-size:10px;letter-spacing:2.5px;font-weight:700;margin:0 0 8px}
.ranking-header h1{font-size:clamp(26px,3.3vw,44px);line-height:1.15;font-weight:550;letter-spacing:-1px;margin:0 0 12px}
.ranking-header p:last-child{color:#bdc4b1;margin:0}
.ranking-play,.ranking-dialog button[type=submit]{background:linear-gradient(135deg,#edd396,#bd934c);color:#142017;border:1px solid #dfc484;border-radius:7px;padding:12px 22px;text-decoration:none;font-weight:700;white-space:nowrap}
.ranking-play{margin-left:auto}.ranking-toolbar{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:23px;color:#bdc4b1;font-size:13px}
.ranking-toolbar p{margin:0}.ranking-toolbar button,.ranking-dialog button{font:inherit;color:#eddfbd;border:1px solid #716847;background:#222e23;border-radius:7px;padding:10px 16px;cursor:pointer}
.ranking-toolbar button:disabled,.ranking-dialog button:disabled{opacity:.55;cursor:wait}
.ranking-page a:focus-visible,.ranking-page button:focus-visible,.ranking-scroll:focus-visible,.ranking-dialog :focus-visible{outline:2px solid #f2d895;outline-offset:4px}
.ranking-status{min-height:20px;margin:16px 0;color:#e1c783;font-size:13px}
.ranking-local{border:1px solid #6d6e49;background:#262f23;padding:11px 14px;color:#d6d3b9;border-radius:7px;font-size:12px}.ranking-local[hidden]{display:none}
.ranking-scroll{overflow-x:auto;padding:0 0 12px;scroll-snap-type:x proximity;scrollbar-color:#a68b50 #202a20}
.ranking-grid{display:grid;grid-template-columns:repeat(4,minmax(280px,1fr));gap:16px}
.ranking-card{position:relative;min-width:0;background:linear-gradient(145deg,#233025,#1b251e);border:1px solid #646447;border-radius:12px;overflow:hidden;scroll-snap-align:start;box-shadow:0 12px 30px #0002}
.ranking-card-heading{padding:22px 19px 17px;border-bottom:1px solid #5d6346;background:linear-gradient(135deg,#38402a,#283024);position:relative}
.ranking-index{font-size:12px;color:#e4cb8d;font-weight:650;letter-spacing:2px}.ranking-distance{float:right;font-size:11px;border:1px solid #72724d;color:#d7d8b4;border-radius:20px;padding:3px 10px}
.ranking-card h2{font-size:20px;font-weight:600;letter-spacing:-.5px;margin:16px 0 8px}.ranking-card-heading p{font-size:9px;letter-spacing:1.5px;color:#b9c1a5;margin:0}
.ranking-card table{width:100%;border-collapse:collapse;table-layout:fixed}.ranking-card th{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#a9b49e;font-weight:500;padding:15px 12px 11px;text-align:left}
.ranking-card th:first-child{width:34px;padding-left:16px}.ranking-card th:last-child{width:70px;text-align:right;padding-right:16px}
.ranking-card th.ranking-ride{width:80px;font-size:9px;letter-spacing:0;padding-left:7px;padding-right:7px}.ranking-card td.ranking-ride{font-size:11px;color:#cbd0be;padding-left:7px;padding-right:7px;overflow-wrap:anywhere}
.ranking-card td{height:56px;border-top:1px solid #394333;padding:7px 8px;font-size:13px}
.ranking-card .ranking-place{padding-left:16px;color:#7f907a;font-size:11px}.ranking-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.ranking-card time{display:block;font-size:9px;color:#a2ad97;margin-top:4px}
.ranking-card .ranking-score{font-variant-numeric:tabular-nums;text-align:right;padding-right:16px;color:#ebd18b;font-weight:650}
.ranking-card td{height:66px}.ranking-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:3px}.ranking-meta time{margin:0;font-size:8px}.ranking-belt{display:block;width:62px;height:23px;flex:none}.ranking-page .belt-defs{position:absolute;width:0;height:0;overflow:hidden}
.ranking-card tr:first-child:not(.ranking-empty) td{background:#43442b66}.ranking-card tr:first-child:not(.ranking-empty) .ranking-place{color:#ebd18b;font-weight:700}
.ranking-empty .ranking-name{color:#889880;font-weight:400;font-size:12px}.ranking-empty .ranking-score{color:#60725d}
.ranking-footer{color:#a7b29d;font-size:12px;line-height:1.6;margin-top:19px}.ranking-footer p{margin:6px 0}.ranking-scroll-hint{display:none;color:#d7c48c;font-size:12px}
.ranking-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ranking-languages{display:flex;justify-content:flex-end;gap:14px;margin:12px 0 0;font-size:12px}.ranking-languages a{color:#bdc4b1;text-decoration:none}.ranking-languages a[aria-current=page]{color:#edd396;text-decoration:underline;text-underline-offset:4px}
.ranking-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 24px);overflow:auto;background:#1b291f;color:#f2e7ce;border:1px solid #baa266;border-radius:14px;padding:24px;box-shadow:0 20px 90px #0009;font:15px system-ui}
.ranking-dialog::backdrop{background:#08110cc9}.ranking-dialog h2{font-size:24px;margin:6px 0 10px}.ranking-dialog p{line-height:1.5}.ranking-dialog label{display:grid;gap:8px;font-size:13px;margin:18px 0 12px}.ranking-dialog input{font:inherit;width:100%;background:#111c16;color:#f5efd9;border:1px solid #897c52;padding:11px;border-radius:6px}.ranking-dialog small{font-size:11px;color:#bdc4b1;letter-spacing:0}.ranking-dialog a{color:#edd396}.ranking-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.ranking-dialog [hidden]{display:none!important}.ranking-form-status{font-size:13px;color:#ecd08a;min-height:20px}.ranking-dialog .ranking-total{font-size:31px;font-weight:600;margin:6px 0;color:#edd396;font-variant-numeric:tabular-nums}
#leaderboard-result{margin:12px 0;color:#e1c783;font-size:14px}#leaderboard-result[hidden]{display:none}.training-mode #leaderboard-result{display:none}
@media(max-width:1224px){.ranking-scroll-hint{display:block}.ranking-grid{grid-template-columns:repeat(4,minmax(280px,1fr))}}
@media(max-width:600px){.ranking-main{padding:24px 16px}.ranking-header{gap:13px;flex-wrap:wrap;padding-bottom:22px}.ranking-brand img{width:46px;height:46px}.ranking-header>div{flex:1}.ranking-header h1{font-size:26px}.ranking-header p:last-child{font-size:12px}.ranking-eyebrow{font-size:8px;letter-spacing:1.5px}.ranking-play{margin:0;width:100%;text-align:center}.ranking-toolbar{align-items:flex-start;font-size:12px;gap:12px}.ranking-toolbar button{padding:9px 12px}.ranking-grid{grid-template-columns:repeat(4,320px);gap:12px}.ranking-footer{font-size:11px}.ranking-dialog{padding:18px}}
@media(max-height:480px){.ranking-dialog{padding:14px 20px}.ranking-dialog h2{font-size:20px;margin:0 0 5px}.ranking-dialog label{margin:9px 0}.ranking-dialog p{margin:6px 0}.ranking-dialog-actions{margin-top:10px}}
