/* =========================================================
   Minecraft Player Stats - UX Overhaul
========================================================= */

:root{
    --ux-bg:#0d1117;
    --ux-panel:#161b22;
    --ux-panel-2:#21262d;
    --ux-border:#30363d;
    --ux-border-hover:#484f58;

    --ux-text:#f0f6fc;
    --ux-text-2:#c9d1d9;
    --ux-muted:#8b949e;

    --ux-blue:#58a6ff;
    --ux-blue-strong:#1f6feb;
    --ux-green:#3fb950;
    --ux-yellow:#d29922;
    --ux-red:#f85149;

    --ux-radius:14px;
    --ux-gap:14px;
}


/* =========================================================
   Hide legacy top navigation only
========================================================= */

#stats-tabs{
    display:none !important;
}


/* =========================================================
   Main UX shell
========================================================= */

#ux-shell{
    margin:16px 0 22px;
}

#ux-player-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding:12px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(33,38,45,.96),
            rgba(22,27,34,.96)
        );

    border:1px solid var(--ux-border);
    border-radius:var(--ux-radius);

    position:sticky;
    top:8px;
    z-index:150;
    backdrop-filter:blur(14px);
}

.ux-player-current{
    display:flex;
    align-items:center;
    gap:11px;

    min-width:0;
}

.ux-player-avatar{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:var(--ux-panel-2);
    border:1px solid var(--ux-border);

    overflow:hidden;
    flex:0 0 auto;
}

.ux-player-avatar img{
    width:100%;
    height:100%;
    image-rendering:pixelated;
}

.ux-player-info{
    min-width:0;
}

.ux-player-name{
    color:var(--ux-text);
    font-weight:800;
    font-size:15px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ux-player-sub{
    margin-top:2px;

    color:var(--ux-muted);
    font-size:11px;
}

#ux-player-select{
    min-width:150px;
    max-width:230px;

    padding:9px 34px 9px 11px;

    color:var(--ux-text);
    background:var(--ux-bg);

    border:1px solid var(--ux-border);
    border-radius:10px;

    color-scheme:dark;
}


/* =========================================================
   Primary navigation
========================================================= */

#ux-primary-nav{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:8px;
    margin-top:12px;

    position:sticky;
    top:72px;
    z-index:140;

    padding:8px;

    background:rgba(13,17,23,.94);
    border:1px solid var(--ux-border);
    border-radius:13px;

    backdrop-filter:blur(14px);
}

.ux-primary-tab{
    min-height:42px;

    border:0;
    border-radius:9px;

    background:transparent;
    color:var(--ux-muted);

    font-size:13px;
    font-weight:800;

    cursor:pointer;
}

.ux-primary-tab:hover{
    color:var(--ux-text);
    background:var(--ux-panel);
}

.ux-primary-tab.active{
    color:#fff;
    background:var(--ux-blue-strong);
}


/* =========================================================
   Secondary navigation
========================================================= */

#ux-secondary-wrap{
    margin-top:10px;
}

#ux-secondary-nav{
    display:flex;
    gap:7px;

    overflow-x:auto;
    scrollbar-width:none;

    padding:2px 1px 5px;
}

#ux-secondary-nav::-webkit-scrollbar{
    display:none;
}

.ux-secondary-tab{
    flex:0 0 auto;

    padding:8px 11px;

    border:1px solid var(--ux-border);
    border-radius:999px;

    background:var(--ux-bg);
    color:var(--ux-muted);

    font-size:12px;
    font-weight:700;

    cursor:pointer;
}

.ux-secondary-tab:hover{
    border-color:var(--ux-border-hover);
    color:var(--ux-text);
}

.ux-secondary-tab.active{
    border-color:var(--ux-blue-strong);
    background:rgba(31,111,235,.18);
    color:var(--ux-blue);
}


/* =========================================================
   Typography hierarchy
========================================================= */

.tab-panel h2,
.tab-panel h3,
.section-title{
    color:var(--ux-text);
}

.section-title{
    font-size:18px !important;
    line-height:1.35;
}

.stat-tile-value,
.summary-value{
    font-weight:800;
    letter-spacing:-.02em;
}

.stat-tile-name,
.stat-label{
    color:var(--ux-muted);
}


/* =========================================================
   Unified cards
========================================================= */

