/* =========================================================
   Minecraft Readable Theme
   Light / spacious / information-first
   2026-08-18
========================================================= */

:root{
    --mc-bg:#f4f7f5;
    --mc-surface:#ffffff;
    --mc-surface-2:#f8faf9;
    --mc-border:#dfe6e2;

    --mc-text:#17211c;
    --mc-muted:#68756e;

    --mc-green:#43a047;
    --mc-green-soft:#edf8ee;

    --mc-blue:#3182ce;
    --mc-blue-soft:#edf6ff;

    --mc-purple:#805ad5;
    --mc-purple-soft:#f5f0ff;

    --mc-orange:#dd7b22;
    --mc-orange-soft:#fff5e9;

    --mc-red:#d94b4b;
    --mc-red-soft:#fff1f1;

    --mc-cyan:#229aa6;
    --mc-cyan-soft:#ecfafa;

    --mc-gold:#b98a18;
    --mc-gold-soft:#fff9e5;

    --mc-shadow:
        0 1px 2px rgba(20,35,27,.04),
        0 5px 18px rgba(20,35,27,.055);
}


/* =========================================================
   Page
========================================================= */

html{
    background:var(--mc-bg) !important;
}

body{
    background:
        radial-gradient(
            circle at 14% 9%,
            rgba(72,187,120,.055),
            transparent 24%
        ),
        radial-gradient(
            circle at 86% 22%,
            rgba(49,130,206,.045),
            transparent 25%
        ),
        var(--mc-bg) !important;

    color:var(--mc-text) !important;
}


/* remove dark block/grid appearance */

body::before,
body::after{
    opacity:.12 !important;
}


/* =========================================================
   Global typography
========================================================= */

body,
button,
input,
select{
    color:var(--mc-text);
}

h1,
h2,
h3,
h4,
strong{
    color:var(--mc-text) !important;
}

p,
small,
.ux-muted{
    color:var(--mc-muted);
}


/* =========================================================
   Header
========================================================= */

header,
.site-header,
#site-header{
    background:
        rgba(255,255,255,.96) !important;

    border-bottom:
        1px solid var(--mc-border) !important;

    box-shadow:
        0 1px 8px rgba(20,35,27,.045) !important;
}


/* =========================================================
   Player hero
========================================================= */

#ux-player-hero,
.ux-player-hero,
.player-hero{
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.99) 0%,
            rgba(255,255,255,.97) 58%,
            rgba(237,248,238,.88) 100%
        ) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        var(--mc-shadow) !important;

    color:
        var(--mc-text) !important;
}


/* =========================================================
   Player selector
========================================================= */

#ux-player-switcher,
.ux-player-switcher{
    background:
        var(--mc-surface) !important;

    border:
        1px solid var(--mc-border) !important;

    border-top:
        3px solid var(--mc-green) !important;

    border-radius:
        10px !important;

    box-shadow:
        var(--mc-shadow) !important;
}

#ux-player-select,
#player-select{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        8px !important;
}


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

#ux-primary-nav{
    background:
        var(--mc-surface) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        var(--mc-shadow) !important;

    padding:
        4px !important;

    gap:
        4px !important;
}

.ux-primary-tab{
    background:
        transparent !important;

    color:
        #536159 !important;

    border:
        0 !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    min-height:
        44px;

    transition:
        background .15s ease,
        color .15s ease;
}

.ux-primary-tab:hover{
    background:
        #f2f6f3 !important;

    color:
        var(--mc-text) !important;
}


/* overview */

.ux-primary-tab[data-ux-group="overview"].active,
.ux-primary-tab[data-tab="overview-tab"].active{
    background:
        var(--mc-green-soft) !important;

    color:
        #267c2c !important;

    box-shadow:
        inset 0 -3px 0
        var(--mc-green) !important;
}


/* stats */

.ux-primary-tab[data-ux-group="stats"].active,
.ux-primary-tab[data-tab="combat-tab"].active{
    background:
        var(--mc-blue-soft) !important;

    color:
        #246aa8 !important;

    box-shadow:
        inset 0 -3px 0
        var(--mc-blue) !important;
}


/* advancements */

.ux-primary-tab[data-ux-group="advancements"].active,
.ux-primary-tab[data-tab="advancements-tab"].active{
    background:
        var(--mc-purple-soft) !important;

    color:
        #6840b5 !important;

    box-shadow:
        inset 0 -3px 0
        var(--mc-purple) !important;
}


/* analysis */

.ux-primary-tab[data-ux-group="analysis"].active,
.ux-primary-tab[data-tab="compare-tab"].active{
    background:
        var(--mc-gold-soft) !important;

    color:
        #8d6810 !important;

    box-shadow:
        inset 0 -3px 0
        var(--mc-gold) !important;
}


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

#ux-secondary-nav{
    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    gap:
        6px !important;

    padding:
        4px 0 !important;
}

.ux-secondary-tab{
    background:
        var(--mc-surface) !important;

    color:
        #59665f !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        999px !important;

    box-shadow:
        none !important;

    padding:
        7px 12px !important;
}

.ux-secondary-tab:hover{
    background:
        #f4f7f5 !important;
}

.ux-secondary-tab.active{
    background:
        #edf7f8 !important;

    color:
        #147a83 !important;

    border-color:
        #9bd3d7 !important;
}


/* =========================================================
   Main content width / space usage
========================================================= */

main,
.main,
#app,
.page-content,
.ux-page{
    width:
        100% !important;

    max-width:
        none !important;
}


/* use available desktop width */

@media(min-width:1200px){

    body > main,
    body > .main,
    #app{
        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }

}


/* =========================================================
   Sections
========================================================= */

.panel-section,
.ux-section,
.history-table-wrap,
.history-ranking-list,
.adv-history-card{
    border-color:
        var(--mc-border) !important;
}

.panel-section{
    background:
        transparent !important;

    color:
        var(--mc-text) !important;
}


/* =========================================================
   Generic cards
========================================================= */

.stat-tile,
.overview-highlight,
.adv-card,
.adv-history-card,
.history-ranking-row{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        10px !important;

    box-shadow:
        var(--mc-shadow) !important;
}

.stat-tile:hover,
.overview-highlight:hover,
.adv-card:hover,
.adv-history-card:hover,
.history-ranking-row:hover{
    background:
        #fbfdfc !important;

    border-color:
        #c9d6cf !important;
}


/* =========================================================
   Stat cards
========================================================= */

.stat-tile{
    min-height:
        82px !important;

    padding:
        14px !important;

    border-left:
        1px solid var(--mc-border) !important;
}


/* category accents are intentionally small */

#combat-tab .stat-tile{
    border-top:
        3px solid #ef6a64 !important;
}

#movement-tab .stat-tile{
    border-top:
        3px solid var(--mc-cyan) !important;
}

#blocks-tab .stat-tile{
    border-top:
        3px solid var(--mc-green) !important;
}

#items-tab .stat-tile{
    border-top:
        3px solid var(--mc-orange) !important;
}

#crafting-tab .stat-tile{
    border-top:
        3px solid var(--mc-purple) !important;
}


