/* Shared design system for mc.foliarn.com, reproducing the original
   AdvancementTracker mod's Minecraft-GUI visual language (bevelled panels,
   pixel text shadows, MC chat colors) so the landing page and /stats match. */

@font-face {
    font-family: 'Minecraft Regular';
    src: url('fonts/1_MinecraftRegular1.woff') format('woff');
}
@font-face {
    font-family: 'Minecraft Italic';
    src: url('fonts/2_MinecraftItalic1.woff') format('woff');
}
@font-face {
    font-family: 'Minecraft Bold';
    src: url('fonts/3_MinecraftBold1.woff') format('woff');
}
@font-face {
    font-family: 'Minecraft Bold Italic';
    src: url('fonts/4_MinecraftBoldItalic1.woff') format('woff');
}

:root {
    --mc-bg-top: #2b2b2b;
    --mc-bg-bottom: #1a1a1a;
    --mc-panel: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    --mc-panel-light: #3a3a3a;
    --mc-panel-dark: #2a2a2a;
    --mc-black: #000000;

    --mc-yellow: #ffff55;
    --mc-green: #55ff55;
    --mc-aqua: #55ffff;
    --mc-pink: #ff55ff;
    --mc-red: #ff5555;
    --mc-white: #ffffff;
    --mc-gray: #aaaaaa;

    --mc-gold-light: rgb(219, 162, 19);
    --mc-gold-dark: rgb(73, 54, 6);
    --mc-diamond-light: rgb(79, 235, 217);
    --mc-diamond-dark: rgb(25, 119, 126);
    --mc-emerald-light: rgb(30, 222, 102);
    --mc-emerald-dark: rgb(8, 88, 8);
    --mc-gold-tier-light: rgb(250, 215, 79);
    --mc-gold-tier-dark: rgb(180, 104, 24);
    --mc-iron-light: rgb(217, 217, 217);
    --mc-iron-dark: rgb(99, 99, 99);
    --mc-copper-light: rgb(232, 126, 90);
    --mc-copper-dark: rgb(158, 73, 46);

    --mc-awarded-bg: rgba(185, 143, 44, 1);
    --mc-challenge: #ff55ff;
    --mc-goal: #55ffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft Regular', 'Courier New', monospace;
    background: linear-gradient(to bottom, var(--mc-bg-top) 0%, var(--mc-bg-bottom) 100%);
    background-attachment: fixed;
    color: #fff;
    min-height: 100vh;
}

.page {
    padding: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Top navbar (injected by nav.js on every page) ──────────────────── */
.mc-navbar {
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid var(--mc-black);
    box-shadow: inset 0 -3px var(--mc-gold-dark);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.mc-navbar .brand {
    font-family: 'Minecraft Bold', monospace;
    color: var(--mc-yellow);
    text-decoration: none;
    text-shadow: 2px 2px 0 #000;
    font-size: 16px;
    white-space: nowrap;
}

.mc-navbar .links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.mc-navbar a.link {
    color: var(--mc-gray);
    text-decoration: none;
    text-shadow: 1px 1px 0 #000;
    font-size: 13px;
    transition: color 0.15s;
}
.mc-navbar a.link:hover { color: var(--mc-yellow); }
.mc-navbar a.link.active { color: var(--mc-green); }

.mc-navbar .auth-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mc-green);
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}
.mc-navbar .auth-item img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    image-rendering: pixelated;
}
.mc-navbar .auth-item.disabled { color: #555; }

@media (max-width: 700px) {
    .mc-navbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
    .mc-navbar .links { gap: 14px; font-size: 12px; }
}

/* ── Bevelled gold header panel ─────────────────────────────────────── */
.mc-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 24px 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--mc-black);
    box-shadow:
        inset 0 3px var(--mc-gold-light),
        inset 0 -3px var(--mc-gold-dark),
        inset 3px 0 var(--mc-gold-light),
        inset -3px 0 var(--mc-gold-dark);
}

.mc-header h1 {
    font-family: 'Minecraft Bold', 'Courier New', monospace;
    font-size: 36px;
    text-shadow: 3px 3px 0px #3f3f3f;
    color: var(--mc-yellow);
    margin-bottom: 8px;
}

.mc-header .subtitle {
    color: var(--mc-gray);
    text-shadow: 1px 1px 0px #000;
    font-size: 14px;
}

.mc-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.mc-nav a {
    color: var(--mc-green);
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    font-size: 14px;
}
.mc-nav a:hover { color: var(--mc-yellow); }
.mc-nav a.active { color: var(--mc-yellow); }

