/* =========================================================
   Minecraft Player Stats
   Minecraft-inspired visual theme
   2026-08-18
========================================================= */

:root{
    --mc-bg:#111613;
    --mc-bg-2:#181e1a;

    --mc-stone:#252b27;
    --mc-stone-2:#303832;
    --mc-stone-3:#3a433c;

    --mc-border-dark:#090c0a;
    --mc-border:#465048;
    --mc-highlight:#667268;

    --mc-text:#f5f7f5;
    --mc-muted:#a8b0aa;

    --mc-grass:#5fa83b;
    --mc-grass-light:#7fc957;
    --mc-dirt:#795438;

    --mc-diamond:#39c5cf;
    --mc-diamond-light:#75e2e8;

    --mc-gold:#f2c94c;
    --mc-iron:#c5ccd0;
    --mc-copper:#c87d55;

    --mc-redstone:#e24b42;
    --mc-nether:#9d3838;

    --mc-water:#438ac9;
    --mc-ender:#9d70d9;
    --mc-enchant:#a875e8;

    --mc-emerald:#42c96b;

    --mc-radius:3px;
}


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

html{
    background:#0b0f0c;
}

body{
    background:
        linear-gradient(
            rgba(7,10,8,.75),
            rgba(7,10,8,.75)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(255,255,255,.018) 31px,
            rgba(255,255,255,.018) 32px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 31px,
            rgba(255,255,255,.018) 31px,
            rgba(255,255,255,.018) 32px
        ),
        linear-gradient(
            135deg,
            #151b17,
            #0d120f
        ) !important;

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


/* =========================================================
   Main page title
========================================================= */

h1{
    color:#fff !important;

    text-shadow:
        2px 2px 0 #000,
        0 0 16px rgba(95,168,59,.22);

    letter-spacing:.01em;
}


/* =========================================================
   Minecraft panel base
========================================================= */

.panel-section,
.section-card,
.stat-tile,
.adv-card,
.history-ranking-row,
.adv-history-card,
.history-table-wrap,
#ux-player-bar,
#ux-primary-nav{
    border-radius:var(--mc-radius) !important;

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

    box-shadow:
        inset 0 1px 0
            rgba(255,255,255,.10),
        inset 0 -2px 0
            rgba(0,0,0,.35),
        0 2px 0
            rgba(0,0,0,.65) !important;
}


/* =========================================================
   Player HUD bar
========================================================= */

#ux-player-bar{
    background:
        linear-gradient(
            180deg,
            #343c36 0%,
            #252c27 100%
        ) !important;

    border-top-color:#657167 !important;

    position:relative;
}


/* grass-like top strip */

#ux-player-bar::before{
    content:"";

    position:absolute;
    left:-2px;
    right:-2px;
    top:-2px;

    height:5px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--mc-grass-light) 0 9px,
            var(--mc-grass) 9px 18px,
            #4a8c31 18px 27px
        );

    border-bottom:1px solid #315c22;
}


#ux-player-select{
    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            #202621,
            #171c18
        ) !important;

    border:
        2px solid
        #0a0d0b !important;

    border-radius:2px !important;

    box-shadow:
        inset 1px 1px 0
            rgba(255,255,255,.12),
        inset -1px -1px 0
            rgba(0,0,0,.55);

    font-weight:800;
}


/* =========================================================
   Main navigation
========================================================= */

#ux-primary-nav{
    background:
        linear-gradient(
            180deg,
            #252c27,
            #1a201c
        ) !important;

    padding:7px !important;
}


/* base MC button */

.ux-primary-tab{
    position:relative;

    border:
        2px solid
        #0a0d0b !important;

    border-radius:2px !important;

    background:
        linear-gradient(
            180deg,
            #424b43,
            #303831
        ) !important;

    color:#dbe1dc !important;

    box-shadow:
        inset 1px 1px 0
            rgba(255,255,255,.18),
        inset -2px -2px 0
            rgba(0,0,0,.35);

    text-shadow:
        1px 1px 0 #000;

    transition:
        filter .12s ease,
        transform .08s ease !important;
}