/* =========================================================
   Overview dashboard
========================================================= */

#overview-tab{
    color:
        var(--mc-text) !important;
}

#overview-tab .panel-section,
#overview-tab .overview-section,
#overview-tab .overview-dashboard{
    background:
        var(--mc-surface) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        var(--mc-shadow) !important;
}


/* dashboard cards get soft color separation */

#overview-tab .overview-highlight:nth-child(6n+1){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-green-soft)
        ) !important;
}

#overview-tab .overview-highlight:nth-child(6n+2){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-blue-soft)
        ) !important;
}

#overview-tab .overview-highlight:nth-child(6n+3){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-orange-soft)
        ) !important;
}

#overview-tab .overview-highlight:nth-child(6n+4){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-purple-soft)
        ) !important;
}

#overview-tab .overview-highlight:nth-child(6n+5){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-cyan-soft)
        ) !important;
}

#overview-tab .overview-highlight:nth-child(6n+6){
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--mc-red-soft)
        ) !important;
}


/* =========================================================
   Mob cards / rankings
========================================================= */

.ranking-card,
.mob-card,
.mob-ranking-card{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        9px !important;

    box-shadow:
        0 1px 3px rgba(20,35,27,.045) !important;
}

.history-ranking-row{
    min-height:
        52px !important;
}

.history-ranking-player{
    color:
        var(--mc-text) !important;
}

.history-ranking-value{
    color:
        #25723a !important;

    font-weight:
        800 !important;
}

.history-rank{
    background:
        #eef2ef !important;

    color:
        #536159 !important;
}

.history-ranking-row:nth-child(1) .history-rank{
    background:
        #fff1b8 !important;

    color:
        #846100 !important;
}

.history-ranking-row:nth-child(2) .history-rank{
    background:
        #edf0f2 !important;

    color:
        #5f6870 !important;
}

.history-ranking-row:nth-child(3) .history-rank{
    background:
        #f8dfca !important;

    color:
        #985728 !important;
}


/* =========================================================
   Advancements
========================================================= */

#advancements-tab{
    color:
        var(--mc-text) !important;
}

#advancements-tab .adv-card{
    background:
        var(--mc-surface) !important;

    border:
        1px solid var(--mc-border) !important;

    border-top:
        3px solid #c3a5ed !important;

    box-shadow:
        var(--mc-shadow) !important;
}

#advancements-tab .adv-card:hover{
    border-color:
        #bca1e3 !important;

    transform:
        translateY(-1px);
}

#advancements-tab .adv-card.done,
#advancements-tab .adv-card.completed{
    background:
        linear-gradient(
            135deg,
            #fff 55%,
            #f1fbf2
        ) !important;
}

#advancements-tab input,
#advancements-tab select{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid var(--mc-border) !important;
}


/* =========================================================
   Comparison table
========================================================= */

#compare-tab{
    color:
        var(--mc-text) !important;
}

.history-table-wrap{
    background:
        var(--mc-surface) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        10px !important;

    box-shadow:
        var(--mc-shadow) !important;
}

.history-table{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;
}

.history-table thead th{
    background:
        #f1f5f2 !important;

    color:
        #58665e !important;
}

.history-table th,
.history-table td{
    background:
        #fff !important;

    color:
        var(--mc-text) !important;

    border-color:
        var(--mc-border) !important;
}

.history-table tbody th{
    background:
        #f8faf9 !important;

    color:
        var(--mc-text) !important;
}

.history-table td.history-best{
    background:
        #fff9df !important;

    color:
        #7e6200 !important;

    box-shadow:
        inset 3px 0 0 #e2b52c !important;
}


/* =========================================================
   Player chips
========================================================= */

.history-player-chip{
    background:
        var(--mc-surface) !important;

    color:
        #445149 !important;

    border:
        1px solid var(--mc-border) !important;

    box-shadow:
        none !important;
}

.history-player-chip:hover{
    background:
        #f2f7f3 !important;

    border-color:
        #a9cbb1 !important;
}

.history-player-chip.active{
    background:
        #e8f5ea !important;

    color:
        #24732c !important;

    border-color:
        #83c68a !important;
}


/* =========================================================
   Recent activity
========================================================= */

#recent-activity-tab{
    color:
        var(--mc-text) !important;
}

.history-feed-main{
    border-color:
        var(--mc-border) !important;
}

.history-feed-head strong{
    color:
        var(--mc-text) !important;
}

.history-feed-head time,
.history-feed-description{
    color:
        var(--mc-muted) !important;
}


/* =========================================================
   Timeline
========================================================= */

#timeline-tab{
    color:
        var(--mc-text) !important;
}

.adv-history-card{
    background:
        var(--mc-surface) !important;
}

.adv-history-title{
    color:
        var(--mc-text) !important;
}

.adv-history-description,
.adv-history-meta{
    color:
        var(--mc-muted) !important;
}

.adv-history-mod{
    background:
        #f0f3f1 !important;

    color:
        #536159 !important;
}


/* =========================================================
   Controls
========================================================= */

input,
select{
    background:
        var(--mc-surface) !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        8px !important;
}

input::placeholder{
    color:
        #8a9690 !important;
}


/* =========================================================
   Desktop density
========================================================= */

@media(min-width:1100px){

    .stats-grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(180px,1fr)
            ) !important;
    }

    #overview-tab .stats-grid{
        grid-template-columns:
            repeat(3,1fr) !important;
    }

    .adv-grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(260px,1fr)
            ) !important;
    }

}


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

@media(max-width:700px){

    body{
        background:
            var(--mc-bg) !important;
    }

    #ux-primary-nav{
        border-radius:
            8px !important;
    }

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

        font-size:
            11px !important;
    }

    .stat-tile,
    .overview-highlight,
    .adv-card,
    .adv-history-card,
    .history-ranking-row{
        box-shadow:
            0 1px 4px
            rgba(20,35,27,.06) !important;
    }

    #compare-tab
    .history-table
    tbody tr{
        background:
            var(--mc-surface) !important;

        border:
            1px solid
            var(--mc-border) !important;

        box-shadow:
            0 1px 4px
            rgba(20,35,27,.05) !important;
    }

}


/* =========================================================
   Reduced motion
========================================================= */

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

    *,
    *::before,
    *::after{
        transition:
            none !important;

        animation:
            none !important;
    }

}


/* =========================================================
   FINAL DARK READABLE THEME
   Minecraft-inspired / readability first
   2026-08-18
========================================================= */

:root{
    --mc-bg:#0d1117;
    --mc-bg-soft:#111820;
    --mc-panel:#161d25;
    --mc-panel-2:#1b242d;
    --mc-panel-hover:#202b35;

    --mc-border:#2d3945;
    --mc-border-soft:#222d37;

    --mc-text:#f0f6fc;
    --mc-text-2:#c9d1d9;
    --mc-muted:#8b98a5;

    --mc-green:#63c74d;
    --mc-cyan:#38c7d9;
    --mc-gold:#e3b341;
    --mc-purple:#a970ff;
    --mc-red:#ff6259;

    --mc-radius:10px;
}


