/* ==========================================================================
   Play2Dollar Universal Cross-Device Responsive Hardening
   Ensures seamless responsive adaptation from 320px to 4K displays.
   Prevents horizontal overflow, optimizes touch targets, fluid typography,
   table wrappers, modal sizing, and flex/grid column collapse.
   ========================================================================== */

/* 1. Global Viewport & Horizontal Overflow Shield */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Fluid Media & Assets */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* 3. Universal Container Bounds */
.ep-container, .shell, .p2d-site-container, .p2d-surveys-page, .rp-page, .pf-content, .tp-content, .ap-content, .rd-page {
    width: 100% !important;
    max-width: min(100%, 1440px);
    box-sizing: border-box !important;
}

/* 4. Table Containers & Smooth Touch Scrolling */
.lb-table-panel, .rp-ledger-table-wrap, .pf-transactions-wrap, .rd-history-wrap, .ep-table-wrap, .rewards-page .p2d-reel-history {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
}

/* 5. Dialogs, Modals, & Drawers on all mobile viewports */
dialog, .p15-dialog, .p16-profile-dialog, .ep-dialog, .rd-dialog, .rp-dialog, .p2d-landing-auth-dialog, .rp-quest-dialog, .p2d-prize-dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 32px) !important;
    box-sizing: border-box !important;
}