.tab-panel .panel-section,
.tab-panel .section-card{
    border-radius:var(--ux-radius);
}

.stat-tile,
.adv-card,
.history-ranking-row,
.adv-history-card{
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.stat-tile:hover,
.adv-card:hover,
.history-ranking-row:hover,
.adv-history-card:hover{
    border-color:var(--ux-border-hover);
}


/* =========================================================
   Sticky controls
========================================================= */

#allstats-tab .allstats-controls,
#allstats-tab .toolbar,
#ranking-tab .history-toolbar,
#recent-activity-tab .history-toolbar{
    position:sticky;
    top:132px;
    z-index:100;

    padding:10px;

    background:rgba(13,17,23,.94);
    border:1px solid var(--ux-border);
    border-radius:12px;

    backdrop-filter:blur(12px);
}


/* =========================================================
   Loading / empty / error
========================================================= */

.ux-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:150px;
    padding:25px;

    border:1px dashed var(--ux-border);
    border-radius:12px;

    color:var(--ux-muted);
    text-align:center;
}

.ux-spinner{
    width:26px;
    height:26px;

    margin-bottom:12px;

    border:3px solid var(--ux-border);
    border-top-color:var(--ux-blue);
    border-radius:50%;

    animation:ux-spin .7s linear infinite;
}

@keyframes ux-spin{
    to{
        transform:rotate(360deg);
    }
}

.ux-error{
    color:#ff7b72;
}


/* =========================================================
   Ranking readability
========================================================= */

.history-ranking-row{
    grid-template-columns:44px minmax(0,1fr) auto;
}

.history-ranking-row:nth-child(1){
    border-color:rgba(210,153,34,.55) !important;
}

.history-ranking-row:nth-child(2){
    border-color:rgba(139,148,158,.45) !important;
}

.history-ranking-row:nth-child(3){
    border-color:rgba(188,140,76,.45) !important;
}


/* =========================================================
   Comparison readability
========================================================= */

#compare-tab .history-table-wrap{
    margin-top:12px;
}

#compare-tab .history-table td,
#compare-tab .history-table th{
    min-width:115px;
}

#compare-tab .history-table th:first-child{
    position:sticky;
    left:0;
    z-index:2;

    background:var(--ux-panel) !important;
}


/* =========================================================
   Search UX
========================================================= */

.ux-search-meta{
    margin-top:5px;
    color:var(--ux-muted);
    font-size:11px;
}

.ux-search-highlight{
    color:#fff;
    background:rgba(210,153,34,.35);
    border-radius:3px;
    padding:0 2px;
}


/* =========================================================
   Mobile
========================================================= */

@media(max-width:700px){

    #ux-shell{
        margin-top:10px;
    }

    #ux-player-bar{
        top:4px;
        padding:9px 10px;
        border-radius:11px;
    }

    .ux-player-avatar{
        width:32px;
        height:32px;
    }

    .ux-player-name{
        font-size:13px;
    }

    .ux-player-sub{
        display:none;
    }

    #ux-player-select{
        width:42%;
        min-width:0;
        max-width:none;

        font-size:12px;
        padding:8px 27px 8px 8px;
    }

    #ux-primary-nav{
        top:58px;
        gap:4px;
        padding:5px;
    }

    .ux-primary-tab{
        min-height:38px;
        padding:5px 3px;
        font-size:11px;
    }

    #ux-secondary-wrap{
        margin-top:7px;
    }

    .ux-secondary-tab{
        padding:7px 10px;
        font-size:11px;
    }

    #allstats-tab .allstats-controls,
    #allstats-tab .toolbar,
    #ranking-tab .history-toolbar,
    #recent-activity-tab .history-toolbar{
        top:106px;
    }


    /* comparison becomes easier to scroll */

    #compare-tab .history-table-wrap{
        margin-left:-6px;
        margin-right:-6px;
    }

    #compare-tab .history-table{
        min-width:620px;
    }

    #compare-tab .history-table th:first-child{
        min-width:100px;
    }


    /* ranking */
    .history-ranking-row{
        grid-template-columns:34px minmax(0,1fr) auto;
        min-height:56px;
    }

    .history-ranking-value{
        font-size:13px;
    }


    /* reduce visual noise */
    .panel-section{
        padding-left:12px !important;
        padding-right:12px !important;
    }
}