/* =========================================================
   PAGE
========================================================= */

html,
body{
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(99,199,77,.035),
            transparent 30%
        ),
        #0d1117 !important;

    color:var(--mc-text) !important;
}

body{
    min-height:100vh;
}

body::before,
body::after{
    opacity:.12 !important;
}


/* =========================================================
   GLOBAL TEXT
========================================================= */

body,
button,
input,
select,
textarea{
    color:var(--mc-text);
}

h1,
h2,
h3,
h4,
strong{
    color:var(--mc-text) !important;
}

p,
small,
label{
    color:var(--mc-text-2);
}


/* =========================================================
   HEADER
========================================================= */

header,
.site-header,
#site-header{
    background:#111820 !important;
    border-bottom:1px solid var(--mc-border) !important;
    box-shadow:none !important;
}

header h1,
.site-header h1{
    color:#fff !important;
    text-shadow:none !important;
}


/* =========================================================
   PLAYER HERO
========================================================= */

.player-hero,
#player-hero,
.ux-player-hero{
    background:
        linear-gradient(
            110deg,
            #162330 0%,
            #151c25 65%,
            #191a2b 100%
        ) !important;

    border:1px solid #304052 !important;
    border-radius:14px !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.18) !important;

    color:var(--mc-text) !important;
}

.player-hero *,
#player-hero *,
.ux-player-hero *{
    color:inherit;
}

.player-hero img,
#player-hero img,
.ux-player-hero img{
    image-rendering:pixelated;
}


/* =========================================================
   INPUT / SELECT
========================================================= */

input,
select,
textarea{
    background:#111820 !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;

    border-radius:8px !important;

    box-shadow:none !important;
}

input::placeholder{
    color:#748290 !important;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;
    border-color:#4b8fca !important;

    box-shadow:
        0 0 0 2px
        rgba(56,199,217,.10) !important;
}


/* =========================================================
   PRIMARY NAV
========================================================= */

#ux-primary-nav{
    background:#10161d !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        10px !important;

    padding:
        5px !important;

    gap:
        5px !important;

    box-shadow:none !important;
}

.ux-primary-tab{
    background:#182129 !important;

    color:
        var(--mc-text-2) !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        7px !important;

    box-shadow:none !important;

    min-height:
        42px;
}

.ux-primary-tab:hover{
    background:#202b35 !important;
    color:#fff !important;
}

.ux-primary-tab.active{
    color:#fff !important;
}


/* Overview */

.ux-primary-tab[data-tab="overview"],
.ux-primary-tab[data-tab="overview-tab"]{
    border-top:2px solid var(--mc-green) !important;
}

.ux-primary-tab[data-tab="overview"].active,
.ux-primary-tab[data-tab="overview-tab"].active{
    background:
        rgba(99,199,77,.15) !important;

    border-color:
        rgba(99,199,77,.45) !important;
}


/* Stats */

.ux-primary-tab[data-tab*="combat"].active,
.ux-primary-tab[data-tab*="stats"].active{
    background:
        rgba(56,199,217,.14) !important;

    border-color:
        rgba(56,199,217,.42) !important;
}


/* Advancements */

.ux-primary-tab[data-tab*="advancement"].active{
    background:
        rgba(169,112,255,.14) !important;

    border-color:
        rgba(169,112,255,.42) !important;
}


/* Analysis */

.ux-primary-tab[data-tab*="compare"].active,
.ux-primary-tab[data-tab*="ranking"].active,
.ux-primary-tab[data-tab*="activity"].active{
    background:
        rgba(227,179,65,.14) !important;

    border-color:
        rgba(227,179,65,.42) !important;
}


/* =========================================================
   SECONDARY NAV
========================================================= */

#ux-secondary-nav,
.ux-secondary-nav{
    gap:6px !important;
}

#ux-secondary-nav button,
.ux-secondary-nav button{
    background:#151d25 !important;

    color:var(--mc-text-2) !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        999px !important;

    box-shadow:none !important;
}

#ux-secondary-nav button:hover,
.ux-secondary-nav button:hover{
    background:#202b35 !important;
    color:#fff !important;
}

#ux-secondary-nav button.active,
.ux-secondary-nav button.active{
    background:
        rgba(56,199,217,.13) !important;

    border-color:
        var(--mc-cyan) !important;

    color:#7ee6ef !important;
}


/* =========================================================
   CONTENT WIDTH / SPACE USAGE
========================================================= */

main,
.main-content,
#app{
    width:100% !important;
    max-width:none !important;
}

.panel-section{
    width:100%;
}

#overview-tab,
#combat-tab,
#movement-tab,
#blocks-tab,
#items-tab,
#craft-tab,
#other-tab,
#all-stats-tab,
#advancements-tab,
#twilight-tab,
#timeline-tab,
#compare-tab,
#ranking-tab,
#recent-activity-tab{
    width:100% !important;
}


/* =========================================================
   GENERIC PANELS
========================================================= */

.panel,
.panel-section,
.overview-panel,
.history-table-wrap,
.adv-history-card{
    border-color:
        var(--mc-border) !important;
}

.overview-panel,
.history-table-wrap{
    background:
        var(--mc-panel) !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        var(--mc-radius) !important;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.14) !important;
}


/* =========================================================
   STAT CARDS
========================================================= */

.stat-tile,
.overview-highlight{
    background:
        #171f27 !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}

.stat-tile:hover,
.overview-highlight:hover{
    background:
        #1d2832 !important;

    border-color:
        #3c4d5c !important;
}

.stat-tile .label,
.overview-highlight .label{
    color:
        var(--mc-muted) !important;
}

.stat-tile .value,
.overview-highlight .value{
    color:
        #fff !important;
}


/* restrained Minecraft accent */

.stat-tile:nth-child(5n+1){
    border-top:
        2px solid
        var(--mc-green) !important;
}

.stat-tile:nth-child(5n+2){
    border-top:
        2px solid
        var(--mc-cyan) !important;
}

.stat-tile:nth-child(5n+3){
    border-top:
        2px solid
        var(--mc-gold) !important;
}

.stat-tile:nth-child(5n+4){
    border-top:
        2px solid
        var(--mc-purple) !important;
}

.stat-tile:nth-child(5n){
    border-top:
        2px solid
        var(--mc-red) !important;
}


/* =========================================================
   OVERVIEW
========================================================= */

#overview-tab{
    gap:12px !important;
}

#overview-tab .overview-grid{
    gap:12px !important;
}

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

#overview-tab .stat-grid{
    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px,1fr)
        ) !important;

    gap:
        9px !important;
}


/* =========================================================
   COMBAT
========================================================= */

#combat-tab .stat-tile{
    border-left:
        1px solid
        var(--mc-border) !important;
}

#combat-tab .stat-tile:nth-child(odd){
    border-top:
        2px solid
        rgba(255,98,89,.75) !important;
}


/* =========================================================
   MOB CARDS
========================================================= */

