/* =========================================================
   Player Stats - Final UI Polish
========================================================= */

:root{
    --panel:#161b22;
    --panel2:#111820;
    --border:#30363d;
    --muted:#8b949e;
    --blue:#58a6ff;
    --green:#3fb950;
    --yellow:#d29922;
    --purple:#a371f7;
    --red:#f85149;
}

/* ページをさらに広く使用 */
.header-inner,
main{
    max-width:1900px;
    width:calc(100% - 28px);
}

.player-title,
#status{
    display:none;
}

/* =========================================================
   PROFILE
========================================================= */

.player-profile{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:20px;
    align-items:center;

    margin:12px 0 16px;
    padding:20px;

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

    background:
        radial-gradient(
            circle at 0 0,
            rgba(88,166,255,.15),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #161b22,
            #111820
        );
}

.player-profile::after{
    content:"";
    position:absolute;
    inset:auto -80px -120px auto;
    width:300px;
    height:300px;
    background:rgba(163,113,247,.08);
    border-radius:50%;
    pointer-events:none;
}

.profile-avatar{
    width:96px;
    height:96px;
    border-radius:15px;
    border:2px solid #58a6ff55;
    background:#0d1117;
    image-rendering:pixelated;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.profile-main{
    min-width:0;
}

.profile-name-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.profile-name{
    margin:0;
    font-size:30px;
    font-weight:850;
    overflow-wrap:anywhere;
}

.profile-live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:5px 9px;
    font-size:11px;
    font-weight:850;
}

.profile-live.online{
    color:var(--green);
    background:#23863622;
}

.profile-live.offline{
    color:var(--muted);
    background:#30363d55;
}

.profile-live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.profile-sub{
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}

.profile-kpis{
    display:grid;
    grid-template-columns:repeat(5,minmax(110px,1fr));
    gap:9px;
    margin-top:16px;
}

.profile-kpi{
    min-width:0;
    background:#0d111799;
    border:1px solid var(--border);
    border-radius:11px;
    padding:10px 12px;
}

.profile-kpi-label{
    color:var(--muted);
    font-size:11px;
}

.profile-kpi-value{
    margin-top:4px;
    font-size:17px;
    font-weight:850;
    font-variant-numeric:tabular-nums;
}

/* =========================================================
   GLOBAL SEARCH
========================================================= */

.global-search-shell{
    position:relative;
    margin-bottom:16px;
}

.global-search{
    width:100%;
    border:1px solid var(--border);
    background:#0d1117;
    color:#e6edf3;
    border-radius:13px;
    padding:14px 16px;
    font-size:15px;
    outline:none;
}

.global-search:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(88,166,255,.10);
}

.global-search-results{
    display:none;
    position:absolute;
    z-index:100;
    top:calc(100% + 6px);
    left:0;
    right:0;

    max-height:560px;
    overflow:auto;

    background:#111820;
    border:1px solid var(--border);
    border-radius:13px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.global-search-results.open{
    display:block;
}

.global-search-result{
    width:100%;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    text-align:left;

    border:0;
    border-bottom:1px solid #21262d;
    background:transparent;
    color:#e6edf3;

    padding:10px 12px;
    cursor:pointer;
}

.global-search-result:hover{
    background:#161b22;
}

.global-search-result:last-child{
    border-bottom:0;
}

.search-result-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#0d1117;
}

.search-result-icon img{
    width:32px;
    height:32px;
    object-fit:contain;
    image-rendering:pixelated;
}

.search-result-title{
    font-weight:750;
    overflow-wrap:anywhere;
}

.search-result-sub{
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
    overflow-wrap:anywhere;
}

.search-result-type{
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
}

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

.overview-dashboard{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);
    gap:15px;
    margin-bottom:18px;
}

.overview-panel{
    min-width:0;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--panel2);
    padding:15px;
}

.overview-panel-title{
    margin:0 0 12px;
    font-size:15px;
    font-weight:850;
}

.overview-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(120px,1fr));
    gap:9px;
}

.overview-highlight{
    border-radius:12px;
    padding:13px;
    background:#161b22;
    border:1px solid var(--border);
}

.overview-highlight-label{
    color:var(--muted);
    font-size:11px;
}

.overview-highlight-value{
    margin-top:6px;
    font-weight:850;
    font-size:20px;
}

.overview-progress{
    height:9px;
    margin-top:9px;
    background:#21262d;
    border-radius:999px;
    overflow:hidden;
}

.overview-progress > div{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#238636,#3fb950);
}

.overview-mob-list{
    display:grid;
    gap:7px;
}

.overview-mob-row{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    border-radius:10px;
    padding:7px 9px;
    background:#161b22;
    border:1px solid #30363d;
}

.overview-mob-row img{
    width:32px;
    height:32px;
    object-fit:contain;
    image-rendering:pixelated;
}

.overview-mob-count{
    font-weight:850;
    font-variant-numeric:tabular-nums;
}

/* =========================================================
   TABS
========================================================= */