/* =========================================================
   Very small phones
========================================================= */

@media(max-width:420px){

    .ux-primary-tab{
        font-size:10px;
    }

    #ux-player-select{
        width:46%;
    }
}

/* =========================================================
   UX density / spacing refinement
   2026-08-17
========================================================= */

/*
 * Main content:
 * remove excessive vertical gaps introduced by the
 * original tab layout.
 */
#compare-tab,
#ranking-tab,
#recent-activity-tab,
#timeline-tab,
#overview-tab,
#combat-tab{
    margin-top:0 !important;
    padding-top:18px !important;
}


/* ---------------------------------------------------------
   Primary / secondary navigation
--------------------------------------------------------- */

.ux-primary-nav{
    margin-bottom:0 !important;
}

.ux-secondary-nav{
    margin-top:8px !important;
    margin-bottom:0 !important;
    min-height:0 !important;
}

.ux-secondary-nav + *{
    margin-top:0 !important;
}


/* Remove large legacy spacing around hidden/active tabs */

.tab-content.active,
.tab-panel.active,
[data-tab-content].active{
    margin-top:0 !important;
}


/* ---------------------------------------------------------
   Analysis pages
--------------------------------------------------------- */

#compare-tab .panel-section,
#ranking-tab .panel-section,
#recent-activity-tab .panel-section,
#timeline-tab .panel-section{
    margin-top:0 !important;
    padding-top:0 !important;
}

#compare-tab > h2,
#ranking-tab > h2,
#recent-activity-tab > h2,
#timeline-tab > h2{
    margin-top:0 !important;
}

#compare-tab .history-player-picker{
    margin-top:12px !important;
    margin-bottom:14px !important;
}


/* ---------------------------------------------------------
   Ranking controls
--------------------------------------------------------- */

#ranking-tab .history-toolbar{
    display:flex !important;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px !important;

    padding:10px 12px !important;
    margin:8px 0 14px !important;

    background:#0d1117;
    border:1px solid #30363d;
    border-radius:10px;
}

#ranking-tab .history-toolbar label{
    margin:0 !important;
}

#ranking-tab .history-toolbar select{
    min-width:130px;
    height:38px;
}


/* ---------------------------------------------------------
   Ranking rows: higher information density
--------------------------------------------------------- */

.history-ranking-list{
    gap:7px !important;
}

.history-ranking-row{
    min-height:50px !important;
    padding:8px 12px !important;
    border-radius:9px !important;
}

.history-rank{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
}

.history-ranking-player{
    font-weight:700;
}

.history-ranking-value{
    font-weight:800;
}


/* ---------------------------------------------------------
   Compare page
--------------------------------------------------------- */

#compare-tab .history-table-wrap{
    margin-top:10px !important;
}

#compare-tab .history-table th,
#compare-tab .history-table td{
    padding:11px 12px !important;
}

#compare-tab .history-table thead th{
    position:sticky;
    top:0;
    z-index:2;
}


/*
 * Keep the metric column visually distinct.
 */
#compare-tab .history-table tbody th{
    background:#161b22 !important;
    font-weight:700;
}


/* ---------------------------------------------------------
   Overview
--------------------------------------------------------- */

#overview-tab{
    padding-top:14px !important;
}

/*
 * Reduce vertical space between dashboard and the
 * legacy detailed overview section.
 */
#overview-tab h2,
#overview-tab h3{
    margin-top:18px !important;
    margin-bottom:10px !important;
}


/* ---------------------------------------------------------
   Combat / statistics
--------------------------------------------------------- */

#combat-tab{
    padding-top:14px !important;
}

#combat-tab h2,
#combat-tab h3{
    margin-top:16px !important;
    margin-bottom:10px !important;
}


/* ---------------------------------------------------------
   Player switcher
--------------------------------------------------------- */

.ux-player-switcher{
    min-height:54px !important;
    padding:8px 12px !important;
}

.ux-player-switcher select{
    height:36px !important;
}


/* ---------------------------------------------------------
   General section density
--------------------------------------------------------- */

main section,
.panel-section{
    scroll-margin-top:150px;
}


/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */

