/**
 *
 * Find Waldo extension for the phpBB Forum Software package.
 *
 * @copyright (c) phpBB Limited <https://www.phpbb.com>, phpBB.nl <https://www.phpbbextnl.be>, SpIdErPiGgY
 * @copyright “Where’s Waldo” / “Where’s Wally” is a trademark of its respective owners.
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 */

/* ==========================================================
   Find Waldo - clean theme system
   Standard, Christmas, Halloween, Easter + automatic Dark mode
   ========================================================== */

:root {
    --waldo-bg: #f4f8fc;
    --waldo-card: #ffffff;
    --waldo-card-2: #f7fbff;
    --waldo-text: #23384f;
    --waldo-muted: #61758f;
    --waldo-soft: #e7f0f8;
    --waldo-border: #cfddea;
    --waldo-accent: #2f85bd;
    --waldo-accent-2: #65a7cf;
    --waldo-accent-3: #f2b24c;
    --waldo-accent-dark: #23668f;
    --waldo-accent-soft: #eaf3fa;
    --waldo-accent-3-dark: #c88a2b;
    --waldo-header: linear-gradient(135deg, #2f85bd 0%, #246f9e 55%, #4d9cc9 100%);
    --waldo-panel: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,254,.98) 100%);
    --waldo-row: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,251,255,.96) 100%);
    --waldo-shadow: 0 18px 44px rgba(31, 67, 104, .12);
    --waldo-overlay-image: none;
    --waldo-overlay-opacity: 0;
    --waldo-overlay-size: 440px auto;
}

body.waldo-theme-christmas,
.waldo-theme-christmas {
    --waldo-bg: #143225;
    --waldo-card: #1f4635;
    --waldo-card-2: #173527;
    --waldo-text: #fff4df;
    --waldo-muted: #ead5b2;
    --waldo-soft: rgba(240, 206, 126, .18);
    --waldo-border: rgba(232, 193, 111, .46);
    --waldo-accent: #bd3037;
    --waldo-accent-2: #1f754c;
    --waldo-accent-3: #e8c56f;
    --waldo-accent-dark: #8c1f26;
    --waldo-accent-soft: rgba(232, 197, 111, .18);
    --waldo-accent-3-dark: #c09a49;
    --waldo-header: linear-gradient(135deg, #bf3038 0%, #8c1f26 52%, #1e7048 100%);
    --waldo-panel: radial-gradient(circle at 12% 16%, rgba(255, 228, 147, .16) 0, transparent 22%), linear-gradient(180deg, rgba(28, 69, 47, .98) 0%, rgba(17, 43, 30, .99) 100%);
    --waldo-row: linear-gradient(180deg, rgba(35, 78, 57, .96) 0%, rgba(24, 55, 39, .98) 100%);
    --waldo-shadow: 0 18px 46px rgba(15, 32, 22, .36);
    --waldo-overlay-image: url("./images/christmas/overlay.png");
    --waldo-overlay-opacity: .24;
}

body.waldo-theme-halloween,
.waldo-theme-halloween {
    --waldo-bg: #fff0dc;
    --waldo-card: #fff8ef;
    --waldo-card-2: #ffe7cb;
    --waldo-text: #45210f;
    --waldo-muted: #7a4324;
    --waldo-soft: rgba(255, 139, 31, .18);
    --waldo-border: rgba(216, 104, 18, .42);
    --waldo-accent: #f47b16;
    --waldo-accent-2: #69306d;
    --waldo-accent-3: #ffd267;
    --waldo-accent-dark: #c3560d;
    --waldo-accent-soft: rgba(244, 123, 22, .16);
    --waldo-accent-3-dark: #dda841;
    --waldo-header: linear-gradient(135deg, #ff941f 0%, #e26914 52%, #6a2f75 100%);
    --waldo-panel: radial-gradient(circle at 14% 14%, rgba(255, 178, 72, .26) 0, transparent 24%), radial-gradient(circle at 88% 10%, rgba(106, 48, 109, .16) 0, transparent 22%), linear-gradient(180deg, rgba(255, 244, 229, .98) 0%, rgba(255, 223, 188, .98) 100%);
    --waldo-row: linear-gradient(180deg, rgba(255, 249, 239, .97) 0%, rgba(255, 232, 203, .98) 100%);
    --waldo-shadow: 0 18px 44px rgba(104, 48, 13, .18);
    --waldo-overlay-image: url("./images/halloween/overlay.png");
    --waldo-overlay-opacity: .18;
}

body.waldo-theme-easter,
.waldo-theme-easter {
    --waldo-bg: #fff8fc;
    --waldo-card: #ffffff;
    --waldo-card-2: #f8fbff;
    --waldo-text: #544164;
    --waldo-muted: #7b6989;
    --waldo-soft: rgba(239, 159, 194, .18);
    --waldo-border: #e9c7d8;
    --waldo-accent: #e979ae;
    --waldo-accent-2: #87c7aa;
    --waldo-accent-3: #f2be62;
    --waldo-accent-dark: #c95f91;
    --waldo-accent-soft: rgba(233, 121, 174, .15);
    --waldo-accent-3-dark: #d99b38;
    --waldo-header: linear-gradient(135deg, #ec88b5 0%, #f1bf65 48%, #8dceb0 100%);
    --waldo-panel: radial-gradient(circle at 12% 18%, rgba(240, 164, 196, .20) 0, transparent 24%), radial-gradient(circle at 86% 14%, rgba(145, 206, 177, .22) 0, transparent 22%), linear-gradient(180deg, rgba(255, 250, 253, .99) 0%, rgba(248, 253, 250, .99) 100%);
    --waldo-row: linear-gradient(180deg, rgba(255, 253, 255, .97) 0%, rgba(248, 253, 250, .97) 100%);
    --waldo-shadow: 0 18px 44px rgba(111, 82, 124, .12);
    --waldo-overlay-image: url("./images/easter/overlay.png");
    --waldo-overlay-opacity: .20;
}

.waldo-page.waldo-theme-page {
    background-image: radial-gradient(circle at top right, var(--waldo-soft), transparent 34%);
    background-attachment: scroll;
}

/* Automatic dark mode for the standard theme and dark phpBB styles. */
@media (prefers-color-scheme: dark) {
    body.waldo-theme-standard,
    .waldo-theme-standard {
        --waldo-bg: #101822;
        --waldo-card: #172331;
        --waldo-card-2: #1f2d3d;
        --waldo-text: #edf6ff;
        --waldo-muted: #b5c6d8;
        --waldo-soft: rgba(99, 169, 210, .16);
        --waldo-border: rgba(150, 188, 216, .28);
        --waldo-accent: #62b4e6;
        --waldo-accent-2: #9278ff;
        --waldo-accent-3: #f1c56c;
        --waldo-accent-dark: #3d83b5;
        --waldo-accent-soft: rgba(98, 180, 230, .14);
        --waldo-accent-3-dark: #c99a3f;
        --waldo-header: linear-gradient(135deg, #214a6b 0%, #2c3f78 54%, #583f84 100%);
        --waldo-panel: radial-gradient(circle at 12% 12%, rgba(98, 180, 230, .12) 0, transparent 28%), linear-gradient(180deg, rgba(23, 35, 49, .98) 0%, rgba(14, 22, 32, .99) 100%);
        --waldo-row: linear-gradient(180deg, rgba(32, 46, 63, .97) 0%, rgba(22, 34, 49, .98) 100%);
        --waldo-shadow: 0 18px 46px rgba(0, 0, 0, .32);
    }
}

body.darkmode .waldo-theme-standard,
body.dark-mode .waldo-theme-standard,
body[data-theme="dark"] .waldo-theme-standard,
html[data-theme="dark"] .waldo-theme-standard,
body.waldo-theme-standard.darkmode,
body.waldo-theme-standard.dark-mode,
body[data-theme="dark"].waldo-theme-standard,
html[data-theme="dark"] body.waldo-theme-standard {
    --waldo-bg: #101822;
    --waldo-card: #172331;
    --waldo-card-2: #1f2d3d;
    --waldo-text: #edf6ff;
    --waldo-muted: #b5c6d8;
    --waldo-soft: rgba(99, 169, 210, .16);
    --waldo-border: rgba(150, 188, 216, .28);
    --waldo-accent: #62b4e6;
    --waldo-accent-2: #9278ff;
    --waldo-accent-3: #f1c56c;
    --waldo-accent-dark: #3d83b5;
    --waldo-accent-soft: rgba(98, 180, 230, .14);
    --waldo-accent-3-dark: #c99a3f;
    --waldo-header: linear-gradient(135deg, #214a6b 0%, #2c3f78 54%, #583f84 100%);
    --waldo-panel: radial-gradient(circle at 12% 12%, rgba(98, 180, 230, .12) 0, transparent 28%), linear-gradient(180deg, rgba(23, 35, 49, .98) 0%, rgba(14, 22, 32, .99) 100%);
    --waldo-row: linear-gradient(180deg, rgba(32, 46, 63, .97) 0%, rgba(22, 34, 49, .98) 100%);
    --waldo-shadow: 0 18px 46px rgba(0, 0, 0, .32);
}


.waldo-hunt {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    width: 140px !important;
    text-align: center;
}

.waldo-image-link {
    display: block;
    position: relative;
    width: 140px;
    height: 180px;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
}

.waldo-hunt img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center bottom;
    cursor: pointer;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .24));
    transition: transform .16s ease-in-out, filter .16s ease-in-out;
}

.waldo-hunt img:hover {
    transform: translateY(-2px) scale(1.04) rotate(-2deg);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .30));
}