.mob-card,
.mob-ranking-card,
.ranking-card{
    background:
        #171f27 !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        8px !important;

    box-shadow:none !important;
}

.mob-card:hover,
.mob-ranking-card:hover,
.ranking-card:hover{
    background:
        #1e2933 !important;

    border-color:
        #40515f !important;
}


/* =========================================================
   ADVANCEMENTS
========================================================= */

#advancements-tab .adv-card{
    background:
        #171f27 !important;

    color:
        var(--mc-text) !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-top:
        2px solid
        rgba(169,112,255,.72) !important;

    border-radius:
        8px !important;

    box-shadow:none !important;
}

#advancements-tab .adv-card:hover{
    background:
        #1e2832 !important;

    border-color:
        #7356a5 !important;
}

#advancements-tab .adv-card.done{
    border-left:
        3px solid
        var(--mc-green) !important;
}


/* =========================================================
   HISTORY / RANKING
========================================================= */

.history-ranking-row,
.adv-history-card{
    background:
        #171f27 !important;

    border:
        1px solid
        var(--mc-border) !important;

    border-radius:
        8px !important;

    color:
        var(--mc-text) !important;

    box-shadow:none !important;
}

.history-ranking-row:hover,
.adv-history-card:hover{
    background:
        #1e2933 !important;
}


/* =========================================================
   COMPARE TABLE
========================================================= */

#compare-tab .history-table-wrap{
    overflow:auto;
}

#compare-tab .history-table{
    background:
        #111820 !important;
}

#compare-tab .history-table th{
    background:
        #182129 !important;

    color:
        var(--mc-text) !important;
}

#compare-tab .history-table td{
    background:
        #111820 !important;

    color:
        var(--mc-text-2) !important;
}

#compare-tab .history-table tr:hover td{
    background:
        #182129 !important;
}

#compare-tab
.history-table
.history-best{
    background:
        rgba(227,179,65,.11) !important;

    color:
        #ffd866 !important;
}


/* =========================================================
   PLAYER CHIPS
========================================================= */

.history-player-chip{
    background:
        #171f27 !important;

    color:
        var(--mc-text-2) !important;

    border:
        1px solid
        var(--mc-border) !important;

    box-shadow:none !important;
}

.history-player-chip:hover{
    background:
        #202b35 !important;

    border-color:
        #4d6070 !important;
}

.history-player-chip.active{
    background:
        rgba(56,199,217,.15) !important;

    border-color:
        var(--mc-cyan) !important;

    color:
        #8cecf4 !important;
}


/* =========================================================
   PROGRESS
========================================================= */

progress,
.progress-track,
.adv-progress{
    background:
        #202832 !important;
}

.progress-fill,
.adv-progress-fill{
    background:
        linear-gradient(
            90deg,
            #45a83d,
            #63c74d
        ) !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

*{
    scrollbar-color:
        #3a4652
        #111820;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#111820;
}

::-webkit-scrollbar-thumb{
    background:#3a4652;
    border-radius:10px;
    border:2px solid #111820;
}

::-webkit-scrollbar-thumb:hover{
    background:#52606d;
}


/* =========================================================
   DESKTOP — USE THE AVAILABLE SPACE
========================================================= */

@media(min-width:1100px){

    body{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    #overview-tab .overview-grid{
        grid-template-columns:
            minmax(0,2.15fr)
            minmax(300px,1fr) !important;
    }

    #combat-tab .stat-grid{
        grid-template-columns:
            repeat(
                7,
                minmax(0,1fr)
            ) !important;
    }

    #advancements-tab .adv-grid{
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1500px){

    body{
        padding-left:16px !important;
        padding-right:16px !important;
    }

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

    #advancements-tab .adv-grid{
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    body{
        background:
            #0d1117 !important;

        padding:
            0 !important;
    }

    .player-hero,
    #player-hero,
    .ux-player-hero{
        border-radius:
            9px !important;
    }

    #ux-primary-nav{
        border-radius:
            7px !important;

        padding:
            3px !important;
    }

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

        font-size:
            11px !important;
    }

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

    #advancements-tab .adv-grid{
        grid-template-columns:
            1fr !important;
    }

    .stat-tile,
    .overview-highlight,
    .adv-card,
    .history-ranking-row,
    .adv-history-card{
        border-radius:
            7px !important;
    }

}


/* =========================================================
   FORCE REMOVE LIGHT THEME REMNANTS
========================================================= */

body,
main,
#app,
.panel-section{
    background-color:
        transparent !important;
}

table,
tbody,
tr{
    color:
        var(--mc-text-2);
}

button{
    color:
        var(--mc-text);
}

/* Never allow readable-theme white surfaces */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color:#fff"]{
    background:
        var(--mc-panel) !important;
}


/* =========================================================
   DESKTOP LAYOUT REBUILD
   Space efficiency / readability
   2026-08-18
========================================================= */


/* ---------------------------------------------------------
   Global spacing
--------------------------------------------------------- */

body{
    margin:0 !important;
}

body > header,
header{
    padding-top:14px !important;
    padding-bottom:14px !important;
}

main,
#app,
.main-content{
    padding-top:12px !important;
}


/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

header{
    min-height:auto !important;
}

header h1{
    margin:
        0 0 3px !important;

    line-height:
        1.15 !important;
}

header p{
    margin:0 !important;
}


/* ---------------------------------------------------------
   Main content width
--------------------------------------------------------- */

@media(min-width:1000px){

    body > main,
    main,
    #app,
    .main-content{
        width:
            calc(100% - 28px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/* ---------------------------------------------------------
   Player hero compact dashboard
--------------------------------------------------------- */

.player-hero,
#player-hero,
.ux-player-hero{
    min-height:
        0 !important;

    padding:
        14px 16px !important;

    margin-bottom:
        12px !important;
}

.player-hero img,
#player-hero img,
.ux-player-hero img{
    flex-shrink:0;
}


/* ---------------------------------------------------------
   Search
--------------------------------------------------------- */

#ux-global-search,
.ux-global-search{
    margin:
        10px 0 !important;
}

#ux-global-search input,
.ux-global-search input{
    min-height:
        42px !important;
}


/* ---------------------------------------------------------
   Player selector
--------------------------------------------------------- */

#ux-player-switcher,
.ux-player-switcher{
    margin:
        8px 0 !important;

    min-height:
        46px !important;
}

#ux-player-select{
    min-height:
        38px !important;
}


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

#ux-primary-nav{
    margin:
        8px 0 !important;

    min-height:
        48px !important;
}

.ux-primary-tab{
    padding:
        8px 12px !important;
}


/* ---------------------------------------------------------
   Secondary navigation
--------------------------------------------------------- */

#ux-secondary-nav,
.ux-secondary-nav{
    margin:
        8px 0 12px !important;

    min-height:
        34px !important;
}


/* ---------------------------------------------------------
   Remove excessive blank vertical space
--------------------------------------------------------- */

#overview-tab,
#combat-tab,
#movement-tab,
#blocks-tab,
#items-tab,
#craft-tab,
#other-tab,
#all-stats-tab,
#advancements-tab,
#twilight-tab,
#timeline-tab,
#compare-tab,
#ranking-tab,
#recent-activity-tab{
    padding-top:
        8px !important;

    margin-top:
        0 !important;
}