.ux-primary-tab:hover{
    filter:brightness(1.13);
}

.ux-primary-tab:active{
    transform:translateY(1px);
}


/* category colors */

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

.ux-primary-tab[data-ux-group="stats"]{
    border-top:
        4px solid
        var(--mc-diamond) !important;
}

.ux-primary-tab[data-ux-group="achievements"]{
    border-top:
        4px solid
        var(--mc-enchant) !important;
}

.ux-primary-tab[data-ux-group="analysis"]{
    border-top:
        4px solid
        var(--mc-gold) !important;
}


/* active main tabs */

.ux-primary-tab[data-ux-group="overview"].active{
    background:
        linear-gradient(
            #67ad42,
            #477f30
        ) !important;
}

.ux-primary-tab[data-ux-group="stats"].active{
    background:
        linear-gradient(
            #3ebdc8,
            #287f88
        ) !important;
}

.ux-primary-tab[data-ux-group="achievements"].active{
    background:
        linear-gradient(
            #9762ce,
            #673d94
        ) !important;
}

.ux-primary-tab[data-ux-group="analysis"].active{
    background:
        linear-gradient(
            #d6a93d,
            #9c7220
        ) !important;
}


/* icon-like pseudo content */

.ux-primary-tab[data-ux-group="overview"]::before{
    content:"🌱 ";
}

.ux-primary-tab[data-ux-group="stats"]::before{
    content:"⛏ ";
}

.ux-primary-tab[data-ux-group="achievements"]::before{
    content:"🏆 ";
}

.ux-primary-tab[data-ux-group="analysis"]::before{
    content:"◆ ";
}


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

.ux-secondary-tab{
    border-radius:2px !important;

    border:
        1px solid
        #111611 !important;

    background:
        linear-gradient(
            #343c35,
            #252c27
        ) !important;

    color:#bec7c0 !important;

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

.ux-secondary-tab:hover{
    color:#fff !important;
    border-color:#617064 !important;
}

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

    background:
        linear-gradient(
            #48544a,
            #323b34
        ) !important;

    border-color:#91a195 !important;

    box-shadow:
        inset 0 -3px 0
            var(--mc-diamond);
}


/* =========================================================
   Section identities
========================================================= */

/* Combat */

#combat-tab .panel-section,
#combat-tab .stat-tile{
    border-top-color:
        var(--mc-redstone) !important;
}


/* Movement */

#movement-tab .panel-section,
#movement-tab .stat-tile{
    border-top-color:
        var(--mc-water) !important;
}


/* Blocks */

#blocks-tab .panel-section,
#blocks-tab .stat-tile{
    border-top-color:
        var(--mc-grass) !important;
}


/* Items */

#items-tab .panel-section,
#items-tab .stat-tile{
    border-top-color:
        var(--mc-gold) !important;
}


/* Craft */

#craft-tab .panel-section,
#craft-tab .stat-tile{
    border-top-color:
        var(--mc-copper) !important;
}


/* Other */

#other-tab .panel-section,
#allstats-tab .panel-section{
    border-top-color:
        var(--mc-iron) !important;
}


/* Advancements */

#advancements-tab .panel-section,
#advancements-tab .adv-card{
    border-top-color:
        var(--mc-enchant) !important;
}


/* Twilight Forest */

#twilight-tab .panel-section,
#twilight-tab .stat-tile{
    border-top-color:
        #7046a3 !important;
}


/* Analysis */

#compare-tab .panel-section,
#ranking-tab .panel-section,
#recent-activity-tab .panel-section,
#timeline-tab .panel-section{
    border-top-color:
        var(--mc-diamond) !important;
}


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

.stat-tile{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #272e29,
            #1c221e
        ) !important;

    border:
        1px solid
        #0b0e0c !important;

    border-top:
        4px solid
        #56635a !important;
}


