.wm-hall { --hall-purple: #6043c8; --hall-muted: var(--wm-mode-muted, #6b7085); --hall-panel-radius: 18px; --hall-gold: #bb9750; --hall-gold-light: #f4dfa2; }
.wm-hall-service-shell .wm-public-main { padding-top: 28px; }
.wm-hall-service-shell #all-rankings,
.wm-hall-service-shell #school-rankings,
.wm-hall-service-shell #hall-ranking-update,
.wm-hall-service-shell .wm-hall-table tbody tr { scroll-margin-top: 16px; }
.wm-hall h2, .wm-hall h3, .wm-hall p { margin-top: 0; }
.wm-hall h2 { font-size: 19px; line-height: 1.5; letter-spacing: -.035em; }
.wm-hall-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#site-header a[aria-current="page"] { color: var(--wm-mode-violet, #6043c8); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.wm-hall-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 24px; overflow: hidden; min-height: 240px; padding: 30px 36px; border: 2px solid transparent; border-radius: 24px; color: #fff; background: linear-gradient(115deg, #302664 0%, #534092 58%, #7a5fbc 100%) padding-box, linear-gradient(125deg, #b78f49, var(--wm-mode-amber-soft, #f8e9b5) 30%, #ba914c 62%, var(--wm-mode-amber-soft, #eed69a) 100%) border-box; box-shadow: 0 12px 32px #3026650d; }
.wm-hall-hero::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(var(--wm-mode-line-rgb, 241, 214, 151), 0.251); border-radius: 15px; pointer-events: none; }
.wm-hall-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(var(--wm-mode-soft-rgb, 239, 219, 160), 0.0824), transparent 55%); pointer-events: none; }
.wm-hall-hero-copy { position: relative; z-index: 1; }
.wm-hall-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--hall-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.wm-hall-honor-stars { display: inline-flex; flex: 0 0 34px; width: 34px; line-height: 1; }
.wm-hall-honor-stars svg { display: block; width: 34px; height: 10px; fill: currentColor; }
.wm-hall-hero h1 { margin: 0 0 16px; color: var(--wm-mode-amber, #f4d88f); font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1.35; letter-spacing: -.045em; filter: drop-shadow(0 1px 1px #ffffff66) drop-shadow(0 0 7px #ffffff24); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    /* This is gold lettering on a permanent purple hero, not a surface fill. */
    .wm-hall-hero h1 { background: linear-gradient(180deg, #fff9df 10%, #f8e5ac 30%, #ebc76f 52%, #c99b43 70%, #fff0bd 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) {
    .wm-hall-hero h1 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; }
}
.wm-hall-hero-lead { margin-bottom: 4px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.wm-hall-hero-note { margin-bottom: 0; color: #e3def6; font-size: 14px; }
.wm-hall-hero-art { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 194px; isolation: isolate; }
.wm-hall-mascot { width: 150px; height: auto; transform: translateY(-5px) rotate(-8deg); filter: drop-shadow(0 18px 20px #25175633); }
.wm-hall-laurel { position: absolute; z-index: -1; width: 300px; height: auto; pointer-events: none; }
.wm-hall .wm-hall-laurel { max-width: none; }
.wm-hall-orbit { position: absolute; z-index: -2; border: 1px solid rgba(var(--wm-mode-line-rgb, 244, 223, 162), 0.1098); border-radius: 50%; }
.wm-hall-orbit--outer { width: 300px; height: 300px; background: #ffffff03; }
.wm-hall-orbit--inner { width: 212px; height: 212px; background: radial-gradient(circle, rgba(var(--wm-mode-soft-rgb, 244, 223, 162), 0.0627), #ffffff02); }
.wm-hall-star { position: absolute; color: var(--wm-mode-amber, #f4d88f); line-height: 1; transform: translateX(-50%); pointer-events: none; }
.wm-hall-star--one { top: calc(50% - 94px); left: calc(50% + 14px); font-size: 19px; }
.wm-hall-star--two { left: calc(50% - 28px); bottom: 12px; font-size: 13px; opacity: .85; }
.wm-hall-star--three { top: calc(50% + 33px); left: calc(50% + 64px); font-size: 12px; opacity: .9; }
.wm-hall-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; overflow: hidden; border: 1px solid var(--wm-mode-line, #e9e5f3); border-radius: 50%; background: var(--wm-mode-soft, #f0edf9); }
.wm-hall-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-hall-avatar--whale img { width: 75%; height: 65%; object-fit: contain; }
.wm-hall-me-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; color: var(--hall-purple); background: var(--wm-mode-soft, #e9e0ff); font-size: 10px; font-weight: 700; vertical-align: middle; line-height: 1.8; white-space: nowrap; }
.wm-hall-content { display: grid; gap: 24px; margin-top: 24px; }
.wm-hall-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--wm-mode-line, #dfd6ef); border-radius: 9px; color: var(--wm-mode-violet, #64478e) !important; background: var(--wm-mode-soft, #f4f0fc); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.7; }
.wm-hall-button:hover { border-color: var(--wm-mode-line, #b49bdc); background: var(--wm-mode-soft, #eae0fa); }
.wm-hall .wm-hall-button { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.7; }
.wm-hall-ranking { min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--hall-panel-radius); background: linear-gradient(var(--wm-mode-surface, #fff), var(--wm-mode-surface, #fff)) padding-box, linear-gradient(125deg, #c6a15d, var(--wm-mode-amber-soft, #f0e2bd) 28%, #c6a15d 58%, var(--wm-mode-amber-soft, #ecdaa7) 82%, #ba934d) border-box; box-shadow: 0 5px 18px #30266504; }
.wm-hall-ranking-heading { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; padding: 22px 26px; background: linear-gradient(110deg, var(--wm-mode-surface, #fffdf7), var(--wm-mode-surface, #fff) 70%); border-bottom: 1px solid var(--wm-mode-line, #eee7dc); }
.wm-hall-overall-title { display: flex; align-items: center; gap: 10px; }
.wm-hall-title-emblem { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--wm-mode-line, #e9dab8); border-radius: 10px; color: var(--wm-mode-amber, #9a752f); background: linear-gradient(145deg, var(--wm-mode-soft, #fffaf0), var(--wm-mode-amber-soft, #f4e8cb)); }
.wm-hall-title-emblem svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wm-hall-ranking-heading h2 { margin-bottom: 0; white-space: nowrap; }
.wm-hall-ranking-title-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; min-width: 0; width: 100%; }
.wm-hall-ranking-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; min-width: 0; scroll-margin-top: 115px; }
.wm-hall-update-note { margin: 0; color: var(--wm-mode-muted, #756a83); font-size: 12px; line-height: 1.6; text-align: left; white-space: nowrap; }
.wm-hall-refresh-form { flex-shrink: 0; margin: 0; }
.wm-hall-refresh { min-height: 36px; padding: 6px 12px; gap: 6px; border-radius: 999px; cursor: pointer; }
.wm-hall-refresh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wm-hall-refresh:disabled { opacity: .55; cursor: wait; }
.wm-hall-ranking-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; min-width: 0; max-width: 100%; margin-left: auto; }
.wm-hall-find-me { width: fit-content; min-height: 36px; padding: 6px 14px; border-radius: 999px; gap: 8px; white-space: nowrap; cursor: pointer; }
.wm-hall-ranking-message { max-width: 300px; margin: 0; color: var(--wm-mode-muted, #756e82); font-size: 12px; line-height: 1.8; }
.wm-hall-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--wm-mode-text, #504963); }
.wm-hall-table thead { background: var(--wm-mode-surface, #fcfaf7); }
.wm-hall-table th, .wm-hall-table td { padding: 15px 12px; border-bottom: 1px solid var(--wm-mode-line, #f0eef5); }
.wm-hall-table thead th { color: var(--wm-mode-muted, #72687e); font-size: 13px; font-weight: 400; text-align: center; }
.wm-hall-table th:first-child { width: 70px; }
.wm-hall-table th.wm-hall-col-level { width: 82px; }
.wm-hall-table th.wm-hall-col-affiliation { width: 220px; }
.wm-hall-affiliation { color: var(--wm-mode-muted, #756785); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; }
.wm-hall-table-scroll { overflow-x: auto; }
.wm-hall-table th:last-child { width: 140px; }
.wm-hall-table td { text-align: center; }
.wm-hall-table tbody th { font-size: 13px; text-align: left; font-weight: 400; }
.wm-hall-table tbody tr { position: relative; scroll-margin-top: 115px; }
.wm-hall-table tbody tr:target { outline: none; }
.wm-hall-table tbody tr:target > td:first-child { position: static; }
/* Keep the overlay inside a real cell so it cannot create an extra table column. */
.wm-hall-table tbody tr:target > td:first-child::after { content: ""; position: absolute; z-index: 1; inset: 0; box-sizing: border-box; border: 2px solid #a083d8; border-radius: calc(var(--hall-panel-radius) - 1px); pointer-events: none; }
.wm-hall-table-user { display: flex; align-items: center; gap: 12px; }
.wm-hall-table-user > span { min-width: 0; overflow-wrap: anywhere; }
.wm-hall-rank-number { color: var(--wm-mode-muted, #777083); font-size: 14px; font-variant-numeric: tabular-nums; }
.wm-hall-rank-number--top { color: var(--wm-mode-violet, #6d52a6); font-weight: 700; }
.wm-hall-rank-medal { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid; border-radius: 50%; font-size: 15px; line-height: 1; box-shadow: inset 0 0 0 3px #ffffff66, 0 2px 4px #30266508; }
.wm-hall-rank-medal--1 { color: var(--wm-mode-amber, #815b18); border-color: #d6b66d; background: linear-gradient(140deg, var(--wm-mode-amber-soft, #fff7d9), var(--wm-mode-amber-soft, #ead08f)); }
.wm-hall-rank-medal--2 { color: var(--wm-mode-muted, #58647a); border-color: var(--wm-mode-line, #c3cad6); background: linear-gradient(140deg, var(--wm-mode-surface, #f9fbff), var(--wm-mode-soft, #dbe1ec)); }
.wm-hall-rank-medal--3 { color: var(--wm-mode-amber, #86532e); border-color: var(--wm-mode-line, #d1ad91); background: linear-gradient(140deg, var(--wm-mode-soft, #fff0e2), var(--wm-mode-amber-soft, #e5c3a7)); }
.wm-hall-xp { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wm-hall-table .wm-hall-row--me { background: var(--wm-mode-soft, #f7f2ff); }
.wm-hall-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding: 20px 14px; background: linear-gradient(var(--wm-mode-surface, #fff), var(--wm-mode-surface, #fffdf9)); }
.wm-hall-pagination a, .wm-hall-pagination > span { display: grid; place-items: center; min-width: 34px; min-height: 38px; padding: 4px; border-radius: 7px; font-size: 12px; }
.wm-hall-pagination a:hover { background: var(--wm-mode-soft, #f4f0fc); }
.wm-hall-pagination .wm-hall-page-current { background: #7050b8; color: #fff; box-shadow: inset 0 0 0 1px #c8a86e80; }
.wm-hall-page-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wm-hall-empty { padding: 52px 24px; text-align: center; }
.wm-hall-empty img { display: block; margin: 0 auto 22px; opacity: .75; }
.wm-hall-empty h3 { margin-bottom: 12px; font-size: 18px; }
.wm-hall-empty p { color: var(--wm-mode-muted, #7b718c); font-size: 13px; }
.wm-hall-empty .wm-hall-button { width: fit-content; margin: 24px auto 0; padding-inline: 24px; }
#all-rankings, #school-rankings { scroll-margin-top: 115px; }
.wm-hall-school-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; max-width: 100%; }
.wm-hall-school-ranking-label { flex-shrink: 0; }
.wm-hall-ranking-heading .wm-hall-school-name { display: inline-flex; align-items: center; gap: 9px; max-width: calc(100% - 46px); padding: 6px 12px; border: 1px solid var(--wm-mode-line, #e0d5f5); border-radius: 10px; color: var(--wm-mode-violet, #6746ad); background: linear-gradient(135deg, var(--wm-mode-surface, #faf7ff), var(--wm-mode-soft, #eee6fc)); box-shadow: 0 2px 8px #6043c80a; font-weight: 700; line-height: 1.5; white-space: normal; }
.wm-hall-school-name svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.wm-hall-school-name span { min-width: 0; overflow-wrap: anywhere; }
.wm-hall-school-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 4px 26px 28px; }
.wm-hall-school-empty p, .wm-hall-school-pending { margin: 0; color: var(--wm-mode-muted, #756e82); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.wm-hall-school-empty .wm-hall-button { max-width: 100%; }
.wm-hall-school-pending { padding: 0 26px 18px; }
.wm-hall-rank-status { width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 1px solid var(--wm-mode-line, #e4dff0); border-radius: 22px; background: var(--wm-mode-surface, #fff); color: var(--wm-mode-violet, #302665); box-shadow: 0 24px 80px #21173a33; }
.wm-hall-rank-status::backdrop { background: #25203666; backdrop-filter: blur(3px); }
.wm-hall-rank-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--wm-mode-line, #e9e4f2); }
.wm-hall-rank-status-heading h2 { margin: 0; font-size: 20px; font-weight: 700; }
.wm-hall-rank-status-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 7px; border: 0; border-radius: 10px; color: var(--wm-mode-muted, #827092); background: var(--wm-mode-soft, #f5f2fa); cursor: pointer; }
.wm-hall-rank-status-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.wm-hall-rank-status-body { padding: 24px; }
.wm-hall-rank-status-body p { margin: 0; padding: 16px; border: 1px solid var(--wm-mode-line, #e4d8fa); border-radius: 10px; color: var(--wm-mode-muted, #685681); background: var(--wm-mode-surface, #faf7ff); font-size: 14px; font-weight: 700; line-height: 1.8; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.wm-hall-rank-status .wm-hall-rank-status-confirm { min-width: 94px; margin: 20px 0 0 auto; border: 0; border-radius: 999px; color: #fff !important; background: linear-gradient(120deg, #6845fa, #50409f); cursor: pointer; }
@media (max-width: 1023px) {
    .wm-hall-hero { grid-template-columns: minmax(0, 1fr) 200px; padding: 28px; }
    .wm-hall-laurel { width: 280px; }
    .wm-hall-table th:first-child { width: 50px; }
    .wm-hall-table th.wm-hall-col-level { width: 65px; }
    .wm-hall-table th.wm-hall-col-affiliation { width: 160px; }
    .wm-hall-table th:last-child { width: 108px; }
    .wm-hall-table th, .wm-hall-table td { padding-inline: 8px; }
    .wm-hall-table-user { gap: 8px; }
    .wm-hall-table-user .wm-hall-avatar { width: 32px; height: 32px; }
}
@media (max-width: 767px) {
    .wm-hall-hero { grid-template-columns: minmax(0, 1fr) 150px; min-height: 210px; padding: 24px; gap: 20px; border-radius: 18px; }
    .wm-hall-hero-lead { font-size: 16px; }
    .wm-hall-hero-note { font-size: 12px; }
    .wm-hall-hero::before { border-radius: 9px; }
    .wm-hall-mascot { width: 118px; }
    .wm-hall-laurel { width: 230px; }
    .wm-hall-star--one { top: calc(50% - 80px); left: calc(50% + 11px); font-size: 16px; }
    .wm-hall-star--three { left: calc(50% + 48px); font-size: 11px; }
    .wm-hall-table th:first-child { width: 62px; }
    .wm-hall-table th.wm-hall-col-level { width: 86px; }
    .wm-hall-table th:last-child { width: 136px; }
}
@media (max-width: 639px) {
    .wm-hall-hero { display: block; padding: 24px; min-height: 0; }
    .wm-hall-hero-copy { max-width: 100%; }
    .wm-hall-hero h1 { font-size: 32px; margin-bottom: 12px; }
    .wm-hall-hero-note { max-width: 260px; }
    .wm-hall-hero-art { position: absolute; top: 18px; right: 18px; width: 78px; height: 66px; min-height: 0; opacity: .5; }
    .wm-hall-mascot { width: 65px; }
    .wm-hall-laurel { width: 110px; opacity: .75; }
    .wm-hall-orbit--inner { width: 160px; height: 160px; }
    .wm-hall-orbit--outer { width: 240px; height: 240px; }
    .wm-hall-star { display: none; }
    .wm-hall-content { gap: 20px; margin-top: 20px; }
    .wm-hall-ranking-heading { gap: 14px 12px; padding: 20px 16px; }
    .wm-hall-ranking-toolbar { gap: 10px 12px; }
    .wm-hall-ranking-heading h2 { font-size: 17px; }
    .wm-hall-update-note { font-size: 11px; }
    .wm-hall-table th:first-child { width: 41px; }
    .wm-hall-table th.wm-hall-col-level { width: 59px; }
    .wm-hall-table--global { min-width: 620px; }
    .wm-hall-table th:last-child { width: 99px; }
    .wm-hall-table th, .wm-hall-table td { padding: 15px 5px; }
    .wm-hall-table-user { gap: 7px; }
    .wm-hall-table-user .wm-hall-avatar { width: 28px; height: 28px; }
    .wm-hall-table tbody th, .wm-hall-xp { font-size: 12px; }
    .wm-hall-rank-number { font-size: 11px; }
    .wm-hall-rank-medal { width: 28px; height: 28px; font-size: 12px; box-shadow: inset 0 0 0 2px #ffffff66; }
    .wm-hall-school-empty { padding: 0 16px 24px; }
    .wm-hall-school-pending { padding: 0 16px 16px; }
}
@media (max-width: 399px) {
    .wm-hall-pagination { gap: 2px; padding-inline: 10px; }
    .wm-hall-pagination a, .wm-hall-pagination > span { min-width: 30px; min-height: 40px; }
    .wm-hall-hero { padding-inline: 20px; }
    .wm-hall-hero-art { right: 10px; width: 50px; opacity: .4; }
    .wm-hall-mascot { width: 45px; }
    .wm-hall-laurel { width: 78px; }
    .wm-hall-hero-lead { font-size: 15px; }
    .wm-hall-table-user .wm-hall-avatar { display: none; }
    .wm-hall-table th:first-child { width: 36px; }
    .wm-hall-table th.wm-hall-col-level { width: 53px; }
    .wm-hall-table th:last-child { width: 90px; }
    .wm-hall-rank-medal { width: 24px; height: 24px; }
}

@media screen {
    html[data-wm-theme="dark"] .wm-hall-me-badge {
        color: var(--wm-mode-violet, #c1b0ff);
    }
}