/* =========================================================
   Minecraft Player Stats
   Final UI polish
========================================================= */

:root{
    --final-bg:#0d1117;
    --final-card:#11161d;
    --final-card-hover:#151c25;
    --final-border:rgba(139,148,158,.28);
    --final-border-strong:rgba(139,148,158,.48);

    --final-text:#e6edf3;
    --final-muted:#8b949e;

    --final-red:#da3633;
    --final-blue:#2f81f7;
    --final-purple:#a371f7;

    --final-radius:14px;
}


/* =========================================================
   全体
========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

main{
    box-sizing:border-box;
}


/* スクロールバー */
*{
    scrollbar-width:thin;
    scrollbar-color:
        rgba(139,148,158,.45)
        transparent;
}

*::-webkit-scrollbar{
    width:8px;
    height:8px;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

*::-webkit-scrollbar-thumb{
    background:
        rgba(139,148,158,.38);

    border-radius:999px;
}


/* =========================================================
   タブ
========================================================= */

.stats-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;

    gap:4px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:
        x proximity;
}

.stats-tabs::-webkit-scrollbar{
    display:none;
}

.stats-tab{
    flex:0 0 auto !important;

    white-space:nowrap !important;

    scroll-snap-align:center;

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.stats-tab:active{
    transform:scale(.97);
}


/* =========================================================
   共通カード
========================================================= */

.stat-tile{
    box-sizing:border-box;

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

@media(hover:hover){

    .stat-tile:hover{
        background:
            var(--final-card-hover);

        border-color:
            var(--final-border-strong);

        transform:
            translateY(-1px);
    }
}


/* =========================================================
   Mobランキング
========================================================= */

#mob-kills,
#killed-by{
    align-items:stretch;
}

#mob-kills .stat-tile,
#killed-by .stat-tile{
    position:relative;

    overflow:hidden;
}


/* Mobアイコン枠 */

#mob-kills .stat-tile-icon-wrap,
#killed-by .stat-tile-icon-wrap,
#mob-kills .stat-icon-wrap,
#killed-by .stat-icon-wrap{

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

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(88,166,255,.10),
            rgba(13,17,23,.38) 70%
        ) !important;

    border:
        1px solid
        rgba(139,148,158,.40) !important;

    border-radius:
        13px !important;
}


/* Mob画像 */

#mob-kills img,
#killed-by img{

    object-fit:contain !important;

    image-rendering:pixelated;

    transform:
        translateZ(0);
}


/* =========================================================
   欠損アイコン
========================================================= */

.final-mob-fallback{
    width:100%;
    height:100%;

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

    gap:1px;

    color:#8b949e;

    background:
        radial-gradient(
            circle,
            rgba(88,166,255,.13),
            transparent 68%
        );

    user-select:none;
}

.final-mob-fallback-symbol{
    font-size:22px;
    line-height:1;
    font-weight:900;
}

.final-mob-fallback-text{
    font-size:8px;
    line-height:1;
    font-weight:800;
}


/* 以前の黒四角fallbackも改善 */

.stat-icon-fallback,
.mob-icon-fallback{

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

    color:#8b949e !important;

    background:
        radial-gradient(
            circle,
            rgba(88,166,255,.12),
            transparent 65%
        ) !important;
}


/* =========================================================
   MODバッジ
========================================================= */

.mob-mod-badge{
    display:inline-flex !important;
    align-items:center;

    width:max-content;
    max-width:100%;

    margin-top:4px;

    padding:
        2px 7px;

    border-radius:
        999px;

    font-size:
        10px !important;

    line-height:
        1.35;

    font-weight:
        800;

    white-space:
        nowrap;
}


/* 黄昏の森 */

#mob-kills .mob-mod-badge,
#killed-by .mob-mod-badge{

    color:#d2a8ff;

    background:
        rgba(163,113,247,.12);

    border:
        1px solid
        rgba(163,113,247,.30);
}


/* =========================================================
   順位
========================================================= */

#mob-kills .stat-tile-rank,
#killed-by .stat-tile-rank,
#mob-kills .rank-badge,
#killed-by .rank-badge{

    z-index:2;

    font-variant-numeric:
        tabular-nums;
}