/* ── Grey bevelled panel, the base card used everywhere ─────────────── */
.mc-panel {
    background: var(--mc-panel);
    border: 2px solid var(--mc-black);
    box-shadow:
        inset 0 6px var(--mc-panel-light),
        inset 0 -6px var(--mc-panel-dark),
        inset 6px 0 var(--mc-panel-light),
        inset -6px 0 var(--mc-panel-dark);
    padding: 20px;
    border-radius: 8px;
}

.mc-panel.rank-diamond {
    box-shadow: inset 0 6px var(--mc-diamond-light), inset 0 -6px var(--mc-diamond-dark),
        inset 6px 0 var(--mc-diamond-light), inset -6px 0 var(--mc-diamond-dark);
}
.mc-panel.rank-emerald {
    box-shadow: inset 0 6px var(--mc-emerald-light), inset 0 -6px var(--mc-emerald-dark),
        inset 6px 0 var(--mc-emerald-light), inset -6px 0 var(--mc-emerald-dark);
}
.mc-panel.rank-gold {
    box-shadow: inset 0 6px var(--mc-gold-tier-light), inset 0 -6px var(--mc-gold-tier-dark),
        inset 6px 0 var(--mc-gold-tier-light), inset -6px 0 var(--mc-gold-tier-dark);
}
.mc-panel.rank-iron {
    box-shadow: inset 0 6px var(--mc-iron-light), inset 0 -6px var(--mc-iron-dark),
        inset 6px 0 var(--mc-iron-light), inset -6px 0 var(--mc-iron-dark);
}
.mc-panel.rank-copper {
    box-shadow: inset 0 6px var(--mc-copper-light), inset 0 -6px var(--mc-copper-dark),
        inset 6px 0 var(--mc-copper-light), inset -6px 0 var(--mc-copper-dark);
}

.rank-diamond-text { color: var(--mc-diamond-light); }
.rank-emerald-text { color: var(--mc-emerald-light); }
.rank-gold-text { color: var(--mc-gold-tier-light); }
.rank-iron-text { color: var(--mc-iron-light); }
.rank-copper-text { color: var(--mc-copper-light); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.mc-btn {
    font-family: 'Minecraft Regular', monospace;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #4a8f3c 0%, #3c7530 100%);
    border: 2px solid #000;
    box-shadow: inset 0 3px #6cb85c, inset 0 -3px #1c3a17, inset 3px 0 #6cb85c, inset -3px 0 #1c3a17;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    text-shadow: 1px 1px 0 #000;
}
.mc-btn:active { transform: translateY(1px); }

.mc-btn.secondary {
    background: linear-gradient(135deg, #3c6e8f 0%, #2f5975 100%);
    box-shadow: inset 0 3px #5ca0c0, inset 0 -3px #172e3a, inset 3px 0 #5ca0c0, inset -3px 0 #172e3a;
}

/* ── Progress bars ───────────────────────────────────────────────────── */
.mc-progress-container {
    background: #1a1a1a;
    border: 2px solid #000;
    height: 24px;
    position: relative;
    overflow: hidden;
}
.mc-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--mc-green) 0%, #33dd33 100%);
    transition: width 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.mc-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    font-weight: bold;
    font-size: 13px;
}

/* ── OG leaderboard: single grid of large player cards ──────────────── */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.player-card {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 2px solid var(--mc-black);
    box-shadow:
        inset 0 6px rgb(58, 58, 58), inset 0 -6px rgb(42, 42, 42),
        inset 6px 0 rgb(58, 58, 58), inset -6px 0 rgb(42, 42, 42);
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.15s;
    cursor: pointer;
}
.player-card:hover { transform: translateY(-2px); }

.player-card.rank-diamond { box-shadow: inset 0 6px var(--mc-diamond-light), inset 0 -6px var(--mc-diamond-dark), inset 6px 0 var(--mc-diamond-light), inset -6px 0 var(--mc-diamond-dark); }
.player-card.rank-emerald { box-shadow: inset 0 6px var(--mc-emerald-light), inset 0 -6px var(--mc-emerald-dark), inset 6px 0 var(--mc-emerald-light), inset -6px 0 var(--mc-emerald-dark); }
.player-card.rank-gold    { box-shadow: inset 0 6px var(--mc-gold-tier-light), inset 0 -6px var(--mc-gold-tier-dark), inset 6px 0 var(--mc-gold-tier-light), inset -6px 0 var(--mc-gold-tier-dark); }
.player-card.rank-iron    { box-shadow: inset 0 6px var(--mc-iron-light), inset 0 -6px var(--mc-iron-dark), inset 6px 0 var(--mc-iron-light), inset -6px 0 var(--mc-iron-dark); }
.player-card.rank-copper  { box-shadow: inset 0 6px var(--mc-copper-light), inset 0 -6px var(--mc-copper-dark), inset 6px 0 var(--mc-copper-light), inset -6px 0 var(--mc-copper-dark); }