.waldo-click-hint,
.waldo-score-badge,
.waldo-score-button {
    display: inline-block;
    max-width: 140px;
    margin: 7px auto 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--waldo-header);
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    box-sizing: border-box;
}

.waldo-score-button {
    font-size: 12px;
    padding: 8px 13px;
}

.waldo-score-button:hover,
.waldo-score-button:focus {
    color: #fff !important;
    text-decoration: none;
    filter: brightness(1.06);
}

.waldo-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.waldo-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .58);
}

.waldo-overlay-box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(1040px, calc(100vw - 36px));
    max-height: calc(100dvh - 48px);
    margin: 24px auto;
    overflow: hidden;
    border: 1px solid var(--waldo-border);
    border-radius: 22px;
    background: var(--waldo-panel);
    color: var(--waldo-text);
    box-shadow: var(--waldo-shadow);
}

.waldo-overlay-box::before,
.waldo-page-hero::before,
.waldo-toplist-shell::before,
.waldo-board-wrap-modern::before,
.waldo-chart::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--waldo-overlay-image);
    background-position: center;
    background-repeat: repeat;
    background-size: var(--waldo-overlay-size);
    opacity: var(--waldo-overlay-opacity);
}

.waldo-overlay-box > *,
.waldo-page-hero > *,
.waldo-toplist-shell > *,
.waldo-board-wrap-modern > *,
.waldo-chart > * {
    position: relative;
    z-index: 1;
}

.waldo-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 18px;
    border-bottom: 1px solid var(--waldo-border);
    background: var(--waldo-header);
    color: #fff;
}

.waldo-overlay-close {
    min-width: 38px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.waldo-overlay-close:hover,
.waldo-overlay-close:focus {
    background: rgba(255,255,255,.24);
    color: #fff;
}

.waldo-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: transparent;
}

.waldo-overlay-content {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.waldo-overlay-footer-link {
    position: sticky;
    bottom: -16px;
    z-index: 3;
    margin: 14px -16px -16px;
    padding: 14px 16px 16px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--waldo-card) 42%);
    text-align: center;
}

.waldo-overlay-footer-link a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--waldo-border);
    border-radius: 999px;
    background: var(--waldo-header);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

.waldo-overlay-footer-link a:hover,
.waldo-overlay-footer-link a:focus {
    color: #fff !important;
    text-decoration: none;
    filter: brightness(1.06);
}

body.waldo-overlay-open {
    overflow: hidden;
}

body.waldo-overlay-open .waldo-hunt {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.waldo-toast,
.waldo-loading {
    color: var(--waldo-text);
}

.waldo-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 100102;
    max-width: min(90vw, 420px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--waldo-header);
    color: #fff;
    box-shadow: var(--waldo-shadow);
    text-align: center;
}

.waldo-page {
    margin-top: 8px;
    color: var(--waldo-text);
}

.waldo-page-panel,
.waldo-page-panel-modern {
    overflow: visible;
}

.waldo-page-title,
.waldo-chart-title {
    margin: 0 0 8px;
    color: var(--waldo-text);
}

.waldo-page-intro,
.waldo-chart-note,
.waldo-page-toolbar-note,
.waldo-toplist-help,
.waldo-toplist-meta,
.waldo-last-wrap {
    color: var(--waldo-muted);
}