.panel-section{
    margin-top:
        10px !important;

    margin-bottom:
        12px !important;
}

.panel-section > h2,
.panel-section > h3{
    margin-top:
        0 !important;

    margin-bottom:
        10px !important;
}


/* ---------------------------------------------------------
   Overview desktop dashboard
--------------------------------------------------------- */

@media(min-width:1000px){

    #overview-tab .overview-grid{
        display:grid !important;

        grid-template-columns:
            minmax(0, 2.2fr)
            minmax(300px, 1fr) !important;

        gap:
            12px !important;

        align-items:
            stretch !important;
    }

    #overview-tab .overview-grid > *{
        min-width:0;
    }

}


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

#overview-tab .overview-panel{
    padding:
        14px !important;

    margin:
        0 !important;
}

#overview-tab .overview-panel h2,
#overview-tab .overview-panel h3{
    margin:
        0 0 10px !important;
}

#overview-tab .stat-grid{
    align-items:
        stretch !important;
}

#overview-tab .stat-tile,
#overview-tab .overview-highlight{
    min-height:
        74px !important;

    padding:
        11px 12px !important;

    display:flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;
}


/* ---------------------------------------------------------
   Large screen overview density
--------------------------------------------------------- */

@media(min-width:1400px){

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

        gap:
            9px !important;
    }

}


@media(min-width:1800px){

    #overview-tab .overview-grid{
        grid-template-columns:
            minmax(0, 2.35fr)
            minmax(330px, .95fr) !important;
    }

}


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

@media(min-width:1200px){

    #combat-tab .stat-grid{
        display:grid !important;

        grid-template-columns:
            repeat(
                7,
                minmax(0,1fr)
            ) !important;

        gap:
            9px !important;
    }

}

#combat-tab .stat-tile{
    min-height:
        72px !important;

    padding:
        10px 12px !important;
}


/* ---------------------------------------------------------
   Ranking / mob card density
--------------------------------------------------------- */

.mob-grid,
.ranking-grid{
    gap:
        9px !important;
}

.mob-card,
.mob-ranking-card,
.ranking-card{
    min-height:
        74px !important;

    padding:
        10px 12px !important;
}


/* ---------------------------------------------------------
   Advancement cards
--------------------------------------------------------- */

#advancements-tab .adv-grid{
    gap:
        9px !important;
}

#advancements-tab .adv-card{
    padding:
        12px !important;

    min-height:
        150px !important;
}

@media(min-width:1350px){

    #advancements-tab .adv-grid{
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;
    }

}

@media(min-width:1850px){

    #advancements-tab .adv-grid{
        grid-template-columns:
            repeat(
                6,
                minmax(0,1fr)
            ) !important;
    }

}


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

#compare-tab .history-player-picker{
    margin:
        8px 0 12px !important;
}

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


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

#ranking-tab .history-toolbar{
    margin-bottom:
        10px !important;
}

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

#ranking-tab .history-ranking-row{
    min-height:
        54px !important;

    padding:
        9px 13px !important;
}


/* ---------------------------------------------------------
   Recent activity
--------------------------------------------------------- */

#recent-activity-tab .history-feed-main{
    padding:
        10px 12px !important;
}


/* ---------------------------------------------------------
   Timeline
--------------------------------------------------------- */

#timeline-tab .adv-history-card{
    padding:
        11px 13px !important;
}


/* ---------------------------------------------------------
   Desktop: make full width actually useful
--------------------------------------------------------- */

@media(min-width:1500px){

    .panel-section{
        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }

    .stat-grid{
        gap:
            9px !important;
    }

}


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

@media(max-width:700px){

    main,
    #app,
    .main-content{
        width:
            100% !important;

        padding-left:
            8px !important;

        padding-right:
            8px !important;
    }

    .player-hero,
    #player-hero,
    .ux-player-hero{
        padding:
            11px !important;
    }

    #ux-primary-nav{
        margin:
            6px 0 !important;
    }

    #ux-secondary-nav,
    .ux-secondary-nav{
        margin:
            6px 0 10px !important;
    }

    #overview-tab .overview-grid{
        display:block !important;
    }

    #overview-tab .overview-panel{
        margin-bottom:
            10px !important;
    }

    #overview-tab .stat-tile,
    #overview-tab .overview-highlight{
        min-height:
            66px !important;
    }

}


/* ---------------------------------------------------------
   Prevent giant accidental gaps
--------------------------------------------------------- */

#overview-tab > :empty,
#combat-tab > :empty,
#movement-tab > :empty,
#blocks-tab > :empty,
#items-tab > :empty,
#craft-tab > :empty,
#other-tab > :empty,
#advancements-tab > :empty,
#compare-tab > :empty,
#ranking-tab > :empty{
    display:none !important;
}



/* =========================================================
   Final layout cleanup
   2026-08-18
========================================================= */


/* ---------------------------------------------------------
   Legacy UI

   These elements are still used by the original JS.
   Keep them in the DOM, but do not render duplicate UI.
--------------------------------------------------------- */

body > main > .toolbar{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

body > main > #player-name,
body > main > #status{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
}


/* old navigation is controlled by UX navigation */

#stats-tabs{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
}


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

main{
    width:min(1880px, calc(100% - 32px)) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:14px 0 32px !important;
}


/* ---------------------------------------------------------
   UX shell
--------------------------------------------------------- */

#ux-shell{
    margin-top:0 !important;
    margin-bottom:16px !important;
}


/* player selector */

#ux-player-bar{
    min-height:58px !important;
    padding:8px 12px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(190px,260px) !important;
    align-items:center !important;
    gap:14px !important;

    background:#151c20 !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    border-top:
        3px solid
        #65b84c !important;

    border-radius:8px !important;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.18) !important;
}


.ux-player-current{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}


.ux-player-avatar{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;

    border-radius:5px !important;

    background-size:cover !important;
    background-position:center !important;
}


.ux-player-name{
    font-size:15px !important;
    font-weight:700 !important;
    color:#f3f7f4 !important;
}


.ux-player-sub{
    margin-top:2px !important;
    font-size:11px !important;
    color:#89979d !important;
}


#ux-player-select{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;

    padding:0 36px 0 12px !important;

    color:#eef4f0 !important;
    background:#0f1519 !important;

    border:
        1px solid
        #344149 !important;

    border-radius:6px !important;

    font-weight:600 !important;
}


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

#ux-primary-nav{
    margin-top:8px !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;

    padding:5px !important;

    background:#0e1418 !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    border-radius:8px !important;
}


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

    padding:7px 10px !important;

    border-radius:5px !important;

    font-size:13px !important;
    font-weight:700 !important;

    color:#b9c4c8 !important;
    background:#171f24 !important;

    border:
        1px solid
        rgba(255,255,255,.05) !important;

    box-shadow:none !important;
}


.ux-primary-tab:hover{
    color:#fff !important;
    background:#1d282e !important;
}