.player-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5a5a5a;
}

.player-avatar {
    width: 64px;
    height: 64px;
    margin-right: 15px;
    image-rendering: pixelated;
    border: 2px solid #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.player-info { flex: 1; min-width: 0; }

.player-name {
    font-size: 22px;
    color: var(--mc-green);
    text-shadow: 2px 2px 0px #000000;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-stats { display: flex; gap: 15px; font-size: 13px; }
.player-stats .stat { color: var(--mc-gray); text-shadow: 1px 1px 0 #000; }
.player-stats .stat-value { color: var(--mc-yellow); }

.player-rank {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px 0px #000;
    padding: 0 15px;
    flex-shrink: 0;
}
.player-rank.rank-diamond-text { color: var(--mc-diamond-light); }
.player-rank.rank-emerald-text { color: var(--mc-emerald-light); }
.player-rank.rank-gold-text    { color: var(--mc-gold-tier-light); }
.player-rank.rank-iron-text    { color: var(--mc-iron-light); }
.player-rank.rank-copper-text  { color: var(--mc-copper-light); }

.advancements-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 15px;
    scrollbar-width: thin;
    scrollbar-color: #888 #1a1a1a;
}
.advancements-list::-webkit-scrollbar { width: 10px; }
.advancements-list::-webkit-scrollbar-track { background: #1a1a1a; border: 1px solid #000; }
.advancements-list::-webkit-scrollbar-thumb { background: #5a5a5a; border: 1px solid #000; }
.advancements-list::-webkit-scrollbar-thumb:hover { background: #6a6a6a; }

.advancement {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.advancement:hover { background: rgba(0, 0, 0, 0.6); }
.advancement.awarded {
    background: var(--mc-awarded-bg);
    box-shadow: inset 0 3px rgb(219,162,19), inset 0 -3px rgb(73,54,6),
        inset 3px 0 rgb(219,162,19), inset -3px 0 rgb(73,54,6);
}
.advancement.challenge { border-color: var(--mc-challenge); background: rgba(255,85,255,0.1); }
.advancement.goal      { border-color: var(--mc-goal); background: rgba(85,255,255,0.1); }
.advancement.remaining { opacity: 0.55; }

.advancement-icon { width: 32px; height: 32px; margin-right: 12px; image-rendering: pixelated; flex-shrink: 0; }
.advancement-content { flex: 1; min-width: 0; }
.advancement-title { font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #3e3e3e; }
.advancement.awarded .advancement-title { text-shadow: 1px 1px 0 #000; }
.advancement.challenge .advancement-title { color: var(--mc-challenge); }
.advancement.goal .advancement-title { color: #55ff55; }
.advancement-description { font-size: 11px; color: var(--mc-green); text-shadow: 1px 1px 0 #000; margin-top: 2px; }

/* ── Player detail overlay (stats: click a card) ────────────────────── */
.detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 50;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.detail-overlay.open { display: flex; }
.detail-modal { max-width: 640px; width: 100%; }
.detail-modal .close-btn { float: right; }

.stat-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.stat-tile { text-align: center; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 3px; }
.stat-tile .v { color: var(--mc-yellow); font-size: 16px; text-shadow: 1px 1px 0 #000; }
.stat-tile .l { color: var(--mc-gray); font-size: 10px; text-shadow: 1px 1px 0 #000; margin-top: 2px; }

/* ── Pixel icons ─────────────────────────────────────────────────────── */
.mc-icon {
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* ── Status badge ────────────────────────────────────────────────────── */
.mc-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}
.mc-status .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mc-green);
    box-shadow: 0 0 6px var(--mc-green);
}
.mc-status.offline .dot {
    background: var(--mc-red);
    box-shadow: 0 0 6px var(--mc-red);
}
.mc-status.offline { color: var(--mc-red); }
.mc-status.online { color: var(--mc-green); }

footer.mc-footer {
    text-align: center;
    color: #666;
    font-size: 11px;
    margin-top: 40px;
    text-shadow: 1px 1px 0 #000;
}