.waldo-page-hero,
.waldo-toplist-shell,
.waldo-board-wrap-modern,
.waldo-chart {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--waldo-border);
    border-radius: 22px;
    background: var(--waldo-panel);
    color: var(--waldo-text);
    box-shadow: var(--waldo-shadow);
}

.waldo-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
    padding: 18px;
}

.waldo-page-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.waldo-page-summary-card,
.waldo-page-info-item,
.waldo-toplist-info-item,
.waldo-toplist-row,
.waldo-toplist-tab,
.waldo-toplist-stat,
.waldo-chart-row {
    border: 1px solid var(--waldo-border);
    border-radius: 17px;
    background: var(--waldo-row);
    color: var(--waldo-text);
    box-sizing: border-box;
}

.waldo-page-summary-card {
    padding: 14px 16px;
}

.waldo-page-summary-label,
.waldo-page-info-label,
.waldo-toplist-info-label,
.waldo-toplist-stat-label {
    display: block;
    margin-bottom: 6px;
    color: var(--waldo-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.waldo-page-summary-value,
.waldo-page-info-value,
.waldo-toplist-info-value,
.waldo-toplist-stat-value {
    display: block;
    color: var(--waldo-text);
    font-weight: 700;
    line-height: 1.25;
}

.waldo-page-summary-value {
    font-size: 20px;
}

.waldo-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 14px;
}

.waldo-page-info,
.waldo-toplist-info {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
}

.waldo-page-info {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.waldo-toplist-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waldo-page-info-item,
.waldo-toplist-info-item {
    padding: 11px 13px;
}

.waldo-page-info-item-status,
.waldo-toplist-info-item-status {
    grid-column: 1 / -1;
}

.waldo-toplist-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
}

.waldo-toplist-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.waldo-toplist-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    padding: 12px 16px;
    border-radius: 999px;
}

.waldo-toplist-tab strong,
.waldo-toplist-tab small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waldo-toplist-tab small {
    color: var(--waldo-muted);
}

.waldo-toplist-tab.is-active,
.waldo-pagination-link.is-current,
.waldo-rank-pill,
.waldo-chart-rank,
.waldo-toplist-rank,
.waldo-stat-pill-score,
.waldo-score-badge {
    border-color: var(--waldo-accent-dark);
    background: linear-gradient(180deg, var(--waldo-accent) 0%, var(--waldo-accent-dark) 100%);
    color: #fff !important;
}

.waldo-toplist-tab.is-active small {
    color: rgba(255,255,255,.92);
}

.waldo-toplist-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.waldo-toplist-row {
    padding: 14px;
}

.waldo-toplist-main {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    margin-bottom: 12px;
}

.waldo-toplist-rank,
.waldo-rank-pill,
.waldo-stat-pill,
.waldo-chart-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    box-sizing: border-box;
    white-space: nowrap;
}

.waldo-toplist-user,
.waldo-user-wrap,
.waldo-chart-user {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--waldo-text);
    font-weight: 700;
}

.waldo-toplist-user a,
.waldo-user-wrap a,
.waldo-toplist-user .username-coloured,
.waldo-user-wrap .username-coloured {
    font-weight: 700;
    text-decoration: none;
}

.waldo-toplist-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.waldo-toplist-stat {
    min-width: 0;
    padding: 12px;
}

.waldo-toplist-stat-value {
    overflow-wrap: anywhere;
}

.waldo-toplist-stat-score,
.waldo-stat-pill-score {
    background: linear-gradient(180deg, var(--waldo-accent-3) 0%, var(--waldo-accent-3-dark) 100%);
    color: #3c260c !important;
}

.waldo-board-wrap {
    margin-top: 14px;
}

.waldo-board-wrap-modern {
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.waldo-board-wrap .inner,
.waldo-board-wrap-modern .inner {
    min-width: 760px;
    padding: 0;
}

.waldo-board-table,
.waldo-board-table-modern {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.waldo-board-wrap-modern .waldo-board-table-modern thead th,
.waldo-board-wrap .waldo-board-table thead th,
table.waldo-board-table-modern thead th,
table.waldo-board-table thead th {
    padding: 10px 12px !important;
    border: 0 !important;
    background: var(--waldo-header) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.waldo-board-table td,
.waldo-board-table-modern td {
    padding: 11px 12px;
    border-top: 1px solid var(--waldo-border);
    background: var(--waldo-row) !important;
    color: var(--waldo-text);
    vertical-align: middle;
}

.waldo-board-table tbody tr:nth-child(even) td,
.waldo-board-table-modern tbody tr:nth-child(even) td {
    filter: brightness(.985);
}

.waldo-board-table tbody tr:hover td,
.waldo-board-table-modern tbody tr:hover td {
    filter: brightness(1.035);
}

.waldo-cell-rank,
.waldo-cell-score,
.waldo-cell-total {
    text-align: center;
    white-space: nowrap;
}

.waldo-cell-user,
.waldo-cell-last {
    min-width: 0;
}

.waldo-cell-last,
.waldo-last-wrap {
    white-space: nowrap;
}

.waldo-board-table-modern .waldo-cell-user a,
.waldo-board-table-modern .waldo-cell-user .username-coloured,
.waldo-board-table-modern .waldo-cell-user .username,
.waldo-board-table .waldo-cell-user a,
.waldo-board-table .waldo-cell-user .username-coloured,
.waldo-board-table .waldo-cell-user .username {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 700;
}

.waldo-stat-pill {
    background: var(--waldo-accent-soft);
    color: var(--waldo-text);
}

.waldo-rank-1 td:first-child,
.waldo-toplist-rank-1 {
    box-shadow: inset 4px 0 0 var(--waldo-accent-3);
}

.waldo-rank-2 td:first-child,
.waldo-toplist-rank-2 {
    box-shadow: inset 4px 0 0 var(--waldo-accent-2);
}

.waldo-rank-3 td:first-child,
.waldo-toplist-rank-3 {
    box-shadow: inset 4px 0 0 var(--waldo-accent);
}

.waldo-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.waldo-pagination-bottom {
    justify-content: center;
    margin-top: 16px;
}

.waldo-pagination-link,
.waldo-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--waldo-border);
    border-radius: 999px;
    background: var(--waldo-row);
    color: var(--waldo-text) !important;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.waldo-pagination-link:hover,
.waldo-pagination-link:focus {
    color: var(--waldo-text) !important;
    text-decoration: none;
    filter: brightness(1.04);
}

.waldo-pagination-link.is-current {
    color: #fff !important;
}

.waldo-pagination-ellipsis {
    border-color: transparent;
    background: transparent;
}

.waldo-chart {
    margin: 0 0 18px;
    padding: 18px;
}

.waldo-chart-head {
    margin-bottom: 14px;
}

.waldo-chart-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.waldo-chart-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.waldo-chart-labels {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.waldo-chart-total {
    color: var(--waldo-text);
    font-weight: 700;
    white-space: nowrap;
}

.waldo-chart-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--waldo-accent-soft);
}

.waldo-chart-bar {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--waldo-accent-2) 0%, var(--waldo-accent) 52%, var(--waldo-accent-3) 100%);
}