/* subtle pixel shine */

.stat-tile::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            transparent 40%
        );
}


.stat-tile-value,
.summary-value{
    color:#fff !important;

    text-shadow:
        1px 1px 0 #000;
}


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

#overview-dashboard .overview-panel{
    background:
        linear-gradient(
            145deg,
            #242b26,
            #191f1b
        ) !important;

    border:
        2px solid
        #0b0e0c !important;

    box-shadow:
        inset 0 1px 0
            rgba(255,255,255,.10),
        0 3px 0
            rgba(0,0,0,.65);
}


#overview-dashboard .overview-highlight{
    border-radius:2px !important;

    border:
        2px solid
        #0c0f0d !important;

    background:
        linear-gradient(
            145deg,
            #303832,
            #222923
        ) !important;

    box-shadow:
        inset 1px 1px 0
            rgba(255,255,255,.10),
        inset -2px -2px 0
            rgba(0,0,0,.28);
}


/* alternating accent bars */

#overview-dashboard
.overview-highlight:nth-child(1){
    border-top-color:
        var(--mc-gold) !important;
}

#overview-dashboard
.overview-highlight:nth-child(2){
    border-top-color:
        var(--mc-grass) !important;
}

#overview-dashboard
.overview-highlight:nth-child(3){
    border-top-color:
        var(--mc-redstone) !important;
}

#overview-dashboard
.overview-highlight:nth-child(4){
    border-top-color:
        var(--mc-copper) !important;
}

#overview-dashboard
.overview-highlight:nth-child(5){
    border-top-color:
        var(--mc-diamond) !important;
}

#overview-dashboard
.overview-highlight:nth-child(6){
    border-top-color:
        var(--mc-enchant) !important;
}


#overview-dashboard
.overview-highlight-value{
    color:#fff !important;

    text-shadow:
        1px 1px 0 #000;
}


/* =========================================================
   Progress bars
========================================================= */

progress,
.overview-progress,
.history-progress{
    border-radius:0 !important;
}


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

.history-ranking-row{
    background:
        linear-gradient(
            90deg,
            #222923,
            #181e1a
        ) !important;

    border-radius:2px !important;
}


/* first */

.history-ranking-row:nth-child(1){
    border-left:
        5px solid
        var(--mc-gold) !important;

    background:
        linear-gradient(
            90deg,
            rgba(242,201,76,.16),
            #181e1a 35%
        ) !important;
}

.history-ranking-row:nth-child(1)
.history-rank{
    background:
        linear-gradient(
            #f5d867,
            #bf8d27
        ) !important;

    color:#2b2104 !important;
}


/* second */

.history-ranking-row:nth-child(2){
    border-left:
        5px solid
        var(--mc-iron) !important;
}

.history-ranking-row:nth-child(2)
.history-rank{
    background:
        linear-gradient(
            #d7dde0,
            #8b969c
        ) !important;

    color:#232829 !important;
}


/* third */

.history-ranking-row:nth-child(3){
    border-left:
        5px solid
        var(--mc-copper) !important;
}

.history-ranking-row:nth-child(3)
.history-rank{
    background:
        linear-gradient(
            #d5966f,
            #955537
        ) !important;

    color:#2c160b !important;
}


.history-ranking-value{
    color:
        var(--mc-diamond-light) !important;

    text-shadow:
        1px 1px 0
        #000;
}


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

.history-table{
    background:
        #171d19 !important;
}

.history-table thead th{
    background:
        linear-gradient(
            #3a433c,
            #293029
        ) !important;

    color:#fff !important;
}


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

    color:#d8ded9 !important;
}


.history-table td.history-best{
    background:
        linear-gradient(
            90deg,
            rgba(242,201,76,.23),
            rgba(242,201,76,.09)
        ) !important;

    color:
        #ffe681 !important;

    box-shadow:
        inset 4px 0 0
        var(--mc-gold);
}


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