@media(min-width:901px){

    .ux-primary-nav{
        min-height:50px !important;
    }

    .ux-primary-nav button{
        min-height:36px !important;
    }

    /*
     * Analysis content should start immediately after
     * secondary navigation.
     */
    #compare-tab,
    #ranking-tab,
    #recent-activity-tab,
    #timeline-tab{
        padding-top:14px !important;
    }
}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media(max-width:650px){

    #compare-tab,
    #ranking-tab,
    #recent-activity-tab,
    #timeline-tab,
    #overview-tab,
    #combat-tab{
        padding-top:10px !important;
    }

    #ranking-tab .history-toolbar{
        padding:9px !important;
    }

    #ranking-tab .history-toolbar select{
        min-width:0;
        width:100%;
    }

    .history-ranking-row{
        min-height:48px !important;
        padding:8px 10px !important;
    }

    #compare-tab .history-table th,
    #compare-tab .history-table td{
        padding:9px 10px !important;
    }

    .ux-player-switcher{
        min-height:50px !important;
    }
}


/* =========================================================
   Overview cleanup / duplicate removal
   2026-08-17
========================================================= */

/*
 * The newer overview-dashboard already contains the
 * important overview KPIs.
 *
 * Hide only the old legacy summary section to avoid
 * showing the same statistics twice.
 */
#overview > .panel-section:has(#summary){
    display:none !important;
}


/* ---------------------------------------------------------
   Main overview layout
--------------------------------------------------------- */

#overview{
    padding-top:12px !important;
}

#overview-dashboard{
    margin-top:0 !important;
}

#overview-dashboard .overview-panel{
    margin-top:0;
}


/* Dashboard title */

#overview-dashboard .overview-panel-title{
    margin-top:0 !important;
    margin-bottom:12px !important;
}


/* ---------------------------------------------------------
   KPI cards
--------------------------------------------------------- */

#overview-dashboard .overview-highlight-grid{
    gap:10px !important;
}

#overview-dashboard .overview-highlight{
    min-height:82px !important;
    padding:12px 14px !important;
}

#overview-dashboard .overview-highlight-label{
    margin-bottom:5px !important;
}

#overview-dashboard .overview-highlight-value{
    line-height:1.15 !important;
}


/* ---------------------------------------------------------
   Progress bar
--------------------------------------------------------- */

#overview-dashboard .overview-progress{
    margin-top:8px !important;
}


/* ---------------------------------------------------------
   Mob TOP 5
--------------------------------------------------------- */

#overview-dashboard .overview-mob-list{
    gap:6px !important;
}

#overview-dashboard .overview-mob-row{
    min-height:42px !important;
    padding:7px 10px !important;
}

#overview-dashboard .overview-mob-row img{
    width:28px !important;
    height:28px !important;
}


/* ---------------------------------------------------------
   Remove unnecessary space after dashboard
--------------------------------------------------------- */

#overview-dashboard + *{
    margin-top:12px !important;
}


/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */

@media(min-width:901px){

    #overview-dashboard .overview-highlight-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media(min-width:651px) and (max-width:900px){

    #overview-dashboard .overview-highlight-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media(max-width:650px){

    #overview{
        padding-top:8px !important;
    }

    #overview-dashboard .overview-highlight-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    #overview-dashboard .overview-highlight{
        min-height:74px !important;
        padding:10px !important;
    }

    #overview-dashboard .overview-highlight-value{
        font-size:1.08rem !important;
    }

    #overview-dashboard .overview-mob-row{
        min-height:40px !important;
        padding:6px 8px !important;
    }

}


/* Very small phones */

@media(max-width:380px){

    #overview-dashboard .overview-highlight-grid{
        grid-template-columns:1fr !important;
    }

}


/* =========================================================
   Compact player switcher
   2026-08-18
========================================================= */

/*
 * Player name was displayed twice:
 *   [avatar + name]   [select with same name]
 *
 * Keep avatar + selector as the single switch control.
 */
#ux-player-bar{
    justify-content:flex-start !important;
    gap:9px !important;

    min-height:50px !important;
    padding:8px 10px !important;
}

#ux-player-bar .ux-player-info{
    display:none !important;
}

#ux-player-bar .ux-player-avatar{
    width:34px !important;
    height:34px !important;
    border-radius:8px !important;
}

#ux-player-select{
    flex:1 1 auto !important;

    width:auto !important;
    min-width:180px !important;
    max-width:320px !important;

    height:36px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;

    font-weight:700;
}