/* TOP3 */

#mob-kills .stat-tile:nth-child(1),
#killed-by .stat-tile:nth-child(1){
    border-color:
        rgba(255,215,0,.50) !important;
}

#mob-kills .stat-tile:nth-child(2),
#killed-by .stat-tile:nth-child(2){
    border-color:
        rgba(192,192,192,.50) !important;
}

#mob-kills .stat-tile:nth-child(3),
#killed-by .stat-tile:nth-child(3){
    border-color:
        rgba(205,127,50,.48) !important;
}


/* =========================================================
   進捗カード
========================================================= */

.adv-card{
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

@media(hover:hover){

    .adv-card:hover{
        transform:
            translateY(-1px);
    }
}

.adv-icon,
.adv-icon-wrap img{
    image-rendering:
        pixelated;
}


/* =========================================================
   PC / Tablet
========================================================= */

@media(min-width:701px){

    #mob-kills.stat-tile-grid,
    #killed-by.stat-tile-grid{

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

        gap:
            10px !important;
    }

    #mob-kills .stat-tile,
    #killed-by .stat-tile{

        min-height:
            92px !important;
    }

}


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

@media(max-width:700px){

    body{
        font-size:
            14px;
    }


    /* -----------------------------------------
       コンテンツ幅
    ----------------------------------------- */

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

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /* -----------------------------------------
       上部タブ
    ----------------------------------------- */

    .stats-tabs{

        position:sticky;

        top:0;

        z-index:50;

        margin-left:-6px;
        margin-right:-6px;

        padding:
            6px 8px
            7px !important;

        background:
            rgba(13,17,23,.96);

        border-radius:
            0 !important;

        backdrop-filter:
            blur(15px);

        -webkit-backdrop-filter:
            blur(15px);
    }


    .stats-tab{

        min-width:auto !important;

        padding:
            9px 13px !important;

        border-radius:
            10px !important;

        font-size:
            13px !important;

        font-weight:
            800 !important;
    }


    /* -----------------------------------------
       Mobランキング 1列
    ----------------------------------------- */

    #mob-kills.stat-tile-grid,
    #killed-by.stat-tile-grid{

        display:grid !important;

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

        gap:
            7px !important;
    }


    /* -----------------------------------------
       Mobカード
    ----------------------------------------- */

    #mob-kills .stat-tile,
    #killed-by .stat-tile{

        display:grid !important;

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

        grid-template-rows:
            auto auto auto;

        column-gap:
            11px !important;

        row-gap:
            1px !important;

        align-items:center !important;

        min-height:
            82px !important;

        padding:
            8px
            9px !important;

        border-radius:
            13px !important;
    }


    /* -----------------------------------------
       アイコン
    ----------------------------------------- */

    #mob-kills .stat-tile-icon-wrap,
    #killed-by .stat-tile-icon-wrap,
    #mob-kills .stat-icon-wrap,
    #killed-by .stat-icon-wrap{

        grid-column:1;
        grid-row:1 / span 3;

        width:
            60px !important;

        height:
            60px !important;

        min-width:
            60px !important;

        margin:
            0 !important;
    }


    #mob-kills .stat-tile-icon,
    #killed-by .stat-tile-icon,
    #mob-kills .stat-icon,
    #killed-by .stat-icon,
    #mob-kills .stat-tile-icon-wrap img,
    #killed-by .stat-tile-icon-wrap img{

        width:
            54px !important;

        height:
            54px !important;

        max-width:
            54px !important;

        max-height:
            54px !important;

        margin:
            0 !important;

        object-fit:
            contain !important;
    }


    /* -----------------------------------------
       Mob名
    ----------------------------------------- */

    #mob-kills .stat-tile-name,
    #killed-by .stat-tile-name{

        grid-column:2;
        grid-row:1;

        min-width:0;

        align-self:end;

        margin:
            0 !important;

        font-size:
            15px !important;

        line-height:
            1.2 !important;

        font-weight:
            850 !important;

        white-space:
            normal !important;

        overflow-wrap:
            anywhere;

        word-break:
            normal;

        display:
            -webkit-box;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden;
    }


    /* -----------------------------------------
       MODバッジ
    ----------------------------------------- */

    #mob-kills .mob-mod-badge,
    #killed-by .mob-mod-badge{

        grid-column:2;
        grid-row:2;

        margin-top:
            2px !important;

        font-size:
            8px !important;

        padding:
            1px 6px !important;
    }


    /* -----------------------------------------
       回数
    ----------------------------------------- */

    #mob-kills .stat-tile-value,
    #killed-by .stat-tile-value{

        grid-column:2;
        grid-row:3;

        align-self:start;

        margin:
            2px 0 0 !important;

        font-size:
            17px !important;

        line-height:
            1.15 !important;

        font-weight:
            900 !important;

        font-variant-numeric:
            tabular-nums;
    }


    /* -----------------------------------------
       順位
    ----------------------------------------- */

    #mob-kills .stat-tile-rank,
    #killed-by .stat-tile-rank,
    #mob-kills .rank-badge,
    #killed-by .rank-badge{

        grid-column:3;
        grid-row:1 / span 3;

        position:static !important;

        align-self:center;

        min-width:
            34px !important;

        height:
            25px;

        display:flex !important;

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

        margin:
            0 !important;

        padding:
            0 5px !important;

        border-radius:
            999px !important;

        background:
            rgba(139,148,158,.10);

        border:
            1px solid
            rgba(139,148,158,.18);

        color:
            #9da7b3 !important;

        font-size:
            11px !important;

        font-weight:
            900 !important;

        text-align:
            center !important;
    }


    /* -----------------------------------------
       採掘 / アイテム
    ----------------------------------------- */

    #mined.stat-tile-grid,
    #used.stat-tile-grid,
    #picked-up.stat-tile-grid,
    #dropped.stat-tile-grid,
    #broken.stat-tile-grid,
    #crafted.stat-tile-grid{

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

        gap:
            7px !important;
    }


    #mined .stat-tile,
    #used .stat-tile,
    #picked-up .stat-tile,
    #dropped .stat-tile,
    #broken .stat-tile,
    #crafted .stat-tile{

        min-height:
            105px !important;

        padding:
            8px !important;
    }


    /* -----------------------------------------
       全統計
    ----------------------------------------- */

    .full-stat-grid{
        grid-template-columns:
            1fr !important;

        gap:
            7px !important;
    }


    /* -----------------------------------------
       進捗
    ----------------------------------------- */

    .adv-card{
        padding:
            10px !important;

        border-radius:
            13px !important;
    }

    .adv-icon-wrap{
        width:
            46px !important;

        height:
            46px !important;
    }

    .adv-icon{
        width:
            40px !important;

        height:
            40px !important;
    }


    /* -----------------------------------------
       長いIDなど
    ----------------------------------------- */

    .full-stat-raw{
        overflow-wrap:
            anywhere;

        word-break:
            break-all;
    }

}


/* =========================================================
   小型スマホ
========================================================= */

@media(max-width:390px){

    #mob-kills .stat-tile,
    #killed-by .stat-tile{

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

    #mob-kills .stat-tile-icon-wrap,
    #killed-by .stat-tile-icon-wrap,
    #mob-kills .stat-icon-wrap,
    #killed-by .stat-icon-wrap{

        width:
            54px !important;

        height:
            54px !important;

        min-width:
            54px !important;
    }

    #mob-kills .stat-tile-icon,
    #killed-by .stat-tile-icon,
    #mob-kills .stat-icon,
    #killed-by .stat-icon,
    #mob-kills .stat-tile-icon-wrap img,
    #killed-by .stat-tile-icon-wrap img{

        width:
            49px !important;

        height:
            49px !important;
    }

    #mined.stat-tile-grid,
    #used.stat-tile-grid,
    #picked-up.stat-tile-grid,
    #dropped.stat-tile-grid,
    #broken.stat-tile-grid,
    #crafted.stat-tile-grid{

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

}


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

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

    *,
    *::before,
    *::after{

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}