.waldo-ucp-current-note {
    margin-top: 8px;
    color: var(--waldo-muted);
}

.waldo-ucp-preview {
    display: block;
    width: 140px;
    height: 180px;
    max-width: 140px;
    max-height: 180px;
    object-fit: contain;
    object-position: center center;
}

.waldo-toplist-stat-value,
.waldo-stat-pill,
.waldo-rank-pill,
.waldo-page-summary-value,
.waldo-chart-total,
.waldo-chart-rank {
    font-variant-numeric: tabular-nums;
}

/* Seasonal text contrast helpers */
.waldo-theme-christmas .waldo-toplist-tab small,
.waldo-theme-christmas .waldo-page-summary-label,
.waldo-theme-christmas .waldo-page-info-label,
.waldo-theme-christmas .waldo-toplist-info-label,
.waldo-theme-christmas .waldo-toplist-stat-label,
.waldo-theme-christmas .waldo-chart-note,
.waldo-theme-christmas .waldo-page-intro,
.waldo-theme-christmas .waldo-last-wrap {
    color: var(--waldo-muted) !important;
}

.waldo-theme-halloween .waldo-toplist-tab small,
.waldo-theme-halloween .waldo-page-summary-label,
.waldo-theme-halloween .waldo-page-info-label,
.waldo-theme-halloween .waldo-toplist-info-label,
.waldo-theme-halloween .waldo-toplist-stat-label,
.waldo-theme-halloween .waldo-chart-note,
.waldo-theme-halloween .waldo-page-intro,
.waldo-theme-halloween .waldo-last-wrap {
    color: var(--waldo-muted) !important;
}