.stats-tabs{
    position:sticky;
    top:76px;
    z-index:8;
    background:rgba(13,17,23,.94);
    backdrop-filter:blur(10px);
    padding:8px 4px;
    border:1px solid #30363d;
    border-radius:12px;
    margin-top:12px;
}

.stats-tab{
    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.stats-tab:hover{
    transform:translateY(-1px);
}

/* =========================================================
   DATA DENSITY
========================================================= */

.stat-tile-grid{
    grid-template-columns:
        repeat(auto-fill,minmax(210px,1fr)) !important;
    gap:9px !important;
}

.stat-tile{
    min-height:80px;
}

/* namespace accents */

.stat-tile.ns-minecraft{
    border-left:3px solid #58a6ff !important;
}

.stat-tile.ns-twilightforest{
    border-left:3px solid #a371f7 !important;
}

.stat-tile.ns-farmersdelight{
    border-left:3px solid #d29922 !important;
}

.stat-tile.ns-pamhc2{
    border-left:3px solid #3fb950 !important;
}

/* =========================================================
   MOB PODIUM
========================================================= */

#mob-kills .stat-tile:nth-child(1),
#mob-kills .stat-tile:nth-child(2),
#mob-kills .stat-tile:nth-child(3){
    min-height:105px;
}

#mob-kills .stat-tile:nth-child(1){
    border-color:#ffd700;
    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,.10),
            #161b22 45%
        );
}

#mob-kills .stat-tile:nth-child(2){
    border-color:#c0c0c0;
}

#mob-kills .stat-tile:nth-child(3){
    border-color:#cd7f32;
}

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

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

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

.adv-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.20);
}

.adv-card.done{
    background:
        linear-gradient(
            135deg,
            rgba(63,185,80,.06),
            #161b22 34%
        );
}

.adv-card.pending{
    background:
        linear-gradient(
            135deg,
            rgba(210,153,34,.05),
            #161b22 34%
        );
}

/* recipe pagination */

.recipe-pager{
    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin:18px 0 4px;
}

.recipe-pager.active{
    display:flex;
}

.recipe-page-btn{
    min-width:38px;
    min-height:36px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#161b22;
    color:#e6edf3;
    font-weight:750;
    cursor:pointer;
}

.recipe-page-btn:hover{
    border-color:var(--blue);
}

.recipe-page-btn.active{
    background:#1f6feb;
    border-color:#58a6ff;
}

.recipe-page-btn:disabled{
    opacity:.35;
    cursor:default;
}

/* =========================================================
   TWILIGHT FOREST DASHBOARD
========================================================= */

.twilight-dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:9px;
    margin-bottom:18px;
}

.twilight-progress-card{
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
    align-items:center;

    background:#161b22;
    border:1px solid #30363d;
    border-left:3px solid #a371f7;
    border-radius:12px;
    padding:10px;
}

.twilight-progress-card.done{
    border-left-color:#3fb950;
}

.twilight-progress-card.started{
    border-left-color:#d29922;
}

.twilight-progress-card img{
    width:40px;
    height:40px;
    object-fit:contain;
    image-rendering:pixelated;
}

.twilight-progress-name{
    font-size:13px;
    font-weight:800;
}

.twilight-progress-state{
    margin-top:3px;
    color:#8b949e;
    font-size:11px;
}

.twilight-progress-card.done .twilight-progress-state{
    color:#3fb950;
}

.twilight-progress-card.started .twilight-progress-state{
    color:#d29922;
}

/* =========================================================
   MOD COLORS
========================================================= */

.namespace-pill{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:2px 7px;
    margin-left:6px;
    font-size:9px;
    font-weight:800;
    vertical-align:middle;
}

.namespace-pill.minecraft{
    color:#79c0ff;
    background:#1f6feb22;
}

.namespace-pill.twilightforest{
    color:#d2a8ff;
    background:#a371f722;
}

.namespace-pill.farmersdelight{
    color:#e3b341;
    background:#d2992222;
}

.namespace-pill.pamhc2{
    color:#56d364;
    background:#23863622;
}

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

@media(max-width:1050px){
    .player-profile{
        grid-template-columns:80px minmax(0,1fr);
    }

    .profile-avatar{
        width:76px;
        height:76px;
    }

    .profile-kpis{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .overview-dashboard{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .header-inner,
    main{
        width:calc(100% - 18px);
    }

    .player-profile{
        grid-template-columns:58px minmax(0,1fr);
        gap:12px;
        padding:13px;
    }

    .profile-avatar{
        width:56px;
        height:56px;
        border-radius:10px;
    }

    .profile-name{
        font-size:22px;
    }

    .profile-kpis{
        grid-column:1/-1;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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

    .stats-tabs{
        top:68px;
    }

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

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

@media(max-width:390px){
    .stat-tile-grid{
        grid-template-columns:1fr !important;
    }

    .overview-highlight-grid{
        grid-template-columns:1fr;
    }
}