/* Desktop: do not make the selector unnecessarily wide */
@media(min-width:701px){

    #ux-player-bar{
        width:max-content;
        min-width:300px;
        max-width:430px;
    }

}


/* Mobile */
@media(max-width:700px){

    #ux-player-bar{
        width:100%;
        max-width:none;
    }

    #ux-player-select{
        max-width:none !important;
        min-width:0 !important;
    }

}


/* =========================================================
   Mobile final UX
   Compare cards / Back to top / Compact controls
   2026-08-18
========================================================= */


/* ---------------------------------------------------------
   Back to top
--------------------------------------------------------- */

#ux-back-to-top{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:300;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    min-width:46px;
    height:42px;

    padding:0 12px;

    border:1px solid #30363d;
    border-radius:999px;

    background:rgba(22,27,34,.94);
    color:#f0f6fc;

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 6px 24px rgba(0,0,0,.35);

    backdrop-filter:blur(12px);

    cursor:pointer;

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease,
        background .15s ease;
}

#ux-back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#ux-back-to-top:hover{
    background:#21262d;
}


/* ---------------------------------------------------------
   Ranking controls
--------------------------------------------------------- */

#ranking-tab .history-toolbar{
    align-items:center !important;
}

#ranking-tab .history-toolbar label{
    display:flex !important;
    align-items:center;
    gap:7px;

    color:#8b949e;
    font-size:12px;
    font-weight:700;
}

#ranking-tab .history-toolbar select{
    margin:0 !important;
}


/* ---------------------------------------------------------
   Mobile compare
--------------------------------------------------------- */

@media(max-width:650px){

    /*
     * No horizontal comparison table on phones.
     * Each metric becomes one vertical card.
     */

    #compare-tab .history-table-wrap{
        overflow:visible !important;

        margin-left:0 !important;
        margin-right:0 !important;

        border:0 !important;
        background:transparent !important;
    }

    #compare-tab .history-table{
        display:block !important;
        min-width:0 !important;
        width:100% !important;

        background:transparent !important;
    }

    #compare-tab .history-table thead{
        display:none !important;
    }

    #compare-tab .history-table tbody{
        display:grid !important;
        grid-template-columns:1fr;
        gap:9px;
    }

    #compare-tab .history-table tbody tr{
        display:block !important;

        padding:11px 12px;

        border:1px solid #30363d;
        border-radius:11px;

        background:#0d1117;
    }

    #compare-tab .history-table tbody th{
        display:block !important;

        position:static !important;

        width:100% !important;
        min-width:0 !important;

        padding:0 0 8px !important;

        border:0 !important;
        border-bottom:1px solid #21262d !important;

        background:transparent !important;

        color:#f0f6fc !important;
        font-size:13px;
        font-weight:800;
    }

    #compare-tab .history-table tbody td{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        width:100% !important;
        min-width:0 !important;

        padding:8px 0 0 !important;

        border:0 !important;

        background:transparent !important;

        color:#c9d1d9 !important;
        text-align:right;
    }

    #compare-tab .history-table tbody td::before{
        content:attr(data-ux-player);

        flex:1 1 auto;

        min-width:0;

        color:#8b949e;

        font-size:11px;
        font-weight:700;

        text-align:left;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #compare-tab .history-table tbody td.history-best{
        margin-top:5px;
        padding:7px 8px !important;

        border-radius:7px !important;

        background:rgba(210,153,34,.13) !important;
    }


    /* ranking controls */

    #ranking-tab .history-toolbar{
        display:grid !important;
        grid-template-columns:1fr 1fr;

        gap:8px !important;
    }

    #ranking-tab .history-toolbar label{
        display:block !important;
    }

    #ranking-tab .history-toolbar select{
        width:100% !important;
        margin-top:4px !important;
    }


    /* compact sticky headers */

    #ux-player-bar{
        min-height:44px !important;
    }

    #ux-primary-nav{
        top:53px !important;
    }

    #ux-primary-nav .ux-primary-tab{
        min-height:34px !important;
    }


    /* floating button */

    #ux-back-to-top{
        right:12px;
        bottom:12px;

        min-width:40px;
        height:40px;

        padding:0 10px;

        font-size:11px;
    }
}


/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    #ux-back-to-top{
        transition:none !important;
    }

}