.adv-card,
.adv-history-card{
    border-radius:2px !important;

    background:
        linear-gradient(
            145deg,
            #252a27,
            #181d1a
        ) !important;

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


.adv-card:hover,
.adv-history-card:hover{
    background:
        linear-gradient(
            145deg,
            #302b38,
            #1e1b23
        ) !important;
}


.adv-history-mod{
    border-radius:2px !important;

    background:
        #3b2b4b !important;

    color:
        #d9baff !important;
}


/* =========================================================
   Search / Select / Input
========================================================= */

input,
select,
button{
    font-family:inherit;
}


input[type="text"],
input[type="search"],
.history-toolbar select{
    border-radius:2px !important;

    border:
        2px solid
        #090c0a !important;

    background:
        #171c18 !important;

    color:#fff !important;

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


/* =========================================================
   States
========================================================= */

.history-notice{
    border-radius:2px !important;

    border-left:
        4px solid
        var(--mc-gold) !important;

    background:
        rgba(110,83,25,.25) !important;
}


/* =========================================================
   Back to top button
========================================================= */

#ux-back-to-top{
    border-radius:2px !important;

    border:
        2px solid
        #080b09 !important;

    background:
        linear-gradient(
            #445047,
            #2b332d
        ) !important;

    box-shadow:
        inset 1px 1px 0
            rgba(255,255,255,.16),
        inset -2px -2px 0
            rgba(0,0,0,.35),
        0 3px 0
            rgba(0,0,0,.65) !important;

    text-shadow:
        1px 1px 0
        #000;
}


/* =========================================================
   Section title accent
========================================================= */

.section-title,
.panel-section h2,
.panel-section h3{
    position:relative;
}


.section-title::before{
    content:"■";

    margin-right:8px;

    color:
        var(--mc-grass);
}


/* combat */

#combat-tab .section-title::before{
    color:
        var(--mc-redstone);
}


/* movement */

#movement-tab .section-title::before{
    color:
        var(--mc-water);
}


/* block */

#blocks-tab .section-title::before{
    color:
        var(--mc-grass);
}


/* item */

#items-tab .section-title::before{
    color:
        var(--mc-gold);
}


/* craft */

#craft-tab .section-title::before{
    color:
        var(--mc-copper);
}


/* advancement */

#advancements-tab .section-title::before,
#twilight-tab .section-title::before{
    color:
        var(--mc-enchant);
}


/* =========================================================
   Scrollbar
========================================================= */

*{
    scrollbar-color:
        #526158
        #151a16;
}


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

::-webkit-scrollbar-track{
    background:#151a16;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            #526158,
            #343d37
        );

    border:
        2px solid
        #151a16;
}


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

@media(max-width:700px){

    body{
        background:
            linear-gradient(
                rgba(7,10,8,.82),
                rgba(7,10,8,.82)
            ),
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 23px,
                rgba(255,255,255,.016) 23px,
                rgba(255,255,255,.016) 24px
            ),
            repeating-linear-gradient(
                90deg,
                transparent 0,
                transparent 23px,
                rgba(255,255,255,.016) 23px,
                rgba(255,255,255,.016) 24px
            ),
            #111713 !important;
    }


    #ux-primary-nav{
        gap:5px !important;
    }


    .ux-primary-tab{
        padding:
            5px 2px !important;

        font-size:
            10px !important;
    }


    .stat-tile,
    .overview-highlight,
    .history-ranking-row,
    .adv-card,
    .adv-history-card{
        box-shadow:
            inset 0 1px 0
                rgba(255,255,255,.07),
            0 2px 0
                rgba(0,0,0,.55) !important;
    }


    #compare-tab
    .history-table
    tbody tr{
        border-radius:
            2px !important;

        background:
            linear-gradient(
                #232a25,
                #181e1a
            ) !important;

        box-shadow:
            inset 0 1px 0
                rgba(255,255,255,.06),
            0 2px 0
                rgba(0,0,0,.55);
    }

}


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

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

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

}