.ux-primary-tab.active{
    color:#fff !important;
    background:#223128 !important;

    border-color:
        rgba(101,184,76,.65) !important;

    box-shadow:
        inset 0 -2px 0
        #65b84c !important;
}


/* retain group identity without excessive saturation */

.ux-primary-tab[data-ux-group="stats"].active{
    background:#173036 !important;
    border-color:rgba(50,190,199,.55) !important;
    box-shadow:inset 0 -2px 0 #32bec7 !important;
}


.ux-primary-tab[data-ux-group="advancements"].active{
    background:#292039 !important;
    border-color:rgba(169,107,221,.55) !important;
    box-shadow:inset 0 -2px 0 #a96bdd !important;
}


.ux-primary-tab[data-ux-group="analysis"].active{
    background:#302a18 !important;
    border-color:rgba(210,165,52,.55) !important;
    box-shadow:inset 0 -2px 0 #d2a534 !important;
}


/* ---------------------------------------------------------
   Secondary navigation
--------------------------------------------------------- */

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


#ux-secondary-nav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
}


.ux-secondary-tab{
    min-height:32px !important;
    padding:5px 11px !important;

    border-radius:16px !important;

    font-size:11px !important;
    font-weight:600 !important;

    color:#aebbc0 !important;
    background:#12191d !important;

    border:
        1px solid
        #303c42 !important;

    box-shadow:none !important;
}


.ux-secondary-tab.active{
    color:#dff9ff !important;
    background:#14313a !important;
    border-color:#2baec0 !important;
}


/* ---------------------------------------------------------
   Tab content spacing
--------------------------------------------------------- */

.tab-panel.active{
    margin-top:0 !important;
}


.panel-section{
    margin-top:14px !important;
}


.section-title{
    margin:
        0 0 10px !important;
}


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

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


.overview-dashboard{
    gap:12px !important;
}


#overview .panel-section{
    margin-top:12px !important;
}


/* hide duplicate legacy overview section when dashboard exists */

#overview-dashboard + .panel-section{
    display:none !important;
}


/* ---------------------------------------------------------
   Desktop width usage
--------------------------------------------------------- */

@media(min-width:1100px){

    .grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(190px,1fr)
            ) !important;
    }


    #combat-tab .grid,
    #movement-tab .grid,
    #blocks-tab .grid,
    #items-tab .grid,
    #craft-tab .grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(210px,1fr)
            ) !important;
    }


    .adv-grid{
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(280px,1fr)
            ) !important;
    }

}


/* ---------------------------------------------------------
   Large desktop
--------------------------------------------------------- */

@media(min-width:1500px){

    main{
        width:
            min(
                1900px,
                calc(100% - 48px)
            ) !important;
    }


    #ux-player-bar{
        grid-template-columns:
            minmax(0,1fr)
            280px !important;
    }

}


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

@media(max-width:700px){

    main{
        width:
            calc(100% - 16px) !important;

        padding:
            8px 0 20px !important;
    }


    #ux-player-bar{
        grid-template-columns:
            1fr !important;

        gap:7px !important;

        padding:
            8px !important;
    }


    #ux-player-select{
        height:
            40px !important;
    }


    #ux-primary-nav{
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }


    .ux-primary-tab{
        min-height:
            38px !important;

        font-size:
            12px !important;
    }


    #ux-secondary-wrap{
        overflow-x:auto !important;
        scrollbar-width:none !important;
    }


    #ux-secondary-wrap::-webkit-scrollbar{
        display:none !important;
    }


    #ux-secondary-nav{
        flex-wrap:nowrap !important;
        width:max-content !important;
        min-width:100% !important;
    }

}



/* =========================================================
   Ranking navigation
========================================================= */

.ux-primary-tab[data-ux-group="analysis"]::before{
    content:"♛";
    margin-right:5px;
    color:#e4b83f;
}


.ux-primary-tab[data-ux-group="analysis"].active{
    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            #302b1d,
            #252117
        ) !important;

    border-color:
        rgba(228,184,63,.58) !important;

    box-shadow:
        inset 0 -2px 0
        #e4b83f !important;
}



/* =========================================================
   Achievement tiles - final dark override
========================================================= */

#advancements-tab .adv-card,
#advancements-tab .advancement-card,
#advancements-tab [class*="adv-card"],
#advancements-tab [class*="advancement-card"]{
    background:
        #151c22 !important;

    color:
        #dce5e9 !important;

    border:
        1px solid
        #303b43 !important;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.18) !important;
}


#advancements-tab .adv-card:hover,
#advancements-tab .advancement-card:hover{
    background:
        #1a232a !important;

    border-color:
        #46545e !important;
}


#advancements-tab .adv-card *,
#advancements-tab .advancement-card *{
    color:
        inherit;
}


#advancements-tab .adv-title,
#advancements-tab .advancement-title{
    color:
        #f1f5f7 !important;
}


#advancements-tab .adv-description,
#advancements-tab .advancement-description{
    color:
        #9ba8ae !important;
}


/* completed achievement */

#advancements-tab .adv-card.done,
#advancements-tab .adv-card.completed,
#advancements-tab .advancement-card.done,
#advancements-tab .advancement-card.completed{
    background:
        linear-gradient(
            135deg,
            rgba(70,125,61,.16),
            #151c22 45%
        ) !important;

    border-color:
        rgba(92,159,78,.48)
        !important;
}


/* challenge */

#advancements-tab .adv-card.challenge,
#advancements-tab .advancement-card.challenge{
    background:
        linear-gradient(
            135deg,
            rgba(124,82,160,.15),
            #151c22 45%
        ) !important;

    border-color:
        rgba(157,102,201,.45)
        !important;
}


/* force common nested wrappers dark */

#advancements-tab .adv-card > div,
#advancements-tab .advancement-card > div{
    background-color:
        transparent !important;
}



/* Ranking-only mode */

#compare-tab,
#recent-activity-tab{
    display:none !important;
}



/* =========================================================
   Final dark controls + strong card hover
   2026-08-18
========================================================= */


/* ---------------------------------------------------------
   Advancement controls
--------------------------------------------------------- */

#advancements-tab input,
#advancements-tab select,
#advancements-tab input[type="search"],
#advancements-tab input[type="text"]{
    background:#111820 !important;
    color:#eef5f0 !important;

    border:
        1px solid #34413b !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025) !important;
}


#advancements-tab input::placeholder{
    color:#81908a !important;
    opacity:1 !important;
}


#advancements-tab input:hover,
#advancements-tab select:hover{
    background:#151e26 !important;
    border-color:#52635a !important;
}


#advancements-tab input:focus,
#advancements-tab select:focus{
    outline:none !important;

    background:#151e26 !important;

    border-color:#59b94f !important;

    box-shadow:
        0 0 0 2px rgba(89,185,79,.14),
        inset 0 1px 0 rgba(255,255,255,.035)
        !important;
}


#advancements-tab select option{
    background:#111820 !important;
    color:#eef5f0 !important;
}