.waldo-theme-halloween .waldo-rank-pill,
.waldo-theme-halloween .waldo-chart-rank,
.waldo-theme-halloween .waldo-toplist-rank,
.waldo-theme-halloween .waldo-pagination-link.is-current {
    background: linear-gradient(180deg, #ff8d1f 0%, #d96510 100%) !important;
    border-color: #a64d09 !important;
    color: #fff !important;
}

.waldo-theme-halloween .waldo-stat-pill-score,
.waldo-theme-halloween .waldo-score-badge,
.waldo-theme-halloween .waldo-toplist-stat-score {
    background: linear-gradient(180deg, #6f3473 0%, #4e2455 100%) !important;
    border-color: #3b193f !important;
    color: #fff5ff !important;
}

.waldo-theme-halloween .waldo-board-wrap-modern .waldo-board-table-modern thead th,
.waldo-theme-halloween table.waldo-board-table-modern thead th {
    background: linear-gradient(180deg, #ff8d1f 0%, #c3560d 62%, #6b2f70 100%) !important;
}

.waldo-theme-easter .waldo-rank-pill,
.waldo-theme-easter .waldo-chart-rank,
.waldo-theme-easter .waldo-toplist-rank,
.waldo-theme-easter .waldo-pagination-link.is-current {
    background: linear-gradient(180deg, #87c7aa 0%, #66aa8a 100%) !important;
    border-color: #5b9278 !important;
    color: #fff !important;
}

.waldo-theme-easter .waldo-stat-pill-score,
.waldo-theme-easter .waldo-score-badge,
.waldo-theme-easter .waldo-toplist-stat-score {
    background: linear-gradient(180deg, #f2be62 0%, #e3a43f 100%) !important;
    border-color: #c88d32 !important;
    color: #5d3a10 !important;
}

@media (max-width: 900px) {
    .waldo-hunt {
        width: 124px !important;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .waldo-image-link {
        width: 124px;
        height: 160px;
    }

    .waldo-overlay-box {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: max(9px, env(safe-area-inset-top)) auto max(9px, env(safe-area-inset-bottom));
        border-radius: 18px;
    }

    .waldo-overlay-header {
        position: sticky;
        top: 0;
        z-index: 4;
        padding: 12px 14px;
    }

    .waldo-overlay-body {
        padding: 12px;
    }

    .waldo-overlay-footer-link {
        margin: 12px -12px -12px;
        padding: 12px;
    }

    .waldo-page-hero {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .waldo-page-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .waldo-toplist-tabs,
    .waldo-toplist-stats {
        grid-template-columns: 1fr;
    }

    .waldo-ucp-preview {
        width: 110px;
        height: 140px;
        max-width: 110px;
        max-height: 140px;
    }
}

@media (max-width: 700px) {
    .waldo-hunt {
        width: 110px !important;
    }

    .waldo-image-link {
        width: 110px;
        height: 145px;
    }

    .waldo-click-hint {
        max-width: 110px;
        padding: 4px 7px;
        font-size: 8px;
    }

    .waldo-page-summary,
    .waldo-page-info,
    .waldo-toplist-info {
        grid-template-columns: 1fr;
    }

    .waldo-toplist-shell,
    .waldo-chart,
    .waldo-page-hero {
        padding: 13px;
        border-radius: 17px;
    }

    .waldo-page-summary-value {
        font-size: 21px;
    }

    .waldo-toplist-main {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
    }

    .waldo-toplist-rank,
    .waldo-rank-pill,
    .waldo-chart-rank {
        min-width: 86px;
        padding: 6px 9px;
    }

    .waldo-chart-labels {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 8px 10px;
    }

    .waldo-chart-total {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .waldo-pagination {
        gap: 6px;
    }

    .waldo-pagination-link,
    .waldo-pagination-ellipsis {
        min-width: 36px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }

    .waldo-board-wrap-modern {
        border-radius: 16px;
    }

    .waldo-board-wrap .inner,
    .waldo-board-wrap-modern .inner,
    .waldo-board-table,
    .waldo-board-table-modern {
        min-width: 720px;
    }
}

@media (max-width: 900px) and (orientation: landscape), (max-height: 520px) {
    .waldo-hunt {
        width: 96px !important;
        right: 8px;
        bottom: 8px;
    }

    .waldo-image-link {
        width: 96px;
        height: 124px;
    }

    .waldo-overlay-box {
        width: min(96vw, 780px);
        max-height: calc(100dvh - 10px);
        margin: 5px auto;
    }

    .waldo-overlay-header,
    .waldo-overlay-body {
        padding: 10px 12px;
    }
}

/* ==========================================================
   Contrast + readability hotfix
   Keeps themed usernames, score pills and overlay scroll readable
   ========================================================== */

:root {
    --waldo-score-bg: linear-gradient(180deg, #2f85bd 0%, #23668f 100%);
    --waldo-score-text: #ffffff;
    --waldo-name-color: var(--waldo-text);
    --waldo-label-color: var(--waldo-muted);
}

body.waldo-theme-christmas,
.waldo-theme-christmas {
    --waldo-score-bg: linear-gradient(180deg, #f4d47e 0%, #c89a3b 100%);
    --waldo-score-text: #1b2b1f;
    --waldo-name-color: #fff6df;
    --waldo-label-color: #f7e2b8;
}

body.waldo-theme-halloween,
.waldo-theme-halloween {
    --waldo-score-bg: linear-gradient(180deg, #ff8d1f 0%, #df5f08 100%);
    --waldo-score-text: #ffffff;
    --waldo-name-color: #3f1807;
    --waldo-label-color: #6b3217;
}

body.waldo-theme-easter,
.waldo-theme-easter {
    --waldo-score-bg: linear-gradient(180deg, #f2be62 0%, #d99b38 100%);
    --waldo-score-text: #3d2507;
    --waldo-name-color: #513360;
    --waldo-label-color: #715781;
}

@media (prefers-color-scheme: dark) {
    body.waldo-theme-standard,
    .waldo-theme-standard {
        --waldo-score-bg: linear-gradient(180deg, #62b4e6 0%, #2e6f9f 100%);
        --waldo-score-text: #ffffff;
        --waldo-name-color: #f4fbff;
        --waldo-label-color: #d4e4f2;
    }
}

body.darkmode .waldo-theme-standard,
body.dark-mode .waldo-theme-standard,
body[data-theme="dark"] .waldo-theme-standard,
html[data-theme="dark"] .waldo-theme-standard,
body.waldo-theme-standard.darkmode,
body.waldo-theme-standard.dark-mode,
body[data-theme="dark"].waldo-theme-standard,
html[data-theme="dark"] body.waldo-theme-standard {
    --waldo-score-bg: linear-gradient(180deg, #62b4e6 0%, #2e6f9f 100%);
    --waldo-score-text: #ffffff;
    --waldo-name-color: #f4fbff;
    --waldo-label-color: #d4e4f2;
}

/* Force readable text inside Waldo cards/tables, even when phpBB user colours are very dark or very bright. */
.waldo-page-title,
.waldo-page-title a,
.waldo-chart-title,
.waldo-chart-title a,
.waldo-toplist-help,
.waldo-toplist-meta,
.waldo-page-intro,
.waldo-page-toolbar-note,
.waldo-last-wrap {
    color: var(--waldo-text) !important;
}

.waldo-page-summary-label,
.waldo-page-info-label,
.waldo-toplist-info-label,
.waldo-toplist-stat-label,
.waldo-chart-note,
.waldo-toplist-tab small {
    color: var(--waldo-label-color) !important;
}

.waldo-toplist-user,
.waldo-user-wrap,
.waldo-chart-user {
    color: var(--waldo-name-color);
}

.waldo-toplist-user a,
.waldo-user-wrap a,
.waldo-chart-user a,
.waldo-toplist-user .username,
.waldo-toplist-user .username-coloured,
.waldo-user-wrap .username,
.waldo-user-wrap .username-coloured,
.waldo-chart-user .username,
.waldo-chart-user .username-coloured,
.waldo-cell-user a,
.waldo-cell-user .username,
.waldo-cell-user .username-coloured {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
}

/* Bigger, stronger numbers. */
.waldo-toplist-stat-value,
.waldo-stat-pill,
.waldo-page-summary-value,
.waldo-chart-total,
.waldo-toplist-tab small {
    font-size: 14px;
    line-height: 1.25;
}

.waldo-toplist-stat-value small {
    font-size: 14px;
    font-weight: 700;
}

.waldo-stat-pill,
.waldo-rank-pill,
.waldo-chart-rank,
.waldo-toplist-rank {
    font-size: 14px;
    min-height: 42px;
}

.waldo-page-summary-value {
    font-size: 28px;
}

/* Score blocks now use dedicated contrast variables instead of the gold/brown combo everywhere. */
.waldo-stat-pill-score,
.waldo-score-badge,
.waldo-toplist-stat-score {
    background: var(--waldo-score-bg) !important;
    border-color: rgba(0, 0, 0, .16) !important;
    color: var(--waldo-score-text) !important;
}

.waldo-stat-pill-score *,
.waldo-score-badge *,
.waldo-toplist-stat-score *,
.waldo-toplist-stat-score .waldo-toplist-stat-label,
.waldo-toplist-stat-score .waldo-toplist-stat-value,
.waldo-toplist-stat-score small {
    color: var(--waldo-score-text) !important;
}

/* Christmas needs warm readable panels without washed-out gold text. */
.waldo-theme-christmas .waldo-page-title,
.waldo-theme-christmas .waldo-chart-title,
.waldo-theme-christmas .waldo-page-title a,
.waldo-theme-christmas .waldo-chart-title a {
    color: #fff6df !important;
}

.waldo-theme-christmas .waldo-board-table td,
.waldo-theme-christmas .waldo-board-table-modern td,
.waldo-theme-christmas .waldo-toplist-row,
.waldo-theme-christmas .waldo-chart-row,
.waldo-theme-christmas .waldo-page-info-item,
.waldo-theme-christmas .waldo-toplist-info-item,
.waldo-theme-christmas .waldo-page-summary-card {
    color: #fff6df !important;
}

/* Halloween stays orange and readable, not pitch black. */
.waldo-theme-halloween .waldo-page-title,
.waldo-theme-halloween .waldo-chart-title,
.waldo-theme-halloween .waldo-page-title a,
.waldo-theme-halloween .waldo-chart-title a {
    color: #4c1d08 !important;
}

.waldo-theme-halloween .waldo-board-table td,
.waldo-theme-halloween .waldo-board-table-modern td,
.waldo-theme-halloween .waldo-toplist-row,
.waldo-theme-halloween .waldo-chart-row,
.waldo-theme-halloween .waldo-page-info-item,
.waldo-theme-halloween .waldo-toplist-info-item,
.waldo-theme-halloween .waldo-page-summary-card {
    color: #3f1807 !important;
}

/* Dark mode: avoid low-contrast gold/brown text completely. */
body.darkmode .waldo-theme-standard .waldo-board-table td,
body.darkmode .waldo-theme-standard .waldo-board-table-modern td,
body.darkmode .waldo-theme-standard .waldo-toplist-row,
body.darkmode .waldo-theme-standard .waldo-chart-row,
body.dark-mode .waldo-theme-standard .waldo-board-table td,
body.dark-mode .waldo-theme-standard .waldo-board-table-modern td,
body.dark-mode .waldo-theme-standard .waldo-toplist-row,
body.dark-mode .waldo-theme-standard .waldo-chart-row,
body[data-theme="dark"] .waldo-theme-standard .waldo-board-table td,
body[data-theme="dark"] .waldo-theme-standard .waldo-board-table-modern td,
body[data-theme="dark"] .waldo-theme-standard .waldo-toplist-row,
body[data-theme="dark"] .waldo-theme-standard .waldo-chart-row {
    color: #edf6ff !important;
}

/* Overlay and leaderboard scrolling: table/card content keeps its width and scrolls horizontally inside the overlay. */
.waldo-overlay-body,
.waldo-overlay-content,
.waldo-board-wrap-modern {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

.waldo-overlay-content .waldo-toplist-shell,
.waldo-overlay-content .waldo-board-wrap-modern,
.waldo-overlay-content .waldo-chart {
    min-width: 760px;
}

@media (max-width: 700px) {
    .waldo-toplist-stat-value,
    .waldo-stat-pill,
    .waldo-chart-total,
    .waldo-toplist-tab small {
        font-size: 16px;
    }

    .waldo-toplist-stat-value small {
        font-size: 13px;
    }

    .waldo-page-summary-value {
        font-size: 24px;
    }
}



/* ==========================================================
   Badge size + username badge polish
   Keeps phpBB group colours visible, but gives nicknames a safe themed backing.
   ========================================================== */

:root {
    --waldo-name-badge-bg: rgba(255, 255, 255, .72);
    --waldo-name-badge-border: rgba(47, 133, 189, .18);
}

body.waldo-theme-christmas,
.waldo-theme-christmas {
    --waldo-name-badge-bg: rgba(255, 246, 223, .76);
    --waldo-name-badge-border: rgba(244, 212, 126, .24);
}

body.waldo-theme-halloween,
.waldo-theme-halloween {
    --waldo-name-badge-bg: rgba(255, 248, 235, .78);
    --waldo-name-badge-border: rgba(244, 123, 22, .22);
}

body.waldo-theme-easter,
.waldo-theme-easter {
    --waldo-name-badge-bg: rgba(255, 255, 255, .76);
    --waldo-name-badge-border: rgba(233, 121, 174, .22);
}

@media (prefers-color-scheme: dark) {
    body.waldo-theme-standard,
    .waldo-theme-standard {
        --waldo-name-badge-bg: rgba(245, 250, 255, .88);
        --waldo-name-badge-border: rgba(98, 180, 230, .22);
    }
}

body.darkmode .waldo-theme-standard,
body.dark-mode .waldo-theme-standard,
body[data-theme="dark"] .waldo-theme-standard,
html[data-theme="dark"] .waldo-theme-standard {
    --waldo-name-badge-bg: rgba(245, 250, 255, .88);
    --waldo-name-badge-border: rgba(98, 180, 230, .22);
}

.waldo-rank-pill,
.waldo-chart-rank,
.waldo-toplist-rank {
    min-width: 64px !important;
    min-height: 32px !important;
    padding: 4px 12px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.waldo-stat-pill {
    min-width: 70px !important;
    min-height: 32px !important;
    padding: 4px 12px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.waldo-stat-pill-score {
    min-width: 86px !important;
    font-size: 17px !important;
}

.waldo-toplist-main {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
}

.waldo-user-wrap,
.waldo-toplist-user,
.waldo-chart-user {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    width: fit-content;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid var(--waldo-name-badge-border);
    border-radius: 999px;
    background: var(--waldo-name-badge-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 16px rgba(0,0,0,.08);
    overflow: hidden;
}

.waldo-user-wrap a,
.waldo-toplist-user a,
.waldo-chart-user a,
.waldo-user-wrap .username,
.waldo-user-wrap .username-coloured,
.waldo-toplist-user .username,
.waldo-toplist-user .username-coloured,
.waldo-chart-user .username,
.waldo-chart-user .username-coloured {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    text-decoration: none;
}

.waldo-board-table-modern .waldo-cell-user a,
.waldo-board-table-modern .waldo-cell-user .username-coloured,
.waldo-board-table-modern .waldo-cell-user .username,
.waldo-board-table .waldo-cell-user a,
.waldo-board-table .waldo-cell-user .username-coloured,
.waldo-board-table .waldo-cell-user .username {
    display: inline-block;
}

@media (max-width: 700px) {
    .waldo-rank-pill,
    .waldo-chart-rank,
    .waldo-toplist-rank {
        min-width: 58px !important;
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 14px !important;
    }

    .waldo-stat-pill {
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 14px !important;
    }

    .waldo-stat-pill-score {
        font-size: 16px !important;
    }

    .waldo-user-wrap,
    .waldo-toplist-user,
    .waldo-chart-user {
        padding: 4px 9px;
    }
}

/* ==========================================================
   Nickname readability + last-found sizing polish
   ========================================================== */


/* The wrapper is only the readable chip. Do not overwrite phpBB group colours inside it. */
.waldo-user-wrap,
.waldo-toplist-user,
.waldo-chart-user {
    color: inherit !important;
    background: var(--waldo-name-badge-bg) !important;
    border-color: var(--waldo-name-badge-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 5px 14px rgba(0,0,0,.10) !important;
}

.waldo-user-wrap a,
.waldo-toplist-user a,
.waldo-chart-user a,
.waldo-user-wrap .username,
.waldo-user-wrap .username-coloured,
.waldo-toplist-user .username,
.waldo-toplist-user .username-coloured,
.waldo-chart-user .username,
.waldo-chart-user .username-coloured,
.waldo-cell-user a,
.waldo-cell-user .username,
.waldo-cell-user .username-coloured {
    text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.18) !important;
}

/* Last-found text was overpowering the cards. Keep it readable, but not billboard-sized. */
.waldo-toplist-stat-last .waldo-toplist-stat-value,
.waldo-last-wrap {
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.waldo-toplist-stat-last .waldo-toplist-stat-label {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

@media (max-width: 700px) {
    .waldo-toplist-stat-last .waldo-toplist-stat-value,
    .waldo-last-wrap {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .waldo-toplist-stat-last {
        padding: 10px 12px !important;
    }
}

/* ==========================================================
   Mobile overlay fit fix
   The overlay must fit inside the phone viewport. No sideways scroll.
   ========================================================== */
@media (max-width: 700px) {
    .waldo-overlay {
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .waldo-overlay-box {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: max(8px, env(safe-area-inset-top)) auto max(8px, env(safe-area-inset-bottom)) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-header {
        min-width: 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-header strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .waldo-overlay-close {
        flex: 0 0 auto !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 30px !important;
    }

    .waldo-overlay-body,
    .waldo-overlay-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-body {
        padding: 12px !important;
    }

    .waldo-overlay-content .waldo-toplist-shell,
    .waldo-overlay-content .waldo-board-wrap-modern,
    .waldo-overlay-content .waldo-chart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-content .waldo-toplist-shell {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .waldo-overlay-content .waldo-toplist-meta,
    .waldo-overlay-content .waldo-toplist-help,
    .waldo-overlay-content .waldo-toplist-mode,
    .waldo-overlay-content .waldo-toplist-info-value,
    .waldo-overlay-content .waldo-toplist-stat-value {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .waldo-overlay-content .waldo-toplist-info,
    .waldo-overlay-content .waldo-toplist-tabs,
    .waldo-overlay-content .waldo-toplist-stats {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .waldo-overlay-content .waldo-toplist-list,
    .waldo-overlay-content .waldo-toplist-row,
    .waldo-overlay-content .waldo-toplist-info-item,
    .waldo-overlay-content .waldo-toplist-tab,
    .waldo-overlay-content .waldo-toplist-stat {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-content .waldo-toplist-main {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .waldo-overlay-content .waldo-toplist-rank {
        min-width: 56px !important;
        max-width: 92px !important;
        padding: 4px 10px !important;
        font-size: 14px !important;
    }

    .waldo-overlay-content .waldo-toplist-user {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .waldo-overlay-content .waldo-toplist-tab {
        min-height: 58px !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    .waldo-overlay-content .waldo-toplist-stat {
        padding: 10px 12px !important;
        border-radius: 15px !important;
    }

    .waldo-overlay-footer-link {
        width: auto !important;
        max-width: 100% !important;
        margin: 12px -12px -12px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .waldo-overlay-footer-link a {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   Mobile leaderboard containment + calmer score typography
   Fixes sideways dragging on phones and oversized desktop points.
   ========================================================== */

/* Keep the large summary score readable without turning into a billboard. */
/* Grote cijfers iets groter */
.waldo-page-summary-value,
.waldo-toplist-stat-score .waldo-toplist-stat-value {
    font-size: clamp(13px, 1vw, 16px) !important;
    font-weight: 700;
    line-height: 1.2;
}

/* Labels kleiner */
.waldo-toplist-stat-score,
.waldo-score-badge {
    font-size: clamp(12px, 0.9vw, 14px) !important;
}

.waldo-toplist-stat-score .waldo-toplist-stat-label {
    font-size: clamp(10px, 0.8vw, 13px) !important;
    line-height: 1.2 !important;
}

/* Desktop/tablet leaderboard score pills: not huge, not tiny. */
.waldo-board-table-modern .waldo-stat-pill-score,
.waldo-board-table .waldo-stat-pill-score {
    font-size: 16px !important;
    min-width: 76px !important;
    max-width: 150px !important;
    padding: 5px 12px !important;
    white-space: normal !important;
}

@media (max-width: 700px) {
    /* The leaderboard must never force the page wider than the phone. */
    .waldo-board-wrap,
    .waldo-board-wrap-modern,
    .waldo-board-wrap .inner,
    .waldo-board-wrap-modern .inner,
    .waldo-board-table,
    .waldo-board-table-modern {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .waldo-board-wrap,
    .waldo-board-wrap-modern {
        padding: 0 !important;
    }

    /* Convert the table to compact mobile cards instead of a 720px table. */
    .waldo-board-table,
    .waldo-board-table-modern,
    .waldo-board-table tbody,
    .waldo-board-table-modern tbody,
    .waldo-board-table tr,
    .waldo-board-table-modern tr,
    .waldo-board-table td,
    .waldo-board-table-modern td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .waldo-board-table thead,
    .waldo-board-table-modern thead {
        display: none !important;
    }

    .waldo-board-table tr,
    .waldo-board-table-modern tr {
        margin: 10px 10px 14px !important;
        width: calc(100% - 20px) !important;
        border: 1px solid var(--waldo-border) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: var(--waldo-row) !important;
    }

    .waldo-board-table td,
    .waldo-board-table-modern td {
        display: grid !important;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(255,255,255,.35) !important;
    }

    .waldo-board-table td:first-child,
    .waldo-board-table-modern td:first-child {
        border-top: 0 !important;
    }

    .waldo-board-table td::before,
    .waldo-board-table-modern td::before {
        content: attr(data-label) ":";
        min-width: 0 !important;
        color: var(--waldo-label-color) !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        font-style: italic !important;
        overflow-wrap: anywhere !important;
    }

    .waldo-cell-rank,
    .waldo-cell-score,
    .waldo-cell-total,
    .waldo-cell-last,
    .waldo-cell-user {
        text-align: left !important;
        white-space: normal !important;
    }

    .waldo-rank-pill,
    .waldo-stat-pill,
    .waldo-stat-pill-score,
    .waldo-user-wrap,
    .waldo-last-wrap {
        max-width: 100% !important;
        min-width: 0 !important;
        width: fit-content !important;
        justify-self: start !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .waldo-rank-pill {
        min-width: 56px !important;
        font-size: 14px !important;
    }

    .waldo-stat-pill,
    .waldo-stat-pill-score {
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    .waldo-last-wrap {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Summary cards on mobile: keep 108.50 on one line when possible. */
    .waldo-page-summary-card,
    .waldo-toplist-stat-score {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .waldo-page-summary-value,
    .waldo-toplist-stat-score .waldo-toplist-stat-value,
    .waldo-toplist-stat-score,
    .waldo-score-badge {
        font-size: clamp(18px, 11vw, 18px) !important;
        line-height: 1.05 !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
}

/* ==========================================================
   Final mobile/portrait leaderboard fit + compact hero stats
   Keeps phpBB group colours intact and removes sideways page drag.
   ========================================================== */

/* Compact the top summary cards on the leaderboard page. */
.waldo-page-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr) !important;
    gap: 14px !important;
    padding: 15px !important;
}

.waldo-page-title {
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.15 !important;
}

.waldo-page-intro {
    font-size: clamp(12px, 1.25vw, 15px) !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
}

.waldo-page-summary {
    gap: 9px !important;
}

.waldo-page-summary-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
}

.waldo-page-summary-label {
    margin-bottom: 4px !important;
    font-size: clamp(9px, .9vw, 12px) !important;
    line-height: 1.18 !important;
    letter-spacing: .035em !important;
}

.waldo-page-summary-value {
    font-size: clamp(18px, 2vw, 20px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: .01em !important;
}

/* Desktop/tablet table: allow the last column to fit instead of pushing the page wider. */
.waldo-board-wrap,
.waldo-board-wrap-modern,
.waldo-board-wrap .inner,
.waldo-board-wrap-modern .inner {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.waldo-board-table-modern {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}

.waldo-board-table-modern th,
.waldo-board-table-modern td {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.waldo-board-table-modern .waldo-cell-last,
.waldo-board-table-modern th:last-child {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.waldo-last-wrap {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(12px, 1.15vw, 13px) !important;
    line-height: 1.25 !important;
}

/* Phone and narrow portrait/tablet: real card layout, no horizontal drag. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
    html,
    body,
    .wrap,
    #wrap,
    .page-body,
    #page-body,
    .waldo-page,
    .waldo-page-panel,
    .waldo-page-panel-modern,
    .waldo-page-panel .inner,
    .waldo-page-panel-modern .inner,
    .waldo-board-wrap,
    .waldo-board-wrap-modern,
    .waldo-board-wrap .inner,
    .waldo-board-wrap-modern .inner {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .waldo-page-hero {
        display: block !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .waldo-page-hero-copy {
        margin-bottom: 10px !important;
    }

    .waldo-page-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .waldo-page-summary-card {
        padding: 9px 8px !important;
        min-height: auto !important;
    }

    .waldo-page-summary-label {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .waldo-page-summary-value {
        font-size: clamp(18px, 4.2vw, 25px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .waldo-board-wrap,
    .waldo-board-wrap-modern {
        padding: 0 !important;
        border-radius: 18px !important;
    }

    .waldo-board-table,
    .waldo-board-table-modern,
    .waldo-board-table tbody,
    .waldo-board-table-modern tbody,
    .waldo-board-table tr,
    .waldo-board-table-modern tr,
    .waldo-board-table td,
    .waldo-board-table-modern td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .waldo-board-table thead,
    .waldo-board-table-modern thead {
        display: none !important;
    }

    .waldo-board-table tr,
    .waldo-board-table-modern tr {
        margin: 9px 8px 12px !important;
        width: calc(100% - 16px) !important;
        border: 1px solid var(--waldo-border) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: var(--waldo-row) !important;
    }

    .waldo-board-table td,
    .waldo-board-table-modern td {
        display: grid !important;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 8px 9px !important;
        text-align: left !important;
        border-top: 1px solid rgba(255,255,255,.35) !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .waldo-board-table td:first-child,
    .waldo-board-table-modern td:first-child {
        border-top: 0 !important;
    }

    .waldo-board-table td::before,
    .waldo-board-table-modern td::before {
        content: attr(data-label) ":";
        min-width: 0 !important;
        color: var(--waldo-label-color) !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        font-style: italic !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .waldo-rank-pill,
    .waldo-stat-pill,
    .waldo-stat-pill-score,
    .waldo-user-wrap,
    .waldo-last-wrap {
        max-width: 100% !important;
        min-width: 0 !important;
        width: fit-content !important;
        justify-self: start !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    .waldo-rank-pill {
        min-width: 52px !important;
        padding: 5px 12px !important;
        font-size: 14px !important;
    }

    .waldo-stat-pill,
    .waldo-stat-pill-score {
        min-width: 52px !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
    }

    .waldo-last-wrap {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 560px) {
    .waldo-page-summary {
        grid-template-columns: 1fr !important;
    }

    .waldo-page-summary-card {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .waldo-page-summary-label {
        margin: 0 !important;
        max-width: 58% !important;
    }

    .waldo-page-summary-value {
        font-size: 20px !important;
        text-align: right !important;
    }

    .waldo-board-table td,
    .waldo-board-table-modern td {
        grid-template-columns: minmax(84px, 38%) minmax(0, 1fr) !important;
        padding: 8px !important;
    }
}



/* ==========================================================
   v1.1.1 clean isolation + final readability
   Theme only Waldo blocks, not the full phpBB body.
   ========================================================== */
.waldo-page.waldo-theme-page {
    background-image: radial-gradient(circle at top right, var(--waldo-soft), transparent 34%);
    background-attachment: scroll;
}

.waldo-page .waldo-toplist-meta,
.waldo-page .waldo-page-toolbar-note,
.waldo-page .pagination,
.waldo-page .pagination span,
.waldo-page .pagination a,
.waldo-page .waldo-pagination,
.waldo-page .waldo-pagination span,
.waldo-page .waldo-pagination a {
    color: #23384f !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    .waldo-page.waldo-theme-standard .waldo-toplist-meta,
    .waldo-page.waldo-theme-standard .waldo-page-toolbar-note,
    .waldo-page.waldo-theme-standard .pagination,
    .waldo-page.waldo-theme-standard .pagination span,
    .waldo-page.waldo-theme-standard .pagination a,
    .waldo-page.waldo-theme-standard .waldo-pagination,
    .waldo-page.waldo-theme-standard .waldo-pagination span,
    .waldo-page.waldo-theme-standard .waldo-pagination a {
        color: #24384d !important;
        opacity: 1 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
        font-weight: 700 !important;
    }
}

body.darkmode .waldo-page.waldo-theme-standard .waldo-toplist-meta,
body.dark-mode .waldo-page.waldo-theme-standard .waldo-toplist-meta,
body[data-theme="dark"] .waldo-page.waldo-theme-standard .waldo-toplist-meta,
body.darkmode .waldo-page.waldo-theme-standard .waldo-page-toolbar-note,
body.dark-mode .waldo-page.waldo-theme-standard .waldo-page-toolbar-note,
body[data-theme="dark"] .waldo-page.waldo-theme-standard .waldo-page-toolbar-note {
    color: #24384d !important;
    opacity: 1 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
    font-weight: 700 !important;
}