/* Leaderboard. Shared pieces (guide, filters, tabs, tables, pagination) live in site.css. */
.filters{grid-template-columns:2fr 1fr}
.table-scroll{margin-top:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
table{font-size:15px}
caption{padding:var(--space-4) var(--space-5) var(--space-2);font-family:var(--font-heading);font-size:var(--fs-md);color:var(--text)}
th{background:var(--surface-2)}
td,th{padding:12px 14px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-hover)}
.rank{width:72px;white-space:nowrap;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.character{font-weight:600;overflow-wrap:anywhere}
/* Names link to the player profiles */
.profile-link{color:inherit;text-decoration:none}
.profile-link:hover,.profile-link:focus-visible{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
/* Worn title under the name (inline colour when the title defines one) */
.character .title{display:block;margin-top:2px;color:var(--text-soft);font-weight:600;font-size:12px;font-style:italic;letter-spacing:.01em;text-shadow:0 1px 2px #0009}
.class{white-space:nowrap;color:var(--text-soft)}
.class-head{display:inline-block;width:28px;height:28px;margin-right:8px;vertical-align:middle;object-fit:contain;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.class-name{vertical-align:middle}
.number{white-space:nowrap;font-variant-numeric:tabular-nums}
.number.kamas{color:var(--accent-soft)}
.amount{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kamas-icon{display:block;flex:none;width:16px;height:16px}
.level{color:var(--text);font-weight:600}
/* Omega level past 200 */
.omega{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;color:#e6dcff;background:#8e6bff33;border:1px solid #8e6bff88;vertical-align:1px}
/* Top three ranks carry a gold marker */
.podium .rank{color:var(--accent)}
.podium .rank:before{content:'';display:inline-block;width:8px;height:8px;margin-right:9px;vertical-align:2px;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 8px #f1b53d88}
.podium{background:#f1b53d0a}
@media(max-width:760px){.filters{grid-template-columns:1fr}table{font-size:14px}td,th{padding:10px 8px}.rank{width:48px}caption{padding:var(--space-3) var(--space-3) var(--space-2)}}
/* Phones: the class name sits under its head so five columns fit without horizontal scrolling */
@media(max-width:560px){table{font-size:13px}td,th{padding:9px 5px}th{font-size:11px;letter-spacing:.02em}.rank{width:34px}.podium .rank:before{display:none}.class{text-align:center;font-size:11px}.class-head{display:block;width:24px;height:24px;margin:0 auto 2px}.class-name{display:block}.amount{gap:3px}.kamas-icon{width:13px;height:13px}.character .title{font-size:11px}.level{white-space:normal}.omega{margin:2px 0 0;padding:0 5px;font-size:11px}}
/* Professions: icon picker (gathering/crafting, then specialisations), the chosen profession, level with XP bar, holder */
.job-picker{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.job-group-title{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft)}
.job-grid{display:flex;flex-wrap:wrap;gap:6px}
.job-button{display:flex;align-items:center;gap:7px;min-height:40px;padding:4px 10px 4px 5px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-soft);font:600 13px var(--font-body);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.job-button:hover{background:var(--surface-hover);color:var(--text)}
.job-button[aria-pressed=true]{border-color:var(--accent);background:#f1b53d1f;color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.job-icon{display:block;flex:none;width:32px;height:32px;object-fit:contain}
.job-title{display:flex;align-items:center;gap:10px;margin:var(--space-5) 0 var(--space-1)}
.job-title .job-icon{width:36px;height:36px}
.job-level{min-width:96px}
.job-level-value{display:inline-block;min-width:2.2em}
.xp-bar{display:inline-block;width:64px;height:6px;margin-left:8px;vertical-align:middle;border-radius:999px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.xp-fill{display:block;height:100%;border-radius:inherit;background:var(--accent-gradient)}
.xp-bar.max .xp-fill{background:linear-gradient(90deg,#8e6bff,#c6b2ff)}
.holder-wrap{display:flex;align-items:center;gap:8px}
.holder .class-head{flex:none;margin:0}
.holder-text{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.25}
.holder-name{font-weight:600;overflow-wrap:anywhere}
.holder-level{color:var(--text-soft);font-size:12px}
/* Time played */
.time-modes{display:inline-flex;gap:4px;margin:var(--space-2) 0 var(--space-3);padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.time-mode{min-height:36px;padding:6px 14px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-soft);font:600 14px var(--font-body);cursor:pointer}
.time-mode:hover{color:var(--text);background:var(--surface-hover)}
.time-mode[aria-pressed=true]{background:var(--surface-hover);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.playtime{color:var(--accent-soft);font-weight:600}
@media(max-width:760px){.job-button-name{display:none}.job-button{padding:4px}.job-level{min-width:0}}
@media(max-width:560px){.xp-bar{display:block;width:44px;margin:4px 0 0}.job-level-value{min-width:0}.holder-wrap{gap:6px}.holder .class-head{display:block;width:22px;height:22px;margin:0}.holder-level{font-size:11px}.job-icon{width:30px;height:30px}.job-grid{gap:4px}}