/* ---------------------------------------------------------
   Common card animation
--------------------------------------------------------- */

#advancements-tab .adv-card,
.stat-tile,
.overview-highlight,
.history-ranking-row,
.adv-history-card{
    position:relative;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease,
        filter .14s ease
        !important;
}


/* ---------------------------------------------------------
   Advancement hover
--------------------------------------------------------- */

#advancements-tab .adv-card:hover{
    transform:
        translateY(-3px)
        scale(1.008) !important;

    background:
        linear-gradient(
            180deg,
            #1b2621 0%,
            #151e1a 100%
        ) !important;

    border-color:
        #62c755 !important;

    box-shadow:
        0 9px 22px rgba(0,0,0,.32),
        0 0 0 1px rgba(98,199,85,.24),
        0 0 15px rgba(98,199,85,.08),
        inset 0 1px 0 rgba(255,255,255,.05)
        !important;

    z-index:4;
}


/* stronger title */

#advancements-tab .adv-card:hover
.adv-title{
    color:#fff !important;
}


/* icon emphasis */

#advancements-tab .adv-card img,
#advancements-tab .adv-card .adv-icon{
    transition:
        transform .14s ease,
        filter .14s ease
        !important;
}


#advancements-tab .adv-card:hover img,
#advancements-tab .adv-card:hover .adv-icon{
    transform:
        scale(1.08);

    filter:
        brightness(1.12)
        saturate(1.08);
}


/* progress emphasis */

#advancements-tab .adv-card:hover
.adv-progress,
#advancements-tab .adv-card:hover
.adv-progress-fill,
#advancements-tab .adv-card:hover
.progress-fill{
    filter:
        brightness(1.16)
        saturate(1.08);
}


/* ---------------------------------------------------------
   Stat tiles
--------------------------------------------------------- */

.stat-tile:hover,
.overview-highlight:hover{
    transform:
        translateY(-2px)
        scale(1.004) !important;

    border-color:
        #52655b !important;

    background:
        linear-gradient(
            180deg,
            #202a25,
            #19221e
        ) !important;

    box-shadow:
        0 7px 16px rgba(0,0,0,.25),
        0 0 0 1px rgba(99,189,85,.10),
        inset 0 1px 0 rgba(255,255,255,.045)
        !important;

    z-index:2;
}


/* ---------------------------------------------------------
   Ranking rows
--------------------------------------------------------- */

#ranking-tab .history-ranking-row:hover{
    transform:
        translateX(4px)
        !important;

    background:
        #1c2621 !important;

    border-color:
        #5a6d62 !important;

    box-shadow:
        inset 4px 0 0 #63bd55,
        0 4px 12px rgba(0,0,0,.20)
        !important;
}


/* Preserve medal colors while hovering */

#ranking-tab .ranking-place-1:hover{
    box-shadow:
        inset 4px 0 0 #e1b83f,
        0 4px 12px rgba(0,0,0,.22)
        !important;
}


#ranking-tab .ranking-place-2:hover{
    box-shadow:
        inset 4px 0 0 #aeb8c1,
        0 4px 12px rgba(0,0,0,.22)
        !important;
}


#ranking-tab .ranking-place-3:hover{
    box-shadow:
        inset 4px 0 0 #b97948,
        0 4px 12px rgba(0,0,0,.22)
        !important;
}


/* ---------------------------------------------------------
   Timeline cards
--------------------------------------------------------- */

.adv-history-card:hover{
    transform:
        translateY(-2px)
        !important;

    border-color:
        #62c755 !important;

    background:
        #19231f !important;

    box-shadow:
        0 6px 14px rgba(0,0,0,.24),
        0 0 0 1px rgba(98,199,85,.12)
        !important;
}


/* ---------------------------------------------------------
   Pointer feedback
--------------------------------------------------------- */

#advancements-tab .adv-card,
#ranking-tab .history-ranking-row,
.adv-history-card{
    cursor:pointer;
}


/* ---------------------------------------------------------
   Focus
--------------------------------------------------------- */

#advancements-tab .adv-card:focus-within,
#ranking-tab .history-ranking-row:focus-within,
.adv-history-card:focus-within{
    border-color:
        #69cb5d !important;

    box-shadow:
        0 0 0 2px
        rgba(105,203,93,.18)
        !important;
}


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

@media(max-width:700px){

    #advancements-tab .adv-card:hover,
    .stat-tile:hover,
    .overview-highlight:hover,
    .adv-history-card:hover{
        transform:none !important;
    }


    #ranking-tab
    .history-ranking-row:hover{
        transform:none !important;
    }

}


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

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

    #advancements-tab .adv-card,
    .stat-tile,
    .overview-highlight,
    .history-ranking-row,
    .adv-history-card,
    #advancements-tab .adv-card img,
    #advancements-tab .adv-card .adv-icon{
        transition:none !important;
    }

}



/* =========================================================
   Overview active navigation - dark
   2026-08-18
========================================================= */

/*
 * 概要だけ白背景になるのを防止。
 * 緑は背景ではなくアクセントとして使用する。
 */

#ux-primary-nav
.ux-primary-tab[data-ux-group="overview"].active,

#ux-primary-nav
.ux-primary-tab[data-ux-group="overview"][aria-selected="true"],

#ux-primary-nav
.ux-primary-tab[data-ux-group="overview"].is-active {

    background:
        linear-gradient(
            180deg,
            #1d2923 0%,
            #17211c 100%
        ) !important;

    color:
        #f3f8f4 !important;

    border-color:
        #59b94f !important;

    box-shadow:
        inset 0 3px 0 #67c957,
        inset 0 0 0 1px rgba(103,201,87,.12),
        0 2px 7px rgba(0,0,0,.22)
        !important;
}


/* 実際のJSがactiveを親グループ側で管理する場合にも対応 */

body[data-ux-group="overview"]
#ux-primary-nav
.ux-primary-tab[data-ux-group="overview"] {

    background:
        linear-gradient(
            180deg,
            #1d2923 0%,
            #17211c 100%
        ) !important;

    color:
        #f3f8f4 !important;

    border-color:
        #59b94f !important;

    box-shadow:
        inset 0 3px 0 #67c957,
        inset 0 0 0 1px rgba(103,201,87,.12),
        0 2px 7px rgba(0,0,0,.22)
        !important;
}


/* hoverも白くしない */

#ux-primary-nav
.ux-primary-tab[data-ux-group="overview"]:hover {

    background:
        linear-gradient(
            180deg,
            #233129 0%,
            #1a261f 100%
        ) !important;

    color:
        #ffffff !important;

    border-color:
        #67c957 !important;
}


/* legacy側の概要ボタンが残っている場合 */

.stats-tab[data-tab="overview"].active,
.stats-tab[data-tab="overview"]:hover {

    background:
        linear-gradient(
            180deg,
            #1d2923,
            #17211c
        ) !important;

    color:
        #f3f8f4 !important;

    border-color:
        #59b94f !important;
}
/* Top player controls - 20260818 */

/*
 * 最上部コントロール
 * 左：プレイヤー
 * 右：横断検索
 */