/* Prevent auto-zoom on mobile inputs */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 6. Tablet Breakpoints (max-width: 1024px) */
@media (max-width: 1024px) {
    .ep-discovery-grid, .ep-provider-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
    .p2d-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .p2d-tips-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 7. Mobile Breakpoints (max-width: 768px) */
@media (max-width: 768px) {
    .ep-top-header-inner {
        padding-inline: 12px !important;
    }
    
    .p2d-walls-grid {
        grid-template-columns: 1fr !important;
    }
    
    .lb-podium {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .lb-podium .lb-podium-card {
        min-height: auto !important;
        padding: 16px !important;
    }
    
    .lb-podium .lb-podium-card--1 {
        order: -1 !important;
    }
    
    .lb-countdown {
        gap: 6px !important;
    }
    
    .lb-time-unit {
        padding: 10px 4px !important;
    }
    
    .lb-time-unit strong {
        font-size: 20px !important;
    }
    
    .ap-hero {
        padding: 20px 16px !important;
    }
    
    .ap-timeline-columns {
        grid-template-columns: 1fr !important;
    }
    
    .pf-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .pf-stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .rd-method-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }
}

/* 8. Small Phone Breakpoints (max-width: 480px) */
@media (max-width: 480px) {
    .ep-container, .shell {
        width: calc(100% - 20px) !important;
        padding-inline: 4px !important;
    }
    
    button, a.button, .p2d-btn-primary, .p2d-btn-secondary, .ep-button {
        min-height: 42px;
    }
    
    .p2d-surveys-page {
        padding-inline: 10px !important;
        gap: 20px !important;
    }
    
    .p2d-survey-hero {
        padding: 18px 14px !important;
    }
    
    .p2d-survey-hero h1 {
        font-size: 24px !important;
    }
    
    .p2d-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .p2d-profile-card {
        padding: 14px !important;
    }
    
    .p2d-profile-title-row {
        gap: 6px !important;
    }
    
    .p2d-profile-info strong {
        font-size: 13px !important;
    }
    
    .p2d-profile-progress-wrap {
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    .p2d-progress-track {
        width: 100% !important;
    }
    
    .p2d-profile-right {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .p2d-profile-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .p2d-survey-toolbar {
        padding: 14px !important;
        gap: 12px !important;
    }
    
    .p2d-toolbar-right {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .p2d-sort-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        text-align: center !important;
    }
    
    .p2d-sort-tab {
        padding: 6px 4px !important;
        font-size: 10.5px !important;
        text-align: center !important;
    }
    
    .p2d-refresh-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .p2d-survey-item {
        padding: 14px 12px !important;
        gap: 12px !important;
    }
    
    .p2d-survey-payout {
        font-size: 16px !important;
    }
    
    .p2d-start-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
    
    .p2d-tips-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hero-copy h1 {
        font-size: 28px !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-actions .button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .payout-caption {
        font-size: 11px !important;
    }
    
    .payout-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
}

/* 9. Extra Small Screens (max-width: 360px - Galaxy Fold / Old SE) */
@media (max-width: 360px) {
    .ep-header-brand img {
        max-width: 90px !important;
        height: auto !important;
    }
    .ep-header-balance {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }
    .ep-header-cashout-btn {
        font-size: 10px !important;
    }
    .lb-countdown {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}


/* ==========================================================================
   10. Play2Dollar Signature Themed Controls (Checkboxes, Scrollbars, Switches, Progress)
   ========================================================================== */
:root {
    accent-color: #9933ff !important;
}

/* Neutral scrollbars retain native interaction without a colored glow. */
* { scrollbar-width: auto !important; scrollbar-color: #5e636d #0c1017 !important; }
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: #0c1017 !important; }
::-webkit-scrollbar-thumb { background: #5e636d !important; border: 2px solid #0c1017 !important; border-radius: 7px !important; box-shadow: none !important; }
::-webkit-scrollbar-thumb:hover { background: #7a808c !important; box-shadow: none !important; }

/* --- THEMED CHECKBOXES (Across Entire Website & Admin) --- */
input[type="checkbox"] {
    accent-color: #9933ff !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 5px !important;
    border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
    background-color: rgba(14, 16, 28, 0.85) !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-grid !important;
    place-content: center !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer):hover {
    border-color: #c084fc !important;
    background-color: rgba(22, 25, 42, 0.95) !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
    transform: scale(1.05) !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer):checked {
    background: linear-gradient(135deg, #9933ff 0%, #7c3aed 100%) !important;
    border-color: #d8b4fe !important;
    box-shadow: 0 0 12px rgba(153, 51, 255, 0.55) !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer):checked::after {
    content: '' !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) translate(-0.5px, -0.5px) !important;
    box-sizing: border-box !important;
    display: block !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer):focus-visible {
    outline: 2px solid #c084fc !important;
    outline-offset: 2px !important;
}

input[type="checkbox"]:not(.sr-only):not(.peer):disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- THEMED TOGGLE SWITCHES & CHECK BARS --- */
.pf-toggle input:checked + span,
.p2d-toggle input:checked + span,
.peer:checked ~ .peer-checked\:bg-purple-600,
.peer:checked ~ .peer-checked\:bg-primary,
.peer:checked ~ div.w-11,
.peer:checked ~ div.w-9 {
    background-color: #9933ff !important;
    box-shadow: 0 0 12px rgba(153, 51, 255, 0.5) !important;
}

/* --- THEMED PROGRESS BARS --- */
progress {
    accent-color: #9933ff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
}

progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #9933ff 0%, #7c3aed 50%, #4ade80 100%) !important;
    border-radius: 999px !important;
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, #9933ff 0%, #7c3aed 50%, #4ade80 100%) !important;
    border-radius: 999px !important;
}
/* Play2Dollar responsive refinement, November 2026. */
/* Requested controls: use the established Copy link accent, with quiet hover. */
body.surveys-page #main-content .sv-page .sv-sort button{box-shadow:none!important}
body.surveys-page #main-content .sv-page .sv-sort button:not([aria-pressed=true]):hover{background:#232630!important;border-color:#ffffff18!important;color:#fff!important}
body.surveys-page #main-content .sv-page .sv-sort button[aria-pressed=true],body.surveys-page #main-content .sv-page .sv-sort button[aria-pressed=true]:hover{background:#9933ff!important;border-color:#9933ff!important;color:#fff!important}
body.surveys-page #main-content .sv-page .sv-sort button:focus-visible{outline:2px solid #c6a1ec;outline-offset:2px}
body.surveys-page #main-content .sv-profile-progress progress{accent-color:#9933ff!important}
body.surveys-page #main-content .sv-profile-progress progress::-webkit-progress-value{background:#9933ff!important}
body.surveys-page #main-content .sv-profile-progress progress::-moz-progress-bar{background:#9933ff!important}
body.surveys-page #main-content .sv-page .sv-dialog button[type=submit].sv-button-primary{background:#9933ff!important;color:#fff!important;box-shadow:none!important}
body.surveys-page #main-content .sv-page .sv-dialog button[type=submit].sv-button-primary:hover{background:#8829e8!important}

/* Footer follows the content and reaches the bottom on shorter pages. */
body.earn-page .ep-app-layout{min-height:100dvh}
body.earn-page .ep-app-main{min-height:100dvh!important}
body.earn-page .ep-app-main>main#main-content{flex:1 0 auto!important;min-width:0}
body.earn-page .ep-app-main>footer.ep-page-footer{margin-top:auto!important;margin-bottom:0!important}

/* Offer cards remain operable through their existing full-card button. */
body.earn-page #ep-featured-banners .ep-banner-card{container:featured-banner / inline-size}
@container featured-banner (max-width:300px){
body.earn-page #ep-featured-banners .ep-banner-card .ep-banner-action{display:none!important}
body.earn-page #ep-featured-banners .ep-banner-card .ep-banner-info{flex:1 1 100%!important;width:100%!important;max-width:100%!important}
body.earn-page #ep-featured-banners .ep-banner-card .ep-banner-title{width:100%;font-size:clamp(12px,5.2cqw,16px)!important;line-height:1.3!important;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* Targeted carbon surfaces for dialogs, including offer detail variants. */
body.earn-page dialog{--p2d-surface:#0b0e13;--p2d-surface-raised:#171b22;--ep-card:#171b22;--p2d-spotlight:linear-gradient(transparent,transparent);background:#0b0e13!important;color:#f5f6f8;border-color:#ffffff16!important;background-image:none!important}
body.earn-page dialog :is(.ep-dialog-heading,.ep-offer-dialog-footer,.ep-offer-dialog-body,.ep-offer-modal-content,.p15-dialog-body,.rd-dialog-body){background:#0b0e13!important;background-image:none!important}
body.earn-page dialog :is(.ep-offer-hero-card,.ep-milestones-grid>li,.ep-offer-rules,.ep-dialog-milestone-item,.ep-dialog-banner,.ep-dialog-section,.p16-profile-fields input,.p16-profile-fields select){background:#171b22!important;background-image:none!important;border-color:#ffffff14!important}
body.earn-page dialog .ep-offer-total-reward{flex-wrap:wrap}
body.earn-page dialog .ep-offer-total-reward>strong{white-space:nowrap}
@media(max-width:560px){body.earn-page dialog .ep-milestones-grid{grid-template-columns:minmax(0,1fr)!important}body.earn-page dialog .ep-offer-dialog-body{padding:16px!important}body.earn-page dialog .ep-dialog-heading{padding:16px!important}body.earn-page dialog .ep-offer-total-reward>strong{font-size:21px!important}}

/* Affiliates were explicitly selected for dark neutral cards. */
body.affiliate-page #main-content :is(.ap-hero,.ap-stats,.ap-eligibility,.ap-affiliates-panel,.ap-next-unlock,.ap-milestones,.ap-empty,.ap-tabs){background:#12161d!important;background-image:none!important;border-color:#ffffff12!important;box-shadow:none!important}
body.affiliate-page #main-content :is(.ap-empty-head,.ap-table thead,.ap-referral-controls input,.ap-share a,.ap-share-pill){background:#1a1f27!important;background-image:none!important;border-color:#ffffff14!important}
body.affiliate-page #main-content .ap-hero{grid-template-columns:minmax(0,1fr) minmax(90px,18%)!important;gap:24px!important}
body.affiliate-page #main-content .ap-hero h1{white-space:normal!important;overflow-wrap:normal!important}
body.affiliate-page #main-content .ap-hero-avatar{max-height:160px!important}
body.affiliate-page #main-content .ap-referral-controls{flex-wrap:wrap}
body.affiliate-page #main-content .ap-referral-controls input{flex:1 1 220px;min-width:0}
body.affiliate-page #main-content .ap-stats{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.2fr)}
@media(max-width:1100px){body.affiliate-page #main-content .ap-hero{grid-template-columns:minmax(0,1fr)!important}body.affiliate-page #main-content .ap-network{display:none!important}body.affiliate-page #main-content .ap-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:20px}body.affiliate-page #main-content .ap-stats .ap-account-stat{grid-column:1/-1;border-top:1px solid #ffffff12;padding-top:16px}body.affiliate-page #main-content .ap-stats>div:nth-child(even){border-right:0}body.affiliate-page #main-content .ap-missions-layout{grid-template-columns:minmax(0,1fr)!important}body.affiliate-page #main-content .ap-empty{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;min-height:230px!important}body.affiliate-page #main-content .ap-empty>img{display:none!important}}

/* Profile uses actual available component width, including the desktop sidebar. */
body.profile-page #main-content .pf-content .pf-account-band{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:22px!important;padding:20px!important}
body.profile-page #main-content .pf-content .pf-identity{flex:1 1 290px!important;min-width:0!important;width:auto!important;gap:16px!important}
body.profile-page #main-content .pf-content .pf-identity-copy{flex:1 1 auto;min-width:0}
body.profile-page #main-content .pf-content .pf-identity h1{font-size:24px!important;word-break:normal!important;overflow-wrap:break-word!important}
body.profile-page #main-content .pf-content .pf-identity-email{overflow-wrap:anywhere;font-size:13px!important}
body.profile-page #main-content .pf-content .pf-avatar{display:flex!important;flex:0 0 56px!important;width:56px!important;height:56px!important}
body.profile-page #main-content .pf-content .pf-tier{flex:1 1 270px!important;min-width:0!important;width:auto!important;max-width:100%!important}
body.profile-page #main-content .pf-content .pf-wallet-overview{container:profile-wallet / inline-size;min-width:0}
body.profile-page #main-content .pf-content .pf-wallet-overview .pf-stats-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
body.profile-page #main-content .pf-content .pf-stats-grid .pf-stat-card{min-width:0!important;min-height:160px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:16px!important}
body.profile-page #main-content .pf-content .pf-stats-grid .pf-stat-card h2{font-size:12px!important;min-height:30px;line-height:1.35!important;margin:0!important}
body.profile-page #main-content .pf-content .pf-stats-grid .pf-stat-card>strong{font-size:clamp(22px,4.8cqw,32px)!important;line-height:1.2!important;margin:10px 0 5px!important;overflow-wrap:anywhere}
body.profile-page #main-content .pf-content .pf-stats-grid .pf-stat-card p{font-size:11px!important;line-height:1.45!important}
body.profile-page #main-content .pf-content .pf-stats-grid .pf-cashout{margin-top:auto!important;padding-top:6px!important}
@container profile-wallet (min-width:820px){body.profile-page #main-content .pf-content .pf-wallet-overview .pf-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
body.profile-page #main-content .pf-activity{container:profile-activity / inline-size;min-width:0}
body.profile-page #main-content .pf-activity-heading{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important}
body.profile-page #main-content .pf-tabs{display:flex!important;flex-wrap:wrap!important;gap:4px!important;max-width:100%!important}
body.profile-page #main-content .pf-tabs>button{white-space:nowrap!important;padding:10px 12px!important;min-height:40px}
body.profile-page #main-content .pf-table-wrap{max-width:100%;overflow-x:auto}
body.profile-page #main-content .pf-table{table-layout:auto!important}
body.profile-page #main-content .pf-table .pf-status{display:inline-flex!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;flex-shrink:0;max-width:none!important;line-height:1.4!important}
body.profile-page #main-content .pf-table .pf-status::before{flex:none}
@container profile-activity (max-width:730px){
body.profile-page #main-content .pf-table,body.profile-page #main-content .pf-table tbody{display:block!important;width:100%!important;min-width:0!important}
body.profile-page #main-content .pf-table thead{position:absolute!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important}
body.profile-page #main-content .pf-table tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;padding:16px!important;border-bottom:1px solid #ffffff12!important}
body.profile-page #main-content .pf-table td{display:block!important;min-width:0!important;width:auto!important;padding:0!important;border:0!important;font-size:12px!important}
body.profile-page #main-content .pf-table td:first-child{grid-column:1/-1!important}
body.profile-page #main-content .pf-table td[data-label]::before{content:attr(data-label);display:block!important;font-size:10px!important;font-weight:600;color:#9ba3b2;margin-bottom:5px;text-transform:uppercase}
body.profile-page #main-content .pf-table td:first-child::before{display:none!important}
body.profile-page #main-content .pf-table tr.pf-goal-row{display:block!important;padding:0 16px!important;border:0!important}
body.profile-page #main-content .pf-table tr:has(.pf-empty-cell){display:block!important;padding:0!important}
body.profile-page #main-content .pf-table .pf-empty-cell{padding:20px!important}
body.profile-page #main-content .pf-table .pf-goal-list li{flex-wrap:wrap}
body.profile-page #main-content .pf-activity-count{margin-left:auto;font-size:11px}
body.profile-page #main-content .pf-tabs{order:3;width:100%!important}
body.profile-page #main-content .pf-tabs>button{flex:1 1 auto!important;justify-content:center;font-size:11px!important;padding:10px 8px!important}
}
@media(min-width:769px) and (max-width:1150px){body.profile-page #main-content .pf-settings{grid-template-columns:minmax(0,1fr)!important}body.profile-page #main-content .pf-settings-options{min-width:0}}
@media(max-width:1100px){body.affiliate-page #main-content .ap-hero-avatar{display:none!important}}

/* Cashout layout only: the existing page colors remain pending review. */
body.redeem-page #main-content .rd-page{container:cashout-page / inline-size}
body.redeem-page #main-content .rd-balance-panel{display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;align-content:center;padding:20px!important}
body.redeem-page #main-content .rd-balance-panel>:not(.rd-wallet-art){grid-column:1}
body.redeem-page #main-content .rd-balance-panel .rd-wallet-art{position:static;grid-column:2;grid-row:1/4;width:72px;align-self:center;transform:none}
body.redeem-page #main-content .rd-balance-amount{white-space:nowrap;overflow-wrap:normal;font-size:32px}
@container cashout-page (max-width:850px){body.redeem-page #main-content .rd-page .rd-intro{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}}
@container cashout-page (max-width:650px){body.redeem-page #main-content .rd-page .rd-cash-grid,body.redeem-page #main-content .rd-page .rd-gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container cashout-page (max-width:360px){body.redeem-page #main-content .rd-balance-panel{grid-template-columns:minmax(0,1fr) 48px;gap:0 12px}body.redeem-page #main-content .rd-balance-panel .rd-wallet-art{width:48px}body.redeem-page #main-content .rd-balance-amount{font-size:28px}}

/* The legacy legal header keeps its existing appearance, with a fitted mobile logo. */
@media(max-width:640px){
body:has(.p2d-legal-page) nav:has(>div>a>img){gap:8px!important;flex-wrap:wrap}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:first-child{flex:0 1 auto;gap:0!important}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:first-child>a{gap:0!important}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:first-child>a>img{width:120px!important;max-width:120px!important;height:auto!important}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:first-child>a>span{display:none}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:last-child{gap:4px!important;flex:none}
body:has(.p2d-legal-page) nav:has(>div>a>img)>div:last-child>.w-px{display:none}
body:has(.p2d-legal-page) nav :is(a[title="Open user panel in a new tab"],[aria-label="Notifications"],[aria-label="Admin account menu"],[aria-label="Toggle navigation"]){min-height:34px!important;min-width:32px!important;padding:6px!important}
}

body.leaderboard-page #main-content .race-board{display:flex;flex-direction:column;gap:24px;width:100%!important;max-width:1220px!important;margin:auto;padding:28px 24px 32px!important;color:#f5f6f8}
.race-board *{min-width:0}
.race-board .rb-hero{border:1px solid #ffffff13;border-radius:18px;background:#10141b;overflow:hidden}
.race-board .rb-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 0}
.race-board .rb-kicker{font-size:10px;font-weight:800;letter-spacing:.13em;color:#a5adbb;display:flex;align-items:center;gap:8px}
.race-board .rb-kicker>span{width:16px;height:16px;color:#b28ade}
.race-board .rb-periods{display:flex;gap:5px;padding:3px;border:1px solid #ffffff0c;background:#080b10;border-radius:9px}
.race-board .rb-periods button{border:0;border-radius:6px;padding:8px 13px;min-height:34px;font-size:11px;font-weight:750;color:#a5adbb;background:transparent;box-shadow:none!important}
.race-board .rb-periods button[aria-pressed=true]{background:#9933ff!important;color:#fff}
.race-board .rb-periods button:not([aria-pressed=true]):hover{background:#232630;color:#fff}
.race-board .rb-feature{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:center;padding:20px 32px 24px}
.race-board .rb-heading{font-size:clamp(30px,4vw,46px);font-weight:850;letter-spacing:-.045em;line-height:1.12;margin:0 0 12px}
.race-board .rb-subtitle{max-width:42ch;font-size:13px;line-height:1.7;color:#a5adbb;margin:0}
.race-board .rb-pool{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:22px}
.race-board .rb-pool strong{font-size:clamp(34px,5vw,52px);letter-spacing:-.04em;font-weight:850;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.race-board .rb-pool span{font-size:10px;font-weight:750;letter-spacing:.09em;color:#a5adbb;text-transform:uppercase}
.race-board .rb-trophy{width:215px;height:188px;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#e8bb5b}
.race-board .rb-trophy>span:first-child{width:65%;height:70%;filter:drop-shadow(0 5px 0 #806137)}
.race-board .rb-trophy-base{width:70%;height:12px;background:#272b32;border:1px solid #ffffff16;border-radius:50%;margin-top:15px}
.race-board .rb-inactive{font-size:11px;padding:8px;color:#a5adbb}
.race-board button:focus-visible,.race-board a:focus-visible{outline:2px solid #c6a1ec;outline-offset:3px}
.race-board .rb-timer-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;background:#0c1016;border-top:1px solid #ffffff0e}
.race-board .rb-timer-label{font-size:11px;color:#b3bac6;display:flex;align-items:center;gap:8px}
.race-board .rb-timer-label>span{color:#b28ade;width:16px;height:16px}
.race-board .rb-clock{display:flex;justify-content:center;gap:8px}
.race-board .rb-time{width:52px;text-align:center}
.race-board .rb-time strong{display:block;padding:8px 4px;border:1px solid #ffffff12;border-radius:7px;background:#1a1f27;color:#fff;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.race-board .rb-time span{display:block;margin-top:5px;font-size:8px;color:#a5adbb;text-transform:uppercase;letter-spacing:.05em}
.race-board .rb-timer-ended{font-size:11px;color:#b9a0d8}
.race-board .rb-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.race-board .rb-section-head h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.race-board .rb-section-head>span{color:#8e98a8;font-size:10px}
.race-board .rb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;padding-top:16px}
.race-board .rb-place{--metal:#a4afbf;position:relative;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;min-height:225px;border:1px solid #ffffff14;border-top:2px solid var(--metal);border-radius:13px;background:#12161d;padding:18px 16px 14px}
.race-board .rb-place--1{--metal:#e8bb5b;min-height:248px;padding-top:24px;border-color:#e8bb5b38;border-top-color:#e8bb5b}
.race-board .rb-place--3{--metal:#c48a62}
.race-board .rb-rank-mark{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--metal);text-transform:uppercase;margin-bottom:15px}
.race-board .rb-rank-mark>span{width:14px;height:14px}
.race-board .rb-avatar{display:grid;place-items:center;position:relative;width:48px;height:48px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--metal),transparent 45%);border-radius:14px;background:#1c212a;color:var(--metal);font-size:22px;font-weight:800;overflow:hidden}
.race-board .rb-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.race-board .rb-player{font-size:13px;font-weight:800;line-height:1.35;color:#f5f6f8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.race-board .rb-score{font-size:10px;line-height:1.45;color:#909bab;margin:5px 0 16px}
.race-board .rb-reward{display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:stretch;margin-top:auto;padding-top:13px;border-top:1px solid #ffffff0c}
.race-board .rb-reward>span{font-size:9px;color:#9ba4b3}
.race-board .rb-reward strong{font-size:24px;font-weight:850;letter-spacing:-.03em;color:var(--metal);line-height:1.2;font-variant-numeric:tabular-nums}
.race-board .rb-table-wrap{border:1px solid #ffffff12;border-radius:13px;background:#10141b;overflow-x:auto}
.race-board .rb-table{width:100%;border-collapse:collapse;text-align:left}
.race-board .rb-table th,.race-board .rb-table td{padding:14px 18px;white-space:nowrap}
.race-board .rb-table thead{background:#181d25;color:#929dab;font-size:10px;text-transform:uppercase;font-weight:700}
.race-board .rb-table tbody tr+tr{border-top:1px solid #ffffff0c}
.race-board .rb-table tbody{font-size:12px;color:#d4d9e1}
.race-board .rb-table tbody th{font-weight:650}.race-board .rb-table td:last-child{font-weight:800;color:#d8dde6}
.race-board .rb-table .is-you{background:#9933ff09}.race-board .rb-table .rb-you{font-size:9px;padding:2px 5px;margin-left:7px;border-radius:4px;background:#9933ff20;color:#cfaaff}
.race-board .rb-empty{text-align:center;padding:28px 20px!important;white-space:normal!important}
.race-board .rb-empty-icon{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 12px;border-radius:10px;background:#1c222b;color:#a6afbd;font-size:21px}
.race-board .rb-empty h3{font-size:16px;font-weight:800;line-height:1.4;margin:0 0 7px}
.race-board .rb-empty p{font-size:12px;font-weight:400;line-height:1.65;color:#9ca6b6;margin:0}
.race-board .rb-empty a{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;color:#d1b4f0;margin-top:14px}
.race-board .rb-note{font-size:10px;color:#8994a4;line-height:1.65;margin:12px 0 0}
@media(max-width:1000px){.race-board .rb-feature{grid-template-columns:minmax(0,1fr) 140px;padding:24px;gap:16px}.race-board .rb-trophy{width:145px;height:150px}.race-board .rb-timer-band{justify-content:center}.race-board .rb-timer-label{flex-basis:100%;justify-content:center}}
@media(max-width:640px){body.leaderboard-page #main-content .race-board{padding:20px 14px 28px!important;gap:22px}.race-board .rb-hero-top{padding:16px 16px 0;gap:8px}.race-board .rb-kicker{font-size:8px;letter-spacing:.07em}.race-board .rb-periods button{padding:7px 9px;font-size:10px}.race-board .rb-feature{grid-template-columns:minmax(0,1fr) 90px;gap:12px;padding:22px 18px}.race-board .rb-heading{font-size:29px}.race-board .rb-subtitle{font-size:11px;line-height:1.6}.race-board .rb-pool{margin-top:18px;gap:7px}.race-board .rb-pool strong{font-size:35px}.race-board .rb-pool span{font-size:8px}.race-board .rb-trophy{width:103px;height:115px}.race-board .rb-timer-band{padding:16px;gap:12px}.race-board .rb-timer-label{font-size:10px}.race-board .rb-time{width:48px}.race-board .rb-time strong{font-size:20px}.race-board .rb-podium{gap:8px;padding-top:10px}.race-board .rb-place{min-height:208px;padding:13px 8px 12px;border-radius:10px}.race-board .rb-place--1{min-height:225px;padding-top:17px}.race-board .rb-rank-mark{font-size:9px;letter-spacing:0;margin-bottom:12px}.race-board .rb-avatar{width:38px;height:38px;border-radius:11px;font-size:19px;margin-bottom:10px}.race-board .rb-player{font-size:11px}.race-board .rb-score{font-size:8px;margin:5px 0 12px}.race-board .rb-reward{display:block;padding-top:10px}.race-board .rb-reward>span{display:block;font-size:8px;margin-bottom:3px}.race-board .rb-reward strong{font-size:20px}.race-board .rb-section-head{margin-bottom:10px}.race-board .rb-section-head h2{font-size:17px}.race-board .rb-table th,.race-board .rb-table td{padding:12px 10px;font-size:10px}.race-board .rb-table thead th{font-size:8px}.race-board .rb-table tbody th{max-width:135px;white-space:normal;overflow-wrap:anywhere}}
@media(max-width:359px){.race-board .rb-feature{grid-template-columns:minmax(0,1fr)}.race-board .rb-trophy{display:none}.race-board .rb-rank-mark>span{display:none}.race-board .rb-heading{font-size:28px}.race-board .rb-kicker{font-size:7px}}