main > #ux-player-bar{

    display:grid !important;

    grid-template-columns:
        minmax(220px,280px)
        1fr
        minmax(360px,480px)
        !important;

    align-items:center !important;

    gap:12px !important;

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

    box-sizing:border-box !important;

    margin:14px 0 16px !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    z-index:20 !important;

    backdrop-filter:none !important;

    overflow:visible !important;
}


/*
 * Minecraft風の装飾線が
 * 上部バーに残らないよう解除
 */
main > #ux-player-bar::before,
main > #ux-player-bar::after{

    content:none !important;
    display:none !important;
}


/*
 * 重複する現在プレイヤー表示は
 * 下のプロフィールカードにあるため非表示
 */
main > #ux-player-bar
.ux-player-current{

    display:none !important;
}


/*
 * プレイヤー選択
 */
main > #ux-player-bar
#ux-player-select{

    grid-column:1 !important;

    justify-self:start !important;

    display:block !important;

    width:280px !important;
    min-width:220px !important;
    max-width:280px !important;

    height:40px !important;

    margin:0 !important;

    padding:
        0
        38px
        0
        12px
        !important;

    color:#f0f6fc !important;

    background-color:#111820 !important;

    border:
        1px solid
        #30363d
        !important;

    border-radius:9px !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:normal !important;

    text-align:left !important;
    text-indent:0 !important;

    opacity:1 !important;
    visibility:visible !important;

    box-shadow:none !important;
}


/*
 * 既存の統計横断検索
 */
main > #ux-player-bar
.top-cross-search{

    grid-column:3 !important;

    justify-self:end !important;

    display:block !important;

    width:480px !important;
    min-width:360px !important;
    max-width:480px !important;

    height:38px !important;

    margin:0 !important;

    padding:
        0
        12px
        !important;

    color:#e6edf3 !important;

    background:#111820 !important;

    border:
        1px solid
        #30363d
        !important;

    border-radius:9px !important;

    font-size:13px !important;

    box-shadow:none !important;

    outline:none !important;
}


main > #ux-player-bar
.top-cross-search::placeholder{

    color:#7d8590 !important;
}


main > #ux-player-bar
.top-cross-search:focus{

    border-color:#58a6ff !important;

    box-shadow:
        0 0 0 2px
        rgba(88,166,255,.12)
        !important;
}


/*
 * タブレット / スマホ
 */
@media(max-width:700px){

    main > #ux-player-bar{

        grid-template-columns:
            minmax(0,1fr)
            140px
            !important;

        gap:8px !important;

        margin:
            10px
            0
            12px
            !important;
    }


    main > #ux-player-bar
    #ux-player-select{

        grid-column:1 !important;

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

        height:40px !important;
    }


    main > #ux-player-bar
    .top-cross-search{

        grid-column:2 !important;

        width:140px !important;
        min-width:0 !important;
        max-width:140px !important;

        height:40px !important;

        font-size:12px !important;
    }
}

/* Secondary tab scale - 20260818 */

/*
 * 戦闘 / 移動 / ブロック などの
 * 小さいタブ列を大きくして余白も調整
 */
#ux-secondary-wrap{
    margin-top:10px !important;
    margin-bottom:18px !important;
}

#ux-secondary-nav{
    gap:12px !important;
    padding:4px 2px 10px !important;
    align-items:center !important;
}

.ux-secondary-tab{
    min-height:44px !important;
    padding:12px 18px !important;
    border-radius:999px !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.ux-secondary-tab.active{
    box-shadow:
        0 0 0 1px rgba(88,166,255,.20) inset !important;
}

/*
 * 小タブ直後のコンテンツが
 * 近すぎたり離れすぎたりしないよう微調整
 */
#ux-secondary-wrap + *{
    margin-top:2px !important;
}

@media(max-width:700px){
    #ux-secondary-wrap{
        margin-top:8px !important;
        margin-bottom:14px !important;
    }

    #ux-secondary-nav{
        gap:8px !important;
        padding:2px 1px 8px !important;
    }

    .ux-secondary-tab{
        min-height:38px !important;
        padding:10px 14px !important;
        font-size:13px !important;
    }
}


/* Combat + advancement UI polish - 20260818 */


/* =========================================================
   Combat statistics
========================================================= */

#combat-tab .panel-section:first-child{
    padding:18px !important;
}


#combat{
    display:grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        )
        !important;

    gap:16px !important;
}


#combat > .card{

    min-width:0 !important;
    min-height:96px !important;

    padding:
        18px
        20px
        !important;

    border-radius:12px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    gap:8px !important;

    box-sizing:border-box !important;
}


#combat > .card .label{

    margin:0 !important;

    font-size:13px !important;
    line-height:1.35 !important;

    color:#8b949e !important;
}


#combat > .card .value{

    margin:0 !important;

    font-size:21px !important;
    line-height:1.2 !important;

    font-weight:800 !important;

    letter-spacing:-.02em;
}


/*
 * 少し狭いPC
 */
@media(max-width:1250px){

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


/*
 * タブレット
 */
@media(max-width:850px){

    #combat{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        gap:12px !important;
    }
}


/*
 * スマホ
 */
@media(max-width:520px){

    #combat{
        grid-template-columns:
            1fr
            !important;
    }

    #combat > .card{
        min-height:84px !important;
        padding:15px 16px !important;
    }
}


/* =========================================================
   Advancement cards
========================================================= */

#advancements-tab .adv-card{

    cursor:pointer !important;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        transform .15s ease
        !important;
}


#advancements-tab .adv-card:hover{

    border-color:#484f58 !important;

    background:
        rgba(
            33,
            38,
            45,
            .82
        )
        !important;
}


#advancements-tab .adv-card:active{

    transform:
        translateY(1px);
}


/*
 * 日本語の達成条件
 */
.adv-condition-summary{

    margin-top:10px;

    padding:
        10px
        12px;

    display:flex;
    gap:9px;

    align-items:flex-start;

    border-radius:8px;

    background:
        rgba(
            88,
            166,
            255,
            .07
        );

    border:
        1px solid
        rgba(
            88,
            166,
            255,
            .18
        );

    color:#c9d1d9;

    font-size:12px;
    line-height:1.55;
}


.adv-condition-label{

    flex:0 0 auto;

    color:#58a6ff;

    font-weight:800;
}


.adv-criteria[open]{

    margin-top:13px;
}


.adv-criteria[open] summary{

    margin-bottom:4px;
}


/*
 * 条件一覧も少し読みやすく
 */
.criteria-row{

    padding:
        8px
        2px
        !important;

    gap:12px !important;

    font-size:12px !important;
}


.criteria-name{

    line-height:1.45 !important;
}


.criteria-time{

    white-space:nowrap;
}


@media(max-width:600px){

    .criteria-row{

        grid-template-columns:
            1fr
            !important;
    }

    .criteria-time{
        padding-left:20px;
    }

    .adv-condition-summary{
        display:block;
    }

    .adv-condition-label{
        display:block;
        margin-bottom:4px;
    }
}